@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.0

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

@@ -1 +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"]}
+{"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\ninterface LocationInputStoryProps extends LocationInputProps {\n  showAdditionalInfo?: boolean;\n}\n\nexport const LocationInputDemo: Story<LocationInputStoryProps & APIKey> = (\n  args: LocationInputStoryProps & 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        additionalInfo={\n          args.showAdditionalInfo\n            ? {\n                heading: 'Additional Info',\n                content: 'Please enter your location'\n              }\n            : undefined\n        }\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  showAdditionalInfo: true\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  showAdditionalInfo: { 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/jsx/core/Location/locationTestUtils.d.ts

@@ -0,0 +1,3 @@
+export declare const setUpMapsAPI: () => void;
+export declare const tearDownMapsAPI: () => void;
+//# sourceMappingURL=locationTestUtils.d.ts.map

package/jsx/core/Location/locationTestUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"locationTestUtils.d.ts","sourceRoot":"","sources":["../../../src/core/Location/locationTestUtils.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,YAAY,YAiBxB,CAAC;AAEF,eAAO,MAAM,eAAe,YAE3B,CAAC"}

package/jsx/core/Location/locationTestUtils.js

@@ -0,0 +1,29 @@
+class MockMap {
+    constructor(element) {
+        const newEl = document.createElement('div');
+        newEl.setAttribute('role', 'map');
+        element.appendChild(newEl);
+    }
+}
+export const setUpMapsAPI = () => {
+    global.google = {
+        maps: {
+            places: {
+                Autocomplete: class Autocomplete {
+                }
+            },
+            event: {
+                clearInstanceListeners: () => { }
+            },
+            LatLng: () => { },
+            Map: MockMap
+        }
+    };
+    global.navigator.permissions = {
+        query: () => Promise.resolve({ state: 'granted' })
+    };
+};
+export const tearDownMapsAPI = () => {
+    global.google = undefined;
+};
+//# sourceMappingURL=locationTestUtils.js.map

package/jsx/core/Location/locationTestUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"locationTestUtils.js","sourceRoot":"","sources":["../../../src/core/Location/locationTestUtils.ts"],"names":[],"mappings":"AACA,MAAM,OAAO;IACX,YAAY,OAAoB;QAC9B,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAClC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;CACF;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,CAAC,MAAM,GAAG;QACd,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,YAAY,EAAE,MAAM,YAAY;iBAAG;aACpC;YACD,KAAK,EAAE;gBACL,sBAAsB,EAAE,GAAG,EAAE,GAAE,CAAC;aACjC;YACD,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;YAChB,GAAG,EAAE,OAAO;SACb;KAC0B,CAAC;IAE7B,MAAM,CAAC,SAAS,CAAC,WAA2B,GAAG;QAC9C,KAAK,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,SAAS,EAAsB,CAAC;KACvE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,CAAC,MAAM,GAAG,SAAqC,CAAC;AACxD,CAAC,CAAC","sourcesContent":["/* eslint-disable max-classes-per-file */\nclass MockMap {\n  constructor(element: HTMLElement) {\n    const newEl = document.createElement('div');\n    newEl.setAttribute('role', 'map');\n    element.appendChild(newEl);\n  }\n}\n\nexport const setUpMapsAPI = () => {\n  global.google = {\n    maps: {\n      places: {\n        Autocomplete: class Autocomplete {}\n      },\n      event: {\n        clearInstanceListeners: () => {}\n      },\n      LatLng: () => {},\n      Map: MockMap\n    }\n  } as unknown as typeof google;\n\n  (global.navigator.permissions as Permissions) = {\n    query: () => Promise.resolve({ state: 'granted' } as PermissionStatus)\n  };\n};\n\nexport const tearDownMapsAPI = () => {\n  global.google = undefined as unknown as typeof google;\n};\n"]}

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

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

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

@@ -1,5 +1,5 @@
-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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Count, Flex, Menu, menuHelpers, Popover, SearchInput, createUID, useElement, useOuterEvent, useToaster } from '@pega/cosmos-react-core';
 import { cars, countries } from './Menu.mocks';
 import { StyledFlag } from './Menu.styles';
 export default {
@@ -34,9 +34,10 @@ export default {
 };
 export const MenuDemo = (args) => {
     const menuID = createUID();
+    const menuListID = `${menuID}--list`;
     const data = args.useFlatData ? cars : countries;
     const searchEleRef = useRef(null);
-    const { push } = useContext(ToasterContext);
+    const { push } = useToaster();
     const [isOpen, setIsOpen] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [hasMore, setHasMore] = useState(true);
@@ -91,7 +92,7 @@ export const MenuDemo = (args) => {
                 });
             }, 2000);
         }
-    }, [items, isLoading]);
+    }, [data]);
     useOuterEvent('mousedown', [popoverEl, buttonEl], e => {
         if (args.variant === 'flyout') {
             const path = e.composedPath();
@@ -123,7 +124,7 @@ export const MenuDemo = (args) => {
       </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 => {
+        <Menu {...args} id={menuID} listId={menuListID} items={args.noItems ? [] : itemsToRender} accent={search ? searchRegex : undefined} mode={args.variant === 'drill-down' ? args.mode : 'action'} role='listbox' loading={isLoading} emptyText={args.emptyText} variant={args.variant} loadMore={args.infiniteScroll && hasMore ? loadMore : undefined} focusControlEl={searchEleRef.current || undefined} onItemClick={id => {
             if (args.mode === 'single-select' || args.mode === 'multi-select') {
                 setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));
             }
@@ -137,7 +138,7 @@ export const MenuDemo = (args) => {
                 }
                 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' }}>
+        }} header={args.variant === 'drill-down' && (<SearchInput ref={searchEleRef} onSearchChange={setSearch} value={search} role='searchbox' searchInputAriaLabel='Start typing to search.' aria-controls={menuListID}/>)} footer={args.variant === 'flyout' ? (<SearchInput ref={searchEleRef} onSearchChange={setSearch} value={search} role='searchbox' 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={() => {

package/jsx/core/Menu/Menu.stories.jsx.map

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

package/jsx/core/MenuButton/MenuButton.stories.d.ts

@@ -2,12 +2,12 @@ import { Meta, Story } from '@storybook/react';
 import { MenuButtonProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-interface MenuButtonStoryProps extends MenuButtonProps {
-    showIcon: boolean;
-    showItemVisual: boolean;
-    showItemSecondary: boolean;
-    showItemCount: boolean;
-}
+declare type MenuButtonStoryProps = MenuButtonProps & {
+    showIcon?: boolean;
+    showItemVisual?: boolean;
+    showItemSecondary?: boolean;
+    showItemCount?: boolean;
+};
 export declare const MenuButtonAction: Story<MenuButtonStoryProps>;
 export declare const MenuButtonSingleSelect: Story<MenuButtonStoryProps>;
 export declare const MenuButtonMultiSelect: Story<MenuButtonStoryProps>;

package/jsx/core/MenuButton/MenuButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MenuButton/MenuButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAKL,eAAe,EAIhB,MAAM,yBAAyB,CAAC;;AAEjC,wBAuBU;AAEV,UAAU,oBAAqB,SAAQ,eAAe;IACpD,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CA0CxD,CAAC;AAMF,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,oBAAoB,CAmD9D,CAAC;AAMF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,oBAAoB,CAsE7D,CAAC;AAMF,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,oBAAoB,CA8C/D,CAAC"}
+{"version":3,"file":"MenuButton.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MenuButton/MenuButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAKL,eAAe,EAIhB,MAAM,yBAAyB,CAAC;;AAEjC,wBAuBU;AAEV,aAAK,oBAAoB,GAAG,eAAe,GAAG;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CA0CxD,CAAC;AAMF,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,oBAAoB,CAmD9D,CAAC;AAMF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,oBAAoB,CAsE7D,CAAC;AAMF,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,oBAAoB,CA8C/D,CAAC"}

package/jsx/core/MenuButton/MenuButton.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.stories.jsx","sourceRoot":"","sources":["../../../src/core/MenuButton/MenuButton.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, useEffect } from 'react';\n\nimport {\n  Avatar,\n  Button,\n  Flex,\n  MenuButton,\n  MenuButtonProps,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/MenuButton',\n  component: MenuButton,\n  args: {\n    variant: 'secondary',\n    showIcon: true,\n    iconOnly: false,\n    showItemVisual: true,\n    showItemSecondary: true,\n    showItemCount: true\n  },\n  argTypes: {\n    text: { control: { type: 'text' } },\n    variant: {\n      options: ['primary', 'secondary', 'simple', 'link', 'text'],\n      control: { type: 'select' }\n    },\n    showIcon: { control: { type: 'boolean' } },\n    iconOnly: { control: { type: 'boolean' } },\n    showItemVisual: { control: { type: 'boolean' } },\n    showItemSecondary: { control: { type: 'boolean' } },\n    showItemCount: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface MenuButtonStoryProps extends MenuButtonProps {\n  showIcon: boolean;\n  showItemVisual: boolean;\n  showItemSecondary: boolean;\n  showItemCount: boolean;\n}\n\nexport const MenuButtonAction: Story<MenuButtonStoryProps> = (args: MenuButtonStoryProps) => {\n  const [items, setItems] = useState<MenuProps['items']>(() =>\n    Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i}`,\n        primary: `Item ${i + 1}`,\n        secondary: ['Meta A', 'Meta B', 'Meta C']\n      };\n    })\n  );\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, item => {\n      return {\n        ...item,\n        visual: args.showItemVisual ? <Avatar name={item.primary} /> : undefined,\n        secondary: args.showItemSecondary ? item.secondary : undefined\n      };\n    });\n  }, [items, args.showItemVisual, args.showItemSecondary]);\n\n  useEffect(() => {\n    setItems(cur => {\n      return menuHelpers.mapTree(cur, item => {\n        return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };\n      });\n    });\n  }, [args.showItemCount]);\n\n  return (\n    <MenuButton\n      text={args.text}\n      variant={args.variant}\n      icon={args.showIcon ? 'user-list-solid' : undefined}\n      iconOnly={args.iconOnly}\n      menu={{\n        mode: 'action',\n        items: itemsToRender,\n        onItemClick: () => {}\n      }}\n    />\n  );\n};\n\nMenuButtonAction.args = {\n  text: 'Actions'\n};\n\nexport const MenuButtonSingleSelect: Story<MenuButtonStoryProps> = (args: MenuButtonStoryProps) => {\n  const [items, setItems] = useState<MenuProps['items']>(() =>\n    Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i}`,\n        primary: `Item ${i + 1}`,\n        secondary: ['Meta A', 'Meta B', 'Meta C'],\n        selected: false\n      };\n    })\n  );\n  const handleMenuItemClick = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'single-select'));\n  };\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, item => {\n      return {\n        ...item,\n        visual: args.showItemVisual ? <Avatar name={item.primary} /> : undefined,\n        secondary: args.showItemSecondary ? item.secondary : undefined\n      };\n    });\n  }, [items, args.showItemVisual, args.showItemSecondary]);\n\n  const buttonText = useMemo(() => {\n    const selected = menuHelpers.getSelected(items)[0];\n    return selected ? selected.primary : args.text;\n  }, [items]);\n\n  useEffect(() => {\n    setItems(cur => {\n      return menuHelpers.mapTree(cur, item => {\n        return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };\n      });\n    });\n  }, [args.showItemCount]);\n\n  return (\n    <MenuButton\n      text={buttonText}\n      variant={args.variant}\n      icon={args.showIcon ? 'user-list-solid' : undefined}\n      iconOnly={args.iconOnly}\n      menu={{\n        mode: 'single-select',\n        items: itemsToRender,\n        onItemClick: handleMenuItemClick\n      }}\n    />\n  );\n};\n\nMenuButtonSingleSelect.args = {\n  text: 'Select an item'\n};\n\nexport const MenuButtonMultiSelect: Story<MenuButtonStoryProps> = (args: MenuButtonStoryProps) => {\n  const [items, setItems] = useState<MenuProps['items']>(() =>\n    Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i}`,\n        primary: `Item ${i + 1}`,\n        secondary: ['Meta A', 'Meta B', 'Meta C'],\n        selected: false\n      };\n    })\n  );\n\n  const handleMenuItemClick = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, item => {\n      return {\n        ...item,\n        visual: args.showItemVisual ? <Avatar name={item.primary} /> : undefined,\n        secondary: args.showItemSecondary ? item.secondary : undefined\n      };\n    });\n  }, [items, args.showItemVisual, args.showItemSecondary]);\n\n  const selectionCount = useMemo(() => menuHelpers.getSelected(items).length, [items]);\n\n  useEffect(() => {\n    setItems(cur => {\n      return menuHelpers.mapTree(cur, item => {\n        return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };\n      });\n    });\n  }, [args.showItemCount]);\n\n  return (\n    <MenuButton\n      text={args.text}\n      variant={args.variant}\n      icon={args.showIcon ? 'user-list-solid' : undefined}\n      iconOnly={args.iconOnly}\n      count={selectionCount}\n      menu={{\n        mode: 'multi-select',\n        items: itemsToRender,\n        onItemClick: handleMenuItemClick,\n        footer: (\n          <Flex container={{ justify: 'center' }}>\n            <Button\n              variant='link'\n              disabled={selectionCount <= 0}\n              onClick={() => {\n                setItems(cur => {\n                  return menuHelpers.mapTree(cur, item => {\n                    return {\n                      ...item,\n                      selected: false\n                    };\n                  });\n                });\n              }}\n            >\n              Clear\n            </Button>\n          </Flex>\n        )\n      }}\n    />\n  );\n};\n\nMenuButtonMultiSelect.args = {\n  text: 'Select items'\n};\n\nexport const MenuButtonDisabledItems: Story<MenuButtonStoryProps> = (\n  args: MenuButtonStoryProps\n) => {\n  const [items, setItems] = useState<MenuProps['items']>(() =>\n    Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i}`,\n        primary: `Item ${i + 1}`,\n        secondary: ['Meta A', 'Meta B', 'Meta C'],\n        selected: false\n      };\n    })\n  );\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, (item, index) => {\n      return {\n        ...item,\n        visual: args.showItemVisual ? <Avatar name={item.primary} /> : undefined,\n        secondary: args.showItemSecondary ? item.secondary : undefined,\n        disabled: (index + 1) % 2 === 0\n      };\n    });\n  }, [items, args.showItemVisual, args.showItemSecondary]);\n\n  useEffect(() => {\n    setItems(cur => {\n      return menuHelpers.mapTree(cur, item => {\n        return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };\n      });\n    });\n  }, [args.showItemCount]);\n\n  return (\n    <MenuButton\n      text={args.text}\n      variant={args.variant}\n      icon={args.showIcon ? 'user-list-solid' : undefined}\n      iconOnly={args.iconOnly}\n      menu={{\n        mode: 'action',\n        items: itemsToRender,\n        onItemClick: () => {}\n      }}\n    />\n  );\n};\n\nMenuButtonDisabledItems.args = {\n  text: 'Actions'\n};\n"]}
+{"version":3,"file":"MenuButton.stories.jsx","sourceRoot":"","sources":["../../../src/core/MenuButton/MenuButton.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, useEffect } from 'react';\n\nimport {\n  Avatar,\n  Button,\n  Flex,\n  MenuButton,\n  MenuButtonProps,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/MenuButton',\n  component: MenuButton,\n  args: {\n    variant: 'secondary',\n    showIcon: true,\n    iconOnly: false,\n    showItemVisual: true,\n    showItemSecondary: true,\n    showItemCount: true\n  },\n  argTypes: {\n    text: { control: { type: 'text' } },\n    variant: {\n      options: ['primary', 'secondary', 'simple', 'link', 'text'],\n      control: { type: 'select' }\n    },\n    showIcon: { control: { type: 'boolean' } },\n    iconOnly: { control: { type: 'boolean' } },\n    showItemVisual: { control: { type: 'boolean' } },\n    showItemSecondary: { control: { type: 'boolean' } },\n    showItemCount: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ntype MenuButtonStoryProps = MenuButtonProps & {\n  showIcon?: boolean;\n  showItemVisual?: boolean;\n  showItemSecondary?: boolean;\n  showItemCount?: boolean;\n};\n\nexport const MenuButtonAction: Story<MenuButtonStoryProps> = (args: MenuButtonStoryProps) => {\n  const [items, setItems] = useState<MenuProps['items']>(() =>\n    Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i}`,\n        primary: `Item ${i + 1}`,\n        secondary: ['Meta A', 'Meta B', 'Meta C']\n      };\n    })\n  );\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, item => {\n      return {\n        ...item,\n        visual: args.showItemVisual ? <Avatar name={item.primary} /> : undefined,\n        secondary: args.showItemSecondary ? item.secondary : undefined\n      };\n    });\n  }, [items, args.showItemVisual, args.showItemSecondary]);\n\n  useEffect(() => {\n    setItems(cur => {\n      return menuHelpers.mapTree(cur, item => {\n        return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };\n      });\n    });\n  }, [args.showItemCount]);\n\n  return (\n    <MenuButton\n      text={args.text}\n      variant={args.variant}\n      icon={args.showIcon ? 'user-list-solid' : undefined}\n      iconOnly={args.iconOnly}\n      menu={{\n        mode: 'action',\n        items: itemsToRender,\n        onItemClick: () => {}\n      }}\n    />\n  );\n};\n\nMenuButtonAction.args = {\n  text: 'Actions'\n};\n\nexport const MenuButtonSingleSelect: Story<MenuButtonStoryProps> = (args: MenuButtonStoryProps) => {\n  const [items, setItems] = useState<MenuProps['items']>(() =>\n    Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i}`,\n        primary: `Item ${i + 1}`,\n        secondary: ['Meta A', 'Meta B', 'Meta C'],\n        selected: false\n      };\n    })\n  );\n  const handleMenuItemClick = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'single-select'));\n  };\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, item => {\n      return {\n        ...item,\n        visual: args.showItemVisual ? <Avatar name={item.primary} /> : undefined,\n        secondary: args.showItemSecondary ? item.secondary : undefined\n      };\n    });\n  }, [items, args.showItemVisual, args.showItemSecondary]);\n\n  const buttonText = useMemo(() => {\n    const selected = menuHelpers.getSelected(items)[0];\n    return selected ? selected.primary : args.text;\n  }, [items]);\n\n  useEffect(() => {\n    setItems(cur => {\n      return menuHelpers.mapTree(cur, item => {\n        return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };\n      });\n    });\n  }, [args.showItemCount]);\n\n  return (\n    <MenuButton\n      text={buttonText}\n      variant={args.variant}\n      icon={args.showIcon ? 'user-list-solid' : undefined}\n      iconOnly={args.iconOnly}\n      menu={{\n        mode: 'single-select',\n        items: itemsToRender,\n        onItemClick: handleMenuItemClick\n      }}\n    />\n  );\n};\n\nMenuButtonSingleSelect.args = {\n  text: 'Select an item'\n};\n\nexport const MenuButtonMultiSelect: Story<MenuButtonStoryProps> = (args: MenuButtonStoryProps) => {\n  const [items, setItems] = useState<MenuProps['items']>(() =>\n    Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i}`,\n        primary: `Item ${i + 1}`,\n        secondary: ['Meta A', 'Meta B', 'Meta C'],\n        selected: false\n      };\n    })\n  );\n\n  const handleMenuItemClick = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, item => {\n      return {\n        ...item,\n        visual: args.showItemVisual ? <Avatar name={item.primary} /> : undefined,\n        secondary: args.showItemSecondary ? item.secondary : undefined\n      };\n    });\n  }, [items, args.showItemVisual, args.showItemSecondary]);\n\n  const selectionCount = useMemo(() => menuHelpers.getSelected(items).length, [items]);\n\n  useEffect(() => {\n    setItems(cur => {\n      return menuHelpers.mapTree(cur, item => {\n        return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };\n      });\n    });\n  }, [args.showItemCount]);\n\n  return (\n    <MenuButton\n      text={args.text}\n      variant={args.variant}\n      icon={args.showIcon ? 'user-list-solid' : undefined}\n      iconOnly={args.iconOnly}\n      count={selectionCount}\n      menu={{\n        mode: 'multi-select',\n        items: itemsToRender,\n        onItemClick: handleMenuItemClick,\n        footer: (\n          <Flex container={{ justify: 'center' }}>\n            <Button\n              variant='link'\n              disabled={selectionCount <= 0}\n              onClick={() => {\n                setItems(cur => {\n                  return menuHelpers.mapTree(cur, item => {\n                    return {\n                      ...item,\n                      selected: false\n                    };\n                  });\n                });\n              }}\n            >\n              Clear\n            </Button>\n          </Flex>\n        )\n      }}\n    />\n  );\n};\n\nMenuButtonMultiSelect.args = {\n  text: 'Select items'\n};\n\nexport const MenuButtonDisabledItems: Story<MenuButtonStoryProps> = (\n  args: MenuButtonStoryProps\n) => {\n  const [items, setItems] = useState<MenuProps['items']>(() =>\n    Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i}`,\n        primary: `Item ${i + 1}`,\n        secondary: ['Meta A', 'Meta B', 'Meta C'],\n        selected: false\n      };\n    })\n  );\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, (item, index) => {\n      return {\n        ...item,\n        visual: args.showItemVisual ? <Avatar name={item.primary} /> : undefined,\n        secondary: args.showItemSecondary ? item.secondary : undefined,\n        disabled: (index + 1) % 2 === 0\n      };\n    });\n  }, [items, args.showItemVisual, args.showItemSecondary]);\n\n  useEffect(() => {\n    setItems(cur => {\n      return menuHelpers.mapTree(cur, item => {\n        return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };\n      });\n    });\n  }, [args.showItemCount]);\n\n  return (\n    <MenuButton\n      text={args.text}\n      variant={args.variant}\n      icon={args.showIcon ? 'user-list-solid' : undefined}\n      iconOnly={args.iconOnly}\n      menu={{\n        mode: 'action',\n        items: itemsToRender,\n        onItemClick: () => {}\n      }}\n    />\n  );\n};\n\nMenuButtonDisabledItems.args = {\n  text: 'Actions'\n};\n"]}

package/jsx/core/Modal/Modal.stories.d.ts

@@ -3,11 +3,25 @@ import { ModalProps } from '@pega/cosmos-react-core';
 import { ContentTypes } from './Modal.mocks';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const ModalDemo: Story<ModalProps>;
-export declare const ModalUpdates: Story<ModalProps>;
-export declare const AlertModal: Story<ModalProps>;
-export declare const ProgressState: Story<ModalProps>;
-export declare const MinimizableModal: Story<ModalProps>;
+interface ModalDemoProps {
+    autoWidth: ModalProps['autoWidth'];
+    center: ModalProps['center'];
+    stretch: ModalProps['stretch'];
+    onDismiss?: (id: string) => void;
+    onMinimize?: (id: string) => void;
+    onActivate?: (id: string) => void;
+    onRequestDismiss?: () => boolean;
+    onRequestMinimize?: () => boolean;
+    onRequestActivate?: () => boolean;
+}
+interface AlertModalDemoProps extends ModalDemoProps {
+    onKeyDown?: (e: KeyboardEvent) => void;
+}
+export declare const ModalDemo: Story<ModalDemoProps>;
+export declare const ModalUpdates: Story<ModalDemoProps>;
+export declare const AlertModal: Story<AlertModalDemoProps>;
+export declare const ProgressState: Story;
+export declare const MinimizableModal: Story<ModalDemoProps>;
 export declare const DockedModal: Story;
 interface AutoWidthModalContentProps {
     autoWidth: boolean;

package/jsx/core/Modal/Modal.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAY/C,OAAO,EAOL,UAAU,EAIX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAC;;AAEzD,wBAgBU;AAEV,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,UAAU,CA6BvC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,UAAU,CAgE1C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,UAAU,CA4FxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,UAAU,CA2F3C,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,UAAU,CAgC9C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA+BzB,CAAC;AAQF,UAAU,0BAA0B;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,YAAY,CAAC;IACtB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CA8DnE,CAAC"}
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAML,UAAU,EAMX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAC;;AAEzD,wBA4BU;AAEV,UAAU,cAAc;IACtB,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7B,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC;CACnC;AAED,UAAU,mBAAoB,SAAQ,cAAc;IAClD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CA6B3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CA+D9C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,mBAAmB,CA0GjD,CAAC;AAUF,eAAO,MAAM,aAAa,EAAE,KA0F3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAyClD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA+BzB,CAAC;AAQF,UAAU,0BAA0B;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,YAAY,CAAC;IACtB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CA6DnE,CAAC"}

package/jsx/core/Modal/Modal.stories.jsx

@@ -1,5 +1,6 @@
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Flex, Input, Modal, ModalManagerContext, Text, ToasterContext, cap } from '@pega/cosmos-react-core';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button, Flex, Input, Modal, Text, useModalManager, useModalContext, useToaster, cap } from '@pega/cosmos-react-core';
 import { getContent } from './Modal.mocks';
 export default {
     title: 'Core/Modal',
@@ -10,12 +11,24 @@ export default {
     args: {
         autoWidth: false,
         stretch: false,
-        center: false
+        center: false,
+        onDismiss: action('Clicked dismiss button'),
+        onMinimize: action('Clicked minimize button'),
+        onActivate: action('Activates minimized modal'),
+        onRequestDismiss: action('onRequestDismiss called'),
+        onRequestMinimize: action('onRequestMinimize called'),
+        onRequestActivate: action('onRequestActivate called')
     },
     argTypes: {
         autoWidth: { control: { type: 'boolean' } },
         stretch: { control: { type: 'boolean' } },
-        center: { control: { type: 'boolean' } }
+        center: { control: { type: 'boolean' } },
+        onDismiss: { table: { disable: true } },
+        onMinimize: { table: { disable: true } },
+        onActivate: { table: { disable: true } },
+        onRequestDismiss: { table: { disable: true } },
+        onRequestMinimize: { table: { disable: true } },
+        onRequestActivate: { table: { disable: true } }
     }
 };
 export const ModalDemo = (args) => {
@@ -25,7 +38,7 @@ export const ModalDemo = (args) => {
       </Modal>);
     };
     const ModalButton = () => {
-        const { create } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         return (<Button onClick={() => {
                 create(MyModal);
             }}>
@@ -36,8 +49,7 @@ export const ModalDemo = (args) => {
 };
 export const ModalUpdates = (args) => {
     const MyModal = props => {
-        const { ModalContext } = useContext(ModalManagerContext);
-        const { update } = useContext(ModalContext);
+        const { update } = useModalContext();
         const actions = (<>
         <Button variant='primary' disabled={props.disableButton} onClick={() => {
                 update({
@@ -52,7 +64,7 @@ export const ModalUpdates = (args) => {
       </Modal>);
     };
     const ModalButton = () => {
-        const { create } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         const modalMethods = useRef();
         const openModal = () => {
             modalMethods.current = create(MyModal, {
@@ -74,8 +86,7 @@ export const ModalUpdates = (args) => {
 };
 export const AlertModal = (args) => {
     const MyAlert = (props) => {
-        const { ModalContext } = useContext(ModalManagerContext);
-        const { dismiss } = useContext(ModalContext);
+        const { dismiss } = useModalContext();
         const actions = useMemo(() => {
             return (<>
           <Button onClick={dismiss}>No</Button>
@@ -93,8 +104,8 @@ export const AlertModal = (args) => {
     };
     const MyModal = () => {
         const [name, setName] = useState('');
-        const { ModalContext, create } = useContext(ModalManagerContext);
-        const { dismiss } = useContext(ModalContext);
+        const { create } = useModalManager();
+        const { dismiss } = useModalContext();
         const actions = useMemo(() => {
             return (<>
           <Button onClick={() => {
@@ -115,24 +126,36 @@ export const AlertModal = (args) => {
         const onNameChange = (e) => {
             setName(e.target.value);
         };
-        return (<Modal actions={actions} heading='Close the Modal without saving any data to invoke the alert' autoWidth={args.autoWidth} center={args.center} stretch={args.stretch}>
-        <Input label='Name' name='name' onChange={onNameChange} value={name} required/>
+        return (<Modal actions={actions} heading='Close the Modal without saving any data to invoke the alert' autoWidth={args.autoWidth} center={args.center} stretch={args.stretch} onRequestDismiss={() => {
+                if (name !== '') {
+                    create(MyAlert, { closeInitialModal: dismiss }, { alert: true });
+                    return false;
+                }
+            }}>
+        <Input label='Name' name='name' onChange={onNameChange} onKeyDown={args.onKeyDown} value={name} required/>
       </Modal>);
     };
     const ModalButton = () => {
-        const { create } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         return (<Button onClick={() => {
-                create(MyModal);
+                create(MyModal, undefined, {
+                    onDismiss: args.onDismiss
+                });
             }}>
         Open Modal
       </Button>);
     };
     return <ModalButton />;
 };
+AlertModal.args = {
+    onKeyDown: action("Called input's onKeyDown")
+};
+AlertModal.argTypes = {
+    onKeyDown: { table: { disable: true } }
+};
 export const ProgressState = () => {
     const LoadingStateModal = () => {
-        const { ModalContext } = useContext(ModalManagerContext);
-        const { dismiss } = useContext(ModalContext);
+        const { dismiss } = useModalContext();
         const [transientState, setTransientState] = useState('loading');
         const actions = transientState === 'loading' ? null : (<>
           <Button disabled={!!transientState} onClick={() => {
@@ -177,7 +200,7 @@ export const ProgressState = () => {
       </Modal>);
     };
     const ModalButton = () => {
-        const { create } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         return (<Button onClick={() => {
                 create(LoadingStateModal);
             }}>
@@ -189,15 +212,21 @@ export const ProgressState = () => {
 export const MinimizableModal = (args) => {
     const [count, setCount] = useState(1);
     const MyModal = () => {
-        return (<Modal heading={`Modal #${count}`} autoWidth={args.autoWidth} center={args.center} stretch={args.stretch}>
+        return (<Modal heading={`Modal #${count}`} autoWidth={args.autoWidth} center={args.center} stretch={args.stretch} onRequestDismiss={args.onRequestDismiss} onRequestMinimize={args.onRequestMinimize} onRequestActivate={args.onRequestActivate}>
         <Text>This Modal can be minimized by clicking the minimize button above.</Text>
       </Modal>);
     };
     const ModalButton = () => {
-        const { create } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         return (<Button onClick={() => {
                 setCount(count + 1);
-                create(MyModal, undefined, { minimizable: true });
+                create(MyModal, undefined, {
+                    minimizable: true,
+                    id: `Modal #${count}`,
+                    onDismiss: args.onDismiss,
+                    onMinimize: args.onMinimize,
+                    onActivate: args.onActivate
+                });
             }}>
         Open Modal
       </Button>);
@@ -212,7 +241,7 @@ export const DockedModal = () => {
       </Modal>);
     };
     const ModalButton = () => {
-        const { create } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         return (<Button onClick={() => {
                 setCount(count + 1);
                 create(MyModal, undefined, {
@@ -232,10 +261,9 @@ DockedModal.argTypes = {
     center: { table: { disable: true } }
 };
 export const AutoWidthModalContent = (args) => {
-    const { push } = useContext(ToasterContext);
+    const { push } = useToaster();
     const MyModal = ({ content }) => {
-        const { ModalContext } = useContext(ModalManagerContext);
-        const { dismiss } = useContext(ModalContext);
+        const { dismiss } = useModalContext();
         return (<Modal heading={`Modal ${args.autoWidth ? 'with' : 'without'} autoWidth`} autoWidth={args.autoWidth} actions={args.content.includes('form') || args.content === 'random' ? (<>
               <Button name='Cancel' variant='secondary' onClick={() => {
                     dismiss();
@@ -254,7 +282,7 @@ export const AutoWidthModalContent = (args) => {
       </Modal>);
     };
     const ModalButton = () => {
-        const { create } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         return (<Button onClick={() => {
                 create(MyModal, {
                     content: getContent(args.content, args.formColumnWidthFixed)