@react-fabric/form 1.0.0-beta.8 → 1.0.1

package/dist/cjs/select/List.js

@@ -1,66 +1,60 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var react$1 = require('@floating-ui/react');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
 var react = require('react');
-var FieldWrapper = require('../internal/FieldWrapper.js');
 var InputWrapper = require('../internal/InputWrapper.js');
+var getProps = require('../utils/getProps.js');
 var Options = require('./Options.js');
 var useSelect = require('./useSelect.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "name", "value", "readOnly", "disabled", "required", "placeholder", "autoFocus", "options", "height", "groupProperty", "labelProperty", "valueProperty", "multiple", "allowCreate", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed", "invalid", "error", "allowClear", "decorateStart", "decorateEnd", "data-inner", "data-hide-selected"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var List = function List(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function List(props) {
   var _state$query;
-  _ref.ref;
-    var name = _ref.name,
-    value = _ref.value,
-    readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
-    required = _ref.required,
-    placeholder = _ref.placeholder;
-    _ref.autoFocus;
-    var options = _ref.options,
-    height = _ref.height,
-    groupProperty = _ref.groupProperty,
-    labelProperty = _ref.labelProperty,
-    valueProperty = _ref.valueProperty,
-    multiple = _ref.multiple,
-    allowCreate = _ref.allowCreate,
-    createOption = _ref.createOption,
-    matcher = _ref.matcher,
-    renderer = _ref.renderer,
-    onQuery = _ref.onQuery,
-    onChange = _ref.onChange,
-    onSelect = _ref.onSelect,
-    onEnterPressed = _ref.onEnterPressed,
-    invalid = _ref.invalid,
-    error = _ref.error;
-    _ref.allowClear;
-    _ref.decorateStart;
-    _ref.decorateEnd;
-    var isInner = _ref["data-inner"],
-    hideSelected = _ref["data-hide-selected"],
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var Wrapper = react.useMemo(function () {
-    return isInner ? react.Fragment : FieldWrapper.FieldWrapper;
-  }, [isInner]);
-  var wrapperProps = react.useMemo(function () {
-    return isInner ? {} : _objectSpread({}, rest);
-  }, [isInner, rest]);
+  var ref = props.ref,
+    name = props.name,
+    value = props.value,
+    readOnly = props.readOnly,
+    disabled = props.disabled,
+    placeholder = props.placeholder,
+    autoFocus = props.autoFocus,
+    options = props.options,
+    height = props.height,
+    groupProperty = props.groupProperty,
+    _props$labelProperty = props.labelProperty,
+    labelProperty = _props$labelProperty === void 0 ? "label" : _props$labelProperty,
+    _props$valueProperty = props.valueProperty,
+    valueProperty = _props$valueProperty === void 0 ? "value" : _props$valueProperty,
+    infoProperty = props.infoProperty,
+    sortProperty = props.sortProperty,
+    multiple = props.multiple,
+    allowCreate = props.allowCreate,
+    allowClear = props.allowClear,
+    searchable = props.searchable,
+    createOption = props.createOption,
+    matcher = props.matcher,
+    renderer = props.renderer,
+    onQuery = props.onQuery,
+    onChange = props.onChange,
+    onSelect = props.onSelect,
+    onEnterPressed = props.onEnterPressed,
+    emptyDisplay = props.emptyDisplay,
+    invalid = props.invalid,
+    isInner = props["data-inner"],
+    hideSelected = props["data-hide-selected"];
   var _useSelect = useSelect.useSelect({
       value: value,
       options: options,
       multiple: multiple,
+      alwaysOpen: true,
       groupProperty: groupProperty,
       labelProperty: labelProperty,
       valueProperty: valueProperty,
+      sortProperty: sortProperty,
       allowCreate: allowCreate,
       createOption: createOption,
       matcher: matcher,
@@ -76,8 +70,9 @@ var List = function List(_ref) {
     handleRemove = _useSelect.handleRemove,
     handleQuery = _useSelect.handleQuery,
     setItemRef = _useSelect.setItemRef,
+    clearActiveIndex = _useSelect.clearActiveIndex,
     setActiveIndex = _useSelect.setActiveIndex;
-  var dropdownKey = react.useId();
+  var dropdownKeyId = react.useId();
   var _useFloating = react$1.useFloating({
       open: true,
       placement: "bottom",
@@ -107,7 +102,7 @@ var List = function List(_ref) {
       });
     },
     onMatch: function onMatch(index) {
-      state.open && setActiveIndex(index);
+      if (state.open) setActiveIndex(index);
     }
   });
   var _useInteractions = react$1.useInteractions([navigation, typeahead]),
@@ -119,7 +114,7 @@ var List = function List(_ref) {
     return _objectSpread(_objectSpread({}, props), {}, {
       onBlur: function onBlur(evt) {
         var _evt$relatedTarget;
-        if ((_evt$relatedTarget = evt.relatedTarget) !== null && _evt$relatedTarget !== void 0 && _evt$relatedTarget.closest("[data-select-dropdown=\"".concat(dropdownKey, "\"]"))) {
+        if ((_evt$relatedTarget = evt.relatedTarget) !== null && _evt$relatedTarget !== void 0 && _evt$relatedTarget.closest("[data-select-dropdown=\"".concat(dropdownKeyId, "\"]"))) {
           var _refs$domReference$cu;
           (_refs$domReference$cu = refs.domReference.current) === null || _refs$domReference$cu === void 0 || (_refs$domReference$cu = _refs$domReference$cu.querySelector("input")) === null || _refs$domReference$cu === void 0 || _refs$domReference$cu.focus();
           return;
@@ -137,24 +132,26 @@ var List = function List(_ref) {
             onEnterPressed === null || onEnterPressed === void 0 || onEnterPressed(evt);
           }
         } else if (evt.key === "Backspace") {
-          !state.query && handleRemove();
-        } else if (["ArrowUp", "ArrowDown"].includes(evt.key)) {
-          if (state.activeIndex === null) {
-            setActiveIndex(state.selectedIndex);
+          if (!state.query) handleRemove();
+        } else if (!searchable || ["ArrowUp", "ArrowDown"].includes(evt.key)) {
+          if (["ArrowUp", "ArrowDown"].includes(evt.key) && state.activeIndex === null) {
+            var _state$selectedIndex;
+            setActiveIndex((_state$selectedIndex = state.selectedIndex) !== null && _state$selectedIndex !== void 0 ? _state$selectedIndex : 0);
           }
           setTimeout(function () {
             var _props$onKeyDown;
+            // @ts-expect-error ignore
             (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, evt);
           }, 50);
         }
       }
     });
-  }, [getReferenceProps, onEnterPressed, handleQuery, refs, state.query, state.activeIndex]);
+  }, [getReferenceProps, dropdownKeyId, handleQuery, refs.domReference, searchable, state.activeIndex, state.query, state.selectedIndex, handleChange, listContentRef, onEnterPressed, handleRemove, setActiveIndex]);
   var floatingProps = react.useMemo(function () {
     return getFloatingProps({
-      "data-select-dropdown": dropdownKey
+      "data-select-dropdown": dropdownKeyId
     });
-  }, [getFloatingProps]);
+  }, [dropdownKeyId, getFloatingProps]);
   var makeItemProps = react.useCallback(function (item) {
     var _state$value, _state$value$includes;
     var selected = utilities.isArray(state.value) ? (_state$value = state.value) === null || _state$value === void 0 || (_state$value$includes = _state$value.includes) === null || _state$value$includes === void 0 ? void 0 : _state$value$includes.call(_state$value, item) : state.value === item;
@@ -170,72 +167,108 @@ var List = function List(_ref) {
   var displayValue = react.useMemo(function () {
     if (utilities.isArray(state.value)) {
       return state.value.map(function (item, index) {
-        var _ref2, _renderer;
-        return /*#__PURE__*/jsxRuntime.jsx(core.Chip, {
-          onRemove: function onRemove() {
-            return handleRemove(index);
-          },
-          children: (_ref2 = (_renderer = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer !== void 0 ? _renderer : item[labelProperty]) !== null && _ref2 !== void 0 ? _ref2 : item
-        }, index);
+        var _ref, _renderer;
+        return (
+          /*#__PURE__*/
+          // eslint-disable-next-line @eslint-react/no-array-index-key
+          jsxRuntime.jsx(core.Chip, {
+            onRemove: function onRemove() {
+              return handleRemove(index);
+            },
+            children: (_ref = (_renderer = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer !== void 0 ? _renderer : item[labelProperty]) !== null && _ref !== void 0 ? _ref : item
+          }, index)
+        );
       });
     } else if (!utilities.isEmpty(state.value) && !state.query) {
-      var _ref3, _renderer2;
+      var _ref2, _renderer2;
       return /*#__PURE__*/jsxRuntime.jsx("span", {
-        children: (_ref3 = (_renderer2 = renderer === null || renderer === void 0 ? void 0 : renderer(state.value)) !== null && _renderer2 !== void 0 ? _renderer2 : state.value[labelProperty]) !== null && _ref3 !== void 0 ? _ref3 : state.value
+        className: "self-center pointer-events-none select-none truncate leading-tight",
+        children: (_ref2 = (_renderer2 = renderer === null || renderer === void 0 ? void 0 : renderer(state.value)) !== null && _renderer2 !== void 0 ? _renderer2 : state.value[labelProperty]) !== null && _ref2 !== void 0 ? _ref2 : state.value
       });
     }
-  }, [state.value, state.query, placeholder, renderer]);
-  return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(InputWrapper.InputWrapper, {
-      showClear: !utilities.isEmpty(state.value),
+  }, [state.value, state.query, renderer, labelProperty, handleRemove]);
+  react.useLayoutEffect(function () {
+    if (state.open) {
+      var tmr = setTimeout(function () {
+        var _listRef$current$stat;
+        if (state.selectedIndex) (_listRef$current$stat = listRef.current[state.selectedIndex]) === null || _listRef$current$stat === void 0 || _listRef$current$stat.scrollIntoView({
+          block: "nearest"
+        });
+      }, 100);
+      return function () {
+        clearTimeout(tmr);
+      };
+    }
+  }, [listRef, state.open, state.selectedIndex]);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(InputWrapper.InputWrapper, _objectSpread(_objectSpread({
+      showClear: allowClear && !utilities.isEmpty(state.value),
       onClear: handleChange,
-      invalid: invalid,
-      readOnly: readOnly,
-      disabled: disabled,
-      required: required,
-      error: error,
-      className: "z-1 rounded-b-none",
-      "data-inner": true,
-      wrapperRef: refs.setReference,
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      ref: function ref(el) {
+        return refs.setReference(el);
+      },
+      className: "z-1 rounded-capped rounded-b-none outline"
+    }, getProps.getWrapperProps(props)), {}, {
+      borderless: !!isInner,
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+        role: "none",
         "data-select-display": "true",
-        className: "group flex-1 py-1 px-2 truncate text-start flex gap-1 flex-wrap",
-        children: [!hideSelected && displayValue, /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread(_objectSpread({
+        className: utilities.cn("group flex-1 py-1 px-2 truncate text-start flex gap-1 relative min-h-5 justify-start", multiple ? "flex-wrap" : "flex-nowrap overflow-hidden")
+      }, referenceProps), {}, {
+        onMouseUp: function onMouseUp(e) {
+          var _e$currentTarget$quer;
+          return (_e$currentTarget$quer = e.currentTarget.querySelector("input")) === null || _e$currentTarget$quer === void 0 ? void 0 : _e$currentTarget$quer.focus();
+        },
+        children: [!hideSelected && displayValue, /*#__PURE__*/jsxRuntime.jsx("input", {
+          readOnly: !searchable || readOnly,
           disabled: disabled,
           value: (_state$query = state.query) !== null && _state$query !== void 0 ? _state$query : "",
           "aria-invalid": invalid,
           "data-testid": name,
           name: name,
-          className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24", disabled && "cursor-not-allowed pointer-events-none"),
-          placeholder: utilities.isEmpty(state.value) ? placeholder : ""
-        }, referenceProps), {}, {
+          size: 1,
+          ref: ref,
+          autoComplete: "off",
+          autoFocus: autoFocus,
+          className: utilities.cn("appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+          placeholder: !hideSelected && !utilities.isEmpty(state.value) ? "" : placeholder,
           onChange: function onChange(evt) {
             return handleQuery(evt.target.value);
           }
-        }))]
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
+        })]
+      }))
+    })), /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
       context: context,
       initialFocus: -1,
       visuallyHiddenDismiss: true,
+      closeOnFocusOut: true,
       children: /*#__PURE__*/jsxRuntime.jsx(Options.Options, _objectSpread(_objectSpread({
-        ref: refs.setFloating,
-        className: classNames("max-h-96 z-0 rounded-capped rounded-t-none outline", disabled && "pointer-events-none opacity-65"),
+        ref: function ref(el) {
+          return refs.setFloating(el);
+        },
+        onMouseOut: function onMouseOut() {
+          return clearActiveIndex();
+        },
+        className: utilities.cn("max-h-96 z-0 rounded-capped! rounded-t-none! outline peer-focus-within:outline-primary-500", disabled && "pointer-events-none opacity-65"),
         style: {
           height: height
         }
       }, floatingProps), {}, {
         items: state.items,
         active: state.activeIndex,
+        valueProperty: valueProperty,
+        labelProperty: labelProperty,
         itemRef: setItemRef,
         itemProps: makeItemProps,
-        children: function children(item) {
-          var _ref4, _renderer3;
-          return (_ref4 = (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : item[labelProperty]) !== null && _ref4 !== void 0 ? _ref4 : item;
+        empty: emptyDisplay,
+        info: utilities.getByPath(state.activeItem, infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"),
+        children: function children(item, label) {
+          var _renderer3;
+          return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
         }
       }))
     })]
-  }));
-};
+  });
+}
 
 exports.List = List;

package/dist/cjs/select/Options.js

@@ -1,76 +1,80 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
-var classNames = require('classnames');
+var utilities = require('@react-fabric/utilities');
 var reactI18next = require('react-i18next');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "style", "items", "active", "className", "itemRef", "empty", "valueProperty", "labelProperty", "itemProps", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Options = function Options(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function Options(_ref) {
   var ref = _ref.ref,
     style = _ref.style,
     items = _ref.items,
     active = _ref.active,
     className = _ref.className,
     itemRef = _ref.itemRef,
-    empty = _ref.empty;
-    _ref.valueProperty;
-    var _ref$labelProperty = _ref.labelProperty,
+    empty = _ref.empty,
+    info = _ref.info,
+    _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
     itemProps = _ref.itemProps,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    onMouseOut = _ref.onMouseOut;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     ref: ref,
-    className: classNames("bg-base select-none overflow-x-hidden overflow-y-auto", className),
-    style: style
-  }, rest), {}, {
-    children: [items.length === 0 && (empty !== null && empty !== void 0 ? empty : /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
-      message: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
-        i18nKey: "form:select.emptyList"
-      })
-    })), items.map(function (item, index) {
-      var _item$labelProperty;
-      if (item.___group___) return /*#__PURE__*/jsxRuntime.jsx("p", {
-        className: "px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t",
-        children: item.label
-      }, index);
-      if (item.___create___) return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
-        role: "none",
-        tabIndex: active === index ? 0 : -1,
-        ref: function ref(el) {
-          return itemRef(index, el);
-        },
-        "data-active": active === index ? true : undefined,
-        className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none", "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline")
-      }, itemProps(item)), {}, {
-        children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
-          i18nKey: "form:select.createOption",
-          values: {
-            query: item.value
-          },
-          components: [/*#__PURE__*/jsxRuntime.jsx("strong", {
-            children: "query"
-          }, "t0")]
+    className: utilities.cn("bg-default select-none flex flex-col overflow-hidden", className),
+    style: style,
+    onMouseLeave: onMouseOut,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: utilities.cn("overflow-x-hidden overflow-y-auto flex-1"),
+      children: [items.length === 0 && (empty !== null && empty !== void 0 ? empty : /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
+        message: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "form:select.emptyList"
         })
-      }), index);
-      return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
-        role: "none",
-        tabIndex: active === index ? 0 : -1,
-        ref: function ref(el) {
-          return itemRef(index, el);
-        },
-        "data-active": active === index ? true : undefined,
-        className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer", "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline")
-      }, itemProps(item)), {}, {
-        children: children(item, (_item$labelProperty = item[labelProperty]) !== null && _item$labelProperty !== void 0 ? _item$labelProperty : item)
-      }), index);
+      })), items.map(function (item, index) {
+        var _item$value, _getByPath;
+        if (item.___group___) return /*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-default border-t",
+          children: item.label
+        }, index);
+        if (item.___create___) return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+          role: "none",
+          tabIndex: active === index ? 0 : -1,
+          ref: function ref(el) {
+            return itemRef(index, el);
+          },
+          "data-active": active === index ? true : undefined,
+          className: utilities.cn("block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none", "data-active:bg-primary-200 data-selected:bg-primary-600 data-selected:text-white data-active:data-selected:underline")
+        }, itemProps(item)), {}, {
+          children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+            i18nKey: "form:select.createOption",
+            values: {
+              query: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item
+            },
+            components: [/*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: "query"
+            }, "t0")]
+          })
+        }), index);
+        return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+          role: "none",
+          tabIndex: active === index ? 0 : -1,
+          ref: function ref(el) {
+            return itemRef(index, el);
+          },
+          "data-active": active === index ? true : undefined,
+          className: utilities.cn("block text-start truncate px-2 py-1 leading-normal cursor-pointer", "active:bg-primary-200 data-active:bg-primary-200 data-selected:bg-primary-600 data-selected:text-white data-active:data-selected:underline")
+        }, itemProps(item)), {}, {
+          children: children(item, (_getByPath = utilities.getByPath(item, labelProperty)) !== null && _getByPath !== void 0 ? _getByPath : "".concat(item))
+        }), index);
+      })]
+    }), info && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "px-2 py-1 text-sm bg-dimmed text-muted",
+      children: info
     })]
-  }));
-};
+  });
+}
 
 exports.Options = Options;