@bodynarf/react.components 1.4.2 → 1.4.3

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

@@ -0,0 +1,4 @@
+import { DropdownProps } from "../..";
+declare const DropdownCompact: ({ items, value, onSelect, deselectable, className, hideOnOuterClick, listMaxHeight, placeholder, compact, }: DropdownProps) => JSX.Element;
+export default DropdownCompact;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/compact/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,eAAe,gHAMlB,aAAa,KAAG,WA6FlB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/dropdown/components/compact/index.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useState } from "react";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { useComponentOutsideClick } from "../../../../hooks";
+import DropdownItem from '../item';
+import DropdownLabel from '../label';
+const DropdownCompact = ({ items, value, onSelect, deselectable, className, hideOnOuterClick, listMaxHeight, placeholder, compact, }) => {
+    const id = useId();
+    const [isListVisible, setListVisible] = useState(false);
+    const onItemClick = useCallback((event) => {
+        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]);
+    const onLabelClick = useCallback((event) => {
+        const target = event.target;
+        if (isNullOrUndefined(target)) {
+            return;
+        }
+        if (target.classList.contains("bi-plus-lg")) {
+            onSelect(undefined);
+        }
+        else {
+            setListVisible(state => !state);
+        }
+    }, [onSelect, setListVisible]);
+    useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
+    const classNames = getClassName([
+        "bbr-dropdown",
+        (compact ?? false) ? "bbr-dropdown--compact" : "",
+        isListVisible ? "is-active" : "",
+        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
+        className,
+        "dropdown"
+    ]);
+    return (_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { caption: placeholder, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _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));
+};
+export default DropdownCompact;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { SelectableItem } from "../../types";
+/** Dropdown item props */
+interface DropdownItemProps {
+    /** Item to present in dropdown */
+    item: SelectableItem;
+    /** Is item selected*/
+    selected: boolean;
+    /** Item click handler */
+    onClick: (event: React.MouseEvent<HTMLLIElement>) => void;
+}
+/** Single item in dropdown component */
+declare const DropdownItem: ({ item, selected, onClick }: DropdownItemProps) => JSX.Element;
+export default DropdownItem;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/item/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,0BAA0B;AAC1B,UAAU,iBAAiB;IACvB,kCAAkC;IAClC,IAAI,EAAE,cAAc,CAAC;IAErB,sBAAsB;IACtB,QAAQ,EAAE,OAAO,CAAC;IAElB,yBAAyB;IACzB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,wCAAwC;AACxC,QAAA,MAAM,YAAY,gCAAiC,iBAAiB,KAAG,WAYtE,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** 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));
+};
+export default DropdownItem;

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

@@ -0,0 +1,18 @@
+import { MouseEvent } from 'react';
+import { SelectableItem } from "../../types";
+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;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;AAMnC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,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"}

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+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;
+    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" }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { name: "arrow-down" })] }));
+};
+export default DropdownLabel;

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

@@ -0,0 +1,4 @@
+import { DropdownProps } from '../..';
+declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder }: DropdownProps) => JSX.Element;
+export default DropdownWithLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,iBAAiB,8HAOpB,aAAa,KAAG,WA0KlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,75 @@
+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 { useComponentOutsideClick } from '../../../../hooks';
+import DropdownItem from '../item';
+import DropdownLabel from '../label';
+const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder }) => {
+    const id = useId();
+    const [isListVisible, setListVisible] = useState(false);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
+    const onItemClick = useCallback((event) => {
+        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]);
+    const onLabelClick = useCallback((event) => {
+        const target = event.target;
+        if (isNullOrUndefined(target)) {
+            return;
+        }
+        if (target.classList.contains("bi-plus-lg")) {
+            onSelect(undefined);
+        }
+        else {
+            setListVisible(state => !state);
+        }
+    }, [onSelect, setListVisible]);
+    useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
+    const classNames = getClassName([
+        "bbr-dropdown",
+        isListVisible ? "is-active" : "",
+        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
+        className,
+        "dropdown"
+    ]);
+    const labelClassName = getClassName([
+        "label",
+        label.className
+    ]);
+    if (label.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            label.horizontalContainerClassName
+        ]);
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label.horizontalFieldContainerClassName
+        ]);
+        return (_jsxs("div", { className: "app-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 === true, selectedItem: value, onClick: onLabelClick }), _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") })] }) })] }));
+    }
+    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 === true, selectedItem: value, onClick: onLabelClick }), _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") })] }));
+};
+export default DropdownWithLabel;

package/components/dropdown/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import './dropdown.scss';
-import { SelectableItem } from './types';
 import { BaseElementProps } from '../types';
+import { InputLabel, ValidationState } from '../primitives';
+import { SelectableItem } from './types';
 export declare type DropdownProps = BaseElementProps & {
     /** Items which can be selected */
     items: Array<SelectableItem>;
@@ -25,8 +25,19 @@ export declare type DropdownProps = BaseElementProps & {
     deselectable?: boolean;
     /** Custom dropdown list max-height property */
     listMaxHeight?: string;
+    /**
+     * Should dropdown be compact
+     * Will have width by maximum current selection item width
+     */
+    compact?: boolean;
+    /** Input element placeholder */
+    placeholder: string;
+    /** Label configuration */
+    label?: InputLabel;
+    /** Current validation state */
+    validationState?: ValidationState;
 };
 /** Dropdown component */
-declare const Dropdown: ({ value, items, onSelect, caption, deselectable, className, hideOnOuterClick, listMaxHeight }: DropdownProps) => JSX.Element;
+declare const Dropdown: (props: DropdownProps) => JSX.Element;
 export default Dropdown;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":";AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,kGAAmG,aAAa,KAAG,WA4FhI,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIzC,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,OAAO,EAAE,MAAM,CAAC;IAEhB,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,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/dropdown/index.js

@@ -1,56 +1,15 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrUndefined } from '@bodynarf/utils';
 import './dropdown.scss';
-import { useComponentOutsideClick } from '../../hooks/useComponentOutsideClick';
-import DropdownItem from './components/dropdownItem';
-import DropdownLabel from './components/dropdownLabel';
+import DropdownWithLabel from './components/withLabel';
+import DropdownCompact from './components/compact';
 /** Dropdown component */
-const Dropdown = ({ value, items, onSelect, caption, deselectable, className, hideOnOuterClick, listMaxHeight }) => {
-    const id = useId();
-    const [isListVisible, setListVisible] = useState(false);
-    const onItemClick = useCallback((event) => {
-        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]);
-    const onLabelClick = useCallback((event) => {
-        const target = event.target;
-        if (isNullOrUndefined(target)) {
-            return;
-        }
-        if (target.classList.contains("bi-plus-lg")) {
-            onSelect(undefined);
-        }
-        else {
-            setListVisible(state => !state);
-        }
-    }, [onSelect, setListVisible]);
-    useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
-    const classNames = getClassName([
-        "app-dropdown",
-        isListVisible ? "is-active" : "",
-        isNullOrEmpty(listMaxHeight) ? "app-dropdown--height-default" : "",
-        className,
-        "dropdown"
-    ]);
-    return (_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { caption: caption, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _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));
+const Dropdown = (props) => {
+    if (!isNullOrUndefined(props.label)) {
+        return _jsx(DropdownWithLabel, { ...props });
+    }
+    else {
+        return _jsx(DropdownCompact, { ...props });
+    }
 };
 export default Dropdown;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.4.2",
+    "version": "1.4.3",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"