@bwp-web/components 1.10.0 → 1.10.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 +47 -47
- package/dist/OrganizationSelector/OrganizationSelector.d.ts +1 -1
- package/dist/OrganizationSelector/OrganizationSelector.d.ts.map +1 -1
- package/dist/index.cjs +4 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,51 +22,51 @@ 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, 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
|
-
| `BiampHeaderMenuButton` | Self-hiding hamburger toggle for the `BiampLayout` responsive drawer — renders only when the layout is in drawer mode
|
|
40
|
-
| `BiampHeaderProfile` | Profile button with image or custom children (e.g. `UserInitialsIcon`)
|
|
41
|
-
| `BiampAppPopover` | Styled popover for the app-launcher content
|
|
42
|
-
| `BiampNotificationPopover` | Popover shell (flex column, capped `maxHeight`, `overflow: hidden`) whose children decide what stays fixed and what scrolls
|
|
43
|
-
| `BiampNotificationPopoverHeader` | Fixed (non-scrolling) region at the top of a `BiampNotificationPopover`
|
|
44
|
-
| `BiampNotificationPopoverBody` | Scrollable region of a `BiampNotificationPopover`; fills remaining height and scrolls its overflow
|
|
45
|
-
| `BiampListPopover` | Popover styled as a compact, bordered list container; wraps children in a dense, unpadded `List`
|
|
46
|
-
| `BiampListPopoverItem` | Clickable, hoverable dense row for use inside `BiampListPopover`
|
|
47
|
-
| `BiampListPopoverScrollArea` | Overflow-scrolling region for a long list of `BiampListPopoverItem`s (default `maxHeight` 340)
|
|
48
|
-
| `BiampCheckboxListPopover` | Checkbox-list popover with an optional "select all" row (the column-visibility menu styling, decoupled from any data source)
|
|
49
|
-
| `BiampBuildAppContent` | 2-column grid container for "Configure & Build" app tiles
|
|
50
|
-
| `BiampBuildAppContentItem` | App tile with image, name, description, and optional action button
|
|
51
|
-
| `BiampEndUserAppContent` | Responsive container for end-user app items: stack for one child, 2-column grid for many
|
|
52
|
-
| `BiampEndUserAppContentItem` | Row-style app item with image, name, description, and external link; supports `href`
|
|
53
|
-
| `BiampAppListContent` | Bordered flat-list container with rounded corners and dividers between items; use with `BiampAppListItem`
|
|
54
|
-
| `BiampAppListItem` | Horizontal row with a 40×40 icon, app name, and an optional inline `[Open \| ↗]` action group
|
|
55
|
-
| `BiampBanner` | Full-width animated notification banner
|
|
56
|
-
| `BiampBannerIcon` | Leading icon slot for `BiampBanner`
|
|
57
|
-
| `BiampBannerContent` | Center message slot for `BiampBanner`
|
|
58
|
-
| `BiampBannerActions` | Trailing actions slot for `BiampBanner`
|
|
59
|
-
| `BiampGlobalSearch` | Searchable autocomplete with icons, subtitles, chips, and keyboard hints
|
|
60
|
-
| `OrganizationSelector` | Styled outer container for an organization-switcher list (used inline or inside `OrganizationSelectorPopover`); `loading` shows a centered spinner
|
|
61
|
-
| `OrganizationItemList` | Bordered list grouping that auto-renders dividers between children; optional `label` divider below and `maxHeight` for sticky-footer scroll
|
|
62
|
-
| `OrganizationItem` | Single clickable row (logo, primary/secondary text, optional `meta` badge, chevron) built on `ListItemButton`; `isCurrent` hides chevron + adds ring |
|
|
63
|
-
| `OrganizationSelectorButton` | Minimal `ButtonBase` trigger with an `icon` (20×20 enforced), `name`, and a trailing chevron that flips on `open`
|
|
64
|
-
| `OrganizationSelectorPopover` | `Popover` pre-positioned bottom-right of the anchor, wrapping an `OrganizationSelector` (8px vertical offset from the trigger)
|
|
65
|
-
| `SegmentedButtonGroup` | Horizontal container for grouping segmented toggle buttons
|
|
66
|
-
| `SegmentedButton` | Individual toggle button for use inside `SegmentedButtonGroup`
|
|
67
|
-
| `BiampTable` | Composable data table with sorting, selection, pagination, and more
|
|
68
|
-
| `UserInitialsIcon` | Avatar-style icon showing a user's initials with a deterministic color
|
|
69
|
-
| `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
|
+
| `BiampHeaderMenuButton` | Self-hiding hamburger toggle for the `BiampLayout` responsive drawer — renders only when the layout is in drawer mode |
|
|
40
|
+
| `BiampHeaderProfile` | Profile button with image or custom children (e.g. `UserInitialsIcon`) |
|
|
41
|
+
| `BiampAppPopover` | Styled popover for the app-launcher content |
|
|
42
|
+
| `BiampNotificationPopover` | Popover shell (flex column, capped `maxHeight`, `overflow: hidden`) whose children decide what stays fixed and what scrolls |
|
|
43
|
+
| `BiampNotificationPopoverHeader` | Fixed (non-scrolling) region at the top of a `BiampNotificationPopover` |
|
|
44
|
+
| `BiampNotificationPopoverBody` | Scrollable region of a `BiampNotificationPopover`; fills remaining height and scrolls its overflow |
|
|
45
|
+
| `BiampListPopover` | Popover styled as a compact, bordered list container; wraps children in a dense, unpadded `List` |
|
|
46
|
+
| `BiampListPopoverItem` | Clickable, hoverable dense row for use inside `BiampListPopover` |
|
|
47
|
+
| `BiampListPopoverScrollArea` | Overflow-scrolling region for a long list of `BiampListPopoverItem`s (default `maxHeight` 340) |
|
|
48
|
+
| `BiampCheckboxListPopover` | Checkbox-list popover with an optional "select all" row (the column-visibility menu styling, decoupled from any data source) |
|
|
49
|
+
| `BiampBuildAppContent` | 2-column grid container for "Configure & Build" app tiles |
|
|
50
|
+
| `BiampBuildAppContentItem` | App tile with image, name, description, and optional action button |
|
|
51
|
+
| `BiampEndUserAppContent` | Responsive container for end-user app items: stack for one child, 2-column grid for many |
|
|
52
|
+
| `BiampEndUserAppContentItem` | Row-style app item with image, name, description, and external link; supports `href` |
|
|
53
|
+
| `BiampAppListContent` | Bordered flat-list container with rounded corners and dividers between items; use with `BiampAppListItem` |
|
|
54
|
+
| `BiampAppListItem` | Horizontal row with a 40×40 icon, app name, and an optional inline `[Open \| ↗]` action group |
|
|
55
|
+
| `BiampBanner` | Full-width animated notification banner |
|
|
56
|
+
| `BiampBannerIcon` | Leading icon slot for `BiampBanner` |
|
|
57
|
+
| `BiampBannerContent` | Center message slot for `BiampBanner` |
|
|
58
|
+
| `BiampBannerActions` | Trailing actions slot for `BiampBanner` |
|
|
59
|
+
| `BiampGlobalSearch` | Searchable autocomplete with icons, subtitles, chips, and keyboard hints |
|
|
60
|
+
| `OrganizationSelector` | Styled outer container for an organization-switcher list (used inline or inside `OrganizationSelectorPopover`); `loading` shows a centered spinner |
|
|
61
|
+
| `OrganizationItemList` | Bordered list grouping that auto-renders dividers between children; optional `label` divider below and `maxHeight` for sticky-footer scroll |
|
|
62
|
+
| `OrganizationItem` | Single clickable row (logo, primary/secondary text, optional `meta` badge, chevron) built on `ListItemButton`; `isCurrent` hides chevron + adds ring, `disabled` hides chevron + dims |
|
|
63
|
+
| `OrganizationSelectorButton` | Minimal `ButtonBase` trigger with an `icon` (20×20 enforced), `name`, and a trailing chevron that flips on `open` |
|
|
64
|
+
| `OrganizationSelectorPopover` | `Popover` pre-positioned bottom-right of the anchor, wrapping an `OrganizationSelector` (8px vertical offset from the trigger) |
|
|
65
|
+
| `SegmentedButtonGroup` | Horizontal container for grouping segmented toggle buttons |
|
|
66
|
+
| `SegmentedButton` | Individual toggle button for use inside `SegmentedButtonGroup` |
|
|
67
|
+
| `BiampTable` | Composable data table with sorting, selection, pagination, and more |
|
|
68
|
+
| `UserInitialsIcon` | Avatar-style icon showing a user's initials with a deterministic color |
|
|
69
|
+
| `DynamicSvgIcon` | Renders a remotely-fetched SVG with a skeleton loader and required fallback |
|
|
70
70
|
|
|
71
71
|
## Usage
|
|
72
72
|
|
|
@@ -361,7 +361,7 @@ A composable organization-switcher built from four exports:
|
|
|
361
361
|
|
|
362
362
|
- **`OrganizationSelector`** — the outer styled container (used inline or via the popover wrapper). Pass `loading` to swap children for a spinner.
|
|
363
363
|
- **`OrganizationItemList`** — bordered list grouping with auto-dividers between children. Optional `label` (renders a labeled divider below the list) and `maxHeight` (caps height + enables list-level scrolling for sticky-footer layouts).
|
|
364
|
-
- **`OrganizationItem`** — a single row (logo, primary/secondary text, optional right-side `meta`). Built on `ListItemButton`, so make it clickable by passing `onClick`, `component={Link} to={...}`, or `component="a" href={...}`. `isCurrent` hides the chevron, rings the logo, and disables interaction without dimming.
|
|
364
|
+
- **`OrganizationItem`** — a single row (logo, primary/secondary text, optional right-side `meta`). Built on `ListItemButton`, so make it clickable by passing `onClick`, `component={Link} to={...}`, or `component="a" href={...}`. `isCurrent` hides the chevron, rings the logo, and disables interaction without dimming. `disabled` also hides the chevron, but dims the row like a standard disabled button.
|
|
365
365
|
- **`OrganizationSelectorButton`** — a minimal trigger button (`icon` + `name`) intended to open `OrganizationSelectorPopover`. The `open` prop flips the trailing chevron between down and up. Most styling is left to the consumer.
|
|
366
366
|
- **`OrganizationSelectorPopover`** — a `Popover` pre-positioned bottom-right of its anchor with an 8px vertical offset; renders the inner `OrganizationSelector` for you.
|
|
367
367
|
|
|
@@ -435,7 +435,7 @@ function OrgSwitcher({ orgs, currentOrgId }) {
|
|
|
435
435
|
|
|
436
436
|
#### OrganizationItem Props
|
|
437
437
|
|
|
438
|
-
Extends `ListItemButtonProps` — `onClick`, `component`, `to`, `href`, `disabled`, `selected` all work natively.
|
|
438
|
+
Extends `ListItemButtonProps` — `onClick`, `component`, `to`, `href`, `disabled`, `selected` all work natively. Passing `disabled` also hides the chevron (like `isCurrent`), but still dims the row.
|
|
439
439
|
|
|
440
440
|
| Prop | Type | Default | Description |
|
|
441
441
|
| --------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------- |
|
|
@@ -41,7 +41,7 @@ type OrganizationItemProps = Omit<ListItemButtonProps, 'children'> & {
|
|
|
41
41
|
* A single row inside an `OrganizationItemList`. Spread `ListItem` props
|
|
42
42
|
* (e.g. `component={Link} to={...}` or `onClick={...}`) to make it clickable.
|
|
43
43
|
*/
|
|
44
|
-
export declare function OrganizationItem({ primaryText, secondaryText, meta, logo, isCurrent, sx, ...props }: OrganizationItemProps): import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
export declare function OrganizationItem({ primaryText, secondaryText, meta, logo, isCurrent, disabled, sx, ...props }: OrganizationItemProps): import("react/jsx-runtime").JSX.Element;
|
|
45
45
|
type OrganizationSelectorButtonProps = Omit<ButtonBaseProps, 'children'> & {
|
|
46
46
|
/**
|
|
47
47
|
* Leading visual — typically an image element representing the current
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrganizationSelector.d.ts","sourceRoot":"","sources":["../../src/OrganizationSelector/OrganizationSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,eAAe,EAMf,mBAAmB,EAEnB,YAAY,EAEZ,UAAU,EACV,OAAO,EACP,KAAK,EAEN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAsC,SAAS,EAAE,MAAM,OAAO,CAAC;AAOtE,KAAK,yBAAyB,GAAG,UAAU,GAAG;IAC5C,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,QAAQ,EACR,EAAE,EACF,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAyB3B;AAED,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,KAAK,EACL,SAAS,EACT,EAAE,GACH,EAAE,yBAAyB,2CA8B3B;AAED,KAAK,qBAAqB,GAAG,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,GAAG;IACnE,2EAA2E;IAC3E,WAAW,EAAE,SAAS,CAAC;IACvB,gDAAgD;IAChD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,iEAAiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAyBF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,SAAiB,EACjB,EAAE,EACF,GAAG,KAAK,EACT,EAAE,qBAAqB,
|
|
1
|
+
{"version":3,"file":"OrganizationSelector.d.ts","sourceRoot":"","sources":["../../src/OrganizationSelector/OrganizationSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,eAAe,EAMf,mBAAmB,EAEnB,YAAY,EAEZ,UAAU,EACV,OAAO,EACP,KAAK,EAEN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAsC,SAAS,EAAE,MAAM,OAAO,CAAC;AAOtE,KAAK,yBAAyB,GAAG,UAAU,GAAG;IAC5C,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,QAAQ,EACR,EAAE,EACF,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAyB3B;AAED,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,KAAK,EACL,SAAS,EACT,EAAE,GACH,EAAE,yBAAyB,2CA8B3B;AAED,KAAK,qBAAqB,GAAG,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,GAAG;IACnE,2EAA2E;IAC3E,WAAW,EAAE,SAAS,CAAC;IACvB,gDAAgD;IAChD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,iEAAiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAyBF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,SAAiB,EACjB,QAAQ,EACR,EAAE,EACF,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAwEvB;AAED,KAAK,+BAA+B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IACzE;;;;OAIG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB,6DAA6D;IAC7D,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,IAAI,EACJ,IAAI,EACJ,IAAY,EACZ,EAAE,EACF,GAAG,KAAK,EACT,EAAE,+BAA+B,2CAqCjC;AAED,KAAK,gCAAgC,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;IACvE,QAAQ,EAAE,SAAS,CAAC;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,eAAe,EACf,GAAG,KAAK,EACT,EAAE,gCAAgC,2CAoBlC"}
|
package/dist/index.cjs
CHANGED
|
@@ -3754,13 +3754,15 @@ function OrganizationItem({
|
|
|
3754
3754
|
meta,
|
|
3755
3755
|
logo,
|
|
3756
3756
|
isCurrent = false,
|
|
3757
|
+
disabled,
|
|
3757
3758
|
sx,
|
|
3758
3759
|
...props
|
|
3759
3760
|
}) {
|
|
3761
|
+
const hideChevron = isCurrent || Boolean(disabled);
|
|
3760
3762
|
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material26.ListItem, { disablePadding: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
3761
3763
|
import_material26.ListItemButton,
|
|
3762
3764
|
{
|
|
3763
|
-
disabled: isCurrent,
|
|
3765
|
+
disabled: disabled ?? isCurrent,
|
|
3764
3766
|
disableRipple: true,
|
|
3765
3767
|
sx: {
|
|
3766
3768
|
p: 1,
|
|
@@ -3821,7 +3823,7 @@ function OrganizationItem({
|
|
|
3821
3823
|
width: 16,
|
|
3822
3824
|
height: 16,
|
|
3823
3825
|
ml: "auto",
|
|
3824
|
-
visibility:
|
|
3826
|
+
visibility: hideChevron ? "hidden" : "visible"
|
|
3825
3827
|
}
|
|
3826
3828
|
}
|
|
3827
3829
|
)
|