@db-ux/react-core-components 3.0.2-shell4-bdb351c → 3.0.3

package/dist/shared/model.d.ts

@@ -88,10 +88,6 @@ export type MarginProps = {
      */
     margin?: MarginType;
 };
-export declare const ShellControlPanelDesktopPosition: readonly ["top", "left"];
-export type ShellControlPanelDesktopPositionType = (typeof ShellControlPanelDesktopPosition)[number];
-export declare const ShellControlPanelMobilePosition: readonly ["top", "bottom"];
-export type ShellControlPanelMobilePositionType = (typeof ShellControlPanelMobilePosition)[number];
 export declare const PlacementHorizontalList: readonly ["left", "right", "left-start", "left-end", "right-start", "right-end"];
 export type PlacementHorizontalType = (typeof PlacementHorizontalList)[number];
 export declare const PlacementVerticalList: readonly ["top", "bottom", "top-start", "top-end", "bottom-start", "bottom-end"];
@@ -237,13 +233,11 @@ export type ValueProps = {
      */
     value?: any;
 };
-export type DisabledProps = {
+export type BaseFormProps = {
     /**
-     * The disabled attribute can be set to keep a user from clicking on the item.
+     * The disabled attribute can be set to keep a user from clicking on the form element.
      */
     disabled?: boolean | string;
-};
-export type BaseFormProps = {
     /**
      * The label attribute specifies the caption of the form element.
      */
@@ -252,7 +246,7 @@ export type BaseFormProps = {
      * The name attribute gives the name of the form control, as used in form submission and in the form element's elements object.
      */
     name?: string;
-} & DisabledProps;
+};
 export type CustomFormProps = {
     /**
      * Overwrites auto handling for aria-describedby.
@@ -512,83 +506,10 @@ export type AriaControlsProps = {
      */
     controls?: string;
 };
-export type ControlPanelProps = {
-    /**
-     * Slot to pass in the DBControlPanelBrand component
-     */
-    brand?: any;
-    /**
-     * Slot to pass in a meta navigation.
-     * Desktop: Above the regular control-panel-desktop
-     * Mobile: Inside the drawer
-     */
-    metaNavigation?: any;
-    /**
-     * Slot to pass one or more elements like DBButton (e.g. search) as primary action.
-     * Desktop: Shown next to the main-navigation
-     * Mobile: Shown next to the control-panel-brand
-     */
-    primaryActions?: any;
-    /**
-     * Slot to pass one or more elements like DBButton (e.g. profile, language, etc.) as secondary action.
-     * Desktop: Shown seperated by divider at the end of the control-panel-desktop
-     * Mobile: Shown inside the drawer at the bottom.
-     */
-    secondaryActions?: any;
-    /**
-     * Adds ``aria-labelledby`` to the <nav> element.
-     */
-    navigationLabeledBy?: string;
-};
 export type ValueLabelType = {
     value: string;
     label?: string;
 };
-export type OverflowScrollButtonProps = {
-    /**
-     * Change amount of distance if you click on an arrow, only available with behavior="arrows"
-     */
-    arrowScrollDistance?: number | string;
-};
-export type OverflowScrollButtonState = {
-    scroll: (left?: boolean) => void;
-    showScrollLeft?: boolean;
-    showScrollRight?: boolean;
-    evaluateScrollButtons: (tabList: Element) => void;
-};
-export type SidebarProps = {
-    /**
-     * Set the expanded/collapsed state initially for the left sidebar
-     */
-    expanded?: boolean | string;
-    /**
-     * Set the tooltip for the expand/collapse button
-     */
-    expandButtonTooltip?: string;
-    /**
-     * Set the tooltip for the expand/collapse button based on the state. (only react|vue)
-     */
-    expandButtonTooltipFn?: (open: boolean) => string;
-    /**
-     * Set the tooltip for the expand/collapse button based on the state. (only react|vue)
-     */
-    onExpandButtonTooltipFn?: (open: boolean) => string;
-};
-export type SidebarState = {
-    _open: boolean;
-    getToggleButtonText: () => string;
-};
-export declare const NavigationItemGroupVariantList: readonly ["popover", "tree"];
-export type NavigationItemGroupVariantType = (typeof NavigationItemGroupVariantList)[number];
-export type NavigationItemGroupVariant = {
-    variant?: NavigationItemGroupVariantType;
-};
-export type AdditionalInformationSlotProps = {
-    /**
-     * Slot to add additional information most likely a DBBadge
-     */
-    additionalInformation?: any;
-};
 export type DocumentScrollState = {
     _documentScrollListenerCallbackId?: string;
     handleDocumentScroll: (event: any, parent?: HTMLElement) => void;

package/dist/shared/model.js

@@ -1,8 +1,6 @@
 export const SemanticList = ['adaptive', 'neutral', 'critical', 'informational', 'warning', 'successful'];
 export const SpacingList = ['medium', 'small', 'large', 'none'];
 export const MarginList = ['medium', 'small', 'large', 'none'];
-export const ShellControlPanelDesktopPosition = ['top', 'left'];
-export const ShellControlPanelMobilePosition = ['top', 'bottom'];
 export const PlacementHorizontalList = ['left', 'right', 'left-start', 'left-end', 'right-start', 'right-end'];
 export const PlacementVerticalList = ['top', 'bottom', 'top-start', 'top-end', 'bottom-start', 'bottom-end'];
 export const PlacementList = [...PlacementHorizontalList, ...PlacementVerticalList];
@@ -21,4 +19,3 @@ export const AutoCompleteList = ['off', 'on', 'name', 'honorific-prefix', 'given
 export const LinkTargetList = ['_self', '_blank', '_parent', '_top'];
 export const LinkReferrerPolicyList = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'];
 export const AlignmentList = ['start', 'center'];
-export const NavigationItemGroupVariantList = ['popover', 'tree'];

package/dist/utils/floating-components.d.ts

@@ -16,21 +16,5 @@ export declare const getFloatingProps: (element: HTMLElement, parent: HTMLElemen
     correctedPlacement: string;
     innerWidth: number;
     innerHeight: number;
-    outsideYBoth?: undefined;
-    outsideXBoth?: undefined;
-} | {
-    top: number;
-    bottom: number;
-    right: number;
-    height: number;
-    width: number;
-    left: number;
-    childHeight: number;
-    childWidth: number;
-    correctedPlacement: string;
-    innerWidth: number;
-    innerHeight: number;
-    outsideYBoth: boolean;
-    outsideXBoth: boolean;
 };
-export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement?: string) => void;
+export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement: string) => void;

package/dist/utils/floating-components.js

@@ -60,11 +60,9 @@ export const handleDataOutside = (el) => {
     return dataOutsidePair;
 };
 export const handleFixedDropdown = (element, parent, placement) => {
-    // We skip this if we are in mobile it's already fixed or if we don't have a floating dropdown
-    const computedStyle = getComputedStyle(element);
-    if (computedStyle.zIndex === '9999' || computedStyle.position !== 'fixed' && computedStyle.position !== 'absolute') {
+    // We skip this if we are in mobile it's already fixed
+    if (getComputedStyle(element).zIndex === '9999')
         return;
-    }
     const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement } = getFloatingProps(element, parent, placement);
     const fullWidth = element.dataset['width'] === 'full';
     if (fullWidth) {
@@ -106,29 +104,27 @@ export const getFloatingProps = (element, parent, placement) => {
     let childHeight = childRect.height;
     let childWidth = childRect.width;
     if (placement === 'bottom' || placement === 'top') {
-        childWidth = width > childWidth ? 0 : childWidth / 2;
+        childWidth = childWidth / 2;
     }
     if (placement === 'left' || placement === 'right') {
-        childHeight = height > childHeight ? 0 : childHeight / 2;
+        childHeight = childHeight / 2;
     }
-    const outsideBottom = Math.floor(bottom + childHeight) > innerHeight;
-    const outsideTop = Math.ceil(top - childHeight) < 0;
-    const outsideLeft = Math.ceil(left - childWidth) < 0;
-    const outsideRight = Math.floor(right + childWidth) > innerWidth;
+    const outsideBottom = bottom + childHeight > innerHeight;
+    const outsideTop = top - childHeight < 0;
+    const outsideLeft = left - childWidth < 0;
+    const outsideRight = right + childWidth > innerWidth;
     let correctedPlacement = placement;
     if (placement.startsWith('bottom')) {
         if (outsideBottom) {
-            if (!outsideTop) {
-                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('bottom', 'top');
-                if (outsideLeft && outsideRight) {
-                    correctedPlacement = 'top';
-                }
-                else if (outsideLeft) {
-                    correctedPlacement = 'top-start';
-                }
-                else if (outsideRight) {
-                    correctedPlacement = 'top-end';
-                }
+            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('bottom', 'top');
+            if (outsideLeft && outsideRight) {
+                correctedPlacement = 'top';
+            }
+            else if (outsideLeft) {
+                correctedPlacement = 'top-start';
+            }
+            else if (outsideRight) {
+                correctedPlacement = 'top-end';
             }
         }
         else {
@@ -145,17 +141,15 @@ export const getFloatingProps = (element, parent, placement) => {
     }
     else if (placement.startsWith('top')) {
         if (outsideTop) {
-            if (!outsideBottom) {
-                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('top', 'bottom');
-                if (outsideLeft && outsideRight) {
-                    correctedPlacement = 'bottom';
-                }
-                else if (outsideLeft) {
-                    correctedPlacement = 'bottom-start';
-                }
-                else if (outsideRight) {
-                    correctedPlacement = 'bottom-end';
-                }
+            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('top', 'bottom');
+            if (outsideLeft && outsideRight) {
+                correctedPlacement = 'bottom';
+            }
+            else if (outsideLeft) {
+                correctedPlacement = 'bottom-start';
+            }
+            else if (outsideRight) {
+                correctedPlacement = 'bottom-end';
             }
         }
         else {
@@ -172,17 +166,15 @@ export const getFloatingProps = (element, parent, placement) => {
     }
     else if (placement.startsWith('left')) {
         if (outsideLeft) {
-            if (outsideRight) {
-                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('left', 'right');
-                if (outsideBottom && outsideTop) {
-                    correctedPlacement = 'right';
-                }
-                else if (outsideBottom) {
-                    correctedPlacement = 'right-end';
-                }
-                else if (outsideTop) {
-                    correctedPlacement = 'right-start';
-                }
+            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('left', 'right');
+            if (outsideBottom && outsideTop) {
+                correctedPlacement = 'right';
+            }
+            else if (outsideBottom) {
+                correctedPlacement = 'right-end';
+            }
+            else if (outsideTop) {
+                correctedPlacement = 'right-start';
             }
         }
         else {
@@ -199,17 +191,15 @@ export const getFloatingProps = (element, parent, placement) => {
     }
     else if (correctedPlacement.startsWith('right')) {
         if (outsideRight) {
-            if (!outsideLeft) {
-                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('right', 'left');
-                if (outsideBottom && outsideTop) {
-                    correctedPlacement = 'left';
-                }
-                else if (outsideBottom) {
-                    correctedPlacement = 'left-end';
-                }
-                else if (outsideTop) {
-                    correctedPlacement = 'left-start';
-                }
+            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('right', 'left');
+            if (outsideBottom && outsideTop) {
+                correctedPlacement = 'left';
+            }
+            else if (outsideBottom) {
+                correctedPlacement = 'left-end';
+            }
+            else if (outsideTop) {
+                correctedPlacement = 'left-start';
             }
         }
         else {
@@ -235,24 +225,13 @@ export const getFloatingProps = (element, parent, placement) => {
         childWidth: childRect.width,
         correctedPlacement,
         innerWidth,
-        innerHeight,
-        outsideYBoth: outsideTop && outsideBottom,
-        outsideXBoth: outsideRight && outsideLeft
+        innerHeight
     };
 };
 export const handleFixedPopover = (element, parent, placement) => {
-    var _a, _b, _c;
-    const computedStyle = getComputedStyle(element);
-    // We skip if we don't have a floating popover
-    if (computedStyle.position !== 'fixed' && computedStyle.position !== 'absolute') {
-        return;
-    }
-    let distance = computedStyle.getPropertyValue('--db-popover-distance');
-    if (!distance.length) {
-        distance = '0px';
-    }
-    const elementPlacement = (_c = (_b = (_a = element === null || element === void 0 ? void 0 : element.dataset) === null || _a === void 0 ? void 0 : _a['placement']) !== null && _b !== void 0 ? _b : placement) !== null && _c !== void 0 ? _c : 'bottom';
-    const { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight, outsideYBoth } = getFloatingProps(element, parent, elementPlacement);
+    var _a;
+    const distance = (_a = getComputedStyle(element).getPropertyValue('--db-popover-distance')) !== null && _a !== void 0 ? _a : '0px';
+    const { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
     // Tooltip arrow position
     if (childWidth > width && (correctedPlacement.startsWith('bottom') || correctedPlacement.startsWith('top'))) {
         const diff = width / 2 / childWidth * 100;
@@ -321,13 +300,6 @@ export const handleFixedPopover = (element, parent, placement) => {
         element.style.insetBlockStart = `calc(${bottom}px + ${distance})`;
         element.style.insetBlockEnd = `calc(${end > innerHeight ? innerHeight : end}px + ${distance})`;
     }
-    // In this case we are outside of top and bottom so we need to scroll
-    // We use the full height in this case
-    if (outsideYBoth) {
-        element.style.overflow = 'hidden auto';
-        element.style.insetBlock = distance;
-        element.style.maxBlockSize = `calc(${innerHeight}px - 2 * ${distance})`;
-    }
     element.style.position = 'fixed';
     element.dataset['correctedPlacement'] = correctedPlacement;
 };

package/dist/utils/navigation.d.ts

@@ -23,6 +23,10 @@ export declare class NavigationItemSafeTriangle {
     private getTriangleTipY;
     private hasMouseEnteredSubNavigation;
     private getTriangleCoordinates;
-    followByMouseEvent(event: any): void;
+    followByMouseEvent(event: MouseEvent): void;
 }
-export declare const handleSubNavigationPosition: (element: HTMLElement, level?: number) => void;
+declare const _default: {
+    isEventTargetNavigationItem: (event: unknown) => boolean;
+    NavigationItemSafeTriangle: typeof NavigationItemSafeTriangle;
+};
+export default _default;

package/dist/utils/navigation.js

@@ -1,12 +1,12 @@
-import { handleDataOutside, handleFixedPopover } from './floating-components';
+import { handleDataOutside } from './floating-components';
 export const isEventTargetNavigationItem = (event) => {
-    var _a;
+    var _a, _b;
     const { target } = event;
-    return Boolean((_a = target === null || target === void 0 ? void 0 : target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('db-navigation-item'));
+    return Boolean(!((_a = target === null || target === void 0 ? void 0 : target.classList) === null || _a === void 0 ? void 0 : _a.contains('db-navigation-item-expand-button')) && ((_b = target === null || target === void 0 ? void 0 : target.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('db-navigation-item')));
 };
 export class NavigationItemSafeTriangle {
     constructor(element, subNavigation) {
-        var _a, _b;
+        var _a;
         this.parentSubNavigation = null;
         this.initialized = false;
         this.mouseX = 0;
@@ -16,12 +16,13 @@ export class NavigationItemSafeTriangle {
         if (!this.element || !this.subNavigation) {
             return;
         }
-        this.parentSubNavigation = (_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('.db-navigation-item-group-menu')) !== null && _b !== void 0 ? _b : this.element;
+        this.parentSubNavigation = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('.db-sub-navigation');
         /*
          * only initiate if:
+         * 1. item is not at root navigation level
          * 2. item is not in the mobile navigation / within db-drawer
          */
-        if (!this.element.closest('.db-drawer')) {
+        if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {
             this.init();
         }
     }
@@ -87,10 +88,20 @@ export class NavigationItemSafeTriangle {
         }
         return false;
     }
-    getTriangleCoordinates() {
+    getTriangleCoordinates(variant) {
         if (!this.triangleData) {
             return;
         }
+        if (variant === 'fill-gap') {
+            const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;
+            const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
+            return {
+                lb: `${xStart} ${itemHeight}`,
+                lt: `${xStart} 0`,
+                rt: '100% 0',
+                rb: `100% ${itemHeight}`
+            };
+        }
         const tipX = this.getTriangleTipX();
         const tipY = this.getTriangleTipY();
         const lb = `${tipX}px ${tipY}px`;
@@ -109,7 +120,7 @@ export class NavigationItemSafeTriangle {
         this.mouseX = event.clientX - this.triangleData.itemRect.left;
         this.mouseY = event.clientY - this.triangleData.itemRect.top;
         const isOverSubNavigation = this.hasMouseEnteredSubNavigation();
-        const coordinates = this.getTriangleCoordinates();
+        const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');
         if (!coordinates) {
             return;
         }
@@ -119,30 +130,7 @@ export class NavigationItemSafeTriangle {
         }
     }
 }
-export const handleSubNavigationPosition = (element, level = 0) => {
-    for (const navItem of Array.from(element.querySelectorAll('.db-navigation-item-group'))) {
-        const subNavigation = navItem.querySelector('.db-navigation-item-group-menu');
-        const button = navItem.querySelector('.db-navigation-item-group-expand-button');
-        if (subNavigation && button) {
-            /*
-             * This is set via css inside:
-             * `packages/components/src/components/navigation-item-group/navigation-item-group-menu-popover.scss`.
-             * We don't need to calculate the position of the menu as a popover.
-             */
-            const isMobile = getComputedStyle(subNavigation).getPropertyValue('--db-navigation-item-group-menu-mobile');
-            if (isMobile)
-                return;
-            if (level > 0 || subNavigation.dataset['open'] === 'horizontal') {
-                // Sub-Navigation should be opened horizontal
-                handleFixedPopover(subNavigation, button, 'right-start');
-                subNavigation.dataset['open'] = 'horizontal';
-            }
-            else {
-                // Sub-Navigation should be opened vertical
-                handleFixedPopover(subNavigation, button, 'bottom-start');
-                subNavigation.dataset['open'] = 'vertical';
-            }
-            handleSubNavigationPosition(subNavigation, level + 1);
-        }
-    }
+export default {
+    isEventTargetNavigationItem,
+    NavigationItemSafeTriangle
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "3.0.2-shell4-bdb351c",
+  "version": "3.0.3",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
     "tsc": "tsc --project . --sourceMap false"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.54.1",
+    "@playwright/experimental-ct-react": "1.54.2",
     "@types/react": "18.3.13",
     "react": "18.3.1",
     "react-dom": "18.3.1"
@@ -38,7 +38,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "3.0.2-shell4-bdb351c",
-    "@db-ux/core-foundations": "3.0.2-shell4-bdb351c"
+    "@db-ux/core-components": "3.0.3",
+    "@db-ux/core-foundations": "3.0.3"
   }
 }

package/dist/components/control-panel-brand/control-panel-brand.d.ts

@@ -1,3 +0,0 @@
-import * as React from "react";
-declare const DBControlPanelBrand: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "text" | "icon" | keyof import("../..").GlobalProps | "showIcon" | "additionalInformation"> & import("../..").GlobalProps & import("../..").IconProps & import("../..").ShowIconProps & import("../..").TextProps & import("../..").AdditionalInformationSlotProps & React.RefAttributes<any>>;
-export default DBControlPanelBrand;

package/dist/components/control-panel-brand/control-panel-brand.js

@@ -1,15 +0,0 @@
-"use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { DEFAULT_ICON } from "../../shared/constants";
-import { cls, getBooleanAsString } from "../../utils";
-function DBControlPanelBrandFn(props, component) {
-    var _a;
-    const _ref = component || useRef(component);
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { "data-icon": (_a = props.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON, "data-show-icon": getBooleanAsString(props.showIcon), id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-control-panel-brand", props.className) }),
-        props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children),
-        React.createElement(React.Fragment, null, props.additionalInformation)));
-}
-const DBControlPanelBrand = forwardRef(DBControlPanelBrandFn);
-export default DBControlPanelBrand;

package/dist/components/control-panel-brand/index.d.ts

@@ -1 +0,0 @@
-export { default as DBControlPanelBrand } from './control-panel-brand';

package/dist/components/control-panel-brand/index.js

@@ -1 +0,0 @@
-export { default as DBControlPanelBrand } from './control-panel-brand';

package/dist/components/control-panel-brand/model.d.ts

@@ -1,5 +0,0 @@
-import { AdditionalInformationSlotProps, GlobalProps, GlobalState, IconProps, ShowIconProps, TextProps } from '../../shared/model';
-export type DBControlPanelBrandDefaultProps = {};
-export type DBControlPanelBrandProps = DBControlPanelBrandDefaultProps & GlobalProps & IconProps & ShowIconProps & TextProps & AdditionalInformationSlotProps;
-export type DBControlPanelBrandDefaultState = {};
-export type DBControlPanelBrandState = DBControlPanelBrandDefaultState & GlobalState;

package/dist/components/control-panel-desktop/control-panel-desktop.d.ts

@@ -1,3 +0,0 @@
-import * as React from "react";
-declare const DBControlPanelDesktop: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "width" | "orientation" | keyof import("../..").GlobalProps | keyof import("../..").ControlPanelProps | keyof import("../..").SidebarProps> & import("../..").GlobalProps & import("../..").ContainerWidthProps & import("../..").ControlPanelProps & import("../..").OrientationProps & import("../..").SidebarProps & React.RefAttributes<any>>;
-export default DBControlPanelDesktop;

package/dist/components/control-panel-desktop/control-panel-desktop.js

@@ -1,62 +0,0 @@
-"use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, forwardRef } from "react";
-import { DEFAULT_COLLAPSE, DEFAULT_EXPAND } from "../../shared/constants";
-import { cls, getBoolean, getBooleanAsString, uuid } from "../../utils";
-import { handleSubNavigationPosition } from "../../utils/navigation";
-import DBButton from "../button/button";
-import DBTooltip from "../tooltip/tooltip";
-function DBControlPanelDesktopFn(props, component) {
-    var _a, _b, _c;
-    const _ref = component || useRef(component);
-    const _scrollContainerRef = useRef(null);
-    const [_id, set_id] = useState(() => `db-control-panel-desktop-${uuid()}`);
-    const [_open, set_open] = useState(() => true);
-    function handleToggle(event) {
-        if (typeof event.detail !== "object") {
-            event.stopPropagation();
-            set_open(!_open);
-        }
-    }
-    function getToggleButtonText() {
-        if (props.onExpandButtonTooltipFn) {
-            const open = _open;
-            return props.onExpandButtonTooltipFn(open);
-        }
-        if (props.expandButtonTooltip) {
-            return props.expandButtonTooltip;
-        }
-        return _open ? DEFAULT_COLLAPSE : DEFAULT_EXPAND;
-    }
-    function onScroll() {
-        if (!_scrollContainerRef.current)
-            return;
-        const popoverNavigation = _scrollContainerRef.current.querySelector('.db-navigation[data-variant="popover"]');
-        if (!popoverNavigation)
-            return;
-        const navigationMenu = popoverNavigation.querySelector("menu");
-        if (navigationMenu) {
-            handleSubNavigationPosition(navigationMenu);
-        }
-    }
-    const hasInitialized = useRef(false);
-    if (!hasInitialized.current) {
-        if (props.expanded !== undefined) {
-            set_open((_a = getBoolean(props.expanded, "expanded")) !== null && _a !== void 0 ? _a : true);
-        }
-        hasInitialized.current = true;
-    }
-    return (React.createElement("header", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "onToggle"]), getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-control-panel-desktop", props.className), id: (_b = props.id) !== null && _b !== void 0 ? _b : _id, "data-width": props.width, "data-orientation": props.orientation, "data-open": getBooleanAsString(_open) }),
-        React.createElement(React.Fragment, null, props.brand),
-        React.createElement("div", { className: "db-control-panel-desktop-scroll-container", ref: _scrollContainerRef, onScroll: (event) => onScroll() },
-            props.children,
-            React.createElement(React.Fragment, null, props.metaNavigation)),
-        React.createElement(React.Fragment, null, props.primaryActions),
-        React.createElement(React.Fragment, null, props.secondaryActions),
-        React.createElement("div", { className: "db-control-panel-desktop-button" },
-            React.createElement(DBButton, { variant: "ghost", type: "button", icon: "double_chevron_left", onClick: (event) => handleToggle(event), "aria-controls": (_c = props.id) !== null && _c !== void 0 ? _c : _id, "aria-expanded": _open, noText: true },
-                React.createElement(DBTooltip, { variant: "label", placement: "right" }, getToggleButtonText())))));
-}
-const DBControlPanelDesktop = forwardRef(DBControlPanelDesktopFn);
-export default DBControlPanelDesktop;

package/dist/components/control-panel-desktop/index.d.ts

@@ -1 +0,0 @@
-export { default as DBControlPanelDesktop } from './control-panel-desktop';

package/dist/components/control-panel-desktop/index.js

@@ -1 +0,0 @@
-export { default as DBControlPanelDesktop } from './control-panel-desktop';

package/dist/components/control-panel-desktop/model.d.ts

@@ -1,7 +0,0 @@
-import { ContainerWidthProps, ControlPanelProps, GlobalProps, GlobalState, OrientationProps, SidebarProps, SidebarState, ToggleEventState } from '../../shared/model';
-export type DBControlPanelDesktopDefaultProps = {};
-export type DBControlPanelDesktopProps = DBControlPanelDesktopDefaultProps & GlobalProps & ContainerWidthProps & ControlPanelProps & OrientationProps & SidebarProps;
-export type DBControlPanelDesktopDefaultState = {
-    onScroll: () => void;
-};
-export type DBControlPanelDesktopState = DBControlPanelDesktopDefaultState & GlobalState & ToggleEventState<HTMLButtonElement> & SidebarState;

package/dist/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.d.ts

@@ -1,3 +0,0 @@
-import * as React from "react";
-declare const DBControlPanelFlatIconNavigation: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "noText"> & import("./model").DBControlPanelFlatIconNavigationDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
-export default DBControlPanelFlatIconNavigation;

package/dist/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.js

@@ -1,26 +0,0 @@
-"use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString } from "../../utils";
-function DBControlPanelFlatIconNavigationFn(props, component) {
-    const _ref = component || useRef(undefined);
-    const [initialized, setInitialized] = useState(() => false);
-    useEffect(() => {
-        setInitialized(true);
-    }, []);
-    useEffect(() => {
-        if (_ref.current && initialized) {
-            const tooltips = _ref.current.querySelectorAll(".db-tooltip");
-            if ((tooltips === null || tooltips === void 0 ? void 0 : tooltips.length) > 0) {
-                const array = Array.from(tooltips);
-                for (const tooltip of array) {
-                    tooltip.dataset["placement"] = "top";
-                }
-            }
-        }
-    }, [_ref.current, initialized]);
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: props.id, "data-no-text": getBooleanAsString(props.noText) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-control-panel-flat-icon-navigation", props.className) }), props.children));
-}
-const DBControlPanelFlatIconNavigation = forwardRef(DBControlPanelFlatIconNavigationFn);
-export default DBControlPanelFlatIconNavigation;

package/dist/components/control-panel-flat-icon-navigation/index.d.ts

@@ -1 +0,0 @@
-export { default as DBControlPanelFlatIconNavigation } from "./control-panel-flat-icon-navigation";