@chayns-components/core 5.4.12 → 5.4.13

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

@@ -39,11 +39,13 @@ const StyledSearchBoxBodyContent = exports.StyledSearchBoxBodyContent = _styledC
     cursor: pointer;
     width: 100%;
     max-height: ${({
-  $headHeight
-}) => 300 - $headHeight}px;
+  $headHeight,
+  $maxHeight
+}) => $maxHeight - $headHeight}px;
     overflow-y: ${({
   $height,
-  $headHeight
-}) => $height + $headHeight <= 300 ? 'hidden' : 'auto'};
+  $headHeight,
+  $maxHeight
+}) => $height + $headHeight <= $maxHeight ? 'hidden' : 'auto'};
 `;
 //# sourceMappingURL=SearchBoxBody.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxBody.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSearchBoxBody","exports","styled","div","StyledSearchBoxBodyHead","$hasGroupName","css","$hasScrolled","StyledSearchBoxBodyHeadGroupName","theme","text","StyledSearchBoxBodyContent","$headHeight","$height"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\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}>;\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"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGzC,MAAMkB,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC7C;AACA;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGF,yBAAM,CAACC,GAA6B;AAC3E;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEE;AAAc,CAAC,KAChBA,aAAa,IACb,IAAAC,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC;AAAa,CAAC,KACfA,YAAY,IACZ,IAAAD,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAMM,MAAME,gCAAgC,GAAAP,OAAA,CAAAO,gCAAA,GAAGN,yBAAM,CAACC,GAA8C;AACrG,aAAa,CAAC;EAAEM;AAAiD,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjF;AACA,CAAC;AAOM,MAAMC,0BAA0B,GAAAV,OAAA,CAAAU,0BAAA,GAAGT,yBAAM,CAACC,GAAoC;AACrF;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAES;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,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchBoxBody.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSearchBoxBody","exports","styled","div","StyledSearchBoxBodyHead","$hasGroupName","css","$hasScrolled","StyledSearchBoxBodyHeadGroupName","theme","text","StyledSearchBoxBodyContent","$headHeight","$maxHeight","$height"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\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    $maxHeight: number;\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, $maxHeight }) => $maxHeight - $headHeight}px;\n    overflow-y: ${({ $height, $headHeight, $maxHeight }) =>\n        $height + $headHeight <= $maxHeight ? 'hidden' : 'auto'};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGzC,MAAMkB,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC7C;AACA;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGF,yBAAM,CAACC,GAA6B;AAC3E;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEE;AAAc,CAAC,KAChBA,aAAa,IACb,IAAAC,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC;AAAa,CAAC,KACfA,YAAY,IACZ,IAAAD,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAMM,MAAME,gCAAgC,GAAAP,OAAA,CAAAO,gCAAA,GAAGN,yBAAM,CAACC,GAA8C;AACrG,aAAa,CAAC;EAAEM;AAAiD,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjF;AACA,CAAC;AAQM,MAAMC,0BAA0B,GAAAV,OAAA,CAAAU,0BAAA,GAAGT,yBAAM,CAACC,GAAoC;AACrF;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAES,WAAW;EAAEC;AAAW,CAAC,KAAKA,UAAU,GAAGD,WAAW;AAC3E,kBAAkB,CAAC;EAAEE,OAAO;EAAEF,WAAW;EAAEC;AAAW,CAAC,KAC/CC,OAAO,GAAGF,WAAW,IAAIC,UAAU,GAAG,QAAQ,GAAG,MAAM;AAC/D,CAAC","ignoreList":[]}

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

@@ -11,6 +11,7 @@ const SearchBoxItem = ({
   id,
   text,
   imageUrl,
+  shouldShowSmallItems,
   shouldShowRoundImage,
   onSelect,
   groupName,
@@ -37,10 +38,11 @@ const SearchBoxItem = ({
     src: imageUrl,
     $shouldShowRoundImage: shouldShowRoundImage
   }), /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItemText, {
+    $shouldShowSmallItems: shouldShowSmallItems,
     dangerouslySetInnerHTML: {
       __html: text
     }
-  })), [handleClick, idString, imageUrl, shouldShowRoundImage, text, tabIndex]);
+  })), [handleClick, idString, imageUrl, shouldShowRoundImage, shouldShowSmallItems, text, tabIndex]);
 };
 SearchBoxItem.displayName = 'SearchBoxItem';
 var _default = exports.default = SearchBoxItem;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxItem.js","names":["_react","_interopRequireWildcard","require","_SearchBoxItem","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchBoxItem","id","text","imageUrl","shouldShowRoundImage","onSelect","groupName","tabIndex","handleClick","useCallback","event","preventDefault","stopPropagation","idString","useMemo","createElement","StyledSearchBoxItem","onClick","StyledSearchBoxItemImage","src","$shouldShowRoundImage","StyledSearchBoxItemText","dangerouslySetInnerHTML","__html","displayName","_default","exports"],"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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAIgC,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAYhC,MAAMkB,aAAqC,GAAGA,CAAC;EAC3CC,EAAE;EACFC,IAAI;EACJC,QAAQ;EACRC,oBAAoB;EACpBC,QAAQ;EACRC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAC1BC,KAAiB,IAAK;IACnBA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvBP,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,IAAIO,QAAQ,GAAG,oBAAoBZ,EAAE,EAAE;EAEvC,IAAIK,SAAS,EAAE;IACXO,QAAQ,GAAG,IAAIP,SAAS,EAAE;EAC9B;EAEA,OAAO,IAAAQ,cAAO,EACV,mBACIrC,MAAA,CAAAc,OAAA,CAAAwB,aAAA,CAACnC,cAAA,CAAAoC,mBAAmB;IAACf,EAAE,EAAEY,QAAS;IAACI,OAAO,EAAET,WAAY;IAACD,QAAQ,EAAEA;EAAS,GACvEJ,QAAQ,iBACL1B,MAAA,CAAAc,OAAA,CAAAwB,aAAA,CAACnC,cAAA,CAAAsC,wBAAwB;IACrBC,GAAG,EAAEhB,QAAS;IACdiB,qBAAqB,EAAEhB;EAAqB,CAC/C,CACJ,eACD3B,MAAA,CAAAc,OAAA,CAAAwB,aAAA,CAACnC,cAAA,CAAAyC,uBAAuB;IAACC,uBAAuB,EAAE;MAAEC,MAAM,EAAErB;IAAK;EAAE,CAAE,CACpD,CACxB,EACD,CAACM,WAAW,EAAEK,QAAQ,EAAEV,QAAQ,EAAEC,oBAAoB,EAAEF,IAAI,EAAEK,QAAQ,CAC1E,CAAC;AACL,CAAC;AAEDP,aAAa,CAACwB,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAnC,OAAA,GAE7BS,aAAa","ignoreList":[]}
+{"version":3,"file":"SearchBoxItem.js","names":["_react","_interopRequireWildcard","require","_SearchBoxItem","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchBoxItem","id","text","imageUrl","shouldShowSmallItems","shouldShowRoundImage","onSelect","groupName","tabIndex","handleClick","useCallback","event","preventDefault","stopPropagation","idString","useMemo","createElement","StyledSearchBoxItem","onClick","StyledSearchBoxItemImage","src","$shouldShowRoundImage","StyledSearchBoxItemText","$shouldShowSmallItems","dangerouslySetInnerHTML","__html","displayName","_default","exports"],"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    shouldShowSmallItems?: boolean;\n    shouldShowRoundImage?: boolean;\n    groupName?: ISearchBoxItems['groupName'];\n    tabIndex: number;\n};\n\nconst SearchBoxItem: FC<SearchBoxItemProps> = ({\n    id,\n    text,\n    imageUrl,\n    shouldShowSmallItems,\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\n                    $shouldShowSmallItems={shouldShowSmallItems}\n                    dangerouslySetInnerHTML={{ __html: text }}\n                />\n            </StyledSearchBoxItem>\n        ),\n        [\n            handleClick,\n            idString,\n            imageUrl,\n            shouldShowRoundImage,\n            shouldShowSmallItems,\n            text,\n            tabIndex,\n        ],\n    );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":"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","ignoreList":[]}

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

@@ -42,7 +42,12 @@ const StyledSearchBoxItemText = exports.StyledSearchBoxItemText = _styledCompone
     color: ${({
   theme
 }) => theme.text};
-    margin: 5px 0 !important;
+    font-size: ${({
+  $shouldShowSmallItems
+}) => $shouldShowSmallItems ? '14px' : undefined};
+    margin: ${({
+  $shouldShowSmallItems
+}) => $shouldShowSmallItems ? '0 !important' : '5px 0 !important'};
 
     b {
         color: ${({

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSearchBoxItem","exports","styled","div","theme","StyledSearchBoxItemImage","img","$shouldShowRoundImage","css","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,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAIzC,MAAMkB,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,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;AAIM,MAAMC,wBAAwB,GAAAJ,OAAA,CAAAI,wBAAA,GAAGH,yBAAM,CAACI,GAAkC;AACjF;AACA,eAAe,CAAC;EAAEF;AAAqC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC7E;AACA;AACA;AACA,MAAM,CAAC;EAAEG;AAAsB,CAAC,KACxBA,qBAAqB,IACrB,IAAAC,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAIM,MAAMC,uBAAuB,GAAAR,OAAA,CAAAQ,uBAAA,GAAGP,yBAAM,CAACQ,CAA+B;AAC7E,aAAa,CAAC;EAAEN;AAAoC,CAAC,KAAKA,KAAK,CAACO,IAAI;AACpE;AACA;AACA;AACA,iBAAiB,CAAC;EAAEP;AAAoC,CAAC,KAAKA,KAAK,CAACQ,QAAQ;AAC5E;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSearchBoxItem","exports","styled","div","theme","StyledSearchBoxItemImage","img","$shouldShowRoundImage","css","StyledSearchBoxItemText","p","text","$shouldShowSmallItems","undefined","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<{ $shouldShowSmallItems?: boolean }>;\n\nexport const StyledSearchBoxItemText = styled.p<StyledSearchBoxItemTextProps>`\n    color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.text};\n    font-size: ${({ $shouldShowSmallItems }) => ($shouldShowSmallItems ? '14px' : undefined)};\n    margin: ${({ $shouldShowSmallItems }) =>\n        $shouldShowSmallItems ? '0 !important' : '5px 0 !important'};\n\n    b {\n        color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.headline};\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAIzC,MAAMkB,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,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;AAIM,MAAMC,wBAAwB,GAAAJ,OAAA,CAAAI,wBAAA,GAAGH,yBAAM,CAACI,GAAkC;AACjF;AACA,eAAe,CAAC;EAAEF;AAAqC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC7E;AACA;AACA;AACA,MAAM,CAAC;EAAEG;AAAsB,CAAC,KACxBA,qBAAqB,IACrB,IAAAC,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAIM,MAAMC,uBAAuB,GAAAR,OAAA,CAAAQ,uBAAA,GAAGP,yBAAM,CAACQ,CAA+B;AAC7E,aAAa,CAAC;EAAEN;AAAoC,CAAC,KAAKA,KAAK,CAACO,IAAI;AACpE,iBAAiB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,MAAM,GAAGC,SAAU;AAC5F,cAAc,CAAC;EAAED;AAAsB,CAAC,KAChCA,qBAAqB,GAAG,cAAc,GAAG,kBAAkB;AACnE;AACA;AACA,iBAAiB,CAAC;EAAER;AAAoC,CAAC,KAAKA,KAAK,CAACU,QAAQ;AAC5E;AACA,CAAC","ignoreList":[]}

package/lib/cjs/utils/searchBox.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.searchList = exports.getCurrentGroupName = void 0;
+exports.sortSearchBoxItems = exports.searchList = exports.getCurrentGroupName = void 0;
 const surroundWithBTag = (text, startIndex, length) => {
   const before = text.substring(0, startIndex);
   const highlighted = text.substring(startIndex, startIndex + length);
@@ -44,6 +44,24 @@ const getCurrentGroupName = element => {
   return currentGroupName;
 };
 exports.getCurrentGroupName = getCurrentGroupName;
+const sortSearchBoxItems = ({
+  searchString,
+  items
+}) => {
+  const lowercaseSearchString = searchString.toLowerCase();
+  return [...items].sort((a, b) => {
+    const aStartsWithSearchString = a.text.toLowerCase().startsWith(lowercaseSearchString);
+    const bStartsWithSearchString = b.text.toLowerCase().startsWith(lowercaseSearchString);
+    if (aStartsWithSearchString && !bStartsWithSearchString) {
+      return -1;
+    }
+    if (!aStartsWithSearchString && bStartsWithSearchString) {
+      return 1;
+    }
+    return a.text.localeCompare(b.text);
+  });
+};
+exports.sortSearchBoxItems = sortSearchBoxItems;
 const searchList = ({
   searchString,
   items
@@ -65,18 +83,10 @@ const searchList = ({
       }
     }
   });
-  matchingItems.sort((a, b) => {
-    const aStartsWithSearchString = a.text.toLowerCase().startsWith(lowercaseSearchString);
-    const bStartsWithSearchString = b.text.toLowerCase().startsWith(lowercaseSearchString);
-    if (aStartsWithSearchString && !bStartsWithSearchString) {
-      return -1;
-    }
-    if (!aStartsWithSearchString && bStartsWithSearchString) {
-      return 1;
-    }
-    return a.text.localeCompare(b.text);
+  return sortSearchBoxItems({
+    items: matchingItems,
+    searchString
   });
-  return matchingItems;
 };
 exports.searchList = searchList;
 //# sourceMappingURL=searchBox.js.map

package/lib/cjs/utils/searchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchBox.js","names":["surroundWithBTag","text","startIndex","length","before","substring","highlighted","after","getCurrentGroupName","element","hasChildrenFound","currentGroupName","top","parentTop","getBoundingClientRect","children","Array","from","forEach","child","y","childrenY","height","childrenHeight","id","sum","currentGroup","startsWith","nummer","split","pop","exports","searchList","searchString","items","matchingItems","lowercaseSearchString","toLowerCase","item","lowercaseText","includes","push","indexOf","highlightedText","sort","a","b","aStartsWithSearchString","bStartsWithSearchString","localeCompare"],"sources":["../../../src/utils/searchBox.ts"],"sourcesContent":["import type { ISearchBoxItem } from '../types/searchBox';\n\nconst surroundWithBTag = (text: string, startIndex: number, length: number) => {\n    const before = text.substring(0, startIndex);\n    const highlighted = text.substring(startIndex, startIndex + length);\n    const after = text.substring(startIndex + length);\n\n    return `${before}<b>${highlighted}</b>${after}`;\n};\n\nexport const getCurrentGroupName = (element: HTMLElement) => {\n    let hasChildrenFound = false;\n    let currentGroupName = '';\n\n    const { top: parentTop } = element.getBoundingClientRect();\n    const { children } = element;\n\n    Array.from(children).forEach((child) => {\n        if (hasChildrenFound) {\n            return;\n        }\n\n        const { y: childrenY, height: childrenHeight } = child.getBoundingClientRect();\n        const { id } = child;\n\n        const sum = childrenY + childrenHeight - parentTop;\n\n        if (sum >= 0) {\n            hasChildrenFound = true;\n            let currentGroup = id;\n\n            if (id.startsWith('search-box-item__')) {\n                const nummer = id.split('__')[1];\n                currentGroup = nummer?.split('_').pop() ?? '';\n            }\n\n            currentGroupName = currentGroup;\n        }\n    });\n\n    return currentGroupName;\n};\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            if (searchString === '') {\n                matchingItems.push(item);\n            } else {\n                const startIndex = lowercaseText.indexOf(lowercaseSearchString);\n                const highlightedText = surroundWithBTag(\n                    item.text,\n                    startIndex,\n                    searchString.length,\n                );\n                matchingItems.push({ ...item, text: highlightedText });\n            }\n        }\n    });\n\n    matchingItems.sort((a, b) => {\n        const aStartsWithSearchString = a.text.toLowerCase().startsWith(lowercaseSearchString);\n        const bStartsWithSearchString = b.text.toLowerCase().startsWith(lowercaseSearchString);\n\n        if (aStartsWithSearchString && !bStartsWithSearchString) {\n            return -1;\n        }\n        if (!aStartsWithSearchString && bStartsWithSearchString) {\n            return 1;\n        }\n        return a.text.localeCompare(b.text);\n    });\n\n    return matchingItems;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"searchBox.js","names":["surroundWithBTag","text","startIndex","length","before","substring","highlighted","after","getCurrentGroupName","element","hasChildrenFound","currentGroupName","top","parentTop","getBoundingClientRect","children","Array","from","forEach","child","y","childrenY","height","childrenHeight","id","sum","currentGroup","startsWith","nummer","split","pop","exports","sortSearchBoxItems","searchString","items","lowercaseSearchString","toLowerCase","sort","a","b","aStartsWithSearchString","bStartsWithSearchString","localeCompare","searchList","matchingItems","item","lowercaseText","includes","push","indexOf","highlightedText"],"sources":["../../../src/utils/searchBox.ts"],"sourcesContent":["import type { ISearchBoxItem } from '../types/searchBox';\n\nconst surroundWithBTag = (text: string, startIndex: number, length: number) => {\n    const before = text.substring(0, startIndex);\n    const highlighted = text.substring(startIndex, startIndex + length);\n    const after = text.substring(startIndex + length);\n\n    return `${before}<b>${highlighted}</b>${after}`;\n};\n\nexport const getCurrentGroupName = (element: HTMLElement) => {\n    let hasChildrenFound = false;\n    let currentGroupName = '';\n\n    const { top: parentTop } = element.getBoundingClientRect();\n    const { children } = element;\n\n    Array.from(children).forEach((child) => {\n        if (hasChildrenFound) {\n            return;\n        }\n\n        const { y: childrenY, height: childrenHeight } = child.getBoundingClientRect();\n        const { id } = child;\n\n        const sum = childrenY + childrenHeight - parentTop;\n\n        if (sum >= 0) {\n            hasChildrenFound = true;\n            let currentGroup = id;\n\n            if (id.startsWith('search-box-item__')) {\n                const nummer = id.split('__')[1];\n                currentGroup = nummer?.split('_').pop() ?? '';\n            }\n\n            currentGroupName = currentGroup;\n        }\n    });\n\n    return currentGroupName;\n};\n\ninterface SearchListOptions {\n    items: ISearchBoxItem[];\n    searchString: string;\n}\n\nexport const sortSearchBoxItems = ({ searchString, items }: SearchListOptions) => {\n    const lowercaseSearchString = searchString.toLowerCase();\n\n    return [...items].sort((a, b) => {\n        const aStartsWithSearchString = a.text.toLowerCase().startsWith(lowercaseSearchString);\n        const bStartsWithSearchString = b.text.toLowerCase().startsWith(lowercaseSearchString);\n\n        if (aStartsWithSearchString && !bStartsWithSearchString) {\n            return -1;\n        }\n        if (!aStartsWithSearchString && bStartsWithSearchString) {\n            return 1;\n        }\n        return a.text.localeCompare(b.text);\n    });\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            if (searchString === '') {\n                matchingItems.push(item);\n            } else {\n                const startIndex = lowercaseText.indexOf(lowercaseSearchString);\n                const highlightedText = surroundWithBTag(\n                    item.text,\n                    startIndex,\n                    searchString.length,\n                );\n                matchingItems.push({ ...item, text: highlightedText });\n            }\n        }\n    });\n\n    return sortSearchBoxItems({ items: matchingItems, searchString });\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/page-provider/PageProvider.js

@@ -40,7 +40,7 @@ const PageProvider = ({
   const usableHeight = useUsableHeight({
     shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight
   });
-  const shouldUsePadding = !shouldRemovePadding && ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(runtimeEnvironment);
+  const shouldUsePadding = !shouldRemovePadding && ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6, 8].includes(runtimeEnvironment);
   return /*#__PURE__*/React.createElement(StyledPageProvider, {
     className: "page-provider",
     $shouldUsePadding: shouldUsePadding,

package/lib/esm/components/page-provider/PageProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageProvider.js","names":["RuntimeEnviroment","useEnvironment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldReduceUsableHeightByCoverHeight","shouldRemovePadding","shouldUseUsableHeight","iconColor","customVariables","runtimeEnvironment","usableHeight","shouldReduceByCoverHeight","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n    type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\n/**\n * Props for the PageProvider component.\n * @description\n * This interface defines the props that can be passed to the PageProvider component\n * for controlling the layout and styling behavior.\n * @example\n * <PageProvider shouldRemovePadding={true}>\n *   {children}\n * </PageProvider>\n */\ninterface PageProviderProps extends ColorSchemeProviderProps {\n    /**\n     * Controls whether the usable height should be reduced by the cover height\n     * @description\n     * When true, the usable height will be reduced by the cover image height. This is useful\n     * when the page should not be scrollable due to the cover image. The property has no effect\n     * when `shouldUseUsableHeight` is false.\n     * @default false\n     * @optional\n     */\n    shouldReduceUsableHeightByCoverHeight?: boolean;\n    /**\n     * Controls whether padding should be removed from the page\n     * @description\n     * When true, the padding around the page content will be removed. This is useful when the\n     * page should not have any padding, for example, when it is embedded in a pagemaker page.\n     * @default false\n     * @optional\n     */\n    shouldRemovePadding?: boolean;\n    /**\n     * Controls whether the component should use the calculated usable height\n     * @description\n     * When true, the page will cover the entire usable height of the screen. This means that\n     * the viewport is not scrollable and the page takes up the full height not required by the\n     * title or bottom bar. Optionally, the height of the cover image can be reduced by setting\n     * `shouldReduceUsableHeightByCoverHeight` to true.\n     * @default false\n     * @optional\n     */\n    shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    secondaryColor,\n    siteId,\n    style = {},\n    shouldReduceUsableHeightByCoverHeight = false,\n    shouldRemovePadding = false,\n    shouldUseUsableHeight = false,\n    iconColor,\n    customVariables,\n}) => {\n    const { runtimeEnvironment } = useEnvironment();\n\n    const usableHeight = useUsableHeight({\n        shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight,\n    });\n\n    const shouldUsePadding =\n        !shouldRemovePadding &&\n        ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n            runtimeEnvironment as number,\n        );\n\n    return (\n        <StyledPageProvider\n            className=\"page-provider\"\n            $shouldUsePadding={shouldUsePadding}\n            $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n        >\n            <ColorSchemeProvider\n                color={color}\n                secondaryColor={secondaryColor}\n                colorMode={colorMode}\n                siteId={siteId}\n                style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n                customVariables={customVariables}\n                iconColor={iconColor}\n            >\n                {children}\n            </ColorSchemeProvider>\n            <GlobalStyle />\n        </StyledPageProvider>\n    );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,iBAAiB,EAAEC,cAAc,QAAQ,YAAY;AAC9D,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,OAAOC,mBAAmB,MAEnB,8CAA8C;AACrD,SAASC,kBAAkB,QAAQ,uBAAuB;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkCA,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMK,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,qCAAqC,GAAG,KAAK;EAC7CC,mBAAmB,GAAG,KAAK;EAC3BC,qBAAqB,GAAG,KAAK;EAC7BC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAGnB,cAAc,CAAC,CAAC;EAE/C,MAAMoB,YAAY,GAAGjB,eAAe,CAAC;IACjCkB,yBAAyB,EAAEP;EAC/B,CAAC,CAAC;EAEF,MAAMQ,gBAAgB,GAClB,CAACP,mBAAmB,IACpB,CAAC,CAAChB,iBAAiB,CAACwB,cAAc,EAAExB,iBAAiB,CAACyB,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9EN,kBACJ,CAAC;EAEL,oBACIlB,KAAA,CAAAyB,aAAA,CAACrB,kBAAkB;IACfsB,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAEN,gBAAiB;IACpCO,aAAa,EAAEb,qBAAqB,GAAGI,YAAY,GAAGU;EAAU,gBAEhE7B,KAAA,CAAAyB,aAAA,CAACtB,mBAAmB;IAChBK,KAAK,EAAEA,KAAM;IACbE,cAAc,EAAEA,cAAe;IAC/BD,SAAS,EAAEA,SAAU;IACrBE,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEkB,MAAM,EAAE;IAAO,CAAC,GAAGlB,KAAM;IACpEK,eAAe,EAAEA,eAAgB;IACjCD,SAAS,EAAEA;EAAU,GAEpBT,QACgB,CAAC,eACtBP,KAAA,CAAAyB,aAAA,CAACpB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,CAACyB,WAAW,GAAG,cAAc;AAEzC,eAAezB,YAAY","ignoreList":[]}
+{"version":3,"file":"PageProvider.js","names":["RuntimeEnviroment","useEnvironment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldReduceUsableHeightByCoverHeight","shouldRemovePadding","shouldUseUsableHeight","iconColor","customVariables","runtimeEnvironment","usableHeight","shouldReduceByCoverHeight","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n    type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\n/**\n * Props for the PageProvider component.\n * @description\n * This interface defines the props that can be passed to the PageProvider component\n * for controlling the layout and styling behavior.\n * @example\n * <PageProvider shouldRemovePadding={true}>\n *   {children}\n * </PageProvider>\n */\ninterface PageProviderProps extends ColorSchemeProviderProps {\n    /**\n     * Controls whether the usable height should be reduced by the cover height\n     * @description\n     * When true, the usable height will be reduced by the cover image height. This is useful\n     * when the page should not be scrollable due to the cover image. The property has no effect\n     * when `shouldUseUsableHeight` is false.\n     * @default false\n     * @optional\n     */\n    shouldReduceUsableHeightByCoverHeight?: boolean;\n    /**\n     * Controls whether padding should be removed from the page\n     * @description\n     * When true, the padding around the page content will be removed. This is useful when the\n     * page should not have any padding, for example, when it is embedded in a pagemaker page.\n     * @default false\n     * @optional\n     */\n    shouldRemovePadding?: boolean;\n    /**\n     * Controls whether the component should use the calculated usable height\n     * @description\n     * When true, the page will cover the entire usable height of the screen. This means that\n     * the viewport is not scrollable and the page takes up the full height not required by the\n     * title or bottom bar. Optionally, the height of the cover image can be reduced by setting\n     * `shouldReduceUsableHeightByCoverHeight` to true.\n     * @default false\n     * @optional\n     */\n    shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    secondaryColor,\n    siteId,\n    style = {},\n    shouldReduceUsableHeightByCoverHeight = false,\n    shouldRemovePadding = false,\n    shouldUseUsableHeight = false,\n    iconColor,\n    customVariables,\n}) => {\n    const { runtimeEnvironment } = useEnvironment();\n\n    const usableHeight = useUsableHeight({\n        shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight,\n    });\n\n    const shouldUsePadding =\n        !shouldRemovePadding &&\n        ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6, 8].includes(\n            runtimeEnvironment as number,\n        );\n\n    return (\n        <StyledPageProvider\n            className=\"page-provider\"\n            $shouldUsePadding={shouldUsePadding}\n            $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n        >\n            <ColorSchemeProvider\n                color={color}\n                secondaryColor={secondaryColor}\n                colorMode={colorMode}\n                siteId={siteId}\n                style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n                customVariables={customVariables}\n                iconColor={iconColor}\n            >\n                {children}\n            </ColorSchemeProvider>\n            <GlobalStyle />\n        </StyledPageProvider>\n    );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,iBAAiB,EAAEC,cAAc,QAAQ,YAAY;AAC9D,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,OAAOC,mBAAmB,MAEnB,8CAA8C;AACrD,SAASC,kBAAkB,QAAQ,uBAAuB;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkCA,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMK,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,qCAAqC,GAAG,KAAK;EAC7CC,mBAAmB,GAAG,KAAK;EAC3BC,qBAAqB,GAAG,KAAK;EAC7BC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAGnB,cAAc,CAAC,CAAC;EAE/C,MAAMoB,YAAY,GAAGjB,eAAe,CAAC;IACjCkB,yBAAyB,EAAEP;EAC/B,CAAC,CAAC;EAEF,MAAMQ,gBAAgB,GAClB,CAACP,mBAAmB,IACpB,CAAC,CAAChB,iBAAiB,CAACwB,cAAc,EAAExB,iBAAiB,CAACyB,eAAe,EAAE,CAAC,EAAE,CAAC,CAAC,CAACC,QAAQ,CACjFN,kBACJ,CAAC;EAEL,oBACIlB,KAAA,CAAAyB,aAAA,CAACrB,kBAAkB;IACfsB,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAEN,gBAAiB;IACpCO,aAAa,EAAEb,qBAAqB,GAAGI,YAAY,GAAGU;EAAU,gBAEhE7B,KAAA,CAAAyB,aAAA,CAACtB,mBAAmB;IAChBK,KAAK,EAAEA,KAAM;IACbE,cAAc,EAAEA,cAAe;IAC/BD,SAAS,EAAEA,SAAU;IACrBE,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEkB,MAAM,EAAE;IAAO,CAAC,GAAGlB,KAAM;IACpEK,eAAe,EAAEA,eAAgB;IACjCD,SAAS,EAAEA;EAAU,GAEpBT,QACgB,CAAC,eACtBP,KAAA,CAAAyB,aAAA,CAACpB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,CAACyB,WAAW,GAAG,cAAc;AAEzC,eAAezB,YAAY","ignoreList":[]}

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

@@ -2,7 +2,7 @@ import { useDevice } from 'chayns-api';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useTheme } from 'styled-components';
 import { calculateContentHeight } from '../../utils/calculate';
-import { searchList } from '../../utils/searchBox';
+import { searchList, sortSearchBoxItems } from '../../utils/searchBox';
 import Icon from '../icon/Icon';
 import Input from '../input/Input';
 import GroupName from './group-name/GroupName';
@@ -13,6 +13,35 @@ import { StyledSearchBox, StyledSearchBoxHintText, StyledSearchBoxIcon, StyledSe
 import { useUuid } from '../../hooks/uuid';
 import DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';
 import TagInput from '../tag-input/TagInput';
+const filterSearchBoxItems = ({
+  customFilter,
+  items,
+  searchString,
+  shouldUseCustomFilterOnly
+}) => {
+  if (typeof customFilter !== 'function') {
+    return searchList({
+      items,
+      searchString
+    });
+  }
+  if (shouldUseCustomFilterOnly) {
+    const filteredItems = items.filter(customFilter);
+    return sortSearchBoxItems({
+      items: filteredItems,
+      searchString
+    });
+  }
+  return searchList({
+    items,
+    searchString
+  }).filter(customFilter);
+};
+const getDropdownSearchString = ({
+  selectedId,
+  shouldKeepSelectedItemPosition,
+  value
+}) => shouldKeepSelectedItemPosition && selectedId ? '' : value;
 const SearchBox = /*#__PURE__*/forwardRef(({
   container,
   customFilter,
@@ -20,6 +49,7 @@ const SearchBox = /*#__PURE__*/forwardRef(({
   isInvalid = false,
   leftIcons,
   lists,
+  maxHeight = 300,
   onBlur,
   onChange,
   onKeyDown,
@@ -29,8 +59,11 @@ const SearchBox = /*#__PURE__*/forwardRef(({
   hintText,
   selectedId,
   shouldAddInputToList = true,
+  shouldKeepSelectedItemPosition = false,
+  shouldUseCustomFilterOnly = false,
   shouldHideFilterButtons = false,
   shouldShowContentOnEmptyInput = true,
+  shouldShowSmallItems = false,
   shouldShowRoundImage,
   shouldShowToggleIcon = false,
   tagInputSettings
@@ -54,6 +87,11 @@ const SearchBox = /*#__PURE__*/forwardRef(({
   const isAnimatingRef = useRef(false);
   const shouldShowPresetValue = useRef(typeof presetValue === 'string' && presetValue !== '');
   const theme = useTheme();
+  const dropdownSearchString = getDropdownSearchString({
+    selectedId,
+    shouldKeepSelectedItemPosition,
+    value
+  });
   const {
     isTouch
   } = useDevice();
@@ -101,9 +139,11 @@ const SearchBox = /*#__PURE__*/forwardRef(({
       list,
       groupName
     }) => {
-      const newList = searchList({
+      const newList = filterSearchBoxItems({
+        customFilter,
         items: list,
-        searchString: value
+        searchString: dropdownSearchString,
+        shouldUseCustomFilterOnly
       });
       if (newList.length > 0) {
         newMatchingItems.push({
@@ -124,15 +164,15 @@ const SearchBox = /*#__PURE__*/forwardRef(({
     }) => ({
       groupName,
       list: list.filter(item => {
-        if (typeof customFilter === 'function') {
-          return customFilter(item);
+        if (typeof customFilter === 'function' && shouldUseCustomFilterOnly) {
+          return true;
         }
-        return !(newMatchingItems.length === 1 && item.text === value);
+        return !(newMatchingItems.length === 1 && item.text === dropdownSearchString);
       })
     }));
     setMatchingListsItems(filteredMatchingListItems);
     return newLists;
-  }, [groups, lists, customFilter, shouldAddInputToList, value]);
+  }, [groups, lists, customFilter, dropdownSearchString, shouldAddInputToList, shouldUseCustomFilterOnly]);
   const handleOpen = useCallback(() => {
     setShouldShowBody(true);
   }, []);
@@ -216,9 +256,11 @@ const SearchBox = /*#__PURE__*/forwardRef(({
         list,
         groupName
       }) => {
-        const newList = searchList({
+        const newList = filterSearchBoxItems({
+          customFilter,
           items: list,
-          searchString: value
+          searchString: dropdownSearchString,
+          shouldUseCustomFilterOnly
         });
         if (newList.length > 0) {
           newMatchingItems.push({
@@ -239,10 +281,10 @@ const SearchBox = /*#__PURE__*/forwardRef(({
       }) => ({
         groupName,
         list: list.filter(item => {
-          if (typeof customFilter === 'function') {
-            return customFilter(item);
+          if (typeof customFilter === 'function' && shouldUseCustomFilterOnly) {
+            return true;
           }
-          return !(newMatchingItems.length === 1 && item.text === value);
+          return !(newMatchingItems.length === 1 && item.text === dropdownSearchString);
         })
       }));
       setMatchingListsItems(filteredMatchingListItems);
@@ -250,7 +292,7 @@ const SearchBox = /*#__PURE__*/forwardRef(({
         handleOpen();
       }
     }
-  }, [shouldShowContentOnEmptyInput, activeList, shouldAddInputToList, hintText, value, customFilter, handleOpen]);
+  }, [shouldShowContentOnEmptyInput, activeList, shouldAddInputToList, hintText, dropdownSearchString, customFilter, shouldUseCustomFilterOnly, handleOpen]);
 
   /**
    * This function filters the lists by input
@@ -262,9 +304,11 @@ const SearchBox = /*#__PURE__*/forwardRef(({
       list,
       groupName
     }) => {
-      const newList = searchList({
+      const newList = filterSearchBoxItems({
+        customFilter,
         items: list,
-        searchString: value
+        searchString: dropdownSearchString,
+        shouldUseCustomFilterOnly
       });
       if (newList.length > 0) {
         newMatchingItems.push({
@@ -292,7 +336,7 @@ const SearchBox = /*#__PURE__*/forwardRef(({
         });
       });
     }
-  }, [inputToListValue, activeList, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
+  }, [inputToListValue, activeList, shouldAddInputToList, shouldShowContentOnEmptyInput, dropdownSearchString, customFilter, shouldUseCustomFilterOnly]);
   const handleClick = useCallback(() => {
     if (shouldShowBody) {
       handleClose();
@@ -325,9 +369,11 @@ const SearchBox = /*#__PURE__*/forwardRef(({
       list,
       groupName
     }) => {
-      const newList = searchList({
+      const newList = filterSearchBoxItems({
+        customFilter,
         items: list,
-        searchString: event.target.value
+        searchString: event.target.value,
+        shouldUseCustomFilterOnly
       });
       if (newList.length > 0) {
         filteredLists.push({
@@ -356,7 +402,7 @@ const SearchBox = /*#__PURE__*/forwardRef(({
     if (typeof onChange === 'function') {
       onChange(event);
     }
-  }, [activeList, handleOpen, onChange, shouldAddInputToList, shouldShowContentOnEmptyInput]);
+  }, [activeList, customFilter, handleOpen, onChange, shouldAddInputToList, shouldShowContentOnEmptyInput, shouldUseCustomFilterOnly]);
 
   /**
    * This function handles the blur event of the input
@@ -427,6 +473,7 @@ const SearchBox = /*#__PURE__*/forwardRef(({
           id: id,
           text: text,
           imageUrl: imageUrl,
+          shouldShowSmallItems: shouldShowSmallItems,
           shouldShowRoundImage: shouldShowRoundImage,
           onSelect: handleSelect,
           groupName: groupName,
@@ -438,12 +485,13 @@ const SearchBox = /*#__PURE__*/forwardRef(({
       items.push(/*#__PURE__*/React.createElement(SearchBoxItem, {
         id: "input-value",
         onSelect: handleSelect,
+        shouldShowSmallItems: shouldShowSmallItems,
         text: `<b>${inputToListValue}</b`,
         tabIndex: items.length === 0 ? 0 : -1
       }));
     }
     return items;
-  }, [hintText, matchingListsItems, shouldAddInputToList, inputToListValue, value, hasMultipleGroups, shouldShowRoundImage, handleSelect]);
+  }, [hintText, matchingListsItems, shouldAddInputToList, inputToListValue, value, hasMultipleGroups, shouldShowSmallItems, shouldShowRoundImage, handleSelect]);
   useEffect(() => {
     const handleKeyDown = e => {
       if (!shouldShowBody || matchingListsItems.length === 0) {
@@ -571,13 +619,14 @@ const SearchBox = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement(SearchBoxBody, {
     filterButtons: filterButtons,
     height: height,
+    maxHeight: maxHeight,
     shouldShow: shouldShowDropdown,
     key: `search-box-body-${uuid}`,
     onGroupSelect: handleFilterButtonsGroupSelect,
     ref: contentRef,
     selectedGroups: groups,
     shouldHideFilterButtons: shouldHideFilterButtons
-  }, content))), [container, content, dropdownDirection, filterButtons, groups, handleBlur, handleChange, handleClose, handleDropdownOutsideClick, handleFocus, height, isInvalid, leftElement, onKeyDown, placeholder, rightElement, shouldHideFilterButtons, shouldShowDropdown, tagInputSettings, uuid, value]);
+  }, content))), [container, content, dropdownDirection, filterButtons, groups, handleBlur, handleChange, handleClose, handleDropdownOutsideClick, handleFocus, height, isInvalid, leftElement, maxHeight, onKeyDown, placeholder, rightElement, shouldHideFilterButtons, shouldShowDropdown, tagInputSettings, uuid, value]);
 });
 SearchBox.displayName = 'SearchBox';
 export default SearchBox;