@avenue-ticketing/ui 0.10.0 → 0.12.0-beta.1

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 (225) hide show
  1. package/README.md +47 -0
  2. package/dist/badge-types-B67wcd4m.d.ts +22 -0
  3. package/dist/react/app-store-buttons-outline.d.ts +17 -0
  4. package/dist/react/app-store-buttons-outline.js +582 -0
  5. package/dist/react/app-store-buttons-outline.js.map +1 -0
  6. package/dist/react/app-store-buttons.d.ts +20 -0
  7. package/dist/react/app-store-buttons.js +817 -0
  8. package/dist/react/app-store-buttons.js.map +1 -0
  9. package/dist/react/avatar-label-group.d.ts +14 -0
  10. package/dist/react/avatar-label-group.js +183 -0
  11. package/dist/react/avatar-label-group.js.map +1 -0
  12. package/dist/react/avatar-profile-photo.d.ts +9 -0
  13. package/dist/react/avatar-profile-photo.js +202 -0
  14. package/dist/react/avatar-profile-photo.js.map +1 -0
  15. package/dist/react/avatar.d.ts +66 -40
  16. package/dist/react/avatar.js +159 -149
  17. package/dist/react/avatar.js.map +1 -1
  18. package/dist/react/badge-groups.d.ts +25 -0
  19. package/dist/react/badge-groups.js +162 -0
  20. package/dist/react/badge-groups.js.map +1 -0
  21. package/dist/react/badge.d.ts +123 -59
  22. package/dist/react/badge.js +314 -86
  23. package/dist/react/badge.js.map +1 -1
  24. package/dist/react/button-group.d.ts +43 -0
  25. package/dist/react/button-group.js +108 -0
  26. package/dist/react/button-group.js.map +1 -0
  27. package/dist/react/button-utility.d.ts +47 -0
  28. package/dist/react/button-utility.js +158 -0
  29. package/dist/react/button-utility.js.map +1 -0
  30. package/dist/react/button.d.ts +112 -37
  31. package/dist/react/button.js +270 -55
  32. package/dist/react/button.js.map +1 -1
  33. package/dist/react/checkbox.d.ts +25 -8
  34. package/dist/react/checkbox.js +112 -110
  35. package/dist/react/checkbox.js.map +1 -1
  36. package/dist/react/close-button.d.ts +25 -0
  37. package/dist/react/close-button.js +54 -0
  38. package/dist/react/close-button.js.map +1 -0
  39. package/dist/react/combobox.d.ts +17 -0
  40. package/dist/react/combobox.js +322 -0
  41. package/dist/react/combobox.js.map +1 -0
  42. package/dist/react/dialog.d.ts +15 -15
  43. package/dist/react/dialog.js +43 -108
  44. package/dist/react/dialog.js.map +1 -1
  45. package/dist/react/dropdown-account-breadcrumb.d.ts +5 -0
  46. package/dist/react/dropdown-account-breadcrumb.js +319 -0
  47. package/dist/react/dropdown-account-breadcrumb.js.map +1 -0
  48. package/dist/react/dropdown-account-button.d.ts +5 -0
  49. package/dist/react/dropdown-account-button.js +773 -0
  50. package/dist/react/dropdown-account-button.js.map +1 -0
  51. package/dist/react/dropdown-account-card-md.d.ts +5 -0
  52. package/dist/react/dropdown-account-card-md.js +549 -0
  53. package/dist/react/dropdown-account-card-md.js.map +1 -0
  54. package/dist/react/dropdown-account-card-sm.d.ts +5 -0
  55. package/dist/react/dropdown-account-card-sm.js +527 -0
  56. package/dist/react/dropdown-account-card-sm.js.map +1 -0
  57. package/dist/react/dropdown-account-card-xs.d.ts +5 -0
  58. package/dist/react/dropdown-account-card-xs.js +507 -0
  59. package/dist/react/dropdown-account-card-xs.js.map +1 -0
  60. package/dist/react/dropdown-avatar.d.ts +5 -0
  61. package/dist/react/dropdown-avatar.js +790 -0
  62. package/dist/react/dropdown-avatar.js.map +1 -0
  63. package/dist/react/dropdown-button-advanced.d.ts +5 -0
  64. package/dist/react/dropdown-button-advanced.js +799 -0
  65. package/dist/react/dropdown-button-advanced.js.map +1 -0
  66. package/dist/react/dropdown-button-link.d.ts +5 -0
  67. package/dist/react/dropdown-button-link.js +501 -0
  68. package/dist/react/dropdown-button-link.js.map +1 -0
  69. package/dist/react/dropdown-button-simple.d.ts +5 -0
  70. package/dist/react/dropdown-button-simple.js +754 -0
  71. package/dist/react/dropdown-button-simple.js.map +1 -0
  72. package/dist/react/dropdown-icon-advanced.d.ts +5 -0
  73. package/dist/react/dropdown-icon-advanced.js +543 -0
  74. package/dist/react/dropdown-icon-advanced.js.map +1 -0
  75. package/dist/react/dropdown-icon-simple.d.ts +5 -0
  76. package/dist/react/dropdown-icon-simple.js +505 -0
  77. package/dist/react/dropdown-icon-simple.js.map +1 -0
  78. package/dist/react/dropdown-integration.d.ts +5 -0
  79. package/dist/react/dropdown-integration.js +1325 -0
  80. package/dist/react/dropdown-integration.js.map +1 -0
  81. package/dist/react/dropdown-search-advanced.d.ts +5 -0
  82. package/dist/react/dropdown-search-advanced.js +998 -0
  83. package/dist/react/dropdown-search-advanced.js.map +1 -0
  84. package/dist/react/dropdown-search-simple.d.ts +5 -0
  85. package/dist/react/dropdown-search-simple.js +960 -0
  86. package/dist/react/dropdown-search-simple.js.map +1 -0
  87. package/dist/react/dropdown.d.ts +32 -133
  88. package/dist/react/dropdown.js +404 -1351
  89. package/dist/react/dropdown.js.map +1 -1
  90. package/dist/react/file-upload-trigger.d.ts +34 -0
  91. package/dist/react/file-upload-trigger.js +39 -0
  92. package/dist/react/file-upload-trigger.js.map +1 -0
  93. package/dist/react/form.d.ts +10 -0
  94. package/dist/react/form.js +11 -0
  95. package/dist/react/form.js.map +1 -0
  96. package/dist/react/hint-text.d.ts +17 -0
  97. package/dist/react/hint-text.js +36 -0
  98. package/dist/react/hint-text.js.map +1 -0
  99. package/dist/react/hook-form.d.ts +35 -0
  100. package/dist/react/hook-form.js +50 -0
  101. package/dist/react/hook-form.js.map +1 -0
  102. package/dist/react/input-date.d.ts +43 -0
  103. package/dist/react/input-date.js +306 -0
  104. package/dist/react/input-date.js.map +1 -0
  105. package/dist/react/input-file.d.ts +45 -0
  106. package/dist/react/input-file.js +748 -0
  107. package/dist/react/input-file.js.map +1 -0
  108. package/dist/react/input-group.d.ts +37 -0
  109. package/dist/react/input-group.js +251 -0
  110. package/dist/react/input-group.js.map +1 -0
  111. package/dist/react/input-number.d.ts +32 -0
  112. package/dist/react/input-number.js +553 -0
  113. package/dist/react/input-number.js.map +1 -0
  114. package/dist/react/input-payment.d.ts +16 -0
  115. package/dist/react/input-payment.js +593 -0
  116. package/dist/react/input-payment.js.map +1 -0
  117. package/dist/react/input-tags-outer.d.ts +53 -0
  118. package/dist/react/input-tags-outer.js +607 -0
  119. package/dist/react/input-tags-outer.js.map +1 -0
  120. package/dist/react/input-tags.d.ts +53 -0
  121. package/dist/react/input-tags.js +565 -0
  122. package/dist/react/input-tags.js.map +1 -0
  123. package/dist/react/input.d.ts +71 -22
  124. package/dist/react/input.js +332 -45
  125. package/dist/react/input.js.map +1 -1
  126. package/dist/react/label.d.ts +18 -0
  127. package/dist/react/label.js +112 -0
  128. package/dist/react/label.js.map +1 -0
  129. package/dist/react/multi-select.d.ts +89 -0
  130. package/dist/react/multi-select.js +1036 -0
  131. package/dist/react/multi-select.js.map +1 -0
  132. package/dist/react/pin-input.d.ts +59 -0
  133. package/dist/react/pin-input.js +229 -0
  134. package/dist/react/pin-input.js.map +1 -0
  135. package/dist/react/popover.d.ts +7 -73
  136. package/dist/react/popover.js +23 -569
  137. package/dist/react/popover.js.map +1 -1
  138. package/dist/react/progress-circle.d.ts +9 -0
  139. package/dist/react/progress-circle.js +36 -0
  140. package/dist/react/progress-circle.js.map +1 -0
  141. package/dist/react/progress-circles.d.ts +14 -0
  142. package/dist/react/progress-circles.js +160 -0
  143. package/dist/react/progress-circles.js.map +1 -0
  144. package/dist/react/progress-indicators.d.ts +52 -0
  145. package/dist/react/progress-indicators.js +78 -0
  146. package/dist/react/progress-indicators.js.map +1 -0
  147. package/dist/react/radio-buttons.d.ts +35 -0
  148. package/dist/react/radio-buttons.js +116 -0
  149. package/dist/react/radio-buttons.js.map +1 -0
  150. package/dist/react/scroll-header.d.ts +6 -0
  151. package/dist/react/scroll-header.js +42 -61
  152. package/dist/react/scroll-header.js.map +1 -1
  153. package/dist/react/scroll-wheel.d.ts +4 -5
  154. package/dist/react/scroll-wheel.js +19 -15
  155. package/dist/react/scroll-wheel.js.map +1 -1
  156. package/dist/react/select-item.d.ts +13 -0
  157. package/dist/react/select-item.js +336 -0
  158. package/dist/react/select-item.js.map +1 -0
  159. package/dist/react/select-native.d.ts +17 -0
  160. package/dist/react/select-native.js +203 -0
  161. package/dist/react/select-native.js.map +1 -0
  162. package/dist/react/select.d.ts +18 -61
  163. package/dist/react/select.js +625 -923
  164. package/dist/react/select.js.map +1 -1
  165. package/dist/react/sheet.d.ts +19 -19
  166. package/dist/react/sheet.js +97 -219
  167. package/dist/react/sheet.js.map +1 -1
  168. package/dist/react/slider.d.ts +15 -0
  169. package/dist/react/slider.js +66 -0
  170. package/dist/react/slider.js.map +1 -0
  171. package/dist/react/social-button.d.ts +55 -0
  172. package/dist/react/social-button.js +263 -0
  173. package/dist/react/social-button.js.map +1 -0
  174. package/dist/react/social-logos.d.ts +20 -0
  175. package/dist/react/social-logos.js +131 -0
  176. package/dist/react/social-logos.js.map +1 -0
  177. package/dist/react/switch.d.ts +21 -36
  178. package/dist/react/switch.js +121 -109
  179. package/dist/react/switch.js.map +1 -1
  180. package/dist/react/tag-select.d.ts +44 -0
  181. package/dist/react/tag-select.js +1062 -0
  182. package/dist/react/tag-select.js.map +1 -0
  183. package/dist/react/tags.d.ts +30 -0
  184. package/dist/react/tags.js +228 -0
  185. package/dist/react/tags.js.map +1 -0
  186. package/dist/react/textarea.d.ts +40 -4
  187. package/dist/react/textarea.js +193 -27
  188. package/dist/react/textarea.js.map +1 -1
  189. package/dist/react/tooltip.d.ts +30 -43
  190. package/dist/react/tooltip.js +65 -521
  191. package/dist/react/tooltip.js.map +1 -1
  192. package/dist/select-shared-B3Y5SMXU.d.ts +62 -0
  193. package/package.json +28 -21
  194. package/source.css +2 -12
  195. package/theme.css +883 -79
  196. package/dist/react/calendar.d.ts +0 -13
  197. package/dist/react/calendar.js +0 -4639
  198. package/dist/react/calendar.js.map +0 -1
  199. package/dist/react/card.d.ts +0 -11
  200. package/dist/react/card.js +0 -113
  201. package/dist/react/card.js.map +0 -1
  202. package/dist/react/datetime-picker.d.ts +0 -21
  203. package/dist/react/datetime-picker.js +0 -6142
  204. package/dist/react/datetime-picker.js.map +0 -1
  205. package/dist/react/pagination.d.ts +0 -28
  206. package/dist/react/pagination.js +0 -262
  207. package/dist/react/pagination.js.map +0 -1
  208. package/dist/react/table-pagination.d.ts +0 -15
  209. package/dist/react/table-pagination.js +0 -1247
  210. package/dist/react/table-pagination.js.map +0 -1
  211. package/dist/react/table-view/column-menu.d.ts +0 -15
  212. package/dist/react/table-view/column-menu.js +0 -1049
  213. package/dist/react/table-view/column-menu.js.map +0 -1
  214. package/dist/react/table-view/index.d.ts +0 -70
  215. package/dist/react/table-view/index.js +0 -2284
  216. package/dist/react/table-view/index.js.map +0 -1
  217. package/dist/react/table.d.ts +0 -86
  218. package/dist/react/table.js +0 -414
  219. package/dist/react/table.js.map +0 -1
  220. package/dist/react/tabs.d.ts +0 -34
  221. package/dist/react/tabs.js +0 -423
  222. package/dist/react/tabs.js.map +0 -1
  223. package/dist/react/time-picker.d.ts +0 -22
  224. package/dist/react/time-picker.js +0 -856
  225. package/dist/react/time-picker.js.map +0 -1
@@ -1,1049 +0,0 @@
1
- import { X, MoreVertical, ArrowLeft, ArrowRight, ChevronUp, ChevronDown, Pin, PinOff, EyeOff } from 'lucide-react';
2
- import * as React2 from 'react';
3
- import React2__default, { useCallback, forwardRef, useState, useImperativeHandle, memo, useRef, useMemo, useEffect, useLayoutEffect } from 'react';
4
- import { clsx } from 'clsx';
5
- import { twMerge } from 'tailwind-merge';
6
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
7
- import { createPortal } from 'react-dom';
8
-
9
- function cn(...inputs) {
10
- return twMerge(clsx(inputs));
11
- }
12
- var sizeClass = {
13
- xs: "h-8 min-h-8 gap-2 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3",
14
- default: "h-10 min-h-10 gap-2 px-5 text-sm has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4",
15
- lg: "h-11 min-h-11 gap-2 px-6 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5"
16
- };
17
- var iconOnlySizeClass = {
18
- xs: "size-8 min-h-8 min-w-8 gap-0 p-0 [&_svg:not([class*='size-'])]:size-3",
19
- default: "size-10 min-h-10 min-w-10 gap-0 p-0 [&_svg:not([class*='size-'])]:size-4",
20
- lg: "size-11 min-h-11 min-w-11 gap-0 p-0 [&_svg:not([class*='size-'])]:size-5"
21
- };
22
- var roundedClass = {
23
- full: "rounded-full",
24
- lg: "rounded-lg",
25
- md: "rounded-md"
26
- };
27
- var variantClass = {
28
- primary: "bg-primary text-background border border-transparent hover:bg-primary/90 active:bg-primary/85",
29
- secondary: "bg-background text-primary border border-primary/10 hover:bg-primary/5",
30
- destructive: "bg-background text-red-500 border border-red-500/25 hover:bg-red-500/5",
31
- success: "bg-background text-green-500 border border-green-500/25 hover:bg-green-500/5"
32
- };
33
- var Button = React2.forwardRef(
34
- ({
35
- className,
36
- type = "button",
37
- variant = "secondary",
38
- rounded: roundedProp,
39
- size = "default",
40
- iconOnly = false,
41
- disabled,
42
- ...props
43
- }, ref) => {
44
- const rounded = roundedProp ?? (iconOnly ? "md" : "full");
45
- return /* @__PURE__ */ jsx(
46
- "button",
47
- {
48
- type,
49
- disabled,
50
- "data-slot": "button",
51
- "data-icon-only": iconOnly ? "" : void 0,
52
- className: cn(
53
- "inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-none scale-100 transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] active:duration-100 active:ease-linear [&_svg]:pointer-events-none [&_svg]:shrink-0",
54
- "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
55
- "focus-visible:border-ring font-medium lg:tracking-wide focus-visible:ring-ring/50 focus-visible:ring-[3px]",
56
- iconOnly ? iconOnlySizeClass[size] : sizeClass[size],
57
- roundedClass[rounded],
58
- variantClass[variant],
59
- className
60
- ),
61
- ref,
62
- ...props
63
- }
64
- );
65
- }
66
- );
67
- Button.displayName = "Button";
68
-
69
- // src/lib/typeahead.ts
70
- var TYPEAHEAD_TIMEOUT_MS = 500;
71
- function createTypeaheadState() {
72
- return { search: "", timer: null };
73
- }
74
- function resetTypeahead(state) {
75
- state.search = "";
76
- if (state.timer) {
77
- clearTimeout(state.timer);
78
- state.timer = null;
79
- }
80
- }
81
- function getItemLabel(item) {
82
- const aria = item.getAttribute("aria-label")?.trim();
83
- if (aria) return aria;
84
- const marked = item.querySelector("[data-menu-label]");
85
- if (marked?.textContent) return marked.textContent.replace(/\s+/g, " ").trim();
86
- return (item.textContent ?? "").replace(/\s+/g, " ").trim();
87
- }
88
- function normalizeSearch(value) {
89
- return value.trim().toLocaleLowerCase();
90
- }
91
- function isTypeaheadTarget(target) {
92
- if (!(target instanceof HTMLElement)) return true;
93
- if (target.isContentEditable) return false;
94
- const tag = target.tagName;
95
- return tag !== "INPUT" && tag !== "TEXTAREA" && tag !== "SELECT";
96
- }
97
- function handleTypeaheadKeyDown(event, items, state, options) {
98
- if (options?.enabled === false || items.length === 0) return false;
99
- if (event.ctrlKey || event.metaKey || event.altKey) return false;
100
- if (event.key.length !== 1 || !isTypeaheadTarget(event.target)) return false;
101
- event.preventDefault();
102
- const timeoutMs = options?.timeoutMs ?? TYPEAHEAD_TIMEOUT_MS;
103
- const char = event.key;
104
- const prevSearch = state.search;
105
- const repeatSingleChar = prevSearch.length === 1 && prevSearch === char;
106
- if (repeatSingleChar) {
107
- state.search = prevSearch;
108
- } else {
109
- state.search = prevSearch + char;
110
- }
111
- if (state.timer) clearTimeout(state.timer);
112
- state.timer = setTimeout(() => {
113
- state.search = "";
114
- state.timer = null;
115
- }, timeoutMs);
116
- const labels = items.map((item) => normalizeSearch(getItemLabel(item)));
117
- let needle = normalizeSearch(state.search);
118
- let matches = items.map((item, index) => ({ item, index, label: labels[index] })).filter(({ label }) => label.startsWith(needle));
119
- if (matches.length === 0 && state.search.length > 1) {
120
- state.search = char;
121
- needle = normalizeSearch(char);
122
- matches = items.map((item, index) => ({ item, index, label: labels[index] })).filter(({ label }) => label.startsWith(needle));
123
- }
124
- if (matches.length === 0) return true;
125
- const focused = document.activeElement;
126
- const focusedIndex = focused ? items.indexOf(focused) : -1;
127
- if (repeatSingleChar && focusedIndex !== -1) {
128
- const currentMatch = matches.findIndex(
129
- ({ index }) => index === focusedIndex
130
- );
131
- if (currentMatch !== -1) {
132
- const next = matches[(currentMatch + 1) % matches.length];
133
- next?.item.focus();
134
- return true;
135
- }
136
- }
137
- if (focusedIndex !== -1) {
138
- const nextAfterFocus = matches.find(({ index }) => index > focusedIndex);
139
- if (nextAfterFocus) {
140
- nextAfterFocus.item.focus();
141
- return true;
142
- }
143
- }
144
- matches[0]?.item.focus();
145
- return true;
146
- }
147
- var DROPDOWN_PANEL_OPEN_EASING = "cubic-bezier(0,0.55,0.45,1)";
148
- var DROPDOWN_PANEL_CLOSE_EASING = "cubic-bezier(0.55,0,1,0.45)";
149
- var DROPDOWN_MENU_MIN_WIDTH_PX = 192;
150
- var DROPDOWN_FLIP_MIN_SPACE_PX = 100;
151
- var DROPDOWN_MOBILE_SHEET_MAX_PX = 1024;
152
- var DROPDOWN_MOBILE_SHEET_MOTION_MS = 175;
153
- var DROPDOWN_MOBILE_SHEET_ENTRY_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
154
- var DROPDOWN_MOBILE_SHEET_EXIT_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
155
- var DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX = 120;
156
- function resolveDropdownMobileSheet(mobileOptions) {
157
- return {
158
- sheet: mobileOptions?.sheet ?? true,
159
- title: mobileOptions?.title,
160
- sheetExtraClassName: mobileOptions?.className,
161
- contentClassName: mobileOptions?.contentClassName
162
- };
163
- }
164
- var DROPDOWN_SUB_CONTENT_ATTR = "data-dropdown-sub-content";
165
- var DROPDOWN_PANEL_SHADOW = "shadow-[0_12px_32px_-8px_rgba(0,0,0,0.18),0_2px_6px_-2px_rgba(0,0,0,0.06)] dark:shadow-[0_12px_32px_-8px_rgba(0,0,0,0.55),0_2px_6px_-2px_rgba(0,0,0,0.35)]";
166
- var DROPDOWN_PANEL_SCROLL = "[&_*]:[scrollbar-width:none] [&_*::-webkit-scrollbar]:hidden [&_*]:overscroll-contain";
167
- function preventMenuWheelChain(menu, e) {
168
- let el = e.target;
169
- while (el && menu.contains(el)) {
170
- const oy = getComputedStyle(el).overflowY;
171
- if ((oy === "auto" || oy === "scroll") && el.scrollHeight > el.clientHeight) {
172
- const atTop = el.scrollTop <= 0;
173
- const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight;
174
- if (e.deltaY < 0 && !atTop || e.deltaY > 0 && !atBottom) return;
175
- break;
176
- }
177
- el = el.parentElement;
178
- }
179
- e.preventDefault();
180
- }
181
- var DROPDOWN_SHEET_MENU_TEXT = "max-[1024px]:text-base";
182
- var DROPDOWN_SHEET_MENU_SHORTCUT = "max-[1024px]:text-sm";
183
- var DROPDOWN_CONTENT_ORIGIN = {
184
- bottom: "top center",
185
- top: "bottom center",
186
- left: "right center",
187
- right: "left center"
188
- };
189
- var DROPDOWN_CONTENT_HIDDEN = {
190
- bottom: "translateY(-4px) scale(0.97)",
191
- top: "translateY(4px) scale(0.97)",
192
- left: "translateX(4px) scale(0.97)",
193
- right: "translateX(-4px) scale(0.97)"
194
- };
195
- function computePos(trigger, menu, side, align, offset, pad) {
196
- const tr = trigger.getBoundingClientRect();
197
- const mr = menu.getBoundingClientRect();
198
- const contentHeight = menu.scrollHeight;
199
- const vw = window.innerWidth;
200
- const vh = window.innerHeight;
201
- const sx = window.scrollX;
202
- const sy = window.scrollY;
203
- let top = 0;
204
- let left = 0;
205
- let effectiveSide = side;
206
- let maxHeight;
207
- const placeVertical = (s, height) => {
208
- if (s === "bottom") top = tr.bottom + sy + offset;
209
- else top = tr.top + sy - height - offset;
210
- if (align === "start") left = tr.left + sx;
211
- else if (align === "end") left = tr.right + sx - mr.width;
212
- else left = tr.left + sx + tr.width / 2 - mr.width / 2;
213
- };
214
- const calc = (s, height = contentHeight) => {
215
- switch (s) {
216
- case "bottom":
217
- case "top":
218
- placeVertical(s, height);
219
- break;
220
- case "right":
221
- left = tr.right + sx + offset;
222
- if (align === "start") top = tr.top + sy;
223
- else if (align === "end") top = tr.bottom + sy - mr.height;
224
- else top = tr.top + sy + tr.height / 2 - mr.height / 2;
225
- break;
226
- case "left":
227
- left = tr.left + sx - mr.width - offset;
228
- if (align === "start") top = tr.top + sy;
229
- else if (align === "end") top = tr.bottom + sy - mr.height;
230
- else top = tr.top + sy + tr.height / 2 - mr.height / 2;
231
- break;
232
- }
233
- };
234
- calc(side);
235
- const spaceBelow = Math.max(0, vh - pad - tr.bottom - offset);
236
- const spaceAbove = Math.max(0, tr.top - offset - pad);
237
- if (side === "bottom" || side === "top") {
238
- const primarySpace = side === "bottom" ? spaceBelow : spaceAbove;
239
- const alternateSpace = side === "bottom" ? spaceAbove : spaceBelow;
240
- const alternateSide = side === "bottom" ? "top" : "bottom";
241
- if (contentHeight > primarySpace) {
242
- maxHeight = Math.min(contentHeight, primarySpace);
243
- calc(side, maxHeight);
244
- }
245
- if (contentHeight > primarySpace && primarySpace < DROPDOWN_FLIP_MIN_SPACE_PX && alternateSpace > primarySpace) {
246
- effectiveSide = alternateSide;
247
- maxHeight = Math.min(contentHeight, alternateSpace);
248
- calc(alternateSide, maxHeight);
249
- }
250
- } else if (side === "right" && left + mr.width > vw + sx - pad) {
251
- const fl = tr.left + sx - mr.width - offset;
252
- if (fl >= sx + pad) {
253
- effectiveSide = "left";
254
- left = fl;
255
- }
256
- } else if (side === "left" && left < sx + pad) {
257
- const fl = tr.right + sx + offset;
258
- if (fl + mr.width <= vw + sx - pad) {
259
- effectiveSide = "right";
260
- left = fl;
261
- }
262
- }
263
- return { top, left, side: effectiveSide, maxHeight };
264
- }
265
- function useIsMobile(breakpoint = 1025) {
266
- const [isMobile, setIsMobile] = useState(() => {
267
- if (typeof window === "undefined") return false;
268
- return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;
269
- });
270
- useEffect(() => {
271
- const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
272
- const handler = (e) => setIsMobile(e.matches);
273
- mq.addEventListener("change", handler);
274
- return () => mq.removeEventListener("change", handler);
275
- }, [breakpoint]);
276
- return isMobile;
277
- }
278
- var DropdownContext = React2__default.createContext(void 0);
279
- function useDropdown() {
280
- const ctx = React2__default.useContext(DropdownContext);
281
- if (!ctx)
282
- throw new Error("Dropdown components must be used within <Dropdown />");
283
- return ctx;
284
- }
285
- React2__default.createContext(void 0);
286
- var Dropdown = ({
287
- children,
288
- open: controlledOpen,
289
- onOpenChange
290
- }) => {
291
- const [internalOpen, setInternalOpen] = useState(false);
292
- const isControlled = controlledOpen !== void 0;
293
- const open = isControlled ? controlledOpen : internalOpen;
294
- const triggerRef = useRef(null);
295
- const [radioValues, setRadioValues] = useState({});
296
- const setOpen = useCallback(
297
- (v) => {
298
- if (!isControlled) setInternalOpen(v);
299
- onOpenChange?.(v);
300
- },
301
- [isControlled, onOpenChange]
302
- );
303
- const setRadioValue = useCallback((group, value) => {
304
- setRadioValues((prev) => ({ ...prev, [group]: value }));
305
- }, []);
306
- const ctx = useMemo(
307
- () => ({ open, setOpen, triggerRef, radioValues, setRadioValue }),
308
- [open, setOpen, radioValues, setRadioValue]
309
- );
310
- return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: ctx, children });
311
- };
312
- function mergeTriggerRef(triggerRef, node, childRef) {
313
- triggerRef.current = node;
314
- if (typeof childRef === "function") childRef(node);
315
- else if (childRef && typeof childRef === "object")
316
- childRef.current = node;
317
- }
318
- var DropdownTrigger = React2__default.forwardRef(
319
- ({
320
- children,
321
- asChild,
322
- className,
323
- onClick: onClickProp,
324
- disabled,
325
- ...buttonProps
326
- }, ref) => {
327
- const { open, setOpen, triggerRef } = useDropdown();
328
- const handleClick = useCallback(
329
- (e) => {
330
- onClickProp?.(e);
331
- e.stopPropagation();
332
- if (disabled) return;
333
- setOpen(!open);
334
- },
335
- [disabled, onClickProp, open, setOpen]
336
- );
337
- const setButtonRef = useCallback(
338
- (el) => {
339
- triggerRef.current = el;
340
- if (typeof ref === "function") ref(el);
341
- else if (ref) ref.current = el;
342
- },
343
- [ref, triggerRef]
344
- );
345
- if (asChild && React2__default.isValidElement(children)) {
346
- const child = children;
347
- return React2__default.cloneElement(child, {
348
- ref: (node) => {
349
- mergeTriggerRef(
350
- triggerRef,
351
- node,
352
- child.ref
353
- );
354
- },
355
- className: cn("group", child.props.className),
356
- onClick: (e) => {
357
- child.props.onClick?.(e);
358
- handleClick(e);
359
- },
360
- "aria-expanded": open,
361
- "aria-haspopup": "menu",
362
- "data-state": open ? "open" : "closed",
363
- ...disabled !== void 0 ? {
364
- disabled
365
- } : {}
366
- });
367
- }
368
- return /* @__PURE__ */ jsx(
369
- Button,
370
- {
371
- ref: setButtonRef,
372
- type: "button",
373
- ...buttonProps,
374
- disabled,
375
- className: cn("group", className),
376
- "aria-expanded": open,
377
- "aria-haspopup": "menu",
378
- "data-state": open ? "open" : "closed",
379
- onClick: handleClick,
380
- children
381
- }
382
- );
383
- }
384
- );
385
- DropdownTrigger.displayName = "DropdownTrigger";
386
- var DropdownMobileClose = React2__default.forwardRef(({ className, type = "button", ...props }, ref) => {
387
- return /* @__PURE__ */ jsxs(
388
- "button",
389
- {
390
- ref,
391
- type,
392
- className: cn(
393
- "z-100 flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full transition-all hover:bg-secondary-background active:scale-[0.96]",
394
- className
395
- ),
396
- ...props,
397
- children: [
398
- /* @__PURE__ */ jsx(X, { className: "size-5.5" }),
399
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
400
- ]
401
- }
402
- );
403
- });
404
- DropdownMobileClose.displayName = "DropdownMobileClose";
405
- function DropdownMobileBottomSheetPortal({
406
- open,
407
- isAnimating,
408
- slideEntrance,
409
- slideOffsetPx,
410
- sheetTitle,
411
- sheetExtraClassName,
412
- contentClassName,
413
- onRequestClose,
414
- menuRef,
415
- portalZClassName = "z-50",
416
- isSubPortal = false,
417
- children,
418
- className,
419
- style,
420
- ...panelProps
421
- }) {
422
- const sheetMotion = open ? DROPDOWN_MOBILE_SHEET_ENTRY_EASING : DROPDOWN_MOBILE_SHEET_EXIT_EASING;
423
- const sheetHiddenTransform = slideEntrance ? `translateY(${slideOffsetPx}px)` : "translateY(100%)";
424
- return createPortal(
425
- /* @__PURE__ */ jsxs(
426
- "div",
427
- {
428
- ...isSubPortal ? { [DROPDOWN_SUB_CONTENT_ATTR]: "" } : {},
429
- className: cn(
430
- "fixed inset-0 flex items-end justify-center p-0",
431
- portalZClassName
432
- ),
433
- children: [
434
- /* @__PURE__ */ jsx(
435
- "div",
436
- {
437
- className: cn(
438
- "fixed inset-0 bg-black/40 dark:bg-primary/4",
439
- isAnimating ? "opacity-100" : "opacity-0"
440
- ),
441
- style: {
442
- transitionProperty: "opacity",
443
- transitionDuration: `${DROPDOWN_MOBILE_SHEET_MOTION_MS}ms`,
444
- transitionTimingFunction: sheetMotion
445
- },
446
- onClick: onRequestClose
447
- }
448
- ),
449
- /* @__PURE__ */ jsxs(
450
- "div",
451
- {
452
- ...panelProps,
453
- ref: menuRef,
454
- className: cn(
455
- "bg-background border-primary/8 relative z-10 flex w-full max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))] flex-col overflow-hidden shadow-2xl outline-none",
456
- "rounded-t-2xl rounded-b-none border-x-0 border-b-0 border-t",
457
- DROPDOWN_PANEL_SCROLL,
458
- sheetExtraClassName,
459
- className
460
- ),
461
- style: {
462
- transform: isAnimating ? "translateY(0)" : sheetHiddenTransform,
463
- opacity: isAnimating ? 1 : 0,
464
- transitionProperty: "transform, opacity",
465
- transitionDuration: `${DROPDOWN_MOBILE_SHEET_MOTION_MS}ms`,
466
- transitionTimingFunction: sheetMotion,
467
- ...style
468
- },
469
- children: [
470
- /* @__PURE__ */ jsxs(
471
- "div",
472
- {
473
- className: cn(
474
- "flex w-full shrink-0 items-center py-2 pl-4 pr-2",
475
- sheetTitle ? "justify-between gap-3" : "justify-end"
476
- ),
477
- children: [
478
- sheetTitle ? /* @__PURE__ */ jsx("p", { className: "text-foreground min-w-0 flex-1 truncate text-base font-semibold", children: sheetTitle }) : null,
479
- /* @__PURE__ */ jsx(
480
- DropdownMobileClose,
481
- {
482
- onClick: (e) => {
483
- e.stopPropagation();
484
- onRequestClose();
485
- }
486
- }
487
- )
488
- ]
489
- }
490
- ),
491
- /* @__PURE__ */ jsx(
492
- "div",
493
- {
494
- className: cn(
495
- "min-h-0 flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))]",
496
- contentClassName
497
- ),
498
- children
499
- }
500
- )
501
- ]
502
- }
503
- )
504
- ]
505
- }
506
- ),
507
- document.body
508
- );
509
- }
510
- var DropdownContent = ({
511
- children,
512
- side = "bottom",
513
- align = "start",
514
- offset = 10,
515
- duration = 80,
516
- viewportPadding = 8,
517
- closeOnEscape = true,
518
- minWidth = "trigger",
519
- loop = true,
520
- typeahead = true,
521
- mobileOptions,
522
- slideEntrance = true,
523
- slideEntranceOffsetPx: slideEntranceOffsetPxProp,
524
- className,
525
- style,
526
- ...props
527
- }) => {
528
- const isMobile = useIsMobile(DROPDOWN_MOBILE_SHEET_MAX_PX + 1);
529
- const { open, setOpen, triggerRef } = useDropdown();
530
- const [shouldRender, setShouldRender] = useState(false);
531
- const [isAnimating, setIsAnimating] = useState(false);
532
- const [pos, setPos] = useState({ top: -9999, left: -9999, side });
533
- const [triggerW, setTriggerW] = useState(0);
534
- const menuRef = useRef(null);
535
- const typeaheadStateRef = useRef(createTypeaheadState());
536
- const resolvedMobile = resolveDropdownMobileSheet(mobileOptions);
537
- const isMobileSheet = isMobile && resolvedMobile.sheet;
538
- const slideOffsetPx = slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX;
539
- useEffect(() => {
540
- if (open) {
541
- setShouldRender(true);
542
- return;
543
- }
544
- if (!isMobileSheet) {
545
- setShouldRender(false);
546
- return;
547
- }
548
- setIsAnimating(false);
549
- const t = setTimeout(
550
- () => setShouldRender(false),
551
- DROPDOWN_MOBILE_SHEET_MOTION_MS
552
- );
553
- return () => clearTimeout(t);
554
- }, [open, isMobileSheet]);
555
- useEffect(() => {
556
- if (!shouldRender || !open) return;
557
- let raf2 = 0;
558
- const raf1 = requestAnimationFrame(() => {
559
- raf2 = requestAnimationFrame(() => setIsAnimating(true));
560
- });
561
- return () => {
562
- cancelAnimationFrame(raf1);
563
- if (raf2) cancelAnimationFrame(raf2);
564
- };
565
- }, [shouldRender, open]);
566
- useLayoutEffect(() => {
567
- if (!shouldRender || !triggerRef.current || !menuRef.current) return;
568
- const update = () => {
569
- if (!triggerRef.current || !menuRef.current) return;
570
- setTriggerW(triggerRef.current.getBoundingClientRect().width);
571
- setPos(
572
- computePos(
573
- triggerRef.current,
574
- menuRef.current,
575
- side,
576
- align,
577
- offset,
578
- viewportPadding
579
- )
580
- );
581
- };
582
- update();
583
- window.addEventListener("resize", update);
584
- return () => {
585
- window.removeEventListener("resize", update);
586
- };
587
- }, [shouldRender, side, align, offset, viewportPadding]);
588
- useEffect(() => {
589
- if (!open || isMobileSheet) return;
590
- const isInsideMenu = (t) => t instanceof Node && (!!menuRef.current?.contains(t) || !!triggerRef.current?.contains(t) || t instanceof Element && !!t.closest(`[${DROPDOWN_SUB_CONTENT_ATTR}]`));
591
- const onScroll = (e) => {
592
- if (!isInsideMenu(e.target)) setOpen(false);
593
- };
594
- window.addEventListener("scroll", onScroll, true);
595
- return () => window.removeEventListener("scroll", onScroll, true);
596
- }, [open, isMobileSheet, setOpen, triggerRef]);
597
- useEffect(() => {
598
- if (!shouldRender || isMobileSheet) return;
599
- const menu = menuRef.current;
600
- if (!menu) return;
601
- const onWheel = (e) => preventMenuWheelChain(menu, e);
602
- menu.addEventListener("wheel", onWheel, { passive: false });
603
- return () => menu.removeEventListener("wheel", onWheel);
604
- }, [shouldRender, isMobileSheet]);
605
- useEffect(() => {
606
- if (isAnimating && menuRef.current) {
607
- menuRef.current.focus();
608
- }
609
- }, [isAnimating]);
610
- useEffect(() => {
611
- if (!open) resetTypeahead(typeaheadStateRef.current);
612
- }, [open]);
613
- useEffect(() => {
614
- if (!open) return;
615
- const handler = (e) => {
616
- const t = e.target;
617
- if (menuRef.current?.contains(t) || triggerRef.current?.contains(t))
618
- return;
619
- const el = e.target instanceof Element ? e.target : null;
620
- if (el?.closest?.(`[${DROPDOWN_SUB_CONTENT_ATTR}]`)) return;
621
- setOpen(false);
622
- };
623
- document.addEventListener("mousedown", handler);
624
- return () => document.removeEventListener("mousedown", handler);
625
- }, [open, setOpen, triggerRef]);
626
- useEffect(() => {
627
- if (!open) return;
628
- const handler = (e) => {
629
- const menu = menuRef.current;
630
- if (!menu) return;
631
- const focusedEl = document.activeElement;
632
- if (focusedEl && !menu.contains(focusedEl)) return;
633
- const items = getItems(menu);
634
- const idx = items.indexOf(focusedEl);
635
- switch (e.key) {
636
- case "Escape":
637
- if (closeOnEscape) {
638
- e.preventDefault();
639
- setOpen(false);
640
- triggerRef.current?.focus();
641
- }
642
- break;
643
- case "ArrowDown":
644
- e.preventDefault();
645
- if (items.length === 0) break;
646
- if (idx === -1 || idx === items.length - 1 && loop)
647
- items[0]?.focus();
648
- else if (idx < items.length - 1) items[idx + 1]?.focus();
649
- break;
650
- case "ArrowUp":
651
- e.preventDefault();
652
- if (items.length === 0) break;
653
- if (idx <= 0 && loop) items[items.length - 1]?.focus();
654
- else if (idx > 0) items[idx - 1]?.focus();
655
- break;
656
- case "Home":
657
- e.preventDefault();
658
- items[0]?.focus();
659
- break;
660
- case "End":
661
- e.preventDefault();
662
- items[items.length - 1]?.focus();
663
- break;
664
- case "Tab":
665
- setOpen(false);
666
- break;
667
- default:
668
- handleTypeaheadKeyDown(e, items, typeaheadStateRef.current, {
669
- enabled: typeahead
670
- });
671
- break;
672
- }
673
- };
674
- window.addEventListener("keydown", handler);
675
- return () => window.removeEventListener("keydown", handler);
676
- }, [open, closeOnEscape, loop, typeahead, setOpen, triggerRef]);
677
- useEffect(() => {
678
- if (!open || !isMobileSheet) return;
679
- document.body.style.overflow = "hidden";
680
- return () => {
681
- document.body.style.overflow = "";
682
- };
683
- }, [open, isMobileSheet]);
684
- if (!shouldRender || typeof document === "undefined") return null;
685
- if (isMobileSheet) {
686
- return /* @__PURE__ */ jsx(
687
- DropdownMobileBottomSheetPortal,
688
- {
689
- ...props,
690
- open,
691
- isAnimating,
692
- slideEntrance,
693
- slideOffsetPx,
694
- sheetTitle: resolvedMobile.title,
695
- sheetExtraClassName: resolvedMobile.sheetExtraClassName,
696
- contentClassName: resolvedMobile.contentClassName,
697
- onRequestClose: () => setOpen(false),
698
- menuRef,
699
- portalZClassName: "z-50",
700
- className,
701
- style,
702
- role: "menu",
703
- "aria-orientation": "vertical",
704
- tabIndex: -1,
705
- children
706
- }
707
- );
708
- }
709
- const resolvedMinW = minWidth === "trigger" ? Math.max(triggerW, DROPDOWN_MENU_MIN_WIDTH_PX) : minWidth;
710
- return createPortal(
711
- /* @__PURE__ */ jsx(
712
- "div",
713
- {
714
- ...props,
715
- ref: menuRef,
716
- role: "menu",
717
- "aria-orientation": "vertical",
718
- tabIndex: -1,
719
- className: cn(
720
- "bg-background border-primary/8 absolute z-50 rounded-xl border py-1.5 outline-none",
721
- DROPDOWN_PANEL_SHADOW,
722
- DROPDOWN_PANEL_SCROLL,
723
- className,
724
- pos.maxHeight != null ? "overflow-y-auto" : "overflow-hidden"
725
- ),
726
- style: {
727
- position: "absolute",
728
- top: pos.top,
729
- left: pos.left,
730
- minWidth: resolvedMinW,
731
- maxHeight: pos.maxHeight,
732
- transformOrigin: DROPDOWN_CONTENT_ORIGIN[pos.side],
733
- transform: isAnimating ? "none" : DROPDOWN_CONTENT_HIDDEN[pos.side],
734
- opacity: isAnimating ? 1 : 0,
735
- transitionProperty: "opacity, transform",
736
- transitionDuration: `${duration}ms`,
737
- transitionTimingFunction: isAnimating ? DROPDOWN_PANEL_OPEN_EASING : DROPDOWN_PANEL_CLOSE_EASING,
738
- ...style
739
- },
740
- children
741
- }
742
- ),
743
- document.body
744
- );
745
- };
746
- function getItems(menu) {
747
- return Array.from(
748
- menu.querySelectorAll(
749
- '[role="menuitem"]:not([aria-disabled="true"]),[role="menuitemcheckbox"]:not([aria-disabled="true"]),[role="menuitemradio"]:not([aria-disabled="true"])'
750
- )
751
- );
752
- }
753
- var DropdownItem = ({
754
- children,
755
- disabled = false,
756
- destructive = false,
757
- icon,
758
- shortcut,
759
- closeOnSelect = true,
760
- inset = false,
761
- className,
762
- onClick,
763
- ...props
764
- }) => {
765
- const { setOpen } = useDropdown();
766
- const handleClick = (e) => {
767
- if (disabled) return;
768
- onClick?.(e);
769
- if (closeOnSelect) setOpen(false);
770
- };
771
- const handleKeyDown = (e) => {
772
- if (e.key === "Enter" || e.key === " ") {
773
- e.preventDefault();
774
- handleClick(e);
775
- }
776
- };
777
- return /* @__PURE__ */ jsxs(
778
- "div",
779
- {
780
- ...props,
781
- role: "menuitem",
782
- tabIndex: disabled ? void 0 : -1,
783
- "aria-disabled": disabled,
784
- onClick: handleClick,
785
- onKeyDown: handleKeyDown,
786
- className: cn(
787
- "relative mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors duration-0 outline-none select-none",
788
- DROPDOWN_SHEET_MENU_TEXT,
789
- inset && "pl-9",
790
- !disabled && "cursor-pointer",
791
- disabled && "lg:cursor-not-allowed",
792
- !disabled && !destructive && "text-foreground hover:bg-primary/8 focus-visible:bg-primary/8 dark:hover:bg-primary/4 dark:focus-visible:bg-primary/4",
793
- !disabled && destructive && "text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10 dark:text-destructive-foreground dark:hover:bg-destructive-foreground/18 dark:focus-visible:bg-destructive-foreground/18",
794
- disabled && !destructive && "text-foreground/45 dark:text-foreground/50",
795
- disabled && destructive && "bg-destructive/5 text-destructive/75 dark:bg-destructive-foreground/12 dark:text-destructive-foreground/78",
796
- className
797
- ),
798
- children: [
799
- icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
800
- /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", "data-menu-label": true, children }),
801
- shortcut ? /* @__PURE__ */ jsx(
802
- "span",
803
- {
804
- className: cn(
805
- "ml-auto text-xs tracking-widest",
806
- DROPDOWN_SHEET_MENU_SHORTCUT,
807
- destructive ? "text-destructive/70 dark:text-destructive-foreground/80" : "opacity-40"
808
- ),
809
- children: shortcut
810
- }
811
- ) : null
812
- ]
813
- }
814
- );
815
- };
816
- var DropdownSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
817
- "div",
818
- {
819
- role: "separator",
820
- className: cn("border-primary/10 my-1.5 border-t", className),
821
- ...props
822
- }
823
- );
824
- React2__default.createContext(
825
- void 0
826
- );
827
-
828
- // src/react/table-view/helpers.ts
829
- function getTableLeafColumnOrderList(table) {
830
- const o = table.getState().columnOrder;
831
- if (o && o.length > 0) return [...o];
832
- return table.getVisibleLeafColumns().map((c) => c.id);
833
- }
834
- function moveTableColumnOneStep(table, columnId, direction) {
835
- const list = getTableLeafColumnOrderList(table);
836
- const i = list.indexOf(columnId);
837
- if (i < 0) return;
838
- const next = [...list];
839
- if (direction === "left" && i > 0) {
840
- [next[i - 1], next[i]] = [next[i], next[i - 1]];
841
- } else if (direction === "right" && i < next.length - 1) {
842
- [next[i + 1], next[i]] = [next[i], next[i + 1]];
843
- } else {
844
- return;
845
- }
846
- table.setColumnOrder(next);
847
- }
848
-
849
- // src/react/table-view/meta.ts
850
- function getTableViewColumnDisableReorder(column) {
851
- return Boolean(column.columnDef.meta?.tableView?.disableColumnReorder);
852
- }
853
- var ColumnHeaderMenuInner = forwardRef(function ColumnHeaderMenuInner2({ table, header, columnSort, columnReorder }, ref) {
854
- const [open, setOpen] = useState(false);
855
- useImperativeHandle(
856
- ref,
857
- () => ({
858
- open: () => {
859
- setOpen(true);
860
- }
861
- }),
862
- []
863
- );
864
- const col = header.column;
865
- const id = col.id;
866
- const canPin = col.getCanPin();
867
- const pin = col.getIsPinned();
868
- const list = getTableLeafColumnOrderList(table);
869
- const idx = list.indexOf(id);
870
- const reorderLocked = getTableViewColumnDisableReorder(col);
871
- const canMoveLeft = columnReorder && !reorderLocked && idx > 0;
872
- const canMoveRight = columnReorder && !reorderLocked && idx >= 0 && idx < list.length - 1;
873
- const canSort = columnSort && col.getCanSort();
874
- const hasMoveSection = canMoveLeft || canMoveRight;
875
- const hasSortSection = !!canSort;
876
- const hasPinSection = canPin;
877
- const hasHideSection = col.getCanHide();
878
- if (!hasMoveSection && !hasSortSection && !hasPinSection && !hasHideSection) {
879
- return null;
880
- }
881
- const showSepBeforeHide = hasHideSection && (hasMoveSection || hasSortSection || hasPinSection);
882
- return /* @__PURE__ */ jsx(
883
- "div",
884
- {
885
- className: cn(
886
- "flex shrink-0 self-stretch items-center",
887
- "opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100 has-[[data-state=open]]:opacity-100"
888
- ),
889
- onClick: (e) => e.stopPropagation(),
890
- children: /* @__PURE__ */ jsxs(Dropdown, { open, onOpenChange: setOpen, children: [
891
- /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
892
- Button,
893
- {
894
- type: "button",
895
- size: "xs",
896
- iconOnly: true,
897
- rounded: "full",
898
- className: "touch-manipulation border-none bg-transparent shadow-none",
899
- "aria-label": "Column options",
900
- children: /* @__PURE__ */ jsx(MoreVertical, { className: "size-3.5", strokeWidth: 2.25, "aria-hidden": true })
901
- }
902
- ) }),
903
- /* @__PURE__ */ jsxs(DropdownContent, { align: "end", side: "bottom", offset: 4, children: [
904
- hasMoveSection ? /* @__PURE__ */ jsxs(Fragment, { children: [
905
- /* @__PURE__ */ jsx(
906
- DropdownItem,
907
- {
908
- disabled: !canMoveLeft,
909
- icon: /* @__PURE__ */ jsx(
910
- ArrowLeft,
911
- {
912
- className: "size-3.5",
913
- strokeWidth: 2.25,
914
- "aria-hidden": true
915
- }
916
- ),
917
- onClick: () => {
918
- if (canMoveLeft) moveTableColumnOneStep(table, id, "left");
919
- },
920
- children: "Move to the left"
921
- }
922
- ),
923
- /* @__PURE__ */ jsx(
924
- DropdownItem,
925
- {
926
- disabled: !canMoveRight,
927
- icon: /* @__PURE__ */ jsx(
928
- ArrowRight,
929
- {
930
- className: "size-3.5",
931
- strokeWidth: 2.25,
932
- "aria-hidden": true
933
- }
934
- ),
935
- onClick: () => {
936
- if (canMoveRight) moveTableColumnOneStep(table, id, "right");
937
- },
938
- children: "Move to the right"
939
- }
940
- )
941
- ] }) : null,
942
- hasMoveSection && (hasSortSection || hasPinSection) ? /* @__PURE__ */ jsx(DropdownSeparator, {}) : null,
943
- hasSortSection ? /* @__PURE__ */ jsxs(Fragment, { children: [
944
- /* @__PURE__ */ jsx(
945
- DropdownItem,
946
- {
947
- icon: /* @__PURE__ */ jsx(
948
- ChevronUp,
949
- {
950
- className: "size-3.5",
951
- strokeWidth: 2.25,
952
- "aria-hidden": true
953
- }
954
- ),
955
- onClick: () => {
956
- col.toggleSorting(false);
957
- },
958
- children: "Sort ascending"
959
- }
960
- ),
961
- /* @__PURE__ */ jsx(
962
- DropdownItem,
963
- {
964
- icon: /* @__PURE__ */ jsx(
965
- ChevronDown,
966
- {
967
- className: "size-3.5",
968
- strokeWidth: 2.25,
969
- "aria-hidden": true
970
- }
971
- ),
972
- onClick: () => {
973
- col.toggleSorting(true);
974
- },
975
- children: "Sort descending"
976
- }
977
- )
978
- ] }) : null,
979
- hasSortSection && hasPinSection ? /* @__PURE__ */ jsx(DropdownSeparator, {}) : null,
980
- hasPinSection ? /* @__PURE__ */ jsxs(Fragment, { children: [
981
- pin !== "left" ? /* @__PURE__ */ jsx(
982
- DropdownItem,
983
- {
984
- icon: /* @__PURE__ */ jsx(Pin, { className: "size-3.5", strokeWidth: 2.25, "aria-hidden": true }),
985
- onClick: () => {
986
- col.pin("left");
987
- },
988
- children: "Pin to the left"
989
- }
990
- ) : null,
991
- pin !== "right" ? /* @__PURE__ */ jsx(
992
- DropdownItem,
993
- {
994
- icon: /* @__PURE__ */ jsx(
995
- Pin,
996
- {
997
- className: "size-3.5 -scale-x-100",
998
- strokeWidth: 2.25,
999
- "aria-hidden": true
1000
- }
1001
- ),
1002
- onClick: () => {
1003
- col.pin("right");
1004
- },
1005
- children: "Pin to the right"
1006
- }
1007
- ) : null,
1008
- pin ? /* @__PURE__ */ jsx(
1009
- DropdownItem,
1010
- {
1011
- icon: /* @__PURE__ */ jsx(
1012
- PinOff,
1013
- {
1014
- className: "size-3.5",
1015
- strokeWidth: 2.25,
1016
- "aria-hidden": true
1017
- }
1018
- ),
1019
- onClick: () => {
1020
- col.pin(false);
1021
- },
1022
- children: "Unpin column"
1023
- }
1024
- ) : null
1025
- ] }) : null,
1026
- showSepBeforeHide ? /* @__PURE__ */ jsx(DropdownSeparator, {}) : null,
1027
- hasHideSection ? /* @__PURE__ */ jsx(
1028
- DropdownItem,
1029
- {
1030
- icon: /* @__PURE__ */ jsx(EyeOff, { className: "size-3.5", strokeWidth: 2.25, "aria-hidden": true }),
1031
- onClick: () => {
1032
- col.toggleVisibility(false);
1033
- setOpen(false);
1034
- },
1035
- children: "Hide column"
1036
- }
1037
- ) : null
1038
- ] })
1039
- ] })
1040
- }
1041
- );
1042
- });
1043
- ColumnHeaderMenuInner.displayName = "ColumnHeaderMenuInner";
1044
- var ColumnHeaderMenu = memo(ColumnHeaderMenuInner);
1045
- ColumnHeaderMenu.displayName = "ColumnHeaderMenu";
1046
-
1047
- export { ColumnHeaderMenu };
1048
- //# sourceMappingURL=column-menu.js.map
1049
- //# sourceMappingURL=column-menu.js.map