@dreamcommerce/aurora 3.0.0-260 → 3.0.0-261
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/build/cjs/packages/aurora/src/components/controls/select_control/select_control.js +3 -3
- package/build/cjs/packages/aurora/src/components/select/components/select_content.js +43 -35
- package/build/cjs/packages/aurora/src/components/select/components/select_content.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/select/components/select_group_label.js +4 -4
- package/build/cjs/packages/aurora/src/components/select/components/select_item.js +8 -12
- package/build/cjs/packages/aurora/src/components/select/components/select_item.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/select/components/select_trigger.js +4 -7
- package/build/cjs/packages/aurora/src/components/select/components/select_trigger.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/select/components/select_value.js +10 -0
- package/build/{esm/packages/aurora/src/components/select/components/select_search.js.map → cjs/packages/aurora/src/components/select/components/select_value.js.map} +1 -1
- package/build/cjs/packages/aurora/src/components/select/select.js +83 -56
- package/build/cjs/packages/aurora/src/components/select/select.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/tooltip/components/tooltip_content.js +1 -1
- package/build/esm/packages/aurora/src/components/controls/select_control/select_control.js +3 -3
- package/build/esm/packages/aurora/src/components/select/components/select_content.js +47 -39
- package/build/esm/packages/aurora/src/components/select/components/select_content.js.map +1 -1
- package/build/esm/packages/aurora/src/components/select/components/select_group_label.d.ts +2 -2
- package/build/esm/packages/aurora/src/components/select/components/select_group_label.js +4 -4
- package/build/esm/packages/aurora/src/components/select/components/select_item.js +9 -13
- package/build/esm/packages/aurora/src/components/select/components/select_item.js.map +1 -1
- package/build/esm/packages/aurora/src/components/select/components/select_trigger.js +4 -7
- package/build/esm/packages/aurora/src/components/select/components/select_trigger.js.map +1 -1
- package/build/esm/packages/aurora/src/components/select/components/select_value.d.ts +3 -0
- package/build/esm/packages/aurora/src/components/select/components/select_value.js +6 -0
- package/build/esm/packages/aurora/src/components/select/components/select_value.js.map +1 -0
- package/build/esm/packages/aurora/src/components/select/select.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/select/select.js +84 -57
- package/build/esm/packages/aurora/src/components/select/select.js.map +1 -1
- package/build/esm/packages/aurora/src/components/select/select_types.d.ts +7 -23
- package/build/esm/packages/aurora/src/components/select/select_types.js +0 -1
- package/build/esm/packages/aurora/src/components/select/select_types.js.map +1 -1
- package/build/esm/packages/aurora/src/components/tooltip/components/tooltip_content.js +1 -1
- package/build/esm/packages/aurora/src/components/typography/typography.d.ts +1 -1
- package/build/index.css +1 -1
- package/package.json +1 -2
- package/build/cjs/external/fast-equals/dist/esm/index.mjs.js +0 -619
- package/build/cjs/external/fast-equals/dist/esm/index.mjs.js.map +0 -1
- package/build/cjs/packages/aurora/src/components/select/components/select_search.js +0 -36
- package/build/cjs/packages/aurora/src/components/select/components/select_search.js.map +0 -1
- package/build/cjs/packages/aurora/src/components/select/hooks/use_prevent_search_blur.js +0 -49
- package/build/cjs/packages/aurora/src/components/select/hooks/use_prevent_search_blur.js.map +0 -1
- package/build/cjs/packages/aurora/src/components/select/hooks/use_select_value.js +0 -39
- package/build/cjs/packages/aurora/src/components/select/hooks/use_select_value.js.map +0 -1
- package/build/cjs/packages/aurora/src/components/select/select_utils.js +0 -39
- package/build/cjs/packages/aurora/src/components/select/select_utils.js.map +0 -1
- package/build/esm/external/fast-equals/dist/esm/index.mjs.js +0 -606
- package/build/esm/external/fast-equals/dist/esm/index.mjs.js.map +0 -1
- package/build/esm/packages/aurora/src/components/select/components/select_search.d.ts +0 -3
- package/build/esm/packages/aurora/src/components/select/components/select_search.js +0 -28
- package/build/esm/packages/aurora/src/components/select/hooks/use_prevent_search_blur.d.ts +0 -4
- package/build/esm/packages/aurora/src/components/select/hooks/use_prevent_search_blur.js +0 -45
- package/build/esm/packages/aurora/src/components/select/hooks/use_prevent_search_blur.js.map +0 -1
- package/build/esm/packages/aurora/src/components/select/hooks/use_select_value.d.ts +0 -5
- package/build/esm/packages/aurora/src/components/select/hooks/use_select_value.js +0 -35
- package/build/esm/packages/aurora/src/components/select/hooks/use_select_value.js.map +0 -1
- package/build/esm/packages/aurora/src/components/select/select_utils.d.ts +0 -6
- package/build/esm/packages/aurora/src/components/select/select_utils.js +0 -35
- package/build/esm/packages/aurora/src/components/select/select_utils.js.map +0 -1
|
@@ -1,81 +1,89 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
1
|
+
import React, { useRef, useState } from 'react';
|
|
2
|
+
import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
3
3
|
import { cn } from '../../../utilities/cn.js';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { Input } from '../../input/input.js';
|
|
5
|
+
import { Portal, Content, Viewport } from '@radix-ui/react-select';
|
|
6
|
+
import { Root, Viewport as Viewport$1, Scrollbar, Thumb } from '../../../../../../external/@radix-ui/react-scroll-area/dist/index.mjs.js';
|
|
7
|
+
import { SearchLineIcon } from '../../../assets/icons/search_icon.js';
|
|
6
8
|
import { SelectGroupLabel } from './select_group_label.js';
|
|
7
9
|
import { SelectItem } from './select_item.js';
|
|
8
|
-
import { SelectSearch } from './select_search.js';
|
|
9
|
-
import { SelectUtils } from '../select_utils.js';
|
|
10
10
|
|
|
11
|
-
var _excluded = ["className", "options", "
|
|
11
|
+
var _excluded = ["className", "options", "selectedValue", "hasSearch", "searchPlaceholder", "filterTerm", "setFilterTerm", "innerAdditionalContent", "triggerWidth", "position", "onScroll"];
|
|
12
12
|
var SelectContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
13
13
|
var className = _ref.className,
|
|
14
14
|
options = _ref.options,
|
|
15
|
+
selectedValue = _ref.selectedValue,
|
|
15
16
|
hasSearch = _ref.hasSearch,
|
|
16
17
|
searchPlaceholder = _ref.searchPlaceholder,
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
filterTerm = _ref.filterTerm,
|
|
19
|
+
setFilterTerm = _ref.setFilterTerm,
|
|
19
20
|
innerAdditionalContent = _ref.innerAdditionalContent,
|
|
21
|
+
triggerWidth = _ref.triggerWidth,
|
|
20
22
|
_ref$position = _ref.position,
|
|
21
23
|
position = _ref$position === void 0 ? 'popper' : _ref$position,
|
|
22
24
|
onScroll = _ref.onScroll,
|
|
23
|
-
enableLocalSearch = _ref.enableLocalSearch,
|
|
24
|
-
localSearchNotFoundContent = _ref.localSearchNotFoundContent,
|
|
25
25
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
26
|
-
var
|
|
26
|
+
var inputRef = useRef(null);
|
|
27
|
+
var _useState = useState(false),
|
|
28
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
29
|
+
isHovered = _useState2[0],
|
|
30
|
+
setIsHovered = _useState2[1];
|
|
27
31
|
return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Content, _objectSpread2({
|
|
28
32
|
ref: ref,
|
|
29
|
-
|
|
30
|
-
|
|
33
|
+
style: {
|
|
34
|
+
width: triggerWidth ? "".concat(triggerWidth, "px") : 'auto'
|
|
35
|
+
},
|
|
36
|
+
className: cn('aurora-relative aurora-z-[1000] aurora-max-h-96 aurora-min-w-[fit-content] aurora-overflow-y-hidden aurora-rounded-8 aurora-border aurora-bg-neutral-0 aurora-text-s aurora-shadow-m data-[state=open]:aurora-animate-in data-[state=closed]:aurora-animate-out data-[state=closed]:aurora-fade-out-0 data-[state=open]:aurora-fade-in-0 data-[state=closed]:aurora-zoom-out-95 data-[state=open]:aurora-zoom-in-95 data-[side=bottom]:aurora-slide-in-from-top-2 data-[side=left]:aurora-slide-in-from-right-2 data-[side=right]:aurora-slide-in-from-left-2 data-[side=top]:aurora-slide-in-from-bottom-2 aurora-p-1 js__aurora-select-dropdown', position === 'popper' && 'data-[side=bottom]:aurora-translate-y-1 data-[side=left]:-aurora-translate-x-1 data-[side=right]:aurora-translate-x-1 data-[side=top]:-aurora-translate-y-1', className),
|
|
37
|
+
position: position,
|
|
38
|
+
onMouseEnter: function onMouseEnter() {
|
|
39
|
+
return setIsHovered(true);
|
|
40
|
+
},
|
|
41
|
+
onMouseLeave: function onMouseLeave() {
|
|
42
|
+
return setIsHovered(false);
|
|
43
|
+
}
|
|
31
44
|
}, props), /*#__PURE__*/React.createElement(Root, {
|
|
32
45
|
type: "auto",
|
|
33
46
|
className: "aurora-w-full aurora-max-h-60 relative"
|
|
34
47
|
}, /*#__PURE__*/React.createElement(Viewport, {
|
|
48
|
+
asChild: true
|
|
49
|
+
}, /*#__PURE__*/React.createElement(Viewport$1, {
|
|
35
50
|
className: cn('aurora-p-1 aurora-max-h-60 aurora-w-full'),
|
|
36
51
|
onScroll: onScroll
|
|
37
52
|
}, hasSearch && (/*#__PURE__*/React.createElement("div", {
|
|
38
53
|
className: "aurora-p-2"
|
|
39
|
-
}, /*#__PURE__*/React.createElement(
|
|
40
|
-
|
|
54
|
+
}, /*#__PURE__*/React.createElement(Input, {
|
|
55
|
+
type: "text",
|
|
56
|
+
preElement: /*#__PURE__*/React.createElement(SearchLineIcon, {
|
|
57
|
+
className: "aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light"
|
|
58
|
+
}),
|
|
59
|
+
value: filterTerm,
|
|
60
|
+
tabIndex: 0,
|
|
41
61
|
onChange: function onChange(e) {
|
|
42
62
|
e.stopPropagation();
|
|
43
|
-
|
|
63
|
+
setFilterTerm === null || setFilterTerm === void 0 ? void 0 : setFilterTerm(e.target.value);
|
|
44
64
|
},
|
|
45
65
|
onKeyDown: function onKeyDown(e) {
|
|
46
66
|
e.stopPropagation();
|
|
47
67
|
},
|
|
48
68
|
placeholder: searchPlaceholder,
|
|
49
|
-
|
|
50
|
-
}))),
|
|
51
|
-
|
|
52
|
-
}, options === null || options === void 0 ? void 0 : options.map(function (option, index) {
|
|
53
|
-
var visible = true;
|
|
54
|
-
if (enableLocalSearch && hasSearch && search && !option.isHeader) {
|
|
55
|
-
visible = SelectUtils.localSearchIsOptionVisible(option, search);
|
|
56
|
-
if (visible) localSearchVisibleItems++;
|
|
57
|
-
}
|
|
58
|
-
if (enableLocalSearch && hasSearch && search && option.isHeader) {
|
|
59
|
-
visible = SelectUtils.localSearchIsHeaderVisible(search, options, index);
|
|
60
|
-
}
|
|
69
|
+
ref: inputRef
|
|
70
|
+
}))), options === null || options === void 0 ? void 0 : options.map(function (option, index) {
|
|
71
|
+
var isSelected = selectedValue ? option.value === selectedValue : false;
|
|
61
72
|
return option.isHeader ? (/*#__PURE__*/React.createElement(SelectGroupLabel, {
|
|
62
|
-
key: "select-label-".concat(option.text, "-").concat(index)
|
|
63
|
-
className: cn(!visible && 'aurora-hidden')
|
|
73
|
+
key: "select-label-".concat(option.text, "-").concat(index)
|
|
64
74
|
}, option.text)) : (/*#__PURE__*/React.createElement(SelectItem, {
|
|
65
75
|
key: "select-item-".concat(option.value, "-").concat(index),
|
|
66
|
-
value: option.value,
|
|
76
|
+
value: "".concat(option.value, "-").concat(index),
|
|
77
|
+
isSelected: isSelected,
|
|
67
78
|
isDisabled: option.isDisabled,
|
|
68
79
|
isReadonly: option.isReadonly,
|
|
69
|
-
additionalInfo: option.additionalInfo
|
|
70
|
-
className: cn(!visible && 'aurora-hidden')
|
|
80
|
+
additionalInfo: option.additionalInfo
|
|
71
81
|
}, option.text));
|
|
72
|
-
})
|
|
73
|
-
className: "aurora-p-2"
|
|
74
|
-
}, localSearchNotFoundContent)), innerAdditionalContent && /*#__PURE__*/React.createElement("div", {
|
|
82
|
+
}), innerAdditionalContent && /*#__PURE__*/React.createElement("div", {
|
|
75
83
|
className: "aurora-p-2"
|
|
76
|
-
}, innerAdditionalContent)), /*#__PURE__*/React.createElement(Scrollbar, {
|
|
84
|
+
}, innerAdditionalContent))), /*#__PURE__*/React.createElement(Scrollbar, {
|
|
77
85
|
orientation: "vertical",
|
|
78
|
-
className: cn('aurora-w-2 aurora-absolute aurora-right-0 aurora-top-0 aurora-bottom-0 aurora-py-1 aurora-pr-[2px] aurora-transition-opacity aurora-duration-200 aurora-
|
|
86
|
+
className: cn('aurora-w-2 aurora-absolute aurora-right-0 aurora-top-0 aurora-bottom-0 aurora-py-1 aurora-pr-[2px] aurora-transition-opacity aurora-duration-200', _defineProperty(_defineProperty(_defineProperty({}, 'aurora-pt-16', hasSearch), 'aurora-opacity-75', isHovered), 'aurora-opacity-0', !isHovered))
|
|
79
87
|
}, /*#__PURE__*/React.createElement(Thumb, {
|
|
80
88
|
className: "aurora-bg-neutral-700 aurora-rounded-full"
|
|
81
89
|
})))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,+DAA+D,0EAA8E;AAC7I;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { PropsWithChildren } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { TDividerProps } from "../../divider/divider_types";
|
|
3
3
|
export declare const SelectGroupLabel: {
|
|
4
|
-
({ children, ...props }: PropsWithChildren<
|
|
4
|
+
({ children, ...props }: PropsWithChildren<TDividerProps>): React.JSX.Element;
|
|
5
5
|
displayName: string;
|
|
6
6
|
};
|
|
@@ -9,22 +9,22 @@ var _excluded = ["children"];
|
|
|
9
9
|
var SelectGroupLabel = function SelectGroupLabel(_ref) {
|
|
10
10
|
var children = _ref.children,
|
|
11
11
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
12
|
-
return /*#__PURE__*/React.createElement(Box,
|
|
12
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
13
13
|
paddings: {
|
|
14
14
|
pl: '2',
|
|
15
15
|
pt: '2',
|
|
16
16
|
pb: '2',
|
|
17
17
|
pr: '0'
|
|
18
18
|
}
|
|
19
|
-
},
|
|
19
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
20
20
|
align: "center",
|
|
21
21
|
spacing: "2.5"
|
|
22
22
|
}, /*#__PURE__*/React.createElement(Typography, {
|
|
23
|
-
className: "aurora-whitespace-nowrap
|
|
23
|
+
className: "aurora-whitespace-nowrap",
|
|
24
24
|
size: "s",
|
|
25
25
|
color: "subtle",
|
|
26
26
|
weight: "bold"
|
|
27
|
-
}, children), /*#__PURE__*/React.createElement(Divider,
|
|
27
|
+
}, children), /*#__PURE__*/React.createElement(Divider, _objectSpread2({}, props))));
|
|
28
28
|
};
|
|
29
29
|
SelectGroupLabel.displayName = 'SelectGroupLabel';
|
|
30
30
|
|
|
@@ -2,32 +2,28 @@ import React from 'react';
|
|
|
2
2
|
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
3
3
|
import { cn } from '../../../utilities/cn.js';
|
|
4
4
|
import { CheckLineIcon } from '../../../assets/icons/check_icon.js';
|
|
5
|
-
import { Item,
|
|
5
|
+
import { Item, ItemText } from '@radix-ui/react-select';
|
|
6
6
|
|
|
7
|
-
var _excluded = ["children", "className", "isDisabled", "isReadonly", "additionalInfo"];
|
|
7
|
+
var _excluded = ["children", "className", "isDisabled", "isReadonly", "isSelected", "additionalInfo"];
|
|
8
8
|
var SelectItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
9
9
|
var children = _ref.children,
|
|
10
10
|
className = _ref.className,
|
|
11
11
|
isDisabled = _ref.isDisabled,
|
|
12
12
|
isReadonly = _ref.isReadonly,
|
|
13
|
+
isSelected = _ref.isSelected,
|
|
13
14
|
additionalInfo = _ref.additionalInfo,
|
|
14
15
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
15
16
|
return /*#__PURE__*/React.createElement(Item, _objectSpread2(_objectSpread2({
|
|
16
|
-
className: cn('aurora-relative aurora-flex aurora-w-full aurora-rounded-6 aurora-cursor-default aurora-select-none aurora-items-center aurora-rounded-sm aurora-py-1.5 aurora-pl-9 aurora-pr-8 aurora-text-
|
|
17
|
-
'aurora-cursor-pointer active:aurora-bg-active': !isDisabled && !isReadonly
|
|
17
|
+
className: cn('aurora-relative aurora-flex aurora-w-full aurora-rounded-6 aurora-cursor-default aurora-select-none aurora-items-center aurora-rounded-sm aurora-py-1.5 aurora-pl-9 aurora-pr-8 aurora-text-sm aurora-outline-none active:aurora-bg-active focus:aurora-bg-accent focus:aurora-text-accent-foreground data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50 hover:aurora-bg-hover', {
|
|
18
|
+
'aurora-cursor-pointer active:aurora-bg-active': !isDisabled && !isReadonly,
|
|
19
|
+
'aurora-bg-hover aurora-font-semibold': isSelected
|
|
18
20
|
}, className),
|
|
19
|
-
style: {
|
|
20
|
-
wordBreak: 'break-word'
|
|
21
|
-
},
|
|
22
21
|
disabled: isDisabled || isReadonly
|
|
23
22
|
}, props), {}, {
|
|
24
|
-
ref: ref
|
|
25
|
-
|
|
26
|
-
e.preventDefault();
|
|
27
|
-
}
|
|
28
|
-
}), /*#__PURE__*/React.createElement(ItemIndicator, null, /*#__PURE__*/React.createElement(CheckLineIcon, {
|
|
23
|
+
ref: ref
|
|
24
|
+
}), isSelected && /*#__PURE__*/React.createElement(CheckLineIcon, {
|
|
29
25
|
className: "aurora-h-5 aurora-w-5 -aurora-ml-7 aurora-mr-2"
|
|
30
|
-
})
|
|
26
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
31
27
|
className: "aurora-flex aurora-flex-col"
|
|
32
28
|
}, /*#__PURE__*/React.createElement(ItemText, null, children), !!additionalInfo && /*#__PURE__*/React.createElement("p", {
|
|
33
29
|
className: "aurora-text-xs aurora-text-subtle-light"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -4,25 +4,22 @@ import { cn } from '../../../utilities/cn.js';
|
|
|
4
4
|
import { ArrowDownSFillIcon } from '../../../assets/icons/arrow_down_s_fill.js';
|
|
5
5
|
import { Trigger, Icon } from '@radix-ui/react-select';
|
|
6
6
|
|
|
7
|
-
var _excluded = ["className", "hasError", "children"
|
|
7
|
+
var _excluded = ["className", "hasError", "children"];
|
|
8
8
|
var SelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
9
9
|
var className = _ref.className,
|
|
10
10
|
hasError = _ref.hasError,
|
|
11
11
|
children = _ref.children,
|
|
12
|
-
clearValueButton = _ref.clearValueButton,
|
|
13
12
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
14
13
|
return /*#__PURE__*/React.createElement(Trigger, _objectSpread2({
|
|
15
14
|
ref: ref,
|
|
16
|
-
className: cn('aurora-flex aurora-h-10 aurora-w-full aurora-items-center aurora-justify-between aurora-rounded-8 aurora-border aurora-border-input aurora-bg-neutral-0 aurora-px-3 aurora-py-2 aurora-text-s hover:aurora-border-strong focus
|
|
15
|
+
className: cn('aurora-flex aurora-h-10 aurora-w-full aurora-items-center aurora-justify-between aurora-rounded-8 aurora-border aurora-border-input aurora-bg-neutral-0 aurora-px-3 aurora-py-2 aurora-text-s hover:aurora-border-strong focus:focus disabled:aurora-cursor-not-allowed disabled:aurora-bg-subtle disabled:aurora-text-subtle-light disabled:aurora-border-subtle [&>span]:aurora-line-clamp-1 focus:aurora-border-active focus:aurora-border-2 active:aurora-border-active active:aurora-border-2', {
|
|
17
16
|
'!aurora-border-danger aurora-border-2': hasError
|
|
18
17
|
}, className)
|
|
19
|
-
}, props), children, /*#__PURE__*/React.createElement(
|
|
20
|
-
className: "aurora-flex aurora-flex-none aurora-items-center"
|
|
21
|
-
}, clearValueButton, /*#__PURE__*/React.createElement(Icon, {
|
|
18
|
+
}, props), children, /*#__PURE__*/React.createElement(Icon, {
|
|
22
19
|
asChild: true
|
|
23
20
|
}, /*#__PURE__*/React.createElement(ArrowDownSFillIcon, {
|
|
24
21
|
className: "aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light"
|
|
25
|
-
})))
|
|
22
|
+
})));
|
|
26
23
|
});
|
|
27
24
|
SelectTrigger.displayName = Trigger.displayName;
|
|
28
25
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { PropsWithChildren } from 'react';
|
|
2
2
|
import { TSelectProps } from './select_types';
|
|
3
3
|
export declare const Select: {
|
|
4
|
-
({ children, id,
|
|
4
|
+
({ children, id, defaultValue, options, disabled, placeholder, hasSearch, searchPlaceholder, hasClearValueButton, innerAdditionalContent, errors, onValueChange, onScroll, ...props }: PropsWithChildren<TSelectProps>): React.JSX.Element;
|
|
5
5
|
displayName: string | undefined;
|
|
6
6
|
};
|
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
1
|
+
import React, { useState, useRef, useEffect } from 'react';
|
|
2
2
|
import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
3
|
-
import { cn } from '../../utilities/cn.js';
|
|
4
3
|
import { Root } from '@radix-ui/react-select';
|
|
5
4
|
import { CloseCircleFillIcon } from '../../assets/icons/close_circle_fill_icon.js';
|
|
6
5
|
import { SelectContent } from './components/select_content.js';
|
|
7
6
|
import { SelectTrigger } from './components/select_trigger.js';
|
|
8
|
-
import {
|
|
7
|
+
import { SelectValue } from './components/select_value.js';
|
|
9
8
|
|
|
10
|
-
var _excluded = ["children", "id", "
|
|
9
|
+
var _excluded = ["children", "id", "defaultValue", "options", "disabled", "placeholder", "hasSearch", "searchPlaceholder", "hasClearValueButton", "innerAdditionalContent", "errors", "onValueChange", "onScroll"];
|
|
11
10
|
var Select = function Select(_ref) {
|
|
12
|
-
var _selectedOption$value;
|
|
13
11
|
var children = _ref.children,
|
|
14
12
|
id = _ref.id,
|
|
15
|
-
|
|
13
|
+
defaultValue = _ref.defaultValue,
|
|
16
14
|
options = _ref.options,
|
|
17
15
|
disabled = _ref.disabled,
|
|
18
16
|
placeholder = _ref.placeholder,
|
|
@@ -20,76 +18,105 @@ var Select = function Select(_ref) {
|
|
|
20
18
|
searchPlaceholder = _ref.searchPlaceholder,
|
|
21
19
|
hasClearValueButton = _ref.hasClearValueButton,
|
|
22
20
|
innerAdditionalContent = _ref.innerAdditionalContent,
|
|
23
|
-
enableLocalSearch = _ref.enableLocalSearch,
|
|
24
|
-
localSearchNotFoundContent = _ref.localSearchNotFoundContent,
|
|
25
21
|
errors = _ref.errors,
|
|
26
22
|
onValueChange = _ref.onValueChange,
|
|
27
23
|
onScroll = _ref.onScroll,
|
|
28
|
-
onSearch = _ref.onSearch,
|
|
29
|
-
onClose = _ref.onClose,
|
|
30
|
-
hasError = _ref.hasError,
|
|
31
24
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
32
|
-
var _useSelectValue = useSelectValue({
|
|
33
|
-
value: value,
|
|
34
|
-
options: options
|
|
35
|
-
}),
|
|
36
|
-
selectedOption = _useSelectValue.selectedOption,
|
|
37
|
-
setSelectedOption = _useSelectValue.setSelectedOption;
|
|
38
25
|
var _useState = useState(''),
|
|
39
26
|
_useState2 = _slicedToArray(_useState, 2),
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
var
|
|
43
|
-
|
|
44
|
-
|
|
27
|
+
filterTerm = _useState2[0],
|
|
28
|
+
setFilterTerm = _useState2[1];
|
|
29
|
+
var _useState3 = useState(defaultValue),
|
|
30
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
31
|
+
selectedValue = _useState4[0],
|
|
32
|
+
setSelectedValue = _useState4[1];
|
|
33
|
+
var triggerRef = useRef(null);
|
|
34
|
+
var _useState5 = useState(null),
|
|
35
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
36
|
+
triggerWidth = _useState6[0],
|
|
37
|
+
setTriggerWidth = _useState6[1];
|
|
38
|
+
var _useState7 = useState(false),
|
|
39
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
40
|
+
open = _useState8[0],
|
|
41
|
+
setOpen = _useState8[1];
|
|
42
|
+
var _useState9 = useState(false),
|
|
43
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
44
|
+
renderContent = _useState10[0],
|
|
45
|
+
setRenderContent = _useState10[1];
|
|
46
|
+
var clearFilterInputOnClose = function clearFilterInputOnClose(openState) {
|
|
47
|
+
if (hasSearch && !openState) setFilterTerm('');
|
|
45
48
|
};
|
|
46
|
-
var
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
return opt.
|
|
50
|
-
})
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
var filteredOptions = React.useMemo(function () {
|
|
50
|
+
if (!hasSearch || !filterTerm) return options;
|
|
51
|
+
return options.filter(function (opt) {
|
|
52
|
+
return opt.text.toLowerCase().includes(filterTerm.toLowerCase()) || opt.isHeader;
|
|
53
|
+
});
|
|
54
|
+
}, [filterTerm, options]);
|
|
55
|
+
useEffect(function () {
|
|
56
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(selectedValue !== null && selectedValue !== void 0 ? selectedValue : '');
|
|
57
|
+
}, [selectedValue]);
|
|
58
|
+
var getSelectedLabel = function getSelectedLabel(options, selectedValue) {
|
|
59
|
+
var _options$find;
|
|
60
|
+
return ((_options$find = options.find(function (opt) {
|
|
61
|
+
return opt.value === selectedValue;
|
|
62
|
+
})) === null || _options$find === void 0 ? void 0 : _options$find.text) || '';
|
|
53
63
|
};
|
|
54
|
-
var
|
|
55
|
-
|
|
56
|
-
|
|
64
|
+
var handleChange = function handleChange(sufixedValue) {
|
|
65
|
+
var cleanValue = sufixedValue.split('-')[0];
|
|
66
|
+
setSelectedValue(cleanValue);
|
|
57
67
|
};
|
|
58
|
-
|
|
68
|
+
useEffect(function () {
|
|
69
|
+
if (!open) {
|
|
70
|
+
setRenderContent(false);
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
var timer = setTimeout(function () {
|
|
74
|
+
return setRenderContent(true);
|
|
75
|
+
}, 10);
|
|
76
|
+
return function () {
|
|
77
|
+
return clearTimeout(timer);
|
|
78
|
+
};
|
|
79
|
+
}, [open]);
|
|
80
|
+
useEffect(function () {
|
|
81
|
+
if (renderContent && triggerRef.current) {
|
|
82
|
+
var rect = triggerRef.current.getBoundingClientRect();
|
|
83
|
+
setTriggerWidth(rect.width);
|
|
84
|
+
}
|
|
85
|
+
}, [renderContent]);
|
|
59
86
|
return /*#__PURE__*/React.createElement(Root, _objectSpread2({
|
|
60
|
-
|
|
87
|
+
defaultValue: defaultValue,
|
|
61
88
|
onValueChange: handleChange,
|
|
62
89
|
disabled: disabled,
|
|
63
|
-
onOpenChange:
|
|
90
|
+
onOpenChange: function onOpenChange(openState) {
|
|
91
|
+
setOpen(openState);
|
|
92
|
+
clearFilterInputOnClose(openState);
|
|
93
|
+
}
|
|
64
94
|
}, props), /*#__PURE__*/React.createElement("div", {
|
|
65
95
|
className: "aurora-relative aurora-flex aurora-items-center aurora-flex-col"
|
|
66
96
|
}, /*#__PURE__*/React.createElement(SelectTrigger, {
|
|
97
|
+
ref: triggerRef,
|
|
67
98
|
id: id,
|
|
68
|
-
hasError:
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
className: cn('aurora-pointer-events-none aurora-select-none', showPlaceholder && 'aurora-text-subtle')
|
|
82
|
-
}, !showPlaceholder ? selectedOption.text : placeholder))), /*#__PURE__*/React.createElement(SelectContent, {
|
|
83
|
-
options: options,
|
|
99
|
+
hasError: !!(errors !== null && errors !== void 0 && errors.length)
|
|
100
|
+
}, /*#__PURE__*/React.createElement(SelectValue, {
|
|
101
|
+
placeholder: placeholder
|
|
102
|
+
}, selectedValue ? getSelectedLabel(options, selectedValue) : placeholder !== null && placeholder !== void 0 ? placeholder : '')), selectedValue && hasClearValueButton && (/*#__PURE__*/React.createElement("div", {
|
|
103
|
+
className: "aurora-absolute aurora-top-3 aurora-right-8 aurora-z-10",
|
|
104
|
+
onClick: function onClick() {
|
|
105
|
+
return setSelectedValue('');
|
|
106
|
+
}
|
|
107
|
+
}, /*#__PURE__*/React.createElement(CloseCircleFillIcon, {
|
|
108
|
+
className: "aurora-h-4 aurora-w-4 aurora-cursor-pointer"
|
|
109
|
+
})))), renderContent && (/*#__PURE__*/React.createElement(SelectContent, {
|
|
110
|
+
options: filteredOptions,
|
|
111
|
+
selectedValue: selectedValue,
|
|
84
112
|
hasSearch: hasSearch,
|
|
85
113
|
searchPlaceholder: searchPlaceholder,
|
|
86
114
|
innerAdditionalContent: innerAdditionalContent,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}));
|
|
115
|
+
filterTerm: filterTerm,
|
|
116
|
+
setFilterTerm: setFilterTerm,
|
|
117
|
+
triggerWidth: triggerWidth,
|
|
118
|
+
onScroll: onScroll
|
|
119
|
+
})));
|
|
93
120
|
};
|
|
94
121
|
Select.displayName = Root.displayName;
|
|
95
122
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
2
|
-
import { ReactNode,
|
|
3
|
-
import { TInputProps } from "../input/input_types";
|
|
2
|
+
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
|
4
3
|
export interface TSelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
|
|
5
4
|
hasError?: boolean;
|
|
6
|
-
clearValueButton?: ReactNode;
|
|
7
5
|
}
|
|
8
6
|
export declare type TSelectOption = {
|
|
9
7
|
text: string;
|
|
@@ -13,25 +11,23 @@ export declare type TSelectOption = {
|
|
|
13
11
|
isDisabled?: boolean;
|
|
14
12
|
isReadonly?: boolean;
|
|
15
13
|
};
|
|
16
|
-
export interface TSelectSearchProps extends TInputProps {
|
|
17
|
-
options: TSelectOption[];
|
|
18
|
-
}
|
|
19
14
|
export interface TSelectContentProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
|
|
20
15
|
options: TSelectOption[];
|
|
16
|
+
selectedValue?: string;
|
|
21
17
|
hasSearch?: boolean;
|
|
22
18
|
searchPlaceholder?: string;
|
|
23
19
|
innerAdditionalContent?: ReactNode;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
localSearchNotFoundContent?: ReactNode;
|
|
20
|
+
filterTerm: string;
|
|
21
|
+
triggerWidth?: number | null;
|
|
22
|
+
setFilterTerm?: Dispatch<SetStateAction<string>>;
|
|
28
23
|
}
|
|
29
24
|
export interface TSelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
|
|
30
25
|
isDisabled?: boolean;
|
|
31
26
|
isReadonly?: boolean;
|
|
27
|
+
isSelected?: boolean;
|
|
32
28
|
additionalInfo?: string;
|
|
33
29
|
}
|
|
34
|
-
export interface TSelectProps extends
|
|
30
|
+
export interface TSelectProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> {
|
|
35
31
|
id: string;
|
|
36
32
|
options: TSelectOption[];
|
|
37
33
|
placeholder?: string;
|
|
@@ -41,17 +37,5 @@ export interface TSelectProps extends Omit<React.ComponentPropsWithoutRef<typeof
|
|
|
41
37
|
hasClearValueButton?: boolean;
|
|
42
38
|
errors?: string | string[];
|
|
43
39
|
hasError?: boolean;
|
|
44
|
-
enableLocalSearch?: boolean;
|
|
45
|
-
localSearchNotFoundContent?: ReactNode;
|
|
46
40
|
onScroll?: (event: React.UIEvent<HTMLElement>) => void;
|
|
47
|
-
onSearch?: (str: string) => void;
|
|
48
|
-
onClose?: () => void;
|
|
49
|
-
}
|
|
50
|
-
export interface TUseSelectValueProps {
|
|
51
|
-
value: string | undefined;
|
|
52
|
-
options: TSelectOption[];
|
|
53
|
-
}
|
|
54
|
-
export interface TUsePreventSearchBlurProps {
|
|
55
|
-
inputRef: RefObject<HTMLInputElement | null>;
|
|
56
|
-
options: TSelectOption[];
|
|
57
41
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select_types.js","sourceRoot":"","sources":["../../../../../../../src/components/select/select_types.ts"],"names":[],"mappings":"AAAA,OAAiC,wBAAwB,CAAC;AAE1D,
|
|
1
|
+
{"version":3,"file":"select_types.js","sourceRoot":"","sources":["../../../../../../../src/components/select/select_types.ts"],"names":[],"mappings":"AAAA,OAAiC,wBAAwB,CAAC;AAE1D,OAAoD,OAAO,CAAC"}
|
|
@@ -14,7 +14,7 @@ var TooltipContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
14
14
|
return /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content, _objectSpread2({
|
|
15
15
|
ref: ref,
|
|
16
16
|
sideOffset: sideOffset,
|
|
17
|
-
className: cn('aurora-z-[1000] aurora-max-w-[320px] aurora-shadow aurora-overflow-hidden aurora-border aurora-rounded-8 aurora-
|
|
17
|
+
className: cn('aurora-z-[1000] aurora-max-w-[320px] aurora-shadow aurora-overflow-hidden aurora-border aurora-rounded-8 aurora-px-3 aurora-py-2 aurora-text-xs aurora-animate-in aurora-fade-in-0 data-[state=closed]:aurora-animate-out data-[state=closed]:aurora-fade-out-0 data-[side=bottom]:aurora-slide-in-from-top-2 data-[side=left]:aurora-slide-in-from-right-2 data-[side=right]:aurora-slide-in-from-left-2 data-[side=top]:aurora-slide-in-from-bottom-2', tooltipContentVariants({
|
|
18
18
|
variant: variant
|
|
19
19
|
}), className)
|
|
20
20
|
}, props)));
|
|
@@ -46,7 +46,7 @@ export declare const Typography: ({ variant, as, style, color, weight, size, lin
|
|
|
46
46
|
results?: number | undefined;
|
|
47
47
|
security?: string | undefined;
|
|
48
48
|
unselectable?: "off" | "on" | undefined;
|
|
49
|
-
inputMode?: "search" | "
|
|
49
|
+
inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
50
50
|
is?: string | undefined;
|
|
51
51
|
"aria-activedescendant"?: string | undefined;
|
|
52
52
|
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|