npm - @chayns-components/core - Versions diffs - 5.0.0-beta.778 → 5.0.0-beta.781 - Mend

@chayns-components/core 5.0.0-beta.778 → 5.0.0-beta.781

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 (28) hide show

package/lib/cjs/utils/fileDialog.js CHANGED Viewed

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectFiles = exports.getFileAsArrayBuffer = void 0;
+var _chaynsApi = require("chayns-api");
 const selectFiles = ({
   type,
-  multiple
+  multiple,
+  maxFileSizeInMB
 }) => new Promise(resolve => {
   const input = document.createElement('input');
   input.type = 'file';
@@ -38,16 +40,19 @@ const selectFiles = ({
     const fileArray = Object.values(files);
     const filteredFileArray = fileArray.filter(file => {
       const sizeInMB = file.size / 1024 / 1024;
+      if (maxFileSizeInMB && maxFileSizeInMB < sizeInMB) {
+        return false;
+      }
       if (file.type.includes('video/') && sizeInMB > 500) {
         return false;
       }
       return !(file.type.includes('image/') && sizeInMB > 64);
     });
     if (fileArray.length !== filteredFileArray.length) {
-      // ToDo show dialog that some files are to big
-    }
-    if (filteredFileArray.length === 0) {
-      // ToDo show dialog that all files are to big
+      void (0, _chaynsApi.createDialog)({
+        type: _chaynsApi.DialogType.ALERT,
+        text: 'Einige Deiner ausgewählten Dateien sind zu groß.'
+      }).open();
     }
     resolve(filteredFileArray);
   });

package/lib/cjs/utils/fileDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fileDialog.js","names":["selectFiles","type","multiple","Promise","resolve","input","document","createElement","style","visibility","width","height","display","accept","body","appendChild","addEventListener","event","removeChild","target","files","fileArray","Object","values","filteredFileArray","filter","file","sizeInMB","size","includes","length","click","exports","getFileAsArrayBuffer","reject","reader","FileReader","onload","e","_e$target","result","Error","onerror","readAsArrayBuffer"],"sources":["../../../src/utils/fileDialog.ts"],"sourcesContent":["~~interface~~ SelectFilesOptions {\n type?: string;\n multiple: boolean;\n}\n\nexport const selectFiles = ({ type, multiple }: SelectFilesOptions): Promise<File[]> =>\n new Promise((resolve) => {\n const input = document.createElement('input');\n\n input.type = 'file';\n input.style.visibility = 'none';\n input.style.width = '0';\n input.style.height = '0';\n input.style.display = 'none';\n\n if (type !== '/' && type) {\n input.accept = type;\n }\n\n if (multiple) {\n input.multiple = true;\n }\n\n document.body.appendChild(input);\n\n input.addEventListener('change', (event) => {\n document.body.removeChild(input);\n\n if (!event.target) {\n resolve([]);\n\n return;\n }\n\n const target = event.target as HTMLInputElement;\n\n const { files } = target;\n\n if (!files) {\n resolve([]);\n\n return;\n }\n\n const fileArray = Object.values(files);\n\n const filteredFileArray = fileArray.filter((file) => {\n const sizeInMB = file.size / 1024 / 1024;\n\n if (file.type.includes('video/') && sizeInMB > 500) {\n return false;\n }\n\n return !(file.type.includes('image/') && sizeInMB > 64);\n });\n\n if (fileArray.length !== filteredFileArray.length) {\n // ~~ToDo~~ ~~show~~ ~~dialog~~ ~~that~~ ~~some~~ ~~files~~ ~~are~~ to ~~big\~~n }~~\n\n if~~ (~~filteredFileArray.length === 0~~) {\n ~~// ToDo show dialog that all files are to big\n~~ }\n\n resolve(filteredFileArray);\n });\n\n input.click();\n });\n\nexport const getFileAsArrayBuffer = (file: File): Promise<string \| ArrayBuffer> =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n\n reader.onload = (e) => {\n if (e.target?.result) {\n resolve(e.target.result);\n } else {\n reject(Error('Could not get array buffer.'));\n }\n };\n\n reader.onerror = reject;\n\n reader.readAsArrayBuffer(file);\n });\n"],"mappings":";;;;;;~~AAKO~~,~~MAAMA~~,WAAW,GAAGA,CAAC;~~EAAEC~~,IAAI;~~EAAEC~~;~~AAA6B~~,CAAC,~~KAC9D~~,IAAIC,OAAO,CAAEC,OAAO,IAAK;EACrB,MAAMC,KAAK,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EAE7CF,KAAK,~~CAACJ~~,IAAI,GAAG,MAAM;~~EACnBI~~,KAAK,CAACG,KAAK,CAACC,UAAU,GAAG,MAAM;EAC/BJ,KAAK,CAACG,KAAK,CAACE,KAAK,GAAG,GAAG;EACvBL,KAAK,CAACG,KAAK,CAACG,MAAM,GAAG,GAAG;EACxBN,KAAK,CAACG,KAAK,CAACI,OAAO,GAAG,MAAM;EAE5B,~~IAAIX~~,IAAI,KAAK,KAAK,IAAIA,IAAI,EAAE;~~IACxBI~~,KAAK,CAACQ,MAAM,~~GAAGZ~~,IAAI;EACvB;EAEA,IAAIC,QAAQ,EAAE;~~IACVG~~,KAAK,~~CAACH~~,QAAQ,GAAG,IAAI;EACzB;~~EAEAI~~,QAAQ,CAACQ,IAAI,CAACC,WAAW,CAACV,KAAK,CAAC;EAEhCA,KAAK,CAACW,gBAAgB,CAAC,QAAQ,EAAGC,KAAK,IAAK;IACxCX,QAAQ,CAACQ,IAAI,CAACI,WAAW,CAACb,KAAK,CAAC;IAEhC,IAAI,CAACY,KAAK,CAACE,MAAM,EAAE;MACff,OAAO,CAAC,EAAE,CAAC;MAEX;IACJ;IAEA,MAAMe,MAAM,GAAGF,KAAK,CAACE,MAA0B;IAE/C,MAAM;MAAEC;IAAM,CAAC,GAAGD,MAAM;IAExB,IAAI,CAACC,KAAK,EAAE;MACRhB,OAAO,CAAC,EAAE,CAAC;MAEX;IACJ;IAEA,MAAMiB,SAAS,GAAGC,MAAM,CAACC,MAAM,CAACH,KAAK,CAAC;IAEtC,MAAMI,iBAAiB,GAAGH,SAAS,CAACI,MAAM,CAAEC,IAAI,IAAK;MACjD,MAAMC,QAAQ,GAAGD,IAAI,CAACE,IAAI,GAAG,IAAI,GAAG,IAAI;MAExC,~~IAAIF~~,IAAI,~~CAACzB~~,IAAI,~~CAAC4B~~,QAAQ,CAAC,QAAQ,CAAC,IAAIF,QAAQ,GAAG,GAAG,EAAE;QAChD,OAAO,KAAK;MAChB;MAEA,OAAO,EAAED,IAAI,~~CAACzB~~,IAAI,~~CAAC4B~~,QAAQ,CAAC,QAAQ,CAAC,IAAIF,QAAQ,GAAG,EAAE,CAAC;IAC3D,CAAC,CAAC;IAEF,IAAIN,SAAS,CAACS,MAAM,KAAKN,iBAAiB,CAACM,MAAM,EAAE;MAC/C;~~IAAA;IAGJ~~,~~IAAIN~~,~~iBAAiB~~,~~CAACM~~,~~MAAM~~,KAAK,~~CAAC~~,EAAE;~~MAChC~~;~~IAAA~~;~~IAGJ1B~~,OAAO,CAACoB,iBAAiB,CAAC;EAC9B,CAAC,CAAC;EAEFnB,KAAK,~~CAAC0B~~,KAAK,CAAC,CAAC;AACjB,CAAC,CAAC;AAACC,OAAA,~~CAAAhC~~,WAAA,GAAAA,WAAA;AAEA,~~MAAMiC~~,oBAAoB,~~GAAIP~~,IAAU,IAC3C,IAAIvB,OAAO,CAAC,CAACC,OAAO,~~EAAE8B~~,MAAM,KAAK;EAC7B,MAAMC,MAAM,GAAG,IAAIC,UAAU,CAAC,CAAC;EAE/BD,MAAM,CAACE,MAAM,GAAIC,CAAC,IAAK;IAAA,IAAAC,SAAA;IACnB,KAAAA,SAAA,GAAID,CAAC,~~CAACnB~~,MAAM,~~cAAAoB~~,SAAA,eAARA,SAAA,CAAUC,MAAM,EAAE;~~MAClBpC~~,OAAO,~~CAACkC~~,CAAC,~~CAACnB~~,MAAM,~~CAACqB~~,MAAM,CAAC;IAC5B,CAAC,MAAM;MACHN,MAAM,CAACO,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAChD;EACJ,CAAC;EAEDN,MAAM,CAACO,OAAO,GAAGR,MAAM;EAEvBC,MAAM,CAACQ,iBAAiB,~~CAACjB~~,IAAI,CAAC;AAClC,CAAC,CAAC;~~AAACM~~,OAAA,CAAAC,oBAAA,GAAAA,oBAAA","ignoreList":[]}
1	+ {"version":3,"file":"fileDialog.js","names":["_chaynsApi","require","selectFiles","type","multiple","maxFileSizeInMB","Promise","resolve","input","document","createElement","style","visibility","width","height","display","accept","body","appendChild","addEventListener","event","removeChild","target","files","fileArray","Object","values","filteredFileArray","filter","file","sizeInMB","size","includes","length","createDialog","DialogType","ALERT","text","open","click","exports","getFileAsArrayBuffer","reject","reader","FileReader","onload","e","_e$target","result","Error","onerror","readAsArrayBuffer"],"sources":["../../../src/utils/fileDialog.ts"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\n\ninterface SelectFilesOptions {\n type?: string;\n multiple: boolean;\n maxFileSizeInMB?: number;\n}\n\nexport const selectFiles = ({\n type,\n multiple,\n maxFileSizeInMB,\n}: SelectFilesOptions): Promise<File[]> =>\n new Promise((resolve) => {\n const input = document.createElement('input');\n\n input.type = 'file';\n input.style.visibility = 'none';\n input.style.width = '0';\n input.style.height = '0';\n input.style.display = 'none';\n\n if (type !== '/' && type) {\n input.accept = type;\n }\n\n if (multiple) {\n input.multiple = true;\n }\n\n document.body.appendChild(input);\n\n input.addEventListener('change', (event) => {\n document.body.removeChild(input);\n\n if (!event.target) {\n resolve([]);\n\n return;\n }\n\n const target = event.target as HTMLInputElement;\n\n const { files } = target;\n\n if (!files) {\n resolve([]);\n\n return;\n }\n\n const fileArray = Object.values(files);\n\n const filteredFileArray = fileArray.filter((file) => {\n const sizeInMB = file.size / 1024 / 1024;\n\n if (maxFileSizeInMB && maxFileSizeInMB < sizeInMB) {\n return false;\n }\n\n if (file.type.includes('video/') && sizeInMB > 500) {\n return false;\n }\n\n return !(file.type.includes('image/') && sizeInMB > 64);\n });\n\n if (fileArray.length !== filteredFileArray.length) {\n void createDialog({\n type: DialogType.ALERT,\n text: 'Einige Deiner ausgewählten Dateien sind zu groß.',\n }).open();\n }\n\n resolve(filteredFileArray);\n });\n\n input.click();\n });\n\nexport const getFileAsArrayBuffer = (file: File): Promise<string \| ArrayBuffer> =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n\n reader.onload = (e) => {\n if (e.target?.result) {\n resolve(e.target.result);\n } else {\n reject(Error('Could not get array buffer.'));\n }\n };\n\n reader.onerror = reject;\n\n reader.readAsArrayBuffer(file);\n });\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAQO,MAAMC,WAAW,GAAGA,CAAC;EACxBC,IAAI;EACJC,QAAQ;EACRC;AACgB,CAAC,KACjB,IAAIC,OAAO,CAAEC,OAAO,IAAK;EACrB,MAAMC,KAAK,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EAE7CF,KAAK,CAACL,IAAI,GAAG,MAAM;EACnBK,KAAK,CAACG,KAAK,CAACC,UAAU,GAAG,MAAM;EAC/BJ,KAAK,CAACG,KAAK,CAACE,KAAK,GAAG,GAAG;EACvBL,KAAK,CAACG,KAAK,CAACG,MAAM,GAAG,GAAG;EACxBN,KAAK,CAACG,KAAK,CAACI,OAAO,GAAG,MAAM;EAE5B,IAAIZ,IAAI,KAAK,KAAK,IAAIA,IAAI,EAAE;IACxBK,KAAK,CAACQ,MAAM,GAAGb,IAAI;EACvB;EAEA,IAAIC,QAAQ,EAAE;IACVI,KAAK,CAACJ,QAAQ,GAAG,IAAI;EACzB;EAEAK,QAAQ,CAACQ,IAAI,CAACC,WAAW,CAACV,KAAK,CAAC;EAEhCA,KAAK,CAACW,gBAAgB,CAAC,QAAQ,EAAGC,KAAK,IAAK;IACxCX,QAAQ,CAACQ,IAAI,CAACI,WAAW,CAACb,KAAK,CAAC;IAEhC,IAAI,CAACY,KAAK,CAACE,MAAM,EAAE;MACff,OAAO,CAAC,EAAE,CAAC;MAEX;IACJ;IAEA,MAAMe,MAAM,GAAGF,KAAK,CAACE,MAA0B;IAE/C,MAAM;MAAEC;IAAM,CAAC,GAAGD,MAAM;IAExB,IAAI,CAACC,KAAK,EAAE;MACRhB,OAAO,CAAC,EAAE,CAAC;MAEX;IACJ;IAEA,MAAMiB,SAAS,GAAGC,MAAM,CAACC,MAAM,CAACH,KAAK,CAAC;IAEtC,MAAMI,iBAAiB,GAAGH,SAAS,CAACI,MAAM,CAAEC,IAAI,IAAK;MACjD,MAAMC,QAAQ,GAAGD,IAAI,CAACE,IAAI,GAAG,IAAI,GAAG,IAAI;MAExC,IAAI1B,eAAe,IAAIA,eAAe,GAAGyB,QAAQ,EAAE;QAC/C,OAAO,KAAK;MAChB;MAEA,IAAID,IAAI,CAAC1B,IAAI,CAAC6B,QAAQ,CAAC,QAAQ,CAAC,IAAIF,QAAQ,GAAG,GAAG,EAAE;QAChD,OAAO,KAAK;MAChB;MAEA,OAAO,EAAED,IAAI,CAAC1B,IAAI,CAAC6B,QAAQ,CAAC,QAAQ,CAAC,IAAIF,QAAQ,GAAG,EAAE,CAAC;IAC3D,CAAC,CAAC;IAEF,IAAIN,SAAS,CAACS,MAAM,KAAKN,iBAAiB,CAACM,MAAM,EAAE;MAC/C,KAAK,IAAAC,uBAAY,EAAC;QACd/B,IAAI,EAAEgC,qBAAU,CAACC,KAAK;QACtBC,IAAI,EAAE;MACV,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;IACb;IAEA/B,OAAO,CAACoB,iBAAiB,CAAC;EAC9B,CAAC,CAAC;EAEFnB,KAAK,CAAC+B,KAAK,CAAC,CAAC;AACjB,CAAC,CAAC;AAACC,OAAA,CAAAtC,WAAA,GAAAA,WAAA;AAEA,MAAMuC,oBAAoB,GAAIZ,IAAU,IAC3C,IAAIvB,OAAO,CAAC,CAACC,OAAO,EAAEmC,MAAM,KAAK;EAC7B,MAAMC,MAAM,GAAG,IAAIC,UAAU,CAAC,CAAC;EAE/BD,MAAM,CAACE,MAAM,GAAIC,CAAC,IAAK;IAAA,IAAAC,SAAA;IACnB,KAAAA,SAAA,GAAID,CAAC,CAACxB,MAAM,cAAAyB,SAAA,eAARA,SAAA,CAAUC,MAAM,EAAE;MAClBzC,OAAO,CAACuC,CAAC,CAACxB,MAAM,CAAC0B,MAAM,CAAC;IAC5B,CAAC,MAAM;MACHN,MAAM,CAACO,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAChD;EACJ,CAAC;EAEDN,MAAM,CAACO,OAAO,GAAGR,MAAM;EAEvBC,MAAM,CAACQ,iBAAiB,CAACtB,IAAI,CAAC;AAClC,CAAC,CAAC;AAACW,OAAA,CAAAC,oBAAA,GAAAA,oBAAA","ignoreList":[]}

package/lib/esm/components/accordion/Accordion.js CHANGED Viewed

@@ -141,7 +141,7 @@ const Accordion = _ref => {
       opacity: 0
     },
     $isOpen: isOpen,
-    $shouldShowLines: !isLastAccordion,
+    $shouldShowLines: !isLastAccordion || !isWrapped,
     $isParentWrapped: isParentWrapped,
     $isWrapped: isWrapped,
     $shouldForceBackground: shouldForceBackground,

package/lib/esm/components/accordion/Accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","AccordionWrappedContext","StyledMotionAccordion","AccordionContext","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","onTitleInputChange","titleInputProps","titleColor","onBodyAnimationComplete","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","isParentWrapped","contextIsWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","animate","height","opacity","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","onMouseEnter","onMouseLeave","Provider","value","transition","type","onClick","maxHeight","onScroll","onAnimationComplete","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n /*\n Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n /\n bodyMaxHeight?: number;\n /\n The content of the accordion body\n /\n children: ReactNode;\n /\n The icon that is displayed in front of the title\n /\n icon?: string;\n /\n This can be used to automatically expand the Accordion during the first render.\n /\n isDefaultOpen?: boolean;\n /\n This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n /\n isDisabled?: boolean;\n /\n This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n /\n isFixed?: boolean;\n /\n This can be used to open the Accordion from the outside\n /\n isOpened?: boolean;\n /\n This will gray out the title of the Accordion to indicate hidden content, for example.\n /\n isTitleGreyed?: boolean;\n /\n Function that is executed when the accordion body will be scrolled\n /\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /\n Function that is executed when the accordion will be closed.\n /\n onClose?: VoidFunction;\n /\n Function to be executed when the accordion is no longer hovered.\n /\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /\n Function to be executed when the accordion is hovered.\n /\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /\n Function that is executed when the accordion will be opened.\n /\n onOpen?: VoidFunction;\n /\n Function that is executed when the accordion body is animated\n /\n onBodyAnimationComplete?: VoidFunction;\n /\n Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n /\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n /\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Content to be displayed on the right side in the head of the Accordion\n /\n rightElement?: ReactNode;\n /\n The placeholder to be used for the search\n /\n searchPlaceholder?: string;\n /\n The value that is displayed inside the search\n /\n searchValue?: string;\n /\n This will force the background color of the accordion to be used even if it is closed and not hovered.\n /\n shouldForceBackground?: boolean;\n /\n This will hide the background color of the accordion\n /\n shouldHideBackground?: boolean;\n /\n This will render the Accordion closed on the first render.\n /\n shouldRenderClosed?: boolean;\n /\n Whether the icon should be rotating.\n /\n shouldRotateIcon?: boolean;\n /\n Title of the Accordion displayed in the head\n /\n title: string;\n /\n Additional elements to be displayed in the header next to the title.\n /\n titleElement?: ReactNode;\n /\n The props of the title Input.\n /\n titleInputProps?: InputProps;\n /\n The title color.\n */\n titleColor?: CSSProperties['color'];\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n titleColor,\n onBodyAnimationComplete,\n}) => {\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n return (\n <StyledMotionAccordion\n animate={{ height: 'auto', opacity: 1 }}\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed \|\| isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={titleColor}\n />\n <AnimatePresence initial={false}>\n {(isOpen \|\| shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledMotionAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,eAAe;AAC7D,OAAOC,KAAK,IAKRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAGL,OAAO;AACd,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,WAAW,QAAQ,sCAAsC;AAElE,OAAOC,aAAa,MAAM,gCAAgC;AAC1D,SAASC,qBAAqB,QAAQ,kCAAkC;AACxE,OAAOC,aAAa,MAAM,gCAAgC;AAC1D,SAASC,uBAAuB,QAAQ,+CAA+C;AACvF,SAASC,qBAAqB,QAAQ,oBAAoB;AAE1D,OAAO,MAAMC,gBAAgB,gBAAGd,KAAK,CAACe,aAAa,CAAC;EAAEC,SAAS,EAAE;AAAM,CAAC,CAAC;AAuHzE,MAAMC,SAA6B,GAAGC,IAAA,IA4BhC;EAAA,IA5BiC;IACnCC,aAAa;IACbC,QAAQ;IACRC,IAAI;IACJC,aAAa,GAAG,KAAK;IACrBC,UAAU,GAAG,KAAK;IAClBC,OAAO,GAAG,KAAK;IACfC,QAAQ;IACRC,aAAa,GAAG,KAAK;IACrBC,YAAY;IACZC,OAAO;IACPC,UAAU;IACVC,YAAY;IACZC,MAAM;IACNC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,WAAW;IACXC,qBAAqB,GAAG,KAAK;IAC7BC,oBAAoB,GAAG,KAAK;IAC5BC,kBAAkB,GAAG,KAAK;IAC1BC,gBAAgB,GAAG,IAAI;IACvBC,KAAK;IACLC,YAAY;IACZC,kBAAkB;IAClBC,eAAe;IACfC,UAAU;IACVC;EACJ,CAAC,GAAA3B,IAAA;EACG,MAAM;IACFF,SAAS,EAAE8B,cAAc;IACzBC,iBAAiB;IACjBC,kBAAkB;IAClBC,cAAc;IACdC;EACJ,CAAC,GAAGhD,UAAU,CAACQ,qBAAqB,CAAC;EACrC,MAAM;IAAEM,SAAS,EAAEmC;EAAgB,CAAC,GAAGjD,UAAU,CAACY,gBAAgB,CAAC;EAEnE,MAAM;IAAEE,SAAS,EAAEoC;EAAiB,CAAC,GAAGlD,UAAU,CAACU,uBAAuB,CAAC;EAC3E,MAAMI,SAAS,GAAGZ,OAAO,CACrB,MAAM0C,cAAc,IAAIM,gBAAgB,EACxC,CAACA,gBAAgB,EAAEN,cAAc,CACrC,CAAC;EAED,MAAM,CAACO,eAAe,EAAEC,kBAAkB,CAAC,GAAGhD,QAAQ,CAAUgB,aAAa,IAAIG,QAAQ,CAAC;EAE1F,MAAM8B,IAAI,GAAGhD,OAAO,CAAC,CAAC;EAEtB,MAAMiD,kBAAkB,GAAGnD,MAAM,CAAC,IAAI,CAAC;EAEvC,MAAMoD,SAAS,GAAG,OAAOP,uBAAuB,KAAK,UAAU;EAE/D,MAAMQ,MAAM,GAAGD,SAAS,GAAGV,iBAAiB,KAAKQ,IAAI,GAAGF,eAAe;EAEvE,MAAMM,SAAS,GAAGtD,MAAM,CAACqD,MAAM,CAAC;EAChC,MAAME,UAAU,GAAGvD,MAAM,CAACuB,OAAO,CAAC;EAClC,MAAMiC,SAAS,GAAGxD,MAAM,CAAC0B,MAAM,CAAC;EAEhC,MAAM+B,eAAe,GAAG1D,OAAO,CAC3B,MAAO6C,cAAc,GAAGA,cAAc,CAACA,cAAc,CAACc,MAAM,GAAG,CAAC,CAAC,KAAKR,IAAI,GAAG,KAAM,EACnF,CAACN,cAAc,EAAEM,IAAI,CACzB,CAAC;EAEDpD,SAAS,CAAC,MAAM;IACZwD,SAAS,CAACK,OAAO,GAAGN,MAAM;IAC1BE,UAAU,CAACI,OAAO,GAAGpC,OAAO;IAC5BiC,SAAS,CAACG,OAAO,GAAGjC,MAAM;EAC9B,CAAC,EAAE,CAAC2B,MAAM,EAAE9B,OAAO,EAAEG,MAAM,CAAC,CAAC;EAE7B,MAAMkC,eAAe,GAAGhE,WAAW,CAAC,MAAM;IACtC,IAAIsB,UAAU,EAAE;MACZ;IACJ;IAEA,IAAI,OAAO2B,uBAAuB,KAAK,UAAU,EAAE;MAC/CA,uBAAuB,CAACK,IAAI,CAAC;IACjC;IAEAD,kBAAkB,CAAEY,sBAAsB,IAAK,CAACA,sBAAsB,CAAC;EAC3E,CAAC,EAAE,CAAC3C,UAAU,EAAE2B,uBAAuB,EAAEK,IAAI,CAAC,CAAC;EAE/CpD,SAAS,CAAC,MAAM;IACZ,IAAIoB,UAAU,IAAImC,MAAM,EAAE;MACtB,IAAI,OAAOR,uBAAuB,KAAK,UAAU,EAAE;QAC/CA,uBAAuB,CAACK,IAAI,CAAC;MACjC;MAEAD,kBAAkB,CAAEY,sBAAsB,IAAK,CAACA,sBAAsB,CAAC;IAC3E;EACJ,CAAC,EAAE,CAAC3C,UAAU,EAAEmC,MAAM,EAAER,uBAAuB,EAAEK,IAAI,CAAC,CAAC;EAEvDpD,SAAS,CAAC,MAAM;IACZ,IAAIqD,kBAAkB,CAACQ,OAAO,EAAE;MAC5BR,kBAAkB,CAACQ,OAAO,GAAG,KAAK;IACtC,CAAC,MAAM,IAAIN,MAAM,EAAE;MACf,IAAI,OAAOG,SAAS,CAACG,OAAO,KAAK,UAAU,EAAE;QACzCH,SAAS,CAACG,OAAO,CAAC,CAAC;MACvB;IACJ,CAAC,MAAM,IAAI,OAAOJ,UAAU,CAACI,OAAO,KAAK,UAAU,EAAE;MACjDJ,UAAU,CAACI,OAAO,CAAC,CAAC;IACxB;EACJ,CAAC,EAAE,CAACN,MAAM,CAAC,CAAC;EAEZvD,SAAS,CAAC,MAAM;IACZ,IAAImB,aAAa,EAAE;MACf,IAAI,OAAO4B,uBAAuB,KAAK,UAAU,EAAE;QAC/CA,uBAAuB,CAACK,IAAI,EAAE;UAAEY,cAAc,EAAE;QAAK,CAAC,CAAC;MAC3D,CAAC,MAAM;QACHb,kBAAkB,CAAC,IAAI,CAAC;MAC5B;IACJ;EACJ,CAAC,EAAE,CAAChC,aAAa,EAAE4B,uBAAuB,EAAEK,IAAI,CAAC,CAAC;EAElDpD,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOsB,QAAQ,KAAK,SAAS,EAAE;MAC/B,IAAI,OAAOyB,uBAAuB,KAAK,UAAU,IAAIzB,QAAQ,KAAKkC,SAAS,CAACK,OAAO,EAAE;QACjFd,uBAAuB,CAACK,IAAI,CAAC;MACjC,CAAC,MAAM;QACHD,kBAAkB,CAAC7B,QAAQ,CAAC;MAChC;IACJ;EACJ,CAAC,EAAE,CAACA,QAAQ,EAAEyB,uBAAuB,EAAEK,IAAI,CAAC,CAAC;EAE7C,MAAMa,6BAA6B,GAAGhE,OAAO,CACzC,OAAO;IAAEY,SAAS,EAAEA,SAAS,KAAK;EAAK,CAAC,CAAC,EACzC,CAACA,SAAS,CACd,CAAC;EAED,MAAMqD,wBAAwB,GAAGjE,OAAO,CAAC,OAAO;IAAEkE,iBAAiB,EAAE;EAAK,CAAC,CAAC,EAAE,EAAE,CAAC;EAEjF,MAAMC,oCAAoC,GAAGnE,OAAO,CAAC,OAAO;IAAEY,SAAS,EAAE;EAAK,CAAC,CAAC,EAAE,EAAE,CAAC;EACrF,oBACIhB,KAAA,CAAAwE,aAAA,CAAC3D,qBAAqB;IAClB4D,OAAO,EAAE;MAAEC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxC,aAAW,GAAG3B,kBAAkB,IAAI,EAAE,MAAMO,IAAI,EAAG;IACnDqB,SAAS,EAAC,uBAAuB;IACjCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,OAAO,EAAErB,MAAO;IAChBsB,gBAAgB,EAAE,CAAClB,eAAgB;IACnCmB,gBAAgB,EAAE9B,eAAgB;IAClC+B,UAAU,EAAElE,SAAU;IACtBmE,sBAAsB,EAAE/C,qBAAsB;IAC9CgD,qBAAqB,EAAE/C,oBAAqB;IAC5CgD,YAAY,EAAEvD,YAAa;IAC3BwD,YAAY,EAAEzD;EAAW,gBAEzB7B,KAAA,CAAAwE,aAAA,CAAC1D,gBAAgB,CAACyE,QAAQ;IAACC,KAAK,EAAEpB;EAA8B,gBAC5DpE,KAAA,CAAAwE,aAAA,CAACzE,YAAY;IAAC0F,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBACxC1F,KAAA,CAAAwE,aAAA,CAAC7D,aAAa;IACV4C,IAAI,EAAEA,IAAK;IACXlC,IAAI,EAAEA,IAAK;IACXqC,MAAM,EAAEA,MAAO;IACflC,OAAO,EAAEA,OAAQ;IACjBE,aAAa,EAAEA,aAAa,IAAIH,UAAW;IAC3CP,SAAS,EAAEA,SAAS,KAAK,IAAK;IAC9B2E,OAAO,EAAE1B,eAAgB;IACzBjC,cAAc,EAAEA,cAAe;IAC/BC,YAAY,EAAEA,YAAa;IAC3BC,iBAAiB,EAAEA,iBAAkB;IACrCC,WAAW,EAAEA,WAAY;IACzBI,gBAAgB,EAAEA,gBAAiB;IACnCC,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA,YAAa;IAC3BC,kBAAkB,EAAEA,kBAAmB;IACvCC,eAAe,EAAEA,eAAgB;IACjCC,UAAU,EAAEA;EAAW,CAC1B,CAAC,eACF5C,KAAA,CAAAwE,aAAA,CAAC1E,eAAe;IAACgF,OAAO,EAAE;EAAM,GAC3B,CAACpB,MAAM,IAAIpB,kBAAkB,kBAC1BtC,KAAA,CAAAwE,aAAA,CAAC/D,aAAa;IACVmF,SAAS,EAAEzE,aAAc;IACzB0E,QAAQ,EAAElE,YAAa;IACvBmE,mBAAmB,EAAEjD,uBAAwB;IAC7CkD,cAAc,EAAEzD,kBAAkB,IAAI,CAACoB;EAAO,gBAE9C1D,KAAA,CAAAwE,aAAA,CAAC5D,uBAAuB,CAAC2E,QAAQ;IAC7BC,KAAK,EAAEjB;EAAqC,gBAE5CvE,KAAA,CAAAwE,aAAA,CAAChE,WAAW,CAAC+E,QAAQ;IAACC,KAAK,EAAEnB;EAAyB,GACjDjD,QACiB,CACQ,CACvB,CAEN,CACP,CACS,CACR,CAAC;AAEhC,CAAC;AAEDH,SAAS,CAAC+E,WAAW,GAAG,WAAW;AAEnC,eAAe/E,SAAS","ignoreList":[]}
1	+ {"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","AccordionWrappedContext","StyledMotionAccordion","AccordionContext","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","onTitleInputChange","titleInputProps","titleColor","onBodyAnimationComplete","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","isParentWrapped","contextIsWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","animate","height","opacity","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","onMouseEnter","onMouseLeave","Provider","value","transition","type","onClick","maxHeight","onScroll","onAnimationComplete","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n /*\n Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n /\n bodyMaxHeight?: number;\n /\n The content of the accordion body\n /\n children: ReactNode;\n /\n The icon that is displayed in front of the title\n /\n icon?: string;\n /\n This can be used to automatically expand the Accordion during the first render.\n /\n isDefaultOpen?: boolean;\n /\n This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n /\n isDisabled?: boolean;\n /\n This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n /\n isFixed?: boolean;\n /\n This can be used to open the Accordion from the outside\n /\n isOpened?: boolean;\n /\n This will gray out the title of the Accordion to indicate hidden content, for example.\n /\n isTitleGreyed?: boolean;\n /\n Function that is executed when the accordion body will be scrolled\n /\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /\n Function that is executed when the accordion will be closed.\n /\n onClose?: VoidFunction;\n /\n Function to be executed when the accordion is no longer hovered.\n /\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /\n Function to be executed when the accordion is hovered.\n /\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /\n Function that is executed when the accordion will be opened.\n /\n onOpen?: VoidFunction;\n /\n Function that is executed when the accordion body is animated\n /\n onBodyAnimationComplete?: VoidFunction;\n /\n Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n /\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n /\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Content to be displayed on the right side in the head of the Accordion\n /\n rightElement?: ReactNode;\n /\n The placeholder to be used for the search\n /\n searchPlaceholder?: string;\n /\n The value that is displayed inside the search\n /\n searchValue?: string;\n /\n This will force the background color of the accordion to be used even if it is closed and not hovered.\n /\n shouldForceBackground?: boolean;\n /\n This will hide the background color of the accordion\n /\n shouldHideBackground?: boolean;\n /\n This will render the Accordion closed on the first render.\n /\n shouldRenderClosed?: boolean;\n /\n Whether the icon should be rotating.\n /\n shouldRotateIcon?: boolean;\n /\n Title of the Accordion displayed in the head\n /\n title: string;\n /\n Additional elements to be displayed in the header next to the title.\n /\n titleElement?: ReactNode;\n /\n The props of the title Input.\n /\n titleInputProps?: InputProps;\n /\n The title color.\n */\n titleColor?: CSSProperties['color'];\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n titleColor,\n onBodyAnimationComplete,\n}) => {\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n return (\n <StyledMotionAccordion\n animate={{ height: 'auto', opacity: 1 }}\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion \|\| !isWrapped}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed \|\| isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={titleColor}\n />\n <AnimatePresence initial={false}>\n {(isOpen \|\| shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledMotionAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,eAAe;AAC7D,OAAOC,KAAK,IAKRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAGL,OAAO;AACd,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,WAAW,QAAQ,sCAAsC;AAElE,OAAOC,aAAa,MAAM,gCAAgC;AAC1D,SAASC,qBAAqB,QAAQ,kCAAkC;AACxE,OAAOC,aAAa,MAAM,gCAAgC;AAC1D,SAASC,uBAAuB,QAAQ,+CAA+C;AACvF,SAASC,qBAAqB,QAAQ,oBAAoB;AAE1D,OAAO,MAAMC,gBAAgB,gBAAGd,KAAK,CAACe,aAAa,CAAC;EAAEC,SAAS,EAAE;AAAM,CAAC,CAAC;AAuHzE,MAAMC,SAA6B,GAAGC,IAAA,IA4BhC;EAAA,IA5BiC;IACnCC,aAAa;IACbC,QAAQ;IACRC,IAAI;IACJC,aAAa,GAAG,KAAK;IACrBC,UAAU,GAAG,KAAK;IAClBC,OAAO,GAAG,KAAK;IACfC,QAAQ;IACRC,aAAa,GAAG,KAAK;IACrBC,YAAY;IACZC,OAAO;IACPC,UAAU;IACVC,YAAY;IACZC,MAAM;IACNC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,WAAW;IACXC,qBAAqB,GAAG,KAAK;IAC7BC,oBAAoB,GAAG,KAAK;IAC5BC,kBAAkB,GAAG,KAAK;IAC1BC,gBAAgB,GAAG,IAAI;IACvBC,KAAK;IACLC,YAAY;IACZC,kBAAkB;IAClBC,eAAe;IACfC,UAAU;IACVC;EACJ,CAAC,GAAA3B,IAAA;EACG,MAAM;IACFF,SAAS,EAAE8B,cAAc;IACzBC,iBAAiB;IACjBC,kBAAkB;IAClBC,cAAc;IACdC;EACJ,CAAC,GAAGhD,UAAU,CAACQ,qBAAqB,CAAC;EACrC,MAAM;IAAEM,SAAS,EAAEmC;EAAgB,CAAC,GAAGjD,UAAU,CAACY,gBAAgB,CAAC;EAEnE,MAAM;IAAEE,SAAS,EAAEoC;EAAiB,CAAC,GAAGlD,UAAU,CAACU,uBAAuB,CAAC;EAC3E,MAAMI,SAAS,GAAGZ,OAAO,CACrB,MAAM0C,cAAc,IAAIM,gBAAgB,EACxC,CAACA,gBAAgB,EAAEN,cAAc,CACrC,CAAC;EAED,MAAM,CAACO,eAAe,EAAEC,kBAAkB,CAAC,GAAGhD,QAAQ,CAAUgB,aAAa,IAAIG,QAAQ,CAAC;EAE1F,MAAM8B,IAAI,GAAGhD,OAAO,CAAC,CAAC;EAEtB,MAAMiD,kBAAkB,GAAGnD,MAAM,CAAC,IAAI,CAAC;EAEvC,MAAMoD,SAAS,GAAG,OAAOP,uBAAuB,KAAK,UAAU;EAE/D,MAAMQ,MAAM,GAAGD,SAAS,GAAGV,iBAAiB,KAAKQ,IAAI,GAAGF,eAAe;EAEvE,MAAMM,SAAS,GAAGtD,MAAM,CAACqD,MAAM,CAAC;EAChC,MAAME,UAAU,GAAGvD,MAAM,CAACuB,OAAO,CAAC;EAClC,MAAMiC,SAAS,GAAGxD,MAAM,CAAC0B,MAAM,CAAC;EAEhC,MAAM+B,eAAe,GAAG1D,OAAO,CAC3B,MAAO6C,cAAc,GAAGA,cAAc,CAACA,cAAc,CAACc,MAAM,GAAG,CAAC,CAAC,KAAKR,IAAI,GAAG,KAAM,EACnF,CAACN,cAAc,EAAEM,IAAI,CACzB,CAAC;EAEDpD,SAAS,CAAC,MAAM;IACZwD,SAAS,CAACK,OAAO,GAAGN,MAAM;IAC1BE,UAAU,CAACI,OAAO,GAAGpC,OAAO;IAC5BiC,SAAS,CAACG,OAAO,GAAGjC,MAAM;EAC9B,CAAC,EAAE,CAAC2B,MAAM,EAAE9B,OAAO,EAAEG,MAAM,CAAC,CAAC;EAE7B,MAAMkC,eAAe,GAAGhE,WAAW,CAAC,MAAM;IACtC,IAAIsB,UAAU,EAAE;MACZ;IACJ;IAEA,IAAI,OAAO2B,uBAAuB,KAAK,UAAU,EAAE;MAC/CA,uBAAuB,CAACK,IAAI,CAAC;IACjC;IAEAD,kBAAkB,CAAEY,sBAAsB,IAAK,CAACA,sBAAsB,CAAC;EAC3E,CAAC,EAAE,CAAC3C,UAAU,EAAE2B,uBAAuB,EAAEK,IAAI,CAAC,CAAC;EAE/CpD,SAAS,CAAC,MAAM;IACZ,IAAIoB,UAAU,IAAImC,MAAM,EAAE;MACtB,IAAI,OAAOR,uBAAuB,KAAK,UAAU,EAAE;QAC/CA,uBAAuB,CAACK,IAAI,CAAC;MACjC;MAEAD,kBAAkB,CAAEY,sBAAsB,IAAK,CAACA,sBAAsB,CAAC;IAC3E;EACJ,CAAC,EAAE,CAAC3C,UAAU,EAAEmC,MAAM,EAAER,uBAAuB,EAAEK,IAAI,CAAC,CAAC;EAEvDpD,SAAS,CAAC,MAAM;IACZ,IAAIqD,kBAAkB,CAACQ,OAAO,EAAE;MAC5BR,kBAAkB,CAACQ,OAAO,GAAG,KAAK;IACtC,CAAC,MAAM,IAAIN,MAAM,EAAE;MACf,IAAI,OAAOG,SAAS,CAACG,OAAO,KAAK,UAAU,EAAE;QACzCH,SAAS,CAACG,OAAO,CAAC,CAAC;MACvB;IACJ,CAAC,MAAM,IAAI,OAAOJ,UAAU,CAACI,OAAO,KAAK,UAAU,EAAE;MACjDJ,UAAU,CAACI,OAAO,CAAC,CAAC;IACxB;EACJ,CAAC,EAAE,CAACN,MAAM,CAAC,CAAC;EAEZvD,SAAS,CAAC,MAAM;IACZ,IAAImB,aAAa,EAAE;MACf,IAAI,OAAO4B,uBAAuB,KAAK,UAAU,EAAE;QAC/CA,uBAAuB,CAACK,IAAI,EAAE;UAAEY,cAAc,EAAE;QAAK,CAAC,CAAC;MAC3D,CAAC,MAAM;QACHb,kBAAkB,CAAC,IAAI,CAAC;MAC5B;IACJ;EACJ,CAAC,EAAE,CAAChC,aAAa,EAAE4B,uBAAuB,EAAEK,IAAI,CAAC,CAAC;EAElDpD,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOsB,QAAQ,KAAK,SAAS,EAAE;MAC/B,IAAI,OAAOyB,uBAAuB,KAAK,UAAU,IAAIzB,QAAQ,KAAKkC,SAAS,CAACK,OAAO,EAAE;QACjFd,uBAAuB,CAACK,IAAI,CAAC;MACjC,CAAC,MAAM;QACHD,kBAAkB,CAAC7B,QAAQ,CAAC;MAChC;IACJ;EACJ,CAAC,EAAE,CAACA,QAAQ,EAAEyB,uBAAuB,EAAEK,IAAI,CAAC,CAAC;EAE7C,MAAMa,6BAA6B,GAAGhE,OAAO,CACzC,OAAO;IAAEY,SAAS,EAAEA,SAAS,KAAK;EAAK,CAAC,CAAC,EACzC,CAACA,SAAS,CACd,CAAC;EAED,MAAMqD,wBAAwB,GAAGjE,OAAO,CAAC,OAAO;IAAEkE,iBAAiB,EAAE;EAAK,CAAC,CAAC,EAAE,EAAE,CAAC;EAEjF,MAAMC,oCAAoC,GAAGnE,OAAO,CAAC,OAAO;IAAEY,SAAS,EAAE;EAAK,CAAC,CAAC,EAAE,EAAE,CAAC;EACrF,oBACIhB,KAAA,CAAAwE,aAAA,CAAC3D,qBAAqB;IAClB4D,OAAO,EAAE;MAAEC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxC,aAAW,GAAG3B,kBAAkB,IAAI,EAAE,MAAMO,IAAI,EAAG;IACnDqB,SAAS,EAAC,uBAAuB;IACjCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,OAAO,EAAErB,MAAO;IAChBsB,gBAAgB,EAAE,CAAClB,eAAe,IAAI,CAAC9C,SAAU;IACjDiE,gBAAgB,EAAE9B,eAAgB;IAClC+B,UAAU,EAAElE,SAAU;IACtBmE,sBAAsB,EAAE/C,qBAAsB;IAC9CgD,qBAAqB,EAAE/C,oBAAqB;IAC5CgD,YAAY,EAAEvD,YAAa;IAC3BwD,YAAY,EAAEzD;EAAW,gBAEzB7B,KAAA,CAAAwE,aAAA,CAAC1D,gBAAgB,CAACyE,QAAQ;IAACC,KAAK,EAAEpB;EAA8B,gBAC5DpE,KAAA,CAAAwE,aAAA,CAACzE,YAAY;IAAC0F,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBACxC1F,KAAA,CAAAwE,aAAA,CAAC7D,aAAa;IACV4C,IAAI,EAAEA,IAAK;IACXlC,IAAI,EAAEA,IAAK;IACXqC,MAAM,EAAEA,MAAO;IACflC,OAAO,EAAEA,OAAQ;IACjBE,aAAa,EAAEA,aAAa,IAAIH,UAAW;IAC3CP,SAAS,EAAEA,SAAS,KAAK,IAAK;IAC9B2E,OAAO,EAAE1B,eAAgB;IACzBjC,cAAc,EAAEA,cAAe;IAC/BC,YAAY,EAAEA,YAAa;IAC3BC,iBAAiB,EAAEA,iBAAkB;IACrCC,WAAW,EAAEA,WAAY;IACzBI,gBAAgB,EAAEA,gBAAiB;IACnCC,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA,YAAa;IAC3BC,kBAAkB,EAAEA,kBAAmB;IACvCC,eAAe,EAAEA,eAAgB;IACjCC,UAAU,EAAEA;EAAW,CAC1B,CAAC,eACF5C,KAAA,CAAAwE,aAAA,CAAC1E,eAAe;IAACgF,OAAO,EAAE;EAAM,GAC3B,CAACpB,MAAM,IAAIpB,kBAAkB,kBAC1BtC,KAAA,CAAAwE,aAAA,CAAC/D,aAAa;IACVmF,SAAS,EAAEzE,aAAc;IACzB0E,QAAQ,EAAElE,YAAa;IACvBmE,mBAAmB,EAAEjD,uBAAwB;IAC7CkD,cAAc,EAAEzD,kBAAkB,IAAI,CAACoB;EAAO,gBAE9C1D,KAAA,CAAAwE,aAAA,CAAC5D,uBAAuB,CAAC2E,QAAQ;IAC7BC,KAAK,EAAEjB;EAAqC,gBAE5CvE,KAAA,CAAAwE,aAAA,CAAChE,WAAW,CAAC+E,QAAQ;IAACC,KAAK,EAAEnB;EAAyB,GACjDjD,QACiB,CACQ,CACvB,CAEN,CACP,CACS,CACR,CAAC;AAEhC,CAAC;AAEDH,SAAS,CAAC+E,WAAW,GAAG,WAAW;AAEnC,eAAe/E,SAAS","ignoreList":[]}

package/lib/esm/components/combobox/ComboBox.js CHANGED Viewed

@@ -26,6 +26,7 @@ const ComboBox = _ref => {
   const [minWidth, setMinWidth] = useState(0);
   const [focusedIndex, setFocusedIndex] = useState(null);
   const [overflowY, setOverflowY] = useState('hidden');
+  const [portal, setPortal] = useState();
   const [internalCoordinates, setInternalCoordinates] = useState({
     x: 0,
     y: 0
@@ -86,12 +87,13 @@ const ComboBox = _ref => {
     }
   }, [onSelect]);
   useEffect(() => {
-    if (isAnimating) {
-      const scrollHeight = contentRef.current?.scrollHeight ?? 0;
+    const currentContent = contentRef.current;
+    if (portal && isAnimating && currentContent) {
+      const scrollHeight = currentContent.scrollHeight ?? 0;
       const maxHeightInPixels = getMaxHeightInPixels(maxHeight, styledComboBoxElementRef.current ?? document.body);
       setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');
     }
-  }, [isAnimating, maxHeight]);
+  }, [isAnimating, maxHeight, portal]);
   useEffect(() => {
     const handleKeyDown = e => {
       if (!isAnimating) {
@@ -266,33 +268,35 @@ const ComboBox = _ref => {
     }
     return styles;
   }, [direction, internalCoordinates.x, internalCoordinates.y]);
-  const portal = useMemo(() => /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(AnimatePresence, {
-    initial: false
-  }, isAnimating && /*#__PURE__*/React.createElement(StyledMotionComboBoxBody, {
-    $browser: browser?.name,
-    animate: {
-      height: 'fit-content',
-      opacity: 1
-    },
-    $overflowY: overflowY,
-    initial: {
-      height: 0,
-      opacity: 0
-    },
-    exit: {
-      height: 0,
-      opacity: 0
-    },
-    $maxHeight: maxHeight,
-    $minWidth: minWidth,
-    style: bodyStyles,
-    $direction: direction,
-    transition: {
-      duration: 0.2
-    },
-    tabIndex: 0,
-    ref: contentRef
-  }, comboBoxGroups)), container), [bodyStyles, browser?.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
+  useEffect(() => {
+    setPortal(() => /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(AnimatePresence, {
+      initial: false
+    }, isAnimating && /*#__PURE__*/React.createElement(StyledMotionComboBoxBody, {
+      $browser: browser?.name,
+      animate: {
+        height: 'fit-content',
+        opacity: 1
+      },
+      $overflowY: overflowY,
+      initial: {
+        height: 0,
+        opacity: 0
+      },
+      exit: {
+        height: 0,
+        opacity: 0
+      },
+      $maxHeight: maxHeight,
+      $minWidth: minWidth,
+      style: bodyStyles,
+      $direction: direction,
+      transition: {
+        duration: 0.2
+      },
+      tabIndex: 0,
+      ref: contentRef
+    }, comboBoxGroups)), container));
+  }, [bodyStyles, browser?.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
     ref: styledComboBoxElementRef,
     $shouldUseFullWidth: shouldUseFullWidth,

package/lib/esm/components/combobox/ComboBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","scrollHeight","maxHeightInPixels","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","isAtLeastOneItemWithImageGiven","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","width","parentElement","text","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","_ref5","groupName","createElement","_ref6","rightElement","subtext","suffixElement","isSelected","bodyStyles","styles","transform","portal","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldReduceOpacity","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxTopic,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string \| number;\n}\n\nexport type ComboBoxProps = {\n /*\n The element where the content of the `ComboBox` should be rendered via React Portal.\n /\n container?: Element;\n /\n The direction in which the combobox should open.\n /\n direction?: ComboBoxDirection;\n /\n Whether the combobox should be disabled.\n /\n isDisabled?: boolean;\n /\n The list of the items that should be displayed.\n /\n lists: IComboBoxItems[];\n /\n The maximum height of the combobox content.\n /\n maxHeight?: CSSProperties['maxHeight'];\n /\n Function that should be executed when an item is selected.\n /\n onSelect?: (comboboxItem: IComboBoxItem) => void;\n /\n A text that should be displayed when no item is selected.\n /\n placeholder: string;\n /\n An item that should be preselected.\n /\n selectedItem?: IComboBoxItem;\n /\n If true, the images of the items are displayed in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n /\n shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n lists,\n maxHeight = '280px',\n onSelect,\n placeholder,\n container = document.body,\n selectedItem,\n shouldShowRoundImage,\n shouldUseFullWidth = false,\n}) => {\n const [item, setItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement \| null>(null);\n\n const { browser } = useDevice();\n\n const isTouch = getIsTouch();\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n styledComboBoxElementRef.current &&\n !styledComboBoxElementRef.current.contains(event.target as Node)\n ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current) {\n const {\n left: comboBoxLeft,\n top: comboBoxTop,\n height,\n } = styledComboBoxElementRef.current.getBoundingClientRect();\n const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n const x = comboBoxLeft - containerLeft + container.scrollLeft;\n const y = comboBoxTop - containerTop + container.scrollTop;\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [container, direction]);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n /\n This function adds an event listener to the document to close the combobox when the user clicks outside of it\n /\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, styledComboBoxElementRef]);\n\n /\n This function sets the selected item\n /\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n setItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\n\n useEffect(() => {\n if (isAnimating) {\n const scrollHeight = contentRef.current?.scrollHeight ?? 0;\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n }\n }, [isAnimating, maxHeight]);\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 if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem \| undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n return !!newSelectedItem;\n });\n\n if (!newSelectedItem) {\n return;\n }\n\n handleSetSelectedItem(newSelectedItem);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /\n This function calculates the greatest width\n /\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n\n const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n const width =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n // 40px = icon width + flex gap\n setMinWidth(\n shouldUseFullWidth\n ? width\n : calculateContentWidth([\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ]) +\n 45 +\n (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n (isAtLeastOneItemWithIconGiven ? 40 : 0),\n );\n }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n /\n This function sets the external selected item\n /\n useEffect(() => {\n setIsAnimating(false);\n setItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (item) {\n return item.imageUrl;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (item) {\n return item.icons;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n /\n This function resets the placeholder\n /\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (item) {\n text = item.text;\n }\n\n return text;\n }, [item, placeholder, selectedItem]);\n\n /\n This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map(({ groupName, list }) => (\n <div key={groupName ?? 'default-group'}>\n {groupName && lists.length > 1 && (\n <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n )}\n {list.map(\n ({\n imageUrl,\n icons,\n rightElement,\n subtext,\n suffixElement,\n text,\n value,\n }) => (\n <ComboBoxItem\n icons={icons}\n id={value}\n imageUrl={imageUrl}\n isSelected={selectedItem ? value === selectedItem.value : false}\n key={value}\n onSelect={handleSetSelectedItem}\n rightElement={rightElement}\n shouldShowRoundImage={shouldShowRoundImage}\n subtext={subtext}\n suffixElement={suffixElement}\n text={text}\n value={value}\n />\n ),\n )}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowRoundImage],\n );\n\n const bodyStyles = useMemo(() => {\n let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n if (direction === ComboBoxDirection.TOP) {\n styles = { ...styles, transform: 'translateY(-100%)' };\n }\n\n return styles;\n }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n const portal = useMemo(\n () =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <StyledMotionComboBoxBody\n $browser={browser?.name}\n animate={{ height: 'fit-content', opacity: 1 }}\n $overflowY={overflowY}\n initial={{ height: 0, opacity: 0 }}\n exit={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $minWidth={minWidth}\n style={bodyStyles}\n $direction={direction}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxGroups}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n container,\n ),\n [\n bodyStyles,\n browser?.name,\n comboBoxGroups,\n container,\n direction,\n isAnimating,\n maxHeight,\n minWidth,\n overflowY,\n ],\n );\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $shouldUseFullWidth={shouldUseFullWidth}\n $minWidth={minWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n >\n <StyledComboBoxPlaceholder $shouldReduceOpacity={!selectedItem && !item}>\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {placeholderText}\n {item && item.suffixElement && item.suffixElement}\n </StyledComboBoxPlaceholder>\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n direction,\n handleHeaderClick,\n isAnimating,\n isDisabled,\n isTouch,\n item,\n minWidth,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n portal,\n selectedItem,\n shouldShowRoundImage,\n shouldUseFullWidth,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","currentContent","scrollHeight","maxHeightInPixels","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","isAtLeastOneItemWithImageGiven","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","width","parentElement","text","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","_ref5","groupName","createElement","_ref6","rightElement","subtext","suffixElement","isSelected","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldReduceOpacity","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n ReactPortal,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxTopic,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string \| number;\n}\n\nexport type ComboBoxProps = {\n /*\n The element where the content of the `ComboBox` should be rendered via React Portal.\n /\n container?: Element;\n /\n The direction in which the combobox should open.\n /\n direction?: ComboBoxDirection;\n /\n Whether the combobox should be disabled.\n /\n isDisabled?: boolean;\n /\n The list of the items that should be displayed.\n /\n lists: IComboBoxItems[];\n /\n The maximum height of the combobox content.\n /\n maxHeight?: CSSProperties['maxHeight'];\n /\n Function that should be executed when an item is selected.\n /\n onSelect?: (comboboxItem: IComboBoxItem) => void;\n /\n A text that should be displayed when no item is selected.\n /\n placeholder: string;\n /\n An item that should be preselected.\n /\n selectedItem?: IComboBoxItem;\n /\n If true, the images of the items are displayed in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n /\n shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n lists,\n maxHeight = '280px',\n onSelect,\n placeholder,\n container = document.body,\n selectedItem,\n shouldShowRoundImage,\n shouldUseFullWidth = false,\n}) => {\n const [item, setItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement \| null>(null);\n\n const { browser } = useDevice();\n\n const isTouch = getIsTouch();\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n styledComboBoxElementRef.current &&\n !styledComboBoxElementRef.current.contains(event.target as Node)\n ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current) {\n const {\n left: comboBoxLeft,\n top: comboBoxTop,\n height,\n } = styledComboBoxElementRef.current.getBoundingClientRect();\n const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n const x = comboBoxLeft - containerLeft + container.scrollLeft;\n const y = comboBoxTop - containerTop + container.scrollTop;\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [container, direction]);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n /\n This function adds an event listener to the document to close the combobox when the user clicks outside of it\n /\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, styledComboBoxElementRef]);\n\n /\n This function sets the selected item\n /\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n setItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\n\n useEffect(() => {\n const currentContent = contentRef.current;\n\n if (portal && isAnimating && currentContent) {\n const scrollHeight = currentContent.scrollHeight ?? 0;\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n }\n }, [isAnimating, maxHeight, portal]);\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 if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem \| undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n return !!newSelectedItem;\n });\n\n if (!newSelectedItem) {\n return;\n }\n\n handleSetSelectedItem(newSelectedItem);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /\n This function calculates the greatest width\n /\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n\n const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n const width =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n // 40px = icon width + flex gap\n setMinWidth(\n shouldUseFullWidth\n ? width\n : calculateContentWidth([\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ]) +\n 45 +\n (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n (isAtLeastOneItemWithIconGiven ? 40 : 0),\n );\n }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n /\n This function sets the external selected item\n /\n useEffect(() => {\n setIsAnimating(false);\n setItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (item) {\n return item.imageUrl;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (item) {\n return item.icons;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n /\n This function resets the placeholder\n /\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (item) {\n text = item.text;\n }\n\n return text;\n }, [item, placeholder, selectedItem]);\n\n /\n This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map(({ groupName, list }) => (\n <div key={groupName ?? 'default-group'}>\n {groupName && lists.length > 1 && (\n <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n )}\n {list.map(\n ({\n imageUrl,\n icons,\n rightElement,\n subtext,\n suffixElement,\n text,\n value,\n }) => (\n <ComboBoxItem\n icons={icons}\n id={value}\n imageUrl={imageUrl}\n isSelected={selectedItem ? value === selectedItem.value : false}\n key={value}\n onSelect={handleSetSelectedItem}\n rightElement={rightElement}\n shouldShowRoundImage={shouldShowRoundImage}\n subtext={subtext}\n suffixElement={suffixElement}\n text={text}\n value={value}\n />\n ),\n )}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowRoundImage],\n );\n\n const bodyStyles = useMemo(() => {\n let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n if (direction === ComboBoxDirection.TOP) {\n styles = { ...styles, transform: 'translateY(-100%)' };\n }\n\n return styles;\n }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <StyledMotionComboBoxBody\n $browser={browser?.name}\n animate={{ height: 'fit-content', opacity: 1 }}\n $overflowY={overflowY}\n initial={{ height: 0, opacity: 0 }}\n exit={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $minWidth={minWidth}\n style={bodyStyles}\n $direction={direction}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxGroups}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n bodyStyles,\n browser?.name,\n comboBoxGroups,\n container,\n direction,\n isAnimating,\n maxHeight,\n minWidth,\n overflowY,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $shouldUseFullWidth={shouldUseFullWidth}\n $minWidth={minWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n >\n <StyledComboBoxPlaceholder $shouldReduceOpacity={!selectedItem && !item}>\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {placeholderText}\n {item && item.suffixElement && item.suffixElement}\n </StyledComboBoxPlaceholder>\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n direction,\n handleHeaderClick,\n isAnimating,\n isDisabled,\n isTouch,\n item,\n minWidth,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n portal,\n selectedItem,\n shouldShowRoundImage,\n shouldUseFullWidth,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/expandable-content/ExpandableContent.js CHANGED Viewed

@@ -9,6 +9,7 @@ const ExpandableContent = _ref => {
   return useMemo(() => /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, /*#__PURE__*/React.createElement(StyledMotionExpandableContent, {
+    $isOpen: isOpen,
     animate: {
       height: isOpen ? 'auto' : '0px'
     },

package/lib/esm/components/expandable-content/ExpandableContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandableContent.js","names":["AnimatePresence","React","useMemo","StyledMotionExpandableContent","ExpandableContent","_ref","children","isOpen","createElement","initial","animate","height","transition","duration","type","displayName"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n /*\n The children that should be animated.\n /\n children: ReactNode;\n /\n Whether the content is expanded.\n */\n isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen }) =>\n useMemo(\n () => (\n <AnimatePresence initial={false}>\n <StyledMotionExpandableContent\n animate={{ height: isOpen ? 'auto' : '0px' }}\n transition={{ duration: 0.2, type: 'tween' }}\n >\n {children}\n </StyledMotionExpandableContent>\n </AnimatePresence>\n ),\n [children, isOpen],\n );\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AACrD,SAASC,6BAA6B,QAAQ,4BAA4B;AAa1E,MAAMC,iBAA6C,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAO,CAAC,GAAAF,IAAA;EAAA,OACvEH,OAAO,CACH,mBACID,KAAA,CAAAO,aAAA,CAACR,eAAe;IAACS,OAAO,EAAE;EAAM,gBAC5BR,KAAA,CAAAO,aAAA,CAACL,6BAA6B;IAC1BO,OAAO,EAAE;MAAEC,MAAM,~~EAAEJ~~,MAAM,GAAG,MAAM,GAAG;IAAM,CAAE;~~IAC7CK~~,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ;EAAE,~~GAE5CR~~,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,CACrB,CAAC;AAAA;AAELH,iBAAiB,~~CAACW~~,WAAW,GAAG,mBAAmB;AAEnD,~~eAAeX~~,iBAAiB","ignoreList":[]}
1	+ {"version":3,"file":"ExpandableContent.js","names":["AnimatePresence","React","useMemo","StyledMotionExpandableContent","ExpandableContent","_ref","children","isOpen","createElement","initial","$isOpen","animate","height","transition","duration","type","displayName"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n /*\n The children that should be animated.\n /\n children: ReactNode;\n /\n Whether the content is expanded.\n */\n isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen }) =>\n useMemo(\n () => (\n <AnimatePresence initial={false}>\n <StyledMotionExpandableContent\n $isOpen={isOpen}\n animate={{ height: isOpen ? 'auto' : '0px' }}\n transition={{ duration: 0.2, type: 'tween' }}\n >\n {children}\n </StyledMotionExpandableContent>\n </AnimatePresence>\n ),\n [children, isOpen],\n );\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AACrD,SAASC,6BAA6B,QAAQ,4BAA4B;AAa1E,MAAMC,iBAA6C,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAO,CAAC,GAAAF,IAAA;EAAA,OACvEH,OAAO,CACH,mBACID,KAAA,CAAAO,aAAA,CAACR,eAAe;IAACS,OAAO,EAAE;EAAM,gBAC5BR,KAAA,CAAAO,aAAA,CAACL,6BAA6B;IAC1BO,OAAO,EAAEH,MAAO;IAChBI,OAAO,EAAE;MAAEC,MAAM,EAAEL,MAAM,GAAG,MAAM,GAAG;IAAM,CAAE;IAC7CM,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ;EAAE,GAE5CT,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,CACrB,CAAC;AAAA;AAELH,iBAAiB,CAACY,WAAW,GAAG,mBAAmB;AAEnD,eAAeZ,iBAAiB","ignoreList":[]}

package/lib/esm/components/expandable-content/ExpandableContent.styles.js CHANGED Viewed

@@ -1,6 +1,11 @@
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
 export const StyledMotionExpandableContent = styled(motion.div)`
-    overflow: hidden;
+    overflow: ${_ref => {
+  let {
+    $isOpen
+  } = _ref;
+  return $isOpen ? 'visible' : 'hidden';
+}};
 `;
 //# sourceMappingURL=ExpandableContent.styles.js.map

package/lib/esm/components/expandable-content/ExpandableContent.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandableContent.styles.js","names":["motion","styled","StyledMotionExpandableContent","div"],"sources":["../../../../src/components/expandable-content/ExpandableContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionExpandableContent = styled(motion.div)`\n overflow: hidden;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;~~AAEtC~~,OAAO,MAAMC,6BAA6B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;~~AAC/D~~;~~AACA~~,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ExpandableContent.styles.js","names":["motion","styled","StyledMotionExpandableContent","div","_ref","$isOpen"],"sources":["../../../../src/components/expandable-content/ExpandableContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\ntype StyledMotionExpandableContentProps = {\n $isOpen: boolean;\n};\n\nexport const StyledMotionExpandableContent = styled(motion.div)<StyledMotionExpandableContentProps>`\n overflow: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAMtC,OAAO,MAAMC,6BAA6B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqC;AACnG,gBAAgBC,IAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,IAAA;EAAA,OAAMC,OAAO,GAAG,SAAS,GAAG,QAAQ;AAAA,CAAC;AACjE,CAAC","ignoreList":[]}

package/lib/esm/components/file-input/FileInput.js CHANGED Viewed

@@ -16,6 +16,7 @@ const FileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     maxFiles,
     onRemove,
     files,
+    maxFileSizeInMB,
     onAdd,
     fileSelectionPlaceholder = 'Dateien hochladen',
     imageSelectPlaceholder
@@ -154,10 +155,11 @@ const FileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
     const newFiles = await selectFiles({
       multiple: true,
-      type: fileTypes
+      type: fileTypes,
+      maxFileSizeInMB
     });
     handleAddFiles(newFiles);
-  }, [fileTypes, handleAddFiles, isDisabled]);
+  }, [fileTypes, handleAddFiles, isDisabled, maxFileSizeInMB]);
   const handleDrop = useCallback(e => {
     e.preventDefault();
     const draggedFiles = Array.from(e.dataTransfer.files);

package/lib/esm/components/file-input/FileInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useImperativeHandle","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","selectFiles","Icon","List","FileListItem","StyledFileInput","StyledFileInputContainer","StyledFileInputText","StyledFileInputWrapper","StyledMotionFileInputList","StyledUploadedFilesList","FileInput","_ref","ref","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","internalFiles","setInternalFiles","internalImages","setInternalImages","handleInputClear","clear","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","filteredImages","url","isDisabled","handleImageSelectionClick","buttonType","result","dialogInput","upload","buttons","text","initialView","type","MODULE","system","scope","module","open","handleFileSelectionClick","multiple","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","content","combinedFiles","items","map","createElement","animate","height","opacity","exit","key","transition","duration","fileType","undefined","fileSize","size","uploadedFiles","cutFiles","splice","_ref2","id","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","initial","$shouldShowBorder","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n DragEvent,\n forwardRef,\n ReactElement,\n useCallback,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport type { FileInputFileItem, ImageDialogResult } from '../../types/fileInput';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n StyledFileInput,\n StyledFileInputContainer,\n StyledFileInputText,\n StyledFileInputWrapper,\n StyledMotionFileInputList,\n StyledUploadedFilesList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n /*\n Already uploaded files to display.\n /\n files?: FileInputFileItem[];\n /\n An array of icons that should be displayed inside the FileInput\n /\n fileSelectionIcons?: string[];\n /\n The text that should be displayed inside the FileInput.\n /\n fileSelectionPlaceholder?: string;\n /\n The filetypes that could be selected. Example for multiple types: 'image/, video/'.\n /\n fileTypes?: string;\n /\n The icon of the image selection.\n /\n imageSelectIcons?: string[];\n /\n If set, pictures can be select via Pixabay.\n /\n imageSelectPlaceholder?: string;\n /\n The maximum amount of Files that can be uploaded.\n /\n maxFiles?: number;\n /\n A function to be executed when files are added.\n /\n onAdd?: (files: File[] \| string[]) => void;\n /\n Function to be executed when the maximum amount of Files are reached.\n /\n onMaxFilesReached?: () => void;\n /\n A function to be executed when a file is removed.\n */\n onRemove?: (file: File \| FileInputFileItem \| string) => void;\n};\n\ntype DialogInput = {\n upload: boolean;\n buttons: {\n text: string;\n buttonType: number;\n }[];\n initialView: string;\n};\n\nexport type FileInputRef = {\n clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n (\n {\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n onMaxFilesReached,\n maxFiles,\n onRemove,\n files,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n },\n ref,\n ) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const [internalImages, setInternalImages] = useState<string[]>([]);\n\n const handleInputClear = () => {\n setInternalFiles([]);\n setInternalImages([]);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n clear: handleInputClear,\n }),\n [],\n );\n\n const handleAddImages = useCallback(\n (images: string[]) => {\n const newImages: string[] = [];\n\n images.forEach((image) => {\n if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n newImages.push(image);\n }\n });\n\n let tmp = newImages;\n\n if (maxFiles) {\n tmp = newImages.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalImages((prevState) => [...prevState, ...tmp]);\n },\n [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n const newFileItems: File[] = [];\n\n newFiles.forEach((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return;\n }\n\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalFiles((prevState) => [...prevState, ...tmp]);\n },\n [fileTypes, files?.length, internalFiles, internalImages.length, maxFiles, onAdd],\n );\n\n const handleDeleteFile = useCallback(\n (fileName?: string) => {\n let fileToDelete: File \| FileInputFileItem \| string \| undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === fileName) {\n fileToDelete = file;\n }\n\n return name !== fileName;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete) {\n const filteredImages = internalImages.filter((image) => {\n if (image === fileName) {\n fileToDelete = image;\n }\n\n return image !== fileName;\n });\n\n setInternalImages(filteredImages);\n }\n\n if (!fileToDelete) {\n files?.forEach((file) => {\n if (file.url === fileName \|\| file.name === fileName) {\n fileToDelete = file;\n }\n });\n }\n\n if (!fileToDelete \|\| typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [files, internalFiles, internalImages, onRemove],\n );\n\n const isDisabled = useMemo(() => {\n if (maxFiles) {\n if (internalFiles.length + internalImages.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, internalImages.length, maxFiles, onMaxFilesReached]);\n\n const handleImageSelectionClick = useCallback(async () => {\n if (isDisabled) {\n return;\n }\n\n const { buttonType, result } = (await createDialog<DialogInput>({\n dialogInput: {\n upload: true,\n buttons: [\n { text: 'hello', buttonType: 1 },\n { text: 'can', buttonType: -1 },\n ],\n initialView: 'pixabay',\n },\n type: DialogType.MODULE,\n system: {\n url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n scope: 'dialog_image_editor',\n module: './ImageEditorEntry',\n },\n buttons: [],\n }).open()) as ImageDialogResult;\n\n if (buttonType === 1 && result?.url) {\n handleAddImages([result.url]);\n }\n }, [handleAddImages, isDisabled]);\n\n const handleFileSelectionClick = useCallback(async () => {\n if (isDisabled) {\n return;\n }\n\n const newFiles = await selectFiles({\n multiple: true,\n type: fileTypes,\n });\n\n handleAddFiles(newFiles);\n }, [fileTypes, handleAddFiles, isDisabled]);\n\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n const draggedFiles = Array.from(e.dataTransfer.files);\n\n handleAddFiles(draggedFiles);\n },\n [handleAddFiles],\n );\n\n const content = useMemo(() => {\n const combinedFiles = [...internalImages, ...internalFiles];\n\n const items: ReactElement[] = combinedFiles.map((file) => (\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={typeof file === 'string' ? file : file.name}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem\n fileType={typeof file !== 'string' ? file.type : undefined}\n fileName={typeof file !== 'string' ? file.name : undefined}\n fileSize={typeof file !== 'string' ? file.size : undefined}\n url={typeof file === 'string' ? file : undefined}\n onRemove={handleDeleteFile}\n />\n </StyledMotionFileInputList>\n ));\n\n return items;\n }, [handleDeleteFile, internalFiles, internalImages]);\n\n const uploadedFiles = useMemo(() => {\n const items: ReactElement[] = [];\n\n const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;\n\n cutFiles?.forEach(({ url, id, name }) => {\n items.push(\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={id}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem url={url} onRemove={handleDeleteFile} fileName={name} />\n </StyledMotionFileInputList>,\n );\n });\n\n return items;\n }, [files, handleDeleteFile, maxFiles]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <StyledFileInputWrapper $isDisabled={isDisabled}>\n <StyledFileInputContainer\n onClick={() => void handleFileSelectionClick()}\n onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n >\n <Icon icons={fileSelectionIcons} />\n <StyledFileInputText>{fileSelectionPlaceholder}</StyledFileInputText>\n </StyledFileInputContainer>\n {imageSelectPlaceholder && (\n <StyledFileInputContainer\n $isImageSelection\n onClick={() => void handleImageSelectionClick()}\n >\n <Icon icons={imageSelectIcons} />\n <StyledFileInputText>{imageSelectPlaceholder}</StyledFileInputText>\n </StyledFileInputContainer>\n )}\n </StyledFileInputWrapper>\n <List>\n <AnimatePresence initial={false}>{content}</AnimatePresence>\n </List>\n {uploadedFiles.length > 0 && (\n <StyledUploadedFilesList $shouldShowBorder={content.length > 0}>\n <List>\n <AnimatePresence initial={false}>{uploadedFiles}</AnimatePresence>\n </List>\n </StyledUploadedFilesList>\n )}\n </StyledFileInput>\n ),\n [\n isDisabled,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectPlaceholder,\n imageSelectIcons,\n content,\n uploadedFiles,\n handleFileSelectionClick,\n handleDrop,\n handleImageSelectionClick,\n ],\n );\n },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"FileInput.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useImperativeHandle","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","selectFiles","Icon","List","FileListItem","StyledFileInput","StyledFileInputContainer","StyledFileInputText","StyledFileInputWrapper","StyledMotionFileInputList","StyledUploadedFilesList","FileInput","_ref","ref","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","internalFiles","setInternalFiles","internalImages","setInternalImages","handleInputClear","clear","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","filteredImages","url","isDisabled","handleImageSelectionClick","buttonType","result","dialogInput","upload","buttons","text","initialView","type","MODULE","system","scope","module","open","handleFileSelectionClick","multiple","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","content","combinedFiles","items","map","createElement","animate","height","opacity","exit","key","transition","duration","fileType","undefined","fileSize","size","uploadedFiles","cutFiles","splice","_ref2","id","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","initial","$shouldShowBorder","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n DragEvent,\n forwardRef,\n ReactElement,\n useCallback,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport type { FileInputFileItem, ImageDialogResult } from '../../types/fileInput';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n StyledFileInput,\n StyledFileInputContainer,\n StyledFileInputText,\n StyledFileInputWrapper,\n StyledMotionFileInputList,\n StyledUploadedFilesList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n /*\n Already uploaded files to display.\n /\n files?: FileInputFileItem[];\n /\n An array of icons that should be displayed inside the FileInput\n /\n fileSelectionIcons?: string[];\n /\n The text that should be displayed inside the FileInput.\n /\n fileSelectionPlaceholder?: string;\n /\n The filetypes that could be selected. Example for multiple types: 'image/, video/'.\n /\n fileTypes?: string;\n /\n The icon of the image selection.\n /\n imageSelectIcons?: string[];\n /\n If set, pictures can be select via Pixabay.\n /\n imageSelectPlaceholder?: string;\n /\n The maximum amount of Files that can be uploaded.\n /\n maxFiles?: number;\n /\n The maximum size of a file in MB.\n /\n maxFileSizeInMB?: number;\n /\n A function to be executed when files are added.\n /\n onAdd?: (files: File[] \| string[]) => void;\n /\n Function to be executed when the maximum amount of Files are reached.\n /\n onMaxFilesReached?: () => void;\n /\n A function to be executed when a file is removed.\n */\n onRemove?: (file: File \| FileInputFileItem \| string) => void;\n};\n\ntype DialogInput = {\n upload: boolean;\n buttons: {\n text: string;\n buttonType: number;\n }[];\n initialView: string;\n};\n\nexport type FileInputRef = {\n clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n (\n {\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n onMaxFilesReached,\n maxFiles,\n onRemove,\n files,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n },\n ref,\n ) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const [internalImages, setInternalImages] = useState<string[]>([]);\n\n const handleInputClear = () => {\n setInternalFiles([]);\n setInternalImages([]);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n clear: handleInputClear,\n }),\n [],\n );\n\n const handleAddImages = useCallback(\n (images: string[]) => {\n const newImages: string[] = [];\n\n images.forEach((image) => {\n if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n newImages.push(image);\n }\n });\n\n let tmp = newImages;\n\n if (maxFiles) {\n tmp = newImages.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalImages((prevState) => [...prevState, ...tmp]);\n },\n [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n const newFileItems: File[] = [];\n\n newFiles.forEach((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return;\n }\n\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalFiles((prevState) => [...prevState, ...tmp]);\n },\n [fileTypes, files?.length, internalFiles, internalImages.length, maxFiles, onAdd],\n );\n\n const handleDeleteFile = useCallback(\n (fileName?: string) => {\n let fileToDelete: File \| FileInputFileItem \| string \| undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === fileName) {\n fileToDelete = file;\n }\n\n return name !== fileName;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete) {\n const filteredImages = internalImages.filter((image) => {\n if (image === fileName) {\n fileToDelete = image;\n }\n\n return image !== fileName;\n });\n\n setInternalImages(filteredImages);\n }\n\n if (!fileToDelete) {\n files?.forEach((file) => {\n if (file.url === fileName \|\| file.name === fileName) {\n fileToDelete = file;\n }\n });\n }\n\n if (!fileToDelete \|\| typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [files, internalFiles, internalImages, onRemove],\n );\n\n const isDisabled = useMemo(() => {\n if (maxFiles) {\n if (internalFiles.length + internalImages.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, internalImages.length, maxFiles, onMaxFilesReached]);\n\n const handleImageSelectionClick = useCallback(async () => {\n if (isDisabled) {\n return;\n }\n\n const { buttonType, result } = (await createDialog<DialogInput>({\n dialogInput: {\n upload: true,\n buttons: [\n { text: 'hello', buttonType: 1 },\n { text: 'can', buttonType: -1 },\n ],\n initialView: 'pixabay',\n },\n type: DialogType.MODULE,\n system: {\n url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n scope: 'dialog_image_editor',\n module: './ImageEditorEntry',\n },\n buttons: [],\n }).open()) as ImageDialogResult;\n\n if (buttonType === 1 && result?.url) {\n handleAddImages([result.url]);\n }\n }, [handleAddImages, isDisabled]);\n\n const handleFileSelectionClick = useCallback(async () => {\n if (isDisabled) {\n return;\n }\n\n const newFiles = await selectFiles({\n multiple: true,\n type: fileTypes,\n maxFileSizeInMB,\n });\n\n handleAddFiles(newFiles);\n }, [fileTypes, handleAddFiles, isDisabled, maxFileSizeInMB]);\n\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n const draggedFiles = Array.from(e.dataTransfer.files);\n\n handleAddFiles(draggedFiles);\n },\n [handleAddFiles],\n );\n\n const content = useMemo(() => {\n const combinedFiles = [...internalImages, ...internalFiles];\n\n const items: ReactElement[] = combinedFiles.map((file) => (\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={typeof file === 'string' ? file : file.name}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem\n fileType={typeof file !== 'string' ? file.type : undefined}\n fileName={typeof file !== 'string' ? file.name : undefined}\n fileSize={typeof file !== 'string' ? file.size : undefined}\n url={typeof file === 'string' ? file : undefined}\n onRemove={handleDeleteFile}\n />\n </StyledMotionFileInputList>\n ));\n\n return items;\n }, [handleDeleteFile, internalFiles, internalImages]);\n\n const uploadedFiles = useMemo(() => {\n const items: ReactElement[] = [];\n\n const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;\n\n cutFiles?.forEach(({ url, id, name }) => {\n items.push(\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={id}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem url={url} onRemove={handleDeleteFile} fileName={name} />\n </StyledMotionFileInputList>,\n );\n });\n\n return items;\n }, [files, handleDeleteFile, maxFiles]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <StyledFileInputWrapper $isDisabled={isDisabled}>\n <StyledFileInputContainer\n onClick={() => void handleFileSelectionClick()}\n onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n >\n <Icon icons={fileSelectionIcons} />\n <StyledFileInputText>{fileSelectionPlaceholder}</StyledFileInputText>\n </StyledFileInputContainer>\n {imageSelectPlaceholder && (\n <StyledFileInputContainer\n $isImageSelection\n onClick={() => void handleImageSelectionClick()}\n >\n <Icon icons={imageSelectIcons} />\n <StyledFileInputText>{imageSelectPlaceholder}</StyledFileInputText>\n </StyledFileInputContainer>\n )}\n </StyledFileInputWrapper>\n <List>\n <AnimatePresence initial={false}>{content}</AnimatePresence>\n </List>\n {uploadedFiles.length > 0 && (\n <StyledUploadedFilesList $shouldShowBorder={content.length > 0}>\n <List>\n <AnimatePresence initial={false}>{uploadedFiles}</AnimatePresence>\n </List>\n </StyledUploadedFilesList>\n )}\n </StyledFileInput>\n ),\n [\n isDisabled,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectPlaceholder,\n imageSelectIcons,\n content,\n uploadedFiles,\n handleFileSelectionClick,\n handleDrop,\n handleImageSelectionClick,\n ],\n );\n },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}