@wellingtonhlc/shared-ui 0.24.16 → 0.24.19
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/cli/check-page-actions.d.ts.map +1 -1
- package/dist/cli/check-page-actions.js +42 -0
- package/dist/components/ActionPrimitives.d.ts.map +1 -1
- package/dist/components/ActionPrimitives.js +3 -3
- package/dist/components/Page.d.ts +11 -3
- package/dist/components/Page.d.ts.map +1 -1
- package/dist/components/Page.js +47 -10
- package/dist/styles.css +21 -7
- package/package.json +1 -1
|
@@ -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
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionPrimitives.d.ts","sourceRoot":"","sources":["../../src/components/ActionPrimitives.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,KAAK,CAAC;AAC/C,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEnE,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,6BAA6B;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC3G,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,OAAO,CAAC;IACtG,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,KAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAW,EAAE,EAAE,yBAAyB,+BAapH;AAED,wBAAgB,wBAAwB,CAAC,EAAE,SAAS,EAAE,EAAE,6BAA6B,+
|
|
1
|
+
{"version":3,"file":"ActionPrimitives.d.ts","sourceRoot":"","sources":["../../src/components/ActionPrimitives.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,KAAK,CAAC;AAC/C,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEnE,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,6BAA6B;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC3G,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,OAAO,CAAC;IACtG,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,KAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAW,EAAE,EAAE,yBAAyB,+BAapH;AAED,wBAAgB,wBAAwB,CAAC,EAAE,SAAS,EAAE,EAAE,6BAA6B,+BAQpF;AAQD,eAAO,MAAM,qBAAqB,0HAiDjC,CAAC;AAIF,eAAO,MAAM,mBAAmB,wHAI/B,CAAC"}
|
|
@@ -5,7 +5,7 @@ export function ActionGroupPrimitive({ align = 'start', children, className, siz
|
|
|
5
5
|
return (_jsx("div", { className: cn('flex flex-wrap items-center', align === 'start' ? 'justify-start' : 'justify-end', size === 'sm' ? 'gap-1.5' : size === 'lg' ? 'gap-2.5' : 'gap-2', className), children: children }));
|
|
6
6
|
}
|
|
7
7
|
export function ActionSeparatorPrimitive({ className }) {
|
|
8
|
-
return _jsx("span", { "aria-hidden": "true", className: cn('bg-app-border min-h-7 w-px shrink-0 self-stretch rounded-full', className) });
|
|
8
|
+
return (_jsx("span", { "aria-hidden": "true", "data-action-separator": "true", className: cn('bg-app-border min-h-7 w-px shrink-0 self-stretch rounded-full', className) }));
|
|
9
9
|
}
|
|
10
10
|
const variantClasses = {
|
|
11
11
|
default: 'border-app-border bg-surface text-foreground-muted hover:border-[color-mix(in_srgb,var(--brand)_44%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_10%,var(--surface))] hover:text-brand hover:shadow-[0_14px_26px_-20px_color-mix(in_srgb,var(--brand)_45%,#000)]',
|
|
@@ -16,11 +16,11 @@ export const ActionButtonPrimitive = forwardRef(({ children, className, disabled
|
|
|
16
16
|
const content = label ?? children;
|
|
17
17
|
const hasText = Boolean(content);
|
|
18
18
|
const isDisabled = disabled || loading;
|
|
19
|
-
return (_jsxs("button", { ref: ref, type: type, "aria-label": tooltip, title: tooltip, disabled: isDisabled, className: cn('inline-flex cursor-pointer select-none items-center justify-center border font-semibold transition-[background-color,border-color,color,box-shadow,transform,opacity] duration-150 active:translate-y-px disabled:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color-mix(in_srgb,var(--brand)_36%,transparent)] disabled:cursor-not-allowed disabled:opacity-60', variantClasses[variant],
|
|
19
|
+
return (_jsxs("button", { ref: ref, type: type, "aria-label": tooltip, title: tooltip, disabled: isDisabled, className: cn('inline-flex min-w-0 cursor-pointer select-none items-center justify-center border font-semibold transition-[background-color,border-color,color,box-shadow,transform,opacity] duration-150 active:translate-y-px disabled:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color-mix(in_srgb,var(--brand)_36%,transparent)] disabled:cursor-not-allowed disabled:opacity-60', variantClasses[variant],
|
|
20
20
|
// Forma visual consistente: cantos arredondados (rounded-md) com e sem texto.
|
|
21
21
|
// Botoes so-icone (IconButtonPrimitive) ficam quadrados; botoes com texto
|
|
22
22
|
// recebem padding horizontal. A forma vem do pacote, nao do consumidor.
|
|
23
|
-
'rounded-md', hasText ? 'min-h-8 gap-1.5 px-3 text-[0.8125rem]' : 'size-8 p-0', highlight && variant === 'default' && 'font-bold text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))] [&_svg]:stroke-[2.6]', highlight && variant === 'primary' && 'font-bold text-[color-mix(in_srgb,var(--brand)_72%,var(--foreground))] [&_svg]:stroke-[2.6]', highlight && variant === 'danger' && 'font-bold text-[color-mix(in_srgb,var(--destructive)_86%,var(--foreground))] [&_svg]:stroke-[2.6]', loading && 'cursor-wait opacity-75', className), ...props, children: [icon && _jsx("span", { className: "inline-flex shrink-0 items-center justify-center [&_svg]:size-4", children: icon }), hasText && _jsx("span", { className: "
|
|
23
|
+
'rounded-md', hasText ? 'min-h-8 max-w-44 gap-1.5 px-3 text-[0.8125rem]' : 'size-8 p-0', highlight && variant === 'default' && 'font-bold text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))] [&_svg]:stroke-[2.6]', highlight && variant === 'primary' && 'font-bold text-[color-mix(in_srgb,var(--brand)_72%,var(--foreground))] [&_svg]:stroke-[2.6]', highlight && variant === 'danger' && 'font-bold text-[color-mix(in_srgb,var(--destructive)_86%,var(--foreground))] [&_svg]:stroke-[2.6]', loading && 'cursor-wait opacity-75', className), ...props, children: [icon && _jsx("span", { className: "inline-flex shrink-0 items-center justify-center [&_svg]:size-4", children: icon }), hasText && _jsx("span", { className: "min-w-0 max-w-full truncate", children: content })] }));
|
|
24
24
|
});
|
|
25
25
|
ActionButtonPrimitive.displayName = 'ActionButtonPrimitive';
|
|
26
26
|
export const IconButtonPrimitive = forwardRef(({ 'aria-label': ariaLabel, tooltip, ...props }, ref) => (_jsx(ActionButtonPrimitive, { ref: ref, "aria-label": ariaLabel, tooltip: tooltip ?? ariaLabel, ...props })));
|
|
@@ -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,17 @@ 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
|
+
? cn('min-h-0 flex-col content-start [&>[data-action-separator=true]]:h-px [&>[data-action-separator=true]]:min-h-0 [&>[data-action-separator=true]]:w-full [&>[data-action-separator=true]]:self-auto', effectiveShowLabels
|
|
255
|
+
? 'w-full items-stretch [&>button]:w-full [&>button]:justify-start [&>div]:w-full [&>div>button]:w-full [&>div>button]:justify-start'
|
|
256
|
+
: 'w-auto items-center')
|
|
257
|
+
: '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
258
|
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
259
|
}
|
|
228
260
|
function PageActionsDropZones({ activePosition, allowedPositions }) {
|
|
@@ -235,7 +267,12 @@ function PageActionsDropZones({ activePosition, allowedPositions }) {
|
|
|
235
267
|
function ActionsSeparator(props) {
|
|
236
268
|
return _jsx(ActionSeparatorPrimitive, { ...props });
|
|
237
269
|
}
|
|
238
|
-
|
|
270
|
+
function ActionButton({ label, tooltip, ...props }) {
|
|
271
|
+
const renderContext = useContext(PageActionsRenderContext);
|
|
272
|
+
const showLabels = renderContext?.showLabels ?? true;
|
|
273
|
+
const resolvedTooltip = tooltip ?? (typeof label === 'string' ? label : undefined);
|
|
274
|
+
return (_jsx(ActionButtonPrimitive, { label: showLabels ? label : undefined, tooltip: resolvedTooltip, ...props }));
|
|
275
|
+
}
|
|
239
276
|
function Root({ actions, children, className, ...props }) {
|
|
240
277
|
const actionsContext = useContext(PageActionsContext);
|
|
241
278
|
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
|
}
|
|
@@ -1363,6 +1366,9 @@ h2.react-datepicker__current-month {
|
|
|
1363
1366
|
.max-w-40 {
|
|
1364
1367
|
max-width: calc(var(--spacing) * 40);
|
|
1365
1368
|
}
|
|
1369
|
+
.max-w-44 {
|
|
1370
|
+
max-width: calc(var(--spacing) * 44);
|
|
1371
|
+
}
|
|
1366
1372
|
.max-w-\[22rem\] {
|
|
1367
1373
|
max-width: 22rem;
|
|
1368
1374
|
}
|
|
@@ -1378,6 +1384,9 @@ h2.react-datepicker__current-month {
|
|
|
1378
1384
|
.max-w-md {
|
|
1379
1385
|
max-width: var(--container-md);
|
|
1380
1386
|
}
|
|
1387
|
+
.max-w-none {
|
|
1388
|
+
max-width: none;
|
|
1389
|
+
}
|
|
1381
1390
|
.max-w-sm {
|
|
1382
1391
|
max-width: var(--container-sm);
|
|
1383
1392
|
}
|
|
@@ -3958,19 +3967,24 @@ h2.react-datepicker__current-month {
|
|
|
3958
3967
|
}
|
|
3959
3968
|
}
|
|
3960
3969
|
}
|
|
3961
|
-
.\[\&\>\[
|
|
3962
|
-
&>[
|
|
3970
|
+
.\[\&\>\[data-action-separator\=true\]\]\:h-px {
|
|
3971
|
+
&>[data-action-separator=true] {
|
|
3963
3972
|
height: 1px;
|
|
3964
3973
|
}
|
|
3965
3974
|
}
|
|
3966
|
-
.\[\&\>\[
|
|
3967
|
-
&>[
|
|
3975
|
+
.\[\&\>\[data-action-separator\=true\]\]\:min-h-0 {
|
|
3976
|
+
&>[data-action-separator=true] {
|
|
3968
3977
|
min-height: calc(var(--spacing) * 0);
|
|
3969
3978
|
}
|
|
3970
3979
|
}
|
|
3971
|
-
.\[\&\>\[
|
|
3972
|
-
&>[
|
|
3973
|
-
width:
|
|
3980
|
+
.\[\&\>\[data-action-separator\=true\]\]\:w-full {
|
|
3981
|
+
&>[data-action-separator=true] {
|
|
3982
|
+
width: 100%;
|
|
3983
|
+
}
|
|
3984
|
+
}
|
|
3985
|
+
.\[\&\>\[data-action-separator\=true\]\]\:self-auto {
|
|
3986
|
+
&>[data-action-separator=true] {
|
|
3987
|
+
align-self: auto;
|
|
3974
3988
|
}
|
|
3975
3989
|
}
|
|
3976
3990
|
.\[\&\>button\]\:w-full {
|