@headless-adminapp/fluent 0.0.17-alpha.8 → 1.0.1

package/Insights/charts/formatters.js

@@ -0,0 +1,186 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatNumber = exports.formatCurrency = exports.formatDate = exports.formatCurrencyWithSuffix = void 0;
+exports.createAxisFormatter = createAxisFormatter;
+exports.createLongAxisFormatter = createLongAxisFormatter;
+const dayjs_1 = __importDefault(require("dayjs"));
+function extractNumberInfo(value) {
+    const suffix = ['K', 'M', 'B', 'T'];
+    if (value === null || value === undefined) {
+        return null;
+    }
+    const abs = Math.abs(value);
+    const sign = Math.sign(value);
+    if (abs >= 1000) {
+        const i = Math.floor(Math.log(abs) / Math.log(1000));
+        return {
+            value: sign * (abs / Math.pow(1000, i)),
+            symbol: suffix[i - 1],
+        };
+    }
+    else {
+        return {
+            value: value,
+            symbol: '',
+        };
+    }
+}
+const formatCurrencyWithSuffix = (input, digit = 2) => {
+    const suffix = ['K', 'M', 'B', 'T'];
+    if (input === null || input === undefined) {
+        return '';
+    }
+    const abs = Math.abs(input);
+    const sign = Math.sign(input);
+    if (abs >= 1000) {
+        const i = Math.floor(Math.log(abs) / Math.log(1000));
+        return ((0, exports.formatCurrency)(sign * (abs / Math.pow(1000, i)), digit) + suffix[i - 1]);
+    }
+    else {
+        return (0, exports.formatCurrency)(input, digit);
+    }
+};
+exports.formatCurrencyWithSuffix = formatCurrencyWithSuffix;
+const formatDate = (input, format) => {
+    if (!input) {
+        return '';
+    }
+    return (0, dayjs_1.default)(new Date(input)).format(format);
+};
+exports.formatDate = formatDate;
+const formatCurrency = (input, digit = 2) => {
+    if (input === null || input === undefined) {
+        return '';
+    }
+    const minDigit = typeof digit === 'object' ? digit.minDigit ?? digit.digit : digit;
+    const maxDigit = typeof digit === 'object' ? digit.maxDigit ?? digit.digit : digit;
+    const formatter = new Intl.NumberFormat('en-IN', {
+        currency: 'INR',
+        style: 'currency',
+        minimumFractionDigits: minDigit,
+        maximumFractionDigits: maxDigit,
+    });
+    return formatter.format(input || 0);
+};
+exports.formatCurrency = formatCurrency;
+const formatNumber = (input, digit = 2) => {
+    if (input === null || input === undefined) {
+        return '';
+    }
+    const minDigit = typeof digit === 'object' ? digit.minDigit ?? digit.digit : digit;
+    const maxDigit = typeof digit === 'object' ? digit.maxDigit ?? digit.digit : digit;
+    const formatter = new Intl.NumberFormat('en-IN', {
+        minimumFractionDigits: minDigit,
+        maximumFractionDigits: maxDigit,
+    });
+    return formatter.format(input || 0);
+};
+exports.formatNumber = formatNumber;
+const timeAxisFormats = {
+    minute: 'mm',
+    hour: 'HH',
+    day: 'DD',
+    month: 'MMM',
+    year: 'YYYY',
+    time: 'HH:mm',
+    date: 'DD MMM YYYY',
+    'year:month': 'MMM YYYY',
+    'month:day': 'DD MMM',
+    datetime: 'DD MMM YYYY, HH:mm',
+};
+const timeLongAxisFormats = {
+    minute: 'HH:mm',
+    hour: 'DD MMM, HH:mm',
+    day: 'DD MMM YYYY',
+    month: 'MMM YYYY',
+    year: 'YYYY',
+    time: 'DD MMM YYYY, HH:mm',
+    date: 'DD MMM YYYY',
+    'year:month': 'MMM YYYY',
+    'month:day': 'DD MMM YYYY',
+    datetime: 'DD MMM YYYY, HH:mm',
+};
+// const numberAxisFormatters = {
+//   decimal: (value: number) => formatCurrency(value, { digit: 2 }),
+//   integer: (value: number) => formatCurrency(value, { digit: 0 }),
+// };
+// const currencyAxisFormatters = {
+//   currency: (value: number) => formatCurrency(value, { digit: 0 }),
+// };
+function createTimeAxisFormatter(format) {
+    const formatString = timeAxisFormats[format];
+    return (value) => (0, exports.formatDate)(new Date(value), formatString);
+}
+function createFullTimeAxisFormatter(format) {
+    const formatString = timeLongAxisFormats[format];
+    return (value) => (0, exports.formatDate)(new Date(value), formatString);
+}
+function createNumberAxisFormatter(options) {
+    return (value) => {
+        const info = extractNumberInfo(value);
+        if (!info) {
+            return '';
+        }
+        return (0, exports.formatNumber)(info.value, options) + info.symbol;
+    };
+}
+function createLongNumberAxisFormatter(options) {
+    return (value) => {
+        return (0, exports.formatNumber)(value, options);
+    };
+}
+function createCurrencyAxisFormatter() {
+    return (value) => {
+        const info = extractNumberInfo(value);
+        if (!info) {
+            return '';
+        }
+        return (0, exports.formatCurrency)(info.value, 0) + info.symbol;
+    };
+}
+function createCategoryAxisFormatter(options) {
+    return (value) => {
+        if (options) {
+            const option = options.find((o) => o.value === value);
+            if (option) {
+                return option.label;
+            }
+        }
+        return typeof value === 'string' ? value : String(value);
+    };
+}
+function createAxisFormatter(tick) {
+    switch (tick.type) {
+        case 'time':
+            return createTimeAxisFormatter(tick.format);
+        case 'number':
+            return createNumberAxisFormatter(tick);
+        case 'currency':
+            return createCurrencyAxisFormatter();
+        case 'category':
+            return createCategoryAxisFormatter(tick.options);
+        case 'weekday':
+            return (value) => (0, dayjs_1.default)().day(value).format('ddd');
+        default:
+            return (value) => String(value);
+    }
+}
+function createLongAxisFormatter(tick) {
+    switch (tick.type) {
+        case 'time':
+            return createFullTimeAxisFormatter(tick.format);
+        case 'number':
+            return createLongNumberAxisFormatter(tick);
+        case 'currency':
+            return createCurrencyAxisFormatter();
+        case 'category':
+            return createCategoryAxisFormatter(tick.options);
+        case 'weekday':
+            return ((value) => (0, dayjs_1.default)().day(value).format('dddd'));
+        default:
+            return (value) => String(value);
+    }
+}

package/Insights/charts/index.d.ts

@@ -0,0 +1,4 @@
+export interface ItemInfo {
+    date: number;
+    amount: number;
+}

package/Insights/charts/index.js

@@ -0,0 +1,13 @@
+"use strict";
+/* eslint-disable unused-imports/no-unused-vars */
+// TODO: Remove eslint disable condition after finishing the implementation
+Object.defineProperty(exports, "__esModule", { value: true });
+// number format - decimal or currency
+// number format - number of decimals
+// number format - group it (K, M, B, T)
+// date format - date, month, year, day, week, hour, minute, second
+// number interval - 0, 1, 10, 100
+// date interval - minute, hour, day, week, month, year
+// count - number of items to show
+// axis range - based on min and max
+// axis range - fixed

package/Insights/charts/renderers.d.ts

@@ -0,0 +1,10 @@
+import { AreaInfo, BarInfo, LineInfo, XAxis, YAxis } from '@headless-adminapp/core/experience/insights';
+export declare function renderXAxis(axis: XAxis, forceCategory?: boolean): import("react/jsx-runtime").JSX.Element;
+export declare function renderYAxis(axis: YAxis): import("react/jsx-runtime").JSX.Element;
+export declare function renderGrid(): import("react/jsx-runtime").JSX.Element;
+export declare function renderLine(line: LineInfo, dataset: any[]): import("react/jsx-runtime").JSX.Element;
+export declare function renderLines(lines: LineInfo[], dataset: any[]): import("react/jsx-runtime").JSX.Element[];
+export declare function renderArea(area: AreaInfo, dataset: any[]): import("react/jsx-runtime").JSX.Element;
+export declare function renderAreas(areas: AreaInfo[], dataset: any[]): import("react/jsx-runtime").JSX.Element[];
+export declare function renderBar(bar: BarInfo, dataset: any[]): import("react/jsx-runtime").JSX.Element;
+export declare function renderBars(bars: BarInfo[], dataset: any[]): import("react/jsx-runtime").JSX.Element[];

package/Insights/charts/renderers.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderXAxis = renderXAxis;
+exports.renderYAxis = renderYAxis;
+exports.renderGrid = renderGrid;
+exports.renderLine = renderLine;
+exports.renderLines = renderLines;
+exports.renderArea = renderArea;
+exports.renderAreas = renderAreas;
+exports.renderBar = renderBar;
+exports.renderBars = renderBars;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const recharts_1 = require("recharts");
+const formatters_1 = require("./formatters");
+function renderXAxis(axis, forceCategory = false) {
+    const xAxisFormatter = (0, formatters_1.createAxisFormatter)(axis.tick);
+    return ((0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: axis.dataKey, name: axis.name, tickFormatter: xAxisFormatter, tickLine: false, minTickGap: 10, 
+        // padding={{ left: 10, right: 10 }}
+        padding: "gap", axisLine: {
+            stroke: react_components_1.tokens.colorNeutralBackground6,
+        }, fontSize: react_components_1.tokens.fontSizeBase100, tick: {
+            fill: react_components_1.tokens.colorNeutralForeground1,
+            opacity: 0.5,
+        }, scale: !forceCategory && axis.tick.type === 'time' ? 'time' : 'auto', type: forceCategory || axis.tick.type === 'category' ? 'category' : 'number', domain: axis.domain, height: 16 }));
+}
+function renderYAxis(axis) {
+    const yAxisFormatter = (0, formatters_1.createAxisFormatter)(axis.tick);
+    return ((0, jsx_runtime_1.jsx)(recharts_1.YAxis, { yAxisId: "left", dataKey: axis.dataKey, tickFormatter: yAxisFormatter, name: axis.name, tickLine: false, fontSize: react_components_1.tokens.fontSizeBase100, axisLine: false, tickMargin: 0, minTickGap: 0, accentHeight: 0, width: 40, scale: "auto", type: "number", domain: axis.domain, tick: {
+            fill: react_components_1.tokens.colorNeutralForeground1,
+            opacity: 0.5,
+        } }));
+}
+function renderGrid() {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { strokeDasharray: "8 4", vertical: false, strokeWidth: 0.2, stroke: react_components_1.tokens.colorNeutralBackground6 }));
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function renderLine(line, dataset) {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.Line, { yAxisId: 'left', type: line.curveType, data: dataset[line.dataIndex ?? 0], dataKey: line.dataKey, name: line.dataLabel, stroke: line.color, strokeWidth: 2, dot: false, activeDot: {
+            stroke: line.color,
+        } }, line.dataKey));
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function renderLines(lines, dataset) {
+    return lines.map((line) => renderLine(line, dataset));
+}
+// eslint-disable-next-line unused-imports/no-unused-vars
+function renderArea(area, dataset) {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.Area, { yAxisId: 'left', type: area.curveType, dataKey: area.dataKey, name: area.dataLabel, stroke: area.color, fill: area.color, strokeWidth: 1, dot: false, activeDot: {
+            stroke: area.color,
+        } }, area.dataKey));
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function renderAreas(areas, dataset) {
+    return areas.map((area) => renderArea(area, dataset));
+}
+// eslint-disable-next-line unused-imports/no-unused-vars
+function renderBar(bar, dataset) {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { yAxisId: 'left', type: bar.curveType, dataKey: bar.dataKey, name: bar.dataLabel, stroke: bar.color, fill: bar.color, strokeWidth: 1, stackId: bar.stackId }, bar.dataKey));
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function renderBars(bars, dataset) {
+    return bars.map((bar) => renderBar(bar, dataset));
+}

package/Insights/hooks/useQueriesData.d.ts

@@ -0,0 +1,7 @@
+import { DataSetItemAllowFunction } from '@headless-adminapp/core/experience/insights';
+export declare function useQueriesData(queries: DataSetItemAllowFunction[]): {
+    isPending: boolean;
+    isFetching: boolean;
+    dataset: unknown[];
+    refetch: () => Promise<import("@tanstack/react-query").QueryObserverResult<unknown, Error>>[];
+};

package/Insights/hooks/useQueriesData.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useQueriesData = useQueriesData;
+const insights_1 = require("@headless-adminapp/app/insights");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const transport_1 = require("@headless-adminapp/app/transport");
+const widget_1 = require("@headless-adminapp/app/widget");
+const transport_2 = require("@headless-adminapp/core/transport");
+const react_query_1 = require("@tanstack/react-query");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = require("react");
+function useQueriesData(queries) {
+    const dataService = (0, transport_1.useDataService)();
+    const insightsState = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state);
+    const widgetState = (0, mutable_1.useContextSelector)(widget_1.WidgetContext, (state) => state);
+    const resolvedQueries = (0, react_1.useMemo)(() => {
+        return queries.map((item) => {
+            if (typeof item === 'function') {
+                console.log('temp.item', item, item(insightsState, widgetState));
+                return item(insightsState, widgetState);
+            }
+            return item;
+        });
+    }, [queries, insightsState, widgetState]);
+    const result = (0, react_query_1.useQueries)({
+        queries: resolvedQueries.map((item) => ({
+            queryKey: ['insights', 'aggregate', item],
+            queryFn: async () => {
+                if (item.type === 'constant') {
+                    return item.value;
+                }
+                if (item.type === 'function') {
+                    return item.value(insightsState, widgetState);
+                }
+                if (item.type === 'customAction') {
+                    return dataService.customAction(item.value.actionName, item.value.payload);
+                }
+                const query = item.value;
+                const data = await dataService.retriveAggregate(query);
+                const transformedData = transformAggregateData(data, query);
+                return transformedData;
+            },
+        })),
+    });
+    const isPending = result.some((r) => r.isPending);
+    const isFetching = result.some((r) => r.isFetching);
+    const refetch = () => result.map((r) => r.refetch());
+    const data = (0, react_1.useMemo)(() => {
+        return result.map((r) => r.data);
+    }, [result]);
+    return { isPending, isFetching, dataset: data, refetch };
+}
+function transformAggregateData(data, query) {
+    const transformedData = data;
+    Object.entries(query.attributes).forEach(([key, attribute]) => {
+        const transformer = getAttributeValueTransformer(attribute);
+        if (transformer) {
+            transformedData.forEach((item) => {
+                item[key] = transformer(item[key]);
+            });
+        }
+    });
+    return transformedData;
+}
+function getAttributeValueTransformer(attribute) {
+    let transformer = undefined;
+    if (attribute.type === 'date') {
+        if (attribute.format) {
+            transformer = (value) => (0, dayjs_1.default)(value, attribute.format)
+                .toDate()
+                .getTime();
+        }
+        else if (attribute.value.type === 'function') {
+            if (attribute.value.value === transport_2.AggregateAttributeFunction.YearMonth) {
+                transformer = (value) => (0, dayjs_1.default)(value, 'YYYY-MM')
+                    .toDate()
+                    .getTime();
+            }
+        }
+        else {
+            transformer = (value) => (0, dayjs_1.default)(value)
+                .toDate()
+                .getTime();
+        }
+    }
+    return transformer;
+}

package/Insights/hooks/useWidgetDetail.d.ts

@@ -0,0 +1,10 @@
+import { WidgetContentExperience, WidgetExperience } from '@headless-adminapp/core/experience/insights';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+export declare function useWidgetDetail<T extends WidgetContentExperience>(widgetContent: T): {
+    isPending: boolean;
+    isFetching: boolean;
+    dataset: unknown[];
+    refetch: () => Promise<import("@tanstack/react-query").QueryObserverResult<unknown, Error>>[];
+    widget: WidgetExperience<SchemaAttributes, T>;
+    transformedCommands: import("@headless-adminapp/app/command").CommandItemState[][];
+};

package/Insights/hooks/useWidgetDetail.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWidgetDetail = useWidgetDetail;
+const command_1 = require("@headless-adminapp/app/command");
+const hooks_1 = require("@headless-adminapp/app/command/hooks");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const widget_1 = require("@headless-adminapp/app/widget");
+const react_1 = require("react");
+const useQueriesData_1 = require("./useQueriesData");
+function useWidgetDetail(widgetContent) {
+    const widgetState = (0, mutable_1.useContextSelector)(widget_1.WidgetContext, (state) => state);
+    const widget = widgetState.widget;
+    const widgetSetValue = (0, mutable_1.useContextSetValue)(widget_1.WidgetContext);
+    const { dataset, isPending, isFetching, refetch } = (0, useQueriesData_1.useQueriesData)(widget.dataset);
+    const baseCommandHandleContext = (0, hooks_1.useBaseCommandHandlerContext)();
+    const updateStateValue = (0, react_1.useCallback)(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (value) => {
+        widgetSetValue((state) => ({
+            ...state,
+            data: { ...state.data, ...value },
+        }));
+    }, [widgetSetValue]);
+    const transformedCommands = (0, command_1.useCommands)([widgetContent.commands], {
+        ...baseCommandHandleContext,
+        primaryControl: {
+            refresh: refetch,
+            updateStateValue,
+        },
+    });
+    return {
+        isPending,
+        isFetching,
+        dataset,
+        refetch,
+        widget,
+        transformedCommands,
+    };
+}

package/OverflowCommandBar/OverflowCommandBar.js

@@ -17,13 +17,10 @@ const OverflowCommandBar = ({ commands, align = 'start', afterDivider, beforeDiv
                             const commandType = item.type;
                             switch (item.type) {
                                 case 'menu':
-                                    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));
                                 case 'button':
-                                    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));
                                 case 'label':
-                                    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));
                                 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

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverflowMenu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -27,19 +16,18 @@ const OverflowMenu = ({ items, }) => {
         return null;
     }
     return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-end", hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ref: ref, type: "button", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreHorizontal, {}) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: items.map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [groupIndex > 0 && ((0, jsx_runtime_1.jsx)(OverflowMenuDivider_1.OverflowMenuDivider, { id: String(groupIndex), previousGroupId: String(groupIndex - 1) })), group.map((item, index) => {
-                                var _a, _b;
-                                const text = 'text' in item ? (_a = item.text) !== null && _a !== void 0 ? _a : '' : '';
+                                const text = 'text' in item ? item.text ?? '' : '';
                                 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));
+                                        ? item.items?.map((x) => (0, utils_1.transformMenuItems)(x, language))
+                                        : undefined }, `${groupIndex}-${index}`));
                             })] }, groupIndex))) }) })] }));
 };
 exports.OverflowMenu = OverflowMenu;
 const OverflowMenuItem = (props) => {
-    const { id } = props, rest = __rest(props, ["id"]);
+    const { id, ...rest } = props;
     const isVisible = (0, react_components_1.useIsOverflowItemVisible)(id);
     if (isVisible) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, Object.assign({}, rest));
+    return (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { ...rest });
 };

package/OverflowCommandBar/render.js

@@ -9,15 +9,14 @@ const CommandBar_1 = __importDefault(require("../CommandBar"));
 const MenuButton_1 = require("../CommandBar/MenuButton");
 const utils_1 = require("./utils");
 function renderCommandItem(key, item, language) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const commandType = item.type;
     switch (item.type) {
         case 'menu':
-            return ((0, jsx_runtime_1.jsx)(MenuButton_1.CommandMenuButton, { Icon: item.Icon, text: (_c = (_b = (_a = item.localizedTexts) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.text) !== null && _c !== void 0 ? _c : '', danger: item.danger, disabled: item.disabled, onClick: item.onClick, items: (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((x) => (0, utils_1.transformMenuItems)(x, language)) }, key));
+            return ((0, jsx_runtime_1.jsx)(MenuButton_1.CommandMenuButton, { Icon: item.Icon, text: item.localizedTexts?.[language] ?? item.text ?? '', danger: item.danger, disabled: item.disabled, onClick: item.onClick, items: item.items?.map((x) => (0, utils_1.transformMenuItems)(x, language)) }, key));
         case 'button':
-            return ((0, jsx_runtime_1.jsx)(CommandBar_1.default.Button, { text: (_g = (_f = (_e = item.localizedTexts) === null || _e === void 0 ? void 0 : _e[language]) !== null && _f !== void 0 ? _f : item.text) !== null && _g !== void 0 ? _g : '', Icon: item.Icon, iconPosition: (_h = item.iconPosition) !== null && _h !== void 0 ? _h : 'before', danger: item.danger, disabled: item.disabled, onClick: item.onClick }, key));
+            return ((0, jsx_runtime_1.jsx)(CommandBar_1.default.Button, { text: item.localizedTexts?.[language] ?? item.text ?? '', Icon: item.Icon, iconPosition: item.iconPosition ?? 'before', danger: item.danger, disabled: item.disabled, onClick: item.onClick }, key));
         case 'label':
-            return ((0, jsx_runtime_1.jsx)(CommandBar_1.default.Label, { text: (_l = (_k = (_j = item.localizedTexts) === null || _j === void 0 ? void 0 : _j[language]) !== null && _k !== void 0 ? _k : item.text) !== null && _l !== void 0 ? _l : '', Icon: item.Icon }, key));
+            return ((0, jsx_runtime_1.jsx)(CommandBar_1.default.Label, { text: item.localizedTexts?.[language] ?? item.text ?? '', Icon: item.Icon }, key));
         case 'icon':
             return ((0, jsx_runtime_1.jsx)(CommandBar_1.default.IconButton, { Icon: item.Icon, danger: item.danger, disabled: item.disabled, onClick: item.onClick }, key));
         default:

package/OverflowCommandBar/utils.js

@@ -2,14 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformMenuItems = transformMenuItems;
 function transformMenuItem(item, language) {
-    var _a, _b, _c, _d;
     return {
         Icon: item.Icon,
-        text: (_c = (_b = (_a = item.localizedTexts) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.text) !== null && _c !== void 0 ? _c : '',
+        text: item.localizedTexts?.[language] ?? item.text ?? '',
         danger: item.danger,
         onClick: item.onClick,
         disabled: item.disabled,
-        items: (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((x) => transformMenuItems(x, language)),
+        items: item.items?.map((x) => transformMenuItems(x, language)),
     };
 }
 function transformMenuItems(items, language) {

package/PageBoard/BoardColumn.d.ts

@@ -0,0 +1,5 @@
+import { BoardColumnConfig } from '@headless-adminapp/app/board/types';
+export type BoardColumnProps = {
+    config: BoardColumnConfig;
+};
+export declare function BoardColumn(props: BoardColumnProps): import("react/jsx-runtime").JSX.Element;

package/PageBoard/BoardColumn.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoardColumn = BoardColumn;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BoardColumnProvider_1 = require("@headless-adminapp/app/board/BoardColumnProvider");
+const BoardColumnUI_1 = require("./BoardColumnUI");
+function BoardColumn(props) {
+    return ((0, jsx_runtime_1.jsx)(BoardColumnProvider_1.BoardColumnProvider, { config: props.config, children: (0, jsx_runtime_1.jsx)(BoardColumnUI_1.BoardColumnUI, {}) }));
+}

package/PageBoard/BoardColumnCard.d.ts

@@ -0,0 +1,12 @@
+import { BoardColumnCardPreviewFC } from '@headless-adminapp/app/board/types';
+import { Schema } from '@headless-adminapp/core/schema';
+interface BoardColumnCardProps {
+    record: Record<string, unknown>;
+    index: number;
+    canDrag: boolean;
+    columnId: string;
+    PreviewComponent: BoardColumnCardPreviewFC;
+    schema: Schema;
+}
+export declare function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, schema, }: Readonly<BoardColumnCardProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageBoard/BoardColumnCard.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoardColumnCard = BoardColumnCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const DndProvider_1 = require("../components/DndProvider");
+function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, schema, }) {
+    const ref = (0, react_1.useRef)(null);
+    const { useDrag } = (0, DndProvider_1.useDndContext)();
+    const [{ isDragging }, drag] = useDrag({
+        type: columnId,
+        canDrag,
+        item: () => {
+            return { id: record[schema.idAttribute], columnId, record };
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+    drag(ref);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
+            display: 'flex',
+            background: react_components_1.tokens.colorNeutralBackground1,
+            borderRadius: react_components_1.tokens.borderRadiusLarge,
+            boxShadow: react_components_1.tokens.shadow4,
+            opacity: isDragging ? 0.5 : 1,
+        }, children: (0, jsx_runtime_1.jsx)(PreviewComponent, { record: record }) }));
+}

package/PageBoard/BoardColumnUI.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const BoardColumnUI: FC;