@basic-ui/core 0.0.60 → 0.0.61

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 (214) hide show
  1. package/build/cjs/index.js.map +1 -1
  2. package/build/esm/Accordion/AccordionBody.d.ts.map +1 -1
  3. package/build/esm/Accordion/AccordionBody.js +6 -26
  4. package/build/esm/Accordion/AccordionBody.js.map +1 -1
  5. package/build/esm/Accordion/AccordionHeader.d.ts.map +1 -1
  6. package/build/esm/Accordion/AccordionHeader.js +21 -69
  7. package/build/esm/Accordion/AccordionHeader.js.map +1 -1
  8. package/build/esm/Accordion/AccordionItem.d.ts.map +1 -1
  9. package/build/esm/Accordion/AccordionItem.js +31 -18
  10. package/build/esm/Accordion/AccordionItem.js.map +1 -1
  11. package/build/esm/Accordion/context.d.ts +0 -8
  12. package/build/esm/Accordion/context.d.ts.map +1 -1
  13. package/build/esm/Accordion/context.js +0 -11
  14. package/build/esm/Accordion/context.js.map +1 -1
  15. package/build/esm/Accordion/scopeQuery.d.ts +1 -0
  16. package/build/esm/Accordion/scopeQuery.d.ts.map +1 -1
  17. package/build/esm/Accordion/scopeQuery.js +3 -0
  18. package/build/esm/Accordion/scopeQuery.js.map +1 -1
  19. package/build/esm/Collapsible/Collapsible.d.ts +13 -0
  20. package/build/esm/Collapsible/Collapsible.d.ts.map +1 -0
  21. package/build/esm/Collapsible/Collapsible.js +53 -0
  22. package/build/esm/Collapsible/Collapsible.js.map +1 -0
  23. package/build/esm/Collapsible/CollapsiblePanel.d.ts +10 -0
  24. package/build/esm/Collapsible/CollapsiblePanel.d.ts.map +1 -0
  25. package/build/esm/Collapsible/CollapsiblePanel.js +85 -0
  26. package/build/esm/Collapsible/CollapsiblePanel.js.map +1 -0
  27. package/build/esm/Collapsible/CollapsibleTrigger.d.ts +11 -0
  28. package/build/esm/Collapsible/CollapsibleTrigger.d.ts.map +1 -0
  29. package/build/esm/Collapsible/CollapsibleTrigger.js +51 -0
  30. package/build/esm/Collapsible/CollapsibleTrigger.js.map +1 -0
  31. package/build/esm/Collapsible/context.d.ts +16 -0
  32. package/build/esm/Collapsible/context.d.ts.map +1 -0
  33. package/build/esm/Collapsible/context.js +11 -0
  34. package/build/esm/Collapsible/context.js.map +1 -0
  35. package/build/esm/Collapsible/index.d.ts +4 -0
  36. package/build/esm/Collapsible/index.d.ts.map +1 -0
  37. package/build/esm/Collapsible/index.js +4 -0
  38. package/build/esm/Collapsible/index.js.map +1 -0
  39. package/build/esm/Menu/Menu.d.ts +3 -2
  40. package/build/esm/Menu/Menu.d.ts.map +1 -1
  41. package/build/esm/Menu/Menu.js +64 -4
  42. package/build/esm/Menu/Menu.js.map +1 -1
  43. package/build/esm/Menu/MenuButton.d.ts.map +1 -1
  44. package/build/esm/Menu/MenuButton.js +85 -8
  45. package/build/esm/Menu/MenuButton.js.map +1 -1
  46. package/build/esm/Menu/MenuItem.d.ts.map +1 -1
  47. package/build/esm/Menu/MenuItem.js +16 -4
  48. package/build/esm/Menu/MenuItem.js.map +1 -1
  49. package/build/esm/Menu/MenuList.d.ts.map +1 -1
  50. package/build/esm/Menu/MenuList.js +47 -12
  51. package/build/esm/Menu/MenuList.js.map +1 -1
  52. package/build/esm/Menu/MenuPopover.d.ts.map +1 -1
  53. package/build/esm/Menu/MenuPopover.js +12 -1
  54. package/build/esm/Menu/MenuPopover.js.map +1 -1
  55. package/build/esm/Menu/MenuSubmenuTrigger.d.ts +8 -0
  56. package/build/esm/Menu/MenuSubmenuTrigger.d.ts.map +1 -0
  57. package/build/esm/Menu/MenuSubmenuTrigger.js +131 -0
  58. package/build/esm/Menu/MenuSubmenuTrigger.js.map +1 -0
  59. package/build/esm/Menu/context.d.ts +13 -3
  60. package/build/esm/Menu/context.d.ts.map +1 -1
  61. package/build/esm/Menu/context.js +1 -0
  62. package/build/esm/Menu/context.js.map +1 -1
  63. package/build/esm/Menu/index.d.ts +3 -0
  64. package/build/esm/Menu/index.d.ts.map +1 -1
  65. package/build/esm/Menu/index.js +2 -0
  66. package/build/esm/Menu/index.js.map +1 -1
  67. package/build/esm/Menu/scope.d.ts +1 -0
  68. package/build/esm/Menu/scope.d.ts.map +1 -1
  69. package/build/esm/Menu/scope.js +2 -1
  70. package/build/esm/Menu/scope.js.map +1 -1
  71. package/build/esm/MenuBar/MenuBar.d.ts +11 -0
  72. package/build/esm/MenuBar/MenuBar.d.ts.map +1 -0
  73. package/build/esm/MenuBar/MenuBar.js +153 -0
  74. package/build/esm/MenuBar/MenuBar.js.map +1 -0
  75. package/build/esm/MenuBar/context.d.ts +29 -0
  76. package/build/esm/MenuBar/context.d.ts.map +1 -0
  77. package/build/esm/MenuBar/context.js +7 -0
  78. package/build/esm/MenuBar/context.js.map +1 -0
  79. package/build/esm/MenuBar/index.d.ts +2 -0
  80. package/build/esm/MenuBar/index.d.ts.map +1 -0
  81. package/build/esm/MenuBar/index.js +2 -0
  82. package/build/esm/MenuBar/index.js.map +1 -0
  83. package/build/esm/Slider/Slider.d.ts +47 -1
  84. package/build/esm/Slider/Slider.d.ts.map +1 -1
  85. package/build/esm/Slider/Slider.js +91 -5
  86. package/build/esm/Slider/Slider.js.map +1 -1
  87. package/build/esm/ToggleGroup/ToggleGroup.d.ts +40 -0
  88. package/build/esm/ToggleGroup/ToggleGroup.d.ts.map +1 -0
  89. package/build/esm/ToggleGroup/ToggleGroup.js +113 -0
  90. package/build/esm/ToggleGroup/ToggleGroup.js.map +1 -0
  91. package/build/esm/ToggleGroup/ToggleGroupContext.d.ts +10 -0
  92. package/build/esm/ToggleGroup/ToggleGroupContext.d.ts.map +1 -0
  93. package/build/esm/ToggleGroup/ToggleGroupContext.js +6 -0
  94. package/build/esm/ToggleGroup/ToggleGroupContext.js.map +1 -0
  95. package/build/esm/ToggleGroup/index.d.ts +3 -0
  96. package/build/esm/ToggleGroup/index.d.ts.map +1 -0
  97. package/build/esm/ToggleGroup/index.js +3 -0
  98. package/build/esm/ToggleGroup/index.js.map +1 -0
  99. package/build/esm/Tree/Tree.d.ts +3 -0
  100. package/build/esm/Tree/Tree.d.ts.map +1 -0
  101. package/build/esm/Tree/Tree.js +730 -0
  102. package/build/esm/Tree/Tree.js.map +1 -0
  103. package/build/esm/Tree/TreeHeader.d.ts +3 -0
  104. package/build/esm/Tree/TreeHeader.d.ts.map +1 -0
  105. package/build/esm/Tree/TreeHeader.js +5 -0
  106. package/build/esm/Tree/TreeHeader.js.map +1 -0
  107. package/build/esm/Tree/TreeItem.d.ts +3 -0
  108. package/build/esm/Tree/TreeItem.d.ts.map +1 -0
  109. package/build/esm/Tree/TreeItem.js +5 -0
  110. package/build/esm/Tree/TreeItem.js.map +1 -0
  111. package/build/esm/Tree/TreeItemContent.d.ts +3 -0
  112. package/build/esm/Tree/TreeItemContent.d.ts.map +1 -0
  113. package/build/esm/Tree/TreeItemContent.js +69 -0
  114. package/build/esm/Tree/TreeItemContent.js.map +1 -0
  115. package/build/esm/Tree/TreeSection.d.ts +3 -0
  116. package/build/esm/Tree/TreeSection.d.ts.map +1 -0
  117. package/build/esm/Tree/TreeSection.js +5 -0
  118. package/build/esm/Tree/TreeSection.js.map +1 -0
  119. package/build/esm/Tree/collection.d.ts +18 -0
  120. package/build/esm/Tree/collection.d.ts.map +1 -0
  121. package/build/esm/Tree/collection.js +252 -0
  122. package/build/esm/Tree/collection.js.map +1 -0
  123. package/build/esm/Tree/context.d.ts +3 -0
  124. package/build/esm/Tree/context.d.ts.map +1 -0
  125. package/build/esm/Tree/context.js +3 -0
  126. package/build/esm/Tree/context.js.map +1 -0
  127. package/build/esm/Tree/index.d.ts +8 -0
  128. package/build/esm/Tree/index.d.ts.map +1 -0
  129. package/build/esm/Tree/index.js +7 -0
  130. package/build/esm/Tree/index.js.map +1 -0
  131. package/build/esm/Tree/types.d.ts +128 -0
  132. package/build/esm/Tree/types.d.ts.map +1 -0
  133. package/build/esm/Tree/types.js +2 -0
  134. package/build/esm/Tree/types.js.map +1 -0
  135. package/build/esm/hooks/index.d.ts +1 -0
  136. package/build/esm/hooks/index.d.ts.map +1 -1
  137. package/build/esm/hooks/index.js +1 -0
  138. package/build/esm/hooks/index.js.map +1 -1
  139. package/build/esm/hooks/useTransitionStatus.d.ts +7 -0
  140. package/build/esm/hooks/useTransitionStatus.d.ts.map +1 -0
  141. package/build/esm/hooks/useTransitionStatus.js +48 -0
  142. package/build/esm/hooks/useTransitionStatus.js.map +1 -0
  143. package/build/esm/index.d.ts +5 -0
  144. package/build/esm/index.d.ts.map +1 -1
  145. package/build/esm/index.js +5 -0
  146. package/build/esm/index.js.map +1 -1
  147. package/build/esm/toggle/Toggle.d.ts +28 -0
  148. package/build/esm/toggle/Toggle.d.ts.map +1 -0
  149. package/build/esm/toggle/Toggle.js +55 -0
  150. package/build/esm/toggle/Toggle.js.map +1 -0
  151. package/build/esm/toggle/index.d.ts +2 -0
  152. package/build/esm/toggle/index.d.ts.map +1 -0
  153. package/build/esm/toggle/index.js +2 -0
  154. package/build/esm/toggle/index.js.map +1 -0
  155. package/build/esm/utils/assign-ref.d.ts +3 -3
  156. package/build/esm/utils/assign-ref.d.ts.map +1 -1
  157. package/build/esm/utils/assign-ref.js +1 -1
  158. package/build/esm/utils/assign-ref.js.map +1 -1
  159. package/build/tsconfig-build.tsbuildinfo +1 -1
  160. package/build/tsconfig.tsbuildinfo +1 -1
  161. package/package.json +7 -4
  162. package/src/Accordion/AccordionBody.tsx +6 -35
  163. package/src/Accordion/AccordionHeader.tsx +29 -103
  164. package/src/Accordion/AccordionItem.tsx +40 -29
  165. package/src/Accordion/context.ts +0 -18
  166. package/src/Accordion/scopeQuery.ts +4 -0
  167. package/src/Collapsible/Collapsible.story.tsx +153 -0
  168. package/src/Collapsible/Collapsible.tsx +79 -0
  169. package/src/Collapsible/CollapsiblePanel.tsx +103 -0
  170. package/src/Collapsible/CollapsibleTrigger.tsx +60 -0
  171. package/src/Collapsible/context.ts +28 -0
  172. package/src/Collapsible/index.ts +3 -0
  173. package/src/Menu/Menu.story.tsx +70 -1
  174. package/src/Menu/Menu.tsx +141 -65
  175. package/src/Menu/MenuButton.tsx +115 -9
  176. package/src/Menu/MenuItem.tsx +20 -3
  177. package/src/Menu/MenuList.tsx +50 -13
  178. package/src/Menu/MenuPopover.tsx +12 -2
  179. package/src/Menu/MenuSubmenuTrigger.tsx +167 -0
  180. package/src/Menu/context.ts +20 -10
  181. package/src/Menu/index.ts +3 -0
  182. package/src/Menu/scope.ts +4 -1
  183. package/src/Menu/styles.css +57 -22
  184. package/src/MenuBar/MenuBar.story.tsx +92 -0
  185. package/src/MenuBar/MenuBar.tsx +236 -0
  186. package/src/MenuBar/context.ts +46 -0
  187. package/src/MenuBar/index.ts +1 -0
  188. package/src/MenuBar/styles.css +78 -0
  189. package/src/Slider/Slider.story.tsx +1 -1
  190. package/src/Slider/Slider.tsx +145 -8
  191. package/src/Toggle/Toggle.story.tsx +42 -0
  192. package/src/Toggle/Toggle.tsx +95 -0
  193. package/src/Toggle/index.ts +1 -0
  194. package/src/Toggle/styles.css +39 -0
  195. package/src/ToggleGroup/ToggleGroup.story.tsx +86 -0
  196. package/src/ToggleGroup/ToggleGroup.tsx +185 -0
  197. package/src/ToggleGroup/ToggleGroupContext.ts +17 -0
  198. package/src/ToggleGroup/index.ts +2 -0
  199. package/src/ToggleGroup/styles.css +66 -0
  200. package/src/Tree/Tree.story.tsx +221 -0
  201. package/src/Tree/Tree.tsx +1081 -0
  202. package/src/Tree/TreeHeader.tsx +9 -0
  203. package/src/Tree/TreeItem.tsx +9 -0
  204. package/src/Tree/TreeItemContent.tsx +91 -0
  205. package/src/Tree/TreeSection.tsx +9 -0
  206. package/src/Tree/collection.tsx +371 -0
  207. package/src/Tree/context.ts +6 -0
  208. package/src/Tree/index.ts +7 -0
  209. package/src/Tree/styles.css +135 -0
  210. package/src/Tree/types.ts +161 -0
  211. package/src/hooks/index.ts +1 -0
  212. package/src/hooks/useTransitionStatus.ts +65 -0
  213. package/src/index.ts +5 -0
  214. package/src/utils/assign-ref.ts +4 -4
@@ -1,2 +1,3 @@
1
+ export declare const MENU_SUBMENU_TRIGGER_ATTR = "data-menu-submenu-trigger";
1
2
  export declare function queryScope(type: string, props: Record<string, unknown>): boolean;
2
3
  //# sourceMappingURL=scope.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"scope.d.ts","sourceRoot":"","sources":["../../../src/Menu/scope.ts"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,WAMtE"}
1
+ {"version":3,"file":"scope.d.ts","sourceRoot":"","sources":["../../../src/Menu/scope.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,8BAA8B,CAAC;AAErE,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,WAOtE"}
@@ -1,4 +1,5 @@
1
+ export const MENU_SUBMENU_TRIGGER_ATTR = 'data-menu-submenu-trigger';
1
2
  export function queryScope(type, props) {
2
- return props['data-menu-item'] === '' && props['data-disabled'] !== '' && props['data-disabled'] !== true;
3
+ return (props['data-menu-item'] === '' || props[MENU_SUBMENU_TRIGGER_ATTR] === '') && props['data-disabled'] !== '' && props['data-disabled'] !== true;
3
4
  }
4
5
  //# sourceMappingURL=scope.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"scope.js","names":["queryScope","type","props"],"sources":["../../../src/Menu/scope.ts"],"sourcesContent":["export function queryScope(type: string, props: Record<string, unknown>) {\n return (\n props['data-menu-item'] === '' &&\n props['data-disabled'] !== '' &&\n props['data-disabled'] !== true\n );\n}\n"],"mappings":"AAAA,OAAO,SAASA,UAAUA,CAACC,IAAY,EAAEC,KAA8B,EAAE;EACvE,OACEA,KAAK,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAC9BA,KAAK,CAAC,eAAe,CAAC,KAAK,EAAE,IAC7BA,KAAK,CAAC,eAAe,CAAC,KAAK,IAAI;AAEnC","ignoreList":[]}
1
+ {"version":3,"file":"scope.js","names":["MENU_SUBMENU_TRIGGER_ATTR","queryScope","type","props"],"sources":["../../../src/Menu/scope.ts"],"sourcesContent":["export const MENU_SUBMENU_TRIGGER_ATTR = 'data-menu-submenu-trigger';\n\nexport function queryScope(type: string, props: Record<string, unknown>) {\n return (\n (props['data-menu-item'] === '' ||\n props[MENU_SUBMENU_TRIGGER_ATTR] === '') &&\n props['data-disabled'] !== '' &&\n props['data-disabled'] !== true\n );\n}\n"],"mappings":"AAAA,OAAO,MAAMA,yBAAyB,GAAG,2BAA2B;AAEpE,OAAO,SAASC,UAAUA,CAACC,IAAY,EAAEC,KAA8B,EAAE;EACvE,OACE,CAACA,KAAK,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAC7BA,KAAK,CAACH,yBAAyB,CAAC,KAAK,EAAE,KACzCG,KAAK,CAAC,eAAe,CAAC,KAAK,EAAE,IAC7BA,KAAK,CAAC,eAAe,CAAC,KAAK,IAAI;AAEnC","ignoreList":[]}
@@ -0,0 +1,11 @@
1
+ import type { ElementType, HTMLAttributes } from 'react';
2
+ import type { MenuBarOrientation } from './context';
3
+ export interface MenuBarProps extends HTMLAttributes<HTMLDivElement> {
4
+ as?: ElementType<any>;
5
+ innerAs?: ElementType<any>;
6
+ disabled?: boolean;
7
+ loopFocus?: boolean;
8
+ orientation?: MenuBarOrientation;
9
+ }
10
+ export declare const MenuBar: import("react").ForwardRefExoticComponent<MenuBarProps & import("react").RefAttributes<HTMLDivElement>>;
11
+ //# sourceMappingURL=MenuBar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuBar.d.ts","sourceRoot":"","sources":["../../../src/MenuBar/MenuBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,WAAW,CAAC;AAGnB,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,EAAE,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAQD,eAAO,MAAM,OAAO,yGAmNnB,CAAC"}
@@ -0,0 +1,153 @@
1
+ import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
2
+ import { MenuBarProvider } from './context';
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ export const MenuBar = /*#__PURE__*/forwardRef(function MenuBar(props, forwardedRef) {
5
+ const {
6
+ as: Comp = 'div',
7
+ innerAs,
8
+ disabled = false,
9
+ loopFocus = true,
10
+ orientation = 'horizontal',
11
+ ...otherProps
12
+ } = props;
13
+ const menusRef = useRef(new Map());
14
+ const buttonsRef = useRef(new Map());
15
+ const [activeMenuId, setActiveMenuId] = useState(null);
16
+ const [openMenuIdState, setOpenMenuIdState] = useState(null);
17
+ const getEnabledButtons = useCallback(() => {
18
+ if (disabled) {
19
+ return [];
20
+ }
21
+ return Array.from(buttonsRef.current.values()).filter(button => !button.disabled && button.element.isConnected);
22
+ }, [disabled]);
23
+ const syncActiveMenuId = useCallback(() => {
24
+ setActiveMenuId(currentId => {
25
+ const current = currentId ? buttonsRef.current.get(currentId) : null;
26
+ if (current && !current.disabled && current.element.isConnected) {
27
+ return currentId;
28
+ }
29
+ return getEnabledButtons()[0]?.id ?? null;
30
+ });
31
+ }, [getEnabledButtons]);
32
+ const registerButton = useCallback((id, element, buttonDisabled) => {
33
+ if (element) {
34
+ buttonsRef.current.set(id, {
35
+ id,
36
+ element,
37
+ disabled: buttonDisabled
38
+ });
39
+ } else {
40
+ buttonsRef.current.delete(id);
41
+ }
42
+ syncActiveMenuId();
43
+ }, [syncActiveMenuId]);
44
+ const registerMenu = useCallback(menu => {
45
+ menusRef.current.set(menu.id, menu);
46
+ return () => {
47
+ menusRef.current.delete(menu.id);
48
+ };
49
+ }, []);
50
+ const notifyMenuOpenChange = useCallback((id, isOpen) => {
51
+ setOpenMenuIdState(currentId => {
52
+ if (isOpen) {
53
+ return id;
54
+ }
55
+ return currentId === id ? null : currentId;
56
+ });
57
+ }, []);
58
+ const focusMenu = useCallback(id => {
59
+ const button = buttonsRef.current.get(id);
60
+ if (!button || button.disabled) {
61
+ return;
62
+ }
63
+ setActiveMenuId(id);
64
+ button.element.focus({
65
+ preventScroll: true
66
+ });
67
+ }, []);
68
+ const openMenu = useCallback(function (id, e) {
69
+ let focusKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
70
+ if (disabled) {
71
+ return;
72
+ }
73
+ if (openMenuIdState && openMenuIdState !== id) {
74
+ menusRef.current.get(openMenuIdState)?.onOpenChange(e, false);
75
+ }
76
+ const menu = menusRef.current.get(id);
77
+ if (!menu) {
78
+ return;
79
+ }
80
+ menu.openWithArrowKeyRef.current = focusKey;
81
+ menu.onOpenChange(e, true);
82
+ setActiveMenuId(id);
83
+ setOpenMenuIdState(id);
84
+ }, [disabled, openMenuIdState]);
85
+ const closeMenu = useCallback((id, e) => {
86
+ menusRef.current.get(id)?.onOpenChange(e, false);
87
+ setOpenMenuIdState(currentId => currentId === id ? null : currentId);
88
+ }, []);
89
+ const moveFocus = useCallback((id, delta, e, options) => {
90
+ const buttons = getEnabledButtons();
91
+ if (buttons.length === 0) {
92
+ return;
93
+ }
94
+ const currentIndex = Math.max(0, buttons.findIndex(button => button.id === id));
95
+ let nextIndex = currentIndex + delta;
96
+ if (loopFocus) {
97
+ nextIndex = (nextIndex + buttons.length) % buttons.length;
98
+ } else {
99
+ nextIndex = Math.max(0, Math.min(nextIndex, buttons.length - 1));
100
+ }
101
+ const nextButton = buttons[nextIndex];
102
+ if (!nextButton || nextButton.id === id) {
103
+ return;
104
+ }
105
+ focusMenu(nextButton.id);
106
+ if (options?.open) {
107
+ openMenu(nextButton.id, e, options.focusKey ?? 'ArrowDown');
108
+ }
109
+ }, [focusMenu, getEnabledButtons, loopFocus, openMenu]);
110
+ const focusFirstMenu = useCallback(() => {
111
+ const firstButton = getEnabledButtons()[0];
112
+ if (firstButton) {
113
+ focusMenu(firstButton.id);
114
+ }
115
+ }, [focusMenu, getEnabledButtons]);
116
+ const focusLastMenu = useCallback(() => {
117
+ const buttons = getEnabledButtons();
118
+ const lastButton = buttons[buttons.length - 1];
119
+ if (lastButton) {
120
+ focusMenu(lastButton.id);
121
+ }
122
+ }, [focusMenu, getEnabledButtons]);
123
+ const value = useMemo(() => ({
124
+ activeMenuId,
125
+ disabled,
126
+ openMenuId: openMenuIdState,
127
+ orientation,
128
+ closeMenu,
129
+ focusFirstMenu,
130
+ focusLastMenu,
131
+ moveFocus,
132
+ notifyMenuOpenChange,
133
+ openMenu,
134
+ registerButton,
135
+ registerMenu,
136
+ setActiveMenuId
137
+ }), [activeMenuId, closeMenu, disabled, focusFirstMenu, focusLastMenu, moveFocus, notifyMenuOpenChange, openMenu, openMenuIdState, orientation, registerButton, registerMenu]);
138
+ return /*#__PURE__*/_jsx(MenuBarProvider, {
139
+ value: value,
140
+ children: /*#__PURE__*/_jsx(Comp, {
141
+ ref: forwardedRef,
142
+ as: innerAs,
143
+ role: "menubar",
144
+ "aria-orientation": orientation,
145
+ "data-menubar": "",
146
+ "data-orientation": orientation,
147
+ "data-disabled": disabled ? '' : undefined,
148
+ "data-has-submenu-open": openMenuIdState ? '' : undefined,
149
+ ...otherProps
150
+ })
151
+ });
152
+ });
153
+ //# sourceMappingURL=MenuBar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuBar.js","names":["forwardRef","useCallback","useMemo","useRef","useState","MenuBarProvider","jsx","_jsx","MenuBar","props","forwardedRef","as","Comp","innerAs","disabled","loopFocus","orientation","otherProps","menusRef","Map","buttonsRef","activeMenuId","setActiveMenuId","openMenuIdState","setOpenMenuIdState","getEnabledButtons","Array","from","current","values","filter","button","element","isConnected","syncActiveMenuId","currentId","get","id","registerButton","buttonDisabled","set","delete","registerMenu","menu","notifyMenuOpenChange","isOpen","focusMenu","focus","preventScroll","openMenu","e","focusKey","arguments","length","undefined","onOpenChange","openWithArrowKeyRef","closeMenu","moveFocus","delta","options","buttons","currentIndex","Math","max","findIndex","nextIndex","min","nextButton","open","focusFirstMenu","firstButton","focusLastMenu","lastButton","value","openMenuId","children","ref","role"],"sources":["../../../src/MenuBar/MenuBar.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes } from 'react';\nimport { forwardRef, useCallback, useMemo, useRef, useState } from 'react';\n\nimport type {\n MenuBarContextProps,\n MenuBarOrientation,\n MenuBarRegisteredMenu,\n} from './context';\nimport { MenuBarProvider } from './context';\n\nexport interface MenuBarProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n disabled?: boolean;\n loopFocus?: boolean;\n orientation?: MenuBarOrientation;\n}\n\ntype RegisteredButton = {\n id: string;\n element: HTMLElement;\n disabled: boolean;\n};\n\nexport const MenuBar = forwardRef<HTMLDivElement, MenuBarProps>(\n function MenuBar(props, forwardedRef) {\n const {\n as: Comp = 'div',\n innerAs,\n disabled = false,\n loopFocus = true,\n orientation = 'horizontal',\n ...otherProps\n } = props;\n\n const menusRef = useRef(new Map<string, MenuBarRegisteredMenu>());\n const buttonsRef = useRef(new Map<string, RegisteredButton>());\n const [activeMenuId, setActiveMenuId] = useState<string | null>(null);\n const [openMenuIdState, setOpenMenuIdState] = useState<string | null>(null);\n\n const getEnabledButtons = useCallback(() => {\n if (disabled) {\n return [];\n }\n\n return Array.from(buttonsRef.current.values()).filter(\n (button) => !button.disabled && button.element.isConnected\n );\n }, [disabled]);\n\n const syncActiveMenuId = useCallback(() => {\n setActiveMenuId((currentId) => {\n const current = currentId ? buttonsRef.current.get(currentId) : null;\n if (current && !current.disabled && current.element.isConnected) {\n return currentId;\n }\n\n return getEnabledButtons()[0]?.id ?? null;\n });\n }, [getEnabledButtons]);\n\n const registerButton = useCallback<MenuBarContextProps['registerButton']>(\n (id, element, buttonDisabled) => {\n if (element) {\n buttonsRef.current.set(id, {\n id,\n element,\n disabled: buttonDisabled,\n });\n } else {\n buttonsRef.current.delete(id);\n }\n\n syncActiveMenuId();\n },\n [syncActiveMenuId]\n );\n\n const registerMenu = useCallback<MenuBarContextProps['registerMenu']>(\n (menu) => {\n menusRef.current.set(menu.id, menu);\n\n return () => {\n menusRef.current.delete(menu.id);\n };\n },\n []\n );\n\n const notifyMenuOpenChange = useCallback<\n MenuBarContextProps['notifyMenuOpenChange']\n >((id, isOpen) => {\n setOpenMenuIdState((currentId) => {\n if (isOpen) {\n return id;\n }\n\n return currentId === id ? null : currentId;\n });\n }, []);\n\n const focusMenu = useCallback((id: string) => {\n const button = buttonsRef.current.get(id);\n if (!button || button.disabled) {\n return;\n }\n\n setActiveMenuId(id);\n button.element.focus({ preventScroll: true });\n }, []);\n\n const openMenu = useCallback<MenuBarContextProps['openMenu']>(\n (id, e, focusKey = null) => {\n if (disabled) {\n return;\n }\n\n if (openMenuIdState && openMenuIdState !== id) {\n menusRef.current.get(openMenuIdState)?.onOpenChange(e, false);\n }\n\n const menu = menusRef.current.get(id);\n if (!menu) {\n return;\n }\n\n menu.openWithArrowKeyRef.current = focusKey;\n menu.onOpenChange(e, true);\n setActiveMenuId(id);\n setOpenMenuIdState(id);\n },\n [disabled, openMenuIdState]\n );\n\n const closeMenu = useCallback<MenuBarContextProps['closeMenu']>((id, e) => {\n menusRef.current.get(id)?.onOpenChange(e, false);\n setOpenMenuIdState((currentId) => (currentId === id ? null : currentId));\n }, []);\n\n const moveFocus = useCallback<MenuBarContextProps['moveFocus']>(\n (id, delta, e, options) => {\n const buttons = getEnabledButtons();\n if (buttons.length === 0) {\n return;\n }\n\n const currentIndex = Math.max(\n 0,\n buttons.findIndex((button) => button.id === id)\n );\n let nextIndex = currentIndex + delta;\n\n if (loopFocus) {\n nextIndex = (nextIndex + buttons.length) % buttons.length;\n } else {\n nextIndex = Math.max(0, Math.min(nextIndex, buttons.length - 1));\n }\n\n const nextButton = buttons[nextIndex];\n if (!nextButton || nextButton.id === id) {\n return;\n }\n\n focusMenu(nextButton.id);\n\n if (options?.open) {\n openMenu(nextButton.id, e, options.focusKey ?? 'ArrowDown');\n }\n },\n [focusMenu, getEnabledButtons, loopFocus, openMenu]\n );\n\n const focusFirstMenu = useCallback(() => {\n const firstButton = getEnabledButtons()[0];\n if (firstButton) {\n focusMenu(firstButton.id);\n }\n }, [focusMenu, getEnabledButtons]);\n\n const focusLastMenu = useCallback(() => {\n const buttons = getEnabledButtons();\n const lastButton = buttons[buttons.length - 1];\n if (lastButton) {\n focusMenu(lastButton.id);\n }\n }, [focusMenu, getEnabledButtons]);\n\n const value = useMemo<MenuBarContextProps>(\n () => ({\n activeMenuId,\n disabled,\n openMenuId: openMenuIdState,\n orientation,\n closeMenu,\n focusFirstMenu,\n focusLastMenu,\n moveFocus,\n notifyMenuOpenChange,\n openMenu,\n registerButton,\n registerMenu,\n setActiveMenuId,\n }),\n [\n activeMenuId,\n closeMenu,\n disabled,\n focusFirstMenu,\n focusLastMenu,\n moveFocus,\n notifyMenuOpenChange,\n openMenu,\n openMenuIdState,\n orientation,\n registerButton,\n registerMenu,\n ]\n );\n\n return (\n <MenuBarProvider value={value}>\n <Comp\n ref={forwardedRef}\n as={innerAs}\n role=\"menubar\"\n aria-orientation={orientation}\n data-menubar=\"\"\n data-orientation={orientation}\n data-disabled={disabled ? '' : undefined}\n data-has-submenu-open={openMenuIdState ? '' : undefined}\n {...otherProps}\n />\n </MenuBarProvider>\n );\n }\n);\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,29 @@
1
+ import type { MutableRefObject } from 'react';
2
+ import type { MenuTriggerEvent } from '../Menu/context';
3
+ export type MenuBarOrientation = 'horizontal' | 'vertical';
4
+ export interface MenuBarRegisteredMenu {
5
+ id: string;
6
+ openWithArrowKeyRef: MutableRefObject<string | null>;
7
+ onOpenChange: (e: MenuTriggerEvent, isOpen: boolean) => void;
8
+ }
9
+ export interface MenuBarContextProps {
10
+ activeMenuId: string | null;
11
+ disabled: boolean;
12
+ openMenuId: string | null;
13
+ orientation: MenuBarOrientation;
14
+ closeMenu: (id: string, e: MenuTriggerEvent) => void;
15
+ focusFirstMenu: () => void;
16
+ focusLastMenu: () => void;
17
+ moveFocus: (id: string, delta: 1 | -1, e: MenuTriggerEvent, options?: {
18
+ open?: boolean;
19
+ focusKey?: 'ArrowUp' | 'ArrowDown' | null;
20
+ }) => void;
21
+ notifyMenuOpenChange: (id: string, isOpen: boolean) => void;
22
+ openMenu: (id: string, e: MenuTriggerEvent, focusKey?: 'ArrowUp' | 'ArrowDown' | null) => void;
23
+ registerButton: (id: string, element: HTMLElement | null, disabled: boolean) => void;
24
+ registerMenu: (menu: MenuBarRegisteredMenu) => () => void;
25
+ setActiveMenuId: (id: string | null) => void;
26
+ }
27
+ export declare const MenuBarProvider: import("react").Provider<MenuBarContextProps | null>;
28
+ export declare const useOptionalMenuBarContext: () => MenuBarContextProps | null;
29
+ //# sourceMappingURL=context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/MenuBar/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9D;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACrD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,CACT,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,EACb,CAAC,EAAE,gBAAgB,EACnB,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,IAAI,CAAA;KAAE,KACpE,IAAI,CAAC;IACV,oBAAoB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,QAAQ,EAAE,CACR,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,gBAAgB,EACnB,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,IAAI,KACtC,IAAI,CAAC;IACV,cAAc,EAAE,CACd,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,QAAQ,EAAE,OAAO,KACd,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,MAAM,IAAI,CAAC;IAC1D,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9C;AAID,eAAO,MAAkB,eAAe,sDAAmB,CAAC;AAC5D,eAAO,MAAM,yBAAyB,kCAAmC,CAAC"}
@@ -0,0 +1,7 @@
1
+ import { createContext, useContext } from 'react';
2
+ const menuBarContext = /*#__PURE__*/createContext(null);
3
+ export const {
4
+ Provider: MenuBarProvider
5
+ } = menuBarContext;
6
+ export const useOptionalMenuBarContext = () => useContext(menuBarContext);
7
+ //# sourceMappingURL=context.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.js","names":["createContext","useContext","menuBarContext","Provider","MenuBarProvider","useOptionalMenuBarContext"],"sources":["../../../src/MenuBar/context.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { createContext, useContext } from 'react';\n\nimport type { MenuTriggerEvent } from '../Menu/context';\n\nexport type MenuBarOrientation = 'horizontal' | 'vertical';\n\nexport interface MenuBarRegisteredMenu {\n id: string;\n openWithArrowKeyRef: MutableRefObject<string | null>;\n onOpenChange: (e: MenuTriggerEvent, isOpen: boolean) => void;\n}\n\nexport interface MenuBarContextProps {\n activeMenuId: string | null;\n disabled: boolean;\n openMenuId: string | null;\n orientation: MenuBarOrientation;\n closeMenu: (id: string, e: MenuTriggerEvent) => void;\n focusFirstMenu: () => void;\n focusLastMenu: () => void;\n moveFocus: (\n id: string,\n delta: 1 | -1,\n e: MenuTriggerEvent,\n options?: { open?: boolean; focusKey?: 'ArrowUp' | 'ArrowDown' | null }\n ) => void;\n notifyMenuOpenChange: (id: string, isOpen: boolean) => void;\n openMenu: (\n id: string,\n e: MenuTriggerEvent,\n focusKey?: 'ArrowUp' | 'ArrowDown' | null\n ) => void;\n registerButton: (\n id: string,\n element: HTMLElement | null,\n disabled: boolean\n ) => void;\n registerMenu: (menu: MenuBarRegisteredMenu) => () => void;\n setActiveMenuId: (id: string | null) => void;\n}\n\nconst menuBarContext = createContext<MenuBarContextProps | null>(null);\n\nexport const { Provider: MenuBarProvider } = menuBarContext;\nexport const useOptionalMenuBarContext = () => useContext(menuBarContext);\n"],"mappings":"AACA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAyCjD,MAAMC,cAAc,gBAAGF,aAAa,CAA6B,IAAI,CAAC;AAEtE,OAAO,MAAM;EAAEG,QAAQ,EAAEC;AAAgB,CAAC,GAAGF,cAAc;AAC3D,OAAO,MAAMG,yBAAyB,GAAGA,CAAA,KAAMJ,UAAU,CAACC,cAAc,CAAC","ignoreList":[]}
@@ -0,0 +1,2 @@
1
+ export * from './MenuBar';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MenuBar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from './MenuBar';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/MenuBar/index.ts"],"sourcesContent":["export * from './MenuBar';\n"],"mappings":"AAAA,cAAc,WAAW","ignoreList":[]}
@@ -2,6 +2,7 @@ import type { ReactElement, ReactNode, KeyboardEvent } from 'react';
2
2
  import type * as Polymorphic from '../utils/polymorphic';
3
3
  type SliderOrientation = 'horizontal' | 'vertical';
4
4
  type SliderHandleAlignment = 'center' | 'contain';
5
+ export declare const useSliderContext: (childName: string) => ISliderContext;
5
6
  /**
6
7
  * Slider
7
8
  *
@@ -26,6 +27,10 @@ interface SliderProps {
26
27
  * @see Docs https://reach.tech/slider#slider-defaultvalue
27
28
  */
28
29
  defaultValue?: number;
30
+ /**
31
+ * Sets the value that the filled range starts from. Defaults to `min`.
32
+ */
33
+ fillOffset?: number;
29
34
  /**
30
35
  * @see Docs https://reach.tech/slider#slider-disabled
31
36
  */
@@ -36,6 +41,11 @@ interface SliderProps {
36
41
  * @see Docs https://reach.tech/slider#slider-value
37
42
  */
38
43
  value?: number;
44
+ /**
45
+ * When set, double clicking or double tapping the slider handle will reset
46
+ * the value.
47
+ */
48
+ resetValue?: number;
39
49
  /**
40
50
  * A function used to set a human-readable name for the slider.
41
51
  *
@@ -182,15 +192,51 @@ interface SliderMarkerProps {
182
192
  */
183
193
  value: number;
184
194
  }
185
- type SomePointerEvent = TouchEvent | MouseEvent;
195
+ type TrackRef = React.RefObject<HTMLDivElement | null>;
196
+ type HandleRef = React.RefObject<HTMLDivElement | null>;
197
+ type SomePointerEvent = TouchEvent | MouseEvent | PointerEvent;
198
+ interface ISliderContext {
199
+ ariaLabel: string | undefined;
200
+ ariaLabelledBy: string | undefined;
201
+ ariaValueText: string | undefined;
202
+ handleDimensions: {
203
+ width: number;
204
+ height: number;
205
+ };
206
+ handlePosition: string;
207
+ handleRef: HandleRef;
208
+ hasFocus: boolean;
209
+ fillDirection: 'left' | 'none' | 'right';
210
+ fillEndPercent: number;
211
+ fillStartPercent: number;
212
+ onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
213
+ handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
214
+ resetValue: number | undefined;
215
+ setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;
216
+ sliderId: string | undefined;
217
+ sliderMax: number;
218
+ sliderMin: number;
219
+ value: number;
220
+ disabled: boolean;
221
+ isVertical: boolean;
222
+ orientation: SliderOrientation;
223
+ trackPercent: number;
224
+ trackRef: TrackRef;
225
+ rangeStyle: React.CSSProperties;
226
+ updateValue: (e: SomePointerEvent | KeyboardEvent, newValue: any) => void;
227
+ }
186
228
  type SliderChildrenRender = (props: {
187
229
  ariaValueText?: string | undefined;
188
230
  hasFocus?: boolean;
189
231
  id?: string | undefined;
190
232
  sliderId?: string | undefined;
233
+ fillEndPercent?: number;
234
+ fillOffsetPercent?: number;
235
+ fillStartPercent?: number;
191
236
  max?: number;
192
237
  min?: number;
193
238
  value?: number;
239
+ valuePercent?: number;
194
240
  }) => ReactElement;
195
241
  export default Slider;
196
242
  export type { SliderHandleProps, SliderInputProps, SliderMarkerProps, SliderProps, SliderRangeProps, SliderTrackProps, SliderHandleAlignment, SliderOrientation, };
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/Slider/Slider.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/Slider/Slider.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,KAAK,WAAW,MAAM,sBAAsB,CAAC;AAWzD,KAAK,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AACnD,KAAK,qBAAqB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAIlD,eAAO,MAAM,gBAAgB,uCAAgB,CAAC;AAI9C;;;;GAIG;AACH,QAAA,MAAM,MAAM,EAaN,WAAW,CAAC,mBAAmB,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;AAE1D;;GAEG;AACH,UAAU,WAAW;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACrC;;;;;OAKG;IACH,gBAAgB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACzC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,QAAQ,CAAC,CACP,CAAC,EAAE,gBAAgB,GAAG,aAAa,EACnC,QAAQ,EAAE,MAAM,EAChB,KAAK,CAAC,EAAE;QACN,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,GACA,IAAI,CAAC;IAGR,WAAW,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACtC,WAAW,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACtC,SAAS,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACpC,aAAa,CAAC,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAC1C,WAAW,CAAC,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACxC,UAAU,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACrC,WAAW,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACtC,YAAY,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IAEvC;;;;OAIG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAID;;;;;;;;GAQG;AACH,QAAA,MAAM,WAAW,EA8bX,WAAW,CAAC,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC;AAE/D;;GAEG;AACH,KAAK,gBAAgB,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG;IACtD;;;;;;;OAOG;IACH,QAAQ,EAAE,SAAS,GAAG,oBAAoB,CAAC;CAC5C,CAAC;AA+BF,QAAA,MAAM,WAAW,EAA4B,WAAW,CAAC,aAAa,CACpE,KAAK,EACL,gBAAgB,CACjB,CAAC;AAEF;;GAEG;AACH,UAAU,gBAAgB;IACxB;;;;;;OAMG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAiCD,QAAA,MAAM,WAAW,EAA4B,WAAW,CAAC,aAAa,CACpE,KAAK,EACL,gBAAgB,CACjB,CAAC;AAEF;;;;;GAKG;AAEH,UAAU,gBAAgB;CAAG;AAmL7B,QAAA,MAAM,YAAY,EAA6B,WAAW,CAAC,aAAa,CACtE,KAAK,EACL,iBAAiB,CAClB,CAAC;AAEF;;;;GAIG;AAEH,UAAU,iBAAiB;CAAG;AAuE9B,QAAA,MAAM,YAAY,EAA6B,WAAW,CAAC,aAAa,CACtE,KAAK,EACL,iBAAiB,CAClB,CAAC;AAEF;;GAEG;AACH,UAAU,iBAAiB;IACzB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAwID,KAAK,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AACvD,KAAK,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AAIxD,KAAK,gBAAgB,GAAG,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC;AAE/D,UAAU,cAAc;IACtB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,gBAAgB,EAAE;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjE,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACpE,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,iBAAiB,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,WAAW,EAAE,CAAC,CAAC,EAAE,gBAAgB,GAAG,aAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3E;AAED,KAAK,oBAAoB,GAAG,CAAC,KAAK,EAAE;IAClC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,KAAK,YAAY,CAAC;AAKnB,eAAe,MAAM,CAAC;AACtB,YAAY,EACV,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,GAClB,CAAC;AACF,OAAO,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,WAAW,GACZ,CAAC"}
@@ -33,7 +33,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
33
33
  const noop = () => {
34
34
  /* noop */
35
35
  };
36
- const [SliderProvider, useSliderContext] = createContext('Slider');
36
+ const _sliderCtx = createContext('Slider');
37
+ const SliderProvider = _sliderCtx[0];
38
+ export const useSliderContext = _sliderCtx[1];
37
39
 
38
40
  ////////////////////////////////////////////////////////////////////////////////
39
41
 
@@ -81,6 +83,8 @@ const SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwarde
81
83
  innerAs,
82
84
  defaultValue,
83
85
  disabled = false,
86
+ fillOffset,
87
+ resetValue,
84
88
  value: controlledValue,
85
89
  getAriaLabel,
86
90
  getAriaValueText,
@@ -120,6 +124,11 @@ const SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwarde
120
124
  const [_value, onChange] = useControlledState(controlledValue, onChangeProp, defaultValue || min, setValue => (e, v) => setValue(v));
121
125
  const value = clamp(_value, min, max);
122
126
  const trackPercent = valueToPercent(value, min, max);
127
+ const hasFillOffset = fillOffset !== undefined;
128
+ const fillOffsetPercent = valueToPercent(fillOffset ?? min, min, max);
129
+ const fillStartPercent = Math.min(trackPercent, fillOffsetPercent);
130
+ const fillEndPercent = Math.max(trackPercent, fillOffsetPercent);
131
+ const fillDirection = !hasFillOffset || trackPercent === fillOffsetPercent ? 'none' : trackPercent > fillOffsetPercent ? 'right' : 'left';
123
132
  const isVertical = orientation === 'vertical';
124
133
  const handleSize = isVertical ? handleDimensions.height : handleDimensions.width;
125
134
 
@@ -185,7 +194,8 @@ const SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwarde
185
194
  });
186
195
  const ariaValueText = getAriaValueText ? getAriaValueText(value) : ariaValueTextProp;
187
196
  const rangeStyle = {
188
- [isVertical ? 'height' : 'width']: `${trackPercent}%`
197
+ [isVertical ? 'bottom' : 'left']: `${fillStartPercent}%`,
198
+ [isVertical ? 'height' : 'width']: `${fillEndPercent - fillStartPercent}%`
189
199
  };
190
200
 
191
201
  // Slide events!
@@ -357,8 +367,12 @@ const SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwarde
357
367
  handlePosition: handlePosition,
358
368
  handleRef: handleRef,
359
369
  hasFocus: hasFocus,
370
+ fillDirection: fillDirection,
371
+ fillEndPercent: fillEndPercent,
372
+ fillStartPercent: fillStartPercent,
360
373
  onKeyDown: onKeyDown,
361
374
  setHasFocus: setHasFocus,
375
+ resetValue: resetValue === undefined ? undefined : clamp(resetValue, min, max),
362
376
  sliderId: id,
363
377
  sliderMax: max,
364
378
  sliderMin: min,
@@ -385,7 +399,11 @@ const SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwarde
385
399
  max,
386
400
  min,
387
401
  value,
388
- ariaValueText
402
+ ariaValueText,
403
+ fillEndPercent,
404
+ fillOffsetPercent,
405
+ fillStartPercent,
406
+ valuePercent: trackPercent
389
407
  }) : children, name &&
390
408
  /*#__PURE__*/
391
409
  // If the slider is used in a form we'll need an input field to
@@ -468,6 +486,7 @@ const SliderRangeImpl = /*#__PURE__*/forwardRef(function SliderRange(_ref4, forw
468
486
  } = _ref4;
469
487
  const {
470
488
  disabled,
489
+ fillDirection,
471
490
  orientation,
472
491
  rangeStyle
473
492
  } = useSliderContext('SliderRange');
@@ -484,6 +503,7 @@ const SliderRangeImpl = /*#__PURE__*/forwardRef(function SliderRange(_ref4, forw
484
503
  ...props,
485
504
  "data-reach-slider-range": "",
486
505
  "data-disabled": disabled ? '' : undefined,
506
+ "data-fill-direction": fillDirection,
487
507
  "data-orientation": orientation
488
508
  });
489
509
  });
@@ -527,11 +547,69 @@ const SliderHandleImpl = /*#__PURE__*/forwardRef(function SliderHandle(_ref5, fo
527
547
  isVertical,
528
548
  handleKeyDown,
529
549
  orientation,
550
+ resetValue,
530
551
  setHasFocus,
531
552
  sliderMin,
532
553
  sliderMax,
554
+ updateValue,
533
555
  value
534
556
  } = useSliderContext('SliderHandle');
557
+ const lastTouchEndRef = useRef(null);
558
+ const resetHandleValue = useStableLayoutCallback(event => {
559
+ if (!disabled && resetValue !== undefined) {
560
+ updateValue(event, resetValue);
561
+ }
562
+ });
563
+ const handleResetTouchEnd = useStableLayoutCallback(event => {
564
+ if (disabled || resetValue === undefined) {
565
+ return;
566
+ }
567
+ const touch = event.changedTouches[0];
568
+ if (!touch) {
569
+ return;
570
+ }
571
+ const now = event.timeStamp;
572
+ const lastTouchEnd = lastTouchEndRef.current;
573
+ if (lastTouchEnd && now - lastTouchEnd.time <= 300 && Math.abs(touch.clientX - lastTouchEnd.x) <= 20 && Math.abs(touch.clientY - lastTouchEnd.y) <= 20) {
574
+ event.stopPropagation();
575
+ event.stopImmediatePropagation();
576
+ lastTouchEndRef.current = null;
577
+ updateValue(event, resetValue);
578
+ event.preventDefault();
579
+ return;
580
+ }
581
+ lastTouchEndRef.current = {
582
+ time: now,
583
+ x: touch.clientX,
584
+ y: touch.clientY
585
+ };
586
+ });
587
+ useEffect(() => {
588
+ const handle = handleRef.current;
589
+ if (!handle) {
590
+ return noop;
591
+ }
592
+ const mouseDownListener = event => {
593
+ if (event.detail < 2) {
594
+ return;
595
+ }
596
+ event.stopPropagation();
597
+ event.stopImmediatePropagation();
598
+ resetHandleValue(event);
599
+ event.preventDefault();
600
+ };
601
+ const doubleClickListener = event => {
602
+ resetHandleValue(event);
603
+ };
604
+ handle.addEventListener('mousedown', mouseDownListener);
605
+ handle.addEventListener('dblclick', doubleClickListener);
606
+ handle.addEventListener('touchend', handleResetTouchEnd);
607
+ return () => {
608
+ handle.removeEventListener('mousedown', mouseDownListener);
609
+ handle.removeEventListener('dblclick', doubleClickListener);
610
+ handle.removeEventListener('touchend', handleResetTouchEnd);
611
+ };
612
+ }, [handleRef, handleResetTouchEnd, resetHandleValue]);
535
613
  return /*#__PURE__*/_jsx(Comp
536
614
  // @ts-ignore
537
615
  , {
@@ -632,10 +710,14 @@ const SliderMarkerImpl = /*#__PURE__*/forwardRef(function SliderMarker(_ref6, fo
632
710
  orientation,
633
711
  sliderMin,
634
712
  sliderMax,
635
- value: sliderValue
713
+ value: sliderValue,
714
+ fillEndPercent,
715
+ fillStartPercent
636
716
  } = useSliderContext('SliderMarker');
637
717
  const inRange = value >= sliderMin && value <= sliderMax;
638
718
  const absoluteStartPosition = `${valueToPercent(value, sliderMin, sliderMax)}%`;
719
+ const markerPercent = valueToPercent(value, sliderMin, sliderMax);
720
+ const fillState = markerPercent >= fillStartPercent && markerPercent <= fillEndPercent ? 'in-range' : 'out-of-range';
639
721
  const state = value < sliderValue ? 'under-value' : value === sliderValue ? 'at-value' : 'over-value';
640
722
  return inRange ? /*#__PURE__*/_jsx(Comp, {
641
723
  ref: forwardedRef
@@ -654,6 +736,7 @@ const SliderMarkerImpl = /*#__PURE__*/forwardRef(function SliderMarker(_ref6, fo
654
736
  ...props,
655
737
  "data-reach-slider-marker": "",
656
738
  "data-disabled": disabled ? '' : undefined,
739
+ "data-fill-state": fillState,
657
740
  "data-orientation": orientation,
658
741
  "data-state": state,
659
742
  "data-value": value,
@@ -778,7 +861,10 @@ function useDimensions(ref) {
778
861
  };
779
862
  }
780
863
  function valueToPercent(value, min, max) {
781
- return (value - min) * 100 / (max - min);
864
+ if (max === min) {
865
+ return 0;
866
+ }
867
+ return Math.min(100, Math.max(0, (value - min) * 100 / (max - min)));
782
868
  }
783
869
 
784
870
  ////////////////////////////////////////////////////////////////////////////////