no-frills-ui 0.0.14-alpha.1 → 0.0.14-alpha.11

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

@@ -1,83 +1,34 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import PropTypes from 'prop-types';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-const Switch = styled.label `
-    position: relative;
-    display: inline-flex;
-    margin: 5px 0;
-`;
-const Input = styled.input `
-    appearance: none;
-    margin: 0;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-    & + span {
-        position: relative;
-        cursor: pointer;
-        width: 30px;
-        height: 18px;
-        background-color: ${constants.LIGHT_GREY};
-        transition: .4s;
-        border-radius: 10px;
-        padding: 0 3px;
-        margin: 0 10px 0 5px;
-    }
-    & + span:before {
-        position: absolute;
-        content: "";
-        height: 14px;
-        width: 14px;
-        left: 1px;
-        top: 1px;
-        border: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});
-        border-radius: 50%;
-        background-color: var(--background, ${constants.BACKGROUND});
-        transition: .4s;
-    }
-
-    /* checked */
-    &:checked + span {
-        background-color: var(--primary, ${constants.PRIMARY_LIGHT});
-    }
-
-    &:checked + span:before {
-        transform: translateX(18px);
-        border-color: var(--primary, ${constants.PRIMARY});
-    }
-
-    /* focus */
-    &:enabled:focus + span:before {
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});
-        border-color: var(--primary, ${constants.PRIMARY});
-    }
-
-    /* hover */
-    &:enabled:hover ~ span {
-        cursor: pointer;
-        color: var(--primary, ${constants.PRIMARY});
-    }
-
-    /* disabled */
-    &:disabled ~ span {
-        color: var(--disabled-border, ${constants.DISABLED_BORDER});
-    }
-
-    &:disabled + span {
-        background-color: ${constants.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});
-    }
-`;
-function Toggle(props) {
-    return (_jsxs(Switch, { children: [_jsx(Input, Object.assign({}, props, { type: 'checkbox' })), _jsx("span", {}), _jsx("span", { children: props.label })] }));
+const Switch = /*#__PURE__*/ styled("label", {
+    target: "ebp76g50",
+    label: "Switch"
+})("position:relative;display:inline-flex;margin:5px 0;");
+const Input$1 = /*#__PURE__*/ styled("input", {
+    target: "ebp76g51",
+    label: "Input"
+})("position:absolute;width:0;height:0;appearance:none;margin:0;& + span{position:relative;cursor:pointer;width:30px;height:18px;background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";transition:0.4s;border-radius:10px;padding:0 3px;margin:0 10px 0 5px;}& + span:before{position:absolute;content:'';height:14px;width:14px;left:1px;top:1px;border:1px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";border-radius:50%;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:0.4s;}&:checked + span{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:checked + span:before{transform:translateX(18px);border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:focus + span:before{box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover ~ span{cursor:pointer;color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}&:disabled + span{background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";cursor:not-allowed;}&:disabled + span:before{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}");
+function ToggleComponent(props, ref) {
+    return /*#__PURE__*/ jsxs(Switch, {
+        children: [
+            /*#__PURE__*/ jsx(Input$1, {
+                ...props,
+                ref: ref,
+                type: "checkbox",
+                role: "switch",
+                "aria-checked": props.checked
+            }),
+            /*#__PURE__*/ jsx("span", {}),
+            /*#__PURE__*/ jsx("span", {
+                children: props.label
+            })
+        ]
+    });
 }
-Toggle.propTypes = {
-    /** Label for the field */
-    label: PropTypes.string,
-};
-export default Toggle;
-//# sourceMappingURL=Toggle.js.map
+const Toggle = /*#__PURE__*/ React.forwardRef(ToggleComponent);
+
+export { Toggle as default };
+//# sourceMappingURL=Toggle.js.map

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;AAKF,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,CAAA;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/Input/Toggle.tsx"],"sourcesContent":["import React from 'react';\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 = {\n    /** Label for the field */\n    label?: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nfunction ToggleComponent(props: ToggleProps, ref: React.Ref<HTMLInputElement>) {\n    return (\n        <Switch>\n            <Input\n                {...props}\n                ref={ref}\n                type=\"checkbox\"\n                role=\"switch\"\n                aria-checked={props.checked}\n            />\n            <span></span>\n            <span>{props.label}</span>\n        </Switch>\n    );\n}\n\nconst Toggle = React.forwardRef(ToggleComponent);\nexport default Toggle;\n"],"names":["Switch","styled","Input","getThemeValue","THEME_NAME","LIGHT_GREY","DISABLED_BORDER","BACKGROUND","PRIMARY_LIGHT","PRIMARY","BORDER_LIGHT_COLOR","ToggleComponent","props","ref","_jsxs","_jsx","type","role","aria-checked","checked","span","label","Toggle","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,MAAAA,iBAASC,MAAAA,CAAAA,OAAAA,EAAAA;;;;AAMf,MAAMC,OAAAA,iBAAQD,MAAAA,CAAAA,OAAAA,EAAAA;;;qJAYcE,aAAAA,CAAcC,UAAAA,CAAWC,UAAU,CAAA,EAAA,+KAAA,EAanCF,aAAAA,CAAcC,WAAWE,eAAe,CAAA,EAAA,sCAAA,EAExCH,cAAcC,UAAAA,CAAWG,UAAU,2DAMnCJ,aAAAA,CAAcC,UAAAA,CAAWI,aAAa,CAAA,EAAA,oEAAA,EAK1CL,aAAAA,CAAcC,WAAWK,OAAO,CAAA,EAAA,uDAAA,EAKxBN,cAAcC,UAAAA,CAAWI,aAAa,qBAC9CL,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,gDAAA,EAMvCN,aAAAA,CAAcC,WAAWK,OAAO,CAAA,EAAA,4BAAA,EAKhCN,cAAcC,UAAAA,CAAWE,eAAe,4CAI7BH,aAAAA,CAAcC,UAAAA,CAAWC,UAAU,CAAA,EAAA,iEAAA,EAKnCF,aAAAA,CAAcC,WAAWM,kBAAkB,CAAA,EAAA,gBAAA,EAC/CP,aAAAA,CAAcC,UAAAA,CAAWE,eAAe,CAAA,EAAA,IAAA,CAAA;AAShE,SAASK,eAAAA,CAAgBC,KAAkB,EAAEC,GAAgC,EAAA;AACzE,IAAA,qBACIC,IAAA,CAACd,MAAAA,EAAAA;;0BACGe,GAAA,CAACb,OAAAA,EAAAA;AACI,gBAAA,GAAGU,KAAK;gBACTC,GAAAA,EAAKA,GAAAA;gBACLG,IAAAA,EAAK,UAAA;gBACLC,IAAAA,EAAK,QAAA;AACLC,gBAAAA,cAAAA,EAAcN,MAAMO;;0BAExBJ,GAAA,CAACK,MAAAA,EAAAA,EAAAA,CAAAA;0BACDL,GAAA,CAACK,MAAAA,EAAAA;AAAMR,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMS;;;;AAGzB;AAEA,MAAMC,MAAAA,iBAASC,KAAAA,CAAMC,UAAU,CAACb,eAAAA;;;;"}

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

@@ -1,13 +1,15 @@
-import React, { ReactNode } from 'react';
-interface MenuProps<T> {
+import React from 'react';
+/**
+ * Props for the Menu component.
+ * @template T - The type of value(s) in the menu.
+ */
+type MenuProps<T> = {
     /** Multiple Menu Items can be selected */
     multiSelect?: boolean;
     /** Value(s) selected */
     value?: T | T[];
     /** Callback when the selected value changes */
     onChange?: (value: T | T[]) => void;
-    /** Menu Items */
-    children?: ReactNode;
-}
-declare const Menu: React.ForwardRefExoticComponent<MenuProps<unknown> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
+declare const Menu: <T>(props: MenuProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement;
 export default Menu;

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

@@ -1,45 +1,130 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from '@emotion/react/jsx-runtime';
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
-import MenuContext from './MenuContext';
-const MenuContainer = styled.div `
-    flex: 1;
-    display: flex;
-    flex-direction: column;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+import MenuContext from './MenuContext.js';
 
-    & div:last-child {
-        border-bottom: none;
-    }
-`;
-const Menu = React.forwardRef(function (props, ref) {
-    const { multiSelect, onChange } = props;
-    const [value, setValue] = useState(props.value || (multiSelect ? [] : ''));
-    const updateValue = (val) => {
+const MenuContainer = /*#__PURE__*/ styled("div", {
+    target: "e1nm0ogj0",
+    label: "MenuContainer"
+})("flex:1;display:flex;flex-direction:column;& 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 props - The menu properties.
+ * @param ref - The ref forwarded to the menu container.
+ */ function MenuInner(props, ref) {
+    const { multiSelect = false, onChange, value: propValue, children, ...rest } = props;
+    // State holds either a single T or an array of T when multiSelect
+    const [value, setValue] = useState(propValue);
+    /**
+     * 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) {
             if (Array.isArray(value)) {
                 if (value.includes(val)) {
-                    newVal = value.filter(item => item !== val);
-                }
-                else {
-                    newVal = [...value, val];
+                    newVal = value.filter((item)=>item !== val);
+                } else {
+                    newVal = [
+                        ...value,
+                        val
+                    ];
                 }
+            } else {
+                newVal = [
+                    val
+                ];
             }
-        }
-        else {
+        } else {
             newVal = val;
         }
         setValue(newVal);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newVal);
+        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)=>{
+        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;
+                items[nextIndex]?.focus();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                nextIndex = currentIndex - 1;
+                if (nextIndex < 0) nextIndex = items.length - 1;
+                items[nextIndex]?.focus();
+                break;
+            case 'Home':
+                e.preventDefault();
+                items[0]?.focus();
+                break;
+            case 'End':
+                e.preventDefault();
+                items[items.length - 1]?.focus();
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                target.click();
+                break;
+        }
     };
-    return (_jsx(MenuContext.Provider, { value: {
-            value,
-            multiSelect,
+    /**
+     * 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?.focus();
+        }
+    };
+    return(// @ts-expect-error Generic context typing
+    /*#__PURE__*/ jsx(MenuContext.Provider, {
+        value: {
+            value: value,
+            multiSelect: !!multiSelect,
             updateValue
-        }, children: _jsx(MenuContainer, { ref: ref, children: props.children }) }));
-});
-Menu.defaultProps = {
-    multiSelect: false,
-};
-export default Menu;
-//# sourceMappingURL=Menu.js.map
+        },
+        children: /*#__PURE__*/ jsx(MenuContainer, {
+            ...rest,
+            ref: ref,
+            role: "listbox",
+            "aria-multiselectable": multiSelect,
+            tabIndex: 0,
+            onKeyDown: handleKeyDown,
+            onFocus: focusHandler,
+            children: children
+        })
+    }));
+}
+const Menu = /*#__PURE__*/ React.forwardRef(MenuInner);
+
+export { Menu as default };
+//# sourceMappingURL=Menu.js.map

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,UAAa,KAAmB,EAAE,GAAiC;IAC7F,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,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC;gBAChD,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,CAAA;IAED,OAAO,CACH,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE;YACzB,KAAK;YACL,WAAW;YACX,WAAW;SACd,YACG,KAAC,aAAa,IAAC,GAAG,EAAE,GAAG,YAClB,KAAK,CAAC,QAAQ,GACH,GACG,CAC1B,CAAA;AACL,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,YAAY,GAAG;IAChB,WAAW,EAAE,KAAK;CACrB,CAAA;AAED,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, { useState, 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 */\ntype 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} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;\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 props - The menu properties.\n * @param ref - The ref forwarded to the menu container.\n */\nfunction MenuInner<T>(props: MenuProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n    const { multiSelect = false, onChange, value: propValue, children, ...rest } = props;\n    // State holds either a single T or an array of T when multiSelect\n    const [value, setValue] = useState<unknown | undefined>(propValue);\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: unknown) => {\n        let newVal: unknown;\n        if (multiSelect) {\n            if (Array.isArray(value)) {\n                if (value.includes(val as unknown as T)) {\n                    newVal = (value as T[]).filter((item) => item !== val);\n                } else {\n                    newVal = [...(value as T[]), val];\n                }\n            } else {\n                newVal = [val];\n            }\n        } else {\n            newVal = val;\n        }\n\n        setValue(newVal as T | T[]);\n        onChange?.(newVal as T | T[]);\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        // @ts-expect-error Generic context typing\n        <MenuContext.Provider value={{ value: value, multiSelect: !!multiSelect, updateValue }}>\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                {children}\n            </MenuContainer>\n        </MenuContext.Provider>\n    );\n}\n\nconst Menu = React.forwardRef(MenuInner) as <T>(\n    props: MenuProps<T> & React.RefAttributes<HTMLDivElement>,\n) => React.ReactElement;\n\nexport default Menu;\n"],"names":["MenuContainer","styled","getThemeValue","THEME_NAME","PRIMARY_LIGHT","MenuInner","props","ref","multiSelect","onChange","value","propValue","children","rest","setValue","useState","updateValue","val","newVal","Array","isArray","includes","filter","item","handleKeyDown","e","target","container","currentTarget","items","from","querySelectorAll","currentIndex","indexOf","nextIndex","key","preventDefault","length","focus","click","focusHandler","contains","relatedTarget","firstItem","querySelector","_jsx","MenuContext","Provider","role","aria-multiselectable","tabIndex","onKeyDown","onFocus","Menu","React","forwardRef"],"mappings":"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"}

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

@@ -1,7 +1,13 @@
-export interface MenuContext<T> {
-    value: T | T[];
-    multiSelect: boolean;
+type SingleSelect<T> = {
+    value?: T;
+    multiSelect: false;
     updateValue: (newVal: T) => void;
-}
-declare const _default: import("react").Context<MenuContext<any>>;
+};
+type MultiSelect<T> = {
+    value?: T[];
+    multiSelect: true;
+    updateValue: (newVal: T) => void;
+};
+export type MenuContextType<T> = SingleSelect<T> | MultiSelect<T>;
+declare const _default: import("react").Context<MenuContextType<unknown> | undefined>;
 export default _default;

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

@@ -1,3 +1,7 @@
 import { createContext } from 'react';
-export default createContext(undefined);
-//# sourceMappingURL=MenuContext.js.map
+
+// Context may be undefined if used outside a Menu provider
+var MenuContext = createContext(undefined);
+
+export { MenuContext as default };
+//# sourceMappingURL=MenuContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuContext.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQtC,eAAe,aAAa,CAAmB,SAAS,CAAC,CAAC"}
+{"version":3,"file":"MenuContext.js","sources":["../../../src/components/Menu/MenuContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\ntype SingleSelect<T> = {\n    value?: T;\n    multiSelect: false;\n    updateValue: (newVal: T) => void;\n};\n\ntype MultiSelect<T> = {\n    value?: T[];\n    multiSelect: true;\n    // updateValue takes a single item and the provider will add/remove it\n    updateValue: (newVal: T) => void;\n};\nexport type MenuContextType<T> = SingleSelect<T> | MultiSelect<T>;\n\n// Context may be undefined if used outside a Menu provider\nexport default createContext<MenuContextType<unknown> | undefined>(undefined);\n"],"names":["createContext","undefined"],"mappings":";;AAgBA;AACA,kBAAeA,cAAoDC,SAAAA,CAAAA;;;;"}

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

@@ -1,7 +1,10 @@
 import React from 'react';
-interface MenuItemProps<T> {
+type MenuItemProps<T> = {
     /** Value of the element */
     value: T;
-}
-export default function MenuItem<T>(props: MenuItemProps<T> & React.PropsWithChildren<{}>): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'>;
+declare const MenuItemInner: <T>(props: MenuItemProps<T>, ref: React.Ref<HTMLButtonElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const MenuItem: <T>(props: MenuItemProps<T> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => ReturnType<typeof MenuItemInner>;
+export default MenuItem;

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

@@ -1,53 +1,52 @@
-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, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useContext } from 'react';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React, { useContext } from 'react';
 import styled from '@emotion/styled';
-import MenuContext from './MenuContext';
-import constants from '../../shared/constants';
-import Checkbox from '../Input/Checkbox';
-const Container = styled.button `
-    font-weight: ${props => props.selected ? 'bold' : 'normal'};
-    padding: 8px 6px;
-    border: none;
-    background-color: transparent;
-    font-size: 16px;
-    border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-    min-height: 41px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    position: relative;
-
-    &:hover, &:focus, &:focus-within {
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-    }
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+import Checkbox from '../Input/Checkbox.js';
+import MenuContext from './MenuContext.js';
 
-    & > label {
-        margin: 0 4px 0 0;
-    }
-`;
-export default function MenuItem(props) {
-    var _a, _b;
+const Container$4 = /*#__PURE__*/ styled("button", {
+    target: "eum9bel0",
+    label: "Container"
+})("font-weight:", (props)=>props.selected ? 'bold' : 'normal', ";padding:8px;border:none;border-left:4px solid\n        ", (props)=>props.selected && !props.multiselect ? getThemeValue(THEME_NAME.TEXT_COLOR_DARK) : 'transparent', ";background-color:transparent;font-size:16px;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:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";}& > label{margin:0 4px 0 0;}");
+const MenuItemInner = (props, ref)=>{
     const context = useContext(MenuContext);
-    const { value, children } = props, rest = __rest(props, ["value", "children"]);
-    const clickHandler = (e) => {
+    if (!context) {
+        throw new Error('`MenuItem` must be used within a `Menu` provider');
+    }
+    const { value, children, ...rest } = props;
+    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 }), props.children] })));
-}
-//# sourceMappingURL=MenuItem.js.map
+    let selected = false;
+    if (context.multiSelect) {
+        const arr = context.value;
+        selected = Array.isArray(arr) && arr.includes(value);
+    } else {
+        selected = context.value === value;
+    }
+    return /*#__PURE__*/ jsxs(Container$4, {
+        ...rest,
+        ref: ref,
+        type: "button",
+        role: "option",
+        "aria-selected": selected,
+        selected: selected,
+        onClick: clickHandler,
+        multiselect: context.multiSelect ? true : undefined,
+        children: [
+            context.multiSelect && /*#__PURE__*/ jsx(Checkbox, {
+                checked: selected,
+                readOnly: true,
+                tabIndex: -1,
+                onClick: (e)=>e.stopPropagation()
+            }),
+            children
+        ]
+    });
+};
+const MenuItem = /*#__PURE__*/ React.forwardRef(MenuItemInner);
+
+export { MenuItem as default };
+//# 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,EAA6B,UAAU,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AAOzC,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAqB;mBACjC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;;;;;yDAKL,SAAS,CAAC,kBAAkB;;;;;;;;sDAQ/B,SAAS,CAAC,kBAAkB;;;;;;CAMjF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAI,KAAqD;;IACrF,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACxC,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,CAAC,CAAC,CAAC,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,QAAQ,mDAAG,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC;IAElG,OAAO,CACH,MAAC,SAAS,oBAAK,IAAI,IAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,aAC/G,OAAO,CAAC,WAAW,IAAK,KAAC,QAAQ,IAAC,OAAO,EAAE,QAAQ,GAAI,EACvD,KAAK,CAAC,QAAQ,KACP,CACf,CAAA;AACL,CAAC"}
+{"version":3,"file":"MenuItem.js","sources":["../../../src/components/Menu/MenuItem.tsx"],"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\ntype MenuItemProps<T> = {\n    /** Value of the element */\n    value: T;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'>;\n\nconst Container = styled.button<{ selected: boolean; multiselect?: boolean }>`\n    font-weight: ${(props) => (props.selected ? 'bold' : 'normal')};\n    padding: 8px;\n    border: none;\n    border-left: 4px solid\n        ${(props) =>\n            props.selected && !props.multiselect\n                ? getThemeValue(THEME_NAME.TEXT_COLOR_DARK)\n                : 'transparent'};\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,>(props: MenuItemProps<T>, ref: React.Ref<HTMLButtonElement>) => {\n    const context = useContext(MenuContext) as MenuContextType<T> | undefined;\n    if (!context) {\n        throw new Error('`MenuItem` must be used within a `Menu` provider');\n    }\n    const { value, children, ...rest } = props;\n    const clickHandler = (e: SyntheticEvent) => {\n        e.stopPropagation();\n        context.updateValue(value as T);\n    };\n\n    let selected = false;\n    if (context.multiSelect) {\n        const arr = context.value as unknown as T[] | undefined;\n        selected = Array.isArray(arr) && arr.includes(value as unknown as T);\n    } else {\n        selected = (context.value as unknown as T) === value;\n    }\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            multiselect={context.multiSelect ? true : undefined}\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> & { ref?: React.Ref<HTMLButtonElement> },\n) => ReturnType<typeof MenuItemInner>;\nexport default MenuItem;\n"],"names":["Container","styled","props","selected","multiselect","getThemeValue","THEME_NAME","TEXT_COLOR_DARK","BORDER_LIGHT_COLOR","MenuItemInner","ref","context","useContext","MenuContext","Error","value","children","rest","clickHandler","e","stopPropagation","updateValue","multiSelect","arr","Array","isArray","includes","_jsxs","type","role","aria-selected","onClick","undefined","_jsx","Checkbox","checked","readOnly","tabIndex","MenuItem","React","forwardRef"],"mappings":";;;;;;;AAWA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,QAAAA,EAAAA;;;AACC,CAAA,CAAA,CAAA,cAAA,EAAA,CAACC,KAAAA,GAAWA,KAAAA,CAAMC,QAAQ,GAAG,MAAA,GAAS,QAAA,EAAA,0DAAA,EAI/C,CAACD,KAAAA,GACCA,KAAAA,CAAMC,QAAQ,IAAI,CAACD,MAAME,WAAW,GAC9BC,aAAAA,CAAcC,UAAAA,CAAWC,eAAe,CAAA,GACxC,aAAA,EAAA,uEAAA,EAGaF,aAAAA,CAAcC,UAAAA,CAAWE,kBAAkB,CAAA,EAAA,0FAAA,EAM7DH,aAAAA,CAAcC,UAAAA,CAAWC,eAAe,CAAA,EAAA,mDAAA,EAKzBF,aAAAA,CAAcC,WAAWE,kBAAkB,CAAA,EAAA,gCAAA,CAAA;AAQvE,MAAMC,aAAAA,GAAgB,CAAKP,KAAAA,EAAyBQ,GAAAA,GAAAA;AAChD,IAAA,MAAMC,UAAUC,UAAAA,CAAWC,WAAAA,CAAAA;AAC3B,IAAA,IAAI,CAACF,OAAAA,EAAS;AACV,QAAA,MAAM,IAAIG,KAAAA,CAAM,kDAAA,CAAA;AACpB,IAAA;AACA,IAAA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGf,KAAAA;AACrC,IAAA,MAAMgB,eAAe,CAACC,CAAAA,GAAAA;AAClBA,QAAAA,CAAAA,CAAEC,eAAe,EAAA;AACjBT,QAAAA,OAAAA,CAAQU,WAAW,CAACN,KAAAA,CAAAA;AACxB,IAAA,CAAA;AAEA,IAAA,IAAIZ,QAAAA,GAAW,KAAA;IACf,IAAIQ,OAAAA,CAAQW,WAAW,EAAE;QACrB,MAAMC,GAAAA,GAAMZ,QAAQI,KAAK;AACzBZ,QAAAA,QAAAA,GAAWqB,MAAMC,OAAO,CAACF,GAAAA,CAAAA,IAAQA,GAAAA,CAAIG,QAAQ,CAACX,KAAAA,CAAAA;IAClD,CAAA,MAAO;QACHZ,QAAAA,GAAYQ,OAAAA,CAAQI,KAAK,KAAsBA,KAAAA;AACnD,IAAA;AAEA,IAAA,qBACIY,IAAA,CAAC3B,WAAAA,EAAAA;AACI,QAAA,GAAGiB,IAAI;QACRP,GAAAA,EAAKA,GAAAA;QACLkB,IAAAA,EAAK,QAAA;QACLC,IAAAA,EAAK,QAAA;QACLC,eAAAA,EAAe3B,QAAAA;QACfA,QAAAA,EAAUA,QAAAA;QACV4B,OAAAA,EAASb,YAAAA;QACTd,WAAAA,EAAaO,OAAAA,CAAQW,WAAW,GAAG,IAAA,GAAOU,SAAAA;;YAEzCrB,OAAAA,CAAQW,WAAW,kBAChBW,GAAA,CAACC,QAAAA,EAAAA;gBACGC,OAAAA,EAAShC,QAAAA;gBACTiC,QAAQ,EAAA,IAAA;AACRC,gBAAAA,QAAAA,EAAU,EAAC;gBACXN,OAAAA,EAAS,CAACZ,CAAAA,GAAMA,CAAAA,CAAEC,eAAe;;AAGxCJ,YAAAA;;;AAGb,CAAA;AAEA,MAAMsB,QAAAA,iBAAWC,KAAAA,CAAMC,UAAU,CAAC/B,aAAAA;;;;"}