@koobiq/react-components 0.12.0 → 0.13.1

package/dist/components/Collections/Cell.d.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'react';
 import type { CellProps as AriaCellProps } from '@koobiq/react-primitives';
-export declare const cellPropAlign: readonly ["left", "right", "center"];
+export declare const cellPropAlign: readonly ["start", "end", "center", "left", "right"];
 export declare const cellPropVerticalAlign: readonly ["baseline", "top", "middle", "bottom", "sub", "text-top"];
 export type CellPropAlign = (typeof cellPropAlign)[number];
 export type CellPropVerticalAlign = (typeof cellPropVerticalAlign)[number];
@@ -13,12 +13,12 @@ export type CellProps = AriaCellProps & {
     'data-testid'?: string | number;
     /**
      * Horizontal alignment of the cell content.
-     * @default left
+     * @default 'start'
      */
     align?: CellPropAlign;
     /**
      * Vertical alignment of the cell content.
-     * @default middle
+     * @default 'middle'
      */
     valign?: CellPropVerticalAlign;
 };

package/dist/components/Collections/Column.d.ts

@@ -1,10 +1,10 @@
 import type { CSSProperties } from 'react';
 import type { ColumnProps as AriaColumnProps } from '@koobiq/react-primitives';
-export declare const columnPropAlign: readonly ["left", "right", "center"];
+export declare const columnPropAlign: readonly ["start", "end", "center", "left", "right"];
 export declare const columnPropVerticalAlign: readonly ["baseline", "top", "middle", "bottom", "sub", "text-top"];
 export type ColumnPropAlign = (typeof columnPropAlign)[number];
 export type ColumnPropVerticalAlign = (typeof columnPropVerticalAlign)[number];
-export type ColumnProps<T> = Omit<AriaColumnProps<T>, 'allowsResizing' | 'allowsSorting' | 'width' | 'defaultWidth' | 'minWidth' | 'maxWidth'> & {
+export type ColumnProps<T> = Omit<AriaColumnProps<T>, 'allowsResizing' | 'width' | 'defaultWidth' | 'minWidth' | 'maxWidth'> & {
     /** Additional CSS-classes. */
     className?: string;
     /** Inline styles. */
@@ -13,12 +13,12 @@ export type ColumnProps<T> = Omit<AriaColumnProps<T>, 'allowsResizing' | 'allows
     'data-testid'?: string | number;
     /**
      * Horizontal alignment of the cell content.
-     * @default left
+     * @default 'start'
      */
     align?: ColumnPropAlign;
     /**
      * Vertical alignment of the cell content.
-     * @default middle
+     * @default 'middle'
      */
     valign?: ColumnPropVerticalAlign;
 };

package/dist/components/Table/Table.js

@@ -27,6 +27,7 @@ function TableRender(props, ref) {
     slotProps,
     selectionMode,
     selectionBehavior,
+    renderSortIcon,
     className,
     style
   } = props;
@@ -51,24 +52,25 @@ function TableRender(props, ref) {
     slotProps?.root
   );
   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(
+    /* @__PURE__ */ jsx(TableRowGroup, { type: "thead", ref: theadRef, theadProps: slotProps?.header, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx(TableHeaderRow, { item: headerRow, state, children: [...headerRow.childNodes].map(
       (column) => column.props.isSelectionCell ? /* @__PURE__ */ jsx(
         TableSelectAllCell,
         {
-          column,
-          state
+          state,
+          column
         },
         column.key
       ) : /* @__PURE__ */ jsx(
         TableColumnHeader,
         {
+          state,
           column,
-          state
+          renderSortIcon
         },
         column.key
       )
     ) }, headerRow.key)) }),
-    /* @__PURE__ */ jsx(TableRowGroup, { type: "tbody", children: [...collection.body.childNodes].map((row) => /* @__PURE__ */ jsx(TableRow, { item: row, state, children: [...row.childNodes].map(
+    /* @__PURE__ */ jsx(TableRowGroup, { type: "tbody", tbodyProps: slotProps?.body, 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)) })
   ] });

package/dist/components/Table/components/TableCell/TableCell.js

@@ -13,21 +13,23 @@ function TableCell({ cell, state }) {
   const {
     style,
     className,
-    align = "left",
+    align = "start",
     valign = "middle"
   } = cell.props;
   return /* @__PURE__ */ jsx(
     "td",
     {
-      align,
       ...mergeProps(gridCellProps, focusProps),
       className: clsx(
         s.base,
         textNormal,
+        align && s[align],
         valign && s[valign],
         isFocusVisible && s.focusVisible,
         className
       ),
+      "data-align": align || void 0,
+      "data-valign": valign || void 0,
       style,
       ref,
       children: cell.rendered

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

@@ -1,4 +1,9 @@
 const base = "kbq-tablecell-7b64ee";
+const start = "kbq-tablecell-start-a210ad";
+const left = "kbq-tablecell-left-c76817";
+const center = "kbq-tablecell-center-cde2ea";
+const end = "kbq-tablecell-end-684866";
+const right = "kbq-tablecell-right-407770";
 const top = "kbq-tablecell-top-c83311";
 const baseline = "kbq-tablecell-baseline-9a695f";
 const middle = "kbq-tablecell-middle-61ce62";
@@ -7,6 +12,11 @@ const sub = "kbq-tablecell-sub-422152";
 const focusVisible = "kbq-tablecell-focusVisible-401e7c";
 const s = {
   base,
+  start,
+  left,
+  center,
+  end,
+  right,
   top,
   baseline,
   middle,
@@ -19,9 +29,14 @@ export {
   base,
   baseline,
   bottom,
+  center,
   s as default,
+  end,
   focusVisible,
+  left,
   middle,
+  right,
+  start,
   sub,
   top
 };

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

@@ -1,7 +1,9 @@
 import type { TableState, AriaTableColumnHeaderProps } from '@koobiq/react-primitives';
+import type { TableProps } from '../../types';
 type TableColumnHeaderProps<T> = {
     column: AriaTableColumnHeaderProps<T>['node'];
     state: TableState<T>;
+    renderSortIcon?: TableProps<T>['renderSortIcon'];
 };
-export declare function TableColumnHeader<T>({ column, state, }: TableColumnHeaderProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TableColumnHeader<T>({ column, state, renderSortIcon, }: TableColumnHeaderProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table/components/TableColumnHeader/TableColumnHeader.js

@@ -1,14 +1,16 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useFocusRing, mergeProps, clsx } from "@koobiq/react-core";
+import { IconChevronUpS16, IconChevronDownS16 } from "@koobiq/react-icons";
 import { useTableColumnHeader } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
 import s from "./TableColumnHeader.module.css.js";
 const textNormal = utilClasses.typography["text-normal"];
 function TableColumnHeader({
   column,
-  state
+  state,
+  renderSortIcon
 }) {
   const ref = useRef(null);
   const { columnHeaderProps } = useTableColumnHeader(
@@ -19,25 +21,44 @@ function TableColumnHeader({
   const {
     style,
     className,
-    align = "left",
+    align = "start",
     valign = "middle"
   } = column.props;
   const { isFocusVisible, focusProps } = useFocusRing();
+  const isActive = state.sortDescriptor?.column === column.key;
+  const { allowsSorting } = column.props;
+  const direction = isActive ? state.sortDescriptor?.direction : void 0;
+  const defaultIcon = direction === "ascending" ? /* @__PURE__ */ jsx(IconChevronUpS16, {}) : /* @__PURE__ */ jsx(IconChevronDownS16, {});
+  const iconToRender = renderSortIcon?.({ direction, isActive }) ?? defaultIcon;
   return /* @__PURE__ */ jsx(
     "th",
     {
-      align,
       className: clsx(
         s.base,
+        align && s[align],
         valign && s[valign],
         isFocusVisible && s.focusVisible,
+        allowsSorting && s.sortable,
         textNormal,
         className
       ),
+      "data-align": align || void 0,
+      "data-valign": valign || void 0,
+      "data-allows-sorting": allowsSorting || void 0,
       style,
       ...mergeProps(columnHeaderProps, focusProps),
       ref,
-      children: column.rendered
+      children: /* @__PURE__ */ jsxs("span", { className: s.content, children: [
+        column.rendered,
+        allowsSorting && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: clsx(s.sortIcon, isActive && s.active),
+            children: iconToRender
+          }
+        )
+      ] })
     }
   );
 }

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

@@ -1,27 +1,54 @@
 const base = "kbq-tablecolumnheader-236616";
+const start = "kbq-tablecolumnheader-start-25f77f";
+const left = "kbq-tablecolumnheader-left-c0faf1";
+const center = "kbq-tablecolumnheader-center-264aa0";
+const end = "kbq-tablecolumnheader-end-a10062";
+const right = "kbq-tablecolumnheader-right-e8f5b6";
 const top = "kbq-tablecolumnheader-top-70b78e";
 const baseline = "kbq-tablecolumnheader-baseline-9772f1";
 const middle = "kbq-tablecolumnheader-middle-22b85a";
 const bottom = "kbq-tablecolumnheader-bottom-1f6f2d";
 const sub = "kbq-tablecolumnheader-sub-c48ac7";
 const focusVisible = "kbq-tablecolumnheader-focusVisible-21814b";
+const sortable = "kbq-tablecolumnheader-sortable-038383";
+const content = "kbq-tablecolumnheader-content-2b6a20";
+const sortIcon = "kbq-tablecolumnheader-sortIcon-b98bf4";
+const active = "kbq-tablecolumnheader-active-f9b640";
 const s = {
   base,
+  start,
+  left,
+  center,
+  end,
+  right,
   top,
   baseline,
   middle,
   bottom,
   sub,
   "text-top": "kbq-tablecolumnheader-text-top-7013fa",
-  focusVisible
+  focusVisible,
+  sortable,
+  content,
+  sortIcon,
+  active
 };
 export {
+  active,
   base,
   baseline,
   bottom,
+  center,
+  content,
   s as default,
+  end,
   focusVisible,
+  left,
   middle,
+  right,
+  sortIcon,
+  sortable,
+  start,
   sub,
   top
 };

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

@@ -1,6 +1,8 @@
-import { type ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 export type TableRowGroupProps = {
     children: ReactNode;
     type: 'thead' | 'tbody';
+    theadProps?: ComponentPropsWithRef<'thead'>;
+    tbodyProps?: ComponentPropsWithRef<'tbody'>;
 };
 export declare const TableRowGroup: import("react").ForwardRefExoticComponent<TableRowGroupProps & import("react").RefAttributes<any>>;

package/dist/components/Table/components/TableRowGroup/TableRowGroup.js

@@ -1,12 +1,17 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { mergeProps } from "@koobiq/react-core";
 import { useTableRowGroup } from "@koobiq/react-primitives";
 const TableRowGroup = forwardRef(
-  ({ type = "thead", children }, ref) => {
+  ({ type = "thead", children, theadProps, tbodyProps }, ref) => {
     const Element = type;
     const { rowGroupProps } = useTableRowGroup();
-    return /* @__PURE__ */ jsx(Element, { ...rowGroupProps, ref, children });
+    const elementProps = mergeProps(
+      { ...rowGroupProps, ref },
+      type === "thead" ? theadProps : tbodyProps
+    );
+    return /* @__PURE__ */ jsx(Element, { ...elementProps, children });
   }
 );
 TableRowGroup.displayName = "TableRowGroup";

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

@@ -1,10 +1,14 @@
-import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { TableStateProps } from '@koobiq/react-primitives';
 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 TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'selectionMode' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'disabledKeys' | 'disabledBehavior'> & {
+type TablePropSortIconRender = (args: {
+    direction: 'ascending' | 'descending' | undefined;
+    isActive: boolean;
+}) => ReactNode;
+export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'selectionMode' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'disabledKeys' | 'disabledBehavior' | 'sortDescriptor' | 'onSortChange'> & {
     /** Handler that is called when a user performs an action on the row. */
     onRowAction?: (key: Key) => void;
     /** Handler that is called when a user performs an action on the cell. */
@@ -30,13 +34,18 @@ export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'sele
      * The elements that make up the table.
      * Includes the Table.Header, Table.Body, Table.Column, and Table.Row.
      */
+    /** Render function for a custom sort icon for the column */
+    renderSortIcon?: TablePropSortIconRender;
     children?: TablePropChildren<T>;
     /** Ref to the control. */
     ref?: Ref<HTMLTableElement>;
     /** The props used for each slot inside. */
     slotProps?: {
         root?: ComponentPropsWithRef<'table'>;
+        header?: ComponentPropsWithRef<'thead'>;
+        body?: ComponentPropsWithRef<'tbody'>;
     };
 };
 export type TableComponent = <T>(props: TableProps<T>) => ReactElement | null;
 export type TableRef = ComponentRef<'table'>;
+export {};

package/dist/components/index.d.ts

@@ -38,5 +38,5 @@ export * from './TimePicker';
 export * from './SearchInput';
 export * from './Form';
 export * from './layout';
-export { useListData, type ListData, type ListOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
-export { useRouter, useLocale, type Locale, RouterProvider, useDateFormatter, } from '@koobiq/react-core';
+export { useListData, useAsyncList, type ListData, type ListOptions, type AsyncListData, type AsyncListOptions, type AsyncListLoadFunction, type AsyncListLoadOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
+export { useRouter, useLocale, type Locale, type SortDescriptor, type Selection, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

package/dist/index.js

@@ -1,5 +1,5 @@
 /* empty css           */
-import { useListData } from "@koobiq/react-primitives";
+import { useAsyncList, useListData } from "@koobiq/react-primitives";
 import { RouterProvider, useDateFormatter, useLocale, useRouter } from "@koobiq/react-core";
 import { Provider, defaultBreakpoints } from "./components/Provider/Provider.js";
 import { BreakpointsProvider } from "./components/Provider/BreakpointsProvider.js";
@@ -245,6 +245,7 @@ export {
   typographyPropColor,
   typographyPropDisplay,
   typographyPropVariant,
+  useAsyncList,
   useBreakpoints,
   useDateFormatter,
   useForm,

package/dist/style.css

@@ -3780,6 +3780,18 @@
   outline: none;
 }
 
+.kbq-tablecolumnheader-start-25f77f, .kbq-tablecolumnheader-left-c0faf1 {
+  text-align: start;
+}
+
+.kbq-tablecolumnheader-center-264aa0 {
+  text-align: center;
+}
+
+.kbq-tablecolumnheader-end-a10062, .kbq-tablecolumnheader-right-e8f5b6 {
+  text-align: end;
+}
+
 .kbq-tablecolumnheader-top-70b78e {
   vertical-align: top;
 }
@@ -3808,6 +3820,33 @@
   outline-offset: -2px;
   outline: 2px solid var(--kbq-states-line-focus-theme);
 }
+
+.kbq-tablecolumnheader-sortable-038383 {
+  cursor: pointer;
+}
+
+.kbq-tablecolumnheader-content-2b6a20 {
+  gap: var(--kbq-size-s);
+  display: inline-flex;
+}
+
+.kbq-tablecolumnheader-sortIcon-b98bf4 {
+  visibility: hidden;
+  display: flex;
+}
+
+.kbq-tablecolumnheader-sortIcon-b98bf4:after {
+  content: " ";
+  font-size: 0;
+}
+
+.kbq-tablecolumnheader-sortIcon-b98bf4 > * {
+  margin: auto;
+}
+
+.kbq-tablecolumnheader-active-f9b640 {
+  visibility: visible;
+}
 .kbq-tablerow-4a268c {
   box-sizing: border-box;
   cursor: default;
@@ -3873,6 +3912,18 @@
   outline: none;
 }
 
+.kbq-tablecell-start-a210ad, .kbq-tablecell-left-c76817 {
+  text-align: start;
+}
+
+.kbq-tablecell-center-cde2ea {
+  text-align: center;
+}
+
+.kbq-tablecell-end-684866, .kbq-tablecell-right-407770 {
+  text-align: end;
+}
+
 .kbq-tablecell-top-c83311 {
   vertical-align: top;
 }

package/dist/types.d.ts

@@ -1,2 +1 @@
 export type { PressEvent } from '@koobiq/react-core';
-export type Selection = 'all' | Set<string | number>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "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.12.0",
-    "@koobiq/react-icons": "0.12.0",
-    "@koobiq/react-primitives": "0.12.0",
-    "@koobiq/react-core": "0.12.0"
+    "@koobiq/logger": "0.13.1",
+    "@koobiq/react-icons": "0.13.1",
+    "@koobiq/react-primitives": "0.13.1",
+    "@koobiq/react-core": "0.13.1"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",