@chayns-components/core 5.0.0-beta.574 → 5.0.0-beta.576

package/lib/components/accordion/Accordion.js

@@ -1,6 +1,7 @@
 import { AnimatePresence, MotionConfig } from 'framer-motion';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useUuid } from '../../hooks/uuid';
+import { AreaContext } from '../area-provider/AreaContextProvider';
 import AccordionBody from './accordion-body/AccordionBody';
 import { AccordionGroupContext } from './accordion-group/AccordionGroup';
 import AccordionHead from './accordion-head/AccordionHead';
@@ -139,7 +140,11 @@ const Accordion = _ref => {
     maxHeight: bodyMaxHeight,
     onScroll: onBodyScroll,
     shouldHideBody: shouldRenderClosed && !isOpen
-  }, children)))));
+  }, /*#__PURE__*/React.createElement(AreaContext.Provider, {
+    value: {
+      shouldChangeColor: true
+    }
+  }, children))))));
 };
 Accordion.displayName = 'Accordion';
 export default Accordion;

package/lib/components/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AccordionBody","AccordionGroupContext","AccordionHead","StyledAccordion","AccordionContext","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","openAccordionUuid","updateOpenAccordionUuid","isParentWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","createElement","className","$isOpen","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","Provider","value","transition","type","onClick","initial","maxHeight","onScroll","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} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } 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 that is executed when the accordion will be opened.\n     */\n    onOpen?: 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     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * Icon to be displayed on the right side in the search input\n     */\n    searchIcon?: string[];\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\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    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    searchValue,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    shouldRenderClosed = false,\n    shouldRotateIcon = true,\n    title,\n    titleElement,\n}) => {\n    const { isWrapped, openAccordionUuid, updateOpenAccordionUuid } =\n        useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\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    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    return (\n        <StyledAccordion\n            className=\"beta-chayns-accordion\"\n            $isOpen={isOpen}\n            $isParentWrapped={isParentWrapped}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBackground={shouldHideBackground}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\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                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\n                        searchValue={searchValue}\n                        shouldRotateIcon={shouldRotateIcon}\n                        title={title}\n                        titleElement={titleElement}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                {children}\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","StyledAccordion","AccordionContext","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","openAccordionUuid","updateOpenAccordionUuid","isParentWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","createElement","className","$isOpen","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","Provider","value","transition","type","onClick","initial","maxHeight","onScroll","shouldHideBody","shouldChangeColor","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} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } 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 that is executed when the accordion will be opened.\n     */\n    onOpen?: 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     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * Icon to be displayed on the right side in the search input\n     */\n    searchIcon?: string[];\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\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    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    searchValue,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    shouldRenderClosed = false,\n    shouldRotateIcon = true,\n    title,\n    titleElement,\n}) => {\n    const { isWrapped, openAccordionUuid, updateOpenAccordionUuid } =\n        useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\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    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    return (\n        <StyledAccordion\n            className=\"beta-chayns-accordion\"\n            $isOpen={isOpen}\n            $isParentWrapped={isParentWrapped}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBackground={shouldHideBackground}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\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                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\n                        searchValue={searchValue}\n                        shouldRotateIcon={shouldRotateIcon}\n                        title={title}\n                        titleElement={titleElement}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                <AreaContext.Provider value={{ shouldChangeColor: true }}>\n                                    {children}\n                                </AreaContext.Provider>\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/area-provider/AreaContextProvider.d.ts

@@ -0,0 +1,14 @@
+import React, { type ReactNode } from 'react';
+interface IAreaProviderContext {
+    shouldChangeColor?: boolean;
+}
+export declare const AreaContext: React.Context<IAreaProviderContext>;
+interface AreaContextProviderProps {
+    children: ReactNode;
+    shouldChangeColor?: boolean;
+}
+declare const AreaContextProvider: {
+    ({ children, shouldChangeColor }: AreaContextProviderProps): React.JSX.Element;
+    displayName: string;
+};
+export default AreaContextProvider;

package/lib/components/area-provider/AreaContextProvider.js

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react';
+export const AreaContext = /*#__PURE__*/React.createContext({
+  shouldChangeColor: undefined
+});
+AreaContext.displayName = 'AreaContext';
+const AreaContextProvider = _ref => {
+  let {
+    children,
+    shouldChangeColor = true
+  } = _ref;
+  const providerValue = useMemo(() => ({
+    shouldChangeColor
+  }), [shouldChangeColor]);
+  return /*#__PURE__*/React.createElement(AreaContext.Provider, {
+    value: providerValue
+  }, children);
+};
+AreaContextProvider.displayName = 'AreaContextProvider';
+export default AreaContextProvider;
+//# sourceMappingURL=AreaContextProvider.js.map

package/lib/components/area-provider/AreaContextProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaContextProvider.js","names":["React","useMemo","AreaContext","createContext","shouldChangeColor","undefined","displayName","AreaContextProvider","_ref","children","providerValue","createElement","Provider","value"],"sources":["../../../src/components/area-provider/AreaContextProvider.tsx"],"sourcesContent":["import React, { useMemo, type ReactNode } from 'react';\n\ninterface IAreaProviderContext {\n    shouldChangeColor?: boolean;\n}\n\nexport const AreaContext = React.createContext<IAreaProviderContext>({\n    shouldChangeColor: undefined,\n});\n\nAreaContext.displayName = 'AreaContext';\n\ninterface AreaContextProviderProps {\n    children: ReactNode;\n    shouldChangeColor?: boolean;\n}\n\nconst AreaContextProvider = ({ children, shouldChangeColor = true }: AreaContextProviderProps) => {\n    const providerValue = useMemo<IAreaProviderContext>(\n        () => ({\n            shouldChangeColor,\n        }),\n        [shouldChangeColor],\n    );\n\n    return <AreaContext.Provider value={providerValue}>{children}</AreaContext.Provider>;\n};\n\nAreaContextProvider.displayName = 'AreaContextProvider';\n\nexport default AreaContextProvider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAwB,OAAO;AAMtD,OAAO,MAAMC,WAAW,gBAAGF,KAAK,CAACG,aAAa,CAAuB;EACjEC,iBAAiB,EAAEC;AACvB,CAAC,CAAC;AAEFH,WAAW,CAACI,WAAW,GAAG,aAAa;AAOvC,MAAMC,mBAAmB,GAAGC,IAAA,IAAsE;EAAA,IAArE;IAAEC,QAAQ;IAAEL,iBAAiB,GAAG;EAA+B,CAAC,GAAAI,IAAA;EACzF,MAAME,aAAa,GAAGT,OAAO,CACzB,OAAO;IACHG;EACJ,CAAC,CAAC,EACF,CAACA,iBAAiB,CACtB,CAAC;EAED,oBAAOJ,KAAA,CAAAW,aAAA,CAACT,WAAW,CAACU,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAAED,QAA+B,CAAC;AACxF,CAAC;AAEDF,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEvD,eAAeC,mBAAmB","ignoreList":[]}

package/lib/components/content-card/ContentCard.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useContext, useMemo } from 'react';
 import { ContentCardType } from '../../types/contentCard';
+import AreaContextProvider, { AreaContext } from '../area-provider/AreaContextProvider';
 import { StyledContentCard } from './ContentCard.styles';
 const ContentCard = _ref => {
   let {
@@ -7,10 +8,15 @@ const ContentCard = _ref => {
     onClick,
     type = ContentCardType.Default
   } = _ref;
+  const areaProvider = useContext(AreaContext);
+  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   return /*#__PURE__*/React.createElement(StyledContentCard, {
     onClick: onClick,
-    $type: type
-  }, children);
+    $type: type,
+    $shouldChangeColor: shouldChangeColor
+  }, /*#__PURE__*/React.createElement(AreaContextProvider, {
+    shouldChangeColor: !shouldChangeColor
+  }, children));
 };
 ContentCard.displayName = 'ContentCard';
 export default ContentCard;

package/lib/components/content-card/ContentCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentCard.js","names":["React","ContentCardType","StyledContentCard","ContentCard","_ref","children","onClick","type","Default","createElement","$type","displayName"],"sources":["../../../src/components/content-card/ContentCard.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { ContentCardType } from '../../types/contentCard';\nimport { StyledContentCard } from './ContentCard.styles';\n\nexport type ContentCardProps = {\n    /**\n     * The content of the content card\n     */\n    children?: ReactNode;\n    /**\n     * The onClick event handler\n     */\n    onClick?: () => void;\n    /**\n     * The type of the content card\n     */\n    type?: ContentCardType;\n};\n\nconst ContentCard: FC<ContentCardProps> = ({\n    children,\n    onClick,\n    type = ContentCardType.Default,\n}) => (\n    <StyledContentCard onClick={onClick} $type={type}>\n        {children}\n    </StyledContentCard>\n);\n\nContentCard.displayName = 'ContentCard';\n\nexport default ContentCard;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAyB,OAAO;AAC5C,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,iBAAiB,QAAQ,sBAAsB;AAiBxD,MAAMC,WAAiC,GAAGC,IAAA;EAAA,IAAC;IACvCC,QAAQ;IACRC,OAAO;IACPC,IAAI,GAAGN,eAAe,CAACO;EAC3B,CAAC,GAAAJ,IAAA;EAAA,oBACGJ,KAAA,CAAAS,aAAA,CAACP,iBAAiB;IAACI,OAAO,EAAEA,OAAQ;IAACI,KAAK,EAAEH;EAAK,GAC5CF,QACc,CAAC;AAAA,CACvB;AAEDF,WAAW,CAACQ,WAAW,GAAG,aAAa;AAEvC,eAAeR,WAAW","ignoreList":[]}
+{"version":3,"file":"ContentCard.js","names":["React","useContext","useMemo","ContentCardType","AreaContextProvider","AreaContext","StyledContentCard","ContentCard","_ref","children","onClick","type","Default","areaProvider","shouldChangeColor","createElement","$type","$shouldChangeColor","displayName"],"sources":["../../../src/components/content-card/ContentCard.tsx"],"sourcesContent":["import React, { FC, ReactNode, useContext, useMemo } from 'react';\nimport { ContentCardType } from '../../types/contentCard';\nimport AreaContextProvider, { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledContentCard } from './ContentCard.styles';\n\nexport type ContentCardProps = {\n    /**\n     * The content of the content card\n     */\n    children?: ReactNode;\n    /**\n     * The onClick event handler\n     */\n    onClick?: () => void;\n    /**\n     * The type of the content card\n     */\n    type?: ContentCardType;\n};\n\nconst ContentCard: FC<ContentCardProps> = ({\n    children,\n    onClick,\n    type = ContentCardType.Default,\n}) => {\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    return (\n        <StyledContentCard onClick={onClick} $type={type} $shouldChangeColor={shouldChangeColor}>\n            <AreaContextProvider shouldChangeColor={!shouldChangeColor}>\n                {children}\n            </AreaContextProvider>\n        </StyledContentCard>\n    );\n};\n\nContentCard.displayName = 'ContentCard';\n\nexport default ContentCard;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AACjE,SAASC,eAAe,QAAQ,yBAAyB;AACzD,OAAOC,mBAAmB,IAAIC,WAAW,QAAQ,sCAAsC;AACvF,SAASC,iBAAiB,QAAQ,sBAAsB;AAiBxD,MAAMC,WAAiC,GAAGC,IAAA,IAIpC;EAAA,IAJqC;IACvCC,QAAQ;IACRC,OAAO;IACPC,IAAI,GAAGR,eAAe,CAACS;EAC3B,CAAC,GAAAJ,IAAA;EACG,MAAMK,YAAY,GAAGZ,UAAU,CAACI,WAAW,CAAC;EAE5C,MAAMS,iBAAiB,GAAGZ,OAAO,CAC7B,MAAMW,YAAY,CAACC,iBAAiB,IAAI,KAAK,EAC7C,CAACD,YAAY,CAACC,iBAAiB,CACnC,CAAC;EAED,oBACId,KAAA,CAAAe,aAAA,CAACT,iBAAiB;IAACI,OAAO,EAAEA,OAAQ;IAACM,KAAK,EAAEL,IAAK;IAACM,kBAAkB,EAAEH;EAAkB,gBACpFd,KAAA,CAAAe,aAAA,CAACX,mBAAmB;IAACU,iBAAiB,EAAE,CAACA;EAAkB,GACtDL,QACgB,CACN,CAAC;AAE5B,CAAC;AAEDF,WAAW,CAACW,WAAW,GAAG,aAAa;AAEvC,eAAeX,WAAW","ignoreList":[]}

package/lib/components/content-card/ContentCard.styles.d.ts

@@ -3,6 +3,7 @@ import { ContentCardType } from '../../types/contentCard';
 import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 type StyledContentCardProps = WithTheme<{
     $type: ContentCardType;
+    $shouldChangeColor: boolean;
 }>;
 export declare const StyledContentCard: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContentCardProps>>;
 export {};

package/lib/components/content-card/ContentCard.styles.js

@@ -7,24 +7,41 @@ export const StyledContentCard = styled.div`
   } = _ref;
   return theme.cardBorderRadius;
 }}px;
-    box-shadow: 0 2px 6px 0
-        rgba(0, 0, 0, ${_ref2 => {
+
+    ${_ref2 => {
   let {
-    theme
+    theme,
+    $shouldChangeColor
   } = _ref2;
-  return theme.cardShadow;
-}});
+  return !$shouldChangeColor && css`
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
+        `;
+}};
+
     padding: 8px 12px;
 
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.text;
+}};
+
     &:not(:last-child) {
         margin-bottom: 8px;
     }
 
-    ${_ref3 => {
+    ${_ref4 => {
   let {
     $type,
-    theme
-  } = _ref3;
+    theme,
+    $shouldChangeColor
+  } = _ref4;
+  if ($type === ContentCardType.Default && $shouldChangeColor) {
+    return css`
+                background-color: rgba(${theme['000-rgb']}, ${theme.cardBackgroundOpacity});
+            `;
+  }
   switch ($type) {
     case ContentCardType.Error:
       return css`

package/lib/components/content-card/ContentCard.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentCard.styles.js","names":["styled","css","ContentCardType","StyledContentCard","div","_ref","theme","cardBorderRadius","_ref2","cardShadow","_ref3","$type","Error","Success","Warning","cardBackgroundOpacity"],"sources":["../../../src/components/content-card/ContentCard.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ContentCardType } from '../../types/contentCard';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContentCardProps = WithTheme<{\n    $type: ContentCardType;\n}>;\n\nexport const StyledContentCard = styled.div<StyledContentCardProps>`\n    border-radius: ${({ theme }: StyledContentCardProps) => theme.cardBorderRadius}px;\n    box-shadow: 0 2px 6px 0\n        rgba(0, 0, 0, ${({ theme }: StyledContentCardProps) => theme.cardShadow});\n    padding: 8px 12px;\n\n    &:not(:last-child) {\n        margin-bottom: 8px;\n    }\n\n    ${({ $type, theme }: StyledContentCardProps) => {\n        switch ($type) {\n            case ContentCardType.Error:\n                return css`\n                    background-color: ${theme['red-4']};\n                    border: 1px solid ${theme['red-1']};\n                    color: #222;\n                `;\n            case ContentCardType.Success:\n                return css`\n                    background-color: ${theme['green-4']};\n                    border: 1px solid ${theme['green-1']};\n                    color: #222;\n                `;\n            case ContentCardType.Warning:\n                return css`\n                    background-color: ${theme['yellow-4']};\n                    border: 1px solid ${theme['yellow-1']};\n                    color: #222;\n                `;\n            default:\n                return css`\n                    background-color: rgba(\n                        ${theme['secondary-100-rgb']},\n                        ${theme.cardBackgroundOpacity}\n                    );\n                `;\n        }\n    }}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,yBAAyB;AAOzD,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAA4B;AACpE,qBAAqBC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,gBAAgB;AAAA,CAAC;AACnF;AACA,wBAAwBC,KAAA;EAAA,IAAC;IAAEF;EAA8B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,UAAU;AAAA,CAAC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAA8C;EAAA,IAA7C;IAAEC,KAAK;IAAEL;EAA8B,CAAC,GAAAI,KAAA;EACvC,QAAQC,KAAK;IACT,KAAKT,eAAe,CAACU,KAAK;MACtB,OAAOX,GAAI;AAC3B,wCAAwCK,KAAK,CAAC,OAAO,CAAE;AACvD,wCAAwCA,KAAK,CAAC,OAAO,CAAE;AACvD;AACA,iBAAiB;IACL,KAAKJ,eAAe,CAACW,OAAO;MACxB,OAAOZ,GAAI;AAC3B,wCAAwCK,KAAK,CAAC,SAAS,CAAE;AACzD,wCAAwCA,KAAK,CAAC,SAAS,CAAE;AACzD;AACA,iBAAiB;IACL,KAAKJ,eAAe,CAACY,OAAO;MACxB,OAAOb,GAAI;AAC3B,wCAAwCK,KAAK,CAAC,UAAU,CAAE;AAC1D,wCAAwCA,KAAK,CAAC,UAAU,CAAE;AAC1D;AACA,iBAAiB;IACL;MACI,OAAOL,GAAI;AAC3B;AACA,0BAA0BK,KAAK,CAAC,mBAAmB,CAAE;AACrD,0BAA0BA,KAAK,CAACS,qBAAsB;AACtD;AACA,iBAAiB;EACT;AACJ,CAAE;AACN,CAAC","ignoreList":[]}
+{"version":3,"file":"ContentCard.styles.js","names":["styled","css","ContentCardType","StyledContentCard","div","_ref","theme","cardBorderRadius","_ref2","$shouldChangeColor","cardShadow","_ref3","text","_ref4","$type","Default","cardBackgroundOpacity","Error","Success","Warning"],"sources":["../../../src/components/content-card/ContentCard.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ContentCardType } from '../../types/contentCard';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContentCardProps = WithTheme<{\n    $type: ContentCardType;\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledContentCard = styled.div<StyledContentCardProps>`\n    border-radius: ${({ theme }: StyledContentCardProps) => theme.cardBorderRadius}px;\n\n    ${({ theme, $shouldChangeColor }: StyledContentCardProps) =>\n        !$shouldChangeColor &&\n        css`\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n        `};\n\n    padding: 8px 12px;\n\n    color: ${({ theme }: StyledContentCardProps) => theme.text};\n\n    &:not(:last-child) {\n        margin-bottom: 8px;\n    }\n\n    ${({ $type, theme, $shouldChangeColor }: StyledContentCardProps) => {\n        if ($type === ContentCardType.Default && $shouldChangeColor) {\n            return css`\n                background-color: rgba(${theme['000-rgb']}, ${theme.cardBackgroundOpacity});\n            `;\n        }\n\n        switch ($type) {\n            case ContentCardType.Error:\n                return css`\n                    background-color: ${theme['red-4']};\n                    border: 1px solid ${theme['red-1']};\n                    color: #222;\n                `;\n            case ContentCardType.Success:\n                return css`\n                    background-color: ${theme['green-4']};\n                    border: 1px solid ${theme['green-1']};\n                    color: #222;\n                `;\n            case ContentCardType.Warning:\n                return css`\n                    background-color: ${theme['yellow-4']};\n                    border: 1px solid ${theme['yellow-1']};\n                    color: #222;\n                `;\n            default:\n                return css`\n                    background-color: rgba(\n                        ${theme['secondary-100-rgb']},\n                        ${theme.cardBackgroundOpacity}\n                    );\n                `;\n        }\n    }}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,yBAAyB;AAQzD,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAA4B;AACpE,qBAAqBC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,gBAAgB;AAAA,CAAC;AACnF;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEF,KAAK;IAAEG;EAA2C,CAAC,GAAAD,KAAA;EAAA,OACpD,CAACC,kBAAkB,IACnBR,GAAI;AACZ,oDAAoDK,KAAK,CAACI,UAAW;AACrE,SAAS;AAAA,CAAC;AACV;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEL;EAA8B,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAACM,IAAI;AAAA,CAAC;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAkE;EAAA,IAAjE;IAAEC,KAAK;IAAER,KAAK;IAAEG;EAA2C,CAAC,GAAAI,KAAA;EAC3D,IAAIC,KAAK,KAAKZ,eAAe,CAACa,OAAO,IAAIN,kBAAkB,EAAE;IACzD,OAAOR,GAAI;AACvB,yCAAyCK,KAAK,CAAC,SAAS,CAAE,KAAIA,KAAK,CAACU,qBAAsB;AAC1F,aAAa;EACL;EAEA,QAAQF,KAAK;IACT,KAAKZ,eAAe,CAACe,KAAK;MACtB,OAAOhB,GAAI;AAC3B,wCAAwCK,KAAK,CAAC,OAAO,CAAE;AACvD,wCAAwCA,KAAK,CAAC,OAAO,CAAE;AACvD;AACA,iBAAiB;IACL,KAAKJ,eAAe,CAACgB,OAAO;MACxB,OAAOjB,GAAI;AAC3B,wCAAwCK,KAAK,CAAC,SAAS,CAAE;AACzD,wCAAwCA,KAAK,CAAC,SAAS,CAAE;AACzD;AACA,iBAAiB;IACL,KAAKJ,eAAe,CAACiB,OAAO;MACxB,OAAOlB,GAAI;AAC3B,wCAAwCK,KAAK,CAAC,UAAU,CAAE;AAC1D,wCAAwCA,KAAK,CAAC,UAAU,CAAE;AAC1D;AACA,iBAAiB;IACL;MACI,OAAOL,GAAI;AAC3B;AACA,0BAA0BK,KAAK,CAAC,mBAAmB,CAAE;AACrD,0BAA0BA,KAAK,CAACU,qBAAsB;AACtD;AACA,iBAAiB;EACT;AACJ,CAAE;AACN,CAAC","ignoreList":[]}

package/lib/components/file-input/FileInput.d.ts

@@ -1,5 +1,10 @@
 import { FC } from 'react';
+import type { FileInputFileItem } from '../../types/fileInput';
 export type FileInputProps = {
+    /**
+     * Already uploaded files to display.
+     */
+    files?: FileInputFileItem[];
     /**
      * An array of icons that should be displayed inside the FileInput
      */
@@ -35,7 +40,7 @@ export type FileInputProps = {
     /**
      * A function to be executed when a file is removed.
      */
-    onRemove?: (file: File | string) => void;
+    onRemove?: (file: File | FileInputFileItem | string) => void;
 };
 declare const FileInput: FC<FileInputProps>;
 export default FileInput;

package/lib/components/file-input/FileInput.js

@@ -1,12 +1,12 @@
 import { createDialog, DialogType } from 'chayns-api';
 import { AnimatePresence } from 'framer-motion';
 import React, { useCallback, useMemo, useState } from 'react';
-import { filterDuplicateFile, filterDuplicateFileUrls } from '../../utils/file';
+import { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';
 import { selectFiles } from '../../utils/fileDialog';
 import Icon from '../icon/Icon';
 import List from '../list/List';
 import FileListItem from './file-list/FileListItem';
-import { StyledFileInput, StyledFileInputContainer, StyledFileInputText, StyledFileInputWrapper, StyledMotionFileInputList } from './FileInput.styles';
+import { StyledFileInput, StyledFileInputContainer, StyledFileInputText, StyledFileInputWrapper, StyledMotionFileInputList, StyledUploadedFilesList } from './FileInput.styles';
 const FileInput = _ref => {
   let {
     fileSelectionIcons = ['fa fa-upload'],
@@ -15,6 +15,7 @@ const FileInput = _ref => {
     onMaxFilesReached,
     maxFiles,
     onRemove,
+    files,
     onAdd,
     fileSelectionPlaceholder = 'Dateien hinzufügen',
     imageSelectPlaceholder
@@ -33,16 +34,22 @@ const FileInput = _ref => {
     });
     let tmp = newImages;
     if (maxFiles) {
-      tmp = newImages.slice(0, maxFiles - (internalFiles.length + internalImages.length));
+      tmp = newImages.slice(0, maxFiles - (internalFiles.length + internalImages.length + (files?.length ?? 0)));
     }
     if (tmp.length > 0 && typeof onAdd === 'function') {
       onAdd(tmp);
     }
     setInternalImages(prevState => [...prevState, ...tmp]);
-  }, [internalFiles.length, internalImages, maxFiles, onAdd]);
-  const handleAddFiles = useCallback(files => {
+  }, [files?.length, internalFiles.length, internalImages, maxFiles, onAdd]);
+  const handleAddFiles = useCallback(newFiles => {
     const newFileItems = [];
-    files.forEach(file => {
+    newFiles.forEach(file => {
+      if (fileTypes && !isValidFileType({
+        file,
+        types: fileTypes
+      })) {
+        return;
+      }
       if (file && !filterDuplicateFile({
         files: internalFiles,
         newFile: file
@@ -52,13 +59,13 @@ const FileInput = _ref => {
     });
     let tmp = newFileItems;
     if (maxFiles) {
-      tmp = newFileItems.slice(0, maxFiles - (internalFiles.length + internalImages.length));
+      tmp = newFileItems.slice(0, maxFiles - (internalFiles.length + internalImages.length + (files?.length ?? 0)));
     }
     if (tmp.length > 0 && typeof onAdd === 'function') {
       onAdd(tmp);
     }
     setInternalFiles(prevState => [...prevState, ...tmp]);
-  }, [internalFiles, internalImages.length, maxFiles, onAdd]);
+  }, [files?.length, internalFiles, internalImages.length, maxFiles, onAdd]);
   const handleDeleteFile = useCallback(fileName => {
     let fileToDelete;
     const filteredFiles = internalFiles.filter(file => {
@@ -80,11 +87,18 @@ const FileInput = _ref => {
       });
       setInternalImages(filteredImages);
     }
+    if (!fileToDelete) {
+      files?.forEach(file => {
+        if (file.url === fileName || file.name === fileName) {
+          fileToDelete = file;
+        }
+      });
+    }
     if (!fileToDelete || typeof onRemove !== 'function') {
       return;
     }
     onRemove(fileToDelete);
-  }, [internalFiles, internalImages, onRemove]);
+  }, [files, internalFiles, internalImages, onRemove]);
   const isDisabled = useMemo(() => {
     if (maxFiles) {
       if (internalFiles.length + internalImages.length >= maxFiles) {
@@ -131,11 +145,11 @@ const FileInput = _ref => {
     if (isDisabled) {
       return;
     }
-    const files = await selectFiles({
+    const newFiles = await selectFiles({
       multiple: true,
       type: fileTypes
     });
-    handleAddFiles(files);
+    handleAddFiles(newFiles);
   }, [fileTypes, handleAddFiles, isDisabled]);
   const handleDrop = useCallback(e => {
     e.preventDefault();
@@ -167,6 +181,37 @@ const FileInput = _ref => {
     })));
     return items;
   }, [handleDeleteFile, internalFiles, internalImages]);
+  const uploadedFiles = useMemo(() => {
+    const items = [];
+    const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;
+    cutFiles?.forEach(_ref2 => {
+      let {
+        url,
+        id,
+        name
+      } = _ref2;
+      items.push( /*#__PURE__*/React.createElement(StyledMotionFileInputList, {
+        animate: {
+          height: 'auto',
+          opacity: 1
+        },
+        exit: {
+          height: 0,
+          opacity: 0
+        },
+        key: id,
+        transition: {
+          duration: 0.25,
+          type: 'tween'
+        }
+      }, /*#__PURE__*/React.createElement(FileListItem, {
+        url: url,
+        onRemove: handleDeleteFile,
+        fileName: name
+      })));
+    });
+    return items;
+  }, [files, handleDeleteFile, maxFiles]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledFileInput, null, /*#__PURE__*/React.createElement(StyledFileInputWrapper, {
     $isDisabled: isDisabled
   }, /*#__PURE__*/React.createElement(StyledFileInputContainer, {
@@ -182,7 +227,11 @@ const FileInput = _ref => {
     icons: imageSelectIcons
   }), /*#__PURE__*/React.createElement(StyledFileInputText, null, imageSelectPlaceholder))), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
-  }, content))), [isDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, content, handleFileSelectionClick, handleDrop, handleImageSelectionClick]);
+  }, content)), uploadedFiles.length > 0 && /*#__PURE__*/React.createElement(StyledUploadedFilesList, {
+    $shouldShowBorder: content.length > 0
+  }, /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, uploadedFiles)))), [isDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, content, uploadedFiles, handleFileSelectionClick, handleDrop, handleImageSelectionClick]);
 };
 FileInput.displayName = 'FileInput';
 export default FileInput;

package/lib/components/file-input/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":["createDialog","DialogType","AnimatePresence","React","useCallback","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","selectFiles","Icon","List","FileListItem","StyledFileInput","StyledFileInputContainer","StyledFileInputText","StyledFileInputWrapper","StyledMotionFileInputList","FileInput","_ref","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","internalFiles","setInternalFiles","internalImages","setInternalImages","handleAddImages","images","newImages","forEach","image","files","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFileItems","file","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","filteredImages","isDisabled","handleImageSelectionClick","buttonType","result","dialogInput","upload","buttons","text","initialView","type","MODULE","system","url","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","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","initial","displayName"],"sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { DragEvent, FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { filterDuplicateFile, filterDuplicateFileUrls } 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} from './FileInput.styles';\n\nexport type FileInputProps = {\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 | string) => void;\n};\n\nconst FileInput: FC<FileInputProps> = ({\n    fileSelectionIcons = ['fa fa-upload'],\n    imageSelectIcons = ['ts-image'],\n    fileTypes,\n    onMaxFilesReached,\n    maxFiles,\n    onRemove,\n    onAdd,\n    fileSelectionPlaceholder = 'Dateien hinzufügen',\n    imageSelectPlaceholder,\n}) => {\n    const [internalFiles, setInternalFiles] = useState<File[]>([]);\n    const [internalImages, setInternalImages] = useState<string[]>([]);\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(0, maxFiles - (internalFiles.length + internalImages.length));\n            }\n\n            if (tmp.length > 0 && typeof onAdd === 'function') {\n                onAdd(tmp);\n            }\n\n            setInternalImages((prevState) => [...prevState, ...tmp]);\n        },\n        [internalFiles.length, internalImages, maxFiles, onAdd],\n    );\n\n    const handleAddFiles = useCallback(\n        (files: File[]) => {\n            const newFileItems: File[] = [];\n\n            files.forEach((file) => {\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 - (internalFiles.length + internalImages.length),\n                );\n            }\n\n            if (tmp.length > 0 && typeof onAdd === 'function') {\n                onAdd(tmp);\n            }\n\n            setInternalFiles((prevState) => [...prevState, ...tmp]);\n        },\n        [internalFiles, internalImages.length, maxFiles, onAdd],\n    );\n\n    const handleDeleteFile = useCallback(\n        (fileName?: string) => {\n            let fileToDelete: File | 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 || typeof onRemove !== 'function') {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [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({\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 files = await selectFiles({\n            multiple: true,\n            type: fileTypes,\n        });\n\n        handleAddFiles(files);\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    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\n                <List>\n                    <AnimatePresence initial={false}>{content}</AnimatePresence>\n                </List>\n            </StyledFileInput>\n        ),\n        [\n            isDisabled,\n            fileSelectionIcons,\n            fileSelectionPlaceholder,\n            imageSelectPlaceholder,\n            imageSelectIcons,\n            content,\n            handleFileSelectionClick,\n            handleDrop,\n            handleImageSelectionClick,\n        ],\n    );\n};\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,YAAY;AACrD,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAAiCC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAE1F,SAASC,mBAAmB,EAAEC,uBAAuB,QAAQ,kBAAkB;AAC/E,SAASC,WAAW,QAAQ,wBAAwB;AACpD,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,YAAY,MAAM,0BAA0B;AACnD,SACIC,eAAe,EACfC,wBAAwB,EACxBC,mBAAmB,EACnBC,sBAAsB,EACtBC,yBAAyB,QACtB,oBAAoB;AAyC3B,MAAMC,SAA6B,GAAGC,IAAA,IAUhC;EAAA,IAViC;IACnCC,kBAAkB,GAAG,CAAC,cAAc,CAAC;IACrCC,gBAAgB,GAAG,CAAC,UAAU,CAAC;IAC/BC,SAAS;IACTC,iBAAiB;IACjBC,QAAQ;IACRC,QAAQ;IACRC,KAAK;IACLC,wBAAwB,GAAG,oBAAoB;IAC/CC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAM,CAACU,aAAa,EAAEC,gBAAgB,CAAC,GAAGxB,QAAQ,CAAS,EAAE,CAAC;EAC9D,MAAM,CAACyB,cAAc,EAAEC,iBAAiB,CAAC,GAAG1B,QAAQ,CAAW,EAAE,CAAC;EAElE,MAAM2B,eAAe,GAAG7B,WAAW,CAC9B8B,MAAgB,IAAK;IAClB,MAAMC,SAAmB,GAAG,EAAE;IAE9BD,MAAM,CAACE,OAAO,CAAEC,KAAK,IAAK;MACtB,IAAI,CAAC7B,uBAAuB,CAAC;QAAE8B,KAAK,EAAEP,cAAc;QAAEQ,OAAO,EAAEF;MAAM,CAAC,CAAC,EAAE;QACrEF,SAAS,CAACK,IAAI,CAACH,KAAK,CAAC;MACzB;IACJ,CAAC,CAAC;IAEF,IAAII,GAAG,GAAGN,SAAS;IAEnB,IAAIX,QAAQ,EAAE;MACViB,GAAG,GAAGN,SAAS,CAACO,KAAK,CAAC,CAAC,EAAElB,QAAQ,IAAIK,aAAa,CAACc,MAAM,GAAGZ,cAAc,CAACY,MAAM,CAAC,CAAC;IACvF;IAEA,IAAIF,GAAG,CAACE,MAAM,GAAG,CAAC,IAAI,OAAOjB,KAAK,KAAK,UAAU,EAAE;MAC/CA,KAAK,CAACe,GAAG,CAAC;IACd;IAEAT,iBAAiB,CAAEY,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGH,GAAG,CAAC,CAAC;EAC5D,CAAC,EACD,CAACZ,aAAa,CAACc,MAAM,EAAEZ,cAAc,EAAEP,QAAQ,EAAEE,KAAK,CAC1D,CAAC;EAED,MAAMmB,cAAc,GAAGzC,WAAW,CAC7BkC,KAAa,IAAK;IACf,MAAMQ,YAAoB,GAAG,EAAE;IAE/BR,KAAK,CAACF,OAAO,CAAEW,IAAI,IAAK;MACpB,IAAIA,IAAI,IAAI,CAACxC,mBAAmB,CAAC;QAAE+B,KAAK,EAAET,aAAa;QAAEU,OAAO,EAAEQ;MAAK,CAAC,CAAC,EAAE;QACvED,YAAY,CAACN,IAAI,CAACO,IAAI,CAAC;MAC3B;IACJ,CAAC,CAAC;IAEF,IAAIN,GAAG,GAAGK,YAAY;IAEtB,IAAItB,QAAQ,EAAE;MACViB,GAAG,GAAGK,YAAY,CAACJ,KAAK,CACpB,CAAC,EACDlB,QAAQ,IAAIK,aAAa,CAACc,MAAM,GAAGZ,cAAc,CAACY,MAAM,CAC5D,CAAC;IACL;IAEA,IAAIF,GAAG,CAACE,MAAM,GAAG,CAAC,IAAI,OAAOjB,KAAK,KAAK,UAAU,EAAE;MAC/CA,KAAK,CAACe,GAAG,CAAC;IACd;IAEAX,gBAAgB,CAAEc,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGH,GAAG,CAAC,CAAC;EAC3D,CAAC,EACD,CAACZ,aAAa,EAAEE,cAAc,CAACY,MAAM,EAAEnB,QAAQ,EAAEE,KAAK,CAC1D,CAAC;EAED,MAAMsB,gBAAgB,GAAG5C,WAAW,CAC/B6C,QAAiB,IAAK;IACnB,IAAIC,YAAuC;IAE3C,MAAMC,aAAa,GAAGtB,aAAa,CAACuB,MAAM,CAAEL,IAAI,IAAK;MACjD,MAAM;QAAEM;MAAK,CAAC,GAAGN,IAAI;MAErB,IAAIM,IAAI,KAAKJ,QAAQ,EAAE;QACnBC,YAAY,GAAGH,IAAI;MACvB;MAEA,OAAOM,IAAI,KAAKJ,QAAQ;IAC5B,CAAC,CAAC;IAEFnB,gBAAgB,CAACqB,aAAa,CAAC;IAE/B,IAAI,CAACD,YAAY,EAAE;MACf,MAAMI,cAAc,GAAGvB,cAAc,CAACqB,MAAM,CAAEf,KAAK,IAAK;QACpD,IAAIA,KAAK,KAAKY,QAAQ,EAAE;UACpBC,YAAY,GAAGb,KAAK;QACxB;QAEA,OAAOA,KAAK,KAAKY,QAAQ;MAC7B,CAAC,CAAC;MAEFjB,iBAAiB,CAACsB,cAAc,CAAC;IACrC;IAEA,IAAI,CAACJ,YAAY,IAAI,OAAOzB,QAAQ,KAAK,UAAU,EAAE;MACjD;IACJ;IAEAA,QAAQ,CAACyB,YAAY,CAAC;EAC1B,CAAC,EACD,CAACrB,aAAa,EAAEE,cAAc,EAAEN,QAAQ,CAC5C,CAAC;EAED,MAAM8B,UAAU,GAAGlD,OAAO,CAAC,MAAM;IAC7B,IAAImB,QAAQ,EAAE;MACV,IAAIK,aAAa,CAACc,MAAM,GAAGZ,cAAc,CAACY,MAAM,IAAInB,QAAQ,EAAE;QAC1D,IAAI,OAAOD,iBAAiB,KAAK,UAAU,EAAE;UACzCA,iBAAiB,CAAC,CAAC;QACvB;QAEA,OAAO,IAAI;MACf;IACJ;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACM,aAAa,CAACc,MAAM,EAAEZ,cAAc,CAACY,MAAM,EAAEnB,QAAQ,EAAED,iBAAiB,CAAC,CAAC;EAE9E,MAAMiC,yBAAyB,GAAGpD,WAAW,CAAC,YAAY;IACtD,IAAImD,UAAU,EAAE;MACZ;IACJ;IAEA,MAAM;MAAEE,UAAU;MAAEC;IAAO,CAAC,GAAI,MAAM1D,YAAY,CAAC;MAC/C2D,WAAW,EAAE;QACTC,MAAM,EAAE,IAAI;QACZC,OAAO,EAAE,CACL;UAAEC,IAAI,EAAE,OAAO;UAAEL,UAAU,EAAE;QAAE,CAAC,EAChC;UAAEK,IAAI,EAAE,KAAK;UAAEL,UAAU,EAAE,CAAC;QAAE,CAAC,CAClC;QACDM,WAAW,EAAE;MACjB,CAAC;MACDC,IAAI,EAAE/D,UAAU,CAACgE,MAAM;MACvBC,MAAM,EAAE;QACJC,GAAG,EAAE,4EAA4E;QACjFC,KAAK,EAAE,qBAAqB;QAC5BC,MAAM,EAAE;MACZ,CAAC;MACDR,OAAO,EAAE;IACb,CAAC,CAAC,CAACS,IAAI,CAAC,CAAuB;IAE/B,IAAIb,UAAU,KAAK,CAAC,IAAIC,MAAM,EAAES,GAAG,EAAE;MACjClC,eAAe,CAAC,CAACyB,MAAM,CAACS,GAAG,CAAC,CAAC;IACjC;EACJ,CAAC,EAAE,CAAClC,eAAe,EAAEsB,UAAU,CAAC,CAAC;EAEjC,MAAMgB,wBAAwB,GAAGnE,WAAW,CAAC,YAAY;IACrD,IAAImD,UAAU,EAAE;MACZ;IACJ;IAEA,MAAMjB,KAAK,GAAG,MAAM7B,WAAW,CAAC;MAC5B+D,QAAQ,EAAE,IAAI;MACdR,IAAI,EAAE1C;IACV,CAAC,CAAC;IAEFuB,cAAc,CAACP,KAAK,CAAC;EACzB,CAAC,EAAE,CAAChB,SAAS,EAAEuB,cAAc,EAAEU,UAAU,CAAC,CAAC;EAE3C,MAAMkB,UAAU,GAAGrE,WAAW,CACzBsE,CAA4B,IAAK;IAC9BA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClB,MAAMC,YAAY,GAAGC,KAAK,CAACC,IAAI,CAACJ,CAAC,CAACK,YAAY,CAACzC,KAAK,CAAC;IAErDO,cAAc,CAAC+B,YAAY,CAAC;EAChC,CAAC,EACD,CAAC/B,cAAc,CACnB,CAAC;EAED,MAAMmC,OAAO,GAAG3E,OAAO,CAAC,MAAM;IAC1B,MAAM4E,aAAa,GAAG,CAAC,GAAGlD,cAAc,EAAE,GAAGF,aAAa,CAAC;IAE3D,MAAMqD,KAAqB,GAAGD,aAAa,CAACE,GAAG,CAAEpC,IAAI,iBACjD5C,KAAA,CAAAiF,aAAA,CAACnE,yBAAyB;MACtBoE,OAAO,EAAE;QAAEC,MAAM,EAAE,MAAM;QAAEC,OAAO,EAAE;MAAE,CAAE;MACxCC,IAAI,EAAE;QAAEF,MAAM,EAAE,CAAC;QAAEC,OAAO,EAAE;MAAE,CAAE;MAChCE,GAAG,EAAE,OAAO1C,IAAI,KAAK,QAAQ,GAAGA,IAAI,GAAGA,IAAI,CAACM,IAAK;MACjDqC,UAAU,EAAE;QAAEC,QAAQ,EAAE,IAAI;QAAE3B,IAAI,EAAE;MAAQ;IAAE,gBAE9C7D,KAAA,CAAAiF,aAAA,CAACxE,YAAY;MACTgF,QAAQ,EAAE,OAAO7C,IAAI,KAAK,QAAQ,GAAGA,IAAI,CAACiB,IAAI,GAAG6B,SAAU;MAC3D5C,QAAQ,EAAE,OAAOF,IAAI,KAAK,QAAQ,GAAGA,IAAI,CAACM,IAAI,GAAGwC,SAAU;MAC3DC,QAAQ,EAAE,OAAO/C,IAAI,KAAK,QAAQ,GAAGA,IAAI,CAACgD,IAAI,GAAGF,SAAU;MAC3D1B,GAAG,EAAE,OAAOpB,IAAI,KAAK,QAAQ,GAAGA,IAAI,GAAG8C,SAAU;MACjDpE,QAAQ,EAAEuB;IAAiB,CAC9B,CACsB,CAC9B,CAAC;IAEF,OAAOkC,KAAK;EAChB,CAAC,EAAE,CAAClC,gBAAgB,EAAEnB,aAAa,EAAEE,cAAc,CAAC,CAAC;EAErD,OAAO1B,OAAO,CACV,mBACIF,KAAA,CAAAiF,aAAA,CAACvE,eAAe,qBACZV,KAAA,CAAAiF,aAAA,CAACpE,sBAAsB;IAACgF,WAAW,EAAEzC;EAAW,gBAC5CpD,KAAA,CAAAiF,aAAA,CAACtE,wBAAwB;IACrBmF,OAAO,EAAEA,CAAA,KAAM,KAAK1B,wBAAwB,CAAC,CAAE;IAC/C2B,UAAU,EAAGxB,CAA4B,IAAKA,CAAC,CAACC,cAAc,CAAC,CAAE;IACjEwB,MAAM,EAAGzB,CAA4B,IAAK,KAAKD,UAAU,CAACC,CAAC;EAAE,gBAE7DvE,KAAA,CAAAiF,aAAA,CAAC1E,IAAI;IAAC0F,KAAK,EAAEhF;EAAmB,CAAE,CAAC,eACnCjB,KAAA,CAAAiF,aAAA,CAACrE,mBAAmB,QAAEY,wBAA8C,CAC9C,CAAC,EAC1BC,sBAAsB,iBACnBzB,KAAA,CAAAiF,aAAA,CAACtE,wBAAwB;IACrBuF,iBAAiB;IACjBJ,OAAO,EAAEA,CAAA,KAAM,KAAKzC,yBAAyB,CAAC;EAAE,gBAEhDrD,KAAA,CAAAiF,aAAA,CAAC1E,IAAI;IAAC0F,KAAK,EAAE/E;EAAiB,CAAE,CAAC,eACjClB,KAAA,CAAAiF,aAAA,CAACrE,mBAAmB,QAAEa,sBAA4C,CAC5C,CAEV,CAAC,eAEzBzB,KAAA,CAAAiF,aAAA,CAACzE,IAAI,qBACDR,KAAA,CAAAiF,aAAA,CAAClF,eAAe;IAACoG,OAAO,EAAE;EAAM,GAAEtB,OAAyB,CACzD,CACO,CACpB,EACD,CACIzB,UAAU,EACVnC,kBAAkB,EAClBO,wBAAwB,EACxBC,sBAAsB,EACtBP,gBAAgB,EAChB2D,OAAO,EACPT,wBAAwB,EACxBE,UAAU,EACVjB,yBAAyB,CAEjC,CAAC;AACL,CAAC;AAEDtC,SAAS,CAACqF,WAAW,GAAG,WAAW;AAEnC,eAAerF,SAAS","ignoreList":[]}
+{"version":3,"file":"FileInput.js","names":["createDialog","DialogType","AnimatePresence","React","useCallback","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","selectFiles","Icon","List","FileListItem","StyledFileInput","StyledFileInputContainer","StyledFileInputText","StyledFileInputWrapper","StyledMotionFileInputList","StyledUploadedFilesList","FileInput","_ref","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","internalFiles","setInternalFiles","internalImages","setInternalImages","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, { DragEvent, FC, ReactElement, useCallback, useMemo, useState } 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\nconst FileInput: FC<FileInputProps> = ({\n    fileSelectionIcons = ['fa fa-upload'],\n    imageSelectIcons = ['ts-image'],\n    fileTypes,\n    onMaxFilesReached,\n    maxFiles,\n    onRemove,\n    files,\n    onAdd,\n    fileSelectionPlaceholder = 'Dateien hinzufügen',\n    imageSelectPlaceholder,\n}) => {\n    const [internalFiles, setInternalFiles] = useState<File[]>([]);\n    const [internalImages, setInternalImages] = useState<string[]>([]);\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        [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({\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\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/file-input/FileInput.styles.d.ts

@@ -9,6 +9,10 @@ export declare const StyledFileInputWrapper: import("styled-components").IStyled
 type StyledFileInputContainerProps = WithTheme<{
     $isImageSelection?: boolean;
 }>;
+type StyledUploadedFilesListProps = WithTheme<{
+    $shouldShowBorder: boolean;
+}>;
+export declare const StyledUploadedFilesList: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledUploadedFilesListProps>>;
 export declare const StyledFileInputContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledFileInputContainerProps>>;
 export declare const StyledFileInputText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;

package/lib/components/file-input/FileInput.styles.js

@@ -17,11 +17,22 @@ export const StyledFileInputWrapper = styled.div`
   return $isDisabled ? 0.5 : 1;
 }};
 `;
-export const StyledFileInputContainer = styled.div`
-    border: ${_ref3 => {
+export const StyledUploadedFilesList = styled.div`
+    ${_ref3 => {
   let {
+    $shouldShowBorder,
     theme
   } = _ref3;
+  return $shouldShowBorder && css`
+            border-top: 1px solid ${theme.headline};
+        `;
+}}
+`;
+export const StyledFileInputContainer = styled.div`
+    border: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.text;
 }} 1px dotted;
     display: flex;
@@ -31,20 +42,20 @@ export const StyledFileInputContainer = styled.div`
     justify-content: center;
     width: 100%;
 
-    ${_ref4 => {
+    ${_ref5 => {
   let {
     $isImageSelection
-  } = _ref4;
+  } = _ref5;
   return $isImageSelection && css`
             border-left: none;
         `;
 }}
 `;
 export const StyledFileInputText = styled.p`
-    color: ${_ref5 => {
+    color: ${_ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme.text;
 }};
 `;

package/lib/components/file-input/FileInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.styles.js","names":["motion","styled","css","StyledFileInput","div","StyledFileInputWrapper","_ref","$isDisabled","_ref2","StyledFileInputContainer","_ref3","theme","text","_ref4","$isImageSelection","StyledFileInputText","p","_ref5","StyledMotionFileInputList"],"sources":["../../../src/components/file-input/FileInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledFileInput = styled.div``;\n\ntype StyledFileInputWrapperProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledFileInputWrapper = styled.div<StyledFileInputWrapperProps>`\n    display: flex;\n\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileInputContainerProps = WithTheme<{\n    $isImageSelection?: boolean;\n}>;\n\nexport const StyledFileInputContainer = styled.div<StyledFileInputContainerProps>`\n    border: ${({ theme }: StyledFileInputContainerProps) => theme.text} 1px dotted;\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    padding: 15px;\n    justify-content: center;\n    width: 100%;\n\n    ${({ $isImageSelection }) =>\n        $isImageSelection &&\n        css`\n            border-left: none;\n        `}\n`;\n\ntype StyledFileInputTextProps = WithTheme<unknown>;\n\nexport const StyledFileInputText = styled.p<StyledFileInputTextProps>`\n    color: ${({ theme }: StyledFileInputTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileInputList = styled(motion.div)<FramerMotionBugFix>``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAI,EAAC;AAM3C,OAAO,MAAMC,sBAAsB,GAAGJ,MAAM,CAACG,GAAiC;AAC9E;AACA;AACA,cAAcE,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAE;AACzE,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAY,CAAC,GAAAC,KAAA;EAAA,OAAMD,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC5D,CAAC;AAMD,OAAO,MAAME,wBAAwB,GAAGR,MAAM,CAACG,GAAmC;AAClF,cAAcM,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAkB,CAAC,GAAAD,KAAA;EAAA,OACpBC,iBAAiB,IACjBZ,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAID,OAAO,MAAMa,mBAAmB,GAAGd,MAAM,CAACe,CAA4B;AACtE,aAAaC,KAAA;EAAA,IAAC;IAAEN;EAAgC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACC,IAAI;AAAA,CAAC;AACjE,CAAC;AAED,OAAO,MAAMM,yBAAyB,GAAGjB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB,EAAC","ignoreList":[]}
+{"version":3,"file":"FileInput.styles.js","names":["motion","styled","css","StyledFileInput","div","StyledFileInputWrapper","_ref","$isDisabled","_ref2","StyledUploadedFilesList","_ref3","$shouldShowBorder","theme","headline","StyledFileInputContainer","_ref4","text","_ref5","$isImageSelection","StyledFileInputText","p","_ref6","StyledMotionFileInputList"],"sources":["../../../src/components/file-input/FileInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledFileInput = styled.div``;\n\ntype StyledFileInputWrapperProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledFileInputWrapper = styled.div<StyledFileInputWrapperProps>`\n    display: flex;\n\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileInputContainerProps = WithTheme<{\n    $isImageSelection?: boolean;\n}>;\n\ntype StyledUploadedFilesListProps = WithTheme<{ $shouldShowBorder: boolean }>;\n\nexport const StyledUploadedFilesList = styled.div<StyledUploadedFilesListProps>`\n    ${({ $shouldShowBorder, theme }: StyledUploadedFilesListProps) =>\n        $shouldShowBorder &&\n        css`\n            border-top: 1px solid ${theme.headline};\n        `}\n`;\n\nexport const StyledFileInputContainer = styled.div<StyledFileInputContainerProps>`\n    border: ${({ theme }: StyledFileInputContainerProps) => theme.text} 1px dotted;\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    padding: 15px;\n    justify-content: center;\n    width: 100%;\n\n    ${({ $isImageSelection }) =>\n        $isImageSelection &&\n        css`\n            border-left: none;\n        `}\n`;\n\ntype StyledFileInputTextProps = WithTheme<unknown>;\n\nexport const StyledFileInputText = styled.p<StyledFileInputTextProps>`\n    color: ${({ theme }: StyledFileInputTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileInputList = styled(motion.div)<FramerMotionBugFix>``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAI,EAAC;AAM3C,OAAO,MAAMC,sBAAsB,GAAGJ,MAAM,CAACG,GAAiC;AAC9E;AACA;AACA,cAAcE,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAE;AACzE,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAY,CAAC,GAAAC,KAAA;EAAA,OAAMD,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC5D,CAAC;AAQD,OAAO,MAAME,uBAAuB,GAAGR,MAAM,CAACG,GAAkC;AAChF,MAAMM,KAAA;EAAA,IAAC;IAAEC,iBAAiB;IAAEC;EAAoC,CAAC,GAAAF,KAAA;EAAA,OACzDC,iBAAiB,IACjBT,GAAI;AACZ,oCAAoCU,KAAK,CAACC,QAAS;AACnD,SAAS;AAAA,CAAC;AACV,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAGb,MAAM,CAACG,GAAmC;AAClF,cAAcW,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA,CAAC;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAkB,CAAC,GAAAD,KAAA;EAAA,OACpBC,iBAAiB,IACjBhB,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAID,OAAO,MAAMiB,mBAAmB,GAAGlB,MAAM,CAACmB,CAA4B;AACtE,aAAaC,KAAA;EAAA,IAAC;IAAET;EAAgC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAACI,IAAI;AAAA,CAAC;AACjE,CAAC;AAED,OAAO,MAAMM,yBAAyB,GAAGrB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB,EAAC","ignoreList":[]}

package/lib/components/file-input/file-list/FileListItem.js

@@ -17,11 +17,12 @@ const FileListItem = _ref => {
     title: fileName ?? url,
     subtitle: humanFileSize,
     icons: url ? ['fa fa-file-image'] : [icon],
+    shouldShowSingleRightElementCentered: true,
     rightElements: [/*#__PURE__*/React.createElement(Icon, {
       icons: ['ts-wrong'],
       onClick: () => onRemove(fileName ?? url ?? '')
     })]
-  })), [fileName, humanFileSize, icon, onRemove]);
+  })), [fileName, humanFileSize, icon, onRemove, url]);
 };
 FileListItem.displayName = 'FileList';
 export default FileListItem;