@itcase/ui 1.8.130 → 1.8.131

package/dist/components/Segmented.js

@@ -31,7 +31,7 @@ const segmentedAppearanceDefault = {
         fillActiveHover: 'accentPrimary',
         fillHover: 'surfaceSecondary',
         labelTextActiveColor: 'accentTextPrimary',
-        labelTextActiveHoverColor: 'accentTextPrimary',
+        labelTextActiveColorHover: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFill: 'surfaceItemQuaternary',
@@ -48,7 +48,7 @@ const segmentedAppearanceDefault = {
         fillActiveHover: 'accentHoverPrimary',
         fillHover: 'surfaceTertiary',
         labelTextActiveColor: 'accentTextPrimary',
-        labelTextActiveHoverColor: 'accentTextPrimary',
+        labelTextActiveColorHover: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFill: 'surfaceItemQuaternary',
@@ -171,7 +171,7 @@ const segmentedAppearanceSuccess = {
         fillHover: 'successItemSecondary',
         labelTextActiveColor: 'successTextPrimary',
         labelTextColor: 'successTextSecondary',
-        labelTextHoverColor: 'successTextPrimary',
+        labelTextColorHover: 'successTextPrimary',
         borderColor: 'successBorderSecondary',
         iconAfterFill: 'successItemSecondary',
         iconAfterFillActive: 'successTertiary',
@@ -240,7 +240,7 @@ const Segmented = (props) => {
     }, [activeSegment, segmentsRefs]);
     const appearanceConfig = useAppearanceConfig(appearance, segmentedConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveHoverColor, labelTextColor, labelTextHoverColor, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     return (jsx("div", { className: clsx(className, 'segmented', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `segmented_width_${widthClass}`, sizeClass && `segmented_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, isSkeleton && `segmented_skeleton`), ref: controlRef, children: jsx("div", { className: "segmented__wrapper", children: jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
                         const isActive = String(activeSegment?.value) === String(item.value);
                         return (jsx("div", { className: clsx('segmented__item', !item.label && 'segmented__item_icon', sizeClass && `segmented__item_size_${sizeClass}`, isActive && 'segmented__item_active', !isActive && isDisabled && 'segmented__item_state_disabled', isActive &&
@@ -252,7 +252,7 @@ const Segmented = (props) => {
                                 fillActiveClass &&
                                 `fill_active_${fillActiveClass}`), ref: segmentsRefs.get(item.value), onClick: () => !isDisabled && onChangeValue(item), children: jsxs("div", { className: clsx('segmented__item-label', sizeClass && `segmented_size_${sizeClass}`), children: [item.iconBefore || item.iconBeforeActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
                                             ? item.iconBeforeActive || item.iconBefore
-                                            : item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive, isDisabled: isDisabled })) : null, item.iconAfter || item.iconAfterActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
+                                            : item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive, isDisabled: isDisabled })) : null, item.iconAfter || item.iconAfterActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
                                             ? item.iconAfterActive || item.iconAfter
                                             : item.iconAfter, isActive: isActive, isDisabled: isDisabled })) : null] }) }, `${name}-${item.value}`));
                     }), jsx("div", { className: clsx('segmented__indicator', indicatorFillClass && `fill_${indicatorFillClass}`) })] }) }) }));

package/dist/css/components/Pagination/Pagination.css

@@ -3,6 +3,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  @media (--mobile) {
+    flex-direction: column;
+  }
   &__container {
     padding: 0;
     display: flex;

package/dist/hooks/useActiveClasses/useActiveClasses.helpers.js

@@ -47,7 +47,7 @@ const formatState = (key) => {
     // - matches "ActiveHover", "Active", "Hover" or "Disabled"
     // - case-insensitive because of the /i flag
     // Examples of matches:
-    //  "fillActiveHoverColor"  -> match[0] === "ActiveHover"
+    //  "fillActiveColorHover"  -> match[0] === "ActiveHover"
     //  "borderDisabled"        -> match[0] === "Disabled"
     const stateMatch = key.match(/(ActiveHover|Active|Hover|Disabled)/i);
     if (!stateMatch) {
@@ -61,7 +61,7 @@ const formatState = (key) => {
     //  Disabled    -> disabled
     // The final .toLowerCase() ensures output is lowercased regardless of input casing.
     // Examples:
-    //  "fillActiveHoverColor"  -> "_active_hover"
+    //  "fillActiveColorHover"  -> "_active_hover"
     //  "borderDisabled"        -> "disabled"
     return ('_' +
         stateMatch[0]

package/dist/types/components/Chips/appearance/chipsDisabled.d.ts

@@ -1,7 +1,11 @@
 declare const chipsAppearanceDisabled: {
     disabled: {
         fill: string;
+        fillHover: string;
+        labelTextActiveColor: string;
+        labelTextActiveColorHover: string;
         labelTextColor: string;
+        labelTextColorHover: string;
         borderColor: string;
         iconAfterFillIcon: string;
         iconBeforeFillIcon: string;

package/dist/types/components/Chips/appearance/chipsSurface.d.ts

@@ -13,7 +13,7 @@ declare const chipsAppearanceSurface: {
         fillHover: string;
         labelTextActiveColor: string;
         labelTextColor: string;
-        labelTextHoverColor: string;
+        labelTextColorHover: string;
         borderColor: string;
         activeIconItemFill: string;
         badgeAppearance: string;
@@ -29,7 +29,7 @@ declare const chipsAppearanceSurface: {
         fillHover: string;
         labelTextActiveColor: string;
         labelTextColor: string;
-        labelTextHoverColor: string;
+        labelTextColorHover: string;
         borderColor: string;
         iconAfterFillActiveIcon: string;
         iconAfterFillIcon: string;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
-import { AlignDirectionProps, AlignmentProps, AlignProps, AppearanceKeysDefault, DirectionProps, ElevationProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, SizeProps, TextAlignProps, TextColorActiveProps, TextColorHoverProps, TextColorProps, TextGradientProps, TextSizeProps, TextStyleProps, TextWeightProps, TextWrapProps, TypeProps, UnderlineProps, WidthProps } from '@itcase/types';
+import { AlignDirectionProps, AlignmentProps, AlignProps, AppearanceKeysDefault, DirectionProps, ElevationProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, SizeProps, TextAlignProps, TextColorActiveProps, TextColorHoverProps, TextColorProps, TextGradientProps, TextSizeProps, TextWeightProps, TextWrapProps, TypeProps, UnderlineProps, WidthProps } from '@itcase/types';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 export interface DropdownProps extends StyleAttributes {
     [key: number | string | symbol]: any;
@@ -53,7 +53,6 @@ export interface DropdownItemProps extends DropdownItemThemeColor, StyleAttribut
     desc?: string;
     descTextColorHover?: TextColorHoverProps;
     descTextGradient?: TextGradientProps;
-    descTextStyle?: TextStyleProps;
     descTextWeight?: TextWeightProps;
     descTextWrap?: TextWrapProps;
     dividerDirection?: DirectionProps;
@@ -69,7 +68,6 @@ export interface DropdownItemProps extends DropdownItemThemeColor, StyleAttribut
     labelTextColorActive?: TextColorActiveProps;
     labelTextColorHover?: TextColorHoverProps;
     labelTextGradient?: TextGradientProps;
-    labelTextStyle?: TextStyleProps;
     labelTextWeight?: TextWeightProps;
     labelTextWrap?: TextWrapProps;
     link?: string;