@itcase/ui 1.8.169 → 1.8.171

package/dist/cjs/components/DatePeriod.js

@@ -108,7 +108,7 @@ const datePeriodConfig = {
     },
 };
 function DatePeriod(props) {
-    const { appearance, className, datePeriodIntervalsList = Object.values(common.DATE_PERIOD_INTERVALS), datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, isDisabled, isSkeleton, onChangeDatePeriod, onKeyDown, } = props;
+    const { appearance, className, datePeriodIntervalsList = Object.values(common.DATE_PERIOD_INTERVALS), datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, showWeekNumbers = true, isDisabled, isSkeleton, onChangeDatePeriod, onKeyDown, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputSize, datePickerInputTextSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
@@ -131,26 +131,12 @@ function DatePeriod(props) {
         return (dateStartIso === normalizedDatePeriodValueStart &&
             dateEndIso === normalizedDatePeriodValueEnd);
     }, [datePeriodValueEnd, datePeriodValueStart]);
-    // const onChangeDatePicker = useCallback(
-    //   (dateStart: Date | null, dateEnd: Date | null) => {
-    //     let dateStartIso = null
-    //     let dateEndIso = null
-    //     if (dateStart) {
-    //       dateStartIso = DateTime.fromJSDate(dateStart).toISODate()
-    //     }
-    //     if (dateEnd) {
-    //       dateEndIso = DateTime.fromJSDate(dateEnd).toISODate()
-    //     }
-    //     onChangeDatePeriod(dateStartIso, dateEndIso)
-    //   },
-    //   [onChangeDatePeriod],
-    // )
     return (jsxRuntime.jsx("div", { className: clsx(className, 'date-period', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `date-period_skeleton`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: jsxRuntime.jsxs(ChipsGroup.ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: [datePeriodIntervalsList.map((datePeriodItem) => (jsxRuntime.jsx(ChipsGroup.Chips, { appearance: `${chipsAppearance} ${chipsAppearanceSize}`, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))), jsxRuntime.jsx(DatePicker.DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
                         appearance: `${datePickerAppearance} ${datePickerAppearanceSize}`,
                         dateFormat: 'dd/MM/yyyy',
                         monthsShown: monthsShown,
                         selectsRange: selectsRange,
-                        showWeekNumbers: true,
+                        showWeekNumbers: showWeekNumbers,
                         isClearable: false,
                         isStartDefaultNull: true,
                         onKeyDown: onKeyDown,

package/dist/cjs/components/Modal.js

@@ -170,7 +170,9 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     }, [isOpen, isScrollOnOpen, isSetFocusOnOpen]);
     // Show modal with children content
     const openModal = React.useCallback(() => {
-        setIsOpen(true);
+        React.startTransition(() => {
+            setIsOpen(true);
+        });
         // Callback
         if (typeof onOpenModal === 'function') {
             onOpenModal();
@@ -204,6 +206,12 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         // Callback
         onCloseModal && onCloseModal();
     }, [modalElement, onCloseModal]);
+    const handleClickOverlay = React.useCallback(() => {
+        if (isCloseOnBlur) {
+            closeModal();
+        }
+        onClickOverlay && onClickOverlay();
+    }, [closeModal, isCloseOnBlur, onClickOverlay]);
     React.useEffect(() => {
         if (!modalElement) {
             return;
@@ -222,26 +230,25 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         }
     }, [addModalProps, className, modalIdQuerySelector]);
     React.useEffect(() => {
-        if (!isCloseOnBlur) {
+        if (!isCloseOnBlur || !isOpen) {
             return;
         }
         const handleClickOutside = (event) => {
             const target = event.target;
-            const modal = modalContentRef.current;
-            if (!modal || !target || !target.isConnected) {
+            if (!modalElement || !target || !target.isConnected) {
                 return;
             }
-            const isOutside = !modal.contains(target);
+            const isOutside = !modalElement.contains(target);
             if (isOutside) {
                 setIsOpen(false);
                 onCloseModal && onCloseModal();
             }
         };
-        document.addEventListener('click', handleClickOutside);
+        window.addEventListener('click', handleClickOutside);
         return () => {
-            document.removeEventListener('click', handleClickOutside);
+            window.removeEventListener('click', handleClickOutside);
         };
-    }, [onCloseModal, isCloseOnBlur]);
+    }, [onCloseModal, isCloseOnBlur, isOpen, modalElement]);
     // Save ref things
     React.useImperativeHandle(ref, () => ({ modalElement, openModal, closeModal, isOpen }), [isOpen, openModal, closeModal, modalElement]);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, modalConfig, isDisabled);
@@ -255,7 +262,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         // Any valid React child: JSX, strings, arrays, etc.
         isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [(title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
-                    fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
+                    fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: handleClickOverlay })] })) : null, 
         // A DOM element
         modalElement));
 });

package/dist/components/DatePeriod.js

@@ -106,7 +106,7 @@ const datePeriodConfig = {
     },
 };
 function DatePeriod(props) {
-    const { appearance, className, datePeriodIntervalsList = Object.values(DATE_PERIOD_INTERVALS), datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, isDisabled, isSkeleton, onChangeDatePeriod, onKeyDown, } = props;
+    const { appearance, className, datePeriodIntervalsList = Object.values(DATE_PERIOD_INTERVALS), datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, showWeekNumbers = true, isDisabled, isSkeleton, onChangeDatePeriod, onKeyDown, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputSize, datePickerInputTextSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
@@ -129,26 +129,12 @@ function DatePeriod(props) {
         return (dateStartIso === normalizedDatePeriodValueStart &&
             dateEndIso === normalizedDatePeriodValueEnd);
     }, [datePeriodValueEnd, datePeriodValueStart]);
-    // const onChangeDatePicker = useCallback(
-    //   (dateStart: Date | null, dateEnd: Date | null) => {
-    //     let dateStartIso = null
-    //     let dateEndIso = null
-    //     if (dateStart) {
-    //       dateStartIso = DateTime.fromJSDate(dateStart).toISODate()
-    //     }
-    //     if (dateEnd) {
-    //       dateEndIso = DateTime.fromJSDate(dateEnd).toISODate()
-    //     }
-    //     onChangeDatePeriod(dateStartIso, dateEndIso)
-    //   },
-    //   [onChangeDatePeriod],
-    // )
     return (jsx("div", { className: clsx(className, 'date-period', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `date-period_skeleton`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: jsxs(ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: [datePeriodIntervalsList.map((datePeriodItem) => (jsx(Chips, { appearance: `${chipsAppearance} ${chipsAppearanceSize}`, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))), jsx(DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
                         appearance: `${datePickerAppearance} ${datePickerAppearanceSize}`,
                         dateFormat: 'dd/MM/yyyy',
                         monthsShown: monthsShown,
                         selectsRange: selectsRange,
-                        showWeekNumbers: true,
+                        showWeekNumbers: showWeekNumbers,
                         isClearable: false,
                         isStartDefaultNull: true,
                         onKeyDown: onKeyDown,

package/dist/components/Modal.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import React, { useState, useRef, useCallback, startTransition, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import clsx from 'clsx';
 import ReactDOM from 'react-dom';
 import { icons24, icons32, icons40 } from '@itcase/icons/default';
@@ -168,7 +168,9 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     }, [isOpen, isScrollOnOpen, isSetFocusOnOpen]);
     // Show modal with children content
     const openModal = useCallback(() => {
-        setIsOpen(true);
+        startTransition(() => {
+            setIsOpen(true);
+        });
         // Callback
         if (typeof onOpenModal === 'function') {
             onOpenModal();
@@ -202,6 +204,12 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         // Callback
         onCloseModal && onCloseModal();
     }, [modalElement, onCloseModal]);
+    const handleClickOverlay = useCallback(() => {
+        if (isCloseOnBlur) {
+            closeModal();
+        }
+        onClickOverlay && onClickOverlay();
+    }, [closeModal, isCloseOnBlur, onClickOverlay]);
     useEffect(() => {
         if (!modalElement) {
             return;
@@ -220,26 +228,25 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         }
     }, [addModalProps, className, modalIdQuerySelector]);
     useEffect(() => {
-        if (!isCloseOnBlur) {
+        if (!isCloseOnBlur || !isOpen) {
             return;
         }
         const handleClickOutside = (event) => {
             const target = event.target;
-            const modal = modalContentRef.current;
-            if (!modal || !target || !target.isConnected) {
+            if (!modalElement || !target || !target.isConnected) {
                 return;
             }
-            const isOutside = !modal.contains(target);
+            const isOutside = !modalElement.contains(target);
             if (isOutside) {
                 setIsOpen(false);
                 onCloseModal && onCloseModal();
             }
         };
-        document.addEventListener('click', handleClickOutside);
+        window.addEventListener('click', handleClickOutside);
         return () => {
-            document.removeEventListener('click', handleClickOutside);
+            window.removeEventListener('click', handleClickOutside);
         };
-    }, [onCloseModal, isCloseOnBlur]);
+    }, [onCloseModal, isCloseOnBlur, isOpen, modalElement]);
     // Save ref things
     useImperativeHandle(ref, () => ({ modalElement, openModal, closeModal, isOpen }), [isOpen, openModal, closeModal, modalElement]);
     const appearanceConfig = useAppearanceConfig(appearance, modalConfig, isDisabled);
@@ -253,7 +260,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         // Any valid React child: JSX, strings, arrays, etc.
         isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [(title || closeIcon) && (jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsx(Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
-                    fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
+                    fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: handleClickOverlay })] })) : null, 
         // A DOM element
         modalElement));
 });

package/dist/types/components/DatePeriod/DatePeriod.interface.d.ts

@@ -29,5 +29,6 @@ type DatePeriodProps = DatePeriodThemeColor & StyleAttributes & {
     datePickerInputTextSize?: TextSizeProps;
     isSkeleton?: boolean;
     onChangeDatePeriod: (dateStart: Date | null, dateEnd: Date | null) => void;
+    showWeekNumbers?: boolean;
 };
 export type { DatePeriodAppearanceType, DatePeriodConfig, DatePeriodProps, DatePeriodThemeColor, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.169",
+  "version": "1.8.171",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",