@bwp-web/components 1.0.1 → 1.0.3
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 +237 -0
- package/dist/BiampGlobalSearch/BiampGlobalSearch.d.ts +21 -0
- package/dist/BiampGlobalSearch/BiampGlobalSearch.d.ts.map +1 -0
- package/dist/BiampGlobalSearch/index.d.ts +3 -0
- package/dist/BiampGlobalSearch/index.d.ts.map +1 -0
- package/dist/index.cjs +348 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +355 -0
- package/dist/index.js.map +1 -1
- package/package.json +5 -3
package/README.md
ADDED
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
# @bwp-web/components
|
|
2
|
+
|
|
3
|
+
Shared React components for Biamp Workplace applications. Provides the full application shell — layout, header, sidebar, wrapper, banner, and table — built on MUI and styled to match the Biamp Workplace design system.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @bwp-web/components
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
### Peer Dependencies
|
|
12
|
+
|
|
13
|
+
- `@bwp-web/styles` >= 1.0.3
|
|
14
|
+
- `@bwp-web/assets` >= 1.0.1
|
|
15
|
+
- `@mui/material` >= 7.0.0
|
|
16
|
+
- `react` >= 18.0.0
|
|
17
|
+
- `react-dom` >= 18.0.0
|
|
18
|
+
|
|
19
|
+
For `BiampTable` only:
|
|
20
|
+
|
|
21
|
+
- `@tanstack/react-table` >= 8.0.0
|
|
22
|
+
|
|
23
|
+
## Components
|
|
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, and scrollable overflow |
|
|
29
|
+
| `BiampSidebar` | Fixed-width vertical sidebar with Biamp logo |
|
|
30
|
+
| `BiampSidebarIconList` | Vertical list with 4px gaps for sidebar items |
|
|
31
|
+
| `BiampSidebarIcon` | Selectable 48×48px icon button for sidebar navigation |
|
|
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 image button |
|
|
40
|
+
| `BiampAppPopover` | Styled popover for the app-launcher dialog |
|
|
41
|
+
| `BiampAppDialog` | Rounded dialog container for app-launcher grid |
|
|
42
|
+
| `BiampAppDialogItem` | Clickable app tile with children content and label |
|
|
43
|
+
| `BiampBanner` | Full-width animated notification banner |
|
|
44
|
+
| `BiampBannerIcon` | Leading icon slot for `BiampBanner` |
|
|
45
|
+
| `BiampBannerContent` | Center message slot for `BiampBanner` |
|
|
46
|
+
| `BiampBannerActions` | Trailing actions slot for `BiampBanner` |
|
|
47
|
+
| `BiampGlobalSearch` | Searchable autocomplete with icons, subtitles, chips, and keyboard hints |
|
|
48
|
+
| `SegmentedButtonGroup` | Horizontal container for grouping segmented toggle buttons |
|
|
49
|
+
| `SegmentedButton` | Individual toggle button for use inside `SegmentedButtonGroup` |
|
|
50
|
+
| `BiampTable` | Composable data table with sorting, selection, pagination, and more |
|
|
51
|
+
|
|
52
|
+
## Usage
|
|
53
|
+
|
|
54
|
+
### Full Application Shell
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
import { useState } from 'react';
|
|
58
|
+
import {
|
|
59
|
+
BiampLayout,
|
|
60
|
+
BiampHeader,
|
|
61
|
+
BiampHeaderTitle,
|
|
62
|
+
BiampHeaderSearch,
|
|
63
|
+
BiampHeaderActions,
|
|
64
|
+
BiampHeaderButtonList,
|
|
65
|
+
BiampHeaderButton,
|
|
66
|
+
BiampHeaderProfile,
|
|
67
|
+
BiampSidebar,
|
|
68
|
+
BiampSidebarIconList,
|
|
69
|
+
BiampSidebarIcon,
|
|
70
|
+
BiampWrapper,
|
|
71
|
+
} from '@bwp-web/components';
|
|
72
|
+
import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
|
|
73
|
+
import HomeIcon from '@mui/icons-material/Home';
|
|
74
|
+
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
|
|
75
|
+
import SettingsIcon from '@mui/icons-material/Settings';
|
|
76
|
+
import { Typography } from '@mui/material';
|
|
77
|
+
|
|
78
|
+
function App() {
|
|
79
|
+
const [selected, setSelected] = useState(0);
|
|
80
|
+
|
|
81
|
+
return (
|
|
82
|
+
<BiampLayout
|
|
83
|
+
header={
|
|
84
|
+
<BiampHeader>
|
|
85
|
+
<BiampHeaderTitle title="Dashboard" />
|
|
86
|
+
<BiampHeaderSearch />
|
|
87
|
+
<BiampHeaderActions>
|
|
88
|
+
<BiampHeaderButtonList>
|
|
89
|
+
<BiampHeaderButton
|
|
90
|
+
icon={<SettingsOutlinedIcon />}
|
|
91
|
+
selectedIcon={<SettingsIcon />}
|
|
92
|
+
/>
|
|
93
|
+
</BiampHeaderButtonList>
|
|
94
|
+
<BiampHeaderProfile image="https://i.pravatar.cc/32?img=1" />
|
|
95
|
+
</BiampHeaderActions>
|
|
96
|
+
</BiampHeader>
|
|
97
|
+
}
|
|
98
|
+
sidebar={
|
|
99
|
+
<BiampSidebar>
|
|
100
|
+
<BiampSidebarIconList>
|
|
101
|
+
<BiampSidebarIcon
|
|
102
|
+
selected={selected === 0}
|
|
103
|
+
icon={<HomeOutlinedIcon />}
|
|
104
|
+
selectedIcon={<HomeIcon />}
|
|
105
|
+
onClick={() => setSelected(0)}
|
|
106
|
+
/>
|
|
107
|
+
<BiampSidebarIcon
|
|
108
|
+
selected={selected === 1}
|
|
109
|
+
icon={<SettingsOutlinedIcon />}
|
|
110
|
+
selectedIcon={<SettingsIcon />}
|
|
111
|
+
onClick={() => setSelected(1)}
|
|
112
|
+
/>
|
|
113
|
+
</BiampSidebarIconList>
|
|
114
|
+
</BiampSidebar>
|
|
115
|
+
}
|
|
116
|
+
>
|
|
117
|
+
<BiampWrapper>
|
|
118
|
+
<Typography variant="h4" gutterBottom>
|
|
119
|
+
Page Content
|
|
120
|
+
</Typography>
|
|
121
|
+
</BiampWrapper>
|
|
122
|
+
</BiampLayout>
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### BiampBanner
|
|
128
|
+
|
|
129
|
+
A full-width notification banner that slides in and out with an animated `Collapse`. The background color and border are driven by the `severity` prop.
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
import { useState } from 'react';
|
|
133
|
+
import { Button } from '@mui/material';
|
|
134
|
+
import {
|
|
135
|
+
BiampBanner,
|
|
136
|
+
BiampBannerIcon,
|
|
137
|
+
BiampBannerContent,
|
|
138
|
+
BiampBannerActions,
|
|
139
|
+
} from '@bwp-web/components';
|
|
140
|
+
|
|
141
|
+
function App() {
|
|
142
|
+
const [show, setShow] = useState(true);
|
|
143
|
+
|
|
144
|
+
return (
|
|
145
|
+
<BiampBanner show={show} severity="info">
|
|
146
|
+
<BiampBannerIcon severity="info" />
|
|
147
|
+
<BiampBannerContent>
|
|
148
|
+
Your session will expire in 5 minutes.
|
|
149
|
+
</BiampBannerContent>
|
|
150
|
+
<BiampBannerActions>
|
|
151
|
+
<Button
|
|
152
|
+
size="small"
|
|
153
|
+
variant="outlined"
|
|
154
|
+
color="inherit"
|
|
155
|
+
onClick={() => setShow(false)}
|
|
156
|
+
>
|
|
157
|
+
Dismiss
|
|
158
|
+
</Button>
|
|
159
|
+
</BiampBannerActions>
|
|
160
|
+
</BiampBanner>
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
#### BiampBanner Props
|
|
166
|
+
|
|
167
|
+
| Prop | Type | Description |
|
|
168
|
+
| ---------- | --------------------------------------------- | -------------------------------------------------------------------------- |
|
|
169
|
+
| `show` | `boolean` | Controls visibility; animates in/out via `Collapse` |
|
|
170
|
+
| `severity` | `'error' \| 'warning' \| 'success' \| 'info'` | Sets the background color and border color |
|
|
171
|
+
| `children` | `React.ReactNode` | Compose with `BiampBannerIcon`, `BiampBannerContent`, `BiampBannerActions` |
|
|
172
|
+
|
|
173
|
+
### BiampLayout
|
|
174
|
+
|
|
175
|
+
Full-viewport (`100vh`) layout with optional `header` and `sidebar` slots. Applies responsive gap and padding automatically (12px on `xs`, 20px on `md`+).
|
|
176
|
+
|
|
177
|
+
#### BiampLayout Props
|
|
178
|
+
|
|
179
|
+
| Prop | Type | Description |
|
|
180
|
+
| ---------- | ----------------- | ------------------------------------------------------------------- |
|
|
181
|
+
| `header` | `React.ReactNode` | Optional header (typically a `BiampHeader`) |
|
|
182
|
+
| `sidebar` | `React.ReactNode` | Optional sidebar (typically a `BiampSidebar`) |
|
|
183
|
+
| `children` | `React.ReactNode` | Main content area — typically one or more `BiampWrapper` components |
|
|
184
|
+
|
|
185
|
+
### BiampWrapper
|
|
186
|
+
|
|
187
|
+
Full-page content wrapper with 16px padding, 8px border-radius, scrollable overflow, and a white (light mode) or `grey.800` (dark mode) background.
|
|
188
|
+
|
|
189
|
+
```tsx
|
|
190
|
+
<BiampWrapper>{/* page content */}</BiampWrapper>
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### BiampSidebar
|
|
194
|
+
|
|
195
|
+
Fixed 48px-wide vertical sidebar with the Biamp logo at the top.
|
|
196
|
+
|
|
197
|
+
#### BiampSidebarIcon Props
|
|
198
|
+
|
|
199
|
+
| Prop | Type | Description |
|
|
200
|
+
| -------------- | ----------------- | ------------------------------------- |
|
|
201
|
+
| `icon` | `React.ReactNode` | Icon shown when not selected |
|
|
202
|
+
| `selectedIcon` | `React.ReactNode` | Icon shown when selected |
|
|
203
|
+
| `selected` | `boolean` | Whether this item is currently active |
|
|
204
|
+
| `label` | `string` | Accessible label |
|
|
205
|
+
| `onClick` | `() => void` | Click handler |
|
|
206
|
+
|
|
207
|
+
### BiampHeader
|
|
208
|
+
|
|
209
|
+
Horizontal header container. Compose with `BiampHeaderTitle`, `BiampHeaderSearch`, `BiampHeaderActions`, `BiampHeaderButtonList`, `BiampHeaderButton`, and `BiampHeaderProfile`.
|
|
210
|
+
|
|
211
|
+
#### BiampHeaderTitle Props
|
|
212
|
+
|
|
213
|
+
| Prop | Type | Description |
|
|
214
|
+
| ---------- | ----------------- | ---------------------- |
|
|
215
|
+
| `icon` | `React.ReactNode` | Optional leading icon |
|
|
216
|
+
| `title` | `string` | Optional title text |
|
|
217
|
+
| `subtitle` | `string` | Optional subtitle text |
|
|
218
|
+
|
|
219
|
+
### BiampTable
|
|
220
|
+
|
|
221
|
+
A composable data table built on TanStack React Table v8 with support for sorting, row selection, pagination, column visibility, global search, column filters, and CSV export.
|
|
222
|
+
|
|
223
|
+
Requires `@tanstack/react-table` >= 8.0.0 as a peer dependency.
|
|
224
|
+
|
|
225
|
+
## Full Documentation
|
|
226
|
+
|
|
227
|
+
Detailed per-component docs are available in the repository's [`/docs`](../../docs) folder (GitHub links):
|
|
228
|
+
|
|
229
|
+
| Document | Contents |
|
|
230
|
+
| ----------------------------------------------------------- | ----------------------------------------------------------------------------------- |
|
|
231
|
+
| [biamp-layout.md](../../docs/biamp-layout.md) | `BiampLayout` — props, examples, design details |
|
|
232
|
+
| [biamp-wrapper.md](../../docs/biamp-wrapper.md) | `BiampWrapper` — props, examples, design details |
|
|
233
|
+
| [biamp-sidebar.md](../../docs/biamp-sidebar.md) | `BiampSidebar`, `BiampSidebarIconList`, `BiampSidebarIcon`, `BiampSidebarComponent` |
|
|
234
|
+
| [biamp-header.md](../../docs/biamp-header.md) | `BiampHeader` family + app-launcher components |
|
|
235
|
+
| [biamp-banner.md](../../docs/biamp-banner.md) | `BiampBanner` family — props, examples, design details |
|
|
236
|
+
| [biamp-global-search.md](../../docs/biamp-global-search.md) | `BiampGlobalSearch` — options, filtering, async loading, navigation |
|
|
237
|
+
| [biamp-table.md](../../docs/biamp-table.md) | `BiampTable` — columns, sorting, selection, pagination, filters, export |
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { AutocompleteProps } from '@mui/material';
|
|
3
|
+
import type { SxProps, Theme } from '@mui/material/styles';
|
|
4
|
+
export interface BiampGlobalSearchOption {
|
|
5
|
+
icon?: React.ReactNode;
|
|
6
|
+
title: string;
|
|
7
|
+
subtitle?: string;
|
|
8
|
+
associatedItems?: {
|
|
9
|
+
label: string;
|
|
10
|
+
}[];
|
|
11
|
+
endIcon?: React.ReactNode;
|
|
12
|
+
onClick?: () => void;
|
|
13
|
+
}
|
|
14
|
+
export type BiampGlobalSearchProps = Omit<AutocompleteProps<BiampGlobalSearchOption, false, false, true>, 'renderInput' | 'renderOption' | 'PaperComponent'> & {
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
noResultsText?: string;
|
|
17
|
+
inputSx?: SxProps<Theme>;
|
|
18
|
+
clearOnSelect?: boolean;
|
|
19
|
+
};
|
|
20
|
+
export declare function BiampGlobalSearch({ placeholder, noResultsText, options, inputValue: inputValueProp, loading, clearOnSelect, onChange, onInputChange, ...props }: BiampGlobalSearchProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
//# sourceMappingURL=BiampGlobalSearch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BiampGlobalSearch.d.ts","sourceRoot":"","sources":["../../src/BiampGlobalSearch/BiampGlobalSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAC;AACrE,OAAO,EAEL,iBAAiB,EAQlB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAO3D,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,iBAAiB,CAAC,uBAAuB,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,EAC9D,aAAa,GAAG,cAAc,GAAG,gBAAgB,CAClD,GAAG;IACF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAmSF,wBAAgB,iBAAiB,CAAC,EAChC,WAAyB,EACzB,aAAkC,EAClC,OAAY,EACZ,UAAU,EAAE,cAAc,EAC1B,OAAe,EACf,aAAoB,EACpB,QAAQ,EACR,aAAa,EACb,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAkGxB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/BiampGlobalSearch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,qBAAqB,CAAC"}
|
package/dist/index.cjs
CHANGED
|
@@ -38,6 +38,7 @@ __export(index_exports, {
|
|
|
38
38
|
BiampBannerActions: () => BiampBannerActions,
|
|
39
39
|
BiampBannerContent: () => BiampBannerContent,
|
|
40
40
|
BiampBannerIcon: () => BiampBannerIcon,
|
|
41
|
+
BiampGlobalSearch: () => BiampGlobalSearch,
|
|
41
42
|
BiampHeader: () => BiampHeader,
|
|
42
43
|
BiampHeaderActions: () => BiampHeaderActions,
|
|
43
44
|
BiampHeaderButton: () => BiampHeaderButton,
|
|
@@ -1972,6 +1973,352 @@ function SegmentedButtonGroup({ children, sx, ...props }) {
|
|
|
1972
1973
|
}
|
|
1973
1974
|
);
|
|
1974
1975
|
}
|
|
1976
|
+
|
|
1977
|
+
// src/BiampGlobalSearch/BiampGlobalSearch.tsx
|
|
1978
|
+
var import_react11 = require("react");
|
|
1979
|
+
var import_material21 = require("@mui/material");
|
|
1980
|
+
var import_assets11 = require("@bwp-web/assets");
|
|
1981
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1982
|
+
var SearchContext = (0, import_react11.createContext)({
|
|
1983
|
+
hasOptions: true,
|
|
1984
|
+
loading: false,
|
|
1985
|
+
noResultsText: "No results found",
|
|
1986
|
+
query: ""
|
|
1987
|
+
});
|
|
1988
|
+
function KeyCap({
|
|
1989
|
+
children,
|
|
1990
|
+
variant = "icon"
|
|
1991
|
+
}) {
|
|
1992
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1993
|
+
import_material21.Box,
|
|
1994
|
+
{
|
|
1995
|
+
component: "kbd",
|
|
1996
|
+
sx: {
|
|
1997
|
+
display: "inline-flex",
|
|
1998
|
+
alignItems: "center",
|
|
1999
|
+
justifyContent: "center",
|
|
2000
|
+
minWidth: 20,
|
|
2001
|
+
height: 20,
|
|
2002
|
+
px: variant === "text" ? "8px" : 0.5,
|
|
2003
|
+
borderRadius: "4px",
|
|
2004
|
+
bgcolor: "grey.100",
|
|
2005
|
+
color: "grey.400",
|
|
2006
|
+
fontFamily: "inherit",
|
|
2007
|
+
fontSize: "caption.fontSize",
|
|
2008
|
+
fontStyle: "normal",
|
|
2009
|
+
fontWeight: (theme) => theme.typography.fontWeightMedium,
|
|
2010
|
+
border: "none",
|
|
2011
|
+
"& svg": { width: 12, height: 12 }
|
|
2012
|
+
},
|
|
2013
|
+
children
|
|
2014
|
+
}
|
|
2015
|
+
);
|
|
2016
|
+
}
|
|
2017
|
+
var BiampGlobalSearchPaper = (0, import_react11.forwardRef)(
|
|
2018
|
+
function BiampGlobalSearchPaper2({ children, ...props }, ref) {
|
|
2019
|
+
const { hasOptions, loading, noResultsText } = (0, import_react11.useContext)(SearchContext);
|
|
2020
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material21.Paper, { ref, ...props, children: [
|
|
2021
|
+
hasOptions || loading ? children : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2022
|
+
import_material21.Typography,
|
|
2023
|
+
{
|
|
2024
|
+
variant: "body2",
|
|
2025
|
+
color: "text.secondary",
|
|
2026
|
+
sx: { px: 2, py: 1.5 },
|
|
2027
|
+
children: noResultsText
|
|
2028
|
+
}
|
|
2029
|
+
),
|
|
2030
|
+
hasOptions && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2031
|
+
import_material21.Box,
|
|
2032
|
+
{
|
|
2033
|
+
sx: {
|
|
2034
|
+
borderTop: ({ palette }) => `0.6px solid ${palette.dividers.secondary}`,
|
|
2035
|
+
display: "flex",
|
|
2036
|
+
alignItems: "center",
|
|
2037
|
+
gap: 1,
|
|
2038
|
+
p: 1.5
|
|
2039
|
+
},
|
|
2040
|
+
children: [
|
|
2041
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material21.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
|
|
2042
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material21.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
|
|
2043
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(KeyCap, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_assets11.KeyArrowDownIcon, {}) }),
|
|
2044
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(KeyCap, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_assets11.KeyArrowUpIcon, {}) })
|
|
2045
|
+
] }),
|
|
2046
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2047
|
+
import_material21.Typography,
|
|
2048
|
+
{
|
|
2049
|
+
variant: "caption",
|
|
2050
|
+
fontWeight: (theme) => theme.typography.fontWeightMedium,
|
|
2051
|
+
color: "text.secondary",
|
|
2052
|
+
children: "Select"
|
|
2053
|
+
}
|
|
2054
|
+
)
|
|
2055
|
+
] }),
|
|
2056
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material21.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
|
|
2057
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(KeyCap, { variant: "text", children: "Enter" }),
|
|
2058
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2059
|
+
import_material21.Typography,
|
|
2060
|
+
{
|
|
2061
|
+
variant: "caption",
|
|
2062
|
+
fontWeight: (theme) => theme.typography.fontWeightMedium,
|
|
2063
|
+
color: "text.secondary",
|
|
2064
|
+
children: "Open"
|
|
2065
|
+
}
|
|
2066
|
+
)
|
|
2067
|
+
] })
|
|
2068
|
+
]
|
|
2069
|
+
}
|
|
2070
|
+
)
|
|
2071
|
+
] });
|
|
2072
|
+
}
|
|
2073
|
+
);
|
|
2074
|
+
function HighlightText({ text, query }) {
|
|
2075
|
+
if (!query) return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: text });
|
|
2076
|
+
const index = text.toLowerCase().indexOf(query.toLowerCase());
|
|
2077
|
+
if (index === -1) return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: text });
|
|
2078
|
+
const before = text.slice(0, index);
|
|
2079
|
+
const match = text.slice(index, index + query.length);
|
|
2080
|
+
const after = text.slice(index + query.length);
|
|
2081
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
2082
|
+
before,
|
|
2083
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2084
|
+
import_material21.Box,
|
|
2085
|
+
{
|
|
2086
|
+
component: "span",
|
|
2087
|
+
sx: {
|
|
2088
|
+
bgcolor: "background.info",
|
|
2089
|
+
borderRadius: "4px",
|
|
2090
|
+
color: "info.main",
|
|
2091
|
+
paddingTop: "2px",
|
|
2092
|
+
paddingBottom: "2px"
|
|
2093
|
+
},
|
|
2094
|
+
children: match
|
|
2095
|
+
}
|
|
2096
|
+
),
|
|
2097
|
+
after
|
|
2098
|
+
] });
|
|
2099
|
+
}
|
|
2100
|
+
function BiampGlobalSearchListItem({
|
|
2101
|
+
option,
|
|
2102
|
+
props: liProps
|
|
2103
|
+
}) {
|
|
2104
|
+
const { query } = (0, import_react11.useContext)(SearchContext);
|
|
2105
|
+
const { key, ...rest } = liProps;
|
|
2106
|
+
const maxChips = 3;
|
|
2107
|
+
const chips = option.associatedItems?.slice(0, maxChips) ?? [];
|
|
2108
|
+
const overflow = (option.associatedItems?.length ?? 0) - maxChips;
|
|
2109
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2110
|
+
"li",
|
|
2111
|
+
{
|
|
2112
|
+
...rest,
|
|
2113
|
+
style: {
|
|
2114
|
+
display: "flex",
|
|
2115
|
+
alignItems: "center",
|
|
2116
|
+
width: "100%",
|
|
2117
|
+
gap: 8,
|
|
2118
|
+
...rest.style
|
|
2119
|
+
},
|
|
2120
|
+
children: [
|
|
2121
|
+
option.icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2122
|
+
import_material21.Box,
|
|
2123
|
+
{
|
|
2124
|
+
sx: {
|
|
2125
|
+
width: 24,
|
|
2126
|
+
height: 24,
|
|
2127
|
+
flexShrink: 0,
|
|
2128
|
+
display: "flex",
|
|
2129
|
+
alignItems: "center",
|
|
2130
|
+
justifyContent: "center"
|
|
2131
|
+
},
|
|
2132
|
+
children: option.icon
|
|
2133
|
+
}
|
|
2134
|
+
),
|
|
2135
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material21.Typography, { variant: "body2", noWrap: true, sx: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(HighlightText, { text: option.title, query }) }),
|
|
2136
|
+
option.subtitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2137
|
+
import_material21.Typography,
|
|
2138
|
+
{
|
|
2139
|
+
className: "hoverContent",
|
|
2140
|
+
variant: "body2",
|
|
2141
|
+
color: "text.secondary",
|
|
2142
|
+
noWrap: true,
|
|
2143
|
+
sx: { flexShrink: 1, minWidth: 0, display: "none" },
|
|
2144
|
+
children: option.subtitle
|
|
2145
|
+
}
|
|
2146
|
+
),
|
|
2147
|
+
chips.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2148
|
+
import_material21.Box,
|
|
2149
|
+
{
|
|
2150
|
+
className: "hoverContent",
|
|
2151
|
+
sx: {
|
|
2152
|
+
display: "none",
|
|
2153
|
+
alignItems: "center",
|
|
2154
|
+
gap: 1,
|
|
2155
|
+
ml: "auto",
|
|
2156
|
+
flexShrink: 0,
|
|
2157
|
+
px: 2
|
|
2158
|
+
},
|
|
2159
|
+
children: [
|
|
2160
|
+
chips.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2161
|
+
import_material21.Chip,
|
|
2162
|
+
{
|
|
2163
|
+
size: "small",
|
|
2164
|
+
label: item.label,
|
|
2165
|
+
sx: {
|
|
2166
|
+
bgcolor: "background.info",
|
|
2167
|
+
borderRadius: "2px",
|
|
2168
|
+
borderColor: ({ palette }) => palette.dividers.primary,
|
|
2169
|
+
padding: "0px 6px",
|
|
2170
|
+
"& .MuiChip-label": {
|
|
2171
|
+
typography: "caption",
|
|
2172
|
+
fontWeight: (theme) => theme.typography.fontWeightMedium
|
|
2173
|
+
}
|
|
2174
|
+
}
|
|
2175
|
+
},
|
|
2176
|
+
i
|
|
2177
|
+
)),
|
|
2178
|
+
overflow > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2179
|
+
import_material21.Chip,
|
|
2180
|
+
{
|
|
2181
|
+
size: "small",
|
|
2182
|
+
label: `+${overflow}`,
|
|
2183
|
+
sx: {
|
|
2184
|
+
bgcolor: "background.info",
|
|
2185
|
+
borderRadius: "2px",
|
|
2186
|
+
borderColor: ({ palette }) => palette.dividers.primary,
|
|
2187
|
+
padding: "0px 6px",
|
|
2188
|
+
"& .MuiChip-label": {
|
|
2189
|
+
typography: "caption",
|
|
2190
|
+
fontWeight: (theme) => theme.typography.fontWeightMedium
|
|
2191
|
+
}
|
|
2192
|
+
}
|
|
2193
|
+
}
|
|
2194
|
+
)
|
|
2195
|
+
]
|
|
2196
|
+
}
|
|
2197
|
+
),
|
|
2198
|
+
option.endIcon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2199
|
+
import_material21.Box,
|
|
2200
|
+
{
|
|
2201
|
+
className: "endIcon",
|
|
2202
|
+
sx: {
|
|
2203
|
+
width: 48,
|
|
2204
|
+
height: 48,
|
|
2205
|
+
flexShrink: 0,
|
|
2206
|
+
display: "flex",
|
|
2207
|
+
alignItems: "center",
|
|
2208
|
+
justifyContent: "center",
|
|
2209
|
+
ml: chips.length > 0 ? 0 : "auto",
|
|
2210
|
+
visibility: "hidden",
|
|
2211
|
+
"& .MuiSvgIcon-root": { fontSize: 14 }
|
|
2212
|
+
},
|
|
2213
|
+
children: option.endIcon
|
|
2214
|
+
}
|
|
2215
|
+
)
|
|
2216
|
+
]
|
|
2217
|
+
},
|
|
2218
|
+
key
|
|
2219
|
+
);
|
|
2220
|
+
}
|
|
2221
|
+
function BiampGlobalSearch({
|
|
2222
|
+
placeholder = "Search...",
|
|
2223
|
+
noResultsText = "No results found",
|
|
2224
|
+
options = [],
|
|
2225
|
+
inputValue: inputValueProp,
|
|
2226
|
+
loading = false,
|
|
2227
|
+
clearOnSelect = true,
|
|
2228
|
+
onChange,
|
|
2229
|
+
onInputChange,
|
|
2230
|
+
...props
|
|
2231
|
+
}) {
|
|
2232
|
+
const hasOptions = options.length > 0;
|
|
2233
|
+
const handleChange = (event, value, reason, details) => {
|
|
2234
|
+
if (value && typeof value !== "string" && value.onClick) {
|
|
2235
|
+
value.onClick();
|
|
2236
|
+
}
|
|
2237
|
+
onChange?.(event, value, reason, details);
|
|
2238
|
+
};
|
|
2239
|
+
const handleInputChange = (event, value, reason) => {
|
|
2240
|
+
if (clearOnSelect && (reason === "selectOption" || reason === "reset")) {
|
|
2241
|
+
onInputChange?.(event, "", reason);
|
|
2242
|
+
return;
|
|
2243
|
+
}
|
|
2244
|
+
onInputChange?.(event, value, reason);
|
|
2245
|
+
};
|
|
2246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2247
|
+
SearchContext.Provider,
|
|
2248
|
+
{
|
|
2249
|
+
value: {
|
|
2250
|
+
hasOptions,
|
|
2251
|
+
loading,
|
|
2252
|
+
noResultsText,
|
|
2253
|
+
query: inputValueProp ?? ""
|
|
2254
|
+
},
|
|
2255
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2256
|
+
import_material21.Autocomplete,
|
|
2257
|
+
{
|
|
2258
|
+
options,
|
|
2259
|
+
inputValue: inputValueProp,
|
|
2260
|
+
loading,
|
|
2261
|
+
onChange: handleChange,
|
|
2262
|
+
onInputChange: handleInputChange,
|
|
2263
|
+
loadingText: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material21.Typography, { variant: "body2", color: "text.secondary", children: "Loading\u2026" }),
|
|
2264
|
+
freeSolo: true,
|
|
2265
|
+
filterOptions: (x) => x,
|
|
2266
|
+
getOptionLabel: (option) => typeof option === "string" ? option : option.title,
|
|
2267
|
+
noOptionsText: noResultsText,
|
|
2268
|
+
slots: { paper: BiampGlobalSearchPaper },
|
|
2269
|
+
slotProps: {
|
|
2270
|
+
listbox: {
|
|
2271
|
+
sx: {
|
|
2272
|
+
"& .MuiAutocomplete-option": {
|
|
2273
|
+
paddingRight: "0px !important"
|
|
2274
|
+
},
|
|
2275
|
+
"& li:hover .hoverContent, & li.Mui-focused .hoverContent": {
|
|
2276
|
+
display: "flex"
|
|
2277
|
+
},
|
|
2278
|
+
"& li:hover p.hoverContent, & li.Mui-focused p.hoverContent": {
|
|
2279
|
+
display: "block"
|
|
2280
|
+
},
|
|
2281
|
+
"& li:hover .endIcon, & li.Mui-focused .endIcon": {
|
|
2282
|
+
visibility: "visible"
|
|
2283
|
+
}
|
|
2284
|
+
}
|
|
2285
|
+
}
|
|
2286
|
+
},
|
|
2287
|
+
renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2288
|
+
import_material21.TextField,
|
|
2289
|
+
{
|
|
2290
|
+
...params,
|
|
2291
|
+
placeholder,
|
|
2292
|
+
fullWidth: true,
|
|
2293
|
+
sx: {
|
|
2294
|
+
"& .MuiOutlinedInput-root": { padding: "0px !important" },
|
|
2295
|
+
"& .MuiInputBase-input": { paddingLeft: "8px !important" }
|
|
2296
|
+
},
|
|
2297
|
+
slotProps: {
|
|
2298
|
+
input: {
|
|
2299
|
+
...params.InputProps,
|
|
2300
|
+
startAdornment: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
2301
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material21.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_assets11.SearchIcon, {}) }),
|
|
2302
|
+
params.InputProps.startAdornment
|
|
2303
|
+
] })
|
|
2304
|
+
}
|
|
2305
|
+
}
|
|
2306
|
+
}
|
|
2307
|
+
),
|
|
2308
|
+
renderOption: (optionProps, option) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2309
|
+
BiampGlobalSearchListItem,
|
|
2310
|
+
{
|
|
2311
|
+
option,
|
|
2312
|
+
props: optionProps
|
|
2313
|
+
},
|
|
2314
|
+
optionProps.key
|
|
2315
|
+
),
|
|
2316
|
+
...props
|
|
2317
|
+
}
|
|
2318
|
+
)
|
|
2319
|
+
}
|
|
2320
|
+
);
|
|
2321
|
+
}
|
|
1975
2322
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1976
2323
|
0 && (module.exports = {
|
|
1977
2324
|
BIAMP_TABLE_DEBOUNCE_DELAY,
|
|
@@ -1982,6 +2329,7 @@ function SegmentedButtonGroup({ children, sx, ...props }) {
|
|
|
1982
2329
|
BiampBannerActions,
|
|
1983
2330
|
BiampBannerContent,
|
|
1984
2331
|
BiampBannerIcon,
|
|
2332
|
+
BiampGlobalSearch,
|
|
1985
2333
|
BiampHeader,
|
|
1986
2334
|
BiampHeaderActions,
|
|
1987
2335
|
BiampHeaderButton,
|