@a-type/ui 6.1.7 → 6.1.9
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/dialog/Dialog.module.css +2 -2
- package/dist/components/layouts/PageContent.module.css +2 -2
- package/dist/components/liveUpdateTextField/LiveUpdateTextField.js +0 -1
- package/dist/components/liveUpdateTextField/LiveUpdateTextField.js.map +1 -1
- package/dist/components/primitives/menus.module.css +1 -1
- package/dist/components/quickAction/QuickAction.d.ts +2 -2
- package/dist/components/quickAction/QuickAction.js +31 -10
- package/dist/components/quickAction/QuickAction.js.map +1 -1
- package/dist/components/quickAction/QuickAction.module.css +2 -2
- package/dist/components/slider/Slider.module.css +2 -2
- package/package.json +1 -1
- package/src/components/dialog/Dialog.module.css +2 -2
- package/src/components/layouts/PageContent.module.css +2 -2
- package/src/components/liveUpdateTextField/LiveUpdateTextField.tsx +0 -2
- package/src/components/primitives/menus.module.css +1 -1
- package/src/components/quickAction/QuickAction.module.css +2 -2
- package/src/components/quickAction/QuickAction.tsx +52 -12
- package/src/components/slider/Slider.module.css +2 -2
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
transition: all var(--m-dur) var(--m-ease);
|
|
27
27
|
--shadow-dir: 1;
|
|
28
28
|
@apply --mx-shadow;
|
|
29
|
-
--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-
|
|
30
|
-
var(--m-shadow-
|
|
29
|
+
--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-lg-y))
|
|
30
|
+
var(--m-shadow-lg-blur) var(--m-shadow-lg-spread) var(--m-shadow-lg-color);
|
|
31
31
|
@apply --mx-bg(var(--m-surface-ambient-bg));
|
|
32
32
|
@apply --mx-borderColor(var(--m-gray-heavy));
|
|
33
33
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LiveUpdateTextField.js","sourceRoot":"","sources":["../../../src/components/liveUpdateTextField/LiveUpdateTextField.tsx"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"LiveUpdateTextField.js","sourceRoot":"","sources":["../../../src/components/liveUpdateTextField/LiveUpdateTextField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAMN,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,EAAc,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAwBnD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,mBAAmB,CAAC,EAUrC;QAVqC,EAC/D,GAAG,EACH,KAAK,EACL,QAAQ,EACR,UAAU,GAAG,GAAG,EAChB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,OAEsB,EADvB,IAAI,cATwD,mFAU/D,CADO;IAEP,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC9D,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEhC,MAAM,WAAW,GAAG,WAAW,CAC9B,CAAC,EAAsD,EAAE,EAAE;QAC1D,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,CAAC,CAAC;QACd,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;IAC9B,CAAC,EACD,CAAC,OAAO,CAAC,CACT,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC7B,CAAC,EAAsD,EAAE,EAAE;QAC1D,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,EAAE,CAAC,CAAC;QACb,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;QAC9B,sDAAsD;QACtD,yCAAyC;QACzC,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACvB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,YAAY,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACP,eAAe,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;QAC9B,CAAC;QACD,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;IAC3B,CAAC,EACD,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,CAAC,CACvC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;YAC3B,OAAO;QACR,CAAC;QACD,eAAe,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,kDAAkD;IAClD,MAAM,iBAAiB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAAE,UAAU,CAAC,EAClD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACtB,CAAC;IAEF,qDAAqD;IACrD,MAAM,iBAAiB,GAAG,WAAW,CACpC,CAAC,KAAa,EAAE,EAAE;QACjB,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,iBAAiB,CAAC,KAAK,CAAC,CAAC;QACzB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;IAC1B,CAAC,EACD,CAAC,iBAAiB,CAAC,CACnB,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACd,OAAO,CACN,KAAC,QAAQ,kBACR,GAAG,EAAE,GAAU,EACf,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,YAAY,EACnB,aAAa,EAAE,iBAAiB,EAChC,QAAQ,UACJ,IAAI,EACP,CACF,CAAC;IACH,CAAC;SAAM,CAAC;QACP,OAAO,CACN,KAAC,KAAK,kBACL,GAAG,EAAE,GAAU,EACf,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,YAAY,EACnB,aAAa,EAAE,iBAAiB,EAChC,IAAI,EAAE,IAAI,IACN,IAAI,EACP,CACF,CAAC;IACH,CAAC;AACF,CAAC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DialogPopupProps, DialogRootProps } from '@base-ui/react/dialog';
|
|
2
2
|
import { RefObject } from 'react';
|
|
3
3
|
import { ButtonProps } from '../button/Button.js';
|
|
4
|
-
export declare const QuickActionRoot: ({ children, ...props }: Omit<DialogRootProps, "children"> & {
|
|
4
|
+
export declare const QuickActionRoot: ({ children, onOpenChange, ...props }: Omit<DialogRootProps, "children"> & {
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export type QuickActionTriggerProps = ButtonProps;
|
|
@@ -11,7 +11,7 @@ interface QuickActionContentProps extends DialogPopupProps {
|
|
|
11
11
|
align?: 'center' | 'start' | 'end';
|
|
12
12
|
ref?: RefObject<HTMLDivElement>;
|
|
13
13
|
}
|
|
14
|
-
export declare const QuickAction: (({ children, ...props }: Omit<DialogRootProps, "children"> & {
|
|
14
|
+
export declare const QuickAction: (({ children, onOpenChange, ...props }: Omit<DialogRootProps, "children"> & {
|
|
15
15
|
children?: React.ReactNode;
|
|
16
16
|
}) => import("react/jsx-runtime").JSX.Element) & {
|
|
17
17
|
Trigger: ({ className, emphasis, children, ref, ...props }: QuickActionTriggerProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -12,27 +12,48 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { Dialog, } from '@base-ui/react/dialog';
|
|
14
14
|
import clsx from 'clsx';
|
|
15
|
-
import { createContext, useContext, useId, useRef } from 'react';
|
|
16
|
-
import { useSize } from '../../hooks.js';
|
|
15
|
+
import { createContext, useCallback, useContext, useEffect, useId, useRef, } from 'react';
|
|
17
16
|
import useMergedRef from '../../hooks/useMergedRef.js';
|
|
18
17
|
import { useMonitor, useValueMonitor, ValueMonitor, } from '../../systems/ValueMonitor.js';
|
|
19
18
|
import { Button } from '../button/Button.js';
|
|
20
19
|
import cls from './QuickAction.module.css';
|
|
21
20
|
const QuickActionIdContext = createContext('qab');
|
|
22
|
-
const TriggerSizeContext = createContext(
|
|
21
|
+
const TriggerSizeContext = createContext({
|
|
22
|
+
monitor: new ValueMonitor({ width: 0, height: 0 }),
|
|
23
|
+
onRemeasure: () => () => { },
|
|
24
|
+
});
|
|
23
25
|
export const QuickActionRoot = (_a) => {
|
|
24
|
-
var { children } = _a, props = __rest(_a, ["children"]);
|
|
26
|
+
var { children, onOpenChange } = _a, props = __rest(_a, ["children", "onOpenChange"]);
|
|
25
27
|
const id = useId();
|
|
26
28
|
const triggerSizeMonitor = useValueMonitor({ width: 0, height: 0 });
|
|
27
|
-
|
|
29
|
+
const remeasureListener = useRef(() => { });
|
|
30
|
+
const onRemeasure = useCallback((cb) => {
|
|
31
|
+
remeasureListener.current = cb;
|
|
32
|
+
return () => {
|
|
33
|
+
remeasureListener.current = () => { };
|
|
34
|
+
};
|
|
35
|
+
}, []);
|
|
36
|
+
return (_jsx(TriggerSizeContext.Provider, { value: {
|
|
37
|
+
monitor: triggerSizeMonitor,
|
|
38
|
+
onRemeasure,
|
|
39
|
+
}, children: _jsx(Dialog.Root, Object.assign({ onOpenChange: (open, details) => {
|
|
40
|
+
remeasureListener.current();
|
|
41
|
+
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open, details);
|
|
42
|
+
} }, props, { children: _jsx(QuickActionIdContext.Provider, { value: id.replace(/:/g, ''), children: children }) })) }));
|
|
28
43
|
};
|
|
29
44
|
const QuickActionTrigger = (_a) => {
|
|
30
45
|
var { className, emphasis = 'primary', children, ref } = _a, props = __rest(_a, ["className", "emphasis", "children", "ref"]);
|
|
31
46
|
const layoutId = useContext(QuickActionIdContext);
|
|
32
|
-
const sizeMonitor = useContext(TriggerSizeContext);
|
|
33
|
-
const measureRef =
|
|
34
|
-
|
|
35
|
-
|
|
47
|
+
const { monitor: sizeMonitor, onRemeasure } = useContext(TriggerSizeContext);
|
|
48
|
+
const measureRef = useRef(null);
|
|
49
|
+
useEffect(() => onRemeasure(() => {
|
|
50
|
+
const el = measureRef.current;
|
|
51
|
+
if (el) {
|
|
52
|
+
console.log('remeasuring trigger size', el.getBoundingClientRect());
|
|
53
|
+
const rect = el.getBoundingClientRect();
|
|
54
|
+
sizeMonitor.set({ width: rect.width, height: rect.height });
|
|
55
|
+
}
|
|
56
|
+
}), [onRemeasure, sizeMonitor]);
|
|
36
57
|
const finalRef = useMergedRef(ref, measureRef);
|
|
37
58
|
return (_jsx(Dialog.Trigger, Object.assign({}, props, { ref: finalRef, render: (_a) => {
|
|
38
59
|
var { color: _ } = _a, composed = __rest(_a, ["color"]);
|
|
@@ -47,7 +68,7 @@ const QuickActionContent = (_a) => {
|
|
|
47
68
|
const innerRef = useRef(null);
|
|
48
69
|
const finalRef = useMergedRef(innerRef, ref);
|
|
49
70
|
const layoutId = useContext(QuickActionIdContext);
|
|
50
|
-
const triggerSizeMonitor = useContext(TriggerSizeContext);
|
|
71
|
+
const { monitor: triggerSizeMonitor } = useContext(TriggerSizeContext);
|
|
51
72
|
useMonitor(triggerSizeMonitor, (size) => {
|
|
52
73
|
if (innerRef.current) {
|
|
53
74
|
const style = innerRef.current.style;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuickAction.js","sourceRoot":"","sources":["../../../src/components/quickAction/QuickAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACN,MAAM,GAGN,MAAM,uBAAuB,CAAC;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,
|
|
1
|
+
{"version":3,"file":"QuickAction.js","sourceRoot":"","sources":["../../../src/components/quickAction/QuickAction.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
transition-timing-function: var(--m-ease-loose);
|
|
12
12
|
|
|
13
13
|
position: fixed;
|
|
14
|
-
contain:
|
|
14
|
+
contain: content;
|
|
15
15
|
|
|
16
|
-
@apply --mx-shadow(var(--m-shadow-
|
|
16
|
+
@apply --mx-shadow(var(--m-shadow-md));
|
|
17
17
|
@apply --mx-surface-ambient;
|
|
18
18
|
padding: 0;
|
|
19
19
|
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
|
|
82
82
|
&:active {
|
|
83
83
|
@apply --mx-bg(var(--m-tint-light));
|
|
84
|
-
--mx-shadow-value: var(--m-shadow-
|
|
84
|
+
--mx-shadow-value: var(--m-shadow-md);
|
|
85
85
|
--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
|
|
86
86
|
}
|
|
87
87
|
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
|
|
92
92
|
&:focus-visible {
|
|
93
93
|
@apply --mx-bg(var(--m-tint-light));
|
|
94
|
-
--mx-shadow-value: var(--m-shadow-
|
|
94
|
+
--mx-shadow-value: var(--m-shadow-md);
|
|
95
95
|
--mx-ring-value: --fn-focus-ring();
|
|
96
96
|
}
|
|
97
97
|
|
package/package.json
CHANGED
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
transition: all var(--m-dur) var(--m-ease);
|
|
27
27
|
--shadow-dir: 1;
|
|
28
28
|
@apply --mx-shadow;
|
|
29
|
-
--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-
|
|
30
|
-
var(--m-shadow-
|
|
29
|
+
--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-lg-y))
|
|
30
|
+
var(--m-shadow-lg-blur) var(--m-shadow-lg-spread) var(--m-shadow-lg-color);
|
|
31
31
|
@apply --mx-bg(var(--m-surface-ambient-bg));
|
|
32
32
|
@apply --mx-borderColor(var(--m-gray-heavy));
|
|
33
33
|
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
transition-timing-function: var(--m-ease-loose);
|
|
12
12
|
|
|
13
13
|
position: fixed;
|
|
14
|
-
contain:
|
|
14
|
+
contain: content;
|
|
15
15
|
|
|
16
|
-
@apply --mx-shadow(var(--m-shadow-
|
|
16
|
+
@apply --mx-shadow(var(--m-shadow-md));
|
|
17
17
|
@apply --mx-surface-ambient;
|
|
18
18
|
padding: 0;
|
|
19
19
|
|
|
@@ -4,8 +4,15 @@ import {
|
|
|
4
4
|
DialogRootProps,
|
|
5
5
|
} from '@base-ui/react/dialog';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
|
-
import {
|
|
8
|
-
|
|
7
|
+
import {
|
|
8
|
+
createContext,
|
|
9
|
+
RefObject,
|
|
10
|
+
useCallback,
|
|
11
|
+
useContext,
|
|
12
|
+
useEffect,
|
|
13
|
+
useId,
|
|
14
|
+
useRef,
|
|
15
|
+
} from 'react';
|
|
9
16
|
import useMergedRef from '../../hooks/useMergedRef.js';
|
|
10
17
|
import {
|
|
11
18
|
useMonitor,
|
|
@@ -17,21 +24,44 @@ import cls from './QuickAction.module.css';
|
|
|
17
24
|
|
|
18
25
|
const QuickActionIdContext = createContext<string>('qab');
|
|
19
26
|
|
|
20
|
-
const TriggerSizeContext = createContext<
|
|
21
|
-
ValueMonitor<{ width: number; height: number }
|
|
22
|
-
|
|
27
|
+
const TriggerSizeContext = createContext<{
|
|
28
|
+
monitor: ValueMonitor<{ width: number; height: number }>;
|
|
29
|
+
onRemeasure: (cb: () => void) => () => void;
|
|
30
|
+
}>({
|
|
31
|
+
monitor: new ValueMonitor({ width: 0, height: 0 }),
|
|
32
|
+
onRemeasure: () => () => {},
|
|
33
|
+
});
|
|
23
34
|
|
|
24
35
|
export const QuickActionRoot = ({
|
|
25
36
|
children,
|
|
37
|
+
onOpenChange,
|
|
26
38
|
...props
|
|
27
39
|
}: Omit<DialogRootProps, 'children'> & {
|
|
28
40
|
children?: React.ReactNode;
|
|
29
41
|
}) => {
|
|
30
42
|
const id = useId();
|
|
31
43
|
const triggerSizeMonitor = useValueMonitor({ width: 0, height: 0 });
|
|
44
|
+
const remeasureListener = useRef<() => void>(() => {});
|
|
45
|
+
const onRemeasure = useCallback((cb: () => void) => {
|
|
46
|
+
remeasureListener.current = cb;
|
|
47
|
+
return () => {
|
|
48
|
+
remeasureListener.current = () => {};
|
|
49
|
+
};
|
|
50
|
+
}, []);
|
|
32
51
|
return (
|
|
33
|
-
<TriggerSizeContext.Provider
|
|
34
|
-
|
|
52
|
+
<TriggerSizeContext.Provider
|
|
53
|
+
value={{
|
|
54
|
+
monitor: triggerSizeMonitor,
|
|
55
|
+
onRemeasure,
|
|
56
|
+
}}
|
|
57
|
+
>
|
|
58
|
+
<Dialog.Root
|
|
59
|
+
onOpenChange={(open, details) => {
|
|
60
|
+
remeasureListener.current();
|
|
61
|
+
onOpenChange?.(open, details);
|
|
62
|
+
}}
|
|
63
|
+
{...props}
|
|
64
|
+
>
|
|
35
65
|
<QuickActionIdContext.Provider value={id.replace(/:/g, '')}>
|
|
36
66
|
{children}
|
|
37
67
|
</QuickActionIdContext.Provider>
|
|
@@ -49,10 +79,20 @@ const QuickActionTrigger = ({
|
|
|
49
79
|
...props
|
|
50
80
|
}: QuickActionTriggerProps) => {
|
|
51
81
|
const layoutId = useContext(QuickActionIdContext);
|
|
52
|
-
const sizeMonitor = useContext(TriggerSizeContext);
|
|
53
|
-
const measureRef =
|
|
54
|
-
|
|
55
|
-
|
|
82
|
+
const { monitor: sizeMonitor, onRemeasure } = useContext(TriggerSizeContext);
|
|
83
|
+
const measureRef = useRef<HTMLButtonElement>(null);
|
|
84
|
+
useEffect(
|
|
85
|
+
() =>
|
|
86
|
+
onRemeasure(() => {
|
|
87
|
+
const el = measureRef.current;
|
|
88
|
+
if (el) {
|
|
89
|
+
console.log('remeasuring trigger size', el.getBoundingClientRect());
|
|
90
|
+
const rect = el.getBoundingClientRect();
|
|
91
|
+
sizeMonitor.set({ width: rect.width, height: rect.height });
|
|
92
|
+
}
|
|
93
|
+
}),
|
|
94
|
+
[onRemeasure, sizeMonitor],
|
|
95
|
+
);
|
|
56
96
|
const finalRef = useMergedRef(ref, measureRef);
|
|
57
97
|
return (
|
|
58
98
|
<Dialog.Trigger
|
|
@@ -93,7 +133,7 @@ const QuickActionContent = ({
|
|
|
93
133
|
const innerRef = useRef<HTMLDivElement>(null);
|
|
94
134
|
const finalRef = useMergedRef(innerRef, ref);
|
|
95
135
|
const layoutId = useContext(QuickActionIdContext);
|
|
96
|
-
const triggerSizeMonitor = useContext(TriggerSizeContext);
|
|
136
|
+
const { monitor: triggerSizeMonitor } = useContext(TriggerSizeContext);
|
|
97
137
|
useMonitor(triggerSizeMonitor, (size) => {
|
|
98
138
|
if (innerRef.current) {
|
|
99
139
|
const style = innerRef.current.style;
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
|
|
82
82
|
&:active {
|
|
83
83
|
@apply --mx-bg(var(--m-tint-light));
|
|
84
|
-
--mx-shadow-value: var(--m-shadow-
|
|
84
|
+
--mx-shadow-value: var(--m-shadow-md);
|
|
85
85
|
--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
|
|
86
86
|
}
|
|
87
87
|
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
|
|
92
92
|
&:focus-visible {
|
|
93
93
|
@apply --mx-bg(var(--m-tint-light));
|
|
94
|
-
--mx-shadow-value: var(--m-shadow-
|
|
94
|
+
--mx-shadow-value: var(--m-shadow-md);
|
|
95
95
|
--mx-ring-value: --fn-focus-ring();
|
|
96
96
|
}
|
|
97
97
|
|