Merge pull request #496 from mashmatrix/support-slds-2-convert-comboboxes-to-buttons

Revert `combobox`es to `button`s for SLDS2

Author: stomita

src/scripts/Lookup.tsx

@@ -152,18 +152,17 @@ const LookupSelectedState: FC<LookupSelectedStateProps> = ({
             size='small'
           />
         )}
-        <input
-          type='text'
-          readOnly
-          disabled={disabled}
-          value={selected.label}
+        <button
+          type='button'
           role='combobox'
           tabIndex={disabled ? -1 : 0}
           className='slds-input_faux slds-combobox__input slds-combobox__input-value'
           aria-controls={listboxId}
           aria-haspopup='listbox'
           aria-expanded='false'
-        />
+        >
+          <span className='slds-truncate'>{selected.label}</span>
+        </button>
         <Button
           type='icon'
           icon='close'

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 { registerStyle, isElInChildren } from './util';
+import { isElInChildren } from './util';
 import { ComponentSettingsContext } from './ComponentSettings';
 import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
 import { createFC } from './common';
@@ -67,7 +67,7 @@ function collectOptionValues(children: unknown): PicklistValue[] {
 function findSelectedItemLabel(
   children: unknown,
   selectedValue: PicklistValue
-): string | number | null {
+): React.ReactNode | null {
   return (
     React.Children.map(children, (child) => {
       if (!React.isValidElement(child)) {
@@ -107,56 +107,21 @@ function findSelectedItemLabel(
         typeof label === 'string' ||
         typeof label === 'number' ||
         React.isValidElement(label)
-          ? extractTextContent(label)
+          ? label
           : undefined;
       const childrenValue =
         typeof itemChildren === 'string' ||
         typeof itemChildren === 'number' ||
         React.isValidElement(itemChildren) ||
         Array.isArray(itemChildren)
-          ? extractTextContent(itemChildren)
+          ? itemChildren
           : undefined;
 
       return labelValue || childrenValue;
     }).find((result) => result !== null) ?? null
   );
 }
 
-/**
- * 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;
-}
-
 /**
  *
  */
@@ -185,17 +150,6 @@ const PicklistContext = createContext<{
   optionIdPrefix: '',
 });
 
-/**
- *
- */
-function useInitComponentStyle() {
-  useEffect(() => {
-    registerStyle('picklist', [
-      ['.react-picklist-input:not(:disabled)', '{ cursor: pointer; }'],
-    ]);
-  }, []);
-}
-
 /**
  *
  */
@@ -220,7 +174,7 @@ export type PicklistProps<MultiSelect extends boolean | undefined> = {
   tooltip?: ReactNode;
   tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
-  inputRef?: Ref<HTMLInputElement>;
+  buttonRef?: Ref<HTMLButtonElement>;
   dropdownRef?: Ref<HTMLDivElement>;
   onValueChange?: Bivariant<
     (
@@ -262,7 +216,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       tooltip,
       tooltipIcon,
       elementRef: elementRef_,
-      inputRef: inputRef_,
+      buttonRef: buttonRef_,
       dropdownRef: dropdownRef_,
       onSelect,
       onComplete,
@@ -273,8 +227,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       ...rprops
     } = props;
 
-    useInitComponentStyle();
-
     const fallbackId = useId();
     const id = id_ ?? fallbackId;
     const listboxId = `${id}-listbox`;
@@ -386,8 +338,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
 
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
-    const comboboxElRef = useRef<HTMLInputElement | null>(null);
-    const inputRef = useMergeRefs([comboboxElRef, inputRef_]);
+    const comboboxElRef = useRef<HTMLButtonElement | null>(null);
+    const buttonRef = useMergeRefs([comboboxElRef, buttonRef_]);
     const dropdownElRef = useRef<HTMLDivElement | null>(null);
     const dropdownRef = useMergeRefs([dropdownElRef, dropdownRef_]);
 
@@ -570,7 +522,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       }
     );
     const inputClassNames = classnames(
-      'react-picklist-input',
       'slds-input_faux',
       'slds-combobox__input',
       {
@@ -621,9 +572,9 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
               className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right'
               role='none'
             >
-              <input
-                type='text'
-                ref={inputRef}
+              <button
+                type='button'
+                ref={buttonRef}
                 role='combobox'
                 tabIndex={disabled ? -1 : 0}
                 className={inputClassNames}
@@ -637,11 +588,11 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 onClick={onClick}
                 onKeyDown={onKeyDown}
                 onBlur={onBlur}
-                {...rprops}
-                value={selectedItemLabel}
-                readOnly
                 disabled={disabled}
-              />
+                {...rprops}
+              >
+                <span className='slds-truncate'>{selectedItemLabel}</span>
+              </button>
               <Icon
                 containerClassName='slds-input__icon slds-input__icon_right'
                 category='utility'