@pega/cosmos-react-demos 3.0.0-dev.17.0 → 3.0.0-dev.18.2

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

@@ -1 +1 @@
-{"version":3,"file":"Form.mocks.js","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, ChangeEvent, FocusEvent, FormEvent, useRef, useContext } from 'react';\n\nimport {\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  Form,\n  FormControlProps,\n  Grid,\n  Input,\n  RadioButton,\n  RadioButtonGroup,\n  Select,\n  Option,\n  TextArea,\n  ToasterContext\n} from '@pega/cosmos-react-core';\nimport {\n  Editor as RichTextEditor,\n  EditorState as RichTextEditorState\n} from '@pega/cosmos-react-rte';\n\nimport { FileInputDemo } from '../File/FileInput.stories';\nimport { FilterableSingleSelect as ComboboxFilterableStory } from '../ComboBox/ComboBox.stories';\n\ninterface Field extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nconst initFields = (): Field[] => {\n  const common = { value: undefined, status: undefined };\n  return [\n    {\n      ...common,\n      name: 'name',\n      required: true,\n      error: 'Please enter first and last name',\n      validator() {\n        if (!this.value) return false;\n        return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'email',\n      required: true,\n      error: 'Enter a @pega.com address',\n      validator() {\n        if (!this.value) return false;\n        return /^\\S+@pega\\.com$/.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'notes',\n      required: true,\n      help: 'See how fast you can type 20 characters…go',\n      error: 'You need to tell us more than 20 characters',\n      validator() {\n        if (!this.value) return false;\n        return this.value.length >= 20;\n      }\n    }\n  ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n  fields: Field[],\n  {\n    target,\n    type\n  }:\n    | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n    | FocusEvent<HTMLInputElement | HTMLTextAreaElement>\n) => {\n  return fields.map(field => {\n    if (field.name === target.name) {\n      field.value = target.value;\n      if (type === 'blur' || field.status === 'error') {\n        if ((field.required || field.value) && !field.validator()) {\n          field.status = 'error';\n          field.info = field.error;\n        } else {\n          field.status = undefined;\n          field.info = field.help;\n        }\n      }\n    }\n    return field;\n  });\n};\n\nexport const FormContent = ({\n  cols,\n  heading,\n  description,\n  showActions\n}: {\n  cols: number;\n  showActions: boolean;\n  heading?: string;\n  description?: string;\n}) => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useContext(ToasterContext);\n\n  const name = fields.find(field => field.name === 'name');\n  const email = fields.find(field => field.name === 'email');\n  const notes = fields.find(field => field.name === 'notes');\n\n  if (!name || !email || !notes) return null;\n\n  const canSubmit = fields.every(field => field.value && field.validator());\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={() => {\n          push({ content: 'Form cancelled!' });\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n        Submit\n      </Button>\n    </>\n  );\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  return (\n    <Form\n      actions={showActions ? actions : undefined}\n      description={description}\n      heading={heading}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        push({ content: 'Form submitted!' });\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n        <Input\n          name='name'\n          label='Name'\n          value={name.value}\n          required={name.required}\n          status={name.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Input\n          name='email'\n          value={email.value}\n          type='email'\n          label='Email'\n          required={email.required}\n          status={email.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <CheckboxGroup name='visited' label='Places you have worked'>\n            {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n              <Checkbox\n                key={office}\n                label={office}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </CheckboxGroup>\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n            {['Yes', \"No… no I don't\"].map(option => (\n              <RadioButton\n                key={option}\n                label={option}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </RadioButtonGroup>\n        </Grid>\n\n        <Select label='What would you like to eat?' info='FYI: options are limited'>\n          <Option>choose meal…</Option>\n          <Option>Pizza</Option>\n          <Option>Sandwich</Option>\n          <Option>Salad</Option>\n        </Select>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <TextArea\n            name='notes'\n            required={notes.required}\n            label='Meeting Notes'\n            status={notes.status}\n            info={notes.info || notes.help}\n            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          />\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RichTextEditor\n            label='Detailed meeting notes'\n            info='The rich text editor can be used in forms, comments, and documents'\n            toolbar={[\n              'inline-styling',\n              'headers',\n              'tables',\n              'links',\n              'images',\n              'lists',\n              'cut-copy-paste',\n              'indentation'\n            ]}\n            onImageAdded={onImageAdded}\n            ref={editorRef}\n          />\n        </Grid>\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <FileInputDemo />\n        </Grid>\n        <ComboboxFilterableStory />\n      </Grid>\n    </Form>\n  );\n};\n"]}
+{"version":3,"file":"Form.mocks.js","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, ChangeEvent, FocusEvent, FormEvent, useRef, useContext } from 'react';\n\nimport {\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  Form,\n  FormControlProps,\n  Grid,\n  Input,\n  RadioButton,\n  RadioButtonGroup,\n  Select,\n  Option,\n  TextArea,\n  ToasterContext\n} from '@pega/cosmos-react-core';\nimport {\n  Editor as RichTextEditor,\n  EditorState as RichTextEditorState\n} from '@pega/cosmos-react-rte';\n\nimport { FileInputDemo } from '../File/FileInput.stories';\nimport { FilterableSingleSelect as ComboboxFilterableStory } from '../ComboBox/ComboBox.stories';\n\ninterface Field extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nconst initFields = (): Field[] => {\n  const common = { value: undefined, status: undefined };\n  return [\n    {\n      ...common,\n      name: 'name',\n      required: true,\n      error: 'Please enter first and last name',\n      validator() {\n        if (!this.value) return false;\n        return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'email',\n      required: true,\n      error: 'Enter a @pega.com address',\n      validator() {\n        if (!this.value) return false;\n        return /^\\S+@pega\\.com$/.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'notes',\n      required: true,\n      help: 'See how fast you can type 20 characters…go',\n      error: 'You need to tell us more than 20 characters',\n      validator() {\n        if (!this.value) return false;\n        return this.value.length >= 20;\n      }\n    }\n  ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n  fields: Field[],\n  {\n    target,\n    type\n  }:\n    | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n    | FocusEvent<HTMLInputElement | HTMLTextAreaElement>\n) => {\n  return fields.map(field => {\n    if (field.name === target.name) {\n      field.value = target.value;\n      if (type === 'blur' || field.status === 'error') {\n        if ((field.required || field.value) && !field.validator()) {\n          field.status = 'error';\n          field.info = field.error;\n        } else {\n          field.status = undefined;\n          field.info = field.help;\n        }\n      }\n    }\n    return field;\n  });\n};\n\nexport const FormContent = ({\n  cols,\n  heading,\n  description,\n  showActions\n}: {\n  cols: number;\n  showActions: boolean;\n  heading?: string;\n  description?: string;\n}) => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useContext(ToasterContext);\n\n  const name = fields.find(field => field.name === 'name');\n  const email = fields.find(field => field.name === 'email');\n  const notes = fields.find(field => field.name === 'notes');\n\n  if (!name || !email || !notes) return null;\n\n  const canSubmit = fields.every(field => field.value && field.validator());\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={() => {\n          push({ content: 'Form cancelled!' });\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n        Submit\n      </Button>\n    </>\n  );\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  return (\n    <Form\n      actions={showActions ? actions : undefined}\n      description={description}\n      heading={heading}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        push({ content: 'Form submitted!' });\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n        <Input\n          name='name'\n          label='Name'\n          value={name.value}\n          required={name.required}\n          status={name.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Input\n          name='email'\n          value={email.value}\n          type='email'\n          label='Email'\n          required={email.required}\n          status={email.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <CheckboxGroup name='visited' label='Places you have worked'>\n            {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n              <Checkbox\n                key={office}\n                label={office}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </CheckboxGroup>\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n            {['Yes', \"No… no I don't\"].map(option => (\n              <RadioButton\n                key={option}\n                label={option}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </RadioButtonGroup>\n        </Grid>\n\n        <Select label='What would you like to eat?' info='FYI: options are limited'>\n          <Option>choose meal…</Option>\n          <Option>Pizza</Option>\n          <Option>Sandwich</Option>\n          <Option>Salad</Option>\n        </Select>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <TextArea\n            name='notes'\n            required={notes.required}\n            label='Meeting Notes'\n            status={notes.status}\n            info={notes.info || notes.help}\n            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          />\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RichTextEditor\n            label='Detailed meeting notes'\n            info='The rich text editor can be used in forms, comments, and documents'\n            toolbar={[\n              'inline-styling',\n              'headers',\n              'tables',\n              'links',\n              'images',\n              'lists',\n              'cut-copy-paste',\n              'indentation'\n            ]}\n            onImageAdded={onImageAdded}\n            ref={editorRef}\n          />\n        </Grid>\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <FileInputDemo />\n        </Grid>\n\n        <ComboboxFilterableStory label='Select a user' />\n      </Grid>\n    </Form>\n  );\n};\n"]}

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

@@ -1,6 +1,10 @@
 import { Meta, Story } from '@storybook/react';
+import { ListToolbarProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const ListToolbarDemo: Story;
+interface ListToolbarStoryProps {
+    condensed: ListToolbarProps['condensed'];
+}
+export declare const ListToolbarDemo: Story<ListToolbarStoryProps>;
 export declare const SimpleToolbarDemo: Story;
 //# sourceMappingURL=ListToolbar.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAe/C,wBAGU;AAIV,eAAO,MAAM,eAAe,EAAE,KAsF7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAC"}
+{"version":3,"file":"ListToolbar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAGL,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;;AAWjC,wBAGU;AAIV,UAAU,qBAAqB;IAC7B,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CAwFxD,CAAC;AAUF,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAC"}

package/lib/core/ListToolbar/ListToolbar.stories.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Card, CardHeader, ListToolbar } from '@pega/cosmos-react-core';
+import { Card, CardHeader, ListToolbar, MenuButton } from '@pega/cosmos-react-core';
 import { mockViews, actions, FilterRenderer, StagedStateDispatchContext, GroupRenderer } from './ListToolbar.mocks';
 export default {
     title: 'Core/ListToolbar',
     component: ListToolbar
 };
-export const ListToolbarDemo = () => {
+export const ListToolbarDemo = (args) => {
     const [stagedQueryOptionState, setStagedQueryOptionState] = useState(null);
     const [views, setViews] = useState(mockViews);
     const [currentSort, setCurrentSort] = useState(null);
@@ -71,7 +71,13 @@ export const ListToolbarDemo = () => {
                     }, onCreateNew: action('Clicked Create New'), search: { onSearchSubmit: action('Search submit') }, count: {
                         total: 32,
                         selected: 4
-                    }, filter: filterProp, sort: sortProp, group: groupProp, actions: actions }) }) }) }));
+                    }, filter: filterProp, sort: sortProp, group: groupProp, actions: actions, additionalActions: _jsx(MenuButton, { text: 'Edit' }), condensed: args.condensed }) }) }) }));
+};
+ListToolbarDemo.args = {
+    condensed: false
+};
+ListToolbarDemo.argTypes = {
+    condensed: { control: { type: 'boolean' } }
 };
 export const SimpleToolbarDemo = () => {
     return (_jsx(Card, { children: _jsx(CardHeader, { children: _jsx(ListToolbar, { heading: 'Top accounts in California', search: { onSearchSubmit: action('Search submit') }, count: { total: 212, totalHasMore: true }, actions: actions }) }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.stories.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Card, CardHeader, ListToolbar } from '@pega/cosmos-react-core';\nimport { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport {\n  mockViews,\n  actions,\n  FilterRenderer,\n  StagedStateDispatchContext,\n  GroupRenderer\n} from './ListToolbar.mocks';\n\nexport default {\n  title: 'Core/ListToolbar',\n  component: ListToolbar\n} as Meta;\n\ntype SortString = 'asc' | 'desc';\n\nexport const ListToolbarDemo: Story = () => {\n  const [stagedQueryOptionState, setStagedQueryOptionState] = useState<object | null>(null);\n  const [views, setViews] = useState(mockViews);\n  const [currentSort, setCurrentSort] = useState<SortString | null>(null);\n\n  const filterProp = useMemo(() => {\n    return {\n      value: stagedQueryOptionState,\n      count: undefined,\n      renderer: FilterRenderer,\n      onCancel: () => {\n        setStagedQueryOptionState(null);\n      },\n      onSubmit: () => {\n        setStagedQueryOptionState(cur => {\n          // eslint-disable-next-line no-console\n          console.table(cur);\n          return null;\n        });\n      }\n    };\n  }, [stagedQueryOptionState]);\n\n  const sortProp: PresetMenuProps = useMemo(() => {\n    return {\n      mode: 'single-select',\n      count: currentSort ? 1 : undefined,\n      items: [\n        {\n          id: 'asc',\n          text: 'Ascending',\n          icon: 'arrow-up',\n          selected: currentSort === 'asc'\n        },\n        {\n          id: 'desc',\n          text: 'Descending',\n          icon: 'arrow-down',\n          selected: currentSort === 'desc'\n        }\n      ],\n      onItemClick: id => {\n        setCurrentSort(cur => {\n          return cur === id ? null : (id as SortString);\n        });\n      }\n    };\n  }, [currentSort]);\n\n  const groupProp = useMemo(() => {\n    return {\n      count: undefined,\n      renderer: GroupRenderer,\n      onCancel: () => {},\n      onSubmit: () => {}\n    };\n  }, []);\n\n  return (\n    <Card>\n      <CardHeader>\n        <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n          <ListToolbar\n            heading={{\n              views,\n              onViewSelect: id => {\n                setViews(cur => {\n                  return cur.map(view => ({ ...view, selected: view.id === id }));\n                });\n              }\n            }}\n            onCreateNew={action('Clicked Create New')}\n            search={{ onSearchSubmit: action('Search submit') }}\n            count={{\n              total: 32,\n              selected: 4\n            }}\n            filter={filterProp}\n            sort={sortProp}\n            group={groupProp}\n            actions={actions}\n          />\n        </StagedStateDispatchContext.Provider>\n      </CardHeader>\n    </Card>\n  );\n};\n\nexport const SimpleToolbarDemo: Story = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <ListToolbar\n          heading='Top accounts in California'\n          search={{ onSearchSubmit: action('Search submit') }}\n          count={{ total: 212, totalHasMore: true }}\n          actions={actions}\n        />\n      </CardHeader>\n    </Card>\n  );\n};\n"]}
+{"version":3,"file":"ListToolbar.stories.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Card,\n  CardHeader,\n  ListToolbarProps,\n  ListToolbar,\n  MenuButton\n} from '@pega/cosmos-react-core';\nimport { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport {\n  mockViews,\n  actions,\n  FilterRenderer,\n  StagedStateDispatchContext,\n  GroupRenderer\n} from './ListToolbar.mocks';\n\nexport default {\n  title: 'Core/ListToolbar',\n  component: ListToolbar\n} as Meta;\n\ntype SortString = 'asc' | 'desc';\n\ninterface ListToolbarStoryProps {\n  condensed: ListToolbarProps['condensed'];\n}\n\nexport const ListToolbarDemo: Story<ListToolbarStoryProps> = (args: ListToolbarStoryProps) => {\n  const [stagedQueryOptionState, setStagedQueryOptionState] = useState<object | null>(null);\n  const [views, setViews] = useState(mockViews);\n  const [currentSort, setCurrentSort] = useState<SortString | null>(null);\n\n  const filterProp = useMemo(() => {\n    return {\n      value: stagedQueryOptionState,\n      count: undefined,\n      renderer: FilterRenderer,\n      onCancel: () => {\n        setStagedQueryOptionState(null);\n      },\n      onSubmit: () => {\n        setStagedQueryOptionState(cur => {\n          // eslint-disable-next-line no-console\n          console.table(cur);\n          return null;\n        });\n      }\n    };\n  }, [stagedQueryOptionState]);\n\n  const sortProp: PresetMenuProps = useMemo(() => {\n    return {\n      mode: 'single-select',\n      count: currentSort ? 1 : undefined,\n      items: [\n        {\n          id: 'asc',\n          text: 'Ascending',\n          icon: 'arrow-up',\n          selected: currentSort === 'asc'\n        },\n        {\n          id: 'desc',\n          text: 'Descending',\n          icon: 'arrow-down',\n          selected: currentSort === 'desc'\n        }\n      ],\n      onItemClick: id => {\n        setCurrentSort(cur => {\n          return cur === id ? null : (id as SortString);\n        });\n      }\n    };\n  }, [currentSort]);\n\n  const groupProp = useMemo(() => {\n    return {\n      count: undefined,\n      renderer: GroupRenderer,\n      onCancel: () => {},\n      onSubmit: () => {}\n    };\n  }, []);\n\n  return (\n    <Card>\n      <CardHeader>\n        <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n          <ListToolbar\n            heading={{\n              views,\n              onViewSelect: id => {\n                setViews(cur => {\n                  return cur.map(view => ({ ...view, selected: view.id === id }));\n                });\n              }\n            }}\n            onCreateNew={action('Clicked Create New')}\n            search={{ onSearchSubmit: action('Search submit') }}\n            count={{\n              total: 32,\n              selected: 4\n            }}\n            filter={filterProp}\n            sort={sortProp}\n            group={groupProp}\n            actions={actions}\n            additionalActions={<MenuButton text='Edit' />}\n            condensed={args.condensed}\n          />\n        </StagedStateDispatchContext.Provider>\n      </CardHeader>\n    </Card>\n  );\n};\n\nListToolbarDemo.args = {\n  condensed: false\n};\n\nListToolbarDemo.argTypes = {\n  condensed: { control: { type: 'boolean' } }\n};\n\nexport const SimpleToolbarDemo: Story = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <ListToolbar\n          heading='Top accounts in California'\n          search={{ onSearchSubmit: action('Search submit') }}\n          count={{ total: 212, totalHasMore: true }}\n          actions={actions}\n        />\n      </CardHeader>\n    </Card>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Menu/Menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAOL,SAAS,EAOT,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAKjC,wBA6BU;AAEV,UAAU,cAAe,SAAQ,UAAU,CAAC,SAAS,EAAE,OAAO,CAAC;IAC7D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,GAAG,aAAa,CAAC;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,cAAc,CAgM1C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAE9C,CAAC"}
+{"version":3,"file":"Menu.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Menu/Menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAOL,SAAS,EAOT,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAKjC,wBA6BU;AAEV,UAAU,cAAe,SAAQ,UAAU,CAAC,SAAS,EAAE,OAAO,CAAC;IAC7D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,GAAG,aAAa,CAAC;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,cAAc,CAoM1C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAE9C,CAAC"}

package/lib/core/Menu/Menu.stories.js

@@ -35,6 +35,7 @@ export default {
 };
 export const MenuDemo = (args) => {
     const menuID = createUID();
+    const menuListID = `${menuID}--list`;
     const data = args.useFlatData ? cars : countries;
     const searchEleRef = useRef(null);
     const { push } = useContext(ToasterContext);
@@ -118,7 +119,7 @@ export const MenuDemo = (args) => {
             searchEleRef?.current?.focus();
         }
     }, [isOpen, searchEleRef.current]);
-    return (_jsxs(Flex, { container: { justify: 'center' }, children: [_jsx(Button, { ref: setButtonEl, onClick: () => setIsOpen(cur => !cur), variant: 'primary', children: "Open the MENU" }), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonEl, children: _jsx(Menu, { ...args, id: menuID, items: args.noItems ? [] : itemsToRender, accent: search ? searchRegex : undefined, mode: args.variant === 'drill-down' ? args.mode : 'action', loading: isLoading, emptyText: args.emptyText, variant: args.variant, loadMore: args.infiniteScroll && hasMore ? loadMore : undefined, focusControlEl: searchEleRef.current || undefined, onItemClick: id => {
+    return (_jsxs(Flex, { container: { justify: 'center' }, children: [_jsx(Button, { ref: setButtonEl, onClick: () => setIsOpen(cur => !cur), variant: 'primary', children: "Open the MENU" }), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonEl, children: _jsx(Menu, { ...args, id: menuID, listId: menuListID, items: args.noItems ? [] : itemsToRender, accent: search ? searchRegex : undefined, mode: args.variant === 'drill-down' ? args.mode : 'action', role: 'listbox', loading: isLoading, emptyText: args.emptyText, variant: args.variant, loadMore: args.infiniteScroll && hasMore ? loadMore : undefined, focusControlEl: searchEleRef.current || undefined, onItemClick: id => {
                         if (args.mode === 'single-select' || args.mode === 'multi-select') {
                             setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));
                         }
@@ -132,7 +133,7 @@ export const MenuDemo = (args) => {
                             }
                             resetMenu();
                         }
-                    }, header: args.variant === 'drill-down' && (_jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, role: 'combobox', searchInputAriaLabel: 'Start typing to search.' })), footer: args.variant === 'flyout' ? (_jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, role: 'combobox', searchInputAriaLabel: 'Start typing to search.' })) : ((args.mode === 'single-select' || args.mode === 'multi-select') && (_jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { onClick: resetMenu, children: "Cancel" }), _jsxs(Button, { variant: 'primary', disabled: !selections.length, onClick: () => {
+                    }, header: args.variant === 'drill-down' && (_jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, role: 'searchbox', searchInputAriaLabel: 'Start typing to search.', "aria-controls": menuListID })), footer: args.variant === 'flyout' ? (_jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, role: 'searchbox', searchInputAriaLabel: 'Start typing to search.' })) : ((args.mode === 'single-select' || args.mode === 'multi-select') && (_jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { onClick: resetMenu, children: "Cancel" }), _jsxs(Button, { variant: 'primary', disabled: !selections.length, onClick: () => {
                                     resetMenu();
                                     push({
                                         id: `${Date.now()}`,

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.stories.js","sourceRoot":"","sources":["../../../src/core/Menu/Menu.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n  Button,\n  Count,\n  Flex,\n  Menu,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps,\n  Popover,\n  SearchInput,\n  ToasterContext,\n  createUID,\n  useElement,\n  useOuterEvent,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { cars, countries } from './Menu.mocks';\nimport { StyledFlag } from './Menu.styles';\n\nexport default {\n  title: 'Core/Menu',\n  component: Menu,\n  args: {\n    variant: 'drill-down',\n    mode: 'action',\n    showItemSecondary: true,\n    showItemVisual: true,\n    showItemCount: true,\n    parentSelection: false,\n    filterPattern: 'contains',\n    infiniteScroll: false,\n    noItems: false,\n    emptyText: 'No items',\n    useFlatData: false\n  },\n  argTypes: {\n    variant: { options: ['drill-down', 'flyout'], control: { type: 'select' } },\n    mode: { options: ['action', 'single-select', 'multi-select'], control: { type: 'select' } },\n    showItemSecondary: { control: { type: 'boolean' } },\n    showItemVisual: { control: { type: 'boolean' } },\n    showItemCount: { control: { type: 'boolean' } },\n    parentSelection: { control: { type: 'boolean' } },\n    filterPattern: { options: ['contains', 'starts with'], control: { type: 'select' } },\n    infiniteScroll: { control: { type: 'boolean' } },\n    noItems: { control: { type: 'boolean' } },\n    emptyText: { control: { type: 'text' } },\n    useFlatData: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface MenuStoryProps extends OmitStrict<MenuProps, 'items'> {\n  showItemSecondary?: boolean;\n  showItemVisual?: boolean;\n  showItemCount?: boolean;\n  parentSelection?: boolean;\n  filterPattern?: 'contains' | 'starts with';\n  infiniteScroll?: boolean;\n  noItems?: boolean;\n  useFlatData?: boolean;\n}\n\nexport const MenuDemo: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n  const menuID = createUID();\n  const data = args.useFlatData ? cars : countries;\n\n  const searchEleRef = useRef<HTMLInputElement>(null);\n  const { push } = useContext(ToasterContext);\n  const [isOpen, setIsOpen] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n  const [items, setItems] = useState<MenuProps['items']>(\n    args.infiniteScroll ? data.slice(0, 10) : data\n  );\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>(null);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const [search, setSearch] = useState('');\n  const selections = useMemo(() => menuHelpers.getSelected(items), [items]);\n  const searchRegex = useMemo(() => {\n    const escapedSearch = search.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&');\n    return new RegExp(args.filterPattern === 'contains' ? escapedSearch : `^${escapedSearch}`, 'i');\n  }, [search, args.filterPattern]);\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(\n      search\n        ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n            return searchRegex.test(primary);\n          })\n        : items,\n      item => {\n        let selectable = false;\n\n        if (!item.items || args.parentSelection) {\n          selectable = true;\n        }\n\n        return {\n          ...item,\n          visual:\n            args.showItemVisual && item.visual ? <StyledFlag>{item.visual}</StyledFlag> : undefined,\n          count: args.showItemCount && item.items ? item.items.length : undefined,\n          secondary: args.showItemSecondary ? item.secondary : undefined,\n          selected: selectable ? !!item.selected : undefined,\n          tooltip: args.variant === 'flyout' ? item.tooltip : undefined\n        };\n      }\n    );\n  }, [search, items, searchRegex, args.showItemVisual]);\n\n  const resetMenu = useCallback(() => {\n    setIsOpen(false);\n    setItems(data.slice(0, 10));\n    setSearch('');\n  }, []);\n\n  const onKeydown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') resetMenu();\n    },\n    [resetMenu]\n  );\n\n  const loadMore = useCallback(\n    (expandedItemId?: MenuItemProps['id']) => {\n      if (!expandedItemId) {\n        setIsLoading(true);\n        setTimeout(() => {\n          setIsLoading(false);\n          setItems(prevItems => {\n            const newItems = data.slice(prevItems.length, prevItems.length + 10);\n\n            if (newItems.length === 0) setHasMore(false);\n\n            return menuHelpers.appendTo(prevItems, newItems, expandedItemId);\n          });\n        }, 2000);\n      }\n    },\n    [data]\n  );\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], e => {\n    if (args.variant === 'flyout') {\n      const path = e.composedPath();\n      const considerEvent = path.every(el => {\n        return !(el instanceof HTMLElement && el.dataset.flyoutMenuParentId === menuID);\n      });\n      if (considerEvent) {\n        resetMenu();\n      }\n    } else {\n      resetMenu();\n    }\n  });\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (isOpen) {\n      searchEleRef?.current?.focus();\n    }\n  }, [isOpen, searchEleRef.current]);\n\n  return (\n    <Flex container={{ justify: 'center' }}>\n      <Button ref={setButtonEl} onClick={() => setIsOpen(cur => !cur)} variant='primary'>\n        Open the MENU\n      </Button>\n\n      <Popover show={isOpen} ref={setPopoverEl} target={buttonEl}>\n        <Menu\n          {...args}\n          id={menuID}\n          items={args.noItems ? [] : itemsToRender}\n          accent={search ? searchRegex : undefined}\n          mode={args.variant === 'drill-down' ? args.mode : 'action'}\n          loading={isLoading}\n          emptyText={args.emptyText}\n          variant={args.variant}\n          loadMore={args.infiniteScroll && hasMore ? loadMore : undefined}\n          focusControlEl={searchEleRef.current || undefined}\n          onItemClick={id => {\n            if (args.mode === 'single-select' || args.mode === 'multi-select') {\n              setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));\n            } else {\n              const clicked = menuHelpers.getItem(items, id);\n              if (clicked) {\n                push({\n                  id: `${Date.now()}`,\n                  content: `${clicked.primary} added`\n                });\n              }\n              resetMenu();\n            }\n          }}\n          header={\n            args.variant === 'drill-down' && (\n              <SearchInput\n                ref={searchEleRef}\n                onSearchChange={setSearch}\n                value={search}\n                role='combobox'\n                searchInputAriaLabel='Start typing to search.'\n              />\n            )\n          }\n          footer={\n            args.variant === 'flyout' ? (\n              <SearchInput\n                ref={searchEleRef}\n                onSearchChange={setSearch}\n                value={search}\n                role='combobox'\n                searchInputAriaLabel='Start typing to search.'\n              />\n            ) : (\n              (args.mode === 'single-select' || args.mode === 'multi-select') && (\n                <Flex container={{ justify: 'between' }}>\n                  <Button onClick={resetMenu}>Cancel</Button>\n\n                  <Button\n                    variant='primary'\n                    disabled={!selections.length}\n                    onClick={() => {\n                      resetMenu();\n                      push({\n                        id: `${Date.now()}`,\n                        content: `${selections.length} item${\n                          selections.length !== 1 ? 's' : ''\n                        } added`\n                      });\n                    }}\n                  >\n                    Add\n                    {selections.length > 0 && args.mode === 'multi-select' && (\n                      <>\n                        &nbsp;<Count>{selections.length}</Count>\n                      </>\n                    )}\n                  </Button>\n                </Flex>\n              )\n            )\n          }\n        />\n      </Popover>\n    </Flex>\n  );\n};\n\nexport const FlatMenuDemo: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n  return <MenuDemo {...args} useFlatData />;\n};\n"]}
+{"version":3,"file":"Menu.stories.js","sourceRoot":"","sources":["../../../src/core/Menu/Menu.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n  Button,\n  Count,\n  Flex,\n  Menu,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps,\n  Popover,\n  SearchInput,\n  ToasterContext,\n  createUID,\n  useElement,\n  useOuterEvent,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { cars, countries } from './Menu.mocks';\nimport { StyledFlag } from './Menu.styles';\n\nexport default {\n  title: 'Core/Menu',\n  component: Menu,\n  args: {\n    variant: 'drill-down',\n    mode: 'action',\n    showItemSecondary: true,\n    showItemVisual: true,\n    showItemCount: true,\n    parentSelection: false,\n    filterPattern: 'contains',\n    infiniteScroll: false,\n    noItems: false,\n    emptyText: 'No items',\n    useFlatData: false\n  },\n  argTypes: {\n    variant: { options: ['drill-down', 'flyout'], control: { type: 'select' } },\n    mode: { options: ['action', 'single-select', 'multi-select'], control: { type: 'select' } },\n    showItemSecondary: { control: { type: 'boolean' } },\n    showItemVisual: { control: { type: 'boolean' } },\n    showItemCount: { control: { type: 'boolean' } },\n    parentSelection: { control: { type: 'boolean' } },\n    filterPattern: { options: ['contains', 'starts with'], control: { type: 'select' } },\n    infiniteScroll: { control: { type: 'boolean' } },\n    noItems: { control: { type: 'boolean' } },\n    emptyText: { control: { type: 'text' } },\n    useFlatData: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface MenuStoryProps extends OmitStrict<MenuProps, 'items'> {\n  showItemSecondary?: boolean;\n  showItemVisual?: boolean;\n  showItemCount?: boolean;\n  parentSelection?: boolean;\n  filterPattern?: 'contains' | 'starts with';\n  infiniteScroll?: boolean;\n  noItems?: boolean;\n  useFlatData?: boolean;\n}\n\nexport const MenuDemo: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n  const menuID = createUID();\n  const menuListID = `${menuID}--list`;\n  const data = args.useFlatData ? cars : countries;\n\n  const searchEleRef = useRef<HTMLInputElement>(null);\n  const { push } = useContext(ToasterContext);\n  const [isOpen, setIsOpen] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n  const [items, setItems] = useState<MenuProps['items']>(\n    args.infiniteScroll ? data.slice(0, 10) : data\n  );\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>(null);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const [search, setSearch] = useState('');\n  const selections = useMemo(() => menuHelpers.getSelected(items), [items]);\n  const searchRegex = useMemo(() => {\n    const escapedSearch = search.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&');\n    return new RegExp(args.filterPattern === 'contains' ? escapedSearch : `^${escapedSearch}`, 'i');\n  }, [search, args.filterPattern]);\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(\n      search\n        ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n            return searchRegex.test(primary);\n          })\n        : items,\n      item => {\n        let selectable = false;\n\n        if (!item.items || args.parentSelection) {\n          selectable = true;\n        }\n\n        return {\n          ...item,\n          visual:\n            args.showItemVisual && item.visual ? <StyledFlag>{item.visual}</StyledFlag> : undefined,\n          count: args.showItemCount && item.items ? item.items.length : undefined,\n          secondary: args.showItemSecondary ? item.secondary : undefined,\n          selected: selectable ? !!item.selected : undefined,\n          tooltip: args.variant === 'flyout' ? item.tooltip : undefined\n        };\n      }\n    );\n  }, [search, items, searchRegex, args.showItemVisual]);\n\n  const resetMenu = useCallback(() => {\n    setIsOpen(false);\n    setItems(data.slice(0, 10));\n    setSearch('');\n  }, []);\n\n  const onKeydown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') resetMenu();\n    },\n    [resetMenu]\n  );\n\n  const loadMore = useCallback(\n    (expandedItemId?: MenuItemProps['id']) => {\n      if (!expandedItemId) {\n        setIsLoading(true);\n        setTimeout(() => {\n          setIsLoading(false);\n          setItems(prevItems => {\n            const newItems = data.slice(prevItems.length, prevItems.length + 10);\n\n            if (newItems.length === 0) setHasMore(false);\n\n            return menuHelpers.appendTo(prevItems, newItems, expandedItemId);\n          });\n        }, 2000);\n      }\n    },\n    [data]\n  );\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], e => {\n    if (args.variant === 'flyout') {\n      const path = e.composedPath();\n      const considerEvent = path.every(el => {\n        return !(el instanceof HTMLElement && el.dataset.flyoutMenuParentId === menuID);\n      });\n      if (considerEvent) {\n        resetMenu();\n      }\n    } else {\n      resetMenu();\n    }\n  });\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (isOpen) {\n      searchEleRef?.current?.focus();\n    }\n  }, [isOpen, searchEleRef.current]);\n\n  return (\n    <Flex container={{ justify: 'center' }}>\n      <Button ref={setButtonEl} onClick={() => setIsOpen(cur => !cur)} variant='primary'>\n        Open the MENU\n      </Button>\n\n      <Popover show={isOpen} ref={setPopoverEl} target={buttonEl}>\n        <Menu\n          {...args}\n          id={menuID}\n          listId={menuListID}\n          items={args.noItems ? [] : itemsToRender}\n          accent={search ? searchRegex : undefined}\n          mode={args.variant === 'drill-down' ? args.mode : 'action'}\n          role='listbox'\n          loading={isLoading}\n          emptyText={args.emptyText}\n          variant={args.variant}\n          loadMore={args.infiniteScroll && hasMore ? loadMore : undefined}\n          focusControlEl={searchEleRef.current || undefined}\n          onItemClick={id => {\n            if (args.mode === 'single-select' || args.mode === 'multi-select') {\n              setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));\n            } else {\n              const clicked = menuHelpers.getItem(items, id);\n              if (clicked) {\n                push({\n                  id: `${Date.now()}`,\n                  content: `${clicked.primary} added`\n                });\n              }\n              resetMenu();\n            }\n          }}\n          header={\n            args.variant === 'drill-down' && (\n              <SearchInput\n                ref={searchEleRef}\n                onSearchChange={setSearch}\n                value={search}\n                role='searchbox'\n                searchInputAriaLabel='Start typing to search.'\n                aria-controls={menuListID}\n              />\n            )\n          }\n          footer={\n            args.variant === 'flyout' ? (\n              <SearchInput\n                ref={searchEleRef}\n                onSearchChange={setSearch}\n                value={search}\n                role='searchbox'\n                searchInputAriaLabel='Start typing to search.'\n              />\n            ) : (\n              (args.mode === 'single-select' || args.mode === 'multi-select') && (\n                <Flex container={{ justify: 'between' }}>\n                  <Button onClick={resetMenu}>Cancel</Button>\n\n                  <Button\n                    variant='primary'\n                    disabled={!selections.length}\n                    onClick={() => {\n                      resetMenu();\n                      push({\n                        id: `${Date.now()}`,\n                        content: `${selections.length} item${\n                          selections.length !== 1 ? 's' : ''\n                        } added`\n                      });\n                    }}\n                  >\n                    Add\n                    {selections.length > 0 && args.mode === 'multi-select' && (\n                      <>\n                        &nbsp;<Count>{selections.length}</Count>\n                      </>\n                    )}\n                  </Button>\n                </Flex>\n              )\n            )\n          }\n        />\n      </Popover>\n    </Flex>\n  );\n};\n\nexport const FlatMenuDemo: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n  return <MenuDemo {...args} useFlatData />;\n};\n"]}

package/lib/core/Number/Number.stories.js

@@ -27,7 +27,7 @@ NumberInputDemo.args = {
     showDecimal: true,
     showGroupSeparators: true,
     step: 1,
-    unit: '',
+    unit: undefined,
     label: 'Number input',
     labelHidden: false,
     info: 'Enter a numerical value',
@@ -112,7 +112,7 @@ StepperDemo.args = {
     showDecimal: true,
     showGroupSeparators: true,
     step: 1,
-    unit: '',
+    unit: undefined,
     label: 'Stepper input',
     labelHidden: false,
     info: 'Enter a numerical value',
@@ -145,7 +145,7 @@ export const NumberDisplayDemo = (args) => {
 };
 NumberDisplayDemo.args = {
     value: undefined,
-    unit: 'ml',
+    unit: undefined,
     fractionDigits: undefined,
     notation: undefined,
     groupSeparators: true

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

@@ -1 +1 @@
-{"version":3,"file":"Number.stories.js","sourceRoot":"","sources":["../../../src/core/Number/Number.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n  NumberDisplay,\n  NumberDisplayProps,\n  NumberInput,\n  NumberInputProps,\n  OmitStrict,\n  usePrevious\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Number',\n  component: NumberInput\n} as Meta;\n\nexport type NumberInputStory = OmitStrict<NumberInputProps, 'value' | 'onChange'> & {\n  value?: number | string;\n  onChange?: (value: string) => void;\n};\n\nexport const NumberInputDemo: Story<NumberInputStory> = (args: NumberInputStory) => {\n  const [value, setValue] = useState<string | undefined>(\n    args.value ? args.value.toString() : undefined\n  );\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value ? args.value.toString() : undefined);\n  }, [prev, args.value]);\n\n  return (\n    <NumberInput\n      {...args}\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        args.onBlur?.(inputValue);\n      }}\n      onFocus={inputValue => {\n        args.onFocus?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nNumberInputDemo.args = {\n  value: undefined,\n  numberOfDecimals: 20,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: '',\n  label: 'Number input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nNumberInputDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: {\n    options: [\n      undefined,\n      'acre',\n      'byte',\n      'celsius',\n      'centimeter',\n      'day',\n      'degree',\n      'fahrenheit',\n      'foot',\n      'gigabyte',\n      'gram',\n      'hectare',\n      'hour',\n      'inch',\n      'kilobyte',\n      'kilogram',\n      'kilometer',\n      'kilometer-per-hour',\n      'liter',\n      'liter-per-meter',\n      'megabyte',\n      'meter',\n      'meter-per-second',\n      'mile',\n      'millimeter',\n      'millisecond',\n      'minute',\n      'month',\n      'percent',\n      'pound',\n      'second',\n      'terabyte',\n      'week',\n      'year',\n      'token'\n    ],\n    control: { type: 'select' }\n  },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const StepperDemo: Story<NumberInputStory> = (args: NumberInputStory) => {\n  const [value, setValue] = useState<string | undefined>(\n    args.value ? args.value.toString() : undefined\n  );\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value ? args.value.toString() : undefined);\n  }, [prev, args.value]);\n\n  return (\n    <NumberInput\n      {...args}\n      variant='stepper'\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        args.onBlur?.(inputValue);\n      }}\n      onFocus={inputValue => {\n        args.onFocus?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nStepperDemo.args = {\n  value: undefined,\n  numberOfDecimals: 20,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: '',\n  label: 'Stepper input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nStepperDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: { control: { type: 'text' } },\n\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface NumberDisplayStoryProps extends NumberDisplayProps {\n  fractionDigits: number;\n  groupSeparators: boolean;\n  notation: 'standard' | 'compact';\n}\n\nexport const NumberDisplayDemo: Story<NumberDisplayStoryProps> = (\n  args: NumberDisplayStoryProps\n) => {\n  return (\n    <NumberDisplay\n      value={args.value}\n      unit={args.unit}\n      formattingOptions={{\n        fractionDigits: args.fractionDigits,\n        groupSeparators: args.groupSeparators,\n        notation: args.notation\n      }}\n    />\n  );\n};\n\nNumberDisplayDemo.args = {\n  value: undefined,\n  unit: 'ml',\n  fractionDigits: undefined,\n  notation: undefined,\n  groupSeparators: true\n};\n\nNumberDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  unit: {\n    options: [\n      undefined,\n      'acre',\n      'byte',\n      'celsius',\n      'centimeter',\n      'day',\n      'degree',\n      'fahrenheit',\n      'foot',\n      'gigabyte',\n      'gram',\n      'hectare',\n      'hour',\n      'inch',\n      'kilobyte',\n      'kilogram',\n      'kilometer',\n      'kilometer-per-hour',\n      'liter',\n      'liter-per-meter',\n      'megabyte',\n      'meter',\n      'meter-per-second',\n      'mile',\n      'millimeter',\n      'millisecond',\n      'minute',\n      'month',\n      'percent',\n      'pound',\n      'second',\n      'terabyte',\n      'week',\n      'year',\n      'token'\n    ],\n    control: { type: 'select' }\n  },\n  fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },\n  groupSeparators: { control: { type: 'boolean' } },\n  notation: {\n    control: { type: 'inline-radio' },\n    options: ['standard', 'compact']\n  }\n};\n"]}
+{"version":3,"file":"Number.stories.js","sourceRoot":"","sources":["../../../src/core/Number/Number.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n  NumberDisplay,\n  NumberDisplayProps,\n  NumberInput,\n  NumberInputProps,\n  OmitStrict,\n  usePrevious\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Number',\n  component: NumberInput\n} as Meta;\n\nexport type NumberInputStory = OmitStrict<NumberInputProps, 'value' | 'onChange'> & {\n  value?: number | string;\n  onChange?: (value: string) => void;\n};\n\nexport const NumberInputDemo: Story<NumberInputStory> = (args: NumberInputStory) => {\n  const [value, setValue] = useState<string | undefined>(\n    args.value ? args.value.toString() : undefined\n  );\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value ? args.value.toString() : undefined);\n  }, [prev, args.value]);\n\n  return (\n    <NumberInput\n      {...args}\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        args.onBlur?.(inputValue);\n      }}\n      onFocus={inputValue => {\n        args.onFocus?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nNumberInputDemo.args = {\n  value: undefined,\n  numberOfDecimals: 20,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: undefined,\n  label: 'Number input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nNumberInputDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: {\n    options: [\n      undefined,\n      'acre',\n      'byte',\n      'celsius',\n      'centimeter',\n      'day',\n      'degree',\n      'fahrenheit',\n      'foot',\n      'gigabyte',\n      'gram',\n      'hectare',\n      'hour',\n      'inch',\n      'kilobyte',\n      'kilogram',\n      'kilometer',\n      'kilometer-per-hour',\n      'liter',\n      'liter-per-meter',\n      'megabyte',\n      'meter',\n      'meter-per-second',\n      'mile',\n      'millimeter',\n      'millisecond',\n      'minute',\n      'month',\n      'percent',\n      'pound',\n      'second',\n      'terabyte',\n      'week',\n      'year',\n      'token'\n    ],\n    control: { type: 'select' }\n  },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const StepperDemo: Story<NumberInputStory> = (args: NumberInputStory) => {\n  const [value, setValue] = useState<string | undefined>(\n    args.value ? args.value.toString() : undefined\n  );\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value ? args.value.toString() : undefined);\n  }, [prev, args.value]);\n\n  return (\n    <NumberInput\n      {...args}\n      variant='stepper'\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        args.onBlur?.(inputValue);\n      }}\n      onFocus={inputValue => {\n        args.onFocus?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nStepperDemo.args = {\n  value: undefined,\n  numberOfDecimals: 20,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: undefined,\n  label: 'Stepper input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nStepperDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: { control: { type: 'text' } },\n\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface NumberDisplayStoryProps extends NumberDisplayProps {\n  fractionDigits: number;\n  groupSeparators: boolean;\n  notation: 'standard' | 'compact';\n}\n\nexport const NumberDisplayDemo: Story<NumberDisplayStoryProps> = (\n  args: NumberDisplayStoryProps\n) => {\n  return (\n    <NumberDisplay\n      value={args.value}\n      unit={args.unit}\n      formattingOptions={{\n        fractionDigits: args.fractionDigits,\n        groupSeparators: args.groupSeparators,\n        notation: args.notation\n      }}\n    />\n  );\n};\n\nNumberDisplayDemo.args = {\n  value: undefined,\n  unit: undefined,\n  fractionDigits: undefined,\n  notation: undefined,\n  groupSeparators: true\n};\n\nNumberDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  unit: {\n    options: [\n      undefined,\n      'acre',\n      'byte',\n      'celsius',\n      'centimeter',\n      'day',\n      'degree',\n      'fahrenheit',\n      'foot',\n      'gigabyte',\n      'gram',\n      'hectare',\n      'hour',\n      'inch',\n      'kilobyte',\n      'kilogram',\n      'kilometer',\n      'kilometer-per-hour',\n      'liter',\n      'liter-per-meter',\n      'megabyte',\n      'meter',\n      'meter-per-second',\n      'mile',\n      'millimeter',\n      'millisecond',\n      'minute',\n      'month',\n      'percent',\n      'pound',\n      'second',\n      'terabyte',\n      'week',\n      'year',\n      'token'\n    ],\n    control: { type: 'select' }\n  },\n  fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },\n  groupSeparators: { control: { type: 'boolean' } },\n  notation: {\n    control: { type: 'inline-radio' },\n    options: ['standard', 'compact']\n  }\n};\n"]}

package/lib/cs/ArticleList/ArticleList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleList.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAyB/C,wBAOU;AAIV,eAAO,MAAM,gBAAgB,EAAE,KA2J9B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KASrC,CAAC"}
+{"version":3,"file":"ArticleList.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAyB/C,wBAOU;AAIV,eAAO,MAAM,gBAAgB,EAAE,KAwJ9B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KASrC,CAAC"}

package/lib/cs/ArticleList/ArticleList.stories.js

@@ -36,7 +36,7 @@ export const FirstArticleList = () => {
         headerText: 'Knowledge articles',
         count: 5,
         primary: {
-            search: (_jsx(SearchInput, { value: query, onChange: (event) => setQuery(event.target.value), onSearchChange: action('Search query'), onSearchSubmit: action('Search submit'), placeholder: 'Search\u2026' })),
+            search: (_jsx(SearchInput, { value: query, onSearchChange: setQuery, onSearchSubmit: action('Search submit'), placeholder: 'Search\u2026' })),
             actions: [
                 { text: 'Option Number 1', id: '1a' },
                 { text: 'Option Number 2', id: '2a' }

package/lib/cs/ArticleList/ArticleList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleList.stories.js","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent, SetStateAction } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  ComboBox,\n  Flex,\n  FormField,\n  Icon,\n  Link,\n  MenuButton,\n  Pagination,\n  SearchInput,\n  Select,\n  Option,\n  Text,\n  menuHelpers,\n  MenuProps,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as helpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/help.icon';\nimport { ArticleList, ArticleSummary, ArticleListHeader } from '@pega/cosmos-react-cs';\n\nimport { ArticleListMockData } from './ArticleList.mocks';\n\nexport default {\n  title: 'Customer Service/ArticleList',\n  component: ArticleList,\n  subcomponents: { ArticleSummary, ArticleListHeader },\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nregisterIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, helpIcon);\n\nexport const FirstArticleList: Story = () => {\n  const [query, setQuery] = useState('');\n  const [currentPage, setCurrentPage] = useState(1);\n  const [categoryFilter, setCategoryFilter] = useState<{ id: string; text: string } | undefined>(\n    undefined\n  );\n  const [categoriesList, setCategoriesList] = useState<MenuProps['items']>(\n    ArticleListMockData.categoriesList.map(({ id, name, level, category }) => {\n      return {\n        id,\n        primary: name,\n        secondary: [level, category],\n        selected: false\n      };\n    })\n  );\n\n  const handleArticleLinkClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  const ALHeader = {\n    icon: <Icon name='help' />,\n    headerText: 'Knowledge articles',\n    count: 5,\n    primary: {\n      search: (\n        <SearchInput\n          value={query}\n          onChange={(event: { target: { value: SetStateAction<string> } }) =>\n            setQuery(event.target.value)\n          }\n          onSearchChange={action('Search query')}\n          onSearchSubmit={action('Search submit')}\n          placeholder='Search…'\n        />\n      ),\n      actions: [\n        { text: 'Option Number 1', id: '1a' },\n        { text: 'Option Number 2', id: '2a' }\n      ],\n      followedFilter: (\n        <Flex container={{ gap: 1 }}>\n          <MenuButton\n            variant='simple'\n            menu={{\n              items: [\n                {\n                  primary: 'Filter 1',\n                  id: 'f1a'\n                },\n                {\n                  primary: 'Filter 2',\n                  id: 'f2a'\n                }\n              ]\n            }}\n            icon='filter'\n            text='filter'\n            iconOnly\n          />\n        </Flex>\n      )\n    },\n    secondary: (\n      <>\n        <FormField label='Category'>\n          <ComboBox\n            selected={{ items: categoryFilter }}\n            placeholder='Filter by category'\n            menu={{\n              items: categoriesList,\n              onItemClick: id => {\n                const newList = menuHelpers.selectItem(categoriesList, id, 'single-select');\n                const { primary: itemText } = menuHelpers.getSelected(newList)[0];\n                setCategoriesList(newList);\n                setCategoryFilter({ text: itemText, id });\n              }\n            }}\n          />\n        </FormField>\n        <Select label='Sort by'>\n          {ArticleListMockData.sortByOptions.map(opt => (\n            <Option key={opt}>{opt}</Option>\n          ))}\n        </Select>\n      </>\n    )\n  };\n  return (\n    <div\n      style={{\n        width: '31.25rem',\n        maxHeight: '100vh'\n      }}\n    >\n      <ArticleList\n        skeletonize={false}\n        header={\n          <ArticleListHeader\n            icon={ALHeader.icon}\n            count={ALHeader.count}\n            headerText={ALHeader.headerText}\n            primary={ALHeader.primary}\n            secondary={ALHeader.secondary}\n            onSubmit={action('Filter details submitted')}\n          />\n        }\n        footer={\n          <Flex container={{ alignItems: 'center', justify: 'end' }} item={{ grow: 1 }}>\n            <Pagination\n              total={70}\n              pageNumber={currentPage}\n              onPageChange={pageNumber => {\n                setCurrentPage(pageNumber);\n              }}\n            />\n          </Flex>\n        }\n      >\n        {ArticleListMockData.articleList.map((dataItem, id) => {\n          return (\n            <ArticleSummary\n              key={id.toString()}\n              header={\n                <Link\n                  href='design.pega.com'\n                  data-article-id={dataItem.articleId}\n                  onClick={handleArticleLinkClick}\n                >\n                  {dataItem.header}\n                </Link>\n              }\n              content={<Text>{dataItem.abstract}</Text>}\n              articleID={`article-${id}`}\n              meta={[\n                <Text>{dataItem.meta.category}</Text>,\n                dataItem.meta.publishedDate,\n                <Flex container={{ gap: 2, alignItems: 'center' }}>\n                  <Flex container={{ gap: 1, alignItems: 'center' }}>\n                    <Icon name='thumbs-up-solid' />\n                    <Text>({dataItem.meta.likes})</Text>\n                  </Flex>\n                  <Flex container={{ gap: 1, alignItems: 'center' }}>\n                    <Icon name='thumbs-down-solid' />\n                    <Text>({dataItem.meta.disLikes})</Text>\n                  </Flex>\n                </Flex>\n              ]}\n            />\n          );\n        })}\n      </ArticleList>\n    </div>\n  );\n};\n\nexport const ArticleListWithSkeleton: Story = () => (\n  <div\n    style={{\n      maxWidth: '31.25rem',\n      maxHeight: '100vh'\n    }}\n  >\n    <ArticleList skeletonize />\n  </div>\n);\n"]}
+{"version":3,"file":"ArticleList.stories.js","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  ComboBox,\n  Flex,\n  FormField,\n  Icon,\n  Link,\n  MenuButton,\n  Pagination,\n  SearchInput,\n  Select,\n  Option,\n  Text,\n  menuHelpers,\n  MenuProps,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as helpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/help.icon';\nimport { ArticleList, ArticleSummary, ArticleListHeader } from '@pega/cosmos-react-cs';\n\nimport { ArticleListMockData } from './ArticleList.mocks';\n\nexport default {\n  title: 'Customer Service/ArticleList',\n  component: ArticleList,\n  subcomponents: { ArticleSummary, ArticleListHeader },\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nregisterIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, helpIcon);\n\nexport const FirstArticleList: Story = () => {\n  const [query, setQuery] = useState('');\n  const [currentPage, setCurrentPage] = useState(1);\n  const [categoryFilter, setCategoryFilter] = useState<{ id: string; text: string } | undefined>(\n    undefined\n  );\n  const [categoriesList, setCategoriesList] = useState<MenuProps['items']>(\n    ArticleListMockData.categoriesList.map(({ id, name, level, category }) => {\n      return {\n        id,\n        primary: name,\n        secondary: [level, category],\n        selected: false\n      };\n    })\n  );\n\n  const handleArticleLinkClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  const ALHeader = {\n    icon: <Icon name='help' />,\n    headerText: 'Knowledge articles',\n    count: 5,\n    primary: {\n      search: (\n        <SearchInput\n          value={query}\n          onSearchChange={setQuery}\n          onSearchSubmit={action('Search submit')}\n          placeholder='Search…'\n        />\n      ),\n      actions: [\n        { text: 'Option Number 1', id: '1a' },\n        { text: 'Option Number 2', id: '2a' }\n      ],\n      followedFilter: (\n        <Flex container={{ gap: 1 }}>\n          <MenuButton\n            variant='simple'\n            menu={{\n              items: [\n                {\n                  primary: 'Filter 1',\n                  id: 'f1a'\n                },\n                {\n                  primary: 'Filter 2',\n                  id: 'f2a'\n                }\n              ]\n            }}\n            icon='filter'\n            text='filter'\n            iconOnly\n          />\n        </Flex>\n      )\n    },\n    secondary: (\n      <>\n        <FormField label='Category'>\n          <ComboBox\n            selected={{ items: categoryFilter }}\n            placeholder='Filter by category'\n            menu={{\n              items: categoriesList,\n              onItemClick: id => {\n                const newList = menuHelpers.selectItem(categoriesList, id, 'single-select');\n                const { primary: itemText } = menuHelpers.getSelected(newList)[0];\n                setCategoriesList(newList);\n                setCategoryFilter({ text: itemText, id });\n              }\n            }}\n          />\n        </FormField>\n        <Select label='Sort by'>\n          {ArticleListMockData.sortByOptions.map(opt => (\n            <Option key={opt}>{opt}</Option>\n          ))}\n        </Select>\n      </>\n    )\n  };\n  return (\n    <div\n      style={{\n        width: '31.25rem',\n        maxHeight: '100vh'\n      }}\n    >\n      <ArticleList\n        skeletonize={false}\n        header={\n          <ArticleListHeader\n            icon={ALHeader.icon}\n            count={ALHeader.count}\n            headerText={ALHeader.headerText}\n            primary={ALHeader.primary}\n            secondary={ALHeader.secondary}\n            onSubmit={action('Filter details submitted')}\n          />\n        }\n        footer={\n          <Flex container={{ alignItems: 'center', justify: 'end' }} item={{ grow: 1 }}>\n            <Pagination\n              total={70}\n              pageNumber={currentPage}\n              onPageChange={pageNumber => {\n                setCurrentPage(pageNumber);\n              }}\n            />\n          </Flex>\n        }\n      >\n        {ArticleListMockData.articleList.map((dataItem, id) => {\n          return (\n            <ArticleSummary\n              key={id.toString()}\n              header={\n                <Link\n                  href='design.pega.com'\n                  data-article-id={dataItem.articleId}\n                  onClick={handleArticleLinkClick}\n                >\n                  {dataItem.header}\n                </Link>\n              }\n              content={<Text>{dataItem.abstract}</Text>}\n              articleID={`article-${id}`}\n              meta={[\n                <Text>{dataItem.meta.category}</Text>,\n                dataItem.meta.publishedDate,\n                <Flex container={{ gap: 2, alignItems: 'center' }}>\n                  <Flex container={{ gap: 1, alignItems: 'center' }}>\n                    <Icon name='thumbs-up-solid' />\n                    <Text>({dataItem.meta.likes})</Text>\n                  </Flex>\n                  <Flex container={{ gap: 1, alignItems: 'center' }}>\n                    <Icon name='thumbs-down-solid' />\n                    <Text>({dataItem.meta.disLikes})</Text>\n                  </Flex>\n                </Flex>\n              ]}\n            />\n          );\n        })}\n      </ArticleList>\n    </div>\n  );\n};\n\nexport const ArticleListWithSkeleton: Story = () => (\n  <div\n    style={{\n      maxWidth: '31.25rem',\n      maxHeight: '100vh'\n    }}\n  >\n    <ArticleList skeletonize />\n  </div>\n);\n"]}

package/lib/rte/RichTextEditor/RichTextViewer.stories.js

@@ -69,7 +69,7 @@ export const RichTextViewerMDDemo = () => {
                         markdown: `@${item.id}:${item.primary}:user:`,
                         text: item.primary
                     };
-                }, menu: users.length ? { items: users } : undefined, markdownOnly: true, defaultValue: '# Try writing some of your own markdown and see how it renders!\n\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\n\nThere is built in support for #tags: as well!\n\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)', onChange: () => setContent(editorRef.current?.getPlainText() || '') }), _jsx(RichTextViewer, { content: content, type: 'markdown', interactionRenderers: [MentionButtonConfig, HashtagButtonConfig], markdownMap: {
+                }, menu: users.length ? { items: users } : undefined, markdownOnly: true, defaultValue: '# Try writing some of your own markdown and see how it renders!\n\nYou can interact with mentions such as @[deans]:[Seth DeAngelo]:[user]:\n\nThere is built in support for #tags: as well!\n\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)', onChange: () => setContent(editorRef.current?.getPlainText() || '') }), _jsx(RichTextViewer, { content: content, type: 'markdown', interactionRenderers: [MentionButtonConfig, HashtagButtonConfig], markdownMap: {
                     link: (linkToken) => {
                         if (linkToken.href?.includes('www.pega.com'))
                             return LinkComponent;

package/lib/rte/RichTextEditor/RichTextViewer.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextViewer.stories.js","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Flex, Link, MenuItemProps } from '@pega/cosmos-react-core';\nimport { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';\nimport {\n  RichTextViewer,\n  Editor as RichTextEditor,\n  EditorState as RichTextEditorState,\n  TokenMap\n} from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n  title: 'RTE/RichTextViewer',\n  component: RichTextViewer\n} as Meta;\n\nexport const RichTextViewerDemo: Story = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('[]');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getRichText() || '')}\n      />\n\n      <RichTextViewer content={content} type='richtext' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerHTMLDemo: Story = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getHtml() || '')}\n      />\n\n      <RichTextViewer content={content} type='html' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerHTMLOverflowDemo: Story = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState(\n    () => \"<p style='background-color: green; width: 110%; height: 100px;'>hi</p>\"\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        defaultValue={content}\n        onChange={() => setContent(editorRef.current?.getHtml() || '')}\n      />\n\n      <RichTextViewer content={content} type='html' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerMDDemo: Story = () => {\n  const LinkComponent = ({ token }: { token: TokenMap['link'] }) => {\n    return (\n      <Link href={token.href} previewable>\n        {token.text}\n      </Link>\n    );\n  };\n\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n  const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n  const searchUsers = (event: { search: string; trigger: string }) => {\n    if (event.trigger === '@') {\n      setUsers(\n        demoUsers.filter(user => {\n          return user.primary.toLowerCase().includes(event.search.toLowerCase());\n        })\n      );\n    }\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        searchTriggers={[{ trigger: '@', regex: '[a-zA-Z]*(?: [a-zA-Z]*)?' }]}\n        onSearch={searchUsers}\n        getSearchItemReplacement={(id: string) => {\n          const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n          if (!item) return undefined;\n\n          return {\n            markdown: `@${item.id}:${item.primary}:user:`,\n            text: item.primary\n          };\n        }}\n        menu={users.length ? { items: users } : undefined}\n        markdownOnly\n        defaultValue={\n          '# Try writing some of your own markdown and see how it renders!\\n\\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\\n\\nThere is built in support for #tags: as well!\\n\\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)'\n        }\n        onChange={() => setContent(editorRef.current?.getPlainText() || '')}\n      />\n\n      <RichTextViewer\n        content={content}\n        type='markdown'\n        interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n        markdownMap={{\n          link: (linkToken: TokenMap['link']) => {\n            if (linkToken.href?.includes('www.pega.com')) return LinkComponent;\n          }\n        }}\n      />\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"RichTextViewer.stories.js","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Flex, Link, MenuItemProps } from '@pega/cosmos-react-core';\nimport { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';\nimport {\n  RichTextViewer,\n  Editor as RichTextEditor,\n  EditorState as RichTextEditorState,\n  TokenMap\n} from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n  title: 'RTE/RichTextViewer',\n  component: RichTextViewer\n} as Meta;\n\nexport const RichTextViewerDemo: Story = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('[]');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getRichText() || '')}\n      />\n\n      <RichTextViewer content={content} type='richtext' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerHTMLDemo: Story = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getHtml() || '')}\n      />\n\n      <RichTextViewer content={content} type='html' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerHTMLOverflowDemo: Story = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState(\n    () => \"<p style='background-color: green; width: 110%; height: 100px;'>hi</p>\"\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        defaultValue={content}\n        onChange={() => setContent(editorRef.current?.getHtml() || '')}\n      />\n\n      <RichTextViewer content={content} type='html' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerMDDemo: Story = () => {\n  const LinkComponent = ({ token }: { token: TokenMap['link'] }) => {\n    return (\n      <Link href={token.href} previewable>\n        {token.text}\n      </Link>\n    );\n  };\n\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n  const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n  const searchUsers = (event: { search: string; trigger: string }) => {\n    if (event.trigger === '@') {\n      setUsers(\n        demoUsers.filter(user => {\n          return user.primary.toLowerCase().includes(event.search.toLowerCase());\n        })\n      );\n    }\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        searchTriggers={[{ trigger: '@', regex: '[a-zA-Z]*(?: [a-zA-Z]*)?' }]}\n        onSearch={searchUsers}\n        getSearchItemReplacement={(id: string) => {\n          const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n          if (!item) return undefined;\n\n          return {\n            markdown: `@${item.id}:${item.primary}:user:`,\n            text: item.primary\n          };\n        }}\n        menu={users.length ? { items: users } : undefined}\n        markdownOnly\n        defaultValue={\n          '# Try writing some of your own markdown and see how it renders!\\n\\nYou can interact with mentions such as @[deans]:[Seth DeAngelo]:[user]:\\n\\nThere is built in support for #tags: as well!\\n\\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)'\n        }\n        onChange={() => setContent(editorRef.current?.getPlainText() || '')}\n      />\n\n      <RichTextViewer\n        content={content}\n        type='markdown'\n        interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n        markdownMap={{\n          link: (linkToken: TokenMap['link']) => {\n            if (linkToken.href?.includes('www.pega.com')) return LinkComponent;\n          }\n        }}\n      />\n    </Flex>\n  );\n};\n"]}

package/lib/social/Email/Email.stories.d.ts

@@ -1,3 +1,4 @@
+import { MouseEvent } from 'react';
 import { Meta, Story } from '@storybook/react';
 import { EmailSummaryListProps } from '@pega/cosmos-react-social';
 declare const _default: Meta<import("@storybook/react").Args>;
@@ -8,6 +9,7 @@ interface EmailContentDemo {
 export declare const Email: Story<EmailContentDemo>;
 interface ViewAnalysisProps {
     enableContextMenu?: boolean;
+    onContextMenu?: (e: MouseEvent) => void;
 }
 export declare const ViewAnalysis: Story<ViewAnalysisProps>;
 interface EmailEntitiesDemoProps {
@@ -15,7 +17,7 @@ interface EmailEntitiesDemoProps {
     enableContextMenu?: boolean;
 }
 export declare const EmailEntities: Story<EmailEntitiesDemoProps>;
-export declare const emailConversation: Story;
+export declare const EmailConversationDemo: Story;
 export declare const EmailComposerDemo: Story;
 interface EmailDemoProps {
     autoCollapse?: boolean;

package/lib/social/Email/Email.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Email.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAuB/C,OAAO,EAaL,qBAAqB,EAEtB,MAAM,2BAA2B,CAAC;;AA4CnC,wBAGU;AAaV,UAAU,gBAAgB;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,gBAAgB,CA6CzC,CAAC;AA4BF,UAAU,iBAAiB;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAiEjD,CAAC;AAoBF,UAAU,sBAAsB;IAC9B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,sBAAsB,CAkHvD,CAAC;AAuBF,eAAO,MAAM,iBAAiB,EAAE,KA2C/B,CAAC;AAaF,eAAO,MAAM,iBAAiB,EAAE,KA+I/B,CAAC;AAYF,UAAU,cAAc;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CAwa3C,CAAC;AA+CF,eAAO,MAAM,oBAAoB,EAAE,KA+BlC,CAAC;AAYF,UAAU,0BAA0B;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IACjD,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,CA6FlE,CAAC;AA8BF,eAAO,MAAM,gBAAgB,EAAE,KA6G9B,CAAC"}
+{"version":3,"file":"Email.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnG,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAuB/C,OAAO,EAaL,qBAAqB,EAEtB,MAAM,2BAA2B,CAAC;;AA6CnC,wBAGU;AAaV,UAAU,gBAAgB;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,gBAAgB,CA6CzC,CAAC;AA4BF,UAAU,iBAAiB;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAgFjD,CAAC;AAoBF,UAAU,sBAAsB;IAC9B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,sBAAsB,CAiIvD,CAAC;AAuBF,eAAO,MAAM,qBAAqB,EAAE,KA2CnC,CAAC;AAaF,eAAO,MAAM,iBAAiB,EAAE,KA+I/B,CAAC;AAYF,UAAU,cAAc;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CAwa3C,CAAC;AA+CF,eAAO,MAAM,oBAAoB,EAAE,KA+BlC,CAAC;AAYF,UAAU,0BAA0B;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IACjD,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,CA6FlE,CAAC;AA8BF,eAAO,MAAM,gBAAgB,EAAE,KA6G9B,CAAC"}