@db-ux/react-core-components 2.0.0-0-6589a60 → 2.0.0

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, FormTextProps, GlobalProps, GlobalState, InputEventProps, InputEventState } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, InputEventProps, InputEventState } from '../../shared/model';
 export declare const TextareaResizeList: readonly ["none", "both", "horizontal", "vertical"];
 export type TextareaResizeType = (typeof TextareaResizeList)[number];
 export declare const TextareaWrapList: readonly ["hard", "soft", "off"];
@@ -7,7 +7,7 @@ export type DBTextareaDefaultProps = {
     /**
      * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer
      */
-    cols?: number;
+    cols?: number | string;
     /**
      * In most browsers, textareas are resizable — you'll notice the drag handle in the right-hand corner, you can control it with this
      */
@@ -15,7 +15,7 @@ export type DBTextareaDefaultProps = {
     /**
      * The number of visible text lines for the control. If it is specified, it must be a positive integer
      */
-    rows?: number;
+    rows?: number | string;
     /**
      * Specifies whether the textarea is subject to spell checking by the underlying browser/OS
      */
@@ -27,4 +27,4 @@ export type DBTextareaDefaultProps = {
 };
 export type DBTextareaProps = DBTextareaDefaultProps & ChangeEventProps<HTMLTextAreaElement> & InputEventProps<HTMLTextAreaElement> & FocusEventProps<HTMLTextAreaElement> & FormProps & GlobalProps & FormTextProps & FormMessageProps;
 export type DBTextareaDefaultState = {};
-export type DBTextareaState = DBTextareaDefaultState & ChangeEventState<HTMLTextAreaElement> & InputEventState<HTMLTextAreaElement> & FocusEventState<HTMLTextAreaElement> & FormState & GlobalState;
+export type DBTextareaState = DBTextareaDefaultState & ChangeEventState<HTMLTextAreaElement> & InputEventState<HTMLTextAreaElement> & FocusEventState<HTMLTextAreaElement> & FormState & GlobalState & FromValidState;

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<any>, "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<any>>;
 export default DBTextarea;

package/dist/components/textarea/textarea.js

@@ -3,48 +3,42 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import DBInfotext from "../infotext/infotext";
-import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getHideProp, getNumber, 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;
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => undefined);
     const [_messageId, set_messageId] = useState(() => undefined);
     const [_validMessageId, set_validMessageId] = useState(() => undefined);
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
+    const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
     const [_descByIds, set_descByIds] = useState(() => "");
     const [_value, set_value] = useState(() => "");
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
-    function handleInput(event) {
-        if (props.onInput) {
-            props.onInput(event);
-        }
-        if (props.input) {
-            props.input(event);
-        }
+    function hasValidState() {
+        var _a;
+        return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
     }
-    function handleChange(event) {
-        var _a, _b, _c, _d, _e, _f;
-        if (props.onChange) {
-            props.onChange(event);
-        }
-        if (props.change) {
-            props.change(event);
-        }
+    function handleValidation() {
+        var _a, _b, _c, _d;
         /* For a11y reasons we need to map the correct message with the textarea */
         if (!((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validity.valid) || props.validation === "invalid") {
             set_descByIds(_invalidMessageId);
+            set_invalidMessage(props.invalidMessage ||
+                ((_b = _ref.current) === null || _b === void 0 ? void 0 : _b.validationMessage) ||
+                DEFAULT_INVALID_MESSAGE);
             if (hasVoiceOver()) {
-                set_voiceOverFallback((_d = (_b = props.invalidMessage) !== null && _b !== void 0 ? _b : (_c = _ref.current) === null || _c === void 0 ? void 0 : _c.validationMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE);
+                set_voiceOverFallback(_invalidMessage);
                 delay(() => set_voiceOverFallback(""), 1000);
             }
         }
-        else if (props.validation === "valid" ||
-            (((_e = _ref.current) === null || _e === void 0 ? void 0 : _e.validity.valid) &&
-                (props.required || props.minLength || props.maxLength))) {
+        else if (hasValidState() &&
+            ((_c = _ref.current) === null || _c === void 0 ? void 0 : _c.validity.valid) &&
+            (props.required || props.minLength || props.maxLength)) {
             set_descByIds(_validMessageId);
             if (hasVoiceOver()) {
-                set_voiceOverFallback((_f = props.validMessage) !== null && _f !== void 0 ? _f : DEFAULT_VALID_MESSAGE);
+                set_voiceOverFallback((_d = props.validMessage) !== null && _d !== void 0 ? _d : DEFAULT_VALID_MESSAGE);
                 delay(() => set_voiceOverFallback(""), 1000);
             }
         }
@@ -55,21 +49,27 @@ function DBTextareaFn(props, component) {
             set_descByIds("");
         }
     }
+    function handleInput(event) {
+        if (props.onInput) {
+            props.onInput(event);
+        }
+        handleValidation();
+    }
+    function handleChange(event) {
+        if (props.onChange) {
+            props.onChange(event);
+        }
+        handleValidation();
+    }
     function handleBlur(event) {
         if (props.onBlur) {
             props.onBlur(event);
         }
-        if (props.blur) {
-            props.blur(event);
-        }
     }
     function handleFocus(event) {
         if (props.onFocus) {
             props.onFocus(event);
         }
-        if (props.focus) {
-            props.focus(event);
-        }
     }
     useEffect(() => {
         var _a;
@@ -78,7 +78,14 @@ function DBTextareaFn(props, component) {
         set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
         set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
         set_invalidMessageId(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+        set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
     }, []);
+    useEffect(() => {
+        var _a;
+        set_invalidMessage(props.invalidMessage ||
+            ((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
+            DEFAULT_INVALID_MESSAGE);
+    }, [_ref.current, props.invalidMessage]);
     useEffect(() => {
         if (_id) {
             const messageId = _id + DEFAULT_MESSAGE_ID_SUFFIX;
@@ -95,10 +102,11 @@ function DBTextareaFn(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-textarea", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
-        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 })),
+        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: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), readOnly: getBoolean(props.readOnly, "readOnly") ||
+                getBoolean(props.readonly, "readonly"), form: props.form, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.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: getNumber(props.rows, DEFAULT_ROWS), cols: getNumber(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),
+        hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
+        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),
         React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
 }
 const DBTextarea = forwardRef(DBTextareaFn);

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

@@ -1,6 +1,6 @@
 import { ClickEventState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState } from '../../shared/model';
 export type DBTooltipDefaultProps = {
-    showArrow?: boolean;
+    showArrow?: boolean | string;
 };
 export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps;
 export type DBTooltipDefaultState = {};

package/dist/components/tooltip/tooltip.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").PopoverProps | "placement" | "emphasis" | "showArrow"> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & React.RefAttributes<HTMLDivElement>>;
+declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").PopoverProps | "placement" | "emphasis" | "showArrow"> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & React.RefAttributes<any>>;
 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

@@ -24,7 +24,7 @@ export type GlobalProps = {
     /**
      * Before using please check for the [accessibility concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_concerns)
      */
-    autofocus?: boolean;
+    autofocus?: boolean | string;
 };
 export type GlobalState = {
     _id?: string;
@@ -48,7 +48,7 @@ export type ShowIconProps = {
      * Enables or disables the visibility of the icon. The default value depends on the component.
      * For many components this property is optional to reflect Figma properties.
      */
-    showIcon?: boolean;
+    showIcon?: boolean | string;
 };
 export type IconAfterProps = {
     /**
@@ -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 = {
     /**
@@ -87,7 +91,7 @@ export type GapProps = {
     /**
      * If the absolute element should have a gap between the parent element.
      */
-    gap?: boolean;
+    gap?: boolean | string;
 };
 export declare const GapSpacingList: readonly ["none", "3x-large", "2x-large", "x-large", "large", "medium", "small", "x-small", "2x-small", "3x-small"];
 export type GapSpacingType = (typeof GapSpacingList)[number];
@@ -101,7 +105,7 @@ export type OverflowProps = {
     /**
      * The overflow attribute sets a max-width and longer text will be dotted.
      */
-    overflow?: boolean;
+    overflow?: boolean | string;
 };
 export declare const OrientationList: readonly ["horizontal", "vertical"];
 export type OrientationType = (typeof OrientationList)[number];
@@ -139,7 +143,7 @@ export type PopoverProps = {
     /**
      * Disable animation
      */
-    animation?: boolean;
+    animation?: boolean | string;
     /**
      * Use fixed with for default max-width
      */
@@ -148,6 +152,16 @@ export type PopoverProps = {
 export type PopoverState = {
     handleAutoPlacement: () => void;
 };
+export type NameProps = {
+    /**
+     * The name attribute gives the name of the element to group it.
+     */
+    name?: string;
+};
+export type NameState = {
+    _name?: string;
+    handleNameAttribute: () => void;
+};
 export type ContentSlotProps = {
     /**
      * Default slot which is used to pass in additional content.
@@ -170,29 +184,31 @@ export type EmphasisProps = {
      */
     emphasis?: EmphasisType;
 };
-export declare const TagEmphasisList: readonly ["weak", "strong", "origin"];
-export type TagEmphasisType = (typeof TagEmphasisList)[number];
-export type TagEmphasisProps = {
+export declare const ValidationList: readonly ["invalid", "valid", "no-validation"];
+export type ValidationType = (typeof ValidationList)[number];
+export type RequiredProps = {
     /**
-     * The emphasis attribute divides in between a weak, strong or origin appearance.
+     * When the required attribute specified, the user will be required to fill the form element before submitting the form.
      */
-    emphasis?: TagEmphasisType;
+    required?: boolean | string;
 };
-export declare const ValidationList: readonly ["invalid", "valid", "no-validation"];
-export type ValidationType = (typeof ValidationList)[number];
-export type FormProps = {
+export type ShowLabelProps = {
     /**
-     * Marks an input element as invalid (red) / valid (green) / no-validation (grey). Overwrites the :user-valid selector.
+     * Enables/disables the visibility of the label
      */
-    validation?: ValidationType;
+    showLabel?: boolean | string;
+};
+export type ValueProps = {
     /**
-     * The disabled attribute can be set to keep a user from clicking on the form element.
+     * The value property is to receive results from the native form element.
      */
-    disabled?: boolean;
+    value?: any;
+};
+export type BaseFormProps = {
     /**
-     * 	Associates the control with a form element
+     * The disabled attribute can be set to keep a user from clicking on the form element.
      */
-    form?: string;
+    disabled?: boolean | string;
     /**
      * The label attribute specifies the caption of the form element.
      */
@@ -201,32 +217,47 @@ 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
      */
-    maxLength?: number;
+    maxLength?: number | string;
     /**
      * Minimum length (number of characters) of value
      */
-    minLength?: number;
+    minLength?: number | string;
+    /**
+     * Maximum length (number of characters) of value
+     */
+    maxlength?: number | string;
+    /**
+     * Minimum length (number of characters) of value
+     */
+    minlength?: number | string;
+    /**
+     * The disabled attribute can be set to keep a user from edit on the form element
+     */
+    readOnly?: boolean | string;
     /**
      * The disabled attribute can be set to keep a user from edit on the form element
      */
-    readOnly?: boolean;
+    readonly?: boolean | string;
 };
 export type FormSizeProps = {
     /**
@@ -238,7 +269,7 @@ export type FormCheckProps = {
     /**
      * Define the radio or checkbox elements checked state
      */
-    checked?: boolean;
+    checked?: boolean | string;
 };
 export declare const LabelVariantList: readonly ["above", "floating"];
 export type LabelVariantType = (typeof LabelVariantList)[number];
@@ -276,7 +307,12 @@ export type FormMessageProps = {
     /**
      * Enables or disables the visibility of the message.
      */
-    showMessage?: boolean;
+    showMessage?: boolean | string;
+};
+export type FromValidState = {
+    hasValidState: () => boolean;
+    handleValidation: () => void;
+    _invalidMessage?: string;
 };
 export type FormState = {
     _messageId?: string;
@@ -284,6 +320,7 @@ export type FormState = {
     _invalidMessageId?: string;
     _descByIds?: string;
     _value?: string;
+    _invalidMessage?: string;
     /**
      * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html
      * Currently VoiceOver isn't supporting changes from aria-describedby.
@@ -308,7 +345,7 @@ export type LinkProps = {
     /**
      * Disables the link.
      */
-    disabled?: boolean;
+    disabled?: boolean | string;
     /**
      * The [URL that the hyperlink points to](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
      */
@@ -340,7 +377,7 @@ export type LinkProps = {
     /**
      * Sets aria role based on [`aria-selected`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected).
      */
-    selected?: boolean;
+    selected?: boolean | string;
 };
 export type TextProps = {
     /**
@@ -356,19 +393,24 @@ export type ClickEventProps<T> = {
     onClick?: (event: ClickEvent<T>) => void;
 };
 export type ClickEventState<T> = {
-    handleClick: (event: ClickEvent<T>) => void;
+    handleClick: (event: ClickEvent<T> | any) => void;
 };
 export type ToggleEventProps = {
-    onToggle?: (open: boolean) => void;
+    toggle?: (open: boolean | any) => void;
+    onToggle?: (open: boolean | any) => void;
 };
 export type ToggleEventState<T> = {
-    toggle: (event?: ClickEvent<T>) => void;
+    handleToggle: (event?: ClickEvent<T> | any) => void;
 };
 export type CloseEventProps = {
     /**
      * Function to handle button click (close).
      */
     onClose?: (event?: any) => void;
+    /**
+     * Function to handle button click (close).
+     */
+    close?: (event?: any) => void;
 };
 export type CloseEventState = {
     handleClose: (event: any) => void;
@@ -385,7 +427,7 @@ export type ActiveProps = {
     /**
      * If the tab is checked/active.
      */
-    active?: boolean;
+    active?: boolean | string;
 };
 export type InputEvent<T> = React.FormEvent<T>;
 export type InputEventProps<T> = {
@@ -393,7 +435,7 @@ export type InputEventProps<T> = {
     onInput?: (event: InputEvent<T>) => void;
 };
 export type InputEventState<T> = {
-    handleInput: (event: InputEvent<T>) => void;
+    handleInput: (event: InputEvent<T> | any) => void;
 };
 export type ChangeEvent<T> = React.ChangeEvent<T>;
 export type ChangeEventProps<T> = {
@@ -401,7 +443,7 @@ export type ChangeEventProps<T> = {
     onChange?: (event: ChangeEvent<T>) => void;
 };
 export type ChangeEventState<T> = {
-    handleChange: (event: ChangeEvent<T>) => void;
+    handleChange: (event: ChangeEvent<T> | any) => void;
 };
 export type InteractionEvent<T> = React.FocusEvent<T>;
 export type FocusEventProps<T> = {
@@ -411,8 +453,8 @@ export type FocusEventProps<T> = {
     onFocus?: (event: InteractionEvent<T>) => void;
 };
 export type FocusEventState<T> = {
-    handleBlur: (event: InteractionEvent<T>) => void;
-    handleFocus: (event: InteractionEvent<T>) => void;
+    handleBlur: (event: InteractionEvent<T> | any) => void;
+    handleFocus: (event: InteractionEvent<T> | any) => void;
 };
 export type InnerCloseButtonProps = {
     /**

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'];
@@ -10,7 +12,6 @@ export const PopoverDelayList = ['none', 'slow', 'fast'];
 export const PopoverWidthList = ['auto', 'fixed'];
 export const SizeList = ['small', 'medium'];
 export const EmphasisList = ['weak', 'strong'];
-export const TagEmphasisList = [...EmphasisList, 'origin'];
 export const ValidationList = ['invalid', 'valid', 'no-validation'];
 export const LabelVariantList = ['above', 'floating'];
 export const AutoCompleteList = ['off', 'on', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'shipping', 'billing', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo', 'webauthn'];

package/dist/utils/document-click-listener.d.ts

@@ -0,0 +1,8 @@
+export declare class DocumentClickListener {
+    private static callbacks;
+    private static _instance;
+    private static runCallbacks;
+    constructor();
+    addCallback(callback: (event: any) => void): string;
+    removeCallback(id: string): void;
+}

package/dist/utils/document-click-listener.js

@@ -0,0 +1,29 @@
+import { uuid } from './index';
+export class DocumentClickListener {
+    static runCallbacks(event) {
+        Object.values(DocumentClickListener.callbacks).forEach(callback => {
+            if (typeof callback === 'function') {
+                callback(event);
+            }
+        });
+    }
+    constructor() {
+        if (DocumentClickListener._instance) {
+            return DocumentClickListener._instance;
+        }
+        DocumentClickListener._instance = this;
+        if (document) {
+            document.addEventListener('click', event => DocumentClickListener.runCallbacks(event));
+        }
+    }
+    addCallback(callback) {
+        const callbackID = uuid();
+        DocumentClickListener.callbacks[callbackID] = callback;
+        return callbackID;
+    }
+    removeCallback(id) {
+        delete DocumentClickListener.callbacks[id];
+    }
+}
+DocumentClickListener.callbacks = {};
+DocumentClickListener._instance = null;

package/dist/utils/index.d.ts

@@ -28,30 +28,9 @@ export declare const delay: (fn: () => void, ms: number) => Promise<unknown>;
  * if it is used in a framework like angular e.g.: [disabled]="myDisabledProp"
  * @param originBool Some boolean to convert to string
  */
-export declare const getBooleanAsString: (originBool?: boolean) => any;
-export declare const getHideProp: (show?: boolean) => any;
-export declare const stringPropVisible: (givenString?: string, showString?: boolean) => string | boolean;
-declare const _default: {
-    cls: (...args: ClassNameArg[]) => string;
-    addAttributeToChildren: (element: Element, attribute: {
-        key: string;
-        value: string;
-    }) => void;
-    uuid: () => string;
-    visibleInVX: (el: Element) => boolean;
-    visibleInVY: (el: Element) => boolean;
-    isInView: (el: Element) => {
-        outTop: boolean;
-        outBottom: boolean;
-        outLeft: boolean;
-        outRight: boolean;
-    };
-    handleDataOutside: (el: Element) => DBDataOutsidePair;
-    isArrayOfStrings: (value: unknown) => value is string[];
-    hasVoiceOver: () => boolean;
-    delay: (fn: () => void, ms: number) => Promise<unknown>;
-    getBooleanAsString: (originBool?: boolean) => any;
-    getHideProp: (show?: boolean) => any;
-    stringPropVisible: (givenString?: string, showString?: boolean) => string | boolean;
-};
-export default _default;
+export declare const getBooleanAsString: (originBool?: boolean | string) => any;
+export declare const getBoolean: (originBool?: boolean | string, propertyName?: string) => boolean | undefined;
+export declare const getNumber: (originNumber?: number | string, alternativeNumber?: number | string) => number | undefined;
+export declare const getHideProp: (show?: boolean | string) => any;
+export declare const stringPropVisible: (givenString?: string, showString?: boolean | string) => boolean;
+export declare const getSearchInput: (element: HTMLElement) => HTMLInputElement | null;