From 7f75c26861fcab4209c9f8070dec048c9a4ee272 Mon Sep 17 00:00:00 2001 From: Johannes Marbach Date: Mon, 25 Sep 2023 20:21:59 +0200 Subject: [PATCH 1/2] Ponyfill useId Fixes: #224 --- src/components/ActionControl/ActionControl.tsx | 3 ++- src/utils/useId.ts | 16 ++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 src/utils/useId.ts diff --git a/src/components/ActionControl/ActionControl.tsx b/src/components/ActionControl/ActionControl.tsx index 278c050c..99f93778 100644 --- a/src/components/ActionControl/ActionControl.tsx +++ b/src/components/ActionControl/ActionControl.tsx @@ -15,10 +15,11 @@ limitations under the License. */ import classnames from "classnames"; -import React, { PropsWithChildren, useId, forwardRef } from "react"; +import React, { PropsWithChildren, forwardRef } from "react"; import styles from "./ActionControl.module.css"; import { Control, Field, Root } from "../Form"; +import useId from "../../utils/useId"; type ActionControlProps = { /** diff --git a/src/utils/useId.ts b/src/utils/useId.ts new file mode 100644 index 00000000..a2eeffee --- /dev/null +++ b/src/utils/useId.ts @@ -0,0 +1,16 @@ +import * as React from 'react'; + +const react18UseId = (React as { useId?: () => string }).useId; + +const getUniqueId = (() => { + let index = 1; + return () => `:r${index++}:`; +})(); + +const useIdPonyFill = (): string => { + return React.useMemo(getUniqueId, []); +}; + +const useId = (typeof react18UseId === "function") ? react18UseId : useIdPonyFill; + +export default useId; From fa5fef7b29fd21b71a08e2da3ed4c14947634b91 Mon Sep 17 00:00:00 2001 From: Johannes Marbach Date: Mon, 25 Sep 2023 20:26:51 +0200 Subject: [PATCH 2/2] Appease the linter --- src/utils/useId.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/useId.ts b/src/utils/useId.ts index a2eeffee..4c9cde6d 100644 --- a/src/utils/useId.ts +++ b/src/utils/useId.ts @@ -1,4 +1,4 @@ -import * as React from 'react'; +import * as React from "react"; const react18UseId = (React as { useId?: () => string }).useId; @@ -11,6 +11,6 @@ const useIdPonyFill = (): string => { return React.useMemo(getUniqueId, []); }; -const useId = (typeof react18UseId === "function") ? react18UseId : useIdPonyFill; +const useId = typeof react18UseId === "function" ? react18UseId : useIdPonyFill; export default useId;