@trackunit/react-table 1.24.1 → 1.24.2

package/index.cjs.js

@@ -364,9 +364,9 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, "da
  * @param {ActionSheetProps} props - The props for the ActionSheet component
  * @returns {ReactElement} ActionSheet component
  */
-const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, "data-testid": dataTestId, }) => {
+const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, style, "data-testid": dataTestId, }) => {
     const [t] = useTranslation();
-    return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Button, { className: "row-start-1", "data-testid": "XButton", 
+    return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, style: style, children: [jsxRuntime.jsx(reactComponents.Button, { className: "row-start-1", "data-testid": "XButton", 
                 // eslint-disable-next-line @trackunit/prefer-event-specific-callback-naming
                 onClick: resetSelection, prefix: jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), children: t("table.actionsheet.selected", { count: selections.length }) }), jsxRuntime.jsx(reactComponents.Spacer, { border: true, className: cvaDivider() }), jsxRuntime.jsx(ActionContainerAndOverflow, { "data-testid": dataTestId,
                 actions,
@@ -638,9 +638,9 @@ const Sorting = ({ columns, }) => {
  * />
  * ```
  */
-const SelectAllBanner = ({ areAllSelected, selectedCount, onClickSelectAll, onClickClearSelection, selectAllLabel, }) => {
+const SelectAllBanner = ({ areAllSelected, selectedCount, onClickSelectAll, onClickClearSelection, selectAllLabel, style, }) => {
     const [t] = useTranslation();
-    return (jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center gap-1 border-y border-neutral-200 bg-neutral-100 px-4 py-2 text-xs", "data-testid": "select-all-banner", children: areAllSelected ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-neutral-600", children: jsxRuntime.jsx(Trans, { components: { strong: jsxRuntime.jsx("span", { className: "font-medium" }) }, i18nKey: "table.selectAll.allSelected", values: { totalCount: selectedCount } }) }), jsxRuntime.jsx(reactComponents.Button, { onClick: onClickClearSelection, size: "small", variant: "ghost", children: t("table.selectAll.clearSelection") })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-neutral-600", children: jsxRuntime.jsx(Trans, { components: { strong: jsxRuntime.jsx("span", { className: "font-medium" }) }, i18nKey: "table.selectAll.pageSelected", values: { count: selectedCount } }) }), jsxRuntime.jsx(reactComponents.Button, { onClick: onClickSelectAll, size: "small", variant: "ghost", children: selectAllLabel ?? t("table.selectAll.selectAll") })] })) }));
+    return (jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center gap-1 border-y border-neutral-200 bg-neutral-100 px-4 py-2 text-xs", "data-testid": "select-all-banner", style: style, children: areAllSelected ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-neutral-600", children: jsxRuntime.jsx(Trans, { components: { strong: jsxRuntime.jsx("span", { className: "font-medium" }) }, i18nKey: "table.selectAll.allSelected", values: { totalCount: selectedCount } }) }), jsxRuntime.jsx(reactComponents.Button, { onClick: onClickClearSelection, size: "small", variant: "ghost", children: t("table.selectAll.clearSelection") })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-neutral-600", children: jsxRuntime.jsx(Trans, { components: { strong: jsxRuntime.jsx("span", { className: "font-medium" }) }, i18nKey: "table.selectAll.pageSelected", values: { count: selectedCount } }) }), jsxRuntime.jsx(reactComponents.Button, { onClick: onClickSelectAll, size: "small", variant: "ghost", children: selectAllLabel ?? t("table.selectAll.selectAll") })] })) }));
 };
 
 /**
@@ -1122,7 +1122,7 @@ const ColumnSorting = ({ canSort, sortingState = false }) => {
  *
  * ```
  */
-const Table = ({ rowHeight = 50, loading = false, hideFooter = false, ...props }) => {
+const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...props }) => {
     //we need a reference to the scrolling element for logic down below
     const tableScrollElementRef = react.useRef(null);
     const [t] = useTranslation();
@@ -1199,7 +1199,7 @@ const Table = ({ rowHeight = 50, loading = false, hideFooter = false, ...props }
             header.column.getToggleSortingHandler()?.(event);
         }
     }, [props]);
-    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], children: [(props.headerLeftActions !== undefined && props.headerLeftActions !== null) ||
+    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], style: style, children: [(props.headerLeftActions !== undefined && props.headerLeftActions !== null) ||
                 (props.headerRightActions !== undefined && props.headerRightActions !== null) ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, props.subHeaderActions, jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("h-full overflow-x-auto overflow-y-scroll border-b border-neutral-200", (props.subHeaderActions === undefined || props.subHeaderActions === null) &&
                     ((props.headerLeftActions !== undefined && props.headerLeftActions !== null) ||
                         (props.headerRightActions !== undefined && props.headerRightActions !== null))

package/index.esm.js

@@ -363,9 +363,9 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, "da
  * @param {ActionSheetProps} props - The props for the ActionSheet component
  * @returns {ReactElement} ActionSheet component
  */
-const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, "data-testid": dataTestId, }) => {
+const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, style, "data-testid": dataTestId, }) => {
     const [t] = useTranslation();
-    return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsx(Button, { className: "row-start-1", "data-testid": "XButton", 
+    return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, style: style, children: [jsx(Button, { className: "row-start-1", "data-testid": "XButton", 
                 // eslint-disable-next-line @trackunit/prefer-event-specific-callback-naming
                 onClick: resetSelection, prefix: jsx(Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), children: t("table.actionsheet.selected", { count: selections.length }) }), jsx(Spacer, { border: true, className: cvaDivider() }), jsx(ActionContainerAndOverflow, { "data-testid": dataTestId,
                 actions,
@@ -637,9 +637,9 @@ const Sorting = ({ columns, }) => {
  * />
  * ```
  */
-const SelectAllBanner = ({ areAllSelected, selectedCount, onClickSelectAll, onClickClearSelection, selectAllLabel, }) => {
+const SelectAllBanner = ({ areAllSelected, selectedCount, onClickSelectAll, onClickClearSelection, selectAllLabel, style, }) => {
     const [t] = useTranslation();
-    return (jsx("div", { className: "flex w-full items-center justify-center gap-1 border-y border-neutral-200 bg-neutral-100 px-4 py-2 text-xs", "data-testid": "select-all-banner", children: areAllSelected ? (jsxs(Fragment, { children: [jsx("span", { className: "text-neutral-600", children: jsx(Trans, { components: { strong: jsx("span", { className: "font-medium" }) }, i18nKey: "table.selectAll.allSelected", values: { totalCount: selectedCount } }) }), jsx(Button, { onClick: onClickClearSelection, size: "small", variant: "ghost", children: t("table.selectAll.clearSelection") })] })) : (jsxs(Fragment, { children: [jsx("span", { className: "text-neutral-600", children: jsx(Trans, { components: { strong: jsx("span", { className: "font-medium" }) }, i18nKey: "table.selectAll.pageSelected", values: { count: selectedCount } }) }), jsx(Button, { onClick: onClickSelectAll, size: "small", variant: "ghost", children: selectAllLabel ?? t("table.selectAll.selectAll") })] })) }));
+    return (jsx("div", { className: "flex w-full items-center justify-center gap-1 border-y border-neutral-200 bg-neutral-100 px-4 py-2 text-xs", "data-testid": "select-all-banner", style: style, children: areAllSelected ? (jsxs(Fragment, { children: [jsx("span", { className: "text-neutral-600", children: jsx(Trans, { components: { strong: jsx("span", { className: "font-medium" }) }, i18nKey: "table.selectAll.allSelected", values: { totalCount: selectedCount } }) }), jsx(Button, { onClick: onClickClearSelection, size: "small", variant: "ghost", children: t("table.selectAll.clearSelection") })] })) : (jsxs(Fragment, { children: [jsx("span", { className: "text-neutral-600", children: jsx(Trans, { components: { strong: jsx("span", { className: "font-medium" }) }, i18nKey: "table.selectAll.pageSelected", values: { count: selectedCount } }) }), jsx(Button, { onClick: onClickSelectAll, size: "small", variant: "ghost", children: selectAllLabel ?? t("table.selectAll.selectAll") })] })) }));
 };
 
 /**
@@ -1121,7 +1121,7 @@ const ColumnSorting = ({ canSort, sortingState = false }) => {
  *
  * ```
  */
-const Table = ({ rowHeight = 50, loading = false, hideFooter = false, ...props }) => {
+const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...props }) => {
     //we need a reference to the scrolling element for logic down below
     const tableScrollElementRef = useRef(null);
     const [t] = useTranslation();
@@ -1198,7 +1198,7 @@ const Table = ({ rowHeight = 50, loading = false, hideFooter = false, ...props }
             header.column.getToggleSortingHandler()?.(event);
         }
     }, [props]);
-    return (jsxs(Card, { className: twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], children: [(props.headerLeftActions !== undefined && props.headerLeftActions !== null) ||
+    return (jsxs(Card, { className: twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], style: style, children: [(props.headerLeftActions !== undefined && props.headerLeftActions !== null) ||
                 (props.headerRightActions !== undefined && props.headerRightActions !== null) ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, props.subHeaderActions, jsx("div", { className: twMerge("h-full overflow-x-auto overflow-y-scroll border-b border-neutral-200", (props.subHeaderActions === undefined || props.subHeaderActions === null) &&
                     ((props.headerLeftActions !== undefined && props.headerLeftActions !== null) ||
                         (props.headerRightActions !== undefined && props.headerRightActions !== null))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.24.1",
+  "version": "1.24.2",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,8 +15,8 @@
     "@trackunit/shared-utils": "1.15.1",
     "@trackunit/css-class-variance-utilities": "1.13.1",
     "@trackunit/ui-icons": "1.13.1",
-    "@trackunit/react-table-base-components": "1.24.1",
-    "@trackunit/react-form-components": "1.25.1",
+    "@trackunit/react-table-base-components": "1.24.2",
+    "@trackunit/react-form-components": "1.25.2",
     "@trackunit/i18n-library-translation": "1.21.1",
     "@trackunit/iris-app-runtime-core-api": "1.16.1"
   },

package/src/ActionSheet/ActionSheet.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, type Styleable } from "@trackunit/react-components";
 import { ActionModel, DropdownModel } from "./Actions";
-export interface ActionSheetProps extends CommonProps {
+export interface ActionSheetProps extends CommonProps, Styleable {
     /**
      * Actions to be displayed in the ActionSheet as primary actions (normally visible)
      */
@@ -127,4 +127,4 @@ export interface ActionSheetProps extends CommonProps {
  * @param {ActionSheetProps} props - The props for the ActionSheet component
  * @returns {ReactElement} ActionSheet component
  */
-export declare const ActionSheet: ({ actions, dropdownActions, moreActions, selections, resetSelection, className, "data-testid": dataTestId, }: ActionSheetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionSheet: ({ actions, dropdownActions, moreActions, selections, resetSelection, className, style, "data-testid": dataTestId, }: ActionSheetProps) => import("react/jsx-runtime").JSX.Element;

package/src/SelectAllBanner.d.ts

@@ -1,5 +1,6 @@
+import { type Styleable } from "@trackunit/react-components";
 import type { MouseEventHandler, ReactElement } from "react";
-export interface SelectAllBannerProps {
+export interface SelectAllBannerProps extends Styleable {
     /** Whether all items across all pages are currently selected */
     readonly areAllSelected: boolean;
     /** Number of items currently selected (on this page or total) */
@@ -56,4 +57,4 @@ export interface SelectAllBannerProps {
  * />
  * ```
  */
-export declare const SelectAllBanner: ({ areAllSelected, selectedCount, onClickSelectAll, onClickClearSelection, selectAllLabel, }: SelectAllBannerProps) => ReactElement;
+export declare const SelectAllBanner: ({ areAllSelected, selectedCount, onClickSelectAll, onClickClearSelection, selectAllLabel, style, }: SelectAllBannerProps) => ReactElement;

package/src/Table.d.ts

@@ -1,8 +1,8 @@
 import { Table as ReactTable, Row } from "@tanstack/react-table";
-import { CommonProps, EmptyStateProps, RelayPagination } from "@trackunit/react-components";
+import { CommonProps, EmptyStateProps, RelayPagination, type Styleable } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
 import "./table-animations.css";
-export interface TableProps<TData extends object> extends ReactTable<TData>, CommonProps {
+export interface TableProps<TData extends object> extends ReactTable<TData>, CommonProps, Styleable {
     /**
      * Relay-style pagination object for infinite scroll. Use with `usePaginationQuery` hook
      * to automatically handle fetching more data as the user scrolls.
@@ -177,4 +177,4 @@ export interface TableProps<TData extends object> extends ReactTable<TData>, Com
  *
  * ```
  */
-export declare const Table: <TData extends object>({ rowHeight, loading, hideFooter, ...props }: TableProps<TData>) => ReactElement;
+export declare const Table: <TData extends object>({ rowHeight, loading, hideFooter, style, ...props }: TableProps<TData>) => ReactElement;