@bodynarf/react.components 1.9.1 → 1.10.1

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;

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

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { MultiselectProps } from "../../types";
+/** Props type of `MultiselectWithoutLabel` */
+declare type MultiselectWithoutLabelProps = MultiselectProps & {
+    /** Manual component identifier */
+    id?: string;
+};
+declare const MultiselectWithoutLabel: FC<MultiselectWithoutLabelProps>;
+export default MultiselectWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiselect/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAUrE,OAAO,EAAE,gBAAgB,EAA2C,MAAM,aAAa,CAAC;AAIxF,8CAA8C;AAC9C,aAAK,4BAA4B,GAAG,gBAAgB,GAAG;IACnD,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAiJ7D,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/components/multiselect/components/withoutLabel/index.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useId, useState } from "react";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../utils";
+import { useComponentOutsideClick } from "../../../../hooks";
+import Search from "../../../search";
+import InternalHint from "../../../primitives/internal/hint";
+import MultiselectItem from "../item";
+import MultiselectLabel from "../label/component";
+const MultiselectWithoutLabel = ({ items, onChange, onClear, hideOnOuterClick, listMaxHeight, placeholder, noDataText = "No items found", selectionCaption = "{0} items selected", noDataByQuery = "No items found by specified search", compact = false, disabled = false, searchable = true, validationState, className, title, data, hint, id: propsId, checkboxConfig, }) => {
+    const generatedId = useId();
+    const id = propsId ?? generatedId;
+    const [isListVisible, setListVisible] = useState(false);
+    const [selectedItems, setSelectedItems] = useState(items
+        .filter(({ selected }) => selected)
+        .map(({ id }) => id)
+        ??
+            []);
+    const onItemClick = useCallback((item) => {
+        const isItemSelected = selectedItems.includes(item.id);
+        setSelectedItems(x => isItemSelected
+            ? x.filter(x => x !== item.id)
+            : [...x, item.id]);
+        item.selected = isItemSelected;
+        onChange(item, isItemSelected);
+    }, [onChange, selectedItems]);
+    const onItemSelectChange = useCallback((item, selected) => {
+        setSelectedItems(x => selected
+            ? [...x, item.id]
+            : x.filter(x => x !== item.id));
+        item.selected = selected;
+        onChange(item, selected);
+    }, [onChange]);
+    const onLabelClick = useCallback((event) => {
+        if (disabled) {
+            return;
+        }
+        const target = event.target;
+        if (isNullOrUndefined(target)) {
+            return;
+        }
+        if (target.classList.contains("bi-plus-lg")) {
+            setSelectedItems([]);
+            onClear?.();
+        }
+        else {
+            setListVisible(state => !state);
+        }
+    }, [onClear, setListVisible, disabled]);
+    useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
+    const classNames = getClassName([
+        "bbr-multiselect",
+        "bbr-dropdown",
+        className,
+        disabled ? "bbr-dropdown--disabled" : "",
+        compact ? "bbr-dropdown--compact" : "",
+        isListVisible ? "is-active" : "",
+        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
+        "dropdown",
+    ]);
+    const labelComponentClassName = getStyleClassName(undefined, validationState);
+    const selectedItemsCount = selectedItems.length;
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    const deselectable = !isNullOrUndefined(onClear);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames, "data-dropdown-id": id, title: title, ...dataAttributes, children: [_jsx(MultiselectLabel, { caption: placeholder, onClick: onLabelClick, deselectable: deselectable, className: labelComponentClassName, selectionCaption: selectionCaption, selectedItemsCount: selectedItemsCount }), _jsx("div", { className: "dropdown-menu", children: _jsx(DropdownContent, { id: id, items: items, searchable: searchable, noDataText: noDataText, onItemClick: onItemClick, noDataByQuery: noDataByQuery, selectedItems: selectedItems, listMaxHeight: listMaxHeight, checkboxConfig: checkboxConfig, onItemSelectChange: onItemSelectChange }) })] }, id), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+};
+export default MultiselectWithoutLabel;
+const DropdownContent = ({ noDataText, id, listMaxHeight, noDataByQuery, items, selectedItems, onItemClick, onItemSelectChange, searchable = true, checkboxConfig, }) => {
+    const [search, setSearch] = useState("");
+    if (items.length === 0) {
+        return (_jsx("div", { className: "dropdown-content", children: _jsx("span", { className: "dropdown-item", children: noDataText }) }));
+    }
+    const filteredItems = isNullOrEmpty(search)
+        ? items
+        : items.filter(({ displayValue }) => displayValue.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
+    if (filteredItems.length === 0) {
+        return (_jsxs("div", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: [_jsx("div", { className: "mx-2 my-1", children: _jsx(Search, { caption: "search", onSearch: setSearch, searchType: "byTyping", size: ElementSize.Small }) }), _jsx("span", { className: "dropdown-item", children: noDataByQuery })] }));
+    }
+    return (_jsxs("div", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: [searchable &&
+                _jsx("div", { className: "mx-2 my-1", children: _jsx(Search, { caption: "search", onSearch: setSearch, searchType: "byTyping", size: ElementSize.Small }) }), _jsx("ul", { children: filteredItems.map(item => _jsx(MultiselectItem, { item: item, rootId: id, onItemClick: onItemClick, onChange: onItemSelectChange, checkboxConfig: checkboxConfig, selected: selectedItems.includes(item.id) }, item.id)) })] }));
+};

package/components/multiselect/index.d.ts

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

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

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

package/components/multiselect/index.js

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

package/components/multiselect/types.d.ts

@@ -0,0 +1,41 @@
+import { DropdownProps, SelectableItem } from "../dropdown";
+import { CheckBoxProps } from "../primitives";
+/** Single multiselect item that user can select */
+export declare type MultiselectItem = SelectableItem & {
+    /** Is item selected */
+    selected: boolean;
+};
+/** Props type of `Multiselect` */
+export declare type MultiselectProps = Omit<DropdownProps, "items" | "onSelect" | "value" | "deselectable" | "searchable"> & {
+    /** Items which can be selected */
+    items: Array<MultiselectItem>;
+    /**
+     * Handler of changing select state of item
+     * @description `item.selected` will be set by component
+     * @param item Item that triggered event
+     * @param selected New select flag value
+     */
+    onChange: (item: MultiselectItem, selected: boolean) => void;
+    /**
+     * Handler of clear selection event.
+     * When no handler specified - clear selection cannot be performed
+     */
+    onClear?: () => void;
+    /**
+     * Caption for label when some items are selected
+     * @example selectionCaption: "selected: {0}"
+     * @description Supports only 1 string parameter for number of selected items. Default is `{0} items selected`
+     */
+    selectionCaption?: string;
+    /**
+     * Text which would be displayed when search query applied and no items found
+     */
+    noDataByQuery?: string;
+    /**
+     * Is search through items enabled. Default is `true`
+     */
+    searchable?: boolean;
+    /** Customization for checkbox */
+    checkboxConfig?: Pick<CheckBoxProps, "block" | "className" | "data" | "fixBackgroundColor" | "hasBackgroundColor" | "style" | "withoutBorder" | "rounded">;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/multiselect/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,mDAAmD;AACnD,oBAAY,eAAe,GAAG,cAAc,GAAG;IAC3C,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,kCAAkC;AAClC,oBAAY,gBAAgB,GAAG,IAAI,CAC/B,aAAa,EACX,OAAO,GAAG,UAAU,GACpB,OAAO,GAAG,cAAc,GACxB,YAAY,CACjB,GAAG;IACA,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;IAE9B;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,iCAAiC;IACjC,cAAc,CAAC,EAAE,IAAI,CACjB,aAAa,EACX,OAAO,GAAG,WAAW,GAAG,MAAM,GAC9B,oBAAoB,GAAG,oBAAoB,GAC3C,OAAO,GAAG,eAAe,GACzB,SAAS,CACd,CAAC;CACL,CAAC"}

package/components/multiselect/types.js

@@ -0,0 +1 @@
+export {};

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":";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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/paginator/component/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC;;;EAGE;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,YAAY,EAAE,WAAe,EACpC,QAA+B,EAAE,IAAyB,EAC1D,OAAe,EAAE,eAAuB,EACxC,cAAkB,EAElB,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAqH9B"}