@pega/cosmos-react-core 2.0.0-dev.18.0 → 2.0.0-dev.20.0

package/lib/components/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  ChangeEvent,\n  useCallback,\n  useState,\n  ChangeEventHandler,\n  useEffect\n} from 'react';\n\nimport { ForwardProps } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea from './TextArea.styles';\n\nexport interface TextAreaProps extends FormControlProps {\n  /** Minimum length of characters that can be input. */\n  minLength?: number;\n  /** Maximum length of characters that can be input. */\n  maxLength?: number;\n  /**\n   * Allows the user to resize the Text Area.\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Enables the Text Area to resize itself automatically.\n   * @default false\n   */\n  autoResize?: boolean;\n  /**\n   * Display a live character count in relation to the maxLength.\n   * @default false\n   */\n  displayCharCount?: boolean;\n  /**\n   * Allow or disallow a value beyond the maxLength.\n   * @default true\n   */\n  hardStop?: boolean;\n  onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TextAreaProps>, ref: Ref<HTMLTextAreaElement>) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      value,\n      defaultValue,\n      required = false,\n      disabled = false,\n      label,\n      labelHidden,\n      info,\n      status,\n      resizable = false,\n      autoResize = false,\n      maxLength,\n      displayCharCount = false,\n      hardStop = true,\n      onChange: onChangeProp,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n    const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n    const [charCount, setCharCount] = useState(0);\n\n    const controlProp: {\n      value?: string;\n      defaultValue?: string;\n    } = {};\n\n    useEffect(() => {\n      if (hasProp(props, 'value')) {\n        setCharCount(props.value ? props.value.length : 0);\n      } else if (hasProp(props, 'defaultValue')) {\n        setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n      }\n    }, [props]);\n\n    // Conditionally render component as controlled/uncontrolled\n    if (hasProp(props, 'value')) {\n      controlProp.value = value ?? '';\n    } else if (hasProp(props, 'defaultValue')) {\n      controlProp.defaultValue = defaultValue ?? '';\n    }\n\n    const onChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {\n          onChangeProp?.(e);\n          setCharCount(e.target.value.length);\n          resizeTextArea();\n        }\n      },\n      [onChangeProp, resizeTextArea, hardStop, maxLength]\n    );\n\n    const Comp = (\n      <StyledFormControl\n        {...{\n          ref: autoResize ? consolidatedRef : ref,\n          id,\n          required,\n          disabled,\n          status,\n          resizable,\n          maxLength: hardStop ? maxLength : undefined,\n          ...controlProp,\n          ...restProps,\n          onChange,\n          as: StyledTextArea\n        }}\n      />\n    );\n\n    return label || displayCharCount ? (\n      <FormField\n        {...{\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          charLimitDisplay:\n            displayCharCount && typeof maxLength === 'number' ? (\n              <Text\n                variant='secondary'\n                aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n              >\n                {maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount}\n              </Text>\n            ) : undefined,\n          required,\n          disabled\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default TextArea;\n"]}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  ChangeEvent,\n  useCallback,\n  useState,\n  ChangeEventHandler,\n  useEffect\n} from 'react';\n\nimport { ForwardProps } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea from './TextArea.styles';\n\nexport interface TextAreaProps extends FormControlProps {\n  /** Minimum length of characters that can be input. */\n  minLength?: number;\n  /** Maximum length of characters that can be input. */\n  maxLength?: number;\n  /**\n   * Allows the user to resize the Text Area.\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Enables the Text Area to resize itself automatically.\n   * @default false\n   */\n  autoResize?: boolean;\n  /**\n   * Display a live character count in relation to the maxLength.\n   * @default false\n   */\n  displayCharCount?: boolean;\n  /**\n   * Allow or disallow a value beyond the maxLength.\n   * @default true\n   */\n  hardStop?: boolean;\n  onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TextAreaProps>, ref: Ref<HTMLTextAreaElement>) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      value,\n      defaultValue,\n      required = false,\n      disabled = false,\n      label,\n      labelHidden,\n      info,\n      status,\n      resizable = false,\n      autoResize = false,\n      maxLength,\n      displayCharCount = false,\n      hardStop = true,\n      onChange: onChangeProp,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n    const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n    const [charCount, setCharCount] = useState(0);\n\n    const controlProp: {\n      value?: string;\n      defaultValue?: string;\n    } = {};\n\n    useEffect(() => {\n      if (hasProp(props, 'value')) {\n        setCharCount(props.value ? props.value.length : 0);\n      } else if (hasProp(props, 'defaultValue')) {\n        setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n      }\n    }, [props]);\n\n    // Conditionally render component as controlled/uncontrolled\n    if (hasProp(props, 'value')) {\n      controlProp.value = value ?? '';\n    } else if (hasProp(props, 'defaultValue')) {\n      controlProp.defaultValue = defaultValue ?? '';\n    }\n\n    const onChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {\n          onChangeProp?.(e);\n          setCharCount(e.target.value.length);\n          resizeTextArea();\n        }\n      },\n      [onChangeProp, resizeTextArea, hardStop, maxLength]\n    );\n\n    const Comp = (\n      <StyledFormControl\n        {...{\n          ref: autoResize ? consolidatedRef : ref,\n          id,\n          required,\n          disabled,\n          status,\n          resizable,\n          maxLength: hardStop ? maxLength : undefined,\n          ...controlProp,\n          ...restProps,\n          onChange,\n          as: StyledTextArea\n        }}\n      />\n    );\n\n    return label || displayCharCount ? (\n      <FormField\n        {...{\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          charLimitDisplay:\n            displayCharCount && typeof maxLength === 'number' ? (\n              <Text\n                variant='secondary'\n                aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n              >\n                {maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount}\n              </Text>\n            ) : undefined,\n          required,\n          disabled\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default TextArea;\n"]}

package/lib/components/Toaster/Toaster.js

@@ -110,11 +110,11 @@ const Toast = forwardRef(({ dispatch, topLevelDismiss, dismissAfter, ...message
             clearTimeout(timeoutRef.current);
         };
     }, []);
-    return (_jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 0.25 }, as: StyledToast, ref: ref, style: {
+    return (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.25 }, as: StyledToast, ref: ref, style: {
             '--translateY': `${-translateY}px`,
             '--opacity': dismissed ? '0' : '1',
             '--scale': dismissed ? '0' : '1'
-        }, onTransitionEnd: onTransitionEnd }, { children: [_jsx(Flex, Object.assign({ item: { grow: 1 }, as: StyledToastContent }, { children: content }), void 0), _jsx(Button, Object.assign({ as: StyledToastButton, variant: 'simple', onClick: dismiss, icon: true, "aria-label": t('dismiss') }, { children: _jsx(Icon, { name: 'times' }, void 0) }), void 0)] }), void 0));
+        }, onTransitionEnd: onTransitionEnd, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledToastContent, children: content }, void 0), _jsx(Button, { as: StyledToastButton, variant: 'simple', onClick: dismiss, icon: true, "aria-label": t('dismiss'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0));
 });
 const Toaster = ({ children, dismissAfter = Infinity, onDismiss, context = ToasterContext }) => {
     const { portalTarget } = useConfiguration();
@@ -144,9 +144,9 @@ const Toaster = ({ children, dismissAfter = Infinity, onDismiss, context = Toast
     // Don't create additional ToasterContext.Providers.
     const priorCtx = useContext(context);
     if (priorCtx[initializedKey]) {
-        return _jsx(ToasterContext.Provider, Object.assign({ value: priorCtx }, { children: children }), void 0);
+        return _jsx(ToasterContext.Provider, { value: priorCtx, children: children }, void 0);
     }
-    return (_jsxs(_Fragment, { children: [_jsx(ToasterContext.Provider, Object.assign({ value: providerValue }, { children: children }), void 0), !!messages.length &&
+    return (_jsxs(_Fragment, { children: [_jsx(ToasterContext.Provider, { value: providerValue, children: children }, void 0), !!messages.length &&
                 portalTarget &&
                 createPortal(_jsx(StyledToaster, { children: messages.map((message, i) => {
                         return (_createElement(Toast, { ...message, translateY: yOffsets[i] ?? 0, topLevelDismiss: onDismiss, dismissAfter: message.dismissAfter ?? dismissAfter, key: message.id, dispatch: dispatch, ref: el => {

package/lib/components/Toaster/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":";;AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,UAAU,EACV,OAAO,EACP,eAAe,EAMf,MAAM,EACN,QAAQ,EACR,UAAU,EAGV,SAAS,EAEV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,6CAA6C,CAAC,CAAC;AAOxF,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAsB;IAC/D,IAAI,EAAE,GAAG,EAAE,GAAE,CAAC;IACd,CAAC,cAAc,CAAC,EAAE,KAAK;CACxB,CAAC,CAAC;AA+CH,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;;;;;;oBAWA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;GAEpD,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;;;;;iBAMK,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC;gCACR,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GACxD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3C,OAAO,GAAG,CAAA;;;;;oBAKQ,KAAK,CAAC,IAAI,CAAC,OAAO;kBACpB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC;aAC1C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;0BACV,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;2BAI1B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;kCACnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;GAC/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;aAEnB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;;;;;CAKtD,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,SAAS,OAAO,CAAC,OAAqB,EAAE,MAA0B;IAChE,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,MAAM;YACT,OAAO;gBACL,GAAG,OAAO;gBACV;oBACE,GAAG,MAAM,CAAC,OAAO;iBAClB;aACF,CAAC;QAEJ,KAAK,SAAS;YACZ,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,OAAO,CAAC,CAAC;QAEtD;YACE,OAAO,OAAO,CAAC;KAClB;AACH,CAAC;AAED,MAAM,KAAK,GAAkC,UAAU,CACrD,CACE,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,OAAO,EAA+B,EACpF,GAAsB,EACtB,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IACxC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC/B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,eAAe,GAAG,CAAC,CAAkC,EAAE,EAAE;QAC7D,IAAI,SAAS,IAAI,CAAC,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;YAC7E,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;SACpD;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,SAAS;YAAE,OAAO;QACtB,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,eAAe,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;YACjC,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;SACxD;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACnC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,IAAI,kBACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,EAC9C,EAAE,EAAE,WAAW,EACf,GAAG,EAAE,GAAG,EACR,KAAK,EACH;YACE,cAAc,EAAE,GAAG,CAAC,UAAU,IAAI;YAClC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;YAClC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;SAChB,EAEpB,eAAe,EAAE,eAAe,iBAEhC,KAAC,IAAI,kBAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,kBAAkB,gBAC5C,OAAO,YACH,EACP,KAAC,MAAM,kBACL,EAAE,EAAE,iBAAiB,EACrB,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,sBACQ,CAAC,CAAC,SAAS,CAAC,gBAExB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,YACd,aACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,OAAO,GAAoC,CAAC,EAChD,QAAQ,EACR,YAAY,GAAG,QAAQ,EACvB,SAAS,EACT,OAAO,GAAG,cAAc,EACX,EAAE,EAAE;IACjB,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC5C,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,MAAM,CAEzB,EAAE,CAAC,CAAC;IAEP,iFAAiF;IACjF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;QAEnF,WAAW,CACT,OAAO;aACJ,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;aAC7E,OAAO,EAAE,CACb,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IAEtB,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,CAAC,QAAsB;YACzB,MAAM,OAAO,GAAe;gBAC1B,GAAG,QAAQ;gBACX,EAAE,EAAE,QAAQ,CAAC,EAAE,IAAI,SAAS,EAAE;aAC/B,CAAC;YAEF,QAAQ,CAAC;gBACP,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,OAAO;aACjB,CAAC,CAAC;QACL,CAAC;QACD,CAAC,cAAc,CAAC,EAAE,IAAI;KACvB,CAAC,EACF,CAAC,SAAS,EAAE,YAAY,CAAC,CAC1B,CAAC;IAEF,oDAAoD;IACpD,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IACrC,IAAI,QAAQ,CAAC,cAAc,CAAC,EAAE;QAC5B,OAAO,KAAC,cAAc,CAAC,QAAQ,kBAAC,KAAK,EAAE,QAAQ,gBAAG,QAAQ,YAA2B,CAAC;KACvF;IAED,OAAO,CACL,8BACE,KAAC,cAAc,CAAC,QAAQ,kBAAC,KAAK,EAAE,aAAa,gBAAG,QAAQ,YAA2B,EAClF,CAAC,CAAC,QAAQ,CAAC,MAAM;gBAChB,YAAY;gBACZ,YAAY,CACV,KAAC,aAAa,cACX,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;wBAC3B,OAAO,CACL,eAAC,KAAK,OACA,OAAO,EACX,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAC5B,eAAe,EAAE,SAAS,EAC1B,YAAY,EAAE,OAAO,CAAC,YAAY,IAAI,YAAY,EAClD,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,EAAE,CAAC,EAAE;gCACR,IAAI,EAAE,EAAE;oCACN,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC;iCACrD;qCAAM;oCACL,OAAO,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;iCAC1C;4BACH,CAAC,GACD,CACH,CAAC;oBACJ,CAAC,CAAC,WACY,EAChB,YAAY,CACb,YACF,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import {\n  createContext,\n  useContext,\n  useReducer,\n  useMemo,\n  useLayoutEffect,\n  FunctionComponent,\n  ReactNode,\n  CSSProperties,\n  TransitionEvent,\n  Context,\n  useRef,\n  useState,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  Dispatch\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { createUID } from '../../utils';\nimport { useConfiguration, useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\n\nregisterIcon(timesIcon);\n\nexport const initializedKey = Symbol.for('@pega/cosmos-react-core.toaster.initialized');\n\nexport interface ToasterContextValue {\n  push: (message: ToastMessage) => void;\n  [initializedKey]: boolean;\n}\n\nexport const ToasterContext = createContext<ToasterContextValue>({\n  push: () => {},\n  [initializedKey]: false\n});\n\nexport interface ToastMessage {\n  /** String to identify the specific message. Used as onDismiss callback arg. */\n  id?: string;\n  /** A short message to provide feedback based upon a user action. */\n  content: string;\n  /**\n   * Time in milliseconds to automatically dismiss toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: number;\n  /** Called when user or timer dismisses toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ({ id, timeout }: { id: ToastState['id']; timeout: boolean }) => void;\n}\n\nexport interface ToasterProps {\n  /** The element(s) responsible for handling the Toaster state.  */\n  children: ReactNode;\n  /**\n   * Time in milliseconds to automatically dismiss Toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: ToastMessage['dismissAfter'];\n  /** Called when user or timer dismisses Toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ToastMessage['onDismiss'];\n  /** Context to read previous values from. */\n  context?: Context<ToasterContextValue>;\n}\n\ninterface ToastState extends ToastMessage {\n  id: NonNullable<ToastMessage['id']>;\n}\n\ntype ToastReducerAction =\n  | { type: 'push'; payload: ToastState }\n  | { type: 'unmount'; payload: ToastState['id'] };\n\ninterface ToastProps extends ToastState {\n  topLevelDismiss: ToasterProps['onDismiss'];\n  translateY: number;\n  dispatch: Dispatch<ToastReducerAction>;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst StyledToastButton = styled.button(\n  ({ theme }) => css`\n    border: none;\n    color: inherit;\n    padding: 0;\n    font-size: 1rem;\n\n    &:enabled:hover {\n      background: #ffffff19;\n    }\n\n    &:enabled:focus {\n      box-shadow: ${theme.base.shadow['focus-inverted']};\n    }\n  `\n);\n\nStyledToastButton.defaultProps = defaultThemeProp;\n\nconst StyledToastContent = styled.div(({ theme }) => {\n  return css`\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: ${theme.base['font-size']};\n    margin-inline-start: calc(${theme.base['border-radius']} / 2);\n  `;\n});\n\nStyledToastContent.defaultProps = defaultThemeProp;\n\nconst StyledToast = styled.div(({ theme }) => {\n  return css`\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    padding: calc(${theme.base.spacing} / 2);\n    background: ${theme.base.colors.slate['extra-dark']};\n    color: ${theme.base.colors.white};\n    border-radius: calc(${theme.base['border-radius']} / 2);\n    opacity: var(--opacity);\n    transform: translateY(var(--translateY)) scale(var(--scale));\n    transition-property: transform, opacity;\n    transition-duration: ${theme.base.animation.speed};\n    transition-timing-function: ${theme.base.animation.timing.ease};\n  `;\n});\n\nStyledToast.defaultProps = defaultThemeProp;\n\nconst StyledToaster = styled.div`\n  position: fixed;\n  z-index: ${({ theme }) => theme.base['z-index'].toast};\n  width: min(40ch, calc(100% - 1rem));\n  inset-inline-start: 50%;\n  transform: translateX(-50%);\n  top: 100%;\n`;\n\nStyledToaster.defaultProps = defaultThemeProp;\n\nfunction reducer(current: ToastState[], action: ToastReducerAction) {\n  switch (action.type) {\n    case 'push':\n      return [\n        ...current,\n        {\n          ...action.payload\n        }\n      ];\n\n    case 'unmount':\n      return current.filter(m => m.id !== action.payload);\n\n    default:\n      return current;\n  }\n}\n\nconst Toast: FunctionComponent<ToastProps> = forwardRef(\n  (\n    { dispatch, topLevelDismiss, dismissAfter, ...message }: PropsWithoutRef<ToastProps>,\n    ref: ToastProps['ref']\n  ) => {\n    const { content, translateY } = message;\n    const [dismissed, setDismissed] = useState(false);\n    const timeoutRef = useRef(NaN);\n    const t = useI18n();\n\n    const onTransitionEnd = (e: TransitionEvent<HTMLDivElement>) => {\n      if (dismissed && e.propertyName === 'opacity' && e.target === e.currentTarget) {\n        dispatch({ type: 'unmount', payload: message.id });\n      }\n    };\n\n    const dismiss = () => {\n      clearTimeout(timeoutRef.current);\n      if (dismissed) return;\n      setDismissed(true);\n      topLevelDismiss?.({ id: message.id, timeout: false });\n    };\n\n    useEffect(() => {\n      if (Number.isFinite(dismissAfter)) {\n        timeoutRef.current = setTimeout(dismiss, dismissAfter);\n      }\n\n      return () => {\n        clearTimeout(timeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <Flex\n        container={{ alignItems: 'center', gap: 0.25 }}\n        as={StyledToast}\n        ref={ref}\n        style={\n          {\n            '--translateY': `${-translateY}px`,\n            '--opacity': dismissed ? '0' : '1',\n            '--scale': dismissed ? '0' : '1'\n          } as CSSProperties\n        }\n        onTransitionEnd={onTransitionEnd}\n      >\n        <Flex item={{ grow: 1 }} as={StyledToastContent}>\n          {content}\n        </Flex>\n        <Button\n          as={StyledToastButton}\n          variant='simple'\n          onClick={dismiss}\n          icon\n          aria-label={t('dismiss')}\n        >\n          <Icon name='times' />\n        </Button>\n      </Flex>\n    );\n  }\n);\n\nconst Toaster: FunctionComponent<ToasterProps> = ({\n  children,\n  dismissAfter = Infinity,\n  onDismiss,\n  context = ToasterContext\n}: ToasterProps) => {\n  const { portalTarget } = useConfiguration();\n  const [messages, dispatch] = useReducer(reducer, []);\n  const [yOffsets, setYOffsets] = useState<number[]>([]);\n  const heightHashRef = useRef<{\n    [id: string]: number;\n  }>({});\n\n  // This effect will cause a re-render with a translateY value set for each toast.\n  useLayoutEffect(() => {\n    const heights = [...messages].reverse().map(({ id }) => heightHashRef.current[id]);\n\n    setYOffsets(\n      heights\n        .map((_, i) => heights.slice(0, i + 1).reduce((sum, cur) => sum + cur + 4, 0))\n        .reverse()\n    );\n  }, [messages.length]);\n\n  const providerValue = useMemo(\n    () => ({\n      push(incoming: ToastMessage) {\n        const message: ToastState = {\n          ...incoming,\n          id: incoming.id ?? createUID()\n        };\n\n        dispatch({\n          type: 'push',\n          payload: message\n        });\n      },\n      [initializedKey]: true\n    }),\n    [onDismiss, dismissAfter]\n  );\n\n  // Don't create additional ToasterContext.Providers.\n  const priorCtx = useContext(context);\n  if (priorCtx[initializedKey]) {\n    return <ToasterContext.Provider value={priorCtx}>{children}</ToasterContext.Provider>;\n  }\n\n  return (\n    <>\n      <ToasterContext.Provider value={providerValue}>{children}</ToasterContext.Provider>\n      {!!messages.length &&\n        portalTarget &&\n        createPortal(\n          <StyledToaster>\n            {messages.map((message, i) => {\n              return (\n                <Toast\n                  {...message}\n                  translateY={yOffsets[i] ?? 0}\n                  topLevelDismiss={onDismiss}\n                  dismissAfter={message.dismissAfter ?? dismissAfter}\n                  key={message.id}\n                  dispatch={dispatch}\n                  ref={el => {\n                    if (el) {\n                      heightHashRef.current[message.id] = el.offsetHeight;\n                    } else {\n                      delete heightHashRef.current[message.id];\n                    }\n                  }}\n                />\n              );\n            })}\n          </StyledToaster>,\n          portalTarget\n        )}\n    </>\n  );\n};\n\nexport default Toaster;\n"]}
+{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":";;AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,UAAU,EACV,OAAO,EACP,eAAe,EAMf,MAAM,EACN,QAAQ,EACR,UAAU,EAGV,SAAS,EAEV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,6CAA6C,CAAC,CAAC;AAOxF,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAsB;IAC/D,IAAI,EAAE,GAAG,EAAE,GAAE,CAAC;IACd,CAAC,cAAc,CAAC,EAAE,KAAK;CACxB,CAAC,CAAC;AA+CH,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;;;;;;oBAWA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;GAEpD,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;;;;;iBAMK,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC;gCACR,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GACxD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3C,OAAO,GAAG,CAAA;;;;;oBAKQ,KAAK,CAAC,IAAI,CAAC,OAAO;kBACpB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC;aAC1C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;0BACV,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;2BAI1B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;kCACnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;GAC/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;aAEnB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;;;;;CAKtD,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,SAAS,OAAO,CAAC,OAAqB,EAAE,MAA0B;IAChE,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,MAAM;YACT,OAAO;gBACL,GAAG,OAAO;gBACV;oBACE,GAAG,MAAM,CAAC,OAAO;iBAClB;aACF,CAAC;QAEJ,KAAK,SAAS;YACZ,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,OAAO,CAAC,CAAC;QAEtD;YACE,OAAO,OAAO,CAAC;KAClB;AACH,CAAC;AAED,MAAM,KAAK,GAAkC,UAAU,CACrD,CACE,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,OAAO,EAA+B,EACpF,GAAsB,EACtB,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IACxC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC/B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,eAAe,GAAG,CAAC,CAAkC,EAAE,EAAE;QAC7D,IAAI,SAAS,IAAI,CAAC,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;YAC7E,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;SACpD;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,SAAS;YAAE,OAAO;QACtB,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,eAAe,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;YACjC,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;SACxD;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACnC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,EAC9C,EAAE,EAAE,WAAW,EACf,GAAG,EAAE,GAAG,EACR,KAAK,EACH;YACE,cAAc,EAAE,GAAG,CAAC,UAAU,IAAI;YAClC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;YAClC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;SAChB,EAEpB,eAAe,EAAE,eAAe,aAEhC,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,kBAAkB,YAC5C,OAAO,WACH,EACP,KAAC,MAAM,IACL,EAAE,EAAE,iBAAiB,EACrB,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,sBACQ,CAAC,CAAC,SAAS,CAAC,YAExB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACd,YACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,OAAO,GAAoC,CAAC,EAChD,QAAQ,EACR,YAAY,GAAG,QAAQ,EACvB,SAAS,EACT,OAAO,GAAG,cAAc,EACX,EAAE,EAAE;IACjB,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC5C,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,MAAM,CAEzB,EAAE,CAAC,CAAC;IAEP,iFAAiF;IACjF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;QAEnF,WAAW,CACT,OAAO;aACJ,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;aAC7E,OAAO,EAAE,CACb,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IAEtB,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,CAAC,QAAsB;YACzB,MAAM,OAAO,GAAe;gBAC1B,GAAG,QAAQ;gBACX,EAAE,EAAE,QAAQ,CAAC,EAAE,IAAI,SAAS,EAAE;aAC/B,CAAC;YAEF,QAAQ,CAAC;gBACP,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,OAAO;aACjB,CAAC,CAAC;QACL,CAAC;QACD,CAAC,cAAc,CAAC,EAAE,IAAI;KACvB,CAAC,EACF,CAAC,SAAS,EAAE,YAAY,CAAC,CAC1B,CAAC;IAEF,oDAAoD;IACpD,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IACrC,IAAI,QAAQ,CAAC,cAAc,CAAC,EAAE;QAC5B,OAAO,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAAG,QAAQ,WAA2B,CAAC;KACvF;IAED,OAAO,CACL,8BACE,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,YAAG,QAAQ,WAA2B,EAClF,CAAC,CAAC,QAAQ,CAAC,MAAM;gBAChB,YAAY;gBACZ,YAAY,CACV,KAAC,aAAa,cACX,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;wBAC3B,OAAO,CACL,eAAC,KAAK,OACA,OAAO,EACX,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAC5B,eAAe,EAAE,SAAS,EAC1B,YAAY,EAAE,OAAO,CAAC,YAAY,IAAI,YAAY,EAClD,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,EAAE,CAAC,EAAE;gCACR,IAAI,EAAE,EAAE;oCACN,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC;iCACrD;qCAAM;oCACL,OAAO,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;iCAC1C;4BACH,CAAC,GACD,CACH,CAAC;oBACJ,CAAC,CAAC,WACY,EAChB,YAAY,CACb,YACF,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import {\n  createContext,\n  useContext,\n  useReducer,\n  useMemo,\n  useLayoutEffect,\n  FunctionComponent,\n  ReactNode,\n  CSSProperties,\n  TransitionEvent,\n  Context,\n  useRef,\n  useState,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  Dispatch\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { createUID } from '../../utils';\nimport { useConfiguration, useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\n\nregisterIcon(timesIcon);\n\nexport const initializedKey = Symbol.for('@pega/cosmos-react-core.toaster.initialized');\n\nexport interface ToasterContextValue {\n  push: (message: ToastMessage) => void;\n  [initializedKey]: boolean;\n}\n\nexport const ToasterContext = createContext<ToasterContextValue>({\n  push: () => {},\n  [initializedKey]: false\n});\n\nexport interface ToastMessage {\n  /** String to identify the specific message. Used as onDismiss callback arg. */\n  id?: string;\n  /** A short message to provide feedback based upon a user action. */\n  content: string;\n  /**\n   * Time in milliseconds to automatically dismiss toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: number;\n  /** Called when user or timer dismisses toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ({ id, timeout }: { id: ToastState['id']; timeout: boolean }) => void;\n}\n\nexport interface ToasterProps {\n  /** The element(s) responsible for handling the Toaster state.  */\n  children: ReactNode;\n  /**\n   * Time in milliseconds to automatically dismiss Toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: ToastMessage['dismissAfter'];\n  /** Called when user or timer dismisses Toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ToastMessage['onDismiss'];\n  /** Context to read previous values from. */\n  context?: Context<ToasterContextValue>;\n}\n\ninterface ToastState extends ToastMessage {\n  id: NonNullable<ToastMessage['id']>;\n}\n\ntype ToastReducerAction =\n  | { type: 'push'; payload: ToastState }\n  | { type: 'unmount'; payload: ToastState['id'] };\n\ninterface ToastProps extends ToastState {\n  topLevelDismiss: ToasterProps['onDismiss'];\n  translateY: number;\n  dispatch: Dispatch<ToastReducerAction>;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst StyledToastButton = styled.button(\n  ({ theme }) => css`\n    border: none;\n    color: inherit;\n    padding: 0;\n    font-size: 1rem;\n\n    &:enabled:hover {\n      background: #ffffff19;\n    }\n\n    &:enabled:focus {\n      box-shadow: ${theme.base.shadow['focus-inverted']};\n    }\n  `\n);\n\nStyledToastButton.defaultProps = defaultThemeProp;\n\nconst StyledToastContent = styled.div(({ theme }) => {\n  return css`\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: ${theme.base['font-size']};\n    margin-inline-start: calc(${theme.base['border-radius']} / 2);\n  `;\n});\n\nStyledToastContent.defaultProps = defaultThemeProp;\n\nconst StyledToast = styled.div(({ theme }) => {\n  return css`\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    padding: calc(${theme.base.spacing} / 2);\n    background: ${theme.base.colors.slate['extra-dark']};\n    color: ${theme.base.colors.white};\n    border-radius: calc(${theme.base['border-radius']} / 2);\n    opacity: var(--opacity);\n    transform: translateY(var(--translateY)) scale(var(--scale));\n    transition-property: transform, opacity;\n    transition-duration: ${theme.base.animation.speed};\n    transition-timing-function: ${theme.base.animation.timing.ease};\n  `;\n});\n\nStyledToast.defaultProps = defaultThemeProp;\n\nconst StyledToaster = styled.div`\n  position: fixed;\n  z-index: ${({ theme }) => theme.base['z-index'].toast};\n  width: min(40ch, calc(100% - 1rem));\n  inset-inline-start: 50%;\n  transform: translateX(-50%);\n  top: 100%;\n`;\n\nStyledToaster.defaultProps = defaultThemeProp;\n\nfunction reducer(current: ToastState[], action: ToastReducerAction) {\n  switch (action.type) {\n    case 'push':\n      return [\n        ...current,\n        {\n          ...action.payload\n        }\n      ];\n\n    case 'unmount':\n      return current.filter(m => m.id !== action.payload);\n\n    default:\n      return current;\n  }\n}\n\nconst Toast: FunctionComponent<ToastProps> = forwardRef(\n  (\n    { dispatch, topLevelDismiss, dismissAfter, ...message }: PropsWithoutRef<ToastProps>,\n    ref: ToastProps['ref']\n  ) => {\n    const { content, translateY } = message;\n    const [dismissed, setDismissed] = useState(false);\n    const timeoutRef = useRef(NaN);\n    const t = useI18n();\n\n    const onTransitionEnd = (e: TransitionEvent<HTMLDivElement>) => {\n      if (dismissed && e.propertyName === 'opacity' && e.target === e.currentTarget) {\n        dispatch({ type: 'unmount', payload: message.id });\n      }\n    };\n\n    const dismiss = () => {\n      clearTimeout(timeoutRef.current);\n      if (dismissed) return;\n      setDismissed(true);\n      topLevelDismiss?.({ id: message.id, timeout: false });\n    };\n\n    useEffect(() => {\n      if (Number.isFinite(dismissAfter)) {\n        timeoutRef.current = setTimeout(dismiss, dismissAfter);\n      }\n\n      return () => {\n        clearTimeout(timeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <Flex\n        container={{ alignItems: 'center', gap: 0.25 }}\n        as={StyledToast}\n        ref={ref}\n        style={\n          {\n            '--translateY': `${-translateY}px`,\n            '--opacity': dismissed ? '0' : '1',\n            '--scale': dismissed ? '0' : '1'\n          } as CSSProperties\n        }\n        onTransitionEnd={onTransitionEnd}\n      >\n        <Flex item={{ grow: 1 }} as={StyledToastContent}>\n          {content}\n        </Flex>\n        <Button\n          as={StyledToastButton}\n          variant='simple'\n          onClick={dismiss}\n          icon\n          aria-label={t('dismiss')}\n        >\n          <Icon name='times' />\n        </Button>\n      </Flex>\n    );\n  }\n);\n\nconst Toaster: FunctionComponent<ToasterProps> = ({\n  children,\n  dismissAfter = Infinity,\n  onDismiss,\n  context = ToasterContext\n}: ToasterProps) => {\n  const { portalTarget } = useConfiguration();\n  const [messages, dispatch] = useReducer(reducer, []);\n  const [yOffsets, setYOffsets] = useState<number[]>([]);\n  const heightHashRef = useRef<{\n    [id: string]: number;\n  }>({});\n\n  // This effect will cause a re-render with a translateY value set for each toast.\n  useLayoutEffect(() => {\n    const heights = [...messages].reverse().map(({ id }) => heightHashRef.current[id]);\n\n    setYOffsets(\n      heights\n        .map((_, i) => heights.slice(0, i + 1).reduce((sum, cur) => sum + cur + 4, 0))\n        .reverse()\n    );\n  }, [messages.length]);\n\n  const providerValue = useMemo(\n    () => ({\n      push(incoming: ToastMessage) {\n        const message: ToastState = {\n          ...incoming,\n          id: incoming.id ?? createUID()\n        };\n\n        dispatch({\n          type: 'push',\n          payload: message\n        });\n      },\n      [initializedKey]: true\n    }),\n    [onDismiss, dismissAfter]\n  );\n\n  // Don't create additional ToasterContext.Providers.\n  const priorCtx = useContext(context);\n  if (priorCtx[initializedKey]) {\n    return <ToasterContext.Provider value={priorCtx}>{children}</ToasterContext.Provider>;\n  }\n\n  return (\n    <>\n      <ToasterContext.Provider value={providerValue}>{children}</ToasterContext.Provider>\n      {!!messages.length &&\n        portalTarget &&\n        createPortal(\n          <StyledToaster>\n            {messages.map((message, i) => {\n              return (\n                <Toast\n                  {...message}\n                  translateY={yOffsets[i] ?? 0}\n                  topLevelDismiss={onDismiss}\n                  dismissAfter={message.dismissAfter ?? dismissAfter}\n                  key={message.id}\n                  dispatch={dispatch}\n                  ref={el => {\n                    if (el) {\n                      heightHashRef.current[message.id] = el.offsetHeight;\n                    } else {\n                      delete heightHashRef.current[message.id];\n                    }\n                  }}\n                />\n              );\n            })}\n          </StyledToaster>,\n          portalTarget\n        )}\n    </>\n  );\n};\n\nexport default Toaster;\n"]}

package/lib/components/Tooltip/Tooltip.js

@@ -81,7 +81,7 @@ const Tooltip = forwardRef(({ children, target, showDelay = 'short', hideDelay =
             target.setAttribute('aria-describedby', id);
         }
     }, [describeTarget, target]);
-    return (_jsx(Popover, Object.assign({ id: id }, restProps, { show: show, showDelay: showDelay, hideDelay: hideDelay, groupId: 'tooltip', strategy: 'fixed', portal: portal, as: StyledTooltip, role: 'tooltip', target: target, arrow: true, placement: 'bottom', onMouseDown: onMouseDown, onMouseEnter: () => setTooltipHover(true), onMouseLeave: () => setTooltipHover(false), hideOnTargetHidden: true, ref: tooltipRef }, { children: children }), void 0));
+    return (_jsx(Popover, { id: id, ...restProps, show: show, showDelay: showDelay, hideDelay: hideDelay, groupId: 'tooltip', strategy: 'fixed', portal: portal, as: StyledTooltip, role: 'tooltip', target: target, arrow: true, placement: 'bottom', onMouseDown: onMouseDown, onMouseEnter: () => setTooltipHover(true), onMouseLeave: () => setTooltipHover(false), hideOnTargetHidden: true, ref: tooltipRef, children: children }, void 0));
 });
 export default Tooltip;
 //# sourceMappingURL=Tooltip.js.map

package/lib/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MutableRefObject,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Popover, { Delay, PopoverProps } from '../Popover';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport { calculateFontSize } from '../../styles';\n\nexport interface TooltipProps extends BaseProps {\n  /** Text content for the tooltip. */\n  children: string | string[];\n  /** Element to serve as the tooltip's target. */\n  target: Element | null;\n  /**\n   * Delay showing the tooltip on mouseenter.\n   * @default \"short\"\n   */\n  showDelay?: Delay;\n  /**\n   * Delay hiding the tooltip on mouseleave.\n   * @default \"long\"\n   */\n  hideDelay?: Delay;\n  /**\n   * If true, the Tooltip will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n   * @default false\n   */\n  portal?: PopoverProps['portal'];\n  /**\n   * If true, the Tooltip will automatically apply an aria-describedby attribute to its target.\n   * @default true\n   */\n  describeTarget?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTooltip = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    background-color: ${theme.components.tooltip['background-color']};\n    color: ${theme.components.tooltip['foreground-color']};\n    font-size: ${fontSize.xxs};\n    max-width: 40ch;\n    padding: ${theme.base.spacing};\n    white-space: pre-line;\n    word-break: break-word;\n  `;\n});\n\nStyledTooltip.defaultProps = defaultThemeProp;\n\nconst Tooltip: FunctionComponent<TooltipProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      target,\n      showDelay = 'short',\n      hideDelay = 'long',\n      portal = false,\n      describeTarget = true,\n      ...restProps\n    }: PropsWithoutRef<TooltipProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const id = useUID();\n    const [show, setShow] = useState(false);\n    const [tooltipHover, setTooltipHover] = useState(false);\n    const tooltipRef = useConsolidatedRef(ref);\n    const lastClickedRef: MutableRefObject<EventTarget | null> = useRef(null);\n\n    const showTooltip = useCallback(() => {\n      setShow(true);\n    }, []);\n\n    const onMouseDown = useCallback(\n      ({ target: eTarget }: MouseEvent) => {\n        lastClickedRef.current = eTarget;\n        if (eTarget === tooltipRef.current || eTarget === target) return;\n        setShow(false);\n      },\n      [target]\n    );\n\n    const onFocusOut = useCallback(() => {\n      if (lastClickedRef.current !== tooltipRef.current) {\n        setShow(false);\n      }\n      lastClickedRef.current = null;\n    }, []);\n\n    const onMouseEnter = useCallback(() => {\n      setShow(true);\n    }, [target]);\n\n    const onMouseLeave = useCallback(() => {\n      if (document.activeElement !== target && !tooltipHover) {\n        setShow(false);\n      }\n    }, [target, tooltipHover]);\n\n    const onKeyDown = useCallback(\n      ({ key }: KeyboardEvent) => {\n        if (key === 'Escape' && document.activeElement === target) {\n          setShow(false);\n        }\n      },\n      [target]\n    );\n\n    useEffect(() => {\n      if (tooltipHover) showTooltip();\n      else onMouseLeave();\n    }, [tooltipHover, onMouseLeave]);\n\n    useEffect(() => {\n      if (!target) return;\n\n      document.addEventListener('keydown', onKeyDown);\n      document.addEventListener('mousedown', onMouseDown);\n\n      target.addEventListener('focusin', showTooltip);\n      target.addEventListener('focusout', onFocusOut);\n\n      target.addEventListener('mouseenter', onMouseEnter);\n      target.addEventListener('mouseleave', onMouseLeave);\n\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n        document.removeEventListener('mousedown', onMouseDown);\n\n        target.removeEventListener('focusin', showTooltip);\n        target.removeEventListener('focusout', onFocusOut);\n\n        target.removeEventListener('mouseenter', onMouseEnter);\n        target.removeEventListener('mouseleave', onMouseLeave);\n      };\n    }, [target, showTooltip, onMouseDown, onFocusOut, onMouseLeave, onKeyDown]);\n\n    useEffect(() => {\n      if (target && !target.getAttribute('aria-describedby') && describeTarget) {\n        target.setAttribute('aria-describedby', id);\n      }\n    }, [describeTarget, target]);\n\n    return (\n      <Popover\n        id={id}\n        {...restProps}\n        show={show}\n        showDelay={showDelay}\n        hideDelay={hideDelay}\n        groupId='tooltip'\n        strategy='fixed'\n        portal={portal}\n        as={StyledTooltip}\n        role='tooltip'\n        target={target}\n        arrow\n        placement='bottom'\n        onMouseDown={onMouseDown}\n        onMouseEnter={() => setTooltipHover(true)}\n        onMouseLeave={() => setTooltipHover(false)}\n        hideOnTargetHidden\n        ref={tooltipRef}\n      >\n        {children}\n      </Popover>\n    );\n  }\n);\n\nexport default Tooltip;\n"]}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MutableRefObject,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Popover, { Delay, PopoverProps } from '../Popover';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport { calculateFontSize } from '../../styles';\n\nexport interface TooltipProps extends BaseProps {\n  /** Text content for the tooltip. */\n  children: string | string[];\n  /** Element to serve as the tooltip's target. */\n  target: Element | null;\n  /**\n   * Delay showing the tooltip on mouseenter.\n   * @default \"short\"\n   */\n  showDelay?: Delay;\n  /**\n   * Delay hiding the tooltip on mouseleave.\n   * @default \"long\"\n   */\n  hideDelay?: Delay;\n  /**\n   * If true, the Tooltip will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n   * @default false\n   */\n  portal?: PopoverProps['portal'];\n  /**\n   * If true, the Tooltip will automatically apply an aria-describedby attribute to its target.\n   * @default true\n   */\n  describeTarget?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTooltip = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    background-color: ${theme.components.tooltip['background-color']};\n    color: ${theme.components.tooltip['foreground-color']};\n    font-size: ${fontSize.xxs};\n    max-width: 40ch;\n    padding: ${theme.base.spacing};\n    white-space: pre-line;\n    word-break: break-word;\n  `;\n});\n\nStyledTooltip.defaultProps = defaultThemeProp;\n\nconst Tooltip: FunctionComponent<TooltipProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      target,\n      showDelay = 'short',\n      hideDelay = 'long',\n      portal = false,\n      describeTarget = true,\n      ...restProps\n    }: PropsWithoutRef<TooltipProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const id = useUID();\n    const [show, setShow] = useState(false);\n    const [tooltipHover, setTooltipHover] = useState(false);\n    const tooltipRef = useConsolidatedRef(ref);\n    const lastClickedRef: MutableRefObject<EventTarget | null> = useRef(null);\n\n    const showTooltip = useCallback(() => {\n      setShow(true);\n    }, []);\n\n    const onMouseDown = useCallback(\n      ({ target: eTarget }: MouseEvent) => {\n        lastClickedRef.current = eTarget;\n        if (eTarget === tooltipRef.current || eTarget === target) return;\n        setShow(false);\n      },\n      [target]\n    );\n\n    const onFocusOut = useCallback(() => {\n      if (lastClickedRef.current !== tooltipRef.current) {\n        setShow(false);\n      }\n      lastClickedRef.current = null;\n    }, []);\n\n    const onMouseEnter = useCallback(() => {\n      setShow(true);\n    }, [target]);\n\n    const onMouseLeave = useCallback(() => {\n      if (document.activeElement !== target && !tooltipHover) {\n        setShow(false);\n      }\n    }, [target, tooltipHover]);\n\n    const onKeyDown = useCallback(\n      ({ key }: KeyboardEvent) => {\n        if (key === 'Escape' && document.activeElement === target) {\n          setShow(false);\n        }\n      },\n      [target]\n    );\n\n    useEffect(() => {\n      if (tooltipHover) showTooltip();\n      else onMouseLeave();\n    }, [tooltipHover, onMouseLeave]);\n\n    useEffect(() => {\n      if (!target) return;\n\n      document.addEventListener('keydown', onKeyDown);\n      document.addEventListener('mousedown', onMouseDown);\n\n      target.addEventListener('focusin', showTooltip);\n      target.addEventListener('focusout', onFocusOut);\n\n      target.addEventListener('mouseenter', onMouseEnter);\n      target.addEventListener('mouseleave', onMouseLeave);\n\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n        document.removeEventListener('mousedown', onMouseDown);\n\n        target.removeEventListener('focusin', showTooltip);\n        target.removeEventListener('focusout', onFocusOut);\n\n        target.removeEventListener('mouseenter', onMouseEnter);\n        target.removeEventListener('mouseleave', onMouseLeave);\n      };\n    }, [target, showTooltip, onMouseDown, onFocusOut, onMouseLeave, onKeyDown]);\n\n    useEffect(() => {\n      if (target && !target.getAttribute('aria-describedby') && describeTarget) {\n        target.setAttribute('aria-describedby', id);\n      }\n    }, [describeTarget, target]);\n\n    return (\n      <Popover\n        id={id}\n        {...restProps}\n        show={show}\n        showDelay={showDelay}\n        hideDelay={hideDelay}\n        groupId='tooltip'\n        strategy='fixed'\n        portal={portal}\n        as={StyledTooltip}\n        role='tooltip'\n        target={target}\n        arrow\n        placement='bottom'\n        onMouseDown={onMouseDown}\n        onMouseEnter={() => setTooltipHover(true)}\n        onMouseLeave={() => setTooltipHover(false)}\n        hideOnTargetHidden\n        ref={tooltipRef}\n      >\n        {children}\n      </Popover>\n    );\n  }\n);\n\nexport default Tooltip;\n"]}

package/lib/components/Tree/StandardTree.js

@@ -30,23 +30,23 @@ const NodeRenderer = ({ id, label, icon, depth, hasParentSibling, nodes, expande
     const labelContent = useMemo(() => {
         const internal = (
         // Wrapping in a div for handling of flex space-between when there are node actions.
-        _jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 0.5 }, as: StyledLabelContent }, { children: [icon && _jsx(StyledNodeIcon, { name: icon }, void 0), _jsx(StyledNodeText, { children: label }, void 0)] }), void 0));
-        return !nodes && (onClick ?? onNodeClick) ? (_jsxs(Flex, Object.assign({ container: { alignItems: 'center', justify: 'between', gap: 2 }, as: StyledNodeInteraction, role: 'treeitem', "aria-current": current ? 'true' : undefined, onClick: (e) => {
+        _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledLabelContent, children: [icon && _jsx(StyledNodeIcon, { name: icon }, void 0), _jsx(StyledNodeText, { children: label }, void 0)] }, void 0));
+        return !nodes && (onClick ?? onNodeClick) ? (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 2 }, as: StyledNodeInteraction, role: 'treeitem', "aria-current": current ? 'true' : undefined, onClick: (e) => {
                 onClick?.(id, e);
                 onNodeClick?.(id, e);
-            } }, { children: [internal, actionsJSX] }), void 0)) : (internal);
+            }, children: [internal, actionsJSX] }, void 0)) : (internal);
     }, [id, label, icon, nodes, actions, onClick, onNodeClick, current]);
     const handleToggleClick = useCallback((e) => {
         onNodeClick?.(id, e);
     }, [id, onNodeClick]);
-    return (_jsx(StyledStandardTreeNode, Object.assign({ id: id, style: { '--depth': depth, '--has-parent-sibling': Number(hasParentSibling) }, "aria-busy": loading }, { children: nodes ? (_jsxs(_Fragment, { children: [_jsxs(Flex, Object.assign({ container: { alignItems: 'center', justify: 'between', gap: 2 }, as: StyledStandardTreeParent, role: 'treeitem', "aria-current": current ? 'true' : undefined, variant: 'text', onClick: handleToggleClick, "aria-expanded": expanded ? 'true' : 'false', "aria-label": t(expanded ? 'collapse_noun' : 'expand_noun', [label]) }, { children: [_jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 1 }, as: 'span' }, { children: [_jsx(StyledToggleIcon, { name: 'caret-right' }, void 0), labelContent] }), void 0), actionsJSX] }), void 0), _jsxs(StyledStandardTreeItemSubTree, Object.assign({ lined: lined }, { children: [subTree, loading && _jsx(Progress, { variant: 'ring', placement: 'inline' }, void 0)] }), void 0)] }, void 0)) : (_jsx(StyledStandardTreeLeaf, { children: labelContent }, void 0)) }), void 0));
+    return (_jsx(StyledStandardTreeNode, { id: id, style: { '--depth': depth, '--has-parent-sibling': Number(hasParentSibling) }, "aria-busy": loading, children: nodes ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 2 }, as: StyledStandardTreeParent, role: 'treeitem', "aria-current": current ? 'true' : undefined, variant: 'text', onClick: handleToggleClick, "aria-expanded": expanded ? 'true' : 'false', "aria-label": t(expanded ? 'collapse_noun' : 'expand_noun', [label]), children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, as: 'span', children: [_jsx(StyledToggleIcon, { name: 'caret-right' }, void 0), labelContent] }, void 0), actionsJSX] }, void 0), _jsxs(StyledStandardTreeItemSubTree, { lined: lined, children: [subTree, loading && _jsx(Progress, { variant: 'ring', placement: 'inline' }, void 0)] }, void 0)] }, void 0)) : (_jsx(StyledStandardTreeLeaf, { children: labelContent }, void 0)) }, void 0));
 };
 const StandardTree = forwardRef(({ nodes, currentNodeId, onNodeClick, lined = false, ...restProps }, ref) => {
-    return (_jsx(StandardTreeContext.Provider, Object.assign({ value: useMemo(() => ({
+    return (_jsx(StandardTreeContext.Provider, { value: useMemo(() => ({
             currentNodeId,
             onNodeClick,
             lined
-        }), [currentNodeId, onNodeClick, lined]) }, { children: _jsx(StyledStandardTree, Object.assign({}, restProps, { ref: ref, nodes: nodes, nodeRenderer: NodeRenderer }), void 0) }), void 0));
+        }), [currentNodeId, onNodeClick, lined]), children: _jsx(StyledStandardTree, { ...restProps, ref: ref, nodes: nodes, nodeRenderer: NodeRenderer }, void 0) }, void 0));
 });
 export default StandardTree;
 //# sourceMappingURL=StandardTree.js.map

package/lib/components/Tree/StandardTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"StandardTree.js","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, createContext, useMemo, useContext, useCallback } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, CSSProperties, MouseEvent } from 'react';\n\nimport Progress from '../Progress';\nimport { useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Actions from '../Actions';\nimport type { Action, ForwardProps } from '../../types';\n\nimport {\n  StyledStandardTreeParent,\n  StyledToggleIcon,\n  StyledStandardTreeItemSubTree,\n  StyledStandardTreeLeaf,\n  StyledStandardTree,\n  StyledNodeInteraction,\n  StyledStandardTreeNode,\n  StyledNodeActions,\n  StyledLabelContent,\n  StyledNodeIcon,\n  StyledNodeText\n} from './StandardTree.styles';\nimport type { TreeProps } from './Tree';\nimport type {\n  StandardTreeNode,\n  StandardTreeProps,\n  StandardTreePropsWithDefaults\n} from './StandardTree.types';\n\nconst StandardTreeContext = createContext<\n  Pick<StandardTreePropsWithDefaults, 'currentNodeId' | 'onNodeClick' | 'lined'>\n>({\n  currentNodeId: undefined,\n  lined: false,\n  onNodeClick: () => {}\n});\n\nconst NodeRenderer: TreeProps<StandardTreeNode>['nodeRenderer'] = ({\n  id,\n  label,\n  icon,\n  depth,\n  hasParentSibling,\n  nodes,\n  expanded = false,\n  loading = false,\n  subTree,\n  actions,\n  onClick\n}) => {\n  const { currentNodeId, onNodeClick, lined } = useContext(StandardTreeContext);\n  const current = currentNodeId === id;\n  const t = useI18n();\n\n  const actionsJSX = useMemo(() => {\n    return actions ? (\n      // Wrapping in a div since Actions may render a frag of buttons and we need a wrapper for flex space-between.\n      <StyledNodeActions>\n        <Actions\n          items={actions.map(action => {\n            return {\n              ...action,\n              onClick: (\n                actionId: Action['id'],\n                e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n              ) => {\n                e.stopPropagation();\n                action?.onClick?.(actionId, e);\n              }\n            };\n          })}\n          menuAt={3}\n        />\n      </StyledNodeActions>\n    ) : null;\n  }, [actions]);\n\n  const labelContent = useMemo(() => {\n    const internal = (\n      // Wrapping in a div for handling of flex space-between when there are node actions.\n      <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledLabelContent}>\n        {icon && <StyledNodeIcon name={icon} />}\n        <StyledNodeText>{label}</StyledNodeText>\n      </Flex>\n    );\n\n    return !nodes && (onClick ?? onNodeClick) ? (\n      <Flex\n        container={{ alignItems: 'center', justify: 'between', gap: 2 }}\n        as={StyledNodeInteraction}\n        role='treeitem'\n        aria-current={current ? 'true' : undefined}\n        onClick={(e: MouseEvent<HTMLElement>) => {\n          onClick?.(id, e);\n          onNodeClick?.(id, e);\n        }}\n      >\n        {internal}\n        {actionsJSX}\n      </Flex>\n    ) : (\n      internal\n    );\n  }, [id, label, icon, nodes, actions, onClick, onNodeClick, current]);\n\n  const handleToggleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      onNodeClick?.(id, e);\n    },\n    [id, onNodeClick]\n  );\n\n  return (\n    <StyledStandardTreeNode\n      id={id}\n      style={\n        { '--depth': depth, '--has-parent-sibling': Number(hasParentSibling) } as CSSProperties\n      }\n      aria-busy={loading}\n    >\n      {nodes ? (\n        <>\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', gap: 2 }}\n            as={StyledStandardTreeParent}\n            role='treeitem'\n            aria-current={current ? 'true' : undefined}\n            variant='text'\n            onClick={handleToggleClick}\n            aria-expanded={expanded ? 'true' : 'false'}\n            aria-label={t(expanded ? 'collapse_noun' : 'expand_noun', [label])}\n          >\n            <Flex container={{ alignItems: 'center', gap: 1 }} as='span'>\n              <StyledToggleIcon name='caret-right' />\n              {labelContent}\n            </Flex>\n            {actionsJSX}\n          </Flex>\n          <StyledStandardTreeItemSubTree lined={lined}>\n            {subTree}\n            {loading && <Progress variant='ring' placement='inline' />}\n          </StyledStandardTreeItemSubTree>\n        </>\n      ) : (\n        <StyledStandardTreeLeaf>{labelContent}</StyledStandardTreeLeaf>\n      )}\n    </StyledStandardTreeNode>\n  );\n};\n\nconst StandardTree: FunctionComponent<StandardTreeProps & ForwardProps> = forwardRef(\n  (\n    {\n      nodes,\n      currentNodeId,\n      onNodeClick,\n      lined = false,\n      ...restProps\n    }: PropsWithoutRef<StandardTreeProps>,\n    ref: StandardTreeProps['ref']\n  ) => {\n    return (\n      <StandardTreeContext.Provider\n        value={useMemo(\n          () => ({\n            currentNodeId,\n            onNodeClick,\n            lined\n          }),\n          [currentNodeId, onNodeClick, lined]\n        )}\n      >\n        {/* FIXME: Types are having issues when styled(Tree) is typeof Tree. */}\n        <StyledStandardTree {...restProps} ref={ref} nodes={nodes} nodeRenderer={NodeRenderer} />\n      </StandardTreeContext.Provider>\n    );\n  }\n);\n\nexport default StandardTree;\n"]}
+{"version":3,"file":"StandardTree.js","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, createContext, useMemo, useContext, useCallback } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, CSSProperties, MouseEvent } from 'react';\n\nimport Progress from '../Progress';\nimport { useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Actions from '../Actions';\nimport type { Action, ForwardProps } from '../../types';\n\nimport {\n  StyledStandardTreeParent,\n  StyledToggleIcon,\n  StyledStandardTreeItemSubTree,\n  StyledStandardTreeLeaf,\n  StyledStandardTree,\n  StyledNodeInteraction,\n  StyledStandardTreeNode,\n  StyledNodeActions,\n  StyledLabelContent,\n  StyledNodeIcon,\n  StyledNodeText\n} from './StandardTree.styles';\nimport type { TreeProps } from './Tree';\nimport type {\n  StandardTreeNode,\n  StandardTreeProps,\n  StandardTreePropsWithDefaults\n} from './StandardTree.types';\n\nconst StandardTreeContext = createContext<\n  Pick<StandardTreePropsWithDefaults, 'currentNodeId' | 'onNodeClick' | 'lined'>\n>({\n  currentNodeId: undefined,\n  lined: false,\n  onNodeClick: () => {}\n});\n\nconst NodeRenderer: TreeProps<StandardTreeNode>['nodeRenderer'] = ({\n  id,\n  label,\n  icon,\n  depth,\n  hasParentSibling,\n  nodes,\n  expanded = false,\n  loading = false,\n  subTree,\n  actions,\n  onClick\n}) => {\n  const { currentNodeId, onNodeClick, lined } = useContext(StandardTreeContext);\n  const current = currentNodeId === id;\n  const t = useI18n();\n\n  const actionsJSX = useMemo(() => {\n    return actions ? (\n      // Wrapping in a div since Actions may render a frag of buttons and we need a wrapper for flex space-between.\n      <StyledNodeActions>\n        <Actions\n          items={actions.map(action => {\n            return {\n              ...action,\n              onClick: (\n                actionId: Action['id'],\n                e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n              ) => {\n                e.stopPropagation();\n                action?.onClick?.(actionId, e);\n              }\n            };\n          })}\n          menuAt={3}\n        />\n      </StyledNodeActions>\n    ) : null;\n  }, [actions]);\n\n  const labelContent = useMemo(() => {\n    const internal = (\n      // Wrapping in a div for handling of flex space-between when there are node actions.\n      <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledLabelContent}>\n        {icon && <StyledNodeIcon name={icon} />}\n        <StyledNodeText>{label}</StyledNodeText>\n      </Flex>\n    );\n\n    return !nodes && (onClick ?? onNodeClick) ? (\n      <Flex\n        container={{ alignItems: 'center', justify: 'between', gap: 2 }}\n        as={StyledNodeInteraction}\n        role='treeitem'\n        aria-current={current ? 'true' : undefined}\n        onClick={(e: MouseEvent<HTMLElement>) => {\n          onClick?.(id, e);\n          onNodeClick?.(id, e);\n        }}\n      >\n        {internal}\n        {actionsJSX}\n      </Flex>\n    ) : (\n      internal\n    );\n  }, [id, label, icon, nodes, actions, onClick, onNodeClick, current]);\n\n  const handleToggleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      onNodeClick?.(id, e);\n    },\n    [id, onNodeClick]\n  );\n\n  return (\n    <StyledStandardTreeNode\n      id={id}\n      style={\n        { '--depth': depth, '--has-parent-sibling': Number(hasParentSibling) } as CSSProperties\n      }\n      aria-busy={loading}\n    >\n      {nodes ? (\n        <>\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', gap: 2 }}\n            as={StyledStandardTreeParent}\n            role='treeitem'\n            aria-current={current ? 'true' : undefined}\n            variant='text'\n            onClick={handleToggleClick}\n            aria-expanded={expanded ? 'true' : 'false'}\n            aria-label={t(expanded ? 'collapse_noun' : 'expand_noun', [label])}\n          >\n            <Flex container={{ alignItems: 'center', gap: 1 }} as='span'>\n              <StyledToggleIcon name='caret-right' />\n              {labelContent}\n            </Flex>\n            {actionsJSX}\n          </Flex>\n          <StyledStandardTreeItemSubTree lined={lined}>\n            {subTree}\n            {loading && <Progress variant='ring' placement='inline' />}\n          </StyledStandardTreeItemSubTree>\n        </>\n      ) : (\n        <StyledStandardTreeLeaf>{labelContent}</StyledStandardTreeLeaf>\n      )}\n    </StyledStandardTreeNode>\n  );\n};\n\nconst StandardTree: FunctionComponent<StandardTreeProps & ForwardProps> = forwardRef(\n  (\n    {\n      nodes,\n      currentNodeId,\n      onNodeClick,\n      lined = false,\n      ...restProps\n    }: PropsWithoutRef<StandardTreeProps>,\n    ref: StandardTreeProps['ref']\n  ) => {\n    return (\n      <StandardTreeContext.Provider\n        value={useMemo(\n          () => ({\n            currentNodeId,\n            onNodeClick,\n            lined\n          }),\n          [currentNodeId, onNodeClick, lined]\n        )}\n      >\n        {/* FIXME: Types are having issues when styled(Tree) is typeof Tree. */}\n        <StyledStandardTree {...restProps} ref={ref} nodes={nodes} nodeRenderer={NodeRenderer} />\n      </StandardTreeContext.Provider>\n    );\n  }\n);\n\nexport default StandardTree;\n"]}

package/lib/components/Tree/Tree.js

@@ -19,14 +19,14 @@ const DefaultNodeRenderer = ({ data, subTree }) => {
 };
 let TreeList;
 const TreeItem = ({ listItemProps, depth, nodes, nodeRenderer: NodeRenderer, ...restProps }) => {
-    return (_jsx(StyledTreeListItem, Object.assign({}, listItemProps, { children: _jsx(NodeRenderer, Object.assign({}, restProps, { depth: depth, nodes: nodes, subTree: nodes && _jsx(TreeList, { depth: depth + 1, nodes: nodes, nodeRenderer: NodeRenderer }, void 0) }), void 0) }), void 0));
+    return (_jsx(StyledTreeListItem, { ...listItemProps, children: _jsx(NodeRenderer, { ...restProps, depth: depth, nodes: nodes, subTree: nodes && _jsx(TreeList, { depth: depth + 1, nodes: nodes, nodeRenderer: NodeRenderer }, void 0) }, void 0) }, void 0));
 };
 TreeList = forwardRef(({ nodes, depth, nodeRenderer, ...restProps }, ref) => {
     const hasParentSibling = nodes.some(node => !!node.nodes);
-    return nodes.length > 0 ? (_jsx(StyledTreeList, Object.assign({}, restProps, { ref: ref, role: depth === 0 ? 'tree' : 'group' }, { children: nodes.map(node => (_createElement(TreeItem, { ...node, key: node.id, depth: depth, nodeRenderer: nodeRenderer, hasParentSibling: hasParentSibling }))) }), void 0)) : null;
+    return nodes.length > 0 ? (_jsx(StyledTreeList, { ...restProps, ref: ref, role: depth === 0 ? 'tree' : 'group', children: nodes.map(node => (_createElement(TreeItem, { ...node, key: node.id, depth: depth, nodeRenderer: nodeRenderer, hasParentSibling: hasParentSibling }))) }, void 0)) : null;
 });
 const Tree = forwardRef(({ nodeRenderer = DefaultNodeRenderer, ...restProps }, ref) => {
-    return _jsx(TreeList, Object.assign({}, restProps, { ref: ref, depth: 0, nodeRenderer: nodeRenderer }), void 0);
+    return _jsx(TreeList, { ...restProps, ref: ref, depth: 0, nodeRenderer: nodeRenderer }, void 0);
 });
 export default Tree;
 //# sourceMappingURL=Tree.js.map

package/lib/components/Tree/Tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.js","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAkD,MAAM,OAAO,CAAC;AACnF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAyCvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;IAOnC,kBAAkB;;;CAGrB,CAAC;AAEF,MAAM,mBAAmB,GAA8B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC3E,OAAO,CACL,8BACG,IAAI,EACJ,OAAO,YACP,CACJ,CAAC;AACJ,CAAC,CAAC;AAaF,IAAI,QAAsC,CAAC;AAE3C,MAAM,QAAQ,GAAG,CAAC,EAChB,aAAa,EACb,KAAK,EACL,KAAK,EACL,YAAY,EAAE,YAAY,EAC1B,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,OAAO,CACL,KAAC,kBAAkB,oBAAK,aAAa,cACnC,KAAC,YAAY,oBACP,SAAS,IACb,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,KAAK,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,WAAI,YAC1F,YACiB,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,GAAG,UAAU,CACnB,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAAkC,EAC5E,GAAsB,EACtB,EAAE;IACF,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1D,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACxB,KAAC,cAAc,oBAAK,SAAS,IAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC1E,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,QAAQ,OACH,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC,YACa,CAClB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,MAAM,IAAI,GAAG,UAAU,CACrB,CACE,EAAE,YAAY,GAAG,mBAAmB,EAAE,GAAG,SAAS,EAA8B,EAChF,GAAqB,EACrB,EAAE;IACF,OAAO,KAAC,QAAQ,oBAAK,SAAS,IAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,YAAY,EAAE,YAAY,YAAI,CAAC;AACrF,CAAC,CAC2F,CAAC;AAE/F,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, ComponentType, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\n\nexport type OldTreeNode<T extends object = Record<string, unknown>> = {\n  /** The id of the Node. Used as the key for the li element wrapping the Node. */\n  id: string;\n  /** Child nodes. */\n  nodes?: OldTreeNode<T>[];\n  /** Props to apply to the li. */\n  listItemProps?: ForwardProps;\n\n  [key: string]: unknown;\n} & T;\n\nexport type TreeNode = {\n  /** The id of the Node. Used as the key for the li element wrapping the Node. */\n  id: string;\n  /** Child nodes. */\n  nodes?: TreeNode[];\n  /** Props to apply to the li. */\n  listItemProps?: ForwardProps;\n\n  [key: string]: unknown;\n};\n\nexport interface TreeProps<T extends TreeNode = TreeNode> extends BaseProps, NoChildrenProp {\n  /** An array of ParentNodes and Nodes that compose the layout of the Tree. */\n  nodes: T[];\n  /** A function that allows custom styling and behavior for all Nodes. */\n  nodeRenderer?: ComponentType<\n    {\n      depth: number;\n      subTree?: ReactNode;\n      hasParentSibling: TreeItemProps['hasParentSibling'];\n    } & Exclude<T, 'listItemProps'>\n  >;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledTreeListItem = styled.li``;\n\nexport const StyledTreeList = styled.ul`\n  &,\n  & & {\n    list-style: none;\n    position: relative;\n  }\n\n  ${StyledTreeListItem} {\n    position: relative;\n  }\n`;\n\nconst DefaultNodeRenderer: TreeProps['nodeRenderer'] = ({ data, subTree }) => {\n  return (\n    <>\n      {data}\n      {subTree}\n    </>\n  );\n};\n\ninterface TreeItemProps extends TreeNode {\n  nodeRenderer: NonNullable<TreeProps['nodeRenderer']>;\n  depth: number;\n  hasParentSibling: boolean;\n}\n\ninterface TreeListProps extends Pick<TreeProps, 'nodes' | 'ref'> {\n  nodeRenderer: NonNullable<TreeProps['nodeRenderer']>;\n  depth: number;\n}\n\nlet TreeList: ComponentType<TreeListProps>;\n\nconst TreeItem = ({\n  listItemProps,\n  depth,\n  nodes,\n  nodeRenderer: NodeRenderer,\n  ...restProps\n}: TreeItemProps) => {\n  return (\n    <StyledTreeListItem {...listItemProps}>\n      <NodeRenderer\n        {...restProps}\n        depth={depth}\n        nodes={nodes}\n        subTree={nodes && <TreeList depth={depth + 1} nodes={nodes} nodeRenderer={NodeRenderer} />}\n      />\n    </StyledTreeListItem>\n  );\n};\n\nTreeList = forwardRef(\n  (\n    { nodes, depth, nodeRenderer, ...restProps }: PropsWithoutRef<TreeListProps>,\n    ref?: TreeProps['ref']\n  ) => {\n    const hasParentSibling = nodes.some(node => !!node.nodes);\n    return nodes.length > 0 ? (\n      <StyledTreeList {...restProps} ref={ref} role={depth === 0 ? 'tree' : 'group'}>\n        {nodes.map(node => (\n          <TreeItem\n            {...node}\n            key={node.id}\n            depth={depth}\n            nodeRenderer={nodeRenderer}\n            hasParentSibling={hasParentSibling}\n          />\n        ))}\n      </StyledTreeList>\n    ) : null;\n  }\n);\n\nconst Tree = forwardRef(\n  (\n    { nodeRenderer = DefaultNodeRenderer, ...restProps }: PropsWithoutRef<TreeProps>,\n    ref: TreeProps['ref']\n  ) => {\n    return <TreeList {...restProps} ref={ref} depth={0} nodeRenderer={nodeRenderer} />;\n  }\n) as <T extends TreeNode = TreeNode>(props: TreeProps<T> & ForwardProps) => JSX.Element | null;\n\nexport default Tree;\n"]}
+{"version":3,"file":"Tree.js","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAkD,MAAM,OAAO,CAAC;AACnF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAyCvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;IAOnC,kBAAkB;;;CAGrB,CAAC;AAEF,MAAM,mBAAmB,GAA8B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC3E,OAAO,CACL,8BACG,IAAI,EACJ,OAAO,YACP,CACJ,CAAC;AACJ,CAAC,CAAC;AAaF,IAAI,QAAsC,CAAC;AAE3C,MAAM,QAAQ,GAAG,CAAC,EAChB,aAAa,EACb,KAAK,EACL,KAAK,EACL,YAAY,EAAE,YAAY,EAC1B,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,OAAO,CACL,KAAC,kBAAkB,OAAK,aAAa,YACnC,KAAC,YAAY,OACP,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,KAAK,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,WAAI,WAC1F,WACiB,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,GAAG,UAAU,CACnB,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAAkC,EAC5E,GAAsB,EACtB,EAAE;IACF,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1D,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACxB,KAAC,cAAc,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,YAC1E,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,QAAQ,OACH,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC,WACa,CAClB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,MAAM,IAAI,GAAG,UAAU,CACrB,CACE,EAAE,YAAY,GAAG,mBAAmB,EAAE,GAAG,SAAS,EAA8B,EAChF,GAAqB,EACrB,EAAE;IACF,OAAO,KAAC,QAAQ,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,YAAY,EAAE,YAAY,WAAI,CAAC;AACrF,CAAC,CAC2F,CAAC;AAE/F,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, ComponentType, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\n\nexport type OldTreeNode<T extends object = Record<string, unknown>> = {\n  /** The id of the Node. Used as the key for the li element wrapping the Node. */\n  id: string;\n  /** Child nodes. */\n  nodes?: OldTreeNode<T>[];\n  /** Props to apply to the li. */\n  listItemProps?: ForwardProps;\n\n  [key: string]: unknown;\n} & T;\n\nexport type TreeNode = {\n  /** The id of the Node. Used as the key for the li element wrapping the Node. */\n  id: string;\n  /** Child nodes. */\n  nodes?: TreeNode[];\n  /** Props to apply to the li. */\n  listItemProps?: ForwardProps;\n\n  [key: string]: unknown;\n};\n\nexport interface TreeProps<T extends TreeNode = TreeNode> extends BaseProps, NoChildrenProp {\n  /** An array of ParentNodes and Nodes that compose the layout of the Tree. */\n  nodes: T[];\n  /** A function that allows custom styling and behavior for all Nodes. */\n  nodeRenderer?: ComponentType<\n    {\n      depth: number;\n      subTree?: ReactNode;\n      hasParentSibling: TreeItemProps['hasParentSibling'];\n    } & Exclude<T, 'listItemProps'>\n  >;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledTreeListItem = styled.li``;\n\nexport const StyledTreeList = styled.ul`\n  &,\n  & & {\n    list-style: none;\n    position: relative;\n  }\n\n  ${StyledTreeListItem} {\n    position: relative;\n  }\n`;\n\nconst DefaultNodeRenderer: TreeProps['nodeRenderer'] = ({ data, subTree }) => {\n  return (\n    <>\n      {data}\n      {subTree}\n    </>\n  );\n};\n\ninterface TreeItemProps extends TreeNode {\n  nodeRenderer: NonNullable<TreeProps['nodeRenderer']>;\n  depth: number;\n  hasParentSibling: boolean;\n}\n\ninterface TreeListProps extends Pick<TreeProps, 'nodes' | 'ref'> {\n  nodeRenderer: NonNullable<TreeProps['nodeRenderer']>;\n  depth: number;\n}\n\nlet TreeList: ComponentType<TreeListProps>;\n\nconst TreeItem = ({\n  listItemProps,\n  depth,\n  nodes,\n  nodeRenderer: NodeRenderer,\n  ...restProps\n}: TreeItemProps) => {\n  return (\n    <StyledTreeListItem {...listItemProps}>\n      <NodeRenderer\n        {...restProps}\n        depth={depth}\n        nodes={nodes}\n        subTree={nodes && <TreeList depth={depth + 1} nodes={nodes} nodeRenderer={NodeRenderer} />}\n      />\n    </StyledTreeListItem>\n  );\n};\n\nTreeList = forwardRef(\n  (\n    { nodes, depth, nodeRenderer, ...restProps }: PropsWithoutRef<TreeListProps>,\n    ref?: TreeProps['ref']\n  ) => {\n    const hasParentSibling = nodes.some(node => !!node.nodes);\n    return nodes.length > 0 ? (\n      <StyledTreeList {...restProps} ref={ref} role={depth === 0 ? 'tree' : 'group'}>\n        {nodes.map(node => (\n          <TreeItem\n            {...node}\n            key={node.id}\n            depth={depth}\n            nodeRenderer={nodeRenderer}\n            hasParentSibling={hasParentSibling}\n          />\n        ))}\n      </StyledTreeList>\n    ) : null;\n  }\n);\n\nconst Tree = forwardRef(\n  (\n    { nodeRenderer = DefaultNodeRenderer, ...restProps }: PropsWithoutRef<TreeProps>,\n    ref: TreeProps['ref']\n  ) => {\n    return <TreeList {...restProps} ref={ref} depth={0} nodeRenderer={nodeRenderer} />;\n  }\n) as <T extends TreeNode = TreeNode>(props: TreeProps<T> & ForwardProps) => JSX.Element | null;\n\nexport default Tree;\n"]}

package/lib/components/URL/URLDisplay.js

@@ -26,8 +26,8 @@ const generateUrlMarkup = (url) => {
     }, []);
 };
 const URLDisplay = forwardRef(({ value, displayText, variant = 'link', ...restProps }, ref) => {
-    const displayValue = value ? (displayText || generateUrlMarkup(value)) : (_jsx("span", Object.assign({ "aria-hidden": 'true' }, { children: "\u2013\u2013" }), void 0));
-    return variant === 'text' || !value ? (_jsx("span", Object.assign({ ref: ref }, restProps, { children: displayValue }), void 0)) : (_jsx(Link, Object.assign({ ref: ref }, restProps, { href: value }, { children: displayValue }), void 0));
+    const displayValue = value ? (displayText || generateUrlMarkup(value)) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0));
+    return variant === 'text' || !value ? (_jsx("span", { ref: ref, ...restProps, children: displayValue }, void 0)) : (_jsx(Link, { ref: ref, ...restProps, href: value, children: displayValue }, void 0));
 });
 export default URLDisplay;
 //# sourceMappingURL=URLDisplay.js.map

package/lib/components/URL/URLDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"URLDisplay.js","sourceRoot":"","sources":["../../../src/components/URL/URLDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AAEvF,OAAO,IAAI,MAAM,SAAS,CAAC;AAiB3B;;;;;;GAMG;AACH,MAAM,iBAAiB,GAAG,CAAC,GAAW,EAAa,EAAE;IACnD,MAAM,SAAS,GAAG,GAAG;SAClB,KAAK,CAAC,IAAI,CAAC;QACZ,6EAA6E;SAC5E,GAAG,CAAC,GAAG,CAAC,EAAE;QACT,OAAO,GAAG;aACP,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC;aACzB,OAAO,CAAC,kBAAkB,EAAE,QAAQ,CAAC;aACrC,OAAO,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IACtC,CAAC,CAAC;SACD,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElB,+HAA+H;IAC/H,OAAO,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAc,CAAC,YAAY,EAAE,IAAI,EAAE,EAAE;QACxE,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAU,YAAY,CAAC,MAAM,CAAI,CAAC,CAAC;QAC3D,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAoC,EACxF,GAA2B,EAC3B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,iBAAiB,CAAC,KAAK,CAAC,CACxC,CAAC,CAAC,CAAC,CACF,4CAAkB,MAAM,0CAAsB,CAC/C,CAAC;IACF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,6BAAM,GAAG,EAAE,GAA2B,IAAM,SAAS,cAClD,YAAY,YACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,kBAAC,GAAG,EAAE,GAA6B,IAAM,SAAS,IAAE,IAAI,EAAE,KAAK,gBACjE,YAAY,YACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\n\nimport Link from '../Link';\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface URLDisplayProps extends BaseProps {\n  /** URL address, includes scheme, 'http://', 'https://' */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Controls styling of the field.\n   * @default \"link\"\n   */\n  variant?: 'link' | 'text';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\n/**\n * Function gets the url as a string and converts it to a HTML markup with whitespace opportunity elements.\n * It helps breaking a long url correctly to avoid parent container overflow issues\n * according to \"The Chicago Manual of Style\" copywriting standard.\n * @param url input url to construct markup for\n * @returns array of nodes\n */\nconst generateUrlMarkup = (url: string): ReactNode => {\n  const markedUrl = url\n    .split('//')\n    /* Insert \\x1f (unit separator) char as a placeholder at correct position. */\n    .map(str => {\n      return str\n        .replace(/:/giu, '$&\\x1f')\n        .replace(/[/~.,\\\\-_?#%]/giu, '\\x1f$&')\n        .replace(/[=&]/giu, '\\x1f$&\\x1f');\n    })\n    .join('//\\x1f');\n\n  /* Replace unit separator character with <wbr /> element. Create an array of nodes in place of string to pass tags escaping. */\n  return markedUrl.split('\\x1f').reduce<ReactNode[]>((urlFragments, part) => {\n    urlFragments.push(part, <wbr key={urlFragments.length} />);\n    return urlFragments;\n  }, []);\n};\n\nconst URLDisplay: FunctionComponent<URLDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<URLDisplayProps>,\n    ref: URLDisplayProps['ref']\n  ) => {\n    const displayValue = value ? (\n      displayText || generateUrlMarkup(value)\n    ) : (\n      <span aria-hidden='true'>&ndash;&ndash;</span>\n    );\n    return variant === 'text' || !value ? (\n      <span ref={ref as Ref<HTMLSpanElement>} {...restProps}>\n        {displayValue}\n      </span>\n    ) : (\n      <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={value}>\n        {displayValue}\n      </Link>\n    );\n  }\n);\n\nexport default URLDisplay;\n"]}
+{"version":3,"file":"URLDisplay.js","sourceRoot":"","sources":["../../../src/components/URL/URLDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AAEvF,OAAO,IAAI,MAAM,SAAS,CAAC;AAiB3B;;;;;;GAMG;AACH,MAAM,iBAAiB,GAAG,CAAC,GAAW,EAAa,EAAE;IACnD,MAAM,SAAS,GAAG,GAAG;SAClB,KAAK,CAAC,IAAI,CAAC;QACZ,6EAA6E;SAC5E,GAAG,CAAC,GAAG,CAAC,EAAE;QACT,OAAO,GAAG;aACP,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC;aACzB,OAAO,CAAC,kBAAkB,EAAE,QAAQ,CAAC;aACrC,OAAO,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IACtC,CAAC,CAAC;SACD,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElB,+HAA+H;IAC/H,OAAO,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAc,CAAC,YAAY,EAAE,IAAI,EAAE,EAAE;QACxE,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAU,YAAY,CAAC,MAAM,CAAI,CAAC,CAAC;QAC3D,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAoC,EACxF,GAA2B,EAC3B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,iBAAiB,CAAC,KAAK,CAAC,CACxC,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,qCAAsB,CAC/C,CAAC;IACF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAA2B,KAAM,SAAS,YAClD,YAAY,WACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,KAAK,YACjE,YAAY,WACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\n\nimport Link from '../Link';\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface URLDisplayProps extends BaseProps {\n  /** URL address, includes scheme, 'http://', 'https://' */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Controls styling of the field.\n   * @default \"link\"\n   */\n  variant?: 'link' | 'text';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\n/**\n * Function gets the url as a string and converts it to a HTML markup with whitespace opportunity elements.\n * It helps breaking a long url correctly to avoid parent container overflow issues\n * according to \"The Chicago Manual of Style\" copywriting standard.\n * @param url input url to construct markup for\n * @returns array of nodes\n */\nconst generateUrlMarkup = (url: string): ReactNode => {\n  const markedUrl = url\n    .split('//')\n    /* Insert \\x1f (unit separator) char as a placeholder at correct position. */\n    .map(str => {\n      return str\n        .replace(/:/giu, '$&\\x1f')\n        .replace(/[/~.,\\\\-_?#%]/giu, '\\x1f$&')\n        .replace(/[=&]/giu, '\\x1f$&\\x1f');\n    })\n    .join('//\\x1f');\n\n  /* Replace unit separator character with <wbr /> element. Create an array of nodes in place of string to pass tags escaping. */\n  return markedUrl.split('\\x1f').reduce<ReactNode[]>((urlFragments, part) => {\n    urlFragments.push(part, <wbr key={urlFragments.length} />);\n    return urlFragments;\n  }, []);\n};\n\nconst URLDisplay: FunctionComponent<URLDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<URLDisplayProps>,\n    ref: URLDisplayProps['ref']\n  ) => {\n    const displayValue = value ? (\n      displayText || generateUrlMarkup(value)\n    ) : (\n      <span aria-hidden='true'>&ndash;&ndash;</span>\n    );\n    return variant === 'text' || !value ? (\n      <span ref={ref as Ref<HTMLSpanElement>} {...restProps}>\n        {displayValue}\n      </span>\n    ) : (\n      <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={value}>\n        {displayValue}\n      </Link>\n    );\n  }\n);\n\nexport default URLDisplay;\n"]}

package/lib/hooks/useFocusWithin.d.ts

@@ -4,6 +4,6 @@ import { RefObject } from 'react';
  * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.
  * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.
  */
-declare const useFocusWithin: <T extends Element = Element>(els: (T | RefObject<T | null> | null)[], onFocusChange?: ((isFocused: boolean, element: T | null) => void) | undefined) => boolean;
+declare const useFocusWithin: <T extends HTMLElement = HTMLElement>(els: (T | RefObject<T | null> | null)[], onFocusChange?: ((isFocused: boolean, element: T | null) => void) | undefined) => boolean;
 export default useFocusWithin;
 //# sourceMappingURL=useFocusWithin.d.ts.map

package/lib/hooks/useFocusWithin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAM5E;;;;GAIG;AACH,QAAA,MAAM,cAAc,sGAEU,OAAO,wBAAwB,IAAI,kBAC9D,OA8EF,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAM5E;;;;GAIG;AACH,QAAA,MAAM,cAAc,8GAEU,OAAO,wBAAwB,IAAI,kBAC9D,OA0FF,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/hooks/useFocusWithin.js

@@ -9,20 +9,24 @@ import useOuterEvent from './useOuterEvent';
 const useFocusWithin = (els, onFocusChange) => {
     const [hasFocus, setFocus] = useState(false);
     const focusedElRef = useRef(null);
+    const blurTimerRef = useRef();
     const elsRef = useRef(els);
     elsRef.current = els;
-    const onBlur = useCallback((e) => {
+    const onBlur = useCallback(({ relatedTarget }) => {
         if (!hasFocus)
             return;
         const elements = normalizeElements(elsRef.current);
-        // changing focus to another relevant child doesn't count
-        const focusedEl = elements.find(el => el?.contains(e.relatedTarget));
-        if (focusedEl) {
-            // ... just update the currently focused item
-            focusedElRef.current = focusedEl;
-            return;
+        if (relatedTarget instanceof Node) {
+            // changing focus to another relevant child doesn't count
+            const focusedEl = elements.find(el => el?.contains(relatedTarget));
+            if (focusedEl) {
+                // ... just update the currently focused item
+                focusedElRef.current = focusedEl;
+                return;
+            }
         }
-        const timerId = setTimeout(() => {
+        clearTimeout(blurTimerRef.current);
+        blurTimerRef.current = setTimeout(() => {
             if (!elements.some(el => {
                 return el?.contains(document.activeElement);
             })) {
@@ -31,15 +35,12 @@ const useFocusWithin = (els, onFocusChange) => {
                 focusedElRef.current = null;
             }
         });
-        return () => {
-            if (timerId)
-                clearTimeout(timerId);
-        };
     }, [hasFocus, onFocusChange]);
-    const onFocus = useCallback((e) => {
+    const onFocus = useCallback(({ currentTarget }) => {
+        clearTimeout(blurTimerRef.current);
         if (!hasFocus) {
             setFocus(true);
-            const targetEl = e.currentTarget;
+            const targetEl = currentTarget;
             onFocusChange?.(true, targetEl);
             focusedElRef.current = targetEl;
         }
@@ -53,17 +54,21 @@ const useFocusWithin = (els, onFocusChange) => {
     }, [onFocusChange, hasFocus]));
     useEffect(() => {
         const elements = normalizeElements(els);
-        elements.forEach((el) => {
+        elements.forEach(el => {
             el?.addEventListener('focusin', onFocus);
             el?.addEventListener('focusout', onBlur);
         });
         return () => {
-            elements.forEach((el) => {
+            elements.forEach(el => {
                 el?.removeEventListener('focusin', onFocus);
                 el?.removeEventListener('focusout', onBlur);
             });
         };
     }, [els, onFocus, onBlur]);
+    // Clear timeout when component un-mounts.
+    useEffect(() => () => {
+        clearTimeout(blurTimerRef.current);
+    }, []);
     return hasFocus;
 };
 export default useFocusWithin;

package/lib/hooks/useFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, RefObject, useCallback, useRef } from 'react';\n\nimport { normalizeElements } from '../utils';\n\nimport useOuterEvent from './useOuterEvent';\n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends Element = Element>(\n  els: (T | null | RefObject<T | null>)[],\n  onFocusChange?: (isFocused: boolean, element: T | null) => void\n): boolean => {\n  const [hasFocus, setFocus] = useState(false);\n  const focusedElRef = useRef<T | null>(null);\n\n  const elsRef = useRef(els);\n  elsRef.current = els;\n\n  const onBlur = useCallback(\n    (e: Event) => {\n      if (!hasFocus) return;\n\n      const elements = normalizeElements(elsRef.current);\n      // changing focus to another relevant child doesn't count\n      const focusedEl = elements.find(el => el?.contains((e as FocusEvent).relatedTarget as Node));\n      if (focusedEl) {\n        // ... just update the currently focused item\n        focusedElRef.current = focusedEl;\n        return;\n      }\n      const timerId = setTimeout(() => {\n        if (\n          !elements.some(el => {\n            return el?.contains(document.activeElement);\n          })\n        ) {\n          setFocus(false);\n          onFocusChange?.(false, focusedElRef.current);\n          focusedElRef.current = null;\n        }\n      });\n\n      return () => {\n        if (timerId) clearTimeout(timerId);\n      };\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  const onFocus = useCallback(\n    (e: Event) => {\n      if (!hasFocus) {\n        setFocus(true);\n        const targetEl = (e as FocusEvent).currentTarget as T;\n        onFocusChange?.(true, targetEl);\n        focusedElRef.current = targetEl;\n      }\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  useOuterEvent(\n    'mouseup',\n    els,\n    useCallback(() => {\n      if (hasFocus) {\n        setFocus(false);\n        onFocusChange?.(false, focusedElRef.current);\n        focusedElRef.current = null;\n      }\n    }, [onFocusChange, hasFocus])\n  );\n\n  useEffect(() => {\n    const elements = normalizeElements(els);\n\n    elements.forEach((el: T | null) => {\n      el?.addEventListener('focusin', onFocus);\n      el?.addEventListener('focusout', onBlur);\n    });\n    return () => {\n      elements.forEach((el: T | null) => {\n        el?.removeEventListener('focusin', onFocus);\n        el?.removeEventListener('focusout', onBlur);\n      });\n    };\n  }, [els, onFocus, onBlur]);\n\n  return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}
+{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, RefObject, useCallback, useRef } from 'react';\n\nimport { normalizeElements } from '../utils';\n\nimport useOuterEvent from './useOuterEvent';\n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends HTMLElement = HTMLElement>(\n  els: (T | null | RefObject<T | null>)[],\n  onFocusChange?: (isFocused: boolean, element: T | null) => void\n): boolean => {\n  const [hasFocus, setFocus] = useState(false);\n  const focusedElRef = useRef<T | null>(null);\n  const blurTimerRef = useRef<number>();\n\n  const elsRef = useRef(els);\n  elsRef.current = els;\n\n  const onBlur = useCallback(\n    ({ relatedTarget }: FocusEvent) => {\n      if (!hasFocus) return;\n\n      const elements = normalizeElements(elsRef.current);\n\n      if (relatedTarget instanceof Node) {\n        // changing focus to another relevant child doesn't count\n        const focusedEl = elements.find(el => el?.contains(relatedTarget));\n        if (focusedEl) {\n          // ... just update the currently focused item\n          focusedElRef.current = focusedEl;\n          return;\n        }\n      }\n\n      clearTimeout(blurTimerRef.current);\n      blurTimerRef.current = setTimeout(() => {\n        if (\n          !elements.some(el => {\n            return el?.contains(document.activeElement);\n          })\n        ) {\n          setFocus(false);\n          onFocusChange?.(false, focusedElRef.current);\n          focusedElRef.current = null;\n        }\n      });\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  const onFocus = useCallback(\n    ({ currentTarget }: FocusEvent) => {\n      clearTimeout(blurTimerRef.current);\n\n      if (!hasFocus) {\n        setFocus(true);\n        const targetEl = currentTarget as T;\n        onFocusChange?.(true, targetEl);\n        focusedElRef.current = targetEl;\n      }\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  useOuterEvent(\n    'mouseup',\n    els,\n    useCallback(() => {\n      if (hasFocus) {\n        setFocus(false);\n        onFocusChange?.(false, focusedElRef.current);\n        focusedElRef.current = null;\n      }\n    }, [onFocusChange, hasFocus])\n  );\n\n  useEffect(() => {\n    const elements = normalizeElements(els);\n\n    elements.forEach(el => {\n      el?.addEventListener('focusin', onFocus);\n      el?.addEventListener('focusout', onBlur);\n    });\n    return () => {\n      elements.forEach(el => {\n        el?.removeEventListener('focusin', onFocus);\n        el?.removeEventListener('focusout', onBlur);\n      });\n    };\n  }, [els, onFocus, onBlur]);\n\n  // Clear timeout when component un-mounts.\n  useEffect(\n    () => () => {\n      clearTimeout(blurTimerRef.current);\n    },\n    []\n  );\n\n  return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}

package/lib/hooks/useI18n.d.ts

@@ -334,6 +334,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     edit: string;
     edit_noun: string;
     edited: string;
+    edit_details: string;
     preview: string;
     delete: string;
     delete_noun: string;
@@ -379,6 +380,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
         many: string;
         other: string;
     };
+    more_count: string;
     empty_search: string;
     new_messages: string;
     earlier_transcripts: string;
@@ -488,7 +490,6 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     feed_private_post: string;
     feed_public_post: string;
     feed_recipients: string;
-    feed_more_count: string;
     sentiment_positive: string;
     sentiment_negative: string;
     sentiment_neutral: string;

package/lib/hooks/useI18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/i18n/default.json

@@ -330,6 +330,7 @@
     "edit": "Edit",
     "edit_noun": "Edit {0}",
     "edited": "Edited",
+    "edit_details": "Edit details",
     "preview": "Preview",
     "delete": "Delete",
     "delete_noun": "Delete {0}",
@@ -375,6 +376,7 @@
         "many": "{0} results",
         "other": "{0} results"
     },
+    "more_count": "{0} more…",
     "empty_search": "Enter a search term",
     "new_messages": "New messages",
     "earlier_transcripts": "Earlier transcripts",
@@ -484,7 +486,6 @@
     "feed_private_post": "Private post",
     "feed_public_post": "Public post",
     "feed_recipients": "Recipients",
-    "feed_more_count": "{0} more…",
     "sentiment_positive": "Positive",
     "sentiment_negative": "Negative",
     "sentiment_neutral": "Neutral",