@radix-ui/react-select 0.1.2-rc.20 → 0.1.2-rc.23

package/dist/index.module.js

@@ -106,7 +106,7 @@ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
         defaultProp: defaultOpen,
         onChange: onOpenChange
     });
-    const [value = '', setValue] = $01b9c$useControllableState({
+    const [value, setValue] = $01b9c$useControllableState({
         prop: valueProp,
         defaultProp: defaultValue,
         onChange: onValueChange
@@ -263,8 +263,7 @@ const $cc7e05a45900e73f$export$c973a4b3cb86a03d = /*#__PURE__*/ $01b9c$forwardRe
     }, []);
     return context.open ? /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentImpl, $01b9c$babelruntimehelpersesmextends({}, props, {
         ref: forwardedRef
-    })) : fragment ? /*#__PURE__*/ $01b9c$createPortal(/*#__PURE__*/ // @ts-ignore: This is to avoid the "SelectViewport must be inside "SelectContent" error
-    $01b9c$createElement($cc7e05a45900e73f$var$SelectContentContextProvider, {
+    })) : fragment ? /*#__PURE__*/ $01b9c$createPortal(/*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentContextProvider, {
         scope: props.__scopeSelect
     }, /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$Collection.Slot, {
         scope: props.__scopeSelect
@@ -285,7 +284,8 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
     const getItems = $cc7e05a45900e73f$var$useCollection(__scopeSelect);
     const [isPositioned, setIsPositioned] = $01b9c$useState(false);
     const shouldRepositionRef = $01b9c$useRef(true);
-    const shouldExpandOnScrollRef = $01b9c$useRef(false); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
+    const shouldExpandOnScrollRef = $01b9c$useRef(false);
+    const firstValidItemFoundRef = $01b9c$useRef(false); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
     $01b9c$useEffect(()=>{
         if (content) return $01b9c$hideOthers(content);
     }, [
@@ -501,22 +501,39 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
        */ setTimeout(()=>nextItem.ref.current.focus()
         );
     });
+    const itemRefCallback = $01b9c$useCallback((node, value, disabled)=>{
+        const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
+        const isSelectedItem = context.value !== undefined && context.value === value;
+        if (isSelectedItem || isFirstValidItem) {
+            setSelectedItem(node);
+            if (isFirstValidItem) firstValidItemFoundRef.current = true;
+        }
+    }, [
+        context.value
+    ]);
     const handleItemLeave = $01b9c$useCallback(()=>content === null || content === void 0 ? void 0 : content.focus()
     , [
         content
     ]);
+    const itemTextRefCallback = $01b9c$useCallback((node, value, disabled)=>{
+        const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
+        const isSelectedItem = context.value !== undefined && context.value === value;
+        if (isSelectedItem || isFirstValidItem) setSelectedItemText(node);
+    }, [
+        context.value
+    ]);
     return /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentContextProvider, {
         scope: __scopeSelect,
         contentWrapper: contentWrapper,
         content: content,
         viewport: viewport,
         onViewportChange: setViewport,
+        itemRefCallback: itemRefCallback,
         selectedItem: selectedItem,
-        onSelectedItemChange: setSelectedItem,
+        onItemLeave: handleItemLeave,
+        itemTextRefCallback: itemTextRefCallback,
         selectedItemText: selectedItemText,
-        onSelectedItemTextChange: setSelectedItemText,
         onScrollButtonChange: handleScrollButtonChange,
-        onItemLeave: handleItemLeave,
         isPositioned: isPositioned,
         shouldExpandOnScrollRef: shouldExpandOnScrollRef,
         searchRef: searchRef
@@ -637,7 +654,7 @@ const $cc7e05a45900e73f$export$9ed6e7b40248d36d = /*#__PURE__*/ $01b9c$forwardRe
         onScroll: $01b9c$composeEventHandlers(viewportProps.onScroll, (event)=>{
             const viewport = event.currentTarget;
             const { contentWrapper: contentWrapper , shouldExpandOnScrollRef: shouldExpandOnScrollRef  } = contentContext;
-            if (shouldExpandOnScrollRef.current && contentWrapper) {
+            if (shouldExpandOnScrollRef !== null && shouldExpandOnScrollRef !== void 0 && shouldExpandOnScrollRef.current && contentWrapper) {
                 const scrolledBy = Math.abs(prevScrollTopRef.current - viewport.scrollTop);
                 if (scrolledBy > 0) {
                     const availableHeight = window.innerHeight - $cc7e05a45900e73f$var$CONTENT_MARGIN * 2;
@@ -709,7 +726,10 @@ const $cc7e05a45900e73f$export$13ef48a934230896 = /*#__PURE__*/ $01b9c$forwardRe
     const isSelected = context.value === value;
     const [textValue, setTextValue] = $01b9c$useState(textValueProp !== null && textValueProp !== void 0 ? textValueProp : '');
     const [isFocused, setIsFocused] = $01b9c$useState(false);
-    const composedRefs = $01b9c$useComposedRefs(forwardedRef, isSelected ? contentContext.onSelectedItemChange : undefined);
+    const composedRefs = $01b9c$useComposedRefs(forwardedRef, (node)=>{
+        var _contentContext$itemR;
+        return (_contentContext$itemR = contentContext.itemRefCallback) === null || _contentContext$itemR === void 0 ? void 0 : _contentContext$itemR.call(contentContext, node, value, disabled);
+    });
     const textId = $01b9c$useId();
     const handleSelect = ()=>{
         if (!disabled) {
@@ -720,6 +740,7 @@ const $cc7e05a45900e73f$export$13ef48a934230896 = /*#__PURE__*/ $01b9c$forwardRe
     return /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectItemContextProvider, {
         scope: __scopeSelect,
         value: value,
+        disabled: disabled,
         textId: textId,
         isSelected: isSelected,
         onItemTextChange: $01b9c$useCallback((node)=>{
@@ -735,10 +756,11 @@ const $cc7e05a45900e73f$export$13ef48a934230896 = /*#__PURE__*/ $01b9c$forwardRe
         textValue: textValue
     }, /*#__PURE__*/ $01b9c$createElement($01b9c$Primitive.div, $01b9c$babelruntimehelpersesmextends({
         role: "option",
-        "aria-labelledby": textId // `isFocused` caveat fixes stuttering in VoiceOver
+        "aria-labelledby": textId,
+        "data-highlighted": isFocused ? '' : undefined // `isFocused` caveat fixes stuttering in VoiceOver
         ,
         "aria-selected": isSelected && isFocused,
-        "data-state": isSelected ? 'active' : 'inactive',
+        "data-state": isSelected ? 'checked' : 'unchecked',
         "aria-disabled": disabled || undefined,
         "data-disabled": disabled ? '' : undefined,
         tabIndex: disabled ? undefined : -1
@@ -750,18 +772,24 @@ const $cc7e05a45900e73f$export$13ef48a934230896 = /*#__PURE__*/ $01b9c$forwardRe
         ),
         onPointerUp: $01b9c$composeEventHandlers(itemProps.onPointerUp, handleSelect),
         onPointerMove: $01b9c$composeEventHandlers(itemProps.onPointerMove, (event)=>{
-            if (disabled) contentContext.onItemLeave();
-            else // even though safari doesn't support this option, it's acceptable
+            if (disabled) {
+                var _contentContext$onIte;
+                (_contentContext$onIte = contentContext.onItemLeave) === null || _contentContext$onIte === void 0 || _contentContext$onIte.call(contentContext);
+            } else // even though safari doesn't support this option, it's acceptable
             // as it only means it might scroll a few pixels when using the pointer.
             event.currentTarget.focus({
                 preventScroll: true
             });
         }),
         onPointerLeave: $01b9c$composeEventHandlers(itemProps.onPointerLeave, (event)=>{
-            if (event.currentTarget === document.activeElement) contentContext.onItemLeave();
+            if (event.currentTarget === document.activeElement) {
+                var _contentContext$onIte2;
+                (_contentContext$onIte2 = contentContext.onItemLeave) === null || _contentContext$onIte2 === void 0 || _contentContext$onIte2.call(contentContext);
+            }
         }),
         onKeyDown: $01b9c$composeEventHandlers(itemProps.onKeyDown, (event)=>{
-            const isTypingAhead = contentContext.searchRef.current !== '';
+            var _contentContext$searc;
+            const isTypingAhead = ((_contentContext$searc = contentContext.searchRef) === null || _contentContext$searc === void 0 ? void 0 : _contentContext$searc.current) !== '';
             if (isTypingAhead && event.key === ' ') return;
             if ($cc7e05a45900e73f$var$SELECTION_KEYS.includes(event.key)) handleSelect(); // prevent page scroll if using the space key to select an item
             if (event.key === ' ') event.preventDefault();
@@ -782,7 +810,10 @@ const $cc7e05a45900e73f$export$3572fb0fb821ff49 = /*#__PURE__*/ $01b9c$forwardRe
     const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
     const itemContext = $cc7e05a45900e73f$var$useSelectItemContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
     const ref = $01b9c$useRef(null);
-    const composedRefs = $01b9c$useComposedRefs(forwardedRef, ref, itemContext.onItemTextChange, itemContext.isSelected ? contentContext.onSelectedItemTextChange : undefined);
+    const composedRefs = $01b9c$useComposedRefs(forwardedRef, ref, itemContext.onItemTextChange, (node)=>{
+        var _contentContext$itemT;
+        return (_contentContext$itemT = contentContext.itemTextRefCallback) === null || _contentContext$itemT === void 0 ? void 0 : _contentContext$itemT.call(contentContext, node, itemContext.value, itemContext.disabled);
+    });
     return /*#__PURE__*/ $01b9c$createElement($01b9c$Fragment, null, /*#__PURE__*/ $01b9c$createElement($01b9c$Primitive.span, $01b9c$babelruntimehelpersesmextends({
         id: itemContext.textId
     }, itemTextProps, {
@@ -919,7 +950,8 @@ const $cc7e05a45900e73f$var$SelectScrollButtonImpl = /*#__PURE__*/ $01b9c$forwar
             ...scrollIndicatorProps.style
         },
         onPointerMove: $01b9c$composeEventHandlers(scrollIndicatorProps.onPointerMove, ()=>{
-            contentContext.onItemLeave();
+            var _contentContext$onIte3;
+            (_contentContext$onIte3 = contentContext.onItemLeave) === null || _contentContext$onIte3 === void 0 || _contentContext$onIte3.call(contentContext);
             if (autoScrollTimerRef.current === null) autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
         }),
         onPointerLeave: $01b9c$composeEventHandlers(scrollIndicatorProps.onPointerLeave, ()=>{