@bodynarf/react.components 1.8.22 → 1.9.1

package/components/dropdown/components/item/index.js

@@ -1,6 +1,38 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementPosition } from "../../../../types";
+import Icon from "../../../icon/component";
 /** Single item in dropdown component */
 const DropdownItem = ({ item, selected, onClick }) => {
-    return (_jsx("li", { className: `bbr-dropdown-item dropdown-item${selected ? " is-active" : ""}`, onClick: onClick, "data-dropdown-item-value": item.value, title: item.displayValue, children: item.displayValue }, item.id));
+    if (!isNullOrUndefined(item.icon)) {
+        return _jsx(DropdownItemWithIcon, { item: item, selected: selected, onClick: onClick });
+    }
+    const className = getClassName([
+        "bbr-dropdown-item",
+        "dropdown-item",
+        selected ? "is-active" : "",
+        "is-flex is-align-items-center",
+    ]);
+    return (_jsx("li", { onClick: onClick, className: className, "data-dropdown-item-value": item.value, title: item.title, children: item.displayValue }, item.id));
 };
 export default DropdownItem;
+/** Single item in dropdown component with icon */
+const DropdownItemWithIcon = ({ item, selected, onClick }) => {
+    const icon = item.icon;
+    const className = getClassName([
+        "bbr-dropdown-item",
+        "dropdown-item",
+        selected ? "is-active" : "",
+        "is-flex is-align-items-center",
+    ]);
+    const iconClassName = getClassName([
+        icon.className,
+        icon.position === ElementPosition.Right
+            ? "bbr-icon--right"
+            : "bbr-icon--left",
+    ]);
+    if (icon.position === ElementPosition.Right) {
+        return (_jsxs("li", { onClick: onClick, className: className, "data-dropdown-item-value": item.value, title: item.title, children: [item.displayValue, _jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName })] }, item.id));
+    }
+    return (_jsxs("li", { onClick: onClick, className: className, "data-dropdown-item-value": item.value, title: item.title, children: [_jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName }), item.displayValue] }, item.id));
+};

package/components/dropdown/components/label/component/index.d.ts

@@ -0,0 +1,27 @@
+import { FC, MouseEvent } from "react";
+import { SelectableItem } from "../../../..";
+/** Props type of `DropdownLabel` */
+export interface DropdownLabelProps {
+    /** Caption when no items selected */
+    caption: string;
+    /** Can user deselect */
+    deselectable: boolean;
+    /** Is search through items enabled */
+    searchable: boolean;
+    /** Selected item */
+    selectedItem?: SelectableItem;
+    /** Element classnames */
+    className?: string;
+    /** Click handler*/
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+    /** Last user search */
+    lastSearch: string | null;
+    /** Is items list visible */
+    isListVisible: boolean;
+    /** Handler of search value change by user */
+    onSearchChange: (value: string) => void;
+}
+/** Label component */
+declare const DropdownLabel: FC<DropdownLabelProps>;
+export default DropdownLabel;
+//# sourceMappingURL=index.d.ts.map

package/components/dropdown/components/label/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/dropdown/components/label/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAMjD,oCAAoC;AACpC,MAAM,WAAW,kBAAkB;IAC/B,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,sCAAsC;IACtC,UAAU,EAAE,OAAO,CAAC;IAEpB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAElD,uBAAuB;IACvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B,4BAA4B;IAC5B,aAAa,EAAE,OAAO,CAAC;IAEvB,6CAA6C;IAC7C,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAkCzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/dropdown/components/label/component/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrUndefined } from "@bodynarf/utils";
+import SelectedItemLabel from "../components/selected";
+import EmptyLabel from "../components/empty";
+import DropdownLabelWithSearch from "../components/withSearch";
+/** Label component */
+const DropdownLabel = ({ caption, selectedItem, onClick, deselectable, className, searchable, onSearchChange, lastSearch, isListVisible, }) => {
+    if (searchable) {
+        return _jsx(DropdownLabelWithSearch, { caption: caption, onClick: onClick, className: className, onSearchChange: onSearchChange, deselectable: deselectable, selectedItem: selectedItem, lastSearch: lastSearch, isListVisible: isListVisible });
+    }
+    if (isNullOrUndefined(selectedItem)) {
+        return _jsx(EmptyLabel, { caption: caption, onClick: onClick, className: className });
+    }
+    return _jsx(SelectedItemLabel, { deselectable: deselectable, className: className, onClick: onClick, selectedItem: selectedItem });
+};
+export default DropdownLabel;

package/components/dropdown/components/label/components/empty/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { DropdownLabelProps } from "../../component";
+/** Props type of `EmptyLabel` */
+declare type EmptyLabelProps = Pick<DropdownLabelProps, "caption" | "onClick" | "className">;
+/** Empty dropdown label component (no item selected) */
+declare const EmptyLabel: FC<EmptyLabelProps>;
+export default EmptyLabel;
+//# sourceMappingURL=index.d.ts.map

package/components/dropdown/components/label/components/empty/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/components/label/components/empty/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,iCAAiC;AACjC,aAAK,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC,CAAC;AAErF,wDAAwD;AACxD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAsBnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/dropdown/components/label/components/empty/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullOrEmpty } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../../types";
+import Icon from "../../../../../icon";
+/** Empty dropdown label component (no item selected) */
+const EmptyLabel = ({ caption, onClick, className, }) => {
+    const elClassName = getClassName([
+        "dropdown-trigger",
+        "bbr-dropdown__label",
+        isNullOrEmpty(className) ? "" : `${className}--md`,
+        "bbr-dropdown__label--default",
+        "button"
+    ]);
+    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [_jsx("span", { className: "mr-2", children: caption }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+};
+export default EmptyLabel;

package/components/dropdown/components/label/components/selected/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { DropdownLabelProps } from "../../component";
+/** Props type of `SelectedItemLabel` */
+declare type SelectedItemLabelProps = Pick<DropdownLabelProps, "selectedItem" | "onClick" | "deselectable" | "className">;
+/** Dropdown label when item is selected */
+declare const SelectedItemLabel: FC<SelectedItemLabelProps>;
+export default SelectedItemLabel;
+//# sourceMappingURL=index.d.ts.map

package/components/dropdown/components/label/components/selected/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/components/label/components/selected/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQ3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,wCAAwC;AACxC,aAAK,sBAAsB,GAAG,IAAI,CAC9B,kBAAkB,EAChB,cAAc,GAAG,SAAS,GAC1B,cAAc,GAAG,WAAW,CACjC,CAAC;AAEF,2CAA2C;AAC3C,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAqCjD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/dropdown/components/label/components/selected/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../../types";
+import Icon from "../../../../../icon";
+import SelectedItemLabelWithIcon from "../selectedWithIcon";
+/** Dropdown label when item is selected */
+const SelectedItemLabel = ({ selectedItem, onClick, deselectable, className, }) => {
+    if (!isNullOrUndefined(selectedItem.icon)) {
+        return _jsx(SelectedItemLabelWithIcon, { deselectable: deselectable, onClick: onClick, className: className, selectedItem: selectedItem });
+    }
+    const elClassName = getClassName([
+        "dropdown-trigger",
+        "bbr-dropdown__label",
+        isNullOrEmpty(className) ? "" : `${className}--md`,
+        "button"
+    ]);
+    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [deselectable &&
+                _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsx("span", { className: deselectable ? "px-2" : "pr-2", title: selectedItem.title, children: selectedItem.displayValue }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+};
+export default SelectedItemLabel;

package/components/dropdown/components/label/components/selectedWithIcon/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { DropdownLabelProps } from "../../component";
+/** Props type of `SelectedItemLabelWithIcon` */
+declare type SelectedItemLabelWithIconProps = Pick<DropdownLabelProps, "selectedItem" | "onClick" | "deselectable" | "className">;
+/** Dropdown label when item is selected and it's have icon */
+declare const SelectedItemLabelWithIcon: FC<SelectedItemLabelWithIconProps>;
+export default SelectedItemLabelWithIcon;
+//# sourceMappingURL=index.d.ts.map

package/components/dropdown/components/label/components/selectedWithIcon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/components/label/components/selectedWithIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,gDAAgD;AAChD,aAAK,8BAA8B,GAAG,IAAI,CACtC,kBAAkB,EAChB,cAAc,GAAG,SAAS,GAC1B,cAAc,GAAG,WAAW,CACjC,CAAC;AAEF,8DAA8D;AAC9D,QAAA,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAoEjE,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/components/dropdown/components/label/components/selectedWithIcon/index.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullOrEmpty } from "@bodynarf/utils";
+import { ElementPosition, ElementSize } from "../../../../../../types";
+import Icon from "../../../../../icon";
+/** Dropdown label when item is selected and it's have icon */
+const SelectedItemLabelWithIcon = ({ selectedItem, onClick, deselectable, className, }) => {
+    const elClassName = getClassName([
+        "dropdown-trigger",
+        "bbr-dropdown__label",
+        isNullOrEmpty(className) ? "" : `${className}--md`,
+        "button"
+    ]);
+    const icon = selectedItem.icon;
+    const iconClassName = getClassName([
+        icon.className,
+        icon.position === ElementPosition.Right
+            ? "bbr-icon--right"
+            : "bbr-icon--left",
+        "bbr-dropdown-item__icon"
+    ]);
+    if (icon.position === ElementPosition.Right) {
+        return (_jsxs("label", { className: elClassName, onClick: onClick, children: [deselectable &&
+                    _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsxs("span", { className: deselectable ? "px-2" : "pr-2", title: selectedItem.title, children: [selectedItem.displayValue, _jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName })] }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+    }
+    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [deselectable &&
+                _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsxs("span", { className: deselectable ? "mx-2" : "mr-2", title: selectedItem.title, children: [_jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName }), selectedItem.displayValue] }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+};
+export default SelectedItemLabelWithIcon;

package/components/dropdown/components/label/components/withSearch/index.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { DropdownLabelProps } from "../../component";
+import "./style.scss";
+/** Props type of `DropdownLabelWithSearch` */
+declare type DropdownLabelWithSearchProps = Pick<DropdownLabelProps, "caption" | "className" | "onClick" | "selectedItem" | "deselectable"> & {
+    /** Last user search */
+    lastSearch: string | null;
+    /** Is items list visible */
+    isListVisible: boolean;
+    /** Handler of search value change by user */
+    onSearchChange: (value: string) => void;
+};
+/** Label component with search */
+declare const DropdownLabelWithSearch: FC<DropdownLabelWithSearchProps>;
+export default DropdownLabelWithSearch;
+//# sourceMappingURL=index.d.ts.map

package/components/dropdown/components/label/components/withSearch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/components/label/components/withSearch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAA2B,MAAM,OAAO,CAAC;AAOjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,cAAc,CAAC;AAEtB,8CAA8C;AAC9C,aAAK,4BAA4B,GAAG,IAAI,CACpC,kBAAkB,EAClB,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CACxE,GAAG;IACA,uBAAuB;IACvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B,4BAA4B;IAC5B,aAAa,EAAE,OAAO,CAAC;IAEvB,6CAA6C;IAC7C,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,kCAAkC;AAClC,QAAA,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAyD7D,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/components/dropdown/components/label/components/withSearch/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../../types";
+import Icon from "../../../../../icon";
+import "./style.scss";
+/** Label component with search */
+const DropdownLabelWithSearch = ({ caption, className, deselectable, lastSearch, onSearchChange, isListVisible, onClick, selectedItem, }) => {
+    const elClassName = getClassName([
+        "dropdown-trigger",
+        "bbr-dropdown__label",
+        isNullOrEmpty(className) ? "" : `${className}--md`,
+        "button",
+        "bbr-dropdown__search"
+    ]);
+    const onChange = useCallback((event) => onSearchChange(event.target.value), [onSearchChange]);
+    const inputClassName = getClassName([
+        "input",
+        deselectable && !isNullOrUndefined(selectedItem) ? "px-2" : "pl-0"
+    ]);
+    const containerOnClick = useCallback((event) => {
+        event.stopPropagation();
+        const target = event.target;
+        if (target.nodeName !== "I" && isListVisible) {
+            return;
+        }
+        onClick(event);
+    }, [isListVisible, onClick]);
+    return (_jsxs("div", { className: elClassName, onClick: containerOnClick, children: [deselectable && !isNullOrUndefined(selectedItem)
+                &&
+                    _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsx("input", { type: "text", onChange: onChange, placeholder: caption, className: inputClassName, value: selectedItem?.displayValue ?? lastSearch ?? "" }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+};
+export default DropdownLabelWithSearch;

package/components/dropdown/components/label/components/withSearch/style.scss

@@ -0,0 +1,29 @@
+.bbr-dropdown__search {
+    input {
+        border-left: 0;
+        border-right: 0;
+        border-radius: 0;
+        box-shadow: none !important;
+
+        background: transparent;
+
+        &::-webkit-input-placeholder {
+            color: gray;
+            font-style: italic;
+        }
+
+        &:focus, &:hover, &:active {
+            border-color: inherit !important;
+        }
+    }
+
+    &:hover {
+        input {
+            border-color: inherit !important;
+        }
+    }
+}
+
+.bbr-dropdown.is-active .bbr-dropdown__search {
+    background: rgba(0, 0, 0, 0.05);
+}

package/components/dropdown/components/label/index.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent } from "react";
-import { SelectableItem } from "../../../dropdown";
+import { SelectableItem } from "../..";
 export interface DropdownLabelProps {
     /** Caption when no items selected */
     caption: string;

package/components/dropdown/components/label/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOnC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,kBAAkB;IAC/B,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,iEAIhB,kBAAkB,KAAG,WAkCvB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOnC,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IAC/B,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,iEAIhB,kBAAkB,KAAG,WA4CvB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/dropdown/components/label/index.js

@@ -1,22 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementSize } from "../../..";
+import { ElementPosition, ElementSize } from "../../../../types";
 import Icon from "../../../icon";
 /** Label component */
 const DropdownLabel = ({ caption, selectedItem, onClick, deselectable, className, }) => {
-    const itemSelected = !isNullOrUndefined(selectedItem);
-    const text = itemSelected
-        ? selectedItem?.displayValue
-        : caption;
-    const deselectVisible = deselectable && itemSelected;
+    if (isNullOrUndefined(selectedItem)) {
+        return _jsx(EmptyLabel, { caption: caption, deselectable: deselectable, onClick: onClick, className: className });
+    }
+    if (!isNullOrUndefined(selectedItem.icon)) {
+        return _jsx(SelectedItemLabelWithIcon, { caption: caption, deselectable: deselectable, onClick: onClick, className: className, selectedItem: selectedItem });
+    }
     const elClassName = getClassName([
         "dropdown-trigger",
         "bbr-dropdown__label",
         isNullOrEmpty(className) ? "" : `${className}--md`,
-        itemSelected ? "" : "bbr-dropdown__label--default",
         "button"
     ]);
-    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [deselectVisible &&
-                _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [deselectable &&
+                _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsx("span", { className: deselectable ? "px-2" : "pr-2", title: selectedItem.title, children: selectedItem.displayValue }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
 };
 export default DropdownLabel;
+const EmptyLabel = ({ caption, onClick, className, }) => {
+    const elClassName = getClassName([
+        "dropdown-trigger",
+        "bbr-dropdown__label",
+        isNullOrEmpty(className) ? "" : `${className}--md`,
+        "bbr-dropdown__label--default",
+        "button"
+    ]);
+    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [_jsx("span", { className: "mr-2", children: caption }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+};
+const SelectedItemLabelWithIcon = ({ selectedItem, onClick, deselectable, className, }) => {
+    const elClassName = getClassName([
+        "dropdown-trigger",
+        "bbr-dropdown__label",
+        isNullOrEmpty(className) ? "" : `${className}--md`,
+        "button"
+    ]);
+    const icon = selectedItem.icon;
+    const iconClassName = getClassName([
+        icon.className,
+        icon.position === ElementPosition.Right
+            ? "bbr-icon--right"
+            : "bbr-icon--left",
+        "bbr-dropdown-item__icon"
+    ]);
+    if (icon.position === ElementPosition.Right) {
+        return (_jsxs("label", { className: elClassName, onClick: onClick, children: [deselectable &&
+                    _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsxs("span", { className: deselectable ? "px-2" : "pr-2", title: selectedItem.title, children: [selectedItem.displayValue, _jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName })] }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+    }
+    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [deselectable &&
+                _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsxs("span", { className: deselectable ? "mx-2" : "mr-2", title: selectedItem.title, children: [_jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName }), selectedItem.displayValue] }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+};

package/components/dropdown/components/withLabel/index.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { DropdownProps } from "../../../dropdown";
-declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder, disabled, }: DropdownProps) => JSX.Element;
+import { DropdownProps } from "../..";
+declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, hideOnOuterClick, listMaxHeight, label, placeholder, disabled, className, title, data, hint, }: DropdownProps) => JSX.Element;
 export default DropdownWithLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/dropdown/components/withLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIzD,QAAA,MAAM,iBAAiB,yIAOpB,aAAa,KAAG,WAoLlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,QAAA,MAAM,iBAAiB,4JASpB,aAAa,KAAG,WAiMlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/dropdown/components/withLabel/index.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useState } from "react";
 import { isNullOrUndefined, isNullOrEmpty, getClassName } from "@bodynarf/utils";
-import { getValidationValues } from "../../../../utils";
+import { getStyleClassName, mapDataAttributes } from "../../../../utils";
 import { useComponentOutsideClick } from "../../../../hooks";
-import DropdownItem from "../../../dropdown/components/item";
-import DropdownLabel from "../../../dropdown/components/label";
-const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectable = false, className, hideOnOuterClick, listMaxHeight, label, placeholder, disabled = false, }) => {
+import InternalHint from "../../../primitives/internal/hint";
+import DropdownItem from "../../components/item";
+import DropdownLabel from "../../components/label";
+const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectable = false, hideOnOuterClick, listMaxHeight, label, placeholder, disabled = false, className, title, data, hint, }) => {
     const id = useId();
     const [isListVisible, setListVisible] = useState(false);
-    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
     const onItemClick = useCallback((event) => {
         if (disabled) {
             return;
@@ -50,16 +50,20 @@ const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectab
     useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
     const classNames = getClassName([
         "bbr-dropdown",
+        className,
         disabled ? "bbr-dropdown--disabled" : "",
         isListVisible ? "is-active" : "",
         isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
-        className,
         "dropdown"
     ]);
     const labelClassName = getClassName([
         "label",
         label.className
     ]);
+    const labelComponentClassName = getStyleClassName(undefined, validationState);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
     if (label.horizontal) {
         const labelContainerClassName = getClassName([
             "field-label",
@@ -70,14 +74,12 @@ const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectab
             "field-body",
             label.horizontalFieldContainerClassName
         ]);
-        return (_jsxs("div", { className: "bbr-dropdown__root-container--with-label bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { className: styleClassName, caption: placeholder, deselectable: deselectable, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
+        return (_jsxs("div", { className: "bbr-dropdown__root-container--with-label bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsxs("div", { className: classNames, "data-dropdown-id": id, title: title, ...dataAttributes, children: [_jsx(DropdownLabel, { selectedItem: value, caption: placeholder, onClick: onLabelClick, deselectable: deselectable, className: labelComponentClassName }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
                                             ? _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
-                                            : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), isValidationDefined && validationMessages.length > 0 &&
-                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
+                                            : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), _jsx(InternalHint, { hint: hint, validationState: validationState })] }) })] }));
     }
-    return (_jsxs("div", { className: "field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { className: styleClassName, caption: placeholder, deselectable: deselectable, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
+    return (_jsxs("div", { className: "field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsxs("div", { className: classNames, "data-dropdown-id": id, title: title, ...dataAttributes, children: [_jsx(DropdownLabel, { selectedItem: value, caption: placeholder, onClick: onLabelClick, deselectable: deselectable, className: labelComponentClassName }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
                             ? _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
-                            : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), isValidationDefined && validationMessages.length > 0 &&
-                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+                            : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default DropdownWithLabel;

package/components/dropdown/types.d.ts

@@ -1,4 +1,4 @@
-import { BaseElementProps, InputLabel, ValidationState } from "..";
+import { BaseElementProps, HintConfiguration, ValidationState, LabelConfiguration, ElementIcon } from "../../types";
 /** Dropdown item */
 export interface SelectableItem {
     /** Unique item identifier */
@@ -7,6 +7,10 @@ export interface SelectableItem {
     value: string;
     /** Displaying text */
     displayValue: string;
+    /** Element title */
+    title?: string;
+    /** Element icon configuration */
+    icon?: ElementIcon;
 }
 /** Dropdown component props type */
 export interface DropdownProps extends BaseElementProps {
@@ -39,8 +43,15 @@ export interface DropdownProps extends BaseElementProps {
      */
     disabled?: boolean;
     /** Label configuration */
-    label?: InputLabel;
+    label?: LabelConfiguration;
     /** Current validation state */
     validationState?: ValidationState;
+    /**
+     * Field hint configuration.
+     * Provides additional information to user to help fill the field
+     *
+     * (!) Hint will be overridden by the validation state, if specified
+     */
+    hint?: HintConfiguration;
 }
 //# sourceMappingURL=types.d.ts.map

package/components/dropdown/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEhF,oBAAoB;AACpB,MAAM,WAAW,cAAc;IAC3B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,sBAAsB;IACtB,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACnD,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,eAAe,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEnH,oBAAoB;AACpB,MAAM,WAAW,cAAc;IAC3B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,sBAAsB;IACtB,YAAY,EAAE,MAAM,CAAC;IAErB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,iCAAiC;IACjC,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACnD,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC5B"}

package/components/icon/component/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import "./style.scss";
-import { IconProps } from "../../icon";
+import { IconProps } from "../..";
 /**
  * Icon component. Based on bootstrap icons
  */
-export default function Icon({ name, size, className, }: IconProps): JSX.Element;
+export default function Icon({ name, size, className, title, data, }: IconProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/components/icon/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAItB,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AASjD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EACzB,IAAI,EAAE,IAAyB,EAC/B,SAAS,GACZ,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAYzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/component/index.tsx"],"names":[],"mappings":";AAKA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASlC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EACzB,IAAI,EAAE,IAAyB,EAE/B,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAqBzB"}

package/components/icon/component/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassName } from "@bodynarf/utils";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../types";
+import { mapDataAttributes } from "../../../utils";
 import "./style.scss";
-import { ElementSize } from "../..";
 const sizeToClassMap = new Map([
     [ElementSize.Small, "bbr-icon--size-small"],
     [ElementSize.Normal, ""],
@@ -11,13 +12,16 @@ const sizeToClassMap = new Map([
 /**
  * Icon component. Based on bootstrap icons
  */
-export default function Icon({ name, size = ElementSize.Normal, className, }) {
+export default function Icon({ name, size = ElementSize.Normal, className, title, data, }) {
     const classNames = getClassName([
         "bbr-icon",
         "bi",
         `bi-${name}`,
+        className,
         sizeToClassMap.has(size) ? sizeToClassMap.get(size) : "",
-        className
     ]);
-    return (_jsx("i", { className: classNames }));
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsx("i", { className: classNames, title: title, ...dataAttributes }));
 }

package/components/icon/types.d.ts

@@ -1,6 +1,6 @@
-import { ElementSize } from "..";
+import { BaseElementProps, ElementSize } from "../../types";
 /** Icon component props */
-export interface IconProps {
+export interface IconProps extends BaseElementProps {
     /**
      * Icon name. Must be without `bi-`
      * @example ["Arrow repeat", "arrow-repeat"]
@@ -8,8 +8,6 @@ export interface IconProps {
      * // For class name check bootstrap icons website
     */
     name: string;
-    /** Additional classname */
-    className?: string;
     /** Icon size */
     size?: ElementSize;
 }

package/components/icon/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,2BAA2B;AAC3B,MAAM,WAAW,SAAS;IACtB;;;;;MAKE;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE3D,2BAA2B;AAC3B,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C;;;;;MAKE;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB"}

package/components/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./types";
 export * from "./accordion";
 export * from "./anchor";
 export * from "./button";

package/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AAExB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AAEtB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AAEtB,cAAc,cAAc,CAAC"}

package/components/index.js

@@ -1,4 +1,3 @@
-export * from "./types";
 export * from "./accordion";
 export * from "./anchor";
 export * from "./button";

package/components/paginator/component/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { PaginatorProps } from "../../paginator";
+import { PaginatorProps } from "../..";
 /**
  * Paginator component.
  * Used for visualization of paging configuration
 */
-export default function Paginator({ count, onPageChange, currentPage, position, size, className, rounded, showNextButtons, nearPagesCount }: PaginatorProps): JSX.Element;
+export default function Paginator({ count, onPageChange, currentPage, position, size, rounded, showNextButtons, nearPagesCount, className, title, data, }: PaginatorProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/components/paginator/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/paginator/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAuB,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhF;;;EAGE;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,YAAY,EAAE,WAAW,EAChC,QAAQ,EACR,IAAI,EAAE,SAAS,EACf,OAAe,EAAE,eAAuB,EACxC,cAAc,EACjB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA4G9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/paginator/component/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AAE5D;;;EAGE;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,YAAY,EAAE,WAAe,EACpC,QAA+B,EAC/B,IAAI,EACJ,OAAe,EAAE,eAAuB,EACxC,cAAc,EAEd,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAqH9B"}