@proounce/shared-common 0.0.0-stage → 0.1.0

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/LICENSE ADDED
@@ -0,0 +1,16 @@
1
+ GC360 Proprietary Software License
2
+
3
+ Copyright (c) 2026 Proounce. All rights reserved.
4
+
5
+ This software and its associated documentation are proprietary and
6
+ confidential. Use, reproduction, modification, distribution, publication, or
7
+ disclosure is permitted only with prior written authorization from Proounce and
8
+ only in accordance with the applicable agreement governing the authorized
9
+ user or organization.
10
+
11
+ Access to this package does not grant any ownership interest or any license
12
+ except the limited rights expressly provided by such an agreement.
13
+
14
+ THE SOFTWARE IS PROVIDED UNDER THE TERMS OF THE APPLICABLE AGREEMENT. EXCEPT
15
+ AS EXPRESSLY PROVIDED IN THAT AGREEMENT, NO WARRANTIES OR CONDITIONS, EXPRESS
16
+ OR IMPLIED, ARE GRANTED.
package/README.md CHANGED
@@ -1,3 +1,431 @@
1
- # Temporary Holding Version
1
+ # @proounce/shared-common
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ Reusable, API-free React components for GC360 front-end applications. The
4
+ library extracts and modernizes presentation components from
5
+ `prj241001_fe_shared-base-components` while removing application state, API,
6
+ router, and shared-utility coupling.
7
+
8
+ ## Requirements
9
+
10
+ - Node.js 20 or newer
11
+ - React 18 (`^18.2.0`), matching the GC360 single-spa applications
12
+ - Material UI 5 and Emotion 11
13
+ - MUI X Date Pickers 5 and Day.js for date inputs
14
+ - FusionCharts only when using the chart entry point
15
+
16
+ ## Installation
17
+
18
+ ```sh
19
+ npm install @proounce/shared-common
20
+ ```
21
+
22
+ npm reports any peer dependencies that are not already installed by the host
23
+ application.
24
+
25
+ This is a public npm package and can be downloaded without membership in the
26
+ `proounce` organization. It remains covered by the repository's proprietary
27
+ license; public availability does not grant rights beyond that license.
28
+
29
+ ## Component imports
30
+
31
+ Import components and TypeScript types from the package root:
32
+
33
+ ```tsx
34
+ import {
35
+ ActionIcon,
36
+ AdvancedDropDownList,
37
+ DataTable,
38
+ SearchInput,
39
+ SharedButton,
40
+ type DataTableColumn,
41
+ type DropDownOption,
42
+ } from "@proounce/shared-common";
43
+ ```
44
+
45
+ The root entry point is safe to import in Node and server-rendered applications.
46
+
47
+ ## Buttons and actions
48
+
49
+ `ActionIcon` and `ActionIconButton` support the action purposes carried over
50
+ from the legacy shared-base package.
51
+
52
+ ```tsx
53
+ import { ActionIcon, ActionIconButton } from "@proounce/shared-common";
54
+
55
+ export function RowActions() {
56
+ return (
57
+ <>
58
+ <ActionIcon purpose="edit" title="Edit record" onClick={() => {}} />
59
+ <ActionIconButton
60
+ purpose="download"
61
+ title="Download report"
62
+ onClick={() => {}}
63
+ />
64
+ </>
65
+ );
66
+ }
67
+ ```
68
+
69
+ All 270 unique purposes from the legacy `action-icon-data` and
70
+ `action-icon-button-data` files are represented in `ActionIconData`.
71
+
72
+ ## Dropdowns
73
+
74
+ Dropdown options use an `id` for the submitted value and `value` for the
75
+ visible label. Change events retain the legacy `{ target: { name, value } }`
76
+ shape to simplify migration.
77
+
78
+ ```tsx
79
+ import {
80
+ AdvancedDropDownList,
81
+ type DropDownOption,
82
+ } from "@proounce/shared-common";
83
+
84
+ const options: DropDownOption<number>[] = [
85
+ { id: 1, value: "First option" },
86
+ { id: 2, value: "Second option" },
87
+ ];
88
+
89
+ export function Example() {
90
+ return (
91
+ <AdvancedDropDownList
92
+ id="selection"
93
+ label="Selection"
94
+ value={1}
95
+ options={options}
96
+ onChange={(event) => console.log(event.target.value)}
97
+ />
98
+ );
99
+ }
100
+ ```
101
+
102
+ Supported dropdown exports include:
103
+
104
+ - `AdvancedDropDownList` and `MuiAdvancedDropDownList`
105
+ - `StyledAdvanceDropDownList`
106
+ - `GenericAdvanceDropDownList` and `GenericAdvancedSelect`
107
+ - `DropDownList` and `DropDownWithMessage`
108
+ - `MultiSelectDropDownList`
109
+ - `GroupedMultiSelectDropDown` and `MuiGroupedMultiSelectDropDown`
110
+ - `FloatingAdvanceDropDownList` and `FloatingMultiSelectDropDownList`
111
+ - `DropDownListWithImage` for options with a visual identifier
112
+ - `EmailSuggestionInput`, `EmailSuggestionMuiTextBox`, and
113
+ `EmailSuggestionTextBox` for free-form recipient chips
114
+
115
+ ## Tables
116
+
117
+ `DataTable` provides stable client-side sorting, pagination, loading skeletons,
118
+ custom cell rendering, row actions, and typed columns.
119
+
120
+ ```tsx
121
+ import { DataTable, type DataTableColumn } from "@proounce/shared-common";
122
+
123
+ interface Person {
124
+ id: number;
125
+ name: string;
126
+ status: string;
127
+ }
128
+
129
+ const columns: DataTableColumn<Person>[] = [
130
+ { field: "name", header: "Name" },
131
+ { field: "status", header: "Status", sortable: false },
132
+ ];
133
+
134
+ export function PeopleTable({ rows }: { rows: Person[] }) {
135
+ return <DataTable rows={rows} columns={columns} getRowKey={(row) => row.id} />;
136
+ }
137
+ ```
138
+
139
+ Legacy columns using `title` instead of `header` are also accepted. Styled
140
+ table cells, rows, and skeleton table bodies are exported separately. This
141
+ includes `StyledTableCell`, `StyledBorderedTableCell`,
142
+ `StyledLinesBorderedTableCell`, `StickyTableCell`, `StickyFooterTableCell`,
143
+ `HighlightedTableCell`, `TableCellWithInfo`, `StyledTableSortLabel`, and their
144
+ documented legacy aliases.
145
+
146
+ Legacy common-table contracts are available as real typed wrappers rather than
147
+ name-only aliases:
148
+
149
+ - `CommonTable` and `CustomTable`
150
+ - `CommonSearchTable`
151
+ - `PaginationTable` for controlled/server pagination
152
+ - `CommonSelectionTable`
153
+ - `CommonSelectionValidateTable`
154
+ - `CommonSelectionStickyTable` and `CustomStickyTable`
155
+ - `GenericCustomTable` for the shared generic selection/action modes
156
+
157
+ These wrappers accept the legacy `data`, `columns`, `title`, `sorting`,
158
+ `render(row)`, `primaryColId`, `selected`, and `setSelected` properties while
159
+ remaining API-free. New code can use `DataTable` directly.
160
+
161
+ The former generic table's nested columns are flattened to accessible leaf
162
+ headers. Its highly specialized column-configuration dialog and calculated
163
+ business totals are not silently emulated; applications should compose those
164
+ features through table actions and column renderers.
165
+
166
+ ## Styled surfaces
167
+
168
+ Reusable styled surfaces include `StyledCard`, `StyledKpiCard`,
169
+ `CustomAccordion`, `CustomAccordionSummary`, `CustomAccordionDetails`,
170
+ `StyledTabs`, `StyledTab`, `StyledReadOnlyTextField`, and the styled table
171
+ primitives. All styling is theme-aware and applications can override it with
172
+ MUI theme configuration or `sx` properties.
173
+
174
+ ## Standalone feedback and form components
175
+
176
+ The root entry point also includes standalone components missed by the first
177
+ migration pass:
178
+
179
+ - `StatusDialog`, `ProcessingModal`, `SuccessModal`, `ErrorModal`, and
180
+ `WarningModal`
181
+ - `ErrorPage` plus router-independent 401, 403, 404, menu-not-found, and 500
182
+ presets
183
+ - `AccessError`, `AccessLoader`, `ExpandableComment`/`CommentExpand`, and status
184
+ blinkers
185
+ - `FormulaIcon`, `FormulaInfoIcon`/`FormulaInfoWithIcon`, and
186
+ `NameDescriptionPopover`/`NameDescPopover`
187
+ - `BlueHeaderText`, `BoldText`, `ContentWrapper`, `QuestionTextWrapper`,
188
+ `PercentageInput`, `TextInput`, `TextInputWithLabel`,
189
+ `TextInputWithLabelIcon`, and `CurrencyInputWithLabelIcon`
190
+ - `OptionSelectorWithLabel`, `OptionMultiSelectorWithLabel`,
191
+ `MandatoryIndicatorWithText`, and `RequestModalGridItem`
192
+ - `CustomDropZone`, `MainSelector`, `TeslaStyleScrollIndicator`, and
193
+ `SelectWithTable`
194
+ - `DocumentationCard`, `AppHelp`, `CardComponent`,
195
+ `CardComponentWithActions`, and `OperationsInfo`
196
+ - `CustomTransition`, `DialogAction`, and `useDisplayOrder`
197
+
198
+ These are modern replacements rather than byte-for-byte copies. They use MUI
199
+ theme tokens and semantic controls instead of Tailwind classes, clickable
200
+ `div` elements, or unmanaged portals.
201
+
202
+ ## Charts
203
+
204
+ FusionCharts is isolated in a browser-only entry point so importing the main
205
+ package does not evaluate browser globals during server rendering.
206
+
207
+ ```tsx
208
+ import {
209
+ CommonChart,
210
+ ColumnChart,
211
+ DoughnutChart,
212
+ FusionChart,
213
+ LineChart,
214
+ } from "@proounce/shared-common/charts/fusion";
215
+
216
+ <ColumnChart
217
+ height={320}
218
+ dataSource={{
219
+ chart: { caption: "Requests" },
220
+ data: [{ label: "Open", value: "12" }],
221
+ }}
222
+ />;
223
+ ```
224
+
225
+ For the legacy common-chart contract, pass display metadata and chart items
226
+ directly. Consumers do not need to construct the full FusionCharts data source:
227
+
228
+ ```tsx
229
+ <CommonChart
230
+ type="column2d"
231
+ title="Requests by status"
232
+ xAxisName="Status"
233
+ yAxisName="Requests"
234
+ items={[
235
+ { label: "Open", value: 12 },
236
+ { label: "Closed", value: 28 },
237
+ ]}
238
+ showTypeSelector
239
+ showDataTable
240
+ />
241
+ ```
242
+
243
+ The chart entry point exports:
244
+
245
+ - `FusionChart` for raw FusionCharts `dataSource` configuration
246
+ - `CommonChart` for the shared `title`, axes and `items` contract
247
+ - `BarChart`, `ColumnChart`/`ChartColumn2D`, and `DoughnutChart`, accepting
248
+ either the legacy common contract or a raw `dataSource`
249
+ - `LineChart`, `AreaChart`, and `PieChart`
250
+ - `GenericChart`, `GenericChartCDMS`, `FusionDefaultCharts`,
251
+ `FusionDefaultChartsPF`, and `FusionDefaultChartsPH` compatibility exports
252
+
253
+ `CommonChart` can expose a native HTML data table as the chart alternative and
254
+ can provide an accessible chart-type selector. Map and congressional-map
255
+ packages are not loaded by this common entry point because their FusionCharts
256
+ map definitions are large and geography-specific.
257
+
258
+ Chart data and the optional FusionCharts license key are supplied by the host
259
+ application. The component never requests them from an API.
260
+
261
+ ## Icons
262
+
263
+ Icons use dedicated entry points:
264
+
265
+ ```tsx
266
+ import {
267
+ AddIcon,
268
+ EditOutlinedIcon,
269
+ } from "@proounce/shared-common/icons/mui";
270
+ import { Download, Search } from "@proounce/shared-common/icons/lucide";
271
+ ```
272
+
273
+ The MUI entry point exports only the registry required by shared and action
274
+ components, plus selected legacy `*Icon` aliases. The Lucide entry point
275
+ contains a curated UI/action set. Neither entry point wildcard-exports its
276
+ underlying icon library.
277
+
278
+ Icons rendered internally by a shared component need no import in the
279
+ consuming application. Import an icon only when the application renders that
280
+ icon itself, using the curated `icons/mui` or `icons/lucide` subpath.
281
+
282
+ ## AG Grid
283
+
284
+ AG Grid is an optional browser-oriented entry point and is not included when
285
+ applications import the package root:
286
+
287
+ ```sh
288
+ npm install ag-grid-react ag-grid-community
289
+ ```
290
+
291
+ ```tsx
292
+ import {
293
+ CustomGridHeaderCellWithInfo,
294
+ CustomGridTable,
295
+ type ColDef,
296
+ } from "@proounce/shared-common/grids/ag-grid";
297
+
298
+ interface Person {
299
+ id: string;
300
+ name: string;
301
+ }
302
+
303
+ const columns: ColDef<Person>[] = [
304
+ { field: "name", headerName: "Name" },
305
+ ];
306
+
307
+ <CustomGridTable
308
+ ariaLabel="People"
309
+ data={[{ id: "1", name: "Ada" }]}
310
+ columns={columns}
311
+ getRowId={({ data }) => data.id}
312
+ enableSelection
313
+ onSelect={(rows) => console.log(rows)}
314
+ />;
315
+ ```
316
+
317
+ The wrapper targets the platform's AG Grid 34 line and supplies community
318
+ modules directly to the grid. It supports pinned totals, loading state,
319
+ optional pagination, typed column definitions and keyboard-accessible multi-row
320
+ selection. `CustomGridHeaderCellWithInfo`
321
+ provides sortable headers with accessible information and formula actions.
322
+ Applications should always provide `getRowId` when rows can be reordered or
323
+ updated.
324
+
325
+ ## Main component groups
326
+
327
+ - Actions, buttons, and icon buttons
328
+ - Text, search, select, date, textarea, and checkbox inputs
329
+ - Single, multiple, grouped, floating, and searchable dropdowns
330
+ - Data tables and styled table primitives
331
+ - Labels, read-only values, and mandatory indicators
332
+ - Tooltips, alerts, loading spinners, and skeletons
333
+ - Tabs, tab panels, toggle buttons, and switches
334
+ - Confirmation dialogs
335
+ - FusionCharts wrappers and presets
336
+ - File input, empty/error states, skip links and live regions
337
+ - Status dialogs, error-page presets, expandable comments and formula details
338
+
339
+ ## Legacy compatibility
340
+
341
+ Common legacy names are retained where the new component has an equivalent:
342
+
343
+ - `Button` and `StyledButton` map to `SharedButton`
344
+ - `IconButton` maps to `SharedIconButton`
345
+ - `TextField` and `StyledTextField` map to `SharedTextField`
346
+ - `DatePicker` and `NormalDatePicker` map to `DateInput`
347
+ - `CommonTable` and `CustomTable` are typed wrappers around the modern table
348
+ primitives and retain their legacy column contract
349
+
350
+ Application-bound screens, review/reporting workflows, user app bars, Redux
351
+ hooks, and components importing `@gc360/shared-utilities` are intentionally not
352
+ included.
353
+
354
+ The package also does not re-export generic MUI components, `dayjs`, adapters,
355
+ or styling functions. Applications should import those from their owning
356
+ packages. This prevents version ambiguity and keeps the public API focused on
357
+ components maintained here.
358
+
359
+ ## Local development
360
+
361
+ ```sh
362
+ npm ci
363
+ npm run check
364
+ npm pack --dry-run
365
+ ```
366
+
367
+ | Command | Purpose |
368
+ | --- | --- |
369
+ | `npm run typecheck` | Run strict TypeScript validation |
370
+ | `npm run build` | Generate ESM, CommonJS, and declaration files |
371
+ | `npm run check` | Type-check, run accessibility tests, and build |
372
+ | `npm pack --dry-run` | Inspect the npm package contents |
373
+
374
+ Generated files are written to `dist/` and should not be edited manually.
375
+
376
+ ## Accessibility
377
+
378
+ Components are designed as WCAG 2.2-ready foundations: controls have accessible
379
+ names, shared buttons meet a 40px minimum target, MUI widgets retain keyboard
380
+ and focus behavior, form errors are textual, table rows support keyboard
381
+ activation, tabs can be explicitly linked to panels, and dialogs use MUI focus
382
+ management. Representative components are checked with axe-core in `npm test`;
383
+ the current suite covers 15 component and interaction scenarios.
384
+
385
+ Form controls also support `backupName` for legacy call sites that do not pass a
386
+ visible label, `name`, or `id`:
387
+
388
+ ```tsx
389
+ <SharedTextField backupName="Budget amount" />
390
+ <AdvancedDropDownList backupName="Funding source" options={options} />
391
+ ```
392
+
393
+ Accessible names are resolved in this order: associated visible label,
394
+ explicit `aria-label`, human-readable `name`, human-readable caller-provided
395
+ `id`, then `backupName`. Internal `useId()` values provide unique DOM identity
396
+ but are never exposed as the control's accessible name. A visible label remains
397
+ the preferred choice; backup names protect legacy and dynamically composed
398
+ screens from producing unnamed controls.
399
+
400
+ Automated checks cannot establish conformance for an application. Consumers
401
+ must test their theme contrast, content, responsive layouts, focus order,
402
+ validation flows, charts, and end-to-end journeys with keyboard and assistive
403
+ technology.
404
+
405
+ See [the component audit](docs/COMPONENT_AUDIT.md) for migration coverage,
406
+ intentional exclusions, and compatibility decisions.
407
+
408
+ ## Jenkins publishing
409
+
410
+ The included `Jenkinsfile` performs these stages:
411
+
412
+ 1. Checkout the repository.
413
+ 2. Optionally apply a patch, minor, or major version bump.
414
+ 3. Install dependencies with `npm ci`.
415
+ 4. Type-check, build, and inspect the npm package.
416
+ 5. Request manual approval when publishing is enabled.
417
+ 6. Publish the public scoped package to npm.
418
+
419
+ Configure a Jenkins secret-text credential named `npm-token` using a token
420
+ owned by an authorized publisher. That npm user must have permission to publish
421
+ packages in the `proounce` organization. Publishing is disabled by default;
422
+ enable the `PUBLISH_TO_NPM` parameter for a release build.
423
+ The pipeline removes its temporary npm authentication file after completion.
424
+ The package is published with public visibility. Installation does not require
425
+ an npm organization membership or authentication token.
426
+
427
+ ## Design boundary
428
+
429
+ This package must remain presentation-focused. Shared components receive data,
430
+ callbacks, loading state, and errors through props. Do not add direct `fetch`,
431
+ Axios, Redux store, router, or application-service dependencies.
@@ -0,0 +1,252 @@
1
+ 'use strict';
2
+
3
+ var FusionCharts = require('fusioncharts');
4
+ var charts = require('fusioncharts/fusioncharts.charts.js');
5
+ var ReactFusioncharts = require('react-fusioncharts');
6
+ var react = require('react');
7
+ var jsxRuntime = require('react/jsx-runtime');
8
+ var MenuItem = require('@mui/material/MenuItem');
9
+ var Stack = require('@mui/material/Stack');
10
+ var TextField = require('@mui/material/TextField');
11
+ var Typography = require('@mui/material/Typography');
12
+
13
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
14
+
15
+ var FusionCharts__default = /*#__PURE__*/_interopDefault(FusionCharts);
16
+ var charts__default = /*#__PURE__*/_interopDefault(charts);
17
+ var ReactFusioncharts__default = /*#__PURE__*/_interopDefault(ReactFusioncharts);
18
+ var MenuItem__default = /*#__PURE__*/_interopDefault(MenuItem);
19
+ var Stack__default = /*#__PURE__*/_interopDefault(Stack);
20
+ var TextField__default = /*#__PURE__*/_interopDefault(TextField);
21
+ var Typography__default = /*#__PURE__*/_interopDefault(Typography);
22
+
23
+ // src/charts/FusionChart.tsx
24
+ var fusionRegistered = false;
25
+ function FusionChart({
26
+ type,
27
+ dataSource,
28
+ width = "100%",
29
+ height = 400,
30
+ events,
31
+ licenseKey,
32
+ loadingFallback = null,
33
+ "aria-label": ariaLabel = "Chart"
34
+ }) {
35
+ const [registered, setRegistered] = react.useState(fusionRegistered);
36
+ const [licenseReady, setLicenseReady] = react.useState(!licenseKey);
37
+ react.useEffect(() => {
38
+ if (!fusionRegistered) {
39
+ ReactFusioncharts__default.default.fcRoot(FusionCharts__default.default, charts__default.default);
40
+ fusionRegistered = true;
41
+ }
42
+ setRegistered(true);
43
+ }, []);
44
+ react.useEffect(() => {
45
+ let active = true;
46
+ if (!licenseKey) {
47
+ setLicenseReady(true);
48
+ return void 0;
49
+ }
50
+ setLicenseReady(false);
51
+ void Promise.resolve(licenseKey).then((key) => {
52
+ const options = FusionCharts__default.default.options;
53
+ options.license({ key, creditLabel: false });
54
+ if (active) setLicenseReady(true);
55
+ });
56
+ return () => {
57
+ active = false;
58
+ };
59
+ }, [licenseKey]);
60
+ if (!registered || !licenseReady) return loadingFallback;
61
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(
62
+ ReactFusioncharts__default.default,
63
+ {
64
+ type,
65
+ width,
66
+ height,
67
+ dataFormat: "json",
68
+ dataSource,
69
+ ...events ? { events } : {}
70
+ }
71
+ ) });
72
+ }
73
+ function FusionBarChart(props) {
74
+ return /* @__PURE__ */ jsxRuntime.jsx(FusionChart, { type: "bar2d", ...props });
75
+ }
76
+ function FusionColumnChart(props) {
77
+ return /* @__PURE__ */ jsxRuntime.jsx(FusionChart, { type: "column2d", ...props });
78
+ }
79
+ function FusionDoughnutChart(props) {
80
+ return /* @__PURE__ */ jsxRuntime.jsx(FusionChart, { type: "doughnut2d", ...props });
81
+ }
82
+ var GenericChart = FusionChart;
83
+ var FusionDefaultCharts = FusionChart;
84
+ var GenericChartCDMS = FusionChart;
85
+ var FusionDefaultChartsPF = FusionChart;
86
+ var FusionDefaultChartsPH = FusionChart;
87
+ var DEFAULT_CHART_TYPES = [
88
+ { value: "column2d", label: "Column" },
89
+ { value: "bar2d", label: "Bar" },
90
+ { value: "line", label: "Line" },
91
+ { value: "area2d", label: "Area" },
92
+ { value: "pie2d", label: "Pie" },
93
+ { value: "doughnut2d", label: "Doughnut" }
94
+ ];
95
+ function CommonChart({
96
+ type = "column2d",
97
+ title,
98
+ caption,
99
+ subCaption,
100
+ xAxisName,
101
+ yAxisName,
102
+ items,
103
+ chartOptions,
104
+ selectableTypes = DEFAULT_CHART_TYPES,
105
+ showTypeSelector = false,
106
+ selectorLabel = "Chart type",
107
+ description,
108
+ showDataTable = false,
109
+ dataTableLabel = "View chart data",
110
+ onTypeChange,
111
+ "aria-label": ariaLabel,
112
+ ...chartProps
113
+ }) {
114
+ const [selectedType, setSelectedType] = react.useState(null);
115
+ const activeType = selectedType ?? type;
116
+ const dataSource = react.useMemo(
117
+ () => ({
118
+ chart: {
119
+ caption: caption ?? (typeof title === "string" ? title : void 0),
120
+ subCaption,
121
+ xAxisName,
122
+ yAxisName,
123
+ baseFont: "Inter, sans-serif",
124
+ baseFontSize: "13",
125
+ showBorder: "0",
126
+ showCanvasBorder: "0",
127
+ usePlotGradientColor: "0",
128
+ showPlotBorder: "0",
129
+ showShadow: "0",
130
+ showLegend: "1",
131
+ legendPosition: "bottom",
132
+ labelDisplay: "rotate",
133
+ slantLabels: "1",
134
+ maxColWidth: "15",
135
+ maxBarHeight: "15",
136
+ animation: "1",
137
+ ...chartOptions
138
+ },
139
+ data: [...items]
140
+ }),
141
+ [caption, chartOptions, items, subCaption, title, xAxisName, yAxisName]
142
+ );
143
+ const accessibleName = ariaLabel ?? caption ?? (typeof title === "string" ? title : "Chart");
144
+ return /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { component: "section", spacing: 1.5, "aria-label": accessibleName, children: [
145
+ title || showTypeSelector ? /* @__PURE__ */ jsxRuntime.jsxs(
146
+ Stack__default.default,
147
+ {
148
+ direction: { xs: "column", sm: "row" },
149
+ alignItems: { xs: "stretch", sm: "center" },
150
+ justifyContent: "space-between",
151
+ gap: 1,
152
+ children: [
153
+ title ? /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { component: "h2", variant: "h6", children: title }) : null,
154
+ showTypeSelector ? /* @__PURE__ */ jsxRuntime.jsx(
155
+ TextField__default.default,
156
+ {
157
+ select: true,
158
+ size: "small",
159
+ label: selectorLabel,
160
+ value: activeType,
161
+ onChange: (event) => {
162
+ setSelectedType(event.target.value);
163
+ onTypeChange?.(event.target.value);
164
+ },
165
+ sx: { minWidth: 160 },
166
+ children: selectableTypes.map((option) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem__default.default, { value: option.value, children: option.label }, option.value))
167
+ }
168
+ ) : null
169
+ ]
170
+ }
171
+ ) : null,
172
+ description ? /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { color: "text.secondary", children: description }) : null,
173
+ /* @__PURE__ */ jsxRuntime.jsx(
174
+ FusionChart,
175
+ {
176
+ type: activeType,
177
+ dataSource,
178
+ "aria-label": accessibleName,
179
+ ...chartProps
180
+ }
181
+ ),
182
+ showDataTable ? /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
183
+ /* @__PURE__ */ jsxRuntime.jsx("summary", { children: dataTableLabel }),
184
+ /* @__PURE__ */ jsxRuntime.jsxs("table", { children: [
185
+ /* @__PURE__ */ jsxRuntime.jsx("caption", { children: accessibleName }),
186
+ /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
187
+ /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Label" }),
188
+ /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Value" })
189
+ ] }) }),
190
+ /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
191
+ /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "row", children: item.label }),
192
+ /* @__PURE__ */ jsxRuntime.jsx("td", { children: item.displayValue ?? item.value })
193
+ ] }, item.label)) })
194
+ ] })
195
+ ] }) : null
196
+ ] });
197
+ }
198
+ function CommonBarChart(props) {
199
+ return /* @__PURE__ */ jsxRuntime.jsx(CommonChart, { type: "bar2d", ...props });
200
+ }
201
+ function CommonColumnChart(props) {
202
+ return /* @__PURE__ */ jsxRuntime.jsx(CommonChart, { type: "column2d", ...props });
203
+ }
204
+ function LineChart(props) {
205
+ return /* @__PURE__ */ jsxRuntime.jsx(CommonChart, { type: "line", ...props });
206
+ }
207
+ function AreaChart(props) {
208
+ return /* @__PURE__ */ jsxRuntime.jsx(CommonChart, { type: "area2d", ...props });
209
+ }
210
+ function PieChart(props) {
211
+ return /* @__PURE__ */ jsxRuntime.jsx(CommonChart, { type: "pie2d", ...props });
212
+ }
213
+ function CommonDoughnutChart(props) {
214
+ return /* @__PURE__ */ jsxRuntime.jsx(CommonChart, { type: "doughnut2d", ...props });
215
+ }
216
+ function isRawPreset(props) {
217
+ return "dataSource" in props;
218
+ }
219
+ function BarChart(props) {
220
+ return isRawPreset(props) ? /* @__PURE__ */ jsxRuntime.jsx(FusionChart, { type: "bar2d", ...props }) : /* @__PURE__ */ jsxRuntime.jsx(CommonBarChart, { ...props });
221
+ }
222
+ function ColumnChart(props) {
223
+ return isRawPreset(props) ? /* @__PURE__ */ jsxRuntime.jsx(FusionChart, { type: "column2d", ...props }) : /* @__PURE__ */ jsxRuntime.jsx(CommonColumnChart, { ...props });
224
+ }
225
+ var ChartColumn2D = ColumnChart;
226
+ function DoughnutChart(props) {
227
+ return isRawPreset(props) ? /* @__PURE__ */ jsxRuntime.jsx(FusionChart, { type: "doughnut2d", ...props }) : /* @__PURE__ */ jsxRuntime.jsx(CommonDoughnutChart, { ...props });
228
+ }
229
+
230
+ exports.AreaChart = AreaChart;
231
+ exports.BarChart = BarChart;
232
+ exports.ChartColumn2D = ChartColumn2D;
233
+ exports.ColumnChart = ColumnChart;
234
+ exports.CommonBarChart = CommonBarChart;
235
+ exports.CommonChart = CommonChart;
236
+ exports.CommonColumnChart = CommonColumnChart;
237
+ exports.CommonDoughnutChart = CommonDoughnutChart;
238
+ exports.DEFAULT_CHART_TYPES = DEFAULT_CHART_TYPES;
239
+ exports.DoughnutChart = DoughnutChart;
240
+ exports.FusionBarChart = FusionBarChart;
241
+ exports.FusionChart = FusionChart;
242
+ exports.FusionColumnChart = FusionColumnChart;
243
+ exports.FusionDefaultCharts = FusionDefaultCharts;
244
+ exports.FusionDefaultChartsPF = FusionDefaultChartsPF;
245
+ exports.FusionDefaultChartsPH = FusionDefaultChartsPH;
246
+ exports.FusionDoughnutChart = FusionDoughnutChart;
247
+ exports.GenericChart = GenericChart;
248
+ exports.GenericChartCDMS = GenericChartCDMS;
249
+ exports.LineChart = LineChart;
250
+ exports.PieChart = PieChart;
251
+ //# sourceMappingURL=fusion.cjs.map
252
+ //# sourceMappingURL=fusion.cjs.map