@ozen-ui/kit 0.59.0 → 0.61.0
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/__inner__/cjs/components/Autocomplete/helper.d.ts +7 -72
- package/__inner__/cjs/components/Autocomplete/types.d.ts +11 -17
- package/__inner__/cjs/components/AutocompleteNext/helpers.d.ts +7 -77
- package/__inner__/cjs/components/AutocompleteNext/types.d.ts +10 -16
- package/__inner__/cjs/components/DatePicker/DatePicker.d.ts +2 -36
- package/__inner__/cjs/components/DatePicker/types.d.ts +5 -14
- package/__inner__/cjs/components/Segment/Segment.js +1 -1
- package/__inner__/cjs/components/Segment/components/SegmentItem/SegmentItem.js +1 -1
- package/__inner__/cjs/components/Select/Select.css +6 -0
- package/__inner__/cjs/components/Select/Select.js +41 -59
- package/__inner__/cjs/components/Select/components/SelectInput/SelectInput.js +5 -6
- package/__inner__/cjs/components/Select/components/SelectInputContextConsumer/SelectInputContextConsumer.d.ts +5 -0
- package/__inner__/cjs/components/Select/components/{SelectConsumer/SelectInputConsumer.js → SelectInputContextConsumer/SelectInputContextConsumer.js} +3 -3
- package/__inner__/cjs/components/Select/components/SelectInputContextConsumer/index.d.ts +1 -0
- package/__inner__/cjs/components/Select/components/{SelectConsumer → SelectInputContextConsumer}/index.js +1 -1
- package/__inner__/cjs/components/Select/helpers/types.d.ts +5 -8
- package/__inner__/cjs/components/Select/helpers/types.js +5 -1
- package/__inner__/cjs/components/Select/types.d.ts +43 -41
- package/__inner__/cjs/components/Stack/types.d.ts +2 -2
- package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDark.css +15 -15
- package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css +20 -20
- package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDark.css +15 -15
- package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDefault.css +20 -20
- package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_vipDark.css +15 -15
- package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_vipDefault.css +20 -20
- package/__inner__/cjs/components/ThemeProvider/index.d.ts +2 -0
- package/__inner__/cjs/components/ThemeProvider/index.js +2 -0
- package/__inner__/cjs/components/ThemeProvider/themes/themeVipDark.d.ts +14 -0
- package/__inner__/cjs/components/ThemeProvider/themes/themeVipDark.js +30 -0
- package/__inner__/cjs/components/ThemeProvider/themes/themeVipDefault.d.ts +14 -0
- package/__inner__/cjs/components/ThemeProvider/themes/themeVipDefault.js +30 -0
- package/__inner__/esm/components/Autocomplete/helper.d.ts +7 -72
- package/__inner__/esm/components/Autocomplete/types.d.ts +11 -17
- package/__inner__/esm/components/AutocompleteNext/helpers.d.ts +7 -77
- package/__inner__/esm/components/AutocompleteNext/types.d.ts +10 -16
- package/__inner__/esm/components/DatePicker/DatePicker.d.ts +2 -36
- package/__inner__/esm/components/DatePicker/types.d.ts +5 -14
- package/__inner__/esm/components/Segment/Segment.js +1 -1
- package/__inner__/esm/components/Segment/components/SegmentItem/SegmentItem.js +1 -1
- package/__inner__/esm/components/Select/Select.css +6 -0
- package/__inner__/esm/components/Select/Select.js +42 -60
- package/__inner__/esm/components/Select/components/SelectInput/SelectInput.js +5 -6
- package/__inner__/esm/components/Select/components/SelectInputContextConsumer/SelectInputContextConsumer.d.ts +5 -0
- package/__inner__/esm/components/Select/components/{SelectConsumer/SelectInputConsumer.js → SelectInputContextConsumer/SelectInputContextConsumer.js} +1 -1
- package/__inner__/esm/components/Select/components/SelectInputContextConsumer/index.d.ts +1 -0
- package/__inner__/esm/components/Select/components/SelectInputContextConsumer/index.js +1 -0
- package/__inner__/esm/components/Select/helpers/types.d.ts +5 -8
- package/__inner__/esm/components/Select/helpers/types.js +2 -0
- package/__inner__/esm/components/Select/types.d.ts +43 -41
- package/__inner__/esm/components/Stack/types.d.ts +2 -2
- package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDark.css +15 -15
- package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css +20 -20
- package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDark.css +15 -15
- package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDefault.css +20 -20
- package/__inner__/esm/components/ThemeProvider/_color/Theme_color_vipDark.css +15 -15
- package/__inner__/esm/components/ThemeProvider/_color/Theme_color_vipDefault.css +20 -20
- package/__inner__/esm/components/ThemeProvider/index.d.ts +2 -0
- package/__inner__/esm/components/ThemeProvider/index.js +2 -0
- package/__inner__/esm/components/ThemeProvider/themes/themeVipDark.d.ts +14 -0
- package/__inner__/esm/components/ThemeProvider/themes/themeVipDark.js +27 -0
- package/__inner__/esm/components/ThemeProvider/themes/themeVipDefault.d.ts +14 -0
- package/__inner__/esm/components/ThemeProvider/themes/themeVipDefault.js +27 -0
- package/package.json +4 -4
- package/__inner__/cjs/components/Select/components/SelectConsumer/SelectInputConsumer.d.ts +0 -5
- package/__inner__/cjs/components/Select/components/SelectConsumer/index.d.ts +0 -1
- package/__inner__/esm/components/Select/components/SelectConsumer/SelectInputConsumer.d.ts +0 -5
- package/__inner__/esm/components/Select/components/SelectConsumer/index.d.ts +0 -1
- package/__inner__/esm/components/Select/components/SelectConsumer/index.js +0 -1
|
@@ -1,39 +1,5 @@
|
|
|
1
1
|
import './DatePicker.css';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import type {
|
|
3
|
+
import type { DatePickerProps } from './types';
|
|
4
4
|
export declare const cnDatePicker: import("@bem-react/classname").ClassNameFormatter;
|
|
5
|
-
export declare const DatePicker: React.ForwardRefExoticComponent<
|
|
6
|
-
value?: Date | null;
|
|
7
|
-
defaultValue?: Date | null;
|
|
8
|
-
onChange?: DatePickerOnChange;
|
|
9
|
-
onInputChange?: import("./types").DatePickerOnInputChange;
|
|
10
|
-
onClose?: () => void;
|
|
11
|
-
onOpen?: () => void;
|
|
12
|
-
calendarProps?: import("../Calendar").CalendarProps;
|
|
13
|
-
popoverProps?: import("../Popover").PopoverBaseProps;
|
|
14
|
-
clearText?: string;
|
|
15
|
-
disableClearButton?: boolean;
|
|
16
|
-
onError?: import("./types").DatePickerPropOnError;
|
|
17
|
-
} & Pick<import("../Calendar").CalendarProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps"> & {
|
|
18
|
-
open?: boolean;
|
|
19
|
-
defaultOpen?: never;
|
|
20
|
-
} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
21
|
-
ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
22
|
-
}, "value" | "defaultValue" | "error" | "label" | "onChange" | "onError" | "onKeyDown" | "disabled" | "open" | "onClose" | "placeholder" | "required" | "size" | "exclude" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "disableClearButton" | "onInputChange" | "onOpen" | "defaultOpen" | "popoverProps" | "offsetDate" | "minDate" | "maxDate" | "calendarProps">, "ref"> | Omit<{
|
|
23
|
-
value?: Date | null;
|
|
24
|
-
defaultValue?: Date | null;
|
|
25
|
-
onChange?: DatePickerOnChange;
|
|
26
|
-
onInputChange?: import("./types").DatePickerOnInputChange;
|
|
27
|
-
onClose?: () => void;
|
|
28
|
-
onOpen?: () => void;
|
|
29
|
-
calendarProps?: import("../Calendar").CalendarProps;
|
|
30
|
-
popoverProps?: import("../Popover").PopoverBaseProps;
|
|
31
|
-
clearText?: string;
|
|
32
|
-
disableClearButton?: boolean;
|
|
33
|
-
onError?: import("./types").DatePickerPropOnError;
|
|
34
|
-
} & Pick<import("../Calendar").CalendarProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps"> & {
|
|
35
|
-
open?: never;
|
|
36
|
-
defaultOpen?: boolean;
|
|
37
|
-
} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
38
|
-
ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
39
|
-
}, "value" | "defaultValue" | "error" | "label" | "onChange" | "onError" | "onKeyDown" | "disabled" | "open" | "onClose" | "placeholder" | "required" | "size" | "exclude" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "disableClearButton" | "onInputChange" | "onOpen" | "defaultOpen" | "popoverProps" | "offsetDate" | "minDate" | "maxDate" | "calendarProps">, "ref">) & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
export declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -15,24 +15,16 @@ export type DatePickerPropOnError = (props: {
|
|
|
15
15
|
inputValue?: string;
|
|
16
16
|
value?: Date | null;
|
|
17
17
|
}) => void;
|
|
18
|
-
type DatePickerOpenControlledProps = {
|
|
19
|
-
/** Текущее состояние списка. Если `true`, список отображается. */
|
|
20
|
-
open?: boolean;
|
|
21
|
-
/** Состояние открытие по умолчанию (неконтролируемый компонент) */
|
|
22
|
-
defaultOpen?: never;
|
|
23
|
-
};
|
|
24
|
-
type DatePickerOpenUncontrolledProps = {
|
|
25
|
-
/** Текущее состояние списка. Если `true`, список отображается. */
|
|
26
|
-
open?: never;
|
|
27
|
-
/** Состояние открытие по умолчанию (неконтролируемый компонент) */
|
|
28
|
-
defaultOpen?: boolean;
|
|
29
|
-
};
|
|
30
18
|
export type DatePickerRef = ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
|
|
31
19
|
export type DatePickerProps = ExtendableComponentPropsWithRef<{
|
|
32
20
|
/** Выбранная дата */
|
|
33
21
|
value?: Date | null;
|
|
34
22
|
/** Выбранная дата по умолчанию (неконтролируемое состояние) */
|
|
35
23
|
defaultValue?: Date | null;
|
|
24
|
+
/** Текущее состояние списка. Если `true`, список отображается. */
|
|
25
|
+
open?: boolean;
|
|
26
|
+
/** Состояние открытие по умолчанию (неконтролируемый компонент) */
|
|
27
|
+
defaultOpen?: boolean;
|
|
36
28
|
/** Функция обратного вызова, которая будет вызвана при выборе значения */
|
|
37
29
|
onChange?: DatePickerOnChange;
|
|
38
30
|
/** Введённое значение в текстовом поле */
|
|
@@ -51,5 +43,4 @@ export type DatePickerProps = ExtendableComponentPropsWithRef<{
|
|
|
51
43
|
disableClearButton?: boolean;
|
|
52
44
|
/** Функция обратно вызова, которая сработает если пользователь ввёл дату с ошибкой */
|
|
53
45
|
onError?: DatePickerPropOnError;
|
|
54
|
-
} & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude' | 'offsetDate'> & Pick<InputProps, 'label' | 'hint' | 'onKeyDown' | 'size' | 'error' | 'required' | 'fullWidth' | 'disableStroke' | 'disabled' | 'renderLeft' | 'renderRight' | 'placeholder' | 'inputProps' | 'hintProps'
|
|
55
|
-
export {};
|
|
46
|
+
} & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude' | 'offsetDate'> & Pick<InputProps, 'label' | 'hint' | 'onKeyDown' | 'size' | 'error' | 'required' | 'fullWidth' | 'disableStroke' | 'disabled' | 'renderLeft' | 'renderRight' | 'placeholder' | 'inputProps' | 'hintProps'>, typeof FIELD_CONTROL_DEFAULT_TAG>;
|
|
@@ -29,7 +29,7 @@ export var Segment = forwardRef(function (inProps, ref) {
|
|
|
29
29
|
selected: valueState,
|
|
30
30
|
onChange: handleChange,
|
|
31
31
|
}); }, [name, disabled, iconSize, selectedColor, valueState, handleChange]);
|
|
32
|
-
return (React.createElement("fieldset", __assign({ ref: ref, disabled: disabled, className: cnSegment(
|
|
32
|
+
return (React.createElement("fieldset", __assign({ ref: ref, disabled: disabled, className: cnSegment({
|
|
33
33
|
size: size,
|
|
34
34
|
variant: variant,
|
|
35
35
|
disabled: disabled,
|
|
@@ -12,7 +12,7 @@ export var SegmentItem = forwardRef(function (_a, ref) {
|
|
|
12
12
|
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
13
13
|
onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event);
|
|
14
14
|
};
|
|
15
|
-
return (React.createElement("label", __assign({ ref: ref, className: cnSegmentItem(
|
|
15
|
+
return (React.createElement("label", __assign({ ref: ref, className: cnSegmentItem(__assign({ disabled: disabled, selected: selected }, (selected && { selectedColor: selectedColor })), [className]), "data-testid": dataTestId }, labelProps),
|
|
16
16
|
Icon && (React.createElement(Icon, { className: cnSegmentItem('Icon'), ref: iconRef, size: iconSize })),
|
|
17
17
|
children,
|
|
18
18
|
React.createElement("input", __assign({ disabled: disabled, type: "radio", name: nameProp || name, className: cnSegmentItem('Radio'), onChange: handleChange, checked: selected, value: value, "data-testid": inputTestId }, other, { ref: inputRef })),
|
|
@@ -7,10 +7,11 @@ import { useMultiRef } from '../../hooks/useMultiRef';
|
|
|
7
7
|
import { useThemeProps } from '../../hooks/useThemeProps';
|
|
8
8
|
import { cn } from '../../utils/classname';
|
|
9
9
|
import { isKeys } from '../../utils/isKeys';
|
|
10
|
+
import { isString } from '../../utils/isString';
|
|
10
11
|
import { DataList, DataListOption } from '../DataList';
|
|
11
12
|
import { SelectInput } from './components';
|
|
12
13
|
import { SELECT_DEFAULT_AUTO_FOCUS, SELECT_DEFAULT_DEFAULT_OPEN, SELECT_DEFAULT_DISABLED, SELECT_DEFAULT_FULL_WIDTH, SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_REQUIRED, SELECT_DEFAULT_SIZE, } from './constants';
|
|
13
|
-
import { isMultipleParams, isNotMultipleParams } from './helpers';
|
|
14
|
+
import { isMultipleLabel, isMultipleParams, isNotMultipleLabel, isNotMultipleParams, } from './helpers';
|
|
14
15
|
export var cnSelect = cn('Select');
|
|
15
16
|
var SelectRender = function (inProps, ref) {
|
|
16
17
|
var props = useThemeProps({
|
|
@@ -19,21 +20,20 @@ var SelectRender = function (inProps, ref) {
|
|
|
19
20
|
});
|
|
20
21
|
var _a = props.size, size = _a === void 0 ? SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? SELECT_DEFAULT_DEFAULT_OPEN : _g, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, renderValueProp = props.renderValue, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, bodeRefProp = props.bodyRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, multiple = props.multiple, other = __rest(props, ["size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "value", "defaultValue", "onChange", "renderValue", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "bodyRef", "onClose", "onOpen", "open", "multiple"]);
|
|
21
22
|
var bodyInnerRef = useRef(null);
|
|
22
|
-
|
|
23
|
-
var bodyRef = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodeRefProp;
|
|
23
|
+
var bodyRef = useMultiRef([(bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodeRefProp, bodyInnerRef]);
|
|
24
24
|
var dataListProps = dataListPropsProp || menuProps;
|
|
25
25
|
var _h = __read(useControlled({
|
|
26
26
|
value: valueProp,
|
|
27
27
|
defaultValue: defaultValue,
|
|
28
28
|
name: 'Select',
|
|
29
29
|
state: 'value',
|
|
30
|
-
}),
|
|
30
|
+
}), 2), valueState = _h[0], setValueState = _h[1];
|
|
31
31
|
var _j = __read(useControlled({
|
|
32
32
|
value: openProp,
|
|
33
33
|
defaultValue: defaultOpen,
|
|
34
34
|
name: 'Select',
|
|
35
35
|
state: 'open',
|
|
36
|
-
}),
|
|
36
|
+
}), 2), open = _j[0], setOpen = _j[1];
|
|
37
37
|
var currentLabel;
|
|
38
38
|
var isNotSelectOption = function (child) { return !isValidElement(child) || child.type !== DataListOption; };
|
|
39
39
|
var resolvedChildren = isFragment(children)
|
|
@@ -42,27 +42,23 @@ var SelectRender = function (inProps, ref) {
|
|
|
42
42
|
Children.forEach(resolvedChildren, function (child) {
|
|
43
43
|
var _a, _b;
|
|
44
44
|
if (!isNotSelectOption(child)) {
|
|
45
|
-
var label =
|
|
45
|
+
var label = isString(child.props.children)
|
|
46
46
|
? (_a = child.props.label) !== null && _a !== void 0 ? _a : child.props.children
|
|
47
47
|
: child.props.label;
|
|
48
|
-
var params = {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
value: valueState,
|
|
52
|
-
};
|
|
53
|
-
if (isMultipleParams(params)) {
|
|
48
|
+
var params = __assign(__assign({}, inProps), { multiple: multiple, value: valueState });
|
|
49
|
+
if (isMultipleParams(params) &&
|
|
50
|
+
isMultipleLabel(currentLabel, multiple)) {
|
|
54
51
|
var selected = (_b = params.value) === null || _b === void 0 ? void 0 : _b.includes(child.props.value);
|
|
55
|
-
if (selected)
|
|
56
|
-
currentLabel = __spreadArray(__spreadArray([], __read((
|
|
52
|
+
if (selected)
|
|
53
|
+
currentLabel = __spreadArray(__spreadArray([], __read((currentLabel || [])), false), [
|
|
57
54
|
label,
|
|
58
55
|
], false);
|
|
59
|
-
}
|
|
60
56
|
}
|
|
61
|
-
if (isNotMultipleParams(params)
|
|
57
|
+
if (isNotMultipleParams(params) &&
|
|
58
|
+
isNotMultipleLabel(currentLabel, multiple)) {
|
|
62
59
|
var selected = params.value === child.props.value;
|
|
63
|
-
if (selected)
|
|
60
|
+
if (selected)
|
|
64
61
|
currentLabel = label;
|
|
65
|
-
}
|
|
66
62
|
}
|
|
67
63
|
}
|
|
68
64
|
});
|
|
@@ -77,52 +73,40 @@ var SelectRender = function (inProps, ref) {
|
|
|
77
73
|
var handleToggle = function () {
|
|
78
74
|
if (disabled)
|
|
79
75
|
return;
|
|
80
|
-
if (open)
|
|
76
|
+
if (open)
|
|
81
77
|
handleClose();
|
|
82
|
-
|
|
83
|
-
else {
|
|
78
|
+
else
|
|
84
79
|
handleOpen();
|
|
85
|
-
}
|
|
86
80
|
};
|
|
87
|
-
var handleClick = function (
|
|
88
|
-
onClick === null || onClick === void 0 ? void 0 : onClick(
|
|
81
|
+
var handleClick = function (e) {
|
|
82
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
89
83
|
handleToggle();
|
|
90
84
|
};
|
|
91
85
|
/** Управление элементом контроля через клавиатуру */
|
|
92
|
-
var handleKeyDown = function (
|
|
93
|
-
if (isKeys(
|
|
94
|
-
|
|
86
|
+
var handleKeyDown = function (e) {
|
|
87
|
+
if (isKeys(e, ['Space', 'ArrowDown', 'ArrowUp']) && !open) {
|
|
88
|
+
e.preventDefault();
|
|
95
89
|
handleToggle();
|
|
96
90
|
}
|
|
97
|
-
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(
|
|
91
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
|
|
98
92
|
};
|
|
99
93
|
/** Событие выбора значения из раскрывающегося списка */
|
|
100
|
-
var handleChange = function (
|
|
94
|
+
var handleChange = function (e, _a) {
|
|
101
95
|
var value = _a.value;
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
}
|
|
105
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
|
|
96
|
+
setValueState(value);
|
|
97
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(value, e);
|
|
106
98
|
if (!multiple)
|
|
107
99
|
handleClose();
|
|
108
100
|
};
|
|
109
101
|
/** Представление значение элемента контроля по умолчанию */
|
|
110
102
|
var renderDefaultValue = function (option) {
|
|
111
103
|
var _a = option.label, label = _a === void 0 ? '' : _a, _b = option.value, value = _b === void 0 ? '' : _b;
|
|
112
|
-
if (!value && value !== 0)
|
|
104
|
+
if (!value && value !== 0)
|
|
113
105
|
return null;
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
value: value,
|
|
119
|
-
};
|
|
120
|
-
if (isMultipleParams(params)) {
|
|
121
|
-
return React.createElement("span", null, __spreadArray([], __read(params.label), false).join(', '));
|
|
122
|
-
}
|
|
123
|
-
if (isNotMultipleParams(params)) {
|
|
124
|
-
return React.createElement("span", null, params.label);
|
|
125
|
-
}
|
|
106
|
+
if (isMultipleLabel(label, multiple))
|
|
107
|
+
return React.createElement("span", null, __spreadArray([], __read(label), false).join(', '));
|
|
108
|
+
if (isNotMultipleLabel(label, multiple))
|
|
109
|
+
return React.createElement("span", null, label);
|
|
126
110
|
return null;
|
|
127
111
|
};
|
|
128
112
|
/** Значение для текстового поля компонента */
|
|
@@ -132,12 +116,10 @@ var SelectRender = function (inProps, ref) {
|
|
|
132
116
|
multiple: multiple,
|
|
133
117
|
value: valueState,
|
|
134
118
|
};
|
|
135
|
-
if (isMultipleParams(params))
|
|
136
|
-
return (_a = params.value) === null || _a === void 0 ? void 0 : _a.join(',');
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
return params.value;
|
|
140
|
-
}
|
|
119
|
+
if (isMultipleParams(params))
|
|
120
|
+
return ((_a = params.value) === null || _a === void 0 ? void 0 : _a.join(',')) || '';
|
|
121
|
+
if (isNotMultipleParams(params))
|
|
122
|
+
return (params === null || params === void 0 ? void 0 : params.value) || '';
|
|
141
123
|
return '';
|
|
142
124
|
};
|
|
143
125
|
/** Представление значение элемента контроля */
|
|
@@ -147,22 +129,22 @@ var SelectRender = function (inProps, ref) {
|
|
|
147
129
|
/** Устанавливает фокус на элементе контроля
|
|
148
130
|
* если компонент по умолчанию открыт — defaultOpen={true}
|
|
149
131
|
* и является неконтролируемым */
|
|
150
|
-
if (defaultOpen
|
|
132
|
+
if (defaultOpen)
|
|
151
133
|
(_a = bodyInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
152
|
-
|
|
153
|
-
}, [open]);
|
|
134
|
+
}, []);
|
|
154
135
|
useEffect(function () {
|
|
155
136
|
var _a;
|
|
156
137
|
/** Автофокус на элементе контроля */
|
|
157
|
-
if (autoFocus)
|
|
138
|
+
if (autoFocus)
|
|
158
139
|
(_a = bodyInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
159
|
-
}
|
|
160
140
|
}, [autoFocus]);
|
|
161
141
|
return (React.createElement(React.Fragment, null,
|
|
162
|
-
React.createElement(SelectInput, __assign({ size: size, disabled: disabled, required: required, multiline: multiline, fullWidth: fullWidth }, other, { open: open, onClick: handleClick, onKeyDown: handleKeyDown,
|
|
142
|
+
React.createElement(SelectInput, __assign({ size: size, disabled: disabled, required: required, multiline: multiline, fullWidth: fullWidth }, other, { open: open, value: inputValue(), onClick: handleClick, onKeyDown: handleKeyDown, renderedValue: renderValue({
|
|
163
143
|
label: currentLabel,
|
|
164
144
|
value: valueState,
|
|
165
|
-
}), bodyProps: __assign(__assign({}, bodyProps), { ref:
|
|
166
|
-
React.createElement(DataList, __assign({ equalAnchorWidth: true }, dataListProps, { listProps: __assign({ size: size, role: 'listbox' }, dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.listProps), open: open, multiple: multiple,
|
|
145
|
+
}), bodyProps: __assign(__assign({}, bodyProps), { ref: bodyRef }), ref: ref })),
|
|
146
|
+
React.createElement(DataList, __assign({ equalAnchorWidth: true }, dataListProps, { listProps: __assign({ size: size, role: 'listbox' }, dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.listProps), open: open, multiple: multiple, onClose: handleClose, onSelect: handleChange, anchorRef: bodyInnerRef,
|
|
147
|
+
// TODO: add `null` to `DataListSelected`
|
|
148
|
+
selected: (valueState || null) }), children)));
|
|
167
149
|
};
|
|
168
150
|
export var Select = forwardRef(SelectRender);
|
|
@@ -11,7 +11,7 @@ import { FieldLabel } from '../../../FieldLabel';
|
|
|
11
11
|
import { Fieldset } from '../../../Fieldset';
|
|
12
12
|
import { SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_SIZE } from '../../constants';
|
|
13
13
|
import { cnSelect } from '../../index';
|
|
14
|
-
import {
|
|
14
|
+
import { SelectInputContextConsumer } from '../SelectInputContextConsumer';
|
|
15
15
|
export var SelectInput = forwardRef(function (_a, ref) {
|
|
16
16
|
var _b = _a.size, size = _b === void 0 ? SELECT_DEFAULT_SIZE : _b, _c = _a.multiline, multiline = _c === void 0 ? SELECT_DEFAULT_MULTILINE : _c, open = _a.open, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, renderedValue = _a.renderedValue, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyDown = _a.onKeyDown, labelProps = _a.labelProps, fieldProps = _a.fieldProps, hintProps = _a.hintProps, labelRef = _a.labelRef, inputRef = _a.inputRef, fieldRef = _a.fieldRef, bodyProps = _a.bodyProps, other = __rest(_a, ["size", "multiline", "open", "label", "error", "id", "name", "renderLeft", "renderRight", "renderedValue", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "placeholder", "defaultValue", "onFocus", "onBlur", "onClick", "onKeyDown", "labelProps", "fieldProps", "hintProps", "labelRef", "inputRef", "fieldRef", "bodyProps"]);
|
|
17
17
|
var _d = __read(useBoolean(), 2), focused = _d[0], _e = _d[1], on = _e.on, off = _e.off;
|
|
@@ -24,14 +24,13 @@ export var SelectInput = forwardRef(function (_a, ref) {
|
|
|
24
24
|
off();
|
|
25
25
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
26
26
|
}, [onBlur]);
|
|
27
|
-
return (React.createElement(FieldControl, __assign({
|
|
28
|
-
|
|
29
|
-
}, [className]), ref: ref }),
|
|
30
|
-
React.createElement("div", __assign({ role: "button", "aria-haspopup": "listbox", "aria-expanded": open }, bodyProps, { onClick: onClick, onKeyDown: onKeyDown, tabIndex: disabled ? -1 : 0, onFocus: handleFocus, onBlur: handleBlur, className: cnSelect('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]) }),
|
|
27
|
+
return (React.createElement(FieldControl, __assign({ size: size, error: error, filled: filled, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: cnSelect({ multiline: multiline }, [className]) }),
|
|
28
|
+
React.createElement("div", __assign({ role: "button", "aria-expanded": open, "aria-haspopup": "listbox" }, bodyProps, { onClick: onClick, onBlur: handleBlur, onKeyDown: onKeyDown, onFocus: handleFocus, tabIndex: disabled ? -1 : 0, className: cnSelect('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]) }),
|
|
31
29
|
React.createElement(FieldIcon, { icon: renderLeft, className: cnSelect('RenderLeft') }),
|
|
32
30
|
React.createElement("div", { className: cnSelect('FieldContainer') },
|
|
31
|
+
React.createElement("div", { className: cnSelect('HiddenLabel'), "aria-hidden": true }, label),
|
|
33
32
|
React.createElement(FieldLabel, __assign({}, labelProps, { className: cnSelect('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref) || labelRef }), label),
|
|
34
|
-
React.createElement(
|
|
33
|
+
React.createElement(SelectInputContextConsumer, { id: id, name: name, value: valueProp, fieldProps: fieldProps, inputProps: inputProps, defaultValue: defaultValue, renderedValue: renderedValue, placeholder: placeholderProp, fieldRef: (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.ref) || fieldRef, inputRef: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref) || inputRef })),
|
|
35
34
|
React.createElement(FieldIcon, { icon: renderRight, className: cnSelect('RenderRight') }),
|
|
36
35
|
React.createElement(FieldIcon, { icon: ChevronDownIcon, className: classnames(cnSelect('RenderRight'), cnSelect('DropDownIcon', { open: open })) }),
|
|
37
36
|
React.createElement(Fieldset, { className: cnSelect('Fieldset') })),
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { FC } from 'react';
|
|
2
|
+
import type { SelectInputProps } from '../SelectInput';
|
|
3
|
+
type SelectInputContextConsumerProps = Pick<SelectInputProps, 'value' | 'placeholder' | 'defaultValue' | 'id' | 'name' | 'fieldProps' | 'fieldRef' | 'inputProps' | 'inputRef' | 'renderedValue'>;
|
|
4
|
+
export declare const SelectInputContextConsumer: FC<SelectInputContextConsumerProps>;
|
|
5
|
+
export {};
|
|
@@ -2,7 +2,7 @@ import { __assign, __read } from "tslib";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { useFieldControl } from '../../../FieldControl';
|
|
4
4
|
import { cnSelect } from '../../index';
|
|
5
|
-
export var
|
|
5
|
+
export var SelectInputContextConsumer = function (_a) {
|
|
6
6
|
var id = _a.id, name = _a.name, _b = _a.value, valueProp = _b === void 0 ? '' : _b, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, inputProps = _a.inputProps, inputRef = _a.inputRef, fieldRef = _a.fieldRef, fieldProps = _a.fieldProps, renderedValue = _a.renderedValue;
|
|
7
7
|
var context = useFieldControl();
|
|
8
8
|
var _c = __read(context, 1), fieldControl = _c[0];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './SelectInputContextConsumer';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './SelectInputContextConsumer';
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
};
|
|
7
|
-
export declare const isMultipleParams: (params: SelectedParams<boolean>) => params is SelectedParams<true>;
|
|
8
|
-
export declare const isNotMultipleParams: (params: SelectedParams<boolean>) => params is SelectedParams<false>;
|
|
1
|
+
import type { SelectProps, SelectLabel } from '../types';
|
|
2
|
+
export declare const isMultipleParams: (params: SelectProps<boolean>) => params is SelectProps<true>;
|
|
3
|
+
export declare const isNotMultipleParams: (params: SelectProps<boolean>) => params is SelectProps<false>;
|
|
4
|
+
export declare const isMultipleLabel: (_label: SelectLabel<boolean>, multiple?: boolean) => _label is SelectLabel<true>;
|
|
5
|
+
export declare const isNotMultipleLabel: (_label: SelectLabel<boolean>, multiple?: boolean) => _label is SelectLabel<false>;
|
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
export var isMultipleParams = function (params) { return !!params.multiple; };
|
|
2
2
|
export var isNotMultipleParams = function (params) { return !params.multiple; };
|
|
3
|
+
export var isMultipleLabel = function (_label, multiple) { return !!multiple; };
|
|
4
|
+
export var isNotMultipleLabel = function (_label, multiple) { return !multiple; };
|
|
@@ -1,45 +1,37 @@
|
|
|
1
1
|
import type { ReactElement, ReactNode, SyntheticEvent } from 'react';
|
|
2
2
|
import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
|
|
3
3
|
import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
|
|
4
|
-
import type { DataListBaseProps, DataListSelected } from '../DataList';
|
|
4
|
+
import type { DataListBaseProps, DataListOptionProps, DataListSelected } from '../DataList';
|
|
5
5
|
import type { SelectInputProps, SelectInputRef } from './components';
|
|
6
|
-
export type
|
|
7
|
-
export type SelectLabel =
|
|
8
|
-
export type
|
|
9
|
-
export type
|
|
10
|
-
export type
|
|
11
|
-
label?:
|
|
6
|
+
export type SelectPropSize = FormElementSizeVariant;
|
|
7
|
+
export type SelectLabel<MULTIPLE extends boolean = false> = (MULTIPLE extends true ? DataListOptionProps['label'][] : DataListOptionProps['label']) | undefined;
|
|
8
|
+
export type SelectPropValue<MULTIPLE extends boolean = false> = DataListSelected<MULTIPLE>;
|
|
9
|
+
export type SelectPropOnChange<MULTIPLE extends boolean = false> = (value: SelectPropValue<MULTIPLE>, e: SyntheticEvent | KeyboardEvent) => void;
|
|
10
|
+
export type SelectedOption<MULTIPLE extends boolean = false> = {
|
|
11
|
+
label?: SelectLabel<MULTIPLE>;
|
|
12
12
|
value?: SelectPropValue<MULTIPLE>;
|
|
13
13
|
};
|
|
14
|
-
export type
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
type SelectUncontrolledProps<MULTIPLE extends boolean = false> = {
|
|
36
|
-
/** Значение поля по умолчанию (неконтролируемый компонент) */
|
|
37
|
-
defaultValue: SelectPropValue<MULTIPLE>;
|
|
38
|
-
/** Выбранное значение */
|
|
39
|
-
value?: never;
|
|
40
|
-
/** Обработчик события на изменение выбранного значения */
|
|
41
|
-
onChange?: never;
|
|
42
|
-
};
|
|
14
|
+
export type SelectPropRenderValue<MULTIPLE extends boolean = false> = (option: SelectedOption<MULTIPLE>) => ReactNode | null;
|
|
15
|
+
/**
|
|
16
|
+
* @deprecated
|
|
17
|
+
* Use the `SelectRenderValueProp` type to replace it.
|
|
18
|
+
* */
|
|
19
|
+
export type SelectRenderValue<MULTIPLE extends boolean = false> = SelectPropRenderValue<MULTIPLE>;
|
|
20
|
+
/**
|
|
21
|
+
* @deprecated
|
|
22
|
+
* Use the `SelectLabel` type to replace it.
|
|
23
|
+
* */
|
|
24
|
+
export type SelectPropLabel<MULTIPLE extends boolean = false> = SelectLabel<MULTIPLE>;
|
|
25
|
+
/**
|
|
26
|
+
* @deprecated
|
|
27
|
+
* Use the `SelectSizeProp` type to replace it.
|
|
28
|
+
* */
|
|
29
|
+
export type SelectSizeVariant = SelectPropSize;
|
|
30
|
+
/**
|
|
31
|
+
* @deprecated
|
|
32
|
+
* Use the `SelectedPropOption` type to replace it.
|
|
33
|
+
* */
|
|
34
|
+
export type SelectedOptionProp<MULTIPLE extends boolean = false> = SelectedOption<MULTIPLE>;
|
|
43
35
|
type SelectPropsDeprecated<MULTIPLE extends boolean = false> = {
|
|
44
36
|
/**
|
|
45
37
|
* Свойства компонента Menu
|
|
@@ -52,21 +44,31 @@ export type SelectProps<MULTIPLE extends boolean = false> = ExtendableComponentP
|
|
|
52
44
|
/** Если `true` устанавливает автофокус */
|
|
53
45
|
autoFocus?: boolean;
|
|
54
46
|
/** Размер компонента */
|
|
55
|
-
size?:
|
|
47
|
+
size?: SelectPropSize;
|
|
48
|
+
/** Текущее состояние списка. Если `true`, список отображается. */
|
|
49
|
+
open?: boolean;
|
|
50
|
+
/** Состояние открытие по умолчанию (неконтролируемый компонент) */
|
|
51
|
+
defaultOpen?: boolean;
|
|
52
|
+
/** Выбранное значение */
|
|
53
|
+
value?: SelectPropValue<MULTIPLE>;
|
|
54
|
+
/** Обработчик события на изменение выбранного значения */
|
|
55
|
+
onChange?: SelectPropOnChange<MULTIPLE>;
|
|
56
|
+
/** Значение поля по умолчанию (неконтролируемый компонент) */
|
|
57
|
+
defaultValue?: SelectPropValue<MULTIPLE>;
|
|
56
58
|
/** Рендер-функция для выбранного значения */
|
|
57
|
-
renderValue?:
|
|
59
|
+
renderValue?: SelectPropRenderValue<MULTIPLE>;
|
|
58
60
|
/** Содержимое компонента */
|
|
59
61
|
children?: ReactNode;
|
|
60
62
|
/** Свойства компонента DataList */
|
|
61
63
|
dataListProps?: Partial<Omit<DataListBaseProps<MULTIPLE>, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
|
|
62
64
|
/** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
|
|
63
|
-
onClose
|
|
65
|
+
onClose?(): void;
|
|
64
66
|
/** Функция обратного вызова, которая будет вызвана когда компонент запрашивает открытие */
|
|
65
|
-
onOpen
|
|
67
|
+
onOpen?(): void;
|
|
66
68
|
/** Если `true` из списка можно выбрать несколько вариантов */
|
|
67
69
|
multiple?: MULTIPLE;
|
|
68
70
|
/** Идентификатор компонента для тестов */
|
|
69
71
|
'data-testid'?: string;
|
|
70
|
-
} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'disableStroke' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & SelectPropsDeprecated<MULTIPLE
|
|
72
|
+
} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'disableStroke' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & SelectPropsDeprecated<MULTIPLE>, 'div'>;
|
|
71
73
|
export type SelectComponent = <MULTIPLE extends boolean = false>(props: SelectProps<MULTIPLE>) => ReactElement | null;
|
|
72
74
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ElementType, ReactElement } from 'react';
|
|
2
2
|
import type { ResponsiveValue } from '../../types/ResponsiveValue';
|
|
3
|
-
import type {
|
|
3
|
+
import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
|
|
4
4
|
export declare const stackGapVariant: readonly ["0", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"];
|
|
5
5
|
export declare const stackDirectionVariant: readonly ["row", "column", "rowReverse", "columnReverse"];
|
|
6
6
|
export declare const stackAlignVariant: readonly ["center", "start", "end", "baseline"];
|
|
@@ -27,4 +27,4 @@ export type StackBaseProps = {
|
|
|
27
27
|
/** React-элемент для разделителя между дочерними компонентами стека */
|
|
28
28
|
divider?: ReactElement;
|
|
29
29
|
};
|
|
30
|
-
export type StackProps<As extends ElementType = 'div'> =
|
|
30
|
+
export type StackProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<StackBaseProps, As>;
|
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
--color-background-action-hover: #023dff;
|
|
54
54
|
--color-background-action-pressed: #3564ff;
|
|
55
55
|
--color-background-action-active-disabled: #0a2171;
|
|
56
|
-
--color-background-action-light: #
|
|
57
|
-
--color-background-action-light-hover: #
|
|
58
|
-
--color-background-action-light-pressed: #
|
|
56
|
+
--color-background-action-light: #0d1841;
|
|
57
|
+
--color-background-action-light-hover: #0a2171;
|
|
58
|
+
--color-background-action-light-pressed: #082ba0;
|
|
59
59
|
--color-background-accent-action-light: #0a2171;
|
|
60
60
|
--color-background-accent-action-light-hover: #082ba0;
|
|
61
61
|
--color-background-accent-action-light-pressed: #0534d0;
|
|
@@ -72,36 +72,36 @@
|
|
|
72
72
|
--color-background-error: #cf4a4b;
|
|
73
73
|
--color-background-error-hover: #ff5959;
|
|
74
74
|
--color-background-error-pressed: #ff7a7a;
|
|
75
|
-
--color-background-error-light: #
|
|
76
|
-
--color-background-error-light-hover: #
|
|
77
|
-
--color-background-error-light-pressed: #
|
|
75
|
+
--color-background-error-light: #401e20;
|
|
76
|
+
--color-background-error-light-hover: #702d2e;
|
|
77
|
+
--color-background-error-light-pressed: #9f3b3d;
|
|
78
78
|
--color-background-accent-error-light: #702d2e;
|
|
79
79
|
--color-background-accent-error-light-hover: #9f3b3d;
|
|
80
80
|
--color-background-accent-error-light-pressed: #cf4a4b;
|
|
81
81
|
--color-background-warning: #cf8d2a;
|
|
82
82
|
--color-background-warning-hover: #ffac30;
|
|
83
83
|
--color-background-warning-pressed: #ffbd59;
|
|
84
|
-
--color-background-warning-light: #
|
|
85
|
-
--color-background-warning-light-hover: #
|
|
86
|
-
--color-background-warning-light-pressed: #
|
|
84
|
+
--color-background-warning-light: #402e18;
|
|
85
|
+
--color-background-warning-light-hover: #704e1e;
|
|
86
|
+
--color-background-warning-light-pressed: #9f6d24;
|
|
87
87
|
--color-background-accent-warning-light: #704e1e;
|
|
88
88
|
--color-background-accent-warning-light-hover: #9f6d24;
|
|
89
89
|
--color-background-accent-warning-light-pressed: #cf8d2a;
|
|
90
90
|
--color-background-success: #039904;
|
|
91
91
|
--color-background-success-hover: #0b0;
|
|
92
92
|
--color-background-success-pressed: #33c933;
|
|
93
|
-
--color-background-success-light: #
|
|
94
|
-
--color-background-success-light-hover: #
|
|
95
|
-
--color-background-success-light-pressed: #
|
|
93
|
+
--color-background-success-light: #0d310e;
|
|
94
|
+
--color-background-success-light-hover: #0a540b;
|
|
95
|
+
--color-background-success-light-pressed: #067607;
|
|
96
96
|
--color-background-accent-success-light: #0a540b;
|
|
97
97
|
--color-background-accent-success-light-hover: #067607;
|
|
98
98
|
--color-background-accent-success-light-pressed: #039904;
|
|
99
99
|
--color-background-info: #6a05d0;
|
|
100
100
|
--color-background-info-hover: #8002ff;
|
|
101
101
|
--color-background-info-pressed: #9a35ff;
|
|
102
|
-
--color-background-info-light: #
|
|
103
|
-
--color-background-info-light-hover: #
|
|
104
|
-
--color-background-info-light-pressed: #
|
|
102
|
+
--color-background-info-light: #270d41;
|
|
103
|
+
--color-background-info-light-hover: #3d0a71;
|
|
104
|
+
--color-background-info-light-pressed: #5307a0;
|
|
105
105
|
--color-background-accent-info-light: #3d0a71;
|
|
106
106
|
--color-background-accent-info-light-hover: #5307a0;
|
|
107
107
|
--color-background-accent-info-light-pressed: #6a05d0;
|