flatten, and hook up components

polaris-react/playground/DetailsPage.tsx

@@ -13,6 +13,7 @@ import {
   ProductIcon,
   SettingsIcon,
   WifiIcon,
+  InfoIcon,
 } from '@shopify/polaris-icons';
 
 import {
@@ -635,10 +636,10 @@ export function DetailsPage() {
             <BlockStack gap="200">
               <InlineGrid columns="1fr auto" alignItems="center">
                 <Text as="h2" variant="headingSm">
-                  Organization
+                  Product organization
                 </Text>
                 <Tooltip content="Learn more">
-                  <Icon source={InfoMinor} tone="subdued" />
+                  <Icon source={InfoIcon} tone="subdued" />
                 </Tooltip>
               </InlineGrid>
               <NewSelect
@@ -654,8 +655,31 @@ export function DetailsPage() {
                   {value: '6789012', label: 'Mid-century'},
                 ]}
               />
-              <NewSelect title="Type" />
-              <NewSelect title="Vendor" />
+              <NewSelect
+                title="Type"
+                options={[
+                  {value: '01234567', label: 'Table'},
+                  {value: '12345678', label: 'Chair'},
+                  {value: '23456789', label: 'Lamp'},
+                  {value: '34567890', label: 'Couch'},
+                  {value: '45678901', label: 'Bed'},
+                  {value: '56789012', label: 'Desk'},
+                  {value: '67890123', label: 'Stool'},
+                ]}
+              />
+              <NewSelect
+                title="Vendor"
+                options={[
+                  {value: '012345678', label: 'Bryght'},
+                  {value: '123456789', label: 'Grovemade'},
+                  {value: '234567890', label: 'Haworth'},
+                  {value: '345678901', label: 'Knoll'},
+                  {value: '456789012', label: 'Kvell'},
+                  {value: '567890123', label: 'Montauk'},
+                  {value: '678901234', label: 'Poppin'},
+                  {value: '789012345', label: 'West Elm'},
+                ]}
+              />
               {/* Used for reference */}
               <Select
                 label="Product type"

polaris-react/playground/components/Select/Select.tsx

@@ -1,16 +1,16 @@
-import React from 'react';
-import {SelectMinor} from '@shopify/polaris-icons';
+import React, {useCallback, useState} from 'react';
+import {SelectIcon} from '@shopify/polaris-icons';
 
-import type {OptionListProps} from '../../../src';
 import {
+  Combobox,
+  Listbox,
   BlockStack,
   Icon,
   Text,
   InlineGrid,
   UnstyledButton,
   Popover,
 } from '../../../src';
-import {Options} from '../Options/Options';
 
 import styles from './Select.module.scss';
 
@@ -21,13 +21,79 @@ interface Props {
 
 export function Select({
   title,
-  defaultSelected,
-  options,
-}: Props & Pick<OptionListProps, 'options'>) {
+  defaultSelected = [],
+  options: defaultOptions = [],
+}: Props & {options?: {value?: string; label: string}[]}) {
   const [active, setActive] = React.useState(false);
-  // const [selected, setSelected] = React.useState(defaultSelected ?? []);
+  const [inputValue, setInputValue] = useState('');
+  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
+  const [options, setOptions] = useState(defaultOptions);
 
-  const firstSelected = options?.find(
+  const updateText = useCallback(
+    (value: string) => {
+      setInputValue(value);
+
+      if (value === '') {
+        setOptions(defaultOptions);
+        return;
+      }
+
+      const filterRegex = new RegExp(value, 'i');
+      const resultOptions = defaultOptions.filter((option) =>
+        option.label.match(filterRegex),
+      );
+      setOptions(resultOptions);
+    },
+    [defaultOptions],
+  );
+
+  const updateSelection = useCallback(
+    (selected: string) => {
+      if (selectedOptions.includes(selected)) {
+        setSelectedOptions(
+          selectedOptions.filter((option) => option !== selected),
+        );
+      } else {
+        setSelectedOptions([...selectedOptions, selected]);
+      }
+
+      // updateText('');
+    },
+    [selectedOptions],
+  );
+
+  // const removeTag = useCallback(
+  //   (tag: string) => () => {
+  //     const options = [...selectedOptions];
+  //     options.splice(options.indexOf(tag), 1);
+  //     setSelectedOptions(options);
+  //   },
+  //   [selectedOptions],
+  // );
+
+  // const tagsMarkup = selectedOptions.map((option) => (
+  //   <Tag key={`option-${option}`} onRemove={removeTag(option)}>
+  //     {option}
+  //   </Tag>
+  // ));
+
+  const optionsMarkup =
+    options.length > 0
+      ? options.map(({label, value}) => (
+          <Listbox.Option
+            key={`${value}`}
+            value={value ?? ''}
+            selected={[...selectedOptions, ...defaultSelected].includes(
+              value ?? '',
+            )}
+            accessibilityLabel={label}
+          >
+            {label}
+          </Listbox.Option>
+        ))
+      : null;
+
+  const firstSelected = defaultOptions?.find(
     (option) => option.value === defaultSelected?.[0],
   )?.label;
 
@@ -41,13 +107,14 @@ export function Select({
           <Text as="h3" variant="bodySm" tone="subdued">
             {title}
           </Text>
-          {defaultSelected?.length && (
+
+          {firstSelected && (
             <Text as="span" variant="bodyMd">
               {firstSelected}
             </Text>
           )}
         </BlockStack>
-        <Icon source={SelectMinor} tone="subdued" />
+        <Icon source={SelectIcon} tone="subdued" />
       </InlineGrid>
     </UnstyledButton>
   );
@@ -61,7 +128,24 @@ export function Select({
       // preferredAlignment="cover"
       activator={activator}
     >
-      <Options />
+      <Combobox
+        allowMultiple
+        persistent
+        activator={
+          <Combobox.TextField
+            onChange={updateText}
+            label="Search tags"
+            labelHidden
+            value={inputValue}
+            placeholder="Search tags"
+            autoComplete="off"
+          />
+        }
+      >
+        {optionsMarkup ? (
+          <Listbox onSelect={updateSelection}>{optionsMarkup}</Listbox>
+        ) : null}
+      </Combobox>
     </Popover>
   );
 }

polaris-react/playground/components/index.ts

@@ -1,2 +1 @@
 export * from './Select/Select';
-export * from './Options/Options';

polaris-react/src/components/Combobox/Combobox.tsx

@@ -14,7 +14,6 @@ import type {
   ComboboxListboxType,
   ComboboxListboxOptionType,
 } from '../../utilities/combobox';
-import {BlockStack} from '../BlockStack';
 import {Box} from '../Box';
 
 import styles from './Combobox.module.scss';