@hexdspace/react 0.1.41 → 0.1.43
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.d.ts +5 -3
- package/dist/index.js +61 -37
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -474,6 +474,7 @@ interface DialogOptions {
|
|
|
474
474
|
modal: boolean;
|
|
475
475
|
dismissible: boolean;
|
|
476
476
|
zIndex: number;
|
|
477
|
+
resolveOnEnter?: boolean;
|
|
477
478
|
}
|
|
478
479
|
interface DialogInstance {
|
|
479
480
|
id: string;
|
|
@@ -977,12 +978,13 @@ interface DialogProps<TPayload = unknown> extends Omit<React.HTMLAttributes<HTML
|
|
|
977
978
|
onDismiss?: () => void;
|
|
978
979
|
onResolve?: (result?: unknown) => void;
|
|
979
980
|
onOpenChange?: (open: boolean) => void;
|
|
981
|
+
resolveOnEnter?: boolean;
|
|
980
982
|
showClose?: boolean;
|
|
981
983
|
closeLabel?: string;
|
|
982
984
|
open?: boolean;
|
|
983
985
|
defaultOpen?: boolean;
|
|
984
986
|
}
|
|
985
|
-
declare function Dialog<TPayload>({ id, template, payload, trigger, modal, dismissible, zIndex, maxWidthPx, onDismiss, onResolve, onOpenChange, showClose, closeLabel, open, defaultOpen, chrome, className, style, ...props }: DialogProps<TPayload>): react_jsx_runtime.JSX.Element;
|
|
987
|
+
declare function Dialog<TPayload>({ id, template, payload, trigger, modal, dismissible, zIndex, maxWidthPx, onDismiss, onResolve, onOpenChange, resolveOnEnter, showClose, closeLabel, open, defaultOpen, chrome, className, style, onKeyDown, ...props }: DialogProps<TPayload>): react_jsx_runtime.JSX.Element;
|
|
986
988
|
|
|
987
989
|
type ControlLikeProps = {
|
|
988
990
|
id?: string;
|
|
@@ -1090,6 +1092,7 @@ type DropdownMenuContentProps = Omit<React.ComponentPropsWithoutRef<typeof Dropd
|
|
|
1090
1092
|
className?: string;
|
|
1091
1093
|
style?: React.CSSProperties;
|
|
1092
1094
|
ref?: React.Ref<HTMLDivElement>;
|
|
1095
|
+
onEntryFocus?: (event: Event) => void;
|
|
1093
1096
|
};
|
|
1094
1097
|
declare const dropdownMenuItemVariants: (props?: ({
|
|
1095
1098
|
inset?: boolean | null | undefined;
|
|
@@ -1101,7 +1104,6 @@ interface DropdownMenuProps extends VariantProps<typeof dropdownMenuContentVaria
|
|
|
1101
1104
|
children: React.ReactNode;
|
|
1102
1105
|
open?: boolean;
|
|
1103
1106
|
defaultOpen?: boolean;
|
|
1104
|
-
keepMounted?: boolean;
|
|
1105
1107
|
onOpenChange?: (open: boolean) => void;
|
|
1106
1108
|
hoverOpen?: boolean;
|
|
1107
1109
|
hoverCloseDelayMs?: number;
|
|
@@ -1118,7 +1120,7 @@ interface DropdownMenuProps extends VariantProps<typeof dropdownMenuContentVaria
|
|
|
1118
1120
|
style?: React.CSSProperties;
|
|
1119
1121
|
contentProps?: DropdownMenuContentProps;
|
|
1120
1122
|
}
|
|
1121
|
-
declare function DropdownMenu({ trigger, children, open, defaultOpen,
|
|
1123
|
+
declare function DropdownMenu({ trigger, children, open, defaultOpen, onOpenChange, hoverOpen, hoverCloseDelayMs, modal, side, align, sideOffset, alignOffset, collisionPadding, portalContainer, ariaLabel, ariaLabelledBy, chrome, orientation, className, style, contentProps, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
|
|
1122
1124
|
interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu$1.Item>, Omit<VariantProps<typeof dropdownMenuItemVariants>, 'orientation'> {
|
|
1123
1125
|
}
|
|
1124
1126
|
declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
|
package/dist/index.js
CHANGED
|
@@ -1686,6 +1686,7 @@ function Dialog({
|
|
|
1686
1686
|
onDismiss,
|
|
1687
1687
|
onResolve,
|
|
1688
1688
|
onOpenChange,
|
|
1689
|
+
resolveOnEnter = true,
|
|
1689
1690
|
showClose = true,
|
|
1690
1691
|
closeLabel = "Close dialog",
|
|
1691
1692
|
open: open2,
|
|
@@ -1693,6 +1694,7 @@ function Dialog({
|
|
|
1693
1694
|
chrome,
|
|
1694
1695
|
className,
|
|
1695
1696
|
style,
|
|
1697
|
+
onKeyDown,
|
|
1696
1698
|
...props
|
|
1697
1699
|
}) {
|
|
1698
1700
|
const fallbackId = React3.useId();
|
|
@@ -1734,6 +1736,39 @@ function Dialog({
|
|
|
1734
1736
|
const overlayClassName = cn(dialogOverlayClass);
|
|
1735
1737
|
const surfaceClassName = cn(dialogSurfaceVariants({ chrome }));
|
|
1736
1738
|
const panelRef = React3.useRef(null);
|
|
1739
|
+
const handleKeyDown = React3.useCallback(
|
|
1740
|
+
(event) => {
|
|
1741
|
+
onKeyDown?.(event);
|
|
1742
|
+
if (event.defaultPrevented || !resolveOnEnter) return;
|
|
1743
|
+
const isComposing = "isComposing" in event.nativeEvent ? event.nativeEvent.isComposing : false;
|
|
1744
|
+
if (event.key !== "Enter" || isComposing || event.altKey || event.ctrlKey || event.metaKey) return;
|
|
1745
|
+
if (event.shiftKey) return;
|
|
1746
|
+
const target = event.target;
|
|
1747
|
+
if (target) {
|
|
1748
|
+
if (target.isContentEditable) return;
|
|
1749
|
+
const tagName = target.tagName;
|
|
1750
|
+
if (tagName === "TEXTAREA" || tagName === "SELECT") return;
|
|
1751
|
+
if (target instanceof HTMLInputElement) {
|
|
1752
|
+
const inputType = target.type;
|
|
1753
|
+
if (!["button", "submit", "reset", "checkbox", "radio"].includes(inputType)) return;
|
|
1754
|
+
}
|
|
1755
|
+
}
|
|
1756
|
+
const defaultAction = panelRef.current?.querySelector("[data-dialog-default]");
|
|
1757
|
+
if (defaultAction) {
|
|
1758
|
+
const isDisabled = defaultAction instanceof HTMLButtonElement && defaultAction.disabled || defaultAction.getAttribute("aria-disabled") === "true";
|
|
1759
|
+
if (!isDisabled) {
|
|
1760
|
+
event.preventDefault();
|
|
1761
|
+
defaultAction.click();
|
|
1762
|
+
}
|
|
1763
|
+
return;
|
|
1764
|
+
}
|
|
1765
|
+
if (onResolve) {
|
|
1766
|
+
event.preventDefault();
|
|
1767
|
+
handleResolve(payload);
|
|
1768
|
+
}
|
|
1769
|
+
},
|
|
1770
|
+
[handleResolve, onKeyDown, onResolve, payload, resolveOnEnter]
|
|
1771
|
+
);
|
|
1737
1772
|
return /* @__PURE__ */ jsxs3(DialogPrimitive.Root, { open: open2, defaultOpen, onOpenChange: handleOpenChange, modal, children: [
|
|
1738
1773
|
trigger ? /* @__PURE__ */ jsx7(DialogPrimitive.Trigger, { asChild: true, children: trigger }) : null,
|
|
1739
1774
|
/* @__PURE__ */ jsx7(DialogPrimitive.Portal, { forceMount: true, children: /* @__PURE__ */ jsx7(AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
@@ -1776,6 +1811,7 @@ function Dialog({
|
|
|
1776
1811
|
panelRef.current?.focus();
|
|
1777
1812
|
});
|
|
1778
1813
|
},
|
|
1814
|
+
onKeyDown: handleKeyDown,
|
|
1779
1815
|
...props,
|
|
1780
1816
|
children: /* @__PURE__ */ jsx7(
|
|
1781
1817
|
motion.div,
|
|
@@ -1864,7 +1900,15 @@ var ConfirmDialog = (props) => {
|
|
|
1864
1900
|
p.message ? /* @__PURE__ */ jsx8(DialogPrimitive2.Description, { className: "mt-2 text-sm opacity-80", children: p.message }) : null,
|
|
1865
1901
|
/* @__PURE__ */ jsxs4("div", { className: "mt-5 flex items-center justify-end gap-4", children: [
|
|
1866
1902
|
/* @__PURE__ */ jsx8(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx8(Button, { variant: "secondary", children: p.cancelText ?? "Cancel" }) }),
|
|
1867
|
-
/* @__PURE__ */ jsx8(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx8(
|
|
1903
|
+
/* @__PURE__ */ jsx8(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx8(
|
|
1904
|
+
Button,
|
|
1905
|
+
{
|
|
1906
|
+
variant: confirmVariant,
|
|
1907
|
+
"data-dialog-default": true,
|
|
1908
|
+
onClick: () => props.onResolve?.({ confirmed: true }),
|
|
1909
|
+
children: p.confirmText ?? "Confirm"
|
|
1910
|
+
}
|
|
1911
|
+
) })
|
|
1868
1912
|
] })
|
|
1869
1913
|
] });
|
|
1870
1914
|
};
|
|
@@ -1948,7 +1992,7 @@ var OpenDialogUseCase = class {
|
|
|
1948
1992
|
}
|
|
1949
1993
|
async execute(cmd) {
|
|
1950
1994
|
const id = uuid();
|
|
1951
|
-
const options = cmd.options
|
|
1995
|
+
const options = { ...getDefaultOptions(), ...cmd.options };
|
|
1952
1996
|
if (!options.zIndex) {
|
|
1953
1997
|
options.zIndex = 2e3;
|
|
1954
1998
|
}
|
|
@@ -1967,7 +2011,8 @@ function getDefaultOptions() {
|
|
|
1967
2011
|
return {
|
|
1968
2012
|
modal: true,
|
|
1969
2013
|
dismissible: true,
|
|
1970
|
-
zIndex: 2500
|
|
2014
|
+
zIndex: 2500,
|
|
2015
|
+
resolveOnEnter: true
|
|
1971
2016
|
};
|
|
1972
2017
|
}
|
|
1973
2018
|
|
|
@@ -2120,6 +2165,7 @@ var DialogHost = () => {
|
|
|
2120
2165
|
payload: dialog.payload,
|
|
2121
2166
|
modal: dialog.options.modal,
|
|
2122
2167
|
dismissible: dialog.options.dismissible,
|
|
2168
|
+
resolveOnEnter: dialog.options.resolveOnEnter,
|
|
2123
2169
|
zIndex: dialog.options.zIndex + index,
|
|
2124
2170
|
open: !isClosing,
|
|
2125
2171
|
onResolve: (result) => scheduleClose(dialog.id, "resolve", result),
|
|
@@ -3325,10 +3371,6 @@ var VimHandleKeyUseCase = class {
|
|
|
3325
3371
|
const scopeId = this.query.getActiveScope();
|
|
3326
3372
|
if (!scopeId) return;
|
|
3327
3373
|
this.selection.exitSelectMode(scopeId);
|
|
3328
|
-
const activeKey = this.query.getActiveRegion(scopeId);
|
|
3329
|
-
if (activeKey) {
|
|
3330
|
-
this.afterRegionChange(activeKey);
|
|
3331
|
-
}
|
|
3332
3374
|
const st = this.stateByScope.get(scopeId);
|
|
3333
3375
|
if (st) {
|
|
3334
3376
|
st.count = "";
|
|
@@ -4531,7 +4573,6 @@ function DropdownMenu({
|
|
|
4531
4573
|
children,
|
|
4532
4574
|
open: open2,
|
|
4533
4575
|
defaultOpen,
|
|
4534
|
-
keepMounted = false,
|
|
4535
4576
|
onOpenChange,
|
|
4536
4577
|
hoverOpen = false,
|
|
4537
4578
|
hoverCloseDelayMs = 50,
|
|
@@ -4637,15 +4678,7 @@ function DropdownMenu({
|
|
|
4637
4678
|
);
|
|
4638
4679
|
const onPointerDownOutside = (event) => {
|
|
4639
4680
|
restContentProps.onPointerDownOutside?.(event);
|
|
4640
|
-
if (keepMounted) {
|
|
4641
|
-
const target = event.target;
|
|
4642
|
-
const isTriggerEvent = target instanceof Node && triggerRef.current?.contains(target);
|
|
4643
|
-
if (!resolvedOpen || isTriggerEvent) {
|
|
4644
|
-
event.preventDefault();
|
|
4645
|
-
}
|
|
4646
|
-
}
|
|
4647
4681
|
};
|
|
4648
|
-
const keepMountedClassName = keepMounted && !resolvedOpen ? "pointer-events-none" : void 0;
|
|
4649
4682
|
const initialMotionState = {
|
|
4650
4683
|
opacity: 0,
|
|
4651
4684
|
scale: 0.98,
|
|
@@ -4658,22 +4691,12 @@ function DropdownMenu({
|
|
|
4658
4691
|
x: 0,
|
|
4659
4692
|
y: 0
|
|
4660
4693
|
};
|
|
4661
|
-
const closedMotionState = {
|
|
4662
|
-
opacity: 0,
|
|
4663
|
-
scale: 0.98,
|
|
4664
|
-
x: "var(--menu-x)",
|
|
4665
|
-
y: "var(--menu-y)"
|
|
4666
|
-
};
|
|
4667
|
-
const motionEase = keepMounted ? resolvedOpen ? "easeOut" : "easeIn" : "easeOut";
|
|
4668
4694
|
const onInteractOutside = (event) => {
|
|
4669
4695
|
restContentProps.onInteractOutside?.(event);
|
|
4670
|
-
|
|
4671
|
-
|
|
4672
|
-
|
|
4673
|
-
|
|
4674
|
-
event.preventDefault();
|
|
4675
|
-
}
|
|
4676
|
-
}
|
|
4696
|
+
};
|
|
4697
|
+
const onEntryFocus = (event) => {
|
|
4698
|
+
restContentProps.onEntryFocus?.(event);
|
|
4699
|
+
event.preventDefault();
|
|
4677
4700
|
};
|
|
4678
4701
|
const resolvedContentProps = hoverOpen ? {
|
|
4679
4702
|
...restContentProps,
|
|
@@ -4692,11 +4715,14 @@ function DropdownMenu({
|
|
|
4692
4715
|
closeTimer.clear();
|
|
4693
4716
|
},
|
|
4694
4717
|
onPointerDownOutside,
|
|
4718
|
+
onEntryFocus,
|
|
4695
4719
|
onInteractOutside
|
|
4696
4720
|
} : {
|
|
4697
4721
|
...restContentProps,
|
|
4698
4722
|
onKeyDown: handleContentKeyDown,
|
|
4699
|
-
|
|
4723
|
+
onEntryFocus,
|
|
4724
|
+
onPointerDownOutside,
|
|
4725
|
+
onInteractOutside
|
|
4700
4726
|
};
|
|
4701
4727
|
const contentNode = /* @__PURE__ */ jsx22(
|
|
4702
4728
|
DropdownMenuPrimitive.Content,
|
|
@@ -4714,17 +4740,15 @@ function DropdownMenu({
|
|
|
4714
4740
|
children: /* @__PURE__ */ jsx22(
|
|
4715
4741
|
motion4.div,
|
|
4716
4742
|
{
|
|
4717
|
-
"aria-hidden": keepMounted ? !resolvedOpen : void 0,
|
|
4718
4743
|
className: cn(
|
|
4719
4744
|
dropdownMenuContentVariants({ chrome, orientation }),
|
|
4720
|
-
keepMountedClassName,
|
|
4721
4745
|
className,
|
|
4722
4746
|
contentClassName
|
|
4723
4747
|
),
|
|
4724
4748
|
ref: composedContentRef,
|
|
4725
4749
|
initial: initialMotionState,
|
|
4726
|
-
animate:
|
|
4727
|
-
exit:
|
|
4750
|
+
animate: openMotionState,
|
|
4751
|
+
exit: {
|
|
4728
4752
|
opacity: 0,
|
|
4729
4753
|
scale: 0.98,
|
|
4730
4754
|
x: "var(--menu-x)",
|
|
@@ -4733,7 +4757,7 @@ function DropdownMenu({
|
|
|
4733
4757
|
},
|
|
4734
4758
|
transition: {
|
|
4735
4759
|
duration: motionDuration,
|
|
4736
|
-
ease:
|
|
4760
|
+
ease: "easeOut"
|
|
4737
4761
|
},
|
|
4738
4762
|
style: { ...style, ...contentStyle },
|
|
4739
4763
|
children
|
|
@@ -4743,7 +4767,7 @@ function DropdownMenu({
|
|
|
4743
4767
|
);
|
|
4744
4768
|
return /* @__PURE__ */ jsx22(DropdownMenuOrientationContext.Provider, { value: resolvedItemsOrientation, children: /* @__PURE__ */ jsxs11(DropdownMenuPrimitive.Root, { open: resolvedOpen, onOpenChange: handleOpenChange, modal, children: [
|
|
4745
4769
|
/* @__PURE__ */ jsx22(DropdownMenuPrimitive.Trigger, { asChild: true, children: resolvedTrigger }),
|
|
4746
|
-
/* @__PURE__ */ jsx22(DropdownMenuPrimitive.Portal, { forceMount: true, container: portalContainer, children:
|
|
4770
|
+
/* @__PURE__ */ jsx22(DropdownMenuPrimitive.Portal, { forceMount: true, container: portalContainer, children: /* @__PURE__ */ jsx22(AnimatePresence4, { children: resolvedOpen ? contentNode : null }) })
|
|
4747
4771
|
] }) });
|
|
4748
4772
|
}
|
|
4749
4773
|
var DropdownMenuItem = React13.forwardRef(
|