Bladeren bron

Add fallback ID hook

Use fallback ID hook instead of defining verbose React hooks.
master
TheoryOfNekomata 11 maanden geleden
bovenliggende
commit
0f0c823761
25 gewijzigde bestanden met toevoegingen van 57 en 45 verwijderingen
  1. +2
    -3
      categories/blob/react/src/components/FileSelectBox/index.tsx
  2. +1
    -0
      categories/choice/react/package.json
  3. +2
    -2
      categories/choice/react/src/components/ComboBox/index.tsx
  4. +2
    -2
      categories/choice/react/src/components/DropdownSelect/index.tsx
  5. +2
    -2
      categories/choice/react/src/components/MenuSelect/index.tsx
  6. +3
    -2
      categories/choice/react/src/components/RadioButton/index.tsx
  7. +3
    -2
      categories/choice/react/src/components/RadioTickBox/index.tsx
  8. +2
    -2
      categories/formatted/react/src/components/EmailInput/index.tsx
  9. +2
    -2
      categories/formatted/react/src/components/PatternTextInput/index.tsx
  10. +2
    -3
      categories/formatted/react/src/components/PhoneNumberInput/index.tsx
  11. +2
    -2
      categories/formatted/react/src/components/UrlInput/index.tsx
  12. +2
    -2
      categories/freeform/react/src/components/MultilineTextInput/index.tsx
  13. +2
    -2
      categories/freeform/react/src/components/TextInput/index.tsx
  14. +2
    -2
      categories/multichoice/react/src/components/MenuMultiSelect/index.tsx
  15. +2
    -3
      categories/multichoice/react/src/components/TagInput/index.tsx
  16. +2
    -2
      categories/multichoice/react/src/components/ToggleButton/index.tsx
  17. +2
    -2
      categories/multichoice/react/src/components/ToggleSwitch/index.tsx
  18. +2
    -2
      categories/multichoice/react/src/components/ToggleTickBox/index.tsx
  19. +1
    -0
      categories/number/react/package.json
  20. +2
    -2
      categories/number/react/src/components/NumberSpinner/index.tsx
  21. +1
    -0
      categories/temporal/react/package.json
  22. +2
    -2
      categories/temporal/react/src/components/DateDropdown/index.tsx
  23. +2
    -2
      categories/temporal/react/src/components/TimeSpinner/index.tsx
  24. +3
    -2
      packages/react-utils/src/event.ts
  25. +9
    -0
      pnpm-lock.yaml

+ 2
- 3
categories/blob/react/src/components/FileSelectBox/index.tsx Bestand weergeven

@@ -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) {


+ 1
- 0
categories/choice/react/package.json Bestand weergeven

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


+ 2
- 2
categories/choice/react/src/components/ComboBox/index.tsx Bestand weergeven

@@ -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') {


+ 2
- 2
categories/choice/react/src/components/DropdownSelect/index.tsx Bestand weergeven

@@ -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


+ 2
- 2
categories/choice/react/src/components/MenuSelect/index.tsx Bestand weergeven

@@ -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


+ 3
- 2
categories/choice/react/src/components/RadioButton/index.tsx Bestand weergeven

@@ -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


+ 3
- 2
categories/choice/react/src/components/RadioTickBox/index.tsx Bestand weergeven

@@ -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(


+ 2
- 2
categories/formatted/react/src/components/EmailInput/index.tsx Bestand weergeven

@@ -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


+ 2
- 2
categories/formatted/react/src/components/PatternTextInput/index.tsx Bestand weergeven

@@ -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') {


+ 2
- 3
categories/formatted/react/src/components/PhoneNumberInput/index.tsx Bestand weergeven

@@ -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,


+ 2
- 2
categories/formatted/react/src/components/UrlInput/index.tsx Bestand weergeven

@@ -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


+ 2
- 2
categories/freeform/react/src/components/MultilineTextInput/index.tsx Bestand weergeven

@@ -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


+ 2
- 2
categories/freeform/react/src/components/TextInput/index.tsx Bestand weergeven

@@ -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') {


+ 2
- 2
categories/multichoice/react/src/components/MenuMultiSelect/index.tsx Bestand weergeven

@@ -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


+ 2
- 3
categories/multichoice/react/src/components/TagInput/index.tsx Bestand weergeven

@@ -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) {


+ 2
- 2
categories/multichoice/react/src/components/ToggleButton/index.tsx Bestand weergeven

@@ -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') {


+ 2
- 2
categories/multichoice/react/src/components/ToggleSwitch/index.tsx Bestand weergeven

@@ -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') {


+ 2
- 2
categories/multichoice/react/src/components/ToggleTickBox/index.tsx Bestand weergeven

@@ -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') {


+ 1
- 0
categories/number/react/package.json Bestand weergeven

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


+ 2
- 2
categories/number/react/src/components/NumberSpinner/index.tsx Bestand weergeven

@@ -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


+ 1
- 0
categories/temporal/react/package.json Bestand weergeven

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


+ 2
- 2
categories/temporal/react/src/components/DateDropdown/index.tsx Bestand weergeven

@@ -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


+ 2
- 2
categories/temporal/react/src/components/TimeSpinner/index.tsx Bestand weergeven

@@ -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);


+ 3
- 2
packages/react-utils/src/event.ts Bestand weergeven

@@ -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;
}
};

+ 9
- 0
pnpm-lock.yaml Bestand weergeven

@@ -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


Laden…
Annuleren
Opslaan