diff --git a/package-lock.json b/package-lock.json index 50bb177..70cc407 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "@storybook/addon-vitest": "^10.1.0", "@storybook/react-vite": "^10.1.0", "@svgr/webpack": "^6.5.1", + "@types/dkfds": "^11.1.0", "@types/react-dom": "^19.1.7", "@typescript-eslint/eslint-plugin": "^8.32.0", "@typescript-eslint/parser": "^8.32.0", @@ -4120,6 +4121,13 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/dkfds": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/@types/dkfds/-/dkfds-11.1.0.tgz", + "integrity": "sha512-XjZzCgI/f+3PQgHqVaQRXx3vg94YD8LWrEEjDgLxgrOBRommXrCgSGmEB+35jW9mD1ITHUxyRA1Q3DYCl+TeMw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/doctrine": { "version": "0.0.9", "resolved": "https://registry.npmjs.org/@types/doctrine/-/doctrine-0.0.9.tgz", diff --git a/package.json b/package.json index 4c62388..bcd7db0 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@types/react-dom": "^19.1.7", "@typescript-eslint/eslint-plugin": "^8.32.0", "@typescript-eslint/parser": "^8.32.0", + "@types/dkfds": "^11.1.0", "@vitest/browser": "^3.2.4", "@vitest/coverage-v8": "^3.2.4", "dkfds": "^11.2.0", diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx index cab574e..e3b3bbd 100644 --- a/src/components/DatePicker/DatePicker.tsx +++ b/src/components/DatePicker/DatePicker.tsx @@ -1,5 +1,5 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ import { ComponentProps, ReactNode, useEffect, useId, useRef } from "react"; +import { datePicker } from "dkfds"; import { HTMLInputPropsWithRequiredFields } from "../../types/html-props"; import { Tooltip, TooltipProps } from "../Tooltip/Tooltip"; import { mergeStrings } from "../../util/merge-classnames"; @@ -53,19 +53,9 @@ export function DatePicker({ useEffect(() => { if (ref.current === null) return; const currentRef = ref.current; - if (!(window as any).DKFDS) { - const dkfds = import("dkfds"); - dkfds.then((dkfds) => { - (window as any).DKFDS = dkfds; - (window as any).DKFDS.datePicker.on(ref.current!); - }); - } else { - (window as any).DKFDS.datePicker.on(ref.current!); - } + datePicker.on(currentRef); return () => { - if ((window as any).DKFDS.datePicker && currentRef) { - (window as any).DKFDS.datePicker.off(currentRef); - } + datePicker.off(currentRef); }; }, [ref]); const t = useT(); diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 726d6bc..65e3200 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ import { forwardRef, useEffect, @@ -7,6 +6,7 @@ import { useRef, useState, } from "react"; +import { Tooltip as DkfdsTooltip } from "dkfds"; import { Button } from "../.."; import { mergeStrings } from "../../util/merge-classnames"; import { IconName } from "../../types/icon-names"; @@ -49,12 +49,12 @@ export const Tooltip = forwardRef(function Tooltip( forwardedRef: React.Ref, ) { const id = useId(); - const [tooltipRef, setTooltipRef] = useState(); + const [tooltipRef, setTooltipRef] = useState(); useImperativeHandle(forwardedRef, (): TooltipRef => { return { hideTooltip: () => tooltipRef?.hideTooltip(), showTooltip: () => tooltipRef?.showTooltip(), - isShowing: () => tooltipRef?.isShowing(), + isShowing: () => tooltipRef?.isShowing() ?? false, updateTooltipPosition: () => tooltipRef?.updateTooltipPosition(), }; }, [tooltipRef]); @@ -62,19 +62,9 @@ export const Tooltip = forwardRef(function Tooltip( useEffect(() => { if (ref.current === null) return; - if (!(window as any).DKFDS) { - const dkfds = import("dkfds"); - dkfds.then((dkfds) => { - (window as any).DKFDS = dkfds; - const tooltipInstance = new (window as any).DKFDS.Tooltip(ref.current!); - tooltipInstance.init(); - setTooltipRef(tooltipInstance); - }); - } else { - const tooltipInstance = new (window as any).DKFDS.Tooltip(ref.current!); - tooltipInstance.init(); - setTooltipRef(tooltipInstance); - } + const tooltipInstance = new DkfdsTooltip(ref.current); + tooltipInstance.init(); + setTooltipRef(tooltipInstance); }, [ref]); const Container = inText || inline ? "span" : "div";