From ecf365b6693aebf0a19be6a1cc0b325542465c9a Mon Sep 17 00:00:00 2001 From: msmx-mnakagawa Date: Fri, 25 Jul 2025 07:31:18 +0900 Subject: [PATCH 1/6] Revert "(Picklist): rename `buttonRef` with `inputRef`" This reverts commit 9d8c62079f0b45291a89631b37b34b43a49b6c28. --- src/scripts/Picklist.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx index 38010492..95de8f64 100644 --- a/src/scripts/Picklist.tsx +++ b/src/scripts/Picklist.tsx @@ -174,7 +174,7 @@ export type PicklistProps = { tooltip?: ReactNode; tooltipIcon?: string; elementRef?: Ref; - inputRef?: Ref; + buttonRef?: Ref; dropdownRef?: Ref; onValueChange?: Bivariant< ( @@ -216,7 +216,7 @@ export const Picklist: (( tooltip, tooltipIcon, elementRef: elementRef_, - inputRef: inputRef_, + buttonRef: buttonRef_, dropdownRef: dropdownRef_, onSelect, onComplete, @@ -339,7 +339,7 @@ export const Picklist: (( const elRef = useRef(null); const elementRef = useMergeRefs([elRef, elementRef_]); const comboboxElRef = useRef(null); - const inputRef = useMergeRefs([comboboxElRef, inputRef_]); + const buttonRef = useMergeRefs([comboboxElRef, buttonRef_]); const dropdownElRef = useRef(null); const dropdownRef = useMergeRefs([dropdownElRef, dropdownRef_]); @@ -573,7 +573,7 @@ export const Picklist: (( role='none' >
Date: Fri, 25 Jul 2025 07:33:21 +0900 Subject: [PATCH 2/6] (Picklist, Lookup): convert tags of elements with `role="combobox"` to `button`s --- src/scripts/Lookup.tsx | 5 +++-- src/scripts/Picklist.tsx | 9 +++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx index 1aa9059f..9728ae72 100644 --- a/src/scripts/Lookup.tsx +++ b/src/scripts/Lookup.tsx @@ -152,7 +152,8 @@ const LookupSelectedState: FC = ({ size='small' /> )} -
= ({ aria-expanded='false' > {selected.label} -
+ Date: Tue, 29 Jul 2025 11:43:19 +0900 Subject: [PATCH 3/6] (Picklist): execute `extractTextContent()` inside `extractTextContent()` --- src/scripts/Picklist.tsx | 41 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx index 3734a721..f40e715e 100644 --- a/src/scripts/Picklist.tsx +++ b/src/scripts/Picklist.tsx @@ -67,7 +67,7 @@ function collectOptionValues(children: unknown): PicklistValue[] { function findSelectedItemLabel( children: unknown, selectedValue: PicklistValue -): React.ReactNode | null { +): string | number | null { return ( React.Children.map(children, (child) => { if (!React.isValidElement(child)) { @@ -107,14 +107,14 @@ function findSelectedItemLabel( typeof label === 'string' || typeof label === 'number' || React.isValidElement(label) - ? label + ? extractTextContent(label) : undefined; const childrenValue = typeof itemChildren === 'string' || typeof itemChildren === 'number' || React.isValidElement(itemChildren) || Array.isArray(itemChildren) - ? itemChildren + ? extractTextContent(itemChildren) : undefined; return labelValue || childrenValue; @@ -122,6 +122,41 @@ function findSelectedItemLabel( ); } +/** + * Extract text content from React node recursively + */ +function extractTextContent(node: unknown): string | number | null { + if (node == null) { + return null; + } + + if (typeof node === 'string' || typeof node === 'number') { + return node; + } + + if (typeof node === 'boolean') { + return String(node); + } + + if (Array.isArray(node)) { + return node + .map(extractTextContent) + .filter((result) => result !== null) + .join(''); + } + + if ( + React.isValidElement(node) && + node.props && + typeof node.props === 'object' && + 'children' in node.props + ) { + return extractTextContent(node.props.children); + } + + return null; +} + /** * */ From 4adb6643f4a1384be6f2fa78a7fd3da629cccc87 Mon Sep 17 00:00:00 2001 From: msmx-mnakagawa Date: Tue, 29 Jul 2025 11:45:55 +0900 Subject: [PATCH 4/6] (Picklist, Lookup): use inputs with `type="text"` for better a11y --- src/scripts/Lookup.tsx | 11 ++++++----- src/scripts/Picklist.tsx | 21 +++++++++++---------- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx index 9728ae72..ebaa3a57 100644 --- a/src/scripts/Lookup.tsx +++ b/src/scripts/Lookup.tsx @@ -152,17 +152,18 @@ const LookupSelectedState: FC = ({ size='small' /> )} - + /> + value={selectedItemLabel} + readOnly + disabled={disabled} + /> Date: Tue, 29 Jul 2025 12:55:05 +0900 Subject: [PATCH 5/6] tweak a style of `Picklist` input --- src/scripts/Picklist.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx index b05fc86a..0ab4d443 100644 --- a/src/scripts/Picklist.tsx +++ b/src/scripts/Picklist.tsx @@ -17,7 +17,7 @@ import { FormElement, FormElementProps } from './FormElement'; import { Icon } from './Icon'; import { AutoAlign, RectangleAlignment } from './AutoAlign'; import { DropdownMenuProps } from './DropdownMenu'; -import { isElInChildren } from './util'; +import { registerStyle, isElInChildren } from './util'; import { ComponentSettingsContext } from './ComponentSettings'; import { useControlledValue, useEventCallback, useMergeRefs } from './hooks'; import { createFC } from './common'; @@ -185,6 +185,18 @@ const PicklistContext = createContext<{ optionIdPrefix: '', }); +/** + * + */ +function useInitComponentStyle() { + useEffect(() => { + registerStyle('picklist', [ + ['.react-picklist-input:focus-visible', '{ outline: none; }'], + ['.react-picklist-input:not(:disabled)', '{ cursor: pointer; }'], + ]); + }, []); +} + /** * */ @@ -262,6 +274,8 @@ export const Picklist: (( ...rprops } = props; + useInitComponentStyle(); + const fallbackId = useId(); const id = id_ ?? fallbackId; const listboxId = `${id}-listbox`; @@ -557,6 +571,7 @@ export const Picklist: (( } ); const inputClassNames = classnames( + 'react-picklist-input', 'slds-input_faux', 'slds-combobox__input', { From 42543c59d13fa01fee1873c6906e65180e566a6d Mon Sep 17 00:00:00 2001 From: msmx-mnakagawa Date: Tue, 29 Jul 2025 13:18:26 +0900 Subject: [PATCH 6/6] (Picklist): remove a style disabling a focus outline --- src/scripts/Picklist.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx index dd9d493c..8c192204 100644 --- a/src/scripts/Picklist.tsx +++ b/src/scripts/Picklist.tsx @@ -191,7 +191,6 @@ const PicklistContext = createContext<{ function useInitComponentStyle() { useEffect(() => { registerStyle('picklist', [ - ['.react-picklist-input:focus-visible', '{ outline: none; }'], ['.react-picklist-input:not(:disabled)', '{ cursor: pointer; }'], ]); }, []);