@itcase/ui 1.8.131 → 1.8.133

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cjs/components/MenuItem.js +3 -3
  2. package/dist/cjs/components/Pagination.js +48 -8
  3. package/dist/components/MenuItem.js +3 -3
  4. package/dist/components/Pagination.js +48 -8
  5. package/dist/css/components/MenuItem/MenuItem.css +17 -7
  6. package/dist/css/components/Pagination/Pagination.css +3 -0
  7. package/dist/css/styles/alignment/alignment.css +2 -0
  8. package/dist/css/styles/bundle.css +2 -0
  9. package/dist/types/components/Pagination/appearance/paginationShape.d.ts +34 -0
  10. package/dist/types/components/Pagination/appearance/paginationSurface.d.ts +5 -1
  11. package/package.json +7 -7
package/dist/cjs/components/MenuItem.js CHANGED
@@ -219,7 +219,7 @@ const menuItemConfig = {
219
219
  },
220
220
  };
221
221
  function MenuItem(props) {
222
- const { appearance, className, label, href, link, LinkComponent, rel, showTooltip, target, easing, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
222
+ const { appearance, className, label, easing, href, link, LinkComponent, rel, showTooltip, target, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
223
223
  const tooltipRef = React.useRef(null);
224
224
  const onMouseEnter = React.useCallback(() => {
225
225
  if (showTooltip) {
@@ -233,7 +233,7 @@ function MenuItem(props) {
233
233
  }, [showTooltip]);
234
234
  const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, menuItemConfig, isDisabled);
235
235
  const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
236
- const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorDisabled, labelTextColorHover, labelTextSize, labelWeight, labelWrap, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, tooltipTitle, shapeClass, shapeStrengthClass, sizeClass, tooltipFill, tooltipShape, tooltipShapeStrength, tooltipSize, tooltipText, tooltipTextColor, tooltipTextSize, tooltipTitleTextColor, typeClass, widthClass, isSkeleton, } = propsGenerator;
236
+ const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorDisabled, labelTextColorHover, labelTextSize, labelWeight, labelWrap, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, tooltipFill, tooltipShape, tooltipShapeStrength, tooltipSize, tooltipText, tooltipTextColor, tooltipTextSize, tooltipTitle, tooltipTitleTextColor, typeClass, widthClass, isSkeleton, } = propsGenerator;
237
237
  // @ts-expect-error
238
238
  const { styles: menuItem } = useStyles.useStyles(props);
239
239
  return (jsxRuntime.jsxs("div", { className: clsx('menu-item', easing && `easing_${easing}`, isActive && 'menu-item_state_active', isDisabled && `menu-item_state_disabled`, directionClass && `menu-item_direction_${directionClass}`, className, (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc) &&
@@ -244,7 +244,7 @@ function MenuItem(props) {
244
244
  : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass
245
245
  ? `shape-strength_${shapeStrengthClass}`
246
246
  : shapeClass === 'rounded' && 'shape-strength_default', typeClass && `menu-item_type_${typeClass}`, widthClass && `width_${widthClass}`, justifyContentClass &&
247
- `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxRuntime.jsxs(Link.Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsxRuntime.jsx(Text.Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsxRuntime.jsx(Icon.Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", size: tooltipSize, fill: tooltipFill, left: "100%", zIndex: "100", title: tooltipTitle, titleColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize,
247
+ `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxRuntime.jsxs(Link.Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsxRuntime.jsx(Text.Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsxRuntime.jsx(Icon.Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", alignment: "right-center", size: tooltipSize, fill: tooltipFill, zIndex: "100", title: tooltipTitle, titleColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize,
248
248
  // centering="vertical"
249
249
  shape: tooltipShape, shapeStrength: tooltipShapeStrength, isTooltipDisableState: true }))] }));
250
250
  }
package/dist/cjs/components/Pagination.js CHANGED
@@ -73,6 +73,40 @@ const paginationAppearanceAccent = {
73
73
  },
74
74
  };
75
75
 
76
+ const paginationAppearanceShape = {
77
+ circular: {
78
+ shape: 'circular',
79
+ },
80
+ rounded: {
81
+ fillInputShape: 'rounded',
82
+ pageCountDropdownShape: 'rounded',
83
+ },
84
+ roundedXL: {
85
+ fillInputShape: 'rounded',
86
+ fillInputShapeStrength: '2m',
87
+ pageCountDropdownShape: 'rounded',
88
+ pageCountDropdownShapeStrength: '2m'
89
+ },
90
+ roundedL: {
91
+ fillInputShape: 'rounded',
92
+ fillInputShapeStrength: '1_5m',
93
+ pageCountDropdownShape: 'rounded',
94
+ pageCountDropdownShapeStrength: '1_5m'
95
+ },
96
+ roundedM: {
97
+ fillInputShape: 'rounded',
98
+ fillInputShapeStrength: '1m',
99
+ pageCountDropdownShape: 'rounded',
100
+ pageCountDropdownShapeStrength: '1m'
101
+ },
102
+ roundedS: {
103
+ fillInputShape: 'rounded',
104
+ fillInputShapeStrength: '0_5m',
105
+ pageCountDropdownShape: 'rounded',
106
+ pageCountDropdownShapeStrength: '0_5m'
107
+ },
108
+ };
109
+
76
110
  const paginationAppearanceSize = {
77
111
  sizeL: {
78
112
  size: 'l',
@@ -168,16 +202,21 @@ const paginationAppearanceSurface = {
168
202
  surfacePrimary: {
169
203
  fill: 'surfacePrimary',
170
204
  fillHover: 'surfaceTertiary',
171
- fillActive: 'surfaceTertiary',
172
- fillActiveHover: 'surfaceTertiary',
205
+ fillActive: 'accentPrimary',
206
+ fillActiveHover: 'accentHoverPrimary',
173
207
  fillInput: 'surfacePrimary',
208
+ fillInputHover: 'surfaceTertiary',
174
209
  textColor: 'surfaceTextPrimary',
210
+ textColorHover: 'surfaceTextPrimary',
211
+ textColorActive: 'accentTextPrimary',
212
+ textColorActiveHover: 'accentTextPrimary',
175
213
  builderIconFillIcon: 'surfaceItemPrimary',
176
214
  nextIconFillIcon: 'surfaceItemPrimary',
177
215
  pageCountDescTextColor: 'surfaceTextPrimary',
178
216
  pageCountDropdownAlignment: 'topCenter',
179
217
  pageCountDropdownElevation: 8,
180
218
  pageCountDropdownFill: 'surfacePrimary',
219
+ pageCountDropdownFillHover: 'surfaceTertiary',
181
220
  pageCountDropdownItemDividerFill: 'surfaceSecondary',
182
221
  pageCountDropdownItemFill: 'surfacePrimary',
183
222
  pageCountDropdownItemFillActive: 'accentPrimary',
@@ -188,7 +227,6 @@ const paginationAppearanceSurface = {
188
227
  pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
189
228
  pageCountDropdownItemLabelColorActiveHover: 'accentTextPrimary',
190
229
  pageCountDropdownItemLabelColorHover: 'surfaceTextPrimary',
191
- pageCountDropdownShape: 'rounded',
192
230
  pageCountInputIconColor: 'surfaceItemPrimary',
193
231
  pageCountInputTextColor: 'surfaceTextPrimary',
194
232
  previousIconFillIcon: 'surfaceItemPrimary',
@@ -199,6 +237,7 @@ const paginationAppearance = {
199
237
  ...paginationAppearanceSurface,
200
238
  ...paginationAppearanceAccent,
201
239
  ...paginationAppearanceSize,
240
+ ...paginationAppearanceShape,
202
241
  ...paginationAppearanceStyle,
203
242
  };
204
243
 
@@ -268,15 +307,16 @@ function Pagination(props) {
268
307
  }, [pageNumber]);
269
308
  const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, paginationConfig, isDisabled);
270
309
  const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
271
- const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, textColorClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
310
+ const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorClass, textColorHoverClass, textColorActiveClass, textColorActiveHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
272
311
  const { styles: paginationStyles } = useStyles.useStyles(props);
273
- return (allItemsCount > perPageCount && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), activeLinkClassName: "pagination__item-link_state_active", breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
312
+ return (allItemsCount > perPageCount && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`, fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass && `text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
313
+ `text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
274
314
  `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled",
275
315
  // pages settings
276
- forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`),
316
+ forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`),
277
317
  // next button
278
- nextLabel: jsxRuntime.jsx(Icon.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
279
- (() => (jsxRuntime.jsx(Icon.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && 'text', textColorClass && `text-color_${textColorClass}`), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`), previousLabel: jsxRuntime.jsx(Icon.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass && `fill_${fillInputClass}`, fillHoverClass && `fill_hover_${fillInputHoverClass}`), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
318
+ nextLabel: jsxRuntime.jsx(Icon.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
319
+ (() => (jsxRuntime.jsx(Icon.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsxRuntime.jsx(Icon.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass && `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
280
320
  pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
281
321
  pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
282
322
  }
package/dist/components/MenuItem.js CHANGED
@@ -217,7 +217,7 @@ const menuItemConfig = {
217
217
  },
218
218
  };
219
219
  function MenuItem(props) {
220
- const { appearance, className, label, href, link, LinkComponent, rel, showTooltip, target, easing, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
220
+ const { appearance, className, label, easing, href, link, LinkComponent, rel, showTooltip, target, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
221
221
  const tooltipRef = useRef(null);
222
222
  const onMouseEnter = useCallback(() => {
223
223
  if (showTooltip) {
@@ -231,7 +231,7 @@ function MenuItem(props) {
231
231
  }, [showTooltip]);
232
232
  const appearanceConfig = useAppearanceConfig(appearance, menuItemConfig, isDisabled);
233
233
  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
234
- const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorDisabled, labelTextColorHover, labelTextSize, labelWeight, labelWrap, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, tooltipTitle, shapeClass, shapeStrengthClass, sizeClass, tooltipFill, tooltipShape, tooltipShapeStrength, tooltipSize, tooltipText, tooltipTextColor, tooltipTextSize, tooltipTitleTextColor, typeClass, widthClass, isSkeleton, } = propsGenerator;
234
+ const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorDisabled, labelTextColorHover, labelTextSize, labelWeight, labelWrap, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, tooltipFill, tooltipShape, tooltipShapeStrength, tooltipSize, tooltipText, tooltipTextColor, tooltipTextSize, tooltipTitle, tooltipTitleTextColor, typeClass, widthClass, isSkeleton, } = propsGenerator;
235
235
  // @ts-expect-error
236
236
  const { styles: menuItem } = useStyles(props);
237
237
  return (jsxs("div", { className: clsx('menu-item', easing && `easing_${easing}`, isActive && 'menu-item_state_active', isDisabled && `menu-item_state_disabled`, directionClass && `menu-item_direction_${directionClass}`, className, (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc) &&
@@ -242,7 +242,7 @@ function MenuItem(props) {
242
242
  : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass
243
243
  ? `shape-strength_${shapeStrengthClass}`
244
244
  : shapeClass === 'rounded' && 'shape-strength_default', typeClass && `menu-item_type_${typeClass}`, widthClass && `width_${widthClass}`, justifyContentClass &&
245
- `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsx(Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", size: tooltipSize, fill: tooltipFill, left: "100%", zIndex: "100", title: tooltipTitle, titleColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize,
245
+ `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsx(Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", alignment: "right-center", size: tooltipSize, fill: tooltipFill, zIndex: "100", title: tooltipTitle, titleColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize,
246
246
  // centering="vertical"
247
247
  shape: tooltipShape, shapeStrength: tooltipShapeStrength, isTooltipDisableState: true }))] }));
248
248
  }
package/dist/components/Pagination.js CHANGED
@@ -71,6 +71,40 @@ const paginationAppearanceAccent = {
71
71
  },
72
72
  };
73
73
 
74
+ const paginationAppearanceShape = {
75
+ circular: {
76
+ shape: 'circular',
77
+ },
78
+ rounded: {
79
+ fillInputShape: 'rounded',
80
+ pageCountDropdownShape: 'rounded',
81
+ },
82
+ roundedXL: {
83
+ fillInputShape: 'rounded',
84
+ fillInputShapeStrength: '2m',
85
+ pageCountDropdownShape: 'rounded',
86
+ pageCountDropdownShapeStrength: '2m'
87
+ },
88
+ roundedL: {
89
+ fillInputShape: 'rounded',
90
+ fillInputShapeStrength: '1_5m',
91
+ pageCountDropdownShape: 'rounded',
92
+ pageCountDropdownShapeStrength: '1_5m'
93
+ },
94
+ roundedM: {
95
+ fillInputShape: 'rounded',
96
+ fillInputShapeStrength: '1m',
97
+ pageCountDropdownShape: 'rounded',
98
+ pageCountDropdownShapeStrength: '1m'
99
+ },
100
+ roundedS: {
101
+ fillInputShape: 'rounded',
102
+ fillInputShapeStrength: '0_5m',
103
+ pageCountDropdownShape: 'rounded',
104
+ pageCountDropdownShapeStrength: '0_5m'
105
+ },
106
+ };
107
+
74
108
  const paginationAppearanceSize = {
75
109
  sizeL: {
76
110
  size: 'l',
@@ -166,16 +200,21 @@ const paginationAppearanceSurface = {
166
200
  surfacePrimary: {
167
201
  fill: 'surfacePrimary',
168
202
  fillHover: 'surfaceTertiary',
169
- fillActive: 'surfaceTertiary',
170
- fillActiveHover: 'surfaceTertiary',
203
+ fillActive: 'accentPrimary',
204
+ fillActiveHover: 'accentHoverPrimary',
171
205
  fillInput: 'surfacePrimary',
206
+ fillInputHover: 'surfaceTertiary',
172
207
  textColor: 'surfaceTextPrimary',
208
+ textColorHover: 'surfaceTextPrimary',
209
+ textColorActive: 'accentTextPrimary',
210
+ textColorActiveHover: 'accentTextPrimary',
173
211
  builderIconFillIcon: 'surfaceItemPrimary',
174
212
  nextIconFillIcon: 'surfaceItemPrimary',
175
213
  pageCountDescTextColor: 'surfaceTextPrimary',
176
214
  pageCountDropdownAlignment: 'topCenter',
177
215
  pageCountDropdownElevation: 8,
178
216
  pageCountDropdownFill: 'surfacePrimary',
217
+ pageCountDropdownFillHover: 'surfaceTertiary',
179
218
  pageCountDropdownItemDividerFill: 'surfaceSecondary',
180
219
  pageCountDropdownItemFill: 'surfacePrimary',
181
220
  pageCountDropdownItemFillActive: 'accentPrimary',
@@ -186,7 +225,6 @@ const paginationAppearanceSurface = {
186
225
  pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
187
226
  pageCountDropdownItemLabelColorActiveHover: 'accentTextPrimary',
188
227
  pageCountDropdownItemLabelColorHover: 'surfaceTextPrimary',
189
- pageCountDropdownShape: 'rounded',
190
228
  pageCountInputIconColor: 'surfaceItemPrimary',
191
229
  pageCountInputTextColor: 'surfaceTextPrimary',
192
230
  previousIconFillIcon: 'surfaceItemPrimary',
@@ -197,6 +235,7 @@ const paginationAppearance = {
197
235
  ...paginationAppearanceSurface,
198
236
  ...paginationAppearanceAccent,
199
237
  ...paginationAppearanceSize,
238
+ ...paginationAppearanceShape,
200
239
  ...paginationAppearanceStyle,
201
240
  };
202
241
 
@@ -266,15 +305,16 @@ function Pagination(props) {
266
305
  }, [pageNumber]);
267
306
  const appearanceConfig = useAppearanceConfig(appearance, paginationConfig, isDisabled);
268
307
  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
269
- const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, textColorClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
308
+ const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorClass, textColorHoverClass, textColorActiveClass, textColorActiveHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
270
309
  const { styles: paginationStyles } = useStyles(props);
271
- return (allItemsCount > perPageCount && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), activeLinkClassName: "pagination__item-link_state_active", breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
310
+ return (allItemsCount > perPageCount && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`, fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass && `text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
311
+ `text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
272
312
  `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled",
273
313
  // pages settings
274
- forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`),
314
+ forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`),
275
315
  // next button
276
- nextLabel: jsx(Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
277
- (() => (jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && 'text', textColorClass && `text-color_${textColorClass}`), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`), previousLabel: jsx(Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsx(Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass && `fill_${fillInputClass}`, fillHoverClass && `fill_hover_${fillInputHoverClass}`), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
316
+ nextLabel: jsx(Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
317
+ (() => (jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsx(Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsx(Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass && `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
278
318
  pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
279
319
  pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
280
320
  }
package/dist/css/components/MenuItem/MenuItem.css CHANGED
@@ -1,7 +1,6 @@
1
1
  .menu-item {
2
2
  position: relative;
3
3
  display: flex;
4
- align-items: center;
5
4
  &:hover {
6
5
  ^&__tooltip {
7
6
  visibility: visible;
@@ -16,6 +15,9 @@
16
15
  display: flex;
17
16
  align-items: center;
18
17
  align-content: center;
18
+ ^&__icon_before {
19
+ height: 100%;
20
+ }
19
21
  }
20
22
  &__label {
21
23
  display: flex;
@@ -23,8 +25,8 @@
23
25
  flex-grow: 1;
24
26
  }
25
27
  &__tooltip {
26
- visibility: hidden;
27
28
  position: absolute !important;
29
+ visibility: hidden;
28
30
  animation-duration: 0.1s;
29
31
  animation-name: menuTooltipHideAnimation;
30
32
  }
@@ -76,8 +78,8 @@
76
78
  &_$(size) {
77
79
  min-height: var(--menu-item-size-$(size)-min-height);
78
80
  padding: var(--menu-item-size-$(size)-padding);
79
- ^^&__wrapper {
80
- border-radius: var(--menu-item-size-$(size)-rounded);
81
+ ^^&__icon_before {
82
+ padding: var(--menu-item-size-$(size)-icon-padding);
81
83
  }
82
84
  }
83
85
  }
@@ -125,9 +127,9 @@
125
127
  }
126
128
 
127
129
  :root {
128
- --menu-item-size-xxl-padding: 0 14px;
129
- --menu-item-size-xl-padding: 0 10px;
130
- --menu-item-size-l-padding: 0 8px;
130
+ --menu-item-size-xxl-padding: 4px 14px;
131
+ --menu-item-size-xl-padding: 4px 10px;
132
+ --menu-item-size-l-padding: 2px 8px;
131
133
  --menu-item-size-m-padding: 0 6px;
132
134
  --menu-item-size-s-padding: 0 6px;
133
135
  --menu-item-size-xs-padding: 0 4px;
@@ -148,4 +150,12 @@
148
150
  --menu-item-size-s-min-height: 24px;
149
151
  --menu-item-size-xs-min-height: 20px;
150
152
  --menu-item-size-xxs-min-height: 16px;
153
+
154
+ --menu-item-size-xxl-icon-padding: 4px 0;
155
+ --menu-item-size-xl-icon-padding: 4px 0;
156
+ --menu-item-size-l-icon-padding: 4px 0;
157
+ --menu-item-size-m-icon-padding: 4px 0;
158
+ --menu-item-size-s-icon-padding: 4px 0;
159
+ --menu-item-size-xs-icon-padding: 4px 0;
160
+ --menu-item-size-xxs-icon-padding: 4px 0;
151
161
  }
package/dist/css/components/Pagination/Pagination.css CHANGED
@@ -23,6 +23,7 @@
23
23
  &__input {
24
24
  position: relative;
25
25
  display: flex;
26
+ transition: var(--paginator-input-transition);
26
27
  justify-content: center;
27
28
  align-items: center;
28
29
  }
@@ -199,6 +200,8 @@
199
200
  --paginator-item-disabled-text: var(--color-surface-text-primary);
200
201
  --paginator-item-disabled-icon: var(--color-surface-item-disabled);
201
202
 
203
+ --paginator-input-transition: all 0.2s ease 0s;
204
+
202
205
  --pagination-input-size-l-padding: 10px 12px;
203
206
  --pagination-input-size-l-gap: 4px;
204
207
 
package/dist/css/styles/alignment/alignment.css CHANGED
@@ -40,10 +40,12 @@ div.alignment {
40
40
  position: absolute;
41
41
  top: 50%;
42
42
  right: 100%;
43
+ transform: translateY(-50%);
43
44
  }
44
45
  &_right-center {
45
46
  position: absolute;
46
47
  left: 100%;
47
48
  top: 50%;
49
+ transform: translateY(-50%);
48
50
  }
49
51
  }
package/dist/css/styles/bundle.css CHANGED
@@ -322,11 +322,13 @@ div.alignment {
322
322
  position: absolute;
323
323
  top: 50%;
324
324
  right: 100%;
325
+ transform: translateY(-50%);
325
326
  }
326
327
  &_right-center {
327
328
  position: absolute;
328
329
  left: 100%;
329
330
  top: 50%;
331
+ transform: translateY(-50%);
330
332
  }
331
333
  }
332
334
  .blur {
package/dist/types/components/Pagination/appearance/paginationShape.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ declare const paginationAppearanceShape: {
2
+ circular: {
3
+ shape: string;
4
+ };
5
+ rounded: {
6
+ fillInputShape: string;
7
+ pageCountDropdownShape: string;
8
+ };
9
+ roundedXL: {
10
+ fillInputShape: string;
11
+ fillInputShapeStrength: string;
12
+ pageCountDropdownShape: string;
13
+ pageCountDropdownShapeStrength: string;
14
+ };
15
+ roundedL: {
16
+ fillInputShape: string;
17
+ fillInputShapeStrength: string;
18
+ pageCountDropdownShape: string;
19
+ pageCountDropdownShapeStrength: string;
20
+ };
21
+ roundedM: {
22
+ fillInputShape: string;
23
+ fillInputShapeStrength: string;
24
+ pageCountDropdownShape: string;
25
+ pageCountDropdownShapeStrength: string;
26
+ };
27
+ roundedS: {
28
+ fillInputShape: string;
29
+ fillInputShapeStrength: string;
30
+ pageCountDropdownShape: string;
31
+ pageCountDropdownShapeStrength: string;
32
+ };
33
+ };
34
+ export { paginationAppearanceShape };
package/dist/types/components/Pagination/appearance/paginationSurface.d.ts CHANGED
@@ -5,13 +5,18 @@ declare const paginationAppearanceSurface: {
5
5
  fillActive: string;
6
6
  fillActiveHover: string;
7
7
  fillInput: string;
8
+ fillInputHover: string;
8
9
  textColor: string;
10
+ textColorHover: string;
11
+ textColorActive: string;
12
+ textColorActiveHover: string;
9
13
  builderIconFillIcon: string;
10
14
  nextIconFillIcon: string;
11
15
  pageCountDescTextColor: string;
12
16
  pageCountDropdownAlignment: string;
13
17
  pageCountDropdownElevation: number;
14
18
  pageCountDropdownFill: string;
19
+ pageCountDropdownFillHover: string;
15
20
  pageCountDropdownItemDividerFill: string;
16
21
  pageCountDropdownItemFill: string;
17
22
  pageCountDropdownItemFillActive: string;
@@ -22,7 +27,6 @@ declare const paginationAppearanceSurface: {
22
27
  pageCountDropdownItemLabelColorActive: string;
23
28
  pageCountDropdownItemLabelColorActiveHover: string;
24
29
  pageCountDropdownItemLabelColorHover: string;
25
- pageCountDropdownShape: string;
26
30
  pageCountInputIconColor: string;
27
31
  pageCountInputTextColor: string;
28
32
  previousIconFillIcon: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.8.131",
3
+ "version": "1.8.133",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",
@@ -102,8 +102,8 @@
102
102
  "dependencies": {
103
103
  "@emotion/is-prop-valid": "^1.4.0",
104
104
  "@itcase/common": "^1.2.32",
105
- "@itcase/icons": "^1.2.19",
106
- "@itcase/storybook-config": "^1.2.10",
105
+ "@itcase/icons": "^1.2.23",
106
+ "@itcase/storybook-config": "^1.2.11",
107
107
  "@itcase/tokens-am": "^1.1.19",
108
108
  "@itcase/tokens-baikal": "^1.1.17",
109
109
  "@itcase/tokens-palette": "^1.1.11",
@@ -121,7 +121,7 @@
121
121
  "react-dom": "^18.3.1",
122
122
  "react-indiana-drag-scroll": "^3.0.3-alpha",
123
123
  "react-inlinesvg": "^4.2.0",
124
- "react-modal-sheet": "5.1.1",
124
+ "react-modal-sheet": "5.1.2",
125
125
  "react-modern-drawer": "^1.4.0",
126
126
  "react-otp-input": "^3.1.1",
127
127
  "react-paginate": "^8.3.0",
@@ -140,7 +140,7 @@
140
140
  "@commitlint/cli": "^19.8.1",
141
141
  "@commitlint/config-conventional": "^19.8.1",
142
142
  "@itcase/config": "^1.0.57",
143
- "@itcase/lint": "^1.1.59",
143
+ "@itcase/lint": "^1.1.62",
144
144
  "@itcase/types": "^1.0.45",
145
145
  "@rollup/plugin-alias": "^5.1.1",
146
146
  "@rollup/plugin-babel": "^6.0.4",
@@ -171,13 +171,13 @@
171
171
  "lint-staged": "^16.1.6",
172
172
  "prettier": "^3.6.2",
173
173
  "react-docgen-typescript": "^2.4.0",
174
- "rollup": "^4.50.1",
174
+ "rollup": "^4.50.2",
175
175
  "rollup-plugin-copy": "^3.5.0",
176
176
  "rollup-plugin-dts": "^6.2.3",
177
177
  "rollup-plugin-peer-deps-external": "^2.2.4",
178
178
  "rollup-preserve-directives": "^1.1.3",
179
179
  "semantic-release": "^24.2.8",
180
- "storybook": "^9.1.5",
180
+ "storybook": "^9.1.6",
181
181
  "stylelint": "^16.24.0",
182
182
  "typescript": "^5.9.2"
183
183
  }