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

package/jsx/core/Input/Input.stories.jsx

@@ -1,10 +1,16 @@
+import { useEffect, useRef, useState } from 'react';
 import { Configuration, Input } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Input',
     component: Input
 };
 export const InputDemo = (args) => {
-    return (<Input id='input-demo' type={args.type} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} actions={args.showAction
+    return (<Input additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined} id='input-demo' type={args.type} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} actions={args.showAction
             ? [
                 {
                     id: 'config',
@@ -17,6 +23,7 @@ export const InputDemo = (args) => {
 InputDemo.args = {
     type: 'text',
     showAction: false,
+    showAdditionalInfo: false,
     label: 'Input',
     labelHidden: false,
     info: 'Enter some value',
@@ -31,12 +38,16 @@ InputDemo.argTypes = {
         options: ['text', 'password', 'email', 'url'],
         control: { type: 'select' }
     },
+    showAdditionalInfo: { control: { type: 'boolean' } },
     showAction: { control: { type: 'boolean' } },
     label: { control: { type: 'text' } },
     labelHidden: { control: { type: 'boolean' } },
     info: { control: { type: 'text' } },
     placeholder: { control: { type: 'text' } },
-    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    status: {
+        options: [undefined, 'success', 'warning', 'error', 'pending'],
+        control: { type: 'select' }
+    },
     required: { control: { type: 'boolean' } },
     disabled: { control: { type: 'boolean' } },
     readOnly: { control: { type: 'boolean' } }
@@ -80,4 +91,69 @@ ConfigurableInput.argTypes = {
     warningStatusColor: { control: { type: 'color' } },
     status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }
 };
+export const InputWithSuggestion = (args) => {
+    const [status, setStatus] = useState(undefined);
+    const [inputValue, setInputValue] = useState('');
+    const timerRef = useRef();
+    const timer = () => {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = window.setTimeout(() => {
+            setInputValue('AI suggestion value');
+            setStatus('pending');
+        }, 3000);
+    };
+    useEffect(() => {
+        timer();
+        return () => {
+            window.clearTimeout(timerRef.current);
+        };
+    }, []);
+    return (<Input id='input-demo' value={inputValue} type={args.type} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} actions={args.showAction
+            ? [
+                {
+                    id: 'config',
+                    text: 'Configure',
+                    icon: 'gear'
+                }
+            ]
+            : undefined} onChange={(e) => {
+            setInputValue(e.target.value);
+            setStatus(undefined);
+            timer();
+        }} onResolveSuggestion={accepted => {
+            if (accepted) {
+                setStatus('success');
+            }
+            else {
+                setStatus(undefined);
+                setInputValue('');
+            }
+            timer();
+        }}/>);
+};
+InputWithSuggestion.args = {
+    type: 'text',
+    showAction: false,
+    label: 'Input',
+    labelHidden: false,
+    info: 'Enter some value',
+    placeholder: 'Enter your input',
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+InputWithSuggestion.argTypes = {
+    type: {
+        options: ['text', 'password', 'email', 'url'],
+        control: { type: 'select' }
+    },
+    showAction: { control: { type: 'boolean' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } }
+};
 //# sourceMappingURL=Input.stories.jsx.map

package/jsx/core/Input/Input.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.jsx","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Input, InputProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Input',\n  component: Input\n} as Meta;\n\ninterface InputStoryProps extends InputProps {\n  showAction: boolean;\n}\n\nexport const InputDemo: Story<InputStoryProps> = (args: InputStoryProps) => {\n  return (\n    <Input\n      id='input-demo'\n      type={args.type}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n    />\n  );\n};\n\nInputDemo.args = {\n  type: 'text',\n  showAction: false,\n  label: 'Input',\n  labelHidden: false,\n  info: 'Enter some value',\n  placeholder: 'Enter your input',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nInputDemo.argTypes = {\n  type: {\n    options: ['text', 'password', 'email', 'url'],\n    control: { type: 'select' }\n  },\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  placeholder: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableInputProps {\n  height?: string;\n  padding?: string;\n  errorStatusColor?: string;\n  successStatusColor?: string;\n  warningStatusColor?: string;\n  status?: InputProps['status'];\n}\n\nexport const ConfigurableInput: Story<ConfigurableInputProps> = (args: ConfigurableInputProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          input: {\n            height: args.height,\n            padding: args.padding\n          },\n          'form-field': {\n            error: {\n              'status-color': args.errorStatusColor\n            },\n            success: {\n              'status-color': args.successStatusColor\n            },\n            warning: {\n              'status-color': args.warningStatusColor\n            }\n          }\n        }\n      }}\n    >\n      <Input\n        status={args.status}\n        label='Input'\n        placeholder='Enter your input'\n        info='Enter some value'\n      />\n    </Configuration>\n  );\n};\n\nConfigurableInput.args = {\n  height: '2rem',\n  padding: '0.5rem',\n  errorStatusColor: '#d91c29',\n  successStatusColor: '#20aa50',\n  warningStatusColor: '#fd6000',\n  status: undefined\n};\n\nConfigurableInput.argTypes = {\n  height: { control: { type: 'text' } },\n  padding: { control: { type: 'text' } },\n  errorStatusColor: { control: { type: 'color' } },\n  successStatusColor: { control: { type: 'color' } },\n  warningStatusColor: { control: { type: 'color' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n};\n"]}
+{"version":3,"file":"Input.stories.jsx","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, useEffect, useRef, useState } from 'react';\n\nimport { Configuration, FormControlProps, Input, InputProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Input',\n  component: Input\n} as Meta;\n\ninterface InputStoryProps extends InputProps {\n  showAction: boolean;\n  showAdditionalInfo?: boolean;\n}\n\nexport const InputDemo: Story<InputStoryProps> = (args: InputStoryProps) => {\n  return (\n    <Input\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Some additional info'\n            }\n          : undefined\n      }\n      id='input-demo'\n      type={args.type}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n    />\n  );\n};\n\nInputDemo.args = {\n  type: 'text',\n  showAction: false,\n  showAdditionalInfo: false,\n  label: 'Input',\n  labelHidden: false,\n  info: 'Enter some value',\n  placeholder: 'Enter your input',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nInputDemo.argTypes = {\n  type: {\n    options: ['text', 'password', 'email', 'url'],\n    control: { type: 'select' }\n  },\n  showAdditionalInfo: { control: { type: 'boolean' } },\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  placeholder: { control: { type: 'text' } },\n  status: {\n    options: [undefined, 'success', 'warning', 'error', 'pending'],\n    control: { type: 'select' }\n  },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableInputProps {\n  height?: string;\n  padding?: string;\n  errorStatusColor?: string;\n  successStatusColor?: string;\n  warningStatusColor?: string;\n  status?: InputProps['status'];\n}\n\nexport const ConfigurableInput: Story<ConfigurableInputProps> = (args: ConfigurableInputProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          input: {\n            height: args.height,\n            padding: args.padding\n          },\n          'form-field': {\n            error: {\n              'status-color': args.errorStatusColor\n            },\n            success: {\n              'status-color': args.successStatusColor\n            },\n            warning: {\n              'status-color': args.warningStatusColor\n            }\n          }\n        }\n      }}\n    >\n      <Input\n        status={args.status}\n        label='Input'\n        placeholder='Enter your input'\n        info='Enter some value'\n      />\n    </Configuration>\n  );\n};\n\nConfigurableInput.args = {\n  height: '2rem',\n  padding: '0.5rem',\n  errorStatusColor: '#d91c29',\n  successStatusColor: '#20aa50',\n  warningStatusColor: '#fd6000',\n  status: undefined\n};\n\nConfigurableInput.argTypes = {\n  height: { control: { type: 'text' } },\n  padding: { control: { type: 'text' } },\n  errorStatusColor: { control: { type: 'color' } },\n  successStatusColor: { control: { type: 'color' } },\n  warningStatusColor: { control: { type: 'color' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n};\n\nexport const InputWithSuggestion: Story<InputStoryProps> = (args: InputStoryProps) => {\n  const [status, setStatus] = useState<FormControlProps['status']>(undefined);\n  const [inputValue, setInputValue] = useState('');\n  const timerRef = useRef<number>();\n\n  const timer = () => {\n    window.clearTimeout(timerRef.current);\n    timerRef.current = window.setTimeout(() => {\n      setInputValue('AI suggestion value');\n      setStatus('pending');\n    }, 3000);\n  };\n\n  useEffect(() => {\n    timer();\n    return () => {\n      window.clearTimeout(timerRef.current);\n    };\n  }, []);\n\n  return (\n    <Input\n      id='input-demo'\n      value={inputValue}\n      type={args.type}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        setInputValue(e.target.value);\n        setStatus(undefined);\n        timer();\n      }}\n      onResolveSuggestion={accepted => {\n        if (accepted) {\n          setStatus('success');\n        } else {\n          setStatus(undefined);\n          setInputValue('');\n        }\n        timer();\n      }}\n    />\n  );\n};\n\nInputWithSuggestion.args = {\n  type: 'text',\n  showAction: false,\n  label: 'Input',\n  labelHidden: false,\n  info: 'Enter some value',\n  placeholder: 'Enter your input',\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nInputWithSuggestion.argTypes = {\n  type: {\n    options: ['text', 'password', 'email', 'url'],\n    control: { type: 'select' }\n  },\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  placeholder: { control: { type: 'text' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/core/Lightbox/Lightbox.stories.jsx

@@ -33,7 +33,7 @@ export const LightboxDemo = (args) => {
         document.body.removeChild(a);
     };
     return (<>
-      <Button ref={demoButtonRef} onClick={onClick} autoFocus>
+      <Button ref={demoButtonRef} onClick={onClick}>
         Open Lightbox
       </Button>
       {images && (<Lightbox items={images} cycle={args.cycle || undefined} onAfterClose={() => {

package/jsx/core/Lightbox/Lightbox.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.stories.jsx","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport {\n  Button,\n  DateTimeDisplay,\n  Lightbox,\n  LightboxProps,\n  LightboxItem\n} from '@pega/cosmos-react-core';\n\nimport { mockAPIImageResources, mockBadImageResource } from './Lightbox.mocks';\n\nexport default {\n  title: 'Core/Lightbox',\n  component: Lightbox\n} as Meta;\n\ninterface LightboxStoryProps {\n  limit?: number;\n  cycle?: boolean;\n  error?: boolean;\n}\n\nexport const LightboxDemo: Story<LightboxStoryProps> = (args: LightboxStoryProps) => {\n  const demoButtonRef = useRef<HTMLButtonElement>(null);\n  const [images, setImages] = useState<LightboxProps['items'] | null>(null);\n\n  const onClick = () => {\n    setImages(\n      (args.error ? [mockBadImageResource] : mockAPIImageResources.slice(0, args.limit)).map(\n        ({ id, name, description, mime_type, media_url }) => {\n          return {\n            id,\n            name,\n            description,\n            src: media_url,\n            metadata: [\n              mime_type.split('/').pop(),\n              <DateTimeDisplay value={new Date()} variant='date' />\n            ]\n          };\n        }\n      )\n    );\n  };\n\n  const onItemDownload = async (id: LightboxItem['id']) => {\n    const a = document.createElement('a');\n    a.href = await fetch(id)\n      .then(response => response.blob())\n      .then(blob => URL.createObjectURL(blob));\n\n    a.download = images?.find(image => image.id === id)?.name ?? id;\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n  };\n\n  return (\n    <>\n      <Button ref={demoButtonRef} onClick={onClick} autoFocus>\n        Open Lightbox\n      </Button>\n      {images && (\n        <Lightbox\n          items={images}\n          cycle={args.cycle || undefined}\n          onAfterClose={() => {\n            setImages(null);\n            demoButtonRef.current?.focus();\n          }}\n          onItemDownload={onItemDownload}\n        />\n      )}\n    </>\n  );\n};\n\nLightboxDemo.args = {\n  limit: 7,\n  cycle: false,\n  error: false\n};\n\nLightboxDemo.argTypes = {\n  limit: { control: { type: 'number' } },\n  cycle: { control: { type: 'boolean' } },\n  error: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Lightbox.stories.jsx","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport {\n  Button,\n  DateTimeDisplay,\n  Lightbox,\n  LightboxProps,\n  LightboxItem\n} from '@pega/cosmos-react-core';\n\nimport { mockAPIImageResources, mockBadImageResource } from './Lightbox.mocks';\n\nexport default {\n  title: 'Core/Lightbox',\n  component: Lightbox\n} as Meta;\n\ninterface LightboxStoryProps {\n  limit?: number;\n  cycle?: boolean;\n  error?: boolean;\n}\n\nexport const LightboxDemo: Story<LightboxStoryProps> = (args: LightboxStoryProps) => {\n  const demoButtonRef = useRef<HTMLButtonElement>(null);\n  const [images, setImages] = useState<LightboxProps['items'] | null>(null);\n\n  const onClick = () => {\n    setImages(\n      (args.error ? [mockBadImageResource] : mockAPIImageResources.slice(0, args.limit)).map(\n        ({ id, name, description, mime_type, media_url }) => {\n          return {\n            id,\n            name,\n            description,\n            src: media_url,\n            metadata: [\n              mime_type.split('/').pop(),\n              <DateTimeDisplay value={new Date()} variant='date' />\n            ]\n          };\n        }\n      )\n    );\n  };\n\n  const onItemDownload = async (id: LightboxItem['id']) => {\n    const a = document.createElement('a');\n    a.href = await fetch(id)\n      .then(response => response.blob())\n      .then(blob => URL.createObjectURL(blob));\n\n    a.download = images?.find(image => image.id === id)?.name ?? id;\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n  };\n\n  return (\n    <>\n      <Button ref={demoButtonRef} onClick={onClick}>\n        Open Lightbox\n      </Button>\n      {images && (\n        <Lightbox\n          items={images}\n          cycle={args.cycle || undefined}\n          onAfterClose={() => {\n            setImages(null);\n            demoButtonRef.current?.focus();\n          }}\n          onItemDownload={onItemDownload}\n        />\n      )}\n    </>\n  );\n};\n\nLightboxDemo.args = {\n  limit: 7,\n  cycle: false,\n  error: false\n};\n\nLightboxDemo.argTypes = {\n  limit: { control: { type: 'number' } },\n  cycle: { control: { type: 'boolean' } },\n  error: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -1,18 +1,8 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { LinkProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const LinkDemo: Story<LinkProps>;
-export declare const LinkWithIconDemo: {
-    (): JSX.Element;
-    argTypes: {
-        variant: {
-            table: {
-                disable: boolean;
-            };
-        };
-    };
-};
+export declare const LinkWithIconDemo: Story;
 export declare const PreviewableLink: Story<LinkProps>;
 //# sourceMappingURL=Link.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAkC,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAKpF,wBAYU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAMrC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;CAoB5B,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,SAAS,CAM5C,CAAC"}
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAkC,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAKpF,wBAYU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAMrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,SAAS,CAY5C,CAAC"}

package/jsx/core/Link/Link.stories.jsx

@@ -1,3 +1,4 @@
+import { action } from '@storybook/addon-actions';
 import { Icon, registerIcon, Flex, Link } from '@pega/cosmos-react-core';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
 registerIcon(plusIcon);
@@ -42,7 +43,7 @@ LinkWithIconDemo.argTypes = {
     variant: { table: { disable: true } }
 };
 export const PreviewableLink = (args) => {
-    return (<Link href='http://www.pega.com' variant={args.variant} previewable target='_blank'>
+    return (<Link href='http://www.pega.com' variant={args.variant} previewable target='_blank' onPreview={args.onPreview || action('Preview activated')}>
       Visit Pega!
     </Link>);
 };

package/jsx/core/Link/Link.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.jsx","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,QAAQ,CACrE;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CACxC;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CACrE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CACvE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CACpE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAClE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAClE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAqB,CAAC,IAAe,EAAE,EAAE;IACnE,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CACjF;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Icon, registerIcon, Flex, Link, LinkProps } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Link',\n  component: Link,\n  args: {\n    variant: 'link'\n  },\n  argTypes: {\n    variant: {\n      options: ['link', 'primary', 'secondary', 'simple', 'text'],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const LinkDemo: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n\nexport const LinkWithIconDemo = () => {\n  return (\n    <Flex container={{ alignItems: 'center' }}>\n      <Link href='http://www.pega.com' variant='primary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='secondary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='simple' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='link' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='text' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n    </Flex>\n  );\n};\n\nLinkWithIconDemo.argTypes = {\n  variant: { table: { disable: true } }\n};\n\nexport const PreviewableLink: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} previewable target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n"]}
+{"version":3,"file":"Link.stories.jsx","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,QAAQ,CACrE;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU,GAAG,EAAE;IAC1C,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CACxC;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CACrE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CACvE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CACpE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAClE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAClE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAqB,CAAC,IAAe,EAAE,EAAE;IACnE,OAAO,CACL,CAAC,IAAI,CACH,IAAI,CAAC,qBAAqB,CAC1B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,WAAW,CACX,MAAM,CAAC,QAAQ,CACf,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAEzD;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Icon, registerIcon, Flex, Link, LinkProps } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Link',\n  component: Link,\n  args: {\n    variant: 'link'\n  },\n  argTypes: {\n    variant: {\n      options: ['link', 'primary', 'secondary', 'simple', 'text'],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const LinkDemo: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n\nexport const LinkWithIconDemo: Story = () => {\n  return (\n    <Flex container={{ alignItems: 'center' }}>\n      <Link href='http://www.pega.com' variant='primary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='secondary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='simple' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='link' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='text' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n    </Flex>\n  );\n};\n\nLinkWithIconDemo.argTypes = {\n  variant: { table: { disable: true } }\n};\n\nexport const PreviewableLink: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link\n      href='http://www.pega.com'\n      variant={args.variant}\n      previewable\n      target='_blank'\n      onPreview={args.onPreview || action('Preview activated')}\n    >\n      Visit Pega!\n    </Link>\n  );\n};\n"]}

package/jsx/core/List/CommaSeparatedList.stories.d.ts

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
-import { CommaSeparatedListProps } from '@pega/cosmos-react-core';
+import { CommaSeparatedListProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const CommaSeparatedListDemo: Story<CommaSeparatedListProps>;
+export declare const CommaSeparatedListDemo: Story<OmitStrict<CommaSeparatedListProps, 'items'>>;
 //# sourceMappingURL=CommaSeparatedList.stories.d.ts.map

package/jsx/core/List/CommaSeparatedList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommaSeparatedList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAsB,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;;AAEtF,wBAGU;AAEV,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,uBAAuB,CAqBjE,CAAC"}
+{"version":3,"file":"CommaSeparatedList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAsB,uBAAuB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAElG,wBAGU;AAEV,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,UAAU,CAAC,uBAAuB,EAAE,OAAO,CAAC,CAqBtF,CAAC"}

package/jsx/core/List/CommaSeparatedList.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"CommaSeparatedList.stories.jsx","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,yBAAyB,CAAC;AAEtF,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,kBAAkB;CACtB,CAAC;AAEV,MAAM,CAAC,MAAM,sBAAsB,GAAmC,CACpE,IAA6B,EAC7B,EAAE;IACF,MAAM,KAAK,GAAG;QACZ,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;IAEF,OAAO,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;AACrE,CAAC,CAAC;AAEF,sBAAsB,CAAC,IAAI,GAAG;IAC5B,OAAO,EAAE,cAAc;CACxB,CAAC;AAEF,sBAAsB,CAAC,QAAQ,GAAG;IAChC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { CommaSeparatedList, CommaSeparatedListProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/List',\n  component: CommaSeparatedList\n} as Meta;\n\nexport const CommaSeparatedListDemo: Story<CommaSeparatedListProps> = (\n  args: CommaSeparatedListProps\n) => {\n  const items = [\n    'Value 1',\n    'Value 2',\n    'Value 3',\n    'Value 4',\n    'Value 5',\n    'Value 6',\n    'Value 7',\n    'Value 8',\n    'Value 9',\n    'Value 10',\n    'Value 11',\n    'Value 12',\n    'Value 13',\n    'Value 14'\n  ];\n\n  return <CommaSeparatedList heading={args.heading} items={items} />;\n};\n\nCommaSeparatedListDemo.args = {\n  heading: 'List Heading'\n};\n\nCommaSeparatedListDemo.argTypes = {\n  heading: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"CommaSeparatedList.stories.jsx","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAuC,MAAM,yBAAyB,CAAC;AAElG,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,kBAAkB;CACtB,CAAC;AAEV,MAAM,CAAC,MAAM,sBAAsB,GAAwD,CACzF,IAAkD,EAClD,EAAE;IACF,MAAM,KAAK,GAAG;QACZ,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;IAEF,OAAO,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;AACrE,CAAC,CAAC;AAEF,sBAAsB,CAAC,IAAI,GAAG;IAC5B,OAAO,EAAE,cAAc;CACxB,CAAC;AAEF,sBAAsB,CAAC,QAAQ,GAAG;IAChC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { CommaSeparatedList, CommaSeparatedListProps, OmitStrict } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/List',\n  component: CommaSeparatedList\n} as Meta;\n\nexport const CommaSeparatedListDemo: Story<OmitStrict<CommaSeparatedListProps, 'items'>> = (\n  args: OmitStrict<CommaSeparatedListProps, 'items'>\n) => {\n  const items = [\n    'Value 1',\n    'Value 2',\n    'Value 3',\n    'Value 4',\n    'Value 5',\n    'Value 6',\n    'Value 7',\n    'Value 8',\n    'Value 9',\n    'Value 10',\n    'Value 11',\n    'Value 12',\n    'Value 13',\n    'Value 14'\n  ];\n\n  return <CommaSeparatedList heading={args.heading} items={items} />;\n};\n\nCommaSeparatedListDemo.args = {\n  heading: 'List Heading'\n};\n\nCommaSeparatedListDemo.argTypes = {\n  heading: { control: { type: 'text' } }\n};\n"]}

package/jsx/core/ListToolbar/ListToolbar.mocks.d.ts

@@ -0,0 +1,9 @@
+import { Dispatch } from 'react';
+import { Action } from '@pega/cosmos-react-core';
+import { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';
+export declare const actions: Action[];
+export declare const mockViews: ViewSelectorProps['views'];
+export declare const StagedStateDispatchContext: import("react").Context<Dispatch<object>>;
+export declare const FilterRenderer: () => JSX.Element;
+export declare const GroupRenderer: () => JSX.Element;
+//# sourceMappingURL=ListToolbar.mocks.d.ts.map

package/jsx/core/ListToolbar/ListToolbar.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,QAAQ,EAAwB,MAAM,OAAO,CAAC;AAEnF,OAAO,EAGL,MAAM,EAQP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAEzG,eAAO,MAAM,OAAO,EAAE,MAAM,EAIzB,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,OAAO,CAIhD,CAAC;AAEF,eAAO,MAAM,0BAA0B,2CAA4C,CAAC;AA6DpF,eAAO,MAAM,cAAc,mBAoB1B,CAAC;AAEF,eAAO,MAAM,aAAa,mBAEzB,CAAC"}

package/jsx/core/ListToolbar/ListToolbar.mocks.jsx

@@ -0,0 +1,71 @@
+import { createContext, useContext, useState } from 'react';
+import { useAfterInitialEffect, useUID, Input, Select, Option, Flex, Button, Icon, Grid } from '@pega/cosmos-react-core';
+export const actions = ['Action 1', 'Action 2', 'Action 3'].map(text => ({
+    text,
+    id: text,
+    icon: 'filter'
+}));
+export const mockViews = [
+    { id: '1', text: 'Data view 1', selected: true },
+    { id: '2', text: 'Data view 2', selected: false },
+    { id: '3', text: 'Data view 3', selected: false }
+];
+export const StagedStateDispatchContext = createContext(() => { });
+const mockFields = Array.from({ length: 10 }, (_, i) => `Field ${i + 1}`);
+const MockCondition = () => {
+    const setStagedState = useContext(StagedStateDispatchContext);
+    const conditionId = useUID();
+    const [localState, setLocalState] = useState({
+        lhs: 'Field 1',
+        comparator: 'Equals',
+        rhs: ''
+    });
+    useAfterInitialEffect(() => {
+        setStagedState({
+            [conditionId]: localState
+        });
+    }, [conditionId, localState, setStagedState]);
+    return (<Grid container={{ gap: 2, cols: 'repeat(3, minmax(0, 1fr))' }}>
+      <Select label='Field' onChange={(e) => {
+            setLocalState(cur => ({ ...cur, lhs: e.target.value }));
+        }}>
+        {mockFields.map(field => {
+            return (<Option value={field} key={field}>
+              {field}
+            </Option>);
+        })}
+      </Select>
+      <Select label='Comparator' onChange={(e) => {
+            setLocalState(cur => ({ ...cur, comparator: e.target.value }));
+        }}>
+        {['Equals', 'Contains', 'Starts with'].map(comparator => {
+            return (<Option value={comparator} key={comparator}>
+              {comparator}
+            </Option>);
+        })}
+      </Select>
+      <Input label='Value' value={localState.rhs} onChange={(e) => {
+            setLocalState(cur => ({ ...cur, rhs: e.target.value }));
+        }}/>
+    </Grid>);
+};
+export const FilterRenderer = () => {
+    const [conditions, setConditions] = useState(() => [<MockCondition key={1}/>]);
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      {conditions}
+      <div>
+        <Button variant='link' onClick={() => {
+            setConditions(cur => [...cur, <MockCondition key={cur.length + 1}/>]);
+        }}>
+          <Flex container={{ inline: true, alignItems: 'start', gap: 1 }} as='span'>
+            <Icon name='plus'/>
+            <span>Add condition</span>
+          </Flex>
+        </Button>
+      </div>
+    </Flex>);
+};
+export const GroupRenderer = () => {
+    return <>GroupBy content goes here...</>;
+};
+//# sourceMappingURL=ListToolbar.mocks.jsx.map

package/jsx/core/ListToolbar/ListToolbar.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.mocks.jsx","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, createContext, Dispatch, useContext, useState } from 'react';\n\nimport {\n  useAfterInitialEffect,\n  useUID,\n  Action,\n  Input,\n  Select,\n  Option,\n  Flex,\n  Button,\n  Icon,\n  Grid\n} from '@pega/cosmos-react-core';\nimport { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nexport const actions: Action[] = ['Action 1', 'Action 2', 'Action 3'].map(text => ({\n  text,\n  id: text,\n  icon: 'filter'\n}));\n\nexport const mockViews: ViewSelectorProps['views'] = [\n  { id: '1', text: 'Data view 1', selected: true },\n  { id: '2', text: 'Data view 2', selected: false },\n  { id: '3', text: 'Data view 3', selected: false }\n];\n\nexport const StagedStateDispatchContext = createContext<Dispatch<object>>(() => {});\n\nconst mockFields = Array.from({ length: 10 }, (_, i) => `Field ${i + 1}`);\n\nconst MockCondition = () => {\n  const setStagedState = useContext(StagedStateDispatchContext);\n  const conditionId = useUID();\n\n  const [localState, setLocalState] = useState({\n    lhs: 'Field 1',\n    comparator: 'Equals',\n    rhs: ''\n  });\n\n  useAfterInitialEffect(() => {\n    setStagedState({\n      [conditionId]: localState\n    });\n  }, [conditionId, localState, setStagedState]);\n\n  return (\n    <Grid container={{ gap: 2, cols: 'repeat(3, minmax(0, 1fr))' }}>\n      <Select\n        label='Field'\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          setLocalState(cur => ({ ...cur, lhs: e.target.value }));\n        }}\n      >\n        {mockFields.map(field => {\n          return (\n            <Option value={field} key={field}>\n              {field}\n            </Option>\n          );\n        })}\n      </Select>\n      <Select\n        label='Comparator'\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          setLocalState(cur => ({ ...cur, comparator: e.target.value }));\n        }}\n      >\n        {['Equals', 'Contains', 'Starts with'].map(comparator => {\n          return (\n            <Option value={comparator} key={comparator}>\n              {comparator}\n            </Option>\n          );\n        })}\n      </Select>\n      <Input\n        label='Value'\n        value={localState.rhs}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          setLocalState(cur => ({ ...cur, rhs: e.target.value }));\n        }}\n      />\n    </Grid>\n  );\n};\n\nexport const FilterRenderer = () => {\n  const [conditions, setConditions] = useState<JSX.Element[]>(() => [<MockCondition key={1} />]);\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      {conditions}\n      <div>\n        <Button\n          variant='link'\n          onClick={() => {\n            setConditions(cur => [...cur, <MockCondition key={cur.length + 1} />]);\n          }}\n        >\n          <Flex container={{ inline: true, alignItems: 'start', gap: 1 }} as='span'>\n            <Icon name='plus' />\n            <span>Add condition</span>\n          </Flex>\n        </Button>\n      </div>\n    </Flex>\n  );\n};\n\nexport const GroupRenderer = () => {\n  return <>GroupBy content goes here...</>;\n};\n"]}

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

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/react';
+import { ListToolbarProps, FormControlProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface ListToolbarStoryProps {
+    condensed: ListToolbarProps['condensed'];
+    createNewLabel: string;
+    required: FormControlProps['required'];
+}
+export declare const ListToolbarDemo: Story<ListToolbarStoryProps>;
+export declare const SimpleToolbarDemo: Story;
+//# sourceMappingURL=ListToolbar.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAGL,gBAAgB,EAGhB,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;;AAWjC,wBAGU;AAIV,UAAU,qBAAqB;IAC7B,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CA8FxD,CAAC;AAcF,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC"}

package/jsx/core/ListToolbar/ListToolbar.stories.jsx

@@ -0,0 +1,102 @@
+import { useMemo, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Card, CardHeader, ListToolbar, MenuButton } from '@pega/cosmos-react-core';
+import { mockViews, actions, FilterRenderer, StagedStateDispatchContext, GroupRenderer } from './ListToolbar.mocks';
+export default {
+    title: 'Core/ListToolbar',
+    component: ListToolbar
+};
+export const ListToolbarDemo = (args) => {
+    const [stagedQueryOptionState, setStagedQueryOptionState] = useState(null);
+    const [views, setViews] = useState(mockViews);
+    const [currentSort, setCurrentSort] = useState(null);
+    const filterProp = useMemo(() => {
+        return {
+            value: stagedQueryOptionState,
+            count: undefined,
+            renderer: FilterRenderer,
+            onCancel: () => {
+                setStagedQueryOptionState(null);
+            },
+            onSubmit: () => {
+                setStagedQueryOptionState(cur => {
+                    console.table(cur);
+                    return null;
+                });
+            }
+        };
+    }, [stagedQueryOptionState]);
+    const sortProp = useMemo(() => {
+        return {
+            mode: 'single-select',
+            count: currentSort ? 1 : undefined,
+            items: [
+                {
+                    id: 'asc',
+                    text: 'Ascending',
+                    icon: 'arrow-up',
+                    selected: currentSort === 'asc'
+                },
+                {
+                    id: 'desc',
+                    text: 'Descending',
+                    icon: 'arrow-down',
+                    selected: currentSort === 'desc'
+                }
+            ],
+            onItemClick: id => {
+                setCurrentSort(cur => {
+                    return cur === id ? null : id;
+                });
+            }
+        };
+    }, [currentSort]);
+    const groupProp = useMemo(() => {
+        return {
+            count: undefined,
+            renderer: GroupRenderer,
+            onCancel: () => { },
+            onSubmit: () => { }
+        };
+    }, []);
+    return (<Card>
+      <CardHeader>
+        <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>
+          <ListToolbar heading={{
+            views,
+            onViewSelect: id => {
+                setViews(cur => {
+                    return cur.map(view => ({ ...view, selected: view.id === id }));
+                });
+            },
+            defaultId: '1',
+            appDefaultId: '2'
+        }} createNew={{
+            onClick: action('Clicked Create New'),
+            label: args.createNewLabel
+        }} search={{ onSearchSubmit: action('Search submit') }} count={{
+            total: 32,
+            selected: 4
+        }} filter={filterProp} sort={sortProp} group={groupProp} actions={actions} additionalActions={<MenuButton text='Edit'/>} condensed={args.condensed} formControlProps={{ required: args.required }}/>
+        </StagedStateDispatchContext.Provider>
+      </CardHeader>
+    </Card>);
+};
+ListToolbarDemo.args = {
+    condensed: false,
+    createNewLabel: undefined,
+    required: false
+};
+ListToolbarDemo.argTypes = {
+    condensed: { control: { type: 'boolean' } },
+    createNewLabel: { control: { type: 'text' } },
+    required: { control: { type: 'boolean' } }
+};
+export const SimpleToolbarDemo = () => {
+    return (<Card>
+      <CardHeader>
+        <ListToolbar heading='Top accounts in California' search={{ onSearchSubmit: action('Search submit') }} count={{ total: 212, totalHasMore: true }} actions={actions} formControlProps={{ required: true }}/>
+      </CardHeader>
+    </Card>);
+};
+//# sourceMappingURL=ListToolbar.stories.jsx.map

package/jsx/core/ListToolbar/ListToolbar.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.stories.jsx","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Card,\n  CardHeader,\n  ListToolbarProps,\n  ListToolbar,\n  MenuButton,\n  FormControlProps\n} from '@pega/cosmos-react-core';\nimport { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport {\n  mockViews,\n  actions,\n  FilterRenderer,\n  StagedStateDispatchContext,\n  GroupRenderer\n} from './ListToolbar.mocks';\n\nexport default {\n  title: 'Core/ListToolbar',\n  component: ListToolbar\n} as Meta;\n\ntype SortString = 'asc' | 'desc';\n\ninterface ListToolbarStoryProps {\n  condensed: ListToolbarProps['condensed'];\n  createNewLabel: string;\n  required: FormControlProps['required'];\n}\n\nexport const ListToolbarDemo: Story<ListToolbarStoryProps> = (args: ListToolbarStoryProps) => {\n  const [stagedQueryOptionState, setStagedQueryOptionState] = useState<object | null>(null);\n  const [views, setViews] = useState(mockViews);\n  const [currentSort, setCurrentSort] = useState<SortString | null>(null);\n\n  const filterProp = useMemo(() => {\n    return {\n      value: stagedQueryOptionState,\n      count: undefined,\n      renderer: FilterRenderer,\n      onCancel: () => {\n        setStagedQueryOptionState(null);\n      },\n      onSubmit: () => {\n        setStagedQueryOptionState(cur => {\n          // eslint-disable-next-line no-console\n          console.table(cur);\n          return null;\n        });\n      }\n    };\n  }, [stagedQueryOptionState]);\n\n  const sortProp: PresetMenuProps = useMemo(() => {\n    return {\n      mode: 'single-select',\n      count: currentSort ? 1 : undefined,\n      items: [\n        {\n          id: 'asc',\n          text: 'Ascending',\n          icon: 'arrow-up',\n          selected: currentSort === 'asc'\n        },\n        {\n          id: 'desc',\n          text: 'Descending',\n          icon: 'arrow-down',\n          selected: currentSort === 'desc'\n        }\n      ],\n      onItemClick: id => {\n        setCurrentSort(cur => {\n          return cur === id ? null : (id as SortString);\n        });\n      }\n    };\n  }, [currentSort]);\n\n  const groupProp = useMemo(() => {\n    return {\n      count: undefined,\n      renderer: GroupRenderer,\n      onCancel: () => {},\n      onSubmit: () => {}\n    };\n  }, []);\n\n  return (\n    <Card>\n      <CardHeader>\n        <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n          <ListToolbar\n            heading={{\n              views,\n              onViewSelect: id => {\n                setViews(cur => {\n                  return cur.map(view => ({ ...view, selected: view.id === id }));\n                });\n              },\n              defaultId: '1',\n              appDefaultId: '2'\n            }}\n            createNew={{\n              onClick: action('Clicked Create New'),\n              label: args.createNewLabel\n            }}\n            search={{ onSearchSubmit: action('Search submit') }}\n            count={{\n              total: 32,\n              selected: 4\n            }}\n            filter={filterProp}\n            sort={sortProp}\n            group={groupProp}\n            actions={actions}\n            additionalActions={<MenuButton text='Edit' />}\n            condensed={args.condensed}\n            formControlProps={{ required: args.required }}\n          />\n        </StagedStateDispatchContext.Provider>\n      </CardHeader>\n    </Card>\n  );\n};\n\nListToolbarDemo.args = {\n  condensed: false,\n  createNewLabel: undefined,\n  required: false\n};\n\nListToolbarDemo.argTypes = {\n  condensed: { control: { type: 'boolean' } },\n  createNewLabel: { control: { type: 'text' } },\n  required: { control: { type: 'boolean' } }\n};\n\nexport const SimpleToolbarDemo: Story = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <ListToolbar\n          heading='Top accounts in California'\n          search={{ onSearchSubmit: action('Search submit') }}\n          count={{ total: 212, totalHasMore: true }}\n          actions={actions}\n          formControlProps={{ required: true }}\n        />\n      </CardHeader>\n    </Card>\n  );\n};\n"]}

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

@@ -6,7 +6,10 @@ interface APIKey {
     apiKey?: string;
 }
 export declare const LocationDemo: Story<LocationInputProps & APIKey>;
-export declare const LocationInputDemo: Story<LocationInputProps & APIKey>;
+interface LocationInputStoryProps extends LocationInputProps {
+    showAdditionalInfo?: boolean;
+}
+export declare const LocationInputDemo: Story<LocationInputStoryProps & APIKey>;
 export declare const LocationViewDemo: Story<LocationViewProps & APIKey>;
 export declare const LocationDisplayDemo: Story<LocationDisplayProps & APIKey>;
 //# sourceMappingURL=Location.stories.d.ts.map

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

@@ -1 +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"}
+{"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,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,GAAG,MAAM,CAiCrE,CAAC;AA0BF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,GAAG,MAAM,CAoB9D,CAAC;AAkBF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,oBAAoB,GAAG,MAAM,CAcpE,CAAC"}

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

@@ -14,7 +14,7 @@ export const LocationDemo = (args) => {
       <LocationInput showMap defaultToCurrentLocation={args.defaultToCurrentLocation} value={value} label={args.label} labelHidden={args.labelHidden} onChange={inputValue => {
             setValue(inputValue);
         }} location={locationObj} onSelect={selectedValueObj => {
-            setValue(selectedValueObj.name);
+            setValue(selectedValueObj.name ?? '');
             if (selectedValueObj.latitude && selectedValueObj.longitude) {
                 setLocationObj({
                     latitude: selectedValueObj.latitude,
@@ -22,7 +22,7 @@ export const LocationDemo = (args) => {
                 });
             }
             else {
-                setLocationObj(selectedValueObj.name);
+                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>);
@@ -59,8 +59,13 @@ export const LocationInputDemo = (args) => {
       <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}/>
+            setValue(selectedValueObj.name ?? '');
+        }} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Please enter your location'
+            }
+            : undefined}/>
     </MapsContext.Provider>);
 };
 LocationInputDemo.args = {
@@ -71,7 +76,8 @@ LocationInputDemo.args = {
     status: undefined,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    showAdditionalInfo: true
 };
 LocationInputDemo.argTypes = {
     apiKey: { control: { type: 'text' } },
@@ -81,7 +87,8 @@ LocationInputDemo.argTypes = {
     status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
     required: { control: { type: 'boolean' } },
     disabled: { control: { type: 'boolean' } },
-    readOnly: { control: { type: 'boolean' } }
+    readOnly: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 export const LocationViewDemo = (args) => {
     const [location, setLocation] = useState(args.location);