@chayns-components/core 5.0.0-beta.550 → 5.0.0-beta.551

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js +2 -1
  2. package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
  3. package/lib/components/search-box/SearchBox.js +37 -7
  4. package/lib/components/search-box/SearchBox.js.map +1 -1
  5. package/lib/components/search-box/search-box-item/SearchBoxItem.js +3 -2
  6. package/lib/components/search-box/search-box-item/SearchBoxItem.js.map +1 -1
  7. package/package.json +2 -2
package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js CHANGED
@@ -9,7 +9,7 @@ export const StyledListItemHead = styled.div`
9
9
  return theme.text;
10
10
  }};
11
11
  display: flex;
12
- height: 64px;
12
+ min-height: 64px;
13
13
  padding: 12px 9px;
14
14
 
15
15
  ${_ref2 => {
@@ -126,5 +126,6 @@ export const StyledListItemHeadRightElement = styled.div`
126
126
  `;
127
127
  export const StyledMotionListItemHeadHoverItem = styled(motion.div)`
128
128
  overflow: hidden;
129
+ flex-shrink: 0;
129
130
  `;
130
131
  //# sourceMappingURL=ListItemHead.styles.js.map
package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","_ref","theme","text","_ref2","$isAnyItemExpandable","_ref3","$isClickable","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","_ref4","$isOpen","_ref5","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleText","span","_ref6","_ref7","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","_ref8","_ref9","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n FramerMotionBugFix,\n WithTheme,\n} from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n $isClickable: boolean;\n $isAnyItemExpandable: boolean;\n}>;\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n display: flex;\n height: 64px;\n padding: 12px 9px;\n\n ${({ $isAnyItemExpandable }) =>\n !$isAnyItemExpandable &&\n css`\n padding-left: 12px;\n `}\n\n ${({ $isClickable }) =>\n $isClickable &&\n css`\n cursor: pointer;\n `}\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 26px;\n justify-content: center;\n width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n $isIconOrImageGiven: boolean;\n $isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n justify-content: center;\n line-height: normal;\n margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\ntype StyledListItemHeadTitleTextProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadTitleText = styled.span<StyledListItemHeadTitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n\n flex: 1 1 auto;\n min-width: 0;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: 2px;\n opacity: 0.75;\n`;\n\ntype StyledListItemHeadSubtitleTextProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadSubtitleText = styled.span<StyledListItemHeadSubtitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n\n flex: 1 1 auto;\n font-size: 85%;\n min-width: 0;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n flex: 0 0 auto;\n font-size: 85%;\n margin-left: 8px;\n opacity: 0.75;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n flex: 0 0 auto;\n margin-left: 8px;\n font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n flex: 0 0 auto;\n margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAW/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA6B;AACtE;AACA,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AAChE;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OACvB,CAACC,oBAAoB,IACrBP,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMQ,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,IACZT,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAED,OAAO,MAAMU,iCAAiC,GAAGX,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMS,yBAAyB,GAAGZ,MAAM,CAACG,GAAoC;AACpF;AACA;AACA;AACA,mBAAmBU,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE;AACA;AACA,mBAAmBC,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAGC,SAAS;AAAA,CAAE;AAC3F;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGlB,MAAM,CAACG,GAAI;AAClD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMgB,2BAA2B,GAAGnB,MAAM,CAACoB,IAAuC;AACzF,mBAAmBC,KAAA;EAAA,IAAC;IAAEP;EAAQ,CAAC,GAAAO,KAAA;EAAA,OAAMP,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE,mBAAmBQ,KAAA;EAAA,IAAC;IAAER;EAAQ,CAAC,GAAAQ,KAAA;EAAA,OAAMR,OAAO,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAE;AACpE;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMS,0BAA0B,GAAGvB,MAAM,CAACG,GAAI;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMqB,8BAA8B,GAAGxB,MAAM,CAACoB,IAA0C;AAC/F,mBAAmBK,KAAA;EAAA,IAAC;IAAEX;EAAQ,CAAC,GAAAW,KAAA;EAAA,OAAMX,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE,mBAAmBY,KAAA;EAAA,IAAC;IAAEZ;EAAQ,CAAC,GAAAY,KAAA;EAAA,OAAMZ,OAAO,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAE;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMa,iCAAiC,GAAG3B,MAAM,CAACG,GAAI;AAC5D;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMyB,oCAAoC,GAAG5B,MAAM,CAACG,GAAI;AAC/D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAM0B,8BAA8B,GAAG7B,MAAM,CAACG,GAAI;AACzD;AACA;AACA,CAAC;AAED,OAAO,MAAM2B,iCAAiC,GAAG9B,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA,CAAC"}
1
+ {"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","_ref","theme","text","_ref2","$isAnyItemExpandable","_ref3","$isClickable","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","_ref4","$isOpen","_ref5","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleText","span","_ref6","_ref7","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","_ref8","_ref9","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n FramerMotionBugFix,\n WithTheme,\n} from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n $isClickable: boolean;\n $isAnyItemExpandable: boolean;\n}>;\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n display: flex;\n min-height: 64px;\n padding: 12px 9px;\n\n ${({ $isAnyItemExpandable }) =>\n !$isAnyItemExpandable &&\n css`\n padding-left: 12px;\n `}\n\n ${({ $isClickable }) =>\n $isClickable &&\n css`\n cursor: pointer;\n `}\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 26px;\n justify-content: center;\n width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n $isIconOrImageGiven: boolean;\n $isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n justify-content: center;\n line-height: normal;\n margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\ntype StyledListItemHeadTitleTextProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadTitleText = styled.span<StyledListItemHeadTitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n\n flex: 1 1 auto;\n min-width: 0;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: 2px;\n opacity: 0.75;\n`;\n\ntype StyledListItemHeadSubtitleTextProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadSubtitleText = styled.span<StyledListItemHeadSubtitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n\n flex: 1 1 auto;\n font-size: 85%;\n min-width: 0;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n flex: 0 0 auto;\n font-size: 85%;\n margin-left: 8px;\n opacity: 0.75;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n flex: 0 0 auto;\n margin-left: 8px;\n font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n flex: 0 0 auto;\n margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n flex-shrink: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAW/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA6B;AACtE;AACA,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AAChE;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OACvB,CAACC,oBAAoB,IACrBP,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMQ,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,IACZT,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAED,OAAO,MAAMU,iCAAiC,GAAGX,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMS,yBAAyB,GAAGZ,MAAM,CAACG,GAAoC;AACpF;AACA;AACA;AACA,mBAAmBU,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE;AACA;AACA,mBAAmBC,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAGC,SAAS;AAAA,CAAE;AAC3F;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGlB,MAAM,CAACG,GAAI;AAClD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMgB,2BAA2B,GAAGnB,MAAM,CAACoB,IAAuC;AACzF,mBAAmBC,KAAA;EAAA,IAAC;IAAEP;EAAQ,CAAC,GAAAO,KAAA;EAAA,OAAMP,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE,mBAAmBQ,KAAA;EAAA,IAAC;IAAER;EAAQ,CAAC,GAAAQ,KAAA;EAAA,OAAMR,OAAO,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAE;AACpE;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMS,0BAA0B,GAAGvB,MAAM,CAACG,GAAI;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMqB,8BAA8B,GAAGxB,MAAM,CAACoB,IAA0C;AAC/F,mBAAmBK,KAAA;EAAA,IAAC;IAAEX;EAAQ,CAAC,GAAAW,KAAA;EAAA,OAAMX,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE,mBAAmBY,KAAA;EAAA,IAAC;IAAEZ;EAAQ,CAAC,GAAAY,KAAA;EAAA,OAAMZ,OAAO,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAE;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMa,iCAAiC,GAAG3B,MAAM,CAACG,GAAI;AAC5D;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMyB,oCAAoC,GAAG5B,MAAM,CAACG,GAAI;AAC/D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAM0B,8BAA8B,GAAG7B,MAAM,CAACG,GAAI;AACzD;AACA;AACA,CAAC;AAED,OAAO,MAAM2B,iCAAiC,GAAG9B,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA;AACA,CAAC"}
package/lib/components/search-box/SearchBox.js CHANGED
@@ -6,6 +6,7 @@ import { searchList } from '../../utils/searchBox';
6
6
  import Input from '../input/Input';
7
7
  import GroupName from './group-name/GroupName';
8
8
  import SearchBoxItem from './search-box-item/SearchBoxItem';
9
+ import { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';
9
10
  import { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';
10
11
  const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
11
12
  let {
@@ -21,6 +22,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
21
22
  shouldAddInputToList = true
22
23
  } = _ref;
23
24
  const [matchingListsItems, setMatchingListsItems] = useState(lists);
25
+ const [selectedImage, setSelectedImage] = useState();
24
26
  const [value, setValue] = useState('');
25
27
  const [isAnimating, setIsAnimating] = useState(false);
26
28
  const [height, setHeight] = useState(0);
@@ -64,6 +66,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
64
66
  window.addEventListener('blur', () => setIsAnimating(false));
65
67
  };
66
68
  }, [handleOutsideClick, boxRef]);
69
+ useEffect(() => {}, []);
67
70
 
68
71
  /**
69
72
  * This hook calculates the height
@@ -115,10 +118,16 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
115
118
  });
116
119
  if (selectedItem) {
117
120
  setValue(selectedItem.text);
121
+ if (selectedItem.imageUrl) {
122
+ setSelectedImage( /*#__PURE__*/React.createElement(StyledSearchBoxItemImage, {
123
+ src: selectedItem.imageUrl,
124
+ $shouldShowRoundImage: shouldShowRoundImage
125
+ }));
126
+ }
118
127
  }
119
128
  });
120
129
  }
121
- }, [lists, selectedId]);
130
+ }, [lists, selectedId, shouldShowRoundImage]);
122
131
 
123
132
  /**
124
133
  * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value
@@ -133,7 +142,6 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
133
142
  /**
134
143
  * This function sets the items on focus if shouldShowContentOnEmptyInput
135
144
  */
136
-
137
145
  const handleFocus = useCallback(() => {
138
146
  if (shouldShowContentOnEmptyInput) {
139
147
  const newMatchingItems = lists.map(_ref6 => {
@@ -222,6 +230,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
222
230
  })
223
231
  };
224
232
  });
233
+ setSelectedImage(undefined);
225
234
  if (!shouldShowContentOnEmptyInput && !event.target.value) {
226
235
  setMatchingListsItems([]);
227
236
  } else {
@@ -248,13 +257,21 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
248
257
  * This function handles the item selection
249
258
  */
250
259
  const handleSelect = useCallback(item => {
251
- setValue(item.text);
260
+ const newItem = {
261
+ ...item,
262
+ text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', '')
263
+ };
264
+ setValue(newItem.text);
252
265
  setIsAnimating(false);
266
+ setSelectedImage(newItem.imageUrl ? /*#__PURE__*/React.createElement(StyledSearchBoxItemImage, {
267
+ src: newItem.imageUrl,
268
+ $shouldShowRoundImage: shouldShowRoundImage
269
+ }) : undefined);
253
270
  setMatchingListsItems([]);
254
271
  if (typeof onSelect === 'function') {
255
- onSelect(item);
272
+ onSelect(newItem);
256
273
  }
257
- }, [onSelect]);
274
+ }, [onSelect, shouldShowRoundImage]);
258
275
  const content = useMemo(() => {
259
276
  const items = [];
260
277
  matchingListsItems.forEach(_ref12 => {
@@ -325,9 +342,21 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
325
342
  id,
326
343
  textContent
327
344
  } = element;
345
+ let imageUrl;
346
+
347
+ // Just Ignore, it works
348
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
349
+ // @ts-ignore
350
+ if (element.children[0]?.attributes.src) {
351
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
352
+ // @ts-ignore
353
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
354
+ imageUrl = element.children[0]?.attributes.src.nodeValue;
355
+ }
328
356
  handleSelect({
329
357
  id: id.replace('search-box-item__', ''),
330
- text: textContent ?? ''
358
+ text: textContent ?? '',
359
+ imageUrl
331
360
  });
332
361
  }
333
362
  }
@@ -362,6 +391,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
362
391
  onFocus: handleFocus,
363
392
  placeholder: placeholder,
364
393
  onKeyDown: onKeyDown,
394
+ iconElement: selectedImage,
365
395
  value: value
366
396
  })), /*#__PURE__*/React.createElement(AnimatePresence, {
367
397
  initial: false
@@ -387,7 +417,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
387
417
  },
388
418
  ref: contentRef,
389
419
  tabIndex: 0
390
- }, content))), [browser?.name, content, handleBlur, handleChange, handleFocus, height, isAnimating, onKeyDown, placeholder, value, width]);
420
+ }, content))), [browser?.name, content, handleBlur, handleChange, handleFocus, height, isAnimating, onKeyDown, placeholder, selectedImage, value, width]);
391
421
  });
392
422
  SearchBox.displayName = 'SearchBox';
393
423
  export default SearchBox;
package/lib/components/search-box/SearchBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateContentHeight","searchList","Input","GroupName","SearchBoxItem","StyledMotionSearchBoxBody","StyledSearchBox","SearchBox","_ref","ref","placeholder","lists","onChange","onBlur","onSelect","onKeyDown","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","shouldAddInputToList","matchingListsItems","setMatchingListsItems","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","boxRef","contentRef","inputRef","browser","handleOutsideClick","event","current","contains","target","document","addEventListener","window","removeEventListener","textArray","forEach","_ref2","list","groupName","_ref3","text","push","input","getElementById","offsetWidth","_ref4","selectedItem","find","_ref5","id","handleFocus","newMatchingItems","map","_ref6","items","searchString","filteredMatchingListItems","_ref7","filter","item","_ref8","_ref9","_ref10","toLowerCase","handleChange","filteredLists","_ref11","handleBlur","handleSelect","content","_ref12","createElement","key","name","_ref13","imageUrl","handleKeyDown","e","preventDefault","children","filteredChildren","Array","from","child","dataset","isgroupname","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","clear","onFocus","initial","$browser","$height","$width","opacity","animate","transition","duration","type","displayName"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n /**\n * List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.\n */\n lists: ISearchBoxItems[];\n /**\n * The placeholder that should be displayed.\n */\n placeholder?: string;\n /**\n * Function to be executed when the input lost focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the input is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when an item is selected.\n */\n onSelect?: (item: ISearchBoxItem) => void;\n /**\n * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n */\n selectedId?: string;\n /**\n * Whether the full list of items should be displayed if the input is empty.\n */\n shouldShowContentOnEmptyInput?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n /**\n * If true, the value in the Input is displayed in the list.\n */\n shouldAddInputToList: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n (\n {\n placeholder,\n lists,\n onChange,\n onBlur,\n onSelect,\n onKeyDown,\n selectedId,\n shouldShowRoundImage,\n shouldShowContentOnEmptyInput = true,\n shouldAddInputToList = true,\n },\n ref,\n ) => {\n const [matchingListsItems, setMatchingListsItems] = useState<ISearchBoxItems[]>(lists);\n const [value, setValue] = useState('');\n const [isAnimating, setIsAnimating] = useState(false);\n const [height, setHeight] = useState<number>(0);\n const [width, setWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const [hasMultipleGroups, setHasMultipleGroups] = useState<boolean>(lists.length > 1);\n const [filteredChildrenArray, setFilteredChildrenArray] = useState<Element[]>();\n const [inputToListValue, setInputToListValue] = useState<string>('');\n\n const boxRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const { browser } = getDevice();\n\n /**\n * Checks if Lists are smaller then 1\n */\n\n useEffect(() => {\n setHasMultipleGroups(lists.length > 1);\n }, [lists]);\n\n /**\n * This function closes the list of items\n */\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n setIsAnimating(false);\n }\n },\n [boxRef],\n );\n\n /**\n * This hook listens for clicks\n */\n useEffect(() => {\n document.addEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => setIsAnimating(false));\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => setIsAnimating(false));\n };\n }, [handleOutsideClick, boxRef]);\n\n /**\n * This hook calculates the height\n */\n useEffect(() => {\n const textArray: string[] = [];\n\n lists.forEach(({ list, groupName }) => {\n list.forEach(({ text }) => textArray.push(text));\n if (!groupName) {\n return;\n }\n textArray.push(groupName);\n });\n\n if (shouldAddInputToList && inputToListValue !== '') {\n textArray.push(inputToListValue);\n }\n\n setHeight(calculateContentHeight(textArray));\n }, [inputToListValue, lists, placeholder, shouldAddInputToList]);\n\n /**\n * This hook calculates the width\n */\n useEffect(() => {\n const input = document.getElementById('search_box_input');\n\n if (input) {\n setWidth(input.offsetWidth);\n }\n }, []);\n\n useEffect(() => {\n if (selectedId) {\n lists.forEach(({ list }) => {\n const selectedItem = list.find(({ id }) => id === selectedId);\n if (selectedItem) {\n setValue(selectedItem.text);\n }\n });\n }\n }, [lists, selectedId]);\n\n /**\n * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n * should not be reset if the list changes and the selectedId is still undefined.\n */\n useEffect(() => {\n if (!selectedId) {\n setValue('');\n }\n }, [selectedId]);\n\n /**\n * This function sets the items on focus if shouldShowContentOnEmptyInput\n */\n\n const handleFocus = useCallback(() => {\n if (shouldShowContentOnEmptyInput) {\n const newMatchingItems = lists.map(({ list, groupName }) => ({\n groupName,\n list: searchList({ items: list, searchString: value }),\n }));\n\n const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n groupName,\n list: list.filter(\n (item) => !(newMatchingItems.length === 1 && item.text === value),\n ),\n }));\n\n setMatchingListsItems(filteredMatchingListItems);\n setIsAnimating(filteredMatchingListItems.length !== 0);\n }\n }, [lists, shouldShowContentOnEmptyInput, value]);\n\n /**\n * This function filters the lists by input\n */\n\n useEffect(() => {\n const newMatchingItems = lists.map(({ list, groupName }) => ({\n groupName,\n list: searchList({ items: list, searchString: value }),\n }));\n\n if (shouldAddInputToList && inputToListValue !== '') {\n newMatchingItems.forEach(({ list }) => {\n list.forEach(({ text }) => {\n if (text.toLowerCase() === inputToListValue.toLowerCase()) {\n setInputToListValue('');\n }\n });\n });\n }\n\n if (!shouldShowContentOnEmptyInput && !value) {\n setMatchingListsItems([]);\n } else {\n setMatchingListsItems(newMatchingItems);\n setIsAnimating(newMatchingItems.length !== 0);\n }\n }, [inputToListValue, lists, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);\n\n /**\n * This function handles changes of the input\n */\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const filteredLists = lists.map(({ list, groupName }) => ({\n groupName,\n list: searchList({ items: list, searchString: event.target.value }),\n }));\n\n if (!shouldShowContentOnEmptyInput && !event.target.value) {\n setMatchingListsItems([]);\n } else {\n setMatchingListsItems(filteredLists);\n setIsAnimating(filteredLists.length !== 0);\n }\n\n setValue(event.target.value);\n setInputToListValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [lists, onChange, shouldShowContentOnEmptyInput],\n );\n\n /**\n * This function handles the blur event of the input\n */\n const handleBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (typeof onBlur === 'function') {\n onBlur(event);\n }\n },\n [onBlur],\n );\n\n /**\n * This function handles the item selection\n */\n const handleSelect = useCallback(\n (item: ISearchBoxItem) => {\n setValue(item.text);\n setIsAnimating(false);\n\n setMatchingListsItems([]);\n if (typeof onSelect === 'function') {\n onSelect(item);\n }\n },\n [onSelect],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n matchingListsItems.forEach(({ groupName, list }) => {\n if (hasMultipleGroups) {\n if (list.length <= 0) {\n return;\n }\n\n items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n }\n\n list.forEach(({ id, text, imageUrl }) => {\n items.push(\n <SearchBoxItem\n key={`${id}_${groupName ?? ''}`}\n id={id}\n text={text}\n imageUrl={imageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n onSelect={handleSelect}\n groupName={groupName}\n />,\n );\n });\n });\n\n if (shouldAddInputToList && inputToListValue !== '') {\n items.push(\n <SearchBoxItem\n id=\"input-value\"\n onSelect={handleSelect}\n text={`<b>${inputToListValue}</b`}\n />,\n );\n }\n\n return items;\n }, [\n matchingListsItems,\n shouldAddInputToList,\n inputToListValue,\n hasMultipleGroups,\n shouldShowRoundImage,\n handleSelect,\n ]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n\n if (children && children.length > 0) {\n const filteredChildren = Array.from(children).filter(\n (child) => (child as HTMLElement).dataset.isgroupname !== 'true',\n );\n setFilteredChildrenArray(filteredChildren);\n\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (e.key === 'ArrowUp' ? -1 : 1) +\n filteredChildren.length) %\n filteredChildren.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = filteredChildren[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = filteredChildren[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n if (filteredChildrenArray) {\n const element = filteredChildrenArray[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id, textContent } = element;\n\n handleSelect({\n id: id.replace('search-box-item__', ''),\n text: textContent ?? '',\n });\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [filteredChildrenArray, focusedIndex, handleSelect]);\n\n const handleKeyPress = useCallback((event: KeyboardEvent) => {\n if (event.keyCode === 27) {\n setMatchingListsItems([]);\n }\n }, []);\n\n useImperativeHandle(\n ref,\n () => ({\n clear: () => setValue(''),\n }),\n [],\n );\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyPress);\n\n return () => {\n document.addEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n return useMemo(\n () => (\n <StyledSearchBox ref={boxRef}>\n <div id=\"search_box_input\">\n <Input\n ref={inputRef}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n placeholder={placeholder}\n onKeyDown={onKeyDown}\n value={value}\n />\n </div>\n <AnimatePresence initial={false}>\n <StyledMotionSearchBoxBody\n $browser={browser?.name}\n key=\"content\"\n $height={height}\n $width={width}\n initial={{ height: 0, opacity: 0 }}\n animate={\n isAnimating\n ? { height: 'fit-content', opacity: 1 }\n : { height: 0, opacity: 0 }\n }\n transition={{\n duration: 0.2,\n type: 'tween',\n }}\n ref={contentRef}\n tabIndex={0}\n >\n {content}\n </StyledMotionSearchBoxBody>\n </AnimatePresence>\n </StyledSearchBox>\n ),\n [\n browser?.name,\n content,\n handleBlur,\n handleChange,\n handleFocus,\n height,\n isAnimating,\n onKeyDown,\n placeholder,\n value,\n width,\n ],\n );\n },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}
1
+ {"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateContentHeight","searchList","Input","GroupName","SearchBoxItem","StyledSearchBoxItemImage","StyledMotionSearchBoxBody","StyledSearchBox","SearchBox","_ref","ref","placeholder","lists","onChange","onBlur","onSelect","onKeyDown","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","shouldAddInputToList","matchingListsItems","setMatchingListsItems","selectedImage","setSelectedImage","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","boxRef","contentRef","inputRef","browser","handleOutsideClick","event","current","contains","target","document","addEventListener","window","removeEventListener","textArray","forEach","_ref2","list","groupName","_ref3","text","push","input","getElementById","offsetWidth","_ref4","selectedItem","find","_ref5","id","imageUrl","createElement","src","$shouldShowRoundImage","handleFocus","newMatchingItems","map","_ref6","items","searchString","filteredMatchingListItems","_ref7","filter","item","_ref8","_ref9","_ref10","toLowerCase","handleChange","filteredLists","_ref11","undefined","handleBlur","handleSelect","newItem","replace","content","_ref12","key","name","_ref13","handleKeyDown","e","preventDefault","children","filteredChildren","Array","from","child","dataset","isgroupname","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","attributes","nodeValue","handleKeyPress","keyCode","clear","onFocus","iconElement","initial","$browser","$height","$width","opacity","animate","transition","duration","type","displayName"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n /**\n * List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.\n */\n lists: ISearchBoxItems[];\n /**\n * The placeholder that should be displayed.\n */\n placeholder?: string;\n /**\n * Function to be executed when the input lost focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the input is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when an item is selected.\n */\n onSelect?: (item: ISearchBoxItem) => void;\n /**\n * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n */\n selectedId?: string;\n /**\n * Whether the full list of items should be displayed if the input is empty.\n */\n shouldShowContentOnEmptyInput?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n /**\n * If true, the value in the Input is displayed in the list.\n */\n shouldAddInputToList: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n (\n {\n placeholder,\n lists,\n onChange,\n onBlur,\n onSelect,\n onKeyDown,\n selectedId,\n shouldShowRoundImage,\n shouldShowContentOnEmptyInput = true,\n shouldAddInputToList = true,\n },\n ref,\n ) => {\n const [matchingListsItems, setMatchingListsItems] = useState<ISearchBoxItems[]>(lists);\n const [selectedImage, setSelectedImage] = useState<ReactElement>();\n const [value, setValue] = useState('');\n const [isAnimating, setIsAnimating] = useState(false);\n const [height, setHeight] = useState<number>(0);\n const [width, setWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const [hasMultipleGroups, setHasMultipleGroups] = useState<boolean>(lists.length > 1);\n const [filteredChildrenArray, setFilteredChildrenArray] = useState<Element[]>();\n const [inputToListValue, setInputToListValue] = useState<string>('');\n\n const boxRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const { browser } = getDevice();\n\n /**\n * Checks if Lists are smaller then 1\n */\n\n useEffect(() => {\n setHasMultipleGroups(lists.length > 1);\n }, [lists]);\n\n /**\n * This function closes the list of items\n */\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n setIsAnimating(false);\n }\n },\n [boxRef],\n );\n\n /**\n * This hook listens for clicks\n */\n useEffect(() => {\n document.addEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => setIsAnimating(false));\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => setIsAnimating(false));\n };\n }, [handleOutsideClick, boxRef]);\n\n useEffect(() => {}, []);\n\n /**\n * This hook calculates the height\n */\n useEffect(() => {\n const textArray: string[] = [];\n\n lists.forEach(({ list, groupName }) => {\n list.forEach(({ text }) => textArray.push(text));\n if (!groupName) {\n return;\n }\n textArray.push(groupName);\n });\n\n if (shouldAddInputToList && inputToListValue !== '') {\n textArray.push(inputToListValue);\n }\n\n setHeight(calculateContentHeight(textArray));\n }, [inputToListValue, lists, placeholder, shouldAddInputToList]);\n\n /**\n * This hook calculates the width\n */\n useEffect(() => {\n const input = document.getElementById('search_box_input');\n\n if (input) {\n setWidth(input.offsetWidth);\n }\n }, []);\n\n useEffect(() => {\n if (selectedId) {\n lists.forEach(({ list }) => {\n const selectedItem = list.find(({ id }) => id === selectedId);\n if (selectedItem) {\n setValue(selectedItem.text);\n\n if (selectedItem.imageUrl) {\n setSelectedImage(\n <StyledSearchBoxItemImage\n src={selectedItem.imageUrl}\n $shouldShowRoundImage={shouldShowRoundImage}\n />,\n );\n }\n }\n });\n }\n }, [lists, selectedId, shouldShowRoundImage]);\n\n /**\n * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n * should not be reset if the list changes and the selectedId is still undefined.\n */\n useEffect(() => {\n if (!selectedId) {\n setValue('');\n }\n }, [selectedId]);\n\n /**\n * This function sets the items on focus if shouldShowContentOnEmptyInput\n */\n const handleFocus = useCallback(() => {\n if (shouldShowContentOnEmptyInput) {\n const newMatchingItems = lists.map(({ list, groupName }) => ({\n groupName,\n list: searchList({ items: list, searchString: value }),\n }));\n\n const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n groupName,\n list: list.filter(\n (item) => !(newMatchingItems.length === 1 && item.text === value),\n ),\n }));\n\n setMatchingListsItems(filteredMatchingListItems);\n setIsAnimating(filteredMatchingListItems.length !== 0);\n }\n }, [lists, shouldShowContentOnEmptyInput, value]);\n\n /**\n * This function filters the lists by input\n */\n\n useEffect(() => {\n const newMatchingItems = lists.map(({ list, groupName }) => ({\n groupName,\n list: searchList({ items: list, searchString: value }),\n }));\n\n if (shouldAddInputToList && inputToListValue !== '') {\n newMatchingItems.forEach(({ list }) => {\n list.forEach(({ text }) => {\n if (text.toLowerCase() === inputToListValue.toLowerCase()) {\n setInputToListValue('');\n }\n });\n });\n }\n\n if (!shouldShowContentOnEmptyInput && !value) {\n setMatchingListsItems([]);\n } else {\n setMatchingListsItems(newMatchingItems);\n setIsAnimating(newMatchingItems.length !== 0);\n }\n }, [inputToListValue, lists, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);\n\n /**\n * This function handles changes of the input\n */\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const filteredLists = lists.map(({ list, groupName }) => ({\n groupName,\n list: searchList({ items: list, searchString: event.target.value }),\n }));\n\n setSelectedImage(undefined);\n\n if (!shouldShowContentOnEmptyInput && !event.target.value) {\n setMatchingListsItems([]);\n } else {\n setMatchingListsItems(filteredLists);\n setIsAnimating(filteredLists.length !== 0);\n }\n\n setValue(event.target.value);\n setInputToListValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [lists, onChange, shouldShowContentOnEmptyInput],\n );\n\n /**\n * This function handles the blur event of the input\n */\n const handleBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (typeof onBlur === 'function') {\n onBlur(event);\n }\n },\n [onBlur],\n );\n\n /**\n * This function handles the item selection\n */\n const handleSelect = useCallback(\n (item: ISearchBoxItem) => {\n const newItem = {\n ...item,\n text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', ''),\n };\n\n setValue(newItem.text);\n setIsAnimating(false);\n\n setSelectedImage(\n newItem.imageUrl ? (\n <StyledSearchBoxItemImage\n src={newItem.imageUrl}\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n ) : undefined,\n );\n\n setMatchingListsItems([]);\n\n if (typeof onSelect === 'function') {\n onSelect(newItem);\n }\n },\n [onSelect, shouldShowRoundImage],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n matchingListsItems.forEach(({ groupName, list }) => {\n if (hasMultipleGroups) {\n if (list.length <= 0) {\n return;\n }\n\n items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n }\n\n list.forEach(({ id, text, imageUrl }) => {\n items.push(\n <SearchBoxItem\n key={`${id}_${groupName ?? ''}`}\n id={id}\n text={text}\n imageUrl={imageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n onSelect={handleSelect}\n groupName={groupName}\n />,\n );\n });\n });\n\n if (shouldAddInputToList && inputToListValue !== '') {\n items.push(\n <SearchBoxItem\n id=\"input-value\"\n onSelect={handleSelect}\n text={`<b>${inputToListValue}</b`}\n />,\n );\n }\n\n return items;\n }, [\n matchingListsItems,\n shouldAddInputToList,\n inputToListValue,\n hasMultipleGroups,\n shouldShowRoundImage,\n handleSelect,\n ]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n\n if (children && children.length > 0) {\n const filteredChildren = Array.from(children).filter(\n (child) => (child as HTMLElement).dataset.isgroupname !== 'true',\n );\n setFilteredChildrenArray(filteredChildren);\n\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (e.key === 'ArrowUp' ? -1 : 1) +\n filteredChildren.length) %\n filteredChildren.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = filteredChildren[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = filteredChildren[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n if (filteredChildrenArray) {\n const element = filteredChildrenArray[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id, textContent } = element;\n\n let imageUrl: string | undefined;\n\n // Just Ignore, it works\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (element.children[0]?.attributes.src) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n imageUrl = element.children[0]?.attributes.src.nodeValue as string;\n }\n\n handleSelect({\n id: id.replace('search-box-item__', ''),\n text: textContent ?? '',\n imageUrl,\n });\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [filteredChildrenArray, focusedIndex, handleSelect]);\n\n const handleKeyPress = useCallback((event: KeyboardEvent) => {\n if (event.keyCode === 27) {\n setMatchingListsItems([]);\n }\n }, []);\n\n useImperativeHandle(\n ref,\n () => ({\n clear: () => setValue(''),\n }),\n [],\n );\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyPress);\n\n return () => {\n document.addEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n return useMemo(\n () => (\n <StyledSearchBox ref={boxRef}>\n <div id=\"search_box_input\">\n <Input\n ref={inputRef}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n placeholder={placeholder}\n onKeyDown={onKeyDown}\n iconElement={selectedImage}\n value={value}\n />\n </div>\n <AnimatePresence initial={false}>\n <StyledMotionSearchBoxBody\n $browser={browser?.name}\n key=\"content\"\n $height={height}\n $width={width}\n initial={{ height: 0, opacity: 0 }}\n animate={\n isAnimating\n ? { height: 'fit-content', opacity: 1 }\n : { height: 0, opacity: 0 }\n }\n transition={{\n duration: 0.2,\n type: 'tween',\n }}\n ref={contentRef}\n tabIndex={0}\n >\n {content}\n </StyledMotionSearchBoxBody>\n </AnimatePresence>\n </StyledSearchBox>\n ),\n [\n browser?.name,\n content,\n handleBlur,\n handleChange,\n handleFocus,\n height,\n isAnimating,\n onKeyDown,\n placeholder,\n selectedImage,\n value,\n width,\n ],\n );\n },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}
package/lib/components/search-box/search-box-item/SearchBoxItem.js CHANGED
@@ -12,9 +12,10 @@ const SearchBoxItem = _ref => {
12
12
  const handleClick = useCallback(() => {
13
13
  onSelect({
14
14
  id,
15
- text
15
+ text,
16
+ imageUrl
16
17
  }, groupName);
17
- }, [id, onSelect, text, groupName]);
18
+ }, [onSelect, id, text, imageUrl, groupName]);
18
19
  return useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBoxItem, {
19
20
  id: `search-box-item__${id}_${groupName ?? ''}`,
20
21
  onClick: handleClick
package/lib/components/search-box/search-box-item/SearchBoxItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchBoxItem.js","names":["React","useCallback","useMemo","StyledSearchBoxItem","StyledSearchBoxItemImage","StyledSearchBoxItemText","SearchBoxItem","_ref","id","text","imageUrl","shouldShowRoundImage","onSelect","groupName","handleClick","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 }, groupName);\n }, [id, onSelect, text, groupName]);\n\n return useMemo(\n () => (\n <StyledSearchBoxItem\n id={`search-box-item__${id}_${groupName ?? ''}`}\n onClick={handleClick}\n >\n {imageUrl && (\n <StyledSearchBoxItemImage\n src={imageUrl}\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n <StyledSearchBoxItemText dangerouslySetInnerHTML={{ __html: text }} />\n </StyledSearchBoxItem>\n ),\n [groupName, handleClick, id, imageUrl, shouldShowRoundImage, text],\n );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEvD,SACIC,mBAAmB,EACnBC,wBAAwB,EACxBC,uBAAuB,QACpB,wBAAwB;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;IAAK,CAAC,EAAEI,SAAS,CAAC;EACrC,CAAC,EAAE,CAACL,EAAE,EAAEI,QAAQ,EAAEH,IAAI,EAAEI,SAAS,CAAC,CAAC;EAEnC,OAAOX,OAAO,CACV,mBACIF,KAAA,CAAAe,aAAA,CAACZ,mBAAmB;IAChBK,EAAE,EAAG,oBAAmBA,EAAG,IAAGK,SAAS,IAAI,EAAG,EAAE;IAChDG,OAAO,EAAEF;EAAY,GAEpBJ,QAAQ,iBACLV,KAAA,CAAAe,aAAA,CAACX,wBAAwB;IACrBa,GAAG,EAAEP,QAAS;IACdQ,qBAAqB,EAAEP;EAAqB,CAC/C,CACJ,eACDX,KAAA,CAAAe,aAAA,CAACV,uBAAuB;IAACc,uBAAuB,EAAE;MAAEC,MAAM,EAAEX;IAAK;EAAE,CAAE,CACpD,CACxB,EACD,CAACI,SAAS,EAAEC,WAAW,EAAEN,EAAE,EAAEE,QAAQ,EAAEC,oBAAoB,EAAEF,IAAI,CACrE,CAAC;AACL,CAAC;AAEDH,aAAa,CAACe,WAAW,GAAG,eAAe;AAE3C,eAAef,aAAa"}
1
+ {"version":3,"file":"SearchBoxItem.js","names":["React","useCallback","useMemo","StyledSearchBoxItem","StyledSearchBoxItemImage","StyledSearchBoxItemText","SearchBoxItem","_ref","id","text","imageUrl","shouldShowRoundImage","onSelect","groupName","handleClick","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 return useMemo(\n () => (\n <StyledSearchBoxItem\n id={`search-box-item__${id}_${groupName ?? ''}`}\n onClick={handleClick}\n >\n {imageUrl && (\n <StyledSearchBoxItemImage\n src={imageUrl}\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n <StyledSearchBoxItemText dangerouslySetInnerHTML={{ __html: text }} />\n </StyledSearchBoxItem>\n ),\n [groupName, handleClick, id, imageUrl, shouldShowRoundImage, text],\n );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEvD,SACIC,mBAAmB,EACnBC,wBAAwB,EACxBC,uBAAuB,QACpB,wBAAwB;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,OAAOX,OAAO,CACV,mBACIF,KAAA,CAAAe,aAAA,CAACZ,mBAAmB;IAChBK,EAAE,EAAG,oBAAmBA,EAAG,IAAGK,SAAS,IAAI,EAAG,EAAE;IAChDG,OAAO,EAAEF;EAAY,GAEpBJ,QAAQ,iBACLV,KAAA,CAAAe,aAAA,CAACX,wBAAwB;IACrBa,GAAG,EAAEP,QAAS;IACdQ,qBAAqB,EAAEP;EAAqB,CAC/C,CACJ,eACDX,KAAA,CAAAe,aAAA,CAACV,uBAAuB;IAACc,uBAAuB,EAAE;MAAEC,MAAM,EAAEX;IAAK;EAAE,CAAE,CACpD,CACxB,EACD,CAACI,SAAS,EAAEC,WAAW,EAAEN,EAAE,EAAEE,QAAQ,EAAEC,oBAAoB,EAAEF,IAAI,CACrE,CAAC;AACL,CAAC;AAEDH,aAAa,CAACe,WAAW,GAAG,eAAe;AAE3C,eAAef,aAAa"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.550",
3
+ "version": "5.0.0-beta.551",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -73,5 +73,5 @@
73
73
  "publishConfig": {
74
74
  "access": "public"
75
75
  },
76
- "gitHead": "75602c020e5deeca53560abbc1b8ef5069804e81"
76
+ "gitHead": "2882d3c8b44f891c605c1165cabb0849bcb73ce5"
77
77
  }