@salutejs/plasma-new-hope 0.326.0-canary.2013.15518408913.0 → 0.326.0-canary.2013.15538813402.0

package/styled-components/cjs/components/Carousel/CarouselNew/Carousel.js

@@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.carouselNewRoot = exports.carouselNewConfig = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"));
+var _Icon = /*#__PURE__*/require("../../_Icon");
+var _Carousel = /*#__PURE__*/require("./Carousel.tokens");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_view/base");
-var _Carousel = /*#__PURE__*/require("./Carousel.styles");
+var _Carousel2 = /*#__PURE__*/require("./Carousel.styles");
 var _useCarousel2 = /*#__PURE__*/require("./hooks/useCarousel");
 var _useDragScroll = /*#__PURE__*/require("./hooks/useDragScroll");
 var _ui = /*#__PURE__*/require("./ui");
-var _br;
+var _IconDisclosureLeft, _IconDisclosureRight;
 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); }
 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; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -20,59 +22,70 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // import { useForkRef } from '@salutejs/plasma-core';
-// import { base, CarouselWrapper, CarouselTrack } from './Carousel.styles';
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 /**
  * Компонент для создания списков с прокруткой.
  */
 var carouselNewRoot = exports.carouselNewRoot = function carouselNewRoot(Root) {
-  return /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
-  // @ts-ignore
-  ref) {
+  return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     var view = _ref.view,
       size = _ref.size,
-      outerIndex = _ref.index,
       scrollAlign = _ref.scrollAlign,
-      detectActive = _ref.detectActive,
-      detectThreshold = _ref.detectThreshold,
-      onIndexChange = _ref.onIndexChange,
       children = _ref.children,
       _ref$isDragScrollDisa = _ref.isDragScrollDisabled,
       isDragScrollDisabled = _ref$isDragScrollDisa === void 0 ? false : _ref$isDragScrollDisa,
-      paginationOptions = _ref.paginationOptions;
+      gap = _ref.gap,
+      paginationOptions = _ref.paginationOptions,
+      className = _ref.className,
+      style = _ref.style;
     var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
-      internalIndex = _useState2[0],
-      setInternalIndex = _useState2[1];
-    var index = outerIndex !== null && outerIndex !== void 0 ? outerIndex : internalIndex;
-    var handleChangeIndex = (0, _react.useCallback)(function (index) {
-      if (onIndexChange) {
-        onIndexChange(index);
-      }
-      setInternalIndex(index);
-    }, [onIndexChange]);
-
-    // const { scrollRef, trackRef } = useCarousel({
+      index = _useState2[0],
+      setIndex = _useState2[1];
+    var slidesAmount = _react.Children.count(children);
+    var handleClickLeft = function handleClickLeft() {
+      setIndex(Math.max(0, index - 1));
+    };
+    var handleClickRight = function handleClickRight() {
+      setIndex(Math.min(slidesAmount - 1, index + 1));
+    };
     var _useCarousel = (0, _useCarousel2.useCarousel)({
         index: index,
         scrollAlign: scrollAlign,
-        detectActive: detectActive,
-        detectThreshold: detectThreshold,
-        onIndexChange: onIndexChange
+        onIndexChange: setIndex
       }),
-      scrollRef = _useCarousel.scrollRef;
-
-    // const handleRef = useForkRef(scrollRef, ref);
-
+      scrollRef = _useCarousel.scrollRef,
+      trackRef = _useCarousel.trackRef;
     (0, _useDragScroll.useDragScroll)(scrollRef, isDragScrollDisabled);
-    var slidesAmount = _react.Children.count(children);
     return /*#__PURE__*/_react["default"].createElement(Root, {
+      className: className,
+      style: style,
       size: size,
       view: view,
-      index: index
-    }, _br || (_br = /*#__PURE__*/_react["default"].createElement("br", null)), !(paginationOptions !== null && paginationOptions !== void 0 && paginationOptions.disabled) && /*#__PURE__*/_react["default"].createElement(_ui.Dots, {
+      ref: ref
+    }, /*#__PURE__*/_react["default"].createElement(_Carousel2.ControlsWrapper, null, index !== 0 && /*#__PURE__*/_react["default"].createElement(_Carousel2.IconButton, {
+      pin: "circle-circle",
+      onClick: handleClickLeft
+    }, _IconDisclosureLeft || (_IconDisclosureLeft = /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureLeft, {
+      size: "m",
+      color: "inherit"
+    }))), /*#__PURE__*/_react["default"].createElement(_Carousel2.CarouselWrapper, {
+      ref: scrollRef
+    }, /*#__PURE__*/_react["default"].createElement(_Carousel2.CarouselTrack, {
+      ref: trackRef
+      // aria-live={ariaLive}
+      ,
+      gap: gap
+    }, children)), index !== slidesAmount - 1 && /*#__PURE__*/_react["default"].createElement(_Carousel2.IconButton, {
+      className: _Carousel.classes.rightControlButton,
+      pin: "circle-circle",
+      onClick: handleClickRight
+    }, _IconDisclosureRight || (_IconDisclosureRight = /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRight, {
+      size: "m",
+      color: "inherit"
+    })))), !(paginationOptions !== null && paginationOptions !== void 0 && paginationOptions.disabled) && /*#__PURE__*/_react["default"].createElement(_ui.Dots, {
       index: index,
-      onChange: handleChangeIndex,
+      onChange: setIndex,
       visibleCount: (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.visibleDots) || slidesAmount,
       count: slidesAmount,
       centered: (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.centered) || false
@@ -83,7 +96,7 @@ var carouselNewConfig = exports.carouselNewConfig = {
   name: 'Carousel',
   tag: 'div',
   layout: carouselNewRoot,
-  base: _Carousel.base,
+  base: _Carousel2.base,
   variations: {
     view: {
       css: _base2.base

package/styled-components/cjs/components/Carousel/CarouselNew/Carousel.styles.js

@@ -4,29 +4,28 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.CarouselWrapper = exports.CarouselTrack = exports.CarouselGridWrapper = void 0;
+exports.base = exports.IconButtonComponent = exports.IconButton = exports.ControlsWrapper = exports.CarouselWrapper = exports.CarouselTrack = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("styled-components"));
+var _engines = /*#__PURE__*/require("../../../engines");
+var _IconButton = /*#__PURE__*/require("../../IconButton");
+var _Carousel = /*#__PURE__*/require("./Carousel.tokens");
 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); }
 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; }
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;padding:20px 0;border-top:2px solid #ff000038;&:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#ff000038;}"]);
-
-/**
- * Компонент применяется, если требуется компенсировать отступы контейнера в сетке.
- * При обертывании вокруг ``Carousel``, добавляет карусели и ее прокрутке дополнительные отступы.
- * Стилизованный компонент, обладающий всеми свойствами ``div``.
- */
-var CarouselGridWrapper = exports.CarouselGridWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-vln28v-0"
-})(["overflow:hidden;margin-left:calc(var(--plasma-grid-margin) * -1);margin-right:calc(var(--plasma-grid-margin) * -1);"]);
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_IconButton.iconButtonConfig);
+var IconButtonComponent = exports.IconButtonComponent = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;"]);
 var CarouselWrapper = exports.CarouselWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-vln28v-1"
-})(["position:relative;margin:0;padding:0;list-style:none;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:", ";", " &{scroll-padding:0 var(--plasma-grid-margin);padding-left:var(--plasma-grid-margin);}user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);"], function (_ref) {
-  var scrollSnapType = _ref.scrollSnapType;
-  return "x ".concat(scrollSnapType);
-}, CarouselGridWrapper);
+  componentId: "plasma-new-hope__sc-vln28v-0"
+})(["position:relative;margin:0;padding:0;list-style:none;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);"]);
 var CarouselTrack = exports.CarouselTrack = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-vln28v-2"
-})(["display:inline-flex;flex-direction:row;gap:", ";"], function (_ref2) {
-  var gap = _ref2.gap;
+  componentId: "plasma-new-hope__sc-vln28v-1"
+})(["display:inline-flex;flex-direction:row;gap:", ";"], function (_ref) {
+  var gap = _ref.gap;
   return gap || 0;
-});
+});
+var IconButton = exports.IconButton = /*#__PURE__*/(0, _styledComponents["default"])(IconButtonComponent).withConfig({
+  componentId: "plasma-new-hope__sc-vln28v-2"
+})(["position:absolute;top:50%;transform:translateY(-50%);left:0.75rem;z-index:10;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(", ");", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);", ":2.5rem;", ":2.5rem;", ":1rem;", ":0.625rem;&.", "{left:auto;right:0.75rem;}"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonLoadingBackgroundColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive, _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _Carousel.classes.rightControlButton);
+var ControlsWrapper = exports.ControlsWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-vln28v-3"
+})(["position:relative;"]);

package/styled-components/cjs/components/Carousel/CarouselNew/Carousel.tokens.js

@@ -13,7 +13,8 @@ var classes = exports.classes = {
   temporaryNatural: 'dot-temporary-natural',
   shrinking: 'dot-shrinking',
   availableDotsLeft: 'dot-available-dots-left',
-  availableDotsRight: 'dot-available-dots-right'
+  availableDotsRight: 'dot-available-dots-right',
+  rightControlButton: 'carousel-right-control-button'
 };
 var tokens = exports.tokens = {
   paginationDotBackground: '--plasma-carousel-pagination-dot-background',

package/styled-components/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js

@@ -236,13 +236,13 @@ var THROTTLE_DEFAULT_MS = 100;
 var DEBOUNCE_DEFAULT_MS = 150;
 var useCarousel = exports.useCarousel = function useCarousel(_ref4) {
   var index = _ref4.index,
+    onIndexChange = _ref4.onIndexChange,
     _ref4$detectActive = _ref4.detectActive,
     detectActive = _ref4$detectActive === void 0 ? false : _ref4$detectActive,
     _ref4$detectThreshold = _ref4.detectThreshold,
     detectThreshold = _ref4$detectThreshold === void 0 ? 0.5 : _ref4$detectThreshold,
     _ref4$scrollAlign = _ref4.scrollAlign,
     scrollAlign = _ref4$scrollAlign === void 0 ? 'center' : _ref4$scrollAlign,
-    onIndexChange = _ref4.onIndexChange,
     _ref4$throttleMs = _ref4.throttleMs,
     throttleMs = _ref4$throttleMs === void 0 ? THROTTLE_DEFAULT_MS : _ref4$throttleMs,
     _ref4$debounceMs = _ref4.debounceMs,

package/styled-components/cjs/components/Carousel/CarouselNew/ui/Dots/Dots.styles.js

@@ -9,7 +9,7 @@ var _Carousel = /*#__PURE__*/require("../../Carousel.tokens");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-feybgn-0"
-})(["display:flex;align-items:center;justify-content:center;--duration:0.3s;--half-duration:0.15s;"]);
+})(["display:flex;align-items:center;justify-content:center;margin-top:0.75rem;--duration:0.3s;--half-duration:0.15s;"]);
 var TransitionWrapper = exports.TransitionWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-feybgn-1"
 })(["position:relative;display:flex;transition:transform 0s ease;&.", "{transition:transform var(--duration) ease;}& .", "{width:0.5rem;height:0.5rem;margin:0 0.25rem;cursor:pointer;background-color:var(", ");border-radius:100%;&.", "{background-color:var(", ");}@keyframes fadeOut{from{transform:scale(0.75);opacity:1;}to{transform:scale(0);opacity:0;}}&.", "{animation:fadeOut var(--half-duration) ease forwards;}@keyframes shrinking{from{transform:scale(1);}to{transform:scale(0.75);}}&.", "{animation:shrinking var(--half-duration) var(--half-duration) ease forwards;}}"], _Carousel.classes.animating, _Carousel.classes.dot, _Carousel.tokens.paginationDotBackground, _Carousel.classes.active, _Carousel.tokens.paginationDotActiveBackground, _Carousel.classes.animateOut, _Carousel.classes.shrinking);

package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js

@@ -19,7 +19,7 @@ var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
 var _SingleDate = /*#__PURE__*/require("./SingleDate.styles");
-var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "hasRequiredIndicator", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "calendarContainerWidth", "calendarContainerHeight", "stretched", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange", "autoComplete"];
+var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "hasRequiredIndicator", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "calendarContainerWidth", "calendarContainerHeight", "stretched", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange", "autoComplete"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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); }
 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; }
@@ -98,6 +98,8 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(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,
       calendarContainerWidth = _ref.calendarContainerWidth,
       calendarContainerHeight = _ref.calendarContainerHeight,
@@ -172,14 +174,14 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       datePickerErrorClass = _useDatePicker.datePickerErrorClass,
       datePickerSuccessClass = _useDatePicker.datePickerSuccessClass,
       handleChangeValue = _useDatePicker.handleChangeValue,
-      handleCalendarPick = _useDatePicker.handleCalendarPick,
+      onCalendarPick = _useDatePicker.handleCalendarPick,
       handleSearch = _useDatePicker.handleSearch,
       updateExternalDate = _useDatePicker.updateExternalDate;
     var handleToggle = function handleToggle(innerOpened, event) {
       if (disabled || readOnly) {
         return;
       }
-      var isCalendarOpen = event.target === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && event.code !== _useKeyboardNavigation.keys.Escape ? true : innerOpened;
+      var isCalendarOpen = (event === null || event === void 0 ? void 0 : event.target) === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && event.code !== _useKeyboardNavigation.keys.Escape ? true : innerOpened;
       if (!innerOpened && !calendarValue) {
         setCalendarValue(function (prevValue) {
           return prevValue === undefined ? null : undefined;
@@ -220,6 +222,13 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
         onBlur(event);
       }
     };
+    var handleCalendarPick = function handleCalendarPick(date, dateInfo) {
+      onCalendarPick(date, dateInfo);
+      if (closeAfterDateSelect) {
+        setIsInnerOpen(false);
+        handleToggle(false);
+      }
+    };
     var DatePickerInput = /*#__PURE__*/_react["default"].createElement(_SingleDate.StyledInput, {
       ref: inputRef,
       className: (0, _classnames["default"])(datePickerErrorClass, datePickerSuccessClass),

package/styled-components/cjs/components/Sheet/hooks/useOverflow.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useOverflow = void 0;
 var _react = /*#__PURE__*/require("react");
+var _utils = /*#__PURE__*/require("../../../utils");
 var useOverflow = exports.useOverflow = function useOverflow(_ref) {
   var opened = _ref.opened;
-  var overflow = (0, _react.useRef)(document.body.style.overflowY);
+  var overflow = (0, _react.useRef)(_utils.canUseDOM ? document.body.style.overflowY : 'initial');
 
   // linaria не поддерживает динамический global
   (0, _react.useEffect)(function () {

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

@@ -35,7 +35,7 @@ const meta: Meta<StoryCarouselProps> = {
             },
         },
         align: {
-            options: ['center', 'start', 'end'],
+            options: ['start', 'center', 'end'],
             control: {
                 type: 'inline-radio',
             },
@@ -52,6 +52,9 @@ const meta: Meta<StoryCarouselProps> = {
         paginationCentered: {
             control: 'boolean',
         },
+        gap: {
+            control: 'text',
+        },
     },
     args: {
         view: 'default',
@@ -61,10 +64,11 @@ const meta: Meta<StoryCarouselProps> = {
         visibleDots: 6,
         slides: 10,
         paginationCentered: false,
+        gap: '20px',
     },
     parameters: {
         controls: {
-            include: ['visibleDots', 'slides', 'paginationCentered'],
+            include: ['align', 'isDragScrollDisabled', 'visibleDots', 'slides', 'paginationCentered', 'gap'],
         },
     },
 };
@@ -89,10 +93,9 @@ const StoryDefault = ({
     slides,
     paginationCentered,
     isDragScrollDisabled,
+    gap,
     ...rest
 }: StoryCarouselProps) => {
-    const [index, setIndex] = React.useState(0);
-
     const items = Array(slides)
         .fill(1)
         .map((_, i) => ({
@@ -102,26 +105,12 @@ const StoryDefault = ({
 
     return (
         <>
-            <button type="button" onClick={() => setIndex((prev) => Math.max(prev - 1, 0))}>
-                prev
-            </button>
-            <button type="button" onClick={() => setIndex((prev) => Math.min(prev + 1, slides - 1))}>
-                next
-            </button>
-            <br />
-            <span>текущий индекс: {index}</span>
-
-            <br />
-            <br />
-
-            <div style={{ width: '800px' }}>
+            <div style={{ width: '600px' }}>
                 <Carousel
-                    index={index}
-                    onIndexChange={setIndex}
                     detectActive
                     scrollAlign={align}
                     isDragScrollDisabled={isDragScrollDisabled}
-                    gap="20px"
+                    gap={gap}
                     paginationOptions={{
                         visibleDots,
                         centered: paginationCentered,

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

@@ -14,6 +14,7 @@ const onChangeValue = action('onChangeValue');
 const onCommitDate = action('onCommitDate');
 const onBlur = action('onBlur');
 const onFocus = action('onFocus');
+const onToggle = action('onToggle');
 
 const onChangeFirstValue = action('onChangeFirstValue');
 const onChangeSecondValue = action('onChangeSecondValue');
@@ -118,7 +119,10 @@ const StoryDefault = ({
             contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
             onBlur={onBlur}
             onFocus={onFocus}
-            onToggle={(is) => setIsOpen(is)}
+            onToggle={(is) => {
+                setIsOpen(is);
+                onToggle(is);
+            }}
             onChangeValue={onChangeValue}
             onCommitDate={onCommitDate}
             lang={lang}
@@ -162,6 +166,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
+        closeAfterDateSelect: true,
         maskWithFormat: true,
         required: false,
         requiredPlacement: 'right',
@@ -262,7 +267,10 @@ const StoryRange = ({
             secondTextfieldTextBefore={
                 showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
             }
-            onToggle={(is) => setIsOpen(is)}
+            onToggle={(is) => {
+                setIsOpen(is);
+                onToggle(is);
+            }}
             onChangeFirstValue={onChangeFirstValue}
             onChangeSecondValue={onChangeSecondValue}
             lang={lang}
@@ -304,11 +312,11 @@ export const Range: StoryObj<StoryPropsRange> = {
         calendarContainerHeight: 0,
         stretched: false,
         isDoubleCalendar: false,
-        closeAfterDateSelect: true,
         dividerVariant: 'dash',
         includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
+        closeAfterDateSelect: true,
         renderFromDate: new Date(2024, 4, 14),
         maskWithFormat: false,
         required: false,
@@ -410,6 +418,7 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
         includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
+        closeAfterDateSelect: true,
         maskWithFormat: false,
         required: false,
         requiredPlacement: 'right',

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

@@ -118,7 +118,10 @@ const StoryDefault = ({
             contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
             onBlur={onBlur}
             onFocus={onFocus}
-            onToggle={(is) => setIsOpen(is)}
+            onToggle={(is) => {
+                setIsOpen(is);
+                onToggle(is);
+            }}
             onChangeValue={onChangeValue}
             onCommitDate={onCommitDate}
             lang={lang}
@@ -162,6 +165,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
+        closeAfterDateSelect: true,
         maskWithFormat: false,
         required: false,
         requiredPlacement: 'right',
@@ -262,7 +266,10 @@ const StoryRange = ({
             secondTextfieldTextBefore={
                 showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
             }
-            onToggle={(is) => setIsOpen(is)}
+            onToggle={(is) => {
+                setIsOpen(is);
+                onToggle(is);
+            }}
             onChangeFirstValue={onChangeFirstValue}
             onChangeSecondValue={onChangeSecondValue}
             lang={lang}
@@ -304,11 +311,11 @@ export const Range: StoryObj<StoryPropsRange> = {
         calendarContainerHeight: 0,
         stretched: false,
         isDoubleCalendar: false,
-        closeAfterDateSelect: true,
         dividerVariant: 'dash',
         includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
+        closeAfterDateSelect: true,
         renderFromDate: new Date(2024, 4, 14),
         maskWithFormat: false,
         required: false,
@@ -410,6 +417,7 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
         includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
+        closeAfterDateSelect: true,
         maskWithFormat: false,
         required: false,
         requiredPlacement: 'right',

package/styled-components/es/components/Carousel/CarouselNew/Carousel.js

@@ -1,18 +1,16 @@
-var _br;
+var _IconDisclosureLeft, _IconDisclosureRight;
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { forwardRef, useState, useCallback, Children } from 'react';
-// import { useForkRef } from '@salutejs/plasma-core';
-
+import React, { forwardRef, useState, Children } from 'react';
+import { IconDisclosureLeft, IconDisclosureRight } from "../../_Icon";
+import { classes } from "./Carousel.tokens";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
-import { base } from "./Carousel.styles";
-// import { base, CarouselWrapper, CarouselTrack } from './Carousel.styles';
-
+import { base, CarouselWrapper, CarouselTrack, ControlsWrapper, IconButton } from "./Carousel.styles";
 import { useCarousel } from "./hooks/useCarousel";
 import { useDragScroll } from "./hooks/useDragScroll";
 import { Dots } from "./ui";
@@ -21,53 +19,65 @@ import { Dots } from "./ui";
  * Компонент для создания списков с прокруткой.
  */
 export var carouselNewRoot = function carouselNewRoot(Root) {
-  return /*#__PURE__*/forwardRef(function (_ref,
-  // @ts-ignore
-  ref) {
+  return /*#__PURE__*/forwardRef(function (_ref, ref) {
     var view = _ref.view,
       size = _ref.size,
-      outerIndex = _ref.index,
       scrollAlign = _ref.scrollAlign,
-      detectActive = _ref.detectActive,
-      detectThreshold = _ref.detectThreshold,
-      onIndexChange = _ref.onIndexChange,
       children = _ref.children,
       _ref$isDragScrollDisa = _ref.isDragScrollDisabled,
       isDragScrollDisabled = _ref$isDragScrollDisa === void 0 ? false : _ref$isDragScrollDisa,
-      paginationOptions = _ref.paginationOptions;
+      gap = _ref.gap,
+      paginationOptions = _ref.paginationOptions,
+      className = _ref.className,
+      style = _ref.style;
     var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
-      internalIndex = _useState2[0],
-      setInternalIndex = _useState2[1];
-    var index = outerIndex !== null && outerIndex !== void 0 ? outerIndex : internalIndex;
-    var handleChangeIndex = useCallback(function (index) {
-      if (onIndexChange) {
-        onIndexChange(index);
-      }
-      setInternalIndex(index);
-    }, [onIndexChange]);
-
-    // const { scrollRef, trackRef } = useCarousel({
+      index = _useState2[0],
+      setIndex = _useState2[1];
+    var slidesAmount = Children.count(children);
+    var handleClickLeft = function handleClickLeft() {
+      setIndex(Math.max(0, index - 1));
+    };
+    var handleClickRight = function handleClickRight() {
+      setIndex(Math.min(slidesAmount - 1, index + 1));
+    };
     var _useCarousel = useCarousel({
         index: index,
         scrollAlign: scrollAlign,
-        detectActive: detectActive,
-        detectThreshold: detectThreshold,
-        onIndexChange: onIndexChange
+        onIndexChange: setIndex
       }),
-      scrollRef = _useCarousel.scrollRef;
-
-    // const handleRef = useForkRef(scrollRef, ref);
-
+      scrollRef = _useCarousel.scrollRef,
+      trackRef = _useCarousel.trackRef;
     useDragScroll(scrollRef, isDragScrollDisabled);
-    var slidesAmount = Children.count(children);
     return /*#__PURE__*/React.createElement(Root, {
+      className: className,
+      style: style,
       size: size,
       view: view,
-      index: index
-    }, _br || (_br = /*#__PURE__*/React.createElement("br", null)), !(paginationOptions !== null && paginationOptions !== void 0 && paginationOptions.disabled) && /*#__PURE__*/React.createElement(Dots, {
+      ref: ref
+    }, /*#__PURE__*/React.createElement(ControlsWrapper, null, index !== 0 && /*#__PURE__*/React.createElement(IconButton, {
+      pin: "circle-circle",
+      onClick: handleClickLeft
+    }, _IconDisclosureLeft || (_IconDisclosureLeft = /*#__PURE__*/React.createElement(IconDisclosureLeft, {
+      size: "m",
+      color: "inherit"
+    }))), /*#__PURE__*/React.createElement(CarouselWrapper, {
+      ref: scrollRef
+    }, /*#__PURE__*/React.createElement(CarouselTrack, {
+      ref: trackRef
+      // aria-live={ariaLive}
+      ,
+      gap: gap
+    }, children)), index !== slidesAmount - 1 && /*#__PURE__*/React.createElement(IconButton, {
+      className: classes.rightControlButton,
+      pin: "circle-circle",
+      onClick: handleClickRight
+    }, _IconDisclosureRight || (_IconDisclosureRight = /*#__PURE__*/React.createElement(IconDisclosureRight, {
+      size: "m",
+      color: "inherit"
+    })))), !(paginationOptions !== null && paginationOptions !== void 0 && paginationOptions.disabled) && /*#__PURE__*/React.createElement(Dots, {
       index: index,
-      onChange: handleChangeIndex,
+      onChange: setIndex,
       visibleCount: (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.visibleDots) || slidesAmount,
       count: slidesAmount,
       centered: (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.centered) || false