@tamagui/select 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/SelectItem.cjs

@@ -2,33 +2,35 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var SelectItem_exports = {};
 __export(SelectItem_exports, {
   SelectItem: () => SelectItem,
@@ -36,140 +38,190 @@ __export(SelectItem_exports, {
   useSelectItemContext: () => useSelectItemContext
 });
 module.exports = __toCommonJS(SelectItem_exports);
-var import_compose_refs = require("@tamagui/compose-refs"),
-  import_constants = require("@tamagui/constants"),
-  import_core = require("@tamagui/core"),
-  import_list_item = require("@tamagui/list-item"),
-  React = __toESM(require("react"), 1),
-  import_context = require("./context.cjs"),
-  import_jsx_runtime = require("react/jsx-runtime");
-const ITEM_NAME = "SelectItem",
-  {
-    Provider: SelectItemContextProvider,
-    useStyledContext: useSelectItemContext
-  } = (0, import_core.createStyledContext)(null, ITEM_NAME),
-  SelectItem = import_list_item.ListItem.Frame.styleable(function (props, forwardedRef) {
-    const {
-        scope,
-        value,
-        disabled = !1,
-        textValue: textValueProp,
-        index,
-        ...restProps
-      } = props,
-      context = (0, import_context.useSelectItemParentContext)(scope),
-      {
-        setSelectedIndex,
-        listRef,
-        setOpen,
-        onChange,
-        activeIndexSubscribe,
-        valueSubscribe,
-        allowMouseUpRef,
-        allowSelectRef,
-        setValueAtIndex,
-        selectTimeoutRef,
-        dataRef,
-        interactions,
-        shouldRenderWebNative,
-        size,
-        onActiveChange,
-        initialValue,
-        setActiveIndexFast
-      } = context,
-      [isSelected, setSelected] = React.useState(initialValue === value);
-    (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      initialValue === value && setSelectedIndex(index);
-    }, []), React.useEffect(() => activeIndexSubscribe(i => {
-      index === i && (onActiveChange(value, index), import_constants.isWeb && listRef?.current[index]?.focus());
-    }), [index]), React.useEffect(() => valueSubscribe(val => {
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_core = require("@tamagui/core");
+var import_list_item = require("@tamagui/list-item");
+var React = __toESM(require("react"), 1);
+var import_context = require("./context.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const ITEM_NAME = "SelectItem";
+const {
+  Provider: SelectItemContextProvider,
+  useStyledContext: useSelectItemContext
+} = (0, import_core.createStyledContext)(null, ITEM_NAME);
+const SelectItem = import_list_item.ListItem.Frame.styleable(function SelectItem2(props, forwardedRef) {
+  const {
+    scope,
+    value,
+    disabled = false,
+    textValue: textValueProp,
+    index,
+    ...restProps
+  } = props;
+  const context = (0, import_context.useSelectItemParentContext)(scope);
+  const {
+    setSelectedIndex,
+    listRef,
+    setOpen,
+    onChange,
+    activeIndexSubscribe,
+    activeIndexRef,
+    valueSubscribe,
+    allowMouseUpRef,
+    allowSelectRef,
+    setValueAtIndex,
+    selectTimeoutRef,
+    dataRef,
+    interactions,
+    shouldRenderWebNative,
+    size,
+    onActiveChange,
+    initialValue,
+    setActiveIndexFast
+  } = context;
+  const [isSelected, setSelected] = React.useState(initialValue === value);
+  (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    if (initialValue === value) {
+      setSelectedIndex(index);
+    }
+  }, []);
+  React.useEffect(() => {
+    const handleActiveIndex = i => {
+      if (index === i) {
+        onActiveChange(value, index);
+        if (import_constants.isWeb) {
+          requestAnimationFrame(() => {
+            listRef?.current[index]?.focus();
+          });
+        }
+      }
+    };
+    const currentActiveIndex = activeIndexRef?.current;
+    if (currentActiveIndex !== null && currentActiveIndex !== void 0) {
+      handleActiveIndex(currentActiveIndex);
+    }
+    return activeIndexSubscribe(handleActiveIndex);
+  }, [index]);
+  React.useEffect(() => {
+    return valueSubscribe(val => {
       setSelected(val === value);
-    }), [value]);
-    const textId = React.useId(),
-      refCallback = React.useCallback(node => {
-        import_constants.isWeb && node instanceof HTMLElement && listRef && (listRef.current[index] = node);
-      }, [index, listRef]),
-      composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, refCallback);
-    (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      setValueAtIndex(index, value);
-    }, [index, setValueAtIndex, value]);
-    function handleSelect() {
-      setSelectedIndex(index), onChange(value), setOpen(!1);
+    });
+  }, [value]);
+  const textId = React.useId();
+  const refCallback = React.useCallback(node => {
+    if (!import_constants.isWeb) return;
+    if (node instanceof HTMLElement) {
+      if (listRef) {
+        listRef.current[index] = node;
+      }
     }
-    const selectItemProps = React.useMemo(() => interactions ? interactions.getItemProps({
+  }, [index, listRef]);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, refCallback);
+  (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    setValueAtIndex(index, value);
+  }, [index, setValueAtIndex, value]);
+  function handleSelect() {
+    setSelectedIndex(index);
+    onChange(value);
+    setOpen(false);
+  }
+  const selectItemProps = React.useMemo(() => {
+    return interactions ? interactions.getItemProps({
       onTouchMove() {
-        allowSelectRef.current = !0, allowMouseUpRef.current = !1;
+        allowSelectRef.current = true;
+        allowMouseUpRef.current = false;
       },
       onTouchEnd() {
-        allowSelectRef.current = !1, allowMouseUpRef.current = !0;
+        allowSelectRef.current = false;
+        allowMouseUpRef.current = true;
       },
       onKeyDown(event) {
-        if (event.key === "Enter" || event.key === " " && !dataRef?.current.typing) event.preventDefault(), handleSelect();else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-          event.preventDefault(), event.stopPropagation();
+        if (event.key === "Enter" || event.key === " " && !dataRef?.current.typing) {
+          event.preventDefault();
+          handleSelect();
+        } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          event.stopPropagation();
           const itemCount = listRef?.current.length ?? 0;
           if (itemCount === 0) return;
           let nextIndex;
-          event.key === "ArrowDown" ? nextIndex = index + 1 >= itemCount ? 0 : index + 1 : nextIndex = index - 1 < 0 ? itemCount - 1 : index - 1, setActiveIndexFast?.(nextIndex);
-        } else allowSelectRef.current = !0;
+          if (event.key === "ArrowDown") {
+            nextIndex = index + 1 >= itemCount ? 0 : index + 1;
+          } else {
+            nextIndex = index - 1 < 0 ? itemCount - 1 : index - 1;
+          }
+          setActiveIndexFast?.(nextIndex);
+        } else {
+          allowSelectRef.current = true;
+        }
       },
       onClick() {
-        allowSelectRef.current && handleSelect();
+        if (allowSelectRef.current) {
+          handleSelect();
+        }
       },
       onMouseUp() {
         if (!allowMouseUpRef.current) {
-          allowMouseUpRef.current = !0, allowSelectRef.current = !0;
+          allowMouseUpRef.current = true;
+          allowSelectRef.current = true;
           return;
         }
-        allowSelectRef.current && handleSelect(), clearTimeout(selectTimeoutRef.current), selectTimeoutRef.current = setTimeout(() => {
-          allowSelectRef.current = !0;
+        if (allowSelectRef.current) {
+          handleSelect();
+        }
+        clearTimeout(selectTimeoutRef.current);
+        selectTimeoutRef.current = setTimeout(() => {
+          allowSelectRef.current = true;
         });
       }
     }) : {
       onPress: handleSelect
-    }, [handleSelect, index, listRef, setActiveIndexFast]);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectItemContextProvider, {
-      scope,
+    };
+  }, [handleSelect, index, listRef, setActiveIndexFast]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectItemContextProvider, {
+    scope,
+    value,
+    textId: textId || "",
+    isSelected,
+    children: shouldRenderWebNative ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("option", {
       value,
-      textId: textId || "",
-      isSelected,
-      children: shouldRenderWebNative ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("option", {
-        value,
-        children: props.children
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_list_item.ListItem.Frame, {
-        render: "div",
-        componentName: ITEM_NAME,
-        ref: composedRefs,
-        role: "option",
-        "aria-labelledby": textId,
-        "aria-selected": isSelected,
-        "data-state": isSelected ? "active" : "inactive",
-        "aria-disabled": disabled || void 0,
-        "data-disabled": disabled ? "" : void 0,
-        tabIndex: disabled ? void 0 : -1,
-        ...(!props.unstyled && {
-          cursor: "default",
-          size,
-          outlineOffset: -0.5,
-          zIndex: 100,
-          hoverStyle: {
-            backgroundColor: "$backgroundHover"
-          },
-          pressStyle: {
-            backgroundColor: "$backgroundPress"
-          },
-          focusStyle: {
-            backgroundColor: "$backgroundFocus"
-          },
-          focusVisibleStyle: {
-            outlineColor: "$outlineColor",
-            outlineWidth: 1,
-            outlineStyle: "solid"
-          }
-        }),
-        ...restProps,
-        ...selectItemProps
-      })
-    });
-  }, {
-    disableTheme: !0
-  });
+      children: props.children
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_list_item.ListItem.Frame, {
+      render: "div",
+      componentName: ITEM_NAME,
+      ref: composedRefs,
+      role: "option",
+      "aria-labelledby": textId,
+      "aria-selected": isSelected,
+      "data-state": isSelected ? "active" : "inactive",
+      "aria-disabled": disabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      tabIndex: disabled ? void 0 : -1,
+      ...(!props.unstyled && {
+        cursor: "default",
+        size,
+        outlineOffset: -0.5,
+        zIndex: 100,
+        hoverStyle: {
+          backgroundColor: "$backgroundHover"
+        },
+        pressStyle: {
+          backgroundColor: "$backgroundPress"
+        },
+        focusStyle: {
+          backgroundColor: "$backgroundFocus"
+        },
+        focusVisibleStyle: {
+          outlineColor: "$outlineColor",
+          outlineWidth: 1,
+          outlineStyle: "solid"
+        }
+      }),
+      ...restProps,
+      ...selectItemProps
+    })
+  });
+}, {
+  disableTheme: true
+});