added ComboBox, Dropdown, NumberInput, ToggleButton

Author: mark-tate

packages/core/src/combo-box/ComboBox.tsx

@@ -7,6 +7,7 @@ import {
   useFocus,
   useInteractions,
 } from "@floating-ui/react";
+import { useInjectedClassName } from "@salt-ds/styles";
 import { clsx } from "clsx";
 import {
   type ChangeEvent,
@@ -63,13 +64,22 @@ export type ComboBoxProps<Item = string> = {
 
 const withBaseName = makePrefixer("saltComboBox");
 
+declare module "@salt-ds/core" {
+  interface ComponentPropMap {
+    ComboBox: ComboBoxProps;
+  }
+}
+
 export const ComboBox = forwardRef(function ComboBox<Item>(
   props: ComboBoxProps<Item>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
+  const { className, props: finalProps } = useInjectedClassName(
+    "saltComboBox",
+    props,
+  );
   const {
     children,
-    className,
     disabled: disabledProp,
     endAdornment: endAdornmentProp,
     readOnly: readOnlyProp,
@@ -95,7 +105,7 @@ export const ComboBox = forwardRef(function ComboBox<Item>(
     bordered = false,
     OverlayProps,
     ...rest
-  } = props;
+  } = finalProps;
 
   const { CollapseIcon, ExpandIcon } = useIcon();
   const {

packages/core/src/dropdown/Dropdown.tsx

@@ -7,7 +7,10 @@ import {
   useFocus,
   useInteractions,
 } from "@floating-ui/react";
-import { useComponentCssInjection } from "@salt-ds/styles";
+import {
+  useComponentCssInjection,
+  useInjectedClassName,
+} from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
 import {
@@ -114,15 +117,24 @@ function ExpandIcon({ open }: { open: boolean }) {
   );
 }
 
+declare module "@salt-ds/core" {
+  interface ComponentPropMap {
+    Dropdown: DropdownProps;
+  }
+}
+
 export const Dropdown = forwardRef(function Dropdown<Item>(
   props: DropdownProps<Item>,
   ref: ForwardedRef<HTMLButtonElement>,
 ) {
+  const { className, props: finalProps } = useInjectedClassName(
+    "saltDropdown",
+    props,
+  );
   const {
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
     children,
-    className,
     disabled: disabledProp,
     emptyReadOnlyMarker = "—",
     readOnly: readOnlyProp,
@@ -146,7 +158,7 @@ export const Dropdown = forwardRef(function Dropdown<Item>(
     bordered = false,
     OverlayProps,
     ...rest
-  } = props;
+  } = finalProps;
 
   const targetWindow = useWindow();
   useComponentCssInjection({

packages/core/src/number-input/NumberInput.tsx

@@ -1,4 +1,7 @@
-import { useComponentCssInjection } from "@salt-ds/styles";
+import {
+  useComponentCssInjection,
+  useInjectedClassName,
+} from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
 import {
@@ -267,12 +270,21 @@ const defaultParse = (value: string, decimalScale: number): number | null => {
   return Number.parseFloat(floatString);
 };
 
+declare module "@salt-ds/core" {
+  interface ComponentPropMap {
+    NumberInput: NumberInputProps;
+  }
+}
+
 export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(
-  function NumberInput(
-    {
+  function NumberInput(props, ref) {
+    const { className, props: finalProps } = useInjectedClassName(
+      "saltNumberInput",
+      props,
+    );
+    const {
       "aria-valuetext": ariaValueTextProp,
       bordered,
-      className,
       clamp,
       step = 1,
       stepMultiplier = 2,
@@ -307,9 +319,7 @@ export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(
       validationStatus: validationStatusProp,
       variant = "primary",
       ...restProps
-    },
-    ref,
-  ) {
+    } = finalProps;
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-number-input",

packages/core/src/toggle-button/ToggleButton.tsx

@@ -1,4 +1,7 @@
-import { useComponentCssInjection } from "@salt-ds/styles";
+import {
+  useComponentCssInjection,
+  useInjectedClassName,
+} from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
 import {
@@ -50,12 +53,21 @@ export interface ToggleButtonProps extends ComponentPropsWithoutRef<"button"> {
 
 const withBaseName = makePrefixer("saltToggleButton");
 
+declare module "@salt-ds/core" {
+  interface ComponentPropMap {
+    ToggleButton: ToggleButtonProps;
+  }
+}
+
 export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
   function ToggleButton(props, ref) {
+    const { className, props: finalProps } = useInjectedClassName(
+      "saltButton",
+      props,
+    );
     const {
       appearance: appearanceProp,
       children,
-      className,
       disabled: disabledProp,
       value,
       onClick,
@@ -66,7 +78,7 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
       defaultSelected,
       sentiment: sentimenentProp,
       ...rest
-    } = props;
+    } = finalProps;
 
     const targetWindow = useWindow();
     useComponentCssInjection({