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

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,7 +98,7 @@ 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);

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

@@ -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 = {
     /**
@@ -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

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,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "2.0.0-0-6589a60",
+  "version": "2.0.0-0-custom-select-16b8cce",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "2.0.0-0-6589a60",
-    "@db-ux/core-foundations": "2.0.0-0-6589a60"
+    "@db-ux/core-components": "2.0.0-0-custom-select-16b8cce",
+    "@db-ux/core-foundations": "2.0.0-0-custom-select-16b8cce"
   }
 }