no-frills-ui 0.0.14-alpha.0 → 0.0.14-alpha.10

package/lib-esm/components/Dialog/Dialog.d.ts

@@ -1,36 +1,58 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export declare const DialogContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & import("../Card/Card").CardExtraProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    elevated?: boolean;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export { Header as DialogHeader, Body as DialogBody, Footer as DialogFooter, } from '../../shared/styles';
-type DialogOptions = PropTypes.InferProps<typeof Dialog.propTypes>;
+interface DialogOptions {
+    /** Flag to close dialog on `esc` click. Default value is true. */
+    closeOnEsc?: boolean;
+    /** Close layer overlay is clicked. Default value is true. */
+    closeOnOverlayClick?: boolean;
+}
 interface DialogState {
     show: boolean;
+    LayerComponent?: React.ComponentType | null;
 }
-declare class Dialog extends React.Component<React.PropsWithChildren<DialogOptions>, DialogState> {
-    static propTypes: {
-        /** Flag to close dialog on `esc` click. Default value is true. */
-        closeOnEsc: PropTypes.Requireable<boolean>;
-        /** Close layer overlay is clicked. Default value is true. */
-        closeOnOverlayClick: PropTypes.Requireable<boolean>;
-    };
+declare class Dialog extends React.Component<React.PropsWithChildren<DialogOptions> & React.HTMLAttributes<HTMLDivElement>, DialogState> {
     static defaultProps: {
         closeOnEsc: boolean;
         closeOnOverlayClick: boolean;
     };
     private closeDialog;
     private onCloseFn;
-    state: {
-        show: boolean;
-    };
+    private lastFocusedElement;
+    private dialogRef;
+    state: DialogState;
+    /**
+     * Retrieves all focusable elements within the dialog.
+     */
+    private getFocusableElements;
+    /**
+     * Handles keydown events to implement the focus trap.
+     * Traps Tab and Shift+Tab within the dialog.
+     */
+    private handleKeyDown;
+    /**
+     * Restores focus to the element that was focused before the dialog opened.
+     */
+    private restoreFocus;
+    /**
+     * Callback ref to capture the Dialog DOM element.
+     * Triggers initial focus setting when the element mounts.
+     */
+    private setDialogRef;
+    /**
+     * Sets initial focus within the dialog.
+     * Tries to focus the header first, then the first interactive element, or falls back to the container.
+     */
+    private setInitialFocus;
     shouldComponentUpdate(nextProps: DialogOptions, nextState: DialogState): boolean;
-    open: (closeCallback?: (resp: any) => void) => void;
-    close: (resp?: any) => void;
+    componentWillUnmount(): void;
+    open: (closeCallback?: (resp?: unknown) => void) => void;
+    close: (resp?: unknown) => void;
     private closeCallback;
-    render(): import("@emotion/react/jsx-runtime").JSX.Element;
+    render(): import("@emotion/react/jsx-runtime").JSX.Element | null;
 }
 export default Dialog;

package/lib-esm/components/Dialog/Dialog.js

@@ -1,66 +1,106 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from '@emotion/react/jsx-runtime';
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';
-import { Card } from '../Card';
-export const DialogContainer = styled(Card) `
-    max-width: 768px;
-    max-height: 80vh;
-    transform: scale(0);
-    opacity: 0;
-    transition: all .3s ease;
+import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager.js';
+import Card from '../Card/Card.js';
 
-    .nf-layer-enter & {
-        opacity: 1;
-        transform: scale(1);
-    }
-
-    .nf-layer-exit & {
-        opacity: 0;
-        transform: scale(0);
-    }
-`;
-export { Header as DialogHeader, Body as DialogBody, Footer as DialogFooter, } from '../../shared/styles';
+const DialogContainer = /*#__PURE__*/ styled(Card, {
+    target: "e6d22q10",
+    label: "DialogContainer"
+})("max-width:768px;max-height:80vh;transform:scale(0);opacity:0;transition:all 0.3s ease;.nf-layer-enter &{opacity:1;transform:scale(1);}.nf-layer-exit &{opacity:0;transform:scale(0);}");
 class Dialog extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            show: false,
-        };
-        this.open = (closeCallback) => {
-            this.setState({
-                show: true,
-            });
-            this.onCloseFn = closeCallback;
-        };
-        this.close = (resp) => {
-            this.closeDialog && this.closeDialog(resp);
-        };
-        this.closeCallback = (resp) => {
-            this.setState({
-                show: false,
-            });
-            this.onCloseFn && this.onCloseFn(resp);
-        };
-    }
     shouldComponentUpdate(nextProps, nextState) {
         return this.state.show !== nextState.show;
     }
+    componentWillUnmount() {
+        // Clean up if component unmounts while dialog is open
+        if (this.state.show && this.closeDialog) {
+            this.closeDialog();
+        }
+        this.restoreFocus();
+        this.closeDialog = null;
+        this.onCloseFn = null;
+    }
     render() {
-        const _a = this.props, { closeOnEsc, closeOnOverlayClick, children } = _a, rest = __rest(_a, ["closeOnEsc", "closeOnOverlayClick", "children"]);
-        if (this.state.show) {
+        const { LayerComponent } = this.state;
+        if (this.state.show && LayerComponent) {
+            return /*#__PURE__*/ jsx(LayerComponent, {});
+        } else {
+            return null;
+        }
+    }
+    constructor(...args){
+        super(...args), this.closeDialog = null, this.onCloseFn = null, this.lastFocusedElement = null, this.dialogRef = /*#__PURE__*/ React.createRef(), this.state = {
+            show: false,
+            LayerComponent: undefined
+        }, /**
+     * Retrieves all focusable elements within the dialog.
+     */ this.getFocusableElements = ()=>{
+            if (!this.dialogRef.current) return [];
+            return Array.from(this.dialogRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+        }, /**
+     * Handles keydown events to implement the focus trap.
+     * Traps Tab and Shift+Tab within the dialog.
+     */ this.handleKeyDown = (e)=>{
+            if (e.key === 'Tab') {
+                const focusableElements = this.getFocusableElements();
+                if (focusableElements.length === 0) return;
+                const firstElement = focusableElements[0];
+                const lastElement = focusableElements[focusableElements.length - 1];
+                if (e.shiftKey) {
+                    if (document.activeElement === firstElement) {
+                        lastElement.focus();
+                        e.preventDefault();
+                    }
+                } else {
+                    if (document.activeElement === lastElement) {
+                        firstElement.focus();
+                        e.preventDefault();
+                    }
+                }
+            }
+        }, /**
+     * Restores focus to the element that was focused before the dialog opened.
+     */ this.restoreFocus = ()=>{
+            if (this.lastFocusedElement) {
+                const elementToBeFocused = this.lastFocusedElement;
+                this.lastFocusedElement = null;
+                setTimeout(()=>{
+                    if (document.body.contains(elementToBeFocused)) {
+                        elementToBeFocused.focus();
+                    }
+                }, 100);
+            }
+        }, /**
+     * Callback ref to capture the Dialog DOM element.
+     * Triggers initial focus setting when the element mounts.
+     */ this.setDialogRef = (node)=>{
+            this.dialogRef.current = node;
+            if (node) {
+                this.setInitialFocus(node);
+            }
+        }, /**
+     * Sets initial focus within the dialog.
+     * Tries to focus the header first, then the first interactive element, or falls back to the container.
+     */ this.setInitialFocus = (root)=>{
+            const firstChild = root.firstElementChild;
+            if (firstChild) {
+                if (firstChild.getAttribute('tabindex') === null) {
+                    firstChild.setAttribute('tabindex', '-1');
+                }
+                firstChild.focus();
+                return;
+            }
+            const focusableElements = this.getFocusableElements();
+            if (focusableElements.length > 0) {
+                focusableElements[0].focus();
+            } else {
+                root.focus();
+            }
+        }, this.open = (closeCallback)=>{
+            const { closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;
+            // Save current focus
+            this.lastFocusedElement = document.activeElement;
             const [Component, closeFn] = LayerManager.renderLayer({
                 exitDelay: 300,
                 overlay: true,
@@ -68,25 +108,40 @@ class Dialog extends React.Component {
                 closeCallback: this.closeCallback,
                 closeOnOverlayClick,
                 position: LAYER_POSITION.DIALOG,
-                component: (_jsx(DialogContainer, Object.assign({}, rest, { onClick: e => e.stopPropagation(), elevated: true, children: children })))
+                component: /*#__PURE__*/ jsx(DialogContainer, {
+                    ...rest,
+                    ref: this.setDialogRef,
+                    role: "dialog",
+                    "aria-modal": "true",
+                    tabIndex: -1,
+                    onKeyDown: this.handleKeyDown,
+                    onClick: (e)=>e.stopPropagation(),
+                    elevated: true,
+                    children: children
+                })
             });
             this.closeDialog = closeFn;
-            return _jsx(Component, {});
-        }
-        else {
-            return null;
-        }
+            this.setState({
+                show: true,
+                LayerComponent: Component
+            });
+            this.onCloseFn = closeCallback ?? null;
+        }, this.close = (resp)=>{
+            this.closeDialog?.(resp);
+        }, this.closeCallback = (resp)=>{
+            this.restoreFocus();
+            this.setState({
+                show: false,
+                LayerComponent: undefined
+            });
+            this.onCloseFn?.(resp);
+        };
     }
 }
-Dialog.propTypes = {
-    /** Flag to close dialog on `esc` click. Default value is true. */
-    closeOnEsc: PropTypes.bool,
-    /** Close layer overlay is clicked. Default value is true. */
-    closeOnOverlayClick: PropTypes.bool,
-};
 Dialog.defaultProps = {
     closeOnEsc: true,
-    closeOnOverlayClick: true,
+    closeOnOverlayClick: true
 };
-export default Dialog;
-//# sourceMappingURL=Dialog.js.map
+
+export { DialogContainer, Dialog as default };
+//# sourceMappingURL=Dialog.js.map

package/lib-esm/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,EAAE,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;;;;;;;CAgB1C,CAAC;AAEF,OAAO,EACH,MAAM,IAAI,YAAY,EACtB,IAAI,IAAI,UAAU,EAClB,MAAM,IAAI,YAAY,GACzB,MAAM,qBAAqB,CAAC;AAM7B,MAAM,MAAO,SAAQ,KAAK,CAAC,SAA8D;IAAzF;;QAgBI,UAAK,GAAG;YACJ,IAAI,EAAE,KAAK;SACd,CAAA;QAMM,SAAI,GAAG,CAAC,aAAmC,EAAE,EAAE;YAClD,IAAI,CAAC,QAAQ,CAAC;gBACV,IAAI,EAAE,IAAI;aACb,CAAC,CAAC;YACH,IAAI,CAAC,SAAS,GAAG,aAAa,CAAE;QACpC,CAAC,CAAA;QAEM,UAAK,GAAG,CAAC,IAAU,EAAE,EAAE;YAC1B,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC/C,CAAC,CAAA;QAEO,kBAAa,GAAG,CAAC,IAAU,EAAE,EAAE;YACnC,IAAI,CAAC,QAAQ,CAAC;gBACV,IAAI,EAAE,KAAK;aACd,CAAC,CAAC;YACH,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAC3C,CAAC,CAAA;IAyBL,CAAC;IA7CG,qBAAqB,CAAC,SAAwB,EAAE,SAAsB;QAClE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC;IAC9C,CAAC;IAoBD,MAAM;QACF,MAAM,KAAwD,IAAI,CAAC,KAAK,EAAlE,EAAE,UAAU,EAAE,mBAAmB,EAAE,QAAQ,OAAuB,EAAlB,IAAI,cAApD,iDAAqD,CAAa,CAAC;QAEzE,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAClB,MAAM,CAAC,SAAS,EAAE,OAAO,CAAE,GAAG,YAAY,CAAC,WAAW,CAAC;gBACnD,SAAS,EAAE,GAAG;gBACd,OAAO,EAAE,IAAI;gBACb,UAAU;gBACV,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,mBAAmB;gBACnB,QAAQ,EAAE,cAAc,CAAC,MAAM;gBAC/B,SAAS,EAAE,CACP,KAAC,eAAe,oBAAK,IAAI,IAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,QAAQ,kBACjE,QAAQ,IACK,CACrB;aACJ,CAAC,CAAC;YACH,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;YAC3B,OAAO,KAAC,SAAS,KAAG,CAAC;QACzB,CAAC;aAAM,CAAC;YACJ,OAAO,IAAI,CAAC;QAChB,CAAC;IACL,CAAC;;AA/DM,gBAAS,GAAG;IACf,kEAAkE;IAClE,UAAU,EAAE,SAAS,CAAC,IAAI;IAC1B,6DAA6D;IAC7D,mBAAmB,EAAE,SAAS,CAAC,IAAI;CACtC,AALe,CAKf;AAEM,mBAAY,GAAG;IAClB,UAAU,EAAE,IAAI;IAChB,mBAAmB,EAAE,IAAI;CAC5B,AAHkB,CAGlB;AAwDL,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Dialog.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nimport { Card } from '../Card';\n\nexport const DialogContainer = styled(Card)`\n    max-width: 768px;\n    max-height: 80vh;\n    transform: scale(0);\n    opacity: 0;\n    transition: all 0.3s ease;\n\n    .nf-layer-enter & {\n        opacity: 1;\n        transform: scale(1);\n    }\n\n    .nf-layer-exit & {\n        opacity: 0;\n        transform: scale(0);\n    }\n`;\n\nexport {\n    Header as DialogHeader,\n    Body as DialogBody,\n    Footer as DialogFooter,\n} from '../../shared/styles';\n\ninterface DialogOptions {\n    /** Flag to close dialog on `esc` click. Default value is true. */\n    closeOnEsc?: boolean;\n    /** Close layer overlay is clicked. Default value is true. */\n    closeOnOverlayClick?: boolean;\n}\n\ninterface DialogState {\n    show: boolean;\n    LayerComponent?: React.ComponentType | null;\n}\n\nclass Dialog extends React.Component<\n    React.PropsWithChildren<DialogOptions> & React.HTMLAttributes<HTMLDivElement>,\n    DialogState\n> {\n    static defaultProps = {\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    private closeDialog: ((resp?: unknown) => void) | null = null;\n    private onCloseFn: ((resp?: unknown) => void) | null = null;\n    private lastFocusedElement: HTMLElement | null = null;\n    private dialogRef = React.createRef<HTMLDivElement>();\n\n    state: DialogState = {\n        show: false,\n        LayerComponent: undefined,\n    };\n\n    /**\n     * Retrieves all focusable elements within the dialog.\n     */\n    private getFocusableElements = (): HTMLElement[] => {\n        if (!this.dialogRef.current) return [];\n        return Array.from(\n            this.dialogRef.current.querySelectorAll(\n                'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n            ),\n        ) as HTMLElement[];\n    };\n\n    /**\n     * Handles keydown events to implement the focus trap.\n     * Traps Tab and Shift+Tab within the dialog.\n     */\n    private handleKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === 'Tab') {\n            const focusableElements = this.getFocusableElements();\n            if (focusableElements.length === 0) return;\n\n            const firstElement = focusableElements[0];\n            const lastElement = focusableElements[focusableElements.length - 1];\n\n            if (e.shiftKey) {\n                if (document.activeElement === firstElement) {\n                    lastElement.focus();\n                    e.preventDefault();\n                }\n            } else {\n                if (document.activeElement === lastElement) {\n                    firstElement.focus();\n                    e.preventDefault();\n                }\n            }\n        }\n    };\n\n    /**\n     * Restores focus to the element that was focused before the dialog opened.\n     */\n    private restoreFocus = () => {\n        if (this.lastFocusedElement) {\n            const elementToBeFocused = this.lastFocusedElement;\n            this.lastFocusedElement = null;\n            setTimeout(() => {\n                if (document.body.contains(elementToBeFocused)) {\n                    elementToBeFocused.focus();\n                }\n            }, 100);\n        }\n    };\n\n    /**\n     * Callback ref to capture the Dialog DOM element.\n     * Triggers initial focus setting when the element mounts.\n     */\n    private setDialogRef = (node: HTMLDivElement | null) => {\n        (this.dialogRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n\n        if (node) {\n            this.setInitialFocus(node);\n        }\n    };\n\n    /**\n     * Sets initial focus within the dialog.\n     * Tries to focus the header first, then the first interactive element, or falls back to the container.\n     */\n    private setInitialFocus = (root: HTMLElement) => {\n        const firstChild = root.firstElementChild as HTMLElement;\n        if (firstChild) {\n            if (firstChild.getAttribute('tabindex') === null) {\n                firstChild.setAttribute('tabindex', '-1');\n            }\n            firstChild.focus();\n            return;\n        }\n\n        const focusableElements = this.getFocusableElements();\n        if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n        } else {\n            root.focus();\n        }\n    };\n\n    shouldComponentUpdate(nextProps: DialogOptions, nextState: DialogState) {\n        return this.state.show !== nextState.show;\n    }\n\n    componentWillUnmount() {\n        // Clean up if component unmounts while dialog is open\n        if (this.state.show && this.closeDialog) {\n            this.closeDialog();\n        }\n        this.restoreFocus();\n        this.closeDialog = null;\n        this.onCloseFn = null;\n    }\n\n    public open = (closeCallback?: (resp?: unknown) => void) => {\n        const { closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;\n\n        // Save current focus\n        this.lastFocusedElement = document.activeElement as HTMLElement;\n\n        const [Component, closeFn] = LayerManager.renderLayer({\n            exitDelay: 300,\n            overlay: true,\n            closeOnEsc,\n            closeCallback: this.closeCallback,\n            closeOnOverlayClick,\n            position: LAYER_POSITION.DIALOG,\n            component: (\n                <DialogContainer\n                    {...rest}\n                    ref={this.setDialogRef}\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    tabIndex={-1}\n                    onKeyDown={this.handleKeyDown}\n                    onClick={(e) => e.stopPropagation()}\n                    elevated\n                >\n                    {children}\n                </DialogContainer>\n            ),\n        });\n\n        this.closeDialog = closeFn;\n\n        this.setState({\n            show: true,\n            LayerComponent: Component,\n        });\n        this.onCloseFn = closeCallback ?? null;\n    };\n\n    public close = (resp?: unknown) => {\n        this.closeDialog?.(resp);\n    };\n\n    private closeCallback = (resp?: unknown) => {\n        this.restoreFocus();\n        this.setState({\n            show: false,\n            LayerComponent: undefined,\n        });\n        this.onCloseFn?.(resp);\n    };\n\n    render() {\n        const { LayerComponent } = this.state;\n\n        if (this.state.show && LayerComponent) {\n            return <LayerComponent />;\n        } else {\n            return null;\n        }\n    }\n}\n\nexport default Dialog;\n"],"names":["DialogContainer","styled","Card","Dialog","React","Component","shouldComponentUpdate","nextProps","nextState","state","show","componentWillUnmount","closeDialog","restoreFocus","onCloseFn","render","LayerComponent","_jsx","lastFocusedElement","dialogRef","createRef","undefined","getFocusableElements","current","Array","from","querySelectorAll","handleKeyDown","e","key","focusableElements","length","firstElement","lastElement","shiftKey","document","activeElement","focus","preventDefault","elementToBeFocused","setTimeout","body","contains","setDialogRef","node","setInitialFocus","root","firstChild","firstElementChild","getAttribute","setAttribute","open","closeCallback","closeOnEsc","closeOnOverlayClick","children","rest","props","closeFn","LayerManager","renderLayer","exitDelay","overlay","position","LAYER_POSITION","DIALOG","component","ref","role","aria-modal","tabIndex","onKeyDown","onClick","stopPropagation","elevated","setState","close","resp","defaultProps"],"mappings":";;;;;;AAKO,MAAMA,gCAAkBC,MAAAA,CAAOC,IAAAA,EAAAA;;;AAgBpC,CAAA,CAAA,CAAA,uLAAA;AAoBF,MAAMC,MAAAA,SAAeC,MAAMC,SAAS,CAAA;IA0GhCC,qBAAAA,CAAsBC,SAAwB,EAAEC,SAAsB,EAAE;AACpE,QAAA,OAAO,IAAI,CAACC,KAAK,CAACC,IAAI,KAAKF,UAAUE,IAAI;AAC7C,IAAA;IAEAC,oBAAAA,GAAuB;;QAEnB,IAAI,IAAI,CAACF,KAAK,CAACC,IAAI,IAAI,IAAI,CAACE,WAAW,EAAE;AACrC,YAAA,IAAI,CAACA,WAAW,EAAA;AACpB,QAAA;AACA,QAAA,IAAI,CAACC,YAAY,EAAA;QACjB,IAAI,CAACD,WAAW,GAAG,IAAA;QACnB,IAAI,CAACE,SAAS,GAAG,IAAA;AACrB,IAAA;IAqDAC,MAAAA,GAAS;AACL,QAAA,MAAM,EAAEC,cAAc,EAAE,GAAG,IAAI,CAACP,KAAK;AAErC,QAAA,IAAI,IAAI,CAACA,KAAK,CAACC,IAAI,IAAIM,cAAAA,EAAgB;AACnC,YAAA,qBAAOC,GAAA,CAACD,cAAAA,EAAAA,EAAAA,CAAAA;QACZ,CAAA,MAAO;YACH,OAAO,IAAA;AACX,QAAA;AACJ,IAAA;;QAnLJ,KAAA,CAAA,GAAA,IAAA,CAAA,EAAA,IAAA,CASYJ,WAAAA,GAAiD,IAAA,EAAA,IAAA,CACjDE,SAAAA,GAA+C,IAAA,EAAA,IAAA,CAC/CI,kBAAAA,GAAyC,WACzCC,SAAAA,iBAAYf,KAAAA,CAAMgB,SAAS,EAAA,EAAA,IAAA,CAEnCX,KAAAA,GAAqB;YACjBC,IAAAA,EAAM,KAAA;YACNM,cAAAA,EAAgBK;SACpB;;AAIC,QAAA,IAAA,CACOC,oBAAAA,GAAuB,IAAA;YAC3B,IAAI,CAAC,IAAI,CAACH,SAAS,CAACI,OAAO,EAAE,OAAO,EAAE;YACtC,OAAOC,KAAAA,CAAMC,IAAI,CACb,IAAI,CAACN,SAAS,CAACI,OAAO,CAACG,gBAAgB,CACnC,0EAAA,CAAA,CAAA;QAGZ,CAAA;;;AAKC,QAAA,IAAA,CACOC,gBAAgB,CAACC,CAAAA,GAAAA;YACrB,IAAIA,CAAAA,CAAEC,GAAG,KAAK,KAAA,EAAO;gBACjB,MAAMC,iBAAAA,GAAoB,IAAI,CAACR,oBAAoB,EAAA;gBACnD,IAAIQ,iBAAAA,CAAkBC,MAAM,KAAK,CAAA,EAAG;gBAEpC,MAAMC,YAAAA,GAAeF,iBAAiB,CAAC,CAAA,CAAE;AACzC,gBAAA,MAAMG,cAAcH,iBAAiB,CAACA,iBAAAA,CAAkBC,MAAM,GAAG,CAAA,CAAE;gBAEnE,IAAIH,CAAAA,CAAEM,QAAQ,EAAE;oBACZ,IAAIC,QAAAA,CAASC,aAAa,KAAKJ,YAAAA,EAAc;AACzCC,wBAAAA,WAAAA,CAAYI,KAAK,EAAA;AACjBT,wBAAAA,CAAAA,CAAEU,cAAc,EAAA;AACpB,oBAAA;gBACJ,CAAA,MAAO;oBACH,IAAIH,QAAAA,CAASC,aAAa,KAAKH,WAAAA,EAAa;AACxCD,wBAAAA,YAAAA,CAAaK,KAAK,EAAA;AAClBT,wBAAAA,CAAAA,CAAEU,cAAc,EAAA;AACpB,oBAAA;AACJ,gBAAA;AACJ,YAAA;QACJ,CAAA;;AAIC,QAAA,IAAA,CACOzB,YAAAA,GAAe,IAAA;YACnB,IAAI,IAAI,CAACK,kBAAkB,EAAE;gBACzB,MAAMqB,kBAAAA,GAAqB,IAAI,CAACrB,kBAAkB;gBAClD,IAAI,CAACA,kBAAkB,GAAG,IAAA;gBAC1BsB,UAAAA,CAAW,IAAA;AACP,oBAAA,IAAIL,QAAAA,CAASM,IAAI,CAACC,QAAQ,CAACH,kBAAAA,CAAAA,EAAqB;AAC5CA,wBAAAA,kBAAAA,CAAmBF,KAAK,EAAA;AAC5B,oBAAA;gBACJ,CAAA,EAAG,GAAA,CAAA;AACP,YAAA;QACJ,CAAA;;;AAKC,QAAA,IAAA,CACOM,eAAe,CAACC,IAAAA,GAAAA;AACnB,YAAA,IAAI,CAACzB,SAAS,CAAmDI,OAAO,GAAGqB,IAAAA;AAE5E,YAAA,IAAIA,IAAAA,EAAM;gBACN,IAAI,CAACC,eAAe,CAACD,IAAAA,CAAAA;AACzB,YAAA;QACJ,CAAA;;;AAKC,QAAA,IAAA,CACOC,kBAAkB,CAACC,IAAAA,GAAAA;YACvB,MAAMC,UAAAA,GAAaD,KAAKE,iBAAiB;AACzC,YAAA,IAAID,UAAAA,EAAY;AACZ,gBAAA,IAAIA,UAAAA,CAAWE,YAAY,CAAC,UAAA,CAAA,KAAgB,IAAA,EAAM;oBAC9CF,UAAAA,CAAWG,YAAY,CAAC,UAAA,EAAY,IAAA,CAAA;AACxC,gBAAA;AACAH,gBAAAA,UAAAA,CAAWV,KAAK,EAAA;AAChB,gBAAA;AACJ,YAAA;YAEA,MAAMP,iBAAAA,GAAoB,IAAI,CAACR,oBAAoB,EAAA;YACnD,IAAIQ,iBAAAA,CAAkBC,MAAM,GAAG,CAAA,EAAG;gBAC9BD,iBAAiB,CAAC,CAAA,CAAE,CAACO,KAAK,EAAA;YAC9B,CAAA,MAAO;AACHS,gBAAAA,IAAAA,CAAKT,KAAK,EAAA;AACd,YAAA;AACJ,QAAA,CAAA,EAAA,IAAA,CAgBOc,OAAO,CAACC,aAAAA,GAAAA;AACX,YAAA,MAAM,EAAEC,UAAU,EAAEC,mBAAmB,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,EAAM,GAAG,IAAI,CAACC,KAAK;;AAGzE,YAAA,IAAI,CAACvC,kBAAkB,GAAGiB,QAAAA,CAASC,aAAa;AAEhD,YAAA,MAAM,CAAC/B,SAAAA,EAAWqD,OAAAA,CAAQ,GAAGC,YAAAA,CAAaC,WAAW,CAAC;gBAClDC,SAAAA,EAAW,GAAA;gBACXC,OAAAA,EAAS,IAAA;AACTT,gBAAAA,UAAAA;gBACAD,aAAAA,EAAe,IAAI,CAACA,aAAa;AACjCE,gBAAAA,mBAAAA;AACAS,gBAAAA,QAAAA,EAAUC,eAAeC,MAAM;AAC/BC,gBAAAA,SAAAA,gBACIjD,GAAA,CAACjB,eAAAA,EAAAA;AACI,oBAAA,GAAGwD,IAAI;oBACRW,GAAAA,EAAK,IAAI,CAACxB,YAAY;oBACtByB,IAAAA,EAAK,QAAA;oBACLC,YAAAA,EAAW,MAAA;AACXC,oBAAAA,QAAAA,EAAU,EAAC;oBACXC,SAAAA,EAAW,IAAI,CAAC5C,aAAa;oBAC7B6C,OAAAA,EAAS,CAAC5C,CAAAA,GAAMA,CAAAA,CAAE6C,eAAe,EAAA;oBACjCC,QAAQ,EAAA,IAAA;AAEPnB,oBAAAA,QAAAA,EAAAA;;AAGb,aAAA,CAAA;YAEA,IAAI,CAAC3C,WAAW,GAAG8C,OAAAA;YAEnB,IAAI,CAACiB,QAAQ,CAAC;gBACVjE,IAAAA,EAAM,IAAA;gBACNM,cAAAA,EAAgBX;AACpB,aAAA,CAAA;YACA,IAAI,CAACS,SAAS,GAAGsC,aAAAA,IAAiB,IAAA;AACtC,QAAA,CAAA,EAAA,IAAA,CAEOwB,QAAQ,CAACC,IAAAA,GAAAA;YACZ,IAAI,CAACjE,WAAW,GAAGiE,IAAAA,CAAAA;AACvB,QAAA,CAAA,EAAA,IAAA,CAEQzB,gBAAgB,CAACyB,IAAAA,GAAAA;AACrB,YAAA,IAAI,CAAChE,YAAY,EAAA;YACjB,IAAI,CAAC8D,QAAQ,CAAC;gBACVjE,IAAAA,EAAM,KAAA;gBACNM,cAAAA,EAAgBK;AACpB,aAAA,CAAA;YACA,IAAI,CAACP,SAAS,GAAG+D,IAAAA,CAAAA;AACrB,QAAA,CAAA;;AAWJ;AApLM1E,MAAAA,CAIK2E,YAAAA,GAAe;IAClBzB,UAAAA,EAAY,IAAA;IACZC,mBAAAA,EAAqB;AACzB,CAAA;;;;"}

package/lib-esm/components/Dialog/PromptDialog.d.ts

@@ -1,25 +1,24 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-type PromptOption = PropTypes.InferProps<typeof PromptDialog.propTypes>;
+import Dialog from './Dialog';
+type PromptOption = {
+    /** Shown as header of the dialog */
+    header: string;
+    /** Rendered as the body of the dialog */
+    body: string;
+    /** Default value for the input. */
+    defaultValue?: string;
+    /** Submit button text. Default value is 'Submit' */
+    submitText?: string;
+    /** Cancel button text. Default value is 'Cancel' */
+    cancelText?: string;
+    /** Props for the input. */
+    inputProps?: React.HTMLProps<HTMLInputElement>;
+    /** Additional props for the dialog. */
+    dialogProps?: React.ComponentProps<typeof Dialog>;
+};
 export default class PromptDialog extends React.Component<PromptOption, {
-    value: string;
+    value?: string;
 }> {
-    static propTypes: {
-        /** Shown as header of the dialog */
-        header: PropTypes.Requireable<string>;
-        /** Rendered as the body of the dialog */
-        body: PropTypes.Requireable<string>;
-        /** Default value for the input. */
-        defaultValue: PropTypes.Requireable<string>;
-        /** Submit button text. Default value is 'Submit' */
-        submitText: PropTypes.Requireable<string>;
-        /** Cancel button text. Default value is 'Cancel' */
-        cancelText: PropTypes.Requireable<string>;
-        /** Props for the input. */
-        inputProps: PropTypes.Requireable<object>;
-        /** Additional props for the dialog. */
-        dialogProps: PropTypes.Requireable<object>;
-    };
     static defaultProps: {
         cancelText: string;
         submitText: string;

package/lib-esm/components/Dialog/PromptDialog.js

@@ -1,72 +1,101 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import Dialog, { DialogHeader, DialogBody, DialogFooter } from './Dialog';
-import { Button, ActionButton } from '../Button';
-import { Input } from '../Input';
-const BodyText = styled.p `
-    margin-top: 0;
-`;
+import Dialog from './Dialog.js';
+import { Header, Body, Footer } from '../../shared/styles.js';
+import Button from '../Button/Button.js';
+import ActionButton from '../Button/ActionButton.js';
+import Input from '../Input/Input.js';
+
+const BodyText = /*#__PURE__*/ styled("p", {
+    target: "evq93jk0",
+    label: "BodyText"
+})("margin-top:0;");
+const InputContainer = /*#__PURE__*/ styled("div", {
+    target: "evq93jk1",
+    label: "InputContainer"
+})("display:flex;flex:1;margin-top:10px;& > label{flex:1;width:100%;padding:0;& > input{width:100%;padding:0 8px;box-sizing:border-box;}}");
+const StyledInput = /*#__PURE__*/ styled(Input, {
+    target: "evq93jk2",
+    label: "StyledInput"
+})("flex:1;padding:0;");
 class PromptDialog extends React.Component {
-    constructor(props) {
-        super(props);
-        this.dialog = createRef();
-        this.valueChange = (e) => {
+    render() {
+        const { header, body, inputProps, submitText, cancelText, dialogProps } = this.props;
+        return /*#__PURE__*/ jsx(Dialog, {
+            ...dialogProps,
+            ref: this.dialog,
+            closeOnEsc: false,
+            closeOnOverlayClick: false,
+            children: /*#__PURE__*/ jsxs("form", {
+                onSubmit: this.submit,
+                children: [
+                    header && /*#__PURE__*/ jsx(Header, {
+                        children: header
+                    }),
+                    /*#__PURE__*/ jsxs(Body, {
+                        children: [
+                            /*#__PURE__*/ jsx(BodyText, {
+                                children: body
+                            }),
+                            /*#__PURE__*/ jsx(InputContainer, {
+                                children: /*#__PURE__*/ jsx(StyledInput, {
+                                    value: this.state.value,
+                                    onChange: this.valueChange,
+                                    ...inputProps
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Footer, {
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                type: "button",
+                                onClick: this.cancel,
+                                children: cancelText
+                            }),
+                            /*#__PURE__*/ jsx(ActionButton, {
+                                children: submitText
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+    constructor(props){
+        super(props), this.dialog = /*#__PURE__*/ createRef(), this.valueChange = (e)=>{
             this.setState({
-                value: e.target.value,
+                value: e.target.value
             });
-        };
-        this.cancel = () => this.dialog.current.close();
-        this.submit = (e) => {
+        }, this.cancel = ()=>this.dialog.current?.close(), this.submit = (e)=>{
             e.preventDefault();
-            this.dialog.current.close(this.state.value);
-        };
-        this.show = () => {
-            return new Promise((resolve, reject) => {
-                const onClose = (value) => {
+            this.dialog.current?.close(this.state.value);
+        }, this.show = ()=>{
+            return new Promise((resolve, reject)=>{
+                const onClose = (value)=>{
                     if (value) {
                         resolve(value);
-                    }
-                    else {
+                    } else {
                         reject();
                     }
                     this.setState({
-                        value: this.props.defaultValue,
+                        value: this.props.defaultValue
                     });
                 };
-                this.dialog.current.open(onClose);
+                this.dialog.current?.open(onClose);
             });
         };
         this.state = {
-            value: props.defaultValue,
+            value: props.defaultValue
         };
     }
-    render() {
-        const { header, body, inputProps, submitText, cancelText, dialogProps } = this.props;
-        return (_jsx(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: _jsxs("form", { onSubmit: this.submit, children: [header && _jsx(DialogHeader, { children: header }), _jsxs(DialogBody, { children: [_jsx(BodyText, { children: body }), _jsx("div", { style: { display: 'flex' }, children: _jsx(Input, Object.assign({ style: { width: 'auto', flex: '1' }, value: this.state.value, onChange: this.valueChange, autoFocus: true }, inputProps)) })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: 'button', onClick: this.cancel, children: cancelText }), _jsx(ActionButton, { children: submitText })] })] }) })));
-    }
 }
-PromptDialog.propTypes = {
-    /** Shown as header of the dialog */
-    header: PropTypes.string,
-    /** Rendered as the body of the dialog */
-    body: PropTypes.string,
-    /** Default value for the input. */
-    defaultValue: PropTypes.string,
-    /** Submit button text. Default value is 'Submit' */
-    submitText: PropTypes.string,
-    /** Cancel button text. Default value is 'Cancel' */
-    cancelText: PropTypes.string,
-    /** Props for the input. */
-    inputProps: PropTypes.object,
-    /** Additional props for the dialog. */
-    dialogProps: PropTypes.object,
-};
 PromptDialog.defaultProps = {
     cancelText: 'Cancel',
     submitText: 'Submit',
-    defaultValue: '',
+    defaultValue: ''
 };
-export default PromptDialog;
-//# sourceMappingURL=PromptDialog.js.map
+
+export { PromptDialog as default };
+//# sourceMappingURL=PromptDialog.js.map

package/lib-esm/components/Dialog/PromptDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromptDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/PromptDialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PromptDialog.js","sources":["../../../src/components/Dialog/PromptDialog.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport styled from '@emotion/styled';\nimport { Button, ActionButton } from '../Button';\nimport { Input } from '../Input';\nimport Dialog, { DialogHeader, DialogBody, DialogFooter } from './Dialog';\n\ntype PromptOption = {\n    /** Shown as header of the dialog */\n    header: string;\n    /** Rendered as the body of the dialog */\n    body: string;\n    /** Default value for the input. */\n    defaultValue?: string;\n    /** Submit button text. Default value is 'Submit' */\n    submitText?: string;\n    /** Cancel button text. Default value is 'Cancel' */\n    cancelText?: string;\n    /** Props for the input. */\n    inputProps?: React.HTMLProps<HTMLInputElement>;\n    /** Additional props for the dialog. */\n    dialogProps?: React.ComponentProps<typeof Dialog>;\n};\n\nconst BodyText = styled.p`\n    margin-top: 0;\n`;\n\nconst InputContainer = styled.div`\n    display: flex;\n    flex: 1;\n    margin-top: 10px;\n\n    & > label {\n        flex: 1;\n        width: 100%;\n        padding: 0;\n\n        & > input {\n            width: 100%;\n            padding: 0 8px;\n            box-sizing: border-box;\n        }\n    }\n`;\n\nconst StyledInput = styled(Input)`\n    flex: 1;\n    padding: 0;\n`;\n\nexport default class PromptDialog extends React.Component<PromptOption, { value?: string }> {\n    static defaultProps = {\n        cancelText: 'Cancel',\n        submitText: 'Submit',\n        defaultValue: '',\n    };\n\n    constructor(props: PromptOption) {\n        super(props);\n        this.state = {\n            value: props.defaultValue,\n        };\n    }\n\n    private dialog = createRef<Dialog>();\n\n    private valueChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        this.setState({\n            value: e.target.value,\n        });\n    };\n\n    private cancel = () => this.dialog.current?.close();\n\n    private submit = (e: React.FormEvent) => {\n        e.preventDefault();\n        this.dialog.current?.close(this.state.value);\n    };\n\n    public show = () => {\n        return new Promise((resolve, reject) => {\n            const onClose = (value: unknown) => {\n                if (value) {\n                    resolve(value);\n                } else {\n                    reject();\n                }\n                this.setState({\n                    value: this.props.defaultValue,\n                });\n            };\n            this.dialog.current?.open(onClose);\n        });\n    };\n\n    render() {\n        const { header, body, inputProps, submitText, cancelText, dialogProps } = this.props;\n\n        return (\n            <Dialog\n                {...dialogProps}\n                ref={this.dialog}\n                closeOnEsc={false}\n                closeOnOverlayClick={false}\n            >\n                <form onSubmit={this.submit}>\n                    {header && <DialogHeader>{header}</DialogHeader>}\n                    <DialogBody>\n                        <BodyText>{body}</BodyText>\n                        <InputContainer>\n                            <StyledInput\n                                value={this.state.value}\n                                onChange={this.valueChange}\n                                {...inputProps}\n                            />\n                        </InputContainer>\n                    </DialogBody>\n                    <DialogFooter>\n                        <Button type=\"button\" onClick={this.cancel}>\n                            {cancelText}\n                        </Button>\n                        <ActionButton>{submitText}</ActionButton>\n                    </DialogFooter>\n                </form>\n            </Dialog>\n        );\n    }\n}\n"],"names":["BodyText","styled","InputContainer","StyledInput","Input","PromptDialog","React","Component","render","header","body","inputProps","submitText","cancelText","dialogProps","props","_jsx","Dialog","ref","dialog","closeOnEsc","closeOnOverlayClick","_jsxs","form","onSubmit","submit","DialogHeader","DialogBody","value","state","onChange","valueChange","DialogFooter","Button","type","onClick","cancel","ActionButton","createRef","e","setState","target","current","close","preventDefault","show","Promise","resolve","reject","onClose","defaultValue","open","defaultProps"],"mappings":"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"}

package/lib-esm/components/DragAndDrop/DragAndDrop.d.ts

@@ -1,18 +1,47 @@
-import { PropsWithChildren } from 'react';
+import React from 'react';
 import { ORIENTATION } from './types';
-type DragAndDropProps = {
-    /** Orientation of the list layout */
-    orientation: ORIENTATION;
+declare const DragAndDrop: React.ForwardRefExoticComponent<{
+    /**
+     * Orientation of the list layout
+     * @default ORIENTATION.VERTICAL
+     */
+    orientation?: ORIENTATION;
     /** Drop event handler */
     onDrop: (start: number, end: number) => void;
-    /** Shows drag indicator against each list item */
-    showIndicator: boolean;
-} & PropsWithChildren<{}>;
-declare function DragAndDrop(props: DragAndDropProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace DragAndDrop {
-    var defaultProps: {
-        orientation: ORIENTATION;
-        showIndicator: boolean;
-    };
-}
+    /** Shows drag indicator against each list item
+     * @default false
+     */
+    showIndicator?: boolean;
+    /**
+     * i18n: Template for item aria-label. Placeholders: {:position}, {:grabKey}, {:moveKeys}, {:dropKey}, {:altDropKey}
+     * @default 'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop'
+     */
+    itemAriaLabelTemplate?: string;
+    /** i18n: Aria label for drag handle
+     * @default 'Drag to reorder'
+     */
+    dragHandleAriaLabel?: string;
+    /**
+     * i18n: Template for grabbed announcement. Placeholders: {:position}, {:moveKeys}, {:dropKey}, {:altDropKey}, {:cancelKey}
+     * @default 'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel'
+     */
+    grabbedAnnouncementTemplate?: string;
+    /**
+     * i18n: Template for moved announcement. Placeholders: {:position}
+     * @default 'Item moved to position {:position}'
+     */
+    movedAnnouncementTemplate?: string;
+    /**
+     * i18n: Template for dropped announcement. Placeholders: {:position}
+     * @default 'Item dropped at position {:position}'
+     */
+    droppedAnnouncementTemplate?: string;
+    /**
+     * i18n: Template for cancelled announcement
+     * @default 'Drag cancelled, item restored to original position'
+     */
+    cancelledAnnouncementTemplate?: string;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export default DragAndDrop;