Skip to content

Commit d9513ce

Browse files
tenphitenphi
committed
fix: ref types
1 parent 97f2fcd commit d9513ce

File tree

6 files changed

+128
-131
lines changed

6 files changed

+128
-131
lines changed

‎.size-limit.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ module.exports = [
2020
}),
2121
);
2222
},
23-
limit: '310kB',
23+
limit: '315kB',
2424
},
2525
{
2626
name: 'Tree shaking (just a Button)',

‎src/components/GridProvider.tsx‎

Lines changed: 74 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -20,78 +20,77 @@ export interface CubeGridProviderProps {
2020
initialWidth?: Styles['width'];
2121
}
2222

23-
export const GridProvider = forwardRef(function GridProvider(
24-
props: CubeGridProviderProps,
25-
outerRef,
26-
) {
27-
let ref = useCombinedRefs(outerRef);
28-
29-
let {
30-
children,
31-
columns = 2,
32-
gap = '0',
33-
width: forcedWidth,
34-
initialWidth,
35-
} = props;
36-
37-
let [width, setWidth] = useState<Styles['width']>(
38-
forcedWidth || initialWidth || '100vw',
39-
);
40-
41-
const resizeCallback = useCallback(() => {
42-
const el = ref?.current?.parentElement;
43-
44-
if (!el) return;
45-
46-
const computedStyle = getComputedStyle(el);
47-
const containerWidth =
48-
el.clientWidth -
49-
parseFloat(computedStyle.paddingLeft) -
50-
parseFloat(computedStyle.paddingRight);
51-
52-
setWidth(`${containerWidth}px`);
53-
}, [ref, columns, gap]);
54-
55-
useEffect(() => {
56-
if (forcedWidth) return;
57-
58-
const el = ref && ref.current && ref.current.parentNode;
59-
60-
if (!el) return;
61-
62-
let sensor;
63-
64-
import('../utils/ResizeSensor')
65-
.then((module) => module.ResizeSensor)
66-
.then((ResizeSensor) => {
67-
sensor = new ResizeSensor(el, resizeCallback);
68-
});
69-
70-
return () => {
71-
if (sensor) {
72-
sensor.detach();
73-
}
74-
};
75-
}, [resizeCallback]);
76-
77-
useEffect(() => {
78-
if (forcedWidth) return;
79-
80-
resizeCallback();
81-
}, [resizeCallback]);
82-
83-
return (
84-
<GridElement
85-
{...filterBaseProps(props, { eventProps: true })}
86-
ref={ref}
87-
styles={{
88-
'--grid-width': width,
89-
'--columns-amount': columns,
90-
'--column-gap': gap,
91-
'--column-width': COLUMN_WIDTH,
92-
}}
93-
>
94-
{children}
95-
</GridElement>
96-
);
97-
});
23+
export const GridProvider = forwardRef<HTMLDivElement, CubeGridProviderProps>(
24+
function GridProvider(props, outerRef) {
25+
let ref = useCombinedRefs(outerRef);
26+
27+
let {
28+
children,
29+
columns = 2,
30+
gap = '0',
31+
width: forcedWidth,
32+
initialWidth,
33+
} = props;
34+
35+
let [width, setWidth] = useState<Styles['width']>(
36+
forcedWidth || initialWidth || '100vw',
37+
);
38+
39+
const resizeCallback = useCallback(() => {
40+
const el = ref?.current?.parentElement;
41+
42+
if (!el) return;
43+
44+
const computedStyle = getComputedStyle(el);
45+
const containerWidth =
46+
el.clientWidth -
47+
parseFloat(computedStyle.paddingLeft) -
48+
parseFloat(computedStyle.paddingRight);
49+
50+
setWidth(`${containerWidth}px`);
51+
}, [ref, columns, gap]);
52+
53+
useEffect(() => {
54+
if (forcedWidth) return;
55+
56+
const el = ref && ref.current && ref.current.parentNode;
57+
58+
if (!el) return;
59+
60+
let sensor;
61+
62+
import('../utils/ResizeSensor')
63+
.then((module) => module.ResizeSensor)
64+
.then((ResizeSensor) => {
65+
sensor = new ResizeSensor(el, resizeCallback);
66+
});
67+
68+
return () => {
69+
if (sensor) {
70+
sensor.detach();
71+
}
72+
};
73+
}, [resizeCallback]);
74+
75+
useEffect(() => {
76+
if (forcedWidth) return;
77+
78+
resizeCallback();
79+
}, [resizeCallback]);
80+
81+
return (
82+
<GridElement
83+
{...filterBaseProps(props, { eventProps: true })}
84+
ref={ref}
85+
styles={{
86+
'--grid-width': width,
87+
'--columns-amount': columns,
88+
'--column-gap': gap,
89+
'--column-width': COLUMN_WIDTH,
90+
}}
91+
>
92+
{children}
93+
</GridElement>
94+
);
95+
},
96+
);

‎src/components/fields/FilterPicker/FilterPicker.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { CollectionChildren } from '@react-types/shared';
22
import {
33
ForwardedRef,
44
forwardRef,
5-
MutableRefObject,
65
ReactElement,
76
ReactNode,
7+
RefObject,
88
useCallback,
99
useEffect,
1010
useMemo,
@@ -112,7 +112,7 @@ export interface CubeFilterPickerProps<T>
112112
| false;
113113

114114
/** Ref to access internal ListBox state (from FilterListBox) */
115-
listStateRef?: MutableRefObject<ListState<T>>;
115+
listStateRef?: RefObject<ListState<T>>;
116116
/** Additional modifiers for styling the FilterPicker */
117117
mods?: Record<string, boolean>;
118118
/** Whether the filter picker is clearable using a clear button in the rightIcon slot */

‎src/components/layout/Prefix.tsx‎

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -33,32 +33,31 @@ export interface CubePrefixProps extends BaseProps, ContainerStyleProps {
3333
outerGap?: CSSProperties['gap'];
3434
}
3535

36-
export const Prefix = forwardRef(function Prefix(
37-
allProps: CubePrefixProps,
38-
outerRef,
39-
) {
40-
let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
36+
export const Prefix = forwardRef<HTMLDivElement, CubePrefixProps>(
37+
function Prefix(allProps, outerRef) {
38+
let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
4139

42-
const styles = extractStyles(props, CONTAINER_STYLES);
43-
const ref = useCombinedRefs(outerRef);
40+
const styles = extractStyles(props, CONTAINER_STYLES);
41+
const ref = useCombinedRefs(outerRef);
4442

45-
useLayoutEffect(() => {
46-
if (ref?.current && onWidthChange) {
47-
onWidthChange(ref.current.offsetWidth);
48-
}
49-
}, [children, ref, onWidthChange]);
43+
useLayoutEffect(() => {
44+
if (ref?.current && onWidthChange) {
45+
onWidthChange(ref.current.offsetWidth);
46+
}
47+
}, [children, ref, onWidthChange]);
5048

51-
return (
52-
<PrefixElement
53-
{...filterBaseProps(props, { eventProps: true })}
54-
ref={ref}
55-
styles={styles}
56-
style={{
57-
// @ts-ignore
58-
'--prefix-gap': parseStyle(outerGap).output,
59-
}}
60-
>
61-
{children}
62-
</PrefixElement>
63-
);
64-
});
49+
return (
50+
<PrefixElement
51+
{...filterBaseProps(props, { eventProps: true })}
52+
ref={ref}
53+
styles={styles}
54+
style={{
55+
// @ts-ignore
56+
'--prefix-gap': parseStyle(outerGap).output,
57+
}}
58+
>
59+
{children}
60+
</PrefixElement>
61+
);
62+
},
63+
);

‎src/components/layout/Suffix.tsx‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -33,30 +33,29 @@ export interface CubeSuffixProps extends BaseProps, ContainerStyleProps {
3333
outerGap?: CSSProperties['gap'];
3434
}
3535

36-
export const Suffix = forwardRef(function Suffix(
37-
allProps: CubeSuffixProps,
38-
outerRef,
39-
) {
40-
let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
41-
const styles = extractStyles(props, CONTAINER_STYLES);
42-
const ref = useCombinedRefs(outerRef);
36+
export const Suffix = forwardRef<HTMLDivElement, CubeSuffixProps>(
37+
function Suffix(allProps, outerRef) {
38+
let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
39+
const styles = extractStyles(props, CONTAINER_STYLES);
40+
const ref = useCombinedRefs(outerRef);
4341

44-
useEffect(() => {
45-
if (ref && ref.current && onWidthChange) {
46-
onWidthChange(ref.current.offsetWidth);
47-
}
48-
}, [children, ref, onWidthChange]);
42+
useEffect(() => {
43+
if (ref && ref.current && onWidthChange) {
44+
onWidthChange(ref.current.offsetWidth);
45+
}
46+
}, [children, ref, onWidthChange]);
4947

50-
return (
51-
<SuffixElement
52-
{...filterBaseProps(props, { eventProps: true })}
53-
ref={ref}
54-
styles={styles}
55-
style={{
56-
'--suffix-gap': parseStyle(outerGap).output,
57-
}}
58-
>
59-
{children}
60-
</SuffixElement>
61-
);
62-
});
48+
return (
49+
<SuffixElement
50+
{...filterBaseProps(props, { eventProps: true })}
51+
ref={ref}
52+
styles={styles}
53+
style={{
54+
'--suffix-gap': parseStyle(outerGap).output,
55+
}}
56+
>
57+
{children}
58+
</SuffixElement>
59+
);
60+
},
61+
);

‎src/components/overlays/Dialog/DialogTrigger.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -296,8 +296,8 @@ function PopoverTrigger(allProps) {
296296
);
297297
}
298298

299-
function DialogTriggerBase(props) {
300-
const ref = useCombinedRefs(props.ref);
299+
function DialogTriggerBase(props: any) {
300+
const ref = useCombinedRefs<HTMLElement>(props.ref);
301301
const wasOpenRef = useRef(false);
302302

303303
let {

0 commit comments

Comments
 (0)