@ds-mo/ui 1.11.4 → 2.0.0

package/src/wc/components/BarNav/BarNav.tsx

@@ -12,7 +12,7 @@ import {
 import type { NavChromeStyle } from '../../nav/nav-chrome';
 import type { MenuItemData } from '../Menu/menu-types';
 import { isTabDivider } from '../TabGroup/tab-item-utils';
-import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
+import type { BarNavTab } from './bar-nav-types';
 import {
   deriveBarNavValueFromUrl,
   parseJsonArrayProp,
@@ -61,15 +61,6 @@ export class BarNav {
   /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */
   @Prop({ mutable: true }) value: string = '';
 
-  /**
-   * Action items rendered in the right section.
-   * Set via JS property: `el.actions = [...]`. Replace the array reference to update.
-   */
-  @Prop() actions: BarNavActionItem[] = [];
-
-  /** JSON fallback for `actions` — useful when framework bindings don't propagate arrays. */
-  @Prop({ attribute: 'actions-json' }) actionsJson: string = '';
-
   /**
    * Fallback heading shown when no tabs are provided.
    * When tabs are present the heading is hidden.
@@ -85,11 +76,7 @@ export class BarNav {
   /** Emitted when the active tab changes. Detail = tab id. */
   @Event() dsTabChange!: EventEmitter<string>;
 
-  /** Emitted when an action button is toggled. Detail = { id, selected }. */
-  @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;
-
   @State() private resolvedTabs: BarNavTab[] = [];
-  @State() private resolvedActions: BarNavActionItem[] = [];
   @State() private urlDerivedValue: string = '';
   @State() private hideTabsForDetailRoute = false;
   @State() private tabsCollapsed = false;
@@ -154,8 +141,6 @@ export class BarNav {
 
   @Watch('tabs')
   @Watch('tabsJson')
-  @Watch('actions')
-  @Watch('actionsJson')
   @Watch('currentUrl')
   @Watch('basePath')
   onHostPropsChange() {
@@ -284,16 +269,7 @@ export class BarNav {
 
   /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */
   private syncHostPropsIfNeeded() {
-    if (
-      shouldResyncBarNavProps(
-        this.resolvedTabs,
-        this.tabs,
-        this.tabsJson,
-        this.resolvedActions,
-        this.actions,
-        this.actionsJson,
-      )
-    ) {
+    if (shouldResyncBarNavProps(this.resolvedTabs, this.tabs, this.tabsJson)) {
       this.applyHostProps();
     } else if (this.currentUrl && this.basePath) {
       this.syncValueFromUrl();
@@ -361,27 +337,15 @@ export class BarNav {
     }
   }
 
-  /** Width left for tabs after actions. */
+  /** Width available for the tab row or collapsed trigger. */
   private getLeftZoneAvailableWidth(): number {
     if (!this.headerEl) return 0;
 
     const headerStyle = getComputedStyle(this.headerEl);
-    const gap = parseFloat(headerStyle.columnGap || headerStyle.gap || '0') || 0;
-    const actionsEl = this.headerEl.querySelector('.bar-nav__actions') as HTMLElement | null;
-    const actionsWidth = actionsEl?.offsetWidth ?? 0;
     const horizontalPadding =
       (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);
-    const spacing = this.tabsCollapsed
-      ? parseFloat(
-          getComputedStyle(this.headerEl).getPropertyValue('--dimension-space-100').trim(),
-        ) || 8
-      : actionsEl
-        ? gap
-        : 0;
-    const available =
-      this.headerEl.clientWidth - horizontalPadding - actionsWidth - spacing;
 
-    return Math.max(0, available);
+    return Math.max(0, this.headerEl.clientWidth - horizontalPadding);
   }
 
   private getTabsIntrinsicWidth(): number {
@@ -474,12 +438,6 @@ export class BarNav {
       : (this.tabs ?? []);
   }
 
-  private incomingActions(): BarNavActionItem[] {
-    return this.actionsJson
-      ? parseJsonArrayProp(this.actionsJson, [])
-      : (this.actions ?? []);
-  }
-
   private applyHostProps() {
     const nextBasePath = this.basePath;
     const sectionChanged =
@@ -492,7 +450,6 @@ export class BarNav {
       this.committedSection = '';
       this.pendingSection = nextBasePath;
       this.resolvedTabs = [];
-      this.resolvedActions = this.incomingActions();
       this.resetTabOverflowLayout();
       return;
     }
@@ -516,7 +473,6 @@ export class BarNav {
       this.digestTabsConfig(tabs) !== this.digestTabsConfig(this.resolvedTabs);
 
     this.resolvedTabs = tabs;
-    this.resolvedActions = this.incomingActions();
     this.syncValueFromUrl();
     this.committedSection = nextBasePath;
     if (tabsConfigChanged) {
@@ -572,11 +528,6 @@ export class BarNav {
     this.selectTab((e as CustomEvent<string>).detail);
   }
 
-  private handleActionChange(actionId: string, e: Event) {
-    const selected = (e as CustomEvent<boolean>).detail;
-    this.dsActionChange.emit({ id: actionId, selected });
-  }
-
   private toggleTabMenu() {
     if (this.menuOpen) {
       this.menuOpen = false;
@@ -736,29 +687,6 @@ export class BarNav {
               </button>
             )}
 
-            {hasTabs &&
-              this.tabLayoutCommitted &&
-              this.tabsCollapsed &&
-              this.resolvedActions.length > 0 && (
-              <div class="bar-nav__between" aria-hidden="true" />
-            )}
-
-          {this.resolvedActions.length > 0 && (
-            <div class="bar-nav__actions">
-              {this.resolvedActions.map(action => (
-                <ds-bar-nav-action
-                  key={action.id}
-                  icon={action.icon}
-                  selected={action.selected ?? false}
-                  dot={action.dot ?? false}
-                  inactive={action.inactive}
-                  aria-label={action.ariaLabel ?? action.id}
-                  onDsChange={(e: Event) => this.handleActionChange(action.id, e)}
-                />
-              ))}
-            </div>
-          )}
-
         </header>
 
         {hasTabs && this.tabLayoutCommitted && this.tabsCollapsed && (

package/src/wc/components/BarNav/bar-nav-utils.ts

@@ -1,5 +1,5 @@
 import { getSelectableTabs } from '../TabGroup/tab-item-utils';
-import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
+import type { BarNavTab } from './bar-nav-types';
 
 export interface BarNavUrlState {
   /** Tab id derived from the URL, or empty when none applies. */
@@ -44,24 +44,15 @@ export function shouldResyncBarNavProps(
   resolvedTabs: BarNavTab[],
   tabs: BarNavTab[],
   tabsJson: string,
-  resolvedActions: BarNavActionItem[],
-  actions: BarNavActionItem[],
-  actionsJson: string,
 ): boolean {
   const tabsIncoming = tabsJson
     ? parseJsonArrayProp(tabsJson, [])
     : (tabs ?? []);
-  const actionsIncoming = actionsJson
-    ? parseJsonArrayProp(actionsJson, [])
-    : (actions ?? []);
 
-  return (
-    (resolvedTabs.length === 0 && tabsIncoming.length > 0) ||
-    (resolvedActions.length === 0 && actionsIncoming.length > 0)
-  );
+  return resolvedTabs.length === 0 && tabsIncoming.length > 0;
 }
 
-/** Parse tabs/actions from either a JSON attribute string or a JS property array. */
+/** Parse tabs from either a JSON attribute string or a JS property array. */
 export function parseJsonArrayProp<T>(value: string | T[] | undefined, fallback: T[]): T[] {
   if (Array.isArray(value)) return value;
   if (typeof value === 'string' && value !== '') {

package/src/wc/components.d.ts

@@ -9,7 +9,7 @@ import { AccordionItemData } from "./components/Accordion/Accordion";
 import { NavChromeStyle } from "./nav/nav-chrome";
 import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 import { BannerContrast, BannerIntent } from "./components/Banner/Banner";
-import { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
+import { BarNavTab } from "./components/BarNav/bar-nav-types";
 import { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 import { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 import { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -47,7 +47,7 @@ export { AccordionItemData } from "./components/Accordion/Accordion";
 export { NavChromeStyle } from "./nav/nav-chrome";
 export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 export { BannerContrast, BannerIntent } from "./components/Banner/Banner";
-export { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
+export { BarNavTab } from "./components/BarNav/bar-nav-types";
 export { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 export { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 export { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -192,16 +192,6 @@ export namespace Components {
         "showDismiss": boolean;
     }
     interface DsBarNav {
-        /**
-          * Action items rendered in the right section. Set via JS property: `el.actions = [...]`. Replace the array reference to update.
-          * @default []
-         */
-        "actions": BarNavActionItem[];
-        /**
-          * JSON fallback for `actions` — useful when framework bindings don't propagate arrays.
-          * @default ''
-         */
-        "actionsJson": string;
         /**
           * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
           * @default ''
@@ -1240,7 +1230,6 @@ declare global {
     };
     interface HTMLDsBarNavElementEventMap {
         "dsTabChange": string;
-        "dsActionChange": { id: string; selected: boolean };
     }
     interface HTMLDsBarNavElement extends Components.DsBarNav, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsBarNavElementEventMap>(type: K, listener: (this: HTMLDsBarNavElement, ev: DsBarNavCustomEvent<HTMLDsBarNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1880,16 +1869,6 @@ declare namespace LocalJSX {
         "showDismiss"?: boolean;
     }
     interface DsBarNav {
-        /**
-          * Action items rendered in the right section. Set via JS property: `el.actions = [...]`. Replace the array reference to update.
-          * @default []
-         */
-        "actions"?: BarNavActionItem[];
-        /**
-          * JSON fallback for `actions` — useful when framework bindings don't propagate arrays.
-          * @default ''
-         */
-        "actionsJson"?: string;
         /**
           * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
           * @default ''
@@ -1909,10 +1888,6 @@ declare namespace LocalJSX {
           * @default 'dashboard'
          */
         "navStyle"?: NavChromeStyle;
-        /**
-          * Emitted when an action button is toggled. Detail = { id, selected }.
-         */
-        "onDsActionChange"?: (event: DsBarNavCustomEvent<{ id: string; selected: boolean }>) => void;
         /**
           * Emitted when the active tab changes. Detail = tab id.
          */
@@ -2907,7 +2882,6 @@ declare namespace LocalJSX {
         "navStyle": NavChromeStyle;
         "tabsJson": string;
         "value": string;
-        "actionsJson": string;
         "heading": string | undefined;
         "basePath": string;
         "currentUrl": string;

package/dist/components/p-Dl1GvZQ2.js

@@ -1,2 +0,0 @@
-import{g as r}from"./p-BQq26pt9.js";function t(t,e,n){if(!t||!e){return{value:"",hideTabs:false}}if(t!==e&&!t.startsWith(`${e}/`)){return{value:"",hideTabs:false}}const s=t.slice(e.length);const a=s.startsWith("/")?s.slice(1).split("/")[0]:"";const u=r(n);if(!a){return{value:u[0]?.id??"",hideTabs:false}}const i=u.find((r=>r.id===a));if(i){return{value:i.id,hideTabs:false}}return{value:"",hideTabs:true}}function e(r,t,e,s,a,u){const i=e?n(e,[]):t??[];const f=u?n(u,[]):a??[];return r.length===0&&i.length>0||s.length===0&&f.length>0}function n(r,t){if(Array.isArray(r))return r;if(typeof r==="string"&&r!==""){try{const e=JSON.parse(r);return Array.isArray(e)?e:t}catch{return t}}return t}export{t as d,n as p,e as s};
-//# sourceMappingURL=p-Dl1GvZQ2.js.map

package/dist/components/p-Dl1GvZQ2.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["deriveBarNavValueFromUrl","path","basePath","tabs","value","hideTabs","startsWith","remainder","slice","length","seg","split","selectableTabs","getSelectableTabs","id","tab","find","t","shouldResyncBarNavProps","resolvedTabs","tabsJson","resolvedActions","actions","actionsJson","tabsIncoming","parseJsonArrayProp","actionsIncoming","fallback","Array","isArray","parsed","JSON","parse"],"sources":["src/wc/components/BarNav/bar-nav-utils.ts"],"sourcesContent":["import { getSelectableTabs } from '../TabGroup/tab-item-utils';\nimport type { BarNavActionItem, BarNavTab } from './bar-nav-types';\n\nexport interface BarNavUrlState {\n  /** Tab id derived from the URL, or empty when none applies. */\n  value: string;\n  /** When true, tabs should be hidden (e.g. non-tab child routes like detail pages). */\n  hideTabs: boolean;\n}\n\n/** Derive BarNav tab selection from `currentUrl` relative to `basePath`.\n *  Mirrors motive-webapp-lab `resolveBarNavState` tab-selection semantics. */\nexport function deriveBarNavValueFromUrl(\n  path: string,\n  basePath: string,\n  tabs: BarNavTab[],\n): BarNavUrlState {\n  if (!path || !basePath) {\n    return { value: '', hideTabs: false };\n  }\n\n  if (path !== basePath && !path.startsWith(`${basePath}/`)) {\n    return { value: '', hideTabs: false };\n  }\n\n  const remainder = path.slice(basePath.length);\n  const seg = remainder.startsWith('/') ? remainder.slice(1).split('/')[0] : '';\n  const selectableTabs = getSelectableTabs(tabs);\n\n  if (!seg) {\n    return { value: selectableTabs[0]?.id ?? '', hideTabs: false };\n  }\n\n  const tab = selectableTabs.find(t => t.id === seg);\n  if (tab) {\n    return { value: tab.id, hideTabs: false };\n  }\n\n  return { value: '', hideTabs: true };\n}\n\n/** True when host array/json props have data but resolved internal state is still empty. */\nexport function shouldResyncBarNavProps(\n  resolvedTabs: BarNavTab[],\n  tabs: BarNavTab[],\n  tabsJson: string,\n  resolvedActions: BarNavActionItem[],\n  actions: BarNavActionItem[],\n  actionsJson: string,\n): boolean {\n  const tabsIncoming = tabsJson\n    ? parseJsonArrayProp(tabsJson, [])\n    : (tabs ?? []);\n  const actionsIncoming = actionsJson\n    ? parseJsonArrayProp(actionsJson, [])\n    : (actions ?? []);\n\n  return (\n    (resolvedTabs.length === 0 && tabsIncoming.length > 0) ||\n    (resolvedActions.length === 0 && actionsIncoming.length > 0)\n  );\n}\n\n/** Parse tabs/actions from either a JSON attribute string or a JS property array. */\nexport function parseJsonArrayProp<T>(value: string | T[] | undefined, fallback: T[]): T[] {\n  if (Array.isArray(value)) return value;\n  if (typeof value === 'string' && value !== '') {\n    try {\n      const parsed = JSON.parse(value);\n      return Array.isArray(parsed) ? parsed : fallback;\n    } catch {\n      return fallback;\n    }\n  }\n  return fallback;\n}\n"],"mappings":"6CAYgBA,EACdC,EACAC,EACAC,GAEA,IAAKF,IAASC,EAAU,CACtB,MAAO,CAAEE,MAAO,GAAIC,SAAU,M,CAGhC,GAAIJ,IAASC,IAAaD,EAAKK,WAAW,GAAGJ,MAAc,CACzD,MAAO,CAAEE,MAAO,GAAIC,SAAU,M,CAGhC,MAAME,EAAYN,EAAKO,MAAMN,EAASO,QACtC,MAAMC,EAAMH,EAAUD,WAAW,KAAOC,EAAUC,MAAM,GAAGG,MAAM,KAAK,GAAK,GAC3E,MAAMC,EAAiBC,EAAkBV,GAEzC,IAAKO,EAAK,CACR,MAAO,CAAEN,MAAOQ,EAAe,IAAIE,IAAM,GAAIT,SAAU,M,CAGzD,MAAMU,EAAMH,EAAeI,MAAKC,GAAKA,EAAEH,KAAOJ,IAC9C,GAAIK,EAAK,CACP,MAAO,CAAEX,MAAOW,EAAID,GAAIT,SAAU,M,CAGpC,MAAO,CAAED,MAAO,GAAIC,SAAU,KAChC,CAGM,SAAUa,EACdC,EACAhB,EACAiB,EACAC,EACAC,EACAC,GAEA,MAAMC,EAAeJ,EACjBK,EAAmBL,EAAU,IAC5BjB,GAAQ,GACb,MAAMuB,EAAkBH,EACpBE,EAAmBF,EAAa,IAC/BD,GAAW,GAEhB,OACGH,EAAaV,SAAW,GAAKe,EAAaf,OAAS,GACnDY,EAAgBZ,SAAW,GAAKiB,EAAgBjB,OAAS,CAE9D,CAGM,SAAUgB,EAAsBrB,EAAiCuB,GACrE,GAAIC,MAAMC,QAAQzB,GAAQ,OAAOA,EACjC,UAAWA,IAAU,UAAYA,IAAU,GAAI,CAC7C,IACE,MAAM0B,EAASC,KAAKC,MAAM5B,GAC1B,OAAOwB,MAAMC,QAAQC,GAAUA,EAASH,C,CACxC,MACA,OAAOA,C,EAGX,OAAOA,CACT,Q","ignoreList":[]}