@headless-adminapp/fluent 0.0.17-alpha.50 → 0.0.17-alpha.52

package/App/AppHeaderContianer.js

@@ -15,7 +15,6 @@ const AppLogo_1 = require("./AppLogo");
 const AppStringContext_1 = require("./AppStringContext");
 const QuickActionItem_1 = require("./QuickActionItem");
 const AppHeaderContainer = ({ onNavToggle, }) => {
-    var _a, _b, _c;
     const { app } = (0, app_1.useAppContext)();
     const authSession = (0, hooks_1.useAuthSession)();
     const isSkipAuthCheck = (0, useIsSkipAuthCheck_1.useIsSkipAuthCheck)();
@@ -26,6 +25,8 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
     const initials = (0, react_1.useMemo)(() => {
         return authSession === null || authSession === void 0 ? void 0 : authSession.fullName.split(' ').map((item) => item[0]).slice(0, 2).join('');
     }, [authSession === null || authSession === void 0 ? void 0 : authSession.fullName]);
+    const quickActionItems = (0, hooks_2.useItemsWithKey)(app.quickActionItems);
+    const accountMenuItems = (0, hooks_2.useItemsWithKey)(app.accountMenuItems);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             alignItems: 'center',
@@ -45,10 +46,10 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
                     paddingLeft: 8,
                     display: 'flex',
                     gap: 16,
-                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 8 }, children: (_a = app.quickActionItems) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 8 }, children: quickActionItems === null || quickActionItems === void 0 ? void 0 : quickActionItems.map((item) => {
                             var _a, _b;
-                            return ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: item.icon, label: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label, onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, link: item.link }, index));
-                        }) }), (!isSkipAuthCheck || !!((_b = app.accountMenuItems) === null || _b === void 0 ? void 0 : _b.length)) && ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
+                            return ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: item.icon, label: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label, onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, link: item.link }, item.__key));
+                        }) }), (!isSkipAuthCheck || !!(accountMenuItems === null || accountMenuItems === void 0 ? void 0 : accountMenuItems.length)) && ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
                                         src: authSession === null || authSession === void 0 ? void 0 : authSession.profilePicture,
                                     } }) }), (0, jsx_runtime_1.jsxs)(react_components_1.PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [!isSkipAuthCheck && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
@@ -63,10 +64,10 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
                                                     flexDirection: 'column',
                                                     overflow: 'hidden',
                                                     flex: 1,
-                                                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession === null || authSession === void 0 ? void 0 : authSession.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession === null || authSession === void 0 ? void 0 : authSession.email })] })] })), !isSkipAuthCheck && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { marginInline: 0 } }), (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { style: { width: 200, marginBottom: 4 }, children: [(_c = app.accountMenuItems) === null || _c === void 0 ? void 0 : _c.map((item, index) => {
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession === null || authSession === void 0 ? void 0 : authSession.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession === null || authSession === void 0 ? void 0 : authSession.email })] })] })), !isSkipAuthCheck && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { marginInline: 0 } }), (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { style: { width: 200, marginBottom: 4 }, children: [accountMenuItems === null || accountMenuItems === void 0 ? void 0 : accountMenuItems.map((item) => {
                                                 var _a, _b;
                                                 const Icon = item.icon;
-                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, children: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label }, index));
+                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, children: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label }, item.__key));
                                             }), !isSkipAuthCheck && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout }))] })] })] }))] })] }));
 };
 exports.AppHeaderContainer = AppHeaderContainer;

package/App/NavigationContainer.js

@@ -34,7 +34,10 @@ const useStyles = (0, react_components_1.makeStyles)({
 const NavigationContainer = ({ open, type, onOpenChange, }) => {
     const styles = useStyles();
     const { app } = (0, app_1.useAppContext)();
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: open, type: type, onOpenChange: (value, data) => onOpenChange(data.open), children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: { paddingTop: 8 }, children: app.navItems.map((area) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: area.groups.map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!group.hideLabel && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: group.label })), group.items.map((item, index) => ((0, jsx_runtime_1.jsx)(Test, { item: item, drawerType: type, onOpenChange: onOpenChange }, index)))] }, group.label))) }, area.label))) }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: open, type: type, onOpenChange: (value, data) => onOpenChange(data.open), children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: { paddingTop: 8 }, children: app.navItems.map((area) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: area.groups.map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!group.hideLabel && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: group.label })), group.items.map((item, index) => {
+                                var _a;
+                                return ((0, jsx_runtime_1.jsx)(Test, { item: item, drawerType: type, onOpenChange: onOpenChange }, ((_a = item.label) !== null && _a !== void 0 ? _a : '') + String(index)));
+                            })] }, group.label))) }, area.label))) }) }) }));
 };
 exports.NavigationContainer = NavigationContainer;
 const Test = ({ item, onOpenChange, drawerType }) => {

package/CommandBar/MenuItems.js

@@ -6,6 +6,9 @@ const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
 const MenuItem_1 = require("./MenuItem");
 exports.MenuItems = (0, react_1.memo)(({ items }) => {
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: items === null || items === void 0 ? void 0 : items.map((group, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), group.map((item, index) => ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { Icon: item.Icon, onClick: item.onClick, text: item.text, danger: item.danger, disabled: item.disabled, items: item.items }, index)))] }, index))) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: items === null || items === void 0 ? void 0 : items.map((group, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), group.map((item, index) => {
+                    var _a;
+                    return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { Icon: item.Icon, onClick: item.onClick, text: item.text, danger: item.danger, disabled: item.disabled, items: item.items }, ((_a = item.text) !== null && _a !== void 0 ? _a : '') + index));
+                })] }, index))) }));
 });
 exports.MenuItems.displayName = 'MenuItems';

package/DataGrid/GridColumnHeader/FilterForm.js

@@ -46,7 +46,7 @@ const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
                             var _a;
                             return ((0, jsx_runtime_1.jsx)(ConditionValueControl_1.ConditionValueControl, { type: x, attribute: attribute, value: (_a = values[i]) !== null && _a !== void 0 ? _a : null, onChange: (value) => {
                                     handleChangeValue(value, i);
-                                } }, i));
+                                } }, x + String(i)));
                         })] }) }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", onClick: onCancel, children: strings.cancel }) }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { type: "submit", appearance: "primary", disabled: !isValid, onClick: () => {
                             onApply === null || onApply === void 0 ? void 0 : onApply({
                                 operator,

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -77,6 +77,7 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
     const align = (0, react_1.useMemo)(() => {
         switch (attribute.type) {
             case 'money':
+            case 'number':
                 return 'right';
             default:
                 return 'left';
@@ -91,7 +92,7 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
     };
     const sortMenuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowUp, { size: 16 }), onClick: () => onChangeSortDirection === null || onChangeSortDirection === void 0 ? void 0 : onChangeSortDirection('asc'), children: strings.sortByAscending }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowDown, { size: 16 }), onClick: () => onChangeSortDirection === null || onChangeSortDirection === void 0 ? void 0 : onChangeSortDirection('desc'), children: strings.sortByDescending })] }));
     const filterMenuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, { size: 16 }), onClick: () => setVisible(!visible), children: strings.filter }), !!filterCondition && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.FilterDismiss, { size: 16 }), onClick: () => {
-                    onChangeFilterCondition === null || onChangeFilterCondition === void 0 ? void 0 : onChangeFilterCondition(undefined);
+                    onChangeFilterCondition(undefined);
                 }, children: strings.clearFilter }))] }));
     const menuItems = [];
     if (!disableSort) {
@@ -137,17 +138,24 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
             isResizingRef.current = false;
         }, sortable: !disableSort, 
         // sortDirection="ascending"
-        sortDirection: sortDirection === 'asc'
-            ? 'ascending'
-            : sortDirection === 'desc'
-                ? 'descending'
-                : undefined, children: [children, !!filterCondition && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 2, color: react_components_1.tokens.colorNeutralForeground1 }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, { size: 16 }) }))] }));
+        sortDirection: getSortDirection(sortDirection), children: [children, !!filterCondition && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 2, color: react_components_1.tokens.colorNeutralForeground1 }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, { size: 16 }) }))] }));
     if (disableFilter && disableSort) {
         return headerCell;
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("th", { children: [(0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: headerCell }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: menuItems.map((x, i) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), x] }, i))) }) })] }), (0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: visible, onOpenChange: () => setVisible(false), children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 400 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: strings.filterBy }), (0, jsx_runtime_1.jsx)(FilterForm_1.FilterForm, { attribute: attribute, defaultValue: filterCondition, onApply: (condition) => {
-                                        onChangeFilterCondition === null || onChangeFilterCondition === void 0 ? void 0 : onChangeFilterCondition(condition);
-                                        setVisible(false);
-                                    }, onCancel: () => setVisible(false) })] }) }) })] }) }));
+    return ((0, jsx_runtime_1.jsxs)("th", { children: [(0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: headerCell }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: menuItems.map((x, i) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), x] }, i))) }) })] }), (0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: visible, onOpenChange: () => setVisible(false), children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 400 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: strings.filterBy }), (0, jsx_runtime_1.jsx)(FilterForm_1.FilterForm, { attribute: attribute, defaultValue: filterCondition, onApply: (condition) => {
+                                    onChangeFilterCondition(condition);
+                                    setVisible(false);
+                                }, onCancel: () => setVisible(false) })] }) }) })] }));
 };
 exports.TableHeaderFilterCell = TableHeaderFilterCell;
+const getSortDirection = (direction) => {
+    if (direction === 'asc') {
+        return 'ascending';
+    }
+    else if (direction === 'desc') {
+        return 'descending';
+    }
+    else {
+        return undefined;
+    }
+};

package/DataGrid/GridColumnHeader/utils.js

@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDefaultOperator = getDefaultOperator;
 exports.getDefaultValues = getDefaultValues;
 function getDefaultOperator(operator, attributeType) {
-    return operator
-        ? operator
-        : attributeType === 'date'
-            ? 'on'
-            : attributeType === 'choice' || attributeType === 'lookup'
-                ? 'in'
-                : 'eq';
+    if (operator) {
+        return operator;
+    }
+    if (attributeType === 'date') {
+        return 'on';
+    }
+    if (attributeType === 'choice' || attributeType === 'lookup') {
+        return 'in';
+    }
+    return 'eq';
 }
 function getDefaultValues(operator, value, _attributeType) {
     if (!value)

package/DataGrid/GridListContainer.js

@@ -23,7 +23,7 @@ const useStyles = (0, react_components_1.makeStyles)({
     },
 });
 const fallbackData = [];
-const GridListContainer = ({}) => {
+const GridListContainer = () => {
     const styles = useStyles();
     const data = (0, hooks_1.useGridData)();
     const dataState = (0, hooks_1.useGridDataState)();

package/DataGrid/GridTableContainer.js

@@ -247,14 +247,14 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
                                         display: 'flex',
                                         height: 44,
                                         alignItems: 'center',
-                                    }, children: table.getAllColumns().map((column, index) => {
+                                    }, children: table.getAllColumns().map((column) => {
                                         if (!column.getIsVisible())
                                             return null;
                                         return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
                                                 display: 'flex',
                                                 alignItems: 'center',
                                                 width: column.getSize(),
-                                            }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16 }) }, index));
+                                            }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16 }) }, column.id));
                                     }) }, index))) }))] }) }), (data === null || data === void 0 ? void 0 : data.records.length) === 0 && !dataState.isFetching && ((0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',

package/DataGrid/TableCell/TableCellBase.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, FC, MouseEventHandler, ReactNode } from 'react';
 export interface TableCellBaseProps {
     children?: ReactNode;
-    onClick?: MouseEventHandler | undefined;
-    style?: CSSProperties | undefined;
+    onClick?: MouseEventHandler;
+    style?: CSSProperties;
 }
 export declare const TableCellBase: FC<TableCellBaseProps>;

package/Insights/WidgetTableContainer.js

@@ -40,7 +40,7 @@ const WidgetTableContainer = ({ content, }) => {
                                                 position: 'sticky',
                                                 background: react_components_1.tokens.colorNeutralBackground3,
                                                 borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
-                                            }, children: attribute.label }, index));
+                                            }, children: attribute.label }, column + String(index)));
                                     }) }) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { children: data.map((row, index) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { children: info.columns.map((column) => {
                                         var _a;
                                         const attribute = info.attributes[column];

package/Insights/Widgets.d.ts

@@ -1,4 +1,4 @@
 import { InsightExpereince } from '@headless-adminapp/core/experience/insights';
-export declare function Widgets({ widgets, }: {
+export declare function Widgets({ widgets, }: Readonly<{
     widgets: InsightExpereince['widgets'];
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;

package/Insights/Widgets.js

@@ -28,7 +28,7 @@ const WidgetProvider = ({ children, widget, }) => {
 function Widgets({ widgets, }) {
     const isMobile = (0, hooks_1.useIsMobile)();
     return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGrid, { children: widgets.map((widget, index) => {
-            return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGridItem, { row: widget.rows, column: isMobile ? 12 : widget.columns, children: (0, jsx_runtime_1.jsx)(WidgetProvider, { widget: widget, children: (0, jsx_runtime_1.jsx)(WidgetItem, {}) }) }, index));
+            return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGridItem, { row: widget.rows, column: isMobile ? 12 : widget.columns, children: (0, jsx_runtime_1.jsx)(WidgetProvider, { widget: widget, children: (0, jsx_runtime_1.jsx)(WidgetItem, {}) }) }, widget.title + String(index)));
         }) }));
 }
 function WidgetItem() {

package/Insights/charts/BarChart.d.ts

@@ -1,5 +1,5 @@
 import { BarChartInfo } from '@headless-adminapp/core/experience/insights';
-export declare function BarChart({ dataset, chartInfo, }: {
+export declare function BarChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: BarChartInfo;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;

package/Insights/charts/BarChart.js

@@ -13,7 +13,6 @@ function BarChart({ dataset, chartInfo, }) {
     const bars = chartInfo.bars;
     const xAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(xAxis.tick);
     const yAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(yAxis.tick);
-    console.log('temp.dataset', dataset);
     return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { data: dataset[0], stackOffset: chartInfo.stackOffset, children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(yAxis), (0, renderers_1.renderXAxis)(xAxis), (0, renderers_1.renderBars)(bars, dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
                         stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,

package/Insights/charts/CustomTooltipContent.js

@@ -4,7 +4,7 @@ exports.CustomTooltipContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const CustomTooltipContent = ({ active, payload, label, xAxisFormatter, yAxisFormatter, }) => {
-    if (!active || !payload || !payload.length) {
+    if (!active || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
         return null;
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -20,6 +20,6 @@ const CustomTooltipContent = ({ active, payload, label, xAxisFormatter, yAxisFor
                                 height: 8,
                                 background: item.color,
                                 borderRadius: 4,
-                            } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4, marginLeft: 8 }, children: item.name }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: yAxisFormatter(item.value) })] }, index))) })] }));
+                            } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4, marginLeft: 8 }, children: item.name }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: yAxisFormatter(item.value) })] }, item.name + String(index)))) })] }));
 };
 exports.CustomTooltipContent = CustomTooltipContent;

package/Insights/charts/LineChart.d.ts

@@ -1,5 +1,5 @@
 import { LineChartInfo } from '@headless-adminapp/core/experience/insights';
-export declare function LineChart({ dataset, chartInfo, }: {
+export declare function LineChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: LineChartInfo;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;

package/Insights/charts/OhlcChart.d.ts

@@ -1,6 +1,6 @@
 import { DateAxisTickInterval, OhlcChartInfo } from '@headless-adminapp/core/experience/insights';
 export declare const barSizeInTime: (interval: DateAxisTickInterval) => number;
-export declare function OhlcChart({ dataset, chartInfo, }: {
+export declare function OhlcChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: OhlcChartInfo;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;

package/Insights/charts/OhlcChart.js

@@ -55,30 +55,14 @@ function OhlcChart({ dataset, chartInfo, }) {
                         opacity: 0.5,
                     }, scale: xAxis.tick.type === 'time' ? 'time' : 'auto', type: xAxis.tick.type === 'category' ? 'category' : 'number', domain: xAxis.domain, height: 16 }), (0, jsx_runtime_1.jsx)(recharts_1.Scatter, { yAxisId: "left", data: data, markerWidth: 1, width: 1, strokeWidth: 1, 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    shape: (props) => {
-                        var _a, _b, _c, _d;
-                        const { x, width, payload, yAxis, xAxis } = props;
-                        const xValue = payload[xAxis.dataKey];
-                        const open = payload[bar.open.dataKey];
-                        const close = payload[bar.close.dataKey];
-                        const high = payload[bar.high.dataKey];
-                        const low = payload[bar.low.dataKey];
-                        const color = open < close
-                            ? (_b = (_a = bar.colors) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : react_components_1.tokens.colorPaletteGreenForeground1
-                            : (_d = (_c = bar.colors) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : react_components_1.tokens.colorPaletteRedForeground1;
-                        const xPosition = xAxis.scale(xValue);
-                        let xWidth = 30;
-                        if (chartInfo.xAxis.tick.type === 'time' &&
-                            chartInfo.xAxis.tick.interval) {
-                            xWidth =
-                                xAxis.scale(xValue + (0, exports.barSizeInTime)(chartInfo.xAxis.tick.interval)) - xPosition;
-                        }
-                        return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)(recharts_1.Rectangle, { x: x + width / 2, y: yAxis.scale(high), width: 1, height: yAxis.scale(low) - yAxis.scale(high), fill: color, stroke: color, strokeWidth: 1 }), (0, jsx_runtime_1.jsx)(recharts_1.Rectangle, { x: xPosition - xWidth / 2, y: Math.min(yAxis.scale(open), yAxis.scale(close)), width: xWidth, height: Math.abs(yAxis.scale(close) - yAxis.scale(open)), fill: color, stroke: color, strokeWidth: 1 })] }));
-                    } }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+                    shape: (props) => renderShape(props, {
+                        bar,
+                        chartInfo,
+                    }) }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
                         stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
                     }, content: ({ active, payload }) => {
-                        if (!active || !payload || !payload.length) {
+                        if (!active || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
                             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                         }
                         return ((0, jsx_runtime_1.jsx)(OhclTooltipContent, { payload: payload[0], bar: bar, xAxisFormatter: xAxisLongFormatter, yAxisFormatter: yAxisLongFormatter }));
@@ -110,5 +94,25 @@ function OhclTooltipContent({ payload, bar, xAxisFormatter, yAxisFormatter, }) {
             padding: 8,
             borderRadius: 4,
             gap: 4,
-        }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: xAxisFormatter(payload.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), items.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: item.name }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: yAxisFormatter(item.value) })] }, index)))] }) }));
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: xAxisFormatter(payload.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), items.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: item.name }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: yAxisFormatter(item.value) })] }, item.name + String(index))))] }) }));
+}
+function renderShape(props, { chartInfo, bar, }) {
+    var _a, _b, _c, _d;
+    const { x, width, payload, yAxis, xAxis } = props;
+    const xValue = payload[xAxis.dataKey];
+    const open = payload[bar.open.dataKey];
+    const close = payload[bar.close.dataKey];
+    const high = payload[bar.high.dataKey];
+    const low = payload[bar.low.dataKey];
+    const color = open < close
+        ? (_b = (_a = bar.colors) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : react_components_1.tokens.colorPaletteGreenForeground1
+        : (_d = (_c = bar.colors) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : react_components_1.tokens.colorPaletteRedForeground1;
+    const xPosition = xAxis.scale(xValue);
+    let xWidth = 30;
+    if (chartInfo.xAxis.tick.type === 'time' && chartInfo.xAxis.tick.interval) {
+        xWidth =
+            xAxis.scale(xValue + (0, exports.barSizeInTime)(chartInfo.xAxis.tick.interval)) -
+                xPosition;
+    }
+    return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)(recharts_1.Rectangle, { x: x + width / 2, y: yAxis.scale(high), width: 1, height: yAxis.scale(low) - yAxis.scale(high), fill: color, stroke: color, strokeWidth: 1 }), (0, jsx_runtime_1.jsx)(recharts_1.Rectangle, { x: xPosition - xWidth / 2, y: Math.min(yAxis.scale(open), yAxis.scale(close)), width: xWidth, height: Math.abs(yAxis.scale(close) - yAxis.scale(open)), fill: color, stroke: color, strokeWidth: 1 })] }));
 }

package/Insights/charts/PieChart.d.ts

@@ -1,5 +1,5 @@
 import { PieChartInfo } from '@headless-adminapp/core/experience/insights';
-export declare function PieChart({ dataset, chartInfo, }: {
+export declare function PieChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: PieChartInfo;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;

package/Insights/charts/PieChart.js

@@ -26,7 +26,7 @@ function PieChart({ dataset, chartInfo, }) {
                         var _a, _b;
                         return ((0, jsx_runtime_1.jsx)(recharts_1.Cell, { fill: item.colorKey && entry[item.colorKey]
                                 ? entry[item.colorKey]
-                                : ((_a = item.colors) !== null && _a !== void 0 ? _a : constants_1.defaultColors)[index % ((_b = item.colors) !== null && _b !== void 0 ? _b : constants_1.defaultColors).length] }, `cell-${index}`));
+                                : ((_a = item.colors) !== null && _a !== void 0 ? _a : constants_1.defaultColors)[index % ((_b = item.colors) !== null && _b !== void 0 ? _b : constants_1.defaultColors).length] }, 'cell-' + String(index)));
                     }) }), chartInfo.showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { align: "right", layout: "vertical", verticalAlign: "top", wrapperStyle: {
                         fontSize: react_components_1.tokens.fontSizeBase100,
                         fontFamily: react_components_1.tokens.fontFamilyBase,
@@ -36,18 +36,23 @@ function PieChart({ dataset, chartInfo, }) {
                     } })), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
                         stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
-                    }, content: ({ payload }) => {
-                        return ((0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                boxShadow: react_components_1.tokens.shadow16,
-                                backgroundColor: react_components_1.tokens.colorNeutralBackground1,
-                                padding: 8,
-                                borderRadius: 4,
-                                gap: 4,
-                            }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: payload === null || payload === void 0 ? void 0 : payload.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: {
-                                                color: react_components_1.tokens.colorNeutralForeground4,
-                                                marginLeft: 8,
-                                            }, children: nameFormatter(item.name) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: valueFormatter(item.value) })] }, index))) }) }));
-                    } })] }) }));
+                    }, content: ({ payload }) => renderTooltipContent({
+                        payload,
+                        nameFormatter,
+                        valueFormatter,
+                    }) })] }) }));
+}
+function renderTooltipContent({ payload, nameFormatter, valueFormatter, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            boxShadow: react_components_1.tokens.shadow16,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            padding: 8,
+            borderRadius: 4,
+            gap: 4,
+        }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: payload === null || payload === void 0 ? void 0 : payload.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: {
+                            color: react_components_1.tokens.colorNeutralForeground4,
+                            marginLeft: 8,
+                        }, children: nameFormatter(item.name) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: valueFormatter(item.value) })] }, index))) }) }));
 }

package/Insights/charts/RadarChart.d.ts

@@ -1,5 +1,5 @@
 import { RadarChartInfo } from '@headless-adminapp/core/experience/insights';
-export declare function RadarChart({ dataset, chartInfo, }: {
+export declare function RadarChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: RadarChartInfo;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;

package/Insights/charts/RadarChart.js

@@ -16,18 +16,24 @@ function RadarChart({ dataset, chartInfo, }) {
     return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.RadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data: data, children: [(0, jsx_runtime_1.jsx)(recharts_1.PolarGrid, { stroke: react_components_1.tokens.colorNeutralBackground6, opacity: 0.5 }), (0, jsx_runtime_1.jsx)(recharts_1.PolarAngleAxis, { dataKey: radar.nameKey, fontSize: react_components_1.tokens.fontSizeBase100, tickFormatter: nameFormatter }), (0, jsx_runtime_1.jsx)(recharts_1.PolarRadiusAxis, { fontSize: react_components_1.tokens.fontSizeBase100, tickFormatter: tickFormatter }), (0, jsx_runtime_1.jsx)(recharts_1.Radar, { dataKey: radar.dataKey, stroke: (_a = radar.color) !== null && _a !== void 0 ? _a : '#8884d8', fill: (_b = radar.color) !== null && _b !== void 0 ? _b : '#8884d8', fillOpacity: 0.6 }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
                         stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
-                    }, content: ({ payload }) => {
-                        return ((0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                boxShadow: react_components_1.tokens.shadow16,
-                                backgroundColor: react_components_1.tokens.colorNeutralBackground1,
-                                padding: 8,
-                                borderRadius: 4,
-                                gap: 4,
-                            }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: payload === null || payload === void 0 ? void 0 : payload.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: {
-                                                color: react_components_1.tokens.colorNeutralForeground4,
-                                                marginLeft: 8,
-                                            }, children: nameFormatter(item.payload[radar.nameKey]) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: valueFormatter(item.value) })] }, index))) }) }));
-                    } })] }) }));
+                    }, content: ({ payload }) => renderTooltipContent({
+                        payload,
+                        nameFormatter,
+                        valueFormatter,
+                        radar,
+                    }) })] }) }));
+}
+function renderTooltipContent({ payload, nameFormatter, valueFormatter, radar, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            boxShadow: react_components_1.tokens.shadow16,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            padding: 8,
+            borderRadius: 4,
+            gap: 4,
+        }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: payload === null || payload === void 0 ? void 0 : payload.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: {
+                            color: react_components_1.tokens.colorNeutralForeground4,
+                            marginLeft: 8,
+                        }, children: nameFormatter(item.payload[radar.nameKey]) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: valueFormatter(item.value) })] }, index))) }) }));
 }

package/Insights/charts/ScatterChart.d.ts

@@ -1,5 +1,5 @@
 import { ScatterChartInfo } from '@headless-adminapp/core/experience/insights';
-export declare function ScatterChart({ dataset, chartInfo, }: {
+export declare function ScatterChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: ScatterChartInfo;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;

package/Insights/charts/ScatterChart.js

@@ -13,7 +13,8 @@ function ScatterChart({ dataset, chartInfo, }) {
                     var _a, _b;
                     return ((0, jsx_runtime_1.jsx)(recharts_1.Scatter, { yAxisId: "left", name: scatter.dataLabel, data: dataset[(_a = scatter.dataIndex) !== null && _a !== void 0 ? _a : 0], dataKey: scatter.dataKey, fill: (_b = scatter.color) !== null && _b !== void 0 ? _b : constants_1.defaultColors[index] }, index));
                 }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: false, content: (props) => {
-                        if (!props.active || !props.payload || !props.payload.length) {
+                        var _a;
+                        if (!props.active || !((_a = props.payload) === null || _a === void 0 ? void 0 : _a.length)) {
                             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                         }
                         return ((0, jsx_runtime_1.jsx)(ScatterTooltipContent, { active: props.active, payload: props.payload, chartInfo: chartInfo, dataset: dataset }));

package/Insights/charts/formatters.d.ts

@@ -9,6 +9,6 @@ export declare const formatDate: (input: Date | string | number | undefined | nu
 export declare const formatCurrency: (input: number | undefined | null, digit?: number | FormatNumberOptions) => string;
 export declare const formatNumber: (input: number | undefined | null, digit?: number | FormatNumberOptions) => string;
 export declare function createAxisFormatter(tick: AllAxisTick): (value: number) => string;
-type Formatter = (value: unknown) => string;
+export type Formatter = (value: unknown) => string;
 export declare function createLongAxisFormatter(tick: AllAxisTick): Formatter;
 export {};

package/OverflowCommandBar/OverflowCommandBar.js

@@ -20,7 +20,7 @@ const OverflowCommandBar = ({ commands, align = 'start', afterDivider, beforeDiv
                                 case 'button':
                                 case 'label':
                                 case 'icon':
-                                    return ((0, jsx_runtime_1.jsx)(react_components_1.OverflowItem, { id: `${groupIndex}-${index}`, groupId: String(groupIndex), children: (0, render_1.renderCommandItem)(`${groupIndex}-${index}`, item, language) }, index));
+                                    return ((0, jsx_runtime_1.jsx)(react_components_1.OverflowItem, { id: `${groupIndex}-${index}`, groupId: String(groupIndex), children: (0, render_1.renderCommandItem)(`${groupIndex}-${index}`, item, language) }, `${groupIndex}-${index}`));
                                 default:
                                     throw new Error(`Unknown command type: ${commandType}`);
                             }

package/OverflowCommandBar/OverflowMenu.js

@@ -31,7 +31,7 @@ const OverflowMenu = ({ items, }) => {
                                 const text = 'text' in item ? (_a = item.text) !== null && _a !== void 0 ? _a : '' : '';
                                 return ((0, jsx_runtime_1.jsx)(OverflowMenuItem, { id: `${groupIndex}-${index}`, Icon: item.Icon, onClick: item.type !== 'label' ? item.onClick : undefined, text: text, danger: item.danger, disabled: item.type !== 'label' ? item.disabled : undefined, items: item.type === 'menu'
                                         ? (_b = item.items) === null || _b === void 0 ? void 0 : _b.map((x) => (0, utils_1.transformMenuItems)(x, language))
-                                        : undefined }, index));
+                                        : undefined }, `${groupIndex}-${index}`));
                             })] }, groupIndex))) }) })] }));
 };
 exports.OverflowMenu = OverflowMenu;

package/PageEntityForm/RecordCard.js

@@ -100,23 +100,7 @@ function SecondaryColumnContent({ record: _record, column, schema, }) {
     }
     if (column.variant === 'choice') {
         if (attribute.type === 'choice') {
-            const choice = attribute.options.find((option) => option.value === value);
-            if (!choice) {
-                return null;
-            }
-            const bgColor = choice.color;
-            let color;
-            if (bgColor) {
-                color = (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
-            }
-            return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
-                    background: bgColor,
-                    color: color,
-                    height: 16,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }, children: choice.label }, column.name));
+            return (0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: value });
         }
         if (attribute.type === 'choices') {
             const choices = attribute.options.filter((option) => value.includes(option.value));
@@ -127,15 +111,27 @@ function SecondaryColumnContent({ record: _record, column, schema, }) {
                     display: 'flex',
                     flexDirection: 'row',
                     gap: 4,
-                }, children: choices.map((choice) => ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
-                        background: choice.color,
-                        color: 'white',
-                        height: 16,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }, children: choice.label }, choice.value))) }, column.name));
+                }, children: choices.map((choice) => ((0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: choice.value }, choice.value))) }, column.name));
         }
     }
     return ((0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [!!label && `${label}: `, (0, utils_1.getAttributeFormattedValue)(attribute, value)] }, column.name));
 }
+const ChoiceTag = ({ attribute, value, }) => {
+    const choice = attribute.options.find((option) => option.value === value);
+    if (!choice) {
+        return null;
+    }
+    const bgColor = choice.color;
+    let color;
+    if (bgColor) {
+        color = (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
+    }
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
+            background: bgColor,
+            color: color,
+            height: 16,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: choice.label }));
+};

package/form/FormControl.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
-// import { AttachmentControl } from './controls/AttachmentControl';
+const uuid_1 = require("uuid");
 const CurrencyControl_1 = require("./controls/CurrencyControl");
 const DateControl_1 = require("./controls/DateControl");
 const DateTimeControl_1 = require("./controls/DateTimeControl");
@@ -70,24 +70,13 @@ function Control(props) {
             return ((0, jsx_runtime_1.jsx)(MultiSelectLookupControl_1.MultiSelectLookupControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'switch':
             return ((0, jsx_runtime_1.jsx)(SwitchControl_1.SwitchControl, Object.assign({ value: value, onChange: onChange }, rest)));
-        // case 'attachment':
-        //   return (
-        //     <AttachmentControl
-        //       value={value}
-        //       onChange={onChange}
-        //       {...(rest as any)}
-        //     />
-        //   );
         default:
             return (0, jsx_runtime_1.jsx)("div", {});
     }
 }
-function randomUUID() {
-    return Math.random().toString(36).substring(2, 15);
-}
 function FormControl(props) {
     const { label, id, onChange } = props;
-    const _id = (0, react_1.useMemo)(() => id || randomUUID(), [id]);
+    const _id = (0, react_1.useMemo)(() => id !== null && id !== void 0 ? id : (0, uuid_1.v4)(), [id]);
     const noop = (0, react_1.useCallback)(() => { }, []);
     return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Label, { style: { width: 160, marginTop: 4 }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(Control, Object.assign({ id: _id, onChange: onChange || noop }, props)) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.50",
+  "version": "0.0.17-alpha.52",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -49,5 +49,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "aaa62f2c8f6edb9dad521d9bb254a3c1811b5aff"
+  "gitHead": "d51866b6ef09087e30a44a6a63f099075c6aea89"
 }