@db-ux/react-core-components 1.1.1 → 2.0.0-0-custom-select-16b8cce

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

@@ -0,0 +1,173 @@
+import { BaseFormProps, CloseEventState, CustomFormProps, FormMessageProps, FormState, GlobalProps, GlobalState, IconProps, PlacementVerticalType, PopoverState, RequiredProps, ShowIconProps, ShowLabelProps, ValidationType, WidthProps } from '../../shared/model';
+import { DBCustomSelectFormFieldDefaultProps } from '../custom-select-form-field/model';
+import { CustomSelectDropdownWidthType } from '../custom-select-dropdown/model';
+import { DBCustomSelectListItemExtraProps } from '../custom-select-list-item/model';
+export type CustomSelectOptionType = {
+    /**
+     * Disables this option
+     */
+    disabled?: boolean;
+    /**
+     * Identifier for option
+     */
+    id?: string;
+    /**
+     * If the value is different from the label you want to show to the user.
+     */
+    label?: string;
+    /**
+     * The value for the option
+     */
+    value?: string;
+} & DBCustomSelectListItemExtraProps;
+export declare const SelectedTypeList: readonly ["amount", "text", "tag"];
+export type SelectedTypeType = (typeof SelectedTypeList)[number];
+export type DBCustomSelectDefaultProps = {
+    /**
+     * Optional: if select-type="amount" change the shown text
+     */
+    amountText?: string;
+    /**
+     * Label for the clear selection button
+     */
+    clearSelectionLabel?: string;
+    /**
+     * Deselect all checkbox label
+     */
+    deSelectAllLabel?: string;
+    /**
+     * Changes the behavior of the dropdown with.
+     * Default: fixed 328px
+     * Auto: Based on the size of the form-field
+     */
+    dropdownWidth?: CustomSelectDropdownWidthType | 'string';
+    /**
+     * Dropdown - hint if data has to be loaded
+     */
+    loadingText?: string;
+    /**
+     * Change the button text for mobile close
+     */
+    mobileCloseButtonText?: string;
+    /**
+     * Enables CustomSelect
+     */
+    multiple?: boolean;
+    /**
+     * Dropdown - hint if there are no options
+     */
+    noResultsText?: string;
+    /**
+     * Optional: if select-type="amount" when amount changes
+     * @param amount The amount of selected checkboxes
+     */
+    onAmountChange?: (amount: number) => void;
+    /**
+     * Triggers after some checkbox was clicked in dropdown
+     * @param values the changed values
+     */
+    onSelect?: (values: string[]) => void;
+    /**
+     * You should pass in the options as an array.
+     */
+    options?: CustomSelectOptionType[];
+    /**
+     * The `placement` attributes values change the position to absolute and adds a transform based on the placement.
+     */
+    placement?: PlacementVerticalType;
+    /**
+     * Optional: if you use selectedType=tag and options, you need to set the removeTagsTexts for screen reader users
+     */
+    removeTagsTexts?: string[];
+    /**
+     * Search label
+     */
+    searchLabel?: string;
+    /**
+     * Search placeholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * Select all checkbox label
+     */
+    selectAllLabel?: string;
+    /**
+     * Change the selected type for values shown in multi select
+     */
+    selectedType?: SelectedTypeType;
+    /**
+     * Show clear selection button (default:true). Hide it if you have very small inputs e.g. in tables.
+     */
+    showClearSelection?: boolean;
+    /**
+     * Dropdown - enable loading infotext and spinner
+     */
+    showLoading?: boolean;
+    /**
+     * Dropdown - enable no options infotext
+     */
+    showNoResults?: boolean;
+    /**
+     * Forces search in header.
+     */
+    showSearch?: boolean;
+    /**
+     * Forces select all checkbox (only for multiple).
+     */
+    showSelectAll?: boolean;
+    /**
+     * Initial value for multi select
+     */
+    values?: string[];
+    /**
+     * Programmatically open the dropdown. May differ if you don't use onDropdownToggle.
+     */
+    open?: boolean;
+    /**
+     * Informs the user when dropdown was toggled.
+     */
+    onDropdownToggle?: (event: any) => void;
+};
+export type DBCustomSelectProps = GlobalProps & CustomFormProps & BaseFormProps & RequiredProps & FormMessageProps & DBCustomSelectDefaultProps & DBCustomSelectFormFieldDefaultProps & WidthProps & IconProps & ShowIconProps & ShowLabelProps;
+export type DBCustomSelectDefaultState = {
+    _validity?: ValidationType;
+    _values?: string[];
+    _options?: CustomSelectOptionType[];
+    _selectedOptions?: CustomSelectOptionType[];
+    _hasNoOptions: boolean;
+    _selectId?: string;
+    _labelId?: string;
+    _summaryId?: string;
+    _placeholderId?: string;
+    _selectedLabels?: string;
+    _selectedLabelsId?: string;
+    _infoTextId?: string;
+    _externalChangeTimestamp?: number;
+    _internalChangeTimestamp?: number;
+    _name?: string;
+    getNativeSelectValue: () => string;
+    getOptionLabel: (option: CustomSelectOptionType) => string;
+    getOptionChecked: (value?: string) => boolean;
+    getOptionKey: (option: CustomSelectOptionType) => string;
+    getTagRemoveLabel: (index: number) => string;
+    selectAllEnabled: boolean;
+    searchEnabled: boolean;
+    amountOptions: number;
+    setDescById: (descId?: string) => void;
+    handleTagRemove: (option: CustomSelectOptionType, event?: any) => void;
+    handleSummaryFocus: () => void;
+    handleSelect: (value?: string) => void;
+    handleSelectAll: () => void;
+    handleClearAll: () => void;
+    handleDropdownToggle: (event: any) => void;
+    handleDocumentClose: (event: any) => void;
+    handleOpenByKeyboardFocus: (onlySearch?: boolean) => void;
+    handleFocusFirstDropdownCheckbox: (activeElement?: Element) => void;
+    handleKeyboardPress: (event: any) => void;
+    handleArrowDownUp: (event: any) => void;
+    handleSearch: (event: any) => void;
+    getSelectAllLabel: () => string;
+    selectAllChecked: boolean;
+    selectAllIndeterminate: boolean;
+};
+export type DBCustomSelectState = DBCustomSelectDefaultState & GlobalState & FormState & CloseEventState & PopoverState;

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

@@ -0,0 +1 @@
+export const SelectedTypeList = ['amount', 'text', 'tag'];

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

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

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

@@ -0,0 +1,12 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls } from "../../utils";
+function DBCustomSelectDropdownFn(props, component) {
+    props = Object.assign({ width: "fixed" }, props);
+    const _ref = component || useRef(component);
+    return (React.createElement("article", Object.assign({ "data-spacing": "none", 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 }, 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-custom-select-dropdown db-card", props.className), "data-width": props.width }), props.children));
+}
+const DBCustomSelectDropdown = forwardRef(DBCustomSelectDropdownFn);
+export default DBCustomSelectDropdown;

package/dist/components/custom-select-dropdown/index.d.ts

@@ -0,0 +1 @@
+export { default as DBCustomSelectDropdown } from './custom-select-dropdown';

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

@@ -0,0 +1 @@
+export { default as DBCustomSelectDropdown } from './custom-select-dropdown';

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

@@ -0,0 +1,15 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export declare const CustomSelectDropdownWidthList: readonly ["fixed", "auto", "full"];
+export type CustomSelectDropdownWidthType = (typeof CustomSelectDropdownWidthList)[number];
+export type DBCustomSelectDropdownDefaultProps = {
+    /**
+     * Changes the behavior of the dropdown with.
+     * Default: fixed 328px
+     * Full: Based on the size of the form-field
+     * Auto: Based on the size of the largest list item
+     */
+    width?: CustomSelectDropdownWidthType | string;
+};
+export type DBCustomSelectDropdownProps = DBCustomSelectDropdownDefaultProps & GlobalProps;
+export type DBCustomSelectDropdownDefaultState = {};
+export type DBCustomSelectDropdownState = DBCustomSelectDropdownDefaultState & GlobalState;

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

@@ -0,0 +1 @@
+export const CustomSelectDropdownWidthList = ['fixed', 'auto', 'full'];

package/dist/components/custom-select-form-field/custom-select-form-field.d.ts

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

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

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls } from "../../utils";
+function DBCustomSelectFormFieldFn(props, component) {
+    const _ref = component || useRef(component);
+    return (React.createElement("summary", 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 }, 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-custom-select-form-field", props.className) }), props.children));
+}
+const DBCustomSelectFormField = forwardRef(DBCustomSelectFormFieldFn);
+export default DBCustomSelectFormField;

package/dist/components/custom-select-form-field/index.d.ts

@@ -0,0 +1 @@
+export { default as DBCustomSelectFormField } from './custom-select-form-field';

package/dist/components/custom-select-form-field/index.js

@@ -0,0 +1 @@
+export { default as DBCustomSelectFormField } from './custom-select-form-field';

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

@@ -0,0 +1,5 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export type DBCustomSelectFormFieldDefaultProps = {};
+export type DBCustomSelectFormFieldProps = DBCustomSelectFormFieldDefaultProps & GlobalProps;
+export type DBCustomSelectFormFieldDefaultState = {};
+export type DBCustomSelectFormFieldState = DBCustomSelectFormFieldDefaultState & GlobalState;

package/dist/components/custom-select-form-field/model.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,12 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls } from "../../utils";
+function DBCustomSelectListFn(props, component) {
+    const _ref = component || useRef(component);
+    return (React.createElement("div", Object.assign({ role: props.multiple ? "group" : "radiogroup", "aria-label": props.label, 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 }, 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-custom-select-list", props.className) }),
+        React.createElement("ul", null, props.children)));
+}
+const DBCustomSelectList = forwardRef(DBCustomSelectListFn);
+export default DBCustomSelectList;

package/dist/components/custom-select-list/index.d.ts

@@ -0,0 +1 @@
+export { default as DBCustomSelectList } from './custom-select-list';

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

@@ -0,0 +1 @@
+export { default as DBCustomSelectList } from './custom-select-list';

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

@@ -0,0 +1,8 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export type DBCustomSelectListDefaultProps = {
+    label?: string;
+    multiple?: boolean;
+};
+export type DBCustomSelectListProps = DBCustomSelectListDefaultProps & GlobalProps;
+export type DBCustomSelectListDefaultState = {};
+export type DBCustomSelectListState = DBCustomSelectListDefaultState & GlobalState;

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

@@ -0,0 +1 @@
+export {};

package/dist/components/custom-select-list-item/custom-select-list-item.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+declare const DBCustomSelectListItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLLIElement>, "value" | "icon" | "checked" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").BaseFormProps | keyof import("./model").DBCustomSelectListItemDefaultProps | "isGroupTitle" | "showDivider"> & import("./model").DBCustomSelectListItemDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").BaseFormProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & {
+    isGroupTitle?: boolean;
+    showDivider?: boolean;
+} & import("../../shared/model").IconProps & import("../../shared/model").ShowIconProps & React.RefAttributes<HTMLLIElement>>;
+export default DBCustomSelectListItem;

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

@@ -0,0 +1,40 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getBooleanAsString, getHideProp, uuid } from "../../utils";
+function DBCustomSelectListItemFn(props, component) {
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => undefined);
+    const [hasDivider, setHasDivider] = useState(() => false);
+    function handleChange(event) {
+        if (props.onChange) {
+            props.onChange(event);
+        }
+        if (props.change) {
+            props.change(event);
+        }
+    }
+    function getIconAfter() {
+        if (props.isGroupTitle || props.type === "checkbox") {
+            return;
+        }
+        return props.checked ? "check" : "x_placeholder";
+    }
+    useEffect(() => {
+        var _a;
+        set_id((_a = props.id) !== null && _a !== void 0 ? _a : `custom-select-list-item-${uuid()}`);
+    }, []);
+    useEffect(() => {
+        setHasDivider(Boolean(props.isGroupTitle || props.showDivider));
+    }, [props.isGroupTitle, props.showDivider]);
+    return (React.createElement("li", 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: _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-custom-select-list-item", props.className, {
+            "db-checkbox": props.type === "checkbox" && !props.isGroupTitle,
+            "db-radio": props.type !== "checkbox" && !props.isGroupTitle,
+        }), "data-divider": getBooleanAsString(hasDivider) }), !props.isGroupTitle ? (React.createElement("label", { "data-icon": props.type !== "checkbox" && props.icon ? props.icon : undefined, "data-hide-icon": getHideProp(props.showIcon), "data-icon-after": getIconAfter() },
+        React.createElement("input", { className: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: props.type, name: props.name, checked: props.checked, disabled: props.disabled, value: props.value, onChange: (event) => handleChange(event) }),
+        props.label ? React.createElement(React.Fragment, null, props.label) : null,
+        !props.label ? React.createElement(React.Fragment, null, props.children) : null)) : (React.createElement("span", null, props.groupTitle))));
+}
+const DBCustomSelectListItem = forwardRef(DBCustomSelectListItemFn);
+export default DBCustomSelectListItem;

package/dist/components/custom-select-list-item/index.d.ts

@@ -0,0 +1 @@
+export { default as DBCustomSelectListItem } from './custom-select-list-item';

package/dist/components/custom-select-list-item/index.js

@@ -0,0 +1 @@
+export { default as DBCustomSelectListItem } from './custom-select-list-item';

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

@@ -0,0 +1,29 @@
+import { BaseFormProps, ChangeEventProps, ChangeEventState, FormCheckProps, GlobalProps, GlobalState, IconProps, ShowIconProps, ValueProps } from '../../shared/model';
+export declare const CustomSelectListItemTypeList: readonly ["checkbox", "radio"];
+export type CustomSelectListItemTypeType = (typeof CustomSelectListItemTypeList)[number];
+export type DBCustomSelectListItemExtraProps = {
+    /**
+     * If the item is a group title (only text)
+     */
+    isGroupTitle?: boolean;
+    /**
+     * Show a divider on the bottom of the list item for visual grouping (don't use it on every item)
+     */
+    showDivider?: boolean;
+} & IconProps & ShowIconProps;
+export type DBCustomSelectListItemDefaultProps = {
+    /**
+     * Set the title of a group of items - disables radio/checkbox behavior
+     */
+    groupTitle?: string;
+    /**
+     * Change the behavior of the item single(radio) or multiple(checkbox)
+     */
+    type?: CustomSelectListItemTypeType;
+};
+export type DBCustomSelectListItemProps = DBCustomSelectListItemDefaultProps & GlobalProps & BaseFormProps & ValueProps & FormCheckProps & ChangeEventProps<HTMLInputElement> & DBCustomSelectListItemExtraProps;
+export type DBCustomSelectListItemDefaultState = {
+    getIconAfter: () => string | undefined;
+    hasDivider?: boolean;
+};
+export type DBCustomSelectListItemState = DBCustomSelectListItemDefaultState & ChangeEventState<HTMLInputElement> & GlobalState;

package/dist/components/custom-select-list-item/model.js

@@ -0,0 +1 @@
+export const CustomSelectListItemTypeList = ['checkbox', 'radio'];

package/dist/components/divider/divider.js

@@ -8,5 +8,4 @@ function DBDividerFn(props, 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"]), { id: props.id, "data-margin": props.margin, "data-variant": props.variant, "data-emphasis": props.emphasis, "data-width": props.width }, 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-divider", props.className) })));
 }
 const DBDivider = forwardRef(DBDividerFn);
-DBDivider.defaultProps = {};
 export default DBDivider;

package/dist/components/drawer/drawer.js

@@ -67,5 +67,4 @@ function DBDrawerFn(props, component) {
             React.createElement("div", { className: "db-drawer-content" }, props.children))));
 }
 const DBDrawer = forwardRef(DBDrawerFn);
-DBDrawer.defaultProps = {};
 export default DBDrawer;

package/dist/components/header/header.js

@@ -65,5 +65,4 @@ function DBHeaderFn(props, component) {
                     React.createElement(React.Fragment, null, props.secondaryAction))))));
 }
 const DBHeader = forwardRef(DBHeaderFn);
-DBHeader.defaultProps = {};
 export default DBHeader;

package/dist/components/icon/icon.js

@@ -8,5 +8,4 @@ function DBIconFn(props, component) {
     return (React.createElement("span", Object.assign({ "aria-hidden": "true", 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 }, 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-icon", props.className), "data-icon": props.icon, "data-icon-weight": props.weight, "data-icon-variant": props.variant }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBIcon = forwardRef(DBIconFn);
-DBIcon.defaultProps = {};
 export default DBIcon;

package/dist/components/infotext/infotext.js

@@ -9,5 +9,4 @@ function DBInfotextFn(props, component) {
     return (React.createElement("span", 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 }, 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-infotext", props.className), "data-icon": props.icon, "data-semantic": props.semantic, "data-size": props.size, "data-hide-icon-before": getHideProp((_a = props.showIcon) !== null && _a !== void 0 ? _a : true) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBInfotext = forwardRef(DBInfotextFn);
-DBInfotext.defaultProps = {};
 export default DBInfotext;

package/dist/components/input/input.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "icon" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBInputDefaultProps | keyof import("../../shared/model").FormTextProps | keyof import("../../shared/model").InputEventProps<HTMLInputElement> | "iconAfter"> & import("./model").DBInputDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").InputEventProps<HTMLInputElement> & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").IconProps & import("../../shared/model").IconAfterProps & import("../../shared/model").FormMessageProps & import("../../shared/model").ShowIconProps & import("../../shared/model").FormSizeProps & React.RefAttributes<HTMLInputElement>>;
+declare const DBInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "required" | "value" | "size" | "icon" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBInputDefaultProps | keyof import("../../shared/model").FormTextProps | keyof import("../../shared/model").InputEventProps<HTMLInputElement> | "iconAfter"> & import("./model").DBInputDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").InputEventProps<HTMLInputElement> & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").IconProps & import("../../shared/model").IconAfterProps & import("../../shared/model").FormMessageProps & import("../../shared/model").ShowIconProps & import("../../shared/model").FormSizeProps & React.RefAttributes<HTMLInputElement>>;
 export default DBInput;

package/dist/components/input/input.js

@@ -107,14 +107,13 @@ function DBInputFn(props, component) {
     }, [props.value]);
     return (React.createElement("div", Object.assign({}, 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-input", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-hide-icon": getHideProp(props.showIcon), "data-icon": props.icon, "data-icon-after": props.iconAfter, "data-hide-icon-after": getHideProp(props.showIcon) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
-        React.createElement("input", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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: _id, name: props.name, type: props.type || "text", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: props.disabled, required: props.required, step: props.step, value: props.value, maxLength: props.maxLength, minLength: props.minLength, max: props.max, min: props.min, readOnly: props.readOnly, form: props.form, pattern: props.pattern, size: props.size, autoComplete: props.autocomplete, autoFocus: props.autofocus, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": _descByIds })),
-        props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_c = getDataList(props.dataList)) === null || _c === void 0 ? void 0 : _c.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null,
+        React.createElement("input", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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: _id, name: props.name, type: props.type || "text", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: props.disabled, required: props.required, step: props.step, value: props.value, maxLength: props.maxLength, minLength: props.minLength, max: props.max, min: props.min, readOnly: props.readOnly, form: props.form, pattern: props.pattern, size: props.size, autoComplete: props.autocomplete, autoFocus: props.autofocus, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": (_c = props.ariaDescribedBy) !== null && _c !== void 0 ? _c : _descByIds })),
+        props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_d = getDataList(props.dataList)) === null || _d === void 0 ? void 0 : _d.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null,
         props.children,
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
-        React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, (_d = props.validMessage) !== null && _d !== void 0 ? _d : DEFAULT_VALID_MESSAGE),
-        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, (_g = (_e = props.invalidMessage) !== null && _e !== void 0 ? _e : (_f = _ref.current) === null || _f === void 0 ? void 0 : _f.validationMessage) !== null && _g !== void 0 ? _g : DEFAULT_INVALID_MESSAGE),
+        React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, (_e = props.validMessage) !== null && _e !== void 0 ? _e : DEFAULT_VALID_MESSAGE),
+        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, (_f = props.invalidMessage) !== null && _f !== void 0 ? _f : (((_g = _ref.current) === null || _g === void 0 ? void 0 : _g.validationMessage) || DEFAULT_INVALID_MESSAGE)),
         React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
 }
 const DBInput = forwardRef(DBInputFn);
-DBInput.defaultProps = {};
 export default DBInput;

package/dist/components/link/link.js

@@ -14,5 +14,4 @@ function DBLinkFn(props, component) {
     return (React.createElement("a", 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 }, 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-link", props.className), href: props.href, target: props.target, rel: props.rel, role: props.role, hrefLang: props.hreflang, "aria-disabled": getBooleanAsString(props.disabled), tabIndex: props.disabled ? -1 : 0, "aria-selected": props.selected, "aria-label": props.label, "aria-current": props.current, "data-size": props.size, "data-hide-icon-after": getHideProp((_a = props.showIcon) !== null && _a !== void 0 ? _a : true), "data-variant": props.variant, "data-content": props.content || "internal", onClick: (event) => handleClick(event) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBLink = forwardRef(DBLinkFn);
-DBLink.defaultProps = {};
 export default DBLink;

package/dist/components/navigation/navigation.js

@@ -14,5 +14,4 @@ function DBNavigationFn(props, component) {
         React.createElement("menu", null, props.children)));
 }
 const DBNavigation = forwardRef(DBNavigationFn);
-DBNavigation.defaultProps = {};
 export default DBNavigation;

package/dist/components/navigation-item/navigation-item.js

@@ -74,5 +74,4 @@ function DBNavigationItemFn(props, component) {
                 React.createElement(React.Fragment, null, props.subNavigation)))) : null));
 }
 const DBNavigationItem = forwardRef(DBNavigationItemFn);
-DBNavigationItem.defaultProps = {};
 export default DBNavigationItem;

package/dist/components/notification/notification.js

@@ -22,5 +22,4 @@ function DBNotificationFn(props, component) {
         props.closeable ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event) }, (_a = props.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)) : null));
 }
 const DBNotification = forwardRef(DBNotificationFn);
-DBNotification.defaultProps = {};
 export default DBNotification;

package/dist/components/page/model.d.ts

@@ -20,6 +20,10 @@ export type DBPageDefaultProps = {
      * The slot can be used for React to set a header.
      */
     header?: any;
+    /**
+     * Adds `class` to `<main>` element
+     */
+    mainClass?: string;
     /**
      * The variant=fixed uses flex-box to make header and footer static
      */

package/dist/components/page/page.js

@@ -40,9 +40,8 @@ function DBPageFn(props, 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"]), { 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-page", props.className), "data-variant": props.variant, "data-fade-in": props.fadeIn, "data-fonts-loaded": getBooleanAsString(fontsLoaded) }),
         React.createElement(React.Fragment, null, props.header),
-        React.createElement("main", { className: "db-main" }, props.children),
+        React.createElement("main", { className: cls("db-main", props.mainClass) }, props.children),
         React.createElement(React.Fragment, null, props.footer)));
 }
 const DBPage = forwardRef(DBPageFn);
-DBPage.defaultProps = {};
 export default DBPage;

package/dist/components/popover/popover.js

@@ -71,5 +71,4 @@ function DBPopoverFn(props, component) {
         React.createElement("article", { className: "db-popover-content", "data-spacing": props.spacing, "data-gap": getBooleanAsString(props.gap), "data-animation": getBooleanAsString((_a = props.animation) !== null && _a !== void 0 ? _a : true), "data-open": props.open, "data-delay": props.delay, "data-width": props.width, "data-placement": props.placement }, props.children)));
 }
 const DBPopover = forwardRef(DBPopoverFn);
-DBPopover.defaultProps = {};
 export default DBPopover;

package/dist/components/radio/radio.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "checked" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps> & import("./model").DBRadioDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").FormCheckProps & import("../../shared/model").SizeProps & React.RefAttributes<HTMLInputElement>>;
+declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "required" | "value" | "size" | "checked" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel"> & import("./model").DBRadioDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & import("../../shared/model").SizeProps & React.RefAttributes<HTMLInputElement>>;
 export default DBRadio;

package/dist/components/radio/radio.js

@@ -46,5 +46,4 @@ function DBRadioFn(props, component) {
         props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBRadio = forwardRef(DBRadioFn);
-DBRadio.defaultProps = {};
 export default DBRadio;

package/dist/components/section/section.js

@@ -13,5 +13,4 @@ function DBSectionFn(props, component) {
     return (React.createElement("section", 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: _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-section", props.className), "data-spacing": props.spacing || "medium", "data-width": props.width }), props.children));
 }
 const DBSection = forwardRef(DBSectionFn);
-DBSection.defaultProps = {};
 export default DBSection;

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

@@ -1,9 +1,9 @@
 import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
 export type DBSelectDefaultProps = {
     /**
-     * The description attribute will add a paragraph below the select.
+     * Enable multiple select -> use DBCustomSelect/db-custom-select for a better look
      */
-    description?: string;
+    multiple?: boolean;
     /**
      * If you don't/can't use children/slots you can pass in the options as an array.
      */
@@ -35,7 +35,7 @@ export type DBSelectOptionType = {
      */
     value: string | string[] | number;
 };
-export type DBSelectProps = DBSelectDefaultProps & GlobalProps & ClickEventProps<HTMLSelectElement> & ChangeEventProps<HTMLSelectElement> & FocusEventProps<HTMLSelectElement> & InputEventProps<HTMLSelectElement> & FormProps & IconProps & FormMessageProps & ShowIconProps & FormSizeProps;
+export type DBSelectProps = GlobalProps & ClickEventProps<HTMLSelectElement> & ChangeEventProps<HTMLSelectElement> & FocusEventProps<HTMLSelectElement> & InputEventProps<HTMLSelectElement> & FormProps & IconProps & FormMessageProps & DBSelectDefaultProps & ShowIconProps & FormSizeProps;
 export type DBSelectDefaultState = {
     _placeholderId: string;
     getOptionLabel: (option: DBSelectOptionType) => string;

package/dist/components/select/select.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBSelect: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size" | "icon" | "onClick" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBSelectDefaultProps | keyof import("../../shared/model").ChangeEventProps<HTMLSelectElement> | keyof import("../../shared/model").FocusEventProps<HTMLSelectElement> | keyof import("../../shared/model").InputEventProps<HTMLSelectElement>> & import("./model").DBSelectDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLSelectElement> & import("../../shared/model").ChangeEventProps<HTMLSelectElement> & import("../../shared/model").FocusEventProps<HTMLSelectElement> & import("../../shared/model").InputEventProps<HTMLSelectElement> & import("../../shared/model").FormProps & import("../../shared/model").IconProps & import("../../shared/model").FormMessageProps & import("../../shared/model").ShowIconProps & import("../../shared/model").FormSizeProps & React.RefAttributes<HTMLSelectElement>>;
+declare const DBSelect: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "required" | "value" | "size" | "icon" | "onClick" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("../../shared/model").ChangeEventProps<HTMLSelectElement> | keyof import("../../shared/model").FocusEventProps<HTMLSelectElement> | keyof import("../../shared/model").InputEventProps<HTMLSelectElement> | keyof import("./model").DBSelectDefaultProps> & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLSelectElement> & import("../../shared/model").ChangeEventProps<HTMLSelectElement> & import("../../shared/model").FocusEventProps<HTMLSelectElement> & import("../../shared/model").InputEventProps<HTMLSelectElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").IconProps & import("../../shared/model").FormMessageProps & import("./model").DBSelectDefaultProps & import("../../shared/model").ShowIconProps & import("../../shared/model").FormSizeProps & React.RefAttributes<HTMLSelectElement>>;
 export default DBSelect;