@aristobyte-ui/dropdown 2.6.0 → 2.6.2

package/es/components/Dropdown/Dropdown.scss

@@ -0,0 +1,64 @@
+@use '@aristobyte-ui/utils/styles' as *;
+
+.dropdown {
+  width: max-content;
+
+  &__button {
+    width: max-content;
+  }
+
+  &__box {
+    &-variant--default &-options {
+      background-color: $color-default;
+    }
+
+    &-variant--primary &-options {
+      background-color: $color-primary;
+    }
+
+    &-variant--secondary &-options {
+      background-color: $color-secondary;
+    }
+
+    &-variant--warning &-options {
+      background-color: $color-warning;
+    }
+
+    &-variant--error &-options {
+      background-color: $color-error;
+    }
+
+    &-variant--success &-options {
+      background-color: $color-success;
+    }
+
+    &-overlay {
+      backdrop-filter: blur(12px);
+      height: 100%;
+      left: 0;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 99999999999;
+    }
+
+    &-options {
+      align-items: flex-start;
+      border-radius: 8px; //TODO: change to dynamic
+      box-shadow:
+        0 4px 6px rgba(0, 0, 0, 0.04),
+        0 12px 24px rgba(0, 0, 0, 0.1);
+      display: flex;
+      flex-direction: column;
+      opacity: 1;
+      min-width: 300px;
+      padding: 4px;
+      position: absolute;
+      transition:
+        transform 200ms $cubic-bezier-secondary,
+        opacity 150ms ease;
+      width: 100%;
+      z-index: 99999999999;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type IDropdownOption } from '../DropdownOption';
+import { type IButton } from '@aristobyte-ui/button';
+import './Dropdown.scss';
+export interface IDropdown {
+    children: React.ReactElement<IDropdownOption> | React.ReactElement<IDropdownOption>[];
+    value: string;
+    button?: Omit<IButton, 'children' | 'dangerouslySetInnerHTML'>;
+    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;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Dropdown: React.FC<IDropdown>;
+//# sourceMappingURL=index.d.ts.map

package/es/components/Dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/main/components/Dropdown/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAG7D,OAAO,iBAAiB,CAAC;AAQzB,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE,CAAC;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,UAAU,GAAG,yBAAyB,CAAC,CAAC;IAC/D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAChF,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,gBAAgB,GAAG,YAAY,GAAG,SAAS,CAAC;IAC/E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA4JxC,CAAC"}

package/es/components/Dropdown/index.js

@@ -0,0 +1,133 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { DropdownOption } from '../DropdownOption';
+import { Button } from '@aristobyte-ui/button';
+import { Portal } from '@aristobyte-ui/utils';
+import './Dropdown.scss';
+export 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({
+        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);
+    var boxRef = React.useRef(null);
+    var uniqueId = React.useId();
+    React.useLayoutEffect(function () {
+        if (!isOpened) {
+            return;
+        }
+        if (boxRef.current) {
+            setDropdownHeight(boxRef.current.getBoundingClientRect().height);
+        }
+        if (buttonRef.current) {
+            setButtonHeight(buttonRef.current.getBoundingClientRect().height);
+        }
+    }, [isOpened]);
+    var options = React.Children.toArray(children).filter(function (child) {
+        return React.isValidElement(child) && child.type === DropdownOption;
+    });
+    var isValidValue = function () {
+        return !!options.find(function (_a) {
+            var props = _a.props;
+            return props.value === value;
+        });
+    };
+    var handleChange = function (currentRadioValue) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(currentRadioValue);
+        if (!choice) {
+            setSelected([currentRadioValue]);
+            setIsOpened(false);
+            return;
+        }
+        if (choice === 'single') {
+            setSelected([currentRadioValue]);
+        }
+        if (choice === 'multiple') {
+            setSelected(function (prev) {
+                return prev.includes(currentRadioValue) ? prev.filter(function (v) { return v !== currentRadioValue; }) : __spreadArray(__spreadArray([], __read(prev), false), [currentRadioValue], false);
+            });
+        }
+    };
+    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; });
+    };
+    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, { 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(Portal, null,
+            React.createElement(AnimatePresence, null, isOpened && (React.createElement("div", { className: "dropdown__box ".concat("dropdown__box-variant--".concat(variant)), style: style },
+                React.createElement(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(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,
+                        left: position.left,
+                        width: position.width,
+                    } }, options.map(function (_a) {
+                    var props = _a.props;
+                    return (React.createElement(DropdownOption, __assign({}, props, { variant: variant, appearance: appearance, key: "".concat(props.value, "-").concat(uniqueId), selectedValues: selected, onChange: function () { return handleChange(props.value); } })));
+                }))))))));
+};

package/es/components/DropdownOption/DropdownOption.scss

@@ -0,0 +1,68 @@
+@use '@aristobyte-ui/utils/styles' as *;
+
+.dropdown-option {
+  align-items: center;
+  border-radius: 8px; //TODO: change to dynamic
+  color: $white;
+  display: flex;
+  font-size: 14px;
+  font-weight: 500;
+  gap: 10px;
+  padding: 10px 16px;
+  text-align: left;
+  transition: all 120ms ease-out;
+  width: 100%;
+
+  &-variant {
+    &--default:hover {
+      background-color: $color-default-hover;
+    }
+
+    &--primary:hover {
+      background-color: $color-primary-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 {
+    background-color: $color-default-disabled;
+    cursor: auto;
+    opacity: 0.5;
+  }
+
+  &__title {
+    color: $white;
+  }
+
+  &__description {
+    color: rgba($white, 0.6);
+  }
+
+  &__tick {
+    color: rgba($white, 0.6);
+    opacity: 0;
+    transform: scale(0, 0.7) translate(0, 10px);
+    transition: all 120ms ease-out;
+
+    &--active {
+      opacity: 1;
+      transform: scale(1) translate(0);
+    }
+  }
+}

package/es/components/DropdownOption/index.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import './DropdownOption.scss';
+export interface IDropdownOption {
+    variant?: 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+    appearance?: 'solid' | 'outline' | 'outline-dashed' | 'no-outline' | 'glowing';
+    children: string;
+    value: string;
+    onChange?: () => void;
+    selectedValues?: string[];
+    description?: string;
+    icon?: string;
+    disabled?: boolean;
+    choice?: 'multiple' | 'single';
+    style?: React.CSSProperties;
+}
+export declare const DropdownOption: React.FC<IDropdownOption>;
+//# sourceMappingURL=index.d.ts.map

package/es/components/DropdownOption/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/main/components/DropdownOption/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,uBAAuB,CAAC;AAE/B,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAChF,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,gBAAgB,GAAG,YAAY,GAAG,SAAS,CAAC;IAC/E,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+BpD,CAAC"}

package/es/components/DropdownOption/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Icons } from '@aristobyte-ui/utils';
+import './DropdownOption.scss';
+export var DropdownOption = function (_a) {
+    var variant = _a.variant, children = _a.children, value = _a.value, selectedValues = _a.selectedValues, onChange = _a.onChange, description = _a.description, disabled = _a.disabled, _b = _a.style, style = _b === void 0 ? {} : _b;
+    var uniqueId = React.useId();
+    return (React.createElement("button", { style: style, key: uniqueId, disabled: disabled, className: "".concat('dropdown-option', " ").concat("dropdown-option-variant--".concat(variant), " ").concat(disabled ? 'dropdown-option--disabled' : ''), onClick: onChange },
+        React.createElement("div", { className: 'dropdown-option__content' },
+            React.createElement("h3", { className: 'dropdown-option__title' }, children),
+            React.createElement("p", { className: 'dropdown-option__description' }, description)),
+        React.createElement("div", { className: "".concat('dropdown-option__tick', " ").concat((selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(value)) ? 'dropdown-option__tick--active' : '') },
+            React.createElement(Icons.Success, { size: 18 }))));
+};

package/es/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Dropdown";
+export * from "./DropdownOption";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/main/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/es/components/index.js

@@ -0,0 +1,2 @@
+export * from "./Dropdown";
+export * from "./DropdownOption";

package/es/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/es/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/es/index.js

@@ -0,0 +1 @@
+export * from './components';