@bwp-web/components 1.5.3 → 1.6.1
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 +40 -33
- package/dist/BiampSidebar/BiampSidebar.d.ts.map +1 -1
- package/dist/BiampTable/BiampTable.d.ts.map +1 -1
- package/dist/BiampTable/BiampTableContainer.d.ts.map +1 -1
- package/dist/BiampTable/cellSx.d.ts +1 -1
- package/dist/BiampTable/cellSx.d.ts.map +1 -1
- package/dist/BiampWrapper/BiampWrapper.d.ts +10 -1
- package/dist/BiampWrapper/BiampWrapper.d.ts.map +1 -1
- package/dist/index.cjs +26 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +26 -7
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,36 +22,36 @@ For `BiampTable` only:
|
|
|
22
22
|
|
|
23
23
|
## Components
|
|
24
24
|
|
|
25
|
-
| Component | Description
|
|
26
|
-
| ---------------------------- |
|
|
27
|
-
| `BiampLayout` | Full-page layout shell with optional header and sidebar slots
|
|
28
|
-
| `BiampWrapper` | Full-page content wrapper with padding, rounded corners, scrollable overflow,
|
|
29
|
-
| `BiampSidebar` | Expandable vertical sidebar (48px ↔ 240px) with animated toggle and copyright caption
|
|
30
|
-
| `BiampSidebarIconList` | Scrollable vertical list with 4px gaps for sidebar items; suppresses overscroll bounce
|
|
31
|
-
| `BiampSidebarIcon` | Selectable 48px-tall icon button for sidebar navigation, with optional `name` label
|
|
32
|
-
| `BiampSidebarComponent` | 48×48px rounded box for arbitrary sidebar content
|
|
33
|
-
| `BiampHeader` | Horizontal header container with padding
|
|
34
|
-
| `BiampHeaderTitle` | Title section with icon, optional title, and optional subtitle
|
|
35
|
-
| `BiampHeaderSearch` | Search input with leading search icon
|
|
36
|
-
| `BiampHeaderActions` | Flex container for grouping action buttons and profile
|
|
37
|
-
| `BiampHeaderButtonList` | Horizontal list with 4px gaps for header buttons
|
|
38
|
-
| `BiampHeaderButton` | Selectable 40×40px icon button for header actions
|
|
39
|
-
| `BiampHeaderProfile` | Profile button with image or custom children (e.g. `UserInitialsIcon`)
|
|
40
|
-
| `BiampAppPopover` | Styled popover for the app-launcher content
|
|
41
|
-
| `BiampBuildAppContent` | 2-column grid container for "Configure & Build" app tiles
|
|
42
|
-
| `BiampBuildAppContentItem` | App tile with image, name, description, and optional action button
|
|
43
|
-
| `BiampEndUserAppContent` | Responsive container for end-user app items: stack for one child, 2-column grid for many
|
|
44
|
-
| `BiampEndUserAppContentItem` | Row-style app item with image, name, description, and external link; supports `href`
|
|
45
|
-
| `BiampBanner` | Full-width animated notification banner
|
|
46
|
-
| `BiampBannerIcon` | Leading icon slot for `BiampBanner`
|
|
47
|
-
| `BiampBannerContent` | Center message slot for `BiampBanner`
|
|
48
|
-
| `BiampBannerActions` | Trailing actions slot for `BiampBanner`
|
|
49
|
-
| `BiampGlobalSearch` | Searchable autocomplete with icons, subtitles, chips, and keyboard hints
|
|
50
|
-
| `SegmentedButtonGroup` | Horizontal container for grouping segmented toggle buttons
|
|
51
|
-
| `SegmentedButton` | Individual toggle button for use inside `SegmentedButtonGroup`
|
|
52
|
-
| `BiampTable` | Composable data table with sorting, selection, pagination, and more
|
|
53
|
-
| `UserInitialsIcon` | Avatar-style icon showing a user's initials with a deterministic color
|
|
54
|
-
| `DynamicSvgIcon` | Renders a remotely-fetched SVG with a skeleton loader and required fallback
|
|
25
|
+
| Component | Description |
|
|
26
|
+
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
27
|
+
| `BiampLayout` | Full-page layout shell with optional header and sidebar slots |
|
|
28
|
+
| `BiampWrapper` | Full-page content wrapper with padding, rounded corners, scrollable overflow, an optional debounced loading bar, and an optional sticky top slot |
|
|
29
|
+
| `BiampSidebar` | Expandable vertical sidebar (48px ↔ 240px) with animated toggle and copyright caption |
|
|
30
|
+
| `BiampSidebarIconList` | Scrollable vertical list with 4px gaps for sidebar items; suppresses overscroll bounce |
|
|
31
|
+
| `BiampSidebarIcon` | Selectable 48px-tall icon button for sidebar navigation, with optional `name` label |
|
|
32
|
+
| `BiampSidebarComponent` | 48×48px rounded box for arbitrary sidebar content |
|
|
33
|
+
| `BiampHeader` | Horizontal header container with padding |
|
|
34
|
+
| `BiampHeaderTitle` | Title section with icon, optional title, and optional subtitle |
|
|
35
|
+
| `BiampHeaderSearch` | Search input with leading search icon |
|
|
36
|
+
| `BiampHeaderActions` | Flex container for grouping action buttons and profile |
|
|
37
|
+
| `BiampHeaderButtonList` | Horizontal list with 4px gaps for header buttons |
|
|
38
|
+
| `BiampHeaderButton` | Selectable 40×40px icon button for header actions |
|
|
39
|
+
| `BiampHeaderProfile` | Profile button with image or custom children (e.g. `UserInitialsIcon`) |
|
|
40
|
+
| `BiampAppPopover` | Styled popover for the app-launcher content |
|
|
41
|
+
| `BiampBuildAppContent` | 2-column grid container for "Configure & Build" app tiles |
|
|
42
|
+
| `BiampBuildAppContentItem` | App tile with image, name, description, and optional action button |
|
|
43
|
+
| `BiampEndUserAppContent` | Responsive container for end-user app items: stack for one child, 2-column grid for many |
|
|
44
|
+
| `BiampEndUserAppContentItem` | Row-style app item with image, name, description, and external link; supports `href` |
|
|
45
|
+
| `BiampBanner` | Full-width animated notification banner |
|
|
46
|
+
| `BiampBannerIcon` | Leading icon slot for `BiampBanner` |
|
|
47
|
+
| `BiampBannerContent` | Center message slot for `BiampBanner` |
|
|
48
|
+
| `BiampBannerActions` | Trailing actions slot for `BiampBanner` |
|
|
49
|
+
| `BiampGlobalSearch` | Searchable autocomplete with icons, subtitles, chips, and keyboard hints |
|
|
50
|
+
| `SegmentedButtonGroup` | Horizontal container for grouping segmented toggle buttons |
|
|
51
|
+
| `SegmentedButton` | Individual toggle button for use inside `SegmentedButtonGroup` |
|
|
52
|
+
| `BiampTable` | Composable data table with sorting, selection, pagination, and more |
|
|
53
|
+
| `UserInitialsIcon` | Avatar-style icon showing a user's initials with a deterministic color |
|
|
54
|
+
| `DynamicSvgIcon` | Renders a remotely-fetched SVG with a skeleton loader and required fallback |
|
|
55
55
|
|
|
56
56
|
## Usage
|
|
57
57
|
|
|
@@ -202,11 +202,18 @@ Pass `loading` to show a debounced `LinearProgress` bar pinned to the top of the
|
|
|
202
202
|
<BiampWrapper loading={isLoading}>{/* page content */}</BiampWrapper>
|
|
203
203
|
```
|
|
204
204
|
|
|
205
|
+
Pass `stickyTop` to pin header content to the wrapper's top edge. The slot extends edge-to-edge (ignoring the 16px padding) and stays visible while the rest of the content scrolls underneath it.
|
|
206
|
+
|
|
207
|
+
```tsx
|
|
208
|
+
<BiampWrapper stickyTop={<Header />}>{/* scrollable content */}</BiampWrapper>
|
|
209
|
+
```
|
|
210
|
+
|
|
205
211
|
#### BiampWrapper Props
|
|
206
212
|
|
|
207
|
-
| Prop
|
|
208
|
-
|
|
|
209
|
-
| `loading`
|
|
213
|
+
| Prop | Type | Default | Description |
|
|
214
|
+
| ----------- | ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
215
|
+
| `loading` | `boolean` | `false` | Shows a debounced `LinearProgress` bar at the top of the wrapper while truthy |
|
|
216
|
+
| `stickyTop` | `React.ReactNode` | — | Optional header content pinned to the wrapper's top edge (extends edge-to-edge, stays visible as the rest scrolls) |
|
|
210
217
|
|
|
211
218
|
### BiampSidebar
|
|
212
219
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BiampSidebar.d.ts","sourceRoot":"","sources":["../../src/BiampSidebar/BiampSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,mBAAmB,EAEnB,UAAU,EAEX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,GAAG,EAAuC,MAAM,OAAO,CAAC;AAUjE,KAAK,iBAAiB,GAAG,UAAU,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,cAAc,EACd,cAAc,EACd,UAAiB,EACjB,QAAQ,EAAE,YAAY,EACtB,eAAuB,EACvB,gBAAgB,EAChB,EAAE,EACF,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAmFnB;AAED,KAAK,oBAAoB,GAAG,UAAU,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,EAAE,EACF,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAgBtB;AAED,KAAK,qBAAqB,GAAG,mBAAmB,GAAG;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,EAAE,EACF,GAAG,KAAK,EACT,EAAE,qBAAqB,
|
|
1
|
+
{"version":3,"file":"BiampSidebar.d.ts","sourceRoot":"","sources":["../../src/BiampSidebar/BiampSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,mBAAmB,EAEnB,UAAU,EAEX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,GAAG,EAAuC,MAAM,OAAO,CAAC;AAUjE,KAAK,iBAAiB,GAAG,UAAU,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,cAAc,EACd,cAAc,EACd,UAAiB,EACjB,QAAQ,EAAE,YAAY,EACtB,eAAuB,EACvB,gBAAgB,EAChB,EAAE,EACF,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAmFnB;AAED,KAAK,oBAAoB,GAAG,UAAU,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,EAAE,EACF,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAgBtB;AAED,KAAK,qBAAqB,GAAG,mBAAmB,GAAG;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,EAAE,EACF,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA2DvB;AAED,KAAK,0BAA0B,GAAG,mBAAmB,GAAG;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,EAAE,EACF,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAoB5B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BiampTable.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,QAAQ,EAIb,KAAK,cAAc,IAAI,iBAAiB,EAExC,KAAK,cAAc,IAAI,iBAAiB,EAGxC,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,IAAI,aAAa,EAEhC,KAAK,aAAa,IAAI,gBAAgB,
|
|
1
|
+
{"version":3,"file":"BiampTable.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BiampTableContainer.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTableContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,MAAM,wBAAwB,GAAG;IACrC,uCAAuC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GAAG,UAAU,CAAC;AAEf,wBAAgB,mBAAmB,CAAC,EAClC,aAAoB,EACpB,gBAAwB,EACxB,QAAQ,EACR,EAAE,EACF,GAAG,KAAK,EACT,EAAE,wBAAwB,
|
|
1
|
+
{"version":3,"file":"BiampTableContainer.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTableContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,MAAM,wBAAwB,GAAG;IACrC,uCAAuC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GAAG,UAAU,CAAC;AAEf,wBAAgB,mBAAmB,CAAC,EAClC,aAAoB,EACpB,gBAAwB,EACxB,QAAQ,EACR,EAAE,EACF,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAwB1B"}
|
|
@@ -13,7 +13,7 @@ export declare function cellSx(sticky: 'left' | 'right' | undefined, minWidth: n
|
|
|
13
13
|
readonly width: 0;
|
|
14
14
|
readonly whiteSpace: "nowrap";
|
|
15
15
|
readonly textAlign: "center";
|
|
16
|
-
readonly bgcolor: "background.paper";
|
|
16
|
+
readonly bgcolor: (({ palette }: Theme) => string) | "background.paper";
|
|
17
17
|
minWidth?: undefined;
|
|
18
18
|
'&:has([data-truncate])'?: undefined;
|
|
19
19
|
} | {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cellSx.d.ts","sourceRoot":"","sources":["../../src/BiampTable/cellSx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,aAAa;;wCAEC,KAAK;;
|
|
1
|
+
{"version":3,"file":"cellSx.d.ts","sourceRoot":"","sources":["../../src/BiampTable/cellSx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,aAAa;;wCAEC,KAAK;;CAEtB,CAAC;AAEX,wBAAgB,MAAM,CACpB,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,EACpC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EACrC,MAAM,EAAE,MAAM;;wCAPW,KAAK;;;;;;;qCAmBR,KAAK;;;;;;;;;;EAc5B"}
|
|
@@ -3,6 +3,12 @@ import { StackProps } from '@mui/material';
|
|
|
3
3
|
export type BiampWrapperProps = StackProps & {
|
|
4
4
|
loading?: boolean;
|
|
5
5
|
children?: React.ReactNode;
|
|
6
|
+
/**
|
|
7
|
+
* Optional content pinned to the top of the wrapper. Extends edge-to-edge,
|
|
8
|
+
* ignoring the wrapper's 16px padding, and stays visible as the rest of
|
|
9
|
+
* the content scrolls underneath it.
|
|
10
|
+
*/
|
|
11
|
+
stickyTop?: React.ReactNode;
|
|
6
12
|
};
|
|
7
13
|
/**
|
|
8
14
|
* A full-page content wrapper that stretches to fill all available space
|
|
@@ -11,6 +17,9 @@ export type BiampWrapperProps = StackProps & {
|
|
|
11
17
|
*
|
|
12
18
|
* Optional `loading` shows a `LinearProgress` bar pinned to the top,
|
|
13
19
|
* debounced via `useLoadingDelay` so fast loads don't flicker.
|
|
20
|
+
*
|
|
21
|
+
* Optional `stickyTop` renders content flush against the wrapper's top edge
|
|
22
|
+
* (ignoring the 16px padding) and keeps it pinned while the rest scrolls.
|
|
14
23
|
*/
|
|
15
|
-
export declare function BiampWrapper({ loading, children, sx, ...props }: BiampWrapperProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export declare function BiampWrapper({ loading, children, stickyTop, sx, ...props }: BiampWrapperProps): import("react/jsx-runtime").JSX.Element;
|
|
16
25
|
//# sourceMappingURL=BiampWrapper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BiampWrapper.d.ts","sourceRoot":"","sources":["../../src/BiampWrapper/BiampWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA8B,UAAU,EAAE,MAAM,eAAe,CAAC;AAGvE,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"BiampWrapper.d.ts","sourceRoot":"","sources":["../../src/BiampWrapper/BiampWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA8B,UAAU,EAAE,MAAM,eAAe,CAAC;AAGvE,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAe,EACf,QAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAoDnB"}
|
package/dist/index.cjs
CHANGED
|
@@ -502,6 +502,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
502
502
|
function BiampWrapper({
|
|
503
503
|
loading = false,
|
|
504
504
|
children,
|
|
505
|
+
stickyTop,
|
|
505
506
|
sx,
|
|
506
507
|
...props
|
|
507
508
|
}) {
|
|
@@ -537,6 +538,21 @@ function BiampWrapper({
|
|
|
537
538
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.LinearProgress, {})
|
|
538
539
|
}
|
|
539
540
|
),
|
|
541
|
+
stickyTop && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
542
|
+
import_material.Box,
|
|
543
|
+
{
|
|
544
|
+
sx: {
|
|
545
|
+
position: "sticky",
|
|
546
|
+
top: -16,
|
|
547
|
+
mt: -2,
|
|
548
|
+
mx: -2,
|
|
549
|
+
mb: 2,
|
|
550
|
+
zIndex: 1,
|
|
551
|
+
backgroundColor: ({ palette }) => palette.background.paper
|
|
552
|
+
},
|
|
553
|
+
children: stickyTop
|
|
554
|
+
}
|
|
555
|
+
),
|
|
540
556
|
children
|
|
541
557
|
]
|
|
542
558
|
}
|
|
@@ -689,6 +705,9 @@ function BiampSidebarIcon({
|
|
|
689
705
|
padding: 0,
|
|
690
706
|
overflow: "hidden",
|
|
691
707
|
color: "text.secondary",
|
|
708
|
+
"&.Mui-selected": {
|
|
709
|
+
color: "primary.main"
|
|
710
|
+
},
|
|
692
711
|
...sx
|
|
693
712
|
},
|
|
694
713
|
...props,
|
|
@@ -1267,11 +1286,12 @@ function mergeSx(...inputs) {
|
|
|
1267
1286
|
// src/BiampTable/cellSx.ts
|
|
1268
1287
|
var stickyHoverBg = {
|
|
1269
1288
|
".MuiTableRow-hover:hover > &, .Mui-selected > &": {
|
|
1270
|
-
bgcolor: ({ palette }) => palette.
|
|
1289
|
+
bgcolor: ({ palette }) => palette.background.info
|
|
1271
1290
|
}
|
|
1272
1291
|
};
|
|
1273
1292
|
function cellSx(sticky, minWidth, zIndex) {
|
|
1274
1293
|
if (sticky) {
|
|
1294
|
+
const isHeader = zIndex >= 3;
|
|
1275
1295
|
return {
|
|
1276
1296
|
position: "sticky",
|
|
1277
1297
|
[sticky]: 0,
|
|
@@ -1279,8 +1299,8 @@ function cellSx(sticky, minWidth, zIndex) {
|
|
|
1279
1299
|
width: 0,
|
|
1280
1300
|
whiteSpace: "nowrap",
|
|
1281
1301
|
textAlign: "center",
|
|
1282
|
-
bgcolor: "background.paper",
|
|
1283
|
-
|
|
1302
|
+
bgcolor: isHeader ? ({ palette }) => palette.mode === "dark" ? palette.grey[900] : palette.background.paper : "background.paper",
|
|
1303
|
+
...!isHeader && stickyHoverBg
|
|
1284
1304
|
};
|
|
1285
1305
|
}
|
|
1286
1306
|
const mw = minWidth ?? 40;
|
|
@@ -1640,7 +1660,7 @@ var headerSelectionCellSx = {
|
|
|
1640
1660
|
position: "sticky",
|
|
1641
1661
|
left: 0,
|
|
1642
1662
|
zIndex: 3,
|
|
1643
|
-
bgcolor: "background.paper
|
|
1663
|
+
bgcolor: ({ palette }) => palette.mode === "dark" ? palette.grey[900] : palette.background.paper
|
|
1644
1664
|
};
|
|
1645
1665
|
var checkboxHiddenHeaderSx = { visibility: "hidden" };
|
|
1646
1666
|
function BiampTable({
|
|
@@ -1831,7 +1851,6 @@ function BiampTableContainer({
|
|
|
1831
1851
|
height: "100%",
|
|
1832
1852
|
overflow: "hidden",
|
|
1833
1853
|
pt: { xs: 0, md: 1.5 },
|
|
1834
|
-
gap: { xs: 0, md: 1 },
|
|
1835
1854
|
borderTop: withBorderTop ? ({ palette }) => `0.6px solid ${palette.divider}` : void 0,
|
|
1836
1855
|
borderBottom: withBorderBottom ? ({ palette }) => `0.6px solid ${palette.divider}` : void 0,
|
|
1837
1856
|
sx: { ...sx },
|
|
@@ -2755,7 +2774,7 @@ function SegmentedButton({
|
|
|
2755
2774
|
}) {
|
|
2756
2775
|
const theme = (0, import_material21.useTheme)();
|
|
2757
2776
|
const isDarkMode = theme.palette.mode === "dark";
|
|
2758
|
-
const backgroundColor = active ? isDarkMode ? theme.palette.grey[
|
|
2777
|
+
const backgroundColor = active ? isDarkMode ? theme.palette.grey[800] : theme.palette.common.white : "transparent";
|
|
2759
2778
|
const textColor = active ? theme.palette.text.primary : theme.palette.text.secondary;
|
|
2760
2779
|
const border = active ? "solid" : void 0;
|
|
2761
2780
|
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
@@ -2795,7 +2814,7 @@ function SegmentedButtonGroup({ children, sx, ...props }) {
|
|
|
2795
2814
|
borderRadius: "6px",
|
|
2796
2815
|
gap: 1,
|
|
2797
2816
|
sx: {
|
|
2798
|
-
backgroundColor: isDarkMode ? theme.palette.grey[
|
|
2817
|
+
backgroundColor: isDarkMode ? theme.palette.grey[900] : theme.palette.grey[100],
|
|
2799
2818
|
...sx
|
|
2800
2819
|
},
|
|
2801
2820
|
...props,
|