npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.23.1 → 4.0.0-dev.24.0 - Mend

@pega/cosmos-react-demos 4.0.0-dev.23.1 → 4.0.0-dev.24.0

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

Files changed (117) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTime.stories.js","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n DateInput,\n DateTimeInput,\n DateRangeInput,\n DayOfWeekInput,\n DurationInput,\n Format,\n MonthInput,\n QuarterInput,\n TimeInput,\n WeekInput,\n usePrevious,\n TimeRangeInput\n} from '@pega/cosmos-react-core';\nimport type {\n DateInputProps,\n DateTimeInputProps,\n DateRangeInputProps,\n DayOfWeekInputProps,\n DurationInputProps,\n MonthInputProps,\n QuarterInputProps,\n TimeInputProps,\n WeekInputProps,\n TimeRangeInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/DateTime/Input',\n args: {\n value: undefined,\n status: undefined,\n info: 'can not be blank',\n label: '',\n labelHidden: false,\n required: false,\n disabled: false,\n readOnly: false,\n min: undefined,\n max: undefined,\n showAdditionalInfo: true,\n mode: 'time'\n },\n argTypes: {\n value: { control: { type: 'date' } },\n status: {\n options: [undefined, 'success', 'warning', 'error', 'pending'],\n control: { type: 'select' }\n },\n info: { control: { type: 'text' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n min: { control: { type: 'date' } },\n max: { control: { type: 'date' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n mode: { options: ['time', 'datetime'], control: { type: 'select' } }\n }\n} as Meta;\n\ninterface DateInputStoryProps extends DateInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface MonthInputStoryProps extends MonthInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface WeekInputStoryProps extends WeekInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface QuarterInputStoryProps extends QuarterInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface DayOfWeekInputStoryProps extends DayOfWeekInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface TimeInputStoryProps extends TimeInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface DateTimeInputStoryProps extends DateTimeInputProps {\n showAdditionalInfo?: boolean;\n showWeekNumber?: boolean;\n}\n\ninterface DateRangeInputStoryProps extends DateRangeInputProps {\n showAdditionalInfo?: boolean;\n showToAdditionalInfo?: boolean;\n showFromAdditionalInfo?: boolean;\n}\n\ninterface DurationInputStoryProps extends DurationInputProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const DateInputDemo: StoryFn<DateInputStoryProps> = (args: DateInputStoryProps) => {\n const [value, setValue] = useState<DateInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DateInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n showWeekNumber={args.showWeekNumber}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nDateInputDemo.args = {\n showWeekNumber: false,\n label: 'Date input'\n};\n\nDateInputDemo.argTypes = {\n showWeekNumber: { control: { type: 'boolean' } }\n};\n\nexport const MonthInputDemo: StoryFn<MonthInputStoryProps> = (args: MonthInputStoryProps) => {\n const [value, setValue] = useState<MonthInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <MonthInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nMonthInputDemo.args = {\n label: 'Month input'\n};\n\nMonthInputDemo.argTypes = {\n label: { control: { type: 'string' } }\n};\n\nexport const WeekInputDemo: StoryFn<WeekInputStoryProps> = (args: WeekInputStoryProps) => {\n const [value, setValue] = useState<WeekInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <WeekInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nWeekInputDemo.args = {\n label: 'Week input'\n};\n\nWeekInputDemo.argTypes = {\n label: { control: { type: 'string' } }\n};\n\nexport const QuarterInputDemo: StoryFn<QuarterInputStoryProps> = (args: QuarterInputStoryProps) => {\n const [value, setValue] = useState<QuarterInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <QuarterInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nQuarterInputDemo.args = {\n label: 'Quarter input'\n};\n\nQuarterInputDemo.argTypes = {\n label: { control: { type: 'string' } }\n};\n\nexport const DayOfWeekInputDemo: StoryFn<\n DayOfWeekInputStoryProps & { min?: never; max?: never }\n> = (args: DayOfWeekInputStoryProps) => {\n const [value, setValue] = useState<DayOfWeekInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DayOfWeekInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n onChange={setValue}\n />\n );\n};\n\nDayOfWeekInputDemo.args = {\n label: 'Day of the week input'\n};\n\nDayOfWeekInputDemo.argTypes = {\n min: { table: { disable: true } },\n max: { table: { disable: true } }\n};\n\nexport const TimeInputDemo: StoryFn<TimeInputStoryProps> = (args: TimeInputStoryProps) => {\n const [value, setValue] = useState<TimeInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <TimeInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n withSeconds={args.withSeconds}\n clockFormat={args.clockFormat}\n pickerInterval={args.pickerInterval}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nTimeInputDemo.args = {\n withSeconds: false,\n clockFormat: undefined,\n pickerInterval: 30,\n label: 'Time input'\n};\n\nTimeInputDemo.argTypes = {\n withSeconds: { control: { type: 'boolean' } },\n clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateTimeInputDemo: StoryFn<DateTimeInputStoryProps> = (\n args: DateTimeInputStoryProps\n) => {\n const [value, setValue] = useState<DateTimeInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DateTimeInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n showWeekNumber={args.showWeekNumber}\n withSeconds={args.withSeconds}\n clockFormat={args.clockFormat}\n pickerInterval={args.pickerInterval}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nDateTimeInputDemo.args = {\n showWeekNumber: false,\n withSeconds: false,\n clockFormat: undefined,\n pickerInterval: 30,\n label: 'DateTime input'\n};\n\nDateTimeInputDemo.argTypes = {\n showWeekNumber: { control: { type: 'boolean' } },\n withSeconds: { control: { type: 'boolean' } },\n clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateRangeInputDemo: StoryFn<DateRangeInputStoryProps> = (\n args: DateRangeInputStoryProps\n) => {\n const [value, setValue] = useState<DateRangeInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DateRangeInput\n toAdditionalInfo={\n args.showToAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a to date'\n }\n : undefined\n }\n fromAdditionalInfo={\n args.showFromAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a from date'\n }\n : undefined\n }\n value={value}\n onChange={({ start, end }) => {\n if (!start.state && !end.state)\n setValue({ start: start.valueAsISOString, end: end.valueAsISOString });\n }}\n showWeekNumber={args.showWeekNumber}\n status={args.status}\n info={args.info}\n label={args.label}\n fromLabel={args.fromLabel}\n toLabel={args.toLabel}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nDateRangeInputDemo.args = {\n showWeekNumber: false,\n label: 'Dates of stay',\n fromLabel: 'Check in',\n toLabel: 'Check out',\n showFromAdditionalInfo: true,\n showToAdditionalInfo: true\n};\n\nDateRangeInputDemo.argTypes = {\n showWeekNumber: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n fromLabel: { control: { type: 'text' } },\n toLabel: { control: { type: 'text' } },\n min: { table: { disable: true } },\n max: { table: { disable: true } },\n showAdditionalInfo: { table: { disable: true } },\n showFromAdditionalInfo: { control: { type: 'boolean' } },\n showToAdditionalInfo: { control: { type: 'boolean' } }\n};\n\nexport const TimeRangeInputDemo: StoryFn<TimeRangeInputProps> = (args: TimeRangeInputProps) => {\n const [value, setValue] = useState(args.value);\n\n const prevValue = usePrevious(args.value);\n\n useEffect(() => {\n if (prevValue?.start !== args.value?.start \|\| prevValue?.end !== args.value?.end) {\n setValue(args.value);\n }\n }, [prevValue?.start, prevValue?.end, args.value?.start, args.value?.end]);\n return (\n <TimeRangeInput\n value={value}\n onChange={newState =>\n setValue({ start: newState.start.valueAsTimestamp, end: newState.end.valueAsTimestamp })\n }\n label={args.label}\n status={args.status}\n info={args.info}\n fromLabel={args.fromLabel}\n toLabel={args.toLabel}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n mode={args.mode}\n withSeconds={args.withSeconds}\n />\n );\n};\n\nTimeRangeInputDemo.args = {\n fromLabel: 'Meeting start',\n toLabel: 'Meeting end',\n withSeconds: false\n};\n\nTimeRangeInputDemo.argTypes = {\n fromLabel: { control: { type: 'text' } },\n toLabel: { control: { type: 'text' } },\n label: { control: { type: 'text' } },\n min: { table: { disable: true } },\n max: { table: { disable: true } },\n withSeconds: { control: { type: 'boolean' } }\n};\n\nexport const DurationInputDemo: StoryFn<DurationInputStoryProps & { min?: never; max?: never }> = (\n args: DurationInputStoryProps\n) => {\n const [value, setValue] = useState(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DurationInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a duration'\n }\n : undefined\n }\n value={value}\n onChange={setValue}\n format={args.format}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nDurationInputDemo.args = {\n value: 86400000,\n\n format: Format.Seconds,\n label: 'Duration input'\n};\n\nDurationInputDemo.argTypes = {\n value: { control: { type: 'number' } },\n format: {\n options: [Format.Seconds, Format.Minutes, Format.Hours, Format.Days, Format.Formatted],\n control: { type: 'select' }\n },\n min: { table: { disable: true } },\n max: { table: { disable: true } }\n};\n"]}
1	+ {"version":3,"file":"DateTime.stories.js","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n DateInput,\n DateTimeInput,\n DateRangeInput,\n DayOfWeekInput,\n DurationInput,\n Format,\n MonthInput,\n QuarterInput,\n TimeInput,\n WeekInput,\n usePrevious,\n TimeRangeInput\n} from '@pega/cosmos-react-core';\nimport type {\n DateInputProps,\n DateTimeInputProps,\n DateRangeInputProps,\n DayOfWeekInputProps,\n DurationInputProps,\n MonthInputProps,\n QuarterInputProps,\n TimeInputProps,\n WeekInputProps,\n TimeRangeInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/DateTime/Input',\n args: {\n value: undefined,\n status: undefined,\n info: 'can not be blank',\n label: '',\n labelHidden: false,\n required: false,\n disabled: false,\n readOnly: false,\n min: undefined,\n max: undefined,\n showAdditionalInfo: true,\n mode: 'time'\n },\n argTypes: {\n value: { control: { type: 'date' } },\n status: {\n options: [undefined, 'success', 'warning', 'error', 'pending'],\n control: { type: 'select' }\n },\n info: { control: { type: 'text' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n min: { control: { type: 'date' } },\n max: { control: { type: 'date' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n mode: { options: ['time', 'datetime'], control: { type: 'select' } }\n }\n} as Meta;\n\ninterface DateInputStoryProps extends DateInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface MonthInputStoryProps extends MonthInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface WeekInputStoryProps extends WeekInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface QuarterInputStoryProps extends QuarterInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface DayOfWeekInputStoryProps extends DayOfWeekInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface TimeInputStoryProps extends TimeInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface DateTimeInputStoryProps extends DateTimeInputProps {\n showAdditionalInfo?: boolean;\n showWeekNumber?: boolean;\n}\n\ninterface DateRangeInputStoryProps extends DateRangeInputProps {\n showAdditionalInfo?: boolean;\n showToAdditionalInfo?: boolean;\n showFromAdditionalInfo?: boolean;\n}\n\ninterface DurationInputStoryProps extends DurationInputProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const DateInputDemo: StoryFn<DateInputStoryProps> = (args: DateInputStoryProps) => {\n const [value, setValue] = useState<DateInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DateInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n showWeekNumber={args.showWeekNumber}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nDateInputDemo.args = {\n showWeekNumber: false,\n label: 'Date input'\n};\n\nDateInputDemo.argTypes = {\n showWeekNumber: { control: { type: 'boolean' } }\n};\n\nexport const MonthInputDemo: StoryFn<MonthInputStoryProps> = (args: MonthInputStoryProps) => {\n const [value, setValue] = useState<MonthInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <MonthInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nMonthInputDemo.args = {\n label: 'Month input'\n};\n\nMonthInputDemo.argTypes = {\n label: { control: { type: 'string' } }\n};\n\nexport const WeekInputDemo: StoryFn<WeekInputStoryProps> = (args: WeekInputStoryProps) => {\n const [value, setValue] = useState<WeekInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <WeekInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nWeekInputDemo.args = {\n label: 'Week input'\n};\n\nWeekInputDemo.argTypes = {\n label: { control: { type: 'string' } }\n};\n\nexport const QuarterInputDemo: StoryFn<QuarterInputStoryProps> = (args: QuarterInputStoryProps) => {\n const [value, setValue] = useState<QuarterInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <QuarterInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nQuarterInputDemo.args = {\n label: 'Quarter input'\n};\n\nQuarterInputDemo.argTypes = {\n label: { control: { type: 'string' } }\n};\n\nexport const DayOfWeekInputDemo: StoryFn<\n DayOfWeekInputStoryProps & { min?: never; max?: never }\n> = (args: DayOfWeekInputStoryProps) => {\n const [value, setValue] = useState<DayOfWeekInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DayOfWeekInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n onChange={setValue}\n />\n );\n};\n\nDayOfWeekInputDemo.args = {\n label: 'Day of the week input'\n};\n\nDayOfWeekInputDemo.argTypes = {\n min: { table: { disable: true } },\n max: { table: { disable: true } }\n};\n\nexport const TimeInputDemo: StoryFn<TimeInputStoryProps> = (args: TimeInputStoryProps) => {\n const [value, setValue] = useState<TimeInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <TimeInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n withSeconds={args.withSeconds}\n clockFormat={args.clockFormat}\n pickerInterval={args.pickerInterval}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nTimeInputDemo.args = {\n withSeconds: false,\n clockFormat: undefined,\n pickerInterval: 30,\n label: 'Time input'\n};\n\nTimeInputDemo.argTypes = {\n withSeconds: { control: { type: 'boolean' } },\n clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateTimeInputDemo: StoryFn<DateTimeInputStoryProps> = (\n args: DateTimeInputStoryProps\n) => {\n const [value, setValue] = useState<DateTimeInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DateTimeInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n showWeekNumber={args.showWeekNumber}\n withSeconds={args.withSeconds}\n clockFormat={args.clockFormat}\n pickerInterval={args.pickerInterval}\n status={args.status}\n info={args.info}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nDateTimeInputDemo.args = {\n showWeekNumber: false,\n withSeconds: false,\n clockFormat: undefined,\n pickerInterval: 30,\n label: 'DateTime input'\n};\n\nDateTimeInputDemo.argTypes = {\n showWeekNumber: { control: { type: 'boolean' } },\n withSeconds: { control: { type: 'boolean' } },\n clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateRangeInputDemo: StoryFn<DateRangeInputStoryProps> = (\n args: DateRangeInputStoryProps\n) => {\n const [value, setValue] = useState<DateRangeInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DateRangeInput\n toAdditionalInfo={\n args.showToAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a to date'\n }\n : undefined\n }\n fromAdditionalInfo={\n args.showFromAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a from date'\n }\n : undefined\n }\n value={value}\n onChange={({ start, end }) => {\n if (!start.state && !end.state)\n setValue({ start: start.valueAsISOString, end: end.valueAsISOString });\n }}\n showWeekNumber={args.showWeekNumber}\n status={args.status}\n info={args.info}\n label={args.label}\n fromLabel={args.fromLabel}\n toLabel={args.toLabel}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nDateRangeInputDemo.args = {\n showWeekNumber: false,\n label: 'Dates of stay',\n fromLabel: 'Check in',\n toLabel: 'Check out',\n showFromAdditionalInfo: true,\n showToAdditionalInfo: true\n};\n\nDateRangeInputDemo.argTypes = {\n showWeekNumber: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n fromLabel: { control: { type: 'text' } },\n toLabel: { control: { type: 'text' } },\n min: { table: { disable: true } },\n max: { table: { disable: true } },\n showAdditionalInfo: { table: { disable: true } },\n showFromAdditionalInfo: { control: { type: 'boolean' } },\n showToAdditionalInfo: { control: { type: 'boolean' } }\n};\n\nexport const TimeRangeInputDemo: StoryFn<TimeRangeInputProps> = (args: TimeRangeInputProps) => {\n const [value, setValue] = useState(args.value);\n\n const prevValue = usePrevious(args.value);\n\n useEffect(() => {\n if (prevValue?.start !== args.value?.start \|\| prevValue?.end !== args.value?.end) {\n setValue(args.value);\n }\n }, [prevValue?.start, prevValue?.end, args.value?.start, args.value?.end]);\n return (\n <TimeRangeInput\n value={value}\n onChange={newState =>\n setValue({ start: newState.start.valueAsTimestamp, end: newState.end.valueAsTimestamp })\n }\n label={args.label}\n status={args.status}\n info={args.info}\n fromLabel={args.fromLabel}\n toLabel={args.toLabel}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n mode={args.mode}\n withSeconds={args.withSeconds}\n />\n );\n};\n\nTimeRangeInputDemo.args = {\n fromLabel: 'Meeting start',\n toLabel: 'Meeting end',\n withSeconds: false\n};\n\nTimeRangeInputDemo.argTypes = {\n fromLabel: { control: { type: 'text' } },\n toLabel: { control: { type: 'text' } },\n label: { control: { type: 'text' } },\n min: { table: { disable: true } },\n max: { table: { disable: true } },\n withSeconds: { control: { type: 'boolean' } }\n};\n\nexport const DurationInputDemo: StoryFn<DurationInputStoryProps & { min?: never; max?: never }> = (\n args: DurationInputStoryProps\n) => {\n const [value, setValue] = useState(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DurationInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a duration'\n }\n : undefined\n }\n value={value}\n onChange={setValue}\n format={args.format}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nDurationInputDemo.args = {\n value: 86400000,\n // eslint-disable-next-line demo-patterns/literal-args\n format: Format.Seconds,\n label: 'Duration input'\n};\n\nDurationInputDemo.argTypes = {\n value: { control: { type: 'number' } },\n format: {\n options: [Format.Seconds, Format.Minutes, Format.Hours, Format.Days, Format.Formatted],\n control: { type: 'select' }\n },\n min: { table: { disable: true } },\n max: { table: { disable: true } }\n};\n"]}

package/lib/core/Tabs/Tabs.stories.js CHANGED Viewed

@@ -19,9 +19,9 @@ export const TabsDemo = (args) => {
     const tabs = [
         { name: 'Tab 1', id: '1' },
         { name: 'Tab 2', id: '2' },
-        { name: 'Tab 3', id: '3' },
+        { name: 'Tab 3', id: '3', errors: 0 },
         { name: 'Tab 4', id: '4', disabled: true },
-        { name: 'Tab 5', id: '5' }
+        { name: 'Tab 5', id: '5', errors: 2 }
     ];
     return (_jsxs(Flex, { container: { direction: args.type === 'horizontal' ? 'column' : 'row' }, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsx(Tabs, { tabs: tabs, type: args.type, onTabClick: handleTabChange, currentTabId: panelShown }) }), _jsx(Flex, { container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panelShown, children: _jsx("div", { children: tab.name }) }, tab.id))) })] }));
 };
@@ -35,7 +35,7 @@ export const TabsCountDemo = (args) => {
         { name: 'Tab 2', id: '2', count: 14 },
         { name: 'Tab 3', id: '3', count: 0 },
         { name: 'Tab 4', id: '4', count: 56, disabled: true },
-        { name: 'Tab 5', id: '5', count: 150 }
+        { name: 'Tab 5', id: '5', count: 150, errors: 2 }
     ];
     return (_jsxs(Flex, { container: { direction: args.type === 'horizontal' ? 'column' : 'row' }, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsx(Tabs, { tabs: tabs, type: args.type, onTabClick: handleTabChange, currentTabId: panelShown }) }), _jsx(Flex, { container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panelShown, children: _jsxs("div", { children: [tab.name, " content"] }) }, tab.id))) })] }));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/D,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;KAC3E;CACM,CAAC;AAMV,MAAM,CAAC,MAAM,QAAQ,GAA0B,CAAC,IAAkB,EAAE,EAAE;IACpE,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG;QACX,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;~~QAC1B~~,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC1C,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;~~KAC3B~~,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,aAC3E,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,GAAI,GACvF,EACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAChD,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,YAAY,EAAE,UAAU,YAC/C,wBAAM,GAAG,CAAC,IAAI,GAAO,IADiC,GAAG,CAAC,EAAE,CAEnD,CACZ,CAAC,GACG,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAA0B,CAAC,IAAkB,EAAE,EAAE;IACzE,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG;QACX,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE;QACpC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE;QACrC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE;QACpC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;QACrD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE;~~KACvC~~,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,aAC3E,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,GAAI,GACvF,EACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAChD,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,YAAY,EAAE,UAAU,YAC/C,0BAAM,GAAG,CAAC,IAAI,gBAAe,IADyB,GAAG,CAAC,EAAE,CAEnD,CACZ,CAAC,GACG,IACF,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Flex, TabPanel, Tabs } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Tabs',\n component: Tabs,\n args: {\n type: 'horizontal'\n },\n argTypes: {\n type: { options: ['horizontal', 'vertical'], control: { type: 'select' } }\n }\n} as Meta;\n\ninterface TabDemoProps {\n type: 'horizontal' \| 'vertical';\n}\n\nexport const TabsDemo: StoryFn<TabDemoProps> = (args: TabDemoProps) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1' },\n { name: 'Tab 2', id: '2' },\n { name: 'Tab 3', id: '3' },\n { name: 'Tab 4', id: '4', disabled: true },\n { name: 'Tab 5', id: '5' }\n ];\n\n return (\n <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name}</div>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n};\n\nexport const TabsCountDemo: StoryFn<TabDemoProps> = (args: TabDemoProps) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1', count: 5 },\n { name: 'Tab 2', id: '2', count: 14 },\n { name: 'Tab 3', id: '3', count: 0 },\n { name: 'Tab 4', id: '4', count: 56, disabled: true },\n { name: 'Tab 5', id: '5', count: 150 }\n ];\n\n return (\n <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name} content</div>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Flex, TabPanel, Tabs } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Tabs',\n component: Tabs,\n args: {\n type: 'horizontal'\n },\n argTypes: {\n type: { options: ['horizontal', 'vertical'], control: { type: 'select' } }\n }\n} as Meta;\n\ninterface TabDemoProps {\n type: 'horizontal' \| 'vertical';\n}\n\nexport const TabsDemo: StoryFn<TabDemoProps> = (args: TabDemoProps) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1' },\n { name: 'Tab 2', id: '2' },\n { name: 'Tab 3', id: '3', errors: 0 },\n { name: 'Tab 4', id: '4', disabled: true },\n { name: 'Tab 5', id: '5', errors: 2 }\n ];\n\n return (\n <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name}</div>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n};\n\nexport const TabsCountDemo: StoryFn<TabDemoProps> = (args: TabDemoProps) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1', count: 5 },\n { name: 'Tab 2', id: '2', count: 14 },\n { name: 'Tab 3', id: '3', count: 0 },\n { name: 'Tab 4', id: '4', count: 56, disabled: true },\n { name: 'Tab 5', id: '5', count: 150, errors: 2 }\n ];\n\n return (\n <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name} content</div>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n};\n"]}

package/lib/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,~~CAkIrF~~,CAAC"}
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"}

package/lib/rte/DynamicContentEditor/DynamicContentEditor.stories.js CHANGED Viewed

@@ -9,36 +9,38 @@ export default {
     component: DynamicContentEditor
 };
 export const DynamicContentEditorDemo = (args) => {
-    const [html, setHtml] = useState('<p>Hi <pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id="CustomerName">CustomerName</pega-reference><p>please check this <a href="https://google.com">link</a></p></p>');
+    const [html, setHtml] = useState('<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>');
     const rteRef = useRef(null);
     const fieldItems = [
         {
             id: 'CustomerName',
             primary: 'CustomerName',
+            namespace: 'XCompass',
             items: [
                 {
-                    id: '1-2',
-                    primary: 'Locale'
+                    id: 'Locale',
+                    primary: 'Locale',
+                    namespace: 'XCompass'
                 },
                 {
-                    id: '1-1',
+                    id: 'Response Type',
                     primary: 'Response Type',
                     items: [
                         {
-                            id: 'group-1-1-b',
+                            id: 'B',
                             label: 'B',
-                            items: [{ id: '1-1-1', primary: 'Reply to' }]
+                            items: [{ id: 'Reply to', primary: 'Reply to' }]
                         },
-                        { id: '1-1-4', primary: 'Forward to' }
+                        { id: 'Forward to', primary: 'Forward to' }
                     ]
                 }
             ]
         },
-        { id: 'Address', primary: 'Address' },
-        { id: 'Locality', primary: 'Locality' },
-        { id: 'Country', primary: 'Country' },
-        { id: 'Region', primary: 'Region' },
-        { id: 'Occupation', primary: 'Occupation' },
+        { id: 'Address', primary: 'Address', namespace: 'PegaPlatform' },
+        { id: 'Locality', primary: 'Locality', namespace: 'PegaPlatform' },
+        { id: 'Country', primary: 'Country', namespace: 'XCompass' },
+        { id: 'Region', primary: 'Region', namespace: 'PegaPlatform' },
+        { id: 'Occupation', primary: 'Occupation', namespace: 'PegaPlatform' },
         { id: 'City', primary: 'City' },
         { id: 'Colony', primary: 'Colony' },
         { id: 'Lastname', primary: 'Lastname' },
@@ -72,12 +74,12 @@ export const DynamicContentEditorDemo = (args) => {
             gap: 2,
             direction: 'column'
         }, children: _jsx(FieldSelector, { itemList: [
-                { id: 'CustomerName', text: 'CustomerName' },
-                { id: 'Address', text: 'Address' },
-                { id: 'Locality', text: 'Locality' },
-                { id: 'Country', text: 'Country' },
-                { id: 'Region', text: 'Region' },
-                { id: 'Occupation', text: 'Occupation' }
+                { id: 'CustomerName', text: 'CustomerName', namespace: 'XCompass' },
+                { id: 'Address', text: 'Address', namespace: 'PegaPlatform' },
+                { id: 'Locality', text: 'Locality', namespace: 'PegaPlatform' },
+                { id: 'Country', text: 'Country', namespace: 'XCompass' },
+                { id: 'Region', text: 'Region', namespace: 'PegaPlatform' },
+                { id: 'Occupation', text: 'Occupation', namespace: 'PegaPlatform' }
             ], label: 'Field', updateSelection: updateSelection, placeholder: t('select'), defaultSelection: selectedField }, selectedField?.id) }));
     const onActiveFieldChange = (field) => setSelectedField(field);
     return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsxs(Card, { children: [_jsx(CardContent, { children: _jsx(TextArea, { value: html, onChange: e => setHtml(e.target.value), autoResize: true, ref: consolidatedRef }) }), _jsx(CardFooter, { children: _jsx(Button, { onClick: () => rteRef.current?.insertHtml(html.trim(), true), children: "Overwrite RTE with new HTML" }) })] }), _jsx(DynamicContentEditor, { defaultValue: args.defaultValue || html, onImageAdded: onImageAdded, ref: rteRef, label: 'Dynamic content editor', toolbar: ['inline-styling', 'lists', 'indentation', 'links', 'images'], form: args.form || { onSubmit, dynamicContentPicker }, onActiveFieldChange: args.onActiveFieldChange || onActiveFieldChange, fieldItems: args.fieldItems || fieldItems, onBlur: action('Editor onBlur') }), _jsx(Flex, { container: { gap: 1 }, children: _jsx(Button, { onClick: () => handleShowHtml(), children: "Show HTML" }) })] }));

package/lib/rte/DynamicContentEditor/DynamicContentEditor.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.stories.js","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\">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 items: [\n {\n id: '1-2',\n primary: 'Locale'\n },\n {\n id: '1-1',\n primary: 'Response Type',\n items: [\n {\n id: 'group-1-1-b',\n label: 'B',\n items: [{ id: '1-1-1', primary: 'Reply to' }]\n },\n { id: '1-1-4', primary: 'Forward to' }\n ]\n }\n ]\n },\n { id: 'Address', primary: 'Address' },\n { id: 'Locality', primary: 'Locality' },\n { id: 'Country', primary: 'Country' },\n { id: 'Region', primary: 'Region' },\n { id: 'Occupation', primary: 'Occupation' },\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' },\n { id: 'Address', text: 'Address' },\n { id: 'Locality', text: 'Locality' },\n { id: 'Country', text: 'Country' },\n { id: 'Region', text: 'Region' },\n { id: 'Occupation', text: 'Occupation' }\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.js","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"]}

package/lib/rte/DynamicContentEditor/FieldSelector.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/FieldSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAEvF,OAAO,EAEL,aAAa,EAGb,cAAc,EAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,uFAAuF,CAAC;AAEjH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,gDAAgD;IAChD,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,2BAA2B;IAC3B,eAAe,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACjF,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,QAAQ,CAAC;CAC7B;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CACpC,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC,~~CAiGxF~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/FieldSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAEvF,OAAO,EAEL,aAAa,EAGb,cAAc,EAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,uFAAuF,CAAC;AAEjH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,gDAAgD;IAChD,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,2BAA2B;IAC3B,eAAe,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACjF,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,QAAQ,CAAC;CAC7B;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CACpC,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC,CAmGxF,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/rte/DynamicContentEditor/FieldSelector.js CHANGED Viewed

@@ -9,6 +9,7 @@ const FieldSelector = ({ itemList, label, mode = 'single-select', required = fal
             return {
                 id: item.id,
                 primary: item.text,
+                namespace: item.namespace ?? '',
                 selected: defaultSelection ? defaultSelection.id === item.id : false
             };
         });
@@ -42,7 +43,8 @@ const FieldSelector = ({ itemList, label, mode = 'single-select', required = fal
         if (selectedItem?.id)
             updateSelection({
                 id: selectedItem.id,
-                text: selectedItem.primary
+                text: selectedItem.primary,
+                namespace: selectedItem.namespace
             }, label);
     }, [filterValue, items]);
     const selected = useMemo(() => {

package/lib/rte/DynamicContentEditor/FieldSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/FieldSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,QAAQ,EAER,mBAAmB,EAGnB,OAAO,EACR,MAAM,yBAAyB,CAAC;AAYjC,MAAM,aAAa,GAEf,CAAC,EACH,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,eAAe,EACtB,QAAQ,GAAG,KAAK,EAChB,eAAe,EACf,WAAW,EACX,gBAAgB,EACjB,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACzB,OAAO;gBACL,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,OAAO,EAAE,IAAI,CAAC,IAAI;gBAClB,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;aACrE,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,mBAAmB,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACxF,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE;YACd,OAAO,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE;gBACtB,OAAO;oBACL,GAAG,IAAI;oBACP,QAAQ,EAAE,KAAK;iBAChB,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,EAAuB,EAAE,EAAE;QAC1B,cAAc,CAAC,EAAE,CAAC,CAAC;QACnB,QAAQ,CAAC,IAAI,CAAC,EAAE,CACd,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE;YACf,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE;gBAClB,OAAO;oBACL,GAAG,IAAI;oBACP,QAAQ,EAAE,IAAI;iBACf,CAAC;aACH;YACD,OAAO,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;QACtC,CAAC,CAAC,CACH,CAAC;QACF,MAAM,YAAY,GAAG,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACzD,IAAI,YAAY,EAAE,EAAE;YAClB,eAAe,CACb;gBACE,EAAE,EAAE,YAAY,CAAC,EAAE;gBACnB,IAAI,EAAE,YAAY,CAAC,OAAO;~~aAC3B~~,EACD,KAAK,CACN,CAAC;IACN,CAAC,EACD,CAAC,WAAW,EAAE,KAAK,CAAC,CACrB,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,aAAa,GAAkB;QACnC,KAAK;QACL,WAAW;QACX,IAAI;QACJ,KAAK,EAAE,WAAW;QAClB,QAAQ,EAAE,QAAQ;YAChB,CAAC,CAAC;gBACE,KAAK,EAAE;oBACL,EAAE,EAAE,QAAQ,CAAC,EAAE;oBACf,IAAI,EAAE,QAAQ,CAAC,OAAO;iBACvB;aACF;YACH,CAAC,CAAC,SAAS;QACb,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC7C,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK;gBAAE,cAAc,EAAE,CAAC;YACrC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC;QAChC,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,UAAU;YACvB,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC;SACzB;QACD,QAAQ;KACT,CAAC;IACF,OAAO,KAAC,QAAQ,OAAK,aAAa,GAAI,CAAC;AACzC,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { ChangeEvent, FunctionComponent, useMemo, useState, useCallback } from 'react';\n\nimport {\n ComboBox,\n ComboBoxProps,\n createStringMatcher,\n MenuItemProps,\n NoChildrenProp,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { ItemType } from '@pega/cosmos-react-rte/lib/components/DynamicContentEditor/DynamicContentEditor.types';\n\nexport interface FieldSelectorProps extends NoChildrenProp {\n /** Array of values for the combobox options. /\n itemList: ItemType[];\n /* Return selected item /\n updateSelection: (selectedItem: ItemType, label: ComboBoxProps['label']) => void;\n /* Default selected item */\n defaultSelection?: ItemType;\n}\n\nconst FieldSelector: FunctionComponent<\n FieldSelectorProps & Pick<ComboBoxProps, 'label' \| 'mode' \| 'required' \| 'placeholder'>\n> = ({\n itemList,\n label,\n mode = 'single-select',\n required = false,\n updateSelection,\n placeholder,\n defaultSelection\n}) => {\n const t = useI18n();\n\n const [filterValue, setFilterValue] = useState('');\n const [items, setItems] = useState(() => {\n return itemList.map(item => {\n return {\n id: item.id,\n primary: item.text,\n selected: defaultSelection ? defaultSelection.id === item.id : false\n };\n });\n });\n\n const filterRegex = createStringMatcher(filterValue, 'contains');\n const itemsToRender = useMemo(() => {\n return filterRegex ? items.filter(({ primary }) => filterRegex.test(primary)) : items;\n }, [filterValue, items]);\n\n const clearSelection = () => {\n setItems(curr => {\n return curr?.map(item => {\n return {\n ...item,\n selected: false\n };\n });\n });\n };\n\n const selectItem = useCallback(\n (id: MenuItemProps['id']) => {\n setFilterValue('');\n setItems(curr =>\n curr?.map(item => {\n if (item.id === id) {\n return {\n ...item,\n selected: true\n };\n }\n return { ...item, selected: false };\n })\n );\n const selectedItem = items?.find(item => item.id === id);\n if (selectedItem?.id)\n updateSelection(\n {\n id: selectedItem.id,\n text: selectedItem.primary\n },\n label\n );\n },\n [filterValue, items]\n );\n\n const selected = useMemo(() => {\n return items?.find(item => item.selected);\n }, [items]);\n\n const comboBoxProps: ComboBoxProps = {\n label,\n placeholder,\n mode,\n value: filterValue,\n selected: selected\n ? {\n items: {\n id: selected.id,\n text: selected.primary\n }\n }\n : undefined,\n onChange: (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.value) clearSelection();\n setFilterValue(e.target.value);\n },\n onBlur: () => setFilterValue(''),\n menu: {\n items: itemsToRender,\n accent: filterRegex,\n onItemClick: selectItem,\n emptyText: t('no_items')\n },\n required\n };\n return <ComboBox {...comboBoxProps} />;\n};\n\nexport default FieldSelector;\n"]}
1	+ {"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/FieldSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,QAAQ,EAER,mBAAmB,EAGnB,OAAO,EACR,MAAM,yBAAyB,CAAC;AAYjC,MAAM,aAAa,GAEf,CAAC,EACH,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,eAAe,EACtB,QAAQ,GAAG,KAAK,EAChB,eAAe,EACf,WAAW,EACX,gBAAgB,EACjB,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACzB,OAAO;gBACL,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,OAAO,EAAE,IAAI,CAAC,IAAI;gBAClB,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,EAAE;gBAC/B,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;aACrE,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,mBAAmB,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACxF,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE;YACd,OAAO,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE;gBACtB,OAAO;oBACL,GAAG,IAAI;oBACP,QAAQ,EAAE,KAAK;iBAChB,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,EAAuB,EAAE,EAAE;QAC1B,cAAc,CAAC,EAAE,CAAC,CAAC;QACnB,QAAQ,CAAC,IAAI,CAAC,EAAE,CACd,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE;YACf,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE;gBAClB,OAAO;oBACL,GAAG,IAAI;oBACP,QAAQ,EAAE,IAAI;iBACf,CAAC;aACH;YACD,OAAO,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;QACtC,CAAC,CAAC,CACH,CAAC;QACF,MAAM,YAAY,GAAG,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACzD,IAAI,YAAY,EAAE,EAAE;YAClB,eAAe,CACb;gBACE,EAAE,EAAE,YAAY,CAAC,EAAE;gBACnB,IAAI,EAAE,YAAY,CAAC,OAAO;gBAC1B,SAAS,EAAE,YAAY,CAAC,SAAS;aAClC,EACD,KAAK,CACN,CAAC;IACN,CAAC,EACD,CAAC,WAAW,EAAE,KAAK,CAAC,CACrB,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,aAAa,GAAkB;QACnC,KAAK;QACL,WAAW;QACX,IAAI;QACJ,KAAK,EAAE,WAAW;QAClB,QAAQ,EAAE,QAAQ;YAChB,CAAC,CAAC;gBACE,KAAK,EAAE;oBACL,EAAE,EAAE,QAAQ,CAAC,EAAE;oBACf,IAAI,EAAE,QAAQ,CAAC,OAAO;iBACvB;aACF;YACH,CAAC,CAAC,SAAS;QACb,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC7C,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK;gBAAE,cAAc,EAAE,CAAC;YACrC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC;QAChC,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,UAAU;YACvB,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC;SACzB;QACD,QAAQ;KACT,CAAC;IACF,OAAO,KAAC,QAAQ,OAAK,aAAa,GAAI,CAAC;AACzC,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { ChangeEvent, FunctionComponent, useMemo, useState, useCallback } from 'react';\n\nimport {\n ComboBox,\n ComboBoxProps,\n createStringMatcher,\n MenuItemProps,\n NoChildrenProp,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { ItemType } from '@pega/cosmos-react-rte/lib/components/DynamicContentEditor/DynamicContentEditor.types';\n\nexport interface FieldSelectorProps extends NoChildrenProp {\n /** Array of values for the combobox options. /\n itemList: ItemType[];\n /* Return selected item /\n updateSelection: (selectedItem: ItemType, label: ComboBoxProps['label']) => void;\n /* Default selected item */\n defaultSelection?: ItemType;\n}\n\nconst FieldSelector: FunctionComponent<\n FieldSelectorProps & Pick<ComboBoxProps, 'label' \| 'mode' \| 'required' \| 'placeholder'>\n> = ({\n itemList,\n label,\n mode = 'single-select',\n required = false,\n updateSelection,\n placeholder,\n defaultSelection\n}) => {\n const t = useI18n();\n\n const [filterValue, setFilterValue] = useState('');\n const [items, setItems] = useState(() => {\n return itemList.map(item => {\n return {\n id: item.id,\n primary: item.text,\n namespace: item.namespace ?? '',\n selected: defaultSelection ? defaultSelection.id === item.id : false\n };\n });\n });\n\n const filterRegex = createStringMatcher(filterValue, 'contains');\n const itemsToRender = useMemo(() => {\n return filterRegex ? items.filter(({ primary }) => filterRegex.test(primary)) : items;\n }, [filterValue, items]);\n\n const clearSelection = () => {\n setItems(curr => {\n return curr?.map(item => {\n return {\n ...item,\n selected: false\n };\n });\n });\n };\n\n const selectItem = useCallback(\n (id: MenuItemProps['id']) => {\n setFilterValue('');\n setItems(curr =>\n curr?.map(item => {\n if (item.id === id) {\n return {\n ...item,\n selected: true\n };\n }\n return { ...item, selected: false };\n })\n );\n const selectedItem = items?.find(item => item.id === id);\n if (selectedItem?.id)\n updateSelection(\n {\n id: selectedItem.id,\n text: selectedItem.primary,\n namespace: selectedItem.namespace\n },\n label\n );\n },\n [filterValue, items]\n );\n\n const selected = useMemo(() => {\n return items?.find(item => item.selected);\n }, [items]);\n\n const comboBoxProps: ComboBoxProps = {\n label,\n placeholder,\n mode,\n value: filterValue,\n selected: selected\n ? {\n items: {\n id: selected.id,\n text: selected.primary\n }\n }\n : undefined,\n onChange: (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.value) clearSelection();\n setFilterValue(e.target.value);\n },\n onBlur: () => setFilterValue(''),\n menu: {\n items: itemsToRender,\n accent: filterRegex,\n onItemClick: selectItem,\n emptyText: t('no_items')\n },\n required\n };\n return <ComboBox {...comboBoxProps} />;\n};\n\nexport default FieldSelector;\n"]}

package/lib/social/Email/Email.stories.js CHANGED Viewed

@@ -90,6 +90,7 @@ export const Email = (args) => {
 Email.args = {
     enableEntityHighlighting: false,
     enableContextMenu: false,
+    // eslint-disable-next-line demo-patterns/literal-args
     forwardedContent,
     showEmailBanner: false,
     showDraft: false