@koobiq/react-components 0.0.1-beta.3 → 0.0.1-beta.31

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

@@ -1,4 +1,17 @@
 export * from './SidePanel';
 export * from './types';
-export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
-export { DialogHeader as SidePanelHeader, DialogContent as SidePanelContent, DialogFooter as SidePanelFooter, } from '../Dialog';
+/**
+ * @deprecated
+ * This component has been deprecated, please use `SidePanel.Header` instead.
+ */
+export declare const SidePanelHeader: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `SidePanel.Body` instead.
+ */
+export declare const SidePanelContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `SidePanel.Footer` instead.
+ */
+export declare const SidePanelFooter: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SidePanel/index.js

@@ -0,0 +1,9 @@
+import { Dialog } from "../Dialog/Dialog.js";
+const SidePanelHeader = Dialog.Header;
+const SidePanelContent = Dialog.Body;
+const SidePanelFooter = Dialog.Footer;
+export {
+  SidePanelContent,
+  SidePanelFooter,
+  SidePanelHeader
+};

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

@@ -14,12 +14,12 @@ export type SidePanelProps = {
     /**
      * Component width size.
      * @default medium
-     * */
+     */
     size?: SidePanelPropSize;
     /**
      * Side from which the side panel will appear.
      * @default left
-     * */
+     */
     position?: SidePanelPropPosition;
     /** If `true`, the component is shown. */
     open?: boolean;
@@ -32,7 +32,7 @@ export type SidePanelProps = {
     /**
      * If `true`, the close button isn't shown.
      * @default false
-     * */
+     */
     hideCloseButton?: boolean;
     /** Handler that is called when the modal's open state changes. */
     onOpenChange?: (open: boolean) => void;
@@ -65,6 +65,13 @@ export type SidePanelProps = {
      * @default false
      */
     disableFocusManagement?: boolean;
+    /**
+     * When user interacts with the argument element outside of the overlay ref,
+     * return true if onClose should be called. This gives you a chance to filter
+     * out interaction with elements that should not dismiss the overlay.
+     * By default, onClose will always be called on interaction outside the overlay ref.
+     */
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
     /** The props used for each slot inside. */
     slotProps?: {
         dialog?: DialogProps;

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

@@ -5,7 +5,7 @@ export type SkeletonTypographyBaseProps = {
     /**
      * Variant of typography.
      * @default text-normal
-     * */
+     */
     variant?: SkeletonTypographyPropVariant;
     /** Number of lines per paragraph. */
     rows?: number;

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

@@ -0,0 +1,12 @@
+import { Cell, Row, Column, TableBody, TableHeader } from '../Collections';
+import type { TableComponentProp } from './types';
+declare const TableComponent: TableComponentProp;
+type CompoundedComponent = typeof TableComponent & {
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Column: typeof Column;
+    Row: typeof Row;
+    Cell: typeof Cell;
+};
+export declare const Table: CompoundedComponent;
+export {};

package/dist/components/Table/Table.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { useDOMRef, mergeProps, useElementSize, 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 { TableRowGroup } from "./components/TableRowGroup/TableRowGroup.js";
+import { TableHeaderRow } from "./components/TableHeaderRow/TableHeaderRow.js";
+import { TableSelectAllCell } from "./components/TableSelectAllCell/TableSelectAllCell.js";
+import { TableColumnHeader } from "./components/TableColumnHeader/TableColumnHeader.js";
+import { TableRow } from "./components/TableRow/TableRow.js";
+import { TableCheckboxCell } from "./components/TableCheckboxCell/TableCheckboxCell.js";
+import { TableCell } from "./components/TableCell/TableCell.js";
+import { TableHeader } from "../Collections/TableHeader.js";
+import { TableBody } from "../Collections/TableBody.js";
+import { Column } from "../Collections/Column.js";
+import { Row } from "../Collections/Row.js";
+import { Cell } from "../Collections/Cell.js";
+const textNormal = utilClasses.typography["text-normal"];
+function TableRender(props, ref) {
+  const {
+    stickyHeader = false,
+    divider = "none",
+    slotProps,
+    selectionMode,
+    selectionBehavior,
+    className,
+    blockSize,
+    maxBlockSize,
+    minBlockSize,
+    style: styleProp
+  } = props;
+  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 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,
+      "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
+    },
+    slotProps?.container
+  );
+  return /* @__PURE__ */ jsx("div", { ...containerProps, children: /* @__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,
+        {
+          column,
+          state
+        },
+        column.key
+      ) : /* @__PURE__ */ jsx(
+        TableColumnHeader,
+        {
+          column,
+          state
+        },
+        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(
+      (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;
+Table.Header = TableHeader;
+Table.Body = TableBody;
+Table.Column = Column;
+Table.Row = Row;
+Table.Cell = Cell;
+export {
+  Table
+};

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

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

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

@@ -0,0 +1,7 @@
+import type { TableState, AriaTableCellProps } from '@koobiq/react-primitives';
+type TableCellProps<T> = {
+    cell: AriaTableCellProps['node'];
+    state: TableState<T>;
+};
+export declare function TableCell<T>({ cell, state }: TableCellProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useFocusRing, clsx, mergeProps } from "@koobiq/react-core";
+import { useTableCell } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "./TableCell.module.css.js";
+const textNormal = utilClasses.typography["text-normal"];
+function TableCell({ cell, state }) {
+  const ref = useRef(null);
+  const { gridCellProps } = useTableCell({ node: cell }, state, ref);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const {
+    style,
+    className,
+    align = "left",
+    valign = "middle"
+  } = cell.props;
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      align,
+      ...mergeProps(gridCellProps, focusProps),
+      className: clsx(
+        s.base,
+        textNormal,
+        valign && s[valign],
+        isFocusVisible && s.focusVisible,
+        className
+      ),
+      style,
+      ref,
+      children: cell.rendered
+    }
+  );
+}
+export {
+  TableCell
+};

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

@@ -0,0 +1,27 @@
+const base = "kbq-tablecell-7b64ee";
+const top = "kbq-tablecell-top-c83311";
+const baseline = "kbq-tablecell-baseline-9a695f";
+const middle = "kbq-tablecell-middle-61ce62";
+const bottom = "kbq-tablecell-bottom-7191cb";
+const sub = "kbq-tablecell-sub-422152";
+const focusVisible = "kbq-tablecell-focusVisible-401e7c";
+const s = {
+  base,
+  top,
+  baseline,
+  middle,
+  bottom,
+  sub,
+  "text-top": "kbq-tablecell-text-top-0812fb",
+  focusVisible
+};
+export {
+  base,
+  baseline,
+  bottom,
+  s as default,
+  focusVisible,
+  middle,
+  sub,
+  top
+};

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

@@ -0,0 +1 @@
+export * from './TableCell';

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

@@ -0,0 +1,7 @@
+import { type AriaTableCellProps, type TableState } from '@koobiq/react-primitives';
+type TableCheckboxCellProps<T> = {
+    cell: AriaTableCellProps['node'];
+    state: TableState<T>;
+};
+export declare function TableCheckboxCell<T>({ cell, state, }: TableCheckboxCellProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/TableCheckboxCell/TableCheckboxCell.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTableCell, useTableSelectionCheckbox } from "@koobiq/react-primitives";
+import s from "../TableCell/TableCell.module.css.js";
+import { Checkbox } from "../../../Checkbox/Checkbox.js";
+function TableCheckboxCell({
+  cell,
+  state
+}) {
+  const ref = useRef(null);
+  const { gridCellProps } = useTableCell({ node: cell }, state, ref);
+  const { checkboxProps } = useTableSelectionCheckbox(
+    { key: cell.parentKey },
+    state
+  );
+  return /* @__PURE__ */ jsx("td", { className: s.base, ...gridCellProps, ref, children: /* @__PURE__ */ jsx(Checkbox, { ...checkboxProps }) });
+}
+export {
+  TableCheckboxCell
+};

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

@@ -0,0 +1 @@
+export * from './TableCheckboxCell';

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

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

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

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useFocusRing, mergeProps, clsx } from "@koobiq/react-core";
+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
+}) {
+  const ref = useRef(null);
+  const { columnHeaderProps } = useTableColumnHeader(
+    { node: column },
+    state,
+    ref
+  );
+  const {
+    style,
+    className,
+    align = "left",
+    valign = "middle"
+  } = column.props;
+  const { isFocusVisible, focusProps } = useFocusRing();
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      align,
+      className: clsx(
+        s.base,
+        valign && s[valign],
+        isFocusVisible && s.focusVisible,
+        textNormal,
+        className
+      ),
+      style,
+      ...mergeProps(columnHeaderProps, focusProps),
+      ref,
+      children: column.rendered
+    }
+  );
+}
+export {
+  TableColumnHeader
+};

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

@@ -0,0 +1,27 @@
+const base = "kbq-tablecolumnheader-236616";
+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 s = {
+  base,
+  top,
+  baseline,
+  middle,
+  bottom,
+  sub,
+  "text-top": "kbq-tablecolumnheader-text-top-7013fa",
+  focusVisible
+};
+export {
+  base,
+  baseline,
+  bottom,
+  s as default,
+  focusVisible,
+  middle,
+  sub,
+  top
+};

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

@@ -0,0 +1 @@
+export * from './TableColumnHeader';

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

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { TableState, GridRowProps } from '@koobiq/react-primitives';
+type TableHeaderRowProps<T> = {
+    item: GridRowProps<T>['node'];
+    state: TableState<T>;
+    children: ReactNode;
+};
+export declare function TableHeaderRow<T>({ item, state, children, }: TableHeaderRowProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/TableHeaderRow/TableHeaderRow.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTableHeaderRow } from "@koobiq/react-primitives";
+function TableHeaderRow({
+  item,
+  state,
+  children
+}) {
+  const ref = useRef(null);
+  const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
+  return /* @__PURE__ */ jsx("tr", { ...rowProps, ref, children });
+}
+export {
+  TableHeaderRow
+};

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

@@ -0,0 +1 @@
+export * from './TableHeaderRow';

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

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { TableState, GridRowProps } from '@koobiq/react-primitives';
+type TableRowProps<T> = {
+    item: GridRowProps<T>['node'];
+    children: ReactNode;
+    state: TableState<T>;
+};
+export declare function TableRow<T>({ item, children, state }: TableRowProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/TableRow/TableRow.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useFocusRing, useHover, mergeProps, clsx } from "@koobiq/react-core";
+import { useTableRow } from "@koobiq/react-primitives";
+import s from "./TableRow.module.css.js";
+function TableRow({ item, children, state }) {
+  const ref = useRef(null);
+  const isSelected = state.selectionManager.isSelected(item.key);
+  const { rowProps, isPressed, isDisabled } = useTableRow(
+    {
+      node: item
+    },
+    state,
+    ref
+  );
+  const { style, className } = item.props;
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({ isDisabled });
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: clsx(
+        s.base,
+        isHovered && s.hovered,
+        isPressed && s.pressed,
+        isSelected && s.selected,
+        isDisabled && s.disabled,
+        isFocusVisible && s.focusVisible,
+        className
+      ),
+      "data-hovered": isHovered,
+      "data-disabled": isDisabled,
+      "data-selected": isSelected,
+      "data-pressed": isPressed,
+      "data-focus-visible": isFocusVisible,
+      ...mergeProps(rowProps, hoverProps, focusProps),
+      style,
+      ref,
+      children
+    }
+  );
+}
+export {
+  TableRow
+};

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

@@ -0,0 +1,23 @@
+const base = "kbq-tablerow-4a268c";
+const hovered = "kbq-tablerow-hovered-f3a986";
+const pressed = "kbq-tablerow-pressed-932599";
+const selected = "kbq-tablerow-selected-ced903";
+const disabled = "kbq-tablerow-disabled-27e4c6";
+const focusVisible = "kbq-tablerow-focusVisible-3a3109";
+const s = {
+  base,
+  hovered,
+  pressed,
+  selected,
+  disabled,
+  focusVisible
+};
+export {
+  base,
+  s as default,
+  disabled,
+  focusVisible,
+  hovered,
+  pressed,
+  selected
+};

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

@@ -0,0 +1 @@
+export * from './TableRow';

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

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

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTableRowGroup } from "@koobiq/react-primitives";
+const TableRowGroup = forwardRef(
+  ({ type = "thead", children }, ref) => {
+    const Element = type;
+    const { rowGroupProps } = useTableRowGroup();
+    return /* @__PURE__ */ jsx(Element, { ...rowGroupProps, ref, children });
+  }
+);
+TableRowGroup.displayName = "TableRowGroup";
+export {
+  TableRowGroup
+};

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

@@ -0,0 +1 @@
+export * from './TableRowGroup';

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

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

package/dist/components/Table/components/TableSelectAllCell/TableSelectAllCell.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTableColumnHeader, useTableSelectAllCheckbox, VisuallyHidden } from "@koobiq/react-primitives";
+import s from "../TableColumnHeader/TableColumnHeader.module.css.js";
+import { Checkbox } from "../../../Checkbox/Checkbox.js";
+function TableSelectAllCell({
+  column,
+  state
+}) {
+  const ref = useRef(null);
+  const { columnHeaderProps } = useTableColumnHeader(
+    { node: column },
+    state,
+    ref
+  );
+  const { checkboxProps } = useTableSelectAllCheckbox(state);
+  return /* @__PURE__ */ jsx("th", { className: s.base, ...columnHeaderProps, ref, children: state.selectionManager.selectionMode === "single" ? /* @__PURE__ */ jsx(VisuallyHidden, { children: checkboxProps["aria-label"] }) : /* @__PURE__ */ jsx(Checkbox, { ...checkboxProps }) });
+}
+export {
+  TableSelectAllCell
+};

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

@@ -0,0 +1 @@
+export * from './TableSelectAllCell';

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

@@ -0,0 +1,7 @@
+export * from './TableRowGroup';
+export * from './TableHeaderRow';
+export * from './TableColumnHeader';
+export * from './TableRow';
+export * from './TableCell';
+export * from './TableSelectAllCell';
+export * from './TableCheckboxCell';

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

@@ -0,0 +1 @@
+export * from './Table';