npm - @pega/cosmos-react-demos - Versions diffs - 5.0.0-dev.9.2 → 6.0.0 - Mend

@pega/cosmos-react-demos 5.0.0-dev.9.2 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (252) hide show

package/jsx/core/Input/Input.stories.jsx CHANGED Viewed

@@ -8,7 +8,6 @@ export default {
 export const InputDemo = (args) => {
     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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.stories.jsx","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAG/D,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,CAAC,mBAAmB,CAAC;CAC9B,CAAC;AAOV,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,IAAqB,EAAE,EAAE;IAC3E,OAAO,CACL,CAAC,KAAK,CACJ,cAAc,CAAC,CACb,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,OAAO,EAAE,sBAAsB;aAChC;YACH,CAAC,CAAC,SAAS,CACd,CACD,EAAE,CAAC,YAAY,CACf,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,OAAO,CAAC,CACN,IAAI,CAAC,UAAU;YACb,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,QAAQ;oBACZ,IAAI,EAAE,WAAW;oBACjB,IAAI,EAAE,MAAM;iBACb;aACF;YACH,CAAC,CAAC,SAAS,CACd,EACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,KAAK;IACjB,kBAAkB,EAAE,KAAK;IACzB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,kBAAkB;IACxB,WAAW,EAAE,kBAAkB;IAC/B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC;QAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACpD,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE;IACzD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC;QAC9D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC;AAWF,MAAM,CAAC,MAAM,iBAAiB,GAAoC,CAChE,IAA4B,EAC5B,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,KAAK,EAAE;oBACL,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,OAAO,EAAE,IAAI,CAAC,OAAO;iBACtB;gBACD,YAAY,EAAE;oBACZ,KAAK,EAAE;wBACL,cAAc,EAAE,IAAI,CAAC,gBAAgB;qBACtC;oBACD,OAAO,EAAE;wBACP,cAAc,EAAE,IAAI,CAAC,kBAAkB;qBACxC;oBACD,OAAO,EAAE;wBACP,cAAc,EAAE,IAAI,CAAC,kBAAkB;qBACxC;iBACF;aACF;SACF,CAAC,CAEF;MAAA,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,OAAO,CACb,WAAW,CAAC,kBAAkB,CAC9B,IAAI,CAAC,kBAAkB,EAE3B;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,QAAQ;IACjB,gBAAgB,EAAE,SAAS;IAC3B,kBAAkB,EAAE,SAAS;IAC7B,kBAAkB,EAAE,SAAS;IAC7B,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACrC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAChD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAClD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAClD,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7F,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAA6B,CAAC,IAAqB,EAAE,EAAE;IACrF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA6B,SAAS,CAAC,CAAC;IAC5E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,MAAM,EAAU,CAAC;IAElC,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACtC,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACxC,aAAa,CAAC,qBAAqB,CAAC,CAAC;YACrC,SAAS,CAAC,SAAS,CAAC,CAAC;QACvB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,EAAE,CAAC;QACR,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACxC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,CAAC,KAAK,CACJ,EAAE,CAAC,YAAY,CACf,KAAK,CAAC,CAAC,UAAU,CAAC,CAClB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,OAAO,CAAC,CACN,IAAI,CAAC,UAAU;YACb,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,QAAQ;oBACZ,IAAI,EAAE,WAAW;oBACjB,IAAI,EAAE,MAAM;iBACb;aACF;YACH,CAAC,CAAC,SAAS,CACd,CACD,QAAQ,CAAC,CAAC,CAAC,CAAgC,EAAE,EAAE;YAC7C,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC9B,SAAS,CAAC,SAAS,CAAC,CAAC;YACrB,KAAK,EAAE,CAAC;QACV,CAAC,CAAC,CACF,mBAAmB,CAAC,CAAC,QAAQ,CAAC,EAAE;YAC9B,IAAI,QAAQ,EAAE;gBACZ,SAAS,CAAC,SAAS,CAAC,CAAC;aACtB;iBAAM;gBACL,SAAS,CAAC,SAAS,CAAC,CAAC;gBACrB,aAAa,CAAC,EAAE,CAAC,CAAC;aACnB;YACD,KAAK,EAAE,CAAC;QACV,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,kBAAkB;IACxB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC;QAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE;IACzD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useRef, useState } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { Configuration, Input } from '@pega/cosmos-react-core';\nimport type { FormControlProps, InputProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Input',\n component: Input,\n excludeStories: ['ConfigurableInput']\n} as Meta;\n\ninterface InputStoryProps extends InputProps {\n showAction: boolean;\n showAdditionalInfo?: boolean;\n}\n\nexport const InputDemo: StoryFn<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', label: 'Helper 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: StoryFn<ConfigurableInputProps> = (\n args: ConfigurableInputProps\n) => {\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: StoryFn<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', label: 'Helper text' } },\n placeholder: { control: { type: 'text' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"Input.stories.jsx","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useRef, useState } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { Configuration, Input } from '@pega/cosmos-react-core';\nimport type { FormControlProps, InputProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Input',\n component: Input,\n excludeStories: ['ConfigurableInput']\n} as Meta;\n\ninterface InputStoryProps extends InputProps {\n showAction: boolean;\n showAdditionalInfo?: boolean;\n}\n\nexport const InputDemo: StoryFn<InputStoryProps> = (args: InputStoryProps) => {\n return (\n <Input\n additionalInfo={\n args.showAdditionalInfo\n ? {\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', label: 'Helper 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: StoryFn<ConfigurableInputProps> = (\n args: ConfigurableInputProps\n) => {\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: StoryFn<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', label: 'Helper 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.mocks.d.ts CHANGED Viewed

@@ -1,15 +1,22 @@
-export declare const mockAPIImageResources: {
+export declare const mockData: ({
     id: string;
     name: string;
     description: string;
-    mime_type: string;
-    media_url: string;
-}[];
-export declare const mockBadImageResource: {
+    format: string;
+    src: string;
+} | {
     id: string;
     name: string;
     description: string;
-    mime_type: string;
-    media_url: string;
-};
+    format: string;
+    src: null;
+})[];
+export declare const mockBadResources: {
+    id: string;
+    name: string;
+    description: string;
+    src: string;
+    format: undefined;
+    error: boolean;
+}[];
 //# sourceMappingURL=Lightbox.mocks.d.ts.map

package/jsx/core/Lightbox/Lightbox.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Lightbox.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.mocks.ts"],"names":[],"mappings":"~~AAAA~~,eAAO,MAAM,~~qBAAqB;;;;;;GAyDjC~~,CAAC;AAEF,eAAO,MAAM,~~oBAAoB;;;;;;CAMhC~~,CAAC"}
1	+ {"version":3,"file":"Lightbox.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.mocks.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,QAAQ;;;;;;;;;;;;IAsFpB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;GAS5B,CAAC"}

package/jsx/core/Lightbox/Lightbox.mocks.js CHANGED Viewed

@@ -1,59 +1,97 @@
-export const mockAPIImageResources = [
+export const mockData = [
     {
         id: 'photo-1497752531616-c3afd9760a11',
         name: 'Image 1',
         description: 'Descriptive text about Image 1',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
+        format: 'jpeg',
+        src: 'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
+    },
+    {
+        id: 'pdf-1',
+        name: 'Sample-PDF 1',
+        description: 'Descriptive text about Dictionary of old Icelandic',
+        src: 'https://css4.pub/2015/icelandic/dictionary.pdf',
+        format: 'pdf'
     },
     {
         id: 'photo-1470093851219-69951fcbb533',
         name: 'Image 2',
         description: 'Descriptive text about Image 2',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1470093851219-69951fcbb533?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
+        format: 'jpeg',
+        src: 'https://images.unsplash.com/photo-1470093851219-69951fcbb533?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
     },
     {
         id: 'photo-1447684808650-354ae64db5b8',
         name: 'Image 3',
         description: 'Descriptive text about Image 3',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1447684808650-354ae64db5b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2094&q=80'
+        format: 'jpeg',
+        src: 'https://images.unsplash.com/photo-1447684808650-354ae64db5b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2094&q=80'
     },
     {
         id: 'photo-1425082661705-1834bfd09dca',
         name: 'Image 4',
         description: 'Descriptive text about Image 4',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2110&q=80'
+        format: 'jpeg',
+        src: 'https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2110&q=80'
     },
     {
         id: 'photo-1494256997604-768d1f608cac',
         name: 'Image 5',
         description: 'Descriptive text about Image 5',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2301&q=80'
+        format: 'jpeg',
+        src: 'https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2301&q=80'
     },
     {
         id: 'photo-1500694216671-a4e54fc4b513',
         name: 'Image 6',
         description: 'Descriptive text about Image 6',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1500694216671-a4e54fc4b513?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2092&q=80'
+        format: 'jpeg',
+        src: 'https://images.unsplash.com/photo-1500694216671-a4e54fc4b513?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2092&q=80'
+    },
+    {
+        id: 'doc1',
+        name: 'Pega.docx',
+        description: 'Descriptive text about Pega document',
+        format: 'docx',
+        src: null
     },
     {
-        id: 'photo-1638292597251-6fe6b2ba50f9',
-        name: 'Image 7',
+        id: 'ppt2',
+        name: 'Pega.odp',
+        description: 'Descriptive text about Presentation file',
+        format: 'odp',
+        src: null
+    },
+    {
+        id: 'attachment_link',
+        name: 'Link file',
         description: 'Descriptive text about Image 7',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1638292597251-6fe6b2ba50f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
+        format: 'url',
+        src: 'https://images.unsplash.com/photo-1638292597251-6fe6b2ba50f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
+    },
+    {
+        id: 'generic',
+        name: 'Pega file',
+        description: 'Descriptive text about file',
+        format: '3ds',
+        src: null
+    },
+    {
+        id: 'error',
+        name: 'Pega file',
+        description: 'Error showing content',
+        format: 'jpeg',
+        src: 'https://images.unsplash.com/photo'
+    }
+];
+export const mockBadResources = [
+    {
+        id: 'image-error',
+        name: 'Some image',
+        description: 'Descriptive text about Some image',
+        src: '',
+        format: undefined,
+        error: true
     }
 ];
-export const mockBadImageResource = {
-    id: 'error',
-    name: 'Some image',
-    description: 'Descriptive text about Some image',
-    mime_type: 'image/avif',
-    media_url: ''
-};
 //# sourceMappingURL=Lightbox.mocks.js.map

package/jsx/core/Lightbox/Lightbox.mocks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Lightbox.mocks.js","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.mocks.ts"],"names":[],"mappings":"~~AAAA~~,MAAM,CAAC,MAAM,~~qBAAqB~~,GAAG;~~IACnC~~;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,~~SAAS~~,EAAE,~~YAAY~~;~~QACvB~~,~~SAAS~~,~~EACP~~,wIAAwI;~~KAC3I~~;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,~~SAAS~~,EAAE,~~YAAY~~;~~QACvB~~,~~SAAS~~,~~EACP~~,wIAAwI;~~KAC3I~~;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,~~SAAS~~,EAAE,~~YAAY~~;~~QACvB~~,~~SAAS~~,~~EACP~~,wIAAwI;~~KAC3I~~;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,~~SAAS~~,EAAE,~~YAAY~~;~~QACvB~~,~~SAAS~~,~~EACP~~,wIAAwI;~~KAC3I~~;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,~~SAAS~~,EAAE,~~YAAY~~;~~QACvB~~,~~SAAS~~,~~EACP~~,wIAAwI;~~KAC3I~~;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,~~SAAS~~,EAAE,~~YAAY~~;~~QACvB~~,~~SAAS~~,~~EACP~~,wIAAwI;~~KAC3I~~;IACD;QACE,EAAE,EAAE,~~kCAAkC~~;~~QACtC~~,IAAI,EAAE,~~SAAS~~;~~QACf~~,WAAW,EAAE,gCAAgC;QAC7C,~~SAAS~~,EAAE,~~YAAY~~;~~QACvB~~,~~SAAS~~,~~EACP~~,gKAAgK;~~KACnK~~;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,~~oBAAoB~~,GAAG;~~IAClC~~,EAAE,EAAE,~~OAAO~~;~~IACX~~,IAAI,EAAE,YAAY;~~IAClB~~,WAAW,EAAE,mCAAmC;~~IAChD~~,~~SAAS~~,EAAE,~~YAAY~~;~~IACvB~~,SAAS,EAAE,~~EAAE~~;~~CACd~~,CAAC","sourcesContent":["~~export~~ const ~~mockAPIImageResources~~ = [\n {\n id: 'photo-1497752531616-c3afd9760a11',\n name: 'Image 1',\n description: 'Descriptive text about Image 1',\n ~~mime_type~~: '~~image/avif~~',\n ~~media_url:\n~~ 'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'\n },\n {\n id: 'photo-1470093851219-69951fcbb533',\n name: 'Image 2',\n description: 'Descriptive text about Image 2',\n ~~mime_type~~: '~~image/avif~~',\n ~~media_url:\n~~ 'https://images.unsplash.com/photo-1470093851219-69951fcbb533?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'\n },\n {\n id: 'photo-1447684808650-354ae64db5b8',\n name: 'Image 3',\n description: 'Descriptive text about Image 3',\n ~~mime_type~~: '~~image/avif~~',\n ~~media_url:\n~~ 'https://images.unsplash.com/photo-1447684808650-354ae64db5b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2094&q=80'\n },\n {\n id: 'photo-1425082661705-1834bfd09dca',\n name: 'Image 4',\n description: 'Descriptive text about Image 4',\n ~~mime_type~~: '~~image/avif~~',\n ~~media_url:\n~~ 'https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2110&q=80'\n },\n {\n id: 'photo-1494256997604-768d1f608cac',\n name: 'Image 5',\n description: 'Descriptive text about Image 5',\n ~~mime_type~~: '~~image/avif~~',\n ~~media_url:\n~~ 'https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2301&q=80'\n },\n {\n id: 'photo-1500694216671-a4e54fc4b513',\n name: 'Image 6',\n description: 'Descriptive text about Image 6',\n ~~mime_type~~: '~~image/avif~~',\n ~~media_url:\n~~ 'https://images.unsplash.com/photo-1500694216671-a4e54fc4b513?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2092&q=80'\n },\n {\n id: '~~photo-1638292597251-6fe6b2ba50f9~~',\n name: '~~Image~~ 7',\n description: 'Descriptive text about Image 7',\n ~~mime_type~~: '~~image/avif~~',\n ~~media_url:\n~~ 'https://images.unsplash.com/photo-1638292597251-6fe6b2ba50f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'\n }\n];\n\nexport const ~~mockBadImageResource~~ = {\n id: 'error',\n name: 'Some image',\n description: 'Descriptive text about Some image',\n ~~mime_type~~: '~~image/avif~~',\n ~~media_url~~: ''\n};\n"]}
1	+ {"version":3,"file":"Lightbox.mocks.js","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.mocks.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,MAAM,EAAE,MAAM;QACd,GAAG,EAAE,wIAAwI;KAC9I;IACD;QACE,EAAE,EAAE,OAAO;QACX,IAAI,EAAE,cAAc;QACpB,WAAW,EAAE,oDAAoD;QACjE,GAAG,EAAE,gDAAgD;QACrD,MAAM,EAAE,KAAK;KACd;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,MAAM,EAAE,MAAM;QACd,GAAG,EAAE,wIAAwI;KAC9I;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,MAAM,EAAE,MAAM;QACd,GAAG,EAAE,wIAAwI;KAC9I;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,MAAM,EAAE,MAAM;QACd,GAAG,EAAE,wIAAwI;KAC9I;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,MAAM,EAAE,MAAM;QACd,GAAG,EAAE,wIAAwI;KAC9I;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,MAAM,EAAE,MAAM;QACd,GAAG,EAAE,wIAAwI;KAC9I;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,WAAW;QACjB,WAAW,EAAE,sCAAsC;QACnD,MAAM,EAAE,MAAM;QACd,GAAG,EAAE,IAAI;KACV;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,UAAU;QAChB,WAAW,EAAE,0CAA0C;QACvD,MAAM,EAAE,KAAK;QACb,GAAG,EAAE,IAAI;KACV;IACD;QACE,EAAE,EAAE,iBAAiB;QACrB,IAAI,EAAE,WAAW;QACjB,WAAW,EAAE,gCAAgC;QAC7C,MAAM,EAAE,KAAK;QACb,GAAG,EAAE,gKAAgK;KACtK;IACD;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,WAAW;QACjB,WAAW,EAAE,6BAA6B;QAC1C,MAAM,EAAE,KAAK;QACb,GAAG,EAAE,IAAI;KACV;IACD;QACE,EAAE,EAAE,OAAO;QACX,IAAI,EAAE,WAAW;QACjB,WAAW,EAAE,uBAAuB;QACpC,MAAM,EAAE,MAAM;QAEd,GAAG,EAAE,mCAAmC;KACzC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B;QACE,EAAE,EAAE,aAAa;QACjB,IAAI,EAAE,YAAY;QAClB,WAAW,EAAE,mCAAmC;QAChD,GAAG,EAAE,EAAE;QACP,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,IAAI;KACZ;CACF,CAAC","sourcesContent":["// cspell:words wordprocessingml\nexport const mockData = [\n {\n id: 'photo-1497752531616-c3afd9760a11',\n name: 'Image 1',\n description: 'Descriptive text about Image 1',\n format: 'jpeg',\n src: 'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'\n },\n {\n id: 'pdf-1',\n name: 'Sample-PDF 1',\n description: 'Descriptive text about Dictionary of old Icelandic',\n src: 'https://css4.pub/2015/icelandic/dictionary.pdf',\n format: 'pdf'\n },\n {\n id: 'photo-1470093851219-69951fcbb533',\n name: 'Image 2',\n description: 'Descriptive text about Image 2',\n format: 'jpeg',\n src: 'https://images.unsplash.com/photo-1470093851219-69951fcbb533?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'\n },\n {\n id: 'photo-1447684808650-354ae64db5b8',\n name: 'Image 3',\n description: 'Descriptive text about Image 3',\n format: 'jpeg',\n src: 'https://images.unsplash.com/photo-1447684808650-354ae64db5b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2094&q=80'\n },\n {\n id: 'photo-1425082661705-1834bfd09dca',\n name: 'Image 4',\n description: 'Descriptive text about Image 4',\n format: 'jpeg',\n src: 'https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2110&q=80'\n },\n {\n id: 'photo-1494256997604-768d1f608cac',\n name: 'Image 5',\n description: 'Descriptive text about Image 5',\n format: 'jpeg',\n src: 'https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2301&q=80'\n },\n {\n id: 'photo-1500694216671-a4e54fc4b513',\n name: 'Image 6',\n description: 'Descriptive text about Image 6',\n format: 'jpeg',\n src: 'https://images.unsplash.com/photo-1500694216671-a4e54fc4b513?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2092&q=80'\n },\n {\n id: 'doc1',\n name: 'Pega.docx',\n description: 'Descriptive text about Pega document',\n format: 'docx',\n src: null\n },\n {\n id: 'ppt2',\n name: 'Pega.odp',\n description: 'Descriptive text about Presentation file',\n format: 'odp',\n src: null\n },\n {\n id: 'attachment_link',\n name: 'Link file',\n description: 'Descriptive text about Image 7',\n format: 'url',\n src: 'https://images.unsplash.com/photo-1638292597251-6fe6b2ba50f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'\n },\n {\n id: 'generic',\n name: 'Pega file',\n description: 'Descriptive text about file',\n format: '3ds',\n src: null\n },\n {\n id: 'error',\n name: 'Pega file',\n description: 'Error showing content',\n format: 'jpeg',\n // invalid url\n src: 'https://images.unsplash.com/photo'\n }\n];\n\nexport const mockBadResources = [\n {\n id: 'image-error',\n name: 'Some image',\n description: 'Descriptive text about Some image',\n src: '',\n format: undefined,\n error: true\n }\n];\n"]}

package/jsx/core/Lightbox/Lightbox.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Lightbox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAQtD,~~wBAGU~~;AAEV,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,kBAAkB,~~CAqDpD~~,CAAC"}
1	+ {"version":3,"file":"Lightbox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAQtD,wBAMU;AAEV,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,kBAAkB,CAoEpD,CAAC"}

package/jsx/core/Lightbox/Lightbox.stories.jsx CHANGED Viewed

@@ -1,49 +1,64 @@
 import { useRef, useState } from 'react';
 import { Button, DateTimeDisplay, Lightbox } from '@pega/cosmos-react-core';
-import { mockAPIImageResources, mockBadImageResource } from './Lightbox.mocks';
+import { mockData, mockBadResources } from './Lightbox.mocks';
 export default {
     title: 'Core/Lightbox',
-    component: Lightbox
+    component: Lightbox,
+    parameters: {
+        layout: 'centered'
+    }
 };
 export const LightboxDemo = (args) => {
     const demoButtonRef = useRef(null);
-    const [images, setImages] = useState(null);
+    const [open, setOpen] = useState(false);
+    const [items, setItems] = useState();
     const onClick = () => {
-        setImages((args.error ? [mockBadImageResource] : mockAPIImageResources.slice(0, args.limit)).map(({ id, name, description, mime_type, media_url }) => {
+        setItems((args.error ? mockBadResources : mockData.slice(0, args.limit)).map(item => {
             return {
-                id,
-                name,
-                description,
-                src: media_url,
+                ...item,
                 metadata: [
-                    mime_type.split('/').pop(),
+                    item.format,
+                    'John smith',
                     <DateTimeDisplay value={new Date()} variant='date'/>
                 ]
             };
         }));
     };
     const onItemDownload = async (id) => {
-        const a = document.createElement('a');
-        a.href = await fetch(id)
-            .then(response => response.blob())
-            .then(blob => URL.createObjectURL(blob));
-        a.download = images?.find(image => image.id === id)?.name ?? id;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
+        const currentItem = items?.find(item => item.id === id);
+        if (!currentItem)
+            return;
+        if (currentItem.src) {
+            const objectURL = URL.createObjectURL(await (await fetch(currentItem.src)).blob());
+            const a = document.createElement('a');
+            a.href = objectURL;
+            a.download = currentItem.name ?? id;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(objectURL);
+        }
+    };
+    const onItemError = (id) => {
+        setItems(item => {
+            return item?.map(obj => (obj.id === id ? { ...obj, error: true } : obj));
+        });
     };
     return (<>
-      <Button ref={demoButtonRef} onClick={onClick}>
+      <Button ref={demoButtonRef} onClick={() => {
+            setOpen(true);
+            onClick();
+        }}>
         Open Lightbox
       </Button>
-      {images && (<Lightbox items={images} cycle={args.cycle || undefined} onAfterClose={() => {
-                setImages(null);
+      {open && (<Lightbox items={items ?? []} cycle={args.cycle || undefined} onAfterClose={() => {
+                setOpen(false);
                 demoButtonRef.current?.focus();
-            }} onItemDownload={onItemDownload}/>)}
+            }} onItemDownload={onItemDownload} onItemError={onItemError}/>)}
     </>);
 };
 LightboxDemo.args = {
-    limit: 7,
+    limit: 12,
     cycle: false,
     error: false
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Lightbox.stories.jsx","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAG5E,OAAO,EAAE,~~qBAAqB~~,EAAE,~~oBAAoB~~,EAAE,MAAM,kBAAkB,CAAC;~~AAE/E~~,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;~~CACZ~~,CAAC;AAQV,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,IAAwB,EAAE,EAAE;IACpF,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,~~MAAM~~,EAAE,~~SAAS~~,CAAC,GAAG,QAAQ,~~CAAgC~~,~~IAAI~~,CAAC,CAAC;~~IAE1E~~,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,~~SAAS~~,~~CACP~~,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,~~CAAC~~,~~oBAAoB,~~CAAC,CAAC,CAAC,~~CAAC~~,~~qBAAqB,~~CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,~~CACpF,~~CAAC,~~EAAE,EAAE,EAAE,~~IAAI,~~EAAE~~,~~WAAW,~~EAAE~~,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE~~;~~YAClD~~,OAAO;gBACL,~~EAAE;gBACF~~,IAAI;~~gBACJ~~,~~WAAW;gBACX,GAAG,EAAE,SAAS;gBACd,~~QAAQ,EAAE;oBACR,~~SAAS~~,CAAC,~~KAAK~~,~~CAAC,GAAG,CAAC,CAAC,GAAG,EAAE~~;~~oBAC1B~~,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAG;iBACtD;aACF,CAAC;QACJ,CAAC,~~CACF~~,~~CACF~~,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,KAAK,EAAE,EAAsB,EAAE,EAAE;QACtD,MAAM,~~CAAC~~,GAAG,~~QAAQ~~,CAAC,~~aAAa~~,CAAC,~~GAAG~~,CAAC,CAAC~~;QACtC~~,CAAC,CAAC,IAAI,GAAG,MAAM,~~KAAK~~,CAAC,~~EAAE~~,CAAC~~;aACrB~~,~~IAAI~~,CAAC,~~QAAQ~~,CAAC,~~EAAE~~,CAAC,~~QAAQ~~,CAAC,IAAI,EAAE,CAAC;~~aACjC~~,~~IAAI~~,CAAC,~~IAAI~~,CAAC,~~EAAE~~,CAAC,GAAG,CAAC,~~eAAe~~,CAAC,IAAI,~~CAAC~~,~~CAAC~~,CAAC;~~QAE3C~~,CAAC,CAAC,QAAQ,GAAG,~~MAAM~~,EAAE,IAAI,CAAC,~~KAAK~~,CAAC,~~EAAE~~,CAAC,~~KAAK~~,CAAC,~~EAAE~~,KAAK,EAAE,CAAC,~~EAAE~~,~~IAAI~~,IAAI,~~EAAE~~,CAAC;~~QAChE~~,~~QAAQ~~,CAAC,~~IAAI~~,CAAC,~~WAAW~~,CAAC,CAAC,CAAC,CAAC;~~QAC7B~~,CAAC,CAAC,KAAK,EAAE,CAAC~~;QACV~~,~~QAAQ~~,CAAC,IAAI,CAAC,~~WAAW~~,CAAC,CAAC,CAAC,CAAC;~~IAC/B~~,CAAC,CAAC;IAEF,OAAO,CACL,EACE;MAAA,CAAC,MAAM,~~CAAC~~,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,~~CAC3C~~;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,~~MAAM~~,IAAI,~~CACT~~,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC,~~MAAM~~,CAAC,~~CACd~~,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,CAC/B,YAAY,CAAC,CAAC,GAAG,EAAE;gBACjB,~~SAAS~~,CAAC,~~IAAI~~,CAAC,CAAC;~~gBAChB~~,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YACjC,CAAC,CAAC,CACF,cAAc,CAAC,CAAC,cAAc,CAAC,~~EAC~~/B,CACH,CACH;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,KAAK,EAAE,~~CAAC~~;~~IACR~~,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;CACb,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACvC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACxC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Button, DateTimeDisplay, Lightbox } from '@pega/cosmos-react-core';\nimport type { LightboxItem, LightboxProps } 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: StoryFn<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"]}
1	+ {"version":3,"file":"Lightbox.stories.jsx","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Button, DateTimeDisplay, Lightbox } from '@pega/cosmos-react-core';\nimport type { LightboxItem, LightboxProps } from '@pega/cosmos-react-core';\n\nimport { mockData, mockBadResources } from './Lightbox.mocks';\n\nexport default {\n title: 'Core/Lightbox',\n component: Lightbox,\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\ninterface LightboxStoryProps {\n limit?: number;\n cycle?: boolean;\n error?: boolean;\n}\n\nexport const LightboxDemo: StoryFn<LightboxStoryProps> = (args: LightboxStoryProps) => {\n const demoButtonRef = useRef<HTMLButtonElement>(null);\n const [open, setOpen] = useState<boolean>(false);\n const [items, setItems] = useState<LightboxProps['items']>();\n\n const onClick = () => {\n setItems(\n (args.error ? mockBadResources : mockData.slice(0, args.limit)).map(item => {\n return {\n ...item,\n metadata: [\n item.format,\n 'John smith',\n <DateTimeDisplay value={new Date()} variant='date' />\n ]\n };\n })\n );\n };\n\n const onItemDownload = async (id: LightboxItem['id']) => {\n const currentItem = items?.find(item => item.id === id);\n if (!currentItem) return;\n\n if (currentItem.src) {\n const objectURL = URL.createObjectURL(await (await fetch(currentItem.src)).blob());\n\n const a = document.createElement('a');\n a.href = objectURL;\n a.download = currentItem.name ?? id;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(objectURL);\n }\n };\n\n const onItemError = (id: LightboxItem['id']) => {\n setItems(item => {\n return item?.map(obj => (obj.id === id ? { ...obj, error: true } : obj));\n });\n };\n\n return (\n <>\n <Button\n ref={demoButtonRef}\n onClick={() => {\n setOpen(true);\n onClick();\n }}\n >\n Open Lightbox\n </Button>\n {open && (\n <Lightbox\n items={items ?? []}\n cycle={args.cycle \|\| undefined}\n onAfterClose={() => {\n setOpen(false);\n demoButtonRef.current?.focus();\n }}\n onItemDownload={onItemDownload}\n onItemError={onItemError}\n />\n )}\n </>\n );\n};\n\nLightboxDemo.args = {\n limit: 12,\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/ListToolbar/ListToolbar.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAM9G,eAAO,MAAM,OAAO,EAAE,MAAM,EAIzB,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,OAAO,CAIhD,CAAC;AAEF,eAAO,MAAM,0BAA0B,2CAA4C,CAAC;~~AAwDpF~~,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,aAAa,mCAEzB,CAAC"}
1	+ {"version":3,"file":"ListToolbar.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAM9G,eAAO,MAAM,OAAO,EAAE,MAAM,EAIzB,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,OAAO,CAIhD,CAAC;AAEF,eAAO,MAAM,0BAA0B,2CAA4C,CAAC;AA8CpF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,aAAa,mCAEzB,CAAC"}

package/jsx/core/ListToolbar/ListToolbar.mocks.jsx CHANGED Viewed

@@ -16,34 +16,26 @@ export const mockViews = [
 export const StagedStateDispatchContext = createContext(() => { });
 const GroupByMock = () => {
     return (<Flex container={{ direction: 'column', gap: 2 }}>
-      <Flex container={{ direction: 'column', gap: 1 }}>
-        <Flex container={{
-            justify: 'between',
-            alignItems: 'center',
-            direction: 'row',
-            wrap: 'nowrap',
-            itemGap: 0.5
-        }}>
-          <Flex container={{
+      <Flex container={{
             justify: 'start',
             alignItems: 'center',
             direction: 'row',
             wrap: 'nowrap',
             itemGap: 0.5
         }} item={{ grow: 1 }}>
-            <Icon name='drag'/>
-            <Flex item={{ grow: 1, basis: '50%' }}>
-              <FieldSelector fields={[]} value='' onChange={() => { }}/>
-            </Flex>
-            <Flex as={Select} item={{ basis: '50%' }}>
-              <Option> </Option>
-              <Option>Item A</Option>
-            </Flex>
-          </Flex>
-          <Button aria-label='Delete group' icon variant='simple'>
-            <Icon name='trash'/>
-          </Button>
+        <Icon name='drag'/>
+        <Flex item={{ basis: '50%' }}>
+          <FieldSelector fields={[]} value='' onChange={() => { }} aria-label='Field'/>
+        </Flex>
+        <Flex item={{ basis: '50%' }}>
+          <Select label='Select' aria-label='Select'>
+            <Option> </Option>
+            <Option>Item A</Option>
+          </Select>
         </Flex>
+        <Button aria-label='Delete group' icon variant='simple'>
+          <Icon name='trash'/>
+        </Button>
       </Flex>
       <Button variant='link' aria-label='Add a group'>
         <Flex container={{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.mocks.jsx","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,aAAa,MAAM,gGAAgG,CAAC;AAE3H,OAAO,EAAE,UAAU,EAAE,MAAM,qDAAqD,CAAC;AAEjF,MAAM,CAAC,MAAM,OAAO,GAAa,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACjF,IAAI;IACJ,EAAE,EAAE,IAAI;IACR,IAAI,EAAE,QAAQ;CACf,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,SAAS,GAA+B;IACnD,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE;IAChD,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE;IACjD,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE;CAClD,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,aAAa,CAAmB,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;AAEpF,MAAM,WAAW,GAAG,GAAG,EAAE;IACvB,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,IAAI,~~CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;QAAA,CAAC,IAAI,~~CACH,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,~~SAAS;YAClB,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,KAAK;YAChB,IAAI,EAAE,QAAQ;YACd,~~OAAO~~,EAAE,GAAG~~;~~SACb,CAAC,CAEF;UAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,OAAO;~~YAChB,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,KAAK;YAChB,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,GAAG;SACb,CAAC,CACF,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAElB;~~YAAA~~,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACjB;~~YAAA~~,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,~~IAAI,EAAE,CAAC,EAAE,~~KAAK,EAAE,KAAK,EAAE,CAAC,~~CACpC~~;~~cAAA~~,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,~~EACzD~~;~~YAAA~~,EAAE,IAAI,CACN;~~YAAA~~,CAAC,IAAI,CAAC,~~EAAE~~,CAAC,CAAC,~~MAAM~~,~~CAAC~~,CAAC,~~IAAI~~,CAAC,CAAC,~~EAAE,~~KAAK,~~EAAE~~,~~KAAK~~,~~EAAE~~,CAAC,~~CACvC~~;~~cAAA~~,CAAC,MAAM,CAAE,CAAA,EAAE,MAAM,CACjB;~~cAAA~~,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CACxB;~~YAAA~~,EAAE,~~IAAI~~,~~CACR~~;~~UAAA~~,EAAE,IAAI,CACN;~~UAAA~~,CAAC,MAAM,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CACrD;~~YAAA~~,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EACpB;~~UAAA~~,EAAE,MAAM,CACV;~~QAAA,EAAE,IAAI,CACR;~~MAAA,EAAE,IAAI,CACN;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAC7C;QAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC;YACT,MAAM,EAAE,IAAI;YACZ,UAAU,EAAE,OAAO;YACnB,GAAG,EAAE,CAAC;SACP,CAAC,CACF,EAAE,CAAC,MAAM,CAET;UAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACjB;UAAA,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CACjB;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,EAAG,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,OAAO,CAAC,WAAW,CAAC,AAAD,EAAG,CAAC;AACzB,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\nimport type { Dispatch } from 'react';\n\nimport { Select, Option, Flex, Button, Icon } from '@pega/cosmos-react-core';\nimport type { Action } from '@pega/cosmos-react-core';\nimport type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\nimport { ConditionBuilder } from '@pega/cosmos-react-condition-builder';\nimport FieldSelector from '@pega/cosmos-react-condition-builder/lib/components/ConditionBuilder/RhsControls/FieldSelector';\n\nimport { demoFields } from '../../condition-builder/ConditionBuilder/props.mock';\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 GroupByMock = () => {\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Flex ~~container={{ direction: 'column', gap: 1 }}>\~~n ~~<Flex\n~~ container={{\n ~~justify: 'between',\n alignItems: 'center',\n direction: 'row',\n wrap: 'nowrap',\n itemGap: 0.5\n~~ ~~}}\n >\n <Flex\n container={{\n~~ justify: 'start',\n alignItems: 'center',\n direction: 'row',\n wrap: 'nowrap',\n itemGap: 0.5\n }}\n item={{ grow: 1 }}\n >\n <Icon name='drag' />\n <Flex item={{ ~~grow: 1,~~ basis: '50%' }}>\n <FieldSelector fields={[]} value='' onChange={() => {}} />\n </Flex>\n <Flex ~~as={Select}~~ item={{ basis: '50%' }}>\n <Option> </Option>\n <Option>Item A</Option>\n </~~Flex~~>\n </Flex>\n <Button aria-label='Delete group' icon variant='simple'>\n <Icon name='trash' />\n </Button>\n ~~</Flex>\n~~ </Flex>\n <Button variant='link' aria-label='Add a group'>\n <Flex\n container={{\n inline: true,\n alignItems: 'start',\n gap: 1\n }}\n as='span'\n >\n <Icon name='plus' />\n <span>Add</span>\n </Flex>\n </Button>\n </Flex>\n );\n};\n\nexport const FilterRenderer = () => {\n return <ConditionBuilder fields={demoFields} />;\n};\n\nexport const GroupRenderer = () => {\n return <GroupByMock />;\n};\n"]}
1	+ {"version":3,"file":"ListToolbar.mocks.jsx","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext } from 'react';\nimport type { Dispatch } from 'react';\n\nimport { Select, Option, Flex, Button, Icon } from '@pega/cosmos-react-core';\nimport type { Action } from '@pega/cosmos-react-core';\nimport type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\nimport { ConditionBuilder } from '@pega/cosmos-react-condition-builder';\nimport FieldSelector from '@pega/cosmos-react-condition-builder/lib/components/ConditionBuilder/RhsControls/FieldSelector';\n\nimport { demoFields } from '../../condition-builder/ConditionBuilder/props.mock';\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 GroupByMock = () => {\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Flex\n container={{\n justify: 'start',\n alignItems: 'center',\n direction: 'row',\n wrap: 'nowrap',\n itemGap: 0.5\n }}\n item={{ grow: 1 }}\n >\n <Icon name='drag' />\n <Flex item={{ basis: '50%' }}>\n <FieldSelector fields={[]} value='' onChange={() => {}} aria-label='Field' />\n </Flex>\n <Flex item={{ basis: '50%' }}>\n <Select label='Select' aria-label='Select'>\n <Option> </Option>\n <Option>Item A</Option>\n </Select>\n </Flex>\n <Button aria-label='Delete group' icon variant='simple'>\n <Icon name='trash' />\n </Button>\n </Flex>\n <Button variant='link' aria-label='Add a group'>\n <Flex\n container={{\n inline: true,\n alignItems: 'start',\n gap: 1\n }}\n as='span'\n >\n <Icon name='plus' />\n <span>Add</span>\n </Flex>\n </Button>\n </Flex>\n );\n};\n\nexport const FilterRenderer = () => {\n return <ConditionBuilder fields={demoFields} />;\n};\n\nexport const GroupRenderer = () => {\n return <GroupByMock />;\n};\n"]}

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

@@ -3,10 +3,15 @@ import type { FormControlProps } from '@pega/cosmos-react-core';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 interface ListToolbarStoryProps {
-    createNewLabel: string;
     required: FormControlProps['required'];
+    info: FormControlProps['info'];
+    status: FormControlProps['status'];
+    createNewLabel: string;
     showAdditionalInfo?: boolean;
+    numberOfSelected: number;
+    bulkButton: boolean;
+    bulkButtonLabel: string;
 }
 export declare const ListToolbarDemo: StoryFn<ListToolbarStoryProps>;
-export declare const SimpleToolbarDemo: StoryFn;
+export declare const SimpleToolbarDemo: StoryFn<ListToolbarStoryProps>;
 //# sourceMappingURL=ListToolbar.stories.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAWtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAWhE,~~wBAGU~~;AAIV,UAAU,qBAAqB;IAC7B,~~cAAc~~,EAAE,MAAM,CAAC;~~IACvB~~,~~QAAQ~~,EAAE,gBAAgB,CAAC,~~UAAU~~,CAAC,CAAC;~~IACvC~~,kBAAkB,CAAC,EAAE,OAAO,CAAC;~~CAC9B~~;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,qBAAqB,~~CAuH1D~~,CAAC;~~AAcF~~,eAAO,MAAM,iBAAiB,EAAE,~~OAU/B~~,CAAC"}
1	+ {"version":3,"file":"ListToolbar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAWtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAWhE,wBAaU;AAIV,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACnC,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,qBAAqB,CAwH1D,CAAC;AAuBF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,qBAAqB,CAY5D,CAAC"}

package/jsx/core/ListToolbar/ListToolbar.stories.jsx CHANGED Viewed

@@ -4,7 +4,17 @@ import { Flex, Link, ListToolbar, MenuButton, listToolbarHelpers as helpers } fr
 import { mockViews, actions, FilterRenderer, StagedStateDispatchContext, GroupRenderer } from './ListToolbar.mocks';
 export default {
     title: 'Core/ListToolbar',
-    component: ListToolbar
+    component: ListToolbar,
+    args: {
+        required: false,
+        info: undefined,
+        status: undefined
+    },
+    argTypes: {
+        required: { control: { type: 'boolean' } },
+        info: { control: { type: 'text' } },
+        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }
+    }
 };
 export const ListToolbarDemo = (args) => {
     const [stagedQueryOptionState, setStagedQueryOptionState] = useState(null);
@@ -79,12 +89,13 @@ export const ListToolbarDemo = (args) => {
             onSearchChange: setSearchValue
         }} count={{
             total: 1146,
-            selected: 4
-        }} filter={filterProp} sort={sortProp} group={groupProp} actions={actions} additionalActions={<MenuButton text='Edit'/>} formControlProps={{
+            selected: args.numberOfSelected
+        }} filter={filterProp} sort={sortProp} group={groupProp} actions={actions} additionalActions={args.bulkButton && <MenuButton text={args.bulkButtonLabel}/>} formControlProps={{
             required: args.required,
+            info: args.info,
+            status: args.status,
             additionalInfo: args.showAdditionalInfo
                 ? {
-                    heading: 'Additional Info',
                     content: (<Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>
                     <p>
                       Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore
@@ -107,15 +118,24 @@ export const ListToolbarDemo = (args) => {
 };
 ListToolbarDemo.args = {
     createNewLabel: undefined,
-    required: false,
-    showAdditionalInfo: false
+    showAdditionalInfo: false,
+    numberOfSelected: 4,
+    bulkButton: true,
+    bulkButtonLabel: 'Edit'
 };
 ListToolbarDemo.argTypes = {
     createNewLabel: { control: { type: 'text' } },
-    required: { control: { type: 'boolean' } },
-    showAdditionalInfo: { control: { type: 'boolean' } }
+    showAdditionalInfo: { control: { type: 'boolean' } },
+    numberOfSelected: { control: { type: 'number' } },
+    bulkButton: { control: { type: 'boolean' } },
+    bulkButtonLabel: { control: { type: 'text' } }
 };
-export const SimpleToolbarDemo = () => {
-    return (<ListToolbar name='Top accounts in California' search={{ onSearchSubmit: action('Search submit') }} count={{ total: 212, totalHasMore: true }} actions={actions} formControlProps={{ required: true }}/>);
+export const SimpleToolbarDemo = (args) => {
+    return (<ListToolbar name='Top accounts in California' search={{ onSearchSubmit: action('Search submit') }} count={{ total: 212, totalHasMore: true }} actions={actions} formControlProps={args}/>);
+};
+SimpleToolbarDemo.args = {
+    required: true,
+    info: 'Info message',
+    status: 'error'
 };
 //# sourceMappingURL=ListToolbar.stories.jsx.map