@salutejs/plasma-new-hope 0.326.0-canary.2012.15531128062.0 → 0.326.0-canary.2013.15537674452.0

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

@@ -2,20 +2,40 @@ import * as React from 'react';
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import styled from 'styled-components';
+import { getConfigVariations } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 
+import { config } from './Carousel.config';
 import { Carousel, CarouselItem } from './Carousel';
 
-type StoryCarouselProps = ComponentProps<typeof Carousel>;
+type StoryCarouselProps = ComponentProps<typeof Carousel> & {
+    slides: number;
+    visibleDots: number;
+    paginationCentered: boolean;
+};
+
+const { views, sizes } = getConfigVariations(config);
 
 const meta: Meta<StoryCarouselProps> = {
     title: 'b2c/Navigation/Carousel',
     component: Carousel,
     decorators: [WithTheme],
     argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
         align: {
-            options: ['center', 'start', 'end'],
+            options: ['start', 'center', 'end'],
             control: {
                 type: 'inline-radio',
             },
@@ -23,55 +43,88 @@ const meta: Meta<StoryCarouselProps> = {
         isDragScrollDisabled: {
             control: 'boolean',
         },
+        slides: {
+            control: 'number',
+        },
+        visibleDots: {
+            control: 'number',
+        },
+        paginationCentered: {
+            control: 'boolean',
+        },
+        gap: {
+            control: 'text',
+        },
     },
     args: {
+        view: 'default',
+        size: 's',
         align: 'center',
         isDragScrollDisabled: false,
+        visibleDots: 6,
+        slides: 10,
+        paginationCentered: false,
+        gap: '20px',
     },
     parameters: {
         controls: {
-            include: ['align', 'isDragScrollDisabled'],
+            include: ['align', 'isDragScrollDisabled', 'visibleDots', 'slides', 'paginationCentered', 'gap'],
         },
     },
 };
 
 export default meta;
 
-const items = Array(25)
-    .fill({
-        title: 'Заголовок',
-    })
-    .map(({ title }, i) => ({
-        id: i,
-        title: `${title} ${i}`,
-    }));
-
 const StyledCard = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
     border-radius: 8px;
-    width: 350px;
-    height: 50px;
-    padding: 8px;
+    width: 500px;
+    height: 370px;
     background-color: #add8e6;
+    font-size: 30px;
 `;
 
-const StoryDefault = ({ align, isDragScrollDisabled }: StoryCarouselProps) => {
-    const [index, setIndex] = React.useState(0);
+const StoryDefault = ({
+    align,
+    visibleDots,
+    slides,
+    paginationCentered,
+    isDragScrollDisabled,
+    gap,
+    ...rest
+}: StoryCarouselProps) => {
+    const items = Array(slides)
+        .fill(1)
+        .map((_, i) => ({
+            id: i,
+            title: i,
+        }));
 
     return (
-        <Carousel
-            index={index}
-            detectActive
-            onIndexChange={setIndex}
-            scrollAlign={align}
-            isDragScrollDisabled={isDragScrollDisabled}
-        >
-            {items.map((item, i) => (
-                <CarouselItem key={i} style={{ padding: '0 0.5rem' }} scrollSnapAlign={align}>
-                    <StyledCard>{item.title}</StyledCard>
-                </CarouselItem>
-            ))}
-        </Carousel>
+        <>
+            <div style={{ width: '600px' }}>
+                <Carousel
+                    detectActive
+                    scrollAlign={align}
+                    isDragScrollDisabled={isDragScrollDisabled}
+                    gap={gap}
+                    paginationOptions={{
+                        visibleDots,
+                        centered: paginationCentered,
+                    }}
+                    {...rest}
+                >
+                    {items.map((item, i) => (
+                        <CarouselItem key={i} scrollSnapAlign={align}>
+                            <StyledCard>{item.title}</StyledCard>
+                        </CarouselItem>
+                    ))}
+                </Carousel>
+            </div>
+        </>
     );
 };
 

package/styled-components/cjs/hooks/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "useDidMountEffect", {
     return _useDidMountEffect.useDidMountEffect;
   }
 });
+Object.defineProperty(exports, "useDidMountLayoutEffect", {
+  enumerable: true,
+  get: function get() {
+    return _useDidMountLayoutEffect.useDidMountLayoutEffect;
+  }
+});
 Object.defineProperty(exports, "useFocusTrap", {
   enumerable: true,
   get: function get() {
@@ -50,5 +56,6 @@ var _useFocusTrap = /*#__PURE__*/require("./useFocusTrap");
 var _usePreviousValue = /*#__PURE__*/require("./usePreviousValue");
 var _useForceUpdate = /*#__PURE__*/require("./useForceUpdate");
 var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
+var _useDidMountLayoutEffect = /*#__PURE__*/require("./useDidMountLayoutEffect");
 var _useOutsideClick = /*#__PURE__*/require("./useOutsideClick");
 var _useIsomorphicLayoutEffect = /*#__PURE__*/require("./useIsomorphicLayoutEffect");

package/styled-components/cjs/hooks/useDidMountLayoutEffect.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDidMountLayoutEffect = void 0;
+var _react = /*#__PURE__*/require("react");
+var useDidMountLayoutEffect = exports.useDidMountLayoutEffect = function useDidMountLayoutEffect(fn, inputs) {
+  var didMountRef = (0, _react.useRef)(false);
+  (0, _react.useLayoutEffect)(function () {
+    if (didMountRef.current) {
+      fn();
+    } else {
+      didMountRef.current = true;
+    }
+  }, inputs);
+};

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

@@ -0,0 +1,104 @@
+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, 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, CarouselWrapper, CarouselTrack, ControlsWrapper, IconButton } from "./Carousel.styles";
+import { useCarousel } from "./hooks/useCarousel";
+import { useDragScroll } from "./hooks/useDragScroll";
+import { Dots } from "./ui";
+
+/**
+ * Компонент для создания списков с прокруткой.
+ */
+export var carouselNewRoot = function carouselNewRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (_ref, ref) {
+    var view = _ref.view,
+      size = _ref.size,
+      scrollAlign = _ref.scrollAlign,
+      children = _ref.children,
+      _ref$isDragScrollDisa = _ref.isDragScrollDisabled,
+      isDragScrollDisabled = _ref$isDragScrollDisa === void 0 ? false : _ref$isDragScrollDisa,
+      gap = _ref.gap,
+      paginationOptions = _ref.paginationOptions,
+      className = _ref.className,
+      style = _ref.style;
+    var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      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,
+        onIndexChange: setIndex
+      }),
+      scrollRef = _useCarousel.scrollRef,
+      trackRef = _useCarousel.trackRef;
+    useDragScroll(scrollRef, isDragScrollDisabled);
+    return /*#__PURE__*/React.createElement(Root, {
+      className: className,
+      style: style,
+      size: size,
+      view: view,
+      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: 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
+    }));
+  });
+};
+export var carouselNewConfig = {
+  name: 'Carousel',
+  tag: 'div',
+  layout: carouselNewRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 's'
+  }
+};

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

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { css } from 'styled-components';
+import { component, mergeConfig } from "../../../engines";
+import { iconButtonConfig, iconButtonTokens } from "../../IconButton";
+import { classes } from "./Carousel.tokens";
+var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
+export var IconButtonComponent = /*#__PURE__*/component(mergedConfig);
+export var base = /*#__PURE__*/css(["position:relative;"]);
+export var CarouselWrapper = /*#__PURE__*/styled.div.withConfig({
+  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;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);"]);
+export var CarouselTrack = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-vln28v-1"
+})(["display:inline-flex;flex-direction:row;gap:", ";"], function (_ref) {
+  var gap = _ref.gap;
+  return gap || 0;
+});
+export var IconButton = /*#__PURE__*/styled(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;}"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonLoadingBackgroundColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonBackgroundColorActive, iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, classes.rightControlButton);
+export var ControlsWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-vln28v-3"
+})(["position:relative;"]);

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

@@ -0,0 +1,16 @@
+export var classes = {
+  dot: 'dot',
+  active: 'dot-active',
+  animating: 'dot-animating',
+  animateIn: 'dot-animate-in',
+  animateOut: 'dot-animate-out',
+  temporaryNatural: 'dot-temporary-natural',
+  shrinking: 'dot-shrinking',
+  availableDotsLeft: 'dot-available-dots-left',
+  availableDotsRight: 'dot-available-dots-right',
+  rightControlButton: 'carousel-right-control-button'
+};
+export var tokens = {
+  paginationDotBackground: '--plasma-carousel-pagination-dot-background',
+  paginationDotActiveBackground: '--plasma-carousel-pagination-dot-active-background'
+};

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

@@ -0,0 +1 @@
+export {};