@db-ux/react-core-components 3.0.0 → 3.0.1

package/dist/components/checkbox/checkbox.js

@@ -14,7 +14,7 @@ function DBCheckboxFn(props, component) {
     const [_validMessageId, set_validMessageId] = useState(() => undefined);
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
-    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
     function hasValidState() {
         var _a;
@@ -46,7 +46,7 @@ function DBCheckboxFn(props, component) {
             set_descByIds(_messageId);
         }
         else {
-            set_descByIds("");
+            set_descByIds(undefined);
         }
     }
     function handleChange(event) {
@@ -90,6 +90,7 @@ function DBCheckboxFn(props, component) {
             if (stringPropVisible(props.message, props.showMessage)) {
                 set_descByIds(messageId);
             }
+            handleValidation();
         }
     }, [_id]);
     useEffect(() => {

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

@@ -34,7 +34,8 @@ function DBCustomSelectFn(props, component) {
     const [_placeholderId, set_placeholderId] = useState(() => undefined);
     const [_infoTextId, set_infoTextId] = useState(() => undefined);
     const [_validity, set_validity] = useState(() => "no-validation");
-    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_userInteraction, set_userInteraction] = useState(() => false);
+    const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_selectedLabels, set_selectedLabels] = useState(() => "");
     const [_selectedLabelsId, set_selectedLabelsId] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
@@ -76,7 +77,9 @@ function DBCustomSelectFn(props, component) {
                 set_voiceOverFallback(_invalidMessage);
                 delay(() => set_voiceOverFallback(""), 1000);
             }
-            set_validity((_c = props.validation) !== null && _c !== void 0 ? _c : "invalid");
+            if (_userInteraction) {
+                set_validity((_c = props.validation) !== null && _c !== void 0 ? _c : "invalid");
+            }
         }
         else if (hasValidState() &&
             ((_d = selectRef.current) === null || _d === void 0 ? void 0 : _d.validity.valid) &&
@@ -300,6 +303,7 @@ function DBCustomSelectFn(props, component) {
         if (skip)
             return;
         set_values(values);
+        set_userInteraction(true);
         if (props.onOptionSelected) {
             props.onOptionSelected(values !== null && values !== void 0 ? values : []);
         }
@@ -485,7 +489,7 @@ function DBCustomSelectFn(props, component) {
         else if (_options) {
             set_hasNoOptions(_options.length === 0);
         }
-    }, [props.showNoResults, _options]);
+    }, [props.showNoResults, props.showLoading, _options]);
     useEffect(() => {
         var _a;
         setSelectAllEnabled(Boolean(props.multiple && ((_a = props.showSelectAll) !== null && _a !== void 0 ? _a : amountOptions > 5)));
@@ -503,8 +507,10 @@ function DBCustomSelectFn(props, component) {
         }
     }, [props.values]);
     useEffect(() => {
-        handleValidation();
-    }, [_values]);
+        if (selectRef.current) {
+            handleValidation();
+        }
+    }, [_values, selectRef.current]);
     useEffect(() => {
         set_validity(props.validation);
     }, [props.validation]);
@@ -611,7 +617,9 @@ 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(DBInfotext, { id: _infoTextId, icon: _hasNoOptions ? undefined : "circular_arrows", semantic: _hasNoOptions ? "warning" : "informational" }, (_f = (_hasNoOptions ? props.noResultsText : props.loadingText)) !== null && _f !== void 0 ? _f : 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" },

package/dist/components/custom-select/model.d.ts

@@ -190,6 +190,7 @@ export type DBCustomSelectDefaultState = {
     _internalChangeTimestamp: number;
     _documentClickListenerCallbackId?: string;
     _searchValue?: string;
+    _userInteraction?: boolean;
     getNativeSelectValue: () => string;
     getOptionLabel: (option: CustomSelectOptionType) => string;
     getOptionChecked: (value?: string) => boolean;

package/dist/components/header/header.js

@@ -2,15 +2,14 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_BURGER_MENU, DEFAULT_ID } from "../../shared/constants";
-import { addAttributeToChildren, cls, getBoolean, uuid } from "../../utils";
+import { DEFAULT_BURGER_MENU } from "../../shared/constants";
+import { addAttributeToChildren, cls, getBoolean } from "../../utils";
 import { isEventTargetNavigationItem } from "../../utils/navigation";
 import DBButton from "../button/button";
 import DBDrawer from "../drawer/drawer";
 function DBHeaderFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
-    const [_id, set_id] = useState(() => DEFAULT_ID);
     const [initialized, setInitialized] = useState(() => false);
     const [forcedToMobile, setForcedToMobile] = useState(() => false);
     function handleToggle(event) {
@@ -29,23 +28,19 @@ function DBHeaderFn(props, component) {
     }
     useEffect(() => {
         setInitialized(true);
-        set_id(props.id || "header-" + uuid());
     }, []);
     useEffect(() => {
-        if (initialized && document && _id && props.forceMobile) {
-            const headerElement = document.getElementById(_id !== null && _id !== void 0 ? _id : "");
-            if (headerElement) {
-                // Adds this attribute to the header to enable all styling which would have
-                // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
-                addAttributeToChildren(headerElement, {
-                    key: "data-force-mobile",
-                    value: "true",
-                });
-            }
+        if (initialized && _ref.current && props.forceMobile) {
+            // Adds this attribute to the header to enable all styling which would have
+            // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
+            addAttributeToChildren(_ref.current, {
+                key: "data-force-mobile",
+                value: "true",
+            });
             setForcedToMobile(true);
         }
-    }, [initialized]);
-    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-header", props.className), id: _id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
+    }, [initialized, _ref.current]);
+    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-header", props.className), id: props.id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
         React.createElement(DBDrawer, { className: "db-header-drawer", spacing: "small", rounded: true, open: getBoolean(props.drawerOpen), onClose: (event) => handleToggle() },
             React.createElement("div", { className: "db-header-drawer-navigation" },
                 React.createElement("div", { className: "db-header-navigation", onClick: (event) => handleNavigationItemClick(event) }, props.children),
@@ -64,7 +59,7 @@ function DBHeaderFn(props, component) {
                     React.createElement(React.Fragment, null, props.primaryAction))),
             React.createElement("div", { className: "db-header-action-container" },
                 React.createElement("div", { className: "db-header-burger-menu-container" },
-                    React.createElement(DBButton, { icon: "menu", variant: "ghost", id: _id + "-burger-menu", noText: true, onClick: (event) => handleToggle() }, (_a = props.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)),
+                    React.createElement(DBButton, { icon: "menu", variant: "ghost", noText: true, onClick: (event) => handleToggle() }, (_a = props.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)),
                 React.createElement("div", { className: "db-header-secondary-action" },
                     React.createElement(React.Fragment, null, props.secondaryAction))))));
 }

package/dist/components/input/input.js

@@ -14,8 +14,8 @@ function DBInputFn(props, component) {
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
     const [_dataListId, set_dataListId] = useState(() => undefined);
-    const [_descByIds, set_descByIds] = useState(() => "");
-    const [_value, set_value] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => undefined);
+    const [_value, set_value] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
     function hasValidState() {
         var _a;
@@ -47,7 +47,7 @@ function DBInputFn(props, component) {
             set_descByIds(_messageId);
         }
         else {
-            set_descByIds("");
+            set_descByIds(undefined);
         }
     }
     function handleInput(event) {
@@ -108,6 +108,7 @@ function DBInputFn(props, component) {
             if (stringPropVisible(props.message, props.showMessage)) {
                 set_descByIds(messageId);
             }
+            handleValidation();
         }
     }, [_id]);
     useEffect(() => {

package/dist/components/select/select.js

@@ -14,7 +14,7 @@ function DBSelectFn(props, component) {
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
     const [_placeholderId, set_placeholderId] = useState(() => "");
-    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_value, set_value] = useState(() => "");
     const [initialized, setInitialized] = useState(() => false);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
@@ -113,6 +113,7 @@ function DBSelectFn(props, component) {
             else {
                 set_descByIds(placeholderId);
             }
+            handleValidation();
             setInitialized(false);
         }
     }, [_id, initialized]);

package/dist/components/textarea/textarea.js

@@ -13,7 +13,7 @@ function DBTextareaFn(props, component) {
     const [_validMessageId, set_validMessageId] = useState(() => undefined);
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
-    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_value, set_value] = useState(() => "");
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
     function hasValidState() {
@@ -46,7 +46,7 @@ function DBTextareaFn(props, component) {
             set_descByIds(_messageId);
         }
         else {
-            set_descByIds("");
+            set_descByIds(undefined);
         }
     }
     function handleInput(event) {
@@ -95,6 +95,7 @@ function DBTextareaFn(props, component) {
             if (stringPropVisible(props.message, props.showMessage)) {
                 set_descByIds(messageId);
             }
+            handleValidation();
         }
     }, [_id]);
     useEffect(() => {

package/dist/index.d.ts

@@ -1,40 +1,79 @@
 export * from './components/accordion';
 export * from './components/accordion-item';
+export * from './components/accordion-item/model';
+export * from './components/accordion/model';
 export * from './components/badge';
+export * from './components/badge/model';
 export * from './components/brand';
+export * from './components/brand/model';
 export * from './components/button';
+export * from './components/button/model';
 export * from './components/card';
+export * from './components/card/model';
 export * from './components/checkbox';
+export * from './components/checkbox/model';
 export * from './components/custom-select';
 export * from './components/custom-select-dropdown';
+export * from './components/custom-select-dropdown/model';
 export * from './components/custom-select-form-field';
+export * from './components/custom-select-form-field/model';
 export * from './components/custom-select-list';
 export * from './components/custom-select-list-item';
+export * from './components/custom-select-list-item/model';
+export * from './components/custom-select-list/model';
+export * from './components/custom-select/model';
 export * from './components/divider';
+export * from './components/divider/model';
 export * from './components/drawer';
+export * from './components/drawer/model';
 export * from './components/header';
+export * from './components/header/model';
 export * from './components/icon';
+export * from './components/icon/model';
 export * from './components/infotext';
+export * from './components/infotext/model';
 export * from './components/input';
+export * from './components/input/model';
 export * from './components/link';
+export * from './components/link/model';
 export * from './components/navigation';
 export * from './components/navigation-item';
+export * from './components/navigation-item/model';
+export * from './components/navigation/model';
 export * from './components/notification';
+export * from './components/notification/model';
 export * from './components/page';
+export * from './components/page/model';
 export * from './components/popover';
+export * from './components/popover/model';
 export * from './components/radio';
+export * from './components/radio/model';
 export * from './components/section';
+export * from './components/section/model';
 export * from './components/select';
+export * from './components/select/model';
 export * from './components/stack';
+export * from './components/stack/model';
 export * from './components/switch';
+export * from './components/switch/model';
 export * from './components/tab-item';
+export * from './components/tab-item/model';
 export * from './components/tab-list';
+export * from './components/tab-list/model';
 export * from './components/tab-panel';
+export * from './components/tab-panel/model';
 export * from './components/tabs';
+export * from './components/tabs/model';
 export * from './components/tag';
+export * from './components/tag/model';
 export * from './components/textarea';
+export * from './components/textarea/model';
 export * from './components/tooltip';
+export * from './components/tooltip/model';
 export * from './shared/constants';
 export * from './shared/model';
+export * from './utils/document-click-listener';
+export * from './utils/document-scroll-listener';
+export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';

package/dist/index.js

@@ -1,40 +1,79 @@
 export * from './components/accordion';
 export * from './components/accordion-item';
+export * from './components/accordion-item/model';
+export * from './components/accordion/model';
 export * from './components/badge';
+export * from './components/badge/model';
 export * from './components/brand';
+export * from './components/brand/model';
 export * from './components/button';
+export * from './components/button/model';
 export * from './components/card';
+export * from './components/card/model';
 export * from './components/checkbox';
+export * from './components/checkbox/model';
 export * from './components/custom-select';
 export * from './components/custom-select-dropdown';
+export * from './components/custom-select-dropdown/model';
 export * from './components/custom-select-form-field';
+export * from './components/custom-select-form-field/model';
 export * from './components/custom-select-list';
 export * from './components/custom-select-list-item';
+export * from './components/custom-select-list-item/model';
+export * from './components/custom-select-list/model';
+export * from './components/custom-select/model';
 export * from './components/divider';
+export * from './components/divider/model';
 export * from './components/drawer';
+export * from './components/drawer/model';
 export * from './components/header';
+export * from './components/header/model';
 export * from './components/icon';
+export * from './components/icon/model';
 export * from './components/infotext';
+export * from './components/infotext/model';
 export * from './components/input';
+export * from './components/input/model';
 export * from './components/link';
+export * from './components/link/model';
 export * from './components/navigation';
 export * from './components/navigation-item';
+export * from './components/navigation-item/model';
+export * from './components/navigation/model';
 export * from './components/notification';
+export * from './components/notification/model';
 export * from './components/page';
+export * from './components/page/model';
 export * from './components/popover';
+export * from './components/popover/model';
 export * from './components/radio';
+export * from './components/radio/model';
 export * from './components/section';
+export * from './components/section/model';
 export * from './components/select';
+export * from './components/select/model';
 export * from './components/stack';
+export * from './components/stack/model';
 export * from './components/switch';
+export * from './components/switch/model';
 export * from './components/tab-item';
+export * from './components/tab-item/model';
 export * from './components/tab-list';
+export * from './components/tab-list/model';
 export * from './components/tab-panel';
+export * from './components/tab-panel/model';
 export * from './components/tabs';
+export * from './components/tabs/model';
 export * from './components/tag';
+export * from './components/tag/model';
 export * from './components/textarea';
+export * from './components/textarea/model';
 export * from './components/tooltip';
+export * from './components/tooltip/model';
 export * from './shared/constants';
 export * from './shared/model';
+export * from './utils/document-click-listener';
+export * from './utils/document-scroll-listener';
+export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -15,22 +15,22 @@
   ],
   "scripts": {
     "build": "npm-run-all tsc",
-    "mv:dist": "cpr dist ../../build-outputs/react/dist -o",
-    "mv:package.json": "cpr package.json ../../build-outputs/react/package.json -o",
-    "mv:readme": "cpr README.md ../../build-outputs/react/README.md -o",
+    "mv:dist": "cpr dist ../../build-outputs/react/dist --overwrite",
+    "mv:package.json": "cpr package.json ../../build-outputs/react/package.json --overwrite",
+    "mv:readme": "cpr README.md ../../build-outputs/react/README.md --overwrite",
     "open:report": "npx playwright show-report",
     "postbuild": "npm-run-all --parallel mv:*",
-    "regenerate:screenshots": "playwright test -c playwright.config.ts --update-snapshots",
-    "test:components": "playwright test -c playwright.config.ts",
-    "test:windows": "playwright test -c playwright.screen-reader.win.ts",
-    "test:components:ui": "playwright test -c playwright.config.ts --ui",
-    "tsc": "tsc -p . --sourceMap false"
+    "regenerate:screenshots": "playwright test --config playwright.config.ts --update-snapshots",
+    "test:components": "playwright test --config playwright.config.ts",
+    "test:windows": "playwright test --config playwright.screen-reader.win.ts",
+    "test:components:ui": "playwright test --config playwright.config.ts --ui",
+    "tsc": "tsc --project . --sourceMap false"
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "1.54.1",
-    "@types/react": "^18.3.13",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "@types/react": "18.3.13",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -38,7 +38,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "3.0.0",
-    "@db-ux/core-foundations": "3.0.0"
+    "@db-ux/core-components": "3.0.1",
+    "@db-ux/core-foundations": "3.0.1"
   }
 }