@conveyorhq/arrow-ds 2.0.0-beta.7 → 2.0.0-beta.9

package/public/components/Svg/Svg.d.ts

@@ -1,3 +1,3 @@
-import { FunctionComponent, SVGAttributes } from "react";
-export declare type SvgProps = SVGAttributes<SVGElement>;
-export declare const Svg: FunctionComponent<SvgProps>;
+import React from "react";
+export declare type SvgProps = React.SVGAttributes<SVGElement>;
+export declare const Svg: React.ForwardRefExoticComponent<SvgProps & React.RefAttributes<SVGSVGElement>>;

package/public/components/Svg/Svg.js

@@ -5,5 +5,4 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Svg = void 0;
 const react_1 = __importDefault(require("react"));
-const Svg = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg" }, props)));
-exports.Svg = Svg;
+exports.Svg = react_1.default.forwardRef((props, forwardedRef) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", ref: forwardedRef }, props))));

package/public/components/Tooltip/Tooltip.js

@@ -5,37 +5,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const Overlay_1 = __importDefault(require("react-overlays/Overlay"));
 const auto_id_1 = require("@reach/auto-id");
 const types_1 = require("../../types");
 const hooks_1 = require("../../hooks");
 const utilities_1 = require("../../utilities");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const Box_1 = require("../Box");
+const cn = utilities_1.bemHOF("Tooltip");
 const TooltipArrow = react_1.default.forwardRef(({ placement, style }, forwaredRef) => {
     const generatePositionStyles = () => {
         if (placement.startsWith("top")) {
-            return { bottom: "-4px", left: 0 };
+            return { bottom: `-${tokens_1.tokens.spacing[1]}`, left: 0 };
         }
         if (placement.startsWith("right")) {
-            return { left: "-4px", top: 0 };
+            return { left: `-${tokens_1.tokens.spacing[1]}`, top: 0 };
         }
         if (placement.startsWith("bottom")) {
-            return { top: "-4px", left: 0 };
+            return { top: `-${tokens_1.tokens.spacing[1]}`, left: 0 };
         }
         if (placement.startsWith("left")) {
-            return { right: "-4px", top: 0 };
+            return { right: `-${tokens_1.tokens.spacing[1]}`, top: 0 };
         }
         return {};
     };
     const positionStyles = generatePositionStyles();
-    return (react_1.default.createElement(Box_1.Box, { ref: forwaredRef, className: "absolute w-2 h-2 z-below", style: {
+    return (react_1.default.createElement(Box_1.Box, { ref: forwaredRef, className: cn({ e: "arrow" }), style: {
             ...style,
             ...positionStyles,
         } },
-        react_1.default.createElement(Box_1.Box, { className: "absolute w-2 h-2 top-0 left-0 bg-gray-900", style: {
-                transform: "rotate(45deg)",
-            } })));
+        react_1.default.createElement(Box_1.Box, null)));
 });
 const Tooltip = ({ children, content, placement = "auto", delay = 200, }) => {
     const { isOpen, onOpen, onClose } = hooks_1.useDisclosure();
@@ -118,21 +117,14 @@ const Tooltip = ({ children, content, placement = "auto", delay = 200, }) => {
             popoverTimoutRef.current = popoverTimeout;
         }
     };
-    return (react_1.default.createElement(Box_1.Box, { ref: rootRef },
+    return content ? (react_1.default.createElement(Box_1.Box, { ref: rootRef },
         react_1.default.cloneElement(react_1.default.Children.only(children), {
             ...triggerProps(children.props),
         }),
         content && (react_1.default.createElement(Overlay_1.default, { rootClose: true, show: isOpen, offset: [0, 8], onHide: onHide, container: rootRef, target: triggerRef, placement: placement, flip: placement && placement.indexOf("auto") !== -1 }, ({ props: contentProps, arrowProps, placement: overlayPlacement, }) => {
-            return (react_1.default.createElement(Box_1.Box, Object.assign({ id: id, className: classnames_1.default([
-                    "bg-gray-900 text-white",
-                    "text-bodySm leading-normal",
-                    "inline-flex items-center",
-                    "rounded shadow-popover",
-                    "px-3 py-2",
-                    "relative z-popup",
-                ]), onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave }, contentProps),
+            return (react_1.default.createElement(Box_1.Box, Object.assign({ id: id, className: cn(), "data-component": "tooltip", onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave }, contentProps),
                 react_1.default.createElement(TooltipArrow, { ref: arrowProps.ref, placement: overlayPlacement, style: arrowProps.style }),
                 content));
-        }))));
+        })))) : (children);
 };
 exports.Tooltip = Tooltip;

package/public/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { BoxProps } from "../Box";
-export declare const VisuallyHidden: (props: BoxProps) => JSX.Element;
+export declare const VisuallyHidden: React.FunctionComponent<BoxProps>;

package/public/components/VisuallyHidden/VisuallyHidden.js

@@ -7,8 +7,6 @@ exports.VisuallyHidden = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Box_1 = require("../Box");
-const VisuallyHidden = (props) => {
-    const { className, ...rest } = props;
-    return react_1.default.createElement(Box_1.Box, Object.assign({}, rest, { className: classnames_1.default("visually-hidden", className) }));
-};
-exports.VisuallyHidden = VisuallyHidden;
+const utilities_1 = require("../../utilities");
+const cn = utilities_1.bemHOF("VisuallyHidden");
+exports.VisuallyHidden = react_1.default.forwardRef(({ className, ...rest }, forwardedRef) => (react_1.default.createElement(Box_1.Box, Object.assign({ ref: forwardedRef, className: classnames_1.default(cn(), className) }, rest))));

package/public/css/styles.css

@@ -38,7 +38,7 @@
 }
 
 /*
-! tailwindcss v3.0.12 | MIT License | https://tailwindcss.com
+! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -1386,6 +1386,7 @@ override built-in Image component classes */
 
 .ads-Button {
   position: relative;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   border-width: 1px;
@@ -1422,6 +1423,16 @@ override built-in Image component classes */
   margin: auto;
 }
 
+.ads-Button--block {
+  display: flex;
+  width: 100%;
+}
+
+.ads-Button--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
 /* Button.Group */
 
 .ads-ButtonGroup {
@@ -3146,27 +3157,22 @@ override built-in Image component classes */
 
 .ads-Frame {
   height: 100vh;
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 251 252 / var(--tw-bg-opacity));
 
-  grid-template-columns: [full] 1fr;
-  grid-template-rows: [appbar] auto [topbar] auto [main] 1fr [bottombar] auto;
+  grid-template-columns: [navbar] auto [full] 1fr [column-end];
+  grid-template-rows: [appbar] auto [topbar] auto [main] 1fr [bottombar] auto [row-end];
 }
 
-.ads-Frame-appbar {
-  height: 100%;
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 27 40 / var(--tw-bg-opacity));
+.ads-Frame-navbar {
+  grid-column: navbar;
+  grid-row: appbar / row-end;
+}
 
+.ads-Frame-appbar {
   grid-column: full;
   grid-row: appbar;
 }
 
 .ads-Frame-topbar {
-  height: 100%;
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-
   grid-column: full;
   grid-row: topbar;
 }
@@ -3180,10 +3186,6 @@ override built-in Image component classes */
 }
 
 .ads-Frame-bottombar {
-  height: 100%;
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-
   grid-column: full;
   grid-row: bottombar;
 }
@@ -4022,11 +4024,11 @@ override built-in Image component classes */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  overflow-y: auto;
 
   max-height: calc(
     var(--modal-max-height) - 60px - 80px
   );
-  overflow-y: auto;
 }
 
 .ads-Modal-body--padded {
@@ -4036,6 +4038,10 @@ override built-in Image component classes */
   padding-bottom: 16px;
 }
 
+.ads-Modal-progressDots-container {
+  position: relative;
+}
+
 .ads-Modal-progressDots {
   pointer-events: none;
   position: absolute;
@@ -4095,6 +4101,10 @@ override built-in Image component classes */
   flex: 1 1 0;
 }
 
+.ads-OptionButton--disabled {
+  cursor: not-allowed;
+}
+
 .ads-OptionButton-content {
   position: relative;
   z-index: 1;
@@ -4118,6 +4128,11 @@ override built-in Image component classes */
   color: rgb(71 104 125 / var(--tw-text-opacity));
 }
 
+.ads-OptionButton--disabled .ads-OptionButton-heading, .ads-OptionButton--disabled .ads-OptionButton-description {
+  --tw-text-opacity: 1;
+  color: rgb(134 163 181 / var(--tw-text-opacity));
+}
+
 .ads-OptionButton-input {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
@@ -4165,6 +4180,11 @@ override built-in Image component classes */
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.ads-OptionButton--disabled .ads-OptionButton-backdrop {
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 243 247 / var(--tw-bg-opacity));
+}
+
 .ads-OptionButton-selected {
   position: absolute;
   left: 0;
@@ -6125,6 +6145,47 @@ override built-in Image component classes */
   margin-right: 8px;
 }
 
+.ads-Tooltip {
+  z-index: 400;
+  display: inline-flex;
+  max-width: 256px;
+  align-items: center;
+  border-radius: 4px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 27 40 / var(--tw-bg-opacity));
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.1);
+  --tw-shadow-colored: 0 0 3px var(--tw-shadow-color), 0 10px 20px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.ads-Tooltip-arrow {
+  z-index: -1;
+  height: 8px;
+  width: 8px;
+}
+
+.ads-Tooltip-arrow > div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 8px;
+  width: 8px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 27 40 / var(--tw-bg-opacity));
+
+  -webkit-transform: rotate(45deg);
+
+          transform: rotate(45deg);
+}
+
 .ads-Truncate {
   display: table;
   width: 100%;
@@ -6140,6 +6201,18 @@ override built-in Image component classes */
   overflow: hidden;
 }
 
+.ads-VisuallyHidden {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 1px;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }
@@ -6197,12 +6270,8 @@ override built-in Image component classes */
   z-index: 800;
 }
 
-.z-below {
-  z-index: -1;
-}
-
-.z-popup {
-  z-index: 400;
+.z-modal {
+  z-index: 900;
 }
 
 .z-10 {
@@ -6381,6 +6450,10 @@ override built-in Image component classes */
   display: grid;
 }
 
+.contents {
+  display: contents;
+}
+
 .hidden {
   display: none;
 }
@@ -6433,10 +6506,6 @@ override built-in Image component classes */
   height: auto;
 }
 
-.h-2 {
-  height: 8px;
-}
-
 .h-5 {
   height: 20px;
 }
@@ -6461,6 +6530,10 @@ override built-in Image component classes */
   width: 100vw;
 }
 
+.w-15 {
+  width: 60px;
+}
+
 .w-56 {
   width: 224px;
 }
@@ -6489,10 +6562,6 @@ override built-in Image component classes */
   width: 40px;
 }
 
-.w-2 {
-  width: 8px;
-}
-
 .w-5 {
   width: 20px;
 }
@@ -6574,10 +6643,6 @@ override built-in Image component classes */
   justify-content: flex-start;
 }
 
-.justify-end {
-  justify-content: flex-end;
-}
-
 .justify-center {
   justify-content: center;
 }
@@ -6620,6 +6685,10 @@ override built-in Image component classes */
   overflow-y: auto;
 }
 
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -6677,6 +6746,22 @@ override built-in Image component classes */
   border-bottom-right-radius: 0;
 }
 
+.rounded-tr {
+  border-top-right-radius: 4px;
+}
+
+.rounded-tl {
+  border-top-left-radius: 4px;
+}
+
+.rounded-br {
+  border-bottom-right-radius: 4px;
+}
+
+.rounded-bl {
+  border-bottom-left-radius: 4px;
+}
+
 .border {
   border-width: 1px;
 }
@@ -6693,6 +6778,10 @@ override built-in Image component classes */
   border-bottom-width: 1px;
 }
 
+.border-r {
+  border-right-width: 1px;
+}
+
 .border-l-0 {
   border-left-width: 0;
 }
@@ -6701,10 +6790,6 @@ override built-in Image component classes */
   border-left-width: 1px;
 }
 
-.border-r {
-  border-right-width: 1px;
-}
-
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(237 243 247 / var(--tw-border-opacity));
@@ -6750,6 +6835,11 @@ override built-in Image component classes */
   background-color: rgb(222 231 238 / var(--tw-bg-opacity));
 }
 
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 27 40 / var(--tw-bg-opacity));
+}
+
 .bg-red-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 167 161 / var(--tw-bg-opacity));
@@ -6775,11 +6865,6 @@ override built-in Image component classes */
   background-color: rgb(237 243 247 / var(--tw-bg-opacity));
 }
 
-.bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 27 40 / var(--tw-bg-opacity));
-}
-
 .bg-screen {
   background-color: rgba(0, 0, 0, 0.25);
 }
@@ -6825,10 +6910,6 @@ override built-in Image component classes */
   padding: 20px;
 }
 
-.p-12 {
-  padding: 48px;
-}
-
 .p-1 {
   padding: 4px;
 }
@@ -6975,14 +7056,14 @@ override built-in Image component classes */
   line-height: 1;
 }
 
-.text-gray-400 {
+.text-gray-800 {
   --tw-text-opacity: 1;
-  color: rgb(222 231 238 / var(--tw-text-opacity));
+  color: rgb(32 65 86 / var(--tw-text-opacity));
 }
 
-.text-gray-800 {
+.text-gray-400 {
   --tw-text-opacity: 1;
-  color: rgb(32 65 86 / var(--tw-text-opacity));
+  color: rgb(222 231 238 / var(--tw-text-opacity));
 }
 
 .text-gray-700 {
@@ -7055,12 +7136,6 @@ override built-in Image component classes */
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-popover {
-  --tw-shadow: 0 0 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.1);
-  --tw-shadow-colored: 0 0 3px var(--tw-shadow-color), 0 10px 20px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -7435,6 +7510,11 @@ override built-in Image component classes */
   background-color: rgb(222 231 238 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 251 252 / var(--tw-bg-opacity));
+}
+
 .hover\:text-gray-600:hover {
   --tw-text-opacity: 1;
   color: rgb(134 163 181 / var(--tw-text-opacity));