@worknice/whiteboard 0.52.0 → 0.53.0

package/dist/presentation/RichList/helpers.d.ts

@@ -0,0 +1,77 @@
+import type { Row } from "@tanstack/react-table";
+import { type NormalizedSlot, type NormalizedTextField, type RichListContentSlot, type RichListSlotSize, type RichListTextField } from "./types";
+export declare const isToggleableContentColumn: <Type>(entry: NormalizedTextField<Type> | NormalizedSlot<Type> | null) => entry is NormalizedSlot<Type>;
+/**
+ * Whether this column’s visibility is stored (toggleable content, or `hiddenByDefault`
+ * without a user toggle).
+ */
+export declare const isColumnWithVisibilityState: <Type>(entry: NormalizedTextField<Type> | NormalizedSlot<Type> | null) => boolean;
+export declare const formatSlotSize: (size: RichListSlotSize) => string;
+/**
+ * Default **`RichList` `compactBreakpoint`** (list scope width in px): at or below this,
+ * measured on the list scope only (`listScopeRef` `clientWidth` via `ResizeObserver` —
+ * the whole list, head and rows together), the list is "compact". `compactBreakpoint`
+ * is the **only** width guardrail in `RichList`; everything narrow / mobile-flavoured
+ * cascades from this single threshold.
+ *
+ * Effects of being at/under `compactBreakpoint`:
+ *
+ * - `compactSize` is used instead of `size` when set (leading, content, trailing).
+ * - Main-slot `prefixOnWide` / `suffixOnWide` are hidden via `rowListAtCompactBreakpoint`.
+ * - Slots / text fields with `layoutVisibility: "whenWide"` are hidden, and ones with
+ *   `"whenCompact"` become visible.
+ * - If no content slot is visible at compact (none have `layoutVisibility` `"always"`
+ *   or `"whenCompact"`), the whole middle content-slot strip is hidden (`rowMainCompact`).
+ * - Hover-only controls (row checkbox lane, toolbar select-all) are shown by default;
+ *   toolbar button labels collapse to icons. CSS rules are keyed off the
+ *   `data-richlist-compact` attribute that JS sets on `.richListQueryScope` from
+ *   `isCompactContentSlots` (driven by this prop).
+ * - The Display dialog's column-visibility section is hidden (no room).
+ */
+export declare const RICH_LIST_CONTENT_COMPACT_MAX_PX = 1024;
+export declare const ROW_HEIGHT_PRESETS: {
+    readonly small: 56;
+    readonly medium: 72;
+    readonly large: 104;
+};
+/**
+ * Horizontal padding (px) applied across the whole list (toolbar, rows, empty state)
+ * at each row height preset. Forwarded as the `--richlist-padding-inline` custom
+ * property and consumed by `RichList.module.css`, `RichListRow.module.css`, and
+ * `RichListToolbar.module.css` so head and body share the same gutter.
+ */
+export declare const RICH_LIST_INLINE_PAD_PRESET_PX: {
+    [K in keyof typeof ROW_HEIGHT_PRESETS]: number;
+};
+export declare const richListInlinePaddingPx: (rowHeight: number | keyof typeof ROW_HEIGHT_PRESETS) => number;
+export declare const SELECT_COLUMN_ID = "_richListSelect";
+export declare const normalizeTextField: <Type>(field: RichListTextField<Type>, position: "primary" | "secondary") => NormalizedTextField<Type>;
+/**
+ * Accepts the wider `RichListContentSlot` shape so leading/trailing `RichListSlot`
+ * values (which omit the content-only options) are also assignable. `position`
+ * controls which fields are honoured: the content-only options are forced to their
+ * inert defaults for leading/trailing.
+ *
+ * `positionIndex` is the index within its position group (e.g. the i-th leading slot
+ * when `leadingSlot` is an array). Used for fallback ids on function-form slots and
+ * stored on the normalized shape for debugging.
+ */
+export declare const normalizeSlot: <Type>(slot: RichListContentSlot<Type>, position: "leading" | "content" | "trailing", positionIndex?: number) => NormalizedSlot<Type>;
+/**
+ * Whether a slot or text field renders at the current list-width compact state.
+ *
+ * - `"always"` — render at any list width.
+ * - `"whenWide"` — render only when **not** at compact (`isCompactContentSlots === false`).
+ * - `"whenCompact"` — render only at/under `compactBreakpoint` (`isCompactContentSlots === true`).
+ */
+export declare const isVisibleAtBreakpoint: (layoutVisibility: NormalizedSlot<unknown>["layoutVisibility"], isCompactContentSlots: boolean) => boolean;
+type CsvColumn = {
+    id: string;
+    header?: string;
+};
+/**
+ * Blob + object URL (not a `data:` URL) so multiline CSV is not mangled. Table keeps
+ * `handleDownloadCsv` in `utils/tables` for regression stability.
+ */
+export declare const handleDownloadCsv: <Type>(csvFilename: string | undefined, columns: CsvColumn[], rows: Row<Type>[]) => void;
+export {};

package/dist/presentation/RichList/helpers.js

@@ -0,0 +1,121 @@
+import * as __WEBPACK_EXTERNAL_MODULE__utils_encodeCsv_js_bae5629c__ from "../../utils/encodeCsv.js";
+const isNormalizedSlot = (entry)=>null !== entry && "align" in entry;
+const isToggleableContentColumn = (entry)=>isNormalizedSlot(entry) && "content" === entry.position && entry.canToggleVisibility && "string" == typeof entry.label && entry.label.length > 0;
+const isColumnWithVisibilityState = (entry)=>{
+    if (null === entry) return false;
+    if (!isNormalizedSlot(entry)) return false;
+    if (isToggleableContentColumn(entry)) return true;
+    const slot = entry;
+    return slot.hiddenByDefault && !slot.canToggleVisibility;
+};
+const formatSlotSize = (size)=>"number" == typeof size ? `${size}px` : size;
+const RICH_LIST_CONTENT_COMPACT_MAX_PX = 1024;
+const ROW_HEIGHT_PRESETS = {
+    small: 56,
+    medium: 72,
+    large: 104
+};
+const RICH_LIST_INLINE_PAD_PRESET_PX = {
+    small: 12,
+    medium: 16,
+    large: 20
+};
+const richListInlinePaddingPx = (rowHeight)=>{
+    if ("number" != typeof rowHeight) return RICH_LIST_INLINE_PAD_PRESET_PX[rowHeight];
+    if (rowHeight < 1) return RICH_LIST_INLINE_PAD_PRESET_PX.small;
+    if (rowHeight <= 60) return RICH_LIST_INLINE_PAD_PRESET_PX.small;
+    if (rowHeight < 88) return RICH_LIST_INLINE_PAD_PRESET_PX.medium;
+    return RICH_LIST_INLINE_PAD_PRESET_PX.large;
+};
+const SELECT_COLUMN_ID = "_richListSelect";
+const normalizeTextField = (field, position)=>{
+    if ("function" == typeof field) return {
+        id: `_richList_${position}`,
+        position,
+        render: field,
+        globalFiltering: false,
+        csvExport: false,
+        layoutVisibility: "always"
+    };
+    return {
+        id: `_richList_${position}`,
+        position,
+        label: field.label,
+        value: field.value,
+        render: field.render,
+        prefixOnWide: field.prefixOnWide,
+        suffixOnWide: field.suffixOnWide,
+        filter: field.filter,
+        globalFiltering: field.globalFiltering ?? void 0 !== field.value,
+        csvExport: field.csvExport ?? false,
+        layoutVisibility: field.layoutVisibility ?? "always"
+    };
+};
+const normalizeSlot = (slot, position, positionIndex)=>{
+    if ("function" == typeof slot) {
+        const fallbackId = "content" === position ? `_richList_content_${positionIndex ?? 0}` : void 0 !== positionIndex && positionIndex > 0 ? `_richList_${position}_${positionIndex}` : `_richList_${position}`;
+        return {
+            id: fallbackId,
+            position,
+            positionIndex,
+            render: slot,
+            layoutVisibility: "always",
+            columnWidthMode: "shrinkable",
+            align: "trailing" === position ? "end" : "start",
+            globalFiltering: false,
+            canToggleVisibility: false,
+            hiddenByDefault: false,
+            csvExport: false
+        };
+    }
+    return {
+        id: slot.id,
+        position,
+        positionIndex,
+        label: slot.label,
+        value: slot.value,
+        render: slot.render,
+        layoutVisibility: slot.layoutVisibility ?? "always",
+        columnWidthMode: "content" === position ? slot.columnWidthMode ?? "shrinkable" : "shrinkable",
+        align: slot.align ?? ("trailing" === position ? "end" : "start"),
+        size: slot.size,
+        compactSize: slot.compactSize,
+        filter: slot.filter,
+        globalFiltering: slot.globalFiltering ?? void 0 !== slot.value,
+        canToggleVisibility: "content" === position && true === slot.canToggleVisibility,
+        hiddenByDefault: slot.hiddenByDefault ?? false,
+        csvExport: slot.csvExport ?? false
+    };
+};
+const isVisibleAtBreakpoint = (layoutVisibility, isCompactContentSlots)=>{
+    switch(layoutVisibility){
+        case "always":
+            return true;
+        case "whenWide":
+            return !isCompactContentSlots;
+        case "whenCompact":
+            return isCompactContentSlots;
+    }
+};
+const handleDownloadCsv = (csvFilename, columns, rows)=>{
+    if (!csvFilename) return;
+    const csvContent = (0, __WEBPACK_EXTERNAL_MODULE__utils_encodeCsv_js_bae5629c__["default"])([
+        columns.map((col)=>col.header),
+        ...rows.map((row)=>columns.map((col)=>row.getValue(col.id)))
+    ]);
+    const blob = new Blob([
+        csvContent
+    ], {
+        type: "text/csv;charset=utf-8"
+    });
+    const objectUrl = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = objectUrl;
+    a.download = csvFilename.endsWith(".csv") ? csvFilename : `${csvFilename}.csv`;
+    a.style.display = "none";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(objectUrl);
+};
+export { RICH_LIST_CONTENT_COMPACT_MAX_PX, RICH_LIST_INLINE_PAD_PRESET_PX, ROW_HEIGHT_PRESETS, SELECT_COLUMN_ID, formatSlotSize, handleDownloadCsv, isColumnWithVisibilityState, isToggleableContentColumn, isVisibleAtBreakpoint, normalizeSlot, normalizeTextField, richListInlinePaddingPx };

package/dist/presentation/RichList/stories/ComplianceGroups.d.ts

@@ -0,0 +1,9 @@
+import { type CommonProps } from "./shared";
+export type ComplianceGroupsRow = {
+    id: string;
+    title: string;
+    requirementsCount: number;
+    enrolmentsCount: number;
+};
+declare const ComplianceGroupsList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default ComplianceGroupsList;

package/dist/presentation/RichList/stories/ComplianceGroups.js

@@ -0,0 +1,141 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__ from "../../HStack.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__ from "../../Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
+function requirementsLabel(n) {
+    return 1 === n ? "1 requirement" : `${n} requirements`;
+}
+function enrolmentsLabel(n) {
+    return 1 === n ? "1 enrolment" : `${n} enrolments`;
+}
+const groups = [
+    {
+        id: "cg1",
+        title: "Company Policies",
+        requirementsCount: 9,
+        enrolmentsCount: 40
+    },
+    {
+        id: "cg2",
+        title: "Annual Security Training",
+        requirementsCount: 2,
+        enrolmentsCount: 12
+    },
+    {
+        id: "cg3",
+        title: "Employment Compliance",
+        requirementsCount: 6,
+        enrolmentsCount: 1
+    },
+    {
+        id: "cg4",
+        title: "Pre-boarding",
+        requirementsCount: 8,
+        enrolmentsCount: 1
+    },
+    {
+        id: "cg5",
+        title: "NDIS Worker Screening",
+        requirementsCount: 9,
+        enrolmentsCount: 2
+    },
+    {
+        id: "cg6",
+        title: "Offboarding",
+        requirementsCount: 1,
+        enrolmentsCount: 1
+    },
+    {
+        id: "cg7",
+        title: "Rem Adjustment",
+        requirementsCount: 0,
+        enrolmentsCount: 0
+    },
+    {
+        id: "cg8",
+        title: "Onboarding",
+        requirementsCount: 14,
+        enrolmentsCount: 2
+    },
+    {
+        id: "cg9",
+        title: "New Hire Induction",
+        requirementsCount: 4,
+        enrolmentsCount: 2
+    }
+];
+const rowActions = ()=>[
+        {
+            id: "view",
+            label: "View group",
+            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
+                symbol: "Visible"
+            }),
+            alwaysVisible: false,
+            onClick: ()=>void 0
+        },
+        {
+            id: "edit",
+            label: "Edit",
+            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
+                symbol: "Edit"
+            }),
+            alwaysVisible: false,
+            onClick: ()=>void 0
+        }
+    ];
+const ComplianceGroupsList = ({ compactBreakpoint, contentAlignment, rowHeight })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
+        compactBreakpoint: compactBreakpoint,
+        contentAlignment: contentAlignment,
+        data: groups,
+        enableSorting: false,
+        fillContainerHeight: true,
+        getRowId: (r)=>r.id,
+        href: ()=>"#",
+        rowActions: rowActions,
+        rowHeight: rowHeight,
+        mainSlot: {
+            primary: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                    font: "regular-bold",
+                    children: r.title
+                }),
+            secondary: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+                    spacing: "n2",
+                    align: "center",
+                    tagName: "div",
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
+                            symbol: "AssignmentDocument",
+                            size: "small",
+                            tone: "muted"
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                            font: "small",
+                            tone: "muted",
+                            children: requirementsLabel(r.requirementsCount)
+                        })
+                    ]
+                })
+        },
+        trailingSlot: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+                spacing: "n2",
+                align: "center",
+                justify: "end",
+                tagName: "div",
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
+                        symbol: "People",
+                        size: "small",
+                        tone: "muted"
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                        font: "small",
+                        tone: "muted",
+                        children: enrolmentsLabel(r.enrolmentsCount)
+                    })
+                ]
+            })
+    });
+const ComplianceGroups_rslib_entry_ = ComplianceGroupsList;
+export { ComplianceGroups_rslib_entry_ as default };

package/dist/presentation/RichList/stories/CustomFields.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import Badge from "../../Badge";
+import { type CommonProps } from "./shared";
+type BadgeColor = NonNullable<ComponentProps<typeof Badge>["color"]>;
+export type CustomFieldsRow = {
+    id: string;
+    name: string;
+    description: string;
+    fieldTypeLabel: string;
+    fieldTypeColor: BadgeColor;
+};
+declare const CustomFieldsList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomFieldsList;

package/dist/presentation/RichList/stories/CustomFields.js

@@ -0,0 +1,80 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__ from "../../Badge.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__ from "../../Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
+const fields = [
+    {
+        id: "cf1",
+        name: "Probation date",
+        description: "The date an employee's probationary period ends.",
+        fieldTypeLabel: "Date",
+        fieldTypeColor: "blue"
+    },
+    {
+        id: "cf2",
+        name: "Salary sacrifice",
+        description: "Amount deducted from pre-tax salary for benefits.",
+        fieldTypeLabel: "Number",
+        fieldTypeColor: "green"
+    },
+    {
+        id: "cf3",
+        name: "Department",
+        description: "The primary department or division the employee belongs to.",
+        fieldTypeLabel: "Single choice",
+        fieldTypeColor: "purple"
+    },
+    {
+        id: "cf4",
+        name: "Cost centre",
+        description: "Financial code for expense allocation.",
+        fieldTypeLabel: "Single choice",
+        fieldTypeColor: "purple"
+    }
+];
+const rowActions = ()=>[
+        {
+            id: "more",
+            label: "Field actions",
+            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
+                symbol: "Edit"
+            }),
+            alwaysVisible: false,
+            onClick: ()=>void 0
+        }
+    ];
+const CustomFieldsList = ({ compactBreakpoint, contentAlignment, rowHeight })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
+        compactBreakpoint: compactBreakpoint,
+        contentAlignment: contentAlignment,
+        data: fields,
+        enableSorting: false,
+        fillContainerHeight: true,
+        getRowId: (r)=>r.id,
+        rowActions: rowActions,
+        rowHeight: rowHeight,
+        mainSlot: {
+            primary: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                    font: "regular-bold",
+                    children: r.name
+                }),
+            secondary: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                    font: "small",
+                    tone: "muted",
+                    children: r.description
+                })
+        },
+        trailingSlot: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                style: {
+                    display: "flex",
+                    justifyContent: "flex-end"
+                },
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__["default"], {
+                    id: `${r.id}-type`,
+                    color: r.fieldTypeColor,
+                    children: r.fieldTypeLabel
+                })
+            })
+    });
+const CustomFields_rslib_entry_ = CustomFieldsList;
+export { CustomFields_rslib_entry_ as default };

package/dist/presentation/RichList/stories/EmployeeCompliance.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import Badge from "../../Badge";
+import { type CommonProps } from "./shared";
+type NameBadgeColor = NonNullable<ComponentProps<typeof Badge>["color"]>;
+export type EmployeeComplianceRow = {
+    id: string;
+    title: string;
+    statusBadge: {
+        text: string;
+        color: NameBadgeColor;
+    };
+    statusDetail: string;
+};
+declare const EmployeeComplianceList: ({ compactBreakpoint, contentAlignment, rowHeight, enableSorting, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default EmployeeComplianceList;