@wellingtonhlc/shared-ui 0.24.15 → 0.24.17
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"check-page-actions.d.ts","sourceRoot":"","sources":["../../src/cli/check-page-actions.ts"],"names":[],"mappings":";AAQA,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"check-page-actions.d.ts","sourceRoot":"","sources":["../../src/cli/check-page-actions.ts"],"names":[],"mappings":";AAQA,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAoFD,wBAAgB,wBAAwB,CAAC,OAAO,SAAgB,GAAG,sBAAsB,CA2DxF;AAED,wBAAgB,yBAAyB,CAAC,IAAI,WAAwB,0BAerE"}
|
|
@@ -30,6 +30,47 @@ function collectMatches(text, pattern, message, root, filePath, errors) {
|
|
|
30
30
|
errors.push(`${normalizePath(root, filePath)}:${line}: ${message}`);
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
+
function collectPageActionButtonsWithoutLabel(root, filePath, text, errors) {
|
|
34
|
+
const tagStart = '<Page.ActionButton';
|
|
35
|
+
let searchIndex = 0;
|
|
36
|
+
while (searchIndex < text.length) {
|
|
37
|
+
const startIndex = text.indexOf(tagStart, searchIndex);
|
|
38
|
+
if (startIndex === -1)
|
|
39
|
+
return;
|
|
40
|
+
let cursor = startIndex + tagStart.length;
|
|
41
|
+
let expressionDepth = 0;
|
|
42
|
+
let quote = null;
|
|
43
|
+
while (cursor < text.length) {
|
|
44
|
+
const char = text[cursor];
|
|
45
|
+
const previousChar = cursor > 0 ? text[cursor - 1] : '';
|
|
46
|
+
if (quote) {
|
|
47
|
+
if (char === quote && previousChar !== '\\')
|
|
48
|
+
quote = null;
|
|
49
|
+
cursor += 1;
|
|
50
|
+
continue;
|
|
51
|
+
}
|
|
52
|
+
if (char === '"' || char === "'" || char === '`') {
|
|
53
|
+
quote = char;
|
|
54
|
+
cursor += 1;
|
|
55
|
+
continue;
|
|
56
|
+
}
|
|
57
|
+
if (char === '{')
|
|
58
|
+
expressionDepth += 1;
|
|
59
|
+
if (char === '}')
|
|
60
|
+
expressionDepth = Math.max(0, expressionDepth - 1);
|
|
61
|
+
if (char === '>' && expressionDepth === 0)
|
|
62
|
+
break;
|
|
63
|
+
cursor += 1;
|
|
64
|
+
}
|
|
65
|
+
const tag = text.slice(startIndex, cursor + 1);
|
|
66
|
+
if (!/\blabel\s*=/.test(tag)) {
|
|
67
|
+
const before = text.slice(0, startIndex);
|
|
68
|
+
const line = before.split(/\r?\n/).length;
|
|
69
|
+
errors.push(`${normalizePath(root, filePath)}:${line}: Page.ActionButton deve declarar label`);
|
|
70
|
+
}
|
|
71
|
+
searchIndex = cursor + 1;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
33
74
|
export function checkPageActionsContract(rootDir = process.cwd()) {
|
|
34
75
|
const root = path.resolve(rootDir);
|
|
35
76
|
const sourceRoot = fs.existsSync(path.join(root, 'src')) ? path.join(root, 'src') : root;
|
|
@@ -43,6 +84,7 @@ export function checkPageActionsContract(rootDir = process.cwd()) {
|
|
|
43
84
|
collectMatches(text, /<AppLayout\b[\s\S]*?\bactions\s*=\s*{\s*<>/g, 'AppLayout.actions nao deve receber Fragment como root; use Page.Actions ou componente *Actions', root, filePath, errors);
|
|
44
85
|
collectMatches(text, /<AppLayout\b[\s\S]*?\bactions\s*=\s*{\s*<div\b/g, 'AppLayout.actions nao deve receber div como root; use Page.Actions ou componente *Actions', root, filePath, errors);
|
|
45
86
|
collectMatches(text, /<AppLayout\b[\s\S]*?\bactions\s*=\s*{\s*<Page\.ActionButton\b/g, 'AppLayout.actions nao deve receber Page.ActionButton solto; envolva em Page.Actions', root, filePath, errors);
|
|
87
|
+
collectPageActionButtonsWithoutLabel(root, filePath, text, errors);
|
|
46
88
|
}
|
|
47
89
|
return { errors, scannedFiles, sourceRoot };
|
|
48
90
|
}
|
|
@@ -12,23 +12,30 @@ export interface PageActionsProps {
|
|
|
12
12
|
allowedPositions?: PageActionsPosition[];
|
|
13
13
|
movable?: boolean;
|
|
14
14
|
onPositionChange?: (position: PageActionsPosition) => void;
|
|
15
|
+
onShowLabelsChange?: (showLabels: boolean) => void;
|
|
15
16
|
align?: PageActionsAlign;
|
|
16
17
|
size?: PageActionsSize;
|
|
18
|
+
showLabels?: boolean;
|
|
17
19
|
helpContent?: ReactNode;
|
|
18
20
|
helpLabel?: string;
|
|
19
21
|
helpClassName?: string;
|
|
22
|
+
metaActions?: ReactNode;
|
|
20
23
|
__fromSlot?: boolean;
|
|
21
24
|
}
|
|
22
25
|
export type PageActionsElement = ReactElement<PageActionsProps, typeof Actions>;
|
|
23
26
|
export type PageActionsSeparatorProps = ActionSeparatorPrimitiveProps;
|
|
24
|
-
export
|
|
27
|
+
export interface PageActionButtonProps extends Omit<ActionButtonPrimitiveProps, 'label'> {
|
|
28
|
+
label: ReactNode;
|
|
29
|
+
}
|
|
25
30
|
export interface PageActionsPreferences {
|
|
26
31
|
allowedPositions?: PageActionsPosition[];
|
|
27
32
|
defaultPosition?: PageActionsPosition;
|
|
28
33
|
mobilePosition?: PageActionsPosition;
|
|
29
34
|
movable?: boolean;
|
|
30
35
|
onPositionChange?: (position: PageActionsPosition) => void;
|
|
36
|
+
onShowLabelsChange?: (showLabels: boolean) => void;
|
|
31
37
|
position?: PageActionsPosition;
|
|
38
|
+
showLabels?: boolean;
|
|
32
39
|
}
|
|
33
40
|
export interface PageActionsHelpContentProps {
|
|
34
41
|
children?: ReactNode;
|
|
@@ -37,8 +44,9 @@ export interface PageActionsHelpContentProps {
|
|
|
37
44
|
title?: ReactNode;
|
|
38
45
|
}
|
|
39
46
|
declare function ActionsHelpContent({ children, className, items, title }: PageActionsHelpContentProps): import("react").JSX.Element;
|
|
40
|
-
declare function Actions({ align, __fromSlot, children, className, defaultPosition, mobilePosition, allowedPositions, helpClassName, helpContent, helpLabel, movable, onPositionChange, position, size, }: PageActionsProps): import("react").JSX.Element | null;
|
|
47
|
+
declare function Actions({ align, __fromSlot, children, className, defaultPosition, mobilePosition, allowedPositions, helpClassName, helpContent, helpLabel, metaActions, movable, onShowLabelsChange, onPositionChange, position, showLabels, size, }: PageActionsProps): import("react").JSX.Element | null;
|
|
41
48
|
declare function ActionsSeparator(props: PageActionsSeparatorProps): import("react").JSX.Element;
|
|
49
|
+
declare function ActionButton({ label, tooltip, ...props }: PageActionButtonProps): import("react").JSX.Element;
|
|
42
50
|
interface PageRootProps extends HTMLAttributes<HTMLElement> {
|
|
43
51
|
children: ReactNode;
|
|
44
52
|
actions?: PageActionsElement;
|
|
@@ -72,7 +80,7 @@ export declare const Page: {
|
|
|
72
80
|
Description: typeof Description;
|
|
73
81
|
Actions: typeof Actions;
|
|
74
82
|
ActionsHelpContent: typeof ActionsHelpContent;
|
|
75
|
-
ActionButton:
|
|
83
|
+
ActionButton: typeof ActionButton;
|
|
76
84
|
ActionsSeparator: typeof ActionsSeparator;
|
|
77
85
|
ActionsProvider: typeof ActionsProvider;
|
|
78
86
|
ActionsSlot: typeof ActionsSlot;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../src/components/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../src/components/Page.tsx"],"names":[],"mappings":"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"}
|
package/dist/components/Page.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { createContext, cloneElement, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
|
3
|
-
import { CircleHelpIcon, GripVerticalIcon } from 'lucide-react';
|
|
2
|
+
import { Children, createContext, cloneElement, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
|
3
|
+
import { CaptionsIcon, CaptionsOffIcon, CircleHelpIcon, GripVerticalIcon } from 'lucide-react';
|
|
4
4
|
import { ActionButtonPrimitive, ActionGroupPrimitive, ActionSeparatorPrimitive, } from './ActionPrimitives';
|
|
5
5
|
import { Tooltip } from './Tooltip';
|
|
6
6
|
import { cn } from '../utils/cn';
|
|
7
7
|
const PageActionsContext = createContext(null);
|
|
8
|
+
const PageActionsRenderContext = createContext(null);
|
|
8
9
|
const allPositions = ['left', 'top', 'right', 'bottom'];
|
|
9
10
|
const positionLabels = {
|
|
10
11
|
left: 'Esquerda',
|
|
@@ -33,6 +34,12 @@ function getHelpSide(position) {
|
|
|
33
34
|
function hasHelpContent(helpContent) {
|
|
34
35
|
return helpContent !== null && helpContent !== undefined && helpContent !== false && helpContent !== '';
|
|
35
36
|
}
|
|
37
|
+
function isPageActionsMetaElement(child) {
|
|
38
|
+
return Boolean(child
|
|
39
|
+
&& typeof child === 'object'
|
|
40
|
+
&& 'type' in child
|
|
41
|
+
&& child.type.pageActionMeta);
|
|
42
|
+
}
|
|
36
43
|
function getAllowedPositions(props, preferences) {
|
|
37
44
|
const allowed = props.allowedPositions ?? preferences?.allowedPositions ?? allPositions;
|
|
38
45
|
return allowed.filter((position, index, array) => allPositions.includes(position) && array.indexOf(position) === index);
|
|
@@ -60,6 +67,12 @@ function resolvePageActionsMovable(props, preferences) {
|
|
|
60
67
|
function resolvePageActionsPositionChange(props, preferences) {
|
|
61
68
|
return props.onPositionChange ?? preferences?.onPositionChange;
|
|
62
69
|
}
|
|
70
|
+
function resolvePageActionsShowLabels(props, preferences) {
|
|
71
|
+
return props.showLabels ?? preferences?.showLabels ?? true;
|
|
72
|
+
}
|
|
73
|
+
function resolvePageActionsShowLabelsChange(props, preferences) {
|
|
74
|
+
return props.onShowLabelsChange ?? preferences?.onShowLabelsChange;
|
|
75
|
+
}
|
|
63
76
|
function useIsMobile() {
|
|
64
77
|
const [isMobile, setIsMobile] = useState(false);
|
|
65
78
|
useEffect(() => {
|
|
@@ -78,10 +91,14 @@ function useIsMobile() {
|
|
|
78
91
|
return isMobile;
|
|
79
92
|
}
|
|
80
93
|
function getPointerPosition(event) {
|
|
81
|
-
const
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
const
|
|
94
|
+
const workspace = event.currentTarget instanceof HTMLElement
|
|
95
|
+
? event.currentTarget.closest('[data-page-actions-workspace]')
|
|
96
|
+
: null;
|
|
97
|
+
const rect = workspace?.getBoundingClientRect();
|
|
98
|
+
const width = rect?.width || window.innerWidth || 1;
|
|
99
|
+
const height = rect?.height || window.innerHeight || 1;
|
|
100
|
+
const x = rect ? event.clientX - rect.left : event.clientX;
|
|
101
|
+
const y = rect ? event.clientY - rect.top : event.clientY;
|
|
85
102
|
const leftDistance = x;
|
|
86
103
|
const rightDistance = width - x;
|
|
87
104
|
const topDistance = y;
|
|
@@ -98,7 +115,7 @@ function getPointerPosition(event) {
|
|
|
98
115
|
function coerceDropPosition(position, allowedPositions) {
|
|
99
116
|
return allowedPositions.includes(position) ? position : firstAllowedPosition(allowedPositions, position);
|
|
100
117
|
}
|
|
101
|
-
function Actions({ align = 'start', __fromSlot = false, children, className, defaultPosition, mobilePosition, allowedPositions, helpClassName, helpContent, helpLabel = 'Ajuda da tela', movable, onPositionChange, position, size = 'md', }) {
|
|
118
|
+
function Actions({ align = 'start', __fromSlot = false, children, className, defaultPosition, mobilePosition, allowedPositions, helpClassName, helpContent, helpLabel = 'Ajuda da tela', metaActions, movable, onShowLabelsChange, onPositionChange, position, showLabels, size = 'md', }) {
|
|
102
119
|
const actionsContext = useContext(PageActionsContext);
|
|
103
120
|
const preferences = actionsContext?.preferences;
|
|
104
121
|
const setPageActions = actionsContext?.setActions;
|
|
@@ -113,16 +130,22 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
|
|
|
113
130
|
helpClassName,
|
|
114
131
|
helpContent,
|
|
115
132
|
helpLabel,
|
|
133
|
+
metaActions,
|
|
116
134
|
movable,
|
|
135
|
+
onShowLabelsChange,
|
|
117
136
|
onPositionChange,
|
|
118
137
|
position,
|
|
138
|
+
showLabels,
|
|
119
139
|
size,
|
|
120
140
|
};
|
|
121
141
|
const effectivePosition = resolvePageActionsPosition(propsForResolution, preferences, isMobile);
|
|
122
142
|
const effectiveAllowedPositions = getAllowedPositions(propsForResolution, preferences);
|
|
123
143
|
const effectiveMovable = resolvePageActionsMovable(propsForResolution, preferences);
|
|
124
144
|
const effectiveOnPositionChange = resolvePageActionsPositionChange(propsForResolution, preferences);
|
|
145
|
+
const effectiveShowLabels = resolvePageActionsShowLabels(propsForResolution, preferences);
|
|
146
|
+
const effectiveOnShowLabelsChange = resolvePageActionsShowLabelsChange(propsForResolution, preferences);
|
|
125
147
|
const canMove = effectiveMovable && !!effectiveOnPositionChange && effectiveAllowedPositions.length > 1;
|
|
148
|
+
const canToggleLabels = !!effectiveOnShowLabelsChange;
|
|
126
149
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
127
150
|
const [dragTarget, setDragTarget] = useState(null);
|
|
128
151
|
const [isDragging, setIsDragging] = useState(false);
|
|
@@ -130,7 +153,7 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
|
|
|
130
153
|
useLayoutEffect(() => {
|
|
131
154
|
if (!setPageActions || __fromSlot)
|
|
132
155
|
return undefined;
|
|
133
|
-
setPageActions(_jsx(Actions, { align: align, allowedPositions: allowedPositions, className: className, defaultPosition: defaultPosition, helpClassName: helpClassName, helpContent: helpContent, helpLabel: helpLabel, mobilePosition: mobilePosition, movable: movable, onPositionChange: onPositionChange, position: position, size: size, __fromSlot: true, children: children }));
|
|
156
|
+
setPageActions(_jsx(Actions, { align: align, allowedPositions: allowedPositions, className: className, defaultPosition: defaultPosition, helpClassName: helpClassName, helpContent: helpContent, helpLabel: helpLabel, metaActions: metaActions, mobilePosition: mobilePosition, movable: movable, onShowLabelsChange: onShowLabelsChange, onPositionChange: onPositionChange, position: position, showLabels: showLabels, size: size, __fromSlot: true, children: children }));
|
|
134
157
|
return () => {
|
|
135
158
|
setPageActions(null);
|
|
136
159
|
};
|
|
@@ -144,20 +167,24 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
|
|
|
144
167
|
helpClassName,
|
|
145
168
|
helpContent,
|
|
146
169
|
helpLabel,
|
|
170
|
+
metaActions,
|
|
147
171
|
mobilePosition,
|
|
148
172
|
movable,
|
|
173
|
+
onShowLabelsChange,
|
|
149
174
|
onPositionChange,
|
|
150
175
|
position,
|
|
176
|
+
showLabels,
|
|
151
177
|
setPageActions,
|
|
152
178
|
size,
|
|
153
179
|
]);
|
|
154
180
|
if (setPageActions && !__fromSlot)
|
|
155
181
|
return null;
|
|
182
|
+
const verticalWidthClass = effectiveShowLabels ? 'w-[min(10rem,24vw)] max-w-40' : 'w-auto max-w-none';
|
|
156
183
|
const positionClasses = {
|
|
157
184
|
top: 'w-full max-w-full self-stretch border-b border-app-border bg-background-secondary p-1',
|
|
158
185
|
bottom: 'w-full border-t border-app-border bg-background-secondary p-1',
|
|
159
|
-
left: 'h-full min-h-0 self-stretch
|
|
160
|
-
right: 'h-full min-h-0 self-stretch
|
|
186
|
+
left: cn('h-full min-h-0 self-stretch flex-none flex-col items-stretch border-r border-app-border bg-background-secondary p-1', verticalWidthClass),
|
|
187
|
+
right: cn('h-full min-h-0 self-stretch flex-none flex-col items-stretch border-l border-app-border bg-background-secondary p-1', verticalWidthClass),
|
|
161
188
|
};
|
|
162
189
|
const alignClasses = {
|
|
163
190
|
start: effectivePosition === 'left' || effectivePosition === 'right' ? 'justify-start' : 'justify-start',
|
|
@@ -165,6 +192,9 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
|
|
|
165
192
|
};
|
|
166
193
|
const helpVisible = hasHelpContent(helpContent);
|
|
167
194
|
const isVertical = effectivePosition === 'left' || effectivePosition === 'right';
|
|
195
|
+
const childrenArray = Children.toArray(children);
|
|
196
|
+
const mainChildren = childrenArray.filter((child) => !isPageActionsMetaElement(child));
|
|
197
|
+
const metaChildren = childrenArray.filter(isPageActionsMetaElement);
|
|
168
198
|
function handleMoveMenuToggle() {
|
|
169
199
|
if (isDragging)
|
|
170
200
|
return;
|
|
@@ -214,9 +244,15 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
|
|
|
214
244
|
effectiveOnPositionChange?.(nextPosition);
|
|
215
245
|
setIsMenuOpen(false);
|
|
216
246
|
}
|
|
247
|
+
function handleToggleLabels() {
|
|
248
|
+
effectiveOnShowLabelsChange?.(!effectiveShowLabels);
|
|
249
|
+
}
|
|
217
250
|
const helpButton = helpVisible ? (_jsx("div", { className: cn('flex shrink-0', isVertical && 'w-full justify-center'), children: _jsx(Tooltip, { className: cn('max-w-[22rem] px-3 py-2', helpClassName), content: helpContent, delayDuration: 120, openOnClick: true, side: getHelpSide(effectivePosition), children: _jsx(ActionButtonPrimitive, { "aria-label": helpLabel, icon: _jsx(CircleHelpIcon, { "aria-hidden": "true" }), tooltip: helpLabel }) }) })) : null;
|
|
251
|
+
const labelToggleButton = canToggleLabels ? (_jsx(ActionButtonPrimitive, { "aria-pressed": effectiveShowLabels, "aria-label": effectiveShowLabels ? 'Ocultar labels das acoes' : 'Mostrar labels das acoes', icon: effectiveShowLabels ? _jsx(CaptionsOffIcon, { "aria-hidden": "true" }) : _jsx(CaptionsIcon, { "aria-hidden": "true" }), tooltip: effectiveShowLabels ? 'Ocultar labels das acoes' : 'Mostrar labels das acoes', onClick: handleToggleLabels })) : null;
|
|
218
252
|
const moveButton = canMove ? (_jsxs("div", { className: cn('relative flex shrink-0', isVertical && 'w-full justify-end'), children: [_jsx(ActionButtonPrimitive, { "aria-haspopup": "menu", "aria-label": "Mover barra de acoes", "aria-expanded": isMenuOpen, className: cn('touch-none [&]:cursor-grab [&_*]:cursor-grab active:[&]:cursor-grabbing active:[&_*]:cursor-grabbing', isDragging && '[&]:cursor-grabbing [&_*]:cursor-grabbing'), icon: _jsx(GripVerticalIcon, { "aria-hidden": "true" }), tooltip: "Mover barra de acoes", onClick: handleMoveMenuToggle, onKeyDown: handleMoveKeyDown, onPointerCancel: handleMovePointerCancel, onPointerDown: handleMovePointerDown, onPointerMove: handleMovePointerMove, onPointerUp: handleMovePointerUp }), isMenuOpen ? (_jsx("div", { role: "menu", className: cn('border-app-border bg-surface text-foreground absolute z-40 min-w-36 rounded-md border p-1 text-xs shadow-lg', isVertical ? 'left-full top-0 ml-2' : 'right-0 top-full mt-2'), children: effectiveAllowedPositions.map((nextPosition) => (_jsx(PageActionsMoveOption, { active: nextPosition === effectivePosition, label: positionLabels[nextPosition], onSelect: handleSelectPosition, position: nextPosition }, nextPosition))) })) : null] })) : null;
|
|
219
|
-
const actions = (_jsxs("div", { className: cn('flex min-h-0 min-w-0 gap-2', isVertical ? 'h-full w-full flex-col' : 'w-full items-center'), children: [
|
|
253
|
+
const actions = (_jsx(PageActionsRenderContext.Provider, { value: { showLabels: effectiveShowLabels }, children: _jsxs("div", { className: cn('flex min-h-0 min-w-0 gap-2', isVertical ? 'h-full w-full flex-col' : 'w-full items-center'), children: [_jsx(ActionGroupPrimitive, { align: align, size: size, className: cn('min-w-0 flex-1', isVertical
|
|
254
|
+
? 'min-h-0 w-full flex-col items-stretch content-start [&>button]:w-full [&>button]:justify-start [&>[role=separator]]:h-px [&>[role=separator]]:min-h-0 [&>[role=separator]]:w-auto [&>div]:w-full [&>div>button]:w-full [&>div>button]:justify-start'
|
|
255
|
+
: 'overflow-x-auto overflow-y-hidden', alignClasses[align]), children: mainChildren }), _jsxs("div", { className: cn('flex shrink-0 gap-2', isVertical ? 'w-full flex-col items-end' : 'ml-auto items-center'), children: [helpButton, metaActions, metaChildren, labelToggleButton, moveButton] })] }) }));
|
|
220
256
|
return (_jsxs("div", { className: cn('flex min-w-0', positionClasses[effectivePosition], isVertical ? 'flex-col' : 'items-center', className), children: [actions, isDragging ? _jsx(PageActionsDropZones, { activePosition: dragTarget ?? effectivePosition, allowedPositions: effectiveAllowedPositions }) : null] }));
|
|
221
257
|
}
|
|
222
258
|
function PageActionsDropZones({ activePosition, allowedPositions }) {
|
|
@@ -229,7 +265,12 @@ function PageActionsDropZones({ activePosition, allowedPositions }) {
|
|
|
229
265
|
function ActionsSeparator(props) {
|
|
230
266
|
return _jsx(ActionSeparatorPrimitive, { ...props });
|
|
231
267
|
}
|
|
232
|
-
|
|
268
|
+
function ActionButton({ label, tooltip, ...props }) {
|
|
269
|
+
const renderContext = useContext(PageActionsRenderContext);
|
|
270
|
+
const showLabels = renderContext?.showLabels ?? true;
|
|
271
|
+
const resolvedTooltip = tooltip ?? (typeof label === 'string' ? label : undefined);
|
|
272
|
+
return (_jsx(ActionButtonPrimitive, { label: showLabels ? label : undefined, tooltip: resolvedTooltip, ...props }));
|
|
273
|
+
}
|
|
233
274
|
function Root({ actions, children, className, ...props }) {
|
|
234
275
|
const actionsContext = useContext(PageActionsContext);
|
|
235
276
|
const isMobile = useIsMobile();
|
package/dist/styles.css
CHANGED
|
@@ -1336,6 +1336,9 @@ h2.react-datepicker__current-month {
|
|
|
1336
1336
|
.w-\[min\(10rem\,24vw\)\] {
|
|
1337
1337
|
width: min(10rem, 24vw);
|
|
1338
1338
|
}
|
|
1339
|
+
.w-auto {
|
|
1340
|
+
width: auto;
|
|
1341
|
+
}
|
|
1339
1342
|
.w-fit {
|
|
1340
1343
|
width: fit-content;
|
|
1341
1344
|
}
|
|
@@ -1378,6 +1381,9 @@ h2.react-datepicker__current-month {
|
|
|
1378
1381
|
.max-w-md {
|
|
1379
1382
|
max-width: var(--container-md);
|
|
1380
1383
|
}
|
|
1384
|
+
.max-w-none {
|
|
1385
|
+
max-width: none;
|
|
1386
|
+
}
|
|
1381
1387
|
.max-w-sm {
|
|
1382
1388
|
max-width: var(--container-sm);
|
|
1383
1389
|
}
|
|
@@ -3983,6 +3989,21 @@ h2.react-datepicker__current-month {
|
|
|
3983
3989
|
justify-content: flex-start;
|
|
3984
3990
|
}
|
|
3985
3991
|
}
|
|
3992
|
+
.\[\&\>div\]\:w-full {
|
|
3993
|
+
&>div {
|
|
3994
|
+
width: 100%;
|
|
3995
|
+
}
|
|
3996
|
+
}
|
|
3997
|
+
.\[\&\>div\>button\]\:w-full {
|
|
3998
|
+
&>div>button {
|
|
3999
|
+
width: 100%;
|
|
4000
|
+
}
|
|
4001
|
+
}
|
|
4002
|
+
.\[\&\>div\>button\]\:justify-start {
|
|
4003
|
+
&>div>button {
|
|
4004
|
+
justify-content: flex-start;
|
|
4005
|
+
}
|
|
4006
|
+
}
|
|
3986
4007
|
.\[\&\>h2\]\:h-auto {
|
|
3987
4008
|
&>h2 {
|
|
3988
4009
|
height: auto;
|