@pega/cosmos-react-demos 5.0.0-dev.4.9 → 5.0.0-dev.6.0

package/lib/core/ColorPicker/ColorPicker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGlF,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAMV,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,IAA2B,EAAE,EAAE;IAC7F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,KAAC,WAAW,IACV,cAAc,EACZ,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,OAAO,EAAE,+DAA+D;aACzE;YACH,CAAC,CAAC,SAAS,EAEf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAClB,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,KAAK;IACjB,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,kBAAkB,EAAE,KAAK;CAC1B,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE;IACzD,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACxC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACrD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAY,GAAG,EAAE;IACtC,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,QAAQ,EAAE,CAAC;IAEf,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CACH,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE;QAC3C,OAAO,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC,EACJ,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEnF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EAAE,iBAAiB;oBACvB,UAAU,EAAE,QAAQ;oBACpB,MAAM,EAAE,CAAC;oBACT,MAAM,EAAE,CAAC;iBACV,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAE1B,4BACG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;wBACvB,MAAM,GAAG,GAAG,SAAS,CAAC,EAAE,CAAC;wBACzB,OAAO,CACL,wBACE,KAAC,WAAW,IACV,MAAM,QACN,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE;oCACZ,MAAM,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC;oCACvB,SAAS,CAAC,GAAG,CAAC,EAAE;wCACd,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;4CACtB,IAAI,CAAC,KAAK,CAAC;gDAAE,OAAO,QAAQ,CAAC;4CAC7B,OAAO,CAAC,CAAC;wCACX,CAAC,CAAC,CAAC;oCACL,CAAC,CAAC,CAAC;gCACL,CAAC,GACD,IAdM,GAAG,CAeP,CACP,CAAC;oBACJ,CAAC,CAAC,GACD,GACE,EAEP,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EAAE,iBAAiB;oBACvB,GAAG,EAAE,KAAK;iBACX,YAEA,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;oBACvB,MAAM,GAAG,GAAG,SAAS,CAAC,EAAE,CAAC;oBACzB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,KAAK,YAGZ,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,KAAK,GACD,IAJF,GAAG,CAKH,CACR,CAAC;gBACJ,CAAC,CAAC,GACG,IACF,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport { ColorPicker, Flex, Grid, Text, useTheme } from '@pega/cosmos-react-core';\nimport type { ColorPickerProps } from '@pega/cosmos-react-core';\n\nimport { StyledColorPane } from './ColorPicker.styles';\n\nexport default {\n  title: 'Core/ColorPicker',\n  component: ColorPicker\n} as Meta;\n\ninterface ColorPickerStoryProps extends ColorPickerProps {\n  showAdditionalInfo?: boolean;\n}\n\nexport const ColorPickerDemo: StoryFn<ColorPickerStoryProps> = (args: ColorPickerStoryProps) => {\n  const [value, setValue] = useState('#10a5ac');\n\n  return (\n    <ColorPicker\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a color from the dropdown or by entering its hex code.'\n            }\n          : undefined\n      }\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      swatchOnly={args.swatchOnly}\n      inline={args.inline}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      value={value}\n      onChange={e => {\n        setValue(e.hex);\n      }}\n    />\n  );\n};\n\nColorPickerDemo.args = {\n  label: 'ColorPicker label',\n  labelHidden: false,\n  info: 'Pick a color',\n  status: undefined,\n  swatchOnly: false,\n  inline: false,\n  required: false,\n  disabled: false,\n  readOnly: false,\n  showAdditionalInfo: false\n};\n\nColorPickerDemo.argTypes = {\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text', label: 'Helper text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  swatchOnly: { control: { type: 'boolean' } },\n  inline: { control: { type: 'boolean' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } },\n  showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\nexport const MultiColor: StoryFn = () => {\n  const {\n    base: { palette }\n  } = useTheme();\n\n  const opaqueColors = useMemo(\n    () =>\n      Object.entries(palette).filter(([, color]) => {\n        return /^#[0-9A-F]{6}$/i.test(color);\n      }),\n    [palette]\n  );\n\n  const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n  return (\n    <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          alignItems: 'center',\n          colGap: 4,\n          rowGap: 1\n        }}\n        style={{ padding: '1rem' }}\n      >\n        <>\n          {values.map((color, i) => {\n            const key = `color-${i}`;\n            return (\n              <div key={key}>\n                <ColorPicker\n                  inline\n                  label={opaqueColors[i][0]}\n                  value={color}\n                  onChange={e => {\n                    const newColor = e.hex;\n                    setValues(cur => {\n                      return cur.map((c, j) => {\n                        if (i === j) return newColor;\n                        return c;\n                      });\n                    });\n                  }}\n                />\n              </div>\n            );\n          })}\n        </>\n      </Grid>\n\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          gap: 0.125\n        }}\n      >\n        {values.map((color, i) => {\n          const key = `color-${i}`;\n          return (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledColorPane}\n              color={color}\n              key={key}\n            >\n              <Text variant='h1' as='span'>\n                {color}\n              </Text>\n            </Flex>\n          );\n        })}\n      </Grid>\n    </Grid>\n  );\n};\n"]}

package/lib/core/ColorPicker/ColorPicker.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledColorPane: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    color: string;
+}, never>;
+//# sourceMappingURL=ColorPicker.styles.d.ts.map

package/lib/core/ColorPicker/ColorPicker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe;WAAuB,MAAM;SAMvD,CAAC"}

package/lib/core/ColorPicker/ColorPicker.styles.js

@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { tryCatch } from '@pega/cosmos-react-core';
+export const StyledColorPane = styled.div(({ color }) => {
+    const c = tryCatch(() => readableColor(color));
+    return css `
+    color: ${c};
+    background: ${color};
+  `;
+});
+//# sourceMappingURL=ColorPicker.styles.js.map

package/lib/core/ColorPicker/ColorPicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/C,OAAO,GAAG,CAAA;aACC,CAAC;kBACI,KAAK;GACpB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { tryCatch } from '@pega/cosmos-react-core';\n\nexport const StyledColorPane = styled.div<{ color: string }>(({ color }) => {\n  const c = tryCatch(() => readableColor(color));\n  return css`\n    color: ${c};\n    background: ${color};\n  `;\n});\n"]}

package/lib/core/ComboBox/ComboBox.mocks.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import type { MenuProps } from '@pega/cosmos-react-core';
+export declare const getFilterRegex: (inputValue: string) => RegExp;
+export declare const list: MenuProps['items'];
+export declare const treeItem: {
+    id: string;
+    primary: string;
+    secondary: string[];
+    items: {
+        id: string;
+        primary: string;
+        secondary: string[];
+    }[];
+};
+export declare const tree: (import("@pega/cosmos-react-core").MenuItemProps | import("@pega/cosmos-react-core").MenuGroupProps | {
+    id: string;
+    primary: string;
+    secondary: string[];
+    items: {
+        id: string;
+        primary: string;
+        secondary: string[];
+    }[];
+})[];
+export declare const createNewButton: JSX.Element;
+//# sourceMappingURL=ComboBox.mocks.d.ts.map

package/lib/core/ComboBox/ComboBox.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.mocks.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEzD,eAAO,MAAM,cAAc,eAAgB,MAAM,WAEhD,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,SAAS,CAAC,OAAO,CAsCnC,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;CASpB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;IAAsB,CAAC;AAExC,eAAO,MAAM,eAAe,aAI3B,CAAC"}

package/lib/core/ComboBox/ComboBox.mocks.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Icon } from '@pega/cosmos-react-core';
+export const getFilterRegex = (inputValue) => {
+    return new RegExp(`^${inputValue.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&')}`, 'i');
+};
+export const list = [
+    { id: '1', primary: 'Joseph Morales', secondary: ['Experts', 'Engineer'] },
+    { id: '2', primary: 'Nora Lee', secondary: ['Experts', 'Engineer'] },
+    { id: '3', primary: 'Douglas Smith', secondary: ['Intermediate', 'Architect'] },
+    { id: '4', primary: 'Vernon Lee', secondary: ['Intermediate', 'Product Owner'] },
+    { id: '5', primary: 'Eula Morales', secondary: ['Intermediate', 'Architect'] },
+    { id: '6', primary: 'Paul Smith', secondary: ['Leads', 'Engineer'] },
+    { id: '7', primary: 'Frank Walker', secondary: ['Leads', 'Engineer'] },
+    { id: '8', primary: 'Edward Green', secondary: ['Leads', 'Architect'] },
+    { id: '9', primary: 'John Smith', secondary: ['Leads', 'Product Owner'] },
+    { id: '10', primary: 'Olivia Cockburn', secondary: ['Experts', 'Engineer'] },
+    { id: '11', primary: 'Reese Witherspoon', secondary: ['Experts', 'Engineer'] },
+    { id: '12', primary: 'Peter Hernandez', secondary: ['Intermediate', 'Architect'] },
+    { id: '13', primary: 'Helena Johnson', secondary: ['Intermediate', 'Product Owner'] },
+    { id: '14', primary: 'Katheryn Hudson', secondary: ['Intermediate', 'Architect'] },
+    { id: '15', primary: 'Mia Hershel', secondary: ['Leads', 'Engineer'] },
+    { id: '16', primary: 'Ann Mitchell', secondary: ['Leads', 'Engineer'] },
+    { id: '17', primary: 'Rafael Bottom', secondary: ['Leads', 'Architect'] },
+    { id: '18', primary: 'Christopher Gatsby', secondary: ['Leads', 'Product Owner'] },
+    { id: '19', primary: 'Julianne Moore', secondary: ['Experts', 'Engineer'] },
+    { id: '20', primary: 'Emily Stone', secondary: ['Experts', 'Engineer'] },
+    { id: '21', primary: 'Richard Wiles', secondary: ['Intermediate', 'Architect'] },
+    { id: '22', primary: 'Ella Connor', secondary: ['Intermediate', 'Product Owner'] },
+    { id: '23', primary: 'Robyn Fenton', secondary: ['Intermediate', 'Architect'] },
+    { id: '24', primary: 'Lucille Hale', secondary: ['Leads', 'Engineer'] },
+    { id: '25', primary: 'Angelina Pitt', secondary: ['Leads', 'Engineer'] },
+    { id: '26', primary: 'Tanya Robinson', secondary: ['Leads', 'Architect'] },
+    { id: '27', primary: 'Laura Horowitz', secondary: ['Leads', 'Product Owner'] },
+    {
+        id: 't',
+        label: 'Toms',
+        items: [
+            { id: '28', primary: 'Tom Jones' },
+            { id: '29', primary: 'Tom Hardy' },
+            { id: '30', primary: 'Tom Hanks' },
+            { id: '31', primary: 'Tom Sawyer' }
+        ]
+    }
+];
+export const treeItem = {
+    id: '01',
+    primary: 'Group',
+    secondary: ['Leads', 'Engineer'],
+    items: [
+        { id: '01-1', primary: 'Paul McDonald', secondary: ['Leads', 'Engineer'] },
+        { id: '01-2', primary: 'Frank Walker', secondary: ['Leads', 'Engineer'] },
+        { id: '01-3', primary: 'Edward Green', secondary: ['Leads', 'Engineer'] }
+    ]
+};
+export const tree = [treeItem, ...list];
+export const createNewButton = (_jsxs(Button, { variant: 'link', onClick: () => { }, children: [_jsx(Icon, { name: 'plus' }), " Create new"] }));
+//# sourceMappingURL=ComboBox.mocks.js.map

package/lib/core/ComboBox/ComboBox.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.mocks.js","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Button, Icon } from '@pega/cosmos-react-core';\nimport type { MenuProps } from '@pega/cosmos-react-core';\n\nexport const getFilterRegex = (inputValue: string) => {\n  return new RegExp(`^${inputValue.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&')}`, 'i');\n};\n\nexport const list: MenuProps['items'] = [\n  { id: '1', primary: 'Joseph Morales', secondary: ['Experts', 'Engineer'] },\n  { id: '2', primary: 'Nora Lee', secondary: ['Experts', 'Engineer'] },\n  { id: '3', primary: 'Douglas Smith', secondary: ['Intermediate', 'Architect'] },\n  { id: '4', primary: 'Vernon Lee', secondary: ['Intermediate', 'Product Owner'] },\n  { id: '5', primary: 'Eula Morales', secondary: ['Intermediate', 'Architect'] },\n  { id: '6', primary: 'Paul Smith', secondary: ['Leads', 'Engineer'] },\n  { id: '7', primary: 'Frank Walker', secondary: ['Leads', 'Engineer'] },\n  { id: '8', primary: 'Edward Green', secondary: ['Leads', 'Architect'] },\n  { id: '9', primary: 'John Smith', secondary: ['Leads', 'Product Owner'] },\n  { id: '10', primary: 'Olivia Cockburn', secondary: ['Experts', 'Engineer'] },\n  { id: '11', primary: 'Reese Witherspoon', secondary: ['Experts', 'Engineer'] },\n  { id: '12', primary: 'Peter Hernandez', secondary: ['Intermediate', 'Architect'] },\n  { id: '13', primary: 'Helena Johnson', secondary: ['Intermediate', 'Product Owner'] },\n  { id: '14', primary: 'Katheryn Hudson', secondary: ['Intermediate', 'Architect'] },\n  { id: '15', primary: 'Mia Hershel', secondary: ['Leads', 'Engineer'] },\n  { id: '16', primary: 'Ann Mitchell', secondary: ['Leads', 'Engineer'] },\n  { id: '17', primary: 'Rafael Bottom', secondary: ['Leads', 'Architect'] },\n  { id: '18', primary: 'Christopher Gatsby', secondary: ['Leads', 'Product Owner'] },\n  { id: '19', primary: 'Julianne Moore', secondary: ['Experts', 'Engineer'] },\n  { id: '20', primary: 'Emily Stone', secondary: ['Experts', 'Engineer'] },\n  { id: '21', primary: 'Richard Wiles', secondary: ['Intermediate', 'Architect'] },\n  { id: '22', primary: 'Ella Connor', secondary: ['Intermediate', 'Product Owner'] },\n  { id: '23', primary: 'Robyn Fenton', secondary: ['Intermediate', 'Architect'] },\n  { id: '24', primary: 'Lucille Hale', secondary: ['Leads', 'Engineer'] },\n  { id: '25', primary: 'Angelina Pitt', secondary: ['Leads', 'Engineer'] },\n  { id: '26', primary: 'Tanya Robinson', secondary: ['Leads', 'Architect'] },\n  { id: '27', primary: 'Laura Horowitz', secondary: ['Leads', 'Product Owner'] },\n  {\n    id: 't',\n    label: 'Toms',\n    items: [\n      { id: '28', primary: 'Tom Jones' },\n      { id: '29', primary: 'Tom Hardy' },\n      { id: '30', primary: 'Tom Hanks' },\n      { id: '31', primary: 'Tom Sawyer' }\n    ]\n  }\n];\n\nexport const treeItem = {\n  id: '01',\n  primary: 'Group',\n  secondary: ['Leads', 'Engineer'],\n  items: [\n    { id: '01-1', primary: 'Paul McDonald', secondary: ['Leads', 'Engineer'] },\n    { id: '01-2', primary: 'Frank Walker', secondary: ['Leads', 'Engineer'] },\n    { id: '01-3', primary: 'Edward Green', secondary: ['Leads', 'Engineer'] }\n  ]\n};\n\nexport const tree = [treeItem, ...list];\n\nexport const createNewButton = (\n  <Button variant='link' onClick={() => {}}>\n    <Icon name='plus' /> Create new\n  </Button>\n);\n"]}

package/lib/core/ComboBox/ComboBox.stories.d.ts

@@ -0,0 +1,34 @@
+import type { StoryFn } from '@storybook/react';
+import type { ComboBoxProps, MenuProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface ComboBoxStoryProps extends Pick<MenuProps, 'scrollAt' | 'onCreateNew'> {
+    label?: ComboBoxProps['label'];
+    labelHidden?: ComboBoxProps['labelHidden'];
+    info?: ComboBoxProps['info'];
+    placeholder?: ComboBoxProps['placeholder'];
+    status?: ComboBoxProps['status'];
+    required?: ComboBoxProps['required'];
+    disabled?: ComboBoxProps['disabled'];
+    readOnly?: ComboBoxProps['readOnly'];
+    showAdditionalInfo?: boolean;
+    createNew?: boolean;
+}
+export declare const FilterableSingleSelect: StoryFn<ComboBoxStoryProps>;
+export declare const NonFilterableSingleSelect: StoryFn<ComboBoxStoryProps>;
+export declare const FilterableMultiSelect: StoryFn<ComboBoxStoryProps>;
+export declare const NonFilterableMultiSelect: StoryFn<ComboBoxStoryProps>;
+export declare const FilterableMultiSelectSelectableParent: StoryFn<ComboBoxStoryProps>;
+/**
+______ _ _ _                 _     _     ___  ___      _ _   _        _                     _____ _     _ _     _
+|  ___(_) | |               | |   | |    |  \/  |     | | | (_)      | |                   /  __ \ |   (_) |   | |
+| |_   _| | |_ ___ _ __ __ _| |__ | | ___| .  . |_   _| | |_ _ ______| |     __ _ _____   _| /  \/ |__  _| | __| |_ __ ___ _ __
+|  _| | | | __/ _ \ '__/ _` | '_ \| |/ _ \ |\/| | | | | | __| |______| |    / _` |_  / | | | |   | '_ \| | |/ _` | '__/ _ \ '_ \
+| |   | | | ||  __/ | | (_| | |_) | |  __/ |  | | |_| | | |_| |      | |___| (_| |/ /| |_| | \__/\ | | | | | (_| | | |  __/ | | |
+\_|   |_|_|\__\___|_|  \__,_|_.__/|_|\___\_|  |_/\__,_|_|\__|_|      \_____/\__,_/___|\__, |\____/_| |_|_|_|\__,_|_|  \___|_| |_|
+                                                                                       __/ |
+                                                                                      |___/
+ */
+export declare const FilterableMultiSelectLazyChildren: StoryFn<ComboBoxStoryProps>;
+export declare const MenuWithCreateNew: StoryFn;
+//# sourceMappingURL=ComboBox.stories.d.ts.map

package/lib/core/ComboBox/ComboBox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAiB,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAIvF,wBA4BU;AAEV,UAAU,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,aAAa,CAAC;IAC9E,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AASD,eAAO,MAAM,sBAAsB,EAAE,OAAO,CAAC,kBAAkB,CAoF9D,CAAC;AAcF,eAAO,MAAM,yBAAyB,EAAE,OAAO,CAAC,kBAAkB,CAoFjE,CAAC;AAeF,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,kBAAkB,CAmE7D,CAAC;AAaF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAC,kBAAkB,CAmDhE,CAAC;AAgBF,eAAO,MAAM,qCAAqC,EAAE,OAAO,CAAC,kBAAkB,CAqE7E,CAAC;AAMF;;;;;;;;;GASG;AACH,eAAO,MAAM,iCAAiC,EAAE,OAAO,CAAC,kBAAkB,CAsIzE,CAAC;AAMF,eAAO,MAAM,iBAAiB,EAAE,OAE/B,CAAC"}

package/lib/core/ComboBox/ComboBox.stories.js

@@ -0,0 +1,428 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import { ComboBox, menuHelpers } from '@pega/cosmos-react-core';
+import { getFilterRegex, list, tree, createNewButton } from './ComboBox.mocks';
+export default {
+    title: 'Core/ComboBox',
+    component: ComboBox,
+    args: {
+        labelHidden: false,
+        info: 'Type in or click to expand the Popover',
+        placeholder: '',
+        status: undefined,
+        required: false,
+        disabled: false,
+        readOnly: false,
+        showAdditionalInfo: false,
+        createNew: true,
+        scrollAt: 6
+    },
+    argTypes: {
+        label: { control: { type: 'text' } },
+        labelHidden: { control: { type: 'boolean' } },
+        info: { control: { type: 'text', label: 'Helper text' } },
+        placeholder: { control: { type: 'text' } },
+        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+        required: { control: { type: 'boolean' } },
+        disabled: { control: { type: 'boolean' } },
+        readOnly: { control: { type: 'boolean' } },
+        showAdditionalInfo: { control: { type: 'boolean' } },
+        createNew: { control: { type: 'boolean' } },
+        scrollAt: { control: { type: 'number' } }
+    }
+};
+/*
+  _____ _ _ _                 _     _        ____  _             _        ____       _           _
+ |  ___(_) | |_ ___ _ __ __ _| |__ | | ___  / ___|(_)_ __   __ _| | ___  / ___|  ___| | ___  ___| |_
+ | |_  | | | __/ _ \ '__/ _` | '_ \| |/ _ \ \___ \| | '_ \ / _` | |/ _ \ \___ \ / _ \ |/ _ \/ __| __|
+ |  _| | | | ||  __/ | | (_| | |_) | |  __/  ___) | | | | | (_| | |  __/  ___) |  __/ |  __/ (__| |_
+ |_|   |_|_|\__\___|_|  \__,_|_.__/|_|\___| |____/|_|_| |_|\__, |_|\___| |____/ \___|_|\___|\___|\__|
+                                                           |___/
+*/
+export const FilterableSingleSelect = (args) => {
+    const [items, setItems] = useState(tree);
+    const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
+    const [filterValue, setFilterValue] = useState('');
+    const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);
+    const itemsToRender = useMemo(() => {
+        const newItems = filterValue
+            ? menuHelpers.flatten(items).filter(({ primary }) => {
+                return filterRegex.test(primary);
+            })
+            : items;
+        return menuHelpers.mapTree(newItems, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    }, [filterValue, items]);
+    const selectItem = useCallback((id) => {
+        setFilterValue('');
+        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+    }, []);
+    const clearSelection = () => {
+        setItems(cur => menuHelpers.mapTree(cur, item => {
+            return {
+                ...item,
+                selected: false
+            };
+        }));
+    };
+    return (_jsx(ComboBox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, mode: 'single-select', selected: selected
+            ? {
+                items: {
+                    id: selected.id,
+                    text: selected.primary
+                }
+            }
+            : undefined, value: filterValue, onChange: (e) => {
+            if (!e.target.value)
+                clearSelection();
+            setFilterValue(e.target.value);
+        }, onBlur: () => {
+            setFilterValue('');
+        }, menu: {
+            items: itemsToRender,
+            onCreateNew: args.onCreateNew,
+            onItemClick: selectItem,
+            accent: filterRegex,
+            emptyText: 'No items',
+            scrollAt: args.scrollAt,
+            footer: args.createNew ? createNewButton : undefined
+        } }));
+};
+FilterableSingleSelect.args = {
+    label: 'ComboBox Single Autocomplete'
+};
+/*
+  ____  _             _        ____       _           _
+ / ___|(_)_ __   __ _| | ___  / ___|  ___| | ___  ___| |_
+ \___ \| | '_ \ / _` | |/ _ \ \___ \ / _ \ |/ _ \/ __| __|
+  ___) | | | | | (_| | |  __/  ___) |  __/ |  __/ (__| |_
+ |____/|_|_| |_|\__, |_|\___| |____/ \___|_|\___|\___|\__|
+                |___/
+*/
+export const NonFilterableSingleSelect = (args) => {
+    const pageSize = 10;
+    const [items, setItems] = useState(() => {
+        return menuHelpers.mapTree(tree.slice(0, pageSize), item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    });
+    const [isLoading, setIsLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
+    const selectItem = useCallback((id) => {
+        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+    }, []);
+    const loadMore = useCallback((expandedItemId) => {
+        if (!isLoading && !expandedItemId) {
+            setIsLoading(true);
+            setTimeout(() => {
+                setIsLoading(false);
+                setItems(prevItems => {
+                    const newItems = menuHelpers.mapTree(tree.slice(prevItems.length, prevItems.length + pageSize), item => ({
+                        ...item,
+                        selected: item.items ? undefined : !!item.selected
+                    }));
+                    if (newItems.length === 0)
+                        setHasMore(false);
+                    return menuHelpers.appendTo(prevItems, newItems, expandedItemId);
+                });
+            }, 2000);
+        }
+    }, [items, isLoading]);
+    return (_jsx(ComboBox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: selected
+            ? {
+                items: {
+                    id: selected.id,
+                    text: selected.primary
+                }
+            }
+            : undefined, menu: {
+            items,
+            onItemClick: selectItem,
+            loading: isLoading,
+            loadMore: hasMore ? loadMore : undefined,
+            scrollAt: args.scrollAt,
+            footer: args.createNew ? createNewButton : undefined
+        } }));
+};
+NonFilterableSingleSelect.args = {
+    label: 'ComboBox Single Select',
+    info: 'Click on dropdown button to expand the Popover',
+    placeholder: '-Choose option-'
+};
+/*
+  _____ _ _ _                 _     _        __  __       _ _   _      ____       _           _
+ |  ___(_) | |_ ___ _ __ __ _| |__ | | ___  |  \/  |_   _| | |_(_)    / ___|  ___| | ___  ___| |_
+ | |_  | | | __/ _ \ '__/ _` | '_ \| |/ _ \ | |\/| | | | | | __| |____\___ \ / _ \ |/ _ \/ __| __|
+ |  _| | | | ||  __/ | | (_| | |_) | |  __/ | |  | | |_| | | |_| |_____|__) |  __/ |  __/ (__| |_
+ |_|   |_|_|\__\___|_|  \__,_|_.__/|_|\___| |_|  |_|\__,_|_|\__|_|    |____/ \___|_|\___|\___|\__|
+*/
+export const FilterableMultiSelect = (args) => {
+    const [items, setItems] = useState(tree);
+    const [filterValue, setFilterValue] = useState('');
+    const selected = useMemo(() => {
+        return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));
+    }, [items]);
+    const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);
+    const itemsToRender = useMemo(() => {
+        const newItems = filterValue
+            ? menuHelpers.flatten(items).filter(({ primary }) => {
+                return filterRegex.test(primary);
+            })
+            : items;
+        return menuHelpers.mapTree(newItems, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    }, [filterValue, items]);
+    const toggleItem = (id) => {
+        setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
+    };
+    return (_jsx(ComboBox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, mode: 'multi-select', label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: {
+            items: selected,
+            onRemove: toggleItem
+        }, value: filterValue, onChange: (e) => {
+            setFilterValue(e.target.value);
+        }, onBlur: () => {
+            setFilterValue('');
+        }, menu: {
+            items: itemsToRender,
+            onItemClick: toggleItem,
+            accent: filterRegex,
+            emptyText: 'No items',
+            scrollAt: args.scrollAt,
+            footer: args.createNew ? createNewButton : undefined
+        } }));
+};
+FilterableMultiSelect.args = {
+    label: 'ComboBox Multi Autocomplete'
+};
+/*
+  __  __       _ _   _      ____       _           _
+ |  \/  |_   _| | |_(_)    / ___|  ___| | ___  ___| |_
+ | |\/| | | | | | __| |____\___ \ / _ \ |/ _ \/ __| __|
+ | |  | | |_| | | |_| |_____|__) |  __/ |  __/ (__| |_
+ |_|  |_|\__,_|_|\__|_|    |____/ \___|_|\___|\___|\__|
+*/
+export const NonFilterableMultiSelect = (args) => {
+    const [items, setItems] = useState(menuHelpers.mapTree(list, item => ({ id: item.id, primary: item.primary })));
+    const selected = useMemo(() => {
+        return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));
+    }, [items]);
+    const toggleItem = (id) => {
+        setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
+    };
+    const itemsToRender = useMemo(() => {
+        return menuHelpers.mapTree(items, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    }, [items]);
+    return (_jsx(ComboBox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, mode: 'multi-select', label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: {
+            items: selected,
+            onRemove: toggleItem
+        }, menu: {
+            items: itemsToRender,
+            onItemClick: toggleItem,
+            scrollAt: args.scrollAt,
+            footer: args.createNew ? createNewButton : undefined
+        } }));
+};
+NonFilterableMultiSelect.args = {
+    label: 'ComboBox Multi Select',
+    info: 'Click on dropdown button to expand the Popover',
+    placeholder: '-Choose options-'
+};
+/*
+______ _ _ _                 _     _     ___  ___      _ _   _        _____      _           _        _     _     ______                    _
+|  ___(_) | |               | |   | |    |  \/  |     | | | (_)      /  ___|    | |         | |      | |   | |    | ___ \                  | |
+| |_   _| | |_ ___ _ __ __ _| |__ | | ___| .  . |_   _| | |_ _ ______\ `--.  ___| | ___  ___| |_ __ _| |__ | | ___| |_/ /_ _ _ __ ___ _ __ | |_
+|  _| | | | __/ _ \ '__/ _` | '_ \| |/ _ \ |\/| | | | | | __| |______|`--. \/ _ \ |/ _ \/ __| __/ _` | '_ \| |/ _ \  __/ _` | '__/ _ \ '_ \| __|
+| |   | | | ||  __/ | | (_| | |_) | |  __/ |  | | |_| | | |_| |      /\__/ /  __/ |  __/ (__| || (_| | |_) | |  __/ | | (_| | | |  __/ | | | |_
+\_|   |_|_|\__\___|_|  \__,_|_.__/|_|\___\_|  |_/\__,_|_|\__|_|      \____/ \___|_|\___|\___|\__\__,_|_.__/|_|\___\_|  \__,_|_|  \___|_| |_|\__|
+*/
+export const FilterableMultiSelectSelectableParent = (args) => {
+    const [items, setItems] = useState(tree);
+    const [filterValue, setFilterValue] = useState('');
+    const selected = useMemo(() => {
+        return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));
+    }, [items]);
+    const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);
+    const itemsToRender = useMemo(() => {
+        const newItems = filterValue
+            ? menuHelpers.flatten(items).filter(({ primary }) => {
+                return filterRegex.test(primary);
+            })
+            : items;
+        return menuHelpers.mapTree(newItems, item => ({
+            ...item,
+            selected: !!item.selected
+        }));
+    }, [filterValue, items]);
+    const toggleItem = (id) => {
+        setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
+    };
+    return (_jsx(ComboBox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, mode: 'multi-select', label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: {
+            items: selected,
+            onRemove: toggleItem
+        }, value: filterValue, onChange: (e) => {
+            setFilterValue(e.target.value);
+        }, onBlur: () => {
+            setFilterValue('');
+        }, menu: {
+            items: itemsToRender,
+            onItemClick: toggleItem,
+            accent: filterRegex,
+            emptyText: 'No items',
+            scrollAt: args.scrollAt,
+            footer: args.createNew ? createNewButton : undefined
+        } }));
+};
+FilterableMultiSelectSelectableParent.args = {
+    label: 'ComboBox Multi Selectable Parent'
+};
+/**
+______ _ _ _                 _     _     ___  ___      _ _   _        _                     _____ _     _ _     _
+|  ___(_) | |               | |   | |    |  \/  |     | | | (_)      | |                   /  __ \ |   (_) |   | |
+| |_   _| | |_ ___ _ __ __ _| |__ | | ___| .  . |_   _| | |_ _ ______| |     __ _ _____   _| /  \/ |__  _| | __| |_ __ ___ _ __
+|  _| | | | __/ _ \ '__/ _` | '_ \| |/ _ \ |\/| | | | | | __| |______| |    / _` |_  / | | | |   | '_ \| | |/ _` | '__/ _ \ '_ \
+| |   | | | ||  __/ | | (_| | |_) | |  __/ |  | | |_| | | |_| |      | |___| (_| |/ /| |_| | \__/\ | | | | | (_| | | |  __/ | | |
+\_|   |_|_|\__\___|_|  \__,_|_.__/|_|\___\_|  |_/\__,_|_|\__|_|      \_____/\__,_/___|\__, |\____/_| |_|_|_|\__,_|_|  \___|_| |_|
+                                                                                       __/ |
+                                                                                      |___/
+ */
+export const FilterableMultiSelectLazyChildren = (args) => {
+    const rootItemId = '01';
+    const lazyItems = useMemo(() => {
+        return [
+            { id: '01-1', primary: 'Paul McDonald', secondary: ['Leads', 'Engineer'] },
+            { id: '01-2', primary: 'Frank Walker', secondary: ['Leads', 'Engineer'] },
+            { id: '01-3', primary: 'Edward Green', secondary: ['Leads', 'Engineer'] },
+            { id: '01-4', primary: 'Shaun McMinneman', secondary: ['Leads', 'Engineer'] },
+            { id: '01-5', primary: 'Hank Fitzgerald', secondary: ['Leads', 'Engineer'] },
+            { id: '01-6', primary: 'Mindy Stark', secondary: ['Leads', 'Engineer'] },
+            { id: '01-7', primary: 'Shane Howard', secondary: ['Leads', 'Engineer'] },
+            { id: '01-8', primary: 'Raul Singh', secondary: ['Leads', 'Engineer'] }
+        ];
+    }, []);
+    const [items, setItems] = useState([
+        {
+            id: rootItemId,
+            primary: 'Group',
+            secondary: ['Leads', 'Engineer'],
+            items: []
+        }
+    ]);
+    const [loading, setLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(false);
+    const [filterValue, setFilterValue] = useState('');
+    const selected = useMemo(() => {
+        return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));
+    }, [items]);
+    const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);
+    const itemsToRender = useMemo(() => {
+        const newItems = filterValue
+            ? menuHelpers.flatten(items).filter(({ primary }) => {
+                return filterRegex.test(primary);
+            })
+            : items;
+        return menuHelpers.mapTree(newItems, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    }, [filterValue, items]);
+    const loadMore = useCallback(() => {
+        if (!loading) {
+            setLoading(true);
+            setTimeout(() => {
+                setLoading(false);
+                setItems(() => {
+                    const previousNestedLength = menuHelpers.getItem(items, rootItemId)?.items?.length || 0;
+                    const newItems = lazyItems.slice(previousNestedLength, previousNestedLength + 3);
+                    if (newItems.length === 0)
+                        setHasMore(false);
+                    return menuHelpers.appendTo(items, newItems, rootItemId);
+                });
+            }, 200000);
+        }
+    }, [items, loading]);
+    const toggleItem = (id) => {
+        setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
+    };
+    useEffect(() => {
+        if (hasMore) {
+            loadMore();
+        }
+    }, [hasMore]);
+    const onItemExpand = useCallback(() => {
+        // You wouldn't do this here in production, but in this story we know the menu 'hasMore'
+        // un-rendered items every time it expands.
+        setHasMore(true);
+    }, []);
+    const onItemCollapse = useCallback(() => {
+        setHasMore(false);
+        setLoading(false);
+        // You wouldn't do this in production. We are re-slicing the lazy children in this story to avoid
+        // having to refresh to view the lazy loading behavior again.
+        setItems(cur => [{ ...cur[0], items: [] }]);
+    }, []);
+    return (_jsx(ComboBox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, mode: 'multi-select', label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: {
+            items: selected,
+            onRemove: toggleItem
+        }, value: filterValue, onChange: (e) => {
+            setFilterValue(e.target.value);
+        }, onBlur: () => {
+            setFilterValue('');
+        }, menu: {
+            items: itemsToRender,
+            onItemClick: toggleItem,
+            onItemExpand,
+            onItemCollapse,
+            loading,
+            loadMore: hasMore ? loadMore : undefined,
+            accent: filterRegex,
+            emptyText: 'No items',
+            scrollAt: args.scrollAt,
+            footer: args.createNew ? createNewButton : undefined
+        } }));
+};
+FilterableMultiSelectLazyChildren.args = {
+    label: 'ComboBox Multi Lazy Children'
+};
+export const MenuWithCreateNew = () => {
+    return _jsx(ComboBox, { label: 'Operators', menu: { items: list, onCreateNew: () => { } } });
+};
+//# sourceMappingURL=ComboBox.stories.js.map