refactor(select): ♻️ add optional chain & memoize

Author: navin-moorthy

src/select/SelectBase.tsx

@@ -6,16 +6,15 @@ import {
 } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 
-import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
-import { cx } from "../utils";
+import { cx, tcm } from "../utils";
 
 import { SelectUIProps } from "./SelectProps";
 
 export const useSelectBase = createHook<SelectBaseOptions>(
   ({ prefix, suffix, size, variant, invalid, loading, spinner, ...props }) => {
     const theme = useTheme("select");
-    const className = cx(
+    const className = tcm(
       theme.base,
       size ? theme.size[size]?.base?.default : "",
       size && (!prefix || !suffix) ? theme.size[size]?.base?.withoutAddon : "",
@@ -35,7 +34,6 @@ export const useSelectBase = createHook<SelectBaseOptions>(
     );
 
     props = { "aria-invalid": invalid, ...props, className };
-    props = useBox(props);
     props = useFocusable(props);
 
     return props;
@@ -48,8 +46,7 @@ export const SelectBase = createComponent<SelectBaseOptions>(props => {
   return createElement("select", htmlProps);
 });
 
-export type SelectBaseOptions<T extends As = "select"> = BoxOptions<T> &
-  FocusableOptions<T> &
+export type SelectBaseOptions<T extends As = "select"> = FocusableOptions<T> &
   Partial<SelectUIProps> & {};
 
 export type SelectBaseProps<T extends As = "select"> = Props<

src/select/SelectPrefix.tsx

@@ -27,19 +27,19 @@ export const useSelectPrefix = createHook<SelectPrefixOptions>(
     const theme = useTheme("select");
     const className = cx(
       theme.prefix,
-      size ? theme.size[size].prefix : "",
+      size ? theme.size[size]?.prefix : "",
       disabled
         ? ""
         : variant
         ? cx(
-            theme.variant[variant].default.prefix,
-            theme.variant[variant].hover.prefix,
-            theme.variant[variant].active.prefix,
-            theme.variant[variant].focus.prefix,
-            invalid ? theme.variant[variant].invalid.prefix : "",
+            theme.variant[variant]?.default?.prefix,
+            theme.variant[variant]?.hover?.prefix,
+            theme.variant[variant]?.active?.prefix,
+            theme.variant[variant]?.focus?.prefix,
+            invalid ? theme.variant[variant]?.invalid?.prefix : "",
           )
         : "",
-      variant && disabled ? theme.variant[variant].disabled.prefix : "",
+      variant && disabled ? theme.variant[variant]?.disabled?.prefix : "",
       props.className,
     );
 

src/select/SelectProps.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useSafeLayoutEffect } from "ariakit-utils";
+import { useForkRef, useSafeLayoutEffect } from "ariakit-utils";
 
 import { getComponentProps, RenderProp, runIfFn, withIconA11y } from "../utils";
 
@@ -67,8 +67,16 @@ export const useSelectProps = ({
   uiProps = { ...uiProps, prefix: _prefix, suffix: _suffix };
 
   const selectInlineStyles = React.useRef<Record<string, any>>({});
-  const prefixRef = React.useRef<HTMLElement>(null);
-  const suffixRef = React.useRef<HTMLElement>(null);
+  let prefixRef = React.useRef<HTMLElement>(null);
+  let suffixRef = React.useRef<HTMLElement>(null);
+  prefixRef = useForkRef(
+    prefixRef,
+    componentProps?.prefixProps?.ref,
+  ) as unknown as React.RefObject<HTMLElement>;
+  suffixRef = useForkRef(
+    suffixRef,
+    componentProps?.suffixProps?.ref,
+  ) as unknown as React.RefObject<HTMLElement>;
 
   useSafeLayoutEffect(() => {
     let key = "";
@@ -94,38 +102,49 @@ export const useSelectProps = ({
     setHasPaddingCalculated(true);
   }, [uiProps.prefix, uiProps.suffix]);
 
-  const wrapperProps: SelectWrapperProps = {
-    ...uiProps,
-    className,
-    style,
-    ...componentProps.wrapperProps,
-  };
-
-  const baseProps: SelectBaseProps = {
-    ...uiProps,
-    disabled,
-    ...restProps,
-    style: { ...selectInlineStyles.current },
-    children: finalChildren,
-    ...componentProps.baseProps,
-  };
+  const wrapperProps: SelectWrapperProps = React.useMemo(
+    () => ({
+      ...uiProps,
+      className,
+      style,
+      ...componentProps.wrapperProps,
+    }),
+    [className, componentProps.wrapperProps, style, uiProps],
+  );
 
-  const prefixProps: SelectPrefixProps = {
-    ...uiProps,
-    disabled,
-    ...componentProps.prefixProps,
-    ref: prefixRef,
-    children: withIconA11y(runIfFn(uiProps.prefix, uiProps)),
-  };
+  const baseProps: SelectBaseProps = React.useMemo(
+    () => ({
+      ...uiProps,
+      disabled,
+      ...restProps,
+      style: { ...selectInlineStyles.current },
+      ...componentProps.baseProps,
+      children: finalChildren,
+    }),
+    [componentProps.baseProps, disabled, finalChildren, restProps, uiProps],
+  );
 
-  const suffixProps: SelectSuffixProps = {
-    ...uiProps,
-    disabled,
-    ...componentProps.suffixProps,
-    ref: suffixRef,
-    children: uiProps.suffix,
-  };
+  const prefixProps: SelectPrefixProps = React.useMemo(
+    () => ({
+      ...uiProps,
+      disabled,
+      ...componentProps.prefixProps,
+      ref: prefixRef,
+      children: withIconA11y(runIfFn(uiProps.prefix, uiProps)),
+    }),
+    [componentProps.prefixProps, disabled, uiProps],
+  );
 
+  const suffixProps: SelectSuffixProps = React.useMemo(
+    () => ({
+      ...uiProps,
+      disabled,
+      ...componentProps.suffixProps,
+      ref: suffixRef,
+      children: uiProps.suffix,
+    }),
+    [componentProps.suffixProps, disabled, uiProps],
+  );
   return {
     uiProps,
     wrapperProps,