Add fallback ID hook

Use fallback ID hook instead of defining verbose React hooks.

categories/blob/react/src/components/FileSelectBox/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { delegateTriggerEvent, useClientSide } from '@modal-sh/react-utils';
+import { useClientSide, useFallbackId } from '@modal-sh/react-utils';
 import clsx from 'clsx';
 
 export interface CommonPreviewProps<F extends Partial<File> = Partial<File>> {
@@ -64,8 +64,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
     const defaultRef = React.useRef<HTMLInputElement>(null);
     const ref = forwardedRef ?? defaultRef;
     const labelId = React.useId();
-    const defaultId = React.useId();
-    const id = idProp ?? defaultId;
+    const id = useFallbackId(idProp);
 
     const doSetFileList: React.ChangeEventHandler<HTMLInputElement> = (e) => {
       if (enhancedProp) {

categories/choice/react/package.json

@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "@tesseract-design/web-base": "workspace:*",
+    "@modal-sh/react-utils": "workspace:*",
     "clsx": "^1.2.1",
     "tailwindcss": "3.3.2"
   },

categories/choice/react/src/components/ComboBox/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
+import { useFallbackId } from '@modal-sh/react-utils';
 import clsx from 'clsx';
 
 /**
@@ -85,8 +86,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
 ) => {
   const labelId = React.useId();
   const datalistId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   let resultInputMode = inputMode as React.HTMLProps<ComboBoxDerivedElement>['inputMode'];
   if (type === 'text' && resultInputMode === 'search') {

categories/choice/react/src/components/DropdownSelect/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import plugin from 'tailwindcss/plugin';
 import clsx from 'clsx';
+import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
  * Derived HTML element of the {@link DropdownSelect} component.
@@ -85,8 +86,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
   forwardedRef,
 ) => {
   const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   return (
     <div

categories/choice/react/src/components/MenuSelect/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
 import plugin from 'tailwindcss/plugin';
+import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
  * Derived HTML element of the {@link MenuSelect} component.
@@ -93,8 +94,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
   forwardedRef,
 ) => {
   const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   return (
     <div

categories/choice/react/src/components/RadioButton/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { Button } from '@tesseract-design/web-base';
 import plugin from 'tailwindcss/plugin';
+import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
  * Derived HTML element of the {@link RadioButton} component.
@@ -72,8 +73,8 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt
   },
   forwardedRef,
 ) => {
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
+
   return (
     <>
       <input

categories/choice/react/src/components/RadioTickBox/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import plugin from 'tailwindcss/plugin';
+import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
  * Derived HTML element of the {@link RadioTickBox} component.
@@ -51,8 +52,8 @@ export const RadioTickBox = React.forwardRef<RadioTickBoxDerivedElement, RadioTi
   },
   forwardedRef,
 ) => {
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
+
   return (
     <div
       className={clsx(

categories/formatted/react/src/components/EmailInput/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
+import {useFallbackId} from '@modal-sh/react-utils';
 
 export type EmailInputDerivedElement = HTMLInputElement;
 
@@ -66,8 +67,7 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
     forwardedRef,
   ) => {
     const labelId = React.useId();
-    const defaultId = React.useId();
-    const id = idProp ?? defaultId;
+    const id = useFallbackId(idProp);
 
     const pattern = (
       Array.isArray(domains) && domains.length > 0

categories/formatted/react/src/components/PatternTextInput/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
+import {useFallbackId} from '@modal-sh/react-utils';
 
 export type PatternTextInputDerivedElement = HTMLInputElement;
 
@@ -80,8 +81,7 @@ export const PatternTextInput = React.forwardRef<
   forwardedRef,
 ) => {
   const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   let resultInputMode = inputMode as React.HTMLProps<PatternTextInputDerivedElement>['inputMode'];
   if (type === 'text' && resultInputMode === 'search') {

categories/formatted/react/src/components/PhoneNumberInput/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
-import { useClientSide, useProxyInput } from '@modal-sh/react-utils';
+import {useClientSide, useFallbackId, useProxyInput} from '@modal-sh/react-utils';
 import PhoneInput, { Country, Value } from 'react-phone-number-input/input';
 import clsx from 'clsx';
 
@@ -83,8 +83,7 @@ export const PhoneNumberInput = React.forwardRef<
     value?.toString() ?? defaultValue?.toString() ?? '',
   );
   const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
   const {
     defaultRef,
     handleChange: handlePhoneInputChange,

categories/formatted/react/src/components/UrlInput/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
+import {useFallbackId} from '@modal-sh/react-utils';
 
 export type UrlInputDerivedElement = HTMLInputElement;
 
@@ -60,8 +61,7 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
   forwardedRef,
 ) => {
   const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   return (
     <div

categories/freeform/react/src/components/MultilineTextInput/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
+import {useFallbackId} from '@modal-sh/react-utils';
 
 export type MultilineTextInputDerivedElement = HTMLTextAreaElement;
 
@@ -65,8 +66,7 @@ export const MultilineTextInput = React.forwardRef<
   forwardedRef,
 ) => {
   const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   return (
     <div

categories/freeform/react/src/components/TextInput/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
+import {useFallbackId} from '@modal-sh/react-utils';
 
 export type TextInputDerivedElement = HTMLInputElement;
 
@@ -77,8 +78,7 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
   forwardedRef,
 ) => {
   const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   let resultInputMode = inputMode as React.HTMLProps<TextInputDerivedElement>['inputMode'];
   if (type === 'text' && resultInputMode === 'search') {

categories/multichoice/react/src/components/MenuMultiSelect/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
 import plugin from 'tailwindcss/plugin';
+import {useFallbackId} from '@modal-sh/react-utils';
 
 export type MenuMultiSelectDerivedElement = HTMLSelectElement;
 
@@ -92,8 +93,7 @@ export const MenuMultiSelect = React.forwardRef<
   forwardedRef,
 ) => {
   const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   return (
     <div

categories/multichoice/react/src/components/TagInput/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TagsInput } from 'react-tag-input-component';
 import clsx from 'clsx';
-import { useClientSide, useProxyInput } from '@modal-sh/react-utils';
+import {useClientSide, useFallbackId, useProxyInput} from '@modal-sh/react-utils';
 import { TextControl } from '@tesseract-design/web-base';
 import plugin from 'tailwindcss/plugin';
 
@@ -260,8 +260,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
   });
   const ref = forwardedRef ?? defaultRef;
   const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   const handleFocus: React.FocusEventHandler<TagInputDerivedElement> = (e) => {
     if (!clientSide) {

categories/multichoice/react/src/components/ToggleButton/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { Button } from '@tesseract-design/web-base';
 import plugin from 'tailwindcss/plugin';
+import {useFallbackId} from '@modal-sh/react-utils';
 
 export type ToggleButtonDerivedElement = HTMLInputElement;
 
@@ -52,8 +53,7 @@ export const ToggleButton = React.forwardRef<ToggleButtonDerivedElement, ToggleB
 ) => {
   const defaultRef = React.useRef<ToggleButtonDerivedElement>(null);
   const ref = forwardedRef ?? defaultRef;
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   React.useEffect(() => {
     if (typeof ref === 'function') {

categories/multichoice/react/src/components/ToggleSwitch/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import plugin from 'tailwindcss/plugin';
+import {useFallbackId} from '@modal-sh/react-utils';
 
 export type ToggleSwitchDerivedElement = HTMLInputElement;
 
@@ -149,8 +150,7 @@ export const ToggleSwitch = React.forwardRef<ToggleSwitchDerivedElement, ToggleS
 ) => {
   const defaultRef = React.useRef<ToggleSwitchDerivedElement>(null);
   const ref = forwardedRef ?? defaultRef;
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   React.useEffect(() => {
     if (typeof ref === 'function') {

categories/multichoice/react/src/components/ToggleTickBox/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import plugin from 'tailwindcss/plugin';
+import {useFallbackId} from '@modal-sh/react-utils';
 
 export type ToggleTickBoxDerivedElement = HTMLInputElement;
 
@@ -44,8 +45,7 @@ export const ToggleTickBox = React.forwardRef<ToggleTickBoxDerivedElement, Toggl
 ) => {
   const defaultRef = React.useRef<ToggleTickBoxDerivedElement>(null);
   const ref = forwardedRef ?? defaultRef;
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   React.useEffect(() => {
     if (typeof ref === 'function') {

categories/number/react/package.json

@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "@tesseract-design/web-base": "workspace:*",
+    "@modal-sh/react-utils": "workspace:*",
     "clsx": "^1.2.1",
     "tailwindcss": "3.3.3"
   },

categories/number/react/src/components/NumberSpinner/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
 import plugin from 'tailwindcss/plugin';
+import {useFallbackId} from '@modal-sh/react-utils';
 
 export type NumberSpinnerDerivedElement = HTMLInputElement;
 
@@ -81,8 +82,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
   forwardedRef,
 ) => {
   const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   return (
     <div

categories/temporal/react/package.json

@@ -59,6 +59,7 @@
   },
   "dependencies": {
     "@tesseract-design/web-base": "workspace:*",
+    "@modal-sh/react-utils": "workspace:*",
     "clsx": "^1.2.1",
     "tailwindcss": "3.3.3"
   },

categories/temporal/react/src/components/DateDropdown/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
 import plugin from 'tailwindcss/plugin';
+import {useFallbackId} from '@modal-sh/react-utils';
 
 export type DateDropdownDerivedElement = HTMLInputElement;
 
@@ -90,8 +91,7 @@ export const DateDropdown = React.forwardRef<
   forwardedRef,
 ) => {
   const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   return (
     <div

categories/temporal/react/src/components/TimeSpinner/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
 import plugin from 'tailwindcss/plugin';
+import {useFallbackId} from '@modal-sh/react-utils';
 
 export type TimeSpinnerDerivedElement = HTMLInputElement;
 
@@ -105,8 +106,7 @@ export const TimeSpinner = React.forwardRef<
   forwardedRef,
 ) => {
   const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
+  const id = useFallbackId(idProp);
 
   const [hh, mm, ss = 0] = step.split(':').map((s: string) => parseInt(s, 10)) as number[];
   const stepValue = ss + (mm * 60) + (hh * 3600);

packages/react-utils/src/event.ts

@@ -13,7 +13,9 @@ export const delegateTriggerEvent = <T extends HTMLElement>(
     'TEXTAREA': window.HTMLTextAreaElement,
   } as const;
 
-  const { [target.tagName as keyof typeof TAG_NAME_ELEMENT_CONSTRUCTOR]: elementCtor } = TAG_NAME_ELEMENT_CONSTRUCTOR;
+  const {
+    [target.tagName as keyof typeof TAG_NAME_ELEMENT_CONSTRUCTOR]: elementCtor,
+  } = TAG_NAME_ELEMENT_CONSTRUCTOR;
 
   if (!elementCtor) {
     return;
@@ -31,6 +33,5 @@ export const delegateTriggerEvent = <T extends HTMLElement>(
       const simulatedEvent = new Event(eventName, {bubbles: true});
       target.dispatchEvent(simulatedEvent);
     }
-    return;
   }
 };

pnpm-lock.yaml

@@ -145,6 +145,9 @@ importers:
 
   categories/choice/react:
     dependencies:
+      '@modal-sh/react-utils':
+        specifier: workspace:*
+        version: link:../../../packages/react-utils
       '@tesseract-design/web-base':
         specifier: workspace:*
         version: link:../../../base
@@ -584,6 +587,9 @@ importers:
 
   categories/number/react:
     dependencies:
+      '@modal-sh/react-utils':
+        specifier: workspace:*
+        version: link:../../../packages/react-utils
       '@tesseract-design/web-base':
         specifier: workspace:*
         version: link:../../../base
@@ -648,6 +654,9 @@ importers:
 
   categories/temporal/react:
     dependencies:
+      '@modal-sh/react-utils':
+        specifier: workspace:*
+        version: link:../../../packages/react-utils
       '@tesseract-design/web-base':
         specifier: workspace:*
         version: link:../../../base