@pega/cosmos-react-demos 2.0.0

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

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react';
+import { UnorderedListProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface UnorderedListStoryProps {
+    itemsToShow: number;
+    heading: UnorderedListProps['heading'];
+}
+export declare const UnorderedListDemo: Story<UnorderedListStoryProps>;
+//# sourceMappingURL=UnorderedList.stories.d.ts.map

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

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

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

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+import { UnorderedList } from '@pega/cosmos-react-core';
+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);
+    useEffect(() => {
+        setLimit(args.itemsToShow);
+    }, [args.itemsToShow]);
+    const handleToggleShow = () => {
+        if (limit === args.itemsToShow) {
+            setLimit(arr.flat().length);
+        }
+        else {
+            setLimit(args.itemsToShow);
+        }
+    };
+    return (<UnorderedList onToggleShow={handleToggleShow} heading={args.heading} items={arr.slice(0, limit)} count={arr.flat().length}/>);
+};
+UnorderedListDemo.args = {
+    heading: 'List Heading',
+    itemsToShow: 3
+};
+UnorderedListDemo.argTypes = {
+    heading: { control: { type: 'text' } },
+    itemsToShow: { control: { type: 'number' } }
+};
+//# sourceMappingURL=UnorderedList.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnorderedList.stories.jsx","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,CAAC,aAAa,CACZ,YAAY,CAAC,CAAC,gBAAgB,CAAC,CAC/B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,KAAK,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAC3B,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,EACzB,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"]}

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

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/react';
+import { LocationDisplayProps, LocationInputProps, LocationViewProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface APIKey {
+    apiKey?: string;
+}
+export declare const LocationDemo: Story<LocationInputProps & APIKey>;
+export declare const LocationInputDemo: Story<LocationInputProps & APIKey>;
+export declare const LocationViewDemo: Story<LocationViewProps & APIKey>;
+export declare const LocationDisplayDemo: Story<LocationDisplayProps & APIKey>;
+//# sourceMappingURL=Location.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Location.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Location/Location.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAGL,oBAAoB,EAEpB,kBAAkB,EAElB,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,UAAU,MAAM;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,GAAG,MAAM,CA4C3D,CAAC;AA8BF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,GAAG,MAAM,CAyBhE,CAAC;AAwBF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,GAAG,MAAM,CAoB9D,CAAC;AAkBF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,oBAAoB,GAAG,MAAM,CAcpE,CAAC"}

package/lib/core/Location/Location.stories.jsx

@@ -0,0 +1,130 @@
+import { useState } from 'react';
+import { LocationDisplay, LocationInput, LocationView, MapsContext } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Location',
+    component: LocationInput
+};
+export const LocationDemo = (args) => {
+    const [value, setValue] = useState('Boston, MA');
+    const [locationObj, setLocationObj] = useState('Boston, MA');
+    const handleClick = ({ latitude, longitude }) => {
+        setLocationObj({ latitude, longitude });
+    };
+    return (<MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>
+      <LocationInput showMap defaultToCurrentLocation={args.defaultToCurrentLocation} value={value} label={args.label} labelHidden={args.labelHidden} onChange={inputValue => {
+            setValue(inputValue);
+        }} location={locationObj} onSelect={selectedValueObj => {
+            setValue(selectedValueObj.name);
+            if (selectedValueObj.latitude && selectedValueObj.longitude) {
+                setLocationObj({
+                    latitude: selectedValueObj.latitude,
+                    longitude: selectedValueObj.longitude
+                });
+            }
+            else {
+                setLocationObj(selectedValueObj.name);
+            }
+        }} onClick={handleClick} centerMapOnChange={args.centerMapOnChange} zoomLevel={args.zoomLevel} height={args.height} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>
+    </MapsContext.Provider>);
+};
+LocationDemo.args = {
+    apiKey: '',
+    defaultToCurrentLocation: false,
+    label: 'Pick a location',
+    labelHidden: false,
+    centerMapOnChange: true,
+    zoomLevel: 13,
+    height: '25rem',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+LocationDemo.argTypes = {
+    apiKey: { control: { type: 'text' } },
+    defaultToCurrentLocation: { control: { type: 'boolean' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    centerMapOnChange: { control: { type: 'boolean' } },
+    zoomLevel: { control: { type: 'number' } },
+    height: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } }
+};
+export const LocationInputDemo = (args) => {
+    const [value, setValue] = useState('');
+    return (<MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>
+      <LocationInput defaultToCurrentLocation={args.defaultToCurrentLocation} value={value} label={args.label} labelHidden={args.labelHidden} onChange={inputValue => {
+            setValue(inputValue);
+        }} onSelect={selectedValueObj => {
+            setValue(selectedValueObj.name);
+        }} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>
+    </MapsContext.Provider>);
+};
+LocationInputDemo.args = {
+    apiKey: '',
+    defaultToCurrentLocation: false,
+    label: 'Pick a location',
+    labelHidden: false,
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+LocationInputDemo.argTypes = {
+    apiKey: { control: { type: 'text' } },
+    defaultToCurrentLocation: { control: { type: 'boolean' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } }
+};
+export const LocationViewDemo = (args) => {
+    const [location, setLocation] = useState(args.location);
+    const handleClick = ({ latitude, longitude }) => {
+        setLocation(`${latitude.toString()},${longitude.toString()}`);
+    };
+    return (<MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>
+      <LocationView location={location} centerMapOnChange={args.centerMapOnChange} zoomLevel={args.zoomLevel} height={args.height} onClick={handleClick}/>
+    </MapsContext.Provider>);
+};
+LocationViewDemo.args = {
+    apiKey: '',
+    location: 'Boston, MA',
+    centerMapOnChange: true,
+    zoomLevel: 13,
+    height: '25rem'
+};
+LocationViewDemo.argTypes = {
+    apiKey: { control: { type: 'text' } },
+    location: { control: { type: 'text' } },
+    centerMapOnChange: { control: { type: 'boolean' } },
+    zoomLevel: { control: { type: 'number' } },
+    height: { control: { type: 'text' } }
+};
+export const LocationDisplayDemo = (args) => {
+    return (<MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>
+      <LocationDisplay value={args.value} zoomLevel={args.zoomLevel} height={args.height} variant={args.variant} displayText={args.displayText}/>
+    </MapsContext.Provider>);
+};
+LocationDisplayDemo.args = {
+    apiKey: '',
+    value: 'Boston, MA',
+    zoomLevel: 13,
+    height: '25rem',
+    variant: 'text-map',
+    displayText: 'Come visit Boston!'
+};
+LocationDisplayDemo.argTypes = {
+    apiKey: { control: { type: 'text' } },
+    value: { control: { type: 'text' } },
+    zoomLevel: { control: { type: 'number' } },
+    height: { control: { type: 'text' } },
+    variant: { options: ['text-map', 'map', 'text'], control: { type: 'select' } },
+    displayText: { control: { type: 'text' } }
+};
+//# sourceMappingURL=Location.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Location.stories.jsx","sourceRoot":"","sources":["../../../src/core/Location/Location.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  LatLng,\n  LocationDisplay,\n  LocationDisplayProps,\n  LocationInput,\n  LocationInputProps,\n  LocationView,\n  LocationViewProps,\n  MapsContext\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Location',\n  component: LocationInput\n} as Meta;\n\ninterface APIKey {\n  apiKey?: string;\n}\n\nexport const LocationDemo: Story<LocationInputProps & APIKey> = (\n  args: LocationInputProps & APIKey\n) => {\n  const [value, setValue] = useState('Boston, MA');\n  const [locationObj, setLocationObj] = useState<LatLng | string>('Boston, MA');\n\n  const handleClick = ({ latitude, longitude }: { latitude: number; longitude: number }) => {\n    setLocationObj({ latitude, longitude });\n  };\n\n  return (\n    <MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>\n      <LocationInput\n        showMap\n        defaultToCurrentLocation={args.defaultToCurrentLocation}\n        value={value}\n        label={args.label}\n        labelHidden={args.labelHidden}\n        onChange={inputValue => {\n          setValue(inputValue);\n        }}\n        location={locationObj}\n        onSelect={selectedValueObj => {\n          setValue(selectedValueObj.name);\n          if (selectedValueObj.latitude && selectedValueObj.longitude) {\n            setLocationObj({\n              latitude: selectedValueObj.latitude,\n              longitude: selectedValueObj.longitude\n            });\n          } else {\n            setLocationObj(selectedValueObj.name);\n          }\n        }}\n        onClick={handleClick}\n        centerMapOnChange={args.centerMapOnChange}\n        zoomLevel={args.zoomLevel}\n        height={args.height}\n        status={args.status}\n        required={args.required}\n        disabled={args.disabled}\n        readOnly={args.readOnly}\n      />\n    </MapsContext.Provider>\n  );\n};\n\nLocationDemo.args = {\n  apiKey: '',\n  defaultToCurrentLocation: false,\n  label: 'Pick a location',\n  labelHidden: false,\n  centerMapOnChange: true,\n  zoomLevel: 13,\n  height: '25rem',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nLocationDemo.argTypes = {\n  apiKey: { control: { type: 'text' } },\n  defaultToCurrentLocation: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  centerMapOnChange: { control: { type: 'boolean' } },\n  zoomLevel: { control: { type: 'number' } },\n  height: { 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 LocationInputDemo: Story<LocationInputProps & APIKey> = (\n  args: LocationInputProps & APIKey\n) => {\n  const [value, setValue] = useState('');\n\n  return (\n    <MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>\n      <LocationInput\n        defaultToCurrentLocation={args.defaultToCurrentLocation}\n        value={value}\n        label={args.label}\n        labelHidden={args.labelHidden}\n        onChange={inputValue => {\n          setValue(inputValue);\n        }}\n        onSelect={selectedValueObj => {\n          setValue(selectedValueObj.name);\n        }}\n        status={args.status}\n        required={args.required}\n        disabled={args.disabled}\n        readOnly={args.readOnly}\n      />\n    </MapsContext.Provider>\n  );\n};\n\nLocationInputDemo.args = {\n  apiKey: '',\n  defaultToCurrentLocation: false,\n  label: 'Pick a location',\n  labelHidden: false,\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nLocationInputDemo.argTypes = {\n  apiKey: { control: { type: 'text' } },\n  defaultToCurrentLocation: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\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 LocationViewDemo: Story<LocationViewProps & APIKey> = (\n  args: LocationViewProps & APIKey\n) => {\n  const [location, setLocation] = useState(args.location);\n\n  const handleClick = ({ latitude, longitude }: { latitude: number; longitude: number }) => {\n    setLocation(`${latitude.toString()},${longitude.toString()}`);\n  };\n\n  return (\n    <MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>\n      <LocationView\n        location={location}\n        centerMapOnChange={args.centerMapOnChange}\n        zoomLevel={args.zoomLevel}\n        height={args.height}\n        onClick={handleClick}\n      />\n    </MapsContext.Provider>\n  );\n};\n\nLocationViewDemo.args = {\n  apiKey: '',\n  location: 'Boston, MA',\n  centerMapOnChange: true,\n  zoomLevel: 13,\n  height: '25rem'\n};\n\nLocationViewDemo.argTypes = {\n  apiKey: { control: { type: 'text' } },\n  location: { control: { type: 'text' } },\n  centerMapOnChange: { control: { type: 'boolean' } },\n  zoomLevel: { control: { type: 'number' } },\n  height: { control: { type: 'text' } }\n};\n\nexport const LocationDisplayDemo: Story<LocationDisplayProps & APIKey> = (\n  args: LocationDisplayProps & APIKey\n) => {\n  return (\n    <MapsContext.Provider value={{ name: 'google', apiKey: args.apiKey }}>\n      <LocationDisplay\n        value={args.value}\n        zoomLevel={args.zoomLevel}\n        height={args.height}\n        variant={args.variant}\n        displayText={args.displayText}\n      />\n    </MapsContext.Provider>\n  );\n};\n\nLocationDisplayDemo.args = {\n  apiKey: '',\n  value: 'Boston, MA',\n  zoomLevel: 13,\n  height: '25rem',\n  variant: 'text-map',\n  displayText: 'Come visit Boston!'\n};\n\nLocationDisplayDemo.argTypes = {\n  apiKey: { control: { type: 'text' } },\n  value: { control: { type: 'text' } },\n  zoomLevel: { control: { type: 'number' } },\n  height: { control: { type: 'text' } },\n  variant: { options: ['text-map', 'map', 'text'], control: { type: 'select' } },\n  displayText: { control: { type: 'text' } }\n};\n"]}

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

@@ -0,0 +1,4 @@
+import { MenuProps } from '@pega/cosmos-react-core';
+export declare const countries: MenuProps['items'];
+export declare const cars: MenuProps['items'];
+//# sourceMappingURL=Menu.mocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Menu/Menu.mocks.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,eAAO,MAAM,SAAS,EAAE,SAAS,CAAC,OAAO,CAyGxC,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,SAAS,CAAC,OAAO,CAyEnC,CAAC"}

package/lib/core/Menu/Menu.mocks.js

@@ -0,0 +1,179 @@
+export const countries = [
+    {
+        id: '1',
+        primary: 'United States of America',
+        secondary: ['North America'],
+        visual: '🇺🇸',
+        items: [
+            {
+                id: '1-2',
+                primary: 'Maine',
+                tooltip: 'Maine, the northeasternmost U.S. state, is known for its rocky coastline, maritime history and nature areas like the granite and spruce islands of Acadia National Park. '
+            },
+            { id: '1-3', primary: 'Rhode Island' },
+            {
+                id: '1-1',
+                primary: 'Massachusetts',
+                items: [
+                    {
+                        id: 'group-1-1-b',
+                        label: 'B',
+                        items: [
+                            { id: '1-1-1', primary: 'Barnstable County' },
+                            { id: '1-1-2', primary: 'Berkshire County' },
+                            { id: '1-1-3', primary: 'Bristol County' }
+                        ]
+                    },
+                    { id: '1-1-4', primary: 'Dukes County' },
+                    { id: '1-1-5', primary: 'Essex County' },
+                    { id: '1-1-6', primary: 'Franklin County' },
+                    {
+                        id: '1-1-h',
+                        label: 'H',
+                        items: [
+                            { id: '1-1-7', primary: 'Hampden County' },
+                            { id: '1-1-8', primary: 'Hampshire County' }
+                        ]
+                    },
+                    { id: '1-1-9', primary: 'Middlesex County' },
+                    {
+                        id: '1-1-n',
+                        label: 'N',
+                        items: [
+                            { id: '1-1-10', primary: 'Nantucket County' },
+                            { id: '1-1-11', primary: 'Norfolk County' }
+                        ]
+                    },
+                    { id: '1-1-12', primary: 'Plymouth County' },
+                    { id: '1-1-13', primary: 'Suffolk County' },
+                    { id: '1-1-14', primary: 'Worcester County' }
+                ]
+            },
+            { id: '1-4', primary: 'Washington' },
+            { id: '1-5', primary: 'California' },
+            { id: '1-6', primary: 'Alabama' },
+            { id: '1-7', primary: 'Alaska' },
+            { id: '1-8', primary: 'Kentucky' },
+            { id: '1-9', primary: 'Ohio' },
+            { id: '1-10', primary: 'Minnesota' },
+            { id: '1-11', primary: 'Iowa' },
+            {
+                id: '1-12',
+                primary: 'Colorado',
+                tooltip: 'Colorado, a western U.S. state, has a diverse landscape of arid desert, Perched a mile above sea level, Denver, Colorado’s capital and largest city, features a vibrant downtown area'
+            }
+        ]
+    },
+    {
+        id: '2',
+        primary: 'Poland',
+        secondary: ['Europe'],
+        visual: '🇵🇱',
+        items: [
+            {
+                id: '2-1',
+                primary: 'Krakow'
+            }
+        ]
+    },
+    { id: '3', primary: 'England', secondary: ['Europe'], visual: '🏴󠁧󠁢󠁥󠁮󠁧󠁿' },
+    { id: '4', primary: 'France', secondary: ['Europe'], visual: '🇫🇷' },
+    { id: '5', primary: 'Germany', secondary: ['Europe'], visual: '🇩🇪' },
+    { id: '6', primary: 'Spain', secondary: ['Europe'], visual: '🇪🇸' },
+    { id: '7', primary: 'Italy', secondary: ['Europe'], visual: '🇮🇹' },
+    { id: '8', primary: 'Mexico', secondary: ['North America'], visual: '🇲🇽' },
+    { id: '9', primary: 'Brasil', secondary: ['South America'], visual: '🇧🇷' },
+    { id: '10', primary: 'Austria', secondary: ['Europe'], visual: '🇦🇹' },
+    { id: '11', primary: 'Belgium', secondary: ['Europe'], visual: '🇧🇪' },
+    { id: '12', primary: 'Chile', secondary: ['South America'], visual: '🇨🇱' },
+    { id: '13', primary: 'Hungary', secondary: ['Europe'], visual: '🇭🇺' },
+    { id: '14', primary: 'Iceland', secondary: ['Europe'], visual: '🇮🇸' },
+    { id: '15', primary: 'Sweden', secondary: ['Europe'], visual: '🇸🇪' },
+    { id: '16', primary: 'Norway', secondary: ['Europe'], visual: '🇳🇴' },
+    { id: '17', primary: 'Netherlands', secondary: ['Europe'], visual: '🇳🇱' },
+    { id: '18', primary: 'Portugal', secondary: ['Europe'], visual: '🇵🇹' },
+    { id: '19', primary: 'Canada', secondary: ['North America'], visual: '🇨🇦' },
+    { id: '20', primary: 'Czech Republic', secondary: ['Europe'], visual: '🇨🇿' },
+    { id: '21', primary: 'Argentina', secondary: ['South America'], visual: '🇦🇷' },
+    { id: '22', primary: 'Denmark', secondary: ['Europe'], visual: '🇩🇰' },
+    { id: '23', primary: 'Estonia', secondary: ['Europe'], visual: '🇪🇪' },
+    { id: '24', primary: 'Finland', secondary: ['Europe'], visual: '🇫🇮' },
+    { id: '25', primary: 'Slovenia', secondary: ['Europe'], visual: '🇸🇮' },
+    { id: '26', primary: 'Slovakia', secondary: ['Europe'], visual: '🇸🇰' },
+    { id: '27', primary: 'Romania', secondary: ['Europe'], visual: '🇷🇴' }
+];
+export const cars = [
+    {
+        id: 'dodge',
+        label: 'Dodge',
+        items: [
+            {
+                id: 'dodge charger',
+                primary: 'Charger'
+            },
+            {
+                id: 'dodge challenger',
+                primary: 'Challenger'
+            },
+            {
+                id: 'dodge coronet',
+                primary: 'Coronet'
+            }
+        ]
+    },
+    {
+        id: 'pontiac',
+        label: 'Pontiac',
+        items: [
+            {
+                id: 'gto',
+                primary: 'GTO'
+            },
+            {
+                id: 'firebird',
+                primary: 'Firebird'
+            }
+        ]
+    },
+    {
+        id: 'ford',
+        label: 'Ford',
+        items: [
+            {
+                id: 'mustang',
+                primary: 'Mustang'
+            },
+            {
+                id: 'falcon',
+                primary: 'Falcon'
+            },
+            {
+                id: 'torino',
+                primary: 'Torino'
+            }
+        ]
+    },
+    {
+        id: 'chevrolet',
+        label: 'Chevrolet',
+        items: [
+            {
+                id: 'camaro',
+                primary: 'Camaro'
+            },
+            {
+                id: 'chevelle',
+                primary: 'Chevelle'
+            }
+        ]
+    },
+    {
+        id: 'buick gran sport',
+        primary: 'Buick Gran Sport'
+    },
+    {
+        id: 'oldsmobile 442',
+        primary: 'Oldsmobile 442'
+    }
+];
+//# sourceMappingURL=Menu.mocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.mocks.js","sourceRoot":"","sources":["../../../src/core/Menu/Menu.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["// cSpell:words camaro chevelle\nimport { MenuProps } from '@pega/cosmos-react-core';\n\nexport const countries: MenuProps['items'] = [\n  {\n    id: '1',\n    primary: 'United States of America',\n    secondary: ['North America'],\n    visual: '🇺🇸',\n    items: [\n      {\n        id: '1-2',\n        primary: 'Maine',\n        tooltip:\n          'Maine, the northeasternmost U.S. state, is known for its rocky coastline, maritime history and nature areas like the granite and spruce islands of Acadia National Park. '\n      },\n      { id: '1-3', primary: 'Rhode Island' },\n      {\n        id: '1-1',\n        primary: 'Massachusetts',\n        items: [\n          {\n            id: 'group-1-1-b',\n            label: 'B',\n            items: [\n              { id: '1-1-1', primary: 'Barnstable County' },\n              { id: '1-1-2', primary: 'Berkshire County' },\n              { id: '1-1-3', primary: 'Bristol County' }\n            ]\n          },\n          { id: '1-1-4', primary: 'Dukes County' },\n          { id: '1-1-5', primary: 'Essex County' },\n          { id: '1-1-6', primary: 'Franklin County' },\n          {\n            id: '1-1-h',\n            label: 'H',\n            items: [\n              { id: '1-1-7', primary: 'Hampden County' },\n              { id: '1-1-8', primary: 'Hampshire County' }\n            ]\n          },\n          { id: '1-1-9', primary: 'Middlesex County' },\n          {\n            id: '1-1-n',\n            label: 'N',\n            items: [\n              { id: '1-1-10', primary: 'Nantucket County' },\n              { id: '1-1-11', primary: 'Norfolk County' }\n            ]\n          },\n          { id: '1-1-12', primary: 'Plymouth County' },\n          { id: '1-1-13', primary: 'Suffolk County' },\n          { id: '1-1-14', primary: 'Worcester County' }\n        ]\n      },\n      { id: '1-4', primary: 'Washington' },\n      { id: '1-5', primary: 'California' },\n      { id: '1-6', primary: 'Alabama' },\n      { id: '1-7', primary: 'Alaska' },\n      { id: '1-8', primary: 'Kentucky' },\n      { id: '1-9', primary: 'Ohio' },\n      { id: '1-10', primary: 'Minnesota' },\n      { id: '1-11', primary: 'Iowa' },\n      {\n        id: '1-12',\n        primary: 'Colorado',\n        tooltip:\n          'Colorado, a western U.S. state, has a diverse landscape of arid desert, Perched a mile above sea level, Denver, Colorado’s capital and largest city, features a vibrant downtown area'\n      }\n    ]\n  },\n  {\n    id: '2',\n    primary: 'Poland',\n    secondary: ['Europe'],\n    visual: '🇵🇱',\n    items: [\n      {\n        id: '2-1',\n        primary: 'Krakow'\n      }\n    ]\n  },\n  { id: '3', primary: 'England', secondary: ['Europe'], visual: '🏴󠁧󠁢󠁥󠁮󠁧󠁿' },\n  { id: '4', primary: 'France', secondary: ['Europe'], visual: '🇫🇷' },\n  { id: '5', primary: 'Germany', secondary: ['Europe'], visual: '🇩🇪' },\n  { id: '6', primary: 'Spain', secondary: ['Europe'], visual: '🇪🇸' },\n  { id: '7', primary: 'Italy', secondary: ['Europe'], visual: '🇮🇹' },\n  { id: '8', primary: 'Mexico', secondary: ['North America'], visual: '🇲🇽' },\n  { id: '9', primary: 'Brasil', secondary: ['South America'], visual: '🇧🇷' },\n  { id: '10', primary: 'Austria', secondary: ['Europe'], visual: '🇦🇹' },\n  { id: '11', primary: 'Belgium', secondary: ['Europe'], visual: '🇧🇪' },\n  { id: '12', primary: 'Chile', secondary: ['South America'], visual: '🇨🇱' },\n  { id: '13', primary: 'Hungary', secondary: ['Europe'], visual: '🇭🇺' },\n  { id: '14', primary: 'Iceland', secondary: ['Europe'], visual: '🇮🇸' },\n  { id: '15', primary: 'Sweden', secondary: ['Europe'], visual: '🇸🇪' },\n  { id: '16', primary: 'Norway', secondary: ['Europe'], visual: '🇳🇴' },\n  { id: '17', primary: 'Netherlands', secondary: ['Europe'], visual: '🇳🇱' },\n  { id: '18', primary: 'Portugal', secondary: ['Europe'], visual: '🇵🇹' },\n  { id: '19', primary: 'Canada', secondary: ['North America'], visual: '🇨🇦' },\n  { id: '20', primary: 'Czech Republic', secondary: ['Europe'], visual: '🇨🇿' },\n  { id: '21', primary: 'Argentina', secondary: ['South America'], visual: '🇦🇷' },\n  { id: '22', primary: 'Denmark', secondary: ['Europe'], visual: '🇩🇰' },\n  { id: '23', primary: 'Estonia', secondary: ['Europe'], visual: '🇪🇪' },\n  { id: '24', primary: 'Finland', secondary: ['Europe'], visual: '🇫🇮' },\n  { id: '25', primary: 'Slovenia', secondary: ['Europe'], visual: '🇸🇮' },\n  { id: '26', primary: 'Slovakia', secondary: ['Europe'], visual: '🇸🇰' },\n  { id: '27', primary: 'Romania', secondary: ['Europe'], visual: '🇷🇴' }\n];\n\nexport const cars: MenuProps['items'] = [\n  {\n    id: 'dodge',\n    label: 'Dodge',\n    items: [\n      {\n        id: 'dodge charger',\n        primary: 'Charger'\n      },\n      {\n        id: 'dodge challenger',\n        primary: 'Challenger'\n      },\n      {\n        id: 'dodge coronet',\n        primary: 'Coronet'\n      }\n    ]\n  },\n  {\n    id: 'pontiac',\n    label: 'Pontiac',\n    items: [\n      {\n        id: 'gto',\n        primary: 'GTO'\n      },\n      {\n        id: 'firebird',\n        primary: 'Firebird'\n      }\n    ]\n  },\n  {\n    id: 'ford',\n    label: 'Ford',\n    items: [\n      {\n        id: 'mustang',\n        primary: 'Mustang'\n      },\n      {\n        id: 'falcon',\n        primary: 'Falcon'\n      },\n      {\n        id: 'torino',\n        primary: 'Torino'\n      }\n    ]\n  },\n  {\n    id: 'chevrolet',\n    label: 'Chevrolet',\n    items: [\n      {\n        id: 'camaro',\n        primary: 'Camaro'\n      },\n      {\n        id: 'chevelle',\n        primary: 'Chevelle'\n      }\n    ]\n  },\n  {\n    id: 'buick gran sport',\n    primary: 'Buick Gran Sport'\n  },\n  {\n    id: 'oldsmobile 442',\n    primary: 'Oldsmobile 442'\n  }\n];\n"]}

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

@@ -0,0 +1,17 @@
+import { Meta, Story } from '@storybook/react';
+import { MenuProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface MenuStoryProps extends MenuProps {
+    showItemSecondary?: boolean;
+    showItemVisual?: boolean;
+    showItemCount?: boolean;
+    parentSelection?: boolean;
+    filterPattern?: 'contains' | 'starts with';
+    infiniteScroll?: boolean;
+    noItems?: boolean;
+    loadMore?: (id?: string) => void;
+}
+export declare const MenuDemo: Story<MenuStoryProps>;
+export declare const FlatMenuDemo: Story<MenuStoryProps>;
+//# sourceMappingURL=Menu.stories.d.ts.map

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

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

package/lib/core/Menu/Menu.stories.jsx

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