@orangelogic/design-system 2.138.0 → 2.140.0

package/library/components/video.js

@@ -1,13 +1,13 @@
 import { _ as kd, a as Sa, b as Be, c as Je } from "../chunks/inheritsLoose.BuSn_CvZ.js";
 import { c as ps, a as Bn } from "../chunks/_commonjsHelpers.DQNKXVTB.js";
 import { r as Sb } from "../chunks/___vite-browser-external_commonjs-proxy.C2tf3HsQ.js";
-import { C as Cb } from "../chunks/image.qP6cTWCN.js";
+import { C as Cb } from "../chunks/image.u2nQNoZ8.js";
 import Mb from "./resize-observer.js";
 import { r as Db, R as Pb, a as Rp, b as Lb } from "../chunks/resizable-component.styles.CAfXABBc.js";
 import { c as Rb } from "../chunks/component.styles.CRO4Odto.js";
 import { b as Ib } from "../chunks/browser.BHOCIF_A.js";
 import { c as Ob } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as kb } from "../chunks/i18n.BlLEIqQ0.js";
+import { L as kb } from "../chunks/i18n.DeUAP8n2.js";
 import { w as Ki } from "../chunks/watch.CThbualB.js";
 import { i as Bb, x as Qc } from "../chunks/lit-element.jLBm65_O.js";
 import { n as Ri } from "../chunks/lib-cortex-element.CVMmyPMC.js";

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.138.0",
+  "version": "2.140.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/audio/audio.d.ts

@@ -110,6 +110,11 @@ export default class CxAudio extends ResizableElement {
     private audioSrc;
     /** Whether autoplay is deferred until the in-point seek completes after durationchange. */
     private pendingAutoplay;
+    /**
+     * Resolved filename override (e.g. an asset title fetched by subclasses). Falls back
+     * to `name` in the footer display when empty, without touching the `name` property.
+     */
+    protected resolvedName: string;
     private get clampedInPoint();
     runConnectedCallback(): void;
     disconnectedCallback(): void;

package/library/packages/atoms/src/components/dropdown/dropdown.d.ts

@@ -41,6 +41,11 @@ export default class CxDropdown extends CortexElement {
     private readonly localize;
     private readonly hasSlotController;
     private closeWatcher;
+    /**
+     * Canceller for the most recent pending focusWhenVisible() attempt, so closing the dropdown or
+     * disconnecting cancels it — otherwise it can resolve later and steal focus back into a closed dropdown.
+     */
+    private pendingFocusCancel;
     /**
      * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
      * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
@@ -101,7 +106,7 @@ export default class CxDropdown extends CortexElement {
     private handleDocumentMouseDown;
     private handlePanelSelect;
     handleTriggerClick(): Promise<void>;
-    handleTriggerKeyDown(event: KeyboardEvent): Promise<void>;
+    handleTriggerKeyDown(event: KeyboardEvent): void;
     handleTriggerKeyUp(event: KeyboardEvent): void;
     handleTriggerSlotChange(): void;
     updateAccessibleTrigger(): void;

package/library/packages/atoms/src/components/menu-item/menu-item.d.ts

@@ -111,6 +111,8 @@ export default class CxMenuItem extends CortexElement {
     /** Returns a text label based on the contents of the menu item's default slot. */
     getTextLabel(): string;
     isSubmenu(): boolean;
+    /** Closes this menu item's own submenu, if it has one open. Used to cascade-close nested submenus. */
+    closeSubmenu(): void;
     renderBase(inner: TemplateResult): TemplateResult<1>;
     render(): TemplateResult<1>;
 }

package/library/packages/atoms/src/components/menu-item/submenu-controller.d.ts

@@ -15,7 +15,19 @@ export declare class SubmenuController implements ReactiveController {
     private skidding;
     private readonly hasSlotController;
     private readonly submenuOpenDelay;
+    /**
+     * Upper bound on how long to wait for a freshly opened/loaded menu-item to become genuinely focusable
+     * before giving up and focusing it anyway. Passed to focusWhenVisible, since content can take several
+     * seconds to load on a slow-loading menu.
+     */
+    private readonly focusVisibilityTimeoutMs;
     private parentObserver;
+    private lazyLoadObserver;
+    /**
+     * Canceller for the most recent pending focusWhenVisible() attempt, so closing the dropdown or
+     * disconnecting cancels it — otherwise it can resolve later and steal focus back into a closed dropdown.
+     */
+    private pendingFocusCancel;
     constructor(host: ReactiveControllerHost & CxMenuItem, hasSlotController: HasSlotController);
     get popup(): CxPopup | undefined;
     hostConnected(): void;
@@ -27,6 +39,15 @@ export declare class SubmenuController implements ReactiveController {
     private handleMouseMove;
     private handleMouseOver;
     private handleSubmenuEntry;
+    private setRovingTabIndex;
+    private queryMenuItems;
+    private cancelPendingFocus;
+    /**
+     * Enables the submenu and, once its content finishes loading and the first menu-item appears, focuses it.
+     * focusWhenVisible already tolerates the popup not being visually ready yet, so this only needs to wait for
+     * the item itself to exist.
+     */
+    private focusFirstMenuItemAfterLazyLoad;
     private handleKeyDown;
     private handleClick;
     private handleSubmenuIconClick;
@@ -37,6 +58,13 @@ export declare class SubmenuController implements ReactiveController {
     private setSubmenuState;
     private enableSubmenu;
     disableSubmenu(): void;
+    /**
+     * Closing this submenu hides nested submenus visually (via the parent popup's own hidden state) without
+     * resetting their own `active` flag, since they never receive a property change to react to. Left stale,
+     * reopening a nested submenu later hits the "already active" fast path and skips the re-sync a fresh open
+     * would normally do. Cascade the close so every nested submenu starts clean the next time it's opened.
+     */
+    private disableNestedSubmenus;
     private updateSkidding;
     isExpanded(): boolean;
     renderSubmenu(): import('lit').TemplateResult<1> | null;

package/library/packages/hybrid/book-reader/src/react/constant.d.ts

@@ -41,6 +41,7 @@ export declare const KEYCODE: {
     END: string;
     ENTER: string;
     EQUAL: string;
+    ESCAPE: string;
     HOME: string;
     KEY_F: string;
     MINUS: string;

package/library/packages/hybrid/book-reader/src/react/hooks/useDrawer.d.ts

@@ -1,4 +1,4 @@
-export declare const useDrawer: () => {
+export declare const useDrawer: (rootElement: HTMLElement | null) => {
     closeDrawer: () => void;
     onToggleDrawer: () => void;
     openDrawer: boolean;

package/library/packages/hybrid/table-core/src/table/components/table-toolbar/table-toolbar.d.ts

@@ -24,6 +24,7 @@ import { default as CxTableSavedSearchDropdown } from './table-saved-search-drop
  *
  * @slot label - Optional label content that replaces the label property fallback.
  * @slot pagination - Optional pagination content displayed opposite the label.
+ * @slot add-action - Replaces the default add button. When empty the default add button (controlled by `can-add`) is rendered unchanged.
  * @slot dialog-dynamic-filter - Filter UI shown beside the toolbar actions and hidden while rows are selected. `cx-table` renders a `cx-faceted-filter` here when facets are available.
  *
  * @event {{ value: string }} cx-search - Emitted when the search value is submitted or cleared.

package/library/packages/hybrid/table-core/src/table/table.d.ts

@@ -64,6 +64,7 @@ import { CxTableFooter, CxTableRowActions, CxTableToolbar } from './components';
  * @cssproperty [--table-selected-cell-border-width=1px] - The border width of the active selected cell.
  * @cssproperty [--table-selected-cell-border-style=solid] - The border style of the active selected cell.
  * @cssproperty [--header-pagination-min-height=var(--cx-input-height-medium)] - Reserved height for the toolbar's label/pagination row (`cx-table-toolbar`) when `pagination` is enabled, regardless of `pagination-placement`. Set to `0` to remove the reservation.
+ * @slot add-action - Passed through to `cx-table-toolbar`'s `add-action` slot. Replaces the default add button when provided; when empty the toolbar's default add button (controlled by `can-add`) is rendered unchanged.
  *
  * @event {{ args: any[] }} cx-table.[event_name] - Emitted when the event with such name is emitted on the table.
  * Must register the event listener on the table element to receive the event.
@@ -76,6 +77,7 @@ export default class CxTable extends CortexElement {
     #private;
     static readonly styles: CSSResultGroup;
     private readonly localize;
+    private readonly hasSlotController;
     static readonly dependencies: {
         'cx-button': typeof CxButton;
         'cx-checkbox': typeof CxCheckbox;
@@ -772,6 +774,12 @@ export default class CxTable extends CortexElement {
     dateFilterCompareFormat: DateFilterCompareFormat;
     /** Format of the data at dataUrl. Use 'auto' to detect from URL extension or Content-Type header. */
     dataFormat: TableDataFormat;
+    /**
+     * When true, a `dataUrl` load keeps existing `columns` as-is instead of auto-populating them
+     * from the loaded file's headers. Has no effect when `columns` is empty — auto-detection still
+     * applies so the table has something to render.
+     */
+    preserveColumnsOnLoad: boolean;
     tabulatorInstance: Tabulator | null;
     /**
      * In case the table is re-initialized, we need to re-register the event listeners.
@@ -787,6 +795,8 @@ export default class CxTable extends CortexElement {
     get searchValue(): string;
     get isBottomPlacement(): boolean;
     get showPaginationFooter(): boolean;
+    /** True when either the default add button or a custom `add-action` slot should render. */
+    get hasAddAction(): boolean;
     get showTableToolbar(): string | boolean;
     /** True when all active enabled rows are selected (local) or select-all mode with no exclusions (remote). */
     get selectAllActive(): boolean;
@@ -862,6 +872,12 @@ export default class CxTable extends CortexElement {
     private handleDropdownFilterChange;
     private handleTableGroupByChange;
     private handleSelectAllChange;
+    /**
+     * Controlled by `preserveColumnsOnLoad`: when enabled and the consumer already defined
+     * `columns` (e.g. a custom column with its own `mutator`), a `dataUrl` load keeps them as-is.
+     * Otherwise columns are auto-detected from the loaded data's headers, same as before.
+     */
+    private resolveColumnsAfterLoad;
     private streamCsvData;
     private streamJsonData;
     private streamXmlData;

package/library/packages/hybrid/table-core/src/tabulator-tables/modules/Validate/Validate.d.ts

@@ -29,6 +29,8 @@ export default class Validate extends Module {
      * row/column (detached mocks) key by the cell itself.
      */
     private readonly invalidState;
+    /** Columns declaring `mutateOnValidate` — re-mutated whenever the row's validation state changes. */
+    private readonly mutateOnValidateColumns;
     get invalidCells(): Cell[];
     set invalidCells(cells: Cell[]);
     /**
@@ -60,6 +62,8 @@ export default class Validate extends Module {
     dataProcessed(): void;
     cellIsValid(cell: Cell): boolean;
     cellValidate(cell: Cell): CellValidationFailure[] | boolean;
+    /** Current validation failures for this cell — empty when the cell is valid or unvalidated. */
+    getCellValidationErrors(cell: Cell): CellValidationFailure[];
     columnValidate(column: Column): ICellComponent[] | boolean;
     rowValidate(row: Row): ICellComponent[] | boolean;
     userClearCellValidation(cells?: ICellComponent | ICellComponent[]): void;
@@ -80,6 +84,12 @@ export default class Validate extends Module {
     validate(validators: ValidatorConfig[] | false | undefined, cell: Cell, value: unknown): CellValidationFailure[] | boolean;
     getInvalidCells(): ICellComponent[];
     clearValidation(cell: Cell): void;
+    /**
+     * Forces every `mutateOnValidate` column to re-run its mutator (and re-render) for this row —
+     * called after this row's validation state changes, so a column aggregating row-level errors
+     * (e.g. via `getValidationErrors()` on sibling cells) stays in sync. No-op when no column opts in.
+     */
+    private refreshMutateOnValidateColumns;
     private rowKeyOf;
     private columnKeyOf;
     private getInvalidRecord;

package/library/packages/organisms/src/asset-link-format/asset-link-format.d.ts

@@ -248,6 +248,15 @@ export default class CxAssetLinkFormat extends CortexElement {
             width: number;
         };
     };
+    /**
+     * Returns the last applied rotation value. Without an asset, rotation applies replace
+     * (dedupe) a single Rotate entry, so this reflects the exact committed value — used to
+     * know when the rotation panel has no pending change to apply, and to restore this value
+     * when the panel is closed without applying. With an asset, rotation applies are
+     * cumulative deltas reprocessed by the backend, so there is no single "last applied"
+     * value and this always returns 0.
+     */
+    get lastRotation(): number;
     /**
      * Returns the transformation string for the asset link.
      */

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-crop/asset-link-format-crop.d.ts

@@ -106,10 +106,6 @@ export default class CxAssetLinkFormatCrop extends CortexElement {
      * Whether the apply button is disabled.
      */
     disabledApply: boolean;
-    /**
-     * When true, shows the apply button. When false (default), changes take effect immediately (standalone mode).
-     */
-    canApply: boolean;
     /**
      * The last applied crop settings for each unit.
      * This is used to restore the last applied settings when the component is closed.

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-quality/asset-link-format-quality.d.ts

@@ -48,10 +48,6 @@ export default class CxAssetLinkFormatQuality extends CortexElement {
      * @default false
      */
     loading: boolean;
-    /**
-     * When true, shows the apply button. When false (default), changes take effect immediately (standalone mode).
-     */
-    canApply: boolean;
     scopedValue: number;
     /**
      * A computed property that checks if the current quality value is invalid.

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-resize/asset-link-format-resize.d.ts

@@ -104,10 +104,6 @@ export default class CxAssetLinkFormatResize extends CortexElement {
      * @default false
      */
     loading: boolean;
-    /**
-     * When true, shows the apply button. When false (default), changes take effect immediately (standalone mode).
-     */
-    canApply: boolean;
     /**
      * Whether to keep the aspect ratio when changing width or height.
      * This is used to automatically adjust the other dimension when one is changed.

package/library/packages/organisms/src/asset-link-format/components/asset-link-format-rotation/asset-link-format-rotation.d.ts

@@ -57,9 +57,12 @@ export default class CxAssetLinkFormatRotation extends CortexElement {
      */
     loading: boolean;
     /**
-     * When true, shows the apply button. When false (default), changes take effect immediately (standalone mode).
+     * The last applied rotation value. Used to know when there is no pending change to apply
+     * (instead of assuming 0 always means "unchanged"), and to restore this value when the
+     * details section is closed without applying.
+     * @default 0
      */
-    canApply: boolean;
+    lastAppliedValue: number;
     handleOpenChange(): void;
     private handleRotationChange;
     private handleButtonClick;

package/library/packages/organisms/src/content-builder/components/config-form/config-form.d.ts

@@ -306,6 +306,14 @@ export default class CxConfigForm extends CortexElement {
      */
     isAfterShow: boolean;
     sortedLanguages: string[];
+    /**
+     * Incremented every time the dialog is shown.
+     * Used as a Lit `keyed()` key so the `<form>` element is destroyed and
+     * re-rendered from scratch on each open, instead of reusing the previous
+     * form's DOM and internal control state.
+     * @default 0
+     */
+    formKey: number;
     /**
      * Whether the template is editable.
      * This is used to determine if the user can save the settings as a template.

package/library/packages/types/src/table.d.ts

@@ -152,6 +152,7 @@ export interface ICellComponent {
     getType(): string;
     getField(): string;
     getColumn(): IColumnComponent;
+    getValidationErrors(): CellValidationFailure[];
     setValue(value: any, mutate?: boolean): void;
     restoreOldValue(): void;
     restoreInitialValue(): void;
@@ -2102,6 +2103,13 @@ export interface ColumnDefinition extends ColumnLayout, CellCallbacks, Formatter
     /** only called when data is changed via a user editing a cell. */
     mutatorClipboard?: CustomMutator;
     mutatorClipboardParams?: CustomMutatorParams;
+    /**
+     * When true, this column's mutator is re-run (and the cell re-rendered) whenever any cell's
+     * validation state changes elsewhere in the same row — cell edit, `validateAsync()`/`validate()`,
+     * or `clearCellValidation()`. Use this for a column that aggregates row-level validation errors,
+     * e.g. reading sibling cells' `getValidationErrors()` inside the `mutator`.
+     */
+    mutateOnValidate?: boolean;
     /**
      * Accessors are used to alter data as it is extracted from the table, through commands, the clipboard, or download.
      *

package/library/packages/utils/src/custom-element/focus-when-visible.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Focuses an element once it's actually focusable, not just laid out. An element can have real layout
+ * dimensions well before it's genuinely visible — e.g. a popup item already rendered from a previous open
+ * whose containing popup hasn't flipped its visibility CSS back yet on this reopen (a re-shown popup changes
+ * visibility/transform, not size, so a size-based signal like ResizeObserver never fires for that case), or
+ * an item whose content is still loading. Polls checkVisibility() across animation frames instead of
+ * assuming any single event (e.g. an "opened" event) means the element is truly focusable, with a wall-clock
+ * timeout as a last-resort fallback.
+ *
+ * Returns a `cancel()` function. The caller is responsible for calling it once its own close/teardown
+ * happens — this util has no way to know when the containing menu/dropdown closes, only whether `element`
+ * is still connected, so a closed-but-still-connected item would otherwise get focused later regardless.
+ */
+export declare function focusWhenVisible(element: HTMLElement, timeoutMs?: number): () => void;

package/library/packages/utils/src/custom-element/i18n.d.ts

@@ -1027,6 +1027,7 @@ export interface Translation extends DefaultTranslation {
     url: string;
     urlValidationMessage: string;
     useKeyboardArrowsToNavigateThroughTheCarousel: string;
+    useKeyboardArrowsToNavigateThroughTheDocument: string;
     useKeyboardArrowsToNavigateThroughTheGallery: string;
     used: string;
     userAvatar: string;

package/library/packages/utils/src/index.d.ts

@@ -13,6 +13,7 @@ export * from './custom-element/debounce';
 export * from './custom-element/default-value';
 export * from './custom-element/drag';
 export * from './custom-element/event';
+export * from './custom-element/focus-when-visible';
 export * from './custom-element/form';
 export * from './custom-element/i18n';
 export * from './custom-element/math';