@itcase/ui 1.8.159 → 1.8.161

package/dist/cjs/components/Modal.js

@@ -117,16 +117,16 @@ const modalConfig = {
         modalConfig.appearance = appearanceConfig;
     },
 };
-const getOrCreateModalElement = (modalQuerySelector, className = '') => {
+const getOrCreateModalElement = (modalIdQuerySelector, className = '') => {
     // prettier-ignore
     const classList = className && typeof className === 'string'
         ? className.split(' ').filter(Boolean)
         : [];
-    let modalElement = document.querySelector(modalQuerySelector);
+    let modalElement = document.getElementById(modalIdQuerySelector);
     if (!modalElement) {
         // Add modal element into the DOM on mount.
         modalElement = document.createElement('div');
-        modalElement.setAttribute('id', 'modal-global');
+        modalElement.setAttribute('id', modalIdQuerySelector);
         modalElement.classList.add('modal');
         if (classList.length) {
             modalElement.classList.add(...classList);
@@ -137,7 +137,7 @@ const getOrCreateModalElement = (modalQuerySelector, className = '') => {
 };
 // Modal component that is an abstraction around the portal API.
 const Modal = React.forwardRef(function Modal(props, ref) {
-    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalQuerySelector = '#modal-global', print, scroll = false, stickyHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalIdQuerySelector = 'modal-global', print, scroll = false, stickyHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
     // Query DOM element
     const [modalElement, setModalElement] = React.useState(null);
     const [isOpen, setIsOpen] = React.useState(initialIsOpen);
@@ -215,12 +215,12 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         if (print === false) {
             classNameModal = clsx(className, 'no-print');
         }
-        const element = getOrCreateModalElement(modalQuerySelector, classNameModal);
+        const element = getOrCreateModalElement(modalIdQuerySelector, classNameModal);
         setModalElement(element);
         if (element) {
             addModalProps(element);
         }
-    }, [addModalProps, className, modalQuerySelector]);
+    }, [addModalProps, className, modalIdQuerySelector]);
     // Save ref things
     React.useImperativeHandle(ref, () => ({ modalElement, openModal, closeModal, isOpen }), [isOpen, openModal, closeModal, modalElement]);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, modalConfig, isDisabled);

package/dist/components/Modal.js

@@ -115,16 +115,16 @@ const modalConfig = {
         modalConfig.appearance = appearanceConfig;
     },
 };
-const getOrCreateModalElement = (modalQuerySelector, className = '') => {
+const getOrCreateModalElement = (modalIdQuerySelector, className = '') => {
     // prettier-ignore
     const classList = className && typeof className === 'string'
         ? className.split(' ').filter(Boolean)
         : [];
-    let modalElement = document.querySelector(modalQuerySelector);
+    let modalElement = document.getElementById(modalIdQuerySelector);
     if (!modalElement) {
         // Add modal element into the DOM on mount.
         modalElement = document.createElement('div');
-        modalElement.setAttribute('id', 'modal-global');
+        modalElement.setAttribute('id', modalIdQuerySelector);
         modalElement.classList.add('modal');
         if (classList.length) {
             modalElement.classList.add(...classList);
@@ -135,7 +135,7 @@ const getOrCreateModalElement = (modalQuerySelector, className = '') => {
 };
 // Modal component that is an abstraction around the portal API.
 const Modal = React.forwardRef(function Modal(props, ref) {
-    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalQuerySelector = '#modal-global', print, scroll = false, stickyHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalIdQuerySelector = 'modal-global', print, scroll = false, stickyHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
     // Query DOM element
     const [modalElement, setModalElement] = useState(null);
     const [isOpen, setIsOpen] = useState(initialIsOpen);
@@ -213,12 +213,12 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         if (print === false) {
             classNameModal = clsx(className, 'no-print');
         }
-        const element = getOrCreateModalElement(modalQuerySelector, classNameModal);
+        const element = getOrCreateModalElement(modalIdQuerySelector, classNameModal);
         setModalElement(element);
         if (element) {
             addModalProps(element);
         }
-    }, [addModalProps, className, modalQuerySelector]);
+    }, [addModalProps, className, modalIdQuerySelector]);
     // Save ref things
     useImperativeHandle(ref, () => ({ modalElement, openModal, closeModal, isOpen }), [isOpen, openModal, closeModal, modalElement]);
     const appearanceConfig = useAppearanceConfig(appearance, modalConfig, isDisabled);

package/dist/css/components/Accordion/Accordion.css

@@ -15,14 +15,30 @@
         flex-direction: column;
       }
     }
-    @each $val in row, row-reverse, column, column-reverse {
-      &_$(val) {
+      &_row {
         ^^&__wrapper {
           display: flex;
-          flex-direction: $(val);
+          flex-direction: row;
+        }
+      }
+      &_row-reverse {
+        ^^&__wrapper {
+          display: flex;
+          flex-direction: row-reverse;
+        }
+      }
+      &_column {
+        ^^&__wrapper {
+          display: flex;
+          flex-direction: column;
+        }
+      }
+      &_column-reverse {
+        ^^&__wrapper {
+          display: flex;
+          flex-direction: column-reverse;
         }
       }
-    }
   }
 }
 .accordion-item {
@@ -56,19 +72,83 @@
 }
 .accordion-item {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
+      &_xxl {
         ^^&__header {
-          padding: var(--accordion-item-header-$(size)-padding);
-          gap: var(--accordion-item-header-$(size)-gap);
+          padding: var(--accordion-item-header-xxl-padding);
+          gap: var(--accordion-item-header-xxl-gap);
         }
         ^^&__content {
           &-inner {
-            padding: var(--accordion-item-content-$(size)-padding);
+            padding: var(--accordion-item-content-xxl-padding);
+          }
+        }
+      }
+      &_xl {
+        ^^&__header {
+          padding: var(--accordion-item-header-xl-padding);
+          gap: var(--accordion-item-header-xl-gap);
+        }
+        ^^&__content {
+          &-inner {
+            padding: var(--accordion-item-content-xl-padding);
+          }
+        }
+      }
+      &_l {
+        ^^&__header {
+          padding: var(--accordion-item-header-l-padding);
+          gap: var(--accordion-item-header-l-gap);
+        }
+        ^^&__content {
+          &-inner {
+            padding: var(--accordion-item-content-l-padding);
+          }
+        }
+      }
+      &_m {
+        ^^&__header {
+          padding: var(--accordion-item-header-m-padding);
+          gap: var(--accordion-item-header-m-gap);
+        }
+        ^^&__content {
+          &-inner {
+            padding: var(--accordion-item-content-m-padding);
+          }
+        }
+      }
+      &_s {
+        ^^&__header {
+          padding: var(--accordion-item-header-s-padding);
+          gap: var(--accordion-item-header-s-gap);
+        }
+        ^^&__content {
+          &-inner {
+            padding: var(--accordion-item-content-s-padding);
+          }
+        }
+      }
+      &_xs {
+        ^^&__header {
+          padding: var(--accordion-item-header-xs-padding);
+          gap: var(--accordion-item-header-xs-gap);
+        }
+        ^^&__content {
+          &-inner {
+            padding: var(--accordion-item-content-xs-padding);
+          }
+        }
+      }
+      &_xxs {
+        ^^&__header {
+          padding: var(--accordion-item-header-xxs-padding);
+          gap: var(--accordion-item-header-xxs-gap);
+        }
+        ^^&__content {
+          &-inner {
+            padding: var(--accordion-item-content-xxs-padding);
           }
         }
       }
-    }
   }
 }
 .accordion-item {

package/dist/css/components/Avatar/Avatar.css

@@ -53,30 +53,237 @@
 /* stylelint-disable prettier/prettier */
 .avatar {
   &_size {
-    @each $size in 16, 20, 24, 32, 40, 48, 56, 96, 144, 240,
-      240 {
-      &_$(size) {
+      &_16 {
         ^^&__wrapper {
-          width: $(size)px;
-          height: $(size)px;
+          width: 16px;
+          height: 16px;
           display: flex;
           justify-content: center;
           align-items: center;
           ^^^&__badge {
-            right: var(--avatar-badge-$(size)-position-right);
-            bottom: var(--avatar-badge-$(size)-position-bottom);
+            right: var(--avatar-badge-16-position-right);
+            bottom: var(--avatar-badge-16-position-bottom);
           }
           ^^^&__image {
-            width: $(size)px;
-            height: $(size)px;
+            width: 16px;
+            height: 16px;
             & .image__item {
-              width: $(size)px;
-              height: $(size)px;
+              width: 16px;
+              height: 16px;
+            }
+          }
+        }
+      }
+      &_20 {
+        ^^&__wrapper {
+          width: 20px;
+          height: 20px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-20-position-right);
+            bottom: var(--avatar-badge-20-position-bottom);
+          }
+          ^^^&__image {
+            width: 20px;
+            height: 20px;
+            & .image__item {
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+      }
+      &_24 {
+        ^^&__wrapper {
+          width: 24px;
+          height: 24px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-24-position-right);
+            bottom: var(--avatar-badge-24-position-bottom);
+          }
+          ^^^&__image {
+            width: 24px;
+            height: 24px;
+            & .image__item {
+              width: 24px;
+              height: 24px;
+            }
+          }
+        }
+      }
+      &_32 {
+        ^^&__wrapper {
+          width: 32px;
+          height: 32px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-32-position-right);
+            bottom: var(--avatar-badge-32-position-bottom);
+          }
+          ^^^&__image {
+            width: 32px;
+            height: 32px;
+            & .image__item {
+              width: 32px;
+              height: 32px;
+            }
+          }
+        }
+      }
+      &_40 {
+        ^^&__wrapper {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-40-position-right);
+            bottom: var(--avatar-badge-40-position-bottom);
+          }
+          ^^^&__image {
+            width: 40px;
+            height: 40px;
+            & .image__item {
+              width: 40px;
+              height: 40px;
+            }
+          }
+        }
+      }
+      &_48 {
+        ^^&__wrapper {
+          width: 48px;
+          height: 48px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-48-position-right);
+            bottom: var(--avatar-badge-48-position-bottom);
+          }
+          ^^^&__image {
+            width: 48px;
+            height: 48px;
+            & .image__item {
+              width: 48px;
+              height: 48px;
+            }
+          }
+        }
+      }
+      &_56 {
+        ^^&__wrapper {
+          width: 56px;
+          height: 56px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-56-position-right);
+            bottom: var(--avatar-badge-56-position-bottom);
+          }
+          ^^^&__image {
+            width: 56px;
+            height: 56px;
+            & .image__item {
+              width: 56px;
+              height: 56px;
+            }
+          }
+        }
+      }
+      &_96 {
+        ^^&__wrapper {
+          width: 96px;
+          height: 96px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-96-position-right);
+            bottom: var(--avatar-badge-96-position-bottom);
+          }
+          ^^^&__image {
+            width: 96px;
+            height: 96px;
+            & .image__item {
+              width: 96px;
+              height: 96px;
+            }
+          }
+        }
+      }
+      &_144 {
+        ^^&__wrapper {
+          width: 144px;
+          height: 144px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-144-position-right);
+            bottom: var(--avatar-badge-144-position-bottom);
+          }
+          ^^^&__image {
+            width: 144px;
+            height: 144px;
+            & .image__item {
+              width: 144px;
+              height: 144px;
+            }
+          }
+        }
+      }
+      &_240 {
+        ^^&__wrapper {
+          width: 240px;
+          height: 240px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-240-position-right);
+            bottom: var(--avatar-badge-240-position-bottom);
+          }
+          ^^^&__image {
+            width: 240px;
+            height: 240px;
+            & .image__item {
+              width: 240px;
+              height: 240px;
+            }
+          }
+        }
+      }
+      &_240 {
+        ^^&__wrapper {
+          width: 240px;
+          height: 240px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-240-position-right);
+            bottom: var(--avatar-badge-240-position-bottom);
+          }
+          ^^^&__image {
+            width: 240px;
+            height: 240px;
+            & .image__item {
+              width: 240px;
+              height: 240px;
             }
           }
         }
       }
-    }
   }
 }
 .avatar_status {

package/dist/css/components/AvatarStack/AvatarStack.css

@@ -41,26 +41,72 @@ div.avatar {
         align-items: flex-start;
       }
     }
-    @each $val in row, row-reverse, column, column-reverse {
-      &_$(val) {
+      &_row {
         display: flex;
-        flex-direction: $(val);
+        flex-direction: row;
+        align-items: flex-start;
+      }
+      &_row-reverse {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: flex-start;
+      }
+      &_column {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      &_column-reverse {
+        display: flex;
+        flex-direction: column-reverse;
         align-items: flex-start;
       }
-    }
   }
 }
 div.avatar-stack {
   &_size {
-    @each $size in 56, 40, 32, 24, 20, 16 {
-      &_$(size) {
+      &_56 {
         & .avatar-stack__item {
           &:not(:first-child) {
-            margin: 0 0 0 var(--avatar-stack-size-$(size)-gap);
+            margin: 0 0 0 var(--avatar-stack-size-56-gap);
+          }
+        }
+      }
+      &_40 {
+        & .avatar-stack__item {
+          &:not(:first-child) {
+            margin: 0 0 0 var(--avatar-stack-size-40-gap);
+          }
+        }
+      }
+      &_32 {
+        & .avatar-stack__item {
+          &:not(:first-child) {
+            margin: 0 0 0 var(--avatar-stack-size-32-gap);
+          }
+        }
+      }
+      &_24 {
+        & .avatar-stack__item {
+          &:not(:first-child) {
+            margin: 0 0 0 var(--avatar-stack-size-24-gap);
+          }
+        }
+      }
+      &_20 {
+        & .avatar-stack__item {
+          &:not(:first-child) {
+            margin: 0 0 0 var(--avatar-stack-size-20-gap);
+          }
+        }
+      }
+      &_16 {
+        & .avatar-stack__item {
+          &:not(:first-child) {
+            margin: 0 0 0 var(--avatar-stack-size-16-gap);
           }
         }
       }
-    }
   }
 }
 .avatar-stack {