@conveyorhq/arrow-ds 1.151.0 → 1.152.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.151.0",
+  "version": "1.152.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Marquee/Marquee.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode, CSSProperties, RefAttributes } from "react";
+export type MarqueeProps = {
+    style?: CSSProperties;
+    className?: string;
+    autoFill?: boolean;
+    play?: boolean;
+    pauseOnHover?: boolean;
+    pauseOnClick?: boolean;
+    direction?: "left" | "right" | "up" | "down";
+    speed?: number;
+    delay?: number;
+    loop?: number;
+    gradient?: boolean;
+    gradientColor?: string;
+    gradientWidth?: number | string;
+    onFinish?: () => void;
+    onCycleComplete?: () => void;
+    onMount?: () => void;
+    children?: ReactNode;
+} & RefAttributes<HTMLDivElement>;
+export declare const Marquee: React.ForwardRefExoticComponent<Omit<MarqueeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/public/components/Marquee/Marquee.js

@@ -0,0 +1,159 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Marquee = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utilities_1 = require("../../utilities");
+const Box_1 = require("../Box");
+const cn = (0, utilities_1.bemHOF)("Marquee");
+const MarqueeChild = ({ children, style, }) => {
+    return (react_1.default.createElement(Box_1.Box, { className: cn({ e: "child" }), style: style }, children));
+};
+const MarqueeContent = ({ children, ...props }) => {
+    return (react_1.default.createElement(Box_1.Box, { className: cn({ e: "content" }), ...props }, children));
+};
+const MarqueeGradient = ({ style }) => {
+    return react_1.default.createElement(Box_1.Box, { className: cn({ e: "overlay" }), style: style });
+};
+exports.Marquee = (0, react_1.forwardRef)(function Marquee({ style = {}, className = "", autoFill = false, play = true, pauseOnHover = false, pauseOnClick = false, direction = "left", speed = 50, delay = 0, loop = 0, gradient = false, gradientColor = "white", gradientWidth = 200, onFinish, onCycleComplete, onMount, children, }, ref) {
+    const [containerWidth, setContainerWidth] = (0, react_1.useState)(0);
+    const [marqueeWidth, setMarqueeWidth] = (0, react_1.useState)(0);
+    const [multiplier, setMultiplier] = (0, react_1.useState)(1);
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const containerRef = ref || rootRef;
+    const childrenRef = (0, react_1.useRef)(null);
+    const calculateWidth = (0, react_1.useCallback)(() => {
+        if (childrenRef.current && containerRef.current) {
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const marqueeRect = childrenRef.current.getBoundingClientRect();
+            let containerRectWidth = containerRect.width;
+            let marqueeRectWidth = marqueeRect.width;
+            if (direction === "up" || direction === "down") {
+                containerRectWidth = containerRect.height;
+                marqueeRectWidth = marqueeRect.height;
+            }
+            if (autoFill && containerRectWidth && marqueeRectWidth) {
+                setMultiplier(marqueeRectWidth < containerRectWidth
+                    ? Math.ceil(containerRectWidth / marqueeRectWidth)
+                    : 1);
+            }
+            else {
+                setMultiplier(1);
+            }
+            setContainerWidth(containerRectWidth);
+            setMarqueeWidth(marqueeRectWidth);
+        }
+    }, [autoFill, containerRef, direction]);
+    (0, react_1.useEffect)(() => {
+        if (!isMounted)
+            return;
+        calculateWidth();
+        if (childrenRef.current && containerRef.current) {
+            const resizeObserver = new ResizeObserver(() => calculateWidth());
+            resizeObserver.observe(containerRef.current);
+            resizeObserver.observe(childrenRef.current);
+            return () => {
+                if (!resizeObserver)
+                    return;
+                resizeObserver.disconnect();
+            };
+        }
+    }, [calculateWidth, containerRef, isMounted]);
+    (0, react_1.useEffect)(() => {
+        calculateWidth();
+    }, [calculateWidth, children]);
+    (0, react_1.useEffect)(() => {
+        setIsMounted(true);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (typeof onMount === "function") {
+            onMount();
+        }
+    }, [onMount]);
+    const duration = (0, react_1.useMemo)(() => {
+        if (autoFill) {
+            return (marqueeWidth * multiplier) / speed;
+        }
+        return marqueeWidth < containerWidth
+            ? containerWidth / speed
+            : marqueeWidth / speed;
+    }, [autoFill, containerWidth, marqueeWidth, multiplier, speed]);
+    const rootStyle = (0, react_1.useMemo)(() => ({
+        ...style,
+        ["--ads-marquee-pause-on-hover"]: !play || pauseOnHover ? "paused" : "running",
+        ["--ads-marquee-pause-on-click"]: !play || (pauseOnHover && !pauseOnClick) || pauseOnClick
+            ? "paused"
+            : "running",
+        ["--ads-marquee-width"]: direction === "up" || direction === "down" ? `100vh` : "100%",
+        ["--ads-marquee-transform"]: direction === "up"
+            ? "rotate(-90deg)"
+            : direction === "down"
+                ? "rotate(90deg)"
+                : "none",
+    }), [style, play, pauseOnHover, pauseOnClick, direction]);
+    const gradientStyle = (0, react_1.useMemo)(() => ({
+        ["--ads-marquee-gradient-color"]: gradientColor,
+        ["--ads-marquee-gradient-width"]: typeof gradientWidth === "number"
+            ? `${gradientWidth}px`
+            : gradientWidth,
+    }), [gradientColor, gradientWidth]);
+    const contentStyle = (0, react_1.useMemo)(() => ({
+        ["--ads-marquee-play"]: play ? "running" : "paused",
+        ["--ads-marquee-direction"]: direction === "left" ? "normal" : "reverse",
+        ["--ads-marquee-duration"]: `${duration}s`,
+        ["--ads-marquee-delay"]: `${delay}s`,
+        ["--ads-marquee-iteration-count"]: loop !== 0 ? `${loop}` : "infinite",
+        ["--ads-marquee-min-width"]: autoFill ? `auto` : "100%",
+    }), [play, direction, duration, delay, loop, autoFill]);
+    const childStyle = (0, react_1.useMemo)(() => ({
+        ["--ads-marquee-transform"]: direction === "up"
+            ? "rotate(90deg)"
+            : direction === "down"
+                ? "rotate(-90deg)"
+                : "none",
+    }), [direction]);
+    const multiplyChildren = (0, react_1.useCallback)((childrenMultiplier) => {
+        return [
+            ...Array(Number.isFinite(childrenMultiplier) && childrenMultiplier >= 0
+                ? childrenMultiplier
+                : 0),
+        ].map((_, i) => (react_1.default.createElement(react_1.Fragment, { key: i }, react_1.Children.map(children, (child) => {
+            return react_1.default.createElement(MarqueeChild, { style: childStyle }, child);
+        }))));
+    }, [childStyle, children]);
+    return !isMounted ? null : (react_1.default.createElement(Box_1.Box, { ref: containerRef, className: (0, classnames_1.default)(cn(), className), style: rootStyle },
+        gradient && react_1.default.createElement(MarqueeGradient, { style: gradientStyle }),
+        react_1.default.createElement(MarqueeContent, { onAnimationIteration: onCycleComplete, onAnimationEnd: onFinish, style: contentStyle },
+            react_1.default.createElement(Box_1.Box, { ref: childrenRef, className: cn({ e: "children" }) }, react_1.Children.map(children, (child) => {
+                return react_1.default.createElement(MarqueeChild, { style: childStyle }, child);
+            })),
+            multiplyChildren(multiplier - 1)),
+        react_1.default.createElement(MarqueeContent, { style: contentStyle }, multiplyChildren(multiplier))));
+});

package/public/components/Marquee/index.d.ts

@@ -0,0 +1 @@
+export * from "./Marquee";

package/public/components/Marquee/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Marquee"), exports);

package/public/css/styles.css

@@ -4757,6 +4757,98 @@ override built-in Image component classes */
   border-color: rgb(222 231 238 / var(--tw-border-opacity));
 }
 
+.ads-Marquee {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  overflow-x: hidden;
+
+  width: var(--ads-marquee-width);
+  -webkit-transform: var(--ads-marquee-transform);
+          transform: var(--ads-marquee-transform);
+}
+
+.ads-Marquee:hover div {
+  -webkit-animation-play-state: var(--ads-marquee-pause-on-hover);
+          animation-play-state: var(--ads-marquee-pause-on-hover);
+}
+
+.ads-Marquee:active div {
+  -webkit-animation-play-state: var(--ads-marquee-pause-on-click);
+          animation-play-state: var(--ads-marquee-pause-on-click);
+}
+
+.ads-Marquee-overlay {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.ads-Marquee-overlay::before, 
+.ads-Marquee-overlay::after {
+  pointer-events: none;
+  position: absolute;
+  height: 100%;
+  touch-action: none;
+
+  background: linear-gradient(
+    to right,
+    var(--ads-marquee-gradient-color),
+    rgb(255, 255, 255, 0)
+  );
+  content: "";
+  width: var(--ads-marquee-gradient-width);
+  z-index: 2;
+}
+
+.ads-Marquee-overlay::after {
+  right: 0;
+  top: 0;
+
+  -webkit-transform: rotateZ(180deg);
+
+          transform: rotateZ(180deg);
+}
+
+.ads-Marquee-overlay::before {
+  left: 0;
+  top: 0;
+}
+
+.ads-Marquee-content {
+  z-index: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  flex: 0 0 auto;
+  min-width: var(--ads-marquee-min-width);
+  -webkit-animation: marquee-scroll var(--ads-marquee-duration) linear
+    var(--ads-marquee-delay) var(--ads-marquee-iteration-count);
+          animation: marquee-scroll var(--ads-marquee-duration) linear
+    var(--ads-marquee-delay) var(--ads-marquee-iteration-count);
+  -webkit-animation-play-state: var(--ads-marquee-play);
+          animation-play-state: var(--ads-marquee-play);
+  -webkit-animation-delay: var(--ads-marquee-delay);
+          animation-delay: var(--ads-marquee-delay);
+  -webkit-animation-direction: var(--ads-marquee-direction);
+          animation-direction: var(--ads-marquee-direction);
+}
+
+.ads-Marquee-children {
+  display: flex;
+  min-width: auto;
+  flex-direction: row;
+  align-items: center;
+
+  flex: 0 0 auto;
+}
+
+.ads-Marquee-child {
+  -webkit-transform: var(--ads-marquee-transform);
+          transform: var(--ads-marquee-transform);
+}
+
 .ads-Menu {
   display: inline-flex;
 }
@@ -9085,6 +9177,28 @@ override built-in Image component classes */
   }
 }
 
+@-webkit-keyframes marquee-scroll {
+  0% {
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+  100% {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
+
+@keyframes marquee-scroll {
+  0% {
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+  100% {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
+
 .animated {
   -webkit-animation-duration: 500ms;
           animation-duration: 500ms;