@g4rcez/components 0.0.64 → 0.0.66
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/index.css +1 -1
- package/dist/index.js +36 -36
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2279 -2245
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +36 -36
- package/dist/index.umd.js.map +1 -1
- package/dist/src/components/floating/menu.d.ts.map +1 -1
- package/dist/src/components/floating/menu.js +3 -3
- package/dist/src/components/floating/tooltip.d.ts +4 -1
- package/dist/src/components/floating/tooltip.d.ts.map +1 -1
- package/dist/src/components/floating/tooltip.js +29 -7
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/menu.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAoB,WAAW,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAA2E,MAAM,OAAO,CAAC;AAGhG,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/menu.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAoB,WAAW,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAA2E,MAAM,OAAO,CAAC;AAGhG,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA0BvC,MAAM,MAAM,SAAS,GAAG,OAAO,CAC3B;IACI,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAAC;IACrC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CACzE,CAAC;AAiKF,KAAK,aAAa,GACZ;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,GACpE;IAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEtG,eAAO,MAAM,QAAQ,kJAkCpB,CAAC;AAEF,eAAO,MAAM,IAAI;uBAjNU,KAAK,CAAC,WAAW;uBACjB,MAAM;WAClB,OAAO;YACN,OAAO;cACL,OAAO;aACR,OAAO;cACN,KAAK,CAAC,SAAS;;WACf,MAAM;;uBAPG,KAAK,CAAC,WAAW;uBACjB,MAAM;WAClB,OAAO;YACN,OAAO;cACL,OAAO;aACR,OAAO;cACN,KAAK,CAAC,SAAS;;WACK,KAAK,CAAC,YAAY;WAAS,MAAM;qDAmNrE,CAAC"}
|
|
@@ -6,7 +6,7 @@ import { ChevronRightIcon } from "lucide-react";
|
|
|
6
6
|
import React, { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
|
|
7
7
|
import { FLOATING_DELAY, TYPEAHEAD_RESET_DELAY } from "../../constants";
|
|
8
8
|
import { css } from "../../lib/dom";
|
|
9
|
-
const menuItemClassName = (highlight = "") => css("w-full min-w-36 outline-none p-2.5
|
|
9
|
+
const menuItemClassName = (highlight = "") => css("w-full min-w-36 outline-none p-2.5 items-center flex justify-between text-left", "hover:bg-primary data-[open]:bg-primary focus:bg-primary aria-expanded:opacity-80", "data-[active=true]:text-primary-foreground focus:text-primary-foreground", "first-of-type:rounded-t-lg last-of-type:rounded-b-lg", "disabled:opacity-40 disabled:cursor-not-allowed", highlight);
|
|
10
10
|
const MenuContext = createContext({
|
|
11
11
|
activeIndex: null,
|
|
12
12
|
getItemProps: () => ({}),
|
|
@@ -30,10 +30,10 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
|
|
|
30
30
|
nodeId,
|
|
31
31
|
open: isOpen,
|
|
32
32
|
transform: true,
|
|
33
|
+
strategy: "absolute",
|
|
33
34
|
onOpenChange: setIsOpen,
|
|
34
35
|
whileElementsMounted: autoUpdate,
|
|
35
36
|
placement: isNested ? "right" : "bottom-start",
|
|
36
|
-
strategy: "absolute",
|
|
37
37
|
middleware: [offset({ mainAxis: isNested ? 0 : 4, alignmentAxis: isNested ? -4 : 0 }), flip(), shift()],
|
|
38
38
|
});
|
|
39
39
|
const role = useRole(context, { role: "menu", enabled: true });
|
|
@@ -108,7 +108,7 @@ export const MenuItem = React.forwardRef(({ label, title, Right, disabled, ...pr
|
|
|
108
108
|
const item = useListItem({ label: disabled ? null : typeof label === "string" ? label : title });
|
|
109
109
|
const tree = useFloatingTree();
|
|
110
110
|
const isActive = item.index === menu.activeIndex;
|
|
111
|
-
return (_jsxs("button", { ...props, ref: useMergeRefs([item.ref, forwardedRef]), "data-active": isActive, type: "button", role: "menuitem", disabled: disabled, tabIndex: isActive ? 0 : -1, className: menuItemClassName(props.className), ...menu.getItemProps({
|
|
111
|
+
return (_jsxs("button", { ...props, ref: useMergeRefs([item.ref, forwardedRef]), "data-active": isActive, "data-open": menu.isOpen, type: "button", role: "menuitem", disabled: disabled, tabIndex: isActive ? 0 : -1, className: menuItemClassName(props.className), ...menu.getItemProps({
|
|
112
112
|
onClick(event) {
|
|
113
113
|
props.onClick?.(event);
|
|
114
114
|
tree?.events.emit("click");
|
|
@@ -4,9 +4,12 @@ import { PolymorphicProps } from "../../components/core/polymorph";
|
|
|
4
4
|
import { ComponentLike, Label, Override } from "../../types";
|
|
5
5
|
export type TooltipProps<T extends ComponentLike = "span"> = Override<PolymorphicProps<React.ComponentProps<T>, T>, {
|
|
6
6
|
title: Label;
|
|
7
|
+
hover?: boolean;
|
|
8
|
+
focus?: boolean;
|
|
7
9
|
enabled?: boolean;
|
|
10
|
+
popover?: boolean;
|
|
8
11
|
placement?: Placement;
|
|
9
12
|
followCursor?: boolean;
|
|
10
13
|
}>;
|
|
11
|
-
export declare const Tooltip: <T extends ComponentLike = "span">({
|
|
14
|
+
export declare const Tooltip: <T extends ComponentLike = "span">({ as, title, children, placement, focus, hover, enabled, popover, followCursor, ...props }: TooltipProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
12
15
|
//# sourceMappingURL=tooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAOH,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAOH,KAAK,SAAS,EAWjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAa,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAE9E,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,aAAa,GAAG,MAAM,IAAI,QAAQ,CACjE,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAC5C;IACI,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CACJ,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,aAAa,uGAW5C,YAAY,CAAC,CAAC,CAAC,4CA6DjB,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, shift, useClientPoint, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/react";
|
|
3
|
+
import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, safePolygon, shift, useClick, useClientPoint, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/react";
|
|
4
4
|
import { Fragment, useRef, useState } from "react";
|
|
5
5
|
import { Polymorph } from "../../components/core/polymorph";
|
|
6
6
|
import { FLOATING_DELAY } from "../../constants";
|
|
7
|
-
export const Tooltip = ({ children,
|
|
7
|
+
export const Tooltip = ({ as, title, children, placement, focus = true, hover = true, enabled = true, popover = true, followCursor = false, ...props }) => {
|
|
8
8
|
const [open, setOpen] = useState(false);
|
|
9
9
|
const arrowRef = useRef(null);
|
|
10
10
|
const Component = as || "span";
|
|
@@ -12,15 +12,37 @@ export const Tooltip = ({ children, followCursor = false, placement, enabled, as
|
|
|
12
12
|
open,
|
|
13
13
|
placement,
|
|
14
14
|
transform: true,
|
|
15
|
+
strategy: "absolute",
|
|
15
16
|
onOpenChange: setOpen,
|
|
16
17
|
whileElementsMounted: autoUpdate,
|
|
17
|
-
middleware: [
|
|
18
|
+
middleware: [
|
|
19
|
+
shift(),
|
|
20
|
+
offset(5),
|
|
21
|
+
flip({ fallbackAxisSideDirection: "start" }),
|
|
22
|
+
arrow({
|
|
23
|
+
padding: 5,
|
|
24
|
+
element: arrowRef,
|
|
25
|
+
}),
|
|
26
|
+
],
|
|
18
27
|
});
|
|
19
|
-
const
|
|
20
|
-
|
|
28
|
+
const hoverController = useHover(context, {
|
|
29
|
+
move: true,
|
|
30
|
+
delay: { open: FLOATING_DELAY },
|
|
31
|
+
enabled: enabled ? hover : false,
|
|
32
|
+
handleClose: popover ? safePolygon() : null,
|
|
33
|
+
});
|
|
34
|
+
const focusController = useFocus(context, { enabled: enabled ? focus : false });
|
|
35
|
+
const clickController = useClick(context, { enabled: enabled ? popover : false });
|
|
21
36
|
const dismiss = useDismiss(context, { enabled });
|
|
22
37
|
const role = useRole(context, { role: "tooltip", enabled });
|
|
23
38
|
const clientPoint = useClientPoint(context, { enabled: !!enabled && !!followCursor });
|
|
24
|
-
const { getReferenceProps, getFloatingProps } = useInteractions([
|
|
25
|
-
|
|
39
|
+
const { getReferenceProps, getFloatingProps } = useInteractions([
|
|
40
|
+
role,
|
|
41
|
+
dismiss,
|
|
42
|
+
clientPoint,
|
|
43
|
+
focus ? focusController : undefined,
|
|
44
|
+
hover ? hoverController : undefined,
|
|
45
|
+
popover ? clickController : undefined,
|
|
46
|
+
]);
|
|
47
|
+
return (_jsxs(Fragment, { children: [_jsx(Component, { ref: refs.setReference, ...getReferenceProps(props), children: title }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open && (_jsxs(Polymorph, { ...getFloatingProps(), ref: refs.setFloating, style: floatingStyles, className: "z-tooltip rounded-lg border border-tooltip-border bg-tooltip-background p-3 text-tooltip-foreground shadow-lg", children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-tooltip-background stroke-tooltip-border" }), children] })) })] }));
|
|
26
48
|
};
|