@pega/cosmos-react-cs 10.0.0-build.5.2 → 10.0.0-build.5.20

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.
@@ -17,21 +17,37 @@ export declare const StyledMultiTaskDialog: import("styled-components/dist/types
17
17
  onDismiss?: () => void;
18
18
  onCancel: import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").FormAction;
19
19
  onSubmit: import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").FormAction;
20
+ } & {
21
+ compact: true;
22
+ } & {
23
+ 'aria-label': string;
24
+ heading?: never;
25
+ additionalInfo?: never;
26
+ } & Omit<import("@pega/cosmos-react-core").Attributes<"div">, "compact" | "aria-label" | "onSubmit" | "onCancel" | "heading" | keyof import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").BaseDialogProps | "onDismiss" | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
27
+ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
28
+ }) | (Omit<Omit<import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").BaseDialogProps & {
29
+ onDismiss?: () => void;
30
+ onCancel: import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").FormAction;
31
+ onSubmit: import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").FormAction;
32
+ } & {
33
+ compact?: false | undefined;
20
34
  } & {
21
35
  heading: string;
22
36
  additionalInfo?: import("@pega/cosmos-react-core").AdditionalInfoProps;
23
37
  'aria-label'?: never;
24
- } & Omit<import("@pega/cosmos-react-core").Attributes<"div">, "aria-label" | "onSubmit" | "onCancel" | "heading" | keyof import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").BaseDialogProps | "onDismiss" | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
38
+ } & Omit<import("@pega/cosmos-react-core").Attributes<"div">, "compact" | "aria-label" | "onSubmit" | "onCancel" | "heading" | keyof import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").BaseDialogProps | "onDismiss" | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
25
39
  ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
26
40
  }) | (Omit<Omit<import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").BaseDialogProps & {
27
41
  onDismiss?: () => void;
28
42
  onCancel: import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").FormAction;
29
43
  onSubmit: import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").FormAction;
30
44
  } & {
31
- heading?: never;
45
+ compact?: false | undefined;
46
+ } & {
32
47
  'aria-label': string;
48
+ heading?: never;
33
49
  additionalInfo?: never;
34
- } & Omit<import("@pega/cosmos-react-core").Attributes<"div">, "aria-label" | "onSubmit" | "onCancel" | "heading" | keyof import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").BaseDialogProps | "onDismiss" | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
50
+ } & Omit<import("@pega/cosmos-react-core").Attributes<"div">, "compact" | "aria-label" | "onSubmit" | "onCancel" | "heading" | keyof import("@pega/cosmos-react-core/lib/components/Dialog/Dialog.types").BaseDialogProps | "onDismiss" | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
35
51
  ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
36
52
  }), import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<PropsWithoutRef<FormDialogProps> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
37
53
  declare const TaskPicker: ForwardRefForwardPropsComponent<TaskPickerProps>;
@@ -1 +1 @@
1
- {"version":3,"file":"TaskPicker.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAkBlD,OAAO,KAAK,EACV,+BAA+B,EAC/B,aAAa,EACb,SAAS,EACT,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAMjC,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAG1E,OAAO,KAAK,EAAE,WAAW,EAAqB,MAAM,wBAAwB,CAAC;AAG7E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5E,0CAA0C;IAC1C,KAAK,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC7C,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,2BAA2B;IAC3B,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,sBAAsB,EAAE,OAAO,MAM1C,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;mPAuBhC,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAiH/D,CAAC;AAEH,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"TaskPicker.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAmBlD,OAAO,KAAK,EACV,+BAA+B,EAC/B,aAAa,EACb,SAAS,EACT,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAMjC,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAG1E,OAAO,KAAK,EAAE,WAAW,EAAqB,MAAM,wBAAwB,CAAC;AAG7E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5E,0CAA0C;IAC1C,KAAK,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC7C,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,2BAA2B;IAC3B,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,sBAAsB,EAAE,OAAO,MAM1C,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mPAuBhC,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAkH/D,CAAC;AAEH,eAAe,UAAU,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
3
3
  import styled, { css } from 'styled-components';
4
- import { useI18n, useConsolidatedRef, useElement, useUID, useOuterEvent, Flex, Button, Icon, Text, useFocusTrap, useEvent, FormDialog, defaultThemeProp } from '@pega/cosmos-react-core';
4
+ import { useI18n, useConsolidatedRef, useElement, useUID, useOuterEvent, Flex, Button, Icon, Text, useFocusTrap, useEvent, FormDialog, defaultThemeProp, getResolvedTarget } from '@pega/cosmos-react-core';
5
5
  import { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';
6
6
  import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
7
7
  import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
@@ -43,10 +43,11 @@ const TaskPicker = forwardRef(function TaskPicker({ items, onAdd, onCancel, targ
43
43
  const pickerRef = useConsolidatedRef(ref, setPickerEl);
44
44
  const initialRender = useRef(true);
45
45
  const toggleHandleRef = useRef(null);
46
+ const resolvedTarget = getResolvedTarget(target);
46
47
  const onSelectionChange = (selectedItems) => {
47
48
  setSelections(selectedItems);
48
49
  };
49
- useOuterEvent('mousedown', [target, pickerRef], () => {
50
+ useOuterEvent('mousedown', [resolvedTarget, pickerRef], () => {
50
51
  onCancel?.();
51
52
  });
52
53
  const onModeToggle = () => {
@@ -1 +1 @@
1
- {"version":3,"file":"TaskPicker.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useI18n,\n useConsolidatedRef,\n useElement,\n useUID,\n useOuterEvent,\n Flex,\n Button,\n Icon,\n Text,\n useFocusTrap,\n useEvent,\n FormDialog,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport type {\n ForwardRefForwardPropsComponent,\n MenuItemProps,\n BaseProps,\n FormDialogProps\n} from '@pega/cosmos-react-core';\nimport {\n StyledChildrenWrap,\n StyledDialogContent,\n StyledDialogHeader\n} from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\n\nimport type { PickerProps, SwitchHandleValue } from '../Picker/Picker.types';\nimport Picker from '../Picker';\n\nexport interface TaskPickerProps extends BaseProps, Pick<PickerProps, 'items'> {\n /** Callback when add button is clicked */\n onAdd: (selections: MenuItemProps[]) => void;\n /** Callback when cancel button is clicked */\n onCancel: () => void;\n /** Target for the modal */\n target: FormDialogProps['target'];\n /** Picker reference . */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledSingleTaskDialog: typeof Dialog = styled(Dialog)(() => {\n return css`\n ${StyledMenu} {\n overflow: auto;\n }\n `;\n});\n\nexport const StyledMultiTaskDialog = styled(FormDialog)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n ${StyledDialogContent},\n ${StyledChildrenWrap} {\n display: flex;\n }\n\n ${StyledDialogHeader} {\n padding-inline: ${spacing};\n }\n\n ${StyledDialogContent} {\n padding-inline: 0;\n }\n\n ${StyledMenu} {\n overflow: auto;\n }\n `;\n});\n\nStyledMultiTaskDialog.defaultProps = defaultThemeProp;\n\nconst TaskPicker: ForwardRefForwardPropsComponent<TaskPickerProps> = forwardRef(function TaskPicker(\n { items, onAdd, onCancel, target, ...restProps }: PropsWithoutRef<TaskPickerProps>,\n ref: TaskPickerProps['ref']\n) {\n const t = useI18n();\n const headingId = useUID();\n const [selections, setSelections] = useState<MenuItemProps[]>([]);\n const [enableMultiSelect, setEnableMultiSelect] = useState(false);\n const [pickerEl, setPickerEl] = useElement<HTMLDivElement>();\n const pickerRef = useConsolidatedRef(ref, setPickerEl);\n const initialRender = useRef(true);\n const toggleHandleRef = useRef<SwitchHandleValue>(null);\n\n const onSelectionChange = (selectedItems: MenuItemProps[]) => {\n setSelections(selectedItems);\n };\n\n useOuterEvent('mousedown', [target, pickerRef], () => {\n onCancel?.();\n });\n\n const onModeToggle = () => {\n setSelections([]);\n setEnableMultiSelect(curr => !curr);\n };\n\n useEffect(() => {\n if (!enableMultiSelect && selections?.length) {\n onAdd(selections);\n }\n }, [selections, enableMultiSelect]);\n\n useEffect(() => {\n if (initialRender.current) {\n initialRender.current = false;\n } else {\n toggleHandleRef.current?.focusToggleSwitch();\n }\n }, [enableMultiSelect]);\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === 'Escape') {\n onCancel?.();\n }\n },\n [onCancel]\n );\n\n useFocusTrap(pickerRef, false, [onCancel, pickerEl, enableMultiSelect]);\n\n useEvent('keydown', onKeydown, { dependencies: [pickerEl, enableMultiSelect] });\n\n const pickerContent = (\n <Picker\n {...restProps}\n contextualLabel={t('task_manager_cases').toLowerCase()}\n items={items}\n multiSelect={enableMultiSelect}\n onModeToggle={onModeToggle}\n reorderSelections\n selections={selections}\n onSelectionChange={onSelectionChange}\n handle={toggleHandleRef}\n />\n );\n\n return enableMultiSelect ? (\n <StyledMultiTaskDialog\n {...restProps}\n target={target}\n heading={t('add_cases')}\n ref={pickerRef}\n onCancel={() => {\n onCancel();\n }}\n onSubmit={{\n text: t('add'),\n disabled: !selections.length,\n handler: () => {\n onAdd(selections);\n }\n }}\n >\n {pickerContent}\n </StyledMultiTaskDialog>\n ) : (\n <Flex\n {...restProps}\n container={{ direction: 'column', gap: 1 }}\n as={StyledSingleTaskDialog}\n target={target}\n labelledbyId={headingId}\n ref={pickerRef}\n >\n <Flex container={{ justify: 'between', alignItems: 'center', pad: 1 }}>\n <Text id={headingId} variant='h2'>\n {t('task_manager_add_case')}\n </Text>\n <Button\n icon\n variant='simple'\n onClick={onCancel}\n label={t('close')}\n aria-label={t('close_noun', [t('task_manager_add_case')])}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n {pickerContent}\n </Flex>\n );\n});\n\nexport default TaskPicker;\n"]}
1
+ {"version":3,"file":"TaskPicker.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useI18n,\n useConsolidatedRef,\n useElement,\n useUID,\n useOuterEvent,\n Flex,\n Button,\n Icon,\n Text,\n useFocusTrap,\n useEvent,\n FormDialog,\n defaultThemeProp,\n getResolvedTarget\n} from '@pega/cosmos-react-core';\nimport type {\n ForwardRefForwardPropsComponent,\n MenuItemProps,\n BaseProps,\n FormDialogProps\n} from '@pega/cosmos-react-core';\nimport {\n StyledChildrenWrap,\n StyledDialogContent,\n StyledDialogHeader\n} from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\n\nimport type { PickerProps, SwitchHandleValue } from '../Picker/Picker.types';\nimport Picker from '../Picker';\n\nexport interface TaskPickerProps extends BaseProps, Pick<PickerProps, 'items'> {\n /** Callback when add button is clicked */\n onAdd: (selections: MenuItemProps[]) => void;\n /** Callback when cancel button is clicked */\n onCancel: () => void;\n /** Target for the modal */\n target: FormDialogProps['target'];\n /** Picker reference . */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledSingleTaskDialog: typeof Dialog = styled(Dialog)(() => {\n return css`\n ${StyledMenu} {\n overflow: auto;\n }\n `;\n});\n\nexport const StyledMultiTaskDialog = styled(FormDialog)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n ${StyledDialogContent},\n ${StyledChildrenWrap} {\n display: flex;\n }\n\n ${StyledDialogHeader} {\n padding-inline: ${spacing};\n }\n\n ${StyledDialogContent} {\n padding-inline: 0;\n }\n\n ${StyledMenu} {\n overflow: auto;\n }\n `;\n});\n\nStyledMultiTaskDialog.defaultProps = defaultThemeProp;\n\nconst TaskPicker: ForwardRefForwardPropsComponent<TaskPickerProps> = forwardRef(function TaskPicker(\n { items, onAdd, onCancel, target, ...restProps }: PropsWithoutRef<TaskPickerProps>,\n ref: TaskPickerProps['ref']\n) {\n const t = useI18n();\n const headingId = useUID();\n const [selections, setSelections] = useState<MenuItemProps[]>([]);\n const [enableMultiSelect, setEnableMultiSelect] = useState(false);\n const [pickerEl, setPickerEl] = useElement<HTMLDivElement>();\n const pickerRef = useConsolidatedRef(ref, setPickerEl);\n const initialRender = useRef(true);\n const toggleHandleRef = useRef<SwitchHandleValue>(null);\n const resolvedTarget = getResolvedTarget(target);\n\n const onSelectionChange = (selectedItems: MenuItemProps[]) => {\n setSelections(selectedItems);\n };\n\n useOuterEvent('mousedown', [resolvedTarget, pickerRef], () => {\n onCancel?.();\n });\n\n const onModeToggle = () => {\n setSelections([]);\n setEnableMultiSelect(curr => !curr);\n };\n\n useEffect(() => {\n if (!enableMultiSelect && selections?.length) {\n onAdd(selections);\n }\n }, [selections, enableMultiSelect]);\n\n useEffect(() => {\n if (initialRender.current) {\n initialRender.current = false;\n } else {\n toggleHandleRef.current?.focusToggleSwitch();\n }\n }, [enableMultiSelect]);\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === 'Escape') {\n onCancel?.();\n }\n },\n [onCancel]\n );\n\n useFocusTrap(pickerRef, false, [onCancel, pickerEl, enableMultiSelect]);\n\n useEvent('keydown', onKeydown, { dependencies: [pickerEl, enableMultiSelect] });\n\n const pickerContent = (\n <Picker\n {...restProps}\n contextualLabel={t('task_manager_cases').toLowerCase()}\n items={items}\n multiSelect={enableMultiSelect}\n onModeToggle={onModeToggle}\n reorderSelections\n selections={selections}\n onSelectionChange={onSelectionChange}\n handle={toggleHandleRef}\n />\n );\n\n return enableMultiSelect ? (\n <StyledMultiTaskDialog\n {...restProps}\n target={target}\n heading={t('add_cases')}\n ref={pickerRef}\n onCancel={() => {\n onCancel();\n }}\n onSubmit={{\n text: t('add'),\n disabled: !selections.length,\n handler: () => {\n onAdd(selections);\n }\n }}\n >\n {pickerContent}\n </StyledMultiTaskDialog>\n ) : (\n <Flex\n {...restProps}\n container={{ direction: 'column', gap: 1 }}\n as={StyledSingleTaskDialog}\n target={target}\n labelledbyId={headingId}\n ref={pickerRef}\n >\n <Flex container={{ justify: 'between', alignItems: 'center', pad: 1 }}>\n <Text id={headingId} variant='h2'>\n {t('task_manager_add_case')}\n </Text>\n <Button\n icon\n variant='simple'\n onClick={onCancel}\n label={t('close')}\n aria-label={t('close_noun', [t('task_manager_add_case')])}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n {pickerContent}\n </Flex>\n );\n});\n\nexport default TaskPicker;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-cs",
3
- "version": "10.0.0-build.5.2",
3
+ "version": "10.0.0-build.5.20",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "author": "Pegasystems",
6
6
  "sideEffects": false,
@@ -14,8 +14,8 @@
14
14
  "build": "tsc -b tsconfig.build.json"
15
15
  },
16
16
  "dependencies": {
17
- "@pega/cosmos-react-core": "10.0.0-build.5.2",
18
- "@pega/cosmos-react-dnd": "10.0.0-build.5.2",
17
+ "@pega/cosmos-react-core": "10.0.0-build.5.20",
18
+ "@pega/cosmos-react-dnd": "10.0.0-build.5.20",
19
19
  "@types/react": "^17.0.62 || ^18.3.3",
20
20
  "@types/react-dom": "^17.0.20 || ^18.3.0",
21
21
  "polished": "^4.1.0",