@itcase/ui 1.1.10 → 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/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/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;

package/dist/css/components/Search/Search.css

@@ -91,7 +91,7 @@
 }
 .search-input {
   &_size {
-    @each $size in compact, normal {
+    @each $size in compact, normal, s, l {
       &_$(size) {
         padding: var(--search-input-$(size)-padding);
         gap: var(--search-input-$(size)-gap);

package/dist/css/components/Search/css/search-input/search-input_size.css

@@ -1,6 +1,6 @@
 .search-input {
   &_size {
-    @each $size in compact, normal {
+    @each $size in compact, normal, s, l {
       &_$(size) {
         padding: var(--search-input-$(size)-padding);
         gap: var(--search-input-$(size)-gap);

package/dist/css/components/Select/Select.css

@@ -1,32 +1,32 @@
 .select {
   width: 100%;
-  position: relative;
   min-width: 240px;
+  position: relative;
 }
 
 @keyframes selectMenuAnimationOpen {
   0% {
-    opacity: 0%;
     visibility: hidden;
     transform: translate3d(0, 8px, 0);
+    opacity: 0%;
   }
   100% {
-    opacity: 100%;
     visibility: visible;
     transform: translate3d(0, 0, 0);
+    opacity: 100%;
   }
 }
 
 @keyframes selectMenuAnimationClose {
   0% {
-    opacity: 100%;
     visibility: visible;
     transform: translate3d(0, 0, 0);
+    opacity: 100%;
   }
   100% {
-    opacity: 0%;
     visibility: hidden;
     transform: translate3d(0, 8px, 0);
+    opacity: 0%;
   }
 }
 
@@ -251,6 +251,7 @@
           right: 8px;
         }
         & .divider {
+          height: 1px;
           position: absolute;
           left: 0;
           bottom: 0;

package/dist/css/components/Select/css/__menu/select__menu.css

@@ -34,6 +34,7 @@
           right: 8px;
         }
         & .divider {
+          height: 1px;
           position: absolute;
           left: 0;
           bottom: 0;

package/dist/css/components/Swiper/Swiper.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.1.3
+ * Swiper 11.1.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: May 13, 2024
+ * Released on: May 30, 2024
  */
 
 /* FONT_START */

package/dist/types/componentProps/borderColorHover.d.ts

@@ -1 +1 @@
-export type borderColorHoverPropsType = 'accentBorderPrimary' | 'accentBorderPrimaryHover' | 'primaryBorderPrimary' | 'secondaryBorderPrimary' | 'tertiaryBorderPrimary' | 'surfaceBorderPrimary' | 'surfaceBorderSecondary' | 'surfaceBorderTertiary' | 'errorBorderPrimary' | 'errorBorderPrimaryHover' | 'successBorderPrimary';
+export type borderColorHoverPropsType = 'accentBorderPrimary' | 'accentBorderPrimaryHover' | 'primaryBorderPrimary' | 'secondaryBorderPrimary' | 'tertiaryBorderPrimary' | 'surfaceBorderPrimary' | 'surfaceBorderSecondary' | 'surfaceBorderTertiary' | 'errorBorderPrimary' | 'errorBorderPrimaryHover' | 'successBorderPrimary' | 'surfaceBorderQuaternary';

package/dist/types/componentProps/iconFillSize.d.ts

@@ -1 +1 @@
-export type iconFillSizePropsType = '14' | '16' | '24' | '32' | '36' | '40' | '60' | '64' | '144';
+export type iconFillSizePropsType = '10' | '14' | '16' | '24' | '32' | '36' | '40' | '60' | '64' | '144';

package/dist/types/componentProps/iconSize.d.ts

@@ -1 +1 @@
-export type iconSizePropsType = '14' | '16' | '20' | '24' | '32' | '40' | '60' | '64' | '144';
+export type iconSizePropsType = '10' | '12' | '14' | '16' | '20' | '24' | '32' | '40' | '60' | '64' | '144';

package/dist/types/componentProps/sizePX.d.ts

@@ -1 +1 @@
-export type sizePXPropsType = '14' | '16' | '24' | '32' | '40' | '48' | '56' | '60' | '64' | '72' | '80' | '96' | '112' | '144' | '240';
+export type sizePXPropsType = '14' | '16' | '20' | '24' | '32' | '40' | '48' | '56' | '60' | '64' | '72' | '80' | '96' | '112' | '144' | '240';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -133,6 +133,7 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "^13.0.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.4",
     "@types/react": "^18",
     "@types/react-datepicker": "^6.2.0",