@chayns-components/core 5.0.0-beta.997 → 5.0.0

package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js

@@ -1,65 +1,29 @@
-import { motion } from 'framer-motion';
 import styled, { css } from 'styled-components';
-export const StyledMotionSearchBoxBody = styled(motion.div)`
-    background: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme['101'];
-}};
-    position: absolute;
-    z-index: 4;
+export const StyledSearchBoxBody = styled.div`
     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;
-    width: ${_ref2 => {
-  let {
-    $width
-  } = _ref2;
-  return $width - 2;
-}}px;
-    max-height: 300px;
-    box-shadow: 0 0 0 1px
-        rgba(${_ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme['009-rgb'];
-}}, 0.08) inset;
 `;
 export const StyledSearchBoxBodyHead = styled.div`
     padding: 10px 10px 5px;
     display: flex;
     flex-direction: column;
 
-    ${_ref4 => {
-  let {
-    $hasGroupName
-  } = _ref4;
-  return $hasGroupName && css`
+    ${({
+  $hasGroupName
+}) => $hasGroupName && css`
             gap: 15px;
-        `;
-}}
+        `}
 
-    ${_ref5 => {
-  let {
-    $hasScrolled
-  } = _ref5;
-  return $hasScrolled && css`
+    ${({
+  $hasScrolled
+}) => $hasScrolled && css`
             box-shadow: 0 1px 4px #0000001a;
-        `;
-}}
+        `}
 `;
 export const StyledSearchBoxBodyHeadGroupName = styled.div`
-    color: ${_ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.text;
-}};
+    color: ${({
+  theme
+}) => theme.text};
     font-weight: bold;
 `;
 export const StyledSearchBoxBodyContent = styled.div`
@@ -67,27 +31,19 @@ export const StyledSearchBoxBodyContent = styled.div`
     flex-direction: column;
     cursor: pointer;
     width: 100%;
-    max-height: ${_ref7 => {
-  let {
-    $headHeight
-  } = _ref7;
-  return 300 - $headHeight;
-}}px;
-    overflow-y: ${_ref8 => {
-  let {
-    $height,
-    $headHeight
-  } = _ref8;
-  return $height + $headHeight <= 300 ? 'hidden' : 'auto';
-}};
+    max-height: ${({
+  $headHeight
+}) => 300 - $headHeight}px;
+    overflow-y: ${({
+  $height,
+  $headHeight
+}) => $height + $headHeight <= 300 ? 'hidden' : 'auto'};
 
     // Styles for custom scrollbar
-    ${_ref9 => {
-  let {
-    $browser,
-    theme
-  } = _ref9;
-  return $browser === 'firefox' ? css`
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? css`
                   scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
                   scrollbar-width: thin;
               ` : css`
@@ -108,7 +64,6 @@ export const StyledSearchBoxBodyContent = styled.div`
                       background-color: rgba(${theme['text-rgb']}, 0.15);
                       border-radius: 20px;
                   }
-              `;
-}}
+              `}
 `;
 //# sourceMappingURL=SearchBoxBody.styles.js.map

package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxBody.styles.js","names":["motion","styled","css","StyledMotionSearchBoxBody","div","_ref","theme","_ref2","$width","_ref3","StyledSearchBoxBodyHead","_ref4","$hasGroupName","_ref5","$hasScrolled","StyledSearchBoxBodyHeadGroupName","_ref6","text","StyledSearchBoxBodyContent","_ref7","$headHeight","_ref8","$height","_ref9","$browser"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../../types/chayns';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n    $width: number;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n    background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['101']};\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    width: ${({ $width }) => $width - 2}px;\n    max-height: 300px;\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n`;\n\nexport const StyledSearchBoxBodyHead = styled.div<StyledSearchBoxHeadProps>`\n    padding: 10px 10px 5px;\n    display: flex;\n    flex-direction: column;\n\n    ${({ $hasGroupName }) =>\n        $hasGroupName &&\n        css`\n            gap: 15px;\n        `}\n\n    ${({ $hasScrolled }) =>\n        $hasScrolled &&\n        css`\n            box-shadow: 0 1px 4px #0000001a;\n        `}\n`;\n\ntype StyledSearchBoxHeadProps = WithTheme<{ $hasScrolled: boolean; $hasGroupName: boolean }>;\n\ntype StyledSearchBoxBodyHeadGroupNameNameProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxBodyHeadGroupName = styled.div<StyledSearchBoxBodyHeadGroupNameNameProps>`\n    color: ${({ theme }: StyledSearchBoxBodyHeadGroupNameNameProps) => theme.text};\n    font-weight: bold;\n`;\n\ntype StyledSearchBoxBodyContentProps = WithTheme<{\n    $height: number;\n    $headHeight: number;\n    $browser: BrowserName;\n}>;\n\nexport const StyledSearchBoxBodyContent = styled.div<StyledSearchBoxBodyContentProps>`\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    max-height: ${({ $headHeight }) => 300 - $headHeight}px;\n    overflow-y: ${({ $height, $headHeight }) => ($height + $headHeight <= 300 ? 'hidden' : 'auto')};\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledSearchBoxBodyContentProps) =>\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":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F,kBAAkBC,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM,GAAG,CAAC;AAAA;AACvC;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEH;EAAsC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,SAAS,CAAC;AAAA;AAC9E,CAAC;AAED,OAAO,MAAMI,uBAAuB,GAAGT,MAAM,CAACG,GAA6B;AAC3E;AACA;AACA;AACA;AACA,MAAMO,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,IACbV,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMW,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,IACZZ,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAMa,gCAAgC,GAAGd,MAAM,CAACG,GAA8C;AACrG,aAAaY,KAAA;EAAA,IAAC;IAAEV;EAAiD,CAAC,GAAAU,KAAA;EAAA,OAAKV,KAAK,CAACW,IAAI;AAAA;AACjF;AACA,CAAC;AAQD,OAAO,MAAMC,0BAA0B,GAAGjB,MAAM,CAACG,GAAoC;AACrF;AACA;AACA;AACA;AACA,kBAAkBe,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAK,GAAG,GAAGC,WAAW;AAAA;AACxD,kBAAkBC,KAAA;EAAA,IAAC;IAAEC,OAAO;IAAEF;EAAY,CAAC,GAAAC,KAAA;EAAA,OAAMC,OAAO,GAAGF,WAAW,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAC;AAClG;AACA;AACA,MAAMG,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAElB;EAAuC,CAAC,GAAAiB,KAAA;EAAA,OACnDC,QAAQ,KAAK,SAAS,GAChBtB,GAAG;AACjB,0CAA0CI,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDJ,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CI,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchBoxBody.styles.js","names":["styled","css","StyledSearchBoxBody","div","StyledSearchBoxBodyHead","$hasGroupName","$hasScrolled","StyledSearchBoxBodyHeadGroupName","theme","text","StyledSearchBoxBodyContent","$headHeight","$height","$browser"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BrowserName } from '../../../types/chayns';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBoxBody = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const StyledSearchBoxBodyHead = styled.div<StyledSearchBoxHeadProps>`\n    padding: 10px 10px 5px;\n    display: flex;\n    flex-direction: column;\n\n    ${({ $hasGroupName }) =>\n        $hasGroupName &&\n        css`\n            gap: 15px;\n        `}\n\n    ${({ $hasScrolled }) =>\n        $hasScrolled &&\n        css`\n            box-shadow: 0 1px 4px #0000001a;\n        `}\n`;\n\ntype StyledSearchBoxHeadProps = WithTheme<{ $hasScrolled: boolean; $hasGroupName: boolean }>;\n\ntype StyledSearchBoxBodyHeadGroupNameNameProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxBodyHeadGroupName = styled.div<StyledSearchBoxBodyHeadGroupNameNameProps>`\n    color: ${({ theme }: StyledSearchBoxBodyHeadGroupNameNameProps) => theme.text};\n    font-weight: bold;\n`;\n\ntype StyledSearchBoxBodyContentProps = WithTheme<{\n    $height: number;\n    $headHeight: number;\n    $browser: BrowserName;\n}>;\n\nexport const StyledSearchBoxBodyContent = styled.div<StyledSearchBoxBodyContentProps>`\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    max-height: ${({ $headHeight }) => 300 - $headHeight}px;\n    overflow-y: ${({ $height, $headHeight }) => ($height + $headHeight <= 300 ? 'hidden' : 'auto')};\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledSearchBoxBodyContentProps) =>\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":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAAG;AAC7C;AACA;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGJ,MAAM,CAACG,GAA6B;AAC3E;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEE;AAAc,CAAC,KAChBA,aAAa,IACbJ,GAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEK;AAAa,CAAC,KACfA,YAAY,IACZL,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAMD,OAAO,MAAMM,gCAAgC,GAAGP,MAAM,CAACG,GAA8C;AACrG,aAAa,CAAC;EAAEK;AAAiD,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjF;AACA,CAAC;AAQD,OAAO,MAAMC,0BAA0B,GAAGV,MAAM,CAACG,GAAoC;AACrF;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEQ;AAAY,CAAC,KAAK,GAAG,GAAGA,WAAW;AACxD,kBAAkB,CAAC;EAAEC,OAAO;EAAED;AAAY,CAAC,KAAMC,OAAO,GAAGD,WAAW,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAO;AAClG;AACA;AACA,MAAM,CAAC;EAAEE,QAAQ;EAAEL;AAAuC,CAAC,KACnDK,QAAQ,KAAK,SAAS,GAChBZ,GAAG;AACjB,0CAA0CO,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDP,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CO,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}

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

@@ -1,17 +1,19 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyledSearchBoxItem, StyledSearchBoxItemImage, StyledSearchBoxItemText } from './SearchBoxItem.styles';
-const SearchBoxItem = _ref => {
-  let {
-    id,
-    text,
-    imageUrl,
-    shouldShowRoundImage,
-    onSelect,
-    groupName
-  } = _ref;
-  const handleClick = useCallback(() => {
+const SearchBoxItem = ({
+  id,
+  text,
+  imageUrl,
+  shouldShowRoundImage,
+  onSelect,
+  groupName,
+  tabIndex
+}) => {
+  const handleClick = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
     onSelect({
-      id,
+      id: id === 'input-value' ? text : id,
       text,
       imageUrl
     }, groupName);
@@ -22,7 +24,8 @@ const SearchBoxItem = _ref => {
   }
   return useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBoxItem, {
     id: idString,
-    onClick: handleClick
+    onClick: handleClick,
+    tabIndex: tabIndex
   }, imageUrl && /*#__PURE__*/React.createElement(StyledSearchBoxItemImage, {
     src: imageUrl,
     $shouldShowRoundImage: shouldShowRoundImage
@@ -30,7 +33,7 @@ const SearchBoxItem = _ref => {
     dangerouslySetInnerHTML: {
       __html: text
     }
-  })), [handleClick, idString, imageUrl, shouldShowRoundImage, text]);
+  })), [handleClick, idString, imageUrl, shouldShowRoundImage, text, tabIndex]);
 };
 SearchBoxItem.displayName = 'SearchBoxItem';
 export default SearchBoxItem;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxItem.js","names":["React","useCallback","useMemo","StyledSearchBoxItem","StyledSearchBoxItemImage","StyledSearchBoxItemText","SearchBoxItem","_ref","id","text","imageUrl","shouldShowRoundImage","onSelect","groupName","handleClick","idString","createElement","onClick","src","$shouldShowRoundImage","dangerouslySetInnerHTML","__html","displayName"],"sources":["../../../../../src/components/search-box/search-box-item/SearchBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../../types/searchBox';\nimport {\n    StyledSearchBoxItem,\n    StyledSearchBoxItemImage,\n    StyledSearchBoxItemText,\n} from './SearchBoxItem.styles';\n\nexport type SearchBoxItemProps = {\n    onSelect: (item: ISearchBoxItem, groupName?: ISearchBoxItems['groupName']) => void;\n    id: ISearchBoxItem['id'];\n    text: ISearchBoxItem['text'];\n    imageUrl?: ISearchBoxItem['imageUrl'];\n    shouldShowRoundImage?: boolean;\n    groupName?: ISearchBoxItems['groupName'];\n};\n\nconst SearchBoxItem: FC<SearchBoxItemProps> = ({\n    id,\n    text,\n    imageUrl,\n    shouldShowRoundImage,\n    onSelect,\n    groupName,\n}) => {\n    const handleClick = useCallback(() => {\n        onSelect({ id, text, imageUrl }, groupName);\n    }, [onSelect, id, text, imageUrl, groupName]);\n\n    let idString = `search-box-item__${id}`;\n\n    if (groupName) {\n        idString = `_${groupName}`;\n    }\n\n    return useMemo(\n        () => (\n            <StyledSearchBoxItem id={idString} onClick={handleClick}>\n                {imageUrl && (\n                    <StyledSearchBoxItemImage\n                        src={imageUrl}\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                <StyledSearchBoxItemText dangerouslySetInnerHTML={{ __html: text }} />\n            </StyledSearchBoxItem>\n        ),\n        [handleClick, idString, 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;AAW/B,MAAMC,aAAqC,GAAGC,IAAA,IAOxC;EAAA,IAPyC;IAC3CC,EAAE;IACFC,IAAI;IACJC,QAAQ;IACRC,oBAAoB;IACpBC,QAAQ;IACRC;EACJ,CAAC,GAAAN,IAAA;EACG,MAAMO,WAAW,GAAGb,WAAW,CAAC,MAAM;IAClCW,QAAQ,CAAC;MAAEJ,EAAE;MAAEC,IAAI;MAAEC;IAAS,CAAC,EAAEG,SAAS,CAAC;EAC/C,CAAC,EAAE,CAACD,QAAQ,EAAEJ,EAAE,EAAEC,IAAI,EAAEC,QAAQ,EAAEG,SAAS,CAAC,CAAC;EAE7C,IAAIE,QAAQ,GAAG,oBAAoBP,EAAE,EAAE;EAEvC,IAAIK,SAAS,EAAE;IACXE,QAAQ,GAAG,IAAIF,SAAS,EAAE;EAC9B;EAEA,OAAOX,OAAO,CACV,mBACIF,KAAA,CAAAgB,aAAA,CAACb,mBAAmB;IAACK,EAAE,EAAEO,QAAS;IAACE,OAAO,EAAEH;EAAY,GACnDJ,QAAQ,iBACLV,KAAA,CAAAgB,aAAA,CAACZ,wBAAwB;IACrBc,GAAG,EAAER,QAAS;IACdS,qBAAqB,EAAER;EAAqB,CAC/C,CACJ,eACDX,KAAA,CAAAgB,aAAA,CAACX,uBAAuB;IAACe,uBAAuB,EAAE;MAAEC,MAAM,EAAEZ;IAAK;EAAE,CAAE,CACpD,CACxB,EACD,CAACK,WAAW,EAAEC,QAAQ,EAAEL,QAAQ,EAAEC,oBAAoB,EAAEF,IAAI,CAChE,CAAC;AACL,CAAC;AAEDH,aAAa,CAACgB,WAAW,GAAG,eAAe;AAE3C,eAAehB,aAAa","ignoreList":[]}
+{"version":3,"file":"SearchBoxItem.js","names":["React","useCallback","useMemo","StyledSearchBoxItem","StyledSearchBoxItemImage","StyledSearchBoxItemText","SearchBoxItem","id","text","imageUrl","shouldShowRoundImage","onSelect","groupName","tabIndex","handleClick","event","preventDefault","stopPropagation","idString","createElement","onClick","src","$shouldShowRoundImage","dangerouslySetInnerHTML","__html","displayName"],"sources":["../../../../../src/components/search-box/search-box-item/SearchBoxItem.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, useMemo } from 'react';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../../types/searchBox';\nimport {\n    StyledSearchBoxItem,\n    StyledSearchBoxItemImage,\n    StyledSearchBoxItemText,\n} from './SearchBoxItem.styles';\n\nexport type SearchBoxItemProps = {\n    onSelect: (item: ISearchBoxItem, groupName?: ISearchBoxItems['groupName']) => void;\n    id: ISearchBoxItem['id'];\n    text: ISearchBoxItem['text'];\n    imageUrl?: ISearchBoxItem['imageUrl'];\n    shouldShowRoundImage?: boolean;\n    groupName?: ISearchBoxItems['groupName'];\n    tabIndex: number;\n};\n\nconst SearchBoxItem: FC<SearchBoxItemProps> = ({\n    id,\n    text,\n    imageUrl,\n    shouldShowRoundImage,\n    onSelect,\n    groupName,\n    tabIndex,\n}) => {\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            onSelect({ id: id === 'input-value' ? text : id, text, imageUrl }, groupName);\n        },\n        [onSelect, id, text, imageUrl, groupName],\n    );\n\n    let idString = `search-box-item__${id}`;\n\n    if (groupName) {\n        idString = `_${groupName}`;\n    }\n\n    return useMemo(\n        () => (\n            <StyledSearchBoxItem id={idString} onClick={handleClick} tabIndex={tabIndex}>\n                {imageUrl && (\n                    <StyledSearchBoxItemImage\n                        src={imageUrl}\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                <StyledSearchBoxItemText dangerouslySetInnerHTML={{ __html: text }} />\n            </StyledSearchBoxItem>\n        ),\n        [handleClick, idString, imageUrl, shouldShowRoundImage, text, tabIndex],\n    );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAoBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEnE,SACIC,mBAAmB,EACnBC,wBAAwB,EACxBC,uBAAuB,QACpB,wBAAwB;AAY/B,MAAMC,aAAqC,GAAGA,CAAC;EAC3CC,EAAE;EACFC,IAAI;EACJC,QAAQ;EACRC,oBAAoB;EACpBC,QAAQ;EACRC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAGb,WAAW,CAC1Bc,KAAiB,IAAK;IACnBA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvBN,QAAQ,CAAC;MAAEJ,EAAE,EAAEA,EAAE,KAAK,aAAa,GAAGC,IAAI,GAAGD,EAAE;MAAEC,IAAI;MAAEC;IAAS,CAAC,EAAEG,SAAS,CAAC;EACjF,CAAC,EACD,CAACD,QAAQ,EAAEJ,EAAE,EAAEC,IAAI,EAAEC,QAAQ,EAAEG,SAAS,CAC5C,CAAC;EAED,IAAIM,QAAQ,GAAG,oBAAoBX,EAAE,EAAE;EAEvC,IAAIK,SAAS,EAAE;IACXM,QAAQ,GAAG,IAAIN,SAAS,EAAE;EAC9B;EAEA,OAAOV,OAAO,CACV,mBACIF,KAAA,CAAAmB,aAAA,CAAChB,mBAAmB;IAACI,EAAE,EAAEW,QAAS;IAACE,OAAO,EAAEN,WAAY;IAACD,QAAQ,EAAEA;EAAS,GACvEJ,QAAQ,iBACLT,KAAA,CAAAmB,aAAA,CAACf,wBAAwB;IACrBiB,GAAG,EAAEZ,QAAS;IACda,qBAAqB,EAAEZ;EAAqB,CAC/C,CACJ,eACDV,KAAA,CAAAmB,aAAA,CAACd,uBAAuB;IAACkB,uBAAuB,EAAE;MAAEC,MAAM,EAAEhB;IAAK;EAAE,CAAE,CACpD,CACxB,EACD,CAACM,WAAW,EAAEI,QAAQ,EAAET,QAAQ,EAAEC,oBAAoB,EAAEF,IAAI,EAAEK,QAAQ,CAC1E,CAAC;AACL,CAAC;AAEDP,aAAa,CAACmB,WAAW,GAAG,eAAe;AAE3C,eAAenB,aAAa","ignoreList":[]}

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

@@ -6,59 +6,41 @@ export const StyledSearchBoxItem = styled.div`
     padding: 4px 10px;
 
     &:hover {
-        background: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme['secondary-102'];
-}};
+        background: ${({
+  theme
+}) => theme['secondary-102']};
     }
 
-    &:focus {
-        background: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme['secondary-102'];
-}};
+    &[tabindex='0'] {
+        background: ${({
+  theme
+}) => theme['secondary-102']};
     }
 `;
 export const StyledSearchBoxItemImage = styled.img`
     box-shadow: 0 0 0 1px
-        rgba(${_ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme['009-rgb'];
-}}, 0.15);
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.15);
     height: 22px;
     width: 22px;
 
-    ${_ref4 => {
-  let {
-    $shouldShowRoundImage
-  } = _ref4;
-  return $shouldShowRoundImage && css`
+    ${({
+  $shouldShowRoundImage
+}) => $shouldShowRoundImage && css`
             border-radius: 50%;
-        `;
-}}
+        `}
 `;
 export const StyledSearchBoxItemText = styled.p`
-    color: ${_ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.text;
-}};
+    color: ${({
+  theme
+}) => theme.text};
     margin: 5px 0 !important;
 
     b {
-        color: ${_ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.headline;
-}};
+        color: ${({
+  theme
+}) => theme.headline};
     }
 `;
 //# sourceMappingURL=SearchBoxItem.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxItem.styles.js","names":["styled","css","StyledSearchBoxItem","div","_ref","theme","_ref2","StyledSearchBoxItemImage","img","_ref3","_ref4","$shouldShowRoundImage","StyledSearchBoxItemText","p","_ref5","text","_ref6","headline"],"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-102']};\n    }\n\n    &:focus {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-102']};\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 0 !important;\n\n    b {\n        color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.headline};\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,eAAe,CAAC;AAAA;AACrF;AACA;AACA;AACA,sBAAsBC,KAAA;EAAA,IAAC;IAAED;EAAgC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,eAAe,CAAC;AAAA;AACrF;AACA,CAAC;AAID,OAAO,MAAME,wBAAwB,GAAGP,MAAM,CAACQ,GAAkC;AACjF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEJ;EAAqC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA;AAC7E;AACA;AACA;AACA,MAAMK,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,IACrBV,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAID,OAAO,MAAMW,uBAAuB,GAAGZ,MAAM,CAACa,CAA+B;AAC7E,aAAaC,KAAA;EAAA,IAAC;IAAET;EAAoC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAACU,IAAI;AAAA;AACpE;AACA;AACA;AACA,iBAAiBC,KAAA;EAAA,IAAC;IAAEX;EAAoC,CAAC,GAAAW,KAAA;EAAA,OAAKX,KAAK,CAACY,QAAQ;AAAA;AAC5E;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchBoxItem.styles.js","names":["styled","css","StyledSearchBoxItem","div","theme","StyledSearchBoxItemImage","img","$shouldShowRoundImage","StyledSearchBoxItemText","p","text","headline"],"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-102']};\n    }\n\n    &[tabindex='0'] {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-102']};\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 0 !important;\n\n    b {\n        color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.headline};\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,eAAe,CAAC;AACrF;AACA;AACA;AACA,sBAAsB,CAAC;EAAEA;AAAgC,CAAC,KAAKA,KAAK,CAAC,eAAe,CAAC;AACrF;AACA,CAAC;AAID,OAAO,MAAMC,wBAAwB,GAAGL,MAAM,CAACM,GAAkC;AACjF;AACA,eAAe,CAAC;EAAEF;AAAqC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC7E;AACA;AACA;AACA,MAAM,CAAC;EAAEG;AAAsB,CAAC,KACxBA,qBAAqB,IACrBN,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMO,uBAAuB,GAAGR,MAAM,CAACS,CAA+B;AAC7E,aAAa,CAAC;EAAEL;AAAoC,CAAC,KAAKA,KAAK,CAACM,IAAI;AACpE;AACA;AACA;AACA,iBAAiB,CAAC;EAAEN;AAAoC,CAAC,KAAKA,KAAK,CAACO,QAAQ;AAC5E;AACA,CAAC","ignoreList":[]}

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

@@ -1,21 +1,27 @@
-import { AnimatePresence } from 'framer-motion';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { AnimatePresence } from 'motion/react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import Icon from '../icon/Icon';
 import Input, { InputSize } from '../input/Input';
-import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput } from './SearchInput.styles';
-const SearchInput = _ref => {
-  let {
-    iconColor,
-    isActive,
-    onActiveChange,
-    onChange,
-    onKeyDown,
-    placeholder,
-    size = InputSize.Medium,
-    value
-  } = _ref;
+import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput, StyledSearchInputPseudoElement } from './SearchInput.styles';
+import { useTheme } from 'styled-components';
+import { useElementSize } from '../../hooks/element';
+const SearchInput = /*#__PURE__*/forwardRef(({
+  iconColor,
+  isActive,
+  onActiveChange,
+  onChange,
+  onKeyDown,
+  placeholder,
+  shouldUseAbsolutePositioning = false,
+  size = InputSize.Medium,
+  value,
+  width: widthValue
+}, 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,31 @@ const SearchInput = _ref => {
       setIsSearchInputActive(isActive);
     }
   }, [isActive]);
-  return /*#__PURE__*/React.createElement(StyledSearchInput, {
+  useImperativeHandle(ref, () => ({
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur()
+  }), []);
+  const width = useMemo(() => widthValue ?? parentWidth?.width, [parentWidth?.width, widthValue]);
+  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,
+    onClick: () => {
+      if (shouldUseAbsolutePositioning) {
+        if (isSearchInputActive) {
+          handleBackIconClick();
+        } else {
+          handleSearchIconClick();
+        }
+      }
+    }
+  }, shouldUseAbsolutePositioning ? /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
+    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
     animate: {
       opacity: 1,
-      width: '100%'
+      width
     },
     exit: {
       opacity: 0,
@@ -51,7 +73,8 @@ const SearchInput = _ref => {
     },
     key: "searchInputContentWrapper",
     transition: {
-      duration: 0.3
+      duration: 0.25,
+      type: 'tween'
     }
   }, /*#__PURE__*/React.createElement(Input, {
     onChange: onChange,
@@ -76,14 +99,96 @@ const SearchInput = _ref => {
     transition: {
       duration: 0.3
     },
-    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
+    tabIndex: 0,
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        if (isSearchInputActive) {
+          handleBackIconClick();
+        } else {
+          handleSearchIconClick();
+        }
+      }
+    }
   }, /*#__PURE__*/React.createElement(Icon, {
+    key: "icon",
     color: iconColor,
+    tabIndex: -1,
     icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
-    size: 18
-  }))));
-};
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick
+  }))) : /*#__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',
+    tabIndex: 0,
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        if (isSearchInputActive) {
+          handleBackIconClick();
+        } else {
+          handleSearchIconClick();
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    key: "icon",
+    color: iconColor,
+    tabIndex: -1,
+    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick
+  })))), /*#__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, {
+    key: "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;
 //# sourceMappingURL=SearchInput.js.map

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 'framer-motion';\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","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputPseudoElement","useTheme","useElementSize","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","parentWidth","theme","handleBackIconClick","handleSearchIconClick","current","focus","blur","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","onClick","initial","animate","opacity","exit","key","transition","duration","type","shouldShowClearIcon","position","id","tabIndex","e","preventDefault","color","icons","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    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\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 type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\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     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n    (\n        {\n            iconColor,\n            isActive,\n            onActiveChange,\n            onChange,\n            onKeyDown,\n            placeholder,\n            shouldUseAbsolutePositioning = false,\n            size = InputSize.Medium,\n            value,\n            width: widthValue,\n        },\n        ref,\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        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        const width = useMemo(\n            () => widthValue ?? parentWidth?.width,\n            [parentWidth?.width, widthValue],\n        );\n\n        return (\n            <>\n                <StyledSearchInput\n                    className=\"beta-chayns-search-input\"\n                    $size={size}\n                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                    onClick={() => {\n                        if (shouldUseAbsolutePositioning) {\n                            if (isSearchInputActive) {\n                                handleBackIconClick();\n                            } else {\n                                handleSearchIconClick();\n                            }\n                        }\n                    }}\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.25, type: 'tween' }}\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                                tabIndex={0}\n                                onKeyDown={(e) => {\n                                    if (e.key === 'Enter') {\n                                        e.preventDefault();\n                                        if (isSearchInputActive) {\n                                            handleBackIconClick();\n                                        } else {\n                                            handleSearchIconClick();\n                                        }\n                                    }\n                                }}\n                            >\n                                <Icon\n                                    key=\"icon\"\n                                    color={iconColor}\n                                    tabIndex={-1}\n                                    icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                    onClick={\n                                        isSearchInputActive\n                                            ? handleBackIconClick\n                                            : handleSearchIconClick\n                                    }\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                                        tabIndex={0}\n                                        onKeyDown={(e) => {\n                                            if (e.key === 'Enter') {\n                                                e.preventDefault();\n                                                if (isSearchInputActive) {\n                                                    handleBackIconClick();\n                                                } else {\n                                                    handleSearchIconClick();\n                                                }\n                                            }\n                                        }}\n                                    >\n                                        <Icon\n                                            key=\"icon\"\n                                            color={iconColor}\n                                            tabIndex={-1}\n                                            icons={\n                                                isSearchInputActive\n                                                    ? ['fa fa-arrow-left']\n                                                    : ['fa fa-search']\n                                            }\n                                            onClick={\n                                                isSearchInputActive\n                                                    ? handleBackIconClick\n                                                    : handleSearchIconClick\n                                            }\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                                            key=\"input\"\n                                            leftElement={\n                                                <Icon\n                                                    color={theme.text}\n                                                    icons={['far fa-search']}\n                                                />\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);\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,35 +1,55 @@
-import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import { motion } from 'motion/react';
+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 {
-    $size
-  } = _ref;
-  return $size === 'medium' ? '42px' : '32px';
-}};
+    height: ${({
+  $size
+}) => $size === 'medium' ? '42px' : '32px'};
 
-    &:hover {
-        background-color: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme[103];
-}};
-    }
+    ${({
+  $shouldUseAbsolutePositioning,
+  theme
+}) => $shouldUseAbsolutePositioning ? css`
+                  justify-content: center;
+                  aspect-ratio: 1;
+                  border-radius: 3px;
+                  position: relative;
+                  cursor: pointer;
+
+                  @media (pointer: fine) {
+                      &:hover {
+                          background-color: ${theme[201]};
+                      }
+                  }
+              ` : 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)`
+    ${({
+  $shouldUseAbsolutePositioning
+}) => $shouldUseAbsolutePositioning && css`
+            position: absolute;
+            top: 0;
+            right: 0;
+        `}
+
     overflow: hidden;
 `;
 export const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`
     display: flex;
+    cursor: pointer;
+`;
+export const StyledMotionSearchInputIconWrapper = styled.div`
+    width: 18px;
 `;
 //# sourceMappingURL=SearchInput.styles.js.map