@dreamcommerce/aurora 3.0.0-264 → 3.0.0-265

package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_content.js

@@ -6,16 +6,17 @@ var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var cn = require('../../../utilities/cn.js');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-var input = require('../../input/input.js');
-var search_icon = require('../../../assets/icons/search_icon.js');
+var index = require('../../../../../../external/@radix-ui/react-scroll-area/dist/index.mjs.js');
 var multiselect_group_label = require('./multiselect_group_label.js');
 var multiselect_item = require('./multiselect_item.js');
+var multiselect_search = require('./multiselect_search.js');
+var multiselect_utils = require('../multiselect_utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["options", "selectedOptions", "toggleOption", "triggerWidth", "hasSearch", "searchPlaceholder", "className"];
+var _excluded = ["options", "selectedOptions", "toggleOption", "triggerWidth", "hasSearch", "searchPlaceholder", "className", "searchNotFoundContent"];
 var MultiSelectContent = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
   var options = _ref.options,
     selectedOptions = _ref.selectedOptions,
@@ -24,42 +25,49 @@ var MultiSelectContent = /*#__PURE__*/React__default['default'].forwardRef(funct
     hasSearch = _ref.hasSearch,
     searchPlaceholder = _ref.searchPlaceholder,
     className = _ref.className,
+    searchNotFoundContent = _ref.searchNotFoundContent,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _React$useState = React__default['default'].useState(''),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    searchTerm = _React$useState2[0],
-    setSearchTerm = _React$useState2[1];
-  var filteredOptions = options.filter(function (option) {
-    var _searchTerm$toLowerCa;
-    return option.text.toLowerCase().includes((_searchTerm$toLowerCa = searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.toLowerCase()) !== null && _searchTerm$toLowerCa !== void 0 ? _searchTerm$toLowerCa : '');
-  });
+    search = _React$useState2[0],
+    setSearch = _React$useState2[1];
+  var searchVisibleItems = 0;
   return /*#__PURE__*/React__default['default'].createElement(DropdownMenuPrimitive.Content, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
-    className: cn.cn("aurora-z-50 aurora-bg aurora-flex aurora-flex-col aurora-gap-1 aurora-mt-1 aurora-overflow-hidden aurora-rounded-8 aurora-border aurora-p-3 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", className)
+    className: cn.cn("aurora-w-[--radix-dropdown-menu-trigger-width] aurora-min-w-[20rem] aurora-max-h-96 aurora-z-50 aurora-bg aurora-flex aurora-flex-col aurora-gap-1 aurora-mt-1 aurora-overflow-hidden aurora-rounded-8 aurora-border aurora-p-1 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 js__aurora-select-dropdown aurora-group", className)
   }, props), {}, {
-    ref: ref,
-    style: {
-      width: "".concat(triggerWidth, "px")
-    }
-  }), hasSearch && (/*#__PURE__*/React__default['default'].createElement("div", {
+    ref: ref
+  }), /*#__PURE__*/React__default['default'].createElement(index.Root, {
+    type: "auto",
+    className: "aurora-w-full aurora-max-h-60 relative"
+  }, /*#__PURE__*/React__default['default'].createElement(index.Viewport, {
+    className: cn.cn('aurora-p-1 aurora-max-h-60 aurora-w-full')
+  }, hasSearch && (/*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-p-2"
-  }, /*#__PURE__*/React__default['default'].createElement(input.Input, {
-    type: "text",
-    preElement: /*#__PURE__*/React__default['default'].createElement(search_icon.SearchLineIcon, {
-      className: "aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light"
-    }),
-    value: searchTerm,
+  }, /*#__PURE__*/React__default['default'].createElement(multiselect_search.MultiSelectSearch, {
+    value: search,
     tabIndex: 0,
     onChange: function onChange(e) {
       e.stopPropagation();
-      setSearchTerm(e.target.value);
+      setSearch(e.target.value);
     },
     onKeyDown: function onKeyDown(e) {
       e.stopPropagation();
     },
     placeholder: searchPlaceholder
-  }))), filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map(function (option) {
+  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-flex-col aurora-gap-1"
+  }, options === null || options === void 0 ? void 0 : options.map(function (option, index) {
+    var visible = true;
+    if (hasSearch && search && !option.isHeader) {
+      visible = multiselect_utils.MultiSelectUtils.isOptionVisible(option, search);
+      if (visible) searchVisibleItems++;
+    }
+    if (hasSearch && search && option.isHeader) {
+      visible = multiselect_utils.MultiSelectUtils.isHeaderVisible(search, options, index);
+    }
     return option.isHeader ? (/*#__PURE__*/React__default['default'].createElement(multiselect_group_label.MultiSelectGroupLabel, {
-      key: option.text
+      key: option.text,
+      className: cn.cn(!visible && 'aurora-hidden')
     }, option.text)) : (/*#__PURE__*/React__default['default'].createElement(multiselect_item.MultiSelectItem, {
       key: "select-item-".concat(option.value),
       option: option,
@@ -68,9 +76,17 @@ var MultiSelectContent = /*#__PURE__*/React__default['default'].forwardRef(funct
       isSelected: selectedOptions.some(function (selected) {
         return selected.value === option.value;
       }),
-      toggleOption: toggleOption
+      toggleOption: toggleOption,
+      className: cn.cn(!visible && 'aurora-hidden')
     }, option.text));
-  }));
+  }), !!hasSearch && !!search && !searchVisibleItems && !!searchNotFoundContent && (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-p-2"
+  }, searchNotFoundContent)))), /*#__PURE__*/React__default['default'].createElement(index.Scrollbar, {
+    orientation: "vertical",
+    className: cn.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')
+  }, /*#__PURE__*/React__default['default'].createElement(index.Thumb, {
+    className: "aurora-bg-neutral-700 aurora-rounded-full"
+  }))));
 });
 MultiSelectContent.displayName = 'MultiSelectContent';
 

package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_content.js.map

@@ -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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,0EAA8E;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_group_label.js

@@ -17,22 +17,22 @@ var _excluded = ["children"];
 var MultiSelectGroupLabel = function MultiSelectGroupLabel(_ref) {
   var children = _ref.children,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default['default'].createElement(box.Box, {
+  return /*#__PURE__*/React__default['default'].createElement(box.Box, _rollupPluginBabelHelpers.objectSpread2({
     paddings: {
       pl: '2',
       pt: '2',
       pb: '2',
       pr: '0'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
+  }, props), /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
     align: "center",
     spacing: "2.5"
   }, /*#__PURE__*/React__default['default'].createElement(typography.Typography, {
-    className: "aurora-whitespace-nowrap",
+    className: "aurora-whitespace-nowrap first-letter:aurora-uppercase",
     size: "s",
     color: "subtle",
     weight: "bold"
-  }, children), /*#__PURE__*/React__default['default'].createElement(divider.Divider, _rollupPluginBabelHelpers.objectSpread2({}, props))));
+  }, children), /*#__PURE__*/React__default['default'].createElement(divider.Divider, null)));
 };
 MultiSelectGroupLabel.displayName = 'MultiSelectGroupLabel';
 

package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_item.js

@@ -7,7 +7,6 @@ var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPlugi
 var cn = require('../../../utilities/cn.js');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var box = require('../../box/box.js');
-var typography = require('../../typography/typography.js');
 var checkbox = require('../../checkbox/checkbox.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -29,9 +28,13 @@ var MultiSelectItem = /*#__PURE__*/React__default['default'].forwardRef(function
   };
   return /*#__PURE__*/React__default['default'].createElement(DropdownMenuPrimitive.Item, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
     onSelect: handleSelect,
-    className: cn.cn('aurora-relative aurora-flex aurora-w-full aurora-select-none aurora-rounded-sm aurora-p-2 aurora-outline-none focus:aurora-bg-accent data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50 data-[state=checked]:aurora-font-semibold data-[highlighted]:aurora-font-semibold data-[highlighted]:aurora-bg-hover aurora-cursor-pointer aurora-rounded-6', {
-      'aurora-bg-hover': isSelected
+    className: cn.cn('aurora-relative aurora-flex aurora-w-full aurora-rounded-6 aurora-cursor-default aurora-select-none aurora-items-center aurora-rounded-sm aurora-p-2 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', {
+      'aurora-bg-hover aurora-font-semibold': isSelected,
+      'aurora-cursor-pointer active:aurora-bg-active': !isDisabled && !isReadonly
     }, className),
+    style: {
+      wordBreak: 'break-word'
+    },
     disabled: isDisabled || isReadonly
   }, props), {}, {
     ref: ref
@@ -41,10 +44,11 @@ var MultiSelectItem = /*#__PURE__*/React__default['default'].forwardRef(function
     backgroundColor: "transparent"
   }, /*#__PURE__*/React__default['default'].createElement(checkbox.Checkbox, {
     checked: isSelected
-  }), /*#__PURE__*/React__default['default'].createElement(typography.Typography, {
-    size: "s",
-    weight: "medium"
-  }, option.text)));
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-flex-col"
+  }, /*#__PURE__*/React__default['default'].createElement("p", null, option.text), !!option.additionalInfo && /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "aurora-text-xs aurora-text-subtle-light"
+  }, option.additionalInfo))));
 });
 MultiSelectItem.displayName = 'MultiSelectItem';
 

package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_item.js.map

@@ -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;"}
+{"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;"}

package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_search.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var input = require('../../input/input.js');
+var search_icon = require('../../../assets/icons/search_icon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var MultiSelectSearch = function MultiSelectSearch(props) {
+  return /*#__PURE__*/React__default['default'].createElement(input.Input, _rollupPluginBabelHelpers.objectSpread2({
+    type: "text",
+    preElement: /*#__PURE__*/React__default['default'].createElement(search_icon.SearchLineIcon, {
+      className: "aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light"
+    })
+  }, props));
+};
+
+exports.MultiSelectSearch = MultiSelectSearch;
+//# sourceMappingURL=multiselect_search.js.map

package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_search.js.map

@@ -0,0 +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;"}

package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_trigger.js

@@ -11,24 +11,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["selectedOptions", "placeholder", "hasErrors", "className"];
+var _excluded = ["hasErrors", "className", "children"];
 var MultiSelectTrigger = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
-  var selectedOptions = _ref.selectedOptions,
-    placeholder = _ref.placeholder,
-    hasErrors = _ref.hasErrors,
+  var hasErrors = _ref.hasErrors,
     className = _ref.className,
+    children = _ref.children,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default['default'].createElement(DropdownMenuPrimitive.Trigger, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
     asChild: true
   }, props), {}, {
     ref: ref
   }), /*#__PURE__*/React__default['default'].createElement("button", {
-    className: cn.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', {
+    className: cn.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', {
       '!aurora-border-danger aurora-border-2': hasErrors
     }, className)
-  }, selectedOptions.length > 0 ? selectedOptions.map(function (option) {
-    return option.text;
-  }).join(', ') : placeholder !== null && placeholder !== void 0 ? placeholder : ''));
+  }, children));
 });
 MultiSelectTrigger.displayName = 'MultiSelectTrigger';
 

package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_trigger.js.map

@@ -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;"}
+{"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;"}

package/build/cjs/packages/aurora/src/components/multiselect/hooks/use_multiselect_value.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var multiselect_utils = require('../multiselect_utils.js');
+
+var useMultiSelectValue = function useMultiSelectValue(_ref) {
+  var values = _ref.values,
+    options = _ref.options;
+  // Przechowanie aktualnie wybranych opcji w razie jakby ktoras aktualna opcja zniknela z listy options
+  var _useState = React.useState(function () {
+      return multiselect_utils.MultiSelectUtils.findValuesInOptions(values, options);
+    }),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    selectedOptions = _useState2[0],
+    _setSelectedOptions = _useState2[1];
+  var selectedOptionsRef = React.useRef(selectedOptions);
+  var setSelectedOptions = React.useCallback(function (options) {
+    selectedOptionsRef.current = options;
+    _setSelectedOptions(options);
+  }, []);
+  React.useEffect(function () {
+    if (multiselect_utils.MultiSelectUtils.areValuesEqual(values, selectedOptionsRef.current.map(function (o) {
+      return o.value;
+    }))) {
+      return;
+    }
+    var newOptions = multiselect_utils.MultiSelectUtils.findValuesInOptions(values, options);
+    setSelectedOptions(newOptions);
+  }, [options, setSelectedOptions, values]);
+  return React.useMemo(function () {
+    return {
+      selectedOptions: selectedOptions,
+      setSelectedOptions: setSelectedOptions
+    };
+  }, [selectedOptions, setSelectedOptions]);
+};
+
+exports.useMultiSelectValue = useMultiSelectValue;
+//# sourceMappingURL=use_multiselect_value.js.map

package/build/cjs/packages/aurora/src/components/multiselect/hooks/use_multiselect_value.js.map

@@ -0,0 +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;"}

package/build/cjs/packages/aurora/src/components/multiselect/multiselect.js

@@ -4,15 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var cn = require('../../utilities/cn.js');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var multiselect_content = require('./components/multiselect_content.js');
 var multiselect_trigger = require('./components/multiselect_trigger.js');
+var use_multiselect_value = require('./hooks/use_multiselect_value.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["id", "options", "placeholder", "disabled", "hasSearch", "searchPlaceholder", "onValueChange", "errors"];
+var _excluded = ["id", "options", "placeholder", "disabled", "hasSearch", "searchPlaceholder", "onValueChange", "errors", "value", "searchNotFoundContent"];
 var MultiSelect = function MultiSelect(_ref) {
   var id = _ref.id,
     options = _ref.options,
@@ -22,54 +24,42 @@ var MultiSelect = function MultiSelect(_ref) {
     searchPlaceholder = _ref.searchPlaceholder,
     onValueChange = _ref.onValueChange,
     errors = _ref.errors,
+    value = _ref.value,
+    searchNotFoundContent = _ref.searchNotFoundContent,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _React$useState = React__default['default'].useState([]),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    selectedOptions = _React$useState2[0],
-    setSelectedOptions = _React$useState2[1];
-  var _React$useState3 = React__default['default'].useState(0),
-    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-    triggerWidth = _React$useState4[0],
-    settriggerWidth = _React$useState4[1];
-  var triggerRef = React.useRef(null);
-  React.useEffect(function () {
-    if (triggerRef.current) settriggerWidth(triggerRef.current.offsetWidth);
-    var handleResize = function handleResize() {
-      if (triggerRef.current) {
-        settriggerWidth(triggerRef.current.offsetWidth);
-      }
-    };
-    window.addEventListener('resize', handleResize);
-    return function () {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-  React.useEffect(function () {
-    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(selectedOptions);
-  }, [selectedOptions]);
-  var toggleOption = function toggleOption(option) {
-    setSelectedOptions(function (prev) {
-      return prev.some(function (selected) {
-        return selected.value === option.value;
-      }) ? prev.filter(function (selected) {
-        return selected.value !== option.value;
-      }) : [].concat(_rollupPluginBabelHelpers.toConsumableArray(prev), [option]);
-    });
+  var _useMultiSelectValue = use_multiselect_value.useMultiSelectValue({
+      values: value,
+      options: options
+    }),
+    selectedOptions = _useMultiSelectValue.selectedOptions,
+    setSelectedOptions = _useMultiSelectValue.setSelectedOptions;
+  var handleChange = function handleChange(option) {
+    var newOptions = selectedOptions.some(function (selected) {
+      return selected.value === option.value;
+    }) ? selectedOptions.filter(function (selected) {
+      return selected.value !== option.value;
+    }) : [].concat(_rollupPluginBabelHelpers.toConsumableArray(selectedOptions), [option]);
+    setSelectedOptions(newOptions);
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newOptions.map(function (o) {
+      return o.value;
+    }));
   };
+  var showPlaceholder = selectedOptions.length === 0;
   return /*#__PURE__*/React__default['default'].createElement(DropdownMenuPrimitive.Root, _rollupPluginBabelHelpers.objectSpread2({}, props), /*#__PURE__*/React__default['default'].createElement(multiselect_trigger.MultiSelectTrigger, {
     id: id,
-    selectedOptions: selectedOptions,
-    placeholder: placeholder,
     disabled: disabled,
-    ref: triggerRef,
     hasErrors: !!(errors !== null && errors !== void 0 && errors.length)
-  }), /*#__PURE__*/React__default['default'].createElement(DropdownMenuPrimitive.Portal, null, /*#__PURE__*/React__default['default'].createElement(multiselect_content.MultiSelectContent, {
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: cn.cn('aurora-pointer-events-none aurora-select-none', showPlaceholder && 'aurora-text-subtle')
+  }, !showPlaceholder ? selectedOptions.map(function (option) {
+    return option.text;
+  }).join(', ') : placeholder !== null && placeholder !== void 0 ? placeholder : '')), /*#__PURE__*/React__default['default'].createElement(DropdownMenuPrimitive.Portal, null, /*#__PURE__*/React__default['default'].createElement(multiselect_content.MultiSelectContent, {
     options: options,
     selectedOptions: selectedOptions,
-    toggleOption: toggleOption,
-    triggerWidth: triggerWidth,
+    toggleOption: handleChange,
     hasSearch: hasSearch,
-    searchPlaceholder: searchPlaceholder
+    searchPlaceholder: searchPlaceholder,
+    searchNotFoundContent: searchNotFoundContent
   })));
 };
 MultiSelect.displayName = 'MultiSelect';

package/build/cjs/packages/aurora/src/components/multiselect/multiselect.js.map

@@ -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;"}
+{"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;"}

package/build/cjs/packages/aurora/src/components/multiselect/multiselect_utils.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+
+var _MultiSelectUtils;
+var MultiSelectUtils = /*#__PURE__*/_rollupPluginBabelHelpers.createClass(function MultiSelectUtils() {
+  _rollupPluginBabelHelpers.classCallCheck(this, MultiSelectUtils);
+});
+_MultiSelectUtils = MultiSelectUtils;
+_rollupPluginBabelHelpers.defineProperty(MultiSelectUtils, "isOptionVisible", function (option, search) {
+  return option.text.toLocaleLowerCase().includes(search.toLocaleLowerCase());
+});
+_rollupPluginBabelHelpers.defineProperty(MultiSelectUtils, "isHeaderVisible", function (search, options, index) {
+  var visible = false;
+  var i = index + 1;
+  while (options[i]) {
+    var curr = options[i];
+    if (curr.isHeader) {
+      break;
+    }
+    if (_MultiSelectUtils.isOptionVisible(curr, search)) {
+      visible = true;
+      break;
+    }
+    i++;
+  }
+  return visible;
+});
+_rollupPluginBabelHelpers.defineProperty(MultiSelectUtils, "findValuesInOptions", function (values, options) {
+  if (!(values !== null && values !== void 0 && values.length)) return [];
+  return options.filter(function (opt) {
+    return values.includes(opt.value);
+  });
+});
+_rollupPluginBabelHelpers.defineProperty(MultiSelectUtils, "areValuesEqual", function (oldValues, newValues) {
+  var oldSet = new Set(oldValues);
+  var newSet = new Set(newValues);
+  return (oldValues === null || oldValues === void 0 ? void 0 : oldValues.every(function (item) {
+    return newSet.has(item);
+  })) && (newValues === null || newValues === void 0 ? void 0 : newValues.every(function (item) {
+    return oldSet.has(item);
+  }));
+});
+
+exports.MultiSelectUtils = MultiSelectUtils;
+//# sourceMappingURL=multiselect_utils.js.map

package/build/cjs/packages/aurora/src/components/multiselect/multiselect_utils.js.map

@@ -0,0 +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;"}

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_content.d.ts

@@ -1,3 +1,3 @@
-import { TMultiSelectContentProps } from '../multiselect_types';
 import React from 'react';
+import { TMultiSelectContentProps } from '../multiselect_types';
 export declare const MultiSelectContent: React.ForwardRefExoticComponent<TMultiSelectContentProps & React.RefAttributes<HTMLDivElement>>;

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_content.js

@@ -2,12 +2,13 @@ import React from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../utilities/cn.js';
 import { Content } from '@radix-ui/react-dropdown-menu';
-import { Input } from '../../input/input.js';
-import { SearchLineIcon } from '../../../assets/icons/search_icon.js';
+import { Root, Viewport, Scrollbar, Thumb } from '../../../../../../external/@radix-ui/react-scroll-area/dist/index.mjs.js';
 import { MultiSelectGroupLabel } from './multiselect_group_label.js';
 import { MultiSelectItem } from './multiselect_item.js';
+import { MultiSelectSearch } from './multiselect_search.js';
+import { MultiSelectUtils } from '../multiselect_utils.js';
 
-var _excluded = ["options", "selectedOptions", "toggleOption", "triggerWidth", "hasSearch", "searchPlaceholder", "className"];
+var _excluded = ["options", "selectedOptions", "toggleOption", "triggerWidth", "hasSearch", "searchPlaceholder", "className", "searchNotFoundContent"];
 var MultiSelectContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var options = _ref.options,
     selectedOptions = _ref.selectedOptions,
@@ -16,42 +17,49 @@ var MultiSelectContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     hasSearch = _ref.hasSearch,
     searchPlaceholder = _ref.searchPlaceholder,
     className = _ref.className,
+    searchNotFoundContent = _ref.searchNotFoundContent,
     props = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    searchTerm = _React$useState2[0],
-    setSearchTerm = _React$useState2[1];
-  var filteredOptions = options.filter(function (option) {
-    var _searchTerm$toLowerCa;
-    return option.text.toLowerCase().includes((_searchTerm$toLowerCa = searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.toLowerCase()) !== null && _searchTerm$toLowerCa !== void 0 ? _searchTerm$toLowerCa : '');
-  });
+    search = _React$useState2[0],
+    setSearch = _React$useState2[1];
+  var searchVisibleItems = 0;
   return /*#__PURE__*/React.createElement(Content, _objectSpread2(_objectSpread2({
-    className: cn("aurora-z-50 aurora-bg aurora-flex aurora-flex-col aurora-gap-1 aurora-mt-1 aurora-overflow-hidden aurora-rounded-8 aurora-border aurora-p-3 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", className)
+    className: cn("aurora-w-[--radix-dropdown-menu-trigger-width] aurora-min-w-[20rem] aurora-max-h-96 aurora-z-50 aurora-bg aurora-flex aurora-flex-col aurora-gap-1 aurora-mt-1 aurora-overflow-hidden aurora-rounded-8 aurora-border aurora-p-1 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 js__aurora-select-dropdown aurora-group", className)
   }, props), {}, {
-    ref: ref,
-    style: {
-      width: "".concat(triggerWidth, "px")
-    }
-  }), hasSearch && (/*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(Root, {
+    type: "auto",
+    className: "aurora-w-full aurora-max-h-60 relative"
+  }, /*#__PURE__*/React.createElement(Viewport, {
+    className: cn('aurora-p-1 aurora-max-h-60 aurora-w-full')
+  }, hasSearch && (/*#__PURE__*/React.createElement("div", {
     className: "aurora-p-2"
-  }, /*#__PURE__*/React.createElement(Input, {
-    type: "text",
-    preElement: /*#__PURE__*/React.createElement(SearchLineIcon, {
-      className: "aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light"
-    }),
-    value: searchTerm,
+  }, /*#__PURE__*/React.createElement(MultiSelectSearch, {
+    value: search,
     tabIndex: 0,
     onChange: function onChange(e) {
       e.stopPropagation();
-      setSearchTerm(e.target.value);
+      setSearch(e.target.value);
     },
     onKeyDown: function onKeyDown(e) {
       e.stopPropagation();
     },
     placeholder: searchPlaceholder
-  }))), filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map(function (option) {
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-flex-col aurora-gap-1"
+  }, options === null || options === void 0 ? void 0 : options.map(function (option, index) {
+    var visible = true;
+    if (hasSearch && search && !option.isHeader) {
+      visible = MultiSelectUtils.isOptionVisible(option, search);
+      if (visible) searchVisibleItems++;
+    }
+    if (hasSearch && search && option.isHeader) {
+      visible = MultiSelectUtils.isHeaderVisible(search, options, index);
+    }
     return option.isHeader ? (/*#__PURE__*/React.createElement(MultiSelectGroupLabel, {
-      key: option.text
+      key: option.text,
+      className: cn(!visible && 'aurora-hidden')
     }, option.text)) : (/*#__PURE__*/React.createElement(MultiSelectItem, {
       key: "select-item-".concat(option.value),
       option: option,
@@ -60,9 +68,17 @@ var MultiSelectContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       isSelected: selectedOptions.some(function (selected) {
         return selected.value === option.value;
       }),
-      toggleOption: toggleOption
+      toggleOption: toggleOption,
+      className: cn(!visible && 'aurora-hidden')
     }, option.text));
-  }));
+  }), !!hasSearch && !!search && !searchVisibleItems && !!searchNotFoundContent && (/*#__PURE__*/React.createElement("div", {
+    className: "aurora-p-2"
+  }, searchNotFoundContent)))), /*#__PURE__*/React.createElement(Scrollbar, {
+    orientation: "vertical",
+    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')
+  }, /*#__PURE__*/React.createElement(Thumb, {
+    className: "aurora-bg-neutral-700 aurora-rounded-full"
+  }))));
 });
 MultiSelectContent.displayName = 'MultiSelectContent';
 

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_content.js.map

@@ -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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_group_label.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
-import { TDividerProps } from "../../divider/divider_types";
+import { TBoxProps } from "../../box/box_types";
 export declare const MultiSelectGroupLabel: {
-    ({ children, ...props }: PropsWithChildren<TDividerProps>): React.JSX.Element;
+    ({ children, ...props }: PropsWithChildren<TBoxProps>): React.JSX.Element;
     displayName: string;
 };