@g4rcez/components 2.0.42 → 2.1.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.
- package/dist/components/floating/modal.d.ts.map +1 -1
- package/dist/components/floating/modal.jsx +27 -27
- package/dist/config/context.d.ts +2 -0
- package/dist/config/context.d.ts.map +1 -1
- package/dist/config/context.js +2 -1
- package/dist/hooks/use-components-provider.d.ts +1 -0
- package/dist/hooks/use-components-provider.d.ts.map +1 -1
- package/dist/hooks/use-components-provider.jsx +1 -0
- package/dist/hooks/use-floating-ref.d.ts +2 -0
- package/dist/hooks/use-floating-ref.d.ts.map +1 -0
- package/dist/hooks/use-floating-ref.js +6 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2477 -2475
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +12 -12
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EASL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAmB,eAAe,EAA4F,MAAM,cAAc,CAAC;AAE1J,OAAO,KAA+G,MAAM,OAAO,CAAC;AAGpI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EASL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAmB,eAAe,EAA4F,MAAM,cAAc,CAAC;AAE1J,OAAO,KAA+G,MAAM,OAAO,CAAC;AAGpI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAKnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAuD9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC/B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC9E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GAAG,OAAO,CAAC;IACV,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,cAAc,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAChC,CAAC,CACH,CAAC;AAgFF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WA1GN,KAAK;gBAAc,MAAM;;UAC3B,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;qBACT,OAAO;UAClB,QAAQ;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eApBqB,MAAM;YAAU,KAAK;;UAClE,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;qBACT,OAAO;UAClB,QAAQ;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CA0UjC,CAAC"}
|
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import { XIcon } from "lucide-react";
|
|
5
|
-
import {
|
|
5
|
+
import { motion, MotionConfig, useMotionValue, animate } from "motion/react";
|
|
6
6
|
import { Slot } from "../core/slot";
|
|
7
7
|
import React, { forwardRef, Fragment, useEffect, useId, useImperativeHandle, useRef } from "react";
|
|
8
8
|
import { useMediaQuery } from "../../hooks/use-media-query";
|
|
9
9
|
import { css, mergeRefs } from "../../lib/dom";
|
|
10
|
+
import { useFloatingRef } from "../../hooks/use-floating-ref";
|
|
10
11
|
const animationDuration = "500ms";
|
|
11
12
|
const drawerLeft = {
|
|
12
13
|
exit: { x: ["0%", "-30%"], opacity: 0, animationDuration },
|
|
@@ -92,6 +93,7 @@ const fetchPosition = (isDesktop, forceType, propsType, propsPosition) => {
|
|
|
92
93
|
};
|
|
93
94
|
const noop = [];
|
|
94
95
|
export const Modal = forwardRef(({ open, title, footer, asChild, trigger, children, onChange, ariaTitle, className, bodyClassName, resizer = true, animated = true, closable = true, forceType = false, layoutId = undefined, overlayClassName = "", type: _type = "dialog", position: propsPosition, overlayClickClose = false, closeOnFocusOut = false, interactions: outInteractions = noop, ...props }, externalRef) => {
|
|
96
|
+
const root = useFloatingRef();
|
|
95
97
|
const innerContent = useRef(null);
|
|
96
98
|
const removeScrollRef = useRef(null);
|
|
97
99
|
const headingId = useId();
|
|
@@ -162,12 +164,11 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
|
|
|
162
164
|
{trigger ? (<Component ref={floating.refs.setReference} {...interactions.getReferenceProps()} layoutId={layoutId} type="button">
|
|
163
165
|
{Trigger}
|
|
164
166
|
</Component>) : null}
|
|
165
|
-
<FloatingPortal preserveTabOrder>
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
<
|
|
169
|
-
<
|
|
170
|
-
<motion.div {...props} {...(title
|
|
167
|
+
<FloatingPortal preserveTabOrder root={root}>
|
|
168
|
+
{open ? (<FloatingOverlay lockScroll className={css("inset-0 flex isolate bg-floating-overlay/70 z-overlay h-[100dvh] !overflow-clip", type === "drawer" ? "" : "items-start justify-center lg:p-10 pt-10", overlayClassName)}>
|
|
169
|
+
<MotionConfig reducedMotion={animated ? "user" : "always"}>
|
|
170
|
+
<FloatingFocusManager guards modal closeOnFocusOut={closeOnFocusOut} context={floating.context}>
|
|
171
|
+
<motion.div {...props} {...(title
|
|
171
172
|
? {
|
|
172
173
|
"aria-labelledby": headingId,
|
|
173
174
|
"aria-describedby": descriptionId,
|
|
@@ -177,13 +178,13 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
|
|
|
177
178
|
ref: mergeRefs(floating.refs.setFloating, removeScrollRef),
|
|
178
179
|
className: css(variants({ position, type }), className, "isolate overscroll-contain"),
|
|
179
180
|
})} exit="exit" layout={true} animate="enter" initial="initial" layoutId={layoutId} variants={animation} data-component="modal" style={type === "drawer" ? { width: floatingSize } : { height: floatingSize, y: sheetY }}>
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
181
|
+
{useResizer && resizer ? (<Draggable onChange={onChange} value={floatingSize} sheet={type === "sheet"} position={position} parent={floating.refs.floating}/>) : null}
|
|
182
|
+
{title ? (<motion.header {...draggableMotionProps} className="relative w-full isolate">
|
|
183
|
+
{title ? (<h2 id={headingId} className="block px-8 pb-2 text-3xl font-medium leading-relaxed border-b select-text border-floating-border">
|
|
184
|
+
{title}
|
|
185
|
+
</h2>) : null}
|
|
186
|
+
</motion.header>) : null}
|
|
187
|
+
<motion.section ref={innerContent} data-component="modal-body" className={css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName)} onTouchEnd={async () => {
|
|
187
188
|
scroll.set(undefined);
|
|
188
189
|
scrollInitial.set(undefined);
|
|
189
190
|
if (isDragging.current) {
|
|
@@ -223,19 +224,18 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
|
|
|
223
224
|
}
|
|
224
225
|
scroll.set(y);
|
|
225
226
|
}}>
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
</AnimatePresence>
|
|
227
|
+
{children}
|
|
228
|
+
</motion.section>
|
|
229
|
+
{footer ? (<footer className="px-8 pt-4 w-full border-t select-text border-floating-border">{footer}</footer>) : null}
|
|
230
|
+
{closable ? (<nav className="absolute top-1 right-4 z-floating">
|
|
231
|
+
<button type="button" onClick={onClose} className="p-1 opacity-70 transition-colors hover:opacity-100 hover:text-danger focus:text-danger">
|
|
232
|
+
<XIcon />
|
|
233
|
+
</button>
|
|
234
|
+
</nav>) : null}
|
|
235
|
+
</motion.div>
|
|
236
|
+
</FloatingFocusManager>
|
|
237
|
+
</MotionConfig>
|
|
238
|
+
</FloatingOverlay>) : null}
|
|
239
239
|
</FloatingPortal>
|
|
240
240
|
</Fragment>);
|
|
241
241
|
});
|
package/dist/config/context.d.ts
CHANGED
|
@@ -7,11 +7,13 @@ export type ContextProps = Partial<{
|
|
|
7
7
|
map: Partial<Translations>;
|
|
8
8
|
locale: Locales | undefined;
|
|
9
9
|
parser: typeof parsers.hsla;
|
|
10
|
+
rootFloating?: HTMLElement | null;
|
|
10
11
|
}>;
|
|
11
12
|
export declare const Context: import("react").Context<Partial<{
|
|
12
13
|
tweaks: Tweaks;
|
|
13
14
|
map: Translations;
|
|
14
15
|
locale: Locales | undefined;
|
|
15
16
|
parser: typeof parsers.hsla;
|
|
17
|
+
floatingRef?: HTMLElement | null;
|
|
16
18
|
}>>;
|
|
17
19
|
//# sourceMappingURL=context.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/config/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAiB,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE9D,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/config/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAiB,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE9D,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC;IACjC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACxB,GAAG,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACnC,CAAC,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;GAMlB,CAAC"}
|
package/dist/config/context.js
CHANGED
|
@@ -4,8 +4,9 @@ import { parsers } from "../styles/design-tokens";
|
|
|
4
4
|
import { defaultTranslations } from "./default-translations";
|
|
5
5
|
import { defaultTweaks } from "./default-tweaks";
|
|
6
6
|
export const Context = createContext({
|
|
7
|
-
tweaks: defaultTweaks,
|
|
8
7
|
parser: parsers.hsla,
|
|
8
|
+
tweaks: defaultTweaks,
|
|
9
|
+
floatingRef: undefined,
|
|
9
10
|
map: defaultTranslations,
|
|
10
11
|
locale: undefined,
|
|
11
12
|
});
|
|
@@ -9,6 +9,7 @@ export type ContextType = Partial<{
|
|
|
9
9
|
map: Translations;
|
|
10
10
|
locale: Locales | undefined;
|
|
11
11
|
parser: typeof parsers.hsla;
|
|
12
|
+
floatingRef?: HTMLElement | null;
|
|
12
13
|
}>;
|
|
13
14
|
export declare const ComponentsProvider: (props: PropsWithChildren<ContextProps>) => React.JSX.Element;
|
|
14
15
|
//# sourceMappingURL=use-components-provider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-components-provider.d.ts","sourceRoot":"","sources":["../../src/hooks/use-components-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAW,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAuB,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnF,OAAO,EAAiB,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-components-provider.d.ts","sourceRoot":"","sources":["../../src/hooks/use-components-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAW,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAuB,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnF,OAAO,EAAiB,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,YAAY,CAAC;IAClB,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAClC,CAAC,CAAC;AAEH,eAAO,MAAM,kBAAkB,GAAI,OAAO,iBAAiB,CAAC,YAAY,CAAC,sBAYxE,CAAC"}
|
|
@@ -7,6 +7,7 @@ import { defaultTweaks } from "../config/default-tweaks";
|
|
|
7
7
|
export const ComponentsProvider = (props) => {
|
|
8
8
|
const memoMap = useMemo(() => ({
|
|
9
9
|
locale: props.locale,
|
|
10
|
+
floatingRef: props.rootFloating,
|
|
10
11
|
tweaks: { ...defaultTweaks, ...props.tweaks },
|
|
11
12
|
parser: props.parser || parsers.hsla,
|
|
12
13
|
map: { ...defaultTranslations, ...props.map },
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-floating-ref.d.ts","sourceRoot":"","sources":["../../src/hooks/use-floating-ref.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,+BAG1B,CAAC"}
|