@frontify/fondue 12.0.0-beta.151 → 12.0.0-beta.152

package/dist/components/ColorPicker/ColorInput.es.js

@@ -1,4 +1,4 @@
-import { TextInputType as g } from "../TextInput/TextInput.es.js";
+import { TextInputType as b } from "../TextInput/TextInput.es.js";
 import { useMemoizedId as k } from "../../hooks/useMemoizedId.es.js";
 import { useFocusRing as y } from "@react-aria/focus";
 import { FOCUS_STYLE as R } from "../../utilities/focusStyle.es.js";
@@ -9,17 +9,17 @@ const T = ({
   min: e,
   max: l,
   decorator: i,
-  onChange: o,
-  onEnterPressed: w,
+  onChange: w,
+  onEnterPressed: o,
   size: c,
   onBlur: u,
   value: m = "",
   decoratorPosition: a = "Left",
-  type: p = g.Text
+  type: p = b.Text
 }) => {
-  const { isFocusVisible: f, focusProps: d } = y({ within: !0, isTextInput: !0 }), s = v(null), h = (t) => {
-    const { key: x, shiftKey: b } = t;
-    x === "Enter" && !b && w && w(t);
+  const { isFocusVisible: f, focusProps: d } = y({ within: !0, isTextInput: !0 }), s = v(null), g = (t) => {
+    const { key: h, shiftKey: x } = t;
+    h === "Enter" && !x && o && o(t);
   };
   return /* @__PURE__ */ r.createElement(
     "div",
@@ -46,15 +46,15 @@ const T = ({
           id: k(),
           ref: s,
           className: n([
-            "tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-text-black tw-placeholder-black-60 dark:tw-text-white",
+            "tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-text-black tw-placeholder-black-60 dark:tw-text-white !tw-ring-0",
             a === "Right" && "tw-text-right"
           ]),
           onClick: () => {
             var t;
             return (t = s.current) == null ? void 0 : t.focus();
           },
-          onKeyDown: h,
-          onChange: (t) => o && o(t.currentTarget.value),
+          onKeyDown: g,
+          onChange: (t) => w && w(t.currentTarget.value),
           onBlur: u,
           value: m,
           type: p,

package/dist/components/ColorPicker/ColorInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.es.js","sources":["../../../src/components/ColorPicker/ColorInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextInputBaseProps, TextInputType } from '@components/TextInput/TextInput';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, KeyboardEvent, useRef } from 'react';\n\nexport type ColorInputProps = { min?: number; max?: number; decoratorPosition?: DecoratorPosition } & Pick<\n    TextInputBaseProps,\n    'decorator' | 'value' | 'onChange' | 'type' | 'size' | 'onBlur' | 'onEnterPressed'\n>;\n\nexport enum DecoratorPosition {\n    Left = 'Left',\n    Right = 'Right',\n}\n\nexport const ColorInput: FC<ColorInputProps> = ({\n    min,\n    max,\n    decorator,\n    onChange,\n    onEnterPressed,\n    size,\n    onBlur,\n    value = '',\n    decoratorPosition = DecoratorPosition.Left,\n    type = TextInputType.Text,\n}) => {\n    const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n    const inputElement = useRef<HTMLInputElement | null>(null);\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        const { key, shiftKey } = event;\n        if (key === 'Enter' && !shiftKey) {\n            onEnterPressed && onEnterPressed(event);\n        }\n    };\n\n    return (\n        <div\n            {...focusProps}\n            className={merge([\n                'tw-flex tw-items-center tw-h-9 tw-px-2 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent focus-within:tw-border-black-90 tw-border-black-20',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            data-test-id=\"color-input\"\n        >\n            <div\n                className={merge([\n                    'tw-flex tw-gap-1',\n                    decoratorPosition === DecoratorPosition.Right && 'tw-flex-row-reverse',\n                ])}\n            >\n                {decorator && (\n                    <div className=\"tw-flex tw-items-center tw-justify-center tw-text-black-80\">{decorator}</div>\n                )}\n                <input\n                    id={useMemoizedId()}\n                    ref={inputElement}\n                    className={merge([\n                        'tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                        decoratorPosition === DecoratorPosition.Right && 'tw-text-right',\n                    ])}\n                    onClick={() => inputElement.current?.focus()}\n                    onKeyDown={handleKeyDown}\n                    onChange={(event) => onChange && onChange(event.currentTarget.value)}\n                    onBlur={onBlur}\n                    value={value}\n                    type={type}\n                    min={min}\n                    max={max}\n                    size={size}\n                />\n            </div>\n        </div>\n    );\n};\nColorInput.displayName = 'FondueColorInput';\n"],"names":["DecoratorPosition","ColorInput","min","max","decorator","onChange","onEnterPressed","size","onBlur","value","decoratorPosition","type","TextInputType","isFocusVisible","focusProps","useFocusRing","inputElement","useRef","handleKeyDown","event","key","shiftKey","React","merge","FOCUS_STYLE","useMemoizedId","_a"],"mappings":";;;;;;AAcY,IAAAA,sBAAAA,OACRA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,IAAkC,CAAC;AAAA,EAC5C,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,mBAAAC,IAAoB;AAAA,EACpB,MAAAC,IAAOC,EAAc;AACzB,MAAM;AACI,QAAA,EAAE,gBAAAC,GAAgB,YAAAC,EAAA,IAAeC,EAAa,EAAE,QAAQ,IAAM,aAAa,GAAA,CAAM,GACjFC,IAAeC,EAAgC,IAAI,GACnDC,IAAgB,CAACC,MAA2C;AACxD,UAAA,EAAE,KAAAC,GAAK,UAAAC,EAAa,IAAAF;AACtB,IAAAC,MAAQ,WAAW,CAACC,KACpBf,KAAkBA,EAAea,CAAK;AAAA,EAC1C;AAIA,SAAA,gBAAAG,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,WAAWS,EAAM;AAAA,QACb;AAAA,QACAV,KAAkBW;AAAA,MAAA,CACrB;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,IAEb,gBAAAF,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAb,MAAsB,WAA2B;AAAA,QAAA,CACpD;AAAA,MAAA;AAAA,MAEAN,KACG,gBAAAkB,EAAA,cAAC,OAAI,EAAA,WAAU,gEAA8DlB,CAAU;AAAA,MAE3F,gBAAAkB,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,IAAIG,EAAc;AAAA,UAClB,KAAKT;AAAA,UACL,WAAWO,EAAM;AAAA,YACb;AAAA,YACAb,MAAsB,WAA2B;AAAA,UAAA,CACpD;AAAA,UACD,SAAS,MAAM;;AAAA,oBAAAgB,IAAAV,EAAa,YAAb,gBAAAU,EAAsB;AAAA;AAAA,UACrC,WAAWR;AAAA,UACX,UAAU,CAACC,MAAUd,KAAYA,EAASc,EAAM,cAAc,KAAK;AAAA,UACnE,QAAAX;AAAA,UACA,OAAAC;AAAA,UACA,MAAAE;AAAA,UACA,KAAAT;AAAA,UACA,KAAAC;AAAA,UACA,MAAAI;AAAA,QAAA;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAN,EAAW,cAAc;"}
+{"version":3,"file":"ColorInput.es.js","sources":["../../../src/components/ColorPicker/ColorInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextInputBaseProps, TextInputType } from '@components/TextInput/TextInput';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, KeyboardEvent, useRef } from 'react';\n\nexport type ColorInputProps = { min?: number; max?: number; decoratorPosition?: DecoratorPosition } & Pick<\n    TextInputBaseProps,\n    'decorator' | 'value' | 'onChange' | 'type' | 'size' | 'onBlur' | 'onEnterPressed'\n>;\n\nexport enum DecoratorPosition {\n    Left = 'Left',\n    Right = 'Right',\n}\n\nexport const ColorInput: FC<ColorInputProps> = ({\n    min,\n    max,\n    decorator,\n    onChange,\n    onEnterPressed,\n    size,\n    onBlur,\n    value = '',\n    decoratorPosition = DecoratorPosition.Left,\n    type = TextInputType.Text,\n}) => {\n    const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n    const inputElement = useRef<HTMLInputElement | null>(null);\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        const { key, shiftKey } = event;\n        if (key === 'Enter' && !shiftKey) {\n            onEnterPressed && onEnterPressed(event);\n        }\n    };\n\n    return (\n        <div\n            {...focusProps}\n            className={merge([\n                'tw-flex tw-items-center tw-h-9 tw-px-2 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent focus-within:tw-border-black-90 tw-border-black-20',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            data-test-id=\"color-input\"\n        >\n            <div\n                className={merge([\n                    'tw-flex tw-gap-1',\n                    decoratorPosition === DecoratorPosition.Right && 'tw-flex-row-reverse',\n                ])}\n            >\n                {decorator && (\n                    <div className=\"tw-flex tw-items-center tw-justify-center tw-text-black-80\">{decorator}</div>\n                )}\n                <input\n                    id={useMemoizedId()}\n                    ref={inputElement}\n                    className={merge([\n                        'tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-text-black tw-placeholder-black-60 dark:tw-text-white !tw-ring-0',\n                        decoratorPosition === DecoratorPosition.Right && 'tw-text-right',\n                    ])}\n                    onClick={() => inputElement.current?.focus()}\n                    onKeyDown={handleKeyDown}\n                    onChange={(event) => onChange && onChange(event.currentTarget.value)}\n                    onBlur={onBlur}\n                    value={value}\n                    type={type}\n                    min={min}\n                    max={max}\n                    size={size}\n                />\n            </div>\n        </div>\n    );\n};\nColorInput.displayName = 'FondueColorInput';\n"],"names":["DecoratorPosition","ColorInput","min","max","decorator","onChange","onEnterPressed","size","onBlur","value","decoratorPosition","type","TextInputType","isFocusVisible","focusProps","useFocusRing","inputElement","useRef","handleKeyDown","event","key","shiftKey","React","merge","FOCUS_STYLE","useMemoizedId","_a"],"mappings":";;;;;;AAcY,IAAAA,sBAAAA,OACRA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,IAAkC,CAAC;AAAA,EAC5C,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,mBAAAC,IAAoB;AAAA,EACpB,MAAAC,IAAOC,EAAc;AACzB,MAAM;AACI,QAAA,EAAE,gBAAAC,GAAgB,YAAAC,EAAA,IAAeC,EAAa,EAAE,QAAQ,IAAM,aAAa,GAAA,CAAM,GACjFC,IAAeC,EAAgC,IAAI,GACnDC,IAAgB,CAACC,MAA2C;AACxD,UAAA,EAAE,KAAAC,GAAK,UAAAC,EAAa,IAAAF;AACtB,IAAAC,MAAQ,WAAW,CAACC,KACpBf,KAAkBA,EAAea,CAAK;AAAA,EAC1C;AAIA,SAAA,gBAAAG,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,WAAWS,EAAM;AAAA,QACb;AAAA,QACAV,KAAkBW;AAAA,MAAA,CACrB;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,IAEb,gBAAAF,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAb,MAAsB,WAA2B;AAAA,QAAA,CACpD;AAAA,MAAA;AAAA,MAEAN,KACG,gBAAAkB,EAAA,cAAC,OAAI,EAAA,WAAU,gEAA8DlB,CAAU;AAAA,MAE3F,gBAAAkB,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,IAAIG,EAAc;AAAA,UAClB,KAAKT;AAAA,UACL,WAAWO,EAAM;AAAA,YACb;AAAA,YACAb,MAAsB,WAA2B;AAAA,UAAA,CACpD;AAAA,UACD,SAAS,MAAM;;AAAA,oBAAAgB,IAAAV,EAAa,YAAb,gBAAAU,EAAsB;AAAA;AAAA,UACrC,WAAWR;AAAA,UACX,UAAU,CAACC,MAAUd,KAAYA,EAASc,EAAM,cAAc,KAAK;AAAA,UACnE,QAAAX;AAAA,UACA,OAAAC;AAAA,UACA,MAAAE;AAAA,UACA,KAAAT;AAAA,UACA,KAAAC;AAAA,UACA,MAAAI;AAAA,QAAA;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAN,EAAW,cAAc;"}

package/dist/components/LinkChooser/SearchInput.es.js

@@ -56,7 +56,7 @@ const V = L(
           readOnly: !C,
           ref: u,
           className: o([
-            "tw-flex-auto tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-min-w-0 tw-whitespace-nowrap tw-truncate",
+            "tw-flex-auto tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-min-w-0 tw-whitespace-nowrap tw-truncate !tw-ring-0",
             e ? "tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40" : "tw-text-black tw-placeholder-black-60 dark:tw-text-white"
           ]),
           value: b,

package/dist/components/LinkChooser/SearchInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.es.js","sources":["../../../src/components/LinkChooser/SearchInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { FC, MouseEvent, forwardRef } from 'react';\nimport { IconButtonProps, SearchInputProps } from './types';\nimport { IconArrowOutExternal, IconClipboard, IconCross } from '@foundation/Icon/Generated';\n\nexport const SearchInput = forwardRef<HTMLInputElement | null, SearchInputProps>(\n    (\n        {\n            disabled = false,\n            clearable = true,\n            ariaProps,\n            selectedResult,\n            decorator,\n            machineService,\n            onClear,\n            validation = Validation.Default,\n            onClick,\n            onMouseDown,\n        },\n        inputElement,\n    ) => {\n        const { value } = ariaProps;\n        const { isFocusVisible, focusProps, isFocused } = useFocusRing({ isTextInput: true });\n\n        const [, send] = useActor(machineService);\n\n        const isLoading = validation === Validation.Loading;\n\n        return (\n            <div\n                data-test-id=\"link-chooser-search-wrapper\"\n                className={merge([\n                    'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-2.5 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                    disabled\n                        ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                        : merge([\n                              'focus-within:tw-border-black-100',\n                              isFocusVisible && FOCUS_STYLE,\n                              validationClassMap[validation],\n                          ]),\n                ])}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n            >\n                {decorator && (\n                    <div\n                        className={merge([\n                            'tw-flex tw-items-center tw-justify-center tw-flex-none',\n                            disabled || !selectedResult ? 'tw-text-black-40' : 'tw-text-violet-60',\n                        ])}\n                        data-test-id=\"link-chooser-decorator-icon\"\n                    >\n                        {decorator}\n                    </div>\n                )}\n\n                <input\n                    {...mergeProps(focusProps, ariaProps)}\n                    readOnly={!isFocused}\n                    ref={inputElement}\n                    className={merge([\n                        'tw-flex-auto tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-min-w-0 tw-whitespace-nowrap tw-truncate',\n                        disabled\n                            ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                            : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                    ])}\n                    value={value}\n                    disabled={disabled}\n                    data-test-id=\"link-chooser-search-input\"\n                />\n                {selectedResult && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-preview-icon\"\n                        title=\"Preview link\"\n                        ariaLabel=\"preview link\"\n                        icon={<IconArrowOutExternal />}\n                        onClick={() => send('OPEN_PREVIEW')}\n                    />\n                )}\n                {selectedResult && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-copy-icon\"\n                        title=\"Copy text to clipboard\"\n                        ariaLabel=\"copy text to clipboard\"\n                        icon={<IconClipboard />}\n                        onClick={() => send('COPY_TO_CLIPBOARD')}\n                    />\n                )}\n                {`${value}`.length > 0 && clearable && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-clear-icon\"\n                        title=\"Clear text input\"\n                        ariaLabel=\"clear text input\"\n                        icon={<IconCross />}\n                        isComboBoxControl\n                        onClick={onClear}\n                    />\n                )}\n                {isLoading && (\n                    <span className=\"tw-flex tw-flex-none tw-justify-center tw-align-center\">\n                        <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                    </span>\n                )}\n            </div>\n        );\n    },\n);\nSearchInput.displayName = 'SearchInput';\n\nconst IconButton: FC<IconButtonProps> = ({ disabled, title, ariaLabel, testId, icon, onClick, isComboBoxControl }) => {\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        onClick && onClick();\n    };\n\n    return (\n        <button\n            className={merge([\n                'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-flex-none',\n                disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-80  hover:tw-text-black-100',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            data-test-id={testId}\n            title={title}\n            aria-label={ariaLabel}\n            data-combo-box-control={isComboBoxControl}\n            disabled={disabled}\n            onClick={handleClick}\n            type=\"button\"\n            {...focusProps}\n        >\n            {icon}\n        </button>\n    );\n};\n"],"names":["SearchInput","forwardRef","disabled","clearable","ariaProps","selectedResult","decorator","machineService","onClear","validation","Validation","onClick","onMouseDown","inputElement","value","isFocusVisible","focusProps","isFocused","useFocusRing","send","useActor","isLoading","React","merge","FOCUS_STYLE","validationClassMap","mergeProps","IconButton","IconArrowOutExternal","IconClipboard","IconCross","LoadingCircle","LoadingCircleSize","title","ariaLabel","testId","icon","isComboBoxControl","handleClick","event"],"mappings":"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"}
+{"version":3,"file":"SearchInput.es.js","sources":["../../../src/components/LinkChooser/SearchInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { FC, MouseEvent, forwardRef } from 'react';\nimport { IconButtonProps, SearchInputProps } from './types';\nimport { IconArrowOutExternal, IconClipboard, IconCross } from '@foundation/Icon/Generated';\n\nexport const SearchInput = forwardRef<HTMLInputElement | null, SearchInputProps>(\n    (\n        {\n            disabled = false,\n            clearable = true,\n            ariaProps,\n            selectedResult,\n            decorator,\n            machineService,\n            onClear,\n            validation = Validation.Default,\n            onClick,\n            onMouseDown,\n        },\n        inputElement,\n    ) => {\n        const { value } = ariaProps;\n        const { isFocusVisible, focusProps, isFocused } = useFocusRing({ isTextInput: true });\n\n        const [, send] = useActor(machineService);\n\n        const isLoading = validation === Validation.Loading;\n\n        return (\n            <div\n                data-test-id=\"link-chooser-search-wrapper\"\n                className={merge([\n                    'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-2.5 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                    disabled\n                        ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                        : merge([\n                              'focus-within:tw-border-black-100',\n                              isFocusVisible && FOCUS_STYLE,\n                              validationClassMap[validation],\n                          ]),\n                ])}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n            >\n                {decorator && (\n                    <div\n                        className={merge([\n                            'tw-flex tw-items-center tw-justify-center tw-flex-none',\n                            disabled || !selectedResult ? 'tw-text-black-40' : 'tw-text-violet-60',\n                        ])}\n                        data-test-id=\"link-chooser-decorator-icon\"\n                    >\n                        {decorator}\n                    </div>\n                )}\n\n                <input\n                    {...mergeProps(focusProps, ariaProps)}\n                    readOnly={!isFocused}\n                    ref={inputElement}\n                    className={merge([\n                        'tw-flex-auto tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-min-w-0 tw-whitespace-nowrap tw-truncate !tw-ring-0',\n                        disabled\n                            ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                            : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                    ])}\n                    value={value}\n                    disabled={disabled}\n                    data-test-id=\"link-chooser-search-input\"\n                />\n                {selectedResult && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-preview-icon\"\n                        title=\"Preview link\"\n                        ariaLabel=\"preview link\"\n                        icon={<IconArrowOutExternal />}\n                        onClick={() => send('OPEN_PREVIEW')}\n                    />\n                )}\n                {selectedResult && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-copy-icon\"\n                        title=\"Copy text to clipboard\"\n                        ariaLabel=\"copy text to clipboard\"\n                        icon={<IconClipboard />}\n                        onClick={() => send('COPY_TO_CLIPBOARD')}\n                    />\n                )}\n                {`${value}`.length > 0 && clearable && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-clear-icon\"\n                        title=\"Clear text input\"\n                        ariaLabel=\"clear text input\"\n                        icon={<IconCross />}\n                        isComboBoxControl\n                        onClick={onClear}\n                    />\n                )}\n                {isLoading && (\n                    <span className=\"tw-flex tw-flex-none tw-justify-center tw-align-center\">\n                        <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                    </span>\n                )}\n            </div>\n        );\n    },\n);\nSearchInput.displayName = 'SearchInput';\n\nconst IconButton: FC<IconButtonProps> = ({ disabled, title, ariaLabel, testId, icon, onClick, isComboBoxControl }) => {\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        onClick && onClick();\n    };\n\n    return (\n        <button\n            className={merge([\n                'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-flex-none',\n                disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-80  hover:tw-text-black-100',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            data-test-id={testId}\n            title={title}\n            aria-label={ariaLabel}\n            data-combo-box-control={isComboBoxControl}\n            disabled={disabled}\n            onClick={handleClick}\n            type=\"button\"\n            {...focusProps}\n        >\n            {icon}\n        </button>\n    );\n};\n"],"names":["SearchInput","forwardRef","disabled","clearable","ariaProps","selectedResult","decorator","machineService","onClear","validation","Validation","onClick","onMouseDown","inputElement","value","isFocusVisible","focusProps","isFocused","useFocusRing","send","useActor","isLoading","React","merge","FOCUS_STYLE","validationClassMap","mergeProps","IconButton","IconArrowOutExternal","IconClipboard","IconCross","LoadingCircle","LoadingCircleSize","title","ariaLabel","testId","icon","isComboBoxControl","handleClick","event"],"mappings":"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"}

package/dist/components/MultiSelect/MultiSelect.es.js

@@ -130,7 +130,7 @@ const _e = ({
         "input",
         {
           ref: k,
-          className: "focus:tw-outline-0 tw-text-s tw-bg-transparent",
+          className: "focus:tw-outline-0 tw-text-s tw-bg-transparent !tw-ring-0",
           style: { maxWidth: te },
           placeholder: o.length === 0 ? f : S,
           onChange: ae

package/dist/components/MultiSelect/MultiSelect.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger';\nimport { Text } from '@typography/Text';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { ChangeEvent, FC, KeyboardEvent, useEffect, useRef, useState } from 'react';\nimport { getInputWidth, getPaddingClasses } from './helpers';\nimport { Menu } from '@components/Menu';\nimport { MenuItem } from '@components/MenuItem';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { DefaultItem, NoSearchResults, OptionalItems } from './SelectMenuItems';\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@components/Dropdown/useDropdownAutoHeight';\nimport { DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT } from '@components/Dropdown/Dropdown';\n\nexport enum MultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\nexport enum MultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\nexport enum MultiSelectEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n}\n\nexport type MultiSelectItem = {\n    value: string;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    avatar?: React.ReactNode;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\nexport type MultiSelectProps = {\n    items: MultiSelectItem[];\n    activeItemKeys: (string | number)[];\n    disabled?: boolean;\n    onSelectionChange: (keys: (string | number)[]) => void;\n    ariaLabel?: string;\n    label?: string;\n    placeholder?: string;\n    type?: MultiSelectType;\n    size?: MultiSelectSize;\n    validation?: Validation;\n    emphasis?: MultiSelectEmphasis;\n    decorator?: React.ReactNode;\n    filterable?: boolean;\n    filterLabel?: string;\n    noResultsLabel?: string;\n    summarizedLabel?: string;\n    indeterminateItemKeys?: (string | number)[];\n    flip?: boolean;\n};\n\nexport type Item = {\n    label: string;\n    value: string;\n    avatar?: React.ReactNode;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\nexport const MultiSelect: FC<MultiSelectProps> = ({\n    items,\n    activeItemKeys,\n    onSelectionChange,\n    ariaLabel = 'Select list',\n    disabled = false,\n    placeholder,\n    label,\n    filterLabel,\n    noResultsLabel,\n    type = MultiSelectType.Default,\n    size = MultiSelectSize.Medium,\n    validation = Validation.Default,\n    emphasis = MultiSelectEmphasis.Default,\n    decorator = null,\n    filterable = false,\n    summarizedLabel: summarizedLabelFromProps,\n    indeterminateItemKeys,\n    flip = false,\n}) => {\n    const [open, setOpen] = useState(false);\n    const [checkboxes, setCheckboxes] = useState<Item[]>([]);\n    const hasResults = !!checkboxes.find((item) => !item.isCategory && !item.isDivider);\n    const multiSelectRef = useRef<HTMLDivElement | null>(null);\n\n    const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null | HTMLDivElement>(null);\n    const [triggerRef, setTriggerRef] = useState<HTMLDivElement | null>(null);\n\n    const filterInputRef = useRef<HTMLInputElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const { maxHeight } = useDropdownAutoHeight({ current: triggerRef }, { isOpen: open, autoResize: true });\n\n    const hasSelectedItems = activeItemKeys.length > 0;\n    const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n    const inputWidth = getInputWidth(hasSelectedItems, filterLabel, placeholder);\n\n    const handleClose = () => setOpen(false);\n\n    useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement, multiSelectMenuRef as HTMLElement]);\n\n    const heightIsReady = maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const toggleOpen = () => setOpen((open) => !open);\n\n    const { buttonProps } = useButton(\n        {\n            onPress: toggleOpen,\n            onKeyDown: (e) => {\n                if (e.key === 'Escape') {\n                    setOpen(false);\n                }\n            },\n            elementType: 'div',\n        },\n        { current: triggerRef },\n    );\n\n    const toggleSelection = (key: string | number) => {\n        const keySet = new Set(activeItemKeys);\n\n        if (keySet.has(key)) {\n            keySet.delete(key);\n        } else {\n            keySet.add(key);\n        }\n\n        onSelectionChange(Array.from(keySet));\n    };\n\n    const handleSpacebarToggle = (e: KeyboardEvent<HTMLDivElement>) => {\n        if (e.code === 'Space' && (filterInputRef.current !== document.activeElement || !filterable)) {\n            toggleOpen();\n        }\n    };\n\n    const getDecoratorClasses = () => {\n        if (emphasis === MultiSelectEmphasis.Weak) {\n            return hasSelectedItems ? '' : 'tw-text-text-weak';\n        }\n\n        return '';\n    };\n\n    const getTagType = () => {\n        if (emphasis === MultiSelectEmphasis.Weak || !open) {\n            return TagType.Selected;\n        }\n        return TagType.SelectedWithFocus;\n    };\n\n    const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {\n        setCheckboxes(\n            items\n                .filter((item) => {\n                    if (item.isCategory || item.isDivider) {\n                        return true;\n                    }\n\n                    return item.value.toLowerCase().includes(e.currentTarget.value.toLowerCase());\n                })\n                .map((item) => ({ ...item, label: item.value })),\n        );\n    };\n\n    useEffect(() => {\n        setCheckboxes(\n            items.map((item) => {\n                const checkboxBaseItem = { ...item, label: item.value };\n                if (indeterminateItemKeys?.includes(item.value)) {\n                    return { ...checkboxBaseItem, state: CheckboxState.Mixed };\n                }\n                return checkboxBaseItem;\n            }),\n        );\n    }, [items, indeterminateItemKeys]);\n\n    const popperInstance = usePopper(triggerRef, multiSelectMenuRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, 8],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    useEffect(() => {\n        if (popperInstance.update) {\n            popperInstance.update();\n        }\n    }, [activeItemKeys]);\n\n    return (\n        <div className=\"tw-relative\" ref={multiSelectRef}>\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={isFocusVisible}\n                isOpen={open}\n                validation={validation}\n                emphasis={emphasis === MultiSelectEmphasis.Default ? TriggerEmphasis.Default : TriggerEmphasis.Weak}\n            >\n                <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])} ref={setTriggerRef}>\n                    <div\n                        className=\"tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0\"\n                        onClick={(e) => {\n                            if (e.target === filterInputRef.current && open) {\n                                return;\n                            }\n                            toggleOpen();\n                        }}\n                        role=\"button\"\n                        {...focusProps}\n                        tabIndex={0}\n                        onKeyDown={handleSpacebarToggle}\n                    >\n                        <div className=\"tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]\">\n                            {decorator && <div className={getDecoratorClasses()}>{decorator}</div>}\n                            {label && hasSelectedItems && <Text weight=\"strong\">{label}</Text>}\n                            {type === MultiSelectType.Default &&\n                                activeItemKeys.map((key) => (\n                                    <Tag\n                                        key={key}\n                                        type={getTagType()}\n                                        label={key.toString()}\n                                        size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                        onClick={() => toggleSelection(key)}\n                                    />\n                                ))}\n\n                            {type === MultiSelectType.Summarized && (hasSelectedItems || summarizedLabelFromProps) && (\n                                <Tag\n                                    type={getTagType()}\n                                    label={summarizedLabel}\n                                    size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                    onClick={\n                                        indeterminateItemKeys?.length === 0 ? () => onSelectionChange([]) : undefined\n                                    }\n                                />\n                            )}\n\n                            {!filterable && activeItemKeys.length === 0 && placeholder && (\n                                <Text color=\"weak\">{placeholder}</Text>\n                            )}\n                        </div>\n                        {filterable && (\n                            <input\n                                ref={filterInputRef}\n                                className=\"focus:tw-outline-0 tw-text-s tw-bg-transparent\"\n                                style={{ maxWidth: inputWidth }}\n                                placeholder={activeItemKeys.length === 0 ? placeholder : filterLabel}\n                                onChange={handleFilterChange}\n                            />\n                        )}\n                    </div>\n                </div>\n            </Trigger>\n\n            {open &&\n                heightIsReady &&\n                emphasis === MultiSelectEmphasis.Default &&\n                createPortal(\n                    <div\n                        ref={setMultiSelectMenuRef}\n                        className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-30 tw-bg-base tw-min-w-[18rem]\"\n                        key=\"content\"\n                        style={{\n                            ...popperInstance.styles.popper,\n                            width: triggerRef?.getBoundingClientRect().width,\n                        }}\n                        {...popperInstance.attributes.popper}\n                    >\n                        <FocusScope restoreFocus>\n                            <div\n                                className=\"tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative\"\n                                style={{ maxHeight }}\n                            >\n                                <Checklist\n                                    activeValues={activeItemKeys.map((key) => key.toString())}\n                                    setActiveValues={onSelectionChange}\n                                    checkboxes={checkboxes.filter((item) => !item.isDivider && !item.isCategory)}\n                                    direction={ChecklistDirection.Vertical}\n                                    ariaLabel={ariaLabel}\n                                />\n                            </div>\n                        </FocusScope>\n                    </div>,\n                    document.body,\n                )}\n            {open &&\n                heightIsReady &&\n                emphasis === MultiSelectEmphasis.Weak &&\n                createPortal(\n                    <AnimatePresence>\n                        <motion.div\n                            ref={setMultiSelectMenuRef}\n                            style={{\n                                ...popperInstance.styles.popper,\n                                width: 'fit-content',\n                                zIndex: 30,\n                            }}\n                            {...popperInstance.attributes.popper}\n                            initial={{ height: DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT }}\n                            animate={{ height: 'auto' }}\n                            transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n                        >\n                            <Menu open={open} onClose={handleClose}>\n                                {checkboxes.length > 0 && hasResults ? (\n                                    checkboxes.map((item, index) => {\n                                        const { label, value, avatar, imgSrc } = item;\n                                        const isChecked = !!activeItemKeys.find((key) => key === value);\n                                        const handleMenuItemClick = () => toggleSelection(label);\n\n                                        if (item.isCategory || item.isDivider) {\n                                            return (\n                                                <OptionalItems\n                                                    key={value + item}\n                                                    {...{\n                                                        checkboxes,\n                                                        index,\n                                                    }}\n                                                />\n                                            );\n                                        }\n\n                                        return (\n                                            <MenuItem checked={isChecked} onClick={handleMenuItemClick} key={value}>\n                                                <DefaultItem {...{ label, value, avatar, imgSrc, isChecked }} />\n                                            </MenuItem>\n                                        );\n                                    })\n                                ) : (\n                                    <NoSearchResults label={noResultsLabel} />\n                                )}\n                            </Menu>\n                        </motion.div>\n                    </AnimatePresence>,\n                    document.body,\n                )}\n        </div>\n    );\n};\nMultiSelect.displayName = 'FondueMultiSelect';\n"],"names":["MultiSelectType","MultiSelectSize","MultiSelectEmphasis","MultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","filterLabel","noResultsLabel","type","size","validation","Validation","emphasis","decorator","filterable","summarizedLabelFromProps","indeterminateItemKeys","flip","open","setOpen","useState","checkboxes","setCheckboxes","hasResults","item","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","filterInputRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","inputWidth","getInputWidth","handleClose","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpacebarToggle","getDecoratorClasses","getTagType","TagType","handleFilterChange","useEffect","checkboxBaseItem","CheckboxState","popperInstance","usePopper","React","Trigger","TriggerEmphasis","merge","getPaddingClasses","Text","Tag","TagSize","createPortal","FocusScope","Checklist","ChecklistDirection","AnimatePresence","motion","DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT","Menu","index","value","avatar","imgSrc","isChecked","handleMenuItemClick","OptionalItems","MenuItem","DefaultItem","NoSearchResults"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger';\nimport { Text } from '@typography/Text';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { ChangeEvent, FC, KeyboardEvent, useEffect, useRef, useState } from 'react';\nimport { getInputWidth, getPaddingClasses } from './helpers';\nimport { Menu } from '@components/Menu';\nimport { MenuItem } from '@components/MenuItem';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { DefaultItem, NoSearchResults, OptionalItems } from './SelectMenuItems';\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@components/Dropdown/useDropdownAutoHeight';\nimport { DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT } from '@components/Dropdown/Dropdown';\n\nexport enum MultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\nexport enum MultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\nexport enum MultiSelectEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n}\n\nexport type MultiSelectItem = {\n    value: string;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    avatar?: React.ReactNode;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\nexport type MultiSelectProps = {\n    items: MultiSelectItem[];\n    activeItemKeys: (string | number)[];\n    disabled?: boolean;\n    onSelectionChange: (keys: (string | number)[]) => void;\n    ariaLabel?: string;\n    label?: string;\n    placeholder?: string;\n    type?: MultiSelectType;\n    size?: MultiSelectSize;\n    validation?: Validation;\n    emphasis?: MultiSelectEmphasis;\n    decorator?: React.ReactNode;\n    filterable?: boolean;\n    filterLabel?: string;\n    noResultsLabel?: string;\n    summarizedLabel?: string;\n    indeterminateItemKeys?: (string | number)[];\n    flip?: boolean;\n};\n\nexport type Item = {\n    label: string;\n    value: string;\n    avatar?: React.ReactNode;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\nexport const MultiSelect: FC<MultiSelectProps> = ({\n    items,\n    activeItemKeys,\n    onSelectionChange,\n    ariaLabel = 'Select list',\n    disabled = false,\n    placeholder,\n    label,\n    filterLabel,\n    noResultsLabel,\n    type = MultiSelectType.Default,\n    size = MultiSelectSize.Medium,\n    validation = Validation.Default,\n    emphasis = MultiSelectEmphasis.Default,\n    decorator = null,\n    filterable = false,\n    summarizedLabel: summarizedLabelFromProps,\n    indeterminateItemKeys,\n    flip = false,\n}) => {\n    const [open, setOpen] = useState(false);\n    const [checkboxes, setCheckboxes] = useState<Item[]>([]);\n    const hasResults = !!checkboxes.find((item) => !item.isCategory && !item.isDivider);\n    const multiSelectRef = useRef<HTMLDivElement | null>(null);\n\n    const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null | HTMLDivElement>(null);\n    const [triggerRef, setTriggerRef] = useState<HTMLDivElement | null>(null);\n\n    const filterInputRef = useRef<HTMLInputElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const { maxHeight } = useDropdownAutoHeight({ current: triggerRef }, { isOpen: open, autoResize: true });\n\n    const hasSelectedItems = activeItemKeys.length > 0;\n    const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n    const inputWidth = getInputWidth(hasSelectedItems, filterLabel, placeholder);\n\n    const handleClose = () => setOpen(false);\n\n    useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement, multiSelectMenuRef as HTMLElement]);\n\n    const heightIsReady = maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const toggleOpen = () => setOpen((open) => !open);\n\n    const { buttonProps } = useButton(\n        {\n            onPress: toggleOpen,\n            onKeyDown: (e) => {\n                if (e.key === 'Escape') {\n                    setOpen(false);\n                }\n            },\n            elementType: 'div',\n        },\n        { current: triggerRef },\n    );\n\n    const toggleSelection = (key: string | number) => {\n        const keySet = new Set(activeItemKeys);\n\n        if (keySet.has(key)) {\n            keySet.delete(key);\n        } else {\n            keySet.add(key);\n        }\n\n        onSelectionChange(Array.from(keySet));\n    };\n\n    const handleSpacebarToggle = (e: KeyboardEvent<HTMLDivElement>) => {\n        if (e.code === 'Space' && (filterInputRef.current !== document.activeElement || !filterable)) {\n            toggleOpen();\n        }\n    };\n\n    const getDecoratorClasses = () => {\n        if (emphasis === MultiSelectEmphasis.Weak) {\n            return hasSelectedItems ? '' : 'tw-text-text-weak';\n        }\n\n        return '';\n    };\n\n    const getTagType = () => {\n        if (emphasis === MultiSelectEmphasis.Weak || !open) {\n            return TagType.Selected;\n        }\n        return TagType.SelectedWithFocus;\n    };\n\n    const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {\n        setCheckboxes(\n            items\n                .filter((item) => {\n                    if (item.isCategory || item.isDivider) {\n                        return true;\n                    }\n\n                    return item.value.toLowerCase().includes(e.currentTarget.value.toLowerCase());\n                })\n                .map((item) => ({ ...item, label: item.value })),\n        );\n    };\n\n    useEffect(() => {\n        setCheckboxes(\n            items.map((item) => {\n                const checkboxBaseItem = { ...item, label: item.value };\n                if (indeterminateItemKeys?.includes(item.value)) {\n                    return { ...checkboxBaseItem, state: CheckboxState.Mixed };\n                }\n                return checkboxBaseItem;\n            }),\n        );\n    }, [items, indeterminateItemKeys]);\n\n    const popperInstance = usePopper(triggerRef, multiSelectMenuRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, 8],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    useEffect(() => {\n        if (popperInstance.update) {\n            popperInstance.update();\n        }\n    }, [activeItemKeys]);\n\n    return (\n        <div className=\"tw-relative\" ref={multiSelectRef}>\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={isFocusVisible}\n                isOpen={open}\n                validation={validation}\n                emphasis={emphasis === MultiSelectEmphasis.Default ? TriggerEmphasis.Default : TriggerEmphasis.Weak}\n            >\n                <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])} ref={setTriggerRef}>\n                    <div\n                        className=\"tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0\"\n                        onClick={(e) => {\n                            if (e.target === filterInputRef.current && open) {\n                                return;\n                            }\n                            toggleOpen();\n                        }}\n                        role=\"button\"\n                        {...focusProps}\n                        tabIndex={0}\n                        onKeyDown={handleSpacebarToggle}\n                    >\n                        <div className=\"tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]\">\n                            {decorator && <div className={getDecoratorClasses()}>{decorator}</div>}\n                            {label && hasSelectedItems && <Text weight=\"strong\">{label}</Text>}\n                            {type === MultiSelectType.Default &&\n                                activeItemKeys.map((key) => (\n                                    <Tag\n                                        key={key}\n                                        type={getTagType()}\n                                        label={key.toString()}\n                                        size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                        onClick={() => toggleSelection(key)}\n                                    />\n                                ))}\n\n                            {type === MultiSelectType.Summarized && (hasSelectedItems || summarizedLabelFromProps) && (\n                                <Tag\n                                    type={getTagType()}\n                                    label={summarizedLabel}\n                                    size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                    onClick={\n                                        indeterminateItemKeys?.length === 0 ? () => onSelectionChange([]) : undefined\n                                    }\n                                />\n                            )}\n\n                            {!filterable && activeItemKeys.length === 0 && placeholder && (\n                                <Text color=\"weak\">{placeholder}</Text>\n                            )}\n                        </div>\n                        {filterable && (\n                            <input\n                                ref={filterInputRef}\n                                className=\"focus:tw-outline-0 tw-text-s tw-bg-transparent !tw-ring-0\"\n                                style={{ maxWidth: inputWidth }}\n                                placeholder={activeItemKeys.length === 0 ? placeholder : filterLabel}\n                                onChange={handleFilterChange}\n                            />\n                        )}\n                    </div>\n                </div>\n            </Trigger>\n\n            {open &&\n                heightIsReady &&\n                emphasis === MultiSelectEmphasis.Default &&\n                createPortal(\n                    <div\n                        ref={setMultiSelectMenuRef}\n                        className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-30 tw-bg-base tw-min-w-[18rem]\"\n                        key=\"content\"\n                        style={{\n                            ...popperInstance.styles.popper,\n                            width: triggerRef?.getBoundingClientRect().width,\n                        }}\n                        {...popperInstance.attributes.popper}\n                    >\n                        <FocusScope restoreFocus>\n                            <div\n                                className=\"tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative\"\n                                style={{ maxHeight }}\n                            >\n                                <Checklist\n                                    activeValues={activeItemKeys.map((key) => key.toString())}\n                                    setActiveValues={onSelectionChange}\n                                    checkboxes={checkboxes.filter((item) => !item.isDivider && !item.isCategory)}\n                                    direction={ChecklistDirection.Vertical}\n                                    ariaLabel={ariaLabel}\n                                />\n                            </div>\n                        </FocusScope>\n                    </div>,\n                    document.body,\n                )}\n            {open &&\n                heightIsReady &&\n                emphasis === MultiSelectEmphasis.Weak &&\n                createPortal(\n                    <AnimatePresence>\n                        <motion.div\n                            ref={setMultiSelectMenuRef}\n                            style={{\n                                ...popperInstance.styles.popper,\n                                width: 'fit-content',\n                                zIndex: 30,\n                            }}\n                            {...popperInstance.attributes.popper}\n                            initial={{ height: DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT }}\n                            animate={{ height: 'auto' }}\n                            transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n                        >\n                            <Menu open={open} onClose={handleClose}>\n                                {checkboxes.length > 0 && hasResults ? (\n                                    checkboxes.map((item, index) => {\n                                        const { label, value, avatar, imgSrc } = item;\n                                        const isChecked = !!activeItemKeys.find((key) => key === value);\n                                        const handleMenuItemClick = () => toggleSelection(label);\n\n                                        if (item.isCategory || item.isDivider) {\n                                            return (\n                                                <OptionalItems\n                                                    key={value + item}\n                                                    {...{\n                                                        checkboxes,\n                                                        index,\n                                                    }}\n                                                />\n                                            );\n                                        }\n\n                                        return (\n                                            <MenuItem checked={isChecked} onClick={handleMenuItemClick} key={value}>\n                                                <DefaultItem {...{ label, value, avatar, imgSrc, isChecked }} />\n                                            </MenuItem>\n                                        );\n                                    })\n                                ) : (\n                                    <NoSearchResults label={noResultsLabel} />\n                                )}\n                            </Menu>\n                        </motion.div>\n                    </AnimatePresence>,\n                    document.body,\n                )}\n        </div>\n    );\n};\nMultiSelect.displayName = 'FondueMultiSelect';\n"],"names":["MultiSelectType","MultiSelectSize","MultiSelectEmphasis","MultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","filterLabel","noResultsLabel","type","size","validation","Validation","emphasis","decorator","filterable","summarizedLabelFromProps","indeterminateItemKeys","flip","open","setOpen","useState","checkboxes","setCheckboxes","hasResults","item","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","filterInputRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","inputWidth","getInputWidth","handleClose","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpacebarToggle","getDecoratorClasses","getTagType","TagType","handleFilterChange","useEffect","checkboxBaseItem","CheckboxState","popperInstance","usePopper","React","Trigger","TriggerEmphasis","merge","getPaddingClasses","Text","Tag","TagSize","createPortal","FocusScope","Checklist","ChecklistDirection","AnimatePresence","motion","DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT","Menu","index","value","avatar","imgSrc","isChecked","handleMenuItemClick","OptionalItems","MenuItem","DefaultItem","NoSearchResults"],"mappings":"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"}

package/dist/components/TextInput/TextInput.es.js

@@ -31,8 +31,8 @@ const lt = ({
   onChange: w,
   onEnterPressed: k,
   onBlur: O,
-  onClear: E,
-  onFocus: g,
+  onClear: g,
+  onFocus: E,
   size: z,
   spellcheck: y,
   readonly: b,
@@ -86,7 +86,7 @@ const lt = ({
         id: G(s),
         ref: l,
         className: o([
-          "tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows",
+          "tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows !tw-ring-0",
           r || b ? "tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40" : "tw-text-black tw-placeholder-black-60 dark:tw-text-white"
         ]),
         onClick: () => {
@@ -103,7 +103,7 @@ const lt = ({
         readOnly: b,
         disabled: r,
         onFocus: (e) => {
-          M && e.target.select(), g && g(e);
+          M && e.target.select(), E && E(e);
         },
         autoComplete: j ? "on" : "off",
         size: z,
@@ -121,7 +121,7 @@ const lt = ({
         ]),
         onClick: () => {
           var e, v;
-          (e = l.current) == null || e.focus(), (v = l.current) == null || v.setAttribute("value", ""), w && w(""), E && E();
+          (e = l.current) == null || e.focus(), (v = l.current) == null || v.setAttribute("value", ""), w && w(""), g && g();
         },
         "data-test-id": "clear-icon",
         title: "Clear text input",

package/dist/components/TextInput/TextInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.es.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, FocusEvent, KeyboardEvent, ReactNode, useEffect, useRef, useState } from 'react';\nimport {\n    IconCheckMark,\n    IconClipboard,\n    IconCross,\n    IconCrossCircle,\n    IconExclamationMarkTriangle,\n    IconEye,\n    IconEyeOff,\n} from '@foundation/Icon/Generated';\n\nexport enum TextInputType {\n    Text = 'text',\n    Password = 'password',\n    Number = 'number',\n}\n\nexport type TextInputBaseProps = {\n    id?: string;\n    type?: TextInputType;\n    decorator?: ReactNode;\n    dotted?: boolean;\n    clearable?: boolean;\n    placeholder?: string;\n    required?: boolean;\n    disabled?: boolean;\n    autocomplete?: boolean;\n    readonly?: boolean;\n    validation?: Validation;\n    copyable?: boolean;\n    value?: string;\n    onChange?: (value: string) => void;\n    onEnterPressed?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n    onClear?: () => void;\n    size?: number;\n    spellcheck?: boolean;\n    focusOnMount?: boolean;\n    selectable?: boolean;\n};\n\nexport type TextInputProps =\n    | ({\n          type?: TextInputType.Text;\n          obfuscated?: false;\n      } & TextInputBaseProps)\n    | ({\n          type?: TextInputType.Number;\n          obfuscated?: false;\n          min?: number;\n          max?: number;\n      } & TextInputBaseProps)\n    | ({\n          type: TextInputType.Password;\n          obfuscated?: boolean;\n      } & TextInputBaseProps);\n\nexport const TextInput: FC<TextInputProps> = ({\n    id: propId,\n    type = TextInputType.Text,\n    decorator,\n    validation = Validation.Default,\n    clearable = false,\n    placeholder,\n    required,\n    obfuscated,\n    disabled = false,\n    autocomplete = false,\n    dotted = false,\n    value = '',\n    copyable = false,\n    onChange,\n    onEnterPressed,\n    onBlur,\n    onClear,\n    onFocus,\n    size,\n    spellcheck,\n    readonly,\n    focusOnMount,\n    selectable = false,\n}) => {\n    const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n    const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n\n    const { copy, status } = useCopy();\n\n    const inputElement = useRef<HTMLInputElement | null>(null);\n    const [isObfuscated, setIsObfuscated] = useState(\n        typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n    );\n\n    useEffect(() => {\n        setTimeout(() => {\n            focusOnMount && inputElement.current?.focus();\n        }, 0);\n    }, [focusOnMount]);\n\n    useEffect(() => {\n        if (typeof obfuscated === 'boolean') {\n            setIsObfuscated(obfuscated);\n        }\n    }, [obfuscated]);\n\n    const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            onEnterPressed && onEnterPressed(event);\n        }\n    };\n\n    const getInputType = () => {\n        if (type === TextInputType.Password) {\n            return isObfuscated ? TextInputType.Password : TextInputType.Text;\n        }\n        return type;\n    };\n\n    const spellcheckProp = typeof spellcheck === 'boolean' ? { spellCheck: spellcheck } : null;\n\n    return (\n        <div\n            {...focusProps}\n            className={merge([\n                'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                dotted ? 'tw-border-dashed' : 'tw-border-solid',\n                disabled || readonly\n                    ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                    : merge([\n                          'focus-within:tw-border-black-90 hover:tw-border-black-90',\n                          validationClassMap[validation],\n                          isFocusVisible &&\n                              !clearButtonIsFocusVisible &&\n                              !passwordButtonIsFocusVisible &&\n                              !copyButtonIsFocusVisible &&\n                              FOCUS_STYLE,\n                      ]),\n            ])}\n            data-test-id=\"fondue-text-input-component\"\n        >\n            {decorator && (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-pl-1',\n                        disabled ? 'tw-text-black-60' : 'tw-text-black-80',\n                    ])}\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <input\n                id={useMemoizedId(propId)}\n                ref={inputElement}\n                className={merge([\n                    'tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows',\n                    disabled || readonly\n                        ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                        : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                ])}\n                onClick={() => inputElement.current?.focus()}\n                onChange={(event) => onChange && onChange(event.currentTarget.value)}\n                onBlur={onBlur}\n                onKeyDown={onKeyDown}\n                placeholder={placeholder}\n                value={value}\n                type={getInputType()}\n                required={required}\n                readOnly={readonly}\n                disabled={disabled}\n                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                size={size}\n                data-test-id=\"text-input\"\n                {...spellcheckProp}\n            />\n            {`${value}`.length > 0 && clearable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60  hover:tw-text-black-100',\n                        clearButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => {\n                        inputElement.current?.focus();\n                        inputElement.current?.setAttribute('value', '');\n\n                        onChange && onChange('');\n                        onClear && onClear();\n                    }}\n                    data-test-id=\"clear-icon\"\n                    title=\"Clear text input\"\n                    aria-label=\"clear text input\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...clearButtonFocusProps}\n                >\n                    <IconCross />\n                </button>\n            )}\n            {type === TextInputType.Password && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        passwordButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => setIsObfuscated(!isObfuscated)}\n                    data-test-id=\"visibility-icon\"\n                    title=\"Toggle text visibility\"\n                    type=\"button\"\n                    aria-label={`${isObfuscated ? 'unveil' : 'obfuscate'} text input`}\n                    disabled={disabled}\n                    {...passwordButtonFocusProps}\n                >\n                    {isObfuscated ? <IconEye /> : <IconEyeOff />}\n                </button>\n            )}\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n            {(validation === Validation.Error || validation === Validation.Warning) && (\n                <span\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center',\n                        validation === Validation.Error && 'tw-text-text-negative',\n                        validation === Validation.Warning && 'tw-text-text-warning',\n                    ])}\n                    data-test-id=\"error-state-exclamation-mark-icon\"\n                >\n                    <IconExclamationMarkTriangle />\n                </span>\n            )}\n            {copyable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        copyButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => copy(value)}\n                    data-test-id=\"copy-icon\"\n                    title=\"Copy input text\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...copyButtonFocusProps}\n                >\n                    {status === 'error' && (\n                        <span className=\"tw-text-box-negative-strong\">\n                            <IconCrossCircle />\n                        </span>\n                    )}\n                    {status === 'idle' && <IconClipboard />}\n                    {status === 'success' && (\n                        <span className=\"tw-text-box-positive-strong\">\n                            <IconCheckMark />\n                        </span>\n                    )}\n                </button>\n            )}\n        </div>\n    );\n};\nTextInput.displayName = 'FondueTextInput';\n"],"names":["TextInputType","TextInput","propId","type","decorator","validation","Validation","clearable","placeholder","required","obfuscated","disabled","autocomplete","dotted","value","copyable","onChange","onEnterPressed","onBlur","onClear","onFocus","size","spellcheck","readonly","focusOnMount","selectable","isFocusVisible","focusProps","useFocusRing","clearButtonIsFocusVisible","clearButtonFocusProps","passwordButtonIsFocusVisible","passwordButtonFocusProps","copyButtonIsFocusVisible","copyButtonFocusProps","copy","status","useCopy","inputElement","useRef","isObfuscated","setIsObfuscated","useState","useEffect","_a","onKeyDown","event","getInputType","spellcheckProp","React","merge","validationClassMap","FOCUS_STYLE","useMemoizedId","_b","IconCross","IconEye","IconEyeOff","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle","IconCrossCircle","IconClipboard","IconCheckMark"],"mappings":"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"}
+{"version":3,"file":"TextInput.es.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, FocusEvent, KeyboardEvent, ReactNode, useEffect, useRef, useState } from 'react';\nimport {\n    IconCheckMark,\n    IconClipboard,\n    IconCross,\n    IconCrossCircle,\n    IconExclamationMarkTriangle,\n    IconEye,\n    IconEyeOff,\n} from '@foundation/Icon/Generated';\n\nexport enum TextInputType {\n    Text = 'text',\n    Password = 'password',\n    Number = 'number',\n}\n\nexport type TextInputBaseProps = {\n    id?: string;\n    type?: TextInputType;\n    decorator?: ReactNode;\n    dotted?: boolean;\n    clearable?: boolean;\n    placeholder?: string;\n    required?: boolean;\n    disabled?: boolean;\n    autocomplete?: boolean;\n    readonly?: boolean;\n    validation?: Validation;\n    copyable?: boolean;\n    value?: string;\n    onChange?: (value: string) => void;\n    onEnterPressed?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n    onClear?: () => void;\n    size?: number;\n    spellcheck?: boolean;\n    focusOnMount?: boolean;\n    selectable?: boolean;\n};\n\nexport type TextInputProps =\n    | ({\n          type?: TextInputType.Text;\n          obfuscated?: false;\n      } & TextInputBaseProps)\n    | ({\n          type?: TextInputType.Number;\n          obfuscated?: false;\n          min?: number;\n          max?: number;\n      } & TextInputBaseProps)\n    | ({\n          type: TextInputType.Password;\n          obfuscated?: boolean;\n      } & TextInputBaseProps);\n\nexport const TextInput: FC<TextInputProps> = ({\n    id: propId,\n    type = TextInputType.Text,\n    decorator,\n    validation = Validation.Default,\n    clearable = false,\n    placeholder,\n    required,\n    obfuscated,\n    disabled = false,\n    autocomplete = false,\n    dotted = false,\n    value = '',\n    copyable = false,\n    onChange,\n    onEnterPressed,\n    onBlur,\n    onClear,\n    onFocus,\n    size,\n    spellcheck,\n    readonly,\n    focusOnMount,\n    selectable = false,\n}) => {\n    const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n    const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n\n    const { copy, status } = useCopy();\n\n    const inputElement = useRef<HTMLInputElement | null>(null);\n    const [isObfuscated, setIsObfuscated] = useState(\n        typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n    );\n\n    useEffect(() => {\n        setTimeout(() => {\n            focusOnMount && inputElement.current?.focus();\n        }, 0);\n    }, [focusOnMount]);\n\n    useEffect(() => {\n        if (typeof obfuscated === 'boolean') {\n            setIsObfuscated(obfuscated);\n        }\n    }, [obfuscated]);\n\n    const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            onEnterPressed && onEnterPressed(event);\n        }\n    };\n\n    const getInputType = () => {\n        if (type === TextInputType.Password) {\n            return isObfuscated ? TextInputType.Password : TextInputType.Text;\n        }\n        return type;\n    };\n\n    const spellcheckProp = typeof spellcheck === 'boolean' ? { spellCheck: spellcheck } : null;\n\n    return (\n        <div\n            {...focusProps}\n            className={merge([\n                'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                dotted ? 'tw-border-dashed' : 'tw-border-solid',\n                disabled || readonly\n                    ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                    : merge([\n                          'focus-within:tw-border-black-90 hover:tw-border-black-90',\n                          validationClassMap[validation],\n                          isFocusVisible &&\n                              !clearButtonIsFocusVisible &&\n                              !passwordButtonIsFocusVisible &&\n                              !copyButtonIsFocusVisible &&\n                              FOCUS_STYLE,\n                      ]),\n            ])}\n            data-test-id=\"fondue-text-input-component\"\n        >\n            {decorator && (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-pl-1',\n                        disabled ? 'tw-text-black-60' : 'tw-text-black-80',\n                    ])}\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <input\n                id={useMemoizedId(propId)}\n                ref={inputElement}\n                className={merge([\n                    'tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows !tw-ring-0',\n                    disabled || readonly\n                        ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                        : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                ])}\n                onClick={() => inputElement.current?.focus()}\n                onChange={(event) => onChange && onChange(event.currentTarget.value)}\n                onBlur={onBlur}\n                onKeyDown={onKeyDown}\n                placeholder={placeholder}\n                value={value}\n                type={getInputType()}\n                required={required}\n                readOnly={readonly}\n                disabled={disabled}\n                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                size={size}\n                data-test-id=\"text-input\"\n                {...spellcheckProp}\n            />\n            {`${value}`.length > 0 && clearable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60  hover:tw-text-black-100',\n                        clearButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => {\n                        inputElement.current?.focus();\n                        inputElement.current?.setAttribute('value', '');\n\n                        onChange && onChange('');\n                        onClear && onClear();\n                    }}\n                    data-test-id=\"clear-icon\"\n                    title=\"Clear text input\"\n                    aria-label=\"clear text input\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...clearButtonFocusProps}\n                >\n                    <IconCross />\n                </button>\n            )}\n            {type === TextInputType.Password && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        passwordButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => setIsObfuscated(!isObfuscated)}\n                    data-test-id=\"visibility-icon\"\n                    title=\"Toggle text visibility\"\n                    type=\"button\"\n                    aria-label={`${isObfuscated ? 'unveil' : 'obfuscate'} text input`}\n                    disabled={disabled}\n                    {...passwordButtonFocusProps}\n                >\n                    {isObfuscated ? <IconEye /> : <IconEyeOff />}\n                </button>\n            )}\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n            {(validation === Validation.Error || validation === Validation.Warning) && (\n                <span\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center',\n                        validation === Validation.Error && 'tw-text-text-negative',\n                        validation === Validation.Warning && 'tw-text-text-warning',\n                    ])}\n                    data-test-id=\"error-state-exclamation-mark-icon\"\n                >\n                    <IconExclamationMarkTriangle />\n                </span>\n            )}\n            {copyable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        copyButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => copy(value)}\n                    data-test-id=\"copy-icon\"\n                    title=\"Copy input text\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...copyButtonFocusProps}\n                >\n                    {status === 'error' && (\n                        <span className=\"tw-text-box-negative-strong\">\n                            <IconCrossCircle />\n                        </span>\n                    )}\n                    {status === 'idle' && <IconClipboard />}\n                    {status === 'success' && (\n                        <span className=\"tw-text-box-positive-strong\">\n                            <IconCheckMark />\n                        </span>\n                    )}\n                </button>\n            )}\n        </div>\n    );\n};\nTextInput.displayName = 'FondueTextInput';\n"],"names":["TextInputType","TextInput","propId","type","decorator","validation","Validation","clearable","placeholder","required","obfuscated","disabled","autocomplete","dotted","value","copyable","onChange","onEnterPressed","onBlur","onClear","onFocus","size","spellcheck","readonly","focusOnMount","selectable","isFocusVisible","focusProps","useFocusRing","clearButtonIsFocusVisible","clearButtonFocusProps","passwordButtonIsFocusVisible","passwordButtonFocusProps","copyButtonIsFocusVisible","copyButtonFocusProps","copy","status","useCopy","inputElement","useRef","isObfuscated","setIsObfuscated","useState","useEffect","_a","onKeyDown","event","getInputType","spellcheckProp","React","merge","validationClassMap","FOCUS_STYLE","useMemoizedId","_b","IconCross","IconEye","IconEyeOff","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle","IconCrossCircle","IconClipboard","IconCheckMark"],"mappings":"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"}