@pega/cosmos-react-demos 2.1.1 → 3.0.0-dev.1.0

package/lib/core/List/CommaSeparatedList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommaSeparatedList.stories.js","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,yBAAyB,CAAC;AAEtF,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,kBAAkB;CACtB,CAAC;AAEV,MAAM,GAAG,GAAG;IACV,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAmC,CACpE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,YAC7B,KAAC,kBAAkB,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,WAAI,WACrD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,sBAAsB,CAAC,IAAI,GAAG;IAC5B,OAAO,EAAE,cAAc;CACxB,CAAC;AAEF,sBAAsB,CAAC,QAAQ,GAAG;IAChC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { CommaSeparatedList, CommaSeparatedListProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/List',\n  component: CommaSeparatedList\n} as Meta;\n\nconst arr = [\n  'Value1',\n  'Value2',\n  'Value3',\n  'Value4',\n  'Value5',\n  'Value6',\n  'Value7',\n  'Value8',\n  'Value9',\n  'Value10',\n  'Value11',\n  'Value12',\n  'Value13',\n  'Value14'\n];\n\nexport const CommaSeparatedListDemo: Story<CommaSeparatedListProps> = (\n  args: CommaSeparatedListProps\n) => {\n  return (\n    <div style={{ maxWidth: '25%' }}>\n      <CommaSeparatedList heading={args.heading} items={arr} />\n    </div>\n  );\n};\n\nCommaSeparatedListDemo.args = {\n  heading: 'List Heading'\n};\n\nCommaSeparatedListDemo.argTypes = {\n  heading: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"CommaSeparatedList.stories.js","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,yBAAyB,CAAC;AAEtF,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,kBAAkB;CACtB,CAAC;AAEV,MAAM,CAAC,MAAM,sBAAsB,GAAmC,CACpE,IAA6B,EAC7B,EAAE;IACF,MAAM,KAAK,GAAG;QACZ,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;IAEF,OAAO,KAAC,kBAAkB,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,WAAI,CAAC;AACrE,CAAC,CAAC;AAEF,sBAAsB,CAAC,IAAI,GAAG;IAC5B,OAAO,EAAE,cAAc;CACxB,CAAC;AAEF,sBAAsB,CAAC,QAAQ,GAAG;IAChC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { CommaSeparatedList, CommaSeparatedListProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/List',\n  component: CommaSeparatedList\n} as Meta;\n\nexport const CommaSeparatedListDemo: Story<CommaSeparatedListProps> = (\n  args: CommaSeparatedListProps\n) => {\n  const items = [\n    'Value 1',\n    'Value 2',\n    'Value 3',\n    'Value 4',\n    'Value 5',\n    'Value 6',\n    'Value 7',\n    'Value 8',\n    'Value 9',\n    'Value 10',\n    'Value 11',\n    'Value 12',\n    'Value 13',\n    'Value 14'\n  ];\n\n  return <CommaSeparatedList heading={args.heading} items={items} />;\n};\n\nCommaSeparatedListDemo.args = {\n  heading: 'List Heading'\n};\n\nCommaSeparatedListDemo.argTypes = {\n  heading: { control: { type: 'text' } }\n};\n"]}

package/lib/core/List/OrderedList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderedList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/List/OrderedList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,gBAAgB,EAAe,MAAM,yBAAyB,CAAC;;AAExE,wBAGU;AAWV,UAAU,qBAAqB;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;CACtC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CAoBxD,CAAC"}
+{"version":3,"file":"OrderedList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/List/OrderedList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,gBAAgB,EAAe,MAAM,yBAAyB,CAAC;;AAExE,wBAGU;AAEV,UAAU,qBAAqB;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;CACtC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CA+BxD,CAAC"}

package/lib/core/List/OrderedList.stories.js

@@ -5,28 +5,28 @@ export default {
     title: 'Core/List',
     component: OrderedList
 };
-const arr = [
-    'Hello',
-    ['val1', 'val2', 'val3', ['a', 'b', 'c', 'd']],
-    'Hi',
-    'How are you?',
-    'Hey',
-    'Whatsup'
-];
 export const OrderedListDemo = (args) => {
     const [limit, setLimit] = useState(0);
+    const items = [
+        'Value 1',
+        ['Value 2', 'Value 3', 'Value 4', ['Value 5', 'Value 6', 'Value 7', 'Value 8']],
+        'Value 9',
+        'Value 10',
+        'Value 11',
+        'Value 12'
+    ];
     useEffect(() => {
         setLimit(args.itemsToShow);
     }, [args.itemsToShow]);
     const handleToggleShow = () => {
         if (limit === args.itemsToShow) {
-            setLimit(arr.flat().length);
+            setLimit(items.flat().length);
         }
         else {
             setLimit(args.itemsToShow);
         }
     };
-    return (_jsx(OrderedList, { onToggleShow: handleToggleShow, heading: args.heading, items: arr.slice(0, limit), count: arr.flat().length }, void 0));
+    return (_jsx(OrderedList, { onToggleShow: handleToggleShow, heading: args.heading, items: items.slice(0, limit), count: items.flat().length }, void 0));
 };
 OrderedListDemo.args = {
     heading: 'List Heading',

package/lib/core/List/OrderedList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderedList.stories.js","sourceRoot":"","sources":["../../../src/core/List/OrderedList.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAoB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAExE,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,GAAG,GAAG;IACV,OAAO;IACP,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC9C,IAAI;IACJ,cAAc;IACd,KAAK;IACL,SAAS;CACV,CAAC;AAOF,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IACvB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;YAC9B,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC;SAC7B;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IACF,OAAO,CACL,KAAC,WAAW,IACV,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,EAC1B,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,MAAM,WACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,cAAc;IACvB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { OrderedListProps, OrderedList } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/List',\n  component: OrderedList\n} as Meta;\n\nconst arr = [\n  'Hello',\n  ['val1', 'val2', 'val3', ['a', 'b', 'c', 'd']],\n  'Hi',\n  'How are you?',\n  'Hey',\n  'Whatsup'\n];\n\ninterface OrderedListStoryProps {\n  itemsToShow: number;\n  heading: OrderedListProps['heading'];\n}\n\nexport const OrderedListDemo: Story<OrderedListStoryProps> = (args: OrderedListStoryProps) => {\n  const [limit, setLimit] = useState(0);\n  useEffect(() => {\n    setLimit(args.itemsToShow);\n  }, [args.itemsToShow]);\n  const handleToggleShow = () => {\n    if (limit === args.itemsToShow) {\n      setLimit(arr.flat().length);\n    } else {\n      setLimit(args.itemsToShow);\n    }\n  };\n  return (\n    <OrderedList\n      onToggleShow={handleToggleShow}\n      heading={args.heading}\n      items={arr.slice(0, limit)}\n      count={arr.flat().length}\n    />\n  );\n};\n\nOrderedListDemo.args = {\n  heading: 'List Heading',\n  itemsToShow: 3\n};\n\nOrderedListDemo.argTypes = {\n  heading: { control: { type: 'text' } },\n  itemsToShow: { control: { type: 'number' } }\n};\n"]}
+{"version":3,"file":"OrderedList.stories.js","sourceRoot":"","sources":["../../../src/core/List/OrderedList.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAoB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAExE,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,WAAW;CACf,CAAC;AAOV,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG;QACZ,SAAS;QACT,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QAC/E,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IAEvB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;YAC9B,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC;SAC/B;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,EAC5B,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,WAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,cAAc;IACvB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { OrderedListProps, OrderedList } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/List',\n  component: OrderedList\n} as Meta;\n\ninterface OrderedListStoryProps {\n  itemsToShow: number;\n  heading: OrderedListProps['heading'];\n}\n\nexport const OrderedListDemo: Story<OrderedListStoryProps> = (args: OrderedListStoryProps) => {\n  const [limit, setLimit] = useState(0);\n  const items = [\n    'Value 1',\n    ['Value 2', 'Value 3', 'Value 4', ['Value 5', 'Value 6', 'Value 7', 'Value 8']],\n    'Value 9',\n    'Value 10',\n    'Value 11',\n    'Value 12'\n  ];\n\n  useEffect(() => {\n    setLimit(args.itemsToShow);\n  }, [args.itemsToShow]);\n\n  const handleToggleShow = () => {\n    if (limit === args.itemsToShow) {\n      setLimit(items.flat().length);\n    } else {\n      setLimit(args.itemsToShow);\n    }\n  };\n\n  return (\n    <OrderedList\n      onToggleShow={handleToggleShow}\n      heading={args.heading}\n      items={items.slice(0, limit)}\n      count={items.flat().length}\n    />\n  );\n};\n\nOrderedListDemo.args = {\n  heading: 'List Heading',\n  itemsToShow: 3\n};\n\nOrderedListDemo.argTypes = {\n  heading: { control: { type: 'text' } },\n  itemsToShow: { control: { type: 'number' } }\n};\n"]}

package/lib/core/List/UnorderedList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnorderedList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/List/UnorderedList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,kBAAkB,EAAiB,MAAM,yBAAyB,CAAC;;AAE5E,wBAGU;AAWV,UAAU,uBAAuB;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAsB5D,CAAC"}
+{"version":3,"file":"UnorderedList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/List/UnorderedList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,kBAAkB,EAAiB,MAAM,yBAAyB,CAAC;;AAE5E,wBAGU;AAEV,UAAU,uBAAuB;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAiC5D,CAAC"}

package/lib/core/List/UnorderedList.stories.js

@@ -5,28 +5,28 @@ export default {
     title: 'Core/List',
     component: UnorderedList
 };
-const arr = [
-    'Hello',
-    ['val1', 'val2', 'val3', ['a', 'b', 'c', 'd']],
-    'Hi',
-    'How are you?',
-    'Hey',
-    'Whatsup'
-];
 export const UnorderedListDemo = (args) => {
     const [limit, setLimit] = useState(0);
+    const items = [
+        'Value 1',
+        ['Value 2', 'Value 3', 'Value 4', ['Value 5', 'Value 6', 'Value 7', 'Value 8']],
+        'Value 9',
+        'Value 10',
+        'Value 11',
+        'Value 12'
+    ];
     useEffect(() => {
         setLimit(args.itemsToShow);
     }, [args.itemsToShow]);
     const handleToggleShow = () => {
         if (limit === args.itemsToShow) {
-            setLimit(arr.flat().length);
+            setLimit(items.flat().length);
         }
         else {
             setLimit(args.itemsToShow);
         }
     };
-    return (_jsx(UnorderedList, { onToggleShow: handleToggleShow, heading: args.heading, items: arr.slice(0, limit), count: arr.flat().length }, void 0));
+    return (_jsx(UnorderedList, { onToggleShow: handleToggleShow, heading: args.heading, items: items.slice(0, limit), count: items.flat().length }, void 0));
 };
 UnorderedListDemo.args = {
     heading: 'List Heading',

package/lib/core/List/UnorderedList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnorderedList.stories.js","sourceRoot":"","sources":["../../../src/core/List/UnorderedList.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAsB,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE5E,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,aAAa;CACjB,CAAC;AAEV,MAAM,GAAG,GAAG;IACV,OAAO;IACP,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC9C,IAAI;IACJ,cAAc;IACd,KAAK;IACL,SAAS;CACV,CAAC;AAOF,MAAM,CAAC,MAAM,iBAAiB,GAAmC,CAC/D,IAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IACvB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;YAC9B,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC;SAC7B;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IACF,OAAO,CACL,KAAC,aAAa,IACZ,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,EAC1B,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,MAAM,WACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,OAAO,EAAE,cAAc;IACvB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { UnorderedListProps, UnorderedList } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/List',\n  component: UnorderedList\n} as Meta;\n\nconst arr = [\n  'Hello',\n  ['val1', 'val2', 'val3', ['a', 'b', 'c', 'd']],\n  'Hi',\n  'How are you?',\n  'Hey',\n  'Whatsup'\n];\n\ninterface UnorderedListStoryProps {\n  itemsToShow: number;\n  heading: UnorderedListProps['heading'];\n}\n\nexport const UnorderedListDemo: Story<UnorderedListStoryProps> = (\n  args: UnorderedListStoryProps\n) => {\n  const [limit, setLimit] = useState(0);\n  useEffect(() => {\n    setLimit(args.itemsToShow);\n  }, [args.itemsToShow]);\n  const handleToggleShow = () => {\n    if (limit === args.itemsToShow) {\n      setLimit(arr.flat().length);\n    } else {\n      setLimit(args.itemsToShow);\n    }\n  };\n  return (\n    <UnorderedList\n      onToggleShow={handleToggleShow}\n      heading={args.heading}\n      items={arr.slice(0, limit)}\n      count={arr.flat().length}\n    />\n  );\n};\n\nUnorderedListDemo.args = {\n  heading: 'List Heading',\n  itemsToShow: 3\n};\n\nUnorderedListDemo.argTypes = {\n  heading: { control: { type: 'text' } },\n  itemsToShow: { control: { type: 'number' } }\n};\n"]}
+{"version":3,"file":"UnorderedList.stories.js","sourceRoot":"","sources":["../../../src/core/List/UnorderedList.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAsB,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE5E,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,aAAa;CACjB,CAAC;AAOV,MAAM,CAAC,MAAM,iBAAiB,GAAmC,CAC/D,IAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG;QACZ,SAAS;QACT,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QAC/E,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IAEvB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;YAC9B,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC;SAC/B;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IACZ,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,EAC5B,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,WAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,OAAO,EAAE,cAAc;IACvB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { UnorderedListProps, UnorderedList } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/List',\n  component: UnorderedList\n} as Meta;\n\ninterface UnorderedListStoryProps {\n  itemsToShow: number;\n  heading: UnorderedListProps['heading'];\n}\n\nexport const UnorderedListDemo: Story<UnorderedListStoryProps> = (\n  args: UnorderedListStoryProps\n) => {\n  const [limit, setLimit] = useState(0);\n  const items = [\n    'Value 1',\n    ['Value 2', 'Value 3', 'Value 4', ['Value 5', 'Value 6', 'Value 7', 'Value 8']],\n    'Value 9',\n    'Value 10',\n    'Value 11',\n    'Value 12'\n  ];\n\n  useEffect(() => {\n    setLimit(args.itemsToShow);\n  }, [args.itemsToShow]);\n\n  const handleToggleShow = () => {\n    if (limit === args.itemsToShow) {\n      setLimit(items.flat().length);\n    } else {\n      setLimit(args.itemsToShow);\n    }\n  };\n\n  return (\n    <UnorderedList\n      onToggleShow={handleToggleShow}\n      heading={args.heading}\n      items={items.slice(0, limit)}\n      count={items.flat().length}\n    />\n  );\n};\n\nUnorderedListDemo.args = {\n  heading: 'List Heading',\n  itemsToShow: 3\n};\n\nUnorderedListDemo.argTypes = {\n  heading: { control: { type: 'text' } },\n  itemsToShow: { control: { type: 'number' } }\n};\n"]}

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

@@ -1,8 +1,8 @@
 import { Meta, Story } from '@storybook/react';
-import { MenuProps } from '@pega/cosmos-react-core';
+import { MenuProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-interface MenuStoryProps extends MenuProps {
+interface MenuStoryProps extends OmitStrict<MenuProps, 'items'> {
     showItemSecondary?: boolean;
     showItemVisual?: boolean;
     showItemCount?: boolean;
@@ -10,7 +10,7 @@ interface MenuStoryProps extends MenuProps {
     filterPattern?: 'contains' | 'starts with';
     infiniteScroll?: boolean;
     noItems?: boolean;
-    loadMore?: (id?: string) => void;
+    useFlatData?: boolean;
 }
 export declare const MenuDemo: Story<MenuStoryProps>;
 export declare const FlatMenuDemo: Story<MenuStoryProps>;

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

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

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

@@ -17,7 +17,7 @@ export default {
         infiniteScroll: false,
         noItems: false,
         emptyText: 'No items',
-        items: countries
+        useFlatData: false
     },
     argTypes: {
         variant: { options: ['drill-down', 'flyout'], control: { type: 'select' } },
@@ -30,18 +30,18 @@ export default {
         infiniteScroll: { control: { type: 'boolean' } },
         noItems: { control: { type: 'boolean' } },
         emptyText: { control: { type: 'text' } },
-        items: { table: { disable: true } },
-        loadMore: { table: { disable: true } }
+        useFlatData: { control: { type: 'boolean' } }
     }
 };
 export const MenuDemo = (args) => {
     const menuID = createUID();
+    const data = args.useFlatData ? cars : countries;
     const searchEleRef = useRef(null);
     const { push } = useContext(ToasterContext);
     const [isOpen, setIsOpen] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [hasMore, setHasMore] = useState(true);
-    const [items, setItems] = useState(args.infiniteScroll ? args.items.slice(0, 10) : args.items);
+    const [items, setItems] = useState(args.infiniteScroll ? data.slice(0, 10) : data);
     const [buttonEl, setButtonEl] = useElement(null);
     const [popoverEl, setPopoverEl] = useElement(null);
     const [search, setSearch] = useState('');
@@ -72,7 +72,7 @@ export const MenuDemo = (args) => {
     }, [search, items, searchRegex, args.showItemVisual]);
     const resetMenu = useCallback(() => {
         setIsOpen(false);
-        setItems(args.items.slice(0, 10));
+        setItems(data.slice(0, 10));
         setSearch('');
     }, []);
     const onKeydown = useCallback(({ key }) => {
@@ -85,15 +85,14 @@ export const MenuDemo = (args) => {
             setTimeout(() => {
                 setIsLoading(false);
                 setItems(prevItems => {
-                    const newItems = args.items.slice(prevItems.length, prevItems.length + 10);
+                    const newItems = data.slice(prevItems.length, prevItems.length + 10);
                     if (newItems.length === 0)
                         setHasMore(false);
                     return menuHelpers.appendTo(prevItems, newItems, expandedItemId);
                 });
             }, 2000);
         }
-        args.loadMore?.(expandedItemId);
-    }, [items, isLoading, args.loadMore]);
+    }, [items, isLoading]);
     useOuterEvent('mousedown', [popoverEl, buttonEl], e => {
         if (args.variant === 'flyout') {
             const path = e.composedPath();
@@ -142,9 +141,6 @@ export const MenuDemo = (args) => {
                                 }, children: ["Add", selections.length > 0 && args.mode === 'multi-select' && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Count, { children: selections.length }, void 0)] }, void 0))] }, void 0)] }, void 0))) }, void 0) }, void 0)] }, void 0));
 };
 export const FlatMenuDemo = (args) => {
-    return _jsx(MenuDemo, { ...args }, void 0);
-};
-FlatMenuDemo.args = {
-    items: cars
+    return _jsx(MenuDemo, { ...args, useFlatData: true }, void 0);
 };
 //# sourceMappingURL=Menu.stories.js.map

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

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

package/lib/core/Modal/Modal.mocks.js

@@ -2,7 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Flex, Text } from '@pega/cosmos-react-core';
 import { ImageDemo } from '@pega/cosmos-react-demos/lib/core/Image/Image.stories';
 import { TableDemo } from '@pega/cosmos-react-demos/lib/core/Table/Table.stories';
-import { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.stories';
+import { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.mocks';
 const getRandomContentType = (contentType) => {
     const contentMap = {
         text: ['short text', 'long text'],

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.mocks.js","sourceRoot":"","sources":["../../../src/core/Modal/Modal.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,uDAAuD,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,uDAAuD,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,qDAAqD,CAAC;AAclF,MAAM,oBAAoB,GAAG,CAAC,WAA4B,EAAgB,EAAE;IAC1E,MAAM,UAAU,GAA4C;QAC1D,IAAI,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;QACjC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;QACxB,IAAI,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC;KAChE,CAAC;IACF,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,WAAyB,EAAE,oBAA6B,EAAE,EAAE;IACrF,QAAQ,WAAW,EAAE;QACnB,KAAK,QAAQ;YACX,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7C,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,EAC/C,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,EAC/C,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,oBAAoB,CAAC,YAC1D,CACR,CAAC;QACJ,KAAK,OAAO;YACV,OAAO,KAAC,SAAS,aAAG,CAAC;QACvB,KAAK,OAAO;YACV,OAAO,KAAC,SAAS,aAAG,CAAC;QACvB,KAAK,iBAAiB;YACpB,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,WAAI,CAAC;QACtD,KAAK,iBAAiB;YACpB,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,WAAI,CAAC;QACtD,KAAK,iBAAiB;YACpB,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,WAAI,CAAC;QACtD,KAAK,WAAW;YACd,OAAO,CACL,KAAC,IAAI,qWAKE,CACR,CAAC;QACJ,KAAK,YAAY,CAAC;QAClB;YACE,OAAO,KAAC,IAAI,sDAAmC,CAAC;KACnD;AACH,CAAC,CAAC","sourcesContent":["import { Flex, Text } from '@pega/cosmos-react-core';\nimport { ImageDemo } from '@pega/cosmos-react-demos/lib/core/Image/Image.stories';\nimport { TableDemo } from '@pega/cosmos-react-demos/lib/core/Table/Table.stories';\nimport { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.stories';\n\ntype ContentSections = 'text' | 'meta' | 'form';\n\nexport type ContentTypes =\n  | 'short text'\n  | 'long text'\n  | 'image'\n  | 'table'\n  | 'form (1 column)'\n  | 'form (2 column)'\n  | 'form (3 column)'\n  | 'random';\n\nconst getRandomContentType = (contentType: ContentSections): ContentTypes => {\n  const contentMap: Record<ContentSections, ContentTypes[]> = {\n    text: ['short text', 'long text'],\n    meta: ['image', 'table'],\n    form: ['form (1 column)', 'form (2 column)', 'form (3 column)']\n  };\n  const options = contentMap[contentType];\n\n  return options[Math.floor(Math.random() * options.length)];\n};\n\nexport const getContent = (contentType: ContentTypes, formColumnWidthFixed: boolean) => {\n  switch (contentType) {\n    case 'random':\n      return (\n        <Flex container={{ direction: 'column', gap: 4 }}>\n          {getContent(getRandomContentType('text'), false)}\n          {getContent(getRandomContentType('meta'), false)}\n          {getContent(getRandomContentType('form'), formColumnWidthFixed)}\n        </Flex>\n      );\n    case 'image':\n      return <ImageDemo />;\n    case 'table':\n      return <TableDemo />;\n    case 'form (1 column)':\n      return <FormContent cols={1} showActions={false} />;\n    case 'form (2 column)':\n      return <FormContent cols={2} showActions={false} />;\n    case 'form (3 column)':\n      return <FormContent cols={3} showActions={false} />;\n    case 'long text':\n      return (\n        <Text>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum ipsum ipsum, nec\n          sodales risus finibus eget. Proin ornare, ante ac convallis sollicitudin, elit turpis\n          venenatis lorem, vitae viverra eros magna non lectus. Duis ac auctor sapien. Donec\n          malesuada eros ut libero sodales, malesuada ullamcorper lacus eleifend.\n        </Text>\n      );\n    case 'short text':\n    default:\n      return <Text>Lorem ipsum dolor sit amet.</Text>;\n  }\n};\n"]}
+{"version":3,"file":"Modal.mocks.js","sourceRoot":"","sources":["../../../src/core/Modal/Modal.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,uDAAuD,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,uDAAuD,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAchF,MAAM,oBAAoB,GAAG,CAAC,WAA4B,EAAgB,EAAE;IAC1E,MAAM,UAAU,GAA4C;QAC1D,IAAI,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;QACjC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;QACxB,IAAI,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC;KAChE,CAAC;IACF,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,WAAyB,EAAE,oBAA6B,EAAE,EAAE;IACrF,QAAQ,WAAW,EAAE;QACnB,KAAK,QAAQ;YACX,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7C,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,EAC/C,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,EAC/C,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,oBAAoB,CAAC,YAC1D,CACR,CAAC;QACJ,KAAK,OAAO;YACV,OAAO,KAAC,SAAS,aAAG,CAAC;QACvB,KAAK,OAAO;YACV,OAAO,KAAC,SAAS,aAAG,CAAC;QACvB,KAAK,iBAAiB;YACpB,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,WAAI,CAAC;QACtD,KAAK,iBAAiB;YACpB,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,WAAI,CAAC;QACtD,KAAK,iBAAiB;YACpB,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,WAAI,CAAC;QACtD,KAAK,WAAW;YACd,OAAO,CACL,KAAC,IAAI,qWAKE,CACR,CAAC;QACJ,KAAK,YAAY,CAAC;QAClB;YACE,OAAO,KAAC,IAAI,sDAAmC,CAAC;KACnD;AACH,CAAC,CAAC","sourcesContent":["import { Flex, Text } from '@pega/cosmos-react-core';\nimport { ImageDemo } from '@pega/cosmos-react-demos/lib/core/Image/Image.stories';\nimport { TableDemo } from '@pega/cosmos-react-demos/lib/core/Table/Table.stories';\nimport { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.mocks';\n\ntype ContentSections = 'text' | 'meta' | 'form';\n\nexport type ContentTypes =\n  | 'short text'\n  | 'long text'\n  | 'image'\n  | 'table'\n  | 'form (1 column)'\n  | 'form (2 column)'\n  | 'form (3 column)'\n  | 'random';\n\nconst getRandomContentType = (contentType: ContentSections): ContentTypes => {\n  const contentMap: Record<ContentSections, ContentTypes[]> = {\n    text: ['short text', 'long text'],\n    meta: ['image', 'table'],\n    form: ['form (1 column)', 'form (2 column)', 'form (3 column)']\n  };\n  const options = contentMap[contentType];\n\n  return options[Math.floor(Math.random() * options.length)];\n};\n\nexport const getContent = (contentType: ContentTypes, formColumnWidthFixed: boolean) => {\n  switch (contentType) {\n    case 'random':\n      return (\n        <Flex container={{ direction: 'column', gap: 4 }}>\n          {getContent(getRandomContentType('text'), false)}\n          {getContent(getRandomContentType('meta'), false)}\n          {getContent(getRandomContentType('form'), formColumnWidthFixed)}\n        </Flex>\n      );\n    case 'image':\n      return <ImageDemo />;\n    case 'table':\n      return <TableDemo />;\n    case 'form (1 column)':\n      return <FormContent cols={1} showActions={false} />;\n    case 'form (2 column)':\n      return <FormContent cols={2} showActions={false} />;\n    case 'form (3 column)':\n      return <FormContent cols={3} showActions={false} />;\n    case 'long text':\n      return (\n        <Text>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum ipsum ipsum, nec\n          sodales risus finibus eget. Proin ornare, ante ac convallis sollicitudin, elit turpis\n          venenatis lorem, vitae viverra eros magna non lectus. Duis ac auctor sapien. Donec\n          malesuada eros ut libero sodales, malesuada ullamcorper lacus eleifend.\n        </Text>\n      );\n    case 'short text':\n    default:\n      return <Text>Lorem ipsum dolor sit amet.</Text>;\n  }\n};\n"]}

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

@@ -6,7 +6,7 @@ export default {
     component: NumberInput
 };
 export const NumberInputDemo = (args) => {
-    const [value, setValue] = useState(args.value ?? '');
+    const [value, setValue] = useState();
     return (_jsx(NumberInput, { ...args, value: value, onChange: inputValue => {
             setValue(inputValue);
             args.onChange?.(inputValue);

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

@@ -1 +1 @@
-{"version":3,"file":"Number.stories.js","sourceRoot":"","sources":["../../../src/core/Number/Number.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  NumberDisplay,\n  NumberDisplayProps,\n  NumberInput,\n  NumberInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Number',\n  component: NumberInput\n} as Meta;\n\nexport const NumberInputDemo: Story<NumberInputProps> = (args: NumberInputProps) => {\n  const [value, setValue] = useState<string>(args.value ?? '');\n\n  return (\n    <NumberInput\n      {...args}\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        setValue(inputValue);\n        args.onBlur?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      unitPlacement={args.unitPlacement}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nNumberInputDemo.args = {\n  numberOfDecimals: 100,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: 'ml',\n  unitPlacement: 'after',\n  label: 'Number input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nNumberInputDemo.argTypes = {\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: { control: { type: 'text' } },\n  unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const StepperDemo: Story<NumberInputProps> = (args: NumberInputProps) => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <NumberInput\n      {...args}\n      variant='stepper'\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        setValue(inputValue);\n        args.onBlur?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      unitPlacement={args.unitPlacement}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nStepperDemo.args = {\n  numberOfDecimals: 100,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: 'ml',\n  unitPlacement: 'after',\n  label: 'Stepper input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nStepperDemo.argTypes = {\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: { control: { type: 'text' } },\n  unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface NumberDisplayStoryProps extends NumberDisplayProps {\n  numberOfDecimals: number;\n  showGroupSeparators: boolean;\n  showDecimal: boolean;\n}\n\nexport const NumberDisplayDemo: Story<NumberDisplayStoryProps> = (\n  args: NumberDisplayStoryProps\n) => {\n  return (\n    <NumberDisplay\n      value={args.value}\n      unit={args.unit}\n      unitPlacement={args.unitPlacement}\n      formattingOptions={{\n        numberOfDecimals: args.numberOfDecimals,\n        showGroupSeparators: args.showGroupSeparators,\n        showDecimal: args.showDecimal\n      }}\n    />\n  );\n};\n\nNumberDisplayDemo.args = {\n  value: '12345.6789',\n  unit: 'ml',\n  unitPlacement: 'after',\n  numberOfDecimals: 100,\n  showGroupSeparators: true,\n  showDecimal: true\n};\n\nNumberDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  unit: { control: { type: 'text' } },\n  unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },\n  numberOfDecimals: { control: { type: 'number' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Number.stories.js","sourceRoot":"","sources":["../../../src/core/Number/Number.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  NumberDisplay,\n  NumberDisplayProps,\n  NumberInput,\n  NumberInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Number',\n  component: NumberInput\n} as Meta;\n\nexport const NumberInputDemo: Story<NumberInputProps> = (args: NumberInputProps) => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <NumberInput\n      {...args}\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        setValue(inputValue);\n        args.onBlur?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      unitPlacement={args.unitPlacement}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nNumberInputDemo.args = {\n  numberOfDecimals: 100,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: 'ml',\n  unitPlacement: 'after',\n  label: 'Number input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nNumberInputDemo.argTypes = {\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: { control: { type: 'text' } },\n  unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const StepperDemo: Story<NumberInputProps> = (args: NumberInputProps) => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <NumberInput\n      {...args}\n      variant='stepper'\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        setValue(inputValue);\n        args.onBlur?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      unitPlacement={args.unitPlacement}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nStepperDemo.args = {\n  numberOfDecimals: 100,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: 'ml',\n  unitPlacement: 'after',\n  label: 'Stepper input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nStepperDemo.argTypes = {\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: { control: { type: 'text' } },\n  unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface NumberDisplayStoryProps extends NumberDisplayProps {\n  numberOfDecimals: number;\n  showGroupSeparators: boolean;\n  showDecimal: boolean;\n}\n\nexport const NumberDisplayDemo: Story<NumberDisplayStoryProps> = (\n  args: NumberDisplayStoryProps\n) => {\n  return (\n    <NumberDisplay\n      value={args.value}\n      unit={args.unit}\n      unitPlacement={args.unitPlacement}\n      formattingOptions={{\n        numberOfDecimals: args.numberOfDecimals,\n        showGroupSeparators: args.showGroupSeparators,\n        showDecimal: args.showDecimal\n      }}\n    />\n  );\n};\n\nNumberDisplayDemo.args = {\n  value: '12345.6789',\n  unit: 'ml',\n  unitPlacement: 'after',\n  numberOfDecimals: 100,\n  showGroupSeparators: true,\n  showDecimal: true\n};\n\nNumberDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  unit: { control: { type: 'text' } },\n  unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },\n  numberOfDecimals: { control: { type: 'number' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -2,8 +2,11 @@ import { Meta, Story } from '@storybook/react';
 import { DashboardPageLayoutProps, PageTemplateProps, TemplateProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-interface PageTemplatesStoryProps extends PageTemplateProps {
-    template: 'demo page' | 'one column' | 'two column' | 'three column' | 'four column' | 'wide narrow' | 'narrow wide' | 'wide wide narrow' | 'narrow wide wide' | 'narrow wide narrow' | 'tabbed';
+interface PageTemplatesStoryProps {
+    template?: 'demo page' | 'one column' | 'two column' | 'three column' | 'four column' | 'wide narrow' | 'narrow wide' | 'wide wide narrow' | 'narrow wide wide' | 'narrow wide narrow' | 'tabbed';
+    title?: PageTemplateProps['title'];
+    icon?: PageTemplateProps['icon'];
+    scrollContent?: PageTemplateProps['scrollContent'];
     showIcon?: boolean;
     showBreadcrumbs?: boolean;
     pathData?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAML,wBAAwB,EAWxB,iBAAiB,EAKjB,aAAa,EAEd,MAAM,yBAAyB,CAAC;;AASjC,wBAKU;AAEV,UAAU,uBAAwB,SAAQ,iBAAiB;IACzD,QAAQ,EACJ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,aAAa,GACb,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,GACpB,QAAQ,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAiG5D,CAAC;AAyCF,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAoE5D,CAAC;AAiBF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAkFhE,CAAC"}
+{"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAML,wBAAwB,EAWxB,iBAAiB,EAKjB,aAAa,EAEd,MAAM,yBAAyB,CAAC;;AASjC,wBAKU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EACL,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,aAAa,GACb,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,GACpB,QAAQ,CAAC;IACb,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAiG5D,CAAC;AAyCF,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAoE5D,CAAC;AAiBF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAkFhE,CAAC"}

package/lib/core/PageTemplates/PageTemplates.stories.js

@@ -19,7 +19,7 @@ export const PageTemplatesDemo = (args) => {
     const banners = args.showBanners && (_jsx(Banner, { id: 'warning-banner', variant: 'warning', messages: ['This is a warning banner. You have been warned!'] }, void 0));
     const pageTemplateProps = {
         scrollContent: args.scrollContent,
-        title: args.title,
+        title: args.title || 'Demo page',
         icon: args.showIcon ? args.icon : undefined,
         actions,
         banners,
@@ -105,7 +105,7 @@ PageTemplatesDemo.argTypes = {
     },
     scrollContent: { control: { type: 'boolean' } },
     title: { control: { type: 'text' } },
-    icon: { options: icons, control: { type: 'select' } },
+    icon: { options: icons, control: { type: 'select', icons: true } },
     showIcon: { control: { type: 'boolean' } },
     showBreadcrumbs: { control: { type: 'boolean' } },
     pathData: { control: { type: 'text' } },
@@ -218,7 +218,7 @@ CategorySubPageDemo.args = {
 };
 CategorySubPageDemo.argTypes = {
     category: { control: { type: 'text' } },
-    categoryIcon: { options: icons, control: { type: 'select' } },
+    categoryIcon: { options: icons, control: { type: 'select', icons: true } },
     showIcon: { control: { type: 'boolean' } },
     viewLoading: { control: { type: 'boolean' } },
     maxActions: { control: { type: 'number' } }

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.stories.js","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, MouseEvent } from 'react';\n\nimport {\n  Banner,\n  Button,\n  CategorySubPage,\n  ComboBox,\n  DashboardPage,\n  DashboardPageLayoutProps,\n  TabbedPage,\n  OneColumnPage,\n  TwoColumnPage,\n  ThreeColumnPage,\n  FourColumnPage,\n  WideNarrowPage,\n  NarrowWidePage,\n  WideWideNarrowPage,\n  NarrowWideWidePage,\n  NarrowWideNarrowPage,\n  PageTemplateProps,\n  icons,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps,\n  TemplateProps,\n  createUID\n} from '@pega/cosmos-react-core';\nimport { FeedDemo } from '@pega/cosmos-react-demos/lib/social/Feed/Feed.stories';\nimport { TasksDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/Tasks.stories';\nimport { MockSummaryList } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.mocks';\nimport { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\n\nimport { StyledStoryPage } from './PageTemplates.styles';\nimport { getPath } from './PageTemplates.mocks';\n\nexport default {\n  title: 'Core/PageTemplates',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface PageTemplatesStoryProps extends PageTemplateProps {\n  template:\n    | 'demo page'\n    | 'one column'\n    | 'two column'\n    | 'three column'\n    | 'four column'\n    | 'wide narrow'\n    | 'narrow wide'\n    | 'wide wide narrow'\n    | 'narrow wide wide'\n    | 'narrow wide narrow'\n    | 'tabbed';\n  showIcon?: boolean;\n  showBreadcrumbs?: boolean;\n  pathData?: string;\n  showActions?: boolean;\n  showBanners?: boolean;\n}\n\nexport const PageTemplatesDemo: Story<PageTemplatesStoryProps> = (\n  args: PageTemplatesStoryProps\n) => {\n  const [currentTabId, setCurrentTabId] = useState('1');\n\n  const actions: PageTemplateProps['actions'] = args.showActions && (\n    <>\n      <Button>Page action 1</Button>\n      <Button>Page action 2</Button>\n    </>\n  );\n\n  const banners: PageTemplateProps['banners'] = args.showBanners && (\n    <Banner\n      id='warning-banner'\n      variant='warning'\n      messages={['This is a warning banner. You have been warned!']}\n    />\n  );\n\n  const pageTemplateProps = {\n    scrollContent: args.scrollContent,\n    title: args.title,\n    icon: args.showIcon ? args.icon : undefined,\n    actions,\n    banners,\n    path: getPath(args.showBreadcrumbs, args.pathData),\n    as: args.template !== 'demo page' ? StyledStoryPage : undefined\n  };\n\n  let page;\n\n  switch (args.template) {\n    case 'demo page':\n      page = (\n        <TwoColumnPage\n          a={<FeedDemo />}\n          b={\n            <>\n              <TasksDemo />\n              <MockSummaryList name='My team' limit={10} actions={null} />\n            </>\n          }\n          {...pageTemplateProps}\n        />\n      );\n      break;\n    case 'one column':\n      page = <OneColumnPage a='a' {...pageTemplateProps} />;\n      break;\n    case 'two column':\n      page = <TwoColumnPage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'three column':\n      page = <ThreeColumnPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'four column':\n      page = <FourColumnPage a='a' b='b' c='c' d='d' {...pageTemplateProps} />;\n      break;\n    case 'wide narrow':\n      page = <WideNarrowPage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide':\n      page = <NarrowWidePage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'wide wide narrow':\n      page = <WideWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide wide':\n      page = <NarrowWideWidePage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide narrow':\n      page = <NarrowWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'tabbed':\n    default:\n      page = (\n        <TabbedPage\n          a={`Content for: Tab ${currentTabId}`}\n          tabs={{\n            tabs: Array.from({ length: 5 }, (_, i) => {\n              return {\n                id: `${i + 1}`,\n                name: `Tab ${i + 1}`\n              };\n            }),\n            type: 'horizontal',\n            currentTabId,\n            onTabClick: setCurrentTabId\n          }}\n          {...pageTemplateProps}\n        />\n      );\n      break;\n  }\n\n  return <AppShellDemo main={page} appHeader />;\n};\n\nPageTemplatesDemo.args = {\n  template: 'demo page',\n  scrollContent: false,\n  title: 'Demo page',\n  icon: 'home-solid',\n  showIcon: true,\n  showBreadcrumbs: true,\n  pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n  showActions: true,\n  showBanners: false\n};\n\nPageTemplatesDemo.argTypes = {\n  template: {\n    options: [\n      'demo page',\n      'one column',\n      'two column',\n      'three column',\n      'four column',\n      'wide narrow',\n      'narrow wide',\n      'wide wide narrow',\n      'narrow wide wide',\n      'narrow wide narrow',\n      'tabbed'\n    ],\n    control: { type: 'select' }\n  },\n  scrollContent: { control: { type: 'boolean' } },\n  title: { control: { type: 'text' } },\n  icon: { options: icons, control: { type: 'select' } },\n  showIcon: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  pathData: { control: { type: 'text' } },\n  showActions: { control: { type: 'boolean' } },\n  showBanners: { control: { type: 'boolean' } }\n};\n\ninterface DashboardPageStoryProps {\n  title?: DashboardPageLayoutProps['title'];\n  filterPosition?: DashboardPageLayoutProps['filterPosition'];\n  numberOfFilters?: number;\n}\n\nexport const DashboardPageDemo: Story<DashboardPageStoryProps> = (\n  args: DashboardPageStoryProps\n) => {\n  const FilterComboBox = () => {\n    const [filterSearchValue, setFilterSearchValue] = useState('');\n    const [filterOptions, setFilterOptions] = useState<MenuProps['items']>(() =>\n      Array.from({ length: 10 }, (_, i) => ({\n        id: createUID(),\n        primary: `Filter ${i + 1}`,\n        selected: false\n      }))\n    );\n\n    const selected = useMemo(() => {\n      return menuHelpers\n        .getSelected(filterOptions)\n        .map(item => ({ text: item.primary, id: item.id }));\n    }, [filterOptions]);\n\n    const toggleItem = (id: MenuItemProps['id']) => {\n      setFilterOptions(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n    };\n\n    return (\n      <ComboBox\n        mode='multi-select'\n        label='Filters'\n        placeholder='Choose filters'\n        value={filterSearchValue}\n        onChange={e => {\n          setFilterSearchValue(e.target.value);\n        }}\n        selected={{ items: selected, onRemove: toggleItem }}\n        menu={{\n          items: filterSearchValue\n            ? menuHelpers\n                .flatten(filterOptions)\n                .filter(({ primary }) => primary.includes(filterSearchValue))\n            : filterOptions,\n          emptyText: 'No filters',\n          onItemClick: toggleItem\n        }}\n      />\n    );\n  };\n\n  const filterControls = Array.from({ length: args.numberOfFilters || 3 }, (_, i) => (\n    <FilterComboBox key={i} />\n  ));\n\n  return (\n    <AppShellDemo\n      main={\n        <DashboardPage\n          a='a'\n          b='b'\n          c='c'\n          path={getPath()}\n          filters={filterControls}\n          filterPosition={args.filterPosition}\n          fitToViewport\n          title={args.title || 'Dashboard'}\n          as={StyledStoryPage}\n        />\n      }\n      appHeader\n    />\n  );\n};\n\nDashboardPageDemo.args = {\n  title: 'Dashboard',\n  filterPosition: 'block-start',\n  numberOfFilters: 3\n};\n\nDashboardPageDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  filterPosition: {\n    options: ['block-start', 'inline-start', 'inline-end'],\n    control: { type: 'select' }\n  },\n  numberOfFilters: { control: { type: 'number' } }\n};\n\ninterface CategorySubPageStoryProps {\n  category?: TemplateProps['category'];\n  categoryIcon?: TemplateProps['categoryIcon'];\n  showIcon?: boolean;\n  viewLoading?: TemplateProps['viewLoading'];\n  maxActions?: TemplateProps['maxActions'];\n}\n\nexport const CategorySubPageDemo: Story<CategorySubPageStoryProps> = (\n  args: CategorySubPageStoryProps\n) => {\n  const [activeItem, setActiveItem] = useState('Profile');\n\n  const mockNavLinks = (itemTextArray: string[]) => {\n    return itemTextArray.map(itemText => {\n      return {\n        text: itemText,\n        active: itemText === activeItem,\n        href: '#',\n        onClick: (event: MouseEvent) => setActiveItem((event.target as Element).textContent || '')\n      };\n    });\n  };\n\n  return (\n    <AppShellDemo\n      main={\n        <CategorySubPage\n          viewLoading={args.viewLoading}\n          category={args.category || 'Administration'}\n          categoryIcon={args.showIcon ? args.categoryIcon : undefined}\n          navItemGroups={[\n            {\n              title: 'General',\n              items: useMemo(\n                () => mockNavLinks(['Configurations', 'Profile', 'Authentication', 'Connections']),\n                [activeItem]\n              )\n            },\n            {\n              title: 'Second Group',\n              items: useMemo(() => mockNavLinks(['Option 1', 'Option 2']), [activeItem])\n            },\n            {\n              items: useMemo(() => mockNavLinks(['All configurations']), [activeItem])\n            },\n            {\n              items: useMemo(\n                () => mockNavLinks(['Visually Grouped SubPage A', 'Visually Grouped SubPage B']),\n                [activeItem]\n              )\n            },\n            {\n              items: [\n                {\n                  text: 'Button Item'\n                }\n              ]\n            }\n          ]}\n          pageTitle={activeItem}\n          maxActions={args.maxActions}\n          pageActions={[\n            {\n              id: 'saveChanges',\n              text: 'Save'\n            },\n            {\n              id: 'cancelChanges',\n              text: 'Cancel'\n            },\n            {\n              id: 'goToRule',\n              text: 'Go to Rule'\n            },\n            {\n              id: 'viewInClipboard',\n              text: 'View in Clipboard'\n            }\n          ]}\n          region={\n            <StyledStoryPage secondary>\n              <div style={{ minHeight: '150vh' }} />\n            </StyledStoryPage>\n          }\n        />\n      }\n      appHeader\n    />\n  );\n};\n\nCategorySubPageDemo.args = {\n  category: 'Administration',\n  categoryIcon: 'gear-solid',\n  showIcon: true,\n  viewLoading: false,\n  maxActions: 3\n};\n\nCategorySubPageDemo.argTypes = {\n  category: { control: { type: 'text' } },\n  categoryIcon: { options: icons, control: { type: 'select' } },\n  showIcon: { control: { type: 'boolean' } },\n  viewLoading: { control: { type: 'boolean' } },\n  maxActions: { control: { type: 'number' } }\n};\n"]}
+{"version":3,"file":"PageTemplates.stories.js","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, MouseEvent } from 'react';\n\nimport {\n  Banner,\n  Button,\n  CategorySubPage,\n  ComboBox,\n  DashboardPage,\n  DashboardPageLayoutProps,\n  TabbedPage,\n  OneColumnPage,\n  TwoColumnPage,\n  ThreeColumnPage,\n  FourColumnPage,\n  WideNarrowPage,\n  NarrowWidePage,\n  WideWideNarrowPage,\n  NarrowWideWidePage,\n  NarrowWideNarrowPage,\n  PageTemplateProps,\n  icons,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps,\n  TemplateProps,\n  createUID\n} from '@pega/cosmos-react-core';\nimport { FeedDemo } from '@pega/cosmos-react-demos/lib/social/Feed/Feed.stories';\nimport { TasksDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/Tasks.stories';\nimport { MockSummaryList } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.mocks';\nimport { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\n\nimport { StyledStoryPage } from './PageTemplates.styles';\nimport { getPath } from './PageTemplates.mocks';\n\nexport default {\n  title: 'Core/PageTemplates',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface PageTemplatesStoryProps {\n  template?:\n    | 'demo page'\n    | 'one column'\n    | 'two column'\n    | 'three column'\n    | 'four column'\n    | 'wide narrow'\n    | 'narrow wide'\n    | 'wide wide narrow'\n    | 'narrow wide wide'\n    | 'narrow wide narrow'\n    | 'tabbed';\n  title?: PageTemplateProps['title'];\n  icon?: PageTemplateProps['icon'];\n  scrollContent?: PageTemplateProps['scrollContent'];\n  showIcon?: boolean;\n  showBreadcrumbs?: boolean;\n  pathData?: string;\n  showActions?: boolean;\n  showBanners?: boolean;\n}\n\nexport const PageTemplatesDemo: Story<PageTemplatesStoryProps> = (\n  args: PageTemplatesStoryProps\n) => {\n  const [currentTabId, setCurrentTabId] = useState('1');\n\n  const actions: PageTemplateProps['actions'] = args.showActions && (\n    <>\n      <Button>Page action 1</Button>\n      <Button>Page action 2</Button>\n    </>\n  );\n\n  const banners: PageTemplateProps['banners'] = args.showBanners && (\n    <Banner\n      id='warning-banner'\n      variant='warning'\n      messages={['This is a warning banner. You have been warned!']}\n    />\n  );\n\n  const pageTemplateProps = {\n    scrollContent: args.scrollContent,\n    title: args.title || 'Demo page',\n    icon: args.showIcon ? args.icon : undefined,\n    actions,\n    banners,\n    path: getPath(args.showBreadcrumbs, args.pathData),\n    as: args.template !== 'demo page' ? StyledStoryPage : undefined\n  };\n\n  let page;\n\n  switch (args.template) {\n    case 'demo page':\n      page = (\n        <TwoColumnPage\n          a={<FeedDemo />}\n          b={\n            <>\n              <TasksDemo />\n              <MockSummaryList name='My team' limit={10} actions={null} />\n            </>\n          }\n          {...pageTemplateProps}\n        />\n      );\n      break;\n    case 'one column':\n      page = <OneColumnPage a='a' {...pageTemplateProps} />;\n      break;\n    case 'two column':\n      page = <TwoColumnPage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'three column':\n      page = <ThreeColumnPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'four column':\n      page = <FourColumnPage a='a' b='b' c='c' d='d' {...pageTemplateProps} />;\n      break;\n    case 'wide narrow':\n      page = <WideNarrowPage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide':\n      page = <NarrowWidePage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'wide wide narrow':\n      page = <WideWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide wide':\n      page = <NarrowWideWidePage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide narrow':\n      page = <NarrowWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'tabbed':\n    default:\n      page = (\n        <TabbedPage\n          a={`Content for: Tab ${currentTabId}`}\n          tabs={{\n            tabs: Array.from({ length: 5 }, (_, i) => {\n              return {\n                id: `${i + 1}`,\n                name: `Tab ${i + 1}`\n              };\n            }),\n            type: 'horizontal',\n            currentTabId,\n            onTabClick: setCurrentTabId\n          }}\n          {...pageTemplateProps}\n        />\n      );\n      break;\n  }\n\n  return <AppShellDemo main={page} appHeader />;\n};\n\nPageTemplatesDemo.args = {\n  template: 'demo page',\n  scrollContent: false,\n  title: 'Demo page',\n  icon: 'home-solid',\n  showIcon: true,\n  showBreadcrumbs: true,\n  pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n  showActions: true,\n  showBanners: false\n};\n\nPageTemplatesDemo.argTypes = {\n  template: {\n    options: [\n      'demo page',\n      'one column',\n      'two column',\n      'three column',\n      'four column',\n      'wide narrow',\n      'narrow wide',\n      'wide wide narrow',\n      'narrow wide wide',\n      'narrow wide narrow',\n      'tabbed'\n    ],\n    control: { type: 'select' }\n  },\n  scrollContent: { control: { type: 'boolean' } },\n  title: { control: { type: 'text' } },\n  icon: { options: icons, control: { type: 'select', icons: true } },\n  showIcon: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  pathData: { control: { type: 'text' } },\n  showActions: { control: { type: 'boolean' } },\n  showBanners: { control: { type: 'boolean' } }\n};\n\ninterface DashboardPageStoryProps {\n  title?: DashboardPageLayoutProps['title'];\n  filterPosition?: DashboardPageLayoutProps['filterPosition'];\n  numberOfFilters?: number;\n}\n\nexport const DashboardPageDemo: Story<DashboardPageStoryProps> = (\n  args: DashboardPageStoryProps\n) => {\n  const FilterComboBox = () => {\n    const [filterSearchValue, setFilterSearchValue] = useState('');\n    const [filterOptions, setFilterOptions] = useState<MenuProps['items']>(() =>\n      Array.from({ length: 10 }, (_, i) => ({\n        id: createUID(),\n        primary: `Filter ${i + 1}`,\n        selected: false\n      }))\n    );\n\n    const selected = useMemo(() => {\n      return menuHelpers\n        .getSelected(filterOptions)\n        .map(item => ({ text: item.primary, id: item.id }));\n    }, [filterOptions]);\n\n    const toggleItem = (id: MenuItemProps['id']) => {\n      setFilterOptions(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n    };\n\n    return (\n      <ComboBox\n        mode='multi-select'\n        label='Filters'\n        placeholder='Choose filters'\n        value={filterSearchValue}\n        onChange={e => {\n          setFilterSearchValue(e.target.value);\n        }}\n        selected={{ items: selected, onRemove: toggleItem }}\n        menu={{\n          items: filterSearchValue\n            ? menuHelpers\n                .flatten(filterOptions)\n                .filter(({ primary }) => primary.includes(filterSearchValue))\n            : filterOptions,\n          emptyText: 'No filters',\n          onItemClick: toggleItem\n        }}\n      />\n    );\n  };\n\n  const filterControls = Array.from({ length: args.numberOfFilters || 3 }, (_, i) => (\n    <FilterComboBox key={i} />\n  ));\n\n  return (\n    <AppShellDemo\n      main={\n        <DashboardPage\n          a='a'\n          b='b'\n          c='c'\n          path={getPath()}\n          filters={filterControls}\n          filterPosition={args.filterPosition}\n          fitToViewport\n          title={args.title || 'Dashboard'}\n          as={StyledStoryPage}\n        />\n      }\n      appHeader\n    />\n  );\n};\n\nDashboardPageDemo.args = {\n  title: 'Dashboard',\n  filterPosition: 'block-start',\n  numberOfFilters: 3\n};\n\nDashboardPageDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  filterPosition: {\n    options: ['block-start', 'inline-start', 'inline-end'],\n    control: { type: 'select' }\n  },\n  numberOfFilters: { control: { type: 'number' } }\n};\n\ninterface CategorySubPageStoryProps {\n  category?: TemplateProps['category'];\n  categoryIcon?: TemplateProps['categoryIcon'];\n  showIcon?: boolean;\n  viewLoading?: TemplateProps['viewLoading'];\n  maxActions?: TemplateProps['maxActions'];\n}\n\nexport const CategorySubPageDemo: Story<CategorySubPageStoryProps> = (\n  args: CategorySubPageStoryProps\n) => {\n  const [activeItem, setActiveItem] = useState('Profile');\n\n  const mockNavLinks = (itemTextArray: string[]) => {\n    return itemTextArray.map(itemText => {\n      return {\n        text: itemText,\n        active: itemText === activeItem,\n        href: '#',\n        onClick: (event: MouseEvent) => setActiveItem((event.target as Element).textContent || '')\n      };\n    });\n  };\n\n  return (\n    <AppShellDemo\n      main={\n        <CategorySubPage\n          viewLoading={args.viewLoading}\n          category={args.category || 'Administration'}\n          categoryIcon={args.showIcon ? args.categoryIcon : undefined}\n          navItemGroups={[\n            {\n              title: 'General',\n              items: useMemo(\n                () => mockNavLinks(['Configurations', 'Profile', 'Authentication', 'Connections']),\n                [activeItem]\n              )\n            },\n            {\n              title: 'Second Group',\n              items: useMemo(() => mockNavLinks(['Option 1', 'Option 2']), [activeItem])\n            },\n            {\n              items: useMemo(() => mockNavLinks(['All configurations']), [activeItem])\n            },\n            {\n              items: useMemo(\n                () => mockNavLinks(['Visually Grouped SubPage A', 'Visually Grouped SubPage B']),\n                [activeItem]\n              )\n            },\n            {\n              items: [\n                {\n                  text: 'Button Item'\n                }\n              ]\n            }\n          ]}\n          pageTitle={activeItem}\n          maxActions={args.maxActions}\n          pageActions={[\n            {\n              id: 'saveChanges',\n              text: 'Save'\n            },\n            {\n              id: 'cancelChanges',\n              text: 'Cancel'\n            },\n            {\n              id: 'goToRule',\n              text: 'Go to Rule'\n            },\n            {\n              id: 'viewInClipboard',\n              text: 'View in Clipboard'\n            }\n          ]}\n          region={\n            <StyledStoryPage secondary>\n              <div style={{ minHeight: '150vh' }} />\n            </StyledStoryPage>\n          }\n        />\n      }\n      appHeader\n    />\n  );\n};\n\nCategorySubPageDemo.args = {\n  category: 'Administration',\n  categoryIcon: 'gear-solid',\n  showIcon: true,\n  viewLoading: false,\n  maxActions: 3\n};\n\nCategorySubPageDemo.argTypes = {\n  category: { control: { type: 'text' } },\n  categoryIcon: { options: icons, control: { type: 'select', icons: true } },\n  showIcon: { control: { type: 'boolean' } },\n  viewLoading: { control: { type: 'boolean' } },\n  maxActions: { control: { type: 'number' } }\n};\n"]}

package/lib/core/Paragraph/ParagraphDisplay.stories.js

@@ -10,4 +10,7 @@ export const ParagraphDisplayDemo = (args) => {
 ParagraphDisplayDemo.args = {
     value: "Here's a string with\na new line in it."
 };
+ParagraphDisplayDemo.argTypes = {
+    value: { control: { type: 'text', multiLine: true } }
+};
 //# sourceMappingURL=ParagraphDisplay.stories.js.map

package/lib/core/Paragraph/ParagraphDisplay.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParagraphDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/Paragraph/ParagraphDisplay.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAyB,MAAM,yBAAyB,CAAC;AAElF,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;CACpB,CAAC;AAEV,MAAM,CAAC,MAAM,oBAAoB,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAChG,OAAO,KAAC,gBAAgB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,WAAI,CAAC;AACjD,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,KAAK,EAAE,yCAAyC;CACjD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { ParagraphDisplay, ParagraphDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Paragraph',\n  component: ParagraphDisplay\n} as Meta;\n\nexport const ParagraphDisplayDemo: Story<ParagraphDisplayProps> = (args: ParagraphDisplayProps) => {\n  return <ParagraphDisplay value={args.value} />;\n};\n\nParagraphDisplayDemo.args = {\n  value: \"Here's a string with\\na new line in it.\"\n};\n\n// ParagraphDisplayDemo.argTypes = {\n//   value: { control: { type: 'Paragraph' } }\n// };\n"]}
+{"version":3,"file":"ParagraphDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/Paragraph/ParagraphDisplay.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAyB,MAAM,yBAAyB,CAAC;AAElF,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;CACpB,CAAC;AAEV,MAAM,CAAC,MAAM,oBAAoB,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAChG,OAAO,KAAC,gBAAgB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,WAAI,CAAC;AACjD,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,KAAK,EAAE,yCAAyC;CACjD,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE;CACtD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { ParagraphDisplay, ParagraphDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Paragraph',\n  component: ParagraphDisplay\n} as Meta;\n\nexport const ParagraphDisplayDemo: Story<ParagraphDisplayProps> = (args: ParagraphDisplayProps) => {\n  return <ParagraphDisplay value={args.value} />;\n};\n\nParagraphDisplayDemo.args = {\n  value: \"Here's a string with\\na new line in it.\"\n};\n\nParagraphDisplayDemo.argTypes = {\n  value: { control: { type: 'text', multiLine: true } }\n};\n"]}