npm - @pega/cosmos-react-demos - Versions diffs - 5.0.0-dev.1.0 → 5.0.0-dev.10.1 - Mend

@pega/cosmos-react-demos 5.0.0-dev.1.0 → 5.0.0-dev.10.1

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.stories.jsx","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;~~AAGjD~~,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;~~AAUV~~,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,IAAsB,EAAE,EAAE;IAC9E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IACpD,IAAI,WAAW,GAAyB,IAAI,CAAC,KAAK,CAAC;IAEnD,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE;QACvC,WAAW,GAAG,EAAE,CAAC;QACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAC1E,KAAK,CAAC,QAAQ,CAAC;aACZ,IAAI,CAAC,CAAC,CAAC;aACP,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;aAC/C,OAAO,CAAC,IAAI,CAAC,EAAE;YACd,WAAY,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QACvC,CAAC,CAAC,CAAC;KACN;IAED,OAAO,CACL,CAAC,MAAM,CACL,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,KAAK,CAAC,CAAC,WAAW,CAAC,CACnB,YAAY,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAChC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,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,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,CAAC,WAAmB,EAAE,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,~~EACzD~~,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,WAAW,EAAE,UAAU;IACvB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,EAAE;IACP,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,SAAS;IAChB,YAAY,EAAE,IAAI;IAClB,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;~~CAChB~~,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE;IACvF,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACrC,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACpC,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACpC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC9C,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACzC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,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,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,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 { useState } from 'react';\n\nimport { Slider } from '@pega/cosmos-react-core';\nimport type { SliderProps, OmitStrict } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Slider',\n component: Slider\n} as Meta;\n\n// Necessary to prevent linting undefined errors since these will never be undefined in the demo\ntype SliderStoryProps = OmitStrict<SliderProps, 'value' \| 'onChange'> & {\n min: number;\n max: number;\n step: number;\n value?: SliderProps['value'];\n};\n\nexport const SliderDemo: StoryFn<SliderStoryProps> = (args: SliderStoryProps) => {\n const [value, setValue] = useState(args.value \|\| 0);\n let ticksObject: SliderProps['ticks'] = args.ticks;\n\n if (args.max > args.min && !ticksObject) {\n ticksObject = {};\n const numTicks = Math.floor((args.max - args.min) / (args.step \|\| 1)) + 1;\n Array(numTicks)\n .fill(0)\n .map((_, index) => args.min + index * args.step)\n .forEach(tick => {\n ticksObject![tick] = tick.toString();\n });\n }\n\n return (\n <Slider\n orientation={args.orientation}\n step={args.step}\n min={args.min}\n max={args.max}\n ticks={ticksObject}\n showProgress={args.showProgress}\n preview={args.preview}\n showInput={args.showInput}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n value={value}\n onChange={(changeValue: number) => setValue(changeValue)}\n />\n );\n};\n\nSliderDemo.args = {\n orientation: 'vertical',\n step: 1,\n min: 0,\n max: 10,\n value: 5,\n ticks: undefined,\n showProgress: true,\n preview: false,\n showInput: true,\n label: 'Slider input',\n labelHidden: false,\n info: 'Pick a value',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nSliderDemo.argTypes = {\n orientation: { options: ['vertical', 'horizontal'], control: { type: 'inline-radio' } },\n step: { control: { type: 'number' } },\n min: { control: { type: 'number' } },\n max: { control: { type: 'number' } },\n value: { control: { type: 'number' } },\n ticks: { control: { type: 'object' } },\n showProgress: { control: { type: 'boolean' } },\n preview: { control: { type: 'boolean' } },\n showInput: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text', label: 'Helper text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"Slider.stories.jsx","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Flex, Link, Slider } from '@pega/cosmos-react-core';\nimport type { SliderProps, OmitStrict } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Slider',\n component: Slider\n} as Meta;\n\n// Necessary to prevent linting undefined errors since these will never be undefined in the demo\ntype SliderStoryProps = OmitStrict<SliderProps, 'value' \| 'onChange'> & {\n min: number;\n max: number;\n step: number;\n value?: SliderProps['value'];\n showAdditionalInfo?: boolean;\n};\n\nexport const SliderDemo: StoryFn<SliderStoryProps> = (args: SliderStoryProps) => {\n const [value, setValue] = useState(args.value \|\| 0);\n let ticksObject: SliderProps['ticks'] = args.ticks;\n\n if (args.max > args.min && !ticksObject) {\n ticksObject = {};\n const numTicks = Math.floor((args.max - args.min) / (args.step \|\| 1)) + 1;\n Array(numTicks)\n .fill(0)\n .map((_, index) => args.min + index * args.step)\n .forEach(tick => {\n ticksObject![tick] = tick.toString();\n });\n }\n\n return (\n <Slider\n orientation={args.orientation}\n step={args.step}\n min={args.min}\n max={args.max}\n ticks={ticksObject}\n showProgress={args.showProgress}\n preview={args.preview}\n showInput={args.showInput}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n value={value}\n onChange={(changeValue: number) => setValue(changeValue)}\n additionalInfo={\n 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 nulla\n aliquet porttitor lacus.\n </p>\n <Link href='/' target='_blank'>\n Neque vitae\n </Link>\n </Flex>\n )\n }\n : undefined\n }\n />\n );\n};\n\nSliderDemo.args = {\n orientation: 'vertical',\n step: 1,\n min: 0,\n max: 10,\n value: 5,\n ticks: undefined,\n showProgress: true,\n preview: false,\n showInput: true,\n label: 'Slider input',\n labelHidden: false,\n info: 'Pick a value',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: false\n};\n\nSliderDemo.argTypes = {\n orientation: { options: ['vertical', 'horizontal'], control: { type: 'inline-radio' } },\n step: { control: { type: 'number' } },\n min: { control: { type: 'number' } },\n max: { control: { type: 'number' } },\n value: { control: { type: 'number' } },\n ticks: { control: { type: 'object' } },\n showProgress: { control: { type: 'boolean' } },\n preview: { control: { type: 'boolean' } },\n showInput: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text', label: 'Helper text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/core/SummaryList/SummaryList.mocks.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
-import { MockUser } from './mockUsers';
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { MockUser } from './mockUsers';
 export interface MockListItem {
     id: string;
     primary: string;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SummaryList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/SummaryList/SummaryList.mocks.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,~~EAAuB~~,MAAM,OAAO,CAAC;~~AAIjF~~,~~OAAkB~~,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;~~AAElD~~,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE;QACL,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,WAAiB,MAAM,KAAO,QAAQ,mBAAmB,CAMjF,CAAC;AAiCF,eAAO,MAAM,eAAe,OACtB,MAAM,IAAI;;MAEb,CAAC,YAAY,EAAE,EAAE,SAAS,eAAe,YAAY,EAAE,CAAC,CAAC,CAuB3D,CAAC"}
1	+ {"version":3,"file":"SummaryList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/SummaryList/SummaryList.mocks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE;QACL,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,WAAiB,MAAM,KAAO,QAAQ,mBAAmB,CAMjF,CAAC;AAiCF,eAAO,MAAM,eAAe,OACtB,MAAM,IAAI;;MAEb,CAAC,YAAY,EAAE,EAAE,SAAS,eAAe,YAAY,EAAE,CAAC,CAAC,CAuB3D,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SummaryList.mocks.jsx","sourceRoot":"","sources":["../../../src/core/SummaryList/SummaryList.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAuC~~,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAEjF~~,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,~~SAAuB~~,MAAM,aAAa,CAAC;~~AAiBlD~~,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,EAAE,QAAgB,CAAC,EAAgC,EAAE;IACpF,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;QAC3B,UAAU,CAAC,GAAG,EAAE;YACd,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;QAClD,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,EAC1C,KAAK,EACL,OAAO,EAAE,EAAE,SAAS,EAAE,EAKvB,EAAgB,EAAE;IACjB,MAAM,QAAQ,GAAG,GAAG,SAAS,IAAI,QAAQ,EAAE,CAAC;IAC5C,OAAO;QACL,IAAI,EAAE;YACJ,EAAE,EAAE,KAAK;YACT,SAAS;YACT,QAAQ;YACR,KAAK;YACL,SAAS;SACV;QACD,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,QAAQ;QACjB,eAAe,EAAE,QAAQ;QACzB,SAAS,EAAE,CACT,CAAC,GAAG,CACF;QAAA,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAC7B;MAAA,EAAE,GAAG,CAAC,CACP;QACD,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAG;QAChE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;KACvD,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,EAAc,EACd,EAAE,KAAK,KAAyB,EAAE,KAAK,EAAE,SAAS,EAAE,EACQ,EAAE;IAC9D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,GAAG,IAAI,CAAC;QAEnB,CAAC,KAAK,IAAI,EAAE;YACV,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,YAAY,CAAC,KAAK,CAAC,CAAC;YAG9C,IAAI,OAAO,EAAE;gBACX,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC;aACxC;QACH,CAAC,CAAC,EAAE,CAAC;QAEL,OAAO,GAAG,EAAE;YACV,OAAO,GAAG,KAAK,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,qBAAqB,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEnC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC,CAAC","sourcesContent":["import { Dispatch, ReactNode, SetStateAction, ~~useEffect, useState~~ } from 'react';\n\nimport { Avatar, EmailDisplay, useAfterInitialEffect } from '@pega/cosmos-react-core';\n\nimport mockUsers, { MockUser } from './mockUsers';\n\nexport interface MockListItem {\n id: string;\n primary: string;\n secondary: ReactNode;\n visual: ReactNode;\n data?: {\n [key: string]: unknown;\n };\n [key: string]: unknown;\n}\n\nexport interface MockUserAPIResponse {\n results: MockUser[];\n}\n\nexport const getMockUsers = async (limit: number = 3): Promise<MockUserAPIResponse> => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve({ results: mockUsers.slice(0, limit) });\n }, 500);\n });\n};\n\nconst getMockListItem = ({\n name: { first: firstName, last: lastName },\n email,\n picture: { thumbnail }\n}: {\n name: { first: string; last: string };\n email: string;\n picture: { thumbnail: string };\n}): MockListItem => {\n const fullName = `${firstName} ${lastName}`;\n return {\n data: {\n id: email,\n firstName,\n lastName,\n email,\n thumbnail\n },\n id: email,\n primary: fullName,\n contextualLabel: fullName,\n secondary: (\n <div>\n <EmailDisplay value={email} />\n </div>\n ),\n visual: <Avatar size='l' name={fullName} imageSrc={thumbnail} />,\n actions: [{ id: '11', text: 'Delete', icon: 'trash' }]\n };\n};\n\nexport const useMockListData = (\n cb: () => void,\n { count }: { count?: number } = { count: undefined }\n): [MockListItem[], Dispatch<SetStateAction<MockListItem[]>>] => {\n const [items, setItems] = useState<MockListItem[]>([]);\n\n useEffect(() => {\n let mounted = true;\n\n (async () => {\n const { results } = await getMockUsers(count);\n\n // Avoids: Warning: Can't perform a React state update on an unmounted component.\n if (mounted) {\n setItems(results.map(getMockListItem));\n }\n })();\n\n return () => {\n mounted = false;\n };\n }, [count]);\n\n useAfterInitialEffect(cb, [items]);\n\n return [items, setItems];\n};\n"]}
1	+ {"version":3,"file":"SummaryList.mocks.jsx","sourceRoot":"","sources":["../../../src/core/SummaryList/SummaryList.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,SAAS,MAAM,aAAa,CAAC;AAkBpC,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,EAAE,QAAgB,CAAC,EAAgC,EAAE;IACpF,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;QAC3B,UAAU,CAAC,GAAG,EAAE;YACd,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;QAClD,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,EAC1C,KAAK,EACL,OAAO,EAAE,EAAE,SAAS,EAAE,EAKvB,EAAgB,EAAE;IACjB,MAAM,QAAQ,GAAG,GAAG,SAAS,IAAI,QAAQ,EAAE,CAAC;IAC5C,OAAO;QACL,IAAI,EAAE;YACJ,EAAE,EAAE,KAAK;YACT,SAAS;YACT,QAAQ;YACR,KAAK;YACL,SAAS;SACV;QACD,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,QAAQ;QACjB,eAAe,EAAE,QAAQ;QACzB,SAAS,EAAE,CACT,CAAC,GAAG,CACF;QAAA,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAC7B;MAAA,EAAE,GAAG,CAAC,CACP;QACD,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAG;QAChE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;KACvD,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,EAAc,EACd,EAAE,KAAK,KAAyB,EAAE,KAAK,EAAE,SAAS,EAAE,EACQ,EAAE;IAC9D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,GAAG,IAAI,CAAC;QAEnB,CAAC,KAAK,IAAI,EAAE;YACV,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,YAAY,CAAC,KAAK,CAAC,CAAC;YAG9C,IAAI,OAAO,EAAE;gBACX,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC;aACxC;QACH,CAAC,CAAC,EAAE,CAAC;QAEL,OAAO,GAAG,EAAE;YACV,OAAO,GAAG,KAAK,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,qBAAqB,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEnC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from 'react';\nimport type { Dispatch, ReactNode, SetStateAction } from 'react';\n\nimport { Avatar, EmailDisplay, useAfterInitialEffect } from '@pega/cosmos-react-core';\n\nimport mockUsers from './mockUsers';\nimport type { MockUser } from './mockUsers';\n\nexport interface MockListItem {\n id: string;\n primary: string;\n secondary: ReactNode;\n visual: ReactNode;\n data?: {\n [key: string]: unknown;\n };\n [key: string]: unknown;\n}\n\nexport interface MockUserAPIResponse {\n results: MockUser[];\n}\n\nexport const getMockUsers = async (limit: number = 3): Promise<MockUserAPIResponse> => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve({ results: mockUsers.slice(0, limit) });\n }, 500);\n });\n};\n\nconst getMockListItem = ({\n name: { first: firstName, last: lastName },\n email,\n picture: { thumbnail }\n}: {\n name: { first: string; last: string };\n email: string;\n picture: { thumbnail: string };\n}): MockListItem => {\n const fullName = `${firstName} ${lastName}`;\n return {\n data: {\n id: email,\n firstName,\n lastName,\n email,\n thumbnail\n },\n id: email,\n primary: fullName,\n contextualLabel: fullName,\n secondary: (\n <div>\n <EmailDisplay value={email} />\n </div>\n ),\n visual: <Avatar size='l' name={fullName} imageSrc={thumbnail} />,\n actions: [{ id: '11', text: 'Delete', icon: 'trash' }]\n };\n};\n\nexport const useMockListData = (\n cb: () => void,\n { count }: { count?: number } = { count: undefined }\n): [MockListItem[], Dispatch<SetStateAction<MockListItem[]>>] => {\n const [items, setItems] = useState<MockListItem[]>([]);\n\n useEffect(() => {\n let mounted = true;\n\n (async () => {\n const { results } = await getMockUsers(count);\n\n // Avoids: Warning: Can't perform a React state update on an unmounted component.\n if (mounted) {\n setItems(results.map(getMockListItem));\n }\n })();\n\n return () => {\n mounted = false;\n };\n }, [count]);\n\n useAfterInitialEffect(cb, [items]);\n\n return [items, setItems];\n};\n"]}

package/jsx/core/Table/Table.mocks.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ export declare const tableData: ({
     id: string;
     name: string;
     dob: string;
-    address: JSX.Element;
+    address: import("react").JSX.Element;
     email: string;
     balance: string;
     emailVerified?: undefined;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAE7D,wBAIU;AAEV,UAAU,kBAAmB,SAAQ,aAAa;IAChD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,kBAAkB,~~CAgCpD~~,CAAC;AAsCF,UAAU,yBAAyB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,yBAAyB,CA2BnE,CAAC"}
1	+ {"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAE7D,wBAIU;AAEV,UAAU,kBAAmB,SAAQ,aAAa;IAChD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,kBAAkB,CA+BpD,CAAC;AAsCF,UAAU,yBAAyB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,yBAAyB,CA2BnE,CAAC"}

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

@@ -9,7 +9,6 @@ export const TextAreaDemo = (args) => {
     const [value, setValue] = useState('');
     return (<TextArea additionalInfo={args.showAdditionalInfo
             ? {
-                heading: 'Additional Info',
                 content: 'Some additional info'
             }
             : undefined} id='text-area' value={value} onChange={(e) => setValue(e.target.value)} minLength={args.minLength} maxLength={args.maxLength} displayCharCount={args.displayCharCount} hardStop={args.hardStop} resizable={args.resizable} autoResize={args.autoResize} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.stories.jsx","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGlE,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,cAAc,EAAE,CAAC,sBAAsB,CAAC;CACjC,CAAC;AAMV,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,IAAwB,EAAE,EAAE;IACpF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,OAAO,CACL,CAAC,QAAQ,CACP,cAAc,CAAC,CACb,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,~~iBAAiB;gBAC1B,OAAO,EAAE,~~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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { Configuration, TextArea } from '@pega/cosmos-react-core';\nimport type { TextAreaProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Textarea',\n component: TextArea,\n excludeStories: ['ConfigurableTextArea']\n} as Meta;\n\ninterface TextAreaStoryProps extends TextAreaProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const TextAreaDemo: StoryFn<TextAreaStoryProps> = (args: TextAreaStoryProps) => {\n const [value, setValue] = useState('');\n\n return (\n <TextArea\n additionalInfo={\n args.showAdditionalInfo\n ? {\n ~~heading: 'Additional Info',\n~~ content: 'Some additional info'\n }\n : undefined\n }\n id='text-area'\n value={value}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n minLength={args.minLength}\n maxLength={args.maxLength}\n displayCharCount={args.displayCharCount}\n hardStop={args.hardStop}\n resizable={args.resizable}\n autoResize={args.autoResize}\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 />\n );\n};\n\nTextAreaDemo.args = {\n minLength: 0,\n maxLength: 300,\n displayCharCount: false,\n hardStop: true,\n resizable: false,\n autoResize: true,\n label: 'Text Area',\n labelHidden: false,\n info: 'Enter a large amount of text',\n placeholder: 'Tell us a story…',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: false\n};\n\nTextAreaDemo.argTypes = {\n minLength: { control: { type: 'number' } },\n maxLength: { control: { type: 'number' } },\n displayCharCount: { control: { type: 'boolean' } },\n hardStop: { control: { type: 'boolean' } },\n resizable: { control: { type: 'boolean' } },\n autoResize: { 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: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableTextAreaProps {\n minHeight?: string;\n padding?: string;\n}\n\nexport const ConfigurableTextArea: StoryFn<ConfigurableTextAreaProps> = (\n args: ConfigurableTextAreaProps\n) => {\n const [value, setValue] = useState('');\n\n return (\n <Configuration\n theme={{\n components: {\n 'text-area': {\n 'min-height': args.minHeight,\n padding: args.padding\n }\n }\n }}\n >\n <TextArea\n value={value}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n resizable\n autoResize\n label='Configurable Text Area'\n info='Enter a large amount of text'\n placeholder='Tell us a story…'\n />\n </Configuration>\n );\n};\n\nConfigurableTextArea.args = {\n minHeight: '3.75rem',\n padding: '0.5rem'\n};\n\nConfigurableTextArea.argTypes = {\n minHeight: { control: { type: 'text' } },\n padding: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"TextArea.stories.jsx","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { Configuration, TextArea } from '@pega/cosmos-react-core';\nimport type { TextAreaProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Textarea',\n component: TextArea,\n excludeStories: ['ConfigurableTextArea']\n} as Meta;\n\ninterface TextAreaStoryProps extends TextAreaProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const TextAreaDemo: StoryFn<TextAreaStoryProps> = (args: TextAreaStoryProps) => {\n const [value, setValue] = useState('');\n\n return (\n <TextArea\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n id='text-area'\n value={value}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n minLength={args.minLength}\n maxLength={args.maxLength}\n displayCharCount={args.displayCharCount}\n hardStop={args.hardStop}\n resizable={args.resizable}\n autoResize={args.autoResize}\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 />\n );\n};\n\nTextAreaDemo.args = {\n minLength: 0,\n maxLength: 300,\n displayCharCount: false,\n hardStop: true,\n resizable: false,\n autoResize: true,\n label: 'Text Area',\n labelHidden: false,\n info: 'Enter a large amount of text',\n placeholder: 'Tell us a story…',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: false\n};\n\nTextAreaDemo.argTypes = {\n minLength: { control: { type: 'number' } },\n maxLength: { control: { type: 'number' } },\n displayCharCount: { control: { type: 'boolean' } },\n hardStop: { control: { type: 'boolean' } },\n resizable: { control: { type: 'boolean' } },\n autoResize: { 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: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableTextAreaProps {\n minHeight?: string;\n padding?: string;\n}\n\nexport const ConfigurableTextArea: StoryFn<ConfigurableTextAreaProps> = (\n args: ConfigurableTextAreaProps\n) => {\n const [value, setValue] = useState('');\n\n return (\n <Configuration\n theme={{\n components: {\n 'text-area': {\n 'min-height': args.minHeight,\n padding: args.padding\n }\n }\n }}\n >\n <TextArea\n value={value}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n resizable\n autoResize\n label='Configurable Text Area'\n info='Enter a large amount of text'\n placeholder='Tell us a story…'\n />\n </Configuration>\n );\n};\n\nConfigurableTextArea.args = {\n minHeight: '3.75rem',\n padding: '0.5rem'\n};\n\nConfigurableTextArea.argTypes = {\n minHeight: { control: { type: 'text' } },\n padding: { control: { type: 'text' } }\n};\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.mocks.js","sourceRoot":"","sources":["../../../src/core/Tree/Tree.mocks.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,SAAiB,EAAE,UAAmB,EAAE,EAAE;IACpE,MAAM,SAAS,GAAuB,EAAE,CAAC;IACzC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,EAAE;QAC3D,MAAM,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC/D,MAAM,KAAK,GAAG,QAAQ,CAAC;QAGvB,IAAI,UAAU,CAAC,KAAK,EAAE;YACpB,SAAS,CAAC,IAAI,CAAC;gBACb,EAAE;gBACF,KAAK;gBACL,IAAI,EAAE,EAAE,GAAG,UAAU,EAAE;aACxB,CAAC,CAAC;SACJ;aAEI;YACH,MAAM,KAAK,GAAuB,WAAW,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAC9D,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;SACtC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["import { TreeProps } from '@pega/cosmos-react-core';\n\nexport const themeToTree = (themeNode: object, parentPath?: string) => {\n const dataArray: TreeProps['nodes'] = [];\n Object.entries(themeNode).forEach(([childKey, childValue]) => {\n const id = parentPath ? `${parentPath}.${childKey}` : childKey;\n const label = childKey;\n\n // Is a leaf\n if (childValue.$type) {\n dataArray.push({\n id,\n label,\n data: { ...childValue }\n });\n }\n // Is a parent\n else {\n const nodes: TreeProps['nodes'] = themeToTree(childValue, id);\n dataArray.push({ id, label, nodes });\n }\n });\n\n return dataArray;\n};\n"]}
1	+ {"version":3,"file":"Tree.mocks.js","sourceRoot":"","sources":["../../../src/core/Tree/Tree.mocks.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,SAAiB,EAAE,UAAmB,EAAE,EAAE;IACpE,MAAM,SAAS,GAAuB,EAAE,CAAC;IACzC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,EAAE;QAC3D,MAAM,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC/D,MAAM,KAAK,GAAG,QAAQ,CAAC;QAGvB,IAAI,UAAU,CAAC,KAAK,EAAE;YACpB,SAAS,CAAC,IAAI,CAAC;gBACb,EAAE;gBACF,KAAK;gBACL,IAAI,EAAE,EAAE,GAAG,UAAU,EAAE;aACxB,CAAC,CAAC;SACJ;aAEI;YACH,MAAM,KAAK,GAAuB,WAAW,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAC9D,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;SACtC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["import type { TreeProps } from '@pega/cosmos-react-core';\n\nexport const themeToTree = (themeNode: object, parentPath?: string) => {\n const dataArray: TreeProps['nodes'] = [];\n Object.entries(themeNode).forEach(([childKey, childValue]) => {\n const id = parentPath ? `${parentPath}.${childKey}` : childKey;\n const label = childKey;\n\n // Is a leaf\n if (childValue.$type) {\n dataArray.push({\n id,\n label,\n data: { ...childValue }\n });\n }\n // Is a parent\n else {\n const nodes: TreeProps['nodes'] = themeToTree(childValue, id);\n dataArray.push({ id, label, nodes });\n }\n });\n\n return dataArray;\n};\n"]}

package/jsx/dnd/DragDropList/DragDropList.mocks.d.ts CHANGED Viewed

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { DraggableItem, DraggableProps, ItemRendererProps } from '@pega/cosmos-react-dnd';
+import type { DraggableItem, DraggableProps, ItemRendererProps } from '@pega/cosmos-react-dnd';
 interface ItemData {
     content: string;
     color: string;
 }
 export declare const createMockDataArray: (length: number, type: DraggableProps['type'], listId: string) => DraggableItem<ItemData>[];
-export declare const EmptyItem: () => JSX.Element;
-export declare const DemoListItem: ({ id, type, dragRef, data, isDragging, ...restProps }: ItemRendererProps<ItemData>) => JSX.Element;
+export declare const EmptyItem: () => import("react").JSX.Element;
+export declare const DemoListItem: ({ id, type, dragRef, data, isDragging, ...restProps }: ItemRendererProps<ItemData>) => import("react").JSX.Element;
 export declare const sort: (a: DraggableItem<ItemData>, b: DraggableItem<ItemData>) => number;
 export declare const itemType: unique symbol;
 export declare const mockDataArrayA: DraggableItem<ItemData>[];

package/jsx/dnd/DragDropList/DragDropList.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DragDropList.mocks.d.ts","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.mocks.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;~~AAI1F~~,UAAU,QAAQ;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,WACtB,MAAM,QACR,cAAc,CAAC,MAAM,CAAC,UACpB,MAAM,KACb,cAAc,QAAQ,CAAC,EAYzB,CAAC;AAEF,eAAO,MAAM,SAAS,~~mBAErB~~,CAAC;AAEF,eAAO,MAAM,YAAY,0DAOtB,kBAAkB,QAAQ,CAAC,~~gBAa7B~~,CAAC;AAEF,eAAO,MAAM,IAAI,MAAO,cAAc,QAAQ,CAAC,KAAK,cAAc,QAAQ,CAAC,KAAG,MAE7E,CAAC;AAEF,eAAO,MAAM,QAAQ,eAAa,CAAC;AACnC,eAAO,MAAM,cAAc,2BAAyC,CAAC;AACrE,eAAO,MAAM,cAAc,2BAAwC,CAAC"}
1	+ {"version":3,"file":"DragDropList.mocks.d.ts","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.mocks.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAI/F,UAAU,QAAQ;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,WACtB,MAAM,QACR,cAAc,CAAC,MAAM,CAAC,UACpB,MAAM,KACb,cAAc,QAAQ,CAAC,EAYzB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAErB,CAAC;AAEF,eAAO,MAAM,YAAY,0DAOtB,kBAAkB,QAAQ,CAAC,gCAa7B,CAAC;AAEF,eAAO,MAAM,IAAI,MAAO,cAAc,QAAQ,CAAC,KAAK,cAAc,QAAQ,CAAC,KAAG,MAE7E,CAAC;AAEF,eAAO,MAAM,QAAQ,eAAa,CAAC;AACnC,eAAO,MAAM,cAAc,2BAAyC,CAAC;AACrE,eAAO,MAAM,cAAc,2BAAwC,CAAC"}

package/jsx/dnd/DragDropList/DragDropList.mocks.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DragDropList.mocks.jsx","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,OAAO,EAAE,0BAA0B,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAOpF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,MAAc,EACd,IAA4B,EAC5B,MAAc,EACa,EAAE;IAC7B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC;QAClB,OAAO;YACL,IAAI;YACJ,EAAE,EAAE,SAAS,EAAE;YACf,IAAI,EAAE;gBACJ,OAAO,EAAE,QAAQ,MAAM,IAAI,EAAE,EAAE;gBAC/B,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,MAAM,iBAAiB;aAClD;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,CAAC,eAAe,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AACrD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,UAAU,EACV,GAAG,SAAS,EACgB,EAAE,EAAE;IAChC,OAAO,CACL,CAAC,0BAA0B,CACzB,GAAG,CAAC,CAAC,OAAO,CAAC,CACb,KAAK,CAAC,CAAC;YACL,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YACvC,eAAe,EAAE,IAAI,EAAE,KAAK,IAAI,OAAO;SACxC,CAAC,CACF,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,IAAI,EAAE,OAAO,CAChB;IAAA,EAAE,0BAA0B,CAAC,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,CAA0B,EAAE,CAA0B,EAAU,EAAE;IACrF,OAAO,CAAC,CAAC,IAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,IAAK,CAAC,OAAO,CAAC,CAAC;AACxD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;AACnC,MAAM,CAAC,MAAM,cAAc,GAAG,mBAAmB,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,cAAc,GAAG,mBAAmB,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC","sourcesContent":["import { createUID } from '@pega/cosmos-react-core';\nimport { DraggableItem, DraggableProps, ItemRendererProps } from '@pega/cosmos-react-dnd';\n\nimport { StyledDemoDragDropListItem, StyledEmptyItem } from './DragDropList.styles';\n\ninterface ItemData {\n content: string;\n color: string;\n}\n\nexport const createMockDataArray = (\n length: number,\n type: DraggableProps['type'],\n listId: string\n): DraggableItem<ItemData>[] => {\n return Array.from({ length }, (_, i) => {\n const id = `${i}`;\n return {\n type,\n id: createUID(),\n data: {\n content: `Item ${listId}:${id}`,\n color: `hsl(${(i * 360) / length}deg, 100%, 66%)`\n }\n };\n });\n};\n\nexport const EmptyItem = () => {\n return <StyledEmptyItem>No Items</StyledEmptyItem>;\n};\n\nexport const DemoListItem = ({\n id,\n type,\n dragRef,\n data,\n isDragging,\n ...restProps\n}: ItemRendererProps<ItemData>) => {\n return (\n <StyledDemoDragDropListItem\n ref={dragRef}\n style={{\n opacity: isDragging ? '0.5' : undefined,\n backgroundColor: data?.color ?? 'white'\n }}\n {...restProps}\n >\n {data?.content}\n </StyledDemoDragDropListItem>\n );\n};\n\nexport const sort = (a: DraggableItem<ItemData>, b: DraggableItem<ItemData>): number => {\n return a.data!.content.localeCompare(b.data!.content);\n};\n\nexport const itemType = Symbol('');\nexport const mockDataArrayA = createMockDataArray(10, itemType, 'A');\nexport const mockDataArrayB = createMockDataArray(4, itemType, 'B');\n"]}
1	+ {"version":3,"file":"DragDropList.mocks.jsx","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,OAAO,EAAE,0BAA0B,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAOpF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,MAAc,EACd,IAA4B,EAC5B,MAAc,EACa,EAAE;IAC7B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC;QAClB,OAAO;YACL,IAAI;YACJ,EAAE,EAAE,SAAS,EAAE;YACf,IAAI,EAAE;gBACJ,OAAO,EAAE,QAAQ,MAAM,IAAI,EAAE,EAAE;gBAC/B,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,MAAM,iBAAiB;aAClD;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,CAAC,eAAe,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AACrD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,UAAU,EACV,GAAG,SAAS,EACgB,EAAE,EAAE;IAChC,OAAO,CACL,CAAC,0BAA0B,CACzB,GAAG,CAAC,CAAC,OAAO,CAAC,CACb,KAAK,CAAC,CAAC;YACL,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YACvC,eAAe,EAAE,IAAI,EAAE,KAAK,IAAI,OAAO;SACxC,CAAC,CACF,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,IAAI,EAAE,OAAO,CAChB;IAAA,EAAE,0BAA0B,CAAC,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,CAA0B,EAAE,CAA0B,EAAU,EAAE;IACrF,OAAO,CAAC,CAAC,IAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,IAAK,CAAC,OAAO,CAAC,CAAC;AACxD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;AACnC,MAAM,CAAC,MAAM,cAAc,GAAG,mBAAmB,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,cAAc,GAAG,mBAAmB,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC","sourcesContent":["import { createUID } from '@pega/cosmos-react-core';\nimport type { DraggableItem, DraggableProps, ItemRendererProps } from '@pega/cosmos-react-dnd';\n\nimport { StyledDemoDragDropListItem, StyledEmptyItem } from './DragDropList.styles';\n\ninterface ItemData {\n content: string;\n color: string;\n}\n\nexport const createMockDataArray = (\n length: number,\n type: DraggableProps['type'],\n listId: string\n): DraggableItem<ItemData>[] => {\n return Array.from({ length }, (_, i) => {\n const id = `${i}`;\n return {\n type,\n id: createUID(),\n data: {\n content: `Item ${listId}:${id}`,\n color: `hsl(${(i * 360) / length}deg, 100%, 66%)`\n }\n };\n });\n};\n\nexport const EmptyItem = () => {\n return <StyledEmptyItem>No Items</StyledEmptyItem>;\n};\n\nexport const DemoListItem = ({\n id,\n type,\n dragRef,\n data,\n isDragging,\n ...restProps\n}: ItemRendererProps<ItemData>) => {\n return (\n <StyledDemoDragDropListItem\n ref={dragRef}\n style={{\n opacity: isDragging ? '0.5' : undefined,\n backgroundColor: data?.color ?? 'white'\n }}\n {...restProps}\n >\n {data?.content}\n </StyledDemoDragDropListItem>\n );\n};\n\nexport const sort = (a: DraggableItem<ItemData>, b: DraggableItem<ItemData>): number => {\n return a.data!.content.localeCompare(b.data!.content);\n};\n\nexport const itemType = Symbol('');\nexport const mockDataArrayA = createMockDataArray(10, itemType, 'A');\nexport const mockDataArrayB = createMockDataArray(4, itemType, 'B');\n"]}

package/jsx/dnd/StandardDragDropList/Demo.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { MockRawItem } from './mockData';
+import type { MockRawItem } from './mockData';
 interface StandardDragDropListDemoProps {
     items: MockRawItem[];
 }

package/jsx/dnd/StandardDragDropList/Demo.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Demo.tsx"],"names":[],"mappings":";~~AAWA~~,OAAO,~~EAEL~~,WAAW,~~EAKZ~~,MAAM,YAAY,CAAC;~~AAIpB~~,UAAU,6BAA6B;IACrC,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;oCAE0B,6BAA6B,KAAG,WAAW;AAAtE,wBAkOE"}
1	+ {"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Demo.tsx"],"names":[],"mappings":";AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAK9C,UAAU,6BAA6B;IACrC,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;oCAE0B,6BAA6B,KAAG,WAAW;AAAtE,wBAkOE"}

package/jsx/dnd/StandardDragDropList/Demo.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Demo.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent, useCallback, useMemo, useState } from 'react';\n\nimport {\n StandardDragDropList,\n type StandardDragDropListItemProps,\n StandardDragDropListProps,\n DragDropManager\n} from '@pega/cosmos-react-dnd';\nimport { Button, Flex, Icon, useElement } from '@pega/cosmos-react-core';\nimport { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';\n\nimport {\n contentTypes,\n MockRawItem,\n mockQuery,\n mockFields,\n mockGroups,\n mockViews\n} from './mockData';\nimport ItemConfig from './ItemConfig';\nimport SelectionMenu, { SelectionMenuProps } from './SelectionMenu';\n\ninterface StandardDragDropListDemoProps {\n items: MockRawItem[];\n}\n\nexport default ({ items }: StandardDragDropListDemoProps): JSX.Element => {\n // The state of the list's content is maintained here and the raw item objects are transformed below prior to render.\n const [mockRawItems, setMockRawItems] = useState<MockRawItem[]>(items);\n\n const [configItemId, setConfigItemId] = useState<MockRawItem['id'] \| null>(null);\n\n const [configTarget, setConfigTarget] = useElement(null);\n\n const [selectionMenuTarget, setSelectionMenuTarget] = useElement(null);\n\n const [selectionConstraint, setSelectionConstraint] =\n useState<SelectionMenuProps['constraint']>();\n\n const [addToItemId, setAddToItemId] = useState<MockRawItem['id'] \| null>(null);\n\n const [errors, setErrors] = useState<{ rawItemId: MockRawItem['id']; message: string }[]>([]);\n\n const onAddContent = useCallback(\n async (selected: NonNullable<MultiSelectInputProps['selected']>) => {\n setSelectionMenuTarget(null);\n setSelectionConstraint(undefined);\n\n if (selected.length === 0) return;\n\n const addedItems = await mockQuery({ id: selected.map(({ id }) => id) });\n\n setMockRawItems(cur => {\n if (addToItemId) {\n return cur.map(item => {\n if (item.id === addToItemId && item.items) {\n return {\n ...item,\n items: [\n ...item.items,\n ...addedItems.map(nestedItem => ({\n ...nestedItem,\n id: `${addToItemId}:${nestedItem.id}`\n }))\n ]\n };\n }\n return item;\n });\n }\n\n return [...cur, ...addedItems.filter(newItem => !cur.find(({ id }) => id === newItem.id))];\n });\n },\n [addToItemId, setSelectionMenuTarget]\n );\n\n const onItemConfigure = useCallback(\n (id: StandardDragDropListItemProps['id'], e: MouseEvent<HTMLButtonElement>) => {\n setConfigTarget(e.currentTarget);\n setConfigItemId(id);\n },\n [setConfigTarget]\n );\n\n const onItemRemove = useCallback((id: StandardDragDropListItemProps['id']) => {\n setMockRawItems(cur =>\n cur.filter(rawItem => {\n if (rawItem.id === id) return false;\n // See if it's there before setting a new array instance.\n if (rawItem.items && rawItem.items.find(ri => ri.id === id)) {\n rawItem.items = rawItem.items.filter(ri => ri.id !== id);\n }\n return true;\n })\n );\n }, []);\n\n const onAddToGroup = useCallback(\n (groupId: StandardDragDropListItemProps['id'], e: MouseEvent<Element>) => {\n setAddToItemId(groupId);\n setSelectionMenuTarget(e.currentTarget);\n setSelectionConstraint({ types: ['Field'] });\n },\n [setSelectionMenuTarget]\n );\n\n const showSelectionMenu = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n setSelectionMenuTarget(e.currentTarget);\n },\n [setSelectionMenuTarget]\n );\n\n const onChange: StandardDragDropListProps['onChange'] = useCallback(updatedItems => {\n setMockRawItems(cur => {\n const findRawItem = (id: string) => {\n for (let i = 0; i < cur.length; i += 1) {\n if (cur[i].id === id) return cur[i];\n\n if (cur[i].items) {\n const subItem = cur[i].items!.find(s => s.id === id);\n if (subItem) return subItem;\n }\n }\n\n return [...mockFields, ...mockViews, ...mockGroups].find(rawItem => rawItem.id === id)!;\n };\n\n return updatedItems.map(item => {\n const rawItem = findRawItem(item.id);\n\n if (item.items) {\n const rawSubItems = item.items.map(subItem => {\n return findRawItem(subItem.id);\n });\n\n return { ...rawItem, items: rawSubItems };\n }\n\n return rawItem;\n });\n });\n }, []);\n\n const createListItems = useCallback(\n (mci: MockRawItem[], onATG: typeof onAddToGroup): StandardDragDropListProps['items'] => {\n return mci.map(rawItem => {\n const itemError = errors?.find(error => error.rawItemId === rawItem.id);\n\n const primary =\n rawItem.type === 'View'\n ? {\n text: rawItem.label,\n href: '/some-url',\n onClick: (e: MouseEvent) => {\n e.preventDefault();\n // Navigate or present a dialog/panel for clicked item...\n }\n }\n : rawItem.label;\n\n const baseItem: StandardDragDropListItemProps = {\n // type property is being spread in via the mock content item.\n ...rawItem,\n primary,\n secondary: rawItem.subType ?? rawItem.type,\n status: itemError ? { type: 'error', message: itemError.message } : undefined,\n onConfigure: onItemConfigure,\n onRemove: onItemRemove,\n items: undefined\n };\n\n return rawItem.type === 'Group'\n ? {\n ...baseItem,\n items: rawItem.items ? createListItems(rawItem.items, onATG) : [],\n accept: 'Field',\n onAddTo: onATG\n }\n : baseItem;\n });\n },\n [errors, onItemConfigure, onItemRemove]\n );\n\n // Here we transform MockRawItems -> StandardDragDropListProps['items']\n const itemsToRender: StandardDragDropListProps['items'] = useMemo(() => {\n return createListItems(mockRawItems, onAddToGroup);\n }, [mockRawItems, onAddToGroup, createListItems]);\n\n return (\n <>\n <DragDropManager>\n {useMemo(\n () => (\n <StandardDragDropList\n accept={[...contentTypes, 'Field', 'View', 'Group']}\n heading='Mock view'\n items={itemsToRender}\n onChange={onChange}\n footer={\n <Button onClick={showSelectionMenu} variant='link'>\n <Flex container={{ inline: true, alignItems: 'center', gap: 1 }}>\n <Icon name='plus' />\n <span>Add</span>\n </Flex>\n </Button>\n }\n />\n ),\n [itemsToRender, showSelectionMenu, onChange]\n )}\n </DragDropManager>\n {configTarget && configItemId && (\n <ItemConfig\n itemId={configItemId}\n target={configTarget}\n onCancel={() => {\n setConfigTarget(null);\n setConfigItemId(null);\n setErrors(currentErrors => {\n const currentItemError = currentErrors?.find(err => err.rawItemId === configItemId);\n\n return currentItemError\n ? currentErrors.filter(err => err.rawItemId !== configItemId)\n : [\n ...currentErrors,\n { rawItemId: configItemId, message: 'Misconfiguration detected' }\n ];\n });\n }}\n onSubmit={() => {\n setConfigTarget(null);\n setConfigItemId(null);\n }}\n />\n )}\n {selectionMenuTarget && (\n <SelectionMenu\n target={selectionMenuTarget}\n constraint={selectionConstraint}\n onCancel={() => {\n setSelectionMenuTarget(null);\n setAddToItemId(null);\n setSelectionConstraint(undefined);\n }}\n onSubmit={onAddContent}\n />\n )}\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"Demo.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport type { MouseEvent } from 'react';\n\nimport { StandardDragDropList, DragDropManager } from '@pega/cosmos-react-dnd';\nimport type {\n StandardDragDropListItemProps,\n StandardDragDropListProps\n} from '@pega/cosmos-react-dnd';\nimport { Button, Flex, Icon, useElement } from '@pega/cosmos-react-core';\nimport type { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';\n\nimport { contentTypes, mockQuery, mockFields, mockGroups, mockViews } from './mockData';\nimport type { MockRawItem } from './mockData';\nimport ItemConfig from './ItemConfig';\nimport SelectionMenu from './SelectionMenu';\nimport type { SelectionMenuProps } from './SelectionMenu';\n\ninterface StandardDragDropListDemoProps {\n items: MockRawItem[];\n}\n\nexport default ({ items }: StandardDragDropListDemoProps): JSX.Element => {\n // The state of the list's content is maintained here and the raw item objects are transformed below prior to render.\n const [mockRawItems, setMockRawItems] = useState<MockRawItem[]>(items);\n\n const [configItemId, setConfigItemId] = useState<MockRawItem['id'] \| null>(null);\n\n const [configTarget, setConfigTarget] = useElement(null);\n\n const [selectionMenuTarget, setSelectionMenuTarget] = useElement(null);\n\n const [selectionConstraint, setSelectionConstraint] =\n useState<SelectionMenuProps['constraint']>();\n\n const [addToItemId, setAddToItemId] = useState<MockRawItem['id'] \| null>(null);\n\n const [errors, setErrors] = useState<{ rawItemId: MockRawItem['id']; message: string }[]>([]);\n\n const onAddContent = useCallback(\n async (selected: NonNullable<MultiSelectInputProps['selected']>) => {\n setSelectionMenuTarget(null);\n setSelectionConstraint(undefined);\n\n if (selected.length === 0) return;\n\n const addedItems = await mockQuery({ id: selected.map(({ id }) => id) });\n\n setMockRawItems(cur => {\n if (addToItemId) {\n return cur.map(item => {\n if (item.id === addToItemId && item.items) {\n return {\n ...item,\n items: [\n ...item.items,\n ...addedItems.map(nestedItem => ({\n ...nestedItem,\n id: `${addToItemId}:${nestedItem.id}`\n }))\n ]\n };\n }\n return item;\n });\n }\n\n return [...cur, ...addedItems.filter(newItem => !cur.find(({ id }) => id === newItem.id))];\n });\n },\n [addToItemId, setSelectionMenuTarget]\n );\n\n const onItemConfigure = useCallback(\n (id: StandardDragDropListItemProps['id'], e: MouseEvent<HTMLButtonElement>) => {\n setConfigTarget(e.currentTarget);\n setConfigItemId(id);\n },\n [setConfigTarget]\n );\n\n const onItemRemove = useCallback((id: StandardDragDropListItemProps['id']) => {\n setMockRawItems(cur =>\n cur.filter(rawItem => {\n if (rawItem.id === id) return false;\n // See if it's there before setting a new array instance.\n if (rawItem.items && rawItem.items.find(ri => ri.id === id)) {\n rawItem.items = rawItem.items.filter(ri => ri.id !== id);\n }\n return true;\n })\n );\n }, []);\n\n const onAddToGroup = useCallback(\n (groupId: StandardDragDropListItemProps['id'], e: MouseEvent<Element>) => {\n setAddToItemId(groupId);\n setSelectionMenuTarget(e.currentTarget);\n setSelectionConstraint({ types: ['Field'] });\n },\n [setSelectionMenuTarget]\n );\n\n const showSelectionMenu = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n setSelectionMenuTarget(e.currentTarget);\n },\n [setSelectionMenuTarget]\n );\n\n const onChange: StandardDragDropListProps['onChange'] = useCallback(updatedItems => {\n setMockRawItems(cur => {\n const findRawItem = (id: string) => {\n for (let i = 0; i < cur.length; i += 1) {\n if (cur[i].id === id) return cur[i];\n\n if (cur[i].items) {\n const subItem = cur[i].items!.find(s => s.id === id);\n if (subItem) return subItem;\n }\n }\n\n return [...mockFields, ...mockViews, ...mockGroups].find(rawItem => rawItem.id === id)!;\n };\n\n return updatedItems.map(item => {\n const rawItem = findRawItem(item.id);\n\n if (item.items) {\n const rawSubItems = item.items.map(subItem => {\n return findRawItem(subItem.id);\n });\n\n return { ...rawItem, items: rawSubItems };\n }\n\n return rawItem;\n });\n });\n }, []);\n\n const createListItems = useCallback(\n (mci: MockRawItem[], onATG: typeof onAddToGroup): StandardDragDropListProps['items'] => {\n return mci.map(rawItem => {\n const itemError = errors?.find(error => error.rawItemId === rawItem.id);\n\n const primary =\n rawItem.type === 'View'\n ? {\n text: rawItem.label,\n href: '/some-url',\n onClick: (e: MouseEvent) => {\n e.preventDefault();\n // Navigate or present a dialog/panel for clicked item...\n }\n }\n : rawItem.label;\n\n const baseItem: StandardDragDropListItemProps = {\n // type property is being spread in via the mock content item.\n ...rawItem,\n primary,\n secondary: rawItem.subType ?? rawItem.type,\n status: itemError ? { type: 'error', message: itemError.message } : undefined,\n onConfigure: onItemConfigure,\n onRemove: onItemRemove,\n items: undefined\n };\n\n return rawItem.type === 'Group'\n ? {\n ...baseItem,\n items: rawItem.items ? createListItems(rawItem.items, onATG) : [],\n accept: 'Field',\n onAddTo: onATG\n }\n : baseItem;\n });\n },\n [errors, onItemConfigure, onItemRemove]\n );\n\n // Here we transform MockRawItems -> StandardDragDropListProps['items']\n const itemsToRender: StandardDragDropListProps['items'] = useMemo(() => {\n return createListItems(mockRawItems, onAddToGroup);\n }, [mockRawItems, onAddToGroup, createListItems]);\n\n return (\n <>\n <DragDropManager>\n {useMemo(\n () => (\n <StandardDragDropList\n accept={[...contentTypes, 'Field', 'View', 'Group']}\n heading='Mock view'\n items={itemsToRender}\n onChange={onChange}\n footer={\n <Button onClick={showSelectionMenu} variant='link'>\n <Flex container={{ inline: true, alignItems: 'center', gap: 1 }}>\n <Icon name='plus' />\n <span>Add</span>\n </Flex>\n </Button>\n }\n />\n ),\n [itemsToRender, showSelectionMenu, onChange]\n )}\n </DragDropManager>\n {configTarget && configItemId && (\n <ItemConfig\n itemId={configItemId}\n target={configTarget}\n onCancel={() => {\n setConfigTarget(null);\n setConfigItemId(null);\n setErrors(currentErrors => {\n const currentItemError = currentErrors?.find(err => err.rawItemId === configItemId);\n\n return currentItemError\n ? currentErrors.filter(err => err.rawItemId !== configItemId)\n : [\n ...currentErrors,\n { rawItemId: configItemId, message: 'Misconfiguration detected' }\n ];\n });\n }}\n onSubmit={() => {\n setConfigTarget(null);\n setConfigItemId(null);\n }}\n />\n )}\n {selectionMenuTarget && (\n <SelectionMenu\n target={selectionMenuTarget}\n constraint={selectionConstraint}\n onCancel={() => {\n setSelectionMenuTarget(null);\n setAddToItemId(null);\n setSelectionConstraint(undefined);\n }}\n onSubmit={onAddContent}\n />\n )}\n </>\n );\n};\n"]}

package/jsx/dnd/StandardDragDropList/GroupConfig.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { PopoverProps } from '@pega/cosmos-react-core';
+import type { PopoverProps } from '@pega/cosmos-react-core';
 interface ItemConfigProps {
     target: NonNullable<PopoverProps['target']>;
     onCancel: () => void;
     onSubmit: () => void;
 }
-declare const GroupConfig: ({ target, onCancel, onSubmit }: ItemConfigProps) => JSX.Element;
+declare const GroupConfig: ({ target, onCancel, onSubmit }: ItemConfigProps) => import("react").JSX.Element;
 export default GroupConfig;
 //# sourceMappingURL=GroupConfig.d.ts.map

package/jsx/dnd/StandardDragDropList/GroupConfig.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupConfig.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/GroupConfig.tsx"],"names":[],"mappings":";~~AAAA~~,OAAO,~~EAAe~~,YAAY,~~EAAkB~~,MAAM,yBAAyB,CAAC;~~AAIpF~~,UAAU,eAAe;IACvB,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAWD,QAAA,MAAM,WAAW,mCAAoC,eAAe,~~gBAenE~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"GroupConfig.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/GroupConfig.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,UAAU,eAAe;IACvB,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAWD,QAAA,MAAM,WAAW,mCAAoC,eAAe,gCAenE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/jsx/dnd/StandardDragDropList/GroupConfig.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupConfig.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/GroupConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,~~EAAgB~~,MAAM,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;~~AAEpF~~,OAAO,OAAO,MAAM,WAAW,CAAC;AAQhC,MAAM,gBAAgB,GAAG;IACvB,SAAS;IACT,SAAS;IACT,UAAU;IACV,aAAa;IACb,WAAW;IACX,WAAW;CACZ,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IACtE,OAAO,CACL,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACrF;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;QAAA,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,EAC/B;QAAA,CAAC,MAAM,CAAC,KAAK,CAAC,eAAe,CAC3B;UAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;UAAA,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC3B,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;QAC9C,CAAC,CAAC,CACJ;QAAA,EAAE,MAAM,CACR;QAAA,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAClB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { Flex, Input, ~~PopoverProps,~~ Select, Option } from '@pega/cosmos-react-core';\n\nimport Popover from './Popover';\n\ninterface ItemConfigProps {\n target: NonNullable<PopoverProps['target']>;\n onCancel: () => void;\n onSubmit: () => void;\n}\n\nconst comparisionTypes = [\n 'Integer',\n 'Decimal',\n 'Currency',\n 'Date & time',\n 'Date only',\n 'Time only'\n];\n\nconst GroupConfig = ({ target, onCancel, onSubmit }: ItemConfigProps) => {\n return (\n <Popover target={target} heading='Create Group' onCancel={onCancel} onSubmit={onSubmit}>\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Input label='Heading' required />\n <Select label='Allowed types'>\n <Option value='All'>All</Option>\n {comparisionTypes.map(type => {\n return <Option value={type}>{type}</Option>;\n })}\n </Select>\n <div>Etc...</div>\n </Flex>\n </Popover>\n );\n};\n\nexport default GroupConfig;\n"]}
1	+ {"version":3,"file":"GroupConfig.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/GroupConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGtE,OAAO,OAAO,MAAM,WAAW,CAAC;AAQhC,MAAM,gBAAgB,GAAG;IACvB,SAAS;IACT,SAAS;IACT,UAAU;IACV,aAAa;IACb,WAAW;IACX,WAAW;CACZ,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IACtE,OAAO,CACL,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACrF;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;QAAA,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,EAC/B;QAAA,CAAC,MAAM,CAAC,KAAK,CAAC,eAAe,CAC3B;UAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;UAAA,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC3B,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;QAC9C,CAAC,CAAC,CACJ;QAAA,EAAE,MAAM,CACR;QAAA,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAClB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { Flex, Input, Select, Option } from '@pega/cosmos-react-core';\nimport type { PopoverProps } from '@pega/cosmos-react-core';\n\nimport Popover from './Popover';\n\ninterface ItemConfigProps {\n target: NonNullable<PopoverProps['target']>;\n onCancel: () => void;\n onSubmit: () => void;\n}\n\nconst comparisionTypes = [\n 'Integer',\n 'Decimal',\n 'Currency',\n 'Date & time',\n 'Date only',\n 'Time only'\n];\n\nconst GroupConfig = ({ target, onCancel, onSubmit }: ItemConfigProps) => {\n return (\n <Popover target={target} heading='Create Group' onCancel={onCancel} onSubmit={onSubmit}>\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Input label='Heading' required />\n <Select label='Allowed types'>\n <Option value='All'>All</Option>\n {comparisionTypes.map(type => {\n return <Option value={type}>{type}</Option>;\n })}\n </Select>\n <div>Etc...</div>\n </Flex>\n </Popover>\n );\n};\n\nexport default GroupConfig;\n"]}

package/jsx/dnd/StandardDragDropList/ItemConfig.d.ts CHANGED Viewed

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { PopoverProps } from '@pega/cosmos-react-core';
-import { MockRawItem } from './mockData';
+import type { PopoverProps } from '@pega/cosmos-react-core';
+import type { MockRawItem } from './mockData';
 interface ItemConfigProps {
     itemId: MockRawItem['id'];
     target: NonNullable<PopoverProps['target']>;
     onCancel: () => void;
     onSubmit: () => void;
 }
-declare const ItemConfig: ({ itemId, target, onCancel, onSubmit }: ItemConfigProps) => JSX.Element;
+declare const ItemConfig: ({ itemId, target, onCancel, onSubmit }: ItemConfigProps) => import("react").JSX.Element;
 export default ItemConfig;
 //# sourceMappingURL=ItemConfig.d.ts.map

package/jsx/dnd/StandardDragDropList/ItemConfig.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ItemConfig.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/ItemConfig.tsx"],"names":[],"mappings":";~~AAEA~~,OAAO,EAAE,YAAY,~~EAAW~~,MAAM,yBAAyB,CAAC;~~AAGhE~~,OAAO,~~EAAa~~,WAAW,EAAE,MAAM,YAAY,CAAC;~~AAEpD~~,UAAU,eAAe;IACvB,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1B,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,2CAA4C,eAAe,~~gBAwB1E~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"ItemConfig.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/ItemConfig.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,UAAU,eAAe;IACvB,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1B,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,2CAA4C,eAAe,gCAwB1E,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/jsx/dnd/StandardDragDropList/ItemConfig.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ItemConfig.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/ItemConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,~~EAAgB~~,OAAO,EAAE,MAAM,yBAAyB,CAAC;~~AAEhE~~,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,SAAS,~~EAAe~~,MAAM,YAAY,CAAC;~~AASpD~~,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAC7E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAC3D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,KAAK,IAAI,EAAE;YACV,MAAM,CAAC,EAAE,CAAC,GAAG,MAAM,SAAS,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;YACzD,OAAO,CAAC,EAAE,CAAC,CAAC;YACZ,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,CAAC,OAAO,CACN,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CACtD,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAEnB;MAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,kBAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,CACzE;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { ~~PopoverProps,~~ useI18n } from '@pega/cosmos-react-core';\n\nimport Popover from './Popover';\nimport { mockQuery, MockRawItem } from './mockData';\n\ninterface ItemConfigProps {\n itemId: MockRawItem['id'];\n target: NonNullable<PopoverProps['target']>;\n onCancel: () => void;\n onSubmit: () => void;\n}\n\nconst ItemConfig = ({ itemId, target, onCancel, onSubmit }: ItemConfigProps) => {\n const [item, setItem] = useState<MockRawItem \| null>(null);\n const [loading, setLoading] = useState(true);\n const t = useI18n();\n\n useEffect(() => {\n (async () => {\n const [ci] = await mockQuery({ id: itemId, delay: 500 });\n setItem(ci);\n setLoading(false);\n })();\n }, []);\n\n return (\n <Popover\n loading={loading}\n target={target}\n heading={!loading && item ? item.label : t('loading')}\n onCancel={onCancel}\n onSubmit={onSubmit}\n >\n <div style={{ margin: 'auto' }}>Configuration for {item?.label}...</div>\n </Popover>\n );\n};\n\nexport default ItemConfig;\n"]}
1	+ {"version":3,"file":"ItemConfig.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/ItemConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGlD,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAUvC,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAC7E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAC3D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,KAAK,IAAI,EAAE;YACV,MAAM,CAAC,EAAE,CAAC,GAAG,MAAM,SAAS,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;YACzD,OAAO,CAAC,EAAE,CAAC,CAAC;YACZ,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,CAAC,OAAO,CACN,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CACtD,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAEnB;MAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,kBAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,CACzE;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useI18n } from '@pega/cosmos-react-core';\nimport type { PopoverProps } from '@pega/cosmos-react-core';\n\nimport Popover from './Popover';\nimport { mockQuery } from './mockData';\nimport type { MockRawItem } from './mockData';\n\ninterface ItemConfigProps {\n itemId: MockRawItem['id'];\n target: NonNullable<PopoverProps['target']>;\n onCancel: () => void;\n onSubmit: () => void;\n}\n\nconst ItemConfig = ({ itemId, target, onCancel, onSubmit }: ItemConfigProps) => {\n const [item, setItem] = useState<MockRawItem \| null>(null);\n const [loading, setLoading] = useState(true);\n const t = useI18n();\n\n useEffect(() => {\n (async () => {\n const [ci] = await mockQuery({ id: itemId, delay: 500 });\n setItem(ci);\n setLoading(false);\n })();\n }, []);\n\n return (\n <Popover\n loading={loading}\n target={target}\n heading={!loading && item ? item.label : t('loading')}\n onCancel={onCancel}\n onSubmit={onSubmit}\n >\n <div style={{ margin: 'auto' }}>Configuration for {item?.label}...</div>\n </Popover>\n );\n};\n\nexport default ItemConfig;\n"]}

package/jsx/dnd/StandardDragDropList/Popover.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { PopoverProps as CorePopoverProps } from '@pega/cosmos-react-core';
+import type { ReactNode } from 'react';
+import type { PopoverProps as CorePopoverProps } from '@pega/cosmos-react-core';
 type PopoverProps = {
     target: NonNullable<CorePopoverProps['target']>;
     loading?: boolean;
@@ -9,6 +9,6 @@ type PopoverProps = {
     onCancel: () => void;
     onSubmit: () => void;
 };
-declare const Popover: ({ loading, heading, target, children, displayHeading, onCancel, onSubmit }: PopoverProps) => JSX.Element;
+declare const Popover: ({ loading, heading, target, children, displayHeading, onCancel, onSubmit }: PopoverProps) => import("react").JSX.Element;
 export default Popover;
 //# sourceMappingURL=Popover.d.ts.map

package/jsx/dnd/StandardDragDropList/Popover.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Popover.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,EAAE,SAAS,~~EAA8B~~,MAAM,OAAO,CAAC;~~AAG9D~~,OAAO,~~EAKL~~,YAAY,IAAI,gBAAgB,~~EAYjC~~,MAAM,yBAAyB,CAAC;~~AAEjC~~,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,WAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAaF,QAAA,MAAM,OAAO,+EAQV,YAAY,~~gBAyDd~~,CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Popover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBvC,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhF,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,WAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAaF,QAAA,MAAM,OAAO,+EAQV,YAAY,gCAyDd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/jsx/dnd/StandardDragDropList/Popover.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAa~~,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;~~AAC9D~~,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,IAAI,EACJ,MAAM,EACN,IAAI,~~EAEJ~~,OAAO,EACP,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,aAAa,EACb,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;~~AAYjC~~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","sourcesContent":["import { ~~ReactNode,~~ useRef, useEffect, useMemo } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Popover as CorePopover,\n Flex,\n Button,\n Text,\n ~~PopoverProps as CorePopoverProps,\n~~ useI18n,\n useEscape,\n useOuterEvent,\n CardHeader,\n CardFooter,\n CardContent,\n Progress,\n useFocusTrap,\n useUID,\n getFocusables,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\ntype PopoverProps = {\n target: NonNullable<CorePopoverProps['target']>;\n loading?: boolean;\n heading: string;\n children?: ReactNode;\n displayHeading?: boolean;\n onCancel: () => void;\n onSubmit: () => void;\n};\n\nconst StyledContent = styled(CardContent)`\n overflow: auto;\n`;\n\nconst StyledPopover = styled(CorePopover)`\n position: relative;\n width: min(100vh, 60ch);\n min-height: 6rem;\n max-height: calc(100vh - 2rem);\n`;\n\nconst Popover = ({\n loading,\n heading,\n target,\n children,\n displayHeading = true,\n onCancel,\n onSubmit\n}: PopoverProps) => {\n const t = useI18n();\n const headingId = useUID();\n const ref = useRef<HTMLElement>(null);\n\n useOuterEvent('mousedown', [ref], onCancel);\n\n useEscape(onCancel);\n\n useFocusTrap(ref);\n\n useEffect(() => {\n getFocusables(ref)[0]?.focus();\n }, []);\n\n const header = useMemo(() => {\n if (loading) return;\n\n const h2 = (\n <Text variant='h2' id={headingId}>\n {displayHeading ? heading : <VisuallyHiddenText>{heading}</VisuallyHiddenText>}\n </Text>\n );\n\n return displayHeading ? <CardHeader>{h2}</CardHeader> : h2;\n }, [loading, heading, headingId, displayHeading]);\n\n return (\n <Flex\n role='dialog'\n aria-labelledby={headingId}\n container={{ direction: 'column' }}\n as={StyledPopover}\n target={target}\n arrow\n ref={ref}\n >\n {header}\n\n <Flex item={{ grow: 1 }} as={StyledContent}>\n {!loading && children}\n </Flex>\n\n {!loading && (\n <CardFooter container={{ justify: 'between' }}>\n <Button autoFocus onClick={onCancel}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={onSubmit}>\n {t('submit')}\n </Button>\n </CardFooter>\n )}\n\n {loading && <Progress placement='local' message={t('loading')} />}\n </Flex>\n );\n};\n\nexport default Popover;\n"]}
1	+ {"version":3,"file":"Popover.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Popover as CorePopover,\n Flex,\n Button,\n Text,\n useI18n,\n useEscape,\n useOuterEvent,\n CardHeader,\n CardFooter,\n CardContent,\n Progress,\n useFocusTrap,\n useUID,\n getFocusables,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type { PopoverProps as CorePopoverProps } from '@pega/cosmos-react-core';\n\ntype PopoverProps = {\n target: NonNullable<CorePopoverProps['target']>;\n loading?: boolean;\n heading: string;\n children?: ReactNode;\n displayHeading?: boolean;\n onCancel: () => void;\n onSubmit: () => void;\n};\n\nconst StyledContent = styled(CardContent)`\n overflow: auto;\n`;\n\nconst StyledPopover = styled(CorePopover)`\n position: relative;\n width: min(100vh, 60ch);\n min-height: 6rem;\n max-height: calc(100vh - 2rem);\n`;\n\nconst Popover = ({\n loading,\n heading,\n target,\n children,\n displayHeading = true,\n onCancel,\n onSubmit\n}: PopoverProps) => {\n const t = useI18n();\n const headingId = useUID();\n const ref = useRef<HTMLElement>(null);\n\n useOuterEvent('mousedown', [ref], onCancel);\n\n useEscape(onCancel);\n\n useFocusTrap(ref);\n\n useEffect(() => {\n getFocusables(ref)[0]?.focus();\n }, []);\n\n const header = useMemo(() => {\n if (loading) return;\n\n const h2 = (\n <Text variant='h2' id={headingId}>\n {displayHeading ? heading : <VisuallyHiddenText>{heading}</VisuallyHiddenText>}\n </Text>\n );\n\n return displayHeading ? <CardHeader>{h2}</CardHeader> : h2;\n }, [loading, heading, headingId, displayHeading]);\n\n return (\n <Flex\n role='dialog'\n aria-labelledby={headingId}\n container={{ direction: 'column' }}\n as={StyledPopover}\n target={target}\n arrow\n ref={ref}\n >\n {header}\n\n <Flex item={{ grow: 1 }} as={StyledContent}>\n {!loading && children}\n </Flex>\n\n {!loading && (\n <CardFooter container={{ justify: 'between' }}>\n <Button autoFocus onClick={onCancel}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={onSubmit}>\n {t('submit')}\n </Button>\n </CardFooter>\n )}\n\n {loading && <Progress placement='local' message={t('loading')} />}\n </Flex>\n );\n};\n\nexport default Popover;\n"]}

package/jsx/dnd/StandardDragDropList/SelectionMenu.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { PopoverProps } from '@pega/cosmos-react-core';
-import { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';
-import { ContentType, FieldType } from './mockData';
+import type { PopoverProps } from '@pega/cosmos-react-core';
+import type { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';
+import type { ContentType, FieldType } from './mockData';
 export interface SelectionMenuProps {
     target: NonNullable<PopoverProps['target']>;
     constraint?: {
@@ -11,6 +11,6 @@ export interface SelectionMenuProps {
     onCancel: () => void;
     onSubmit: (selected: NonNullable<MultiSelectInputProps['selected']>) => void;
 }
-declare const SelectionMenu: ({ target, constraint, onCancel: onClose, onSubmit }: SelectionMenuProps) => JSX.Element;
+declare const SelectionMenu: ({ target, constraint, onCancel: onClose, onSubmit }: SelectionMenuProps) => import("react").JSX.Element;
 export default SelectionMenu;
 //# sourceMappingURL=SelectionMenu.d.ts.map

package/jsx/dnd/StandardDragDropList/SelectionMenu.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionMenu.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/SelectionMenu.tsx"],"names":[],"mappings":";~~AAGA~~,OAAO,~~EAML~~,YAAY,~~EAGb~~,MAAM,yBAAyB,CAAC;~~AAEjC~~,OAAO,EAAE,qBAAqB,EAAE,MAAM,yFAAyF,CAAC;~~AAEhI~~,OAAO,EAAE,WAAW,EAAE,SAAS,~~EAAa~~,MAAM,YAAY,CAAC;~~AAG/D~~,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;QACtB,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;KACxB,CAAC;IACF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,KAAK,IAAI,CAAC;CAC9E;AAeD,QAAA,MAAM,aAAa,wDAAyD,kBAAkB,~~gBAwI7F~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"SelectionMenu.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/SelectionMenu.tsx"],"names":[],"mappings":";AAYA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yFAAyF,CAAC;AAGrI,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAGzD,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;QACtB,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;KACxB,CAAC;IACF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,KAAK,IAAI,CAAC;CAC9E;AAeD,QAAA,MAAM,aAAa,wDAAyD,kBAAkB,gCAwI7F,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/jsx/dnd/StandardDragDropList/SelectionMenu.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionMenu.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/SelectionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAe~~,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAC3D~~,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,WAAW,~~EAGX~~,UAAU,EACV,OAAO,EACR,MAAM,yBAAyB,CAAC;~~AACjC~~,OAAO,gBAAgB,MAAM,mFAAmF,CAAC;AAGjH,OAAO,~~EAA0B~~,SAAS,EAAE,MAAM,YAAY,CAAC;~~AAC/D~~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","sourcesContent":["import { ~~ChangeEvent,~~ useCallback, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Flex,\n Menu,\n menuHelpers,\n ~~MenuItemProps,\n PopoverProps,\n~~ useElement,\n useI18n\n} from '@pega/cosmos-react-core';\nimport MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';\nimport { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';\n\nimport { ContentType, FieldType, ~~mockQuery~~ } from './mockData';\nimport Popover from './Popover';\n\nexport interface SelectionMenuProps {\n target: NonNullable<PopoverProps['target']>;\n constraint?: {\n types?: ContentType[];\n subTypes?: FieldType[];\n };\n onCancel: () => void;\n onSubmit: (selected: NonNullable<MultiSelectInputProps['selected']>) => void;\n}\n\nconst StyledSelectionMenu: typeof Menu = styled(Menu)(({ theme }) => {\n return css`\n margin-inline: calc(-2 * ${theme.base.spacing});\n `;\n});\n\nStyledSelectionMenu.defaultProps = defaultThemeProp;\n\nconst rootMenuItems: MenuItemProps[] = [\n { id: 'fields', primary: 'Fields', items: [] },\n { id: 'views', primary: 'Views', items: [] }\n];\n\nconst SelectionMenu = ({ target, constraint, onCancel: onClose, onSubmit }: SelectionMenuProps) => {\n const t = useI18n();\n const [loading, setLoading] = useState(false);\n const [filterValue, setFilterValue] = useState('');\n const [inputEl, setInputEl] = useElement<HTMLElement>(null);\n\n const [menuItems, setMenuItems] = useState<MenuItemProps[]>(() => {\n if (constraint?.types) {\n const constrainedTypes = [];\n if (constraint.types.includes('Field')) {\n constrainedTypes.push(rootMenuItems[0]);\n }\n if (constraint.types.includes('View')) {\n constrainedTypes.push(rootMenuItems[1]);\n }\n\n return constrainedTypes;\n }\n\n return rootMenuItems;\n });\n\n const [selected, setSelected] = useState<NonNullable<MultiSelectInputProps['selected']>>(\n () => []\n );\n\n const onItemExpand = useCallback(\n async (id: MenuItemProps['id']) => {\n const expandedItem = menuHelpers.getItem(menuItems, id);\n if (!expandedItem \|\| (expandedItem.items && expandedItem.items.length > 0)) {\n return;\n }\n\n setLoading(true);\n\n const subItems = await mockQuery({\n type: id === 'fields' ? 'Field' : 'View',\n delay: 1000\n });\n\n const newMenuItems = menuHelpers.mapItem(menuItems, id, item => {\n return {\n ...item,\n items: subItems.map(subItem => ({\n id: subItem.id,\n primary: subItem.label,\n selected: !!selected.find(s => s.id === subItem.id)\n }))\n };\n });\n\n setMenuItems(newMenuItems as MenuItemProps[]);\n setLoading(false);\n },\n [menuItems, selected]\n );\n\n const onFilter = useCallback(async (e: ChangeEvent<HTMLInputElement>) => {\n const val = e.currentTarget.value;\n setFilterValue(val);\n\n if (val) {\n setLoading(true);\n setMenuItems([]);\n\n const matchedItems = await mockQuery({\n filter: val,\n delay: 1000\n });\n\n setMenuItems(\n matchedItems.map(matchedItem => {\n return {\n id: matchedItem.id,\n primary: matchedItem.label,\n secondary: [matchedItem.subType ?? matchedItem.type],\n selected: !!selected.find(s => s.id === matchedItem.id)\n };\n })\n );\n\n setLoading(false);\n return;\n }\n\n setMenuItems(rootMenuItems);\n }, []);\n\n const onItemClick = useCallback(\n (id: MenuItemProps['id']) => {\n setSelected(cur => {\n if (cur.find(s => s.id === id)) {\n return cur.filter(sel => sel.id !== id);\n }\n\n return [\n ...cur,\n { id, text: (menuHelpers.getItem(menuItems, id) as MenuItemProps).primary }\n ];\n });\n\n setMenuItems(cur => menuHelpers.toggleSelected(cur, id) as MenuItemProps[]);\n },\n [menuItems]\n );\n\n return (\n <Popover\n target={target}\n heading='Content selection'\n onCancel={onClose}\n onSubmit={() => {\n onSubmit(selected);\n }}\n >\n <Flex container={{ direction: 'column', gap: 2, pad: [1, 0] }}>\n <MultiSelectInput\n ref={setInputEl}\n placeholder={t('search_placeholder_default')}\n value={filterValue}\n selected={selected}\n onChange={onFilter}\n onRemove={onItemClick}\n />\n <StyledSelectionMenu\n focusControlEl={inputEl ?? undefined}\n mode='multi-select'\n items={menuItems}\n scrollAt={10}\n loading={loading}\n onItemClick={onItemClick}\n onItemExpand={onItemExpand}\n />\n </Flex>\n </Popover>\n );\n};\n\nexport default SelectionMenu;\n"]}
1	+ {"version":3,"file":"SelectionMenu.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/SelectionMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react';\nimport type { ChangeEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Flex,\n Menu,\n menuHelpers,\n useElement,\n useI18n\n} from '@pega/cosmos-react-core';\nimport type { MenuItemProps, PopoverProps } from '@pega/cosmos-react-core';\nimport MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';\nimport type { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';\n\nimport { mockQuery } from './mockData';\nimport type { ContentType, FieldType } from './mockData';\nimport Popover from './Popover';\n\nexport interface SelectionMenuProps {\n target: NonNullable<PopoverProps['target']>;\n constraint?: {\n types?: ContentType[];\n subTypes?: FieldType[];\n };\n onCancel: () => void;\n onSubmit: (selected: NonNullable<MultiSelectInputProps['selected']>) => void;\n}\n\nconst StyledSelectionMenu: typeof Menu = styled(Menu)(({ theme }) => {\n return css`\n margin-inline: calc(-2 * ${theme.base.spacing});\n `;\n});\n\nStyledSelectionMenu.defaultProps = defaultThemeProp;\n\nconst rootMenuItems: MenuItemProps[] = [\n { id: 'fields', primary: 'Fields', items: [] },\n { id: 'views', primary: 'Views', items: [] }\n];\n\nconst SelectionMenu = ({ target, constraint, onCancel: onClose, onSubmit }: SelectionMenuProps) => {\n const t = useI18n();\n const [loading, setLoading] = useState(false);\n const [filterValue, setFilterValue] = useState('');\n const [inputEl, setInputEl] = useElement<HTMLElement>(null);\n\n const [menuItems, setMenuItems] = useState<MenuItemProps[]>(() => {\n if (constraint?.types) {\n const constrainedTypes = [];\n if (constraint.types.includes('Field')) {\n constrainedTypes.push(rootMenuItems[0]);\n }\n if (constraint.types.includes('View')) {\n constrainedTypes.push(rootMenuItems[1]);\n }\n\n return constrainedTypes;\n }\n\n return rootMenuItems;\n });\n\n const [selected, setSelected] = useState<NonNullable<MultiSelectInputProps['selected']>>(\n () => []\n );\n\n const onItemExpand = useCallback(\n async (id: MenuItemProps['id']) => {\n const expandedItem = menuHelpers.getItem(menuItems, id);\n if (!expandedItem \|\| (expandedItem.items && expandedItem.items.length > 0)) {\n return;\n }\n\n setLoading(true);\n\n const subItems = await mockQuery({\n type: id === 'fields' ? 'Field' : 'View',\n delay: 1000\n });\n\n const newMenuItems = menuHelpers.mapItem(menuItems, id, item => {\n return {\n ...item,\n items: subItems.map(subItem => ({\n id: subItem.id,\n primary: subItem.label,\n selected: !!selected.find(s => s.id === subItem.id)\n }))\n };\n });\n\n setMenuItems(newMenuItems as MenuItemProps[]);\n setLoading(false);\n },\n [menuItems, selected]\n );\n\n const onFilter = useCallback(async (e: ChangeEvent<HTMLInputElement>) => {\n const val = e.currentTarget.value;\n setFilterValue(val);\n\n if (val) {\n setLoading(true);\n setMenuItems([]);\n\n const matchedItems = await mockQuery({\n filter: val,\n delay: 1000\n });\n\n setMenuItems(\n matchedItems.map(matchedItem => {\n return {\n id: matchedItem.id,\n primary: matchedItem.label,\n secondary: [matchedItem.subType ?? matchedItem.type],\n selected: !!selected.find(s => s.id === matchedItem.id)\n };\n })\n );\n\n setLoading(false);\n return;\n }\n\n setMenuItems(rootMenuItems);\n }, []);\n\n const onItemClick = useCallback(\n (id: MenuItemProps['id']) => {\n setSelected(cur => {\n if (cur.find(s => s.id === id)) {\n return cur.filter(sel => sel.id !== id);\n }\n\n return [\n ...cur,\n { id, text: (menuHelpers.getItem(menuItems, id) as MenuItemProps).primary }\n ];\n });\n\n setMenuItems(cur => menuHelpers.toggleSelected(cur, id) as MenuItemProps[]);\n },\n [menuItems]\n );\n\n return (\n <Popover\n target={target}\n heading='Content selection'\n onCancel={onClose}\n onSubmit={() => {\n onSubmit(selected);\n }}\n >\n <Flex container={{ direction: 'column', gap: 2, pad: [1, 0] }}>\n <MultiSelectInput\n ref={setInputEl}\n placeholder={t('search_placeholder_default')}\n value={filterValue}\n selected={selected}\n onChange={onFilter}\n onRemove={onItemClick}\n />\n <StyledSelectionMenu\n focusControlEl={inputEl ?? undefined}\n mode='multi-select'\n items={menuItems}\n scrollAt={10}\n loading={loading}\n onItemClick={onItemClick}\n onItemExpand={onItemExpand}\n />\n </Flex>\n </Popover>\n );\n};\n\nexport default SelectionMenu;\n"]}

package/jsx/rte/DynamicContentEditor/DynamicContentEditor.stories.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { StoryFn } from '@storybook/react';
-import { DynamicContentEditorProps } from '@pega/cosmos-react-rte';
+import type { StoryFn } from '@storybook/react';
+import type { DynamicContentEditorProps } from '@pega/cosmos-react-rte';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {

package/jsx/rte/DynamicContentEditor/DynamicContentEditor.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;~~AAejD~~,OAAO,~~EAAwB~~,yBAAyB,~~EAAE~~,MAAM,wBAAwB,CAAC;;~~AAMzF~~,wBAGU;AAEV,MAAM,WAAW,8BAA+B,SAAQ,yBAAyB;CAAG;AAEpF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAoIrF,CAAC"}
1	+ {"version":3,"file":"DynamicContentEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAgBtD,OAAO,KAAK,EAAE,yBAAyB,EAAyB,MAAM,wBAAwB,CAAC;;AAK/F,wBAGU;AAEV,MAAM,WAAW,8BAA+B,SAAQ,yBAAyB;CAAG;AAEpF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAoIrF,CAAC"}

package/jsx/rte/DynamicContentEditor/DynamicContentEditor.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState, useCallback } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n TextArea,\n useAutoResize,\n useConsolidatedRef,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { DynamicContentEditor, DynamicContentEditorProps } from '@pega/cosmos-react-rte';\nimport type { EditorState, ItemType } from '@pega/cosmos-react-rte';\n\nimport FieldSelector from './FieldSelector';\nimport type { FieldSelectorProps } from './FieldSelector';\n\nexport default {\n title: 'RTE/DynamicContentEditor',\n component: DynamicContentEditor\n} as Meta;\n\nexport interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {}\n\nexport const DynamicContentEditorDemo: StoryFn<Partial<DynamicContentEditorStoryProps>> = (\n args: Partial<DynamicContentEditorStoryProps>\n) => {\n const [html, setHtml] = useState(\n '<p>Hi <pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"CustomerName\" data-rule-namespace=\"XCompass\">CustomerName</pega-reference><p>please check this <a href=\"https://google.com\">link</a></p></p>'\n );\n const rteRef = useRef<EditorState>(null);\n\n const fieldItems: DynamicContentEditorProps['fieldItems'] = [\n {\n id: 'CustomerName',\n primary: 'CustomerName',\n namespace: 'XCompass',\n items: [\n {\n id: 'Locale',\n primary: 'Locale',\n namespace: 'XCompass'\n },\n {\n id: 'Response Type',\n primary: 'Response Type',\n items: [\n {\n id: 'B',\n label: 'B',\n items: [{ id: 'Reply to', primary: 'Reply to' }]\n },\n { id: 'Forward to', primary: 'Forward to' }\n ]\n }\n ]\n },\n { id: 'Address', primary: 'Address', namespace: 'PegaPlatform' },\n { id: 'Locality', primary: 'Locality', namespace: 'PegaPlatform' },\n { id: 'Country', primary: 'Country', namespace: 'XCompass' },\n { id: 'Region', primary: 'Region', namespace: 'PegaPlatform' },\n { id: 'Occupation', primary: 'Occupation', namespace: 'PegaPlatform' },\n { id: 'City', primary: 'City' },\n { id: 'Colony', primary: 'Colony' },\n { id: 'Lastname', primary: 'Lastname' },\n { id: 'Preference', primary: 'Preference' },\n { id: 'Currency', primary: 'Currency' },\n { id: 'Iconname', primary: 'Iconname' }\n ];\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n rteRef.current?.appendImage({ src, alt: image.name }, id);\n };\n const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n const ref = useRef(null);\n const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n const handleShowHtml = () => {\n resizeTextArea();\n setHtml(rteRef.current?.getHtml() \|\| '');\n };\n const t = useI18n();\n const [selectedField, setSelectedField] = useState<ItemType>({\n id: '',\n text: ''\n });\n\n const updateSelection: FieldSelectorProps['updateSelection'] = (selectedItem: ItemType) => {\n setSelectedField(selectedItem);\n };\n const onSubmit = useCallback(\n (insertField: (selectedField: ItemType) => void) => {\n insertField(selectedField);\n },\n [selectedField]\n );\n\n const dynamicContentPicker = (\n <Flex\n container={{\n gap: 2,\n direction: 'column'\n }}\n >\n <FieldSelector\n itemList={[\n { id: 'CustomerName', text: 'CustomerName', namespace: 'XCompass' },\n { id: 'Address', text: 'Address', namespace: 'PegaPlatform' },\n { id: 'Locality', text: 'Locality', namespace: 'PegaPlatform' },\n { id: 'Country', text: 'Country', namespace: 'XCompass' },\n { id: 'Region', text: 'Region', namespace: 'PegaPlatform' },\n { id: 'Occupation', text: 'Occupation', namespace: 'PegaPlatform' }\n ]}\n key={selectedField?.id}\n label='Field'\n updateSelection={updateSelection}\n placeholder={t('select')}\n defaultSelection={selectedField}\n />\n </Flex>\n );\n const onActiveFieldChange = (field: ItemType) => setSelectedField(field);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Card>\n <CardContent>\n <TextArea\n value={html}\n onChange={e => setHtml(e.target.value)}\n autoResize\n ref={consolidatedRef}\n />\n </CardContent>\n <CardFooter>\n <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n Overwrite RTE with new HTML\n </Button>\n </CardFooter>\n </Card>\n <DynamicContentEditor\n defaultValue={args.defaultValue \|\| html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label='Dynamic content editor'\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n form={args.form \|\| { onSubmit, dynamicContentPicker }}\n onActiveFieldChange={args.onActiveFieldChange \|\| onActiveFieldChange}\n fieldItems={args.fieldItems \|\| fieldItems}\n onBlur={action('Editor onBlur')}\n />\n <Flex container={{ gap: 1 }}>\n <Button onClick={() => handleShowHtml()}>Show HTML</Button>\n </Flex>\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"DynamicContentEditor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState, useCallback } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n TextArea,\n useAutoResize,\n useConsolidatedRef,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { DynamicContentEditor } from '@pega/cosmos-react-rte';\nimport type { DynamicContentEditorProps, EditorState, ItemType } from '@pega/cosmos-react-rte';\n\nimport FieldSelector from './FieldSelector';\nimport type { FieldSelectorProps } from './FieldSelector';\n\nexport default {\n title: 'RTE/DynamicContentEditor',\n component: DynamicContentEditor\n} as Meta;\n\nexport interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {}\n\nexport const DynamicContentEditorDemo: StoryFn<Partial<DynamicContentEditorStoryProps>> = (\n args: Partial<DynamicContentEditorStoryProps>\n) => {\n const [html, setHtml] = useState(\n '<p>Hi <pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"CustomerName\" data-rule-namespace=\"XCompass\">CustomerName</pega-reference><p>please check this <a href=\"https://google.com\">link</a></p></p>'\n );\n const rteRef = useRef<EditorState>(null);\n\n const fieldItems: DynamicContentEditorProps['fieldItems'] = [\n {\n id: 'CustomerName',\n primary: 'CustomerName',\n namespace: 'XCompass',\n items: [\n {\n id: 'Locale',\n primary: 'Locale',\n namespace: 'XCompass'\n },\n {\n id: 'Response Type',\n primary: 'Response Type',\n items: [\n {\n id: 'B',\n label: 'B',\n items: [{ id: 'Reply to', primary: 'Reply to' }]\n },\n { id: 'Forward to', primary: 'Forward to' }\n ]\n }\n ]\n },\n { id: 'Address', primary: 'Address', namespace: 'PegaPlatform' },\n { id: 'Locality', primary: 'Locality', namespace: 'PegaPlatform' },\n { id: 'Country', primary: 'Country', namespace: 'XCompass' },\n { id: 'Region', primary: 'Region', namespace: 'PegaPlatform' },\n { id: 'Occupation', primary: 'Occupation', namespace: 'PegaPlatform' },\n { id: 'City', primary: 'City' },\n { id: 'Colony', primary: 'Colony' },\n { id: 'Lastname', primary: 'Lastname' },\n { id: 'Preference', primary: 'Preference' },\n { id: 'Currency', primary: 'Currency' },\n { id: 'Iconname', primary: 'Iconname' }\n ];\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n rteRef.current?.appendImage({ src, alt: image.name }, id);\n };\n const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n const ref = useRef(null);\n const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n const handleShowHtml = () => {\n resizeTextArea();\n setHtml(rteRef.current?.getHtml() \|\| '');\n };\n const t = useI18n();\n const [selectedField, setSelectedField] = useState<ItemType>({\n id: '',\n text: ''\n });\n\n const updateSelection: FieldSelectorProps['updateSelection'] = (selectedItem: ItemType) => {\n setSelectedField(selectedItem);\n };\n const onSubmit = useCallback(\n (insertField: (selectedField: ItemType) => void) => {\n insertField(selectedField);\n },\n [selectedField]\n );\n\n const dynamicContentPicker = (\n <Flex\n container={{\n gap: 2,\n direction: 'column'\n }}\n >\n <FieldSelector\n itemList={[\n { id: 'CustomerName', text: 'CustomerName', namespace: 'XCompass' },\n { id: 'Address', text: 'Address', namespace: 'PegaPlatform' },\n { id: 'Locality', text: 'Locality', namespace: 'PegaPlatform' },\n { id: 'Country', text: 'Country', namespace: 'XCompass' },\n { id: 'Region', text: 'Region', namespace: 'PegaPlatform' },\n { id: 'Occupation', text: 'Occupation', namespace: 'PegaPlatform' }\n ]}\n key={selectedField?.id}\n label='Field'\n updateSelection={updateSelection}\n placeholder={t('select')}\n defaultSelection={selectedField}\n />\n </Flex>\n );\n const onActiveFieldChange = (field: ItemType) => setSelectedField(field);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Card>\n <CardContent>\n <TextArea\n value={html}\n onChange={e => setHtml(e.target.value)}\n autoResize\n ref={consolidatedRef}\n />\n </CardContent>\n <CardFooter>\n <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n Overwrite RTE with new HTML\n </Button>\n </CardFooter>\n </Card>\n <DynamicContentEditor\n defaultValue={args.defaultValue \|\| html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label='Dynamic content editor'\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n form={args.form \|\| { onSubmit, dynamicContentPicker }}\n onActiveFieldChange={args.onActiveFieldChange \|\| onActiveFieldChange}\n fieldItems={args.fieldItems \|\| fieldItems}\n onBlur={action('Editor onBlur')}\n />\n <Flex container={{ gap: 1 }}>\n <Button onClick={() => handleShowHtml()}>Show HTML</Button>\n </Flex>\n </Flex>\n );\n};\n"]}

package/jsx/rte/DynamicContentEditor/FieldSelector.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { FunctionComponent } from 'react';
-import { ComboBoxProps, NoChildrenProp } from '@pega/cosmos-react-core';
-import { ItemType } from '@pega/cosmos-react-rte/lib/components/DynamicContentEditor/DynamicContentEditor.types';
+import type { FunctionComponent } from 'react';
+import type { ComboBoxProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { ItemType } from '@pega/cosmos-react-rte/lib/components/DynamicContentEditor/DynamicContentEditor.types';
 export interface FieldSelectorProps extends NoChildrenProp {
     itemList: ItemType[];
     updateSelection: (selectedItem: ItemType, label: ComboBoxProps['label']) => void;