@db-ux/react-core-components 4.4.0-loading-567cd0c → 4.4.1-floating-components-066d296

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @db-ux/react-core-components
 
+## 4.4.1
+
+### Patch Changes
+
+- fix: issue with tailwind not reflecting adaptive color changes with `[data-color="xxx"]` - [see commit 936638d](https://github.com/db-ux-design-system/core-web/commit/936638d672bbb6c0f8a0ecf77bf41fafa0e31656)
+
+- DBCustomSelect: Prevent floating label from flickering during initial render - [see commit e5ceff8](https://github.com/db-ux-design-system/core-web/commit/e5ceff861534186cf86d1f5f0a876e04aeac9e41)
+
 ## 4.4.0
 
 ### Minor Changes

package/dist/components/custom-select/custom-select.js

@@ -14,11 +14,10 @@ import DBCustomSelectListItem from "../custom-select-list-item/custom-select-lis
 import DBCustomSelectList from "../custom-select-list/custom-select-list";
 import DBInfotext from "../infotext/infotext";
 import DBInput from "../input/input";
-import DBLoadingIndicator from "../loading-indicator/loading-indicator";
 import DBTag from "../tag/tag";
 import DBTooltip from "../tooltip/tooltip";
 function DBCustomSelectFn(props, component) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     props = Object.assign({ clearSelectionText: "Clear selection", showClearSelection: true }, props);
     const _ref = component || useRef(component);
     const detailsRef = useRef(null);
@@ -690,20 +689,22 @@ function DBCustomSelectFn(props, component) {
                         React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, value: _searchValue, label: (_d = props.searchLabel) !== null && _d !== void 0 ? _d : DEFAULT_LABEL, placeholder: (_e = props.searchPlaceholder) !== null && _e !== void 0 ? _e : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
                                 ? _infoTextId
                                 : undefined, onInput: (event) => handleSearch(event) }))) : null,
-                    _hasNoOptions || props.showLoading ? (React.createElement(React.Fragment, null, props.showLoading ? (React.createElement(DBLoadingIndicator, { id: _infoTextId }, (_f = props.loadingText) !== null && _f !== void 0 ? _f : DEFAULT_MESSAGE)) : (React.createElement(DBInfotext, { semantic: "warning", id: _infoTextId }, (_g = props.noResultsText) !== null && _g !== void 0 ? _g : DEFAULT_MESSAGE)))) : (React.createElement(React.Fragment, null,
+                    _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: props.showLoading ? "circular_arrows" : undefined, semantic: props.showLoading ? "informational" : "warning" }, (_f = (props.showLoading
+                        ? props.loadingText
+                        : props.noResultsText)) !== null && _f !== void 0 ? _f : DEFAULT_MESSAGE)) : (React.createElement(React.Fragment, null,
                         React.createElement(React.Fragment, null,
                             selectAllEnabled ? (React.createElement("div", null,
                                 React.createElement("div", { className: "db-checkbox db-custom-select-list-item" },
                                     React.createElement("label", null,
                                         React.createElement("input", { type: "checkbox", value: "select-all", ref: selectAllRef, form: _id, checked: selectAllChecked, onChange: (event) => handleSelectAll(event) }),
                                         getSelectAllLabel())))) : null,
-                            React.createElement(DBCustomSelectList, { multiple: getBoolean(props.multiple, "multiple"), label: (_j = (_h = props.listLabel) !== null && _h !== void 0 ? _h : props.label) !== null && _j !== void 0 ? _j : DEFAULT_LABEL }, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement(DBCustomSelectListItem, { type: props.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: getOptionLabel(option), name: _id, checked: getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: (event) => handleSelect(option.value), key: getOptionKey(option, "custom-select-list-item-") }, !option.isGroupTitle ? (React.createElement(React.Fragment, null, getOptionLabel(option))) : null))))))),
+                            React.createElement(DBCustomSelectList, { multiple: getBoolean(props.multiple, "multiple"), label: (_h = (_g = props.listLabel) !== null && _g !== void 0 ? _g : props.label) !== null && _h !== void 0 ? _h : DEFAULT_LABEL }, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement(DBCustomSelectListItem, { type: props.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: getOptionLabel(option), name: _id, checked: getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: (event) => handleSelect(option.value), key: getOptionKey(option, "custom-select-list-item-") }, !option.isGroupTitle ? (React.createElement(React.Fragment, null, getOptionLabel(option))) : null))))))),
                     React.createElement("div", null,
-                        React.createElement(DBButton, { variant: "ghost", width: "full", icon: "cross", size: "small", name: _id, form: _id, onClick: (event) => handleClose(undefined, true) }, (_k = props.mobileCloseButtonText) !== null && _k !== void 0 ? _k : DEFAULT_CLOSE_BUTTON))))) : null),
-        ((_l = props.showClearSelection) !== null && _l !== void 0 ? _l : true) && (_values === null || _values === void 0 ? void 0 : _values.length) ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, name: _id, form: _id, onClick: (event) => handleClearAll(event) },
+                        React.createElement(DBButton, { variant: "ghost", width: "full", icon: "cross", size: "small", name: _id, form: _id, onClick: (event) => handleClose(undefined, true) }, (_j = props.mobileCloseButtonText) !== null && _j !== void 0 ? _j : DEFAULT_CLOSE_BUTTON))))) : null),
+        ((_k = props.showClearSelection) !== null && _k !== void 0 ? _k : true) && (_values === null || _values === void 0 ? void 0 : _values.length) ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, name: _id, form: _id, onClick: (event) => handleClearAll(event) },
             props.clearSelectionText,
             React.createElement(DBTooltip, { placement: "top" }, props.clearSelectionText))) : null,
-        React.createElement("span", { className: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_m = props.placeholder) !== null && _m !== void 0 ? _m : props.label),
+        React.createElement("span", { className: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_l = props.placeholder) !== null && _l !== void 0 ? _l : props.label),
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
         hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
         React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),

package/dist/components/notification/notification.d.ts

@@ -1,7 +1,4 @@
 import * as React from "react";
 import { ClickEvent } from "../../shared/model";
-declare const DBNotification: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "role" | "semantic" | "text" | keyof import("../../shared/model").GlobalProps | "icon" | "showIcon" | "width" | "delay" | "animation" | keyof import("../../shared/model").InnerCloseButtonProps | keyof import("./model").DBNotificationDefaultProps | keyof import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>>> & import("./model").DBNotificationDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").RoleProps & import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>> & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").InnerCloseButtonProps & {
-    animation?: boolean | string;
-    width?: import("../../shared/model").PopoverWidthType;
-} & import("../../shared/model").DelayProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
+declare const DBNotification: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "role" | "semantic" | "text" | keyof import("../../shared/model").GlobalProps | "icon" | "showIcon" | keyof import("../../shared/model").PopoverProps | keyof import("../../shared/model").InnerCloseButtonProps | keyof import("./model").DBNotificationDefaultProps | keyof import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>>> & import("./model").DBNotificationDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").RoleProps & import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>> & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").InnerCloseButtonProps & import("../../shared/model").PopoverProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
 export default DBNotification;

package/dist/components/popover/popover.d.ts

@@ -1,6 +1,3 @@
 import * as React from "react";
-declare const DBPopover: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "placement" | "width" | "spacing" | "delay" | "animation" | keyof import("./model").DBPopoverDefaultProps | "gap"> & import("./model").DBPopoverDefaultProps & import("../..").GlobalProps & import("../..").SpacingProps & import("../..").PlacementProps & import("../..").GapProps & {
-    animation?: boolean | string;
-    width?: import("../..").PopoverWidthType;
-} & import("../..").DelayProps & React.RefAttributes<any>>;
+declare const DBPopover: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "placement" | "spacing" | keyof import("../..").PopoverProps | keyof import("./model").DBPopoverDefaultProps | "gap"> & import("./model").DBPopoverDefaultProps & import("../..").GlobalProps & import("../..").SpacingProps & import("../..").PlacementProps & import("../..").GapProps & import("../..").PopoverProps & React.RefAttributes<any>>;
 export default DBPopover;

package/dist/components/popover/popover.js

@@ -26,7 +26,7 @@ function DBPopoverFn(props, component) {
         const article = _ref.current.querySelector("article");
         if (article) {
             // This is a workaround for angular
-            utilsDelay(() => {
+            void utilsDelay(() => {
                 var _a;
                 handleFixedPopover(article, _ref.current, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
             }, 1);

package/dist/components/tooltip/tooltip.d.ts

@@ -1,6 +1,3 @@
 import * as React from "react";
-declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "placement" | "emphasis" | "width" | "delay" | keyof import("./model").DBTooltipDefaultProps | "animation"> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & {
-    animation?: boolean | string;
-    width?: import("../../shared/model").PopoverWidthType;
-} & import("../../shared/model").DelayProps & React.RefAttributes<any>>;
+declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "placement" | "emphasis" | keyof import("./model").DBTooltipDefaultProps | keyof import("../../shared/model").PopoverProps> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & React.RefAttributes<any>>;
 export default DBTooltip;

package/dist/components/tooltip/tooltip.js

@@ -36,7 +36,7 @@ function DBTooltipFn(props, component) {
             return;
         if (_ref.current) {
             // This is a workaround for angular
-            utilsDelay(() => {
+            void utilsDelay(() => {
                 var _a;
                 // Due to race conditions we need to check for _ref again
                 if (_ref.current) {
@@ -70,6 +70,7 @@ function DBTooltipFn(props, component) {
         if (_ref.current && initialized && _id) {
             const parent = getParent();
             if (parent) {
+                handleAutoPlacement(parent);
                 ["mouseenter", "focusin"].forEach((event) => {
                     parent.addEventListener(event, () => handleEnter(parent));
                 });

package/dist/index.d.ts

@@ -77,5 +77,3 @@ export * from './utils/document-scroll-listener';
 export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';
-export * from "./components/loading-indicator";
-export * from "./components/loading-indicator/model";

package/dist/index.js

@@ -77,5 +77,3 @@ export * from './utils/document-scroll-listener';
 export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';
-export * from "./components/loading-indicator";
-export * from "./components/loading-indicator/model";

package/dist/shared/model.d.ts

@@ -158,6 +158,10 @@ export type PopoverDelayType = (typeof PopoverDelayList)[number];
 export declare const PopoverWidthList: readonly ["auto", "fixed"];
 export type PopoverWidthType = (typeof PopoverWidthList)[number];
 export type PopoverProps = {
+    /**
+     * Add a delay before showing the tooltip
+     */
+    delay?: PopoverDelayType;
     /**
      * Disable animation
      */
@@ -166,12 +170,6 @@ export type PopoverProps = {
      * Use fixed with for default max-width
      */
     width?: PopoverWidthType;
-} & DelayProps;
-export type DelayProps = {
-    /**
-     * Add a delay before showing the component
-     */
-    delay?: PopoverDelayType;
 };
 export type NameProps = {
     /**

package/dist/utils/floating-components.js

@@ -228,10 +228,54 @@ export const getFloatingProps = (element, parent, placement) => {
         innerHeight
     };
 };
+const MAX_ANCESTOR_DEPTH = 10;
+const ancestorCache = new WeakMap();
+const getAncestorHasCorrectedPlacement = (element) => {
+    if (ancestorCache.has(element)) {
+        return ancestorCache.get(element);
+    }
+    let current = element.parentElement;
+    let anchor = 0;
+    while (current && anchor < MAX_ANCESTOR_DEPTH) {
+        if (current.dataset['correctedPlacement']) {
+            ancestorCache.set(element, current);
+            return current;
+        }
+        current = current.parentElement;
+        anchor += 1;
+    }
+    ancestorCache.set(element, null);
+    return null;
+};
 export const handleFixedPopover = (element, parent, placement) => {
-    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);
+    var _a, _b;
+    const parentComputedStyles = getComputedStyle(parent);
+    const parentHasFloatingPosition = ['absolute', 'fixed'].includes(parentComputedStyles.position);
+    const ancestorWithCorrectedPlacement = getAncestorHasCorrectedPlacement(element);
+    const noFloatingAncestor = !ancestorWithCorrectedPlacement && !parentHasFloatingPosition;
+    const distance = (_b = (_a = getComputedStyle(element)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--db-popover-distance')) !== null && _b !== void 0 ? _b : '0px';
+    let { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    if (ancestorWithCorrectedPlacement) {
+        const ancestorRect = ancestorWithCorrectedPlacement.getBoundingClientRect();
+        left = Math.abs(left - ancestorRect.left);
+        right = (width + Math.abs(right - ancestorRect.right)) * 1.5; // We add a transform -50% later
+        top = Math.abs(top - ancestorRect.top);
+        bottom = (height + Math.abs(bottom - ancestorRect.bottom)) * 1.5; // We add a transform -50% later
+    }
+    if (parentHasFloatingPosition) {
+        /*
+         * If we have a floating element inside an element with position:absolute/fixed
+         * we need to calculate with relative values
+         * */
+        left = 0;
+        right = width;
+        top = 0;
+        bottom = height;
+        if (['auto', 'inherit', '0'].includes(parentComputedStyles.zIndex)) {
+            // We need the default zIndex for floating elements on the parent
+            parent.style.zIndex = '1';
+        }
+    }
     // Tooltip arrow position
     if (childWidth > width && (correctedPlacement.startsWith('bottom') || correctedPlacement.startsWith('top'))) {
         const diff = width / 2 / childWidth * 100;
@@ -241,6 +285,9 @@ export const handleFixedPopover = (element, parent, placement) => {
         else if (correctedPlacement.endsWith('end')) {
             element.style.setProperty('--db-tooltip-arrow-inline-start', `${100 - diff}%`);
         }
+        else {
+            element.style.setProperty('--db-tooltip-arrow-inline-start', `50%`);
+        }
     }
     if (childHeight > height && (correctedPlacement.startsWith('left') || correctedPlacement.startsWith('bottom'))) {
         const diff = height / 2 / childHeight * 100;
@@ -250,6 +297,9 @@ export const handleFixedPopover = (element, parent, placement) => {
         else if (correctedPlacement.endsWith('end')) {
             element.style.setProperty('--db-tooltip-arrow-block-start', `${100 - diff}%`);
         }
+        else {
+            element.style.setProperty('--db-tooltip-arrow-block-start', `50%`);
+        }
     }
     // Popover position
     if (correctedPlacement === 'right' || correctedPlacement === 'left') {
@@ -259,11 +309,11 @@ export const handleFixedPopover = (element, parent, placement) => {
     else if (correctedPlacement === 'right-start' || correctedPlacement === 'left-start') {
         const end = top + childHeight;
         element.style.insetBlockStart = `${top}px`;
-        element.style.insetBlockEnd = `${end > innerHeight ? innerHeight : end}px`;
+        element.style.insetBlockEnd = `${!parentHasFloatingPosition && end > innerHeight ? innerHeight : end}px`;
     }
     else if (correctedPlacement === 'right-end' || correctedPlacement === 'left-end') {
         const start = bottom - childHeight;
-        element.style.insetBlockStart = `${start < 0 ? 0 : start}px`;
+        element.style.insetBlockStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
         element.style.insetBlockEnd = `${bottom}px`;
     }
     else if (correctedPlacement === 'top' || correctedPlacement === 'bottom') {
@@ -273,32 +323,32 @@ export const handleFixedPopover = (element, parent, placement) => {
     else if (correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
         const end = left + childWidth;
         element.style.insetInlineStart = `${left}px`;
-        element.style.insetInlineEnd = `${end > innerWidth ? innerWidth : end}px`;
+        element.style.insetInlineEnd = `${!parentHasFloatingPosition && end > innerWidth ? innerWidth : end}px`;
     }
     else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
-        const start = left - childWidth;
-        element.style.insetInlineStart = `${right - childWidth}px`;
-        element.style.insetInlineEnd = `${start < 0 ? 0 : start}px`;
+        const start = right - childWidth;
+        element.style.insetInlineStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
+        element.style.insetInlineEnd = `${right}px`;
     }
     if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('right')) {
         const end = right + childWidth;
         element.style.insetInlineStart = `calc(${right}px + ${distance})`;
-        element.style.insetInlineEnd = `calc(${end > innerWidth ? innerWidth : end}px + ${distance})`;
+        element.style.insetInlineEnd = `calc(${noFloatingAncestor && end > innerWidth ? innerWidth : end}px + ${distance})`;
     }
     else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('left')) {
         const start = left - childWidth;
-        element.style.insetInlineStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetInlineStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
         element.style.insetInlineEnd = `calc(${right}px - ${distance})`;
     }
     else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('top')) {
         const start = top - childHeight;
-        element.style.insetBlockStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
-        element.style.insetBlockEnd = `calc(${bottom}px - ${distance})`;
+        element.style.insetBlockStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetBlockEnd = `calc(${parentHasFloatingPosition ? start : bottom}px - ${distance})`;
     }
     else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('bottom')) {
         const end = bottom + childHeight;
-        element.style.insetBlockStart = `calc(${bottom}px + ${distance})`;
-        element.style.insetBlockEnd = `calc(${end > innerHeight ? innerHeight : end}px + ${distance})`;
+        element.style.insetBlockStart = `calc(${parentHasFloatingPosition ? end : bottom}px + ${distance})`;
+        element.style.insetBlockEnd = `calc(${noFloatingAncestor && end > innerHeight ? innerHeight : end}px + ${distance})`;
     }
     element.style.position = 'fixed';
     element.dataset['correctedPlacement'] = correctedPlacement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.4.0-loading-567cd0c",
+  "version": "4.4.1-floating-components-066d296",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.4.0-loading-567cd0c",
-    "@db-ux/core-foundations": "4.4.0-loading-567cd0c"
+    "@db-ux/core-components": "4.4.1-floating-components-066d296",
+    "@db-ux/core-foundations": "4.4.1-floating-components-066d296"
   }
 }

package/dist/components/loading-indicator/examples/_indicators.data.d.ts

@@ -1,49 +0,0 @@
-import { PopoverDelayType, SizeType } from '../../../shared/model';
-import { LoadingIndicatorStateType, LoadingIndicatorVariantType } from '../model';
-export declare const indicators: {
-    variant: LoadingIndicatorVariantType;
-    progressText: string;
-    progressTextState: string;
-    label: string;
-}[];
-export declare const densities: {
-    value: string;
-    name: string;
-}[];
-export declare const indeterminateArray: {
-    value: boolean;
-    name: string;
-}[];
-export declare const sizes: {
-    value: SizeType;
-    name: string;
-}[];
-export declare const statesArray: {
-    value: LoadingIndicatorStateType;
-    name: string;
-}[];
-export declare const showLabels: {
-    value: boolean;
-    name: string;
-}[];
-export declare const showProgressTexts: {
-    value: boolean;
-    name: string;
-}[];
-export declare const overlays: {
-    value: boolean;
-    name: string;
-}[];
-export declare const delays: {
-    value: PopoverDelayType;
-    name: string;
-}[];
-export declare const buttonExamples: {
-    overlay: boolean;
-    name: string;
-}[];
-export type TimeoutStore = {
-    loadingState: LoadingIndicatorStateType;
-    onTimeoutFn: () => void;
-    getLabel: (loadingState: LoadingIndicatorStateType | string) => string;
-};

package/dist/components/loading-indicator/examples/_indicators.data.js

@@ -1,91 +0,0 @@
-export const indicators = [{
-        variant: 'inline',
-        progressText: '42 of 100',
-        progressTextState: '100 of 100',
-        label: 'Inline'
-    }, {
-        variant: 'onsite',
-        progressText: '42%',
-        progressTextState: '100%',
-        label: 'Onsite'
-    }, {
-        variant: 'progress-bar',
-        progressText: '42 of 100',
-        progressTextState: '100 of 100',
-        label: 'Progress'
-    }];
-export const densities = [{
-        value: 'functional',
-        name: 'Functional'
-    }, {
-        value: 'regular',
-        name: '(Default) Regular'
-    }, {
-        value: 'expressive',
-        name: 'Expressive'
-    }];
-export const indeterminateArray = [{
-        value: true,
-        name: '(Default) True'
-    }, {
-        value: false,
-        name: 'False'
-    }];
-export const sizes = [{
-        value: 'small',
-        name: 'Small'
-    }, {
-        value: 'medium',
-        name: '(Default) Medium'
-    }];
-export const statesArray = [{
-        value: 'inactive',
-        name: 'Inactive'
-    }, {
-        value: 'active',
-        name: 'Active'
-    }, {
-        value: 'successful',
-        name: 'Successful'
-    }, {
-        value: 'critical',
-        name: 'Critical'
-    }];
-export const showLabels = [{
-        value: true,
-        name: '(Default) True'
-    }, {
-        value: false,
-        name: 'False'
-    }];
-export const showProgressTexts = [{
-        value: true,
-        name: '(Default) True'
-    }, {
-        value: false,
-        name: 'False'
-    }];
-export const overlays = [{
-        value: false,
-        name: '(Default) False'
-    }, {
-        value: true,
-        name: 'True'
-    }];
-export const delays = [{
-        value: 'none',
-        name: '(Default) None'
-    }, {
-        value: 'slow',
-        name: 'Slow'
-    }, {
-        value: 'fast',
-        name: 'Fast'
-    }];
-export const buttonExamples = [{
-        overlay: false,
-        name: 'Without overlay'
-    }, {
-        overlay: true,
-        name: 'With overlay'
-    }];

package/dist/components/loading-indicator/index.d.ts

@@ -1 +0,0 @@
-export { default as DBLoadingIndicator } from "./loading-indicator";

package/dist/components/loading-indicator/index.js

@@ -1 +0,0 @@
-export { default as DBLoadingIndicator } from "./loading-indicator";

package/dist/components/loading-indicator/loading-indicator.d.ts

@@ -1,3 +0,0 @@
-import * as React from "react";
-declare const DBLoadingIndicator: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "size" | "showLabel" | keyof import("./model").DBLoadingIndicatorDefaultProps | "delay"> & import("./model").DBLoadingIndicatorDefaultProps & import("../..").GlobalProps & import("../..").SizeProps & import("../..").ShowLabelProps & import("../..").DelayProps & React.RefAttributes<any>>;
-export default DBLoadingIndicator;

package/dist/components/loading-indicator/loading-indicator.js

@@ -1,153 +0,0 @@
-"use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_ID } from "../../shared/constants";
-import { cls, delay as delayFn, getBooleanAsString, uuid } from "../../utils";
-function DBLoadingIndicatorFn(props, component) {
-    var _a, _b;
-    props = Object.assign({ indeterminate: true, variant: "inline", size: "medium", autoDisable: true }, props);
-    const _ref = component || useRef(undefined);
-    const [_id, set_id] = useState(() => DEFAULT_ID);
-    const [_loadingState, set_loadingState] = useState(() => "inactive");
-    const [_previousLoadingState, set_previousLoadingState] = useState(() => undefined);
-    const [_style, set_style] = useState(() => ({}));
-    const [initialized, setInitialized] = useState(() => false);
-    function getPercentage() {
-        if (props.indeterminate || !props.value || !props.max) {
-            return;
-        }
-        return `${(Number(props.value) / Number(props.max)).toFixed(2)}`;
-    }
-    function getRole() {
-        if (props.role) {
-            if (props.role === "none") {
-                return;
-            }
-            return props.role;
-        }
-        return "status";
-    }
-    function handleParentDisabled() {
-        if (_ref.current && props.autoDisable && initialized) {
-            let parent = _ref.current.parentElement;
-            if (parent && parent.localName === "db-loading-indicator") {
-                parent = parent.parentElement;
-            }
-            if (parent && "disabled" in parent) {
-                parent.disabled = _loadingState !== "inactive";
-            }
-        }
-    }
-    function handleParentAria(remove) {
-        if (_ref.current && _id && initialized) {
-            let parent = _ref.current.parentElement;
-            if (parent && parent.localName === "db-loading-indicator") {
-                parent = parent.parentElement;
-            }
-            if (!parent)
-                return;
-            const isButton = (parent === null || parent === void 0 ? void 0 : parent.localName) === "button";
-            if (!(isButton || props.overlay))
-                return;
-            const ariaAttribute = isButton ? "aria-labelledby" : "aria-describedby";
-            const ariaLabelledBy = parent.getAttribute(ariaAttribute);
-            let labelledByElements = ariaLabelledBy ? ariaLabelledBy.split(",") : [];
-            if (remove || _loadingState === "inactive") {
-                if (labelledByElements.includes(_id)) {
-                    labelledByElements = labelledByElements.filter((elementId) => elementId !== _id);
-                    if (!isButton) {
-                        parent.ariaBusy = null;
-                    }
-                }
-                else {
-                    return;
-                }
-            }
-            else {
-                if (!labelledByElements.includes(_id)) {
-                    labelledByElements.push(_id);
-                }
-                if (!isButton) {
-                    parent.ariaBusy = _loadingState === "active" ? "true" : null;
-                }
-            }
-            if (labelledByElements.length) {
-                parent.setAttribute(ariaAttribute, labelledByElements.join(","));
-            }
-            else {
-                parent.removeAttribute(ariaAttribute);
-            }
-        }
-    }
-    useEffect(() => {
-        set_id(props.id || "loading-indicator-" + uuid());
-        setInitialized(true);
-    }, []);
-    useEffect(() => {
-        handleParentDisabled();
-    }, [_ref.current, initialized, props.autoDisable, _loadingState]);
-    useEffect(() => {
-        handleParentAria(false);
-    }, [_ref.current, initialized, _loadingState, props.overlay, _id]);
-    useEffect(() => {
-        if (props.onTimeout) {
-            // Not merged if as workaround for angular
-            if (_loadingState !== "inactive" &&
-                _loadingState !== _previousLoadingState) {
-                set_previousLoadingState(_loadingState);
-                void delayFn(() => {
-                    if (props.onTimeout) {
-                        props.onTimeout(_loadingState);
-                    }
-                }, _loadingState === "active" ? 5000 : 2000);
-            }
-        }
-    }, [_loadingState, props.onTimeout]);
-    useEffect(() => {
-        if (_loadingState === props.state)
-            return;
-        if (props.state) {
-            set_loadingState(props.state);
-        }
-        else if (props.indeterminate === undefined || props.indeterminate) {
-            set_loadingState("active");
-        }
-        else {
-            set_loadingState("inactive");
-        }
-    }, [props.state]);
-    useEffect(() => {
-        if (_ref.current) {
-            if (props.delay === "slow" || props.delay === "fast") {
-                void delayFn(() => {
-                    if (_ref.current) {
-                        _ref.current.dataset["delay"] = "";
-                    }
-                }, props.delay === "slow" ? 500 : 250);
-            }
-        }
-    }, [_ref.current, props.delay]);
-    useEffect(() => {
-        set_style({
-            "--db-loading-indicator-percentage": getPercentage(),
-        });
-    }, [props.indeterminate, props.value, props.max]);
-    useEffect(() => {
-        return () => {
-            handleParentAria(true);
-            handleParentDisabled();
-        };
-    }, []);
-    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", "autoDisable", "onTimeout"]), 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-loading-indicator", props.className), style: _style, "data-indeterminate": getBooleanAsString(props.indeterminate), "data-size": props.size, "data-variant": props.variant, "data-delay": props.delay, "data-state": _loadingState, "data-overlay": getBooleanAsString(props.overlay) }),
-        props.variant !== "progress-bar" ? (React.createElement("svg", { className: "db-loading-indicator-circle", "aria-hidden": "true", viewBox: props.variant === "inline" ? "10 10 20 20" : "32 32 64 64" },
-            React.createElement("circle", { className: "db-loading-indicator-circle-track" }),
-            React.createElement("circle", { className: "db-loading-indicator-circle-segment" }))) : null,
-        React.createElement("div", { role: getRole() },
-            React.createElement("label", { "data-show-label": getBooleanAsString(props.showLabel), id: _id },
-                props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children),
-                React.createElement("progress", { value: props.indeterminate ? undefined : (_a = props.value) !== null && _a !== void 0 ? _a : 0, max: props.indeterminate ? undefined : (_b = props.max) !== null && _b !== void 0 ? _b : 100 }, props.indeterminate ? React.createElement(React.Fragment, null, undefined) : React.createElement(React.Fragment, null, props.progressText))),
-            !props.indeterminate ? (React.createElement("span", { "aria-hidden": "true", "data-show-progress-text": getBooleanAsString(props.showProgressText) }, props.progressText)) : null)));
-}
-const DBLoadingIndicator = forwardRef(DBLoadingIndicatorFn);
-export default DBLoadingIndicator;

package/dist/components/loading-indicator/model.d.ts

@@ -1,39 +0,0 @@
-import { DelayProps, GlobalProps, GlobalState, InitializedState, ShowLabelProps, SizeProps } from '../../shared/model';
-export declare const LoadingIndicatorVariantList: readonly ["progress-bar", "onsite", "inline"];
-export type LoadingIndicatorVariantType = (typeof LoadingIndicatorVariantList)[number];
-export declare const LoadingIndicatorStateList: readonly ["inactive", "active", "successful", "critical"];
-export type LoadingIndicatorStateType = (typeof LoadingIndicatorStateList)[number];
-export type DBLoadingIndicatorDefaultProps = {
-    indeterminate?: boolean | string;
-    label?: string;
-    max?: number | string;
-    progressText?: string;
-    /**
-     * Enables/disables the visibility of the progressText
-     */
-    showProgressText?: boolean | string;
-    value?: string | number;
-    overlay?: boolean | string;
-    variant?: LoadingIndicatorVariantType;
-    state?: LoadingIndicatorStateType | string;
-    /**
-     * Disable the parent component (e.g. a DBButton) when loading indicator is inside it
-     */
-    autoDisable?: boolean | string;
-    role?: 'alert' | 'status' | 'none';
-    /**
-     * Triggers after a timeout. For "active" after 5 seconds, for "successful" and "critical" after 2 seconds
-     */
-    onTimeout?: (state?: LoadingIndicatorStateType | string) => void;
-};
-export type DBLoadingIndicatorProps = DBLoadingIndicatorDefaultProps & GlobalProps & SizeProps & ShowLabelProps & DelayProps;
-export type DBLoadingIndicatorDefaultState = {
-    _loadingState?: LoadingIndicatorStateType | string;
-    _previousLoadingState?: LoadingIndicatorStateType | string;
-    _style: any;
-    getPercentage: () => string | undefined;
-    getRole: () => string | undefined;
-    handleParentAria: (remove: boolean) => void;
-    handleParentDisabled: () => void;
-};
-export type DBLoadingIndicatorState = DBLoadingIndicatorDefaultState & GlobalState & InitializedState;

package/dist/components/loading-indicator/model.js

@@ -1,2 +0,0 @@
-export const LoadingIndicatorVariantList = ['progress-bar', 'onsite', 'inline'];
-export const LoadingIndicatorStateList = ['inactive', 'active', 'successful', 'critical'];