phx-react 1.3.723 → 1.3.724
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/dist/cjs/components/Dropdown/Dropdown.d.ts +2 -1
- package/dist/cjs/components/Dropdown/Dropdown.js +17 -14
- package/dist/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/components/Dropdown/Dropdown.d.ts +2 -1
- package/dist/esm/components/Dropdown/Dropdown.js +17 -14
- package/dist/esm/components/Dropdown/Dropdown.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ export interface DropdownProps {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
buttonContent?: string;
|
|
8
8
|
optionTitle?: string;
|
|
9
|
+
loading?: boolean;
|
|
9
10
|
options?: Array<{
|
|
10
11
|
content?: string;
|
|
11
12
|
icon?: IconName;
|
|
@@ -26,4 +27,4 @@ export interface DropdownProps {
|
|
|
26
27
|
soft?: boolean;
|
|
27
28
|
widthContent?: any;
|
|
28
29
|
}
|
|
29
|
-
export declare function PHXDropdown({ className, optionTitle, buttonContent, options, type, origin, defaultDate, onChangeDate, soft, max, min, startDisabled, endDisabled, disabledDate, widthContent, }: DropdownProps): React.JSX.Element;
|
|
30
|
+
export declare function PHXDropdown({ className, optionTitle, buttonContent, options, type, origin, defaultDate, onChangeDate, soft, max, min, startDisabled, endDisabled, disabledDate, loading, widthContent, }: DropdownProps): React.JSX.Element;
|
|
@@ -7,18 +7,19 @@ var react_2 = require("@headlessui/react");
|
|
|
7
7
|
var solid_1 = require("@heroicons/react/20/solid");
|
|
8
8
|
var SolidIcons = tslib_1.__importStar(require("@heroicons/react/24/solid"));
|
|
9
9
|
var OutlineIcons = tslib_1.__importStar(require("@heroicons/react/24/outline"));
|
|
10
|
-
var Calendar_1 = tslib_1.__importDefault(require("../DatePicker/components/Calendar"));
|
|
11
10
|
var types_1 = require("../types");
|
|
11
|
+
var Calendar_1 = tslib_1.__importDefault(require("../DatePicker/components/Calendar"));
|
|
12
|
+
var Loading_1 = require("../Loading");
|
|
12
13
|
function PHXDropdown(_a) {
|
|
13
|
-
var className = _a.className, optionTitle = _a.optionTitle, buttonContent = _a.buttonContent, options = _a.options, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.origin, origin = _c === void 0 ? 'left' : _c, defaultDate = _a.defaultDate, onChangeDate = _a.onChangeDate, _d = _a.soft, soft = _d === void 0 ? false : _d, max = _a.max, min = _a.min, startDisabled = _a.startDisabled, endDisabled = _a.endDisabled, disabledDate = _a.disabledDate, widthContent = _a.widthContent;
|
|
14
|
+
var className = _a.className, optionTitle = _a.optionTitle, buttonContent = _a.buttonContent, options = _a.options, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.origin, origin = _c === void 0 ? 'left' : _c, defaultDate = _a.defaultDate, onChangeDate = _a.onChangeDate, _d = _a.soft, soft = _d === void 0 ? false : _d, max = _a.max, min = _a.min, startDisabled = _a.startDisabled, endDisabled = _a.endDisabled, disabledDate = _a.disabledDate, loading = _a.loading, widthContent = _a.widthContent;
|
|
14
15
|
var Icon = function (_a) {
|
|
15
16
|
var active = _a.active, icon = _a.icon, iconOutline = _a.iconOutline;
|
|
16
17
|
// @ts-ignore
|
|
17
18
|
var Icon = iconOutline ? OutlineIcons[icon] : SolidIcons[icon];
|
|
18
|
-
return react_1["default"].createElement(Icon, { className: (0, types_1.classNames)('
|
|
19
|
+
return react_1["default"].createElement(Icon, { className: (0, types_1.classNames)('h-4 w-4', active && 'font-semibold') });
|
|
19
20
|
};
|
|
20
|
-
return (react_1["default"].createElement("div", { className: (0, types_1.classNames)('max-w-full md:max-w-fit', type === 'ellipsis-icon' && 'flex items-center') },
|
|
21
|
-
react_1["default"].createElement(react_2.Menu, { as: 'div', className: (0, types_1.classNames)('
|
|
21
|
+
return (react_1["default"].createElement("div", { className: (0, types_1.classNames)('relative max-w-full md:max-w-fit', type === 'ellipsis-icon' && 'flex items-center') },
|
|
22
|
+
react_1["default"].createElement(react_2.Menu, { as: 'div', className: (0, types_1.classNames)('relative inline-block w-full text-left', className && "".concat(className), type === 'ellipsis-icon' && 'flex items-center') }, function (_a) {
|
|
22
23
|
var open = _a.open;
|
|
23
24
|
return (react_1["default"].createElement(react_1["default"].Fragment, null,
|
|
24
25
|
react_1["default"].createElement("div", null,
|
|
@@ -27,29 +28,31 @@ function PHXDropdown(_a) {
|
|
|
27
28
|
"rounded-lg border border-gray-300 border-b-gray-400 bg-white px-2.5 py-1.5 text-xs font-normal text-gray-900 shadow-sm hover:bg-gray-50 active:border-b-gray-100 active:bg-gray-100 active:pb-[0.3rem] active:pt-[0.45rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] ".concat(open ? '!border-b-gray-100 !bg-gray-100 !shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' : ''), type === 'icon-only' &&
|
|
28
29
|
!soft &&
|
|
29
30
|
'flex items-center rounded-full bg-gray-100 text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100', soft &&
|
|
30
|
-
"px-2.5 py-1.5 text-xs
|
|
31
|
+
"rounded-lg bg-indigo-50 px-2.5 py-1.5 text-xs font-normal text-gray-700 shadow-sm hover:bg-indigo-100 active:pb-[0.3rem] active:pt-[0.45rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] ".concat(open ? '!bg-indigo-100 shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' : ''), type === 'soft-small' &&
|
|
31
32
|
"rounded-lg bg-gray-200 px-2 py-1 text-xs hover:bg-gray-300 active:pb-[0.2rem] active:pt-[0.35rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]\n ".concat(open ? '!bg-gray-300 shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' : '', "\n "), type === 'ellipsis-icon' && 'flex items-center') },
|
|
32
33
|
react_1["default"].createElement("div", { className: (0, types_1.classNames)((type === 'default' || type === 'date-picker' || type === 'soft-small') &&
|
|
33
|
-
'flex items-center gap-x-1 text-gray-900 md:justify-center
|
|
34
|
+
'flex items-center justify-between gap-x-1 text-gray-900 md:justify-center', type === 'ellipsis-icon' && 'flex items-center') },
|
|
34
35
|
react_1["default"].createElement("p", { className: (0, types_1.classNames)('max-w-[200px] truncate', type === 'icon-only' && 'sr-only') }, buttonContent),
|
|
35
36
|
(type === 'default' || type === 'date-picker' || type === 'soft-small') &&
|
|
36
37
|
(open && origin === 'top-left' ? (react_1["default"].createElement(solid_1.ChevronUpIcon, { "aria-hidden": 'true', className: 'mt-0.5 h-4 w-4' })) : (react_1["default"].createElement(solid_1.ChevronDownIcon, { "aria-hidden": 'true', className: 'mt-0.5 h-4 w-4' }))),
|
|
37
38
|
type === 'icon-only' && react_1["default"].createElement(solid_1.EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }),
|
|
38
|
-
type === 'ellipsis-icon' && (react_1["default"].createElement("div", { className: 'p-1 hover:bg-gray-300
|
|
39
|
+
type === 'ellipsis-icon' && (react_1["default"].createElement("div", { className: 'rounded-lg p-1 hover:bg-gray-300' },
|
|
39
40
|
react_1["default"].createElement(solid_1.EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'h-4 w-4' })))))),
|
|
40
41
|
react_1["default"].createElement(react_2.Transition, { as: react_1.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
|
|
41
|
-
react_1["default"].createElement(react_2.Menu.Items, { className: (0, types_1.classNames)(origin === 'left' && 'left-0 origin-top-left', origin === 'right' && 'right-0 origin-top-right', origin === 'top-left' && 'bottom-8 left-0', type === 'date-picker' ? '' : 'px-1
|
|
42
|
-
optionTitle && react_1["default"].createElement("p", { className: 'px-2.5 pt-2
|
|
42
|
+
react_1["default"].createElement(react_2.Menu.Items, { className: (0, types_1.classNames)(origin === 'left' && 'left-0 origin-top-left', origin === 'right' && 'right-0 origin-top-right', origin === 'top-left' && 'bottom-8 left-0', type === 'date-picker' ? '' : 'border px-1', 'absolute z-10 mt-1.5 max-h-96 min-w-[7.2rem] overflow-y-auto whitespace-nowrap rounded-lg bg-white shadow-[0rem_0.25rem_0.375rem_-0.125rem_rgba(26,26,26,.2)] focus:outline-none') }, type === 'date-picker' ? (react_1["default"].createElement(Calendar_1["default"], { onChangeDate: onChangeDate, defaultDate: defaultDate, max: max, min: min, startDisabled: startDisabled, endDisabled: endDisabled, disabledDate: disabledDate })) : (react_1["default"].createElement(react_1["default"].Fragment, null,
|
|
43
|
+
optionTitle && react_1["default"].createElement("p", { className: 'px-2.5 pb-1 pt-2 text-xs font-semibold' }, optionTitle),
|
|
43
44
|
react_1["default"].createElement("div", { className: 'py-1' }, options === null || options === void 0 ? void 0 : options.map(function (item) { return (react_1["default"].createElement(react_2.Menu.Item, { key: item.content }, function (_a) {
|
|
44
45
|
var active = _a.active;
|
|
45
|
-
return (react_1["default"].createElement("div", { className: (0, types_1.classNames)(active ? 'bg-gray-100 text-gray-900
|
|
46
|
+
return (react_1["default"].createElement("div", { className: (0, types_1.classNames)(active ? 'cursor-pointer rounded-lg bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-2.5 py-2 text-xs', item.active &&
|
|
46
47
|
!item.destructive &&
|
|
47
|
-
'bg-gray-200
|
|
48
|
-
react_1["default"].createElement("div", { className: (0, types_1.classNames)(item.icon && 'flex gap-x-2
|
|
48
|
+
'rounded-lg bg-gray-200 font-semibold text-gray-900', item.destructive && !item.active && 'text-red-800 hover:bg-red-100', item.destructive && item.active && 'rounded-lg bg-red-200 font-semibold text-red-800'), onClick: item.onClick },
|
|
49
|
+
react_1["default"].createElement("div", { className: (0, types_1.classNames)(item.icon && 'flex items-center gap-x-2') },
|
|
49
50
|
item.icon && (react_1["default"].createElement(Icon, { active: item.active, icon: item.icon, iconOutline: item.iconOutline })),
|
|
50
51
|
react_1["default"].createElement("p", { className: "".concat(widthContent, " overflow-ellipsis break-words") }, item.content))));
|
|
51
52
|
})); }))))))));
|
|
52
|
-
})
|
|
53
|
+
}),
|
|
54
|
+
loading && (react_1["default"].createElement("div", { className: 'absolute left-[1px] top-[1px] flex h-[calc(100%-2px)] w-[calc(100%-2px)] items-center justify-center rounded-[14px] bg-white' },
|
|
55
|
+
react_1["default"].createElement(Loading_1.PHXSpinner, { className: 'h-[16px] w-[16px] text-gray-400' })))));
|
|
53
56
|
}
|
|
54
57
|
exports.PHXDropdown = PHXDropdown;
|
|
55
58
|
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":";;;;AAAA,qDAAuC;AACvC,2CAAoD;AACpD,mDAAkG;AAClG,4EAAuD;AACvD,gFAA2D;AAC3D,uFAAwD;AACxD,
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ export interface DropdownProps {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
buttonContent?: string;
|
|
8
8
|
optionTitle?: string;
|
|
9
|
+
loading?: boolean;
|
|
9
10
|
options?: Array<{
|
|
10
11
|
content?: string;
|
|
11
12
|
icon?: IconName;
|
|
@@ -26,4 +27,4 @@ export interface DropdownProps {
|
|
|
26
27
|
soft?: boolean;
|
|
27
28
|
widthContent?: any;
|
|
28
29
|
}
|
|
29
|
-
export declare function PHXDropdown({ className, optionTitle, buttonContent, options, type, origin, defaultDate, onChangeDate, soft, max, min, startDisabled, endDisabled, disabledDate, widthContent, }: DropdownProps): React.JSX.Element;
|
|
30
|
+
export declare function PHXDropdown({ className, optionTitle, buttonContent, options, type, origin, defaultDate, onChangeDate, soft, max, min, startDisabled, endDisabled, disabledDate, loading, widthContent, }: DropdownProps): React.JSX.Element;
|
|
@@ -3,18 +3,19 @@ import { Menu, Transition } from '@headlessui/react';
|
|
|
3
3
|
import { ChevronDownIcon, ChevronUpIcon, EllipsisHorizontalIcon } from '@heroicons/react/20/solid';
|
|
4
4
|
import * as SolidIcons from '@heroicons/react/24/solid';
|
|
5
5
|
import * as OutlineIcons from '@heroicons/react/24/outline';
|
|
6
|
-
import Calendar from '../DatePicker/components/Calendar';
|
|
7
6
|
import { classNames } from '../types';
|
|
7
|
+
import Calendar from '../DatePicker/components/Calendar';
|
|
8
|
+
import { PHXSpinner } from '../Loading';
|
|
8
9
|
export function PHXDropdown(_a) {
|
|
9
|
-
var className = _a.className, optionTitle = _a.optionTitle, buttonContent = _a.buttonContent, options = _a.options, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.origin, origin = _c === void 0 ? 'left' : _c, defaultDate = _a.defaultDate, onChangeDate = _a.onChangeDate, _d = _a.soft, soft = _d === void 0 ? false : _d, max = _a.max, min = _a.min, startDisabled = _a.startDisabled, endDisabled = _a.endDisabled, disabledDate = _a.disabledDate, widthContent = _a.widthContent;
|
|
10
|
+
var className = _a.className, optionTitle = _a.optionTitle, buttonContent = _a.buttonContent, options = _a.options, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.origin, origin = _c === void 0 ? 'left' : _c, defaultDate = _a.defaultDate, onChangeDate = _a.onChangeDate, _d = _a.soft, soft = _d === void 0 ? false : _d, max = _a.max, min = _a.min, startDisabled = _a.startDisabled, endDisabled = _a.endDisabled, disabledDate = _a.disabledDate, loading = _a.loading, widthContent = _a.widthContent;
|
|
10
11
|
var Icon = function (_a) {
|
|
11
12
|
var active = _a.active, icon = _a.icon, iconOutline = _a.iconOutline;
|
|
12
13
|
// @ts-ignore
|
|
13
14
|
var Icon = iconOutline ? OutlineIcons[icon] : SolidIcons[icon];
|
|
14
|
-
return React.createElement(Icon, { className: classNames('
|
|
15
|
+
return React.createElement(Icon, { className: classNames('h-4 w-4', active && 'font-semibold') });
|
|
15
16
|
};
|
|
16
|
-
return (React.createElement("div", { className: classNames('max-w-full md:max-w-fit', type === 'ellipsis-icon' && 'flex items-center') },
|
|
17
|
-
React.createElement(Menu, { as: 'div', className: classNames('
|
|
17
|
+
return (React.createElement("div", { className: classNames('relative max-w-full md:max-w-fit', type === 'ellipsis-icon' && 'flex items-center') },
|
|
18
|
+
React.createElement(Menu, { as: 'div', className: classNames('relative inline-block w-full text-left', className && "".concat(className), type === 'ellipsis-icon' && 'flex items-center') }, function (_a) {
|
|
18
19
|
var open = _a.open;
|
|
19
20
|
return (React.createElement(React.Fragment, null,
|
|
20
21
|
React.createElement("div", null,
|
|
@@ -23,28 +24,30 @@ export function PHXDropdown(_a) {
|
|
|
23
24
|
"rounded-lg border border-gray-300 border-b-gray-400 bg-white px-2.5 py-1.5 text-xs font-normal text-gray-900 shadow-sm hover:bg-gray-50 active:border-b-gray-100 active:bg-gray-100 active:pb-[0.3rem] active:pt-[0.45rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] ".concat(open ? '!border-b-gray-100 !bg-gray-100 !shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' : ''), type === 'icon-only' &&
|
|
24
25
|
!soft &&
|
|
25
26
|
'flex items-center rounded-full bg-gray-100 text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100', soft &&
|
|
26
|
-
"px-2.5 py-1.5 text-xs
|
|
27
|
+
"rounded-lg bg-indigo-50 px-2.5 py-1.5 text-xs font-normal text-gray-700 shadow-sm hover:bg-indigo-100 active:pb-[0.3rem] active:pt-[0.45rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] ".concat(open ? '!bg-indigo-100 shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' : ''), type === 'soft-small' &&
|
|
27
28
|
"rounded-lg bg-gray-200 px-2 py-1 text-xs hover:bg-gray-300 active:pb-[0.2rem] active:pt-[0.35rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]\n ".concat(open ? '!bg-gray-300 shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' : '', "\n "), type === 'ellipsis-icon' && 'flex items-center') },
|
|
28
29
|
React.createElement("div", { className: classNames((type === 'default' || type === 'date-picker' || type === 'soft-small') &&
|
|
29
|
-
'flex items-center gap-x-1 text-gray-900 md:justify-center
|
|
30
|
+
'flex items-center justify-between gap-x-1 text-gray-900 md:justify-center', type === 'ellipsis-icon' && 'flex items-center') },
|
|
30
31
|
React.createElement("p", { className: classNames('max-w-[200px] truncate', type === 'icon-only' && 'sr-only') }, buttonContent),
|
|
31
32
|
(type === 'default' || type === 'date-picker' || type === 'soft-small') &&
|
|
32
33
|
(open && origin === 'top-left' ? (React.createElement(ChevronUpIcon, { "aria-hidden": 'true', className: 'mt-0.5 h-4 w-4' })) : (React.createElement(ChevronDownIcon, { "aria-hidden": 'true', className: 'mt-0.5 h-4 w-4' }))),
|
|
33
34
|
type === 'icon-only' && React.createElement(EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }),
|
|
34
|
-
type === 'ellipsis-icon' && (React.createElement("div", { className: 'p-1 hover:bg-gray-300
|
|
35
|
+
type === 'ellipsis-icon' && (React.createElement("div", { className: 'rounded-lg p-1 hover:bg-gray-300' },
|
|
35
36
|
React.createElement(EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'h-4 w-4' })))))),
|
|
36
37
|
React.createElement(Transition, { as: Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
|
|
37
|
-
React.createElement(Menu.Items, { className: classNames(origin === 'left' && 'left-0 origin-top-left', origin === 'right' && 'right-0 origin-top-right', origin === 'top-left' && 'bottom-8 left-0', type === 'date-picker' ? '' : 'px-1
|
|
38
|
-
optionTitle && React.createElement("p", { className: 'px-2.5 pt-2
|
|
38
|
+
React.createElement(Menu.Items, { className: classNames(origin === 'left' && 'left-0 origin-top-left', origin === 'right' && 'right-0 origin-top-right', origin === 'top-left' && 'bottom-8 left-0', type === 'date-picker' ? '' : 'border px-1', 'absolute z-10 mt-1.5 max-h-96 min-w-[7.2rem] overflow-y-auto whitespace-nowrap rounded-lg bg-white shadow-[0rem_0.25rem_0.375rem_-0.125rem_rgba(26,26,26,.2)] focus:outline-none') }, type === 'date-picker' ? (React.createElement(Calendar, { onChangeDate: onChangeDate, defaultDate: defaultDate, max: max, min: min, startDisabled: startDisabled, endDisabled: endDisabled, disabledDate: disabledDate })) : (React.createElement(React.Fragment, null,
|
|
39
|
+
optionTitle && React.createElement("p", { className: 'px-2.5 pb-1 pt-2 text-xs font-semibold' }, optionTitle),
|
|
39
40
|
React.createElement("div", { className: 'py-1' }, options === null || options === void 0 ? void 0 : options.map(function (item) { return (React.createElement(Menu.Item, { key: item.content }, function (_a) {
|
|
40
41
|
var active = _a.active;
|
|
41
|
-
return (React.createElement("div", { className: classNames(active ? 'bg-gray-100 text-gray-900
|
|
42
|
+
return (React.createElement("div", { className: classNames(active ? 'cursor-pointer rounded-lg bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-2.5 py-2 text-xs', item.active &&
|
|
42
43
|
!item.destructive &&
|
|
43
|
-
'bg-gray-200
|
|
44
|
-
React.createElement("div", { className: classNames(item.icon && 'flex gap-x-2
|
|
44
|
+
'rounded-lg bg-gray-200 font-semibold text-gray-900', item.destructive && !item.active && 'text-red-800 hover:bg-red-100', item.destructive && item.active && 'rounded-lg bg-red-200 font-semibold text-red-800'), onClick: item.onClick },
|
|
45
|
+
React.createElement("div", { className: classNames(item.icon && 'flex items-center gap-x-2') },
|
|
45
46
|
item.icon && (React.createElement(Icon, { active: item.active, icon: item.icon, iconOutline: item.iconOutline })),
|
|
46
47
|
React.createElement("p", { className: "".concat(widthContent, " overflow-ellipsis break-words") }, item.content))));
|
|
47
48
|
})); }))))))));
|
|
48
|
-
})
|
|
49
|
+
}),
|
|
50
|
+
loading && (React.createElement("div", { className: 'absolute left-[1px] top-[1px] flex h-[calc(100%-2px)] w-[calc(100%-2px)] items-center justify-center rounded-[14px] bg-white' },
|
|
51
|
+
React.createElement(PHXSpinner, { className: 'h-[16px] w-[16px] text-gray-400' })))));
|
|
49
52
|
}
|
|
50
53
|
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAA;AAClG,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAA;AACvD,OAAO,KAAK,YAAY,MAAM,6BAA6B,CAAA;AAC3D,OAAO,QAAQ,MAAM,mCAAmC,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
|