@db-ux/react-core-components 2.0.9 → 2.1.0

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

@@ -45,6 +45,7 @@ function DBCustomSelectFn(props, component) {
     const [_hasNoOptions, set_hasNoOptions] = useState(() => false);
     const [_documentClickListenerCallbackId, set_documentClickListenerCallbackId,] = useState(() => undefined);
     const [_internalChangeTimestamp, set_internalChangeTimestamp] = useState(() => 0);
+    const [_searchValue, set_searchValue] = useState(() => undefined);
     function hasValidState() {
         var _a;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -356,11 +357,24 @@ function DBCustomSelectFn(props, component) {
         }
     }
     function handleSearch(event) {
-        event.stopPropagation();
-        const filterText = event.target.value;
+        let filterText;
+        if (typeof event === "string") {
+            filterText = event;
+        }
+        else {
+            event.stopPropagation();
+            if (props.onSearch) {
+                props.onSearch(event);
+            }
+            filterText = event.target.value;
+            set_searchValue(filterText);
+        }
         if (!props.options || !filterText || filterText.length === 0) {
             set_options(props.options);
         }
+        else if (props.searchFilter) {
+            set_options(props.options.filter((option) => props.searchFilter(option, filterText)));
+        }
         else {
             set_options(props.options.filter((option) => !option.isGroupTitle &&
                 getOptionLabel(option)
@@ -479,6 +493,13 @@ function DBCustomSelectFn(props, component) {
         set_options(props.options);
         setAmountOptions((_b = (_a = props.options) === null || _a === void 0 ? void 0 : _a.filter((option) => !option.isGroupTitle).length) !== null && _b !== void 0 ? _b : 0);
     }, [props.options]);
+    useEffect(() => {
+        set_searchValue(props.searchValue);
+        if (props.searchValue) {
+            const sValue = props.searchValue; // <- workaround for Angular
+            handleSearch(sValue);
+        }
+    }, [props.searchValue]);
     useEffect(() => {
         var _a, _b;
         if ((_a = props.options) === null || _a === void 0 ? void 0 : _a.length) {
@@ -491,7 +512,18 @@ function DBCustomSelectFn(props, component) {
         }
     }, [props.options, _values]);
     useEffect(() => {
+        if (props.selectedLabels) {
+            set_selectedLabels(props.selectedLabels);
+            return;
+        }
         if (_selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.length) {
+            if (props.transformSelectedLabels) {
+                // We need to add this to another ``const`` for Angular generated output to work
+                const selectedOptions = _selectedOptions;
+                const transformFn = props.transformSelectedLabels;
+                set_selectedLabels(transformFn(selectedOptions));
+                return;
+            }
             if (props.selectedType === "amount") {
                 set_selectedLabels(props.amountText
                     ? props.amountText
@@ -504,7 +536,13 @@ function DBCustomSelectFn(props, component) {
         else {
             set_selectedLabels("");
         }
-    }, [_selectedOptions, props.selectedType, props.amountText]);
+    }, [
+        _selectedOptions,
+        props.selectedType,
+        props.amountText,
+        props.selectedLabels,
+        props.transformSelectedLabels,
+    ]);
     useEffect(() => {
         var _a;
         if (props.onAmountChange) {
@@ -537,7 +575,7 @@ function DBCustomSelectFn(props, component) {
                     props.selectedType === "tag" ? (React.createElement("div", null, _selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.map((option, index) => (React.createElement(DBTag, { emphasis: "strong", behavior: "removable", removeButton: getTagRemoveLabel(index), onRemove: (event) => handleTagRemove(option, event), key: "tag-" + getOptionKey(option) }, getOptionLabel(option)))))) : null),
                 React.createElement(DBCustomSelectDropdown, { width: props.dropdownWidth },
                     searchEnabled ? (React.createElement("div", null,
-                        React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, label: (_d = props.searchLabel) !== null && _d !== void 0 ? _d : DEFAULT_LABEL, placeholder: (_e = props.searchPlaceholder) !== null && _e !== void 0 ? _e : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
+                        React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, value: _searchValue, label: (_d = props.searchLabel) !== null && _d !== void 0 ? _d : DEFAULT_LABEL, placeholder: (_e = props.searchPlaceholder) !== null && _e !== void 0 ? _e : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
                                 ? _infoTextId
                                 : undefined, onInput: (event) => handleSearch(event) }))) : null,
                     _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: _hasNoOptions ? undefined : "circular_arrows", semantic: _hasNoOptions ? "warning" : "informational" }, (_f = (_hasNoOptions ? props.noResultsText : props.loadingText)) !== null && _f !== void 0 ? _f : DEFAULT_MESSAGE)) : (React.createElement(React.Fragment, null,

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

@@ -51,16 +51,24 @@ export type DBCustomSelectEvents = {
      * Informs the user when dropdown was toggled.
      */
     dropdownToggle?: (event: any) => void;
-};
-export type DBCustomSelectDefaultProps = {
     /**
-     * Overwrite the default aria-label (props.label) for the custom-select-list
+     * Informs the user when a search was performed.
      */
-    ariaListLabel?: string;
+    onSearch?: (event: any) => void;
+    /**
+     * Informs the user when a search was performed.
+     */
+    search?: (event: any) => void;
+};
+export type DBCustomSelectDefaultProps = {
     /**
      * Optional: if select-type="amount" change the shown text
      */
     amountText?: string;
+    /**
+     * Overwrite the default aria-label (props.label) for the custom-select-list
+     */
+    ariaListLabel?: string;
     /**
      * Label for the clear selection button
      */
@@ -107,6 +115,10 @@ export type DBCustomSelectDefaultProps = {
      * Optional: if you use selectedType=tag and options, you need to set the removeTagsTexts for screen reader users
      */
     removeTagsTexts?: string[];
+    /**
+     * Optional: Change the filter function for the search input
+     */
+    searchFilter?: (option: CustomSelectOptionType, filterText: string) => boolean;
     /**
      * Search label
      */
@@ -115,10 +127,19 @@ export type DBCustomSelectDefaultProps = {
      * Search placeholder
      */
     searchPlaceholder?: string;
+    /**
+     * Optional: Prefill the value of the search input
+     */
+    searchValue?: string;
     /**
      * Select all checkbox label
      */
     selectAllLabel?: string;
+    /**
+     * Optional: If you want to show a custom label for the selected values.
+     * You need to define the empty state as well based on selected options.
+     */
+    selectedLabels?: string;
     /**
      * Change the selected type for values shown in multi select
      */
@@ -143,6 +164,10 @@ export type DBCustomSelectDefaultProps = {
      * Forces select all checkbox (only for multiple).
      */
     showSelectAll?: boolean;
+    /**
+     * Optional: If you want to show a custom label based on the selected options.
+     */
+    transformSelectedLabels?: (selectedOptions?: CustomSelectOptionType[]) => string;
     /**
      * Initial value for multi select
      */
@@ -164,6 +189,7 @@ export type DBCustomSelectDefaultState = {
     _infoTextId?: string;
     _internalChangeTimestamp: number;
     _documentClickListenerCallbackId?: string;
+    _searchValue?: string;
     getNativeSelectValue: () => string;
     getOptionLabel: (option: CustomSelectOptionType) => string;
     getOptionChecked: (value?: string) => boolean;

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

@@ -1,10 +1,8 @@
 import { GlobalProps, GlobalState, IconProps, TextProps } from '../../shared/model';
-export declare const IconVariantList: readonly ["default", "inverted", "filled"];
-export type IconVariantType = (typeof IconVariantList)[number];
 export declare const IconWeightList: readonly ["16", "20", "24", "32", "48", "64"];
 export type IconWeightType = (typeof IconWeightList)[number];
 export type DBIconDefaultProps = {
-    variant?: IconVariantType;
+    variant?: string;
     weight?: IconWeightType;
 };
 export type DBIconProps = DBIconDefaultProps & GlobalProps & IconProps & TextProps;

package/dist/components/icon/model.js

@@ -1,2 +1 @@
-export const IconVariantList = ['default', 'inverted', 'filled'];
 export const IconWeightList = ['16', '20', '24', '32', '48', '64'];

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

@@ -1,7 +1,8 @@
 import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FromValidState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
 export type DBSelectDefaultProps = {
     /**
-     * Enable multiple select -> use DBCustomSelect/db-custom-select for a better look
+     * @deprecated
+     * Enables multiple select, but it isn't styled, please use DBCustomSelect/db-custom-select instead
      */
     multiple?: boolean;
     /**

package/dist/components/tag/tag.js

@@ -4,6 +4,7 @@ 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";
+import DBTooltip from "../tooltip/tooltip";
 function DBTagFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
@@ -42,7 +43,8 @@ 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(event), 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", type: "button", onClick: (event) => handleRemove(event) },
+            React.createElement(DBTooltip, { variant: "label" }, getRemoveButtonText()))) : null));
 }
 const DBTag = forwardRef(DBTagFn);
 export default DBTag;

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

@@ -1,6 +1,17 @@
 import { ClickEventState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState } from '../../shared/model';
+export declare const TooltipVariantList: readonly ["description", "label"];
+export type TooltipVariantType = (typeof TooltipVariantList)[number];
 export type DBTooltipDefaultProps = {
+    /**
+     * Show/Hides arrow
+     */
     showArrow?: boolean | string;
+    /**
+     * Change the behavior of the tooltip:
+     * - description: Adds `aria-describedby` to parent
+     * - label: Adds `aria-labelledby` to parent
+     */
+    variant?: TooltipVariantType;
 };
 export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps;
 export type DBTooltipDefaultState = {};

package/dist/components/tooltip/model.js

@@ -1 +1 @@
-export {};
+export const TooltipVariantList = ['description', 'label'];

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

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

@@ -32,7 +32,12 @@ function DBTooltipFn(props, component) {
                     parent.addEventListener(event, () => handleAutoPlacement());
                 });
                 parent.setAttribute("data-has-tooltip", "true");
-                parent.setAttribute("aria-describedby", _id);
+                if (props.variant === "label") {
+                    parent.setAttribute("aria-labelledby", _id);
+                }
+                else {
+                    parent.setAttribute("aria-describedby", _id);
+                }
             }
             setInitialized(false);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "2.0.9",
-    "@db-ux/core-foundations": "2.0.9"
+    "@db-ux/core-components": "2.1.0",
+    "@db-ux/core-foundations": "2.1.0"
   }
 }