@koobiq/react-components 0.0.1-beta.8 → 0.0.1

package/dist/components/SidePanel/SidePanel.js

@@ -1,17 +1,19 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, cloneElement, isValidElement } from "react";
+import { deprecate } from "@koobiq/logger";
 import { useBoolean, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { useOverlayTriggerState, useOverlayTrigger, useModalOverlay, Overlay } from "@koobiq/react-primitives";
 import { Transition } from "react-transition-group";
 import s from "./SidePanel.module.css.js";
 import { Backdrop } from "../Backdrop/Backdrop.js";
 import { Dialog } from "../Dialog/Dialog.js";
-const SidePanel = forwardRef(
+const SidePanelComponent = forwardRef(
   (props, ref) => {
     const {
       size = "medium",
       position = "left",
+      placement = "start",
       hideCloseButton = false,
       control,
       children,
@@ -19,7 +21,8 @@ const SidePanel = forwardRef(
       defaultOpen,
       onOpenChange,
       hideBackdrop,
-      open: openProp,
+      open,
+      isOpen: isOpenProp,
       portalContainer,
       disableFocusManagement,
       disableExitOnClickOutside,
@@ -27,19 +30,30 @@ const SidePanel = forwardRef(
       shouldCloseOnInteractOutside,
       ...other
     } = props;
+    const isOpen = isOpenProp ?? open;
+    if (process.env.NODE_ENV !== "production" && "open" in props) {
+      deprecate(
+        'SidePanel: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "position" in props) {
+      deprecate(
+        'SidePanel: the "position" prop is deprecated. Use "placement" prop to replace it.'
+      );
+    }
     const state = useOverlayTriggerState({
-      isOpen: openProp,
+      isOpen,
       onOpenChange,
       defaultOpen,
       ...other
     });
-    const { isOpen: openState, close } = state;
-    const [opened, { on, off }] = useBoolean(openState);
+    const { isOpen: isOpenState, close } = state;
+    const [isOpened, { on, off }] = useBoolean(isOpenState);
     const modalRef = useDOMRef(null);
     const containerRef = useDOMRef(ref);
     const { triggerProps, overlayProps } = useOverlayTrigger(
       { type: "dialog" },
-      { ...state, isOpen: openState }
+      { ...state, isOpen: isOpenState }
     );
     const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
       {
@@ -48,7 +62,7 @@ const SidePanel = forwardRef(
         isDismissable: !disableExitOnClickOutside,
         isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
       },
-      { ...state, isOpen: opened },
+      { ...state, isOpen: isOpened },
       modalRef
     );
     const resolvedChildren = () => {
@@ -61,13 +75,13 @@ const SidePanel = forwardRef(
       {
         ref: containerRef,
         "data-size": size,
-        "data-position": position,
-        className: clsx(s.base, s[size], s[position])
+        "data-placement": placement,
+        className: clsx(s.base, s[size], s[position], s[placement])
       },
       other
     );
     const backdropProps = mergeProps(
-      { open: openState && !hideBackdrop },
+      { isOpen: isOpenState && !hideBackdrop },
       underlayProps,
       slotProps?.backdrop
     );
@@ -88,20 +102,15 @@ const SidePanel = forwardRef(
       },
       slotProps?.panel
     );
-    const { isDisabled, onPress, ...otherTriggerProps } = triggerProps;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      control?.({
-        onClick: onPress,
-        disabled: isDisabled,
-        ...otherTriggerProps
-      }),
+      control?.(triggerProps),
       /* @__PURE__ */ jsx(
         Transition,
         {
           onEnter: on,
           timeout: 300,
           onExited: off,
-          in: openState,
+          in: isOpenState,
           nodeRef: containerRef,
           unmountOnExit: true,
           appear: true,
@@ -121,7 +130,11 @@ const SidePanel = forwardRef(
     ] });
   }
 );
-SidePanel.displayName = "SidePanel";
+SidePanelComponent.displayName = "SidePanel";
+const SidePanel = SidePanelComponent;
+SidePanel.Header = Dialog.Header;
+SidePanel.Body = Dialog.Body;
+SidePanel.Footer = Dialog.Footer;
 export {
   SidePanel
 };

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

@@ -4,6 +4,8 @@ const medium = "kbq-sidepanel-medium-64ac8f";
 const large = "kbq-sidepanel-large-e885ab";
 const left = "kbq-sidepanel-left-e8e188";
 const right = "kbq-sidepanel-right-4fdda0";
+const start = "kbq-sidepanel-start-636741";
+const end = "kbq-sidepanel-end-1bddfa";
 const panel = "kbq-sidepanel-panel-4a4aa4";
 const s = {
   base,
@@ -12,15 +14,19 @@ const s = {
   large,
   left,
   right,
+  start,
+  end,
   panel
 };
 export {
   base,
   s as default,
+  end,
   large,
   left,
   medium,
   panel,
   right,
-  small
+  small,
+  start
 };

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

@@ -6,23 +6,40 @@ export declare const sidePanelPropSize: readonly ["small", "medium", "large"];
 export type SidePanelPropSize = (typeof sidePanelPropSize)[number];
 export declare const sidePanelPropPosition: readonly ["left", "right"];
 export type SidePanelPropPosition = (typeof sidePanelPropPosition)[number];
+export declare const sidePanelPropPlacement: readonly ["start", "end"];
+export type SidePanelPropPlacement = (typeof sidePanelPropPlacement)[number];
 export type SidePanelPropContent = ReactNode | ((props: {
     close(): void;
 }) => ReactElement);
 export type SidePanelPropControl = (props: ButtonOptions) => ReactElement;
+type SidePanelDeprecatedProps = {
+    /**
+     * If `true`, the component is shown.
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
+    open?: boolean;
+    /**
+     * Side from which the side panel will appear.
+     * @default 'left'
+     * @deprecated
+     * The "position" prop is deprecated. Use "placement" prop to replace it.
+     */
+    position?: SidePanelPropPosition;
+};
 export type SidePanelProps = {
     /**
      * Component width size.
-     * @default medium
-     * */
+     * @default 'medium'
+     */
     size?: SidePanelPropSize;
     /**
      * Side from which the side panel will appear.
-     * @default left
-     * */
-    position?: SidePanelPropPosition;
+     * @default 'start'
+     */
+    placement?: SidePanelPropPlacement;
     /** If `true`, the component is shown. */
-    open?: boolean;
+    isOpen?: boolean;
     /** The default open state. Use when the component is not controlled. */
     defaultOpen?: boolean;
     /** The content of the component. */
@@ -32,7 +49,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;
@@ -78,5 +95,6 @@ export type SidePanelProps = {
         backdrop?: BackdropProps;
         panel?: ComponentPropsWithRef<'div'>;
     };
-};
+} & SidePanelDeprecatedProps;
 export type SidePanelRef = ComponentRef<'div'>;
+export {};

package/dist/components/SidePanel/types.js

@@ -1,6 +1,8 @@
 const sidePanelPropSize = ["small", "medium", "large"];
 const sidePanelPropPosition = ["left", "right"];
+const sidePanelPropPlacement = ["start", "end"];
 export {
+  sidePanelPropPlacement,
   sidePanelPropPosition,
   sidePanelPropSize
 };

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

@@ -4,8 +4,8 @@ export type SkeletonTypographyPropVariant = TypographyPropVariant;
 export type SkeletonTypographyBaseProps = {
     /**
      * Variant of typography.
-     * @default text-normal
-     * */
+     * @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 { TableComponent } from './types';
+declare const TableComponent: TableComponent;
+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 {};