@radix-ui/react-select 0.1.2-rc.33 → 0.1.2-rc.34
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 +71 -30
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +72 -31
- 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;
|
|
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
|
@@ -129,9 +129,7 @@ const $1345bda09ffc1bc6$export$ef9b1a59e592288f = (props)=>{
|
|
|
129
129
|
prop: valueProp,
|
|
130
130
|
defaultProp: defaultValue,
|
|
131
131
|
onChange: onValueChange
|
|
132
|
-
});
|
|
133
|
-
const isFormControl = trigger ? Boolean(trigger.closest('form')) : true;
|
|
134
|
-
const [bubbleSelect, setBubbleSelect] = $cg2C9$react.useState(null);
|
|
132
|
+
});
|
|
135
133
|
const triggerPointerDownPosRef = $cg2C9$react.useRef(null);
|
|
136
134
|
return /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectProvider, {
|
|
137
135
|
scope: __scopeSelect,
|
|
@@ -147,20 +145,12 @@ const $1345bda09ffc1bc6$export$ef9b1a59e592288f = (props)=>{
|
|
|
147
145
|
open: open,
|
|
148
146
|
onOpenChange: setOpen,
|
|
149
147
|
dir: direction,
|
|
150
|
-
|
|
148
|
+
name: name,
|
|
149
|
+
autoComplete: autoComplete,
|
|
151
150
|
triggerPointerDownPosRef: triggerPointerDownPosRef
|
|
152
151
|
}, /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$Collection.Provider, {
|
|
153
152
|
scope: __scopeSelect
|
|
154
|
-
}, children)
|
|
155
|
-
ref: setBubbleSelect,
|
|
156
|
-
"aria-hidden": true,
|
|
157
|
-
tabIndex: -1,
|
|
158
|
-
name: name,
|
|
159
|
-
autoComplete: autoComplete,
|
|
160
|
-
value: value // enable form autofill
|
|
161
|
-
,
|
|
162
|
-
onChange: (event)=>setValue(event.target.value)
|
|
163
|
-
}) : null);
|
|
153
|
+
}, children));
|
|
164
154
|
};
|
|
165
155
|
/*#__PURE__*/ Object.assign($1345bda09ffc1bc6$export$ef9b1a59e592288f, {
|
|
166
156
|
displayName: $1345bda09ffc1bc6$var$SELECT_NAME
|
|
@@ -276,22 +266,56 @@ const $1345bda09ffc1bc6$export$99b400cabb58c515 = /*#__PURE__*/ $cg2C9$react.for
|
|
|
276
266
|
/* -------------------------------------------------------------------------------------------------
|
|
277
267
|
* SelectContent
|
|
278
268
|
* -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$CONTENT_NAME = 'SelectContent';
|
|
269
|
+
const [$1345bda09ffc1bc6$var$SelectNativeOptionsProvider, $1345bda09ffc1bc6$var$useSelectNativeOptionsContext] = $1345bda09ffc1bc6$var$createSelectContext($1345bda09ffc1bc6$var$CONTENT_NAME);
|
|
279
270
|
const $1345bda09ffc1bc6$export$c973a4b3cb86a03d = /*#__PURE__*/ $cg2C9$react.forwardRef((props, forwardedRef)=>{
|
|
280
271
|
const context = $1345bda09ffc1bc6$var$useSelectContext($1345bda09ffc1bc6$var$CONTENT_NAME, props.__scopeSelect);
|
|
281
|
-
const [fragment, setFragment] = $cg2C9$react.useState(); //
|
|
272
|
+
const [fragment, setFragment] = $cg2C9$react.useState(); // We set this to true by default so that events bubble to forms without JS (SSR)
|
|
273
|
+
const isFormControl = context.trigger ? Boolean(context.trigger.closest('form')) : true;
|
|
274
|
+
const [nativeOptionsSet, setNativeOptionsSet] = $cg2C9$react.useState(new Set()); // The native `select` only associates the correct default value if the corresponding
|
|
275
|
+
// `option` is rendered as a child **at the same time** as itself.
|
|
276
|
+
// Because it might take a few renders for our items to gather the information to build
|
|
277
|
+
// the native `option`(s), we generate a key on the `select` to make sure React re-builds it
|
|
278
|
+
// each time the options change.
|
|
279
|
+
const nativeSelectKey = Array.from(nativeOptionsSet).map((option)=>option.props.value
|
|
280
|
+
).join(';'); // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server
|
|
282
281
|
$cg2C9$radixuireactuselayouteffect.useLayoutEffect(()=>{
|
|
283
282
|
setFragment(new DocumentFragment());
|
|
284
283
|
}, []);
|
|
285
|
-
return
|
|
284
|
+
return /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectNativeOptionsProvider, {
|
|
285
|
+
scope: props.__scopeSelect,
|
|
286
|
+
onNativeOptionAdd: $cg2C9$react.useCallback((option)=>{
|
|
287
|
+
setNativeOptionsSet((prev)=>new Set(prev).add(option)
|
|
288
|
+
);
|
|
289
|
+
}, []),
|
|
290
|
+
onNativeOptionRemove: $cg2C9$react.useCallback((option)=>{
|
|
291
|
+
setNativeOptionsSet((prev)=>{
|
|
292
|
+
const optionsSet = new Set(prev);
|
|
293
|
+
optionsSet.delete(option);
|
|
294
|
+
return optionsSet;
|
|
295
|
+
});
|
|
296
|
+
}, [])
|
|
297
|
+
}, isFormControl ? /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$BubbleSelect, {
|
|
298
|
+
key: nativeSelectKey,
|
|
299
|
+
"aria-hidden": true,
|
|
300
|
+
tabIndex: -1,
|
|
301
|
+
name: context.name,
|
|
302
|
+
autoComplete: context.autoComplete,
|
|
303
|
+
value: context.value // enable form autofill
|
|
304
|
+
,
|
|
305
|
+
onChange: (event)=>context.onValueChange(event.target.value)
|
|
306
|
+
}, Array.from(nativeOptionsSet)) : null, context.open ? /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectContentImpl, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({}, props, {
|
|
286
307
|
ref: forwardedRef
|
|
287
|
-
})) : fragment ? /*#__PURE__*/ $cg2C9$reactdom.createPortal(/*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$
|
|
308
|
+
})) : fragment ? /*#__PURE__*/ $cg2C9$reactdom.createPortal(/*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectContentProvider, {
|
|
288
309
|
scope: props.__scopeSelect
|
|
289
310
|
}, /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$Collection.Slot, {
|
|
290
311
|
scope: props.__scopeSelect
|
|
291
|
-
}, /*#__PURE__*/ $cg2C9$react.createElement("div", null, props.children))), fragment) : null;
|
|
312
|
+
}, /*#__PURE__*/ $cg2C9$react.createElement("div", null, props.children))), fragment) : null);
|
|
313
|
+
});
|
|
314
|
+
/*#__PURE__*/ Object.assign($1345bda09ffc1bc6$export$c973a4b3cb86a03d, {
|
|
315
|
+
displayName: $1345bda09ffc1bc6$var$CONTENT_NAME
|
|
292
316
|
});
|
|
293
317
|
const $1345bda09ffc1bc6$var$CONTENT_MARGIN = 10;
|
|
294
|
-
const [$1345bda09ffc1bc6$var$
|
|
318
|
+
const [$1345bda09ffc1bc6$var$SelectContentProvider, $1345bda09ffc1bc6$var$useSelectContentContext] = $1345bda09ffc1bc6$var$createSelectContext($1345bda09ffc1bc6$var$CONTENT_NAME);
|
|
295
319
|
const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwardRef((props, forwardedRef)=>{
|
|
296
320
|
const { __scopeSelect: __scopeSelect , onCloseAutoFocus: onCloseAutoFocus , ...contentProps } = props;
|
|
297
321
|
const context = $1345bda09ffc1bc6$var$useSelectContext($1345bda09ffc1bc6$var$CONTENT_NAME, __scopeSelect);
|
|
@@ -543,7 +567,7 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
|
|
|
543
567
|
}, [
|
|
544
568
|
context.value
|
|
545
569
|
]);
|
|
546
|
-
return /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$
|
|
570
|
+
return /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectContentProvider, {
|
|
547
571
|
scope: __scopeSelect,
|
|
548
572
|
contentWrapper: contentWrapper,
|
|
549
573
|
content: content,
|
|
@@ -641,9 +665,6 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
|
|
|
641
665
|
})
|
|
642
666
|
})))))));
|
|
643
667
|
});
|
|
644
|
-
/*#__PURE__*/ Object.assign($1345bda09ffc1bc6$var$SelectContentImpl, {
|
|
645
|
-
displayName: $1345bda09ffc1bc6$var$CONTENT_NAME
|
|
646
|
-
});
|
|
647
668
|
/* -------------------------------------------------------------------------------------------------
|
|
648
669
|
* SelectViewport
|
|
649
670
|
* -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$VIEWPORT_NAME = 'SelectViewport';
|
|
@@ -824,25 +845,44 @@ const $1345bda09ffc1bc6$export$13ef48a934230896 = /*#__PURE__*/ $cg2C9$react.for
|
|
|
824
845
|
* SelectItemText
|
|
825
846
|
* -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$ITEM_TEXT_NAME = 'SelectItemText';
|
|
826
847
|
const $1345bda09ffc1bc6$export$3572fb0fb821ff49 = /*#__PURE__*/ $cg2C9$react.forwardRef((props, forwardedRef)=>{
|
|
827
|
-
var _ref$current;
|
|
828
848
|
// We ignore `className` and `style` as this part shouldn't be styled.
|
|
829
849
|
const { __scopeSelect: __scopeSelect , className: className , style: style , ...itemTextProps } = props;
|
|
830
850
|
const context = $1345bda09ffc1bc6$var$useSelectContext($1345bda09ffc1bc6$var$ITEM_TEXT_NAME, __scopeSelect);
|
|
831
851
|
const contentContext = $1345bda09ffc1bc6$var$useSelectContentContext($1345bda09ffc1bc6$var$ITEM_TEXT_NAME, __scopeSelect);
|
|
832
852
|
const itemContext = $1345bda09ffc1bc6$var$useSelectItemContext($1345bda09ffc1bc6$var$ITEM_TEXT_NAME, __scopeSelect);
|
|
833
|
-
const
|
|
834
|
-
const
|
|
853
|
+
const nativeOptionsContext = $1345bda09ffc1bc6$var$useSelectNativeOptionsContext($1345bda09ffc1bc6$var$ITEM_TEXT_NAME, __scopeSelect);
|
|
854
|
+
const [itemTextNode, setItemTextNode] = $cg2C9$react.useState(null);
|
|
855
|
+
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setItemTextNode(node)
|
|
856
|
+
, itemContext.onItemTextChange, (node)=>{
|
|
835
857
|
var _contentContext$itemT;
|
|
836
858
|
return (_contentContext$itemT = contentContext.itemTextRefCallback) === null || _contentContext$itemT === void 0 ? void 0 : _contentContext$itemT.call(contentContext, node, itemContext.value, itemContext.disabled);
|
|
837
859
|
});
|
|
860
|
+
const textContent = itemTextNode === null || itemTextNode === void 0 ? void 0 : itemTextNode.textContent;
|
|
861
|
+
const nativeOption = $cg2C9$react.useMemo(()=>/*#__PURE__*/ $cg2C9$react.createElement("option", {
|
|
862
|
+
key: itemContext.value,
|
|
863
|
+
value: itemContext.value,
|
|
864
|
+
disabled: itemContext.disabled
|
|
865
|
+
}, textContent)
|
|
866
|
+
, [
|
|
867
|
+
itemContext.disabled,
|
|
868
|
+
itemContext.value,
|
|
869
|
+
textContent
|
|
870
|
+
]);
|
|
871
|
+
const { onNativeOptionAdd: onNativeOptionAdd , onNativeOptionRemove: onNativeOptionRemove } = nativeOptionsContext;
|
|
872
|
+
$cg2C9$radixuireactuselayouteffect.useLayoutEffect(()=>{
|
|
873
|
+
onNativeOptionAdd(nativeOption);
|
|
874
|
+
return ()=>onNativeOptionRemove(nativeOption)
|
|
875
|
+
;
|
|
876
|
+
}, [
|
|
877
|
+
onNativeOptionAdd,
|
|
878
|
+
onNativeOptionRemove,
|
|
879
|
+
nativeOption
|
|
880
|
+
]);
|
|
838
881
|
return /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$react.Fragment, null, /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({
|
|
839
882
|
id: itemContext.textId
|
|
840
883
|
}, itemTextProps, {
|
|
841
884
|
ref: composedRefs
|
|
842
|
-
})), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? /*#__PURE__*/ $cg2C9$reactdom.createPortal(itemTextProps.children, context.valueNode) : null
|
|
843
|
-
$cg2C9$react.createElement("option", {
|
|
844
|
-
value: itemContext.value
|
|
845
|
-
}, (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent), context.bubbleSelect) : null);
|
|
885
|
+
})), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? /*#__PURE__*/ $cg2C9$reactdom.createPortal(itemTextProps.children, context.valueNode) : null);
|
|
846
886
|
});
|
|
847
887
|
/*#__PURE__*/ Object.assign($1345bda09ffc1bc6$export$3572fb0fb821ff49, {
|
|
848
888
|
displayName: $1345bda09ffc1bc6$var$ITEM_TEXT_NAME
|
|
@@ -1033,6 +1073,7 @@ const $1345bda09ffc1bc6$export$eba4b1df07cb1d3 = /*#__PURE__*/ $cg2C9$react.forw
|
|
|
1033
1073
|
defaultValue: value
|
|
1034
1074
|
})));
|
|
1035
1075
|
});
|
|
1076
|
+
$1345bda09ffc1bc6$var$BubbleSelect.displayName = 'BubbleSelect';
|
|
1036
1077
|
function $1345bda09ffc1bc6$var$useTypeaheadSearch(onSearchChange) {
|
|
1037
1078
|
const handleSearchChange = $cg2C9$radixuireactusecallbackref.useCallbackRef(onSearchChange);
|
|
1038
1079
|
const searchRef = $cg2C9$react.useRef('');
|