Skip to content

Commit ee38be3

Browse files
atomiksatomiks
authored
[all components] Reduce selector bundle size (#5250)
1 parent 1d84749 commit ee38be3

10 files changed

Lines changed: 202 additions & 242 deletions

File tree

‎packages/react/src/combobox/store.ts‎

Lines changed: 54 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Store, createSelector } from '@base-ui/utils/store';
1+
import { Store } from '@base-ui/utils/store';
22
import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
33
import type { TransitionStatus } from '../internals/useTransitionStatus';
44
import type { HTMLProps } from '../internals/types';
@@ -91,18 +91,18 @@ export type State = {
9191
export type ComboboxStore = Store<State>;
9292

9393
export const selectors = {
94-
id: createSelector((state: State) => state.id),
95-
labelId: createSelector((state: State) => state.labelId),
94+
id: (state: State) => state.id,
95+
labelId: (state: State) => state.labelId,
9696

97-
items: createSelector((state: State) => state.items),
97+
items: (state: State) => state.items,
9898

99-
selectedValue: createSelector((state: State) => state.selectedValue),
100-
hasSelectionChips: createSelector((state: State) => {
99+
selectedValue: (state: State) => state.selectedValue,
100+
hasSelectionChips: (state: State) => {
101101
const selectedValue = state.selectedValue;
102102
return Array.isArray(selectedValue) && selectedValue.length > 0;
103-
}),
103+
},
104104

105-
hasSelectedValue: createSelector((state: State) => {
105+
hasSelectedValue: (state: State) => {
106106
const { selectedValue, selectionMode } = state;
107107
if (selectedValue == null) {
108108
return false;
@@ -111,22 +111,22 @@ export const selectors = {
111111
return selectedValue.length > 0;
112112
}
113113
return true;
114-
}),
114+
},
115115

116-
hasNullItemLabel: createSelector((state: State, enabled: boolean) => {
116+
hasNullItemLabel: (state: State, enabled: boolean) => {
117117
return enabled ? hasNullItemLabel(state.items) : false;
118-
}),
118+
},
119119

120-
open: createSelector((state: State) => state.open),
121-
mounted: createSelector((state: State) => state.mounted),
122-
forceMounted: createSelector((state: State) => state.forceMounted),
120+
open: (state: State) => state.open,
121+
mounted: (state: State) => state.mounted,
122+
forceMounted: (state: State) => state.forceMounted,
123123

124-
inline: createSelector((state: State) => state.inline),
124+
inline: (state: State) => state.inline,
125125

126-
activeIndex: createSelector((state: State) => state.activeIndex),
127-
selectedIndex: createSelector((state: State) => state.selectedIndex),
128-
isActive: createSelector((state: State, index: number) => state.activeIndex === index),
129-
isSelected: createSelector((state: State, itemValue: any) => {
126+
activeIndex: (state: State) => state.activeIndex,
127+
selectedIndex: (state: State) => state.selectedIndex,
128+
isActive: (state: State, index: number) => state.activeIndex === index,
129+
isSelected: (state: State, itemValue: any) => {
130130
const comparer = state.isItemEqualToValue;
131131
const selectedValue = state.selectedValue;
132132
if (Array.isArray(selectedValue)) {
@@ -135,39 +135,39 @@ export const selectors = {
135135
);
136136
}
137137
return compareItemEquality(itemValue, selectedValue, comparer);
138-
}),
139-
140-
transitionStatus: createSelector((state: State) => state.transitionStatus),
141-
142-
popupProps: createSelector((state: State) => state.popupProps),
143-
inputProps: createSelector((state: State) => state.inputProps),
144-
triggerProps: createSelector((state: State) => state.triggerProps),
145-
itemProps: createSelector((state: State) => state.itemProps),
146-
147-
positionerElement: createSelector((state: State) => state.positionerElement),
148-
listElement: createSelector((state: State) => state.listElement),
149-
popupId: createSelector((state: State) => state.popupId),
150-
triggerElement: createSelector((state: State) => state.triggerElement),
151-
inputElement: createSelector((state: State) => state.inputElement),
152-
inputGroupElement: createSelector((state: State) => state.inputGroupElement),
153-
popupSide: createSelector((state: State) => state.popupSide),
154-
155-
openMethod: createSelector((state: State) => state.openMethod),
156-
157-
inputInsidePopup: createSelector((state: State) => state.inputInsidePopup),
158-
inputOwnsFormValue: createSelector((state: State) => state.inputOwnsFormValue),
159-
160-
selectionMode: createSelector((state: State) => state.selectionMode),
161-
162-
name: createSelector((state: State) => state.name),
163-
form: createSelector((state: State) => state.form),
164-
disabled: createSelector((state: State) => state.disabled),
165-
readOnly: createSelector((state: State) => state.readOnly),
166-
required: createSelector((state: State) => state.required),
167-
grid: createSelector((state: State) => state.grid),
168-
virtualized: createSelector((state: State) => state.virtualized),
169-
itemToStringLabel: createSelector((state: State) => state.itemToStringLabel),
170-
isItemEqualToValue: createSelector((state: State) => state.isItemEqualToValue),
171-
modal: createSelector((state: State) => state.modal),
172-
autoHighlight: createSelector((state: State) => state.autoHighlight),
138+
},
139+
140+
transitionStatus: (state: State) => state.transitionStatus,
141+
142+
popupProps: (state: State) => state.popupProps,
143+
inputProps: (state: State) => state.inputProps,
144+
triggerProps: (state: State) => state.triggerProps,
145+
itemProps: (state: State) => state.itemProps,
146+
147+
positionerElement: (state: State) => state.positionerElement,
148+
listElement: (state: State) => state.listElement,
149+
popupId: (state: State) => state.popupId,
150+
triggerElement: (state: State) => state.triggerElement,
151+
inputElement: (state: State) => state.inputElement,
152+
inputGroupElement: (state: State) => state.inputGroupElement,
153+
popupSide: (state: State) => state.popupSide,
154+
155+
openMethod: (state: State) => state.openMethod,
156+
157+
inputInsidePopup: (state: State) => state.inputInsidePopup,
158+
inputOwnsFormValue: (state: State) => state.inputOwnsFormValue,
159+
160+
selectionMode: (state: State) => state.selectionMode,
161+
162+
name: (state: State) => state.name,
163+
form: (state: State) => state.form,
164+
disabled: (state: State) => state.disabled,
165+
readOnly: (state: State) => state.readOnly,
166+
required: (state: State) => state.required,
167+
grid: (state: State) => state.grid,
168+
virtualized: (state: State) => state.virtualized,
169+
itemToStringLabel: (state: State) => state.itemToStringLabel,
170+
isItemEqualToValue: (state: State) => state.isItemEqualToValue,
171+
modal: (state: State) => state.modal,
172+
autoHighlight: (state: State) => state.autoHighlight,
173173
};

‎packages/react/src/dialog/store/DialogStore.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { createSelector, ReactStore } from '@base-ui/utils/store';
2+
import { ReactStore } from '@base-ui/utils/store';
33
import { type InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
44
import { type DialogRoot } from '../root/DialogRoot';
55
import { NullStore } from '../../utils/NullStore';
@@ -37,16 +37,16 @@ type Context = PopupStoreContext<DialogRoot.ChangeEventDetails> & {
3737

3838
const selectors = {
3939
...popupStoreSelectors,
40-
modal: createSelector((state: State<unknown>) => state.modal),
41-
nested: createSelector((state: State<unknown>) => state.nested),
42-
nestedOpenDialogCount: createSelector((state: State<unknown>) => state.nestedOpenDialogCount),
43-
nestedOpenDrawerCount: createSelector((state: State<unknown>) => state.nestedOpenDrawerCount),
44-
disablePointerDismissal: createSelector((state: State<unknown>) => state.disablePointerDismissal),
45-
openMethod: createSelector((state: State<unknown>) => state.openMethod),
46-
descriptionElementId: createSelector((state: State<unknown>) => state.descriptionElementId),
47-
titleElementId: createSelector((state: State<unknown>) => state.titleElementId),
48-
viewportElement: createSelector((state: State<unknown>) => state.viewportElement),
49-
role: createSelector((state: State<unknown>) => state.role),
40+
modal: (state: State<unknown>) => state.modal,
41+
nested: (state: State<unknown>) => state.nested,
42+
nestedOpenDialogCount: (state: State<unknown>) => state.nestedOpenDialogCount,
43+
nestedOpenDrawerCount: (state: State<unknown>) => state.nestedOpenDrawerCount,
44+
disablePointerDismissal: (state: State<unknown>) => state.disablePointerDismissal,
45+
openMethod: (state: State<unknown>) => state.openMethod,
46+
descriptionElementId: (state: State<unknown>) => state.descriptionElementId,
47+
titleElementId: (state: State<unknown>) => state.titleElementId,
48+
viewportElement: (state: State<unknown>) => state.viewportElement,
49+
role: (state: State<unknown>) => state.role,
5050
};
5151

5252
/**

‎packages/react/src/floating-ui-react/components/FloatingRootStore.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { createSelector, ReactStore } from '@base-ui/utils/store';
2+
import { ReactStore } from '@base-ui/utils/store';
33
import type { FloatingEvents, ContextData, ReferenceType } from '../types';
44
import { type BaseUIChangeEventDetails } from '../../internals/createBaseUIEventDetails';
55
import { createEventEmitter } from '../utils/createEventEmitter';
@@ -32,14 +32,12 @@ export interface FloatingRootStoreContext {
3232
}
3333

3434
const selectors = {
35-
open: createSelector((state: FloatingRootState) => state.open),
36-
transitionStatus: createSelector((state: FloatingRootState) => state.transitionStatus),
37-
domReferenceElement: createSelector((state: FloatingRootState) => state.domReferenceElement),
38-
referenceElement: createSelector(
39-
(state: FloatingRootState) => state.positionReference ?? state.referenceElement,
40-
),
41-
floatingElement: createSelector((state: FloatingRootState) => state.floatingElement),
42-
floatingId: createSelector((state: FloatingRootState) => state.floatingId),
35+
open: (state: FloatingRootState) => state.open,
36+
transitionStatus: (state: FloatingRootState) => state.transitionStatus,
37+
domReferenceElement: (state: FloatingRootState) => state.domReferenceElement,
38+
referenceElement: (state: FloatingRootState) => state.positionReference ?? state.referenceElement,
39+
floatingElement: (state: FloatingRootState) => state.floatingElement,
40+
floatingId: (state: FloatingRootState) => state.floatingId,
4341
};
4442

4543
interface FloatingRootStoreOptions {

‎packages/react/src/menu/store/MenuStore.ts‎

Lines changed: 34 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { createSelector, ReactStore } from '@base-ui/utils/store';
2+
import { ReactStore } from '@base-ui/utils/store';
33
import { EMPTY_OBJECT, NOOP } from '@base-ui/utils/empty';
44
import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
55
import { MenuParent, MenuRoot } from '../root/MenuRoot';
@@ -50,62 +50,54 @@ type Context = PopupStoreContext<MenuRoot.ChangeEventDetails> & {
5050

5151
const selectors = {
5252
...popupStoreSelectors,
53-
disabled: createSelector((state: State<unknown>) =>
53+
disabled: (state: State<unknown>) =>
5454
state.parent.type === 'menubar'
5555
? state.parent.context.disabled || state.disabled
5656
: state.disabled,
57-
),
58-
modal: createSelector(
59-
(state: State<unknown>) =>
60-
(state.parent.type === undefined || state.parent.type === 'context-menu') &&
61-
(state.modal ?? true),
62-
),
63-
openMethod: createSelector((state: State<unknown>) => state.openMethod),
64-
65-
allowMouseEnter: createSelector((state: State<unknown>) => state.allowMouseEnter),
66-
highlightItemOnHover: createSelector((state: State<unknown>) => state.highlightItemOnHover),
67-
parent: createSelector((state: State<unknown>) => state.parent),
68-
rootId: createSelector((state: State<unknown>): string | undefined => {
57+
modal: (state: State<unknown>) =>
58+
(state.parent.type === undefined || state.parent.type === 'context-menu') &&
59+
(state.modal ?? true),
60+
openMethod: (state: State<unknown>) => state.openMethod,
61+
62+
allowMouseEnter: (state: State<unknown>) => state.allowMouseEnter,
63+
highlightItemOnHover: (state: State<unknown>) => state.highlightItemOnHover,
64+
parent: (state: State<unknown>) => state.parent,
65+
rootId: (state: State<unknown>): string | undefined => {
6966
if (state.parent.type === 'menu') {
7067
return state.parent.store.select('rootId');
7168
}
7269

7370
return state.parent.type !== undefined ? state.parent.context.rootId : state.rootId;
74-
}),
75-
activeIndex: createSelector((state: State<unknown>) => state.activeIndex),
76-
isActive: createSelector(
77-
(state: State<unknown>, itemIndex: number) => state.activeIndex === itemIndex,
78-
),
79-
hoverEnabled: createSelector((state: State<unknown>) => state.hoverEnabled),
80-
instantType: createSelector((state: State<unknown>) => state.instantType),
81-
lastOpenChangeReason: createSelector((state: State<unknown>) => state.openChangeReason),
82-
floatingTreeRoot: createSelector((state: State<unknown>): FloatingTreeStore => {
71+
},
72+
activeIndex: (state: State<unknown>) => state.activeIndex,
73+
isActive: (state: State<unknown>, itemIndex: number) => state.activeIndex === itemIndex,
74+
hoverEnabled: (state: State<unknown>) => state.hoverEnabled,
75+
instantType: (state: State<unknown>) => state.instantType,
76+
lastOpenChangeReason: (state: State<unknown>) => state.openChangeReason,
77+
floatingTreeRoot: (state: State<unknown>): FloatingTreeStore => {
8378
if (state.parent.type === 'menu') {
8479
return state.parent.store.select('floatingTreeRoot');
8580
}
8681

8782
return state.floatingTreeRoot;
88-
}),
89-
floatingNodeId: createSelector((state: State<unknown>) => state.floatingNodeId),
90-
floatingParentNodeId: createSelector((state: State<unknown>) => state.floatingParentNodeId),
91-
itemProps: createSelector((state: State<unknown>) => state.itemProps),
92-
closeDelay: createSelector((state: State<unknown>) => state.closeDelay),
93-
adaptiveOrigin: createSelector(
94-
(state: State<unknown>): AdaptiveOriginMiddleware | undefined => state.adaptiveOrigin,
95-
),
96-
keyboardEventRelay: createSelector(
97-
(state: State<unknown>): React.KeyboardEventHandler<any> | undefined => {
98-
if (state.keyboardEventRelay) {
99-
return state.keyboardEventRelay;
100-
}
83+
},
84+
floatingNodeId: (state: State<unknown>) => state.floatingNodeId,
85+
floatingParentNodeId: (state: State<unknown>) => state.floatingParentNodeId,
86+
itemProps: (state: State<unknown>) => state.itemProps,
87+
closeDelay: (state: State<unknown>) => state.closeDelay,
88+
adaptiveOrigin: (state: State<unknown>): AdaptiveOriginMiddleware | undefined =>
89+
state.adaptiveOrigin,
90+
keyboardEventRelay: (state: State<unknown>): React.KeyboardEventHandler<any> | undefined => {
91+
if (state.keyboardEventRelay) {
92+
return state.keyboardEventRelay;
93+
}
10194

102-
if (state.parent.type === 'menu') {
103-
return state.parent.store.select('keyboardEventRelay');
104-
}
95+
if (state.parent.type === 'menu') {
96+
return state.parent.store.select('keyboardEventRelay');
97+
}
10598

106-
return undefined;
107-
},
108-
),
99+
return undefined;
100+
},
109101
};
110102

111103
type Selectors = typeof selectors;

‎packages/react/src/popover/store/PopoverStore.ts‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22
import * as React from 'react';
33
import * as ReactDOM from 'react-dom';
4-
import { ReactStore, createSelector } from '@base-ui/utils/store';
4+
import { ReactStore } from '@base-ui/utils/store';
55
import { Timeout } from '@base-ui/utils/useTimeout';
66
import { NOOP } from '@base-ui/utils/empty';
77
import { type InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
@@ -46,20 +46,19 @@ type Context = PopupStoreContext<PopoverRoot.ChangeEventDetails> & {
4646

4747
const selectors = {
4848
...popupStoreSelectors,
49-
disabled: createSelector((state: State<unknown>) => state.disabled),
50-
instantType: createSelector((state: State<unknown>) => state.instantType),
51-
openMethod: createSelector((state: State<unknown>) => state.openMethod),
52-
openChangeReason: createSelector((state: State<unknown>) => state.openChangeReason),
53-
modal: createSelector((state: State<unknown>) => state.modal),
54-
focusManagerModal: createSelector((state: State<unknown>) => state.focusManagerModal),
55-
stickIfOpen: createSelector((state: State<unknown>) => state.stickIfOpen),
56-
titleElementId: createSelector((state: State<unknown>) => state.titleElementId),
57-
descriptionElementId: createSelector((state: State<unknown>) => state.descriptionElementId),
58-
openOnHover: createSelector((state: State<unknown>) => state.openOnHover),
59-
closeDelay: createSelector((state: State<unknown>) => state.closeDelay),
60-
adaptiveOrigin: createSelector(
61-
(state: State<unknown>): AdaptiveOriginMiddleware | undefined => state.adaptiveOrigin,
62-
),
49+
disabled: (state: State<unknown>) => state.disabled,
50+
instantType: (state: State<unknown>) => state.instantType,
51+
openMethod: (state: State<unknown>) => state.openMethod,
52+
openChangeReason: (state: State<unknown>) => state.openChangeReason,
53+
modal: (state: State<unknown>) => state.modal,
54+
focusManagerModal: (state: State<unknown>) => state.focusManagerModal,
55+
stickIfOpen: (state: State<unknown>) => state.stickIfOpen,
56+
titleElementId: (state: State<unknown>) => state.titleElementId,
57+
descriptionElementId: (state: State<unknown>) => state.descriptionElementId,
58+
openOnHover: (state: State<unknown>) => state.openOnHover,
59+
closeDelay: (state: State<unknown>) => state.closeDelay,
60+
adaptiveOrigin: (state: State<unknown>): AdaptiveOriginMiddleware | undefined =>
61+
state.adaptiveOrigin,
6362
};
6463

6564
type Selectors = typeof selectors;

‎packages/react/src/preview-card/store/PreviewCardStore.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { createSelector, ReactStore } from '@base-ui/utils/store';
2+
import { ReactStore } from '@base-ui/utils/store';
33
import {
44
applyPopupOpenChange,
55
createPopupFloatingRootContext,
@@ -30,11 +30,10 @@ export type Context = PopupStoreContext<PreviewCardRoot.ChangeEventDetails> & {
3030

3131
const selectors = {
3232
...popupStoreSelectors,
33-
instantType: createSelector((state: State<unknown>) => state.instantType),
34-
adaptiveOrigin: createSelector(
35-
(state: State<unknown>): AdaptiveOriginMiddleware | undefined => state.adaptiveOrigin,
36-
),
37-
closeDelay: createSelector((state: State<unknown>) => state.closeDelay),
33+
instantType: (state: State<unknown>) => state.instantType,
34+
adaptiveOrigin: (state: State<unknown>): AdaptiveOriginMiddleware | undefined =>
35+
state.adaptiveOrigin,
36+
closeDelay: (state: State<unknown>) => state.closeDelay,
3837
};
3938

4039
type Selectors = typeof selectors;

0 commit comments

Comments
 (0)