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>; }; -export type ExecuteKeytipEventHandler = - EventHandler< - EventData<'keydown', KeyboardEvent> & { - targetElement: E; - } - >; +export type ExecuteKeytipEventHandler = EventHandler< + EventData<'keydown', KeyboardEvent> & { + targetElement: E; + } +>; -export type ReturnKeytipEventHandler = - EventHandler< - EventData<'keydown', KeyboardEvent> & { - targetElement: E; - } - >; +export type ReturnKeytipEventHandler = 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; }; 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, });