@pega/cosmos-react-core 8.0.0-build.3.2 → 8.0.0-build.30.0

package/lib/components/Dialog/Dialog.styles.d.ts

@@ -2,5 +2,5 @@ export declare const StyledChildrenWrap: import("styled-components").StyledCompo
 export declare const StyledDialogHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDialogContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDialogFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDialog: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("../Popover").PopoverProps<Modifiers> & import("../..").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDialog: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("../Popover").PopoverProps<Modifiers> & import("../..").ForwardProps) => import("react").ReactElement | null), import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=Dialog.styles.d.ts.map

package/lib/components/Dialog/Dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,mBAAmB,yGAgB9B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,YAAY,8TAcvB,CAAC"}
+{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,mBAAmB,yGAgB9B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,YAAY,oQAcvB,CAAC"}

package/lib/components/Dialog/Dialog.types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { OmitStrict } from '../../types';
+import type { OmitStrict, WithAttributes } from '../../types';
 import type { PopoverProps } from '../Popover';
 import type { ProgressProps } from '../Progress';
 export interface BaseDialogProps {
@@ -27,22 +27,22 @@ export interface BaseDialogProps {
      * Placement may auto adjust based on screen position and other layout variables.
      */
     placement?: PopoverProps['placement'];
+    /**
+     * Optionally determines whether to trap the focus inside the dialog, preventing it from being moved outside until the dialog is closed.
+     * @default false
+     */
+    focusTrap?: boolean;
     /** Reference to the dialog's root element. */
     ref?: PopoverProps['ref'];
 }
-export type DialogProps = BaseDialogProps & {
-    /** The DOM id for the dialog's visible labelling element. */
-    labelledbyId?: string;
-    /** Provide a contextually sufficient aria label if a visible labelling element is not present. */
-    ariaLabel?: string;
-};
+export type DialogProps = WithAttributes<'div', BaseDialogProps>;
 /** A simple callback or an object to customize a subset button properties. */
 type FormAction = (() => void) | {
     text?: string;
     disabled?: boolean;
     handler: () => void;
 };
-export type FormDialogProps = BaseDialogProps & {
+export type FormDialogProps = WithAttributes<'div', BaseDialogProps & {
     /** Called when the user presses escape or clicks away. */
     onDismiss?: () => void;
     /**
@@ -59,13 +59,13 @@ export type FormDialogProps = BaseDialogProps & {
 } & ({
     /** A string to indicate context for the dialog. The dialog will be labelled by this value. */
     heading: string;
-    ariaLabel?: never;
+    'aria-label'?: never;
 } | {
-    /** Provide a contextually sufficient aria label if a visible heading is not provided. */
     heading?: never;
-    ariaLabel: string;
-});
-export interface InfoDialogProps extends OmitStrict<BaseDialogProps, 'arrow'> {
+    /** Provide a contextually sufficient aria label if a visible heading is not provided. */
+    'aria-label': string;
+})>;
+export type InfoDialogProps = WithAttributes<'div', OmitStrict<BaseDialogProps, 'arrow'> & {
     /** A string or summary item like props to indicate context for the dialog. The dialog will be labelled by either the heading element or primary property. */
     heading?: string | {
         primary: string;
@@ -74,7 +74,7 @@ export interface InfoDialogProps extends OmitStrict<BaseDialogProps, 'arrow'> {
     };
     /** Renders a standard design system dismiss button to close the dialog when the user clicks this button, presses escape or clicks away. */
     onDismiss: () => void;
-}
+}>;
 /**
  * Components which render Dialog internally may need to offer some control to consuming components.
  * Use this interface to offer an imperative handle for shared control.

package/lib/components/Dialog/Dialog.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAE9B;;;OAGG;IACH,MAAM,EAAE,WAAW,CAAC;IAEpB,6IAA6I;IAC7I,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IAEnC,yIAAyI;IACzI,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE9C,iGAAiG;IACjG,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAEhC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IAEpC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IAEtC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,8EAA8E;AAC9E,KAAK,UAAU,GACX,CAAC,MAAM,IAAI,CAAC,GACZ;IACE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEN,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG;IAC9C,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;;;OAIG;IACH,QAAQ,EAAE,UAAU,CAAC;IAErB;;;OAGG;IACH,QAAQ,EAAE,UAAU,CAAC;CACtB,GAAG,CACE;IACE,8FAA8F;IAC9F,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,GACD;IACE,yFAAyF;IACzF,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB,CACJ,CAAC;AAEJ,MAAM,WAAW,eAAgB,SAAQ,UAAU,CAAC,eAAe,EAAE,OAAO,CAAC;IAC3E,6JAA6J;IAC7J,OAAO,CAAC,EACJ,MAAM,GACN;QACE,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,SAAS,CAAC;KACpB,CAAC;IAEN,2IAA2I;IAC3I,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB"}
+{"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAE9B;;;OAGG;IACH,MAAM,EAAE,WAAW,CAAC;IAEpB,6IAA6I;IAC7I,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IAEnC,yIAAyI;IACzI,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE9C,iGAAiG;IACjG,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAEhC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IAEpC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;AAEjE,8EAA8E;AAC9E,KAAK,UAAU,GACX,CAAC,MAAM,IAAI,CAAC,GACZ;IACE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEN,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,KAAK,EACL,eAAe,GAAG;IAChB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB;;;;OAIG;IACH,QAAQ,EAAE,UAAU,CAAC;IAErB;;;OAGG;IACH,QAAQ,EAAE,UAAU,CAAC;CACtB,GAAG,CACE;IACE,8FAA8F;IAC9F,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,yFAAyF;IACzF,YAAY,EAAE,MAAM,CAAC;CACtB,CACJ,CACJ,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,KAAK,EACL,UAAU,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG;IACrC,6JAA6J;IAC7J,OAAO,CAAC,EACJ,MAAM,GACN;QACE,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,SAAS,CAAC;KACpB,CAAC;IAEN,2IAA2I;IAC3I,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB"}

package/lib/components/Dialog/Dialog.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.types.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { OmitStrict } from '../../types';\nimport type { PopoverProps } from '../Popover';\nimport type { ProgressProps } from '../Progress';\n\nexport interface BaseDialogProps {\n  /**\n   * Certain uses of dialogs require a linear edge with an input like control.\n   * There an arrow is not desired.\n   * @default true\n   */\n  arrow?: PopoverProps['arrow'];\n\n  /**\n   * An element the dialog is contextually and visually associated with. Normally a triggering button.\n   * Components rendering Dialog should mount and unmount instances based on this value.\n   */\n  target: HTMLElement;\n\n  /** Content for the dialog. Avoid form control buttons within as those should be rendered by way of onCancel and onSubmit with FormDialog. */\n  children: PopoverProps['children'];\n\n  /** If there is a progress state either on opening, or after submit, you must indicate as such. A custom message is supported as well. */\n  progress?: boolean | ProgressProps['message'];\n\n  /** Optionally render the dialog element at the end of the body or within a specified element. */\n  portal?: PopoverProps['portal'];\n\n  /** Positioning strategy for solving rendering scenarios. */\n  strategy?: PopoverProps['strategy'];\n\n  /**\n   * Intended positioning placement for the dialog element.\n   * Placement may auto adjust based on screen position and other layout variables.\n   */\n  placement?: PopoverProps['placement'];\n\n  /** Reference to the dialog's root element. */\n  ref?: PopoverProps['ref'];\n}\n\nexport type DialogProps = BaseDialogProps & {\n  /** The DOM id for the dialog's visible labelling element. */\n  labelledbyId?: string;\n\n  /** Provide a contextually sufficient aria label if a visible labelling element is not present. */\n  ariaLabel?: string;\n};\n\n/** A simple callback or an object to customize a subset button properties. */\ntype FormAction =\n  | (() => void)\n  | {\n      text?: string;\n      disabled?: boolean;\n      handler: () => void;\n    };\n\nexport type FormDialogProps = BaseDialogProps & {\n  /** Called when the user presses escape or clicks away. */\n  onDismiss?: () => void;\n\n  /**\n   * Renders a standard design system cancel button.\n   * If onDismiss is not provided, onCancel will be invoked when the user presses the Escape key or clicks outside of the dialog.\n   * Invocation of this indicates the user wishes to cancel any changes and close the dialog.\n   */\n  onCancel: FormAction;\n\n  /**\n   * Renders a standard design system submit button.\n   * Invocation of this indicates the user wishes to submit any changes and close the dialog. Please consider progress states after submit.\n   */\n  onSubmit: FormAction;\n} & (\n    | {\n        /** A string to indicate context for the dialog. The dialog will be labelled by this value. */\n        heading: string;\n        ariaLabel?: never;\n      }\n    | {\n        /** Provide a contextually sufficient aria label if a visible heading is not provided. */\n        heading?: never;\n        ariaLabel: string;\n      }\n  );\n\nexport interface InfoDialogProps extends OmitStrict<BaseDialogProps, 'arrow'> {\n  /** A string or summary item like props to indicate context for the dialog. The dialog will be labelled by either the heading element or primary property. */\n  heading?:\n    | string\n    | {\n        primary: string;\n        secondary?: string;\n        visual?: ReactNode;\n      };\n\n  /** Renders a standard design system dismiss button to close the dialog when the user clicks this button, presses escape or clicks away. */\n  onDismiss: () => void;\n}\n\n/**\n * Components which render Dialog internally may need to offer some control to consuming components.\n * Use this interface to offer an imperative handle for shared control.\n */\nexport interface DialogHandleValue {\n  open: () => void;\n  close: () => void;\n}\n"]}
+{"version":3,"file":"Dialog.types.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { OmitStrict, WithAttributes } from '../../types';\nimport type { PopoverProps } from '../Popover';\nimport type { ProgressProps } from '../Progress';\n\nexport interface BaseDialogProps {\n  /**\n   * Certain uses of dialogs require a linear edge with an input like control.\n   * There an arrow is not desired.\n   * @default true\n   */\n  arrow?: PopoverProps['arrow'];\n\n  /**\n   * An element the dialog is contextually and visually associated with. Normally a triggering button.\n   * Components rendering Dialog should mount and unmount instances based on this value.\n   */\n  target: HTMLElement;\n\n  /** Content for the dialog. Avoid form control buttons within as those should be rendered by way of onCancel and onSubmit with FormDialog. */\n  children: PopoverProps['children'];\n\n  /** If there is a progress state either on opening, or after submit, you must indicate as such. A custom message is supported as well. */\n  progress?: boolean | ProgressProps['message'];\n\n  /** Optionally render the dialog element at the end of the body or within a specified element. */\n  portal?: PopoverProps['portal'];\n\n  /** Positioning strategy for solving rendering scenarios. */\n  strategy?: PopoverProps['strategy'];\n\n  /**\n   * Intended positioning placement for the dialog element.\n   * Placement may auto adjust based on screen position and other layout variables.\n   */\n  placement?: PopoverProps['placement'];\n  /**\n   * Optionally determines whether to trap the focus inside the dialog, preventing it from being moved outside until the dialog is closed.\n   * @default false\n   */\n  focusTrap?: boolean;\n\n  /** Reference to the dialog's root element. */\n  ref?: PopoverProps['ref'];\n}\n\nexport type DialogProps = WithAttributes<'div', BaseDialogProps>;\n\n/** A simple callback or an object to customize a subset button properties. */\ntype FormAction =\n  | (() => void)\n  | {\n      text?: string;\n      disabled?: boolean;\n      handler: () => void;\n    };\n\nexport type FormDialogProps = WithAttributes<\n  'div',\n  BaseDialogProps & {\n    /** Called when the user presses escape or clicks away. */\n    onDismiss?: () => void;\n\n    /**\n     * Renders a standard design system cancel button.\n     * If onDismiss is not provided, onCancel will be invoked when the user presses the Escape key or clicks outside of the dialog.\n     * Invocation of this indicates the user wishes to cancel any changes and close the dialog.\n     */\n    onCancel: FormAction;\n\n    /**\n     * Renders a standard design system submit button.\n     * Invocation of this indicates the user wishes to submit any changes and close the dialog. Please consider progress states after submit.\n     */\n    onSubmit: FormAction;\n  } & (\n      | {\n          /** A string to indicate context for the dialog. The dialog will be labelled by this value. */\n          heading: string;\n          'aria-label'?: never;\n        }\n      | {\n          heading?: never;\n          /** Provide a contextually sufficient aria label if a visible heading is not provided. */\n          'aria-label': string;\n        }\n    )\n>;\n\nexport type InfoDialogProps = WithAttributes<\n  'div',\n  OmitStrict<BaseDialogProps, 'arrow'> & {\n    /** A string or summary item like props to indicate context for the dialog. The dialog will be labelled by either the heading element or primary property. */\n    heading?:\n      | string\n      | {\n          primary: string;\n          secondary?: string;\n          visual?: ReactNode;\n        };\n\n    /** Renders a standard design system dismiss button to close the dialog when the user clicks this button, presses escape or clicks away. */\n    onDismiss: () => void;\n  }\n>;\n\n/**\n * Components which render Dialog internally may need to offer some control to consuming components.\n * Use this interface to offer an imperative handle for shared control.\n */\nexport interface DialogHandleValue {\n  open: () => void;\n  close: () => void;\n}\n"]}

package/lib/components/Dialog/FormDialog.d.ts

@@ -1,10 +1,6 @@
-import type { FC, HTMLAttributes } from 'react';
-import type { OmitStrict } from '../../types';
+import type { PropsWithoutRef } from 'react';
 import type { FormDialogProps } from './Dialog.types';
-export declare const StyledFormDialog: import("styled-components").StyledComponent<FC<import("./Dialog.types").BaseDialogProps & {
-    labelledbyId?: string | undefined;
-    ariaLabel?: string | undefined;
-} & HTMLAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
-declare const FormDialog: FC<FormDialogProps & OmitStrict<HTMLAttributes<HTMLDivElement>, 'onSubmit'>>;
+export declare const StyledFormDialog: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("./Dialog.types").DialogProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+declare const FormDialog: import("react").ForwardRefExoticComponent<PropsWithoutRef<FormDialogProps> & import("react").RefAttributes<HTMLDivElement>>;
 export default FormDialog;
 //# sourceMappingURL=FormDialog.d.ts.map

package/lib/components/Dialog/FormDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAejE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAS9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,eAAO,MAAM,gBAAgB;;;yFAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,UAAU,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAsJzF,CAAC;AAEL,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FormDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAiB7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,eAAO,MAAM,gBAAgB,gPAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,6HA+Jf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Dialog/FormDialog.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect } from 'react';
+import { forwardRef, useRef, useEffect, useLayoutEffect } from 'react';
 import styled from 'styled-components';
-import { useConsolidatedRef, useEscape, useFocusTrap, useI18n, useOuterEvent, useUID } from '../../hooks';
-import { getFocusables } from '../../utils';
+import { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';
+import { getActiveElement, getFocusables } from '../../utils';
 import Button from '../Button';
 import Text from '../Text';
 import Progress from '../Progress';
@@ -10,7 +10,7 @@ import Flex from '../Flex';
 import { StyledChildrenWrap, StyledDialogContent, StyledDialogFooter, StyledDialogHeader } from './Dialog.styles';
 import Dialog from './Dialog';
 export const StyledFormDialog = styled(Dialog) ``;
-const FormDialog = forwardRef(function FormDialog({ arrow = true, target, heading, ariaLabel, children, progress, onDismiss, onCancel, onSubmit, ...restProps }, ref) {
+const FormDialog = forwardRef(function FormDialog({ arrow = true, target, heading, 'aria-label': ariaLabel, children, progress, onDismiss, onCancel, onSubmit, ...restProps }, ref) {
     const t = useI18n();
     const headingId = useUID();
     const dialogRef = useConsolidatedRef(ref);
@@ -45,7 +45,15 @@ const FormDialog = forwardRef(function FormDialog({ arrow = true, target, headin
             onCancelHandler();
         }
     });
-    useFocusTrap(dialogRef, false);
+    // Using layout effect to capture the focused element prior to dialog elements taking focus.
+    useLayoutEffect(() => {
+        const initiatorElement = getActiveElement();
+        return () => {
+            if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {
+                initiatorElement.focus();
+            }
+        };
+    }, []);
     useEffect(() => {
         if (!progress) {
             setFocus();
@@ -65,13 +73,12 @@ const FormDialog = forwardRef(function FormDialog({ arrow = true, target, headin
         };
         target.addEventListener('click', closeDialog);
         return () => {
-            if (document.contains(target)) {
-                target.focus();
-            }
             target.removeEventListener('click', closeDialog);
         };
     }, []);
-    return (_jsxs(StyledFormDialog, { ...restProps, ...(heading === undefined ? { ariaLabel } : { labelledbyId: headingId }), arrow: arrow, target: target, progress: progress, ref: dialogRef, children: [heading !== undefined && (_jsx(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2 }, item: { shrink: 0 }, as: StyledDialogHeader, children: _jsx(Text, { id: headingId, variant: 'h2', children: heading }) })), _jsxs(Flex, { item: { grow: 1 }, as: StyledDialogContent, ref: dialogContentRef, children: [children && (_jsx(StyledChildrenWrap, { inert: progress ? '' : undefined, children: children })), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: 'local', message: typeof progress === 'string' ? progress : undefined })] }), _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2 }, item: { shrink: 0 }, as: StyledDialogFooter, children: [_jsx(Button, { onClick: () => {
+    return (_jsxs(StyledFormDialog, { ...restProps, ...(heading === undefined
+            ? { 'aria-label': ariaLabel }
+            : { 'aria-labelledby': headingId }), arrow: arrow, target: target, progress: progress, ref: dialogRef, children: [heading !== undefined && (_jsx(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2 }, item: { shrink: 0 }, as: StyledDialogHeader, children: _jsx(Text, { id: headingId, variant: 'h2', children: heading }) })), _jsxs(Flex, { item: { grow: 1 }, as: StyledDialogContent, ref: dialogContentRef, children: [children && (_jsx(StyledChildrenWrap, { inert: progress ? '' : undefined, children: children })), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: 'local', message: typeof progress === 'string' ? progress : undefined })] }), _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2 }, item: { shrink: 0 }, as: StyledDialogFooter, children: [_jsx(Button, { onClick: () => {
                             onCancelHandler();
                         }, disabled: typeof onCancel !== 'function' ? onCancel.disabled : undefined, ref: cancelButtonRef, children: typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => {
                             (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();

package/lib/components/Dialog/FormDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef, FC, HTMLAttributes } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport type { OmitStrict } from '../../types';\nimport Flex from '../Flex';\n\nimport {\n  StyledChildrenWrap,\n  StyledDialogContent,\n  StyledDialogFooter,\n  StyledDialogHeader\n} from './Dialog.styles';\nimport type { FormDialogProps } from './Dialog.types';\nimport Dialog from './Dialog';\n\nexport const StyledFormDialog = styled(Dialog)``;\n\nconst FormDialog: FC<FormDialogProps & OmitStrict<HTMLAttributes<HTMLDivElement>, 'onSubmit'>> =\n  forwardRef(function FormDialog(\n    {\n      arrow = true,\n      target,\n      heading,\n      ariaLabel,\n      children,\n      progress,\n      onDismiss,\n      onCancel,\n      onSubmit,\n      ...restProps\n    }: PropsWithoutRef<FormDialogProps>,\n    ref: FormDialogProps['ref']\n  ) {\n    const t = useI18n();\n    const headingId = useUID();\n    const dialogRef = useConsolidatedRef(ref);\n    const dialogContentRef = useRef<HTMLDivElement>(null);\n    const cancelButtonRef = useRef<HTMLButtonElement>(null);\n\n    const setFocus = () => {\n      if (progress) return;\n\n      const focusables = getFocusables(dialogRef);\n\n      const focusable =\n        focusables.find(el => {\n          return dialogContentRef.current?.contains(el);\n        }) ??\n        cancelButtonRef.current ??\n        focusables[0];\n\n      focusable?.focus();\n    };\n\n    const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;\n\n    useEscape(\n      e => {\n        if (onDismiss) {\n          onDismiss();\n        } else {\n          onCancelHandler();\n        }\n        e.stopPropagation();\n      },\n      dialogRef,\n      [onDismiss, onCancelHandler]\n    );\n\n    useOuterEvent('mousedown', [target, dialogRef], () => {\n      if (onDismiss) {\n        onDismiss();\n      } else {\n        onCancelHandler();\n      }\n    });\n\n    useFocusTrap(dialogRef, false);\n\n    useEffect(() => {\n      if (!progress) {\n        setFocus();\n      }\n    }, [progress]);\n\n    useEffect(() => {\n      const closeDialog = () => {\n        setTimeout(() => {\n          if (onDismiss) {\n            onDismiss();\n          } else {\n            onCancelHandler();\n          }\n          // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n        }, 0);\n      };\n\n      target.addEventListener('click', closeDialog);\n\n      return () => {\n        if (document.contains(target)) {\n          target.focus();\n        }\n        target.removeEventListener('click', closeDialog);\n      };\n    }, []);\n\n    return (\n      <StyledFormDialog\n        {...restProps}\n        {...(heading === undefined ? { ariaLabel } : { labelledbyId: headingId })}\n        arrow={arrow}\n        target={target}\n        progress={progress}\n        ref={dialogRef}\n      >\n        {heading !== undefined && (\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n            item={{ shrink: 0 }}\n            as={StyledDialogHeader}\n          >\n            <Text id={headingId} variant='h2'>\n              {heading}\n            </Text>\n          </Flex>\n        )}\n\n        <Flex item={{ grow: 1 }} as={StyledDialogContent} ref={dialogContentRef}>\n          {children && (\n            <StyledChildrenWrap inert={progress ? '' : undefined}>{children}</StyledChildrenWrap>\n          )}\n          <Progress\n            visible={!!progress}\n            focusOnVisible\n            placement='local'\n            message={typeof progress === 'string' ? progress : undefined}\n          />\n        </Flex>\n\n        <Flex\n          container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n          item={{ shrink: 0 }}\n          as={StyledDialogFooter}\n        >\n          <Button\n            onClick={() => {\n              onCancelHandler();\n            }}\n            disabled={typeof onCancel !== 'function' ? onCancel.disabled : undefined}\n            ref={cancelButtonRef}\n          >\n            {typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel')}\n          </Button>\n\n          <Button\n            variant='primary'\n            onClick={() => {\n              (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();\n            }}\n            disabled={typeof onSubmit !== 'function' ? onSubmit.disabled : undefined}\n          >\n            {typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit')}\n          </Button>\n        </Flex>\n      </StyledFormDialog>\n    );\n  });\n\nexport default FormDialog;\n"]}
+{"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,EAAE,CAAC;AAEjD,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,KAAK,GAAG,IAAI,EACZ,MAAM,EACN,OAAO,EACP,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAExD,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,QAAQ;YAAE,OAAO;QAErB,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;QAE5C,MAAM,SAAS,GACb,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnB,OAAO,gBAAgB,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QAChD,CAAC,CAAC;YACF,eAAe,CAAC,OAAO;YACvB,UAAU,CAAC,CAAC,CAAC,CAAC;QAEhB,SAAS,EAAE,KAAK,EAAE,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;IAErF,SAAS,CACP,CAAC,CAAC,EAAE;QACF,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,EAAE,CAAC;QACd,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;QACD,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,EACD,SAAS,EACT,CAAC,SAAS,EAAE,eAAe,CAAC,CAC7B,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE;QACnD,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,EAAE,CAAC;QACd,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,4FAA4F;IAC5F,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;QAE5C,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,YAAY,WAAW,IAAI,gBAAgB,CAAC,WAAW,EAAE,CAAC;gBAC5E,gBAAgB,CAAC,KAAK,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,SAAS,EAAE,CAAC;oBACd,SAAS,EAAE,CAAC;gBACd,CAAC;qBAAM,CAAC;oBACN,eAAe,EAAE,CAAC;gBACpB,CAAC;gBACD,yGAAyG;YAC3G,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAE9C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,gBAAgB,OACX,SAAS,KACT,CAAC,OAAO,KAAK,SAAS;YACxB,CAAC,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE;YAC7B,CAAC,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,EACrC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,SAAS,aAEb,OAAO,KAAK,SAAS,IAAI,CACxB,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,EAC/D,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,kBAAkB,YAEtB,KAAC,IAAI,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAC,IAAI,YAC9B,OAAO,GACH,GACF,CACR,EAED,MAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE,GAAG,EAAE,gBAAgB,aACpE,QAAQ,IAAI,CACX,KAAC,kBAAkB,IAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YAAG,QAAQ,GAAsB,CACtF,EACD,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,cAAc,QACd,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAC5D,IACG,EAEP,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,EAC/D,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,kBAAkB,aAEtB,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;4BACZ,eAAe,EAAE,CAAC;wBACpB,CAAC,EACD,QAAQ,EAAE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACxE,GAAG,EAAE,eAAe,YAEnB,OAAO,QAAQ,KAAK,UAAU,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GACvE,EAET,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE;4BACZ,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;wBACnE,CAAC,EACD,QAAQ,EAAE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAEvE,OAAO,QAAQ,KAAK,UAAU,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GACvE,IACJ,IACU,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, useRef, useEffect, useLayoutEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';\nimport { getActiveElement, getFocusables } from '../../utils';\nimport Button from '../Button';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport type { RefElement } from '../../types';\nimport Flex from '../Flex';\n\nimport {\n  StyledChildrenWrap,\n  StyledDialogContent,\n  StyledDialogFooter,\n  StyledDialogHeader\n} from './Dialog.styles';\nimport type { FormDialogProps } from './Dialog.types';\nimport Dialog from './Dialog';\n\nexport const StyledFormDialog = styled(Dialog)``;\n\nconst FormDialog = forwardRef<RefElement<FormDialogProps>, PropsWithoutRef<FormDialogProps>>(\n  function FormDialog(\n    {\n      arrow = true,\n      target,\n      heading,\n      'aria-label': ariaLabel,\n      children,\n      progress,\n      onDismiss,\n      onCancel,\n      onSubmit,\n      ...restProps\n    },\n    ref\n  ) {\n    const t = useI18n();\n    const headingId = useUID();\n    const dialogRef = useConsolidatedRef(ref);\n    const dialogContentRef = useRef<HTMLDivElement>(null);\n    const cancelButtonRef = useRef<HTMLButtonElement>(null);\n\n    const setFocus = () => {\n      if (progress) return;\n\n      const focusables = getFocusables(dialogRef);\n\n      const focusable =\n        focusables.find(el => {\n          return dialogContentRef.current?.contains(el);\n        }) ??\n        cancelButtonRef.current ??\n        focusables[0];\n\n      focusable?.focus();\n    };\n\n    const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;\n\n    useEscape(\n      e => {\n        if (onDismiss) {\n          onDismiss();\n        } else {\n          onCancelHandler();\n        }\n        e.stopPropagation();\n      },\n      dialogRef,\n      [onDismiss, onCancelHandler]\n    );\n\n    useOuterEvent('mousedown', [target, dialogRef], () => {\n      if (onDismiss) {\n        onDismiss();\n      } else {\n        onCancelHandler();\n      }\n    });\n\n    // Using layout effect to capture the focused element prior to dialog elements taking focus.\n    useLayoutEffect(() => {\n      const initiatorElement = getActiveElement();\n\n      return () => {\n        if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n          initiatorElement.focus();\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      if (!progress) {\n        setFocus();\n      }\n    }, [progress]);\n\n    useEffect(() => {\n      const closeDialog = () => {\n        setTimeout(() => {\n          if (onDismiss) {\n            onDismiss();\n          } else {\n            onCancelHandler();\n          }\n          // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n        }, 0);\n      };\n\n      target.addEventListener('click', closeDialog);\n\n      return () => {\n        target.removeEventListener('click', closeDialog);\n      };\n    }, []);\n\n    return (\n      <StyledFormDialog\n        {...restProps}\n        {...(heading === undefined\n          ? { 'aria-label': ariaLabel }\n          : { 'aria-labelledby': headingId })}\n        arrow={arrow}\n        target={target}\n        progress={progress}\n        ref={dialogRef}\n      >\n        {heading !== undefined && (\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n            item={{ shrink: 0 }}\n            as={StyledDialogHeader}\n          >\n            <Text id={headingId} variant='h2'>\n              {heading}\n            </Text>\n          </Flex>\n        )}\n\n        <Flex item={{ grow: 1 }} as={StyledDialogContent} ref={dialogContentRef}>\n          {children && (\n            <StyledChildrenWrap inert={progress ? '' : undefined}>{children}</StyledChildrenWrap>\n          )}\n          <Progress\n            visible={!!progress}\n            focusOnVisible\n            placement='local'\n            message={typeof progress === 'string' ? progress : undefined}\n          />\n        </Flex>\n\n        <Flex\n          container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n          item={{ shrink: 0 }}\n          as={StyledDialogFooter}\n        >\n          <Button\n            onClick={() => {\n              onCancelHandler();\n            }}\n            disabled={typeof onCancel !== 'function' ? onCancel.disabled : undefined}\n            ref={cancelButtonRef}\n          >\n            {typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel')}\n          </Button>\n\n          <Button\n            variant='primary'\n            onClick={() => {\n              (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();\n            }}\n            disabled={typeof onSubmit !== 'function' ? onSubmit.disabled : undefined}\n          >\n            {typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit')}\n          </Button>\n        </Flex>\n      </StyledFormDialog>\n    );\n  }\n);\n\nexport default FormDialog;\n"]}

package/lib/components/Dialog/InfoDialog.d.ts

@@ -1,5 +1,4 @@
-import type { FC, HTMLAttributes } from 'react';
 import type { InfoDialogProps } from './Dialog.types';
-declare const InfoDialog: FC<InfoDialogProps & HTMLAttributes<HTMLDivElement>>;
+declare const InfoDialog: import("react").ForwardRefExoticComponent<Omit<InfoDialogProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default InfoDialog;
 //# sourceMappingURL=InfoDialog.d.ts.map

package/lib/components/Dialog/InfoDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAkBjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CA0JpE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"InfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,QAAA,MAAM,UAAU,yHAyJf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Dialog/InfoDialog.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect } from 'react';
-import { useConsolidatedRef, useEscape, useFocusTrap, useI18n, useOuterEvent, useUID } from '../../hooks';
+import { forwardRef, useRef, useEffect, useLayoutEffect } from 'react';
+import { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';
 import Text from '../Text';
 import Icon from '../Icon';
 import Progress from '../Progress';
 import Flex from '../Flex';
 import SummaryItem from '../SummaryItem';
-import { getFocusables } from '../../utils';
+import { getActiveElement, getFocusables } from '../../utils';
 import { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';
 import { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';
 const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp, children, progress: progressProp, onDismiss, ...restProps }, ref) {
@@ -33,7 +33,15 @@ const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp
     useOuterEvent('mousedown', [target, dialogRef], () => {
         onDismiss?.();
     });
-    useFocusTrap(dialogRef, false);
+    // Using layout effect to capture the focused element prior to dialog elements taking focus.
+    useLayoutEffect(() => {
+        const initiatorElement = getActiveElement();
+        return () => {
+            if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {
+                initiatorElement.focus();
+            }
+        };
+    }, []);
     useEffect(() => {
         if (!progressProp) {
             setFocus();
@@ -48,9 +56,6 @@ const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp
         };
         target.addEventListener('click', closeDialog);
         return () => {
-            if (document.contains(target)) {
-                target.focus();
-            }
             target.removeEventListener('click', closeDialog);
         };
     }, []);
@@ -60,8 +65,8 @@ const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp
             onDismiss();
         }, label: t('close'), ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }) }));
     return (_jsxs(StyledInfoDialog, { ...restProps, ...(typeof headingProp === 'string'
-            ? { labelledbyId: headingId }
-            : { ariaLabel: headingProp?.primary }), arrow: true, target: target, progress: progressProp, ref: dialogRef, children: [headingProp && heading && (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2, gap: 1 }, item: { shrink: 0 }, as: StyledDialogHeader, children: [typeof headingProp === 'string' ? (heading) : (_jsx(SummaryItem, { primary: heading, secondary: headingProp.secondary ? (_jsx(Text, { variant: 'secondary', children: headingProp.secondary })) : undefined, visual: headingProp.visual })), dismissButton] })), (!headingProp || children || progressProp) && (_jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledDialogContent, ref: dialogContentRef, children: [!headingProp && dismissButton, children && (_jsx(StyledChildrenWrap, { inert: progressProp ? '' : undefined, children: children })), progress] }))] }));
+            ? { 'aria-labelledby': headingId }
+            : { 'aria-label': headingProp?.primary }), arrow: true, target: target, progress: progressProp, ref: dialogRef, children: [headingProp && heading && (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2, gap: 1 }, item: { shrink: 0 }, as: StyledDialogHeader, children: [typeof headingProp === 'string' ? (heading) : (_jsx(SummaryItem, { primary: heading, secondary: headingProp.secondary ? (_jsx(Text, { variant: 'secondary', children: headingProp.secondary })) : undefined, visual: headingProp.visual })), dismissButton] })), (!headingProp || children || progressProp) && (_jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledDialogContent, ref: dialogContentRef, children: [!headingProp && dismissButton, children && (_jsx(StyledChildrenWrap, { inert: progressProp ? '' : undefined, children: children })), progress] }))] }));
 });
 export default InfoDialog;
 //# sourceMappingURL=InfoDialog.js.map

package/lib/components/Dialog/InfoDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef, FC, HTMLAttributes } from 'react';\n\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport Text from '../Text';\nimport Icon from '../Icon';\nimport Progress from '../Progress';\nimport Flex from '../Flex';\nimport SummaryItem from '../SummaryItem';\nimport { getFocusables } from '../../utils';\n\nimport { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';\nimport type { InfoDialogProps } from './Dialog.types';\nimport { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';\n\nconst InfoDialog: FC<InfoDialogProps & HTMLAttributes<HTMLDivElement>> = forwardRef(\n  function InfoDialog(\n    {\n      target,\n      heading: headingProp,\n      children,\n      progress: progressProp,\n      onDismiss,\n      ...restProps\n    }: PropsWithoutRef<InfoDialogProps>,\n    ref: InfoDialogProps['ref']\n  ) {\n    const t = useI18n();\n    const headingId = useUID();\n    const dialogRef = useConsolidatedRef(ref);\n    const dialogContentRef = useRef<HTMLDivElement>(null);\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n    const setFocus = () => {\n      if (progressProp) return;\n\n      const focusables = getFocusables(dialogRef);\n\n      const focusable =\n        focusables.find(el => {\n          return dialogContentRef.current?.contains(el);\n        }) ??\n        closeButtonRef.current ??\n        focusables[0];\n\n      focusable?.focus();\n    };\n\n    useEscape(\n      e => {\n        onDismiss?.();\n        e.stopPropagation();\n      },\n      dialogRef,\n      [onDismiss]\n    );\n\n    useOuterEvent('mousedown', [target, dialogRef], () => {\n      onDismiss?.();\n    });\n\n    useFocusTrap(dialogRef, false);\n\n    useEffect(() => {\n      if (!progressProp) {\n        setFocus();\n      }\n    }, [progressProp]);\n\n    useEffect(() => {\n      const closeDialog = () => {\n        setTimeout(() => {\n          onDismiss?.();\n          // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n        }, 0);\n      };\n\n      target.addEventListener('click', closeDialog);\n\n      return () => {\n        if (document.contains(target)) {\n          target.focus();\n        }\n        target.removeEventListener('click', closeDialog);\n      };\n    }, []);\n\n    const heading = headingProp ? (\n      <Text id={headingId} variant='h2'>\n        {typeof headingProp === 'string' ? headingProp : headingProp.primary}\n      </Text>\n    ) : null;\n\n    const progress = (\n      <Progress\n        visible={!!progressProp}\n        focusOnVisible\n        placement='local'\n        message={typeof progressProp === 'string' ? progressProp : undefined}\n      />\n    );\n\n    const dismissButton = (\n      <StyledDismissButton\n        icon\n        variant='simple'\n        onClick={() => {\n          onDismiss();\n        }}\n        label={t('close')}\n        ref={closeButtonRef}\n      >\n        <Icon name='times' />\n      </StyledDismissButton>\n    );\n\n    return (\n      <StyledInfoDialog\n        {...restProps}\n        {...(typeof headingProp === 'string'\n          ? { labelledbyId: headingId }\n          : { ariaLabel: headingProp?.primary })}\n        arrow\n        target={target}\n        progress={progressProp}\n        ref={dialogRef}\n      >\n        {headingProp && heading && (\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', pad: 2, gap: 1 }}\n            item={{ shrink: 0 }}\n            as={StyledDialogHeader}\n          >\n            {typeof headingProp === 'string' ? (\n              heading\n            ) : (\n              <SummaryItem\n                primary={heading}\n                secondary={\n                  headingProp.secondary ? (\n                    <Text variant='secondary'>{headingProp.secondary}</Text>\n                  ) : undefined\n                }\n                visual={headingProp.visual}\n              />\n            )}\n            {dismissButton}\n          </Flex>\n        )}\n\n        {(!headingProp || children || progressProp) && (\n          <Flex\n            container={{ direction: 'column' }}\n            item={{ grow: 1 }}\n            as={StyledDialogContent}\n            ref={dialogContentRef}\n          >\n            {!headingProp && dismissButton}\n            {children && (\n              <StyledChildrenWrap inert={progressProp ? '' : undefined}>\n                {children}\n              </StyledChildrenWrap>\n            )}\n            {progress}\n          </Flex>\n        )}\n      </StyledInfoDialog>\n    );\n  }\n);\n\nexport default InfoDialog;\n"]}
+{"version":3,"file":"InfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useLayoutEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';\nimport Text from '../Text';\nimport Icon from '../Icon';\nimport Progress from '../Progress';\nimport Flex from '../Flex';\nimport SummaryItem from '../SummaryItem';\nimport { getActiveElement, getFocusables } from '../../utils';\nimport type { RefElement } from '../../types';\n\nimport { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';\nimport type { InfoDialogProps } from './Dialog.types';\nimport { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';\n\nconst InfoDialog = forwardRef<RefElement<InfoDialogProps>, PropsWithoutRef<InfoDialogProps>>(\n  function InfoDialog(\n    { target, heading: headingProp, children, progress: progressProp, onDismiss, ...restProps },\n    ref\n  ) {\n    const t = useI18n();\n    const headingId = useUID();\n    const dialogRef = useConsolidatedRef(ref);\n    const dialogContentRef = useRef<HTMLDivElement>(null);\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n    const setFocus = () => {\n      if (progressProp) return;\n\n      const focusables = getFocusables(dialogRef);\n\n      const focusable =\n        focusables.find(el => {\n          return dialogContentRef.current?.contains(el);\n        }) ??\n        closeButtonRef.current ??\n        focusables[0];\n\n      focusable?.focus();\n    };\n\n    useEscape(\n      e => {\n        onDismiss?.();\n        e.stopPropagation();\n      },\n      dialogRef,\n      [onDismiss]\n    );\n\n    useOuterEvent('mousedown', [target, dialogRef], () => {\n      onDismiss?.();\n    });\n\n    // Using layout effect to capture the focused element prior to dialog elements taking focus.\n    useLayoutEffect(() => {\n      const initiatorElement = getActiveElement();\n\n      return () => {\n        if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n          initiatorElement.focus();\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      if (!progressProp) {\n        setFocus();\n      }\n    }, [progressProp]);\n\n    useEffect(() => {\n      const closeDialog = () => {\n        setTimeout(() => {\n          onDismiss?.();\n          // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n        }, 0);\n      };\n\n      target.addEventListener('click', closeDialog);\n\n      return () => {\n        target.removeEventListener('click', closeDialog);\n      };\n    }, []);\n\n    const heading = headingProp ? (\n      <Text id={headingId} variant='h2'>\n        {typeof headingProp === 'string' ? headingProp : headingProp.primary}\n      </Text>\n    ) : null;\n\n    const progress = (\n      <Progress\n        visible={!!progressProp}\n        focusOnVisible\n        placement='local'\n        message={typeof progressProp === 'string' ? progressProp : undefined}\n      />\n    );\n\n    const dismissButton = (\n      <StyledDismissButton\n        icon\n        variant='simple'\n        onClick={() => {\n          onDismiss();\n        }}\n        label={t('close')}\n        ref={closeButtonRef}\n      >\n        <Icon name='times' />\n      </StyledDismissButton>\n    );\n\n    return (\n      <StyledInfoDialog\n        {...restProps}\n        {...(typeof headingProp === 'string'\n          ? { 'aria-labelledby': headingId }\n          : { 'aria-label': headingProp?.primary })}\n        arrow\n        target={target}\n        progress={progressProp}\n        ref={dialogRef}\n      >\n        {headingProp && heading && (\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', pad: 2, gap: 1 }}\n            item={{ shrink: 0 }}\n            as={StyledDialogHeader}\n          >\n            {typeof headingProp === 'string' ? (\n              heading\n            ) : (\n              <SummaryItem\n                primary={heading}\n                secondary={\n                  headingProp.secondary ? (\n                    <Text variant='secondary'>{headingProp.secondary}</Text>\n                  ) : undefined\n                }\n                visual={headingProp.visual}\n              />\n            )}\n            {dismissButton}\n          </Flex>\n        )}\n\n        {(!headingProp || children || progressProp) && (\n          <Flex\n            container={{ direction: 'column' }}\n            item={{ grow: 1 }}\n            as={StyledDialogContent}\n            ref={dialogContentRef}\n          >\n            {!headingProp && dismissButton}\n            {children && (\n              <StyledChildrenWrap inert={progressProp ? '' : undefined}>\n                {children}\n              </StyledChildrenWrap>\n            )}\n            {progress}\n          </Flex>\n        )}\n      </StyledInfoDialog>\n    );\n  }\n);\n\nexport default InfoDialog;\n"]}

package/lib/components/Dialog/InfoDialog.styles.d.ts

@@ -1,6 +1,3 @@
-export declare const StyledDismissButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledInfoDialog: import("styled-components").StyledComponent<import("react").FC<import("./Dialog.types").BaseDialogProps & {
-    labelledbyId?: string | undefined;
-    ariaLabel?: string | undefined;
-} & import("react").HTMLAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDismissButton: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Button").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInfoDialog: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("./Dialog.types").DialogProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=InfoDialog.styles.d.ts.map

package/lib/components/Dialog/InfoDialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoDialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,qMAAmB,CAAC;AAEpD,eAAO,MAAM,gBAAgB;;;yGAS3B,CAAC"}
+{"version":3,"file":"InfoDialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,oLAAmB,CAAC;AAEpD,eAAO,MAAM,gBAAgB,gPAS3B,CAAC"}

package/lib/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback, forwardRef, useState } from 'react';\nimport type { Ref, FunctionComponent, ReactNode, TransitionEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useOuterEvent, useConsolidatedRef, usePrevious } from '../../hooks';\nimport type { AsProp, BaseProps, ForwardProps } from '../../types';\nimport { reflow } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface DrawerProps extends AsProp, BaseProps {\n  /**\n   * If true, the Drawer will be visible.\n   * @default false\n   */\n  open: boolean;\n  /** Content of the Drawer. */\n  children?: ReactNode;\n  /**\n   * Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes.\n   * @default false\n   */\n  shadow?: boolean;\n  /**\n   * Used to determine which side of the viewport the Drawer should open from.\n   * @default 'right'\n   */\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  /**\n   * The position of the Drawer.\n   * @default 'absolute'\n   */\n  position?: 'absolute' | 'fixed';\n  /**\n   * Determines the speed of the transition. This value comes from `theme.base.animation.speed`.\n   * @default '0.25s'\n   */\n  transitionSpeed?: string;\n  /**\n   * The width or height that the Drawer will open to, depending on its placement.\n   * @default '100%'\n   */\n  size?: string;\n  /** Callback fired after Drawer opens. */\n  onAfterOpen?: () => void;\n  /** Callback fired after Drawer closes. */\n  onAfterClose?: () => void;\n  /** Callback fired before Drawer opens. */\n  onBeforeOpen?: () => void;\n  /** Callback fired before Drawer closes. */\n  onBeforeClose?: () => void;\n  /** Callback fired when a click action occurs outside of the Drawer. */\n  onOuterClick?: () => void;\n  /**\n   * If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level.\n   * @default false\n   */\n  nullWhenClosed?: boolean;\n}\n\ntype State = 'open' | 'closed' | 'opening' | 'closing';\n\nexport const StyledDrawer = styled.div<Partial<DrawerProps & { state: State }>>(props => {\n  const { state, shadow, position, placement, transitionSpeed, size, theme } = props;\n  let dimension = 'horizontal';\n  let axis = 'X';\n  let anchor = 'top';\n\n  if (placement === 'top' || placement === 'bottom') {\n    dimension = 'vertical';\n    axis = 'Y';\n    anchor = 'left';\n  }\n\n  const translate = state === 'open' || state === 'opening' ? 0 : '100%';\n  const speed = transitionSpeed || theme.base.animation.speed;\n\n  return css`\n    z-index: ${theme.base['z-index'].drawer};\n    position: ${position};\n    ${placement}: 0;\n    ${anchor}: 0;\n    height: ${dimension === 'vertical' ? size : '100%'};\n    width: ${dimension === 'horizontal' ? size : '100%'};\n    transition-property: transform, box-shadow, opacity;\n    transition-duration: max(${speed}, 0.0001s);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n    transform: ${state === 'open'\n      ? 'none'\n      : `translate${axis}(${placement === 'top' || placement === 'left' ? '-' : ''}${translate})`};\n\n    ${shadow &&\n    css`\n      box-shadow: ${theme.base.shadow.high};\n    `}\n  `;\n});\n\nStyledDrawer.defaultProps = defaultThemeProp;\n\nconst Drawer: FunctionComponent<DrawerProps & ForwardProps> = forwardRef(function Drawer(\n  props: DrawerProps,\n  ref: Ref<HTMLElement>\n) {\n  const {\n    open = false,\n    shadow = false,\n    position = 'absolute',\n    children,\n    placement = 'right',\n    transitionSpeed,\n    size = '100%',\n    onAfterOpen,\n    onAfterClose,\n    onBeforeOpen,\n    onBeforeClose,\n    onOuterClick,\n    nullWhenClosed = false,\n    ...restProps\n  } = props;\n\n  const drawerRef = useConsolidatedRef(ref);\n\n  const [state, setState] = useState<State>(open ? 'open' : 'closed');\n\n  let prevState = usePrevious(state);\n  if (!prevState) prevState = state;\n\n  useOuterEvent(\n    'mousedown',\n    [drawerRef],\n    useCallback(() => {\n      if (open) onOuterClick?.();\n    }, [open, onOuterClick])\n  );\n\n  useEffect(() => {\n    if (open && (state === 'closed' || state === 'closing')) {\n      onBeforeOpen?.();\n      reflow(drawerRef.current);\n      setState('opening');\n    } else if (!open && (state === 'open' || state === 'opening')) {\n      onBeforeClose?.();\n      setState('closing');\n    } else if (open && state === 'open' && prevState !== 'open') {\n      onAfterOpen?.();\n    } else if (!open && state === 'closed' && prevState !== 'closed') {\n      onAfterClose?.();\n    }\n  }, [open, state, prevState, onBeforeOpen, onBeforeClose, onAfterOpen, onAfterClose]);\n\n  const onTransitionEnd = useCallback(\n    (e: TransitionEvent): void => {\n      if (e.target !== drawerRef.current || e.propertyName !== 'transform') return;\n      setState(open ? 'open' : 'closed');\n    },\n    [open]\n  );\n\n  return state === 'closed' && !open && nullWhenClosed ? null : (\n    <StyledDrawer\n      ref={drawerRef}\n      position={position}\n      shadow={shadow && open}\n      transitionSpeed={transitionSpeed}\n      placement={placement}\n      size={size}\n      open={open}\n      state={state}\n      onTransitionEnd={onTransitionEnd}\n      {...restProps}\n    >\n      {children}\n    </StyledDrawer>\n  );\n});\n\nexport default Drawer;\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback, forwardRef, useState } from 'react';\nimport type { Ref, FunctionComponent, ReactNode, TransitionEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useOuterEvent, useConsolidatedRef, usePrevious } from '../../hooks';\nimport type { AsProp, BaseProps, ForwardProps } from '../../types';\nimport { reflow } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface DrawerProps extends AsProp, BaseProps {\n  /**\n   * If true, the Drawer will be visible.\n   * @default false\n   */\n  open: boolean;\n  /** Content of the Drawer. */\n  children?: ReactNode;\n  /**\n   * Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes.\n   * @default false\n   */\n  shadow?: boolean;\n  /**\n   * Used to determine which side of the viewport the Drawer should open from.\n   * @default 'right'\n   */\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  /**\n   * The position of the Drawer.\n   * @default 'absolute'\n   */\n  position?: 'absolute' | 'fixed';\n  /**\n   * Determines the speed of the transition. This value comes from `theme.base.animation.speed`.\n   * @default '0.25s'\n   */\n  transitionSpeed?: string;\n  /**\n   * The width or height that the Drawer will open to, depending on its placement.\n   * @default '100%'\n   */\n  size?: string;\n  /** Callback fired after Drawer opens. */\n  onAfterOpen?: () => void;\n  /** Callback fired after Drawer closes. */\n  onAfterClose?: () => void;\n  /** Callback fired before Drawer opens. */\n  onBeforeOpen?: () => void;\n  /** Callback fired before Drawer closes. */\n  onBeforeClose?: () => void;\n  /** Callback fired when a click action occurs outside of the Drawer. */\n  onOuterClick?: () => void;\n  /**\n   * If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level.\n   * @default false\n   */\n  nullWhenClosed?: boolean;\n}\n\ntype State = 'open' | 'closed' | 'opening' | 'closing';\n\nexport const StyledDrawer = styled.div<Partial<DrawerProps & { state: State }>>(props => {\n  const { state, shadow, position, placement, transitionSpeed, size, theme } = props;\n  let dimension = 'horizontal';\n  let axis = 'X';\n  let anchor = 'top';\n\n  if (placement === 'top' || placement === 'bottom') {\n    dimension = 'vertical';\n    axis = 'Y';\n    anchor = 'left';\n  }\n\n  const translate = state === 'open' || state === 'opening' ? 0 : '100%';\n  const speed = transitionSpeed || theme.base.animation.speed;\n\n  return css`\n    z-index: ${theme.base['z-index'].drawer};\n    position: ${position};\n    ${placement}: 0;\n    ${anchor}: 0;\n    height: ${dimension === 'vertical' ? size : '100%'};\n    width: ${dimension === 'horizontal' ? size : '100%'};\n    transition-property: transform, box-shadow, opacity;\n    transition-duration: max(${speed}, 0.0001s);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n    transform: ${state === 'open'\n      ? 'none'\n      : `translate${axis}(${placement === 'top' || placement === 'left' ? '-' : ''}${translate})`};\n\n    ${shadow &&\n    css`\n      box-shadow: ${theme.base.shadow.high};\n    `}\n  `;\n});\n\nStyledDrawer.defaultProps = defaultThemeProp;\n\nconst Drawer: FunctionComponent<DrawerProps & ForwardProps> = forwardRef(function Drawer(\n  props: DrawerProps,\n  ref: Ref<HTMLElement>\n) {\n  const {\n    open = false,\n    shadow = false,\n    position = 'absolute',\n    children,\n    placement = 'right',\n    transitionSpeed,\n    size = '100%',\n    onAfterOpen,\n    onAfterClose,\n    onBeforeOpen,\n    onBeforeClose,\n    onOuterClick,\n    nullWhenClosed = false,\n    ...restProps\n  } = props;\n\n  const drawerRef = useConsolidatedRef(ref);\n\n  const [state, setState] = useState<State>(open ? 'open' : 'closed');\n\n  let prevState = usePrevious(state);\n  if (!prevState) prevState = state;\n\n  useOuterEvent(\n    'mousedown',\n    [drawerRef],\n    useCallback(() => {\n      if (open) onOuterClick?.();\n    }, [open, onOuterClick])\n  );\n\n  useEffect(() => {\n    if (open && (state === 'closed' || state === 'closing')) {\n      onBeforeOpen?.();\n      reflow(drawerRef.current);\n      setState('opening');\n    } else if (!open && (state === 'open' || state === 'opening')) {\n      onBeforeClose?.();\n      setState('closing');\n    } else if (open && state === 'open' && prevState !== 'open') {\n      onAfterOpen?.();\n    } else if (!open && state === 'closed' && prevState !== 'closed') {\n      onAfterClose?.();\n    }\n  }, [open, state, prevState, onBeforeOpen, onBeforeClose, onAfterOpen, onAfterClose]);\n\n  const onTransitionEnd = useCallback(\n    (e: TransitionEvent): void => {\n      if (e.target !== drawerRef.current || e.propertyName !== 'transform') return;\n      setState(open ? 'open' : 'closed');\n    },\n    [open]\n  );\n\n  return state === 'closed' && !open && nullWhenClosed ? null : (\n    <StyledDrawer\n      ref={drawerRef}\n      position={position}\n      shadow={shadow && open}\n      transitionSpeed={transitionSpeed}\n      placement={placement}\n      size={size}\n      open={open}\n      state={state}\n      onTransitionEnd={onTransitionEnd}\n      {...restProps}\n    >\n      {children}\n    </StyledDrawer>\n  );\n});\n\nexport default Drawer;\n"]}

package/lib/components/Email/EmailDisplay.d.ts

@@ -1,5 +1,5 @@
-import type { FunctionComponent, Ref } from 'react';
-import type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
+import type { Ref } from 'react';
+import type { BaseProps, ForwardRefForwardPropsComponent, NoChildrenProp } from '../../types';
 export interface EmailDisplayProps extends BaseProps, NoChildrenProp {
     /** Email address, no 'mailto:' scheme */
     value?: string;
@@ -13,6 +13,6 @@ export interface EmailDisplayProps extends BaseProps, NoChildrenProp {
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;
 }
-declare const EmailDisplay: FunctionComponent<EmailDisplayProps & ForwardProps>;
+declare const EmailDisplay: ForwardRefForwardPropsComponent<EmailDisplayProps>;
 export default EmailDisplay;
 //# sourceMappingURL=EmailDisplay.d.ts.map

package/lib/components/Email/EmailDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmailDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI3E,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAClE,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAqBrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"EmailDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI9F,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAClE,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CAqBpE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Email/EmailDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmailDisplay.js","sourceRoot":"","sources":["../../../src/components/Email/EmailDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAgBzC,MAAM,YAAY,GAAwD,UAAU,CAClF,SAAS,YAAY,CACnB,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAsC,EAC1F,GAA6B;IAE7B,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,CAAC;IAChE,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,YAAY,GACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,OACX,SAAS,EACb,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,GAA6B,EAClC,IAAI,EAAE,UAAU,KAAK,EAAE,YAEtB,YAAY,GACI,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { StyledButtonLink } from '../Button';\nimport NoValue from '../NoValue/NoValue';\n\nexport interface EmailDisplayProps extends BaseProps, NoChildrenProp {\n  /** Email address, no 'mailto:' scheme */\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\nconst EmailDisplay: FunctionComponent<EmailDisplayProps & ForwardProps> = forwardRef(\n  function EmailDisplay(\n    { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<EmailDisplayProps>,\n    ref: EmailDisplayProps['ref']\n  ) {\n    const displayValue = value ? displayText || value : <NoValue />;\n    return variant === 'text' || !value ? (\n      <span ref={ref} {...restProps}>\n        {displayValue}\n      </span>\n    ) : (\n      <StyledButtonLink\n        {...restProps}\n        variant='link'\n        ref={ref as Ref<HTMLAnchorElement>}\n        href={`mailto:${value}`}\n      >\n        {displayValue}\n      </StyledButtonLink>\n    );\n  }\n);\n\nexport default EmailDisplay;\n"]}
+{"version":3,"file":"EmailDisplay.js","sourceRoot":"","sources":["../../../src/components/Email/EmailDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAgBzC,MAAM,YAAY,GAAuD,UAAU,CACjF,SAAS,YAAY,CACnB,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAsC,EAC1F,GAA6B;IAE7B,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,CAAC;IAChE,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,YAAY,GACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,OACX,SAAS,EACb,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,GAA6B,EAClC,IAAI,EAAE,UAAU,KAAK,EAAE,YAEtB,YAAY,GACI,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardRefForwardPropsComponent, NoChildrenProp } from '../../types';\nimport { StyledButtonLink } from '../Button';\nimport NoValue from '../NoValue/NoValue';\n\nexport interface EmailDisplayProps extends BaseProps, NoChildrenProp {\n  /** Email address, no 'mailto:' scheme */\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\nconst EmailDisplay: ForwardRefForwardPropsComponent<EmailDisplayProps> = forwardRef(\n  function EmailDisplay(\n    { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<EmailDisplayProps>,\n    ref: EmailDisplayProps['ref']\n  ) {\n    const displayValue = value ? displayText || value : <NoValue />;\n    return variant === 'text' || !value ? (\n      <span ref={ref} {...restProps}>\n        {displayValue}\n      </span>\n    ) : (\n      <StyledButtonLink\n        {...restProps}\n        variant='link'\n        ref={ref as Ref<HTMLAnchorElement>}\n        href={`mailto:${value}`}\n      >\n        {displayValue}\n      </StyledButtonLink>\n    );\n  }\n);\n\nexport default EmailDisplay;\n"]}

package/lib/components/EmojiPicker/EmojiDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiDisplay.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAE3D,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAG5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKrC,CAAC;AACF,MAAM,YAAY,GAAyC,KAAK,CAAC,EAAE;IACjE,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,IAAI,MAAM,GAAkB,EAAE,CAAC;IAC/B,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACnD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,QAAQ,EAAE;QAC3C,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE;YACrC,MAAM,SAAS,GAAG,sBAAsB,CAAC,MAAM,EAAE,QAAQ,EAAE,IAA6B,CAAC,CAAC;YAC1F,OAAO,SAAS,IAAI,KAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;QAC7E,CAAC,CAAC;QACF,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,MAAM,GAAG,uBAAuB,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;SAC/D;KACF;IACD,OAAO,QAAQ,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CACtC,KAAC,kBAAkB,OAAK,SAAS,YAAG,MAAM,GAAsB,CACjE,CAAC,CAAC,CAAC,CACF,4BAAG,OAAO,GAAI,CACf,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,YAAY,CAAC","sourcesContent":["import { useContext } from 'react';\nimport type { FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport emojiRegex from 'emoji-regex';\nimport { getEmojiDataFromNative, Emoji } from 'emoji-mart';\nimport type { Data as NativeData } from 'emoji-mart';\nimport data from 'emoji-mart/data/all.json';\n\nimport type { BaseProps, NoChildrenProp } from '../../types';\nimport { replaceMatchWithElement } from '../../utils';\n\nimport { EmojiContext } from './EmojiPicker';\n\nexport interface EmojiDisplayProps extends BaseProps, NoChildrenProp {\n  /** Content to be displayed */\n  content: ReactNode;\n  /** Size of emoji */\n  size?: number;\n}\nconst StyledEmojiDisplay = styled.span`\n  .emoji-mart-emoji {\n    line-height: 1;\n    vertical-align: middle;\n  }\n`;\nconst EmojiDisplay: FunctionComponent<EmojiDisplayProps> = props => {\n  const { content, size = 20, ...restProps } = props;\n  const regex = emojiRegex();\n  let msgArr: JSX.Element[] = [];\n  const { set: emojiSet } = useContext(EmojiContext);\n  if (typeof content === 'string' && emojiSet) {\n    const renderEmoji = (eMatch: string) => {\n      const emojiData = getEmojiDataFromNative(eMatch, emojiSet, data as unknown as NativeData);\n      return emojiData && <Emoji set={emojiSet} emoji={emojiData} size={size} />;\n    };\n    if (content.split(regex).length > 1) {\n      msgArr = replaceMatchWithElement(content, regex, renderEmoji);\n    }\n  }\n  return emojiSet && msgArr.length >= 1 ? (\n    <StyledEmojiDisplay {...restProps}>{msgArr}</StyledEmojiDisplay>\n  ) : (\n    <>{content}</>\n  );\n};\nexport default EmojiDisplay;\n"]}
+{"version":3,"file":"EmojiDisplay.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAE3D,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAG5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKrC,CAAC;AACF,MAAM,YAAY,GAAyC,KAAK,CAAC,EAAE;IACjE,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,IAAI,MAAM,GAAkB,EAAE,CAAC;IAC/B,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACnD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,QAAQ,EAAE,CAAC;QAC5C,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE;YACrC,MAAM,SAAS,GAAG,sBAAsB,CAAC,MAAM,EAAE,QAAQ,EAAE,IAA6B,CAAC,CAAC;YAC1F,OAAO,SAAS,IAAI,KAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;QAC7E,CAAC,CAAC;QACF,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpC,MAAM,GAAG,uBAAuB,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;QAChE,CAAC;IACH,CAAC;IACD,OAAO,QAAQ,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CACtC,KAAC,kBAAkB,OAAK,SAAS,YAAG,MAAM,GAAsB,CACjE,CAAC,CAAC,CAAC,CACF,4BAAG,OAAO,GAAI,CACf,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,YAAY,CAAC","sourcesContent":["import { useContext } from 'react';\nimport type { FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport emojiRegex from 'emoji-regex';\nimport { getEmojiDataFromNative, Emoji } from 'emoji-mart';\nimport type { Data as NativeData } from 'emoji-mart';\nimport data from 'emoji-mart/data/all.json';\n\nimport type { BaseProps, NoChildrenProp } from '../../types';\nimport { replaceMatchWithElement } from '../../utils';\n\nimport { EmojiContext } from './EmojiPicker';\n\nexport interface EmojiDisplayProps extends BaseProps, NoChildrenProp {\n  /** Content to be displayed */\n  content: ReactNode;\n  /** Size of emoji */\n  size?: number;\n}\nconst StyledEmojiDisplay = styled.span`\n  .emoji-mart-emoji {\n    line-height: 1;\n    vertical-align: middle;\n  }\n`;\nconst EmojiDisplay: FunctionComponent<EmojiDisplayProps> = props => {\n  const { content, size = 20, ...restProps } = props;\n  const regex = emojiRegex();\n  let msgArr: JSX.Element[] = [];\n  const { set: emojiSet } = useContext(EmojiContext);\n  if (typeof content === 'string' && emojiSet) {\n    const renderEmoji = (eMatch: string) => {\n      const emojiData = getEmojiDataFromNative(eMatch, emojiSet, data as unknown as NativeData);\n      return emojiData && <Emoji set={emojiSet} emoji={emojiData} size={size} />;\n    };\n    if (content.split(regex).length > 1) {\n      msgArr = replaceMatchWithElement(content, regex, renderEmoji);\n    }\n  }\n  return emojiSet && msgArr.length >= 1 ? (\n    <StyledEmojiDisplay {...restProps}>{msgArr}</StyledEmojiDisplay>\n  ) : (\n    <>{content}</>\n  );\n};\nexport default EmojiDisplay;\n"]}

package/lib/components/EmojiPicker/EmojiPicker.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, Ref } from 'react';
+import type { Ref } from 'react';
 import type { CategoryName, Data as EmojiData, BackgroundImageFn, PickerProps } from 'emoji-mart';
 import type { BaseProps, NoChildrenProp } from '../../types';
 type EmojiSet = 'apple' | 'google' | 'twitter' | 'facebook';
@@ -30,6 +30,6 @@ export interface EmojiContextValue {
     overrideData?: EmojiData;
 }
 export declare const EmojiContext: import("react").Context<EmojiContextValue>;
-declare const EmojiPicker: FunctionComponent<EmojiPickerProps>;
+declare const EmojiPicker: import("react").ForwardRefExoticComponent<Omit<EmojiPickerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default EmojiPicker;
 //# sourceMappingURL=EmojiPicker.d.ts.map

package/lib/components/EmojiPicker/EmojiPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAkC,GAAG,EAAE,MAAM,OAAO,CAAC;AAEpF,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,IAAI,SAAS,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAQlG,OAAO,KAAK,EAAE,SAAS,EAAe,cAAc,EAAE,MAAM,aAAa,CAAC;AAI1E,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qHAAqH;IACrH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,+BAA+B;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,4BAA4B;IAC5B,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;iHAC6G;IAC7G,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,4CAAuC,CAAC;AACjE,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAuEnD,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAkC,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,IAAI,SAAS,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAQlG,OAAO,KAAK,EAAE,SAAS,EAAe,cAAc,EAAE,MAAM,aAAa,CAAC;AAI1E,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qHAAqH;IACrH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,+BAA+B;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,4BAA4B;IAC5B,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;iHAC6G;IAC7G,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,4CAAuC,CAAC;AAEjE,QAAA,MAAM,WAAW,0HAuEf,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/lib/components/EmojiPicker/EmojiPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,GAAG,MAAM,0BAA0B,CAAC;AAC3C,OAAO,KAAK,MAAM,4BAA4B,CAAC;AAC/C,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,OAAO,MAAM,8BAA8B,CAAC;AACnD,OAAO,QAAQ,MAAM,+BAA+B,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAiCrD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAoB,EAAE,CAAC,CAAC;AACjE,MAAM,WAAW,GAAwC,UAAU,CAAC,SAAS,WAAW,CACtF,EACE,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,CAAC,EACX,UAAU,GAAG,IAAI,EACjB,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACsB,EACpC,GAAwB;IAExB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,GAAG,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAgC,IAAI,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,kDAAkD;QAClD,OAAO,CAAC,IAAI,CAAC,CAAC;QAEd,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,YAAY,EAAE;gBAChB,OAAO,CAAC,YAAY,CAAC,CAAC;aACvB;iBAAM;gBACL,QAAQ,GAAG,EAAE;oBACX,KAAK,OAAO;wBACV,OAAO,CAAC,KAAK,CAAC,CAAC;wBACf,MAAM;oBACR,KAAK,QAAQ;wBACX,OAAO,CAAC,MAAM,CAAC,CAAC;wBAChB,MAAM;oBACR,KAAK,SAAS;wBACZ,OAAO,CAAC,OAAO,CAAC,CAAC;wBACjB,MAAM;oBACR,KAAK,UAAU;wBACb,OAAO,CAAC,QAAQ,CAAC,CAAC;wBAClB,MAAM;oBACR;wBACE,OAAO,CAAC,GAAG,CAAC,CAAC;wBACb,MAAM;iBACT;aACF;QACH,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,IAAI,IAAI,CACN,KAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,SAAS,IAAI,EAAmB,YAE5D,KAAC,YAAY,OACP,SAAS,EACb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,CAAC,iBAAiB,EAC1B,iBAAiB,EAAE,iBAAiB,EACpC,IAAI,EAAE,IAAiB,EACvB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EACrC,KAAK,EAAC,EAAE,EACR,KAAK,EAAC,EAAE,EACR,YAAY,QACZ,aAAa,EAAE,UAAU,EACzB,WAAW,EAAE,KAAK,GAClB,GACgB,CACrB,CACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC","sourcesContent":["import { useState, useEffect, useContext, createContext, forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, CSSProperties, Ref } from 'react';\nimport { NimblePicker } from 'emoji-mart';\nimport type { CategoryName, Data as EmojiData, BackgroundImageFn, PickerProps } from 'emoji-mart';\nimport all from 'emoji-mart/data/all.json';\nimport apple from 'emoji-mart/data/apple.json';\nimport google from 'emoji-mart/data/google.json';\nimport twitter from 'emoji-mart/data/twitter.json';\nimport facebook from 'emoji-mart/data/facebook.json';\n\nimport { useTheme } from '../../hooks';\nimport type { BaseProps, DeepPartial, NoChildrenProp } from '../../types';\n\nimport StyledEmojiPicker from './EmojiPicker.styles';\n\ntype EmojiSet = 'apple' | 'google' | 'twitter' | 'facebook';\n\nexport interface EmojiPickerProps extends BaseProps, NoChildrenProp {\n  /** Individual emojis size in pixels. */\n  emojiSize?: number;\n  /** Number of emoji per line in a picker. */\n  perLine?: number;\n  /** Don't load excluded categories. Accepts [I18n categories keys](https://www.npmjs.com/package/emoji-mart#i18n). */\n  exclude?: CategoryName[];\n  /** Show footer for picker. */\n  showFooter?: boolean;\n  /** A Fn that gets called on selecting an emoji from picker. */\n  onSelect?: PickerProps['onSelect'];\n  /** Ref for the emoji Picker */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface EmojiContextValue {\n  /**\n   * A Fn that returns that image sheet to use for emojis.\n   * If no sprite is provided, native emoji are used.\n   * For the source of image please visit this [link](https://www.jsdelivr.com/package/npm/emoji-datasource?version=5.0.1&path=img)\n   */\n  spriteSrcResolver?: BackgroundImageFn;\n  /** Emoji set to be used. */\n  set?: EmojiSet;\n  /** Data to be used. [link](https://github.com/iamcal/emoji-data).\n   * Use this in case you would like to filter out some emoji, one must change the sprite image accordingly. */\n  overrideData?: EmojiData;\n}\n\nexport const EmojiContext = createContext<EmojiContextValue>({});\nconst EmojiPicker: FunctionComponent<EmojiPickerProps> = forwardRef(function EmojiPicker(\n  {\n    emojiSize = 24,\n    perLine = 9,\n    showFooter = true,\n    exclude,\n    onSelect,\n    ...restProps\n  }: PropsWithoutRef<EmojiPickerProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const theme = useTheme();\n  const { set, spriteSrcResolver, overrideData } = useContext(EmojiContext);\n  const [data, setData] = useState<DeepPartial<EmojiData> | null>(null);\n\n  useEffect(() => {\n    // Unmount NimblePicker for changes to take effect\n    setData(null);\n\n    setTimeout(() => {\n      if (overrideData) {\n        setData(overrideData);\n      } else {\n        switch (set) {\n          case 'apple':\n            setData(apple);\n            break;\n          case 'google':\n            setData(google);\n            break;\n          case 'twitter':\n            setData(twitter);\n            break;\n          case 'facebook':\n            setData(facebook);\n            break;\n          default:\n            setData(all);\n            break;\n        }\n      }\n    }, 0);\n  }, [set, overrideData]);\n\n  return (\n    data && (\n      <StyledEmojiPicker\n        ref={ref}\n        showFooter={showFooter}\n        style={{ '--emoji-size': `${emojiSize}px` } as CSSProperties}\n      >\n        <NimblePicker\n          {...restProps}\n          set={set}\n          native={!spriteSrcResolver}\n          backgroundImageFn={spriteSrcResolver}\n          data={data as EmojiData}\n          emojiSize={emojiSize}\n          perLine={perLine}\n          exclude={exclude}\n          onSelect={onSelect}\n          color={theme.base.palette.interactive}\n          emoji=''\n          title=''\n          emojiTooltip\n          showSkinTones={showFooter}\n          showPreview={false}\n        />\n      </StyledEmojiPicker>\n    )\n  );\n});\n\nexport default EmojiPicker;\n"]}
+{"version":3,"file":"EmojiPicker.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,GAAG,MAAM,0BAA0B,CAAC;AAC3C,OAAO,KAAK,MAAM,4BAA4B,CAAC;AAC/C,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,OAAO,MAAM,8BAA8B,CAAC;AACnD,OAAO,QAAQ,MAAM,+BAA+B,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAiCrD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAoB,EAAE,CAAC,CAAC;AAEjE,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS,WAAW,CACjD,EACE,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,CAAC,EACX,UAAU,GAAG,IAAI,EACjB,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACsB,EACpC,GAAwB;IAExB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,GAAG,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAgC,IAAI,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,kDAAkD;QAClD,OAAO,CAAC,IAAI,CAAC,CAAC;QAEd,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,YAAY,EAAE,CAAC;gBACjB,OAAO,CAAC,YAAY,CAAC,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,QAAQ,GAAG,EAAE,CAAC;oBACZ,KAAK,OAAO;wBACV,OAAO,CAAC,KAAK,CAAC,CAAC;wBACf,MAAM;oBACR,KAAK,QAAQ;wBACX,OAAO,CAAC,MAAM,CAAC,CAAC;wBAChB,MAAM;oBACR,KAAK,SAAS;wBACZ,OAAO,CAAC,OAAO,CAAC,CAAC;wBACjB,MAAM;oBACR,KAAK,UAAU;wBACb,OAAO,CAAC,QAAQ,CAAC,CAAC;wBAClB,MAAM;oBACR;wBACE,OAAO,CAAC,GAAG,CAAC,CAAC;wBACb,MAAM;gBACV,CAAC;YACH,CAAC;QACH,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,IAAI,IAAI,CACN,KAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,SAAS,IAAI,EAAmB,YAE5D,KAAC,YAAY,OACP,SAAS,EACb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,CAAC,iBAAiB,EAC1B,iBAAiB,EAAE,iBAAiB,EACpC,IAAI,EAAE,IAAiB,EACvB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EACrC,KAAK,EAAC,EAAE,EACR,KAAK,EAAC,EAAE,EACR,YAAY,QACZ,aAAa,EAAE,UAAU,EACzB,WAAW,EAAE,KAAK,GAClB,GACgB,CACrB,CACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC","sourcesContent":["import { useState, useEffect, useContext, createContext, forwardRef } from 'react';\nimport type { PropsWithoutRef, CSSProperties, Ref } from 'react';\nimport { NimblePicker } from 'emoji-mart';\nimport type { CategoryName, Data as EmojiData, BackgroundImageFn, PickerProps } from 'emoji-mart';\nimport all from 'emoji-mart/data/all.json';\nimport apple from 'emoji-mart/data/apple.json';\nimport google from 'emoji-mart/data/google.json';\nimport twitter from 'emoji-mart/data/twitter.json';\nimport facebook from 'emoji-mart/data/facebook.json';\n\nimport { useTheme } from '../../hooks';\nimport type { BaseProps, DeepPartial, NoChildrenProp } from '../../types';\n\nimport StyledEmojiPicker from './EmojiPicker.styles';\n\ntype EmojiSet = 'apple' | 'google' | 'twitter' | 'facebook';\n\nexport interface EmojiPickerProps extends BaseProps, NoChildrenProp {\n  /** Individual emojis size in pixels. */\n  emojiSize?: number;\n  /** Number of emoji per line in a picker. */\n  perLine?: number;\n  /** Don't load excluded categories. Accepts [I18n categories keys](https://www.npmjs.com/package/emoji-mart#i18n). */\n  exclude?: CategoryName[];\n  /** Show footer for picker. */\n  showFooter?: boolean;\n  /** A Fn that gets called on selecting an emoji from picker. */\n  onSelect?: PickerProps['onSelect'];\n  /** Ref for the emoji Picker */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface EmojiContextValue {\n  /**\n   * A Fn that returns that image sheet to use for emojis.\n   * If no sprite is provided, native emoji are used.\n   * For the source of image please visit this [link](https://www.jsdelivr.com/package/npm/emoji-datasource?version=5.0.1&path=img)\n   */\n  spriteSrcResolver?: BackgroundImageFn;\n  /** Emoji set to be used. */\n  set?: EmojiSet;\n  /** Data to be used. [link](https://github.com/iamcal/emoji-data).\n   * Use this in case you would like to filter out some emoji, one must change the sprite image accordingly. */\n  overrideData?: EmojiData;\n}\n\nexport const EmojiContext = createContext<EmojiContextValue>({});\n\nconst EmojiPicker = forwardRef(function EmojiPicker(\n  {\n    emojiSize = 24,\n    perLine = 9,\n    showFooter = true,\n    exclude,\n    onSelect,\n    ...restProps\n  }: PropsWithoutRef<EmojiPickerProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const theme = useTheme();\n  const { set, spriteSrcResolver, overrideData } = useContext(EmojiContext);\n  const [data, setData] = useState<DeepPartial<EmojiData> | null>(null);\n\n  useEffect(() => {\n    // Unmount NimblePicker for changes to take effect\n    setData(null);\n\n    setTimeout(() => {\n      if (overrideData) {\n        setData(overrideData);\n      } else {\n        switch (set) {\n          case 'apple':\n            setData(apple);\n            break;\n          case 'google':\n            setData(google);\n            break;\n          case 'twitter':\n            setData(twitter);\n            break;\n          case 'facebook':\n            setData(facebook);\n            break;\n          default:\n            setData(all);\n            break;\n        }\n      }\n    }, 0);\n  }, [set, overrideData]);\n\n  return (\n    data && (\n      <StyledEmojiPicker\n        ref={ref}\n        showFooter={showFooter}\n        style={{ '--emoji-size': `${emojiSize}px` } as CSSProperties}\n      >\n        <NimblePicker\n          {...restProps}\n          set={set}\n          native={!spriteSrcResolver}\n          backgroundImageFn={spriteSrcResolver}\n          data={data as EmojiData}\n          emojiSize={emojiSize}\n          perLine={perLine}\n          exclude={exclude}\n          onSelect={onSelect}\n          color={theme.base.palette.interactive}\n          emoji=''\n          title=''\n          emojiTooltip\n          showSkinTones={showFooter}\n          showPreview={false}\n        />\n      </StyledEmojiPicker>\n    )\n  );\n});\n\nexport default EmojiPicker;\n"]}

package/lib/components/EmptyState/EmptyState.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent, Ref } from 'react';
-import type { BaseProps, NoChildrenProp, ForwardProps } from '../../types';
-export interface EmptyStateProps extends BaseProps, NoChildrenProp {
+import type { Ref } from 'react';
+import type { BaseProps, NoChildrenProp, ForwardRefForwardPropsComponent, TestIdProp } from '../../types';
+export interface EmptyStateProps extends BaseProps, NoChildrenProp, TestIdProp {
     /**
      * Message to display below the icon.
      * @default 'No items'
@@ -9,6 +9,8 @@ export interface EmptyStateProps extends BaseProps, NoChildrenProp {
     ref?: Ref<HTMLDivElement>;
 }
 export declare const StyledEmptyState: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const EmptyState: FunctionComponent<EmptyStateProps & ForwardProps>;
-export default EmptyState;
+declare const _default: ForwardRefForwardPropsComponent<EmptyStateProps> & {
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["message", "icon"]>;
+};
+export default _default;
 //# sourceMappingURL=EmptyState.d.ts.map

package/lib/components/EmptyState/EmptyState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAWrE,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,yGAc3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAoBjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAWlD,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,+BAA+B,EAC/B,UAAU,EACX,MAAM,aAAa,CAAC;AAQrB,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,yGAc3B,CAAC;;;;AAkCH,wBAA6D"}