@auth0/quantum-product 2.7.2 → 2.8.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/esm/select-dropdown/index.js +1 -0
- package/esm/select-dropdown/select-dropdown.js +130 -0
- package/package.json +1 -1
- package/select-dropdown/index.d.ts +1 -0
- package/select-dropdown/index.js +17 -0
- package/select-dropdown/select-dropdown.d.ts +17 -0
- package/select-dropdown/select-dropdown.js +156 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './select-dropdown';
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
24
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
25
|
+
if (!m) return o;
|
|
26
|
+
var i = m.call(o), r, ar = [], e;
|
|
27
|
+
try {
|
|
28
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
29
|
+
}
|
|
30
|
+
catch (error) { e = { error: error }; }
|
|
31
|
+
finally {
|
|
32
|
+
try {
|
|
33
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
34
|
+
}
|
|
35
|
+
finally { if (e) throw e.error; }
|
|
36
|
+
}
|
|
37
|
+
return ar;
|
|
38
|
+
};
|
|
39
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
40
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
41
|
+
if (ar || !(i in from)) {
|
|
42
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
43
|
+
ar[i] = from[i];
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
47
|
+
};
|
|
48
|
+
import * as React from 'react';
|
|
49
|
+
import { useCallback, useMemo, useState, useRef } from 'react';
|
|
50
|
+
import { Box } from '@mui/material';
|
|
51
|
+
import { Button } from '../button';
|
|
52
|
+
import { Select } from '../select';
|
|
53
|
+
import { Text } from '../text';
|
|
54
|
+
import { DropdownMenu } from '../dropdown-menu';
|
|
55
|
+
import { ChevronDownIcon } from '../icon';
|
|
56
|
+
export var SelectDropdown = React.forwardRef(function (props, ref) {
|
|
57
|
+
var _a;
|
|
58
|
+
var propSelectedValue = props.selectedValue, onValueChange = props.onValueChange, triggerLabel = props.triggerLabel, _b = props.clearButtonLabel, clearButtonLabel = _b === void 0 ? 'Clear' : _b, className = props.className, options = props.options, rootProps = __rest(props, ["selectedValue", "onValueChange", "triggerLabel", "clearButtonLabel", "className", "options"]);
|
|
59
|
+
var _c = __read(useState(null), 2), internalSelectedValue = _c[0], setInternalSelectedValue = _c[1];
|
|
60
|
+
var _d = __read(useState(false), 2), isOpen = _d[0], setIsOpen = _d[1];
|
|
61
|
+
var selectRef = useRef(null);
|
|
62
|
+
// Use internal state if external props are not provided
|
|
63
|
+
var selectedValue = propSelectedValue !== undefined ? propSelectedValue : internalSelectedValue;
|
|
64
|
+
var handleItemSelect = useCallback(function (value) {
|
|
65
|
+
if (propSelectedValue === undefined) {
|
|
66
|
+
setInternalSelectedValue(value);
|
|
67
|
+
}
|
|
68
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
|
|
69
|
+
setIsOpen(false);
|
|
70
|
+
}, [propSelectedValue, onValueChange]);
|
|
71
|
+
var handleClear = useCallback(function () {
|
|
72
|
+
if (propSelectedValue === undefined) {
|
|
73
|
+
setInternalSelectedValue(null);
|
|
74
|
+
}
|
|
75
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(null);
|
|
76
|
+
setIsOpen(false);
|
|
77
|
+
}, [propSelectedValue, onValueChange]);
|
|
78
|
+
var handleTriggerClick = function () {
|
|
79
|
+
setIsOpen(!isOpen);
|
|
80
|
+
};
|
|
81
|
+
// Create dropdown items using the quantum DropdownMenu pattern
|
|
82
|
+
var dropdownItems = useMemo(function () { return __spreadArray(__spreadArray([], __read(options.map(function (option) {
|
|
83
|
+
var isSelected = selectedValue === option.key;
|
|
84
|
+
return {
|
|
85
|
+
title: option.label,
|
|
86
|
+
onClick: option.disabled ? undefined : function () { return handleItemSelect(option.key); },
|
|
87
|
+
selected: isSelected,
|
|
88
|
+
disabled: option.disabled,
|
|
89
|
+
startIcon: option.icon,
|
|
90
|
+
color: option.color ? 'danger' : 'default',
|
|
91
|
+
};
|
|
92
|
+
})), false), [
|
|
93
|
+
{
|
|
94
|
+
type: 'divider',
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
title: (React.createElement(Button, { variant: "link", size: "small", onClick: handleClear, style: {
|
|
98
|
+
justifyContent: 'flex-end',
|
|
99
|
+
width: '100%',
|
|
100
|
+
display: 'flex',
|
|
101
|
+
} }, clearButtonLabel)),
|
|
102
|
+
},
|
|
103
|
+
], false); }, [options, handleItemSelect, selectedValue, clearButtonLabel, handleClear]);
|
|
104
|
+
return (React.createElement(Box, __assign({ ref: ref, className: className }, rootProps),
|
|
105
|
+
React.createElement(Select, { ref: selectRef, key: selectedValue, label: triggerLabel, value: selectedValue, onChange: function () {
|
|
106
|
+
// Disable native select onChange completely
|
|
107
|
+
}, onClick: handleTriggerClick, onMouseDown: function (e) {
|
|
108
|
+
e.preventDefault();
|
|
109
|
+
handleTriggerClick();
|
|
110
|
+
}, tabIndex: 0, options: options.map(function (option) { return ({
|
|
111
|
+
text: option.label,
|
|
112
|
+
value: option.key,
|
|
113
|
+
disabled: option.disabled,
|
|
114
|
+
}); }), useCustomMenu: true, IconComponent: ChevronDownIcon, prefix: React.createElement(Text, { fontWeight: "medium" }, selectedValue
|
|
115
|
+
? "".concat(triggerLabel, ": ").concat(((_a = options.find(function (option) { return option.key === selectedValue; })) === null || _a === void 0 ? void 0 : _a.label) || selectedValue)
|
|
116
|
+
: triggerLabel), size: "small" }),
|
|
117
|
+
React.createElement(DropdownMenu, { items: dropdownItems, open: isOpen, anchorEl: selectRef.current, onClose: function () { return setIsOpen(false); }, anchorOrigin: {
|
|
118
|
+
vertical: 'bottom',
|
|
119
|
+
horizontal: 'left',
|
|
120
|
+
}, transformOrigin: {
|
|
121
|
+
vertical: 'top',
|
|
122
|
+
horizontal: 'left',
|
|
123
|
+
}, sx: {
|
|
124
|
+
'& .base-QuantumDropdownMenu-paper': {
|
|
125
|
+
minWidth: '240px',
|
|
126
|
+
maxHeight: '480px',
|
|
127
|
+
},
|
|
128
|
+
} })));
|
|
129
|
+
});
|
|
130
|
+
SelectDropdown.displayName = 'SelectDropdown';
|
package/package.json
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './select-dropdown';
|
|
@@ -0,0 +1,17 @@
|
|
|
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("./select-dropdown"), exports);
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface ISelectOption {
|
|
3
|
+
key: string;
|
|
4
|
+
label: string;
|
|
5
|
+
icon?: React.ReactNode;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
color?: string;
|
|
8
|
+
}
|
|
9
|
+
export interface ISelectDropdownProps {
|
|
10
|
+
selectedValue?: string | null;
|
|
11
|
+
onValueChange?: (value: string | null) => void;
|
|
12
|
+
triggerLabel: string;
|
|
13
|
+
clearButtonLabel?: string;
|
|
14
|
+
className?: string;
|
|
15
|
+
options: ISelectOption[];
|
|
16
|
+
}
|
|
17
|
+
export declare const SelectDropdown: React.ForwardRefExoticComponent<ISelectDropdownProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
"use strict";
|
|
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
37
|
+
var t = {};
|
|
38
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
39
|
+
t[p] = s[p];
|
|
40
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
41
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
42
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
43
|
+
t[p[i]] = s[p[i]];
|
|
44
|
+
}
|
|
45
|
+
return t;
|
|
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.SelectDropdown = void 0;
|
|
74
|
+
var React = __importStar(require("react"));
|
|
75
|
+
var react_1 = require("react");
|
|
76
|
+
var material_1 = require("@mui/material");
|
|
77
|
+
var button_1 = require("../button");
|
|
78
|
+
var select_1 = require("../select");
|
|
79
|
+
var text_1 = require("../text");
|
|
80
|
+
var dropdown_menu_1 = require("../dropdown-menu");
|
|
81
|
+
var icon_1 = require("../icon");
|
|
82
|
+
exports.SelectDropdown = React.forwardRef(function (props, ref) {
|
|
83
|
+
var _a;
|
|
84
|
+
var propSelectedValue = props.selectedValue, onValueChange = props.onValueChange, triggerLabel = props.triggerLabel, _b = props.clearButtonLabel, clearButtonLabel = _b === void 0 ? 'Clear' : _b, className = props.className, options = props.options, rootProps = __rest(props, ["selectedValue", "onValueChange", "triggerLabel", "clearButtonLabel", "className", "options"]);
|
|
85
|
+
var _c = __read((0, react_1.useState)(null), 2), internalSelectedValue = _c[0], setInternalSelectedValue = _c[1];
|
|
86
|
+
var _d = __read((0, react_1.useState)(false), 2), isOpen = _d[0], setIsOpen = _d[1];
|
|
87
|
+
var selectRef = (0, react_1.useRef)(null);
|
|
88
|
+
// Use internal state if external props are not provided
|
|
89
|
+
var selectedValue = propSelectedValue !== undefined ? propSelectedValue : internalSelectedValue;
|
|
90
|
+
var handleItemSelect = (0, react_1.useCallback)(function (value) {
|
|
91
|
+
if (propSelectedValue === undefined) {
|
|
92
|
+
setInternalSelectedValue(value);
|
|
93
|
+
}
|
|
94
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
|
|
95
|
+
setIsOpen(false);
|
|
96
|
+
}, [propSelectedValue, onValueChange]);
|
|
97
|
+
var handleClear = (0, react_1.useCallback)(function () {
|
|
98
|
+
if (propSelectedValue === undefined) {
|
|
99
|
+
setInternalSelectedValue(null);
|
|
100
|
+
}
|
|
101
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(null);
|
|
102
|
+
setIsOpen(false);
|
|
103
|
+
}, [propSelectedValue, onValueChange]);
|
|
104
|
+
var handleTriggerClick = function () {
|
|
105
|
+
setIsOpen(!isOpen);
|
|
106
|
+
};
|
|
107
|
+
// Create dropdown items using the quantum DropdownMenu pattern
|
|
108
|
+
var dropdownItems = (0, react_1.useMemo)(function () { return __spreadArray(__spreadArray([], __read(options.map(function (option) {
|
|
109
|
+
var isSelected = selectedValue === option.key;
|
|
110
|
+
return {
|
|
111
|
+
title: option.label,
|
|
112
|
+
onClick: option.disabled ? undefined : function () { return handleItemSelect(option.key); },
|
|
113
|
+
selected: isSelected,
|
|
114
|
+
disabled: option.disabled,
|
|
115
|
+
startIcon: option.icon,
|
|
116
|
+
color: option.color ? 'danger' : 'default',
|
|
117
|
+
};
|
|
118
|
+
})), false), [
|
|
119
|
+
{
|
|
120
|
+
type: 'divider',
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
title: (React.createElement(button_1.Button, { variant: "link", size: "small", onClick: handleClear, style: {
|
|
124
|
+
justifyContent: 'flex-end',
|
|
125
|
+
width: '100%',
|
|
126
|
+
display: 'flex',
|
|
127
|
+
} }, clearButtonLabel)),
|
|
128
|
+
},
|
|
129
|
+
], false); }, [options, handleItemSelect, selectedValue, clearButtonLabel, handleClear]);
|
|
130
|
+
return (React.createElement(material_1.Box, __assign({ ref: ref, className: className }, rootProps),
|
|
131
|
+
React.createElement(select_1.Select, { ref: selectRef, key: selectedValue, label: triggerLabel, value: selectedValue, onChange: function () {
|
|
132
|
+
// Disable native select onChange completely
|
|
133
|
+
}, onClick: handleTriggerClick, onMouseDown: function (e) {
|
|
134
|
+
e.preventDefault();
|
|
135
|
+
handleTriggerClick();
|
|
136
|
+
}, tabIndex: 0, options: options.map(function (option) { return ({
|
|
137
|
+
text: option.label,
|
|
138
|
+
value: option.key,
|
|
139
|
+
disabled: option.disabled,
|
|
140
|
+
}); }), useCustomMenu: true, IconComponent: icon_1.ChevronDownIcon, prefix: React.createElement(text_1.Text, { fontWeight: "medium" }, selectedValue
|
|
141
|
+
? "".concat(triggerLabel, ": ").concat(((_a = options.find(function (option) { return option.key === selectedValue; })) === null || _a === void 0 ? void 0 : _a.label) || selectedValue)
|
|
142
|
+
: triggerLabel), size: "small" }),
|
|
143
|
+
React.createElement(dropdown_menu_1.DropdownMenu, { items: dropdownItems, open: isOpen, anchorEl: selectRef.current, onClose: function () { return setIsOpen(false); }, anchorOrigin: {
|
|
144
|
+
vertical: 'bottom',
|
|
145
|
+
horizontal: 'left',
|
|
146
|
+
}, transformOrigin: {
|
|
147
|
+
vertical: 'top',
|
|
148
|
+
horizontal: 'left',
|
|
149
|
+
}, sx: {
|
|
150
|
+
'& .base-QuantumDropdownMenu-paper': {
|
|
151
|
+
minWidth: '240px',
|
|
152
|
+
maxHeight: '480px',
|
|
153
|
+
},
|
|
154
|
+
} })));
|
|
155
|
+
});
|
|
156
|
+
exports.SelectDropdown.displayName = 'SelectDropdown';
|