@wellingtonhlc/shared-ui 0.24.10 → 0.24.15
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/README.md +1 -0
- package/dist/components/AppShell.js +2 -2
- package/dist/components/Page.d.ts.map +1 -1
- package/dist/components/Page.js +9 -3
- package/dist/styles.css +34 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -321,6 +321,7 @@ Tabela de historico:
|
|
|
321
321
|
|
|
322
322
|
| Versao | Data | Tipo | Resumo | Validacao |
|
|
323
323
|
|--------|------|------|--------|-----------|
|
|
324
|
+
| `0.24.11` | 2026-06-20 | Patch | Mantem o botao de ajuda antes das acoes da pagina para evitar que fique oculto em barras horizontais com overflow. | `npm run check`. |
|
|
324
325
|
| `0.24.10` | 2026-06-20 | Patch | Documenta o uso de `Page.ActionsProvider`, preferencias de posicao, slots e consumo pos-publicacao com `@latest`. | `npm run check`. |
|
|
325
326
|
| `0.24.9` | 2026-06-20 | Patch | Estabiliza o pacote publicado de `Page.Actions` movel para consumo em aplicacoes React. | `npm run typecheck`; `npm run build`; builds de consumidores. |
|
|
326
327
|
| `0.24.8` | 2026-06-20 | Patch | Corrige a renderizacao de `Page.Actions` em slots clonando o componente com marcador interno de slot. | `npm run typecheck`; `npm run test`; `npm run build`. |
|
|
@@ -31,9 +31,9 @@ TopbarRoot.displayName = 'AppShell.Topbar';
|
|
|
31
31
|
export const Topbar = Object.assign(TopbarRoot, {
|
|
32
32
|
Button: TopbarButton,
|
|
33
33
|
});
|
|
34
|
-
const Main = forwardRef(({ children, className, contentPaddingClassName, contentMode = 'default', disableContentPadding = false, scrollable = true, }, ref) => {
|
|
34
|
+
const Main = forwardRef(({ children, className, contentPaddingClassName = 'p-3', contentMode = 'default', disableContentPadding = false, scrollable = true, }, ref) => {
|
|
35
35
|
const isFullscreen = contentMode === 'fullscreen';
|
|
36
|
-
return (_jsx("main", { ref: ref, className: cn('flex h-full min-h-0 w-full flex-1 flex-col bg-background', !isFullscreen && 'overflow-x-hidden
|
|
36
|
+
return (_jsx("main", { ref: ref, className: cn('flex h-full min-h-0 w-full flex-1 flex-col bg-background', !isFullscreen && 'overflow-x-hidden', contentMode === 'default' && 'flex flex-col gap-3', contentMode === 'fluid' && 'flex flex-col gap-3 overflow-y-hidden', contentMode === 'fullscreen' && 'overflow-hidden p-0', !isFullscreen && !disableContentPadding && contentPaddingClassName, !isFullscreen && (scrollable ? 'overflow-y-auto' : 'overflow-y-hidden'), className), children: children }));
|
|
37
37
|
});
|
|
38
38
|
Main.displayName = 'AppShell.Main';
|
|
39
39
|
export const AppShell = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../src/components/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,KAAK,0BAA0B,EAC/B,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,6BAA6B,EACnC,MAAM,oBAAoB,CAAC;AAI5B,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtE,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAChD,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,gBAAgB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,gBAAgB,EAAE,OAAO,OAAO,CAAC,CAAC;AAChF,MAAM,MAAM,yBAAyB,GAAG,6BAA6B,CAAC;AACtE,MAAM,MAAM,qBAAqB,GAAG,0BAA0B,CAAC;AAU/D,MAAM,WAAW,sBAAsB;IACrC,gBAAgB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACzC,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC;
|
|
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
|
@@ -12,6 +12,12 @@ const positionLabels = {
|
|
|
12
12
|
right: 'Direita',
|
|
13
13
|
bottom: 'Rodape',
|
|
14
14
|
};
|
|
15
|
+
function PageActionsMoveOption({ active, label, onSelect, position }) {
|
|
16
|
+
function handleClick() {
|
|
17
|
+
onSelect(position);
|
|
18
|
+
}
|
|
19
|
+
return (_jsx("button", { type: "button", role: "menuitemradio", "aria-checked": active, className: cn('hover:bg-background-secondary flex w-full cursor-pointer items-center rounded px-2 py-1.5 text-left', active && 'font-semibold text-brand'), onClick: handleClick, children: label }));
|
|
20
|
+
}
|
|
15
21
|
function ActionsHelpContent({ children, className, items, title }) {
|
|
16
22
|
return (_jsxs("div", { className: cn('max-w-[22rem] space-y-2 text-xs leading-5 [overflow-wrap:anywhere]', className), children: [title && _jsx("p", { className: "font-semibold text-foreground", children: title }), children && _jsx("div", { className: "text-foreground-muted", children: children }), items?.length ? (_jsx("ul", { className: "list-disc space-y-1 pl-4 text-foreground-muted", children: items.map((item, index) => (_jsx("li", { children: item }, index))) })) : null] }));
|
|
17
23
|
}
|
|
@@ -209,12 +215,12 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
|
|
|
209
215
|
setIsMenuOpen(false);
|
|
210
216
|
}
|
|
211
217
|
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;
|
|
212
|
-
const moveButton = canMove ? (_jsxs("div", { className: cn('relative flex shrink-0', isVertical && 'w-full justify-
|
|
213
|
-
const actions = (_jsxs(ActionGroupPrimitive, { align: align, size: size, className: cn('min-w-0', isVertical ? 'w-full flex-col items-stretch' : '
|
|
218
|
+
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: [_jsxs(ActionGroupPrimitive, { align: align, size: size, className: cn('min-w-0 flex-1', isVertical ? 'min-h-0 w-full flex-col items-stretch content-start' : 'overflow-x-auto overflow-y-hidden', alignClasses[align]), children: [helpButton, children] }), moveButton ? (_jsx("div", { className: cn('flex shrink-0', isVertical ? 'w-full justify-end' : 'ml-auto'), children: moveButton })) : null] }));
|
|
214
220
|
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] }));
|
|
215
221
|
}
|
|
216
222
|
function PageActionsDropZones({ activePosition, allowedPositions }) {
|
|
217
|
-
return (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none
|
|
223
|
+
return (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-50", children: allPositions.map((position) => {
|
|
218
224
|
if (!allowedPositions.includes(position))
|
|
219
225
|
return null;
|
|
220
226
|
return (_jsx("div", { className: cn('absolute border-2 border-dashed border-brand/50 bg-brand/10 transition-colors', position === 'left' && 'left-2 top-2 h-[calc(100%-1rem)] w-20 rounded-md', position === 'right' && 'right-2 top-2 h-[calc(100%-1rem)] w-20 rounded-md', position === 'top' && 'left-2 top-2 h-14 w-[calc(100%-1rem)] rounded-md', position === 'bottom' && 'bottom-2 left-2 h-14 w-[calc(100%-1rem)] rounded-md', activePosition === position && 'border-brand bg-brand/20 shadow-[0_0_0_4px_color-mix(in_srgb,var(--brand)_18%,transparent)]') }, position));
|
package/dist/styles.css
CHANGED
|
@@ -1484,12 +1484,6 @@ h2.react-datepicker__current-month {
|
|
|
1484
1484
|
.animate-pulse {
|
|
1485
1485
|
animation: var(--animate-pulse);
|
|
1486
1486
|
}
|
|
1487
|
-
.cursor-grab {
|
|
1488
|
-
cursor: grab;
|
|
1489
|
-
}
|
|
1490
|
-
.cursor-grabbing {
|
|
1491
|
-
cursor: grabbing;
|
|
1492
|
-
}
|
|
1493
1487
|
.cursor-not-allowed {
|
|
1494
1488
|
cursor: not-allowed;
|
|
1495
1489
|
}
|
|
@@ -1499,6 +1493,9 @@ h2.react-datepicker__current-month {
|
|
|
1499
1493
|
.cursor-wait {
|
|
1500
1494
|
cursor: wait;
|
|
1501
1495
|
}
|
|
1496
|
+
.touch-none {
|
|
1497
|
+
touch-action: none;
|
|
1498
|
+
}
|
|
1502
1499
|
.list-disc {
|
|
1503
1500
|
list-style-type: disc;
|
|
1504
1501
|
}
|
|
@@ -1544,6 +1541,9 @@ h2.react-datepicker__current-month {
|
|
|
1544
1541
|
.place-items-center {
|
|
1545
1542
|
place-items: center;
|
|
1546
1543
|
}
|
|
1544
|
+
.content-start {
|
|
1545
|
+
align-content: flex-start;
|
|
1546
|
+
}
|
|
1547
1547
|
.items-center {
|
|
1548
1548
|
align-items: center;
|
|
1549
1549
|
}
|
|
@@ -3853,6 +3853,34 @@ h2.react-datepicker__current-month {
|
|
|
3853
3853
|
}
|
|
3854
3854
|
}
|
|
3855
3855
|
}
|
|
3856
|
+
.\[\&\]\:cursor-grab {
|
|
3857
|
+
cursor: grab;
|
|
3858
|
+
}
|
|
3859
|
+
.\[\&\]\:cursor-grabbing {
|
|
3860
|
+
cursor: grabbing;
|
|
3861
|
+
}
|
|
3862
|
+
.active\:\[\&\]\:cursor-grabbing {
|
|
3863
|
+
&:active {
|
|
3864
|
+
cursor: grabbing;
|
|
3865
|
+
}
|
|
3866
|
+
}
|
|
3867
|
+
.\[\&_\*\]\:cursor-grab {
|
|
3868
|
+
& * {
|
|
3869
|
+
cursor: grab;
|
|
3870
|
+
}
|
|
3871
|
+
}
|
|
3872
|
+
.\[\&_\*\]\:cursor-grabbing {
|
|
3873
|
+
& * {
|
|
3874
|
+
cursor: grabbing;
|
|
3875
|
+
}
|
|
3876
|
+
}
|
|
3877
|
+
.active\:\[\&_\*\]\:cursor-grabbing {
|
|
3878
|
+
&:active {
|
|
3879
|
+
& * {
|
|
3880
|
+
cursor: grabbing;
|
|
3881
|
+
}
|
|
3882
|
+
}
|
|
3883
|
+
}
|
|
3856
3884
|
.\[\&_\[data-slot\=modal-description\]\]\:text-sm {
|
|
3857
3885
|
& [data-slot=modal-description] {
|
|
3858
3886
|
font-size: var(--text-sm);
|