@itcase/ui 1.1.9 → 1.1.11

package/dist/context/Notifications.js

@@ -1,5 +1,5 @@
 'use client';
-import React__default, { useState, useCallback, useMemo, useContext, createContext } from 'react';
+import React__default, { useState, useCallback, useMemo, useEffect, useContext, createContext } from 'react';
 import PropTypes from 'prop-types';
 import { v4 } from 'uuid';
 
@@ -16,61 +16,53 @@ const NotificationsAPIContext = /*#__PURE__*/createContext({
   notificationStatuses: STATUSES
 });
 function NotificationsProvider(props) {
-  const [notifications, setNotifications] = useState([]);
-  const hideNotifications = useCallback(id => {
-    setNotifications(prevState => {
-      const currentNotification = prevState.find(notification => notification.id === id);
-      if (currentNotification) {
-        if (typeof currentNotification.onClose === 'function') {
-          currentNotification.onClose();
+  const {
+    children,
+    initialNotificationsList = []
+  } = props;
+  const [notificationsList, setNotificationsList] = useState(() => {
+    // We need to set id to every notification item and original list also be have new id's
+    return (initialNotificationsList || []).map(notificationItem => {
+      return createNotification(notificationItem, notificationItem.onClose);
+    });
+  });
+  const hideNotifications = useCallback(targetId => {
+    // If not target, then nothing to hide
+    if (!targetId) {
+      return;
+    }
+    setNotificationsList(prevState => {
+      const newState = prevState.filter(notificationItem => {
+        // Check on need to hide, if current notification is target for hide
+        const isNeedToHide = String(notificationItem.id) === String(targetId);
+        // Callback for close if exists
+        if (isNeedToHide && typeof notificationItem.onClose === 'function') {
+          notificationItem.onClose();
         }
-        return prevState.filter(notification => notification.id !== id);
-      }
-      return prevState;
+        // Save in state if no need to hide
+        return !isNeedToHide;
+      });
+      // Set new notifications list without target item to state
+      return newState;
     });
   }, []);
   const showNotification = useCallback((notification, onClose) => {
-    let id = v4().split('-')[0];
-    let title = '';
-    let text = '';
-    let status = STATUSES.warning;
-    let closeByTime = 4500;
-    let textColor = '';
-    if (typeof notification === 'string') {
-      text = notification;
-    } else if (typeof notification === 'object') {
-      id = notification.id ?? id;
-      title = notification.title ?? title;
-      text = notification.text ?? text;
-      status = notification.status ?? status;
-      closeByTime = notification.closeByTime ?? closeByTime;
-    }
-    switch (status) {
-      case 'success':
-        textColor = 'successTextPrimary';
-        break;
-      case 'info':
-        textColor = 'infoTextPrimary';
-        break;
-      case 'error':
-        textColor = 'errorTextPrimary';
-        break;
-      case 'warning':
-        textColor = 'warningTextPrimary';
-        break;
-    }
-    setNotifications(prevState => [...prevState, {
-      id: id,
-      title: title,
-      text: text,
-      status: status,
-      textColor: textColor,
-      onClose: onClose
-    }]);
-    if (closeByTime) {
-      setTimeout(() => hideNotifications(id), closeByTime);
+    const newNotificationItem = createNotification(notification, onClose);
+    setNotificationsList(prevState => {
+      const newState = prevState.slice();
+      const existsNotificationIndex = newState.findIndex(notificationItem => String(notificationItem.id) === String(newNotificationItem.id));
+      if (existsNotificationIndex === -1) {
+        return [...newState, newNotificationItem];
+      }
+      clearTimeout(newState[existsNotificationIndex]._closeTimeout);
+      newState[existsNotificationIndex]._closeTimeout = null;
+      newState[existsNotificationIndex] = newNotificationItem;
+      return newState;
+    });
+    if (newNotificationItem.closeByTime) {
+      newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
     }
-    return id;
+    return newNotificationItem;
     // eslint-disable-next-line
   }, []);
   const notificationsAPI = useMemo(() => ({
@@ -81,14 +73,24 @@ function NotificationsProvider(props) {
   // Functions is never changes, no sense to set as dependencies
   // eslint-disable-next-line
   []);
+  useEffect(() => {
+    // Set timeout for initial notifications list one time on first render
+    notificationsList.forEach(notificationItem => {
+      if (notificationItem.closeByTime) {
+        setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
+      }
+    });
+    // eslint-disable-next-line
+  }, []);
   return /*#__PURE__*/React__default.createElement(NotificationsAPIContext.Provider, {
     value: notificationsAPI
   }, /*#__PURE__*/React__default.createElement(NotificationsContext.Provider, {
-    value: notifications
-  }, props.children));
+    value: notificationsList
+  }, children));
 }
 NotificationsProvider.propTypes = {
-  children: PropTypes.any
+  children: PropTypes.any,
+  initialNotificationsList: PropTypes.array
 };
 function useNotifications() {
   return useContext(NotificationsContext);
@@ -96,6 +98,47 @@ function useNotifications() {
 function useNotificationsAPI() {
   return useContext(NotificationsAPIContext);
 }
+function createNotification(notification, onClose) {
+  // Default notification item properties
+  let id = v4().split('-')[0];
+  let title = '';
+  let text = '';
+  let status = STATUSES.warning;
+  let closeByTime = 4500;
+  let textColor = '';
+  if (typeof notification === 'string') {
+    text = notification;
+  } else if (typeof notification === 'object') {
+    id = notification.id ?? id;
+    title = notification.title ?? title;
+    text = notification.text ?? text;
+    status = notification.status ?? status;
+    closeByTime = notification.closeByTime ?? closeByTime;
+  }
+  switch (status) {
+    case 'success':
+      textColor = 'successTextPrimary';
+      break;
+    case 'info':
+      textColor = 'infoTextPrimary';
+      break;
+    case 'error':
+      textColor = 'errorTextPrimary';
+      break;
+    case 'warning':
+      textColor = 'warningTextPrimary';
+      break;
+  }
+  return {
+    id: id,
+    title: title,
+    text: text,
+    status: status,
+    textColor: textColor,
+    closeByTime: closeByTime,
+    onClose: onClose
+  };
+}
 NotificationsProvider.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -107,6 +150,13 @@ NotificationsProvider.__docgenInfo = {
         "name": "any"
       },
       "required": false
+    },
+    "initialNotificationsList": {
+      "description": "",
+      "type": {
+        "name": "array"
+      },
+      "required": false
     }
   }
 };

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

@@ -10,8 +10,8 @@
     }
     ^&__icon {
       position: absolute;
-      right: 0;
-      bottom: 0;
+      right: var(--avatar-icon-right, 0);
+      bottom: var(--avatar-icon-bottom, 0);
     }
   }
   div&__dropdown {
@@ -73,7 +73,7 @@
 }
 .avatar {
   &_size {
-    @each $size in 14, 16, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144, 240 {
+    @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144, 240 {
       &_$(size) {
         ^^&__wrapper {
           width: $(size)px;

package/dist/css/components/Button/Button.css

@@ -34,9 +34,9 @@
   &_shape {
     &_rounded {
       border-radius: var(--button-shape-rounded-default, 6px);
-      @each $size in xs, s, m, l, xl, xxl {
+      @each $size in xxs, xs, s, m, l, xl, xxl {
         &.button_size_$(size) {
-          border-radius: var(--button-size-$(size)-shape-rounded);
+          border-radius: var(--button-$(size)-shape-rounded);
         }
       }
     }
@@ -45,38 +45,33 @@
     }
   }
 }
-.button {
-  &_size {
-    @each $size in xxs, xs, s, m, l, xl, xxl {
-      &_$(size) {
-        ^^&__wrapper {
-          padding: var(--button-size-$(size)-label-padding);
-        }
-        &^^&_type_with-icon {
-          &_$(size) {
-            ^^^^&__wrapper {
-              gap: var(--button-size-$(size)-gap);
-              padding: var(--button-size-$(size)-label-icon-padding);
-            }
-          }
-        }
-      }
-    }
-  }
-}
 .button {
   &&_state {
     &_loading {
       ^^&__loader {
         display: flex;
         position: absolute;
-        padding: var(--button-size-$(size)-label-icon-padding);
       }
-      &.button_size {
-        @each $size in xxs, xs, s, m, l, xl, xxl {
-          &_$(size) {
-            & ^^^^&__wrapper {
-              padding: var(--button-size-$(size)-loader-padding);
+    }
+  }
+}
+.button {
+  &_type {
+    @each $type in label, with-icon, icon, loader {
+      &_$(type) {
+        @each $set in filled, outlined, ghost {
+          &.button_set_$(set) {
+            @each $size in xxs, xs, s, m, l, xl, xxl {
+              &.button_size_$(size) {
+                ^^^^&__wrapper {
+                  padding: var(--button-$(type)-$(set)-$(size)-padding);
+                }
+                &.button_type_with-icon {
+                  ^^^^^&__wrapper {
+                    gap: var(--button-with-icon-$(size)-gap);
+                  }
+                }
+              }
             }
           }
         }
@@ -124,6 +119,34 @@
     }
   }
 }
+.button {
+  &&_type {
+    &_badge {
+      position: relative;
+      & .badge {
+        position: absolute;
+        right: -4px;
+        top: -4px;
+      }
+    }
+  }
+}
+.button {
+  &_type {
+    &_icon {
+      align-self: flex-start;
+      &.button_size {
+        @each $size in xxs, xs, s, m, l, xl, xxl {
+          &_$(size) {
+            & ^^^^&__wrapper {
+              padding: var(--button-size-$(size)-icon-padding);
+            }
+          }
+        }
+      }
+    }
+  }
+}
 .button {
   &&_type {
     &_primary {
@@ -296,34 +319,6 @@
     }
   }
 }
-.button {
-  &&_type {
-    &_badge {
-      position: relative;
-      & .badge {
-        position: absolute;
-        right: -4px;
-        top: -4px;
-      }
-    }
-  }
-}
-.button {
-  &_type {
-    &_icon {
-      align-self: flex-start;
-      &.button_size {
-        @each $size in xxs, xs, s, m, l, xl, xxl {
-          &_$(size) {
-            & ^^^^&__wrapper {
-              padding: var(--button-size-$(size)-icon-padding);
-            }
-          }
-        }
-      }
-    }
-  }
-}
 .button {
   &&_width {
     &_fixed {

package/dist/css/components/DatePicker/DatePicker.css

@@ -747,6 +747,20 @@
   &__tab-loop {
     ^&-popper {
       z-index: 1000 !important;
+      &-left {
+        left: 0 !important;
+        top: 44px !important;
+        right: auto !important;
+        z-index: 1000 !important;
+        transform: none !important;
+      }
+      &-right {
+        left: auto !important;
+        top: 44px !important;
+        right: 0 !important;
+        z-index: 1000 !important;
+        transform: none !important;
+      }
     }
   }
   &__header {
@@ -1099,6 +1113,13 @@
   &__clear-label {
     width: 100%;
   }
+  &__input-icon {
+    background: #fff;
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+  }
   &-wrapper {
     width: 100%;
     ^&__input-container {

package/dist/css/components/Divider/Divider.css

@@ -1,6 +1,6 @@
 .divider {
-  margin: 0;
   padding: 0;
+  margin: 0;
   border: none;
 }
 .divider {
@@ -35,13 +35,13 @@
 .divider {
   &_direction {
     &_horizontal {
-      display: flex;
       min-width: 100%;
+      display: flex;
       flex-direction: row;
     }
     &_vertical {
-      display: flex;
       min-height: 100%;
+      display: flex;
       flex-direction: column;
     }
   }

package/dist/css/components/Drawer/Drawer.css

@@ -1,25 +1,30 @@
 .EZDrawer .EZDrawer__checkbox {
-  display: none; }
-  .EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__overlay {
+    display: none;
+}
+.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__overlay {
     display: block;
-    opacity: 1; }
-  .EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__container {
+    opacity: 1;
+}
+.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__container {
     visibility: visible;
-    transform: translate3d(0, 0, 0) !important; }
-  .EZDrawer .EZDrawer__overlay {
-  display: none;
-  height: 100vh;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%; }
-  .EZDrawer .EZDrawer__container {
-  position: fixed;
-  visibility: hidden;
-  background: white;
-  transition: all;
-  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1); }
-  .drawer {
+    transform: translate3d(0, 0, 0) !important;
+}
+.EZDrawer .EZDrawer__overlay {
+    display: none;
+    height: 100vh;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+.EZDrawer .EZDrawer__container {
+    position: fixed;
+    visibility: hidden;
+    background: white;
+    transition: all;
+    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
+}
+.drawer {
   overflow-y: scroll;
   display: flex;
   flex-flow: column nowrap;

package/dist/css/components/Dropdown/Dropdown.css

@@ -1,12 +1,29 @@
 .dropdown {
   position: relative;
   display: flex;
+}
+.dropdown {
+  &_animation {
+    &_close {
+      ^^&__wrapper {
+        animation-name: dropDownAnimationClose;
+      }
+    }
+    &_open {
+      ^^&__wrapper {
+        animation-name: dropDownAnimationOpen;
+      }
+    }
+  }
+}
+.dropdown {
   &_set {
     &_default {
       ^^&__wrapper {
         padding: var(--dropdown-default-padding, 0);
         display: flex;
         flex-direction: column;
+        gap: var(--dropdown-default-gap, 0);
       }
     }
     &_normal {
@@ -14,6 +31,7 @@
         padding: var(--dropdown-normal-padding, 12px 0);
         display: flex;
         flex-direction: column;
+        gap: var(--dropdown-normal-gap, 0);
       }
     }
     &_compact {
@@ -21,20 +39,7 @@
         padding: var(--dropdown-compact-padding, 8px 0);
         display: flex;
         flex-direction: column;
-      }
-    }
-  }
-}
-.dropdown {
-  &_animation {
-    &_close {
-      ^^&__wrapper {
-        animation-name: dropDownAnimationClose;
-      }
-    }
-    &_open {
-      ^^&__wrapper {
-        animation-name: dropDownAnimationOpen;
+        gap: var(--dropdown-compact-gap, 0);
       }
     }
   }
@@ -65,35 +70,22 @@
 .dropdown {
   &__item {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    gap: 8px;
-
-    &-label {
-      display: block;
+    &-link {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
-  }
-}
-.dropdown {
-  &__item {
-    &_set {
-      &_default {
-        min-width: 62px;
-        flex-direction: column;
-        justify-content: center;
-        gap: 0;
-        ^^&-label {
-          padding: var(--dropdown-item-default-padding, 10px);
-        }
-      }
-      &_normal {
-        min-width: 240px;
-        padding: var(--dropdown-item-normal-padding, 10px 12px 10px 16px);
-      }
-      &_compact {
-        min-width: 180px;
-        padding: var(--dropdown-item-compact-padding, 0 12px 0 16px);
-      }
+    &-wrapper {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &-label {
+      flex-grow: 1;
     }
   }
 }
@@ -109,14 +101,29 @@
 .dropdown {
   &__item {
     &_size {
-      @each $size in normal, compact {
+      @each $size in xs, l {
         &_$(size) {
-          gap: var(--dropdown-item-size-$(size)-gap);
-          ^^&-label {
-            gap: var(--dropdown-item-size-$(size)-label-gap);
+          ^^&-wrapper {
+            gap: var(--dropdown-item-size-$(size)-gap, 8px);
+            padding: var(--dropdown-item-size-$(size)-padding, 8px);
           }
         }
       }
     }
   }
 }
+.dropdown__item {
+  &_width {
+    &_fixed {
+      min-width: 240px;
+    }
+    &_hug {
+      min-width: 62px;
+      display: inline-flex;
+    }
+    &_fill {
+      width: 100%;
+      max-width: none !important;
+    }
+  }
+}

package/dist/css/components/Icon/Icon.css

@@ -27,7 +27,7 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover, invert  {
           &-$(color) {
             & svg {
               stroke: none;
@@ -36,7 +36,7 @@
           }
         }
       }
-      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover, invert  {
         &-$(color) {
           & svg {
             stroke: none;
@@ -81,40 +81,6 @@
     }
   }
 }
-.icon_stroke {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
-    &_$(type) {
-      &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {
-          &-$(color) {
-            & svg {
-              fill: none;
-              stroke: var(--color-$(type)-item-$(color));
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.icon_stroke_hover {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
-    &_$(type) {
-      &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {
-          &-$(color) {
-            &:hover {
-              & svg {
-                fill: none;
-                stroke: var(--color-$(type)-item-$(color));
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
 .icon_shape {
   &_rounded {
     border-radius: var(--icon-shape-rounded, 12px);
@@ -145,11 +111,15 @@
   }
 }
 .icon {
-  &__tooltip {
-    min-width: 200px;
-    padding: 8px;
-    border-radius: 8px;
-  }
+    &__tooltip {
+      &.tooltip {
+      min-width: 200px;
+      padding: 8px;
+      border-radius: 8px;
+      visibility: visible;
+      opacity: 100%;
+    }
+    }
 }
 :root {
   --icon-transition: all 0.2s ease 0s;