@salutejs/plasma-new-hope 0.114.0-canary.1332.10195467656.0 → 0.115.0-canary.1335.10199765951.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Combobox/Combobox.js +16 -13
- package/cjs/components/Combobox/Combobox.js.map +1 -1
- package/cjs/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/cjs/components/DatePicker/DatePickerBase.styles.js.map +1 -1
- package/cjs/components/DatePicker/DatePickerBase.styles_192va2p.css +1 -0
- package/cjs/components/DatePicker/RangeDate/RangeDate.js +13 -9
- package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +4 -4
- package/cjs/components/DatePicker/SingleDate/SingleDate.js +13 -5
- package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.styles.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.styles_18z9fw1.css +5 -0
- package/cjs/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
- package/cjs/components/DatePicker/SingleDate/variations/_size/base.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/variations/_size/base_lf7y25.css +1 -0
- package/cjs/components/DatePicker/hooks/useKeyboardNavigation.js +30 -0
- package/cjs/components/DatePicker/hooks/useKeyboardNavigation.js.map +1 -0
- package/cjs/components/Select/Select.js +1 -1
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/ui/Target/Target.js +3 -3
- package/cjs/components/Select/ui/Target/Target.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Button/Button.js +4 -4
- package/cjs/components/Select/ui/Target/ui/Button/Button.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js +6 -4
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +2 -2
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js.map +1 -1
- package/cjs/components/Sheet/Sheet.js +8 -6
- package/cjs/components/Sheet/Sheet.js.map +1 -1
- package/cjs/components/Sheet/hooks/useOverflow.js +3 -3
- package/cjs/components/Sheet/hooks/useOverflow.js.map +1 -1
- package/cjs/components/Sheet/utils/handleTransition.js.map +1 -1
- package/cjs/index.css +4 -4
- package/emotion/cjs/components/Combobox/Combobox.js +16 -13
- package/emotion/cjs/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +13 -9
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +13 -5
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +14 -5
- package/emotion/cjs/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
- package/emotion/cjs/components/DatePicker/hooks/useKeyboardNavigation.js +32 -0
- package/emotion/cjs/components/Select/Select.js +1 -1
- package/emotion/cjs/components/Select/ui/Target/Target.js +3 -3
- package/emotion/cjs/components/Select/ui/Target/ui/Button/Button.js +4 -4
- package/emotion/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js +6 -4
- package/emotion/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +14 -14
- package/emotion/cjs/components/Sheet/Sheet.js +8 -6
- package/emotion/cjs/components/Sheet/Sheet.template-doc.mdx +6 -6
- package/emotion/cjs/components/Sheet/hooks/useOverflow.js +3 -3
- package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +7 -7
- package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/emotion/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +5 -5
- package/emotion/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/emotion/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx +5 -5
- package/emotion/es/components/Combobox/Combobox.js +16 -13
- package/emotion/es/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +13 -9
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +13 -5
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.styles.js +15 -6
- package/emotion/es/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
- package/emotion/es/components/DatePicker/hooks/useKeyboardNavigation.js +26 -0
- package/emotion/es/components/Select/Select.js +1 -1
- package/emotion/es/components/Select/ui/Target/Target.js +3 -3
- package/emotion/es/components/Select/ui/Target/ui/Button/Button.js +4 -4
- package/emotion/es/components/Select/ui/Target/ui/Textfield/Textfield.js +6 -4
- package/emotion/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +14 -14
- package/emotion/es/components/Sheet/Sheet.js +8 -6
- package/emotion/es/components/Sheet/Sheet.template-doc.mdx +6 -6
- package/emotion/es/components/Sheet/hooks/useOverflow.js +3 -3
- package/emotion/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +1 -1
- package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +7 -7
- package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/emotion/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +5 -5
- package/emotion/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx +1 -1
- package/emotion/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/emotion/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx +5 -5
- package/es/components/Combobox/Combobox.js +16 -13
- package/es/components/Combobox/Combobox.js.map +1 -1
- package/es/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/es/components/DatePicker/DatePickerBase.styles.js.map +1 -1
- package/es/components/DatePicker/DatePickerBase.styles_192va2p.css +1 -0
- package/es/components/DatePicker/RangeDate/RangeDate.js +13 -9
- package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.css +4 -4
- package/es/components/DatePicker/SingleDate/SingleDate.js +13 -5
- package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.styles.js.map +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.styles_18z9fw1.css +5 -0
- package/es/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
- package/es/components/DatePicker/SingleDate/variations/_size/base.js.map +1 -1
- package/es/components/DatePicker/SingleDate/variations/_size/base_lf7y25.css +1 -0
- package/es/components/DatePicker/hooks/useKeyboardNavigation.js +25 -0
- package/es/components/DatePicker/hooks/useKeyboardNavigation.js.map +1 -0
- package/es/components/Select/Select.js +1 -1
- package/es/components/Select/Select.js.map +1 -1
- package/es/components/Select/ui/Target/Target.js +3 -3
- package/es/components/Select/ui/Target/Target.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Button/Button.js +4 -4
- package/es/components/Select/ui/Target/ui/Button/Button.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.js +6 -4
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +2 -2
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js.map +1 -1
- package/es/components/Sheet/Sheet.js +8 -6
- package/es/components/Sheet/Sheet.js.map +1 -1
- package/es/components/Sheet/hooks/useOverflow.js +3 -3
- package/es/components/Sheet/hooks/useOverflow.js.map +1 -1
- package/es/components/Sheet/utils/handleTransition.js.map +1 -1
- package/es/index.css +4 -4
- package/package.json +2 -2
- package/styled-components/cjs/components/Combobox/Combobox.js +16 -13
- package/styled-components/cjs/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +13 -9
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +13 -5
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +2 -2
- package/styled-components/cjs/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
- package/styled-components/cjs/components/DatePicker/hooks/useKeyboardNavigation.js +32 -0
- package/styled-components/cjs/components/Select/Select.js +1 -1
- package/styled-components/cjs/components/Select/ui/Target/Target.js +3 -3
- package/styled-components/cjs/components/Select/ui/Target/ui/Button/Button.js +4 -4
- package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js +6 -4
- package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +2 -2
- package/styled-components/cjs/components/Sheet/Sheet.js +8 -6
- package/styled-components/cjs/components/Sheet/Sheet.template-doc.mdx +6 -6
- package/styled-components/cjs/components/Sheet/hooks/useOverflow.js +3 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +5 -5
- package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx +5 -5
- package/styled-components/es/components/Combobox/Combobox.js +16 -13
- package/styled-components/es/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +13 -9
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +13 -5
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.styles.js +3 -3
- package/styled-components/es/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
- package/styled-components/es/components/DatePicker/hooks/useKeyboardNavigation.js +26 -0
- package/styled-components/es/components/Select/Select.js +1 -1
- package/styled-components/es/components/Select/ui/Target/Target.js +3 -3
- package/styled-components/es/components/Select/ui/Target/ui/Button/Button.js +4 -4
- package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.js +6 -4
- package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +2 -2
- package/styled-components/es/components/Sheet/Sheet.js +8 -6
- package/styled-components/es/components/Sheet/Sheet.template-doc.mdx +6 -6
- package/styled-components/es/components/Sheet/hooks/useOverflow.js +3 -3
- package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +5 -5
- package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +1 -80
- package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx +5 -5
- package/types/components/Combobox/Combobox.d.ts.map +1 -1
- package/types/components/Combobox/Combobox.types.d.ts +7 -0
- package/types/components/Combobox/Combobox.types.d.ts.map +1 -1
- package/types/components/DatePicker/DatePickerBase.styles.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/variations/_size/base.d.ts.map +1 -1
- package/types/components/DatePicker/hooks/useKeyboardNavigation.d.ts +13 -0
- package/types/components/DatePicker/hooks/useKeyboardNavigation.d.ts.map +1 -0
- package/types/components/Select/ui/Target/Target.types.d.ts +2 -1
- package/types/components/Select/ui/Target/Target.types.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Button/Button.types.d.ts +1 -1
- package/types/components/Select/ui/Target/ui/Button/Button.types.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.types.d.ts +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.types.d.ts.map +1 -1
- package/types/components/Sheet/Sheet.d.ts.map +1 -1
- package/types/components/Sheet/Sheet.types.d.ts +5 -3
- package/types/components/Sheet/Sheet.types.d.ts.map +1 -1
- package/types/components/Sheet/hooks/useOverflow.d.ts +1 -1
- package/types/components/Sheet/utils/handleTransition.d.ts +1 -1
- package/cjs/components/DatePicker/DatePickerBase.styles_1whkrlf.css +0 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.styles_qt45m5.css +0 -5
- package/cjs/components/DatePicker/SingleDate/variations/_size/base_g7zrur.css +0 -1
- package/es/components/DatePicker/DatePickerBase.styles_1whkrlf.css +0 -1
- package/es/components/DatePicker/SingleDate/SingleDate.styles_qt45m5.css +0 -5
- package/es/components/DatePicker/SingleDate/variations/_size/base_g7zrur.css +0 -1
@@ -3,7 +3,7 @@ import { css } from 'styled-components';
|
|
3
3
|
import { component, mergeConfig } from '../../../engines';
|
4
4
|
import { textFieldConfig, textFieldTokens } from '../../TextField';
|
5
5
|
import { classes, tokens } from '../DatePicker.tokens';
|
6
|
-
import {
|
6
|
+
import { popoverConfig } from '../../Popover';
|
7
7
|
var mergedTextFieldConfig = /*#__PURE__*/mergeConfig(textFieldConfig);
|
8
8
|
var TextField = /*#__PURE__*/component(mergedTextFieldConfig);
|
9
9
|
var mergedPopoverConfig = /*#__PURE__*/mergeConfig(popoverConfig);
|
@@ -15,8 +15,8 @@ export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
|
|
15
15
|
// NOTE: переопределение токенов TextField
|
16
16
|
export var StyledInput = /*#__PURE__*/styled(TextField).withConfig({
|
17
17
|
componentId: "plasma-new-hope__sc-1ye0xbz-1"
|
18
|
-
})(["
|
19
|
-
export var base = /*#__PURE__*/css(["display:inline-block
|
18
|
+
})([" ", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.borderColor, textFieldTokens.borderColorHover, tokens.borderColorHover, textFieldTokens.borderColorFocus, tokens.borderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.labelInnerPadding, tokens.labelInnerPadding, textFieldTokens.contentLabelInnerPadding, tokens.contentLabelInnerPadding, textFieldTokens.labelInnerFontFamily, tokens.labelInnerFontFamily, textFieldTokens.labelInnerFontSize, tokens.labelInnerFontSize, textFieldTokens.labelInnerFontStyle, tokens.labelInnerFontStyle, textFieldTokens.labelInnerFontWeight, tokens.labelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, tokens.labelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, tokens.labelInnerLineHeight, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, classes.datePickerError, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.datePickerSuccess, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
|
19
|
+
export var base = /*#__PURE__*/css(["display:inline-block;"]);
|
20
20
|
export var StyledLabel = /*#__PURE__*/styled.label.withConfig({
|
21
21
|
componentId: "plasma-new-hope__sc-1ye0xbz-2"
|
22
22
|
})([""]);
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { tokens } from '../../../DatePicker.tokens';
|
3
3
|
import { StyledLabel, LeftHelper } from '../../SingleDate.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], StyledLabel, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);
|
4
|
+
export var base = /*#__PURE__*/css(["width:var(", ");", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], tokens.width, StyledLabel, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);
|
@@ -0,0 +1,26 @@
|
|
1
|
+
export var keys = {
|
2
|
+
Space: 'Space'
|
3
|
+
};
|
4
|
+
export var useKeyNavigation = function useKeyNavigation(_ref) {
|
5
|
+
var isCalendarOpen = _ref.isCalendarOpen,
|
6
|
+
onToggle = _ref.onToggle;
|
7
|
+
var onKeyDown = function onKeyDown(event) {
|
8
|
+
switch (event.code) {
|
9
|
+
case keys.Space:
|
10
|
+
{
|
11
|
+
if (!isCalendarOpen) {
|
12
|
+
event.preventDefault();
|
13
|
+
onToggle(true, event);
|
14
|
+
}
|
15
|
+
break;
|
16
|
+
}
|
17
|
+
default:
|
18
|
+
{
|
19
|
+
break;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
};
|
23
|
+
return {
|
24
|
+
onKeyDown: onKeyDown
|
25
|
+
};
|
26
|
+
};
|
@@ -243,7 +243,7 @@ export var selectRoot = function selectRoot(Root) {
|
|
243
243
|
onToggle: handleToggle,
|
244
244
|
trigger: "click",
|
245
245
|
target: /*#__PURE__*/React.createElement(Target, {
|
246
|
-
|
246
|
+
isOpen: isCurrentListOpen,
|
247
247
|
target: target,
|
248
248
|
value: value,
|
249
249
|
isTargetAmount: isTargetAmount,
|
@@ -5,7 +5,7 @@ export var Target = function Target(_ref) {
|
|
5
5
|
multiselect = _ref.multiselect,
|
6
6
|
isTargetAmount = _ref.isTargetAmount,
|
7
7
|
target = _ref.target,
|
8
|
-
|
8
|
+
isOpen = _ref.isOpen,
|
9
9
|
valueToItemMap = _ref.valueToItemMap,
|
10
10
|
onChipClick = _ref.onChipClick,
|
11
11
|
label = _ref.label,
|
@@ -20,7 +20,7 @@ export var Target = function Target(_ref) {
|
|
20
20
|
focusedPath = _ref.focusedPath,
|
21
21
|
focusedToValueMap = _ref.focusedToValueMap;
|
22
22
|
return target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
|
23
|
-
|
23
|
+
isOpen: isOpen,
|
24
24
|
value: value,
|
25
25
|
isTargetAmount: isTargetAmount,
|
26
26
|
multiselect: multiselect,
|
@@ -33,7 +33,7 @@ export var Target = function Target(_ref) {
|
|
33
33
|
focusedPath: focusedPath,
|
34
34
|
focusedToValueMap: focusedToValueMap
|
35
35
|
}) : /*#__PURE__*/React.createElement(Textfield, {
|
36
|
-
|
36
|
+
isOpen: isOpen,
|
37
37
|
value: value,
|
38
38
|
isTargetAmount: isTargetAmount,
|
39
39
|
multiselect: multiselect,
|
@@ -4,7 +4,7 @@ import { classes } from '../../../../Select.tokens';
|
|
4
4
|
import { getButtonLabel, sizeToIconSize } from '../../../../utils';
|
5
5
|
import { StyledButton, StyledArrow, Label, ButtonWrapper, IconArrowWrapper } from './Button.styles';
|
6
6
|
export var Button = function Button(_ref) {
|
7
|
-
var
|
7
|
+
var isOpen = _ref.isOpen,
|
8
8
|
value = _ref.value,
|
9
9
|
isTargetAmount = _ref.isTargetAmount,
|
10
10
|
multiselect = _ref.multiselect,
|
@@ -16,7 +16,7 @@ export var Button = function Button(_ref) {
|
|
16
16
|
renderValue = _ref.renderValue,
|
17
17
|
focusedPath = _ref.focusedPath,
|
18
18
|
focusedToValueMap = _ref.focusedToValueMap;
|
19
|
-
var withArrowInverse =
|
19
|
+
var withArrowInverse = isOpen ? classes.arrowInverse : undefined;
|
20
20
|
var getActiveDescendant = function getActiveDescendant() {
|
21
21
|
var _focusedToValueMap$ge;
|
22
22
|
var focusedPathAsString = focusedPath.reduce(function (acc, n) {
|
@@ -27,7 +27,7 @@ export var Button = function Button(_ref) {
|
|
27
27
|
return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(StyledButton, {
|
28
28
|
stretching: "filled",
|
29
29
|
onKeyDown: onKeyDown,
|
30
|
-
className:
|
30
|
+
className: isOpen ? classes.selectWithoutBoxShadow : undefined,
|
31
31
|
disabled: disabled,
|
32
32
|
contentRight: /*#__PURE__*/React.createElement(IconArrowWrapper, null, /*#__PURE__*/React.createElement(StyledArrow, {
|
33
33
|
size: sizeToIconSize(size),
|
@@ -36,7 +36,7 @@ export var Button = function Button(_ref) {
|
|
36
36
|
})),
|
37
37
|
role: "combobox",
|
38
38
|
"aria-controls": "tree_level_1",
|
39
|
-
"aria-expanded":
|
39
|
+
"aria-expanded": isOpen,
|
40
40
|
"aria-activedescendant": getActiveDescendant(),
|
41
41
|
"aria-label": label
|
42
42
|
}, /*#__PURE__*/React.createElement(Label, null, getButtonLabel({
|
@@ -48,6 +48,7 @@ var getLabel = function getLabel(_ref) {
|
|
48
48
|
};
|
49
49
|
export var Textfield = function Textfield(_ref2) {
|
50
50
|
var opened = _ref2.opened,
|
51
|
+
isOpen = _ref2.isOpen,
|
51
52
|
value = _ref2.value,
|
52
53
|
isTargetAmount = _ref2.isTargetAmount,
|
53
54
|
multiselect = _ref2.multiselect,
|
@@ -64,7 +65,8 @@ export var Textfield = function Textfield(_ref2) {
|
|
64
65
|
renderValue = _ref2.renderValue,
|
65
66
|
focusedPath = _ref2.focusedPath,
|
66
67
|
focusedToValueMap = _ref2.focusedToValueMap;
|
67
|
-
var
|
68
|
+
var innerIsOpen = opened || isOpen;
|
69
|
+
var withArrowInverse = innerIsOpen ? classes.arrowInverse : undefined;
|
68
70
|
var getActiveDescendant = function getActiveDescendant() {
|
69
71
|
var _focusedToValueMap$ge;
|
70
72
|
var focusedPathAsString = focusedPath.reduce(function (acc, n) {
|
@@ -73,16 +75,16 @@ export var Textfield = function Textfield(_ref2) {
|
|
73
75
|
return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
|
74
76
|
};
|
75
77
|
return /*#__PURE__*/React.createElement(TextfieldWrapper, {
|
76
|
-
|
78
|
+
isOpen: innerIsOpen,
|
77
79
|
value: value
|
78
80
|
}, /*#__PURE__*/React.createElement(StyledButton, {
|
79
81
|
stretching: "filled",
|
80
|
-
className: cx(classes.textfieldTarget,
|
82
|
+
className: cx(classes.textfieldTarget, innerIsOpen || focusedChipIndex !== null ? classes.selectWithoutBoxShadow : undefined),
|
81
83
|
onKeyDown: onKeyDown,
|
82
84
|
disabled: disabled,
|
83
85
|
role: "combobox",
|
84
86
|
"aria-controls": "tree_level_1",
|
85
|
-
"aria-expanded":
|
87
|
+
"aria-expanded": innerIsOpen,
|
86
88
|
"aria-activedescendant": getActiveDescendant(),
|
87
89
|
"aria-label": label
|
88
90
|
}, /*#__PURE__*/React.createElement(Wrapper, null, contentLeft && (!multiselect || isEmpty(value)) && /*#__PURE__*/React.createElement(ContentLeftWrapper, null, contentLeft), /*#__PURE__*/React.createElement(ChipWrapper, null, getLabel({
|
@@ -10,8 +10,8 @@ var Button = /*#__PURE__*/component(mergedButtonConfig);
|
|
10
10
|
export var TextfieldWrapper = /*#__PURE__*/styled.div.withConfig({
|
11
11
|
componentId: "plasma-new-hope__sc-1akl2tk-0"
|
12
12
|
})(["display:inline;.", "{background:", ";padding:", ";}.", "::before{box-shadow:none !important;}"], classes.textfieldTarget, function (_ref) {
|
13
|
-
var
|
14
|
-
return
|
13
|
+
var isOpen = _ref.isOpen;
|
14
|
+
return isOpen ? "var(".concat(tokens.targetTextfieldBackgroundColorOpened, ")") : "var(".concat(tokens.targetTextfieldBackgroundColor, ")");
|
15
15
|
}, function (_ref2) {
|
16
16
|
var value = _ref2.value;
|
17
17
|
return Array.isArray(value) && !isEmpty(value) ? "0 var(".concat(tokens.targetTextfieldChipPadding, ")") : "0 var(".concat(tokens.targetTextfieldPadding, ")");
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["opened", "children", "onClose", "hasHandle", "contentHeader", "isHeaderFixed", "contentFooter", "isFooterFixed", "withOverlay", "withBlur", "withTransition", "throttleMs", "className", "view"];
|
1
|
+
var _excluded = ["opened", "isOpen", "children", "onClose", "hasHandle", "contentHeader", "isHeaderFixed", "contentFooter", "isFooterFixed", "withOverlay", "withBlur", "withTransition", "throttleMs", "className", "view"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
@@ -18,6 +18,7 @@ import { DEFAULT_Z_INDEX } from './utils';
|
|
18
18
|
export var sheetRoot = function sheetRoot(Root) {
|
19
19
|
return /*#__PURE__*/forwardRef(function (_ref, rootRef) {
|
20
20
|
var opened = _ref.opened,
|
21
|
+
isOpen = _ref.isOpen,
|
21
22
|
children = _ref.children,
|
22
23
|
onClose = _ref.onClose,
|
23
24
|
_ref$hasHandle = _ref.hasHandle,
|
@@ -38,11 +39,12 @@ export var sheetRoot = function sheetRoot(Root) {
|
|
38
39
|
className = _ref.className,
|
39
40
|
view = _ref.view,
|
40
41
|
restProps = _objectWithoutProperties(_ref, _excluded);
|
42
|
+
var innerIsOpen = opened || isOpen;
|
41
43
|
var contentWrapperRef = useRef(null);
|
42
44
|
var contentRef = useRef(null);
|
43
45
|
var handleRef = useRef(null);
|
44
46
|
useOverflow({
|
45
|
-
|
47
|
+
isOpen: innerIsOpen
|
46
48
|
});
|
47
49
|
useSheetSwipe({
|
48
50
|
contentWrapperRef: contentWrapperRef,
|
@@ -53,15 +55,15 @@ export var sheetRoot = function sheetRoot(Root) {
|
|
53
55
|
});
|
54
56
|
var hasHeader = Boolean(contentHeader);
|
55
57
|
var hasFooter = Boolean(contentFooter);
|
56
|
-
var closedClass =
|
58
|
+
var closedClass = innerIsOpen ? undefined : "".concat(classes.closed);
|
57
59
|
var overlayBackgroundToken = withBlur ? "var(".concat(tokens.sheetOverlayWithBlurColor, ")") : "var(".concat(tokens.sheetOverlayColor, ")");
|
58
60
|
return /*#__PURE__*/React.createElement(Root, {
|
59
|
-
|
61
|
+
isOpen: innerIsOpen,
|
60
62
|
onClose: onClose,
|
61
63
|
view: view,
|
62
64
|
ref: rootRef
|
63
65
|
}, /*#__PURE__*/React.createElement(StyledContentWrapper, _extends({
|
64
|
-
|
66
|
+
isOpen: innerIsOpen,
|
65
67
|
withTransition: withTransition,
|
66
68
|
className: cx(closedClass, className),
|
67
69
|
ref: contentWrapperRef
|
@@ -75,7 +77,7 @@ export var sheetRoot = function sheetRoot(Root) {
|
|
75
77
|
isHeaderFixed: isHeaderFixed
|
76
78
|
}, contentHeader), /*#__PURE__*/React.createElement(StyledSheetBody, null, children), hasFooter && /*#__PURE__*/React.createElement(StyledSheetFooter, {
|
77
79
|
isFooterFixed: isFooterFixed
|
78
|
-
}, contentFooter))), withOverlay &&
|
80
|
+
}, contentFooter))), withOverlay && innerIsOpen && /*#__PURE__*/React.createElement(Overlay, {
|
79
81
|
zIndex: DEFAULT_Z_INDEX,
|
80
82
|
backgroundColorProperty: overlayBackgroundToken,
|
81
83
|
withBlur: withBlur,
|
@@ -26,7 +26,7 @@ export function App() {
|
|
26
26
|
<>
|
27
27
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
28
28
|
|
29
|
-
<Sheet
|
29
|
+
<Sheet isOpen={opened}
|
30
30
|
onClose={() => setOpened(false)}
|
31
31
|
contentHeader={
|
32
32
|
<div>
|
@@ -50,7 +50,7 @@ export function App() {
|
|
50
50
|
|
51
51
|
### Закрепление заголовка и футера
|
52
52
|
|
53
|
-
С помощью свойств `isHeaderFixed` и `isFooterFixed` можно закрепить заголовок и футер.
|
53
|
+
С помощью свойств `isHeaderFixed` и `isFooterFixed` можно закрепить заголовок и футер.
|
54
54
|
В этом случае при появлении прокрутки контент будет скроллиться под них.
|
55
55
|
|
56
56
|
```tsx live
|
@@ -64,7 +64,7 @@ export function App() {
|
|
64
64
|
return (
|
65
65
|
<>
|
66
66
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
67
|
-
<Sheet
|
67
|
+
<Sheet isOpen={opened}
|
68
68
|
onClose={() => setOpened(false)}
|
69
69
|
contentHeader={
|
70
70
|
<div>
|
@@ -105,7 +105,7 @@ export function App() {
|
|
105
105
|
<Button onClick={() => setOpened(!opened)}>
|
106
106
|
{opened ? 'Закрыть' : 'Открыть'}
|
107
107
|
</Button>
|
108
|
-
<Sheet
|
108
|
+
<Sheet isOpen={opened}
|
109
109
|
onClose={() => setOpened(false)}
|
110
110
|
withOverlay={false}
|
111
111
|
>
|
@@ -131,7 +131,7 @@ export function App() {
|
|
131
131
|
<Button onClick={() => setOpened(!opened)}>
|
132
132
|
{opened ? 'Закрыть' : 'Открыть'}
|
133
133
|
</Button>
|
134
|
-
<Sheet
|
134
|
+
<Sheet isOpen={opened}
|
135
135
|
onClose={() => setOpened(false)}
|
136
136
|
withBlur
|
137
137
|
>
|
@@ -140,4 +140,4 @@ export function App() {
|
|
140
140
|
</>
|
141
141
|
);
|
142
142
|
}
|
143
|
-
```
|
143
|
+
```
|
@@ -1,15 +1,15 @@
|
|
1
1
|
import { useEffect, useRef } from 'react';
|
2
2
|
export var useOverflow = function useOverflow(_ref) {
|
3
|
-
var
|
3
|
+
var isOpen = _ref.isOpen;
|
4
4
|
var overflow = useRef(document.body.style.overflowY);
|
5
5
|
|
6
6
|
// linaria не поддерживает динамический global
|
7
7
|
useEffect(function () {
|
8
|
-
if (
|
8
|
+
if (isOpen) {
|
9
9
|
overflow.current = document.body.style.overflowY;
|
10
10
|
document.body.style.overflowY = 'hidden';
|
11
11
|
return;
|
12
12
|
}
|
13
13
|
document.body.style.overflowY = overflow.current;
|
14
|
-
}, [
|
14
|
+
}, [isOpen]);
|
15
15
|
};
|
@@ -7,7 +7,7 @@ export var config = {
|
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
"default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--surface-transparent-
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--shadow-down-soft-s);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--surface-accent);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor)
|
11
11
|
},
|
12
12
|
size: {
|
13
13
|
l: /*#__PURE__*/css(["", ":26.5rem;", ":0.875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0 0 1rem;", ":0;", ":0 0 0.75rem 0;", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":0.875rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0.875rem;", ":26.5rem;", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 0.5rem 0 0.5rem;", ":0.75rem;", ":11.75rem;", ":10.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":3.5rem;", ":3rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.875rem 1rem 0 1rem;", ":0.5rem;", ":0 0 0 1rem;", ":0.5rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-bold-font-weight);", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;"], tokens.width, tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.calendarBorderRadius, tokens.calendarWidth, tokens.calendarYearsPadding, tokens.calendarYearItemBorderRadius, tokens.calendarYearItemWidth, tokens.calendarYearItemHeight, tokens.calendarYearFontFamily, tokens.calendarYearFontSize, tokens.calendarYearFontStyle, tokens.calendarYearFontLetterSpacing, tokens.calendarYearFontLineHeight, tokens.calendarYearFontWeight, tokens.calendarYearSelectedFontWeight, tokens.calendarMonthsPadding, tokens.calendarMonthItemBorderRadius, tokens.calendarMonthItemWidth, tokens.calendarMonthItemHeight, tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarMonthFontWeight, tokens.calendarMonthSelectedFontWeight, tokens.calendarQuartersPadding, tokens.calendarQuarterItemBorderRadius, tokens.calendarQuarterItemWidth, tokens.calendarQuarterItemHeight, tokens.calendarQuarterFontFamily, tokens.calendarQuarterFontSize, tokens.calendarQuarterFontStyle, tokens.calendarQuarterFontLetterSpacing, tokens.calendarQuarterFontLineHeight, tokens.calendarQuarterFontWeight, tokens.calendarQuarterSelectedFontWeight, tokens.calendarDaysPadding, tokens.calendarDayItemBorderRadius, tokens.calendarDayItemWidth, tokens.calendarDayItemHeight, tokens.calendarDayFontFamily, tokens.calendarDayFontSize, tokens.calendarDayFontStyle, tokens.calendarDayFontLetterSpacing, tokens.calendarDayFontLineHeight, tokens.calendarDayFontWeight, tokens.calendarDaySelectedFontWeight, tokens.calendarHeaderWrapperPadding, tokens.calendarHeaderArrowGap, tokens.calendarHeaderPadding, tokens.calendarHeaderDateGap, tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderFontWeight, tokens.calendarHeaderFontWeightBold, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonRadius),
|
package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { ComponentProps,
|
1
|
+
import React, { ComponentProps, useRef, useState } from 'react';
|
2
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
3
3
|
import { action } from '@storybook/addon-actions';
|
4
4
|
import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
|
@@ -263,82 +263,3 @@ export const Range: StoryObj<StoryPropsRange> = {
|
|
263
263
|
},
|
264
264
|
render: (args) => <StoryRange {...args} />,
|
265
265
|
};
|
266
|
-
|
267
|
-
const StoryDeferred = ({
|
268
|
-
enableContentLeft,
|
269
|
-
enableContentRight,
|
270
|
-
valueError,
|
271
|
-
valueSuccess,
|
272
|
-
size,
|
273
|
-
...rest
|
274
|
-
}: StoryPropsDefault) => {
|
275
|
-
const [isOpen, setIsOpen] = useState(false);
|
276
|
-
|
277
|
-
const [defVal, setDefVal] = useState<Date | undefined>(undefined);
|
278
|
-
|
279
|
-
const iconSize = size === 'xs' ? 'xs' : 's';
|
280
|
-
|
281
|
-
useEffect(() => {
|
282
|
-
setTimeout(() => {
|
283
|
-
setDefVal(new Date(2024, 5, 14));
|
284
|
-
}, 5000);
|
285
|
-
}, []);
|
286
|
-
|
287
|
-
return (
|
288
|
-
<>
|
289
|
-
<h3>Асинхронная установка даты по умолчанию</h3>
|
290
|
-
<DatePicker
|
291
|
-
defaultDate={defVal}
|
292
|
-
isOpen={isOpen}
|
293
|
-
size={size}
|
294
|
-
valueError={valueError}
|
295
|
-
valueSuccess={valueSuccess}
|
296
|
-
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
297
|
-
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
298
|
-
onBlur={onBlur}
|
299
|
-
onFocus={onFocus}
|
300
|
-
onToggle={(is) => setIsOpen(is)}
|
301
|
-
onChangeValue={(e, currentValue) => {
|
302
|
-
onChangeValue(e, currentValue);
|
303
|
-
}}
|
304
|
-
onCommitDate={() => setIsOpen(false)}
|
305
|
-
{...rest}
|
306
|
-
/>
|
307
|
-
</>
|
308
|
-
);
|
309
|
-
};
|
310
|
-
|
311
|
-
export const Deferred: StoryObj<StoryPropsDefault> = {
|
312
|
-
argTypes: {
|
313
|
-
defaultDate: {
|
314
|
-
control: {
|
315
|
-
type: 'date',
|
316
|
-
},
|
317
|
-
},
|
318
|
-
labelPlacement: {
|
319
|
-
options: labelPlacements,
|
320
|
-
control: {
|
321
|
-
type: 'inline-radio',
|
322
|
-
},
|
323
|
-
},
|
324
|
-
},
|
325
|
-
args: {
|
326
|
-
label: 'Лейбл',
|
327
|
-
leftHelper: 'Подсказка к полю',
|
328
|
-
placeholder: '30.05.2024',
|
329
|
-
size: 'l',
|
330
|
-
view: 'default',
|
331
|
-
labelPlacement: 'outer',
|
332
|
-
min: new Date(2024, 1, 1),
|
333
|
-
max: new Date(2024, 12, 29),
|
334
|
-
maskWithFormat: false,
|
335
|
-
disabled: false,
|
336
|
-
readOnly: false,
|
337
|
-
textBefore: '',
|
338
|
-
enableContentLeft: true,
|
339
|
-
enableContentRight: true,
|
340
|
-
valueError: false,
|
341
|
-
valueSuccess: false,
|
342
|
-
},
|
343
|
-
render: (args) => <StoryDeferred {...args} />,
|
344
|
-
};
|
@@ -49,7 +49,7 @@ const StoryDefault = ({
|
|
49
49
|
<>
|
50
50
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
51
51
|
<Sheet
|
52
|
-
|
52
|
+
isOpen={opened}
|
53
53
|
withOverlay={withOverlay}
|
54
54
|
withTransition={withTransition}
|
55
55
|
onClose={() => setOpened(false)}
|
@@ -92,7 +92,7 @@ const StoryWithoutOverlay = () => {
|
|
92
92
|
return (
|
93
93
|
<>
|
94
94
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
95
|
-
<Sheet
|
95
|
+
<Sheet isOpen={opened} withOverlay={false} onClose={() => setOpened(false)}>
|
96
96
|
<StyledBody>
|
97
97
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
|
98
98
|
consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
|
@@ -125,7 +125,7 @@ const StoryWithScroll = ({
|
|
125
125
|
<>
|
126
126
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
127
127
|
<Sheet
|
128
|
-
|
128
|
+
isOpen={opened}
|
129
129
|
withOverlay={withOverlay}
|
130
130
|
withTransition={withTransition}
|
131
131
|
onClose={() => setOpened(false)}
|
@@ -195,7 +195,7 @@ const StoryWithInsideScroll = ({
|
|
195
195
|
<>
|
196
196
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
197
197
|
<Sheet
|
198
|
-
|
198
|
+
isOpen={opened}
|
199
199
|
withOverlay={withOverlay}
|
200
200
|
withTransition={withTransition}
|
201
201
|
onClose={() => setOpened(false)}
|
@@ -267,7 +267,7 @@ const StoryWithDoubleScroll = ({
|
|
267
267
|
<>
|
268
268
|
<Button onClick={() => setOpened(true)}>Открыть</Button>
|
269
269
|
<Sheet
|
270
|
-
|
270
|
+
isOpen={opened}
|
271
271
|
withOverlay={withOverlay}
|
272
272
|
withTransition={withTransition}
|
273
273
|
onClose={() => setOpened(false)}
|
package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { ComponentProps,
|
1
|
+
import React, { ComponentProps, useRef, useState } from 'react';
|
2
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
3
3
|
import { action } from '@storybook/addon-actions';
|
4
4
|
import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
|
@@ -262,82 +262,3 @@ export const Range: StoryObj<StoryPropsRange> = {
|
|
262
262
|
},
|
263
263
|
render: (args) => <StoryRange {...args} />,
|
264
264
|
};
|
265
|
-
|
266
|
-
const StoryDeferred = ({
|
267
|
-
enableContentLeft,
|
268
|
-
enableContentRight,
|
269
|
-
valueError,
|
270
|
-
valueSuccess,
|
271
|
-
size,
|
272
|
-
...rest
|
273
|
-
}: StoryPropsDefault) => {
|
274
|
-
const [isOpen, setIsOpen] = useState(false);
|
275
|
-
|
276
|
-
const [defVal, setDefVal] = useState<Date | undefined>(undefined);
|
277
|
-
|
278
|
-
const iconSize = size === 'xs' ? 'xs' : 's';
|
279
|
-
|
280
|
-
useEffect(() => {
|
281
|
-
setTimeout(() => {
|
282
|
-
setDefVal(new Date(2024, 5, 14));
|
283
|
-
}, 5000);
|
284
|
-
}, []);
|
285
|
-
|
286
|
-
return (
|
287
|
-
<>
|
288
|
-
<h3>Асинхронная установка даты по умолчанию</h3>
|
289
|
-
<DatePicker
|
290
|
-
defaultDate={defVal}
|
291
|
-
isOpen={isOpen}
|
292
|
-
size={size}
|
293
|
-
valueError={valueError}
|
294
|
-
valueSuccess={valueSuccess}
|
295
|
-
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
296
|
-
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
297
|
-
onBlur={onBlur}
|
298
|
-
onFocus={onFocus}
|
299
|
-
onToggle={(is) => setIsOpen(is)}
|
300
|
-
onChangeValue={(e, currentValue) => {
|
301
|
-
onChangeValue(e, currentValue);
|
302
|
-
}}
|
303
|
-
onCommitDate={() => setIsOpen(false)}
|
304
|
-
{...rest}
|
305
|
-
/>
|
306
|
-
</>
|
307
|
-
);
|
308
|
-
};
|
309
|
-
|
310
|
-
export const Deferred: StoryObj<StoryPropsDefault> = {
|
311
|
-
argTypes: {
|
312
|
-
defaultDate: {
|
313
|
-
control: {
|
314
|
-
type: 'date',
|
315
|
-
},
|
316
|
-
},
|
317
|
-
labelPlacement: {
|
318
|
-
options: labelPlacements,
|
319
|
-
control: {
|
320
|
-
type: 'inline-radio',
|
321
|
-
},
|
322
|
-
},
|
323
|
-
},
|
324
|
-
args: {
|
325
|
-
label: 'Лейбл',
|
326
|
-
leftHelper: 'Подсказка к полю',
|
327
|
-
placeholder: '30.05.2024',
|
328
|
-
size: 'l',
|
329
|
-
view: 'default',
|
330
|
-
labelPlacement: 'outer',
|
331
|
-
min: new Date(2024, 1, 1),
|
332
|
-
max: new Date(2024, 12, 29),
|
333
|
-
maskWithFormat: false,
|
334
|
-
disabled: false,
|
335
|
-
readOnly: false,
|
336
|
-
textBefore: '',
|
337
|
-
enableContentLeft: true,
|
338
|
-
enableContentRight: true,
|
339
|
-
valueError: false,
|
340
|
-
valueSuccess: false,
|
341
|
-
},
|
342
|
-
render: (args) => <StoryDeferred {...args} />,
|
343
|
-
};
|