Merge pull request #2214 from SpareBank1/develop_fjern-uuid

Develop fjern UUID
SpareBank1 · Aug 20, 2024 · 0000215 · 0000215
2 parents 781eac1 + e14cfb4
commit 0000215
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/packages/ffe-accordion-react/package.json b/packages/ffe-accordion-react/package.json
@@ -28,7 +28,6 @@
         "@sb1/ffe-accordion": "^10.0.30",
         "@sb1/ffe-collapse-react": "^5.0.5",
         "@sb1/ffe-icons-react": "^11.0.2",
-        "@types/uuid": "^9.0.0",
         "classnames": "^2.3.1"
     },
     "devDependencies": {

diff --git a/packages/ffe-form-react/src/ToggleSwitch.tsx b/packages/ffe-form-react/src/ToggleSwitch.tsx
@@ -1,5 +1,4 @@
-import React, { useRef } from 'react';
-import { v4 as uuidv4 } from 'uuid';
+import React, { useId } from 'react';
 import classNames from 'classnames';
 import i18n from './i18n/i18n';
 
@@ -26,13 +25,15 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
     hideOnOff,
     onText,
     offText,
-    id,
+    id: providedId,
     value = 'on',
     locale = 'nb',
     checked,
     ...rest
 }) => {
-    const generatedId = useRef(id ?? `toggle-${uuidv4()}`).current;
+    const generatedId = useId();
+
+    const id = providedId ?? generatedId;
 
     const text = i18n[locale];
 
@@ -47,12 +48,12 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
             <input
                 className="ffe-toggle-switch__input"
                 type="checkbox"
-                id={generatedId}
+                id={id}
                 value={value}
                 checked={!!checked}
                 {...rest}
             />
-            <label className="ffe-toggle-switch__label" htmlFor={generatedId}>
+            <label className="ffe-toggle-switch__label" htmlFor={id}>
                 <span className="ffe-toggle-switch__label-text">
                     {children}
                     {description && (

diff --git a/packages/ffe-tables-react/src/TableRowExpandable.tsx b/packages/ffe-tables-react/src/TableRowExpandable.tsx
@@ -1,9 +1,8 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useId } from 'react';
 import classNames from 'classnames';
 import { Icon } from '@sb1/ffe-icons-react';
 import { Collapse } from '@sb1/ffe-collapse-react';
 import { txt } from './texts';
-import { v4 as uuid } from 'uuid';
 import { CellContent } from './CellContent';
 
 export interface TableRowExpandableProps
@@ -30,7 +29,7 @@ export const TableRowExpandable = React.forwardRef<
         ref,
     ) => {
         const [isOpen, setIsOpen] = useState(!!isDefaultOpen);
-        const expandoRowId = useRef(`check-${uuid()}`).current;
+        const expandoRowId = useId();
         const [isAnimating, setIsAnimating] = useState(false);
         const expandButtonRef = useRef<HTMLButtonElement>(null);