From c48aedd36e258a6f9a7673b0d05a4e9b484f0d14 Mon Sep 17 00:00:00 2001
From: mainframev <vgenaev@gmail.com>
Date: Mon, 2 Sep 2024 10:45:56 +0200
Subject: [PATCH] fixup! fixup! feat(react-keytips): draft implementation

---
 .../src/components/Keytip/Keytip.types.ts     | 22 +++++++++----------
 .../Keytip/useKeytipStyles.styles.ts          |  8 +++----
 packages/react-keytips/src/hooks/useTree.ts   |  3 +--
 .../react-keytips/src/utilities/createNode.ts |  2 +-
 .../react-keytips/stories/Dynamic.stories.tsx |  2 +-
 .../stories/WithTabs.stories.tsx              |  8 +++----
 6 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/packages/react-keytips/src/components/Keytip/Keytip.types.ts b/packages/react-keytips/src/components/Keytip/Keytip.types.ts
index a57cbac9..9d35ecf5 100644
--- a/packages/react-keytips/src/components/Keytip/Keytip.types.ts
+++ b/packages/react-keytips/src/components/Keytip/Keytip.types.ts
@@ -16,19 +16,17 @@ export type KeytipSlots = {
   content: NonNullable<Slot<'div'>>;
 };
 
-export type ExecuteKeytipEventHandler<E = PositioningProps['target']> =
-  EventHandler<
-    EventData<'keydown', KeyboardEvent> & {
-      targetElement: E;
-    }
-  >;
+export type ExecuteKeytipEventHandler<E = HTMLElement> = EventHandler<
+  EventData<'keydown', KeyboardEvent> & {
+    targetElement: E;
+  }
+>;
 
-export type ReturnKeytipEventHandler<E = PositioningProps['target']> =
-  EventHandler<
-    EventData<'keydown', KeyboardEvent> & {
-      targetElement: E;
-    }
-  >;
+export type ReturnKeytipEventHandler<E = HTMLElement> = EventHandler<
+  EventData<'keydown', KeyboardEvent> & {
+    targetElement: E;
+  }
+>;
 
 export type OnVisibleChangeData = {
   visible: boolean;
diff --git a/packages/react-keytips/src/components/Keytip/useKeytipStyles.styles.ts b/packages/react-keytips/src/components/Keytip/useKeytipStyles.styles.ts
index 0cad261b..257d1d55 100644
--- a/packages/react-keytips/src/components/Keytip/useKeytipStyles.styles.ts
+++ b/packages/react-keytips/src/components/Keytip/useKeytipStyles.styles.ts
@@ -13,15 +13,15 @@ const useStyles = makeStyles({
   root: {
     display: 'none',
     boxSizing: 'border-box',
-    maxWidth: '240px',
+    maxWidth: '40px',
+    minWidth: '24px',
+    textAlign: 'center',
     cursor: 'default',
     fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase200,
     lineHeight: tokens.lineHeightBase200,
-    overflowWrap: 'break-word',
     borderRadius: tokens.borderRadiusMedium,
-    border: `1px solid ${tokens.colorTransparentStroke}`,
-    padding: '4px 11px 6px 11px', // '5px 12px 7px 12px' minus the border width '1px'
+    padding: tokens.spacingHorizontalXS,
     backgroundColor: tokens.colorNeutralBackground1,
     color: tokens.colorNeutralForeground1,
 
diff --git a/packages/react-keytips/src/hooks/useTree.ts b/packages/react-keytips/src/hooks/useTree.ts
index 1edd5dcb..4b809666 100644
--- a/packages/react-keytips/src/hooks/useTree.ts
+++ b/packages/react-keytips/src/hooks/useTree.ts
@@ -3,7 +3,6 @@ import * as React from 'react';
 import { sequencesToID, createNode } from '../utilities';
 import { KTP_ROOT_ID } from '../constants';
 import { useFluent } from '@fluentui/react-components';
-import { PositioningProps } from '@fluentui/react-components';
 
 export type KeytipTreeNode = Pick<
   KeytipProps,
@@ -11,7 +10,7 @@ export type KeytipTreeNode = Pick<
 > & {
   id: string;
   uniqueId: string;
-  target: PositioningProps['target'];
+  target: HTMLElement | null;
   parent: string;
   children: Set<string>;
 };
diff --git a/packages/react-keytips/src/utilities/createNode.ts b/packages/react-keytips/src/utilities/createNode.ts
index da768db2..27071df7 100644
--- a/packages/react-keytips/src/utilities/createNode.ts
+++ b/packages/react-keytips/src/utilities/createNode.ts
@@ -30,7 +30,7 @@ export const createNode = ({
   const node: KeytipTreeNode = {
     id,
     uniqueId,
-    target: positioning?.target || null,
+    target: positioning?.target as HTMLElement,
     parent,
     children,
     keySequences: keySequences.map((key) => key.toLowerCase()),
diff --git a/packages/react-keytips/stories/Dynamic.stories.tsx b/packages/react-keytips/stories/Dynamic.stories.tsx
index 8bdf91fb..8c20e9ef 100644
--- a/packages/react-keytips/stories/Dynamic.stories.tsx
+++ b/packages/react-keytips/stories/Dynamic.stories.tsx
@@ -32,7 +32,7 @@ export const DynamicStory = (props: KeytipsProps) => {
   }, [currentButton]);
 
   const onExecute: ExecuteKeytipEventHandler = (_, { targetElement }) => {
-    if (targetElement) targetElement.click();
+    if (targetElement) targetElement?.click();
   };
 
   const firstButton = useKeytipRef({
diff --git a/packages/react-keytips/stories/WithTabs.stories.tsx b/packages/react-keytips/stories/WithTabs.stories.tsx
index 7c2d3470..f8563c22 100644
--- a/packages/react-keytips/stories/WithTabs.stories.tsx
+++ b/packages/react-keytips/stories/WithTabs.stories.tsx
@@ -41,7 +41,7 @@ const useStyles = makeStyles({
 });
 
 const btnExecute: ExecuteKeytipEventHandler = (_, el) => {
-  el.targetElement.click();
+  el.targetElement?.click();
 };
 
 export const WithTabsStory = (props: KeytipsProps) => {
@@ -55,15 +55,15 @@ export const WithTabsStory = (props: KeytipsProps) => {
 
   const refFirstTab = useKeytipRef({
     keySequences: ['a'],
-    content: 'A',
-    hasDynamicChildren: true,
+    content: 'A23',
+    dynamic: true,
     onExecute: btnExecute,
   });
 
   const refSecondTab = useKeytipRef({
     keySequences: ['b'],
     content: 'B',
-    hasDynamicChildren: true,
+    dynamic: true,
     onExecute: btnExecute,
   });