@salutejs/plasma-new-hope 0.242.0-canary.1702.12829190112.0 → 0.242.0-canary.1709.12829247465.0

package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -192,6 +192,7 @@ const StoryRange = ({
     const rangeRef = useRef<RangeInputRefs>(null);
 
     const [isOpen, setIsOpen] = useState(false);
+    const [firstDate, setFirstDate] = useState<string | Date>('');
 
     const iconSize = size === 'xs' ? 'xs' : 's';
     const showDividerIcon = dividerVariant === 'icon';
@@ -238,6 +239,12 @@ const StoryRange = ({
             onChangeSecondValue={(e, currentValue) => {
                 onChangeSecondValue(e, currentValue);
             }}
+            onCommitFirstDate={(currentValue) => {
+                setFirstDate(currentValue);
+            }}
+            onCommitSecondDate={(currentValue) => {
+                firstDate && currentValue && setIsOpen(false);
+            }}
             lang={lang}
             {...dividerIconProps}
             {...rest}
@@ -272,7 +279,6 @@ export const Range: StoryObj<StoryPropsRange> = {
         size: 'l',
         view: 'default',
         isDoubleCalendar: false,
-        closeAfterDateSelect: true,
         dividerVariant: 'dash',
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),

package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx

@@ -186,12 +186,12 @@ const StoryRange = ({
     secondValueError,
     secondValueSuccess,
     size,
-    lang,
     ...rest
 }: StoryPropsRange) => {
     const rangeRef = useRef<RangeInputRefs>(null);
 
     const [isOpen, setIsOpen] = useState(false);
+    const [firstDate, setFirstDate] = useState<string | Date>('');
 
     const iconSize = size === 'xs' ? 'xs' : 's';
     const showDividerIcon = dividerVariant === 'icon';
@@ -238,7 +238,12 @@ const StoryRange = ({
             onChangeSecondValue={(e, currentValue) => {
                 onChangeSecondValue(e, currentValue);
             }}
-            lang={lang}
+            onCommitFirstDate={(currentValue) => {
+                setFirstDate(currentValue);
+            }}
+            onCommitSecondDate={(currentValue) => {
+                firstDate && currentValue && setIsOpen(false);
+            }}
             {...dividerIconProps}
             {...rest}
         />
@@ -272,7 +277,6 @@ export const Range: StoryObj<StoryPropsRange> = {
         size: 'l',
         view: 'default',
         isDoubleCalendar: false,
-        closeAfterDateSelect: true,
         dividerVariant: 'dash',
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),

package/styled-components/es/components/Combobox/Combobox.template-doc.mdx

@@ -25,6 +25,11 @@ type Items = Array<{
          * Метка-подпись к item
          */
         label: string;
+        /**
+        * Сторона открытия вложенного дропдауна относительно текущего элемента
+        * @default right
+        */
+        placement?: Placement;
         /**
          * Список дочерних items.
          */

package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js

@@ -32,7 +32,7 @@ export var Inner = function Inner(_ref) {
   if (!isEmpty(item === null || item === void 0 ? void 0 : item.items)) {
     var _item$items;
     return /*#__PURE__*/React.createElement(FloatingPopover, {
-      placement: "right-start",
+      placement: (item === null || item === void 0 ? void 0 : item.placement) || 'right-start',
       opened: isCurrentListOpen,
       onToggle: handleToggle,
       offset: 2,

package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js

@@ -1,4 +1,4 @@
-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"];
+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"];
 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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 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,8 +95,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
       _ref$closeOnEsc = _ref.closeOnEsc,
       closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
-      _ref$closeAfterDateSe = _ref.closeAfterDateSelect,
-      closeAfterDateSelect = _ref$closeAfterDateSe === void 0 ? true : _ref$closeAfterDateSe,
       offset = _ref.offset,
       onToggle = _ref.onToggle,
       onChange = _ref.onChange,
@@ -149,14 +147,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState14 = _slicedToArray(_useState13, 2),
       inputSecondValue = _useState14[0],
       setInputSecondValue = _useState14[1];
-    var _useState15 = useState(Boolean(calendarFirstValue && calendarSecondValue)),
-      _useState16 = _slicedToArray(_useState15, 2),
-      fullDateEntered = _useState16[0],
-      setFullDateEntered = _useState16[1];
-    var _useState17 = useState(false),
-      _useState18 = _slicedToArray(_useState17, 2),
-      secondTextFieldClicked = _useState18[0],
-      setSecondTextFieldClicked = _useState18[1];
     var setFirstInputValue = function setFirstInputValue(value) {
       setInputFirstValue(value);
       if (onChange) {
@@ -217,12 +207,12 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       }),
       handleChangeSecondValue = _useDatePicker2.handleChangeValue,
       handleCommitSecondDate = _useDatePicker2.handleCommitDate;
-    var handleToggle = function handleToggle(currentOpened, event) {
+    var handleToggle = function handleToggle(opened, event) {
       var _firstInputRef$curren, _secondInputRef$curre;
       if (disabled || readOnly) {
         return;
       }
-      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;
+      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 : opened;
       if (!isCalendarOpen) {
         if (calendarFirstValue && !calendarSecondValue) {
           var _secondInputRef$curre2;
@@ -233,22 +223,11 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
           firstInputRef === null || firstInputRef === void 0 || (_firstInputRef$curren2 = firstInputRef.current) === null || _firstInputRef$curren2 === void 0 || _firstInputRef$curren2.focus();
         }
       }
-      if (!isCalendarOpen) {
-        setSecondTextFieldClicked(false);
-      }
       if (onToggle) {
         return onToggle(isCalendarOpen, event);
       }
       setIsInnerOpen(isCalendarOpen);
     };
-    var handleFocusFirstTextField = function handleFocusFirstTextField(event) {
-      onFocusFirstTextfield === null || onFocusFirstTextfield === void 0 || onFocusFirstTextfield(event);
-      setSecondTextFieldClicked(false);
-    };
-    var handleFocusSecondTextField = function handleFocusSecondTextField(event) {
-      onFocusSecondTextfield === null || onFocusSecondTextfield === void 0 || onFocusSecondTextfield(event);
-      setSecondTextFieldClicked(true);
-    };
     var handleBlur = function handleBlur(event, outerHandler) {
       if (!inputFirstValue || !inputSecondValue) {
         outerHandler === null || outerHandler === void 0 || outerHandler(event);
@@ -288,37 +267,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         closeOnEsc: closeOnEsc
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
-    var handleChangeStartOfRange = function handleChangeStartOfRange(chosenDate, dateInfo) {
-      if (!fullDateEntered) {
-        handleCommitFirstDate(chosenDate, false, true, dateInfo);
-        handleCommitSecondDate('');
-        return;
-      }
-      var prevValue = secondTextFieldClicked ? calendarFirstValue : calendarSecondValue;
-      var _getSortedValues3 = getSortedValues([prevValue, chosenDate]),
-        _getSortedValues4 = _slicedToArray(_getSortedValues3, 2),
-        first = _getSortedValues4[0],
-        second = _getSortedValues4[1];
-      handleCommitFirstDate(first, false, true, dateInfo);
-      handleCommitSecondDate(second, false, true, dateInfo);
-      if (!firstValueError && !secondValueError && closeAfterDateSelect) {
-        handleToggle(false);
-      }
-    };
-    var handleChangeCalendarValue = function handleChangeCalendarValue(_ref2, dateInfo) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        firstDate = _ref3[0],
-        secondDate = _ref3[1];
-      if (firstDate) {
-        handleCommitFirstDate(firstDate, false, true, dateInfo);
-      }
-      if (secondDate) {
-        handleCommitSecondDate(secondDate, false, true, dateInfo);
-      }
-      if (firstDate && secondDate && !firstValueError && !secondValueError && closeAfterDateSelect) {
-        handleToggle(false);
-      }
-    };
     var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
       ref: rangeRef,
       autoComplete: autoComplete,
@@ -364,8 +312,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
           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();
         }
       },
-      onFocusFirstTextfield: handleFocusFirstTextField,
-      onFocusSecondTextfield: handleFocusSecondTextField,
+      onFocusFirstTextfield: onFocusFirstTextfield,
+      onFocusSecondTextfield: onFocusSecondTextfield,
       onBlurFirstTextfield: function onBlurFirstTextfield(event) {
         return handleBlur(event, _onBlurFirstTextfield);
       },
@@ -414,13 +362,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         lang: lang
       }));
     }, [format, lang]);
-    useEffect(function () {
-      if (calendarFirstValue && calendarSecondValue) {
-        setFullDateEntered(true);
-      }
-    }, [calendarFirstValue, calendarSecondValue]);
-    var RootWrapper = useCallback(function (_ref4) {
-      var children = _ref4.children;
+    var RootWrapper = useCallback(function (_ref2) {
+      var children = _ref2.children;
       return /*#__PURE__*/React.createElement(Root, {
         view: view,
         size: size,
@@ -462,8 +405,20 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       lang: lang,
       isDoubleCalendar: isDoubleCalendar,
       rootWrapper: RootWrapper,
-      onChangeStartOfRange: handleChangeStartOfRange,
-      onChangeValue: handleChangeCalendarValue
+      onChangeStartOfRange: function onChangeStartOfRange(firstDate, dateInfo) {
+        handleCommitFirstDate(firstDate, false, true, dateInfo);
+        handleCommitSecondDate('');
+      },
+      onChangeValue: function onChangeValue(_ref3, dateInfo) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          firstDate = _ref4[0],
+          secondDate = _ref4[1];
+        firstDate && handleCommitFirstDate(firstDate, false, true, dateInfo);
+        secondDate && handleCommitSecondDate(secondDate, false, true, dateInfo);
+        if (firstDate && secondDate && !firstValueError && !secondValueError) {
+          setIsInnerOpen(false);
+        }
+      }
     }), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({
       name: name,
       type: "hidden",

package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx

@@ -29,6 +29,10 @@ type Items = Array<{
          * Метка-подпись к item
          */
         label: string;
+        /**
+        * Сторона открытия вложенного дропдауна относительно текущего элемента;
+        */
+        placement: DropdownPlacement;
         /**
          * Список дочерних items.
          */

package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js

@@ -3,6 +3,7 @@ import { safeUseId } from '@salutejs/plasma-core';
 import { DropdownItem } from '../DropdownItem/DropdownItem';
 import { Ul } from '../../Dropdown.styles';
 import { FloatingPopover } from '../../FloatingPopover';
+import { getPlacement } from '../../utils';
 var DropdownInner = function DropdownInner(_ref) {
   var item = _ref.item,
     currentLevel = _ref.currentLevel,
@@ -33,7 +34,7 @@ var DropdownInner = function DropdownInner(_ref) {
   var nextLevel = currentLevel + 1;
   if (item !== null && item !== void 0 && item.items) {
     return /*#__PURE__*/React.createElement(FloatingPopover, {
-      placement: "right-start",
+      placement: getPlacement((item === null || item === void 0 ? void 0 : item.placement) || 'right'),
       opened: isCurrentListOpen,
       onToggle: handleToggle,
       trigger: trigger,