@pega/cosmos-react-core 9.0.0-build.1.0 → 9.0.0-build.10.1

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

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import type { OmitStrict, WithAttributes } from '../../types';
 import type { PopoverProps } from '../Popover';
 import type { ProgressProps } from '../Progress';
+import type { AdditionalInfoProps } from '../AdditionalInfo';
 export interface BaseDialogProps {
     /**
      * Certain uses of dialogs require a linear edge with an input like control.
@@ -59,11 +60,14 @@ export type FormDialogProps = WithAttributes<'div', BaseDialogProps & {
 } & ({
     /** A string to indicate context for the dialog. The dialog will be labelled by this value. */
     heading: string;
+    /** Show additional info in form dialog header. */
+    additionalInfo?: AdditionalInfoProps;
     'aria-label'?: never;
 } | {
     heading?: never;
     /** Provide a contextually sufficient aria label if a visible heading is not provided. */
     'aria-label': string;
+    additionalInfo?: never;
 })>;
 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. */

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,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"}
+{"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;AACjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,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,kDAAkD;IAClD,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,yFAAyF;IACzF,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,KAAK,CAAC;CACxB,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, 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"]}
+{"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';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\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          /** Show additional info in form dialog header. */\n          additionalInfo?: AdditionalInfoProps;\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          additionalInfo?: never;\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.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"FormDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAkB7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,eAAO,MAAM,gBAAgB,gPAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,6HAyKf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Dialog/FormDialog.js

@@ -6,11 +6,12 @@ import { getActiveElement, getFocusables } from '../../utils';
 import Button from '../Button';
 import Text from '../Text';
 import Progress from '../Progress';
+import AdditionalInfo from '../AdditionalInfo';
 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, 'aria-label': 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, additionalInfo, ...restProps }, ref) {
     const t = useI18n();
     const headingId = useUID();
     const dialogRef = useConsolidatedRef(ref);
@@ -78,7 +79,11 @@ const FormDialog = forwardRef(function FormDialog({ arrow = true, target, headin
     }, []);
     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: () => {
+            : { 'aria-labelledby': headingId }), arrow: arrow, target: target, progress: progress, ref: dialogRef, children: [heading !== undefined && (_jsxs(Flex, { container: {
+                    alignItems: 'center',
+                    gap: additionalInfo?.heading ? 1 : undefined,
+                    pad: 2
+                }, item: { shrink: 0 }, as: StyledDialogHeader, children: [_jsx(Text, { id: headingId, variant: 'h2', children: heading }), additionalInfo?.heading && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, children: additionalInfo.children }))] })), _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, 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"]}
+{"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"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","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 AdditionalInfo from '../AdditionalInfo';\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      additionalInfo,\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={{\n              alignItems: 'center',\n              gap: additionalInfo?.heading ? 1 : undefined,\n              pad: 2\n            }}\n            item={{ shrink: 0 }}\n            as={StyledDialogHeader}\n          >\n            <Text id={headingId} variant='h2'>\n              {heading}\n            </Text>\n            {additionalInfo?.heading && (\n              <AdditionalInfo heading={additionalInfo.heading}>\n                {additionalInfo.children}\n              </AdditionalInfo>\n            )}\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.js

@@ -66,7 +66,7 @@ const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp
         }, label: t('close'), ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }) }));
     return (_jsxs(StyledInfoDialog, { ...restProps, ...(typeof headingProp === 'string'
             ? { '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] }))] }));
+            : { 'aria-label': headingProp?.primary }), arrow: true, target: target, progress: progressProp, ref: dialogRef, children: [headingProp && heading && (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: [1, 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, 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"]}
+{"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: [1, 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/Drawer/Drawer.d.ts

@@ -30,9 +30,16 @@ export interface DrawerProps extends AsProp, BaseProps {
     transitionSpeed?: string;
     /**
      * The width or height that the Drawer will open to, depending on its placement.
+     * If `resizeable`, is true this value will be overridden by the width set by the user.
      * @default '100%'
      */
     size?: string;
+    /**
+     * If true, the Drawer will be resizable. Will not be applied if `placement` is set to `top` or `bottom`.
+     * @default false
+     * @internal Can only be used with one drawer at a time.
+     */
+    resizeable?: boolean;
     /** Callback fired after Drawer opens. */
     onAfterOpen?: () => void;
     /** Callback fired after Drawer closes. */
@@ -53,6 +60,6 @@ type State = 'open' | 'closed' | 'opening' | 'closing';
 export declare const StyledDrawer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<DrawerProps & {
     state: State;
 }>, never>;
-declare const Drawer: FunctionComponent<DrawerProps & ForwardProps>;
+export declare const Drawer: FunctionComponent<DrawerProps & ForwardProps>;
 export default Drawer;
 //# sourceMappingURL=Drawer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAO,iBAAiB,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAInE,MAAM,WAAW,WAAY,SAAQ,MAAM,EAAE,SAAS;IACpD;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,KAAK,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,eAAO,MAAM,YAAY;WAA6C,KAAK;UAkCzE,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA2ExD,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EAIV,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAanE,MAAM,WAAW,WAAY,SAAQ,MAAM,EAAE,SAAS;IACpD;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,KAAK,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,eAAO,MAAM,YAAY;WAA6C,KAAK;UAuCzE,CAAC;AAIH,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA+J/D,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/components/Drawer/Drawer.js

@@ -1,11 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useCallback, forwardRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useCallback, forwardRef, useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { useOuterEvent, useConsolidatedRef, usePrevious } from '../../hooks';
-import { reflow } from '../../utils';
+import { remToPx } from 'polished';
+import { useOuterEvent, useConsolidatedRef, usePrevious, useDirection } from '../../hooks';
+import { getChildOfRootNode, reflow } from '../../utils';
 import { defaultThemeProp } from '../../theme';
+import { resizeDrawerKeyboardStep, resizeDrawerMaxWidth, resizeDrawerMinWidth } from '../../styles/constants';
+import ResizeHandle from './ResizeHandle';
+const drawerMinWidth = remToPx(resizeDrawerMinWidth);
 export const StyledDrawer = styled.div(props => {
-    const { state, shadow, position, placement, transitionSpeed, size, theme } = props;
+    const { state, shadow, position, placement, transitionSpeed, size, resizeable, theme } = props;
     let dimension = 'horizontal';
     let axis = 'X';
     let anchor = 'top';
@@ -34,12 +38,18 @@ export const StyledDrawer = styled.div(props => {
         css `
       box-shadow: ${theme.base.shadow.high};
     `}
+
+    ${resizeable &&
+        css `
+      width: ${dimension === 'horizontal' ? 'var(--resize-drawer-width)' : '100%'};
+    `}
   `;
 });
 StyledDrawer.defaultProps = defaultThemeProp;
-const Drawer = forwardRef(function Drawer(props, ref) {
-    const { open = false, shadow = false, position = 'absolute', children, placement = 'right', transitionSpeed, size = '100%', onAfterOpen, onAfterClose, onBeforeOpen, onBeforeClose, onOuterClick, nullWhenClosed = false, ...restProps } = props;
+export const Drawer = forwardRef(function Drawer(props, ref) {
+    const { open = false, shadow = false, position = 'absolute', children, placement = 'right', transitionSpeed, size = '100%', resizeable = false, onAfterOpen, onAfterClose, onBeforeOpen, onBeforeClose, onOuterClick, nullWhenClosed = false, ...restProps } = props;
     const drawerRef = useConsolidatedRef(ref);
+    const { ltr, rtl } = useDirection();
     const [state, setState] = useState(open ? 'open' : 'closed');
     let prevState = usePrevious(state);
     if (!prevState)
@@ -70,7 +80,56 @@ const Drawer = forwardRef(function Drawer(props, ref) {
             return;
         setState(open ? 'open' : 'closed');
     }, [open]);
-    return state === 'closed' && !open && nullWhenClosed ? null : (_jsx(StyledDrawer, { ref: drawerRef, position: position, shadow: shadow && open, transitionSpeed: transitionSpeed, placement: placement, size: size, open: open, state: state, onTransitionEnd: onTransitionEnd, ...restProps, children: children }));
+    const dragStartXRef = useRef();
+    useEffect(() => {
+        if (!resizeable || !drawerRef.current)
+            return;
+        const targetNode = getChildOfRootNode(drawerRef);
+        if (!targetNode)
+            return;
+        if (!targetNode.style.getPropertyValue('--resize-drawer-width')) {
+            targetNode.style.setProperty('--resize-drawer-width', size);
+        }
+    }, [drawerRef.current]);
+    const handleResize = useCallback((e) => {
+        const targetNode = getChildOfRootNode(drawerRef);
+        const rect = drawerRef.current?.getBoundingClientRect();
+        if (!rect || !targetNode)
+            return;
+        dragStartXRef.current = e.clientX;
+        const ac = new AbortController();
+        targetNode.addEventListener('mousemove', moveEvent => {
+            if (!dragStartXRef.current || !rect.width)
+                return;
+            const initialX = dragStartXRef.current;
+            const widthDiff = placement === 'right' ? initialX - moveEvent.clientX : moveEvent.clientX - initialX;
+            const newWidth = Math.max(widthDiff + rect.width, parseInt(drawerMinWidth, 10));
+            // Set root-level CSS variable to communicate width to AppShell
+            targetNode.style.setProperty('--resize-drawer-width', `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`);
+        }, { passive: true, signal: ac.signal });
+        targetNode.addEventListener('mouseup', () => {
+            ac.abort();
+        }, { once: true });
+    }, [placement]);
+    const keyboardResize = useCallback((e, grabbed) => {
+        if (!grabbed)
+            return;
+        const targetNode = getChildOfRootNode(drawerRef);
+        const resizeStep = document.documentElement.clientWidth * resizeDrawerKeyboardStep;
+        const rect = drawerRef.current?.getBoundingClientRect();
+        if (!rect || !targetNode)
+            return;
+        if (e.code !== 'ArrowLeft' && e.code !== 'ArrowRight')
+            return;
+        e.preventDefault();
+        const resizeDirection = (e.code === 'ArrowLeft' ? 1 : -1) * (placement === 'right' ? 1 : -1);
+        const newWidth = Math.max(rect.width + resizeDirection * resizeStep, parseInt(drawerMinWidth, 10));
+        targetNode.style.setProperty('--resize-drawer-width', `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`);
+    }, [placement]);
+    const renderResizeHandle = resizeable &&
+        state === 'open' &&
+        ((placement === 'left' && rtl) || (placement === 'right' && ltr));
+    return state === 'closed' && !open && nullWhenClosed ? null : (_jsxs(StyledDrawer, { ref: drawerRef, position: position, shadow: shadow && open, transitionSpeed: transitionSpeed, placement: placement, size: size, resizeable: resizeable, open: open, state: state, onTransitionEnd: onTransitionEnd, ...restProps, children: [children, renderResizeHandle && _jsx(ResizeHandle, { onMouseDown: handleResize, onKeyDown: keyboardResize })] }));
 });
 export default Drawer;
 //# sourceMappingURL=Drawer.js.map

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, useRef } from 'react';\nimport type {\n  Ref,\n  FunctionComponent,\n  ReactNode,\n  TransitionEvent,\n  MouseEvent as ReactMouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { remToPx } from 'polished';\n\nimport { useOuterEvent, useConsolidatedRef, usePrevious, useDirection } from '../../hooks';\nimport type { AsProp, BaseProps, ForwardProps } from '../../types';\nimport { getChildOfRootNode, reflow } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  resizeDrawerKeyboardStep,\n  resizeDrawerMaxWidth,\n  resizeDrawerMinWidth\n} from '../../styles/constants';\n\nimport ResizeHandle from './ResizeHandle';\n\nconst drawerMinWidth = remToPx(resizeDrawerMinWidth);\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   * If `resizeable`, is true this value will be overridden by the width set by the user.\n   * @default '100%'\n   */\n  size?: string;\n  /**\n   * If true, the Drawer will be resizable. Will not be applied if `placement` is set to `top` or `bottom`.\n   * @default false\n   * @internal Can only be used with one drawer at a time.\n   */\n  resizeable?: boolean;\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, resizeable, 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    ${resizeable &&\n    css`\n      width: ${dimension === 'horizontal' ? 'var(--resize-drawer-width)' : '100%'};\n    `}\n  `;\n});\n\nStyledDrawer.defaultProps = defaultThemeProp;\n\nexport const 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    resizeable = false,\n    onAfterOpen,\n    onAfterClose,\n    onBeforeOpen,\n    onBeforeClose,\n    onOuterClick,\n    nullWhenClosed = false,\n    ...restProps\n  } = props;\n\n  const drawerRef = useConsolidatedRef(ref);\n  const { ltr, rtl } = useDirection();\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  const dragStartXRef = useRef<number>();\n\n  useEffect(() => {\n    if (!resizeable || !drawerRef.current) return;\n    const targetNode = getChildOfRootNode(drawerRef);\n    if (!targetNode) return;\n    if (!targetNode.style.getPropertyValue('--resize-drawer-width')) {\n      targetNode.style.setProperty('--resize-drawer-width', size);\n    }\n  }, [drawerRef.current]);\n\n  const handleResize = useCallback(\n    (e: ReactMouseEvent) => {\n      const targetNode = getChildOfRootNode(drawerRef);\n      const rect = drawerRef.current?.getBoundingClientRect();\n      if (!rect || !targetNode) return;\n\n      dragStartXRef.current = e.clientX;\n\n      const ac = new AbortController();\n      targetNode.addEventListener(\n        'mousemove',\n        moveEvent => {\n          if (!dragStartXRef.current || !rect.width) return;\n\n          const initialX = dragStartXRef.current;\n          const widthDiff =\n            placement === 'right' ? initialX - moveEvent.clientX : moveEvent.clientX - initialX;\n\n          const newWidth = Math.max(widthDiff + rect.width, parseInt(drawerMinWidth, 10));\n\n          // Set root-level CSS variable to communicate width to AppShell\n          targetNode.style.setProperty(\n            '--resize-drawer-width',\n            `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`\n          );\n        },\n        { passive: true, signal: ac.signal }\n      );\n\n      targetNode.addEventListener(\n        'mouseup',\n        () => {\n          ac.abort();\n        },\n        { once: true }\n      );\n    },\n    [placement]\n  );\n\n  const keyboardResize = useCallback(\n    (e: ReactKeyboardEvent, grabbed: boolean) => {\n      if (!grabbed) return;\n      const targetNode = getChildOfRootNode(drawerRef);\n      const resizeStep = document.documentElement.clientWidth * resizeDrawerKeyboardStep;\n      const rect = drawerRef.current?.getBoundingClientRect();\n      if (!rect || !targetNode) return;\n      if (e.code !== 'ArrowLeft' && e.code !== 'ArrowRight') return;\n      e.preventDefault();\n\n      const resizeDirection = (e.code === 'ArrowLeft' ? 1 : -1) * (placement === 'right' ? 1 : -1);\n\n      const newWidth = Math.max(\n        rect.width + resizeDirection * resizeStep,\n        parseInt(drawerMinWidth, 10)\n      );\n      targetNode.style.setProperty(\n        '--resize-drawer-width',\n        `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`\n      );\n    },\n    [placement]\n  );\n\n  const renderResizeHandle =\n    resizeable &&\n    state === 'open' &&\n    ((placement === 'left' && rtl) || (placement === 'right' && ltr));\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      resizeable={resizeable}\n      open={open}\n      state={state}\n      onTransitionEnd={onTransitionEnd}\n      {...restProps}\n    >\n      {children}\n      {renderResizeHandle && <ResizeHandle onMouseDown={handleResize} onKeyDown={keyboardResize} />}\n    </StyledDrawer>\n  );\n});\n\nexport default Drawer;\n"]}

package/lib/components/Drawer/ResizeHandle.d.ts

@@ -0,0 +1,9 @@
+import type { MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
+export interface ResizeHandleProps {
+    onKeyDown: (e: ReactKeyboardEvent, grabbed: boolean) => void;
+    onMouseDown: (e: ReactMouseEvent) => void;
+}
+export declare const StyledResizeHandle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const ResizeHandle: import("react").ForwardRefExoticComponent<ResizeHandleProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ResizeHandle;
+//# sourceMappingURL=ResizeHandle.d.ts.map

package/lib/components/Drawer/ResizeHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/ResizeHandle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AAef,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,CAAC,CAAC,EAAE,kBAAkB,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,WAAW,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAyBD,eAAO,MAAM,kBAAkB,yGA8B7B,CAAC;AAIH,QAAA,MAAM,YAAY,8GAqEhB,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/lib/components/Drawer/ResizeHandle.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { hideVisually } from 'polished';
+import Button, { StyledButton } from '../Button';
+import Icon, { registerIcon, StyledIcon } from '../Icon';
+import { useConsolidatedRef, useEscape, useI18n } from '../../hooks';
+import { getChildOfRootNode } from '../../utils';
+import { defaultThemeProp } from '../../theme';
+import * as DragIcon from '../Icon/icons/drag.icon';
+import * as ArrowUpDownIcon from '../Icon/icons/arrow-micro-up-down.icon';
+registerIcon(DragIcon);
+registerIcon(ArrowUpDownIcon);
+const StyledResizeButton = styled(Button)(({ rotateIcon }) => {
+    return css `
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &:not(:focus) {
+      ${hideVisually};
+    }
+
+    ${rotateIcon &&
+        css `
+      ${StyledIcon} {
+        transform: rotate(90deg);
+      }
+    `}
+  `;
+});
+export const StyledResizeHandle = styled.div(({ theme }) => {
+    return css `
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block: 0;
+    inline-size: 0.125rem;
+    background-color: transparent;
+    transition: background-color ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+    cursor: ew-resize;
+    z-index: ${theme.base['z-index'].max};
+
+    ::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      width: calc(${theme.base['hit-area'].compact} * 0.75);
+    }
+
+    &:hover {
+      background-color: ${theme.base.palette.interactive};
+    }
+
+    ${StyledButton} {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: calc(-2 * ${theme.base.spacing});
+      translate: 0 -50%;
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `;
+});
+StyledResizeHandle.defaultProps = defaultThemeProp;
+const ResizeHandle = forwardRef(function ResizeHandle({ onMouseDown, onKeyDown }, ref) {
+    const resizeHandleRef = useConsolidatedRef(ref);
+    const t = useI18n();
+    const [mouseGrabbed, setMouseGrabbed] = useState(false);
+    const [keyboardGrabbed, setKeyboardGrabbed] = useState(false);
+    useEscape(() => {
+        setMouseGrabbed(false);
+        setKeyboardGrabbed(false);
+    });
+    const handleKeyDown = (e) => {
+        if (e.code === 'Space') {
+            e.preventDefault();
+            if (keyboardGrabbed) {
+                setKeyboardGrabbed(false);
+            }
+            else {
+                setKeyboardGrabbed(true);
+            }
+        }
+        onKeyDown?.(e, keyboardGrabbed);
+    };
+    const handleMouseDown = (e) => {
+        const targetNode = getChildOfRootNode(resizeHandleRef);
+        if (!targetNode)
+            return;
+        targetNode.style.setProperty('user-select', 'none');
+        setMouseGrabbed(true);
+        onMouseDown?.(e);
+    };
+    const handleMouseUp = () => {
+        const targetNode = getChildOfRootNode(resizeHandleRef);
+        if (!targetNode)
+            return;
+        targetNode.style.removeProperty('user-select');
+        setMouseGrabbed(false);
+    };
+    return (_jsx(StyledResizeHandle, { onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ref: resizeHandleRef, children: _jsx(StyledResizeButton, { tabIndex: 0, icon: true, label: !mouseGrabbed && !keyboardGrabbed ? t('resize') : undefined, "aria-label": !mouseGrabbed && !keyboardGrabbed
+                ? t('drag_handle_activate_description')
+                : t('drag_handle_cancel_description'), onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onBlur: () => {
+                setKeyboardGrabbed(false);
+            }, rotateIcon: keyboardGrabbed, children: _jsx(Icon, { name: keyboardGrabbed ? 'arrow-micro-up-down' : 'drag' }) }) }));
+});
+export default ResizeHandle;
+//# sourceMappingURL=ResizeHandle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.js","sourceRoot":"","sources":["../../../src/components/Drawer/ResizeHandle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState } from 'react';\nimport type {\n  PropsWithoutRef,\n  Ref,\n  MouseEvent as ReactMouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport Button, { StyledButton } from '../Button';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport { useConsolidatedRef, useEscape, useI18n } from '../../hooks';\nimport { getChildOfRootNode } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\nimport * as DragIcon from '../Icon/icons/drag.icon';\nimport * as ArrowUpDownIcon from '../Icon/icons/arrow-micro-up-down.icon';\n\nregisterIcon(DragIcon);\nregisterIcon(ArrowUpDownIcon);\n\nexport interface ResizeHandleProps {\n  onKeyDown: (e: ReactKeyboardEvent, grabbed: boolean) => void;\n  onMouseDown: (e: ReactMouseEvent) => void;\n}\n\nconst StyledResizeButton = styled(Button)<{\n  rotateIcon?: boolean;\n}>(({ rotateIcon }) => {\n  return css`\n    cursor: grab;\n\n    &:active {\n      cursor: grabbing;\n    }\n\n    &:not(:focus) {\n      ${hideVisually};\n    }\n\n    ${rotateIcon &&\n    css`\n      ${StyledIcon} {\n        transform: rotate(90deg);\n      }\n    `}\n  `;\n});\n\nexport const StyledResizeHandle = styled.div(({ theme }) => {\n  return css`\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block: 0;\n    inline-size: 0.125rem;\n    background-color: transparent;\n    transition: background-color ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    cursor: ew-resize;\n    z-index: ${theme.base['z-index'].max};\n\n    ::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      width: calc(${theme.base['hit-area'].compact} * 0.75);\n    }\n\n    &:hover {\n      background-color: ${theme.base.palette.interactive};\n    }\n\n    ${StyledButton} {\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: calc(-2 * ${theme.base.spacing});\n      translate: 0 -50%;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledResizeHandle.defaultProps = defaultThemeProp;\n\nconst ResizeHandle = forwardRef(function ResizeHandle(\n  { onMouseDown, onKeyDown }: PropsWithoutRef<ResizeHandleProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const resizeHandleRef = useConsolidatedRef<HTMLDivElement>(ref);\n  const t = useI18n();\n\n  const [mouseGrabbed, setMouseGrabbed] = useState(false);\n  const [keyboardGrabbed, setKeyboardGrabbed] = useState(false);\n\n  useEscape(() => {\n    setMouseGrabbed(false);\n    setKeyboardGrabbed(false);\n  });\n\n  const handleKeyDown = (e: ReactKeyboardEvent) => {\n    if (e.code === 'Space') {\n      e.preventDefault();\n      if (keyboardGrabbed) {\n        setKeyboardGrabbed(false);\n      } else {\n        setKeyboardGrabbed(true);\n      }\n    }\n\n    onKeyDown?.(e, keyboardGrabbed);\n  };\n\n  const handleMouseDown = (e: ReactMouseEvent) => {\n    const targetNode = getChildOfRootNode(resizeHandleRef);\n    if (!targetNode) return;\n    targetNode.style.setProperty('user-select', 'none');\n    setMouseGrabbed(true);\n    onMouseDown?.(e);\n  };\n\n  const handleMouseUp = () => {\n    const targetNode = getChildOfRootNode(resizeHandleRef);\n    if (!targetNode) return;\n    targetNode.style.removeProperty('user-select');\n    setMouseGrabbed(false);\n  };\n\n  return (\n    <StyledResizeHandle\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      ref={resizeHandleRef}\n    >\n      <StyledResizeButton\n        tabIndex={0}\n        icon\n        label={!mouseGrabbed && !keyboardGrabbed ? t('resize') : undefined}\n        aria-label={\n          !mouseGrabbed && !keyboardGrabbed\n            ? t('drag_handle_activate_description')\n            : t('drag_handle_cancel_description')\n        }\n        onMouseDown={handleMouseDown}\n        onKeyDown={handleKeyDown}\n        onBlur={() => {\n          setKeyboardGrabbed(false);\n        }}\n        rotateIcon={keyboardGrabbed}\n      >\n        <Icon name={keyboardGrabbed ? 'arrow-micro-up-down' : 'drag'} />\n      </StyledResizeButton>\n    </StyledResizeHandle>\n  );\n});\n\nexport default ResizeHandle;\n"]}

package/lib/components/Drawer/index.d.ts

@@ -1,3 +1,5 @@
 export { default, StyledDrawer } from './Drawer';
+export { default as ResizeHandle } from './ResizeHandle';
 export type { DrawerProps } from './Drawer';
+export type { ResizeHandleProps } from './ResizeHandle';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/Drawer/index.js

@@ -1,2 +1,3 @@
 export { default, StyledDrawer } from './Drawer';
+export { default as ResizeHandle } from './ResizeHandle';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default, StyledDrawer } from './Drawer';\nexport type { DrawerProps } from './Drawer';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default, StyledDrawer } from './Drawer';\nexport { default as ResizeHandle } from './ResizeHandle';\nexport type { DrawerProps } from './Drawer';\nexport type { ResizeHandleProps } from './ResizeHandle';\n"]}

package/lib/components/FieldGroup/FieldGroup.d.ts

@@ -14,6 +14,8 @@ export type FieldGroupProps = BaseProps & {
 } & ({
     /** The name associated with the Field Group. */
     name: string;
+    /** Provides a contextual label for the name. */
+    contextualLabel?: string;
     /** Select the heading tag for header */
     headingTag?: HeadingTag;
     /** Provides additional info relevant to the field group. */
@@ -35,6 +37,7 @@ export type FieldGroupProps = BaseProps & {
     onToggleCollapsed?: () => void;
 } | {
     name?: undefined;
+    contextualLabel?: never;
     headingTag?: never;
     additionalInfo?: never;
     actions?: never;
@@ -42,6 +45,8 @@ export type FieldGroupProps = BaseProps & {
     onToggleCollapsed?: never;
 });
 export declare const StyledFieldGroupName: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFieldHeader: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<import("../Flex").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFieldGroupContent: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<import("../Grid").GridProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFieldGroupLegend: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, Pick<FieldGroupProps, "collapsed">, never>;
 export declare const StyledFieldGroup: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledGroupContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {