Replace hashids with useId hook

package.json

@@ -125,7 +125,6 @@
     "flow-bin": "0.176.3",
     "flow-typed": "3.8.0",
     "glob": "7.2.3",
-    "hashids": "2.2.10",
     "http-server": "14.1.1",
     "is-class": "0.0.9",
     "jest": "27.5.1",

src/PieMenu.component.js

@@ -31,6 +31,7 @@ type Metadata = {
 };
 
 export type Props = {
+  containerId: string,
   slices: { itemId: string, slice: React.Node[] }[],
   startOffsetAngle?: number,
   polar: boolean,
@@ -39,6 +40,7 @@ export type Props = {
 } & Context & Metadata;
 
 const PieMenu = ({
+  containerId,
   className,
   startOffsetAngle = 0,
   radius,
@@ -73,7 +75,7 @@ const PieMenu = ({
     for (let i = 0; i < elements.length; i += 1) {
       const element = elements[i];
       if (element.id === 'center') return null;
-      if (`${element.id}`.startsWith('slice_')) return element;
+      if (`${element.id}`.startsWith(`${containerId}_slice_`)) return element;
     }
     return null;
   };

src/PieMenu.container.js

@@ -3,22 +3,19 @@ import * as React from 'react';
 import { isFragment, isElement } from 'react-is';
 import { ThemeContextProvider } from 'styled-components-theme-connector';
 import toPx from 'to-px';
-import Hashids from 'hashids';
 
 import PieMenu from './PieMenu.component.js';
 import type { Props as BaseProps } from './PieMenu.component.js';
 
-const hashids = new Hashids();
-
-const getSlices = (child, index) => {
+const getSlices = (containerId, child, index) => {
   let slices = [];
   if (isFragment(child)) {
     React.Children.forEach(child.props.children, (slice, i) => {
-      slices = [...slices, ...getSlices(slice, index + i)];
+      slices = [...slices, ...getSlices(containerId, slice, index + i)];
     });
   } else if (isElement(child)) {
     return [{
-      itemId: `slice_${hashids.encode(new Date().getTime() + index)}`,
+      itemId: `${containerId}_slice_${index}`,
       slice: child,
     }];
   }
@@ -35,12 +32,13 @@ export default (({
   children,
   ...props
 }: Props) => {
+  const id = React.useId();
   let slices = [];
   let index = 0;
   React.Children.forEach(children, (child, i) => {
     slices = [
       ...slices,
-      ...getSlices(child, index + i),
+      ...getSlices(id, child, index + i),
     ];
     index = Math.max(0, slices.length - 1);
   });
@@ -58,7 +56,7 @@ export default (({
   };
   return (
     <ThemeContextProvider {...context}>
-      <PieMenu {...props} {...context} {...metadata} slices={slices} />
+      <PieMenu {...props} {...context} {...metadata} containerId={id} slices={slices} />
     </ThemeContextProvider>
   );
 }: React.ComponentType<Props>);

yarn.lock

@@ -12836,13 +12836,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hashids@npm:2.2.10":
-  version: 2.2.10
-  resolution: "hashids@npm:2.2.10"
-  checksum: b65982baec1f184e287c9f2ae80303cc62ad752bdb742271754f82b81f7fdde987456d8a0440a1f8639af07fafa402a10ef77674d524247c098be07de3a765c8
-  languageName: node
-  linkType: hard
-
 "hast-to-hyperscript@npm:^9.0.0":
   version: 9.0.1
   resolution: "hast-to-hyperscript@npm:9.0.1"
@@ -18064,7 +18057,6 @@ __metadata:
     flow-bin: 0.176.3
     flow-typed: 3.8.0
     glob: 7.2.3
-    hashids: 2.2.10
     http-server: 14.1.1
     is-class: 0.0.9
     jest: 27.5.1