@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
41 lines • 1.54 kB
TypeScript
import { ComputedRef, Ref } from 'vue';
import { ResizablePanelState, ResizableDirection } from '../resizable_constants';
export interface ResizableKeyboardMessages {
resizeAnnouncement?: string;
collapseAnnouncement?: string;
expandAnnouncement?: string;
resetAnnouncement?: string;
ariaValueText?: string;
handleAriaLabel?: string;
}
export interface ResizableKeyboardOptions {
panels: ComputedRef<ResizablePanelState[]>;
direction: ComputedRef<ResizableDirection>;
containerSize: ComputedRef<number>;
beforePanelId: ComputedRef<string>;
afterPanelId: ComputedRef<string>;
handleElement: Ref<HTMLElement | null>;
onResize: (beforePanelId: string, beforeSize: number, afterPanelId: string, afterSize: number) => void;
onCollapse?: (panelId: string, collapsed: boolean) => void;
onReset?: (beforePanelId: string, afterPanelId: string) => void;
onSizeAnnouncement?: (message: string) => void;
messages?: ResizableKeyboardMessages;
}
export declare const KEYBOARD_INCREMENTS: {
readonly fine: 1;
readonly normal: 8;
readonly large: 24;
};
export declare function useResizableKeyboard(options: ResizableKeyboardOptions): {
isFocused: Ref<boolean, boolean>;
focusHandle: () => void;
handleKeyDown: (event: KeyboardEvent) => void;
handleFocus: () => void;
handleBlur: () => void;
KEYBOARD_INCREMENTS: {
readonly fine: 1;
readonly normal: 8;
readonly large: 24;
};
};
//# sourceMappingURL=useResizableKeyboard.d.ts.map