@pega/cosmos-react-demos 2.0.0

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

@@ -0,0 +1,323 @@
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import { ComboBox, menuHelpers } from '@pega/cosmos-react-core';
+import { getFilterRegex, list, tree } from './ComboBox.mocks';
+export default {
+    title: 'Core/ComboBox',
+    component: ComboBox,
+    args: {
+        labelHidden: false,
+        info: 'Type in or click to expand the Popover',
+        placeholder: '',
+        status: undefined,
+        required: false,
+        disabled: false,
+        readOnly: false
+    },
+    argTypes: {
+        label: { control: { type: 'text' } },
+        labelHidden: { control: { type: 'boolean' } },
+        info: { control: { type: 'text' } },
+        placeholder: { control: { type: 'text' } },
+        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+        required: { control: { type: 'boolean' } },
+        disabled: { control: { type: 'boolean' } },
+        readOnly: { control: { type: 'boolean' } }
+    }
+};
+export const FilterableSingleSelect = (args) => {
+    const [items, setItems] = useState(tree);
+    const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
+    const [filterValue, setFilterValue] = useState('');
+    const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);
+    const itemsToRender = useMemo(() => {
+        const newItems = filterValue
+            ? menuHelpers.flatten(items).filter(({ primary }) => {
+                return filterRegex.test(primary);
+            })
+            : items;
+        return menuHelpers.mapTree(newItems, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    }, [filterValue, items]);
+    const selectItem = useCallback((id) => {
+        setFilterValue('');
+        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+    }, []);
+    const clearSelection = () => {
+        setItems(cur => menuHelpers.mapTree(cur, item => {
+            return {
+                ...item,
+                selected: false
+            };
+        }));
+    };
+    return (<ComboBox label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} mode='single-select' selected={selected
+            ? {
+                items: {
+                    id: selected.id,
+                    text: selected.primary
+                }
+            }
+            : undefined} value={filterValue} onChange={(e) => {
+            if (!e.target.value)
+                clearSelection();
+            setFilterValue(e.target.value);
+        }} onBlur={() => {
+            setFilterValue('');
+        }} menu={{
+            items: itemsToRender,
+            onItemClick: selectItem,
+            accent: filterRegex,
+            emptyText: 'No items'
+        }}/>);
+};
+FilterableSingleSelect.args = {
+    label: 'ComboBox Single Autocomplete'
+};
+export const NonFilterableSingleSelect = (args) => {
+    const pageSize = 10;
+    const [items, setItems] = useState(() => {
+        return menuHelpers.mapTree(tree.slice(0, pageSize), item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    });
+    const [isLoading, setIsLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
+    const selectItem = useCallback((id) => {
+        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+    }, []);
+    const loadMore = useCallback((expandedItemId) => {
+        if (!isLoading && !expandedItemId) {
+            setIsLoading(true);
+            setTimeout(() => {
+                setIsLoading(false);
+                setItems(prevItems => {
+                    const newItems = menuHelpers.mapTree(tree.slice(prevItems.length, prevItems.length + pageSize), item => ({
+                        ...item,
+                        selected: item.items ? undefined : !!item.selected
+                    }));
+                    if (newItems.length === 0)
+                        setHasMore(false);
+                    return menuHelpers.appendTo(prevItems, newItems, expandedItemId);
+                });
+            }, 2000);
+        }
+    }, [items, isLoading]);
+    return (<ComboBox label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} selected={selected
+            ? {
+                items: {
+                    id: selected.id,
+                    text: selected.primary
+                }
+            }
+            : undefined} menu={{
+            items,
+            onItemClick: selectItem,
+            loading: isLoading,
+            loadMore: hasMore ? loadMore : undefined
+        }}/>);
+};
+NonFilterableSingleSelect.args = {
+    label: 'ComboBox Single Select',
+    info: 'Click on dropdown button to expand the Popover',
+    placeholder: '-Choose option-'
+};
+export const FilterableMultiSelect = (args) => {
+    const [items, setItems] = useState(tree);
+    const [filterValue, setFilterValue] = useState('');
+    const selected = useMemo(() => {
+        return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));
+    }, [items]);
+    const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);
+    const itemsToRender = useMemo(() => {
+        const newItems = filterValue
+            ? menuHelpers.flatten(items).filter(({ primary }) => {
+                return filterRegex.test(primary);
+            })
+            : items;
+        return menuHelpers.mapTree(newItems, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    }, [filterValue, items]);
+    const toggleItem = (id) => {
+        setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
+    };
+    return (<ComboBox mode='multi-select' label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} selected={{
+            items: selected,
+            onRemove: toggleItem
+        }} value={filterValue} onChange={(e) => {
+            setFilterValue(e.target.value);
+        }} onBlur={() => {
+            setFilterValue('');
+        }} menu={{
+            items: itemsToRender,
+            onItemClick: toggleItem,
+            accent: filterRegex,
+            emptyText: 'No items'
+        }}/>);
+};
+FilterableMultiSelect.args = {
+    label: 'ComboBox Multi Autocomplete'
+};
+export const NonFilterableMultiSelect = (args) => {
+    const [items, setItems] = useState(menuHelpers.mapTree(list, item => ({ id: item.id, primary: item.primary })));
+    const selected = useMemo(() => {
+        return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));
+    }, [items]);
+    const toggleItem = (id) => {
+        setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
+    };
+    const itemsToRender = useMemo(() => {
+        return menuHelpers.mapTree(items, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    }, [items]);
+    return (<ComboBox mode='multi-select' label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} selected={{
+            items: selected,
+            onRemove: toggleItem
+        }} menu={{
+            items: itemsToRender,
+            onItemClick: toggleItem
+        }}/>);
+};
+NonFilterableMultiSelect.args = {
+    label: 'ComboBox Multi Select',
+    info: 'Click on dropdown button to expand the Popover',
+    placeholder: '-Choose options-'
+};
+export const FilterableMultiSelectSelectableParent = (args) => {
+    const [items, setItems] = useState(tree);
+    const [filterValue, setFilterValue] = useState('');
+    const selected = useMemo(() => {
+        return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));
+    }, [items]);
+    const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);
+    const itemsToRender = useMemo(() => {
+        const newItems = filterValue
+            ? menuHelpers.flatten(items).filter(({ primary }) => {
+                return filterRegex.test(primary);
+            })
+            : items;
+        return menuHelpers.mapTree(newItems, item => ({
+            ...item,
+            selected: !!item.selected
+        }));
+    }, [filterValue, items]);
+    const toggleItem = (id) => {
+        setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
+    };
+    return (<ComboBox mode='multi-select' label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} selected={{
+            items: selected,
+            onRemove: toggleItem
+        }} value={filterValue} onChange={(e) => {
+            setFilterValue(e.target.value);
+        }} onBlur={() => {
+            setFilterValue('');
+        }} menu={{
+            items: itemsToRender,
+            onItemClick: toggleItem,
+            accent: filterRegex,
+            emptyText: 'No items'
+        }}/>);
+};
+FilterableMultiSelectSelectableParent.args = {
+    label: 'ComboBox Multi Selectable Parent'
+};
+export const FilterableMultiSelectLazyChildren = (args) => {
+    const rootItemId = '01';
+    const lazyItems = useMemo(() => {
+        return [
+            { id: '01-1', primary: 'Paul McDonald', secondary: ['Leads', 'Engineer'] },
+            { id: '01-2', primary: 'Frank Walker', secondary: ['Leads', 'Engineer'] },
+            { id: '01-3', primary: 'Edward Green', secondary: ['Leads', 'Engineer'] },
+            { id: '01-4', primary: 'Shaun McMinneman', secondary: ['Leads', 'Engineer'] },
+            { id: '01-5', primary: 'Hank Fitzgerald', secondary: ['Leads', 'Engineer'] },
+            { id: '01-6', primary: 'Mindy Stark', secondary: ['Leads', 'Engineer'] },
+            { id: '01-7', primary: 'Shane Howard', secondary: ['Leads', 'Engineer'] },
+            { id: '01-8', primary: 'Raul Singh', secondary: ['Leads', 'Engineer'] }
+        ];
+    }, []);
+    const [items, setItems] = useState([
+        {
+            id: rootItemId,
+            primary: 'Group',
+            secondary: ['Leads', 'Engineer'],
+            items: []
+        }
+    ]);
+    const [loading, setLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(false);
+    const [filterValue, setFilterValue] = useState('');
+    const selected = useMemo(() => {
+        return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));
+    }, [items]);
+    const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);
+    const itemsToRender = useMemo(() => {
+        const newItems = filterValue
+            ? menuHelpers.flatten(items).filter(({ primary }) => {
+                return filterRegex.test(primary);
+            })
+            : items;
+        return menuHelpers.mapTree(newItems, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    }, [filterValue, items]);
+    const loadMore = useCallback(() => {
+        if (!loading) {
+            setLoading(true);
+            setTimeout(() => {
+                setLoading(false);
+                setItems(() => {
+                    const previousNestedLength = menuHelpers.getItem(items, rootItemId)?.items?.length || 0;
+                    const newItems = lazyItems.slice(previousNestedLength, previousNestedLength + 3);
+                    if (newItems.length === 0)
+                        setHasMore(false);
+                    return menuHelpers.appendTo(items, newItems, rootItemId);
+                });
+            }, 2000);
+        }
+    }, [items, loading]);
+    const toggleItem = (id) => {
+        setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
+    };
+    useEffect(() => {
+        if (hasMore) {
+            loadMore();
+        }
+    }, [hasMore]);
+    const onItemExpand = useCallback(() => {
+        setHasMore(true);
+    }, []);
+    const onItemCollapse = useCallback(() => {
+        setHasMore(false);
+        setLoading(false);
+        setItems(cur => [{ ...cur[0], items: [] }]);
+    }, []);
+    return (<ComboBox mode='multi-select' label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} selected={{
+            items: selected,
+            onRemove: toggleItem
+        }} value={filterValue} onChange={(e) => {
+            setFilterValue(e.target.value);
+        }} onBlur={() => {
+            setFilterValue('');
+        }} menu={{
+            items: itemsToRender,
+            onItemClick: toggleItem,
+            onItemExpand,
+            onItemCollapse,
+            loading,
+            loadMore: hasMore ? loadMore : undefined,
+            accent: filterRegex,
+            emptyText: 'No items'
+        }}/>);
+};
+FilterableMultiSelectLazyChildren.args = {
+    label: 'ComboBox Multi Lazy Children'
+};
+//# sourceMappingURL=ComboBox.stories.jsx.map

package/lib/core/ComboBox/ComboBox.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.stories.jsx","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"]}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const ThemedForm: Story<{
+    theme: 'default' | 'theme1';
+}>;
+export declare const ThemingHierarchy: () => JSX.Element;
+export declare const OverridableActionMenu: () => JSX.Element;
+//# sourceMappingURL=Configuration.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAa/C,wBAGU;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAA;CAAE,CA+B7D,CAAC;AA2CF,eAAO,MAAM,gBAAgB,mBAyE5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,mBAWjC,CAAC"}

package/lib/core/Configuration/Configuration.stories.jsx

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import { Button, Configuration, MenuButton, resetToInitial } from '@pega/cosmos-react-core';
+import { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.stories';
+export default {
+    title: 'Core/Configuration',
+    component: Configuration
+};
+export const ThemedForm = (args) => {
+    const themes = {
+        default: {},
+        theme1: {
+            base: {
+                palette: {
+                    interactive: '#AC75F0'
+                }
+            },
+            components: {
+                button: {
+                    'border-radius': 1
+                },
+                'form-control': {
+                    'background-color': '#80008033',
+                    'border-color': 'purple'
+                },
+                input: {
+                    height: '50px'
+                }
+            }
+        }
+    };
+    return (<Configuration theme={themes[args.theme]}>
+      <FormContent cols={1} showActions={false}/>
+    </Configuration>);
+};
+ThemedForm.args = {
+    theme: 'default'
+};
+ThemedForm.argTypes = {
+    theme: { options: ['default', 'theme1'], control: { type: 'select' } }
+};
+const buttonStyles = {
+    width: '100%'
+};
+const StyledFieldset = styled.fieldset `
+  padding: 1rem 5%;
+  margin: 1rem 0;
+`;
+const BoldSpan = styled.span `
+  font-weight: bold;
+`;
+const FlipFlop = ({ flipFlop, first, second }) => {
+    return flipFlop ? (<>
+      <BoldSpan>{first}</BoldSpan>&nbsp;→ {second}
+    </>) : (<>
+      {first} ←&nbsp;<BoldSpan>{second}</BoldSpan>
+    </>);
+};
+export const ThemingHierarchy = () => {
+    const [redOrOrange, setRedOrOrange] = useState(true);
+    const [greenOrPurple, setGreenOrPurple] = useState(true);
+    return (<StyledFieldset style={{ margin: 0, textAlign: 'center' }}>
+      <legend>Initial Theme</legend>
+      <Button style={buttonStyles} variant='primary'>
+        Base interactive
+      </Button>
+      <StyledFieldset>
+        <legend>Override Interactive to</legend>
+        <Configuration theme={{
+            base: {
+                palette: {
+                    interactive: redOrOrange ? 'red' : 'darkorange'
+                }
+            }
+        }}>
+          <Button style={buttonStyles} variant='primary' onClick={() => setRedOrOrange(val => !val)}>
+            <FlipFlop flipFlop={redOrOrange} first='Red' second='Orange'/>
+          </Button>
+          <StyledFieldset>
+            <legend>Override Button Primary BG to</legend>
+            <Configuration theme={{
+            components: {
+                button: { color: greenOrPurple ? 'green' : 'purple' }
+            }
+        }}>
+              <Button style={buttonStyles} variant='primary' onClick={() => setGreenOrPurple(val => !val)}>
+                <FlipFlop flipFlop={greenOrPurple} first='Green' second='Purple'/>
+              </Button>
+              <Button style={{ ...buttonStyles, marginTop: '1rem' }} variant='secondary'>
+                Secondary still inherits interactive
+              </Button>
+              <StyledFieldset>
+                <legend>Reset Button BG</legend>
+                <Configuration theme={{
+            components: { button: { color: resetToInitial } }
+        }}>
+                  <Button style={buttonStyles} variant='primary'>
+                    Inherited from interactive
+                  </Button>
+                  <StyledFieldset>
+                    <legend>Reset Interactive</legend>
+                    <Configuration theme={{ base: { palette: { interactive: resetToInitial } } }}>
+                      <Button style={buttonStyles} variant='primary'>
+                        Inherited from base
+                      </Button>
+                    </Configuration>
+                  </StyledFieldset>
+                </Configuration>
+              </StyledFieldset>
+            </Configuration>
+          </StyledFieldset>
+        </Configuration>
+      </StyledFieldset>
+    </StyledFieldset>);
+};
+export const OverridableActionMenu = () => {
+    const sharedActions = [{ id: '1', primary: 'Action 1', onClick: () => { } }];
+    return (<>
+      <MenuButton text='Cosmos MenuButton' menu={{ items: sharedActions }}/>
+      <Configuration overrideMap={{}}>
+        <MenuButton text='Mock PIMC MenuButton' menu={{ items: sharedActions }}/>
+      </Configuration>
+    </>);
+};
+//# sourceMappingURL=Configuration.stories.jsx.map

package/lib/core/Configuration/Configuration.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.stories.jsx","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Configuration,\n  MenuButton,\n  resetToInitial,\n  DefaultSettableTheme\n} from '@pega/cosmos-react-core';\nimport { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.stories';\n\nexport default {\n  title: 'Core/Configuration',\n  component: Configuration\n} as Meta;\n\nexport const ThemedForm: Story<{ theme: 'default' | 'theme1' }> = (args: {\n  theme: 'default' | 'theme1';\n}) => {\n  const themes: Record<string, DefaultSettableTheme> = {\n    default: {},\n    theme1: {\n      base: {\n        palette: {\n          interactive: '#AC75F0'\n        }\n      },\n      components: {\n        button: {\n          'border-radius': 1\n        },\n        'form-control': {\n          'background-color': '#80008033',\n          'border-color': 'purple'\n        },\n        input: {\n          height: '50px'\n        }\n      }\n    }\n  };\n\n  return (\n    <Configuration theme={themes[args.theme]}>\n      <FormContent cols={1} showActions={false} />\n    </Configuration>\n  );\n};\n\nThemedForm.args = {\n  theme: 'default'\n};\n\nThemedForm.argTypes = {\n  theme: { options: ['default', 'theme1'], control: { type: 'select' } }\n};\n\nconst buttonStyles = {\n  width: '100%'\n};\n\nconst StyledFieldset = styled.fieldset`\n  padding: 1rem 5%;\n  margin: 1rem 0;\n`;\n\nconst BoldSpan = styled.span`\n  font-weight: bold;\n`;\n\nconst FlipFlop = ({\n  flipFlop,\n  first,\n  second\n}: {\n  flipFlop: boolean;\n  first: string;\n  second: string;\n}) => {\n  return flipFlop ? (\n    <>\n      <BoldSpan>{first}</BoldSpan>&nbsp;→ {second}\n    </>\n  ) : (\n    <>\n      {first} ←&nbsp;<BoldSpan>{second}</BoldSpan>\n    </>\n  );\n};\n\nexport const ThemingHierarchy = () => {\n  const [redOrOrange, setRedOrOrange] = useState(true);\n  const [greenOrPurple, setGreenOrPurple] = useState(true);\n\n  return (\n    <StyledFieldset style={{ margin: 0, textAlign: 'center' }}>\n      <legend>Initial Theme</legend>\n      <Button style={buttonStyles} variant='primary'>\n        Base interactive\n      </Button>\n      <StyledFieldset>\n        <legend>Override Interactive to</legend>\n        <Configuration\n          theme={{\n            base: {\n              palette: {\n                interactive: redOrOrange ? 'red' : 'darkorange'\n              }\n            }\n          }}\n        >\n          <Button\n            style={buttonStyles}\n            variant='primary'\n            onClick={() => setRedOrOrange(val => !val)}\n          >\n            <FlipFlop flipFlop={redOrOrange} first='Red' second='Orange' />\n          </Button>\n          <StyledFieldset>\n            <legend>Override Button Primary BG to</legend>\n            <Configuration\n              theme={{\n                components: {\n                  button: { color: greenOrPurple ? 'green' : 'purple' }\n                }\n              }}\n            >\n              <Button\n                style={buttonStyles}\n                variant='primary'\n                onClick={() => setGreenOrPurple(val => !val)}\n              >\n                <FlipFlop flipFlop={greenOrPurple} first='Green' second='Purple' />\n              </Button>\n              <Button style={{ ...buttonStyles, marginTop: '1rem' }} variant='secondary'>\n                Secondary still inherits interactive\n              </Button>\n              <StyledFieldset>\n                <legend>Reset Button BG</legend>\n                <Configuration\n                  theme={{\n                    components: { button: { color: resetToInitial } }\n                  }}\n                >\n                  <Button style={buttonStyles} variant='primary'>\n                    Inherited from interactive\n                  </Button>\n                  <StyledFieldset>\n                    <legend>Reset Interactive</legend>\n                    <Configuration theme={{ base: { palette: { interactive: resetToInitial } } }}>\n                      <Button style={buttonStyles} variant='primary'>\n                        Inherited from base\n                      </Button>\n                    </Configuration>\n                  </StyledFieldset>\n                </Configuration>\n              </StyledFieldset>\n            </Configuration>\n          </StyledFieldset>\n        </Configuration>\n      </StyledFieldset>\n    </StyledFieldset>\n  );\n};\n\nexport const OverridableActionMenu = () => {\n  const sharedActions = [{ id: '1', primary: 'Action 1', onClick: () => {} }];\n\n  return (\n    <>\n      <MenuButton text='Cosmos MenuButton' menu={{ items: sharedActions }} />\n      <Configuration overrideMap={{}}>\n        <MenuButton text='Mock PIMC MenuButton' menu={{ items: sharedActions }} />\n      </Configuration>\n    </>\n  );\n};\n"]}

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

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/react';
+import { CurrencyDisplayProps, CurrencyInputProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const CurrencyInputDemo: Story<CurrencyInputProps>;
+interface CurrencyDisplayStoryProps extends CurrencyDisplayProps {
+    showGroupSeparators: boolean;
+    showDecimal: boolean;
+}
+export declare const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps>;
+//# sourceMappingURL=Currency.stories.d.ts.map

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

@@ -0,0 +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,EACnB,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,CAsBvD,CAAC;AAmCF,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAchE,CAAC"}

package/lib/core/Currency/Currency.stories.jsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { CurrencyDisplay, CurrencyInput } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Currency',
+    component: CurrencyInput
+};
+export const CurrencyInputDemo = (args) => {
+    const [value, setValue] = useState();
+    return (<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}/>);
+};
+CurrencyInputDemo.args = {
+    currencyISOCode: 'USD',
+    alwaysShowISOCode: false,
+    showDecimal: true,
+    showGroupSeparators: true,
+    step: 1,
+    label: 'Currency input',
+    labelHidden: false,
+    info: 'Enter a numerical value',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+CurrencyInputDemo.argTypes = {
+    currencyISOCode: {
+        options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
+        control: { type: 'select' }
+    },
+    alwaysShowISOCode: { control: { type: 'boolean' } },
+    showDecimal: { control: { type: 'boolean' } },
+    showGroupSeparators: { control: { type: 'boolean' } },
+    step: { control: { type: 'number' } },
+    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' } },
+    readOnly: { control: { type: 'boolean' } }
+};
+export const CurrencyDisplayDemo = (args) => {
+    return (<CurrencyDisplay value={args.value} currencyISOCode={args.currencyISOCode} alwaysShowISOCode={args.alwaysShowISOCode} formattingOptions={{
+            showGroupSeparators: args.showGroupSeparators,
+            showDecimal: args.showDecimal
+        }}/>);
+};
+CurrencyDisplayDemo.args = {
+    value: '12345.67',
+    currencyISOCode: 'USD',
+    alwaysShowISOCode: false,
+    showGroupSeparators: true,
+    showDecimal: true
+};
+CurrencyDisplayDemo.argTypes = {
+    value: { control: { type: 'text' } },
+    currencyISOCode: {
+        options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
+        control: { type: 'select' }
+    },
+    alwaysShowISOCode: { control: { type: 'boolean' } },
+    showGroupSeparators: { control: { type: 'boolean' } },
+    showDecimal: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Currency.stories.jsx.map