@db-ux/react-core-components 2.0.0-0-6589a60 → 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/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,12 +107,12 @@ 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);

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/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;

package/dist/components/select/select.js

@@ -6,7 +6,7 @@ import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import DBInfotext from "../infotext/infotext";
 function DBSelectFn(props, component) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => undefined);
     const [_messageId, set_messageId] = useState(() => undefined);
@@ -78,8 +78,8 @@ function DBSelectFn(props, component) {
         }
     }
     function getOptionLabel(option) {
-        var _a;
-        return (_a = option.label) !== null && _a !== void 0 ? _a : option.value.toString();
+        var _a, _b;
+        return (_a = option.label) !== null && _a !== void 0 ? _a : (_b = option.value) === null || _b === void 0 ? void 0 : _b.toString();
     }
     useEffect(() => {
         var _a;
@@ -113,9 +113,9 @@ function DBSelectFn(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-select", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
-        React.createElement("select", 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"]), { required: props.required, disabled: props.disabled, id: _id, name: props.name, size: props.size, value: props.value, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": _descByIds }),
+        React.createElement("select", 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"]), { required: props.required, disabled: props.disabled, id: _id, name: props.name, size: props.size, value: props.value, autoComplete: props.autocomplete, multiple: props.multiple, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": _descByIds }),
             React.createElement("option", { hidden: true }),
-            props.options ? (React.createElement(React.Fragment, { key: uuid() }, (_b = props.options) === null || _b === void 0 ? void 0 : _b.map((option) => {
+            props.options ? (React.createElement(React.Fragment, null, (_b = props.options) === null || _b === void 0 ? void 0 : _b.map((option) => {
                 var _a;
                 return (React.createElement(React.Fragment, { key: uuid() },
                     option.options ? (React.createElement("optgroup", { label: getOptionLabel(option) }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (React.createElement("option", { key: optgroupOption.value.toString(), value: optgroupOption.value, disabled: optgroupOption.disabled }, getOptionLabel(optgroupOption)))))) : null,
@@ -125,7 +125,7 @@ function DBSelectFn(props, component) {
         React.createElement("span", { id: _placeholderId }, (_c = props.placeholder) !== null && _c !== void 0 ? _c : props.label),
         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: "critical", id: _invalidMessageId }, (_e = props.invalidMessage) !== null && _e !== void 0 ? _e : (((_f = _ref.current) === null || _f === void 0 ? void 0 : _f.validationMessage) || DEFAULT_INVALID_MESSAGE)),
         React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
 }
 const DBSelect = forwardRef(DBSelectFn);

package/dist/components/switch/switch.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBSwitch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "icon" | "checked" | keyof import("../../shared/model").GlobalProps | "emphasis" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps | "iconAfter" | "visualAid"> & import("./model").DBSwitchDefaultProps & 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").EmphasisProps & import("../../shared/model").SizeProps & import("../../shared/model").IconProps & import("../../shared/model").IconAfterProps & React.RefAttributes<HTMLInputElement>>;
+declare const DBSwitch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "required" | "value" | "size" | "icon" | "checked" | keyof import("../../shared/model").GlobalProps | "emphasis" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel" | "iconAfter" | "visualAid"> & import("./model").DBSwitchDefaultProps & 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").EmphasisProps & import("../../shared/model").SizeProps & import("../../shared/model").IconProps & import("../../shared/model").IconAfterProps & React.RefAttributes<HTMLInputElement>>;
 export default DBSwitch;

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

@@ -1,4 +1,4 @@
-import { ContentSlotProps, GlobalProps, GlobalState, IconProps, InitializedState, OverflowProps, SemanticProps, ShowIconProps, TagEmphasisProps } from '../../shared/model';
+import { ClickEvent, ContentSlotProps, GlobalProps, GlobalState, IconProps, InitializedState, OverflowProps, SemanticProps, ShowIconProps, TagEmphasisProps } from '../../shared/model';
 export declare const TagBehaviorList: readonly ["static", "removable"];
 export type TagBehaviorType = (typeof TagBehaviorList)[number];
 export type DBTagDefaultProps = {
@@ -19,7 +19,7 @@ export type DBTagDefaultProps = {
     /**
      * If "removeButton" attribute is set this function will be called when user clicks cancel button inside the tag.
      */
-    onRemove?: () => void;
+    onRemove?: (event?: any) => void;
     /**
      * The removeButton attribute shows the cancel button.
      */
@@ -40,6 +40,6 @@ export type DBTagDefaultProps = {
 export type DBTagProps = DBTagDefaultProps & GlobalProps & IconProps & SemanticProps & OverflowProps & TagEmphasisProps & ShowIconProps & ContentSlotProps;
 export type DBTagDefaultState = {
     getRemoveButtonText: () => string;
-    handleRemove: () => void;
+    handleRemove: (event?: ClickEvent<HTMLButtonElement>) => void;
 };
 export type DBTagState = DBTagDefaultState & GlobalState & InitializedState;

package/dist/components/tag/tag.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTag: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "content" | "overflow" | "icon" | keyof import("../..").GlobalProps | "showIcon" | "semantic" | "emphasis" | keyof import("./model").DBTagDefaultProps> & import("./model").DBTagDefaultProps & import("../..").GlobalProps & import("../..").IconProps & import("../..").SemanticProps & import("../..").OverflowProps & import("../..").TagEmphasisProps & import("../..").ShowIconProps & import("../..").ContentSlotProps & React.RefAttributes<HTMLDivElement>>;
+declare const DBTag: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "content" | "overflow" | "icon" | keyof import("../../shared/model").GlobalProps | "showIcon" | "semantic" | "emphasis" | keyof import("./model").DBTagDefaultProps> & import("./model").DBTagDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").OverflowProps & import("../../shared/model").TagEmphasisProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ContentSlotProps & React.RefAttributes<HTMLDivElement>>;
 export default DBTag;

package/dist/components/tag/tag.js

@@ -3,13 +3,14 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { cls, getBooleanAsString, getHideProp } from "../../utils";
+import { DEFAULT_REMOVE } from "../../shared/constants";
 function DBTagFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
-    function handleRemove() {
+    function handleRemove(event) {
         if (props.onRemove) {
-            props.onRemove();
+            props.onRemove(event);
         }
     }
     function getRemoveButtonText() {
@@ -17,7 +18,7 @@ function DBTagFn(props, component) {
             return props.removeButton;
         }
         // TODO: We should think this through again, if we would really like to have default and especially english, instead of german labels in here
-        return "Remove tag";
+        return DEFAULT_REMOVE;
     }
     const hasInitialized = useRef(false);
     if (!hasInitialized.current) {
@@ -40,7 +41,7 @@ function DBTagFn(props, component) {
         React.createElement(React.Fragment, null, props.content),
         props.children,
         props.text ? React.createElement(React.Fragment, null, props.text) : null,
-        props.behavior === "removable" ? (React.createElement("button", { className: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", onClick: (event) => handleRemove(), title: getRemoveButtonText() }, getRemoveButtonText())) : null));
+        props.behavior === "removable" ? (React.createElement("button", { className: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", onClick: (event) => handleRemove(event), title: getRemoveButtonText() }, getRemoveButtonText())) : null));
 }
 const DBTag = forwardRef(DBTagFn);
 export default DBTag;