@wellingtonhlc/shared-ui 0.24.16 → 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(() => {
|
|
@@ -102,7 +115,7 @@ function getPointerPosition(event) {
|
|
|
102
115
|
function coerceDropPosition(position, allowedPositions) {
|
|
103
116
|
return allowedPositions.includes(position) ? position : firstAllowedPosition(allowedPositions, position);
|
|
104
117
|
}
|
|
105
|
-
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', }) {
|
|
106
119
|
const actionsContext = useContext(PageActionsContext);
|
|
107
120
|
const preferences = actionsContext?.preferences;
|
|
108
121
|
const setPageActions = actionsContext?.setActions;
|
|
@@ -117,16 +130,22 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
|
|
|
117
130
|
helpClassName,
|
|
118
131
|
helpContent,
|
|
119
132
|
helpLabel,
|
|
133
|
+
metaActions,
|
|
120
134
|
movable,
|
|
135
|
+
onShowLabelsChange,
|
|
121
136
|
onPositionChange,
|
|
122
137
|
position,
|
|
138
|
+
showLabels,
|
|
123
139
|
size,
|
|
124
140
|
};
|
|
125
141
|
const effectivePosition = resolvePageActionsPosition(propsForResolution, preferences, isMobile);
|
|
126
142
|
const effectiveAllowedPositions = getAllowedPositions(propsForResolution, preferences);
|
|
127
143
|
const effectiveMovable = resolvePageActionsMovable(propsForResolution, preferences);
|
|
128
144
|
const effectiveOnPositionChange = resolvePageActionsPositionChange(propsForResolution, preferences);
|
|
145
|
+
const effectiveShowLabels = resolvePageActionsShowLabels(propsForResolution, preferences);
|
|
146
|
+
const effectiveOnShowLabelsChange = resolvePageActionsShowLabelsChange(propsForResolution, preferences);
|
|
129
147
|
const canMove = effectiveMovable && !!effectiveOnPositionChange && effectiveAllowedPositions.length > 1;
|
|
148
|
+
const canToggleLabels = !!effectiveOnShowLabelsChange;
|
|
130
149
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
131
150
|
const [dragTarget, setDragTarget] = useState(null);
|
|
132
151
|
const [isDragging, setIsDragging] = useState(false);
|
|
@@ -134,7 +153,7 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
|
|
|
134
153
|
useLayoutEffect(() => {
|
|
135
154
|
if (!setPageActions || __fromSlot)
|
|
136
155
|
return undefined;
|
|
137
|
-
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 }));
|
|
138
157
|
return () => {
|
|
139
158
|
setPageActions(null);
|
|
140
159
|
};
|
|
@@ -148,20 +167,24 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
|
|
|
148
167
|
helpClassName,
|
|
149
168
|
helpContent,
|
|
150
169
|
helpLabel,
|
|
170
|
+
metaActions,
|
|
151
171
|
mobilePosition,
|
|
152
172
|
movable,
|
|
173
|
+
onShowLabelsChange,
|
|
153
174
|
onPositionChange,
|
|
154
175
|
position,
|
|
176
|
+
showLabels,
|
|
155
177
|
setPageActions,
|
|
156
178
|
size,
|
|
157
179
|
]);
|
|
158
180
|
if (setPageActions && !__fromSlot)
|
|
159
181
|
return null;
|
|
182
|
+
const verticalWidthClass = effectiveShowLabels ? 'w-[min(10rem,24vw)] max-w-40' : 'w-auto max-w-none';
|
|
160
183
|
const positionClasses = {
|
|
161
184
|
top: 'w-full max-w-full self-stretch border-b border-app-border bg-background-secondary p-1',
|
|
162
185
|
bottom: 'w-full border-t border-app-border bg-background-secondary p-1',
|
|
163
|
-
left: 'h-full min-h-0 self-stretch
|
|
164
|
-
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),
|
|
165
188
|
};
|
|
166
189
|
const alignClasses = {
|
|
167
190
|
start: effectivePosition === 'left' || effectivePosition === 'right' ? 'justify-start' : 'justify-start',
|
|
@@ -169,6 +192,9 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
|
|
|
169
192
|
};
|
|
170
193
|
const helpVisible = hasHelpContent(helpContent);
|
|
171
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);
|
|
172
198
|
function handleMoveMenuToggle() {
|
|
173
199
|
if (isDragging)
|
|
174
200
|
return;
|
|
@@ -218,11 +244,15 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
|
|
|
218
244
|
effectiveOnPositionChange?.(nextPosition);
|
|
219
245
|
setIsMenuOpen(false);
|
|
220
246
|
}
|
|
247
|
+
function handleToggleLabels() {
|
|
248
|
+
effectiveOnShowLabelsChange?.(!effectiveShowLabels);
|
|
249
|
+
}
|
|
221
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;
|
|
222
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;
|
|
223
|
-
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: [
|
|
224
|
-
|
|
225
|
-
|
|
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] })] }) }));
|
|
226
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] }));
|
|
227
257
|
}
|
|
228
258
|
function PageActionsDropZones({ activePosition, allowedPositions }) {
|
|
@@ -235,7 +265,12 @@ function PageActionsDropZones({ activePosition, allowedPositions }) {
|
|
|
235
265
|
function ActionsSeparator(props) {
|
|
236
266
|
return _jsx(ActionSeparatorPrimitive, { ...props });
|
|
237
267
|
}
|
|
238
|
-
|
|
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
|
+
}
|
|
239
274
|
function Root({ actions, children, className, ...props }) {
|
|
240
275
|
const actionsContext = useContext(PageActionsContext);
|
|
241
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
|
}
|