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

package/lib-esm/components/Input/Toggle.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 const Switch = styled.label `
     position: relative;
     display: inline-flex;
     margin: 5px 0;
 `;
 const Input = styled.input `
+    position: absolute;
+    width: 0;
+    height: 0;
     appearance: none;
     margin: 0;
 
@@ -16,7 +19,7 @@ const Input = styled.input `
         cursor: pointer;
         width: 30px;
         height: 18px;
-        background-color: ${constants.LIGHT_GREY};
+        background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};
         transition: 0.4s;
         border-radius: 10px;
         padding: 0 3px;
@@ -29,51 +32,51 @@ const Input = styled.input `
         width: 14px;
         left: 1px;
         top: 1px;
-        border: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});
+        border: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
         border-radius: 50%;
-        background-color: var(--background, ${constants.BACKGROUND});
+        background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
         transition: 0.4s;
     }
 
     /* checked */
     &:checked + span {
-        background-color: var(--primary, ${constants.PRIMARY_LIGHT});
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:checked + span:before {
         transform: translateX(18px);
-        border-color: var(--primary, ${constants.PRIMARY});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /* focus */
     &:enabled:focus + span:before {
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});
-        border-color: var(--primary, ${constants.PRIMARY});
+        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /* hover */
     &:enabled:hover ~ span {
         cursor: pointer;
-        color: var(--primary, ${constants.PRIMARY});
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /* disabled */
     &:disabled ~ span {
-        color: var(--disabled-border, ${constants.DISABLED_BORDER});
+        color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
     }
 
     &:disabled + span {
-        background-color: ${constants.LIGHT_GREY};
+        background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};
         cursor: not-allowed;
     }
 
     &:disabled + span:before {
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
+        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
     }
 `;
 function Toggle(props) {
-    return (_jsxs(Switch, { children: [_jsx(Input, Object.assign({}, props, { type: "checkbox" })), _jsx("span", {}), _jsx("span", { children: props.label })] }));
+    return (_jsxs(Switch, { children: [_jsx(Input, Object.assign({}, props, { type: "checkbox", role: "switch", "aria-checked": props.checked })), _jsx("span", {}), _jsx("span", { children: props.label })] }));
 }
 Toggle.propTypes = {
     /** Label for the field */

package/lib-esm/components/Input/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/Input/Toggle.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAA;;;;CAI1B,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;4BASE,SAAS,CAAC,UAAU;;;;;;;;;;;;;mDAaG,SAAS,CAAC,eAAe;;8CAE9B,SAAS,CAAC,UAAU;;;;;;2CAMvB,SAAS,CAAC,aAAa;;;;;uCAK3B,SAAS,CAAC,OAAO;;;;;+CAKT,SAAS,CAAC,aAAa;uCAC/B,SAAS,CAAC,OAAO;;;;;;gCAMxB,SAAS,CAAC,OAAO;;;;;wCAKT,SAAS,CAAC,eAAe;;;;4BAIrC,SAAS,CAAC,UAAU;;;;;sDAKM,SAAS,CAAC,kBAAkB;+CACnC,SAAS,CAAC,eAAe;;CAEvE,CAAC;AAMF,SAAS,MAAM,CAAC,KAAkB;IAC9B,OAAO,CACH,MAAC,MAAM,eACH,KAAC,KAAK,oBAAK,KAAK,IAAE,IAAI,EAAC,UAAU,IAAG,EACpC,gBAAa,EACb,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACrB,CACZ,CAAC;AACN,CAAC;AAED,MAAM,CAAC,SAAS,GAAG;IACf,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nconst Switch = styled.label`\n    position: relative;\n    display: inline-flex;\n    margin: 5px 0;\n`;\n\nconst Input = styled.input`\n    appearance: none;\n    margin: 0;\n\n    & + span {\n        position: relative;\n        cursor: pointer;\n        width: 30px;\n        height: 18px;\n        background-color: ${constants.LIGHT_GREY};\n        transition: 0.4s;\n        border-radius: 10px;\n        padding: 0 3px;\n        margin: 0 10px 0 5px;\n    }\n    & + span:before {\n        position: absolute;\n        content: '';\n        height: 14px;\n        width: 14px;\n        left: 1px;\n        top: 1px;\n        border: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});\n        border-radius: 50%;\n        background-color: var(--background, ${constants.BACKGROUND});\n        transition: 0.4s;\n    }\n\n    /* checked */\n    &:checked + span {\n        background-color: var(--primary, ${constants.PRIMARY_LIGHT});\n    }\n\n    &:checked + span:before {\n        transform: translateX(18px);\n        border-color: var(--primary, ${constants.PRIMARY});\n    }\n\n    /* focus */\n    &:enabled:focus + span:before {\n        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});\n        border-color: var(--primary, ${constants.PRIMARY});\n    }\n\n    /* hover */\n    &:enabled:hover ~ span {\n        cursor: pointer;\n        color: var(--primary, ${constants.PRIMARY});\n    }\n\n    /* disabled */\n    &:disabled ~ span {\n        color: var(--disabled-border, ${constants.DISABLED_BORDER});\n    }\n\n    &:disabled + span {\n        background-color: ${constants.LIGHT_GREY};\n        cursor: not-allowed;\n    }\n\n    &:disabled + span:before {\n        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});\n        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});\n    }\n`;\n\ntype ToggleProps = PropTypes.InferProps<\n    React.AllHTMLAttributes<HTMLInputElement> & typeof Toggle.propTypes\n>;\n\nfunction Toggle(props: ToggleProps) {\n    return (\n        <Switch>\n            <Input {...props} type=\"checkbox\" />\n            <span></span>\n            <span>{props.label}</span>\n        </Switch>\n    );\n}\n\nToggle.propTypes = {\n    /** Label for the field */\n    label: PropTypes.string,\n};\n\nexport default Toggle;\n"]}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/Input/Toggle.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEnE,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAA;;;;CAI1B,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;;;;4BAYE,aAAa,CAAC,UAAU,CAAC,UAAU,CAAC;;;;;;;;;;;;;4BAapC,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC;;4BAEzC,aAAa,CAAC,UAAU,CAAC,UAAU,CAAC;;;;;;4BAMpC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC;;;;;wBAK3C,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;;;;;gCAKzB,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC;wBAC/C,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;;;;;;iBAMxC,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;;;;;iBAKjC,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC;;;;4BAI9B,aAAa,CAAC,UAAU,CAAC,UAAU,CAAC;;;;;4BAKpC,aAAa,CAAC,UAAU,CAAC,kBAAkB,CAAC;wBAChD,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC;;CAEhE,CAAC;AAMF,SAAS,MAAM,CAAC,KAAkB;IAC9B,OAAO,CACH,MAAC,MAAM,eACH,KAAC,KAAK,oBAAK,KAAK,IAAE,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,QAAQ,kBAAe,KAAK,CAAC,OAAO,IAAI,EAC/E,gBAAa,EACb,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACrB,CACZ,CAAC;AACN,CAAC;AAED,MAAM,CAAC,SAAS,GAAG;IACf,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Switch = styled.label`\n    position: relative;\n    display: inline-flex;\n    margin: 5px 0;\n`;\n\nconst Input = styled.input`\n    position: absolute;\n    width: 0;\n    height: 0;\n    appearance: none;\n    margin: 0;\n\n    & + span {\n        position: relative;\n        cursor: pointer;\n        width: 30px;\n        height: 18px;\n        background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        transition: 0.4s;\n        border-radius: 10px;\n        padding: 0 3px;\n        margin: 0 10px 0 5px;\n    }\n    & + span:before {\n        position: absolute;\n        content: '';\n        height: 14px;\n        width: 14px;\n        left: 1px;\n        top: 1px;\n        border: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        border-radius: 50%;\n        background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        transition: 0.4s;\n    }\n\n    /* checked */\n    &:checked + span {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:checked + span:before {\n        transform: translateX(18px);\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /* focus */\n    &:enabled:focus + span:before {\n        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /* hover */\n    &:enabled:hover ~ span {\n        cursor: pointer;\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /* disabled */\n    &:disabled ~ span {\n        color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n\n    &:disabled + span {\n        background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        cursor: not-allowed;\n    }\n\n    &:disabled + span:before {\n        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n`;\n\ntype ToggleProps = PropTypes.InferProps<\n    React.AllHTMLAttributes<HTMLInputElement> & typeof Toggle.propTypes\n>;\n\nfunction Toggle(props: ToggleProps) {\n    return (\n        <Switch>\n            <Input {...props} type=\"checkbox\" role=\"switch\" aria-checked={props.checked} />\n            <span></span>\n            <span>{props.label}</span>\n        </Switch>\n    );\n}\n\nToggle.propTypes = {\n    /** Label for the field */\n    label: PropTypes.string,\n};\n\nexport default Toggle;\n"]}

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

@@ -1,4 +1,8 @@
 import React, { ReactNode } from 'react';
+/**
+ * Props for the Menu component.
+ * @template T - The type of value(s) in the menu.
+ */
 interface MenuProps<T> {
     /** Multiple Menu Items can be selected */
     multiSelect?: boolean;
@@ -9,6 +13,14 @@ interface MenuProps<T> {
     /** Menu Items */
     children?: ReactNode;
 }
-declare const Menu: React.ForwardRefExoticComponent<MenuProps<object> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Menu component that allows selection of items from a list.
+ * Supports single and multi-select modes and keyboard navigation.
+ *
+ * @template T - The type of value(s) in the menu.
+ * @param {MenuProps<T> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>} props - The menu properties.
+ * @param {ForwardedRef<HTMLDivElement>} ref - The ref forwarded to the menu container.
+ */
+declare const Menu: React.ForwardRefExoticComponent<MenuProps<object> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
 export default Menu;
 //# sourceMappingURL=Menu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,SAAS,EAAgB,MAAM,OAAO,CAAC;AAGjE,UAAU,SAAS,CAAC,CAAC;IACjB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wBAAwB;IACxB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC;IAChB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC;IACpC,iBAAiB;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAYD,QAAA,MAAM,IAAI,0FAqCR,CAAC;AAQH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,SAAS,EAAgB,MAAM,OAAO,CAAC;AAIjE;;;GAGG;AACH,UAAU,SAAS,CAAC,CAAC;IACjB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wBAAwB;IACxB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC;IAChB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC;IACpC,iBAAiB;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAgBD;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,mJAwHR,CAAC;AAQH,eAAe,IAAI,CAAC"}

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

@@ -1,6 +1,18 @@
+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 React, { useState } from 'react';
 import styled from '@emotion/styled';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 import MenuContext from './MenuContext';
 const MenuContainer = styled.div `
     flex: 1;
@@ -10,10 +22,28 @@ const MenuContainer = styled.div `
     & div:last-child {
         border-bottom: none;
     }
+
+    &:focus-within {
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
+    }
 `;
+/**
+ * Menu component that allows selection of items from a list.
+ * Supports single and multi-select modes and keyboard navigation.
+ *
+ * @template T - The type of value(s) in the menu.
+ * @param {MenuProps<T> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>} props - The menu properties.
+ * @param {ForwardedRef<HTMLDivElement>} ref - The ref forwarded to the menu container.
+ */
 const Menu = React.forwardRef(function (props, ref) {
-    const { multiSelect, onChange } = props;
-    const [value, setValue] = useState(props.value || (multiSelect ? [] : ''));
+    const { multiSelect, onChange, value: propValue } = props, rest = __rest(props, ["multiSelect", "onChange", "value"]);
+    const [value, setValue] = useState(propValue || (multiSelect ? [] : ''));
+    /**
+     * Updates the selected value(s).
+     * Handles both single and multi-select logic.
+     *
+     * @param {T} val - The value to select or deselect.
+     */
     const updateValue = (val) => {
         let newVal;
         if (multiSelect) {
@@ -32,11 +62,76 @@ const Menu = React.forwardRef(function (props, ref) {
         setValue(newVal);
         onChange === null || onChange === void 0 ? void 0 : onChange(newVal);
     };
+    /**
+     * Handles keyboard navigation within the menu.
+     * Supports Arrow keys for navigation, and Enter/Space for selection.
+     *
+     * @param {React.KeyboardEvent} e - The keyboard event.
+     */
+    const handleKeyDown = (e) => {
+        var _a, _b, _c, _d;
+        const target = e.target;
+        const container = e.currentTarget;
+        const items = Array.from(container.querySelectorAll('[role="option"]'));
+        const currentIndex = items.indexOf(target);
+        let nextIndex;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                nextIndex = currentIndex + 1;
+                if (nextIndex >= items.length)
+                    nextIndex = 0;
+                (_a = items[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                nextIndex = currentIndex - 1;
+                if (nextIndex < 0)
+                    nextIndex = items.length - 1;
+                (_b = items[nextIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
+            case 'Home':
+                e.preventDefault();
+                (_c = items[0]) === null || _c === void 0 ? void 0 : _c.focus();
+                break;
+            case 'End':
+                e.preventDefault();
+                (_d = items[items.length - 1]) === null || _d === void 0 ? void 0 : _d.focus();
+                break;
+            case 'Enter':
+            case ' ': // Space
+                e.preventDefault();
+                target.click();
+                break;
+            default:
+                break;
+        }
+    };
+    /**
+     * Handles focus events on the menu container.
+     * Delegates focus to the first item if the container itself receives focus.
+     *
+     * @param {React.FocusEvent} e - The focus event.
+     */
+    const focusHandler = (e) => {
+        // Prevent trap: If focus came from inside (Shift+Tab), do NOT auto-focus again.
+        // This allows focus to land on the container, and the next Shift+Tab will exit.
+        if (e.currentTarget.contains(e.relatedTarget)) {
+            return;
+        }
+        // Only if focus is actually on the container (e.g. tabbing into it)
+        // and not bubbling up from a child
+        if (e.target === e.currentTarget) {
+            // Prevent the container from holding focus; delegate to first item
+            const firstItem = e.currentTarget.querySelector('[role="option"]');
+            firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+        }
+    };
     return (_jsx(MenuContext.Provider, { value: {
             value,
             multiSelect,
             updateValue,
-        }, children: _jsx(MenuContainer, { ref: ref, children: props.children }) }));
+        }, children: _jsx(MenuContainer, Object.assign({}, rest, { ref: ref, role: "listbox", "aria-multiselectable": multiSelect, tabIndex: 0, onKeyDown: handleKeyDown, onFocus: focusHandler, children: props.children })) }));
 });
 Menu.displayName = 'Menu';
 Menu.defaultProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAA2B,MAAM,OAAO,CAAC;AACjE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,WAAW,MAAM,eAAe,CAAC;AAYxC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ/B,CAAC;AAEF,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,UAC1B,KAAmB,EACnB,GAAiC;IAEjC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAE3E,MAAM,WAAW,GAAG,CAAC,GAAM,EAAE,EAAE;QAC3B,IAAI,MAAM,CAAC;QACX,IAAI,WAAW,EAAE,CAAC;YACd,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACvB,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;oBACtB,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC;gBAClD,CAAC;qBAAM,CAAC;oBACJ,MAAM,GAAG,CAAC,GAAG,KAAK,EAAE,GAAG,CAAC,CAAC;gBAC7B,CAAC;YACL,CAAC;QACL,CAAC;aAAM,CAAC;YACJ,MAAM,GAAG,GAAG,CAAC;QACjB,CAAC;QACD,QAAQ,CAAC,MAAM,CAAC,CAAC;QACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,MAAM,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,WAAW,CAAC,QAAQ,IACjB,KAAK,EACD;YACI,KAAK;YACL,WAAW;YACX,WAAW;SACsC,YAGzD,KAAC,aAAa,IAAC,GAAG,EAAE,GAAG,YAAG,KAAK,CAAC,QAAQ,GAAiB,GACtC,CAC1B,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,IAAI,CAAC,YAAY,GAAG;IAChB,WAAW,EAAE,KAAK;CACrB,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import React, { useState, ReactNode, ForwardedRef } from 'react';\nimport styled from '@emotion/styled';\nimport MenuContext from './MenuContext';\ninterface MenuProps<T> {\n    /** Multiple Menu Items can be selected */\n    multiSelect?: boolean;\n    /** Value(s) selected */\n    value?: T | T[];\n    /** Callback when the selected value changes */\n    onChange?: (value: T | T[]) => void;\n    /** Menu Items */\n    children?: ReactNode;\n}\n\nconst MenuContainer = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n\n    & div:last-child {\n        border-bottom: none;\n    }\n`;\n\nconst Menu = React.forwardRef(function <T extends object>(\n    props: MenuProps<T>,\n    ref: ForwardedRef<HTMLDivElement>,\n) {\n    const { multiSelect, onChange } = props;\n    const [value, setValue] = useState(props.value || (multiSelect ? [] : ''));\n\n    const updateValue = (val: T) => {\n        let newVal;\n        if (multiSelect) {\n            if (Array.isArray(value)) {\n                if (value.includes(val)) {\n                    newVal = value.filter((item) => item !== val);\n                } else {\n                    newVal = [...value, val];\n                }\n            }\n        } else {\n            newVal = val;\n        }\n        setValue(newVal);\n        onChange?.(newVal);\n    };\n\n    return (\n        <MenuContext.Provider\n            value={\n                {\n                    value,\n                    multiSelect,\n                    updateValue,\n                } as unknown as React.ContextType<typeof MenuContext>\n            }\n        >\n            <MenuContainer ref={ref}>{props.children}</MenuContainer>\n        </MenuContext.Provider>\n    );\n});\n\nMenu.displayName = 'Menu';\n\nMenu.defaultProps = {\n    multiSelect: false,\n};\n\nexport default Menu;\n"]}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, ReactNode, ForwardedRef } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport MenuContext from './MenuContext';\n/**\n * Props for the Menu component.\n * @template T - The type of value(s) in the menu.\n */\ninterface MenuProps<T> {\n    /** Multiple Menu Items can be selected */\n    multiSelect?: boolean;\n    /** Value(s) selected */\n    value?: T | T[];\n    /** Callback when the selected value changes */\n    onChange?: (value: T | T[]) => void;\n    /** Menu Items */\n    children?: ReactNode;\n}\n\nconst MenuContainer = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n\n    & div:last-child {\n        border-bottom: none;\n    }\n\n    &:focus-within {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n`;\n\n/**\n * Menu component that allows selection of items from a list.\n * Supports single and multi-select modes and keyboard navigation.\n *\n * @template T - The type of value(s) in the menu.\n * @param {MenuProps<T> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>} props - The menu properties.\n * @param {ForwardedRef<HTMLDivElement>} ref - The ref forwarded to the menu container.\n */\nconst Menu = React.forwardRef(function <T extends object>(\n    props: MenuProps<T> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    ref: ForwardedRef<HTMLDivElement>,\n) {\n    const { multiSelect, onChange, value: propValue, ...rest } = props;\n    const [value, setValue] = useState(propValue || (multiSelect ? [] : ''));\n\n    /**\n     * Updates the selected value(s).\n     * Handles both single and multi-select logic.\n     *\n     * @param {T} val - The value to select or deselect.\n     */\n    const updateValue = (val: T) => {\n        let newVal;\n        if (multiSelect) {\n            if (Array.isArray(value)) {\n                if (value.includes(val)) {\n                    newVal = value.filter((item) => item !== val);\n                } else {\n                    newVal = [...value, val];\n                }\n            }\n        } else {\n            newVal = val;\n        }\n        setValue(newVal);\n        onChange?.(newVal);\n    };\n\n    /**\n     * Handles keyboard navigation within the menu.\n     * Supports Arrow keys for navigation, and Enter/Space for selection.\n     *\n     * @param {React.KeyboardEvent} e - The keyboard event.\n     */\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n        const target = e.target as HTMLElement;\n        const container = e.currentTarget as HTMLElement;\n        const items = Array.from(container.querySelectorAll('[role=\"option\"]')) as HTMLElement[];\n        const currentIndex = items.indexOf(target as HTMLElement);\n\n        let nextIndex;\n\n        switch (e.key) {\n            case 'ArrowDown':\n                e.preventDefault();\n                nextIndex = currentIndex + 1;\n                if (nextIndex >= items.length) nextIndex = 0;\n                items[nextIndex]?.focus();\n                break;\n            case 'ArrowUp':\n                e.preventDefault();\n                nextIndex = currentIndex - 1;\n                if (nextIndex < 0) nextIndex = items.length - 1;\n                items[nextIndex]?.focus();\n                break;\n            case 'Home':\n                e.preventDefault();\n                items[0]?.focus();\n                break;\n            case 'End':\n                e.preventDefault();\n                items[items.length - 1]?.focus();\n                break;\n            case 'Enter':\n            case ' ': // Space\n                e.preventDefault();\n                target.click();\n                break;\n            default:\n                break;\n        }\n    };\n\n    /**\n     * Handles focus events on the menu container.\n     * Delegates focus to the first item if the container itself receives focus.\n     *\n     * @param {React.FocusEvent} e - The focus event.\n     */\n    const focusHandler = (e: React.FocusEvent) => {\n        // Prevent trap: If focus came from inside (Shift+Tab), do NOT auto-focus again.\n        // This allows focus to land on the container, and the next Shift+Tab will exit.\n        if (e.currentTarget.contains(e.relatedTarget as Node)) {\n            return;\n        }\n\n        // Only if focus is actually on the container (e.g. tabbing into it)\n        // and not bubbling up from a child\n        if (e.target === e.currentTarget) {\n            // Prevent the container from holding focus; delegate to first item\n            const firstItem = e.currentTarget.querySelector('[role=\"option\"]') as HTMLElement;\n            firstItem?.focus();\n        }\n    };\n\n    return (\n        <MenuContext.Provider\n            value={\n                {\n                    value,\n                    multiSelect,\n                    updateValue,\n                } as unknown as React.ContextType<typeof MenuContext>\n            }\n        >\n            <MenuContainer\n                {...rest}\n                ref={ref}\n                role=\"listbox\"\n                aria-multiselectable={multiSelect}\n                tabIndex={0}\n                onKeyDown={handleKeyDown}\n                onFocus={focusHandler}\n            >\n                {props.children}\n            </MenuContainer>\n        </MenuContext.Provider>\n    );\n});\n\nMenu.displayName = 'Menu';\n\nMenu.defaultProps = {\n    multiSelect: false,\n};\n\nexport default Menu;\n"]}

package/lib-esm/components/Menu/MenuItem.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
 interface MenuItemProps<T> {
     /** Value of the element */
-    value: T & T[];
+    value: T;
 }
-export default function MenuItem<T>(props: MenuItemProps<T> & React.PropsWithChildren<unknown>): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
+declare const MenuItemInner: <T>(props: MenuItemProps<T> & React.PropsWithChildren, ref: React.Ref<HTMLButtonElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const MenuItem: <T>(props: MenuItemProps<T> & React.PropsWithChildren & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => ReturnType<typeof MenuItemInner>;
+export default MenuItem;
 //# sourceMappingURL=MenuItem.d.ts.map

package/lib-esm/components/Menu/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAM1D,UAAU,aAAa,CAAC,CAAC;IACrB,2BAA2B;IAC3B,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC;CAClB;AA0BD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,oDA2B7F"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAM1D,UAAU,aAAa,CAAC,CAAC;IACrB,2BAA2B;IAC3B,KAAK,EAAE,CAAC,CAAC;CACZ;AA2BD,QAAA,MAAM,aAAa,GAAI,CAAC,SACb,aAAa,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,iBAAiB,OAC5C,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,qDAkCpC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAsC,CAAC,CAAC,EAClD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,iBAAiB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACzF,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAEtC,eAAe,QAAQ,CAAC"}

package/lib-esm/components/Menu/MenuItem.js

@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 import Checkbox from '../Input/Checkbox';
 import MenuContext from './MenuContext';
 const Container = styled.button `
@@ -21,37 +21,37 @@ const Container = styled.button `
     border: none;
     background-color: transparent;
     font-size: 16px;
-    border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
     min-height: 41px;
     display: flex;
     align-items: center;
     cursor: pointer;
     position: relative;
+    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};
 
     &:hover,
     &:focus,
     &:focus-within {
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
     }
 
     & > label {
         margin: 0 4px 0 0;
     }
 `;
-export default function MenuItem(props) {
+const MenuItemInner = (props, ref) => {
     var _a, _b;
     const context = useContext(MenuContext);
     const { value, children } = props, rest = __rest(props, ["value", "children"]);
     const clickHandler = (e) => {
         e.stopPropagation();
-        if (context.multiSelect) {
-            e.nativeEvent.stopImmediatePropagation();
-        }
         context.updateValue(value);
     };
     const selected = context.multiSelect
         ? (_b = (_a = context.value) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, value)
         : context.value === value;
-    return (_jsxs(Container, Object.assign({}, rest, { type: "button", tabIndex: context.multiSelect ? -1 : 0, selected: selected, onClick: clickHandler, children: [context.multiSelect && _jsx(Checkbox, { checked: selected }), children] })));
-}
+    return (_jsxs(Container, Object.assign({}, rest, { ref: ref, type: "button", role: "option", "aria-selected": selected, selected: selected, onClick: clickHandler, children: [context.multiSelect && (_jsx(Checkbox, { checked: selected, readOnly: true, tabIndex: -1, onClick: (e) => e.stopPropagation() })), children] })));
+};
+const MenuItem = React.forwardRef(MenuItemInner);
+export default MenuItem;
 //# sourceMappingURL=MenuItem.js.map

package/lib-esm/components/Menu/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,WAAgC,MAAM,eAAe,CAAC;AAO7D,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAuB;mBACnC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;;;;;yDAKT,SAAS,CAAC,kBAAkB;;;;;;;;;;sDAU/B,SAAS,CAAC,kBAAkB;;;;;;CAMjF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAI,KAA0D;;IAC1F,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAuB,CAAC;IAC9D,MAAM,EAAE,KAAK,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAApC,qBAA4B,CAAQ,CAAC;IAC3C,MAAM,YAAY,GAAG,CAAC,CAAiB,EAAE,EAAE;QACvC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,OAAO,CAAC,WAAW,EAAE,CAAC;YACtB,CAAC,CAAC,WAAW,CAAC,wBAAwB,EAAE,CAAC;QAC7C,CAAC;QACD,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,WAAW;QAChC,CAAC,CAAC,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,QAAQ,mDAAG,KAAK,CAAC;QAClC,CAAC,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC;IAE9B,OAAO,CACH,MAAC,SAAS,oBACF,IAAI,IACR,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,YAAY,aAEpB,OAAO,CAAC,WAAW,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAE,QAAQ,GAAI,EACtD,QAAQ,KACD,CACf,CAAC;AACN,CAAC","sourcesContent":["import React, { SyntheticEvent, useContext } from 'react';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\nimport Checkbox from '../Input/Checkbox';\nimport MenuContext, { MenuContextType } from './MenuContext';\n\ninterface MenuItemProps<T> {\n    /** Value of the element */\n    value: T & T[];\n}\n\nconst Container = styled.button<{ selected: boolean }>`\n    font-weight: ${(props) => (props.selected ? 'bold' : 'normal')};\n    padding: 8px 6px;\n    border: none;\n    background-color: transparent;\n    font-size: 16px;\n    border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});\n    min-height: 41px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    position: relative;\n\n    &:hover,\n    &:focus,\n    &:focus-within {\n        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});\n    }\n\n    & > label {\n        margin: 0 4px 0 0;\n    }\n`;\n\nexport default function MenuItem<T>(props: MenuItemProps<T> & React.PropsWithChildren<unknown>) {\n    const context = useContext(MenuContext) as MenuContextType<T>;\n    const { value, children, ...rest } = props;\n    const clickHandler = (e: SyntheticEvent) => {\n        e.stopPropagation();\n        if (context.multiSelect) {\n            e.nativeEvent.stopImmediatePropagation();\n        }\n        context.updateValue(value);\n    };\n\n    const selected = context.multiSelect\n        ? context.value?.includes?.(value)\n        : context.value === value;\n\n    return (\n        <Container\n            {...rest}\n            type=\"button\"\n            tabIndex={context.multiSelect ? -1 : 0}\n            selected={selected}\n            onClick={clickHandler}\n        >\n            {context.multiSelect && <Checkbox checked={selected} />}\n            {children}\n        </Container>\n    );\n}\n"]}
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,WAAgC,MAAM,eAAe,CAAC;AAO7D,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAuB;mBACnC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;;;;;+BAKnC,aAAa,CAAC,UAAU,CAAC,kBAAkB,CAAC;;;;;;aAM9D,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC;;;;;4BAK1B,aAAa,CAAC,UAAU,CAAC,kBAAkB,CAAC;;;;;;CAMvE,CAAC;AAEF,MAAM,aAAa,GAAG,CAClB,KAAiD,EACjD,GAAiC,EACnC,EAAE;;IACA,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAuB,CAAC;IAC9D,MAAM,EAAE,KAAK,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAApC,qBAA4B,CAAQ,CAAC;IAC3C,MAAM,YAAY,GAAG,CAAC,CAAiB,EAAE,EAAE;QACvC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC,WAAW,CAAC,KAAgB,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,WAAW;QAChC,CAAC,CAAC,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,QAAQ,mDAAG,KAAK,CAAC;QAClC,CAAC,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC;IAE9B,OAAO,CACH,MAAC,SAAS,oBACF,IAAI,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,QAAQ,EACvB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,YAAY,aAEpB,OAAO,CAAC,WAAW,IAAI,CACpB,KAAC,QAAQ,IACL,OAAO,EAAE,QAAQ,EACjB,QAAQ,QACR,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,GACrC,CACL,EACA,QAAQ,KACD,CACf,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAEV,CAAC;AAEtC,eAAe,QAAQ,CAAC","sourcesContent":["import React, { SyntheticEvent, useContext } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport Checkbox from '../Input/Checkbox';\nimport MenuContext, { MenuContextType } from './MenuContext';\n\ninterface MenuItemProps<T> {\n    /** Value of the element */\n    value: T;\n}\n\nconst Container = styled.button<{ selected: boolean }>`\n    font-weight: ${(props) => (props.selected ? 'bold' : 'normal')};\n    padding: 8px 6px;\n    border: none;\n    background-color: transparent;\n    font-size: 16px;\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    min-height: 41px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    position: relative;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:hover,\n    &:focus,\n    &:focus-within {\n        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    }\n\n    & > label {\n        margin: 0 4px 0 0;\n    }\n`;\n\nconst MenuItemInner = <T,>(\n    props: MenuItemProps<T> & React.PropsWithChildren,\n    ref: React.Ref<HTMLButtonElement>,\n) => {\n    const context = useContext(MenuContext) as MenuContextType<T>;\n    const { value, children, ...rest } = props;\n    const clickHandler = (e: SyntheticEvent) => {\n        e.stopPropagation();\n        context.updateValue(value as T & T[]);\n    };\n\n    const selected = context.multiSelect\n        ? context.value?.includes?.(value)\n        : context.value === value;\n\n    return (\n        <Container\n            {...rest}\n            ref={ref}\n            type=\"button\"\n            role=\"option\"\n            aria-selected={selected}\n            selected={selected}\n            onClick={clickHandler}\n        >\n            {context.multiSelect && (\n                <Checkbox\n                    checked={selected}\n                    readOnly\n                    tabIndex={-1}\n                    onClick={(e) => e.stopPropagation()}\n                />\n            )}\n            {children}\n        </Container>\n    );\n};\n\nconst MenuItem = React.forwardRef(MenuItemInner) as <T>(\n    props: MenuItemProps<T> & React.PropsWithChildren & { ref?: React.Ref<HTMLButtonElement> },\n) => ReturnType<typeof MenuItemInner>;\n\nexport default MenuItem;\n"]}

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

@@ -1,10 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 export { Header as ModalHeader, Body as ModalBody, Footer as ModalFooter, } from '../../shared/styles';
-type ModalProps = PropTypes.InferProps<typeof Modal.propTypes>;
+declare const modalPropTypes: {
+    /** Opens the modal */
+    open: PropTypes.Validator<boolean>;
+    /** Closes the modal on esc */
+    closeOnEsc: PropTypes.Requireable<boolean>;
+    /** Closes the modal on overlay click */
+    closeOnOverlayClick: PropTypes.Requireable<boolean>;
+    /** Call back function called when the modal closes. */
+    onClose: PropTypes.Requireable<(...args: any[]) => any>;
+};
+type ModalProps = PropTypes.InferProps<typeof modalPropTypes>;
 interface ModalState {
     open: boolean;
 }
+/**
+ * Modal component
+ *
+ * A dialog window that sits on top of the main application content.
+ * It disrupts the user's workflow to demand attention for a critical task or decision.
+ *
+ * Accessibility:
+ * - Implements ARIA `role="dialog"` and `aria-modal="true"`.
+ * - Traps focus effectively within the modal while open.
+ * - Restores focus to the triggering element upon closure.
+ * - Supports closing via ESC key and overlay click.
+ */
 export default class Modal extends React.Component<React.PropsWithChildren<ModalProps>, ModalState> {
     state: {
         open: boolean;
@@ -23,13 +45,60 @@ export default class Modal extends React.Component<React.PropsWithChildren<Modal
         closeOnEsc: boolean;
         closeOnOverlayClick: boolean;
     };
+    /**
+     * Syncs state with props.
+     */
     static getDerivedStateFromProps(props: ModalProps): {
         open: boolean;
     };
     private layer;
     private closeCallback;
+    /**
+     * Internal close handler.
+     * Restores focus and calls the external onClose callback.
+     */
     private onClose;
+    private lastFocusedElement;
+    private modalRef;
+    /**
+     * Retrieves all focusable elements within the modal.
+     */
+    private getFocusableElements;
+    /**
+     * Handles keydown events to implement the focus trap.
+     * Traps Tab and Shift+Tab within the modal.
+     */
+    private handleKeyDown;
+    /**
+     * Lifecycle method to save the currently focused element when the modal mounts while open.
+     */
+    componentDidMount(): void;
+    /**
+     * Lifecycle method to restore focus when the modal unmounts.
+     */
+    componentWillUnmount(): void;
+    /**
+     * Restores focus to the element that was focused before the modal opened.
+     */
+    private restoreFocus;
+    /**
+     * Callback ref to capture the Modal DOM element.
+     * Triggers initial focus setting when the element mounts.
+     */
+    private setModalRef;
+    /**
+     * Sets initial focus within the modal.
+     * Tries to focus the header (first child) first, then the first interactive element, or falls back to the container.
+     */
+    private setInitialFocus;
+    /**
+     * Lifecycle method to handle Modal updates.
+     * Manages opening/closing logic via LayerManager and focus preservation.
+     */
     getSnapshotBeforeUpdate(prevProps: ModalProps): void;
+    /**
+     * Renders the Modal component via the LayerManager portal.
+     */
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
 //# sourceMappingURL=Modal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EACH,MAAM,IAAI,WAAW,EACrB,IAAI,IAAI,SAAS,EACjB,MAAM,IAAI,WAAW,GACxB,MAAM,qBAAqB,CAAC;AAG7B,KAAK,UAAU,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC;AAE/D,UAAU,UAAU;IAChB,IAAI,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,KAAK,CAAC,SAAS,CAC9C,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,EACnC,UAAU,CACb;IACG,KAAK;;MAEH;IAEF,MAAM,CAAC,SAAS;QACZ,sBAAsB;;QAEtB,8BAA8B;;QAE9B,wCAAwC;;QAExC,uDAAuD;;MAEzD;IAEF,MAAM,CAAC,YAAY;;;MAGjB;IAEF,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,UAAU;;;IASjD,OAAO,CAAC,KAAK,CAA8C;IAE3D,OAAO,CAAC,aAAa,CAA2B;IAEhD,OAAO,CAAC,OAAO,CAOb;IAEF,uBAAuB,CAAC,SAAS,EAAE,UAAU;IA0B7C,MAAM;CAQT"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EACH,MAAM,IAAI,WAAW,EACrB,IAAI,IAAI,SAAS,EACjB,MAAM,IAAI,WAAW,GACxB,MAAM,qBAAqB,CAAC;AAG7B,QAAA,MAAM,cAAc;IAChB,sBAAsB;;IAEtB,8BAA8B;;IAE9B,wCAAwC;;IAExC,uDAAuD;;CAE1D,CAAC;AAEF,KAAK,UAAU,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAE9D,UAAU,UAAU;IAChB,IAAI,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,KAAK,CAAC,SAAS,CAC9C,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,EACnC,UAAU,CACb;IACG,KAAK;;MAEH;IAEF,MAAM,CAAC,SAAS;QApChB,sBAAsB;;QAEtB,8BAA8B;;QAE9B,wCAAwC;;QAExC,uDAAuD;;MA8BrB;IAElC,MAAM,CAAC,YAAY;;;MAGjB;IAEF;;OAEG;IACH,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,UAAU;;;IASjD,OAAO,CAAC,KAAK,CAA8C;IAE3D,OAAO,CAAC,aAAa,CAA2B;IAEhD;;;OAGG;IACH,OAAO,CAAC,OAAO,CAQb;IAEF,OAAO,CAAC,kBAAkB,CAA4B;IACtD,OAAO,CAAC,QAAQ,CAAqC;IAErD;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAO1B;IAEF;;;OAGG;IACH,OAAO,CAAC,aAAa,CAoBnB;IAEF;;OAEG;IACH,iBAAiB;IAMjB;;OAEG;IACH,oBAAoB;IAMpB;;OAEG;IACH,OAAO,CAAC,YAAY,CAWlB;IAEF;;;OAGG;IACH,OAAO,CAAC,WAAW,CAQjB;IAEF;;;OAGG;IACH,OAAO,CAAC,eAAe,CAoBrB;IAEF;;;OAGG;IACH,uBAAuB,CAAC,SAAS,EAAE,UAAU;IAuC7C;;OAEG;IACH,MAAM;CAQT"}