@salutejs/plasma-new-hope 0.114.0-canary.1326.10178816804.0 → 0.114.0-canary.1332.10178621623.0
Sign up to get free protection for your applications and to get access to all the features.
- 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_1whkrlf.css +1 -0
- package/cjs/components/DatePicker/RangeDate/RangeDate.js +9 -13
- 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 +5 -13
- 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_qt45m5.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_g7zrur.css +1 -0
- package/cjs/index.css +4 -4
- package/emotion/cjs/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +9 -13
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +5 -13
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +5 -14
- package/emotion/cjs/components/DatePicker/SingleDate/variations/_size/base.js +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 +77 -1
- package/emotion/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +77 -1
- package/emotion/es/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +9 -13
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +5 -13
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.styles.js +6 -15
- package/emotion/es/components/DatePicker/SingleDate/variations/_size/base.js +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 +77 -1
- package/emotion/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +77 -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_1whkrlf.css +1 -0
- package/es/components/DatePicker/RangeDate/RangeDate.js +9 -13
- 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 +5 -13
- 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_qt45m5.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_g7zrur.css +1 -0
- package/es/index.css +4 -4
- package/package.json +2 -2
- package/styled-components/cjs/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +9 -13
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +5 -13
- 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/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +77 -1
- package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +77 -1
- package/styled-components/es/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +9 -13
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +5 -13
- 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/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +77 -1
- package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +77 -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/cjs/components/DatePicker/DatePickerBase.styles_192va2p.css +0 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.styles_18z9fw1.css +0 -5
- package/cjs/components/DatePicker/SingleDate/variations/_size/base_lf7y25.css +0 -1
- package/cjs/components/DatePicker/hooks/useKeyboardNavigation.js +0 -30
- package/cjs/components/DatePicker/hooks/useKeyboardNavigation.js.map +0 -1
- package/emotion/cjs/components/DatePicker/hooks/useKeyboardNavigation.js +0 -32
- package/emotion/es/components/DatePicker/hooks/useKeyboardNavigation.js +0 -26
- package/es/components/DatePicker/DatePickerBase.styles_192va2p.css +0 -1
- package/es/components/DatePicker/SingleDate/SingleDate.styles_18z9fw1.css +0 -5
- package/es/components/DatePicker/SingleDate/variations/_size/base_lf7y25.css +0 -1
- package/es/components/DatePicker/hooks/useKeyboardNavigation.js +0 -25
- package/es/components/DatePicker/hooks/useKeyboardNavigation.js.map +0 -1
- package/styled-components/cjs/components/DatePicker/hooks/useKeyboardNavigation.js +0 -32
- package/styled-components/es/components/DatePicker/hooks/useKeyboardNavigation.js +0 -26
- package/types/components/DatePicker/hooks/useKeyboardNavigation.d.ts +0 -13
- package/types/components/DatePicker/hooks/useKeyboardNavigation.d.ts.map +0 -1
package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { ComponentProps, useRef, useState } from 'react';
|
1
|
+
import React, { ComponentProps, useEffect, 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,3 +262,79 @@ 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
|
+
<DatePicker
|
288
|
+
defaultDate={defVal}
|
289
|
+
isOpen={isOpen}
|
290
|
+
size={size}
|
291
|
+
valueError={valueError}
|
292
|
+
valueSuccess={valueSuccess}
|
293
|
+
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
294
|
+
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
295
|
+
onBlur={onBlur}
|
296
|
+
onFocus={onFocus}
|
297
|
+
onToggle={(is) => setIsOpen(is)}
|
298
|
+
onChangeValue={(e, currentValue) => {
|
299
|
+
onChangeValue(e, currentValue);
|
300
|
+
}}
|
301
|
+
onCommitDate={() => setIsOpen(false)}
|
302
|
+
{...rest}
|
303
|
+
/>
|
304
|
+
);
|
305
|
+
};
|
306
|
+
|
307
|
+
export const Deferred: StoryObj<StoryPropsDefault> = {
|
308
|
+
argTypes: {
|
309
|
+
defaultDate: {
|
310
|
+
control: {
|
311
|
+
type: 'date',
|
312
|
+
},
|
313
|
+
},
|
314
|
+
labelPlacement: {
|
315
|
+
options: labelPlacements,
|
316
|
+
control: {
|
317
|
+
type: 'inline-radio',
|
318
|
+
},
|
319
|
+
},
|
320
|
+
},
|
321
|
+
args: {
|
322
|
+
label: 'Лейбл',
|
323
|
+
leftHelper: 'Подсказка к полю',
|
324
|
+
placeholder: '30.05.2024',
|
325
|
+
size: 'l',
|
326
|
+
view: 'default',
|
327
|
+
labelPlacement: 'outer',
|
328
|
+
min: new Date(2024, 1, 1),
|
329
|
+
max: new Date(2024, 12, 29),
|
330
|
+
maskWithFormat: false,
|
331
|
+
disabled: false,
|
332
|
+
readOnly: false,
|
333
|
+
textBefore: '',
|
334
|
+
enableContentLeft: true,
|
335
|
+
enableContentRight: true,
|
336
|
+
valueError: false,
|
337
|
+
valueSuccess: false,
|
338
|
+
},
|
339
|
+
render: (args) => <StoryDeferred {...args} />,
|
340
|
+
};
|
@@ -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
|
-
})(["", ""], baseCalendarTokens);
|
12
|
+
})(["width:var(", ");", ""], tokens.width, baseCalendarTokens);
|
@@ -13,7 +13,6 @@ 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';
|
17
16
|
import { base as sizeCSS } from './variations/_size/base';
|
18
17
|
import { base as viewCSS } from './variations/_view/base';
|
19
18
|
import { base as disabledCSS } from './variations/_disabled/base';
|
@@ -173,11 +172,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
173
172
|
}
|
174
173
|
setIsInnerOpen(isCalendarOpen);
|
175
174
|
};
|
176
|
-
var _useKeyNavigation = useKeyNavigation({
|
177
|
-
isCalendarOpen: isInnerOpen,
|
178
|
-
onToggle: handleToggle
|
179
|
-
}),
|
180
|
-
onKeyDown = _useKeyNavigation.onKeyDown;
|
181
175
|
var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
|
182
176
|
ref: rangeRef,
|
183
177
|
dividerIcon: dividerIcon,
|
@@ -221,8 +215,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
221
215
|
onFocusFirstTextfield: onFocusFirstTextfield,
|
222
216
|
onFocusSecondTextfield: onFocusSecondTextfield,
|
223
217
|
onBlurFirstTextfield: onBlurFirstTextfield,
|
224
|
-
onBlurSecondTextfield: onBlurSecondTextfield
|
225
|
-
onKeyDown: onKeyDown
|
218
|
+
onBlurSecondTextfield: onBlurSecondTextfield
|
226
219
|
}));
|
227
220
|
useEffect(function () {
|
228
221
|
var _rangeRef$current5, _rangeRef$current6;
|
@@ -230,10 +223,13 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
230
223
|
setSecondInputRef((_rangeRef$current6 = rangeRef.current) === null || _rangeRef$current6 === void 0 ? void 0 : _rangeRef$current6.secondTextField());
|
231
224
|
}, [rangeRef.current]);
|
232
225
|
useEffect(function () {
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
226
|
+
setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format));
|
227
|
+
setInputFirstValue(formatInputValue(defaultFirstDate, format));
|
228
|
+
}, [defaultFirstDate]);
|
229
|
+
useEffect(function () {
|
230
|
+
setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format));
|
231
|
+
setInputSecondValue(formatInputValue(defaultSecondDate, format));
|
232
|
+
}, [defaultSecondDate]);
|
237
233
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
238
234
|
ref: rootRef,
|
239
235
|
view: view,
|
@@ -244,7 +240,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
244
240
|
}, rest), label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(RangeDatePopover, {
|
245
241
|
calendarValue: [calendarFirstValue, calendarSecondValue],
|
246
242
|
target: RangeComponent,
|
247
|
-
isOpen: isInnerOpen,
|
243
|
+
isOpen: isOpen || isInnerOpen,
|
248
244
|
includeEdgeDates: includeEdgeDates,
|
249
245
|
eventList: eventList,
|
250
246
|
disabledList: disabledList,
|
@@ -14,7 +14,6 @@ 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';
|
18
17
|
import { base as sizeCSS } from './variations/_size/base';
|
19
18
|
import { base as viewCSS } from './variations/_view/base';
|
20
19
|
import { base as disabledCSS } from './variations/_disabled/base';
|
@@ -111,11 +110,6 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
111
110
|
handleToggle = _useDatePicker.handleToggle,
|
112
111
|
handleChangeValue = _useDatePicker.handleChangeValue,
|
113
112
|
handleCommitDate = _useDatePicker.handleCommitDate;
|
114
|
-
var _useKeyNavigation = useKeyNavigation({
|
115
|
-
isCalendarOpen: isInnerOpen,
|
116
|
-
onToggle: handleToggle
|
117
|
-
}),
|
118
|
-
onKeyDown = _useKeyNavigation.onKeyDown;
|
119
113
|
var DatePickerInput = /*#__PURE__*/React.createElement(StyledInput, _extends({
|
120
114
|
ref: inputRef,
|
121
115
|
className: cx(datePickerErrorClass, datePickerSuccessClass),
|
@@ -133,17 +127,15 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
133
127
|
return handleCommitDate(date, true, false);
|
134
128
|
},
|
135
129
|
onFocus: onFocus,
|
136
|
-
onBlur: onBlur
|
137
|
-
onKeyDown: onKeyDown
|
130
|
+
onBlur: onBlur
|
138
131
|
}, innerLabelPlacement && {
|
139
132
|
label: label,
|
140
133
|
labelPlacement: labelPlacement
|
141
134
|
}));
|
142
135
|
useEffect(function () {
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
}, [isOpen]);
|
136
|
+
setCalendarValue(formatCalendarValue(defaultDate, format));
|
137
|
+
setInputValue(formatInputValue(defaultDate, format));
|
138
|
+
}, [defaultDate]);
|
147
139
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
148
140
|
view: view,
|
149
141
|
size: size,
|
@@ -152,7 +144,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
152
144
|
readOnly: !disabled && readOnly,
|
153
145
|
ref: ref
|
154
146
|
}, rest), !innerLabelPlacement && label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(StyledPopover, {
|
155
|
-
isOpen: isInnerOpen,
|
147
|
+
isOpen: isOpen || isInnerOpen,
|
156
148
|
usePortal: false,
|
157
149
|
onToggle: handleToggle,
|
158
150
|
offset: offset,
|
@@ -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 { popoverConfig } from '../../Popover';
|
6
|
+
import { popoverClasses, 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
|
+
})(["width:100%;", ":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;.", ",.", "{width:inherit;}"], /*#__PURE__*/String(popoverClasses.wrapper), /*#__PURE__*/String(popoverClasses.target));
|
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(["
|
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);
|
@@ -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-primary);", ":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, useRef, useState } from 'react';
|
1
|
+
import React, { ComponentProps, useEffect, 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,3 +263,79 @@ 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
|
+
<DatePicker
|
289
|
+
defaultDate={defVal}
|
290
|
+
isOpen={isOpen}
|
291
|
+
size={size}
|
292
|
+
valueError={valueError}
|
293
|
+
valueSuccess={valueSuccess}
|
294
|
+
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
295
|
+
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
296
|
+
onBlur={onBlur}
|
297
|
+
onFocus={onFocus}
|
298
|
+
onToggle={(is) => setIsOpen(is)}
|
299
|
+
onChangeValue={(e, currentValue) => {
|
300
|
+
onChangeValue(e, currentValue);
|
301
|
+
}}
|
302
|
+
onCommitDate={() => setIsOpen(false)}
|
303
|
+
{...rest}
|
304
|
+
/>
|
305
|
+
);
|
306
|
+
};
|
307
|
+
|
308
|
+
export const Deferred: StoryObj<StoryPropsDefault> = {
|
309
|
+
argTypes: {
|
310
|
+
defaultDate: {
|
311
|
+
control: {
|
312
|
+
type: 'date',
|
313
|
+
},
|
314
|
+
},
|
315
|
+
labelPlacement: {
|
316
|
+
options: labelPlacements,
|
317
|
+
control: {
|
318
|
+
type: 'inline-radio',
|
319
|
+
},
|
320
|
+
},
|
321
|
+
},
|
322
|
+
args: {
|
323
|
+
label: 'Лейбл',
|
324
|
+
leftHelper: 'Подсказка к полю',
|
325
|
+
placeholder: '30.05.2024',
|
326
|
+
size: 'l',
|
327
|
+
view: 'default',
|
328
|
+
labelPlacement: 'outer',
|
329
|
+
min: new Date(2024, 1, 1),
|
330
|
+
max: new Date(2024, 12, 29),
|
331
|
+
maskWithFormat: false,
|
332
|
+
disabled: false,
|
333
|
+
readOnly: false,
|
334
|
+
textBefore: '',
|
335
|
+
enableContentLeft: true,
|
336
|
+
enableContentRight: true,
|
337
|
+
valueError: false,
|
338
|
+
valueSuccess: false,
|
339
|
+
},
|
340
|
+
render: (args) => <StoryDeferred {...args} />,
|
341
|
+
};
|
package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { ComponentProps, useRef, useState } from 'react';
|
1
|
+
import React, { ComponentProps, useEffect, 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,3 +262,79 @@ 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
|
+
<DatePicker
|
288
|
+
defaultDate={defVal}
|
289
|
+
isOpen={isOpen}
|
290
|
+
size={size}
|
291
|
+
valueError={valueError}
|
292
|
+
valueSuccess={valueSuccess}
|
293
|
+
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
294
|
+
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
295
|
+
onBlur={onBlur}
|
296
|
+
onFocus={onFocus}
|
297
|
+
onToggle={(is) => setIsOpen(is)}
|
298
|
+
onChangeValue={(e, currentValue) => {
|
299
|
+
onChangeValue(e, currentValue);
|
300
|
+
}}
|
301
|
+
onCommitDate={() => setIsOpen(false)}
|
302
|
+
{...rest}
|
303
|
+
/>
|
304
|
+
);
|
305
|
+
};
|
306
|
+
|
307
|
+
export const Deferred: StoryObj<StoryPropsDefault> = {
|
308
|
+
argTypes: {
|
309
|
+
defaultDate: {
|
310
|
+
control: {
|
311
|
+
type: 'date',
|
312
|
+
},
|
313
|
+
},
|
314
|
+
labelPlacement: {
|
315
|
+
options: labelPlacements,
|
316
|
+
control: {
|
317
|
+
type: 'inline-radio',
|
318
|
+
},
|
319
|
+
},
|
320
|
+
},
|
321
|
+
args: {
|
322
|
+
label: 'Лейбл',
|
323
|
+
leftHelper: 'Подсказка к полю',
|
324
|
+
placeholder: '30.05.2024',
|
325
|
+
size: 'l',
|
326
|
+
view: 'default',
|
327
|
+
labelPlacement: 'outer',
|
328
|
+
min: new Date(2024, 1, 1),
|
329
|
+
max: new Date(2024, 12, 29),
|
330
|
+
maskWithFormat: false,
|
331
|
+
disabled: false,
|
332
|
+
readOnly: false,
|
333
|
+
textBefore: '',
|
334
|
+
enableContentLeft: true,
|
335
|
+
enableContentRight: true,
|
336
|
+
valueError: false,
|
337
|
+
valueSuccess: false,
|
338
|
+
},
|
339
|
+
render: (args) => <StoryDeferred {...args} />,
|
340
|
+
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"DatePickerBase.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerBase.styles.ts"],"names":[],"mappings":";AAUA,eAAO,MAAM,kBAAkB,QAkG9B,CAAC;AAGF,eAAO,MAAM,cAAc,
|
1
|
+
{"version":3,"file":"DatePickerBase.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerBase.styles.ts"],"names":[],"mappings":";AAUA,eAAO,MAAM,kBAAkB,QAkG9B,CAAC;AAGF,eAAO,MAAM,cAAc,qTAG1B,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RangeDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;
|
1
|
+
{"version":3,"file":"RangeDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAQ9D,eAAO,MAAM,mBAAmB,SACtB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+EA8QvG,CAAC;AAEN,eAAO,MAAM,qBAAqB;;;mBAhRxB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyS3G,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SingleDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAEpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;
|
1
|
+
{"version":3,"file":"SingleDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAEpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAOlD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAO1D,eAAO,MAAM,cAAc,SACjB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC,gXA+JlG,CAAC;AAEN,eAAO,MAAM,gBAAgB;;;mBAjKnB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;CA0LtG,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SingleDate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.styles.ts"],"names":[],"mappings":";AAcA,eAAO,MAAM,aAAa,4TAAoB,CAAC;AAG/C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
1
|
+
{"version":3,"file":"SingleDate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.styles.ts"],"names":[],"mappings":";AAcA,eAAO,MAAM,aAAa,4TAAoB,CAAC;AAG/C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4HAuEvB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAMhB,CAAC;AAEF,eAAO,MAAM,WAAW,8KAAiB,CAAC;AAE1C,eAAO,MAAM,UAAU,qKAAe,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/SingleDate/variations/_size/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,
|
1
|
+
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/SingleDate/variations/_size/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAsBhB,CAAC"}
|
@@ -1 +0,0 @@
|
|
1
|
-
.s1ywkx25{padding-top:var(--plasma-date-picker-calendar-padding-top);box-shadow:var(--plasma-date-picker-calendar-shadow);border-radius:var(--plasma-date-picker-calendar-border-radius);--plasma-calendar-background:var(--plasma-date-picker-calendar__background-color);--plasma-calendar-selected-item-background:var(--plasma-date-picker-calendar__selected-item-background);--plasma-calendar-selected-item-color:var(--plasma-date-picker-calendar__selected-item-color);--plasma-calendar-selectable-item-bg-hover:var(--plasma-date-picker-calendar__selectable-item-background-hover);--plasma-calendar-current-item-border-color:var(--plasma-date-picker-calendar__current-item-border-color);--plasma-calendar-current-item-bg-hover:var(--plasma-date-picker-calendar__current-item-background-hover);--plasma-calendar-current-item-color-hover:var(--plasma-date-picker-calendar__current-item-color-hover);--plasma-calendar-current-item-child-bg-hover:var(--plasma-date-picker-calendar__current-item-child-background-hover);--plasma-calendar-active-item-bg:var(--plasma-date-picker-calendar__active-item-background);--plasma-calendar-active-item-color:var(--plasma-date-picker-calendar__active-item-color);--plasma-calendar-hovered-item-bg:var(--plasma-date-picker-calendar__hovered-item-background);--plasma-calendar-hovered-item-color:var(--plasma-date-picker-calendar__hovered-item-color);--plasma-calendar-range-background:var(--plasma-date-picker-calendar__range-background);--plasma-calendar-outline-focus-color:var(--plasma-date-picker-calendar__outline-focus-color);--plasma-calendar-content-primary-color:var(--plasma-date-picker-calendar__content-primary-color);--plasma-calendar-content-secondary-color:var(--plasma-date-picker-calendar__content-secondary-color);--plasma-calendar-icon-button-color:var(--plasma-date-picker-icon-button__color);--plasma-calendar-icon-button-background:var(--plasma-date-picker-icon-button__background-color);--plasma-calendar-icon-button-color-hover:var(--plasma-date-picker-icon-button__color-hover);--plasma-calendar-icon-button-background-hover:var(--plasma-date-picker-icon-button__background-color-hover);--plasma-calendar-icon-button-color-active:var(--plasma-date-picker-icon-button__color-active);--plasma-calendar-icon-button-background-active:var(--plasma-date-picker-icon-button__background-color-active);--plasma-calendar-width:var(--plasma-date-picker-calendar-width);--plasma-calendar-height:var(--plasma-date-picker-calendar-height);--plasma-calendar-years-padding:var(--plasma-date-picker-calendar__years-padding);--plasma-calendar-year-item-border-radius:var(--plasma-date-picker-calendar__year-item-border-radius);--plasma-calendar-year-item-width:var(--plasma-date-picker-calendar__year-item-width);--plasma-calendar-year-item-height:var(--plasma-date-picker-calendar__year-item-height);--plasma-calendar-year-font-family:var(--plasma-date-picker-calendar__year-font-family);--plasma-calendar-year-font-size:var(--plasma-date-picker-calendar__year-font-size);--plasma-calendar-year-font-style:var(--plasma-date-picker-calendar__year-font-style);--plasma-calendar-year-font-letter-spacing:var(--plasma-date-picker-calendar__year-letter-spacing);--plasma-calendar-year-line-height:var(--plasma-date-picker-calendar__year-line-height);--plasma-calendar-year-font-weight:var(--plasma-date-picker-calendar__year-font-weight);--plasma-calendar-year-selected-font-weight:var(--plasma-date-picker-calendar__year-selected-font-weight);--plasma-calendar-months-padding:var(--plasma-date-picker-calendar__months-padding);--plasma-calendar-month-item-border-radius:var(--plasma-date-picker-calendar__month-item-border-radius);--plasma-calendar-month-item-width:var(--plasma-date-picker-calendar__month-item-width);--plasma-calendar-month-item-height:var(--plasma-date-picker-calendar__month-item-height);--plasma-calendar-month-font-family:var(--plasma-date-picker-calendar__month-font-family);--plasma-calendar-month-font-size:var(--plasma-date-picker-calendar__month-font-size);--plasma-calendar-month-font-style:var(--plasma-date-picker-calendar__month-font-style);--plasma-calendar-month-font-letter-spacing:var(--plasma-date-picker-calendar__month-letter-spacing);--plasma-calendar-month-line-height:var(--plasma-date-picker-calendar__month-line-height);--plasma-calendar-month-font-weight:var(--plasma-date-picker-calendar__month-font-weight);--plasma-calendar-month-selected-font-weight:var(--plasma-date-picker-calendar__month-selected-font-weight);--plasma-calendar-quarters-padding:var(--plasma-date-picker-calendar__quarters-padding);--plasma-calendar-quarter-item-border-radius:var(--plasma-date-picker-calendar__quarter-item-border-radius);--plasma-calendar-quarter-item-width:var(--plasma-date-picker-calendar__quarter-item-width);--plasma-calendar-quarter-item-height:var(--plasma-date-picker-calendar__quarter-item-height);--plasma-calendar-quarter-font-family:var(--plasma-date-picker-calendar__quarter-font-family);--plasma-calendar-quarter-font-size:var(--plasma-date-picker-calendar__quarter-font-size);--plasma-calendar-quarter-font-style:var(--plasma-date-picker-calendar__quarter-font-style);--plasma-calendar-quarter-font-letter-spacing:var(--plasma-date-picker-calendar__quarter-letter-spacing);--plasma-calendar-quarter-line-height:var(--plasma-date-picker-calendar__quarter-line-height);--plasma-calendar-quarter-font-weight:var(--plasma-date-picker-calendar__quarter-font-weight);--plasma-calendar-quarter-selected-font-weight:var(--plasma-date-picker-calendar__quarter-selected-font-weight);--plasma-calendar-days-padding:var(--plasma-date-picker-calendar__days-padding);--plasma-calendar-day-item-border-radius:var(--plasma-date-picker-calendar__day-item-border-radius);--plasma-calendar-day-item-width:var(--plasma-date-picker-calendar__day-item-width);--plasma-calendar-day-item-height:var(--plasma-date-picker-calendar__day-item-height);--plasma-calendar-day-font-family:var(--plasma-date-picker-calendar__day-font-family);--plasma-calendar-day-font-size:var(--plasma-date-picker-calendar__day-font-size);--plasma-calendar-day-font-style:var(--plasma-date-picker-calendar__day-font-style);--plasma-calendar-day-font-letter-spacing:var(--plasma-date-picker-calendar__day-letter-spacing);--plasma-calendar-day-line-height:var(--plasma-date-picker-calendar__day-line-height);--plasma-calendar-day-font-weight:var(--plasma-date-picker-calendar__day-font-weight);--plasma-calendar-day-selected-font-weight:var(--plasma-date-picker-calendar__day-selected-font-weight);--plasma-calendar-header-wrapper-padding:var(--plasma-date-picker-calendar__header-wrapper-padding);--plasma-calendar-arrow-container-gap:var(--plasma-date-picker-calendar__header-arrow-gap);--plasma-calendar-arrow-container-padding:var(--plasma-date-picker-calendar__header-arrow-padding);--plasma-calendar-header-padding:var(--plasma-date-picker-calendar__header-padding);--plasma-calendar-header-date-gap:var(--plasma-date-picker-calendar__header-date-gap);--plasma-calendar-header-font-family:var(--plasma-date-picker-calendar__header-font-family);--plasma-calendar-header-font-size:var(--plasma-date-picker-calendar__header-font-size);--plasma-calendar-header-font-style:var(--plasma-date-picker-calendar__header-font-style);--plasma-calendar-header-font-letter-spacing:var(--plasma-date-picker-calendar__header-letter-spacing);--plasma-calendar-header-line-height:var(--plasma-date-picker-calendar__header-line-height);--plasma-calendar-header-font-weight:var(--plasma-date-picker-calendar__header-font-weight);--plasma-calendar-header-font-weight-bold:var(--plasma-date-picker-calendar__header-font-weight-bold);--plasma-calendar-icon-button-height:var(--plasma-date-picker-icon-button__height);--plasma-calendar-icon-button-width:var(--plasma-date-picker-icon-button__width);--plasma-calendar-icon-button-padding:var(--plasma-date-picker-icon-button__padding);--plasma-calendar-icon-button-radius:var(--plasma-date-picker-icon-button__radius);--plasma-calendar-icon-button-focus-color:var(--plasma-date-picker-icon-button__focus-color);}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
|
2
|
-
.s15omatb{--plasma-textfield-color:var(--plasma-date-picker-textfield-color);--plasma-textfield__placeholder-color:var(--plasma-date-picker-textfield-placeholder-color);--plasma-textfield__caret-color:var(--plasma-date-picker-textfield-caret-color);--plasma-textfield-focus-color:var(--plasma-date-picker-textfield-focus-color);--plasma-textfield-bg-color:var(--plasma-date-picker-textfield-background-color);--plasma-textfield-bg-color-hover:var(--plasma-date-picker-textfield-background-color-hover);--plasma-textfield-bg-color-focus:var(--plasma-date-picker-textfield-background-color-focus);--plasma-textfield-border-color:var(--plasma-date-picker_range-border-color);--plasma-textfield-border-color-hover:var(--plasma-date-picker_range-border-color-hover);--plasma-textfield-border-color-focus:var(--plasma-date-picker_range-border-color-focus);--plasma-textfield-color-readonly:var(--plasma-date-picker-textfield-color-readonly);--plasma-textfield-bg-color-readonly:var(--plasma-date-picker-textfield-background-color-readonly);--plasma-textfield-border-color-readonly:var(--plasma-date-picker-textfield-border-color-readonly);--plasma-textfield__placeholder-color-readonly:var(--plasma-date-picker-textfield-placeholder-color-readonly);--plasma-textfield-height:var(--plasma-date-picker-textfield-height);--plasma-textfield-border-width:var(--plasma-date-picker-textfield-border-width);--plasma-textfield-border-radius:var(--plasma-date-picker-textfield-border-radius);--plasma-textfield-padding:var(--plasma-date-picker-textfield-padding);--plasma-textfield-placement_inner__label-padding:var(--plasma-date-picker-placement_inner__label-padding);--plasma-textfield-placement_inner__content-padding:var(--plasma-date-picker-placement_inner__content-padding);--plasma-textfield-placement_inner__label-font-family:var(--plasma-date-picker-placement_inner__label-font-family);--plasma-textfield-placement_inner__label-font-size:var(--plasma-date-picker-placement_inner__label-font-size);--plasma-textfield-placement_inner__label-font-style:var(--plasma-date-picker-placement_inner__label-font-style);--plasma-textfield-placement_inner__label-font-weight:var(--plasma-date-picker-placement_inner__label-font-weight);--plasma-textfield-placement_inner__label-letter-spacing:var(--plasma-date-picker-placement_inner__label-letter-spacing);--plasma-textfield-placement_inner__label-line-height:var(--plasma-date-picker-placement_inner__label-line-height);--plasma-textfield__left-content-margin:var(--plasma-date-picker-textfield__left-content-margin);--plasma-textfield__right-content-margin:var(--plasma-date-picker-textfield__right-content-margin);--plasma-textfield-font-family:var(--plasma-date-picker-textfield-font-family);--plasma-textfield-font-size:var(--plasma-date-picker-textfield-font-size);--plasma-textfield-font-style:var(--plasma-date-picker-textfield-font-style);--plasma-textfield-font-weight:var(--plasma-date-picker-textfield-font-weight);--plasma-textfield-letter-spacing:var(--plasma-date-picker-textfield-letter-spacing);--plasma-textfield-line-height:var(--plasma-date-picker-textfield-line-height);--plasma-textfield-disabled-opacity:var(--plasma-date-picker-disabled-opacity);--plasma-textfield__before-text-color:var(--plasma-date-picker-textfield__before-text-color);--plasma-textfield__after-text-color:var(--plasma-date-picker-textfield__after-text-color);--plasma-textfield__before-text-margin:var(--plasma-date-picker-textfield__before-text-margin);--plasma-textfield__after-text-margin:var(--plasma-date-picker-textfield__after-text-margin);}.s15omatb.date-picker-error{--plasma-textfield-bg-color:var(--plasma-date-picker-textfield-background-color-error);--plasma-textfield-bg-color-hover:var(--plasma-date-picker-textfield-background-color-error-hover);--plasma-textfield-bg-color-focus:var(--plasma-date-picker-textfield-background-color-error-focus);--plasma-textfield-border-color:var(--plasma-date-picker-textfield-border-color-error);--plasma-textfield-border-color-hover:var(--plasma-date-picker-textfield-border-color-error-hover);--plasma-textfield-border-color-focus:var(--plasma-date-picker-textfield-border-color-error-focus);}.s15omatb.date-picker-success{--plasma-textfield-bg-color:var(--plasma-date-picker-textfield-background-color-success);--plasma-textfield-bg-color-hover:var(--plasma-date-picker-textfield-background-color-success-hover);--plasma-textfield-bg-color-focus:var(--plasma-date-picker-textfield-background-color-success-focus);--plasma-textfield-border-color:var(--plasma-date-picker-textfield-border-color-success);--plasma-textfield-border-color-hover:var(--plasma-date-picker-textfield-border-color-success-hover);--plasma-textfield-border-color-focus:var(--plasma-date-picker-textfield-border-color-success-focus);}
|
3
|
-
.boba7w3{display:inline-block;}
|
4
|
-
|
5
|
-
|
@@ -1 +0,0 @@
|
|
1
|
-
.bjvjzuw{width:var(--plasma-date-picker-width);}.bjvjzuw .svfqi8{margin:var(--plasma-date-picker__label-offset);font-family:var(--plasma-date-picker__label-font-family);font-size:var(--plasma-date-picker__label-font-size);font-style:var(--plasma-date-picker__label-font-style);font-weight:var(--plasma-date-picker__label-font-weight);-webkit-letter-spacing:var(--plasma-date-picker__label-letter-spacing);-moz-letter-spacing:var(--plasma-date-picker__label-letter-spacing);-ms-letter-spacing:var(--plasma-date-picker__label-letter-spacing);letter-spacing:var(--plasma-date-picker__label-letter-spacing);line-height:var(--plasma-date-picker__label-line-height);}.bjvjzuw .l5dd1qs{margin:var(--plasma-date-picker__left-helper-offset);font-family:var(--plasma-date-picker__left-helper-font-family);font-size:var(--plasma-date-picker__left-helper-font-size);font-style:var(--plasma-date-picker__left-helper-font-style);font-weight:var(--plasma-date-picker__left-helper-font-weight);-webkit-letter-spacing:var(--plasma-date-picker__left-helper-letter-spacing);-moz-letter-spacing:var(--plasma-date-picker__left-helper-letter-spacing);-ms-letter-spacing:var(--plasma-date-picker__left-helper-letter-spacing);letter-spacing:var(--plasma-date-picker__left-helper-letter-spacing);line-height:var(--plasma-date-picker__left-helper-line-height);}
|
@@ -1,30 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
4
|
-
|
5
|
-
var keys = {
|
6
|
-
Space: 'Space'
|
7
|
-
};
|
8
|
-
var useKeyNavigation = function useKeyNavigation(_ref) {
|
9
|
-
var isCalendarOpen = _ref.isCalendarOpen,
|
10
|
-
onToggle = _ref.onToggle;
|
11
|
-
var onKeyDown = function onKeyDown(event) {
|
12
|
-
switch (event.code) {
|
13
|
-
case keys.Space:
|
14
|
-
{
|
15
|
-
if (!isCalendarOpen) {
|
16
|
-
event.preventDefault();
|
17
|
-
onToggle(true, event);
|
18
|
-
}
|
19
|
-
break;
|
20
|
-
}
|
21
|
-
}
|
22
|
-
};
|
23
|
-
return {
|
24
|
-
onKeyDown: onKeyDown
|
25
|
-
};
|
26
|
-
};
|
27
|
-
|
28
|
-
exports.keys = keys;
|
29
|
-
exports.useKeyNavigation = useKeyNavigation;
|
30
|
-
//# sourceMappingURL=useKeyboardNavigation.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../../src/components/DatePicker/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import type { ChangeEvent, KeyboardEvent, SyntheticEvent } from 'react';\n\ninterface Props {\n isCalendarOpen: boolean;\n onToggle: (isOpen: boolean, event: SyntheticEvent | Event) => void;\n}\n\nexport const keys = {\n Space: 'Space',\n};\n\nexport const useKeyNavigation = ({ isCalendarOpen, onToggle }: Props) => {\n const onKeyDown = (event: ChangeEvent<HTMLInputElement> & KeyboardEvent<HTMLInputElement>) => {\n switch (event.code) {\n case keys.Space: {\n if (!isCalendarOpen) {\n event.preventDefault();\n onToggle(true, event);\n }\n break;\n }\n\n default: {\n break;\n }\n }\n };\n\n return { onKeyDown };\n};\n"],"names":["keys","Space","useKeyNavigation","_ref","isCalendarOpen","onToggle","onKeyDown","event","code","preventDefault"],"mappings":";;;;AAOO,IAAMA,IAAI,GAAG;AAChBC,EAAAA,KAAK,EAAE,OAAA;AACX,EAAC;IAEYC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAA4C;AAAA,EAAA,IAAtCC,cAAc,GAAAD,IAAA,CAAdC,cAAc;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ,CAAA;AACvD,EAAA,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,KAAsE,EAAK;IAC1F,QAAQA,KAAK,CAACC,IAAI;MACd,KAAKR,IAAI,CAACC,KAAK;AAAE,QAAA;UACb,IAAI,CAACG,cAAc,EAAE;YACjBG,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBJ,YAAAA,QAAQ,CAAC,IAAI,EAAEE,KAAK,CAAC,CAAA;AACzB,WAAA;AACA,UAAA,MAAA;AACJ,SAAA;AAKJ,KAAA;GACH,CAAA;EAED,OAAO;AAAED,IAAAA,SAAS,EAATA,SAAAA;GAAW,CAAA;AACxB;;;;;"}
|
@@ -1,32 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.useKeyNavigation = exports.keys = void 0;
|
7
|
-
var keys = exports.keys = {
|
8
|
-
Space: 'Space'
|
9
|
-
};
|
10
|
-
var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref) {
|
11
|
-
var isCalendarOpen = _ref.isCalendarOpen,
|
12
|
-
onToggle = _ref.onToggle;
|
13
|
-
var onKeyDown = function onKeyDown(event) {
|
14
|
-
switch (event.code) {
|
15
|
-
case keys.Space:
|
16
|
-
{
|
17
|
-
if (!isCalendarOpen) {
|
18
|
-
event.preventDefault();
|
19
|
-
onToggle(true, event);
|
20
|
-
}
|
21
|
-
break;
|
22
|
-
}
|
23
|
-
default:
|
24
|
-
{
|
25
|
-
break;
|
26
|
-
}
|
27
|
-
}
|
28
|
-
};
|
29
|
-
return {
|
30
|
-
onKeyDown: onKeyDown
|
31
|
-
};
|
32
|
-
};
|
@@ -1,26 +0,0 @@
|
|
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
|
-
};
|