@chayns-components/core 5.0.0-beta.998 → 5.0.1

package/lib/esm/components/file-select/FileSelect.js

@@ -0,0 +1,126 @@
+import { createDialog, DialogType } from 'chayns-api';
+import React, { useCallback, useMemo } from 'react';
+import { isValidFileType } from '../../utils/file';
+import { selectFiles } from '../../utils/fileDialog';
+import Icon from '../icon/Icon';
+import { StyledFileSelect, StyledFileSelectContainer, StyledFileSelectText, StyledFileSelectWrapper } from './FileSelect.styles';
+var DialogView = /*#__PURE__*/function (DialogView) {
+  DialogView["PIXABAY"] = "pixabay";
+  DialogView["EDITOR"] = "editor";
+  return DialogView;
+}(DialogView || {});
+const FileSelect = ({
+  fileSelectionIcons = ['fa fa-upload'],
+  imageSelectIcons = ['ts-image'],
+  fileTypes,
+  isDisabled,
+  maxFileSizeInMB,
+  onAdd,
+  fileSelectionPlaceholder = 'Dateien hochladen',
+  imageSelectPlaceholder,
+  shouldPreventImageUpload = false
+}) => {
+  const handleAddImages = useCallback(images => {
+    if (typeof onAdd === 'function') {
+      onAdd(images);
+    }
+  }, [onAdd]);
+  const handleAddFiles = useCallback(newFiles => {
+    if (typeof onAdd === 'function') {
+      onAdd(newFiles);
+    }
+  }, [onAdd]);
+  const handleOpenEditor = useCallback(async file => {
+    const {
+      buttonType,
+      result
+    } = await createDialog({
+      dialogInput: {
+        upload: true,
+        initialView: DialogView.EDITOR,
+        imageArrayBuffer: file
+      },
+      type: DialogType.MODULE,
+      system: {
+        url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',
+        scope: 'dialog_image_editor',
+        module: './ImageEditorEntry'
+      },
+      buttons: []
+    }).open();
+    if (buttonType === 1 && result?.url) handleAddImages([{
+      url: result.url,
+      size: file.size,
+      name: file.name
+    }]);
+  }, [handleAddImages]);
+  const handleImageSelectionClick = useCallback(async () => {
+    if (isDisabled) return;
+    const {
+      buttonType,
+      result
+    } = await createDialog({
+      dialogInput: {
+        upload: true,
+        initialView: DialogView.PIXABAY
+      },
+      type: DialogType.MODULE,
+      system: {
+        url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',
+        scope: 'dialog_image_editor',
+        module: './ImageEditorEntry'
+      },
+      buttons: []
+    }).open();
+    if (buttonType === 1 && result?.url) handleAddImages([{
+      url: result.url
+    }]);
+  }, [handleAddImages, isDisabled]);
+  const handleFileSelectionClick = useCallback(async () => {
+    if (isDisabled) return;
+    const newFiles = await selectFiles({
+      multiple: true,
+      type: fileTypes,
+      maxFileSizeInMB
+    });
+    if (newFiles.length === 1 && newFiles[0] && newFiles[0].type.startsWith('image') && !shouldPreventImageUpload) {
+      void handleOpenEditor(newFiles[0]);
+      return;
+    }
+    handleAddFiles(newFiles);
+  }, [fileTypes, handleAddFiles, handleOpenEditor, isDisabled, maxFileSizeInMB, shouldPreventImageUpload]);
+  const handleDrop = useCallback(e => {
+    e.preventDefault();
+    const draggedFiles = Array.from(e.dataTransfer.files).filter(file => {
+      if (fileTypes && !isValidFileType({
+        file,
+        types: fileTypes
+      })) {
+        return false;
+      }
+      return !(maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024);
+    });
+    if (draggedFiles.length === 1 && draggedFiles[0] && draggedFiles[0].type.startsWith('image') && !shouldPreventImageUpload) {
+      void handleOpenEditor(draggedFiles[0]);
+      return;
+    }
+    handleAddFiles(draggedFiles);
+  }, [shouldPreventImageUpload, handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileSelect, null, /*#__PURE__*/React.createElement(StyledFileSelectWrapper, {
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/React.createElement(StyledFileSelectContainer, {
+    onClick: () => void handleFileSelectionClick(),
+    onDragOver: e => e.preventDefault(),
+    onDrop: handleDrop
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: fileSelectionIcons
+  }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, fileSelectionPlaceholder)), imageSelectPlaceholder && /*#__PURE__*/React.createElement(StyledFileSelectContainer, {
+    $isImageSelection: true,
+    onClick: () => void handleImageSelectionClick()
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: imageSelectIcons
+  }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, imageSelectPlaceholder)))), [isDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, handleFileSelectionClick, handleDrop, handleImageSelectionClick]);
+};
+FileSelect.displayName = 'FileSelect';
+export default FileSelect;
+//# sourceMappingURL=FileSelect.js.map

package/lib/esm/components/file-select/FileSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileSelect.js","names":["createDialog","DialogType","React","useCallback","useMemo","isValidFileType","selectFiles","Icon","StyledFileSelect","StyledFileSelectContainer","StyledFileSelectText","StyledFileSelectWrapper","DialogView","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","handleAddImages","images","handleAddFiles","newFiles","handleOpenEditor","file","buttonType","result","dialogInput","upload","initialView","EDITOR","imageArrayBuffer","type","MODULE","system","url","scope","module","buttons","open","size","name","handleImageSelectionClick","PIXABAY","handleFileSelectionClick","multiple","length","startsWith","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","types","createElement","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","displayName"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useMemo } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport {\n    StyledFileSelect,\n    StyledFileSelectContainer,\n    StyledFileSelectText,\n    StyledFileSelectWrapper,\n} from './FileSelect.styles';\n\nenum DialogView {\n    PIXABAY = 'pixabay',\n    EDITOR = 'editor',\n}\n\ntype DialogInput = {\n    upload: boolean;\n    initialView: DialogView;\n    imageArrayBuffer?: File;\n};\n\nexport interface UploadedFile {\n    url: string;\n    size?: number;\n    name?: string;\n}\n\nexport type FileSelectProps = {\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     * Whether the FileInput is disabled.\n     */\n    isDisabled?: boolean;\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[] | UploadedFile[]) => void;\n    /**\n     * Whether the image upload should be prevented.\n     */\n    shouldPreventImageUpload?: boolean;\n};\n\nconst FileSelect: FC<FileSelectProps> = ({\n    fileSelectionIcons = ['fa fa-upload'],\n    imageSelectIcons = ['ts-image'],\n    fileTypes,\n    isDisabled,\n    maxFileSizeInMB,\n    onAdd,\n    fileSelectionPlaceholder = 'Dateien hochladen',\n    imageSelectPlaceholder,\n    shouldPreventImageUpload = false,\n}) => {\n    const handleAddImages = useCallback(\n        (images: UploadedFile[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(images);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleAddFiles = useCallback(\n        (newFiles: File[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(newFiles);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleOpenEditor = useCallback(\n        async (file: File) => {\n            const { buttonType, result } = (await createDialog<DialogInput>({\n                dialogInput: {\n                    upload: true,\n                    initialView: DialogView.EDITOR,\n                    imageArrayBuffer: file,\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([\n                    {\n                        url: result.url,\n                        size: file.size,\n                        name: file.name,\n                    },\n                ]);\n        },\n        [handleAddImages],\n    );\n\n    const handleImageSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const { buttonType, result } = (await createDialog<DialogInput>({\n            dialogInput: { upload: true, initialView: DialogView.PIXABAY },\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) handleAddImages([{ url: result.url }]);\n    }, [handleAddImages, isDisabled]);\n\n    const handleFileSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const newFiles = await selectFiles({ multiple: true, type: fileTypes, maxFileSizeInMB });\n\n        if (\n            newFiles.length === 1 &&\n            newFiles[0] &&\n            newFiles[0].type.startsWith('image') &&\n            !shouldPreventImageUpload\n        ) {\n            void handleOpenEditor(newFiles[0]);\n\n            return;\n        }\n\n        handleAddFiles(newFiles);\n    }, [\n        fileTypes,\n        handleAddFiles,\n        handleOpenEditor,\n        isDisabled,\n        maxFileSizeInMB,\n        shouldPreventImageUpload,\n    ]);\n\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n\n            const draggedFiles = Array.from(e.dataTransfer.files).filter((file) => {\n                if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                    return false;\n                }\n\n                return !(maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024);\n            });\n\n            if (\n                draggedFiles.length === 1 &&\n                draggedFiles[0] &&\n                draggedFiles[0].type.startsWith('image') &&\n                !shouldPreventImageUpload\n            ) {\n                void handleOpenEditor(draggedFiles[0]);\n\n                return;\n            }\n\n            handleAddFiles(draggedFiles);\n        },\n        [shouldPreventImageUpload, handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor],\n    );\n\n    return useMemo(\n        () => (\n            <StyledFileSelect>\n                <StyledFileSelectWrapper $isDisabled={isDisabled}>\n                    <StyledFileSelectContainer\n                        onClick={() => void handleFileSelectionClick()}\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={handleDrop}\n                    >\n                        <Icon icons={fileSelectionIcons} />\n                        <StyledFileSelectText>{fileSelectionPlaceholder}</StyledFileSelectText>\n                    </StyledFileSelectContainer>\n                    {imageSelectPlaceholder && (\n                        <StyledFileSelectContainer\n                            $isImageSelection\n                            onClick={() => void handleImageSelectionClick()}\n                        >\n                            <Icon icons={imageSelectIcons} />\n                            <StyledFileSelectText>{imageSelectPlaceholder}</StyledFileSelectText>\n                        </StyledFileSelectContainer>\n                    )}\n                </StyledFileSelectWrapper>\n            </StyledFileSelect>\n        ),\n        [\n            isDisabled,\n            fileSelectionIcons,\n            fileSelectionPlaceholder,\n            imageSelectPlaceholder,\n            imageSelectIcons,\n            handleFileSelectionClick,\n            handleDrop,\n            handleImageSelectionClick,\n        ],\n    );\n};\n\nFileSelect.displayName = 'FileSelect';\n\nexport default FileSelect;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/file-select/FileSelect.styles.js

@@ -0,0 +1,45 @@
+import { motion } from 'motion/react';
+import styled, { css } from 'styled-components';
+export const StyledFileSelect = styled.div``;
+export const StyledFileSelectWrapper = styled.div`
+    display: flex;
+
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default' : 'pointer'};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+`;
+export const StyledUploadedFilesList = styled.div`
+    ${({
+  $shouldShowBorder,
+  theme
+}) => $shouldShowBorder && css`
+            border-top: 1px solid ${theme.headline};
+        `}
+`;
+export const StyledFileSelectContainer = styled.div`
+    border: ${({
+  theme
+}) => theme.text} 1px dashed;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    padding: 15px;
+    justify-content: center;
+    width: 100%;
+
+    ${({
+  $isImageSelection
+}) => $isImageSelection && css`
+            border-left: none;
+        `}
+`;
+export const StyledFileSelectText = styled.p`
+    color: ${({
+  theme
+}) => theme.text};
+`;
+export const StyledMotionFileSelectList = styled(motion.div)``;
+//# sourceMappingURL=FileSelect.styles.js.map

package/lib/esm/components/file-select/FileSelect.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileSelect.styles.js","names":["motion","styled","css","StyledFileSelect","div","StyledFileSelectWrapper","$isDisabled","StyledUploadedFilesList","$shouldShowBorder","theme","headline","StyledFileSelectContainer","text","$isImageSelection","StyledFileSelectText","p","StyledMotionFileSelectList"],"sources":["../../../../src/components/file-select/FileSelect.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledFileSelect = styled.div``;\n\ntype StyledFileSelectWrapperProps = WithTheme<{\n    $isDisabled?: boolean;\n}>;\n\nexport const StyledFileSelectWrapper = styled.div<StyledFileSelectWrapperProps>`\n    display: flex;\n\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileSelectContainerProps = 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 StyledFileSelectContainer = styled.div<StyledFileSelectContainerProps>`\n    border: ${({ theme }: StyledFileSelectContainerProps) => theme.text} 1px dashed;\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 StyledFileSelectTextProps = WithTheme<unknown>;\n\nexport const StyledFileSelectText = styled.p<StyledFileSelectTextProps>`\n    color: ${({ theme }: StyledFileSelectTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileSelectList = styled(motion.div)``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAAG,EAAE;AAM5C,OAAO,MAAMC,uBAAuB,GAAGJ,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA,cAAc,CAAC;EAAEE;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,CAAC;AAQD,OAAO,MAAMC,uBAAuB,GAAGN,MAAM,CAACG,GAAiC;AAC/E,MAAM,CAAC;EAAEI,iBAAiB;EAAEC;AAAoC,CAAC,KACzDD,iBAAiB,IACjBN,GAAG;AACX,oCAAoCO,KAAK,CAACC,QAAQ;AAClD,SAAS;AACT,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGV,MAAM,CAACG,GAAmC;AACnF,cAAc,CAAC;EAAEK;AAAsC,CAAC,KAAKA,KAAK,CAACG,IAAI;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,IACjBX,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMY,oBAAoB,GAAGb,MAAM,CAACc,CAA4B;AACvE,aAAa,CAAC;EAAEN;AAAiC,CAAC,KAAKA,KAAK,CAACG,IAAI;AACjE,CAAC;AAED,OAAO,MAAMI,0BAA0B,GAAGf,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC,EAAE","ignoreList":[]}

package/lib/esm/components/filter/Filter.js

@@ -0,0 +1,215 @@
+import React, { forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { StyledFilter, StyledFilterContentWrapper, StyledFilterHead, StyledFilterHeadline, StyledFilterHeadlineElement, StyledFilterIcon, StyledFilterIconWrapper, StyledFilterSearch, StyledMotionFilterBackground } from './Filter.styles';
+import ExpandableContent from '../expandable-content/ExpandableContent';
+import Icon from '../icon/Icon';
+import FilterContent from './filter-content/FIlterContent';
+import { FilterType } from '../../types/filter';
+import SearchInput from '../search-input/SearchInput';
+import ContextMenu from '../context-menu/ContextMenu';
+import Checkbox from '../checkbox/Checkbox';
+
+//
+
+const Filter = /*#__PURE__*/forwardRef(({
+  headline,
+  searchConfig,
+  sortConfig,
+  shouldAutoFocus = false,
+  shouldShowRoundedHoverEffect = false,
+  filterButtonConfig,
+  checkboxConfig,
+  onActiveChange,
+  rightIcons
+}, ref) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSearchActive, setIsSearchActive] = useState(false);
+  const [shouldFocus, setShouldFocus] = useState(false);
+  const [backgroundDistance, setBackgroundDistance] = useState(0);
+  const [backgroundCoordinates, setBackgroundCoordinates] = useState({
+    top: 0,
+    left: 0
+  });
+  const contentRef = useRef(null);
+  const iconRef = useRef(null);
+  const filterRef = useRef(null);
+  const searchRef = useRef(null);
+  const contextMenuRef = useRef(null);
+  const type = useMemo(() => {
+    if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig) {
+      return FilterType.ONLY_FILTER;
+    }
+    if (!filterButtonConfig && !searchConfig && sortConfig && !checkboxConfig) {
+      return FilterType.ONLY_SORT;
+    }
+    if (!filterButtonConfig && searchConfig && !sortConfig && !checkboxConfig) {
+      return FilterType.ONLY_SEARCH;
+    }
+    if (!filterButtonConfig && !searchConfig && !sortConfig && checkboxConfig) {
+      return FilterType.ONLY_CHECKBOX;
+    }
+    return FilterType.MULTIPLE;
+  }, [checkboxConfig, filterButtonConfig, searchConfig, sortConfig]);
+  const icons = useMemo(() => {
+    switch (type) {
+      case FilterType.ONLY_FILTER:
+        return ['fa fa-filter'];
+      case FilterType.ONLY_SORT:
+        return ['fa fa-arrow-up-arrow-down'];
+      default:
+        return ['fa fa-search'];
+    }
+  }, [type]);
+  useEffect(() => {
+    if (typeof onActiveChange === 'function') {
+      onActiveChange(isOpen);
+    }
+  }, [isOpen, onActiveChange]);
+  const handleHide = useCallback(() => {
+    setIsOpen(false);
+    if (type === FilterType.ONLY_SORT && contextMenuRef.current) {
+      contextMenuRef.current.hide();
+    }
+    if (type === FilterType.ONLY_SEARCH) {
+      setIsSearchActive(false);
+    }
+  }, [type]);
+  useEffect(() => {
+    if (shouldFocus) {
+      searchRef.current?.focus();
+      window.setTimeout(() => {
+        setShouldFocus(false);
+      }, 200);
+    }
+  }, [shouldFocus]);
+  const handleShow = useCallback(() => {
+    setIsOpen(true);
+    if (shouldAutoFocus) {
+      setShouldFocus(true);
+    }
+    if (type === FilterType.ONLY_SORT && contextMenuRef.current) {
+      contextMenuRef.current.hide();
+    }
+    if (type === FilterType.ONLY_SEARCH) {
+      setIsSearchActive(true);
+    }
+  }, [shouldAutoFocus, type]);
+  useImperativeHandle(ref, () => ({
+    hide: handleHide,
+    show: handleShow
+  }), [handleHide, handleShow]);
+  const handleIconClick = useCallback(() => {
+    if (isOpen) {
+      handleHide();
+    } else {
+      handleShow();
+    }
+  }, [handleHide, handleShow, isOpen]);
+  useEffect(() => {
+    if (headline && iconRef.current && contentRef.current && filterRef.current) {
+      const iconRect = iconRef.current.getBoundingClientRect();
+      const filterRect = filterRef.current.getBoundingClientRect();
+      const contentRect = contentRef.current.getBoundingClientRect();
+      const relativeTop = iconRect.bottom - filterRect.top;
+      const relativeLeft = iconRect.left - filterRect.left;
+      setBackgroundDistance(contentRect.top - iconRect.bottom);
+      setBackgroundCoordinates({
+        top: relativeTop,
+        left: relativeLeft
+      });
+    } else {
+      setBackgroundDistance(0);
+      setBackgroundCoordinates({
+        top: 0,
+        left: 0
+      });
+    }
+  }, [headline]);
+  const iconElement = useMemo(() => /*#__PURE__*/React.createElement(StyledFilterIcon, {
+    onClick: handleIconClick,
+    $isOpen: isOpen,
+    ref: iconRef,
+    $shouldShowRoundedHoverEffect: shouldShowRoundedHoverEffect
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: icons,
+    size: 18
+  })), [handleIconClick, icons, isOpen, shouldShowRoundedHoverEffect]);
+  const backgroundElement = useMemo(() => /*#__PURE__*/React.createElement(StyledMotionFilterBackground, {
+    $top: backgroundCoordinates.top,
+    $left: backgroundCoordinates.left,
+    animate: {
+      height: isOpen ? `${backgroundDistance}px` : 0
+    },
+    transition: {
+      duration: 0.1,
+      delay: isOpen ? 0 : 0.2
+    }
+  }), [backgroundDistance, isOpen, backgroundCoordinates]);
+  const sortItems = useMemo(() => {
+    if (!sortConfig) {
+      return [];
+    }
+    const {
+      selectedItem,
+      onSortChange
+    } = sortConfig;
+    return sortConfig.items.map(({
+      id,
+      text
+    }) => ({
+      text,
+      key: id.toString(),
+      isSelected: id === selectedItem.id,
+      icons: id === selectedItem.id ? ['fas fa-circle-small'] : [],
+      onClick: () => onSortChange({
+        text,
+        id
+      })
+    }));
+  }, [sortConfig]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFilter, {
+    ref: filterRef
+  }, /*#__PURE__*/React.createElement(StyledFilterHead, null, ! /*#__PURE__*/isValidElement(headline) ? /*#__PURE__*/React.createElement(StyledFilterHeadline, {
+    $isSearchActive: isSearchActive
+  }, headline) : /*#__PURE__*/React.createElement(StyledFilterHeadlineElement, {
+    $isSearchActive: isSearchActive
+  }, headline), [FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledFilterIconWrapper, null, rightIcons && rightIcons.map(({
+    icons: rIcons,
+    onClick
+  }) => /*#__PURE__*/React.createElement(StyledFilterIcon, {
+    onClick: onClick,
+    $isOpen: false,
+    $shouldShowRoundedHoverEffect: shouldShowRoundedHoverEffect
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: rIcons,
+    size: 18
+  }))), iconElement), backgroundDistance > 0 && backgroundElement), type === FilterType.ONLY_SEARCH && searchConfig && /*#__PURE__*/React.createElement(StyledFilterSearch, null, /*#__PURE__*/React.createElement(SearchInput, {
+    onActiveChange: isActive => {
+      setIsSearchActive(isActive);
+      setIsOpen(isActive);
+    },
+    ref: searchRef,
+    isActive: isSearchActive,
+    value: searchConfig.searchValue,
+    onChange: ev => searchConfig.onSearchChange(ev.target.value)
+  })), type === FilterType.ONLY_SORT && sortConfig && /*#__PURE__*/React.createElement(ContextMenu, {
+    ref: contextMenuRef,
+    items: sortItems
+  }, iconElement), type === FilterType.ONLY_CHECKBOX && checkboxConfig &&
+  /*#__PURE__*/
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  React.createElement(Checkbox, checkboxConfig)), [FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/React.createElement(StyledFilterContentWrapper, {
+    ref: contentRef
+  }, /*#__PURE__*/React.createElement(ExpandableContent, {
+    isOpen: isOpen,
+    startDelay: backgroundDistance > 0 ? 0.1 : 0
+  }, /*#__PURE__*/React.createElement(FilterContent, {
+    shouldAutoFocus: shouldFocus,
+    searchConfig: searchConfig,
+    filterButtonConfig: filterButtonConfig,
+    sortConfig: sortConfig,
+    checkboxConfig: checkboxConfig
+  })))), [headline, isSearchActive, type, rightIcons, iconElement, backgroundDistance, backgroundElement, searchConfig, sortConfig, sortItems, checkboxConfig, isOpen, shouldFocus, filterButtonConfig, shouldShowRoundedHoverEffect]);
+});
+Filter.displayName = 'Filter';
+export default Filter;
+//# sourceMappingURL=Filter.js.map

package/lib/esm/components/filter/Filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.js","names":["React","forwardRef","isValidElement","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","StyledFilter","StyledFilterContentWrapper","StyledFilterHead","StyledFilterHeadline","StyledFilterHeadlineElement","StyledFilterIcon","StyledFilterIconWrapper","StyledFilterSearch","StyledMotionFilterBackground","ExpandableContent","Icon","FilterContent","FilterType","SearchInput","ContextMenu","Checkbox","Filter","headline","searchConfig","sortConfig","shouldAutoFocus","shouldShowRoundedHoverEffect","filterButtonConfig","checkboxConfig","onActiveChange","rightIcons","ref","isOpen","setIsOpen","isSearchActive","setIsSearchActive","shouldFocus","setShouldFocus","backgroundDistance","setBackgroundDistance","backgroundCoordinates","setBackgroundCoordinates","top","left","contentRef","iconRef","filterRef","searchRef","contextMenuRef","type","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","ONLY_CHECKBOX","MULTIPLE","icons","handleHide","current","hide","focus","window","setTimeout","handleShow","show","handleIconClick","iconRect","getBoundingClientRect","filterRect","contentRect","relativeTop","bottom","relativeLeft","iconElement","createElement","onClick","$isOpen","$shouldShowRoundedHoverEffect","size","backgroundElement","$top","$left","animate","height","transition","duration","delay","sortItems","selectedItem","onSortChange","items","map","id","text","key","toString","isSelected","$isSearchActive","includes","Fragment","rIcons","isActive","value","searchValue","onChange","ev","onSearchChange","target","startDelay","displayName"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    isValidElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledFilter,\n    StyledFilterContentWrapper,\n    StyledFilterHead,\n    StyledFilterHeadline,\n    StyledFilterHeadlineElement,\n    StyledFilterIcon,\n    StyledFilterIconWrapper,\n    StyledFilterSearch,\n    StyledMotionFilterBackground,\n} from './Filter.styles';\nimport ExpandableContent from '../expandable-content/ExpandableContent';\nimport Icon from '../icon/Icon';\nimport FilterContent from './filter-content/FIlterContent';\nimport {\n    CheckboxConfig,\n    FilterButtonConfig,\n    FilterRef,\n    FilterType,\n    SearchConfig,\n    SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Checkbox from '../checkbox/Checkbox';\nimport { InputRef } from '../input/Input';\nimport type { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu.types';\n\nexport interface FilterRightIcon {\n    icons: string[];\n    onClick: VoidFunction;\n}\n\n//\nexport type FilterProps = {\n    headline: ReactNode;\n    searchConfig?: SearchConfig;\n    filterButtonConfig?: FilterButtonConfig;\n    sortConfig?: SortConfig;\n    checkboxConfig?: CheckboxConfig;\n    onActiveChange?: (isActive: boolean) => void;\n    shouldShowRoundedHoverEffect?: boolean;\n    rightIcons?: FilterRightIcon[];\n    shouldAutoFocus?: boolean;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n    (\n        {\n            headline,\n            searchConfig,\n            sortConfig,\n            shouldAutoFocus = false,\n            shouldShowRoundedHoverEffect = false,\n            filterButtonConfig,\n            checkboxConfig,\n            onActiveChange,\n            rightIcons,\n        },\n        ref,\n    ) => {\n        const [isOpen, setIsOpen] = useState(false);\n        const [isSearchActive, setIsSearchActive] = useState(false);\n        const [shouldFocus, setShouldFocus] = useState(false);\n        const [backgroundDistance, setBackgroundDistance] = useState(0);\n        const [backgroundCoordinates, setBackgroundCoordinates] = useState({ top: 0, left: 0 });\n\n        const contentRef = useRef<HTMLDivElement | null>(null);\n        const iconRef = useRef<HTMLDivElement | null>(null);\n        const filterRef = useRef<HTMLDivElement | null>(null);\n        const searchRef = useRef<InputRef | null>(null);\n\n        const contextMenuRef = useRef<ContextMenuRef>(null);\n\n        const type = useMemo(() => {\n            if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig) {\n                return FilterType.ONLY_FILTER;\n            }\n\n            if (!filterButtonConfig && !searchConfig && sortConfig && !checkboxConfig) {\n                return FilterType.ONLY_SORT;\n            }\n\n            if (!filterButtonConfig && searchConfig && !sortConfig && !checkboxConfig) {\n                return FilterType.ONLY_SEARCH;\n            }\n\n            if (!filterButtonConfig && !searchConfig && !sortConfig && checkboxConfig) {\n                return FilterType.ONLY_CHECKBOX;\n            }\n\n            return FilterType.MULTIPLE;\n        }, [checkboxConfig, filterButtonConfig, searchConfig, sortConfig]);\n\n        const icons = useMemo(() => {\n            switch (type) {\n                case FilterType.ONLY_FILTER:\n                    return ['fa fa-filter'];\n                case FilterType.ONLY_SORT:\n                    return ['fa fa-arrow-up-arrow-down'];\n                default:\n                    return ['fa fa-search'];\n            }\n        }, [type]);\n\n        useEffect(() => {\n            if (typeof onActiveChange === 'function') {\n                onActiveChange(isOpen);\n            }\n        }, [isOpen, onActiveChange]);\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n\n            if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n                contextMenuRef.current.hide();\n            }\n\n            if (type === FilterType.ONLY_SEARCH) {\n                setIsSearchActive(false);\n            }\n        }, [type]);\n\n        useEffect(() => {\n            if (shouldFocus) {\n                searchRef.current?.focus();\n\n                window.setTimeout(() => {\n                    setShouldFocus(false);\n                }, 200);\n            }\n        }, [shouldFocus]);\n\n        const handleShow = useCallback(() => {\n            setIsOpen(true);\n\n            if (shouldAutoFocus) {\n                setShouldFocus(true);\n            }\n\n            if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n                contextMenuRef.current.hide();\n            }\n\n            if (type === FilterType.ONLY_SEARCH) {\n                setIsSearchActive(true);\n            }\n        }, [shouldAutoFocus, type]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        const handleIconClick = useCallback(() => {\n            if (isOpen) {\n                handleHide();\n            } else {\n                handleShow();\n            }\n        }, [handleHide, handleShow, isOpen]);\n\n        useEffect(() => {\n            if (headline && iconRef.current && contentRef.current && filterRef.current) {\n                const iconRect = iconRef.current.getBoundingClientRect();\n                const filterRect = filterRef.current.getBoundingClientRect();\n                const contentRect = contentRef.current.getBoundingClientRect();\n\n                const relativeTop = iconRect.bottom - filterRect.top;\n                const relativeLeft = iconRect.left - filterRect.left;\n\n                setBackgroundDistance(contentRect.top - iconRect.bottom);\n                setBackgroundCoordinates({\n                    top: relativeTop,\n                    left: relativeLeft,\n                });\n            } else {\n                setBackgroundDistance(0);\n                setBackgroundCoordinates({ top: 0, left: 0 });\n            }\n        }, [headline]);\n\n        const iconElement = useMemo(\n            () => (\n                <StyledFilterIcon\n                    onClick={handleIconClick}\n                    $isOpen={isOpen}\n                    ref={iconRef}\n                    $shouldShowRoundedHoverEffect={shouldShowRoundedHoverEffect}\n                >\n                    <Icon icons={icons} size={18} />\n                </StyledFilterIcon>\n            ),\n            [handleIconClick, icons, isOpen, shouldShowRoundedHoverEffect],\n        );\n\n        const backgroundElement = useMemo(\n            () => (\n                <StyledMotionFilterBackground\n                    $top={backgroundCoordinates.top}\n                    $left={backgroundCoordinates.left}\n                    animate={{ height: isOpen ? `${backgroundDistance}px` : 0 }}\n                    transition={{ duration: 0.1, delay: isOpen ? 0 : 0.2 }}\n                />\n            ),\n            [backgroundDistance, isOpen, backgroundCoordinates],\n        );\n\n        const sortItems: ContextMenuItem[] = useMemo(() => {\n            if (!sortConfig) {\n                return [];\n            }\n\n            const { selectedItem, onSortChange } = sortConfig;\n\n            return sortConfig.items.map(({ id, text }) => ({\n                text,\n                key: id.toString(),\n                isSelected: id === selectedItem.id,\n                icons: id === selectedItem.id ? ['fas fa-circle-small'] : [],\n                onClick: () => onSortChange({ text, id }),\n            }));\n        }, [sortConfig]);\n\n        return useMemo(\n            () => (\n                <StyledFilter ref={filterRef}>\n                    <StyledFilterHead>\n                        {!isValidElement(headline) ? (\n                            <StyledFilterHeadline $isSearchActive={isSearchActive}>\n                                {headline}\n                            </StyledFilterHeadline>\n                        ) : (\n                            <StyledFilterHeadlineElement $isSearchActive={isSearchActive}>\n                                {headline}\n                            </StyledFilterHeadlineElement>\n                        )}\n                        {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                            <>\n                                <StyledFilterIconWrapper>\n                                    {rightIcons &&\n                                        rightIcons.map(({ icons: rIcons, onClick }) => (\n                                            <StyledFilterIcon\n                                                onClick={onClick}\n                                                $isOpen={false}\n                                                $shouldShowRoundedHoverEffect={\n                                                    shouldShowRoundedHoverEffect\n                                                }\n                                            >\n                                                <Icon icons={rIcons} size={18} />\n                                            </StyledFilterIcon>\n                                        ))}\n                                    {iconElement}\n                                </StyledFilterIconWrapper>\n                                {backgroundDistance > 0 && backgroundElement}\n                            </>\n                        )}\n                        {type === FilterType.ONLY_SEARCH && searchConfig && (\n                            <StyledFilterSearch>\n                                <SearchInput\n                                    onActiveChange={(isActive) => {\n                                        setIsSearchActive(isActive);\n                                        setIsOpen(isActive);\n                                    }}\n                                    ref={searchRef}\n                                    isActive={isSearchActive}\n                                    value={searchConfig.searchValue}\n                                    onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n                                />\n                            </StyledFilterSearch>\n                        )}\n                        {type === FilterType.ONLY_SORT && sortConfig && (\n                            <ContextMenu ref={contextMenuRef} items={sortItems}>\n                                {iconElement}\n                            </ContextMenu>\n                        )}\n                        {type === FilterType.ONLY_CHECKBOX && checkboxConfig && (\n                            // eslint-disable-next-line react/jsx-props-no-spreading\n                            <Checkbox {...checkboxConfig} />\n                        )}\n                    </StyledFilterHead>\n                    {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                        <StyledFilterContentWrapper ref={contentRef}>\n                            <ExpandableContent\n                                isOpen={isOpen}\n                                startDelay={backgroundDistance > 0 ? 0.1 : 0}\n                            >\n                                <FilterContent\n                                    shouldAutoFocus={shouldFocus}\n                                    searchConfig={searchConfig}\n                                    filterButtonConfig={filterButtonConfig}\n                                    sortConfig={sortConfig}\n                                    checkboxConfig={checkboxConfig}\n                                />\n                            </ExpandableContent>\n                        </StyledFilterContentWrapper>\n                    )}\n                </StyledFilter>\n            ),\n            [\n                headline,\n                isSearchActive,\n                type,\n                rightIcons,\n                iconElement,\n                backgroundDistance,\n                backgroundElement,\n                searchConfig,\n                sortConfig,\n                sortItems,\n                checkboxConfig,\n                isOpen,\n                shouldFocus,\n                filterButtonConfig,\n                shouldShowRoundedHoverEffect,\n            ],\n        );\n    },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/filter/Filter.styles.js

@@ -0,0 +1,90 @@
+import styled, { css } from 'styled-components';
+import { motion } from 'motion/react';
+export const StyledFilter = styled.div``;
+export const StyledFilterHead = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+
+    position: relative;
+`;
+export const StyledFilterHeadline = styled.h1`
+    margin: 0;
+
+    opacity: ${({
+  $isSearchActive
+}) => $isSearchActive ? 0 : 1};
+
+    transition: opacity 0.3s;
+`;
+export const StyledFilterHeadlineElement = styled.div`
+    opacity: ${({
+  $isSearchActive
+}) => $isSearchActive ? 0 : 1};
+
+    transition: opacity 0.3s;
+`;
+export const StyledFilterIconWrapper = styled.div`
+    display: flex;
+    align-items: center;
+`;
+export const StyledFilterSearch = styled.div`
+    position: absolute;
+    width: 100%;
+`;
+export const StyledFilterIcon = styled.div`
+    cursor: pointer;
+
+    aspect-ratio: 1;
+
+    height: ${({
+  $shouldShowRoundedHoverEffect
+}) => $shouldShowRoundedHoverEffect ? 42 : 30}px;
+    border-radius: ${({
+  $shouldShowRoundedHoverEffect
+}) => $shouldShowRoundedHoverEffect ? 3 : 0}px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    ${({
+  $shouldShowRoundedHoverEffect,
+  $isOpen
+}) => $shouldShowRoundedHoverEffect && $isOpen && css`
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        `}
+
+    ${({
+  $isOpen,
+  theme
+}) => $isOpen && css`
+            background-color: ${theme['100']};
+        `}
+
+    &:hover {
+        background-color: ${({
+  theme
+}) => theme['100']};
+    }
+`;
+export const StyledMotionFilterBackground = styled(motion.div)`
+    width: 30px;
+
+    position: absolute;
+
+    top: ${({
+  $top
+}) => $top}px;
+    left: ${({
+  $left
+}) => $left}px;
+
+    background-color: ${({
+  theme
+}) => theme['100']};
+`;
+export const StyledFilterContentWrapper = styled.div``;
+//# sourceMappingURL=Filter.styles.js.map

package/lib/esm/components/filter/Filter.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.styles.js","names":["styled","css","motion","StyledFilter","div","StyledFilterHead","StyledFilterHeadline","h1","$isSearchActive","StyledFilterHeadlineElement","StyledFilterIconWrapper","StyledFilterSearch","StyledFilterIcon","$shouldShowRoundedHoverEffect","$isOpen","theme","StyledMotionFilterBackground","$top","$left","StyledFilterContentWrapper"],"sources":["../../../../src/components/filter/Filter.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { motion } from 'motion/react';\n\nexport const StyledFilter = styled.div``;\n\nexport const StyledFilterHead = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 20px;\n\n    position: relative;\n`;\n\ntype StyledFilterHeadlineProps = WithTheme<{ $isSearchActive: boolean }>;\n\nexport const StyledFilterHeadline = styled.h1<StyledFilterHeadlineProps>`\n    margin: 0;\n\n    opacity: ${({ $isSearchActive }) => ($isSearchActive ? 0 : 1)};\n\n    transition: opacity 0.3s;\n`;\n\nexport const StyledFilterHeadlineElement = styled.div<StyledFilterHeadlineProps>`\n    opacity: ${({ $isSearchActive }) => ($isSearchActive ? 0 : 1)};\n\n    transition: opacity 0.3s;\n`;\n\nexport const StyledFilterIconWrapper = styled.div`\n    display: flex;\n    align-items: center;\n`;\n\nexport const StyledFilterSearch = styled.div`\n    position: absolute;\n    width: 100%;\n`;\n\ntype StyledFilterIconProps = WithTheme<{\n    $isOpen: boolean;\n    $shouldShowRoundedHoverEffect: boolean;\n}>;\n\nexport const StyledFilterIcon = styled.div<StyledFilterIconProps>`\n    cursor: pointer;\n\n    aspect-ratio: 1;\n\n    height: ${({ $shouldShowRoundedHoverEffect }) => ($shouldShowRoundedHoverEffect ? 42 : 30)}px;\n    border-radius: ${({ $shouldShowRoundedHoverEffect }) =>\n        $shouldShowRoundedHoverEffect ? 3 : 0}px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    ${({ $shouldShowRoundedHoverEffect, $isOpen }) =>\n        $shouldShowRoundedHoverEffect &&\n        $isOpen &&\n        css`\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        `}\n\n    ${({ $isOpen, theme }) =>\n        $isOpen &&\n        css`\n            background-color: ${theme['100']};\n        `}\n\n    &:hover {\n        background-color: ${({ theme }) => theme['100']};\n    }\n`;\n\ntype StyledMotionFilterBackgroundProps = WithTheme<{ $top: number; $left: number }>;\n\nexport const StyledMotionFilterBackground = styled(motion.div)<StyledMotionFilterBackgroundProps>`\n    width: 30px;\n\n    position: absolute;\n\n    top: ${({ $top }) => $top}px;\n    left: ${({ $left }) => $left}px;\n\n    background-color: ${({ theme }) => theme['100']};\n`;\n\nexport const StyledFilterContentWrapper = styled.div``;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,MAAM,QAAQ,cAAc;AAErC,OAAO,MAAMC,YAAY,GAAGH,MAAM,CAACI,GAAG,EAAE;AAExC,OAAO,MAAMC,gBAAgB,GAAGL,MAAM,CAACI,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,oBAAoB,GAAGN,MAAM,CAACO,EAA6B;AACxE;AACA;AACA,eAAe,CAAC;EAAEC;AAAgB,CAAC,KAAMA,eAAe,GAAG,CAAC,GAAG,CAAE;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGT,MAAM,CAACI,GAA8B;AAChF,eAAe,CAAC;EAAEI;AAAgB,CAAC,KAAMA,eAAe,GAAG,CAAC,GAAG,CAAE;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAME,uBAAuB,GAAGV,MAAM,CAACI,GAAG;AACjD;AACA;AACA,CAAC;AAED,OAAO,MAAMO,kBAAkB,GAAGX,MAAM,CAACI,GAAG;AAC5C;AACA;AACA,CAAC;AAOD,OAAO,MAAMQ,gBAAgB,GAAGZ,MAAM,CAACI,GAA0B;AACjE;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAES;AAA8B,CAAC,KAAMA,6BAA6B,GAAG,EAAE,GAAG,EAAG;AAC9F,qBAAqB,CAAC;EAAEA;AAA8B,CAAC,KAC/CA,6BAA6B,GAAG,CAAC,GAAG,CAAC;AAC7C;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEA,6BAA6B;EAAEC;AAAQ,CAAC,KACzCD,6BAA6B,IAC7BC,OAAO,IACPb,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEa,OAAO;EAAEC;AAAM,CAAC,KACjBD,OAAO,IACPb,GAAG;AACX,gCAAgCc,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT;AACA;AACA,4BAA4B,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvD;AACA,CAAC;AAID,OAAO,MAAMC,4BAA4B,GAAGhB,MAAM,CAACE,MAAM,CAACE,GAAG,CAAoC;AACjG;AACA;AACA;AACA;AACA,WAAW,CAAC;EAAEa;AAAK,CAAC,KAAKA,IAAI;AAC7B,YAAY,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK;AAChC;AACA,wBAAwB,CAAC;EAAEH;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAED,OAAO,MAAMI,0BAA0B,GAAGnB,MAAM,CAACI,GAAG,EAAE","ignoreList":[]}

package/lib/esm/components/filter/filter-content/FIlterContent.js

@@ -0,0 +1,79 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { StyledFilterComboboxWrapper, StyledFilterContent, StyledFilterSort, StyledFilterSortText } from './FilterContent.styles';
+import Input from '../../input/Input';
+import Icon from '../../icon/Icon';
+import FilterButtons from '../../filter-buttons/FilterButtons';
+import ComboBox from '../../combobox/ComboBox';
+import Checkbox from '../../checkbox/Checkbox';
+const FilterContent = ({
+  searchConfig,
+  sortConfig,
+  filterButtonConfig,
+  checkboxConfig,
+  shouldAutoFocus
+}) => {
+  const sortTextRef = useRef(null);
+  const searchRef = useRef(null);
+  const [sortTextWidth, setSortTextWidth] = useState(0);
+  const handleSelectSortItem = useCallback(item => {
+    if (!item) {
+      return;
+    }
+    const {
+      text,
+      value
+    } = item;
+    if (sortConfig) {
+      sortConfig.onSortChange({
+        text,
+        id: value
+      });
+    }
+  }, [sortConfig]);
+  useEffect(() => {
+    if (sortTextRef.current) {
+      setSortTextWidth(sortTextRef.current.clientWidth + 20);
+    }
+  }, []);
+  useEffect(() => {
+    if (shouldAutoFocus) {
+      searchRef.current?.focus();
+    }
+  }, [shouldAutoFocus]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFilterContent, null, searchConfig && /*#__PURE__*/React.createElement(Input, {
+    ref: searchRef,
+    onChange: ev => searchConfig.onSearchChange(ev.target.value),
+    placeholder: "Suche",
+    value: searchConfig.searchValue,
+    shouldShowClearIcon: searchConfig.searchValue.length > 0,
+    leftElement: /*#__PURE__*/React.createElement(Icon, {
+      icons: ['fa fa-search']
+    })
+  }), filterButtonConfig && /*#__PURE__*/React.createElement(FilterButtons, filterButtonConfig), sortConfig && /*#__PURE__*/React.createElement(StyledFilterSort, null, /*#__PURE__*/React.createElement(StyledFilterSortText, {
+    ref: sortTextRef
+  }, "Sortierung"), /*#__PURE__*/React.createElement(StyledFilterComboboxWrapper, {
+    $textWidth: sortTextWidth
+  }, /*#__PURE__*/React.createElement(ComboBox, {
+    lists: [{
+      list: sortConfig.items.map(({
+        text,
+        id
+      }) => ({
+        text,
+        value: id
+      }))
+    }],
+    placeholder: "",
+    selectedItem: {
+      text: sortConfig.selectedItem.text,
+      value: sortConfig.selectedItem.id
+    },
+    onSelect: handleSelectSortItem
+  }))), checkboxConfig &&
+  /*#__PURE__*/
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  React.createElement(Checkbox, checkboxConfig)), [checkboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, sortTextWidth]);
+};
+FilterContent.displayName = 'FilterContent';
+export default FilterContent;
+//# sourceMappingURL=FIlterContent.js.map