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.
Files changed (180) hide show
  1. package/dist/bundle.css +1 -1
  2. package/dist/bundle.d.ts +4 -11
  3. package/dist/bundle.js +2 -2
  4. package/dist/components/Accordion/Accordion.types.d.ts +3 -2
  5. package/dist/components/Accordion/AccordionControlled.js +1 -2
  6. package/dist/components/Accordion/AccordionTrigger.js +1 -1
  7. package/dist/components/ActionBar/ActionBar.js +1 -1
  8. package/dist/components/ActionBar/ActionBar.types.d.ts +3 -2
  9. package/dist/components/Actionable/Actionable.d.ts +2 -2
  10. package/dist/components/Actionable/Actionable.js +1 -1
  11. package/dist/components/Actionable/Actionable.types.d.ts +1 -1
  12. package/dist/components/Actionable/index.d.ts +1 -1
  13. package/dist/components/Alert/Alert.types.d.ts +3 -2
  14. package/dist/components/Autocomplete/Autocomplete.js +3 -5
  15. package/dist/components/Autocomplete/Autocomplete.types.d.ts +1 -1
  16. package/dist/components/Avatar/Avatar.js +1 -1
  17. package/dist/components/Avatar/Avatar.types.d.ts +5 -4
  18. package/dist/components/Badge/Badge.js +1 -1
  19. package/dist/components/Badge/Badge.types.d.ts +4 -4
  20. package/dist/components/Badge/BadgeContainer.js +1 -1
  21. package/dist/components/Breadcrumbs/Breadcrumbs.js +1 -1
  22. package/dist/components/Breadcrumbs/Breadcrumbs.types.d.ts +3 -3
  23. package/dist/components/Button/Button.js +1 -1
  24. package/dist/components/Button/Button.types.d.ts +3 -2
  25. package/dist/components/Button/ButtonGroup.js +1 -1
  26. package/dist/components/Calendar/CalendarDate.js +1 -1
  27. package/dist/components/Calendar/useCalendarKeyboardNavigation.js +1 -1
  28. package/dist/components/Card/Card.d.ts +6 -14
  29. package/dist/components/Card/Card.js +1 -1
  30. package/dist/components/Card/Card.types.d.ts +4 -3
  31. package/dist/components/Carousel/Carousel.js +2 -4
  32. package/dist/components/Carousel/Carousel.types.d.ts +3 -2
  33. package/dist/components/Carousel/CarouselControl.js +1 -2
  34. package/dist/components/Checkbox/Checkbox.js +1 -2
  35. package/dist/components/Checkbox/Checkbox.types.d.ts +4 -3
  36. package/dist/components/Container/Container.js +1 -1
  37. package/dist/components/Container/Container.types.d.ts +3 -2
  38. package/dist/components/ContextMenu/ContextMenu.js +1 -2
  39. package/dist/components/Dismissible/Dismissible.js +1 -1
  40. package/dist/components/Dismissible/Dismissible.types.d.ts +3 -3
  41. package/dist/components/Divider/Divider.js +1 -1
  42. package/dist/components/Divider/Divider.types.d.ts +3 -2
  43. package/dist/components/DropdownMenu/DropdownMenu.js +1 -3
  44. package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +1 -1
  45. package/dist/components/FileUpload/FileUpload.js +1 -2
  46. package/dist/components/FileUpload/FileUpload.types.d.ts +4 -3
  47. package/dist/components/Flyout/Flyout.module.css +1 -1
  48. package/dist/components/Flyout/Flyout.types.d.ts +9 -7
  49. package/dist/components/Flyout/FlyoutContent.js +3 -3
  50. package/dist/components/Flyout/FlyoutControlled.js +4 -7
  51. package/dist/components/Flyout/useFlyout.d.ts +2 -2
  52. package/dist/components/Flyout/useFlyout.js +2 -2
  53. package/dist/components/Flyout/utilities/safeArea.d.ts +2 -2
  54. package/dist/components/Grid/Grid.js +1 -1
  55. package/dist/components/Grid/Grid.types.d.ts +5 -4
  56. package/dist/components/Hidden/Hidden.js +1 -1
  57. package/dist/components/HiddenInput/HiddenInput.js +1 -1
  58. package/dist/components/HiddenInput/HiddenInput.types.d.ts +3 -2
  59. package/dist/components/Hotkey/Hotkey.js +1 -1
  60. package/dist/components/Hotkey/Hotkey.types.d.ts +3 -3
  61. package/dist/components/Icon/Icon.js +1 -1
  62. package/dist/components/Icon/Icon.types.d.ts +3 -2
  63. package/dist/components/Image/Image.js +1 -1
  64. package/dist/components/Image/Image.types.d.ts +5 -4
  65. package/dist/components/Link/Link.js +1 -1
  66. package/dist/components/Loader/Loader.js +1 -1
  67. package/dist/components/Loader/Loader.types.d.ts +3 -2
  68. package/dist/components/MenuItem/MenuItem.js +1 -1
  69. package/dist/components/MenuItem/MenuItem.types.d.ts +3 -2
  70. package/dist/components/Modal/Modal.js +6 -6
  71. package/dist/components/Modal/Modal.types.d.ts +5 -4
  72. package/dist/components/NumberField/NumberFieldControlled.js +1 -2
  73. package/dist/components/Overlay/Overlay.js +7 -12
  74. package/dist/components/Overlay/Overlay.types.d.ts +5 -3
  75. package/dist/components/Pagination/Pagination.types.d.ts +3 -3
  76. package/dist/components/PinField/PinField.types.d.ts +4 -3
  77. package/dist/components/PinField/PinFieldControlled.js +1 -1
  78. package/dist/components/Popover/Popover.js +1 -1
  79. package/dist/components/Popover/Popover.types.d.ts +1 -1
  80. package/dist/components/Progress/Progress.js +1 -1
  81. package/dist/components/Progress/Progress.types.d.ts +3 -3
  82. package/dist/components/ProgressIndicator/ProgressIndicator.js +1 -1
  83. package/dist/components/ProgressIndicator/ProgressIndicator.types.d.ts +3 -3
  84. package/dist/components/Radio/Radio.js +1 -1
  85. package/dist/components/Radio/Radio.types.d.ts +4 -3
  86. package/dist/components/RadioGroup/RadioGroup.types.d.ts +3 -2
  87. package/dist/components/Reshaped/Reshaped.js +4 -11
  88. package/dist/components/Reshaped/Reshaped.types.d.ts +3 -2
  89. package/dist/components/Resizable/Resizable.js +1 -1
  90. package/dist/components/Resizable/ResizableHandle.js +1 -1
  91. package/dist/components/Scrim/Scrim.js +1 -1
  92. package/dist/components/Scrim/Scrim.types.d.ts +4 -4
  93. package/dist/components/ScrollArea/ScrollArea.js +2 -4
  94. package/dist/components/ScrollArea/ScrollArea.types.d.ts +5 -3
  95. package/dist/components/Select/Select.types.d.ts +5 -4
  96. package/dist/components/Select/SelectNative.js +1 -1
  97. package/dist/components/Select/SelectRoot.js +1 -1
  98. package/dist/components/Skeleton/Skeleton.js +1 -1
  99. package/dist/components/Skeleton/Skeleton.types.d.ts +3 -3
  100. package/dist/components/Slider/Slider.types.d.ts +3 -3
  101. package/dist/components/Slider/SliderControlled.js +2 -4
  102. package/dist/components/Slider/SliderThumb.js +1 -1
  103. package/dist/components/Stepper/Stepper.types.d.ts +5 -4
  104. package/dist/components/Switch/Switch.js +1 -1
  105. package/dist/components/Switch/Switch.types.d.ts +4 -3
  106. package/dist/components/Table/Table.js +1 -1
  107. package/dist/components/Table/Table.types.d.ts +12 -12
  108. package/dist/components/Tabs/Tabs.types.d.ts +6 -6
  109. package/dist/components/Tabs/TabsItem.js +2 -3
  110. package/dist/components/Tabs/TabsList.js +1 -4
  111. package/dist/components/Tabs/TabsPanel.js +2 -2
  112. package/dist/components/Text/Text.js +1 -1
  113. package/dist/components/Text/Text.types.d.ts +3 -2
  114. package/dist/components/TextArea/TextArea.js +1 -1
  115. package/dist/components/TextArea/TextArea.types.d.ts +5 -4
  116. package/dist/components/TextField/TextField.js +1 -1
  117. package/dist/components/TextField/TextField.types.d.ts +4 -3
  118. package/dist/components/Theme/GlobalColorMode.js +1 -1
  119. package/dist/components/Theme/Theme.js +1 -2
  120. package/dist/components/Theme/Theme.types.d.ts +2 -1
  121. package/dist/components/Timeline/Timeline.js +1 -1
  122. package/dist/components/Timeline/Timeline.types.d.ts +5 -5
  123. package/dist/components/Toast/Toast.types.d.ts +3 -3
  124. package/dist/components/Toast/ToastContainer.js +2 -3
  125. package/dist/components/Toast/ToastRegion.js +2 -2
  126. package/dist/components/ToggleButton/ToggleButtonUncontrolled.js +1 -1
  127. package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js +1 -1
  128. package/dist/components/Tooltip/Tooltip.types.d.ts +1 -1
  129. package/dist/components/View/View.js +1 -1
  130. package/dist/components/View/View.types.d.ts +5 -4
  131. package/dist/components/_private/Aligner/Aligner.js +1 -1
  132. package/dist/components/_private/Aligner/Aligner.types.d.ts +3 -3
  133. package/dist/components/_private/Expandable/Expandable.js +2 -2
  134. package/dist/components/_private/Expandable/Expandable.types.d.ts +2 -2
  135. package/dist/components/_private/Portal/Portal.js +1 -2
  136. package/dist/hooks/_private/useDrag.js +2 -4
  137. package/dist/hooks/_private/useFadeSide.js +2 -3
  138. package/dist/hooks/_private/useSingletonViewport.d.ts +10 -0
  139. package/dist/hooks/_private/useSingletonViewport.js +52 -0
  140. package/dist/hooks/useResponsiveClientValue.js +15 -53
  141. package/dist/hooks/useViewport.d.ts +2 -0
  142. package/dist/hooks/useViewport.js +6 -0
  143. package/dist/index.d.ts +4 -11
  144. package/dist/index.js +2 -10
  145. package/dist/styles/mixin.d.ts +2 -2
  146. package/dist/styles/types.d.ts +2 -1
  147. package/dist/tests/ThemesPlayground.js +1 -1
  148. package/dist/types/global.d.ts +0 -15
  149. package/dist/utilities/props.d.ts +2 -1
  150. package/package.json +2 -2
  151. package/dist/core/Actionable/Actionable.d.ts +0 -4
  152. package/dist/core/Actionable/Actionable.js +0 -73
  153. package/dist/core/Actionable/Actionable.types.d.ts +0 -34
  154. package/dist/core/Actionable/Actionable.types.js +0 -1
  155. package/dist/core/Actionable/index.d.ts +0 -2
  156. package/dist/core/Actionable/index.js +0 -1
  157. package/dist/hooks/_private/useSingletonEnvironment.d.ts +0 -9
  158. package/dist/hooks/_private/useSingletonEnvironment.js +0 -33
  159. package/dist/hooks/_private/useSingletonHotkeys.d.ts +0 -35
  160. package/dist/hooks/_private/useSingletonHotkeys.js +0 -191
  161. package/dist/hooks/_private/useSingletonKeyboardMode.d.ts +0 -13
  162. package/dist/hooks/_private/useSingletonKeyboardMode.js +0 -58
  163. package/dist/hooks/useHandlerRef.d.ts +0 -8
  164. package/dist/hooks/useHandlerRef.js +0 -16
  165. package/dist/hooks/useHotkeys.d.ts +0 -11
  166. package/dist/hooks/useHotkeys.js +0 -27
  167. package/dist/hooks/useIsomorphicLayoutEffect.d.ts +0 -3
  168. package/dist/hooks/useIsomorphicLayoutEffect.js +0 -4
  169. package/dist/hooks/useKeyboardArrowNavigation.d.ts +0 -9
  170. package/dist/hooks/useKeyboardArrowNavigation.js +0 -62
  171. package/dist/hooks/useKeyboardMode.d.ts +0 -7
  172. package/dist/hooks/useKeyboardMode.js +0 -13
  173. package/dist/hooks/useOnClickOutside.d.ts +0 -5
  174. package/dist/hooks/useOnClickOutside.js +0 -63
  175. package/dist/hooks/useRTL.d.ts +0 -2
  176. package/dist/hooks/useRTL.js +0 -7
  177. package/dist/hooks/useScrollLock.d.ts +0 -10
  178. package/dist/hooks/useScrollLock.js +0 -25
  179. package/dist/hooks/useToggle.d.ts +0 -7
  180. 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,2 +0,0 @@
1
- export { default } from "./Actionable";
2
- export type { Props as ActionableProps, Ref as ActionableRef } from "./Actionable.types";
@@ -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;
@@ -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,3 +0,0 @@
1
- import React from "react";
2
- declare const useIsomorphicLayoutEffect: typeof React.useEffect;
3
- export default useIsomorphicLayoutEffect;
@@ -1,4 +0,0 @@
1
- "use client";
2
- import React from "react";
3
- const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
4
- export default useIsomorphicLayoutEffect;
@@ -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,7 +0,0 @@
1
- declare const useKeyboardMode: () => {
2
- enable: () => void;
3
- disable: () => void;
4
- activate: () => void;
5
- deactivate: () => void;
6
- };
7
- export default useKeyboardMode;
@@ -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;
@@ -1,5 +0,0 @@
1
- import React from "react";
2
- declare const useOnClickOutside: (refs: React.RefObject<HTMLElement | null>[], handler: (event: Event) => void, options?: {
3
- disabled?: boolean;
4
- }) => void;
5
- export default useOnClickOutside;