@radix-ui/react-select 0.1.2-rc.19 → 0.1.2-rc.21
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 +46 -15
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +46 -15
- 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)=>{
|
|
@@ -769,18 +790,24 @@ const $1345bda09ffc1bc6$export$13ef48a934230896 = /*#__PURE__*/ $cg2C9$react.for
|
|
|
769
790
|
),
|
|
770
791
|
onPointerUp: $cg2C9$radixuiprimitive.composeEventHandlers(itemProps.onPointerUp, handleSelect),
|
|
771
792
|
onPointerMove: $cg2C9$radixuiprimitive.composeEventHandlers(itemProps.onPointerMove, (event)=>{
|
|
772
|
-
if (disabled)
|
|
773
|
-
|
|
793
|
+
if (disabled) {
|
|
794
|
+
var _contentContext$onIte;
|
|
795
|
+
(_contentContext$onIte = contentContext.onItemLeave) === null || _contentContext$onIte === void 0 || _contentContext$onIte.call(contentContext);
|
|
796
|
+
} else // even though safari doesn't support this option, it's acceptable
|
|
774
797
|
// as it only means it might scroll a few pixels when using the pointer.
|
|
775
798
|
event.currentTarget.focus({
|
|
776
799
|
preventScroll: true
|
|
777
800
|
});
|
|
778
801
|
}),
|
|
779
802
|
onPointerLeave: $cg2C9$radixuiprimitive.composeEventHandlers(itemProps.onPointerLeave, (event)=>{
|
|
780
|
-
if (event.currentTarget === document.activeElement)
|
|
803
|
+
if (event.currentTarget === document.activeElement) {
|
|
804
|
+
var _contentContext$onIte2;
|
|
805
|
+
(_contentContext$onIte2 = contentContext.onItemLeave) === null || _contentContext$onIte2 === void 0 || _contentContext$onIte2.call(contentContext);
|
|
806
|
+
}
|
|
781
807
|
}),
|
|
782
808
|
onKeyDown: $cg2C9$radixuiprimitive.composeEventHandlers(itemProps.onKeyDown, (event)=>{
|
|
783
|
-
|
|
809
|
+
var _contentContext$searc;
|
|
810
|
+
const isTypingAhead = ((_contentContext$searc = contentContext.searchRef) === null || _contentContext$searc === void 0 ? void 0 : _contentContext$searc.current) !== '';
|
|
784
811
|
if (isTypingAhead && event.key === ' ') return;
|
|
785
812
|
if ($1345bda09ffc1bc6$var$SELECTION_KEYS.includes(event.key)) handleSelect(); // prevent page scroll if using the space key to select an item
|
|
786
813
|
if (event.key === ' ') event.preventDefault();
|
|
@@ -801,7 +828,10 @@ const $1345bda09ffc1bc6$export$3572fb0fb821ff49 = /*#__PURE__*/ $cg2C9$react.for
|
|
|
801
828
|
const contentContext = $1345bda09ffc1bc6$var$useSelectContentContext($1345bda09ffc1bc6$var$ITEM_TEXT_NAME, __scopeSelect);
|
|
802
829
|
const itemContext = $1345bda09ffc1bc6$var$useSelectItemContext($1345bda09ffc1bc6$var$ITEM_TEXT_NAME, __scopeSelect);
|
|
803
830
|
const ref = $cg2C9$react.useRef(null);
|
|
804
|
-
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref, itemContext.onItemTextChange,
|
|
831
|
+
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref, itemContext.onItemTextChange, (node)=>{
|
|
832
|
+
var _contentContext$itemT;
|
|
833
|
+
return (_contentContext$itemT = contentContext.itemTextRefCallback) === null || _contentContext$itemT === void 0 ? void 0 : _contentContext$itemT.call(contentContext, node, itemContext.value, itemContext.disabled);
|
|
834
|
+
});
|
|
805
835
|
return /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$react.Fragment, null, /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({
|
|
806
836
|
id: itemContext.textId
|
|
807
837
|
}, itemTextProps, {
|
|
@@ -938,7 +968,8 @@ const $1345bda09ffc1bc6$var$SelectScrollButtonImpl = /*#__PURE__*/ $cg2C9$react.
|
|
|
938
968
|
...scrollIndicatorProps.style
|
|
939
969
|
},
|
|
940
970
|
onPointerMove: $cg2C9$radixuiprimitive.composeEventHandlers(scrollIndicatorProps.onPointerMove, ()=>{
|
|
941
|
-
|
|
971
|
+
var _contentContext$onIte3;
|
|
972
|
+
(_contentContext$onIte3 = contentContext.onItemLeave) === null || _contentContext$onIte3 === void 0 || _contentContext$onIte3.call(contentContext);
|
|
942
973
|
if (autoScrollTimerRef.current === null) autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
|
|
943
974
|
}),
|
|
944
975
|
onPointerLeave: $cg2C9$radixuiprimitive.composeEventHandlers(scrollIndicatorProps.onPointerLeave, ()=>{
|