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

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

@@ -1,121 +1,54 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useCallback } from 'react';
-import PropTypes from 'prop-types';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React, { useCallback } from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-const Label = styled.label `
-    margin: 5px 0;
-    position: relative;
-`;
-const Input = styled.input `
-    appearance: none;
-    position: relative;
-    margin: 0;
-
-    &::before {
-        content: '';
-        width: 16px;
-        height: 16px;
-        border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-        display: inline-block;
-        border-radius: 3px;
-        vertical-align: bottom;
-        margin: 0 5px;
-        text-align: center;
-        line-height: 16px;
-        background-color: var(--background, ${constants.BACKGROUND});
-        transition: background-color .3s ease;
-    }
-
-    &::after {
-        content: '';
-        width: 3px;
-        height: 10px;
-        border-right: 2px solid #fff;
-        border-bottom: 2px solid #fff;
-        transform: translate(-16px, 1px);
-        opacity: 0;
-        transition: transform .3s ease;
-        position: absolute;
-    }
-
-    /** checked */
-    &:checked::before {
-        content: '';
-        background-color: var(--primary, ${constants.PRIMARY});
-        border-color: var(--primary, ${constants.PRIMARY});
-        color: #fff;
-    }
-
-    &:checked::after {
-        opacity: 1;
-        transform: translate(-16px, 2px) rotate(45deg);
-    }
-
-    /** indeterminate */
-    &:indeterminate::before {
-        content: '';
-        background-color: var(--primary, ${constants.PRIMARY});
-        border-color: var(--primary, ${constants});
-        color: #fff;
-    }
-
-    &:indeterminate::after {
-        width: 0;
-        opacity: 1;
-        transform: translate(-15px, 3px) rotate(90deg);
-    }
-
-    /** active and focus */
-    &:enabled:active::before, &:focus::before {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT}); 
-    }
-
-    &:enabled:active + span, &:focus + span {
-        color: var(--primary, ${constants.PRIMARY});
-    }
-
-    /** hover */
-    &:enabled:hover::before {
-        border-color: var(--primary, ${constants.PRIMARY});
-    }
-
-    &:enabled:hover + span {
-        color: var(--primary, ${constants.PRIMARY});
-    }
-
-    /** disabled */
-    &:disabled::before {
-        border-color: #aaa;
-    }
-
-    &:disabled + span {
-        color: #aaa;
-    }
-
-    &:checked:disabled::before, &:indeterminate:disabled::before {
-        background-color: #aaa;
-    }
-`;
-export default function Checkbox(props) {
-    const ref = useCallback((node) => {
-        if (node !== null) {
-            if (props.indeterminate) {
-                node.indeterminate = true;
-            }
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+
+const Label$2 = /*#__PURE__*/ styled("label", {
+    target: "e11g7h820",
+    label: "Label"
+})("margin:5px 0;position:relative;display:inline-flex;align-items:center;cursor:pointer;");
+const StyledCheckmark = /*#__PURE__*/ styled("span", {
+    target: "e11g7h821",
+    label: "StyledCheckmark"
+})("width:16px;height:16px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";display:inline-block;border-radius:3px;margin-right:5px;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:all 0.3s ease;position:relative;flex-shrink:0;&::after{content:'';width:3px;height:10px;border-right:2px solid ", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";border-bottom:2px solid ", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";position:absolute;top:1px;left:6px;opacity:0;transform:rotate(45deg) scale(0);transition:all 0.2s ease;}");
+const HiddenInput$1 = /*#__PURE__*/ styled("input", {
+    target: "e11g7h822",
+    label: "HiddenInput"
+})("opacity:0;width:0;height:0;position:absolute;margin:0;&:checked + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.PRIMARY), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:checked + ", StyledCheckmark, "::after{opacity:1;transform:rotate(45deg) scale(1);}&:indeterminate + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.PRIMARY), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:indeterminate + ", StyledCheckmark, "::after{opacity:1;height:0;width:8px;border-right:none;border-bottom:2px solid ", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";transform:rotate(0deg) scale(1);top:7px;left:4px;}&:enabled:active + ", StyledCheckmark, ",&:focus + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:enabled:active ~ span,&:focus ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";cursor:not-allowed;}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED), ";cursor:not-allowed;}&:checked:disabled + ", StyledCheckmark, ",&:indeterminate:disabled + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.DISABLED), ";}");
+function CheckboxComponent(props, fwdRef) {
+    const { label = '', indeterminate = false, checked, ...rest } = props;
+    const ref = useCallback((node)=>{
+        // Ensure the DOM `indeterminate` flag always matches the prop
+        if (node) {
+            node.indeterminate = !!indeterminate;
+        }
+        // Forward the node (or null) to the parent ref (supports function or ref object)
+        if (typeof fwdRef === 'function') {
+            fwdRef(node);
+        } else if (fwdRef) {
+            fwdRef.current = node;
         }
-    }, []);
-    return (_jsxs(Label, { children: [_jsx(Input, Object.assign({}, props, { ref: ref, type: "checkbox" })), _jsx("span", { children: props.label })] }));
+    }, [
+        indeterminate,
+        fwdRef
+    ]);
+    return /*#__PURE__*/ jsxs(Label$2, {
+        children: [
+            /*#__PURE__*/ jsx(HiddenInput$1, {
+                ...rest,
+                ref: ref,
+                type: "checkbox",
+                checked: checked,
+                "aria-checked": indeterminate ? 'mixed' : checked
+            }),
+            /*#__PURE__*/ jsx(StyledCheckmark, {}),
+            /*#__PURE__*/ jsx("span", {
+                children: label
+            })
+        ]
+    });
 }
-Checkbox.propTypes = {
-    /** Label for the field */
-    label: PropTypes.string,
-    /** If the field is in indeterminate state */
-    indeterminate: PropTypes.bool,
-};
-Checkbox.defaultProps = {
-    indeterminate: false,
-    label: ''
-};
-//# sourceMappingURL=Checkbox.js.map
+const Checkbox = /*#__PURE__*/ React.forwardRef(CheckboxComponent);
+
+export { Checkbox as default };
+//# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Input/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;CAGzB,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;gDASsB,SAAS,CAAC,YAAY;;;;;;;8CAOxB,SAAS,CAAC,UAAU;;;;;;;;;;;;;;;;;;;2CAmBvB,SAAS,CAAC,OAAO;uCACrB,SAAS,CAAC,OAAO;;;;;;;;;;;;2CAYb,SAAS,CAAC,OAAO;uCACrB,SAAS;;;;;;;;;;;;uCAYT,SAAS,CAAC,OAAO;+CACT,SAAS,CAAC,aAAa;;;;gCAItC,SAAS,CAAC,OAAO;;;;;uCAKV,SAAS,CAAC,OAAO;;;;gCAIxB,SAAS,CAAC,OAAO;;;;;;;;;;;;;;;CAehD,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAoB;IACjD,MAAM,GAAG,GAAG,WAAW,CAAC,CAAC,IAAS,EAAE,EAAE;QAClC,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAChB,IAAI,KAAK,CAAC,aAAa,EAAE,CAAC;gBACtB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC9B,CAAC;QACL,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,MAAC,KAAK,eACF,KAAC,KAAK,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,UAAU,IAAG,EAC9C,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACtB,CACX,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,SAAS,GAAG;IACjB,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,6CAA6C;IAC7C,aAAa,EAAE,SAAS,CAAC,IAAI;CAChC,CAAA;AAED,QAAQ,CAAC,YAAY,GAAG;IACpB,aAAa,EAAE,KAAK;IACpB,KAAK,EAAE,EAAE;CACZ,CAAA"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Label = styled.label`\n    margin: 5px 0;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n`;\n\nconst StyledCheckmark = styled.span`\n    width: 16px;\n    height: 16px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    display: inline-block;\n    border-radius: 3px;\n    margin-right: 5px;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    transition: all 0.3s ease;\n    position: relative;\n    flex-shrink: 0;\n\n    &::after {\n        content: '';\n        width: 3px;\n        height: 10px;\n        border-right: 2px solid ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n        border-bottom: 2px solid ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n        position: absolute;\n        top: 1px;\n        left: 6px;\n        opacity: 0;\n        transform: rotate(45deg) scale(0);\n        transition: all 0.2s ease;\n    }\n`;\n\nconst HiddenInput = styled.input`\n    opacity: 0;\n    width: 0;\n    height: 0;\n    position: absolute;\n    margin: 0;\n\n    /** checked */\n    &:checked + ${StyledCheckmark} {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:checked + ${StyledCheckmark}::after {\n        opacity: 1;\n        transform: rotate(45deg) scale(1);\n    }\n\n    /** indeterminate */\n    &:indeterminate + ${StyledCheckmark} {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:indeterminate + ${StyledCheckmark}::after {\n        opacity: 1;\n        height: 0;\n        width: 8px;\n        border-right: none;\n        border-bottom: 2px solid ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n        transform: rotate(0deg) scale(1);\n        top: 7px;\n        left: 4px;\n    }\n\n    /** active and focus */\n    &:enabled:active + ${StyledCheckmark}, &:focus + ${StyledCheckmark} {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:enabled:active ~ span,\n    &:focus ~ span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** hover */\n    &:enabled:hover + ${StyledCheckmark} {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:enabled:hover ~ span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** disabled */\n    &:disabled + ${StyledCheckmark} {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        cursor: not-allowed;\n    }\n\n    &:disabled ~ span {\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n        cursor: not-allowed;\n    }\n\n    &:checked:disabled + ${StyledCheckmark}, &:indeterminate:disabled + ${StyledCheckmark} {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n\ntype CheckboxProps = {\n    /**\n     * Label for the field\n     * @default ''\n     */\n    label?: string;\n    /**\n     * If the field is in indeterminate state\n     * @default false\n     */\n    indeterminate?: boolean;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nfunction CheckboxComponent(props: CheckboxProps, fwdRef: React.Ref<HTMLInputElement>) {\n    const { label = '', indeterminate = false, checked, ...rest } = props;\n\n    const ref = useCallback(\n        (node: HTMLInputElement | null) => {\n            // Ensure the DOM `indeterminate` flag always matches the prop\n            if (node) {\n                node.indeterminate = !!indeterminate;\n            }\n\n            // Forward the node (or null) to the parent ref (supports function or ref object)\n            if (typeof fwdRef === 'function') {\n                fwdRef(node);\n            } else if (fwdRef) {\n                (fwdRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n            }\n        },\n        [indeterminate, fwdRef],\n    );\n\n    return (\n        <Label>\n            <HiddenInput\n                {...rest}\n                ref={ref}\n                type=\"checkbox\"\n                checked={checked}\n                aria-checked={indeterminate ? 'mixed' : checked}\n            />\n            <StyledCheckmark />\n            <span>{label}</span>\n        </Label>\n    );\n}\n\nconst Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\n\nexport default Checkbox;\n"],"names":["Label","styled","StyledCheckmark","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","TEXT_COLOR_LIGHT","HiddenInput","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","DISABLED","CheckboxComponent","props","fwdRef","label","indeterminate","checked","rest","ref","useCallback","node","current","_jsxs","_jsx","type","aria-checked","span","Checkbox","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,OAAAA,iBAAQC,MAAAA,CAAAA,OAAAA,EAAAA;;;;AAQd,MAAMC,eAAAA,iBAAkBD,MAAAA,CAAAA,MAAAA,EAAAA;;;AAGAE,CAAAA,CAAAA,CAAAA,0CAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,YAAY,CAAA,EAAA,4EAAA,EAIrCF,aAAAA,CAAcC,UAAAA,CAAWE,UAAU,CAAA,EAAA,6HAAA,EASzBH,aAAAA,CAAcC,UAAAA,CAAWG,gBAAgB,CAAA,EAAA,2BAAA,EACxCJ,aAAAA,CAAcC,WAAWG,gBAAgB,CAAA,EAAA,2GAAA,CAAA;AAU5E,MAAMC,aAAAA,iBAAcP,MAAAA,CAAAA,OAAAA,EAAAA;;;yEAQFC,eAAAA,EAAAA,oBAAAA,EACUC,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,gBAAA,EACpCN,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,gBAAA,EAGtCP,eAAAA,EAAAA,wEAAAA,EAMMA,eAAAA,EAAAA,oBAAAA,EACIC,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,gBAAA,EACpCN,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,sBAAA,EAGhCP,eAAAA,EAAAA,iFAAAA,EAKWC,aAAAA,CAAcC,UAAAA,CAAWG,gBAAgB,CAAA,EAAA,wEAAA,EAOnDL,eAAAA,EAAAA,aAAAA,EAA8BA,eAAAA,EAAAA,gBAAAA,EAC/BC,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,wBAAA,EACxBN,aAAAA,CAAcC,UAAAA,CAAWM,aAAa,CAAA,EAAA,iDAAA,EAKrDP,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,sBAAA,EAIzBP,eAAAA,EAAAA,gBAAAA,EACAC,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,iCAAA,EAIvCN,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,iBAAA,EAI9BP,eAAAA,EAAAA,gBAAAA,EACKC,aAAAA,CAAcC,UAAAA,CAAWO,eAAe,CAAA,EAAA,+CAAA,EAK/CR,aAAAA,CAAcC,UAAAA,CAAWQ,QAAQ,CAAA,EAAA,4CAAA,EAIvBV,eAAAA,EAAAA,8BAAAA,EAA+CA,eAAAA,EAAAA,oBAAAA,EAC9CC,aAAAA,CAAcC,UAAAA,CAAWQ,QAAQ,CAAA,EAAA,IAAA,CAAA;AAiB7D,SAASC,iBAAAA,CAAkBC,KAAoB,EAAEC,MAAmC,EAAA;IAChF,MAAM,EAAEC,KAAAA,GAAQ,EAAE,EAAEC,aAAAA,GAAgB,KAAK,EAAEC,OAAO,EAAE,GAAGC,IAAAA,EAAM,GAAGL,KAAAA;IAEhE,MAAMM,GAAAA,GAAMC,YACR,CAACC,IAAAA,GAAAA;;AAEG,QAAA,IAAIA,IAAAA,EAAM;YACNA,IAAAA,CAAKL,aAAa,GAAG,CAAC,CAACA,aAAAA;AAC3B,QAAA;;QAGA,IAAI,OAAOF,WAAW,UAAA,EAAY;YAC9BA,MAAAA,CAAOO,IAAAA,CAAAA;AACX,QAAA,CAAA,MAAO,IAAIP,MAAAA,EAAQ;AACdA,YAAAA,MAAAA,CAA2DQ,OAAO,GAAGD,IAAAA;AAC1E,QAAA;IACJ,CAAA,EACA;AAACL,QAAAA,aAAAA;AAAeF,QAAAA;AAAO,KAAA,CAAA;AAG3B,IAAA,qBACIS,IAAA,CAACxB,OAAAA,EAAAA;;0BACGyB,GAAA,CAACjB,aAAAA,EAAAA;AACI,gBAAA,GAAGW,IAAI;gBACRC,GAAAA,EAAKA,GAAAA;gBACLM,IAAAA,EAAK,UAAA;gBACLR,OAAAA,EAASA,OAAAA;AACTS,gBAAAA,cAAAA,EAAcV,gBAAgB,OAAA,GAAUC;;0BAE5CO,GAAA,CAACvB,eAAAA,EAAAA,EAAAA,CAAAA;0BACDuB,GAAA,CAACG,MAAAA,EAAAA;AAAMZ,gBAAAA,QAAAA,EAAAA;;;;AAGnB;AAEA,MAAMa,QAAAA,iBAAWC,KAAAA,CAAMC,UAAU,CAAkClB,iBAAAA;;;;"}

package/lib-esm/components/Input/Dropdown.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
-type DropdownProps<T> = {
+declare const Dropdown: React.ForwardRefExoticComponent<{
     /** Value of the control */
-    value?: T | T[];
-    /** If multiple elements can be selected */
-    multiSelect: boolean;
+    value?: object | object[] | undefined;
+    /**
+     * If multiple elements can be selected
+     * @default false
+     */
+    multiSelect?: boolean;
     /** Change handler */
-    onChange?: (v: T | T[]) => void;
+    onChange?: ((v: object | object[]) => void) | undefined;
     /** Label of the control */
     label?: string;
     /** Error message */
@@ -14,11 +17,7 @@ type DropdownProps<T> = {
     required?: boolean;
     /** Disables the field */
     disabled?: boolean;
-} & React.PropsWithChildren<{}>;
-declare function Dropdown<T>(props: DropdownProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Dropdown {
-    var defaultProps: {
-        multiSelect: boolean;
-    };
-}
+} & {
+    children?: React.ReactNode | undefined;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 export default Dropdown;

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

@@ -1,66 +1,147 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import React, { useState, useEffect } from 'react';
 import styled from '@emotion/styled';
-import { Menu } from '../Menu';
-import { Popover, POPOVER_POSITION } from '../Popover';
-import Input from './Input';
-import { ExpandMore } from '../../icons';
-const ArrowContainer = styled.span `
-    position: absolute;
-    right: 12px;
-    top: 16px;
-    pointer-events: none;
-`;
-export default function Dropdown(props) {
-    const { multiSelect, onChange } = props;
+import Input from './Input.js';
+import Popover, { POPOVER_POSITION } from '../Popover/Popover.js';
+import Menu from '../Menu/Menu.js';
+import ExpandMore from '../../icons/ExpandMore.js';
+
+const ArrowContainer = /*#__PURE__*/ styled("span", {
+    target: "eqzh0a30",
+    label: "ArrowContainer"
+})("position:absolute;right:12px;top:16px;pointer-events:none;");
+/**
+ * Dropdown component that allows selection from a list of options.
+ * Supports single and multi-select modes.
+ *
+ * @template T - The type of the value(s) in the dropdown.
+ * @param props - The properties for the Dropdown component.
+ * @returns The rendered Dropdown component.
+ */ function DropdownComponent(props, outerRef) {
+    const { multiSelect = false, onChange, children, value: propValue, label, errorText, required, disabled, ...rest } = props;
     const [open, setOpen] = useState(false);
-    const [value, setValue] = useState(props.value);
-    const focusHandler = (e) => {
-        var _a, _b;
-        if (open && (e.keyCode === 38 || e.keyCode === 40)) {
-            e.preventDefault();
-            const current = document.querySelector(':focus');
-            if (current.tagName === "DIV") {
-                const firstBtn = current.querySelector('button');
-                firstBtn === null || firstBtn === void 0 ? void 0 : firstBtn.focus();
-            }
-            else {
-                const currentBtn = current.closest('button');
-                if (e.keyCode === 38) {
-                    const prev = (_a = currentBtn === null || currentBtn === void 0 ? void 0 : currentBtn.previousElementSibling) === null || _a === void 0 ? void 0 : _a.closest('button');
-                    prev === null || prev === void 0 ? void 0 : prev.focus();
-                }
-                else {
-                    const next = (_b = currentBtn === null || currentBtn === void 0 ? void 0 : currentBtn.nextElementSibling) === null || _b === void 0 ? void 0 : _b.closest('button');
-                    next === null || next === void 0 ? void 0 : next.focus();
+    const [value, setValue] = useState(propValue);
+    const id = React.useId();
+    const menuId = `${id}-menu`;
+    const menuRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    // Focus menu when opened
+    useEffect(()=>{
+        if (open) {
+            // Wait for Popover to fully open and focus itself first
+            // Then move focus to the first menu item
+            const timer = setTimeout(()=>{
+                const firstItem = menuRef.current?.querySelector('[role="option"]');
+                if (firstItem) {
+                    firstItem.focus();
                 }
-            }
-            return false;
+            }, 100); // Wait after Popover has set initial focus
+            return ()=>clearTimeout(timer);
         }
-    };
-    useEffect(() => {
-        document.addEventListener('keydown', focusHandler);
-        return () => {
-            document.removeEventListener('keydown', focusHandler);
-        };
-    }, [open]);
-    const clickHandler = () => setOpen(true);
-    const keyUp = (e) => {
-        if (e.keyCode === 40) {
+    }, [
+        open
+    ]);
+    /**
+     * Handles keydown events on the input trigger.
+     * Opens the menu on 'Enter', 'Space', 'ArrowDown', or 'ArrowUp'.
+     *
+     * @param {React.KeyboardEvent<HTMLInputElement>} e - The keyboard event.
+     */ const onKeyDown = (e)=>{
+        if ([
+            'ArrowDown',
+            'ArrowUp',
+            'Enter',
+            ' '
+        ].includes(e.key)) {
+            e.preventDefault();
             setOpen(true);
         }
     };
-    const changeHandler = (val) => {
+    /**
+     * Handles changes to the dropdown value.
+     * Updates local state and calls the external onChange handler.
+     * Closes the dropdown if not in multi-select mode.
+     *
+     * @param {T | T[]} val - The new value(s).
+     */ const changeHandler = (val)=>{
         setValue(val);
-        onChange === null || onChange === void 0 ? void 0 : onChange(val);
+        onChange?.(val);
         // Close dropdown after selection if not multiSelect
         if (!multiSelect) {
             setOpen(false);
+            triggerRef.current?.focus();
         }
     };
-    return (_jsx(Popover, { position: POPOVER_POSITION.BOTTOM_LEFT, open: open, element: () => (_jsxs(_Fragment, { children: [_jsx(Input, { type: 'text', value: value && String(value), label: props.label, errorText: props.errorText, onClick: clickHandler, onKeyUp: keyUp, required: props.required, disabled: props.disabled }), _jsx(ArrowContainer, { children: _jsx(ExpandMore, {}) })] })), onClose: () => setOpen(false), children: _jsx(Menu, { value: value, multiSelect: multiSelect, onChange: changeHandler, children: props.children }) }));
+    /**
+     * Toggles the dropdown open state on click.
+     */ const clickHandler = ()=>setOpen(true);
+    const TriggerElement = /*#__PURE__*/ React.forwardRef((passedProps, ref)=>{
+        // Helper to assign both internal triggerRef and external forwarded ref
+        const assignRefs = (node)=>{
+            triggerRef.current = node;
+            if (!outerRef) return;
+            if (typeof outerRef === 'function') {
+                outerRef(node);
+            } else {
+                outerRef.current = node;
+            }
+        };
+        // Combine the ref passed by parent with our assignRefs so both are updated
+        const combinedRef = (node)=>{
+            assignRefs(node);
+            if (typeof ref === 'function') {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        };
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(Input, {
+                    ...rest,
+                    ...passedProps,
+                    ref: combinedRef,
+                    type: "text",
+                    value: value && String(value),
+                    label: label,
+                    errorText: errorText,
+                    onClick: clickHandler,
+                    onKeyDown: onKeyDown,
+                    required: required,
+                    disabled: disabled,
+                    readOnly: true,
+                    role: "combobox",
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": open,
+                    "aria-controls": menuId
+                }),
+                /*#__PURE__*/ jsx(ArrowContainer, {
+                    "aria-hidden": "true",
+                    children: /*#__PURE__*/ jsx(ExpandMore, {})
+                })
+            ]
+        });
+    });
+    TriggerElement.displayName = 'DropdownTrigger';
+    return /*#__PURE__*/ jsx(Popover, {
+        position: POPOVER_POSITION.BOTTOM_LEFT,
+        open: open,
+        element: TriggerElement,
+        onClose: ()=>{
+            setOpen(false);
+            triggerRef.current?.focus();
+        },
+        children: /*#__PURE__*/ jsx(Menu, {
+            ref: menuRef,
+            id: menuId,
+            value: value,
+            multiSelect: multiSelect,
+            onChange: changeHandler,
+            children: children
+        })
+    });
 }
-Dropdown.defaultProps = {
-    multiSelect: false,
-};
-//# sourceMappingURL=Dropdown.js.map
+const Dropdown = /*#__PURE__*/ React.forwardRef(DropdownComponent);
+
+export { Dropdown as default };
+//# sourceMappingURL=Dropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/Input/Dropdown.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Input/Dropdown.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { ExpandMore } from '../../icons';\nimport { Menu } from '../Menu';\nimport { Popover, POPOVER_POSITION } from '../Popover';\nimport Input from './Input';\n\ntype DropdownProps<T> = React.PropsWithChildren<{\n    /** Value of the control */\n    value?: T | T[];\n    /**\n     * If multiple elements can be selected\n     * @default false\n     */\n    multiSelect?: boolean;\n    /** Change handler */\n    onChange?: (v: T | T[]) => void;\n    /** Label of the control */\n    label?: string;\n    /** Error message */\n    errorText?: string;\n    /** Makes field required */\n    required?: boolean;\n    /** Disables the field */\n    disabled?: boolean;\n}> &\n    React.InputHTMLAttributes<HTMLInputElement>;\n\nconst ArrowContainer = styled.span`\n    position: absolute;\n    right: 12px;\n    top: 16px;\n    pointer-events: none;\n`;\n\n/**\n * Dropdown component that allows selection from a list of options.\n * Supports single and multi-select modes.\n *\n * @template T - The type of the value(s) in the dropdown.\n * @param props - The properties for the Dropdown component.\n * @returns The rendered Dropdown component.\n */\nfunction DropdownComponent<T extends object>(\n    props: DropdownProps<T>,\n    outerRef: React.Ref<HTMLInputElement>,\n) {\n    const {\n        multiSelect = false,\n        onChange,\n        children,\n        value: propValue,\n        label,\n        errorText,\n        required,\n        disabled,\n        ...rest\n    } = props;\n    const [open, setOpen] = useState(false);\n    const [value, setValue] = useState<T | T[] | undefined>(propValue);\n    const id = React.useId();\n    const menuId = `${id}-menu`;\n    const menuRef = React.useRef<HTMLDivElement | null>(null);\n    const triggerRef = React.useRef<HTMLInputElement | null>(null);\n\n    // Focus menu when opened\n    useEffect(() => {\n        if (open) {\n            // Wait for Popover to fully open and focus itself first\n            // Then move focus to the first menu item\n            const timer = setTimeout(() => {\n                const firstItem = menuRef.current?.querySelector('[role=\"option\"]') as HTMLElement;\n                if (firstItem) {\n                    firstItem.focus();\n                }\n            }, 100); // Wait after Popover has set initial focus\n            return () => clearTimeout(timer);\n        }\n    }, [open]);\n\n    /**\n     * Handles keydown events on the input trigger.\n     * Opens the menu on 'Enter', 'Space', 'ArrowDown', or 'ArrowUp'.\n     *\n     * @param {React.KeyboardEvent<HTMLInputElement>} e - The keyboard event.\n     */\n    const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {\n            e.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    /**\n     * Handles changes to the dropdown value.\n     * Updates local state and calls the external onChange handler.\n     * Closes the dropdown if not in multi-select mode.\n     *\n     * @param {T | T[]} val - The new value(s).\n     */\n    const changeHandler = (val: T | T[]) => {\n        setValue(val);\n        onChange?.(val);\n\n        // Close dropdown after selection if not multiSelect\n        if (!multiSelect) {\n            setOpen(false);\n            triggerRef.current?.focus();\n        }\n    };\n\n    /**\n     * Toggles the dropdown open state on click.\n     */\n    const clickHandler = () => setOpen(true);\n\n    const TriggerElement = React.forwardRef<HTMLInputElement>((passedProps, ref) => {\n        // Helper to assign both internal triggerRef and external forwarded ref\n        const assignRefs = (node: HTMLInputElement | null) => {\n            triggerRef.current = node;\n\n            if (!outerRef) return;\n            if (typeof outerRef === 'function') {\n                outerRef(node);\n            } else {\n                (outerRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n            }\n        };\n\n        // Combine the ref passed by parent with our assignRefs so both are updated\n        const combinedRef: React.Ref<HTMLInputElement> = (node) => {\n            assignRefs(node);\n            if (typeof ref === 'function') {\n                ref(node);\n            } else if (ref) {\n                (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n            }\n        };\n\n        return (\n            <>\n                <Input\n                    {...rest}\n                    {...passedProps}\n                    ref={combinedRef}\n                    type=\"text\"\n                    value={value && String(value)}\n                    label={label}\n                    errorText={errorText}\n                    onClick={clickHandler}\n                    onKeyDown={onKeyDown}\n                    required={required}\n                    disabled={disabled}\n                    readOnly\n                    role=\"combobox\"\n                    aria-haspopup=\"listbox\"\n                    aria-expanded={open}\n                    aria-controls={menuId}\n                />\n                <ArrowContainer aria-hidden=\"true\">\n                    <ExpandMore />\n                </ArrowContainer>\n            </>\n        );\n    });\n    TriggerElement.displayName = 'DropdownTrigger';\n\n    return (\n        <Popover\n            position={POPOVER_POSITION.BOTTOM_LEFT}\n            open={open}\n            element={TriggerElement}\n            onClose={() => {\n                setOpen(false);\n                triggerRef.current?.focus();\n            }}\n        >\n            <Menu\n                ref={menuRef}\n                id={menuId}\n                value={value}\n                multiSelect={multiSelect}\n                onChange={changeHandler}\n            >\n                {children}\n            </Menu>\n        </Popover>\n    );\n}\n\nconst Dropdown = React.forwardRef(DropdownComponent);\nexport default Dropdown;\n"],"names":["ArrowContainer","styled","DropdownComponent","props","outerRef","multiSelect","onChange","children","value","propValue","label","errorText","required","disabled","rest","open","setOpen","useState","setValue","id","React","useId","menuId","menuRef","useRef","triggerRef","useEffect","timer","setTimeout","firstItem","current","querySelector","focus","clearTimeout","onKeyDown","e","includes","key","preventDefault","changeHandler","val","clickHandler","TriggerElement","forwardRef","passedProps","ref","assignRefs","node","combinedRef","_jsxs","_Fragment","_jsx","Input","type","String","onClick","readOnly","role","aria-haspopup","aria-expanded","aria-controls","aria-hidden","ExpandMore","displayName","Popover","position","POPOVER_POSITION","BOTTOM_LEFT","element","onClose","Menu","Dropdown"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 import React from 'react';
-type InputProps = React.AllHTMLAttributes<HTMLInputElement> & {
+type InputProps = {
     /** Label for the field */
     label?: string;
-    /** Error message for the field */
+    /** Error text to be shown below the field */
     errorText?: string;
-};
+} & React.AllHTMLAttributes<HTMLInputElement>;
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "as"> & React.RefAttributes<HTMLInputElement>>;
 export default Input;