@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
@@ -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
|
+
```
|
@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.useOverflow = void 0;
|
7
7
|
var _react = /*#__PURE__*/require("react");
|
8
8
|
var useOverflow = exports.useOverflow = function useOverflow(_ref) {
|
9
|
-
var
|
9
|
+
var isOpen = _ref.isOpen;
|
10
10
|
var overflow = (0, _react.useRef)(document.body.style.overflowY);
|
11
11
|
|
12
12
|
// linaria не поддерживает динамический global
|
13
13
|
(0, _react.useEffect)(function () {
|
14
|
-
if (
|
14
|
+
if (isOpen) {
|
15
15
|
overflow.current = document.body.style.overflowY;
|
16
16
|
document.body.style.overflowY = 'hidden';
|
17
17
|
return;
|
18
18
|
}
|
19
19
|
document.body.style.overflowY = overflow.current;
|
20
|
-
}, [
|
20
|
+
}, [isOpen]);
|
21
21
|
};
|
package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.config.js
CHANGED
@@ -13,7 +13,7 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.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-
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.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);"], _DatePicker.datePickerTokens.background, _DatePicker.datePickerTokens.backgroundError, _DatePicker.datePickerTokens.backgroundSuccess, _DatePicker.datePickerTokens.dividerColor, _DatePicker.datePickerTokens.labelColor, _DatePicker.datePickerTokens.leftHelperColor, _DatePicker.datePickerTokens.textFieldColor, _DatePicker.datePickerTokens.textFieldPlaceholderColor, _DatePicker.datePickerTokens.textFieldCaretColor, _DatePicker.datePickerTokens.labelInnerFontFamily, _DatePicker.datePickerTokens.labelInnerFontSize, _DatePicker.datePickerTokens.labelInnerFontStyle, _DatePicker.datePickerTokens.labelInnerFontWeight, _DatePicker.datePickerTokens.labelInnerLetterSpacing, _DatePicker.datePickerTokens.labelInnerLineHeight, _DatePicker.datePickerTokens.textFieldBackgroundColor, _DatePicker.datePickerTokens.textFieldBackgroundColorFocus, _DatePicker.datePickerTokens.textFieldBackgroundErrorColor, _DatePicker.datePickerTokens.textFieldBackgroundErrorColorFocus, _DatePicker.datePickerTokens.textFieldBackgroundSuccessColor, _DatePicker.datePickerTokens.textFieldBackgroundSuccessColorFocus, _DatePicker.datePickerTokens.textFieldTextBeforeColor, _DatePicker.datePickerTokens.textFieldTextAfterColor, _DatePicker.datePickerTokens.focusColor, _DatePicker.datePickerTokens.calendarShadow, _DatePicker.datePickerTokens.calendarSeparatorBackground, _DatePicker.datePickerTokens.calendarBackgroundColor, _DatePicker.datePickerTokens.calendarSelectedItemBackground, _DatePicker.datePickerTokens.calendarSelectedItemColor, _DatePicker.datePickerTokens.calendarSelectableItemBackgroundHover, _DatePicker.datePickerTokens.calendarCurrentItemBorderColor, _DatePicker.datePickerTokens.calendarCurrentItemBackgroundHover, _DatePicker.datePickerTokens.calendarCurrentItemColorHover, _DatePicker.datePickerTokens.calendarCurrentItemChildBackgroundHover, _DatePicker.datePickerTokens.calendarActiveItemBackground, _DatePicker.datePickerTokens.calendarActiveItemColor, _DatePicker.datePickerTokens.calendarHoveredItemBackground, _DatePicker.datePickerTokens.calendarHoveredItemColor, _DatePicker.datePickerTokens.calendarRangeBackground, _DatePicker.datePickerTokens.calendarOutlineFocusColor, _DatePicker.datePickerTokens.calendarContentPrimaryColor, _DatePicker.datePickerTokens.calendarContentSecondaryColor, _DatePicker.datePickerTokens.iconButtonColor, _DatePicker.datePickerTokens.iconButtonBackgroundColor, _DatePicker.datePickerTokens.iconButtonColorHover, _DatePicker.datePickerTokens.iconButtonBackgroundColorHover, _DatePicker.datePickerTokens.iconButtonColorActive, _DatePicker.datePickerTokens.iconButtonBackgroundColorActive, _DatePicker.datePickerTokens.iconButtonFocusColor)
|
17
17
|
},
|
18
18
|
size: {
|
19
19
|
l: /*#__PURE__*/(0, _styledComponents.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;"], _DatePicker.datePickerTokens.width, _DatePicker.datePickerTokens.borderRadius, _DatePicker.datePickerTokens.dividerPadding, _DatePicker.datePickerTokens.dividerFontFamily, _DatePicker.datePickerTokens.dividerFontStyle, _DatePicker.datePickerTokens.dividerFontSize, _DatePicker.datePickerTokens.dividerFontWeight, _DatePicker.datePickerTokens.dividerLetterSpacing, _DatePicker.datePickerTokens.dividerLineHeight, _DatePicker.datePickerTokens.leftContentMargin, _DatePicker.datePickerTokens.rightContentMargin, _DatePicker.datePickerTokens.labelOffset, _DatePicker.datePickerTokens.labelInnerPadding, _DatePicker.datePickerTokens.contentLabelInnerPadding, _DatePicker.datePickerTokens.labelFontFamily, _DatePicker.datePickerTokens.labelFontStyle, _DatePicker.datePickerTokens.labelFontSize, _DatePicker.datePickerTokens.labelFontWeight, _DatePicker.datePickerTokens.labelLetterSpacing, _DatePicker.datePickerTokens.labelLineHeight, _DatePicker.datePickerTokens.textFieldHeight, _DatePicker.datePickerTokens.textFieldBorderRadius, _DatePicker.datePickerTokens.textFieldPadding, _DatePicker.datePickerTokens.textFieldFontFamily, _DatePicker.datePickerTokens.textFieldFontStyle, _DatePicker.datePickerTokens.textFieldFontSize, _DatePicker.datePickerTokens.textFieldFontWeight, _DatePicker.datePickerTokens.textFieldLetterSpacing, _DatePicker.datePickerTokens.textFieldLineHeight, _DatePicker.datePickerTokens.leftHelperOffset, _DatePicker.datePickerTokens.leftHelperFontFamily, _DatePicker.datePickerTokens.leftHelperFontStyle, _DatePicker.datePickerTokens.leftHelperFontSize, _DatePicker.datePickerTokens.leftHelperFontWeight, _DatePicker.datePickerTokens.leftHelperLetterSpacing, _DatePicker.datePickerTokens.leftHelperLineHeight, _DatePicker.datePickerTokens.textFieldLeftContentMargin, _DatePicker.datePickerTokens.textFieldRightContentMargin, _DatePicker.datePickerTokens.textFieldTextBeforeMargin, _DatePicker.datePickerTokens.textFieldTextAfterMargin, _DatePicker.datePickerTokens.calendarBorderRadius, _DatePicker.datePickerTokens.calendarWidth, _DatePicker.datePickerTokens.calendarYearsPadding, _DatePicker.datePickerTokens.calendarYearItemBorderRadius, _DatePicker.datePickerTokens.calendarYearItemWidth, _DatePicker.datePickerTokens.calendarYearItemHeight, _DatePicker.datePickerTokens.calendarYearFontFamily, _DatePicker.datePickerTokens.calendarYearFontSize, _DatePicker.datePickerTokens.calendarYearFontStyle, _DatePicker.datePickerTokens.calendarYearFontLetterSpacing, _DatePicker.datePickerTokens.calendarYearFontLineHeight, _DatePicker.datePickerTokens.calendarYearFontWeight, _DatePicker.datePickerTokens.calendarYearSelectedFontWeight, _DatePicker.datePickerTokens.calendarMonthsPadding, _DatePicker.datePickerTokens.calendarMonthItemBorderRadius, _DatePicker.datePickerTokens.calendarMonthItemWidth, _DatePicker.datePickerTokens.calendarMonthItemHeight, _DatePicker.datePickerTokens.calendarMonthFontFamily, _DatePicker.datePickerTokens.calendarMonthFontSize, _DatePicker.datePickerTokens.calendarMonthFontStyle, _DatePicker.datePickerTokens.calendarMonthFontLetterSpacing, _DatePicker.datePickerTokens.calendarMonthFontLineHeight, _DatePicker.datePickerTokens.calendarMonthFontWeight, _DatePicker.datePickerTokens.calendarMonthSelectedFontWeight, _DatePicker.datePickerTokens.calendarQuartersPadding, _DatePicker.datePickerTokens.calendarQuarterItemBorderRadius, _DatePicker.datePickerTokens.calendarQuarterItemWidth, _DatePicker.datePickerTokens.calendarQuarterItemHeight, _DatePicker.datePickerTokens.calendarQuarterFontFamily, _DatePicker.datePickerTokens.calendarQuarterFontSize, _DatePicker.datePickerTokens.calendarQuarterFontStyle, _DatePicker.datePickerTokens.calendarQuarterFontLetterSpacing, _DatePicker.datePickerTokens.calendarQuarterFontLineHeight, _DatePicker.datePickerTokens.calendarQuarterFontWeight, _DatePicker.datePickerTokens.calendarQuarterSelectedFontWeight, _DatePicker.datePickerTokens.calendarDaysPadding, _DatePicker.datePickerTokens.calendarDayItemBorderRadius, _DatePicker.datePickerTokens.calendarDayItemWidth, _DatePicker.datePickerTokens.calendarDayItemHeight, _DatePicker.datePickerTokens.calendarDayFontFamily, _DatePicker.datePickerTokens.calendarDayFontSize, _DatePicker.datePickerTokens.calendarDayFontStyle, _DatePicker.datePickerTokens.calendarDayFontLetterSpacing, _DatePicker.datePickerTokens.calendarDayFontLineHeight, _DatePicker.datePickerTokens.calendarDayFontWeight, _DatePicker.datePickerTokens.calendarDaySelectedFontWeight, _DatePicker.datePickerTokens.calendarHeaderWrapperPadding, _DatePicker.datePickerTokens.calendarHeaderArrowGap, _DatePicker.datePickerTokens.calendarHeaderPadding, _DatePicker.datePickerTokens.calendarHeaderDateGap, _DatePicker.datePickerTokens.calendarHeaderFontFamily, _DatePicker.datePickerTokens.calendarHeaderFontSize, _DatePicker.datePickerTokens.calendarHeaderFontStyle, _DatePicker.datePickerTokens.calendarHeaderFontLetterSpacing, _DatePicker.datePickerTokens.calendarHeaderFontLineHeight, _DatePicker.datePickerTokens.calendarHeaderFontWeight, _DatePicker.datePickerTokens.calendarHeaderFontWeightBold, _DatePicker.datePickerTokens.iconButtonHeight, _DatePicker.datePickerTokens.iconButtonWidth, _DatePicker.datePickerTokens.iconButtonPadding, _DatePicker.datePickerTokens.iconButtonRadius),
|
package/styled-components/cjs/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/cjs/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
|
-
};
|
@@ -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)}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["name", "form", "readOnly", "disabled", "label", "placeholder", "id", "children", "role", "view", "size", "frame", "usePortal", "negativeResultContent", "enumerationType", "opened", "placement", "onToggle", "onKeyDown", "filterFunction"];
|
1
|
+
var _excluded = ["name", "form", "readOnly", "disabled", "label", "placeholder", "id", "children", "role", "view", "size", "frame", "usePortal", "negativeResultContent", "enumerationType", "opened", "isOpen", "placement", "onToggle", "onKeyDown", "filterFunction"];
|
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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -43,12 +43,15 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
43
43
|
enumerationType = _ref$enumerationType === void 0 ? 'comma' : _ref$enumerationType,
|
44
44
|
_ref$opened = _ref.opened,
|
45
45
|
opened = _ref$opened === void 0 ? false : _ref$opened,
|
46
|
+
_ref$isOpen = _ref.isOpen,
|
47
|
+
isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
|
46
48
|
_ref$placement = _ref.placement,
|
47
49
|
placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
|
48
50
|
onToggle = _ref.onToggle,
|
49
51
|
onKeyDown = _ref.onKeyDown,
|
50
52
|
filterFunction = _ref.filterFunction,
|
51
53
|
rest = _objectWithoutProperties(_ref, _excluded);
|
54
|
+
var innerIsOpen = opened || isOpen;
|
52
55
|
var forceUpdate = useForceUpdate();
|
53
56
|
var uniqId = safeUseId();
|
54
57
|
var innerId = id || uniqId;
|
@@ -73,10 +76,10 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
73
76
|
itemsRefs: itemsRefs,
|
74
77
|
inputRef: inputRef
|
75
78
|
};
|
76
|
-
var _useState3 = useState(
|
79
|
+
var _useState3 = useState(innerIsOpen),
|
77
80
|
_useState4 = _slicedToArray(_useState3, 2),
|
78
|
-
|
79
|
-
|
81
|
+
isVisible = _useState4[0],
|
82
|
+
setIsVisible = _useState4[1];
|
80
83
|
var _useState5 = useState(''),
|
81
84
|
_useState6 = _slicedToArray(_useState5, 2),
|
82
85
|
search = _useState6[0],
|
@@ -99,11 +102,11 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
99
102
|
if (disabled || readOnly) {
|
100
103
|
return;
|
101
104
|
}
|
102
|
-
|
103
|
-
}, [
|
105
|
+
setIsVisible(innerIsOpen);
|
106
|
+
}, [innerIsOpen, disabled, readOnly]);
|
104
107
|
useEffect(function () {
|
105
108
|
// INFO: Для кейсов, когда значение выбрано и нужно вывести весь список
|
106
|
-
if (
|
109
|
+
if (innerIsOpen) {
|
107
110
|
setFilterValue('');
|
108
111
|
}
|
109
112
|
}, []);
|
@@ -113,14 +116,14 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
113
116
|
}
|
114
117
|
|
115
118
|
// INFO: Для кейсов, когда значение выбрано и нужно вывести весь список
|
116
|
-
if (!
|
119
|
+
if (!isVisible) {
|
117
120
|
setFilterValue('');
|
118
121
|
}
|
119
122
|
if (onToggle) {
|
120
123
|
onToggle(openValue, event);
|
121
124
|
return;
|
122
125
|
}
|
123
|
-
|
126
|
+
setIsVisible(openValue);
|
124
127
|
};
|
125
128
|
var closedWithoutChanges = useRef(true);
|
126
129
|
var updateValue = function updateValue(item, event) {
|
@@ -152,7 +155,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
152
155
|
};
|
153
156
|
var _useKeyNavigation = useKeyNavigation({
|
154
157
|
controlledRefs: controlledRefs,
|
155
|
-
opened:
|
158
|
+
opened: isVisible,
|
156
159
|
enumerationType: enumerationType,
|
157
160
|
valueType: valueType,
|
158
161
|
componentType: 'combobox',
|
@@ -172,7 +175,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
172
175
|
var onSearch = function onSearch(newSearch, newOpened) {
|
173
176
|
setSearch(newSearch);
|
174
177
|
setFilterValue(newSearch);
|
175
|
-
|
178
|
+
setIsVisible(newOpened !== null && newOpened !== void 0 ? newOpened : true);
|
176
179
|
};
|
177
180
|
var onKeyDownHandle = function onKeyDownHandle(event) {
|
178
181
|
onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
|
@@ -191,10 +194,10 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
191
194
|
disabled: disabled || readOnly
|
192
195
|
}), /*#__PURE__*/React.createElement(StyledPopover, {
|
193
196
|
role: role,
|
194
|
-
isOpen:
|
197
|
+
isOpen: isVisible,
|
195
198
|
onToggle: onInnerToggle,
|
196
199
|
target: /*#__PURE__*/React.createElement(ComboboxTarget, _extends({
|
197
|
-
opened:
|
200
|
+
opened: isVisible,
|
198
201
|
values: values,
|
199
202
|
label: label,
|
200
203
|
placeholder: placeholder,
|
@@ -9,4 +9,4 @@ export var baseCalendarTokens = /*#__PURE__*/"\n padding-top: var(".concat(to
|
|
9
9
|
// NOTE: переопределение токенов Calendar
|
10
10
|
export var StyledCalendar = /*#__PURE__*/styled(Calendar).withConfig({
|
11
11
|
componentId: "plasma-new-hope__sc-1i6o09y-0"
|
12
|
-
})(["
|
12
|
+
})(["", ""], baseCalendarTokens);
|
@@ -13,6 +13,7 @@ import { cx } from '../../../utils';
|
|
13
13
|
import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '../utils/dateHelper';
|
14
14
|
import { useDatePicker } from '../hooks/useDatePicker';
|
15
15
|
import { classes } from '../DatePicker.tokens';
|
16
|
+
import { useKeyNavigation } from '../hooks/useKeyboardNavigation';
|
16
17
|
import { base as sizeCSS } from './variations/_size/base';
|
17
18
|
import { base as viewCSS } from './variations/_view/base';
|
18
19
|
import { base as disabledCSS } from './variations/_disabled/base';
|
@@ -172,6 +173,11 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
172
173
|
}
|
173
174
|
setIsInnerOpen(isCalendarOpen);
|
174
175
|
};
|
176
|
+
var _useKeyNavigation = useKeyNavigation({
|
177
|
+
isCalendarOpen: isInnerOpen,
|
178
|
+
onToggle: handleToggle
|
179
|
+
}),
|
180
|
+
onKeyDown = _useKeyNavigation.onKeyDown;
|
175
181
|
var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
|
176
182
|
ref: rangeRef,
|
177
183
|
dividerIcon: dividerIcon,
|
@@ -215,7 +221,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
215
221
|
onFocusFirstTextfield: onFocusFirstTextfield,
|
216
222
|
onFocusSecondTextfield: onFocusSecondTextfield,
|
217
223
|
onBlurFirstTextfield: onBlurFirstTextfield,
|
218
|
-
onBlurSecondTextfield: onBlurSecondTextfield
|
224
|
+
onBlurSecondTextfield: onBlurSecondTextfield,
|
225
|
+
onKeyDown: onKeyDown
|
219
226
|
}));
|
220
227
|
useEffect(function () {
|
221
228
|
var _rangeRef$current5, _rangeRef$current6;
|
@@ -223,13 +230,10 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
223
230
|
setSecondInputRef((_rangeRef$current6 = rangeRef.current) === null || _rangeRef$current6 === void 0 ? void 0 : _rangeRef$current6.secondTextField());
|
224
231
|
}, [rangeRef.current]);
|
225
232
|
useEffect(function () {
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format));
|
231
|
-
setInputSecondValue(formatInputValue(defaultSecondDate, format));
|
232
|
-
}, [defaultSecondDate]);
|
233
|
+
setIsInnerOpen(function (prevOpen) {
|
234
|
+
return prevOpen !== isOpen && isOpen;
|
235
|
+
});
|
236
|
+
}, [isOpen]);
|
233
237
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
234
238
|
ref: rootRef,
|
235
239
|
view: view,
|
@@ -240,7 +244,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
240
244
|
}, rest), label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(RangeDatePopover, {
|
241
245
|
calendarValue: [calendarFirstValue, calendarSecondValue],
|
242
246
|
target: RangeComponent,
|
243
|
-
isOpen:
|
247
|
+
isOpen: isInnerOpen,
|
244
248
|
includeEdgeDates: includeEdgeDates,
|
245
249
|
eventList: eventList,
|
246
250
|
disabledList: disabledList,
|
@@ -14,6 +14,7 @@ import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '.
|
|
14
14
|
import { useDatePicker } from '../hooks/useDatePicker';
|
15
15
|
import { classes } from '../DatePicker.tokens';
|
16
16
|
import { StyledCalendar } from '../DatePickerBase.styles';
|
17
|
+
import { useKeyNavigation } from '../hooks/useKeyboardNavigation';
|
17
18
|
import { base as sizeCSS } from './variations/_size/base';
|
18
19
|
import { base as viewCSS } from './variations/_view/base';
|
19
20
|
import { base as disabledCSS } from './variations/_disabled/base';
|
@@ -110,6 +111,11 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
110
111
|
handleToggle = _useDatePicker.handleToggle,
|
111
112
|
handleChangeValue = _useDatePicker.handleChangeValue,
|
112
113
|
handleCommitDate = _useDatePicker.handleCommitDate;
|
114
|
+
var _useKeyNavigation = useKeyNavigation({
|
115
|
+
isCalendarOpen: isInnerOpen,
|
116
|
+
onToggle: handleToggle
|
117
|
+
}),
|
118
|
+
onKeyDown = _useKeyNavigation.onKeyDown;
|
113
119
|
var DatePickerInput = /*#__PURE__*/React.createElement(StyledInput, _extends({
|
114
120
|
ref: inputRef,
|
115
121
|
className: cx(datePickerErrorClass, datePickerSuccessClass),
|
@@ -127,15 +133,17 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
127
133
|
return handleCommitDate(date, true, false);
|
128
134
|
},
|
129
135
|
onFocus: onFocus,
|
130
|
-
onBlur: onBlur
|
136
|
+
onBlur: onBlur,
|
137
|
+
onKeyDown: onKeyDown
|
131
138
|
}, innerLabelPlacement && {
|
132
139
|
label: label,
|
133
140
|
labelPlacement: labelPlacement
|
134
141
|
}));
|
135
142
|
useEffect(function () {
|
136
|
-
|
137
|
-
|
138
|
-
|
143
|
+
setIsInnerOpen(function (prevOpen) {
|
144
|
+
return prevOpen !== isOpen && isOpen;
|
145
|
+
});
|
146
|
+
}, [isOpen]);
|
139
147
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
140
148
|
view: view,
|
141
149
|
size: size,
|
@@ -144,7 +152,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
144
152
|
readOnly: !disabled && readOnly,
|
145
153
|
ref: ref
|
146
154
|
}, rest), !innerLabelPlacement && label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(StyledPopover, {
|
147
|
-
isOpen:
|
155
|
+
isOpen: isInnerOpen,
|
148
156
|
usePortal: false,
|
149
157
|
onToggle: handleToggle,
|
150
158
|
offset: offset,
|