@youngonesworks/ui 0.1.104 → 0.1.106
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/actionIcon/index.d.ts +5 -1
- package/dist/components/kebabMenu/index.d.ts +2 -1
- package/dist/index.cjs +180 -164
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +179 -163
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { MouseEvent } from 'react';
|
|
2
2
|
export interface ActionIconProps {
|
|
3
|
+
ref?: React.Ref<HTMLButtonElement>;
|
|
3
4
|
'data-testid'?: string;
|
|
4
5
|
title: string;
|
|
5
6
|
disabled?: boolean;
|
|
@@ -20,5 +21,8 @@ export interface ActionIconProps {
|
|
|
20
21
|
*/
|
|
21
22
|
height?: string;
|
|
22
23
|
}
|
|
23
|
-
declare const ActionIcon:
|
|
24
|
+
declare const ActionIcon: {
|
|
25
|
+
({ ref, title, disabled, styleVariant, icon, type, "data-testid": testId, iconSize, strokeWidth, onClick, className, ...props }: ActionIconProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
displayName: string;
|
|
27
|
+
};
|
|
24
28
|
export { ActionIcon };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export interface KebabMenuProps {
|
|
2
2
|
title?: string;
|
|
3
|
+
tooltip?: string;
|
|
3
4
|
disabled?: boolean;
|
|
4
5
|
content: {
|
|
5
6
|
key: number;
|
|
@@ -11,6 +12,6 @@ export interface KebabMenuProps {
|
|
|
11
12
|
styleVariant?: 'default' | 'small';
|
|
12
13
|
}
|
|
13
14
|
export declare const KebabMenu: {
|
|
14
|
-
({ title, content, disabled, styleVariant }: KebabMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
({ title, tooltip, content, disabled, styleVariant }: KebabMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
displayName: string;
|
|
16
17
|
};
|
package/dist/index.cjs
CHANGED
|
@@ -29,12 +29,12 @@ const __tabler_icons_react = __toESM(require("@tabler/icons-react"));
|
|
|
29
29
|
const clsx = __toESM(require("clsx"));
|
|
30
30
|
const tailwind_merge = __toESM(require("tailwind-merge"));
|
|
31
31
|
const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
|
|
32
|
-
const
|
|
32
|
+
const __floating_ui_react = __toESM(require("@floating-ui/react"));
|
|
33
33
|
const react_day_picker = __toESM(require("react-day-picker"));
|
|
34
34
|
const date_fns = __toESM(require("date-fns"));
|
|
35
35
|
const date_fns_locale = __toESM(require("date-fns/locale"));
|
|
36
|
-
const __floating_ui_react = __toESM(require("@floating-ui/react"));
|
|
37
36
|
const react_dom = __toESM(require("react-dom"));
|
|
37
|
+
const react_tooltip = __toESM(require("react-tooltip"));
|
|
38
38
|
const __tiptap_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"));
|
|
39
39
|
const __tiptap_extension_underline = __toESM(require("@tiptap/extension-underline"));
|
|
40
40
|
const __tiptap_react = __toESM(require("@tiptap/react"));
|
|
@@ -43,7 +43,7 @@ const __tiptap_starter_kit = __toESM(require("@tiptap/starter-kit"));
|
|
|
43
43
|
//#region src/jsx-runtime-shim.ts
|
|
44
44
|
const jsx = react.createElement;
|
|
45
45
|
const jsxs = react.createElement;
|
|
46
|
-
const Fragment$
|
|
46
|
+
const Fragment$2 = react.Fragment;
|
|
47
47
|
|
|
48
48
|
//#endregion
|
|
49
49
|
//#region src/utils/cn.ts
|
|
@@ -114,6 +114,113 @@ const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ (0, react_
|
|
|
114
114
|
children
|
|
115
115
|
});
|
|
116
116
|
|
|
117
|
+
//#endregion
|
|
118
|
+
//#region src/hooks/useMergeRefs.ts
|
|
119
|
+
function useMergeRefs(...refs) {
|
|
120
|
+
return (0, react.useCallback)((value) => {
|
|
121
|
+
refs.forEach((ref) => {
|
|
122
|
+
if (typeof ref === "function") {
|
|
123
|
+
ref(value);
|
|
124
|
+
} else if (ref) {
|
|
125
|
+
ref.current = value;
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
}, [refs]);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
//#endregion
|
|
132
|
+
//#region src/components/tooltip/index.tsx
|
|
133
|
+
const sizeClasses = {
|
|
134
|
+
xs: "max-w-xs",
|
|
135
|
+
sm: "max-w-sm",
|
|
136
|
+
md: "max-w-md",
|
|
137
|
+
lg: "max-w-lg"
|
|
138
|
+
};
|
|
139
|
+
const Tooltip = ({ content, children, passedOpen = false, size = "md", variant = "default" }) => {
|
|
140
|
+
const [isOpen, setIsOpen] = (0, react.useState)(passedOpen);
|
|
141
|
+
const arrowRef = (0, react.useRef)(null);
|
|
142
|
+
const { refs, floatingStyles, context } = (0, __floating_ui_react.useFloating)({
|
|
143
|
+
open: isOpen,
|
|
144
|
+
onOpenChange: setIsOpen,
|
|
145
|
+
placement: "top",
|
|
146
|
+
middleware: [
|
|
147
|
+
variant === "default" ? (0, __floating_ui_react.offset)(20) : (0, __floating_ui_react.offset)(25),
|
|
148
|
+
(0, __floating_ui_react.flip)(),
|
|
149
|
+
(0, __floating_ui_react.shift)(),
|
|
150
|
+
(0, __floating_ui_react.arrow)({ element: arrowRef })
|
|
151
|
+
],
|
|
152
|
+
whileElementsMounted: __floating_ui_react.autoUpdate
|
|
153
|
+
});
|
|
154
|
+
const hover = (0, __floating_ui_react.useHover)(context, { move: false });
|
|
155
|
+
const focus = (0, __floating_ui_react.useFocus)(context);
|
|
156
|
+
const dismiss = (0, __floating_ui_react.useDismiss)(context);
|
|
157
|
+
const role = (0, __floating_ui_react.useRole)(context, { role: "tooltip" });
|
|
158
|
+
const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)([
|
|
159
|
+
hover,
|
|
160
|
+
focus,
|
|
161
|
+
dismiss,
|
|
162
|
+
role
|
|
163
|
+
]);
|
|
164
|
+
const childRef = children.ref;
|
|
165
|
+
const mergedRef = useMergeRefs(refs.setReference, childRef);
|
|
166
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react.isValidElement)(children) && (0, react.cloneElement)(children, getReferenceProps({
|
|
167
|
+
...children.props,
|
|
168
|
+
...getReferenceProps(),
|
|
169
|
+
ref: mergedRef
|
|
170
|
+
})), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
171
|
+
ref: refs.setFloating,
|
|
172
|
+
style: floatingStyles,
|
|
173
|
+
...getFloatingProps(),
|
|
174
|
+
className: "z-70 drop-shadow-xl",
|
|
175
|
+
"data-testid": "tooltip",
|
|
176
|
+
"data-component": "tooltip",
|
|
177
|
+
children: variant === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
178
|
+
"data-testid": "tooltip-container",
|
|
179
|
+
className: "w-full rounded bg-gray-800 pt-[3px] text-white",
|
|
180
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
181
|
+
"data-testid": "tooltip-content",
|
|
182
|
+
className: `${sizeClasses[size]} px-2 py-1 text-sm font-normal`,
|
|
183
|
+
children: content
|
|
184
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
|
|
185
|
+
ref: arrowRef,
|
|
186
|
+
context,
|
|
187
|
+
width: 10,
|
|
188
|
+
height: 6,
|
|
189
|
+
tipRadius: 1,
|
|
190
|
+
"data-testid": "tooltip-arrow",
|
|
191
|
+
className: "fill-gray-800 drop-shadow-xl"
|
|
192
|
+
})]
|
|
193
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
194
|
+
"data-testid": "tooltip-container",
|
|
195
|
+
className: "bg-linear-gradient-x pt-[3px]",
|
|
196
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
197
|
+
"data-testid": "tooltip-content",
|
|
198
|
+
className: `${sizeClasses[size]} overflow-hidden bg-white p-5 px-2 py-1 text-start text-sm font-normal`,
|
|
199
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: content })
|
|
200
|
+
}), size === "md" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
|
|
201
|
+
ref: arrowRef,
|
|
202
|
+
context,
|
|
203
|
+
width: 25,
|
|
204
|
+
height: 17,
|
|
205
|
+
tipRadius: 1,
|
|
206
|
+
fill: "white",
|
|
207
|
+
className: "drop-shadow-xl",
|
|
208
|
+
"data-testid": "tooltip-arrow"
|
|
209
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
|
|
210
|
+
ref: arrowRef,
|
|
211
|
+
context,
|
|
212
|
+
width: 10,
|
|
213
|
+
height: 6,
|
|
214
|
+
tipRadius: 1,
|
|
215
|
+
fill: "white",
|
|
216
|
+
className: "drop-shadow-xl",
|
|
217
|
+
"data-testid": "tooltip-arrow"
|
|
218
|
+
})]
|
|
219
|
+
})
|
|
220
|
+
})] });
|
|
221
|
+
};
|
|
222
|
+
Tooltip.displayName = "Tooltip";
|
|
223
|
+
|
|
117
224
|
//#endregion
|
|
118
225
|
//#region src/utils/enums.ts
|
|
119
226
|
let ACTION_ICON_STYLE_VARIANT = /* @__PURE__ */ function(ACTION_ICON_STYLE_VARIANT$1) {
|
|
@@ -191,34 +298,35 @@ function formatIcon(icon, defaultFormatAttributes) {
|
|
|
191
298
|
|
|
192
299
|
//#endregion
|
|
193
300
|
//#region src/components/actionIcon/index.tsx
|
|
194
|
-
const ActionIcon = (
|
|
301
|
+
const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }) => {
|
|
195
302
|
const variantClassNames = (0, clsx.default)({
|
|
196
303
|
"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.DEFAULT,
|
|
197
304
|
"active:translate-y-[1px] border-none content-center flex items-center justify-center rounded-[4px] border text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.TRANSPARENT,
|
|
198
305
|
"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] child:p-10 w-[37px] h-[37px] text-black rounded-full bg-primary hover:bg-turquoise-700 disabled:turquoise-50 disabled:text-gray-800": styleVariant === ACTION_ICON_STYLE_VARIANT.ROUND,
|
|
199
306
|
"w-7 h-7 active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black hover:bg-gray-50 disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.SMALL
|
|
200
307
|
});
|
|
201
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
});
|
|
308
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
|
|
309
|
+
size: "sm",
|
|
310
|
+
content: title,
|
|
311
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
312
|
+
title,
|
|
313
|
+
type,
|
|
314
|
+
disabled,
|
|
315
|
+
"data-testid": testId,
|
|
316
|
+
"data-component": "ActionIcon",
|
|
317
|
+
className: cn(variantClassNames, { "hover:bg-transparant cursor-not-allowed hover:border-gray-200": disabled }, className),
|
|
318
|
+
onClick,
|
|
319
|
+
ref,
|
|
320
|
+
"data-tooltip-id": title,
|
|
321
|
+
"data-tooltip-content": title,
|
|
322
|
+
...props,
|
|
323
|
+
children: icon ? formatIcon(icon, {
|
|
324
|
+
stroke: strokeWidth,
|
|
325
|
+
size: iconSize
|
|
326
|
+
}) : props.children
|
|
327
|
+
})
|
|
328
|
+
}) });
|
|
329
|
+
};
|
|
222
330
|
ActionIcon.displayName = "ActionIcon";
|
|
223
331
|
|
|
224
332
|
//#endregion
|
|
@@ -1512,100 +1620,9 @@ const Island = ({ children, className, noShadow = false, noPadding = false,...pr
|
|
|
1512
1620
|
});
|
|
1513
1621
|
Island.displayName = "Island";
|
|
1514
1622
|
|
|
1515
|
-
//#endregion
|
|
1516
|
-
//#region src/components/tooltip/index.tsx
|
|
1517
|
-
const sizeClasses = {
|
|
1518
|
-
xs: "max-w-xs",
|
|
1519
|
-
sm: "max-w-sm",
|
|
1520
|
-
md: "max-w-md",
|
|
1521
|
-
lg: "max-w-lg"
|
|
1522
|
-
};
|
|
1523
|
-
const Tooltip = ({ content, children, passedOpen = false, size = "md", variant = "default" }) => {
|
|
1524
|
-
const [isOpen, setIsOpen] = (0, react.useState)(passedOpen);
|
|
1525
|
-
const arrowRef = (0, react.useRef)(null);
|
|
1526
|
-
const { refs, floatingStyles, context } = (0, __floating_ui_react.useFloating)({
|
|
1527
|
-
open: isOpen,
|
|
1528
|
-
onOpenChange: setIsOpen,
|
|
1529
|
-
placement: "top",
|
|
1530
|
-
middleware: [
|
|
1531
|
-
variant === "default" ? (0, __floating_ui_react.offset)(20) : (0, __floating_ui_react.offset)(25),
|
|
1532
|
-
(0, __floating_ui_react.flip)(),
|
|
1533
|
-
(0, __floating_ui_react.shift)(),
|
|
1534
|
-
(0, __floating_ui_react.arrow)({ element: arrowRef })
|
|
1535
|
-
],
|
|
1536
|
-
whileElementsMounted: __floating_ui_react.autoUpdate
|
|
1537
|
-
});
|
|
1538
|
-
const hover = (0, __floating_ui_react.useHover)(context, { move: false });
|
|
1539
|
-
const focus = (0, __floating_ui_react.useFocus)(context);
|
|
1540
|
-
const dismiss = (0, __floating_ui_react.useDismiss)(context);
|
|
1541
|
-
const role = (0, __floating_ui_react.useRole)(context, { role: "tooltip" });
|
|
1542
|
-
const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)([
|
|
1543
|
-
hover,
|
|
1544
|
-
focus,
|
|
1545
|
-
dismiss,
|
|
1546
|
-
role
|
|
1547
|
-
]);
|
|
1548
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react.isValidElement)(children) && (0, react.cloneElement)(children, getReferenceProps({
|
|
1549
|
-
ref: refs.setReference,
|
|
1550
|
-
...children.props,
|
|
1551
|
-
...getReferenceProps()
|
|
1552
|
-
})), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1553
|
-
ref: refs.setFloating,
|
|
1554
|
-
style: floatingStyles,
|
|
1555
|
-
...getFloatingProps(),
|
|
1556
|
-
className: "z-70 drop-shadow-xl",
|
|
1557
|
-
"data-testid": "tooltip",
|
|
1558
|
-
"data-component": "tooltip",
|
|
1559
|
-
children: variant === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1560
|
-
"data-testid": "tooltip-container",
|
|
1561
|
-
className: "w-full rounded bg-gray-800 pt-[3px] text-white",
|
|
1562
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1563
|
-
"data-testid": "tooltip-content",
|
|
1564
|
-
className: `${sizeClasses[size]} px-2 py-1 text-sm font-normal`,
|
|
1565
|
-
children: content
|
|
1566
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
|
|
1567
|
-
ref: arrowRef,
|
|
1568
|
-
context,
|
|
1569
|
-
width: 10,
|
|
1570
|
-
height: 6,
|
|
1571
|
-
tipRadius: 1,
|
|
1572
|
-
"data-testid": "tooltip-arrow",
|
|
1573
|
-
className: "fill-gray-800 drop-shadow-xl"
|
|
1574
|
-
})]
|
|
1575
|
-
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1576
|
-
"data-testid": "tooltip-container",
|
|
1577
|
-
className: "bg-linear-gradient-x pt-[3px]",
|
|
1578
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1579
|
-
"data-testid": "tooltip-content",
|
|
1580
|
-
className: `${sizeClasses[size]} overflow-hidden bg-white p-5 px-2 py-1 text-start text-sm font-normal`,
|
|
1581
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: content })
|
|
1582
|
-
}), size === "md" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
|
|
1583
|
-
ref: arrowRef,
|
|
1584
|
-
context,
|
|
1585
|
-
width: 25,
|
|
1586
|
-
height: 17,
|
|
1587
|
-
tipRadius: 1,
|
|
1588
|
-
fill: "white",
|
|
1589
|
-
className: "drop-shadow-xl",
|
|
1590
|
-
"data-testid": "tooltip-arrow"
|
|
1591
|
-
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
|
|
1592
|
-
ref: arrowRef,
|
|
1593
|
-
context,
|
|
1594
|
-
width: 10,
|
|
1595
|
-
height: 6,
|
|
1596
|
-
tipRadius: 1,
|
|
1597
|
-
fill: "white",
|
|
1598
|
-
className: "drop-shadow-xl",
|
|
1599
|
-
"data-testid": "tooltip-arrow"
|
|
1600
|
-
})]
|
|
1601
|
-
})
|
|
1602
|
-
})] });
|
|
1603
|
-
};
|
|
1604
|
-
Tooltip.displayName = "Tooltip";
|
|
1605
|
-
|
|
1606
1623
|
//#endregion
|
|
1607
1624
|
//#region src/components/kebabMenu/index.tsx
|
|
1608
|
-
const KebabMenu = ({ title, content, disabled = false, styleVariant = "default" }) => {
|
|
1625
|
+
const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "default" }) => {
|
|
1609
1626
|
const [isOpen, setIsOpen] = (0, react.useState)(false);
|
|
1610
1627
|
const menuRef = (0, react.useRef)(null);
|
|
1611
1628
|
const defaultStyling = "text-black flex items-center justify-self-end gap-1 bg-transparent font-medium py-1 h-9 min-w-9 cursor-pointer px-0";
|
|
@@ -1627,45 +1644,58 @@ const KebabMenu = ({ title, content, disabled = false, styleVariant = "default"
|
|
|
1627
1644
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
1628
1645
|
};
|
|
1629
1646
|
}, []);
|
|
1647
|
+
const button = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UnstyledButton, {
|
|
1648
|
+
"aria-label": "Options Menu",
|
|
1649
|
+
className: cn(buttonVariants["secondary"], defaultStyling, {
|
|
1650
|
+
"md:pr-3.5 md:pl-5": title,
|
|
1651
|
+
"h-7 min-w-7": styleVariant === "small"
|
|
1652
|
+
}),
|
|
1653
|
+
disabled,
|
|
1654
|
+
onClick: handleToggle,
|
|
1655
|
+
children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
1656
|
+
className: "hidden md:block",
|
|
1657
|
+
children: title
|
|
1658
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconDotsVertical, {
|
|
1659
|
+
size: 20,
|
|
1660
|
+
stroke: 1,
|
|
1661
|
+
fill: "black"
|
|
1662
|
+
})]
|
|
1663
|
+
}), [
|
|
1664
|
+
title,
|
|
1665
|
+
styleVariant,
|
|
1666
|
+
disabled,
|
|
1667
|
+
handleToggle
|
|
1668
|
+
]);
|
|
1630
1669
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1631
|
-
className: "relative",
|
|
1632
1670
|
"data-component": "kebabMenu",
|
|
1633
1671
|
"data-testid": "kebab-menu",
|
|
1634
1672
|
ref: menuRef,
|
|
1635
1673
|
"data-tooltip-id": title,
|
|
1636
1674
|
"data-tooltip-content": title,
|
|
1637
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
children: c.title
|
|
1662
|
-
});
|
|
1663
|
-
return c.tooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
|
|
1664
|
-
passedOpen: false,
|
|
1665
|
-
size: "sm",
|
|
1666
|
-
content: c.tooltip,
|
|
1667
|
-
children: button
|
|
1668
|
-
}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: button }, index);
|
|
1675
|
+
children: [tooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
|
|
1676
|
+
passedOpen: false,
|
|
1677
|
+
size: "sm",
|
|
1678
|
+
content: tooltip,
|
|
1679
|
+
children: button
|
|
1680
|
+
}) : button, isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1681
|
+
className: "relative",
|
|
1682
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1683
|
+
className: "absolute right-0 z-10 mt-2 w-auto min-w-[200px] rounded-md border-[0.0625rem] border-gray-200 bg-white p-1 shadow-md",
|
|
1684
|
+
children: content.map((c, index) => {
|
|
1685
|
+
const button$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
|
|
1686
|
+
onClick: () => handleItemClick(c.onClick),
|
|
1687
|
+
className: "w-full rounded-md px-4 py-2 text-left text-sm font-normal whitespace-nowrap hover:bg-gray-50",
|
|
1688
|
+
"aria-label": "Options Menu Item",
|
|
1689
|
+
disabled: c.disabled,
|
|
1690
|
+
children: c.title
|
|
1691
|
+
});
|
|
1692
|
+
return c.tooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
|
|
1693
|
+
passedOpen: false,
|
|
1694
|
+
size: "sm",
|
|
1695
|
+
content: c.tooltip,
|
|
1696
|
+
children: button$1
|
|
1697
|
+
}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: button$1 }, index);
|
|
1698
|
+
})
|
|
1669
1699
|
})
|
|
1670
1700
|
})]
|
|
1671
1701
|
}) });
|
|
@@ -2323,20 +2353,6 @@ function useDebouncedValue(value, delay = 200) {
|
|
|
2323
2353
|
return debouncedValue;
|
|
2324
2354
|
}
|
|
2325
2355
|
|
|
2326
|
-
//#endregion
|
|
2327
|
-
//#region src/hooks/useMergeRefs.ts
|
|
2328
|
-
function useMergeRefs(...refs) {
|
|
2329
|
-
return (0, react.useCallback)((value) => {
|
|
2330
|
-
refs.forEach((ref) => {
|
|
2331
|
-
if (typeof ref === "function") {
|
|
2332
|
-
ref(value);
|
|
2333
|
-
} else if (ref) {
|
|
2334
|
-
ref.current = value;
|
|
2335
|
-
}
|
|
2336
|
-
});
|
|
2337
|
-
}, [refs]);
|
|
2338
|
-
}
|
|
2339
|
-
|
|
2340
2356
|
//#endregion
|
|
2341
2357
|
//#region src/components/select/index.tsx
|
|
2342
2358
|
function Select({ id, options, placeholder, label, errorText, hideError = false, isClearable = false, disabled = false, multiSelect = false, searchable = false, value, defaultValue, onValueChange, className, searchPlaceholder, noResultsText,...props }) {
|