@itcase/ui-web 1.10.5 → 1.10.7

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.
@@ -48126,7 +48126,6 @@ div.avatar-stack {
48126
48126
  &__desc,
48127
48127
  &__after {
48128
48128
  grid-column: 2;
48129
- border: solid 1px red;
48130
48129
  }
48131
48130
  &__text {
48132
48131
  display: flex;
@@ -83,6 +83,7 @@ type AccordionItemProps = AccordionItemAppearanceProps & StyleAttributes & {
83
83
  children?: ReactNode;
84
84
  className?: string;
85
85
  content?: ReactNode;
86
+ dataTestId?: string;
86
87
  isExpanded?: boolean;
87
88
  onClick?: (item: AccordionItemEventData) => void;
88
89
  style?: CSSProperties;
@@ -31,7 +31,7 @@ function Accordion(props) {
31
31
  }, [isMultiple, onClickItem]);
32
32
  const accordionItemsList = useMemo(() => {
33
33
  if (items) {
34
- return items.map((item, i) => (_jsx(AccordionItem, { id: item.id, appearance: appearance, title: item.title, content: item.content, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, `accordionItem_${item.id || i + 1}`)));
34
+ return items.map((item, i) => (_jsx(AccordionItem, { id: item.id, appearance: appearance, dataTestId: dataTestId, title: item.title, content: item.content, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, `accordionItem_${item.id || i + 1}`)));
35
35
  }
36
36
  if (children) {
37
37
  return React.Children.toArray(children).map((child) => {
@@ -39,6 +39,7 @@ function Accordion(props) {
39
39
  const childID = child.props.id || child.key;
40
40
  return React.cloneElement(child, {
41
41
  id: childID,
42
+ dataTestId: child.props.dataTestId ?? dataTestId,
42
43
  isExpanded: expandedItems.includes(childID),
43
44
  onClick: onClickAccordionItem,
44
45
  });
@@ -47,7 +48,14 @@ function Accordion(props) {
47
48
  });
48
49
  }
49
50
  return [];
50
- }, [items, children, appearance, expandedItems, onClickAccordionItem]);
51
+ }, [
52
+ items,
53
+ children,
54
+ appearance,
55
+ dataTestId,
56
+ expandedItems,
57
+ onClickAccordionItem,
58
+ ]);
51
59
  const propsGenerator = useDevicePropsGenerator(props);
52
60
  const { fillClass, borderColorClass, shapeClass, widthClass } = propsGenerator;
53
61
  const { styles: accordionStyles } = useStyles(props);
@@ -15,7 +15,7 @@ const accordionItemConfig = {
15
15
  },
16
16
  };
17
17
  function AccordionItem(props) {
18
- const { id, appearance, className, title, afterContent, beforeContent, content, isExpanded, onClick, children, } = props;
18
+ const { id, appearance, className, dataTestId, title, afterContent, beforeContent, content, isExpanded, onClick, children, } = props;
19
19
  const onClickTitle = useCallback(() => {
20
20
  const thisItemData = {
21
21
  id: id,
@@ -29,6 +29,6 @@ function AccordionItem(props) {
29
29
  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
30
30
  const { fillClass, fillHoverClass, titleBorderColorClass, titleFillClass, titleFillHoverClass, titleTextColor, titleTextSize, titleTextWeight, titleWidthClass, borderColorClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, contentTextColor, contentTextSize, contentTextWeight, dividerDirection, dividerFill, dividerSize, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, shapeClass, showDivider, sizeClass, zeroGap, zeroPadding, } = propsGenerator;
31
31
  const { styles } = useStyles(props);
32
- return (_jsxs("div", { className: clsx('accordion-item', className, zeroPadding && 'accordion-item_zero-padding', zeroGap && 'accordion-item_zero-gap', borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `accordion-item_size_${sizeClass}`, isExpanded && 'accordion-item_state_open'), style: styles, children: [_jsxs("div", { className: clsx('accordion-item__header', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), children: [_jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass && `border-color_${titleBorderColorClass}`, titleFillClass && `fill_${titleFillClass}`, titleFillHoverClass && `fill_hover_${titleFillHoverClass}`, titleWidthClass && `width_${titleWidthClass}`, onClick && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), _jsxs("div", { className: "accordion-item__action", children: [badgeValue && (_jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: "accordion-item__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (_jsx(Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle }))] }), showDivider && (_jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), beforeContent, isExpanded && (_jsxs("div", { className: clsx('accordion-item__content'), children: [content && (_jsx("div", { className: clsx('accordion-item__content-inner', fillClass && `fill_${fillClass}`), children: _jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
32
+ return (_jsxs("div", { className: clsx('accordion-item', className, zeroPadding && 'accordion-item_zero-padding', zeroGap && 'accordion-item_zero-gap', borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `accordion-item_size_${sizeClass}`, isExpanded && 'accordion-item_state_open'), style: styles, children: [_jsxs("div", { className: clsx('accordion-item__header', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), "data-testid": dataTestId && id ? `${dataTestId}Item${id}Title` : undefined, children: [_jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass && `border-color_${titleBorderColorClass}`, titleFillClass && `fill_${titleFillClass}`, titleFillHoverClass && `fill_hover_${titleFillHoverClass}`, titleWidthClass && `width_${titleWidthClass}`, onClick && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), _jsxs("div", { className: "accordion-item__action", children: [badgeValue && (_jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: "accordion-item__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (_jsx(Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle }))] }), showDivider && (_jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), beforeContent, isExpanded && (_jsxs("div", { className: clsx('accordion-item__content'), children: [content && (_jsx("div", { className: clsx('accordion-item__content-inner', fillClass && `fill_${fillClass}`), children: _jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
33
33
  }
34
34
  export { AccordionItem, accordionItemConfig };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui-web",
3
- "version": "1.10.5",
3
+ "version": "1.10.7",
4
4
  "description": "UI components",
5
5
  "keywords": "",
6
6
  "license": "MIT",
@@ -48,20 +48,20 @@
48
48
  ]
49
49
  },
50
50
  "dependencies": {
51
- "@itcase/common": "^1.2.41",
51
+ "@itcase/common": "^1.2.43",
52
52
  "@itcase/icons": "^1.2.29",
53
53
  "@itcase/tokens-am": "^1.1.57",
54
54
  "@itcase/tokens-baikal": "^1.1.54",
55
55
  "@itcase/tokens-palette": "^1.1.50",
56
- "@itcase/ui-core": "^1.10.2",
56
+ "@itcase/ui-core": "^1.10.7",
57
57
  "@rc-component/tooltip": "^1.4.0",
58
58
  "clsx": "^2.1.1",
59
- "date-fns": "^4.2.1",
60
- "framer-motion": "^12.39.0",
59
+ "date-fns": "^4.3.0",
60
+ "framer-motion": "^12.40.0",
61
61
  "js-cookie": "^3.0.7",
62
62
  "lodash": "^4.18.1",
63
63
  "luxon": "^3.7.2",
64
- "motion": "^12.39.0",
64
+ "motion": "^12.40.0",
65
65
  "rc-slider": "^11.1.9",
66
66
  "react": "^18.3.1",
67
67
  "react-dadata": "^2.27.4",
@@ -83,11 +83,11 @@
83
83
  "uuid": "^14.0.0"
84
84
  },
85
85
  "devDependencies": {
86
- "@babel/core": "^7.29.0",
87
- "@babel/preset-react": "^7.28.5",
88
- "@itcase/storybook-config": "^1.2.58",
86
+ "@babel/core": "^7.29.7",
87
+ "@babel/preset-react": "^7.29.7",
88
+ "@itcase/storybook-config": "^1.2.69",
89
89
  "@itcase/types-core": "^1.1.74",
90
- "@itcase/types-ui": "^1.1.75",
90
+ "@itcase/types-ui": "^1.1.79",
91
91
  "@rollup/plugin-alias": "^6.0.0",
92
92
  "@rollup/plugin-babel": "^7.0.0",
93
93
  "@rollup/plugin-commonjs": "^29.0.2",
@@ -96,7 +96,7 @@
96
96
  "@rollup/plugin-node-resolve": "^16.0.3",
97
97
  "@rollup/plugin-terser": "^1.0.0",
98
98
  "@rollup/plugin-typescript": "^12.3.0",
99
- "@storybook/addon-vitest": "^10.4.0",
99
+ "@storybook/addon-vitest": "^10.4.1",
100
100
  "@types/js-cookie": "^3.0.6",
101
101
  "@types/lodash": "^4.17.24",
102
102
  "@types/luxon": "^3.7.1",
@@ -111,8 +111,8 @@
111
111
  "rollup-plugin-copy": "^3.5.0",
112
112
  "rollup-plugin-peer-deps-external": "^2.2.4",
113
113
  "rollup-preserve-directives": "^1.1.3",
114
- "storybook": "^10.4.0",
114
+ "storybook": "^10.4.1",
115
115
  "typescript": "^6.0.3"
116
116
  },
117
- "gitHead": "ea3795337b22a898444144edc12cf502357eb39a"
117
+ "gitHead": "8a40e5fcfcbc614476acfd0e704537dcc2b5408f"
118
118
  }