@chayns-components/core 5.0.0-beta.1015 → 5.0.0-beta.1017

package/lib/cjs/components/search-input/SearchInput.js

@@ -9,6 +9,8 @@ var _react2 = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _Input = _interopRequireWildcard(require("../input/Input"));
 var _SearchInput = require("./SearchInput.styles");
+var _styledComponents = require("styled-components");
+var _useElementSize = require("../../hooks/useElementSize");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -19,11 +21,15 @@ const SearchInput = ({
   onChange,
   onKeyDown,
   placeholder,
+  shouldUseAbsolutePositioning = false,
   size = _Input.InputSize.Medium,
   value
 }) => {
   const [isSearchInputActive, setIsSearchInputActive] = (0, _react2.useState)(isActive ?? (typeof value === 'string' && value.trim() !== ''));
   const inputRef = (0, _react2.useRef)(null);
+  const pseudoRef = (0, _react2.useRef)(null);
+  const parentWidth = (0, _useElementSize.useElementSize)(pseudoRef);
+  const theme = (0, _styledComponents.useTheme)();
   const handleBackIconClick = (0, _react2.useCallback)(() => setIsSearchInputActive(false), []);
   const handleSearchIconClick = (0, _react2.useCallback)(() => setIsSearchInputActive(true), []);
   (0, _react2.useEffect)(() => {
@@ -40,15 +46,18 @@ const SearchInput = ({
       setIsSearchInputActive(isActive);
     }
   }, [isActive]);
-  return /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledSearchInput, {
+  const width = (0, _react2.useMemo)(() => parentWidth === null || parentWidth === void 0 ? void 0 : parentWidth.width, [parentWidth === null || parentWidth === void 0 ? void 0 : parentWidth.width]);
+  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledSearchInput, {
     className: "beta-chayns-search-input",
-    $size: size
-  }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
+    $size: size,
+    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning
+  }, shouldUseAbsolutePositioning ? /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
+    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
     animate: {
       opacity: 1,
-      width: '100%'
+      width
     },
     exit: {
       opacity: 0,
@@ -91,7 +100,64 @@ const SearchInput = ({
     icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
     onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
     size: 18
-  }))));
+  }))) : /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
+    initial: false
+  }, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0,
+      position: 'absolute'
+    },
+    initial: {
+      opacity: 0
+    },
+    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
+    transition: {
+      duration: 0.3
+    },
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
+  }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
+    color: iconColor,
+    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
+    size: 18
+  })))), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
+    initial: false
+  }, isSearchInputActive && /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
+    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
+    animate: {
+      opacity: 1,
+      width: '100%'
+    },
+    exit: {
+      opacity: 0,
+      width: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0
+    },
+    key: "searchInputContentWrapper",
+    transition: {
+      duration: 0.3
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_Input.default, {
+    leftElement: /*#__PURE__*/_react2.default.createElement(_Icon.default, {
+      color: theme.text,
+      icons: ['far fa-search']
+    }),
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    placeholder: placeholder,
+    ref: inputRef,
+    shouldShowClearIcon: true,
+    size: size,
+    value: value
+  }))))), /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledSearchInputPseudoElement, {
+    ref: pseudoRef
+  }));
 };
 SearchInput.displayName = 'SearchInput';
 var _default = exports.default = SearchInput;

package/lib/cjs/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","InputSize","Medium","value","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","createElement","StyledSearchInput","className","$size","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","width","exit","key","transition","duration","ref","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","color","icons","onClick","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    size = InputSize.Medium,\n    value,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    return (\n        <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n            <AnimatePresence initial={false}>\n                {isSearchInputActive && (\n                    <StyledMotionSearchInputContentWrapper\n                        animate={{ opacity: 1, width: '100%' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"searchInputContentWrapper\"\n                        transition={{ duration: 0.3 }}\n                    >\n                        <Input\n                            onChange={onChange}\n                            onKeyDown={onKeyDown}\n                            placeholder={placeholder}\n                            ref={inputRef}\n                            shouldShowClearIcon\n                            size={size}\n                            value={value}\n                        />\n                    </StyledMotionSearchInputContentWrapper>\n                )}\n                <StyledMotionSearchInputIconWrapperContent\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0, position: 'absolute' }}\n                    initial={{ opacity: 0 }}\n                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                    transition={{ duration: 0.3 }}\n                    id={isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'}\n                >\n                    <Icon\n                        color={iconColor}\n                        icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                        onClick={isSearchInputActive ? handleBackIconClick : handleSearchIconClick}\n                        size={18}\n                    />\n                </StyledMotionSearchInputIconWrapperContent>\n            </AnimatePresence>\n        </StyledSearchInput>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchInput.js","names":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","_styledComponents","_useElementSize","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","InputSize","Medium","value","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","pseudoRef","parentWidth","useElementSize","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","width","useMemo","createElement","Fragment","StyledSearchInput","className","$size","$shouldUseAbsolutePositioning","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","exit","key","transition","duration","ref","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","color","icons","onClick","StyledMotionSearchInputIconWrapper","leftElement","text","StyledSearchInputPseudoElement","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/useElementSize';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    shouldUseAbsolutePositioning = false,\n    size = InputSize.Medium,\n    value,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n    const pseudoRef = useRef<HTMLDivElement>(null);\n\n    const parentWidth = useElementSize(pseudoRef);\n\n    const theme = useTheme() as Theme;\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    const width = useMemo(() => parentWidth?.width, [parentWidth?.width]);\n\n    return (\n        <>\n            <StyledSearchInput\n                className=\"beta-chayns-search-input\"\n                $size={size}\n                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n            >\n                {shouldUseAbsolutePositioning ? (\n                    <AnimatePresence initial={false}>\n                        {isSearchInputActive && (\n                            <StyledMotionSearchInputContentWrapper\n                                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                animate={{ opacity: 1, width }}\n                                exit={{ opacity: 0, width: 0 }}\n                                initial={{ opacity: 0, width: 0 }}\n                                key=\"searchInputContentWrapper\"\n                                transition={{ duration: 0.3 }}\n                            >\n                                <Input\n                                    onChange={onChange}\n                                    onKeyDown={onKeyDown}\n                                    placeholder={placeholder}\n                                    ref={inputRef}\n                                    shouldShowClearIcon\n                                    size={size}\n                                    value={value}\n                                />\n                            </StyledMotionSearchInputContentWrapper>\n                        )}\n                        <StyledMotionSearchInputIconWrapperContent\n                            animate={{ opacity: 1 }}\n                            exit={{ opacity: 0, position: 'absolute' }}\n                            initial={{ opacity: 0 }}\n                            key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                            transition={{ duration: 0.3 }}\n                            id={\n                                isSearchInputActive\n                                    ? 'search-input-backIcon'\n                                    : 'search-input-searchIcon'\n                            }\n                        >\n                            <Icon\n                                color={iconColor}\n                                icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                onClick={\n                                    isSearchInputActive\n                                        ? handleBackIconClick\n                                        : handleSearchIconClick\n                                }\n                                size={18}\n                            />\n                        </StyledMotionSearchInputIconWrapperContent>\n                    </AnimatePresence>\n                ) : (\n                    <>\n                        <StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                <StyledMotionSearchInputIconWrapperContent\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 0, position: 'absolute' }}\n                                    initial={{ opacity: 0 }}\n                                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                    transition={{ duration: 0.3 }}\n                                    id={\n                                        isSearchInputActive\n                                            ? 'search-input-backIcon'\n                                            : 'search-input-searchIcon'\n                                    }\n                                >\n                                    <Icon\n                                        color={iconColor}\n                                        icons={\n                                            isSearchInputActive\n                                                ? ['fa fa-arrow-left']\n                                                : ['fa fa-search']\n                                        }\n                                        onClick={\n                                            isSearchInputActive\n                                                ? handleBackIconClick\n                                                : handleSearchIconClick\n                                        }\n                                        size={18}\n                                    />\n                                </StyledMotionSearchInputIconWrapperContent>\n                            </AnimatePresence>\n                        </StyledMotionSearchInputIconWrapper>\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width: '100%' }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.3 }}\n                                >\n                                    <Input\n                                        leftElement={\n                                            <Icon color={theme.text} icons={['far fa-search']} />\n                                        }\n                                        onChange={onChange}\n                                        onKeyDown={onKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                        </AnimatePresence>\n                    </>\n                )}\n            </StyledSearchInput>\n            <StyledSearchInputPseudoElement ref={pseudoRef} />\n        </>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/search-input/SearchInput.styles.js

@@ -3,34 +3,57 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputContentWrapper = void 0;
+exports.StyledSearchInputPseudoElement = exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputContentWrapper = void 0;
 var _react = require("motion/react");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledSearchInput = exports.StyledSearchInput = _styledComponents.default.div`
     display: flex;
     align-items: center;
-    justify-content: center;
-    aspect-ratio: 1;
-    border-radius: 3px;
 
     height: ${({
   $size
 }) => $size === 'medium' ? '42px' : '32px'};
 
-    &:hover {
-        background-color: ${({
+    ${({
+  $shouldUseAbsolutePositioning,
   theme
-}) => theme[103]};
-    }
+}) => $shouldUseAbsolutePositioning ? (0, _styledComponents.css)`
+                  justify-content: center;
+                  aspect-ratio: 1;
+                  border-radius: 3px;
+                  position: relative;
+
+                  &:hover {
+                      background-color: ${theme[103]};
+                  }
+              ` : (0, _styledComponents.css)`
+                  gap: 8px;
+                  justify-content: flex-end;
+                  width: 100%;
+              `}
 `;
-const StyledMotionSearchInputContentWrapper = exports.StyledMotionSearchInputContentWrapper = (0, _styledComponents.default)(_react.motion.div)`
+const StyledSearchInputPseudoElement = exports.StyledSearchInputPseudoElement = _styledComponents.default.div`
     position: absolute;
-    top: 0;
     right: 0;
+    left: 0;
+`;
+const StyledMotionSearchInputContentWrapper = exports.StyledMotionSearchInputContentWrapper = (0, _styledComponents.default)(_react.motion.div)`
+    ${({
+  $shouldUseAbsolutePositioning
+}) => $shouldUseAbsolutePositioning && (0, _styledComponents.css)`
+            position: absolute;
+            top: 0;
+            right: 0;
+        `}
+
     overflow: hidden;
 `;
 const StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapperContent = (0, _styledComponents.default)(_react.motion.div)`
     display: flex;
 `;
+const StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputIconWrapper = _styledComponents.default.div`
+    width: 18px;
+`;
 //# sourceMappingURL=SearchInput.styles.js.map

package/lib/cjs/components/search-input/SearchInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSearchInput","exports","styled","div","$size","theme","StyledMotionSearchInputContentWrapper","motion","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n    $size: InputSize;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    border-radius: 3px;\n\n    height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n    &:hover {\n        background-color: ${({ theme }: StyledSearchInputProps) => theme[103]};\n    }\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    position: absolute;\n    top: 0;\n    right: 0;\n    overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAA8B,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAC3F;AACA;AACA,4BAA4B,CAAC;EAAEC;AAA8B,CAAC,KAAKA,KAAK,CAAC,GAAG,CAAC;AAC7E;AACA,CAAC;AAEM,MAAMC,qCAAqC,GAAAL,OAAA,CAAAK,qCAAA,GAAG,IAAAJ,yBAAM,EAACK,aAAM,CAACJ,GAAG,CAAqB;AAC3F;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMK,yCAAyC,GAAAP,OAAA,CAAAO,yCAAA,GAAG,IAAAN,yBAAM,EAACK,aAAM,CAACJ,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchInput.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledSearchInput","exports","styled","div","$size","$shouldUseAbsolutePositioning","theme","css","StyledSearchInputPseudoElement","StyledMotionSearchInputContentWrapper","motion","StyledMotionSearchInputIconWrapperContent","StyledMotionSearchInputIconWrapper"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n    $size: InputSize;\n    $shouldUseAbsolutePositioning: boolean;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    display: flex;\n    align-items: center;\n\n    height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n    ${({ $shouldUseAbsolutePositioning, theme }: StyledSearchInputProps) =>\n        $shouldUseAbsolutePositioning\n            ? css`\n                  justify-content: center;\n                  aspect-ratio: 1;\n                  border-radius: 3px;\n                  position: relative;\n\n                  &:hover {\n                      background-color: ${theme[103]};\n                  }\n              `\n            : css`\n                  gap: 8px;\n                  justify-content: flex-end;\n                  width: 100%;\n              `}\n`;\n\nexport const StyledSearchInputPseudoElement = styled.div`\n    position: absolute;\n    right: 0;\n    left: 0;\n`;\n\ntype StyledMotionSearchInputContentWrapperProps = {\n    $shouldUseAbsolutePositioning: boolean;\n};\n\nexport const StyledMotionSearchInputContentWrapper = styled(\n    motion.div,\n)<StyledMotionSearchInputContentWrapperProps>`\n    ${({ $shouldUseAbsolutePositioning }) =>\n        $shouldUseAbsolutePositioning &&\n        css`\n            position: absolute;\n            top: 0;\n            right: 0;\n        `}\n\n    overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n    width: 18px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASzC,MAAMW,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAA2B;AACnE;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAA8B,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAC3F;AACA,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA8B,CAAC,KAC/DD,6BAA6B,GACvB,IAAAE,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA,0CAA0CD,KAAK,CAAC,GAAG,CAAC;AACpD;AACA,eAAe,GACD,IAAAC,qBAAG;AACjB;AACA;AACA;AACA,eAAe;AACf,CAAC;AAEM,MAAMC,8BAA8B,GAAAP,OAAA,CAAAO,8BAAA,GAAGN,yBAAM,CAACC,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAMM,MAAMM,qCAAqC,GAAAR,OAAA,CAAAQ,qCAAA,GAAG,IAAAP,yBAAM,EACvDQ,aAAM,CAACP,GACX,CAA6C;AAC7C,MAAM,CAAC;EAAEE;AAA8B,CAAC,KAChCA,6BAA6B,IAC7B,IAAAE,qBAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,CAAC;AAEM,MAAMI,yCAAyC,GAAAV,OAAA,CAAAU,yCAAA,GAAG,IAAAT,yBAAM,EAACQ,aAAM,CAACP,GAAG,CAAqB;AAC/F;AACA,CAAC;AAEM,MAAMS,kCAAkC,GAAAX,OAAA,CAAAW,kCAAA,GAAGV,yBAAM,CAACC,GAAG;AAC5D;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/tag-input/TagInput.js

@@ -13,14 +13,12 @@ var _TagInput = require("./TagInput.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// ToDo: Add reference with "save" function to return unsaved tags
-
-const TagInput = ({
+const TagInput = /*#__PURE__*/(0, _react.forwardRef)(({
   placeholder,
   tags,
   onRemove,
   onAdd
-}) => {
+}, ref) => {
   const [internalTags, setInternalTags] = (0, _react.useState)();
   const [currentValue, setCurrentValue] = (0, _react.useState)('');
   const [selectedId, setSelectedId] = (0, _react.useState)();
@@ -30,6 +28,9 @@ const TagInput = ({
       setInternalTags(tags);
     }
   }, [tags]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    getUnsavedTagText: currentValue !== '' ? currentValue : undefined
+  }), [currentValue]);
   const handleKeyDown = (0, _react.useCallback)(event => {
     if (event.key === 'Enter') {
       setCurrentValue(prevValue => {
@@ -117,6 +118,6 @@ const TagInput = ({
     onChange: handleChange,
     value: currentValue
   })), [content, currentValue, handleKeyDown, placeholder, tags]);
-};
+});
 var _default = exports.default = TagInput;
 //# sourceMappingURL=TagInput.js.map

package/lib/cjs/components/tag-input/TagInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Icon","_TagInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TagInput","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","useState","currentValue","setCurrentValue","selectedId","setSelectedId","theme","useTheme","useEffect","handleKeyDown","useCallback","event","key","prevValue","prevTags","newTag","id","uuidv4","text","_internalTags","newSelectedId","length","prevState","_prevState","removedId","updatedTags","filter","tag","undefined","handleChange","target","value","handleIconClick","content","useMemo","items","forEach","push","createElement","backgroundColor","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","icons","onClick","StyledTagInput","StyledTagInputTagInput","onKeyDown","onChange","_default","exports"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => void;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\n// ToDo: Add reference with \"save\" function to return unsaved tags\n\nconst TagInput: FC<TagInputProps> = ({ placeholder, tags, onRemove, onAdd }) => {\n    const [internalTags, setInternalTags] = useState<Tag[]>();\n    const [currentValue, setCurrentValue] = useState('');\n    const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (tags) {\n            setInternalTags(tags);\n        }\n    }, [tags]);\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                setCurrentValue((prevValue) => {\n                    if (!prevValue) {\n                        return '';\n                    }\n\n                    setInternalTags((prevTags) => {\n                        const newTag = { id: uuidv4(), text: prevValue };\n\n                        if (typeof onAdd === 'function') {\n                            onAdd(newTag);\n                        }\n\n                        return prevTags ? [...prevTags, newTag] : [newTag];\n                    });\n\n                    return '';\n                });\n            }\n\n            if (event.key === 'Backspace' && currentValue === '') {\n                if (!selectedId) {\n                    if (!internalTags) {\n                        return;\n                    }\n\n                    const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n                    setSelectedId(newSelectedId);\n\n                    return;\n                }\n\n                setInternalTags((prevState) => {\n                    if (!prevState) {\n                        return prevState;\n                    }\n\n                    const removedId = prevState[prevState.length - 1]?.id;\n\n                    if (!removedId) {\n                        return prevState;\n                    }\n\n                    const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove(removedId);\n                    }\n\n                    setSelectedId(undefined);\n\n                    return updatedTags;\n                });\n            }\n        },\n        [currentValue, internalTags, onAdd, onRemove, selectedId],\n    );\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setCurrentValue(event.target.value);\n\n        if (event.target.value !== '') {\n            setSelectedId(undefined);\n        }\n    };\n\n    const handleIconClick = useCallback(\n        (id: string) => {\n            setInternalTags((prevState) => {\n                const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n                if (typeof onRemove === 'function') {\n                    onRemove(id);\n                }\n\n                return updatedTags;\n            });\n        },\n        [onRemove],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        if (!internalTags) {\n            return items;\n        }\n\n        internalTags.forEach(({ text, id }) => {\n            items.push(\n                <Badge\n                    key={`tag-input-${id}`}\n                    backgroundColor={\n                        id === selectedId ? ((theme['206'] as string) ?? undefined) : undefined\n                    }\n                >\n                    <StyledTagInputTagWrapper>\n                        <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n                        <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n                    </StyledTagInputTagWrapper>\n                </Badge>,\n            );\n        });\n\n        return items;\n    }, [handleIconClick, internalTags, selectedId, theme]);\n\n    return useMemo(\n        () => (\n            <StyledTagInput>\n                {content}\n                <StyledTagInputTagInput\n                    placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                    onKeyDown={handleKeyDown}\n                    onChange={handleChange}\n                    value={currentValue}\n                />\n            </StyledTagInput>\n        ),\n        [content, currentValue, handleKeyDown, placeholder, tags],\n    );\n};\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Icon","_TagInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TagInput","forwardRef","placeholder","tags","onRemove","onAdd","ref","internalTags","setInternalTags","useState","currentValue","setCurrentValue","selectedId","setSelectedId","theme","useTheme","useEffect","useImperativeHandle","getUnsavedTagText","undefined","handleKeyDown","useCallback","event","key","prevValue","prevTags","newTag","id","uuidv4","text","_internalTags","newSelectedId","length","prevState","_prevState","removedId","updatedTags","filter","tag","handleChange","target","value","handleIconClick","content","useMemo","items","forEach","push","createElement","backgroundColor","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","icons","onClick","StyledTagInput","StyledTagInputTagInput","onKeyDown","onChange","_default","exports"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n    useImperativeHandle,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => void;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\nexport type TagInputRef = {\n    getUnsavedTagText: Tag['text'] | undefined;\n};\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n    ({ placeholder, tags, onRemove, onAdd }, ref) => {\n        const [internalTags, setInternalTags] = useState<Tag[]>();\n        const [currentValue, setCurrentValue] = useState('');\n        const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n        const theme = useTheme();\n\n        useEffect(() => {\n            if (tags) {\n                setInternalTags(tags);\n            }\n        }, [tags]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n            }),\n            [currentValue],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent) => {\n                if (event.key === 'Enter') {\n                    setCurrentValue((prevValue) => {\n                        if (!prevValue) {\n                            return '';\n                        }\n\n                        setInternalTags((prevTags) => {\n                            const newTag = { id: uuidv4(), text: prevValue };\n\n                            if (typeof onAdd === 'function') {\n                                onAdd(newTag);\n                            }\n\n                            return prevTags ? [...prevTags, newTag] : [newTag];\n                        });\n\n                        return '';\n                    });\n                }\n\n                if (event.key === 'Backspace' && currentValue === '') {\n                    if (!selectedId) {\n                        if (!internalTags) {\n                            return;\n                        }\n\n                        const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n                        setSelectedId(newSelectedId);\n\n                        return;\n                    }\n\n                    setInternalTags((prevState) => {\n                        if (!prevState) {\n                            return prevState;\n                        }\n\n                        const removedId = prevState[prevState.length - 1]?.id;\n\n                        if (!removedId) {\n                            return prevState;\n                        }\n\n                        const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n                        if (typeof onRemove === 'function') {\n                            onRemove(removedId);\n                        }\n\n                        setSelectedId(undefined);\n\n                        return updatedTags;\n                    });\n                }\n            },\n            [currentValue, internalTags, onAdd, onRemove, selectedId],\n        );\n\n        const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n            setCurrentValue(event.target.value);\n\n            if (event.target.value !== '') {\n                setSelectedId(undefined);\n            }\n        };\n\n        const handleIconClick = useCallback(\n            (id: string) => {\n                setInternalTags((prevState) => {\n                    const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove(id);\n                    }\n\n                    return updatedTags;\n                });\n            },\n            [onRemove],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            if (!internalTags) {\n                return items;\n            }\n\n            internalTags.forEach(({ text, id }) => {\n                items.push(\n                    <Badge\n                        key={`tag-input-${id}`}\n                        backgroundColor={\n                            id === selectedId ? ((theme['206'] as string) ?? undefined) : undefined\n                        }\n                    >\n                        <StyledTagInputTagWrapper>\n                            <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n                            <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n                        </StyledTagInputTagWrapper>\n                    </Badge>,\n                );\n            });\n\n            return items;\n        }, [handleIconClick, internalTags, selectedId, theme]);\n\n        return useMemo(\n            () => (\n                <StyledTagInput>\n                    {content}\n                    <StyledTagInputTagInput\n                        placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                        onKeyDown={handleKeyDown}\n                        onChange={handleChange}\n                        value={currentValue}\n                    />\n                </StyledTagInput>\n            ),\n            [content, currentValue, handleKeyDown, placeholder, tags],\n        );\n    },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.js

@@ -1,8 +1,10 @@
 import { AnimatePresence } from 'motion/react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Icon from '../icon/Icon';
 import Input, { InputSize } from '../input/Input';
-import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput } from './SearchInput.styles';
+import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput, StyledSearchInputPseudoElement } from './SearchInput.styles';
+import { useTheme } from 'styled-components';
+import { useElementSize } from '../../hooks/useElementSize';
 const SearchInput = _ref => {
   let {
     iconColor,
@@ -11,11 +13,15 @@ const SearchInput = _ref => {
     onChange,
     onKeyDown,
     placeholder,
+    shouldUseAbsolutePositioning = false,
     size = InputSize.Medium,
     value
   } = _ref;
   const [isSearchInputActive, setIsSearchInputActive] = useState(isActive ?? (typeof value === 'string' && value.trim() !== ''));
   const inputRef = useRef(null);
+  const pseudoRef = useRef(null);
+  const parentWidth = useElementSize(pseudoRef);
+  const theme = useTheme();
   const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);
   const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);
   useEffect(() => {
@@ -31,15 +37,18 @@ const SearchInput = _ref => {
       setIsSearchInputActive(isActive);
     }
   }, [isActive]);
-  return /*#__PURE__*/React.createElement(StyledSearchInput, {
+  const width = useMemo(() => parentWidth?.width, [parentWidth?.width]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSearchInput, {
     className: "beta-chayns-search-input",
-    $size: size
-  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    $size: size,
+    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning
+  }, shouldUseAbsolutePositioning ? /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
+    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
     animate: {
       opacity: 1,
-      width: '100%'
+      width
     },
     exit: {
       opacity: 0,
@@ -82,7 +91,64 @@ const SearchInput = _ref => {
     icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
     onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
     size: 18
-  }))));
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0,
+      position: 'absolute'
+    },
+    initial: {
+      opacity: 0
+    },
+    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
+    transition: {
+      duration: 0.3
+    },
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: iconColor,
+    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
+    size: 18
+  })))), /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
+    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
+    animate: {
+      opacity: 1,
+      width: '100%'
+    },
+    exit: {
+      opacity: 0,
+      width: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0
+    },
+    key: "searchInputContentWrapper",
+    transition: {
+      duration: 0.3
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    leftElement: /*#__PURE__*/React.createElement(Icon, {
+      color: theme.text,
+      icons: ['far fa-search']
+    }),
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    placeholder: placeholder,
+    ref: inputRef,
+    shouldShowClearIcon: true,
+    size: size,
+    value: value
+  }))))), /*#__PURE__*/React.createElement(StyledSearchInputPseudoElement, {
+    ref: pseudoRef
+  }));
 };
 SearchInput.displayName = 'SearchInput';
 export default SearchInput;

package/lib/esm/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","Medium","value","isSearchInputActive","setIsSearchInputActive","trim","inputRef","handleBackIconClick","handleSearchIconClick","current","focus","createElement","className","$size","initial","animate","opacity","width","exit","key","transition","duration","ref","shouldShowClearIcon","position","id","color","icons","onClick","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    size = InputSize.Medium,\n    value,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    return (\n        <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n            <AnimatePresence initial={false}>\n                {isSearchInputActive && (\n                    <StyledMotionSearchInputContentWrapper\n                        animate={{ opacity: 1, width: '100%' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"searchInputContentWrapper\"\n                        transition={{ duration: 0.3 }}\n                    >\n                        <Input\n                            onChange={onChange}\n                            onKeyDown={onKeyDown}\n                            placeholder={placeholder}\n                            ref={inputRef}\n                            shouldShowClearIcon\n                            size={size}\n                            value={value}\n                        />\n                    </StyledMotionSearchInputContentWrapper>\n                )}\n                <StyledMotionSearchInputIconWrapperContent\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0, position: 'absolute' }}\n                    initial={{ opacity: 0 }}\n                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                    transition={{ duration: 0.3 }}\n                    id={isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'}\n                >\n                    <Icon\n                        color={iconColor}\n                        icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                        onClick={isSearchInputActive ? handleBackIconClick : handleSearchIconClick}\n                        size={18}\n                    />\n                </StyledMotionSearchInputIconWrapperContent>\n            </AnimatePresence>\n        </StyledSearchInput>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputPseudoElement","useTheme","useElementSize","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","parentWidth","theme","handleBackIconClick","handleSearchIconClick","current","focus","width","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","initial","animate","opacity","exit","key","transition","duration","ref","shouldShowClearIcon","position","id","color","icons","onClick","leftElement","text","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/useElementSize';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    shouldUseAbsolutePositioning = false,\n    size = InputSize.Medium,\n    value,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n    const pseudoRef = useRef<HTMLDivElement>(null);\n\n    const parentWidth = useElementSize(pseudoRef);\n\n    const theme = useTheme() as Theme;\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    const width = useMemo(() => parentWidth?.width, [parentWidth?.width]);\n\n    return (\n        <>\n            <StyledSearchInput\n                className=\"beta-chayns-search-input\"\n                $size={size}\n                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n            >\n                {shouldUseAbsolutePositioning ? (\n                    <AnimatePresence initial={false}>\n                        {isSearchInputActive && (\n                            <StyledMotionSearchInputContentWrapper\n                                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                animate={{ opacity: 1, width }}\n                                exit={{ opacity: 0, width: 0 }}\n                                initial={{ opacity: 0, width: 0 }}\n                                key=\"searchInputContentWrapper\"\n                                transition={{ duration: 0.3 }}\n                            >\n                                <Input\n                                    onChange={onChange}\n                                    onKeyDown={onKeyDown}\n                                    placeholder={placeholder}\n                                    ref={inputRef}\n                                    shouldShowClearIcon\n                                    size={size}\n                                    value={value}\n                                />\n                            </StyledMotionSearchInputContentWrapper>\n                        )}\n                        <StyledMotionSearchInputIconWrapperContent\n                            animate={{ opacity: 1 }}\n                            exit={{ opacity: 0, position: 'absolute' }}\n                            initial={{ opacity: 0 }}\n                            key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                            transition={{ duration: 0.3 }}\n                            id={\n                                isSearchInputActive\n                                    ? 'search-input-backIcon'\n                                    : 'search-input-searchIcon'\n                            }\n                        >\n                            <Icon\n                                color={iconColor}\n                                icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                onClick={\n                                    isSearchInputActive\n                                        ? handleBackIconClick\n                                        : handleSearchIconClick\n                                }\n                                size={18}\n                            />\n                        </StyledMotionSearchInputIconWrapperContent>\n                    </AnimatePresence>\n                ) : (\n                    <>\n                        <StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                <StyledMotionSearchInputIconWrapperContent\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 0, position: 'absolute' }}\n                                    initial={{ opacity: 0 }}\n                                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                    transition={{ duration: 0.3 }}\n                                    id={\n                                        isSearchInputActive\n                                            ? 'search-input-backIcon'\n                                            : 'search-input-searchIcon'\n                                    }\n                                >\n                                    <Icon\n                                        color={iconColor}\n                                        icons={\n                                            isSearchInputActive\n                                                ? ['fa fa-arrow-left']\n                                                : ['fa fa-search']\n                                        }\n                                        onClick={\n                                            isSearchInputActive\n                                                ? handleBackIconClick\n                                                : handleSearchIconClick\n                                        }\n                                        size={18}\n                                    />\n                                </StyledMotionSearchInputIconWrapperContent>\n                            </AnimatePresence>\n                        </StyledMotionSearchInputIconWrapper>\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width: '100%' }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.3 }}\n                                >\n                                    <Input\n                                        leftElement={\n                                            <Icon color={theme.text} icons={['far fa-search']} />\n                                        }\n                                        onChange={onChange}\n                                        onKeyDown={onKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                        </AnimatePresence>\n                    </>\n                )}\n            </StyledSearchInput>\n            <StyledSearchInputPseudoElement ref={pseudoRef} />\n        </>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.styles.js

@@ -1,11 +1,8 @@
 import { motion } from 'motion/react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 export const StyledSearchInput = styled.div`
     display: flex;
     align-items: center;
-    justify-content: center;
-    aspect-ratio: 1;
-    border-radius: 3px;
 
     height: ${_ref => {
   let {
@@ -14,22 +11,50 @@ export const StyledSearchInput = styled.div`
   return $size === 'medium' ? '42px' : '32px';
 }};
 
-    &:hover {
-        background-color: ${_ref2 => {
+    ${_ref2 => {
   let {
+    $shouldUseAbsolutePositioning,
     theme
   } = _ref2;
-  return theme[103];
-}};
-    }
+  return $shouldUseAbsolutePositioning ? css`
+                  justify-content: center;
+                  aspect-ratio: 1;
+                  border-radius: 3px;
+                  position: relative;
+
+                  &:hover {
+                      background-color: ${theme[103]};
+                  }
+              ` : css`
+                  gap: 8px;
+                  justify-content: flex-end;
+                  width: 100%;
+              `;
+}}
 `;
-export const StyledMotionSearchInputContentWrapper = styled(motion.div)`
+export const StyledSearchInputPseudoElement = styled.div`
     position: absolute;
-    top: 0;
     right: 0;
+    left: 0;
+`;
+export const StyledMotionSearchInputContentWrapper = styled(motion.div)`
+    ${_ref3 => {
+  let {
+    $shouldUseAbsolutePositioning
+  } = _ref3;
+  return $shouldUseAbsolutePositioning && css`
+            position: absolute;
+            top: 0;
+            right: 0;
+        `;
+}}
+
     overflow: hidden;
 `;
 export const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`
     display: flex;
 `;
+export const StyledMotionSearchInputIconWrapper = styled.div`
+    width: 18px;
+`;
 //# sourceMappingURL=SearchInput.styles.js.map

package/lib/esm/components/search-input/SearchInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.styles.js","names":["motion","styled","StyledSearchInput","div","_ref","$size","_ref2","theme","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n    $size: InputSize;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    border-radius: 3px;\n\n    height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n    &:hover {\n        background-color: ${({ theme }: StyledSearchInputProps) => theme[103]};\n    }\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    position: absolute;\n    top: 0;\n    right: 0;\n    overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAQtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAC3F;AACA;AACA,4BAA4BC,KAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,GAAG,CAAC;AAAA;AAC7E;AACA,CAAC;AAED,OAAO,MAAMC,qCAAqC,GAAGP,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC3F;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,yCAAyC,GAAGR,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchInput.styles.js","names":["motion","styled","css","StyledSearchInput","div","_ref","$size","_ref2","$shouldUseAbsolutePositioning","theme","StyledSearchInputPseudoElement","StyledMotionSearchInputContentWrapper","_ref3","StyledMotionSearchInputIconWrapperContent","StyledMotionSearchInputIconWrapper"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n    $size: InputSize;\n    $shouldUseAbsolutePositioning: boolean;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    display: flex;\n    align-items: center;\n\n    height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n    ${({ $shouldUseAbsolutePositioning, theme }: StyledSearchInputProps) =>\n        $shouldUseAbsolutePositioning\n            ? css`\n                  justify-content: center;\n                  aspect-ratio: 1;\n                  border-radius: 3px;\n                  position: relative;\n\n                  &:hover {\n                      background-color: ${theme[103]};\n                  }\n              `\n            : css`\n                  gap: 8px;\n                  justify-content: flex-end;\n                  width: 100%;\n              `}\n`;\n\nexport const StyledSearchInputPseudoElement = styled.div`\n    position: absolute;\n    right: 0;\n    left: 0;\n`;\n\ntype StyledMotionSearchInputContentWrapperProps = {\n    $shouldUseAbsolutePositioning: boolean;\n};\n\nexport const StyledMotionSearchInputContentWrapper = styled(\n    motion.div,\n)<StyledMotionSearchInputContentWrapperProps>`\n    ${({ $shouldUseAbsolutePositioning }) =>\n        $shouldUseAbsolutePositioning &&\n        css`\n            position: absolute;\n            top: 0;\n            right: 0;\n        `}\n\n    overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n    width: 18px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,GAA2B;AACnE;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAC3F;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,6BAA6B;IAAEC;EAA8B,CAAC,GAAAF,KAAA;EAAA,OAC/DC,6BAA6B,GACvBN,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA,0CAA0CO,KAAK,CAAC,GAAG,CAAC;AACpD;AACA,eAAe,GACDP,GAAG;AACjB;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAED,OAAO,MAAMQ,8BAA8B,GAAGT,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMO,qCAAqC,GAAGV,MAAM,CACvDD,MAAM,CAACI,GACX,CAA6C;AAC7C,MAAMQ,KAAA;EAAA,IAAC;IAAEJ;EAA8B,CAAC,GAAAI,KAAA;EAAA,OAChCJ,6BAA6B,IAC7BN,GAAG;AACX;AACA;AACA;AACA,SAAS;AAAA;AACT;AACA;AACA,CAAC;AAED,OAAO,MAAMW,yCAAyC,GAAGZ,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB;AAC/F;AACA,CAAC;AAED,OAAO,MAAMU,kCAAkC,GAAGb,MAAM,CAACG,GAAG;AAC5D;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/tag-input/TagInput.js

@@ -1,12 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useState, useImperativeHandle } from 'react';
 import { useTheme } from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import Badge from '../badge/Badge';
 import Icon from '../icon/Icon';
 import { StyledTagInput, StyledTagInputTagInput, StyledTagInputTagWrapper, StyledTagInputTagWrapperText } from './TagInput.styles';
-// ToDo: Add reference with "save" function to return unsaved tags
-
-const TagInput = _ref => {
+const TagInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     placeholder,
     tags,
@@ -22,6 +20,9 @@ const TagInput = _ref => {
       setInternalTags(tags);
     }
   }, [tags]);
+  useImperativeHandle(ref, () => ({
+    getUnsavedTagText: currentValue !== '' ? currentValue : undefined
+  }), [currentValue]);
   const handleKeyDown = useCallback(event => {
     if (event.key === 'Enter') {
       setCurrentValue(prevValue => {
@@ -108,6 +109,6 @@ const TagInput = _ref => {
     onChange: handleChange,
     value: currentValue
   })), [content, currentValue, handleKeyDown, placeholder, tags]);
-};
+});
 export default TagInput;
 //# sourceMappingURL=TagInput.js.map

package/lib/esm/components/tag-input/TagInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagInput.js","names":["React","useCallback","useEffect","useMemo","useState","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","TagInput","_ref","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","currentValue","setCurrentValue","selectedId","setSelectedId","theme","handleKeyDown","event","key","prevValue","prevTags","newTag","id","text","newSelectedId","length","prevState","removedId","updatedTags","filter","tag","undefined","handleChange","target","value","handleIconClick","content","items","forEach","_ref2","push","createElement","backgroundColor","icons","onClick","onKeyDown","onChange"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => void;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\n// ToDo: Add reference with \"save\" function to return unsaved tags\n\nconst TagInput: FC<TagInputProps> = ({ placeholder, tags, onRemove, onAdd }) => {\n    const [internalTags, setInternalTags] = useState<Tag[]>();\n    const [currentValue, setCurrentValue] = useState('');\n    const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (tags) {\n            setInternalTags(tags);\n        }\n    }, [tags]);\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                setCurrentValue((prevValue) => {\n                    if (!prevValue) {\n                        return '';\n                    }\n\n                    setInternalTags((prevTags) => {\n                        const newTag = { id: uuidv4(), text: prevValue };\n\n                        if (typeof onAdd === 'function') {\n                            onAdd(newTag);\n                        }\n\n                        return prevTags ? [...prevTags, newTag] : [newTag];\n                    });\n\n                    return '';\n                });\n            }\n\n            if (event.key === 'Backspace' && currentValue === '') {\n                if (!selectedId) {\n                    if (!internalTags) {\n                        return;\n                    }\n\n                    const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n                    setSelectedId(newSelectedId);\n\n                    return;\n                }\n\n                setInternalTags((prevState) => {\n                    if (!prevState) {\n                        return prevState;\n                    }\n\n                    const removedId = prevState[prevState.length - 1]?.id;\n\n                    if (!removedId) {\n                        return prevState;\n                    }\n\n                    const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove(removedId);\n                    }\n\n                    setSelectedId(undefined);\n\n                    return updatedTags;\n                });\n            }\n        },\n        [currentValue, internalTags, onAdd, onRemove, selectedId],\n    );\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setCurrentValue(event.target.value);\n\n        if (event.target.value !== '') {\n            setSelectedId(undefined);\n        }\n    };\n\n    const handleIconClick = useCallback(\n        (id: string) => {\n            setInternalTags((prevState) => {\n                const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n                if (typeof onRemove === 'function') {\n                    onRemove(id);\n                }\n\n                return updatedTags;\n            });\n        },\n        [onRemove],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        if (!internalTags) {\n            return items;\n        }\n\n        internalTags.forEach(({ text, id }) => {\n            items.push(\n                <Badge\n                    key={`tag-input-${id}`}\n                    backgroundColor={\n                        id === selectedId ? ((theme['206'] as string) ?? undefined) : undefined\n                    }\n                >\n                    <StyledTagInputTagWrapper>\n                        <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n                        <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n                    </StyledTagInputTagWrapper>\n                </Badge>,\n            );\n        });\n\n        return items;\n    }, [handleIconClick, internalTags, selectedId, theme]);\n\n    return useMemo(\n        () => (\n            <StyledTagInput>\n                {content}\n                <StyledTagInputTagInput\n                    placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                    onKeyDown={handleKeyDown}\n                    onChange={handleChange}\n                    value={currentValue}\n                />\n            </StyledTagInput>\n        ),\n        [content, currentValue, handleKeyDown, placeholder, tags],\n    );\n};\n\nexport default TagInput;\n"],"mappings":"AAAA,OAAOA,KAAK,IAERC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,QAAQ,QAIL,OAAO;AACd,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,EAAE,IAAIC,MAAM,QAAQ,MAAM;AAEnC,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,cAAc,EACdC,sBAAsB,EACtBC,wBAAwB,EACxBC,4BAA4B,QACzB,mBAAmB;AAqB1B;;AAEA,MAAMC,QAA2B,GAAGC,IAAA,IAA4C;EAAA,IAA3C;IAAEC,WAAW;IAAEC,IAAI;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAAJ,IAAA;EACvE,MAAM,CAACK,YAAY,EAAEC,eAAe,CAAC,GAAGjB,QAAQ,CAAQ,CAAC;EACzD,MAAM,CAACkB,YAAY,EAAEC,eAAe,CAAC,GAAGnB,QAAQ,CAAC,EAAE,CAAC;EACpD,MAAM,CAACoB,UAAU,EAAEC,aAAa,CAAC,GAAGrB,QAAQ,CAAY,CAAC;EAEzD,MAAMsB,KAAK,GAAGrB,QAAQ,CAAC,CAAC;EAExBH,SAAS,CAAC,MAAM;IACZ,IAAIe,IAAI,EAAE;MACNI,eAAe,CAACJ,IAAI,CAAC;IACzB;EACJ,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,MAAMU,aAAa,GAAG1B,WAAW,CAC5B2B,KAAoB,IAAK;IACtB,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBN,eAAe,CAAEO,SAAS,IAAK;QAC3B,IAAI,CAACA,SAAS,EAAE;UACZ,OAAO,EAAE;QACb;QAEAT,eAAe,CAAEU,QAAQ,IAAK;UAC1B,MAAMC,MAAM,GAAG;YAAEC,EAAE,EAAE1B,MAAM,CAAC,CAAC;YAAE2B,IAAI,EAAEJ;UAAU,CAAC;UAEhD,IAAI,OAAOX,KAAK,KAAK,UAAU,EAAE;YAC7BA,KAAK,CAACa,MAAM,CAAC;UACjB;UAEA,OAAOD,QAAQ,GAAG,CAAC,GAAGA,QAAQ,EAAEC,MAAM,CAAC,GAAG,CAACA,MAAM,CAAC;QACtD,CAAC,CAAC;QAEF,OAAO,EAAE;MACb,CAAC,CAAC;IACN;IAEA,IAAIJ,KAAK,CAACC,GAAG,KAAK,WAAW,IAAIP,YAAY,KAAK,EAAE,EAAE;MAClD,IAAI,CAACE,UAAU,EAAE;QACb,IAAI,CAACJ,YAAY,EAAE;UACf;QACJ;QAEA,MAAMe,aAAa,GAAGf,YAAY,CAACA,YAAY,CAACgB,MAAM,GAAG,CAAC,CAAC,EAAEH,EAAE;QAE/DR,aAAa,CAACU,aAAa,CAAC;QAE5B;MACJ;MAEAd,eAAe,CAAEgB,SAAS,IAAK;QAC3B,IAAI,CAACA,SAAS,EAAE;UACZ,OAAOA,SAAS;QACpB;QAEA,MAAMC,SAAS,GAAGD,SAAS,CAACA,SAAS,CAACD,MAAM,GAAG,CAAC,CAAC,EAAEH,EAAE;QAErD,IAAI,CAACK,SAAS,EAAE;UACZ,OAAOD,SAAS;QACpB;QAEA,MAAME,WAAW,GAAG,CAACF,SAAS,IAAI,EAAE,EAAEG,MAAM,CAAEC,GAAG,IAAKA,GAAG,CAACR,EAAE,KAAKK,SAAS,CAAC;QAE3E,IAAI,OAAOpB,QAAQ,KAAK,UAAU,EAAE;UAChCA,QAAQ,CAACoB,SAAS,CAAC;QACvB;QAEAb,aAAa,CAACiB,SAAS,CAAC;QAExB,OAAOH,WAAW;MACtB,CAAC,CAAC;IACN;EACJ,CAAC,EACD,CAACjB,YAAY,EAAEF,YAAY,EAAED,KAAK,EAAED,QAAQ,EAAEM,UAAU,CAC5D,CAAC;EAED,MAAMmB,YAAY,GAAIf,KAAoC,IAAK;IAC3DL,eAAe,CAACK,KAAK,CAACgB,MAAM,CAACC,KAAK,CAAC;IAEnC,IAAIjB,KAAK,CAACgB,MAAM,CAACC,KAAK,KAAK,EAAE,EAAE;MAC3BpB,aAAa,CAACiB,SAAS,CAAC;IAC5B;EACJ,CAAC;EAED,MAAMI,eAAe,GAAG7C,WAAW,CAC9BgC,EAAU,IAAK;IACZZ,eAAe,CAAEgB,SAAS,IAAK;MAC3B,MAAME,WAAW,GAAG,CAACF,SAAS,IAAI,EAAE,EAAEG,MAAM,CAAEC,GAAG,IAAKA,GAAG,CAACR,EAAE,KAAKA,EAAE,CAAC;MAEpE,IAAI,OAAOf,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACe,EAAE,CAAC;MAChB;MAEA,OAAOM,WAAW;IACtB,CAAC,CAAC;EACN,CAAC,EACD,CAACrB,QAAQ,CACb,CAAC;EAED,MAAM6B,OAAO,GAAG5C,OAAO,CAAC,MAAM;IAC1B,MAAM6C,KAAqB,GAAG,EAAE;IAEhC,IAAI,CAAC5B,YAAY,EAAE;MACf,OAAO4B,KAAK;IAChB;IAEA5B,YAAY,CAAC6B,OAAO,CAACC,KAAA,IAAkB;MAAA,IAAjB;QAAEhB,IAAI;QAAED;MAAG,CAAC,GAAAiB,KAAA;MAC9BF,KAAK,CAACG,IAAI,cACNnD,KAAA,CAAAoD,aAAA,CAAC5C,KAAK;QACFqB,GAAG,EAAE,aAAaI,EAAE,EAAG;QACvBoB,eAAe,EACXpB,EAAE,KAAKT,UAAU,GAAKE,KAAK,CAAC,KAAK,CAAC,IAAegB,SAAS,GAAIA;MACjE,gBAED1C,KAAA,CAAAoD,aAAA,CAACxC,wBAAwB,qBACrBZ,KAAA,CAAAoD,aAAA,CAACvC,4BAA4B,QAAEqB,IAAmC,CAAC,eACnElC,KAAA,CAAAoD,aAAA,CAAC3C,IAAI;QAAC6C,KAAK,EAAE,CAAC,UAAU,CAAE;QAACC,OAAO,EAAEA,CAAA,KAAMT,eAAe,CAACb,EAAE;MAAE,CAAE,CAC1C,CACvB,CACX,CAAC;IACL,CAAC,CAAC;IAEF,OAAOe,KAAK;EAChB,CAAC,EAAE,CAACF,eAAe,EAAE1B,YAAY,EAAEI,UAAU,EAAEE,KAAK,CAAC,CAAC;EAEtD,OAAOvB,OAAO,CACV,mBACIH,KAAA,CAAAoD,aAAA,CAAC1C,cAAc,QACVqC,OAAO,eACR/C,KAAA,CAAAoD,aAAA,CAACzC,sBAAsB;IACnBK,WAAW,EAAEC,IAAI,IAAIA,IAAI,CAACmB,MAAM,GAAG,CAAC,GAAGM,SAAS,GAAG1B,WAAY;IAC/DwC,SAAS,EAAE7B,aAAc;IACzB8B,QAAQ,EAAEd,YAAa;IACvBE,KAAK,EAAEvB;EAAa,CACvB,CACW,CACnB,EACD,CAACyB,OAAO,EAAEzB,YAAY,EAAEK,aAAa,EAAEX,WAAW,EAAEC,IAAI,CAC5D,CAAC;AACL,CAAC;AAED,eAAeH,QAAQ","ignoreList":[]}
+{"version":3,"file":"TagInput.js","names":["React","forwardRef","useCallback","useEffect","useMemo","useState","useImperativeHandle","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","TagInput","_ref","ref","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","currentValue","setCurrentValue","selectedId","setSelectedId","theme","getUnsavedTagText","undefined","handleKeyDown","event","key","prevValue","prevTags","newTag","id","text","newSelectedId","length","prevState","removedId","updatedTags","filter","tag","handleChange","target","value","handleIconClick","content","items","forEach","_ref2","push","createElement","backgroundColor","icons","onClick","onKeyDown","onChange"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n    useImperativeHandle,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => void;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\nexport type TagInputRef = {\n    getUnsavedTagText: Tag['text'] | undefined;\n};\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n    ({ placeholder, tags, onRemove, onAdd }, ref) => {\n        const [internalTags, setInternalTags] = useState<Tag[]>();\n        const [currentValue, setCurrentValue] = useState('');\n        const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n        const theme = useTheme();\n\n        useEffect(() => {\n            if (tags) {\n                setInternalTags(tags);\n            }\n        }, [tags]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n            }),\n            [currentValue],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent) => {\n                if (event.key === 'Enter') {\n                    setCurrentValue((prevValue) => {\n                        if (!prevValue) {\n                            return '';\n                        }\n\n                        setInternalTags((prevTags) => {\n                            const newTag = { id: uuidv4(), text: prevValue };\n\n                            if (typeof onAdd === 'function') {\n                                onAdd(newTag);\n                            }\n\n                            return prevTags ? [...prevTags, newTag] : [newTag];\n                        });\n\n                        return '';\n                    });\n                }\n\n                if (event.key === 'Backspace' && currentValue === '') {\n                    if (!selectedId) {\n                        if (!internalTags) {\n                            return;\n                        }\n\n                        const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n                        setSelectedId(newSelectedId);\n\n                        return;\n                    }\n\n                    setInternalTags((prevState) => {\n                        if (!prevState) {\n                            return prevState;\n                        }\n\n                        const removedId = prevState[prevState.length - 1]?.id;\n\n                        if (!removedId) {\n                            return prevState;\n                        }\n\n                        const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n                        if (typeof onRemove === 'function') {\n                            onRemove(removedId);\n                        }\n\n                        setSelectedId(undefined);\n\n                        return updatedTags;\n                    });\n                }\n            },\n            [currentValue, internalTags, onAdd, onRemove, selectedId],\n        );\n\n        const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n            setCurrentValue(event.target.value);\n\n            if (event.target.value !== '') {\n                setSelectedId(undefined);\n            }\n        };\n\n        const handleIconClick = useCallback(\n            (id: string) => {\n                setInternalTags((prevState) => {\n                    const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove(id);\n                    }\n\n                    return updatedTags;\n                });\n            },\n            [onRemove],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            if (!internalTags) {\n                return items;\n            }\n\n            internalTags.forEach(({ text, id }) => {\n                items.push(\n                    <Badge\n                        key={`tag-input-${id}`}\n                        backgroundColor={\n                            id === selectedId ? ((theme['206'] as string) ?? undefined) : undefined\n                        }\n                    >\n                        <StyledTagInputTagWrapper>\n                            <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n                            <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n                        </StyledTagInputTagWrapper>\n                    </Badge>,\n                );\n            });\n\n            return items;\n        }, [handleIconClick, internalTags, selectedId, theme]);\n\n        return useMemo(\n            () => (\n                <StyledTagInput>\n                    {content}\n                    <StyledTagInputTagInput\n                        placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                        onKeyDown={handleKeyDown}\n                        onChange={handleChange}\n                        value={currentValue}\n                    />\n                </StyledTagInput>\n            ),\n            [content, currentValue, handleKeyDown, placeholder, tags],\n        );\n    },\n);\n\nexport default TagInput;\n"],"mappings":"AAAA,OAAOA,KAAK,IACRC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,QAAQ,EAIRC,mBAAmB,QAChB,OAAO;AACd,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,EAAE,IAAIC,MAAM,QAAQ,MAAM;AAEnC,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,cAAc,EACdC,sBAAsB,EACtBC,wBAAwB,EACxBC,4BAA4B,QACzB,mBAAmB;AAyB1B,MAAMC,QAAQ,gBAAGf,UAAU,CACvB,CAAAgB,IAAA,EAAyCC,GAAG,KAAK;EAAA,IAAhD;IAAEC,WAAW;IAAEC,IAAI;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAAL,IAAA;EACnC,MAAM,CAACM,YAAY,EAAEC,eAAe,CAAC,GAAGnB,QAAQ,CAAQ,CAAC;EACzD,MAAM,CAACoB,YAAY,EAAEC,eAAe,CAAC,GAAGrB,QAAQ,CAAC,EAAE,CAAC;EACpD,MAAM,CAACsB,UAAU,EAAEC,aAAa,CAAC,GAAGvB,QAAQ,CAAY,CAAC;EAEzD,MAAMwB,KAAK,GAAGtB,QAAQ,CAAC,CAAC;EAExBJ,SAAS,CAAC,MAAM;IACZ,IAAIiB,IAAI,EAAE;MACNI,eAAe,CAACJ,IAAI,CAAC;IACzB;EACJ,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEVd,mBAAmB,CACfY,GAAG,EACH,OAAO;IACHY,iBAAiB,EAAEL,YAAY,KAAK,EAAE,GAAGA,YAAY,GAAGM;EAC5D,CAAC,CAAC,EACF,CAACN,YAAY,CACjB,CAAC;EAED,MAAMO,aAAa,GAAG9B,WAAW,CAC5B+B,KAAoB,IAAK;IACtB,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBR,eAAe,CAAES,SAAS,IAAK;QAC3B,IAAI,CAACA,SAAS,EAAE;UACZ,OAAO,EAAE;QACb;QAEAX,eAAe,CAAEY,QAAQ,IAAK;UAC1B,MAAMC,MAAM,GAAG;YAAEC,EAAE,EAAE7B,MAAM,CAAC,CAAC;YAAE8B,IAAI,EAAEJ;UAAU,CAAC;UAEhD,IAAI,OAAOb,KAAK,KAAK,UAAU,EAAE;YAC7BA,KAAK,CAACe,MAAM,CAAC;UACjB;UAEA,OAAOD,QAAQ,GAAG,CAAC,GAAGA,QAAQ,EAAEC,MAAM,CAAC,GAAG,CAACA,MAAM,CAAC;QACtD,CAAC,CAAC;QAEF,OAAO,EAAE;MACb,CAAC,CAAC;IACN;IAEA,IAAIJ,KAAK,CAACC,GAAG,KAAK,WAAW,IAAIT,YAAY,KAAK,EAAE,EAAE;MAClD,IAAI,CAACE,UAAU,EAAE;QACb,IAAI,CAACJ,YAAY,EAAE;UACf;QACJ;QAEA,MAAMiB,aAAa,GAAGjB,YAAY,CAACA,YAAY,CAACkB,MAAM,GAAG,CAAC,CAAC,EAAEH,EAAE;QAE/DV,aAAa,CAACY,aAAa,CAAC;QAE5B;MACJ;MAEAhB,eAAe,CAAEkB,SAAS,IAAK;QAC3B,IAAI,CAACA,SAAS,EAAE;UACZ,OAAOA,SAAS;QACpB;QAEA,MAAMC,SAAS,GAAGD,SAAS,CAACA,SAAS,CAACD,MAAM,GAAG,CAAC,CAAC,EAAEH,EAAE;QAErD,IAAI,CAACK,SAAS,EAAE;UACZ,OAAOD,SAAS;QACpB;QAEA,MAAME,WAAW,GAAG,CAACF,SAAS,IAAI,EAAE,EAAEG,MAAM,CAAEC,GAAG,IAAKA,GAAG,CAACR,EAAE,KAAKK,SAAS,CAAC;QAE3E,IAAI,OAAOtB,QAAQ,KAAK,UAAU,EAAE;UAChCA,QAAQ,CAACsB,SAAS,CAAC;QACvB;QAEAf,aAAa,CAACG,SAAS,CAAC;QAExB,OAAOa,WAAW;MACtB,CAAC,CAAC;IACN;EACJ,CAAC,EACD,CAACnB,YAAY,EAAEF,YAAY,EAAED,KAAK,EAAED,QAAQ,EAAEM,UAAU,CAC5D,CAAC;EAED,MAAMoB,YAAY,GAAId,KAAoC,IAAK;IAC3DP,eAAe,CAACO,KAAK,CAACe,MAAM,CAACC,KAAK,CAAC;IAEnC,IAAIhB,KAAK,CAACe,MAAM,CAACC,KAAK,KAAK,EAAE,EAAE;MAC3BrB,aAAa,CAACG,SAAS,CAAC;IAC5B;EACJ,CAAC;EAED,MAAMmB,eAAe,GAAGhD,WAAW,CAC9BoC,EAAU,IAAK;IACZd,eAAe,CAAEkB,SAAS,IAAK;MAC3B,MAAME,WAAW,GAAG,CAACF,SAAS,IAAI,EAAE,EAAEG,MAAM,CAAEC,GAAG,IAAKA,GAAG,CAACR,EAAE,KAAKA,EAAE,CAAC;MAEpE,IAAI,OAAOjB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACiB,EAAE,CAAC;MAChB;MAEA,OAAOM,WAAW;IACtB,CAAC,CAAC;EACN,CAAC,EACD,CAACvB,QAAQ,CACb,CAAC;EAED,MAAM8B,OAAO,GAAG/C,OAAO,CAAC,MAAM;IAC1B,MAAMgD,KAAqB,GAAG,EAAE;IAEhC,IAAI,CAAC7B,YAAY,EAAE;MACf,OAAO6B,KAAK;IAChB;IAEA7B,YAAY,CAAC8B,OAAO,CAACC,KAAA,IAAkB;MAAA,IAAjB;QAAEf,IAAI;QAAED;MAAG,CAAC,GAAAgB,KAAA;MAC9BF,KAAK,CAACG,IAAI,cACNvD,KAAA,CAAAwD,aAAA,CAAC9C,KAAK;QACFwB,GAAG,EAAE,aAAaI,EAAE,EAAG;QACvBmB,eAAe,EACXnB,EAAE,KAAKX,UAAU,GAAKE,KAAK,CAAC,KAAK,CAAC,IAAeE,SAAS,GAAIA;MACjE,gBAED/B,KAAA,CAAAwD,aAAA,CAAC1C,wBAAwB,qBACrBd,KAAA,CAAAwD,aAAA,CAACzC,4BAA4B,QAAEwB,IAAmC,CAAC,eACnEvC,KAAA,CAAAwD,aAAA,CAAC7C,IAAI;QAAC+C,KAAK,EAAE,CAAC,UAAU,CAAE;QAACC,OAAO,EAAEA,CAAA,KAAMT,eAAe,CAACZ,EAAE;MAAE,CAAE,CAC1C,CACvB,CACX,CAAC;IACL,CAAC,CAAC;IAEF,OAAOc,KAAK;EAChB,CAAC,EAAE,CAACF,eAAe,EAAE3B,YAAY,EAAEI,UAAU,EAAEE,KAAK,CAAC,CAAC;EAEtD,OAAOzB,OAAO,CACV,mBACIJ,KAAA,CAAAwD,aAAA,CAAC5C,cAAc,QACVuC,OAAO,eACRnD,KAAA,CAAAwD,aAAA,CAAC3C,sBAAsB;IACnBM,WAAW,EAAEC,IAAI,IAAIA,IAAI,CAACqB,MAAM,GAAG,CAAC,GAAGV,SAAS,GAAGZ,WAAY;IAC/DyC,SAAS,EAAE5B,aAAc;IACzB6B,QAAQ,EAAEd,YAAa;IACvBE,KAAK,EAAExB;EAAa,CACvB,CACW,CACnB,EACD,CAAC0B,OAAO,EAAE1B,YAAY,EAAEO,aAAa,EAAEb,WAAW,EAAEC,IAAI,CAC5D,CAAC;AACL,CACJ,CAAC;AAED,eAAeJ,QAAQ","ignoreList":[]}

package/lib/types/components/search-input/SearchInput.d.ts

@@ -25,6 +25,10 @@ export type SearchInputProps = {
      * Placeholder for the input field
      */
     placeholder?: string;
+    /**
+     * Whether the SearchInput should be positioned absolute.
+     */
+    shouldUseAbsolutePositioning?: boolean;
     /**
      * The size of the input field
      */

package/lib/types/components/search-input/SearchInput.styles.d.ts

@@ -2,16 +2,20 @@ import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { InputSize } from '../input/Input';
 type StyledSearchInputProps = WithTheme<{
     $size: InputSize;
+    $shouldUseAbsolutePositioning: boolean;
 }>;
 export declare const StyledSearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSearchInputProps>> & string;
+export declare const StyledSearchInputPseudoElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type StyledMotionSearchInputContentWrapperProps = {
+    $shouldUseAbsolutePositioning: boolean;
+};
 export declare const StyledMotionSearchInputContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
-}>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+}, StyledMotionSearchInputContentWrapperProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledMotionSearchInputIconWrapperContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledMotionSearchInputIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/lib/types/components/tag-input/TagInput.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import type { Tag } from '../../types/tagInput';
 export type TagInputProps = {
     /**
@@ -18,5 +18,8 @@ export type TagInputProps = {
      */
     tags?: Tag[];
 };
-declare const TagInput: FC<TagInputProps>;
+export type TagInputRef = {
+    getUnsavedTagText: Tag['text'] | undefined;
+};
+declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<TagInputRef>>;
 export default TagInput;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.1015",
+    "version": "5.0.0-beta.1017",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -88,5 +88,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d2bfd712a1ec4c46f30292a3a5ae0f9fbd3de063"
+    "gitHead": "79d53ff3b44bc05550d2298d008b66125c93d292"
 }