hs-uix 2.1.0 → 2.2.0

package/dist/datatable.js

@@ -541,7 +541,7 @@ var GENERATED_ICONS = {
   "ZoomOut": { "viewBox": "0 0 32 32", "paths": ["M14.42 26.75c2.85 0 5.47-.97 7.56-2.6l-.03.02 5.28 5.34a1.619 1.619 0 0 0 2.76-1.15c0-.45-.18-.85-.47-1.14l-5.33-5.33c1.59-2.06 2.55-4.68 2.55-7.52C26.74 7.54 21.2 2 14.37 2S2 7.55 2 14.38s5.54 12.37 12.37 12.37h.05m0-21.55c5.06 0 9.16 4.1 9.16 9.16s-4.1 9.16-9.16 9.16-9.16-4.1-9.16-9.16c.01-5.05 4.11-9.14 9.16-9.15Zm-4.31 10.78h8.62c.89 0 1.62-.72 1.62-1.62s-.72-1.62-1.62-1.62h-8.62c-.89 0-1.62.72-1.62 1.62s.72 1.62 1.62 1.62"] }
 };
 
-// src/common-components/Icon.js
+// src/common-components/nativeIconNames.js
 var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "add",
   "appointment",
@@ -553,12 +553,12 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "block",
   "book",
   "bulb",
+  "callTranscript",
   "calling",
   "callingHangup",
   "callingMade",
   "callingMissed",
   "callingVoicemail",
-  "callTranscript",
   "campaigns",
   "cap",
   "checkCircle",
@@ -587,13 +587,13 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "enroll",
   "exclamation",
   "exclamationCircle",
-  "facebook",
   "faceHappy",
   "faceHappyFilled",
   "faceNeutral",
   "faceNeutralFilled",
   "faceSad",
   "faceSadFilled",
+  "facebook",
   "favoriteHollow",
   "file",
   "filledXCircleIcon",
@@ -734,6 +734,8 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "zoomIn",
   "zoomOut"
 ]);
+
+// src/common-components/Icon.js
 var NATIVE_COLORS = /* @__PURE__ */ new Set(["inherit", "alert", "warning", "success"]);
 var NATIVE_SIZE_TOKENS = {
   sm: "sm",
@@ -946,6 +948,7 @@ var CollectionFilterControl = ({
       { key: name, direction: "row", align: "center", gap: "xs" },
       h3(import_ui_extensions5.DateInput, {
         name: `${controlName}-from`,
+        label: filter.fromLabel ?? labels.dateFrom,
         placeholder: filter.fromLabel ?? labels.dateFrom,
         format: "medium",
         value: rangeValue.from ?? null,
@@ -954,6 +957,7 @@ var CollectionFilterControl = ({
       h3(Icon, { name: "right", size: "sm" }),
       h3(import_ui_extensions5.DateInput, {
         name: `${controlName}-to`,
+        label: filter.toLabel ?? labels.dateTo,
         placeholder: filter.toLabel ?? labels.dateTo,
         format: "medium",
         value: rangeValue.to ?? null,
@@ -1092,6 +1096,45 @@ var editValidationError = (result) => {
   return typeof result === "string" ? result : "Invalid value";
 };
 
+// src/datatable/rowExpansion.js
+var extractRowId = (row, rowIdField = "id", fallback = void 0) => {
+  const id = row == null ? void 0 : row[rowIdField];
+  return id != null ? id : fallback;
+};
+var normalizeExpandedIds = (ids) => {
+  if (ids == null) return /* @__PURE__ */ new Set();
+  const list = ids instanceof Set ? [...ids] : Array.isArray(ids) ? ids : [ids];
+  return new Set(list.filter((id) => id != null));
+};
+var expandRowId = (expandedIds, rowId, expandSingle = false) => {
+  if (rowId == null) return expandedIds;
+  if (expandSingle) return /* @__PURE__ */ new Set([rowId]);
+  const next = new Set(expandedIds);
+  next.add(rowId);
+  return next;
+};
+var collapseRowId = (expandedIds, rowId) => {
+  if (rowId == null || !expandedIds.has(rowId)) return expandedIds;
+  const next = new Set(expandedIds);
+  next.delete(rowId);
+  return next;
+};
+var toggleExpandedId = (expandedIds, rowId, expandSingle = false) => {
+  if (rowId == null) return expandedIds;
+  return expandedIds.has(rowId) ? collapseRowId(expandedIds, rowId) : expandRowId(expandedIds, rowId, expandSingle);
+};
+var withDetailRows = (items, expandedIds, rowIdField = "id") => {
+  if (!expandedIds || expandedIds.size === 0) return items;
+  const out = [];
+  items.forEach((item) => {
+    out.push(item);
+    if (item.type === "data" && expandedIds.has(extractRowId(item.row, rowIdField))) {
+      out.push({ type: "detail", row: item.row });
+    }
+  });
+  return out;
+};
+
 // src/datatable/DataTable.jsx
 var import_ui_extensions7 = require("@hubspot/ui-extensions");
 var NARROW_EDIT_TYPES = /* @__PURE__ */ new Set(["checkbox", "toggle"]);
@@ -1303,6 +1346,21 @@ var DataTable = ({
   hideRowActionsWhenSelectionActive = false,
   // hide row action column while selected-row action bar is visible
   // -----------------------------------------------------------------------
+  // Row expansion (detail rows)
+  // -----------------------------------------------------------------------
+  renderExpandedRow,
+  // (row) => ReactNode — providing this enables the feature
+  expandedRowIds: externalExpandedRowIds,
+  // controlled — array of expanded row IDs
+  defaultExpandedRowIds,
+  // uncontrolled — initially expanded row IDs
+  onExpandedRowsChange,
+  // (expandedRowIds[]) => void
+  expandOn = "icon",
+  // "icon" (chevron toggle column) | "row" (click row content)
+  expandSingle = false,
+  // accordion mode — expanding a row collapses the others
+  // -----------------------------------------------------------------------
   // Inline editing
   // -----------------------------------------------------------------------
   editMode,
@@ -1547,6 +1605,25 @@ var DataTable = ({
     });
     return rows;
   }, [groupedData, paginatedRows, expandedGroups]);
+  const expandable = typeof renderExpandedRow === "function";
+  const showExpandColumn = expandable && expandOn === "icon";
+  const [internalExpandedRowIds, setInternalExpandedRowIds] = (0, import_react7.useState)(
+    () => normalizeExpandedIds(defaultExpandedRowIds)
+  );
+  const expandedRowIds = (0, import_react7.useMemo)(
+    () => externalExpandedRowIds != null ? normalizeExpandedIds(externalExpandedRowIds) : internalExpandedRowIds,
+    [externalExpandedRowIds, internalExpandedRowIds]
+  );
+  const toggleRowExpanded = (0, import_react7.useCallback)((rowId) => {
+    if (rowId == null) return;
+    const next = toggleExpandedId(expandedRowIds, rowId, expandSingle);
+    if (externalExpandedRowIds == null) setInternalExpandedRowIds(next);
+    if (onExpandedRowsChange) onExpandedRowsChange([...next]);
+  }, [expandedRowIds, expandSingle, externalExpandedRowIds, onExpandedRowsChange]);
+  const renderedRows = (0, import_react7.useMemo)(() => {
+    if (!expandable) return displayRows;
+    return withDetailRows(displayRows, expandedRowIds, rowIdField);
+  }, [expandable, displayRows, expandedRowIds, rowIdField]);
   const footerData = serverSide ? data : filteredData;
   const activeChips = (0, import_react7.useMemo)(
     () => buildActiveFilterChips(filters, filterValues),
@@ -1698,6 +1775,7 @@ var DataTable = ({
     const type = col.editType || "text";
     const rowId = row[rowIdField];
     const fieldName = `edit-${rowId}-${col.field}`;
+    const inputLabel = typeof col.label === "string" ? col.label : col.field;
     const commit = (val) => commitEdit(row, col.field, val);
     const exitEdit = () => {
       if (editError) return;
@@ -1738,15 +1816,15 @@ var DataTable = ({
       case "multiselect":
         return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.MultiSelect, { ...extra, name: fieldName, label: "", value: editValue || [], onChange: commit, options: resolveEditOptions(col, data) });
       case "date":
-        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: fieldName, label: inputLabel, value: editValue, onChange: commit });
       case "time":
-        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra, name: fieldName, label: inputLabel, value: editValue, onChange: commit });
       case "datetime":
-        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
+        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: `${fieldName}-date`, label: `${inputLabel} date`, value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
           const next = { ...editValue, date: val };
           handleInput(next);
           commitEdit(row, col.field, next, { keepEditing: true });
-        }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
+        }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: `${inputLabel} time`, value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
           const next = { ...editValue, time: val };
           handleInput(next);
           commitEdit(row, col.field, next, { keepEditing: true });
@@ -1760,7 +1838,8 @@ var DataTable = ({
     }
   };
   const resolvedEditMode = editMode || (columns.some((col) => col.editable) ? "discrete" : null);
-  const useColumnRendering = selectable || !!resolvedEditMode || editingRowId != null || showRowActionsColumn || !renderRow;
+  const useColumnRendering = selectable || !!resolvedEditMode || editingRowId != null || showRowActionsColumn || expandable || !renderRow;
+  const totalColumnCount = columns.length + (selectable ? 1 : 0) + (showExpandColumn ? 1 : 0) + (showRowActionsColumn ? 1 : 0);
   const autoWidths = (0, import_react7.useMemo)(
     () => autoWidth ? computeAutoWidths(columns, data) : {},
     [columns, data, autoWidth]
@@ -1779,6 +1858,7 @@ var DataTable = ({
     const type = col.editType || "text";
     const rowId = row[rowIdField];
     const fieldName = `inline-${rowId}-${col.field}`;
+    const inputLabel = typeof col.label === "string" ? col.label : col.field;
     const cellKey = `${rowId}-${col.field}`;
     const value = row[col.field];
     const validate = col.editValidate;
@@ -1827,13 +1907,13 @@ var DataTable = ({
       case "multiselect":
         return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.MultiSelect, { ...extra, name: fieldName, label: "", value: value || [], onChange: fire, options: resolveEditOptions(col, data) });
       case "date":
-        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: fieldName, label: inputLabel, value, onChange: fire });
       case "time":
-        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra, name: fieldName, label: inputLabel, value, onChange: fire });
       case "datetime":
-        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: value == null ? void 0 : value.date, onChange: (val) => {
+        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: `${fieldName}-date`, label: `${inputLabel} date`, value: value == null ? void 0 : value.date, onChange: (val) => {
           fire({ ...value, date: val });
-        } }), /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: value == null ? void 0 : value.time, onChange: (val) => {
+        } }), /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: `${inputLabel} time`, value: value == null ? void 0 : value.time, onChange: (val) => {
           fire({ ...value, time: val });
         } }));
       case "toggle":
@@ -1987,7 +2067,7 @@ var DataTable = ({
         checked: allVisibleSelected,
         onChange: handleSelectAll
       }
-    )), columns.map((col) => {
+    )), showExpandColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { width: "min" }), columns.map((col) => {
       const headerAlign = resolvedEditMode === "inline" && col.editable ? void 0 : col.align;
       return /* @__PURE__ */ import_react7.default.createElement(
         import_ui_extensions7.TableHeader,
@@ -2001,8 +2081,8 @@ var DataTable = ({
         col.description ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, col.label, "\xA0", /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Tooltip, null, col.description) }, /* @__PURE__ */ import_react7.default.createElement(Icon, { name: "info", screenReaderText: typeof col.description === "string" ? col.description : void 0 }))) : col.label
       );
     }), showRowActionsColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { width: "min" }))),
-    /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableBody, null, displayRows.map(
-      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }), columns.map((col, colIdx) => {
+    /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableBody, null, renderedRows.map(
+      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }), showExpandColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }), columns.map((col, colIdx) => {
         var _a, _b, _c;
         return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { key: col.field, width: getCellWidth(col), align: colIdx === 0 ? void 0 : col.align }, colIdx === 0 ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react7.default.createElement(
           Icon,
@@ -2019,7 +2099,7 @@ var DataTable = ({
           },
           /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Text, { format: { fontWeight: "demibold" } }, item.group.label)
         )) : ((_a = groupBy.aggregations) == null ? void 0 : _a[col.field]) ? groupBy.aggregations[col.field](item.group.rows, item.group.key) : ((_c = (_b = groupBy.groupValues) == null ? void 0 : _b[item.group.key]) == null ? void 0 : _c[col.field]) ?? "");
-      }), showRowActionsColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" })) : useColumnRendering ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }, /* @__PURE__ */ import_react7.default.createElement(
+      }), showRowActionsColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" })) : item.type === "detail" ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, { key: `detail-${item.row[rowIdField] ?? idx}` }, /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { colSpan: totalColumnCount }, renderExpandedRow(item.row))) : useColumnRendering ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }, /* @__PURE__ */ import_react7.default.createElement(
         import_ui_extensions7.Checkbox,
         {
           name: `select-${item.row[rowIdField]}`,
@@ -2027,13 +2107,22 @@ var DataTable = ({
           checked: selectedIds.has(item.row[rowIdField]),
           onChange: (checked) => handleSelectRow(item.row[rowIdField], checked)
         }
+      )), showExpandColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }, /* @__PURE__ */ import_react7.default.createElement(
+        Icon,
+        {
+          name: expandedRowIds.has(item.row[rowIdField]) ? "upCarat" : "downCarat",
+          onClick: () => toggleRowExpanded(item.row[rowIdField]),
+          screenReaderText: expandedRowIds.has(item.row[rowIdField]) ? "Collapse row" : "Expand row"
+        }
       )), columns.map((col) => {
         const rowId = item.row[rowIdField];
         const isDiscreteEditing = resolvedEditMode === "discrete" && (editingCell == null ? void 0 : editingCell.rowId) === rowId && (editingCell == null ? void 0 : editingCell.field) === col.field;
         const isRowEditing = editingRowId != null && rowId === editingRowId && col.editable;
         const isShowingInput = isDiscreteEditing || isRowEditing || resolvedEditMode === "inline" && col.editable;
         const cellAlign = isShowingInput ? void 0 : col.align;
-        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { key: col.field, width: isDiscreteEditing || isRowEditing ? "auto" : getCellWidth(col), align: cellAlign }, renderCellContent(item.row, col));
+        const cellContent = renderCellContent(item.row, col);
+        const wrapInRowToggle = expandable && expandOn === "row" && !col.editable && !isShowingInput;
+        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { key: col.field, width: isDiscreteEditing || isRowEditing ? "auto" : getCellWidth(col), align: cellAlign }, wrapInRowToggle ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Link, { variant: "dark", onClick: () => toggleRowExpanded(rowId) }, cellContent) : cellContent);
       }), showRowActionsColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }, /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, (() => {
         const resolvedRowActions = typeof rowActions === "function" ? rowActions(item.row) : rowActions;
         const actions = Array.isArray(resolvedRowActions) ? resolvedRowActions : [];
@@ -2050,13 +2139,14 @@ var DataTable = ({
         ));
       })()))) : renderRow(item.row)
     )),
-    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, null, selectable && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { width: "min" }), columns.map((col) => {
+    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, null, selectable && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { width: "min" }), showExpandColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { width: "min" }), columns.map((col) => {
       const footerDef = col.footer;
       const content = typeof footerDef === "function" ? footerDef(footerData) : footerDef || "";
       return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { key: col.field, align: col.align }, content);
     }), showRowActionsColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { width: "min" })))
   ));
 };
+DataTable.displayName = "DataTable";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DataTable

package/dist/datatable.mjs

@@ -516,7 +516,7 @@ var GENERATED_ICONS = {
   "ZoomOut": { "viewBox": "0 0 32 32", "paths": ["M14.42 26.75c2.85 0 5.47-.97 7.56-2.6l-.03.02 5.28 5.34a1.619 1.619 0 0 0 2.76-1.15c0-.45-.18-.85-.47-1.14l-5.33-5.33c1.59-2.06 2.55-4.68 2.55-7.52C26.74 7.54 21.2 2 14.37 2S2 7.55 2 14.38s5.54 12.37 12.37 12.37h.05m0-21.55c5.06 0 9.16 4.1 9.16 9.16s-4.1 9.16-9.16 9.16-9.16-4.1-9.16-9.16c.01-5.05 4.11-9.14 9.16-9.15Zm-4.31 10.78h8.62c.89 0 1.62-.72 1.62-1.62s-.72-1.62-1.62-1.62h-8.62c-.89 0-1.62.72-1.62 1.62s.72 1.62 1.62 1.62"] }
 };
 
-// src/common-components/Icon.js
+// src/common-components/nativeIconNames.js
 var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "add",
   "appointment",
@@ -528,12 +528,12 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "block",
   "book",
   "bulb",
+  "callTranscript",
   "calling",
   "callingHangup",
   "callingMade",
   "callingMissed",
   "callingVoicemail",
-  "callTranscript",
   "campaigns",
   "cap",
   "checkCircle",
@@ -562,13 +562,13 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "enroll",
   "exclamation",
   "exclamationCircle",
-  "facebook",
   "faceHappy",
   "faceHappyFilled",
   "faceNeutral",
   "faceNeutralFilled",
   "faceSad",
   "faceSadFilled",
+  "facebook",
   "favoriteHollow",
   "file",
   "filledXCircleIcon",
@@ -709,6 +709,8 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "zoomIn",
   "zoomOut"
 ]);
+
+// src/common-components/Icon.js
 var NATIVE_COLORS = /* @__PURE__ */ new Set(["inherit", "alert", "warning", "success"]);
 var NATIVE_SIZE_TOKENS = {
   sm: "sm",
@@ -921,6 +923,7 @@ var CollectionFilterControl = ({
       { key: name, direction: "row", align: "center", gap: "xs" },
       h3(DateInput, {
         name: `${controlName}-from`,
+        label: filter.fromLabel ?? labels.dateFrom,
         placeholder: filter.fromLabel ?? labels.dateFrom,
         format: "medium",
         value: rangeValue.from ?? null,
@@ -929,6 +932,7 @@ var CollectionFilterControl = ({
       h3(Icon, { name: "right", size: "sm" }),
       h3(DateInput, {
         name: `${controlName}-to`,
+        label: filter.toLabel ?? labels.dateTo,
         placeholder: filter.toLabel ?? labels.dateTo,
         format: "medium",
         value: rangeValue.to ?? null,
@@ -1067,6 +1071,45 @@ var editValidationError = (result) => {
   return typeof result === "string" ? result : "Invalid value";
 };
 
+// src/datatable/rowExpansion.js
+var extractRowId = (row, rowIdField = "id", fallback = void 0) => {
+  const id = row == null ? void 0 : row[rowIdField];
+  return id != null ? id : fallback;
+};
+var normalizeExpandedIds = (ids) => {
+  if (ids == null) return /* @__PURE__ */ new Set();
+  const list = ids instanceof Set ? [...ids] : Array.isArray(ids) ? ids : [ids];
+  return new Set(list.filter((id) => id != null));
+};
+var expandRowId = (expandedIds, rowId, expandSingle = false) => {
+  if (rowId == null) return expandedIds;
+  if (expandSingle) return /* @__PURE__ */ new Set([rowId]);
+  const next = new Set(expandedIds);
+  next.add(rowId);
+  return next;
+};
+var collapseRowId = (expandedIds, rowId) => {
+  if (rowId == null || !expandedIds.has(rowId)) return expandedIds;
+  const next = new Set(expandedIds);
+  next.delete(rowId);
+  return next;
+};
+var toggleExpandedId = (expandedIds, rowId, expandSingle = false) => {
+  if (rowId == null) return expandedIds;
+  return expandedIds.has(rowId) ? collapseRowId(expandedIds, rowId) : expandRowId(expandedIds, rowId, expandSingle);
+};
+var withDetailRows = (items, expandedIds, rowIdField = "id") => {
+  if (!expandedIds || expandedIds.size === 0) return items;
+  const out = [];
+  items.forEach((item) => {
+    out.push(item);
+    if (item.type === "data" && expandedIds.has(extractRowId(item.row, rowIdField))) {
+      out.push({ type: "detail", row: item.row });
+    }
+  });
+  return out;
+};
+
 // src/datatable/DataTable.jsx
 import {
   Box as Box2,
@@ -1306,6 +1349,21 @@ var DataTable = ({
   hideRowActionsWhenSelectionActive = false,
   // hide row action column while selected-row action bar is visible
   // -----------------------------------------------------------------------
+  // Row expansion (detail rows)
+  // -----------------------------------------------------------------------
+  renderExpandedRow,
+  // (row) => ReactNode — providing this enables the feature
+  expandedRowIds: externalExpandedRowIds,
+  // controlled — array of expanded row IDs
+  defaultExpandedRowIds,
+  // uncontrolled — initially expanded row IDs
+  onExpandedRowsChange,
+  // (expandedRowIds[]) => void
+  expandOn = "icon",
+  // "icon" (chevron toggle column) | "row" (click row content)
+  expandSingle = false,
+  // accordion mode — expanding a row collapses the others
+  // -----------------------------------------------------------------------
   // Inline editing
   // -----------------------------------------------------------------------
   editMode,
@@ -1550,6 +1608,25 @@ var DataTable = ({
     });
     return rows;
   }, [groupedData, paginatedRows, expandedGroups]);
+  const expandable = typeof renderExpandedRow === "function";
+  const showExpandColumn = expandable && expandOn === "icon";
+  const [internalExpandedRowIds, setInternalExpandedRowIds] = useState2(
+    () => normalizeExpandedIds(defaultExpandedRowIds)
+  );
+  const expandedRowIds = useMemo(
+    () => externalExpandedRowIds != null ? normalizeExpandedIds(externalExpandedRowIds) : internalExpandedRowIds,
+    [externalExpandedRowIds, internalExpandedRowIds]
+  );
+  const toggleRowExpanded = useCallback2((rowId) => {
+    if (rowId == null) return;
+    const next = toggleExpandedId(expandedRowIds, rowId, expandSingle);
+    if (externalExpandedRowIds == null) setInternalExpandedRowIds(next);
+    if (onExpandedRowsChange) onExpandedRowsChange([...next]);
+  }, [expandedRowIds, expandSingle, externalExpandedRowIds, onExpandedRowsChange]);
+  const renderedRows = useMemo(() => {
+    if (!expandable) return displayRows;
+    return withDetailRows(displayRows, expandedRowIds, rowIdField);
+  }, [expandable, displayRows, expandedRowIds, rowIdField]);
   const footerData = serverSide ? data : filteredData;
   const activeChips = useMemo(
     () => buildActiveFilterChips(filters, filterValues),
@@ -1701,6 +1778,7 @@ var DataTable = ({
     const type = col.editType || "text";
     const rowId = row[rowIdField];
     const fieldName = `edit-${rowId}-${col.field}`;
+    const inputLabel = typeof col.label === "string" ? col.label : col.field;
     const commit = (val) => commitEdit(row, col.field, val);
     const exitEdit = () => {
       if (editError) return;
@@ -1741,15 +1819,15 @@ var DataTable = ({
       case "multiselect":
         return /* @__PURE__ */ React6.createElement(MultiSelect2, { ...extra, name: fieldName, label: "", value: editValue || [], onChange: commit, options: resolveEditOptions(col, data) });
       case "date":
-        return /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+        return /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: fieldName, label: inputLabel, value: editValue, onChange: commit });
       case "time":
-        return /* @__PURE__ */ React6.createElement(TimeInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+        return /* @__PURE__ */ React6.createElement(TimeInput, { ...extra, name: fieldName, label: inputLabel, value: editValue, onChange: commit });
       case "datetime":
-        return /* @__PURE__ */ React6.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: `${fieldName}-date`, label: "", value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
+        return /* @__PURE__ */ React6.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: `${fieldName}-date`, label: `${inputLabel} date`, value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
           const next = { ...editValue, date: val };
           handleInput(next);
           commitEdit(row, col.field, next, { keepEditing: true });
-        }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ React6.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
+        }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ React6.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: `${inputLabel} time`, value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
           const next = { ...editValue, time: val };
           handleInput(next);
           commitEdit(row, col.field, next, { keepEditing: true });
@@ -1763,7 +1841,8 @@ var DataTable = ({
     }
   };
   const resolvedEditMode = editMode || (columns.some((col) => col.editable) ? "discrete" : null);
-  const useColumnRendering = selectable || !!resolvedEditMode || editingRowId != null || showRowActionsColumn || !renderRow;
+  const useColumnRendering = selectable || !!resolvedEditMode || editingRowId != null || showRowActionsColumn || expandable || !renderRow;
+  const totalColumnCount = columns.length + (selectable ? 1 : 0) + (showExpandColumn ? 1 : 0) + (showRowActionsColumn ? 1 : 0);
   const autoWidths = useMemo(
     () => autoWidth ? computeAutoWidths(columns, data) : {},
     [columns, data, autoWidth]
@@ -1782,6 +1861,7 @@ var DataTable = ({
     const type = col.editType || "text";
     const rowId = row[rowIdField];
     const fieldName = `inline-${rowId}-${col.field}`;
+    const inputLabel = typeof col.label === "string" ? col.label : col.field;
     const cellKey = `${rowId}-${col.field}`;
     const value = row[col.field];
     const validate = col.editValidate;
@@ -1830,13 +1910,13 @@ var DataTable = ({
       case "multiselect":
         return /* @__PURE__ */ React6.createElement(MultiSelect2, { ...extra, name: fieldName, label: "", value: value || [], onChange: fire, options: resolveEditOptions(col, data) });
       case "date":
-        return /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: fieldName, label: "", value, onChange: fire });
+        return /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: fieldName, label: inputLabel, value, onChange: fire });
       case "time":
-        return /* @__PURE__ */ React6.createElement(TimeInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+        return /* @__PURE__ */ React6.createElement(TimeInput, { ...extra, name: fieldName, label: inputLabel, value, onChange: fire });
       case "datetime":
-        return /* @__PURE__ */ React6.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: `${fieldName}-date`, label: "", value: value == null ? void 0 : value.date, onChange: (val) => {
+        return /* @__PURE__ */ React6.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: `${fieldName}-date`, label: `${inputLabel} date`, value: value == null ? void 0 : value.date, onChange: (val) => {
           fire({ ...value, date: val });
-        } }), /* @__PURE__ */ React6.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: value == null ? void 0 : value.time, onChange: (val) => {
+        } }), /* @__PURE__ */ React6.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: `${inputLabel} time`, value: value == null ? void 0 : value.time, onChange: (val) => {
           fire({ ...value, time: val });
         } }));
       case "toggle":
@@ -1990,7 +2070,7 @@ var DataTable = ({
         checked: allVisibleSelected,
         onChange: handleSelectAll
       }
-    )), columns.map((col) => {
+    )), showExpandColumn && /* @__PURE__ */ React6.createElement(TableHeader, { width: "min" }), columns.map((col) => {
       const headerAlign = resolvedEditMode === "inline" && col.editable ? void 0 : col.align;
       return /* @__PURE__ */ React6.createElement(
         TableHeader,
@@ -2004,8 +2084,8 @@ var DataTable = ({
         col.description ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, col.label, "\xA0", /* @__PURE__ */ React6.createElement(Link2, { inline: true, variant: "dark", overlay: /* @__PURE__ */ React6.createElement(Tooltip, null, col.description) }, /* @__PURE__ */ React6.createElement(Icon, { name: "info", screenReaderText: typeof col.description === "string" ? col.description : void 0 }))) : col.label
       );
     }), showRowActionsColumn && /* @__PURE__ */ React6.createElement(TableHeader, { width: "min" }))),
-    /* @__PURE__ */ React6.createElement(TableBody, null, displayRows.map(
-      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ React6.createElement(TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }), columns.map((col, colIdx) => {
+    /* @__PURE__ */ React6.createElement(TableBody, null, renderedRows.map(
+      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ React6.createElement(TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }), showExpandColumn && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }), columns.map((col, colIdx) => {
         var _a, _b, _c;
         return /* @__PURE__ */ React6.createElement(TableCell, { key: col.field, width: getCellWidth(col), align: colIdx === 0 ? void 0 : col.align }, colIdx === 0 ? /* @__PURE__ */ React6.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React6.createElement(
           Icon,
@@ -2022,7 +2102,7 @@ var DataTable = ({
           },
           /* @__PURE__ */ React6.createElement(Text2, { format: { fontWeight: "demibold" } }, item.group.label)
         )) : ((_a = groupBy.aggregations) == null ? void 0 : _a[col.field]) ? groupBy.aggregations[col.field](item.group.rows, item.group.key) : ((_c = (_b = groupBy.groupValues) == null ? void 0 : _b[item.group.key]) == null ? void 0 : _c[col.field]) ?? "");
-      }), showRowActionsColumn && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" })) : useColumnRendering ? /* @__PURE__ */ React6.createElement(TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React6.createElement(
+      }), showRowActionsColumn && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" })) : item.type === "detail" ? /* @__PURE__ */ React6.createElement(TableRow, { key: `detail-${item.row[rowIdField] ?? idx}` }, /* @__PURE__ */ React6.createElement(TableCell, { colSpan: totalColumnCount }, renderExpandedRow(item.row))) : useColumnRendering ? /* @__PURE__ */ React6.createElement(TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React6.createElement(
         Checkbox,
         {
           name: `select-${item.row[rowIdField]}`,
@@ -2030,13 +2110,22 @@ var DataTable = ({
           checked: selectedIds.has(item.row[rowIdField]),
           onChange: (checked) => handleSelectRow(item.row[rowIdField], checked)
         }
+      )), showExpandColumn && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React6.createElement(
+        Icon,
+        {
+          name: expandedRowIds.has(item.row[rowIdField]) ? "upCarat" : "downCarat",
+          onClick: () => toggleRowExpanded(item.row[rowIdField]),
+          screenReaderText: expandedRowIds.has(item.row[rowIdField]) ? "Collapse row" : "Expand row"
+        }
       )), columns.map((col) => {
         const rowId = item.row[rowIdField];
         const isDiscreteEditing = resolvedEditMode === "discrete" && (editingCell == null ? void 0 : editingCell.rowId) === rowId && (editingCell == null ? void 0 : editingCell.field) === col.field;
         const isRowEditing = editingRowId != null && rowId === editingRowId && col.editable;
         const isShowingInput = isDiscreteEditing || isRowEditing || resolvedEditMode === "inline" && col.editable;
         const cellAlign = isShowingInput ? void 0 : col.align;
-        return /* @__PURE__ */ React6.createElement(TableCell, { key: col.field, width: isDiscreteEditing || isRowEditing ? "auto" : getCellWidth(col), align: cellAlign }, renderCellContent(item.row, col));
+        const cellContent = renderCellContent(item.row, col);
+        const wrapInRowToggle = expandable && expandOn === "row" && !col.editable && !isShowingInput;
+        return /* @__PURE__ */ React6.createElement(TableCell, { key: col.field, width: isDiscreteEditing || isRowEditing ? "auto" : getCellWidth(col), align: cellAlign }, wrapInRowToggle ? /* @__PURE__ */ React6.createElement(Link2, { variant: "dark", onClick: () => toggleRowExpanded(rowId) }, cellContent) : cellContent);
       }), showRowActionsColumn && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React6.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, (() => {
         const resolvedRowActions = typeof rowActions === "function" ? rowActions(item.row) : rowActions;
         const actions = Array.isArray(resolvedRowActions) ? resolvedRowActions : [];
@@ -2053,13 +2142,14 @@ var DataTable = ({
         ));
       })()))) : renderRow(item.row)
     )),
-    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ React6.createElement(TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ React6.createElement(TableRow, null, selectable && /* @__PURE__ */ React6.createElement(TableHeader, { width: "min" }), columns.map((col) => {
+    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ React6.createElement(TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ React6.createElement(TableRow, null, selectable && /* @__PURE__ */ React6.createElement(TableHeader, { width: "min" }), showExpandColumn && /* @__PURE__ */ React6.createElement(TableHeader, { width: "min" }), columns.map((col) => {
       const footerDef = col.footer;
       const content = typeof footerDef === "function" ? footerDef(footerData) : footerDef || "";
       return /* @__PURE__ */ React6.createElement(TableHeader, { key: col.field, align: col.align }, content);
     }), showRowActionsColumn && /* @__PURE__ */ React6.createElement(TableHeader, { width: "min" })))
   ));
 };
+DataTable.displayName = "DataTable";
 export {
   DataTable
 };