@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.
Files changed (58) hide show
  1. package/build/cjs/packages/aurora/src/components/controls/select_control/select_control.js +3 -3
  2. package/build/cjs/packages/aurora/src/components/select/components/select_content.js +43 -35
  3. package/build/cjs/packages/aurora/src/components/select/components/select_content.js.map +1 -1
  4. package/build/cjs/packages/aurora/src/components/select/components/select_group_label.js +4 -4
  5. package/build/cjs/packages/aurora/src/components/select/components/select_item.js +8 -12
  6. package/build/cjs/packages/aurora/src/components/select/components/select_item.js.map +1 -1
  7. package/build/cjs/packages/aurora/src/components/select/components/select_trigger.js +4 -7
  8. package/build/cjs/packages/aurora/src/components/select/components/select_trigger.js.map +1 -1
  9. package/build/cjs/packages/aurora/src/components/select/components/select_value.js +10 -0
  10. 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
  11. package/build/cjs/packages/aurora/src/components/select/select.js +83 -56
  12. package/build/cjs/packages/aurora/src/components/select/select.js.map +1 -1
  13. package/build/cjs/packages/aurora/src/components/tooltip/components/tooltip_content.js +1 -1
  14. package/build/esm/packages/aurora/src/components/controls/select_control/select_control.js +3 -3
  15. package/build/esm/packages/aurora/src/components/select/components/select_content.js +47 -39
  16. package/build/esm/packages/aurora/src/components/select/components/select_content.js.map +1 -1
  17. package/build/esm/packages/aurora/src/components/select/components/select_group_label.d.ts +2 -2
  18. package/build/esm/packages/aurora/src/components/select/components/select_group_label.js +4 -4
  19. package/build/esm/packages/aurora/src/components/select/components/select_item.js +9 -13
  20. package/build/esm/packages/aurora/src/components/select/components/select_item.js.map +1 -1
  21. package/build/esm/packages/aurora/src/components/select/components/select_trigger.js +4 -7
  22. package/build/esm/packages/aurora/src/components/select/components/select_trigger.js.map +1 -1
  23. package/build/esm/packages/aurora/src/components/select/components/select_value.d.ts +3 -0
  24. package/build/esm/packages/aurora/src/components/select/components/select_value.js +6 -0
  25. package/build/esm/packages/aurora/src/components/select/components/select_value.js.map +1 -0
  26. package/build/esm/packages/aurora/src/components/select/select.d.ts +1 -1
  27. package/build/esm/packages/aurora/src/components/select/select.js +84 -57
  28. package/build/esm/packages/aurora/src/components/select/select.js.map +1 -1
  29. package/build/esm/packages/aurora/src/components/select/select_types.d.ts +7 -23
  30. package/build/esm/packages/aurora/src/components/select/select_types.js +0 -1
  31. package/build/esm/packages/aurora/src/components/select/select_types.js.map +1 -1
  32. package/build/esm/packages/aurora/src/components/tooltip/components/tooltip_content.js +1 -1
  33. package/build/esm/packages/aurora/src/components/typography/typography.d.ts +1 -1
  34. package/build/index.css +1 -1
  35. package/package.json +1 -2
  36. package/build/cjs/external/fast-equals/dist/esm/index.mjs.js +0 -619
  37. package/build/cjs/external/fast-equals/dist/esm/index.mjs.js.map +0 -1
  38. package/build/cjs/packages/aurora/src/components/select/components/select_search.js +0 -36
  39. package/build/cjs/packages/aurora/src/components/select/components/select_search.js.map +0 -1
  40. package/build/cjs/packages/aurora/src/components/select/hooks/use_prevent_search_blur.js +0 -49
  41. package/build/cjs/packages/aurora/src/components/select/hooks/use_prevent_search_blur.js.map +0 -1
  42. package/build/cjs/packages/aurora/src/components/select/hooks/use_select_value.js +0 -39
  43. package/build/cjs/packages/aurora/src/components/select/hooks/use_select_value.js.map +0 -1
  44. package/build/cjs/packages/aurora/src/components/select/select_utils.js +0 -39
  45. package/build/cjs/packages/aurora/src/components/select/select_utils.js.map +0 -1
  46. package/build/esm/external/fast-equals/dist/esm/index.mjs.js +0 -606
  47. package/build/esm/external/fast-equals/dist/esm/index.mjs.js.map +0 -1
  48. package/build/esm/packages/aurora/src/components/select/components/select_search.d.ts +0 -3
  49. package/build/esm/packages/aurora/src/components/select/components/select_search.js +0 -28
  50. package/build/esm/packages/aurora/src/components/select/hooks/use_prevent_search_blur.d.ts +0 -4
  51. package/build/esm/packages/aurora/src/components/select/hooks/use_prevent_search_blur.js +0 -45
  52. package/build/esm/packages/aurora/src/components/select/hooks/use_prevent_search_blur.js.map +0 -1
  53. package/build/esm/packages/aurora/src/components/select/hooks/use_select_value.d.ts +0 -5
  54. package/build/esm/packages/aurora/src/components/select/hooks/use_select_value.js +0 -35
  55. package/build/esm/packages/aurora/src/components/select/hooks/use_select_value.js.map +0 -1
  56. package/build/esm/packages/aurora/src/components/select/select_utils.d.ts +0 -6
  57. package/build/esm/packages/aurora/src/components/select/select_utils.js +0 -35
  58. 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 { Portal, Content, Viewport as Viewport$1 } from '@radix-ui/react-select';
5
- import { Root, Viewport, Scrollbar, Thumb } from '../../../../../../external/@radix-ui/react-scroll-area/dist/index.mjs.js';
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", "hasSearch", "searchPlaceholder", "search", "onSearch", "innerAdditionalContent", "position", "onScroll", "enableLocalSearch", "localSearchNotFoundContent"];
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
- search = _ref.search,
18
- onSearch = _ref.onSearch,
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 localSearchVisibleItems = 0;
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
- className: cn('aurora-w-[--radix-select-trigger-width] aurora-relative aurora-z-[1000] aurora-min-w-[20rem] aurora-max-h-96 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 aurora-group', 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),
30
- position: position
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(SelectSearch, {
40
- value: search,
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
- onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value);
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
- options: options
50
- }))), /*#__PURE__*/React.createElement(Viewport$1, {
51
- className: "aurora-flex aurora-flex-col aurora-gap-1"
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
- })), enableLocalSearch && !!localSearchNotFoundContent && !!search && !localSearchVisibleItems && (/*#__PURE__*/React.createElement("div", {
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-opacity-0 group-hover:aurora-opacity-75')
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,iDAAiD,0EAA8E;AAC/H;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,+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 { TBoxProps } from "../../box/box_types";
2
+ import { TDividerProps } from "../../divider/divider_types";
3
3
  export declare const SelectGroupLabel: {
4
- ({ children, ...props }: PropsWithChildren<TBoxProps>): React.JSX.Element;
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, _objectSpread2({
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
- }, props), /*#__PURE__*/React.createElement(Stack, {
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 first-letter:aurora-uppercase",
23
+ className: "aurora-whitespace-nowrap",
24
24
  size: "s",
25
25
  color: "subtle",
26
26
  weight: "bold"
27
- }, children), /*#__PURE__*/React.createElement(Divider, null)));
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, ItemIndicator, ItemText } from '@radix-ui/react-select';
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-s aurora-outline-none aurora-break-words aurora-text-wrap focus:aurora-bg-hover focus:aurora-text-accent-foreground data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50 hover:aurora-bg-hover data-[state=checked]:aurora-bg-hover data-[state=checked]:aurora-font-semibold', {
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
- onPointerMove: function onPointerMove(e) {
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
- })), /*#__PURE__*/React.createElement("div", {
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;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", "clearValueButton"];
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-visible:focus disabled:aurora-cursor-not-allowed disabled:aurora-bg-subtle disabled:aurora-text-subtle-light disabled:aurora-border-subtle [&>span]:aurora-text-ellipsis [&>span]:aurora-whitespace-nowrap [&>span]:aurora-overflow-hidden focus-visible:aurora-border-active -visible:aurora-border-2 data-[state=open]:aurora-border-active data-[state=open]:aurora-border-2', {
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("div", {
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;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,3 @@
1
+ /// <reference types="react" />
2
+ import * as SelectPrimitive from '@radix-ui/react-select';
3
+ export declare const SelectValue: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
@@ -0,0 +1,6 @@
1
+ import { Value } from '@radix-ui/react-select';
2
+
3
+ var SelectValue = Value;
4
+
5
+ export { SelectValue };
6
+ //# sourceMappingURL=select_value.js.map
@@ -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, value, options, disabled, placeholder, hasSearch, searchPlaceholder, hasClearValueButton, innerAdditionalContent, enableLocalSearch, localSearchNotFoundContent, errors, onValueChange, onScroll, onSearch, onClose, hasError, ...props }: PropsWithChildren<TSelectProps>): React.JSX.Element;
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 { useSelectValue } from './hooks/use_select_value.js';
7
+ import { SelectValue } from './components/select_value.js';
9
8
 
10
- var _excluded = ["children", "id", "value", "options", "disabled", "placeholder", "hasSearch", "searchPlaceholder", "hasClearValueButton", "innerAdditionalContent", "enableLocalSearch", "localSearchNotFoundContent", "errors", "onValueChange", "onScroll", "onSearch", "onClose", "hasError"];
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
- value = _ref.value,
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
- search = _useState2[0],
41
- setSearch = _useState2[1];
42
- var handleSearch = function handleSearch(str) {
43
- setSearch(str);
44
- onSearch === null || onSearch === void 0 ? void 0 : onSearch(str);
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 handleChange = function handleChange(val) {
47
- var _option$value;
48
- var option = val ? options.find(function (opt) {
49
- return opt.value === val;
50
- }) : undefined;
51
- setSelectedOption(option);
52
- onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((_option$value = option === null || option === void 0 ? void 0 : option.value) !== null && _option$value !== void 0 ? _option$value : '');
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 handleOpenChange = function handleOpenChange(open) {
55
- if (hasSearch && !open) setSearch('');
56
- if (onClose && !open) onClose();
64
+ var handleChange = function handleChange(sufixedValue) {
65
+ var cleanValue = sufixedValue.split('-')[0];
66
+ setSelectedValue(cleanValue);
57
67
  };
58
- var showPlaceholder = !selectedOption;
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
- value: (_selectedOption$value = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== null && _selectedOption$value !== void 0 ? _selectedOption$value : '',
87
+ defaultValue: defaultValue,
61
88
  onValueChange: handleChange,
62
89
  disabled: disabled,
63
- onOpenChange: handleOpenChange
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: hasError || !!(errors !== null && errors !== void 0 && errors.length),
69
- clearValueButton: value && hasClearValueButton && onValueChange && (/*#__PURE__*/React.createElement("div", {
70
- onPointerDown: function onPointerDown(e) {
71
- return e.stopPropagation();
72
- },
73
- onClick: function onClick() {
74
- handleChange('');
75
- },
76
- className: "aurora-w-5 aurora-h-5 aurora-flex aurora-items-center aurora-justify-center"
77
- }, /*#__PURE__*/React.createElement(CloseCircleFillIcon, {
78
- className: "aurora-h-4 aurora-w-4 aurora-cursor-pointer"
79
- })))
80
- }, /*#__PURE__*/React.createElement("span", {
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
- search: search,
88
- onSearch: handleSearch,
89
- onScroll: onScroll,
90
- enableLocalSearch: enableLocalSearch,
91
- localSearchNotFoundContent: localSearchNotFoundContent
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, RefObject } from 'react';
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
- search: string;
25
- onSearch?: (str: string) => void;
26
- enableLocalSearch?: boolean;
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 Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, 'defaultValue'> {
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,4 +1,3 @@
1
1
  import '@radix-ui/react-select';
2
2
  import 'react';
3
- import '@auroraComponents/input/input_types';
4
3
  //# sourceMappingURL=select_types.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"select_types.js","sourceRoot":"","sources":["../../../../../../../src/components/select/select_types.ts"],"names":[],"mappings":"AAAA,OAAiC,wBAAwB,CAAC;AAE1D,OAAqC,OAAO,CAAC;AAC7C,OAA4B,qCAAqC,CAAC"}
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-rounded-md 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({
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" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
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;