@bodynarf/react.components 1.4.17 → 1.4.18

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

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

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

@@ -1 +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"}
+{"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,0HAMlB,aAAa,KAAG,WAsGlB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -4,10 +4,13 @@ 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 DropdownCompact = ({ items, value, onSelect, deselectable, className, hideOnOuterClick, listMaxHeight, placeholder, compact, disabled, }) => {
     const id = useId();
     const [isListVisible, setListVisible] = useState(false);
     const onItemClick = useCallback((event) => {
+        if (disabled ?? false) {
+            return;
+        }
         const target = event.target;
         if (isNullOrUndefined(target)) {
             return;
@@ -26,8 +29,11 @@ const DropdownCompact = ({ items, value, onSelect, deselectable, className, hide
         }
         onSelect(item);
         setListVisible(false);
-    }, [setListVisible, value, items, onSelect]);
+    }, [setListVisible, value, items, onSelect, disabled]);
     const onLabelClick = useCallback((event) => {
+        if (disabled ?? false) {
+            return;
+        }
         const target = event.target;
         if (isNullOrUndefined(target)) {
             return;
@@ -38,10 +44,11 @@ const DropdownCompact = ({ items, value, onSelect, deselectable, className, hide
         else {
             setListVisible(state => !state);
         }
-    }, [onSelect, setListVisible]);
+    }, [onSelect, setListVisible, disabled]);
     useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
     const classNames = getClassName([
         "bbr-dropdown",
+        (disabled ?? false) ? "bbr-dropdown--disabled" : "",
         (compact ?? false) ? "bbr-dropdown--compact" : "",
         isListVisible ? "is-active" : "",
         isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,iBAAiB,8HAOpB,aAAa,KAAG,WA2KlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"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,wIAOpB,aAAa,KAAG,WAoLlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -5,11 +5,14 @@ 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 DropdownWithLabel = ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder, disabled }) => {
     const id = useId();
     const [isListVisible, setListVisible] = useState(false);
     const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
     const onItemClick = useCallback((event) => {
+        if (disabled ?? false) {
+            return;
+        }
         const target = event.target;
         if (isNullOrUndefined(target)) {
             return;
@@ -28,8 +31,11 @@ const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectab
         }
         onSelect(item);
         setListVisible(false);
-    }, [setListVisible, value, items, onSelect]);
+    }, [setListVisible, value, items, onSelect, disabled]);
     const onLabelClick = useCallback((event) => {
+        if (disabled ?? false) {
+            return;
+        }
         const target = event.target;
         if (isNullOrUndefined(target)) {
             return;
@@ -40,10 +46,11 @@ const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectab
         else {
             setListVisible(state => !state);
         }
-    }, [onSelect, setListVisible]);
+    }, [onSelect, setListVisible, disabled]);
     useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
     const classNames = getClassName([
         "bbr-dropdown",
+        (disabled ?? false) ? "bbr-dropdown--disabled" : "",
         isListVisible ? "is-active" : "",
         isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
         className,

package/components/dropdown/dropdown.scss

@@ -5,14 +5,6 @@
         display: block;
     }
 
-    &--compact {
-        width: fit-content;
-
-        & .dropdown-menu {
-            min-width: 11.75rem;
-        }
-    }
-
     &:not(.bbr-dropdown--compact) {
         & .dropdown-menu {
             min-width: 100%;
@@ -102,4 +94,27 @@
             max-height: 15vw;
         }
     }
+
+    &--compact {
+        width: fit-content;
+
+        & .dropdown-menu {
+            min-width: 11.75rem;
+        }
+    }
+
+    &--disabled {
+        .bbr-dropdown__label {
+            background-color: hsl(0deg, 0%, 96%);
+            border-color: hsl(0deg, 0%, 96%);
+            box-shadow: none;
+            color: hsl(0deg, 0%, 48%);
+
+            cursor: not-allowed;
+
+            .bbr-icon {
+                pointer-events: none;
+            }
+        }
+    }
 }

package/components/dropdown/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './dropdown.scss';
 import { BaseElementProps } from '../types';
 import { InputLabel, ValidationState } from '../primitives';
@@ -6,20 +5,17 @@ import { SelectableItem } from './types';
 export declare type DropdownProps = BaseElementProps & {
     /** Items which can be selected */
     items: Array<SelectableItem>;
-    /**
-     * Selected value.
-     * Must be stored outside
-    */
-    value?: SelectableItem;
+    /** Input element placeholder */
+    placeholder: string;
     /**
      * Action to update selected value, which stored outside
     */
     onSelect: (item?: SelectableItem) => void;
     /**
-     * Caption.
-     * Appears only no element selected
+     * Selected value.
+     * Must be stored outside
     */
-    caption: string;
+    value: SelectableItem;
     /** Hide dropdown list when its opened and user click outside */
     hideOnOuterClick: boolean;
     /** Can user deselect */
@@ -31,8 +27,10 @@ export declare type DropdownProps = BaseElementProps & {
      * Will have width by maximum current selection item width
      */
     compact?: boolean;
-    /** Input element placeholder */
-    placeholder: string;
+    /**
+     * Is element disabled
+     */
+    disabled?: boolean;
     /** Label configuration */
     label?: InputLabel;
     /** Current validation state */

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

@@ -1 +1 @@
-{"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"}
+{"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,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,KAAK,EAAE,cAAc,CAAC;IAEtB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

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