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

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

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 import Close from '../../icons/Close.js';
 
-const Container$8 = /*#__PURE__*/ styled("span", {
+const Container$a = /*#__PURE__*/ styled("span", {
     target: "eg8hsap0",
     label: "Container"
 })("padding:5px;padding-left:15px;border-radius:16px;background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";display:inline-flex;margin:5px;line-height:20px;align-items:center;");
@@ -29,7 +29,7 @@ const Button$1 = /*#__PURE__*/ styled("button", {
             e.stopPropagation();
         }
     };
-    return /*#__PURE__*/ jsxs(Container$8, {
+    return /*#__PURE__*/ jsxs(Container$a, {
         ...rest,
         ref: ref,
         onKeyUp: keyUpHandler,

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

@@ -8,7 +8,7 @@ import { ORIENTATION } from '../DragAndDrop/types.js';
 
 // Label component for the ChipInput
 const Label$6 = /*#__PURE__*/ styled("label", {
-    target: "ew8m37a0",
+    target: "e1pr4bi70",
     label: "Label"
 })("display:inline-flex;flex-direction:column;flex:1;position:relative;margin:10px 5px;color:inherit;padding:0 8px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";width:", (props)=>typeof props.width === 'number' ? `${props.width}px` : props.width || '250px', ";max-width:100%;&:has(:focus),&:has(:active){border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:has(:focus) > span,&:has(:active) > span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:has(:disabled){border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:has(:disabled) > span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:has(:focus:invalid){border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
         &:has(:invalid) {
@@ -37,13 +37,13 @@ const Label$6 = /*#__PURE__*/ styled("label", {
     }
     ` : '');
 // Error message container
-const ErrorContainer$4 = /*#__PURE__*/ styled("div", {
-    target: "ew8m37a1",
+const ErrorContainer$6 = /*#__PURE__*/ styled("div", {
+    target: "e1pr4bi71",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
 // Visually hidden but accessible to screen readers
 const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
-    target: "ew8m37a2",
+    target: "e1pr4bi72",
     label: "VisuallyHidden"
 })("position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;& li{list-style:none;}");
 /**
@@ -88,6 +88,13 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
     }, [
         propValue
     ]);
+    useEffect(()=>{
+        if (InputRef.current) {
+            InputRef.current.setCustomValidity(props.errorText || '');
+        }
+    }, [
+        props.errorText
+    ]);
     /**
      * Update the chip values and notify changes.
      * @param newValue The new array of chip values
@@ -185,7 +192,7 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
                     /*#__PURE__*/ jsx("span", {
                         children: props.label
                     }),
-                    props.errorText && /*#__PURE__*/ jsx(ErrorContainer$4, {
+                    props.errorText && /*#__PURE__*/ jsx(ErrorContainer$6, {
                         id: errorId,
                         children: props.errorText
                     })

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

@@ -1 +1 @@
-{"version":3,"file":"ChipInput.js","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"sourcesContent":["import React, { useImperativeHandle, useEffect, useId, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport Chip from '../Chip/Chip';\nimport { DragAndDrop, ORIENTATION } from '../DragAndDrop';\n\n// Prop types definition\ninterface ChipInputProps {\n    /** Label for the field */\n    label: string;\n    /** Error message for the field */\n    errorText?: string;\n    /**\n     * Values to display as chips\n     * @default []\n     */\n    value?: string[];\n    /** Callback when chips change */\n    onChange?: (newValue: string[]) => void;\n    /**\n     * Aria label for the close button on chip. Defaults to \"Remove {:label}\"\n     * @default \"Remove {:label}\"\n     */\n    closeButtonAriaLabel?: string;\n    /**\n     * Announcement text when a chip is added. Defaults to \"{:label} was added\"\n     * @default \"{:label} was added\"\n     */\n    addedAnnouncementTemplate?: string;\n    /**\n     * Announcement text when a chip is removed. Defaults to \"{:label} was removed\"\n     * @default \"{:label} was removed\"\n     */\n    removedAnnouncementTemplate?: string;\n}\n\n// Label component for the ChipInput\nconst Label = styled.label<{\n    text: string;\n    touched?: boolean;\n    errorText?: string;\n    required?: boolean;\n    width?: string | number;\n}>`\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1;\n    position: relative;\n    margin: 10px 5px;\n    color: inherit;\n    padding: 0 8px;\n    border-radius: 3px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    width: ${(props) =>\n        typeof props.width === 'number' ? `${props.width}px` : props.width || '250px'};\n    max-width: 100%;\n\n    /** Focused */\n    &:has(:focus),\n    &:has(:active) {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:has(:focus) > span,\n    &:has(:active) > span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** Disabled */\n    &:has(:disabled) {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:has(:disabled) > span {\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    /** Invalid */\n    &:has(:focus:invalid) {\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n\n    ${(props) =>\n        props.touched\n            ? `\n        &:has(:invalid) {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    \n        &:has(:invalid) > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Error */\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Required */\n    ${(props) =>\n        props.required\n            ? `& > span:after {\n                content: '*';\n                margin-left: 2px;\n                color: ${getThemeValue(THEME_NAME.ERROR)};\n            }`\n            : ''}\n    \n\n    & > input {\n        border: none;\n        outline: none;\n        line-height: 30px;\n        min-height: 30px;\n        max-width: 95%;\n    }\n\n    /** Label Animation */\n    & > span {\n        position: absolute;\n        padding: 0 5px;\n        top: 0px;\n        left: 4px;\n        font-size: 14px;\n        line-height: 32px;\n        transition: all 300ms ease;\n    }\n\n    &:has(:focus) > span,\n    &:has(:placeholder-shown) > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n\n    ${(props) =>\n        props.text !== ''\n            ? `\n    & > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n    `\n            : ''}\n`;\n\n// Error message container\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n    margin-left: 3px;\n`;\n\n// Visually hidden but accessible to screen readers\nconst VisuallyHidden = styled.ul`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n\n    & li {\n        list-style: none;\n    }\n`;\n\n/**\n * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.\n * @component\n * @example\n * ```tsx\n * <ChipInput\n *   value={['tag1', 'tag2']}\n *   onChange={(newTags) => console.log(newTags)}\n *   label=\"Add tags\"\n *   errorText=\"At least one tag is required\"\n * />\n * ```\n */\nfunction ChipInputComponent(\n    props: ChipInputProps & Omit<React.AllHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>,\n    ref: React.Ref<HTMLInputElement | null>,\n) {\n    const {\n        value: propValue = [],\n        closeButtonAriaLabel = `Remove {:label}`,\n        addedAnnouncementTemplate = '{:label} was added',\n        removedAnnouncementTemplate = '{:label} was removed',\n    } = props;\n\n    const [text, setText] = useState('');\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState<string[]>(propValue || []);\n    const InputRef = React.useRef<HTMLInputElement>(null);\n    const [announcement, setAnnouncement] = useState('');\n    const errorId = useId();\n\n    // Forward the underlying input element.\n    useImperativeHandle(ref, () => InputRef.current as HTMLInputElement);\n\n    /**\n     * Replace {:label} placeholder in template string\n     */\n    const replacePlaceholder = (\n        template: string | undefined,\n        label: string,\n    ): string | undefined => {\n        if (!template) return undefined;\n        return template.replace(/\\{:label\\}/g, label);\n    };\n\n    const prevPropValueRef = React.useRef<string[]>(undefined);\n\n    // Sync internal value with props.value\n    useEffect(() => {\n        if (Array.isArray(propValue)) {\n            const prevValue = prevPropValueRef.current;\n            const isEqual =\n                prevValue &&\n                propValue.length === prevValue.length &&\n                propValue.every((val, index) => val === prevValue[index]);\n            if (!isEqual) {\n                setValue(propValue);\n                prevPropValueRef.current = propValue;\n            }\n        }\n    }, [propValue]);\n\n    /**\n     * Update the chip values and notify changes.\n     * @param newValue The new array of chip values\n     */\n    const updateValue = (newValue: string[]) => {\n        const deduped = Array.from(new Set(newValue));\n        setValue(deduped);\n        props.onChange?.(deduped);\n    };\n\n    /**\n     * Marks the input as touched on focus.\n     * @param e React focus event\n     */\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    /**\n     * Change handler for the input field.\n     * @param e React change event\n     */\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n        setText(e.target.value);\n    };\n\n    /**\n     * Adds a new chip on Enter key press.\n     * @param e React keyboard event\n     */\n    const handleKeyUp: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n        if (e.key === 'Enter' && text.trim() !== '' && InputRef.current?.validity.valid) {\n            const newValue = [...value, text.trim()];\n            updateValue(newValue);\n            setText('');\n            setAnnouncement(replacePlaceholder(addedAnnouncementTemplate, text.trim())!);\n        }\n    };\n\n    /**\n     * Removes a chip from the list.\n     * @param chipToRemove The chip value to remove\n     */\n    const removeChip = (chipToRemove: string) => {\n        const newValue = value.filter((chip) => chip !== chipToRemove);\n        updateValue(newValue);\n        setAnnouncement(replacePlaceholder(removedAnnouncementTemplate, chipToRemove)!);\n    };\n\n    /**\n     * Moves a chip from one position to another.\n     * @param start The starting index of the item to move\n     * @param end The ending index where the item should be placed\n     */\n    const onDrop = (start: number, end: number) => {\n        // Clone existing elements\n        const newItems = [...value];\n        // Remove the element to be moved\n        const item = newItems.splice(start, 1);\n        // Add it back at the required position\n        newItems.splice(end, 0, item[0]);\n        // Update\n        updateValue(newItems);\n    };\n\n    // Render the component\n    return (\n        <>\n            <Label\n                text={text}\n                touched={touched}\n                errorText={props.errorText}\n                required={props.required}\n                width={props.width}\n            >\n                <input\n                    {...props}\n                    ref={InputRef}\n                    value={text}\n                    onChange={handleChange}\n                    onFocus={handleFocus}\n                    onKeyUp={handleKeyUp}\n                    required={props.required && value.length === 0}\n                    aria-required={props.required}\n                    aria-invalid={!!props.errorText}\n                    aria-describedby={props.errorText ? errorId : undefined}\n                />\n                <div>\n                    {value?.length > 0 && (\n                        <DragAndDrop orientation={ORIENTATION.HORIZONTAL} onDrop={onDrop}>\n                            {value.map((chip) => (\n                                <Chip\n                                    key={chip}\n                                    label={chip}\n                                    onCloseClick={() => removeChip(chip)}\n                                    closeButtonAriaLabel={replacePlaceholder(\n                                        closeButtonAriaLabel,\n                                        chip,\n                                    )}\n                                />\n                            ))}\n                        </DragAndDrop>\n                    )}\n                </div>\n                <span>{props.label}</span>\n                {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n            </Label>\n            <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n                {announcement}\n            </VisuallyHidden>\n        </>\n    );\n}\n\nconst ChipInput = React.forwardRef<\n    HTMLInputElement,\n    ChipInputProps & Omit<React.AllHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>\n>(ChipInputComponent);\n\nexport default ChipInput;\n"],"names":["Label","styled","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","props","width","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","DISABLED_BACKGROUND","DISABLED","ERROR","ERROR_LIGHT","touched","errorText","required","text","ErrorContainer","VisuallyHidden","ChipInputComponent","ref","value","propValue","closeButtonAriaLabel","addedAnnouncementTemplate","removedAnnouncementTemplate","setText","useState","setTouched","setValue","InputRef","React","useRef","announcement","setAnnouncement","errorId","useId","useImperativeHandle","current","replacePlaceholder","template","label","undefined","replace","prevPropValueRef","useEffect","Array","isArray","prevValue","isEqual","length","every","val","index","updateValue","newValue","deduped","from","Set","onChange","handleFocus","e","onFocus","handleChange","target","handleKeyUp","key","trim","validity","valid","removeChip","chipToRemove","filter","chip","onDrop","start","end","newItems","item","splice","_jsxs","_Fragment","_jsx","input","onKeyUp","aria-required","aria-invalid","aria-describedby","div","DragAndDrop","orientation","ORIENTATION","HORIZONTAL","map","Chip","onCloseClick","span","id","aria-live","aria-atomic","ChipInput","forwardRef"],"mappings":";;;;;;;;AAoCA;AACA,MAAMA,OAAAA,iBAAQC,MAAAA,CAAAA,OAAAA,EAAAA;;;AAeUC,CAAAA,CAAAA,CAAAA,oJAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,YAAY,CAAA,EAAA,oBAAA,EACrCF,aAAAA,CAAcC,UAAAA,CAAWE,UAAU,CAAA,EAAA,SAAA,EAC9C,CAACC,KAAAA,GACN,OAAOA,KAAAA,CAAMC,KAAK,KAAK,QAAA,GAAW,CAAA,EAAGD,KAAAA,CAAMC,KAAK,CAAC,EAAE,CAAC,GAAGD,KAAAA,CAAMC,KAAK,IAAI,OAAA,EAAA,4DAAA,EAMtDL,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,6BACxBN,aAAAA,CAAcC,UAAAA,CAAWM,aAAa,CAAA,EAAA,qDAAA,EAKrDP,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,kCAAA,EAKzBN,aAAAA,CAAcC,UAAAA,CAAWO,eAAe,CAAA,EAAA,oBAAA,EACpCR,aAAAA,CAAcC,UAAAA,CAAWQ,mBAAmB,CAAA,EAAA,kCAAA,EAIvDT,aAAAA,CAAcC,UAAAA,CAAWS,QAAQ,CAAA,EAAA,uCAAA,EAK1BV,aAAAA,CAAcC,UAAAA,CAAWU,KAAK,CAAA,EAAA,wBAAA,EACtBX,aAAAA,CAAcC,UAAAA,CAAWW,WAAW,CAAA,EAAA,IAAA,EAG9D,CAACR,KAAAA,GACCA,KAAAA,CAAMS,OAAO,GACP;;0BAEY,EAAEb,aAAAA,CAAcC,UAAAA,CAAWU,KAAK,CAAA,CAAE;;;;mBAIzC,EAAEX,aAAAA,CAAcC,UAAAA,CAAWU,KAAK,CAAA,CAAE;;AAE7C,QAAA,CAAC,GACK,EAAA,EAAA,YAAA,EAGR,CAACP,QACCA,KAAAA,CAAMU,SAAS,GACT;sBACQ,EAAEd,aAAAA,CAAcC,UAAAA,CAAWU,KAAK,CAAA,CAAE;;;mBAGrC,EAAEX,aAAAA,CAAcC,UAAAA,CAAWU,KAAK,CAAA,CAAE;;AAE7C,QAAA,CAAC,GACK,EAAA,EAAA,YAAA,EAGR,CAACP,QACCA,KAAAA,CAAMW,QAAQ,GACR,CAAC;;;uBAGQ,EAAEf,aAAAA,CAAcC,UAAAA,CAAWU,KAAK,CAAA,CAAE;AAC5C,aAAA,CAAC,GACA,EAAA,EAAA,gSAAA,EAyBQX,aAAAA,CAAcC,UAAAA,CAAWE,UAAU,CAAA,EAAA,oCAAA,EAKnD,CAACC,KAAAA,GACCA,KAAAA,CAAMY,IAAI,KAAK,EAAA,GACT;;;oBAGM,EAAEhB,aAAAA,CAAcC,UAAAA,CAAWE,UAAU,CAAA,CAAE;;;;AAIvD,IAAA,CAAC,GACS,EAAA,CAAA;AAGd;AACA,MAAMc,gBAAAA,iBAAiBlB,MAAAA,CAAAA,KAAAA,EAAAA;;;AACVC,CAAAA,CAAAA,CAAAA,QAAAA,EAAAA,aAAAA,CAAcC,WAAWU,KAAK,CAAA,EAAA,mEAAA,CAAA;AAO3C;AACA,MAAMO,gBAAAA,iBAAiBnB,MAAAA,CAAAA,IAAAA,EAAAA;;;;AAgBvB;;;;;;;;;;;;AAYC,IACD,SAASoB,kBAAAA,CACLf,KAA6F,EAC7FgB,GAAuC,EAAA;AAEvC,IAAA,MAAM,EACFC,KAAAA,EAAOC,SAAAA,GAAY,EAAE,EACrBC,uBAAuB,CAAC,eAAe,CAAC,EACxCC,4BAA4B,oBAAoB,EAChDC,2BAAAA,GAA8B,sBAAsB,EACvD,GAAGrB,KAAAA;AAEJ,IAAA,MAAM,CAACY,IAAAA,EAAMU,OAAAA,CAAQ,GAAGC,QAAAA,CAAS,EAAA,CAAA;AACjC,IAAA,MAAM,CAACd,OAAAA,EAASe,UAAAA,CAAW,GAAGD,QAAAA,CAAS,KAAA,CAAA;AACvC,IAAA,MAAM,CAACN,KAAAA,EAAOQ,QAAAA,CAAS,GAAGF,QAAAA,CAAmBL,aAAa,EAAE,CAAA;IAC5D,MAAMQ,QAAAA,GAAWC,KAAAA,CAAMC,MAAM,CAAmB,IAAA,CAAA;AAChD,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAAA,CAAgB,GAAGP,QAAAA,CAAS,EAAA,CAAA;AACjD,IAAA,MAAMQ,OAAAA,GAAUC,KAAAA,EAAAA;;IAGhBC,mBAAAA,CAAoBjB,GAAAA,EAAK,IAAMU,QAAAA,CAASQ,OAAO,CAAA;AAE/C;;QAGA,MAAMC,kBAAAA,GAAqB,CACvBC,QAAAA,EACAC,KAAAA,GAAAA;QAEA,IAAI,CAACD,UAAU,OAAOE,SAAAA;QACtB,OAAOF,QAAAA,CAASG,OAAO,CAAC,aAAA,EAAeF,KAAAA,CAAAA;AAC3C,IAAA,CAAA;IAEA,MAAMG,gBAAAA,GAAmBb,KAAAA,CAAMC,MAAM,CAAWU,SAAAA,CAAAA;;IAGhDG,SAAAA,CAAU,IAAA;QACN,IAAIC,KAAAA,CAAMC,OAAO,CAACzB,SAAAA,CAAAA,EAAY;YAC1B,MAAM0B,SAAAA,GAAYJ,iBAAiBN,OAAO;AAC1C,YAAA,MAAMW,UACFD,SAAAA,IACA1B,SAAAA,CAAU4B,MAAM,KAAKF,UAAUE,MAAM,IACrC5B,SAAAA,CAAU6B,KAAK,CAAC,CAACC,GAAAA,EAAKC,QAAUD,GAAAA,KAAQJ,SAAS,CAACK,KAAAA,CAAM,CAAA;AAC5D,YAAA,IAAI,CAACJ,OAAAA,EAAS;gBACVpB,QAAAA,CAASP,SAAAA,CAAAA;AACTsB,gBAAAA,gBAAAA,CAAiBN,OAAO,GAAGhB,SAAAA;AAC/B,YAAA;AACJ,QAAA;IACJ,CAAA,EAAG;AAACA,QAAAA;AAAU,KAAA,CAAA;AAEd;;;QAIA,MAAMgC,cAAc,CAACC,QAAAA,GAAAA;AACjB,QAAA,MAAMC,OAAAA,GAAUV,KAAAA,CAAMW,IAAI,CAAC,IAAIC,GAAAA,CAAIH,QAAAA,CAAAA,CAAAA;QACnC1B,QAAAA,CAAS2B,OAAAA,CAAAA;AACTpD,QAAAA,KAAAA,CAAMuD,QAAQ,GAAGH,OAAAA,CAAAA;AACrB,IAAA,CAAA;AAEA;;;QAIA,MAAMI,cAAc,CAACC,CAAAA,GAAAA;QACjBjC,UAAAA,CAAW,IAAA,CAAA;QACX,IAAIxB,KAAAA,CAAM0D,OAAO,EAAE;AACf1D,YAAAA,KAAAA,CAAM0D,OAAO,CAACD,CAAAA,CAAAA;AAClB,QAAA;AACJ,IAAA,CAAA;AAEA;;;QAIA,MAAME,eAA2D,CAACF,CAAAA,GAAAA;QAC9DnC,OAAAA,CAAQmC,CAAAA,CAAEG,MAAM,CAAC3C,KAAK,CAAA;AAC1B,IAAA,CAAA;AAEA;;;QAIA,MAAM4C,cAA4D,CAACJ,CAAAA,GAAAA;AAC/D,QAAA,IAAIA,CAAAA,CAAEK,GAAG,KAAK,OAAA,IAAWlD,IAAAA,CAAKmD,IAAI,EAAA,KAAO,EAAA,IAAMrC,QAAAA,CAASQ,OAAO,EAAE8B,QAAAA,CAASC,KAAAA,EAAO;AAC7E,YAAA,MAAMd,QAAAA,GAAW;AAAIlC,gBAAAA,GAAAA,KAAAA;AAAOL,gBAAAA,IAAAA,CAAKmD,IAAI;AAAG,aAAA;YACxCb,WAAAA,CAAYC,QAAAA,CAAAA;YACZ7B,OAAAA,CAAQ,EAAA,CAAA;YACRQ,eAAAA,CAAgBK,kBAAAA,CAAmBf,yBAAAA,EAA2BR,IAAAA,CAAKmD,IAAI,EAAA,CAAA,CAAA;AAC3E,QAAA;AACJ,IAAA,CAAA;AAEA;;;QAIA,MAAMG,aAAa,CAACC,YAAAA,GAAAA;AAChB,QAAA,MAAMhB,WAAWlC,KAAAA,CAAMmD,MAAM,CAAC,CAACC,OAASA,IAAAA,KAASF,YAAAA,CAAAA;QACjDjB,WAAAA,CAAYC,QAAAA,CAAAA;AACZrB,QAAAA,eAAAA,CAAgBK,mBAAmBd,2BAAAA,EAA6B8C,YAAAA,CAAAA,CAAAA;AACpE,IAAA,CAAA;AAEA;;;;QAKA,MAAMG,MAAAA,GAAS,CAACC,KAAAA,EAAeC,GAAAA,GAAAA;;AAE3B,QAAA,MAAMC,QAAAA,GAAW;AAAIxD,YAAAA,GAAAA;AAAM,SAAA;;AAE3B,QAAA,MAAMyD,IAAAA,GAAOD,QAAAA,CAASE,MAAM,CAACJ,KAAAA,EAAO,CAAA,CAAA;;AAEpCE,QAAAA,QAAAA,CAASE,MAAM,CAACH,GAAAA,EAAK,CAAA,EAAGE,IAAI,CAAC,CAAA,CAAE,CAAA;;QAE/BxB,WAAAA,CAAYuB,QAAAA,CAAAA;AAChB,IAAA,CAAA;;IAGA,qBACIG,IAAA,CAAAC,QAAA,EAAA;;0BACID,IAAA,CAAClF,OAAAA,EAAAA;gBACGkB,IAAAA,EAAMA,IAAAA;gBACNH,OAAAA,EAASA,OAAAA;AACTC,gBAAAA,SAAAA,EAAWV,MAAMU,SAAS;AAC1BC,gBAAAA,QAAAA,EAAUX,MAAMW,QAAQ;AACxBV,gBAAAA,KAAAA,EAAOD,MAAMC,KAAK;;kCAElB6E,GAAA,CAACC,OAAAA,EAAAA;AACI,wBAAA,GAAG/E,KAAK;wBACTgB,GAAAA,EAAKU,QAAAA;wBACLT,KAAAA,EAAOL,IAAAA;wBACP2C,QAAAA,EAAUI,YAAAA;wBACVD,OAAAA,EAASF,WAAAA;wBACTwB,OAAAA,EAASnB,WAAAA;AACTlD,wBAAAA,QAAAA,EAAUX,KAAAA,CAAMW,QAAQ,IAAIM,KAAAA,CAAM6B,MAAM,KAAK,CAAA;AAC7CmC,wBAAAA,eAAAA,EAAejF,MAAMW,QAAQ;wBAC7BuE,cAAAA,EAAc,CAAC,CAAClF,KAAAA,CAAMU,SAAS;wBAC/ByE,kBAAAA,EAAkBnF,KAAAA,CAAMU,SAAS,GAAGqB,OAAAA,GAAUO;;kCAElDwC,GAAA,CAACM,KAAAA,EAAAA;kCACInE,KAAAA,EAAO6B,MAAAA,GAAS,mBACbgC,GAAA,CAACO,WAAAA,EAAAA;AAAYC,4BAAAA,WAAAA,EAAaC,YAAYC,UAAU;4BAAElB,MAAAA,EAAQA,MAAAA;AACrDrD,4BAAAA,QAAAA,EAAAA,KAAAA,CAAMwE,GAAG,CAAC,CAACpB,IAAAA,iBACRS,GAAA,CAACY,IAAAA,EAAAA;oCAEGrD,KAAAA,EAAOgC,IAAAA;AACPsB,oCAAAA,YAAAA,EAAc,IAAMzB,UAAAA,CAAWG,IAAAA,CAAAA;AAC/BlD,oCAAAA,oBAAAA,EAAsBgB,mBAClBhB,oBAAAA,EACAkD,IAAAA;AALCA,iCAAAA,EAAAA,IAAAA,CAAAA;;;kCAYzBS,GAAA,CAACc,MAAAA,EAAAA;AAAM5F,wBAAAA,QAAAA,EAAAA,KAAAA,CAAMqC;;oBACZrC,KAAAA,CAAMU,SAAS,kBAAIoE,GAAA,CAACjE,gBAAAA,EAAAA;wBAAegF,EAAAA,EAAI9D,OAAAA;AAAU/B,wBAAAA,QAAAA,EAAAA,KAAAA,CAAMU;;;;0BAE5DoE,GAAA,CAAChE,gBAAAA,EAAAA;gBAAegF,WAAAA,EAAU,QAAA;gBAASC,aAAAA,EAAY,MAAA;AAC1ClE,gBAAAA,QAAAA,EAAAA;;;;AAIjB;AAEA,MAAMmE,SAAAA,iBAAYrE,KAAAA,CAAMsE,UAAU,CAGhClF,kBAAAA;;;;"}
+{"version":3,"file":"ChipInput.js","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"sourcesContent":["import React, { useImperativeHandle, useEffect, useId, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport Chip from '../Chip/Chip';\nimport { DragAndDrop, ORIENTATION } from '../DragAndDrop';\n\n// Prop types definition\ninterface ChipInputProps {\n    /** Label for the field */\n    label: string;\n    /** Error message for the field */\n    errorText?: string;\n    /**\n     * Values to display as chips\n     * @default []\n     */\n    value?: string[];\n    /** Callback when chips change */\n    onChange?: (newValue: string[]) => void;\n    /**\n     * Aria label for the close button on chip. Defaults to \"Remove {:label}\"\n     * @default \"Remove {:label}\"\n     */\n    closeButtonAriaLabel?: string;\n    /**\n     * Announcement text when a chip is added. Defaults to \"{:label} was added\"\n     * @default \"{:label} was added\"\n     */\n    addedAnnouncementTemplate?: string;\n    /**\n     * Announcement text when a chip is removed. Defaults to \"{:label} was removed\"\n     * @default \"{:label} was removed\"\n     */\n    removedAnnouncementTemplate?: string;\n}\n\n// Label component for the ChipInput\nconst Label = styled.label<{\n    text: string;\n    touched?: boolean;\n    errorText?: string;\n    required?: boolean;\n    width?: string | number;\n}>`\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1;\n    position: relative;\n    margin: 10px 5px;\n    color: inherit;\n    padding: 0 8px;\n    border-radius: 3px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    width: ${(props) =>\n        typeof props.width === 'number' ? `${props.width}px` : props.width || '250px'};\n    max-width: 100%;\n\n    /** Focused */\n    &:has(:focus),\n    &:has(:active) {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:has(:focus) > span,\n    &:has(:active) > span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** Disabled */\n    &:has(:disabled) {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:has(:disabled) > span {\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    /** Invalid */\n    &:has(:focus:invalid) {\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n\n    ${(props) =>\n        props.touched\n            ? `\n        &:has(:invalid) {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    \n        &:has(:invalid) > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Error */\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Required */\n    ${(props) =>\n        props.required\n            ? `& > span:after {\n                content: '*';\n                margin-left: 2px;\n                color: ${getThemeValue(THEME_NAME.ERROR)};\n            }`\n            : ''}\n    \n\n    & > input {\n        border: none;\n        outline: none;\n        line-height: 30px;\n        min-height: 30px;\n        max-width: 95%;\n    }\n\n    /** Label Animation */\n    & > span {\n        position: absolute;\n        padding: 0 5px;\n        top: 0px;\n        left: 4px;\n        font-size: 14px;\n        line-height: 32px;\n        transition: all 300ms ease;\n    }\n\n    &:has(:focus) > span,\n    &:has(:placeholder-shown) > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n\n    ${(props) =>\n        props.text !== ''\n            ? `\n    & > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n    `\n            : ''}\n`;\n\n// Error message container\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n    margin-left: 3px;\n`;\n\n// Visually hidden but accessible to screen readers\nconst VisuallyHidden = styled.ul`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n\n    & li {\n        list-style: none;\n    }\n`;\n\n/**\n * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.\n * @component\n * @example\n * ```tsx\n * <ChipInput\n *   value={['tag1', 'tag2']}\n *   onChange={(newTags) => console.log(newTags)}\n *   label=\"Add tags\"\n *   errorText=\"At least one tag is required\"\n * />\n * ```\n */\nfunction ChipInputComponent(\n    props: ChipInputProps & Omit<React.AllHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>,\n    ref: React.Ref<HTMLInputElement | null>,\n) {\n    const {\n        value: propValue = [],\n        closeButtonAriaLabel = `Remove {:label}`,\n        addedAnnouncementTemplate = '{:label} was added',\n        removedAnnouncementTemplate = '{:label} was removed',\n    } = props;\n\n    const [text, setText] = useState('');\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState<string[]>(propValue || []);\n    const InputRef = React.useRef<HTMLInputElement>(null);\n    const [announcement, setAnnouncement] = useState('');\n    const errorId = useId();\n\n    // Forward the underlying input element.\n    useImperativeHandle(ref, () => InputRef.current as HTMLInputElement);\n\n    /**\n     * Replace {:label} placeholder in template string\n     */\n    const replacePlaceholder = (\n        template: string | undefined,\n        label: string,\n    ): string | undefined => {\n        if (!template) return undefined;\n        return template.replace(/\\{:label\\}/g, label);\n    };\n\n    const prevPropValueRef = React.useRef<string[]>(undefined);\n\n    // Sync internal value with props.value\n    useEffect(() => {\n        if (Array.isArray(propValue)) {\n            const prevValue = prevPropValueRef.current;\n            const isEqual =\n                prevValue &&\n                propValue.length === prevValue.length &&\n                propValue.every((val, index) => val === prevValue[index]);\n            if (!isEqual) {\n                setValue(propValue);\n                prevPropValueRef.current = propValue;\n            }\n        }\n    }, [propValue]);\n\n    useEffect(() => {\n        if (InputRef.current) {\n            InputRef.current.setCustomValidity(props.errorText || '');\n        }\n    }, [props.errorText]);\n\n    /**\n     * Update the chip values and notify changes.\n     * @param newValue The new array of chip values\n     */\n    const updateValue = (newValue: string[]) => {\n        const deduped = Array.from(new Set(newValue));\n        setValue(deduped);\n        props.onChange?.(deduped);\n    };\n\n    /**\n     * Marks the input as touched on focus.\n     * @param e React focus event\n     */\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    /**\n     * Change handler for the input field.\n     * @param e React change event\n     */\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n        setText(e.target.value);\n    };\n\n    /**\n     * Adds a new chip on Enter key press.\n     * @param e React keyboard event\n     */\n    const handleKeyUp: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n        if (e.key === 'Enter' && text.trim() !== '' && InputRef.current?.validity.valid) {\n            const newValue = [...value, text.trim()];\n            updateValue(newValue);\n            setText('');\n            setAnnouncement(replacePlaceholder(addedAnnouncementTemplate, text.trim())!);\n        }\n    };\n\n    /**\n     * Removes a chip from the list.\n     * @param chipToRemove The chip value to remove\n     */\n    const removeChip = (chipToRemove: string) => {\n        const newValue = value.filter((chip) => chip !== chipToRemove);\n        updateValue(newValue);\n        setAnnouncement(replacePlaceholder(removedAnnouncementTemplate, chipToRemove)!);\n    };\n\n    /**\n     * Moves a chip from one position to another.\n     * @param start The starting index of the item to move\n     * @param end The ending index where the item should be placed\n     */\n    const onDrop = (start: number, end: number) => {\n        // Clone existing elements\n        const newItems = [...value];\n        // Remove the element to be moved\n        const item = newItems.splice(start, 1);\n        // Add it back at the required position\n        newItems.splice(end, 0, item[0]);\n        // Update\n        updateValue(newItems);\n    };\n\n    // Render the component\n    return (\n        <>\n            <Label\n                text={text}\n                touched={touched}\n                errorText={props.errorText}\n                required={props.required}\n                width={props.width}\n            >\n                <input\n                    {...props}\n                    ref={InputRef}\n                    value={text}\n                    onChange={handleChange}\n                    onFocus={handleFocus}\n                    onKeyUp={handleKeyUp}\n                    required={props.required && value.length === 0}\n                    aria-required={props.required}\n                    aria-invalid={!!props.errorText}\n                    aria-describedby={props.errorText ? errorId : undefined}\n                />\n                <div>\n                    {value?.length > 0 && (\n                        <DragAndDrop orientation={ORIENTATION.HORIZONTAL} onDrop={onDrop}>\n                            {value.map((chip) => (\n                                <Chip\n                                    key={chip}\n                                    label={chip}\n                                    onCloseClick={() => removeChip(chip)}\n                                    closeButtonAriaLabel={replacePlaceholder(\n                                        closeButtonAriaLabel,\n                                        chip,\n                                    )}\n                                />\n                            ))}\n                        </DragAndDrop>\n                    )}\n                </div>\n                <span>{props.label}</span>\n                {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n            </Label>\n            <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n                {announcement}\n            </VisuallyHidden>\n        </>\n    );\n}\n\nconst ChipInput = React.forwardRef<\n    HTMLInputElement,\n    ChipInputProps & Omit<React.AllHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>\n>(ChipInputComponent);\n\nexport default ChipInput;\n"],"names":["Label","styled","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","props","width","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","DISABLED_BACKGROUND","DISABLED","ERROR","ERROR_LIGHT","touched","errorText","required","text","ErrorContainer","VisuallyHidden","ChipInputComponent","ref","value","propValue","closeButtonAriaLabel","addedAnnouncementTemplate","removedAnnouncementTemplate","setText","useState","setTouched","setValue","InputRef","React","useRef","announcement","setAnnouncement","errorId","useId","useImperativeHandle","current","replacePlaceholder","template","label","undefined","replace","prevPropValueRef","useEffect","Array","isArray","prevValue","isEqual","length","every","val","index","setCustomValidity","updateValue","newValue","deduped","from","Set","onChange","handleFocus","e","onFocus","handleChange","target","handleKeyUp","key","trim","validity","valid","removeChip","chipToRemove","filter","chip","onDrop","start","end","newItems","item","splice","_jsxs","_Fragment","_jsx","input","onKeyUp","aria-required","aria-invalid","aria-describedby","div","DragAndDrop","orientation","ORIENTATION","HORIZONTAL","map","Chip","onCloseClick","span","id","aria-live","aria-atomic","ChipInput","forwardRef"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import DragItem from './DragItem.js';
 import { ORIENTATION, DragContext } from './types.js';
 
-/** Container Component */ const Container$6 = /*#__PURE__*/ styled("div", {
+/** Container Component */ const Container$8 = /*#__PURE__*/ styled("div", {
     target: "e18d6tqk0",
     label: "Container"
 })("flex:1;display:flex;position:relative;flex-wrap:wrap;flex-direction:", (props)=>props.orientation === ORIENTATION.HORIZONTAL ? 'row' : 'column', ";");
@@ -107,7 +107,7 @@ import { ORIENTATION, DragContext } from './types.js';
                     setDragOver,
                     i18n
                 },
-                children: /*#__PURE__*/ jsx(Container$6, {
+                children: /*#__PURE__*/ jsx(Container$8, {
                     ...rest,
                     ref: ref,
                     orientation: orientation,

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

@@ -13,7 +13,7 @@ import CheckCircle from '../../icons/DragIndicator.js';
     target: "ertl9d71",
     label: "DragKnob"
 })("padding-top:8px;cursor:move;touch-action:none;color:", getThemeValue(THEME_NAME.DISABLED), ";");
-/** Container for the children */ const Container$7 = /*#__PURE__*/ styled("div", {
+/** Container for the children */ const Container$9 = /*#__PURE__*/ styled("div", {
     target: "ertl9d72",
     label: "Container"
 })("flex:1;");
@@ -255,7 +255,7 @@ import CheckCircle from '../../icons/DragIndicator.js';
                 tabIndex: -1,
                 children: /*#__PURE__*/ jsx(CheckCircle, {})
             }),
-            /*#__PURE__*/ jsx(Container$7, {
+            /*#__PURE__*/ jsx(Container$9, {
                 children: children
             })
         ]

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

@@ -102,7 +102,7 @@ export default class Drawer extends React.Component<React.PropsWithChildren<Draw
      * Lifecycle method to handle Drawer updates.
      * Manages opening/closing logic via LayerManager and focus preservation.
      */
-    getSnapshotBeforeUpdate(prevProps: DrawerProps): null;
+    componentDidUpdate(prevProps: DrawerProps): void;
     /**
      * Sets the ref prop passed to the Drawer Container component.
      * @param node

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

@@ -32,7 +32,7 @@ const positionStyle$1 = (size)=>({
         }
     });
 const DrawerDiv = /*#__PURE__*/ styled("div", {
-    target: "e1topccf0",
+    target: "e1qyfyr80",
     label: "DrawerDiv"
 })("display:flex;flex-direction:column;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:transform 0.3s ease;box-shadow:", getThemeValue(THEME_NAME.MODAL_SHADOW), ";", (props)=>positionStyle$1(props.size)[props.position].before, "    .nf-layer-enter &{transform:translateX(0%);", (props)=>positionStyle$1(props.size)[props.position].after, "}");
 const positionMap$1 = {
@@ -70,7 +70,7 @@ class Drawer extends React.Component {
     /**
      * Lifecycle method to handle Drawer updates.
      * Manages opening/closing logic via LayerManager and focus preservation.
-     */ getSnapshotBeforeUpdate(prevProps) {
+     */ componentDidUpdate(prevProps) {
         const { open } = this.props;
         if (prevProps.open && !open) {
             this.closeCallback?.();
@@ -81,7 +81,6 @@ class Drawer extends React.Component {
             this.lastFocusedElement = document.activeElement;
             this.handleOpen();
         }
-        return null;
     }
     /**
      * Renders the Drawer component via the LayerManager portal.

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\n\nexport {\n    Header as DrawerHeader,\n    Body as DrawerBody,\n    Footer as DrawerFooter,\n} from '../../shared/styles';\n\nexport enum DRAWER_POSITION {\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n    BOTTOM = 'BOTTOM',\n}\n\nconst positionStyle = (size?: string) => ({\n    [DRAWER_POSITION.LEFT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(-100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.RIGHT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.BOTTOM]: {\n        before: `\n            position: absolute;\n            bottom: 0;\n            width: 100%;\n            height: ${size || '90vh'};\n            transform: translateY(100%);\n            border-radius: 15px 15px 0 0; \n        `,\n        after: 'transform: translateX(0%);',\n    },\n});\n\nconst DrawerDiv = styled.div<{ position: DRAWER_POSITION; size?: string }>`\n    display: flex;\n    flex-direction: column;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    transition: transform 0.3s ease;\n    box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};\n    ${(props) => positionStyle(props.size)[props.position].before}\n\n    .nf-layer-enter & {\n        transform: translateX(0%);\n        ${(props) => positionStyle(props.size)[props.position].after}\n    }\n`;\n\ntype DrawerProps = {\n    /** Opens the drawer */\n    open: boolean;\n    /** position of the drawer */\n    position: DRAWER_POSITION;\n    /** size of the drawer */\n    size?: string;\n    /** Shows an overlay behind the drawer. */\n    overlay?: boolean;\n    /** Closes the drawer on esc */\n    closeOnEsc?: boolean;\n    /** Closes the drawer on overlay click */\n    closeOnOverlayClick?: boolean;\n    /** Call back function called when the drawer closes. */\n    onClose?: () => void;\n    /** Ref forwarded to the underlying HTMLDivElement of the drawer container */\n    forwardRef?: React.Ref<HTMLDivElement> | React.MutableRefObject<HTMLDivElement | null>;\n};\n\ninterface DrawerState {\n    open: boolean;\n}\n\nconst positionMap = {\n    [DRAWER_POSITION.LEFT]: LAYER_POSITION.TOP_LEFT,\n    [DRAWER_POSITION.RIGHT]: LAYER_POSITION.TOP_RIGHT,\n    [DRAWER_POSITION.BOTTOM]: LAYER_POSITION.BOTTOM_LEFT,\n};\n\n/**\n * Drawer component\n *\n * A panel that slides in from the edge of the screen.\n * It sits on top of the application content and is often used for navigation or details.\n *\n * Accessibility:\n * - Implements ARIA `role=\"dialog\"` and `aria-modal=\"true\"`.\n * - Traps focus effectively within the drawer while open.\n * - Restores focus to the triggering element upon closure.\n * - Supports closing via ESC key and overlay click.\n */\nexport default class Drawer extends React.Component<\n    React.PropsWithChildren<DrawerProps>,\n    DrawerState\n> {\n    state = {\n        open: false,\n    };\n\n    static defaultProps = {\n        overlay: true,\n        position: DRAWER_POSITION.LEFT,\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    /**\n     * Syncs state with props.\n     */\n    static getDerivedStateFromProps(props: DrawerProps) {\n        if (props.open) {\n            return {\n                open: true,\n            };\n        }\n        return null;\n    }\n\n    private layer?: ReturnType<typeof LayerManager.renderLayer>;\n\n    private closeCallback?: (resp?: unknown) => void;\n\n    /**\n     * Internal close handler.\n     * Restores focus and calls the external onClose callback.\n     */\n    private onClose = () => {\n        this.restoreFocus();\n        this.setState({\n            open: false,\n        });\n        this.props.onClose?.();\n        this.closeCallback = undefined;\n        this.layer = undefined;\n    };\n\n    private lastFocusedElement: HTMLElement | null = null;\n    private drawerRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Retrieves all focusable elements within the drawer.\n     */\n    private getFocusableElements = (): HTMLElement[] => {\n        if (!this.drawerRef.current) return [];\n        return Array.from(\n            this.drawerRef.current.querySelectorAll(\n                'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n            ),\n        ) as HTMLElement[];\n    };\n\n    /**\n     * Handles keydown events to implement the focus trap.\n     * Traps Tab and Shift+Tab within the drawer.\n     */\n    private handleKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === 'Tab') {\n            const focusableElements = this.getFocusableElements();\n            if (focusableElements.length === 0) return;\n\n            const firstElement = focusableElements[0];\n            const lastElement = focusableElements[focusableElements.length - 1];\n\n            if (e.shiftKey) {\n                if (document.activeElement === firstElement) {\n                    lastElement.focus();\n                    e.preventDefault();\n                }\n            } else {\n                if (document.activeElement === lastElement) {\n                    firstElement.focus();\n                    e.preventDefault();\n                }\n            }\n        }\n    };\n\n    /**\n     * Lifecycle method to save the currently focused element when the drawer mounts while open.\n     */\n    componentDidMount() {\n        if (this.props.open) {\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n            // Handle initial open state\n            this.handleOpen();\n        }\n    }\n\n    /**\n     * Handles opening the drawer by creating the layer.\n     */\n    private handleOpen = () => {\n        const { closeOnEsc, closeOnOverlayClick, position, size, overlay, children, ...rest } =\n            this.props;\n\n        this.layer = LayerManager.renderLayer({\n            overlay,\n            exitDelay: 300,\n            position: positionMap[position],\n            closeCallback: this.onClose,\n            closeOnEsc,\n            closeOnOverlayClick,\n            component: (\n                <DrawerDiv\n                    {...rest}\n                    ref={this.setDrawerRef}\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    tabIndex={-1}\n                    onKeyDown={this.handleKeyDown}\n                    position={position}\n                    size={size}\n                    onClick={(e) => e.stopPropagation()}\n                >\n                    {children}\n                </DrawerDiv>\n            ),\n        });\n        this.closeCallback = this.layer[1];\n        this.forceUpdate();\n    };\n\n    /**\n     * Lifecycle method to restore focus when the drawer unmounts.\n     */\n    componentWillUnmount() {\n        if (this.props.open) {\n            this.restoreFocus();\n        }\n    }\n\n    /**\n     * Restores focus to the element that was focused before the drawer opened.\n     */\n    private restoreFocus = () => {\n        if (this.lastFocusedElement) {\n            // Check if the element is still in the document\n            const elementToBeFocused = this.lastFocusedElement;\n            this.lastFocusedElement = null;\n            setTimeout(() => {\n                if (document.body.contains(elementToBeFocused)) {\n                    elementToBeFocused.focus();\n                }\n            }, 100);\n        }\n    };\n\n    /**\n     * Callback ref to capture the Drawer DOM element.\n     * Triggers initial focus setting when the element mounts.\n     */\n    private setDrawerRef = (node: HTMLDivElement | null) => {\n        // Update ref\n        (this.drawerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n\n        if (node) {\n            // Set initial focus when the node is mounted\n            this.setInitialFocus(node);\n        }\n    };\n\n    /**\n     * Sets initial focus within the drawer.\n     * Tries to focus the header first, then the first interactive element, or falls back to the container.\n     */\n    private setInitialFocus = (root: HTMLElement) => {\n        // Try to find the header (assumed to be the first child)\n        const firstChild = root.firstElementChild as HTMLElement;\n        if (firstChild) {\n            // Ensure it's focusable\n            if (firstChild.getAttribute('tabindex') === null) {\n                firstChild.setAttribute('tabindex', '-1');\n            }\n            firstChild.focus();\n            return;\n        }\n\n        // Fallback to focusable elements\n        const focusableElements = this.getFocusableElements();\n        if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n        } else {\n            // Fallback to container\n            root.focus();\n        }\n    };\n\n    /**\n     * Lifecycle method to handle Drawer updates.\n     * Manages opening/closing logic via LayerManager and focus preservation.\n     */\n    getSnapshotBeforeUpdate(prevProps: DrawerProps) {\n        const { open } = this.props;\n\n        if (prevProps.open && !open) {\n            this.closeCallback?.();\n            this.restoreFocus();\n        }\n\n        if (!prevProps.open && open) {\n            // Save current focus\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n            this.handleOpen();\n        }\n\n        return null;\n    }\n\n    /**\n     * Sets the ref prop passed to the Drawer Container component.\n     * @param node\n     */\n    setRefProp = (node: HTMLDivElement | null) => {\n        if (this.props.forwardRef && typeof this.props.forwardRef === 'function') {\n            this.props.forwardRef(node);\n        } else if (this.props.forwardRef && typeof this.props.forwardRef === 'object') {\n            (this.props.forwardRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        }\n    };\n\n    /**\n     * Renders the Drawer component via the LayerManager portal.\n     */\n    render() {\n        if (this.state.open && this.layer) {\n            const [Component] = this.layer;\n            return <Component ref={this.setRefProp} />;\n        }\n\n        return null;\n    }\n}\n"],"names":["DRAWER_POSITION","positionStyle","size","before","after","DrawerDiv","styled","getThemeValue","THEME_NAME","BACKGROUND","MODAL_SHADOW","props","position","positionMap","LAYER_POSITION","TOP_LEFT","TOP_RIGHT","BOTTOM_LEFT","Drawer","React","Component","getDerivedStateFromProps","open","componentDidMount","lastFocusedElement","document","activeElement","handleOpen","componentWillUnmount","restoreFocus","getSnapshotBeforeUpdate","prevProps","closeCallback","render","state","layer","_jsx","ref","setRefProp","onClose","setState","undefined","drawerRef","createRef","getFocusableElements","current","Array","from","querySelectorAll","handleKeyDown","e","key","focusableElements","length","firstElement","lastElement","shiftKey","focus","preventDefault","closeOnEsc","closeOnOverlayClick","overlay","children","rest","LayerManager","renderLayer","exitDelay","component","setDrawerRef","role","aria-modal","tabIndex","onKeyDown","onClick","stopPropagation","forceUpdate","elementToBeFocused","setTimeout","body","contains","node","setInitialFocus","root","firstChild","firstElementChild","getAttribute","setAttribute","forwardRef","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\n\nexport {\n    Header as DrawerHeader,\n    Body as DrawerBody,\n    Footer as DrawerFooter,\n} from '../../shared/styles';\n\nexport enum DRAWER_POSITION {\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n    BOTTOM = 'BOTTOM',\n}\n\nconst positionStyle = (size?: string) => ({\n    [DRAWER_POSITION.LEFT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(-100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.RIGHT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.BOTTOM]: {\n        before: `\n            position: absolute;\n            bottom: 0;\n            width: 100%;\n            height: ${size || '90vh'};\n            transform: translateY(100%);\n            border-radius: 15px 15px 0 0; \n        `,\n        after: 'transform: translateX(0%);',\n    },\n});\n\nconst DrawerDiv = styled.div<{ position: DRAWER_POSITION; size?: string }>`\n    display: flex;\n    flex-direction: column;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    transition: transform 0.3s ease;\n    box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};\n    ${(props) => positionStyle(props.size)[props.position].before}\n\n    .nf-layer-enter & {\n        transform: translateX(0%);\n        ${(props) => positionStyle(props.size)[props.position].after}\n    }\n`;\n\ntype DrawerProps = {\n    /** Opens the drawer */\n    open: boolean;\n    /** position of the drawer */\n    position: DRAWER_POSITION;\n    /** size of the drawer */\n    size?: string;\n    /** Shows an overlay behind the drawer. */\n    overlay?: boolean;\n    /** Closes the drawer on esc */\n    closeOnEsc?: boolean;\n    /** Closes the drawer on overlay click */\n    closeOnOverlayClick?: boolean;\n    /** Call back function called when the drawer closes. */\n    onClose?: () => void;\n    /** Ref forwarded to the underlying HTMLDivElement of the drawer container */\n    forwardRef?: React.Ref<HTMLDivElement> | React.MutableRefObject<HTMLDivElement | null>;\n};\n\ninterface DrawerState {\n    open: boolean;\n}\n\nconst positionMap = {\n    [DRAWER_POSITION.LEFT]: LAYER_POSITION.TOP_LEFT,\n    [DRAWER_POSITION.RIGHT]: LAYER_POSITION.TOP_RIGHT,\n    [DRAWER_POSITION.BOTTOM]: LAYER_POSITION.BOTTOM_LEFT,\n};\n\n/**\n * Drawer component\n *\n * A panel that slides in from the edge of the screen.\n * It sits on top of the application content and is often used for navigation or details.\n *\n * Accessibility:\n * - Implements ARIA `role=\"dialog\"` and `aria-modal=\"true\"`.\n * - Traps focus effectively within the drawer while open.\n * - Restores focus to the triggering element upon closure.\n * - Supports closing via ESC key and overlay click.\n */\nexport default class Drawer extends React.Component<\n    React.PropsWithChildren<DrawerProps>,\n    DrawerState\n> {\n    state = {\n        open: false,\n    };\n\n    static defaultProps = {\n        overlay: true,\n        position: DRAWER_POSITION.LEFT,\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    /**\n     * Syncs state with props.\n     */\n    static getDerivedStateFromProps(props: DrawerProps) {\n        if (props.open) {\n            return {\n                open: true,\n            };\n        }\n        return null;\n    }\n\n    private layer?: ReturnType<typeof LayerManager.renderLayer>;\n\n    private closeCallback?: (resp?: unknown) => void;\n\n    /**\n     * Internal close handler.\n     * Restores focus and calls the external onClose callback.\n     */\n    private onClose = () => {\n        this.restoreFocus();\n        this.setState({\n            open: false,\n        });\n        this.props.onClose?.();\n        this.closeCallback = undefined;\n        this.layer = undefined;\n    };\n\n    private lastFocusedElement: HTMLElement | null = null;\n    private drawerRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Retrieves all focusable elements within the drawer.\n     */\n    private getFocusableElements = (): HTMLElement[] => {\n        if (!this.drawerRef.current) return [];\n        return Array.from(\n            this.drawerRef.current.querySelectorAll(\n                'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n            ),\n        ) as HTMLElement[];\n    };\n\n    /**\n     * Handles keydown events to implement the focus trap.\n     * Traps Tab and Shift+Tab within the drawer.\n     */\n    private handleKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === 'Tab') {\n            const focusableElements = this.getFocusableElements();\n            if (focusableElements.length === 0) return;\n\n            const firstElement = focusableElements[0];\n            const lastElement = focusableElements[focusableElements.length - 1];\n\n            if (e.shiftKey) {\n                if (document.activeElement === firstElement) {\n                    lastElement.focus();\n                    e.preventDefault();\n                }\n            } else {\n                if (document.activeElement === lastElement) {\n                    firstElement.focus();\n                    e.preventDefault();\n                }\n            }\n        }\n    };\n\n    /**\n     * Lifecycle method to save the currently focused element when the drawer mounts while open.\n     */\n    componentDidMount() {\n        if (this.props.open) {\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n            // Handle initial open state\n            this.handleOpen();\n        }\n    }\n\n    /**\n     * Handles opening the drawer by creating the layer.\n     */\n    private handleOpen = () => {\n        const { closeOnEsc, closeOnOverlayClick, position, size, overlay, children, ...rest } =\n            this.props;\n\n        this.layer = LayerManager.renderLayer({\n            overlay,\n            exitDelay: 300,\n            position: positionMap[position],\n            closeCallback: this.onClose,\n            closeOnEsc,\n            closeOnOverlayClick,\n            component: (\n                <DrawerDiv\n                    {...rest}\n                    ref={this.setDrawerRef}\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    tabIndex={-1}\n                    onKeyDown={this.handleKeyDown}\n                    position={position}\n                    size={size}\n                    onClick={(e) => e.stopPropagation()}\n                >\n                    {children}\n                </DrawerDiv>\n            ),\n        });\n        this.closeCallback = this.layer[1];\n        this.forceUpdate();\n    };\n\n    /**\n     * Lifecycle method to restore focus when the drawer unmounts.\n     */\n    componentWillUnmount() {\n        if (this.props.open) {\n            this.restoreFocus();\n        }\n    }\n\n    /**\n     * Restores focus to the element that was focused before the drawer opened.\n     */\n    private restoreFocus = () => {\n        if (this.lastFocusedElement) {\n            // Check if the element is still in the document\n            const elementToBeFocused = this.lastFocusedElement;\n            this.lastFocusedElement = null;\n            setTimeout(() => {\n                if (document.body.contains(elementToBeFocused)) {\n                    elementToBeFocused.focus();\n                }\n            }, 100);\n        }\n    };\n\n    /**\n     * Callback ref to capture the Drawer DOM element.\n     * Triggers initial focus setting when the element mounts.\n     */\n    private setDrawerRef = (node: HTMLDivElement | null) => {\n        // Update ref\n        (this.drawerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n\n        if (node) {\n            // Set initial focus when the node is mounted\n            this.setInitialFocus(node);\n        }\n    };\n\n    /**\n     * Sets initial focus within the drawer.\n     * Tries to focus the header first, then the first interactive element, or falls back to the container.\n     */\n    private setInitialFocus = (root: HTMLElement) => {\n        // Try to find the header (assumed to be the first child)\n        const firstChild = root.firstElementChild as HTMLElement;\n        if (firstChild) {\n            // Ensure it's focusable\n            if (firstChild.getAttribute('tabindex') === null) {\n                firstChild.setAttribute('tabindex', '-1');\n            }\n            firstChild.focus();\n            return;\n        }\n\n        // Fallback to focusable elements\n        const focusableElements = this.getFocusableElements();\n        if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n        } else {\n            // Fallback to container\n            root.focus();\n        }\n    };\n\n    /**\n     * Lifecycle method to handle Drawer updates.\n     * Manages opening/closing logic via LayerManager and focus preservation.\n     */\n    componentDidUpdate(prevProps: DrawerProps) {\n        const { open } = this.props;\n\n        if (prevProps.open && !open) {\n            this.closeCallback?.();\n            this.restoreFocus();\n        }\n\n        if (!prevProps.open && open) {\n            // Save current focus\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n            this.handleOpen();\n        }\n    }\n\n    /**\n     * Sets the ref prop passed to the Drawer Container component.\n     * @param node\n     */\n    setRefProp = (node: HTMLDivElement | null) => {\n        if (this.props.forwardRef && typeof this.props.forwardRef === 'function') {\n            this.props.forwardRef(node);\n        } else if (this.props.forwardRef && typeof this.props.forwardRef === 'object') {\n            (this.props.forwardRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        }\n    };\n\n    /**\n     * Renders the Drawer component via the LayerManager portal.\n     */\n    render() {\n        if (this.state.open && this.layer) {\n            const [Component] = this.layer;\n            return <Component ref={this.setRefProp} />;\n        }\n\n        return null;\n    }\n}\n"],"names":["DRAWER_POSITION","positionStyle","size","before","after","DrawerDiv","styled","getThemeValue","THEME_NAME","BACKGROUND","MODAL_SHADOW","props","position","positionMap","LAYER_POSITION","TOP_LEFT","TOP_RIGHT","BOTTOM_LEFT","Drawer","React","Component","getDerivedStateFromProps","open","componentDidMount","lastFocusedElement","document","activeElement","handleOpen","componentWillUnmount","restoreFocus","componentDidUpdate","prevProps","closeCallback","render","state","layer","_jsx","ref","setRefProp","onClose","setState","undefined","drawerRef","createRef","getFocusableElements","current","Array","from","querySelectorAll","handleKeyDown","e","key","focusableElements","length","firstElement","lastElement","shiftKey","focus","preventDefault","closeOnEsc","closeOnOverlayClick","overlay","children","rest","LayerManager","renderLayer","exitDelay","component","setDrawerRef","role","aria-modal","tabIndex","onKeyDown","onClick","stopPropagation","forceUpdate","elementToBeFocused","setTimeout","body","contains","node","setInitialFocus","root","firstChild","firstElementChild","getAttribute","setAttribute","forwardRef","defaultProps"],"mappings":"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"}

package/lib-esm/components/Groups/Group.js

@@ -4,9 +4,9 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const Container$3 = /*#__PURE__*/ styled("div", {
-    target: "eahc3qe0",
+    target: "e1m58trk0",
     label: "Container"
-})("display:inline-flex;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:3px;margin:5px;& button,& label{margin:0;border:none;border-radius:0;border-left:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";box-shadow:none;height:32px;}& > div button{border-left:none;}& input,& select{border:none;height:32px;}& input,& select{border-radius:0;}& input:active,& select:active{box-shadow:none;}& > div > span{top:8px;}& > *:first-child,& > label:first-child input,& > label:first-child select,& > *:first-child label,& > *:first-child input{border-left:none;border-radius:2px 0 0 2px;}& > *:last-child,& > label:last-child input,& > label:last-child select,& > *:last-child label,& > *:last-child input{border-radius:0 2px 2px 0;}& *:focus,& *:focus + span{z-index:1;}&:focus-within,&:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}", (props)=>props.errorText ? `
+})("display:inline-flex;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:3px;margin:5px;& button,& label{margin:0;border:none;border-radius:0;border-left:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";box-shadow:none;height:32px;}& > div button{border-left:none;}& input,& select{border:none;height:32px;}& input,& select{border-radius:0;}& input:active,& select:active{box-shadow:none;}& > div > span{top:8px;}& > *:first-of-type,& > label:first-of-type input,& > label:first-of-type select,& > *:first-of-type label,& > *:first-of-type input{border-left:none;border-radius:2px 0 0 2px;}& > *:last-child,& > label:last-child input,& > label:last-child select,& > *:last-child label,& > *:last-child input{border-radius:0 2px 2px 0;}& *:focus,& *:focus + span{z-index:1;}&:focus-within,&:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}", (props)=>props.errorText ? `
         border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
         & > button, & > label {
@@ -14,7 +14,7 @@ const Container$3 = /*#__PURE__*/ styled("div", {
         }
     ` : '');
 const ErrorContainer = /*#__PURE__*/ styled("div", {
-    target: "eahc3qe1",
+    target: "e1m58trk1",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";margin-left:8px;font-size:12px;");
 /**

package/lib-esm/components/Groups/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sources":["../../../src/components/Groups/Group.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Container = styled.div<GroupProps>`\n    display: inline-flex;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 3px;\n    margin: 5px;\n\n    /* overrides */\n    & button,\n    & label {\n        margin: 0;\n        border: none;\n        border-radius: 0;\n        border-left: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n        box-shadow: none;\n        height: 32px;\n    }\n\n    & > div button {\n        border-left: none;\n    }\n\n    & input,\n    & select {\n        border: none;\n        height: 32px;\n    }\n\n    & input,\n    & select {\n        border-radius: 0;\n    }\n\n    & input:active,\n    & select:active {\n        box-shadow: none;\n    }\n\n    & > div > span {\n        top: 8px;\n    }\n\n    /* Handling for first and last child */\n    & > *:first-child,\n    & > label:first-child input,\n    & > label:first-child select,\n    & > *:first-child label,\n    & > *:first-child input {\n        border-left: none;\n        border-radius: 2px 0 0 2px;\n    }\n\n    & > *:last-child,\n    & > label:last-child input,\n    & > label:last-child select,\n    & > *:last-child label,\n    & > *:last-child input {\n        border-radius: 0 2px 2px 0;\n    }\n\n    /* focus */\n    & *:focus,\n    & *:focus + span {\n        z-index: 1;\n    }\n\n    &:focus-within,\n    &:hover {\n        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\n    }\n\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > button, & > label {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    `\n            : ''}\n`;\n\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    margin-left: 8px;\n    font-size: 12px;\n`;\n\ntype GroupProps = React.PropsWithChildren<{\n    /** Error Message for the group */\n    errorText?: string;\n}>;\n\n/**\n * Group Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction GroupComponent(\n    props: React.PropsWithChildren<GroupProps>,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const errorId = useId();\n\n    return (\n        <>\n            <Container\n                {...props}\n                ref={ref}\n                aria-describedby={props.errorText ? errorId : undefined}\n            >\n                {props.children}\n            </Container>\n            {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n        </>\n    );\n}\n\nconst Group = React.forwardRef<HTMLDivElement, GroupProps>(GroupComponent);\nexport default Group;\n"],"names":["Container","styled","getThemeValue","THEME_NAME","BORDER_COLOR","HOVER_SHADOW","props","errorText","ERROR","ErrorContainer","GroupComponent","ref","errorId","useId","_jsxs","_Fragment","_jsx","aria-describedby","undefined","children","id","Group","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEMC,CAAAA,CAAAA,CAAAA,uCAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,4GAAA,EAU5BF,aAAAA,CAAcC,UAAAA,CAAWC,YAAY,CAAA,EAAA,qlBAAA,EAuDhDF,aAAAA,CAAcC,UAAAA,CAAWE,YAAY,SAGrD,CAACC,KAAAA,GACCA,KAAAA,CAAMC,SAAS,GACT;sBACQ,EAAEL,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;;0BAG9B,EAAEN,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;AAExD,IAAA,CAAC,GACS,EAAA,CAAA;AAGd,MAAMC,cAAAA,iBAAiBR,MAAAA,CAAAA,KAAAA,EAAAA;;;AACVC,CAAAA,CAAAA,CAAAA,QAAAA,EAAAA,aAAAA,CAAcC,WAAWK,KAAK,CAAA,EAAA,kCAAA,CAAA;AAU3C;;;;AAIC,IACD,SAASE,cAAAA,CACLJ,KAA0C,EAC1CK,GAA8B,EAAA;AAE9B,IAAA,MAAMC,OAAAA,GAAUC,KAAAA,EAAAA;IAEhB,qBACIC,IAAA,CAAAC,QAAA,EAAA;;0BACIC,GAAA,CAAChB,WAAAA,EAAAA;AACI,gBAAA,GAAGM,KAAK;gBACTK,GAAAA,EAAKA,GAAAA;gBACLM,kBAAAA,EAAkBX,KAAAA,CAAMC,SAAS,GAAGK,OAAAA,GAAUM,SAAAA;AAE7CZ,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMa;;YAEVb,KAAAA,CAAMC,SAAS,kBAAIS,GAAA,CAACP,cAAAA,EAAAA;gBAAeW,EAAAA,EAAIR,OAAAA;AAAUN,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMC;;;;AAGpE;AAEA,MAAMc,KAAAA,iBAAQC,KAAAA,CAAMC,UAAU,CAA6Bb,cAAAA;;;;"}
+{"version":3,"file":"Group.js","sources":["../../../src/components/Groups/Group.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Container = styled.div<GroupProps>`\n    display: inline-flex;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 3px;\n    margin: 5px;\n\n    /* overrides */\n    & button,\n    & label {\n        margin: 0;\n        border: none;\n        border-radius: 0;\n        border-left: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n        box-shadow: none;\n        height: 32px;\n    }\n\n    & > div button {\n        border-left: none;\n    }\n\n    & input,\n    & select {\n        border: none;\n        height: 32px;\n    }\n\n    & input,\n    & select {\n        border-radius: 0;\n    }\n\n    & input:active,\n    & select:active {\n        box-shadow: none;\n    }\n\n    & > div > span {\n        top: 8px;\n    }\n\n    /* Handling for first and last child */\n    & > *:first-of-type,\n    & > label:first-of-type input,\n    & > label:first-of-type select,\n    & > *:first-of-type label,\n    & > *:first-of-type input {\n        border-left: none;\n        border-radius: 2px 0 0 2px;\n    }\n\n    & > *:last-child,\n    & > label:last-child input,\n    & > label:last-child select,\n    & > *:last-child label,\n    & > *:last-child input {\n        border-radius: 0 2px 2px 0;\n    }\n\n    /* focus */\n    & *:focus,\n    & *:focus + span {\n        z-index: 1;\n    }\n\n    &:focus-within,\n    &:hover {\n        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\n    }\n\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > button, & > label {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    `\n            : ''}\n`;\n\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    margin-left: 8px;\n    font-size: 12px;\n`;\n\ntype GroupProps = React.PropsWithChildren<{\n    /** Error Message for the group */\n    errorText?: string;\n}>;\n\n/**\n * Group Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction GroupComponent(\n    props: React.PropsWithChildren<GroupProps>,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const errorId = useId();\n\n    return (\n        <>\n            <Container\n                {...props}\n                ref={ref}\n                aria-describedby={props.errorText ? errorId : undefined}\n            >\n                {props.children}\n            </Container>\n            {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n        </>\n    );\n}\n\nconst Group = React.forwardRef<HTMLDivElement, GroupProps>(GroupComponent);\nexport default Group;\n"],"names":["Container","styled","getThemeValue","THEME_NAME","BORDER_COLOR","HOVER_SHADOW","props","errorText","ERROR","ErrorContainer","GroupComponent","ref","errorId","useId","_jsxs","_Fragment","_jsx","aria-describedby","undefined","children","id","Group","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEMC,CAAAA,CAAAA,CAAAA,uCAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,4GAAA,EAU5BF,aAAAA,CAAcC,UAAAA,CAAWC,YAAY,CAAA,EAAA,+lBAAA,EAuDhDF,aAAAA,CAAcC,UAAAA,CAAWE,YAAY,SAGrD,CAACC,KAAAA,GACCA,KAAAA,CAAMC,SAAS,GACT;sBACQ,EAAEL,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;;0BAG9B,EAAEN,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;AAExD,IAAA,CAAC,GACS,EAAA,CAAA;AAGd,MAAMC,cAAAA,iBAAiBR,MAAAA,CAAAA,KAAAA,EAAAA;;;AACVC,CAAAA,CAAAA,CAAAA,QAAAA,EAAAA,aAAAA,CAAcC,WAAWK,KAAK,CAAA,EAAA,kCAAA,CAAA;AAU3C;;;;AAIC,IACD,SAASE,cAAAA,CACLJ,KAA0C,EAC1CK,GAA8B,EAAA;AAE9B,IAAA,MAAMC,OAAAA,GAAUC,KAAAA,EAAAA;IAEhB,qBACIC,IAAA,CAAAC,QAAA,EAAA;;0BACIC,GAAA,CAAChB,WAAAA,EAAAA;AACI,gBAAA,GAAGM,KAAK;gBACTK,GAAAA,EAAKA,GAAAA;gBACLM,kBAAAA,EAAkBX,KAAAA,CAAMC,SAAS,GAAGK,OAAAA,GAAUM,SAAAA;AAE7CZ,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMa;;YAEVb,KAAAA,CAAMC,SAAS,kBAAIS,GAAA,CAACP,cAAAA,EAAAA;gBAAeW,EAAAA,EAAIR,OAAAA;AAAUN,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMC;;;;AAGpE;AAEA,MAAMc,KAAAA,iBAAQC,KAAAA,CAAMC,UAAU,CAA6Bb,cAAAA;;;;"}

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

@@ -10,5 +10,7 @@ declare const Checkbox: React.ForwardRefExoticComponent<{
      * @default false
      */
     indeterminate?: boolean;
+    /** Error text to be shown below the field */
+    errorText?: string;
 } & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

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;