no-frills-ui 0.0.14-rc.0 → 0.0.14-rc.2

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

@@ -1,53 +1,84 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import React, { useCallback } from 'react';
+import React, { useRef, useId, useImperativeHandle, useEffect, useCallback } from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const Label$2 = /*#__PURE__*/ styled("label", {
-    target: "e10ud8wb0",
+    target: "e74kvzt0",
     label: "Label"
 })("margin:5px 0;position:relative;display:inline-flex;align-items:center;cursor:pointer;");
 const StyledCheckmark = /*#__PURE__*/ styled("span", {
-    target: "e10ud8wb1",
+    target: "e74kvzt1",
     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: "e10ud8wb2",
+    target: "e74kvzt2",
     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), ";}");
+const ErrorContainer$2 = /*#__PURE__*/ styled("div", {
+    target: "e74kvzt3",
+    label: "ErrorContainer"
+})("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;");
+const Container$6 = /*#__PURE__*/ styled("div", {
+    target: "e74kvzt4",
+    label: "Container"
+})("display:inline-flex;flex-direction:column;");
 /**
  * Checkbox Component
  * @param props - Component props
  * @param fwdRef - Ref forwarded to the underlying HTMLInputElement
  */ function CheckboxComponent(props, fwdRef) {
-    const { label = '', indeterminate = false, checked, ...rest } = props;
+    const { label = '', indeterminate = false, checked, errorText, ...rest } = props;
+    const internalRef = useRef(null);
+    const errorId = useId();
+    useImperativeHandle(fwdRef, ()=>internalRef.current);
+    useEffect(()=>{
+        if (internalRef.current) {
+            internalRef.current.setCustomValidity(errorText || '');
+        }
+    }, [
+        errorText
+    ]);
     const ref = useCallback((node)=>{
+        internalRef.current = 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;
-        }
+    // Forward the node (or null) to the parent ref (supports function or ref object)
+    // Note: Since we use useImperativeHandle now, we don't technically need to manually forward here
+    // if we weren't doing the ref callback pattern for indeterminate.
+    // However, useImperativeHandle handles the forwarding.
+    // BUT, our local ref callback `ref` is passed to the input `ref={ref}`.
+    // React will call this callback with the node.
+    // Inside this callback, we set internalRef.current.
+    // useImperativeHandle exposes internalRef.current to fwdRef.
+    // So we don't need manual forwarding logic here anymore!
     }, [
-        indeterminate,
-        fwdRef
+        indeterminate
     ]);
-    return /*#__PURE__*/ jsxs(Label$2, {
+    return /*#__PURE__*/ jsxs(Container$6, {
         children: [
-            /*#__PURE__*/ jsx(HiddenInput$1, {
-                ...rest,
-                ref: ref,
-                type: "checkbox",
-                checked: checked,
-                "aria-checked": indeterminate ? 'mixed' : checked
+            /*#__PURE__*/ jsxs(Label$2, {
+                children: [
+                    /*#__PURE__*/ jsx(HiddenInput$1, {
+                        ...rest,
+                        ref: ref,
+                        type: "checkbox",
+                        checked: checked,
+                        "aria-checked": indeterminate ? 'mixed' : checked,
+                        "aria-invalid": !!errorText,
+                        "aria-describedby": errorText ? errorId : undefined
+                    }),
+                    /*#__PURE__*/ jsx(StyledCheckmark, {}),
+                    /*#__PURE__*/ jsx("span", {
+                        children: label
+                    })
+                ]
             }),
-            /*#__PURE__*/ jsx(StyledCheckmark, {}),
-            /*#__PURE__*/ jsx("span", {
-                children: label
+            errorText && /*#__PURE__*/ jsx(ErrorContainer$2, {
+                id: errorId,
+                children: errorText
             })
         ]
     });

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

@@ -1 +1 @@
-{"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\n/**\n * Checkbox Component\n * @param props - Component props\n * @param fwdRef - Ref forwarded to the underlying 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":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useId, useRef, useImperativeHandle } 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\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n`;\n\nconst Container = styled.div`\n    display: inline-flex;\n    flex-direction: column;\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    /** Error text to be shown below the field */\n    errorText?: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\n/**\n * Checkbox Component\n * @param props - Component props\n * @param fwdRef - Ref forwarded to the underlying HTMLInputElement\n */\nfunction CheckboxComponent(props: CheckboxProps, fwdRef: React.Ref<HTMLInputElement>) {\n    const { label = '', indeterminate = false, checked, errorText, ...rest } = props;\n    const internalRef = useRef<HTMLInputElement | null>(null);\n    const errorId = useId();\n\n    useImperativeHandle(fwdRef, () => internalRef.current as HTMLInputElement);\n\n    useEffect(() => {\n        if (internalRef.current) {\n            internalRef.current.setCustomValidity(errorText || '');\n        }\n    }, [errorText]);\n\n    const ref = useCallback(\n        (node: HTMLInputElement | null) => {\n            internalRef.current = node;\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            // Note: Since we use useImperativeHandle now, we don't technically need to manually forward here\n            // if we weren't doing the ref callback pattern for indeterminate.\n            // However, useImperativeHandle handles the forwarding.\n            // BUT, our local ref callback `ref` is passed to the input `ref={ref}`.\n            // React will call this callback with the node.\n            // Inside this callback, we set internalRef.current.\n            // useImperativeHandle exposes internalRef.current to fwdRef.\n            // So we don't need manual forwarding logic here anymore!\n        },\n        [indeterminate],\n    );\n\n    return (\n        <Container>\n            <Label>\n                <HiddenInput\n                    {...rest}\n                    ref={ref}\n                    type=\"checkbox\"\n                    checked={checked}\n                    aria-checked={indeterminate ? 'mixed' : checked}\n                    aria-invalid={!!errorText}\n                    aria-describedby={errorText ? errorId : undefined}\n                />\n                <StyledCheckmark />\n                <span>{label}</span>\n            </Label>\n            {errorText && <ErrorContainer id={errorId}>{errorText}</ErrorContainer>}\n        </Container>\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","ErrorContainer","ERROR","Container","CheckboxComponent","props","fwdRef","label","indeterminate","checked","errorText","rest","internalRef","useRef","errorId","useId","useImperativeHandle","current","useEffect","setCustomValidity","ref","useCallback","node","_jsxs","_jsx","type","aria-checked","aria-invalid","aria-describedby","undefined","span","id","Checkbox","React","forwardRef"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MenuItemProps } from '../Menu/MenuItem';
 type DropdownProps<T> = React.PropsWithChildren<{
     /** Value of the control */
     value?: T | T[];
@@ -17,6 +18,7 @@ type DropdownProps<T> = React.PropsWithChildren<{
     required?: boolean;
     /** Disables the field */
     disabled?: boolean;
+    children?: React.ReactElement<MenuItemProps<T>> | React.ReactElement<MenuItemProps<T>>[];
 }> & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'>;
 declare const Dropdown: <T>(props: DropdownProps<T> & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;
 export default Dropdown;

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import styled from '@emotion/styled';
 import Input from './Input.js';
 import Popover, { POPOVER_POSITION } from '../Popover/Popover.js';
@@ -7,9 +7,63 @@ import Menu from '../Menu/Menu.js';
 import ExpandMore from '../../icons/ExpandMore.js';
 
 const ArrowContainer = /*#__PURE__*/ styled("span", {
-    target: "e1d5dyoc0",
+    target: "eph6dat0",
     label: "ArrowContainer"
 })("position:absolute;right:12px;top:16px;pointer-events:none;");
+/**
+ * DropdownTrigger Component
+ */ const DropdownTrigger = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { displayValue, label, errorText, open, menuId, toggleOpen, onKeyDown, forwardedRef, ...rest } = props;
+    const triggerRef = React.useRef(null);
+    // Helper to assign both internal triggerRef and external forwarded ref
+    const assignRefs = React.useCallback((node)=>{
+        triggerRef.current = node;
+        if (!forwardedRef) return;
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+        } else {
+            forwardedRef.current = node;
+        }
+    }, [
+        forwardedRef
+    ]);
+    // Combine the ref passed by parent with our assignRefs so both are updated
+    const combinedRef = React.useCallback((node)=>{
+        assignRefs(node);
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref) {
+            ref.current = node;
+        }
+    }, [
+        assignRefs,
+        ref
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Input, {
+                ...rest,
+                ref: combinedRef,
+                type: "text",
+                value: displayValue,
+                label: label,
+                errorText: errorText,
+                onClick: toggleOpen,
+                onKeyDown: onKeyDown,
+                inputMode: "none",
+                role: "combobox",
+                "aria-haspopup": "listbox",
+                "aria-expanded": open,
+                "aria-controls": menuId
+            }),
+            /*#__PURE__*/ jsx(ArrowContainer, {
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ jsx(ExpandMore, {})
+            })
+        ]
+    });
+});
+DropdownTrigger.displayName = 'DropdownTrigger';
 /**
  * Dropdown component that allows selection from a list of options.
  * Supports single and multi-select modes.
@@ -17,11 +71,6 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
  * @template T - The type of the value(s) in the dropdown.
  * @param props - The properties for the Dropdown component.
  * @returns The rendered Dropdown component.
- */ /**
- * Dropdown Component
- * @template T - The type of value(s) in the dropdown.
- * @param props - Component props
- * @param outerRef - Ref forwarded to the underlying HTMLInputElement
  */ function DropdownComponent(props, outerRef) {
     const { multiSelect = false, onChange, children, value: propValue, label, errorText, required, disabled, ...rest } = props;
     const [open, setOpen] = useState(false);
@@ -30,6 +79,42 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
     const menuId = `${id}-menu`;
     const menuRef = React.useRef(null);
     const triggerRef = React.useRef(null);
+    /**
+     * Gets the display value for the dropdown based on the current value and children.
+     *
+     * @param currentValue - The current value of the dropdown.
+     * @param currentChildren - The children of the dropdown.
+     * @returns The display value.
+     */ const getDisplayValue = (currentValue, currentChildren)=>{
+        if (currentValue === undefined || currentValue === null) return '';
+        const findLabel = (val)=>{
+            let label = '';
+            React.Children.forEach(currentChildren, (child)=>{
+                if (/*#__PURE__*/ React.isValidElement(child)) {
+                    const props = child.props;
+                    if ('value' in props && props.value === val) {
+                        label = String(props.children);
+                    }
+                }
+            });
+            return label;
+        };
+        if (Array.isArray(currentValue)) {
+            return currentValue.map(findLabel).filter(Boolean).join(', ');
+        }
+        return findLabel(currentValue);
+    };
+    const displayValue = getDisplayValue(value, children) || (value ? String(value) : '');
+    // Sync prop value with state
+    const prevValueRef = useRef(undefined);
+    useEffect(()=>{
+        if (propValue !== prevValueRef.current) {
+            setValue(propValue);
+            prevValueRef.current = propValue;
+        }
+    }, [
+        propValue
+    ]);
     // Focus menu when opened
     useEffect(()=>{
         if (open) {
@@ -51,7 +136,7 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
      * Opens the menu on 'Enter', 'Space', 'ArrowDown', or 'ArrowUp'.
      *
      * @param {React.KeyboardEvent<HTMLInputElement>} e - The keyboard event.
-     */ const onKeyDown = (e)=>{
+     */ const onKeyDown = React.useCallback((e)=>{
         if ([
             'ArrowDown',
             'ArrowUp',
@@ -60,8 +145,11 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
         ].includes(e.key)) {
             e.preventDefault();
             setOpen(true);
+        } else if (e.key !== 'Tab') {
+            // Prevent typing to mimic readOnly behavior while allowing native validation
+            e.preventDefault();
         }
-    };
+    }, []);
     /**
      * Handles changes to the dropdown value.
      * Updates local state and calls the external onChange handler.
@@ -79,59 +167,35 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
     };
     /**
      * 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';
+     */ const clickHandler = React.useCallback(()=>setOpen(true), []);
+    /**
+     * Forwarded ref handler for the trigger input.
+     */ const handleForwardedRef = React.useCallback((node)=>{
+        triggerRef.current = node;
+        if (typeof outerRef === 'function') {
+            outerRef(node);
+        } else if (outerRef) {
+            outerRef.current = node;
+        }
+    }, [
+        outerRef
+    ]);
     return /*#__PURE__*/ jsx(Popover, {
         position: POPOVER_POSITION.BOTTOM_LEFT,
         open: open,
-        element: TriggerElement,
+        element: /*#__PURE__*/ jsx(DropdownTrigger, {
+            ...rest,
+            displayValue: displayValue,
+            label: label,
+            errorText: errorText,
+            open: open,
+            menuId: menuId,
+            toggleOpen: clickHandler,
+            onKeyDown: onKeyDown,
+            required: required,
+            disabled: disabled,
+            forwardedRef: handleForwardedRef
+        }),
         onClose: ()=>{
             setOpen(false);
             triggerRef.current?.focus();

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

@@ -1 +1 @@
-{"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    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'>;\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 */\n/**\n * Dropdown Component\n * @template T - The type of value(s) in the dropdown.\n * @param props - Component props\n * @param outerRef - Ref forwarded to the underlying HTMLInputElement\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) as <T>(\n    props: DropdownProps<T> & React.RefAttributes<HTMLInputElement>,\n) => React.ReactElement | null;\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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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Input/Dropdown.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { ExpandMore } from '../../icons';\nimport { Menu } from '../Menu';\nimport { MenuItemProps } from '../Menu/MenuItem';\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    children?: React.ReactElement<MenuItemProps<T>> | React.ReactElement<MenuItemProps<T>>[];\n}> &\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'>;\n\nconst ArrowContainer = styled.span`\n    position: absolute;\n    right: 12px;\n    top: 16px;\n    pointer-events: none;\n`;\n\n/**\n * DropdownTrigger Component\n */\nconst DropdownTrigger = React.forwardRef<\n    HTMLInputElement,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'> & {\n        displayValue: string;\n        label?: string;\n        errorText?: string;\n        open: boolean;\n        menuId: string;\n        toggleOpen: () => void;\n        onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n        forwardedRef?: React.Ref<HTMLInputElement>;\n    }\n>((props, ref) => {\n    const {\n        displayValue,\n        label,\n        errorText,\n        open,\n        menuId,\n        toggleOpen,\n        onKeyDown,\n        forwardedRef,\n        ...rest\n    } = props;\n    const triggerRef = React.useRef<HTMLInputElement | null>(null);\n\n    // Helper to assign both internal triggerRef and external forwarded ref\n    const assignRefs = React.useCallback(\n        (node: HTMLInputElement | null) => {\n            triggerRef.current = node;\n\n            if (!forwardedRef) return;\n            if (typeof forwardedRef === 'function') {\n                forwardedRef(node);\n            } else {\n                (forwardedRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n            }\n        },\n        [forwardedRef],\n    );\n\n    // Combine the ref passed by parent with our assignRefs so both are updated\n    const combinedRef = React.useCallback(\n        (node: HTMLInputElement | null) => {\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        [assignRefs, ref],\n    );\n\n    return (\n        <>\n            <Input\n                {...rest}\n                ref={combinedRef}\n                type=\"text\"\n                value={displayValue}\n                label={label}\n                errorText={errorText}\n                onClick={toggleOpen}\n                onKeyDown={onKeyDown}\n                inputMode=\"none\"\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});\nDropdownTrigger.displayName = 'DropdownTrigger';\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    /**\n     * Gets the display value for the dropdown based on the current value and children.\n     *\n     * @param currentValue - The current value of the dropdown.\n     * @param currentChildren - The children of the dropdown.\n     * @returns The display value.\n     */\n    const getDisplayValue = (\n        currentValue: T | T[] | undefined,\n        currentChildren: React.ReactNode,\n    ): string => {\n        if (currentValue === undefined || currentValue === null) return '';\n\n        const findLabel = (val: T): string => {\n            let label = '';\n            React.Children.forEach(currentChildren, (child) => {\n                if (React.isValidElement(child)) {\n                    const props = child.props as MenuItemProps<T> & React.PropsWithChildren;\n                    if ('value' in props && props.value === val) {\n                        label = String(props.children);\n                    }\n                }\n            });\n            return label;\n        };\n\n        if (Array.isArray(currentValue)) {\n            return currentValue.map(findLabel).filter(Boolean).join(', ');\n        }\n\n        return findLabel(currentValue as T);\n    };\n\n    const displayValue = getDisplayValue(value, children) || (value ? String(value) : '');\n\n    // Sync prop value with state\n    const prevValueRef = useRef<T | T[] | undefined>(undefined);\n    useEffect(() => {\n        if (propValue !== prevValueRef.current) {\n            setValue(propValue);\n            prevValueRef.current = propValue;\n        }\n    }, [propValue]);\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 = React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {\n            e.preventDefault();\n            setOpen(true);\n        } else if (e.key !== 'Tab') {\n            // Prevent typing to mimic readOnly behavior while allowing native validation\n            e.preventDefault();\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 = React.useCallback(() => setOpen(true), []);\n\n    /**\n     * Forwarded ref handler for the trigger input.\n     */\n    const handleForwardedRef = React.useCallback(\n        (node: HTMLInputElement | null) => {\n            triggerRef.current = node;\n            if (typeof outerRef === 'function') {\n                outerRef(node);\n            } else if (outerRef) {\n                (outerRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n            }\n        },\n        [outerRef],\n    );\n\n    return (\n        <Popover\n            position={POPOVER_POSITION.BOTTOM_LEFT}\n            open={open}\n            element={\n                <DropdownTrigger\n                    {...rest}\n                    displayValue={displayValue}\n                    label={label}\n                    errorText={errorText}\n                    open={open}\n                    menuId={menuId}\n                    toggleOpen={clickHandler}\n                    onKeyDown={onKeyDown}\n                    required={required}\n                    disabled={disabled}\n                    forwardedRef={handleForwardedRef}\n                />\n            }\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) as <T>(\n    props: DropdownProps<T> & React.RefAttributes<HTMLInputElement>,\n) => React.ReactElement | null;\nexport default Dropdown;\n"],"names":["ArrowContainer","styled","DropdownTrigger","React","forwardRef","props","ref","displayValue","label","errorText","open","menuId","toggleOpen","onKeyDown","forwardedRef","rest","triggerRef","useRef","assignRefs","useCallback","node","current","combinedRef","_jsxs","_Fragment","_jsx","Input","type","value","onClick","inputMode","role","aria-haspopup","aria-expanded","aria-controls","aria-hidden","ExpandMore","displayName","DropdownComponent","outerRef","multiSelect","onChange","children","propValue","required","disabled","setOpen","useState","setValue","id","useId","menuRef","getDisplayValue","currentValue","currentChildren","undefined","findLabel","val","Children","forEach","child","isValidElement","String","Array","isArray","map","filter","Boolean","join","prevValueRef","useEffect","timer","setTimeout","firstItem","querySelector","focus","clearTimeout","e","includes","key","preventDefault","changeHandler","clickHandler","handleForwardedRef","Popover","position","POPOVER_POSITION","BOTTOM_LEFT","element","onClose","Menu","Dropdown"],"mappings":"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"}

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

@@ -1,14 +1,14 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import React, { useState, useId, useRef, useEffect } from 'react';
+import React, { useState, useId, useRef, useImperativeHandle, useEffect } from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const Label$5 = /*#__PURE__*/ styled("label", {
-    target: "el9i5v60",
+    target: "e1g8e2pu0",
     label: "Label"
 })("display:inline-flex;flex-direction:column;position:relative;margin:10px 5px;");
 const TextField$1 = /*#__PURE__*/ styled("input", {
-    target: "el9i5v61",
+    target: "e1g8e2pu1",
     label: "TextField"
 })("outline:none;color:inherit;padding:0 8px;line-height:30px;min-height:30px;width:250px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";display:inline-block;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";&:focus,&:active{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:focus + span,&:active + span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";padding:0 8px;}&:disabled + span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:focus:invalid{border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
     &:invalid {
@@ -32,19 +32,21 @@ const TextField$1 = /*#__PURE__*/ styled("input", {
         line-height: 14px;
     }
     ` : '', "    &:focus + span,&:placeholder-shown + span{top:-8px;background:", getThemeValue(THEME_NAME.BACKGROUND), ";font-size:12px;line-height:14px;}");
-const ErrorContainer$3 = /*#__PURE__*/ styled("div", {
-    target: "el9i5v62",
+const ErrorContainer$5 = /*#__PURE__*/ styled("div", {
+    target: "e1g8e2pu2",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
 /**
  * Input Component
  * @param props - Component props
  * @param ref - Ref forwarded to the underlying HTMLInputElement
- */ const Input$2 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+ */ const Input$2 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const [touched, setTouched] = useState(false);
     const [value, setValue] = useState(props.value || '');
     const errorId = useId();
     const prevValueRef = useRef(undefined);
+    const internalRef = useRef(null);
+    useImperativeHandle(forwardedRef, ()=>internalRef.current);
     useEffect(()=>{
         if (props.value !== undefined && props.value !== prevValueRef.current) {
             setValue(props.value);
@@ -53,6 +55,13 @@ const ErrorContainer$3 = /*#__PURE__*/ styled("div", {
     }, [
         props.value
     ]);
+    useEffect(()=>{
+        if (internalRef.current) {
+            internalRef.current.setCustomValidity(props.errorText || '');
+        }
+    }, [
+        props.errorText
+    ]);
     const handleFocus = (e)=>{
         setTouched(true);
         if (props.onFocus) {
@@ -71,7 +80,7 @@ const ErrorContainer$3 = /*#__PURE__*/ styled("div", {
         children: [
             /*#__PURE__*/ jsx(TextField$1, {
                 ...props,
-                ref: ref,
+                ref: internalRef,
                 value: value,
                 onChange: onChangeHandler,
                 onFocus: handleFocus,
@@ -83,7 +92,7 @@ const ErrorContainer$3 = /*#__PURE__*/ styled("div", {
             /*#__PURE__*/ jsx("span", {
                 children: props.label
             }),
-            props.errorText && /*#__PURE__*/ jsx(ErrorContainer$3, {
+            props.errorText && /*#__PURE__*/ jsx(ErrorContainer$5, {
                 id: errorId,
                 children: props.errorText
             })

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useState, useEffect, useId, useRef } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\ntype InputProps = {\n    /** Label for the field */\n    label?: string;\n    /** Error text to be shown below the field */\n    errorText?: string;\n} & React.AllHTMLAttributes<HTMLInputElement>;\n\ntype InputInternalProps = InputProps & {\n    touched: boolean;\n};\n\nconst Label = styled.label`\n    display: inline-flex;\n    flex-direction: column;\n    position: relative;\n    margin: 10px 5px;\n`;\n\nconst TextField = styled.input<InputInternalProps>`\n    outline: none;\n    color: inherit;\n    padding: 0 8px;\n    line-height: 30px;\n    min-height: 30px;\n    width: 250px;\n    border-radius: 3px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    display: inline-block;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n\n    /** Focused */\n    &:focus,\n    &:active {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:focus + span,\n    &:active + span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** Disabled */\n    &:disabled {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        padding: 0 8px;\n    }\n\n    &:disabled + span {\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    /** Invalid */\n    &:focus:invalid {\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n\n    ${(props) =>\n        props.touched\n            ? `\n    &:invalid {\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n    }\n\n    &:invalid + span {\n        color: ${getThemeValue(THEME_NAME.ERROR)};\n    }\n    `\n            : ''}\n\n    /** Error */\n    ${(props) =>\n        props.errorText\n            ? `\n    border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n    & + span {\n        color: ${getThemeValue(THEME_NAME.ERROR)};\n    }\n    `\n            : ''}\n\n    /** Required */\n    &:required + span:after {\n        content: '*';\n        margin-left: 2px;\n        color: ${getThemeValue(THEME_NAME.ERROR)};\n    }\n\n    /** Label Animation */\n    & + span {\n        position: absolute;\n        padding: 0 5px;\n        top: 0px;\n        left: 4px;\n        font-size: 14px;\n        line-height: 32px;\n        transition: all 300ms ease;\n    }\n\n    ${(props) =>\n        props.value !== ''\n            ? `\n    & + span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n    `\n            : ''}\n\n    &:focus + span, &:placeholder-shown + span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n`;\n\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n    margin-left: 3px;\n`;\n\n/**\n * Input Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLInputElement\n */\nconst Input = React.forwardRef<HTMLInputElement, Omit<InputProps, 'as'>>((props, ref) => {\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState(props.value || '');\n    const errorId = useId();\n    const prevValueRef = useRef<string>(undefined);\n\n    useEffect(() => {\n        if (props.value !== undefined && props.value !== prevValueRef.current) {\n            setValue(props.value);\n            prevValueRef.current = props.value as string;\n        }\n    }, [props.value]);\n\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (props.onChange) {\n            setValue(e.target.value);\n            props.onChange(e);\n        } else {\n            setValue(e.target.value);\n        }\n    };\n\n    return (\n        <Label>\n            <TextField\n                {...props}\n                ref={ref}\n                value={value}\n                onChange={onChangeHandler}\n                onFocus={handleFocus}\n                touched={touched}\n                aria-invalid={!!props.errorText}\n                aria-required={props.required}\n                aria-describedby={props.errorText ? errorId : undefined}\n            />\n            <span>{props.label}</span>\n            {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n        </Label>\n    );\n});\n\nInput.displayName = 'Input';\nexport default Input;\n"],"names":["Label","styled","TextField","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","DISABLED_BACKGROUND","DISABLED","ERROR","ERROR_LIGHT","props","touched","errorText","value","ErrorContainer","Input","React","forwardRef","ref","setTouched","useState","setValue","errorId","useId","prevValueRef","useRef","undefined","useEffect","current","handleFocus","e","onFocus","onChangeHandler","onChange","target","_jsxs","_jsx","aria-invalid","aria-required","required","aria-describedby","span","label","id","displayName"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useState, useEffect, useId, useRef, useImperativeHandle } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\ntype InputProps = {\n    /** Label for the field */\n    label?: string;\n    /** Error text to be shown below the field */\n    errorText?: string;\n} & React.AllHTMLAttributes<HTMLInputElement>;\n\ntype InputInternalProps = InputProps & {\n    touched: boolean;\n};\n\nconst Label = styled.label`\n    display: inline-flex;\n    flex-direction: column;\n    position: relative;\n    margin: 10px 5px;\n`;\n\nconst TextField = styled.input<InputInternalProps>`\n    outline: none;\n    color: inherit;\n    padding: 0 8px;\n    line-height: 30px;\n    min-height: 30px;\n    width: 250px;\n    border-radius: 3px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    display: inline-block;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n\n    /** Focused */\n    &:focus,\n    &:active {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:focus + span,\n    &:active + span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** Disabled */\n    &:disabled {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        padding: 0 8px;\n    }\n\n    &:disabled + span {\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    /** Invalid */\n    &:focus:invalid {\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n\n    ${(props) =>\n        props.touched\n            ? `\n    &:invalid {\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n    }\n\n    &:invalid + span {\n        color: ${getThemeValue(THEME_NAME.ERROR)};\n    }\n    `\n            : ''}\n\n    /** Error */\n    ${(props) =>\n        props.errorText\n            ? `\n    border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n    & + span {\n        color: ${getThemeValue(THEME_NAME.ERROR)};\n    }\n    `\n            : ''}\n\n    /** Required */\n    &:required + span:after {\n        content: '*';\n        margin-left: 2px;\n        color: ${getThemeValue(THEME_NAME.ERROR)};\n    }\n\n    /** Label Animation */\n    & + span {\n        position: absolute;\n        padding: 0 5px;\n        top: 0px;\n        left: 4px;\n        font-size: 14px;\n        line-height: 32px;\n        transition: all 300ms ease;\n    }\n\n    ${(props) =>\n        props.value !== ''\n            ? `\n    & + span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n    `\n            : ''}\n\n    &:focus + span, &:placeholder-shown + span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n`;\n\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n    margin-left: 3px;\n`;\n\n/**\n * Input Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLInputElement\n */\nconst Input = React.forwardRef<HTMLInputElement, Omit<InputProps, 'as'>>((props, forwardedRef) => {\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState(props.value || '');\n    const errorId = useId();\n    const prevValueRef = useRef<string>(undefined);\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(forwardedRef, () => internalRef.current as HTMLInputElement);\n\n    useEffect(() => {\n        if (props.value !== undefined && props.value !== prevValueRef.current) {\n            setValue(props.value);\n            prevValueRef.current = props.value as string;\n        }\n    }, [props.value]);\n\n    useEffect(() => {\n        if (internalRef.current) {\n            internalRef.current.setCustomValidity(props.errorText || '');\n        }\n    }, [props.errorText]);\n\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (props.onChange) {\n            setValue(e.target.value);\n            props.onChange(e);\n        } else {\n            setValue(e.target.value);\n        }\n    };\n\n    return (\n        <Label>\n            <TextField\n                {...props}\n                ref={internalRef}\n                value={value}\n                onChange={onChangeHandler}\n                onFocus={handleFocus}\n                touched={touched}\n                aria-invalid={!!props.errorText}\n                aria-required={props.required}\n                aria-describedby={props.errorText ? errorId : undefined}\n            />\n            <span>{props.label}</span>\n            {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n        </Label>\n    );\n});\n\nInput.displayName = 'Input';\nexport default Input;\n"],"names":["Label","styled","TextField","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","DISABLED_BACKGROUND","DISABLED","ERROR","ERROR_LIGHT","props","touched","errorText","value","ErrorContainer","Input","React","forwardRef","forwardedRef","setTouched","useState","setValue","errorId","useId","prevValueRef","useRef","undefined","internalRef","useImperativeHandle","current","useEffect","setCustomValidity","handleFocus","e","onFocus","onChangeHandler","onChange","target","_jsxs","_jsx","ref","aria-invalid","aria-required","required","aria-describedby","span","label","id","displayName"],"mappings":"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"}

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

@@ -2,5 +2,7 @@ import React from 'react';
 declare const Radio: React.ForwardRefExoticComponent<{
     /** Label for the field */
     label?: string;
+    /** Error text to be shown below the field */
+    errorText?: string;
 } & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 export default Radio;