no-frills-ui 0.0.14-alpha.4 → 0.0.14-alpha.5

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

@@ -12,29 +12,29 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import styled from '@emotion/styled';
 import { Close } from '../../icons';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 const Container = styled.span `
     padding: 5px;
     padding-left: 15px;
     border-radius: 16px;
-    background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+    background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
     display: inline-flex;
     margin: 5px;
     line-height: 20px;
     align-items: center;
-
-    &:focus-within {
-        outline: 2px solid var(--primary-light, ${constants.PRIMARY_LIGHT});
-    }
 `;
 const Button = styled.button `
-    color: var(--background-color, ${constants.BACKGROUND});
-    background-color: var(--border-color, ${constants.DISABLED});
+    color: ${getThemeValue(THEME_NAME.BACKGROUND)};
+    background-color: ${getThemeValue(THEME_NAME.DISABLED)};
     border-radius: 50%;
     border: none;
     padding: 4px;
     display: inline-flex;
     margin-left: 5px;
+
+    &:focus-within {
+        outline: 4px solid ${getThemeValue(THEME_NAME.ERROR_LIGHT)};
+    }
 `;
 export default function Chip(props) {
     const { label, onCloseClick, closeButtonAriaLabel } = props, rest = __rest(props, ["label", "onCloseClick", "closeButtonAriaLabel"]);

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAW/C,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAA;;;;kDAIqB,SAAS,CAAC,kBAAkB;;;;;;;kDAO5B,SAAS,CAAC,aAAa;;CAExE,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;qCACS,SAAS,CAAC,UAAU;4CACb,SAAS,CAAC,QAAQ;;;;;;CAM7D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAwD;IACjF,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,oBAAoB,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA9D,iDAAsD,CAAQ,CAAC;IAErE,MAAM,YAAY,GAAgD,CAAC,CAAC,EAAE,EAAE;QACpE,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC9C,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,CAAC,CAAC;QACtB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAkD,CAAC,CAAC,EAAE,EAAE;QAC9E,qEAAqE;QACrE,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,UAAU,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC7D,CAAC,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,SAAS,oBAAK,IAAI,IAAE,OAAO,EAAE,YAAY,aACrC,KAAK,EACN,KAAC,MAAM,IACH,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,oBAAoB,gBACnB,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,UAAU,KAAK,EAAE,YAErD,KAAC,KAAK,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,GAAI,GAC3B,KACD,CACf,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { Close } from '../../icons';\nimport constants from '../../shared/constants';\n\ninterface ChipProps {\n    /** Label for the chip */\n    label: string;\n    /** Callback when the close button is clicked */\n    onCloseClick?: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    /** Aria label for the close button. Defaults to \"Remove {label}\" */\n    closeButtonAriaLabel?: string;\n}\n\nconst Container = styled.span`\n    padding: 5px;\n    padding-left: 15px;\n    border-radius: 16px;\n    background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});\n    display: inline-flex;\n    margin: 5px;\n    line-height: 20px;\n    align-items: center;\n\n    &:focus-within {\n        outline: 2px solid var(--primary-light, ${constants.PRIMARY_LIGHT});\n    }\n`;\n\nconst Button = styled.button`\n    color: var(--background-color, ${constants.BACKGROUND});\n    background-color: var(--border-color, ${constants.DISABLED});\n    border-radius: 50%;\n    border: none;\n    padding: 4px;\n    display: inline-flex;\n    margin-left: 5px;\n`;\n\nexport default function Chip(props: ChipProps & React.HTMLAttributes<HTMLSpanElement>) {\n    const { label, onCloseClick, closeButtonAriaLabel, ...rest } = props;\n\n    const keyUpHandler: React.KeyboardEventHandler<HTMLSpanElement> = (e) => {\n        if (e.key === 'Backspace' || e.key === 'Delete') {\n            onCloseClick?.(e);\n        }\n    };\n\n    const buttonKeyDownHandler: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {\n        // Stop propagation to prevent DragAndDrop from capturing Space/Enter\n        if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {\n            e.stopPropagation();\n        }\n    };\n\n    return (\n        <Container {...rest} onKeyUp={keyUpHandler}>\n            {label}\n            <Button\n                onClick={onCloseClick}\n                onKeyDown={buttonKeyDownHandler}\n                aria-label={closeButtonAriaLabel ?? `Remove ${label}`}\n            >\n                <Close height={16} width={16} />\n            </Button>\n        </Container>\n    );\n}\n"]}
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAWnE,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAA;;;;wBAIL,aAAa,CAAC,UAAU,CAAC,kBAAkB,CAAC;;;;;CAKnE,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;aACf,aAAa,CAAC,UAAU,CAAC,UAAU,CAAC;wBACzB,aAAa,CAAC,UAAU,CAAC,QAAQ,CAAC;;;;;;;;6BAQ7B,aAAa,CAAC,UAAU,CAAC,WAAW,CAAC;;CAEjE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAwD;IACjF,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,oBAAoB,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA9D,iDAAsD,CAAQ,CAAC;IAErE,MAAM,YAAY,GAAgD,CAAC,CAAC,EAAE,EAAE;QACpE,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC9C,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,CAAC,CAAC;QACtB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAkD,CAAC,CAAC,EAAE,EAAE;QAC9E,qEAAqE;QACrE,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,UAAU,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC7D,CAAC,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,SAAS,oBAAK,IAAI,IAAE,OAAO,EAAE,YAAY,aACrC,KAAK,EACN,KAAC,MAAM,IACH,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,oBAAoB,gBACnB,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,UAAU,KAAK,EAAE,YAErD,KAAC,KAAK,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,GAAI,GAC3B,KACD,CACf,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { Close } from '../../icons';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\ninterface ChipProps {\n    /** Label for the chip */\n    label: string;\n    /** Callback when the close button is clicked */\n    onCloseClick?: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    /** Aria label for the close button. Defaults to \"Remove {label}\" */\n    closeButtonAriaLabel?: string;\n}\n\nconst Container = styled.span`\n    padding: 5px;\n    padding-left: 15px;\n    border-radius: 16px;\n    background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    display: inline-flex;\n    margin: 5px;\n    line-height: 20px;\n    align-items: center;\n`;\n\nconst Button = styled.button`\n    color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    background-color: ${getThemeValue(THEME_NAME.DISABLED)};\n    border-radius: 50%;\n    border: none;\n    padding: 4px;\n    display: inline-flex;\n    margin-left: 5px;\n\n    &:focus-within {\n        outline: 4px solid ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n`;\n\nexport default function Chip(props: ChipProps & React.HTMLAttributes<HTMLSpanElement>) {\n    const { label, onCloseClick, closeButtonAriaLabel, ...rest } = props;\n\n    const keyUpHandler: React.KeyboardEventHandler<HTMLSpanElement> = (e) => {\n        if (e.key === 'Backspace' || e.key === 'Delete') {\n            onCloseClick?.(e);\n        }\n    };\n\n    const buttonKeyDownHandler: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {\n        // Stop propagation to prevent DragAndDrop from capturing Space/Enter\n        if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {\n            e.stopPropagation();\n        }\n    };\n\n    return (\n        <Container {...rest} onKeyUp={keyUpHandler}>\n            {label}\n            <Button\n                onClick={onCloseClick}\n                onKeyDown={buttonKeyDownHandler}\n                aria-label={closeButtonAriaLabel ?? `Remove ${label}`}\n            >\n                <Close height={16} width={16} />\n            </Button>\n        </Container>\n    );\n}\n"]}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
 import React, { useEffect, useId, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 import Chip from '../Chip/Chip';
 import { DragAndDrop, ORIENTATION } from '../DragAndDrop';
 // Label component for the ChipInput
@@ -16,45 +16,45 @@ const Label = styled.label `
     padding: 0 8px;
     width: 250px;
     border-radius: 3px;
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-    background-color: var(--background, ${constants.BACKGROUND});
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
+    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
 
     /** Focused */
     &:has(:focus),
     &:has(:active) {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:has(:focus) > span,
     &:has(:active) > span {
-        color: var(--primary, ${constants.PRIMARY});
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /** Disabled */
     &:has(:disabled) {
-        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
     }
 
     &:has(:disabled) > span {
-        color: #777;
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 
     /** Invalid */
     &:has(:focus:invalid) {
-        border-color: var(--error, ${constants.ERROR});
-        box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};
     }
 
     ${(props) => props.touched
     ? `
         &:has(:invalid) {
-            border-color: var(--error, ${constants.ERROR});
+            border-color: ${getThemeValue(THEME_NAME.ERROR)};
         }
     
         &:has(:invalid) > span {
-            color: var(--error, ${constants.ERROR});
+            color: ${getThemeValue(THEME_NAME.ERROR)};
         }
         `
     : ''}
@@ -62,10 +62,10 @@ const Label = styled.label `
     /** Error */
     ${(props) => props.errorText
     ? `
-        border-color: var(--error, ${constants.ERROR});
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
         & > span {
-            color: var(--error, ${constants.ERROR});
+            color: ${getThemeValue(THEME_NAME.ERROR)};
         }
         `
     : ''}
@@ -74,15 +74,15 @@ const Label = styled.label `
     &:has(:required) > span:after {
         content: '*';
         margin-left: 2px;
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
 
     & > input {
         border: none;
         outline: none;
-        width: 100%;
         line-height: 30px;
         min-height: 30px;
+        max-width: 95%;
     }
 
     /** Label Animation */
@@ -99,7 +99,7 @@ const Label = styled.label `
     &:has(:focus) > span,
     &:has(:placeholder-shown) > span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
@@ -108,7 +108,7 @@ const Label = styled.label `
     ? `
     & > span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
@@ -117,7 +117,7 @@ const Label = styled.label `
 `;
 // Error message container
 const ErrorContainer = styled.div `
-    color: var(--error, ${constants.ERROR});
+    color: ${getThemeValue(THEME_NAME.ERROR)};
     padding-top: 3px;
     font-size: 12px;
     line-height: 14px;

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

@@ -1 +1 @@
-{"version":3,"file":"ChipInput.js","sourceRoot":"","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useId, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\nimport Chip from '../Chip/Chip';\nimport { DragAndDrop, ORIENTATION } from '../DragAndDrop';\n\n// Prop types definition\ntype ChipInputProps = PropTypes.InferProps<typeof ChipInput.propTypes>;\n\n// Label component for the ChipInput\nconst Label = styled.label<{\n    text: string;\n    touched?: boolean;\n    errorText?: string;\n}>`\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1;\n    position: relative;\n    margin: 10px 5px;\n    color: inherit;\n    padding: 0 8px;\n    width: 250px;\n    border-radius: 3px;\n    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});\n    background-color: var(--background, ${constants.BACKGROUND});\n\n    /** Focused */\n    &:has(:focus),\n    &:has(:active) {\n        border-color: var(--primary, ${constants.PRIMARY});\n        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});\n    }\n\n    &:has(:focus) > span,\n    &:has(:active) > span {\n        color: var(--primary, ${constants.PRIMARY});\n    }\n\n    /** Disabled */\n    &:has(:disabled) {\n        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});\n        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});\n    }\n\n    &:has(:disabled) > span {\n        color: #777;\n    }\n\n    /** Invalid */\n    &:has(:focus:invalid) {\n        border-color: var(--error, ${constants.ERROR});\n        box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});\n    }\n\n    ${(props) =>\n        props.touched\n            ? `\n        &:has(:invalid) {\n            border-color: var(--error, ${constants.ERROR});\n        }\n    \n        &:has(:invalid) > span {\n            color: var(--error, ${constants.ERROR});\n        }\n        `\n            : ''}\n\n    /** Error */\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: var(--error, ${constants.ERROR});\n\n        & > span {\n            color: var(--error, ${constants.ERROR});\n        }\n        `\n            : ''}\n\n    /** Required */\n    &:has(:required) > span:after {\n        content: '*';\n        margin-left: 2px;\n        color: var(--error, ${constants.ERROR});\n    }\n\n    & > input {\n        border: none;\n        outline: none;\n        width: 100%;\n        line-height: 30px;\n        min-height: 30px;\n    }\n\n    /** Label Animation */\n    & > span {\n        position: absolute;\n        padding: 0 5px;\n        top: 0px;\n        left: 4px;\n        font-size: 14px;\n        line-height: 32px;\n        transition: all 300ms ease;\n    }\n\n    &:has(:focus) > span,\n    &:has(:placeholder-shown) > span {\n        top: -8px;\n        background: var(--background, ${constants.BACKGROUND});\n        font-size: 12px;\n        line-height: 14px;\n    }\n\n    ${(props) =>\n        props.text !== ''\n            ? `\n    & > span {\n        top: -8px;\n        background: var(--background, ${constants.BACKGROUND});\n        font-size: 12px;\n        line-height: 14px;\n    }\n    `\n            : ''}\n`;\n\n// Error message container\nconst ErrorContainer = styled.div`\n    color: var(--error, ${constants.ERROR});\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n    margin-left: 3px;\n`;\n\n// Visually hidden but accessible to screen readers\nconst VisuallyHidden = styled.ul`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n\n    & li {\n        list-style: none;\n    }\n`;\n\n/**\n * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.\n * @component\n * @example\n * ```tsx\n * <ChipInput\n *   value={['tag1', 'tag2']}\n *   onChange={(newTags) => console.log(newTags)}\n *   label=\"Add tags\"\n *   errorText=\"At least one tag is required\"\n * />\n * ```\n */\nexport default function ChipInput(\n    props: ChipInputProps & React.AllHTMLAttributes<HTMLInputElement>,\n) {\n    const [text, setText] = useState('');\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState<string[]>(props.value);\n    const InputRef = React.useRef<HTMLInputElement>(null);\n    const [announcement, setAnnouncement] = useState('');\n    const errorId = useId();\n\n    /**\n     * Replace {:label} placeholder in template string\n     */\n    const replacePlaceholder = (\n        template: string | undefined,\n        label: string,\n    ): string | undefined => {\n        if (!template) return undefined;\n        return template.replace(/\\{:label\\}/g, label);\n    };\n\n    // Sync internal value with props.value\n    useEffect(() => {\n        if (Array.isArray(props.value)) {\n            setValue(props.value);\n        }\n    }, [props.value]);\n\n    /**\n     * Update the chip values and notify changes.\n     * @param newValue The new array of chip values\n     */\n    const updateValue = (newValue: string[]) => {\n        const deduped = Array.from(new Set(newValue));\n        setValue(deduped);\n        props.onChange?.(deduped);\n    };\n\n    /**\n     * Marks the input as touched on focus.\n     * @param e React focus event\n     */\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    /**\n     * Change handler for the input field.\n     * @param e React change event\n     */\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n        setText(e.target.value);\n    };\n\n    /**\n     * Adds a new chip on Enter key press.\n     * @param e React keyboard event\n     */\n    const handleKeyUp: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n        if (e.key === 'Enter' && text.trim() !== '') {\n            const newValue = [...value, text.trim()];\n            updateValue(newValue);\n            setText('');\n            setAnnouncement(replacePlaceholder(props.addedAnnouncementTemplate, text.trim())!);\n        }\n    };\n\n    /**\n     * Removes a chip from the list.\n     * @param chipToRemove The chip value to remove\n     */\n    const removeChip = (chipToRemove: string) => {\n        const newValue = value.filter((chip) => chip !== chipToRemove);\n        updateValue(newValue);\n        setAnnouncement(replacePlaceholder(props.removedAnnouncementTemplate, chipToRemove)!);\n    };\n\n    /**\n     * Moves a chip from one position to another.\n     * @param start The starting index of the item to move\n     * @param end The ending index where the item should be placed\n     */\n    const onDrop = (start: number, end: number) => {\n        // Clone existing elements\n        const newItems = [...value];\n        // Remove the element to be moved\n        const item = newItems.splice(start, 1);\n        // Add it back at the required position\n        newItems.splice(end, 0, item[0]);\n        // Update\n        updateValue(newItems);\n    };\n\n    // Render the component\n    return (\n        <>\n            <Label text={text} touched={touched} errorText={props.errorText}>\n                <input\n                    {...props}\n                    ref={InputRef}\n                    value={text}\n                    onChange={handleChange}\n                    onFocus={handleFocus}\n                    onKeyUp={handleKeyUp}\n                    required={props.required && value.length === 0}\n                    aria-required={props.required}\n                    aria-invalid={!!props.errorText}\n                    aria-describedby={props.errorText ? errorId : undefined}\n                />\n                <div>\n                    {value?.length > 0 && (\n                        <DragAndDrop orientation={ORIENTATION.HORIZONTAL} onDrop={onDrop}>\n                            {value.map((chip) => (\n                                <Chip\n                                    key={chip}\n                                    label={chip}\n                                    onCloseClick={() => removeChip(chip)}\n                                    closeButtonAriaLabel={replacePlaceholder(\n                                        props.closeButtonAriaLabel,\n                                        chip,\n                                    )}\n                                />\n                            ))}\n                        </DragAndDrop>\n                    )}\n                </div>\n                <span>{props.label}</span>\n                {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n            </Label>\n            <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n                {announcement}\n            </VisuallyHidden>\n        </>\n    );\n}\n\nChipInput.propTypes = {\n    /** Label for the field */\n    label: PropTypes.string.isRequired,\n    /** Error message for the field */\n    errorText: PropTypes.string,\n    /** Values to display as chips */\n    value: PropTypes.arrayOf(PropTypes.string),\n    /** Callback when chips change */\n    onChange: PropTypes.func,\n    /** Aria label for the close button on chip. Defaults to \"Remove {label}\" */\n    closeButtonAriaLabel: PropTypes.string,\n    /** Announcement text when a chip is added. Defaults to \"{label} was added\" */\n    addedAnnouncementTemplate: PropTypes.string,\n    /** Announcement text when a chip is removed. Defaults to \"{label} was removed\" */\n    removedAnnouncementTemplate: PropTypes.string,\n};\n\nChipInput.defaultProps = {\n    value: [],\n    closeButtonAriaLabel: 'Remove {:label}',\n    addedAnnouncementTemplate: '{:label} was added',\n    removedAnnouncementTemplate: '{:label} was removed',\n};\n"]}
+{"version":3,"file":"ChipInput.js","sourceRoot":"","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useId, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport Chip from '../Chip/Chip';\nimport { DragAndDrop, ORIENTATION } from '../DragAndDrop';\n\n// Prop types definition\ntype ChipInputProps = PropTypes.InferProps<typeof ChipInput.propTypes>;\n\n// Label component for the ChipInput\nconst Label = styled.label<{\n    text: string;\n    touched?: boolean;\n    errorText?: string;\n}>`\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1;\n    position: relative;\n    margin: 10px 5px;\n    color: inherit;\n    padding: 0 8px;\n    width: 250px;\n    border-radius: 3px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n\n    /** Focused */\n    &:has(:focus),\n    &:has(:active) {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:has(:focus) > span,\n    &:has(:active) > span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** Disabled */\n    &:has(:disabled) {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:has(:disabled) > span {\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    /** Invalid */\n    &:has(:focus:invalid) {\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n\n    ${(props) =>\n        props.touched\n            ? `\n        &:has(:invalid) {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    \n        &:has(:invalid) > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Error */\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Required */\n    &:has(:required) > span:after {\n        content: '*';\n        margin-left: 2px;\n        color: ${getThemeValue(THEME_NAME.ERROR)};\n    }\n\n    & > input {\n        border: none;\n        outline: none;\n        line-height: 30px;\n        min-height: 30px;\n        max-width: 95%;\n    }\n\n    /** Label Animation */\n    & > span {\n        position: absolute;\n        padding: 0 5px;\n        top: 0px;\n        left: 4px;\n        font-size: 14px;\n        line-height: 32px;\n        transition: all 300ms ease;\n    }\n\n    &:has(:focus) > span,\n    &:has(:placeholder-shown) > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n\n    ${(props) =>\n        props.text !== ''\n            ? `\n    & > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n    `\n            : ''}\n`;\n\n// Error message container\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n    margin-left: 3px;\n`;\n\n// Visually hidden but accessible to screen readers\nconst VisuallyHidden = styled.ul`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n\n    & li {\n        list-style: none;\n    }\n`;\n\n/**\n * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.\n * @component\n * @example\n * ```tsx\n * <ChipInput\n *   value={['tag1', 'tag2']}\n *   onChange={(newTags) => console.log(newTags)}\n *   label=\"Add tags\"\n *   errorText=\"At least one tag is required\"\n * />\n * ```\n */\nexport default function ChipInput(\n    props: ChipInputProps & React.AllHTMLAttributes<HTMLInputElement>,\n) {\n    const [text, setText] = useState('');\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState<string[]>(props.value);\n    const InputRef = React.useRef<HTMLInputElement>(null);\n    const [announcement, setAnnouncement] = useState('');\n    const errorId = useId();\n\n    /**\n     * Replace {:label} placeholder in template string\n     */\n    const replacePlaceholder = (\n        template: string | undefined,\n        label: string,\n    ): string | undefined => {\n        if (!template) return undefined;\n        return template.replace(/\\{:label\\}/g, label);\n    };\n\n    // Sync internal value with props.value\n    useEffect(() => {\n        if (Array.isArray(props.value)) {\n            setValue(props.value);\n        }\n    }, [props.value]);\n\n    /**\n     * Update the chip values and notify changes.\n     * @param newValue The new array of chip values\n     */\n    const updateValue = (newValue: string[]) => {\n        const deduped = Array.from(new Set(newValue));\n        setValue(deduped);\n        props.onChange?.(deduped);\n    };\n\n    /**\n     * Marks the input as touched on focus.\n     * @param e React focus event\n     */\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    /**\n     * Change handler for the input field.\n     * @param e React change event\n     */\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n        setText(e.target.value);\n    };\n\n    /**\n     * Adds a new chip on Enter key press.\n     * @param e React keyboard event\n     */\n    const handleKeyUp: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n        if (e.key === 'Enter' && text.trim() !== '') {\n            const newValue = [...value, text.trim()];\n            updateValue(newValue);\n            setText('');\n            setAnnouncement(replacePlaceholder(props.addedAnnouncementTemplate, text.trim())!);\n        }\n    };\n\n    /**\n     * Removes a chip from the list.\n     * @param chipToRemove The chip value to remove\n     */\n    const removeChip = (chipToRemove: string) => {\n        const newValue = value.filter((chip) => chip !== chipToRemove);\n        updateValue(newValue);\n        setAnnouncement(replacePlaceholder(props.removedAnnouncementTemplate, chipToRemove)!);\n    };\n\n    /**\n     * Moves a chip from one position to another.\n     * @param start The starting index of the item to move\n     * @param end The ending index where the item should be placed\n     */\n    const onDrop = (start: number, end: number) => {\n        // Clone existing elements\n        const newItems = [...value];\n        // Remove the element to be moved\n        const item = newItems.splice(start, 1);\n        // Add it back at the required position\n        newItems.splice(end, 0, item[0]);\n        // Update\n        updateValue(newItems);\n    };\n\n    // Render the component\n    return (\n        <>\n            <Label text={text} touched={touched} errorText={props.errorText}>\n                <input\n                    {...props}\n                    ref={InputRef}\n                    value={text}\n                    onChange={handleChange}\n                    onFocus={handleFocus}\n                    onKeyUp={handleKeyUp}\n                    required={props.required && value.length === 0}\n                    aria-required={props.required}\n                    aria-invalid={!!props.errorText}\n                    aria-describedby={props.errorText ? errorId : undefined}\n                />\n                <div>\n                    {value?.length > 0 && (\n                        <DragAndDrop orientation={ORIENTATION.HORIZONTAL} onDrop={onDrop}>\n                            {value.map((chip) => (\n                                <Chip\n                                    key={chip}\n                                    label={chip}\n                                    onCloseClick={() => removeChip(chip)}\n                                    closeButtonAriaLabel={replacePlaceholder(\n                                        props.closeButtonAriaLabel,\n                                        chip,\n                                    )}\n                                />\n                            ))}\n                        </DragAndDrop>\n                    )}\n                </div>\n                <span>{props.label}</span>\n                {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n            </Label>\n            <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n                {announcement}\n            </VisuallyHidden>\n        </>\n    );\n}\n\nChipInput.propTypes = {\n    /** Label for the field */\n    label: PropTypes.string.isRequired,\n    /** Error message for the field */\n    errorText: PropTypes.string,\n    /** Values to display as chips */\n    value: PropTypes.arrayOf(PropTypes.string),\n    /** Callback when chips change */\n    onChange: PropTypes.func,\n    /** Aria label for the close button on chip. Defaults to \"Remove {label}\" */\n    closeButtonAriaLabel: PropTypes.string,\n    /** Announcement text when a chip is added. Defaults to \"{label} was added\" */\n    addedAnnouncementTemplate: PropTypes.string,\n    /** Announcement text when a chip is removed. Defaults to \"{label} was removed\" */\n    removedAnnouncementTemplate: PropTypes.string,\n};\n\nChipInput.defaultProps = {\n    value: [],\n    closeButtonAriaLabel: 'Remove {:label}',\n    addedAnnouncementTemplate: '{:label} was added',\n    removedAnnouncementTemplate: '{:label} was removed',\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,KAAK,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC;AAEtE,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IACjE,OAAO,CAAC,MAAM,CAAuB;IAErC,MAAM,CAAC,SAAS;QACZ,oCAAoC;;QAEpC,4BAA4B;;QAE5B,gDAAgD;;QAEhD,2BAA2B;;MAE7B;IAEF,MAAM,CAAC,YAAY;;MAEjB;IAEK,IAAI,yBAKT;IAEF,OAAO,CAAC,KAAK,CAAqC;IAElD,MAAM;CAgBT"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,KAAK,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC;AAItE,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IACjE,OAAO,CAAC,MAAM,CAAuB;IAErC,MAAM,CAAC,SAAS;QACZ,oCAAoC;;QAEpC,4BAA4B;;QAE5B,gDAAgD;;QAEhD,2BAA2B;;MAE7B;IAEF,MAAM,CAAC,YAAY;;MAEjB;IAEK,IAAI,yBAKT;IAEF,OAAO,CAAC,KAAK,CAAqC;IAElD,MAAM;CAsBT"}

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

@@ -3,6 +3,7 @@ import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '../Button';
 import Dialog, { DialogBody, DialogFooter, DialogHeader } from './Dialog';
+let dialogCounter = 0;
 class AlertDialog extends React.Component {
     constructor() {
         super(...arguments);
@@ -16,7 +17,9 @@ class AlertDialog extends React.Component {
         this.close = () => this.dialog.current.close();
     }
     render() {
-        return (_jsxs(Dialog, Object.assign({}, this.props.dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [this.props.header && _jsx(DialogHeader, { children: this.props.header }), _jsx(DialogBody, { children: this.props.body }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: this.close, children: this.props.buttonText }) })] })));
+        const titleId = `nfui-alert-dialog-${dialogCounter++}-title`;
+        const descriptionId = `nfui-alert-dialog-${dialogCounter++}-description`;
+        return (_jsxs(Dialog, Object.assign({}, this.props.dialogProps, { role: "alertdialog", "aria-labelledby": titleId, "aria-describedby": descriptionId, ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [this.props.header && _jsx(DialogHeader, { id: titleId, children: this.props.header }), _jsx(DialogBody, { id: descriptionId, children: this.props.body }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: this.close, children: this.props.buttonText }) })] })));
     }
 }
 AlertDialog.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/AlertDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,MAAM,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI1E,MAAqB,WAAY,SAAQ,KAAK,CAAC,SAAsB;IAArE;;QACY,WAAM,GAAG,SAAS,EAAU,CAAC;QAiB9B,SAAI,GAAG,GAAG,EAAE;YACf,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC3B,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBACpC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAEM,UAAK,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAkBtD,CAAC;IAhBG,MAAM;QACF,OAAO,CACH,MAAC,MAAM,oBACC,IAAI,CAAC,KAAK,CAAC,WAAW,IAC1B,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,KAAK,EACjB,mBAAmB,EAAE,KAAK,aAEzB,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,KAAC,YAAY,cAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAgB,EACtE,KAAC,UAAU,cAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAc,EAC1C,KAAC,YAAY,cACT,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,YAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAU,GAClD,KACV,CACZ,CAAC;IACN,CAAC;;AAvCM,qBAAS,GAAG;IACf,oCAAoC;IACpC,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,4BAA4B;IAC5B,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,UAAU;IAC9B,gDAAgD;IAChD,UAAU,EAAE,SAAS,CAAC,MAAM;IAC5B,2BAA2B;IAC3B,WAAW,EAAE,SAAS,CAAC,MAAM;CAChC,AATe,CASd;AAEK,wBAAY,GAAG;IAClB,UAAU,EAAE,IAAI;CACnB,AAFkB,CAEjB;eAhBe,WAAW","sourcesContent":["import React, { createRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button } from '../Button';\nimport Dialog, { DialogBody, DialogFooter, DialogHeader } from './Dialog';\n\ntype AlertOption = PropTypes.InferProps<typeof AlertDialog.propTypes>;\n\nexport default class AlertDialog extends React.Component<AlertOption> {\n    private dialog = createRef<Dialog>();\n\n    static propTypes = {\n        /** Shown as header of the dialog */\n        header: PropTypes.string,\n        /** Rendered in the body. */\n        body: PropTypes.any.isRequired,\n        /** Accept button text, default value is `OK` */\n        buttonText: PropTypes.string,\n        /** props for the dialog */\n        dialogProps: PropTypes.object,\n    };\n\n    static defaultProps = {\n        buttonText: 'OK',\n    };\n\n    public show = () => {\n        return new Promise((resolve) => {\n            const onClose = () => resolve(null);\n            this.dialog.current.open(onClose);\n        });\n    };\n\n    private close = () => this.dialog.current.close();\n\n    render() {\n        return (\n            <Dialog\n                {...this.props.dialogProps}\n                ref={this.dialog}\n                closeOnEsc={false}\n                closeOnOverlayClick={false}\n            >\n                {this.props.header && <DialogHeader>{this.props.header}</DialogHeader>}\n                <DialogBody>{this.props.body}</DialogBody>\n                <DialogFooter>\n                    <Button onClick={this.close}>{this.props.buttonText}</Button>\n                </DialogFooter>\n            </Dialog>\n        );\n    }\n}\n"]}
+{"version":3,"file":"AlertDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/AlertDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,MAAM,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI1E,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB,MAAqB,WAAY,SAAQ,KAAK,CAAC,SAAsB;IAArE;;QACY,WAAM,GAAG,SAAS,EAAU,CAAC;QAiB9B,SAAI,GAAG,GAAG,EAAE;YACf,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC3B,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBACpC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAEM,UAAK,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAwBtD,CAAC;IAtBG,MAAM;QACF,MAAM,OAAO,GAAG,qBAAqB,aAAa,EAAE,QAAQ,CAAC;QAC7D,MAAM,aAAa,GAAG,qBAAqB,aAAa,EAAE,cAAc,CAAC;QAEzE,OAAO,CACH,MAAC,MAAM,oBACC,IAAI,CAAC,KAAK,CAAC,WAAW,IAC1B,IAAI,EAAC,aAAa,qBACD,OAAO,sBACN,aAAa,EAC/B,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,KAAK,EACjB,mBAAmB,EAAE,KAAK,aAEzB,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,KAAC,YAAY,IAAC,EAAE,EAAE,OAAO,YAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAgB,EACnF,KAAC,UAAU,IAAC,EAAE,EAAE,aAAa,YAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAc,EAC7D,KAAC,YAAY,cACT,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,YAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAU,GAClD,KACV,CACZ,CAAC;IACN,CAAC;;AA7CM,qBAAS,GAAG;IACf,oCAAoC;IACpC,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,4BAA4B;IAC5B,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,UAAU;IAC9B,gDAAgD;IAChD,UAAU,EAAE,SAAS,CAAC,MAAM;IAC5B,2BAA2B;IAC3B,WAAW,EAAE,SAAS,CAAC,MAAM;CAChC,AATe,CASd;AAEK,wBAAY,GAAG;IAClB,UAAU,EAAE,IAAI;CACnB,AAFkB,CAEjB;eAhBe,WAAW","sourcesContent":["import React, { createRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button } from '../Button';\nimport Dialog, { DialogBody, DialogFooter, DialogHeader } from './Dialog';\n\ntype AlertOption = PropTypes.InferProps<typeof AlertDialog.propTypes>;\n\nlet dialogCounter = 0;\n\nexport default class AlertDialog extends React.Component<AlertOption> {\n    private dialog = createRef<Dialog>();\n\n    static propTypes = {\n        /** Shown as header of the dialog */\n        header: PropTypes.string,\n        /** Rendered in the body. */\n        body: PropTypes.any.isRequired,\n        /** Accept button text, default value is `OK` */\n        buttonText: PropTypes.string,\n        /** props for the dialog */\n        dialogProps: PropTypes.object,\n    };\n\n    static defaultProps = {\n        buttonText: 'OK',\n    };\n\n    public show = () => {\n        return new Promise((resolve) => {\n            const onClose = () => resolve(null);\n            this.dialog.current.open(onClose);\n        });\n    };\n\n    private close = () => this.dialog.current.close();\n\n    render() {\n        const titleId = `nfui-alert-dialog-${dialogCounter++}-title`;\n        const descriptionId = `nfui-alert-dialog-${dialogCounter++}-description`;\n\n        return (\n            <Dialog\n                {...this.props.dialogProps}\n                role=\"alertdialog\"\n                aria-labelledby={titleId}\n                aria-describedby={descriptionId}\n                ref={this.dialog}\n                closeOnEsc={false}\n                closeOnOverlayClick={false}\n            >\n                {this.props.header && <DialogHeader id={titleId}>{this.props.header}</DialogHeader>}\n                <DialogBody id={descriptionId}>{this.props.body}</DialogBody>\n                <DialogFooter>\n                    <Button onClick={this.close}>{this.props.buttonText}</Button>\n                </DialogFooter>\n            </Dialog>\n        );\n    }\n}\n"]}

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

@@ -17,7 +17,7 @@ interface DialogState {
     show: boolean;
     LayerComponent?: () => React.ReactPortal | null;
 }
-declare class Dialog extends React.Component<React.PropsWithChildren<DialogOptions>, DialogState> {
+declare class Dialog extends React.Component<React.PropsWithChildren<DialogOptions> & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>, DialogState> {
     static propTypes: {
         /** Flag to close dialog on `esc` click. Default value is true. */
         closeOnEsc: PropTypes.Requireable<boolean>;
@@ -30,7 +30,32 @@ declare class Dialog extends React.Component<React.PropsWithChildren<DialogOptio
     };
     private closeDialog;
     private onCloseFn;
+    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: unknown) => void) => void;
     close: (resp?: unknown) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,eAAO,MAAM,eAAe;;SAqBL,MACrB,WAAW;;;UANZ,CAAC;AAEF,OAAO,EACH,MAAM,IAAI,YAAY,EACtB,IAAI,IAAI,UAAU,EAClB,MAAM,IAAI,YAAY,GACzB,MAAM,qBAAqB,CAAC;AAE7B,UAAU,aAAa;IACnB,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,UAAU,WAAW;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC;CACnD;AAED,cAAM,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,iBAAiB,CAAC,aAAa,CAAC,EAAE,WAAW,CAAC;IACrF,MAAM,CAAC,SAAS;QACZ,kEAAkE;;QAElE,6DAA6D;;MAE/D;IAEF,MAAM,CAAC,YAAY;;;MAGjB;IAEF,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,SAAS,CAA2B;IAE5C,KAAK,EAAE,WAAW,CAGhB;IAEF,qBAAqB,CAAC,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW;IAI/D,IAAI,mBAAoB,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,UAwBpD;IAEK,KAAK,UAAW,OAAO,UAE5B;IAEF,OAAO,CAAC,aAAa,CAMnB;IAEF,MAAM;CAST;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,eAAO,MAAM,eAAe;;SAqBL,MACrB,WAAW;;;UANZ,CAAC;AAEF,OAAO,EACH,MAAM,IAAI,YAAY,EACtB,IAAI,IAAI,UAAU,EAClB,MAAM,IAAI,YAAY,GACzB,MAAM,qBAAqB,CAAC;AAE7B,UAAU,aAAa;IACnB,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,UAAU,WAAW;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC;CACnD;AAED,cAAM,MAAO,SAAQ,KAAK,CAAC,SAAS,CAChC,KAAK,CAAC,iBAAiB,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,EAC5F,WAAW,CACd;IACG,MAAM,CAAC,SAAS;QACZ,kEAAkE;;QAElE,6DAA6D;;MAE/D;IAEF,MAAM,CAAC,YAAY;;;MAGjB;IAEF,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,kBAAkB,CAA4B;IACtD,OAAO,CAAC,SAAS,CAAqC;IAEtD,KAAK,EAAE,WAAW,CAGhB;IAEF;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAO1B;IAEF;;;OAGG;IACH,OAAO,CAAC,aAAa,CAoBnB;IAEF;;OAEG;IACH,OAAO,CAAC,YAAY,CAUlB;IAEF;;;OAGG;IACH,OAAO,CAAC,YAAY,CAMlB;IAEF;;;OAGG;IACH,OAAO,CAAC,eAAe,CAgBrB;IAEF,qBAAqB,CAAC,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW;IAI/D,IAAI,mBAAoB,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,UAoCpD;IAEK,KAAK,UAAW,OAAO,UAE5B;IAEF,OAAO,CAAC,aAAa,CAOnB;IAEF,MAAM;CAST;AAED,eAAe,MAAM,CAAC"}

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

@@ -36,12 +36,94 @@ export { Header as DialogHeader, Body as DialogBody, Footer as DialogFooter, } f
 class Dialog extends React.Component {
     constructor() {
         super(...arguments);
+        this.lastFocusedElement = null;
+        this.dialogRef = 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 _a = this.props, { closeOnEsc, closeOnOverlayClick, children } = _a, rest = __rest(_a, ["closeOnEsc", "closeOnOverlayClick", "children"]);
+            // Save current focus
+            this.lastFocusedElement = document.activeElement;
             const [Component, closeFn] = LayerManager.renderLayer({
                 exitDelay: 300,
                 overlay: true,
@@ -49,7 +131,7 @@ 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: (_jsx(DialogContainer, Object.assign({}, 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;
             this.setState({
@@ -64,6 +146,7 @@ class Dialog extends React.Component {
         };
         this.closeCallback = (resp) => {
             var _a;
+            this.restoreFocus();
             this.setState({
                 show: false,
                 LayerComponent: undefined,

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;AAc7B,MAAM,MAAO,SAAQ,KAAK,CAAC,SAA8D;IAAzF;;QAgBI,UAAK,GAAgB;YACjB,IAAI,EAAE,KAAK;YACX,cAAc,EAAE,SAAS;SAC5B,CAAC;QAMK,SAAI,GAAG,CAAC,aAAuC,EAAE,EAAE;YACtD,MAAM,KAAyD,IAAI,CAAC,KAAK,EAAnE,EAAE,UAAU,EAAE,mBAAmB,EAAE,QAAQ,OAAwB,EAAnB,IAAI,cAApD,iDAAsD,CAAa,CAAC;YAE1E,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,YAAY,CAAC,WAAW,CAAC;gBAClD,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,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,QAAQ,kBACnE,QAAQ,IACK,CACrB;aACJ,CAAC,CAAC;YAEH,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;YAE3B,IAAI,CAAC,QAAQ,CAAC;gBACV,IAAI,EAAE,IAAI;gBACV,cAAc,EAAE,SAAS;aAC5B,CAAC,CAAC;YACH,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC;QACnC,CAAC,CAAC;QAEK,UAAK,GAAG,CAAC,IAAc,EAAE,EAAE;;YAC9B,MAAA,IAAI,CAAC,WAAW,qDAAG,IAAI,CAAC,CAAC;QAC7B,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,IAAc,EAAE,EAAE;;YACvC,IAAI,CAAC,QAAQ,CAAC;gBACV,IAAI,EAAE,KAAK;gBACX,cAAc,EAAE,SAAS;aAC5B,CAAC,CAAC;YACH,MAAA,IAAI,CAAC,SAAS,qDAAG,IAAI,CAAC,CAAC;QAC3B,CAAC,CAAC;IAWN,CAAC;IAnDG,qBAAqB,CAAC,SAAwB,EAAE,SAAsB;QAClE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC;IAC9C,CAAC;IAwCD,MAAM;QACF,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEtC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAc,EAAE,CAAC;YACpC,OAAO,KAAC,cAAc,KAAG,CAAC;QAC9B,CAAC;aAAM,CAAC;YACJ,OAAO,IAAI,CAAC;QAChB,CAAC;IACL,CAAC;;AAtEM,gBAAS,GAAG;IACf,kEAAkE;IAClE,UAAU,EAAE,SAAS,CAAC,IAAI;IAC1B,6DAA6D;IAC7D,mBAAmB,EAAE,SAAS,CAAC,IAAI;CACtC,AALe,CAKd;AAEK,mBAAY,GAAG;IAClB,UAAU,EAAE,IAAI;IAChB,mBAAmB,EAAE,IAAI;CAC5B,AAHkB,CAGjB;AA+DN,eAAe,MAAM,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\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.ReactPortal | null;\n}\n\nclass Dialog extends React.Component<React.PropsWithChildren<DialogOptions>, DialogState> {\n    static propTypes = {\n        /** Flag to close dialog on `esc` click. Default value is true. */\n        closeOnEsc: PropTypes.bool,\n        /** Close layer overlay is clicked. Default value is true. */\n        closeOnOverlayClick: PropTypes.bool,\n    };\n\n    static defaultProps = {\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    private closeDialog: (resp?: unknown) => void;\n    private onCloseFn: (resp?: unknown) => void;\n\n    state: DialogState = {\n        show: false,\n        LayerComponent: undefined,\n    };\n\n    shouldComponentUpdate(nextProps: DialogOptions, nextState: DialogState) {\n        return this.state.show !== nextState.show;\n    }\n\n    public open = (closeCallback?: (resp: unknown) => void) => {\n        const { closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;\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 {...rest} onClick={(e) => e.stopPropagation()} elevated>\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;\n    };\n\n    public close = (resp?: unknown) => {\n        this.closeDialog?.(resp);\n    };\n\n    private closeCallback = (resp?: unknown) => {\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"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\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.ReactPortal | null;\n}\n\nclass Dialog extends React.Component<\n    React.PropsWithChildren<DialogOptions> & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,\n    DialogState\n> {\n    static propTypes = {\n        /** Flag to close dialog on `esc` click. Default value is true. */\n        closeOnEsc: PropTypes.bool,\n        /** Close layer overlay is clicked. Default value is true. */\n        closeOnOverlayClick: PropTypes.bool,\n    };\n\n    static defaultProps = {\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    private closeDialog: (resp?: unknown) => void;\n    private onCloseFn: (resp?: unknown) => void;\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    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;\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"]}

package/lib-esm/components/DragAndDrop/DragItem.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useContext, useState, useEffect, } from 'react';
 import styled from '@emotion/styled';
 import { DragIndicator } from '../../icons';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 import { ORIENTATION, DragContext } from './types';
 /** Styled component for the draggable item container */
 const Item = styled.div `
@@ -11,25 +11,25 @@ const Item = styled.div `
     user-select: ${(props) => (props.showIndicator ? 'auto' : 'none')};
     border-top: 2px dashed
         ${(props) => props.orientation === ORIENTATION.VERTICAL && props.active > 0
-    ? constants.PRIMARY
+    ? getThemeValue(THEME_NAME.PRIMARY)
     : 'transparent'};
     border-bottom: 2px dashed
         ${(props) => props.orientation === ORIENTATION.VERTICAL && props.active < 0
-    ? constants.PRIMARY
+    ? getThemeValue(THEME_NAME.PRIMARY)
     : 'transparent'};
     border-left: 2px dashed
         ${(props) => props.orientation === ORIENTATION.HORIZONTAL && props.active > 0
-    ? constants.PRIMARY
+    ? getThemeValue(THEME_NAME.PRIMARY)
     : 'transparent'};
     border-right: 2px dashed
         ${(props) => props.orientation === ORIENTATION.HORIZONTAL && props.active < 0
-    ? constants.PRIMARY
+    ? getThemeValue(THEME_NAME.PRIMARY)
     : 'transparent'};
     opacity: ${(props) => (props.dragging ? 0.5 : 1)};
     border-radius: 10px;
 
     &:focus {
-        box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:focus:not(:focus-visible) {
@@ -37,7 +37,7 @@ const Item = styled.div `
     }
 
     &:focus-visible {
-        box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 `;
 /** Styled component for the drag handle indicator */
@@ -45,7 +45,7 @@ const DragKnob = styled.div `
     padding-top: 8px;
     cursor: move;
     touch-action: none;
-    color: var(--disabled, ${constants.DISABLED});
+    color: ${getThemeValue(THEME_NAME.DISABLED)};
 `;
 /** Container for the children */
 const Container = styled.div `