@salutejs/plasma-new-hope 0.241.1-canary.1701.12826370058.0 → 0.242.0-canary.1702.12829190112.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Cell/ui/CellTextbox/CellTextbox.js +4 -9
- package/cjs/components/Cell/ui/CellTextbox/CellTextbox.js.map +1 -1
- package/cjs/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js +2 -6
- package/cjs/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js.map +1 -1
- package/cjs/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js +2 -6
- package/cjs/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js.map +1 -1
- package/cjs/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js +4 -10
- package/cjs/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.css +7 -7
- package/cjs/components/Checkbox/Checkbox.js +1 -2
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/components/Checkbox/{Checkbox.styles_16ay1rj.css → Checkbox.styles_dmi26u.css} +2 -2
- package/cjs/components/Combobox/ComboboxNew/Combobox.css +7 -7
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.css +7 -7
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +7 -7
- package/cjs/components/DatePicker/RangeDate/RangeDate.js +66 -21
- package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/cjs/components/Pagination/Pagination.css +7 -7
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +7 -7
- package/cjs/components/Radiobox/Radiobox.css +9 -9
- package/cjs/components/Radiobox/Radiobox.js +1 -2
- package/cjs/components/Radiobox/Radiobox.js.map +1 -1
- package/cjs/components/Radiobox/Radiobox.styles.js +1 -1
- package/cjs/components/Radiobox/Radiobox.styles.js.map +1 -1
- package/cjs/components/Radiobox/{Radiobox.styles_vikocp.css → Radiobox.styles_520asv.css} +1 -1
- package/cjs/components/Select/Select.css +7 -7
- package/cjs/components/Select/ui/Inner/Inner.css +7 -7
- package/cjs/components/Select/ui/Inner/ui/Item/Item.css +7 -7
- package/cjs/index.css +9 -9
- package/emotion/cjs/components/Cell/ui/CellTextbox/CellTextbox.js +4 -11
- package/emotion/cjs/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js +2 -7
- package/emotion/cjs/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js +2 -7
- package/emotion/cjs/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js +4 -12
- package/emotion/cjs/components/Checkbox/Checkbox.js +1 -2
- package/emotion/cjs/components/Checkbox/Checkbox.styles.js +15 -7
- package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +66 -21
- package/emotion/cjs/components/Radiobox/Radiobox.js +1 -2
- package/emotion/cjs/components/Radiobox/Radiobox.styles.js +2 -2
- package/emotion/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +8 -23
- package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -7
- package/emotion/cjs/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +0 -23
- package/emotion/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +3 -7
- package/emotion/es/components/Cell/ui/CellTextbox/CellTextbox.js +4 -11
- package/emotion/es/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js +2 -7
- package/emotion/es/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js +2 -7
- package/emotion/es/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js +4 -12
- package/emotion/es/components/Checkbox/Checkbox.js +1 -2
- package/emotion/es/components/Checkbox/Checkbox.styles.js +15 -7
- package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +66 -21
- package/emotion/es/components/Radiobox/Radiobox.js +1 -2
- package/emotion/es/components/Radiobox/Radiobox.styles.js +2 -2
- package/emotion/es/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +8 -23
- package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -7
- package/emotion/es/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +0 -23
- package/emotion/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +3 -7
- package/es/components/Cell/ui/CellTextbox/CellTextbox.js +4 -9
- package/es/components/Cell/ui/CellTextbox/CellTextbox.js.map +1 -1
- package/es/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js +2 -6
- package/es/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js.map +1 -1
- package/es/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js +2 -6
- package/es/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js.map +1 -1
- package/es/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js +4 -10
- package/es/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js.map +1 -1
- package/es/components/Checkbox/Checkbox.css +7 -7
- package/es/components/Checkbox/Checkbox.js +1 -2
- package/es/components/Checkbox/Checkbox.js.map +1 -1
- package/es/components/Checkbox/Checkbox.styles.js +1 -1
- package/es/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/es/components/Checkbox/{Checkbox.styles_16ay1rj.css → Checkbox.styles_dmi26u.css} +2 -2
- package/es/components/Combobox/ComboboxNew/Combobox.css +7 -7
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.css +7 -7
- package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +7 -7
- package/es/components/DatePicker/RangeDate/RangeDate.js +66 -21
- package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/es/components/Pagination/Pagination.css +7 -7
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +7 -7
- package/es/components/Radiobox/Radiobox.css +9 -9
- package/es/components/Radiobox/Radiobox.js +1 -2
- package/es/components/Radiobox/Radiobox.js.map +1 -1
- package/es/components/Radiobox/Radiobox.styles.js +1 -1
- package/es/components/Radiobox/Radiobox.styles.js.map +1 -1
- package/es/components/Radiobox/{Radiobox.styles_vikocp.css → Radiobox.styles_520asv.css} +1 -1
- package/es/components/Select/Select.css +7 -7
- package/es/components/Select/ui/Inner/Inner.css +7 -7
- package/es/components/Select/ui/Inner/ui/Item/Item.css +7 -7
- package/es/index.css +9 -9
- package/package.json +2 -2
- package/styled-components/cjs/components/Cell/ui/CellTextbox/CellTextbox.js +4 -11
- package/styled-components/cjs/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js +2 -7
- package/styled-components/cjs/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js +2 -7
- package/styled-components/cjs/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js +4 -12
- package/styled-components/cjs/components/Checkbox/Checkbox.js +1 -2
- package/styled-components/cjs/components/Checkbox/Checkbox.styles.js +2 -2
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +66 -21
- package/styled-components/cjs/components/Radiobox/Radiobox.js +1 -2
- package/styled-components/cjs/components/Radiobox/Radiobox.styles.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +8 -23
- package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -7
- package/styled-components/cjs/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +0 -23
- package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +3 -7
- package/styled-components/es/components/Cell/ui/CellTextbox/CellTextbox.js +4 -11
- package/styled-components/es/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js +2 -7
- package/styled-components/es/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js +2 -7
- package/styled-components/es/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js +4 -12
- package/styled-components/es/components/Checkbox/Checkbox.js +1 -2
- package/styled-components/es/components/Checkbox/Checkbox.styles.js +2 -2
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +66 -21
- package/styled-components/es/components/Radiobox/Radiobox.js +1 -2
- package/styled-components/es/components/Radiobox/Radiobox.styles.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +8 -23
- package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -7
- package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +0 -23
- package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +3 -7
- package/types/components/Cell/ui/CellTextbox/CellTextbox.d.ts.map +1 -1
- package/types/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.d.ts.map +1 -1
- package/types/components/Checkbox/Checkbox.styles.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts +10 -8
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.styles.d.ts +12 -12
- package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts +4 -0
- package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts.map +1 -1
- package/types/components/Radiobox/Radiobox.styles.d.ts.map +1 -1
- package/types/components/Range/Range.types.d.ts +5 -5
- package/types/components/Range/Range.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts +5 -4
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Range/Range.d.ts +12 -12
- package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts +5 -4
- package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Range/Range.d.ts +12 -12
@@ -19,7 +19,7 @@ var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
|
|
19
19
|
var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
|
20
20
|
var _RangeDate = /*#__PURE__*/require("./RangeDate.styles");
|
21
21
|
var _RangeDatePopover = /*#__PURE__*/require("./RangeDatePopover/RangeDatePopover");
|
22
|
-
var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
|
22
|
+
var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
|
23
23
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
24
24
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
25
25
|
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); }
|
@@ -104,6 +104,8 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
104
104
|
closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
|
105
105
|
_ref$closeOnEsc = _ref.closeOnEsc,
|
106
106
|
closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
|
107
|
+
_ref$closeAfterDateSe = _ref.closeAfterDateSelect,
|
108
|
+
closeAfterDateSelect = _ref$closeAfterDateSe === void 0 ? true : _ref$closeAfterDateSe,
|
107
109
|
offset = _ref.offset,
|
108
110
|
onToggle = _ref.onToggle,
|
109
111
|
onChange = _ref.onChange,
|
@@ -156,6 +158,14 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
156
158
|
_useState14 = _slicedToArray(_useState13, 2),
|
157
159
|
inputSecondValue = _useState14[0],
|
158
160
|
setInputSecondValue = _useState14[1];
|
161
|
+
var _useState15 = (0, _react.useState)(Boolean(calendarFirstValue && calendarSecondValue)),
|
162
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
163
|
+
fullDateEntered = _useState16[0],
|
164
|
+
setFullDateEntered = _useState16[1];
|
165
|
+
var _useState17 = (0, _react.useState)(false),
|
166
|
+
_useState18 = _slicedToArray(_useState17, 2),
|
167
|
+
secondTextFieldClicked = _useState18[0],
|
168
|
+
setSecondTextFieldClicked = _useState18[1];
|
159
169
|
var setFirstInputValue = function setFirstInputValue(value) {
|
160
170
|
setInputFirstValue(value);
|
161
171
|
if (onChange) {
|
@@ -216,12 +226,12 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
216
226
|
}),
|
217
227
|
handleChangeSecondValue = _useDatePicker2.handleChangeValue,
|
218
228
|
handleCommitSecondDate = _useDatePicker2.handleCommitDate;
|
219
|
-
var handleToggle = function handleToggle(
|
229
|
+
var handleToggle = function handleToggle(currentOpened, event) {
|
220
230
|
var _firstInputRef$curren, _secondInputRef$curre;
|
221
231
|
if (disabled || readOnly) {
|
222
232
|
return;
|
223
233
|
}
|
224
|
-
var isCalendarOpen = (firstInputRef !== null && firstInputRef !== void 0 && (_firstInputRef$curren = firstInputRef.current) !== null && _firstInputRef$curren !== void 0 && _firstInputRef$curren.contains(event.target || null) || secondInputRef !== null && secondInputRef !== void 0 && (_secondInputRef$curre = secondInputRef.current) !== null && _secondInputRef$curre !== void 0 && _secondInputRef$curre.contains(event.target || null)) && event.code !== _useKeyboardNavigation.keys.Escape ? true :
|
234
|
+
var isCalendarOpen = (firstInputRef !== null && firstInputRef !== void 0 && (_firstInputRef$curren = firstInputRef.current) !== null && _firstInputRef$curren !== void 0 && _firstInputRef$curren.contains((event === null || event === void 0 ? void 0 : event.target) || null) || secondInputRef !== null && secondInputRef !== void 0 && (_secondInputRef$curre = secondInputRef.current) !== null && _secondInputRef$curre !== void 0 && _secondInputRef$curre.contains((event === null || event === void 0 ? void 0 : event.target) || null)) && (event === null || event === void 0 ? void 0 : event.code) !== _useKeyboardNavigation.keys.Escape ? true : currentOpened;
|
225
235
|
if (!isCalendarOpen) {
|
226
236
|
if (calendarFirstValue && !calendarSecondValue) {
|
227
237
|
var _secondInputRef$curre2;
|
@@ -232,11 +242,22 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
232
242
|
firstInputRef === null || firstInputRef === void 0 || (_firstInputRef$curren2 = firstInputRef.current) === null || _firstInputRef$curren2 === void 0 || _firstInputRef$curren2.focus();
|
233
243
|
}
|
234
244
|
}
|
245
|
+
if (!isCalendarOpen) {
|
246
|
+
setSecondTextFieldClicked(false);
|
247
|
+
}
|
235
248
|
if (onToggle) {
|
236
249
|
return onToggle(isCalendarOpen, event);
|
237
250
|
}
|
238
251
|
setIsInnerOpen(isCalendarOpen);
|
239
252
|
};
|
253
|
+
var handleFocusFirstTextField = function handleFocusFirstTextField(event) {
|
254
|
+
onFocusFirstTextfield === null || onFocusFirstTextfield === void 0 || onFocusFirstTextfield(event);
|
255
|
+
setSecondTextFieldClicked(false);
|
256
|
+
};
|
257
|
+
var handleFocusSecondTextField = function handleFocusSecondTextField(event) {
|
258
|
+
onFocusSecondTextfield === null || onFocusSecondTextfield === void 0 || onFocusSecondTextfield(event);
|
259
|
+
setSecondTextFieldClicked(true);
|
260
|
+
};
|
240
261
|
var handleBlur = function handleBlur(event, outerHandler) {
|
241
262
|
if (!inputFirstValue || !inputSecondValue) {
|
242
263
|
outerHandler === null || outerHandler === void 0 || outerHandler(event);
|
@@ -276,6 +297,37 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
276
297
|
closeOnEsc: closeOnEsc
|
277
298
|
}),
|
278
299
|
onKeyDown = _useKeyNavigation.onKeyDown;
|
300
|
+
var handleChangeStartOfRange = function handleChangeStartOfRange(chosenDate, dateInfo) {
|
301
|
+
if (!fullDateEntered) {
|
302
|
+
handleCommitFirstDate(chosenDate, false, true, dateInfo);
|
303
|
+
handleCommitSecondDate('');
|
304
|
+
return;
|
305
|
+
}
|
306
|
+
var prevValue = secondTextFieldClicked ? calendarFirstValue : calendarSecondValue;
|
307
|
+
var _getSortedValues3 = (0, _utils2.getSortedValues)([prevValue, chosenDate]),
|
308
|
+
_getSortedValues4 = _slicedToArray(_getSortedValues3, 2),
|
309
|
+
first = _getSortedValues4[0],
|
310
|
+
second = _getSortedValues4[1];
|
311
|
+
handleCommitFirstDate(first, false, true, dateInfo);
|
312
|
+
handleCommitSecondDate(second, false, true, dateInfo);
|
313
|
+
if (!firstValueError && !secondValueError && closeAfterDateSelect) {
|
314
|
+
handleToggle(false);
|
315
|
+
}
|
316
|
+
};
|
317
|
+
var handleChangeCalendarValue = function handleChangeCalendarValue(_ref2, dateInfo) {
|
318
|
+
var _ref3 = _slicedToArray(_ref2, 2),
|
319
|
+
firstDate = _ref3[0],
|
320
|
+
secondDate = _ref3[1];
|
321
|
+
if (firstDate) {
|
322
|
+
handleCommitFirstDate(firstDate, false, true, dateInfo);
|
323
|
+
}
|
324
|
+
if (secondDate) {
|
325
|
+
handleCommitSecondDate(secondDate, false, true, dateInfo);
|
326
|
+
}
|
327
|
+
if (firstDate && secondDate && !firstValueError && !secondValueError && closeAfterDateSelect) {
|
328
|
+
handleToggle(false);
|
329
|
+
}
|
330
|
+
};
|
279
331
|
var RangeComponent = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_RangeDate.StyledRange, {
|
280
332
|
ref: rangeRef,
|
281
333
|
autoComplete: autoComplete,
|
@@ -321,8 +373,8 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
321
373
|
rangeRef === null || rangeRef === void 0 || (_rangeRef$current4 = rangeRef.current) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.firstTextField()) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.current) === null || _rangeRef$current4 === void 0 || _rangeRef$current4.focus();
|
322
374
|
}
|
323
375
|
},
|
324
|
-
onFocusFirstTextfield:
|
325
|
-
onFocusSecondTextfield:
|
376
|
+
onFocusFirstTextfield: handleFocusFirstTextField,
|
377
|
+
onFocusSecondTextfield: handleFocusSecondTextField,
|
326
378
|
onBlurFirstTextfield: function onBlurFirstTextfield(event) {
|
327
379
|
return handleBlur(event, _onBlurFirstTextfield);
|
328
380
|
},
|
@@ -371,8 +423,13 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
371
423
|
lang: lang
|
372
424
|
}));
|
373
425
|
}, [format, lang]);
|
374
|
-
|
375
|
-
|
426
|
+
(0, _react.useEffect)(function () {
|
427
|
+
if (calendarFirstValue && calendarSecondValue) {
|
428
|
+
setFullDateEntered(true);
|
429
|
+
}
|
430
|
+
}, [calendarFirstValue, calendarSecondValue]);
|
431
|
+
var RootWrapper = (0, _react.useCallback)(function (_ref4) {
|
432
|
+
var children = _ref4.children;
|
376
433
|
return /*#__PURE__*/_react["default"].createElement(Root, {
|
377
434
|
view: view,
|
378
435
|
size: size,
|
@@ -414,20 +471,8 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
414
471
|
lang: lang,
|
415
472
|
isDoubleCalendar: isDoubleCalendar,
|
416
473
|
rootWrapper: RootWrapper,
|
417
|
-
onChangeStartOfRange:
|
418
|
-
|
419
|
-
handleCommitSecondDate('');
|
420
|
-
},
|
421
|
-
onChangeValue: function onChangeValue(_ref3, dateInfo) {
|
422
|
-
var _ref4 = _slicedToArray(_ref3, 2),
|
423
|
-
firstDate = _ref4[0],
|
424
|
-
secondDate = _ref4[1];
|
425
|
-
firstDate && handleCommitFirstDate(firstDate, false, true, dateInfo);
|
426
|
-
secondDate && handleCommitSecondDate(secondDate, false, true, dateInfo);
|
427
|
-
if (firstDate && secondDate && !firstValueError && !secondValueError) {
|
428
|
-
setIsInnerOpen(false);
|
429
|
-
}
|
430
|
-
}
|
474
|
+
onChangeStartOfRange: handleChangeStartOfRange,
|
475
|
+
onChangeValue: handleChangeCalendarValue
|
431
476
|
}), leftHelper && /*#__PURE__*/_react["default"].createElement(_RangeDate.LeftHelper, null, leftHelper), /*#__PURE__*/_react["default"].createElement(_DatePickerBase.InputHidden, _extends({
|
432
477
|
name: name,
|
433
478
|
type: "hidden",
|
@@ -66,8 +66,7 @@ var radioboxRoot = exports.radioboxRoot = function radioboxRoot(Root) {
|
|
66
66
|
"aria-describedby": uniqDescriptionId,
|
67
67
|
tabIndex: canFocused
|
68
68
|
})), /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledContentWrapper, {
|
69
|
-
htmlFor: radioboxId
|
70
|
-
className: singleLineClass
|
69
|
+
htmlFor: radioboxId
|
71
70
|
}, /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledTrigger, {
|
72
71
|
className: _Radiobox2.classes.radioboxTrigger
|
73
72
|
}, _StyledEllipse || (_StyledEllipse = /*#__PURE__*/_react["default"].createElement(_Radiobox.StyledEllipse, null))), hasContent && /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledContent, {
|
@@ -16,4 +16,4 @@ var mappingOverride = /*#__PURE__*/"\n ".concat(_Checkbox.checkboxTokens.labe
|
|
16
16
|
var StyledEllipse = exports.StyledEllipse = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
17
17
|
componentId: "plasma-new-hope__sc-rqiilp-0"
|
18
18
|
})(["width:var(", ");height:var(", ");border-radius:var(", ");background-color:var(", ");transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"], _Radiobox.tokens.ellipseSize, _Radiobox.tokens.ellipseSize, _Radiobox.tokens.ellipseSize, _Radiobox.tokens.ellipseColor);
|
19
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", ";margin:var(", ");", ";position:relative;align-items:flex-start;display:flex;.", "{", ";}"], mappingOverride, _Radiobox.tokens.margin, /*#__PURE__*/(0, _mixins.applyNoUserSelect)(), _Radiobox.classes.singleLine, /*#__PURE__*/(0, _mixins.applyEllipsis)());
|
19
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", ";margin:var(", ");", ";position:relative;align-items:flex-start;display:flex;cursor:pointer;.", "{", ";}"], mappingOverride, _Radiobox.tokens.margin, /*#__PURE__*/(0, _mixins.applyNoUserSelect)(), _Radiobox.classes.singleLine, /*#__PURE__*/(0, _mixins.applyEllipsis)());
|
@@ -98,6 +98,14 @@ const StoryDefault = (props: CheckboxProps) => {
|
|
98
98
|
<>
|
99
99
|
<Checkbox {...props} />
|
100
100
|
<Checkbox name="item.name" value="item.value" label="Label" description="Description" {...props} />
|
101
|
+
<Checkbox
|
102
|
+
name="item.name"
|
103
|
+
value="item.value"
|
104
|
+
singleLine
|
105
|
+
label="Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
|
106
|
+
description="Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
|
107
|
+
{...props}
|
108
|
+
/>
|
101
109
|
</>
|
102
110
|
);
|
103
111
|
};
|
@@ -106,29 +114,6 @@ export const Default: StoryObj<CheckboxProps> = {
|
|
106
114
|
render: (args) => <StoryDefault {...args} />,
|
107
115
|
};
|
108
116
|
|
109
|
-
const StoryLong = (props: CheckboxProps) => {
|
110
|
-
const { width, ...otherProps } = props;
|
111
|
-
return (
|
112
|
-
<div style={{ width }}>
|
113
|
-
<Checkbox {...otherProps} />
|
114
|
-
</div>
|
115
|
-
);
|
116
|
-
};
|
117
|
-
|
118
|
-
export const LongText: StoryObj<CheckboxProps> = {
|
119
|
-
args: {
|
120
|
-
name: 'item.name',
|
121
|
-
value: 'item.value',
|
122
|
-
label:
|
123
|
-
'Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger',
|
124
|
-
description:
|
125
|
-
'Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger',
|
126
|
-
singleLine: true,
|
127
|
-
width: '300px',
|
128
|
-
},
|
129
|
-
render: (args) => <StoryLong {...args} />,
|
130
|
-
};
|
131
|
-
|
132
117
|
const StoryComplex = (props: CheckboxProps) => {
|
133
118
|
const [values, setValues] = useState({
|
134
119
|
russian: true,
|
package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx
CHANGED
@@ -192,7 +192,6 @@ const StoryRange = ({
|
|
192
192
|
const rangeRef = useRef<RangeInputRefs>(null);
|
193
193
|
|
194
194
|
const [isOpen, setIsOpen] = useState(false);
|
195
|
-
const [firstDate, setFirstDate] = useState<string | Date>('');
|
196
195
|
|
197
196
|
const iconSize = size === 'xs' ? 'xs' : 's';
|
198
197
|
const showDividerIcon = dividerVariant === 'icon';
|
@@ -239,12 +238,6 @@ const StoryRange = ({
|
|
239
238
|
onChangeSecondValue={(e, currentValue) => {
|
240
239
|
onChangeSecondValue(e, currentValue);
|
241
240
|
}}
|
242
|
-
onCommitFirstDate={(currentValue) => {
|
243
|
-
setFirstDate(currentValue);
|
244
|
-
}}
|
245
|
-
onCommitSecondDate={(currentValue) => {
|
246
|
-
firstDate && currentValue && setIsOpen(false);
|
247
|
-
}}
|
248
241
|
lang={lang}
|
249
242
|
{...dividerIconProps}
|
250
243
|
{...rest}
|
@@ -279,6 +272,7 @@ export const Range: StoryObj<StoryPropsRange> = {
|
|
279
272
|
size: 'l',
|
280
273
|
view: 'default',
|
281
274
|
isDoubleCalendar: false,
|
275
|
+
closeAfterDateSelect: true,
|
282
276
|
dividerVariant: 'dash',
|
283
277
|
min: new Date(2024, 1, 1),
|
284
278
|
max: new Date(2024, 12, 29),
|
@@ -114,29 +114,6 @@ export const Default: StoryObj<CheckboxProps> = {
|
|
114
114
|
render: (args) => <StoryDefault {...args} />,
|
115
115
|
};
|
116
116
|
|
117
|
-
const StoryLong = (props: CheckboxProps) => {
|
118
|
-
const { width, ...otherProps } = props;
|
119
|
-
return (
|
120
|
-
<div style={{ width }}>
|
121
|
-
<Checkbox {...otherProps} />
|
122
|
-
</div>
|
123
|
-
);
|
124
|
-
};
|
125
|
-
|
126
|
-
export const LongText: StoryObj<CheckboxProps> = {
|
127
|
-
args: {
|
128
|
-
name: 'item.name',
|
129
|
-
value: 'item.value',
|
130
|
-
label:
|
131
|
-
'Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger',
|
132
|
-
description:
|
133
|
-
'Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger',
|
134
|
-
singleLine: true,
|
135
|
-
width: '300px',
|
136
|
-
},
|
137
|
-
render: (args) => <StoryLong {...args} />,
|
138
|
-
};
|
139
|
-
|
140
117
|
const StoryComplex = (props: CheckboxProps) => {
|
141
118
|
const [values, setValues] = useState({
|
142
119
|
russian: true,
|
package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx
CHANGED
@@ -186,12 +186,12 @@ const StoryRange = ({
|
|
186
186
|
secondValueError,
|
187
187
|
secondValueSuccess,
|
188
188
|
size,
|
189
|
+
lang,
|
189
190
|
...rest
|
190
191
|
}: StoryPropsRange) => {
|
191
192
|
const rangeRef = useRef<RangeInputRefs>(null);
|
192
193
|
|
193
194
|
const [isOpen, setIsOpen] = useState(false);
|
194
|
-
const [firstDate, setFirstDate] = useState<string | Date>('');
|
195
195
|
|
196
196
|
const iconSize = size === 'xs' ? 'xs' : 's';
|
197
197
|
const showDividerIcon = dividerVariant === 'icon';
|
@@ -238,12 +238,7 @@ const StoryRange = ({
|
|
238
238
|
onChangeSecondValue={(e, currentValue) => {
|
239
239
|
onChangeSecondValue(e, currentValue);
|
240
240
|
}}
|
241
|
-
|
242
|
-
setFirstDate(currentValue);
|
243
|
-
}}
|
244
|
-
onCommitSecondDate={(currentValue) => {
|
245
|
-
firstDate && currentValue && setIsOpen(false);
|
246
|
-
}}
|
241
|
+
lang={lang}
|
247
242
|
{...dividerIconProps}
|
248
243
|
{...rest}
|
249
244
|
/>
|
@@ -277,6 +272,7 @@ export const Range: StoryObj<StoryPropsRange> = {
|
|
277
272
|
size: 'l',
|
278
273
|
view: 'default',
|
279
274
|
isDoubleCalendar: false,
|
275
|
+
closeAfterDateSelect: true,
|
280
276
|
dividerVariant: 'dash',
|
281
277
|
min: new Date(2024, 1, 1),
|
282
278
|
max: new Date(2024, 12, 29),
|
@@ -1,25 +1,18 @@
|
|
1
|
-
var _excluded = ["label", "title", "subtitle", "children", "className"];
|
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
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
5
1
|
import React from 'react';
|
6
2
|
import { CellTextboxLabel } from '../CellTextboxLabel/CellTextboxLabel';
|
7
3
|
import { CellTextboxTitle } from '../CellTextboxTitle/CellTextboxTitle';
|
8
4
|
import { CellTextboxSubtitle } from '../CellTextboxSubtitle/CellTextboxSubtitle';
|
9
|
-
import { cx } from '../../../../utils';
|
10
5
|
import { CellTextboxStyled } from './CellTextbox.styles';
|
11
6
|
export var CellTextbox = function CellTextbox(_ref) {
|
12
7
|
var label = _ref.label,
|
13
8
|
title = _ref.title,
|
14
9
|
subtitle = _ref.subtitle,
|
15
|
-
children = _ref.children
|
16
|
-
className = _ref.className,
|
17
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
10
|
+
children = _ref.children;
|
18
11
|
return (
|
19
12
|
/*#__PURE__*/
|
20
13
|
// TODO: #1548
|
21
|
-
React.createElement(CellTextboxStyled,
|
22
|
-
className:
|
23
|
-
},
|
14
|
+
React.createElement(CellTextboxStyled, {
|
15
|
+
className: "cell-textbox"
|
16
|
+
}, label || title || subtitle ? /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(CellTextboxLabel, null, label), title && /*#__PURE__*/React.createElement(CellTextboxTitle, null, title), subtitle && /*#__PURE__*/React.createElement(CellTextboxSubtitle, null, subtitle)) : children)
|
24
17
|
);
|
25
18
|
};
|
@@ -1,10 +1,5 @@
|
|
1
|
-
var _excluded = ["children"];
|
2
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
3
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
4
1
|
import React from 'react';
|
5
2
|
import { StyledTextboxLabel } from './CellTextboxLabel.styles';
|
6
|
-
export var CellTextboxLabel = function CellTextboxLabel(
|
7
|
-
|
8
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
9
|
-
return /*#__PURE__*/React.createElement(StyledTextboxLabel, rest, children);
|
3
|
+
export var CellTextboxLabel = function CellTextboxLabel(props) {
|
4
|
+
return /*#__PURE__*/React.createElement(StyledTextboxLabel, null, props.children);
|
10
5
|
};
|
@@ -1,10 +1,5 @@
|
|
1
|
-
var _excluded = ["children"];
|
2
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
3
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
4
1
|
import React from 'react';
|
5
2
|
import { StyledTextboxSubtitle } from './CellTextboxSubtitle.styles';
|
6
|
-
export var CellTextboxSubtitle = function CellTextboxSubtitle(
|
7
|
-
|
8
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
9
|
-
return /*#__PURE__*/React.createElement(StyledTextboxSubtitle, rest, children);
|
3
|
+
export var CellTextboxSubtitle = function CellTextboxSubtitle(props) {
|
4
|
+
return /*#__PURE__*/React.createElement(StyledTextboxSubtitle, null, props.children);
|
10
5
|
};
|
@@ -1,16 +1,8 @@
|
|
1
|
-
var _excluded = ["children", "className"];
|
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
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
5
1
|
import React from 'react';
|
6
|
-
import { cx } from '../../../../utils';
|
7
2
|
import { StyledTextboxTitle } from './CellTextboxTitle.styles';
|
8
|
-
export var CellTextboxTitle = function CellTextboxTitle(
|
9
|
-
var children = _ref.children,
|
10
|
-
className = _ref.className,
|
11
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
3
|
+
export var CellTextboxTitle = function CellTextboxTitle(props) {
|
12
4
|
// TODO: #1548
|
13
|
-
return /*#__PURE__*/React.createElement(StyledTextboxTitle,
|
14
|
-
className:
|
15
|
-
},
|
5
|
+
return /*#__PURE__*/React.createElement(StyledTextboxTitle, {
|
6
|
+
className: "cell-textbox-title"
|
7
|
+
}, props.children);
|
16
8
|
};
|
@@ -65,8 +65,7 @@ export var checkboxRoot = function checkboxRoot(Root) {
|
|
65
65
|
"aria-describedby": uniqDescriptionId,
|
66
66
|
tabIndex: canFocused
|
67
67
|
})), /*#__PURE__*/React.createElement(StyledContentWrapper, {
|
68
|
-
htmlFor: checkboxId
|
69
|
-
className: singleLineClass
|
68
|
+
htmlFor: checkboxId
|
70
69
|
}, /*#__PURE__*/React.createElement(StyledTrigger, {
|
71
70
|
className: classes.checkboxTrigger
|
72
71
|
}, indeterminate ? _Indeterminate || (_Indeterminate = /*#__PURE__*/React.createElement(Indeterminate, null)) : _Done || (_Done = /*#__PURE__*/React.createElement(Done, null))), hasContent && /*#__PURE__*/React.createElement(StyledContent, {
|
@@ -4,7 +4,7 @@ import { css } from 'styled-components';
|
|
4
4
|
import styled from 'styled-components';
|
5
5
|
import { applyEllipsis, applyNoUserSelect } from '../../mixins';
|
6
6
|
import { classes, tokens } from './Checkbox.tokens';
|
7
|
-
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n margin: var(", ");\n\n ", ";\n\n position: relative;\n align-items: flex-start;\n display: flex;\n\n .", " {\n ", ";\n }\n"])), tokens.margin, /*#__PURE__*/applyNoUserSelect(), classes.singleLine, /*#__PURE__*/applyEllipsis());
|
7
|
+
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n margin: var(", ");\n\n ", ";\n\n position: relative;\n align-items: flex-start;\n display: flex;\n cursor: pointer;\n\n .", " {\n ", ";\n }\n"])), tokens.margin, /*#__PURE__*/applyNoUserSelect(), classes.singleLine, /*#__PURE__*/applyEllipsis());
|
8
8
|
export var StyledInput = /*#__PURE__*/styled.input.withConfig({
|
9
9
|
componentId: "plasma-new-hope__sc-tydhc1-0"
|
10
10
|
})(["position:absolute;&:focus{outline:0 none;}width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);"]);
|
@@ -13,7 +13,7 @@ export var StyledTrigger = /*#__PURE__*/styled.div.withConfig({
|
|
13
13
|
})(["margin:var(", ");width:var(", ");height:var(", ");border-radius:var(", ");position:relative;display:flex;align-items:center;justify-content:center;background:var(", ");border:0.125rem solid var(", ");box-sizing:border-box;flex-shrink:0;flex-grow:0;input:not(:indeterminate) + label & div{transform:scale(0);transition:transform 0.15s ease-in-out;}input:checked + label & div{transform:scale(1);}"], tokens.triggerMargin, tokens.triggerSize, tokens.triggerSize, tokens.triggerBorderRadius, tokens.triggerBackgroundColor, tokens.triggerBorderColor);
|
14
14
|
export var StyledContentWrapper = /*#__PURE__*/styled.label.withConfig({
|
15
15
|
componentId: "plasma-new-hope__sc-tydhc1-2"
|
16
|
-
})(["position:relative;align-items:flex-start;display:flex;width:inherit;
|
16
|
+
})(["position:relative;align-items:flex-start;display:flex;width:100%;cursor:inherit;"]);
|
17
17
|
export var StyledContent = /*#__PURE__*/styled.div.withConfig({
|
18
18
|
componentId: "plasma-new-hope__sc-tydhc1-3"
|
19
19
|
})(["display:flex;flex-direction:column;margin-top:var(", ");margin-left:var(", ");"], tokens.contentTopOffset, tokens.contentLeftOffset);
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
|
1
|
+
var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
|
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."); }
|
@@ -95,6 +95,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
95
95
|
closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
|
96
96
|
_ref$closeOnEsc = _ref.closeOnEsc,
|
97
97
|
closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
|
98
|
+
_ref$closeAfterDateSe = _ref.closeAfterDateSelect,
|
99
|
+
closeAfterDateSelect = _ref$closeAfterDateSe === void 0 ? true : _ref$closeAfterDateSe,
|
98
100
|
offset = _ref.offset,
|
99
101
|
onToggle = _ref.onToggle,
|
100
102
|
onChange = _ref.onChange,
|
@@ -147,6 +149,14 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
147
149
|
_useState14 = _slicedToArray(_useState13, 2),
|
148
150
|
inputSecondValue = _useState14[0],
|
149
151
|
setInputSecondValue = _useState14[1];
|
152
|
+
var _useState15 = useState(Boolean(calendarFirstValue && calendarSecondValue)),
|
153
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
154
|
+
fullDateEntered = _useState16[0],
|
155
|
+
setFullDateEntered = _useState16[1];
|
156
|
+
var _useState17 = useState(false),
|
157
|
+
_useState18 = _slicedToArray(_useState17, 2),
|
158
|
+
secondTextFieldClicked = _useState18[0],
|
159
|
+
setSecondTextFieldClicked = _useState18[1];
|
150
160
|
var setFirstInputValue = function setFirstInputValue(value) {
|
151
161
|
setInputFirstValue(value);
|
152
162
|
if (onChange) {
|
@@ -207,12 +217,12 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
207
217
|
}),
|
208
218
|
handleChangeSecondValue = _useDatePicker2.handleChangeValue,
|
209
219
|
handleCommitSecondDate = _useDatePicker2.handleCommitDate;
|
210
|
-
var handleToggle = function handleToggle(
|
220
|
+
var handleToggle = function handleToggle(currentOpened, event) {
|
211
221
|
var _firstInputRef$curren, _secondInputRef$curre;
|
212
222
|
if (disabled || readOnly) {
|
213
223
|
return;
|
214
224
|
}
|
215
|
-
var isCalendarOpen = (firstInputRef !== null && firstInputRef !== void 0 && (_firstInputRef$curren = firstInputRef.current) !== null && _firstInputRef$curren !== void 0 && _firstInputRef$curren.contains(event.target || null) || secondInputRef !== null && secondInputRef !== void 0 && (_secondInputRef$curre = secondInputRef.current) !== null && _secondInputRef$curre !== void 0 && _secondInputRef$curre.contains(event.target || null)) && event.code !== keys.Escape ? true :
|
225
|
+
var isCalendarOpen = (firstInputRef !== null && firstInputRef !== void 0 && (_firstInputRef$curren = firstInputRef.current) !== null && _firstInputRef$curren !== void 0 && _firstInputRef$curren.contains((event === null || event === void 0 ? void 0 : event.target) || null) || secondInputRef !== null && secondInputRef !== void 0 && (_secondInputRef$curre = secondInputRef.current) !== null && _secondInputRef$curre !== void 0 && _secondInputRef$curre.contains((event === null || event === void 0 ? void 0 : event.target) || null)) && (event === null || event === void 0 ? void 0 : event.code) !== keys.Escape ? true : currentOpened;
|
216
226
|
if (!isCalendarOpen) {
|
217
227
|
if (calendarFirstValue && !calendarSecondValue) {
|
218
228
|
var _secondInputRef$curre2;
|
@@ -223,11 +233,22 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
223
233
|
firstInputRef === null || firstInputRef === void 0 || (_firstInputRef$curren2 = firstInputRef.current) === null || _firstInputRef$curren2 === void 0 || _firstInputRef$curren2.focus();
|
224
234
|
}
|
225
235
|
}
|
236
|
+
if (!isCalendarOpen) {
|
237
|
+
setSecondTextFieldClicked(false);
|
238
|
+
}
|
226
239
|
if (onToggle) {
|
227
240
|
return onToggle(isCalendarOpen, event);
|
228
241
|
}
|
229
242
|
setIsInnerOpen(isCalendarOpen);
|
230
243
|
};
|
244
|
+
var handleFocusFirstTextField = function handleFocusFirstTextField(event) {
|
245
|
+
onFocusFirstTextfield === null || onFocusFirstTextfield === void 0 || onFocusFirstTextfield(event);
|
246
|
+
setSecondTextFieldClicked(false);
|
247
|
+
};
|
248
|
+
var handleFocusSecondTextField = function handleFocusSecondTextField(event) {
|
249
|
+
onFocusSecondTextfield === null || onFocusSecondTextfield === void 0 || onFocusSecondTextfield(event);
|
250
|
+
setSecondTextFieldClicked(true);
|
251
|
+
};
|
231
252
|
var handleBlur = function handleBlur(event, outerHandler) {
|
232
253
|
if (!inputFirstValue || !inputSecondValue) {
|
233
254
|
outerHandler === null || outerHandler === void 0 || outerHandler(event);
|
@@ -267,6 +288,37 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
267
288
|
closeOnEsc: closeOnEsc
|
268
289
|
}),
|
269
290
|
onKeyDown = _useKeyNavigation.onKeyDown;
|
291
|
+
var handleChangeStartOfRange = function handleChangeStartOfRange(chosenDate, dateInfo) {
|
292
|
+
if (!fullDateEntered) {
|
293
|
+
handleCommitFirstDate(chosenDate, false, true, dateInfo);
|
294
|
+
handleCommitSecondDate('');
|
295
|
+
return;
|
296
|
+
}
|
297
|
+
var prevValue = secondTextFieldClicked ? calendarFirstValue : calendarSecondValue;
|
298
|
+
var _getSortedValues3 = getSortedValues([prevValue, chosenDate]),
|
299
|
+
_getSortedValues4 = _slicedToArray(_getSortedValues3, 2),
|
300
|
+
first = _getSortedValues4[0],
|
301
|
+
second = _getSortedValues4[1];
|
302
|
+
handleCommitFirstDate(first, false, true, dateInfo);
|
303
|
+
handleCommitSecondDate(second, false, true, dateInfo);
|
304
|
+
if (!firstValueError && !secondValueError && closeAfterDateSelect) {
|
305
|
+
handleToggle(false);
|
306
|
+
}
|
307
|
+
};
|
308
|
+
var handleChangeCalendarValue = function handleChangeCalendarValue(_ref2, dateInfo) {
|
309
|
+
var _ref3 = _slicedToArray(_ref2, 2),
|
310
|
+
firstDate = _ref3[0],
|
311
|
+
secondDate = _ref3[1];
|
312
|
+
if (firstDate) {
|
313
|
+
handleCommitFirstDate(firstDate, false, true, dateInfo);
|
314
|
+
}
|
315
|
+
if (secondDate) {
|
316
|
+
handleCommitSecondDate(secondDate, false, true, dateInfo);
|
317
|
+
}
|
318
|
+
if (firstDate && secondDate && !firstValueError && !secondValueError && closeAfterDateSelect) {
|
319
|
+
handleToggle(false);
|
320
|
+
}
|
321
|
+
};
|
270
322
|
var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
|
271
323
|
ref: rangeRef,
|
272
324
|
autoComplete: autoComplete,
|
@@ -312,8 +364,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
312
364
|
rangeRef === null || rangeRef === void 0 || (_rangeRef$current4 = rangeRef.current) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.firstTextField()) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.current) === null || _rangeRef$current4 === void 0 || _rangeRef$current4.focus();
|
313
365
|
}
|
314
366
|
},
|
315
|
-
onFocusFirstTextfield:
|
316
|
-
onFocusSecondTextfield:
|
367
|
+
onFocusFirstTextfield: handleFocusFirstTextField,
|
368
|
+
onFocusSecondTextfield: handleFocusSecondTextField,
|
317
369
|
onBlurFirstTextfield: function onBlurFirstTextfield(event) {
|
318
370
|
return handleBlur(event, _onBlurFirstTextfield);
|
319
371
|
},
|
@@ -362,8 +414,13 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
362
414
|
lang: lang
|
363
415
|
}));
|
364
416
|
}, [format, lang]);
|
365
|
-
|
366
|
-
|
417
|
+
useEffect(function () {
|
418
|
+
if (calendarFirstValue && calendarSecondValue) {
|
419
|
+
setFullDateEntered(true);
|
420
|
+
}
|
421
|
+
}, [calendarFirstValue, calendarSecondValue]);
|
422
|
+
var RootWrapper = useCallback(function (_ref4) {
|
423
|
+
var children = _ref4.children;
|
367
424
|
return /*#__PURE__*/React.createElement(Root, {
|
368
425
|
view: view,
|
369
426
|
size: size,
|
@@ -405,20 +462,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
405
462
|
lang: lang,
|
406
463
|
isDoubleCalendar: isDoubleCalendar,
|
407
464
|
rootWrapper: RootWrapper,
|
408
|
-
onChangeStartOfRange:
|
409
|
-
|
410
|
-
handleCommitSecondDate('');
|
411
|
-
},
|
412
|
-
onChangeValue: function onChangeValue(_ref3, dateInfo) {
|
413
|
-
var _ref4 = _slicedToArray(_ref3, 2),
|
414
|
-
firstDate = _ref4[0],
|
415
|
-
secondDate = _ref4[1];
|
416
|
-
firstDate && handleCommitFirstDate(firstDate, false, true, dateInfo);
|
417
|
-
secondDate && handleCommitSecondDate(secondDate, false, true, dateInfo);
|
418
|
-
if (firstDate && secondDate && !firstValueError && !secondValueError) {
|
419
|
-
setIsInnerOpen(false);
|
420
|
-
}
|
421
|
-
}
|
465
|
+
onChangeStartOfRange: handleChangeStartOfRange,
|
466
|
+
onChangeValue: handleChangeCalendarValue
|
422
467
|
}), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({
|
423
468
|
name: name,
|
424
469
|
type: "hidden",
|
@@ -57,8 +57,7 @@ export var radioboxRoot = function radioboxRoot(Root) {
|
|
57
57
|
"aria-describedby": uniqDescriptionId,
|
58
58
|
tabIndex: canFocused
|
59
59
|
})), /*#__PURE__*/React.createElement(StyledContentWrapper, {
|
60
|
-
htmlFor: radioboxId
|
61
|
-
className: singleLineClass
|
60
|
+
htmlFor: radioboxId
|
62
61
|
}, /*#__PURE__*/React.createElement(StyledTrigger, {
|
63
62
|
className: classes.radioboxTrigger
|
64
63
|
}, _StyledEllipse || (_StyledEllipse = /*#__PURE__*/React.createElement(StyledEllipse, null))), hasContent && /*#__PURE__*/React.createElement(StyledContent, {
|
@@ -9,4 +9,4 @@ var mappingOverride = /*#__PURE__*/"\n ".concat(checkboxTokens.labelFontFamil
|
|
9
9
|
export var StyledEllipse = /*#__PURE__*/styled.div.withConfig({
|
10
10
|
componentId: "plasma-new-hope__sc-rqiilp-0"
|
11
11
|
})(["width:var(", ");height:var(", ");border-radius:var(", ");background-color:var(", ");transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"], tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseColor);
|
12
|
-
export var base = /*#__PURE__*/css(["", ";margin:var(", ");", ";position:relative;align-items:flex-start;display:flex;.", "{", ";}"], mappingOverride, tokens.margin, /*#__PURE__*/applyNoUserSelect(), classes.singleLine, /*#__PURE__*/applyEllipsis());
|
12
|
+
export var base = /*#__PURE__*/css(["", ";margin:var(", ");", ";position:relative;align-items:flex-start;display:flex;cursor:pointer;.", "{", ";}"], mappingOverride, tokens.margin, /*#__PURE__*/applyNoUserSelect(), classes.singleLine, /*#__PURE__*/applyEllipsis());
|