@bodynarf/react.components 1.9.0 → 1.10.0

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,18 +1,2 @@
-import { MouseEvent } from "react";
-import { SelectableItem } from "../..";
-export interface DropdownLabelProps {
-    /** Caption when no items selected */
-    caption: string;
-    /** Can user deselect */
-    deselectable: boolean;
-    /** Selected item */
-    selectedItem?: SelectableItem;
-    /** Element classnames */
-    className?: string;
-    /** Click handler*/
-    onClick: (event: MouseEvent<HTMLLabelElement>) => void;
-}
-/** Label component */
-declare const DropdownLabel: ({ caption, selectedItem, onClick, deselectable, className, }: DropdownLabelProps) => JSX.Element;
-export default DropdownLabel;
+export { default } from "./component";
 //# sourceMappingURL=index.d.ts.map

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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

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

@@ -1,54 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementPosition, ElementSize } from "../../../../types";
-import Icon from "../../../icon";
-/** Label component */
-const DropdownLabel = ({ caption, selectedItem, onClick, deselectable, className, }) => {
-    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`,
-        "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 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 })] }));
-};
+export { default } from "./component";

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

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import { FC } from "react";
 import { DropdownProps } from "../..";
-declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, hideOnOuterClick, listMaxHeight, label, placeholder, disabled, className, title, data, hint, }: DropdownProps) => JSX.Element;
+/** Dropdown component with label */
+declare const DropdownWithLabel: FC<DropdownProps>;
 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":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,QAAA,MAAM,iBAAiB,4JASpB,aAAa,KAAG,WAiMlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAS,MAAM,OAAO,CAAC;AAKlC,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,oCAAoC;AACpC,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,aAAa,CAgBxC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -1,85 +1,11 @@
-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 { getStyleClassName, mapDataAttributes } from "../../../../utils";
-import { useComponentOutsideClick } from "../../../../hooks";
-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, }) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { ElementSize } from "../../../../types";
+import LabelWrapper from "../../../primitives/internal/componentWithLabel";
+import DropdownCompact from "../compact";
+/** Dropdown component with label */
+const DropdownWithLabel = (props) => {
     const id = useId();
-    const [isListVisible, setListVisible] = useState(false);
-    const onItemClick = useCallback((event) => {
-        if (disabled) {
-            return;
-        }
-        const target = event.target;
-        if (isNullOrUndefined(target)) {
-            return;
-        }
-        const dataValue = target.dataset["dropdownItemValue"];
-        if (isNullOrEmpty(dataValue)) {
-            return;
-        }
-        const item = items.find(x => x.value === dataValue);
-        if (isNullOrUndefined(item)) {
-            return;
-        }
-        if (value === item) {
-            setListVisible(false);
-            return;
-        }
-        onSelect(item);
-        setListVisible(false);
-    }, [setListVisible, value, items, onSelect, disabled]);
-    const onLabelClick = useCallback((event) => {
-        if (disabled) {
-            return;
-        }
-        const target = event.target;
-        if (isNullOrUndefined(target)) {
-            return;
-        }
-        if (target.classList.contains("bi-plus-lg")) {
-            onSelect(undefined);
-        }
-        else {
-            setListVisible(state => !state);
-        }
-    }, [onSelect, setListVisible, disabled]);
-    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" : "",
-        "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",
-            "is-normal",
-            label.horizontalContainerClassName
-        ]);
-        const fieldContainerClassName = getClassName([
-            "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, 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), _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, 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), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsx(LabelWrapper, { id: id, label: props.label, size: ElementSize.Normal, children: _jsx(DropdownCompact, { ...props, id: id }) }));
 };
 export default DropdownWithLabel;

package/components/dropdown/types.d.ts

@@ -53,5 +53,13 @@ export interface DropdownProps extends BaseElementProps {
      * (!) Hint will be overridden by the validation state, if specified
      */
     hint?: HintConfiguration;
+    /** Caption for dropdown list when there's no data to display */
+    noDataText?: string;
+    /** Is search through items enabled */
+    searchable?: boolean;
+    /**
+     * Text which would be displayed when search query applied and no items found
+     */
+    noDataByQuery?: string;
 }
 //# 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,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"}
+{"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;IAEzB,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B"}

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

@@ -1,8 +1,9 @@
-/// <reference types="react" />
+import { FC } from "react";
 import "./style.scss";
 import { IconProps } from "../..";
 /**
  * Icon component. Based on bootstrap icons
  */
-export default function Icon({ name, size, className, title, data, }: IconProps): JSX.Element;
+declare const Icon: FC<IconProps>;
+export default Icon;
 //# 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":";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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASlC;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA2BvB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/icon/component/index.js

@@ -12,7 +12,7 @@ const sizeToClassMap = new Map([
 /**
  * Icon component. Based on bootstrap icons
  */
-export default function Icon({ name, size = ElementSize.Normal, className, title, data, }) {
+const Icon = ({ name, size = ElementSize.Normal, className, title, data, onClick, }) => {
     const classNames = getClassName([
         "bbr-icon",
         "bi",
@@ -23,5 +23,6 @@ export default function Icon({ name, size = ElementSize.Normal, className, title
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsx("i", { className: classNames, title: title, ...dataAttributes }));
-}
+    return (_jsx("i", { className: classNames, title: title, onClick: onClick, ...dataAttributes }));
+};
+export default Icon;

package/components/icon/types.d.ts

@@ -10,5 +10,7 @@ export interface IconProps extends BaseElementProps {
     name: string;
     /** Icon size */
     size?: ElementSize;
+    /** Click handler */
+    onClick?: () => void;
 }
 //# sourceMappingURL=types.d.ts.map

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,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"}
+{"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;IAEnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB"}

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

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import "../../dropdown/component/style.scss";
+import "./style.scss";
+import { MultiselectProps } from "../types";
+/** Multiselect component */
+declare const Multiselect: FC<MultiselectProps>;
+export default Multiselect;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/multiselect/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,qCAAqC,CAAC;AAC7C,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5C,4BAA4B;AAC5B,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAKrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/components/multiselect/component/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrUndefined } from "@bodynarf/utils";
+import "../../dropdown/component/style.scss";
+import "./style.scss";
+import MultiselectWithoutLabel from "../components/withoutLabel";
+import MultiselectWithLabel from "../components/withLabel";
+/** Multiselect component */
+const Multiselect = (props) => {
+    return isNullOrUndefined(props.label)
+        ? _jsx(MultiselectWithoutLabel, { ...props })
+        : _jsx(MultiselectWithLabel, { ...props });
+};
+export default Multiselect;

package/components/multiselect/component/style.scss

@@ -0,0 +1,20 @@
+.bbr-multiselect {
+    .dropdown-content {
+        overflow: hidden;
+
+        ul {
+            max-height: 13.5rem;
+            overflow: auto;
+
+            li.bbr-dropdown-item {
+                .field:not(:last-child) {
+                    margin-bottom: 0 !important;
+                }
+
+                .bbr-icon {
+                    transition: none;
+                }
+            }
+        }
+    }
+}

package/components/multiselect/components/item/index.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { MultiselectItem as MultiselectItemModel, MultiselectProps } from "../../";
+/** Multiselect item props */
+declare type MultiselectItemProps = Pick<MultiselectProps, "checkboxConfig"> & {
+    rootId: string;
+    /** Item to present in multiselect */
+    item: MultiselectItemModel;
+    /** Is item selected */
+    selected: boolean;
+    /**
+     * Handler of item selection change event
+     * @param item Current item
+     * @param checked New checked state
+     */
+    onChange: (item: MultiselectItemModel, checked: boolean) => void;
+    /**
+     * Handler of item click event
+     * @param item Current item
+     */
+    onItemClick: (item: MultiselectItemModel) => void;
+};
+/** Single item in multiselect component */
+declare const MultiselectItem: ({ item, selected, rootId, onItemClick, onChange, checkboxConfig, }: MultiselectItemProps) => JSX.Element;
+export default MultiselectItem;
+//# sourceMappingURL=index.d.ts.map

package/components/multiselect/components/item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiselect/components/item/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,IAAI,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAEnF,6BAA6B;AAC7B,aAAK,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAAG;IACnE,MAAM,EAAE,MAAM,CAAC;IAEf,qCAAqC;IACrC,IAAI,EAAE,oBAAoB,CAAC;IAE3B,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjE;;;OAGG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,2CAA2C;AAC3C,QAAA,MAAM,eAAe,uEAIlB,oBAAoB,KAAG,WAqDzB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/multiselect/components/item/index.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementPosition } from "../../../../types";
+import Icon from "../../../icon";
+import Checkbox from "../../../primitives/checkbox";
+/** Single item in multiselect component */
+const MultiselectItem = ({ item, selected, rootId, onItemClick, onChange, checkboxConfig, }) => {
+    const onChecked = useCallback((value) => onChange(item, value ?? false), [item, onChange]);
+    const onClick = useCallback((event) => {
+        if (event.target instanceof HTMLLIElement) {
+            onItemClick(item);
+        }
+        else {
+            event.stopPropagation();
+        }
+    }, [item, onItemClick]);
+    if (!isNullOrUndefined(item.icon)) {
+        return _jsx(MultiselectItemWithIcon, { item: item, rootId: rootId, onChange: onChange, selected: selected, onItemClick: onItemClick });
+    }
+    const className = getClassName([
+        "bbr-dropdown-item",
+        "dropdown-item",
+        selected ? "is-active" : "",
+        "is-flex",
+    ]);
+    return (_jsxs("li", { className: className, onClick: onClick, title: item.title, "data-dropdown-id": rootId, children: [_jsx(Checkbox, { ...checkboxConfig, defaultValue: selected, onValueChange: onChecked }, item.id + selected), item.displayValue] }));
+};
+export default MultiselectItem;
+/** Single item in multiselect component with icon */
+const MultiselectItemWithIcon = ({ item, selected, rootId, onChange, onItemClick, checkboxConfig, }) => {
+    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",
+    ]);
+    const onChecked = useCallback((value) => onChange(item, value ?? false), [item, onChange]);
+    const onClick = useCallback((event) => {
+        if (event.target instanceof HTMLLIElement) {
+            onItemClick(item);
+        }
+        else {
+            event.stopPropagation();
+        }
+    }, [item, onItemClick]);
+    const checkboxClassName = getClassName([
+        checkboxConfig?.className,
+        "mb-1"
+    ]);
+    if (icon.position === ElementPosition.Right) {
+        return (_jsxs("li", { onClick: onClick, className: className, title: item.title, children: [_jsx(Checkbox, { ...checkboxConfig, defaultValue: selected, onValueChange: onChecked, className: checkboxClassName }, item.id + selected), item.displayValue, _jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName })] }));
+    }
+    return (_jsxs("li", { onClick: onClick, className: className, title: item.title, "data-dropdown-id": rootId, children: [_jsx(Checkbox, { ...checkboxConfig, defaultValue: selected, onValueChange: onChecked, className: checkboxClassName }, item.id + selected), _jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName }), item.displayValue] }));
+};

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

@@ -0,0 +1,20 @@
+import { FC, MouseEvent } from "react";
+/** Props type of `MultiselectLabel` */
+export interface MultiselectLabelProps {
+    /** Caption when no items selected */
+    caption: string;
+    /** Caption when some items were selected */
+    selectionCaption: string;
+    /** Amount of selected items */
+    selectedItemsCount: number;
+    /** Can user deselect */
+    deselectable: boolean;
+    /** Element classnames */
+    className?: string;
+    /** Click handler*/
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+}
+/** Label component */
+declare const MultiselectLabel: FC<MultiselectLabelProps>;
+export default MultiselectLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/multiselect/components/label/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAKvC,uCAAuC;AACvC,MAAM,WAAW,qBAAqB;IAClC,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,CAAC;IAEzB,+BAA+B;IAC/B,kBAAkB,EAAE,MAAM,CAAC;IAE3B,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACrD;AAED,sBAAsB;AACtB,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAqB/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SelectedItemLabel from "../components/nonEmpty";
+import EmptyLabel from "../components/empty";
+/** Label component */
+const MultiselectLabel = ({ caption, selectionCaption, selectedItemsCount, onClick, deselectable, className, }) => {
+    if (selectedItemsCount === 0) {
+        return _jsx(EmptyLabel, { caption: caption, onClick: onClick, className: className });
+    }
+    const captionWhenItemsSelected = selectionCaption.format(`${selectedItemsCount}`);
+    return _jsx(SelectedItemLabel, { onClick: onClick, className: className, deselectable: deselectable, caption: captionWhenItemsSelected });
+};
+export default MultiselectLabel;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/multiselect/components/label/components/empty/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,iCAAiC;AACjC,aAAK,eAAe,GAAG,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC,CAAC;AAExF,2DAA2D;AAC3D,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAsBnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/multiselect/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 multiselect 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/multiselect/components/label/components/nonEmpty/index.d.ts

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

package/components/multiselect/components/label/components/nonEmpty/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/multiselect/components/label/components/nonEmpty/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,+CAA+C;AAC/C,aAAK,6BAA6B,GAAG,IAAI,CACrC,qBAAqB,EACnB,SAAS,GAAG,SAAS,GACrB,cAAc,GAAG,WAAW,CACjC,CAAC;AAEF,2CAA2C;AAC3C,QAAA,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CA2B/D,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/components/multiselect/components/label/components/nonEmpty/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";
+/** Dropdown label when item is selected */
+const NonEmptyMultiselectLabel = ({ onClick, deselectable, className, caption }) => {
+    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", children: caption }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+};
+export default NonEmptyMultiselectLabel;

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

@@ -0,0 +1,2 @@
+export { default } from "./component";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiselect/components/label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/components/multiselect/components/label/index.js

@@ -0,0 +1 @@
+export { default } from "./component";

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

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { MultiselectProps } from "../../types";
+/** Multiselect component with label */
+declare const MultiselectWithLabel: FC<MultiselectProps>;
+export default MultiselectWithLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiselect/components/withLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAS,MAAM,OAAO,CAAC;AAKlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C,uCAAuC;AACvC,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,gBAAgB,CAc9C,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/components/multiselect/components/withLabel/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { ElementSize } from "../../../../types";
+import LabelWrapper from "../../../primitives/internal/componentWithLabel";
+import MultiselectWithoutLabel from "../withoutLabel";
+/** Multiselect component with label */
+const MultiselectWithLabel = (props) => {
+    const id = useId();
+    return (_jsx(LabelWrapper, { id: id, label: props.label, size: ElementSize.Normal, children: _jsx(MultiselectWithoutLabel, { ...props }) }));
+};
+export default MultiselectWithLabel;