hs-uix 1.7.0 → 2.0.1

package/README.md

@@ -15,11 +15,11 @@ npm install hs-uix
 import { DataTable } from "hs-uix/datatable";
 import { FormBuilder } from "hs-uix/form";
 import { Feed } from "hs-uix/feed";
-import { AutoStatusTag, AutoTag, KeyValueList, SectionHeader } from "hs-uix/common-components";
-import { formatCurrency, formatDate } from "hs-uix/utils";
+import { Icon, AutoStatusTag, AutoTag, CrmLookupSelect, KeyValueList, SectionHeader } from "hs-uix/common-components";
+import { CrmDataTable, CrmKanban, formatCurrency, formatDate } from "hs-uix/utils";
 
 // or import everything from the root
-import { DataTable, FormBuilder, AutoStatusTag, AutoTag } from "hs-uix";
+import { DataTable, FormBuilder, Icon, AutoStatusTag, AutoTag } from "hs-uix";
 ```
 
 Requires `react` >= 18.0.0 and `@hubspot/ui-extensions` >= 0.12.0 as peer dependencies (already present in any HubSpot UI Extensions project).
@@ -32,7 +32,8 @@ Requires `react` >= 18.0.0 and `@hubspot/ui-extensions` >= 0.12.0 as peer depend
 | **FormBuilder** | Declarative, config-driven form with validation, multi-step wizards, and 20+ field types | [Full documentation](https://github.com/05bmckay/hs-uix/blob/main/packages/form/README.md) |
 | **Kanban** | Stage-based board with filters, sort, headline metrics, card action bars, and DataTable-parity card field config | [Full documentation](https://github.com/05bmckay/hs-uix/blob/main/packages/kanban/README.md) |
 | **Feed** | Activity feed / timeline with a standard item shape, date grouping, load-more pagination, and HubSpot-native item regions | [Full documentation](https://github.com/05bmckay/hs-uix/blob/main/packages/feed/README.md) |
-| **Common Components** | Thin visual wrappers over HubSpot primitives — `AutoTag`, `AutoStatusTag`, `AvatarStack`, `SectionHeader`, `KeyValueList`, `StyledText` | [Full documentation](https://github.com/05bmckay/hs-uix/blob/main/src/common-components/README.md) |
+| **Common Components** | Thin visual wrappers over HubSpot primitives — `Icon`, `AutoTag`, `AutoStatusTag`, `AvatarStack`, `CrmLookupSelect`, `SectionHeader`, `KeyValueList`, `StyledText` | [Full documentation](https://github.com/05bmckay/hs-uix/blob/main/src/common-components/README.md) |
+| **CRM data** | `CrmDataTable` / `CrmKanban` — batch-fetching, client-side-paginating CRM table & board, plus the `useCrmSearch*` hooks behind them | [Full documentation](https://github.com/05bmckay/hs-uix/blob/main/src/utils/README.md) |
 | **Utils** | Pure helpers for formatting, options, HubSpot value guards, and tag-variant inference | [Full documentation](https://github.com/05bmckay/hs-uix/blob/main/src/utils/README.md) |
 
 ---
@@ -305,9 +306,11 @@ import { formatCurrency } from "hs-uix/utils";
 
 ## What's inside
 
+- `Icon` — a superset of HubSpot's native `<Icon>`: custom glyphs, any CSS color, and pixel sizes, delegating to the native component whenever the request is natively expressible
 - `AutoStatusTag` — `StatusTag` with variant inferred from the value (`Active` → success, `At risk` → warning, `Failed` → danger, etc.)
 - `AutoTag` — `Tag` with the same inference, for non-status labels
 - `AvatarStack` — overlapping circular avatars as a single SVG (letters, image URLs, or mixed); `+N` overflow chip past `maxVisible`
+- `CrmLookupSelect` — CRM-backed `Select` / `MultiSelect` with live, debounced search
 - `SectionHeader` — title + optional description + actions slot
 - `KeyValueList` — vertical list of label/value rows via `DescriptionList`
 - `StyledText` — SVG-rendered text with rotation, custom color, and pill backgrounds for cases native `<Text>` can't express
@@ -330,6 +333,16 @@ Pass a free-form status string and get a properly-colored tag back. Matching is
 
 Overlapping avatars rendered as a single SVG via `<Image>`. T-shirt sizing (`xs` → `xl`) or a raw pixel number. Letters auto-color from the built-in palette; image URLs get circular-clipped. Extras past `maxVisible` collapse into a neutral `+N` chip.
 
+### Icon
+
+A superset of HubSpot's native `<Icon>`. When the request is natively expressible (a whitelisted `name`, a semantic `color`, an `sm`/`md`/`lg` `size`) it **delegates to the real `<Icon>`** — keeping auto-sizing, `color="inherit"`, and screen-reader semantics. Otherwise it renders a registered SVG glyph as a data-URI `<Image>`, lifting all three native limits: custom/unregistered glyphs (~248 bundled in `ICONS`), any CSS color, and `xs`–`xl` tokens or a pixel size. Add your own glyphs via `svgToIconEntry`, or build a data URI directly with `makeIconDataUri`.
+
+### CrmLookupSelect
+
+![CrmLookupSelect live search](https://raw.githubusercontent.com/05bmckay/hs-uix/main/src/common-components/assets/crmLookUp.gif)
+
+Point it at a CRM `objectType` + `properties` and get a debounced, paginated `Select` / `MultiSelect` that searches live as the user types. Picked options stay valid after results change, `loadingOption` shows during the debounce window, and `noResultsOption` only appears once a query settles — no "no results" flash mid-type.
+
 ### SectionHeader & KeyValueList
 
 ![KeyValueList](https://raw.githubusercontent.com/05bmckay/hs-uix/main/src/common-components/assets/key-value-list.png)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hs-uix",
-  "version": "1.7.0",
+  "version": "2.0.1",
   "description": "Production-ready UI components for HubSpot UI Extensions — DataTable, FormBuilder, and more",
   "license": "MIT",
   "main": "./dist/index.js",

package/packages/feed/README.md

@@ -89,6 +89,8 @@ Feed works out of the box with these item keys:
 | `type` | Activity type label, rendered in a `StatusTag` by default |
 | `typeLabel` | Optional display label when `type` is a machine value |
 | `typeVariant` | `StatusTag` variant: `default`, `info`, `success`, `warning`, `danger` |
+| `status` / `statusLabel` / `outcome` / `severity` | Optional secondary status text rendered in its own `StatusTag` (e.g. a call outcome or task severity). `statusLabel` wins when set, then `status`, `outcome`, `severity` |
+| `statusVariant` / `outcomeVariant` / `severityVariant` | `StatusTag` variant for that status text (`default`, `info`, `success`, `warning`, `danger`); defaults to `default` |
 | `iconName` / `icon` | Activity/entity icon. Use verified HubSpot icon names (`email`, `calling`, `appointment`, `comment`, `description`, etc.) |
 | `title` / `subject` | Main item heading |
 | `href` | Optional link wrapping the title |
@@ -209,7 +211,7 @@ Use `serverSide` when the parent/API owns filtering, sorting, searching, and pag
 ```
 
 - `container`: `"tile"` (default), `"none"`, or `"card"` (`card` is a Tile-backed alias)
-- `itemContainer`: `"none"` (default), `"tile"`, or `"card"` (`card` is a Tile-backed alias)
+- `itemContainer`: `"tile"` (default), `"none"`, or `"card"` (`card` is a Tile-backed alias)
 - `showDividers`: dividers between items when `itemContainer="none"`
 
 ## Render escape hatches

package/packages/form/README.md

@@ -943,7 +943,21 @@ Add/remove rows for dynamic lists:
   min: 1, max: 5 }
 ```
 
-Repeater sub-fields now validate on blur/onChange like top-level fields. Optional row reordering is available via `repeaterProps.reorderable` (with customizable move controls).
+Repeater sub-fields now validate on blur/onChange like top-level fields. Pass `repeaterProps` on the repeater field to customize the add/remove/reorder controls:
+
+| `repeaterProps` key | Type | Default | Description |
+|---|---|---|---|
+| `addLabel` | `string` | repeater add label | Text for the add-row control |
+| `removeLabel` | `string` | repeater remove label | Text for the per-row remove control |
+| `renderAdd` | `({ onClick, count }) => ReactNode` | — | Replace the default add control |
+| `renderRemove` | `({ index, onClick }) => ReactNode` | — | Replace the default per-row remove control |
+| `reorderable` | `boolean` | `false` | Enable up/down row reordering controls |
+| `moveUpLabel` | `string` | `"Up"` | Label for the move-up control |
+| `moveDownLabel` | `string` | `"Down"` | Label for the move-down control |
+| `renderMoveUp` | `({ index, disabled, onClick }) => ReactNode` | — | Replace the move-up control. `disabled` is `true` on the first row |
+| `renderMoveDown` | `({ index, disabled, onClick }) => ReactNode` | — | Replace the move-down control. `disabled` is `true` on the last row |
+
+When `reorderable` is set, both move controls always render so rows stay column-aligned — the first row's "up" and the last row's "down" come through disabled (and the `disabled` flag is passed to `renderMoveUp` / `renderMoveDown`).
 
 ## Field Groups (Structured)
 

package/packages/kanban/README.md

@@ -550,11 +550,11 @@ If your data comes from an API or you have too many records to load up-front, dr
 | `showSearch` | boolean | `true` (when `searchFields` set) | Show/hide the search input |
 | `searchFields` | string[] | `[]` | Fields to search across. Search UI only renders when non-empty. |
 | `searchPlaceholder` | string | `"Search..."` | Placeholder for the search input |
-| `searchDebounce` | number | `0` | Milliseconds to debounce `onSearchChange` callback |
+| `searchDebounce` | number | `250` | Milliseconds to debounce `onSearchChange` callback. Pass `0` for synchronous search |
 | `fuzzySearch` | boolean | `false` | Enable fuzzy matching via Fuse.js |
 | `fuzzyOptions` | object | — | Custom Fuse.js options (threshold, distance, keys) |
 | `filters` | `KanbanFilterConfig[]` | `[]` | Filter configurations (see below) |
-| `filterInlineLimit` | number | `2` | Max filters shown inline before overflow into a "Filters" button |
+| `filterInlineLimit` | number | `4` | Max filters shown inline before overflow into a "Filters" button |
 | `showFilterBadges` | boolean | `true` | Show active filter chips |
 | `showClearFiltersButton` | boolean | `showFilterBadges` | Show "Clear all" reset button. Defaults to the value of `showFilterBadges`, so hiding the chips hides the reset button too unless set explicitly |
 | `sortOptions` | `KanbanSortOption[]` | — | Sort options (single board-wide sort) |
@@ -562,7 +562,7 @@ If your data comes from an API or you have too many records to load up-front, dr
 | `sort` | string | — | Controlled sort option `value` |
 | `onSortChange` | `(value) => void` | — | Sort callback (controlled) |
 | `columnFooter` | `(rows, stage) => ReactNode` | — | Per-stage footer (aggregate row). Overridden by `stage.footer` when set. |
-| `columnWidth` | number | `280` | Min per-column width in px (AutoGrid `columnWidth`). Clamped to 280px. |
+| `columnWidth` | number | `350` | Min per-column width in px (AutoGrid `columnWidth`). Clamped to a 350px minimum. |
 | `collapsedStages` | string[] | — | Controlled list of collapsed stage values |
 | `onCollapsedStagesChange` | `(stages) => void` | — | Controlled-collapse callback |
 | `metrics` | `KanbanMetricItem[] \| ReactNode` | — | Headline metrics panel. Array → `<StatisticsItem>` shorthand; ReactNode → full custom render. |

package/packages/kanban/index.d.ts

@@ -303,14 +303,14 @@ export interface KanbanProps<Row = Record<string, unknown>, Id = string | number
   /** Search is only active, and the search input only renders, when this list is non-empty. */
   searchFields?: string[];
   searchPlaceholder?: string;
-  /** ms to debounce onSearchChange callback. 0 = no debounce. */
+  /** ms to debounce onSearchChange callback. Default 250; 0 = no debounce. */
   searchDebounce?: number;
   /** Enable fuzzy matching via Fuse.js */
   fuzzySearch?: boolean;
   /** Custom Fuse.js options (threshold, distance, keys, etc.) */
   fuzzyOptions?: Record<string, unknown>;
   filters?: KanbanFilterConfig<Row>[];
-  /** Number of filters shown inline before the "Filters" overflow button. Default 2. */
+  /** Number of filters shown inline before the "Filters" overflow button. Default 4. */
   filterInlineLimit?: number;
   /** Show active filter chips with individual clear affordances. Default true. */
   showFilterBadges?: boolean;
@@ -327,7 +327,7 @@ export interface KanbanProps<Row = Record<string, unknown>, Id = string | number
   /**
    * Pixel width for each column, passed to AutoGrid's columnWidth. Columns
    * share available horizontal space equally with this value as the minimum.
-   * Clamped to 280px minimum regardless of the value passed. Default 280px.
+   * Clamped to 350px minimum regardless of the value passed. Default 350px.
    */
   columnWidth?: number;
   collapsedStages?: string[];