@dreamcommerce/aurora 0.3.4-143 → 0.3.4-147

package/build/cjs/src/components/color_picker/use_color_picker.js

@@ -16,7 +16,7 @@ var useColorPicker = function (_a) {
     var screenName = use_screen_detect.useScreenDetect();
     React.useEffect(function () {
         onChange === null || onChange === void 0 ? void 0 : onChange(color);
-    }, [onChange, color]);
+    }, [color]);
     React.useEffect(function () {
         setColor(function (prevState) { return (_tslib.__assign(_tslib.__assign({}, prevState), { hex: initialColorHex })); });
     }, [initialColorHex]);

package/build/cjs/src/components/color_picker/use_color_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_color_picker.js","sources":["../../../../../src/components/color_picker/use_color_picker.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { SATURATION_OFFSET } from '@components/color_picker/constants';\nimport { useScreenDetect } from '@hooks/use_screen_detect';\nimport { IColor } from '@components/color_picker/types';\n\nexport const useColorPicker = ({ initialColorHex, onChange }: { initialColorHex: string; onChange?: (color: IColor) => void }) => {\n    const [color, setColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex });\n    const [initialColor, setInitialColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex });\n    const [hueSliderPointer, setHueSliderPointer] = useState({ top: 0, left: 0 });\n    const [saturationLightnessPointer, setSaturationLightnessPointer] = useState({ left: 0, top: 0 });\n    const screenName = useScreenDetect();\n\n    useEffect(() => {\n        onChange?.(color);\n    }, [onChange, color]);\n\n    useEffect(() => {\n        setColor((prevState) => ({ ...prevState, hex: initialColorHex }));\n    }, [initialColorHex]);\n\n    return {\n        color,\n        setColor,\n        initialColor,\n        setInitialColor,\n        hueSliderPointer,\n        setHueSliderPointer,\n        screenName,\n        saturationLightnessPointer,\n        setSaturationLightnessPointer,\n    };\n};\n"],"names":["useScreenDetect","useEffect"],"mappings":";;;;;;;;;IAKa,cAAc,GAAG,UAAC,EAA8F;QAA5F,oCAAe,EAAE,sBAAQ;IAChD,IAAA,8GAA6G,EAA5G,aAAK,EAAE,gBAAqG,CAAC;IAC9G,IAAA,8GAA2H,EAA1H,oBAAY,EAAE,uBAA4G,CAAC;IAC5H,IAAA,wCAAuE,EAAtE,wBAAgB,EAAE,2BAAoD,CAAC;IACxE,IAAA,wCAA2F,EAA1F,kCAA0B,EAAE,qCAA8D,CAAC;IAClG,IAAM,UAAU,GAAGA,iCAAe,EAAE,CAAC;IAErCC,eAAS,CAAC;QACN,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,EAAE;KACrB,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtBA,eAAS,CAAC;QACN,QAAQ,CAAC,UAAC,SAAS,IAAK,4CAAM,SAAS,KAAE,GAAG,EAAE,eAAe,OAAG,CAAC,CAAC;KACrE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO;QACH,KAAK,OAAA;QACL,QAAQ,UAAA;QACR,YAAY,cAAA;QACZ,eAAe,iBAAA;QACf,gBAAgB,kBAAA;QAChB,mBAAmB,qBAAA;QACnB,UAAU,YAAA;QACV,0BAA0B,4BAAA;QAC1B,6BAA6B,+BAAA;KAChC,CAAC;AACN;;;;"}
+{"version":3,"file":"use_color_picker.js","sources":["../../../../../src/components/color_picker/use_color_picker.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { SATURATION_OFFSET } from '@components/color_picker/constants';\nimport { useScreenDetect } from '@hooks/use_screen_detect';\nimport { IColor } from '@components/color_picker/types';\n\nexport const useColorPicker = ({ initialColorHex, onChange }: { initialColorHex: string; onChange?: (color: IColor) => void }) => {\n    const [color, setColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex });\n    const [initialColor, setInitialColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex });\n    const [hueSliderPointer, setHueSliderPointer] = useState({ top: 0, left: 0 });\n    const [saturationLightnessPointer, setSaturationLightnessPointer] = useState({ left: 0, top: 0 });\n    const screenName = useScreenDetect();\n\n    useEffect(() => {\n        onChange?.(color);\n    }, [color]);\n\n    useEffect(() => {\n        setColor((prevState) => ({ ...prevState, hex: initialColorHex }));\n    }, [initialColorHex]);\n\n    return {\n        color,\n        setColor,\n        initialColor,\n        setInitialColor,\n        hueSliderPointer,\n        setHueSliderPointer,\n        screenName,\n        saturationLightnessPointer,\n        setSaturationLightnessPointer,\n    };\n};\n"],"names":["useScreenDetect","useEffect"],"mappings":";;;;;;;;;IAKa,cAAc,GAAG,UAAC,EAA8F;QAA5F,oCAAe,EAAE,sBAAQ;IAChD,IAAA,8GAA6G,EAA5G,aAAK,EAAE,gBAAqG,CAAC;IAC9G,IAAA,8GAA2H,EAA1H,oBAAY,EAAE,uBAA4G,CAAC;IAC5H,IAAA,wCAAuE,EAAtE,wBAAgB,EAAE,2BAAoD,CAAC;IACxE,IAAA,wCAA2F,EAA1F,kCAA0B,EAAE,qCAA8D,CAAC;IAClG,IAAM,UAAU,GAAGA,iCAAe,EAAE,CAAC;IAErCC,eAAS,CAAC;QACN,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,EAAE;KACrB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZA,eAAS,CAAC;QACN,QAAQ,CAAC,UAAC,SAAS,IAAK,4CAAM,SAAS,KAAE,GAAG,EAAE,eAAe,OAAG,CAAC,CAAC;KACrE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO;QACH,KAAK,OAAA;QACL,QAAQ,UAAA;QACR,YAAY,cAAA;QACZ,eAAe,iBAAA;QACf,gBAAgB,kBAAA;QAChB,mBAAmB,qBAAA;QACnB,UAAU,YAAA;QACV,0BAA0B,4BAAA;QAC1B,6BAA6B,+BAAA;KAChC,CAAC;AACN;;;;"}

package/build/cjs/src/components/controls/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../../../src/components/controls/components/checkbox.tsx"],"sourcesContent":["import cssClasses from '@css/checkbox/main.module.less';\n\nimport React, { useEffect, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { ICheckboxProps } from '../types';\nimport { checkbox, checkboxDisabled, checkboxControl, checkboxLabel, checkboxIcon } from '../css_classes';\nimport IconTick from '@assets/icon_tick';\n\nconst Checkbox: React.FC<ICheckboxProps> = ({ id, name, value, initiallyChecked = false, disabled: isDisabled, onChange }): JSX.Element => {\n    const [isChecked, setIsChecked] = useState<boolean>(initiallyChecked);\n\n    const checkboxClasses = classnames(cssClasses[checkbox], {\n        [cssClasses[checkboxDisabled]]: isDisabled\n    });\n\n    const handleCheckboxChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(ev);\n        setIsChecked((prevState) => !prevState);\n    };\n\n    useEffect(() => {\n        setIsChecked(initiallyChecked);\n    }, [initiallyChecked]);\n\n    return (\n        <span className={checkboxClasses}>\n            <input\n                className={cssClasses[checkboxControl]}\n                id={id}\n                name={name}\n                type=\"checkbox\"\n                value={value}\n                checked={isChecked}\n                disabled={isDisabled}\n                onChange={handleCheckboxChange}\n            />\n\n            <label className={cssClasses[checkboxLabel]} htmlFor={id}>\n                <IconTick className={cssClasses[checkboxIcon]} />\n            </label>\n        </span>\n    );\n};\n\nexport default Checkbox;\n"],"names":["classnames","cssClasses","checkbox","checkboxDisabled","useEffect","React","checkboxControl","checkboxLabel","IconTick","checkboxIcon"],"mappings":";;;;;;;;;;;;;;;IASM,QAAQ,GAA6B,UAAC,EAA6E;;QAA3E,UAAE,EAAE,cAAI,EAAE,gBAAK,EAAE,wBAAwB,EAAxB,6CAAwB,EAAE,wBAAoB,EAAE,sBAAQ;IAC7G,IAAA,qCAA+D,EAA9D,iBAAS,EAAE,oBAAmD,CAAC;IAEtE,IAAM,eAAe,GAAGA,8BAAU,CAACC,sBAAU,CAACC,oBAAQ,CAAC;QACnD,GAACD,sBAAU,CAACE,4BAAgB,CAAC,IAAG,UAAU;YAC5C,CAAC;IAEH,IAAM,oBAAoB,GAAG,UAAC,EAAuC;QACjE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,EAAE;QACf,YAAY,CAAC,UAAC,SAAS,IAAK,OAAA,CAAC,SAAS,GAAA,CAAC,CAAC;KAC3C,CAAC;IAEFC,eAAS,CAAC;QACN,YAAY,CAAC,gBAAgB,CAAC,CAAC;KAClC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,QACIC,kDAAM,SAAS,EAAE,eAAe;QAC5BA,mDACI,SAAS,EAAEJ,sBAAU,CAACK,2BAAe,CAAC,EACtC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,oBAAoB,GAChC;QAEFD,mDAAO,SAAS,EAAEJ,sBAAU,CAACM,yBAAa,CAAC,EAAE,OAAO,EAAE,EAAE;YACpDF,wCAACG,oBAAQ,IAAC,SAAS,EAAEP,sBAAU,CAACQ,wBAAY,CAAC,GAAI,CAC7C,CACL,EACT;AACN;;;;"}
+{"version":3,"file":"checkbox.js","sources":["../../../../../../src/components/controls/components/checkbox.tsx"],"sourcesContent":["import cssClasses from '@css/checkbox/main.module.less';\n\nimport React, { useEffect, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { ICheckboxProps } from '../types';\nimport { checkbox, checkboxDisabled, checkboxControl, checkboxLabel, checkboxIcon } from '../css_classes';\nimport IconTick from '@assets/icon_tick';\n\nconst Checkbox: React.FC<ICheckboxProps> = ({ id, name, value, initiallyChecked = false, disabled: isDisabled, onChange }): JSX.Element => {\n    const [isChecked, setIsChecked] = useState<boolean>(initiallyChecked);\n\n    const checkboxClasses = classnames(cssClasses[checkbox], {\n        [cssClasses[checkboxDisabled]]: isDisabled,\n    });\n\n    const handleCheckboxChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(ev);\n        setIsChecked((prevState) => !prevState);\n    };\n\n    useEffect(() => {\n        setIsChecked(initiallyChecked);\n    }, [initiallyChecked]);\n\n    return (\n        <span className={checkboxClasses}>\n            <input\n                className={cssClasses[checkboxControl]}\n                id={id}\n                name={name}\n                type=\"checkbox\"\n                value={value}\n                checked={isChecked}\n                disabled={isDisabled}\n                onChange={handleCheckboxChange}\n            />\n\n            <label className={cssClasses[checkboxLabel]} htmlFor={id}>\n                <IconTick className={cssClasses[checkboxIcon]} />\n            </label>\n        </span>\n    );\n};\n\nexport default Checkbox;\n"],"names":["classnames","cssClasses","checkbox","checkboxDisabled","useEffect","React","checkboxControl","checkboxLabel","IconTick","checkboxIcon"],"mappings":";;;;;;;;;;;;;;;IASM,QAAQ,GAA6B,UAAC,EAA6E;;QAA3E,UAAE,EAAE,cAAI,EAAE,gBAAK,EAAE,wBAAwB,EAAxB,6CAAwB,EAAE,wBAAoB,EAAE,sBAAQ;IAC7G,IAAA,qCAA+D,EAA9D,iBAAS,EAAE,oBAAmD,CAAC;IAEtE,IAAM,eAAe,GAAGA,8BAAU,CAACC,sBAAU,CAACC,oBAAQ,CAAC;QACnD,GAACD,sBAAU,CAACE,4BAAgB,CAAC,IAAG,UAAU;YAC5C,CAAC;IAEH,IAAM,oBAAoB,GAAG,UAAC,EAAuC;QACjE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,EAAE;QACf,YAAY,CAAC,UAAC,SAAS,IAAK,OAAA,CAAC,SAAS,GAAA,CAAC,CAAC;KAC3C,CAAC;IAEFC,eAAS,CAAC;QACN,YAAY,CAAC,gBAAgB,CAAC,CAAC;KAClC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,QACIC,kDAAM,SAAS,EAAE,eAAe;QAC5BA,mDACI,SAAS,EAAEJ,sBAAU,CAACK,2BAAe,CAAC,EACtC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,oBAAoB,GAChC;QAEFD,mDAAO,SAAS,EAAEJ,sBAAU,CAACM,yBAAa,CAAC,EAAE,OAAO,EAAE,EAAE;YACpDF,wCAACG,oBAAQ,IAAC,SAAS,EAAEP,sBAAU,CAACQ,wBAAY,CAAC,GAAI,CAC7C,CACL,EACT;AACN;;;;"}

package/build/cjs/src/components/dropdown/hoc/select/index.js

@@ -122,7 +122,7 @@ var Select = function (_a) {
     /**
      * hook with option list state, and method to change option list
      */
-    var _k = React.useState(options), optionsList = _k[0], setOptionsList = _k[1];
+    var _k = React.useState([]), optionsList = _k[0], setOptionsList = _k[1];
     /**
      * hook with selected value, and method do change it
      */
@@ -135,6 +135,9 @@ var Select = function (_a) {
      * hook which resets options list to default on close if select has search and it was used
      */
     use_set_options_on_close.useSetOptionsOnClose(isWithSearch, isOpen, setOptionsList, options);
+    React.useEffect(function () {
+        setOptionsList(options);
+    }, [options]);
     return (React__default['default'].createElement(index.DropdownContext.Provider, { value: value },
         React__default['default'].createElement("div", { ref: wrapperRef, className: main_module['default'][css_classes.cssDropdown] },
             React__default['default'].createElement(index$1['default'].Select, { name: name, isReadonly: isReadonly, isDisabled: isDisabled, selectedOptions: selectedValues }),

package/build/cjs/src/components/dropdown/hoc/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../src/components/dropdown/hoc/select/index.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport cssClasses from '@css/dropdown/main.module.less';\nimport Dropdown from '../../index';\nimport { ISelectProps, ISelectOption } from '../../types';\nimport { DropdownContext } from '../../context';\nimport { useToggle, useSetOptionsOnClose, useValue } from '../../hooks';\nimport { handleSearchKeyUp, handleItemClick, isSelected } from '../../utilities';\nimport { cssDropdown } from '../../css_classes';\n/**\n * Select component. Build with Dropdown composed components.\n *\n * @component\n * @example\n * const options = [{\n *  text: 'Option 1',\n *  value: 'value1'\n * }, {\n *  text: 'Option 2,,\n *  value: 'value2'\n * }];\n * return (\n *  <Select name=\"my_select_name\" options={options} onChange={(option) => console.log(option)} />\n * )\n */\nconst Select: React.FC<ISelectProps> = ({\n    /**\n     * select name, used also for hidden inputs\n     */\n    name,\n\n    /**\n     * array of select options\n     */\n    options,\n\n    /**\n     * array of default values (for select its always one element), array is used to be compatible with multiselects\n     */\n    defaultValues = [],\n\n    /**\n     * indicates if select is readonly\n     */\n    isReadonly = false,\n\n    /**\n     * indicates if select is disabled\n     */\n    isDisabled = false,\n\n    /**\n     * indicates if selects has groups (similar to optgroup), options then have left-padding, and you should use options with isHeader set to true\n     */\n    isWithGroups = false,\n\n    /**\n     * indicates if select should have search to look for options\n     */\n    isWithSearch = false,\n\n    /**\n     * indicates if select should be opened at render\n     */\n    defaultIsOpen = false,\n\n    /**\n     * indicates if select should hide on option click\n     */\n    defaultCloseOnClick = true,\n\n    /**\n     * called on select toggle\n     */\n    onToggle,\n\n    /**\n     * called on option change\n     */\n    onChange,\n    /**\n     * Place where portal should be placed, by default to body\n     * this can be used to put modal inside modal\n     */\n    portalContainer\n}) => {\n    /**\n     * reference to dropdown wrapper element\n     */\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    /**\n     * isOpen provides state if dropdown is open(visible), toggleDropdown is a function which toggles dropdown content\n     */\n    const [isOpen, toggleDropdown] = useToggle(defaultIsOpen, onToggle);\n\n    /**\n     * hook with option list state, and method to change option list\n     */\n    const [optionsList, setOptionsList] = useState(options);\n\n    /**\n     * hook with selected value, and method do change it\n     */\n    const [selectedValues, setSelectedValues] = useValue(wrapperRef, options, defaultValues, onChange);\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    /**\n     * hook which resets options list to default on close if select has search and it was used\n     */\n    useSetOptionsOnClose(isWithSearch, isOpen, setOptionsList, options);\n\n    return (\n        <DropdownContext.Provider value={value}>\n            <div ref={wrapperRef} className={cssClasses[cssDropdown]}>\n                <Dropdown.Select name={name} isReadonly={isReadonly} isDisabled={isDisabled} selectedOptions={selectedValues} />\n\n                <Dropdown.Content portalContainer={portalContainer}>\n                    {isWithSearch && <Dropdown.Search onKeyUp={(ev) => handleSearchKeyUp(ev, options, setOptionsList)} />}\n\n                    <Dropdown.List isWithGroups={isWithGroups}>\n                        {optionsList?.map((option: ISelectOption) =>\n                            option.isHeader ? (\n                                <Dropdown.Header key={option.text} text={option.text} />\n                            ) : (\n                                <Dropdown.Option\n                                    key={option.value}\n                                    option={option}\n                                    isSelected={isSelected(option, selectedValues)}\n                                    isDisabled={option.isDisabled ?? isDisabled}\n                                    isReadonly={option.isReadonly ?? isReadonly}\n                                    onClick={(option) => handleItemClick(option, defaultCloseOnClick, setSelectedValues, toggleDropdown)}\n                                />\n                            )\n                        )}\n                    </Dropdown.List>\n                </Dropdown.Content>\n            </div>\n        </DropdownContext.Provider>\n    );\n};\n\nexport default Select;\n"],"names":["useRef","React","useSetOptionsOnClose","DropdownContext","cssClasses","cssDropdown","Dropdown","handleSearchKeyUp","isSelected","handleItemClick"],"mappings":";;;;;;;;;;;;;;;;;;AAQA;;;;;;;;;;;;;;;;IAgBM,MAAM,GAA2B,UAAC,EA4DvC;;;;;IAxDG,cAAI;;;;IAKJ,oBAAO;;;;IAKP,qBAAkB;;;;IAAlB,uCAAkB;;;;IAKlB,kBAAkB;;;;IAAlB,uCAAkB;;;;IAKlB,kBAAkB;;;;IAAlB,uCAAkB;;;;IAKlB,oBAAoB;;;;IAApB,yCAAoB;;;;IAKpB,oBAAoB;;;;IAApB,yCAAoB;;;;IAKpB,qBAAqB;;;;IAArB,0CAAqB;;;;IAKrB,2BAA0B;;;;IAA1B,+CAA0B;;;;IAK1B,sBAAQ;;;;IAKR,sBAAQ;;;;;IAKR,oCAAe;;;;IAKf,IAAM,UAAU,GAAGA,YAAM,CAAiB,IAAI,CAAC,CAAC;;;;IAK1C,IAAA,kDAA6D,EAA5D,cAAM,EAAE,sBAAoD,CAAC;;;;IAK9D,IAAA,4BAAiD,EAAhD,mBAAW,EAAE,sBAAmC,CAAC;;;;IAKlD,IAAA,qEAA4F,EAA3F,sBAAc,EAAE,yBAA2E,CAAC;;;;IAKnG,IAAM,KAAK,GAAGC,yBAAK,CAAC,OAAO,CAAC,cAAM,QAAC,EAAE,UAAU,YAAA,EAAE,MAAM,QAAA,EAAE,cAAc,gBAAA,EAAE,IAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;;;;IAKtGC,6CAAoB,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;IAEpE,QACID,wCAACE,qBAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QAClCF,iDAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAEG,sBAAU,CAACC,uBAAW,CAAC;YACpDJ,wCAACK,kBAAQ,CAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,GAAI;YAEhHL,wCAACK,kBAAQ,CAAC,OAAO,IAAC,eAAe,EAAE,eAAe;gBAC7C,YAAY,IAAIL,wCAACK,kBAAQ,CAAC,MAAM,IAAC,OAAO,EAAE,UAAC,EAAE,IAAK,OAAAC,2BAAiB,CAAC,EAAE,EAAE,OAAO,EAAE,cAAc,CAAC,GAAA,GAAI;gBAErGN,wCAACK,kBAAQ,CAAC,IAAI,IAAC,YAAY,EAAE,YAAY,IACpC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,GAAG,CAAC,UAAC,MAAqB;;oBACpC,OAAA,MAAM,CAAC,QAAQ,IACXL,wCAACK,kBAAQ,CAAC,MAAM,IAAC,GAAG,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,KAExDL,wCAACK,kBAAQ,CAAC,MAAM,IACZ,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,MAAM,EAAE,MAAM,EACd,UAAU,EAAEE,oBAAU,CAAC,MAAM,EAAE,cAAc,CAAC,EAC9C,UAAU,QAAE,MAAM,CAAC,UAAU,mCAAI,UAAU,EAC3C,UAAU,QAAE,MAAM,CAAC,UAAU,mCAAI,UAAU,EAC3C,OAAO,EAAE,UAAC,MAAM,IAAK,OAAAC,yBAAe,CAAC,MAAM,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,cAAc,CAAC,GAAA,GACtG,CACL,CAAA;iBAAA,EAEO,CACD,CACjB,CACiB,EAC7B;AACN;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/dropdown/hoc/select/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport cssClasses from '@css/dropdown/main.module.less';\nimport Dropdown from '../../index';\nimport { ISelectProps, ISelectOption } from '../../types';\nimport { DropdownContext } from '../../context';\nimport { useToggle, useSetOptionsOnClose, useValue } from '../../hooks';\nimport { handleSearchKeyUp, handleItemClick, isSelected } from '../../utilities';\nimport { cssDropdown } from '../../css_classes';\n/**\n * Select component. Build with Dropdown composed components.\n *\n * @component\n * @example\n * const options = [{\n *  text: 'Option 1',\n *  value: 'value1'\n * }, {\n *  text: 'Option 2,,\n *  value: 'value2'\n * }];\n * return (\n *  <Select name=\"my_select_name\" options={options} onChange={(option) => console.log(option)} />\n * )\n */\nconst Select: React.FC<ISelectProps> = ({\n    /**\n     * select name, used also for hidden inputs\n     */\n    name,\n\n    /**\n     * array of select options\n     */\n    options,\n\n    /**\n     * array of default values (for select its always one element), array is used to be compatible with multiselects\n     */\n    defaultValues = [],\n\n    /**\n     * indicates if select is readonly\n     */\n    isReadonly = false,\n\n    /**\n     * indicates if select is disabled\n     */\n    isDisabled = false,\n\n    /**\n     * indicates if selects has groups (similar to optgroup), options then have left-padding, and you should use options with isHeader set to true\n     */\n    isWithGroups = false,\n\n    /**\n     * indicates if select should have search to look for options\n     */\n    isWithSearch = false,\n\n    /**\n     * indicates if select should be opened at render\n     */\n    defaultIsOpen = false,\n\n    /**\n     * indicates if select should hide on option click\n     */\n    defaultCloseOnClick = true,\n\n    /**\n     * called on select toggle\n     */\n    onToggle,\n\n    /**\n     * called on option change\n     */\n    onChange,\n    /**\n     * Place where portal should be placed, by default to body\n     * this can be used to put modal inside modal\n     */\n    portalContainer,\n}) => {\n    /**\n     * reference to dropdown wrapper element\n     */\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    /**\n     * isOpen provides state if dropdown is open(visible), toggleDropdown is a function which toggles dropdown content\n     */\n    const [isOpen, toggleDropdown] = useToggle(defaultIsOpen, onToggle);\n\n    /**\n     * hook with option list state, and method to change option list\n     */\n    const [optionsList, setOptionsList] = useState<ISelectOption[]>([]);\n\n    /**\n     * hook with selected value, and method do change it\n     */\n    const [selectedValues, setSelectedValues] = useValue(wrapperRef, options, defaultValues, onChange);\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    /**\n     * hook which resets options list to default on close if select has search and it was used\n     */\n    useSetOptionsOnClose(isWithSearch, isOpen, setOptionsList, options);\n\n    useEffect(() => {\n        setOptionsList(options);\n    }, [options]);\n\n    return (\n        <DropdownContext.Provider value={value}>\n            <div ref={wrapperRef} className={cssClasses[cssDropdown]}>\n                <Dropdown.Select name={name} isReadonly={isReadonly} isDisabled={isDisabled} selectedOptions={selectedValues} />\n\n                <Dropdown.Content portalContainer={portalContainer}>\n                    {isWithSearch && <Dropdown.Search onKeyUp={(ev) => handleSearchKeyUp(ev, options, setOptionsList)} />}\n\n                    <Dropdown.List isWithGroups={isWithGroups}>\n                        {optionsList?.map((option: ISelectOption) =>\n                            option.isHeader ? (\n                                <Dropdown.Header key={option.text} text={option.text} />\n                            ) : (\n                                <Dropdown.Option\n                                    key={option.value}\n                                    option={option}\n                                    isSelected={isSelected(option, selectedValues)}\n                                    isDisabled={option.isDisabled ?? isDisabled}\n                                    isReadonly={option.isReadonly ?? isReadonly}\n                                    onClick={(option) => handleItemClick(option, defaultCloseOnClick, setSelectedValues, toggleDropdown)}\n                                />\n                            )\n                        )}\n                    </Dropdown.List>\n                </Dropdown.Content>\n            </div>\n        </DropdownContext.Provider>\n    );\n};\n\nexport default Select;\n"],"names":["useRef","React","useSetOptionsOnClose","useEffect","DropdownContext","cssClasses","cssDropdown","Dropdown","handleSearchKeyUp","isSelected","handleItemClick"],"mappings":";;;;;;;;;;;;;;;;;;AAQA;;;;;;;;;;;;;;;;IAgBM,MAAM,GAA2B,UAAC,EA4DvC;;;;;IAxDG,cAAI;;;;IAKJ,oBAAO;;;;IAKP,qBAAkB;;;;IAAlB,uCAAkB;;;;IAKlB,kBAAkB;;;;IAAlB,uCAAkB;;;;IAKlB,kBAAkB;;;;IAAlB,uCAAkB;;;;IAKlB,oBAAoB;;;;IAApB,yCAAoB;;;;IAKpB,oBAAoB;;;;IAApB,yCAAoB;;;;IAKpB,qBAAqB;;;;IAArB,0CAAqB;;;;IAKrB,2BAA0B;;;;IAA1B,+CAA0B;;;;IAK1B,sBAAQ;;;;IAKR,sBAAQ;;;;;IAKR,oCAAe;;;;IAKf,IAAM,UAAU,GAAGA,YAAM,CAAiB,IAAI,CAAC,CAAC;;;;IAK1C,IAAA,kDAA6D,EAA5D,cAAM,EAAE,sBAAoD,CAAC;;;;IAK9D,IAAA,uBAA6D,EAA5D,mBAAW,EAAE,sBAA+C,CAAC;;;;IAK9D,IAAA,qEAA4F,EAA3F,sBAAc,EAAE,yBAA2E,CAAC;;;;IAKnG,IAAM,KAAK,GAAGC,yBAAK,CAAC,OAAO,CAAC,cAAM,QAAC,EAAE,UAAU,YAAA,EAAE,MAAM,QAAA,EAAE,cAAc,gBAAA,EAAE,IAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;;;;IAKtGC,6CAAoB,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;IAEpEC,eAAS,CAAC;QACN,cAAc,CAAC,OAAO,CAAC,CAAC;KAC3B,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,QACIF,wCAACG,qBAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QAClCH,iDAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAEI,sBAAU,CAACC,uBAAW,CAAC;YACpDL,wCAACM,kBAAQ,CAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,GAAI;YAEhHN,wCAACM,kBAAQ,CAAC,OAAO,IAAC,eAAe,EAAE,eAAe;gBAC7C,YAAY,IAAIN,wCAACM,kBAAQ,CAAC,MAAM,IAAC,OAAO,EAAE,UAAC,EAAE,IAAK,OAAAC,2BAAiB,CAAC,EAAE,EAAE,OAAO,EAAE,cAAc,CAAC,GAAA,GAAI;gBAErGP,wCAACM,kBAAQ,CAAC,IAAI,IAAC,YAAY,EAAE,YAAY,IACpC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,GAAG,CAAC,UAAC,MAAqB;;oBACpC,OAAA,MAAM,CAAC,QAAQ,IACXN,wCAACM,kBAAQ,CAAC,MAAM,IAAC,GAAG,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,KAExDN,wCAACM,kBAAQ,CAAC,MAAM,IACZ,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,MAAM,EAAE,MAAM,EACd,UAAU,EAAEE,oBAAU,CAAC,MAAM,EAAE,cAAc,CAAC,EAC9C,UAAU,QAAE,MAAM,CAAC,UAAU,mCAAI,UAAU,EAC3C,UAAU,QAAE,MAAM,CAAC,UAAU,mCAAI,UAAU,EAC3C,OAAO,EAAE,UAAC,MAAM,IAAK,OAAAC,yBAAe,CAAC,MAAM,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,cAAc,CAAC,GAAA,GACtG,CACL,CAAA;iBAAA,EAEO,CACD,CACjB,CACiB,EAC7B;AACN;;;;"}

package/build/cjs/src/components/dropdown/hooks/use_value.js

@@ -17,8 +17,7 @@ var React = require('react');
  * @returns {Array} Tuple - selected values and state setter for them
  */
 function useValue(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 = React.useState(defaultSelectedOptions), selectedValues = _a[0], setSelectedValue = _a[1];
+    var _a = React.useState([]), selectedValues = _a[0], setSelectedValue = _a[1];
     var setSelectedValues = React.useCallback(function (selectedOption) {
         var _a;
         setSelectedValue(function () { return [selectedOption]; });
@@ -26,12 +25,16 @@ function useValue(wrapperRef, options, defaultValues, onChangeCb) {
             onChangeCb(selectedOption);
             var event_1 = new CustomEvent('dropdown:change', {
                 detail: {
-                    selectedOption: selectedOption
-                }
+                    selectedOption: selectedOption,
+                },
             });
             (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event_1);
         }
     }, [onChangeCb, wrapperRef]);
+    React.useEffect(function () {
+        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; });
+        setSelectedValue(defaultSelectedOptions);
+    }, [defaultValues]);
     return [selectedValues, setSelectedValues];
 }
 /**

package/build/cjs/src/components/dropdown/hooks/use_value.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_value.js","sources":["../../../../../../src/components/dropdown/hooks/use_value.ts"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { ISelectOption } from '../types';\n\n/**\n * Hook used to allow use single selectable value, returns array of selected values and method to set value as selected\n * You can use is for select or any other form of control which needs single selectable value\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 useValue(\n    wrapperRef: React.RefObject<HTMLElement>,\n    options: Array<ISelectOption>,\n    defaultValues: Array<string>,\n    onChangeCb?: (selectedOption: 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    const setSelectedValues = useCallback(\n        (selectedOption: ISelectOption) => {\n            setSelectedValue(() => [selectedOption]);\n\n            if (typeof onChangeCb === 'function') {\n                onChangeCb(selectedOption);\n                const event = new CustomEvent('dropdown:change', {\n                    detail: {\n                        selectedOption\n                    }\n                });\n                wrapperRef.current?.dispatchEvent(event);\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 */\n"],"names":["useCallback"],"mappings":";;;;;;AAGA;;;;;;;;;;;;SAYgB,QAAQ,CACpB,UAAwC,EACxC,OAA6B,EAC7B,aAA4B,EAC5B,UAAoD;IAEpD,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,2CAAqE,EAApE,sBAAc,EAAE,wBAAoD,CAAC;IAE5E,IAAM,iBAAiB,GAAGA,iBAAW,CACjC,UAAC,cAA6B;;QAC1B,gBAAgB,CAAC,cAAM,OAAA,CAAC,cAAc,CAAC,GAAA,CAAC,CAAC;QAEzC,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE;YAClC,UAAU,CAAC,cAAc,CAAC,CAAC;YAC3B,IAAM,OAAK,GAAG,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBAC7C,MAAM,EAAE;oBACJ,cAAc,gBAAA;iBACjB;aACJ,CAAC,CAAC;YACH,MAAA,UAAU,CAAC,OAAO,0CAAE,aAAa,CAAC,OAAK,EAAE;SAC5C;KACJ,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CAC3B,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAC/C,CAAC;AAED;;;;;;;;;;"}
+{"version":3,"file":"use_value.js","sources":["../../../../../../src/components/dropdown/hooks/use_value.ts"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { ISelectOption } from '../types';\n\n/**\n * Hook used to allow use single selectable value, returns array of selected values and method to set value as selected\n * You can use is for select or any other form of control which needs single selectable value\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 useValue(\n    wrapperRef: React.RefObject<HTMLElement>,\n    options: Array<ISelectOption>,\n    defaultValues: Array<string>,\n    onChangeCb?: (selectedOption: ISelectOption) => void\n): [ISelectOption[], (selectedOption: ISelectOption) => void] {\n    const [selectedValues, setSelectedValue] = useState([] as ISelectOption[]);\n\n    const setSelectedValues = useCallback(\n        (selectedOption: ISelectOption) => {\n            setSelectedValue(() => [selectedOption]);\n\n            if (typeof onChangeCb === 'function') {\n                onChangeCb(selectedOption);\n                const event = new CustomEvent('dropdown:change', {\n                    detail: {\n                        selectedOption,\n                    },\n                });\n                wrapperRef.current?.dispatchEvent(event);\n            }\n        },\n        [onChangeCb, wrapperRef]\n    );\n\n    useEffect(() => {\n        const defaultSelectedOptions = options?.filter((option) => defaultValues && defaultValues?.indexOf(option.value) >= 0);\n\n        setSelectedValue(defaultSelectedOptions);\n    }, [defaultValues]);\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 */\n"],"names":["useCallback","useEffect"],"mappings":";;;;;;AAGA;;;;;;;;;;;;SAYgB,QAAQ,CACpB,UAAwC,EACxC,OAA6B,EAC7B,aAA4B,EAC5B,UAAoD;IAE9C,IAAA,uBAAoE,EAAnE,sBAAc,EAAE,wBAAmD,CAAC;IAE3E,IAAM,iBAAiB,GAAGA,iBAAW,CACjC,UAAC,cAA6B;;QAC1B,gBAAgB,CAAC,cAAM,OAAA,CAAC,cAAc,CAAC,GAAA,CAAC,CAAC;QAEzC,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE;YAClC,UAAU,CAAC,cAAc,CAAC,CAAC;YAC3B,IAAM,OAAK,GAAG,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBAC7C,MAAM,EAAE;oBACJ,cAAc,gBAAA;iBACjB;aACJ,CAAC,CAAC;YACH,MAAA,UAAU,CAAC,OAAO,0CAAE,aAAa,CAAC,OAAK,EAAE;SAC5C;KACJ,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CAC3B,CAAC;IAEFC,eAAS,CAAC;QACN,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;QAEvH,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;KAC5C,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAC/C,CAAC;AAED;;;;;;;;;;"}

package/build/cjs/src/components/heading/index.js

@@ -12,8 +12,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 var Heading = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'h1' : _b, isSubheading = _a.isSubheading, children = _a.children;
-    var classes = classnames__default['default'](main_module['default'][as]);
+    var _b = _a.as, as = _b === void 0 ? 'h1' : _b, isSubheading = _a.isSubheading, withHeadline = _a.withHeadline, children = _a.children;
+    var classes = classnames__default['default'](main_module['default'][as], withHeadline && main_module['default'].head_line);
     if (!isSubheading) {
         return React__default['default'].createElement("" + as, {
             className: classes

package/build/cjs/src/components/heading/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/heading/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classnames from 'classnames';\nimport cssClasses from '@css/heading/main.module.less';\n\nimport { IHeadingProps } from './types';\n\nconst Heading: React.FC<IHeadingProps> = ({ as = 'h1', isSubheading, children }): JSX.Element => {\n    const classes = classnames(cssClasses[as]);\n\n    if (!isSubheading) {\n        return React.createElement(\n            `${as}`,\n            {\n                className: classes\n            },\n            children\n        );\n    }\n\n    return <span className={classes}>{children}</span>;\n};\n\nexport default Heading;"],"names":["classnames","cssClasses","React"],"mappings":";;;;;;;;;;;;;IAOM,OAAO,GAA4B,UAAC,EAAqC;QAAnC,UAAS,EAAT,8BAAS,EAAE,8BAAY,EAAE,sBAAQ;IACzE,IAAM,OAAO,GAAGA,8BAAU,CAACC,sBAAU,CAAC,EAAE,CAAC,CAAC,CAAC;IAE3C,IAAI,CAAC,YAAY,EAAE;QACf,OAAOC,yBAAK,CAAC,aAAa,CACtB,KAAG,EAAI,EACP;YACI,SAAS,EAAE,OAAO;SACrB,EACD,QAAQ,CACX,CAAC;KACL;IAED,OAAOA,kDAAM,SAAS,EAAE,OAAO,IAAG,QAAQ,CAAQ,CAAC;AACvD;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/heading/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classnames from 'classnames';\nimport cssClasses from '@css/heading/main.module.less';\n\nimport { IHeadingProps } from './types';\n\nconst Heading: React.FC<IHeadingProps> = ({ as = 'h1', isSubheading, withHeadline, children }): JSX.Element => {\n    const classes = classnames(cssClasses[as], withHeadline && cssClasses.head_line);\n\n    if (!isSubheading) {\n        return React.createElement(\n            `${as}`,\n            {\n                className: classes\n            },\n            children\n        );\n    }\n\n    return <span className={classes}>{children}</span>;\n};\n\nexport default Heading;"],"names":["classnames","cssClasses","React"],"mappings":";;;;;;;;;;;;;IAOM,OAAO,GAA4B,UAAC,EAAmD;QAAjD,UAAS,EAAT,8BAAS,EAAE,8BAAY,EAAE,8BAAY,EAAE,sBAAQ;IACvF,IAAM,OAAO,GAAGA,8BAAU,CAACC,sBAAU,CAAC,EAAE,CAAC,EAAE,YAAY,IAAIA,sBAAU,CAAC,SAAS,CAAC,CAAC;IAEjF,IAAI,CAAC,YAAY,EAAE;QACf,OAAOC,yBAAK,CAAC,aAAa,CACtB,KAAG,EAAI,EACP;YACI,SAAS,EAAE,OAAO;SACrB,EACD,QAAQ,CACX,CAAC;KACL;IAED,OAAOA,kDAAM,SAAS,EAAE,OAAO,IAAG,QAAQ,CAAQ,CAAC;AACvD;;;;"}

package/build/esm/src/components/color_picker/use_color_picker.js

@@ -12,7 +12,7 @@ var useColorPicker = function (_a) {
     var screenName = useScreenDetect();
     useEffect(function () {
         onChange === null || onChange === void 0 ? void 0 : onChange(color);
-    }, [onChange, color]);
+    }, [color]);
     useEffect(function () {
         setColor(function (prevState) { return (__assign(__assign({}, prevState), { hex: initialColorHex })); });
     }, [initialColorHex]);

package/build/esm/src/components/color_picker/use_color_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_color_picker.js","sources":["../../../../../src/components/color_picker/use_color_picker.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { SATURATION_OFFSET } from '@components/color_picker/constants';\nimport { useScreenDetect } from '@hooks/use_screen_detect';\nimport { IColor } from '@components/color_picker/types';\n\nexport const useColorPicker = ({ initialColorHex, onChange }: { initialColorHex: string; onChange?: (color: IColor) => void }) => {\n    const [color, setColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex });\n    const [initialColor, setInitialColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex });\n    const [hueSliderPointer, setHueSliderPointer] = useState({ top: 0, left: 0 });\n    const [saturationLightnessPointer, setSaturationLightnessPointer] = useState({ left: 0, top: 0 });\n    const screenName = useScreenDetect();\n\n    useEffect(() => {\n        onChange?.(color);\n    }, [onChange, color]);\n\n    useEffect(() => {\n        setColor((prevState) => ({ ...prevState, hex: initialColorHex }));\n    }, [initialColorHex]);\n\n    return {\n        color,\n        setColor,\n        initialColor,\n        setInitialColor,\n        hueSliderPointer,\n        setHueSliderPointer,\n        screenName,\n        saturationLightnessPointer,\n        setSaturationLightnessPointer,\n    };\n};\n"],"names":[],"mappings":";;;;;IAKa,cAAc,GAAG,UAAC,EAA8F;QAA5F,oCAAe,EAAE,sBAAQ;IAChD,IAAA,8FAA6G,EAA5G,aAAK,EAAE,gBAAqG,CAAC;IAC9G,IAAA,8FAA2H,EAA1H,oBAAY,EAAE,uBAA4G,CAAC;IAC5H,IAAA,kCAAuE,EAAtE,wBAAgB,EAAE,2BAAoD,CAAC;IACxE,IAAA,kCAA2F,EAA1F,kCAA0B,EAAE,qCAA8D,CAAC;IAClG,IAAM,UAAU,GAAG,eAAe,EAAE,CAAC;IAErC,SAAS,CAAC;QACN,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,EAAE;KACrB,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtB,SAAS,CAAC;QACN,QAAQ,CAAC,UAAC,SAAS,IAAK,8BAAM,SAAS,KAAE,GAAG,EAAE,eAAe,OAAG,CAAC,CAAC;KACrE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO;QACH,KAAK,OAAA;QACL,QAAQ,UAAA;QACR,YAAY,cAAA;QACZ,eAAe,iBAAA;QACf,gBAAgB,kBAAA;QAChB,mBAAmB,qBAAA;QACnB,UAAU,YAAA;QACV,0BAA0B,4BAAA;QAC1B,6BAA6B,+BAAA;KAChC,CAAC;AACN;;;;"}
+{"version":3,"file":"use_color_picker.js","sources":["../../../../../src/components/color_picker/use_color_picker.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { SATURATION_OFFSET } from '@components/color_picker/constants';\nimport { useScreenDetect } from '@hooks/use_screen_detect';\nimport { IColor } from '@components/color_picker/types';\n\nexport const useColorPicker = ({ initialColorHex, onChange }: { initialColorHex: string; onChange?: (color: IColor) => void }) => {\n    const [color, setColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex });\n    const [initialColor, setInitialColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex });\n    const [hueSliderPointer, setHueSliderPointer] = useState({ top: 0, left: 0 });\n    const [saturationLightnessPointer, setSaturationLightnessPointer] = useState({ left: 0, top: 0 });\n    const screenName = useScreenDetect();\n\n    useEffect(() => {\n        onChange?.(color);\n    }, [color]);\n\n    useEffect(() => {\n        setColor((prevState) => ({ ...prevState, hex: initialColorHex }));\n    }, [initialColorHex]);\n\n    return {\n        color,\n        setColor,\n        initialColor,\n        setInitialColor,\n        hueSliderPointer,\n        setHueSliderPointer,\n        screenName,\n        saturationLightnessPointer,\n        setSaturationLightnessPointer,\n    };\n};\n"],"names":[],"mappings":";;;;;IAKa,cAAc,GAAG,UAAC,EAA8F;QAA5F,oCAAe,EAAE,sBAAQ;IAChD,IAAA,8FAA6G,EAA5G,aAAK,EAAE,gBAAqG,CAAC;IAC9G,IAAA,8FAA2H,EAA1H,oBAAY,EAAE,uBAA4G,CAAC;IAC5H,IAAA,kCAAuE,EAAtE,wBAAgB,EAAE,2BAAoD,CAAC;IACxE,IAAA,kCAA2F,EAA1F,kCAA0B,EAAE,qCAA8D,CAAC;IAClG,IAAM,UAAU,GAAG,eAAe,EAAE,CAAC;IAErC,SAAS,CAAC;QACN,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,EAAE;KACrB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC;QACN,QAAQ,CAAC,UAAC,SAAS,IAAK,8BAAM,SAAS,KAAE,GAAG,EAAE,eAAe,OAAG,CAAC,CAAC;KACrE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO;QACH,KAAK,OAAA;QACL,QAAQ,UAAA;QACR,YAAY,cAAA;QACZ,eAAe,iBAAA;QACf,gBAAgB,kBAAA;QAChB,mBAAmB,qBAAA;QACnB,UAAU,YAAA;QACV,0BAA0B,4BAAA;QAC1B,6BAA6B,+BAAA;KAChC,CAAC;AACN;;;;"}

package/build/esm/src/components/controls/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../../../src/components/controls/components/checkbox.tsx"],"sourcesContent":["import cssClasses from '@css/checkbox/main.module.less';\n\nimport React, { useEffect, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { ICheckboxProps } from '../types';\nimport { checkbox, checkboxDisabled, checkboxControl, checkboxLabel, checkboxIcon } from '../css_classes';\nimport IconTick from '@assets/icon_tick';\n\nconst Checkbox: React.FC<ICheckboxProps> = ({ id, name, value, initiallyChecked = false, disabled: isDisabled, onChange }): JSX.Element => {\n    const [isChecked, setIsChecked] = useState<boolean>(initiallyChecked);\n\n    const checkboxClasses = classnames(cssClasses[checkbox], {\n        [cssClasses[checkboxDisabled]]: isDisabled\n    });\n\n    const handleCheckboxChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(ev);\n        setIsChecked((prevState) => !prevState);\n    };\n\n    useEffect(() => {\n        setIsChecked(initiallyChecked);\n    }, [initiallyChecked]);\n\n    return (\n        <span className={checkboxClasses}>\n            <input\n                className={cssClasses[checkboxControl]}\n                id={id}\n                name={name}\n                type=\"checkbox\"\n                value={value}\n                checked={isChecked}\n                disabled={isDisabled}\n                onChange={handleCheckboxChange}\n            />\n\n            <label className={cssClasses[checkboxLabel]} htmlFor={id}>\n                <IconTick className={cssClasses[checkboxIcon]} />\n            </label>\n        </span>\n    );\n};\n\nexport default Checkbox;\n"],"names":[],"mappings":";;;;;;IASM,QAAQ,GAA6B,UAAC,EAA6E;;QAA3E,UAAE,EAAE,cAAI,EAAE,gBAAK,EAAE,wBAAwB,EAAxB,6CAAwB,EAAE,wBAAoB,EAAE,sBAAQ;IAC7G,IAAA,+BAA+D,EAA9D,iBAAS,EAAE,oBAAmD,CAAC;IAEtE,IAAM,eAAe,GAAG,UAAU,CAAC,UAAU,CAAC,QAAQ,CAAC;QACnD,GAAC,UAAU,CAAC,gBAAgB,CAAC,IAAG,UAAU;YAC5C,CAAC;IAEH,IAAM,oBAAoB,GAAG,UAAC,EAAuC;QACjE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,EAAE;QACf,YAAY,CAAC,UAAC,SAAS,IAAK,OAAA,CAAC,SAAS,GAAA,CAAC,CAAC;KAC3C,CAAC;IAEF,SAAS,CAAC;QACN,YAAY,CAAC,gBAAgB,CAAC,CAAC;KAClC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,QACI,8BAAM,SAAS,EAAE,eAAe;QAC5B,+BACI,SAAS,EAAE,UAAU,CAAC,eAAe,CAAC,EACtC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,oBAAoB,GAChC;QAEF,+BAAO,SAAS,EAAE,UAAU,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE;YACpD,oBAAC,QAAQ,IAAC,SAAS,EAAE,UAAU,CAAC,YAAY,CAAC,GAAI,CAC7C,CACL,EACT;AACN;;;;"}
+{"version":3,"file":"checkbox.js","sources":["../../../../../../src/components/controls/components/checkbox.tsx"],"sourcesContent":["import cssClasses from '@css/checkbox/main.module.less';\n\nimport React, { useEffect, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { ICheckboxProps } from '../types';\nimport { checkbox, checkboxDisabled, checkboxControl, checkboxLabel, checkboxIcon } from '../css_classes';\nimport IconTick from '@assets/icon_tick';\n\nconst Checkbox: React.FC<ICheckboxProps> = ({ id, name, value, initiallyChecked = false, disabled: isDisabled, onChange }): JSX.Element => {\n    const [isChecked, setIsChecked] = useState<boolean>(initiallyChecked);\n\n    const checkboxClasses = classnames(cssClasses[checkbox], {\n        [cssClasses[checkboxDisabled]]: isDisabled,\n    });\n\n    const handleCheckboxChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(ev);\n        setIsChecked((prevState) => !prevState);\n    };\n\n    useEffect(() => {\n        setIsChecked(initiallyChecked);\n    }, [initiallyChecked]);\n\n    return (\n        <span className={checkboxClasses}>\n            <input\n                className={cssClasses[checkboxControl]}\n                id={id}\n                name={name}\n                type=\"checkbox\"\n                value={value}\n                checked={isChecked}\n                disabled={isDisabled}\n                onChange={handleCheckboxChange}\n            />\n\n            <label className={cssClasses[checkboxLabel]} htmlFor={id}>\n                <IconTick className={cssClasses[checkboxIcon]} />\n            </label>\n        </span>\n    );\n};\n\nexport default Checkbox;\n"],"names":[],"mappings":";;;;;;IASM,QAAQ,GAA6B,UAAC,EAA6E;;QAA3E,UAAE,EAAE,cAAI,EAAE,gBAAK,EAAE,wBAAwB,EAAxB,6CAAwB,EAAE,wBAAoB,EAAE,sBAAQ;IAC7G,IAAA,+BAA+D,EAA9D,iBAAS,EAAE,oBAAmD,CAAC;IAEtE,IAAM,eAAe,GAAG,UAAU,CAAC,UAAU,CAAC,QAAQ,CAAC;QACnD,GAAC,UAAU,CAAC,gBAAgB,CAAC,IAAG,UAAU;YAC5C,CAAC;IAEH,IAAM,oBAAoB,GAAG,UAAC,EAAuC;QACjE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,EAAE;QACf,YAAY,CAAC,UAAC,SAAS,IAAK,OAAA,CAAC,SAAS,GAAA,CAAC,CAAC;KAC3C,CAAC;IAEF,SAAS,CAAC;QACN,YAAY,CAAC,gBAAgB,CAAC,CAAC;KAClC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,QACI,8BAAM,SAAS,EAAE,eAAe;QAC5B,+BACI,SAAS,EAAE,UAAU,CAAC,eAAe,CAAC,EACtC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,oBAAoB,GAChC;QAEF,+BAAO,SAAS,EAAE,UAAU,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE;YACpD,oBAAC,QAAQ,IAAC,SAAS,EAAE,UAAU,CAAC,YAAY,CAAC,GAAI,CAC7C,CACL,EACT;AACN;;;;"}

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { DropdownContext } from '../../context/index.js';
 import cssClasses from '../../../../css/dropdown/main.module.less.js';
 import { useValue } from '../../hooks/use_value.js';
@@ -114,7 +114,7 @@ var Select = function (_a) {
     /**
      * hook with option list state, and method to change option list
      */
-    var _k = useState(options), optionsList = _k[0], setOptionsList = _k[1];
+    var _k = useState([]), optionsList = _k[0], setOptionsList = _k[1];
     /**
      * hook with selected value, and method do change it
      */
@@ -127,6 +127,9 @@ var Select = function (_a) {
      * hook which resets options list to default on close if select has search and it was used
      */
     useSetOptionsOnClose(isWithSearch, isOpen, setOptionsList, options);
+    useEffect(function () {
+        setOptionsList(options);
+    }, [options]);
     return (React.createElement(DropdownContext.Provider, { value: value },
         React.createElement("div", { ref: wrapperRef, className: cssClasses[cssDropdown] },
             React.createElement(Dropdown.Select, { name: name, isReadonly: isReadonly, isDisabled: isDisabled, selectedOptions: selectedValues }),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../src/components/dropdown/hoc/select/index.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport cssClasses from '@css/dropdown/main.module.less';\nimport Dropdown from '../../index';\nimport { ISelectProps, ISelectOption } from '../../types';\nimport { DropdownContext } from '../../context';\nimport { useToggle, useSetOptionsOnClose, useValue } from '../../hooks';\nimport { handleSearchKeyUp, handleItemClick, isSelected } from '../../utilities';\nimport { cssDropdown } from '../../css_classes';\n/**\n * Select component. Build with Dropdown composed components.\n *\n * @component\n * @example\n * const options = [{\n *  text: 'Option 1',\n *  value: 'value1'\n * }, {\n *  text: 'Option 2,,\n *  value: 'value2'\n * }];\n * return (\n *  <Select name=\"my_select_name\" options={options} onChange={(option) => console.log(option)} />\n * )\n */\nconst Select: React.FC<ISelectProps> = ({\n    /**\n     * select name, used also for hidden inputs\n     */\n    name,\n\n    /**\n     * array of select options\n     */\n    options,\n\n    /**\n     * array of default values (for select its always one element), array is used to be compatible with multiselects\n     */\n    defaultValues = [],\n\n    /**\n     * indicates if select is readonly\n     */\n    isReadonly = false,\n\n    /**\n     * indicates if select is disabled\n     */\n    isDisabled = false,\n\n    /**\n     * indicates if selects has groups (similar to optgroup), options then have left-padding, and you should use options with isHeader set to true\n     */\n    isWithGroups = false,\n\n    /**\n     * indicates if select should have search to look for options\n     */\n    isWithSearch = false,\n\n    /**\n     * indicates if select should be opened at render\n     */\n    defaultIsOpen = false,\n\n    /**\n     * indicates if select should hide on option click\n     */\n    defaultCloseOnClick = true,\n\n    /**\n     * called on select toggle\n     */\n    onToggle,\n\n    /**\n     * called on option change\n     */\n    onChange,\n    /**\n     * Place where portal should be placed, by default to body\n     * this can be used to put modal inside modal\n     */\n    portalContainer\n}) => {\n    /**\n     * reference to dropdown wrapper element\n     */\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    /**\n     * isOpen provides state if dropdown is open(visible), toggleDropdown is a function which toggles dropdown content\n     */\n    const [isOpen, toggleDropdown] = useToggle(defaultIsOpen, onToggle);\n\n    /**\n     * hook with option list state, and method to change option list\n     */\n    const [optionsList, setOptionsList] = useState(options);\n\n    /**\n     * hook with selected value, and method do change it\n     */\n    const [selectedValues, setSelectedValues] = useValue(wrapperRef, options, defaultValues, onChange);\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    /**\n     * hook which resets options list to default on close if select has search and it was used\n     */\n    useSetOptionsOnClose(isWithSearch, isOpen, setOptionsList, options);\n\n    return (\n        <DropdownContext.Provider value={value}>\n            <div ref={wrapperRef} className={cssClasses[cssDropdown]}>\n                <Dropdown.Select name={name} isReadonly={isReadonly} isDisabled={isDisabled} selectedOptions={selectedValues} />\n\n                <Dropdown.Content portalContainer={portalContainer}>\n                    {isWithSearch && <Dropdown.Search onKeyUp={(ev) => handleSearchKeyUp(ev, options, setOptionsList)} />}\n\n                    <Dropdown.List isWithGroups={isWithGroups}>\n                        {optionsList?.map((option: ISelectOption) =>\n                            option.isHeader ? (\n                                <Dropdown.Header key={option.text} text={option.text} />\n                            ) : (\n                                <Dropdown.Option\n                                    key={option.value}\n                                    option={option}\n                                    isSelected={isSelected(option, selectedValues)}\n                                    isDisabled={option.isDisabled ?? isDisabled}\n                                    isReadonly={option.isReadonly ?? isReadonly}\n                                    onClick={(option) => handleItemClick(option, defaultCloseOnClick, setSelectedValues, toggleDropdown)}\n                                />\n                            )\n                        )}\n                    </Dropdown.List>\n                </Dropdown.Content>\n            </div>\n        </DropdownContext.Provider>\n    );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;;;;;;;AAQA;;;;;;;;;;;;;;;;IAgBM,MAAM,GAA2B,UAAC,EA4DvC;;;;;IAxDG,cAAI;;;;IAKJ,oBAAO;;;;IAKP,qBAAkB;;;;IAAlB,uCAAkB;;;;IAKlB,kBAAkB;;;;IAAlB,uCAAkB;;;;IAKlB,kBAAkB;;;;IAAlB,uCAAkB;;;;IAKlB,oBAAoB;;;;IAApB,yCAAoB;;;;IAKpB,oBAAoB;;;;IAApB,yCAAoB;;;;IAKpB,qBAAqB;;;;IAArB,0CAAqB;;;;IAKrB,2BAA0B;;;;IAA1B,+CAA0B;;;;IAK1B,sBAAQ;;;;IAKR,sBAAQ;;;;;IAKR,oCAAe;;;;IAKf,IAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;;;;IAK1C,IAAA,uCAA6D,EAA5D,cAAM,EAAE,sBAAoD,CAAC;;;;IAK9D,IAAA,sBAAiD,EAAhD,mBAAW,EAAE,sBAAmC,CAAC;;;;IAKlD,IAAA,2DAA4F,EAA3F,sBAAc,EAAE,yBAA2E,CAAC;;;;IAKnG,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;;;;IAKtG,oBAAoB,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;IAEpE,QACI,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QAClC,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC;YACpD,oBAAC,QAAQ,CAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,GAAI;YAEhH,oBAAC,QAAQ,CAAC,OAAO,IAAC,eAAe,EAAE,eAAe;gBAC7C,YAAY,IAAI,oBAAC,QAAQ,CAAC,MAAM,IAAC,OAAO,EAAE,UAAC,EAAE,IAAK,OAAA,iBAAiB,CAAC,EAAE,EAAE,OAAO,EAAE,cAAc,CAAC,GAAA,GAAI;gBAErG,oBAAC,QAAQ,CAAC,IAAI,IAAC,YAAY,EAAE,YAAY,IACpC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,GAAG,CAAC,UAAC,MAAqB;;oBACpC,OAAA,MAAM,CAAC,QAAQ,IACX,oBAAC,QAAQ,CAAC,MAAM,IAAC,GAAG,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,KAExD,oBAAC,QAAQ,CAAC,MAAM,IACZ,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,CAAC,MAAM,EAAE,cAAc,CAAC,EAC9C,UAAU,QAAE,MAAM,CAAC,UAAU,mCAAI,UAAU,EAC3C,UAAU,QAAE,MAAM,CAAC,UAAU,mCAAI,UAAU,EAC3C,OAAO,EAAE,UAAC,MAAM,IAAK,OAAA,eAAe,CAAC,MAAM,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,cAAc,CAAC,GAAA,GACtG,CACL,CAAA;iBAAA,EAEO,CACD,CACjB,CACiB,EAC7B;AACN;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/dropdown/hoc/select/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport cssClasses from '@css/dropdown/main.module.less';\nimport Dropdown from '../../index';\nimport { ISelectProps, ISelectOption } from '../../types';\nimport { DropdownContext } from '../../context';\nimport { useToggle, useSetOptionsOnClose, useValue } from '../../hooks';\nimport { handleSearchKeyUp, handleItemClick, isSelected } from '../../utilities';\nimport { cssDropdown } from '../../css_classes';\n/**\n * Select component. Build with Dropdown composed components.\n *\n * @component\n * @example\n * const options = [{\n *  text: 'Option 1',\n *  value: 'value1'\n * }, {\n *  text: 'Option 2,,\n *  value: 'value2'\n * }];\n * return (\n *  <Select name=\"my_select_name\" options={options} onChange={(option) => console.log(option)} />\n * )\n */\nconst Select: React.FC<ISelectProps> = ({\n    /**\n     * select name, used also for hidden inputs\n     */\n    name,\n\n    /**\n     * array of select options\n     */\n    options,\n\n    /**\n     * array of default values (for select its always one element), array is used to be compatible with multiselects\n     */\n    defaultValues = [],\n\n    /**\n     * indicates if select is readonly\n     */\n    isReadonly = false,\n\n    /**\n     * indicates if select is disabled\n     */\n    isDisabled = false,\n\n    /**\n     * indicates if selects has groups (similar to optgroup), options then have left-padding, and you should use options with isHeader set to true\n     */\n    isWithGroups = false,\n\n    /**\n     * indicates if select should have search to look for options\n     */\n    isWithSearch = false,\n\n    /**\n     * indicates if select should be opened at render\n     */\n    defaultIsOpen = false,\n\n    /**\n     * indicates if select should hide on option click\n     */\n    defaultCloseOnClick = true,\n\n    /**\n     * called on select toggle\n     */\n    onToggle,\n\n    /**\n     * called on option change\n     */\n    onChange,\n    /**\n     * Place where portal should be placed, by default to body\n     * this can be used to put modal inside modal\n     */\n    portalContainer,\n}) => {\n    /**\n     * reference to dropdown wrapper element\n     */\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    /**\n     * isOpen provides state if dropdown is open(visible), toggleDropdown is a function which toggles dropdown content\n     */\n    const [isOpen, toggleDropdown] = useToggle(defaultIsOpen, onToggle);\n\n    /**\n     * hook with option list state, and method to change option list\n     */\n    const [optionsList, setOptionsList] = useState<ISelectOption[]>([]);\n\n    /**\n     * hook with selected value, and method do change it\n     */\n    const [selectedValues, setSelectedValues] = useValue(wrapperRef, options, defaultValues, onChange);\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    /**\n     * hook which resets options list to default on close if select has search and it was used\n     */\n    useSetOptionsOnClose(isWithSearch, isOpen, setOptionsList, options);\n\n    useEffect(() => {\n        setOptionsList(options);\n    }, [options]);\n\n    return (\n        <DropdownContext.Provider value={value}>\n            <div ref={wrapperRef} className={cssClasses[cssDropdown]}>\n                <Dropdown.Select name={name} isReadonly={isReadonly} isDisabled={isDisabled} selectedOptions={selectedValues} />\n\n                <Dropdown.Content portalContainer={portalContainer}>\n                    {isWithSearch && <Dropdown.Search onKeyUp={(ev) => handleSearchKeyUp(ev, options, setOptionsList)} />}\n\n                    <Dropdown.List isWithGroups={isWithGroups}>\n                        {optionsList?.map((option: ISelectOption) =>\n                            option.isHeader ? (\n                                <Dropdown.Header key={option.text} text={option.text} />\n                            ) : (\n                                <Dropdown.Option\n                                    key={option.value}\n                                    option={option}\n                                    isSelected={isSelected(option, selectedValues)}\n                                    isDisabled={option.isDisabled ?? isDisabled}\n                                    isReadonly={option.isReadonly ?? isReadonly}\n                                    onClick={(option) => handleItemClick(option, defaultCloseOnClick, setSelectedValues, toggleDropdown)}\n                                />\n                            )\n                        )}\n                    </Dropdown.List>\n                </Dropdown.Content>\n            </div>\n        </DropdownContext.Provider>\n    );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;;;;;;;AAQA;;;;;;;;;;;;;;;;IAgBM,MAAM,GAA2B,UAAC,EA4DvC;;;;;IAxDG,cAAI;;;;IAKJ,oBAAO;;;;IAKP,qBAAkB;;;;IAAlB,uCAAkB;;;;IAKlB,kBAAkB;;;;IAAlB,uCAAkB;;;;IAKlB,kBAAkB;;;;IAAlB,uCAAkB;;;;IAKlB,oBAAoB;;;;IAApB,yCAAoB;;;;IAKpB,oBAAoB;;;;IAApB,yCAAoB;;;;IAKpB,qBAAqB;;;;IAArB,0CAAqB;;;;IAKrB,2BAA0B;;;;IAA1B,+CAA0B;;;;IAK1B,sBAAQ;;;;IAKR,sBAAQ;;;;;IAKR,oCAAe;;;;IAKf,IAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;;;;IAK1C,IAAA,uCAA6D,EAA5D,cAAM,EAAE,sBAAoD,CAAC;;;;IAK9D,IAAA,iBAA6D,EAA5D,mBAAW,EAAE,sBAA+C,CAAC;;;;IAK9D,IAAA,2DAA4F,EAA3F,sBAAc,EAAE,yBAA2E,CAAC;;;;IAKnG,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;;;;IAKtG,oBAAoB,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;IAEpE,SAAS,CAAC;QACN,cAAc,CAAC,OAAO,CAAC,CAAC;KAC3B,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,QACI,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QAClC,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC;YACpD,oBAAC,QAAQ,CAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,GAAI;YAEhH,oBAAC,QAAQ,CAAC,OAAO,IAAC,eAAe,EAAE,eAAe;gBAC7C,YAAY,IAAI,oBAAC,QAAQ,CAAC,MAAM,IAAC,OAAO,EAAE,UAAC,EAAE,IAAK,OAAA,iBAAiB,CAAC,EAAE,EAAE,OAAO,EAAE,cAAc,CAAC,GAAA,GAAI;gBAErG,oBAAC,QAAQ,CAAC,IAAI,IAAC,YAAY,EAAE,YAAY,IACpC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,GAAG,CAAC,UAAC,MAAqB;;oBACpC,OAAA,MAAM,CAAC,QAAQ,IACX,oBAAC,QAAQ,CAAC,MAAM,IAAC,GAAG,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,KAExD,oBAAC,QAAQ,CAAC,MAAM,IACZ,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,CAAC,MAAM,EAAE,cAAc,CAAC,EAC9C,UAAU,QAAE,MAAM,CAAC,UAAU,mCAAI,UAAU,EAC3C,UAAU,QAAE,MAAM,CAAC,UAAU,mCAAI,UAAU,EAC3C,OAAO,EAAE,UAAC,MAAM,IAAK,OAAA,eAAe,CAAC,MAAM,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,cAAc,CAAC,GAAA,GACtG,CACL,CAAA;iBAAA,EAEO,CACD,CACjB,CACiB,EAC7B;AACN;;;;"}

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

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 
 /**
  * Hook used to allow use single selectable value, returns array of selected values and method to set value as selected
@@ -13,8 +13,7 @@ import { useState, useCallback } from 'react';
  * @returns {Array} Tuple - selected values and state setter for them
  */
 function useValue(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];
+    var _a = useState([]), selectedValues = _a[0], setSelectedValue = _a[1];
     var setSelectedValues = useCallback(function (selectedOption) {
         var _a;
         setSelectedValue(function () { return [selectedOption]; });
@@ -22,12 +21,16 @@ function useValue(wrapperRef, options, defaultValues, onChangeCb) {
             onChangeCb(selectedOption);
             var event_1 = new CustomEvent('dropdown:change', {
                 detail: {
-                    selectedOption: selectedOption
-                }
+                    selectedOption: selectedOption,
+                },
             });
             (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event_1);
         }
     }, [onChangeCb, wrapperRef]);
+    useEffect(function () {
+        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; });
+        setSelectedValue(defaultSelectedOptions);
+    }, [defaultValues]);
     return [selectedValues, setSelectedValues];
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"use_value.js","sources":["../../../../../../src/components/dropdown/hooks/use_value.ts"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { ISelectOption } from '../types';\n\n/**\n * Hook used to allow use single selectable value, returns array of selected values and method to set value as selected\n * You can use is for select or any other form of control which needs single selectable value\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 useValue(\n    wrapperRef: React.RefObject<HTMLElement>,\n    options: Array<ISelectOption>,\n    defaultValues: Array<string>,\n    onChangeCb?: (selectedOption: 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    const setSelectedValues = useCallback(\n        (selectedOption: ISelectOption) => {\n            setSelectedValue(() => [selectedOption]);\n\n            if (typeof onChangeCb === 'function') {\n                onChangeCb(selectedOption);\n                const event = new CustomEvent('dropdown:change', {\n                    detail: {\n                        selectedOption\n                    }\n                });\n                wrapperRef.current?.dispatchEvent(event);\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 */\n"],"names":[],"mappings":";;AAGA;;;;;;;;;;;;SAYgB,QAAQ,CACpB,UAAwC,EACxC,OAA6B,EAC7B,aAA4B,EAC5B,UAAoD;IAEpD,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;IAE5E,IAAM,iBAAiB,GAAG,WAAW,CACjC,UAAC,cAA6B;;QAC1B,gBAAgB,CAAC,cAAM,OAAA,CAAC,cAAc,CAAC,GAAA,CAAC,CAAC;QAEzC,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE;YAClC,UAAU,CAAC,cAAc,CAAC,CAAC;YAC3B,IAAM,OAAK,GAAG,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBAC7C,MAAM,EAAE;oBACJ,cAAc,gBAAA;iBACjB;aACJ,CAAC,CAAC;YACH,MAAA,UAAU,CAAC,OAAO,0CAAE,aAAa,CAAC,OAAK,EAAE;SAC5C;KACJ,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CAC3B,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAC/C,CAAC;AAED;;;;;;;;;;"}
+{"version":3,"file":"use_value.js","sources":["../../../../../../src/components/dropdown/hooks/use_value.ts"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { ISelectOption } from '../types';\n\n/**\n * Hook used to allow use single selectable value, returns array of selected values and method to set value as selected\n * You can use is for select or any other form of control which needs single selectable value\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 useValue(\n    wrapperRef: React.RefObject<HTMLElement>,\n    options: Array<ISelectOption>,\n    defaultValues: Array<string>,\n    onChangeCb?: (selectedOption: ISelectOption) => void\n): [ISelectOption[], (selectedOption: ISelectOption) => void] {\n    const [selectedValues, setSelectedValue] = useState([] as ISelectOption[]);\n\n    const setSelectedValues = useCallback(\n        (selectedOption: ISelectOption) => {\n            setSelectedValue(() => [selectedOption]);\n\n            if (typeof onChangeCb === 'function') {\n                onChangeCb(selectedOption);\n                const event = new CustomEvent('dropdown:change', {\n                    detail: {\n                        selectedOption,\n                    },\n                });\n                wrapperRef.current?.dispatchEvent(event);\n            }\n        },\n        [onChangeCb, wrapperRef]\n    );\n\n    useEffect(() => {\n        const defaultSelectedOptions = options?.filter((option) => defaultValues && defaultValues?.indexOf(option.value) >= 0);\n\n        setSelectedValue(defaultSelectedOptions);\n    }, [defaultValues]);\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 */\n"],"names":[],"mappings":";;AAGA;;;;;;;;;;;;SAYgB,QAAQ,CACpB,UAAwC,EACxC,OAA6B,EAC7B,aAA4B,EAC5B,UAAoD;IAE9C,IAAA,iBAAoE,EAAnE,sBAAc,EAAE,wBAAmD,CAAC;IAE3E,IAAM,iBAAiB,GAAG,WAAW,CACjC,UAAC,cAA6B;;QAC1B,gBAAgB,CAAC,cAAM,OAAA,CAAC,cAAc,CAAC,GAAA,CAAC,CAAC;QAEzC,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE;YAClC,UAAU,CAAC,cAAc,CAAC,CAAC;YAC3B,IAAM,OAAK,GAAG,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBAC7C,MAAM,EAAE;oBACJ,cAAc,gBAAA;iBACjB;aACJ,CAAC,CAAC;YACH,MAAA,UAAU,CAAC,OAAO,0CAAE,aAAa,CAAC,OAAK,EAAE;SAC5C;KACJ,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CAC3B,CAAC;IAEF,SAAS,CAAC;QACN,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;QAEvH,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;KAC5C,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAC/C,CAAC;AAED;;;;;;;;;;"}

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

@@ -3,8 +3,8 @@ import classnames from 'classnames';
 import cssClasses from '../../css/heading/main.module.less.js';
 
 var Heading = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'h1' : _b, isSubheading = _a.isSubheading, children = _a.children;
-    var classes = classnames(cssClasses[as]);
+    var _b = _a.as, as = _b === void 0 ? 'h1' : _b, isSubheading = _a.isSubheading, withHeadline = _a.withHeadline, children = _a.children;
+    var classes = classnames(cssClasses[as], withHeadline && cssClasses.head_line);
     if (!isSubheading) {
         return React.createElement("" + as, {
             className: classes

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/heading/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classnames from 'classnames';\nimport cssClasses from '@css/heading/main.module.less';\n\nimport { IHeadingProps } from './types';\n\nconst Heading: React.FC<IHeadingProps> = ({ as = 'h1', isSubheading, children }): JSX.Element => {\n    const classes = classnames(cssClasses[as]);\n\n    if (!isSubheading) {\n        return React.createElement(\n            `${as}`,\n            {\n                className: classes\n            },\n            children\n        );\n    }\n\n    return <span className={classes}>{children}</span>;\n};\n\nexport default Heading;"],"names":[],"mappings":";;;;IAOM,OAAO,GAA4B,UAAC,EAAqC;QAAnC,UAAS,EAAT,8BAAS,EAAE,8BAAY,EAAE,sBAAQ;IACzE,IAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;IAE3C,IAAI,CAAC,YAAY,EAAE;QACf,OAAO,KAAK,CAAC,aAAa,CACtB,KAAG,EAAI,EACP;YACI,SAAS,EAAE,OAAO;SACrB,EACD,QAAQ,CACX,CAAC;KACL;IAED,OAAO,8BAAM,SAAS,EAAE,OAAO,IAAG,QAAQ,CAAQ,CAAC;AACvD;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/heading/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classnames from 'classnames';\nimport cssClasses from '@css/heading/main.module.less';\n\nimport { IHeadingProps } from './types';\n\nconst Heading: React.FC<IHeadingProps> = ({ as = 'h1', isSubheading, withHeadline, children }): JSX.Element => {\n    const classes = classnames(cssClasses[as], withHeadline && cssClasses.head_line);\n\n    if (!isSubheading) {\n        return React.createElement(\n            `${as}`,\n            {\n                className: classes\n            },\n            children\n        );\n    }\n\n    return <span className={classes}>{children}</span>;\n};\n\nexport default Heading;"],"names":[],"mappings":";;;;IAOM,OAAO,GAA4B,UAAC,EAAmD;QAAjD,UAAS,EAAT,8BAAS,EAAE,8BAAY,EAAE,8BAAY,EAAE,sBAAQ;IACvF,IAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,YAAY,IAAI,UAAU,CAAC,SAAS,CAAC,CAAC;IAEjF,IAAI,CAAC,YAAY,EAAE;QACf,OAAO,KAAK,CAAC,aAAa,CACtB,KAAG,EAAI,EACP;YACI,SAAS,EAAE,OAAO;SACrB,EACD,QAAQ,CACX,CAAC;KACL;IAED,OAAO,8BAAM,SAAS,EAAE,OAAO,IAAG,QAAQ,CAAQ,CAAC;AACvD;;;;"}

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

@@ -1,4 +1,5 @@
 export interface IHeadingProps {
     as: string;
     isSubheading?: boolean;
+    withHeadline?: boolean;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dreamcommerce/aurora",
     "sideEffects": false,
-    "version": "0.3.4-143",
+    "version": "0.3.4-147",
     "description": "aurora",
     "author": "k0ssak",
     "license": "MIT",

package/build/esm/src/stories/welcome.stories.d.ts

@@ -1,36 +0,0 @@
-/// <reference types="react" />
-declare const _default: {
-    parameters: {
-        storySource: {
-            source: string;
-            locationsMap: {
-                "to-storybook": {
-                    startLoc: {
-                        col: number;
-                        line: number;
-                    };
-                    endLoc: {
-                        col: number;
-                        line: number;
-                    };
-                    startBody: {
-                        col: number;
-                        line: number;
-                    };
-                    endBody: {
-                        col: number;
-                        line: number;
-                    };
-                };
-            };
-        };
-    };
-    title: string;
-};
-export default _default;
-export declare const ToStorybook: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};