@chayns-components/core 5.0.0-beta.891 → 5.0.0-beta.893

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 (35) hide show
  1. package/lib/cjs/components/accordion/accordion-head/AccordionHead.js +3 -1
  2. package/lib/cjs/components/accordion/accordion-head/AccordionHead.js.map +1 -1
  3. package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js +4 -0
  4. package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
  5. package/lib/cjs/components/combobox/ComboBox.js +19 -8
  6. package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
  7. package/lib/cjs/components/context-menu/ContextMenu.js +19 -5
  8. package/lib/cjs/components/context-menu/ContextMenu.js.map +1 -1
  9. package/lib/cjs/components/popup/Popup.js +14 -3
  10. package/lib/cjs/components/popup/Popup.js.map +1 -1
  11. package/lib/cjs/components/search-box/SearchBox.js +14 -3
  12. package/lib/cjs/components/search-box/SearchBox.js.map +1 -1
  13. package/lib/cjs/components/select-button/SelectButton.js +3 -1
  14. package/lib/cjs/components/select-button/SelectButton.js.map +1 -1
  15. package/lib/cjs/utils/accordion.js +18 -1
  16. package/lib/cjs/utils/accordion.js.map +1 -1
  17. package/lib/esm/components/accordion/accordion-head/AccordionHead.js +4 -2
  18. package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map +1 -1
  19. package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js +13 -6
  20. package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
  21. package/lib/esm/components/combobox/ComboBox.js +19 -8
  22. package/lib/esm/components/combobox/ComboBox.js.map +1 -1
  23. package/lib/esm/components/context-menu/ContextMenu.js +19 -5
  24. package/lib/esm/components/context-menu/ContextMenu.js.map +1 -1
  25. package/lib/esm/components/popup/Popup.js +14 -3
  26. package/lib/esm/components/popup/Popup.js.map +1 -1
  27. package/lib/esm/components/search-box/SearchBox.js +14 -3
  28. package/lib/esm/components/search-box/SearchBox.js.map +1 -1
  29. package/lib/esm/components/select-button/SelectButton.js +3 -1
  30. package/lib/esm/components/select-button/SelectButton.js.map +1 -1
  31. package/lib/esm/utils/accordion.js +16 -0
  32. package/lib/esm/utils/accordion.js.map +1 -1
  33. package/lib/types/components/select-button/SelectButton.d.ts +4 -0
  34. package/lib/types/utils/accordion.d.ts +2 -0
  35. package/package.json +2 -2
@@ -15,7 +15,7 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
15
15
  icons: ['ts-ellipsis_v'],
16
16
  size: 18
17
17
  }),
18
- container = document.querySelector('.page-provider') || document.querySelector('.tapp') || document.body,
18
+ container,
19
19
  coordinates,
20
20
  isInDialog = false,
21
21
  items,
@@ -27,6 +27,7 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
27
27
  x: 0,
28
28
  y: 0
29
29
  });
30
+ const [newContainer, setNewContainer] = useState(container ?? null);
30
31
  const [internalAlignment, setInternalAlignment] = useState(ContextMenuAlignment.TopLeft);
31
32
  const [isContentShown, setIsContentShown] = useState(false);
32
33
  const [portal, setPortal] = useState();
@@ -35,6 +36,13 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
35
36
  // ToDo: Replace with hook if new chayns api is ready
36
37
  const contextMenuContentRef = useRef(null);
37
38
  const contextMenuRef = useRef(null);
39
+ useEffect(() => {
40
+ if (contextMenuRef.current && !container) {
41
+ const el = contextMenuRef.current;
42
+ const element = el.closest('.dialog-inner') || el.closest('.page-provider') || el.closest('.tapp') || el.closest('body');
43
+ setNewContainer(element);
44
+ }
45
+ }, [container]);
38
46
  const handleHide = useCallback(() => {
39
47
  setIsContentShown(false);
40
48
  }, []);
@@ -62,6 +70,9 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
62
70
  void items[result[0]]?.onClick();
63
71
  }
64
72
  } else if (contextMenuRef.current) {
73
+ if (!newContainer) {
74
+ return;
75
+ }
65
76
  const {
66
77
  height: childrenHeight,
67
78
  left: childrenLeft,
@@ -73,7 +84,7 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
73
84
  width,
74
85
  top,
75
86
  left
76
- } = container.getBoundingClientRect();
87
+ } = newContainer.getBoundingClientRect();
77
88
  const x = childrenLeft + (isInDialog ? 0 : window.scrollX) + childrenWidth / 2 - left;
78
89
  const y = childrenTop + (isInDialog ? 0 : window.scrollY) + childrenHeight / 2 - top;
79
90
  setInternalCoordinates({
@@ -93,7 +104,7 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
93
104
  }
94
105
  setIsContentShown(true);
95
106
  }
96
- }, [container, isInDialog, items]);
107
+ }, [isInDialog, items, newContainer]);
97
108
  const handleClick = useCallback(event => {
98
109
  event.preventDefault();
99
110
  event.stopPropagation();
@@ -125,6 +136,9 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
125
136
  };
126
137
  }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);
127
138
  useEffect(() => {
139
+ if (!newContainer) {
140
+ return;
141
+ }
128
142
  setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(AnimatePresence, {
129
143
  initial: false
130
144
  }, isContentShown && /*#__PURE__*/React.createElement(ContextMenuContent, {
@@ -133,8 +147,8 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
133
147
  key: `contextMenu_${uuid}`,
134
148
  alignment: alignment ?? internalAlignment,
135
149
  ref: contextMenuContentRef
136
- })), container));
137
- }, [alignment, container, coordinates, internalAlignment, internalCoordinates, isContentShown, items, uuid]);
150
+ })), newContainer));
151
+ }, [alignment, newContainer, coordinates, internalAlignment, internalCoordinates, isContentShown, items, uuid]);
138
152
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledContextMenu, {
139
153
  className: "beta-chayns-context-menu",
140
154
  onClick: handleClick,
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","getIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","size","container","document","querySelector","body","coordinates","isInDialog","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","handleHide","handleShow","isTouch","result","type","SELECT","buttons","list","map","_ref2","index","text","name","id","icon","open","onClick","current","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","window","scrollX","scrollY","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","addEventListener","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /**\n * Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n */\n alignment?: ContextMenuAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `ContextMenu` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n */\n coordinates?: ContextMenuCoordinates;\n /**\n * Whether the ContextMenu is inside a dialog.\n */\n isInDialog?: boolean;\n /**\n * The items that will be displayed in the content of the `ContextMenu`.\n */\n items: ContextMenuItem[];\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be closed if its clicked.\n */\n shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n buttonType: number;\n result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n container = document.querySelector('.page-provider') ||\n document.querySelector('.tapp') ||\n document.body,\n coordinates,\n isInDialog = false,\n items,\n onHide,\n onShow,\n shouldCloseOnPopupClick = true,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const isTouch = getIsTouch();\n\n if (isTouch) {\n const { result } = (await createDialog({\n type: DialogType.SELECT,\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n id: index,\n icon: icons[0],\n })),\n }).open()) as SelectDialogResult;\n\n if (result && typeof result[0] === 'number') {\n void items[result[0]]?.onClick();\n }\n } else if (contextMenuRef.current) {\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n const { height, width, top, left } = container.getBoundingClientRect();\n\n const x =\n childrenLeft + (isInDialog ? 0 : window.scrollX) + childrenWidth / 2 - left;\n const y =\n childrenTop + (isInDialog ? 0 : window.scrollY) + childrenHeight / 2 - top;\n\n setInternalCoordinates({ x, y });\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [container, isInDialog, items]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !shouldCloseOnPopupClick &&\n contextMenuContentRef.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n handleHide();\n },\n [handleHide, shouldCloseOnPopupClick],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isContentShown) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n alignment,\n container,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,YAAY;AACrD,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IACRC,UAAU,EAKVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,yBAAyB;AACpD,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,kBAAkB,MAAM,2CAA2C;AAC1E,SAASC,iBAAiB,QAAQ,sBAAsB;AAkExD,MAAMC,WAAW,gBAAGb,UAAU,CAC1B,CAAAc,IAAA,EAcIC,GAAG,KACF;EAAA,IAdD;IACIC,SAAS;IACTC,QAAQ,gBAAGlB,KAAA,CAAAmB,aAAA,CAACR,IAAI;MAACS,KAAK,EAAE,CAAC,eAAe,CAAE;MAACC,IAAI,EAAE;IAAG,CAAE,CAAC;IACvDC,SAAS,GAAGC,QAAQ,CAACC,aAAa,CAAC,gBAAgB,CAAC,IAChDD,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC,IAC/BD,QAAQ,CAACE,IAAI;IACjBC,WAAW;IACXC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,MAAM;IACNC,MAAM;IACNC,uBAAuB,GAAG;EAC9B,CAAC,GAAAhB,IAAA;EAGD,MAAM,CAACiB,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG3B,QAAQ,CAAyB;IACnF4B,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EAEF,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG/B,QAAQ,CACtDG,oBAAoB,CAAC6B,OACzB,CAAC;EAED,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGlC,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAM,CAACmC,MAAM,EAAEC,SAAS,CAAC,GAAGpC,QAAQ,CAAc,CAAC;EAEnD,MAAMqC,IAAI,GAAGnC,OAAO,CAAC,CAAC;;EAEtB;EACA,MAAMoC,qBAAqB,GAAGvC,MAAM,CAAiB,IAAI,CAAC;EAC1D,MAAMwC,cAAc,GAAGxC,MAAM,CAAkB,IAAI,CAAC;EAEpD,MAAMyC,UAAU,GAAG5C,WAAW,CAAC,MAAM;IACjCsC,iBAAiB,CAAC,KAAK,CAAC;EAC5B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMO,UAAU,GAAG7C,WAAW,CAAC,YAAY;IACvC,MAAM8C,OAAO,GAAGtC,UAAU,CAAC,CAAC;IAE5B,IAAIsC,OAAO,EAAE;MACT,MAAM;QAAEC;MAAO,CAAC,GAAI,MAAMpD,YAAY,CAAC;QACnCqD,IAAI,EAAEpD,UAAU,CAACqD,MAAM;QACvBC,OAAO,EAAE,EAAE;QACXC,IAAI,EAAEzB,KAAK,CAAC0B,GAAG,CAAC,CAAAC,KAAA,EAAkBC,KAAK;UAAA,IAAtB;YAAEpC,KAAK;YAAEqC;UAAK,CAAC,GAAAF,KAAA;UAAA,OAAa;YACzCG,IAAI,EAAED,IAAI;YACVE,EAAE,EAAEH,KAAK;YACTI,IAAI,EAAExC,KAAK,CAAC,CAAC;UACjB,CAAC;QAAA,CAAC;MACN,CAAC,CAAC,CAACyC,IAAI,CAAC,CAAwB;MAEhC,IAAIZ,MAAM,IAAI,OAAOA,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;QACzC,KAAKrB,KAAK,CAACqB,MAAM,CAAC,CAAC,CAAC,CAAC,EAAEa,OAAO,CAAC,CAAC;MACpC;IACJ,CAAC,MAAM,IAAIjB,cAAc,CAACkB,OAAO,EAAE;MAC/B,MAAM;QACFC,MAAM,EAAEC,cAAc;QACtBC,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBC,KAAK,EAAEC;MACX,CAAC,GAAG1B,cAAc,CAACkB,OAAO,CAACS,qBAAqB,CAAC,CAAC;MAElD,MAAM;QAAER,MAAM;QAAEM,KAAK;QAAEF,GAAG;QAAEF;MAAK,CAAC,GAAG5C,SAAS,CAACkD,qBAAqB,CAAC,CAAC;MAEtE,MAAMtC,CAAC,GACHiC,YAAY,IAAIxC,UAAU,GAAG,CAAC,GAAG8C,MAAM,CAACC,OAAO,CAAC,GAAGH,aAAa,GAAG,CAAC,GAAGL,IAAI;MAC/E,MAAM/B,CAAC,GACHkC,WAAW,IAAI1C,UAAU,GAAG,CAAC,GAAG8C,MAAM,CAACE,OAAO,CAAC,GAAGV,cAAc,GAAG,CAAC,GAAGG,GAAG;MAE9EnC,sBAAsB,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,CAAC;MAEhC,IAAID,CAAC,GAAGoC,KAAK,GAAG,CAAC,EAAE;QACf,IAAInC,CAAC,GAAG6B,MAAM,GAAG,CAAC,EAAE;UAChB3B,oBAAoB,CAAC5B,oBAAoB,CAACmE,WAAW,CAAC;QAC1D,CAAC,MAAM;UACHvC,oBAAoB,CAAC5B,oBAAoB,CAACoE,QAAQ,CAAC;QACvD;MACJ,CAAC,MAAM,IAAI1C,CAAC,GAAG6B,MAAM,GAAG,CAAC,EAAE;QACvB3B,oBAAoB,CAAC5B,oBAAoB,CAACqE,UAAU,CAAC;MACzD,CAAC,MAAM;QACHzC,oBAAoB,CAAC5B,oBAAoB,CAAC6B,OAAO,CAAC;MACtD;MAEAE,iBAAiB,CAAC,IAAI,CAAC;IAC3B;EACJ,CAAC,EAAE,CAAClB,SAAS,EAAEK,UAAU,EAAEC,KAAK,CAAC,CAAC;EAElC,MAAMmD,WAAW,GAAG7E,WAAW,CAC1B8E,KAAK,IAAK;IACPA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,KAAKnC,UAAU,CAAC,CAAC;EACrB,CAAC,EACD,CAACA,UAAU,CACf,CAAC;EAED,MAAMoC,mBAAmB,GAAGjF,WAAW,CAClC8E,KAAK,IAAK;IACP,IACI,CAACjD,uBAAuB,IACxBa,qBAAqB,CAACmB,OAAO,EAAEqB,QAAQ,CAACJ,KAAK,CAACK,MAAc,CAAC,EAC/D;MACE;IACJ;IAEAvC,UAAU,CAAC,CAAC;EAChB,CAAC,EACD,CAACA,UAAU,EAAEf,uBAAuB,CACxC,CAAC;EAED3B,mBAAmB,CACfY,GAAG,EACH,OAAO;IACHsE,IAAI,EAAExC,UAAU;IAChByC,IAAI,EAAExC;EACV,CAAC,CAAC,EACF,CAACD,UAAU,EAAEC,UAAU,CAC3B,CAAC;EAED5C,SAAS,CAAC,MAAM;IACZ,IAAIoC,cAAc,EAAE;MAChBhB,QAAQ,CAACiE,gBAAgB,CAAC,OAAO,EAAEL,mBAAmB,EAAE,IAAI,CAAC;MAC7DV,MAAM,CAACe,gBAAgB,CAAC,MAAM,EAAE1C,UAAU,CAAC;MAE3C,IAAI,OAAOhB,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOD,MAAM,KAAK,UAAU,EAAE;MACrCA,MAAM,CAAC,CAAC;IACZ;IAEA,OAAO,MAAM;MACTN,QAAQ,CAACkE,mBAAmB,CAAC,OAAO,EAAEN,mBAAmB,EAAE,IAAI,CAAC;MAChEV,MAAM,CAACgB,mBAAmB,CAAC,MAAM,EAAE3C,UAAU,CAAC;IAClD,CAAC;EACL,CAAC,EAAE,CAACqC,mBAAmB,EAAErC,UAAU,EAAEP,cAAc,EAAEV,MAAM,EAAEC,MAAM,CAAC,CAAC;EAErE3B,SAAS,CAAC,MAAM;IACZuC,SAAS,CAAC,mBACNnC,YAAY,cACRP,KAAA,CAAAmB,aAAA,CAACpB,eAAe;MAAC2F,OAAO,EAAE;IAAM,GAC3BnD,cAAc,iBACXvC,KAAA,CAAAmB,aAAA,CAACP,kBAAkB;MACfc,WAAW,EAAEA,WAAW,IAAIM,mBAAoB;MAChDJ,KAAK,EAAEA,KAAM;MACb+D,GAAG,EAAE,eAAehD,IAAI,EAAG;MAC3B1B,SAAS,EAAEA,SAAS,IAAImB,iBAAkB;MAC1CpB,GAAG,EAAE4B;IAAsB,CAC9B,CAEQ,CAAC,EAClBtB,SACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCL,SAAS,EACTK,SAAS,EACTI,WAAW,EACXU,iBAAiB,EACjBJ,mBAAmB,EACnBO,cAAc,EACdX,KAAK,EACLe,IAAI,CACP,CAAC;EAEF,oBACI3C,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA4F,QAAA,qBACI5F,KAAA,CAAAmB,aAAA,CAACN,iBAAiB;IACdgF,SAAS,EAAC,0BAA0B;IACpC/B,OAAO,EAAEiB,WAAY;IACrB/D,GAAG,EAAE6B;EAAe,GAEnB3B,QACc,CAAC,EACnBuB,MACH,CAAC;AAEX,CACJ,CAAC;AAED3B,WAAW,CAACgF,WAAW,GAAG,aAAa;AAEvC,eAAehF,WAAW","ignoreList":[]}
1
+ {"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","getIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","size","container","coordinates","isInDialog","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","current","el","element","closest","handleHide","handleShow","isTouch","result","type","SELECT","buttons","list","map","_ref2","index","text","name","id","icon","open","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","window","scrollX","scrollY","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","document","addEventListener","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /**\n * Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n */\n alignment?: ContextMenuAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `ContextMenu` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n */\n coordinates?: ContextMenuCoordinates;\n /**\n * Whether the ContextMenu is inside a dialog.\n */\n isInDialog?: boolean;\n /**\n * The items that will be displayed in the content of the `ContextMenu`.\n */\n items: ContextMenuItem[];\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be closed if its clicked.\n */\n shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n buttonType: number;\n result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n container,\n coordinates,\n isInDialog = false,\n items,\n onHide,\n onShow,\n shouldCloseOnPopupClick = true,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n useEffect(() => {\n if (contextMenuRef.current && !container) {\n const el = contextMenuRef.current as HTMLElement;\n\n const element =\n el.closest('.dialog-inner') ||\n el.closest('.page-provider') ||\n el.closest('.tapp') ||\n el.closest('body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const isTouch = getIsTouch();\n\n if (isTouch) {\n const { result } = (await createDialog({\n type: DialogType.SELECT,\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n id: index,\n icon: icons[0],\n })),\n }).open()) as SelectDialogResult;\n\n if (result && typeof result[0] === 'number') {\n void items[result[0]]?.onClick();\n }\n } else if (contextMenuRef.current) {\n if (!newContainer) {\n return;\n }\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n const x =\n childrenLeft + (isInDialog ? 0 : window.scrollX) + childrenWidth / 2 - left;\n const y =\n childrenTop + (isInDialog ? 0 : window.scrollY) + childrenHeight / 2 - top;\n\n setInternalCoordinates({ x, y });\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [isInDialog, items, newContainer]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !shouldCloseOnPopupClick &&\n contextMenuContentRef.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n handleHide();\n },\n [handleHide, shouldCloseOnPopupClick],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isContentShown) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
@@ -11,7 +11,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
11
11
  let {
12
12
  content,
13
13
  onShow,
14
- container = document.querySelector('.page-provider') || document.querySelector('.tapp') || document.body,
14
+ container,
15
15
  onHide,
16
16
  children,
17
17
  shouldShowOnHover = false,
@@ -29,6 +29,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
29
29
  const [menuHeight, setMenuHeight] = useState(0);
30
30
  const [isMeasuring, setIsMeasuring] = useState(true);
31
31
  const [pseudoSize, setPseudoSize] = useState();
32
+ const [newContainer, setNewContainer] = useState(container ?? null);
32
33
  const timeout = useRef();
33
34
  const uuid = useUuid();
34
35
 
@@ -37,6 +38,13 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
37
38
  const popupContentRef = useRef(null);
38
39
  const popupPseudoContentRef = useRef(null);
39
40
  const popupRef = useRef(null);
41
+ useEffect(() => {
42
+ if (popupRef.current && !container) {
43
+ const el = popupRef.current;
44
+ const element = el.closest('.dialog-inner') || el.closest('.page-provider') || el.closest('.tapp') || el.closest('body');
45
+ setNewContainer(element);
46
+ }
47
+ }, [container]);
40
48
  const measureHeight = () => {
41
49
  if (popupPseudoContentRef.current) {
42
50
  const height = popupPseudoContentRef.current.offsetHeight;
@@ -180,6 +188,9 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
180
188
  };
181
189
  }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);
182
190
  useEffect(() => {
191
+ if (!newContainer) {
192
+ return;
193
+ }
183
194
  setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(AnimatePresence, {
184
195
  initial: false
185
196
  }, isOpen && /*#__PURE__*/React.createElement(PopupContentWrapper, {
@@ -193,8 +204,8 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
193
204
  onMouseEnter: handleMouseEnter
194
205
  }, /*#__PURE__*/React.createElement(AreaContextProvider, {
195
206
  shouldChangeColor: false
196
- }, content))), container));
197
- }, [alignment, container, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize?.width, uuid]);
207
+ }, content))), newContainer));
208
+ }, [alignment, newContainer, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize?.width, uuid]);
198
209
  return /*#__PURE__*/React.createElement(React.Fragment, null, isMeasuring && /*#__PURE__*/React.createElement(StyledPopupPseudo, {
199
210
  ref: popupPseudoContentRef,
200
211
  $menuHeight: menuHeight
@@ -1 +1 @@
1
- {"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","document","querySelector","body","onHide","children","shouldShowOnHover","shouldUseChildrenWidth","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","measureHeight","current","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","isRight","BottomRight","BottomLeft","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","contains","target","hide","show","then","result","topBarHeight","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","$shouldUseChildrenWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n content,\n onShow,\n container = document.querySelector('.page-provider') ||\n document.querySelector('.tapp') ||\n document.body,\n onHide,\n children,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n const [isMeasuring, setIsMeasuring] = useState(true);\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n const measureHeight = () => {\n if (popupPseudoContentRef.current) {\n const height = popupPseudoContentRef.current.offsetHeight;\n const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n setPseudoSize({ height, width });\n }\n };\n\n useEffect(() => {\n measureHeight();\n\n setIsMeasuring(false);\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n setIsMeasuring(true);\n\n setTimeout(() => {\n measureHeight();\n setIsMeasuring(false);\n }, 0);\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop + childrenHeight + yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop - yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n alignment,\n container,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n ]);\n\n return (\n <>\n {isMeasuring && (\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n )}\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","onHide","children","shouldShowOnHover","shouldUseChildrenWidth","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","current","el","element","closest","measureHeight","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","isRight","BottomRight","BottomLeft","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","contains","target","hide","show","then","result","topBarHeight","document","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","$shouldUseChildrenWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n content,\n onShow,\n container,\n onHide,\n children,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n const [isMeasuring, setIsMeasuring] = useState(true);\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupRef.current && !container) {\n const el = popupRef.current as HTMLElement;\n\n const element =\n el.closest('.dialog-inner') ||\n el.closest('.page-provider') ||\n el.closest('.tapp') ||\n el.closest('body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n const measureHeight = () => {\n if (popupPseudoContentRef.current) {\n const height = popupPseudoContentRef.current.offsetHeight;\n const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n setPseudoSize({ height, width });\n }\n };\n\n useEffect(() => {\n measureHeight();\n\n setIsMeasuring(false);\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n setIsMeasuring(true);\n\n setTimeout(() => {\n measureHeight();\n setIsMeasuring(false);\n }, 0);\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop + childrenHeight + yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop - yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n ]);\n\n return (\n <>\n {isMeasuring && (\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n )}\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
@@ -21,7 +21,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
21
21
  onSelect,
22
22
  onKeyDown,
23
23
  selectedId,
24
- container = document.body,
24
+ container,
25
25
  shouldShowRoundImage,
26
26
  shouldShowContentOnEmptyInput = true,
27
27
  shouldAddInputToList = true,
@@ -43,6 +43,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
43
43
  x: 0,
44
44
  y: 0
45
45
  });
46
+ const [newContainer, setNewContainer] = useState(container ?? null);
46
47
  const boxRef = useRef(null);
47
48
  const contentRef = useRef(null);
48
49
  const inputRef = useRef(null);
@@ -50,6 +51,13 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
50
51
  const {
51
52
  browser
52
53
  } = getDevice();
54
+ useEffect(() => {
55
+ if (boxRef.current && !container) {
56
+ const el = boxRef.current;
57
+ const element = el.closest('.dialog-inner') || el.closest('body');
58
+ setNewContainer(element);
59
+ }
60
+ }, [container]);
53
61
  useEffect(() => {
54
62
  if (boxRef.current) {
55
63
  const {
@@ -558,6 +566,9 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
558
566
  };
559
567
  }, [handleKeyPress]);
560
568
  useEffect(() => {
569
+ if (!newContainer) {
570
+ return;
571
+ }
561
572
  setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(AnimatePresence, {
562
573
  initial: false
563
574
  }, isAnimating && /*#__PURE__*/React.createElement(SearchBoxBody, {
@@ -569,8 +580,8 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
569
580
  height: height,
570
581
  ref: contentRef,
571
582
  onGroupSelect: handleFilterButtonsGroupSelect
572
- }, content)), container));
573
- }, [browser?.name, container, content, filterbuttons, groups, height, internalCoordinates, isAnimating, width]);
583
+ }, content)), newContainer));
584
+ }, [browser?.name, newContainer, content, filterbuttons, groups, height, internalCoordinates, isAnimating, width]);
574
585
  return useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBox, {
575
586
  ref: boxRef
576
587
  }, /*#__PURE__*/React.createElement("div", {
@@ -1 +1 @@
1
- {"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","createPortal","useTheme","calculateContentHeight","searchList","Icon","Input","GroupName","SearchBoxBody","SearchBoxItem","StyledSearchBoxItemImage","StyledSearchBox","StyledSearchBoxIcon","SearchBox","_ref","ref","placeholder","lists","onChange","onBlur","onSelect","onKeyDown","selectedId","container","document","body","shouldShowRoundImage","shouldShowContentOnEmptyInput","shouldAddInputToList","shouldShowToggleIcon","matchingListsItems","setMatchingListsItems","selectedImage","setSelectedImage","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","groups","setGroups","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","boxRef","contentRef","inputRef","theme","browser","current","getBoundingClientRect","filterbuttons","items","forEach","_ref2","groupName","push","id","text","activeList","newLists","list","includes","newMatchingItems","_ref3","newList","searchString","undefined","filteredMatchingListItems","map","_ref4","filter","item","handleOpen","bodyHeight","handleClose","handleFilterButtonsGroupSelect","keys","handleOutsideClick","event","contains","target","addEventListener","window","removeEventListener","textArray","_ref5","_ref6","input","getElementById","getInputWidth","offsetWidth","ResizeObserver","observe","_ref7","selectedItem","find","_ref8","imageUrl","createElement","src","$shouldShowRoundImage","handleFocus","_ref9","_ref10","_ref11","_ref12","_ref13","toLowerCase","handleClick","rightElement","onClick","icons","color","handleChange","filteredLists","_ref14","handleBlur","handleSelect","newItem","replace","content","_ref15","index","key","name","_ref16","handleKeyDown","e","preventDefault","children","childrenArray","Array","from","newChildren","child","startsWith","filteredChildren","dataset","isgroupname","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","attributes","nodeValue","handleKeyPress","keyCode","clear","initial","selectedGroups","coordinates","onGroupSelect","onFocus","leftElement","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 ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from 'styled-components';\nimport type { IFilterButtonItem } from '../../types/filterButtons';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxBody from './search-box-body/SearchBoxBody';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport { StyledSearchBox, StyledSearchBoxIcon } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n /**\n * The element where the content of the `ComboBox` should be rendered via React Portal.\n */\n container?: Element;\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 * If true, the value in the Input is displayed in the list.\n */\n shouldAddInputToList: boolean;\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 * Whether the icon to open and close the list should be displayed.\n */\n shouldShowToggleIcon?: 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 container = document.body,\n shouldShowRoundImage,\n shouldShowContentOnEmptyInput = true,\n shouldAddInputToList = true,\n shouldShowToggleIcon = false,\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 const [groups, setGroups] = useState<string[]>(['all']);\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const boxRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const theme = useTheme();\n\n const { browser } = getDevice();\n\n useEffect(() => {\n if (boxRef.current) {\n const { x, y } = boxRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y,\n });\n }\n }, []);\n\n /**\n * Checks if Lists are smaller then 1\n */\n useEffect(() => {\n setHasMultipleGroups(lists.length > 1);\n }, [lists]);\n\n const filterbuttons = useMemo(() => {\n const items: IFilterButtonItem[] = [];\n\n if (lists.length <= 1) {\n return items;\n }\n\n lists.forEach(({ groupName }) => {\n if (groupName) {\n items.push({\n id: groupName,\n text: groupName,\n });\n }\n });\n\n return items;\n }, [lists]);\n\n /**\n * Filters the lists by the FilterButtons\n */\n const activeList = useMemo(() => {\n let newLists: ISearchBoxItems[] = [];\n\n if (groups[0] === 'all') {\n newLists = lists;\n } else {\n lists.forEach((list) => {\n if (list.groupName && groups.includes(list.groupName)) {\n newLists.push(list);\n }\n });\n }\n\n const newMatchingItems: ISearchBoxItems[] = [];\n\n newLists.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: value });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\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\n return newLists;\n }, [groups, lists, shouldAddInputToList, value]);\n\n const handleOpen = useCallback(() => {\n if (boxRef.current) {\n const { x, y, height: bodyHeight } = boxRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y: y + bodyHeight,\n });\n\n setIsAnimating(true);\n }\n }, []);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n const handleFilterButtonsGroupSelect = (keys: string[]) => {\n setGroups(keys.length === 0 ? ['all'] : keys);\n };\n\n /**\n * This function closes the list of items\n */\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n if (\n boxRef.current &&\n !boxRef.current.contains(event.target as Node) &&\n contentRef.current &&\n !contentRef.current.contains(event.target as Node)\n ) {\n handleClose();\n }\n },\n [handleClose],\n );\n\n /**\n * This hook listens for clicks\n */\n useEffect(() => {\n document.addEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => handleClose());\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => handleClose());\n };\n }, [handleOutsideClick, boxRef, handleClose]);\n\n /**\n * This hook calculates the height\n */\n useEffect(() => {\n const textArray: string[] = [];\n\n activeList.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, activeList, placeholder, shouldAddInputToList]);\n\n /**\n * This hook calculates the width\n */\n useEffect(() => {\n const input = document.getElementById('search_box_input');\n\n const getInputWidth = () => {\n if (input) {\n setWidth(input.offsetWidth);\n }\n };\n\n if (input) {\n new ResizeObserver(getInputWidth).observe(input);\n }\n }, []);\n\n useEffect(() => {\n if (selectedId) {\n activeList.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 }, [activeList, 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: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: value });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\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\n if (filteredMatchingListItems.length !== 0) {\n handleOpen();\n } else {\n handleClose();\n }\n }\n }, [\n activeList,\n handleClose,\n handleOpen,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n value,\n ]);\n\n /**\n * This function filters the lists by input\n */\n\n useEffect(() => {\n const newMatchingItems: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: value });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\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 inputToListValue,\n activeList,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n value,\n ]);\n\n const handleClick = useCallback(() => {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }, [handleClose, handleOpen, isAnimating]);\n\n const rightElement = useMemo(() => {\n if (!shouldShowToggleIcon) {\n return undefined;\n }\n\n return (\n <StyledSearchBoxIcon onClick={handleClick}>\n <Icon icons={['fa fa-chevron-down']} color={theme['006'] as string} />\n </StyledSearchBoxIcon>\n );\n }, [handleClick, shouldShowToggleIcon, theme]);\n\n /**\n * This function handles changes of the input\n */\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const filteredLists: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: event.target.value });\n\n if (newList.length > 0) {\n filteredLists.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (filteredLists.length === 0 && shouldAddInputToList) {\n filteredLists.push({\n groupName: undefined,\n list: [],\n });\n }\n\n setSelectedImage(undefined);\n\n if (!shouldShowContentOnEmptyInput && !event.target.value) {\n setMatchingListsItems([]);\n } else {\n setMatchingListsItems(filteredLists);\n if (filteredLists.length !== 0) {\n handleOpen();\n } else {\n handleClose();\n }\n }\n\n setValue(event.target.value);\n setInputToListValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [\n activeList,\n handleClose,\n handleOpen,\n onChange,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n ],\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 handleClose();\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 [handleClose, onSelect, shouldShowRoundImage],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n matchingListsItems.forEach(({ groupName, list }, index) => {\n if (hasMultipleGroups) {\n if (list.length <= 0) {\n return;\n }\n\n if (index !== 0) {\n items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n }\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 (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n\n if (!children) {\n return;\n }\n\n const childrenArray = Array.from(children);\n\n const newChildren = childrenArray.find((child) =>\n child.id.startsWith('searchbox-content__'),\n )?.children;\n\n if (newChildren && newChildren.length > 0) {\n const filteredChildren = Array.from(newChildren).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, isAnimating]);\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 useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <SearchBoxBody\n filterbuttons={filterbuttons}\n selectedGroups={groups}\n width={width}\n coordinates={internalCoordinates}\n browser={browser?.name}\n height={height}\n ref={contentRef}\n onGroupSelect={handleFilterButtonsGroupSelect}\n >\n {content}\n </SearchBoxBody>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n browser?.name,\n container,\n content,\n filterbuttons,\n groups,\n height,\n internalCoordinates,\n isAnimating,\n width,\n ]);\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 leftElement={selectedImage}\n rightElement={rightElement}\n value={value}\n />\n </div>\n {portal}\n </StyledSearchBox>\n ),\n [\n handleBlur,\n handleChange,\n handleFocus,\n onKeyDown,\n placeholder,\n portal,\n rightElement,\n selectedImage,\n value,\n ],\n );\n },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","createPortal","useTheme","calculateContentHeight","searchList","Icon","Input","GroupName","SearchBoxBody","SearchBoxItem","StyledSearchBoxItemImage","StyledSearchBox","StyledSearchBoxIcon","SearchBox","_ref","ref","placeholder","lists","onChange","onBlur","onSelect","onKeyDown","selectedId","container","shouldShowRoundImage","shouldShowContentOnEmptyInput","shouldAddInputToList","shouldShowToggleIcon","matchingListsItems","setMatchingListsItems","selectedImage","setSelectedImage","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","groups","setGroups","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","boxRef","contentRef","inputRef","theme","browser","current","el","element","closest","getBoundingClientRect","filterbuttons","items","forEach","_ref2","groupName","push","id","text","activeList","newLists","list","includes","newMatchingItems","_ref3","newList","searchString","undefined","filteredMatchingListItems","map","_ref4","filter","item","handleOpen","bodyHeight","handleClose","handleFilterButtonsGroupSelect","keys","handleOutsideClick","event","contains","target","document","addEventListener","window","removeEventListener","textArray","_ref5","_ref6","input","getElementById","getInputWidth","offsetWidth","ResizeObserver","observe","_ref7","selectedItem","find","_ref8","imageUrl","createElement","src","$shouldShowRoundImage","handleFocus","_ref9","_ref10","_ref11","_ref12","_ref13","toLowerCase","handleClick","rightElement","onClick","icons","color","handleChange","filteredLists","_ref14","handleBlur","handleSelect","newItem","replace","content","_ref15","index","key","name","_ref16","handleKeyDown","e","preventDefault","children","childrenArray","Array","from","newChildren","child","startsWith","filteredChildren","dataset","isgroupname","newIndex","prevElement","tabIndex","newElement","focus","textContent","attributes","nodeValue","handleKeyPress","keyCode","clear","initial","selectedGroups","coordinates","onGroupSelect","onFocus","leftElement","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 ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from 'styled-components';\nimport type { IFilterButtonItem } from '../../types/filterButtons';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxBody from './search-box-body/SearchBoxBody';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport { StyledSearchBox, StyledSearchBoxIcon } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n /**\n * The element where the content of the `ComboBox` should be rendered via React Portal.\n */\n container?: Element;\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 * If true, the value in the Input is displayed in the list.\n */\n shouldAddInputToList: boolean;\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 * Whether the icon to open and close the list should be displayed.\n */\n shouldShowToggleIcon?: 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 container,\n shouldShowRoundImage,\n shouldShowContentOnEmptyInput = true,\n shouldAddInputToList = true,\n shouldShowToggleIcon = false,\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 const [groups, setGroups] = useState<string[]>(['all']);\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const boxRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const theme = useTheme();\n\n const { browser } = getDevice();\n\n useEffect(() => {\n if (boxRef.current && !container) {\n const el = boxRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner') || el.closest('body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (boxRef.current) {\n const { x, y } = boxRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y,\n });\n }\n }, []);\n\n /**\n * Checks if Lists are smaller then 1\n */\n useEffect(() => {\n setHasMultipleGroups(lists.length > 1);\n }, [lists]);\n\n const filterbuttons = useMemo(() => {\n const items: IFilterButtonItem[] = [];\n\n if (lists.length <= 1) {\n return items;\n }\n\n lists.forEach(({ groupName }) => {\n if (groupName) {\n items.push({\n id: groupName,\n text: groupName,\n });\n }\n });\n\n return items;\n }, [lists]);\n\n /**\n * Filters the lists by the FilterButtons\n */\n const activeList = useMemo(() => {\n let newLists: ISearchBoxItems[] = [];\n\n if (groups[0] === 'all') {\n newLists = lists;\n } else {\n lists.forEach((list) => {\n if (list.groupName && groups.includes(list.groupName)) {\n newLists.push(list);\n }\n });\n }\n\n const newMatchingItems: ISearchBoxItems[] = [];\n\n newLists.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: value });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\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\n return newLists;\n }, [groups, lists, shouldAddInputToList, value]);\n\n const handleOpen = useCallback(() => {\n if (boxRef.current) {\n const { x, y, height: bodyHeight } = boxRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y: y + bodyHeight,\n });\n\n setIsAnimating(true);\n }\n }, []);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n const handleFilterButtonsGroupSelect = (keys: string[]) => {\n setGroups(keys.length === 0 ? ['all'] : keys);\n };\n\n /**\n * This function closes the list of items\n */\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n if (\n boxRef.current &&\n !boxRef.current.contains(event.target as Node) &&\n contentRef.current &&\n !contentRef.current.contains(event.target as Node)\n ) {\n handleClose();\n }\n },\n [handleClose],\n );\n\n /**\n * This hook listens for clicks\n */\n useEffect(() => {\n document.addEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => handleClose());\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => handleClose());\n };\n }, [handleOutsideClick, boxRef, handleClose]);\n\n /**\n * This hook calculates the height\n */\n useEffect(() => {\n const textArray: string[] = [];\n\n activeList.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, activeList, placeholder, shouldAddInputToList]);\n\n /**\n * This hook calculates the width\n */\n useEffect(() => {\n const input = document.getElementById('search_box_input');\n\n const getInputWidth = () => {\n if (input) {\n setWidth(input.offsetWidth);\n }\n };\n\n if (input) {\n new ResizeObserver(getInputWidth).observe(input);\n }\n }, []);\n\n useEffect(() => {\n if (selectedId) {\n activeList.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 }, [activeList, 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: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: value });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\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\n if (filteredMatchingListItems.length !== 0) {\n handleOpen();\n } else {\n handleClose();\n }\n }\n }, [\n activeList,\n handleClose,\n handleOpen,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n value,\n ]);\n\n /**\n * This function filters the lists by input\n */\n\n useEffect(() => {\n const newMatchingItems: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: value });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\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 inputToListValue,\n activeList,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n value,\n ]);\n\n const handleClick = useCallback(() => {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }, [handleClose, handleOpen, isAnimating]);\n\n const rightElement = useMemo(() => {\n if (!shouldShowToggleIcon) {\n return undefined;\n }\n\n return (\n <StyledSearchBoxIcon onClick={handleClick}>\n <Icon icons={['fa fa-chevron-down']} color={theme['006'] as string} />\n </StyledSearchBoxIcon>\n );\n }, [handleClick, shouldShowToggleIcon, theme]);\n\n /**\n * This function handles changes of the input\n */\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const filteredLists: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = searchList({ items: list, searchString: event.target.value });\n\n if (newList.length > 0) {\n filteredLists.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (filteredLists.length === 0 && shouldAddInputToList) {\n filteredLists.push({\n groupName: undefined,\n list: [],\n });\n }\n\n setSelectedImage(undefined);\n\n if (!shouldShowContentOnEmptyInput && !event.target.value) {\n setMatchingListsItems([]);\n } else {\n setMatchingListsItems(filteredLists);\n if (filteredLists.length !== 0) {\n handleOpen();\n } else {\n handleClose();\n }\n }\n\n setValue(event.target.value);\n setInputToListValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [\n activeList,\n handleClose,\n handleOpen,\n onChange,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n ],\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 handleClose();\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 [handleClose, onSelect, shouldShowRoundImage],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n matchingListsItems.forEach(({ groupName, list }, index) => {\n if (hasMultipleGroups) {\n if (list.length <= 0) {\n return;\n }\n\n if (index !== 0) {\n items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n }\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 (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n\n if (!children) {\n return;\n }\n\n const childrenArray = Array.from(children);\n\n const newChildren = childrenArray.find((child) =>\n child.id.startsWith('searchbox-content__'),\n )?.children;\n\n if (newChildren && newChildren.length > 0) {\n const filteredChildren = Array.from(newChildren).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, isAnimating]);\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 useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <SearchBoxBody\n filterbuttons={filterbuttons}\n selectedGroups={groups}\n width={width}\n coordinates={internalCoordinates}\n browser={browser?.name}\n height={height}\n ref={contentRef}\n onGroupSelect={handleFilterButtonsGroupSelect}\n >\n {content}\n </SearchBoxBody>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n browser?.name,\n newContainer,\n content,\n filterbuttons,\n groups,\n height,\n internalCoordinates,\n isAnimating,\n width,\n ]);\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 leftElement={selectedImage}\n rightElement={rightElement}\n value={value}\n />\n </div>\n {portal}\n </StyledSearchBox>\n ),\n [\n handleBlur,\n handleChange,\n handleFocus,\n onKeyDown,\n placeholder,\n portal,\n rightElement,\n selectedImage,\n value,\n ],\n );\n },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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","ignoreList":[]}