@aristobyte-ui/dropdown 2.12.0 → 2.13.1

package/lib/components/Dropdown/Dropdown.scss

@@ -8,18 +8,43 @@
   }
 
   &__box {
-    @mixin dropdown-variant($name, $color) {
-      &-variant--#{$name} &-options {
+    @mixin dropdown-surface($name, $color) {
+      &.dropdown__box-variant--#{$name}.dropdown__box-appearance--solid &-options {
         background-color: $color;
+        border: 1px solid $color;
+      }
+
+      &.dropdown__box-variant--#{$name}.dropdown__box-appearance--outline &-options {
+        background-color: rgba($color, 0.5);
+        border: 1px solid $color;
+      }
+
+      &.dropdown__box-variant--#{$name}.dropdown__box-appearance--outline-dashed &-options {
+        background-color: rgba($color, 0.5);
+        border: 1px dashed $color;
+      }
+
+      &.dropdown__box-variant--#{$name}.dropdown__box-appearance--no-outline &-options {
+        background-color: rgba($color, 0.5);
+        border: 1px solid transparent;
+      }
+
+      &.dropdown__box-variant--#{$name}.dropdown__box-appearance--glowing &-options {
+        background-color: rgba($color, 0.5);
+        border: 1px solid $color;
+        box-shadow:
+          0 0 8px rgba($color, 0.5),
+          0 0 16px rgba($color, 0.4),
+          0 0 24px rgba($color, 0.3);
       }
     }
 
-    @include dropdown-variant('default', $color-default);
-    @include dropdown-variant('primary', $color-primary);
-    @include dropdown-variant('secondary', $color-secondary);
-    @include dropdown-variant('warning', $color-warning);
-    @include dropdown-variant('error', $color-error);
-    @include dropdown-variant('success', $color-success);
+    @include dropdown-surface('default', $color-default);
+    @include dropdown-surface('primary', $color-primary);
+    @include dropdown-surface('secondary', $color-secondary);
+    @include dropdown-surface('warning', $color-warning);
+    @include dropdown-surface('error', $color-error);
+    @include dropdown-surface('success', $color-success);
 
     &-overlay {
       backdrop-filter: blur(12px);

package/lib/components/Dropdown/index.d.ts

@@ -9,7 +9,6 @@ export interface IDropdown {
     variant?: 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning';
     appearance?: 'solid' | 'outline' | 'outline-dashed' | 'no-outline' | 'glowing';
     onChange?: (newValue: string) => void;
-    initiallyOpened?: boolean;
     choice?: 'multiple' | 'single';
     placeholder?: string;
     disabled?: boolean;

package/lib/components/Dropdown/index.js

@@ -78,30 +78,33 @@ var button_1 = require("@aristobyte-ui/button");
 var utils_1 = require("@aristobyte-ui/utils");
 require("./Dropdown.scss");
 var Dropdown = function (_a) {
-    var children = _a.children, value = _a.value, onChange = _a.onChange, _b = _a.appearance, appearance = _b === void 0 ? 'outline' : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, _d = _a.placeholder, placeholder = _d === void 0 ? 'Select' : _d, _e = _a.choice, choice = _e === void 0 ? 'single' : _e, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.initiallyOpened, initiallyOpened = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.button, button = _j === void 0 ? {} : _j, _k = _a.style, style = _k === void 0 ? {} : _k;
-    var _l = __read(React.useState(initiallyOpened), 2), isOpened = _l[0], setIsOpened = _l[1];
-    var _m = __read(React.useState(value ? [value] : []), 2), selected = _m[0], setSelected = _m[1];
-    var _o = __read(React.useState({
+    var children = _a.children, value = _a.value, onChange = _a.onChange, _b = _a.appearance, appearance = _b === void 0 ? 'outline' : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, _d = _a.placeholder, placeholder = _d === void 0 ? 'Select' : _d, _e = _a.choice, choice = _e === void 0 ? 'single' : _e, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.button, button = _h === void 0 ? {} : _h, _j = _a.style, style = _j === void 0 ? {} : _j;
+    var _k = __read(React.useState(false), 2), isOpened = _k[0], setIsOpened = _k[1];
+    var _l = __read(React.useState(value ? [value] : []), 2), selected = _l[0], setSelected = _l[1];
+    var _m = __read(React.useState({
         top: 0,
         left: 0,
         width: 0,
-    }), 2), position = _o[0], setPosition = _o[1];
-    var _p = __read(React.useState(0), 2), dropdownHeight = _p[0], setDropdownHeight = _p[1];
-    var _q = __read(React.useState(0), 2), buttonHeight = _q[0], setButtonHeight = _q[1];
-    var buttonRef = React.useRef(null);
+    }), 2), position = _m[0], setPosition = _m[1];
+    var buttonContainerRef = React.useRef(null);
     var boxRef = React.useRef(null);
     var uniqueId = React.useId();
-    React.useLayoutEffect(function () {
-        if (!isOpened) {
+    var computePosition = React.useCallback(function () {
+        if (!buttonContainerRef.current || !boxRef.current)
             return;
-        }
-        if (boxRef.current) {
-            setDropdownHeight(boxRef.current.getBoundingClientRect().height);
-        }
-        if (buttonRef.current) {
-            setButtonHeight(buttonRef.current.getBoundingClientRect().height);
-        }
-    }, [isOpened]);
+        var rect = buttonContainerRef.current.getBoundingClientRect();
+        var dropdownRect = boxRef.current.getBoundingClientRect();
+        var spaceBelow = window.innerHeight - rect.bottom;
+        var spaceAbove = rect.top;
+        var shouldOpenUpwards = spaceBelow < dropdownRect.height && spaceAbove > dropdownRect.height;
+        setPosition({
+            top: shouldOpenUpwards
+                ? rect.top + window.scrollY - dropdownRect.height - rect.height / 2
+                : rect.top + window.scrollY + rect.height + 6,
+            left: rect.left + window.scrollX,
+            width: rect.width,
+        });
+    }, []);
     var options = React.Children.toArray(children).filter(function (child) {
         return React.isValidElement(child) && child.type === DropdownOption_1.DropdownOption;
     });
@@ -128,35 +131,35 @@ var Dropdown = function (_a) {
         }
     };
     var handleToggle = function (e) {
-        var _a;
         if (disabled)
             return;
-        var rect = (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!rect)
-            return;
-        var spaceBelow = window.innerHeight - rect.bottom;
-        var spaceAbove = rect.top;
-        var shouldOpenUpwards = dropdownHeight > 0 && spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
-        var finalPosition = {
-            top: shouldOpenUpwards
-                ? rect.top + window.scrollY - dropdownHeight - buttonHeight / 2
-                : rect.top + window.scrollY + buttonHeight + 6,
-            left: rect.left + window.scrollX,
-            width: rect.width,
-        };
-        setPosition(finalPosition);
         if (button === null || button === void 0 ? void 0 : button.onClick)
             button.onClick(e);
         setIsOpened(function (prev) { return !prev; });
     };
+    React.useLayoutEffect(function () {
+        if (!isOpened)
+            return;
+        var raf = requestAnimationFrame(function () {
+            computePosition();
+        });
+        var handleResize = function () { return computePosition(); };
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleResize, true);
+        return function () {
+            cancelAnimationFrame(raf);
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleResize, true);
+        };
+    }, [isOpened, computePosition, options.length]);
     if (!isValidValue()) {
         throw new Error('The "value" prop did not match with any of the DropdownOption "value" prop');
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "dropdown ".concat(className) },
-            React.createElement(button_1.Button, { onClick: handleToggle, className: "dropdown__button ".concat((button === null || button === void 0 ? void 0 : button.className) || ''), appearance: (button === null || button === void 0 ? void 0 : button.appearance) || appearance, variant: (button === null || button === void 0 ? void 0 : button.variant) || variant, disabled: (button === null || button === void 0 ? void 0 : button.disabled) || disabled, ref: buttonRef }, placeholder)),
+        React.createElement("div", { className: "dropdown ".concat(className), ref: buttonContainerRef },
+            React.createElement(button_1.Button, { onClick: handleToggle, className: "dropdown__button ".concat((button === null || button === void 0 ? void 0 : button.className) || ''), appearance: (button === null || button === void 0 ? void 0 : button.appearance) || appearance, variant: (button === null || button === void 0 ? void 0 : button.variant) || variant, disabled: (button === null || button === void 0 ? void 0 : button.disabled) || disabled }, placeholder)),
         React.createElement(utils_1.Portal, null,
-            React.createElement(framer_motion_1.AnimatePresence, null, isOpened && (React.createElement("div", { className: "dropdown__box ".concat("dropdown__box-variant--".concat(variant)), style: style },
+            React.createElement(framer_motion_1.AnimatePresence, null, isOpened && (React.createElement("div", { className: "dropdown__box dropdown__box-variant--".concat(variant, " dropdown__box-appearance--").concat(appearance), style: style },
                 React.createElement(framer_motion_1.motion.div, { className: "dropdown__box-overlay", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3, ease: 'easeIn' }, onClick: function () { return setIsOpened(false); } }),
                 React.createElement(framer_motion_1.motion.div, { ref: boxRef, className: "dropdown__box-options", initial: { opacity: 0, y: 20, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 20, scale: 0.95 }, transition: { duration: 0.2, ease: 'easeIn' }, style: {
                         top: position.top,

package/lib/components/DropdownOption/DropdownOption.scss

@@ -2,7 +2,7 @@
 
 .dropdown-option {
   align-items: center;
-  border-radius: 8px; // TODO: change to dynamic
+  border-radius: 8px; //TODO: change to dynamic
   color: $white;
   display: flex;
   font-size: 14px;
@@ -13,18 +13,31 @@
   transition: all 120ms ease-out;
   width: 100%;
 
-  @mixin dropdown-option-variant($name, $hover-color) {
-    &-variant--#{$name}:hover {
-      background-color: $hover-color;
+  &-variant {
+    &--default:hover {
+      background-color: $color-default-hover;
+    }
+
+    &--primary:hover {
+      background-color: $color-primary-hover;
     }
-  }
 
-  @include dropdown-option-variant('default', $color-default-hover);
-  @include dropdown-option-variant('primary', $color-primary-hover);
-  @include dropdown-option-variant('secondary', $color-secondary-hover);
-  @include dropdown-option-variant('warning', $color-warning-hover);
-  @include dropdown-option-variant('error', $color-error-hover);
-  @include dropdown-option-variant('success', $color-success-hover);
+    &--secondary:hover {
+      background-color: $color-secondary-hover;
+    }
+
+    &--warning:hover {
+      background-color: $color-warning-hover;
+    }
+
+    &--error:hover {
+      background-color: $color-error-hover;
+    }
+
+    &--success:hover {
+      background-color: $color-success-hover;
+    }
+  }
 
   &--disabled,
   &--disabled:hover {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aristobyte-ui/dropdown",
   "description": "react dropdown component with trigger button, dropdownoptions, placement variants, fully typed typescript support, and composable integration with aristobyte ui button",
-  "version": "2.12.0",
+  "version": "2.13.1",
   "license": "MIT",
   "private": false,
   "author": "AristoByte <info@aristobyte.com>",
@@ -52,8 +52,8 @@
     "sass": "^1.97.3"
   },
   "dependencies": {
-    "@aristobyte-ui/button": "^2.12.0",
-    "@aristobyte-ui/utils": "^2.12.0"
+    "@aristobyte-ui/button": "^2.13.1",
+    "@aristobyte-ui/utils": "^2.13.1"
   },
   "exports": {
     ".": {