reshaped 3.10.0-canary.5 → 3.10.0-canary.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle.css +1 -1
- package/dist/bundle.d.ts +4 -11
- package/dist/bundle.js +2 -2
- package/dist/components/Accordion/Accordion.types.d.ts +3 -2
- package/dist/components/Accordion/AccordionControlled.js +1 -2
- package/dist/components/Accordion/AccordionTrigger.js +1 -1
- package/dist/components/ActionBar/ActionBar.js +1 -1
- package/dist/components/ActionBar/ActionBar.types.d.ts +3 -2
- package/dist/components/Actionable/Actionable.d.ts +2 -2
- package/dist/components/Actionable/Actionable.js +1 -1
- package/dist/components/Actionable/Actionable.types.d.ts +1 -1
- package/dist/components/Actionable/index.d.ts +1 -1
- package/dist/components/Alert/Alert.types.d.ts +3 -2
- package/dist/components/Autocomplete/Autocomplete.js +3 -5
- package/dist/components/Autocomplete/Autocomplete.types.d.ts +1 -1
- package/dist/components/Avatar/Avatar.js +1 -1
- package/dist/components/Avatar/Avatar.types.d.ts +5 -4
- package/dist/components/Badge/Badge.js +1 -1
- package/dist/components/Badge/Badge.types.d.ts +4 -4
- package/dist/components/Badge/BadgeContainer.js +1 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.js +1 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.types.d.ts +3 -3
- package/dist/components/Button/Button.js +1 -1
- package/dist/components/Button/Button.types.d.ts +3 -2
- package/dist/components/Button/ButtonGroup.js +1 -1
- package/dist/components/Calendar/CalendarDate.js +1 -1
- package/dist/components/Calendar/useCalendarKeyboardNavigation.js +1 -1
- package/dist/components/Card/Card.d.ts +6 -14
- package/dist/components/Card/Card.js +1 -1
- package/dist/components/Card/Card.types.d.ts +4 -3
- package/dist/components/Carousel/Carousel.js +2 -4
- package/dist/components/Carousel/Carousel.types.d.ts +3 -2
- package/dist/components/Carousel/CarouselControl.js +1 -2
- package/dist/components/Checkbox/Checkbox.js +1 -2
- package/dist/components/Checkbox/Checkbox.types.d.ts +4 -3
- package/dist/components/Container/Container.js +1 -1
- package/dist/components/Container/Container.types.d.ts +3 -2
- package/dist/components/ContextMenu/ContextMenu.js +1 -2
- package/dist/components/Dismissible/Dismissible.js +1 -1
- package/dist/components/Dismissible/Dismissible.types.d.ts +3 -3
- package/dist/components/Divider/Divider.js +1 -1
- package/dist/components/Divider/Divider.types.d.ts +3 -2
- package/dist/components/DropdownMenu/DropdownMenu.js +1 -3
- package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +1 -1
- package/dist/components/FileUpload/FileUpload.js +1 -2
- package/dist/components/FileUpload/FileUpload.types.d.ts +4 -3
- package/dist/components/Flyout/Flyout.module.css +1 -1
- package/dist/components/Flyout/Flyout.types.d.ts +9 -7
- package/dist/components/Flyout/FlyoutContent.js +3 -3
- package/dist/components/Flyout/FlyoutControlled.js +4 -7
- package/dist/components/Flyout/useFlyout.d.ts +2 -2
- package/dist/components/Flyout/useFlyout.js +2 -2
- package/dist/components/Flyout/utilities/safeArea.d.ts +2 -2
- package/dist/components/Grid/Grid.js +1 -1
- package/dist/components/Grid/Grid.types.d.ts +5 -4
- package/dist/components/Hidden/Hidden.js +1 -1
- package/dist/components/HiddenInput/HiddenInput.js +1 -1
- package/dist/components/HiddenInput/HiddenInput.types.d.ts +3 -2
- package/dist/components/Hotkey/Hotkey.js +1 -1
- package/dist/components/Hotkey/Hotkey.types.d.ts +3 -3
- package/dist/components/Icon/Icon.js +1 -1
- package/dist/components/Icon/Icon.types.d.ts +3 -2
- package/dist/components/Image/Image.js +1 -1
- package/dist/components/Image/Image.types.d.ts +5 -4
- package/dist/components/Link/Link.js +1 -1
- package/dist/components/Loader/Loader.js +1 -1
- package/dist/components/Loader/Loader.types.d.ts +3 -2
- package/dist/components/MenuItem/MenuItem.js +1 -1
- package/dist/components/MenuItem/MenuItem.types.d.ts +3 -2
- package/dist/components/Modal/Modal.js +6 -6
- package/dist/components/Modal/Modal.types.d.ts +5 -4
- package/dist/components/NumberField/NumberFieldControlled.js +1 -2
- package/dist/components/Overlay/Overlay.js +7 -12
- package/dist/components/Overlay/Overlay.types.d.ts +5 -3
- package/dist/components/Pagination/Pagination.types.d.ts +3 -3
- package/dist/components/PinField/PinField.types.d.ts +4 -3
- package/dist/components/PinField/PinFieldControlled.js +1 -1
- package/dist/components/Popover/Popover.js +1 -1
- package/dist/components/Popover/Popover.types.d.ts +1 -1
- package/dist/components/Progress/Progress.js +1 -1
- package/dist/components/Progress/Progress.types.d.ts +3 -3
- package/dist/components/ProgressIndicator/ProgressIndicator.js +1 -1
- package/dist/components/ProgressIndicator/ProgressIndicator.types.d.ts +3 -3
- package/dist/components/Radio/Radio.js +1 -1
- package/dist/components/Radio/Radio.types.d.ts +4 -3
- package/dist/components/RadioGroup/RadioGroup.types.d.ts +3 -2
- package/dist/components/Reshaped/Reshaped.js +4 -11
- package/dist/components/Reshaped/Reshaped.types.d.ts +3 -2
- package/dist/components/Resizable/Resizable.js +1 -1
- package/dist/components/Resizable/ResizableHandle.js +1 -1
- package/dist/components/Scrim/Scrim.js +1 -1
- package/dist/components/Scrim/Scrim.types.d.ts +4 -4
- package/dist/components/ScrollArea/ScrollArea.js +2 -4
- package/dist/components/ScrollArea/ScrollArea.types.d.ts +5 -3
- package/dist/components/Select/Select.types.d.ts +5 -4
- package/dist/components/Select/SelectNative.js +1 -1
- package/dist/components/Select/SelectRoot.js +1 -1
- package/dist/components/Skeleton/Skeleton.js +1 -1
- package/dist/components/Skeleton/Skeleton.types.d.ts +3 -3
- package/dist/components/Slider/Slider.types.d.ts +3 -3
- package/dist/components/Slider/SliderControlled.js +2 -4
- package/dist/components/Slider/SliderThumb.js +1 -1
- package/dist/components/Stepper/Stepper.types.d.ts +5 -4
- package/dist/components/Switch/Switch.js +1 -1
- package/dist/components/Switch/Switch.types.d.ts +4 -3
- package/dist/components/Table/Table.js +1 -1
- package/dist/components/Table/Table.types.d.ts +12 -12
- package/dist/components/Tabs/Tabs.types.d.ts +6 -6
- package/dist/components/Tabs/TabsItem.js +2 -3
- package/dist/components/Tabs/TabsList.js +1 -4
- package/dist/components/Tabs/TabsPanel.js +2 -2
- package/dist/components/Text/Text.js +1 -1
- package/dist/components/Text/Text.types.d.ts +3 -2
- package/dist/components/TextArea/TextArea.js +1 -1
- package/dist/components/TextArea/TextArea.types.d.ts +5 -4
- package/dist/components/TextField/TextField.js +1 -1
- package/dist/components/TextField/TextField.types.d.ts +4 -3
- package/dist/components/Theme/GlobalColorMode.js +1 -1
- package/dist/components/Theme/Theme.js +1 -2
- package/dist/components/Theme/Theme.types.d.ts +2 -1
- package/dist/components/Timeline/Timeline.js +1 -1
- package/dist/components/Timeline/Timeline.types.d.ts +5 -5
- package/dist/components/Toast/Toast.types.d.ts +3 -3
- package/dist/components/Toast/ToastContainer.js +2 -3
- package/dist/components/Toast/ToastRegion.js +2 -2
- package/dist/components/ToggleButton/ToggleButtonUncontrolled.js +1 -1
- package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js +1 -1
- package/dist/components/Tooltip/Tooltip.types.d.ts +1 -1
- package/dist/components/View/View.js +1 -1
- package/dist/components/View/View.types.d.ts +5 -4
- package/dist/components/_private/Aligner/Aligner.js +1 -1
- package/dist/components/_private/Aligner/Aligner.types.d.ts +3 -3
- package/dist/components/_private/Expandable/Expandable.js +2 -2
- package/dist/components/_private/Expandable/Expandable.types.d.ts +2 -2
- package/dist/components/_private/Portal/Portal.js +1 -2
- package/dist/hooks/_private/useDrag.js +2 -4
- package/dist/hooks/_private/useFadeSide.js +2 -3
- package/dist/hooks/_private/useSingletonViewport.d.ts +10 -0
- package/dist/hooks/_private/useSingletonViewport.js +52 -0
- package/dist/hooks/useResponsiveClientValue.js +15 -53
- package/dist/hooks/useViewport.d.ts +2 -0
- package/dist/hooks/useViewport.js +6 -0
- package/dist/index.d.ts +4 -11
- package/dist/index.js +2 -10
- package/dist/styles/mixin.d.ts +2 -2
- package/dist/styles/types.d.ts +2 -1
- package/dist/tests/ThemesPlayground.js +1 -1
- package/dist/types/global.d.ts +0 -15
- package/dist/utilities/props.d.ts +2 -1
- package/package.json +2 -2
- package/dist/core/Actionable/Actionable.d.ts +0 -4
- package/dist/core/Actionable/Actionable.js +0 -73
- package/dist/core/Actionable/Actionable.types.d.ts +0 -34
- package/dist/core/Actionable/Actionable.types.js +0 -1
- package/dist/core/Actionable/index.d.ts +0 -2
- package/dist/core/Actionable/index.js +0 -1
- package/dist/hooks/_private/useSingletonEnvironment.d.ts +0 -9
- package/dist/hooks/_private/useSingletonEnvironment.js +0 -33
- package/dist/hooks/_private/useSingletonHotkeys.d.ts +0 -35
- package/dist/hooks/_private/useSingletonHotkeys.js +0 -191
- package/dist/hooks/_private/useSingletonKeyboardMode.d.ts +0 -13
- package/dist/hooks/_private/useSingletonKeyboardMode.js +0 -58
- package/dist/hooks/useHandlerRef.d.ts +0 -8
- package/dist/hooks/useHandlerRef.js +0 -16
- package/dist/hooks/useHotkeys.d.ts +0 -11
- package/dist/hooks/useHotkeys.js +0 -27
- package/dist/hooks/useIsomorphicLayoutEffect.d.ts +0 -3
- package/dist/hooks/useIsomorphicLayoutEffect.js +0 -4
- package/dist/hooks/useKeyboardArrowNavigation.d.ts +0 -9
- package/dist/hooks/useKeyboardArrowNavigation.js +0 -62
- package/dist/hooks/useKeyboardMode.d.ts +0 -7
- package/dist/hooks/useKeyboardMode.js +0 -13
- package/dist/hooks/useOnClickOutside.d.ts +0 -5
- package/dist/hooks/useOnClickOutside.js +0 -63
- package/dist/hooks/useRTL.d.ts +0 -2
- package/dist/hooks/useRTL.js +0 -7
- package/dist/hooks/useScrollLock.d.ts +0 -10
- package/dist/hooks/useScrollLock.js +0 -25
- package/dist/hooks/useToggle.d.ts +0 -7
- package/dist/hooks/useToggle.js +0 -19
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { classNames } from "@reshaped/utilities";
|
|
4
|
-
import { forwardRef } from "react";
|
|
5
|
-
import * as keys from "../../constants/keys.js";
|
|
6
|
-
const Actionable = forwardRef((props, ref) => {
|
|
7
|
-
const { children, render, href, onClick, type, disabled, as, stopPropagation, className, attributes, } = props;
|
|
8
|
-
const rootAttributes = { ...attributes };
|
|
9
|
-
const hasClickHandler = onClick || attributes?.onClick;
|
|
10
|
-
const hasFocusHandler = attributes?.onFocus || attributes?.onBlur;
|
|
11
|
-
const isLink = Boolean(href || attributes?.href);
|
|
12
|
-
// Including attributes ref for the cases when event listeners are added through it
|
|
13
|
-
// To make sure it doesn't render a span
|
|
14
|
-
const isButton = Boolean(hasClickHandler || hasFocusHandler || type || attributes?.ref);
|
|
15
|
-
const renderedAsButton = !isLink && isButton && (!as || as === "button");
|
|
16
|
-
// Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
|
|
17
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
18
|
-
let TagName;
|
|
19
|
-
if (isLink) {
|
|
20
|
-
TagName = "a";
|
|
21
|
-
rootAttributes.href = disabled ? undefined : href || attributes?.href;
|
|
22
|
-
}
|
|
23
|
-
else if (renderedAsButton) {
|
|
24
|
-
TagName = "button";
|
|
25
|
-
rootAttributes.type = type || attributes?.type || "button";
|
|
26
|
-
rootAttributes.disabled = disabled || attributes?.disabled;
|
|
27
|
-
}
|
|
28
|
-
else if (isButton) {
|
|
29
|
-
const isFocusable = as === "label";
|
|
30
|
-
const simulateButton = !isFocusable || hasClickHandler || hasFocusHandler;
|
|
31
|
-
TagName = as || "span";
|
|
32
|
-
rootAttributes.role = simulateButton ? "button" : undefined;
|
|
33
|
-
rootAttributes.tabIndex = simulateButton ? 0 : undefined;
|
|
34
|
-
}
|
|
35
|
-
else {
|
|
36
|
-
TagName = as || "span";
|
|
37
|
-
}
|
|
38
|
-
const handlePress = (event) => {
|
|
39
|
-
if (disabled)
|
|
40
|
-
return;
|
|
41
|
-
if (stopPropagation)
|
|
42
|
-
event.stopPropagation();
|
|
43
|
-
onClick?.(event);
|
|
44
|
-
attributes?.onClick?.(event);
|
|
45
|
-
};
|
|
46
|
-
const handleKeyDown = (event) => {
|
|
47
|
-
const isSpace = event.key === keys.SPACE;
|
|
48
|
-
const isEnter = event.key === keys.ENTER;
|
|
49
|
-
if (!isSpace && !isEnter)
|
|
50
|
-
return;
|
|
51
|
-
if (rootAttributes.role !== "button")
|
|
52
|
-
return;
|
|
53
|
-
if (stopPropagation)
|
|
54
|
-
event.stopPropagation();
|
|
55
|
-
event.preventDefault();
|
|
56
|
-
handlePress(event);
|
|
57
|
-
};
|
|
58
|
-
const tagAttributes = {
|
|
59
|
-
ref: ref,
|
|
60
|
-
// rootAttributes can receive ref from Flyout
|
|
61
|
-
...rootAttributes,
|
|
62
|
-
className: classNames(className),
|
|
63
|
-
onClick: handlePress,
|
|
64
|
-
onKeyDown: handleKeyDown,
|
|
65
|
-
"aria-disabled": disabled ? true : undefined,
|
|
66
|
-
children: children,
|
|
67
|
-
};
|
|
68
|
-
if (render)
|
|
69
|
-
return render(tagAttributes);
|
|
70
|
-
return _jsx(TagName, { ...tagAttributes });
|
|
71
|
-
});
|
|
72
|
-
Actionable.displayName = "Actionable";
|
|
73
|
-
export default Actionable;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import type React from "react";
|
|
2
|
-
import type * as G from "../../types/global";
|
|
3
|
-
export type AttributesRef = React.RefObject<HTMLButtonElement | null>;
|
|
4
|
-
type Attributes = G.Attributes<"button"> & Omit<React.JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {
|
|
5
|
-
ref?: AttributesRef;
|
|
6
|
-
};
|
|
7
|
-
export type RenderAttributes = G.Attributes<"a"> & {
|
|
8
|
-
ref: React.RefObject<HTMLAnchorElement | null>;
|
|
9
|
-
children: React.ReactNode;
|
|
10
|
-
};
|
|
11
|
-
export type Props = {
|
|
12
|
-
/** Node for inserting the content */
|
|
13
|
-
children?: React.ReactNode;
|
|
14
|
-
/** Render a custom root element, useful for integrating with routers */
|
|
15
|
-
render?: (attributes: RenderAttributes) => React.ReactNode;
|
|
16
|
-
/** Callback when clicked, renders it as a button tag if href is not provided */
|
|
17
|
-
onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
|
|
18
|
-
/** URL, renders it as an anchor tag */
|
|
19
|
-
href?: string;
|
|
20
|
-
/** Type attribute, renders it as a button tag */
|
|
21
|
-
type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
|
|
22
|
-
/** Disable from user interaction */
|
|
23
|
-
disabled?: boolean;
|
|
24
|
-
/** Prevent the event from bubbling up to the parent */
|
|
25
|
-
stopPropagation?: boolean;
|
|
26
|
-
/** Render as a different element */
|
|
27
|
-
as?: keyof React.JSX.IntrinsicElements;
|
|
28
|
-
/** Additional classname for the root element */
|
|
29
|
-
className?: G.ClassName;
|
|
30
|
-
/** Additional attributes for the root element */
|
|
31
|
-
attributes?: Attributes;
|
|
32
|
-
};
|
|
33
|
-
export type Ref = HTMLButtonElement | HTMLAnchorElement;
|
|
34
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./Actionable.js";
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type * as G from "../../types/global";
|
|
3
|
-
type Context = {
|
|
4
|
-
rtl: [boolean, (state: boolean) => void];
|
|
5
|
-
defaultViewport: G.Viewport;
|
|
6
|
-
};
|
|
7
|
-
export declare const SingletonEnvironmentContext: React.Context<Context>;
|
|
8
|
-
export declare const useSingletonEnvironment: (defaultRTL?: boolean) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];
|
|
9
|
-
export {};
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js";
|
|
3
|
-
export const SingletonEnvironmentContext = React.createContext({
|
|
4
|
-
rtl: [false, () => { }],
|
|
5
|
-
defaultViewport: "s",
|
|
6
|
-
});
|
|
7
|
-
export const useSingletonEnvironment = (defaultRTL) => {
|
|
8
|
-
const state = React.useState(defaultRTL || false);
|
|
9
|
-
const [isRTL, setRTL] = state;
|
|
10
|
-
/**
|
|
11
|
-
* Handle changing dir attribute directly
|
|
12
|
-
*/
|
|
13
|
-
useIsomorphicLayoutEffect(() => {
|
|
14
|
-
const observer = new MutationObserver((mutations) => {
|
|
15
|
-
mutations.forEach((mutation) => {
|
|
16
|
-
if (mutation.attributeName !== "dir")
|
|
17
|
-
return;
|
|
18
|
-
const nextRTL = mutation.target.dir === "rtl";
|
|
19
|
-
if (isRTL !== nextRTL)
|
|
20
|
-
setRTL(nextRTL);
|
|
21
|
-
});
|
|
22
|
-
});
|
|
23
|
-
observer.observe(document.documentElement, { attributes: true });
|
|
24
|
-
return () => observer.disconnect();
|
|
25
|
-
}, [isRTL]);
|
|
26
|
-
/**
|
|
27
|
-
* Handle setRTL usage
|
|
28
|
-
*/
|
|
29
|
-
useIsomorphicLayoutEffect(() => {
|
|
30
|
-
document.documentElement.setAttribute("dir", isRTL ? "rtl" : "ltr");
|
|
31
|
-
}, [isRTL]);
|
|
32
|
-
return state;
|
|
33
|
-
};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* Types
|
|
4
|
-
*/
|
|
5
|
-
type Callback = (e?: KeyboardEvent) => void;
|
|
6
|
-
type PressedMap = Map<string, KeyboardEvent>;
|
|
7
|
-
export type Hotkeys = Record<string, Callback | null>;
|
|
8
|
-
type HotkeyOptions = {
|
|
9
|
-
preventDefault?: boolean;
|
|
10
|
-
};
|
|
11
|
-
type Context = {
|
|
12
|
-
isPressed: (key: string) => boolean;
|
|
13
|
-
addHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options?: HotkeyOptions) => (() => void) | undefined;
|
|
14
|
-
};
|
|
15
|
-
type HotkeyData = {
|
|
16
|
-
callback: Callback;
|
|
17
|
-
ref: React.RefObject<HTMLElement | null>;
|
|
18
|
-
options: HotkeyOptions;
|
|
19
|
-
};
|
|
20
|
-
export declare class HotkeyStore {
|
|
21
|
-
hotkeyMap: Record<string, Set<HotkeyData>>;
|
|
22
|
-
getSize: () => number;
|
|
23
|
-
bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options: HotkeyOptions) => void;
|
|
24
|
-
unbindHotkeys: (hotkeys: Hotkeys) => void;
|
|
25
|
-
handleKeyDown: (pressedMap: PressedMap, e: KeyboardEvent) => void;
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* Components / Hooks
|
|
29
|
-
*/
|
|
30
|
-
export declare const HotkeyContext: React.Context<Context>;
|
|
31
|
-
export declare const SingletonHotkeysProvider: React.FC<{
|
|
32
|
-
children: React.ReactNode;
|
|
33
|
-
}>;
|
|
34
|
-
declare const useSingletonHotkeys: () => Context;
|
|
35
|
-
export default useSingletonHotkeys;
|
|
@@ -1,191 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import React from "react";
|
|
3
|
-
/**
|
|
4
|
-
* Utilities
|
|
5
|
-
*/
|
|
6
|
-
const COMBINATION_DELIMETER = "+";
|
|
7
|
-
const pressedMap = new Map();
|
|
8
|
-
let modifiedKeys = [];
|
|
9
|
-
const formatHotkey = (hotkey) => {
|
|
10
|
-
if (hotkey === " ")
|
|
11
|
-
return hotkey;
|
|
12
|
-
return hotkey.replace(/\s/g, "").toLowerCase();
|
|
13
|
-
};
|
|
14
|
-
// Normalize passed key combinations to turn them into a consistent ids
|
|
15
|
-
const getHotkeyId = (hotkey) => {
|
|
16
|
-
return formatHotkey(hotkey).split(COMBINATION_DELIMETER).sort().join(COMBINATION_DELIMETER);
|
|
17
|
-
};
|
|
18
|
-
const getEventKey = (e) => {
|
|
19
|
-
if (!e.key)
|
|
20
|
-
return;
|
|
21
|
-
// Having alt pressed modifies e.key value, so relying on e.code for it
|
|
22
|
-
if (e.altKey && /^[Key|Digit|Numpad]/.test(e.code)) {
|
|
23
|
-
return e.code.toLowerCase().replace(/key|digit|numpad/, "");
|
|
24
|
-
}
|
|
25
|
-
return e.key.toLowerCase();
|
|
26
|
-
};
|
|
27
|
-
// Removing the unknown gets highlighted an invalid syntax
|
|
28
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
|
|
29
|
-
const walkHotkeys = (hotkeys, cb) => {
|
|
30
|
-
Object.keys(hotkeys).forEach((key) => {
|
|
31
|
-
key.split(",").forEach((hotkey) => {
|
|
32
|
-
const data = hotkeys[key];
|
|
33
|
-
if (!data)
|
|
34
|
-
return;
|
|
35
|
-
cb(getHotkeyId(hotkey), data);
|
|
36
|
-
});
|
|
37
|
-
});
|
|
38
|
-
};
|
|
39
|
-
export class HotkeyStore {
|
|
40
|
-
hotkeyMap = {};
|
|
41
|
-
getSize = () => Object.keys(this.hotkeyMap).length;
|
|
42
|
-
bindHotkeys = (hotkeys, ref, options) => {
|
|
43
|
-
walkHotkeys(hotkeys, (id, hotkeyData) => {
|
|
44
|
-
if (!hotkeyData)
|
|
45
|
-
return;
|
|
46
|
-
if (!this.hotkeyMap[id]) {
|
|
47
|
-
this.hotkeyMap[id] = new Set();
|
|
48
|
-
}
|
|
49
|
-
this.hotkeyMap[id].add({ callback: hotkeyData, ref, options });
|
|
50
|
-
});
|
|
51
|
-
};
|
|
52
|
-
unbindHotkeys = (hotkeys) => {
|
|
53
|
-
walkHotkeys(hotkeys, (id, hotkeyCallback) => {
|
|
54
|
-
if (!hotkeyCallback)
|
|
55
|
-
return;
|
|
56
|
-
this.hotkeyMap[id]?.forEach((data) => {
|
|
57
|
-
if (data.callback === hotkeyCallback) {
|
|
58
|
-
this.hotkeyMap[id].delete(data);
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
if (!this.hotkeyMap[id]?.size) {
|
|
62
|
-
delete this.hotkeyMap[id];
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
};
|
|
66
|
-
handleKeyDown = (pressedMap, e) => {
|
|
67
|
-
if (!pressedMap.size)
|
|
68
|
-
return;
|
|
69
|
-
const pressedKeys = [...pressedMap.keys()];
|
|
70
|
-
const pressedId = getHotkeyId(pressedKeys.join(COMBINATION_DELIMETER));
|
|
71
|
-
const pressedFormattedKeys = pressedId.split(COMBINATION_DELIMETER);
|
|
72
|
-
const hotkeyData = this.hotkeyMap[pressedId];
|
|
73
|
-
/**
|
|
74
|
-
* Support for `mod` that represents both Mac and Win keyboards
|
|
75
|
-
* We create the hotkeyId again to sort the mod key correctly
|
|
76
|
-
*/
|
|
77
|
-
const controlToModPressedId = getHotkeyId(pressedId.replace("control", "mod"));
|
|
78
|
-
const metaToModPressedId = getHotkeyId(pressedId.replace("meta", "mod"));
|
|
79
|
-
const hotkeyControlModData = pressedFormattedKeys.includes("control") && this.hotkeyMap[controlToModPressedId];
|
|
80
|
-
const hotkeyMetaModData = pressedFormattedKeys.includes("meta") && this.hotkeyMap[metaToModPressedId];
|
|
81
|
-
[hotkeyData, hotkeyControlModData, hotkeyMetaModData].forEach((hotkeyData) => {
|
|
82
|
-
if (!hotkeyData)
|
|
83
|
-
return;
|
|
84
|
-
if (hotkeyData?.size) {
|
|
85
|
-
hotkeyData.forEach((data) => {
|
|
86
|
-
const eventTarget = e.composedPath()[0];
|
|
87
|
-
if (data.ref.current &&
|
|
88
|
-
!(eventTarget === data.ref.current || data.ref.current.contains(eventTarget))) {
|
|
89
|
-
return;
|
|
90
|
-
}
|
|
91
|
-
const resolvedEvent = pressedMap.get(pressedId);
|
|
92
|
-
if (data.options.preventDefault) {
|
|
93
|
-
resolvedEvent?.preventDefault();
|
|
94
|
-
e.preventDefault();
|
|
95
|
-
}
|
|
96
|
-
data.callback(e);
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
});
|
|
100
|
-
};
|
|
101
|
-
}
|
|
102
|
-
const globalHotkeyStore = new HotkeyStore();
|
|
103
|
-
/**
|
|
104
|
-
* Components / Hooks
|
|
105
|
-
*/
|
|
106
|
-
export const HotkeyContext = React.createContext({});
|
|
107
|
-
export const SingletonHotkeysProvider = (props) => {
|
|
108
|
-
const { children } = props;
|
|
109
|
-
// eslint-disable-next-line
|
|
110
|
-
const [_, setTriggerCount] = React.useState(0);
|
|
111
|
-
// Only handle key presses when there is at least one hook listening for hotkeys
|
|
112
|
-
const [hooksCount, setHooksCount] = React.useState(0);
|
|
113
|
-
const addPressedKey = React.useCallback((e) => {
|
|
114
|
-
if (e.repeat || hooksCount === 0)
|
|
115
|
-
return;
|
|
116
|
-
const eventKey = getEventKey(e);
|
|
117
|
-
if (!eventKey)
|
|
118
|
-
return;
|
|
119
|
-
pressedMap.set(eventKey, e);
|
|
120
|
-
setTriggerCount(pressedMap.size);
|
|
121
|
-
// Key up won't trigger for other keys while Meta is pressed so we need to cache them
|
|
122
|
-
// and remove on Meta keyup
|
|
123
|
-
if (e.metaKey)
|
|
124
|
-
modifiedKeys.push(...pressedMap.keys());
|
|
125
|
-
if (pressedMap.has("Meta"))
|
|
126
|
-
modifiedKeys.push(eventKey);
|
|
127
|
-
}, [hooksCount]);
|
|
128
|
-
const removePressedKey = React.useCallback((e) => {
|
|
129
|
-
if (hooksCount === 0)
|
|
130
|
-
return;
|
|
131
|
-
const eventKey = getEventKey(e);
|
|
132
|
-
if (!eventKey)
|
|
133
|
-
return;
|
|
134
|
-
pressedMap.delete(eventKey);
|
|
135
|
-
if (eventKey === "meta" || eventKey === "control") {
|
|
136
|
-
pressedMap.delete("mod");
|
|
137
|
-
}
|
|
138
|
-
if (eventKey === "meta") {
|
|
139
|
-
modifiedKeys.forEach((key) => {
|
|
140
|
-
if (!pressedMap.has(key))
|
|
141
|
-
return;
|
|
142
|
-
pressedMap.delete(key);
|
|
143
|
-
});
|
|
144
|
-
modifiedKeys = [];
|
|
145
|
-
}
|
|
146
|
-
setTriggerCount(pressedMap.size);
|
|
147
|
-
}, [hooksCount]);
|
|
148
|
-
const isPressed = (hotkey) => {
|
|
149
|
-
const keys = formatHotkey(hotkey).split(COMBINATION_DELIMETER);
|
|
150
|
-
if (keys.some((key) => !pressedMap.has(key)))
|
|
151
|
-
return false;
|
|
152
|
-
return true;
|
|
153
|
-
};
|
|
154
|
-
const handleWindowKeyDown = React.useCallback((e) => {
|
|
155
|
-
// Browsers trigger keyboard event without passing e.key when you click on autocomplete
|
|
156
|
-
if (!e.key)
|
|
157
|
-
return;
|
|
158
|
-
addPressedKey(e);
|
|
159
|
-
globalHotkeyStore.handleKeyDown(pressedMap, e);
|
|
160
|
-
}, [addPressedKey]);
|
|
161
|
-
const handleWindowKeyUp = React.useCallback((e) => {
|
|
162
|
-
if (!e.key)
|
|
163
|
-
return;
|
|
164
|
-
removePressedKey(e);
|
|
165
|
-
}, [removePressedKey]);
|
|
166
|
-
const handleWindowBlur = React.useCallback(() => {
|
|
167
|
-
pressedMap.clear();
|
|
168
|
-
modifiedKeys = [];
|
|
169
|
-
}, []);
|
|
170
|
-
const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
|
|
171
|
-
setHooksCount((prev) => prev + 1);
|
|
172
|
-
globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
|
|
173
|
-
return () => {
|
|
174
|
-
setHooksCount((prev) => prev - 1);
|
|
175
|
-
globalHotkeyStore.unbindHotkeys(hotkeys);
|
|
176
|
-
};
|
|
177
|
-
}, []);
|
|
178
|
-
React.useEffect(() => {
|
|
179
|
-
window.addEventListener("keydown", handleWindowKeyDown);
|
|
180
|
-
window.addEventListener("keyup", handleWindowKeyUp);
|
|
181
|
-
window.addEventListener("blur", handleWindowBlur);
|
|
182
|
-
return () => {
|
|
183
|
-
window.removeEventListener("keydown", handleWindowKeyDown);
|
|
184
|
-
window.removeEventListener("keyup", handleWindowKeyUp);
|
|
185
|
-
window.removeEventListener("blur", handleWindowBlur);
|
|
186
|
-
};
|
|
187
|
-
}, [handleWindowKeyDown, handleWindowKeyUp, handleWindowBlur]);
|
|
188
|
-
return (_jsx(HotkeyContext.Provider, { value: { addHotkeys, isPressed }, children: children }));
|
|
189
|
-
};
|
|
190
|
-
const useSingletonHotkeys = () => React.useContext(HotkeyContext);
|
|
191
|
-
export default useSingletonHotkeys;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
type ContextProps = {
|
|
3
|
-
disabledRef: React.RefObject<boolean> | null;
|
|
4
|
-
disable: () => void;
|
|
5
|
-
enable: () => void;
|
|
6
|
-
activate: () => void;
|
|
7
|
-
deactivate: () => void;
|
|
8
|
-
};
|
|
9
|
-
export declare const SingletonKeyboardModeContext: React.Context<ContextProps>;
|
|
10
|
-
export declare const SingletonKeyboardModeProvider: React.FC<{
|
|
11
|
-
children: React.ReactNode;
|
|
12
|
-
}>;
|
|
13
|
-
export {};
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { activateKeyboardMode, deactivateKeyboardMode } from "@reshaped/utilities/internal";
|
|
4
|
-
import React from "react";
|
|
5
|
-
import * as keys from "../../constants/keys.js";
|
|
6
|
-
export const SingletonKeyboardModeContext = React.createContext({
|
|
7
|
-
disabledRef: null,
|
|
8
|
-
disable: () => { },
|
|
9
|
-
enable: () => { },
|
|
10
|
-
activate: () => { },
|
|
11
|
-
deactivate: () => { },
|
|
12
|
-
});
|
|
13
|
-
export const SingletonKeyboardModeProvider = (props) => {
|
|
14
|
-
const disabledRef = React.useRef(false);
|
|
15
|
-
const disable = React.useCallback(() => {
|
|
16
|
-
disabledRef.current = true;
|
|
17
|
-
}, []);
|
|
18
|
-
const enable = React.useCallback(() => {
|
|
19
|
-
disabledRef.current = false;
|
|
20
|
-
}, []);
|
|
21
|
-
const activate = React.useCallback(() => {
|
|
22
|
-
if (disabledRef.current)
|
|
23
|
-
return;
|
|
24
|
-
activateKeyboardMode();
|
|
25
|
-
}, []);
|
|
26
|
-
const deactivate = React.useCallback(() => {
|
|
27
|
-
if (disabledRef.current)
|
|
28
|
-
return;
|
|
29
|
-
deactivateKeyboardMode();
|
|
30
|
-
}, []);
|
|
31
|
-
const handleKeyDown = React.useCallback((e) => {
|
|
32
|
-
if (e.metaKey || e.altKey || e.ctrlKey)
|
|
33
|
-
return;
|
|
34
|
-
// Prevent focus ring from appearing when using mouse but closing with esc
|
|
35
|
-
if (e.key === keys.ESC)
|
|
36
|
-
return;
|
|
37
|
-
activate();
|
|
38
|
-
}, [activate]);
|
|
39
|
-
const handleClick = React.useCallback(() => {
|
|
40
|
-
deactivate();
|
|
41
|
-
}, [deactivate]);
|
|
42
|
-
React.useEffect(() => {
|
|
43
|
-
window.addEventListener("keydown", handleKeyDown);
|
|
44
|
-
window.addEventListener("mousedown", handleClick);
|
|
45
|
-
return () => {
|
|
46
|
-
window.removeEventListener("keydown", handleKeyDown);
|
|
47
|
-
window.removeEventListener("mousedown", handleClick);
|
|
48
|
-
};
|
|
49
|
-
}, [handleClick, handleKeyDown]);
|
|
50
|
-
const value = React.useMemo(() => ({
|
|
51
|
-
disabledRef,
|
|
52
|
-
disable,
|
|
53
|
-
enable,
|
|
54
|
-
activate,
|
|
55
|
-
deactivate,
|
|
56
|
-
}), [disable, enable, activate, deactivate]);
|
|
57
|
-
return (_jsx(SingletonKeyboardModeContext.Provider, { value: value, children: props.children }));
|
|
58
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* Hook for wrapping event handlers passed as props with a ref
|
|
4
|
-
* This way we can keep the instance of the ref the same and pass this ref to the effects dependency array
|
|
5
|
-
* While also making sure that function implementation stays up-to-date
|
|
6
|
-
*/
|
|
7
|
-
declare const useHandlerRef: <T>(cb: T) => React.RefObject<T>;
|
|
8
|
-
export default useHandlerRef;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
|
|
3
|
-
/**
|
|
4
|
-
* Hook for wrapping event handlers passed as props with a ref
|
|
5
|
-
* This way we can keep the instance of the ref the same and pass this ref to the effects dependency array
|
|
6
|
-
* While also making sure that function implementation stays up-to-date
|
|
7
|
-
*/
|
|
8
|
-
const useHandlerRef = (cb) => {
|
|
9
|
-
const ref = React.useRef(cb);
|
|
10
|
-
// Update the callback on every render, keeping the ref instance the same
|
|
11
|
-
useIsomorphicLayoutEffect(() => {
|
|
12
|
-
ref.current = cb;
|
|
13
|
-
}, [cb]);
|
|
14
|
-
return ref;
|
|
15
|
-
};
|
|
16
|
-
export default useHandlerRef;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { type Hotkeys } from "./_private/useSingletonHotkeys";
|
|
3
|
-
declare const useHotkeys: <Element extends HTMLElement>(hotkeys: Hotkeys, deps?: unknown[], options?: {
|
|
4
|
-
ref?: React.RefObject<Element | null>;
|
|
5
|
-
disabled?: boolean;
|
|
6
|
-
preventDefault?: boolean;
|
|
7
|
-
}) => {
|
|
8
|
-
ref: React.RefObject<Element | null>;
|
|
9
|
-
checkHotkeyState: (key: string) => boolean;
|
|
10
|
-
};
|
|
11
|
-
export default useHotkeys;
|
package/dist/hooks/useHotkeys.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import useSingletonHotkey from "./_private/useSingletonHotkeys.js";
|
|
4
|
-
const useHotkeys = (hotkeys, deps = [], options) => {
|
|
5
|
-
const { addHotkeys, isPressed } = useSingletonHotkey();
|
|
6
|
-
const generatedRef = React.useRef(null);
|
|
7
|
-
const elementRef = options?.ref || generatedRef;
|
|
8
|
-
React.useEffect(() => {
|
|
9
|
-
if (options?.disabled)
|
|
10
|
-
return;
|
|
11
|
-
const remove = addHotkeys(hotkeys, elementRef, {
|
|
12
|
-
preventDefault: options?.preventDefault,
|
|
13
|
-
});
|
|
14
|
-
return () => remove?.();
|
|
15
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16
|
-
}, [
|
|
17
|
-
addHotkeys,
|
|
18
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
19
|
-
Object.keys(hotkeys).join(","),
|
|
20
|
-
options?.disabled,
|
|
21
|
-
options?.preventDefault,
|
|
22
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
23
|
-
...deps,
|
|
24
|
-
]);
|
|
25
|
-
return { ref: elementRef, checkHotkeyState: isPressed };
|
|
26
|
-
};
|
|
27
|
-
export default useHotkeys;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
type Props = {
|
|
3
|
-
ref: React.RefObject<HTMLElement | null>;
|
|
4
|
-
disabled?: boolean;
|
|
5
|
-
orientation?: "vertical" | "horizontal";
|
|
6
|
-
circular?: boolean;
|
|
7
|
-
};
|
|
8
|
-
declare const useKeyboardArrowNavigation: (props: Props) => void;
|
|
9
|
-
export default useKeyboardArrowNavigation;
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, getFocusableElements, } from "@reshaped/utilities/internal";
|
|
2
|
-
import React, { useEffect } from "react";
|
|
3
|
-
import useHotkeys from "./useHotkeys.js";
|
|
4
|
-
const useKeyboardArrowNavigation = (props) => {
|
|
5
|
-
const { ref, disabled, orientation, circular } = props;
|
|
6
|
-
const backHotkeys = [];
|
|
7
|
-
const forwardHotkeys = [];
|
|
8
|
-
if (!orientation || orientation === "vertical") {
|
|
9
|
-
backHotkeys.push("ArrowUp");
|
|
10
|
-
forwardHotkeys.push("ArrowDown");
|
|
11
|
-
}
|
|
12
|
-
if (!orientation || orientation === "horizontal") {
|
|
13
|
-
backHotkeys.push("ArrowLeft");
|
|
14
|
-
forwardHotkeys.push("ArrowRight");
|
|
15
|
-
}
|
|
16
|
-
const updateTabIndex = React.useCallback((options) => {
|
|
17
|
-
const { el, focusableElements } = options;
|
|
18
|
-
const initialEl = focusableElements.find((el) => el.getAttribute("tabindex") !== "-1");
|
|
19
|
-
const activeEl = el ?? initialEl ?? focusableElements[0];
|
|
20
|
-
focusableElements.forEach((el) => el.setAttribute("tabindex", "-1"));
|
|
21
|
-
activeEl?.setAttribute("tabindex", "0");
|
|
22
|
-
}, []);
|
|
23
|
-
useEffect(() => {
|
|
24
|
-
if (!ref.current)
|
|
25
|
-
return;
|
|
26
|
-
if (disabled)
|
|
27
|
-
return;
|
|
28
|
-
const focusableElements = getFocusableElements(ref.current);
|
|
29
|
-
updateTabIndex({ focusableElements });
|
|
30
|
-
}, [ref, updateTabIndex, disabled]);
|
|
31
|
-
useHotkeys({
|
|
32
|
-
[backHotkeys.join(", ")]: () => {
|
|
33
|
-
if (!ref.current)
|
|
34
|
-
return;
|
|
35
|
-
const data = focusPreviousElement(ref.current, { circular });
|
|
36
|
-
updateTabIndex(data);
|
|
37
|
-
},
|
|
38
|
-
[forwardHotkeys.join(", ")]: () => {
|
|
39
|
-
if (!ref.current)
|
|
40
|
-
return;
|
|
41
|
-
const data = focusNextElement(ref.current, { circular });
|
|
42
|
-
updateTabIndex(data);
|
|
43
|
-
},
|
|
44
|
-
Home: () => {
|
|
45
|
-
if (!ref.current)
|
|
46
|
-
return;
|
|
47
|
-
const data = focusFirstElement(ref.current);
|
|
48
|
-
updateTabIndex(data);
|
|
49
|
-
},
|
|
50
|
-
End: () => {
|
|
51
|
-
if (!ref.current)
|
|
52
|
-
return;
|
|
53
|
-
const data = focusLastElement(ref.current);
|
|
54
|
-
updateTabIndex(data);
|
|
55
|
-
},
|
|
56
|
-
}, [updateTabIndex, circular], {
|
|
57
|
-
ref,
|
|
58
|
-
preventDefault: true,
|
|
59
|
-
disabled,
|
|
60
|
-
});
|
|
61
|
-
};
|
|
62
|
-
export default useKeyboardArrowNavigation;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { SingletonKeyboardModeContext } from "./_private/useSingletonKeyboardMode.js";
|
|
4
|
-
const useKeyboardMode = () => {
|
|
5
|
-
const singletonKeyboardMode = React.useContext(SingletonKeyboardModeContext);
|
|
6
|
-
return React.useMemo(() => ({
|
|
7
|
-
enable: singletonKeyboardMode.enable,
|
|
8
|
-
disable: singletonKeyboardMode.disable,
|
|
9
|
-
activate: singletonKeyboardMode.activate,
|
|
10
|
-
deactivate: singletonKeyboardMode.deactivate,
|
|
11
|
-
}), [singletonKeyboardMode]);
|
|
12
|
-
};
|
|
13
|
-
export default useKeyboardMode;
|