@dreamcommerce/aurora 0.3.4-17 → 0.3.4-170

package/build/esm/src/components/dropdown/hooks/use_values.js

@@ -0,0 +1,63 @@
+import { useState, useCallback } from 'react';
+import { __spreadArrays } from '../../../../_virtual/_tslib.js';
+
+/**
+ * Hook used to allow use multiple selectable values, returns array of selected values and method to set value as selected/unselected
+ * You can use is for multiselect or any other form of control which needs multiple selectable values
+ * @param {React.RefObject<HTMLElement>} wrapperRef
+ * @param {Array<ISelectOption>} options
+ * @param {Array<string>} defaultValues
+ * @param {Function} onChangeCb
+ *
+ * @fires dropdown:change
+ *
+ * @returns {Array} Tuple - selected values and state setter for them
+ */
+function useValues(wrapperRef, options, defaultValues, onChangeCb) {
+    var defaultSelectedOptions = options === null || options === void 0 ? void 0 : options.filter(function (option) { return defaultValues && (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.indexOf(option.value)) >= 0; });
+    var _a = useState(defaultSelectedOptions), selectedValues = _a[0], setSelectedValue = _a[1];
+    /**
+     * updates the state of selected options, emits custom event(dropdown:change) on dropdown reference(wrapperRef) for not only react projects
+     * @param {ISelectOption} selectedOption choosen option
+     */
+    var setSelectedValues = useCallback(function (selectedOption) {
+        setSelectedValue(function (previousSelectedOptions) {
+            var _a;
+            var allSelectedOptions;
+            var isChecked;
+            if (previousSelectedOptions && (previousSelectedOptions === null || previousSelectedOptions === void 0 ? void 0 : previousSelectedOptions.indexOf(selectedOption)) >= 0) {
+                allSelectedOptions = previousSelectedOptions.filter(function (option) { return option.value !== selectedOption.value; });
+                isChecked = false;
+            }
+            else {
+                allSelectedOptions = __spreadArrays(previousSelectedOptions, [selectedOption]);
+                isChecked = true;
+            }
+            if (typeof onChangeCb === 'function') {
+                onChangeCb(selectedOption, isChecked, allSelectedOptions);
+                var event_1 = new CustomEvent('dropdown:change', {
+                    detail: {
+                        selectedOption: selectedOption,
+                        isChecked: isChecked,
+                        allSelectedOptions: allSelectedOptions
+                    }
+                });
+                (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event_1);
+            }
+            return allSelectedOptions;
+        });
+    }, [onChangeCb, wrapperRef]);
+    return [selectedValues, setSelectedValues];
+}
+/**
+ * dropdown:change event
+ *
+ * @event dropdown:change
+ * @type {object}
+ * @property {ISelectOption} selectedOption selected option
+ * @property {boolean} isChecked indicates whether the current option is selected
+ * @property {Array<ISelectOption>} allSelectedOptions array of all selected options
+ */
+
+export { useValues };
+//# sourceMappingURL=use_values.js.map

package/build/esm/src/components/dropdown/hooks/use_values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_values.js","sources":["../../../../../../src/components/dropdown/hooks/use_values.ts"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { ISelectOption } from '../types';\n\n/**\n * Hook used to allow use multiple selectable values, returns array of selected values and method to set value as selected/unselected\n * You can use is for multiselect or any other form of control which needs multiple selectable values\n * @param {React.RefObject<HTMLElement>} wrapperRef\n * @param {Array<ISelectOption>} options\n * @param {Array<string>} defaultValues\n * @param {Function} onChangeCb\n *\n * @fires dropdown:change\n *\n * @returns {Array} Tuple - selected values and state setter for them\n */\nexport function useValues(\n    wrapperRef: React.RefObject<HTMLElement>,\n    options: Array<ISelectOption>,\n    defaultValues: Array<string>,\n    onChangeCb?: (selectedOption: ISelectOption, isChecked: boolean, selectedOptions: Array<ISelectOption>) => void\n): [ISelectOption[], (selectedOption: ISelectOption) => void] {\n    const defaultSelectedOptions = options?.filter((option) => defaultValues && defaultValues?.indexOf(option.value) >= 0);\n    const [selectedValues, setSelectedValue] = useState(defaultSelectedOptions);\n\n    /**\n     * updates the state of selected options, emits custom event(dropdown:change) on dropdown reference(wrapperRef) for not only react projects\n     * @param {ISelectOption} selectedOption choosen option\n     */\n    const setSelectedValues = useCallback(\n        (selectedOption: ISelectOption): void => {\n            setSelectedValue((previousSelectedOptions) => {\n                let allSelectedOptions: Array<ISelectOption>;\n                let isChecked: boolean;\n\n                if (previousSelectedOptions && previousSelectedOptions?.indexOf(selectedOption) >= 0) {\n                    allSelectedOptions = previousSelectedOptions.filter((option) => option.value !== selectedOption.value);\n                    isChecked = false;\n                } else {\n                    allSelectedOptions = [...previousSelectedOptions!, selectedOption];\n                    isChecked = true;\n                }\n\n                if (typeof onChangeCb === 'function') {\n                    onChangeCb(selectedOption, isChecked, allSelectedOptions);\n                    const event = new CustomEvent('dropdown:change', {\n                        detail: {\n                            selectedOption,\n                            isChecked,\n                            allSelectedOptions\n                        }\n                    });\n                    wrapperRef.current?.dispatchEvent(event);\n                }\n\n                return allSelectedOptions;\n            });\n        },\n        [onChangeCb, wrapperRef]\n    );\n\n    return [selectedValues, setSelectedValues];\n}\n\n/**\n * dropdown:change event\n *\n * @event dropdown:change\n * @type {object}\n * @property {ISelectOption} selectedOption selected option\n * @property {boolean} isChecked indicates whether the current option is selected\n * @property {Array<ISelectOption>} allSelectedOptions array of all selected options\n */\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;;SAYgB,SAAS,CACrB,UAAwC,EACxC,OAA6B,EAC7B,aAA4B,EAC5B,UAA+G;IAE/G,IAAM,sBAAsB,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAC,UAAC,MAAM,IAAK,OAAA,aAAa,IAAI,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAC,MAAM,CAAC,KAAK,MAAK,CAAC,GAAA,CAAC,CAAC;IACjH,IAAA,qCAAqE,EAApE,sBAAc,EAAE,wBAAoD,CAAC;;;;;IAM5E,IAAM,iBAAiB,GAAG,WAAW,CACjC,UAAC,cAA6B;QAC1B,gBAAgB,CAAC,UAAC,uBAAuB;;YACrC,IAAI,kBAAwC,CAAC;YAC7C,IAAI,SAAkB,CAAC;YAEvB,IAAI,uBAAuB,IAAI,CAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,OAAO,CAAC,cAAc,MAAK,CAAC,EAAE;gBAClF,kBAAkB,GAAG,uBAAuB,CAAC,MAAM,CAAC,UAAC,MAAM,IAAK,OAAA,MAAM,CAAC,KAAK,KAAK,cAAc,CAAC,KAAK,GAAA,CAAC,CAAC;gBACvG,SAAS,GAAG,KAAK,CAAC;aACrB;iBAAM;gBACH,kBAAkB,kBAAO,uBAAwB,GAAE,cAAc,EAAC,CAAC;gBACnE,SAAS,GAAG,IAAI,CAAC;aACpB;YAED,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE;gBAClC,UAAU,CAAC,cAAc,EAAE,SAAS,EAAE,kBAAkB,CAAC,CAAC;gBAC1D,IAAM,OAAK,GAAG,IAAI,WAAW,CAAC,iBAAiB,EAAE;oBAC7C,MAAM,EAAE;wBACJ,cAAc,gBAAA;wBACd,SAAS,WAAA;wBACT,kBAAkB,oBAAA;qBACrB;iBACJ,CAAC,CAAC;gBACH,MAAA,UAAU,CAAC,OAAO,0CAAE,aAAa,CAAC,OAAK,EAAE;aAC5C;YAED,OAAO,kBAAkB,CAAC;SAC7B,CAAC,CAAC;KACN,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CAC3B,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAC/C,CAAC;AAED;;;;;;;;;;;;"}

package/build/esm/src/components/dropdown/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IDropdownProps, IDropdownComposition } from './types';
+/**
+ * Dropdown composition component. Provides several Dropdown dependant components which can be composed to create selects, multiselects or dropdowns.
+ *
+ * @component
+ * @example
+ * return (
+ *  <Dropdown>
+ *      <Dropdown.Label label="Wybierz link" />
+ *      <Dropdown.Content>
+ *          <Dropdown.List>
+ *              <Dropdown.Link text="shoper.pl" href="https://shoper.pl" />
+ *              <Dropdown.Link text="forum.shoper.pl" href="https://forum.shoper.pl" />
+ *              <Dropdown.Link text="shoper.pl/help" href="https://shoper.pl/help" />
+ *          </Dropdown.List>
+ *      </Dropdown.Content>
+ *  <Dropdown>
+ * )
+ */
+declare const Dropdown: React.FC<IDropdownProps> & IDropdownComposition;
+export default Dropdown;

package/build/esm/src/components/dropdown/index.js

@@ -0,0 +1,59 @@
+import React, { useRef } from 'react';
+import { DropdownContext } from './context/index.js';
+import cssClasses from '../../css/dropdown/main.module.less.js';
+import { useToggle } from './hooks/use_toggle.js';
+import Select from './components/select.js';
+import Content from './components/content.js';
+import List from './components/list.js';
+import Header from './components/header.js';
+import Item from './components/item.js';
+import Option from './components/option.js';
+import OptionMultiple from './components/option_multiple.js';
+import Link from './components/link.js';
+import Label from './components/label.js';
+import Search from './components/search.js';
+import CustomLabel from './components/custom_label.js';
+
+/**
+ * Dropdown composition component. Provides several Dropdown dependant components which can be composed to create selects, multiselects or dropdowns.
+ *
+ * @component
+ * @example
+ * return (
+ *  <Dropdown>
+ *      <Dropdown.Label label="Wybierz link" />
+ *      <Dropdown.Content>
+ *          <Dropdown.List>
+ *              <Dropdown.Link text="shoper.pl" href="https://shoper.pl" />
+ *              <Dropdown.Link text="forum.shoper.pl" href="https://forum.shoper.pl" />
+ *              <Dropdown.Link text="shoper.pl/help" href="https://shoper.pl/help" />
+ *          </Dropdown.List>
+ *      </Dropdown.Content>
+ *  <Dropdown>
+ * )
+ */
+var Dropdown = function (_a) {
+    var _b = _a.defaultIsOpen, defaultIsOpen = _b === void 0 ? false : _b, onToggle = _a.onToggle, children = _a.children;
+    var wrapperRef = useRef(null);
+    var _c = useToggle(defaultIsOpen, onToggle), isOpen = _c[0], toggleDropdown = _c[1];
+    /**
+     * context values, they may be used with useContext in any component which is part of Dropdown composition
+     */
+    var value = React.useMemo(function () { return ({ wrapperRef: wrapperRef, isOpen: isOpen, toggleDropdown: toggleDropdown }); }, [isOpen, toggleDropdown]);
+    return (React.createElement(DropdownContext.Provider, { value: value },
+        React.createElement("div", { ref: wrapperRef, className: cssClasses.dropdown }, children)));
+};
+Dropdown.Select = Select;
+Dropdown.Content = Content;
+Dropdown.Search = Search;
+Dropdown.List = List;
+Dropdown.Header = Header;
+Dropdown.Option = Option;
+Dropdown.OptionMultiple = OptionMultiple;
+Dropdown.Link = Link;
+Dropdown.Label = Label;
+Dropdown.CustomLabel = CustomLabel;
+Dropdown.Item = Item;
+
+export default Dropdown;
+//# sourceMappingURL=index.js.map

package/build/esm/src/components/dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/dropdown/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { IDropdownProps, IDropdownComposition } from './types';\nimport cssClasses from '@css/dropdown/main.module.less';\n\nimport { useToggle } from './hooks';\n\nimport { DropdownContext } from './context';\n\nimport Select from './components/select';\nimport Content from './components/content';\nimport List from './components/list';\nimport Header from './components/header';\nimport Option from './components/option';\nimport OptionMultiple from './components/option_multiple';\nimport Item from './components/item';\nimport Link from './components/link';\nimport Label from './components/label';\nimport Search from './components/search';\nimport CustomLabel from './components/custom_label';\n\n/**\n * Dropdown composition component. Provides several Dropdown dependant components which can be composed to create selects, multiselects or dropdowns.\n *\n * @component\n * @example\n * return (\n *  <Dropdown>\n *      <Dropdown.Label label=\"Wybierz link\" />\n *      <Dropdown.Content>\n *          <Dropdown.List>\n *              <Dropdown.Link text=\"shoper.pl\" href=\"https://shoper.pl\" />\n *              <Dropdown.Link text=\"forum.shoper.pl\" href=\"https://forum.shoper.pl\" />\n *              <Dropdown.Link text=\"shoper.pl/help\" href=\"https://shoper.pl/help\" />\n *          </Dropdown.List>\n *      </Dropdown.Content>\n *  <Dropdown>\n * )\n */\nconst Dropdown: React.FC<IDropdownProps> & IDropdownComposition = ({ defaultIsOpen = false, onToggle, children }) => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [isOpen, toggleDropdown] = useToggle(defaultIsOpen, onToggle);\n\n    /**\n     * context values, they may be used with useContext in any component which is part of Dropdown composition\n     */\n    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);\n\n    return (\n        <DropdownContext.Provider value={value}>\n            <div ref={wrapperRef} className={cssClasses.dropdown}>\n                {children}\n            </div>\n        </DropdownContext.Provider>\n    );\n};\n\nDropdown.Select = Select;\nDropdown.Content = Content;\nDropdown.Search = Search;\nDropdown.List = List;\nDropdown.Header = Header;\nDropdown.Option = Option;\nDropdown.OptionMultiple = OptionMultiple;\nDropdown.Link = Link;\nDropdown.Label = Label;\nDropdown.CustomLabel = CustomLabel;\nDropdown.Item = Item;\n\nexport default Dropdown;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoBA;;;;;;;;;;;;;;;;;;IAkBM,QAAQ,GAAoD,UAAC,EAA6C;QAA3C,qBAAqB,EAArB,0CAAqB,EAAE,sBAAQ,EAAE,sBAAQ;IAC1G,IAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1C,IAAA,uCAA6D,EAA5D,cAAM,EAAE,sBAAoD,CAAC;;;;IAKpE,IAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,cAAM,QAAC,EAAE,UAAU,YAAA,EAAE,MAAM,QAAA,EAAE,cAAc,gBAAA,EAAE,IAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAEtG,QACI,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QAClC,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,QAAQ,IAC/C,QAAQ,CACP,CACiB,EAC7B;AACN,EAAE;AAEF,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;AACzB,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC;AAC3B,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;AACzB,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;AACrB,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;AACzB,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;AACzB,QAAQ,CAAC,cAAc,GAAG,cAAc,CAAC;AACzC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;AACrB,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC;AACvB,QAAQ,CAAC,WAAW,GAAG,WAAW,CAAC;AACnC,QAAQ,CAAC,IAAI,GAAG,IAAI;;;;"}

package/build/esm/src/components/dropdown/types.d.ts

@@ -0,0 +1,99 @@
+import { ReactNode, RefObject } from 'react';
+export interface IDropdownProps {
+    isWithGroups?: boolean;
+    defaultIsOpen?: boolean;
+    defaultCloseOnClick?: boolean;
+    portalContainer?: RefObject<HTMLElement>;
+    children?: ReactNode;
+    onToggle?: (isOpen: boolean) => void;
+}
+export interface IDropdownComposition {
+    Select: React.FC<IDropdownSelectProps>;
+    Label: React.FC<IDropdownLabelProps>;
+    CustomLabel: React.FC<IDropdownCustomLabelProps>;
+    Content: React.FC<IDropdownContentProps>;
+    Search: React.FC<IDropdownSearchProps>;
+    Header: React.FC<IDropdownHeaderProps>;
+    List: React.FC<IDropdownListProps>;
+    Item: React.FC<IDropdownItemProps>;
+    Option: React.FC<IDropdownOptionProps>;
+    OptionMultiple: React.FC<IDropdownOptionMultipleProps>;
+    Link: React.FC<IDropdownLinkProps>;
+}
+export interface IDropdownSelectProps {
+    name: string | undefined;
+    selectedOptions: Array<ISelectOption>;
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+}
+export interface IDropdownLabelProps {
+    label: string;
+    cssClass?: string;
+}
+export interface IDropdownCustomLabelProps {
+}
+export interface IDropdownContentProps {
+    search?: ReactNode;
+    children?: ReactNode;
+    headerComponent?: string | ReactNode;
+    headerGoBackText?: string;
+    headerGoBackIcon?: JSX.Element;
+    portalContainer?: RefObject<HTMLElement>;
+}
+export interface IDropdownSearchProps {
+    onKeyUp: (ev: React.KeyboardEvent<Element>) => void;
+}
+export interface IDropdownListProps {
+    isWithGroups?: boolean;
+    children?: ReactNode;
+}
+export interface IDropdownOptionProps {
+    option: ISelectOption;
+    isSelected: boolean;
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+    onClick: (option: ISelectOption) => void;
+}
+export interface IDropdownOptionMultipleProps extends IDropdownOptionProps {
+}
+export interface IDropdownHeaderProps {
+    text: string;
+}
+export interface IDropdownItemProps {
+    children: ReactNode;
+    isSelected?: boolean;
+    onClick?: (obj: {
+        ev: React.MouseEvent;
+        toggleDropdown: undefined | (() => void);
+    }) => void;
+}
+export interface IDropdownLinkProps {
+    text: string;
+    href: string;
+    target?: string;
+    rel?: string;
+}
+export interface ISelectProps extends IDropdownProps {
+    name?: string;
+    options: Array<ISelectOption>;
+    defaultValues?: Array<string>;
+    isReadonly?: boolean;
+    isDisabled?: boolean;
+    isWithSearch?: boolean;
+    onChange?: (selectedOption: ISelectOption) => void;
+}
+export interface ISelectOption {
+    text: string;
+    value: string;
+    isHeader?: boolean;
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+}
+export interface IMultiSelectProps extends Omit<ISelectProps, 'onChange'> {
+    onChange?: (selectedOption: ISelectOption, isChecked: boolean, allSelectedOptions: Array<ISelectOption>) => void;
+}
+export interface ISelectOptionAttributes {
+    isSelected: boolean;
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+}

package/build/esm/src/components/dropdown/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAqC,OAAO,CAAC"}

package/build/esm/src/components/dropdown/utilities.d.ts

@@ -0,0 +1,30 @@
+import { RefObject } from 'react';
+import { ISelectOption } from './types';
+/**
+ * checks if the given option is selected within array of selectedValues array
+ * @param {ISelectOption} option select/multiselect option
+ * @param {Array<ISelectOption>} selectedValues array of selected values
+ * @returns {Boolean}
+ */
+export declare const isSelected: (option: ISelectOption, selectedValues: ISelectOption[]) => boolean;
+/**
+ * Called on Dropdown.Option(Dropdown.MultiOption) click. Marks given option as selected, option value is added do selectedValues array, closes dropdown if defaultCloseOnClick is true
+ * @param {ISelectOption} option - option that was clicked
+ * @param {boolean} defaultCloseOnClick - determines if dropdown should hide after choosing option
+ * @param {Function} setSelectedValues - selected values state setter
+ * @param {Function} toggleDropdown - method which toggles dropdown
+ */
+export declare const handleItemClick: (option: ISelectOption, defaultCloseOnClick: boolean, setSelectedValues: (selectedOption: any) => void, toggleDropdown: () => void) => void;
+/**
+ * function called on keypress on Dropdown.Search control_input, filters dropdown options and sets new list with filtered results
+ * @param {React.KeyboardEvent} ev react keyboard event
+ * @param {Array<ISelectOption>} options list of dropdown options to filter
+ * @param {Function} setOptionsList method to set new state of options list
+ * @returns {void} nothing
+ */
+export declare const handleSearchKeyUp: (ev: import("react").KeyboardEvent<Element>, options: ISelectOption[], setOptionsList: (value: import("react").SetStateAction<ISelectOption[]>) => void) => void;
+export declare const getXYModifiersForNestedDropdowns: (portalContainer: HTMLElement | null | undefined) => {
+    xModifier: number;
+    yModifier: number;
+};
+export declare const isChildOfModal: (ref: RefObject<HTMLElement>) => boolean;

package/build/esm/src/components/dropdown/utilities.js

@@ -0,0 +1,69 @@
+import 'react';
+import cssClasses from '../../css/dropdown/main.module.less.js';
+import { cssDropdownContent } from './css_classes.js';
+import { fuzzySearch } from '../../utilities/fuzzy_search/fuzzy_search.js';
+import cssClasses$1 from '../../css/modal/main.module.less.js';
+
+/**
+ * checks if the given option is selected within array of selectedValues array
+ * @param {ISelectOption} option select/multiselect option
+ * @param {Array<ISelectOption>} selectedValues array of selected values
+ * @returns {Boolean}
+ */
+var isSelected = function (option, selectedValues) { return selectedValues.indexOf(option) >= 0; };
+/**
+ * Called on Dropdown.Option(Dropdown.MultiOption) click. Marks given option as selected, option value is added do selectedValues array, closes dropdown if defaultCloseOnClick is true
+ * @param {ISelectOption} option - option that was clicked
+ * @param {boolean} defaultCloseOnClick - determines if dropdown should hide after choosing option
+ * @param {Function} setSelectedValues - selected values state setter
+ * @param {Function} toggleDropdown - method which toggles dropdown
+ */
+var handleItemClick = function (option, defaultCloseOnClick, setSelectedValues, toggleDropdown) {
+    setSelectedValues(option);
+    if (defaultCloseOnClick === true) {
+        toggleDropdown();
+    }
+};
+/**
+ * function called on keypress on Dropdown.Search control_input, filters dropdown options and sets new list with filtered results
+ * @param {React.KeyboardEvent} ev react keyboard event
+ * @param {Array<ISelectOption>} options list of dropdown options to filter
+ * @param {Function} setOptionsList method to set new state of options list
+ * @returns {void} nothing
+ */
+var handleSearchKeyUp = function (ev, options, setOptionsList) {
+    var $input = ev.target;
+    var searchQuery = $input.value;
+    var filteredOptions = fuzzySearch(searchQuery, options, 'text');
+    setOptionsList(function () { return filteredOptions; });
+};
+var getXYModifiersForNestedDropdowns = function (portalContainer) {
+    var xModifier = 0;
+    var yModifier = 0;
+    if (portalContainer) {
+        var $parentDropdownContent = portalContainer.closest("." + cssClasses[cssDropdownContent]);
+        if ($parentDropdownContent) {
+            var _a = $parentDropdownContent.getBoundingClientRect(), portalX = _a.x, portalY = _a.y;
+            xModifier = portalX;
+            yModifier = portalY;
+        }
+    }
+    return {
+        xModifier: xModifier,
+        yModifier: yModifier,
+    };
+};
+var isChildOfModal = function (ref) {
+    var _a;
+    var currentParent = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+    while (currentParent) {
+        if (currentParent.classList.contains(cssClasses$1['modal-window'])) {
+            return true;
+        }
+        currentParent = currentParent === null || currentParent === void 0 ? void 0 : currentParent.parentElement;
+    }
+    return false;
+};
+
+export { getXYModifiersForNestedDropdowns, handleItemClick, handleSearchKeyUp, isChildOfModal, isSelected };
+//# sourceMappingURL=utilities.js.map

package/build/esm/src/components/dropdown/utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.js","sources":["../../../../../src/components/dropdown/utilities.ts"],"sourcesContent":["import { RefObject } from 'react';\nimport { fuzzySearch } from '@utilities/fuzzy_search/fuzzy_search';\nimport { ISelectOption } from './types';\nimport { cssDropdownContent } from './css_classes';\nimport cssClasses from '@css/dropdown/main.module.less';\nimport modalCssClasses from '@css/modal/main.module.less';\n\n/**\n * checks if the given option is selected within array of selectedValues array\n * @param {ISelectOption} option select/multiselect option\n * @param {Array<ISelectOption>} selectedValues array of selected values\n * @returns {Boolean}\n */\nexport const isSelected = (option: ISelectOption, selectedValues: Array<ISelectOption>): boolean => selectedValues.indexOf(option) >= 0;\n\n/**\n * Called on Dropdown.Option(Dropdown.MultiOption) click. Marks given option as selected, option value is added do selectedValues array, closes dropdown if defaultCloseOnClick is true\n * @param {ISelectOption} option - option that was clicked\n * @param {boolean} defaultCloseOnClick - determines if dropdown should hide after choosing option\n * @param {Function} setSelectedValues - selected values state setter\n * @param {Function} toggleDropdown - method which toggles dropdown\n */\nexport const handleItemClick = (\n    option: ISelectOption,\n    defaultCloseOnClick: boolean,\n    setSelectedValues: (selectedOption: any) => void,\n    toggleDropdown: () => void\n) => {\n    setSelectedValues(option);\n\n    if (defaultCloseOnClick === true) {\n        toggleDropdown();\n    }\n};\n\n/**\n * function called on keypress on Dropdown.Search control_input, filters dropdown options and sets new list with filtered results\n * @param {React.KeyboardEvent} ev react keyboard event\n * @param {Array<ISelectOption>} options list of dropdown options to filter\n * @param {Function} setOptionsList method to set new state of options list\n * @returns {void} nothing\n */\nexport const handleSearchKeyUp = (\n    ev: React.KeyboardEvent,\n    options: Array<ISelectOption>,\n    setOptionsList: (value: React.SetStateAction<ISelectOption[]>) => void\n): void => {\n    const $input: HTMLInputElement = ev.target as HTMLInputElement;\n    const searchQuery: string = $input.value;\n\n    const filteredOptions = fuzzySearch(searchQuery, options, 'text') as Array<ISelectOption>;\n    setOptionsList(() => filteredOptions);\n};\n\nexport const getXYModifiersForNestedDropdowns = (portalContainer: HTMLElement | null | undefined) => {\n    let xModifier = 0;\n    let yModifier = 0;\n\n    if (portalContainer) {\n        const $parentDropdownContent = portalContainer.closest(`.${cssClasses[cssDropdownContent]}`);\n\n        if ($parentDropdownContent) {\n            const { x: portalX, y: portalY } = $parentDropdownContent.getBoundingClientRect();\n\n            xModifier = portalX;\n            yModifier = portalY;\n        }\n    }\n\n    return {\n        xModifier,\n        yModifier,\n    };\n};\n\nexport const isChildOfModal = (ref: RefObject<HTMLElement>) => {\n    let currentParent = ref.current?.parentElement;\n\n    while (currentParent) {\n        if (currentParent.classList.contains(modalCssClasses['modal-window'])) {\n            return true;\n        }\n        currentParent = currentParent?.parentElement;\n    }\n\n    return false;\n};\n"],"names":["modalCssClasses"],"mappings":";;;;;;AAOA;;;;;;IAMa,UAAU,GAAG,UAAC,MAAqB,EAAE,cAAoC,IAAc,OAAA,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,IAAC;AAExI;;;;;;;IAOa,eAAe,GAAG,UAC3B,MAAqB,EACrB,mBAA4B,EAC5B,iBAAgD,EAChD,cAA0B;IAE1B,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAE1B,IAAI,mBAAmB,KAAK,IAAI,EAAE;QAC9B,cAAc,EAAE,CAAC;KACpB;AACL,EAAE;AAEF;;;;;;;IAOa,iBAAiB,GAAG,UAC7B,EAAuB,EACvB,OAA6B,EAC7B,cAAsE;IAEtE,IAAM,MAAM,GAAqB,EAAE,CAAC,MAA0B,CAAC;IAC/D,IAAM,WAAW,GAAW,MAAM,CAAC,KAAK,CAAC;IAEzC,IAAM,eAAe,GAAG,WAAW,CAAC,WAAW,EAAE,OAAO,EAAE,MAAM,CAAyB,CAAC;IAC1F,cAAc,CAAC,cAAM,OAAA,eAAe,GAAA,CAAC,CAAC;AAC1C,EAAE;IAEW,gCAAgC,GAAG,UAAC,eAA+C;IAC5F,IAAI,SAAS,GAAG,CAAC,CAAC;IAClB,IAAI,SAAS,GAAG,CAAC,CAAC;IAElB,IAAI,eAAe,EAAE;QACjB,IAAM,sBAAsB,GAAG,eAAe,CAAC,OAAO,CAAC,MAAI,UAAU,CAAC,kBAAkB,CAAG,CAAC,CAAC;QAE7F,IAAI,sBAAsB,EAAE;YAClB,IAAA,mDAA2E,EAAzE,cAAU,EAAE,cAA6D,CAAC;YAElF,SAAS,GAAG,OAAO,CAAC;YACpB,SAAS,GAAG,OAAO,CAAC;SACvB;KACJ;IAED,OAAO;QACH,SAAS,WAAA;QACT,SAAS,WAAA;KACZ,CAAC;AACN,EAAE;IAEW,cAAc,GAAG,UAAC,GAA2B;;IACtD,IAAI,aAAa,SAAG,GAAG,CAAC,OAAO,0CAAE,aAAa,CAAC;IAE/C,OAAO,aAAa,EAAE;QAClB,IAAI,aAAa,CAAC,SAAS,CAAC,QAAQ,CAACA,YAAe,CAAC,cAAc,CAAC,CAAC,EAAE;YACnE,OAAO,IAAI,CAAC;SACf;QACD,aAAa,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,CAAC;KAChD;IAED,OAAO,KAAK,CAAC;AACjB;;;;"}

package/build/esm/src/components/file_picker/components/file_input.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IFileInput } from '../types';
+declare const FileInput: React.FC<IFileInput>;
+export default FileInput;

package/build/esm/src/components/file_picker/components/file_input.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useTranslation } from '../../../../node_modules/react-i18next/dist/es/useTranslation.js';
+import { createUseStyles } from '../../../../node_modules/react-jss/dist/react-jss.esm.js';
+import styles from '../../../css/file_picker/main.module.less.js';
+import CSS_CLASSES from '../css_classes.js';
+import IconUpload from '../../../assets/icon_upload.js';
+
+var useStyles = createUseStyles({
+    filePicker: {
+        borderColor: function (_a) {
+            var isDragOver = _a.isDragOver;
+            return (isDragOver ? '#ffffff' : '#6fb9f7');
+        },
+        backgroundColor: function (_a) {
+            var isDragOver = _a.isDragOver;
+            return (isDragOver ? '#6fb9f7' : '#ffffff');
+        },
+        '& *': {
+            color: function (_a) {
+                var isDragOver = _a.isDragOver;
+                return (isDragOver ? '#ffffff' : '#6fb9f7');
+            },
+            // @ts-ignore
+            fill: function (_a) {
+                var isDragOver = _a.isDragOver;
+                return (isDragOver ? '#ffffff' : '#6fb9f7');
+            },
+        },
+    },
+});
+var FileInput = function (_a) {
+    var id = _a.id, onDropFile = _a.onDropFile, onDragOver = _a.onDragOver, onDragLeave = _a.onDragLeave, allowedExtensions = _a.allowedExtensions, isDragOver = _a.isDragOver;
+    var t = useTranslation()[0];
+    var classes = useStyles({ isDragOver: isDragOver });
+    return (React.createElement("label", { htmlFor: id, onDrop: onDropFile, onDragOver: onDragOver, onDragLeave: onDragLeave },
+        React.createElement("div", { className: styles[CSS_CLASSES.filePicker] + " " + classes.filePicker },
+            React.createElement(IconUpload, { className: styles[CSS_CLASSES.filePickerUploadIcon] }),
+            React.createElement("div", { className: styles[CSS_CLASSES.filePickerDescription] },
+                t('Drag file or select'),
+                " (",
+                t('format'),
+                " ",
+                allowedExtensions.join(', '),
+                ")"))));
+};
+
+export default FileInput;
+//# sourceMappingURL=file_input.js.map

package/build/esm/src/components/file_picker/components/file_input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file_input.js","sources":["../../../../../../src/components/file_picker/components/file_input.tsx"],"sourcesContent":["import React from 'react';\nimport styles from '@css/file_picker/main.module.less';\nimport CSS_CLASSES from '@components/file_picker/css_classes';\nimport IconUpload from '@assets/icon_upload';\nimport { createUseStyles } from 'react-jss';\nimport { IFileInput } from '../types';\nimport { useTranslation } from 'react-i18next';\n\nconst useStyles = createUseStyles({\n    filePicker: {\n        borderColor: ({ isDragOver }) => (isDragOver ? '#ffffff' : '#6fb9f7'),\n        backgroundColor: ({ isDragOver }) => (isDragOver ? '#6fb9f7' : '#ffffff'),\n        '& *': {\n            color: ({ isDragOver }) => (isDragOver ? '#ffffff' : '#6fb9f7'),\n            // @ts-ignore\n            fill: ({ isDragOver }) => (isDragOver ? '#ffffff' : '#6fb9f7'),\n        },\n    },\n});\n\nconst FileInput: React.FC<IFileInput> = ({ id, onDropFile, onDragOver, onDragLeave, allowedExtensions, isDragOver }) => {\n    const [t] = useTranslation();\n    const classes = useStyles({ isDragOver });\n\n    return (\n        <label htmlFor={id} onDrop={onDropFile} onDragOver={onDragOver} onDragLeave={onDragLeave}>\n            <div className={`${styles[CSS_CLASSES.filePicker]} ${classes.filePicker}`}>\n                <IconUpload className={styles[CSS_CLASSES.filePickerUploadIcon]} />\n                <div className={styles[CSS_CLASSES.filePickerDescription]}>\n                    {t('Drag file or select')} ({t('format')} {allowedExtensions.join(', ')})\n                </div>\n            </div>\n        </label>\n    );\n};\n\nexport default FileInput;\n"],"names":[],"mappings":";;;;;;;AAQA,IAAM,SAAS,GAAG,eAAe,CAAC;IAC9B,UAAU,EAAE;QACR,WAAW,EAAE,UAAC,EAAc;gBAAZ,0BAAU;YAAO,QAAC,UAAU,GAAG,SAAS,GAAG,SAAS;SAAC;QACrE,eAAe,EAAE,UAAC,EAAc;gBAAZ,0BAAU;YAAO,QAAC,UAAU,GAAG,SAAS,GAAG,SAAS;SAAC;QACzE,KAAK,EAAE;YACH,KAAK,EAAE,UAAC,EAAc;oBAAZ,0BAAU;gBAAO,QAAC,UAAU,GAAG,SAAS,GAAG,SAAS;aAAC;;YAE/D,IAAI,EAAE,UAAC,EAAc;oBAAZ,0BAAU;gBAAO,QAAC,UAAU,GAAG,SAAS,GAAG,SAAS;aAAC;SACjE;KACJ;CACJ,CAAC,CAAC;IAEG,SAAS,GAAyB,UAAC,EAA0E;QAAxE,UAAE,EAAE,0BAAU,EAAE,0BAAU,EAAE,4BAAW,EAAE,wCAAiB,EAAE,0BAAU;IACtG,IAAA,uBAAC,CAAqB;IAC7B,IAAM,OAAO,GAAG,SAAS,CAAC,EAAE,UAAU,YAAA,EAAE,CAAC,CAAC;IAE1C,QACI,+BAAO,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW;QACpF,6BAAK,SAAS,EAAK,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,SAAI,OAAO,CAAC,UAAY;YACrE,oBAAC,UAAU,IAAC,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,oBAAoB,CAAC,GAAI;YACnE,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,qBAAqB,CAAC;gBACpD,CAAC,CAAC,qBAAqB,CAAC;;gBAAI,CAAC,CAAC,QAAQ,CAAC;;gBAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;oBACrE,CACJ,CACF,EACV;AACN;;;;"}

package/build/esm/src/components/file_picker/components/selected_file_preview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISelectedFilePreview } from "../types";
+declare const SelectedFilePreview: React.FC<ISelectedFilePreview>;
+export default SelectedFilePreview;

package/build/esm/src/components/file_picker/components/selected_file_preview.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from '../../../../node_modules/react-i18next/dist/es/useTranslation.js';
+import styles from '../../../css/file_picker/main.module.less.js';
+import IconDelete from '../../../assets/icon_delete.js';
+import CSS_CLASSES from '../css_classes.js';
+
+var SelectedFilePreview = function (_a) {
+    var file = _a.file, isPreview = _a.isPreview, onPreviewError = _a.onPreviewError, onFileDelete = _a.onFileDelete;
+    var t = useTranslation()[0];
+    return (React.createElement("div", { className: styles[CSS_CLASSES.filePicker] },
+        isPreview ? (React.createElement("img", { alt: "", src: (file === null || file === void 0 ? void 0 : file.fileUrl) || '', onError: onPreviewError, className: styles[CSS_CLASSES.filePickerImagePreview] })) : (React.createElement("div", null, t('No preview'))),
+        React.createElement("div", { className: styles[CSS_CLASSES.filePickerSelectedFile] },
+            React.createElement("p", { className: styles[CSS_CLASSES.filePickerSelectedFileDescription] }, file === null || file === void 0 ? void 0 : file.fileName),
+            React.createElement(IconDelete, { className: styles[CSS_CLASSES.filePickerDeleteIcon], onClick: onFileDelete }))));
+};
+
+export default SelectedFilePreview;
+//# sourceMappingURL=selected_file_preview.js.map

package/build/esm/src/components/file_picker/components/selected_file_preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selected_file_preview.js","sources":["../../../../../../src/components/file_picker/components/selected_file_preview.tsx"],"sourcesContent":["import React from 'react';\nimport styles from '@css/file_picker/main.module.less';\nimport IconDelete from '@assets/icon_delete';\nimport CSS_CLASSES from '../css_classes';\nimport { ISelectedFilePreview } from '@components/file_picker/types';\nimport { useTranslation } from 'react-i18next';\n\nconst SelectedFilePreview: React.FC<ISelectedFilePreview> = ({ file, isPreview, onPreviewError, onFileDelete }) => {\n    const [t] = useTranslation();\n\n    return (\n        <div className={styles[CSS_CLASSES.filePicker]}>\n            {isPreview ? (\n                <img alt=\"\" src={file?.fileUrl || ''} onError={onPreviewError} className={styles[CSS_CLASSES.filePickerImagePreview]} />\n            ) : (\n                <div>{t('No preview')}</div>\n            )}\n            <div className={styles[CSS_CLASSES.filePickerSelectedFile]}>\n                <p className={styles[CSS_CLASSES.filePickerSelectedFileDescription]}>{file?.fileName}</p>\n                <IconDelete className={styles[CSS_CLASSES.filePickerDeleteIcon]} onClick={onFileDelete} />\n            </div>\n        </div>\n    );\n};\n\nexport default SelectedFilePreview;\n"],"names":[],"mappings":";;;;;;IAOM,mBAAmB,GAAmC,UAAC,EAAiD;QAA/C,cAAI,EAAE,wBAAS,EAAE,kCAAc,EAAE,8BAAY;IACjG,IAAA,uBAAC,CAAqB;IAE7B,QACI,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC;QACzC,SAAS,IACN,6BAAK,GAAG,EAAC,EAAE,EAAC,GAAG,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,KAAI,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,sBAAsB,CAAC,GAAI,KAExH,iCAAM,CAAC,CAAC,YAAY,CAAC,CAAO,CAC/B;QACD,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,sBAAsB,CAAC;YACtD,2BAAG,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,iCAAiC,CAAC,IAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAK;YACzF,oBAAC,UAAU,IAAC,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,oBAAoB,CAAC,EAAE,OAAO,EAAE,YAAY,GAAI,CACxF,CACJ,EACR;AACN;;;;"}

package/build/esm/src/components/file_picker/css_classes.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    filePicker: string;
+    filePickerDescription: string;
+    filePickerImagePreview: string;
+    filePickerUploadIcon: string;
+    filePickerDeleteIcon: string;
+    filePickerInput: string;
+    filePickerSelectedFile: string;
+    filePickerSelectedFileDescription: string;
+};
+export default _default;

package/build/esm/src/components/file_picker/css_classes.js

@@ -0,0 +1,13 @@
+var CSS_CLASSES = {
+    filePicker: 'file-picker',
+    filePickerDescription: 'file-picker__description',
+    filePickerImagePreview: 'file-picker__image-preview',
+    filePickerUploadIcon: 'file-picker__upload-icon',
+    filePickerDeleteIcon: 'file-picker__delete-icon',
+    filePickerInput: 'file-picker__input',
+    filePickerSelectedFile: 'file-picker__selected-file',
+    filePickerSelectedFileDescription: 'file-picker__selected-file-description',
+};
+
+export default CSS_CLASSES;
+//# sourceMappingURL=css_classes.js.map

package/build/esm/src/components/file_picker/css_classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_classes.js","sources":["../../../../../src/components/file_picker/css_classes.ts"],"sourcesContent":["export default {\n    filePicker: 'file-picker',\n    filePickerDescription: 'file-picker__description',\n    filePickerImagePreview: 'file-picker__image-preview',\n    filePickerUploadIcon: 'file-picker__upload-icon',\n    filePickerDeleteIcon: 'file-picker__delete-icon',\n    filePickerInput: 'file-picker__input',\n    filePickerSelectedFile: 'file-picker__selected-file',\n    filePickerSelectedFileDescription: 'file-picker__selected-file-description',\n};\n"],"names":[],"mappings":"AAAA,kBAAe;IACX,UAAU,EAAE,aAAa;IACzB,qBAAqB,EAAE,0BAA0B;IACjD,sBAAsB,EAAE,4BAA4B;IACpD,oBAAoB,EAAE,0BAA0B;IAChD,oBAAoB,EAAE,0BAA0B;IAChD,eAAe,EAAE,oBAAoB;IACrC,sBAAsB,EAAE,4BAA4B;IACpD,iCAAiC,EAAE,wCAAwC;CAC9E;;;;"}

package/build/esm/src/components/file_picker/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IFilePicker } from "./types";
+declare const FilePicker: React.FC<IFilePicker>;
+export default FilePicker;

package/build/esm/src/components/file_picker/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from '../../css/file_picker/main.module.less.js';
+import CSS_CLASSES from './css_classes.js';
+import SelectedFilePreview from './components/selected_file_preview.js';
+import FileInput from './components/file_input.js';
+import { useFilePicker } from './use_file_picker.js';
+
+var FilePicker = function (_a) {
+    var id = _a.id, onChange = _a.onChange, _b = _a.allowedExtensions, allowedExtensions = _b === void 0 ? ['JPG', 'PNG', 'GIF'] : _b, initialFile = _a.initialFile, name = _a.name, _c = _a.className, className = _c === void 0 ? '' : _c;
+    var _d = useFilePicker({
+        initialFile: initialFile,
+        onChange: onChange,
+    }), onDropFile = _d.onDropFile, onFileChange = _d.onFileChange, onDragOver = _d.onDragOver, onDragLeave = _d.onDragLeave, onFileDelete = _d.onFileDelete, onPreviewError = _d.onPreviewError, file = _d.file, isPreview = _d.isPreview, isDragOver = _d.isDragOver;
+    return (React.createElement("div", { className: className },
+        file ? (React.createElement(SelectedFilePreview, { file: file, onFileDelete: onFileDelete, onPreviewError: onPreviewError, isPreview: isPreview })) : (React.createElement(FileInput, { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: onDropFile })),
+        React.createElement("input", { onChange: onFileChange, id: id, type: "file", name: name, className: styles[CSS_CLASSES.filePickerInput] })));
+};
+
+export default FilePicker;
+//# sourceMappingURL=index.js.map

package/build/esm/src/components/file_picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/file_picker/index.tsx"],"sourcesContent":["import React from 'react';\nimport styles from '@css/file_picker/main.module.less';\nimport SelectedFilePreview from '@components/file_picker/components/selected_file_preview';\nimport CSS_CLASSES from './css_classes';\nimport FileInput from '@components/file_picker/components/file_input';\nimport { useFilePicker } from '@components/file_picker/use_file_picker';\nimport { IFilePicker } from '@components/file_picker/types';\n\nconst FilePicker: React.FC<IFilePicker> = ({ id, onChange, allowedExtensions = ['JPG', 'PNG', 'GIF'], initialFile, name, className = '' }) => {\n    const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, isPreview, isDragOver } = useFilePicker({\n        initialFile,\n        onChange,\n    });\n\n    return (\n        <div className={className}>\n            {file ? (\n                <SelectedFilePreview file={file} onFileDelete={onFileDelete} onPreviewError={onPreviewError} isPreview={isPreview} />\n            ) : (\n                <FileInput\n                    onDragLeave={onDragLeave}\n                    onDragOver={onDragOver}\n                    isDragOver={isDragOver}\n                    allowedExtensions={allowedExtensions}\n                    id={id}\n                    onDropFile={onDropFile}\n                />\n            )}\n            <input onChange={onFileChange} id={id} type=\"file\" name={name} className={styles[CSS_CLASSES.filePickerInput]} />\n        </div>\n    );\n};\n\nexport default FilePicker;\n"],"names":[],"mappings":";;;;;;;IAQM,UAAU,GAA0B,UAAC,EAA8F;QAA5F,UAAE,EAAE,sBAAQ,EAAE,yBAAyC,EAAzC,8DAAyC,EAAE,4BAAW,EAAE,cAAI,EAAE,iBAAc,EAAd,mCAAc;IAC7H,IAAA;;;MAGJ,EAHM,0BAAU,EAAE,8BAAY,EAAE,0BAAU,EAAE,4BAAW,EAAE,8BAAY,EAAE,kCAAc,EAAE,cAAI,EAAE,wBAAS,EAAE,0BAGxG,CAAC;IAEH,QACI,6BAAK,SAAS,EAAE,SAAS;QACpB,IAAI,IACD,oBAAC,mBAAmB,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,GAAI,KAErH,oBAAC,SAAS,IACN,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,GACxB,CACL;QACD,+BAAO,QAAQ,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,GAAI,CAC/G,EACR;AACN;;;;"}

package/build/esm/src/components/file_picker/types.d.ts

@@ -0,0 +1,42 @@
+import React, { ChangeEvent } from 'react';
+export declare type TFilePickerFile = {
+    fileUrl: string;
+    fileName: string;
+};
+export interface IFilePicker {
+    id: string;
+    name?: string;
+    className?: string;
+    onChange?: (fileList: FileList | null) => void;
+    allowedExtensions?: string[];
+    initialFile?: TFilePickerFile;
+}
+export interface ISelectedFilePreview {
+    file: TFilePickerFile | null;
+    isPreview: boolean;
+    onPreviewError: () => void;
+    onFileDelete: () => void;
+}
+export interface IFileInput {
+    id: string;
+    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
+    allowedExtensions: string[];
+    isDragOver: boolean;
+}
+export interface IUseFilePicker {
+    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onFileDelete: () => void;
+    onPreviewError: () => void;
+    file: TFilePickerFile | null;
+    isPreview: boolean;
+    isDragOver: boolean;
+}
+export interface IUseFilePickerProps {
+    onChange?: (fileList: FileList | null) => void;
+    initialFile?: TFilePickerFile;
+}

package/build/esm/src/components/file_picker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/file_picker/types.ts"],"names":[],"mappings":"AAAA,OAAmC,OAAO,CAAC"}

package/build/esm/src/components/file_picker/use_file_picker.d.ts

@@ -0,0 +1,2 @@
+import { IUseFilePicker, IUseFilePickerProps } from "./types";
+export declare const useFilePicker: ({ onChange, initialFile }: IUseFilePickerProps) => IUseFilePicker;