npm - @pega/cosmos-react-demos - Versions diffs - 5.0.0-dev.10.4 → 5.0.0-dev.10.5 - Mend

@pega/cosmos-react-demos 5.0.0-dev.10.4 → 5.0.0-dev.10.5

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 (15) hide show

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":"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,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;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACjB;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAC3B;UAAA,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,EAC5E;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAC3B;UAAA,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,QAAQ,CACxC;YAAA,CAAC,MAAM,CAAE,CAAA,EAAE,MAAM,CACjB;YAAA,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CACxB;UAAA,EAAE,MAAM,CACV;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,MAAM,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CACrD;UAAA,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EACpB;QAAA,EAAE,MAAM,CACV;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\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

@@ -8,6 +8,9 @@ interface ListToolbarStoryProps {
     status: FormControlProps['status'];
     createNewLabel: string;
     showAdditionalInfo?: boolean;
+    numberOfSelected: number;
+    bulkButton: boolean;
+    bulkButtonLabel: string;
 }
 export declare const ListToolbarDemo: StoryFn<ListToolbarStoryProps>;
 export declare const SimpleToolbarDemo: StoryFn<ListToolbarStoryProps>;

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,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;~~CAC9B~~;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,qBAAqB,CAwH1D,CAAC;~~AAiBF~~,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,qBAAqB,CAY5D,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

@@ -89,8 +89,8 @@ 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,
@@ -118,11 +118,17 @@ export const ListToolbarDemo = (args) => {
 };
 ListToolbarDemo.args = {
     createNewLabel: undefined,
-    showAdditionalInfo: false
+    showAdditionalInfo: false,
+    numberOfSelected: 4,
+    bulkButton: true,
+    bulkButtonLabel: 'Edit'
 };
 ListToolbarDemo.argTypes = {
     createNewLabel: { control: { type: 'text' } },
-    showAdditionalInfo: { control: { type: 'boolean' } }
+    showAdditionalInfo: { control: { type: 'boolean' } },
+    numberOfSelected: { control: { type: 'number' } },
+    bulkButton: { control: { type: 'boolean' } },
+    bulkButtonLabel: { control: { type: 'text' } }
 };
 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}/>);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.stories.jsx","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Flex,\n Link,\n ListToolbar,\n MenuButton,\n listToolbarHelpers as helpers\n} from '@pega/cosmos-react-core';\nimport type { FormControlProps } from '@pega/cosmos-react-core';\nimport type { 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 args: {\n required: false,\n info: undefined,\n status: undefined\n },\n argTypes: {\n required: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n }\n} as Meta;\n\ntype SortString = 'asc' \| 'desc';\n\ninterface ListToolbarStoryProps {\n required: FormControlProps['required'];\n info: FormControlProps['info'];\n status: FormControlProps['status'];\n createNewLabel: string;\n showAdditionalInfo?: boolean;\n}\n\nexport const ListToolbarDemo: StoryFn<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 const [searchValue, setSearchValue] = useState('');\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 <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n <ListToolbar\n name='Contacts'\n viewSelector={{\n views,\n onViewSelect: id => {\n setViews(cur => {\n return helpers.selectView(cur, 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={{\n onSearchSubmit: action('Search submit'),\n value: searchValue,\n onSearchChange: setSearchValue\n }}\n count={{\n total: 1146,\n selected: 4\n }}\n filter={filterProp}\n sort={sortProp}\n group={groupProp}\n actions={actions}\n additionalActions={<MenuButton text='Edit' />}\n formControlProps={{\n required: args.required,\n info: args.info,\n status: args.status,\n additionalInfo: args.showAdditionalInfo\n ? {\n content: (\n <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n <p>\n Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n semper feugiat nibh sed pulvinar proin gravida.\n </p>\n <p>\n Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim\n nulla aliquet porttitor lacus.\n </p>\n <Link href='/' target='_blank'>\n Neque vitae\n </Link>\n </Flex>\n )\n }\n : undefined\n }}\n />\n </StagedStateDispatchContext.Provider>\n );\n};\n\nListToolbarDemo.args = {\n createNewLabel: undefined,\n showAdditionalInfo: false\n};\n\nListToolbarDemo.argTypes = {\n createNewLabel: { control: { type: 'text' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\ninterface SimpleToolbarStoryProps {\n required: FormControlProps['required'];\n info: FormControlProps['info'];\n status: FormControlProps['status'];\n}\nexport const SimpleToolbarDemo: StoryFn<ListToolbarStoryProps> = (\n args: SimpleToolbarStoryProps\n) => {\n return (\n <ListToolbar\n name='Top accounts in California'\n search={{ onSearchSubmit: action('Search submit') }}\n count={{ total: 212, totalHasMore: true }}\n actions={actions}\n formControlProps={args}\n />\n );\n};\n\nSimpleToolbarDemo.args = {\n required: true,\n info: 'Info message',\n status: 'error'\n};\n"]}
1	+ {"version":3,"file":"ListToolbar.stories.jsx","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Flex,\n Link,\n ListToolbar,\n MenuButton,\n listToolbarHelpers as helpers\n} from '@pega/cosmos-react-core';\nimport type { FormControlProps } from '@pega/cosmos-react-core';\nimport type { 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 args: {\n required: false,\n info: undefined,\n status: undefined\n },\n argTypes: {\n required: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n }\n} as Meta;\n\ntype SortString = 'asc' \| 'desc';\n\ninterface ListToolbarStoryProps {\n required: FormControlProps['required'];\n info: FormControlProps['info'];\n status: FormControlProps['status'];\n createNewLabel: string;\n showAdditionalInfo?: boolean;\n numberOfSelected: number;\n bulkButton: boolean;\n bulkButtonLabel: string;\n}\n\nexport const ListToolbarDemo: StoryFn<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 const [searchValue, setSearchValue] = useState('');\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 <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n <ListToolbar\n name='Contacts'\n viewSelector={{\n views,\n onViewSelect: id => {\n setViews(cur => {\n return helpers.selectView(cur, 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={{\n onSearchSubmit: action('Search submit'),\n value: searchValue,\n onSearchChange: setSearchValue\n }}\n count={{\n total: 1146,\n selected: args.numberOfSelected\n }}\n filter={filterProp}\n sort={sortProp}\n group={groupProp}\n actions={actions}\n additionalActions={args.bulkButton && <MenuButton text={args.bulkButtonLabel} />}\n formControlProps={{\n required: args.required,\n info: args.info,\n status: args.status,\n additionalInfo: args.showAdditionalInfo\n ? {\n content: (\n <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n <p>\n Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n semper feugiat nibh sed pulvinar proin gravida.\n </p>\n <p>\n Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim\n nulla aliquet porttitor lacus.\n </p>\n <Link href='/' target='_blank'>\n Neque vitae\n </Link>\n </Flex>\n )\n }\n : undefined\n }}\n />\n </StagedStateDispatchContext.Provider>\n );\n};\n\nListToolbarDemo.args = {\n createNewLabel: undefined,\n showAdditionalInfo: false,\n numberOfSelected: 4,\n bulkButton: true,\n bulkButtonLabel: 'Edit'\n};\n\nListToolbarDemo.argTypes = {\n createNewLabel: { control: { type: 'text' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n numberOfSelected: { control: { type: 'number' } },\n bulkButton: { control: { type: 'boolean' } },\n bulkButtonLabel: { control: { type: 'text' } }\n};\n\ninterface SimpleToolbarStoryProps {\n required: FormControlProps['required'];\n info: FormControlProps['info'];\n status: FormControlProps['status'];\n}\nexport const SimpleToolbarDemo: StoryFn<ListToolbarStoryProps> = (\n args: SimpleToolbarStoryProps\n) => {\n return (\n <ListToolbar\n name='Top accounts in California'\n search={{ onSearchSubmit: action('Search submit') }}\n count={{ total: 212, totalHasMore: true }}\n actions={actions}\n formControlProps={args}\n />\n );\n};\n\nSimpleToolbarDemo.args = {\n required: true,\n info: 'Info message',\n status: 'error'\n};\n"]}

package/lib/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,mBAE1B,CAAC;AAEF,eAAO,MAAM,aAAa,mBAEzB,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,mBAE1B,CAAC;AAEF,eAAO,MAAM,aAAa,mBAEzB,CAAC"}

package/lib/core/ListToolbar/ListToolbar.mocks.js CHANGED Viewed

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

package/lib/core/ListToolbar/ListToolbar.mocks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.mocks.js","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,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,~~KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAC9C,~~MAAC,IAAI,IACH,SAAS,EAAE;~~wBACT~~,OAAO,EAAE,~~SAAS;wBAClB,UAAU,EAAE,QAAQ;wBACpB,SAAS,EAAE,KAAK;wBAChB,IAAI,EAAE,QAAQ;wBACd,~~OAAO~~,EAAE,GAAG~~;~~qBACb~~,~~aAED,MAAC,IAAI,IACH,SAAS,EAAE;gCACT,OAAO,EAAE,OAAO;gCAChB,~~UAAU,EAAE,QAAQ;~~gCACpB~~,SAAS,EAAE,KAAK;~~gCAChB~~,IAAI,EAAE,QAAQ;~~gCACd~~,OAAO,EAAE,GAAG;~~6BACb~~,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAEjB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,~~IAAI,EAAE,CAAC,EAAE,~~KAAK,EAAE,KAAK,EAAE,~~YACnC~~,KAAC,aAAa,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,~~GAAI~~,~~GACrD~~,EACP,~~MAAC~~,IAAI,IAAC,EAAE,EAAE,~~MAAM~~,EAAE,~~IAAI~~,EAAE,~~EAAE~~,~~KAAK~~,~~EAAE~~,KAAK,~~EAAE~~,~~aACtC~~,KAAC,MAAM,oBAAW,EAClB,KAAC,MAAM,yBAAgB,~~IAClB~~,~~IACF~~,EACP,KAAC,MAAM,kBAAY,cAAc,EAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,YACrD,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,~~GACF,~~EACP,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,gBAAY,aAAa,YAC7C,MAAC,IAAI,IACH,SAAS,EAAE;wBACT,MAAM,EAAE,IAAI;wBACZ,UAAU,EAAE,OAAO;wBACnB,GAAG,EAAE,CAAC;qBACP,EACD,EAAE,EAAC,MAAM,aAET,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,iCAAgB,IACX,GACA,IACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,KAAC,gBAAgB,IAAC,MAAM,EAAE,UAAU,GAAI,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,OAAO,KAAC,WAAW,KAAG,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.js","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,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,OAAO,EAAE,OAAO;oBAChB,UAAU,EAAE,QAAQ;oBACpB,SAAS,EAAE,KAAK;oBAChB,IAAI,EAAE,QAAQ;oBACd,OAAO,EAAE,GAAG;iBACb,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAEjB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,YAC1B,KAAC,aAAa,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,gBAAa,OAAO,GAAG,GACxE,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,YAC1B,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,gBAAY,QAAQ,aACxC,KAAC,MAAM,oBAAW,EAClB,KAAC,MAAM,yBAAgB,IAChB,GACJ,EACP,KAAC,MAAM,kBAAY,cAAc,EAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,YACrD,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACP,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,gBAAY,aAAa,YAC7C,MAAC,IAAI,IACH,SAAS,EAAE;wBACT,MAAM,EAAE,IAAI;wBACZ,UAAU,EAAE,OAAO;wBACnB,GAAG,EAAE,CAAC;qBACP,EACD,EAAE,EAAC,MAAM,aAET,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,iCAAgB,IACX,GACA,IACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,KAAC,gBAAgB,IAAC,MAAM,EAAE,UAAU,GAAI,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,OAAO,KAAC,WAAW,KAAG,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\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/lib/core/ListToolbar/ListToolbar.stories.d.ts CHANGED Viewed

@@ -8,6 +8,9 @@ interface ListToolbarStoryProps {
     status: FormControlProps['status'];
     createNewLabel: string;
     showAdditionalInfo?: boolean;
+    numberOfSelected: number;
+    bulkButton: boolean;
+    bulkButtonLabel: string;
 }
 export declare const ListToolbarDemo: StoryFn<ListToolbarStoryProps>;
 export declare const SimpleToolbarDemo: StoryFn<ListToolbarStoryProps>;

package/lib/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,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;~~CAC9B~~;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,qBAAqB,CAwH1D,CAAC;~~AAiBF~~,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,qBAAqB,CAY5D,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/lib/core/ListToolbar/ListToolbar.stories.js CHANGED Viewed

@@ -90,8 +90,8 @@ export const ListToolbarDemo = (args) => {
                 onSearchChange: setSearchValue
             }, count: {
                 total: 1146,
-                selected: 4
-            }, filter: filterProp, sort: sortProp, group: groupProp, actions: actions, additionalActions: _jsx(MenuButton, { text: 'Edit' }), formControlProps: {
+                selected: args.numberOfSelected
+            }, filter: filterProp, sort: sortProp, group: groupProp, actions: actions, additionalActions: args.bulkButton && _jsx(MenuButton, { text: args.bulkButtonLabel }), formControlProps: {
                 required: args.required,
                 info: args.info,
                 status: args.status,
@@ -104,11 +104,17 @@ export const ListToolbarDemo = (args) => {
 };
 ListToolbarDemo.args = {
     createNewLabel: undefined,
-    showAdditionalInfo: false
+    showAdditionalInfo: false,
+    numberOfSelected: 4,
+    bulkButton: true,
+    bulkButtonLabel: 'Edit'
 };
 ListToolbarDemo.argTypes = {
     createNewLabel: { control: { type: 'text' } },
-    showAdditionalInfo: { control: { type: 'boolean' } }
+    showAdditionalInfo: { control: { type: 'boolean' } },
+    numberOfSelected: { control: { type: 'number' } },
+    bulkButton: { control: { type: 'boolean' } },
+    bulkButtonLabel: { control: { type: 'text' } }
 };
 export const SimpleToolbarDemo = (args) => {
     return (_jsx(ListToolbar, { name: 'Top accounts in California', search: { onSearchSubmit: action('Search submit') }, count: { total: 212, totalHasMore: true }, actions: actions, formControlProps: args }));

package/lib/core/ListToolbar/ListToolbar.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.stories.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Flex,\n Link,\n ListToolbar,\n MenuButton,\n listToolbarHelpers as helpers\n} from '@pega/cosmos-react-core';\nimport type { FormControlProps } from '@pega/cosmos-react-core';\nimport type { 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 args: {\n required: false,\n info: undefined,\n status: undefined\n },\n argTypes: {\n required: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n }\n} as Meta;\n\ntype SortString = 'asc' \| 'desc';\n\ninterface ListToolbarStoryProps {\n required: FormControlProps['required'];\n info: FormControlProps['info'];\n status: FormControlProps['status'];\n createNewLabel: string;\n showAdditionalInfo?: boolean;\n}\n\nexport const ListToolbarDemo: StoryFn<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 const [searchValue, setSearchValue] = useState('');\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 <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n <ListToolbar\n name='Contacts'\n viewSelector={{\n views,\n onViewSelect: id => {\n setViews(cur => {\n return helpers.selectView(cur, 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={{\n onSearchSubmit: action('Search submit'),\n value: searchValue,\n onSearchChange: setSearchValue\n }}\n count={{\n total: 1146,\n selected: 4\n }}\n filter={filterProp}\n sort={sortProp}\n group={groupProp}\n actions={actions}\n additionalActions={<MenuButton text='Edit' />}\n formControlProps={{\n required: args.required,\n info: args.info,\n status: args.status,\n additionalInfo: args.showAdditionalInfo\n ? {\n content: (\n <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n <p>\n Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n semper feugiat nibh sed pulvinar proin gravida.\n </p>\n <p>\n Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim\n nulla aliquet porttitor lacus.\n </p>\n <Link href='/' target='_blank'>\n Neque vitae\n </Link>\n </Flex>\n )\n }\n : undefined\n }}\n />\n </StagedStateDispatchContext.Provider>\n );\n};\n\nListToolbarDemo.args = {\n createNewLabel: undefined,\n showAdditionalInfo: false\n};\n\nListToolbarDemo.argTypes = {\n createNewLabel: { control: { type: 'text' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\ninterface SimpleToolbarStoryProps {\n required: FormControlProps['required'];\n info: FormControlProps['info'];\n status: FormControlProps['status'];\n}\nexport const SimpleToolbarDemo: StoryFn<ListToolbarStoryProps> = (\n args: SimpleToolbarStoryProps\n) => {\n return (\n <ListToolbar\n name='Top accounts in California'\n search={{ onSearchSubmit: action('Search submit') }}\n count={{ total: 212, totalHasMore: true }}\n actions={actions}\n formControlProps={args}\n />\n );\n};\n\nSimpleToolbarDemo.args = {\n required: true,\n info: 'Info message',\n status: 'error'\n};\n"]}
1	+ {"version":3,"file":"ListToolbar.stories.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Flex,\n Link,\n ListToolbar,\n MenuButton,\n listToolbarHelpers as helpers\n} from '@pega/cosmos-react-core';\nimport type { FormControlProps } from '@pega/cosmos-react-core';\nimport type { 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 args: {\n required: false,\n info: undefined,\n status: undefined\n },\n argTypes: {\n required: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n }\n} as Meta;\n\ntype SortString = 'asc' \| 'desc';\n\ninterface ListToolbarStoryProps {\n required: FormControlProps['required'];\n info: FormControlProps['info'];\n status: FormControlProps['status'];\n createNewLabel: string;\n showAdditionalInfo?: boolean;\n numberOfSelected: number;\n bulkButton: boolean;\n bulkButtonLabel: string;\n}\n\nexport const ListToolbarDemo: StoryFn<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 const [searchValue, setSearchValue] = useState('');\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 <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n <ListToolbar\n name='Contacts'\n viewSelector={{\n views,\n onViewSelect: id => {\n setViews(cur => {\n return helpers.selectView(cur, 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={{\n onSearchSubmit: action('Search submit'),\n value: searchValue,\n onSearchChange: setSearchValue\n }}\n count={{\n total: 1146,\n selected: args.numberOfSelected\n }}\n filter={filterProp}\n sort={sortProp}\n group={groupProp}\n actions={actions}\n additionalActions={args.bulkButton && <MenuButton text={args.bulkButtonLabel} />}\n formControlProps={{\n required: args.required,\n info: args.info,\n status: args.status,\n additionalInfo: args.showAdditionalInfo\n ? {\n content: (\n <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n <p>\n Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n semper feugiat nibh sed pulvinar proin gravida.\n </p>\n <p>\n Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim\n nulla aliquet porttitor lacus.\n </p>\n <Link href='/' target='_blank'>\n Neque vitae\n </Link>\n </Flex>\n )\n }\n : undefined\n }}\n />\n </StagedStateDispatchContext.Provider>\n );\n};\n\nListToolbarDemo.args = {\n createNewLabel: undefined,\n showAdditionalInfo: false,\n numberOfSelected: 4,\n bulkButton: true,\n bulkButtonLabel: 'Edit'\n};\n\nListToolbarDemo.argTypes = {\n createNewLabel: { control: { type: 'text' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n numberOfSelected: { control: { type: 'number' } },\n bulkButton: { control: { type: 'boolean' } },\n bulkButtonLabel: { control: { type: 'text' } }\n};\n\ninterface SimpleToolbarStoryProps {\n required: FormControlProps['required'];\n info: FormControlProps['info'];\n status: FormControlProps['status'];\n}\nexport const SimpleToolbarDemo: StoryFn<ListToolbarStoryProps> = (\n args: SimpleToolbarStoryProps\n) => {\n return (\n <ListToolbar\n name='Top accounts in California'\n search={{ onSearchSubmit: action('Search submit') }}\n count={{ total: 212, totalHasMore: true }}\n actions={actions}\n formControlProps={args}\n />\n );\n};\n\nSimpleToolbarDemo.args = {\n required: true,\n info: 'Info message',\n status: 'error'\n};\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-demos",
-  "version": "5.0.0-dev.10.4",
+  "version": "5.0.0-dev.10.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pegasystems/cosmos-react.git",
@@ -19,12 +19,12 @@
     "build": "tsc -b tsconfig.build.json && tsc -b tsconfig.build-preserve.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-condition-builder": "5.0.0-dev.10.4",
-    "@pega/cosmos-react-core": "5.0.0-dev.10.4",
-    "@pega/cosmos-react-dnd": "5.0.0-dev.10.4",
-    "@pega/cosmos-react-rte": "5.0.0-dev.10.4",
-    "@pega/cosmos-react-social": "5.0.0-dev.10.4",
-    "@pega/cosmos-react-work": "5.0.0-dev.10.4",
+    "@pega/cosmos-react-condition-builder": "5.0.0-dev.10.5",
+    "@pega/cosmos-react-core": "5.0.0-dev.10.5",
+    "@pega/cosmos-react-dnd": "5.0.0-dev.10.5",
+    "@pega/cosmos-react-rte": "5.0.0-dev.10.5",
+    "@pega/cosmos-react-social": "5.0.0-dev.10.5",
+    "@pega/cosmos-react-work": "5.0.0-dev.10.5",
     "@storybook/addon-actions": "~7.5.3",
     "@storybook/react": "~7.5.3",
     "@types/dompurify": "^3.0.5",