@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.11

package/input/input.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,Fragment as a,jsxs as t}from"react/jsx-runtime";import l,{useRef as n,useImperativeHandle as s}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{StringHelper as i}from"../util/string-helper.js";import{useNextInputState as o}from"../util/use-next-input-state.js";import{NoBorderWrapper as d,DefaultWrapper as p,InputElement as c,ClearButton as u,ClearIcon as m}from"./input.style.js";const y=l.forwardRef(((l,y)=>{var{value:f,spacing:h,type:C,error:b,disabled:j,readOnly:g,onChange:v,onClear:$,allowClear:O=!1,className:x,styleType:w="bordered"}=l,N=e(l,["value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType"]);const T=((e,r)=>"tel"===e&&!!r)(C,h),R=n(null);s(y,(()=>R.current),[]);const S=o({ref:R,formatter:e=>T?i.transformWithSpaces(e,h):e}),W=e=>{v&&(T?k(e):v(e))},_=()=>{$&&$(),R&&R.current&&R.current.focus()},k=e=>{const r=S();if(!r)return;const{nextValue:a,updateCaretPosition:t}=r,l=a.replace(/\s/g,"");e.target.value=l,null==v||v(e),t()},P=f?(e=>e?T?i.transformWithSpaces(e,h):e:"")(f):f,V=O&&!j&&!g&&!!f,q=()=>t(a,{children:[r(c,Object.assign({"data-testid":"input",ref:R,"aria-disabled":j,value:P,onChange:W,type:C,readOnly:g||j,$showClear:V,$styleType:w,$visuallyReadOnly:g},N)),V&&r(u,{onClick:_,type:"button","aria-label":"Clear input",$styleType:w,children:r(m,{"aria-hidden":!0})})]});return r(a,{children:"no-border"===w?r(d,{className:x,children:q()}):r(p,{$disabled:j,$error:b,$readOnly:g,className:x,children:q()})})}));export{y as Input};
+import{__rest as r}from"../_virtual/_tslib.js";import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import{CrossIcon as n}from"@lifesg/react-icons/cross";import s from"clsx";import o,{useRef as l,useImperativeHandle as i}from"react";import{InputBox as p,BasicInput as c,BasicButton as d}from"../shared/input-wrapper/input-wrapper.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import{StringHelper as m}from"../util/string-helper.js";import"@react-aria/live-announcer";import{useNextInputState as u}from"../util/use-next-input-state.js";import{noBorderWrapper as f,defaultWrapper as y,defaultWrapperReadOnly as h,defaultWrapperError as b,defaultWrapperDisabled as j,inputElement as g,inputElementPaddingRight as C,inputElementPaddingLeft as v,inputElementDisabled as N,clearButton as x,clearButtonNoBorder as w,clearIcon as O}from"./input.styles.js";const S=o.forwardRef(((o,S)=>{var{value:T,spacing:W,type:_,error:k,disabled:P,readOnly:R,onChange:V,onClear:q,allowClear:z=!1,className:A,styleType:B="bordered"}=o,D=r(o,["value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType"]);const E=((r,e)=>"tel"===r&&!!e)(_,W),F=l(null);i(S,(()=>F.current),[]);const G=u({ref:F,formatter:r=>E?m.transformWithSpaces(r,W):r}),H=r=>{V&&(E?J(r):V(r))},I=()=>{q&&q(),F&&F.current&&F.current.focus()},J=r=>{const e=G();if(!e)return;const{nextValue:a,updateCaretPosition:t}=e,n=a.replace(/\s/g,"");r.target.value=n,null==V||V(r),t()},K=T?(r=>r?E?m.transformWithSpaces(r,W):r:"")(T):T,L=z&&!P&&!R&&!!T,M=()=>{const r=s(g,{[N]:P,[v]:"no-border"!==B&&!R,[C]:"no-border"!==B&&!R&&!L}),o=s(x,"no-border"===B&&w);return t(a,{children:[e(c,Object.assign({"data-testid":"input",ref:F,"aria-disabled":P,value:K,onChange:H,type:_,readOnly:R||P,className:r},D)),L&&e(d,{onClick:I,type:"button","aria-label":"Clear input",className:o,children:e(n,{className:O,"aria-hidden":!0})})]})};return e(a,{children:"no-border"===B?e("div",{className:s(f,A),children:M()}):e(p,{className:s(y,A,{[j]:P,[b]:k,[h]:R}),disabled:P,error:k,readOnly:R,children:M()})})}));export{S as Input};
 //# sourceMappingURL=input.js.map

package/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../src/input/input.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef } from \"react\";\n\nimport { StringHelper, useNextInputState } from \"../util\";\nimport {\n    ClearButton,\n    ClearIcon,\n    DefaultWrapper,\n    InputElement,\n    NoBorderWrapper,\n} from \"./input.style\";\nimport type { InputProps, InputRef } from \"./types\";\n\nconst shouldAllowSpacing = (\n    type: string | undefined,\n    spacing: number | undefined\n): spacing is number => {\n    return type === \"tel\" && !!spacing;\n};\n\nconst Component = (\n    {\n        value,\n        spacing,\n        type,\n        error,\n        disabled,\n        readOnly,\n        onChange,\n        onClear,\n        allowClear = false,\n        className,\n        styleType = \"bordered\",\n        ...otherProps\n    }: InputProps,\n    ref: InputRef\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const allowSpacing = shouldAllowSpacing(type, spacing);\n    const elementRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => elementRef.current!, []);\n\n    const getNextInputState = useNextInputState({\n        ref: elementRef,\n        formatter: (value) => {\n            return allowSpacing\n                ? StringHelper.transformWithSpaces(value, spacing)\n                : value;\n        },\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) {\n            if (allowSpacing) {\n                handleSpacingAndCaretPosition(event);\n            } else {\n                onChange(event);\n            }\n        }\n    };\n\n    const handleClear = () => {\n        if (onClear) onClear();\n\n        if (elementRef && elementRef.current) {\n            elementRef.current.focus();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const convertInputString = (value: string | number | readonly string[]) => {\n        if (!value) return \"\";\n        if (allowSpacing) {\n            return StringHelper.transformWithSpaces(value, spacing);\n        }\n        return value;\n    };\n\n    const handleSpacingAndCaretPosition = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        // Send to handler unspaced value\n        const valueWithoutSpace = nextValue.replace(/\\s/g, \"\");\n        event.target.value = valueWithoutSpace;\n        onChange?.(event);\n\n        updateCaretPosition();\n    };\n\n    const shouldShowClear = () => {\n        return allowClear && !disabled && !readOnly && !!value;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    /**\n     * To clear controlled input value, you have to pass in value as empty string,\n     * then set `updatedValue` to empty string.\n     * `updatedValue` for uncontrolled components remains as undefined such that the\n     * user is free to edit the field. (else the value of the InputElement will\n     * be set to empty string)\n     */\n    const updatedValue = value ? convertInputString(value) : value;\n    const showClear = shouldShowClear();\n\n    const renderInputElement = () => {\n        return (\n            <>\n                <InputElement\n                    data-testid=\"input\"\n                    ref={elementRef}\n                    aria-disabled={disabled}\n                    value={updatedValue}\n                    onChange={handleChange}\n                    type={type}\n                    readOnly={readOnly || disabled}\n                    $showClear={showClear}\n                    $styleType={styleType}\n                    $visuallyReadOnly={readOnly}\n                    {...otherProps}\n                />\n                {showClear && (\n                    <ClearButton\n                        onClick={handleClear}\n                        type=\"button\"\n                        aria-label=\"Clear input\"\n                        $styleType={styleType}\n                    >\n                        <ClearIcon aria-hidden />\n                    </ClearButton>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <>\n            {styleType === \"no-border\" ? (\n                <NoBorderWrapper className={className}>\n                    {renderInputElement()}\n                </NoBorderWrapper>\n            ) : (\n                <DefaultWrapper\n                    $disabled={disabled}\n                    $error={error}\n                    $readOnly={readOnly}\n                    className={className}\n                >\n                    {renderInputElement()}\n                </DefaultWrapper>\n            )}\n        </>\n    );\n};\n\nexport const Input = React.forwardRef(Component);\n"],"names":["Input","React","forwardRef","_a","ref","value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType","otherProps","__rest","allowSpacing","shouldAllowSpacing","elementRef","useRef","useImperativeHandle","current","getNextInputState","useNextInputState","formatter","StringHelper","transformWithSpaces","handleChange","event","handleSpacingAndCaretPosition","handleClear","focus","nextState","nextValue","updateCaretPosition","valueWithoutSpace","replace","target","updatedValue","convertInputString","showClear","renderInputElement","_jsxs","_Fragment","children","_jsx","InputElement","Object","assign","$showClear","$styleType","$visuallyReadOnly","ClearButton","onClick","ClearIcon","NoBorderWrapper","DefaultWrapper","$disabled","$error"],"mappings":"yeAYA,MA2JaA,EAAQC,EAAMC,YApJT,CACdC,EAcAC,KAdA,IAAAC,MACIA,EAAKC,QACLA,EAAOC,KACPA,EAAIC,MACJA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,WACPA,GAAa,EAAKC,UAClBA,EAASC,UACTA,EAAY,YAAUZ,EACnBa,EAAUC,EAAAd,EAZjB,oHAmBA,MAAMe,EA3BiB,EACvBX,EACAD,IAEgB,QAATC,KAAoBD,EAuBNa,CAAmBZ,EAAMD,GACxCc,EAAaC,EAAyB,MAC5CC,EAAoBlB,GAAK,IAAMgB,EAAWG,SAAU,IAEpD,MAAMC,EAAoBC,EAAkB,CACxCrB,IAAKgB,EACLM,UAAYrB,GACDa,EACDS,EAAaC,oBAAoBvB,EAAOC,GACxCD,IAORwB,EAAgBC,IACdnB,IACIO,EACAa,EAA8BD,GAE9BnB,EAASmB,GAEjB,EAGEE,EAAc,KACZpB,GAASA,IAETQ,GAAcA,EAAWG,SACzBH,EAAWG,QAAQU,OACvB,EAcEF,EACFD,IAEA,MAAMI,EAAYV,IAClB,IAAKU,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAGrCG,EAAoBF,EAAUG,QAAQ,MAAO,IACnDR,EAAMS,OAAOlC,MAAQgC,EACrB1B,SAAAA,EAAWmB,GAEXM,GAAqB,EAiBnBI,EAAenC,EAtCM,CAACA,GACnBA,EACDa,EACOS,EAAaC,oBAAoBvB,EAAOC,GAE5CD,EAJY,GAqCMoC,CAAmBpC,GAASA,EACnDqC,EAdK7B,IAAeJ,IAAaC,KAAcL,EAgB/CsC,EAAqB,IAEnBC,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,EAAYC,OAAAC,OAAA,CAAA,cACG,QACZ9C,IAAKgB,EAAU,gBACAX,EACfJ,MAAOmC,EACP7B,SAAUkB,EACVtB,KAAMA,EACNG,SAAUA,GAAYD,EAAQ0C,WAClBT,EAASU,WACTrC,EAASsC,kBACF3C,GACfM,IAEP0B,GACGK,EAACO,EAAW,CACRC,QAASvB,EACTzB,KAAK,SAAQ,aACF,yBACCQ,EAAS+B,SAErBC,EAACS,EAAS,CAAA,eAAA,SAO9B,OACIT,EAAAF,EAAA,CAAAC,SACmB,cAAd/B,EACGgC,EAACU,EAAe,CAAC3C,UAAWA,WACvB6B,MAGLI,EAACW,EAAc,CAAAC,UACAlD,EAAQmD,OACXpD,YACGE,EACXI,UAAWA,WAEV6B,OAGV"}
+{"version":3,"file":"input.js","sources":["../../src/input/input.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport React, { useImperativeHandle, useRef } from \"react\";\n\nimport { BasicButton, BasicInput, InputBox } from \"../shared/input-wrapper\";\nimport { StringHelper, useNextInputState } from \"../util\";\nimport * as styles from \"./input.styles\";\nimport type { InputProps, InputRef } from \"./types\";\n\nconst shouldAllowSpacing = (\n    type: string | undefined,\n    spacing: number | undefined\n): spacing is number => {\n    return type === \"tel\" && !!spacing;\n};\n\nconst Component = (\n    {\n        value,\n        spacing,\n        type,\n        error,\n        disabled,\n        readOnly,\n        onChange,\n        onClear,\n        allowClear = false,\n        className,\n        styleType = \"bordered\",\n        ...otherProps\n    }: InputProps,\n    ref: InputRef\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const allowSpacing = shouldAllowSpacing(type, spacing);\n    const elementRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => elementRef.current!, []);\n\n    const getNextInputState = useNextInputState({\n        ref: elementRef,\n        formatter: (value) => {\n            return allowSpacing\n                ? StringHelper.transformWithSpaces(value, spacing)\n                : value;\n        },\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) {\n            if (allowSpacing) {\n                handleSpacingAndCaretPosition(event);\n            } else {\n                onChange(event);\n            }\n        }\n    };\n\n    const handleClear = () => {\n        if (onClear) onClear();\n\n        if (elementRef && elementRef.current) {\n            elementRef.current.focus();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const convertInputString = (value: string | number | readonly string[]) => {\n        if (!value) return \"\";\n        if (allowSpacing) {\n            return StringHelper.transformWithSpaces(value, spacing);\n        }\n        return value;\n    };\n\n    const handleSpacingAndCaretPosition = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        // Send to handler unspaced value\n        const valueWithoutSpace = nextValue.replace(/\\s/g, \"\");\n        event.target.value = valueWithoutSpace;\n        onChange?.(event);\n\n        updateCaretPosition();\n    };\n\n    const shouldShowClear = () => {\n        return allowClear && !disabled && !readOnly && !!value;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    /**\n     * To clear controlled input value, you have to pass in value as empty string,\n     * then set `updatedValue` to empty string.\n     * `updatedValue` for uncontrolled components remains as undefined such that the\n     * user is free to edit the field. (else the value of the InputElement will\n     * be set to empty string)\n     */\n    const updatedValue = value ? convertInputString(value) : value;\n    const showClear = shouldShowClear();\n\n    const renderInputElement = () => {\n        const inputClassName = clsx(styles.inputElement, {\n            [styles.inputElementDisabled]: disabled,\n            [styles.inputElementPaddingLeft]:\n                styleType !== \"no-border\" && !readOnly,\n            [styles.inputElementPaddingRight]:\n                styleType !== \"no-border\" && !readOnly && !showClear,\n        });\n\n        const clearButtonClassName = clsx(\n            styles.clearButton,\n            styleType === \"no-border\" && styles.clearButtonNoBorder\n        );\n\n        return (\n            <>\n                <BasicInput\n                    data-testid=\"input\"\n                    ref={elementRef}\n                    aria-disabled={disabled}\n                    value={updatedValue}\n                    onChange={handleChange}\n                    type={type}\n                    readOnly={readOnly || disabled}\n                    className={inputClassName}\n                    {...otherProps}\n                />\n                {showClear && (\n                    <BasicButton\n                        onClick={handleClear}\n                        type=\"button\"\n                        aria-label=\"Clear input\"\n                        className={clearButtonClassName}\n                    >\n                        <CrossIcon className={styles.clearIcon} aria-hidden />\n                    </BasicButton>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <>\n            {styleType === \"no-border\" ? (\n                <div className={clsx(styles.noBorderWrapper, className)}>\n                    {renderInputElement()}\n                </div>\n            ) : (\n                <InputBox\n                    className={clsx(styles.defaultWrapper, className, {\n                        [styles.defaultWrapperDisabled]: disabled,\n                        [styles.defaultWrapperError]: error,\n                        [styles.defaultWrapperReadOnly]: readOnly,\n                    })}\n                    disabled={disabled}\n                    error={error}\n                    readOnly={readOnly}\n                >\n                    {renderInputElement()}\n                </InputBox>\n            )}\n        </>\n    );\n};\n\n// @catalog\n/**\n * A single-line text input field.\n *\n * Use `Input` for free-form text entry. It supports controlled and uncontrolled\n * usage.\n * @keywords field, form, input, text field\n */\nexport const Input = React.forwardRef(Component);\n"],"names":["Input","React","forwardRef","_a","ref","value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType","otherProps","__rest","allowSpacing","shouldAllowSpacing","elementRef","useRef","useImperativeHandle","current","getNextInputState","useNextInputState","formatter","StringHelper","transformWithSpaces","handleChange","event","handleSpacingAndCaretPosition","handleClear","focus","nextState","nextValue","updateCaretPosition","valueWithoutSpace","replace","target","updatedValue","convertInputString","showClear","renderInputElement","inputClassName","clsx","styles.inputElement","inputElementDisabled","styles.inputElementDisabled","inputElementPaddingLeft","styles.inputElementPaddingLeft","inputElementPaddingRight","styles.inputElementPaddingRight","clearButtonClassName","styles.clearButton","styles.clearButtonNoBorder","_jsxs","_Fragment","children","_jsx","BasicInput","BasicButton","onClick","CrossIcon","styles.clearIcon","styles.noBorderWrapper","InputBox","styles.defaultWrapper","defaultWrapperDisabled","styles.defaultWrapperDisabled","defaultWrapperError","styles.defaultWrapperError","defaultWrapperReadOnly","styles.defaultWrapperReadOnly"],"mappings":"k6BASA,MAkLaA,EAAQC,EAAMC,YA3KT,CACdC,EAcAC,KAdA,IAAAC,MACIA,EAAKC,QACLA,EAAOC,KACPA,EAAIC,MACJA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,WACPA,GAAa,EAAKC,UAClBA,EAASC,UACTA,EAAY,YAAUZ,EACnBa,EAAUC,EAAAd,EAZjB,oHAmBA,MAAMe,EA3BiB,EACvBX,EACAD,IAEgB,QAATC,KAAoBD,EAuBNa,CAAmBZ,EAAMD,GACxCc,EAAaC,EAAyB,MAC5CC,EAAoBlB,GAAK,IAAMgB,EAAWG,SAAU,IAEpD,MAAMC,EAAoBC,EAAkB,CACxCrB,IAAKgB,EACLM,UAAYrB,GACDa,EACDS,EAAaC,oBAAoBvB,EAAOC,GACxCD,IAORwB,EAAgBC,IACdnB,IACIO,EACAa,EAA8BD,GAE9BnB,EAASmB,GAEjB,EAGEE,EAAc,KACZpB,GAASA,IAETQ,GAAcA,EAAWG,SACzBH,EAAWG,QAAQU,OACvB,EAcEF,EACFD,IAEA,MAAMI,EAAYV,IAClB,IAAKU,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAGrCG,EAAoBF,EAAUG,QAAQ,MAAO,IACnDR,EAAMS,OAAOlC,MAAQgC,EACrB1B,SAAAA,EAAWmB,GAEXM,GAAqB,EAiBnBI,EAAenC,EAtCM,CAACA,GACnBA,EACDa,EACOS,EAAaC,oBAAoBvB,EAAOC,GAE5CD,EAJY,GAqCMoC,CAAmBpC,GAASA,EACnDqC,EAdK7B,IAAeJ,IAAaC,KAAcL,EAgB/CsC,EAAqB,KACvB,MAAMC,EAAiBC,EAAKC,EAAqB,CAC7CC,CAACC,GAA8BvC,EAC/BwC,CAACC,GACiB,cAAdnC,IAA8BL,EAClCyC,CAACC,GACiB,cAAdrC,IAA8BL,IAAagC,IAG7CW,EAAuBR,EACzBS,EACc,cAAdvC,GAA6BwC,GAGjC,OACIC,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,+BACe,QACZxD,IAAKgB,EAAU,gBACAX,EACfJ,MAAOmC,EACP7B,SAAUkB,EACVtB,KAAMA,EACNG,SAAUA,GAAYD,EACtBK,UAAW8B,GACP5B,IAEP0B,GACGiB,EAACE,EAAW,CACRC,QAAS9B,EACTzB,KAAK,sBACM,cACXO,UAAWuC,EAAoBK,SAE/BC,EAACI,GAAUjD,UAAWkD,EAAgB,eAAA,QAG/C,EAIX,OACIL,EAAAF,EAAA,CAAAC,SACmB,cAAd3C,EACG4C,EAAA,MAAA,CAAK7C,UAAW+B,EAAKoB,EAAwBnD,GAAU4C,SAClDf,MAGLgB,EAACO,GACGpD,UAAW+B,EAAKsB,EAAuBrD,EAAW,CAC9CsD,CAACC,GAAgC5D,EACjC6D,CAACC,GAA6B/D,EAC9BgE,CAACC,GAAgC/D,IAErCD,SAAUA,EACVD,MAAOA,EACPE,SAAUA,WAETiC,OAGV"}

package/input/input.styles.d.ts

@@ -0,0 +1,12 @@
+export declare const inputElement: import("@linaria/core").LinariaClassName;
+export declare const inputElementDisabled: import("@linaria/core").LinariaClassName;
+export declare const inputElementPaddingLeft: import("@linaria/core").LinariaClassName;
+export declare const inputElementPaddingRight: import("@linaria/core").LinariaClassName;
+export declare const clearButton: import("@linaria/core").LinariaClassName;
+export declare const clearButtonNoBorder: import("@linaria/core").LinariaClassName;
+export declare const clearIcon: import("@linaria/core").LinariaClassName;
+export declare const noBorderWrapper: import("@linaria/core").LinariaClassName;
+export declare const defaultWrapper: import("@linaria/core").LinariaClassName;
+export declare const defaultWrapperReadOnly: import("@linaria/core").LinariaClassName;
+export declare const defaultWrapperDisabled: import("@linaria/core").LinariaClassName;
+export declare const defaultWrapperError: import("@linaria/core").LinariaClassName;

package/input/input.styles.js

@@ -0,0 +1,2 @@
+import"./input.styles_1cblor0.css";const t="in7cu42",i="igi2hjf",c="i13ih4tu",r="itgr0ej",o="cw4xcs5",e="c12bgeeg",p="c1v4p080",s="n1rpxuv8",n="d7twtqb",u="dtt8rz0",b="d1rboro0",d="d6he67o";export{o as clearButton,e as clearButtonNoBorder,p as clearIcon,n as defaultWrapper,b as defaultWrapperDisabled,d as defaultWrapperError,u as defaultWrapperReadOnly,t as inputElement,i as inputElementDisabled,c as inputElementPaddingLeft,r as inputElementPaddingRight,s as noBorderWrapper};
+//# sourceMappingURL=input.styles.js.map

package/input/input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.js","sources":["../../src/input/input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputElement = css`\n    width: 100%;\n    height: calc(3rem - 2px); /* exclude top and bottom borders */\n`;\n\nexport const inputElementDisabled = css`\n    color: ${Colour[\"text-subtler\"]};\n\n    &:hover {\n        cursor: not-allowed;\n    }\n`;\n\nexport const inputElementPaddingLeft = css`\n    padding-left: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const inputElementPaddingRight = css`\n    padding-right: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const clearButton = css`\n    height: auto;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    cursor: pointer;\n    color: ${Colour.icon};\n`;\n\nexport const clearButtonNoBorder = css`\n    margin-right: calc(${Spacing[\"spacing-12\"]} * -1);\n`;\n\nexport const clearIcon = css`\n    height: 1.25rem;\n    width: 1.25rem;\n    vertical-align: middle;\n`;\n\nexport const noBorderWrapper = css`\n    display: flex;\n    width: 100%;\n`;\n\nexport const defaultWrapper = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n`;\n\nexport const defaultWrapperReadOnly = css`\n    border-color: transparent;\n    padding: 0;\n    background: transparent !important;\n\n    &:focus-within {\n        outline-color: ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const defaultWrapperDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n\n    &:focus-within {\n        outline-color: ${Colour[\"border-disabled\"]};\n    }\n`;\n\nexport const defaultWrapperError = css`\n    border-color: ${Colour[\"border-error\"]};\n\n    &:focus-within {\n        outline-color: ${Colour[\"border-error-focus\"]};\n    }\n`;\n"],"names":["inputElement","inputElementDisabled","inputElementPaddingLeft","inputElementPaddingRight","clearButton","clearButtonNoBorder","clearIcon","noBorderWrapper","defaultWrapper","defaultWrapperReadOnly","defaultWrapperDisabled","defaultWrapperError"],"mappings":"wDAOO,MAAMA,EAAY,UAKZC,EAAoB,UAQpBC,EAAuB,WAIvBC,EAAwB,UAIxBC,EAAW,UAOXC,EAAmB,WAInBC,EAAS,WAMTC,EAAe,WAKfC,EAAc,UAMdC,EAAsB,UAUtBC,EAAsB,WAStBC,EAAmB"}

package/input/input.styles_1cblor0.css

@@ -0,0 +1,12 @@
+@layer fds{.in7cu42{width:100%;height:calc(3rem - 2px);}
+.igi2hjf{color:var(--fds-colour-text-subtler);}.igi2hjf:hover{cursor:not-allowed;}
+.i13ih4tu{padding-left:var(--fds-spacing-16);}
+.itgr0ej{padding-right:var(--fds-spacing-16);}
+.cw4xcs5{height:auto;padding:var(--fds-spacing-12) var(--fds-spacing-16);cursor:pointer;color:var(--fds-colour-icon);}
+.c12bgeeg{margin-right:calc(var(--fds-spacing-12) * -1);}
+.c1v4p080{height:1.25rem;width:1.25rem;vertical-align:middle;}
+.n1rpxuv8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}
+.d7twtqb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}
+.dtt8rz0{border-color:transparent;padding:0;background:transparent!important;}.dtt8rz0:focus-within{outline-color:var(--fds-colour-border-focus);}
+.d1rboro0{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.d1rboro0:focus-within{outline-color:var(--fds-colour-border-disabled);}
+.d6he67o{border-color:var(--fds-colour-border-error);}.d6he67o:focus-within{outline-color:var(--fds-colour-border-error-focus);}}

package/input/types.d.ts

@@ -1,14 +1,50 @@
 import type React from "react";
+/**
+ * Visual style variant for the `Input` component.
+ *
+ * - `"bordered"` wraps the input in a styled border container.
+ * - `"no-border"` omits the border wrapper.
+ */
 export type InputStyleType = "no-border" | "bordered";
+/**
+ * Props for the `Input` component.
+ */
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    /** Sets the number of characters before a space is added (works only with type `tel` input) */
+    /**
+     * Inserts a space after every `spacing` characters in the displayed value.
+     * Only applies when `type` is `"tel"`.
+     */
     spacing?: number | undefined;
+    /**
+     * Marks the input wrapper in an error state.
+     */
     error?: boolean | undefined;
+    /**
+     * Shows a clear button when the field has a value and is neither disabled
+     * nor read-only.
+     *
+     * @default false
+     */
     allowClear?: boolean | undefined;
+    /**
+     * Called when the user activates the clear button. Use this to clear the
+     * controlled value.
+     */
     onClear?: () => void | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Visual style variant.
+     *
+     * @default "bordered"
+     */
     styleType?: InputStyleType | undefined;
 }
-/** To be exposed for Form component inheritance */
+/**
+ * A subset of `InputProps` for use by form components that manage the `error`
+ * state themselves.
+ */
 export type InputPartialProps = Omit<InputProps, "error">;
+/**
+ * Ref type for programmatic access to the underlying `HTMLInputElement`.
+ */
 export type InputRef = React.Ref<HTMLInputElement>;

package/input-group/input-group-list-addon.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as o}from"react/jsx-runtime";import t,{useState as a,useRef as i,useEffect as d}from"react";import{VisuallyHidden as l,concatIds as s}from"../shared/accessibility/index.js";import"styled-components";import"../util/string-helper.js";import"../v3_theme/index.js";import"../shared/dropdown-list-v2/dropdown-label.styles.js";import{DropdownList as n}from"../shared/dropdown-list-v2/dropdown-list.js";import{DropdownListState as p}from"../shared/dropdown-list-v2/dropdown-list-state.js";import"../shared/dropdown-list-v2/expandable-element.js";import"@lifesg/react-icons/caret-right";import"react-virtuoso";import"../button/button.style.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as c}from"../util/simple-id-generator.js";import{ValueLabel as m,LabelContainer as h,PlaceholderLabel as b}from"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as u}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/dropdown-list-v2/dropdown-list.styles.js";import"../shared/dropdown-list-v2/dropdown-search.js";import"../shared/dropdown-list-v2/nested-dropdown-list.styles.js";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import{FieldWrapper as y,FieldSelector as x,Divider as j,FieldInput as f,SelectorReadOnly as w,StyledExpandableElement as v}from"./input-group-list-addon.style.js";const g=(t,g)=>{var{addon:$,error:O,onChange:S,readOnly:T,disabled:B,className:R,onBlur:I,noBorder:_,"data-testid":D,"aria-labelledby":E,"aria-describedby":N,"aria-invalid":C,"aria-label":k}=t,A=e(t,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:F,listExtractor:P,enableSearch:H,hideNoResultsDisplay:L,noResultsDescription:Z,searchPlaceholder:q,searchFunction:G,onSearch:V,placeholder:W="Select",displayValueExtractor:z,"data-selector-testid":J,options:K,selectedOption:M,onSelectOption:Q,optionsLoadState:U,optionTruncationType:X,onRetry:Y,onHideOptions:ee,onShowOptions:re,dropdownZIndex:oe,dropdownRootNode:te,"aria-label":ae}=$.attributes,{position:ie}=$,[de,le]=a(M),[se,ne]=a(!1),[pe,ce]=a(!1),[me]=a((()=>c.generate())),he=`${me}-listbox`,be=`${me}-instruction`,ue=`${me}-combobox-label`,ye=`${me}-textbox-label`,xe=i(null),je=i(null);d((()=>{le(M)}),[M]);const fe=()=>{if(de)return z?z(de):F?F(de):de.toString()},we=e=>{e?null==re||re():null==ee||ee()},ve=(e,r)=>{var o;null===(o=je.current)||void 0===o||o.focus(),le(e),ne(!1),we(!1),null==Q||Q(e,r)},ge=()=>{se&&(ne(!1),we(!1))},$e=()=>{ne(!0),we(!0),ce(!0)},Oe=e=>{ne(!1),we(!1),"click"!==e&&(ce(!1),null==I||I())},Se=()=>{var e;null===(e=je.current)||void 0===e||e.focus(),ne(!1),we(!1)},Te=()=>o("div",{children:[r(v,{ref:je,disabled:B,expanded:se,listboxId:he,popupRole:"listbox",readOnly:T,"aria-labelledby":s(E,ue),"aria-describedby":s(N,be),"aria-invalid":C,$noBorder:_,$position:ie,children:r(h,{$disabled:B,children:de?r(m,{children:fe()}):r(b,{children:W})})}),r(l,{id:be,children:"Press space to open options"})]}),Be=()=>r(n,{listboxId:he,listItems:K,onSelectItem:ve,onDismiss:ge,valueExtractor:F,listExtractor:P,enableSearch:H,hideNoResultsDisplay:L,noResultsDescription:Z,searchPlaceholder:q,searchFunction:G,onSearch:V,selectedItems:de?[de]:[],itemsLoadState:U,itemTruncationType:X,onRetry:Y,matchElementWidth:!0});return r(p,{children:o(y,{$focused:pe,$disabled:B,$readOnly:T,$error:O,$position:ie,ref:xe,className:R,"data-testid":D,$noBorder:_,tabIndex:-1,onFocus:()=>{pe||se||ce(!0)},onBlur:e=>{pe&&!se&&xe.current&&!xe.current.contains(e.relatedTarget)&&(ce(!1),null==I||I())},children:[r(l,{"aria-hidden":!0,id:ue,children:ae}),r(x,{"data-testid":J,children:T?de?r(w,{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":E,"aria-describedby":N,"aria-invalid":C,children:r(m,{children:fe()})}):null:r(u,{enabled:!T&&!B,isOpen:se,renderElement:Te,renderDropdown:Be,onOpen:$e,onClose:Oe,onDismiss:Se,clickToToggle:!0,offset:8,alignment:"right"===ie?"right":"left",fitAvailableHeight:!0,customZIndex:oe,rootNode:te,positionRef:xe})}),r(j,{$readOnly:T,$position:ie}),r(l,{"aria-hidden":!0,id:ye,children:k}),r(f,Object.assign({ref:g},A,{$position:ie,$noBorder:_,readOnly:T,disabled:B,error:O,onChange:e=>{S&&S(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":s(E,ye),"aria-describedby":N,"aria-invalid":C}))]})})},$=t.forwardRef(g);export{g as Component,$ as InputGroupListAddon};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as o}from"react/jsx-runtime";import i from"clsx";import t,{useState as a,useRef as s,useEffect as l}from"react";import{Input as d}from"../input/input.js";import{VisuallyHidden as n,concatIds as p}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as c}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_mloii0.css";import{DropdownList as m}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as h}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as u}from"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as b}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputBox as f}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_konwm.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{ValueLabel as x,LabelContainer as y,PlaceholderLabel as j}from"../shared/dropdown-wrapper/dropdown-wrapper.js";import{fieldSelector as w,divider as g,dividerReadOnly as v,fieldInput as _,fieldInputNoBorder as T,fieldInputReadOnly as O,fieldWrapper as I,selectorReadOnly as S,expandableElementNoBorder as k}from"./input-group-list-addon.styles.js";const N=(t,N)=>{var{addon:A,error:R,onChange:C,readOnly:D,disabled:B,className:q,onBlur:E,noBorder:P,"data-testid":H,"aria-labelledby":G,"aria-describedby":M,"aria-invalid":$,"aria-label":F}=t,L=e(t,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:Z,listExtractor:V,isOptionDisabled:W,enableSearch:z,hideNoResultsDisplay:J,noResultsDescription:K,searchPlaceholder:Q,searchFunction:U,onSearch:X,placeholder:Y="Select",displayValueExtractor:ee,"data-selector-testid":re,options:oe,selectedOption:ie,onSelectOption:te,optionsLoadState:ae,optionTruncationType:se,onRetry:le,onHideOptions:de,onShowOptions:ne,dropdownZIndex:pe,dropdownRootNode:ce,"aria-label":me}=A.attributes,{position:he="left"}=A,[ue,be]=a(ie),[fe,xe]=a(!1),[ye,je]=a(!1),we=c(),ge=`${we}-listbox`,ve=`${we}-instruction`,_e=`${we}-combobox-label`,Te=`${we}-textbox-label`,Oe=s(null),Ie=s(null);l((()=>{be(ie)}),[ie]);const Se=()=>{if(ue)return ee?ee(ue):Z?Z(ue):ue.toString()},ke=e=>{e?null==ne||ne():null==de||de()},Ne=(e,r)=>{var o;null===(o=Ie.current)||void 0===o||o.focus(),be(e),xe(!1),ke(!1),null==te||te(e,r)},Ae=()=>{fe&&(xe(!1),ke(!1))},Re=()=>{xe(!0),ke(!0),je(!0)},Ce=e=>{xe(!1),ke(!1),"click"!==e&&(je(!1),null==E||E())},De=()=>{var e;null===(e=Ie.current)||void 0===e||e.focus(),xe(!1),ke(!1)},Be=()=>o("div",{children:[r(u,{ref:Ie,disabled:B,expanded:fe,listboxId:ge,popupRole:"listbox",readOnly:D,"aria-labelledby":p(G,_e),"aria-describedby":p(M,ve),"aria-invalid":$,"data-position":he,className:i(P&&k),children:r(y,{disabled:B,children:ue?r(x,{children:Se()}):r(j,{children:Y})})}),r(n,{id:ve,children:"Press space to open options"})]}),qe=()=>r(m,{listboxId:ge,listItems:oe,onSelectItem:Ne,onDismiss:Ae,valueExtractor:Z,listExtractor:V,isOptionDisabled:W,enableSearch:z,hideNoResultsDisplay:J,noResultsDescription:K,searchPlaceholder:Q,searchFunction:U,onSearch:X,selectedItems:ue?[ue]:[],itemsLoadState:ae,itemTruncationType:se,onRetry:le,matchElementWidth:!0});return r(h,{children:o(f,{focused:ye,disabled:B,readOnly:D,error:R,ref:Oe,noBorder:P,"data-testid":H,tabIndex:-1,onFocus:()=>{ye||fe||je(!0)},onBlur:e=>{ye&&!fe&&Oe.current&&!Oe.current.contains(e.relatedTarget)&&(je(!1),null==E||E())},"data-position":he,className:i(I,q),children:[r(n,{"aria-hidden":!0,id:_e,children:me}),r("div",{"data-testid":re,className:w,children:D?ue?r("div",{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":G,"aria-describedby":M,"aria-invalid":$,className:S,children:r(x,{children:Se()})}):null:r(b,{enabled:!D&&!B,isOpen:fe,renderElement:Be,renderDropdown:qe,onOpen:Re,onClose:Ce,onDismiss:De,clickToToggle:!0,offset:8,alignment:"right"===he?"right":"left",fitAvailableHeight:!0,customZIndex:pe,rootNode:ce,positionRef:Oe})}),r("div",{"data-position":he,className:i(g,D&&v)}),r(n,{"aria-hidden":!0,id:Te,children:F}),r("div",{"data-position":he,className:i(_,P&&T,D&&O),children:r(d,Object.assign({ref:N},L,{readOnly:D,disabled:B,error:R,onChange:e=>{C&&C(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":p(G,Te),"aria-describedby":M,"aria-invalid":$}))})]})})},A=t.forwardRef(N);export{N as Component,A as InputGroupListAddon};
 //# sourceMappingURL=input-group-list-addon.js.map

package/input-group/input-group-list-addon.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group-list-addon.js","sources":["../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { SimpleIdGenerator } from \"../util\";\nimport {\n    Divider,\n    FieldInput,\n    FieldSelector,\n    FieldWrapper,\n    SelectorReadOnly,\n    StyledExpandableElement,\n} from \"./input-group-list-addon.style\";\nimport type { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n    {\n        addon,\n        error,\n        onChange,\n        readOnly,\n        disabled,\n        className,\n        onBlur,\n        noBorder,\n        \"data-testid\": testId,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": ariaInvalid,\n        \"aria-label\": textboxAriaLabel,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const {\n        /* display props */\n        valueExtractor,\n        listExtractor,\n        /* search props */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription,\n        searchPlaceholder,\n        searchFunction,\n        onSearch,\n        /* list addon props */\n        placeholder = \"Select\",\n        displayValueExtractor,\n        \"data-selector-testid\": selectorTestId,\n        options,\n        selectedOption,\n        onSelectOption,\n        optionsLoadState,\n        optionTruncationType,\n        onRetry,\n        onHideOptions,\n        onShowOptions,\n        dropdownZIndex,\n        dropdownRootNode,\n        \"aria-label\": comboboxAriaLabel,\n    } = addon!.attributes as ListAddon<T, V>;\n\n    const { position } = addon!;\n\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n    const listboxId = `${internalId}-listbox`;\n    const instructionId = `${internalId}-instruction`;\n    const comboboxLabelId = `${internalId}-combobox-label`;\n    const textboxLabelId = `${internalId}-textbox-label`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (!selected) return;\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            return valueExtractor(selected);\n        }\n\n        return selected.toString();\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) onChange(event);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected) {\n            return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n        } else {\n            return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer $disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <div>\n                <StyledExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={listboxId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    aria-invalid={ariaInvalid}\n                    $noBorder={noBorder}\n                    $position={position}\n                >\n                    {renderSelectorContent()}\n                </StyledExpandableElement>\n                <VisuallyHidden id={instructionId}>\n                    Press space to open options\n                </VisuallyHidden>\n            </div>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={listboxId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                onSearch={onSearch}\n                selectedItems={selected ? [selected] : []}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                matchElementWidth\n            />\n        );\n    };\n\n    const renderSelector = () => {\n        if (readOnly) {\n            return selected ? (\n                <SelectorReadOnly\n                    data-testid=\"selector-label\"\n                    tabIndex={0}\n                    role=\"combobox\"\n                    aria-haspopup=\"listbox\"\n                    aria-readonly\n                    aria-expanded={false}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    <ValueLabel>{getDisplayValue()}</ValueLabel>\n                </SelectorReadOnly>\n            ) : null;\n        } else {\n            return (\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={showOptions}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle\n                    offset={8}\n                    alignment={position === \"right\" ? \"right\" : \"left\"}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                    positionRef={nodeRef}\n                />\n            );\n        }\n    };\n\n    return (\n        <DropdownListState>\n            <FieldWrapper\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n                $position={position}\n                ref={nodeRef}\n                className={className}\n                data-testid={testId}\n                $noBorder={noBorder}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n            >\n                <VisuallyHidden aria-hidden id={comboboxLabelId}>\n                    {comboboxAriaLabel}\n                </VisuallyHidden>\n                <FieldSelector data-testid={selectorTestId}>\n                    {renderSelector()}\n                </FieldSelector>\n                <Divider $readOnly={readOnly} $position={position} />\n                <VisuallyHidden aria-hidden id={textboxLabelId}>\n                    {textboxAriaLabel}\n                </VisuallyHidden>\n                <FieldInput\n                    ref={ref}\n                    {...otherProps}\n                    $position={position}\n                    $noBorder={noBorder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    error={error}\n                    onChange={handleInputChange}\n                    data-testid=\"input\"\n                    styleType=\"no-border\"\n                    aria-labelledby={concatIds(ariaLabelledBy, textboxLabelId)}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                />\n            </FieldWrapper>\n        </DropdownListState>\n    );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","StyledExpandableElement","expanded","popupRole","concatIds","$noBorder","$position","LabelContainer","$disabled","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","FieldWrapper","$focused","$readOnly","$error","tabIndex","onFocus","e","contains","relatedTarget","FieldSelector","SelectorReadOnly","role","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","Divider","FieldInput","Object","assign","event","styleType","InputGroupListAddon","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"input-group-list-addon.js","sources":["../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group-list-addon.styles\";\nimport type { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n    {\n        addon,\n        error,\n        onChange,\n        readOnly,\n        disabled,\n        className,\n        onBlur,\n        noBorder,\n        \"data-testid\": testId,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": ariaInvalid,\n        \"aria-label\": textboxAriaLabel,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const {\n        /* display props */\n        valueExtractor,\n        listExtractor,\n        isOptionDisabled,\n        /* search props */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription,\n        searchPlaceholder,\n        searchFunction,\n        onSearch,\n        /* list addon props */\n        placeholder = \"Select\",\n        displayValueExtractor,\n        \"data-selector-testid\": selectorTestId,\n        options,\n        selectedOption,\n        onSelectOption,\n        optionsLoadState,\n        optionTruncationType,\n        onRetry,\n        onHideOptions,\n        onShowOptions,\n        dropdownZIndex,\n        dropdownRootNode,\n        \"aria-label\": comboboxAriaLabel,\n    } = addon!.attributes as ListAddon<T, V>;\n\n    const { position = \"left\" } = addon!;\n\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n    const listboxId = `${internalId}-listbox`;\n    const instructionId = `${internalId}-instruction`;\n    const comboboxLabelId = `${internalId}-combobox-label`;\n    const textboxLabelId = `${internalId}-textbox-label`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (!selected) return;\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            return valueExtractor(selected);\n        }\n\n        return selected.toString();\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) onChange(event);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (selected) {\n            return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n        }\n\n        return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <div>\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={listboxId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    aria-invalid={ariaInvalid}\n                    data-position={position}\n                    className={clsx(\n                        noBorder && styles.expandableElementNoBorder\n                    )}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n                <VisuallyHidden id={instructionId}>\n                    Press space to open options\n                </VisuallyHidden>\n            </div>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={listboxId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                isOptionDisabled={isOptionDisabled}\n                enableSearch={enableSearch}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                onSearch={onSearch}\n                selectedItems={selected ? [selected] : []}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                matchElementWidth\n            />\n        );\n    };\n\n    const renderSelector = () => {\n        if (readOnly) {\n            return selected ? (\n                <div\n                    data-testid=\"selector-label\"\n                    tabIndex={0}\n                    role=\"combobox\"\n                    aria-haspopup=\"listbox\"\n                    aria-readonly\n                    aria-expanded={false}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                    className={styles.selectorReadOnly}\n                >\n                    <ValueLabel>{getDisplayValue()}</ValueLabel>\n                </div>\n            ) : null;\n        } else {\n            return (\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={showOptions}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle\n                    offset={8}\n                    alignment={position === \"right\" ? \"right\" : \"left\"}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                    positionRef={nodeRef}\n                />\n            );\n        }\n    };\n\n    return (\n        <DropdownListState>\n            <InputBox\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n                ref={nodeRef}\n                noBorder={noBorder}\n                data-testid={testId}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                data-position={position}\n                className={clsx(styles.fieldWrapper, className)}\n            >\n                <VisuallyHidden aria-hidden id={comboboxLabelId}>\n                    {comboboxAriaLabel}\n                </VisuallyHidden>\n                <div\n                    data-testid={selectorTestId}\n                    className={styles.fieldSelector}\n                >\n                    {renderSelector()}\n                </div>\n                <div\n                    data-position={position}\n                    className={clsx(\n                        styles.divider,\n                        readOnly && styles.dividerReadOnly\n                    )}\n                />\n                <VisuallyHidden aria-hidden id={textboxLabelId}>\n                    {textboxAriaLabel}\n                </VisuallyHidden>\n                <div\n                    data-position={position}\n                    className={clsx(\n                        styles.fieldInput,\n                        noBorder && styles.fieldInputNoBorder,\n                        readOnly && styles.fieldInputReadOnly\n                    )}\n                >\n                    <Input\n                        ref={ref}\n                        {...otherProps}\n                        readOnly={readOnly}\n                        disabled={disabled}\n                        error={error}\n                        onChange={handleInputChange}\n                        data-testid=\"input\"\n                        styleType=\"no-border\"\n                        aria-labelledby={concatIds(\n                            ariaLabelledBy,\n                            textboxLabelId\n                        )}\n                        aria-describedby={ariaDescribedBy}\n                        aria-invalid={ariaInvalid}\n                    />\n                </div>\n            </InputBox>\n        </DropdownListState>\n    );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","isOptionDisabled","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","ExpandableElement","expanded","popupRole","concatIds","clsx","styles.expandableElementNoBorder","LabelContainer","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","InputBox","tabIndex","onFocus","e","contains","relatedTarget","styles.fieldWrapper","styles.fieldSelector","role","styles.selectorReadOnly","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","styles.divider","styles.dividerReadOnly","styles.fieldInput","styles.fieldInputNoBorder","styles.fieldInputReadOnly","Input","Object","assign","event","styleType","InputGroupListAddon","React","forwardRef"],"mappings":"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"}

package/input-group/input-group-list-addon.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const fieldWrapper: import("@linaria/core").LinariaClassName;
+export declare const expandableElementNoBorder: import("@linaria/core").LinariaClassName;
+export declare const fieldSelector: import("@linaria/core").LinariaClassName;
+export declare const fieldInput: import("@linaria/core").LinariaClassName;
+export declare const fieldInputNoBorder: import("@linaria/core").LinariaClassName;
+export declare const fieldInputReadOnly: import("@linaria/core").LinariaClassName;
+export declare const selectorReadOnly: import("@linaria/core").LinariaClassName;
+export declare const divider: import("@linaria/core").LinariaClassName;
+export declare const dividerReadOnly: import("@linaria/core").LinariaClassName;

package/input-group/input-group-list-addon.styles.js

@@ -0,0 +1,2 @@
+import"./input-group-list-addon.styles_17iuqtw.css";const s="fmhspm1",o="e135ws0j",p="faf95up",t="f96umbl",u="f3g4d0l",f="fioonlm",i="s1b40hsu",l="d7gwol5",m="d181f48m";export{l as divider,m as dividerReadOnly,o as expandableElementNoBorder,t as fieldInput,u as fieldInputNoBorder,f as fieldInputReadOnly,p as fieldSelector,s as fieldWrapper,i as selectorReadOnly};
+//# sourceMappingURL=input-group-list-addon.styles.js.map

package/input-group/input-group-list-addon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-list-addon.styles.js","sources":["../../src/input-group/input-group-list-addon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const fieldWrapper = css`\n    display: flex;\n    align-items: center;\n\n    &[data-position=\"right\"] {\n        flex-direction: row-reverse;\n    }\n`;\n\nexport const expandableElementNoBorder = css`\n    &[data-position=\"right\"] {\n        padding-right: 0;\n    }\n\n    &[data-position=\"left\"] {\n        padding-left: 0;\n    }\n`;\n\nexport const fieldSelector = css`\n    flex: 0 0 auto;\n`;\n\nexport const fieldInput = css`\n    width: 100%;\n\n    &[data-position=\"right\"] {\n        padding-left: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-position=\"left\"] {\n        padding-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const fieldInputNoBorder = css`\n    &[data-position=\"right\"] {\n        padding-left: 0;\n    }\n\n    &[data-position=\"left\"] {\n        padding-right: 0;\n    }\n`;\n\nexport const fieldInputReadOnly = css`\n    padding: 0;\n`;\n\nexport const selectorReadOnly = css`\n    display: flex;\n    align-items: center;\n    padding: 0;\n    background: transparent;\n    margin-right: ${Spacing[\"spacing-12\"]};\n    color: ${Colour[\"text\"]};\n`;\n\nexport const divider = css`\n    width: 1px;\n    background: ${Colour[\"border\"]};\n    flex-shrink: 0;\n    height: 1.25rem;\n\n    &[data-position=\"right\"] {\n        margin-left: ${Spacing[\"spacing-12\"]};\n    }\n\n    &[data-position=\"left\"] {\n        margin-right: ${Spacing[\"spacing-12\"]};\n    }\n`;\n\nexport const dividerReadOnly = css`\n    display: none;\n`;\n"],"names":["fieldWrapper","expandableElementNoBorder","fieldSelector","fieldInput","fieldInputNoBorder","fieldInputReadOnly","selectorReadOnly","divider","dividerReadOnly"],"mappings":"+EAOO,MAAMA,EAAY,UASZC,EAAyB,WAUzBC,EAAa,UAIbC,EAAU,UAYVC,EAAkB,UAUlBC,EAAkB,UAIlBC,EAAgB,WAShBC,EAAO,UAePC,EAAe"}

package/input-group/input-group-list-addon.styles_17iuqtw.css

@@ -0,0 +1,9 @@
+@layer fds{.fmhspm1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.fmhspm1[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.e135ws0j[data-position="right"]{padding-right:0;}.e135ws0j[data-position="left"]{padding-left:0;}
+.faf95up{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}
+.f96umbl{width:100%;}.f96umbl[data-position="right"]{padding-left:var(--fds-spacing-16);}.f96umbl[data-position="left"]{padding-right:var(--fds-spacing-16);}
+.f3g4d0l[data-position="right"]{padding-left:0;}.f3g4d0l[data-position="left"]{padding-right:0;}
+.fioonlm{padding:0;}
+.s1b40hsu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0;background:transparent;margin-right:var(--fds-spacing-12);color:var(--fds-colour-text);}
+.d7gwol5{width:1px;background:var(--fds-colour-border);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1.25rem;}.d7gwol5[data-position="right"]{margin-left:var(--fds-spacing-12);}.d7gwol5[data-position="left"]{margin-right:var(--fds-spacing-12);}
+.d181f48m{display:none;}}

package/input-group/input-group.d.ts

@@ -1,3 +1,11 @@
 import React from "react";
 import type { InputGroupProps } from "./types";
+/**
+ * A single-line text input optionally paired with a static label, a custom element, or a
+ * dropdown list selector.
+ *
+ * Use `InputGroup` when the input needs contextual decoration such as a unit label,
+ * a country-code dropdown, or a fully custom slot.
+ * @keywords field, form, input, prefix, suffix
+ */
 export declare const InputGroup: <T, V>(props: InputGroupProps<T, V> & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;

package/input-group/input-group.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsxs as e,jsx as t}from"react/jsx-runtime";import a from"react";import{AddonWrapper as d,LabelAddonContainer as o,MainInput as s,NoAddonWrapper as i}from"./input-group.style.js";import{InputGroupListAddon as n}from"./input-group-list-addon.js";const l=a.forwardRef(((a,l)=>{var{addon:c,error:p,className:b}=a,u=r(a,["addon","error","className"]);const $=()=>t(i,{$disabled:u.disabled,$error:p,$readOnly:u.readOnly,"data-testid":u["data-testid"],className:b,$noBorder:u.noBorder,children:t(s,Object.assign({ref:l},u,{"data-testid":"input",styleType:"no-border"}))});if(!c)return $();{const{type:r="label",position:a="left"}=c,{allowClear:i}=u;switch(r){case"list":{const r=c.attributes;return r.options&&r.options.length>0?t(n,Object.assign({ref:l,addon:c,error:p,className:b,noBorder:u.noBorder},u)):$()}case"custom":{const r=c.attributes;return r.children?e(d,{$error:p,$disabled:u.disabled,$readOnly:u.readOnly,"data-testid":u["data-testid"],$position:a,className:b,$noBorder:u.noBorder,children:[t(o,{"data-testid":"addon",$disabled:u.disabled,$readOnly:u.readOnly,$position:a,children:r.children}),t(s,Object.assign({ref:l},u,{allowClear:i&&"right"!==a,error:p,"data-testid":"input",styleType:"no-border"}))]}):$()}default:{const r=c.attributes;return r.value?e(d,{$disabled:u.disabled,$error:p,$readOnly:u.readOnly,"data-testid":u["data-testid"],$position:a,className:b,$noBorder:u.noBorder,children:[t(o,{"data-testid":"addon",$disabled:u.disabled,$readOnly:u.readOnly,$position:a,children:r.value}),t(s,Object.assign({ref:l},u,{allowClear:i&&"right"!==a,error:p,"data-testid":"input",styleType:"no-border"}))]}):$()}}}}));export{l as InputGroup};
+import{__rest as a}from"../_virtual/_tslib.js";import{jsx as r,jsxs as e}from"react/jsx-runtime";import t from"clsx";import d from"react";import{Input as i}from"../input/input.js";import{VisuallyHidden as l,concatIds as o}from"../shared/accessibility/index.js";import{InputBox as s}from"../shared/input-wrapper/input-wrapper.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as n}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{labelAddonContainer as p,addonWrapper as c,noAddonWrapper as m}from"./input-group.styles.js";import{InputGroupListAddon as b}from"./input-group-list-addon.js";const u=d.forwardRef(((d,u)=>{var{addon:y,error:f,className:h,noBorder:j,"aria-label":O,"aria-labelledby":g}=d,v=a(d,["addon","error","className","noBorder","aria-label","aria-labelledby"]);const w=n(),N=`${w}-addon`,x=`${w}-ariaLabelId`,B=()=>e(s,{disabled:v.disabled,error:f,readOnly:v.readOnly,noBorder:j,"data-testid":v["data-testid"],className:t(m,h),"data-read-only":v.readOnly,"data-no-border":j,children:[r(l,{"aria-hidden":!0,id:x,children:O}),r(i,Object.assign({ref:u},v,{"data-testid":"input",styleType:"no-border","aria-labelledby":o(x,g)}))]}),C=(a,d,n)=>e(s,{disabled:v.disabled,error:f,readOnly:v.readOnly,noBorder:j,"data-testid":v["data-testid"],className:t(c,h),"data-read-only":v.readOnly,"data-no-border":j,"data-position":d,children:[r("div",{"data-testid":"addon",id:N,className:p,"data-disabled":v.disabled,"data-read-only":v.readOnly,"data-position":d,children:a}),r(l,{"aria-hidden":!0,id:x,children:O}),r(i,Object.assign({ref:u},v,{"aria-labelledby":o(x,g,N),allowClear:n&&"right"!==d,error:f,"data-testid":"input",styleType:"no-border"}))]});if(!y)return B();{const{type:a="label",position:e="left"}=y,{allowClear:t}=v;switch(a){case"list":{const a=y.attributes;return a.options&&a.options.length>0?r(b,Object.assign({ref:u,addon:y,error:f,className:h,noBorder:j,"aria-label":O,"aria-labelledby":g},v)):B()}case"custom":{const a=y.attributes;return a.children?C(a.children,e,t):B()}default:{const a=y.attributes;return a.value?C(a.value,e,t):B()}}}}));export{u as InputGroup};
 //# sourceMappingURL=input-group.js.map

package/input-group/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","sources":["../../src/input-group/input-group.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    AddonWrapper,\n    LabelAddonContainer,\n    MainInput,\n    NoAddonWrapper,\n} from \"./input-group.style\";\nimport { InputGroupListAddon } from \"./input-group-list-addon\";\nimport type {\n    CustomAddon,\n    InputGroupProps,\n    LabelAddon,\n    ListAddon,\n} from \"./types\";\n\nconst Component = <T, V>(\n    { addon, error, className, ...otherProps }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const renderNoAddons = () => (\n        <NoAddonWrapper\n            $disabled={otherProps.disabled}\n            $error={error}\n            $readOnly={otherProps.readOnly}\n            data-testid={otherProps[\"data-testid\"]}\n            className={className}\n            $noBorder={otherProps.noBorder}\n        >\n            <MainInput\n                ref={ref}\n                {...otherProps}\n                data-testid=\"input\"\n                styleType=\"no-border\"\n            />\n        </NoAddonWrapper>\n    );\n\n    if (addon) {\n        const { type = \"label\", position = \"left\" } = addon;\n        const { allowClear } = otherProps;\n\n        switch (type) {\n            case \"list\": {\n                const listAddon = addon.attributes as ListAddon<T, V>;\n                if (listAddon.options && listAddon.options.length > 0) {\n                    return (\n                        <InputGroupListAddon\n                            ref={ref}\n                            addon={addon}\n                            error={error}\n                            className={className}\n                            noBorder={otherProps.noBorder}\n                            {...otherProps}\n                        />\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n            case \"custom\": {\n                const customAddon = addon.attributes as CustomAddon;\n                if (customAddon.children) {\n                    return (\n                        <AddonWrapper\n                            $error={error}\n                            $disabled={otherProps.disabled}\n                            $readOnly={otherProps.readOnly}\n                            data-testid={otherProps[\"data-testid\"]}\n                            $position={position}\n                            className={className}\n                            $noBorder={otherProps.noBorder}\n                        >\n                            <LabelAddonContainer\n                                data-testid=\"addon\"\n                                $disabled={otherProps.disabled}\n                                $readOnly={otherProps.readOnly}\n                                $position={position}\n                            >\n                                {customAddon.children}\n                            </LabelAddonContainer>\n                            <MainInput\n                                ref={ref}\n                                {...otherProps}\n                                allowClear={allowClear && position !== \"right\"}\n                                error={error}\n                                data-testid=\"input\"\n                                styleType=\"no-border\"\n                            />\n                        </AddonWrapper>\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n            default: {\n                const labelAddon = addon.attributes as LabelAddon;\n                if (labelAddon.value) {\n                    return (\n                        <AddonWrapper\n                            $disabled={otherProps.disabled}\n                            $error={error}\n                            $readOnly={otherProps.readOnly}\n                            data-testid={otherProps[\"data-testid\"]}\n                            $position={position}\n                            className={className}\n                            $noBorder={otherProps.noBorder}\n                        >\n                            <LabelAddonContainer\n                                data-testid=\"addon\"\n                                $disabled={otherProps.disabled}\n                                $readOnly={otherProps.readOnly}\n                                $position={position}\n                            >\n                                {labelAddon.value}\n                            </LabelAddonContainer>\n                            <MainInput\n                                ref={ref}\n                                {...otherProps}\n                                allowClear={allowClear && position !== \"right\"}\n                                error={error}\n                                data-testid=\"input\"\n                                styleType=\"no-border\"\n                            />\n                        </AddonWrapper>\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n        }\n    } else {\n        return renderNoAddons();\n    }\n};\n\nexport const InputGroup = React.forwardRef(Component);\n"],"names":["InputGroup","React","forwardRef","_a","ref","addon","error","className","otherProps","__rest","renderNoAddons","_jsx","NoAddonWrapper","$disabled","disabled","$error","readOnly","noBorder","children","MainInput","Object","assign","styleType","type","position","allowClear","listAddon","attributes","options","length","InputGroupListAddon","customAddon","_jsxs","AddonWrapper","$readOnly","$position","$noBorder","LabelAddonContainer","labelAddon","value"],"mappings":"0SAgBA,MAwHaA,EAAaC,EAAMC,YAxHd,CACdC,EACAC,SADAC,MAAEA,EAAKC,MAAEA,EAAKC,UAAEA,KAAcC,EAAUC,EAAAN,EAAxC,CAAA,QAAA,QAAA,cAGA,MAAMO,EAAiB,IACnBC,EAACC,EAAc,CAAAC,UACAL,EAAWM,SAAQC,OACtBT,YACGE,EAAWQ,SAAQ,cACjBR,EAAW,eACxBD,UAAWA,YACAC,EAAWS,SAAQC,SAE9BP,EAACQ,EAASC,OAAAC,OAAA,CACNjB,IAAKA,GACDI,EAAU,CAAA,cACF,QACZc,UAAU,iBAKtB,IAAIjB,EA8FA,OAAOK,IA9FA,CACP,MAAMa,KAAEA,EAAO,QAAOC,SAAEA,EAAW,QAAWnB,GACxCoB,WAAEA,GAAejB,EAEvB,OAAQe,GACJ,IAAK,OAAQ,CACT,MAAMG,EAAYrB,EAAMsB,WACxB,OAAID,EAAUE,SAAWF,EAAUE,QAAQC,OAAS,EAE5ClB,EAACmB,EAAmBV,OAAAC,OAAA,CAChBjB,IAAKA,EACLC,MAAOA,EACPC,MAAOA,EACPC,UAAWA,EACXU,SAAUT,EAAWS,UACjBT,IAILE,GAEf,CACA,IAAK,SAAU,CACX,MAAMqB,EAAc1B,EAAMsB,WAC1B,OAAII,EAAYb,SAERc,EAACC,EAAY,CAAAlB,OACDT,YACGE,EAAWM,SAAQoB,UACnB1B,EAAWQ,SAAQ,cACjBR,EAAW,eAAc2B,UAC3BX,EACXjB,UAAWA,EAAS6B,UACT5B,EAAWS,SAAQC,SAAA,CAE9BP,EAAC0B,EAAmB,CAAA,cACJ,kBACD7B,EAAWM,SAAQoB,UACnB1B,EAAWQ,mBACXQ,EAAQN,SAElBa,EAAYb,WAEjBP,EAACQ,iBACGf,IAAKA,GACDI,EAAU,CACdiB,WAAYA,GAA2B,UAAbD,EAC1BlB,MAAOA,EAAK,cACA,QACZgB,UAAU,kBAKfZ,GAEf,CACA,QAAS,CACL,MAAM4B,EAAajC,EAAMsB,WACzB,OAAIW,EAAWC,MAEPP,EAACC,EAAY,CAAApB,UACEL,EAAWM,SAAQC,OACtBT,EAAK4B,UACF1B,EAAWQ,SAAQ,cACjBR,EAAW,eAAc2B,UAC3BX,EACXjB,UAAWA,EAAS6B,UACT5B,EAAWS,SAAQC,SAAA,CAE9BP,EAAC0B,EAAmB,CAAA,cACJ,kBACD7B,EAAWM,SAAQoB,UACnB1B,EAAWQ,mBACXQ,EAAQN,SAElBoB,EAAWC,QAEhB5B,EAACQ,iBACGf,IAAKA,GACDI,EAAU,CACdiB,WAAYA,GAA2B,UAAbD,EAC1BlB,MAAOA,EAAK,cACA,QACZgB,UAAU,kBAKfZ,GAEf,EAER,CAEA"}
+{"version":3,"file":"input-group.js","sources":["../../src/input-group/input-group.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group.styles\";\nimport { InputGroupListAddon } from \"./input-group-list-addon\";\nimport type {\n    CustomAddon,\n    InputGroupProps,\n    LabelAddon,\n    ListAddon,\n} from \"./types\";\n\nconst Component = <T, V>(\n    {\n        addon,\n        error,\n        className,\n        noBorder,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const internalId = useId();\n    const addonId = `${internalId}-addon`;\n    const ariaLabelId = `${internalId}-ariaLabelId`;\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderNoAddons = () => (\n        <InputBox\n            disabled={otherProps.disabled}\n            error={error}\n            readOnly={otherProps.readOnly}\n            noBorder={noBorder}\n            data-testid={otherProps[\"data-testid\"]}\n            className={clsx(styles.noAddonWrapper, className)}\n            data-read-only={otherProps.readOnly}\n            data-no-border={noBorder}\n        >\n            <VisuallyHidden aria-hidden id={ariaLabelId}>\n                {ariaLabel}\n            </VisuallyHidden>\n            <Input\n                ref={ref}\n                {...otherProps}\n                data-testid=\"input\"\n                styleType=\"no-border\"\n                aria-labelledby={concatIds(ariaLabelId, ariaLabelledBy)}\n            />\n        </InputBox>\n    );\n\n    const renderWithAddon = (\n        addonContent: React.ReactNode,\n        position: \"left\" | \"right\",\n        allowClear?: boolean\n    ) => (\n        <InputBox\n            disabled={otherProps.disabled}\n            error={error}\n            readOnly={otherProps.readOnly}\n            noBorder={noBorder}\n            data-testid={otherProps[\"data-testid\"]}\n            className={clsx(styles.addonWrapper, className)}\n            data-read-only={otherProps.readOnly}\n            data-no-border={noBorder}\n            data-position={position}\n        >\n            <div\n                data-testid=\"addon\"\n                id={addonId}\n                className={styles.labelAddonContainer}\n                data-disabled={otherProps.disabled}\n                data-read-only={otherProps.readOnly}\n                data-position={position}\n            >\n                {addonContent}\n            </div>\n            <VisuallyHidden aria-hidden id={ariaLabelId}>\n                {ariaLabel}\n            </VisuallyHidden>\n            <Input\n                ref={ref}\n                {...otherProps}\n                aria-labelledby={concatIds(\n                    ariaLabelId,\n                    ariaLabelledBy,\n                    addonId\n                )}\n                allowClear={allowClear && position !== \"right\"}\n                error={error}\n                data-testid=\"input\"\n                styleType=\"no-border\"\n            />\n        </InputBox>\n    );\n\n    if (addon) {\n        const { type = \"label\", position = \"left\" } = addon;\n        const { allowClear } = otherProps;\n\n        switch (type) {\n            case \"list\": {\n                const listAddon = addon.attributes as ListAddon<T, V>;\n                if (listAddon.options && listAddon.options.length > 0) {\n                    return (\n                        <InputGroupListAddon\n                            ref={ref}\n                            addon={addon}\n                            error={error}\n                            className={className}\n                            noBorder={noBorder}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            {...otherProps}\n                        />\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n\n            case \"custom\": {\n                const customAddon = addon.attributes as CustomAddon;\n                if (customAddon.children) {\n                    return renderWithAddon(\n                        customAddon.children,\n                        position,\n                        allowClear\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n            default: {\n                const labelAddon = addon.attributes as LabelAddon;\n                if (labelAddon.value) {\n                    return renderWithAddon(\n                        labelAddon.value,\n                        position,\n                        allowClear\n                    );\n                } else {\n                    return renderNoAddons();\n                }\n            }\n        }\n    } else {\n        return renderNoAddons();\n    }\n};\n\n// @catalog\n/**\n * A single-line text input optionally paired with a static label, a custom element, or a\n * dropdown list selector.\n *\n * Use `InputGroup` when the input needs contextual decoration such as a unit label,\n * a country-code dropdown, or a fully custom slot.\n * @keywords field, form, input, prefix, suffix\n */\nexport const InputGroup = React.forwardRef(Component);\n"],"names":["InputGroup","React","forwardRef","_a","ref","addon","error","className","noBorder","ariaLabel","ariaLabelledBy","otherProps","__rest","internalId","useId","addonId","ariaLabelId","renderNoAddons","_jsxs","InputBox","disabled","readOnly","clsx","styles.noAddonWrapper","_jsx","VisuallyHidden","id","children","Input","Object","assign","styleType","concatIds","renderWithAddon","addonContent","position","allowClear","styles.addonWrapper","styles.labelAddonContainer","type","listAddon","attributes","options","length","InputGroupListAddon","customAddon","labelAddon","value"],"mappings":"orBAgBA,MA2JaA,EAAaC,EAAMC,YA3Jd,CACdC,EASAC,SATAC,MACIA,EAAKC,MACLA,EAAKC,UACLA,EAASC,SACTA,EACA,aAAcC,EACd,kBAAmBC,GAAcP,EAC9BQ,EAAUC,EAAAT,EAPjB,yEAcA,MAAMU,EAAaC,IACbC,EAAU,GAAGF,UACbG,EAAc,GAAGH,gBAKjBI,EAAiB,IACnBC,EAACC,EAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,gBACGG,EAAW,eACxBJ,UAAWe,EAAKC,EAAuBhB,oBACvBI,EAAWU,SAAQ,iBACnBb,YAEhBgB,EAACC,EAAc,CAAA,eAAA,EAAaC,GAAIV,EAAWW,SACtClB,IAELe,EAACI,EAAKC,OAAAC,OAAA,CACF1B,IAAKA,GACDO,iBACQ,QACZoB,UAAU,8BACOC,EAAUhB,EAAaN,SAK9CuB,EAAkB,CACpBC,EACAC,EACAC,IAEAlB,EAACC,EAAQ,CACLC,SAAUT,EAAWS,SACrBd,MAAOA,EACPe,SAAUV,EAAWU,SACrBb,SAAUA,EAAQ,cACLG,EAAW,eACxBJ,UAAWe,EAAKe,EAAqB9B,GAAU,iBAC/BI,EAAWU,SAAQ,iBACnBb,EAAQ,gBACT2B,EAAQR,SAAA,CAEvBH,EAAA,MAAA,CAAA,cACgB,QACZE,GAAIX,EACJR,UAAW+B,EAA0B,gBACtB3B,EAAWS,SAAQ,iBAClBT,EAAWU,SAAQ,gBACpBc,EAAQR,SAEtBO,IAELV,EAACC,EAAc,CAAA,eAAA,EAAaC,GAAIV,EAAWW,SACtClB,IAELe,EAACI,iBACGxB,IAAKA,GACDO,EAAU,CAAA,kBACGqB,EACbhB,EACAN,EACAK,GAEJqB,WAAYA,GAA2B,UAAbD,EAC1B7B,MAAOA,EAAK,cACA,QACZyB,UAAU,kBAKtB,IAAI1B,EAmDA,OAAOY,IAnDA,CACP,MAAMsB,KAAEA,EAAO,QAAOJ,SAAEA,EAAW,QAAW9B,GACxC+B,WAAEA,GAAezB,EAEvB,OAAQ4B,GACJ,IAAK,OAAQ,CACT,MAAMC,EAAYnC,EAAMoC,WACxB,OAAID,EAAUE,SAAWF,EAAUE,QAAQC,OAAS,EAE5CnB,EAACoB,EAAmBf,OAAAC,OAAA,CAChB1B,IAAKA,EACLC,MAAOA,EACPC,MAAOA,EACPC,UAAWA,EACXC,SAAUA,EAAQ,aACNC,EAAS,kBACJC,GACbC,IAILM,GAEf,CAEA,IAAK,SAAU,CACX,MAAM4B,EAAcxC,EAAMoC,WAC1B,OAAII,EAAYlB,SACLM,EACHY,EAAYlB,SACZQ,EACAC,GAGGnB,GAEf,CACA,QAAS,CACL,MAAM6B,EAAazC,EAAMoC,WACzB,OAAIK,EAAWC,MACJd,EACHa,EAAWC,MACXZ,EACAC,GAGGnB,GAEf,EAER,CAEA"}

package/input-group/input-group.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const addonWrapper: import("@linaria/core").LinariaClassName;
+export declare const noAddonWrapper: import("@linaria/core").LinariaClassName;
+export declare const labelAddonContainer: import("@linaria/core").LinariaClassName;

package/input-group/input-group.styles.js

@@ -0,0 +1,2 @@
+import"./input-group.styles_bqye6f.css";const p="afvd13",s="nx53mj4",t="l1s6ick6";export{p as addonWrapper,t as labelAddonContainer,s as noAddonWrapper};
+//# sourceMappingURL=input-group.styles.js.map

package/input-group/input-group.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.styles.js","sources":["../../src/input-group/input-group.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const addonWrapper = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    padding: 0 ${Spacing[\"spacing-16\"]};\n\n    &[data-read-only=\"true\"] {\n        padding: 0;\n    }\n\n    &[data-no-border=\"true\"] {\n        padding: 0;\n    }\n\n    &[data-position=\"right\"] {\n        flex-direction: row-reverse;\n    }\n`;\n\nexport const noAddonWrapper = css`\n    display: flex;\n    position: relative;\n    width: 100%;\n    padding: 0 ${Spacing[\"spacing-16\"]};\n\n    &[data-read-only=\"true\"] {\n        padding: 0;\n    }\n\n    &[data-no-border=\"true\"] {\n        padding: 0;\n    }\n`;\n\nexport const labelAddonContainer = css`\n    position: relative;\n    display: flex;\n    align-items: center;\n    margin-right: ${Spacing[\"spacing-12\"]};\n\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    /* SVG Icon */\n    svg {\n        height: 1em;\n        width: 1em;\n    }\n\n    &[data-disabled=\"true\"] {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    &[data-read-only=\"true\"] {\n        margin-right: ${Spacing[\"spacing-4\"]};\n    }\n\n    &[data-position=\"right\"] {\n        margin-right: 0;\n        margin-left: ${Spacing[\"spacing-12\"]};\n    }\n\n    &[data-position=\"right\"][data-read-only=\"true\"] {\n        margin-right: 0;\n        margin-left: ${Spacing[\"spacing-4\"]};\n    }\n`;\n"],"names":["addonWrapper","noAddonWrapper","labelAddonContainer"],"mappings":"mEAOO,MAAMA,EAAY,SAmBZC,EAAc,UAedC,EAAmB"}

package/input-group/input-group.styles_bqye6f.css

@@ -0,0 +1,3 @@
+@layer fds{.afvd13{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:0 var(--fds-spacing-16);}.afvd13[data-read-only="true"]{padding:0;}.afvd13[data-no-border="true"]{padding:0;}.afvd13[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.nx53mj4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:100%;padding:0 var(--fds-spacing-16);}.nx53mj4[data-read-only="true"]{padding:0;}.nx53mj4[data-no-border="true"]{padding:0;}
+.l1s6ick6{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--fds-spacing-12);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.l1s6ick6 svg{height:1em;width:1em;}.l1s6ick6[data-disabled="true"]{color:var(--fds-colour-text-subtler);}.l1s6ick6[data-read-only="true"]{margin-right:var(--fds-spacing-4);}.l1s6ick6[data-position="right"]{margin-right:0;margin-left:var(--fds-spacing-12);}.l1s6ick6[data-position="right"][data-read-only="true"]{margin-right:0;margin-left:var(--fds-spacing-4);}}

package/input-group/types.d.ts

@@ -1,50 +1,126 @@
 import type { RefObject } from "react";
 import type { InputProps } from "../input/types";
-import type { DropdownDisplayProps, DropdownSearchProps, ItemsLoadStateType, TruncateType } from "../shared/dropdown-list-v2";
+import type { DropdownDisplayProps, DropdownSearchProps, ItemsLoadStateType, TruncateType } from "../shared/dropdown-list";
+/** Determines which kind of addon is rendered alongside the input. */
 export type InputGroupAddonType = "label" | "list" | "custom";
+/**
+ * Placement of the addon relative to the input field.
+ */
 export type InputGroupAddonPosition = "left" | "right" | undefined;
+/** Attributes for a custom addon that renders arbitrary JSX alongside the input. */
 export interface CustomAddon {
+    /**
+     * The JSX element rendered inside the addon slot.
+     * If omitted the addon is not displayed.
+     */
     children?: JSX.Element | undefined;
 }
+/** Attributes for a static text label rendered alongside the input. */
 export interface LabelAddon {
+    /**
+     * Text displayed in the addon slot.
+     * If omitted the addon is not displayed.
+     */
     value?: string | undefined;
 }
+/**
+ * Attributes for a dropdown list addon that pairs a combobox selector with the text input.
+ */
 export interface ListAddon<T, V> extends DropdownDisplayProps<T, V>, DropdownSearchProps<T> {
+    /**
+     * Placeholder text shown in the dropdown trigger when no option is selected.
+     *
+     * @default "Select"
+     */
     placeholder?: string | undefined;
+    /**
+     * Derives the display string shown in the dropdown trigger from the selected item.
+     */
     displayValueExtractor?: ((item: T) => string) | undefined;
     "data-selector-testid"?: string | undefined;
+    /**
+     * Accessible label for the combobox trigger element.
+     */
     "aria-label"?: string | undefined;
+    /** The list of items to render in the dropdown. */
     options?: T[] | undefined;
+    /** The currently selected item. Controls the value shown in the trigger. */
     selectedOption?: T | undefined;
-    onSelectOption?: ((option: T, extractedValue: T | V) => void) | undefined;
     /**
-     * Used when items are loaded from an api call.
-     * Values: "loading" | "fail" | "success"
+     * Called when the user selects an item from the dropdown.
+     *
+     * @param option The full item object that was selected.
+     * @param extractedValue The value derived by `valueExtractor`, or the item itself when no extractor is provided.
      */
+    onSelectOption?: ((option: T, extractedValue: T | V) => void) | undefined;
+    /** Indicates the async load state of the options list. */
     optionsLoadState?: ItemsLoadStateType | undefined;
-    /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Values: "middle" | "end" */
+    /** Controls how long option labels are truncated when they overflow. */
     optionTruncationType?: TruncateType | undefined;
+    /** Called when the user activates the retry action while `optionsLoadState` is `"fail"`. */
     onRetry?: (() => void) | undefined;
+    /** Called when the dropdown list is hidden. */
     onHideOptions?: (() => void) | undefined;
+    /** Called when the dropdown list is shown. */
     onShowOptions?: (() => void) | undefined;
+    /** CSS `z-index` applied to the dropdown overlay. */
     dropdownZIndex?: number | undefined;
     /**
-     * The root element that contains the dropdown element. Defaults to the document body.
+     * The root element that contains the dropdown element.
+     *
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
      *
-     * If the parent that contains the trigger element has a higher z-index than the dropdown,
-     * the dropdown may not be visible. Specify the parent element here instead
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
+     *
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
 }
+/**
+ * Configuration for the addon rendered alongside the `InputGroup` text field.
+ */
 export interface AddonProps<T, V> {
+    /**
+     * Variant of the addon to render.
+     *
+     * @default "label"
+     */
     type?: InputGroupAddonType | undefined;
+    /** Variant-specific configuration. Shape depends on `type`. */
     attributes: ListAddon<T, V> | LabelAddon | CustomAddon;
+    /**
+     * Side of the input field where the addon is placed.
+     *
+     * @default "left"
+     */
     position?: InputGroupAddonPosition;
 }
+/** Props for the `InputGroup` component. */
 export interface InputGroupProps<T, V> extends InputProps {
+    /**
+     * Optional addon rendered alongside the text field.
+     * Omitting this prop renders a plain input without any addon.
+     */
     addon?: AddonProps<T, V> | undefined;
+    /**
+     * Removes the outer border of the input box.
+     *
+     * @default false
+     */
     noBorder?: boolean | undefined;
+    /**
+     * Called when focus leaves the entire input group.
+     *
+     * @remarks The event argument is optional because the `"list"` addon type fires
+     * `onBlur` from the dropdown interaction rather than from the native input element.
+     */
     onBlur?: ((event?: React.FocusEvent<HTMLInputElement>) => void) | undefined;
 }
-/** To be exposed for Form component inheritance */
+/**
+ * A subset of `InputGroupProps` for use by form components that manage the `error`
+ * state themselves.
+ */
 export type InputGroupPartialProps<T, V> = Omit<InputGroupProps<T, V>, "error">;