@aristobyte-ui/dropdown 2.1.9 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +5 -4
- package/dist/es/main/components/Dropdown/Dropdown.scss +0 -64
- package/dist/es/main/components/Dropdown/index.js +0 -133
- package/dist/es/main/components/DropdownOption/DropdownOption.scss +0 -68
- package/dist/es/main/components/DropdownOption/index.js +0 -13
- package/dist/es/main/components/index.js +0 -2
- package/dist/es/main/index.js +0 -1
- package/dist/lib/main/components/Dropdown/Dropdown.scss +0 -64
- package/dist/lib/main/components/Dropdown/index.js +0 -170
- package/dist/lib/main/components/DropdownOption/DropdownOption.scss +0 -68
- package/dist/lib/main/components/DropdownOption/index.js +0 -50
- package/dist/lib/main/components/index.js +0 -18
- package/dist/lib/main/index.js +0 -17
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aristobyte-ui/dropdown",
|
|
3
3
|
"description": "react dropdown component with trigger button, dropdownoptions, placement variants, fully typed typescript support, and composable integration with aristobyte ui button",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.3.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"private": false,
|
|
7
7
|
"author": "AristoByte <info@aristobyte.com>",
|
|
@@ -37,7 +37,8 @@
|
|
|
37
37
|
"design-system"
|
|
38
38
|
],
|
|
39
39
|
"files": [
|
|
40
|
-
"
|
|
40
|
+
"es",
|
|
41
|
+
"lib"
|
|
41
42
|
],
|
|
42
43
|
"publishConfig": {
|
|
43
44
|
"access": "public"
|
|
@@ -49,7 +50,7 @@
|
|
|
49
50
|
"react-dom": "^19.1.0"
|
|
50
51
|
},
|
|
51
52
|
"dependencies": {
|
|
52
|
-
"@aristobyte-ui/button": "2.
|
|
53
|
-
"@aristobyte-ui/utils": "2.
|
|
53
|
+
"@aristobyte-ui/button": "2.3.0",
|
|
54
|
+
"@aristobyte-ui/utils": "2.3.0"
|
|
54
55
|
}
|
|
55
56
|
}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
@use '@aristobyte-ui/utils/aristobyte-ui.settings' as *;
|
|
2
|
-
|
|
3
|
-
.dropdown {
|
|
4
|
-
width: max-content;
|
|
5
|
-
|
|
6
|
-
&__button {
|
|
7
|
-
width: max-content;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
&__box {
|
|
11
|
-
&-variant--default &-options {
|
|
12
|
-
background-color: $color-default;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
&-variant--primary &-options {
|
|
16
|
-
background-color: $color-primary;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
&-variant--secondary &-options {
|
|
20
|
-
background-color: $color-secondary;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
&-variant--warning &-options {
|
|
24
|
-
background-color: $color-warning;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
&-variant--error &-options {
|
|
28
|
-
background-color: $color-error;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
&-variant--success &-options {
|
|
32
|
-
background-color: $color-success;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
&-overlay {
|
|
36
|
-
backdrop-filter: blur(12px);
|
|
37
|
-
height: 100%;
|
|
38
|
-
left: 0;
|
|
39
|
-
position: fixed;
|
|
40
|
-
top: 0;
|
|
41
|
-
width: 100%;
|
|
42
|
-
z-index: 99999999999;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
&-options {
|
|
46
|
-
align-items: flex-start;
|
|
47
|
-
border-radius: 8px; //TODO: change to dynamic
|
|
48
|
-
box-shadow:
|
|
49
|
-
0 4px 6px rgba(0, 0, 0, 0.04),
|
|
50
|
-
0 12px 24px rgba(0, 0, 0, 0.1);
|
|
51
|
-
display: flex;
|
|
52
|
-
flex-direction: column;
|
|
53
|
-
opacity: 1;
|
|
54
|
-
min-width: 300px;
|
|
55
|
-
padding: 4px;
|
|
56
|
-
position: absolute;
|
|
57
|
-
transition:
|
|
58
|
-
transform 200ms $cubic-bezier-secondary,
|
|
59
|
-
opacity 150ms ease;
|
|
60
|
-
width: 100%;
|
|
61
|
-
z-index: 99999999999;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
14
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
15
|
-
if (!m) return o;
|
|
16
|
-
var i = m.call(o), r, ar = [], e;
|
|
17
|
-
try {
|
|
18
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
19
|
-
}
|
|
20
|
-
catch (error) { e = { error: error }; }
|
|
21
|
-
finally {
|
|
22
|
-
try {
|
|
23
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
24
|
-
}
|
|
25
|
-
finally { if (e) throw e.error; }
|
|
26
|
-
}
|
|
27
|
-
return ar;
|
|
28
|
-
};
|
|
29
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
30
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
31
|
-
if (ar || !(i in from)) {
|
|
32
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
33
|
-
ar[i] = from[i];
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
37
|
-
};
|
|
38
|
-
import * as React from 'react';
|
|
39
|
-
import { AnimatePresence, motion } from 'framer-motion';
|
|
40
|
-
import { DropdownOption } from '../DropdownOption';
|
|
41
|
-
import { Button } from '@aristobyte-ui/button';
|
|
42
|
-
import { Portal } from '@aristobyte-ui/utils';
|
|
43
|
-
import './Dropdown.scss';
|
|
44
|
-
export var Dropdown = function (_a) {
|
|
45
|
-
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;
|
|
46
|
-
var _l = __read(React.useState(initiallyOpened), 2), isOpened = _l[0], setIsOpened = _l[1];
|
|
47
|
-
var _m = __read(React.useState(value ? [value] : []), 2), selected = _m[0], setSelected = _m[1];
|
|
48
|
-
var _o = __read(React.useState({
|
|
49
|
-
top: 0,
|
|
50
|
-
left: 0,
|
|
51
|
-
width: 0,
|
|
52
|
-
}), 2), position = _o[0], setPosition = _o[1];
|
|
53
|
-
var _p = __read(React.useState(0), 2), dropdownHeight = _p[0], setDropdownHeight = _p[1];
|
|
54
|
-
var _q = __read(React.useState(0), 2), buttonHeight = _q[0], setButtonHeight = _q[1];
|
|
55
|
-
var buttonRef = React.useRef(null);
|
|
56
|
-
var boxRef = React.useRef(null);
|
|
57
|
-
var uniqueId = React.useId();
|
|
58
|
-
React.useLayoutEffect(function () {
|
|
59
|
-
if (!isOpened) {
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
if (boxRef.current) {
|
|
63
|
-
setDropdownHeight(boxRef.current.getBoundingClientRect().height);
|
|
64
|
-
}
|
|
65
|
-
if (buttonRef.current) {
|
|
66
|
-
setButtonHeight(buttonRef.current.getBoundingClientRect().height);
|
|
67
|
-
}
|
|
68
|
-
}, [isOpened]);
|
|
69
|
-
var options = React.Children.toArray(children).filter(function (child) {
|
|
70
|
-
return React.isValidElement(child) && child.type === DropdownOption;
|
|
71
|
-
});
|
|
72
|
-
var isValidValue = function () {
|
|
73
|
-
return !!options.find(function (_a) {
|
|
74
|
-
var props = _a.props;
|
|
75
|
-
return props.value === value;
|
|
76
|
-
});
|
|
77
|
-
};
|
|
78
|
-
var handleChange = function (currentRadioValue) {
|
|
79
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(currentRadioValue);
|
|
80
|
-
if (!choice) {
|
|
81
|
-
setSelected([currentRadioValue]);
|
|
82
|
-
setIsOpened(false);
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
if (choice === 'single') {
|
|
86
|
-
setSelected([currentRadioValue]);
|
|
87
|
-
}
|
|
88
|
-
if (choice === 'multiple') {
|
|
89
|
-
setSelected(function (prev) {
|
|
90
|
-
return prev.includes(currentRadioValue) ? prev.filter(function (v) { return v !== currentRadioValue; }) : __spreadArray(__spreadArray([], __read(prev), false), [currentRadioValue], false);
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
|
-
var handleToggle = function (e) {
|
|
95
|
-
var _a;
|
|
96
|
-
if (disabled)
|
|
97
|
-
return;
|
|
98
|
-
var rect = (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
99
|
-
if (!rect)
|
|
100
|
-
return;
|
|
101
|
-
var spaceBelow = window.innerHeight - rect.bottom;
|
|
102
|
-
var spaceAbove = rect.top;
|
|
103
|
-
var shouldOpenUpwards = dropdownHeight > 0 && spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
|
|
104
|
-
var finalPosition = {
|
|
105
|
-
top: shouldOpenUpwards
|
|
106
|
-
? rect.top + window.scrollY - dropdownHeight - buttonHeight / 2
|
|
107
|
-
: rect.top + window.scrollY + buttonHeight + 6,
|
|
108
|
-
left: rect.left + window.scrollX,
|
|
109
|
-
width: rect.width,
|
|
110
|
-
};
|
|
111
|
-
setPosition(finalPosition);
|
|
112
|
-
if (button === null || button === void 0 ? void 0 : button.onClick)
|
|
113
|
-
button.onClick(e);
|
|
114
|
-
setIsOpened(function (prev) { return !prev; });
|
|
115
|
-
};
|
|
116
|
-
if (!isValidValue()) {
|
|
117
|
-
throw new Error('The "value" prop did not match with any of the DropdownOption "value" prop');
|
|
118
|
-
}
|
|
119
|
-
return (React.createElement(React.Fragment, null,
|
|
120
|
-
React.createElement("div", { className: "dropdown ".concat(className) },
|
|
121
|
-
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)),
|
|
122
|
-
React.createElement(Portal, null,
|
|
123
|
-
React.createElement(AnimatePresence, null, isOpened && (React.createElement("div", { className: "dropdown__box ".concat("dropdown__box-variant--".concat(variant)), style: style },
|
|
124
|
-
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); } }),
|
|
125
|
-
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: {
|
|
126
|
-
top: position.top,
|
|
127
|
-
left: position.left,
|
|
128
|
-
width: position.width,
|
|
129
|
-
} }, options.map(function (_a) {
|
|
130
|
-
var props = _a.props;
|
|
131
|
-
return (React.createElement(DropdownOption, __assign({}, props, { variant: variant, appearance: appearance, key: "".concat(props.value, "-").concat(uniqueId), selectedValues: selected, onChange: function () { return handleChange(props.value); } })));
|
|
132
|
-
}))))))));
|
|
133
|
-
};
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
@use '@aristobyte-ui/utils/aristobyte-ui.settings' as *;
|
|
2
|
-
|
|
3
|
-
.dropdown-option {
|
|
4
|
-
align-items: center;
|
|
5
|
-
border-radius: 8px; //TODO: change to dynamic
|
|
6
|
-
color: $white;
|
|
7
|
-
display: flex;
|
|
8
|
-
font-size: 14px;
|
|
9
|
-
font-weight: 500;
|
|
10
|
-
gap: 10px;
|
|
11
|
-
padding: 10px 16px;
|
|
12
|
-
text-align: left;
|
|
13
|
-
transition: all 120ms ease-out;
|
|
14
|
-
width: 100%;
|
|
15
|
-
|
|
16
|
-
&-variant {
|
|
17
|
-
&--default:hover {
|
|
18
|
-
background-color: $color-default-hover;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
&--primary:hover {
|
|
22
|
-
background-color: $color-primary-hover;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
&--secondary:hover {
|
|
26
|
-
background-color: $color-secondary-hover;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
&--warning:hover {
|
|
30
|
-
background-color: $color-warning-hover;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
&--error:hover {
|
|
34
|
-
background-color: $color-error-hover;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&--success:hover {
|
|
38
|
-
background-color: $color-success-hover;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
&--disabled,
|
|
43
|
-
&--disabled:hover {
|
|
44
|
-
background-color: $color-default-disabled;
|
|
45
|
-
cursor: auto;
|
|
46
|
-
opacity: 0.5;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&__title {
|
|
50
|
-
color: $white;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
&__description {
|
|
54
|
-
color: rgba($white, 0.6);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
&__tick {
|
|
58
|
-
color: rgba($white, 0.6);
|
|
59
|
-
opacity: 0;
|
|
60
|
-
transform: scale(0, 0.7) translate(0, 10px);
|
|
61
|
-
transition: all 120ms ease-out;
|
|
62
|
-
|
|
63
|
-
&--active {
|
|
64
|
-
opacity: 1;
|
|
65
|
-
transform: scale(1) translate(0);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Icons } from '@aristobyte-ui/utils';
|
|
3
|
-
import './DropdownOption.scss';
|
|
4
|
-
export var DropdownOption = function (_a) {
|
|
5
|
-
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;
|
|
6
|
-
var uniqueId = React.useId();
|
|
7
|
-
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 },
|
|
8
|
-
React.createElement("div", { className: 'dropdown-option__content' },
|
|
9
|
-
React.createElement("h3", { className: 'dropdown-option__title' }, children),
|
|
10
|
-
React.createElement("p", { className: 'dropdown-option__description' }, description)),
|
|
11
|
-
React.createElement("div", { className: "".concat('dropdown-option__tick', " ").concat((selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(value)) ? 'dropdown-option__tick--active' : '') },
|
|
12
|
-
React.createElement(Icons.Success, { size: 18 }))));
|
|
13
|
-
};
|
package/dist/es/main/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components';
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
@use '@aristobyte-ui/utils/aristobyte-ui.settings' as *;
|
|
2
|
-
|
|
3
|
-
.dropdown {
|
|
4
|
-
width: max-content;
|
|
5
|
-
|
|
6
|
-
&__button {
|
|
7
|
-
width: max-content;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
&__box {
|
|
11
|
-
&-variant--default &-options {
|
|
12
|
-
background-color: $color-default;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
&-variant--primary &-options {
|
|
16
|
-
background-color: $color-primary;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
&-variant--secondary &-options {
|
|
20
|
-
background-color: $color-secondary;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
&-variant--warning &-options {
|
|
24
|
-
background-color: $color-warning;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
&-variant--error &-options {
|
|
28
|
-
background-color: $color-error;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
&-variant--success &-options {
|
|
32
|
-
background-color: $color-success;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
&-overlay {
|
|
36
|
-
backdrop-filter: blur(12px);
|
|
37
|
-
height: 100%;
|
|
38
|
-
left: 0;
|
|
39
|
-
position: fixed;
|
|
40
|
-
top: 0;
|
|
41
|
-
width: 100%;
|
|
42
|
-
z-index: 99999999999;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
&-options {
|
|
46
|
-
align-items: flex-start;
|
|
47
|
-
border-radius: 8px; //TODO: change to dynamic
|
|
48
|
-
box-shadow:
|
|
49
|
-
0 4px 6px rgba(0, 0, 0, 0.04),
|
|
50
|
-
0 12px 24px rgba(0, 0, 0, 0.1);
|
|
51
|
-
display: flex;
|
|
52
|
-
flex-direction: column;
|
|
53
|
-
opacity: 1;
|
|
54
|
-
min-width: 300px;
|
|
55
|
-
padding: 4px;
|
|
56
|
-
position: absolute;
|
|
57
|
-
transition:
|
|
58
|
-
transform 200ms $cubic-bezier-secondary,
|
|
59
|
-
opacity 150ms ease;
|
|
60
|
-
width: 100%;
|
|
61
|
-
z-index: 99999999999;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
@@ -1,170 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
'use client';
|
|
3
|
-
var __assign = (this && this.__assign) || function () {
|
|
4
|
-
__assign = Object.assign || function(t) {
|
|
5
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
6
|
-
s = arguments[i];
|
|
7
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
8
|
-
t[p] = s[p];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
return __assign.apply(this, arguments);
|
|
13
|
-
};
|
|
14
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
15
|
-
if (k2 === undefined) k2 = k;
|
|
16
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
17
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
18
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
19
|
-
}
|
|
20
|
-
Object.defineProperty(o, k2, desc);
|
|
21
|
-
}) : (function(o, m, k, k2) {
|
|
22
|
-
if (k2 === undefined) k2 = k;
|
|
23
|
-
o[k2] = m[k];
|
|
24
|
-
}));
|
|
25
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
26
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
27
|
-
}) : function(o, v) {
|
|
28
|
-
o["default"] = v;
|
|
29
|
-
});
|
|
30
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
31
|
-
var ownKeys = function(o) {
|
|
32
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
33
|
-
var ar = [];
|
|
34
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
35
|
-
return ar;
|
|
36
|
-
};
|
|
37
|
-
return ownKeys(o);
|
|
38
|
-
};
|
|
39
|
-
return function (mod) {
|
|
40
|
-
if (mod && mod.__esModule) return mod;
|
|
41
|
-
var result = {};
|
|
42
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
43
|
-
__setModuleDefault(result, mod);
|
|
44
|
-
return result;
|
|
45
|
-
};
|
|
46
|
-
})();
|
|
47
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
48
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
49
|
-
if (!m) return o;
|
|
50
|
-
var i = m.call(o), r, ar = [], e;
|
|
51
|
-
try {
|
|
52
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
53
|
-
}
|
|
54
|
-
catch (error) { e = { error: error }; }
|
|
55
|
-
finally {
|
|
56
|
-
try {
|
|
57
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
58
|
-
}
|
|
59
|
-
finally { if (e) throw e.error; }
|
|
60
|
-
}
|
|
61
|
-
return ar;
|
|
62
|
-
};
|
|
63
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
64
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
65
|
-
if (ar || !(i in from)) {
|
|
66
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
67
|
-
ar[i] = from[i];
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
71
|
-
};
|
|
72
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
73
|
-
exports.Dropdown = void 0;
|
|
74
|
-
var React = __importStar(require("react"));
|
|
75
|
-
var framer_motion_1 = require("framer-motion");
|
|
76
|
-
var DropdownOption_1 = require("../DropdownOption");
|
|
77
|
-
var button_1 = require("@aristobyte-ui/button");
|
|
78
|
-
var utils_1 = require("@aristobyte-ui/utils");
|
|
79
|
-
require("./Dropdown.scss");
|
|
80
|
-
var Dropdown = function (_a) {
|
|
81
|
-
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;
|
|
82
|
-
var _l = __read(React.useState(initiallyOpened), 2), isOpened = _l[0], setIsOpened = _l[1];
|
|
83
|
-
var _m = __read(React.useState(value ? [value] : []), 2), selected = _m[0], setSelected = _m[1];
|
|
84
|
-
var _o = __read(React.useState({
|
|
85
|
-
top: 0,
|
|
86
|
-
left: 0,
|
|
87
|
-
width: 0,
|
|
88
|
-
}), 2), position = _o[0], setPosition = _o[1];
|
|
89
|
-
var _p = __read(React.useState(0), 2), dropdownHeight = _p[0], setDropdownHeight = _p[1];
|
|
90
|
-
var _q = __read(React.useState(0), 2), buttonHeight = _q[0], setButtonHeight = _q[1];
|
|
91
|
-
var buttonRef = React.useRef(null);
|
|
92
|
-
var boxRef = React.useRef(null);
|
|
93
|
-
var uniqueId = React.useId();
|
|
94
|
-
React.useLayoutEffect(function () {
|
|
95
|
-
if (!isOpened) {
|
|
96
|
-
return;
|
|
97
|
-
}
|
|
98
|
-
if (boxRef.current) {
|
|
99
|
-
setDropdownHeight(boxRef.current.getBoundingClientRect().height);
|
|
100
|
-
}
|
|
101
|
-
if (buttonRef.current) {
|
|
102
|
-
setButtonHeight(buttonRef.current.getBoundingClientRect().height);
|
|
103
|
-
}
|
|
104
|
-
}, [isOpened]);
|
|
105
|
-
var options = React.Children.toArray(children).filter(function (child) {
|
|
106
|
-
return React.isValidElement(child) && child.type === DropdownOption_1.DropdownOption;
|
|
107
|
-
});
|
|
108
|
-
var isValidValue = function () {
|
|
109
|
-
return !!options.find(function (_a) {
|
|
110
|
-
var props = _a.props;
|
|
111
|
-
return props.value === value;
|
|
112
|
-
});
|
|
113
|
-
};
|
|
114
|
-
var handleChange = function (currentRadioValue) {
|
|
115
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(currentRadioValue);
|
|
116
|
-
if (!choice) {
|
|
117
|
-
setSelected([currentRadioValue]);
|
|
118
|
-
setIsOpened(false);
|
|
119
|
-
return;
|
|
120
|
-
}
|
|
121
|
-
if (choice === 'single') {
|
|
122
|
-
setSelected([currentRadioValue]);
|
|
123
|
-
}
|
|
124
|
-
if (choice === 'multiple') {
|
|
125
|
-
setSelected(function (prev) {
|
|
126
|
-
return prev.includes(currentRadioValue) ? prev.filter(function (v) { return v !== currentRadioValue; }) : __spreadArray(__spreadArray([], __read(prev), false), [currentRadioValue], false);
|
|
127
|
-
});
|
|
128
|
-
}
|
|
129
|
-
};
|
|
130
|
-
var handleToggle = function (e) {
|
|
131
|
-
var _a;
|
|
132
|
-
if (disabled)
|
|
133
|
-
return;
|
|
134
|
-
var rect = (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
135
|
-
if (!rect)
|
|
136
|
-
return;
|
|
137
|
-
var spaceBelow = window.innerHeight - rect.bottom;
|
|
138
|
-
var spaceAbove = rect.top;
|
|
139
|
-
var shouldOpenUpwards = dropdownHeight > 0 && spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
|
|
140
|
-
var finalPosition = {
|
|
141
|
-
top: shouldOpenUpwards
|
|
142
|
-
? rect.top + window.scrollY - dropdownHeight - buttonHeight / 2
|
|
143
|
-
: rect.top + window.scrollY + buttonHeight + 6,
|
|
144
|
-
left: rect.left + window.scrollX,
|
|
145
|
-
width: rect.width,
|
|
146
|
-
};
|
|
147
|
-
setPosition(finalPosition);
|
|
148
|
-
if (button === null || button === void 0 ? void 0 : button.onClick)
|
|
149
|
-
button.onClick(e);
|
|
150
|
-
setIsOpened(function (prev) { return !prev; });
|
|
151
|
-
};
|
|
152
|
-
if (!isValidValue()) {
|
|
153
|
-
throw new Error('The "value" prop did not match with any of the DropdownOption "value" prop');
|
|
154
|
-
}
|
|
155
|
-
return (React.createElement(React.Fragment, null,
|
|
156
|
-
React.createElement("div", { className: "dropdown ".concat(className) },
|
|
157
|
-
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)),
|
|
158
|
-
React.createElement(utils_1.Portal, null,
|
|
159
|
-
React.createElement(framer_motion_1.AnimatePresence, null, isOpened && (React.createElement("div", { className: "dropdown__box ".concat("dropdown__box-variant--".concat(variant)), style: style },
|
|
160
|
-
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); } }),
|
|
161
|
-
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: {
|
|
162
|
-
top: position.top,
|
|
163
|
-
left: position.left,
|
|
164
|
-
width: position.width,
|
|
165
|
-
} }, options.map(function (_a) {
|
|
166
|
-
var props = _a.props;
|
|
167
|
-
return (React.createElement(DropdownOption_1.DropdownOption, __assign({}, props, { variant: variant, appearance: appearance, key: "".concat(props.value, "-").concat(uniqueId), selectedValues: selected, onChange: function () { return handleChange(props.value); } })));
|
|
168
|
-
}))))))));
|
|
169
|
-
};
|
|
170
|
-
exports.Dropdown = Dropdown;
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
@use '@aristobyte-ui/utils/aristobyte-ui.settings' as *;
|
|
2
|
-
|
|
3
|
-
.dropdown-option {
|
|
4
|
-
align-items: center;
|
|
5
|
-
border-radius: 8px; //TODO: change to dynamic
|
|
6
|
-
color: $white;
|
|
7
|
-
display: flex;
|
|
8
|
-
font-size: 14px;
|
|
9
|
-
font-weight: 500;
|
|
10
|
-
gap: 10px;
|
|
11
|
-
padding: 10px 16px;
|
|
12
|
-
text-align: left;
|
|
13
|
-
transition: all 120ms ease-out;
|
|
14
|
-
width: 100%;
|
|
15
|
-
|
|
16
|
-
&-variant {
|
|
17
|
-
&--default:hover {
|
|
18
|
-
background-color: $color-default-hover;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
&--primary:hover {
|
|
22
|
-
background-color: $color-primary-hover;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
&--secondary:hover {
|
|
26
|
-
background-color: $color-secondary-hover;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
&--warning:hover {
|
|
30
|
-
background-color: $color-warning-hover;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
&--error:hover {
|
|
34
|
-
background-color: $color-error-hover;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&--success:hover {
|
|
38
|
-
background-color: $color-success-hover;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
&--disabled,
|
|
43
|
-
&--disabled:hover {
|
|
44
|
-
background-color: $color-default-disabled;
|
|
45
|
-
cursor: auto;
|
|
46
|
-
opacity: 0.5;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&__title {
|
|
50
|
-
color: $white;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
&__description {
|
|
54
|
-
color: rgba($white, 0.6);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
&__tick {
|
|
58
|
-
color: rgba($white, 0.6);
|
|
59
|
-
opacity: 0;
|
|
60
|
-
transform: scale(0, 0.7) translate(0, 10px);
|
|
61
|
-
transition: all 120ms ease-out;
|
|
62
|
-
|
|
63
|
-
&--active {
|
|
64
|
-
opacity: 1;
|
|
65
|
-
transform: scale(1) translate(0);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
-
var ownKeys = function(o) {
|
|
20
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
-
var ar = [];
|
|
22
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
-
return ar;
|
|
24
|
-
};
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
35
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.DropdownOption = void 0;
|
|
37
|
-
var React = __importStar(require("react"));
|
|
38
|
-
var utils_1 = require("@aristobyte-ui/utils");
|
|
39
|
-
require("./DropdownOption.scss");
|
|
40
|
-
var DropdownOption = function (_a) {
|
|
41
|
-
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;
|
|
42
|
-
var uniqueId = React.useId();
|
|
43
|
-
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 },
|
|
44
|
-
React.createElement("div", { className: 'dropdown-option__content' },
|
|
45
|
-
React.createElement("h3", { className: 'dropdown-option__title' }, children),
|
|
46
|
-
React.createElement("p", { className: 'dropdown-option__description' }, description)),
|
|
47
|
-
React.createElement("div", { className: "".concat('dropdown-option__tick', " ").concat((selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(value)) ? 'dropdown-option__tick--active' : '') },
|
|
48
|
-
React.createElement(utils_1.Icons.Success, { size: 18 }))));
|
|
49
|
-
};
|
|
50
|
-
exports.DropdownOption = DropdownOption;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./Dropdown"), exports);
|
|
18
|
-
__exportStar(require("./DropdownOption"), exports);
|
package/dist/lib/main/index.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./components"), exports);
|