udp-stencil-component-library 26.3.0-beta.2 → 26.3.0-beta.21

package/dist/types/components/charts/udp-bar-chart/udp-bar-chart.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated This component is deprecated and will be removed in a future version.
+ * Use `udp-ag-bar-chart` instead.
+ */
 export declare class UdpBarChart {
     el: HTMLElement;
     data: {

package/dist/types/components/charts/udp-charts-example.d.ts

@@ -1,5 +1,5 @@
 /**
- * component used to render examples of all the charts. Mostly used for dev purposes
+ * Component used to render examples of all the charts. Mostly used for dev purposes.
  */
 export declare class UdpChartsExample {
     render(): any;

package/dist/types/components/charts/udp-distribution-chart/udp-distribution-chart.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated This component is deprecated and will be removed in a future version.
+ * Use `udp-ag-bar-chart` instead.
+ */
 export declare class UdpDistributionChart {
     el: HTMLElement;
     data: any[];

package/dist/types/components/charts/udp-donut-chart/udp-donut-chart.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated This component is deprecated and will be removed in a future version.
+ * Use `udp-ag-donut-chart` (or `udp-ag-pie-chart`) instead.
+ */
 export declare class UdpDonutChart {
     el: HTMLElement;
     data: {

package/dist/types/components/charts/udp-line-chart/udp-line-chart.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated This component is deprecated and will be removed in a future version.
+ * Use `udp-ag-line-chart` instead.
+ */
 export declare class UdpLineChart {
     el: HTMLElement;
     data: {

package/dist/types/components/charts/udp-sankey-chart/udp-sankey-chart.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @deprecated This component is deprecated and will be removed in a future version.
+ * It is amcharts-based; there is no `ag-charts-community` sankey equivalent, so
+ * no direct replacement exists yet. Avoid new usage.
+ */
 export declare class UdpSankeyChart {
     el: HTMLElement;
     data: {

package/dist/types/components/charts/udp-xy-chart/udp-xy-chart.d.ts

@@ -1,4 +1,9 @@
 import { XYSeriesTypes } from '../chartUtils';
+/**
+ * @deprecated This component is deprecated and will be removed in a future version.
+ * Use the `udp-ag-*` chart components instead — `udp-ag-line-chart`,
+ * `udp-ag-bar-chart`, or `udp-ag-scatter-chart` depending on the series type.
+ */
 export declare class UdpXyChart {
     el: HTMLElement;
     data: {

package/dist/types/components/charts/udp-xy-multi-series-chart/udp-xy-multi-series-chart.d.ts

@@ -1,4 +1,8 @@
 import { XYMultiSeriesSeriesProps, XYMultiSeriesXAxisProps, XYMultiSeriesYAxisProps, XYSeriesTypes } from '../chartUtils';
+/**
+ * @deprecated This component is deprecated and will be removed in a future version.
+ * Use `udp-ag-line-chart` (or `udp-ag-combo-chart` for mixed series) instead.
+ */
 export declare class UdpXyMultiSeriesChart {
     el: HTMLElement;
     data: {

package/dist/types/components/fluent-ui/autocomplete/udp-autocomplete.d.ts

@@ -129,6 +129,26 @@ export declare class UdpAutocomplete {
      * @note Not supported in combination with `multiple`.
      */
     freeForm: boolean;
+    /**
+     * Controls the shape of the `valueChanged` payload (see that event's docs):
+     * - `'option'` (default): emit the matched option **object** from the source
+     *   list (legacy behavior). Convenient when the consumer wants the full option
+     *   (label, metadata) on change.
+     * - `'value'`: emit the scalar resolved via `optionValue` (a `string`, or
+     *   `string[]` in `multiple` mode). This is what form bindings want — the
+     *   stored value is the option's id, not the object. Set this when wiring the
+     *   autocomplete into a form (Final Form / react-hook-form / `udp-field`).
+     *   Feed the emitted scalar(s) back into `value`; label resolution still works
+     *   because every internal read goes through `optionValue`. With `freeForm`,
+     *   an unmatched typed entry emits its raw string in either mode.
+     *
+     * @remarks Default is `'option'` to preserve existing behavior. A future
+     * major version is expected to flip the default to `'value'`, since emitting
+     * the scalar matches the convention of most component libraries (MUI, Ant
+     * Design, Vuetify, Element) and avoids the "[object Object]" / stale-option
+     * class of bug in form contexts.
+     */
+    valueAs: 'option' | 'value';
     internalLoading: boolean;
     filterText: string;
     fetchedOptions: any[];
@@ -138,13 +158,16 @@ export declare class UdpAutocomplete {
     /**
      * Fires when the selection changes (option chosen, chip removed, or clear).
      * The payload mirrors the items in `options`/fetched results:
-     * - Single-select: the matched option (the original object from the source list,
-     *   or the primitive value when options are primitives). With `freeForm`, an
-     *   unmatched typed entry emits the raw string. Emits `''` when cleared or the
-     *   input is backspaced empty.
-     * - Multi-select (`multiple`): an array of the matched options (objects or
-     *   primitives), including any currently-selected items hidden by the filter.
-     *   Emits `[]` when cleared.
+     * The payload shape is governed by the `valueAs` prop:
+     * - `valueAs="option"` (default): the matched option (the original object from
+     *   the source list, or the primitive value when options are primitives) in
+     *   single-select; an array of those in `multiple` mode (including any
+     *   currently-selected items hidden by the filter).
+     * - `valueAs="value"`: the scalar value resolved via `optionValue` — a `string`
+     *   in single-select, `string[]` in `multiple` mode.
+     * With `freeForm`, an unmatched typed entry emits its raw string in either
+     * mode. Clearing (or backspacing the input empty) emits `''` (single) or `[]`
+     * (multi).
      */
     valueChanged: EventEmitter<any>;
     /** Fires when the input loses focus. Payload is void. */
@@ -168,6 +191,15 @@ export declare class UdpAutocomplete {
     private resolveProp;
     private getOptionValue;
     private findOptionByValue;
+    /**
+     * Maps a single internal selection entry (option object or primitive) to the
+     * shape `valueChanged` should emit, per `valueAs`. In `'value'` mode this
+     * resolves the scalar via `optionValue`; in `'option'` mode it passes the
+     * entry through unchanged. Callers map this over the array in multi-select.
+     * Internal `value` round-tripping keeps working in either mode because every
+     * read goes through `getOptionValue` (primitives resolve to themselves).
+     */
+    private toEmitValue;
     private getDisplayOptions;
     private getOptionBadges;
     private getOptionGroup;

package/dist/types/components/fluent-ui/date-input/udp-date-input.d.ts

@@ -61,9 +61,22 @@ export declare class UdpDateInput {
      * - 'MM/DD/YYYY' - US format
      * - 'DD/MM/YYYY' - UK/Europe/Canada format
      * - 'YYYY/MM/DD' - ISO/China/Japan format
-     * Defaults to browser locale detection if not specified.
+     *
+     * @deprecated Use `dateFormat` instead. `format` collides with the reserved
+     * `format` prop of form libraries (e.g. react-final-form's `<Field>`), which
+     * treats it as a value-formatter function. Retained as an alias; `dateFormat`
+     * takes precedence when both are set.
      */
     format: DateFormat;
+    /**
+     * Date display format based on locale/region. Preferred over `format`.
+     * - 'MM/DD/YYYY' - US format
+     * - 'DD/MM/YYYY' - UK/Europe/Canada format
+     * - 'YYYY/MM/DD' - ISO/China/Japan format
+     */
+    dateFormat: DateFormat;
+    /** Resolved display format. `dateFormat` wins over the deprecated `format`. */
+    private get resolvedFormat();
     /**
      * The minimum date that can be selected.
      */
@@ -99,6 +112,7 @@ export declare class UdpDateInput {
     /** Fires when the text input gains focus. Payload is void. */
     inputFocus: EventEmitter<void>;
     onValueChange(newValue: string): void;
+    onFormatChange(): void;
     componentWillLoad(): void;
     /**
      * Set initial value. Fluent has a bug where a value set instantly won't doesn't get set

package/dist/types/components/fluent-ui/date-time-input/udp-date-time-input.d.ts

@@ -23,8 +23,17 @@ export declare class UdpDateTimeInput {
     controlSize: 'small' | 'medium' | 'large';
     /** When true, the date and time inputs stack vertically instead of sitting side-by-side. */
     stacked: boolean;
-    /** Date display format. */
+    /**
+     * Date display format.
+     *
+     * @deprecated Use `dateFormat` instead. `format` collides with the reserved
+     * `format` prop of form libraries (e.g. react-final-form's `<Field>`), which
+     * treats it as a value-formatter function. Retained as an alias; `dateFormat`
+     * takes precedence when both are set.
+     */
     format: DateFormat;
+    /** Date display format. Preferred over `format`. */
+    dateFormat: DateFormat;
     /** The minimum date that can be selected. */
     minDate: string;
     /** The maximum date that can be selected. */

package/dist/types/components/fluent-ui/dropdown/udp-fluent-dropdown.d.ts

@@ -103,13 +103,32 @@ export declare class UdpFluentDropdown {
      * Whether the dropdown shows a clear button when a value is selected.
      */
     clearable: boolean;
+    /**
+     * Controls the shape of the `valueChanged` payload (see that event's docs):
+     * - `'option'` (default): emit the matched option **object** from `options`
+     *   (legacy behavior). Convenient when the consumer wants the full option
+     *   (label, metadata) on change.
+     * - `'value'`: emit the scalar resolved via `optionValue` (a `string`, or
+     *   `string[]` in `multiple` mode). This is what form bindings want — the
+     *   stored value is the option's id, not the object. Set this when wiring the
+     *   dropdown into a form (Final Form / react-hook-form / `udp-field`).
+     *
+     * @remarks Default is `'option'` to preserve existing behavior. A future
+     * major version is expected to flip the default to `'value'`, since emitting
+     * the scalar matches the convention of most component libraries (MUI, Ant
+     * Design, Vuetify, Element) and avoids the "[object Object]" / stale-option
+     * class of bug in form contexts.
+     */
+    valueAs: 'option' | 'value';
     /**
      * Fires when the selection changes (option chosen, multi-select toggle, or clear).
-     * The payload mirrors the items in `options`:
-     * - Single-select: the matched option (the original object from `options`, or the
-     *   primitive value when `options` are primitives). Emits `''` when cleared.
-     * - Multi-select (`multiple`): an array of the matched options (objects or primitives).
-     *   Emits `[]` when cleared/empty.
+     * The payload shape is governed by the `valueAs` prop:
+     * - `valueAs="option"` (default): the matched option (the original object from
+     *   `options`, or the primitive value when `options` are primitives) in
+     *   single-select; an array of those in `multiple` mode.
+     * - `valueAs="value"`: the scalar value resolved via `optionValue` — a `string`
+     *   in single-select, `string[]` in `multiple` mode.
+     * Either way, clearing emits `''` (single) or `[]` (multi).
      */
     valueChanged: EventEmitter<any>;
     /** Fires when the dropdown loses focus. Payload is void. */
@@ -141,6 +160,15 @@ export declare class UdpFluentDropdown {
     private typeaheadTimeout;
     private getOptionValue;
     private findOptionByValue;
+    /**
+     * Maps a single internal selection entry (option object or primitive) to the
+     * shape `valueChanged` should emit, per `valueAs`. In `'value'` mode this
+     * resolves the scalar via `optionValue`; in `'option'` mode it passes the
+     * entry through unchanged. Callers map this over the array in multi-select.
+     * Internal state (`selectionForOverlay`) keeps the option objects regardless,
+     * so the selected-value overlay renders the same in both modes.
+     */
+    private toEmitValue;
     private getValuesAsArray;
     private getOptionBadges;
     private getOptionGroup;

package/dist/types/components/fluent-ui/number-input/udp-fluent-number-input.d.ts

@@ -0,0 +1,66 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import '@fluentui/web-components/text-input.js';
+import '@fluentui/web-components/field.js';
+import '@fluentui/web-components/label.js';
+/**
+ * Number input component with min/max/step constraints and decimal capping.
+ *
+ * @slot start - Content to be displayed at the start of the input.
+ * @slot end - Content to be displayed at the end of the input.
+ */
+export declare class UdpFluentNumberInput {
+    private internalInput;
+    private liveValue;
+    /** The current value of the input. */
+    value: string;
+    /** The name of the input. */
+    name: string;
+    /** The label text displayed above the input. */
+    label: string;
+    /** Helper text displayed below the input. */
+    hint: string;
+    /** Helper text displayed on click of info icon in label. */
+    popupHint: string;
+    /** Error message text displayed below the input when validation fails. */
+    error: string;
+    /** Whether to include error padding below the input. */
+    includeErrorPadding: boolean;
+    /** Placeholder text displayed when the input is empty. */
+    placeholder: string;
+    /** Whether the input is required for form submission. */
+    required: boolean;
+    /** Whether the input is disabled and cannot be interacted with. */
+    disabled: boolean;
+    /** Whether the input is read-only. */
+    readonly: boolean;
+    /** Whether the input should automatically focus when the page loads. */
+    autofocus: boolean;
+    /** Hints to the browser about what kind of data is expected. Defaults to "off" to suppress the browser's recent-values dropdown. */
+    autocomplete: string;
+    /** The visual appearance of the input. */
+    appearance: 'outline' | 'underline' | 'filled-lighter' | 'filled-darker';
+    /** The size of the input control. */
+    controlSize: 'small' | 'medium' | 'large';
+    /** Minimum allowed value. Enforced by the browser via native input constraints. */
+    min: string;
+    /** Maximum allowed value. Enforced by the browser via native input constraints. */
+    max: string;
+    /** Step increment for the spinner (e.g. "0.5", "0.01", "1"). */
+    step: string;
+    /** Maximum number of decimal places. On blur, the value is rounded to this precision. */
+    decimals: number;
+    /** Fires on each input change (every keystroke). Emits the new value as a `string`. */
+    valueChanged: EventEmitter<string>;
+    /** Fires when the input loses focus. Payload is `void`. */
+    inputBlur: EventEmitter<void>;
+    /** Fires when the input gains focus. Payload is `void`. */
+    inputFocus: EventEmitter<void>;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    private applyNumberAttrs;
+    /** Selects the text in the input. */
+    select(): Promise<void>;
+    private handleInput;
+    private handleBlur;
+    render(): any;
+}

package/dist/types/components/fluent-ui/tree/udp-tree.d.ts

@@ -43,14 +43,92 @@ export declare class UdpTree {
      * Path to the aside slot property, or a function to generate the aside slot content.
      */
     itemAside?: string | ((item: any) => any);
+    /**
+     * Path to an icon name (or a function returning one) rendered in the row's
+     * start slot as a `<udp-fluent-icon>`. Use for type/category icons. A function
+     * may also return `{ name, color?, size? }` for per-row control. Mutually
+     * exclusive with `itemAvatar` (avatar wins when both resolve). Rendered inside
+     * this component's shadow, so the row chrome in udp-tree.css styles it — unlike
+     * a consumer-slotted icon, which a shadow stylesheet can't reach via `::part`.
+     */
+    itemIcon?: string | ((item: any) => any);
+    /**
+     * Path to an avatar descriptor (or a function returning one) rendered in the
+     * row's start slot as a `<udp-fluent-avatar>`:
+     * `{ name?, initials?, src?, color?, shape?, size?, iconName? }`. Takes
+     * precedence over `itemIcon` when both resolve.
+     */
+    itemAvatar?: string | ((item: any) => any);
+    /**
+     * Path to a badge value (or a function returning one) rendered in the row's
+     * end slot as a `<udp-fluent-badge>`. A scalar becomes the badge content; an
+     * object `{ content?, color?, appearance?, shape?, size?, startIconName?,
+     * endIconName? }` controls its appearance.
+     */
+    itemBadge?: string | ((item: any) => any);
+    /**
+     * Path to a boolean "expanded" property, or a function returning whether the
+     * item should render expanded. Only meaningful for items that have children.
+     * Useful for trees that should render fully (or partly) expanded on load.
+     */
+    itemExpanded?: string | ((item: any) => boolean);
+    /**
+     * Id of the item that should render as selected. Compared against each item's
+     * resolved id (`itemId`). Drives the selected appearance from the outside so
+     * the consumer owns "which row is active" as a single source of truth.
+     */
+    selectedId?: string | number;
+    /**
+     * How a row click behaves:
+     *  - `'tree'` (default): native Fluent tree behavior — clicking a row toggles
+     *    its expansion and selects it; `itemClick` fires for the directly-clicked
+     *    row. Selection is managed internally by Fluent.
+     *  - `'button'`: rows act as buttons. A click anywhere on the row (icon, text,
+     *    aside) emits `itemClick` exactly once and stops there — no built-in
+     *    expand toggle and no internal selection. Pair with `selectedId` (for the
+     *    highlight) and `itemExpanded` (to control which parents are open).
+     */
+    interaction: 'tree' | 'button';
+    /**
+     * When `true`, parent rows get a disclosure chevron that toggles their
+     * expansion, while the rest of the row keeps its normal click behavior.
+     * Designed to pair with `interaction="button"`: clicking a row body still
+     * emits `itemClick` (open details), but clicking the chevron only
+     * expands/collapses that group — it neither selects the row nor emits
+     * `itemClick`. Initial open/closed state is seeded from `itemExpanded`
+     * (so a tree can render fully expanded on load); the user's subsequent
+     * collapse/expand choices are owned internally and persist by id across
+     * re-renders. No effect in `interaction="tree"` mode, where Fluent's native
+     * row-click already toggles expansion.
+     */
+    collapsible: boolean;
+    /**
+     * Per-id expansion overrides applied on top of the `itemExpanded` seed.
+     * Empty until the user clicks a chevron; an entry means "the user set this
+     * row's expansion explicitly." Keyed by resolved item id so the choice
+     * survives `treeItems` edits (e.g. the builder re-flattening the form).
+     */
+    private expandedOverrides;
     /**
      * Event emitted when a tree item is clicked
      */
     itemClick: EventEmitter<any>;
+    /** True when the click landed on a row's disclosure chevron `::part`. */
+    private isChevronClick;
+    /** Flip the stored expansion for one row, seeding from its initial state. */
+    private toggleExpanded;
     /**
      * Flexible resolver to get data from the item
      */
     private resolveProp;
+    /** Icon size that pairs with the tree's row size. */
+    private iconSizeForTree;
+    /** Start-slot icon from `itemIcon` (string name or `{ name, color?, size? }`). */
+    private renderItemIcon;
+    /** Start-slot avatar from `itemAvatar`. Wins over `itemIcon` when both resolve. */
+    private renderItemAvatar;
+    /** End-slot badge from `itemBadge` (scalar content, or a descriptor object). */
+    private renderItemBadge;
     /**
      * Recursively renders tree items and their children
      */

package/dist/types/components/grid/new-grid/gridFunctions/bulkActions.d.ts

@@ -8,6 +8,25 @@ export interface BulkActionItem {
     buttonIntent?: ButtonIntent;
     loading?: boolean;
 }
+/**
+ * Describes the active selection passed to bulk-action callbacks.
+ *
+ * For the server-side row model the header checkbox selects *all matching rows*
+ * (every page), represented as a rule rather than a row list. In that case
+ * `selectAll` is true and `selectedRows` only contains the rows currently
+ * loaded in the client — consumers acting on the full selection must use this
+ * state (selectAll + toggledNodes) and apply it against the active filter
+ * server-side rather than relying on the row array.
+ */
+export interface BulkActionSelectionState {
+    rowModelType: string;
+    /** SSRM only: true when "select all matching rows" is active. */
+    selectAll: boolean;
+    /** SSRM only: row IDs that deviate from `selectAll` (deselected when selectAll, selected otherwise). */
+    toggledNodes: string[];
+    /** Total rows the selection resolves to (across all pages for SSRM select-all). */
+    selectedCount: number;
+}
 export declare class BulkActions implements GridFunction {
     private api;
     private bulkActions;
@@ -16,6 +35,7 @@ export declare class BulkActions implements GridFunction {
     private fetchedData;
     private refresh;
     private gridId;
+    private selectionState?;
     private actionProviderCallback;
     private serverActionData;
     private localFunctions;

package/dist/types/components/layout/udp-sidebar-layout/udp-sidebar-layout.d.ts

@@ -0,0 +1,54 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * Two-pane page layout: a collapsible sidebar beside a main content area. The
+ * sidebar is meant to hold a tree, list, or outline (drop one into the
+ * `sidebar` slot); the page body goes in the default slot.
+ *
+ * Collapse is self-contained — the sidebar header carries a collapse button and,
+ * when collapsed, the sidebar shrinks to a slim rail with an expand button, so no
+ * external control is needed. Set `stickyOffset` to pin the sidebar below a fixed
+ * page header so it scrolls independently while the main column flows with the page.
+ *
+ * @slot sidebar - Sidebar content (tree / list / outline).
+ * @slot sidebar-header - Optional custom sidebar header. Replaces the `sidebarTitle` text; the collapse button is still added.
+ * @slot - Main content (the page body).
+ */
+export declare class UdpSidebarLayout {
+    el: HTMLElement;
+    /**
+     * Whether the sidebar is expanded (`true`) or collapsed to a rail (`false`).
+     * Mutable so the built-in toggle works; consumers may bind/read it and listen
+     * to `openChange`.
+     */
+    open: boolean;
+    /** Title shown in the sidebar header. Ignored when a `sidebar-header` slot is provided. */
+    sidebarTitle?: string;
+    /** Expanded sidebar width — any CSS length. */
+    sidebarWidth: string;
+    /** Which side the sidebar sits on. */
+    sidebarPosition: 'start' | 'end';
+    /**
+     * When set, the sidebar (and its collapsed rail) is `position: sticky`, pinned
+     * this far from the top of the scroll container, with a matching `max-height`
+     * so it scrolls on its own. Any CSS length — e.g. `"64px"` or
+     * `"var(--app-header-h)"`. Omit for a sidebar that flows with the page.
+     * Ignored when `fill` is set.
+     */
+    stickyOffset?: string;
+    /**
+     * Fill the host's container top-to-bottom: the layout becomes `height: 100%`
+     * and the sidebar + main column each scroll independently inside it. Use when
+     * the layout is placed in a height-bearing region (e.g. a flex/grid cell or a
+     * fixed-height scroll area) and you want the sidebar to always span the full
+     * height regardless of content. Takes precedence over `stickyOffset`.
+     */
+    fill: boolean;
+    /** When false, the collapse affordance is hidden and the sidebar stays open. */
+    collapsible: boolean;
+    /** Emitted when the sidebar is expanded/collapsed. `detail` is the new `open` value. */
+    openChange: EventEmitter<boolean>;
+    /** Toggle the sidebar open/collapsed. */
+    toggle(): Promise<void>;
+    private setOpen;
+    render(): any;
+}