@salutejs/plasma-new-hope 0.81.1-canary.1209.9113456949.0 → 0.82.0-dev.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Calendar/Calendar.types.js.map +1 -1
- package/cjs/components/Calendar/CalendarBase/CalendarBase.js +3 -1
- package/cjs/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +4 -1
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/cjs/components/Calendar/hooks/useDays.js +6 -3
- package/cjs/components/Calendar/hooks/useDays.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -1
- package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js.map +1 -1
- package/es/components/Calendar/Calendar.types.js.map +1 -1
- package/es/components/Calendar/CalendarBase/CalendarBase.js +3 -1
- package/es/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js +4 -1
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/es/components/Calendar/hooks/useDays.js +6 -3
- package/es/components/Calendar/hooks/useDays.js.map +1 -1
- package/es/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -1
- package/es/components/Calendar/ui/CalendarDays/CalendarDays.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Calendar/CalendarBase/CalendarBase.js +3 -1
- package/styled-components/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +4 -1
- package/styled-components/cjs/components/Calendar/hooks/useDays.js +6 -3
- package/styled-components/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +18 -6
- package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +4 -4
- package/styled-components/cjs/examples/plasma_web/components/Calendar/Calendar.stories.tsx +18 -6
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +4 -4
- package/styled-components/cjs/examples/sds_engineer/components/Calendar/Calendar.stories.tsx +18 -6
- package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js +3 -1
- package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js +4 -1
- package/styled-components/es/components/Calendar/hooks/useDays.js +6 -3
- package/styled-components/es/components/Calendar/ui/CalendarDays/CalendarDays.js +2 -1
- package/styled-components/es/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +18 -6
- package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +4 -4
- package/styled-components/es/examples/plasma_web/components/Calendar/Calendar.stories.tsx +18 -6
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.config.js +4 -4
- package/styled-components/es/examples/sds_engineer/components/Calendar/Calendar.stories.tsx +18 -6
- package/types/components/Calendar/Calendar.types.d.ts +4 -0
- package/types/components/Calendar/Calendar.types.d.ts.map +1 -1
- package/types/components/Calendar/CalendarBase/CalendarBase.d.ts.map +1 -1
- package/types/components/Calendar/CalendarDouble/CalendarDouble.d.ts.map +1 -1
- package/types/components/Calendar/hooks/useDays.d.ts +1 -1
- package/types/components/Calendar/hooks/useDays.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarDays/CalendarDays.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarDays/CalendarDays.types.d.ts +1 -0
- package/types/components/Calendar/ui/CalendarDays/CalendarDays.types.d.ts.map +1 -1
|
@@ -79,7 +79,7 @@ const baseEvents = [
|
|
|
79
79
|
];
|
|
80
80
|
|
|
81
81
|
const StoryDefault = (args: CalendarProps) => {
|
|
82
|
-
const { isRange, isDouble, min, max, date } = args;
|
|
82
|
+
const { isRange, isDouble, min, max, date, includeEdgeDates } = args;
|
|
83
83
|
const [value, setValue] = useState(new Date(2023, 10, 16));
|
|
84
84
|
const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
|
|
85
85
|
|
|
@@ -110,6 +110,7 @@ const StoryDefault = (args: CalendarProps) => {
|
|
|
110
110
|
disabledList={disabledDays}
|
|
111
111
|
min={min}
|
|
112
112
|
max={max}
|
|
113
|
+
includeEdgeDates={includeEdgeDates}
|
|
113
114
|
onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
|
|
114
115
|
/>
|
|
115
116
|
);
|
|
@@ -121,12 +122,13 @@ export const Default: StoryObj<CalendarProps> = {
|
|
|
121
122
|
max: new Date(2023, 11, 24),
|
|
122
123
|
isDouble: false,
|
|
123
124
|
isRange: false,
|
|
125
|
+
includeEdgeDates: false,
|
|
124
126
|
},
|
|
125
127
|
render: (args) => <StoryDefault {...args} />,
|
|
126
128
|
};
|
|
127
129
|
|
|
128
130
|
const StoryBase = (args: CalendarBaseProps) => {
|
|
129
|
-
const { min, max, type } = args;
|
|
131
|
+
const { min, max, type, includeEdgeDates } = args;
|
|
130
132
|
const [value, setValue] = useState(new Date(2023, 10, 16));
|
|
131
133
|
|
|
132
134
|
const handleOnChange = useCallback((newValue: Date) => {
|
|
@@ -150,6 +152,7 @@ const StoryBase = (args: CalendarBaseProps) => {
|
|
|
150
152
|
disabledList={disabledDays}
|
|
151
153
|
min={min}
|
|
152
154
|
max={max}
|
|
155
|
+
includeEdgeDates={includeEdgeDates}
|
|
153
156
|
type={type}
|
|
154
157
|
onChangeValue={handleOnChange}
|
|
155
158
|
/>
|
|
@@ -168,13 +171,14 @@ export const Base: StoryObj<CalendarBaseProps> = {
|
|
|
168
171
|
args: {
|
|
169
172
|
min: new Date(2023, 10, 1),
|
|
170
173
|
max: new Date(2023, 11, 24),
|
|
174
|
+
includeEdgeDates: false,
|
|
171
175
|
type: 'Days',
|
|
172
176
|
},
|
|
173
177
|
render: (args) => <StoryBase {...args} />,
|
|
174
178
|
};
|
|
175
179
|
|
|
176
180
|
const StoryDouble = (args: CalendarDoubleProps) => {
|
|
177
|
-
const { min, max } = args;
|
|
181
|
+
const { min, max, includeEdgeDates } = args;
|
|
178
182
|
const [value, setValue] = useState(new Date(2023, 10, 16));
|
|
179
183
|
const handleOnChange = useCallback((newValue: Date) => {
|
|
180
184
|
setValue(newValue);
|
|
@@ -197,6 +201,7 @@ const StoryDouble = (args: CalendarDoubleProps) => {
|
|
|
197
201
|
disabledList={disabledDays}
|
|
198
202
|
min={min}
|
|
199
203
|
max={max}
|
|
204
|
+
includeEdgeDates={includeEdgeDates}
|
|
200
205
|
onChangeValue={handleOnChange}
|
|
201
206
|
/>
|
|
202
207
|
);
|
|
@@ -206,12 +211,13 @@ export const Double: StoryObj<CalendarDoubleProps> = {
|
|
|
206
211
|
args: {
|
|
207
212
|
min: new Date(2023, 10, 1),
|
|
208
213
|
max: new Date(2023, 11, 24),
|
|
214
|
+
includeEdgeDates: false,
|
|
209
215
|
},
|
|
210
216
|
render: (args) => <StoryDouble {...args} />,
|
|
211
217
|
};
|
|
212
218
|
|
|
213
219
|
const StoryRange = (args: CalendarBaseRangeProps) => {
|
|
214
|
-
const { min, max, type } = args;
|
|
220
|
+
const { min, max, type, includeEdgeDates } = args;
|
|
215
221
|
const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
|
|
216
222
|
const handleOnChange = useCallback((newValue: [Date, Date?]) => {
|
|
217
223
|
onChangeValue(newValue);
|
|
@@ -237,6 +243,7 @@ const StoryRange = (args: CalendarBaseRangeProps) => {
|
|
|
237
243
|
disabledList={disabledList}
|
|
238
244
|
min={min}
|
|
239
245
|
max={max}
|
|
246
|
+
includeEdgeDates={includeEdgeDates}
|
|
240
247
|
type={type}
|
|
241
248
|
onChangeValue={handleOnChange}
|
|
242
249
|
/>
|
|
@@ -255,13 +262,14 @@ export const Range: StoryObj<CalendarBaseRangeProps> = {
|
|
|
255
262
|
args: {
|
|
256
263
|
min: new Date(2023, 10, 1),
|
|
257
264
|
max: new Date(2023, 11, 24),
|
|
265
|
+
includeEdgeDates: false,
|
|
258
266
|
type: 'Days',
|
|
259
267
|
},
|
|
260
268
|
render: (args) => <StoryRange {...args} />,
|
|
261
269
|
};
|
|
262
270
|
|
|
263
271
|
const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
|
|
264
|
-
const { min, max } = args;
|
|
272
|
+
const { min, max, includeEdgeDates } = args;
|
|
265
273
|
const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
|
|
266
274
|
const handleOnChange = useCallback((newValue: [Date, Date?]) => {
|
|
267
275
|
onChangeValue(newValue);
|
|
@@ -287,6 +295,7 @@ const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
|
|
|
287
295
|
disabledList={disabledList}
|
|
288
296
|
min={min}
|
|
289
297
|
max={max}
|
|
298
|
+
includeEdgeDates={includeEdgeDates}
|
|
290
299
|
onChangeValue={handleOnChange}
|
|
291
300
|
/>
|
|
292
301
|
);
|
|
@@ -296,12 +305,13 @@ export const RangeDouble: StoryObj<CalendarBaseRangeProps> = {
|
|
|
296
305
|
args: {
|
|
297
306
|
min: new Date(2023, 10, 1),
|
|
298
307
|
max: new Date(2023, 11, 24),
|
|
308
|
+
includeEdgeDates: false,
|
|
299
309
|
},
|
|
300
310
|
render: (args) => <StoryRangeDouble {...args} />,
|
|
301
311
|
};
|
|
302
312
|
|
|
303
313
|
const StoryWithPopover = (args: CalendarProps) => {
|
|
304
|
-
const { isDouble, min, max } = args;
|
|
314
|
+
const { isDouble, min, max, includeEdgeDates } = args;
|
|
305
315
|
const [isOpen, setIsOpen] = useState(false);
|
|
306
316
|
const [textValue, setTextValue] = useState('2023-10-16');
|
|
307
317
|
const [value, setValue] = useState(new Date(textValue));
|
|
@@ -340,6 +350,7 @@ const StoryWithPopover = (args: CalendarProps) => {
|
|
|
340
350
|
disabledList={disabledDays}
|
|
341
351
|
min={min}
|
|
342
352
|
max={max}
|
|
353
|
+
includeEdgeDates={includeEdgeDates}
|
|
343
354
|
isDouble={isDouble}
|
|
344
355
|
isRange={false}
|
|
345
356
|
onChangeValue={handleOnChange}
|
|
@@ -353,6 +364,7 @@ export const WithPopover: StoryObj<CalendarProps> = {
|
|
|
353
364
|
min: new Date(2023, 9, 1),
|
|
354
365
|
max: new Date(2023, 11, 24),
|
|
355
366
|
isDouble: false,
|
|
367
|
+
includeEdgeDates: false,
|
|
356
368
|
},
|
|
357
369
|
render: (args) => <StoryWithPopover {...args} />,
|
|
358
370
|
};
|
|
@@ -13,10 +13,10 @@ var config = exports.config = {
|
|
|
13
13
|
},
|
|
14
14
|
variations: {
|
|
15
15
|
size: {
|
|
16
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem 0.5rem 0 0;", ":0.
|
|
17
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem 0.625rem 0 0;", ":0.
|
|
18
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem 0.75rem 0 0;", ":0.
|
|
19
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem 0.875rem 0 0;", ":
|
|
16
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem 0.5rem 0 0;", ":0.563rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.625rem;", ":0.5rem;", ":0.625rem;", ":0.563rem;", ":0.625rem;", ":0rem;", ":0.563rem;", ":0.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":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(--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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
|
|
17
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem 0.625rem 0 0;", ":0.688rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0rem;", ":0.688rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":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(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
|
|
18
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem 0.75rem 0 0;", ":0.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0rem;", ":0.875rem;", ":0.875rem;", ":1.25rem;", ":0.625rem;", ":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(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
|
|
19
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem 0.875rem 0 0;", ":1.063rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":0.75rem;", ":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(--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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight)
|
|
20
20
|
},
|
|
21
21
|
view: {
|
|
22
22
|
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextArea.textAreaTokens.inputBackgroundColor, _TextArea.textAreaTokens.inputBackgroundColorHover, _TextArea.textAreaTokens.inputBackgroundColorActive, _TextArea.textAreaTokens.inputBackgroundColorFocus, _TextArea.textAreaTokens.helpersBackgroundColor, _TextArea.textAreaTokens.helpersBackgroundColorHover, _TextArea.textAreaTokens.helpersBackgroundColorActive, _TextArea.textAreaTokens.helpersBackgroundColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.inputCaretColor, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus, _TextArea.textAreaTokens.leftHelperColor, _TextArea.textAreaTokens.rightHelperColor),
|
|
@@ -79,7 +79,7 @@ const baseEvents = [
|
|
|
79
79
|
];
|
|
80
80
|
|
|
81
81
|
const StoryDefault = (args: CalendarProps) => {
|
|
82
|
-
const { isRange, isDouble, min, max, date } = args;
|
|
82
|
+
const { isRange, isDouble, min, max, date, includeEdgeDates } = args;
|
|
83
83
|
const [value, setValue] = useState(new Date(2023, 10, 16));
|
|
84
84
|
const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
|
|
85
85
|
|
|
@@ -110,6 +110,7 @@ const StoryDefault = (args: CalendarProps) => {
|
|
|
110
110
|
disabledList={disabledDays}
|
|
111
111
|
min={min}
|
|
112
112
|
max={max}
|
|
113
|
+
includeEdgeDates={includeEdgeDates}
|
|
113
114
|
onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
|
|
114
115
|
/>
|
|
115
116
|
);
|
|
@@ -121,12 +122,13 @@ export const Default: StoryObj<CalendarProps> = {
|
|
|
121
122
|
max: new Date(2023, 11, 24),
|
|
122
123
|
isDouble: false,
|
|
123
124
|
isRange: false,
|
|
125
|
+
includeEdgeDates: false,
|
|
124
126
|
},
|
|
125
127
|
render: (args) => <StoryDefault {...args} />,
|
|
126
128
|
};
|
|
127
129
|
|
|
128
130
|
const StoryBase = (args: CalendarBaseProps) => {
|
|
129
|
-
const { min, max, type } = args;
|
|
131
|
+
const { min, max, type, includeEdgeDates } = args;
|
|
130
132
|
const [value, setValue] = useState(new Date(2023, 10, 16));
|
|
131
133
|
|
|
132
134
|
const handleOnChange = useCallback((newValue: Date) => {
|
|
@@ -150,6 +152,7 @@ const StoryBase = (args: CalendarBaseProps) => {
|
|
|
150
152
|
disabledList={disabledDays}
|
|
151
153
|
min={min}
|
|
152
154
|
max={max}
|
|
155
|
+
includeEdgeDates={includeEdgeDates}
|
|
153
156
|
type={type}
|
|
154
157
|
onChangeValue={handleOnChange}
|
|
155
158
|
/>
|
|
@@ -168,13 +171,14 @@ export const Base: StoryObj<CalendarBaseProps> = {
|
|
|
168
171
|
args: {
|
|
169
172
|
min: new Date(2023, 10, 1),
|
|
170
173
|
max: new Date(2023, 11, 24),
|
|
174
|
+
includeEdgeDates: false,
|
|
171
175
|
type: 'Days',
|
|
172
176
|
},
|
|
173
177
|
render: (args) => <StoryBase {...args} />,
|
|
174
178
|
};
|
|
175
179
|
|
|
176
180
|
const StoryDouble = (args: CalendarDoubleProps) => {
|
|
177
|
-
const { min, max } = args;
|
|
181
|
+
const { min, max, includeEdgeDates } = args;
|
|
178
182
|
const [value, setValue] = useState(new Date(2023, 10, 16));
|
|
179
183
|
const handleOnChange = useCallback((newValue: Date) => {
|
|
180
184
|
setValue(newValue);
|
|
@@ -197,6 +201,7 @@ const StoryDouble = (args: CalendarDoubleProps) => {
|
|
|
197
201
|
disabledList={disabledDays}
|
|
198
202
|
min={min}
|
|
199
203
|
max={max}
|
|
204
|
+
includeEdgeDates={includeEdgeDates}
|
|
200
205
|
onChangeValue={handleOnChange}
|
|
201
206
|
/>
|
|
202
207
|
);
|
|
@@ -206,12 +211,13 @@ export const Double: StoryObj<CalendarDoubleProps> = {
|
|
|
206
211
|
args: {
|
|
207
212
|
min: new Date(2023, 10, 1),
|
|
208
213
|
max: new Date(2023, 11, 24),
|
|
214
|
+
includeEdgeDates: false,
|
|
209
215
|
},
|
|
210
216
|
render: (args) => <StoryDouble {...args} />,
|
|
211
217
|
};
|
|
212
218
|
|
|
213
219
|
const StoryRange = (args: CalendarBaseRangeProps) => {
|
|
214
|
-
const { min, max, type } = args;
|
|
220
|
+
const { min, max, type, includeEdgeDates } = args;
|
|
215
221
|
const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
|
|
216
222
|
const handleOnChange = useCallback((newValue: [Date, Date?]) => {
|
|
217
223
|
onChangeValue(newValue);
|
|
@@ -237,6 +243,7 @@ const StoryRange = (args: CalendarBaseRangeProps) => {
|
|
|
237
243
|
disabledList={disabledList}
|
|
238
244
|
min={min}
|
|
239
245
|
max={max}
|
|
246
|
+
includeEdgeDates={includeEdgeDates}
|
|
240
247
|
type={type}
|
|
241
248
|
onChangeValue={handleOnChange}
|
|
242
249
|
/>
|
|
@@ -255,13 +262,14 @@ export const Range: StoryObj<CalendarBaseRangeProps> = {
|
|
|
255
262
|
args: {
|
|
256
263
|
min: new Date(2023, 10, 1),
|
|
257
264
|
max: new Date(2023, 11, 24),
|
|
265
|
+
includeEdgeDates: false,
|
|
258
266
|
type: 'Days',
|
|
259
267
|
},
|
|
260
268
|
render: (args) => <StoryRange {...args} />,
|
|
261
269
|
};
|
|
262
270
|
|
|
263
271
|
const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
|
|
264
|
-
const { min, max } = args;
|
|
272
|
+
const { min, max, includeEdgeDates } = args;
|
|
265
273
|
const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
|
|
266
274
|
const handleOnChange = useCallback((newValue: [Date, Date?]) => {
|
|
267
275
|
onChangeValue(newValue);
|
|
@@ -287,6 +295,7 @@ const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
|
|
|
287
295
|
disabledList={disabledList}
|
|
288
296
|
min={min}
|
|
289
297
|
max={max}
|
|
298
|
+
includeEdgeDates={includeEdgeDates}
|
|
290
299
|
onChangeValue={handleOnChange}
|
|
291
300
|
/>
|
|
292
301
|
);
|
|
@@ -296,12 +305,13 @@ export const RangeDouble: StoryObj<CalendarBaseRangeProps> = {
|
|
|
296
305
|
args: {
|
|
297
306
|
min: new Date(2023, 10, 1),
|
|
298
307
|
max: new Date(2023, 11, 24),
|
|
308
|
+
includeEdgeDates: false,
|
|
299
309
|
},
|
|
300
310
|
render: (args) => <StoryRangeDouble {...args} />,
|
|
301
311
|
};
|
|
302
312
|
|
|
303
313
|
const StoryWithPopover = (args: CalendarProps) => {
|
|
304
|
-
const { isDouble, min, max } = args;
|
|
314
|
+
const { isDouble, min, max, includeEdgeDates } = args;
|
|
305
315
|
const [isOpen, setIsOpen] = useState(false);
|
|
306
316
|
const [textValue, setTextValue] = useState('2023-10-16');
|
|
307
317
|
const [value, setValue] = useState(new Date(textValue));
|
|
@@ -340,6 +350,7 @@ const StoryWithPopover = (args: CalendarProps) => {
|
|
|
340
350
|
disabledList={disabledDays}
|
|
341
351
|
min={min}
|
|
342
352
|
max={max}
|
|
353
|
+
includeEdgeDates={includeEdgeDates}
|
|
343
354
|
isDouble={isDouble}
|
|
344
355
|
isRange={false}
|
|
345
356
|
onChangeValue={handleOnChange}
|
|
@@ -353,6 +364,7 @@ export const WithPopover: StoryObj<CalendarProps> = {
|
|
|
353
364
|
min: new Date(2023, 9, 1),
|
|
354
365
|
max: new Date(2023, 11, 24),
|
|
355
366
|
isDouble: false,
|
|
367
|
+
includeEdgeDates: false,
|
|
356
368
|
},
|
|
357
369
|
render: (args) => <StoryWithPopover {...args} />,
|
|
358
370
|
};
|
|
@@ -13,10 +13,10 @@ var config = exports.config = {
|
|
|
13
13
|
},
|
|
14
14
|
variations: {
|
|
15
15
|
size: {
|
|
16
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem;", ":0.
|
|
17
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":0.
|
|
18
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem;", ":0.
|
|
19
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem;", ":
|
|
16
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem;", ":0.563rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.563rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":0.563rem;", ":0.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":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(--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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingBottomWithHelpers, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
|
|
17
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":0.688rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.75rem;", ":0.875rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":0.688rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":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(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingBottomWithHelpers, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
|
|
18
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem;", ":0.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":0.75rem;", ":1rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":0.875rem;", ":0.875rem;", ":1.25rem;", ":0.625rem;", ":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(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingBottomWithHelpers, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
|
|
19
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem;", ":1.063rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":0.75rem;", ":1.125rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":0.75rem;", ":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(--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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingBottomWithHelpers, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight)
|
|
20
20
|
},
|
|
21
21
|
view: {
|
|
22
22
|
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--text-tertiary-hover);", ":var(--text-tertiary-hover);", ":var(--text-accent);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextArea.textAreaTokens.inputBorderColor, _TextArea.textAreaTokens.inputBorderColorHover, _TextArea.textAreaTokens.inputBorderColorActive, _TextArea.textAreaTokens.inputBorderColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.inputCaretColor, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus, _TextArea.textAreaTokens.leftHelperColor, _TextArea.textAreaTokens.rightHelperColor),
|
package/styled-components/cjs/examples/sds_engineer/components/Calendar/Calendar.stories.tsx
CHANGED
|
@@ -79,7 +79,7 @@ const baseEvents = [
|
|
|
79
79
|
];
|
|
80
80
|
|
|
81
81
|
const StoryDefault = (args: CalendarProps) => {
|
|
82
|
-
const { isRange, isDouble, min, max, date } = args;
|
|
82
|
+
const { isRange, isDouble, min, max, date, includeEdgeDates } = args;
|
|
83
83
|
const [value, setValue] = useState(new Date(2023, 10, 16));
|
|
84
84
|
const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
|
|
85
85
|
|
|
@@ -110,6 +110,7 @@ const StoryDefault = (args: CalendarProps) => {
|
|
|
110
110
|
disabledList={disabledDays}
|
|
111
111
|
min={min}
|
|
112
112
|
max={max}
|
|
113
|
+
includeEdgeDates={includeEdgeDates}
|
|
113
114
|
onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
|
|
114
115
|
/>
|
|
115
116
|
);
|
|
@@ -121,12 +122,13 @@ export const Default: StoryObj<CalendarProps> = {
|
|
|
121
122
|
max: new Date(2023, 11, 24),
|
|
122
123
|
isDouble: false,
|
|
123
124
|
isRange: false,
|
|
125
|
+
includeEdgeDates: false,
|
|
124
126
|
},
|
|
125
127
|
render: (args) => <StoryDefault {...args} />,
|
|
126
128
|
};
|
|
127
129
|
|
|
128
130
|
const StoryBase = (args: CalendarBaseProps) => {
|
|
129
|
-
const { min, max, type } = args;
|
|
131
|
+
const { min, max, type, includeEdgeDates } = args;
|
|
130
132
|
const [value, setValue] = useState(new Date(2023, 10, 16));
|
|
131
133
|
|
|
132
134
|
const handleOnChange = useCallback((newValue: Date) => {
|
|
@@ -150,6 +152,7 @@ const StoryBase = (args: CalendarBaseProps) => {
|
|
|
150
152
|
disabledList={disabledDays}
|
|
151
153
|
min={min}
|
|
152
154
|
max={max}
|
|
155
|
+
includeEdgeDates={includeEdgeDates}
|
|
153
156
|
type={type}
|
|
154
157
|
onChangeValue={handleOnChange}
|
|
155
158
|
/>
|
|
@@ -168,13 +171,14 @@ export const Base: StoryObj<CalendarBaseProps> = {
|
|
|
168
171
|
args: {
|
|
169
172
|
min: new Date(2023, 10, 1),
|
|
170
173
|
max: new Date(2023, 11, 24),
|
|
174
|
+
includeEdgeDates: false,
|
|
171
175
|
type: 'Days',
|
|
172
176
|
},
|
|
173
177
|
render: (args) => <StoryBase {...args} />,
|
|
174
178
|
};
|
|
175
179
|
|
|
176
180
|
const StoryDouble = (args: CalendarDoubleProps) => {
|
|
177
|
-
const { min, max } = args;
|
|
181
|
+
const { min, max, includeEdgeDates } = args;
|
|
178
182
|
const [value, setValue] = useState(new Date(2023, 10, 16));
|
|
179
183
|
const handleOnChange = useCallback((newValue: Date) => {
|
|
180
184
|
setValue(newValue);
|
|
@@ -197,6 +201,7 @@ const StoryDouble = (args: CalendarDoubleProps) => {
|
|
|
197
201
|
disabledList={disabledDays}
|
|
198
202
|
min={min}
|
|
199
203
|
max={max}
|
|
204
|
+
includeEdgeDates={includeEdgeDates}
|
|
200
205
|
onChangeValue={handleOnChange}
|
|
201
206
|
/>
|
|
202
207
|
);
|
|
@@ -206,12 +211,13 @@ export const Double: StoryObj<CalendarDoubleProps> = {
|
|
|
206
211
|
args: {
|
|
207
212
|
min: new Date(2023, 10, 1),
|
|
208
213
|
max: new Date(2023, 11, 24),
|
|
214
|
+
includeEdgeDates: false,
|
|
209
215
|
},
|
|
210
216
|
render: (args) => <StoryDouble {...args} />,
|
|
211
217
|
};
|
|
212
218
|
|
|
213
219
|
const StoryRange = (args: CalendarBaseRangeProps) => {
|
|
214
|
-
const { min, max, type } = args;
|
|
220
|
+
const { min, max, type, includeEdgeDates } = args;
|
|
215
221
|
const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
|
|
216
222
|
const handleOnChange = useCallback((newValue: [Date, Date?]) => {
|
|
217
223
|
onChangeValue(newValue);
|
|
@@ -237,6 +243,7 @@ const StoryRange = (args: CalendarBaseRangeProps) => {
|
|
|
237
243
|
disabledList={disabledList}
|
|
238
244
|
min={min}
|
|
239
245
|
max={max}
|
|
246
|
+
includeEdgeDates={includeEdgeDates}
|
|
240
247
|
type={type}
|
|
241
248
|
onChangeValue={handleOnChange}
|
|
242
249
|
/>
|
|
@@ -255,13 +262,14 @@ export const Range: StoryObj<CalendarBaseRangeProps> = {
|
|
|
255
262
|
args: {
|
|
256
263
|
min: new Date(2023, 10, 1),
|
|
257
264
|
max: new Date(2023, 11, 24),
|
|
265
|
+
includeEdgeDates: false,
|
|
258
266
|
type: 'Days',
|
|
259
267
|
},
|
|
260
268
|
render: (args) => <StoryRange {...args} />,
|
|
261
269
|
};
|
|
262
270
|
|
|
263
271
|
const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
|
|
264
|
-
const { min, max } = args;
|
|
272
|
+
const { min, max, includeEdgeDates } = args;
|
|
265
273
|
const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
|
|
266
274
|
const handleOnChange = useCallback((newValue: [Date, Date?]) => {
|
|
267
275
|
onChangeValue(newValue);
|
|
@@ -287,6 +295,7 @@ const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
|
|
|
287
295
|
disabledList={disabledList}
|
|
288
296
|
min={min}
|
|
289
297
|
max={max}
|
|
298
|
+
includeEdgeDates={includeEdgeDates}
|
|
290
299
|
onChangeValue={handleOnChange}
|
|
291
300
|
/>
|
|
292
301
|
);
|
|
@@ -296,12 +305,13 @@ export const RangeDouble: StoryObj<CalendarBaseRangeProps> = {
|
|
|
296
305
|
args: {
|
|
297
306
|
min: new Date(2023, 10, 1),
|
|
298
307
|
max: new Date(2023, 11, 24),
|
|
308
|
+
includeEdgeDates: false,
|
|
299
309
|
},
|
|
300
310
|
render: (args) => <StoryRangeDouble {...args} />,
|
|
301
311
|
};
|
|
302
312
|
|
|
303
313
|
const StoryWithPopover = (args: CalendarProps) => {
|
|
304
|
-
const { isDouble, min, max } = args;
|
|
314
|
+
const { isDouble, min, max, includeEdgeDates } = args;
|
|
305
315
|
const [isOpen, setIsOpen] = useState(false);
|
|
306
316
|
const [textValue, setTextValue] = useState('2023-10-16');
|
|
307
317
|
const [value, setValue] = useState(new Date(textValue));
|
|
@@ -340,6 +350,7 @@ const StoryWithPopover = (args: CalendarProps) => {
|
|
|
340
350
|
disabledList={disabledDays}
|
|
341
351
|
min={min}
|
|
342
352
|
max={max}
|
|
353
|
+
includeEdgeDates={includeEdgeDates}
|
|
343
354
|
isDouble={isDouble}
|
|
344
355
|
isRange={false}
|
|
345
356
|
onChangeValue={handleOnChange}
|
|
@@ -353,6 +364,7 @@ export const WithPopover: StoryObj<CalendarProps> = {
|
|
|
353
364
|
min: new Date(2023, 9, 1),
|
|
354
365
|
max: new Date(2023, 11, 24),
|
|
355
366
|
isDouble: false,
|
|
367
|
+
includeEdgeDates: false,
|
|
356
368
|
},
|
|
357
369
|
render: (args) => <StoryWithPopover {...args} />,
|
|
358
370
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["value", "min", "max", "type", "eventList", "disabledList", "onChangeValue"];
|
|
1
|
+
var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "onChangeValue"];
|
|
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."); }
|
|
@@ -25,6 +25,7 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
|
|
|
25
25
|
var externalValue = _ref.value,
|
|
26
26
|
min = _ref.min,
|
|
27
27
|
max = _ref.max,
|
|
28
|
+
includeEdgeDates = _ref.includeEdgeDates,
|
|
28
29
|
_ref$type = _ref.type,
|
|
29
30
|
type = _ref$type === void 0 ? 'Days' : _ref$type,
|
|
30
31
|
eventList = _ref.eventList,
|
|
@@ -233,6 +234,7 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
|
|
|
233
234
|
disabledList: disabledList,
|
|
234
235
|
min: min,
|
|
235
236
|
max: max,
|
|
237
|
+
includeEdgeDates: includeEdgeDates,
|
|
236
238
|
value: externalValue,
|
|
237
239
|
date: date,
|
|
238
240
|
hoveredDay: hoveredDay,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var _StyledSeparator;
|
|
2
|
-
var _excluded = ["value", "min", "max", "eventList", "disabledList", "onChangeValue"];
|
|
2
|
+
var _excluded = ["value", "min", "max", "includeEdgeDates", "eventList", "disabledList", "onChangeValue"];
|
|
3
3
|
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); }
|
|
4
4
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
5
5
|
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."); }
|
|
@@ -23,6 +23,7 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
|
|
|
23
23
|
var externalValue = _ref.value,
|
|
24
24
|
min = _ref.min,
|
|
25
25
|
max = _ref.max,
|
|
26
|
+
includeEdgeDates = _ref.includeEdgeDates,
|
|
26
27
|
eventList = _ref.eventList,
|
|
27
28
|
disabledList = _ref.disabledList,
|
|
28
29
|
onChangeValue = _ref.onChangeValue,
|
|
@@ -146,6 +147,7 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
|
|
|
146
147
|
disabledList: disabledList,
|
|
147
148
|
min: min,
|
|
148
149
|
max: max,
|
|
150
|
+
includeEdgeDates: includeEdgeDates,
|
|
149
151
|
value: externalValue,
|
|
150
152
|
date: firstDate,
|
|
151
153
|
hoveredDay: hoveredDay,
|
|
@@ -162,6 +164,7 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
|
|
|
162
164
|
disabledList: disabledList,
|
|
163
165
|
min: min,
|
|
164
166
|
max: max,
|
|
167
|
+
includeEdgeDates: includeEdgeDates,
|
|
165
168
|
value: externalValue,
|
|
166
169
|
date: secondDate,
|
|
167
170
|
hoveredDay: hoveredDay,
|
|
@@ -182,6 +182,7 @@ var getDaysWithModifications = function getDaysWithModifications(days) {
|
|
|
182
182
|
var disabledList = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
183
183
|
var min = arguments.length > 3 ? arguments[3] : undefined;
|
|
184
184
|
var max = arguments.length > 4 ? arguments[4] : undefined;
|
|
185
|
+
var includeEdgeDates = arguments.length > 5 ? arguments[5] : undefined;
|
|
185
186
|
var eventsMap = getPropsMap(eventList);
|
|
186
187
|
var disabledDaysMap = getPropsMap(disabledList);
|
|
187
188
|
var daysList = days.filter(function (_ref3) {
|
|
@@ -199,7 +200,9 @@ var getDaysWithModifications = function getDaysWithModifications(days) {
|
|
|
199
200
|
day = date.day;
|
|
200
201
|
var keyDay = "".concat(year, "-").concat(monthIndex, "-").concat(day);
|
|
201
202
|
var currentDate = new Date(year, monthIndex, day);
|
|
202
|
-
var
|
|
203
|
+
var minValue = min && (includeEdgeDates ? min > currentDate : min >= currentDate);
|
|
204
|
+
var maxValue = max && (includeEdgeDates ? max < currentDate : max <= currentDate);
|
|
205
|
+
var isOutOfMinMaxRange = minValue || maxValue;
|
|
203
206
|
dayItem.events = eventsMap.get(keyDay);
|
|
204
207
|
dayItem.disabled = disabledDaysMap.has(keyDay) || isOutOfMinMaxRange;
|
|
205
208
|
dayItem.isOutOfMinMaxRange = isOutOfMinMaxRange;
|
|
@@ -212,7 +215,7 @@ var getDaysWithModifications = function getDaysWithModifications(days) {
|
|
|
212
215
|
/**
|
|
213
216
|
* Хук для получения списка дней.
|
|
214
217
|
*/
|
|
215
|
-
export var useDays = function useDays(date, value, eventList, disabledList, min, max) {
|
|
218
|
+
export var useDays = function useDays(date, value, eventList, disabledList, min, max, includeEdgeDates) {
|
|
216
219
|
return useMemo(function () {
|
|
217
220
|
var monthIndex = date.monthIndex,
|
|
218
221
|
year = date.year;
|
|
@@ -220,7 +223,7 @@ export var useDays = function useDays(date, value, eventList, disabledList, min,
|
|
|
220
223
|
var offsetDayInWeek = getOffsetDayInWeek(monthIndex, year);
|
|
221
224
|
var days = [].concat(_toConsumableArray(getDaysInPrevMonth(date, offsetDayInWeek, value)), _toConsumableArray(getDaysInCurrentMonth(date, daysInMonth, value)), _toConsumableArray(getDaysInNextMonth(date, daysInMonth, offsetDayInWeek, value)));
|
|
222
225
|
if (eventList !== null && eventList !== void 0 && eventList.length || disabledList !== null && disabledList !== void 0 && disabledList.length || max || min) {
|
|
223
|
-
var modifiedDays = getDaysWithModifications(days, eventList, disabledList, min, max);
|
|
226
|
+
var modifiedDays = getDaysWithModifications(days, eventList, disabledList, min, max, includeEdgeDates);
|
|
224
227
|
return getMatrix(modifiedDays);
|
|
225
228
|
}
|
|
226
229
|
return getMatrix(days);
|