@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.
@@ -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: React.ForwardRefExoticComponent<ActionIconProps & React.RefAttributes<HTMLButtonElement>>;
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 react_tooltip = __toESM(require("react-tooltip"));
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$1 = react.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 = (0, react.forwardRef)(({ title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }, ref) => {
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.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
202
- title,
203
- type,
204
- disabled,
205
- "data-testid": testId,
206
- "data-component": "ActionIcon",
207
- className: cn(variantClassNames, { "hover:bg-transparant cursor-not-allowed hover:border-gray-200": disabled }, className),
208
- onClick,
209
- ref,
210
- "data-tooltip-id": title,
211
- "data-tooltip-content": title,
212
- ...props,
213
- children: icon ? formatIcon(icon, {
214
- stroke: strokeWidth,
215
- size: iconSize
216
- }) : props.children
217
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_tooltip.Tooltip, {
218
- id: title,
219
- className: "z-[99]"
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.jsxs)(UnstyledButton, {
1638
- "aria-label": "Options Menu",
1639
- className: cn(buttonVariants["secondary"], defaultStyling, {
1640
- "md:pr-3.5 md:pl-5": title,
1641
- "h-7 min-w-7": styleVariant === "small"
1642
- }),
1643
- disabled,
1644
- onClick: handleToggle,
1645
- children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1646
- className: "hidden md:block",
1647
- children: title
1648
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconDotsVertical, {
1649
- size: 20,
1650
- stroke: 1,
1651
- fill: "black"
1652
- })]
1653
- }), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
1654
- 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",
1655
- children: content.map((c, index) => {
1656
- const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
1657
- onClick: () => handleItemClick(c.onClick),
1658
- className: "w-full rounded-md px-4 py-2 text-left text-sm font-normal whitespace-nowrap hover:bg-gray-50",
1659
- "aria-label": "Options Menu Item",
1660
- disabled: c.disabled,
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 }) {