@12-apps/ui 6.24.4 → 6.24.6
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/_internal/components/data-display/CardKit/row-actions-to-menu.js +1 -1
- package/dist/_internal/components/data-display/DataViews/DataViewsGrid.js +5 -5
- package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js +6 -6
- package/dist/_internal/components/data-display/DataViews/data-views-category-pill.js +1 -1
- package/dist/_internal/components/data-display/DataViews/data-views-filter-panel.js +1 -1
- package/dist/_internal/components/data-display/DataViews/data-views-grid-parts.js +4 -4
- package/dist/_internal/components/data-display/DataViews/data-views-inline-bar.js +1 -1
- package/dist/_internal/components/data-display/DataViews/data-views-more-fields.js +1 -1
- package/dist/_internal/components/data-display/DataViews/data-views-more-filters.js +1 -1
- package/dist/_internal/components/data-display/DataViews/data-views-shell-toolbar.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-table-parts.js +1 -1
- package/dist/_internal/components/data-display/DataViews/data-views-toolbar.js +2 -2
- package/dist/_internal/components/data-display/Sheet/Sheet.body.js +2 -2
- package/dist/_internal/components/data-display/Sheet/Sheet.js +4 -4
- package/dist/_internal/components/data-display/Sheet/Sheet.parts.js +1 -1
- package/dist/_internal/components/data-display/Sheet/Sheet.styles.js +1 -1
- package/dist/_internal/components/data-display/index.js +4 -4
- package/dist/_internal/components/index.js +6 -6
- package/dist/_internal/components/layout/ContentToolbar/ContentToolbar.js +1 -1
- package/dist/_internal/components/layout/index.js +1 -1
- package/dist/_internal/components/navigation/AppHeader/AppHeader.details.js +5 -5
- package/dist/_internal/components/navigation/index.js +5 -5
- package/dist/{chunk-OTH7H3IP.js → chunk-4J5EN4FQ.js} +4 -4
- package/dist/{chunk-JD4IVP22.js → chunk-4ZV7N5CU.js} +2 -2
- package/dist/{chunk-QX2PLXQA.js → chunk-53PDVLRK.js} +2 -2
- package/dist/{chunk-6JZE4IIN.js → chunk-7MR2JCJW.js} +36 -13
- package/dist/chunk-7MR2JCJW.js.map +1 -0
- package/dist/{chunk-GVA5CYKP.js → chunk-BUQ2JUND.js} +2 -2
- package/dist/{chunk-7GKRZJWI.js → chunk-EMMPNB6D.js} +2 -2
- package/dist/{chunk-M2K7BPHX.js → chunk-JBMBFYFA.js} +8 -3
- package/dist/chunk-JBMBFYFA.js.map +1 -0
- package/dist/{chunk-TSPHRZ4U.js → chunk-L2E7TY7P.js} +76 -36
- package/dist/chunk-L2E7TY7P.js.map +1 -0
- package/dist/{chunk-NXNNICH7.js → chunk-LWRMKF7D.js} +2 -2
- package/dist/{chunk-POUWN4PX.js → chunk-U437KFDI.js} +1 -1
- package/dist/chunk-U437KFDI.js.map +1 -0
- package/dist/{chunk-5MXVT7DO.js → chunk-ZBXG6RVJ.js} +2 -2
- package/dist/chunk-ZBXG6RVJ.js.map +1 -0
- package/dist/{chunk-JPV45AD6.js → chunk-ZXOT3U6U.js} +2 -2
- package/dist/data-display/CardKit.js +1 -1
- package/dist/data-display/DataViews.js +6 -6
- package/dist/data-display/Sheet.js +4 -4
- package/dist/layout/ContentToolbar.js +1 -1
- package/dist/navigation/AppHeader.js +5 -5
- package/dist/types/components/data-display/CardKit/row-actions-to-menu.d.ts +18 -2
- package/dist/types/components/data-display/CardKit/row-actions-to-menu.d.ts.map +1 -1
- package/dist/types/components/data-display/Sheet/Sheet.body.d.ts.map +1 -1
- package/dist/types/components/data-display/Sheet/Sheet.parts.d.ts.map +1 -1
- package/dist/types/components/data-display/Sheet/Sheet.styles.d.ts.map +1 -1
- package/dist/types/components/layout/ContentToolbar/ContentToolbar.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/data-display/CardKit/row-actions-to-menu.ts +19 -2
- package/src/components/data-display/DataViews/RESPONSIVE-BEHAVIOUR.md +43 -0
- package/src/components/data-display/Sheet/Sheet.body.tsx +6 -1
- package/src/components/data-display/Sheet/Sheet.md +4 -2
- package/src/components/data-display/Sheet/Sheet.parts.tsx +4 -0
- package/src/components/data-display/Sheet/Sheet.styles.ts +77 -17
- package/src/components/layout/ContentToolbar/ContentToolbar.tsx +82 -26
- package/dist/chunk-5MXVT7DO.js.map +0 -1
- package/dist/chunk-6JZE4IIN.js.map +0 -1
- package/dist/chunk-M2K7BPHX.js.map +0 -1
- package/dist/chunk-POUWN4PX.js.map +0 -1
- package/dist/chunk-TSPHRZ4U.js.map +0 -1
- /package/dist/{chunk-OTH7H3IP.js.map → chunk-4J5EN4FQ.js.map} +0 -0
- /package/dist/{chunk-JD4IVP22.js.map → chunk-4ZV7N5CU.js.map} +0 -0
- /package/dist/{chunk-QX2PLXQA.js.map → chunk-53PDVLRK.js.map} +0 -0
- /package/dist/{chunk-GVA5CYKP.js.map → chunk-BUQ2JUND.js.map} +0 -0
- /package/dist/{chunk-7GKRZJWI.js.map → chunk-EMMPNB6D.js.map} +0 -0
- /package/dist/{chunk-NXNNICH7.js.map → chunk-LWRMKF7D.js.map} +0 -0
- /package/dist/{chunk-JPV45AD6.js.map → chunk-ZXOT3U6U.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/data-display/Sheet/Sheet.body.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport React from 'react';\n\nimport { SheetContent, SheetFooter, SheetHeader } from './Sheet.parts';\nimport type { SheetProps } from './Sheet.types';\nimport { muiColor } from '../../../tokens/scales';\n\nexport interface SheetBodyProps extends Pick<\n SheetProps,\n | 'title'\n | 'description'\n | 'showCloseButton'\n | 'showHandle'\n | 'header'\n | 'footer'\n | 'loading'\n | 'color'\n | 'children'\n | 'onClick'\n | 'onFocus'\n | 'onBlur'\n> {\n testId: string;\n isDragging: boolean;\n isVerticalSheet: boolean;\n isDraggableVariant: boolean;\n onClose: () => void;\n onDragStart: (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\n/**\n * The header earns its place if it would show anything at all — a grab handle,\n * either piece of text, the close button, or caller-supplied content.\n */\nconst needsHeader = (props: SheetBodyProps) =>\n Boolean(\n props.showHandle ||\n props.title ||\n props.description ||\n props.showCloseButton ||\n props.header,\n );\n\n/** The centred spinner shown in place of the children while `loading`. */\nconst SheetLoading: React.FC<Pick<SheetBodyProps, 'color'>> = ({ color }) => (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n minHeight: 200,\n }}\n >\n <CircularProgress color={color === undefined ? undefined : muiColor(color, 'inherit')} />\n </Box>\n);\n\n/**\n * What the sheet contains, independent of which drawer is carrying it. The\n * swipeable and plain branches render exactly this — they differ only in the\n * MUI component and its swipe props, so the contents are built once.\n */\nexport const SheetBody: React.FC<SheetBodyProps> = (props) => {\n const {\n title,\n description,\n showCloseButton,\n showHandle,\n header,\n footer,\n loading,\n color,\n children,\n onClick,\n onFocus,\n onBlur,\n testId,\n isDragging,\n isVerticalSheet,\n isDraggableVariant,\n onClose,\n onDragStart,\n } = props;\n\n return (\n <Box\n onClick={onClick}\n onFocus={onFocus}\n onBlur={onBlur}\n data-testid={testId}\n sx={{\n // A vertical sheet's panel is a column whose height is its CONTENT, up\n // to the `size` ceiling — so this fills what the panel has rather than\n // asking for a percentage of it, and `minHeight: 0` is what lets it\n // shrink past its content so `SheetContent` scrolls instead of the\n // panel overflowing. A side sheet's panel is full-height already.\n ...(isVerticalSheet ? { flex: '1 1 auto', minHeight: 0 } : { height: '100%' }),\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n userSelect: isDragging ? 'none' : 'auto',\n }}\n >\n {needsHeader(props) && (\n <SheetHeader\n title={title}\n description={description}\n showCloseButton={showCloseButton}\n onClose={onClose}\n showHandle={showHandle && isVerticalSheet}\n isDraggable={isDraggableVariant && isVerticalSheet}\n onDragStart={onDragStart}\n dataTestId={`${testId}-header`}\n >\n {header}\n </SheetHeader>\n )}\n\n <SheetContent padded dataTestId={`${testId}-content`}>\n {loading ? <SheetLoading color={color} /> : children}\n </SheetContent>\n\n {footer && (\n <SheetFooter sticky divider dataTestId={`${testId}-footer`}>\n {footer}\n </SheetFooter>\n )}\n </Box>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAqDzB,cAgCA,YAhCA;AAnBJ,IAAM,cAAc,CAAC,UACnB;AAAA,EACE,MAAM,cACN,MAAM,SACN,MAAM,eACN,MAAM,mBACN,MAAM;AACR;AAGF,IAAM,eAAwD,CAAC,EAAE,MAAM,MACrE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IAEA,8BAAC,oBAAiB,OAAO,UAAU,SAAY,SAAY,SAAS,OAAO,SAAS,GAAG;AAAA;AACzF;AAQK,IAAM,YAAsC,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMF,GAAI,kBAAkB,EAAE,MAAM,YAAY,WAAW,EAAE,IAAI,EAAE,QAAQ,OAAO;AAAA,QAC5E,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,YAAY,aAAa,SAAS;AAAA,MACpC;AAAA,MAEC;AAAA,oBAAY,KAAK,KAChB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY,cAAc;AAAA,YAC1B,aAAa,sBAAsB;AAAA,YACnC;AAAA,YACA,YAAY,GAAG,MAAM;AAAA,YAEpB;AAAA;AAAA,QACH;AAAA,QAGF,oBAAC,gBAAa,QAAM,MAAC,YAAY,GAAG,MAAM,YACvC,oBAAU,oBAAC,gBAAa,OAAc,IAAK,UAC9C;AAAA,QAEC,UACC,oBAAC,eAAY,QAAM,MAAC,SAAO,MAAC,YAAY,GAAG,MAAM,WAC9C,kBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
|
|
@@ -37,11 +37,24 @@ function SelectionCluster({
|
|
|
37
37
|
sx: {
|
|
38
38
|
display: "flex",
|
|
39
39
|
minWidth: 0,
|
|
40
|
-
//
|
|
41
|
-
// (no orphaned selection row). Desktop: grow to push
|
|
42
|
-
|
|
40
|
+
// Browsing (mobile): don't grow, so the controls sit on the SAME line as
|
|
41
|
+
// the checkbox (no orphaned selection row). Desktop: grow to push
|
|
42
|
+
// controls right.
|
|
43
|
+
//
|
|
44
|
+
// SELECTING (mobile) it must be able to shrink instead. Its children are
|
|
45
|
+
// all `flex-shrink: 0`, so a cluster pinned at content width cannot wrap
|
|
46
|
+
// and the row painted past the toolbar's own edge — on Produtos at 390px
|
|
47
|
+
// that took "Ações" off-screen behind a sideways scroll, which is the
|
|
48
|
+
// one control the selection exists to reach.
|
|
49
|
+
flex: { xs: hasSelection ? "1 1 auto" : "0 0 auto", md: 1 },
|
|
43
50
|
alignItems: "center",
|
|
44
|
-
|
|
51
|
+
// Wrapping is the phone's answer, and only the phone's: below `md` the
|
|
52
|
+
// cluster carries the count, the scope control and "Ações" at once, and
|
|
53
|
+
// no combination of those fits 320px on one line. From `md` up it stays
|
|
54
|
+
// a single line, where it always fitted.
|
|
55
|
+
flexWrap: { xs: "wrap", md: "nowrap" },
|
|
56
|
+
columnGap: 1.5,
|
|
57
|
+
rowGap: 1,
|
|
45
58
|
ml: edgeAlign ? -1.5 : 0
|
|
46
59
|
},
|
|
47
60
|
children: [
|
|
@@ -68,41 +81,68 @@ function SelectionCluster({
|
|
|
68
81
|
sx: { p: 0.5, display: { xs: "inline-flex", md: "none" } }
|
|
69
82
|
}
|
|
70
83
|
),
|
|
71
|
-
hasSelection ? /* @__PURE__ */
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
),
|
|
84
|
-
/* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { height: 16, alignSelf: "center" } }),
|
|
85
|
-
/* @__PURE__ */ jsxs(
|
|
86
|
-
Typography,
|
|
87
|
-
{
|
|
88
|
-
component: "span",
|
|
89
|
-
"data-testid": "selected-count-indicator",
|
|
90
|
-
sx: { fontSize: "0.875rem", color: "text.secondary", whiteSpace: "nowrap", flexShrink: 0 },
|
|
91
|
-
children: [
|
|
92
|
-
selectedCount,
|
|
93
|
-
" ",
|
|
94
|
-
selectedCount === 1 ? "item" : "items",
|
|
95
|
-
" selected"
|
|
96
|
-
]
|
|
97
|
-
}
|
|
98
|
-
),
|
|
99
|
-
selectionExtra,
|
|
100
|
-
actionsSlot
|
|
101
|
-
] }) : actionsSlot
|
|
84
|
+
hasSelection ? /* @__PURE__ */ jsx(
|
|
85
|
+
SelectionState,
|
|
86
|
+
{
|
|
87
|
+
selectedCount,
|
|
88
|
+
clearSelection,
|
|
89
|
+
clearAllTestId,
|
|
90
|
+
clearAllText,
|
|
91
|
+
selectionExtra
|
|
92
|
+
}
|
|
93
|
+
) : null,
|
|
94
|
+
actionsSlot
|
|
102
95
|
]
|
|
103
96
|
}
|
|
104
97
|
);
|
|
105
98
|
}
|
|
99
|
+
function SelectionState({
|
|
100
|
+
selectedCount,
|
|
101
|
+
clearSelection,
|
|
102
|
+
clearAllTestId,
|
|
103
|
+
clearAllText,
|
|
104
|
+
selectionExtra
|
|
105
|
+
}) {
|
|
106
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
107
|
+
/* @__PURE__ */ jsx(
|
|
108
|
+
Button,
|
|
109
|
+
{
|
|
110
|
+
variant: "text",
|
|
111
|
+
size: "small",
|
|
112
|
+
color: "inherit",
|
|
113
|
+
onClick: clearSelection,
|
|
114
|
+
"data-testid": clearAllTestId,
|
|
115
|
+
sx: selectionButtonSx,
|
|
116
|
+
children: clearAllText
|
|
117
|
+
}
|
|
118
|
+
),
|
|
119
|
+
/* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { height: 16, alignSelf: "center" } }),
|
|
120
|
+
/* @__PURE__ */ jsxs(
|
|
121
|
+
Typography,
|
|
122
|
+
{
|
|
123
|
+
component: "span",
|
|
124
|
+
"data-testid": "selected-count-indicator",
|
|
125
|
+
sx: { fontSize: "0.875rem", color: "text.secondary", whiteSpace: "nowrap", flexShrink: 0 },
|
|
126
|
+
children: [
|
|
127
|
+
selectedCount,
|
|
128
|
+
" ",
|
|
129
|
+
selectedCount === 1 ? "item" : "items",
|
|
130
|
+
" selected"
|
|
131
|
+
]
|
|
132
|
+
}
|
|
133
|
+
),
|
|
134
|
+
selectionExtra !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
135
|
+
/* @__PURE__ */ jsx(
|
|
136
|
+
Box,
|
|
137
|
+
{
|
|
138
|
+
"aria-hidden": true,
|
|
139
|
+
sx: { flexBasis: "100%", height: 0, display: { xs: "block", md: "none" } }
|
|
140
|
+
}
|
|
141
|
+
),
|
|
142
|
+
selectionExtra
|
|
143
|
+
] })
|
|
144
|
+
] });
|
|
145
|
+
}
|
|
106
146
|
function BrowsingClusters({
|
|
107
147
|
leadingControls,
|
|
108
148
|
rightControls,
|
|
@@ -226,4 +266,4 @@ function ContentToolbar({
|
|
|
226
266
|
export {
|
|
227
267
|
ContentToolbar
|
|
228
268
|
};
|
|
229
|
-
//# sourceMappingURL=chunk-
|
|
269
|
+
//# sourceMappingURL=chunk-L2E7TY7P.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/layout/ContentToolbar/ContentToolbar.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport type { ContentToolbarProps } from './ContentToolbar.types';\n\nconst selectionButtonSx = {\n minWidth: 0,\n height: 'auto',\n borderRadius: 0.5,\n fontWeight: 600,\n py: 0.5,\n px: 1.5,\n fontSize: '0.75rem',\n textTransform: 'none',\n color: 'text.primary',\n} as const;\n\ntype SelectionClusterProps = Pick<\n ContentToolbarProps,\n | 'hasSelection'\n | 'selectedCount'\n | 'selectAll'\n | 'clearSelection'\n | 'actions'\n | 'selectionExtra'\n | 'selectAllTestId'\n | 'clearAllTestId'\n | 'edgeAlign'\n | 'selectAllLabel'\n | 'selectAllText'\n | 'clearAllText'\n>;\n\n/** The left cluster: Select All + (when selecting) Clear All / count / actions. */\nfunction SelectionCluster({\n hasSelection,\n selectedCount,\n selectAll,\n clearSelection,\n actions,\n selectionExtra,\n selectAllTestId,\n clearAllTestId,\n edgeAlign = false,\n selectAllLabel,\n selectAllText,\n clearAllText,\n}: SelectionClusterProps): React.JSX.Element {\n const actionsSlot = actions !== undefined && (\n <Box sx={{ ml: 0.5, display: 'flex', flexShrink: 0, alignItems: 'center' }}>{actions}</Box>\n );\n return (\n <Box\n sx={{\n display: 'flex',\n minWidth: 0,\n // Browsing (mobile): don't grow, so the controls sit on the SAME line as\n // the checkbox (no orphaned selection row). Desktop: grow to push\n // controls right.\n //\n // SELECTING (mobile) it must be able to shrink instead. Its children are\n // all `flex-shrink: 0`, so a cluster pinned at content width cannot wrap\n // and the row painted past the toolbar's own edge — on Produtos at 390px\n // that took \"Ações\" off-screen behind a sideways scroll, which is the\n // one control the selection exists to reach.\n flex: { xs: hasSelection ? '1 1 auto' : '0 0 auto', md: 1 },\n alignItems: 'center',\n // Wrapping is the phone's answer, and only the phone's: below `md` the\n // cluster carries the count, the scope control and \"Ações\" at once, and\n // no combination of those fits 320px on one line. From `md` up it stays\n // a single line, where it always fitted.\n flexWrap: { xs: 'wrap', md: 'nowrap' },\n columnGap: 1.5,\n rowGap: 1,\n ml: edgeAlign ? -1.5 : 0,\n }}\n >\n {/* Desktop: a \"Select All\" text button (md+). Mobile: a compact checkbox\n that toggles select-all/clear — the text would eat the tight row. */}\n <Button\n variant=\"text\"\n size=\"small\"\n color=\"inherit\"\n onClick={selectAll}\n data-testid={selectAllTestId}\n sx={{ ...selectionButtonSx, display: { xs: 'none', md: 'inline-flex' } }}\n >\n {selectAllText}\n </Button>\n <Checkbox\n size=\"small\"\n checked={hasSelection}\n onChange={(event) => (event.target.checked ? selectAll() : clearSelection())}\n data-testid={`${selectAllTestId}-checkbox`}\n inputProps={{ 'aria-label': selectAllLabel }}\n sx={{ p: 0.5, display: { xs: 'inline-flex', md: 'none' } }}\n />\n {hasSelection ? (\n <SelectionState\n selectedCount={selectedCount}\n clearSelection={clearSelection}\n clearAllTestId={clearAllTestId}\n clearAllText={clearAllText}\n selectionExtra={selectionExtra}\n />\n ) : null}\n {actionsSlot}\n </Box>\n );\n}\n\n/**\n * What the cluster shows once something IS ticked: Clear All, the count, and\n * the host's own `selectionExtra`.\n *\n * Its own component only because the cluster around it is at the complexity\n * gate's line ceiling — but the split falls where the meaning does. Everything\n * here exists only while a selection does, and the `actions` slot deliberately\n * stays OUTSIDE it: a toolbar may carry actions while browsing too.\n */\nfunction SelectionState({\n selectedCount,\n clearSelection,\n clearAllTestId,\n clearAllText,\n selectionExtra,\n}: Pick<\n ContentToolbarProps,\n 'selectedCount' | 'clearSelection' | 'clearAllTestId' | 'clearAllText' | 'selectionExtra'\n>): React.JSX.Element {\n return (\n <>\n <Button\n variant=\"text\"\n size=\"small\"\n color=\"inherit\"\n onClick={clearSelection}\n data-testid={clearAllTestId}\n sx={selectionButtonSx}\n >\n {clearAllText}\n </Button>\n <Divider orientation=\"vertical\" flexItem sx={{ height: 16, alignSelf: 'center' }} />\n <Typography\n component=\"span\"\n data-testid=\"selected-count-indicator\"\n sx={{ fontSize: '0.875rem', color: 'text.secondary', whiteSpace: 'nowrap', flexShrink: 0 }}\n >\n {selectedCount} {selectedCount === 1 ? 'item' : 'items'} selected\n </Typography>\n {selectionExtra !== undefined && (\n <>\n {/* A DELIBERATE break, not a wrap that happened to land here. What\n follows — \"Seleção: 48 produtos — todas as páginas\", its \"Limpar\n seleção\", and \"Ações\" — is a sentence about the selection plus the\n control that acts on it, and letting the phone break it wherever it\n ran out of room split that sentence mid-phrase. Zero height so it\n costs nothing but the row gap, and `display:none` from `md` up,\n where the line still fits. */}\n <Box\n aria-hidden\n sx={{ flexBasis: '100%', height: 0, display: { xs: 'block', md: 'none' } }}\n />\n {selectionExtra}\n </>\n )}\n </>\n );\n}\n\n/**\n * The BROWSING half of the toolbar: search + filters on the left, the page's\n * own controls on the right. Split out of {@link ContentToolbar} so that\n * function stays inside the complexity gate — it is layout only, and the\n * decision of whether to show it at all is made by the caller.\n */\nfunction BrowsingClusters({\n leadingControls,\n rightControls,\n hasSelection,\n edgeAlign,\n}: {\n leadingControls?: React.ReactNode;\n rightControls: React.ReactNode;\n hasSelection: boolean;\n edgeAlign: boolean;\n}): React.JSX.Element {\n return (\n <>\n {/* minWidth:0 lets this cluster be the one that gives up width as the row\n * tightens, which is what the filter overflow measures against. */}\n {leadingControls !== undefined && (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n flexGrow: 1,\n minWidth: 0,\n // The collapse ladder has a FLOOR — below roughly 400px even the\n // fully-collapsed row does not fit, and its controls cannot shrink\n // (they are flexShrink:0 so an over-packed row sheds instead of\n // squeezing). Past that point this scrolls rather than letting them\n // paint outside the toolbar, which is what a narrow phone did.\n overflowX: 'auto',\n // No scrollbar gutter stealing height on the common case.\n scrollbarWidth: 'thin',\n }}\n >\n {leadingControls}\n </Box>\n )}\n {/* ml:auto keeps the controls right-aligned even when the cluster wraps to\n * its own row (where justify-content:space-between would otherwise snap a\n * lone item to the left); it's a no-op on a shared row. */}\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n // Same single-line rule as the row itself: this cluster wrapping\n // INTERNALLY buys a second line just as surely as the row wrapping\n // does. It bit at exactly 900px, the `md` breakpoint where the \"N de\n // N\" counter appears and pushes Exibir/Exportar over the edge.\n flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',\n // Tight (5px) when browsing so the controls fit one line beside the\n // checkbox; roomier (14px) in selection mode where they get their own row.\n gap: hasSelection ? '14px' : '5px',\n ml: 'auto',\n mr: edgeAlign ? -1.5 : 0,\n '& > *': { flexShrink: 0 },\n }}\n >\n {rightControls}\n </Box>\n </>\n );\n}\n\n/**\n * Shared toolbar for content pages (Favorites, Personal Space, Recents, …). The\n * left cluster owns selection chrome — **Select All**, and once items are\n * selected, **Clear All** + an \"N items selected\" count + an optional `actions`\n * slot. The right cluster is a free `rightControls` slot for page-specific\n * controls (ViewSelector, SortByDropdown, MultiSelectDropdown, FilterTrigger).\n *\n * Faithful, generic MUI port of the reference `ContentPageToolbar` — the\n * domain-specific default actions are intentionally left to the consumer via\n * the `actions` slot so this stays agnostic and reusable across projects.\n *\n * @example\n * ```tsx\n * <ContentToolbar\n * hasSelection={selected.size > 0}\n * selectedCount={selected.size}\n * selectAll={selectAll}\n * clearSelection={clear}\n * rightControls={\n * <>\n * <ViewSelector viewMode={view} onViewModeChange={setView} zoom={zoom} onZoomChange={setZoom} />\n * <SortByDropdown fields={FIELDS} activeField={field} onFieldChange={setField} />\n * <MultiSelectDropdown label=\"Content Type\" options={types} selected={typeSet} onToggle={toggle} onClear={clear} />\n * <FilterTrigger open={panelOpen} onOpenChange={setPanelOpen} hasActiveFilters={hasFilters} />\n * </>\n * }\n * />\n * ```\n */\nexport function ContentToolbar({\n hasSelection,\n selectedCount,\n selectAll,\n clearSelection,\n rightControls,\n leadingControls,\n actions,\n selectionExtra,\n selectAllTestId,\n clearAllTestId,\n edgeAlign = false,\n exclusiveSelection = false,\n selectAllLabel,\n selectAllText,\n clearAllText,\n}: ContentToolbarProps): React.JSX.Element {\n // Under `exclusiveSelection` the two states are alternatives, not neighbours:\n // browsing shows the controls and no checkbox, selecting shows the checkbox\n // and no controls. Anything else double-books the row.\n const showSelection = !exclusiveSelection || hasSelection;\n const showControls = !exclusiveSelection || !hasSelection;\n return (\n // Two clusters on one line. They may wrap onto separate rows ONLY for a\n // toolbar without `leadingControls` — one carrying search + filters is\n // driven by a measured collapse ladder (see `useFilterOverflow`), and a\n // wrap there is the ladder having failed: it would silently buy a second\n // row instead of shedding a control into \"Mais\", which is the one outcome\n // the ladder exists to prevent.\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 2,\n flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',\n rowGap: 1,\n }}\n >\n {showSelection && (\n <SelectionCluster\n selectAllText={selectAllText}\n clearAllText={clearAllText}\n hasSelection={hasSelection}\n selectedCount={selectedCount}\n selectAll={selectAll}\n clearSelection={clearSelection}\n actions={actions}\n selectionExtra={selectionExtra}\n selectAllTestId={selectAllTestId}\n clearAllTestId={clearAllTestId}\n selectAllLabel={selectAllLabel}\n edgeAlign={edgeAlign}\n />\n )}\n\n {showControls && (\n <BrowsingClusters\n leadingControls={leadingControls}\n rightControls={rightControls}\n hasSelection={hasSelection}\n edgeAlign={edgeAlign}\n />\n )}\n </Box>\n );\n}\n"],"mappings":";AAEA,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,OAAO,aAAa;AACpB,OAAO,gBAAgB;AAiDnB,SAsGI,UAtGJ,KAGA,YAHA;AA5CJ,IAAM,oBAAoB;AAAA,EACxB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,OAAO;AACT;AAmBA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF,GAA6C;AAC3C,QAAM,cAAc,YAAY,UAC9B,oBAAC,OAAI,IAAI,EAAE,IAAI,KAAK,SAAS,QAAQ,YAAY,GAAG,YAAY,SAAS,GAAI,mBAAQ;AAEvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,SAAS;AAAA,QACT,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUV,MAAM,EAAE,IAAI,eAAe,aAAa,YAAY,IAAI,EAAE;AAAA,QAC1D,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,QAKZ,UAAU,EAAE,IAAI,QAAQ,IAAI,SAAS;AAAA,QACrC,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,IAAI,YAAY,OAAO;AAAA,MACzB;AAAA,MAIA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,YACN,SAAS;AAAA,YACT,eAAa;AAAA,YACb,IAAI,EAAE,GAAG,mBAAmB,SAAS,EAAE,IAAI,QAAQ,IAAI,cAAc,EAAE;AAAA,YAEtE;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,UAAU,CAAC,UAAW,MAAM,OAAO,UAAU,UAAU,IAAI,eAAe;AAAA,YAC1E,eAAa,GAAG,eAAe;AAAA,YAC/B,YAAY,EAAE,cAAc,eAAe;AAAA,YAC3C,IAAI,EAAE,GAAG,KAAK,SAAS,EAAE,IAAI,eAAe,IAAI,OAAO,EAAE;AAAA;AAAA,QAC3D;AAAA,QACC,eACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,IACE;AAAA,QACH;AAAA;AAAA;AAAA,EACH;AAEJ;AAWA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGsB;AACpB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAAS;AAAA,QACT,eAAa;AAAA,QACb,IAAI;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,IACA,oBAAC,WAAQ,aAAY,YAAW,UAAQ,MAAC,IAAI,EAAE,QAAQ,IAAI,WAAW,SAAS,GAAG;AAAA,IAClF;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,IAAI,EAAE,UAAU,YAAY,OAAO,kBAAkB,YAAY,UAAU,YAAY,EAAE;AAAA,QAExF;AAAA;AAAA,UAAc;AAAA,UAAE,kBAAkB,IAAI,SAAS;AAAA,UAAQ;AAAA;AAAA;AAAA,IAC1D;AAAA,IACC,mBAAmB,UAClB,iCAQE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,IAAI,EAAE,WAAW,QAAQ,QAAQ,GAAG,SAAS,EAAE,IAAI,SAAS,IAAI,OAAO,EAAE;AAAA;AAAA,MAC3E;AAAA,MACC;AAAA,OACH;AAAA,KAEJ;AAEJ;AAQA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKsB;AACpB,SACE,iCAGG;AAAA,wBAAoB,UACnB;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMV,WAAW;AAAA;AAAA,UAEX,gBAAgB;AAAA,QAClB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IAKF;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,UACT,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,UAKZ,UAAU,oBAAoB,SAAY,SAAS;AAAA;AAAA;AAAA,UAGnD,KAAK,eAAe,SAAS;AAAA,UAC7B,IAAI;AAAA,UACJ,IAAI,YAAY,OAAO;AAAA,UACvB,SAAS,EAAE,YAAY,EAAE;AAAA,QAC3B;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AA+BO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,GAA2C;AAIzC,QAAM,gBAAgB,CAAC,sBAAsB;AAC7C,QAAM,eAAe,CAAC,sBAAsB,CAAC;AAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,KAAK;AAAA,UACL,UAAU,oBAAoB,SAAY,SAAS;AAAA,UACnD,QAAQ;AAAA,QACV;AAAA,QAEC;AAAA,2BACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,UAGD,gBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA;AAEJ;","names":[]}
|
|
@@ -23,7 +23,7 @@ import {
|
|
|
23
23
|
} from "./chunk-TQ6FPOPD.js";
|
|
24
24
|
import {
|
|
25
25
|
ShellToolbar
|
|
26
|
-
} from "./chunk-
|
|
26
|
+
} from "./chunk-EMMPNB6D.js";
|
|
27
27
|
import {
|
|
28
28
|
resolveSelectionExtra
|
|
29
29
|
} from "./chunk-KX75HM5U.js";
|
|
@@ -237,4 +237,4 @@ function GridShell(props) {
|
|
|
237
237
|
export {
|
|
238
238
|
GridShell
|
|
239
239
|
};
|
|
240
|
-
//# sourceMappingURL=chunk-
|
|
240
|
+
//# sourceMappingURL=chunk-LWRMKF7D.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/data-display/Sheet/Sheet.parts.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport Backdrop from '@mui/material/Backdrop/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { shimmerAnimation } from './Sheet.animations';\nimport type {\n SheetContentProps,\n SheetFooterProps,\n SheetHeaderProps,\n SheetOverlayProps,\n} from './Sheet.types';\n\n/**\n * The grab handle's own styling. A draggable handle is deliberately larger and\n * tinted, so the affordance reads as draggable before the user tries it; a\n * decorative one stays a neutral bar.\n */\nconst handleSx = (theme: Theme, isDraggable: boolean) => ({\n width: isDraggable ? 48 : 32,\n height: isDraggable ? 6 : 4,\n backgroundColor: alpha(theme.palette.text.primary, 0.3),\n borderRadius: 3,\n transition: theme.transitions.create(['all'], {\n duration: theme.transitions.duration.short,\n easing: theme.transitions.easing.easeInOut,\n }),\n position: 'relative',\n overflow: 'hidden',\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: '-100%',\n width: '100%',\n height: '100%',\n background: `linear-gradient(\n 90deg,\n transparent,\n ${alpha(theme.palette.common.white, 0.3)},\n transparent\n )`,\n animation: isDraggable ? `${shimmerAnimation} 2s infinite` : 'none',\n },\n ...(isDraggable && {\n backgroundColor: alpha(theme.palette.primary.main, 0.4),\n boxShadow: `0 2px 4px ${alpha(theme.palette.primary.main, 0.2)}`,\n '&:hover': {\n backgroundColor: theme.palette.primary.main,\n transform: 'scaleX(1.15) scaleY(1.2)',\n boxShadow: `0 3px 6px ${alpha(theme.palette.primary.main, 0.3)}`,\n },\n }),\n});\n\nconst SheetHandle: React.FC<{ isDraggable: boolean }> = ({ isDraggable }) => {\n const theme = useTheme();\n\n return (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n mb: 1,\n // The handle is decoration on a draggable header: the drag listeners sit\n // on the header itself, so letting the bar swallow the press would open\n // a dead zone in the middle of the grab target.\n pointerEvents: isDraggable ? 'none' : 'auto',\n }}\n >\n <Box sx={handleSx(theme, isDraggable)} />\n </Box>\n );\n};\n\nconst HEADER_DEFAULTS: Partial<SheetHeaderProps> = {\n isDraggable: false,\n dataTestId: 'sheet-header',\n};\n\nexport const SheetHeader: React.FC<SheetHeaderProps> = (props) => {\n const {\n title,\n description,\n showCloseButton,\n onClose,\n showHandle,\n isDraggable,\n onDragStart,\n className,\n style,\n children,\n dataTestId,\n } = withDefaults(props, HEADER_DEFAULTS);\n\n return (\n <Box\n className={className}\n data-testid={dataTestId}\n sx={{\n p: 2,\n pb: showHandle ? 1 : 2,\n cursor: isDraggable ? 'grab' : 'auto',\n '&:active': isDraggable ? { cursor: 'grabbing' } : {},\n ...style,\n }}\n onMouseDown={isDraggable ? onDragStart : undefined}\n onTouchStart={isDraggable ? onDragStart : undefined}\n >\n {showHandle && <SheetHandle isDraggable={Boolean(isDraggable)} />}\n\n <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>\n <Box sx={{ flex: 1 }}>\n {title && (\n <Typography variant=\"h6\" sx={{ fontWeight: 600 }} data-testid={`${dataTestId}-title`}>\n {title}\n </Typography>\n )}\n {description && (\n <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mt: 0.5 }}>\n {description}\n </Typography>\n )}\n {children}\n </Box>\n\n {showCloseButton && (\n <IconButton\n onClick={onClose}\n size=\"small\"\n sx={{ ml: 1, mt: -0.5 }}\n data-testid={`${dataTestId}-close-button`}\n >\n <CloseIcon data-testid={`${dataTestId}-close-icon`} />\n </IconButton>\n )}\n </Box>\n </Box>\n );\n};\n\nconst CONTENT_DEFAULTS: Partial<SheetContentProps> = {\n padded: true,\n dataTestId: 'sheet-content',\n};\n\nexport const SheetContent: React.FC<SheetContentProps> = (props) => {\n const { children, className, style, padded, dataTestId } = withDefaults(props, CONTENT_DEFAULTS);\n\n return (\n <Box\n className={className}\n data-testid={dataTestId}\n // No `minHeight: 0` here, deliberately: a flex item's automatic minimum\n // size only applies while its main-axis `overflow` is `visible`, and this\n // one is `auto`, so it already shrinks. `SheetBody` above is the item that\n // needs it stated.\n sx={{ flex: 1, overflow: 'auto', p: padded ? 2 : 0, ...style }}\n >\n {children}\n </Box>\n );\n};\n\nconst FOOTER_DEFAULTS: Partial<SheetFooterProps> = {\n sticky: false,\n divider: false,\n dataTestId: 'sheet-footer',\n};\n\nexport const SheetFooter: React.FC<SheetFooterProps> = (props) => {\n const { children, className, style, sticky, divider, dataTestId } = withDefaults(\n props,\n FOOTER_DEFAULTS,\n );\n\n return (\n <>\n {divider && <Divider />}\n <Box\n className={className}\n data-testid={dataTestId}\n sx={{\n p: 2,\n position: sticky ? 'sticky' : 'relative',\n bottom: sticky ? 0 : 'auto',\n backgroundColor: 'background.paper',\n borderTop: sticky ? '1px solid' : 'none',\n borderColor: 'divider',\n ...style,\n }}\n >\n {children}\n </Box>\n </>\n );\n};\n\nconst OVERLAY_DEFAULTS: Partial<SheetOverlayProps> = {\n open: false,\n blur: false,\n};\n\nexport const SheetOverlay: React.FC<SheetOverlayProps> = (props) => {\n const { open, onClick, className, style, blur } = withDefaults(props, OVERLAY_DEFAULTS);\n const theme = useTheme();\n\n return (\n <Fade in={open} timeout={300}>\n <Backdrop\n open={Boolean(open)}\n onClick={onClick}\n className={className}\n sx={{\n // One below the drawer: this backdrop replaces MUI's own (the drawer\n // is given a no-op BackdropComponent) and must sit under the panel.\n zIndex: theme.zIndex.drawer - 1,\n backgroundColor: alpha(theme.palette.common.black, blur ? 0.6 : 0.5),\n backdropFilter: blur ? 'blur(8px) saturate(180%)' : 'none',\n WebkitBackdropFilter: blur ? 'blur(8px) saturate(180%)' : 'none',\n ...style,\n }}\n />\n </Fade>\n );\n};\n"],"mappings":"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","names":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// src/components/data-display/CardKit/row-actions-to-menu.ts
|
|
2
2
|
function rowActionsToMenuItems(actions, row) {
|
|
3
|
-
return actions.filter((action) => action.isVisible?.(row) ?? true).map((action) => ({
|
|
3
|
+
return actions.filter((action) => action.row !== false).filter((action) => action.isVisible?.(row) ?? true).map((action) => ({
|
|
4
4
|
id: action.id,
|
|
5
5
|
label: action.rowLabel?.(row) ?? action.label,
|
|
6
6
|
color: action.color,
|
|
@@ -11,4 +11,4 @@ function rowActionsToMenuItems(actions, row) {
|
|
|
11
11
|
export {
|
|
12
12
|
rowActionsToMenuItems
|
|
13
13
|
};
|
|
14
|
-
//# sourceMappingURL=chunk-
|
|
14
|
+
//# sourceMappingURL=chunk-ZBXG6RVJ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/data-display/CardKit/row-actions-to-menu.ts"],"sourcesContent":["import type { DropdownMenuItem } from '../../navigation/DropdownMenu';\nimport type { RowAction } from '../DataViews';\n\n/**\n * Adapt a list of {@link RowAction}s into single-row kebab items.\n *\n * Drops the actions that declare `row: false`, applies each survivor's\n * `isVisible` guard, resolves its per-row `rowLabel` override, carries its\n * colour, and fires `onSelect([row])` on click.\n *\n * The point is that ONE definition drives both surfaces. An entity that already\n * declares its per-row actions as `RowAction[]` — because the table's multi-\n * select menu needs them — gets the card's kebab from the same array through\n * `renderRowMenu` / `renderCard`, with no second list to keep in step. Two\n * lists is how a \"Duplicar\" that appears in the table and not on the card\n * happens, and nothing reports it.\n *\n * ## Why `row: false` is filtered HERE\n *\n * `row` and `bulk` are the flags that make one list serve two surfaces, so an\n * adapter that ignores one of them defeats the arrangement it exists to\n * support. This one did, and the result was a per-row \"⋮\" on Produtos offering\n * \"Inativar todos\", \"Destacar todos\" and \"Remover destaque de todos\" beside\n * that row's own \"Inativar\" and \"Remover destaque\" — bulk verbs on a menu whose\n * every other entry means \"this one\", where \"todos\" reads as the whole\n * catalogue and the click actually writes a single row.\n *\n * The bulk half was already honoured (`renderBulkActions` filters `bulk`), so\n * only the kebab leaked. Filtering here fixes it for every surface that builds\n * a kebab from `RowAction[]` — the table row, the grid card and the list card\n * all arrive through this function.\n */\nexport function rowActionsToMenuItems<T extends Record<string, unknown>>(\n actions: RowAction<T>[],\n row: T,\n): DropdownMenuItem[] {\n return actions\n .filter((action) => action.row !== false)\n .filter((action) => action.isVisible?.(row) ?? true)\n .map((action) => ({\n id: action.id,\n label: action.rowLabel?.(row) ?? action.label,\n color: action.color,\n onClick: () => void action.onSelect([row]),\n }));\n}\n"],"mappings":";AAgCO,SAAS,sBACd,SACA,KACoB;AACpB,SAAO,QACJ,OAAO,CAAC,WAAW,OAAO,QAAQ,KAAK,EACvC,OAAO,CAAC,WAAW,OAAO,YAAY,GAAG,KAAK,IAAI,EAClD,IAAI,CAAC,YAAY;AAAA,IAChB,IAAI,OAAO;AAAA,IACX,OAAO,OAAO,WAAW,GAAG,KAAK,OAAO;AAAA,IACxC,OAAO,OAAO;AAAA,IACd,SAAS,MAAM,KAAK,OAAO,SAAS,CAAC,GAAG,CAAC;AAAA,EAC3C,EAAE;AACN;","names":[]}
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "./chunk-4X4KM4ZB.js";
|
|
4
4
|
import {
|
|
5
5
|
DataViewsGrid
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-53PDVLRK.js";
|
|
7
7
|
import {
|
|
8
8
|
viewStateKey
|
|
9
9
|
} from "./chunk-ZOLAYP2D.js";
|
|
@@ -178,4 +178,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
|
|
|
178
178
|
export {
|
|
179
179
|
DataViewsTableBase
|
|
180
180
|
};
|
|
181
|
-
//# sourceMappingURL=chunk-
|
|
181
|
+
//# sourceMappingURL=chunk-ZXOT3U6U.js.map
|
|
@@ -3,11 +3,11 @@ import {
|
|
|
3
3
|
} from "../chunk-JWW2Z3RH.js";
|
|
4
4
|
import {
|
|
5
5
|
DataViewsTableBase
|
|
6
|
-
} from "../chunk-
|
|
6
|
+
} from "../chunk-ZXOT3U6U.js";
|
|
7
7
|
import "../chunk-4X4KM4ZB.js";
|
|
8
8
|
import {
|
|
9
9
|
DataViewsGrid
|
|
10
|
-
} from "../chunk-
|
|
10
|
+
} from "../chunk-53PDVLRK.js";
|
|
11
11
|
import {
|
|
12
12
|
BaseListCard
|
|
13
13
|
} from "../chunk-WR5JFDQ5.js";
|
|
@@ -22,7 +22,7 @@ import {
|
|
|
22
22
|
DropIndicator,
|
|
23
23
|
useDragItem
|
|
24
24
|
} from "../chunk-JCJGJX7V.js";
|
|
25
|
-
import "../chunk-
|
|
25
|
+
import "../chunk-LWRMKF7D.js";
|
|
26
26
|
import "../chunk-BPLFM2GL.js";
|
|
27
27
|
import {
|
|
28
28
|
DataViewsBoard
|
|
@@ -43,7 +43,7 @@ import "../chunk-CBOB5AV6.js";
|
|
|
43
43
|
import "../chunk-HP2ODXNA.js";
|
|
44
44
|
import "../chunk-TQ6FPOPD.js";
|
|
45
45
|
import "../chunk-IAGOUTI6.js";
|
|
46
|
-
import "../chunk-
|
|
46
|
+
import "../chunk-EMMPNB6D.js";
|
|
47
47
|
import "../chunk-KX75HM5U.js";
|
|
48
48
|
import "../chunk-XKV5ZIBG.js";
|
|
49
49
|
import "../chunk-A7Q5AQVD.js";
|
|
@@ -56,7 +56,7 @@ import {
|
|
|
56
56
|
import {
|
|
57
57
|
DEFAULT_CELL_WIDTH
|
|
58
58
|
} from "../chunk-6VP2L3DJ.js";
|
|
59
|
-
import "../chunk-
|
|
59
|
+
import "../chunk-4ZV7N5CU.js";
|
|
60
60
|
import "../chunk-SQNW22ZZ.js";
|
|
61
61
|
import "../chunk-7NSX7A5H.js";
|
|
62
62
|
import "../chunk-DW5FRWRQ.js";
|
|
@@ -108,7 +108,7 @@ import "../chunk-7AIL2F5E.js";
|
|
|
108
108
|
import "../chunk-WVML3ENZ.js";
|
|
109
109
|
import "../chunk-IDHZHOZW.js";
|
|
110
110
|
import "../chunk-MOLQGQEQ.js";
|
|
111
|
-
import "../chunk-
|
|
111
|
+
import "../chunk-L2E7TY7P.js";
|
|
112
112
|
import "../chunk-JMVIIKII.js";
|
|
113
113
|
import "../chunk-WXD7MGBT.js";
|
|
114
114
|
import "../chunk-WQFIV5WD.js";
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import "../chunk-ITACE45O.js";
|
|
2
2
|
import {
|
|
3
3
|
Sheet
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
6
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-4J5EN4FQ.js";
|
|
5
|
+
import "../chunk-JBMBFYFA.js";
|
|
6
|
+
import "../chunk-7MR2JCJW.js";
|
|
7
7
|
import {
|
|
8
8
|
SheetContent,
|
|
9
9
|
SheetFooter,
|
|
10
10
|
SheetHeader,
|
|
11
11
|
SheetOverlay
|
|
12
|
-
} from "../chunk-
|
|
12
|
+
} from "../chunk-U437KFDI.js";
|
|
13
13
|
import "../chunk-OLZTGVBT.js";
|
|
14
14
|
import "../chunk-CRN4KKNI.js";
|
|
15
15
|
import "../chunk-F52N6ACD.js";
|
|
@@ -12,16 +12,16 @@ import {
|
|
|
12
12
|
} from "../chunk-H37GIAAM.js";
|
|
13
13
|
import {
|
|
14
14
|
AppHeaderDetails
|
|
15
|
-
} from "../chunk-
|
|
15
|
+
} from "../chunk-BUQ2JUND.js";
|
|
16
16
|
import {
|
|
17
17
|
brandGradient,
|
|
18
18
|
highlightOf,
|
|
19
19
|
initialsOf
|
|
20
20
|
} from "../chunk-IQU4HKND.js";
|
|
21
|
-
import "../chunk-
|
|
22
|
-
import "../chunk-
|
|
23
|
-
import "../chunk-
|
|
24
|
-
import "../chunk-
|
|
21
|
+
import "../chunk-4J5EN4FQ.js";
|
|
22
|
+
import "../chunk-JBMBFYFA.js";
|
|
23
|
+
import "../chunk-7MR2JCJW.js";
|
|
24
|
+
import "../chunk-U437KFDI.js";
|
|
25
25
|
import "../chunk-OLZTGVBT.js";
|
|
26
26
|
import "../chunk-CRN4KKNI.js";
|
|
27
27
|
import "../chunk-F52N6ACD.js";
|
|
@@ -3,8 +3,9 @@ import type { RowAction } from '../DataViews';
|
|
|
3
3
|
/**
|
|
4
4
|
* Adapt a list of {@link RowAction}s into single-row kebab items.
|
|
5
5
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
6
|
+
* Drops the actions that declare `row: false`, applies each survivor's
|
|
7
|
+
* `isVisible` guard, resolves its per-row `rowLabel` override, carries its
|
|
8
|
+
* colour, and fires `onSelect([row])` on click.
|
|
8
9
|
*
|
|
9
10
|
* The point is that ONE definition drives both surfaces. An entity that already
|
|
10
11
|
* declares its per-row actions as `RowAction[]` — because the table's multi-
|
|
@@ -12,6 +13,21 @@ import type { RowAction } from '../DataViews';
|
|
|
12
13
|
* `renderRowMenu` / `renderCard`, with no second list to keep in step. Two
|
|
13
14
|
* lists is how a "Duplicar" that appears in the table and not on the card
|
|
14
15
|
* happens, and nothing reports it.
|
|
16
|
+
*
|
|
17
|
+
* ## Why `row: false` is filtered HERE
|
|
18
|
+
*
|
|
19
|
+
* `row` and `bulk` are the flags that make one list serve two surfaces, so an
|
|
20
|
+
* adapter that ignores one of them defeats the arrangement it exists to
|
|
21
|
+
* support. This one did, and the result was a per-row "⋮" on Produtos offering
|
|
22
|
+
* "Inativar todos", "Destacar todos" and "Remover destaque de todos" beside
|
|
23
|
+
* that row's own "Inativar" and "Remover destaque" — bulk verbs on a menu whose
|
|
24
|
+
* every other entry means "this one", where "todos" reads as the whole
|
|
25
|
+
* catalogue and the click actually writes a single row.
|
|
26
|
+
*
|
|
27
|
+
* The bulk half was already honoured (`renderBulkActions` filters `bulk`), so
|
|
28
|
+
* only the kebab leaked. Filtering here fixes it for every surface that builds
|
|
29
|
+
* a kebab from `RowAction[]` — the table row, the grid card and the list card
|
|
30
|
+
* all arrive through this function.
|
|
15
31
|
*/
|
|
16
32
|
export declare function rowActionsToMenuItems<T extends Record<string, unknown>>(actions: RowAction<T>[], row: T): DropdownMenuItem[];
|
|
17
33
|
//# sourceMappingURL=row-actions-to-menu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"row-actions-to-menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/CardKit/row-actions-to-menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C
|
|
1
|
+
{"version":3,"file":"row-actions-to-menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/CardKit/row-actions-to-menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,EACvB,GAAG,EAAE,CAAC,GACL,gBAAgB,EAAE,CAUpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sheet.body.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Sheet/Sheet.body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,UAAU,EACR,OAAO,GACP,aAAa,GACb,iBAAiB,GACjB,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,SAAS,GACT,SAAS,GACT,QAAQ,CACX;IACC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC/D;AA6BD;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"Sheet.body.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Sheet/Sheet.body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,UAAU,EACR,OAAO,GACP,aAAa,GACb,iBAAiB,GACjB,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,SAAS,GACT,SAAS,GACT,QAAQ,CACX;IACC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC/D;AA6BD;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmE9C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sheet.parts.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Sheet/Sheet.parts.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EACV,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,eAAe,CAAC;AAqEvB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2DlD,CAAC;AAOF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"Sheet.parts.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Sheet/Sheet.parts.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EACV,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,eAAe,CAAC;AAqEvB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2DlD,CAAC;AAOF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgBpD,CAAC;AAQF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0BlD,CAAC;AAOF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsBpD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sheet.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Sheet/Sheet.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,KAAK,QAAQ,GAAG,WAAW,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC;AACpD,KAAK,OAAO,GAAG,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;AAClD,KAAK,IAAI,GAAG,WAAW,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;AAC5C,KAAK,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Sheet.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Sheet/Sheet.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,KAAK,QAAQ,GAAG,WAAW,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC;AACpD,KAAK,OAAO,GAAG,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;AAClD,KAAK,IAAI,GAAG,WAAW,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;AAC5C,KAAK,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;AA0H9C,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,eAAe,EAAE,OAAO,CAAC;CAC1B;AA8HD,UAAU,YAAa,SAAQ,iBAAiB;IAC9C,IAAI,EAAE,IAAI,CAAC;IACX,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,KAAG,SA4B7C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/ContentToolbar/ContentToolbar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"ContentToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/ContentToolbar/ContentToolbar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AA0OlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,aAAa,EACb,SAAS,EACT,cAAc,EACd,aAAa,EACb,eAAe,EACf,OAAO,EACP,cAAc,EACd,eAAe,EACf,cAAc,EACd,SAAiB,EACjB,kBAA0B,EAC1B,cAAc,EACd,aAAa,EACb,YAAY,GACb,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkDzC"}
|
package/package.json
CHANGED
|
@@ -4,8 +4,9 @@ import type { RowAction } from '../DataViews';
|
|
|
4
4
|
/**
|
|
5
5
|
* Adapt a list of {@link RowAction}s into single-row kebab items.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
7
|
+
* Drops the actions that declare `row: false`, applies each survivor's
|
|
8
|
+
* `isVisible` guard, resolves its per-row `rowLabel` override, carries its
|
|
9
|
+
* colour, and fires `onSelect([row])` on click.
|
|
9
10
|
*
|
|
10
11
|
* The point is that ONE definition drives both surfaces. An entity that already
|
|
11
12
|
* declares its per-row actions as `RowAction[]` — because the table's multi-
|
|
@@ -13,12 +14,28 @@ import type { RowAction } from '../DataViews';
|
|
|
13
14
|
* `renderRowMenu` / `renderCard`, with no second list to keep in step. Two
|
|
14
15
|
* lists is how a "Duplicar" that appears in the table and not on the card
|
|
15
16
|
* happens, and nothing reports it.
|
|
17
|
+
*
|
|
18
|
+
* ## Why `row: false` is filtered HERE
|
|
19
|
+
*
|
|
20
|
+
* `row` and `bulk` are the flags that make one list serve two surfaces, so an
|
|
21
|
+
* adapter that ignores one of them defeats the arrangement it exists to
|
|
22
|
+
* support. This one did, and the result was a per-row "⋮" on Produtos offering
|
|
23
|
+
* "Inativar todos", "Destacar todos" and "Remover destaque de todos" beside
|
|
24
|
+
* that row's own "Inativar" and "Remover destaque" — bulk verbs on a menu whose
|
|
25
|
+
* every other entry means "this one", where "todos" reads as the whole
|
|
26
|
+
* catalogue and the click actually writes a single row.
|
|
27
|
+
*
|
|
28
|
+
* The bulk half was already honoured (`renderBulkActions` filters `bulk`), so
|
|
29
|
+
* only the kebab leaked. Filtering here fixes it for every surface that builds
|
|
30
|
+
* a kebab from `RowAction[]` — the table row, the grid card and the list card
|
|
31
|
+
* all arrive through this function.
|
|
16
32
|
*/
|
|
17
33
|
export function rowActionsToMenuItems<T extends Record<string, unknown>>(
|
|
18
34
|
actions: RowAction<T>[],
|
|
19
35
|
row: T,
|
|
20
36
|
): DropdownMenuItem[] {
|
|
21
37
|
return actions
|
|
38
|
+
.filter((action) => action.row !== false)
|
|
22
39
|
.filter((action) => action.isVisible?.(row) ?? true)
|
|
23
40
|
.map((action) => ({
|
|
24
41
|
id: action.id,
|
|
@@ -46,6 +46,49 @@ Everything below exists to keep that true. When a change breaks it, the fix is
|
|
|
46
46
|
another rung on the ladder — never a scrollbar, and never letting controls paint
|
|
47
47
|
outside the toolbar.
|
|
48
48
|
|
|
49
|
+
**"One line" is a rule about BROWSING.** Everything in this document describes
|
|
50
|
+
the row an operator reads a list from, and the ladder measures that row. The
|
|
51
|
+
selection row is a different row with different contents and no ladder at all —
|
|
52
|
+
see below.
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## The selection row
|
|
57
|
+
|
|
58
|
+
Tick a checkbox and `exclusiveSelection` hands the whole toolbar to the
|
|
59
|
+
selection cluster: the search, the filters, Exibir and Exportar all stand down,
|
|
60
|
+
and what is left is "Limpar filtros", the count, whatever the host puts in
|
|
61
|
+
`selectionExtra`, and the actions menu.
|
|
62
|
+
|
|
63
|
+
That cluster is not on the ladder, and it must not be. The ladder sheds controls
|
|
64
|
+
because each one it sheds has somewhere else to be — a filter into "Mais", a
|
|
65
|
+
label into an icon, "Limpar" into a panel footer. Nothing here does. Dropping
|
|
66
|
+
the count loses the only statement of what is about to be written to; dropping
|
|
67
|
+
"Ações" loses the reason the operator ticked anything.
|
|
68
|
+
|
|
69
|
+
**So below `md` it WRAPS instead**, which is the one thing the browsing row may
|
|
70
|
+
never do:
|
|
71
|
+
|
|
72
|
+
| | small mobile | large mobile | tablet | desktop |
|
|
73
|
+
| --- | --- | --- | --- | --- |
|
|
74
|
+
| checkbox + "Limpar filtros" + count | line 1 | line 1 | line 1 | line 1 |
|
|
75
|
+
| `selectionExtra` + "Ações" | line 2 | line 2 | line 2 | line 1 |
|
|
76
|
+
|
|
77
|
+
The break before `selectionExtra` is deliberate rather than wherever the row ran
|
|
78
|
+
out of room. What follows it is one thought — what the selection IS ("Seleção:
|
|
79
|
+
48 produtos — todas as páginas" and its "Limpar seleção") plus the control that
|
|
80
|
+
acts on it — and a natural wrap split that thought mid-phrase.
|
|
81
|
+
|
|
82
|
+
Before this, the cluster was pinned at content width with every child
|
|
83
|
+
`flex-shrink: 0`. On Produtos with the scope armed that is ~766px of controls,
|
|
84
|
+
so at 320 the row painted 446px past the toolbar's own edge and "Ações" sat
|
|
85
|
+
off-screen behind a sideways scroll of the document. The button the whole
|
|
86
|
+
selection exists to reach was the one you could not see.
|
|
87
|
+
|
|
88
|
+
`ContentToolbar.stories.tsx` → **NarrowSelectionOverflow** is that exact row.
|
|
89
|
+
Open it at 320 and 390; jsdom cannot see this failure, so no unit test can
|
|
90
|
+
guard it.
|
|
91
|
+
|
|
49
92
|
---
|
|
50
93
|
|
|
51
94
|
## The ladder
|
|
@@ -90,7 +90,12 @@ export const SheetBody: React.FC<SheetBodyProps> = (props) => {
|
|
|
90
90
|
onBlur={onBlur}
|
|
91
91
|
data-testid={testId}
|
|
92
92
|
sx={{
|
|
93
|
-
height
|
|
93
|
+
// A vertical sheet's panel is a column whose height is its CONTENT, up
|
|
94
|
+
// to the `size` ceiling — so this fills what the panel has rather than
|
|
95
|
+
// asking for a percentage of it, and `minHeight: 0` is what lets it
|
|
96
|
+
// shrink past its content so `SheetContent` scrolls instead of the
|
|
97
|
+
// panel overflowing. A side sheet's panel is full-height already.
|
|
98
|
+
...(isVerticalSheet ? { flex: '1 1 auto', minHeight: 0 } : { height: '100%' }),
|
|
94
99
|
display: 'flex',
|
|
95
100
|
flexDirection: 'column',
|
|
96
101
|
position: 'relative',
|
|
@@ -26,8 +26,10 @@ The Sheet component is ideal for:
|
|
|
26
26
|
### Positioning and Sizing
|
|
27
27
|
|
|
28
28
|
- **position** ('top' | 'right' | 'bottom' | 'left'): Edge from which the sheet slides (default: 'bottom')
|
|
29
|
-
- **size** ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'): Predefined size options (default: 'md'). For **side sheets** (`left`/`right`) the width is **viewport-aware**: a pixel floor keeps the panel usable while the larger presets grow with the screen — `lg` occupies ≥32% and `xl` ≥40% of the viewport on wide screens — and every preset is capped at `92vw` so it never overflows a small screen. `full` is always 100%.
|
|
30
|
-
- **fullHeight** (boolean): Expand the sheet along its **cross axis** — side sheets become full-height (keeping the `size` width); top/bottom sheets become full-width (keeping the `size` height)
|
|
29
|
+
- **size** ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'): Predefined size options (default: 'md'). For **side sheets** (`left`/`right`) the width is **viewport-aware**: a pixel floor keeps the panel usable while the larger presets grow with the screen — `lg` occupies ≥32% and `xl` ≥40% of the viewport on wide screens — and every preset is capped at `92vw` so it never overflows a small screen. `full` is always 100%. For **vertical sheets** (`top`/`bottom`) the preset is a **height ceiling, not a height**: the panel is as tall as its content and starts scrolling only once that would pass the preset, so a short sheet no longer reserves the rest of it as dead space.
|
|
30
|
+
- **fullHeight** (boolean): Expand the sheet along its **cross axis** — side sheets become full-height (keeping the `size` width); top/bottom sheets become full-width (keeping the `size` height ceiling). `size="full"` is the separate case: it means the whole viewport on **both** axes, for every position.
|
|
31
|
+
|
|
32
|
+
A vertical sheet's **width** is one rule rather than one per preset: `min(100%, 640px)`, centred. Full-bleed is a handset layout, and on a desktop it stranded a sentence and a button in a 1900px panel; 640px is Material's own ceiling for a bottom sheet above the handset breakpoint, and below it `100%` gives the phone back exactly what it had. `fullHeight` is the opt-out where a top/bottom sheet really does want the whole width.
|
|
31
33
|
|
|
32
34
|
### Visual Variants
|
|
33
35
|
|
|
@@ -159,6 +159,10 @@ export const SheetContent: React.FC<SheetContentProps> = (props) => {
|
|
|
159
159
|
<Box
|
|
160
160
|
className={className}
|
|
161
161
|
data-testid={dataTestId}
|
|
162
|
+
// No `minHeight: 0` here, deliberately: a flex item's automatic minimum
|
|
163
|
+
// size only applies while its main-axis `overflow` is `visible`, and this
|
|
164
|
+
// one is `auto`, so it already shrinks. `SheetBody` above is the item that
|
|
165
|
+
// needs it stated.
|
|
162
166
|
sx={{ flex: 1, overflow: 'auto', p: padded ? 2 : 0, ...style }}
|
|
163
167
|
>
|
|
164
168
|
{children}
|