@itcase/ui-web 1.10.35 → 1.10.37
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.
- package/dist/Button_cjs_F8vKfD-9.js +1 -0
- package/dist/Button_es_7K5ecrgl.js +1 -0
- package/dist/{ChipsGroup_cjs_DEWTbz1r.js → ChipsGroup_cjs_Dwop8JZZ.js} +1 -1
- package/dist/{ChipsGroup_es_B3nRK-lq.js → ChipsGroup_es_BG3rhNzZ.js} +1 -1
- package/dist/{DatePicker_cjs_Cg_vcAg8.js → DatePicker_cjs_BaTprMdi.js} +1 -1
- package/dist/{DatePicker_es_Blh9tXre.js → DatePicker_es_Du-3MZ9y.js} +1 -1
- package/dist/cjs/components/Button.js +1 -1
- package/dist/cjs/components/Chips.js +1 -1
- package/dist/cjs/components/CookiesWarning.js +1 -1
- package/dist/cjs/components/DatePeriod.js +1 -1
- package/dist/cjs/components/DatePicker.js +1 -1
- package/dist/cjs/components/Dropzone.js +1 -1
- package/dist/cjs/components/InputNumber.js +1 -1
- package/dist/cjs/components/Notification.js +1 -1
- package/dist/cjs/components/Response.js +1 -1
- package/dist/cjs/components/Segmented.js +1 -1
- package/dist/cjs/components/Tab.js +1 -1
- package/dist/components/Button.js +1 -1
- package/dist/components/Chips.js +1 -1
- package/dist/components/CookiesWarning.js +1 -1
- package/dist/components/DatePeriod.js +1 -1
- package/dist/components/DatePicker.js +1 -1
- package/dist/components/Dropzone.js +1 -1
- package/dist/components/InputNumber.js +1 -1
- package/dist/components/Notification.js +1 -1
- package/dist/components/Response.js +1 -1
- package/dist/components/Segmented.js +1 -1
- package/dist/components/Tab.js +1 -1
- package/dist/types/components/Accordion/Accordion.d.ts +2 -1
- package/dist/types/components/Accordion/AccordionItem.d.ts +1 -1
- package/dist/types/components/Avatar/Avatar.d.ts +1 -1
- package/dist/types/components/Avatar/Avatar.interface.d.ts +7 -1
- package/dist/types/components/AvatarStack/AvatarStack.d.ts +1 -1
- package/dist/types/components/Badge/Badge.d.ts +1 -1
- package/dist/types/components/Breadcrumbs/Breadcrumbs.d.ts +1 -1
- package/dist/types/components/Breadcrumbs/BreadcrumbsItem.d.ts +1 -1
- package/dist/types/components/Button/Button.appearance.d.ts +3 -0
- package/dist/types/components/Button/Button.interface.d.ts +80 -1
- package/dist/types/components/Button/Button.js +1 -1
- package/dist/types/components/Button/appearance/buttonShape.d.ts +3 -0
- package/dist/types/components/Button/appearance/buttonShape.js +3 -0
- package/dist/types/components/Cell/Cell.d.ts +1 -1
- package/dist/types/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/types/components/Checkmark/Checkmark.d.ts +1 -1
- package/dist/types/components/Chips/Chips.d.ts +1 -1
- package/dist/types/components/Chips/Chips.interface.d.ts +2 -0
- package/dist/types/components/Chips/ChipsGroup.d.ts +1 -1
- package/dist/types/components/Chips/ChipsGroup.js +5 -5
- package/dist/types/components/Choice/Choice.d.ts +2 -1
- package/dist/types/components/Code/Code.d.ts +1 -1
- package/dist/types/components/CookiesWarning/CookiesWarning.d.ts +1 -1
- package/dist/types/components/Dadata/Dadata.d.ts +1 -1
- package/dist/types/components/DatePeriod/DatePeriod.d.ts +1 -1
- package/dist/types/components/DatePicker/DatePicker.d.ts +2 -1
- package/dist/types/components/Divider/Divider.d.ts +1 -1
- package/dist/types/components/Dot/Dot.d.ts +1 -1
- package/dist/types/components/Drawer/Drawer.d.ts +2 -1
- package/dist/types/components/Dropdown/Dropdown.d.ts +1 -1
- package/dist/types/components/Dropdown/DropdownItem.d.ts +2 -1
- package/dist/types/components/Dropzone/Dropzone.d.ts +1 -1
- package/dist/types/components/Flex/Flex.d.ts +1 -1
- package/dist/types/components/Flex/FlexItem.d.ts +1 -1
- package/dist/types/components/Flex/__test__/FlexTest.stories.d.ts +1 -1
- package/dist/types/components/Grid/Grid.d.ts +1 -1
- package/dist/types/components/Grid/GridItem.d.ts +1 -1
- package/dist/types/components/Grid/GridRow.d.ts +1 -1
- package/dist/types/components/Grid/__test__/GridTest.stories.d.ts +1 -1
- package/dist/types/components/HTMLContent/HTMLContent.d.ts +1 -1
- package/dist/types/components/HeroTitle/HeroTitle.d.ts +1 -1
- package/dist/types/components/InputNumber/InputNumber.d.ts +1 -1
- package/dist/types/components/InputNumber/__test__/InputNumberTest.stories.d.ts +1 -1
- package/dist/types/components/InputPassword/InputPassword.d.ts +1 -1
- package/dist/types/components/Label/Label.d.ts +1 -1
- package/dist/types/components/Link/Link.d.ts +2 -2
- package/dist/types/components/List/List.d.ts +1 -1
- package/dist/types/components/List/ListItem.d.ts +1 -1
- package/dist/types/components/Loader/Loader.d.ts +1 -1
- package/dist/types/components/MenuItem/MenuItem.d.ts +2 -1
- package/dist/types/components/Modal/ModalLoader.d.ts +1 -1
- package/dist/types/components/Notification/Notification.d.ts +1 -1
- package/dist/types/components/Notification/NotificationWrapper.d.ts +1 -1
- package/dist/types/components/Overlay/Overlay.d.ts +1 -1
- package/dist/types/components/Pagination/Pagination.d.ts +1 -1
- package/dist/types/components/Radio/Radio.d.ts +1 -1
- package/dist/types/components/RangeSlider/RangeSlider.d.ts +1 -1
- package/dist/types/components/Response/Response.js +1 -1
- package/dist/types/components/ScrollOnDrag/ScrollOnDrag.d.ts +2 -1
- package/dist/types/components/Scrollbar/Scrollbar.d.ts +1 -1
- package/dist/types/components/Segmented/Segmented.d.ts +1 -1
- package/dist/types/components/Segmented/Segmented.interface.d.ts +3 -0
- package/dist/types/components/Segmented/Segmented.js +18 -18
- package/dist/types/components/Segmented/__test__/SegmentedTest.stories.d.ts +1 -1
- package/dist/types/components/Select/SelectClearIndicator.d.ts +1 -1
- package/dist/types/components/Select/SelectControl.d.ts +2 -1
- package/dist/types/components/Select/SelectDropdownIndicator.d.ts +1 -1
- package/dist/types/components/Select/SelectGroupHeading.d.ts +1 -1
- package/dist/types/components/Select/SelectIndicatorsContainer.d.ts +1 -1
- package/dist/types/components/Select/SelectInput.d.ts +1 -1
- package/dist/types/components/Select/SelectLoadingIndicator.d.ts +1 -1
- package/dist/types/components/Select/SelectLoadingMessage.d.ts +1 -1
- package/dist/types/components/Select/SelectMenu.d.ts +2 -1
- package/dist/types/components/Select/SelectMultiValue.d.ts +1 -1
- package/dist/types/components/Select/SelectMultiValueContainer.d.ts +1 -1
- package/dist/types/components/Select/SelectMultiValueLabel.d.ts +1 -1
- package/dist/types/components/Select/SelectMultiValueRemove.d.ts +1 -1
- package/dist/types/components/Select/SelectNoOptions.d.ts +1 -1
- package/dist/types/components/Select/SelectOption.d.ts +1 -1
- package/dist/types/components/Select/SelectPlaceholder.d.ts +1 -1
- package/dist/types/components/Select/SelectSingleValue.d.ts +1 -1
- package/dist/types/components/Select/SelectValueContainer.d.ts +1 -1
- package/dist/types/components/Swiper/Swiper.d.ts +2 -1
- package/dist/types/components/Tab/Tab.d.ts +2 -1
- package/dist/types/components/Tab/Tab.interface.d.ts +3 -0
- package/dist/types/components/Tab/TabGroup.d.ts +2 -1
- package/dist/types/components/Tab/TabGroup.js +2 -2
- package/dist/types/components/Text/Text.d.ts +1 -1
- package/dist/types/components/Textarea/Textarea.d.ts +1 -1
- package/dist/types/components/Tile/Tile.d.ts +1 -1
- package/dist/types/components/Title/Title.d.ts +1 -1
- package/dist/types/components/Tooltip/TooltipWrapper.d.ts +1 -1
- package/dist/types/components/Video/Video.d.ts +1 -1
- package/dist/types/components/Warning/Warning.d.ts +1 -1
- package/dist/types/storybook/createComponentGallery/createComponentGallery.d.ts +1 -1
- package/package.json +6 -8
- package/dist/Button_cjs_Dq2pZYkE.js +0 -1
- package/dist/Button_es_l1l4XH3Z.js +0 -1
|
@@ -9,84 +9,157 @@ import { LoaderProps } from '../Loader/Loader.interface';
|
|
|
9
9
|
import { TextProps } from '../Text/Text.interface';
|
|
10
10
|
type ButtonIconProp = false | IconProps['SvgImage'];
|
|
11
11
|
type ButtonAppearanceProps = {
|
|
12
|
+
/** Align preset */
|
|
12
13
|
align?: AlignProps;
|
|
14
|
+
/** Border color token */
|
|
13
15
|
borderColor?: BorderColorProps;
|
|
16
|
+
/** Border style token */
|
|
14
17
|
borderType?: BorderTypeProps;
|
|
18
|
+
/** Border width token */
|
|
15
19
|
borderWidth?: BorderWidthProps;
|
|
20
|
+
/** Fill background token */
|
|
16
21
|
fill?: FillProps;
|
|
22
|
+
/** Fill hover-state token */
|
|
17
23
|
fillHover?: FillHoverProps;
|
|
18
24
|
icon?: ButtonIconProp;
|
|
19
25
|
iconAfter?: ButtonIconProp;
|
|
20
26
|
iconAfterAppearance?: IconProps['appearance'];
|
|
27
|
+
/** Icon appearance size token for after icon */
|
|
21
28
|
iconAfterAppearanceSize?: AppearanceIconSizeKey;
|
|
29
|
+
/** Icon fill token for after icon */
|
|
22
30
|
iconAfterFill?: IconProps['fill'];
|
|
31
|
+
/** Icon color token for after icon glyph */
|
|
23
32
|
iconAfterFillIcon?: IconProps['iconFill'];
|
|
33
|
+
/** Icon fill-size token for after icon */
|
|
24
34
|
iconAfterFillSize?: IconProps['fillSize'];
|
|
35
|
+
/** Icon shape token for after icon */
|
|
25
36
|
iconAfterShape?: IconProps['shape'];
|
|
37
|
+
/** Icon size token for after icon */
|
|
26
38
|
iconAfterSize?: IconProps['iconSize'];
|
|
39
|
+
/** Icon image source for after slot */
|
|
27
40
|
iconAfterSrc?: IconProps['imageSrc'];
|
|
41
|
+
/** Icon appearance preset */
|
|
28
42
|
iconAppearance?: IconProps['appearance'];
|
|
43
|
+
/** Icon appearance size token */
|
|
29
44
|
iconAppearanceSize?: IconProps['iconSize'];
|
|
30
45
|
iconBefore?: ButtonIconProp;
|
|
31
46
|
iconBeforeAppearance?: IconProps['appearance'];
|
|
47
|
+
/** Icon appearance size token for before icon */
|
|
32
48
|
iconBeforeAppearanceSize?: AppearanceIconSizeKey;
|
|
49
|
+
/** Icon fill token for before icon */
|
|
33
50
|
iconBeforeFill?: IconProps['fill'];
|
|
51
|
+
/** Icon color token for before icon glyph */
|
|
34
52
|
iconBeforeFillIcon?: IconProps['iconFill'];
|
|
53
|
+
/** Icon fill-size token for before icon */
|
|
35
54
|
iconBeforeFillSize?: IconProps['fillSize'];
|
|
55
|
+
/** Icon shape token for before icon */
|
|
36
56
|
iconBeforeShape?: IconProps['shape'];
|
|
57
|
+
/** Icon size token for before icon */
|
|
37
58
|
iconBeforeSize?: IconProps['iconSize'];
|
|
59
|
+
/** Icon image source for before slot */
|
|
38
60
|
iconBeforeSrc?: IconProps['imageSrc'];
|
|
61
|
+
/** Icon fill token */
|
|
39
62
|
iconFill?: IconProps['fill'];
|
|
63
|
+
/** Icon hover fill token */
|
|
40
64
|
iconFillHover?: IconProps['fillHover'];
|
|
65
|
+
/** Icon glyph color token */
|
|
41
66
|
iconFillIcon?: IconProps['iconFill'];
|
|
67
|
+
/** Icon fill-size token */
|
|
42
68
|
iconFillSize?: IconProps['fillSize'];
|
|
69
|
+
/** Icon shape token */
|
|
43
70
|
iconShape?: IconProps['shape'];
|
|
71
|
+
/** Icon size token */
|
|
44
72
|
iconSize?: IconProps['iconSize'];
|
|
73
|
+
/** Icon image source for main slot */
|
|
45
74
|
iconSrc?: IconProps['imageSrc'];
|
|
75
|
+
/** Label text color token */
|
|
46
76
|
labelTextColor?: TextProps['textColor'];
|
|
77
|
+
/** Label hover text color token */
|
|
47
78
|
labelTextColorHover?: TextProps['textColorHover'];
|
|
79
|
+
/** Label typography size token */
|
|
48
80
|
labelTextSize?: TextProps['size'];
|
|
81
|
+
/** Label typography weight token */
|
|
49
82
|
labelTextWeight?: TextProps['textWeight'];
|
|
83
|
+
/** Label text wrapping behavior */
|
|
50
84
|
labelTextWrap?: TextProps['textWrap'];
|
|
51
85
|
loaderAppearance?: CompositeAppearanceWithoutSizeAndShapeKeys;
|
|
52
86
|
loaderAppearanceSize?: AppearanceSizeKey;
|
|
87
|
+
/** Loader fill token */
|
|
53
88
|
loaderFill?: LoaderProps['fill'];
|
|
89
|
+
/** Loader item fill token */
|
|
54
90
|
loaderItemFill?: LoaderProps['itemFill'];
|
|
91
|
+
/** Loader shape token */
|
|
55
92
|
loaderShape?: LoaderProps['shape'];
|
|
93
|
+
/** Loader size token */
|
|
56
94
|
loaderSize?: LoaderProps['size'];
|
|
95
|
+
/** Loader type variant */
|
|
57
96
|
loaderType?: LoaderProps['type'];
|
|
97
|
+
/** Shape token */
|
|
58
98
|
shape?: ShapeProps;
|
|
99
|
+
/** Size token */
|
|
59
100
|
size?: SizeProps;
|
|
101
|
+
/** Wrap mode preset */
|
|
60
102
|
wrap?: WrapProps;
|
|
103
|
+
/** Zero-gap flag */
|
|
61
104
|
zeroGap?: boolean;
|
|
105
|
+
/** Zero-padding flag */
|
|
62
106
|
zeroPadding?: boolean;
|
|
63
107
|
};
|
|
64
108
|
type ButtonProps = ButtonAppearanceProps & StyleAttributes & {
|
|
109
|
+
/** After text value */
|
|
65
110
|
after?: string;
|
|
111
|
+
/**
|
|
112
|
+
* Composite appearance preset for button colors, size, style, and shape
|
|
113
|
+
* @default "accentPrimary sizeXXL solid rounded"
|
|
114
|
+
*/
|
|
66
115
|
appearance?: CompositeAppearanceKeys;
|
|
116
|
+
/** Badge slot content */
|
|
67
117
|
Badge?: ReactNode;
|
|
118
|
+
/** Before text value */
|
|
68
119
|
before?: string;
|
|
120
|
+
/** Children slot content */
|
|
69
121
|
children?: ReactNode;
|
|
122
|
+
/** Root className value */
|
|
70
123
|
className?: string;
|
|
124
|
+
/** Test id value */
|
|
71
125
|
dataTestId?: string;
|
|
126
|
+
/** Tour id value */
|
|
72
127
|
dataTour?: string;
|
|
128
|
+
/** Elevation preset */
|
|
73
129
|
elevation?: ElevationProps;
|
|
130
|
+
/** Href value */
|
|
74
131
|
href?: LinkWrapperProps['href'];
|
|
132
|
+
/** HTML type value */
|
|
75
133
|
htmlType?: LinkWrapperProps['type'];
|
|
134
|
+
/** Disabled state flag */
|
|
76
135
|
isDisabled?: LinkWrapperProps['disabled'];
|
|
136
|
+
/** Hold state flag */
|
|
77
137
|
isHolding?: boolean;
|
|
138
|
+
/** Loading state flag */
|
|
78
139
|
isLoading?: boolean;
|
|
140
|
+
/** Skeleton state flag */
|
|
79
141
|
isSkeleton?: boolean;
|
|
142
|
+
/** Label text value */
|
|
80
143
|
label?: string;
|
|
144
|
+
/** Label text truncation mode */
|
|
81
145
|
labelTextTruncate?: TextProps['textTruncate'];
|
|
146
|
+
/** Label text width value */
|
|
82
147
|
labelTextWidth?: TextProps['width'];
|
|
148
|
+
/** Link value */
|
|
83
149
|
link?: LinkWrapperProps['href'];
|
|
150
|
+
/** Click handler */
|
|
84
151
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
152
|
+
/** Hold-complete handler */
|
|
85
153
|
onHoldComplete?: () => void;
|
|
154
|
+
/** Mouse-down handler */
|
|
86
155
|
onMouseDown?: () => void;
|
|
156
|
+
/** Rel value */
|
|
87
157
|
rel?: LinkWrapperProps['rel'];
|
|
158
|
+
/** Inline style value */
|
|
88
159
|
style?: CSSProperties;
|
|
160
|
+
/** Target value */
|
|
89
161
|
target?: LinkWrapperProps['target'];
|
|
162
|
+
/** Tooltip text value */
|
|
90
163
|
tooltip?: string;
|
|
91
164
|
};
|
|
92
165
|
type ButtonConfig = AppearanceConfig<AppearanceKeysDefault, ButtonAppearanceProps>;
|
|
@@ -100,4 +173,10 @@ type ButtonGalleryStory = ComponentGalleryArgs & Pick<ButtonProps, 'isDisabled'
|
|
|
100
173
|
iconAfter: boolean;
|
|
101
174
|
iconBefore: boolean;
|
|
102
175
|
};
|
|
103
|
-
|
|
176
|
+
type ButtonStoryArgs = Omit<ButtonProps, 'appearance'> & {
|
|
177
|
+
appearanceShape: string;
|
|
178
|
+
appearanceSize: string;
|
|
179
|
+
appearanceStyle: string;
|
|
180
|
+
appearanceType: string;
|
|
181
|
+
};
|
|
182
|
+
export type { ButtonAppearance, ButtonAppearanceKey, ButtonAppearanceShape, ButtonAppearanceSize, ButtonAppearanceStyle, ButtonConfig, ButtonGalleryStory, ButtonProps, ButtonStoryArgs, };
|
|
@@ -16,7 +16,7 @@ const buttonConfig = {
|
|
|
16
16
|
},
|
|
17
17
|
};
|
|
18
18
|
const Button = React.forwardRef(function Button(props, ref) {
|
|
19
|
-
const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, tooltip, before, after, isDisabled, isHolding, isLoading = false, onClick, onHoldComplete, onMouseDown, children, } = props;
|
|
19
|
+
const { appearance = 'accentPrimary sizeXXL solid rounded', className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, tooltip, before, after, isDisabled, isHolding, isLoading = false, onClick, onHoldComplete, onMouseDown, children, } = props;
|
|
20
20
|
const appearanceConfig = useAppearanceConfig(appearance, buttonConfig, isDisabled);
|
|
21
21
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
22
22
|
const { fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextTruncate, labelTextWeight, labelTextWidth, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, icon, iconAfter, iconAfterAppearance, iconAfterAppearanceSize, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconAppearance, iconAppearanceSize, iconBefore, iconBeforeAppearance, iconBeforeAppearanceSize, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'dot', shapeClass, sizeClass, widthClass, zeroGap, zeroPadding, isSkeleton, } = propsGenerator;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { CellConfig, CellProps } from './Cell.interface';
|
|
2
2
|
declare const cellConfig: CellConfig;
|
|
3
|
-
declare function Cell(props: CellProps): import("react
|
|
3
|
+
declare function Cell(props: CellProps): import("react").JSX.Element;
|
|
4
4
|
export { Cell, cellConfig };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { CheckboxConfig, CheckboxProps } from './Checkbox.interface';
|
|
2
2
|
declare const checkboxConfig: CheckboxConfig;
|
|
3
|
-
declare function Checkbox(props: CheckboxProps): import("react
|
|
3
|
+
declare function Checkbox(props: CheckboxProps): import("react").JSX.Element;
|
|
4
4
|
export { Checkbox, checkboxConfig };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { CheckmarkConfig, CheckmarkProps } from './Checkmark.interface';
|
|
2
2
|
declare const checkmarkConfig: CheckmarkConfig;
|
|
3
|
-
declare function Checkmark(props: CheckmarkProps): import("react
|
|
3
|
+
declare function Checkmark(props: CheckmarkProps): import("react").JSX.Element;
|
|
4
4
|
export { Checkmark, checkmarkConfig };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { ChipsConfig, ChipsProps } from './Chips.interface';
|
|
2
2
|
declare const chipsConfig: ChipsConfig;
|
|
3
|
-
declare function Chips(props: ChipsProps): import("react
|
|
3
|
+
declare function Chips(props: ChipsProps): import("react").JSX.Element;
|
|
4
4
|
export { Chips, chipsConfig };
|
|
@@ -94,6 +94,8 @@ type ChipsGroupAppearanceProps = {
|
|
|
94
94
|
wrap?: WrapProps;
|
|
95
95
|
};
|
|
96
96
|
type ChipsGroupProps = ChipsGroupAppearanceProps & StyleAttributes & {
|
|
97
|
+
after?: ReactNode;
|
|
98
|
+
before?: ReactNode;
|
|
97
99
|
children?: ChipsProps['children'];
|
|
98
100
|
chipsList?: ChipsGroupListItem[];
|
|
99
101
|
className?: ChipsProps['className'];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { useDevicePropsGenerator, useStyles } from '@itcase/ui-core/hooks';
|
|
4
4
|
import { Chips } from './Chips';
|
|
@@ -7,12 +7,12 @@ function ChipsGroup(props) {
|
|
|
7
7
|
* rename "chipsList" to "chipsOptions"
|
|
8
8
|
* to do same structure for "Option" object.
|
|
9
9
|
*/
|
|
10
|
-
const { className, dataTestId, dataTour, chipsList, horizontalScroll, style, onClick, children, } = props;
|
|
10
|
+
const { className, dataTestId, dataTour, chipsList, horizontalScroll, style, before, after, onClick, children, } = props;
|
|
11
11
|
const propsGenerator = useDevicePropsGenerator(props);
|
|
12
12
|
const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
|
|
13
13
|
const { styles: groupStyles } = useStyles(props);
|
|
14
|
-
return (
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
return (_jsxs("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: [before && _jsx("div", { className: "chips-group__before", children: before }), children
|
|
15
|
+
? children
|
|
16
|
+
: chipsList?.map((item) => (_jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconAfterActive: item.iconAfterActive, iconBefore: item.iconBefore, iconBeforeActive: item.iconBeforeActive, isActive: item.isActive, isDisabled: item.isDisabled, onClick: (event) => onClick?.(item, event) }, item.value))), after && _jsx("div", { className: "chips-group__after", children: after })] }));
|
|
17
17
|
}
|
|
18
18
|
export { ChipsGroup };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { ChoiceConfig, ChoiceProps } from './Choice.interface';
|
|
2
3
|
declare const choiceConfig: ChoiceConfig;
|
|
3
|
-
declare function Choice(props: ChoiceProps):
|
|
4
|
+
declare function Choice(props: ChoiceProps): React.JSX.Element;
|
|
4
5
|
export { Choice, choiceConfig };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { CodeConfig, CodeProps } from './Code.interface';
|
|
2
2
|
declare const codeConfig: CodeConfig;
|
|
3
|
-
declare function Code(props: CodeProps): import("react
|
|
3
|
+
declare function Code(props: CodeProps): import("react").JSX.Element;
|
|
4
4
|
export { Code, codeConfig };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CookiesWarningConfig } from './CookiesWarning.interface';
|
|
2
2
|
import type { CookiesWarningProps } from './CookiesWarning.interface';
|
|
3
3
|
declare const cookiesWarningConfig: CookiesWarningConfig;
|
|
4
|
-
declare function CookiesWarning(props: CookiesWarningProps): import("react
|
|
4
|
+
declare function CookiesWarning(props: CookiesWarningProps): import("react").JSX.Element;
|
|
5
5
|
export { CookiesWarning, cookiesWarningConfig };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { DatePeriodConfig, DatePeriodProps } from './DatePeriod.interface';
|
|
2
2
|
declare const datePeriodConfig: DatePeriodConfig;
|
|
3
|
-
declare function DatePeriod(props: DatePeriodProps): import("react
|
|
3
|
+
declare function DatePeriod(props: DatePeriodProps): import("react").JSX.Element;
|
|
4
4
|
export { DatePeriod, datePeriodConfig };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { DatePickerConfig, DatePickerInputProps } from './DatePicker.interface';
|
|
2
3
|
declare const datePickerConfig: DatePickerConfig;
|
|
3
|
-
declare function DatePickerInput(props: DatePickerInputProps):
|
|
4
|
+
declare function DatePickerInput(props: DatePickerInputProps): React.JSX.Element;
|
|
4
5
|
export { datePickerConfig, DatePickerInput };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { DividerConfig, DividerProps } from './Divider.interface';
|
|
2
2
|
declare const dividerConfig: DividerConfig;
|
|
3
|
-
declare function Divider(props: DividerProps): import("react
|
|
3
|
+
declare function Divider(props: DividerProps): import("react").JSX.Element;
|
|
4
4
|
export { Divider, dividerConfig };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { DrawerConfig, DrawerProps } from './Drawer.interface';
|
|
2
3
|
declare const drawerConfig: DrawerConfig;
|
|
3
|
-
declare function Drawer(props: DrawerProps):
|
|
4
|
+
declare function Drawer(props: DrawerProps): React.JSX.Element;
|
|
4
5
|
export { Drawer, drawerConfig };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { DropdownItemConfig, DropdownItemProps } from './Dropdown.interface';
|
|
2
3
|
declare const dropdownItemConfig: DropdownItemConfig;
|
|
3
|
-
declare function DropdownItem(props: DropdownItemProps):
|
|
4
|
+
declare function DropdownItem(props: DropdownItemProps): React.JSX.Element;
|
|
4
5
|
export { DropdownItem, dropdownItemConfig };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropzoneProps } from './Dropzone.interface';
|
|
3
|
-
declare const Dropzone: React.MemoExoticComponent<(props: DropzoneProps) =>
|
|
3
|
+
declare const Dropzone: React.MemoExoticComponent<(props: DropzoneProps) => React.JSX.Element>;
|
|
4
4
|
export { Dropzone };
|
|
@@ -10,7 +10,7 @@ declare const meta: {
|
|
|
10
10
|
parameters: {
|
|
11
11
|
layout: string;
|
|
12
12
|
};
|
|
13
|
-
render: (args: FlexProps) => import("react
|
|
13
|
+
render: (args: FlexProps) => import("react").JSX.Element;
|
|
14
14
|
};
|
|
15
15
|
export default meta;
|
|
16
16
|
type Story = StoryObj<typeof meta>;
|
|
@@ -15,7 +15,7 @@ declare const meta: {
|
|
|
15
15
|
parameters: {
|
|
16
16
|
layout: string;
|
|
17
17
|
};
|
|
18
|
-
render: (args: GridProps) => import("react
|
|
18
|
+
render: (args: GridProps) => import("react").JSX.Element;
|
|
19
19
|
};
|
|
20
20
|
export default meta;
|
|
21
21
|
type Story = StoryObj<typeof meta>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { HTMLContentProps } from './HTMLContent.interface';
|
|
2
|
-
declare function HTMLContent(props: HTMLContentProps): import("react
|
|
2
|
+
declare function HTMLContent(props: HTMLContentProps): import("react").JSX.Element;
|
|
3
3
|
export { HTMLContent };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { HeroTitleConfig, HeroTitleProps } from './HeroTitle.interface';
|
|
2
2
|
declare const heroTitleConfig: HeroTitleConfig;
|
|
3
|
-
declare function HeroTitle(props: HeroTitleProps): import("react
|
|
3
|
+
declare function HeroTitle(props: HeroTitleProps): import("react").JSX.Element;
|
|
4
4
|
export { HeroTitle, heroTitleConfig };
|
|
@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react-vite';
|
|
|
2
2
|
import type { InputNumberProps } from '../InputNumber.interface';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: (props: InputNumberProps) => import("react
|
|
5
|
+
component: (props: InputNumberProps) => import("react").JSX.Element;
|
|
6
6
|
args: {
|
|
7
7
|
appearance: "defaultPrimary sizeXL solid rounded";
|
|
8
8
|
dataTestId: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { InputPasswordConfig, InputPasswordProps } from './InputPassword.interface';
|
|
2
2
|
declare const inputPasswordConfig: InputPasswordConfig;
|
|
3
|
-
declare function InputPassword(props: InputPasswordProps): import("react
|
|
3
|
+
declare function InputPassword(props: InputPasswordProps): import("react").JSX.Element;
|
|
4
4
|
export { InputPassword, inputPasswordConfig };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { LabelConfig, LabelProps } from './Label.interface';
|
|
2
2
|
declare const labelConfig: LabelConfig;
|
|
3
|
-
declare function Label(props: LabelProps): import("react
|
|
3
|
+
declare function Label(props: LabelProps): import("react").JSX.Element;
|
|
4
4
|
export { Label, labelConfig };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { LinkConfig, LinkProps, LinkWrapperProps } from './Link.interface';
|
|
3
3
|
declare const linkConfig: LinkConfig;
|
|
4
|
-
declare function Link(props: LinkProps):
|
|
5
|
-
declare function LinkWrapper(props: LinkWrapperProps):
|
|
4
|
+
declare function Link(props: LinkProps): React.JSX.Element;
|
|
5
|
+
declare function LinkWrapper(props: LinkWrapperProps): React.JSX.Element | (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>)[];
|
|
6
6
|
export { Link, linkConfig, LinkWrapper };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { LoaderConfig, LoaderProps } from './Loader.interface';
|
|
2
2
|
declare const loaderConfig: LoaderConfig;
|
|
3
|
-
declare function Loader(props: LoaderProps): import("react
|
|
3
|
+
declare function Loader(props: LoaderProps): import("react").JSX.Element;
|
|
4
4
|
export { Loader, loaderConfig };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { MenuItemConfig, MenuItemProps } from './MenuItem.interface';
|
|
2
3
|
declare const menuItemConfig: MenuItemConfig;
|
|
3
|
-
declare function MenuItem(props: MenuItemProps):
|
|
4
|
+
declare function MenuItem(props: MenuItemProps): React.JSX.Element;
|
|
4
5
|
export { MenuItem, menuItemConfig };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare function ModalLoader(): import("react
|
|
1
|
+
declare function ModalLoader(): import("react").JSX.Element;
|
|
2
2
|
export { ModalLoader };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { NotificationConfig, NotificationProps } from './Notification.interface';
|
|
2
2
|
declare const notificationConfig: NotificationConfig;
|
|
3
|
-
declare function Notification(props: NotificationProps): import("react
|
|
3
|
+
declare function Notification(props: NotificationProps): import("react").JSX.Element;
|
|
4
4
|
export { Notification, notificationConfig };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { NotificationWrapperProps } from './Notification.interface';
|
|
2
|
-
declare function NotificationWrapper(props: NotificationWrapperProps): import("react
|
|
2
|
+
declare function NotificationWrapper(props: NotificationWrapperProps): import("react").JSX.Element;
|
|
3
3
|
export { NotificationWrapper };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { OverlayConfig, OverlayProps } from './Overlay.interface';
|
|
2
2
|
declare const overlayConfig: OverlayConfig;
|
|
3
|
-
declare function Overlay(props: OverlayProps): import("react
|
|
3
|
+
declare function Overlay(props: OverlayProps): import("react").JSX.Element;
|
|
4
4
|
export { Overlay, overlayConfig };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { PaginationConfig, PaginationProps } from './Pagination.interface';
|
|
2
2
|
declare const paginationConfig: PaginationConfig;
|
|
3
|
-
declare function Pagination(props: PaginationProps): import("react
|
|
3
|
+
declare function Pagination(props: PaginationProps): import("react").JSX.Element;
|
|
4
4
|
export { Pagination, paginationConfig };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { RadioConfig, RadioProps } from './Radio.interface';
|
|
2
2
|
declare const radioConfig: RadioConfig;
|
|
3
|
-
declare function Radio(props: RadioProps): import("react
|
|
3
|
+
declare function Radio(props: RadioProps): import("react").JSX.Element;
|
|
4
4
|
export { Radio, radioConfig };
|
|
@@ -38,7 +38,7 @@ const Response = urlWithAssetPrefix(forwardRef(function Response(props, ref) {
|
|
|
38
38
|
}, [imageSrc, svgSrc, SvgImage, width, height]);
|
|
39
39
|
const { styles: responseStyles, wrapper: wrapperStyles } = useStyles(props);
|
|
40
40
|
return (_jsxs("div", { className: clsx(className, 'response', isBottomButton && `response_bottom-button`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
|
|
41
|
-
`border-color_hover_${borderColorHoverClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, heightClass && `height_${heightClass}`, shapeClass && `shape_${shapeClass}`, widthClass && `width_${widthClass}`, isSkeleton && `skeleton`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: responseStyles, children: [before, _jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [ImageComponent && (_jsx("div", { className: clsx('response__image', svgFillClass && `svg_fill_${svgFillClass}`, svgPathFillClass && `svg_path_fill_${svgPathFillClass}`), "data-testid": dataTestId && `${dataTestId}Image`, children: ImageComponent })), _jsxs("div", { className: "response__wrapper-inner", children: [title && (_jsx(Text, { className: "response__title", dataTestId: dataTestId && `${dataTestId}Title`, size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title })), desc && (_jsx(Text, { className: "response__desc", dataTestId: dataTestId && `${dataTestId}Desc`, size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] })] }), (primaryButtonLabel ||
|
|
41
|
+
`border-color_hover_${borderColorHoverClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, heightClass && `height_${heightClass}`, shapeClass && `shape_${shapeClass}`, widthClass && `width_${widthClass}`, isSkeleton && `skeleton`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: responseStyles, children: [before, _jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [ImageComponent && (_jsx("div", { className: clsx('response__image', svgFillClass && `svg_fill_${svgFillClass}`, svgPathFillClass && `svg_path_fill_${svgPathFillClass}`), "data-testid": dataTestId && `${dataTestId}Image`, children: ImageComponent })), _jsxs("div", { className: "response__wrapper-inner", children: [title !== undefined && (_jsx(Text, { className: "response__title", dataTestId: dataTestId && `${dataTestId}Title`, size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title })), desc && (_jsx(Text, { className: "response__desc", dataTestId: dataTestId && `${dataTestId}Desc`, size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] })] }), (primaryButtonLabel ||
|
|
42
42
|
primaryButton ||
|
|
43
43
|
secondaryButtonLabel ||
|
|
44
44
|
secondaryButton ||
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { ScrollOnDragProps } from './ScrollOnDrag.interface';
|
|
2
|
-
declare function ScrollOnDrag(props: ScrollOnDragProps):
|
|
3
|
+
declare function ScrollOnDrag(props: ScrollOnDragProps): React.JSX.Element;
|
|
3
4
|
export { ScrollOnDrag };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { SegmentedConfig, SegmentedProps } from './Segmented.interface';
|
|
2
2
|
declare const segmentedConfig: SegmentedConfig;
|
|
3
|
-
declare const Segmented: (props: SegmentedProps) => import("react
|
|
3
|
+
declare const Segmented: (props: SegmentedProps) => import("react").JSX.Element;
|
|
4
4
|
export { Segmented, segmentedConfig };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
1
2
|
import { AppearanceConfig, AppearanceKeysDefaultState, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceStateDefault, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, ShapeProps, SizeProps, WidthProps } from '@itcase/types-ui';
|
|
2
3
|
import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui';
|
|
3
4
|
import { StyleAttributes } from '@itcase/ui-core/hooks';
|
|
@@ -30,7 +31,9 @@ type SegmentedAppearanceProps = {
|
|
|
30
31
|
};
|
|
31
32
|
type SegmentedProps = SegmentedAppearanceProps & StyleAttributes & {
|
|
32
33
|
activeSegment: Segment;
|
|
34
|
+
after?: ReactNode;
|
|
33
35
|
appearance?: CompositeAppearanceStateDefault;
|
|
36
|
+
before?: ReactNode;
|
|
34
37
|
className?: string;
|
|
35
38
|
dataTestId?: string;
|
|
36
39
|
dataTour?: string;
|