@conveyorhq/arrow-ds 1.20.0 → 1.23.0

package/package.json

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

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

@@ -13,9 +13,11 @@ interface TableProps extends React.HTMLProps<HTMLTableElement> {
     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, spaceRows, ...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>;

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, spaceRows = false, ...rest }) => {
+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" }), className);
+    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.js

@@ -25,6 +25,7 @@ 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, align = "left", style, ...rest }, ref) => {
@@ -32,6 +33,7 @@ const TableCell = react_1.forwardRef(({ className, removePadding = false, isLoad
     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" }), align && `text-${align}`, 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" },
+        react_1.default.createElement(Skeleton_1.Skeleton, { className: "w-full" }))) : (children)));
 });
 exports.default = TableCell;

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

@@ -1 +1,4 @@
 export * from "./Table";
+export type { TableCellProps } from "./TableCell";
+export type { TableHeaderCellProps } from "./TableHeaderCell";
+export type { TableRowProps } from "./TableRow";

package/public/components/VendorLogo/VendorLogo.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
+import { SizingKeys } from "../../types";
 import { BoxProps } from "../Box";
 import { IconType } from "../Icon";
-export declare type VendorLogoSize = 4 | 6 | 10 | 14 | 20 | 40;
+export declare type VendorLogoSize = SizingKeys;
 interface VendorLogoBadgeProps extends BoxProps {
     icon: IconType;
     size?: VendorLogoSize;
@@ -14,7 +15,7 @@ interface VendorLogoProps extends BoxProps {
     children?: ReactElement<VendorLogoBadgeProps>;
 }
 export declare const VendorLogo: {
-    ({ src, vendorName, alt, className, size, children, }: VendorLogoProps): JSX.Element;
+    ({ src, vendorName, alt, className, size, children, ...rest }: VendorLogoProps): JSX.Element;
     Badge: ({ icon, size, className, ...rest }: VendorLogoBadgeProps) => JSX.Element;
 };
 export {};

package/public/components/VendorLogo/VendorLogo.js

@@ -35,13 +35,13 @@ const VendorLogoBadge = ({ icon, size = 10, className, ...rest }) => {
         } }, rest),
         react_1.default.createElement(Icon_1.Icon, { className: bem_1.bem(cn, { e: "icon" }), icon: icon })));
 };
-const VendorLogo = ({ src, vendorName, alt, className, size = 10, children, }) => {
+const VendorLogo = ({ src, vendorName, alt, className, size = 10, children, ...rest }) => {
     const [loadSuccess, setLoadSuccess] = react_1.useState(!!src);
     const firstLetter = vendorName && vendorName.length > 0 ? vendorName[0] : "";
     react_1.useEffect(() => {
         setLoadSuccess(!!src);
     }, [src]);
-    return (react_1.default.createElement(Box_1.Box, { className: classnames_1.default(`${bem_1.bem(cn)} w-${size} h-${size}`, className) },
+    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(`${bem_1.bem(cn)} w-${size} h-${size}`, className) }, rest),
         loadSuccess ? (react_1.default.createElement("img", { className: bem_1.bem(cn, { e: "img" }), src: src, alt: alt || vendorName || "", onError: () => {
                 setLoadSuccess(false);
             } })) : (react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "placeholder" }), style: {