indicator-ui 0.0.205 → 0.0.207

package/dist/index.js

@@ -6723,6 +6723,52 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./src/ui/CascadeSelector/lib/getAllValues.ts":
+/*!****************************************************!*\
+  !*** ./src/ui/CascadeSelector/lib/getAllValues.ts ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   getAllValues: () => (/* binding */ getAllValues)
+/* harmony export */ });
+function getAllValues(options) {
+    const res = [];
+    const stack = [options];
+    while (stack.length > 0) {
+        const first = stack.pop();
+        for (const option of first) {
+            if ('value' in option) {
+                res.push(option.value);
+            }
+            else if ('options' in option) {
+                stack.push(option.options);
+            }
+        }
+    }
+    return res.reverse();
+}
+
+
+/***/ }),
+
+/***/ "./src/ui/CascadeSelector/lib/index.ts":
+/*!*********************************************!*\
+  !*** ./src/ui/CascadeSelector/lib/index.ts ***!
+  \*********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   getAllValues: () => (/* reexport safe */ _getAllValues__WEBPACK_IMPORTED_MODULE_0__.getAllValues)
+/* harmony export */ });
+/* harmony import */ var _getAllValues__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./getAllValues */ "./src/ui/CascadeSelector/lib/getAllValues.ts");
+
+
+
 /***/ }),
 
 /***/ "./src/ui/CascadeSelector/styles/index.ts":
@@ -6798,6 +6844,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../styles */ "./src/ui/CascadeSelector/styles/index.ts");
 /* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/assets */ "./src/assets/index.ts");
+/* harmony import */ var _ui_CascadeSelector_lib__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/ui/CascadeSelector/lib */ "./src/ui/CascadeSelector/lib/index.ts");
 
 
 
@@ -6805,8 +6852,9 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-function CascadeBlock({ options, onClick, label, supportingText, noWrapper = false, defaultAllHidden = false, value }) {
-    const [isOpen, setIsOpen] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(defaultAllHidden);
+
+function CascadeBlock({ options, changeValue, addValues, removeValues, label, supportingText, noWrapper = false, defaultAllHidden = false, value }) {
+    const [isOpen, setIsOpen] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(defaultAllHidden ? 'hide' : 'show');
     const isActive = (keyValue) => {
         return value.includes(keyValue);
     };
@@ -6835,21 +6883,43 @@ function CascadeBlock({ options, onClick, label, supportingText, noWrapper = fal
         }
         return 'some';
     };
+    const cascadeState = getCountOfActiveCheckbox();
     const getCascade = () => {
         return options.map((item, idx) => {
             if ('options' in item) {
-                return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CascadeBlock, { value: value, onClick: onClick, label: item.label, supportingText: item.supportingText, options: item.options }, idx);
+                return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CascadeBlock, { value: value, changeValue: changeValue, addValues: addValues, removeValues: removeValues, label: item.label, supportingText: item.supportingText, options: item.options }, idx);
             }
             else if ('value' in item) {
-                return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.Checkbox, { text: item.label, supportingText: item.supportingText, width: 'hug', checked: isActive(item.value), onClick: () => onClick && onClick(item.value) }, idx);
+                return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.Checkbox, { text: item.label, supportingText: item.supportingText, width: 'hug', checked: isActive(item.value), onClick: () => changeValue?.(item.value) }, idx);
             }
         });
     };
     if (noWrapper) {
         return getCascade();
     }
-    const cascadeState = getCountOfActiveCheckbox();
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.Checkbox, { supportingText: supportingText, text: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_5__.CascadeBlockStyle?.cascadeBlockLabel, { [_styles__WEBPACK_IMPORTED_MODULE_5__.CascadeBlockStyle?.open]: isOpen }), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", { className: _styles__WEBPACK_IMPORTED_MODULE_5__.CascadeBlockStyle?.text, children: label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_6__.ChevronDownSVG, {})] }), width: 'hug', checked: cascadeState === 'all', indeterminate: cascadeState === 'some', onClick: () => setIsOpen(prev => !prev) }), options.length > 0 && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_5__.CascadeBlockStyle?.cascadeBlock, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_5__.CascadeBlockStyle.list, { [_styles__WEBPACK_IMPORTED_MODULE_5__.CascadeBlockStyle?.hide]: isOpen }), children: getCascade() }) })] }));
+    const onCheckboxMarkClick = () => {
+        const cascadeValues = (0,_ui_CascadeSelector_lib__WEBPACK_IMPORTED_MODULE_7__.getAllValues)(options);
+        switch (cascadeState) {
+            case 'empty':
+                addValues?.(cascadeValues);
+                break;
+            case 'all':
+            case 'some':
+                removeValues?.(cascadeValues);
+                break;
+        }
+    };
+    const onClickCheckbox = () => {
+        setIsOpen(prevState => {
+            if (prevState === 'hide' || prevState === 'exit-up') {
+                return 'enter-up';
+            }
+            else {
+                return 'exit-up';
+            }
+        });
+    };
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.Checkbox, { supportingText: supportingText, text: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_5__.CascadeBlockStyle?.cascadeBlockLabel, { [_styles__WEBPACK_IMPORTED_MODULE_5__.CascadeBlockStyle?.open]: isOpen }), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", { className: _styles__WEBPACK_IMPORTED_MODULE_5__.CascadeBlockStyle?.text, children: label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_6__.ChevronDownSVG, {})] }), width: 'hug', checked: cascadeState === 'all', indeterminate: cascadeState === 'some', onCheckboxMarkClick: onCheckboxMarkClick, onClick: onClickCheckbox }), options.length > 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_5__.CascadeBlockStyle?.cascadeBlock, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.SlideTransition, { animation: isOpen, className: _styles__WEBPACK_IMPORTED_MODULE_5__.CascadeBlockStyle.list, children: getCascade() }) }))] }));
 }
 
 
@@ -6869,7 +6939,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _CascadeBlock__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CascadeBlock */ "./src/ui/CascadeSelector/ui/CascadeBlock.tsx");
 
 
-function CascadeSelector({ value, options, onChange, multiple = true, defaultAllHidden }) {
+function CascadeSelector({ value, options, onChange, multiple = true, defaultAllHidden, maxChosenOptions, }) {
     const getValue = () => {
         if (Array.isArray(value)) {
             return [...value];
@@ -6879,22 +6949,41 @@ function CascadeSelector({ value, options, onChange, multiple = true, defaultAll
         }
         return [];
     };
-    const handleClick = (newValue) => {
+    const handleChangeValue = (newValue) => {
+        let res = newValue;
+        if (maxChosenOptions) {
+            res = newValue.slice(-maxChosenOptions);
+        }
+        else if (maxChosenOptions === 0) {
+            res = [];
+        }
+        onChange?.(res);
+    };
+    const changeValue = (newValue) => {
         const prevState = getValue();
         const isInclude = prevState.includes(newValue);
         if (isInclude) {
-            onChange && onChange(prevState.filter(item => item !== newValue));
+            handleChangeValue(prevState.filter(item => item !== newValue));
         }
         else {
             if (!multiple) {
-                onChange && onChange([newValue]);
+                handleChangeValue([newValue]);
             }
             else {
-                onChange && onChange([...prevState, newValue]);
+                handleChangeValue([...prevState, newValue]);
             }
         }
     };
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_CascadeBlock__WEBPACK_IMPORTED_MODULE_1__.CascadeBlock, { options: options, noWrapper: true, onClick: handleClick, defaultAllHidden: defaultAllHidden, value: getValue() });
+    const addValues = (newValues) => {
+        const prevState = getValue();
+        const filteredPrevState = prevState.filter(item => !newValues.includes(item));
+        handleChangeValue([...filteredPrevState, ...newValues]);
+    };
+    const removeValues = (newValues) => {
+        const prevState = getValue();
+        handleChangeValue(prevState.filter(item => !newValues.includes(item)));
+    };
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_CascadeBlock__WEBPACK_IMPORTED_MODULE_1__.CascadeBlock, { options: options, noWrapper: true, changeValue: changeValue, addValues: addValues, removeValues: removeValues, defaultAllHidden: defaultAllHidden, value: getValue() });
 }
 
 
@@ -7028,15 +7117,10 @@ const CheckboxMark = (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(({ type =
         }
         return undefined;
     };
-    const handleOnClick = () => {
-        if (onClick && !disabled) {
-            onClick();
-        }
-    };
     const wrapperComponent = isButton ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {}) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {});
     return react__WEBPACK_IMPORTED_MODULE_1___default().cloneElement(wrapperComponent, {
         ref: ref,
-        onClick: handleOnClick,
+        onClick: disabled ? undefined : onClick,
         className: getClassName(),
         children: getIcon(),
     });
@@ -7141,7 +7225,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-function Checkbox({ checked = false, type = 'checkbox', error = false, subtype = false, disabled = false, text, supportingText, indeterminate = false, onClick, width = 'fill', height = 'hug', className = _styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle, }) {
+function Checkbox({ checked = false, type = 'checkbox', error = false, subtype = false, disabled = false, text, supportingText, indeterminate = false, onClick, width = 'fill', height = 'hug', onCheckboxMarkClick, additionStyle, }) {
     const [isHover, setIsHover] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);
     const [isFocused, setIsFocused] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);
     const clickHandler = () => {
@@ -7149,18 +7233,23 @@ function Checkbox({ checked = false, type = 'checkbox', error = false, subtype =
             onClick();
         setIsFocused(false);
     };
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("button", { onClick: clickHandler, onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(className?.checkbox, {
-            [className?.error]: error,
-            [className?.disabled]: disabled,
-            [className?.widthFill]: width === 'fill',
-            [className?.widthHug]: width === 'hug',
-            [className?.heightFill]: height === 'fill',
-            [className?.heightHug]: height === 'hug',
-        }), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.CheckboxMark, { type: type, indeterminate: indeterminate, disabled: disabled, error: error, checked: checked, isButton: false, hover: isHover || isFocused, relation: subtype }), text &&
-                (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(className?.textBlock, {
-                        [className?.hover]: isHover,
-                        [className?.focus]: isFocused,
-                    }), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(className?.text, { [className?.textBold]: indeterminate || subtype }), children: text }), supportingText && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: className?.supportingText, children: supportingText })] })] }));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("button", { onClick: clickHandler, onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle.checkbox, {
+            [_styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle.error]: error,
+            [_styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle.disabled]: disabled,
+            [_styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle.widthFill]: width === 'fill',
+            [_styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle.widthHug]: width === 'hug',
+            [_styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle.heightFill]: height === 'fill',
+            [_styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle.heightHug]: height === 'hug',
+        }, additionStyle), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.CheckboxMark, { type: type, indeterminate: indeterminate, disabled: disabled, error: error, checked: checked, isButton: false, hover: isHover || isFocused, onClick: (e) => {
+                    if (onCheckboxMarkClick) {
+                        e.stopPropagation();
+                        onCheckboxMarkClick();
+                    }
+                }, relation: subtype }), text &&
+                (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle.textBlock, {
+                        [_styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle.hover]: isHover,
+                        [_styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle.focus]: isFocused,
+                    }), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle.text, { [_styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle.textBold]: indeterminate || subtype }), children: text }), supportingText && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.CheckboxStyle.supportingText, children: supportingText })] })] }));
 }
 
 
@@ -8465,7 +8554,14 @@ __webpack_require__.r(__webpack_exports__);
 
 
 const getDate = (date) => {
-    return (Array.isArray(date) ? date[0] || date[1] : date) ?? new Date().toISOString();
+    let res;
+    if (Array.isArray(date)) {
+        res = date[0] || date[1];
+    }
+    else {
+        res = date;
+    }
+    return res || new Date().toISOString();
 };
 function DatePicker({ date, onChangeDate, getInfo, isMark, isHoliday, onYearButtonClick, onMonthButtonClick, type = 'date', }) {
     const [target, setTarget] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(getDate(date));