@pega/cosmos-react-demos 7.11.3 → 7.11.4-10

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

@@ -1,26 +0,0 @@
-/// <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: import("react").JSX.Element;
-//# sourceMappingURL=ComboBox.mocks.d.ts.map

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

@@ -1 +0,0 @@
-{"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,6BAI3B,CAAC"}

package/jsx/core/ComboBox/ComboBox.mocks.jsx

@@ -1,58 +0,0 @@
-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 = (<Button variant='link' onClick={() => { }}>
-    <Icon name='plus'/> Create new
-  </Button>);
-//# sourceMappingURL=ComboBox.mocks.jsx.map

package/jsx/core/ComboBox/ComboBox.mocks.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComboBox.mocks.jsx","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,EAAE;IACnD,OAAO,IAAI,MAAM,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,uBAAuB,EAAE,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;AACpF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAuB;IACtC,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;IAC1E,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;IACpE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;IAC/E,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,eAAe,CAAC,EAAE;IAChF,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;IAC9E,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;IACpE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;IACtE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE;IACvE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,EAAE;IACzE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;IAC5E,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;IAC9E,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;IAClF,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,eAAe,CAAC,EAAE;IACrF,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;IAClF,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;IACtE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;IACvE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE;IACzE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,EAAE;IAClF,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;IAC3E,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;IACxE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;IAChF,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,eAAe,CAAC,EAAE;IAClF,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;IAC/E,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;IACvE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;IACxE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE;IAC1E,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,EAAE;IAC9E;QACE,EAAE,EAAE,GAAG;QACP,KAAK,EAAE,MAAM;QACb,KAAK,EAAE;YACL,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE;YAClC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE;YAClC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE;YAClC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE;SACpC;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,EAAE,EAAE,IAAI;IACR,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC;IAChC,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;QAC1E,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;QACzE,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;KAC1E;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,CAAC;AAExC,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CACvC;IAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAI;EACvB,EAAE,MAAM,CAAC,CACV,CAAC","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/jsx/core/ComboBox/ComboBox.stories.d.ts

@@ -1,25 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { ComboBoxProps, MenuProps } from '@pega/cosmos-react-core';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").ReactRenderer, import("@storybook/csf").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;
-export declare const MenuWithListFetching: StoryFn;
-//# sourceMappingURL=ComboBox.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"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,wBA6BU;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,CAmF9D,CAAC;AAcF,eAAO,MAAM,yBAAyB,EAAE,OAAO,CAAC,kBAAkB,CAmFjE,CAAC;AAeF,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,kBAAkB,CAkE7D,CAAC;AAaF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAC,kBAAkB,CAkDhE,CAAC;AAgBF,eAAO,MAAM,qCAAqC,EAAE,OAAO,CAAC,kBAAkB,CAoE7E,CAAC;AAgBF,eAAO,MAAM,iCAAiC,EAAE,OAAO,CAAC,kBAAkB,CAqIzE,CAAC;AAMF,eAAO,MAAM,iBAAiB,EAAE,OAE/B,CAAC;AAiBF,eAAO,MAAM,oBAAoB,EAAE,OA4BlC,CAAC"}

package/jsx/core/ComboBox/ComboBox.stories.jsx

@@ -1,418 +0,0 @@
-import { useCallback, useMemo, useState, useEffect } from 'react';
-import { Button, ComboBox, Flex, menuHelpers } from '@pega/cosmos-react-core';
-import { getFilterRegex, list, tree, createNewButton } from './ComboBox.mocks';
-export default {
-    title: 'Core/ComboBox',
-    component: ComboBox,
-    args: {
-        label: '',
-        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 (<ComboBox additionalInfo={args.showAdditionalInfo
-            ? {
-                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 (<ComboBox additionalInfo={args.showAdditionalInfo
-            ? {
-                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 (<ComboBox additionalInfo={args.showAdditionalInfo
-            ? {
-                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 (<ComboBox additionalInfo={args.showAdditionalInfo
-            ? {
-                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 (<ComboBox additionalInfo={args.showAdditionalInfo
-            ? {
-                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);
-                });
-            }, 2000);
-        }
-    }, [items, loading]);
-    const toggleItem = (id) => {
-        setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
-    };
-    useEffect(() => {
-        if (hasMore) {
-            loadMore();
-        }
-    }, [hasMore]);
-    const onItemExpand = useCallback(() => {
-        setHasMore(true);
-    }, []);
-    const onItemCollapse = useCallback(() => {
-        setHasMore(false);
-        setLoading(false);
-        setItems(cur => [{ ...cur[0], items: [] }]);
-    }, []);
-    return (<ComboBox additionalInfo={args.showAdditionalInfo
-            ? {
-                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 <ComboBox label='Operators' menu={{ items: list, onCreateNew: () => { } }}/>;
-};
-MenuWithCreateNew.argTypes = {
-    label: { table: { disable: true } },
-    labelHidden: { table: { disable: true } },
-    info: { table: { disable: true } },
-    placeholder: { table: { disable: true } },
-    status: { table: { disable: true } },
-    required: { table: { disable: true } },
-    disabled: { table: { disable: true } },
-    readOnly: { table: { disable: true } },
-    showAdditionalInfo: { table: { disable: true } },
-    createNew: { table: { disable: true } },
-    scrollAt: { table: { disable: true } }
-};
-export const MenuWithListFetching = () => {
-    const [items, setItems] = useState([]);
-    const [loading, setLoading] = useState(false);
-    const fetchItems = () => {
-        if (loading || items.length > 0)
-            return;
-        setLoading(true);
-        new Promise(r => {
-            setTimeout(r, 3000);
-        }).then(() => {
-            setItems(list.slice(1, 10));
-            setLoading(false);
-        });
-    };
-    return (<Flex container={{ direction: 'column', gap: 2 }}>
-      <Button onClick={() => setItems([])}>Clear Items In Combobox</Button>
-      <ComboBox label='Cars' onMenuOpen={fetchItems} menu={{
-            items,
-            loading
-        }}/>
-    </Flex>);
-};
-MenuWithListFetching.argTypes = {
-    label: { table: { disable: true } },
-    labelHidden: { table: { disable: true } },
-    info: { table: { disable: true } },
-    placeholder: { table: { disable: true } },
-    status: { table: { disable: true } },
-    required: { table: { disable: true } },
-    disabled: { table: { disable: true } },
-    readOnly: { table: { disable: true } },
-    showAdditionalInfo: { table: { disable: true } },
-    createNew: { table: { disable: true } },
-    scrollAt: { table: { disable: true } }
-};
-//# sourceMappingURL=ComboBox.stories.jsx.map