@radix-ui/react-select 0.1.2-rc.20 → 0.1.2-rc.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +49 -17
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +49 -17
- package/dist/index.module.js.map +1 -1
- package/package.json +16 -16
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;AAyBA,iBAAiB,KAAK,GAAG,KAAK,CAAC;AAkB/B,OAAA,wFAEE,CAAC;AAqBH;IACE,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,OAAA,MAAM,QAAQ,MAAM,EAAE,CAAC,WAAW,CAkEjC,CAAC;AAWF,4BAA4B,MAAM,wBAAwB,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC;AACpF,mCAA6B,SAAQ,oBAAoB;CAAG;AAE5D,OAAA,MAAM,2GA0EL,CAAC;AAWF,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,UAAU,IAAI,CAAC,CAAC;AAChF,iCAA2B,SAAQ,kBAAkB;CAAG;AAExD,OAAA,MAAM,qGAuBL,CAAC;AAWF,gCAA0B,SAAQ,kBAAkB;CAAG;AAEvD,OAAA,MAAM,mGASL,CAAC;AAWF,mCAA6B,SAAQ,sBAAsB;CAAG;AAE9D,OAAA,MAAM,
|
|
1
|
+
{"mappings":"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","sources":["packages/react/select/src/packages/react/select/src/Select.tsx","packages/react/select/src/packages/react/select/src/index.ts","packages/react/select/src/index.ts"],"sourcesContent":[null,null,"export * from './Select';\n"],"names":[],"version":3,"file":"index.d.ts.map"}
|
package/dist/index.js
CHANGED
|
@@ -125,7 +125,7 @@ const $1345bda09ffc1bc6$export$ef9b1a59e592288f = (props)=>{
|
|
|
125
125
|
defaultProp: defaultOpen,
|
|
126
126
|
onChange: onOpenChange
|
|
127
127
|
});
|
|
128
|
-
const [value
|
|
128
|
+
const [value, setValue] = $cg2C9$radixuireactusecontrollablestate.useControllableState({
|
|
129
129
|
prop: valueProp,
|
|
130
130
|
defaultProp: defaultValue,
|
|
131
131
|
onChange: onValueChange
|
|
@@ -282,8 +282,7 @@ const $1345bda09ffc1bc6$export$c973a4b3cb86a03d = /*#__PURE__*/ $cg2C9$react.for
|
|
|
282
282
|
}, []);
|
|
283
283
|
return context.open ? /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectContentImpl, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({}, props, {
|
|
284
284
|
ref: forwardedRef
|
|
285
|
-
})) : fragment ? /*#__PURE__*/ $cg2C9$reactdom.createPortal(/*#__PURE__*/
|
|
286
|
-
$cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectContentContextProvider, {
|
|
285
|
+
})) : fragment ? /*#__PURE__*/ $cg2C9$reactdom.createPortal(/*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectContentContextProvider, {
|
|
287
286
|
scope: props.__scopeSelect
|
|
288
287
|
}, /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$Collection.Slot, {
|
|
289
288
|
scope: props.__scopeSelect
|
|
@@ -304,7 +303,8 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
|
|
|
304
303
|
const getItems = $1345bda09ffc1bc6$var$useCollection(__scopeSelect);
|
|
305
304
|
const [isPositioned, setIsPositioned] = $cg2C9$react.useState(false);
|
|
306
305
|
const shouldRepositionRef = $cg2C9$react.useRef(true);
|
|
307
|
-
const shouldExpandOnScrollRef = $cg2C9$react.useRef(false);
|
|
306
|
+
const shouldExpandOnScrollRef = $cg2C9$react.useRef(false);
|
|
307
|
+
const firstValidItemFoundRef = $cg2C9$react.useRef(false); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
|
|
308
308
|
$cg2C9$react.useEffect(()=>{
|
|
309
309
|
if (content) return $cg2C9$ariahidden.hideOthers(content);
|
|
310
310
|
}, [
|
|
@@ -520,22 +520,39 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
|
|
|
520
520
|
*/ setTimeout(()=>nextItem.ref.current.focus()
|
|
521
521
|
);
|
|
522
522
|
});
|
|
523
|
+
const itemRefCallback = $cg2C9$react.useCallback((node, value, disabled)=>{
|
|
524
|
+
const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
|
|
525
|
+
const isSelectedItem = context.value !== undefined && context.value === value;
|
|
526
|
+
if (isSelectedItem || isFirstValidItem) {
|
|
527
|
+
setSelectedItem(node);
|
|
528
|
+
if (isFirstValidItem) firstValidItemFoundRef.current = true;
|
|
529
|
+
}
|
|
530
|
+
}, [
|
|
531
|
+
context.value
|
|
532
|
+
]);
|
|
523
533
|
const handleItemLeave = $cg2C9$react.useCallback(()=>content === null || content === void 0 ? void 0 : content.focus()
|
|
524
534
|
, [
|
|
525
535
|
content
|
|
526
536
|
]);
|
|
537
|
+
const itemTextRefCallback = $cg2C9$react.useCallback((node, value, disabled)=>{
|
|
538
|
+
const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
|
|
539
|
+
const isSelectedItem = context.value !== undefined && context.value === value;
|
|
540
|
+
if (isSelectedItem || isFirstValidItem) setSelectedItemText(node);
|
|
541
|
+
}, [
|
|
542
|
+
context.value
|
|
543
|
+
]);
|
|
527
544
|
return /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectContentContextProvider, {
|
|
528
545
|
scope: __scopeSelect,
|
|
529
546
|
contentWrapper: contentWrapper,
|
|
530
547
|
content: content,
|
|
531
548
|
viewport: viewport,
|
|
532
549
|
onViewportChange: setViewport,
|
|
550
|
+
itemRefCallback: itemRefCallback,
|
|
533
551
|
selectedItem: selectedItem,
|
|
534
|
-
|
|
552
|
+
onItemLeave: handleItemLeave,
|
|
553
|
+
itemTextRefCallback: itemTextRefCallback,
|
|
535
554
|
selectedItemText: selectedItemText,
|
|
536
|
-
onSelectedItemTextChange: setSelectedItemText,
|
|
537
555
|
onScrollButtonChange: handleScrollButtonChange,
|
|
538
|
-
onItemLeave: handleItemLeave,
|
|
539
556
|
isPositioned: isPositioned,
|
|
540
557
|
shouldExpandOnScrollRef: shouldExpandOnScrollRef,
|
|
541
558
|
searchRef: searchRef
|
|
@@ -656,7 +673,7 @@ const $1345bda09ffc1bc6$export$9ed6e7b40248d36d = /*#__PURE__*/ $cg2C9$react.for
|
|
|
656
673
|
onScroll: $cg2C9$radixuiprimitive.composeEventHandlers(viewportProps.onScroll, (event)=>{
|
|
657
674
|
const viewport = event.currentTarget;
|
|
658
675
|
const { contentWrapper: contentWrapper , shouldExpandOnScrollRef: shouldExpandOnScrollRef } = contentContext;
|
|
659
|
-
if (shouldExpandOnScrollRef.current && contentWrapper) {
|
|
676
|
+
if (shouldExpandOnScrollRef !== null && shouldExpandOnScrollRef !== void 0 && shouldExpandOnScrollRef.current && contentWrapper) {
|
|
660
677
|
const scrolledBy = Math.abs(prevScrollTopRef.current - viewport.scrollTop);
|
|
661
678
|
if (scrolledBy > 0) {
|
|
662
679
|
const availableHeight = window.innerHeight - $1345bda09ffc1bc6$var$CONTENT_MARGIN * 2;
|
|
@@ -728,7 +745,10 @@ const $1345bda09ffc1bc6$export$13ef48a934230896 = /*#__PURE__*/ $cg2C9$react.for
|
|
|
728
745
|
const isSelected = context.value === value;
|
|
729
746
|
const [textValue, setTextValue] = $cg2C9$react.useState(textValueProp !== null && textValueProp !== void 0 ? textValueProp : '');
|
|
730
747
|
const [isFocused, setIsFocused] = $cg2C9$react.useState(false);
|
|
731
|
-
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef,
|
|
748
|
+
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>{
|
|
749
|
+
var _contentContext$itemR;
|
|
750
|
+
return (_contentContext$itemR = contentContext.itemRefCallback) === null || _contentContext$itemR === void 0 ? void 0 : _contentContext$itemR.call(contentContext, node, value, disabled);
|
|
751
|
+
});
|
|
732
752
|
const textId = $cg2C9$radixuireactid.useId();
|
|
733
753
|
const handleSelect = ()=>{
|
|
734
754
|
if (!disabled) {
|
|
@@ -739,6 +759,7 @@ const $1345bda09ffc1bc6$export$13ef48a934230896 = /*#__PURE__*/ $cg2C9$react.for
|
|
|
739
759
|
return /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectItemContextProvider, {
|
|
740
760
|
scope: __scopeSelect,
|
|
741
761
|
value: value,
|
|
762
|
+
disabled: disabled,
|
|
742
763
|
textId: textId,
|
|
743
764
|
isSelected: isSelected,
|
|
744
765
|
onItemTextChange: $cg2C9$react.useCallback((node)=>{
|
|
@@ -754,10 +775,11 @@ const $1345bda09ffc1bc6$export$13ef48a934230896 = /*#__PURE__*/ $cg2C9$react.for
|
|
|
754
775
|
textValue: textValue
|
|
755
776
|
}, /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({
|
|
756
777
|
role: "option",
|
|
757
|
-
"aria-labelledby": textId
|
|
778
|
+
"aria-labelledby": textId,
|
|
779
|
+
"data-highlighted": isFocused ? '' : undefined // `isFocused` caveat fixes stuttering in VoiceOver
|
|
758
780
|
,
|
|
759
781
|
"aria-selected": isSelected && isFocused,
|
|
760
|
-
"data-state": isSelected ? '
|
|
782
|
+
"data-state": isSelected ? 'checked' : 'unchecked',
|
|
761
783
|
"aria-disabled": disabled || undefined,
|
|
762
784
|
"data-disabled": disabled ? '' : undefined,
|
|
763
785
|
tabIndex: disabled ? undefined : -1
|
|
@@ -769,18 +791,24 @@ const $1345bda09ffc1bc6$export$13ef48a934230896 = /*#__PURE__*/ $cg2C9$react.for
|
|
|
769
791
|
),
|
|
770
792
|
onPointerUp: $cg2C9$radixuiprimitive.composeEventHandlers(itemProps.onPointerUp, handleSelect),
|
|
771
793
|
onPointerMove: $cg2C9$radixuiprimitive.composeEventHandlers(itemProps.onPointerMove, (event)=>{
|
|
772
|
-
if (disabled)
|
|
773
|
-
|
|
794
|
+
if (disabled) {
|
|
795
|
+
var _contentContext$onIte;
|
|
796
|
+
(_contentContext$onIte = contentContext.onItemLeave) === null || _contentContext$onIte === void 0 || _contentContext$onIte.call(contentContext);
|
|
797
|
+
} else // even though safari doesn't support this option, it's acceptable
|
|
774
798
|
// as it only means it might scroll a few pixels when using the pointer.
|
|
775
799
|
event.currentTarget.focus({
|
|
776
800
|
preventScroll: true
|
|
777
801
|
});
|
|
778
802
|
}),
|
|
779
803
|
onPointerLeave: $cg2C9$radixuiprimitive.composeEventHandlers(itemProps.onPointerLeave, (event)=>{
|
|
780
|
-
if (event.currentTarget === document.activeElement)
|
|
804
|
+
if (event.currentTarget === document.activeElement) {
|
|
805
|
+
var _contentContext$onIte2;
|
|
806
|
+
(_contentContext$onIte2 = contentContext.onItemLeave) === null || _contentContext$onIte2 === void 0 || _contentContext$onIte2.call(contentContext);
|
|
807
|
+
}
|
|
781
808
|
}),
|
|
782
809
|
onKeyDown: $cg2C9$radixuiprimitive.composeEventHandlers(itemProps.onKeyDown, (event)=>{
|
|
783
|
-
|
|
810
|
+
var _contentContext$searc;
|
|
811
|
+
const isTypingAhead = ((_contentContext$searc = contentContext.searchRef) === null || _contentContext$searc === void 0 ? void 0 : _contentContext$searc.current) !== '';
|
|
784
812
|
if (isTypingAhead && event.key === ' ') return;
|
|
785
813
|
if ($1345bda09ffc1bc6$var$SELECTION_KEYS.includes(event.key)) handleSelect(); // prevent page scroll if using the space key to select an item
|
|
786
814
|
if (event.key === ' ') event.preventDefault();
|
|
@@ -801,7 +829,10 @@ const $1345bda09ffc1bc6$export$3572fb0fb821ff49 = /*#__PURE__*/ $cg2C9$react.for
|
|
|
801
829
|
const contentContext = $1345bda09ffc1bc6$var$useSelectContentContext($1345bda09ffc1bc6$var$ITEM_TEXT_NAME, __scopeSelect);
|
|
802
830
|
const itemContext = $1345bda09ffc1bc6$var$useSelectItemContext($1345bda09ffc1bc6$var$ITEM_TEXT_NAME, __scopeSelect);
|
|
803
831
|
const ref = $cg2C9$react.useRef(null);
|
|
804
|
-
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref, itemContext.onItemTextChange,
|
|
832
|
+
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref, itemContext.onItemTextChange, (node)=>{
|
|
833
|
+
var _contentContext$itemT;
|
|
834
|
+
return (_contentContext$itemT = contentContext.itemTextRefCallback) === null || _contentContext$itemT === void 0 ? void 0 : _contentContext$itemT.call(contentContext, node, itemContext.value, itemContext.disabled);
|
|
835
|
+
});
|
|
805
836
|
return /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$react.Fragment, null, /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({
|
|
806
837
|
id: itemContext.textId
|
|
807
838
|
}, itemTextProps, {
|
|
@@ -938,7 +969,8 @@ const $1345bda09ffc1bc6$var$SelectScrollButtonImpl = /*#__PURE__*/ $cg2C9$react.
|
|
|
938
969
|
...scrollIndicatorProps.style
|
|
939
970
|
},
|
|
940
971
|
onPointerMove: $cg2C9$radixuiprimitive.composeEventHandlers(scrollIndicatorProps.onPointerMove, ()=>{
|
|
941
|
-
|
|
972
|
+
var _contentContext$onIte3;
|
|
973
|
+
(_contentContext$onIte3 = contentContext.onItemLeave) === null || _contentContext$onIte3 === void 0 || _contentContext$onIte3.call(contentContext);
|
|
942
974
|
if (autoScrollTimerRef.current === null) autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
|
|
943
975
|
}),
|
|
944
976
|
onPointerLeave: $cg2C9$radixuiprimitive.composeEventHandlers(scrollIndicatorProps.onPointerLeave, ()=>{
|