@itcase/ui 1.8.136 → 1.8.137
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_BxoEdSG6.js → Button_cjs_BXEwg-En.js} +3 -3
- package/dist/{Button_es_B-SYHL6T.js → Button_es_DEn6z83v.js} +3 -3
- package/dist/{DatePicker_cjs_BLOiIsfD.js → DatePicker_cjs_Dxbyx8GV.js} +1 -1
- package/dist/{DatePicker_es_VslTy9Qw.js → DatePicker_es_mX0NSjO5.js} +1 -1
- package/dist/cjs/components/Button.js +1 -1
- package/dist/cjs/components/Choice.js +23 -9
- package/dist/cjs/components/CookiesWarning.js +1 -1
- package/dist/cjs/components/DatePeriod.js +2 -2
- package/dist/cjs/components/DatePicker.js +2 -2
- package/dist/cjs/components/Response.js +1 -1
- package/dist/components/Button.js +1 -1
- package/dist/components/Choice.js +23 -9
- package/dist/components/CookiesWarning.js +1 -1
- package/dist/components/DatePeriod.js +2 -2
- package/dist/components/DatePicker.js +2 -2
- package/dist/components/Response.js +1 -1
- package/dist/types/components/Choice/appearance/choiceDefault.d.ts +19 -1
- package/dist/types/components/Choice/appearance/choiceStyle.d.ts +0 -4
- package/package.json +1 -1
|
@@ -461,10 +461,10 @@ const buttonConfig = {
|
|
|
461
461
|
},
|
|
462
462
|
};
|
|
463
463
|
const Button = React.forwardRef(function Button(props, ref) {
|
|
464
|
-
const {
|
|
464
|
+
const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, before, after, isDisabled, isLoading = false, onClick, onMouseDown, children, } = props;
|
|
465
465
|
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, buttonConfig, isDisabled);
|
|
466
466
|
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
467
|
-
const { fillClass, fillHoverClass,
|
|
467
|
+
const { fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextTruncate, labelTextWeight, labelTextWidth, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, icon, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'simple', shapeClass, shapeStrengthClass, sizeClass, widthClass, isSkeleton, } = propsGenerator;
|
|
468
468
|
const { label: labelStyles, styles: buttonStyles } = useStyles.useStyles(props);
|
|
469
469
|
const buttonTypeClass = after ||
|
|
470
470
|
before ||
|
|
@@ -480,7 +480,7 @@ const Button = React.forwardRef(function Button(props, ref) {
|
|
|
480
480
|
? 'buttom_type_label'
|
|
481
481
|
: buttonTypeClass
|
|
482
482
|
? 'button_type_icon'
|
|
483
|
-
: '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType,
|
|
483
|
+
: '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, "data-test-id": dataTestId && `${dataTestId}Button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsxRuntime.jsx(Text.Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
|
|
484
484
|
});
|
|
485
485
|
|
|
486
486
|
exports.Button = Button;
|
|
@@ -459,10 +459,10 @@ const buttonConfig = {
|
|
|
459
459
|
},
|
|
460
460
|
};
|
|
461
461
|
const Button = React.forwardRef(function Button(props, ref) {
|
|
462
|
-
const {
|
|
462
|
+
const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, before, after, isDisabled, isLoading = false, onClick, onMouseDown, children, } = props;
|
|
463
463
|
const appearanceConfig = useAppearanceConfig(appearance, buttonConfig, isDisabled);
|
|
464
464
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
465
|
-
const { fillClass, fillHoverClass,
|
|
465
|
+
const { fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextTruncate, labelTextWeight, labelTextWidth, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, icon, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'simple', shapeClass, shapeStrengthClass, sizeClass, widthClass, isSkeleton, } = propsGenerator;
|
|
466
466
|
const { label: labelStyles, styles: buttonStyles } = useStyles(props);
|
|
467
467
|
const buttonTypeClass = after ||
|
|
468
468
|
before ||
|
|
@@ -478,7 +478,7 @@ const Button = React.forwardRef(function Button(props, ref) {
|
|
|
478
478
|
? 'buttom_type_label'
|
|
479
479
|
: buttonTypeClass
|
|
480
480
|
? 'button_type_icon'
|
|
481
|
-
: '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType,
|
|
481
|
+
: '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, "data-test-id": dataTestId && `${dataTestId}Button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsx(Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
|
|
482
482
|
});
|
|
483
483
|
|
|
484
484
|
export { Button as B, buttonAppearance as a, buttonConfig as b };
|
|
@@ -8,7 +8,7 @@ var DatePicker = require('react-datepicker');
|
|
|
8
8
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
11
|
-
var Button = require('./
|
|
11
|
+
var Button = require('./Button_cjs_BXEwg-En.js');
|
|
12
12
|
var Icon = require('./Icon_cjs_DKzT-zmQ.js');
|
|
13
13
|
var Input = require('./Input_cjs_DDi5JVAV.js');
|
|
14
14
|
var Label = require('./Label_cjs_D2YMjCoS.js');
|
|
@@ -6,7 +6,7 @@ import DatePicker from 'react-datepicker';
|
|
|
6
6
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
7
7
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
8
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
9
|
-
import { B as Button } from './
|
|
9
|
+
import { B as Button } from './Button_es_DEn6z83v.js';
|
|
10
10
|
import { I as Icon } from './Icon_es_5JUPM7bP.js';
|
|
11
11
|
import { I as Input } from './Input_es_BnCXATnh.js';
|
|
12
12
|
import { L as Label } from './Label_es_B5uGQwNN.js';
|
|
@@ -28,14 +28,32 @@ require('../context/UrlAssetPrefix.js');
|
|
|
28
28
|
require('../../Link_cjs_qKXVfU8e.js');
|
|
29
29
|
|
|
30
30
|
const choiceAppearanceDefault = {
|
|
31
|
+
defaultMutedPrimary: {
|
|
32
|
+
fill: 'surfaceSecondary',
|
|
33
|
+
fillItem: 'surfaceSecondary',
|
|
34
|
+
fillItemActive: 'accentTertiary',
|
|
35
|
+
fillItemActiveHover: 'accentPrimary',
|
|
36
|
+
fillItemHover: 'surfaceTertiary',
|
|
37
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
38
|
+
labelTextColorActive: 'surfaceTextPrimary',
|
|
39
|
+
labelTextColorActiveHover: 'accentTextPrimary',
|
|
40
|
+
borderColor: 'surfaceBorderSecondary',
|
|
41
|
+
iconAfterFill: 'surfaceItemQuaternary',
|
|
42
|
+
iconAfterFillActive: 'surfaceItemSecondary',
|
|
43
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
44
|
+
iconBeforeFillActive: 'surfaceItemSecondary',
|
|
45
|
+
iconFill: 'surfaceItemQuaternary',
|
|
46
|
+
iconFillActive: 'surfaceItemSecondary',
|
|
47
|
+
},
|
|
31
48
|
defaultPrimary: {
|
|
32
49
|
fill: 'surfaceSecondary',
|
|
33
50
|
fillItem: 'surfaceSecondary',
|
|
34
51
|
fillItemActive: 'accentPrimary',
|
|
35
52
|
fillItemActiveHover: 'accentHoverPrimary',
|
|
36
53
|
fillItemHover: 'surfaceTertiary',
|
|
37
|
-
labelTextActiveColor: 'accentTextPrimary',
|
|
38
54
|
labelTextColor: 'surfaceTextPrimary',
|
|
55
|
+
labelTextColorActive: 'accentTextPrimary',
|
|
56
|
+
labelTextColorActiveHover: 'accentTextPrimary',
|
|
39
57
|
borderColor: 'surfaceBorderQuaternary',
|
|
40
58
|
iconAfterFill: 'surfaceItemQuaternary',
|
|
41
59
|
iconAfterFillActive: 'surfaceItemSecondary',
|
|
@@ -150,14 +168,10 @@ const choiceAppearanceStyle = {
|
|
|
150
168
|
},
|
|
151
169
|
outlined: {
|
|
152
170
|
fill: 'none',
|
|
153
|
-
fillItem: 'none',
|
|
154
|
-
fillItemActive: 'none',
|
|
155
171
|
},
|
|
156
172
|
full: {},
|
|
157
173
|
ghost: {
|
|
158
174
|
fill: 'none',
|
|
159
|
-
fillItem: 'none',
|
|
160
|
-
fillItemActive: 'none',
|
|
161
175
|
borderColor: 'none',
|
|
162
176
|
},
|
|
163
177
|
};
|
|
@@ -198,7 +212,7 @@ const choiceConfig = {
|
|
|
198
212
|
},
|
|
199
213
|
};
|
|
200
214
|
function Choice(props) {
|
|
201
|
-
const { id,
|
|
215
|
+
const { id, appearance, className, dataTestId, dataTour, name, active = { value: undefined }, itemAfter, itemBefore, options = [], before, after, isDisabled = false, isSkeleton, isCheckbox = false, isLoading = false, setActiveSegment, } = props;
|
|
202
216
|
const controlRef = React.useRef(null);
|
|
203
217
|
const optionsRefs = React.useMemo(() => new Map(options.map((item) => [item.value, React.createRef()])), [options]);
|
|
204
218
|
const onChange = React.useCallback((event, item) => {
|
|
@@ -207,7 +221,7 @@ function Choice(props) {
|
|
|
207
221
|
}, [isCheckbox, setActiveSegment]);
|
|
208
222
|
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, choiceConfig, isDisabled);
|
|
209
223
|
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
210
|
-
const { size, fillClass, fillItemActiveClass, fillItemActiveDisabledClass, fillItemActiveHoverClass, fillItemClass, fillItemDisabledClass, fillItemHoverClass,
|
|
224
|
+
const { size, fillClass, fillItemActiveClass, fillItemActiveDisabledClass, fillItemActiveHoverClass, fillItemClass, fillItemDisabledClass, fillItemHoverClass, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconAfterFill, iconAfterFillActive, iconAfterFillDisabled, iconAfterSize, iconBeforeFill, iconBeforeFillActive, iconBeforeFillDisabled, iconBeforeSize, iconFill, iconFillActive, iconFillDisabled, iconSize, shapeClass, shapeStrengthClass, wrapClass, } = propsGenerator;
|
|
211
225
|
const { styles } = useStyles.useStyles(props);
|
|
212
226
|
return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'choice', size && `choice_size_${size}`, fillClass && `fill_${fillClass}`, wrapClass && `choice_wrap_${wrapClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `choice_skeleton`), ref: controlRef, "data-test-id": dataTestId && `${dataTestId}Choice`, "data-tour": dataTour, style: styles, children: [before && jsxRuntime.jsx("div", { className: "choice__before", children: before }), isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsxRuntime.jsx(React.Fragment, { children: options.map((item) => {
|
|
213
227
|
const isActive = typeof active === 'object'
|
|
@@ -230,9 +244,9 @@ function Choice(props) {
|
|
|
230
244
|
: fillItemDisabledClass &&
|
|
231
245
|
`fill_disabled_${fillItemDisabledClass}`, !isActive && isDisabled && 'choice__item_state_disabled', isActive &&
|
|
232
246
|
isDisabled &&
|
|
233
|
-
'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { id: `${name}-${item.value}`, className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name,
|
|
247
|
+
'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { id: `${name}-${item.value}`, className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, checked: isActive, disabled: isDisabled, value: item.value, onChange: (event) => onChange(event, item) }), jsxRuntime.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: `${name}-${item.value}`, children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconFillDisabled: iconBeforeFillDisabled, iconSize: iconBeforeSize, SvgImage: isActive
|
|
234
248
|
? item.iconBeforeActive || item.iconBefore
|
|
235
|
-
: item.iconBefore, isActive: isActive })), item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive:
|
|
249
|
+
: item.iconBefore, isActive: isActive, isDisabled: isDisabled })), item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: item.label })), (item.icon || item.iconActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive })), (item.iconAfter || item.iconAfterActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFill: iconAfterFill, iconFillActive: iconAfterFillActive, iconFillDisabled: iconAfterFillDisabled, iconSize: iconAfterSize, SvgImage: isActive
|
|
236
250
|
? item.iconAfterActive || item.iconAfter
|
|
237
251
|
: item.iconAfter, isActive: isActive })), itemAfter] })] }, `${name}-${item.value}`));
|
|
238
252
|
}) })), after && jsxRuntime.jsx("div", { className: "choice__after", children: after })] }));
|
|
@@ -6,7 +6,7 @@ var clsx = require('clsx');
|
|
|
6
6
|
var Cookies = require('js-cookie');
|
|
7
7
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
8
8
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
9
|
-
var Button = require('../../
|
|
9
|
+
var Button = require('../../Button_cjs_BXEwg-En.js');
|
|
10
10
|
var Text = require('../../Text_cjs_DaH5tVvz.js');
|
|
11
11
|
require('lodash/camelCase');
|
|
12
12
|
require('lodash/castArray');
|
|
@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var common = require('@itcase/common');
|
|
7
|
-
var DatePicker = require('../../
|
|
7
|
+
var DatePicker = require('../../DatePicker_cjs_Dxbyx8GV.js');
|
|
8
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
var ChipsGroup = require('../../ChipsGroup_cjs_Du8WHI-Y.js');
|
|
@@ -22,7 +22,7 @@ require('react-responsive');
|
|
|
22
22
|
require('../utils/setViewportProperty.js');
|
|
23
23
|
require('../hooks.js');
|
|
24
24
|
require('../hooks/useStyles/styleAttributes.js');
|
|
25
|
-
require('../../
|
|
25
|
+
require('../../Button_cjs_BXEwg-En.js');
|
|
26
26
|
require('../../Icon_cjs_DKzT-zmQ.js');
|
|
27
27
|
require('react-inlinesvg');
|
|
28
28
|
require('../hoc/urlWithAssetPrefix.js');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var DatePicker = require('../../
|
|
3
|
+
var DatePicker = require('../../DatePicker_cjs_Dxbyx8GV.js');
|
|
4
4
|
require('react/jsx-runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('clsx');
|
|
@@ -22,7 +22,7 @@ require('../hooks.js');
|
|
|
22
22
|
require('../hooks/useStyles/styleAttributes.js');
|
|
23
23
|
require('../hooks/useStyles/useStyles.js');
|
|
24
24
|
require('lodash/maxBy');
|
|
25
|
-
require('../../
|
|
25
|
+
require('../../Button_cjs_BXEwg-En.js');
|
|
26
26
|
require('../../Icon_cjs_DKzT-zmQ.js');
|
|
27
27
|
require('react-inlinesvg');
|
|
28
28
|
require('../hoc/urlWithAssetPrefix.js');
|
|
@@ -8,7 +8,7 @@ var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
|
|
|
8
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
11
|
-
var Button = require('../../
|
|
11
|
+
var Button = require('../../Button_cjs_BXEwg-En.js');
|
|
12
12
|
var Group = require('../../Group_cjs_DxyobxPf.js');
|
|
13
13
|
var Text = require('../../Text_cjs_DaH5tVvz.js');
|
|
14
14
|
require('@itcase/common');
|
|
@@ -26,14 +26,32 @@ import '../context/UrlAssetPrefix.js';
|
|
|
26
26
|
import '../Link_es_P2b6ya7P.js';
|
|
27
27
|
|
|
28
28
|
const choiceAppearanceDefault = {
|
|
29
|
+
defaultMutedPrimary: {
|
|
30
|
+
fill: 'surfaceSecondary',
|
|
31
|
+
fillItem: 'surfaceSecondary',
|
|
32
|
+
fillItemActive: 'accentTertiary',
|
|
33
|
+
fillItemActiveHover: 'accentPrimary',
|
|
34
|
+
fillItemHover: 'surfaceTertiary',
|
|
35
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
36
|
+
labelTextColorActive: 'surfaceTextPrimary',
|
|
37
|
+
labelTextColorActiveHover: 'accentTextPrimary',
|
|
38
|
+
borderColor: 'surfaceBorderSecondary',
|
|
39
|
+
iconAfterFill: 'surfaceItemQuaternary',
|
|
40
|
+
iconAfterFillActive: 'surfaceItemSecondary',
|
|
41
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
42
|
+
iconBeforeFillActive: 'surfaceItemSecondary',
|
|
43
|
+
iconFill: 'surfaceItemQuaternary',
|
|
44
|
+
iconFillActive: 'surfaceItemSecondary',
|
|
45
|
+
},
|
|
29
46
|
defaultPrimary: {
|
|
30
47
|
fill: 'surfaceSecondary',
|
|
31
48
|
fillItem: 'surfaceSecondary',
|
|
32
49
|
fillItemActive: 'accentPrimary',
|
|
33
50
|
fillItemActiveHover: 'accentHoverPrimary',
|
|
34
51
|
fillItemHover: 'surfaceTertiary',
|
|
35
|
-
labelTextActiveColor: 'accentTextPrimary',
|
|
36
52
|
labelTextColor: 'surfaceTextPrimary',
|
|
53
|
+
labelTextColorActive: 'accentTextPrimary',
|
|
54
|
+
labelTextColorActiveHover: 'accentTextPrimary',
|
|
37
55
|
borderColor: 'surfaceBorderQuaternary',
|
|
38
56
|
iconAfterFill: 'surfaceItemQuaternary',
|
|
39
57
|
iconAfterFillActive: 'surfaceItemSecondary',
|
|
@@ -148,14 +166,10 @@ const choiceAppearanceStyle = {
|
|
|
148
166
|
},
|
|
149
167
|
outlined: {
|
|
150
168
|
fill: 'none',
|
|
151
|
-
fillItem: 'none',
|
|
152
|
-
fillItemActive: 'none',
|
|
153
169
|
},
|
|
154
170
|
full: {},
|
|
155
171
|
ghost: {
|
|
156
172
|
fill: 'none',
|
|
157
|
-
fillItem: 'none',
|
|
158
|
-
fillItemActive: 'none',
|
|
159
173
|
borderColor: 'none',
|
|
160
174
|
},
|
|
161
175
|
};
|
|
@@ -196,7 +210,7 @@ const choiceConfig = {
|
|
|
196
210
|
},
|
|
197
211
|
};
|
|
198
212
|
function Choice(props) {
|
|
199
|
-
const { id,
|
|
213
|
+
const { id, appearance, className, dataTestId, dataTour, name, active = { value: undefined }, itemAfter, itemBefore, options = [], before, after, isDisabled = false, isSkeleton, isCheckbox = false, isLoading = false, setActiveSegment, } = props;
|
|
200
214
|
const controlRef = useRef(null);
|
|
201
215
|
const optionsRefs = useMemo(() => new Map(options.map((item) => [item.value, createRef()])), [options]);
|
|
202
216
|
const onChange = useCallback((event, item) => {
|
|
@@ -205,7 +219,7 @@ function Choice(props) {
|
|
|
205
219
|
}, [isCheckbox, setActiveSegment]);
|
|
206
220
|
const appearanceConfig = useAppearanceConfig(appearance, choiceConfig, isDisabled);
|
|
207
221
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
208
|
-
const { size, fillClass, fillItemActiveClass, fillItemActiveDisabledClass, fillItemActiveHoverClass, fillItemClass, fillItemDisabledClass, fillItemHoverClass,
|
|
222
|
+
const { size, fillClass, fillItemActiveClass, fillItemActiveDisabledClass, fillItemActiveHoverClass, fillItemClass, fillItemDisabledClass, fillItemHoverClass, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconAfterFill, iconAfterFillActive, iconAfterFillDisabled, iconAfterSize, iconBeforeFill, iconBeforeFillActive, iconBeforeFillDisabled, iconBeforeSize, iconFill, iconFillActive, iconFillDisabled, iconSize, shapeClass, shapeStrengthClass, wrapClass, } = propsGenerator;
|
|
209
223
|
const { styles } = useStyles(props);
|
|
210
224
|
return (jsxs("div", { id: id, className: clsx(className, 'choice', size && `choice_size_${size}`, fillClass && `fill_${fillClass}`, wrapClass && `choice_wrap_${wrapClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `choice_skeleton`), ref: controlRef, "data-test-id": dataTestId && `${dataTestId}Choice`, "data-tour": dataTour, style: styles, children: [before && jsx("div", { className: "choice__before", children: before }), isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsx(React.Fragment, { children: options.map((item) => {
|
|
211
225
|
const isActive = typeof active === 'object'
|
|
@@ -228,9 +242,9 @@ function Choice(props) {
|
|
|
228
242
|
: fillItemDisabledClass &&
|
|
229
243
|
`fill_disabled_${fillItemDisabledClass}`, !isActive && isDisabled && 'choice__item_state_disabled', isActive &&
|
|
230
244
|
isDisabled &&
|
|
231
|
-
'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsx("input", { id: `${name}-${item.value}`, className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name,
|
|
245
|
+
'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsx("input", { id: `${name}-${item.value}`, className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, checked: isActive, disabled: isDisabled, value: item.value, onChange: (event) => onChange(event, item) }), jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: `${name}-${item.value}`, children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (jsx(Icon, { className: "choice__item-icon", iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconFillDisabled: iconBeforeFillDisabled, iconSize: iconBeforeSize, SvgImage: isActive
|
|
232
246
|
? item.iconBeforeActive || item.iconBefore
|
|
233
|
-
: item.iconBefore, isActive: isActive })), item.label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive:
|
|
247
|
+
: item.iconBefore, isActive: isActive, isDisabled: isDisabled })), item.label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: item.label })), (item.icon || item.iconActive) && (jsx(Icon, { className: "choice__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive })), (item.iconAfter || item.iconAfterActive) && (jsx(Icon, { className: "choice__item-icon", iconFill: iconAfterFill, iconFillActive: iconAfterFillActive, iconFillDisabled: iconAfterFillDisabled, iconSize: iconAfterSize, SvgImage: isActive
|
|
234
248
|
? item.iconAfterActive || item.iconAfter
|
|
235
249
|
: item.iconAfter, isActive: isActive })), itemAfter] })] }, `${name}-${item.value}`));
|
|
236
250
|
}) })), after && jsx("div", { className: "choice__after", children: after })] }));
|
|
@@ -4,7 +4,7 @@ import clsx from 'clsx';
|
|
|
4
4
|
import Cookies from 'js-cookie';
|
|
5
5
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
6
6
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
7
|
-
import { B as Button } from '../
|
|
7
|
+
import { B as Button } from '../Button_es_DEn6z83v.js';
|
|
8
8
|
import { T as Text } from '../Text_es_RDU9GLCV.js';
|
|
9
9
|
import 'lodash/camelCase';
|
|
10
10
|
import 'lodash/castArray';
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { DATE_PERIOD_INTERVALS } from '@itcase/common';
|
|
5
|
-
import { D as DatePickerInput } from '../
|
|
5
|
+
import { D as DatePickerInput } from '../DatePicker_es_mX0NSjO5.js';
|
|
6
6
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
7
7
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
8
|
import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_CzVlqaHv.js';
|
|
@@ -20,7 +20,7 @@ import 'react-responsive';
|
|
|
20
20
|
import '../utils/setViewportProperty.js';
|
|
21
21
|
import '../hooks.js';
|
|
22
22
|
import '../hooks/useStyles/styleAttributes.js';
|
|
23
|
-
import '../
|
|
23
|
+
import '../Button_es_DEn6z83v.js';
|
|
24
24
|
import '../Icon_es_5JUPM7bP.js';
|
|
25
25
|
import 'react-inlinesvg';
|
|
26
26
|
import '../hoc/urlWithAssetPrefix.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../
|
|
1
|
+
export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_mX0NSjO5.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'clsx';
|
|
@@ -20,7 +20,7 @@ import '../hooks.js';
|
|
|
20
20
|
import '../hooks/useStyles/styleAttributes.js';
|
|
21
21
|
import '../hooks/useStyles/useStyles.js';
|
|
22
22
|
import 'lodash/maxBy';
|
|
23
|
-
import '../
|
|
23
|
+
import '../Button_es_DEn6z83v.js';
|
|
24
24
|
import '../Icon_es_5JUPM7bP.js';
|
|
25
25
|
import 'react-inlinesvg';
|
|
26
26
|
import '../hoc/urlWithAssetPrefix.js';
|
|
@@ -6,7 +6,7 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
|
|
|
6
6
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
7
7
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
8
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
9
|
-
import { B as Button } from '../
|
|
9
|
+
import { B as Button } from '../Button_es_DEn6z83v.js';
|
|
10
10
|
import { G as Group } from '../Group_es_DJ6GHMrs.js';
|
|
11
11
|
import { T as Text } from '../Text_es_RDU9GLCV.js';
|
|
12
12
|
import '@itcase/common';
|
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
declare const choiceAppearanceDefault: {
|
|
2
|
+
defaultMutedPrimary: {
|
|
3
|
+
fill: string;
|
|
4
|
+
fillItem: string;
|
|
5
|
+
fillItemActive: string;
|
|
6
|
+
fillItemActiveHover: string;
|
|
7
|
+
fillItemHover: string;
|
|
8
|
+
labelTextColor: string;
|
|
9
|
+
labelTextColorActive: string;
|
|
10
|
+
labelTextColorActiveHover: string;
|
|
11
|
+
borderColor: string;
|
|
12
|
+
iconAfterFill: string;
|
|
13
|
+
iconAfterFillActive: string;
|
|
14
|
+
iconBeforeFill: string;
|
|
15
|
+
iconBeforeFillActive: string;
|
|
16
|
+
iconFill: string;
|
|
17
|
+
iconFillActive: string;
|
|
18
|
+
};
|
|
2
19
|
defaultPrimary: {
|
|
3
20
|
fill: string;
|
|
4
21
|
fillItem: string;
|
|
5
22
|
fillItemActive: string;
|
|
6
23
|
fillItemActiveHover: string;
|
|
7
24
|
fillItemHover: string;
|
|
8
|
-
labelTextActiveColor: string;
|
|
9
25
|
labelTextColor: string;
|
|
26
|
+
labelTextColorActive: string;
|
|
27
|
+
labelTextColorActiveHover: string;
|
|
10
28
|
borderColor: string;
|
|
11
29
|
iconAfterFill: string;
|
|
12
30
|
iconAfterFillActive: string;
|
|
@@ -4,14 +4,10 @@ declare const choiceAppearanceStyle: {
|
|
|
4
4
|
};
|
|
5
5
|
outlined: {
|
|
6
6
|
fill: string;
|
|
7
|
-
fillItem: string;
|
|
8
|
-
fillItemActive: string;
|
|
9
7
|
};
|
|
10
8
|
full: {};
|
|
11
9
|
ghost: {
|
|
12
10
|
fill: string;
|
|
13
|
-
fillItem: string;
|
|
14
|
-
fillItemActive: string;
|
|
15
11
|
borderColor: string;
|
|
16
12
|
};
|
|
17
13
|
};
|