@itcase/ui 1.8.127 → 1.8.129
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/{Avatar_cjs_CLpFeKt-.js → Avatar_cjs_D-M9sW20.js} +1 -1
- package/dist/{Avatar_es_BQf7U0hA.js → Avatar_es_BTvbT36l.js} +1 -1
- package/dist/{Button_cjs_D4f7urKp.js → Button_cjs_BxoEdSG6.js} +1 -1
- package/dist/{Button_es_C7L4CT4f.js → Button_es_B-SYHL6T.js} +1 -1
- package/dist/{ChipsGroup_cjs_BCdLcqbz.js → ChipsGroup_cjs_BMkiDYau.js} +1 -1
- package/dist/{ChipsGroup_es_DMfjXntS.js → ChipsGroup_es_Czu95rkL.js} +1 -1
- package/dist/{DatePicker_cjs_xV-NFl1J.js → DatePicker_cjs_BLOiIsfD.js} +5 -5
- package/dist/{DatePicker_es_Da_ZC57A.js → DatePicker_es_VslTy9Qw.js} +5 -5
- package/dist/{DropdownItem_cjs_DUPMlJr_.js → DropdownItem_cjs_FsiEMPDs.js} +1 -1
- package/dist/{DropdownItem_es_DbC3VzEL.js → DropdownItem_es_BBKtNngp.js} +1 -1
- package/dist/{Icon_cjs_DN4Kc8La.js → Icon_cjs_DKzT-zmQ.js} +11 -4
- package/dist/{Icon_es_B7IBHqyf.js → Icon_es_5JUPM7bP.js} +11 -4
- package/dist/{Label_cjs_D5_n3Yvg.js → Label_cjs_D2YMjCoS.js} +1 -1
- package/dist/{Label_es_Dror143Q.js → Label_es_B5uGQwNN.js} +1 -1
- package/dist/cjs/components/Accordion.js +1 -1
- package/dist/cjs/components/Avatar.js +2 -2
- package/dist/cjs/components/AvatarStack.js +2 -2
- package/dist/cjs/components/Badge.js +1 -1
- package/dist/cjs/components/Breadcrumbs.js +1 -1
- package/dist/cjs/components/Button.js +2 -2
- package/dist/cjs/components/Cell.js +2 -2
- package/dist/cjs/components/Chips.js +2 -2
- package/dist/cjs/components/Choice.js +1 -1
- package/dist/cjs/components/CookiesWarning.js +2 -2
- package/dist/cjs/components/DatePeriod.js +38 -14
- package/dist/cjs/components/DatePicker.js +4 -4
- package/dist/cjs/components/Drawer.js +1 -1
- package/dist/cjs/components/Dropdown.js +2 -2
- package/dist/cjs/components/HeroTitle.js +1 -1
- package/dist/cjs/components/Icon.js +1 -1
- package/dist/cjs/components/InputPassword.js +1 -1
- package/dist/cjs/components/Label.js +2 -2
- package/dist/cjs/components/MenuItem.js +11 -6
- package/dist/cjs/components/Modal.js +1 -1
- package/dist/cjs/components/ModalSheetBottom.js +3 -3
- package/dist/cjs/components/Notification.js +1 -1
- package/dist/cjs/components/Pagination.js +2 -2
- package/dist/cjs/components/Response.js +2 -2
- package/dist/cjs/components/Search.js +1 -1
- package/dist/cjs/components/Segmented.js +1 -1
- package/dist/cjs/components/Select.js +1 -1
- package/dist/cjs/components/Swiper.js +1 -1
- package/dist/cjs/components/Tab.js +1 -1
- package/dist/cjs/components/Tile.js +1 -1
- package/dist/cjs/components/Title.js +1 -1
- package/dist/cjs/components/Tooltip.js +1 -1
- package/dist/cjs/components/Warning.js +1 -1
- package/dist/components/Accordion.js +1 -1
- package/dist/components/Avatar.js +2 -2
- package/dist/components/AvatarStack.js +2 -2
- package/dist/components/Badge.js +1 -1
- package/dist/components/Breadcrumbs.js +1 -1
- package/dist/components/Button.js +2 -2
- package/dist/components/Cell.js +2 -2
- package/dist/components/Chips.js +2 -2
- package/dist/components/Choice.js +1 -1
- package/dist/components/CookiesWarning.js +2 -2
- package/dist/components/DatePeriod.js +38 -14
- package/dist/components/DatePicker.js +4 -4
- package/dist/components/Drawer.js +1 -1
- package/dist/components/Dropdown.js +2 -2
- package/dist/components/HeroTitle.js +1 -1
- package/dist/components/Icon.js +1 -1
- package/dist/components/InputPassword.js +1 -1
- package/dist/components/Label.js +2 -2
- package/dist/components/MenuItem.js +11 -6
- package/dist/components/Modal.js +1 -1
- package/dist/components/ModalSheetBottom.js +3 -3
- package/dist/components/Notification.js +1 -1
- package/dist/components/Pagination.js +2 -2
- package/dist/components/Response.js +2 -2
- package/dist/components/Search.js +1 -1
- package/dist/components/Segmented.js +1 -1
- package/dist/components/Select.js +1 -1
- package/dist/components/Swiper.js +1 -1
- package/dist/components/Tab.js +1 -1
- package/dist/components/Tile.js +1 -1
- package/dist/components/Title.js +1 -1
- package/dist/components/Tooltip.js +1 -1
- package/dist/components/Warning.js +1 -1
- package/dist/css/components/Chips/Chips.css +0 -3
- package/dist/css/components/DatePeriod/DatePeriod.css +5 -24
- package/dist/css/components/DatePicker/DatePicker.css +3 -1
- package/dist/css/components/MenuItem/MenuItem.css +18 -14
- package/dist/css/components/Swiper/Swiper.css +463 -473
- package/dist/css/components/Tooltip/Tooltip.css +1 -1
- package/dist/types/components/DatePeriod/DatePeriod.appearance.d.ts +52 -2
- package/dist/types/components/DatePeriod/appearance/datePeriodShape.d.ts +25 -0
- package/dist/types/components/DatePeriod/appearance/datePeriodSize.d.ts +2 -4
- package/dist/types/components/DatePicker/DatePicker.d.ts +1 -1
- package/package.json +8 -8
|
@@ -5,7 +5,7 @@ var React = require('react');
|
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
7
7
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
|
-
var Icon = require('./
|
|
8
|
+
var Icon = require('./Icon_cjs_DKzT-zmQ.js');
|
|
9
9
|
var Image = require('./Image_cjs_BUM81t4Y.js');
|
|
10
10
|
var Text = require('./Text_cjs_DaH5tVvz.js');
|
|
11
11
|
|
|
@@ -3,7 +3,7 @@ import { useMemo } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
5
5
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
|
-
import { I as Icon, B as Badge } from './
|
|
6
|
+
import { I as Icon, B as Badge } from './Icon_es_5JUPM7bP.js';
|
|
7
7
|
import { I as Image } from './Image_es_C-IjVkKX.js';
|
|
8
8
|
import { T as Text } from './Text_es_RDU9GLCV.js';
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
|
-
var Icon = require('./
|
|
6
|
+
var Icon = require('./Icon_cjs_DKzT-zmQ.js');
|
|
7
7
|
var Link = require('./Link_cjs_qKXVfU8e.js');
|
|
8
8
|
var Loader = require('./Loader_cjs_CRiUlTC3.js');
|
|
9
9
|
var Text = require('./Text_cjs_DaH5tVvz.js');
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
-
import { I as Icon } from './
|
|
4
|
+
import { I as Icon } from './Icon_es_5JUPM7bP.js';
|
|
5
5
|
import { a as LinkWrapper } from './Link_es_P2b6ya7P.js';
|
|
6
6
|
import { L as Loader } from './Loader_es_Dq2-7sn2.js';
|
|
7
7
|
import { T as Text } from './Text_es_RDU9GLCV.js';
|
|
@@ -5,7 +5,7 @@ var clsx = require('clsx');
|
|
|
5
5
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
6
6
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
8
|
-
var Icon = require('./
|
|
8
|
+
var Icon = require('./Icon_cjs_DKzT-zmQ.js');
|
|
9
9
|
var Text = require('./Text_cjs_DaH5tVvz.js');
|
|
10
10
|
|
|
11
11
|
const chipsAppearanceAccent = {
|
|
@@ -3,7 +3,7 @@ import clsx from 'clsx';
|
|
|
3
3
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
4
4
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
5
5
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
6
|
-
import { I as Icon, B as Badge } from './
|
|
6
|
+
import { I as Icon, B as Badge } from './Icon_es_5JUPM7bP.js';
|
|
7
7
|
import { T as Text } from './Text_es_RDU9GLCV.js';
|
|
8
8
|
|
|
9
9
|
const chipsAppearanceAccent = {
|
|
@@ -8,10 +8,10 @@ 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('./
|
|
12
|
-
var Icon = require('./
|
|
11
|
+
var Button = require('./Button_cjs_BxoEdSG6.js');
|
|
12
|
+
var Icon = require('./Icon_cjs_DKzT-zmQ.js');
|
|
13
13
|
var Input = require('./Input_cjs_DDi5JVAV.js');
|
|
14
|
-
var Label = require('./
|
|
14
|
+
var Label = require('./Label_cjs_D2YMjCoS.js');
|
|
15
15
|
var Text = require('./Text_cjs_DaH5tVvz.js');
|
|
16
16
|
var _default = require('@itcase/icons/default');
|
|
17
17
|
|
|
@@ -149,7 +149,7 @@ function DatePickerInput(props) {
|
|
|
149
149
|
yearTextWeight,
|
|
150
150
|
]);
|
|
151
151
|
const { styles: datePickerStyles } = useStyles.useStyles(props);
|
|
152
|
-
return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement,
|
|
152
|
+
return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: selectsRange ? handleChange : onChange, ...datePickerProps,
|
|
153
153
|
// Important for use custom clear button
|
|
154
154
|
isClearable: false }) }));
|
|
155
155
|
}
|
|
@@ -162,7 +162,7 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
|
|
|
162
162
|
}
|
|
163
163
|
return '';
|
|
164
164
|
}, [value]);
|
|
165
|
-
return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), autocomplete: "off",
|
|
165
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsxRuntime.jsx(DatePickerClearButton, { ...inputProps })] }));
|
|
166
166
|
});
|
|
167
167
|
function DatePickerClearButton(props) {
|
|
168
168
|
const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;
|
|
@@ -6,10 +6,10 @@ 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 './
|
|
10
|
-
import { I as Icon } from './
|
|
9
|
+
import { B as Button } from './Button_es_B-SYHL6T.js';
|
|
10
|
+
import { I as Icon } from './Icon_es_5JUPM7bP.js';
|
|
11
11
|
import { I as Input } from './Input_es_BnCXATnh.js';
|
|
12
|
-
import { L as Label } from './
|
|
12
|
+
import { L as Label } from './Label_es_B5uGQwNN.js';
|
|
13
13
|
import { T as Text } from './Text_es_RDU9GLCV.js';
|
|
14
14
|
import { icons14 } from '@itcase/icons/default';
|
|
15
15
|
|
|
@@ -147,7 +147,7 @@ function DatePickerInput(props) {
|
|
|
147
147
|
yearTextWeight,
|
|
148
148
|
]);
|
|
149
149
|
const { styles: datePickerStyles } = useStyles(props);
|
|
150
|
-
return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsx(DatePicker, { minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement,
|
|
150
|
+
return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: selectsRange ? handleChange : onChange, ...datePickerProps,
|
|
151
151
|
// Important for use custom clear button
|
|
152
152
|
isClearable: false }) }));
|
|
153
153
|
}
|
|
@@ -160,7 +160,7 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
|
|
|
160
160
|
}
|
|
161
161
|
return '';
|
|
162
162
|
}, [value]);
|
|
163
|
-
return (jsxs(React.Fragment, { children: [jsx(Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), autocomplete: "off",
|
|
163
|
+
return (jsxs(React.Fragment, { children: [jsx(Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), inputIcon && jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsx(DatePickerClearButton, { ...inputProps })] }));
|
|
164
164
|
});
|
|
165
165
|
function DatePickerClearButton(props) {
|
|
166
166
|
const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;
|
|
@@ -5,7 +5,7 @@ var React = require('react');
|
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
8
|
-
var Icon = require('./
|
|
8
|
+
var Icon = require('./Icon_cjs_DKzT-zmQ.js');
|
|
9
9
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
10
|
var Divider = require('./Divider_cjs_DrmV2ezS.js');
|
|
11
11
|
var Text = require('./Text_cjs_DaH5tVvz.js');
|
|
@@ -3,7 +3,7 @@ import React, { useRef, useState, useCallback, useEffect } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
5
5
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
6
|
-
import { I as Icon, B as Badge } from './
|
|
6
|
+
import { I as Icon, B as Badge } from './Icon_es_5JUPM7bP.js';
|
|
7
7
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
8
8
|
import { D as Divider } from './Divider_es_BiYozVBS.js';
|
|
9
9
|
import { T as Text } from './Text_es_RDU9GLCV.js';
|
|
@@ -667,7 +667,7 @@ const tooltipConfig = {
|
|
|
667
667
|
},
|
|
668
668
|
};
|
|
669
669
|
const Tooltip = React.forwardRef(function Tooltip(props, ref) {
|
|
670
|
-
const { appearance, className, initialIsVisible, title, text, before, after, openTimeoutDelay = 500, closeTimeoutDelay = 250, isSkeleton, children, } = props;
|
|
670
|
+
const { appearance, className, initialIsVisible, title, text, before, after, openTimeoutDelay = 500, closeTimeoutDelay = 250, isSkeleton, isTooltipDisableState, children, } = props;
|
|
671
671
|
const tooltipElementRef = React.useRef(null);
|
|
672
672
|
const tooltipTimeoutHideRef = React.useRef(null);
|
|
673
673
|
const tooltipTimeoutShowRef = React.useRef(null);
|
|
@@ -718,7 +718,11 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
|
|
|
718
718
|
const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, centeringClass, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
719
719
|
// @ts-expect-error
|
|
720
720
|
const { styles: tooltipStyles } = useStyles.useStyles(props);
|
|
721
|
-
return (jsxRuntime.jsxs("div", { className: clsx(className, 'tooltip',
|
|
721
|
+
return (jsxRuntime.jsxs("div", { className: clsx(className, 'tooltip', !isTooltipDisableState
|
|
722
|
+
? isTooltipVisible
|
|
723
|
+
? 'tooltip_state_open'
|
|
724
|
+
: 'tooltip_state_close'
|
|
725
|
+
: null, alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, centeringClass && `centering_${centeringClass}`, alignmentClass && `alignment_${alignmentClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [arrowPosition && (jsxRuntime.jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, jsxRuntime.jsxs("div", { className: clsx('tooltip__inner', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [title && (jsxRuntime.jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
|
|
722
726
|
});
|
|
723
727
|
|
|
724
728
|
const iconAppearanceAccent = {
|
|
@@ -1061,7 +1065,7 @@ const iconConfig = {
|
|
|
1061
1065
|
const Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
|
|
1062
1066
|
// TODO: Tooltip doesn't work that anymore
|
|
1063
1067
|
// const [isTooltipVisible, setIsTooltipVisible] = useState(false)
|
|
1064
|
-
const { id, appearance, className, dataTour, width, height, badgeClass, href, imageSrc, link, linkRel, linkTarget, notification, showTooltip, SvgImage, before, after, isActive, isDisabled, isSkeleton, onClick, onMouseEnter, onMouseLeave, } = props;
|
|
1068
|
+
const { id, appearance, className, dataTour, width, height, badgeClass, href, imageSrc, link, linkRel, linkTarget, notification, saveFillStroke, showTooltip, SvgImage, before, after, isActive, isDisabled, isSkeleton, onClick, onMouseEnter, onMouseLeave, } = props;
|
|
1065
1069
|
const ImageComponent = React.useMemo(() => {
|
|
1066
1070
|
if (SvgImage) {
|
|
1067
1071
|
const sizes = {};
|
|
@@ -1075,6 +1079,9 @@ const Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Ico
|
|
|
1075
1079
|
}
|
|
1076
1080
|
if (imageSrc) {
|
|
1077
1081
|
if (imageSrc.endsWith('.svg')) {
|
|
1082
|
+
if (saveFillStroke) {
|
|
1083
|
+
return jsxRuntime.jsx(SVG, { src: imageSrc });
|
|
1084
|
+
}
|
|
1078
1085
|
return jsxRuntime.jsx(SVG, { src: imageSrc, preProcessor: removeFillStroke });
|
|
1079
1086
|
}
|
|
1080
1087
|
return jsxRuntime.jsx("img", { src: imageSrc });
|
|
@@ -1099,7 +1106,7 @@ const Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Ico
|
|
|
1099
1106
|
`icon_fill_active_hover_${iconFillActiveHoverClass}`, isDisabled &&
|
|
1100
1107
|
iconFillDisabledClass &&
|
|
1101
1108
|
`icon_fill_disabled_${iconFillDisabledClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
|
|
1102
|
-
`border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `icon_skeleton`), ref: ref, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && `icon_size_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsxRuntime.jsx(Badge, { className: clsx(badgeClass, 'icon__badge'),
|
|
1109
|
+
`border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `icon_skeleton`), ref: ref, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && `icon_size_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsxRuntime.jsx(Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsxRuntime.jsx(Tooltip, { appearance: tooltipAppearance, className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
|
|
1103
1110
|
}));
|
|
1104
1111
|
const removeFillStroke = (code) => {
|
|
1105
1112
|
return code
|
|
@@ -665,7 +665,7 @@ const tooltipConfig = {
|
|
|
665
665
|
},
|
|
666
666
|
};
|
|
667
667
|
const Tooltip = React.forwardRef(function Tooltip(props, ref) {
|
|
668
|
-
const { appearance, className, initialIsVisible, title, text, before, after, openTimeoutDelay = 500, closeTimeoutDelay = 250, isSkeleton, children, } = props;
|
|
668
|
+
const { appearance, className, initialIsVisible, title, text, before, after, openTimeoutDelay = 500, closeTimeoutDelay = 250, isSkeleton, isTooltipDisableState, children, } = props;
|
|
669
669
|
const tooltipElementRef = useRef(null);
|
|
670
670
|
const tooltipTimeoutHideRef = useRef(null);
|
|
671
671
|
const tooltipTimeoutShowRef = useRef(null);
|
|
@@ -716,7 +716,11 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
|
|
|
716
716
|
const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, centeringClass, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
717
717
|
// @ts-expect-error
|
|
718
718
|
const { styles: tooltipStyles } = useStyles(props);
|
|
719
|
-
return (jsxs("div", { className: clsx(className, 'tooltip',
|
|
719
|
+
return (jsxs("div", { className: clsx(className, 'tooltip', !isTooltipDisableState
|
|
720
|
+
? isTooltipVisible
|
|
721
|
+
? 'tooltip_state_open'
|
|
722
|
+
: 'tooltip_state_close'
|
|
723
|
+
: null, alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, centeringClass && `centering_${centeringClass}`, alignmentClass && `alignment_${alignmentClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [arrowPosition && (jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, jsxs("div", { className: clsx('tooltip__inner', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [title && (jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
|
|
720
724
|
});
|
|
721
725
|
|
|
722
726
|
const iconAppearanceAccent = {
|
|
@@ -1059,7 +1063,7 @@ const iconConfig = {
|
|
|
1059
1063
|
const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
|
|
1060
1064
|
// TODO: Tooltip doesn't work that anymore
|
|
1061
1065
|
// const [isTooltipVisible, setIsTooltipVisible] = useState(false)
|
|
1062
|
-
const { id, appearance, className, dataTour, width, height, badgeClass, href, imageSrc, link, linkRel, linkTarget, notification, showTooltip, SvgImage, before, after, isActive, isDisabled, isSkeleton, onClick, onMouseEnter, onMouseLeave, } = props;
|
|
1066
|
+
const { id, appearance, className, dataTour, width, height, badgeClass, href, imageSrc, link, linkRel, linkTarget, notification, saveFillStroke, showTooltip, SvgImage, before, after, isActive, isDisabled, isSkeleton, onClick, onMouseEnter, onMouseLeave, } = props;
|
|
1063
1067
|
const ImageComponent = useMemo(() => {
|
|
1064
1068
|
if (SvgImage) {
|
|
1065
1069
|
const sizes = {};
|
|
@@ -1073,6 +1077,9 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
|
|
|
1073
1077
|
}
|
|
1074
1078
|
if (imageSrc) {
|
|
1075
1079
|
if (imageSrc.endsWith('.svg')) {
|
|
1080
|
+
if (saveFillStroke) {
|
|
1081
|
+
return jsx(SVG, { src: imageSrc });
|
|
1082
|
+
}
|
|
1076
1083
|
return jsx(SVG, { src: imageSrc, preProcessor: removeFillStroke });
|
|
1077
1084
|
}
|
|
1078
1085
|
return jsx("img", { src: imageSrc });
|
|
@@ -1097,7 +1104,7 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
|
|
|
1097
1104
|
`icon_fill_active_hover_${iconFillActiveHoverClass}`, isDisabled &&
|
|
1098
1105
|
iconFillDisabledClass &&
|
|
1099
1106
|
`icon_fill_disabled_${iconFillDisabledClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
|
|
1100
|
-
`border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `icon_skeleton`), ref: ref, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && `icon_size_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsx(Badge, { className: clsx(badgeClass, 'icon__badge'),
|
|
1107
|
+
`border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `icon_skeleton`), ref: ref, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && `icon_size_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsx(Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsx(Tooltip, { appearance: tooltipAppearance, className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
|
|
1101
1108
|
}));
|
|
1102
1109
|
const removeFillStroke = (code) => {
|
|
1103
1110
|
return code
|
|
@@ -6,7 +6,7 @@ var clsx = require('clsx');
|
|
|
6
6
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
7
7
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
8
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
9
|
-
var Icon = require('./
|
|
9
|
+
var Icon = require('./Icon_cjs_DKzT-zmQ.js');
|
|
10
10
|
var Text = require('./Text_cjs_DaH5tVvz.js');
|
|
11
11
|
|
|
12
12
|
const labelAppearanceAccent = {
|
|
@@ -4,7 +4,7 @@ import clsx from 'clsx';
|
|
|
4
4
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
5
5
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
6
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
7
|
-
import { I as Icon, T as Tooltip } from './
|
|
7
|
+
import { I as Icon, T as Tooltip } from './Icon_es_5JUPM7bP.js';
|
|
8
8
|
import { T as Text } from './Text_es_RDU9GLCV.js';
|
|
9
9
|
|
|
10
10
|
const labelAppearanceAccent = {
|
|
@@ -7,7 +7,7 @@ var castArray = require('lodash/castArray');
|
|
|
7
7
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
8
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
9
9
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
|
-
var Icon = require('../../
|
|
10
|
+
var Icon = require('../../Icon_cjs_DKzT-zmQ.js');
|
|
11
11
|
var Divider = require('../../Divider_cjs_DrmV2ezS.js');
|
|
12
12
|
var Text = require('../../Text_cjs_DaH5tVvz.js');
|
|
13
13
|
var _default = require('@itcase/icons/default');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Avatar = require('../../
|
|
3
|
+
var Avatar = require('../../Avatar_cjs_D-M9sW20.js');
|
|
4
4
|
require('react/jsx-runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('clsx');
|
|
@@ -18,7 +18,7 @@ require('react-responsive');
|
|
|
18
18
|
require('../utils/setViewportProperty.js');
|
|
19
19
|
require('../hooks.js');
|
|
20
20
|
require('../hooks/useStyles/styleAttributes.js');
|
|
21
|
-
require('../../
|
|
21
|
+
require('../../Icon_cjs_DKzT-zmQ.js');
|
|
22
22
|
require('react-inlinesvg');
|
|
23
23
|
require('../hoc/urlWithAssetPrefix.js');
|
|
24
24
|
require('../context/UrlAssetPrefix.js');
|
|
@@ -5,7 +5,7 @@ var clsx = require('clsx');
|
|
|
5
5
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
6
6
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
8
|
-
var Avatar = require('../../
|
|
8
|
+
var Avatar = require('../../Avatar_cjs_D-M9sW20.js');
|
|
9
9
|
var Group = require('../../Group_cjs_DmfeUcFI.js');
|
|
10
10
|
var Text = require('../../Text_cjs_DaH5tVvz.js');
|
|
11
11
|
require('react');
|
|
@@ -22,7 +22,7 @@ require('../utils/setViewportProperty.js');
|
|
|
22
22
|
require('../hooks.js');
|
|
23
23
|
require('../hooks/useStyles/styleAttributes.js');
|
|
24
24
|
require('lodash/maxBy');
|
|
25
|
-
require('../../
|
|
25
|
+
require('../../Icon_cjs_DKzT-zmQ.js');
|
|
26
26
|
require('react-inlinesvg');
|
|
27
27
|
require('../hoc/urlWithAssetPrefix.js');
|
|
28
28
|
require('../context/UrlAssetPrefix.js');
|
|
@@ -6,7 +6,7 @@ var clsx = require('clsx');
|
|
|
6
6
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
8
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
|
-
var Icon = require('../../
|
|
9
|
+
var Icon = require('../../Icon_cjs_DKzT-zmQ.js');
|
|
10
10
|
var Link = require('../../Link_cjs_qKXVfU8e.js');
|
|
11
11
|
var Text = require('../../Text_cjs_DaH5tVvz.js');
|
|
12
12
|
var _default = require('@itcase/icons/default');
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Button = require('../../
|
|
3
|
+
var Button = require('../../Button_cjs_BxoEdSG6.js');
|
|
4
4
|
require('react/jsx-runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('clsx');
|
|
7
|
-
require('../../
|
|
7
|
+
require('../../Icon_cjs_DKzT-zmQ.js');
|
|
8
8
|
require('react-inlinesvg');
|
|
9
9
|
require('../hoc/urlWithAssetPrefix.js');
|
|
10
10
|
require('@itcase/common');
|
|
@@ -5,8 +5,8 @@ var clsx = require('clsx');
|
|
|
5
5
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
6
6
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
8
|
-
var Icon = require('../../
|
|
9
|
-
var Label = require('../../
|
|
8
|
+
var Icon = require('../../Icon_cjs_DKzT-zmQ.js');
|
|
9
|
+
var Label = require('../../Label_cjs_D2YMjCoS.js');
|
|
10
10
|
var Text = require('../../Text_cjs_DaH5tVvz.js');
|
|
11
11
|
require('react');
|
|
12
12
|
require('lodash/camelCase');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var ChipsGroup = require('../../
|
|
3
|
+
var ChipsGroup = require('../../ChipsGroup_cjs_BMkiDYau.js');
|
|
4
4
|
require('react/jsx-runtime');
|
|
5
5
|
require('clsx');
|
|
6
6
|
require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
@@ -20,7 +20,7 @@ require('../hooks.js');
|
|
|
20
20
|
require('../hooks/useStyles/styleAttributes.js');
|
|
21
21
|
require('../hooks/useStyles/useStyles.js');
|
|
22
22
|
require('lodash/maxBy');
|
|
23
|
-
require('../../
|
|
23
|
+
require('../../Icon_cjs_DKzT-zmQ.js');
|
|
24
24
|
require('react-inlinesvg');
|
|
25
25
|
require('../hoc/urlWithAssetPrefix.js');
|
|
26
26
|
require('../context/UrlAssetPrefix.js');
|
|
@@ -6,7 +6,7 @@ var clsx = require('clsx');
|
|
|
6
6
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
7
7
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
8
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
9
|
-
var Icon = require('../../
|
|
9
|
+
var Icon = require('../../Icon_cjs_DKzT-zmQ.js');
|
|
10
10
|
var Loader = require('../../Loader_cjs_CRiUlTC3.js');
|
|
11
11
|
var Text = require('../../Text_cjs_DaH5tVvz.js');
|
|
12
12
|
require('lodash/camelCase');
|
|
@@ -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_BxoEdSG6.js');
|
|
10
10
|
var Text = require('../../Text_cjs_DaH5tVvz.js');
|
|
11
11
|
require('lodash/camelCase');
|
|
12
12
|
require('lodash/castArray');
|
|
@@ -20,7 +20,7 @@ require('react-responsive');
|
|
|
20
20
|
require('../utils/setViewportProperty.js');
|
|
21
21
|
require('../hooks.js');
|
|
22
22
|
require('../hooks/useStyles/styleAttributes.js');
|
|
23
|
-
require('../../
|
|
23
|
+
require('../../Icon_cjs_DKzT-zmQ.js');
|
|
24
24
|
require('react-inlinesvg');
|
|
25
25
|
require('../hoc/urlWithAssetPrefix.js');
|
|
26
26
|
require('../context/UrlAssetPrefix.js');
|
|
@@ -4,10 +4,10 @@ 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_BLOiIsfD.js');
|
|
8
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
|
-
var ChipsGroup = require('../../
|
|
10
|
+
var ChipsGroup = require('../../ChipsGroup_cjs_BMkiDYau.js');
|
|
11
11
|
require('date-fns/locale');
|
|
12
12
|
require('react-datepicker');
|
|
13
13
|
require('../hooks/useStyles/useStyles.js');
|
|
@@ -22,8 +22,8 @@ require('react-responsive');
|
|
|
22
22
|
require('../utils/setViewportProperty.js');
|
|
23
23
|
require('../hooks.js');
|
|
24
24
|
require('../hooks/useStyles/styleAttributes.js');
|
|
25
|
-
require('../../
|
|
26
|
-
require('../../
|
|
25
|
+
require('../../Button_cjs_BxoEdSG6.js');
|
|
26
|
+
require('../../Icon_cjs_DKzT-zmQ.js');
|
|
27
27
|
require('react-inlinesvg');
|
|
28
28
|
require('../hoc/urlWithAssetPrefix.js');
|
|
29
29
|
require('../context/UrlAssetPrefix.js');
|
|
@@ -31,24 +31,47 @@ require('../../Link_cjs_qKXVfU8e.js');
|
|
|
31
31
|
require('../../Text_cjs_DaH5tVvz.js');
|
|
32
32
|
require('../../Loader_cjs_CRiUlTC3.js');
|
|
33
33
|
require('../../Input_cjs_DDi5JVAV.js');
|
|
34
|
-
require('../../
|
|
34
|
+
require('../../Label_cjs_D2YMjCoS.js');
|
|
35
35
|
require('@itcase/icons/default');
|
|
36
36
|
require('lodash/castArray');
|
|
37
37
|
|
|
38
|
+
const datePeriodAppearanceShape = {
|
|
39
|
+
circular: {
|
|
40
|
+
shape: 'circular',
|
|
41
|
+
},
|
|
42
|
+
rounded: {
|
|
43
|
+
shape: 'rounded',
|
|
44
|
+
},
|
|
45
|
+
roundedXL: {
|
|
46
|
+
shape: 'rounded',
|
|
47
|
+
shapeStrength: '2m',
|
|
48
|
+
},
|
|
49
|
+
roundedL: {
|
|
50
|
+
shape: 'rounded',
|
|
51
|
+
shapeStrength: '1_5m',
|
|
52
|
+
},
|
|
53
|
+
roundedM: {
|
|
54
|
+
shape: 'rounded',
|
|
55
|
+
shapeStrength: '1m',
|
|
56
|
+
},
|
|
57
|
+
roundedS: {
|
|
58
|
+
shape: 'rounded',
|
|
59
|
+
shapeStrength: '0_5m',
|
|
60
|
+
},
|
|
61
|
+
};
|
|
62
|
+
|
|
38
63
|
const datePeriodAppearanceSize = {
|
|
39
64
|
sizeL: {
|
|
40
|
-
size: '
|
|
41
|
-
chipsAppearanceSize: '
|
|
65
|
+
size: 'l',
|
|
66
|
+
chipsAppearanceSize: 'sizeXL',
|
|
42
67
|
datePickerAppearanceSize: 'sizeM',
|
|
43
|
-
|
|
44
|
-
datePickerInputTextSize: 'm',
|
|
68
|
+
datePickerInputAppearanceSize: 'sizeM',
|
|
45
69
|
},
|
|
46
70
|
sizeM: {
|
|
47
71
|
size: 'm',
|
|
48
72
|
chipsAppearanceSize: 'sizeL',
|
|
49
73
|
datePickerAppearanceSize: 'sizeM',
|
|
50
|
-
|
|
51
|
-
datePickerInputTextSize: 'm',
|
|
74
|
+
datePickerInputAppearanceSize: 'sizeM',
|
|
52
75
|
},
|
|
53
76
|
};
|
|
54
77
|
|
|
@@ -74,6 +97,7 @@ const datePeriodAppearanceSurface = {
|
|
|
74
97
|
const datePeriodAppearance = {
|
|
75
98
|
...datePeriodAppearanceSurface,
|
|
76
99
|
...datePeriodAppearanceSize,
|
|
100
|
+
...datePeriodAppearanceShape,
|
|
77
101
|
};
|
|
78
102
|
|
|
79
103
|
const datePeriodConfig = {
|
|
@@ -86,7 +110,7 @@ function DatePeriod(props) {
|
|
|
86
110
|
const { appearance, className, datePeriodIntervalsList = Object.values(common.DATE_PERIOD_INTERVALS), datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, isDisabled, isSkeleton, onChangeDatePeriod, onKeyDown, } = props;
|
|
87
111
|
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
|
|
88
112
|
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
89
|
-
const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputFillHover, datePickerInputSize, datePickerInputTextSize, shapeClass, sizeClass, } = propsGenerator;
|
|
113
|
+
const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputSize, datePickerInputTextSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
|
|
90
114
|
const onClickPeriodChips = React.useCallback((selectedPeriodItem) => {
|
|
91
115
|
const dateStartIso = selectedPeriodItem.dateIntervalsList[0];
|
|
92
116
|
const dateEndIso = selectedPeriodItem.dateIntervalsList[1];
|
|
@@ -112,7 +136,7 @@ function DatePeriod(props) {
|
|
|
112
136
|
// },
|
|
113
137
|
// [onChangeDatePeriod],
|
|
114
138
|
// )
|
|
115
|
-
return (jsxRuntime.jsx("div", { className: clsx(className, 'date-period', shapeClass && `
|
|
139
|
+
return (jsxRuntime.jsx("div", { className: clsx(className, 'date-period', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `date-period_skeleton`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: jsxRuntime.jsxs(ChipsGroup.ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: [datePeriodIntervalsList.map((datePeriodItem) => (jsxRuntime.jsx(ChipsGroup.Chips, { appearance: `${chipsAppearance} ${chipsAppearanceSize}`, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))), jsxRuntime.jsx(DatePicker.DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
|
|
116
140
|
appearance: `${datePickerAppearance} ${datePickerAppearanceSize}`,
|
|
117
141
|
dateFormat: 'dd/MM/yyyy',
|
|
118
142
|
monthsShown: monthsShown,
|
|
@@ -122,7 +146,7 @@ function DatePeriod(props) {
|
|
|
122
146
|
isStartDefaultNull: true,
|
|
123
147
|
onKeyDown: onKeyDown,
|
|
124
148
|
}, endValue: datePeriodValueEnd, inputProps: {
|
|
125
|
-
appearance: `${datePickerInputAppearance} ghost`,
|
|
149
|
+
appearance: `${datePickerInputAppearance} ${datePickerInputAppearanceSize} ghost`,
|
|
126
150
|
className: `date-period__datepicker-input date-period__datepicker-input_size_${datePickerInputSize}`,
|
|
127
151
|
fillHover: datePickerInputFillHover,
|
|
128
152
|
textSize: datePickerInputTextSize,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var DatePicker = require('../../
|
|
3
|
+
var DatePicker = require('../../DatePicker_cjs_BLOiIsfD.js');
|
|
4
4
|
require('react/jsx-runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('clsx');
|
|
@@ -22,8 +22,8 @@ require('../hooks.js');
|
|
|
22
22
|
require('../hooks/useStyles/styleAttributes.js');
|
|
23
23
|
require('../hooks/useStyles/useStyles.js');
|
|
24
24
|
require('lodash/maxBy');
|
|
25
|
-
require('../../
|
|
26
|
-
require('../../
|
|
25
|
+
require('../../Button_cjs_BxoEdSG6.js');
|
|
26
|
+
require('../../Icon_cjs_DKzT-zmQ.js');
|
|
27
27
|
require('react-inlinesvg');
|
|
28
28
|
require('../hoc/urlWithAssetPrefix.js');
|
|
29
29
|
require('../context/UrlAssetPrefix.js');
|
|
@@ -31,7 +31,7 @@ require('../../Link_cjs_qKXVfU8e.js');
|
|
|
31
31
|
require('../../Text_cjs_DaH5tVvz.js');
|
|
32
32
|
require('../../Loader_cjs_CRiUlTC3.js');
|
|
33
33
|
require('../../Input_cjs_DDi5JVAV.js');
|
|
34
|
-
require('../../
|
|
34
|
+
require('../../Label_cjs_D2YMjCoS.js');
|
|
35
35
|
require('@itcase/icons/default');
|
|
36
36
|
|
|
37
37
|
|
|
@@ -5,7 +5,7 @@ var React = require('react');
|
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var ReactDrawer = require('react-modern-drawer');
|
|
7
7
|
var Divider = require('../../Divider_cjs_DrmV2ezS.js');
|
|
8
|
-
var Icon = require('../../
|
|
8
|
+
var Icon = require('../../Icon_cjs_DKzT-zmQ.js');
|
|
9
9
|
var Text = require('../../Text_cjs_DaH5tVvz.js');
|
|
10
10
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
11
11
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var DropdownItem = require('../../
|
|
3
|
+
var DropdownItem = require('../../DropdownItem_cjs_FsiEMPDs.js');
|
|
4
4
|
require('react/jsx-runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('clsx');
|
|
@@ -19,7 +19,7 @@ require('../hooks.js');
|
|
|
19
19
|
require('../hooks/useStyles/styleAttributes.js');
|
|
20
20
|
require('../hooks/useStyles/useStyles.js');
|
|
21
21
|
require('lodash/maxBy');
|
|
22
|
-
require('../../
|
|
22
|
+
require('../../Icon_cjs_DKzT-zmQ.js');
|
|
23
23
|
require('react-inlinesvg');
|
|
24
24
|
require('../hoc/urlWithAssetPrefix.js');
|
|
25
25
|
require('../context/UrlAssetPrefix.js');
|