@react-fabric/form 1.0.0-beta.9 → 1.0.2

package/dist/cjs/select/Select.js

@@ -1,56 +1,59 @@
 '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 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", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "options", "groupProperty", "labelProperty", "valueProperty", "multiple", "searchable", "allowCreate", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed"];
 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 Select = function Select(_ref) {
-  var _state$query, _refs$reference$curre;
-  var ref = _ref.ref,
-    name = _ref.name,
-    value = _ref.value,
-    invalid = _ref.invalid,
-    readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
-    required = _ref.required,
-    placeholder = _ref.placeholder,
-    autoFocus = _ref.autoFocus,
-    error = _ref.error,
-    options = _ref.options,
-    groupProperty = _ref.groupProperty,
-    _ref$labelProperty = _ref.labelProperty,
-    labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
-    _ref$valueProperty = _ref.valueProperty,
-    valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
-    multiple = _ref.multiple,
-    searchable = _ref.searchable,
-    allowCreate = _ref.allowCreate,
-    createOption = _ref.createOption,
-    matcher = _ref.matcher,
-    renderer = _ref.renderer,
-    onQuery = _ref.onQuery,
-    onChange = _ref.onChange,
-    onSelect = _ref.onSelect,
-    onEnterPressed = _ref.onEnterPressed,
-    rest = _objectWithoutProperties(_ref, _excluded);
+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 Select(props) {
+  var _state$query, _refs$domReference$cu3, _refs$domReference$cu4, _refs$reference$curre;
+  var ref = props.ref,
+    name = props.name,
+    value = props.value,
+    invalid = props.invalid,
+    readOnly = props.readOnly,
+    disabled = props.disabled,
+    placeholder = props.placeholder,
+    autoFocus = props.autoFocus,
+    options = props.options,
+    defaultOpen = props.defaultOpen,
+    hideHandle = props.hideHandle,
+    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,
+    sortProperty = props.sortProperty,
+    infoProperty = props.infoProperty,
+    multiple = props.multiple,
+    searchable = props.searchable,
+    allowClear = props.allowClear,
+    allowCreate = props.allowCreate,
+    emptyDisplay = props.emptyDisplay,
+    createOption = props.createOption,
+    matcher = props.matcher,
+    renderer = props.renderer,
+    onQuery = props.onQuery,
+    onChange = props.onChange,
+    onSelect = props.onSelect,
+    onEnterPressed = props.onEnterPressed;
   var _useSelect = useSelect.useSelect({
       value: value,
       options: options,
       multiple: multiple,
+      defaultOpen: defaultOpen,
       groupProperty: groupProperty,
       labelProperty: labelProperty,
       valueProperty: valueProperty,
+      sortProperty: sortProperty,
       allowCreate: allowCreate,
       createOption: createOption,
       matcher: matcher,
@@ -68,11 +71,11 @@ var Select = function Select(_ref) {
     handleQuery = _useSelect.handleQuery,
     setItemRef = _useSelect.setItemRef,
     setActiveIndex = _useSelect.setActiveIndex;
-  var dropdownKey = react.useId();
+  var dropdownKeyId = react.useId();
   var _useFloating = react$1.useFloating({
       open: state.open,
-      onOpenChange: function onOpenChange(open, evt, reason) {
-        !open && (listRef.current = []);
+      onOpenChange: function onOpenChange(open) {
+        if (!open) listRef.current = [];
         setOpen(open);
       },
       strategy: "fixed",
@@ -84,7 +87,8 @@ var Select = function Select(_ref) {
     }),
     context = _useFloating.context,
     floatingStyles = _useFloating.floatingStyles,
-    refs = _useFloating.refs;
+    refs = _useFloating.refs,
+    placement = _useFloating.placement;
 
   // floating interactions
   var click = react$1.useClick(context, {});
@@ -110,8 +114,8 @@ var Select = function Select(_ref) {
       });
     },
     onMatch: function onMatch(index) {
-      state.open && setActiveIndex(index);
-      !searchable && !multiple && !state.open && handleChange(listContentRef.current[index]);
+      if (state.open) setActiveIndex(index);
+      if (!searchable && !multiple && !state.open) handleChange(listContentRef.current[index]);
     }
   });
   var _useInteractions = react$1.useInteractions([dismiss, searchable ? undefined : click, navigation, typeahead]),
@@ -123,13 +127,13 @@ var Select = function Select(_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;
         }
         handleQuery("");
-        setOpen(false);
+        // setOpen(false);
       },
       onKeyDown: function onKeyDown(evt) {
         if (evt.key === "Enter") {
@@ -140,34 +144,40 @@ var Select = function Select(_ref) {
             return false;
           } else if (state.query) {
             handleQuery("");
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
           } else {
             onEnterPressed === null || onEnterPressed === void 0 || onEnterPressed(evt);
           }
         } else if (evt.key === "Tab" && state.activeIndex !== null) {
           handleChange(listContentRef.current[state.activeIndex]);
         } else if (evt.key === "Backspace") {
-          !state.query && handleRemove();
+          if (!state.query) handleRemove();
         } else if (!searchable || ["ArrowUp", "ArrowDown"].includes(evt.key)) {
           if (["ArrowUp", "ArrowDown"].includes(evt.key) && state.activeIndex === null) {
             setActiveIndex(state.selectedIndex);
           }
           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, state.activeIndex, state.query, state.selectedIndex, searchable, handleChange, listContentRef, onEnterPressed, handleRemove, setActiveIndex]);
   var floatingProps = react.useMemo(function () {
     return getFloatingProps({
-      "data-select-dropdown": dropdownKey
+      // @ts-expect-error ignore
+      "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;
     return getItemProps({
+      // @ts-expect-error ignore
       "data-selected": selected ? true : undefined,
       onClick: function onClick() {
         handleChange(item);
@@ -177,50 +187,73 @@ var Select = function Select(_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", {
-        className: "self-center pointer-events-none select-none",
-        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]);
+  }, [state.value, state.query, renderer, labelProperty, handleRemove]);
   var openDropdown = react.useCallback(function () {
     var _refs$domReference$cu2;
     setOpen(true);
     (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 || (_refs$domReference$cu2 = _refs$domReference$cu2.querySelector("input")) === null || _refs$domReference$cu2 === void 0 || _refs$domReference$cu2.focus();
-  }, []);
+  }, [refs.domReference, setOpen]);
   react.useLayoutEffect(function () {
-    state.open && setTimeout(function () {
-      var _listRef$current$stat;
-      state.selectedIndex && ((_listRef$current$stat = listRef.current[state.selectedIndex]) === null || _listRef$current$stat === void 0 ? void 0 : _listRef$current$stat.scrollIntoView({
-        block: "center"
-      }));
-    }, 100);
-  }, [state.open]);
+    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(InputWrapper.InputWrapper, _objectSpread(_objectSpread({
-    showClear: !utilities.isEmpty(state.value),
+    showClear: allowClear && !utilities.isEmpty(state.value),
     onClear: handleChange,
-    invalid: invalid,
-    readOnly: readOnly,
-    disabled: disabled,
-    required: required,
-    error: error,
-    wrapperRef: refs.setReference,
-    className: state.open ? "!z-[99]" : ""
-  }, rest), {}, {
+    isOpen: state.open,
+    ref: function ref(el) {
+      return refs.setReference(el);
+    },
+    className: utilities.cn(state.open ? "z-99!" : "", "rounded-capped", state.open && (placement === "top" ? "rounded-t-none" : "rounded-b-none"))
+  }, getProps.getWrapperProps(props)), {}, {
+    actionButton: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [!state.loading && !hideHandle && /*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "button",
+        className: "size-fit leading-0 cursor-pointer",
+        onClick: function onClick() {
+          return !disabled && openDropdown();
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+          className: utilities.cn("flex-content py-2 z-0 order-9 text-muted cursor-pointer self-stretch flex items-center h-auto", state.open && "-scale-y-100 pointer-events-none", disabled && "pointer-events-none"),
+          icon: "icon-[mdi--chevron-down]"
+        })
+      }), state.loading && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        className: utilities.cn("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
+        icon: "icon-[svg-spinners--eclipse]"
+      })]
+    }),
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
       role: "none",
       "data-select-display": "true",
-      className: classNames("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")
+      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;
@@ -235,31 +268,26 @@ var Select = function Select(_ref) {
         name: name,
         size: 1,
         ref: ref,
+        autoComplete: "off",
         autoFocus: autoFocus,
-        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+        className: utilities.cn("appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer", disabled && "cursor-not-allowed pointer-events-none", multiple ? "min-w-24" : "min-w-2"),
         placeholder: utilities.isEmpty(state.value) ? placeholder : "",
         onChange: function onChange(evt) {
           return handleQuery(evt.target.value);
         }
       })]
-    })), !state.loading && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-      className: classNames("flex-content p-2 z-0 order-9 text-muted cursor-pointer self-stretch flex items-center h-auto", state.open && "-scale-y-100 pointer-events-none", disabled && "pointer-events-none"),
-      onClick: function onClick() {
-        return !disabled && openDropdown();
-      },
-      icon: core.CoreIcons.chevronDown
-    }), state.loading && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-      animate: "spin",
-      className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
-      icon: core.CoreIcons.spinner
-    }), state.open && !state.loading && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+    })), state.open && !state.loading && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+      root: (_refs$domReference$cu3 = (_refs$domReference$cu4 = refs.domReference.current) === null || _refs$domReference$cu4 === void 0 ? void 0 : _refs$domReference$cu4.closest(".theme-base")) !== null && _refs$domReference$cu3 !== void 0 ? _refs$domReference$cu3 : undefined,
       children: /*#__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: "outline shadow-lg max-h-[40vh] z-[var(--z-popover)]",
+          ref: function ref(el) {
+            return refs.setFloating(el);
+          },
+          className: utilities.cn("outline rounded-capped shadow-lg max-h-[40vh] z-(--z-popover)", state.open && (placement === "top" ? "rounded-b-none" : "rounded-t-none")),
           style: _objectSpread({
             width: (_refs$reference$curre = refs.reference.current) === null || _refs$reference$curre === void 0 ? void 0 : _refs$reference$curre.getBoundingClientRect().width
           }, floatingStyles)
@@ -270,6 +298,8 @@ var Select = function Select(_ref) {
           labelProperty: labelProperty,
           itemRef: setItemRef,
           itemProps: makeItemProps,
+          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;
@@ -278,6 +308,6 @@ var Select = function Select(_ref) {
       })
     })]
   }));
-};
+}
 
 exports.Select = Select;

package/dist/cjs/select/helpers.js

@@ -25,17 +25,17 @@ var utilities = require('@react-fabric/utilities');
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var makeOption = function makeOption(query) {
+function makeOption(query) {
   return query;
-};
-var getSelectedValue = function getSelectedValue(value, emptyValue) {
+}
+function getSelectedValue(value, emptyValue) {
   var _ref, _value$valueProperty;
   var valueProperty = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
   return utilities.isArray(value) ? value.map(function (val) {
     var _val$valueProperty;
     return (_val$valueProperty = val[valueProperty]) !== null && _val$valueProperty !== void 0 ? _val$valueProperty : val;
-  }) : (_ref = (_value$valueProperty = value === null || value === void 0 ? void 0 : value[valueProperty]) !== null && _value$valueProperty !== void 0 ? _value$valueProperty : value) !== null && _ref !== void 0 ? _ref : emptyValue;
-};
+  }).filter(Boolean) : (_ref = (_value$valueProperty = value === null || value === void 0 ? void 0 : value[valueProperty]) !== null && _value$valueProperty !== void 0 ? _value$valueProperty : value) !== null && _ref !== void 0 ? _ref : emptyValue;
+}
 
 exports.getSelectedValue = getSelectedValue;
 exports.makeOption = makeOption;