@caspeco/casper-ui-library 5.6.1 → 6.1.0

package/dist/components/button/types.d.ts

@@ -7,7 +7,7 @@ export type ButtonProps = CustomChakraBoxProps & LayoutProps & MarginProps & Pad
      * @note The 'segmentedControl' variant is only used by the SegmentedControl component.
      * @note The 'card' variant is deprecated, use the component ToggleButton instead.
      */
-    variant?: ResponsiveValue<"primary" | "secondary" | "link" | "ghost" | "tertiary" | "segmentedControl" | "card"> | undefined;
+    variant?: ResponsiveValue<"primary" | "secondary" | "link" | "ghost" | "tertiary" | "segmentedControl" | "card" | "alert"> | undefined;
     /** The size of the button, default: md */
     size?: ResponsiveValue<"lg" | "sm" | "md"> | undefined;
     /**

package/dist/components/button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5F,OAAO,EACN,KAAK,WAAW,IAAI,iBAAiB,EACrC,KAAK,SAAS,IAAI,eAAe,EACjC,KAAK,eAAe,EACpB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,WAAW,GAAG,oBAAoB,GAC7C,WAAW,GACX,WAAW,GACX,YAAY,GACZ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,GAChD,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG;IACvG;;;;OAIG;IACH,OAAO,CAAC,EACL,eAAe,CAAC,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,kBAAkB,GAAG,MAAM,CAAC,GACtG,SAAS,CAAC;IAEb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAEvD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAEjC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC;IAEjB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5F,OAAO,EACN,KAAK,WAAW,IAAI,iBAAiB,EACrC,KAAK,SAAS,IAAI,eAAe,EACjC,KAAK,eAAe,EACpB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,WAAW,GAAG,oBAAoB,GAC7C,WAAW,GACX,WAAW,GACX,YAAY,GACZ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,GAChD,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG;IACvG;;;;OAIG;IACH,OAAO,CAAC,EACL,eAAe,CACf,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,kBAAkB,GAAG,MAAM,GAAG,OAAO,CAC9F,GACD,SAAS,CAAC;IAEb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAEvD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAEjC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC;IAEjB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC"}

package/dist/components/icon-button/icon-button.d.ts

@@ -7,7 +7,7 @@
  */
 export declare const IconButton: import('react').ForwardRefExoticComponent<{
     icon: import('../icon/index.js').Icons;
-    variant?: "primary" | "secondary" | "ghost" | "tertiary";
+    variant?: Exclude<import('../button/index.js').ButtonProps["variant"], "link" | "segmentedControl" | import('@chakra-ui/styled-system').ResponsiveArray<unknown> | Partial<Record<string, unknown>>>;
     size?: import('@chakra-ui/styled-system').ResponsiveValue<"lg" | "sm" | "md">;
 } & {
     "aria-label": string;

package/dist/components/icon-button/types.d.ts

@@ -1,6 +1,7 @@
 import { Icons } from '../icon/index.js';
 import { CustomChakraBoxProps, MarginProps, PaddingProps } from '../../theme/index.js';
-import { IconButtonProps as ChakraIconButtonProps, ResponsiveValue } from '@chakra-ui/react';
+import { IconButtonProps as ChakraIconButtonProps, ResponsiveArray, ResponsiveValue } from '@chakra-ui/react';
+import { ButtonProps } from '../button/index.js';
 type CustomStyleProps = CustomChakraBoxProps & MarginProps & PaddingProps;
 type CustomProperties = {
     /**
@@ -10,7 +11,7 @@ type CustomProperties = {
     /**
      * Appearance variant for Button.
      */
-    variant?: "primary" | "secondary" | "ghost" | "tertiary";
+    variant?: Exclude<ButtonProps["variant"], "link" | "segmentedControl" | ResponsiveArray<unknown> | Partial<Record<string, unknown>>>;
     /**
      * The size of the button, defaults to md
      */

package/dist/components/icon-button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,KAAK,EAAE,eAAe,IAAI,qBAAqB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAElG,KAAK,gBAAgB,GAAG,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE1E,KAAK,gBAAgB,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;IACzD;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;CAC3C,CAAC;AAEF,KAAK,0BAA0B,GAAG,IAAI,CACrC,qBAAqB,EACrB,YAAY,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,WAAW,CAC5E,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,0BAA0B,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,KAAK,EACX,eAAe,IAAI,qBAAqB,EACxC,eAAe,EACf,eAAe,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,KAAK,gBAAgB,GAAG,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE1E,KAAK,gBAAgB,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAChB,WAAW,CAAC,SAAS,CAAC,EACtB,MAAM,GAAG,kBAAkB,GAAG,eAAe,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CACzF,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;CAC3C,CAAC;AAEF,KAAK,0BAA0B,GAAG,IAAI,CACrC,qBAAqB,EACrB,YAAY,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,WAAW,CAC5E,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,0BAA0B,GAAG,gBAAgB,CAAC"}

package/dist/components/table/index.d.ts

@@ -1,8 +1,7 @@
 export { createColumnHelper } from '@tanstack/react-table';
 export { Table } from './table.js';
 export { TableContent } from './table-content.js';
+export { useTableContext } from './table-context.js';
 export { TableToolbar } from './table-toolbar.js';
-export type { TableContentProps } from './table-content.js';
-export type { TableToolbarProps } from './table-toolbar.js';
-export type { CellContext, ColumnDef, ExpandedState, Row, RowSelectionState, TableDataType, TableProps, TableSubrows, VisibilityState, } from './types.js';
+export type { CellContext, ColumnDef, ExpandedState, Row, RowSelectionState, TableContentProps, TableProps, TableRow, TableToolbarProps, VisibilityState, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,YAAY,EACX,WAAW,EACX,SAAS,EACT,aAAa,EACb,GAAG,EACH,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,YAAY,EACZ,eAAe,GACf,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,YAAY,EACX,WAAW,EACX,SAAS,EACT,aAAa,EACb,GAAG,EACH,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,eAAe,GACf,MAAM,SAAS,CAAC"}

package/dist/components/table/table-cell.d.ts

@@ -1,12 +1,17 @@
 import { Cell, Row } from '@tanstack/react-table';
-type TableCellProps = {
-    cell: Cell<any, unknown>;
-    visibleCells: Cell<any, unknown>[];
-    row: Row<any>;
+import { ReactNode } from 'react';
+import { Locales } from './translations.js';
+import { TableData, TableRow } from './types.js';
+type TableCellProps<TData extends TableData> = {
+    cell: Cell<TableRow<TData>, unknown>;
+    visibleCells: Cell<TableRow<TData>, unknown>[];
+    row: Row<TableRow<TData>>;
     rowIsExpanded: boolean;
     breakingContentState: Record<string, boolean>;
-    localeString: string;
+    localeString: Locales;
+    actionMenu?: ReactNode;
 };
-export declare const TableCell: import('react').MemoExoticComponent<({ cell, row, rowIsExpanded, visibleCells, breakingContentState, localeString }: TableCellProps) => import("react/jsx-runtime").JSX.Element>;
+declare const TableCellComponent: <TData extends TableData>({ cell, row, rowIsExpanded, visibleCells, breakingContentState, localeString, actionMenu, }: TableCellProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableCell: typeof TableCellComponent;
 export {};
 //# sourceMappingURL=table-cell.d.ts.map

package/dist/components/table/table-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-cell.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-cell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,IAAI,EAAE,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAKxE,KAAK,cAAc,GAAG;IACrB,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IACzB,YAAY,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC;IACnC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,aAAa,EAAE,OAAO,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,YAAY,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,SAAS,uHAC4D,cAAc,6CAgF/F,CAAC"}
+{"version":3,"file":"table-cell.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-cell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,IAAI,EAAE,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvF,OAAO,EAAgB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnD,KAAK,cAAc,CAAC,KAAK,SAAS,SAAS,IAAI;IAC9C,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;IACrC,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC;IAC/C,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,kBAAkB,GAAI,KAAK,SAAS,SAAS,EAAE,6FAQlD,cAAc,CAAC,KAAK,CAAC,4CAiIvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAA+B,OAAO,kBAAkB,CAAC"}

package/dist/components/table/table-cell.js

@@ -1,72 +1,121 @@
-import { jsx as o, jsxs as v, Fragment as b } from "react/jsx-runtime";
-import { Divider as C, Td as S, Flex as T } from "@chakra-ui/react";
-import { flexRender as y } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { memo as I, useMemo as l, useCallback as w } from "react";
-import { TableRowExpandToggleButton as D } from "./table-row-expand-toggle-button.js";
-import { ThemeColorVariable as F, ThemeSpaceVariable as R } from "../../theme/theme-types.js";
-const j = I(
-  ({ cell: n, row: i, rowIsExpanded: c, visibleCells: p, breakingContentState: s, localeString: u }) => {
-    const { column: t } = n, f = l(() => {
-      const e = {
-        width: "100%"
-      };
-      return s[t.id] || (e.overflow = "hidden", e.whiteSpace = "nowrap"), e;
-    }, [s]), h = l(() => t.getIndex() === 0, []), m = i.getCanExpand(), d = p[0].id === n.id, a = m && d, x = l(() => {
-      const e = [];
-      for (let r = 0; r < i.depth; r += 1)
-        e.push(
-          /* @__PURE__ */ o(
-            C,
-            {
-              orientation: "vertical",
-              position: "absolute",
-              zIndex: 1,
-              top: "0",
-              left: `${r * 2 + 0.7}rem`
-            },
-            `nestedTableDivider${r}`
-          )
-        );
-      return e;
-    }, []), g = w(() => {
-      const e = t.getIsPinned();
-      return {
-        position: e ? "sticky" : "relative",
-        left: e ? `${t.getStart("left")}px` : void 0,
-        backgroundColor: e ? F.Background : void 0,
-        zIndex: e ? 1 : void 0,
-        width: t.getSize(),
-        maxWidth: t.getSize()
-      };
-    }, []);
-    return /* @__PURE__ */ o(
-      S,
-      {
-        id: i.id,
-        isNumeric: t.columnDef.meta?.isNumeric,
-        style: {
-          ...g(),
-          borderBottom: 0,
-          paddingLeft: i.depth && d || a ? `${i.depth * 2}rem` : R.Small
-        },
-        children: /* @__PURE__ */ v(T, { w: "100%", align: "center", children: [
-          a || i.depth > 0 && d ? /* @__PURE__ */ o(
-            D,
-            {
-              row: i,
-              localeString: u,
-              hidden: !m,
-              rowIsExpanded: c
-            }
-          ) : /* @__PURE__ */ o(b, {}),
-          h && x,
-          /* @__PURE__ */ o("div", { style: f, children: y(t.columnDef.cell, n.getContext()) })
-        ] })
-      },
-      n.id
-    );
+import { jsx as i, jsxs as g, Fragment as I } from "react/jsx-runtime";
+import { Divider as R, Td as S, Flex as B, Box as b } from "@chakra-ui/react";
+import { flexRender as $ } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { memo as F, useMemo as d, useCallback as k } from "react";
+import { useTableContext as z } from "./table-context.js";
+import { TableRowExpandToggleButton as E } from "./table-row-expand-toggle-button.js";
+import { translations as V } from "./translations.js";
+import { Menu as A } from "../menu/menu.js";
+import { MenuIconButton as N } from "../menu/menu-icon-button.js";
+import { Icons as j } from "../icon/types.js";
+import { ThemeColorVariable as M, ThemeSpaceVariable as _ } from "../../theme/theme-types.js";
+const K = ({
+  cell: r,
+  row: n,
+  rowIsExpanded: x,
+  visibleCells: v,
+  breakingContentState: c,
+  localeString: m,
+  actionMenu: l
+}) => {
+  const C = z(), { column: t } = r, y = V[m], T = d(() => {
+    const e = {
+      width: "100%"
+    };
+    return c[t.id] || (e.overflow = "hidden", e.whiteSpace = "nowrap"), e;
+  }, [c]), p = d(() => t.getIndex() === 0, []), u = n.getCanExpand(), s = v[0].id === r.id, f = u && s, h = l || p && !!C.getRowActions, w = d(() => {
+    const e = [];
+    for (let o = 0; o < n.depth; o += 1) {
+      let a = `${o * 2 + 0.7}rem`;
+      h && (a = `calc(${a} + 24px)`), e.push(
+        /* @__PURE__ */ i(
+          R,
+          {
+            orientation: "vertical",
+            position: "absolute",
+            top: "0",
+            left: a
+          },
+          `nestedTableDivider${o}`
+        )
+      );
+    }
+    return e;
+  }, []), P = k(() => {
+    const e = t.getIsPinned();
+    return {
+      position: e ? "sticky" : "relative",
+      left: e ? `${t.getStart("left")}px` : void 0,
+      backgroundColor: e ? M.Background : void 0,
+      zIndex: e ? 1 : void 0,
+      width: t.getSize(),
+      maxWidth: t.getSize()
+    };
+  }, []);
+  function D() {
+    const e = n.depth && s || f ? `${n.depth * 2}rem` : _.Small;
+    return h ? `calc(${e} + 24px)` : e;
   }
-);
+  return /* @__PURE__ */ i(
+    S,
+    {
+      id: r.id,
+      isNumeric: t.columnDef.meta?.isNumeric,
+      style: {
+        ...P(),
+        borderBottom: 0,
+        paddingLeft: D()
+      },
+      children: /* @__PURE__ */ g(B, { w: "100%", align: "center", children: [
+        l && /* @__PURE__ */ i(A, { children: ({ isOpen: e }) => /* @__PURE__ */ g(
+          b,
+          {
+            display: "contents",
+            onClick: (o) => o.stopPropagation(),
+            onKeyDown: (o) => o.stopPropagation(),
+            children: [
+              /* @__PURE__ */ i(
+                b,
+                {
+                  className: "action-menu-button",
+                  position: "absolute",
+                  left: "0",
+                  opacity: e ? 1 : 0,
+                  _hover: { opacity: 1 },
+                  _focusVisible: { opacity: 1 },
+                  sx: { "&:has(:focus-visible)": { opacity: 1 } },
+                  children: /* @__PURE__ */ i(
+                    N,
+                    {
+                      icon: j.MoreVertical,
+                      variant: "ghost",
+                      size: "sm",
+                      "aria-label": y.moreActions,
+                      borderRadius: "0"
+                    }
+                  )
+                }
+              ),
+              l
+            ]
+          }
+        ) }),
+        f || n.depth > 0 && s ? /* @__PURE__ */ i(
+          E,
+          {
+            row: n,
+            localeString: m,
+            hidden: !u,
+            rowIsExpanded: x
+          }
+        ) : /* @__PURE__ */ i(I, {}),
+        p && w,
+        /* @__PURE__ */ i("div", { style: T, children: $(t.columnDef.cell, r.getContext()) })
+      ] })
+    },
+    r.id
+  );
+}, Z = F(K);
 export {
-  j as TableCell
+  Z as TableCell
 };

package/dist/components/table/table-content.d.ts

@@ -1,10 +1,10 @@
 import { ThemeStyleProps } from '../../theme/index.js';
-import { TableDataType, TableSubrows } from './types.js';
-export interface TableContentProps<J extends TableSubrows<J>> {
+import { TableData, TableRow as TableRowType } from './types.js';
+export interface TableContentProps<TData extends TableData = TableData> {
     /**
      * Returns the data of clicked row. Not applicable to header row.
      */
-    onClickRow?: (row: TableDataType<J>, event: React.MouseEvent<HTMLTableRowElement> | React.KeyboardEvent<HTMLTableRowElement>) => void;
+    onClickRow?: (row: TableRowType<TData>, event: React.MouseEvent<HTMLTableRowElement> | React.KeyboardEvent<HTMLTableRowElement>) => void;
     /**
      * Use to allow a indication that the row has been clicked by changing its background color
      */
@@ -23,7 +23,7 @@ export interface TableContentProps<J extends TableSubrows<J>> {
      */
     stickyHeaders?: boolean;
 }
-declare const TableContentInner: <T extends TableSubrows<T>>({ onClickRow, onRowClickIndication, hideTableHeaderDropdown, showRowHoverStyle, stickyHeaders, ...props }: TableContentProps<T> & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableContentInner: <TData extends TableData>({ onClickRow, onRowClickIndication, hideTableHeaderDropdown, showRowHoverStyle, stickyHeaders, ...props }: TableContentProps<TData> & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableContent: typeof TableContentInner;
 export {};
 //# sourceMappingURL=table-content.d.ts.map

package/dist/components/table/table-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-content.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAO/C,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE3D,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC;IAC3D;;OAEG;IACH,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,EACrB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IACV;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,iBAAiB,GAAI,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC,EAAE,2GAOnD,iBAAiB,CAAC,CAAC,CAAC,GAAG,eAAe,4CAyDxC,CAAC;AAEF,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"table-content.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAM/C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS;IACrE;;OAEG;IACH,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IAEV;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,iBAAiB,GAAI,KAAK,SAAS,SAAS,EAAE,2GAOjD,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,4CAqD5C,CAAC;AAEF,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}

package/dist/components/table/table-content.js

@@ -1,25 +1,22 @@
 import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import { Table as f, Thead as u, Tbody as x } from "@chakra-ui/react";
-import { memo as T, useContext as C, useMemo as r } from "react";
-import { TableContext as g } from "./table-context.js";
+import { Table as u, Thead as T, Tbody as f } from "@chakra-ui/react";
+import { memo as g, useMemo as r } from "react";
+import { useTableContext as x } from "./table-context.js";
 import { TableHeaderRow as y } from "./table-header-row.js";
-import { TableRow as w } from "./table-row.js";
-const h = ({
-  onClickRow: n,
-  onRowClickIndication: i,
+import { TableRow as C } from "./table-row.js";
+const R = ({
+  onClickRow: i,
+  onRowClickIndication: n,
   hideTableHeaderDropdown: l,
   showRowHoverStyle: s = !0,
   stickyHeaders: a,
   ...m
 }) => {
-  const e = C(g);
-  if (!e)
-    throw new Error("No table context");
-  const b = r(() => a ? {
+  const e = x(), d = r(() => a ? {
     position: "sticky",
     top: 0,
     zIndex: 1
-  } : {}, []), d = r(
+  } : {}, []), b = r(
     () => e.table.getRowModel().rows,
     [
       e.expanded,
@@ -29,8 +26,8 @@ const h = ({
       e.data
     ]
   );
-  return /* @__PURE__ */ p(f, { ...m, id: e.id, children: [
-    /* @__PURE__ */ o(u, { style: b, children: e.table.getHeaderGroups().map((t) => /* @__PURE__ */ o(
+  return /* @__PURE__ */ p(u, { ...m, id: e.id, children: [
+    /* @__PURE__ */ o(T, { style: d, children: e.table.getHeaderGroups().map((t) => /* @__PURE__ */ o(
       y,
       {
         headerGroup: t,
@@ -38,22 +35,22 @@ const h = ({
       },
       t.id
     )) }),
-    /* @__PURE__ */ o(x, { children: d.map((t) => {
+    /* @__PURE__ */ o(f, { children: b.map((t) => {
       const c = t.getVisibleCells();
       return /* @__PURE__ */ o(
-        w,
+        C,
         {
           row: t,
           visibleCells: c,
-          onClickRow: n,
-          onRowClickIndication: i,
+          onClickRow: i,
+          onRowClickIndication: n,
           showRowHoverStyle: s
         },
         t.id
       );
     }) })
   ] });
-}, M = T(h);
+}, I = g(R);
 export {
-  M as TableContent
+  I as TableContent
 };

package/dist/components/table/table-context-provider.d.ts

@@ -0,0 +1,57 @@
+import { Column, ColumnDef, ExpandedState, Row, RowSelectionState, SortingState, Table, VisibilityState } from '@tanstack/react-table';
+import { PropsWithChildren } from 'react';
+import { MenuList } from '../menu/index.js';
+import { Locales } from './translations.js';
+import { TableData, TableRow } from './types.js';
+interface TableProviderInterface<TData extends TableData> extends PropsWithChildren {
+    data: TableRow<TData>[];
+    columns: ColumnDef<TableRow<TData>>[];
+    localeString: Locales;
+    initialBreakingContentState?: Record<string, boolean>;
+    initialColumnVisibilityState?: VisibilityState;
+    columnVisibilityState?: VisibilityState;
+    onColumnVisibilityChange?: (state: VisibilityState) => void;
+    onExpandedChange?: (state: ExpandedState) => void;
+    getRowId?: (originalRow: TableRow<TData>, index: number, parent?: Row<TableRow<TData>>) => string;
+    getRowActions?: (row: TableRow<TData>) => React.ReactElement<React.ComponentProps<typeof MenuList>, typeof MenuList> | null | undefined | false;
+    onBreakingContentChange?: (breakingContentState: Record<string, boolean>) => void;
+    onFilterColumn?: (clickedColumn: Column<TableRow<TData>, unknown>) => void;
+    expandedState?: ExpandedState;
+    initialExpandedState?: ExpandedState;
+    id?: string;
+    customRowIndication?: RowSelectionState;
+    onSortingChange?: (state: SortingState) => void;
+    initialSortingState?: SortingState;
+    sortingState?: SortingState;
+}
+export interface TableContextInterface<TData extends TableData = TableData> {
+    data: TableRow<TData>[];
+    table: Table<TableRow<TData>>;
+    initialExpandedState?: ExpandedState;
+    initialBreakingContentState?: Record<string, boolean>;
+    breakingContentState: Record<string, boolean>;
+    setBreakingContentState: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+    localeString: Locales;
+    initialColumnVisibilityState?: VisibilityState;
+    columnVisibilityState?: VisibilityState;
+    onColumnVisibilityChange?: (state: VisibilityState) => void;
+    onBreakingContentChange?: (breakingContentState: Record<string, boolean>) => void;
+    onFilterColumn?: (clickedColumn: Column<TableRow<TData>, unknown>) => void;
+    onExpandedChange?: (state: ExpandedState) => void;
+    getRowId?: (originalRow: TableRow<TData>, index: number, parent?: Row<TableRow<TData>>) => string;
+    getRowActions?: (row: TableRow<TData>) => React.ReactElement<React.ComponentProps<typeof MenuList>, typeof MenuList> | null | undefined | false;
+    expanded: ExpandedState;
+    sorting: SortingState;
+    setSorting: (value: SortingState) => void;
+    setExpanded: React.Dispatch<React.SetStateAction<ExpandedState>>;
+    id?: string;
+    setRowSelection: React.Dispatch<React.SetStateAction<RowSelectionState>>;
+    rowSelection?: RowSelectionState | undefined;
+    columnVisibility: VisibilityState;
+    onSortingChange?: (state: SortingState) => void;
+    initialSortingState?: SortingState;
+    sortingState?: SortingState;
+}
+export declare const TableProvider: <TData extends TableData>({ data, columns, children, expandedState, localeString, initialExpandedState, initialBreakingContentState, initialColumnVisibilityState, columnVisibilityState, onColumnVisibilityChange, onExpandedChange, getRowId, getRowActions, onBreakingContentChange, onFilterColumn, id, customRowIndication, onSortingChange, initialSortingState, sortingState, }: TableProviderInterface<TData>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=table-context-provider.d.ts.map

package/dist/components/table/table-context-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-context-provider.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-context-provider.tsx"],"names":[],"mappings":"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"}

package/dist/components/table/table-context-provider.js

@@ -0,0 +1,115 @@
+import { jsx as J } from "react/jsx-runtime";
+import { useControllableState as i } from "@chakra-ui/react";
+import { useReactTable as K } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { useState as R, useEffect as L, useCallback as s } from "react";
+import { TableContext as N } from "./table-context.js";
+import { getFilteredRowModel as Q, getSortedRowModel as U, getExpandedRowModel as W, getCoreRowModel as X } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
+const ee = ({
+  data: a,
+  columns: p,
+  children: h,
+  expandedState: M,
+  localeString: v,
+  initialExpandedState: r = {},
+  initialBreakingContentState: d = {},
+  initialColumnVisibilityState: x = {},
+  columnVisibilityState: y,
+  onColumnVisibilityChange: E,
+  onExpandedChange: u,
+  getRowId: f,
+  getRowActions: V,
+  onBreakingContentChange: T,
+  onFilterColumn: k,
+  id: F,
+  customRowIndication: n,
+  onSortingChange: b,
+  initialSortingState: P = [],
+  sortingState: c
+}) => {
+  const [t, g] = i({
+    value: M,
+    onChange: u,
+    defaultValue: r
+  }), [l, j] = i({
+    value: y,
+    onChange: E,
+    defaultValue: x
+  }), [m, C] = i({
+    value: c,
+    onChange: b,
+    defaultValue: P
+  }), [q, z] = R(
+    d || {}
+  ), [S, w] = R({});
+  L(() => {
+    n && w(n);
+  }, [n]);
+  const A = s(
+    (e) => {
+      let o;
+      typeof e == "function" ? o = e(l) : o = e, j(o);
+    },
+    [l]
+  ), B = s(
+    (e) => {
+      let o;
+      typeof e == "function" ? o = e(t) : o = e, g(o);
+    },
+    [t]
+  ), D = s(
+    (e) => {
+      C(e);
+    },
+    [C]
+  ), G = K({
+    columns: p,
+    data: a,
+    getCoreRowModel: X(),
+    getExpandedRowModel: W(),
+    getSortedRowModel: U(),
+    getFilteredRowModel: Q(),
+    onColumnVisibilityChange: A,
+    onExpandedChange: B,
+    getSubRows: (e) => e.subRows,
+    getRowId: f,
+    enableSubRowSelection: !0,
+    enableMultiRowSelection: !1,
+    enableRowSelection: !0,
+    state: {
+      sorting: m,
+      columnVisibility: l,
+      expanded: t,
+      rowSelection: S
+    },
+    manualSorting: c !== void 0
+  }), H = {
+    data: a,
+    table: G,
+    initialExpandedState: r,
+    initialBreakingContentState: d,
+    localeString: v,
+    onExpandedChange: u,
+    expanded: t,
+    sorting: m,
+    setSorting: D,
+    setExpanded: g,
+    getRowId: f,
+    getRowActions: V,
+    breakingContentState: q,
+    setBreakingContentState: z,
+    onBreakingContentChange: T,
+    onFilterColumn: k,
+    id: F,
+    setRowSelection: w,
+    rowSelection: S,
+    columnVisibility: l,
+    onSortingChange: b
+  };
+  return (
+    // This is correct but there's no easy way to type the context statically with generics
+    /* @__PURE__ */ J(N.Provider, { value: H, children: h })
+  );
+};
+export {
+  ee as TableProvider
+};