@pega/cosmos-react-core 8.13.1 → 8.15.0

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

@@ -1 +1 @@
-{"version":3,"file":"CompositeInput.d.ts","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;0BA8J1D,CAAC,SAAS,MAAM,SAAS,mBAAmB,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI;;;AAzJ9E,wBA2JE"}
+{"version":3,"file":"CompositeInput.d.ts","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;0BAuJ1D,CAAC,SAAS,MAAM,SAAS,mBAAmB,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI;;;AAlJ9E,wBAoJE"}

package/lib/components/CompositeInput/CompositeInput.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef, useRef, useState } from 'react';
 import Icon, { registerIcon } from '../Icon';
 import * as caretDownIcon from '../Icon/icons/caret-down.icon';
 import * as caretUpIcon from '../Icon/icons/caret-up.icon';
 import * as timesIcon from '../Icon/icons/times.icon';
 import { useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';
 import { StyledFormControl } from '../FormControl';
-import { createClassName, getFocusables, withTestIds } from '../../utils';
+import { createClassName, withTestIds } from '../../utils';
 import Flex from '../Flex';
 import Button from '../Button';
 import FormField from '../FormField';
@@ -22,16 +22,10 @@ export default withTestIds(forwardRef(function CompositeInput(props, ref) {
     const [open, setOpen] = useState(false);
     const containerRef = useConsolidatedRef(ref);
     const buttonRef = useRef(null);
-    const formContentRef = useRef(null);
     const closePopover = () => {
         setOpen(false);
         buttonRef.current?.focus();
     };
-    useEffect(() => {
-        if (open) {
-            getFocusables(formContentRef)[0]?.focus();
-        }
-    }, [open, formContentRef.current]);
     const labelId = `${id}-label`;
     const Comp = (_jsxs(Flex, { as: StyledCompositeInput, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, status: status, disabled: disabled, ref: containerRef, children: [_jsxs(Flex, { container: { alignItems: 'center' }, item: { grow: 1 }, as: StyledInputContainer, children: [_jsx(StyledInputButton, { "data-testid": testIds.control, ...restProps, id: id, disabled: disabled, "aria-haspopup": 'dialog', "aria-describedby": info ? `${id}-info` : undefined, "aria-controls": open ? `${id}-dialog` : undefined, className: createClassName('composite-input', className), readOnly: true, required: required, onClick: () => {
                             if (!disabled) {
@@ -52,7 +46,7 @@ export default withTestIds(forwardRef(function CompositeInput(props, ref) {
                         }, "aria-label": t(open ? 'composite_input_close_button_a11y' : 'composite_input_open_button_a11y'), disabled: disabled, tabIndex: '-1', children: _jsx(Icon, { name: open ? 'caret-up' : 'caret-down' }) }))] }), open && containerRef.current && (_jsx(FormDialog, { arrow: false, "aria-label": label, target: containerRef.current, placement: 'bottom-start', onCancel: () => onCancel({ close: closePopover }), onSubmit: {
                     text: t('apply'),
                     handler: () => onApply({ close: closePopover })
-                }, id: `${id}-dialog`, children: _jsx(Flex, { container: { direction: 'column' }, ref: formContentRef, children: _jsx(Renderer, { ...rendererProps }) }) }))] }));
+                }, id: `${id}-dialog`, children: _jsx(Flex, { container: { direction: 'column' }, children: _jsx(Renderer, { ...rendererProps }) }) }))] }));
     return label ? (_jsx(FormField, { testId: testIds, label: label, labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, labelId: labelId, additionalInfo: additionalInfo, children: Comp })) : (Comp);
 }), getCompositeInputTestIds);
 //# sourceMappingURL=CompositeInput.js.map

package/lib/components/CompositeInput/CompositeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompositeInput.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport type { RefElement } from '../../types';\nimport { useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';\nimport { StyledFormControl } from '../FormControl';\nimport { createClassName, getFocusables, withTestIds } from '../../utils';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport FormField from '../FormField';\nimport { FormDialog } from '../Dialog';\n\nimport {\n  StyledCompositeInput,\n  StyledInputButton,\n  StyledInputContainer\n} from './CompositeInput.styles';\nimport type { CompositeInputProps } from './CompositeInput.types';\nimport { getCompositeInputTestIds } from './CompositeInput.test-ids';\n\nregisterIcon(caretDownIcon, caretUpIcon, timesIcon);\n\nexport default withTestIds(\n  forwardRef<RefElement<CompositeInputProps>, PropsWithoutRef<CompositeInputProps>>(\n    function CompositeInput(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        id = uid,\n        disabled,\n        value,\n        onClear,\n        required,\n        status,\n        info,\n        label,\n        labelHidden,\n        additionalInfo,\n        dialog: { renderer: Renderer, rendererProps, onApply, onCancel },\n        className,\n        ...restProps\n      } = props;\n\n      const testIds = useTestIds(testId, getCompositeInputTestIds);\n      const t = useI18n();\n\n      const [open, setOpen] = useState(false);\n\n      const containerRef = useConsolidatedRef<HTMLDivElement>(ref);\n      const buttonRef = useRef<HTMLInputElement>(null);\n      const formContentRef = useRef<HTMLElement>(null);\n\n      const closePopover = () => {\n        setOpen(false);\n        buttonRef.current?.focus();\n      };\n\n      useEffect(() => {\n        if (open) {\n          getFocusables(formContentRef)[0]?.focus();\n        }\n      }, [open, formContentRef.current]);\n\n      const labelId = `${id}-label`;\n\n      const Comp = (\n        <Flex\n          as={StyledCompositeInput}\n          forwardedAs={StyledFormControl}\n          container={{ alignItems: 'center' }}\n          status={status}\n          disabled={disabled}\n          ref={containerRef}\n        >\n          <Flex container={{ alignItems: 'center' }} item={{ grow: 1 }} as={StyledInputContainer}>\n            <StyledInputButton\n              data-testid={testIds.control}\n              {...restProps}\n              id={id}\n              disabled={disabled}\n              aria-haspopup='dialog'\n              aria-describedby={info ? `${id}-info` : undefined}\n              aria-controls={open ? `${id}-dialog` : undefined}\n              className={createClassName('composite-input', className)}\n              readOnly\n              required={required}\n              onClick={() => {\n                if (!disabled) {\n                  setOpen(true);\n                }\n              }}\n              onKeyDown={e => {\n                if (e.key === 'Enter') {\n                  e.preventDefault();\n                  setOpen(true);\n                }\n              }}\n              value={value ?? ''}\n              ref={buttonRef}\n            />\n            {onClear && value && !open ? (\n              <Button\n                icon\n                variant='simple'\n                label={t('clear')}\n                onClick={() => {\n                  onClear();\n                  buttonRef.current?.focus();\n                }}\n                disabled={disabled}\n              >\n                <Icon name='times' />\n              </Button>\n            ) : (\n              <Button\n                icon\n                variant='simple'\n                onClick={() => {\n                  setOpen(!open);\n                }}\n                onMouseDown={(e: MouseEvent) => {\n                  e.preventDefault();\n                }}\n                aria-label={t(\n                  open ? 'composite_input_close_button_a11y' : 'composite_input_open_button_a11y'\n                )}\n                disabled={disabled}\n                tabIndex='-1'\n              >\n                <Icon name={open ? 'caret-up' : 'caret-down'} />\n              </Button>\n            )}\n          </Flex>\n\n          {open && containerRef.current && (\n            <FormDialog\n              arrow={false}\n              // FIXME: The wrath of optional labels, as a ReactNode, strikes again...\n              aria-label={label as string}\n              target={containerRef.current}\n              placement='bottom-start'\n              onCancel={() => onCancel({ close: closePopover })}\n              onSubmit={{\n                text: t('apply'),\n                handler: () => onApply({ close: closePopover })\n              }}\n              id={`${id}-dialog`}\n            >\n              <Flex container={{ direction: 'column' }} ref={formContentRef}>\n                <Renderer {...rendererProps} />\n              </Flex>\n            </FormDialog>\n          )}\n        </Flex>\n      );\n\n      return label ? (\n        <FormField\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          status={status}\n          required={required}\n          disabled={disabled}\n          labelId={labelId}\n          additionalInfo={additionalInfo}\n        >\n          {Comp}\n        </FormField>\n      ) : (\n        Comp\n      );\n    }\n  ) as <P extends object>(props: CompositeInputProps<P>) => JSX.Element | null,\n  getCompositeInputTestIds\n);\n"]}
+{"version":3,"file":"CompositeInput.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useState } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport type { RefElement } from '../../types';\nimport { useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';\nimport { StyledFormControl } from '../FormControl';\nimport { createClassName, withTestIds } from '../../utils';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport FormField from '../FormField';\nimport { FormDialog } from '../Dialog';\n\nimport {\n  StyledCompositeInput,\n  StyledInputButton,\n  StyledInputContainer\n} from './CompositeInput.styles';\nimport type { CompositeInputProps } from './CompositeInput.types';\nimport { getCompositeInputTestIds } from './CompositeInput.test-ids';\n\nregisterIcon(caretDownIcon, caretUpIcon, timesIcon);\n\nexport default withTestIds(\n  forwardRef<RefElement<CompositeInputProps>, PropsWithoutRef<CompositeInputProps>>(\n    function CompositeInput(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        id = uid,\n        disabled,\n        value,\n        onClear,\n        required,\n        status,\n        info,\n        label,\n        labelHidden,\n        additionalInfo,\n        dialog: { renderer: Renderer, rendererProps, onApply, onCancel },\n        className,\n        ...restProps\n      } = props;\n\n      const testIds = useTestIds(testId, getCompositeInputTestIds);\n      const t = useI18n();\n\n      const [open, setOpen] = useState(false);\n\n      const containerRef = useConsolidatedRef<HTMLDivElement>(ref);\n      const buttonRef = useRef<HTMLInputElement>(null);\n\n      const closePopover = () => {\n        setOpen(false);\n        buttonRef.current?.focus();\n      };\n\n      const labelId = `${id}-label`;\n\n      const Comp = (\n        <Flex\n          as={StyledCompositeInput}\n          forwardedAs={StyledFormControl}\n          container={{ alignItems: 'center' }}\n          status={status}\n          disabled={disabled}\n          ref={containerRef}\n        >\n          <Flex container={{ alignItems: 'center' }} item={{ grow: 1 }} as={StyledInputContainer}>\n            <StyledInputButton\n              data-testid={testIds.control}\n              {...restProps}\n              id={id}\n              disabled={disabled}\n              aria-haspopup='dialog'\n              aria-describedby={info ? `${id}-info` : undefined}\n              aria-controls={open ? `${id}-dialog` : undefined}\n              className={createClassName('composite-input', className)}\n              readOnly\n              required={required}\n              onClick={() => {\n                if (!disabled) {\n                  setOpen(true);\n                }\n              }}\n              onKeyDown={e => {\n                if (e.key === 'Enter') {\n                  e.preventDefault();\n                  setOpen(true);\n                }\n              }}\n              value={value ?? ''}\n              ref={buttonRef}\n            />\n            {onClear && value && !open ? (\n              <Button\n                icon\n                variant='simple'\n                label={t('clear')}\n                onClick={() => {\n                  onClear();\n                  buttonRef.current?.focus();\n                }}\n                disabled={disabled}\n              >\n                <Icon name='times' />\n              </Button>\n            ) : (\n              <Button\n                icon\n                variant='simple'\n                onClick={() => {\n                  setOpen(!open);\n                }}\n                onMouseDown={(e: MouseEvent) => {\n                  e.preventDefault();\n                }}\n                aria-label={t(\n                  open ? 'composite_input_close_button_a11y' : 'composite_input_open_button_a11y'\n                )}\n                disabled={disabled}\n                tabIndex='-1'\n              >\n                <Icon name={open ? 'caret-up' : 'caret-down'} />\n              </Button>\n            )}\n          </Flex>\n\n          {open && containerRef.current && (\n            <FormDialog\n              arrow={false}\n              // FIXME: The wrath of optional labels, as a ReactNode, strikes again...\n              aria-label={label as string}\n              target={containerRef.current}\n              placement='bottom-start'\n              onCancel={() => onCancel({ close: closePopover })}\n              onSubmit={{\n                text: t('apply'),\n                handler: () => onApply({ close: closePopover })\n              }}\n              id={`${id}-dialog`}\n            >\n              <Flex container={{ direction: 'column' }}>\n                <Renderer {...rendererProps} />\n              </Flex>\n            </FormDialog>\n          )}\n        </Flex>\n      );\n\n      return label ? (\n        <FormField\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          status={status}\n          required={required}\n          disabled={disabled}\n          labelId={labelId}\n          additionalInfo={additionalInfo}\n        >\n          {Comp}\n        </FormField>\n      ) : (\n        Comp\n      );\n    }\n  ) as <P extends object>(props: CompositeInputProps<P>) => JSX.Element | null,\n  getCompositeInputTestIds\n);\n"]}

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

@@ -53,6 +53,9 @@ export declare const StyledGroupContainer: import("styled-components").StyledCom
     collapsed?: boolean;
     border?: boolean;
 }, never>;
+export declare const StyledDescription: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<import("../HTML").HTMLProps> & {
+    getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
 declare const FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps>;
 export default FieldGroup;
 //# sourceMappingURL=FieldGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAY7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAK7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AAgCJ,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,iBAAiB,gKAAiB,CAAC;AAEhD,eAAO,MAAM,uBAAuB,gKAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,4IA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAkC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;gBAA4B,OAAO;aAAW,OAAO;SA+BrF,CAAC;AAiCF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAuF/D,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAY7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAK7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AAgCJ,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,iBAAiB,gKAAiB,CAAC;AAEhD,eAAO,MAAM,uBAAuB,gKAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,4IA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAkC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;gBAA4B,OAAO;aAAW,OAAO;SA+BrF,CAAC;AAiCF,eAAO,MAAM,iBAAiB;;uDAI7B,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAyF/D,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/FieldGroup/FieldGroup.js

@@ -106,10 +106,15 @@ StyledGroupContainer.defaultProps = defaultThemeProp;
 const FieldGroupLegend = ({ name, contextualLabel, children, collapsed, actions, additionalInfo }) => {
     return (_jsx(StyledFieldGroupLegend, { collapsed: collapsed, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 0.5 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledFieldHeader, children: [children, additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, contextualLabel: contextualLabel || name, children: additionalInfo.content }))] }), actions && _jsx(Actions, { items: actions, contextualLabel: contextualLabel })] }) }));
 };
+export const StyledDescription = styled(HTML) `
+  /* Prevent instruction text from contributing to modal width calculation */
+  width: 0;
+  min-width: 100%;
+`;
 const FieldGroup = forwardRef(function FieldGroup({ children, description, name, contextualLabel, additionalInfo, actions, collapsed, headingTag, onToggleCollapsed, variant, ...restProps }, ref) {
     const t = useI18n();
     const uid = useUID();
-    const descAndChildren = (_jsxs(StyledFieldGroupContent, { container: { cols: 'minmax(0, 1fr)', gap: 2 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
+    const descAndChildren = (_jsxs(StyledFieldGroupContent, { container: { cols: 'minmax(0, 1fr)', gap: 2 }, children: [description && (_jsx(StyledDescription, { id: `${uid}-description`, forwardedAs: 'p', content: description })), _jsx("div", { children: children })] }));
     return (_jsx(StyledGroupContainer, { border: variant === 'form-group', collapsed: collapsed, children: _jsxs(StyledFieldGroup, { "aria-label": contextualLabel || name, "aria-describedby": description ? `${uid}-description` : undefined, as: name ? 'fieldset' : 'div', ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { collapsed: collapsed, actions: actions, additionalInfo: additionalInfo, name: name, contextualLabel: contextualLabel, children: typeof collapsed === 'boolean' ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
                             onToggleCollapsed?.();
                         }, "aria-expanded": !collapsed, "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun', [

package/lib/components/FieldGroup/FieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\n// Types\nexport type FieldGroupProps = BaseProps & {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /** The display and markup variant to apply to the group. */\n  variant?: 'form-group';\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n} & (\n    | {\n        /** The name associated with the Field Group. */\n        name: string;\n        /** Provides a contextual label for the name. */\n        contextualLabel?: string;\n        /** Select the heading tag for header */\n        headingTag?: HeadingTag;\n        /** Provides additional info relevant to the field group. */\n        additionalInfo?: {\n          heading?: AdditionalInfoProps['heading'];\n          content: AdditionalInfoProps['children'];\n        };\n        /** An array of actions to add to the header. */\n        actions?: ActionsProps['items'];\n        /**\n         * Controls the collapsed state of the field group.\n         * Passing undefined will render the field group as non-collapsible.\n         * @default false\n         */\n        collapsed?: boolean;\n        /**\n         * Called when user clicks the toggle button.\n         */\n        onToggleCollapsed?: () => void;\n      }\n    | {\n        name?: undefined;\n        contextualLabel?: never;\n        headingTag?: never;\n        additionalInfo?: never;\n        actions?: never;\n        collapsed?: never;\n        onToggleCollapsed?: never;\n      }\n  );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n  name: NonNullable<FieldGroupProps['name']>;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n  contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n  theme: {\n    base: { animation }\n  }\n}) => {\n  const { rtl } = useDirection();\n  return css`\n    ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n    &[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n    &[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldHeader = styled(Flex)``;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<Pick<FieldGroupProps, 'collapsed'>>(\n  omitProps('collapsed')\n)(\n  ({\n    collapsed,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${!collapsed &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n      word-break: break-word;\n\n      & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ collapsed?: boolean; border?: boolean }>(\n  ({ theme, collapsed, border }) => {\n    const {\n      base: {\n        animation: { speed, timing },\n        palette: { 'border-line': borderColor },\n        spacing,\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        'form-control': { 'border-width': borderWidth }\n      }\n    } = theme;\n    if (!border) return null;\n\n    const showBorder = !collapsed;\n\n    return css`\n      padding: ${spacing};\n      border-radius: calc(${baseBorderRadius} / 2);\n      border: ${borderWidth} solid transparent;\n      transition-property: border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n\n      ${showBorder &&\n      css`\n        border-color: ${borderColor};\n      `}\n    `;\n  }\n);\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n  name,\n  contextualLabel,\n  children,\n  collapsed,\n  actions,\n  additionalInfo\n}: FieldGroupLegendProps) => {\n  return (\n    <StyledFieldGroupLegend collapsed={collapsed}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo\n              heading={additionalInfo.heading}\n              contextualLabel={contextualLabel || name}\n            >\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n  {\n    children,\n    description,\n    name,\n    contextualLabel,\n    additionalInfo,\n    actions,\n    collapsed,\n    headingTag,\n    onToggleCollapsed,\n    variant,\n    ...restProps\n  }: PropsWithoutRef<FieldGroupProps>,\n  ref: FieldGroupProps['ref']\n) {\n  const t = useI18n();\n  const uid = useUID();\n\n  const descAndChildren = (\n    <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n      {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n      <div>{children}</div>\n    </StyledFieldGroupContent>\n  );\n\n  return (\n    <StyledGroupContainer border={variant === 'form-group'} collapsed={collapsed}>\n      <StyledFieldGroup\n        aria-label={contextualLabel || name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        as={name ? 'fieldset' : 'div'}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend\n            collapsed={collapsed}\n            actions={actions}\n            additionalInfo={additionalInfo}\n            name={name}\n            contextualLabel={contextualLabel}\n          >\n            {typeof collapsed === 'boolean' ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  onToggleCollapsed?.();\n                }}\n                aria-expanded={!collapsed}\n                aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n                  contextualLabel || name\n                ])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  {headingTag ? (\n                    <Text variant={headingTag}>{name}</Text>\n                  ) : (\n                    <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                  )}\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <>\n                {headingTag ? (\n                  <Text variant={headingTag}>{name}</Text>\n                ) : (\n                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                )}\n              </>\n            )}\n          </FieldGroupLegend>\n        )}\n\n        {typeof collapsed === 'boolean' ? (\n          <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    </StyledGroupContainer>\n  );\n});\n\nexport default FieldGroup;\n"]}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\n// Types\nexport type FieldGroupProps = BaseProps & {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /** The display and markup variant to apply to the group. */\n  variant?: 'form-group';\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n} & (\n    | {\n        /** The name associated with the Field Group. */\n        name: string;\n        /** Provides a contextual label for the name. */\n        contextualLabel?: string;\n        /** Select the heading tag for header */\n        headingTag?: HeadingTag;\n        /** Provides additional info relevant to the field group. */\n        additionalInfo?: {\n          heading?: AdditionalInfoProps['heading'];\n          content: AdditionalInfoProps['children'];\n        };\n        /** An array of actions to add to the header. */\n        actions?: ActionsProps['items'];\n        /**\n         * Controls the collapsed state of the field group.\n         * Passing undefined will render the field group as non-collapsible.\n         * @default false\n         */\n        collapsed?: boolean;\n        /**\n         * Called when user clicks the toggle button.\n         */\n        onToggleCollapsed?: () => void;\n      }\n    | {\n        name?: undefined;\n        contextualLabel?: never;\n        headingTag?: never;\n        additionalInfo?: never;\n        actions?: never;\n        collapsed?: never;\n        onToggleCollapsed?: never;\n      }\n  );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n  name: NonNullable<FieldGroupProps['name']>;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n  contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n  theme: {\n    base: { animation }\n  }\n}) => {\n  const { rtl } = useDirection();\n  return css`\n    ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n    &[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n    &[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldHeader = styled(Flex)``;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<Pick<FieldGroupProps, 'collapsed'>>(\n  omitProps('collapsed')\n)(\n  ({\n    collapsed,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${!collapsed &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n      word-break: break-word;\n\n      & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ collapsed?: boolean; border?: boolean }>(\n  ({ theme, collapsed, border }) => {\n    const {\n      base: {\n        animation: { speed, timing },\n        palette: { 'border-line': borderColor },\n        spacing,\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        'form-control': { 'border-width': borderWidth }\n      }\n    } = theme;\n    if (!border) return null;\n\n    const showBorder = !collapsed;\n\n    return css`\n      padding: ${spacing};\n      border-radius: calc(${baseBorderRadius} / 2);\n      border: ${borderWidth} solid transparent;\n      transition-property: border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n\n      ${showBorder &&\n      css`\n        border-color: ${borderColor};\n      `}\n    `;\n  }\n);\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n  name,\n  contextualLabel,\n  children,\n  collapsed,\n  actions,\n  additionalInfo\n}: FieldGroupLegendProps) => {\n  return (\n    <StyledFieldGroupLegend collapsed={collapsed}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo\n              heading={additionalInfo.heading}\n              contextualLabel={contextualLabel || name}\n            >\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nexport const StyledDescription = styled(HTML)`\n  /* Prevent instruction text from contributing to modal width calculation */\n  width: 0;\n  min-width: 100%;\n`;\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n  {\n    children,\n    description,\n    name,\n    contextualLabel,\n    additionalInfo,\n    actions,\n    collapsed,\n    headingTag,\n    onToggleCollapsed,\n    variant,\n    ...restProps\n  }: PropsWithoutRef<FieldGroupProps>,\n  ref: FieldGroupProps['ref']\n) {\n  const t = useI18n();\n  const uid = useUID();\n\n  const descAndChildren = (\n    <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n      {description && (\n        <StyledDescription id={`${uid}-description`} forwardedAs='p' content={description} />\n      )}\n      <div>{children}</div>\n    </StyledFieldGroupContent>\n  );\n\n  return (\n    <StyledGroupContainer border={variant === 'form-group'} collapsed={collapsed}>\n      <StyledFieldGroup\n        aria-label={contextualLabel || name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        as={name ? 'fieldset' : 'div'}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend\n            collapsed={collapsed}\n            actions={actions}\n            additionalInfo={additionalInfo}\n            name={name}\n            contextualLabel={contextualLabel}\n          >\n            {typeof collapsed === 'boolean' ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  onToggleCollapsed?.();\n                }}\n                aria-expanded={!collapsed}\n                aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n                  contextualLabel || name\n                ])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  {headingTag ? (\n                    <Text variant={headingTag}>{name}</Text>\n                  ) : (\n                    <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                  )}\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <>\n                {headingTag ? (\n                  <Text variant={headingTag}>{name}</Text>\n                ) : (\n                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                )}\n              </>\n            )}\n          </FieldGroupLegend>\n        )}\n\n        {typeof collapsed === 'boolean' ? (\n          <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    </StyledGroupContainer>\n  );\n});\n\nexport default FieldGroup;\n"]}

package/lib/components/Modal/MinimizedModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MinimizedModal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAU9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAqChD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CA2FhE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"MinimizedModal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAU9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AA0ChD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAsGhE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/Modal/MinimizedModal.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
 import styled, { css } from 'styled-components';
 import Button from '../Button';
 import BareRoleButton from '../Button/BareRoleButton';
@@ -9,6 +10,7 @@ import * as undockIcon from '../Icon/icons/undock.icon';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import { useI18n, useModalContext } from '../../hooks';
+import useModalMove from './useModalMove';
 registerIcon(timesIcon, minusIcon, undockIcon);
 const StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {
     return css `
@@ -38,22 +40,34 @@ const StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
+    &[data-moveable] {
+      position: absolute;
+    }
   `;
 });
 StyledMinimizedModal.defaultProps = defaultThemeProp;
 const MinimizedModal = ({ heading, onBeforeClose, onAfterClose, onRequestDismiss, onRequestActivate, onRequestMinimize, onRequestMaximize, onRequestDock, ...restProps }) => {
-    const { dismissible, dockable, maximizable, dock, maximize, activate, unmount } = useModalContext();
+    const { dismissible, dockable, moveable, maximizable, dock, maximize, activate, unmount } = useModalContext();
     const t = useI18n();
+    // Note StyledMinimizedModal is a div but has the role of button
+    const ref = useRef(null);
+    const modalMoveReturnRef = useModalMove({
+        enabled: !!moveable,
+        moveRef: ref
+    });
     return (_jsxs(Flex, { ...restProps, container: { alignItems: 'center', justify: 'between', pad: [0, 2], gap: 2 }, item: { shrink: 0 }, as: StyledMinimizedModal, "aria-label": `${t('activate')} ${heading}`, onKeyDown: (e) => {
             // Prevent issues when auto focusing on close button.
             if ((e.key === 'Space' || e.key === 'Enter') && e.target === e.currentTarget)
                 e.preventDefault();
         }, onClick: () => {
+            if (modalMoveReturnRef.current?.mouseMoved)
+                return;
             if (onRequestActivate?.() !== false && !dockable)
                 activate();
             if (onRequestDock?.() !== false && dockable)
                 dock();
-        }, "data-app-region": true, children: [_jsx("div", { children: heading }), (maximizable || dockable || dismissible) && (_jsxs(Flex, { container: true, children: [maximizable && (_jsx(Button, { label: t('maximize'), "aria-label": t('modal_maximize'), variant: 'simple', onClick: () => {
+        }, "data-app-region": true, "data-moveable": moveable ? '' : undefined, ref: ref, children: [_jsx("div", { children: heading }), (maximizable || dockable || dismissible) && (_jsxs(Flex, { container: true, children: [maximizable && (_jsx(Button, { label: t('maximize'), "aria-label": t('modal_maximize'), variant: 'simple', onClick: () => {
                             if (onRequestMaximize?.() !== false) {
                                 maximize();
                             }

package/lib/components/Modal/MinimizedModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"MinimizedModal.js","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport BareRoleButton from '../Button/BareRoleButton';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport { useI18n, useModalContext } from '../../hooks';\n\nimport type { ModalProps } from './Modal.types';\n\nregisterIcon(timesIcon, minusIcon, undockIcon);\n\nconst StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {\n  return css`\n    height: 3rem;\n    width: 30ch;\n    border-radius: calc(0.5 * ${base['border-radius']}) calc(0.5 * ${base['border-radius']}) 0 0;\n    color: ${base.palette['foreground-color']};\n    background-color: ${base.palette['primary-background']};\n    box-shadow: ${base.shadow.low};\n    cursor: pointer;\n    user-select: none;\n    pointer-events: auto;\n    transition: box-shadow ${base.animation.speed} ${base.animation.timing.ease};\n\n    &:hover {\n      box-shadow: ${base.shadow.high};\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${base.shadow.focus};\n    }\n\n    > div:first-child {\n      margin-inline-end: auto;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  `;\n});\n\nStyledMinimizedModal.defaultProps = defaultThemeProp;\n\nconst MinimizedModal: FunctionComponent<ModalProps & ForwardProps> = ({\n  heading,\n  onBeforeClose,\n  onAfterClose,\n  onRequestDismiss,\n  onRequestActivate,\n  onRequestMinimize,\n  onRequestMaximize,\n  onRequestDock,\n  ...restProps\n}) => {\n  const { dismissible, dockable, maximizable, dock, maximize, activate, unmount } =\n    useModalContext();\n\n  const t = useI18n();\n\n  return (\n    <Flex\n      {...restProps}\n      container={{ alignItems: 'center', justify: 'between', pad: [0, 2], gap: 2 }}\n      item={{ shrink: 0 }}\n      as={StyledMinimizedModal}\n      aria-label={`${t('activate')} ${heading}`}\n      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n        // Prevent issues when auto focusing on close button.\n        if ((e.key === 'Space' || e.key === 'Enter') && e.target === e.currentTarget)\n          e.preventDefault();\n      }}\n      onClick={() => {\n        if (onRequestActivate?.() !== false && !dockable) activate();\n        if (onRequestDock?.() !== false && dockable) dock();\n      }}\n      data-app-region\n    >\n      <div>{heading}</div>\n\n      {(maximizable || dockable || dismissible) && (\n        <Flex container>\n          {maximizable && (\n            <Button\n              label={t('maximize')}\n              aria-label={t('modal_maximize')}\n              variant='simple'\n              onClick={() => {\n                if (onRequestMaximize?.() !== false) {\n                  maximize();\n                }\n              }}\n              icon\n            >\n              <Icon name='undock' />\n            </Button>\n          )}\n\n          {dockable && (\n            <Button\n              label={t('dock')}\n              aria-label={t('modal_dock')}\n              variant='simple'\n              onClick={() => {\n                if (onRequestDock?.() !== false) {\n                  dock();\n                }\n              }}\n              icon\n            >\n              <Icon name='dock' />\n            </Button>\n          )}\n\n          {dismissible && (\n            <Button\n              label={t('close')}\n              aria-label={t('modal_close')}\n              variant='simple'\n              onClick={() => {\n                if (onRequestDismiss?.() !== false) {\n                  onBeforeClose?.();\n                  unmount();\n                  onAfterClose?.();\n                }\n              }}\n              icon\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport default MinimizedModal;\n"]}
+{"version":3,"file":"MinimizedModal.js","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef } from 'react';\nimport type { FunctionComponent, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport BareRoleButton from '../Button/BareRoleButton';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport { useI18n, useModalContext } from '../../hooks';\n\nimport type { ModalProps } from './Modal.types';\nimport useModalMove from './useModalMove';\n\nregisterIcon(timesIcon, minusIcon, undockIcon);\n\nconst StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {\n  return css`\n    height: 3rem;\n    width: 30ch;\n    border-radius: calc(0.5 * ${base['border-radius']}) calc(0.5 * ${base['border-radius']}) 0 0;\n    color: ${base.palette['foreground-color']};\n    background-color: ${base.palette['primary-background']};\n    box-shadow: ${base.shadow.low};\n    cursor: pointer;\n    user-select: none;\n    pointer-events: auto;\n    transition: box-shadow ${base.animation.speed} ${base.animation.timing.ease};\n\n    &:hover {\n      box-shadow: ${base.shadow.high};\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${base.shadow.focus};\n    }\n\n    > div:first-child {\n      margin-inline-end: auto;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    &[data-moveable] {\n      position: absolute;\n    }\n  `;\n});\n\nStyledMinimizedModal.defaultProps = defaultThemeProp;\n\nconst MinimizedModal: FunctionComponent<ModalProps & ForwardProps> = ({\n  heading,\n  onBeforeClose,\n  onAfterClose,\n  onRequestDismiss,\n  onRequestActivate,\n  onRequestMinimize,\n  onRequestMaximize,\n  onRequestDock,\n  ...restProps\n}) => {\n  const { dismissible, dockable, moveable, maximizable, dock, maximize, activate, unmount } =\n    useModalContext();\n\n  const t = useI18n();\n\n  // Note StyledMinimizedModal is a div but has the role of button\n  const ref = useRef<HTMLDivElement>(null);\n\n  const modalMoveReturnRef = useModalMove({\n    enabled: !!moveable,\n    moveRef: ref\n  });\n\n  return (\n    <Flex\n      {...restProps}\n      container={{ alignItems: 'center', justify: 'between', pad: [0, 2], gap: 2 }}\n      item={{ shrink: 0 }}\n      as={StyledMinimizedModal}\n      aria-label={`${t('activate')} ${heading}`}\n      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n        // Prevent issues when auto focusing on close button.\n        if ((e.key === 'Space' || e.key === 'Enter') && e.target === e.currentTarget)\n          e.preventDefault();\n      }}\n      onClick={() => {\n        if (modalMoveReturnRef.current?.mouseMoved) return;\n        if (onRequestActivate?.() !== false && !dockable) activate();\n        if (onRequestDock?.() !== false && dockable) dock();\n      }}\n      data-app-region\n      data-moveable={moveable ? '' : undefined}\n      ref={ref}\n    >\n      <div>{heading}</div>\n\n      {(maximizable || dockable || dismissible) && (\n        <Flex container>\n          {maximizable && (\n            <Button\n              label={t('maximize')}\n              aria-label={t('modal_maximize')}\n              variant='simple'\n              onClick={() => {\n                if (onRequestMaximize?.() !== false) {\n                  maximize();\n                }\n              }}\n              icon\n            >\n              <Icon name='undock' />\n            </Button>\n          )}\n\n          {dockable && (\n            <Button\n              label={t('dock')}\n              aria-label={t('modal_dock')}\n              variant='simple'\n              onClick={() => {\n                if (onRequestDock?.() !== false) {\n                  dock();\n                }\n              }}\n              icon\n            >\n              <Icon name='dock' />\n            </Button>\n          )}\n\n          {dismissible && (\n            <Button\n              label={t('close')}\n              aria-label={t('modal_close')}\n              variant='simple'\n              onClick={() => {\n                if (onRequestDismiss?.() !== false) {\n                  onBeforeClose?.();\n                  unmount();\n                  onAfterClose?.();\n                }\n              }}\n              icon\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport default MinimizedModal;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAuBhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAUhD,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAsVtD,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAuBhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAWhD,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAmWtD,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/lib/components/Modal/Modal.js

@@ -17,11 +17,13 @@ import ResponsiveActions from '../ResponsiveActions';
 import { getCSSTimeInMilliseconds } from '../../styles';
 import MinimizedModal from './MinimizedModal';
 import { StyledModal, StyledModalHeader, StyledModalContent, StyledModalChildrenWrap } from './Modal.styles';
+import useModalMove from './useModalMove';
 registerIcon(timesIcon, minusIcon, dockIcon, undockIcon);
 const Modal = forwardRef(function Modal(props, ref) {
     const { as = 'div', progress = false, heading, headingTag = 'h2', count, children, actions, stretch = false, center = false, defaultFocus, onBeforeOpen, onAfterOpen, onBeforeClose, onAfterClose, onRequestDismiss, onRequestMinimize, onRequestMaximize, onRequestDock, onRequestActivate, ...restProps } = props;
-    const { alert, dismissible, minimizable, maximizable, dockable, state, dismiss, minimize, maximize, dock, unmount, top } = useModalContext();
+    const { alert, dismissible, minimizable, maximizable, dockable, moveable: moveableOption, state, dismiss, minimize, maximize, dock, unmount, top } = useModalContext();
     const modalRef = useConsolidatedRef(ref);
+    const modalHeaderRef = useRef(null);
     const modalContentRef = useRef(null);
     const modalActionsRef = useRef(null);
     const backdropRef = useRef(null);
@@ -137,7 +139,14 @@ const Modal = forwardRef(function Modal(props, ref) {
         });
     }, [state]);
     const maximized = stretch || state === 'maximized';
-    const modal = (_jsxs(Flex, { ...restProps, container: { direction: 'column' }, ref: modalRef, as: StyledModal, forwardedAs: as, onClick: (e) => e.stopPropagation(), onKeyDown: onModalKeyDown, alert: alert, role: alert ? 'alertdialog' : 'dialog', stretch: maximized, center: center, "aria-labelledby": `${id}-heading`, "aria-describedby": alert ? `${id}-content` : undefined, "aria-modal": state !== 'docked', state: state, "aria-busy": !!progress, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'start', gap: 1 }, item: { shrink: 0 }, as: StyledModalHeader, role: 'none', hasAction: minimizable || dismissible, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, as: Text, variant: headingTag, id: `${id}-heading`, children: [_jsx("span", { children: heading }), typeof count === 'number' && _jsx(Count, { children: count })] }), _jsxs(Flex, { container: true, children: [maximizable && !alert && state !== 'maximized' && (_jsx(Button, { icon: true, variant: 'simple', label: t('maximize'), "aria-label": t('modal_maximize'), onKeyDown: onHeaderActionKeyDown, onClick: () => {
+    // Only enable useModalMove in docked state here since MinimizedModal handles calling when minimized
+    const moveable = state === 'docked' && !!moveableOption;
+    useModalMove({
+        enabled: moveable,
+        moveRef: modalRef,
+        grabRef: modalHeaderRef
+    });
+    const modal = (_jsxs(Flex, { ...restProps, container: { direction: 'column' }, ref: modalRef, as: StyledModal, forwardedAs: as, onClick: (e) => e.stopPropagation(), onKeyDown: onModalKeyDown, alert: alert, role: alert ? 'alertdialog' : 'dialog', stretch: maximized, center: center, "aria-labelledby": `${id}-heading`, "aria-describedby": alert ? `${id}-content` : undefined, "aria-modal": state !== 'docked', state: state, "aria-busy": !!progress, "data-moveable": moveable ? '' : undefined, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'start', gap: 1 }, item: { shrink: 0 }, as: StyledModalHeader, role: 'none', hasAction: minimizable || dismissible, ref: modalHeaderRef, tabIndex: moveable ? 0 : undefined, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, as: Text, variant: headingTag, id: `${id}-heading`, children: [_jsx("span", { children: heading }), typeof count === 'number' && _jsx(Count, { children: count })] }), _jsxs(Flex, { container: true, children: [maximizable && !alert && state !== 'maximized' && (_jsx(Button, { icon: true, variant: 'simple', label: t('maximize'), "aria-label": t('modal_maximize'), onKeyDown: onHeaderActionKeyDown, onClick: () => {
                                     if (onRequestMaximize?.() !== false) {
                                         maximize();
                                     }

package/lib/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef, useCallback, useState, useLayoutEffect } from 'react';\nimport type {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\n\nimport Progress, { type ProgressProps } from '../Progress';\nimport { getFocusables } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport type { ForwardProps } from '../../types';\nimport {\n  useConsolidatedRef,\n  useI18n,\n  useOuterEvent,\n  useUID,\n  useFocusTrap,\n  usePrevious,\n  useModalContext,\n  useEvent,\n  useTheme\n} from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as dockIcon from '../Icon/icons/dock.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport ResponsiveActions from '../ResponsiveActions';\nimport { getCSSTimeInMilliseconds } from '../../styles';\n\nimport MinimizedModal from './MinimizedModal';\nimport type { ModalProps } from './Modal.types';\nimport {\n  StyledModal,\n  StyledModalHeader,\n  StyledModalContent,\n  StyledModalChildrenWrap\n} from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, dockIcon, undockIcon);\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(function Modal(\n  props: PropsWithoutRef<ModalProps>,\n  ref: Ref<HTMLElement>\n) {\n  const {\n    as = 'div',\n    progress = false,\n    heading,\n    headingTag = 'h2',\n    count,\n    children,\n    actions,\n    stretch = false,\n    center = false,\n    defaultFocus,\n    onBeforeOpen,\n    onAfterOpen,\n    onBeforeClose,\n    onAfterClose,\n    onRequestDismiss,\n    onRequestMinimize,\n    onRequestMaximize,\n    onRequestDock,\n    onRequestActivate,\n    ...restProps\n  } = props;\n\n  const {\n    alert,\n    dismissible,\n    minimizable,\n    maximizable,\n    dockable,\n    state,\n    dismiss,\n    minimize,\n    maximize,\n    dock,\n    unmount,\n    top\n  } = useModalContext();\n\n  const modalRef = useConsolidatedRef(ref);\n  const modalContentRef = useRef<HTMLDivElement>(null);\n  const modalActionsRef = useRef<HTMLDivElement>(null);\n  const backdropRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const previousState = usePrevious(state);\n  const id = useUID();\n  const t = useI18n();\n  const [progressMessage, setProgressMessage] = useState<ProgressProps['message']>(undefined);\n  const [isCloseButtonDisabled, setIsCloseButtonDisabled] = useState(true);\n  const theme = useTheme();\n\n  const tryDismiss = () => {\n    if (onRequestDismiss?.() !== false) {\n      dismiss();\n    }\n  };\n\n  const setFocus = () => {\n    if (progress) return;\n\n    const focusables = getFocusables(modalRef);\n\n    if (defaultFocus?.current) {\n      defaultFocus.current.focus();\n    } else {\n      const focusable =\n        focusables.find(el => {\n          return modalContentRef.current?.contains(el);\n        }) ??\n        closeButtonRef.current ??\n        focusables[0];\n\n      focusable?.focus();\n    }\n  };\n\n  useFocusTrap(modalRef, false);\n  useEvent('shortcut', e => e.stopPropagation(), { eventOptions: { capture: true } });\n\n  useOuterEvent('mousedown', [modalRef], e => {\n    if (['minimized', 'docked', 'closed'].includes(state)) return;\n\n    if (dismissible) {\n      if (e.target === backdropRef.current) {\n        tryDismiss();\n      }\n    } else {\n      modalRef.current?.focus();\n    }\n  });\n\n  useEffect(() => {\n    if (state === 'minimized') return;\n    if (state === 'open' || state === 'maximized' || state === 'docked') setFocus();\n    if (state === 'docked') setIsCloseButtonDisabled(false);\n\n    // This won't actually run until potential changes to docked modal handling.\n    if (state === 'closed' && previousState === 'docked') {\n      onBeforeClose?.();\n      unmount();\n      onAfterClose?.();\n    }\n  }, [state]);\n\n  useEffect(() => {\n    // If a modal is already in a closed state on initial mount, unmount it.\n    // This only happens when a docked modal closes since the ModalManager\n    // remounts it outside of the DockedModals container if state !== 'docked'.\n    if (state === 'closed') {\n      onBeforeClose?.();\n      unmount();\n      onAfterClose?.();\n    }\n  }, []);\n\n  // Dismiss on Escape needs to be handled using React event handling to be cancelable using SyntheticEvent.stopPropagation.\n  const onModalKeyDown = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (dismissible && (state === 'open' || state === 'maximized') && e.key === 'Escape' && top) {\n        tryDismiss();\n      }\n    },\n    [dismissible, state, top, tryDismiss]\n  );\n\n  const onHeaderActionKeyDown = useCallback((e: ReactKeyboardEvent<HTMLButtonElement>) => {\n    if (e.repeat && (e.key === 'Enter' || e.key === ' ')) e.preventDefault();\n  }, []);\n\n  useEffect(() => {\n    if (!progress) {\n      setFocus();\n    }\n\n    if (typeof progress === 'object' && progress.message !== progressMessage) {\n      setProgressMessage(progress.message);\n    } else if (progress === true) {\n      setProgressMessage(t('loading'));\n    }\n  }, [progress]);\n\n  // Animate enter and exit\n  useLayoutEffect(() => {\n    if (!modalRef.current) return;\n\n    const translate = ['0 -4rem', '0 0'];\n    const options: KeyframeAnimationOptions = {\n      // Multiplier needed to coordinate with Backdrop's transition speed multiplier\n      duration: getCSSTimeInMilliseconds(theme.base.animation.speed) * 2,\n      easing: theme.base.animation.timing.ease,\n      fill: 'forwards'\n    };\n\n    let animation: Animation | undefined;\n\n    if (state === 'open') {\n      animation = modalRef.current.animate({ translate }, options);\n    } else if (state === 'closed' && previousState === 'open') {\n      animation = modalRef.current.animate({ translate: translate.reverse() }, options);\n    }\n\n    // Handler will not leak since animation object is garbage collected\n    animation?.addEventListener('finish', () => {\n      // Removes the element from the compositor.\n      animation.cancel();\n    });\n  }, [state]);\n\n  const maximized = stretch || state === 'maximized';\n\n  const modal = (\n    <Flex\n      {...restProps}\n      container={{ direction: 'column' }}\n      ref={modalRef}\n      as={StyledModal}\n      forwardedAs={as}\n      onClick={(e: MouseEvent) => e.stopPropagation()}\n      onKeyDown={onModalKeyDown}\n      alert={alert}\n      role={alert ? 'alertdialog' : 'dialog'}\n      stretch={maximized}\n      center={center}\n      aria-labelledby={`${id}-heading`}\n      aria-describedby={alert ? `${id}-content` : undefined}\n      aria-modal={state !== 'docked'}\n      state={state}\n      aria-busy={!!progress}\n    >\n      <Flex\n        container={{ justify: 'between', alignItems: 'start', gap: 1 }}\n        item={{ shrink: 0 }}\n        as={StyledModalHeader}\n        role='none'\n        hasAction={minimizable || dismissible}\n      >\n        <Flex\n          container={{ alignItems: 'center', gap: 1 }}\n          as={Text}\n          variant={headingTag}\n          id={`${id}-heading`}\n        >\n          <span>{heading}</span>\n          {typeof count === 'number' && <Count>{count}</Count>}\n        </Flex>\n\n        <Flex container>\n          {maximizable && !alert && state !== 'maximized' && (\n            <Button\n              icon\n              variant='simple'\n              label={t('maximize')}\n              aria-label={t('modal_maximize')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (onRequestMaximize?.() !== false) {\n                  maximize();\n                }\n              }}\n            >\n              <Icon name='undock' />\n            </Button>\n          )}\n          {dockable && !alert && state !== 'docked' && (\n            <Button\n              icon\n              variant='simple'\n              label={t('dock')}\n              aria-label={t('modal_dock')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (onRequestDock?.() !== false) {\n                  dock();\n                }\n              }}\n            >\n              <Icon name='dock' />\n            </Button>\n          )}\n          {minimizable && !alert && (\n            <Button\n              icon\n              variant='simple'\n              label={t('minimize')}\n              aria-label={t('modal_minimize')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (onRequestMinimize?.() !== false) {\n                  minimize();\n                }\n              }}\n            >\n              <Icon name='minus' />\n            </Button>\n          )}\n          {dismissible && !alert && (\n            <Button\n              icon\n              variant='simple'\n              label={t('close')}\n              aria-label={t('modal_close')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (!isCloseButtonDisabled) {\n                  tryDismiss();\n                }\n              }}\n              ref={closeButtonRef}\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n        </Flex>\n      </Flex>\n\n      <Flex\n        item={{ grow: 1 }}\n        as={StyledModalContent}\n        ref={modalContentRef}\n        style={\n          modalContentRef.current\n            ? { '--scroll-top': `${modalContentRef.current.scrollTop}px` }\n            : undefined\n        }\n      >\n        {children && (\n          <StyledModalChildrenWrap id={`${id}-content`} inert={progress ? '' : undefined}>\n            {children}\n          </StyledModalChildrenWrap>\n        )}\n\n        <Progress\n          visible={!!progress}\n          focusOnVisible\n          delay\n          placement='local'\n          message={progressMessage}\n          onTransitionEndOut={() => setProgressMessage(undefined)}\n        />\n      </Flex>\n\n      {actions && (\n        <ResponsiveActions\n          as='footer'\n          role='none'\n          actionsRef={modalActionsRef}\n          actionsEl={actions}\n        />\n      )}\n    </Flex>\n  );\n\n  const renderModal =\n    state === 'docked' ? (\n      modal\n    ) : (\n      <Backdrop\n        ref={backdropRef}\n        container={{\n          alignItems: center || maximized ? 'center' : 'start'\n        }}\n        transitionSpeed='slow'\n        open={state === 'open' || state === 'maximized'}\n        onBeforeTransitionIn={onBeforeOpen}\n        onAfterTransitionIn={() => {\n          setIsCloseButtonDisabled(false);\n          onAfterOpen?.();\n        }}\n        onBeforeTransitionOut={onBeforeClose}\n        onAfterTransitionOut={() => {\n          unmount();\n          onAfterClose?.();\n        }}\n      >\n        {modal}\n      </Backdrop>\n    );\n\n  return state === 'minimized' ? <MinimizedModal {...props} {...restProps} /> : renderModal;\n});\n\nexport default Modal;\n"]}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef, useCallback, useState, useLayoutEffect } from 'react';\nimport type {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\n\nimport Progress, { type ProgressProps } from '../Progress';\nimport { getFocusables } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport type { ForwardProps } from '../../types';\nimport {\n  useConsolidatedRef,\n  useI18n,\n  useOuterEvent,\n  useUID,\n  useFocusTrap,\n  usePrevious,\n  useModalContext,\n  useEvent,\n  useTheme\n} from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as dockIcon from '../Icon/icons/dock.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport ResponsiveActions from '../ResponsiveActions';\nimport { getCSSTimeInMilliseconds } from '../../styles';\n\nimport MinimizedModal from './MinimizedModal';\nimport type { ModalProps } from './Modal.types';\nimport {\n  StyledModal,\n  StyledModalHeader,\n  StyledModalContent,\n  StyledModalChildrenWrap\n} from './Modal.styles';\nimport useModalMove from './useModalMove';\n\nregisterIcon(timesIcon, minusIcon, dockIcon, undockIcon);\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(function Modal(\n  props: PropsWithoutRef<ModalProps>,\n  ref: Ref<HTMLElement>\n) {\n  const {\n    as = 'div',\n    progress = false,\n    heading,\n    headingTag = 'h2',\n    count,\n    children,\n    actions,\n    stretch = false,\n    center = false,\n    defaultFocus,\n    onBeforeOpen,\n    onAfterOpen,\n    onBeforeClose,\n    onAfterClose,\n    onRequestDismiss,\n    onRequestMinimize,\n    onRequestMaximize,\n    onRequestDock,\n    onRequestActivate,\n    ...restProps\n  } = props;\n\n  const {\n    alert,\n    dismissible,\n    minimizable,\n    maximizable,\n    dockable,\n    moveable: moveableOption,\n    state,\n    dismiss,\n    minimize,\n    maximize,\n    dock,\n    unmount,\n    top\n  } = useModalContext();\n\n  const modalRef = useConsolidatedRef(ref);\n  const modalHeaderRef = useRef(null);\n  const modalContentRef = useRef<HTMLDivElement>(null);\n  const modalActionsRef = useRef<HTMLDivElement>(null);\n  const backdropRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const previousState = usePrevious(state);\n  const id = useUID();\n  const t = useI18n();\n  const [progressMessage, setProgressMessage] = useState<ProgressProps['message']>(undefined);\n  const [isCloseButtonDisabled, setIsCloseButtonDisabled] = useState(true);\n  const theme = useTheme();\n\n  const tryDismiss = () => {\n    if (onRequestDismiss?.() !== false) {\n      dismiss();\n    }\n  };\n\n  const setFocus = () => {\n    if (progress) return;\n\n    const focusables = getFocusables(modalRef);\n\n    if (defaultFocus?.current) {\n      defaultFocus.current.focus();\n    } else {\n      const focusable =\n        focusables.find(el => {\n          return modalContentRef.current?.contains(el);\n        }) ??\n        closeButtonRef.current ??\n        focusables[0];\n\n      focusable?.focus();\n    }\n  };\n\n  useFocusTrap(modalRef, false);\n  useEvent('shortcut', e => e.stopPropagation(), { eventOptions: { capture: true } });\n\n  useOuterEvent('mousedown', [modalRef], e => {\n    if (['minimized', 'docked', 'closed'].includes(state)) return;\n\n    if (dismissible) {\n      if (e.target === backdropRef.current) {\n        tryDismiss();\n      }\n    } else {\n      modalRef.current?.focus();\n    }\n  });\n\n  useEffect(() => {\n    if (state === 'minimized') return;\n    if (state === 'open' || state === 'maximized' || state === 'docked') setFocus();\n    if (state === 'docked') setIsCloseButtonDisabled(false);\n\n    // This won't actually run until potential changes to docked modal handling.\n    if (state === 'closed' && previousState === 'docked') {\n      onBeforeClose?.();\n      unmount();\n      onAfterClose?.();\n    }\n  }, [state]);\n\n  useEffect(() => {\n    // If a modal is already in a closed state on initial mount, unmount it.\n    // This only happens when a docked modal closes since the ModalManager\n    // remounts it outside of the DockedModals container if state !== 'docked'.\n    if (state === 'closed') {\n      onBeforeClose?.();\n      unmount();\n      onAfterClose?.();\n    }\n  }, []);\n\n  // Dismiss on Escape needs to be handled using React event handling to be cancelable using SyntheticEvent.stopPropagation.\n  const onModalKeyDown = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (dismissible && (state === 'open' || state === 'maximized') && e.key === 'Escape' && top) {\n        tryDismiss();\n      }\n    },\n    [dismissible, state, top, tryDismiss]\n  );\n\n  const onHeaderActionKeyDown = useCallback((e: ReactKeyboardEvent<HTMLButtonElement>) => {\n    if (e.repeat && (e.key === 'Enter' || e.key === ' ')) e.preventDefault();\n  }, []);\n\n  useEffect(() => {\n    if (!progress) {\n      setFocus();\n    }\n\n    if (typeof progress === 'object' && progress.message !== progressMessage) {\n      setProgressMessage(progress.message);\n    } else if (progress === true) {\n      setProgressMessage(t('loading'));\n    }\n  }, [progress]);\n\n  // Animate enter and exit\n  useLayoutEffect(() => {\n    if (!modalRef.current) return;\n\n    const translate = ['0 -4rem', '0 0'];\n    const options: KeyframeAnimationOptions = {\n      // Multiplier needed to coordinate with Backdrop's transition speed multiplier\n      duration: getCSSTimeInMilliseconds(theme.base.animation.speed) * 2,\n      easing: theme.base.animation.timing.ease,\n      fill: 'forwards'\n    };\n\n    let animation: Animation | undefined;\n\n    if (state === 'open') {\n      animation = modalRef.current.animate({ translate }, options);\n    } else if (state === 'closed' && previousState === 'open') {\n      animation = modalRef.current.animate({ translate: translate.reverse() }, options);\n    }\n\n    // Handler will not leak since animation object is garbage collected\n    animation?.addEventListener('finish', () => {\n      // Removes the element from the compositor.\n      animation.cancel();\n    });\n  }, [state]);\n\n  const maximized = stretch || state === 'maximized';\n\n  // Only enable useModalMove in docked state here since MinimizedModal handles calling when minimized\n  const moveable = state === 'docked' && !!moveableOption;\n  useModalMove({\n    enabled: moveable,\n    moveRef: modalRef,\n    grabRef: modalHeaderRef\n  });\n\n  const modal = (\n    <Flex\n      {...restProps}\n      container={{ direction: 'column' }}\n      ref={modalRef}\n      as={StyledModal}\n      forwardedAs={as}\n      onClick={(e: MouseEvent) => e.stopPropagation()}\n      onKeyDown={onModalKeyDown}\n      alert={alert}\n      role={alert ? 'alertdialog' : 'dialog'}\n      stretch={maximized}\n      center={center}\n      aria-labelledby={`${id}-heading`}\n      aria-describedby={alert ? `${id}-content` : undefined}\n      aria-modal={state !== 'docked'}\n      state={state}\n      aria-busy={!!progress}\n      data-moveable={moveable ? '' : undefined}\n    >\n      <Flex\n        container={{ justify: 'between', alignItems: 'start', gap: 1 }}\n        item={{ shrink: 0 }}\n        as={StyledModalHeader}\n        role='none'\n        hasAction={minimizable || dismissible}\n        ref={modalHeaderRef}\n        tabIndex={moveable ? 0 : undefined}\n      >\n        <Flex\n          container={{ alignItems: 'center', gap: 1 }}\n          as={Text}\n          variant={headingTag}\n          id={`${id}-heading`}\n        >\n          <span>{heading}</span>\n          {typeof count === 'number' && <Count>{count}</Count>}\n        </Flex>\n\n        <Flex container>\n          {maximizable && !alert && state !== 'maximized' && (\n            <Button\n              icon\n              variant='simple'\n              label={t('maximize')}\n              aria-label={t('modal_maximize')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (onRequestMaximize?.() !== false) {\n                  maximize();\n                }\n              }}\n            >\n              <Icon name='undock' />\n            </Button>\n          )}\n          {dockable && !alert && state !== 'docked' && (\n            <Button\n              icon\n              variant='simple'\n              label={t('dock')}\n              aria-label={t('modal_dock')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (onRequestDock?.() !== false) {\n                  dock();\n                }\n              }}\n            >\n              <Icon name='dock' />\n            </Button>\n          )}\n          {minimizable && !alert && (\n            <Button\n              icon\n              variant='simple'\n              label={t('minimize')}\n              aria-label={t('modal_minimize')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (onRequestMinimize?.() !== false) {\n                  minimize();\n                }\n              }}\n            >\n              <Icon name='minus' />\n            </Button>\n          )}\n          {dismissible && !alert && (\n            <Button\n              icon\n              variant='simple'\n              label={t('close')}\n              aria-label={t('modal_close')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (!isCloseButtonDisabled) {\n                  tryDismiss();\n                }\n              }}\n              ref={closeButtonRef}\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n        </Flex>\n      </Flex>\n\n      <Flex\n        item={{ grow: 1 }}\n        as={StyledModalContent}\n        ref={modalContentRef}\n        style={\n          modalContentRef.current\n            ? { '--scroll-top': `${modalContentRef.current.scrollTop}px` }\n            : undefined\n        }\n      >\n        {children && (\n          <StyledModalChildrenWrap id={`${id}-content`} inert={progress ? '' : undefined}>\n            {children}\n          </StyledModalChildrenWrap>\n        )}\n\n        <Progress\n          visible={!!progress}\n          focusOnVisible\n          delay\n          placement='local'\n          message={progressMessage}\n          onTransitionEndOut={() => setProgressMessage(undefined)}\n        />\n      </Flex>\n\n      {actions && (\n        <ResponsiveActions\n          as='footer'\n          role='none'\n          actionsRef={modalActionsRef}\n          actionsEl={actions}\n        />\n      )}\n    </Flex>\n  );\n\n  const renderModal =\n    state === 'docked' ? (\n      modal\n    ) : (\n      <Backdrop\n        ref={backdropRef}\n        container={{\n          alignItems: center || maximized ? 'center' : 'start'\n        }}\n        transitionSpeed='slow'\n        open={state === 'open' || state === 'maximized'}\n        onBeforeTransitionIn={onBeforeOpen}\n        onAfterTransitionIn={() => {\n          setIsCloseButtonDisabled(false);\n          onAfterOpen?.();\n        }}\n        onBeforeTransitionOut={onBeforeClose}\n        onAfterTransitionOut={() => {\n          unmount();\n          onAfterClose?.();\n        }}\n      >\n        {modal}\n      </Backdrop>\n    );\n\n  return state === 'minimized' ? <MinimizedModal {...props} {...restProps} /> : renderModal;\n});\n\nexport default Modal;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAInE,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,eAAO,MAAM,iBAAiB;gBAA+B,OAAO;SAqBnE,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAiB7B,CAAC;AAIH,eAAO,MAAM,WAAW,6jBA2HtB,CAAC"}
+{"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAInE,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,eAAO,MAAM,iBAAiB;gBAA+B,OAAO;SAqBnE,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAiB7B,CAAC;AAIH,eAAO,MAAM,WAAW,6jBA+ItB,CAAC"}

package/lib/components/Modal/Modal.styles.js

@@ -165,6 +165,26 @@ export const StyledModal = styled(StyledCard)(({ theme: { base }, alert, autoWid
         min-height: 8rem;
       }
     }
+
+    &[data-moveable] {
+      position: absolute;
+
+      ${StyledModalHeader} {
+        cursor: grab;
+
+        &:focus-visible {
+          outline: none;
+        }
+
+        &:active {
+          cursor: grabbing;
+        }
+      }
+
+      &:has(${StyledModalHeader}:focus-visible) {
+        box-shadow: ${base.shadow.high}, ${base.shadow.focus};
+      }
+    }
   `;
 });
 StyledModal.defaultProps = defaultThemeProp;

package/lib/components/Modal/Modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport type { PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledIcon } from '../Icon';\nimport { StyledCard } from '../Card';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledResponsiveActionsContainer } from '../ResponsiveActions';\nimport { StyledProgressBackdrop } from '../Progress';\n\nimport type { ModalContextValue, ModalProps } from './Modal.types';\n\ntype ModalPropsWithDefaults = PropsWithDefaults<ModalProps, 'stretch' | 'center' | 'autoWidth'>;\n\nexport const StyledModalChildrenWrap = styled.div``;\n\nexport const StyledModalHeader = styled.header<{ hasAction?: boolean }>(\n  ({ theme: { base }, hasAction }) => {\n    const padAdjust = hasAction ? 0.75 : 0;\n\n    return css`\n      padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})\n        calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});\n\n      h2 {\n        margin-block-start: calc(0.5 * ${base.spacing});\n      }\n\n      h2 > ${StyledIcon} {\n        margin-inline-end: ${base.spacing};\n      }\n\n      ${StyledButton} {\n        color: ${base.palette['foreground-color']};\n      }\n    `;\n  }\n);\n\nStyledModalHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModalContent = styled.div(({ theme: { base } }) => {\n  return css`\n    position: relative;\n    padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});\n\n    @media (height >= 31.25rem) {\n      overflow-y: auto;\n    }\n\n    &:last-child {\n      padding-bottom: calc(3 * ${base.spacing});\n    }\n\n    & > ${StyledBackdrop} {\n      top: var(--scroll-top, 0);\n    }\n  `;\n});\n\nStyledModalContent.defaultProps = defaultThemeProp;\n\nexport const StyledModal = styled(StyledCard)<\n  ModalPropsWithDefaults & Pick<ModalContextValue, 'alert' | 'state'>\n>(({ theme: { base }, alert, autoWidth, center, stretch, state }) => {\n  let defaultMinWidth = '80ch';\n  let defaultMaxWidth = '80ch';\n\n  if (alert) {\n    defaultMinWidth = '60ch';\n    defaultMaxWidth = '60ch';\n  } else if (autoWidth) {\n    defaultMaxWidth = '100%';\n  }\n\n  return css`\n    position: relative;\n    box-shadow: ${base.shadow.high};\n\n    @media (height < 31.25rem) {\n      overflow-y: auto;\n    }\n\n    @media (forced-colors: active) {\n      border: 0.0625rem solid transparent;\n    }\n\n    ${StyledResponsiveActionsContainer} {\n      padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});\n    }\n\n    ${!alert && stretch\n      ? css`\n          height: calc(100% - 1rem);\n\n          ${autoWidth\n            ? css`\n                max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n              `\n            : css`\n                width: calc(100% - 1rem);\n              `}\n\n          @media (min-width: ${base.breakpoints.sm}) {\n            height: calc(100% - 2rem);\n\n            ${autoWidth\n              ? css`\n                  max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n                `\n              : css`\n                  width: calc(100% - 2rem);\n                `}\n          }\n\n          @media (min-width: ${base.breakpoints.md}) {\n            height: calc(100% - 4rem);\n\n            ${autoWidth\n              ? css`\n                  max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n                `\n              : css`\n                  width: calc(100% - 4rem);\n                `}\n          }\n        `\n      : css`\n          min-width: min(calc(100% - 1rem), ${defaultMinWidth});\n          max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n          max-height: calc(100% - 1rem);\n\n          &:not(:has(footer)) ${StyledProgressBackdrop} {\n            border-end-start-radius: ${base['border-radius']};\n            border-end-end-radius: ${base['border-radius']};\n          }\n\n          ${!center &&\n          css`\n            margin-block-start: 0.5rem;\n          `}\n\n          @media (min-width: ${base.breakpoints.sm}) {\n            min-width: min(calc(100% - 2rem), ${defaultMinWidth});\n            max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n            max-height: calc(100% - 2rem);\n            ${!center &&\n            css`\n              margin-block-start: 1rem;\n            `}\n          }\n\n          @media (min-width: ${base.breakpoints.md}) {\n            min-width: min(calc(100% - 4rem), ${defaultMinWidth});\n            max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n            max-height: calc(100% - 4rem);\n            ${!center &&\n            css`\n              margin-block-start: 2rem;\n            `}\n          }\n        `}\n\n    ${state === 'docked' &&\n    css`\n      /*\n       * This seems like the most optimal of the suboptimal solutions.\n       * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n       */\n      &&& {\n        /* Using non logical properties due to Safari 14.x support and since the inline bottom values are the same. */\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        pointer-events: auto;\n      }\n    `}\n\n    &[aria-busy='true'] {\n      ${StyledModalContent} {\n        /* TODO: Replace with useScrollToggle hook. */\n        overflow: hidden;\n        min-height: 8rem;\n      }\n    }\n  `;\n});\n\nStyledModal.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport type { PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledIcon } from '../Icon';\nimport { StyledCard } from '../Card';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledResponsiveActionsContainer } from '../ResponsiveActions';\nimport { StyledProgressBackdrop } from '../Progress';\n\nimport type { ModalContextValue, ModalProps } from './Modal.types';\n\ntype ModalPropsWithDefaults = PropsWithDefaults<ModalProps, 'stretch' | 'center' | 'autoWidth'>;\n\nexport const StyledModalChildrenWrap = styled.div``;\n\nexport const StyledModalHeader = styled.header<{ hasAction?: boolean }>(\n  ({ theme: { base }, hasAction }) => {\n    const padAdjust = hasAction ? 0.75 : 0;\n\n    return css`\n      padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})\n        calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});\n\n      h2 {\n        margin-block-start: calc(0.5 * ${base.spacing});\n      }\n\n      h2 > ${StyledIcon} {\n        margin-inline-end: ${base.spacing};\n      }\n\n      ${StyledButton} {\n        color: ${base.palette['foreground-color']};\n      }\n    `;\n  }\n);\n\nStyledModalHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModalContent = styled.div(({ theme: { base } }) => {\n  return css`\n    position: relative;\n    padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});\n\n    @media (height >= 31.25rem) {\n      overflow-y: auto;\n    }\n\n    &:last-child {\n      padding-bottom: calc(3 * ${base.spacing});\n    }\n\n    & > ${StyledBackdrop} {\n      top: var(--scroll-top, 0);\n    }\n  `;\n});\n\nStyledModalContent.defaultProps = defaultThemeProp;\n\nexport const StyledModal = styled(StyledCard)<\n  ModalPropsWithDefaults & Pick<ModalContextValue, 'alert' | 'state'>\n>(({ theme: { base }, alert, autoWidth, center, stretch, state }) => {\n  let defaultMinWidth = '80ch';\n  let defaultMaxWidth = '80ch';\n\n  if (alert) {\n    defaultMinWidth = '60ch';\n    defaultMaxWidth = '60ch';\n  } else if (autoWidth) {\n    defaultMaxWidth = '100%';\n  }\n\n  return css`\n    position: relative;\n    box-shadow: ${base.shadow.high};\n\n    @media (height < 31.25rem) {\n      overflow-y: auto;\n    }\n\n    @media (forced-colors: active) {\n      border: 0.0625rem solid transparent;\n    }\n\n    ${StyledResponsiveActionsContainer} {\n      padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});\n    }\n\n    ${!alert && stretch\n      ? css`\n          height: calc(100% - 1rem);\n\n          ${autoWidth\n            ? css`\n                max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n              `\n            : css`\n                width: calc(100% - 1rem);\n              `}\n\n          @media (min-width: ${base.breakpoints.sm}) {\n            height: calc(100% - 2rem);\n\n            ${autoWidth\n              ? css`\n                  max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n                `\n              : css`\n                  width: calc(100% - 2rem);\n                `}\n          }\n\n          @media (min-width: ${base.breakpoints.md}) {\n            height: calc(100% - 4rem);\n\n            ${autoWidth\n              ? css`\n                  max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n                `\n              : css`\n                  width: calc(100% - 4rem);\n                `}\n          }\n        `\n      : css`\n          min-width: min(calc(100% - 1rem), ${defaultMinWidth});\n          max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n          max-height: calc(100% - 1rem);\n\n          &:not(:has(footer)) ${StyledProgressBackdrop} {\n            border-end-start-radius: ${base['border-radius']};\n            border-end-end-radius: ${base['border-radius']};\n          }\n\n          ${!center &&\n          css`\n            margin-block-start: 0.5rem;\n          `}\n\n          @media (min-width: ${base.breakpoints.sm}) {\n            min-width: min(calc(100% - 2rem), ${defaultMinWidth});\n            max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n            max-height: calc(100% - 2rem);\n            ${!center &&\n            css`\n              margin-block-start: 1rem;\n            `}\n          }\n\n          @media (min-width: ${base.breakpoints.md}) {\n            min-width: min(calc(100% - 4rem), ${defaultMinWidth});\n            max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n            max-height: calc(100% - 4rem);\n            ${!center &&\n            css`\n              margin-block-start: 2rem;\n            `}\n          }\n        `}\n\n    ${state === 'docked' &&\n    css`\n      /*\n       * This seems like the most optimal of the suboptimal solutions.\n       * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n       */\n      &&& {\n        /* Using non logical properties due to Safari 14.x support and since the inline bottom values are the same. */\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        pointer-events: auto;\n      }\n    `}\n\n    &[aria-busy='true'] {\n      ${StyledModalContent} {\n        /* TODO: Replace with useScrollToggle hook. */\n        overflow: hidden;\n        min-height: 8rem;\n      }\n    }\n\n    &[data-moveable] {\n      position: absolute;\n\n      ${StyledModalHeader} {\n        cursor: grab;\n\n        &:focus-visible {\n          outline: none;\n        }\n\n        &:active {\n          cursor: grabbing;\n        }\n      }\n\n      &:has(${StyledModalHeader}:focus-visible) {\n        box-shadow: ${base.shadow.high}, ${base.shadow.focus};\n      }\n    }\n  `;\n});\n\nStyledModal.defaultProps = defaultThemeProp;\n"]}

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

@@ -33,6 +33,10 @@ export interface ModalOptions {
      * @default false
      */
     dockable?: boolean;
+    /** Allows moving the modal element with drag or keyboard along the horizontal axis when docked or minimized.
+     * @default false
+     */
+    moveable?: boolean;
     /**
      * If true, the Modal will initially render in a minimized state.
      * @default false

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"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"}