@ogcio/design-system-react 1.12.4 → 1.14.0

package/dist/table/index.d.ts

@@ -0,0 +1,8 @@
+export { Caption } from './caption.js';
+export { TableBody } from './table-body.js';
+export { TableData, TableCell } from './table-data.js';
+export { TableFoot } from './table-foot.js';
+export { TableHead } from './table-head.js';
+export { TableHeader } from './table-header.js';
+export { TableRow } from './table-row.js';
+export { Table } from './table.js';

package/dist/table/index.js

@@ -0,0 +1,19 @@
+import { Caption as r } from "./caption.js";
+import { TableBody as t } from "./table-body.js";
+import { TableCell as p, TableData as b } from "./table-data.js";
+import { TableFoot as m } from "./table-foot.js";
+import { TableHead as T } from "./table-head.js";
+import { TableHeader as C } from "./table-header.js";
+import { TableRow as i } from "./table-row.js";
+import { Table as w } from "./table.js";
+export {
+  r as Caption,
+  w as Table,
+  t as TableBody,
+  p as TableCell,
+  b as TableData,
+  m as TableFoot,
+  T as TableHead,
+  C as TableHeader,
+  i as TableRow
+};

package/dist/table/table-data.d.ts

@@ -1,8 +1,22 @@
-import { TdHTMLAttributes } from 'react';
+import { TdHTMLAttributes, ReactNode } from 'react';
 import { TableAlign, VerticalAlign } from './table.js';
 interface TableDataProps extends TdHTMLAttributes<HTMLTableCellElement> {
     align?: TableAlign;
     valign?: VerticalAlign;
+    tableCellClassName?: string;
+    children: any;
 }
-export declare function TableData({ align, valign, className, children, ...props }: TableDataProps): import("react/jsx-runtime").JSX.Element;
+type TableCellProps = {
+    children: ReactNode;
+    className?: string;
+};
+type TableExpandIconProps = {
+    expanded?: boolean;
+    onClick: any;
+};
+type TableDataSlotProps = Omit<TableDataProps, 'align' | 'valign'>;
+export declare function TableData({ align, valign, className, children, tableCellClassName, ...props }: TableDataProps): import("react/jsx-runtime").JSX.Element;
+export declare const TableCell: ({ children, className }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableExpandIcon: ({ expanded, onClick, }: TableExpandIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableDataSlot: ({ children, className, ...props }: TableDataSlotProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/table/table-data.js

@@ -1,35 +1,82 @@
-import { jsx as a } from "react/jsx-runtime";
-import { cn as m } from "../cn.js";
-function c({
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { useRef as d, useState as g, useEffect as u } from "react";
+import { cn as c } from "../cn.js";
+import { IconButton as w } from "../icon-button/icon-button.js";
+function C({
   align: t = "left",
   valign: e = "middle",
-  className: i,
-  children: l,
-  ...n
+  className: r,
+  children: o,
+  tableCellClassName: i,
+  ...m
 }) {
-  const g = {
+  const a = {
     left: "gi-text-left",
     center: "gi-text-center",
     right: "gi-text-right"
-  }[t], o = {
+  }[t], s = {
     top: "gi-align-top",
     middle: "gi-align-middle",
     bottom: "gi-align-bottom"
-  }[e];
-  return /* @__PURE__ */ a(
+  }[e], l = d(null), [f, p] = g(!1);
+  return u(() => {
+    if (!l.current)
+      return;
+    const b = l.current.querySelectorAll("input, select, button");
+    p(b.length > 0);
+  }, []), /* @__PURE__ */ n(
     "td",
     {
-      className: m(
-        g,
-        o,
+      ref: l,
+      className: c(
+        a,
+        s,
         "gi-table-td",
-        i
+        r
       ),
-      ...n,
-      children: l
+      ...m,
+      children: f ? o : /* @__PURE__ */ n(x, { className: i, children: o })
     }
   );
 }
+const x = ({ children: t, className: e }) => /* @__PURE__ */ n("div", { className: c("gi-table-data-cell", e), children: t }), E = ({
+  expanded: t,
+  onClick: e
+}) => {
+  const [r, o] = g("md"), i = d(null);
+  return u(() => {
+    var l;
+    const a = (l = i.current) == null ? void 0 : l.closest(".gi-table"), s = a == null ? void 0 : a.getAttribute("data-row-size");
+    s && o(s);
+  }, []), /* @__PURE__ */ n("div", { ref: i, className: "gi-table-expand-icon-container", children: /* @__PURE__ */ n(
+    w,
+    {
+      variant: "flat",
+      appearance: "dark",
+      size: {
+        sm: "medium",
+        md: "large",
+        lg: "extraLarge"
+      }[r],
+      icon: {
+        icon: t ? "keyboard_arrow_up" : "keyboard_arrow_down"
+      },
+      "aria-label": t ? "Collapse row" : "Expand row",
+      className: "gi-cursor-pointer",
+      onClick: (a) => {
+        a.preventDefault(), e();
+      }
+    }
+  ) });
+}, S = ({
+  children: t,
+  className: e,
+  ...r
+}) => /* @__PURE__ */ n("td", { className: "gi-table-td", ...r, children: /* @__PURE__ */ n("div", { className: c("gi-table-data-slot-container", e), children: t }) });
 export {
-  c as TableData
+  x as TableCell,
+  C as TableData,
+  S as TableDataSlot,
+  E as TableExpandIcon
 };

package/dist/table/table-header.d.ts

@@ -1,8 +1,11 @@
 import { ThHTMLAttributes } from 'react';
 import { TableAlign, VerticalAlign } from './table.js';
+type SortedType = 'asc' | 'desc' | false;
 interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
     align?: TableAlign;
     valign?: VerticalAlign;
+    sorted?: SortedType;
+    onSort?: (event: React.MouseEvent) => void;
 }
-export declare function TableHeader({ align, valign, className, children, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableHeader({ align, valign, className, sorted, onSort, children, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/table/table-header.js

@@ -1,35 +1,75 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cn as a } from "../cn.js";
-function c({
-  align: t = "left",
-  valign: e = "middle",
-  className: i,
+"use client";
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
+import { Children as y } from "react";
+import { cn as d } from "../cn.js";
+import { Icon as m } from "../icon/icon.js";
+const b = (e, r) => e ? r ? /* @__PURE__ */ o(
+  m,
+  {
+    inline: !0,
+    icon: r === "asc" ? "arrow_upward" : "arrow_downward",
+    size: "sm"
+  }
+) : /* @__PURE__ */ o(m, { inline: !0, icon: "swap_vert", size: "sm" }) : null;
+function K({
+  align: e = "left",
+  valign: r = "middle",
+  className: u,
+  sorted: a = !1,
+  onSort: i,
   children: l,
-  ...n
+  ...h
 }) {
-  const g = {
+  const t = typeof l == "string", c = {
     left: "gi-text-left",
     center: "gi-text-center",
     right: "gi-text-right"
-  }[t], o = {
+  }[e], p = {
     top: "gi-align-top",
     middle: "gi-align-middle",
     bottom: "gi-align-bottom"
-  }[e];
-  return /* @__PURE__ */ r(
+  }[r], g = (n) => {
+    i && t && (n.preventDefault(), i(n));
+  }, f = (n) => {
+    n.key === "Enter" && g(n);
+  }, w = y.count(l) > 0;
+  let s;
+  return a && t ? s = "button" : w || (s = "cell"), /* @__PURE__ */ o(
     "th",
     {
-      className: a(
-        g,
-        o,
+      className: d(
+        c,
+        p,
         "gi-table-th",
-        i
+        u,
+        { "gi-w-12": !t }
       ),
-      ...n,
-      children: l
+      role: s,
+      "data-sorted": !!i,
+      "data-header-string": t,
+      tabIndex: i && t ? 0 : -1,
+      onKeyDown: f,
+      ...h,
+      children: /* @__PURE__ */ x(
+        "div",
+        {
+          className: d(c, {
+            "gi-flex gi-gap-1 gi-h-full gi-items-center": t,
+            "gi-justify-center": e === "center",
+            "gi-justify-start": e === "left",
+            "gi-justify-end": e === "right"
+          }),
+          onClick: g,
+          onKeyDown: f,
+          children: [
+            l,
+            !!i && b(t, a)
+          ]
+        }
+      )
     }
   );
 }
 export {
-  c as TableHeader
+  K as TableHeader
 };

package/dist/table/table-pagination.d.ts

@@ -0,0 +1,8 @@
+export type TablePaginationProps = {
+    align?: 'start' | 'center' | 'end';
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+};
+export declare const TablePagination: React.FC<TablePaginationProps>;
+export default TablePagination;

package/dist/table/table-pagination.js

@@ -0,0 +1,97 @@
+import { jsxs as t, jsx as l } from "react/jsx-runtime";
+import { cn as f } from "../cn.js";
+import { translate as e } from "../i18n/utility.js";
+import { IconButton as o } from "../icon-button/icon-button.js";
+const v = ({
+  currentPage: i,
+  totalPages: a,
+  onPageChange: n,
+  align: s = "end"
+}) => {
+  const c = () => {
+    i > 1 && n(i - 1);
+  }, d = () => {
+    i < a && n(i + 1);
+  };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: f(
+        {
+          "gi-justify-first": s === "start",
+          "gi-justify-center": s === "center",
+          "gi-justify-end": s === "end"
+        },
+        "gi-table-pagination"
+      ),
+      children: [
+        /* @__PURE__ */ l(
+          o,
+          {
+            disabled: i === 1,
+            onClick: () => n(1),
+            appearance: "dark",
+            variant: "flat",
+            className: "gi-mr-4",
+            icon: {
+              icon: "first_page"
+            }
+          }
+        ),
+        /* @__PURE__ */ l(
+          o,
+          {
+            disabled: i === 1,
+            onClick: c,
+            appearance: "dark",
+            variant: "flat",
+            className: "gi-mr-2",
+            icon: {
+              icon: "chevron_left"
+            }
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "gi-table-pagination-label", "aria-live": "polite", children: [
+          /* @__PURE__ */ l("span", { className: "gi-font-bold", children: e("table.pagination.page", {
+            currentPage: i,
+            defaultValue: `Page ${i} `
+          }) }),
+          e("table.pagination.ofTotal", {
+            totalPages: a,
+            defaultValue: `of ${a}`
+          })
+        ] }),
+        /* @__PURE__ */ l(
+          o,
+          {
+            onClick: d,
+            disabled: i === a,
+            appearance: "dark",
+            variant: "flat",
+            className: "gi-ml-2",
+            icon: {
+              icon: "chevron_right"
+            }
+          }
+        ),
+        /* @__PURE__ */ l(
+          o,
+          {
+            disabled: i === a,
+            onClick: () => n(a),
+            appearance: "dark",
+            variant: "flat",
+            className: "gi-ml-4",
+            icon: {
+              icon: "last_page"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  v as TablePagination,
+  v as default
+};

package/dist/table/table-row.js

@@ -1,10 +1,11 @@
-import { jsx as t } from "react/jsx-runtime";
-function n({
-  children: r,
-  ...o
+import { jsx as a } from "react/jsx-runtime";
+import { cn as e } from "../cn.js";
+function c({
+  children: t,
+  ...r
 }) {
-  return /* @__PURE__ */ t("tr", { ...o, children: r });
+  return /* @__PURE__ */ a("tr", { className: e(r.className, "gi-table-tr"), ...r, children: t });
 }
 export {
-  n as TableRow
+  c as TableRow
 };

package/dist/table/table.d.ts

@@ -20,6 +20,9 @@ declare const tableVariants: import('tailwind-variants').TVReturnType<{
 }, undefined, "gi-table", TVConfig<V, EV>, unknown, unknown, undefined>>;
 export type TableProps = VariantProps<typeof tableVariants> & {
     dataTestid?: string;
+    rowSize?: 'sm' | 'md' | 'lg';
+    stripped?: boolean;
+    noBorder?: boolean;
 } & React.TableHTMLAttributes<HTMLTableElement>;
-export declare function Table({ layout, dataTestid, children, ...props }: React.PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ layout, rowSize, stripped, noBorder, dataTestid, children, className, ...props }: React.PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/table/table.js

@@ -1,7 +1,7 @@
-import { jsx as i } from "react/jsx-runtime";
-import { c as l } from "../index-DNkhmzZp.js";
-import { cn as r } from "../cn.js";
-const b = l({
+import { jsx as d } from "react/jsx-runtime";
+import { c as b } from "../index-CB-zPpNk.js";
+import { cn as f } from "../cn.js";
+const m = b({
   base: "gi-table",
   variants: {
     layout: {
@@ -10,24 +10,31 @@ const b = l({
     }
   }
 });
-function u({
+function g({
   layout: t = "auto",
-  dataTestid: a,
-  children: e,
-  ...o
+  rowSize: a = "md",
+  stripped: e = !1,
+  noBorder: o = !1,
+  dataTestid: r,
+  children: s,
+  className: i,
+  ...l
 }) {
-  const s = b({ layout: t });
-  return /* @__PURE__ */ i(
+  const n = m({ layout: t });
+  return /* @__PURE__ */ d(
     "table",
     {
-      className: r(s),
+      className: f(n, i),
       role: "table",
-      "data-testid": a,
-      ...o,
-      children: e
+      "data-testid": r,
+      "data-row-size": a,
+      "data-stripped": e.toString(),
+      "data-no-border": o.toString(),
+      ...l,
+      children: s
     }
   );
 }
 export {
-  u as Table
+  g as Table
 };

package/dist/tabs/scrollable-tab-list.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+type ScrollableTabsProps = {
+    children: ReactNode;
+    tabName: string;
+    appearance?: 'default' | 'dark';
+    className?: string;
+};
+export declare const ScrollableTabs: React.FC<ScrollableTabsProps>;
+export {};

package/dist/tabs/scrollable-tab-list.js

@@ -0,0 +1,84 @@
+import { jsx as d, jsxs as E } from "react/jsx-runtime";
+import { useState as y, useRef as g, Children as l, useEffect as I, isValidElement as p, useLayoutEffect as L } from "react";
+import { cn as k } from "../cn.js";
+import { InternalTabItem as D } from "./tab-item.js";
+const K = ({
+  children: r,
+  tabName: w,
+  className: R = "",
+  appearance: i = "default"
+}) => {
+  const [n, a] = y(0), [f, T] = y({ left: 0, width: 0 }), u = g([]), m = g(null), b = l.count(r);
+  I(() => {
+    for (const t of l.toArray(r))
+      if (p(t)) {
+        if ((t == null ? void 0 : t.props).checked)
+          break;
+        continue;
+      }
+  }, [r]), L(() => {
+    const t = u.current[n], e = m.current;
+    if (!t || !e)
+      return;
+    const o = t.getBoundingClientRect(), s = e.getBoundingClientRect();
+    requestAnimationFrame(() => {
+      T({
+        left: o.left - s.left + e.scrollLeft,
+        width: o.width
+      }), t.scrollIntoView({ behavior: "smooth", inline: "center" });
+    });
+  }, [n]);
+  const A = (t, e) => (o) => {
+    a(t), e && e(o);
+    const s = o.currentTarget.getAttribute("aria-controls");
+    if (s)
+      for (const c of document.querySelectorAll('[role="tabpanel"]'))
+        c instanceof HTMLElement && (c.style.display = c.id === s ? "block" : "none");
+  }, C = (t) => {
+    if (t.key === "ArrowLeft" || t.key === "ArrowRight") {
+      let e = n + (t.key === "ArrowRight" ? 1 : -1);
+      e < 0 && (e = 0), e >= b && (e = b - 1), a(e), t.preventDefault();
+    }
+  }, h = l.map(r, (t, e) => p(t) ? /* @__PURE__ */ d(
+    D,
+    {
+      ...t == null ? void 0 : t.props,
+      appearance: i,
+      index: e,
+      checked: n === e,
+      onTabClick: A(e, t.props.onTabClick),
+      onTabKeyDown: C,
+      ref: (o) => {
+        u.current[e] = o;
+      }
+    }
+  ) : null), S = {
+    left: f.left,
+    width: f.width
+  };
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      id: w,
+      ref: m,
+      role: "tablist",
+      className: k("gi-tab-list ", R),
+      children: [
+        h,
+        /* @__PURE__ */ d(
+          "span",
+          {
+            className: k("gi-tab-indicator", {
+              "gi-bg-color-border-system-neutral-interactive-default": i === "dark",
+              "gi-bg-color-border-tone-primary-accent-selected": i === "default"
+            }),
+            style: S
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  K as ScrollableTabs
+};

package/dist/tabs/tab-item.d.ts

@@ -1,17 +1,11 @@
-import { default as React, FC } from 'react';
-export type TabItemProps = {
-    value: string;
-    children: React.ReactNode;
-    href?: string;
-    checked?: boolean;
-    ariaLabel?: string;
-    ariaLabelledby?: string;
-    onTabClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-};
-export type InternalTabItemProps = TabItemProps & {
-    onTabClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+import { FC } from 'react';
+import { TabItemProps } from './types.js';
+export declare const TabItem: FC<TabItemProps>;
+export declare const InternalTabItem: import('react').ForwardRefExoticComponent<TabItemProps & {
     onTabKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
     index: number;
-};
-export declare const TabItem: FC<TabItemProps>;
-export declare const InternalTabItem: FC<InternalTabItemProps>;
+    appearance?: "default" | "dark";
+    size?: "md" | "sm";
+    stretch?: boolean;
+    labelAlignment?: "center" | "end" | "start";
+} & import('react').RefAttributes<HTMLButtonElement>>;