@chayns-components/core 5.0.0-beta.37 → 5.0.0-beta.372

package/lib/components/search-box/SearchBox.styles.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSearchBox = exports.StyledMotionSearchBoxBody = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledSearchBox = exports.StyledSearchBox = _styledComponents.default.div``;
+const StyledMotionSearchBoxBody = exports.StyledMotionSearchBoxBody = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    background: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['001'];
+}};
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-top: none;
+    cursor: pointer;
+    width: ${_ref2 => {
+  let {
+    width
+  } = _ref2;
+  return width;
+}}px;
+    max-height: 300px;
+    overflow-y: ${_ref3 => {
+  let {
+    height
+  } = _ref3;
+  return height <= 300 ? 'hidden' : 'auto';
+}};
+    box-shadow: 0 0 0 1px
+        rgba(${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme['009-rgb'];
+}}, 0.08) inset;
+
+    &::-webkit-scrollbar {
+        width: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: rgba(160, 160, 160, 1);
+    }
+`;
+//# sourceMappingURL=SearchBox.styles.js.map

package/lib/components/search-box/SearchBox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledSearchBox","exports","styled","div","StyledMotionSearchBoxBody","motion","_ref","theme","_ref2","width","_ref3","height","_ref4"],"sources":["../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBox = styled.div``;\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n    height: number;\n    width: number;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n    background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['001']};\n    position: absolute;\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    border-top: none;\n    cursor: pointer;\n    width: ${({ width }) => width}px;\n    max-height: 300px;\n    overflow-y: ${({ height }) => (height <= 300 ? 'hidden' : 'auto')};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n\n    &::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: rgba(160, 160, 160, 1);\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAGhC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAI,EAAC;AAOpC,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAG,IAAAF,yBAAM,EAACG,oBAAM,CAACF,GAAG,CAAkC;AAC5F,kBAAkBG,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AAClC;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAMC,MAAM,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAE;AACtE;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEL;EAAsC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC"}

package/lib/components/search-box/search-box-item/SearchBoxItem.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import type { ISearchBoxItem } from '../types';
+export type SearchBoxItemProps = {
+    onSelect: (item: ISearchBoxItem) => void;
+    id: ISearchBoxItem['id'];
+    text: ISearchBoxItem['text'];
+};
+declare const SearchBoxItem: FC<SearchBoxItemProps>;
+export default SearchBoxItem;

package/lib/components/search-box/search-box-item/SearchBoxItem.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SearchBoxItem = require("./SearchBoxItem.styles");
+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 && Object.prototype.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 SearchBoxItem = _ref => {
+  let {
+    id,
+    text,
+    onSelect
+  } = _ref;
+  const handleClick = (0, _react.useCallback)(() => {
+    onSelect({
+      id,
+      text
+    });
+  }, [id, onSelect, text]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItem, {
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItemText, null, text)), [handleClick, text]);
+};
+SearchBoxItem.displayName = 'SearchBoxItem';
+var _default = exports.default = SearchBoxItem;
+//# sourceMappingURL=SearchBoxItem.js.map

package/lib/components/search-box/search-box-item/SearchBoxItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBoxItem.js","names":["_react","_interopRequireWildcard","require","_SearchBoxItem","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SearchBoxItem","_ref","id","text","onSelect","handleClick","useCallback","useMemo","createElement","StyledSearchBoxItem","onClick","StyledSearchBoxItemText","displayName","_default","exports"],"sources":["../../../../src/components/search-box/search-box-item/SearchBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport type { ISearchBoxItem } from '../types';\nimport { StyledSearchBoxItem, StyledSearchBoxItemText } from './SearchBoxItem.styles';\n\nexport type SearchBoxItemProps = {\n    onSelect: (item: ISearchBoxItem) => void;\n    id: ISearchBoxItem['id'];\n    text: ISearchBoxItem['text'];\n};\n\nconst SearchBoxItem: FC<SearchBoxItemProps> = ({ id, text, onSelect }) => {\n    const handleClick = useCallback(() => {\n        onSelect({ id, text });\n    }, [id, onSelect, text]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBoxItem onClick={handleClick}>\n                <StyledSearchBoxItemText>{text}</StyledSearchBoxItemText>\n            </StyledSearchBoxItem>\n        ),\n        [handleClick, text]\n    );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAAsF,SAAAE,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,SAAAJ,wBAAAI,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,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQtF,MAAMY,aAAqC,GAAGC,IAAA,IAA4B;EAAA,IAA3B;IAAEC,EAAE;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAAH,IAAA;EACjE,MAAMI,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAClCF,QAAQ,CAAC;MAAEF,EAAE;MAAEC;IAAK,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACD,EAAE,EAAEE,QAAQ,EAAED,IAAI,CAAC,CAAC;EAExB,OAAO,IAAAI,cAAO,EACV,mBACIhC,MAAA,CAAAU,OAAA,CAAAuB,aAAA,CAAC9B,cAAA,CAAA+B,mBAAmB;IAACC,OAAO,EAAEL;EAAY,gBACtC9B,MAAA,CAAAU,OAAA,CAAAuB,aAAA,CAAC9B,cAAA,CAAAiC,uBAAuB,QAAER,IAA8B,CACvC,CACxB,EACD,CAACE,WAAW,EAAEF,IAAI,CACtB,CAAC;AACL,CAAC;AAEDH,aAAa,CAACY,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7B,OAAA,GAE7Be,aAAa"}

package/lib/components/search-box/search-box-item/SearchBoxItem.styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const StyledSearchBoxItem: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}>>;
+export declare const StyledSearchBoxItemText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}>>;

package/lib/components/search-box/search-box-item/SearchBoxItem.styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSearchBoxItemText = exports.StyledSearchBoxItem = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledSearchBoxItem = exports.StyledSearchBoxItem = _styledComponents.default.div`
+    &:hover {
+        background: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['secondary-103'];
+}};
+    }
+`;
+const StyledSearchBoxItemText = exports.StyledSearchBoxItemText = _styledComponents.default.p`
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
+    margin: 5px;
+`;
+//# sourceMappingURL=SearchBoxItem.styles.js.map

package/lib/components/search-box/search-box-item/SearchBoxItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBoxItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledSearchBoxItem","exports","styled","div","_ref","theme","StyledSearchBoxItemText","p","_ref2","text"],"sources":["../../../../src/components/search-box/search-box-item/SearchBoxItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSearchBoxItemProps = WithTheme<unknown>;\nexport const StyledSearchBoxItem = styled.div<StyledSearchBoxItemProps>`\n    &:hover {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-103']};\n    }\n`;\n\ntype StyledSearchBoxItemTextProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxItemText = styled.p<StyledSearchBoxItemTextProps>`\n    color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.text};\n    margin: 5px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAIhC,MAAMG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA8B;AACxE;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACtF;AACA,CAAC;AAIM,MAAMC,uBAAuB,GAAAL,OAAA,CAAAK,uBAAA,GAAGJ,yBAAM,CAACK,CAAgC;AAC9E,aAAaC,KAAA;EAAA,IAAC;IAAEH;EAAoC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA,CAAC;AACrE;AACA,CAAC"}

package/lib/components/search-box/types.d.ts

@@ -0,0 +1,4 @@
+export interface ISearchBoxItem {
+    text: string;
+    id: string;
+}

package/lib/components/search-box/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/lib/components/search-box/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/search-box/types.ts"],"sourcesContent":["export interface ISearchBoxItem {\n    text: string;\n    id: string;\n}\n"],"mappings":""}

package/lib/components/search-box/utils.d.ts

@@ -0,0 +1,7 @@
+import type { ISearchBoxItem } from './types';
+interface SearchListOptions {
+    items: ISearchBoxItem[];
+    searchString: string;
+}
+export declare const searchList: ({ searchString, items }: SearchListOptions) => ISearchBoxItem[];
+export {};

package/lib/components/search-box/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchList = void 0;
+const searchList = _ref => {
+  let {
+    searchString,
+    items
+  } = _ref;
+  const matchingItems = [];
+  const lowercaseSearchString = searchString.toLowerCase();
+  items.forEach(item => {
+    const lowercaseText = item.text.toLowerCase();
+    if (lowercaseText.includes(lowercaseSearchString)) {
+      matchingItems.push(item);
+    }
+  });
+  return matchingItems;
+};
+exports.searchList = searchList;
+//# sourceMappingURL=utils.js.map

package/lib/components/search-box/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["searchList","_ref","searchString","items","matchingItems","lowercaseSearchString","toLowerCase","forEach","item","lowercaseText","text","includes","push","exports"],"sources":["../../../src/components/search-box/utils.ts"],"sourcesContent":["import type { ISearchBoxItem } from './types';\n\ninterface SearchListOptions {\n    items: ISearchBoxItem[];\n    searchString: string;\n}\n\nexport const searchList = ({ searchString, items }: SearchListOptions) => {\n    const matchingItems: ISearchBoxItem[] = [];\n\n    const lowercaseSearchString = searchString.toLowerCase();\n\n    items.forEach((item) => {\n        const lowercaseText = item.text.toLowerCase();\n\n        if (lowercaseText.includes(lowercaseSearchString)) {\n            matchingItems.push(item);\n        }\n    });\n\n    return matchingItems;\n};\n"],"mappings":";;;;;;AAOO,MAAMA,UAAU,GAAGC,IAAA,IAAgD;EAAA,IAA/C;IAAEC,YAAY;IAAEC;EAAyB,CAAC,GAAAF,IAAA;EACjE,MAAMG,aAA+B,GAAG,EAAE;EAE1C,MAAMC,qBAAqB,GAAGH,YAAY,CAACI,WAAW,CAAC,CAAC;EAExDH,KAAK,CAACI,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,aAAa,GAAGD,IAAI,CAACE,IAAI,CAACJ,WAAW,CAAC,CAAC;IAE7C,IAAIG,aAAa,CAACE,QAAQ,CAACN,qBAAqB,CAAC,EAAE;MAC/CD,aAAa,CAACQ,IAAI,CAACJ,IAAI,CAAC;IAC5B;EACJ,CAAC,CAAC;EAEF,OAAOJ,aAAa;AACxB,CAAC;AAACS,OAAA,CAAAb,UAAA,GAAAA,UAAA"}

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

@@ -0,0 +1,33 @@
+import React, { ChangeEventHandler, CSSProperties, FC } from 'react';
+export type SearchInputProps = {
+    /**
+     * Color of the icon
+     */
+    iconColor?: CSSProperties['color'];
+    /**
+     * Force the active state of the input and override the internal state
+     */
+    isActive?: boolean;
+    /**
+     * Function that is executed when the active state of the input changes
+     */
+    onActiveChange?: (isActive: boolean) => void;
+    /**
+     * Function that is executed when the text of the input changes
+     */
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Function that is executed when a key is pressed
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Placeholder for the input field
+     */
+    placeholder?: string;
+    /**
+     * Value if the input field should be controlled
+     */
+    value?: string;
+};
+declare const SearchInput: FC<SearchInputProps>;
+export default SearchInput;

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

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _Input = _interopRequireDefault(require("../input/Input"));
+var _SearchInput = require("./SearchInput.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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 SearchInput = _ref => {
+  let {
+    iconColor,
+    isActive,
+    onActiveChange,
+    onChange,
+    onKeyDown,
+    placeholder,
+    value
+  } = _ref;
+  const [isSearchInputActive, setIsSearchInputActive] = (0, _react.useState)(isActive ?? (typeof value === 'string' && value.trim() !== ''));
+  const inputRef = (0, _react.useRef)(null);
+  const theme = (0, _styledComponents.useTheme)();
+  const handleBackIconClick = (0, _react.useCallback)(() => setIsSearchInputActive(false), []);
+  const handleSearchIconClick = (0, _react.useCallback)(() => setIsSearchInputActive(true), []);
+  (0, _react.useEffect)(() => {
+    if (typeof onActiveChange === 'function') {
+      onActiveChange(isSearchInputActive);
+    }
+    if (isSearchInputActive) {
+      inputRef.current?.focus();
+    }
+  }, [isSearchInputActive, onActiveChange]);
+  (0, _react.useEffect)(() => {
+    if (typeof isActive === 'boolean') {
+      setIsSearchInputActive(isActive);
+    }
+  }, [isActive]);
+  return /*#__PURE__*/_react.default.createElement(_SearchInput.StyledSearchInput, {
+    className: "beta-chayns-search-input"
+  }, /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0,
+      position: 'absolute'
+    },
+    initial: {
+      opacity: 0
+    },
+    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
+    transition: {
+      duration: 0.3
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    color: iconColor,
+    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
+    size: 18
+  })))), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, isSearchInputActive && /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
+    animate: {
+      opacity: 1,
+      width: '100%'
+    },
+    exit: {
+      opacity: 0,
+      width: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0
+    },
+    key: "searchInputContentWrapper",
+    transition: {
+      duration: 0.3
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    iconElement: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      color: theme.text,
+      icons: ['far fa-search']
+    }),
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    placeholder: placeholder,
+    ref: inputRef,
+    shouldShowClearIcon: true,
+    value: value
+  }))));
+};
+SearchInput.displayName = 'SearchInput';
+var _default = exports.default = SearchInput;
+//# sourceMappingURL=SearchInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_styledComponents","_Icon","_interopRequireDefault","_Input","_SearchInput","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","value","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","current","focus","createElement","StyledSearchInput","className","StyledMotionSearchInputIconWrapper","AnimatePresence","initial","StyledMotionSearchInputIconWrapperContent","animate","opacity","exit","position","key","transition","duration","color","icons","onClick","size","StyledMotionSearchInputContentWrapper","width","iconElement","text","ref","shouldShowClearIcon","displayName","_default","exports"],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\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     * 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    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 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    return (\n        <StyledSearchInput className=\"beta-chayns-search-input\">\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                    >\n                        <Icon\n                            color={iconColor}\n                            icons={isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']}\n                            onClick={\n                                isSearchInputActive ? handleBackIconClick : handleSearchIconClick\n                            }\n                            size={18}\n                        />\n                    </StyledMotionSearchInputIconWrapperContent>\n                </AnimatePresence>\n            </StyledMotionSearchInputIconWrapper>\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                            iconElement={<Icon color={theme.text} icons={['far fa-search']} />}\n                            onChange={onChange}\n                            onKeyDown={onKeyDown}\n                            placeholder={placeholder}\n                            ref={inputRef}\n                            shouldShowClearIcon\n                            value={value}\n                        />\n                    </StyledMotionSearchInputContentWrapper>\n                )}\n            </AnimatePresence>\n        </StyledSearchInput>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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"}