npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.9.0 → 3.0.0-rc.2 - Mend

@pega/cosmos-react-demos 3.0.0-dev.9.0 → 3.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (987) hide show

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

@@ -11,6 +11,7 @@ interface ComboBoxStoryProps {
     required?: ComboBoxProps['required'];
     disabled?: ComboBoxProps['disabled'];
     readOnly?: ComboBoxProps['readOnly'];
+    showAdditionalInfo?: boolean;
 }
 export declare const FilterableSingleSelect: Story<ComboBoxStoryProps>;
 export declare const NonFilterableSingleSelect: Story<ComboBoxStoryProps>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,aAAa,EAId,MAAM,yBAAyB,CAAC;;AAIjC,~~wBAsBU~~;AAEV,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;~~CACtC~~;AASD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,kBAAkB,~~CAyE5D~~,CAAC;AAcF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,kBAAkB,~~CAwE~~/D,CAAC;AAeF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,kBAAkB,~~CAyD3D~~,CAAC;AAaF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,kBAAkB,~~CAyC9D~~,CAAC;AAgBF,eAAO,MAAM,qCAAqC,EAAE,KAAK,CAAC,kBAAkB,~~CA2D3E~~,CAAC;AAMF;;;;;;;;;GASG;AACH,eAAO,MAAM,iCAAiC,EAAE,KAAK,CAAC,kBAAkB,~~CA4HvE~~,CAAC"}
1	+ {"version":3,"file":"ComboBox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,aAAa,EAId,MAAM,yBAAyB,CAAC;;AAIjC,wBAwBU;AAEV,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AASD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,kBAAkB,CAiF5D,CAAC;AAcF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,kBAAkB,CAgF/D,CAAC;AAeF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,kBAAkB,CAiE3D,CAAC;AAaF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,kBAAkB,CAiD9D,CAAC;AAgBF,eAAO,MAAM,qCAAqC,EAAE,KAAK,CAAC,kBAAkB,CAmE3E,CAAC;AAMF;;;;;;;;;GASG;AACH,eAAO,MAAM,iCAAiC,EAAE,KAAK,CAAC,kBAAkB,CAoIvE,CAAC"}

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

@@ -12,7 +12,8 @@ export default {
         status: undefined,
         required: false,
         disabled: false,
-        readOnly: false
+        readOnly: false,
+        showAdditionalInfo: true
     },
     argTypes: {
         label: { control: { type: 'text' } },
@@ -22,7 +23,8 @@ export default {
         status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
         required: { control: { type: 'boolean' } },
         disabled: { control: { type: 'boolean' } },
-        readOnly: { control: { type: 'boolean' } }
+        readOnly: { control: { type: 'boolean' } },
+        showAdditionalInfo: { control: { type: 'boolean' } }
     }
 };
 /*
@@ -61,7 +63,12 @@ export const FilterableSingleSelect = (args) => {
             };
         }));
     };
-    return (_jsx(ComboBox, { label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, mode: 'single-select', selected: selected
+    return (_jsx(ComboBox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, mode: 'single-select', selected: selected
             ? {
                 items: {
                     id: selected.id,
@@ -123,7 +130,12 @@ export const NonFilterableSingleSelect = (args) => {
             }, 2000);
         }
     }, [items, isLoading]);
-    return (_jsx(ComboBox, { label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: selected
+    return (_jsx(ComboBox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: selected
             ? {
                 items: {
                     id: selected.id,
@@ -170,7 +182,12 @@ export const FilterableMultiSelect = (args) => {
     const toggleItem = (id) => {
         setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
     };
-    return (_jsx(ComboBox, { mode: 'multi-select', label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: {
+    return (_jsx(ComboBox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, mode: 'multi-select', label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: {
             items: selected,
             onRemove: toggleItem
         }, value: filterValue, onChange: (e) => {
@@ -208,7 +225,12 @@ export const NonFilterableMultiSelect = (args) => {
             selected: item.items ? undefined : !!item.selected
         }));
     }, [items]);
-    return (_jsx(ComboBox, { mode: 'multi-select', label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: {
+    return (_jsx(ComboBox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, mode: 'multi-select', label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: {
             items: selected,
             onRemove: toggleItem
         }, menu: {
@@ -250,7 +272,12 @@ export const FilterableMultiSelectSelectableParent = (args) => {
     const toggleItem = (id) => {
         setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
     };
-    return (_jsx(ComboBox, { mode: 'multi-select', label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: {
+    return (_jsx(ComboBox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, mode: 'multi-select', label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: {
             items: selected,
             onRemove: toggleItem
         }, value: filterValue, onChange: (e) => {
@@ -352,7 +379,12 @@ export const FilterableMultiSelectLazyChildren = (args) => {
         // having to refresh to view the lazy loading behavior again.
         setItems(cur => [{ ...cur[0], items: [] }]);
     }, []);
-    return (_jsx(ComboBox, { mode: 'multi-select', label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: {
+    return (_jsx(ComboBox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, mode: 'multi-select', label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, selected: {
             items: selected,
             onRemove: toggleItem
         }, value: filterValue, onChange: (e) => {

package/lib/core/ComboBox/ComboBox.stories.js.map CHANGED Viewed

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

package/lib/core/CompositeInput/CompositeInput.mocks.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare const FormRenderer: ({ firstName, onFirstNameChange, lastName, onLastNameChange }: {
+    firstName: string;
+    onFirstNameChange: Dispatch<SetStateAction<string>>;
+    lastName: string;
+    onLastNameChange: Dispatch<SetStateAction<string>>;
+}) => JSX.Element;
+//# sourceMappingURL=CompositeInput.mocks.d.ts.map

package/lib/core/CompositeInput/CompositeInput.mocks.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"CompositeInput.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI9D,eAAO,MAAM,YAAY;eAMZ,MAAM;uBACE,SAAS,eAAe,MAAM,CAAC,CAAC;cACzC,MAAM;sBACE,SAAS,eAAe,MAAM,CAAC,CAAC;iBAgBnD,CAAC"}

package/lib/core/CompositeInput/CompositeInput.mocks.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Input } from '@pega/cosmos-react-core';
+export const FormRenderer = ({ firstName, onFirstNameChange, lastName, onLastNameChange }) => {
+    return (_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Input, { label: 'First name', value: firstName, onChange: (e) => onFirstNameChange(e.target.value) }), _jsx(Input, { label: 'Last name', value: lastName, onChange: (e) => onLastNameChange(e.target.value) })] }));
+};
+//# sourceMappingURL=CompositeInput.mocks.js.map

package/lib/core/CompositeInput/CompositeInput.mocks.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CompositeInput.mocks.js","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.mocks.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACR,gBAAgB,EAMjB,EAAE,EAAE;IACH,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACzB,KAAC,KAAK,IACJ,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACjF,EACF,KAAC,KAAK,IACJ,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAChF,IACG,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { ChangeEvent, Dispatch, SetStateAction } from 'react';\n\nimport { Flex, Input } from '@pega/cosmos-react-core';\n\nexport const FormRenderer = ({\n firstName,\n onFirstNameChange,\n lastName,\n onLastNameChange\n}: {\n firstName: string;\n onFirstNameChange: Dispatch<SetStateAction<string>>;\n lastName: string;\n onLastNameChange: Dispatch<SetStateAction<string>>;\n}) => {\n return (\n <Flex container={{ gap: 1 }}>\n <Input\n label='First name'\n value={firstName}\n onChange={(e: ChangeEvent<HTMLInputElement>) => onFirstNameChange(e.target.value)}\n />\n <Input\n label='Last name'\n value={lastName}\n onChange={(e: ChangeEvent<HTMLInputElement>) => onLastNameChange(e.target.value)}\n />\n </Flex>\n );\n};\n"]}

package/lib/core/CompositeInput/CompositeInput.stories.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { Meta, Story } from '@storybook/react';
+import type { CompositeInputProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface CompositeStoryProps extends CompositeInputProps {
+    showAdditionalInfo?: boolean;
+}
+export declare const CompositeInputDemo: Story<CompositeStoryProps>;
+//# sourceMappingURL=CompositeInput.stories.d.ts.map

package/lib/core/CompositeInput/CompositeInput.stories.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CompositeInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAInE,wBAGU;AAEV,UAAU,mBAAoB,SAAQ,mBAAmB;IACvD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,CAoCzD,CAAC"}

package/lib/core/CompositeInput/CompositeInput.stories.js ADDED Viewed

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { CompositeInput } from '@pega/cosmos-react-core';
+import { FormRenderer } from './CompositeInput.mocks';
+export default {
+    title: 'Core/CompositeInput',
+    component: CompositeInput
+};
+export const CompositeInputDemo = (args) => {
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const [value, setValue] = useState('');
+    return (_jsx(CompositeInput, { ...args, value: value, additionalInfo: args.showAdditionalInfo
+            ? { heading: 'Additional Info', content: 'Please enter your full name.' }
+            : undefined, dialog: {
+            renderer: FormRenderer,
+            rendererProps: {
+                firstName,
+                onFirstNameChange: setFirstName,
+                lastName,
+                onLastNameChange: setLastName
+            },
+            onApply: ({ close }) => {
+                setValue([firstName, lastName].join(' '));
+                close();
+            },
+            onCancel: ({ close }) => {
+                const [first, last] = value.split(' ');
+                setFirstName(first);
+                setLastName(last);
+                close();
+            }
+        }, onClear: () => setValue('') }));
+};
+CompositeInputDemo.args = {
+    label: 'Full name',
+    labelHidden: false,
+    info: 'Put your full name',
+    status: undefined,
+    required: false,
+    disabled: false,
+    placeholder: '',
+    showAdditionalInfo: true
+};
+CompositeInputDemo.argTypes = {
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    placeholder: { control: { type: 'text' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=CompositeInput.stories.js.map

package/lib/core/CompositeInput/CompositeInput.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CompositeInput.stories.js","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;AAMV,MAAM,CAAC,MAAM,kBAAkB,GAA+B,CAAC,IAAyB,EAAE,EAAE;IAC1F,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,cAAc,OACT,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,cAAc,EACZ,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,8BAA8B,EAAE;YACzE,CAAC,CAAC,SAAS,EAEf,MAAM,EAAE;YACN,QAAQ,EAAE,YAAY;YACtB,aAAa,EAAE;gBACb,SAAS;gBACT,iBAAiB,EAAE,YAAY;gBAC/B,QAAQ;gBACR,gBAAgB,EAAE,WAAW;aAC9B;YACD,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;gBACrB,QAAQ,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC1C,KAAK,EAAE,CAAC;YACV,CAAC;YACD,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;gBACtB,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACvC,YAAY,CAAC,KAAK,CAAC,CAAC;gBACpB,WAAW,CAAC,IAAI,CAAC,CAAC;gBAClB,KAAK,EAAE,CAAC;YACV,CAAC;SACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,GAC3B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,WAAW;IAClB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,oBAAoB;IAC1B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,EAAE;IACf,kBAAkB,EAAE,IAAI;CACzB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACrD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { CompositeInput } from '@pega/cosmos-react-core';\nimport type { CompositeInputProps } from '@pega/cosmos-react-core';\n\nimport { FormRenderer } from './CompositeInput.mocks';\n\nexport default {\n title: 'Core/CompositeInput',\n component: CompositeInput\n} as Meta;\n\ninterface CompositeStoryProps extends CompositeInputProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const CompositeInputDemo: Story<CompositeStoryProps> = (args: CompositeStoryProps) => {\n const [firstName, setFirstName] = useState('');\n const [lastName, setLastName] = useState('');\n const [value, setValue] = useState('');\n\n return (\n <CompositeInput\n {...args}\n value={value}\n additionalInfo={\n args.showAdditionalInfo\n ? { heading: 'Additional Info', content: 'Please enter your full name.' }\n : undefined\n }\n dialog={{\n renderer: FormRenderer,\n rendererProps: {\n firstName,\n onFirstNameChange: setFirstName,\n lastName,\n onLastNameChange: setLastName\n },\n onApply: ({ close }) => {\n setValue([firstName, lastName].join(' '));\n close();\n },\n onCancel: ({ close }) => {\n const [first, last] = value.split(' ');\n setFirstName(first);\n setLastName(last);\n close();\n }\n }}\n onClear={() => setValue('')}\n />\n );\n};\n\nCompositeInputDemo.args = {\n label: 'Full name',\n labelHidden: false,\n info: 'Put your full name',\n status: undefined,\n required: false,\n disabled: false,\n placeholder: '',\n showAdditionalInfo: true\n};\n\nCompositeInputDemo.argTypes = {\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 placeholder: { control: { type: 'text' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/CreditCard/CreditCard.stories.d.ts CHANGED Viewed

@@ -7,5 +7,8 @@ interface CreditCardDemoProps {
     obfuscation?: ObfuscationMode;
 }
 export declare const CreditCardDisplayDemo: Story<CreditCardDemoProps>;
-export declare const CreditCardInputDemo: Story<CreditCardInputProps>;
+interface CreditCardStoryProps extends CreditCardInputProps {
+    showAdditionalInfo?: boolean;
+}
+export declare const CreditCardInputDemo: Story<CreditCardStoryProps>;
 //# sourceMappingURL=CreditCard.stories.d.ts.map

package/lib/core/CreditCard/CreditCard.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreditCard.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CreditCard/CreditCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;;AAGjC,wBAEU;AAEV,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,mBAAmB,CAE5D,CAAC;AAYF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,oBAAoB,~~CAS3D~~,CAAC"}
1	+ {"version":3,"file":"CreditCard.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CreditCard/CreditCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;;AAGjC,wBAEU;AAEV,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,mBAAmB,CAE5D,CAAC;AAYF,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,oBAAoB,CAuB3D,CAAC"}

package/lib/core/CreditCard/CreditCard.stories.js CHANGED Viewed

@@ -11,7 +11,7 @@ CreditCardDisplayDemo.args = {
     obfuscation: 'none'
 };
 CreditCardDisplayDemo.argTypes = {
-    value: { type: 'string' },
+    value: { control: { type: 'text' } },
     obfuscation: { control: { type: 'inline-radio' }, options: ['none', 'partial', 'full'] }
 };
 export const CreditCardInputDemo = (args) => {
@@ -21,7 +21,12 @@ export const CreditCardInputDemo = (args) => {
         if (prev !== args.value)
             setValue(args.value);
     }, [prev, args.value]);
-    return _jsx(CreditCardInput, { ...args, value: value, onChange: setValue });
+    return (_jsx(CreditCardInput, { ...args, value: value, onChange: setValue, additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Input your 15-16 digit credit card number'
+            }
+            : undefined }));
 };
 CreditCardInputDemo.args = {
     value: undefined,
@@ -31,7 +36,8 @@ CreditCardInputDemo.args = {
     status: undefined,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    showAdditionalInfo: true
 };
 CreditCardInputDemo.argTypes = {
     value: { control: { type: 'text' } },
@@ -41,6 +47,7 @@ CreditCardInputDemo.argTypes = {
     status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
     required: { control: { type: 'boolean' } },
     disabled: { control: { type: 'boolean' } },
-    readOnly: { control: { type: 'boolean' } }
+    readOnly: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=CreditCard.stories.js.map

package/lib/core/CreditCard/CreditCard.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreditCard.stories.js","sourceRoot":"","sources":["../../../src/core/CreditCard/CreditCard.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAM7E,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAEhE,eAAe;IACb,KAAK,EAAE,iBAAiB;CACjB,CAAC;AAOV,MAAM,CAAC,MAAM,qBAAqB,GAA+B,CAAC,IAAyB,EAAE,EAAE,CAAC,CAC9F,KAAC,iBAAiB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,iBAAiB,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,GAAI,CAC/F,CAAC;AAEF,qBAAqB,CAAC,IAAI,GAAG;IAC3B,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,MAAM;CACpB,CAAC;AAEF,qBAAqB,CAAC,QAAQ,GAAG;IAC/B,KAAK,EAAE,EAAE,IAAI,EAAE,~~QAAQ~~,EAAE;~~IACzB~~,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,EAAE;CACzF,CAAC;~~AAEF~~,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,KAAK,CAAC,CAAC;IAEnE,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK;YAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEvB,OAAO,KAAC,eAAe,~~OAAK~~,IAAI,~~EAAE~~,KAAK,EAAE,KAAK,~~EAAE~~,QAAQ,EAAE,QAAQ,~~GAAI~~,CAAC;~~AACzE~~,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,oBAAoB;IAC3B,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,+BAA+B;IACrC,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;~~CAChB~~,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;~~CAC3C~~,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { CreditCardDisplay, CreditCardInput } from '@pega/cosmos-react-core';\nimport type {\n ObfuscationMode,\n CreditCardDisplayProps,\n CreditCardInputProps\n} from '@pega/cosmos-react-core';\nimport { usePrevious } from '@pega/cosmos-react-core/lib/hooks';\n\nexport default {\n title: 'Core/CreditCard'\n} as Meta;\n\ninterface CreditCardDemoProps {\n value?: CreditCardDisplayProps['value'];\n obfuscation?: ObfuscationMode;\n}\n\nexport const CreditCardDisplayDemo: Story<CreditCardDemoProps> = (args: CreditCardDemoProps) => (\n <CreditCardDisplay value={args.value} formattingOptions={{ obfuscation: args.obfuscation }} />\n);\n\nCreditCardDisplayDemo.args = {\n value: undefined,\n obfuscation: 'none'\n};\n\nCreditCardDisplayDemo.argTypes = {\n value: { type: '~~string~~' },\n obfuscation: { control: { type: 'inline-radio' }, options: ['none', 'partial', 'full'] }\n};\n\nexport const CreditCardInputDemo: Story<~~CreditCardInputProps~~> = (args: ~~CreditCardInputProps~~) => {\n const [value, setValue] = useState<string \| undefined>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return <CreditCardInput {...args} value={value} onChange={setValue} ~~/>;\~~n};\n\nCreditCardInputDemo.args = {\n value: undefined,\n label: 'Credit card number',\n labelHidden: false,\n info: 'Enter your credit card number',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nCreditCardInputDemo.argTypes = {\n value: { control: { type: 'text' } },\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"]}
1	+ {"version":3,"file":"CreditCard.stories.js","sourceRoot":"","sources":["../../../src/core/CreditCard/CreditCard.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { CreditCardDisplay, CreditCardInput } from '@pega/cosmos-react-core';\nimport type {\n ObfuscationMode,\n CreditCardDisplayProps,\n CreditCardInputProps\n} from '@pega/cosmos-react-core';\nimport { usePrevious } from '@pega/cosmos-react-core/lib/hooks';\n\nexport default {\n title: 'Core/CreditCard'\n} as Meta;\n\ninterface CreditCardDemoProps {\n value?: CreditCardDisplayProps['value'];\n obfuscation?: ObfuscationMode;\n}\n\nexport const CreditCardDisplayDemo: Story<CreditCardDemoProps> = (args: CreditCardDemoProps) => (\n <CreditCardDisplay value={args.value} formattingOptions={{ obfuscation: args.obfuscation }} />\n);\n\nCreditCardDisplayDemo.args = {\n value: undefined,\n obfuscation: 'none'\n};\n\nCreditCardDisplayDemo.argTypes = {\n value: { control: { type: 'text' } },\n obfuscation: { control: { type: 'inline-radio' }, options: ['none', 'partial', 'full'] }\n};\n\ninterface CreditCardStoryProps extends CreditCardInputProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const CreditCardInputDemo: Story<CreditCardStoryProps> = (args: CreditCardStoryProps) => {\n const [value, setValue] = useState<string \| undefined>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <CreditCardInput\n {...args}\n value={value}\n onChange={setValue}\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Input your 15-16 digit credit card number'\n }\n : undefined\n }\n />\n );\n};\n\nCreditCardInputDemo.args = {\n value: undefined,\n label: 'Credit card number',\n labelHidden: false,\n info: 'Enter your credit card number',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: true\n};\n\nCreditCardInputDemo.argTypes = {\n value: { control: { type: 'text' } },\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 showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/Currency/Currency.stories.d.ts CHANGED Viewed

@@ -2,7 +2,12 @@ import { Meta, Story } from '@storybook/react';
 import { CurrencyDisplayProps, CurrencyInputProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const CurrencyInputDemo: Story<OmitStrict<CurrencyInputProps, 'onChange' | 'onBlur'>>;
+declare type CurrencyStoryProps = OmitStrict<CurrencyInputProps, 'value' | 'onChange'> & {
+    value?: number;
+    onChange?: (value: string) => void;
+    showAdditionalInfo?: boolean;
+};
+export declare const CurrencyInputDemo: Story<Partial<CurrencyStoryProps>>;
 interface CurrencyDisplayStoryProps extends CurrencyDisplayProps {
     groupSeparators: boolean;
     fractionDigits: number;

package/lib/core/Currency/Currency.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Currency.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,oBAAoB,EAEpB,kBAAkB,EAClB,UAAU,~~EACX~~,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,~~eAAO~~,~~MAAM~~,~~iBAAiB~~,EAAE,KAAK,CAAC,~~UAAU~~,CAAC,kBAAkB,EAAE,~~UAAU~~,~~GAAG~~,~~QAAQ~~,CAAC,~~CAwB1F~~,CAAC;~~AAmCF~~,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,EAAE,YAAY,GAAG,aAAa,CAAC;IACvC,QAAQ,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAgBhE,CAAC"}
1	+ {"version":3,"file":"Currency.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,oBAAoB,EAEpB,kBAAkB,EAClB,UAAU,EAEX,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,aAAK,kBAAkB,GAAG,UAAU,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAiDhE,CAAC;AAyCF,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,EAAE,YAAY,GAAG,aAAa,CAAC;IACvC,QAAQ,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAgBhE,CAAC"}

package/lib/core/Currency/Currency.stories.js CHANGED Viewed

@@ -1,18 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { CurrencyDisplay, CurrencyInput } from '@pega/cosmos-react-core';
+import { useEffect, useState } from 'react';
+import { CurrencyDisplay, CurrencyInput, usePrevious } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Currency',
     component: CurrencyInput
 };
 export const CurrencyInputDemo = (args) => {
-    const [value, setValue] = useState();
-    return (_jsx(CurrencyInput, { value: value, onChange: inputValue => setValue(inputValue), onBlur: inputValue => setValue(inputValue), currencyISOCode: args.currencyISOCode, alwaysShowISOCode: args.alwaysShowISOCode, showDecimal: args.showDecimal, showGroupSeparators: args.showGroupSeparators, step: args.step, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
+    const [value, setValue] = useState(args.value === undefined ? undefined : `${args.value}`);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value === undefined ? undefined : `${args.value}`);
+    }, [prev, args.value]);
+    return (_jsx(CurrencyInput, { ...args, value: value, onChange: inputValue => {
+            setValue(inputValue);
+            args.onChange?.(inputValue);
+        }, onBlur: inputValue => {
+            args.onBlur?.(inputValue);
+        }, onFocus: inputValue => {
+            args.onFocus?.(inputValue);
+        }, currencyISOCode: args.currencyISOCode, alwaysShowISOCode: args.alwaysShowISOCode, showDecimal: args.showDecimal, maximumFractionDigits: args.maximumFractionDigits, showGroupSeparators: args.showGroupSeparators, step: args.step, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Input a number that will represent a monetary value.'
+            }
+            : undefined }));
 };
 CurrencyInputDemo.args = {
+    value: undefined,
     currencyISOCode: 'USD',
     alwaysShowISOCode: false,
     showDecimal: true,
+    maximumFractionDigits: 0,
     showGroupSeparators: true,
     step: 1,
     label: 'Currency input',
@@ -21,15 +40,18 @@ CurrencyInputDemo.args = {
     status: undefined,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    showAdditionalInfo: true
 };
 CurrencyInputDemo.argTypes = {
+    value: { control: { type: 'number' } },
     currencyISOCode: {
-        options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
+        options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
         control: { type: 'select' }
     },
     alwaysShowISOCode: { control: { type: 'boolean' } },
     showDecimal: { control: { type: 'boolean' } },
+    maximumFractionDigits: { control: { type: 'number' } },
     showGroupSeparators: { control: { type: 'boolean' } },
     step: { control: { type: 'number' } },
     label: { control: { type: 'text' } },
@@ -38,7 +60,8 @@ CurrencyInputDemo.argTypes = {
     status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
     required: { control: { type: 'boolean' } },
     disabled: { control: { type: 'boolean' } },
-    readOnly: { control: { type: 'boolean' } }
+    readOnly: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 export const CurrencyDisplayDemo = (args) => {
     return (_jsx(CurrencyDisplay, { value: args.value, currencyISOCode: args.currencyISOCode, formattingOptions: {