@eyesee/ui-components 0.16.0 → 0.17.0

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

@@ -0,0 +1,11 @@
+const e = "_headerTitle_118g8_3", t = "_sortHeader_118g8_13", s = "_sortIcons_118g8_20", o = {
+  headerTitle: e,
+  sortHeader: t,
+  sortIcons: s
+};
+export {
+  o as default,
+  e as headerTitle,
+  t as sortHeader,
+  s as sortIcons
+};

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

@@ -0,0 +1,28 @@
+/**
+ * @fileoverview Sort helpers for {@link Table} (client-side and header arrow behaviour).
+ */
+/**
+ * @typedef {object} TableSort
+ * @property {string} columnId
+ * @property {'asc'|'desc'} direction
+ */
+/**
+ * @typedef {object} TableSortColumn
+ * @property {string} id
+ * @property {(row: *) => string|number|null|undefined} [sortValue]
+ */
+/** @param {TableSort|null} sort @param {string} columnId @param {'asc'|'desc'} direction */
+export function getTableSortFromArrowClick(sort: TableSort | null, columnId: string, direction: "asc" | "desc"): {
+    columnId: string;
+    direction: "asc" | "desc";
+};
+/** @param {*[]} rows @param {TableSort|null} sort @param {TableSortColumn[]} columns */
+export function sortTableRows(rows: any[], sort: TableSort | null, columns: TableSortColumn[]): any[];
+export type TableSort = {
+    columnId: string;
+    direction: "asc" | "desc";
+};
+export type TableSortColumn = {
+    id: string;
+    sortValue?: (row: any) => string | number | null | undefined;
+};

package/dist/components/Table/tableSort/tableSortUtils.js

@@ -0,0 +1,20 @@
+function o(n, e, u) {
+  return (n == null ? void 0 : n.columnId) === e && n.direction === u ? null : { columnId: e, direction: u };
+}
+function f(n, e) {
+  return n == null || e == null ? n == null ? e == null ? 0 : 1 : -1 : typeof n == "number" && typeof e == "number" ? n - e : String(n).localeCompare(String(e), void 0, { numeric: !0 });
+}
+function d(n, e, u) {
+  var t;
+  if (!e)
+    return n;
+  const r = (t = u.find((l) => l.id === e.columnId)) == null ? void 0 : t.sortValue;
+  if (!r)
+    return n;
+  const i = e.direction === "asc" ? 1 : -1;
+  return [...n].sort((l, c) => i * f(r(l), r(c)));
+}
+export {
+  o as getTableSortFromArrowClick,
+  d as sortTableRows
+};

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

@@ -0,0 +1,75 @@
+/**
+ * @typedef {import('./tableSortUtils').TableSort} TableSort
+ */
+/**
+ * @typedef {import('./tableSortUtils').TableSortColumn} TableSortColumn
+ */
+/**
+ * @typedef {object} UseTableClientSortOptions
+ * @property {*[]} rows
+ *   Source rows (unsorted).
+ * @property {TableSortColumn[]} columns
+ *   Column definitions with `sortValue` on sortable columns.
+ * @property {TableSort|null} [initialSort=null]
+ *   Initial sort state.
+ */
+/**
+ * @typedef {object} UseTableClientSortResult
+ * @property {TableSort|null} sort
+ *   Current sort (pass to {@link Table} as `sort`).
+ * @property {(sort: TableSort|null) => void} onSortChange
+ *   Sort change handler (pass to {@link Table} as `onSortChange`).
+ * @property {*[]} sortedRows
+ *   Rows sorted for the current `sort` (pass to {@link Table} as `rows`).
+ * @property {(sort: TableSort|null) => void} setSort
+ *   Imperative sort update.
+ */
+/**
+ * Manages client-side table sort state and derives sorted rows.
+ *
+ * @param {UseTableClientSortOptions} options
+ * @returns {UseTableClientSortResult}
+ *
+ * @example
+ * const { sort, onSortChange, sortedRows } = useTableClientSort({
+ *   rows: data,
+ *   columns,
+ * });
+ *
+ * <Table sort={sort} onSortChange={onSortChange} rows={sortedRows} columns={columns} />
+ */
+export function useTableClientSort({ rows, columns, initialSort }: UseTableClientSortOptions): UseTableClientSortResult;
+export type TableSort = import("./tableSortUtils").TableSort;
+export type TableSortColumn = import("./tableSortUtils").TableSortColumn;
+export type UseTableClientSortOptions = {
+    /**
+     *   Source rows (unsorted).
+     */
+    rows: any[];
+    /**
+     *   Column definitions with `sortValue` on sortable columns.
+     */
+    columns: TableSortColumn[];
+    /**
+     * Initial sort state.
+     */
+    initialSort?: TableSort | null;
+};
+export type UseTableClientSortResult = {
+    /**
+     *   Current sort (pass to {@link Table} as `sort`).
+     */
+    sort: TableSort | null;
+    /**
+     *   Sort change handler (pass to {@link Table} as `onSortChange`).
+     */
+    onSortChange: (sort: TableSort | null) => void;
+    /**
+     *   Rows sorted for the current `sort` (pass to {@link Table} as `rows`).
+     */
+    sortedRows: any[];
+    /**
+     *   Imperative sort update.
+     */
+    setSort: (sort: TableSort | null) => void;
+};

package/dist/components/Table/tableSort/useTableClientSort.js

@@ -0,0 +1,16 @@
+import { useState as u, useMemo as c, useCallback as i } from "react";
+import { sortTableRows as m } from "./tableSortUtils.js";
+function f({ rows: o, columns: e, initialSort: s = null }) {
+  const [t, r] = u(s), n = c(() => m(o, t, e), [e, o, t]), a = i((l) => {
+    r(l);
+  }, []);
+  return {
+    sort: t,
+    onSortChange: a,
+    sortedRows: n,
+    setSort: r
+  };
+}
+export {
+  f as useTableClientSort
+};

package/dist/components/Tooltip/Tooltip.module.scss.js

@@ -1,41 +1,41 @@
-const t = "_wrapper_1fyp1_3", o = "_fullWidth_1fyp1_11", _ = "_tooltip_1fyp1_18", n = "_dark_1fyp1_36", e = "_light_1fyp1_45", l = "_withArrow_1fyp1_56", i = "_top_1fyp1_64", c = "_bottom_1fyp1_72", p = "_left_1fyp1_80", s = "_right_1fyp1_88", f = "_header_1fyp1_112", r = "_titleRow_1fyp1_120", h = "_title_1fyp1_120", y = "_content_1fyp1_135", w = "_contentText_1fyp1_145", a = "_noTitleWithIcon_1fyp1_151", d = "_noTitleWithClose_1fyp1_155", T = "_closeButton_1fyp1_161", W = {
+const t = "_wrapper_1h62q_3", o = "_fullWidth_1h62q_10", _ = "_tooltip_1h62q_17", n = "_dark_1h62q_35", e = "_light_1h62q_44", h = "_withArrow_1h62q_55", l = "_top_1h62q_63", i = "_bottom_1h62q_71", c = "_left_1h62q_79", s = "_right_1h62q_87", r = "_header_1h62q_111", q = "_titleRow_1h62q_119", p = "_title_1h62q_119", w = "_content_1h62q_134", a = "_contentText_1h62q_144", d = "_noTitleWithIcon_1h62q_150", T = "_noTitleWithClose_1h62q_154", W = "_closeButton_1h62q_160", f = {
   wrapper: t,
   fullWidth: o,
   tooltip: _,
   dark: n,
   light: e,
-  withArrow: l,
-  top: i,
-  bottom: c,
-  left: p,
+  withArrow: h,
+  top: l,
+  bottom: i,
+  left: c,
   right: s,
-  header: f,
-  titleRow: r,
-  title: h,
-  content: y,
-  contentText: w,
-  noTitleWithIcon: a,
-  noTitleWithClose: d,
-  closeButton: T
+  header: r,
+  titleRow: q,
+  title: p,
+  content: w,
+  contentText: a,
+  noTitleWithIcon: d,
+  noTitleWithClose: T,
+  closeButton: W
 };
 export {
-  c as bottom,
-  T as closeButton,
-  y as content,
-  w as contentText,
+  i as bottom,
+  W as closeButton,
+  w as content,
+  a as contentText,
   n as dark,
-  W as default,
+  f as default,
   o as fullWidth,
-  f as header,
-  p as left,
+  r as header,
+  c as left,
   e as light,
-  d as noTitleWithClose,
-  a as noTitleWithIcon,
+  T as noTitleWithClose,
+  d as noTitleWithIcon,
   s as right,
-  h as title,
-  r as titleRow,
+  p as title,
+  q as titleRow,
   _ as tooltip,
-  i as top,
-  l as withArrow,
+  l as top,
+  h as withArrow,
   t as wrapper
 };

package/dist/components/index.d.ts

@@ -27,4 +27,6 @@ export { Modal } from "./Modal/Modal";
 export { default as ImagePlaceholder } from "./ImagePlaceholder/ImagePlaceholder";
 export { ImageHoverPreview } from "./ImagePlaceholder/ImageHoverPreview/ImageHoverPreview";
 export { default as ImageWithData } from "./ImageWithData/ImageWithData";
+export { useTableClientSort } from "./Table/tableSort/useTableClientSort";
 export { normalizeTabsOptions, normalizeTabOption } from "./Tabs/tabsUtils";
+export { Table, getTableSortFromArrowClick, sortTableRows } from "./Table/Table";

package/dist/index.js

@@ -1,64 +1,71 @@
 /* empty css                      */
 import { default as t } from "./components/ImagePlaceholder/ImagePlaceholder.js";
-import { default as m } from "./components/ImageWithData/ImageWithData.js";
+import { default as p } from "./components/ImageWithData/ImageWithData.js";
 import { Avatar as x } from "./components/Avatar/Avatar.js";
 import { Badge as i } from "./components/Badge/Badge.js";
 import { Button as s } from "./components/Button/Button.js";
-import { Checkbox as n } from "./components/Checkbox/Checkbox.js";
-import { DropdownList as b } from "./components/DropdownList/DropdownList.js";
+import { Checkbox as b } from "./components/Checkbox/Checkbox.js";
+import { DropdownList as d } from "./components/DropdownList/DropdownList.js";
 import { EllipsisTooltip as I } from "./components/EllipsisTooltip/EllipsisTooltip.js";
 import { ExpandableItem as c } from "./components/ExpandableItem/ExpandableItem.js";
-import { FileType as F } from "./components/FileType/FileType.js";
-import { ImageHoverPreview as h } from "./components/ImagePlaceholder/ImageHoverPreview/ImageHoverPreview.js";
-import { Infobox as L } from "./components/Infobox/Infobox.js";
-import { InputField as z } from "./components/Fields/InputField/InputField.js";
-import { ListItem as E } from "./components/ListItem/ListItem.js";
-import { Modal as N } from "./components/Modal/Modal.js";
-import { Notifications as k } from "./components/Notifications/Notifications.js";
-import { Pill as A } from "./components/Pill/Pill.js";
-import { ProgressBar as M } from "./components/ProgressBar/ProgressBar.js";
-import { Radio as S } from "./components/Radio/Radio.js";
+import { FileType as v } from "./components/FileType/FileType.js";
+import { ImageHoverPreview as P } from "./components/ImagePlaceholder/ImageHoverPreview/ImageHoverPreview.js";
+import { Infobox as B } from "./components/Infobox/Infobox.js";
+import { InputField as L } from "./components/Fields/InputField/InputField.js";
+import { ListItem as k } from "./components/ListItem/ListItem.js";
+import { Modal as A } from "./components/Modal/Modal.js";
+import { Notifications as E } from "./components/Notifications/Notifications.js";
+import { Pill as N } from "./components/Pill/Pill.js";
+import { ProgressBar as R } from "./components/ProgressBar/ProgressBar.js";
+import { Radio as M } from "./components/Radio/Radio.js";
 import { SelectField as j } from "./components/Fields/SelectField/SelectField.js";
 import { Tab as G } from "./components/Tab/Tab.js";
-import { Tabs as K } from "./components/Tabs/Tabs.js";
-import { Tag as U } from "./components/Tag/Tag.js";
-import { TextField as X } from "./components/Fields/TextField/TextField.js";
-import { TextHoverable as Z } from "./components/TextHoverable/TextHoverable.js";
-import { Toggle as $ } from "./components/Toggle/Toggle.js";
-import { Tooltip as ro } from "./components/Tooltip/Tooltip.js";
-import { normalizeTabOption as to, normalizeTabsOptions as po } from "./components/Tabs/tabsUtils.js";
-import { useListItems as fo } from "./components/ListItem/useListItems.js";
-import { useNotifications as ao } from "./components/Notifications/useNotifications.js";
+import { Table as K } from "./components/Table/Table.js";
+import { Tabs as U } from "./components/Tabs/Tabs.js";
+import { Tag as X } from "./components/Tag/Tag.js";
+import { TextField as Z } from "./components/Fields/TextField/TextField.js";
+import { TextHoverable as $ } from "./components/TextHoverable/TextHoverable.js";
+import { Toggle as ro } from "./components/Toggle/Toggle.js";
+import { Tooltip as to } from "./components/Tooltip/Tooltip.js";
+import { getTableSortFromArrowClick as po, sortTableRows as fo } from "./components/Table/tableSort/tableSortUtils.js";
+import { normalizeTabOption as ao, normalizeTabsOptions as io } from "./components/Tabs/tabsUtils.js";
+import { useListItems as so } from "./components/ListItem/useListItems.js";
+import { useNotifications as bo } from "./components/Notifications/useNotifications.js";
+import { useTableClientSort as go } from "./components/Table/tableSort/useTableClientSort.js";
 export {
   x as Avatar,
   i as Badge,
   s as Button,
-  n as Checkbox,
-  b as DropdownList,
+  b as Checkbox,
+  d as DropdownList,
   I as EllipsisTooltip,
   c as ExpandableItem,
-  F as FileType,
-  h as ImageHoverPreview,
+  v as FileType,
+  P as ImageHoverPreview,
   t as ImagePlaceholder,
-  m as ImageWithData,
-  L as Infobox,
-  z as InputField,
-  E as ListItem,
-  N as Modal,
-  k as Notifications,
-  A as Pill,
-  M as ProgressBar,
-  S as Radio,
+  p as ImageWithData,
+  B as Infobox,
+  L as InputField,
+  k as ListItem,
+  A as Modal,
+  E as Notifications,
+  N as Pill,
+  R as ProgressBar,
+  M as Radio,
   j as SelectField,
   G as Tab,
-  K as Tabs,
-  U as Tag,
-  X as TextField,
-  Z as TextHoverable,
-  $ as Toggle,
-  ro as Tooltip,
-  to as normalizeTabOption,
-  po as normalizeTabsOptions,
-  fo as useListItems,
-  ao as useNotifications
+  K as Table,
+  U as Tabs,
+  X as Tag,
+  Z as TextField,
+  $ as TextHoverable,
+  ro as Toggle,
+  to as Tooltip,
+  po as getTableSortFromArrowClick,
+  ao as normalizeTabOption,
+  io as normalizeTabsOptions,
+  fo as sortTableRows,
+  so as useListItems,
+  bo as useNotifications,
+  go as useTableClientSort
 };