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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"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","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

@@ -1,4 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,11 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-import { 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

@@ -1 +0,0 @@
-{"version":3,"file":"ComboBox.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAElE,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

@@ -1,57 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"ComboBox.mocks.js","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Button, Icon, 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

@@ -1,34 +0,0 @@
-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

@@ -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,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

@@ -1,428 +0,0 @@
-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