@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/public/components/SelectNew/hooks/useSelectLayout.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectLayout = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
-const react_popper_2_1 = require("react-popper-2");
+const react_popper_1 = require("react-popper");
 const types_1 = require("../../../types");
 const utilities_1 = require("../../../utilities");
 const FormGroupContext_1 = require("../../FormGroup/FormGroupContext");
@@ -58,7 +58,7 @@ function useSelectLayout({ isOpen, hasSearch, isDisabled, variantProp, getLabelP
     const [callbackElement, setCallbackElement] = react_1.useState(null);
     const isListRendered = callbackElement !== null;
     const inputRef = react_1.useRef(null);
-    const { styles, attributes, update } = react_popper_2_1.usePopper(referenceElement, popperRef.current, {
+    const { styles, attributes, update } = react_popper_1.usePopper(referenceElement, popperRef.current, {
         placement: initialPlacement,
         modifiers: popperModifiers,
     });

package/public/components/Snackbar/Snackbar.d.ts

@@ -1,23 +1,15 @@
 import { Action } from "../../types";
-import { ICON_TYPE } from "../Icon";
-interface SharedProps {
-    message: string;
-    action?: Action;
-    icon?: ICON_TYPE;
-    duration?: number | null;
-    disableClose?: boolean;
-}
-interface ShowSnackbarProps extends SharedProps {
-    className?: string;
-}
-interface SnackbarProps extends ShowSnackbarProps {
-    onClose: () => void;
-    id?: string;
-}
-interface SnackbarHookProps extends SharedProps {
-    isVisible: boolean;
-}
-export declare const Snackbar: ({ message, action, icon, id, className, onClose, disableClose, }: SnackbarProps) => JSX.Element;
-export declare const showSnackbar: ({ message, action, icon, duration, className, disableClose, }: ShowSnackbarProps) => any;
-export declare const useSnackbar: ({ message, action, isVisible, icon, duration, disableClose, }: SnackbarHookProps) => void;
-export {};
+import { SnackbarProps, SnackbarRootProps, SnackbarIconProps, SnackbarTextProps } from "./types";
+export declare const SnackbarRoot: ({ children, className, ...rest }: SnackbarRootProps) => JSX.Element;
+export declare const SnackbarIcon: ({ icon }: SnackbarIconProps) => JSX.Element;
+export declare const SnackbarText: ({ children }: SnackbarTextProps) => JSX.Element;
+export declare const SnackbarAction: ({ label, onClick, href, external }: Action) => JSX.Element;
+export declare const SnackbarCloseButton: () => JSX.Element;
+export declare const Snackbar: {
+    ({ message, action, icon, className, disableClose, ...rest }: SnackbarProps): JSX.Element;
+    Provider: ({ component, id, onClose, duration, position, ...rest }: import("./types").SnackbarProviderProps) => JSX.Element;
+    Root: ({ children, className, ...rest }: SnackbarRootProps) => JSX.Element;
+    Text: ({ children }: SnackbarTextProps) => JSX.Element;
+    Action: ({ label, onClick, href, external }: Action) => JSX.Element;
+    CloseButton: () => JSX.Element;
+};

package/public/components/Snackbar/Snackbar.js

@@ -1,30 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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.useSnackbar = exports.showSnackbar = exports.Snackbar = void 0;
-const react_1 = __importStar(require("react"));
-const toasted_notes_1 = __importDefault(require("toasted-notes"));
+exports.Snackbar = exports.SnackbarCloseButton = exports.SnackbarAction = exports.SnackbarText = exports.SnackbarIcon = exports.SnackbarRoot = void 0;
+const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const bem_1 = require("../../utilities/bem");
 const Box_1 = require("../Box");
@@ -32,79 +12,42 @@ const CloseButton_1 = require("../CloseButton");
 const Icon_1 = require("../Icon");
 const Link_1 = require("../Link");
 const Text_1 = require("../Text");
+const context_1 = require("./context");
+const SnackbarProvider_1 = require("./SnackbarProvider");
 const cn = bem_1.bemHOF("Snackbar");
-const POSITION = "bottom-left";
-const hideSnackbar = (id) => toasted_notes_1.default.close(id, POSITION);
+const SnackbarRoot = ({ children, className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(cn(), className) }, rest), children));
+exports.SnackbarRoot = SnackbarRoot;
+const SnackbarIcon = ({ icon }) => (react_1.default.createElement(Icon_1.Icon, { icon: icon, spin: icon === Icon_1.ICON_TYPE.SPINNER || icon === Icon_1.ICON_TYPE.CIRCLE_NOTCH, className: cn({ e: "icon" }) }));
+exports.SnackbarIcon = SnackbarIcon;
+const SnackbarText = ({ children }) => (react_1.default.createElement(Text_1.Text, null, children));
+exports.SnackbarText = SnackbarText;
 const SnackbarAction = ({ label, onClick, href, external }) => {
     const Component = typeof onClick === "function" ? "button" : "a";
     const type = Component === "button" ? "button" : undefined;
     return (react_1.default.createElement(Link_1.Link, { as: Component, type: type, className: cn({ e: "action" }), onClick: onClick, href: href, target: external ? "_blank" : undefined }, label));
 };
-const Snackbar = ({ message, action, icon, id, className, onClose, disableClose, }) => {
-    const spin = icon === Icon_1.ICON_TYPE.SPINNER || icon === Icon_1.ICON_TYPE.CIRCLE_NOTCH;
-    const iconProps = icon
-        ? {
-            icon,
-            spin,
-        }
-        : undefined;
-    return (react_1.default.createElement(Box_1.Box, { className: classnames_1.default(cn(), className), id: id },
-        iconProps && react_1.default.createElement(Icon_1.Icon, Object.assign({}, iconProps, { className: cn({ e: "icon" }) })),
-        react_1.default.createElement(Text_1.Text, null, message),
-        action && action.label && (react_1.default.createElement(SnackbarAction, Object.assign({}, action, { onClick: () => {
+exports.SnackbarAction = SnackbarAction;
+const SnackbarCloseButton = () => {
+    const { onClose } = context_1.useSnackbarContext();
+    return (react_1.default.createElement(CloseButton_1.CloseButton, { className: classnames_1.default(cn({ e: "dismiss" })), onClick: onClose }));
+};
+exports.SnackbarCloseButton = SnackbarCloseButton;
+const Snackbar = ({ message, action, icon, className, disableClose, ...rest }) => {
+    const { onClose } = context_1.useSnackbarContext();
+    return (react_1.default.createElement(exports.SnackbarRoot, Object.assign({ className: className }, rest),
+        icon && react_1.default.createElement(exports.SnackbarIcon, { icon: icon }),
+        message && react_1.default.createElement(exports.SnackbarText, null, message),
+        action && action.label && (react_1.default.createElement(exports.SnackbarAction, Object.assign({}, action, { onClick: () => {
                 if (action.onClick) {
                     action.onClick();
                 }
                 onClose();
             } }))),
-        !disableClose && (react_1.default.createElement(CloseButton_1.CloseButton, { className: classnames_1.default(cn({ e: "dismiss" })), onClick: onClose }))));
+        !disableClose && react_1.default.createElement(exports.SnackbarCloseButton, null)));
 };
 exports.Snackbar = Snackbar;
-const showSnackbar = ({ message, action, icon, duration = null, className, disableClose, }) => toasted_notes_1.default.notify(({ onClose, id }) => {
-    return (react_1.default.createElement(exports.Snackbar, Object.assign({}, {
-        message,
-        onClose,
-        action,
-        icon,
-        className,
-        disableClose,
-        id: `snackbar-component-${id}`,
-    })));
-}, {
-    position: POSITION,
-    duration,
-});
-exports.showSnackbar = showSnackbar;
-const useSnackbar = ({ message, action, isVisible, icon, duration, disableClose, }) => {
-    const [snackbar, setSnackbar] = react_1.useState({
-        id: 0,
-        position: POSITION,
-    });
-    const [wasViewed, setWasViewed] = react_1.useState(false);
-    react_1.useEffect(() => {
-        if (isVisible && !wasViewed) {
-            setSnackbar(exports.showSnackbar({
-                message,
-                action,
-                icon,
-                duration,
-                disableClose,
-            }));
-            setWasViewed(true);
-        }
-        if (!isVisible && wasViewed) {
-            hideSnackbar(snackbar.id);
-            setWasViewed(false);
-        }
-    }, [
-        message,
-        action,
-        isVisible,
-        icon,
-        duration,
-        disableClose,
-        snackbar,
-        wasViewed,
-    ]);
-};
-exports.useSnackbar = useSnackbar;
+exports.Snackbar.Provider = SnackbarProvider_1.SnackbarProvider;
+exports.Snackbar.Root = exports.SnackbarRoot;
+exports.Snackbar.Text = exports.SnackbarText;
+exports.Snackbar.Action = exports.SnackbarAction;
+exports.Snackbar.CloseButton = exports.SnackbarCloseButton;

package/public/components/Snackbar/SnackbarProvider.d.ts

@@ -0,0 +1,2 @@
+import { SnackbarProviderProps } from "./types";
+export declare const SnackbarProvider: ({ component, id, onClose, duration, position, ...rest }: SnackbarProviderProps) => JSX.Element;

package/public/components/Snackbar/SnackbarProvider.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnackbarProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = require("../Box");
+const constants_1 = require("./constants");
+const context_1 = require("./context");
+const SnackbarProvider = ({ component, id = constants_1.DEFAULT_SNACKBAR_ID, onClose, duration, position, ...rest }) => {
+    const componentId = "snackbar-provider";
+    return (react_1.default.createElement(context_1.SnackbarContext.Provider, { value: {
+            id,
+            onClose,
+            duration,
+            position,
+        } },
+        react_1.default.createElement(Box_1.Box, Object.assign({ id: `${componentId}-${id}`, "data-component": componentId }, rest), component)));
+};
+exports.SnackbarProvider = SnackbarProvider;

package/public/components/Snackbar/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_SNACKBAR_ID = 0;
+export declare const DEFAULT_SNACKBAR_POSITION = "bottom-left";

package/public/components/Snackbar/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SNACKBAR_POSITION = exports.DEFAULT_SNACKBAR_ID = void 0;
+exports.DEFAULT_SNACKBAR_ID = 0;
+exports.DEFAULT_SNACKBAR_POSITION = "bottom-left";

package/public/components/Snackbar/context.d.ts

@@ -0,0 +1,4 @@
+import { Context } from "react";
+import { SnackbarContextProps } from "./types";
+export declare const SnackbarContext: Context<SnackbarContextProps>;
+export declare function useSnackbarContext(): SnackbarContextProps;

package/public/components/Snackbar/context.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbarContext = exports.SnackbarContext = void 0;
+const react_1 = require("react");
+const constants_1 = require("./constants");
+const defaultContext = {
+    id: constants_1.DEFAULT_SNACKBAR_ID,
+    onClose: () => { },
+};
+exports.SnackbarContext = react_1.createContext(defaultContext);
+function useSnackbarContext() {
+    const context = react_1.useContext(exports.SnackbarContext) || {
+        ...defaultContext,
+    };
+    return context;
+}
+exports.useSnackbarContext = useSnackbarContext;

package/public/components/Snackbar/helpers.d.ts

@@ -0,0 +1,3 @@
+import { HideSnackbarProps, ShowSnackbarProps } from "./types";
+export declare const hideSnackbar: ({ id, position, }: HideSnackbarProps) => void;
+export declare const showSnackbar: ({ component, message, duration, position, ...rest }: ShowSnackbarProps) => any;

package/public/components/Snackbar/helpers.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showSnackbar = exports.hideSnackbar = void 0;
+const react_1 = __importDefault(require("react"));
+const toasted_notes_1 = __importDefault(require("toasted-notes"));
+const constants_1 = require("./constants");
+const Snackbar_1 = require("./Snackbar");
+const SnackbarProvider_1 = require("./SnackbarProvider");
+const hideSnackbar = ({ id, position = constants_1.DEFAULT_SNACKBAR_POSITION, }) => toasted_notes_1.default.close(id, position);
+exports.hideSnackbar = hideSnackbar;
+const showSnackbar = ({ component, message, duration = null, position = constants_1.DEFAULT_SNACKBAR_POSITION, ...rest }) => {
+    return toasted_notes_1.default.notify(({ onClose, id }) => {
+        return (react_1.default.createElement(SnackbarProvider_1.SnackbarProvider, Object.assign({}, {
+            id,
+            onClose,
+            duration,
+            position,
+            component: message ? (react_1.default.createElement(Snackbar_1.Snackbar, Object.assign({}, {
+                message,
+                ...rest,
+            }))) : (component),
+        })));
+    }, {
+        position,
+        duration,
+    });
+};
+exports.showSnackbar = showSnackbar;

package/public/components/Snackbar/hooks.d.ts

@@ -0,0 +1,2 @@
+import { SnackbarHookProps } from "./types";
+export declare const useSnackbar: ({ component, message, position, duration, isVisible, ...rest }: SnackbarHookProps) => void;

package/public/components/Snackbar/hooks.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbar = void 0;
+const react_1 = require("react");
+const constants_1 = require("./constants");
+const helpers_1 = require("./helpers");
+const useSnackbar = ({ component, message, position, duration, isVisible, ...rest }) => {
+    const [snackbar, setSnackbar] = react_1.useState({
+        id: constants_1.DEFAULT_SNACKBAR_ID,
+        position: constants_1.DEFAULT_SNACKBAR_POSITION,
+    });
+    const [wasViewed, setWasViewed] = react_1.useState(false);
+    react_1.useEffect(() => {
+        if (isVisible && !wasViewed) {
+            if (message) {
+                setSnackbar(helpers_1.showSnackbar({
+                    message,
+                    position,
+                    duration,
+                    ...rest,
+                }));
+            }
+            else {
+                setSnackbar(helpers_1.showSnackbar({
+                    component,
+                    position,
+                    duration,
+                }));
+            }
+            setWasViewed(true);
+        }
+        if (!isVisible && wasViewed) {
+            helpers_1.hideSnackbar({ id: snackbar.id, position });
+            setWasViewed(false);
+        }
+    }, [
+        component,
+        message,
+        position,
+        duration,
+        isVisible,
+        snackbar.id,
+        wasViewed,
+        rest,
+    ]);
+};
+exports.useSnackbar = useSnackbar;

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

@@ -1 +1,7 @@
+export * from "./constants";
+export * from "./context";
+export * from "./helpers";
+export * from "./hooks";
 export * from "./Snackbar";
+export * from "./SnackbarProvider";
+export * from "./types";

package/public/components/Snackbar/index.js

@@ -10,4 +10,10 @@ 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("./constants"), exports);
+__exportStar(require("./context"), exports);
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./hooks"), exports);
 __exportStar(require("./Snackbar"), exports);
+__exportStar(require("./SnackbarProvider"), exports);
+__exportStar(require("./types"), exports);

package/public/components/Snackbar/types.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { Action, RequiredToasterProps, ToasterPositionOptions } from "../../types";
+import { BoxProps } from "../Box";
+import { IconType } from "../Icon";
+export declare type SnackbarToasterProps = RequiredToasterProps;
+declare type SnackbarPosition = Extract<ToasterPositionOptions, "bottom-left" | "bottom-right">;
+declare type SnackbarSharedProps = {
+    position?: SnackbarPosition;
+    duration?: number | null;
+};
+declare type SnackbarWithComponentProps = {
+    component: React.ReactNode;
+    message?: never;
+};
+declare type SnackbarWithMessageProps = {
+    message: React.ReactNode;
+    component?: never;
+};
+declare type SnackbarIsVisibleProp = {
+    isVisible: boolean;
+};
+declare type SnackbarOtherProps = {
+    action?: Action;
+    icon?: IconType;
+    disableClose?: boolean;
+};
+export declare type SnackbarProps = Omit<SnackbarWithMessageProps, "component"> & SnackbarOtherProps & SnackbarSharedProps & BoxProps;
+export declare type SnackbarRootProps = BoxProps;
+export declare type SnackbarIconProps = Pick<SnackbarOtherProps, "icon">;
+export declare type SnackbarTextProps = {
+    children: React.ReactNode;
+};
+export declare type SnackbarStateProps = Pick<SnackbarToasterProps, "id"> & Pick<SnackbarSharedProps, "position">;
+export declare type SnackbarContextProps = SnackbarToasterProps & SnackbarSharedProps;
+export declare type SnackbarProviderProps = SnackbarToasterProps & SnackbarSharedProps & Omit<SnackbarWithComponentProps, "message">;
+declare type ShowSnackbarWithMessageProps = SnackbarWithMessageProps & SnackbarOtherProps & SnackbarSharedProps & BoxProps;
+declare type ShowSnackbarWithComponentProps = SnackbarWithComponentProps & SnackbarSharedProps;
+export declare type ShowSnackbarProps = ShowSnackbarWithMessageProps | ShowSnackbarWithComponentProps;
+export declare type HideSnackbarProps = SnackbarStateProps;
+declare type SnackbarWithMessageHookProps = SnackbarWithMessageProps & SnackbarOtherProps & SnackbarSharedProps & SnackbarIsVisibleProp & BoxProps;
+declare type SnackbarWithComponentHookProps = SnackbarWithComponentProps & SnackbarSharedProps & SnackbarIsVisibleProp;
+export declare type SnackbarHookProps = SnackbarWithMessageHookProps | SnackbarWithComponentHookProps;
+export {};

package/public/components/Snackbar/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/public/components/SpeechBubble/SpeechBubble.d.ts

@@ -2,5 +2,6 @@ import { BoxProps } from "../Box";
 export declare type SpeechBubblePlacement = "top-start" | "top-end" | "bottom-start" | "bottom-end";
 export interface SpeechBubbleProps extends BoxProps {
     "data-placement"?: SpeechBubblePlacement;
+    placement?: SpeechBubblePlacement;
 }
 export declare const SpeechBubble: (props: SpeechBubbleProps) => JSX.Element;

package/public/components/SpeechBubble/SpeechBubble.js

@@ -10,7 +10,14 @@ const Box_1 = require("../Box");
 const bem_1 = require("../../utilities/bem");
 const cn = "SpeechBubble";
 const SpeechBubble = (props) => {
-    const { "data-placement": dataPlacement = "top-start", className, ...rest } = props;
-    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className), "data-placement": dataPlacement }, rest)));
+    const { "data-placement": dataPlacement = "top-start", placement, className, ...rest } = props;
+    const ref = react_1.default.useRef(null);
+    react_1.default.useLayoutEffect(() => {
+        if (ref.current) {
+            const style = window.getComputedStyle(ref.current);
+            ref.current.style.setProperty("--ads-speech-bubble-bg", style.backgroundColor);
+        }
+    }, [ref]);
+    return (react_1.default.createElement(Box_1.Box, Object.assign({ ref: ref, className: classnames_1.default(bem_1.bem(cn), className), "data-placement": placement || dataPlacement }, rest)));
 };
 exports.SpeechBubble = SpeechBubble;

package/public/components/Stack/Stack.js

@@ -32,7 +32,7 @@ const cn = "Stack";
 exports.Stack = react_1.forwardRef(({ className, orientation = types_1.ORIENTATION.HORIZONTAL, spacing = 2, justify = types_1.JUSTIFY.START, reverse = false, children, ...rest }, ref) => {
     return (react_1.default.createElement(Flex_1.Flex, Object.assign({ ref: ref, className: classnames_1.default([
             utilities_1.bem(cn, { m: orientation }),
-            spacing > 0 && utilities_1.bem(cn, { m: `spacing-${spacing}` }),
+            `gap-${spacing}`,
             reverse && utilities_1.bem(cn, { m: "reverse" }),
             `justify-${justify}`,
             className,

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/Tab/Tab.js

@@ -10,7 +10,7 @@ const bem_1 = require("../../utilities/bem");
 const Stack_1 = require("../Stack");
 const Box_1 = require("../Box");
 const cn = "Tab";
-const TabGroup = ({ className, spacing, ...rest }) => (react_1.default.createElement(Stack_1.Stack, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "group" }), className), spacing: 0 }, rest)));
+const TabGroup = ({ className, spacing = 8, ...rest }) => (react_1.default.createElement(Stack_1.Stack, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "group" }), className), spacing: spacing }, rest)));
 exports.TabGroup = TabGroup;
 const Tab = ({ active, children, className, ...rest }) => {
     return (react_1.default.createElement("button", Object.assign({ className: classnames_1.default(bem_1.bem(cn), active && bem_1.bem(cn, { m: "active" }), className), type: "button" }, rest),

package/public/components/Table/FilterDropdown.js

@@ -26,7 +26,7 @@ exports.FilterDropdown = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
-const react_popper_2_1 = require("react-popper-2");
+const react_popper_1 = require("react-popper");
 const bem_1 = require("../../utilities/bem");
 const hooks_1 = require("../../hooks");
 const Icon_1 = require("../Icon");
@@ -89,9 +89,9 @@ const FilterDropdown = ({ isVisible = false, filterApplied = false, onSetVisible
     const getButtonElement = (buttonElement) => {
         buttonRef.current = buttonElement;
     };
-    return (react_1.default.createElement(react_popper_2_1.Manager, null,
+    return (react_1.default.createElement(react_popper_1.Manager, null,
         isVisible && (react_1.default.createElement(Portal_1.Portal, null,
-            react_1.default.createElement(react_popper_2_1.Popper, { placement: "bottom", innerRef: getPopperElement, modifiers: [
+            react_1.default.createElement(react_popper_1.Popper, { placement: "bottom", innerRef: getPopperElement, modifiers: [
                     {
                         name: "offset",
                         options: {
@@ -99,6 +99,6 @@ const FilterDropdown = ({ isVisible = false, filterApplied = false, onSetVisible
                         },
                     },
                 ] }, ({ ref, placement, style }) => (react_1.default.createElement(FilterMenu, { ref: ref, buttonRef: buttonRef, menuRef: menuRef, placement: placement, className: className, style: style, onSetVisible: onSetVisible, searchInputValue: searchInputValue, onFilterInputChange: onFilterInputChange, onFilterSelectAll: onFilterSelectAll, onFilterClear: onFilterClear, filterOptions: filterOptions, filterControl: filterControl, hideFilterSearch: hideFilterSearch }))))),
-        react_1.default.createElement(react_popper_2_1.Reference, { innerRef: getButtonElement }, ({ ref }) => (react_1.default.createElement(FilterToggleButton, { ref: ref, onSetVisible: onSetVisible, isVisible: isVisible, filterApplied: filterApplied })))));
+        react_1.default.createElement(react_popper_1.Reference, { innerRef: getButtonElement }, ({ ref }) => (react_1.default.createElement(FilterToggleButton, { ref: ref, onSetVisible: onSetVisible, isVisible: isVisible, filterApplied: filterApplied })))));
 };
 exports.FilterDropdown = FilterDropdown;

package/public/components/Table/Table.d.ts

@@ -12,13 +12,16 @@ interface TableProps extends React.HTMLProps<HTMLTableElement> {
     enableHorizontalScroll?: boolean;
     stickyColumn?: boolean;
     hasBatchActions?: boolean;
+    spaceRows?: boolean;
+    enableGridSizing?: boolean;
+    gridSizing?: string | string[];
 }
 declare const Table: {
-    ({ children, className, onSort, outerBorder, sortColumnId, sortDirection, affixHeader, removeSpacerColumn, noResults, renderInModal, enableHorizontalScroll, stickyColumn, hasBatchActions, ...rest }: TableProps): JSX.Element;
+    ({ children, className, onSort, outerBorder, sortColumnId, sortDirection, affixHeader, removeSpacerColumn, noResults, renderInModal, enableHorizontalScroll, stickyColumn, hasBatchActions, spaceRows, style, enableGridSizing, gridSizing, ...rest }: TableProps): JSX.Element;
     Body: ({ className, children, ...rest }: React.HTMLProps<HTMLTableSectionElement>) => JSX.Element;
     Row: ({ className, children, selected, ...rest }: import("./TableRow").TableRowProps) => JSX.Element;
     Cell: React.FunctionComponent<import("./TableCell").TableCellProps>;
     Head: ({ className, ...rest }: React.HTMLProps<HTMLTableSectionElement>) => JSX.Element;
-    HeaderCell: ({ children, className, id, shrinkToContent, sortable, filterOptions: filterOptionsProp, onSelectAllFilters, onClearFilters, hideFilterSearch, filterApplied, searchInputValue, onSearchInputChange, columnWidth, minColumnWidth, removeVerticalPadding, filterControl, style, ...rest }: import("./TableHeaderCell").TableHeaderCellProps) => JSX.Element;
+    HeaderCell: ({ children, className, id, shrinkToContent, sortable, filterOptions: filterOptionsProp, onSelectAllFilters, onClearFilters, hideFilterSearch, filterApplied, searchInputValue, onSearchInputChange, columnWidth, minColumnWidth, removeVerticalPadding, filterControl, align, style, ...rest }: import("./TableHeaderCell").TableHeaderCellProps) => JSX.Element;
 };
 export { Table, SORT_DIRECTION };

package/public/components/Table/Table.js

@@ -35,9 +35,9 @@ Object.defineProperty(exports, "SORT_DIRECTION", { enumerable: true, get: functi
 const bem_1 = require("../../utilities/bem");
 const cn = "Table";
 const wrapperCn = "TableWrapper";
-const Table = ({ children, className, onSort = () => { }, outerBorder = false, sortColumnId, sortDirection, affixHeader = false, removeSpacerColumn = false, noResults = false, renderInModal = false, enableHorizontalScroll = false, stickyColumn = false, hasBatchActions = false, ...rest }) => {
-    const wrapperClasses = classnames_1.default(bem_1.bem(wrapperCn), enableHorizontalScroll && bem_1.bem(wrapperCn, { m: "enable-hscroll" }));
-    const classes = classnames_1.default(bem_1.bem(cn), removeSpacerColumn && bem_1.bem(cn, { m: "remove-spacer" }), outerBorder && bem_1.bem(cn, { m: "outer-border" }), affixHeader && bem_1.bem(cn, { m: "affix-header" }), noResults && bem_1.bem(cn, { m: "no-results" }), stickyColumn && bem_1.bem(cn, { m: "sticky-column" }), hasBatchActions && bem_1.bem(cn, { m: "batch-actions" }), className);
+const Table = ({ children, className, onSort = () => { }, outerBorder = false, sortColumnId, sortDirection, affixHeader = false, removeSpacerColumn = false, noResults = false, renderInModal = false, enableHorizontalScroll = false, stickyColumn = false, hasBatchActions = false, spaceRows = false, style, enableGridSizing = false, gridSizing, ...rest }) => {
+    const wrapperClasses = classnames_1.default(bem_1.bem(wrapperCn), enableHorizontalScroll && bem_1.bem(wrapperCn, { m: "enable-hscroll" }), spaceRows && bem_1.bem(wrapperCn, { m: "space-rows" }));
+    const classes = classnames_1.default(bem_1.bem(cn), removeSpacerColumn && bem_1.bem(cn, { m: "remove-spacer" }), outerBorder && bem_1.bem(cn, { m: "outer-border" }), affixHeader && bem_1.bem(cn, { m: "affix-header" }), noResults && bem_1.bem(cn, { m: "no-results" }), stickyColumn && bem_1.bem(cn, { m: "sticky-column" }), hasBatchActions && bem_1.bem(cn, { m: "batch-actions" }), spaceRows && bem_1.bem(cn, { m: "space-rows" }), enableGridSizing && gridSizing && bem_1.bem(cn, { m: "grid-sizing" }), className);
     return (react_1.default.createElement(TableContext_1.default.Provider, { value: {
             handleSort: onSort,
             sortDirection,
@@ -49,7 +49,14 @@ const Table = ({ children, className, onSort = () => { }, outerBorder = false, s
             hasBatchActions,
         } },
         react_1.default.createElement("div", { className: wrapperClasses },
-            react_1.default.createElement("table", Object.assign({ className: classes }, rest), children))));
+            react_1.default.createElement("table", Object.assign({ className: classes, style: enableGridSizing && gridSizing
+                    ? {
+                        gridTemplateColumns: Array.isArray(gridSizing)
+                            ? gridSizing.join(" ")
+                            : gridSizing,
+                        ...style,
+                    }
+                    : style }, rest), children))));
 };
 exports.Table = Table;
 Table.Body = TableBody_1.default;

package/public/components/Table/TableCell.d.ts

@@ -3,6 +3,7 @@ export interface TableCellProps extends HTMLProps<HTMLTableCellElement> {
     removePadding?: boolean;
     isLoading?: boolean;
     columnWidth?: string;
+    align?: "left" | "center" | "right";
     ref?: any;
 }
 declare const TableCell: FunctionComponent<TableCellProps>;

package/public/components/Table/TableCell.js

@@ -25,13 +25,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const bem_1 = require("../../utilities/bem");
+const Flex_1 = require("../Flex");
 const Skeleton_1 = require("../Skeleton");
 const cn = "TableCell";
-const TableCell = react_1.forwardRef(({ className, removePadding = false, isLoading = false, children, columnWidth, style, ...rest }, ref) => {
+const TableCell = react_1.forwardRef(({ className, removePadding = false, isLoading = false, children, columnWidth, align = "left", style, ...rest }, ref) => {
     const computedStyle = { ...style };
     if (columnWidth) {
         computedStyle.width = columnWidth;
     }
-    return (react_1.default.createElement("td", Object.assign({ style: computedStyle, className: classnames_1.default(bem_1.bem(cn), removePadding && bem_1.bem(cn, { m: "removePadding" }), className), ref: ref }, rest), isLoading ? react_1.default.createElement(Skeleton_1.Skeleton, null) : children));
+    return (react_1.default.createElement("td", Object.assign({ style: computedStyle, className: classnames_1.default(bem_1.bem(cn), removePadding && bem_1.bem(cn, { m: "removePadding" }), align && `text-${align}`, className), ref: ref }, rest), isLoading ? (react_1.default.createElement(Flex_1.Flex, { className: "h-full items-center", "data-testid": "loading-cell-skeleton" },
+        react_1.default.createElement(Skeleton_1.Skeleton, { className: "w-full" }))) : (children)));
 });
 exports.default = TableCell;

package/public/components/Table/TableHeaderCell.d.ts

@@ -18,6 +18,7 @@ export interface TableHeaderCellProps extends React.HTMLProps<HTMLTableHeaderCel
     sortable?: boolean;
     filterOptions?: ReactElement<FilterProps>[];
     filterControl?: ReactElement;
+    align?: "left" | "center" | "right";
 }
-declare const TableHeaderCell: ({ children, className, id, shrinkToContent, sortable, filterOptions: filterOptionsProp, onSelectAllFilters, onClearFilters, hideFilterSearch, filterApplied, searchInputValue, onSearchInputChange, columnWidth, minColumnWidth, removeVerticalPadding, filterControl, style, ...rest }: TableHeaderCellProps) => JSX.Element;
+declare const TableHeaderCell: ({ children, className, id, shrinkToContent, sortable, filterOptions: filterOptionsProp, onSelectAllFilters, onClearFilters, hideFilterSearch, filterApplied, searchInputValue, onSearchInputChange, columnWidth, minColumnWidth, removeVerticalPadding, filterControl, align, style, ...rest }: TableHeaderCellProps) => JSX.Element;
 export default TableHeaderCell;