@conveyorhq/arrow-ds 1.143.0 → 1.144.0

package/package.json

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

package/public/components/Accordion/Accordion.js

@@ -147,6 +147,7 @@ const AccordionIcon = ({ className, direction = "down", color, disabled = false,
 };
 exports.AccordionIcon = AccordionIcon;
 const AccordionContent = ({ children, maxHeight, style, className, scrollClassName, ...rest }) => {
+    const { disableAnimation } = (0, context_1.useAccordionGroupContext)();
     const { buttonId, contentId, defaultIsOpen, isOpen, } = (0, context_1.useAccordionItemContext)();
     const [childrenRef, setChildrenRef] = react_1.default.useState({ current: null });
     const onRefChange = react_1.default.useCallback((node) => {
@@ -155,18 +156,20 @@ const AccordionContent = ({ children, maxHeight, style, className, scrollClassNa
         }
     }, []);
     const [enableTransition, setEnableTransition] = react_1.default.useState(!defaultIsOpen);
-    const { height: componentHeight } = (0, component_size_1.default)(childrenRef);
-    const { height } = (0, web_1.useSpring)({
-        height: isOpen ? componentHeight : 0,
-        immediate: !enableTransition,
+    const { height } = (0, component_size_1.default)(childrenRef);
+    const props = (0, web_1.useSpring)({
+        height: isOpen ? height : 0,
+        opacity: isOpen ? 1 : 0,
+        config: { mass: 2, tension: 400, friction: 50 },
         onRest: () => {
             if (defaultIsOpen && isOpen) {
                 setEnableTransition(true);
             }
         },
+        immediate: disableAnimation || !enableTransition,
     });
-    return (react_1.default.createElement(web_1.animated.div, { className: (0, classnames_1.default)("overflow-hidden box-content", className), style: { ...style, height }, "aria-labelledby": buttonId, id: contentId, role: "region", ...rest },
-        react_1.default.createElement(Box_1.Box, { ref: onRefChange, className: (0, classnames_1.default)(maxHeight && "overflow-y-auto"), style: maxHeight ? { maxHeight } : undefined }, children)));
+    return (react_1.default.createElement(web_1.animated.div, { className: (0, classnames_1.default)("overflow-hidden box-content", className), style: { ...style, ...props }, "aria-labelledby": buttonId, id: contentId, role: "region", ...rest },
+        react_1.default.createElement(Box_1.Box, { ref: onRefChange, className: (0, classnames_1.default)(maxHeight && "overflow-y-auto", scrollClassName), style: maxHeight ? { maxHeight } : undefined }, children)));
 };
 exports.AccordionContent = AccordionContent;
 const Accordion = (props) => {

package/public/components/LoadingDots/LoadingDots.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface LoadingDotsProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const LoadingDots: React.ForwardRefExoticComponent<LoadingDotsProps & React.RefAttributes<HTMLDivElement>>;

package/public/components/LoadingDots/LoadingDots.js

@@ -0,0 +1,43 @@
+"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.LoadingDots = 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)("LoadingDots");
+const LoadingDot = ({ delay }) => (react_1.default.createElement(Box_1.Box, { as: "span", className: cn({ e: "dot" }), style: {
+        animation: `loadingDot 1s ease-in-out ${delay}ms infinite`,
+    } }));
+exports.LoadingDots = (0, react_1.forwardRef)(({ className, style }, ref) => {
+    return (react_1.default.createElement(Box_1.Box, { ref: ref, className: (0, classnames_1.default)(cn(), className), style: style },
+        react_1.default.createElement(LoadingDot, { delay: 0 }),
+        react_1.default.createElement(LoadingDot, { delay: 160 }),
+        react_1.default.createElement(LoadingDot, { delay: 320 })));
+});

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

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

package/public/components/LoadingDots/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("./LoadingDots"), exports);

package/public/components/SelectNew/shared/SelectControl.js

@@ -30,22 +30,12 @@ exports.SelectControl = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
-const utilities_1 = require("../../../utilities");
 const Box_1 = require("../../Box");
 const Flex_1 = require("../../Flex");
 const Icon_1 = require("../../Icon");
 const Label_1 = require("../../Label");
 const VisuallyHidden_1 = require("../../VisuallyHidden");
-const cn = (0, utilities_1.bemHOF)("SelectNew");
-const LoadingDot = ({ delay }) => (react_1.default.createElement(Box_1.Box, { as: "span", className: cn({ e: "loading-dot" }), style: {
-        animation: `loadingDot 1s ease-in-out ${delay}ms infinite`,
-    } }));
-const SelectLoadingIndicator = () => {
-    return (react_1.default.createElement(Box_1.Box, { className: cn({ e: "loading-indicator" }) },
-        react_1.default.createElement(LoadingDot, { delay: 0 }),
-        react_1.default.createElement(LoadingDot, { delay: 160 }),
-        react_1.default.createElement(LoadingDot, { delay: 320 })));
-};
+const LoadingDots_1 = require("../../LoadingDots");
 function SelectControl({ setReferenceElement, label, hasContextLabel, getLabelProps, getToggleButtonProps, isDisabled, children, isClearable, isLoading, onClear, hasSelection, className, }) {
     const isClearBtnVisible = isClearable && hasSelection && !isLoading;
     const clearBtnRef = (0, react_1.useRef)(null);
@@ -87,7 +77,7 @@ function SelectControl({ setReferenceElement, label, hasContextLabel, getLabelPr
                             }
                         } },
                         react_1.default.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.TIMES }))),
-                    isLoading && react_1.default.createElement(SelectLoadingIndicator, null)),
+                    isLoading && react_1.default.createElement(LoadingDots_1.LoadingDots, null)),
                 react_1.default.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.CARET_DOWN, className: "text-gray-600" })))));
 }
 exports.SelectControl = SelectControl;

package/public/css/styles.css

@@ -4377,6 +4377,50 @@ override built-in Image component classes */
           animation: spin 1.8s infinite linear both;
 }
 
+@-webkit-keyframes loadingDot {
+  0%,
+  80%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes loadingDot {
+  0%,
+  80%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+.ads-LoadingDots {
+  display: inline-flex;
+  width: 24px;
+  justify-content: space-between;
+  align-self: center;
+  padding: 4px;
+  text-align: center;
+  vertical-align: middle;
+
+  transition: color 150ms;
+}
+
+.ads-LoadingDots-dot {
+  display: inline-block;
+  height: 4px;
+  width: 4px;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(134 163 181 / var(--tw-bg-opacity));
+  vertical-align: top;
+}
+
 .ads-Markdown {
   display: flex;
   width: 100%;
@@ -5989,50 +6033,6 @@ override built-in Image component classes */
   color: rgb(62 158 245 / var(--tw-text-opacity));
 }
 
-@-webkit-keyframes loadingDot {
-  0%,
-  80%,
-  100% {
-    opacity: 0;
-  }
-  40% {
-    opacity: 1;
-  }
-}
-
-@keyframes loadingDot {
-  0%,
-  80%,
-  100% {
-    opacity: 0;
-  }
-  40% {
-    opacity: 1;
-  }
-}
-
-.ads-SelectNew-loading-dot {
-  display: inline-block;
-  height: 4px;
-  width: 4px;
-  border-radius: 9999px;
-  --tw-bg-opacity: 1;
-  background-color: rgb(134 163 181 / var(--tw-bg-opacity));
-  vertical-align: top;
-}
-
-.ads-SelectNew-loading-indicator {
-  display: inline-flex;
-  width: 24px;
-  justify-content: space-between;
-  align-self: center;
-  padding: 4px;
-  text-align: center;
-  vertical-align: middle;
-
-  transition: color 150ms;
-}
-
 .ads-SelectNew-button:focus {
   --tw-shadow: rgba(7, 114, 239, 0.2) 0 0 1px 3px;
   --tw-shadow-colored: 0 0 1px 3px var(--tw-shadow-color);