@chayns-components/core 5.0.0-beta.49 → 5.0.0-beta.492

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

@@ -0,0 +1,71 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledSearchBox = styled.div``;
+export const StyledMotionSearchBoxBody = styled(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;
+
+    // Styles for custom scrollbar
+    ${_ref5 => {
+  let {
+    $browser,
+    theme
+  } = _ref5;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `;
+}}
+`;
+//# sourceMappingURL=SearchBox.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.styles.js","names":["motion","styled","css","StyledSearchBox","div","StyledMotionSearchBoxBody","_ref","theme","_ref2","$width","_ref3","$height","_ref4","_ref5","$browser"],"sources":["../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } 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    $browser: Browser | 'bot' | null | undefined;\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    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledMotionSearchBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAI,EAAC;AAQ3C,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACD,MAAM,CAACI,GAAG,CAAkC;AAC5F,kBAAkBE,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;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AACpC;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAE;AACxE;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEL;EAAsC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC/E;AACA;AACA,MAAMM,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEP;EAAsC,CAAC,GAAAM,KAAA;EAAA,OAClDC,QAAQ,KAAK,SAAS,GAChBZ,GAAI;AAClB,0CAA0CK,KAAK,CAAC,UAAU,CAAE;AAC5D;AACA,eAAe,GACDL,GAAI;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CK,KAAK,CAAC,UAAU,CAAE;AACjE;AACA;AACA,eAAe;AAAA,CAAC;AAChB,CAAC"}

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

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

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

@@ -0,0 +1,27 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyledSearchBoxItem, StyledSearchBoxItemImage, StyledSearchBoxItemText } from './SearchBoxItem.styles';
+const SearchBoxItem = _ref => {
+  let {
+    id,
+    text,
+    imageUrl,
+    shouldShowRoundImage,
+    onSelect
+  } = _ref;
+  const handleClick = useCallback(() => {
+    onSelect({
+      id,
+      text
+    });
+  }, [id, onSelect, text]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBoxItem, {
+    id: `search-box-item__${id}`,
+    onClick: handleClick
+  }, imageUrl && /*#__PURE__*/React.createElement(StyledSearchBoxItemImage, {
+    src: imageUrl,
+    $shouldShowRoundImage: shouldShowRoundImage
+  }), /*#__PURE__*/React.createElement(StyledSearchBoxItemText, null, text)), [handleClick, id, imageUrl, shouldShowRoundImage, text]);
+};
+SearchBoxItem.displayName = 'SearchBoxItem';
+export 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","useCallback","useMemo","StyledSearchBoxItem","StyledSearchBoxItemImage","StyledSearchBoxItemText","SearchBoxItem","_ref","id","text","imageUrl","shouldShowRoundImage","onSelect","handleClick","createElement","onClick","src","$shouldShowRoundImage","displayName"],"sources":["../../../../src/components/search-box/search-box-item/SearchBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport type { ISearchBoxItem } from '../../../types/searchBox';\nimport {\n    StyledSearchBoxItem,\n    StyledSearchBoxItemImage,\n    StyledSearchBoxItemText,\n} from './SearchBoxItem.styles';\n\nexport type SearchBoxItemProps = {\n    onSelect: (item: ISearchBoxItem) => void;\n    id: ISearchBoxItem['id'];\n    text: ISearchBoxItem['text'];\n    imageUrl?: ISearchBoxItem['imageUrl'];\n    shouldShowRoundImage?: boolean;\n};\n\nconst SearchBoxItem: FC<SearchBoxItemProps> = ({\n    id,\n    text,\n    imageUrl,\n    shouldShowRoundImage,\n    onSelect,\n}) => {\n    const handleClick = useCallback(() => {\n        onSelect({ id, text });\n    }, [id, onSelect, text]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBoxItem id={`search-box-item__${id}`} onClick={handleClick}>\n                {imageUrl && (\n                    <StyledSearchBoxItemImage\n                        src={imageUrl}\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                <StyledSearchBoxItemText>{text}</StyledSearchBoxItemText>\n            </StyledSearchBoxItem>\n        ),\n        [handleClick, id, imageUrl, shouldShowRoundImage, text],\n    );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEvD,SACIC,mBAAmB,EACnBC,wBAAwB,EACxBC,uBAAuB,QACpB,wBAAwB;AAU/B,MAAMC,aAAqC,GAAGC,IAAA,IAMxC;EAAA,IANyC;IAC3CC,EAAE;IACFC,IAAI;IACJC,QAAQ;IACRC,oBAAoB;IACpBC;EACJ,CAAC,GAAAL,IAAA;EACG,MAAMM,WAAW,GAAGZ,WAAW,CAAC,MAAM;IAClCW,QAAQ,CAAC;MAAEJ,EAAE;MAAEC;IAAK,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACD,EAAE,EAAEI,QAAQ,EAAEH,IAAI,CAAC,CAAC;EAExB,OAAOP,OAAO,CACV,mBACIF,KAAA,CAAAc,aAAA,CAACX,mBAAmB;IAACK,EAAE,EAAG,oBAAmBA,EAAG,EAAE;IAACO,OAAO,EAAEF;EAAY,GACnEH,QAAQ,iBACLV,KAAA,CAAAc,aAAA,CAACV,wBAAwB;IACrBY,GAAG,EAAEN,QAAS;IACdO,qBAAqB,EAAEN;EAAqB,CAC/C,CACJ,eACDX,KAAA,CAAAc,aAAA,CAACT,uBAAuB,QAAEI,IAA8B,CACvC,CACxB,EACD,CAACI,WAAW,EAAEL,EAAE,EAAEE,QAAQ,EAAEC,oBAAoB,EAAEF,IAAI,CAC1D,CAAC;AACL,CAAC;AAEDH,aAAa,CAACY,WAAW,GAAG,eAAe;AAE3C,eAAeZ,aAAa"}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+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;
+}>>;
+type StyledSearchBoxItemImageProps = WithTheme<{
+    $shouldShowRoundImage?: boolean;
+}>;
+export declare const StyledSearchBoxItemImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledSearchBoxItemImageProps>>;
+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;
+}>>;
+export {};

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

@@ -0,0 +1,55 @@
+import styled, { css } from 'styled-components';
+export const StyledSearchBoxItem = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+
+    &:hover {
+        background: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['secondary-103'];
+}};
+    }
+
+    &:focus {
+        background: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['secondary-103'];
+}};
+    }
+`;
+export const StyledSearchBoxItemImage = styled.img`
+    box-shadow: 0 0 0 1px
+        rgba(${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['009-rgb'];
+}}, 0.15);
+    height: 22px;
+    width: 22px;
+
+    ${_ref4 => {
+  let {
+    $shouldShowRoundImage
+  } = _ref4;
+  return $shouldShowRoundImage && css`
+            border-radius: 50%;
+        `;
+}}
+`;
+export const StyledSearchBoxItemText = styled.p`
+    color: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  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":["styled","css","StyledSearchBoxItem","div","_ref","theme","_ref2","StyledSearchBoxItemImage","img","_ref3","_ref4","$shouldShowRoundImage","StyledSearchBoxItemText","p","_ref5","text"],"sources":["../../../../src/components/search-box/search-box-item/SearchBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSearchBoxItemProps = WithTheme<unknown>;\nexport const StyledSearchBoxItem = styled.div<StyledSearchBoxItemProps>`\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n\n    &:hover {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-103']};\n    }\n\n    &:focus {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-103']};\n    }\n`;\n\ntype StyledSearchBoxItemImageProps = WithTheme<{ $shouldShowRoundImage?: boolean }>;\n\nexport const StyledSearchBoxItemImage = styled.img<StyledSearchBoxItemImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledSearchBoxItemImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA8B;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACtF;AACA;AACA;AACA,sBAAsBC,KAAA;EAAA,IAAC;IAAED;EAAgC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACtF;AACA,CAAC;AAID,OAAO,MAAME,wBAAwB,GAAGP,MAAM,CAACQ,GAAmC;AAClF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEJ;EAAqC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,MAAMK,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,IACrBV,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAID,OAAO,MAAMW,uBAAuB,GAAGZ,MAAM,CAACa,CAAgC;AAC9E,aAAaC,KAAA;EAAA,IAAC;IAAET;EAAoC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAACU,IAAI;AAAA,CAAC;AACrE;AACA,CAAC"}

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,93 @@
+import { AnimatePresence } from 'framer-motion';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
+import Icon from '../icon/Icon';
+import Input from '../input/Input';
+import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput } from './SearchInput.styles';
+const SearchInput = _ref => {
+  let {
+    iconColor,
+    isActive,
+    onActiveChange,
+    onChange,
+    onKeyDown,
+    placeholder,
+    value
+  } = _ref;
+  const [isSearchInputActive, setIsSearchInputActive] = useState(isActive ?? (typeof value === 'string' && value.trim() !== ''));
+  const inputRef = useRef(null);
+  const theme = useTheme();
+  const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);
+  const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);
+  useEffect(() => {
+    if (typeof onActiveChange === 'function') {
+      onActiveChange(isSearchInputActive);
+    }
+    if (isSearchInputActive) {
+      inputRef.current?.focus();
+    }
+  }, [isSearchInputActive, onActiveChange]);
+  useEffect(() => {
+    if (typeof isActive === 'boolean') {
+      setIsSearchInputActive(isActive);
+    }
+  }, [isActive]);
+  return /*#__PURE__*/React.createElement(StyledSearchInput, {
+    className: "beta-chayns-search-input"
+  }, /*#__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
+    }
+  }, /*#__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, {
+    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, {
+    iconElement: /*#__PURE__*/React.createElement(Icon, {
+      color: theme.text,
+      icons: ['far fa-search']
+    }),
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    placeholder: placeholder,
+    ref: inputRef,
+    shouldShowClearIcon: true,
+    value: value
+  }))));
+};
+SearchInput.displayName = 'SearchInput';
+export default SearchInput;
+//# sourceMappingURL=SearchInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","useTheme","Icon","Input","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","value","isSearchInputActive","setIsSearchInputActive","trim","inputRef","theme","handleBackIconClick","handleSearchIconClick","current","focus","createElement","className","initial","animate","opacity","exit","position","key","transition","duration","color","icons","onClick","size","width","iconElement","text","ref","shouldShowClearIcon","displayName"],"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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"}