@leafygreen-ui/combobox 6.0.4 → 6.0.6

package/dist/test-utils/getTestOptions.testutils.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const getComboboxOptions: (withGlyphs?: boolean) => JSX.Element[];
+//# sourceMappingURL=getTestOptions.testutils.d.ts.map

package/dist/test-utils/getTestOptions.testutils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTestOptions.testutils.d.ts","sourceRoot":"","sources":["../../src/test-utils/getTestOptions.testutils.tsx"],"names":[],"mappings":";AAMA,eAAO,MAAM,kBAAkB,yCA4E9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/combobox",
-  "version": "6.0.4",
+  "version": "6.0.6",
   "description": "leafyGreen UI Kit Combobox",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -20,18 +20,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@leafygreen-ui/checkbox": "^12.0.11",
+    "@leafygreen-ui/checkbox": "^12.0.12",
     "@leafygreen-ui/emotion": "^4.0.4",
-    "@leafygreen-ui/hooks": "^7.7.4",
-    "@leafygreen-ui/icon": "^11.16.1",
-    "@leafygreen-ui/icon-button": "^15.0.11",
-    "@leafygreen-ui/inline-definition": "^6.0.6",
-    "@leafygreen-ui/input-option": "^1.0.4",
-    "@leafygreen-ui/lib": "^10.3.4",
+    "@leafygreen-ui/hooks": "^7.7.5",
+    "@leafygreen-ui/icon": "^11.17.0",
+    "@leafygreen-ui/icon-button": "^15.0.12",
+    "@leafygreen-ui/inline-definition": "^6.0.7",
+    "@leafygreen-ui/input-option": "^1.0.5",
+    "@leafygreen-ui/lib": "^10.4.0",
     "@leafygreen-ui/palette": "^4.0.4",
-    "@leafygreen-ui/popover": "^11.0.10",
-    "@leafygreen-ui/tokens": "^2.1.0",
-    "@leafygreen-ui/typography": "^16.5.0",
+    "@leafygreen-ui/popover": "^11.0.12",
+    "@leafygreen-ui/tokens": "^2.1.1",
+    "@leafygreen-ui/typography": "^16.5.1",
     "chalk": "^4.1.2",
     "lodash": "^4.17.21",
     "polished": "^4.2.2"
@@ -40,7 +40,7 @@
     "@leafygreen-ui/leafygreen-provider": "^3.1.3"
   },
   "devDependencies": {
-    "@leafygreen-ui/button": "^20.1.0"
+    "@leafygreen-ui/button": "^20.2.1"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/combobox",
   "repository": {

package/src/Chip/Chip.stories.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+
+import { Chip } from './Chip';
+
+const meta: StoryMetaType<typeof Chip> = {
+  title: 'Components/Combobox/Chip',
+  component: Chip,
+  parameters: {
+    default: null,
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        displayName: [
+          'Chip',
+          '5f4dcc3b5aa765d61d8327deb882cf995f4dcc3b5aa765d61d8327deb882cf99',
+        ],
+      },
+      args: {},
+      decorator: (Instance, context) => {
+        return (
+          <LeafyGreenProvider darkMode={context?.args.darkMode}>
+            <Instance />
+          </LeafyGreenProvider>
+        );
+      },
+    },
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;

package/src/Combobox.story.tsx

@@ -3,13 +3,14 @@ import { StoryFn } from '@storybook/react';
 
 import Button from '@leafygreen-ui/button';
 import { css } from '@leafygreen-ui/emotion';
-import Icon from '@leafygreen-ui/icon';
 import {
   storybookArgTypes,
   storybookExcludedControlParams,
   type StoryMetaType,
+  StoryType,
 } from '@leafygreen-ui/lib';
 
+import { getComboboxOptions } from './test-utils/getTestOptions.testutils';
 import {
   ComboboxSize,
   Overflow,
@@ -17,7 +18,7 @@ import {
   State,
   TruncationLocation,
 } from './Combobox.types';
-import { Combobox, ComboboxGroup, ComboboxOption, ComboboxProps } from '.';
+import { Combobox, ComboboxOption, ComboboxProps } from '.';
 
 const wrapperStyle = css`
   width: 256px;
@@ -25,6 +26,8 @@ const wrapperStyle = css`
   display: flex;
 `;
 
+const multiValue = ['apple', 'banana'];
+
 const meta: StoryMetaType<typeof Combobox> = {
   title: 'Components/Combobox',
   component: Combobox,
@@ -36,7 +39,7 @@ const meta: StoryMetaType<typeof Combobox> = {
     ),
   ],
   parameters: {
-    default: 'Demo',
+    default: 'LiveExample',
     controls: {
       exclude: [
         ...storybookExcludedControlParams,
@@ -48,27 +51,54 @@ const meta: StoryMetaType<typeof Combobox> = {
         'children',
       ],
     },
+    generate: {
+      storyNames: ['SingleSelect', 'MultiSelect'],
+      combineArgs: {
+        darkMode: [false, true],
+        clearable: [true, false],
+        description: [undefined, 'Please pick fruit(s)'],
+        label: [undefined, 'Choose a fruit'],
+        state: Object.values(State),
+        size: Object.values(ComboboxSize),
+      },
+      excludeCombinations: [
+        ['description', { label: undefined }],
+        {
+          clearable: false,
+          value: undefined,
+        },
+        {
+          multiselect: true,
+          value: 'apple',
+        },
+        {
+          multiselect: false,
+          value: multiValue,
+        },
+      ],
+    },
   },
+
+  args: {
+    label: 'Choose a fruit',
+    description: 'Please pick fruit(s)',
+    placeholder: 'Select fruit',
+    multiselect: false,
+    darkMode: false,
+    disabled: false,
+    clearable: true,
+    errorMessage: 'No Pomegranates!',
+    children: getComboboxOptions(),
+  },
+
   argTypes: {
     darkMode: storybookArgTypes.darkMode,
-    multiselect: {
-      control: 'boolean',
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    clearable: {
-      control: 'boolean',
-    },
-    label: {
-      control: 'text',
-    },
-    description: {
-      control: 'text',
-    },
-    placeholder: {
-      control: 'text',
-    },
+    multiselect: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    clearable: { control: 'boolean' },
+    label: { control: 'text' },
+    description: { control: 'text' },
+    placeholder: { control: 'text' },
     size: {
       options: Object.values(ComboboxSize),
       control: 'select',
@@ -79,11 +109,8 @@ const meta: StoryMetaType<typeof Combobox> = {
     },
     errorMessage: {
       control: 'text',
-      if: { arg: 'state', eq: State.error },
-    },
-    searchEmptyMessage: {
-      control: 'text',
     },
+    searchEmptyMessage: { control: 'text' },
     searchState: {
       options: Object.values(SearchState),
       control: 'select',
@@ -111,164 +138,26 @@ const meta: StoryMetaType<typeof Combobox> = {
       if: { arg: 'multiselect' },
     },
   },
-  args: {
-    multiselect: false,
-    darkMode: false,
-    disabled: false,
-    clearable: true,
-  },
 };
 
 export default meta;
 
-const getComboboxOptions = (withGlyphs = true) => [
-  <ComboboxOption
-    key="apple"
-    value="apple"
-    displayName="Apple"
-    data-testid="test-id"
-    description="Do I keep the doctor away?"
-    // eslint-disable-next-line no-console
-    onClick={(event, value) => console.log(event, value)}
-    className="className"
-  />,
-  <ComboboxOption key="banana" value="banana" displayName="Banana" />,
-  <ComboboxOption key="carrot" value="carrot" displayName="Carrot" disabled />,
-  <ComboboxOption
-    key="pomegranate"
-    value="pomegranate"
-    displayName="Pomegranate"
-    glyph={withGlyphs ? <Icon glyph="Warning" /> : undefined}
-    description="Watch out, I stain everything I touch LOL"
-    disabled
-  />,
-  <ComboboxOption
-    key="plantain"
-    value="plantain"
-    displayName="Plantain"
-    glyph={withGlyphs ? <Icon glyph="Connect" /> : undefined}
-    description="Don't confuse me with a banana"
-    // eslint-disable-next-line no-console
-    onClick={() => console.log('I was clicked')}
-  />,
-  <ComboboxOption
-    key="paragraph"
-    value="paragraph"
-    displayName="Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper."
-  />,
-  <ComboboxOption
-    key="hash"
-    value="hash"
-    displayName="5f4dcc3b5aa765d61d8327deb882cf995f4dcc3b5aa765d61d8327deb882cf99"
-  />,
-  <ComboboxOption
-    key="dragonfruit"
-    value="dragonfruit"
-    displayName="Dragonfruit"
-    description="Rawr"
-  />,
-  <ComboboxOption key="eggplant" value="eggplant" displayName="Eggplant" />,
-  <ComboboxOption key="fig" value="fig" displayName="Fig" />,
-  <ComboboxOption key="grape" value="grape" displayName="Grape" />,
-  <ComboboxOption key="honeydew" value="honeydew" displayName="Honeydew" />,
-  <ComboboxOption
-    key="iceberg-lettuce"
-    value="iceberg-lettuce"
-    displayName="Iceberg lettuce"
-  />,
-  <ComboboxGroup key="peppers" label="Peppers">
-    <ComboboxOption key="cayenne" value="cayenne" displayName="Cayenne" />
-    <ComboboxOption
-      key="ghost-pepper"
-      value="ghost-pepper"
-      displayName="Ghost pepper"
-    />
-    <ComboboxOption key="habanero" value="habanero" displayName="Habanero" />
-    <ComboboxOption key="jalapeno" value="jalapeno" displayName="Jalapeño" />
-    <ComboboxOption
-      key="red-pepper"
-      value="red-pepper"
-      displayName="Red pepper"
-    />
-    <ComboboxOption
-      key="scotch-bonnet"
-      value="scotch-bonnet"
-      displayName="Scotch bonnet"
-      description="Don't touch your eyes"
-    />
-  </ComboboxGroup>,
-];
-
-const SingleTemplate: StoryFn<ComboboxProps<false>> = (
-  args: ComboboxProps<false>,
-) => <Combobox {...args} />;
-
-export const SingleSelect: StoryFn<ComboboxProps<false>> = (
-  args: ComboboxProps<false>,
-) => <Combobox {...args} />;
-SingleSelect.args = {
-  label: 'Choose a fruit',
-  description: 'Please pick one',
-  placeholder: 'Select fruit',
-  multiselect: false,
-  // children: getComboboxOptions(),
-};
-SingleSelect.argTypes = {
-  multiselect: { control: 'none' },
-};
-
-export const SingleSelectWithoutGlyphs = SingleTemplate.bind({});
-SingleSelectWithoutGlyphs.args = {
-  label: 'Choose a fruit',
-  description: 'Please pick one',
-  placeholder: 'Select fruit',
-  multiselect: false,
-  children: getComboboxOptions(false),
-};
-SingleSelectWithoutGlyphs.argTypes = {
-  multiselect: { control: 'none' },
-};
-
-export const WithError = SingleTemplate.bind({});
-WithError.args = {
-  label: 'Choose a fruit',
-  description: 'Please pick one',
-  placeholder: 'Select fruit',
-  value: 'pomegranates',
-  errorMessage: 'No Pomegranates!',
-  state: 'error',
-};
-
-const MultiTemplate: StoryFn<ComboboxProps<true>> = (
-  args: ComboboxProps<true>,
-) => <Combobox {...args} />;
-
-export const Multiselect = MultiTemplate.bind({});
-Multiselect.args = {
-  label: 'Choose a fruit',
-  description: 'Please pick some',
-  placeholder: 'Select fruit',
-  multiselect: true,
-  children: getComboboxOptions(),
-};
-Multiselect.argTypes = {
-  multiselect: {
-    control: 'none',
-  },
-};
-
-export const MultiselectWithoutGlyphs = MultiTemplate.bind({});
-MultiselectWithoutGlyphs.args = {
-  label: 'Choose a fruit',
-  description: 'Please pick some',
-  placeholder: 'Select fruit',
-  multiselect: true,
-  children: getComboboxOptions(false),
+export const LiveExample: StoryFn<ComboboxProps<boolean>> = (
+  args: ComboboxProps<boolean>,
+) => {
+  return (
+    <>
+      {/* Since Combobox doesn't fully refresh when `multiselect` changes, we need to explicitly render a different instance */}
+      {args.multiselect ? (
+        <Combobox key="multi" {...args} multiselect={true} />
+      ) : (
+        <Combobox key="single" {...args} multiselect={false} />
+      )}
+    </>
+  );
 };
-MultiselectWithoutGlyphs.argTypes = {
-  multiselect: {
-    control: 'none',
-  },
+LiveExample.parameters = {
+  chromatic: { disableSnapshot: true },
 };
 
 export const ControlledSingleSelect = () => {
@@ -296,6 +185,9 @@ export const ControlledSingleSelect = () => {
     </div>
   );
 };
+ControlledSingleSelect.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 
 export const ExternalFilter = () => {
   const allOptions = [
@@ -333,24 +225,30 @@ export const ExternalFilter = () => {
     </Combobox>
   );
 };
+ExternalFilter.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 
-export const Demo: StoryFn<ComboboxProps<boolean>> = (
-  args: ComboboxProps<boolean>,
-) => {
-  return (
-    <>
-      {/* Since Combobox doesn't fully refresh when `multiselect` changes, we need to explicitly render a different instance */}
-      {args.multiselect ? (
-        <Combobox key="multi" {...args} multiselect={true} />
-      ) : (
-        <Combobox key="single" {...args} multiselect={false} />
-      )}
-    </>
-  );
+export const SingleSelect: StoryType<typeof Combobox> = () => <></>;
+SingleSelect.args = {
+  multiselect: false,
+};
+SingleSelect.parameters = {
+  generate: {
+    combineArgs: {
+      value: [undefined, 'apple'],
+    },
+  },
 };
-Demo.args = {
-  label: 'Choose a fruit',
-  description: 'Please pick fruit(s)',
-  placeholder: 'Select fruit',
-  children: getComboboxOptions(),
+
+export const MultiSelect = () => <></>;
+MultiSelect.args = {
+  multiselect: true,
+};
+MultiSelect.parameters = {
+  generate: {
+    combineArgs: {
+      value: [undefined, multiValue],
+    },
+  },
 };

package/src/Combobox.types.ts

@@ -56,8 +56,8 @@ export const Overflow = {
 export type Overflow = typeof Overflow[keyof typeof Overflow];
 
 export const State = {
-  error: 'error',
   none: 'none',
+  error: 'error',
 } as const;
 export type State = typeof State[keyof typeof State];
 

package/src/ComboboxContext/ComboboxContext.tsx

@@ -8,7 +8,7 @@ import {
   TruncationLocation,
 } from '../Combobox.types';
 
-interface ComboboxData {
+export interface ComboboxData {
   multiselect: boolean;
   size: ComboboxSize;
   withIcons: boolean;
@@ -23,7 +23,7 @@ interface ComboboxData {
   popoverZIndex?: number;
 }
 
-export const ComboboxContext = createContext<ComboboxData>({
+export const defaultContext = {
   multiselect: false,
   size: ComboboxSize.Default,
   withIcons: false,
@@ -32,4 +32,6 @@ export const ComboboxContext = createContext<ComboboxData>({
   state: State.none,
   searchState: SearchState.unset,
   overflow: Overflow.expandY,
-});
+};
+
+export const ComboboxContext = createContext<ComboboxData>(defaultContext);

package/src/ComboboxGroup/ComboboxGroup.stories.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+
+import { InternalComboboxOption } from '../ComboboxOption';
+
+import { InternalComboboxGroup } from './ComboboxGroup';
+
+const meta: StoryMetaType<typeof InternalComboboxGroup> = {
+  title: 'Components/Combobox/ComboboxGroup',
+  component: InternalComboboxGroup,
+  parameters: {
+    default: null,
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+      },
+      args: {
+        label: 'Label',
+        children: (
+          <>
+            <InternalComboboxOption
+              value="option"
+              displayName="Option"
+              isSelected={false}
+              isFocused={false}
+              setSelected={() => {}}
+              index={0}
+            />
+          </>
+        ),
+      },
+      decorator: (Instance, context) => {
+        return (
+          <LeafyGreenProvider darkMode={context?.args.darkMode}>
+            <Instance />
+          </LeafyGreenProvider>
+        );
+      },
+    },
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;

package/src/ComboboxOption/ComboboxOption.stories.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable react/display-name, react/jsx-key */
+import React from 'react';
+
+import Icon from '@leafygreen-ui/icon';
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType, StoryType } from '@leafygreen-ui/lib';
+
+import { ComboboxContext } from '../ComboboxContext';
+import { defaultContext } from '../ComboboxContext/ComboboxContext';
+
+import { InternalComboboxOption } from './ComboboxOption';
+
+const meta: StoryMetaType<typeof InternalComboboxOption> = {
+  title: 'Components/Combobox/ComboboxOption',
+  component: InternalComboboxOption,
+  parameters: {
+    default: null,
+    generate: {
+      storyNames: ['WithIcons', 'WithoutIcons'],
+      combineArgs: {
+        darkMode: [false, true],
+        description: [undefined, 'This is a description'],
+        isSelected: [false, true],
+        isFocused: [false, true],
+        disabled: [false, true],
+      },
+      decorator: (Instance, context) => {
+        return (
+          <LeafyGreenProvider darkMode={context?.args.darkMode}>
+            <ComboboxContext.Provider
+              value={{ ...defaultContext, withIcons: context?.args.withIcons }}
+            >
+              <Instance glyph={context?.args.glyph} />
+            </ComboboxContext.Provider>
+          </LeafyGreenProvider>
+        );
+      },
+    },
+  },
+  args: {
+    displayName: 'Option',
+    setSelected: () => {},
+  },
+};
+
+export default meta;
+
+export const WithoutIcons: StoryType<typeof InternalComboboxOption> = () => (
+  <></>
+);
+WithoutIcons.parameters = {
+  generate: {
+    args: {
+      /// @ts-expect-error - withIcons is not a component prop
+      withIcons: false,
+      glyph: undefined,
+    },
+  },
+};
+
+export const WithIcons: StoryType<typeof InternalComboboxOption> = () => <></>;
+WithIcons.parameters = {
+  generate: {
+    args: {
+      /// @ts-expect-error - withIcons is not a component prop
+      withIcons: true,
+      glyph: <Icon glyph="Cloud" />,
+    },
+  },
+};