@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/components/TabSet/TabSet.styles.js

@@ -1,4 +1,4 @@
-import { s as t } from "../../sva-OmxClA9g.js";
+import { s as t } from "../../sva-CsHRIRDW.js";
 const e = t({
   slots: [
     "root",
@@ -6,48 +6,90 @@ const e = t({
     "listHolder",
     "panel",
     "activeIndicator",
-    "hoverIndicator"
+    "hoverIndicator",
+    "overflowEndIndicator",
+    "overflowStartIndicator"
   ],
   base: {
     root: {
+      // Performance: CSS containment (no paint to allow overflow)
+      contain: "layout style",
       bg: "colour.neutral.10",
       borderRadius: "radius.system.layout"
     },
-    list: {
-      display: "flex",
-      flexWrap: "wrap",
-      borderBottom: "divider",
-      "& > :has(.ids-badge)": {
-        mr: "spacing.4"
+    listHolder: {
+      position: "relative",
+      overflowX: "clip",
+      overflowY: "visible",
+      pt: "spacing.2",
+      _after: {
+        content: '""',
+        position: "absolute",
+        bottom: "spacing.1",
+        left: "spacing.0",
+        right: "spacing.0",
+        borderBottom: "divider",
+        pointerEvents: "none"
       }
     },
-    listHolder: {
+    list: {
+      display: "flex",
+      flexWrap: "nowrap",
+      scrollable: "x",
+      overflowY: "visible",
+      scrollSnapType: "[x proximity]",
       position: "relative"
     },
     panel: {
-      pt: "md",
-      _focusVisible: {
-        layerStyle: "elevation.focus",
-        outline: "[none]"
+      textStyle: "typography.body.md",
+      focusable: "true",
+      "& > :not([hidden])": {
+        pt: "sm"
       }
     },
     activeIndicator: {
       position: "absolute",
-      bottom: "[0]",
+      top: "spacing.1",
+      bottom: "spacing.1",
       left: "[0]",
-      height: "[2px]",
-      bg: "colour.primary.text",
-      transition: "all"
+      bg: "colour.neutral.30",
+      transition: "all",
+      borderRadius: "radius.system.layout",
+      borderBottomRadius: "none",
+      pointerEvents: "none",
+      _after: {
+        content: '""',
+        position: "absolute",
+        bottom: "spacing.0",
+        left: "spacing.0",
+        right: "spacing.0",
+        height: "[2px]",
+        bg: "colour.neutral.90",
+        transition: "all",
+        zIndex: "[2]"
+      }
     },
     hoverIndicator: {
       position: "absolute",
-      top: "spacing.2",
-      bottom: "spacing.2",
+      top: "spacing.1",
+      bottom: "spacing.1",
       left: "[0]",
-      bg: "colour.primary.surfaceHover",
+      bg: "colour.neutral.20",
       transition: "all",
-      borderRadius: "radius.system.button",
-      pointerEvents: "none"
+      borderRadius: "radius.system.layout",
+      borderBottomRadius: "none",
+      pointerEvents: "none",
+      _after: {
+        content: '""',
+        position: "absolute",
+        bottom: "spacing.0",
+        left: "spacing.0",
+        right: "spacing.0",
+        height: "[2px]",
+        bg: "colour.neutral.90",
+        transition: "all",
+        zIndex: "[2]"
+      }
     }
   },
   variants: {
@@ -73,6 +115,45 @@ const e = t({
           left: "[100%]"
         }
       }
+    },
+    overflowEnd: {
+      true: {
+        overflowEndIndicator: {
+          layerStyle: "overflow",
+          position: "absolute",
+          top: "spacing.0",
+          bottom: "spacing.1",
+          right: "spacing.0",
+          width: "input.4",
+          pointerEvents: "[none]",
+          maskImage: "[linear-gradient(to right, transparent 30%, black 100%)]"
+        }
+      }
+    },
+    overflowStart: {
+      true: {
+        overflowStartIndicator: {
+          layerStyle: "overflow",
+          position: "absolute",
+          top: "spacing.0",
+          bottom: "spacing.1",
+          left: "spacing.0",
+          width: "input.4",
+          pointerEvents: "[none]",
+          maskImage: "[linear-gradient(to right, transparent 30%, black 100%)]",
+          transform: "[rotate(180deg)]"
+        }
+      }
+    },
+    type: {
+      primary: {},
+      secondary: {
+        hoverIndicator: {
+          _after: {
+            bg: "colour.neutral.50"
+          }
+        }
+      }
     }
   },
   defaultVariants: {

package/dist/components/TabSet/TabSetProvider.d.ts

@@ -0,0 +1,38 @@
+import { MutableRefObject, PropsWithChildren } from 'react';
+import { FormControlValue } from '../../types';
+export interface TabSetContextValue {
+    activate: (node?: HTMLElement | null) => void;
+    active?: HTMLElement;
+    hover?: HTMLElement;
+    isActive: (node?: HTMLElement | null) => boolean;
+    layoutVersion: number;
+    panel: HTMLDivElement | null;
+    register: (node: HTMLElement, value?: FormControlValue) => void;
+    setHover: (node?: HTMLElement) => void;
+    unregister: (node: HTMLElement) => void;
+    type?: 'primary' | 'secondary';
+}
+export interface TabSetProviderProps extends PropsWithChildren {
+    defaultSelected?: FormControlValue;
+    hoverIndicator?: MutableRefObject<HTMLElement | null>;
+    onChange?: (event: TabSetChangedEventDetail) => void;
+    panel: HTMLDivElement | null;
+    selected?: FormControlValue;
+    type?: 'primary' | 'secondary';
+}
+export interface TabSetChangedEventDetail {
+    /**
+     * The index of the tab that was selected.
+     */
+    index: number;
+    /**
+     * The value of the tab that was selected.
+     * If the tab does not have a value, this will be the same as `index`.
+     */
+    value?: FormControlValue;
+}
+export declare const TabSetContext: import('react').Context<TabSetContextValue | undefined>;
+export declare const TabSetProvider: {
+    ({ children, defaultSelected, onChange, panel, selected: selectedProp, type, }: TabSetProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/TabSet/TabSetProvider.js

@@ -1,85 +1,91 @@
-import { jsx as V } from "react/jsx-runtime";
-import { createContext as H, useState as l, useMemo as g, useCallback as M, useEffect as N } from "react";
-import { useControlledState as P } from "../../hooks/useControlledState.js";
-const j = H(
+import { jsx as y } from "react/jsx-runtime";
+import { createContext as H, useState as d, useMemo as T, useCallback as h, useEffect as j } from "react";
+import { useControlledState as k } from "../../hooks/useControlledState.js";
+const z = H(
   void 0
-), E = ({
-  children: h,
-  defaultSelected: C,
+), A = ({
+  children: C,
+  defaultSelected: I,
   onChange: f,
   panel: v,
-  selected: I
+  selected: N,
+  type: w
 }) => {
-  const [w, O] = l(), [o, S] = l(() => /* @__PURE__ */ new Set()), [n, m] = l(
+  const [S, O] = d(), [r, m] = d(() => /* @__PURE__ */ new Set()), [n, x] = d(
     () => /* @__PURE__ */ new Map()
-  ), { value: c, setValue: i } = P({
+  ), [b, p] = d(0), { value: i, setValue: u } = k({
     component: "IressTabSet",
-    defaultValue: C,
+    defaultValue: I,
     propName: "selected",
-    value: I
-  }), d = g(
-    () => [...o].find(
-      (e, t) => n.has(t) && n.get(t) === c || t === c
+    value: N
+  }), l = T(
+    () => [...r].find(
+      (e, t) => n.has(t) && n.get(t) === i || t === i
     ),
-    [o, c, n]
-  ), x = M(
+    [r, i, n]
+  ), V = h(
     (e, t) => {
-      S((s) => {
-        let r = new Set(s);
-        s.has(e) || (r = new Set(s).add(e));
-        const a = [...r].indexOf(e);
-        return t !== void 0 && m((u) => {
-          const b = new Map(u);
-          return b.set(a, t), b;
-        }), r;
+      m((s) => {
+        let a = new Set(s);
+        s.has(e) || (a = new Set(s).add(e), p((c) => c + 1));
+        const o = [...a].indexOf(e);
+        return t !== void 0 && x((c) => {
+          const M = new Map(c);
+          return M.set(o, t), M;
+        }), a;
       });
     },
     []
-  ), p = M((e) => {
-    S((t) => {
-      const s = new Set(t), r = [...s].indexOf(e);
-      return s.delete(e), m((a) => {
-        if (!a.has(r)) return a;
-        const u = new Map(a);
-        return u.delete(r), u;
+  ), g = h((e) => {
+    m((t) => {
+      const s = new Set(t), a = [...s].indexOf(e);
+      return s.delete(e), p((o) => o + 1), x((o) => {
+        if (!o.has(a)) return o;
+        const c = new Map(o);
+        return c.delete(a), c;
       }), s;
     });
   }, []);
-  N(() => {
-    c === void 0 && o.size && i(n.get(0) ?? 0);
-  }, [o, c, i, n]);
-  const T = g(
+  j(() => {
+    i === void 0 && r.size && u(n.get(0) ?? 0);
+  }, [r, i, u, n]);
+  const P = T(
     () => ({
-      active: d,
+      active: l,
       activate(e) {
         if (!e) return;
-        const t = [...o].indexOf(e), s = n.get(t);
-        f?.({ index: t, value: s }), i(s ?? t);
+        const t = [...r].indexOf(e), s = n.get(t);
+        f?.({ index: t, value: s }), u(s ?? t);
       },
-      isActive: (e) => e ? d === e : !1,
-      hover: w,
+      isActive: (e) => e ? l === e : !1,
+      hover: S,
+      layoutVersion: b,
       panel: v,
-      register: x,
+      register: V,
       setHover: (e) => {
         O(e);
       },
-      unregister: p
+      unregister: g,
+      type: w
     }),
     [
-      d,
-      w,
+      l,
+      S,
+      b,
       v,
-      x,
-      p,
-      o,
+      V,
+      g,
+      w,
+      r,
       n,
       f,
-      i
+      u
     ]
   );
-  return /* @__PURE__ */ V(j.Provider, { value: T, children: h });
+  return /* @__PURE__ */ y(z.Provider, { value: P, children: C });
 };
+A.displayName = "TabSetProvider";
 export {
-  j as TabSetContext,
-  E as TabSetProvider
+  z as TabSetContext,
+  A as TabSetProvider
 };

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

@@ -0,0 +1,70 @@
+import { TableRowsProps } from './components/TableRows';
+import { ReactNode } from 'react';
+import { TableColumn } from './helpers/composeTableColumnDefs';
+import { IressStyledProps } from '../../types';
+export type IressTableProps<TRow extends object = never, TVal = never, E extends 'table' | 'tbody' = 'table'> = Omit<IressStyledProps<E>, 'border'> & {
+    /**
+     * If set to true, the table will have alternating row colors.
+     * This is useful for improving readability in tables with many rows.
+     */
+    alternate?: boolean;
+    /**
+     * Caption that describes the data in the table, required for accessibility.
+     */
+    caption: ReactNode;
+    /**
+     * Multiple table elements can be passed as children.
+     * Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+     */
+    children?: ReactNode;
+    /**
+     * A mapping of columns to be displayed in the table.
+     * If not provided, it will be automatically regenerated from the row data.
+     */
+    columns?: TableColumn<TRow, TVal>[];
+    /**
+     * Compact view of the table, used for tables with a lot of data.
+     */
+    compact?: boolean;
+    /**
+     * Content to be show when there is no rowData (columns must also be provided).
+     */
+    empty?: ReactNode;
+    /**
+     * When set to true, the table caption will be visually hidden.
+     */
+    hiddenCaption?: boolean;
+    /**
+     * When set to true, the table header (`<thead></thead>`) will be not be rendered.
+     * Only use with very simple tables.
+     */
+    hiddenHeader?: boolean;
+    /**
+     * When set to true, hovering over a row will trigger a UI change.
+     */
+    hover?: boolean;
+    /**
+     * If set to true, the table will not have borders between rows.
+     * This is useful for simpler tables where the row borders are not needed.
+     */
+    removeRowBorders?: boolean;
+    /**
+     * Add additional props to the row element.
+     * Can be a props map or a function that returns an props map. The function is called with the row data.
+     */
+    rowProps?: TableRowsProps<TRow>['rowProps'];
+    /**
+     * Each object in the array contains the data for a row.
+     * @default []
+     */
+    rows?: TRow[];
+    /**
+     * Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+     * @default 'row'
+     */
+    scope?: 'row' | 'col';
+};
+export declare const IressTable: {
+    <TRow extends object = never, TVal = never>({ alternate, caption, children, columns, compact, className, "data-testid": dataTestId, empty, hiddenCaption, hiddenHeader, hover, removeRowBorders, rowProps, rows, scope, ...restProps }: IressTableProps<TRow, TVal>): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/Table/Table.js

@@ -2,24 +2,24 @@ import { jsx as t, jsxs as f } from "react/jsx-runtime";
 import "react";
 import { useIdIfNeeded as w } from "../../hooks/useIdIfNeeded.js";
 import { TableEmpty as E } from "./components/TableEmpty.js";
-import { propagateTestid as a } from "../../helpers/utility/propagateTestid.js";
+import { propagateTestid as o } from "../../helpers/utility/propagateTestid.js";
 import { TableHeader as G } from "./components/TableHeader.js";
-import { T as R } from "../../TableProvider-bdUNuoG-.js";
+import { T as R } from "../../TableProvider-CNduJwA4.js";
 import { TableRows as $ } from "./components/TableRows.js";
 import { table as k } from "./Table.styles.js";
 import { c as h } from "../../cx-DN21T1EH.js";
-import { s as q } from "../../factory-oPXoMw9H.js";
+import { s as q } from "../../factory-CcYfm2kB.js";
 import { GlobalCSSClass as z } from "../../enums.js";
-const U = ({
+const A = ({
   alternate: T = !1,
   caption: I,
   children: r,
   columns: l,
-  compact: x = !1,
-  className: y,
+  compact: y = !1,
+  className: N,
   "data-testid": e,
   empty: d,
-  hiddenCaption: N,
+  hiddenCaption: x,
   hiddenHeader: m,
   hover: g,
   removeRowBorders: u = !1,
@@ -28,37 +28,37 @@ const U = ({
   scope: j,
   ...n
 }) => {
-  const o = w({ id: n.id }), v = `${o}--caption`, s = (d && l?.length) ?? !!c?.length, S = r ?? s, i = k({
+  const a = w({ id: n.id }), v = `${a}--caption`, s = (d && l?.length) ?? !!c?.length, S = r ?? s, i = k({
     alternate: T,
-    compact: x,
+    compact: y,
     hover: g,
-    hiddenCaption: N,
+    hiddenCaption: x,
     removeRowBorders: u
-  }), p = a(e, "thead"), b = a(e, "tbody");
+  }), p = o(e, "thead"), b = o(e, "tbody");
   return S ? /* @__PURE__ */ t("div", { className: i.root, "data-testid": e, children: /* @__PURE__ */ t(R, { columns: l, rows: c, children: /* @__PURE__ */ f(
     q.table,
     {
       ...n,
-      className: h(y, i.table, z.Table),
-      id: o,
-      "data-testid": a(e, "table"),
+      className: h(N, i.table, z.Table),
+      id: a,
+      "data-testid": o(e, "table"),
       children: [
         /* @__PURE__ */ t(
           "caption",
           {
             id: v,
             className: h(i.caption),
-            "data-testid": a(e, "caption"),
+            "data-testid": o(e, "caption"),
             children: I
           }
         ),
-        !m && s && /* @__PURE__ */ t("thead", { "data-testid": p, children: /* @__PURE__ */ t(G, { tableId: o, testId: p }) }),
+        !m && s && /* @__PURE__ */ t("thead", { "data-testid": p, children: /* @__PURE__ */ t(G, { tableId: a, testId: p }) }),
         s && /* @__PURE__ */ f("tbody", { "data-testid": b, children: [
           /* @__PURE__ */ t(
             $,
             {
               testId: b,
-              tableId: o,
+              tableId: a,
               rowProps: C,
               scope: j,
               hiddenHeader: m
@@ -71,6 +71,7 @@ const U = ({
     }
   ) }) }) : null;
 };
+A.displayName = "IressTable";
 export {
-  U as IressTable
+  A as IressTable
 };

package/dist/components/Table/Table.styles.js

@@ -1,6 +1,6 @@
-import { c as n } from "../../cva-JiDXAa83.js";
-import { m as s, a as l, s as i, i as c } from "../../css-fGu_jDvv.js";
-import { c as p } from "../../create-recipe-C-ASk1Hy.js";
+import { c as n } from "../../cva-3iuaj0TL.js";
+import { s, m as l, a as i, i as c } from "../../css-DVJ-ALYD.js";
+import { c as p } from "../../create-recipe-BDTG8O8S.js";
 const r = {
   compact: !1,
   hover: !1,
@@ -27,6 +27,10 @@ const r = {
     "sortIcon",
     "table__sortIcon"
   ],
+  [
+    "sortIconInactive",
+    "table__sortIconInactive"
+  ],
   [
     "activator",
     "table__activator"
@@ -35,7 +39,7 @@ const r = {
     "rowGroupHeader",
     "table__rowGroupHeader"
   ]
-], m = /* @__PURE__ */ d.map(([t, e]) => [t, p(e, r, c(b, t))]), u = s((t = {}) => Object.fromEntries(m.map(([e, o]) => [e, o.recipeFn(t)]))), a = [
+], m = /* @__PURE__ */ d.map(([t, e]) => [t, p(e, r, c(b, t))]), _ = l((t = {}) => Object.fromEntries(m.map(([e, o]) => [e, o.recipeFn(t)]))), a = [
   "alternate",
   "compact",
   "hover",
@@ -43,7 +47,7 @@ const r = {
   "sortButtonNoWrap",
   "tableBodyOpen",
   "hiddenCaption"
-], _ = (t) => ({ ...r, ...l(t) }), g = /* @__PURE__ */ Object.assign(u, {
+], u = (t) => ({ ...r, ...i(t) }), g = /* @__PURE__ */ Object.assign(_, {
   __recipe__: !1,
   __name__: "table",
   raw: (t) => t,
@@ -73,10 +77,10 @@ const r = {
     ]
   },
   splitVariantProps(t) {
-    return i(t, a);
+    return s(t, a);
   },
-  getVariantProps: _
-}), V = n({
+  getVariantProps: u
+}), I = n({
   base: {
     textAlign: "start"
   },
@@ -99,5 +103,5 @@ const r = {
 });
 export {
   g as table,
-  V as tableCell
+  I as tableCell
 };

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

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { IressTableProps } from '../Table';
+export interface IressTableBodyProps<TRow extends object = never, TVal = never> extends Omit<IressTableProps<TRow, TVal, 'tbody'>, 'alternate' | 'compact' | 'hover' | 'removeRowBorders'> {
+    /**
+     * Caption that describes the data in the inner table, required for accessibility.
+     * Used to open/close the inner table.
+     *
+     * **Note:** Do not include interactive elements inside the caption.
+     */
+    caption: ReactNode;
+    /**
+     * When set to true, the table caption will be visually hidden.
+     * If set, the inner table will always be open.
+     */
+    hiddenCaption?: boolean;
+    /**
+     * Is called when table is opened.
+     */
+    onOpened?: () => void;
+    /**
+     * Is called when table is closed.
+     */
+    onClosed?: () => void;
+    /**
+     * When true, all rows will be visible, otherwise they are hidden.
+     */
+    open?: boolean;
+}
+export declare const IressTableBody: {
+    <TRow extends object = never, TVal = never>({ caption, children, columns, "data-testid": dataTestId, empty, hiddenCaption, hiddenHeader, onOpened, onClosed, open, rowProps, rows, scope, ...restProps }: IressTableBodyProps<TRow, TVal>): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};