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

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,9 +125,8 @@ 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);
-DBSelect.defaultProps = {};
 export default DBSelect;

package/dist/components/stack/stack.js

@@ -8,5 +8,4 @@ function DBStackFn(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-stack", props.className), "data-gap": props.gap, "data-variant": props.variant, "data-direction": props.direction, "data-alignment": props.alignment, "data-justify-content": props.justifyContent, "data-wrap": getBooleanAsString(props.wrap) }), props.children));
 }
 const DBStack = forwardRef(DBStackFn);
-DBStack.defaultProps = {};
 export default DBStack;

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/switch/switch.js

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

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

@@ -34,5 +34,4 @@ function DBTabItemFn(props, component) {
             props.children)));
 }
 const DBTabItem = forwardRef(DBTabItemFn);
-DBTabItem.defaultProps = {};
 export default DBTabItem;

package/dist/components/tab-list/tab-list.js

@@ -14,5 +14,4 @@ function DBTabListFn(props, component) {
         React.createElement("ul", { role: "tablist" }, props.children)));
 }
 const DBTabList = forwardRef(DBTabListFn);
-DBTabList.defaultProps = {};
 export default DBTabList;

package/dist/components/tab-panel/tab-panel.js

@@ -11,5 +11,4 @@ function DBTabPanelFn(props, component) {
         props.children));
 }
 const DBTabPanel = forwardRef(DBTabPanelFn);
-DBTabPanel.defaultProps = {};
 export default DBTabPanel;

package/dist/components/tabs/tabs.js

@@ -150,5 +150,4 @@ function DBTabsFn(props, component) {
         props.children));
 }
 const DBTabs = forwardRef(DBTabsFn);
-DBTabs.defaultProps = {};
 export default DBTabs;

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,8 +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);
-DBTag.defaultProps = {};
 export default DBTag;

package/dist/components/textarea/textarea.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTextarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps | keyof import("../../shared/model").FormTextProps | keyof import("./model").DBTextareaDefaultProps | keyof import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").InputEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").FocusEventProps<HTMLTextAreaElement>> & import("./model").DBTextareaDefaultProps & import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> & import("../../shared/model").InputEventProps<HTMLTextAreaElement> & import("../../shared/model").FocusEventProps<HTMLTextAreaElement> & import("../../shared/model").FormProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").FormMessageProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const DBTextarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "required" | "value" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("../../shared/model").FormTextProps | keyof import("./model").DBTextareaDefaultProps | keyof import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").InputEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").FocusEventProps<HTMLTextAreaElement>> & import("./model").DBTextareaDefaultProps & import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> & import("../../shared/model").InputEventProps<HTMLTextAreaElement> & import("../../shared/model").FocusEventProps<HTMLTextAreaElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").FormMessageProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default DBTextarea;

package/dist/components/textarea/textarea.js

@@ -6,7 +6,7 @@ import DBInfotext from "../infotext/infotext";
 import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_ROWS, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 function DBTextareaFn(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);
@@ -98,9 +98,8 @@ function DBTextareaFn(props, component) {
         React.createElement("textarea", 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, "data-resize": props.resize, disabled: props.disabled, required: props.required, readOnly: props.readOnly, form: props.form, maxLength: props.maxLength, minLength: props.minLength, name: props.name, wrap: props.wrap, spellCheck: props.spellCheck, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), value: props.value, "aria-describedby": _descByIds, placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, rows: (_c = props.rows) !== null && _c !== void 0 ? _c : DEFAULT_ROWS, cols: props.cols })),
         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 DBTextarea = forwardRef(DBTextareaFn);
-DBTextarea.defaultProps = {};
 export default DBTextarea;

package/dist/components/tooltip/tooltip.js

@@ -40,5 +40,4 @@ function DBTooltipFn(props, component) {
     return (React.createElement("i", Object.assign({ role: "tooltip", "aria-hidden": "true", "data-gap": "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"]), 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-tooltip", props.className), id: _id, "data-emphasis": props.emphasis, "data-animation": getBooleanAsString((_a = props.animation) !== null && _a !== void 0 ? _a : true), "data-delay": props.delay, "data-width": props.width, "data-show-arrow": getBooleanAsString((_b = props.showArrow) !== null && _b !== void 0 ? _b : true), "data-placement": props.placement, onClick: (event) => handleClick(event) }), props.children));
 }
 const DBTooltip = forwardRef(DBTooltipFn);
-DBTooltip.defaultProps = {};
 export default DBTooltip;

package/dist/index.d.ts

@@ -34,3 +34,8 @@ export * from './shared/model';
 export * from './utils/index';
 export * from './utils/navigation';
 export * from './components/stack';
+export * from './components/custom-select';
+export * from './components/custom-select-form-field';
+export * from './components/custom-select-dropdown';
+export * from './components/custom-select-list';
+export * from './components/custom-select-list-item';

package/dist/index.js

@@ -34,3 +34,8 @@ export * from './shared/model';
 export * from './utils/index';
 export * from './utils/navigation';
 export * from './components/stack';
+export * from './components/custom-select';
+export * from './components/custom-select-form-field';
+export * from './components/custom-select-dropdown';
+export * from './components/custom-select-list';
+export * from './components/custom-select-list-item';

package/dist/shared/constants.d.ts

@@ -1,6 +1,9 @@
 export declare const DEFAULT_ID: string;
 export declare const DEFAULT_LABEL: string;
 export declare const DEFAULT_PLACEHOLDER: string;
+export declare const DEFAULT_MESSAGE: string;
+export declare const DEFAULT_LABEL_ID_SUFFIX: string;
+export declare const DEFAULT_SELECT_ID_SUFFIX: string;
 export declare const DEFAULT_MESSAGE_ID_SUFFIX: string;
 export declare const DEFAULT_VALID_MESSAGE_ID_SUFFIX: string;
 export declare const DEFAULT_INVALID_MESSAGE_ID_SUFFIX: string;
@@ -8,7 +11,9 @@ export declare const DEFAULT_PLACEHOLDER_ID_SUFFIX: string;
 export declare const DEFAULT_DATALIST_ID_SUFFIX: string;
 export declare const DEFAULT_VALID_MESSAGE: string;
 export declare const DEFAULT_INVALID_MESSAGE: string;
+export declare const DEFAULT_REMOVE: string;
 export declare const DEFAULT_BACK: string;
+export declare const DEFAULT_SELECTED: string;
 export declare const DEFAULT_BURGER_MENU: string;
 export declare const DEFAULT_ICON: string;
 export declare const DEFAULT_ROWS: number;

package/dist/shared/constants.js

@@ -1,6 +1,9 @@
 export const DEFAULT_ID = 'OVERWRITE_DEFAULT_ID';
 export const DEFAULT_LABEL = 'LABEL SHOULD BE SET';
 export const DEFAULT_PLACEHOLDER = ' ';
+export const DEFAULT_MESSAGE = 'MESSAGE SHOULD BE SET';
+export const DEFAULT_LABEL_ID_SUFFIX = '-label';
+export const DEFAULT_SELECT_ID_SUFFIX = '-select';
 export const DEFAULT_MESSAGE_ID_SUFFIX = '-message';
 export const DEFAULT_VALID_MESSAGE_ID_SUFFIX = '-valid-message';
 export const DEFAULT_INVALID_MESSAGE_ID_SUFFIX = '-invalid-message';
@@ -8,11 +11,13 @@ export const DEFAULT_PLACEHOLDER_ID_SUFFIX = '-placeholder';
 export const DEFAULT_DATALIST_ID_SUFFIX = '-datalist';
 export const DEFAULT_VALID_MESSAGE = 'TODO: Add a validMessage';
 export const DEFAULT_INVALID_MESSAGE = 'TODO: Add an invalidMessage';
+export const DEFAULT_REMOVE = 'Remove';
 export const DEFAULT_BACK = 'Back';
+export const DEFAULT_SELECTED = 'Selected';
 export const DEFAULT_BURGER_MENU = 'BurgerMenu';
 export const DEFAULT_ICON = 'brand';
 export const DEFAULT_ROWS = 4;
-export const DEFAULT_CLOSE_BUTTON = 'Close Button';
+export const DEFAULT_CLOSE_BUTTON = 'Close';
 export const DENSITY_CONST = 'density';
 export const COLOR_CONST = 'color';
 export var DENSITY;

package/dist/shared/model.d.ts

@@ -39,7 +39,7 @@ export type SemanticProps = {
 };
 export type IconProps = {
     /**
-     * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://db-ux-design-system.github.io/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
+     * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://design-system.deutschebahn.com/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
      */
     icon?: IconTypes;
 };
@@ -52,7 +52,7 @@ export type ShowIconProps = {
 };
 export type IconAfterProps = {
     /**
-     * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://db-ux-design-system.github.io/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
+     * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://design-system.deutschebahn.com/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
      */
     iconAfter?: IconTypes;
 };
@@ -62,7 +62,7 @@ export type SpacingProps = {
     /**
      * The spacing attribute changes the padding of the component.
      */
-    spacing?: SpacingType;
+    spacing?: SpacingType | string;
 };
 export declare const MarginList: readonly ["medium", "small", "large", "none"];
 export type MarginType = (typeof MarginList)[number];
@@ -72,7 +72,11 @@ export type MarginProps = {
      */
     margin?: MarginType;
 };
-export declare const PlacementList: readonly ["left", "right", "top", "bottom", "left-start", "left-end", "right-start", "right-end", "top-start", "top-end", "bottom-start", "bottom-end"];
+export declare const PlacementHorizontalList: readonly ["left", "right", "left-start", "left-end", "right-start", "right-end"];
+export type PlacementHorizontalType = (typeof PlacementHorizontalList)[number];
+export declare const PlacementVerticalList: readonly ["top", "bottom", "top-start", "top-end", "bottom-start", "bottom-end"];
+export type PlacementVerticalType = (typeof PlacementVerticalList)[number];
+export declare const PlacementList: readonly ["left", "right", "left-start", "left-end", "right-start", "right-end", "top", "bottom", "top-start", "top-end", "bottom-start", "bottom-end"];
 export type PlacementType = (typeof PlacementList)[number];
 export type PlacementProps = {
     /**
@@ -117,7 +121,7 @@ export type WidthProps = {
     /**
      * Width of the component. Auto width based on children size, full width based on parent elements width.
      */
-    width?: WidthType;
+    width?: WidthType | string;
 };
 export declare const MaxWidthList: readonly ["full", "medium", "large", "small"];
 export type MaxWidthType = (typeof MaxWidthList)[number];
@@ -180,19 +184,29 @@ export type TagEmphasisProps = {
 };
 export declare const ValidationList: readonly ["invalid", "valid", "no-validation"];
 export type ValidationType = (typeof ValidationList)[number];
-export type FormProps = {
+export type RequiredProps = {
     /**
-     * Marks an input element as invalid (red) / valid (green) / no-validation (grey). Overwrites the :user-valid selector.
+     * When the required attribute specified, the user will be required to fill the form element before submitting the form.
      */
-    validation?: ValidationType;
+    required?: boolean;
+};
+export type ShowLabelProps = {
     /**
-     * The disabled attribute can be set to keep a user from clicking on the form element.
+     * Enables/disables the visibility of the label
      */
-    disabled?: boolean;
+    showLabel?: boolean;
+};
+export type ValueProps = {
     /**
-     * 	Associates the control with a form element
+     * The value property is to receive results from the native form element.
      */
-    form?: string;
+    value?: any;
+};
+export type BaseFormProps = {
+    /**
+     * The disabled attribute can be set to keep a user from clicking on the form element.
+     */
+    disabled?: boolean;
     /**
      * The label attribute specifies the caption of the form element.
      */
@@ -201,19 +215,22 @@ export type FormProps = {
      * The name attribute gives the name of the form control, as used in form submission and in the form element's elements object.
      */
     name?: string;
+};
+export type CustomFormProps = {
     /**
-     * When the required attribute specified, the user will be required to fill the form element before submitting the form.
+     * Overwrites auto handling for aria-describedby.
      */
-    required?: boolean;
+    ariaDescribedBy?: string;
     /**
-     * Enables/disables the visibility of the label
+     * 	Associates the control with a form element
      */
-    showLabel?: boolean;
+    form?: string;
     /**
-     * The value property is to receive results from the native form element.
+     * Marks an input element as invalid (red) / valid (green) / no-validation (grey). Overwrites the :user-valid selector.
      */
-    value?: any;
+    validation?: ValidationType;
 };
+export type FormProps = CustomFormProps & BaseFormProps & RequiredProps & ShowLabelProps & ValueProps;
 export type FormTextProps = {
     /**
      * Maximum length (number of characters) of value
@@ -379,7 +396,7 @@ export type AlignmentProps = {
     /**
      * Define the content alignment in full width
      */
-    alignment?: AlignmentType;
+    alignment?: AlignmentType | string;
 };
 export type ActiveProps = {
     /**

package/dist/shared/model.js

@@ -1,7 +1,9 @@
 export const SemanticList = ['adaptive', 'neutral', 'critical', 'informational', 'warning', 'successful'];
 export const SpacingList = ['medium', 'small', 'large', 'none'];
 export const MarginList = ['medium', 'small', 'large', 'none'];
-export const PlacementList = ['left', 'right', 'top', 'bottom', 'left-start', 'left-end', 'right-start', 'right-end', 'top-start', 'top-end', 'bottom-start', 'bottom-end'];
+export const PlacementHorizontalList = ['left', 'right', 'left-start', 'left-end', 'right-start', 'right-end'];
+export const PlacementVerticalList = ['top', 'bottom', 'top-start', 'top-end', 'bottom-start', 'bottom-end'];
+export const PlacementList = [...PlacementHorizontalList, ...PlacementVerticalList];
 export const GapSpacingList = ['none', '3x-large', '2x-large', 'x-large', 'large', 'medium', 'small', 'x-small', '2x-small', '3x-small'];
 export const OrientationList = ['horizontal', 'vertical'];
 export const WidthList = ['full', 'auto'];

package/dist/utils/index.d.ts

@@ -31,7 +31,9 @@ export declare const delay: (fn: () => void, ms: number) => Promise<unknown>;
 export declare const getBooleanAsString: (originBool?: boolean) => any;
 export declare const getHideProp: (show?: boolean) => any;
 export declare const stringPropVisible: (givenString?: string, showString?: boolean) => string | boolean;
+export declare const getSearchInput: (element: HTMLElement) => HTMLInputElement | null;
 declare const _default: {
+    getSearchInput: (element: HTMLElement) => HTMLInputElement;
     cls: (...args: ClassNameArg[]) => string;
     addAttributeToChildren: (element: Element, attribute: {
         key: string;

package/dist/utils/index.js

@@ -138,7 +138,9 @@ export const stringPropVisible = (givenString, showString) => {
         return showString && givenString;
     }
 };
+export const getSearchInput = (element) => element.querySelector(`input[type="search"]`);
 export default {
+    getSearchInput,
     cls,
     addAttributeToChildren,
     uuid,

package/dist/utils/react.d.ts

@@ -1,7 +1,7 @@
-export declare const filterPassingProps: (props: Record<string, unknown>, propsPassingFilter: string[]) => Record<string, unknown>;
-export declare const getRootProps: (props: Record<string, unknown>, rooProps: string[]) => Record<string, unknown>;
+export declare const filterPassingProps: (props: any, propsPassingFilter: string[]) => Record<string, unknown>;
+export declare const getRootProps: (props: any, rooProps: string[]) => Record<string, unknown>;
 declare const _default: {
-    getRootProps: (props: Record<string, unknown>, rooProps: string[]) => Record<string, unknown>;
-    filterPassingProps: (props: Record<string, unknown>, propsPassingFilter: string[]) => Record<string, unknown>;
+    getRootProps: (props: any, rooProps: string[]) => Record<string, unknown>;
+    filterPassingProps: (props: any, propsPassingFilter: string[]) => Record<string, unknown>;
 };
 export default _default;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "1.1.1",
+  "version": "2.0.0-0-custom-select-16b8cce",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
-    "url": "https://github.com/db-ux-design-system/core-web.git"
+    "url": "git+https://github.com/db-ux-design-system/core-web.git"
   },
   "license": "Apache-2.0",
   "main": "./dist/index.js",
@@ -37,7 +37,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "1.1.1",
-    "@db-ux/core-foundations": "1.1.1"
+    "@db-ux/core-components": "2.0.0-0-custom-select-16b8cce",
+    "@db-ux/core-foundations": "2.0.0-0-custom-select-16b8cce"
   }
 }