@koobiq/react-components 0.5.0 → 0.6.0

package/dist/components/Table/Table.d.ts

@@ -1,4 +1,5 @@
 import { Cell, Row, Column, TableBody, TableHeader } from '../Collections';
+import { TableContainer } from './components';
 import type { TableComponent } from './types';
 declare const TableComponent: TableComponent;
 type CompoundedComponent = typeof TableComponent & {
@@ -9,4 +10,4 @@ type CompoundedComponent = typeof TableComponent & {
     Cell: typeof Cell;
 };
 export declare const Table: CompoundedComponent;
-export {};
+export { TableContainer };

package/dist/components/Table/Table.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef } from "react";
-import { useDOMRef, mergeProps, useElementSize, clsx } from "@koobiq/react-core";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { useTableState, useTable } from "@koobiq/react-primitives";
 import { utilClasses } from "../../styles/utility.js";
 import s from "./Table.module.css.js";
-import { normalizeBlockSize } from "./utils.js";
+import { useTableContainerContext } from "./components/TableContainer/TableContainerContext.js";
 import { TableRowGroup } from "./components/TableRowGroup/TableRowGroup.js";
 import { TableHeaderRow } from "./components/TableHeaderRow/TableHeaderRow.js";
 import { TableSelectAllCell } from "./components/TableSelectAllCell/TableSelectAllCell.js";
@@ -22,47 +22,35 @@ const textNormal = utilClasses.typography["text-normal"];
 function TableRender(props, ref) {
   const {
     stickyHeader = false,
+    fullWidth = false,
     divider = "none",
     slotProps,
     selectionMode,
     selectionBehavior,
     className,
-    blockSize,
-    maxBlockSize,
-    minBlockSize,
-    style: styleProp
+    style
   } = props;
+  const { theadRef } = useTableContainerContext();
   const state = useTableState({
     ...props,
     showSelectionCheckboxes: selectionMode === "multiple" && selectionBehavior !== "replace"
   });
   const domRef = useDOMRef(ref);
-  const tableRef = useRef(null);
   const { collection } = state;
-  const { gridProps } = useTable(props, state, tableRef);
+  const { gridProps } = useTable(props, state, domRef);
   const tableProps = mergeProps(
-    { ref: tableRef, className: s.base },
-    gridProps,
-    slotProps?.table
-  );
-  const { ref: theadRef, height } = useElementSize();
-  const containerProps = mergeProps(
     {
-      className: clsx(s.container, textNormal, className),
-      "data-divider": divider,
+      className: clsx(s.base, fullWidth && s.fullWidth, textNormal, className),
       "data-sticky-header": stickyHeader,
-      style: {
-        ...styleProp,
-        "--table-container-block-size": normalizeBlockSize(blockSize),
-        "--table-container-min-block-size": normalizeBlockSize(minBlockSize),
-        "--table-container-max-block-size": normalizeBlockSize(maxBlockSize),
-        "--table-container-scroll-padding-top": `${height}px`
-      },
-      ref: domRef
+      "data-divider": divider,
+      "data-fullwidth": fullWidth,
+      ref: domRef,
+      style
     },
-    slotProps?.container
+    gridProps,
+    slotProps?.root
   );
-  return /* @__PURE__ */ jsx("div", { ...containerProps, children: /* @__PURE__ */ jsxs("table", { ...tableProps, children: [
+  return /* @__PURE__ */ jsxs("table", { ...tableProps, children: [
     /* @__PURE__ */ jsx(TableRowGroup, { type: "thead", ref: theadRef, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx(TableHeaderRow, { item: headerRow, state, children: [...headerRow.childNodes].map(
       (column) => column.props.isSelectionCell ? /* @__PURE__ */ jsx(
         TableSelectAllCell,
@@ -83,7 +71,7 @@ function TableRender(props, ref) {
     /* @__PURE__ */ jsx(TableRowGroup, { type: "tbody", children: [...collection.body.childNodes].map((row) => /* @__PURE__ */ jsx(TableRow, { item: row, state, children: [...row.childNodes].map(
       (cell) => cell.props.isSelectionCell ? /* @__PURE__ */ jsx(TableCheckboxCell, { cell, state }, cell.key) : /* @__PURE__ */ jsx(TableCell, { cell, state }, cell.key)
     ) }, row.key)) })
-  ] }) });
+  ] });
 }
 const TableComponent = forwardRef(TableRender);
 const Table = TableComponent;

package/dist/components/Table/Table.module.css.js

@@ -1,11 +1,11 @@
-const container = "kbq-table-container-ecbaa4";
 const base = "kbq-table-55e555";
+const fullWidth = "kbq-table-fullWidth-419d42";
 const s = {
-  container,
-  base
+  base,
+  fullWidth
 };
 export {
   base,
-  container,
-  s as default
+  s as default,
+  fullWidth
 };

package/dist/components/Table/components/TableContainer/TableContainer.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { TableContainerBaseProps } from './types';
+export declare const TableContainer: import("@koobiq/react-core").PolyForwardComponent<"div", TableContainerBaseProps, ElementType>;
+export type TableContainerProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof TableContainer<As>>;

package/dist/components/Table/components/TableContainer/TableContainer.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, useElementSize, clsx } from "@koobiq/react-core";
+import s from "./TableContainer.module.css.js";
+import { TableContainerContext } from "./TableContainerContext.js";
+import { normalizeBlockSize } from "./utils.js";
+const TableContainer = polymorphicForwardRef((props, ref) => {
+  const {
+    as: Tag = "div",
+    children,
+    className,
+    blockSize,
+    maxBlockSize,
+    minBlockSize,
+    style: styleProp
+  } = props;
+  const { ref: theadRef, height } = useElementSize();
+  const style = {
+    ...styleProp,
+    "--table-container-block-size": normalizeBlockSize(blockSize),
+    "--table-container-min-block-size": normalizeBlockSize(minBlockSize),
+    "--table-container-max-block-size": normalizeBlockSize(maxBlockSize),
+    "--table-container-scroll-padding-top": `${height}px`
+  };
+  return /* @__PURE__ */ jsx(TableContainerContext.Provider, { value: { theadRef }, children: /* @__PURE__ */ jsx(Tag, { className: clsx(s.base, className), style, ref, children }) });
+});
+TableContainer.displayName = "TableContainer";
+export {
+  TableContainer
+};

package/dist/components/Table/components/TableContainer/TableContainer.module.css.js

@@ -0,0 +1,8 @@
+const base = "kbq-tablecontainer-0c5c0f";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/Table/components/TableContainer/TableContainerContext.d.ts

@@ -0,0 +1,6 @@
+import { type Ref } from 'react';
+export type TableContainerContextProps = {
+    theadRef: Ref<HTMLElement>;
+};
+export declare const TableContainerContext: import("react").Context<TableContainerContextProps>;
+export declare const useTableContainerContext: () => TableContainerContextProps;

package/dist/components/Table/components/TableContainer/TableContainerContext.js

@@ -0,0 +1,10 @@
+"use client";
+import { createContext, useContext } from "react";
+const TableContainerContext = createContext(
+  {}
+);
+const useTableContainerContext = () => useContext(TableContainerContext);
+export {
+  TableContainerContext,
+  useTableContainerContext
+};

package/dist/components/Table/components/TableContainer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TableContainer';
+export * from './TableContainerContext';
+export * from './types';

package/dist/components/Table/components/TableContainer/types.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type TableContainerPropBlockSize = CSSProperties['blockSize'];
+export type TableContainerPropMinBlockSize = CSSProperties['minBlockSize'];
+export type TableContainerPropMaxBlockSize = CSSProperties['maxInlineSize'];
+export type TableContainerBaseProps = {
+    /** Height of the table container. */
+    blockSize?: TableContainerPropBlockSize;
+    /** Minimum height of the table container. */
+    minBlockSize?: TableContainerPropMinBlockSize;
+    /** Maximum height of the table container. */
+    maxBlockSize?: TableContainerPropMaxBlockSize;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+};

package/dist/components/Table/components/TableContainer/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TableContainerPropBlockSize } from './types';
+export declare const normalizeBlockSize: (value: TableContainerPropBlockSize | undefined) => string | undefined;

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

@@ -5,3 +5,4 @@ export * from './TableRow';
 export * from './TableCell';
 export * from './TableSelectAllCell';
 export * from './TableCheckboxCell';
+export * from './TableContainer';

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

@@ -4,9 +4,6 @@ import type { Key } from '@react-types/shared';
 export declare const tablePropDivider: readonly ["none", "row"];
 export type TablePropDivider = (typeof tablePropDivider)[number];
 export type TablePropChildren<T> = TableStateProps<T>['children'];
-export type TablePropBlockSize = CSSProperties['blockSize'];
-export type TablePropMinBlockSize = CSSProperties['minBlockSize'];
-export type TablePropMaxBlockSize = CSSProperties['maxInlineSize'];
 export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'selectionMode' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'disabledKeys' | 'disabledBehavior'> & {
     /** Handler that is called when a user performs an action on the row. */
     onRowAction?: (key: Key) => void;
@@ -21,6 +18,11 @@ export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'sele
      * @default 'none'
      */
     divider?: TablePropDivider;
+    /**
+     * If `true`, the button will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Flag indicating a fixed table header.
      * @default false
@@ -32,17 +34,10 @@ export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'sele
      */
     children?: TablePropChildren<T>;
     /** Ref to the control. */
-    ref?: Ref<HTMLDivElement>;
-    /** Height of the table container. */
-    blockSize?: TablePropBlockSize;
-    /** Minimum height of the table container. */
-    minBlockSize?: TablePropMinBlockSize;
-    /** Maximum height of the table container. */
-    maxBlockSize?: TablePropMaxBlockSize;
+    ref?: Ref<HTMLTableElement>;
     /** The props used for each slot inside. */
     slotProps?: {
-        container?: ComponentPropsWithRef<'div'>;
-        table?: ComponentPropsWithRef<'table'>;
+        root?: ComponentPropsWithRef<'table'>;
     };
 };
 export type TableComponent = <T>(props: TableProps<T>) => ReactElement | null;

package/dist/index.js

@@ -72,6 +72,7 @@ import { TagGroup } from "./components/TagGroup/TagGroup.js";
 import { Tag } from "./components/TagGroup/Tag.js";
 import { tagGroupPropVariant } from "./components/TagGroup/types.js";
 import { Table } from "./components/Table/Table.js";
+import { TableContainer } from "./components/Table/components/TableContainer/TableContainer.js";
 import { Calendar } from "./components/Calendar/Calendar.js";
 import { DateInput, DateInputRender } from "./components/DateInput/DateInput.js";
 import { dateInputPropVariant } from "./components/DateInput/types.js";
@@ -138,6 +139,7 @@ export {
   SkeletonBlock,
   SkeletonTypography,
   Table,
+  TableContainer,
   Tag,
   TagGroup,
   Textarea,

package/dist/style.css

@@ -1944,7 +1944,7 @@
   letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
   color: var(--kbq-foreground-contrast-secondary);
-  margin-block-end: var(--kbq-size-s);
+  margin-block-end: var(--kbq-size-xs);
 }
 
 .kbq-fieldlabel-hidden-9f53e4 {
@@ -2014,6 +2014,16 @@
   inset: 0;
 }
 
+.kbq-fieldcontentgroup-d85be3 + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xs);
+}
+
+.kbq-fieldcontentgroup-d85be3 + * + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xxs);
+}
+
 .kbq-fieldcontentgroup-hasStartAddon-62fb80 {
   --field-control-start-addon-inline-size: 36px;
 }
@@ -2168,9 +2178,7 @@
   letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-text-compact-line-height)  - var(--kbq-typography-text-compact-font-size)) / 2);
   color: var(--kbq-foreground-contrast-secondary);
-  margin: 0;
   transition: color var(--kbq-transition-default);
-  margin-block-start: var(--kbq-size-xxs);
 }
 .kbq-fielderror-a0b0a4 {
   inline-size: 100%;
@@ -2184,9 +2192,7 @@
   letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-text-compact-line-height)  - var(--kbq-typography-text-compact-font-size)) / 2);
   color: var(--kbq-foreground-error);
-  margin: 0;
   transition: color var(--kbq-transition-default);
-  margin-block-start: var(--kbq-size-xxs);
 }
 .kbq-textarea-auto-size-566580 {
   resize: none;
@@ -3599,20 +3605,17 @@
 .kbq-taggroup-20136b [role="gridcell"] {
   display: contents;
 }
-.kbq-table-container-ecbaa4 {
-  --table-container-block-size: 100%;
-  --table-container-min-block-size: unset;
-  --table-container-max-block-size: unset;
-  --table-container-scroll-padding-top: 0;
+.kbq-table-55e555 {
   --table-cell-padding: 10px var(--kbq-size-s);
   --table-cell-color: var(--kbq-foreground-contrast);
   --table-header-cell-padding: 10px var(--kbq-size-s);
   --table-border: 1px solid var(--kbq-line-contrast-less);
   --table-header-cell-color: var(--kbq-foreground-contrast-secondary);
-  block-size: var(--table-container-block-size);
-  min-block-size: var(--table-container-min-block-size);
-  max-block-size: var(--table-container-max-block-size);
-  scroll-padding-block-start: var(--table-container-scroll-padding-top);
+  border-spacing: 0;
+}
+
+.kbq-table-fullWidth-419d42 {
+  inline-size: 100%;
 }
 
 [data-divider="none"] tbody td:first-child {
@@ -3659,11 +3662,6 @@
   inset-block-start: 0;
 }
 
-.kbq-table-55e555 {
-  border-spacing: 0;
-  inline-size: 100%;
-}
-
 [aria-multiselectable="true"] tbody tr:is([data-selected="true"], [data-focus-visible="true"]):has( + :is([data-selected="true"], [data-focus-visible="true"])) {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
@@ -3819,6 +3817,21 @@
   outline-offset: -2px;
   outline: 2px solid var(--kbq-states-line-focus-theme);
 }
+.kbq-tablecontainer-0c5c0f {
+  --table-container-block-size: ;
+  --table-container-min-block-size: unset;
+  --table-container-max-block-size: unset;
+  --table-container-scroll-padding-top: 0;
+  block-size: var(--table-container-block-size);
+  min-block-size: var(--table-container-min-block-size);
+  max-block-size: var(--table-container-max-block-size);
+  scroll-padding-block-start: var(--table-container-scroll-padding-top);
+  overflow: auto;
+}
+
+.kbq-tablecontainer-0c5c0f table {
+  inline-size: 100%;
+}
 .kbq-calendar-fa3168 {
   --calendar-cell-inline-size: 40px;
   --calendar-cell-block-size: 32px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.14.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.5.0",
-    "@koobiq/react-core": "0.5.0",
-    "@koobiq/react-icons": "0.5.0",
-    "@koobiq/react-primitives": "0.5.0"
+    "@koobiq/logger": "0.6.0",
+    "@koobiq/react-icons": "0.6.0",
+    "@koobiq/react-core": "0.6.0",
+    "@koobiq/react-primitives": "0.6.0"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",

package/dist/components/Table/utils.d.ts

@@ -1,2 +0,0 @@
-import type { TablePropBlockSize } from './types';
-export declare const normalizeBlockSize: (value: TablePropBlockSize | undefined) => string | undefined;