@orangelogic/design-system 2.79.0 → 2.81.0

package/library/package.json

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

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

@@ -400,12 +400,6 @@ export default class CxTable extends CortexElement {
      * to be inserted in a different column you can pass the field name of the column to the dataTreeElementColumn setup option
      */
     dataTreeElementColumn: boolean | string | undefined;
-    /**
-     * The branch element is the right angled line running from parent to child to indicate its position in the tree.
-     * If false, the branch element will not be displayed.
-     * Alternatively, can provide a HTML string to use as the branch element.
-     */
-    dataTreeBranchElement: boolean | string | undefined;
     /**
      * The amount of pixels to indent the child rows.
      */
@@ -717,6 +711,8 @@ export default class CxTable extends CortexElement {
     handleGroupValuesChange(): void;
     handleGroupLoadMoreMetaChange(): void;
     handlePaginationSizeChange(): void;
+    handlePaginationChange(): Promise<void>;
+    private attachPaginatorToToolbar;
     handlePaginationInitialPageChange(): void;
     handleLoadingChange(): void;
     setLoading(value: boolean): void;

package/library/packages/events/src/cx-unauthorized.d.ts

@@ -0,0 +1,10 @@
+export type CxUnauthorizedEvent = CustomEvent<CxUnauthorizedDetail>;
+export type CxUnauthorizedDetail = {
+    status: number;
+    url: string;
+};
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-unauthorized': CxUnauthorizedEvent;
+    }
+}

package/library/packages/events/src/events.d.ts

@@ -138,6 +138,7 @@ export * from './cx-time-based-change';
 export * from './cx-time-update';
 export * from './cx-typeface-change';
 export * from './cx-typeface-download';
+export * from './cx-unauthorized';
 export * from './cx-unmark-favorite';
 export * from './cx-video-click';
 export * from './cx-video-editor-track-canvas-ready';

package/library/packages/molecules/src/folder-select/components/folder-select-tree/folder-select-tree.d.ts

@@ -22,6 +22,7 @@ export default class CxFolderSelectTree extends CortexElement {
     baseUrl: string;
     extraFolderId: string;
     extraFolderTitle: string;
+    extraFolderIcon: string;
     seeThru: boolean;
     extraFolderData: Folder | null;
     api?: FolderSelectApi;

package/library/packages/molecules/src/folder-select/components/folder-select-tree-item/folder-select-tree-item.d.ts

@@ -34,6 +34,8 @@ export default class CxFolderSelectTreeItem extends CortexElement {
     api?: FolderSelectApi;
     excludeVirtualFolders: boolean;
     url: string;
+    /** Overrides the default `folder` icon name when set. */
+    icon: string;
     data: Folder[] | null;
     hasMore: boolean;
     loading: boolean;

package/library/packages/molecules/src/folder-select/folder-select.d.ts

@@ -34,6 +34,7 @@ export default class CxFolderSelect extends CortexElement {
     excludeVirtualFolders: boolean;
     extraFolderId: string;
     extraFolderTitle: string;
+    extraFolderIcon: string;
     firstFetchCallback: ((data: Folder[]) => void) | null;
     searchTerm: string;
     constructor();

package/library/packages/molecules/src/storybook/storybook.d.ts

@@ -1,57 +1,93 @@
 import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
 import { default as CxCard } from '../../../atoms/src/components/card/card.ts';
 import { default as CxCheckbox } from '../../../atoms/src/components/checkbox/checkbox.ts';
-import { default as CxGrid } from '../../../atoms/src/components/grid/grid.ts';
-import { default as CxGridItem } from '../../../atoms/src/components/grid-item/grid-item.ts';
 import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
 import { default as CxInput } from '../../../atoms/src/components/input/input.ts';
 import { default as CxMarkdown } from '../../../atoms/src/components/markdown/markdown.ts';
 import { default as CxMutationObserver } from '../../../atoms/src/components/mutation-observer/mutation-observer.ts';
+import { default as CxOption } from '../../../atoms/src/components/option/option.ts';
 import { default as CxSelect } from '../../../atoms/src/components/select/select.ts';
-import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
+import { default as CxTextarea } from '../../../atoms/src/components/textarea/textarea.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { CxMutationEvent } from '../../../events/src/events.ts';
+import { StorybookPropConfig } from '../../../types/src/storybook';
 import { CSSResultGroup, TemplateResult } from 'lit';
 
+/**
+ * @summary A live playground that introspects a slotted Cortex component and
+ * renders editable controls for its public reactive properties and slots.
+ *
+ * @description Used in `apps/docs` pages to demonstrate components. The
+ * storybook reads `elementProperties` from the slotted target and renders a
+ * checkbox / input / select per property based on its declared `type`. Object
+ * and array properties accept JSON in the input. Function properties are
+ * intentionally **not** rendered — they cannot be expressed as text input and
+ * writing them as attributes corrupts their value (the function gets
+ * serialized to its source code string by `String(fn)`).
+ *
+ * @slot (default) - The component to demo. The first assigned element is
+ *   inspected; pass `element-selector` to drill into a descendant.
+ *
+ * @csspart base - The card wrapper that hosts the demo and the controls.
+ */
 export default class CxStorybook extends CortexElement {
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
         'cx-button': typeof CxButton;
         'cx-card': typeof CxCard;
         'cx-checkbox': typeof CxCheckbox;
-        'cx-grid': typeof CxGrid;
-        'cx-grid-item': typeof CxGridItem;
         'cx-icon-button': typeof CxIconButton;
         'cx-input': typeof CxInput;
         'cx-markdown': typeof CxMarkdown;
         'cx-mutation-observer': typeof CxMutationObserver;
+        'cx-option': typeof CxOption;
         'cx-select': typeof CxSelect;
-        'cx-space': typeof CxSpace;
+        'cx-textarea': typeof CxTextarea;
     };
     defaultSlot: HTMLSlotElement;
     mutationObserver: CxMutationObserver;
+    /**
+     * CSS selector relative to the first slotted element. When set, the storybook
+     * targets the matching descendant instead of the slotted root element.
+     */
     elementSelector: string;
-    storybookConfig: Record<string, any[]>;
-    config: Record<string, {
-        default: any;
-        type: any;
-    }>;
-    props: Record<string, any>;
+    /**
+     * Per-property metadata used to render richer controls:
+     *
+     * - Array of strings → renders a `cx-select` with each string as an option.
+     * - Special key `slot` → an array of slot names that the user can append.
+     */
+    storybookConfig: Record<string, string[]>;
+    /** Introspected metadata for each editable public property of the target. */
+    config: Record<string, StorybookPropConfig>;
+    /** Live values for each editable property; mirrors the target component. */
+    props: Record<string, unknown>;
+    /** The component instance being demoed (the slotted root or a descendant). */
     target: HTMLElement | null;
+    /** User-authored slot content keyed by slot name; each entry is an HTML string. */
     slots: Record<string, string[]>;
-    constructor();
-    private handleInputChange;
-    private handleAddSlot;
-    private handleSlotInputChange;
-    private getDefaultSlotValues;
-    private getComponentDefaultProps;
-    private resolveAttrValue;
-    private updateRenderedComponent;
-    private handleAddSlotButtonClick;
-    private renderControls;
-    private handleAttributeChange;
     connectedCallback(): void;
-    disconnectedCallback(): void;
+    handleElementSelectorChange(): void;
     handleSlotChange(): void;
+    handleAttributeChange(event: CxMutationEvent): void;
+    private resolveTargetFromSlot;
+    private introspectTargetConfig;
+    private collectExistingSlotEntries;
+    private readInitialProps;
+    private normalizePropValue;
+    private applyPropsToTarget;
+    private applyPropToTarget;
+    private syncPropFromAttribute;
+    private handlePropChange;
+    private handleSlotEntryChange;
+    private handleSlotEntryDelete;
+    private handleAddSlotButtonClick;
+    private appendSlotEntry;
+    private rerenderSlotEntries;
+    private renderControl;
+    private formatControlValue;
+    private renderSlotControls;
+    private renderControls;
     render(): TemplateResult;
 }
 declare global {

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

@@ -0,0 +1,19 @@
+/**
+ * Lit-property type names that `cx-storybook` understands when introspecting the
+ * target component's `elementProperties`. Names match the lowercased function
+ * name of the corresponding constructor (`String`, `Number`, ...) plus a
+ * dedicated `'array'` slot for `type: Array` since `Array.name === 'Array'`.
+ */
+export declare enum StorybookPropType {
+    Array = "array",
+    Boolean = "boolean",
+    Function = "function",
+    Number = "number",
+    Object = "object",
+    String = "string"
+}
+/** Metadata `cx-storybook` builds per public reactive property of the target. */
+export interface StorybookPropConfig {
+    default: unknown;
+    type: StorybookPropType;
+}

package/library/react-web-component.d.ts

@@ -4583,10 +4583,6 @@
           * By default the toggle element will be inserted into the first column on the table. If you want the toggle element to be inserted in a different column you can pass the field name of the column to the dataTreeElementColumn setup option
         */
         dataTreeElementColumn?: string | any;
-        /**
-          * The branch element is the right angled line running from parent to child to indicate its position in the tree. If false, the branch element will not be displayed. Alternatively, can provide a HTML string to use as the branch element.
-        */
-        dataTreeBranchElement?: string | any;
         /**
           * The amount of pixels to indent the child rows.
         */
@@ -6061,6 +6057,10 @@
           * 
         */
         extraFolderTitle?: string;
+        /**
+          * 
+        */
+        extraFolderIcon?: string;
         /**
           * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
         */
@@ -6707,16 +6707,16 @@
         preRender?: boolean;
             } 
             /**
-              * 
+              * A live playground that introspects a slotted Cortex component and renders editable controls for its public reactive properties and slots.
             */
             interface CxStorybookAttributes extends HTMLAttributes<CxStorybook> {
               
         /**
-          * 
+          * CSS selector relative to the first slotted element. When set, the storybook targets the matching descendant instead of the slotted root element.
         */
         elementSelector?: string;
         /**
-          * 
+          * Per-property metadata used to render richer controls: <br/> - Array of strings → renders a `cx-select` with each string as an option. - Special key `slot` → an array of slot names that the user can append.
         */
         storybookConfig?: dictionary;
         /**

package/package.json

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