@itcase/ui 1.8.171 → 1.8.173

package/dist/cjs/hooks/useDeviceTargetClass.js

@@ -26,7 +26,6 @@ function useDeviceTargetClass(componentProps, hookProps) {
    * "componentProps" - "props" from component
    * "hookProps" - special props for generating class
    **/
-
   const {
     prefix = '',
     propsKey,

package/dist/cjs/hooks/useMediaQueries/useMediaQueries.js

@@ -15,13 +15,11 @@ var mediaQueries = {
 const isSSR = typeof window === 'undefined';
 function useMediaQueries(userDevice = {}) {
   // const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
-
   // prettier-ignore
   const isMobile = reactResponsive.useMediaQuery({
     minWidth: mediaQueries['mobile-tiny'],
     maxWidth: mediaQueries['tablet']
   }) || isSSR && Boolean(userDevice.isMobile);
-
   // const isMobileTiny = useMediaQuery({
   //   minWidth: mediaQueries['mobile-tiny'],
   //   maxWidth: mediaQueries['mobile-small'],
@@ -46,18 +44,15 @@ function useMediaQueries(userDevice = {}) {
   //   minWidth: mediaQueries['mobile-extra-large'],
   //   maxWidth: mediaQueries['mobile-super-extra-large'],
   // })
-
   reactResponsive.useMediaQuery({
     minWidth: mediaQueries['mobile-super-extra-large'],
     maxWidth: mediaQueries['tablet']
   });
-
   // prettier-ignore
   const isTablet = reactResponsive.useMediaQuery({
     minWidth: mediaQueries['tablet'],
     maxWidth: mediaQueries['desktop-small']
   }) || isSSR && Boolean(userDevice.isTablet);
-
   // const isTabletSmall = useMediaQuery({
   //   minWidth: mediaQueries['tablet-small'],
   //   maxWidth: mediaQueries['tablet'],
@@ -66,13 +61,11 @@ function useMediaQueries(userDevice = {}) {
   //   minWidth: mediaQueries['tablet'],
   //   maxWidth: mediaQueries['tablet-large'],
   // })
-
   // prettier-ignore
   const isDesktop = reactResponsive.useMediaQuery({
     minWidth: mediaQueries['desktop-small'],
     maxWidth: mediaQueries['desktop-super-huge']
   }) || isSSR && Boolean(userDevice.isDesktop);
-
   // const isDesktopSmall = useMediaQuery({
   //   minWidth: mediaQueries['desktop-small'],
   //   maxWidth: mediaQueries['desktop-medium'],
@@ -97,7 +90,6 @@ function useMediaQueries(userDevice = {}) {
   //   minWidth: mediaQueries['desktop-super-extra-large'],
   //   maxWidth: mediaQueries['desktop-huge'],
   // })
-
   const isDesktopMega = reactResponsive.useMediaQuery({
     minWidth: mediaQueries['desktop-huge']
   });

package/dist/cjs/hooks/useStyles/useStyles.js

@@ -46,7 +46,6 @@ function useStyles(props) {
       let value = null;
       const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
       const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(deviceCurrentType.toLowerCase());
-
       // e.g. "GridWrapperInner"
       const targetElementKey = removeDeviceType(propKey.replace(styleAttributeKey, ''), deviceTypesList);
       const targetElementGroupKey = camelCase(targetElementKey) || 'styles';
@@ -99,7 +98,6 @@ function useStyles(props) {
              *   top and bottom
              *   right and left
              */
-
             const valuePxPartsList = value.split(' ').map(valuePart => {
               const valueModule = valuePart.replace(/[a-z]/gi, '');
               const valuePx = parseFloat(valueModule) * 8;
@@ -180,7 +178,6 @@ const getTargetStyleAttributeKey = (styleKey, styleValue = '') => {
       return styleKey.startsWith(styleAttribute);
     }
   });
-
   // Get longest style key (e.g. "borderLeftWidth")
   const targetStyleAttribute = maxBy(possibleStyleAttributesList, styleAttribute => {
     const key = index_helpers.getStyleAttributeKey(styleAttribute);

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

@@ -20,7 +20,7 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
 }
@@ -312,6 +312,7 @@ h2.react-datepicker__current-month {
   background-color: rgb(28.75, 93.2196969697, 143.75);
 }
 .react-datepicker__day-names {
+  text-align: center;
   white-space: nowrap;
   margin-bottom: -8px;
 }
@@ -328,6 +329,12 @@ h2.react-datepicker__current-month {
   text-align: center;
   margin: 0.166rem;
 }
+.react-datepicker__day-name--disabled,
+.react-datepicker__day--disabled,
+.react-datepicker__time-name--disabled {
+  cursor: default;
+  color: #ccc;
+}
 .react-datepicker__day,
 .react-datepicker__month-text,
 .react-datepicker__quarter-text,

package/dist/css/components/Notification/Notification.css

@@ -5,8 +5,6 @@
     background: none;
     padding: 0;
     position: fixed;
-    top: 0;
-    right: 0;
     z-index: 1000;
     pointer-events: none;
     @media (--mobile) {
@@ -15,15 +13,29 @@
       right: 0;
       bottom: 0;
     }
+    &_left_bottom {
+      left: 0;
+      bottom: 0;
+      ^^&__wrapper {
+        left: 24px;
+        bottom: 56px;
+      }
+    }
+    &_right_top {
+      top: 0;
+      right: 0;
+      ^^&__wrapper {
+        top: 56px;
+        right: 48px;
+      }
+    }
     ^&__wrapper {
       width: 100%;
       position: relative;
       display: flex;
+      gap: 24px;
       flex-flow: column nowrap;
       align-items: flex-end;
-      top: 56px;
-      right: 48px;
-      gap: 24px;
       @media (--mobile) {
         align-items: center;
         left: 0;
@@ -37,14 +49,19 @@
 .notification__item {
   width: 340px;
   pointer-events: auto;
+  @media print {
+    display: none;
+  }
   &-wrapper {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 8px;
     ^&-title {
+      padding: 0 24px 0 0;
     }
     ^&-text {
+      padding: 0 24px 0 0;
     }
     ^&-button {
     }

package/dist/css/components/Notification/css/__item/notification__item.css

@@ -1,14 +1,19 @@
 .notification__item {
   width: 340px;
   pointer-events: auto;
+  @media print {
+    display: none;
+  }
   &-wrapper {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 8px;
     ^&-title {
+      padding: 0 24px 0 0;
     }
     ^&-text {
+      padding: 0 24px 0 0;
     }
     ^&-button {
     }

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

@@ -1,5 +1,5 @@
 /**
- * Swiper 12.0.2
+ * Swiper 12.0.3
  * 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: September 18, 2025
+ * Released on: October 21, 2025
  */
 
 :root {

package/dist/css/styles/bundle.css

@@ -60040,7 +60040,7 @@ div.avatar-stack {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
 }
@@ -60332,6 +60332,7 @@ h2.react-datepicker__current-month {
   background-color: rgb(28.75, 93.2196969697, 143.75);
 }
 .react-datepicker__day-names {
+  text-align: center;
   white-space: nowrap;
   margin-bottom: -8px;
 }
@@ -60348,6 +60349,12 @@ h2.react-datepicker__current-month {
   text-align: center;
   margin: 0.166rem;
 }
+.react-datepicker__day-name--disabled,
+.react-datepicker__day--disabled,
+.react-datepicker__time-name--disabled {
+  cursor: default;
+  color: #ccc;
+}
 .react-datepicker__day,
 .react-datepicker__month-text,
 .react-datepicker__quarter-text,
@@ -79837,8 +79844,6 @@ div.label {
     background: none;
     padding: 0;
     position: fixed;
-    top: 0;
-    right: 0;
     z-index: 1000;
     pointer-events: none;
     @media (--mobile) {
@@ -79847,15 +79852,29 @@ div.label {
       right: 0;
       bottom: 0;
     }
+    &_left_bottom {
+      left: 0;
+      bottom: 0;
+      ^^&__wrapper {
+        left: 24px;
+        bottom: 56px;
+      }
+    }
+    &_right_top {
+      top: 0;
+      right: 0;
+      ^^&__wrapper {
+        top: 56px;
+        right: 48px;
+      }
+    }
     ^&__wrapper {
       width: 100%;
       position: relative;
       display: flex;
+      gap: 24px;
       flex-flow: column nowrap;
       align-items: flex-end;
-      top: 56px;
-      right: 48px;
-      gap: 24px;
       @media (--mobile) {
         align-items: center;
         left: 0;
@@ -79869,14 +79888,19 @@ div.label {
 .notification__item {
   width: 340px;
   pointer-events: auto;
+  @media print {
+    display: none;
+  }
   &-wrapper {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 8px;
     ^&-title {
+      padding: 0 24px 0 0;
     }
     ^&-text {
+      padding: 0 24px 0 0;
     }
     ^&-button {
     }
@@ -98010,7 +98034,7 @@ div.label {
   }
 }
 /**
- * Swiper 12.0.2
+ * Swiper 12.0.3
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -98018,7 +98042,7 @@ div.label {
  *
  * Released under the MIT License
  *
- * Released on: September 18, 2025
+ * Released on: October 21, 2025
  */
 :root {
   --swiper-theme-color: #007aff;

package/dist/hooks/useDeviceTargetClass.js

@@ -24,7 +24,6 @@ function useDeviceTargetClass(componentProps, hookProps) {
    * "componentProps" - "props" from component
    * "hookProps" - special props for generating class
    **/
-
   const {
     prefix = '',
     propsKey,

package/dist/hooks/useMediaQueries/useMediaQueries.js

@@ -13,13 +13,11 @@ var mediaQueries = {
 const isSSR = typeof window === 'undefined';
 function useMediaQueries(userDevice = {}) {
   // const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
-
   // prettier-ignore
   const isMobile = useMediaQuery({
     minWidth: mediaQueries['mobile-tiny'],
     maxWidth: mediaQueries['tablet']
   }) || isSSR && Boolean(userDevice.isMobile);
-
   // const isMobileTiny = useMediaQuery({
   //   minWidth: mediaQueries['mobile-tiny'],
   //   maxWidth: mediaQueries['mobile-small'],
@@ -44,18 +42,15 @@ function useMediaQueries(userDevice = {}) {
   //   minWidth: mediaQueries['mobile-extra-large'],
   //   maxWidth: mediaQueries['mobile-super-extra-large'],
   // })
-
   useMediaQuery({
     minWidth: mediaQueries['mobile-super-extra-large'],
     maxWidth: mediaQueries['tablet']
   });
-
   // prettier-ignore
   const isTablet = useMediaQuery({
     minWidth: mediaQueries['tablet'],
     maxWidth: mediaQueries['desktop-small']
   }) || isSSR && Boolean(userDevice.isTablet);
-
   // const isTabletSmall = useMediaQuery({
   //   minWidth: mediaQueries['tablet-small'],
   //   maxWidth: mediaQueries['tablet'],
@@ -64,13 +59,11 @@ function useMediaQueries(userDevice = {}) {
   //   minWidth: mediaQueries['tablet'],
   //   maxWidth: mediaQueries['tablet-large'],
   // })
-
   // prettier-ignore
   const isDesktop = useMediaQuery({
     minWidth: mediaQueries['desktop-small'],
     maxWidth: mediaQueries['desktop-super-huge']
   }) || isSSR && Boolean(userDevice.isDesktop);
-
   // const isDesktopSmall = useMediaQuery({
   //   minWidth: mediaQueries['desktop-small'],
   //   maxWidth: mediaQueries['desktop-medium'],
@@ -95,7 +88,6 @@ function useMediaQueries(userDevice = {}) {
   //   minWidth: mediaQueries['desktop-super-extra-large'],
   //   maxWidth: mediaQueries['desktop-huge'],
   // })
-
   const isDesktopMega = useMediaQuery({
     minWidth: mediaQueries['desktop-huge']
   });

package/dist/hooks/useStyles/useStyles.js

@@ -44,7 +44,6 @@ function useStyles(props) {
       let value = null;
       const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
       const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(deviceCurrentType.toLowerCase());
-
       // e.g. "GridWrapperInner"
       const targetElementKey = removeDeviceType(propKey.replace(styleAttributeKey, ''), deviceTypesList);
       const targetElementGroupKey = camelCase(targetElementKey) || 'styles';
@@ -97,7 +96,6 @@ function useStyles(props) {
              *   top and bottom
              *   right and left
              */
-
             const valuePxPartsList = value.split(' ').map(valuePart => {
               const valueModule = valuePart.replace(/[a-z]/gi, '');
               const valuePx = parseFloat(valueModule) * 8;
@@ -178,7 +176,6 @@ const getTargetStyleAttributeKey = (styleKey, styleValue = '') => {
       return styleKey.startsWith(styleAttribute);
     }
   });
-
   // Get longest style key (e.g. "borderLeftWidth")
   const targetStyleAttribute = maxBy(possibleStyleAttributesList, styleAttribute => {
     const key = getStyleAttributeKey(styleAttribute);

package/dist/types/components/Drawer/stories/__mock__/index.d.ts

@@ -0,0 +1,6 @@
+export namespace DrawerMock {
+    let appearance: string;
+    let title: string;
+    let desc: string;
+    let isOpen: boolean;
+}

package/dist/types/components/Select/stories/__mock__/index.d.ts

@@ -0,0 +1,46 @@
+export namespace SelectDefaultMock {
+    let elevation: number;
+    let hideSelectedOptions: boolean;
+    let loadingMessageText: string;
+    let noOptionsSearchText: string;
+    let noOptionsText: string;
+    let options: ({
+        label: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        isDisabled?: undefined;
+        value?: undefined;
+        isFixed?: undefined;
+        isSelected?: undefined;
+    } | {
+        label: string;
+        isDisabled: boolean;
+        value: string;
+        options?: undefined;
+        isFixed?: undefined;
+        isSelected?: undefined;
+    } | {
+        label: string;
+        value: string;
+        isFixed: boolean;
+        isSelected: boolean;
+        options?: undefined;
+        isDisabled?: undefined;
+    } | {
+        label: string;
+        value: string;
+        isFixed: boolean;
+        options?: undefined;
+        isDisabled?: undefined;
+        isSelected?: undefined;
+    })[];
+    let placeholder: string;
+    let showBadge: boolean;
+    let showDivider: boolean;
+    let closeMenuOnSelect: boolean;
+    let isClearable: boolean;
+    let isMulti: boolean;
+    let isSearchable: boolean;
+}

package/dist/types/hooks/useDeviceTargetClass.d.ts

@@ -0,0 +1,5 @@
+/** TODO:
+ * Hook is still used in "itcase-forms".
+ * Need replace with "useDevicePropsGenerator" and delete this.
+ */
+export function useDeviceTargetClass(componentProps: any, hookProps: any): string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.171",
+  "version": "1.8.173",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -104,8 +104,8 @@
     "@itcase/common": "^1.2.32",
     "@itcase/icons": "^1.2.23",
     "@itcase/storybook-config": "^1.2.14",
-    "@itcase/tokens-am": "^1.1.23",
-    "@itcase/tokens-baikal": "^1.1.23",
+    "@itcase/tokens-am": "^1.1.24",
+    "@itcase/tokens-baikal": "^1.1.24",
     "@itcase/tokens-palette": "^1.1.20",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -117,7 +117,7 @@
     "rc-slider": "^11.1.9",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
-    "react-datepicker": "^8.7.0",
+    "react-datepicker": "^8.8.0",
     "react-dom": "^18.3.1",
     "react-indiana-drag-scroll": "^3.0.3-alpha",
     "react-inlinesvg": "^4.2.0",
@@ -130,26 +130,26 @@
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.10.2",
     "simplebar-react": "^3.3.2",
-    "swiper": "^12.0.2",
+    "swiper": "^12.0.3",
     "uuid": "^13.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
-    "@itcase/config": "^1.0.60",
+    "@itcase/config": "^1.0.61",
     "@itcase/lint": "^1.1.68",
     "@itcase/types": "^1.0.45",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.1.0",
-    "@rollup/plugin-commonjs": "^28.0.8",
+    "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.4",
+    "@rollup/plugin-typescript": "^12.3.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.1.0",
@@ -166,18 +166,18 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^9.1.0",
-    "eslint": "9.37.0",
+    "eslint": "9.38.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.4",
+    "lint-staged": "^16.2.6",
     "prettier": "^3.6.2",
     "react-docgen-typescript": "^2.4.0",
-    "rollup": "^4.52.4",
+    "rollup": "^4.52.5",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.9",
-    "storybook": "^9.1.10",
+    "storybook": "^9.1.15",
     "stylelint": "^16.25.0",
     "typescript": "^5.9.3"
   }