@headless-adminapp/fluent 0.0.17-alpha.53 → 0.0.17-alpha.56

package/Insights/charts/renderers.js

@@ -1,54 +1,64 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { tokens } from '@fluentui/react-components';
-import { Area, Bar, CartesianGrid, Line, XAxis as XAxisInternal, YAxis as YAxisInternal, } from 'recharts';
-import { createAxisFormatter } from './formatters';
-export function renderXAxis(axis, forceCategory = false) {
-    const xAxisFormatter = createAxisFormatter(axis.tick);
-    return (_jsx(XAxisInternal, { dataKey: axis.dataKey, name: axis.name, tickFormatter: xAxisFormatter, tickLine: false, minTickGap: 10, 
+"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: tokens.colorNeutralBackground6,
-        }, fontSize: tokens.fontSizeBase100, tick: {
-            fill: tokens.colorNeutralForeground1,
+            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 }));
 }
-export function renderYAxis(axis) {
-    const yAxisFormatter = createAxisFormatter(axis.tick);
-    return (_jsx(YAxisInternal, { yAxisId: "left", dataKey: axis.dataKey, tickFormatter: yAxisFormatter, name: axis.name, tickLine: false, fontSize: tokens.fontSizeBase100, axisLine: false, tickMargin: 0, minTickGap: 0, accentHeight: 0, width: 40, scale: "auto", type: "number", domain: axis.domain, tick: {
-            fill: tokens.colorNeutralForeground1,
+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,
         } }));
 }
-export function renderGrid() {
-    return (_jsx(CartesianGrid, { strokeDasharray: "8 4", vertical: false, strokeWidth: 0.2, stroke: tokens.colorNeutralBackground6 }));
+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
-export function renderLine(line, dataset) {
-    var _a;
-    return (_jsx(Line, { yAxisId: 'left', type: line.curveType, data: dataset[(_a = line.dataIndex) !== null && _a !== void 0 ? _a : 0], dataKey: line.dataKey, name: line.dataLabel, stroke: line.color, strokeWidth: 2, dot: false, activeDot: {
+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
-export function renderLines(lines, dataset) {
+function renderLines(lines, dataset) {
     return lines.map((line) => renderLine(line, dataset));
 }
 // eslint-disable-next-line unused-imports/no-unused-vars
-export function renderArea(area, dataset) {
-    return (_jsx(Area, { yAxisId: 'left', type: area.curveType, dataKey: area.dataKey, name: area.dataLabel, stroke: area.color, fill: area.color, strokeWidth: 1, dot: false, activeDot: {
+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
-export function renderAreas(areas, dataset) {
+function renderAreas(areas, dataset) {
     return areas.map((area) => renderArea(area, dataset));
 }
 // eslint-disable-next-line unused-imports/no-unused-vars
-export function renderBar(bar, dataset) {
-    return (_jsx(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));
+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
-export function renderBars(bars, dataset) {
+function renderBars(bars, dataset) {
     return bars.map((bar) => renderBar(bar, dataset));
 }

package/Insights/hooks/useQueriesData.js

@@ -1,25 +1,22 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-import { InsightsContext } from '@headless-adminapp/app/insights';
-import { useContextSelector } from '@headless-adminapp/app/mutable';
-import { useDataService } from '@headless-adminapp/app/transport';
-import { WidgetContext } from '@headless-adminapp/app/widget';
-import { AggregateAttributeFunction, } from '@headless-adminapp/core/transport';
-import { useQueries } from '@tanstack/react-query';
-import dayjs from 'dayjs';
-import { useMemo } from 'react';
-export function useQueriesData(queries) {
-    const dataService = useDataService();
-    const insightsState = useContextSelector(InsightsContext, (state) => state);
-    const widgetState = useContextSelector(WidgetContext, (state) => state);
-    const resolvedQueries = useMemo(() => {
+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));
@@ -28,10 +25,10 @@ export function useQueriesData(queries) {
             return item;
         });
     }, [queries, insightsState, widgetState]);
-    const result = useQueries({
+    const result = (0, react_query_1.useQueries)({
         queries: resolvedQueries.map((item) => ({
             queryKey: ['insights', 'aggregate', item],
-            queryFn: () => __awaiter(this, void 0, void 0, function* () {
+            queryFn: async () => {
                 if (item.type === 'constant') {
                     return item.value;
                 }
@@ -42,16 +39,16 @@ export function useQueriesData(queries) {
                     return dataService.customAction(item.value.actionName, item.value.payload);
                 }
                 const query = item.value;
-                const data = yield dataService.retriveAggregate(query);
+                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 = useMemo(() => {
+    const data = (0, react_1.useMemo)(() => {
         return result.map((r) => r.data);
     }, [result]);
     return { isPending, isFetching, dataset: data, refetch };
@@ -72,19 +69,19 @@ function getAttributeValueTransformer(attribute) {
     let transformer = undefined;
     if (attribute.type === 'date') {
         if (attribute.format) {
-            transformer = (value) => dayjs(value, attribute.format)
+            transformer = (value) => (0, dayjs_1.default)(value, attribute.format)
                 .toDate()
                 .getTime();
         }
         else if (attribute.value.type === 'function') {
-            if (attribute.value.value === AggregateAttributeFunction.YearMonth) {
-                transformer = (value) => dayjs(value, 'YYYY-MM')
+            if (attribute.value.value === transport_2.AggregateAttributeFunction.YearMonth) {
+                transformer = (value) => (0, dayjs_1.default)(value, 'YYYY-MM')
                     .toDate()
                     .getTime();
             }
         }
         else {
-            transformer = (value) => dayjs(value)
+            transformer = (value) => (0, dayjs_1.default)(value)
                 .toDate()
                 .getTime();
         }

package/Insights/hooks/useWidgetDetail.js

@@ -1,24 +1,33 @@
-import { useCommands } from '@headless-adminapp/app/command';
-import { useBaseCommandHandlerContext } from '@headless-adminapp/app/command/hooks';
-import { useContextSelector, useContextSetValue, } from '@headless-adminapp/app/mutable';
-import { WidgetContext } from '@headless-adminapp/app/widget';
-import { useCallback } from 'react';
-import { useQueriesData } from './useQueriesData';
-export function useWidgetDetail(widgetContent) {
-    const widgetState = useContextSelector(WidgetContext, (state) => state);
+"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 = useContextSetValue(WidgetContext);
-    const { dataset, isPending, isFetching, refetch } = useQueriesData(widget.dataset);
-    const baseCommandHandleContext = useBaseCommandHandlerContext();
-    const updateStateValue = useCallback(
+    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) => (Object.assign(Object.assign({}, state), { data: Object.assign(Object.assign({}, state.data), value) })));
+        widgetSetValue((state) => ({
+            ...state,
+            data: { ...state.data, ...value },
+        }));
     }, [widgetSetValue]);
-    const transformedCommands = useCommands([widgetContent.commands], Object.assign(Object.assign({}, baseCommandHandleContext), { primaryControl: {
+    const transformedCommands = (0, command_1.useCommands)([widgetContent.commands], {
+        ...baseCommandHandleContext,
+        primaryControl: {
             refresh: refetch,
             updateStateValue,
-        } }));
+        },
+    });
     return {
         isPending,
         isFetching,

package/OverflowCommandBar/OverflowCommandBar.js

@@ -1,22 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Overflow, OverflowDivider, OverflowItem, } from '@fluentui/react-components';
-import { useLocale } from '@headless-adminapp/app/locale';
-import { Fragment } from 'react';
-import CommandBar from '../CommandBar';
-import { OverflowMenu } from './OverflowMenu';
-import { renderCommandItem } from './render';
-export const OverflowCommandBar = ({ commands, align = 'start', afterDivider, beforeDivider, }) => {
-    const { language } = useLocale();
-    return (_jsx(Overflow, { children: _jsxs(CommandBar.Wrapper, { overflow: "hidden", align: align, children: [beforeDivider && _jsx(CommandBar.Divider, {}), commands.map((group, groupIndex) => (_jsxs(Fragment, { children: [groupIndex > 0 && (_jsx(OverflowDivider, { groupId: String(groupIndex - 1), children: _jsx(CommandBar.Divider, {}) })), group.map((item, index) => {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverflowCommandBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const locale_1 = require("@headless-adminapp/app/locale");
+const react_1 = require("react");
+const CommandBar_1 = __importDefault(require("../CommandBar"));
+const OverflowMenu_1 = require("./OverflowMenu");
+const render_1 = require("./render");
+const OverflowCommandBar = ({ commands, align = 'start', afterDivider, beforeDivider, }) => {
+    const { language } = (0, locale_1.useLocale)();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Overflow, { children: (0, jsx_runtime_1.jsxs)(CommandBar_1.default.Wrapper, { overflow: "hidden", align: align, children: [beforeDivider && (0, jsx_runtime_1.jsx)(CommandBar_1.default.Divider, {}), commands.map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [groupIndex > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.OverflowDivider, { groupId: String(groupIndex - 1), children: (0, jsx_runtime_1.jsx)(CommandBar_1.default.Divider, {}) })), group.map((item, index) => {
                             const commandType = item.type;
                             switch (item.type) {
                                 case 'menu':
                                 case 'button':
                                 case 'label':
                                 case 'icon':
-                                    return (_jsx(OverflowItem, { id: `${groupIndex}-${index}`, groupId: String(groupIndex), children: renderCommandItem(`${groupIndex}-${index}`, item, language) }, `${groupIndex}-${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}`);
                             }
-                        })] }, groupIndex))), _jsx(OverflowMenu, { items: commands }), afterDivider && _jsx(CommandBar.Divider, {})] }) }));
+                        })] }, groupIndex))), (0, jsx_runtime_1.jsx)(OverflowMenu_1.OverflowMenu, { items: commands }), afterDivider && (0, jsx_runtime_1.jsx)(CommandBar_1.default.Divider, {})] }) }));
 };
+exports.OverflowCommandBar = OverflowCommandBar;

package/OverflowCommandBar/OverflowMenu.js

@@ -1,41 +1,33 @@
-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;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Menu, MenuList, MenuPopover, MenuTrigger, ToolbarButton, useIsOverflowItemVisible, useOverflowMenu, } from '@fluentui/react-components';
-import { useLocale } from '@headless-adminapp/app/locale';
-import { Icons } from '@headless-adminapp/icons';
-import { Fragment } from 'react';
-import { MenuItem } from '../CommandBar/MenuItem';
-import { OverflowMenuDivider } from './OverflowMenuDivider';
-import { transformMenuItems } from './utils';
-export const OverflowMenu = ({ items, }) => {
-    const { ref, isOverflowing } = useOverflowMenu();
-    const { language } = useLocale();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverflowMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const locale_1 = require("@headless-adminapp/app/locale");
+const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+const MenuItem_1 = require("../CommandBar/MenuItem");
+const OverflowMenuDivider_1 = require("./OverflowMenuDivider");
+const utils_1 = require("./utils");
+const OverflowMenu = ({ items, }) => {
+    const { ref, isOverflowing } = (0, react_components_1.useOverflowMenu)();
+    const { language } = (0, locale_1.useLocale)();
     if (!isOverflowing) {
         return null;
     }
-    return (_jsxs(Menu, { positioning: "below-end", hasIcons: true, children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: _jsx(ToolbarButton, { ref: ref, type: "button", icon: _jsx(Icons.MoreHorizontal, {}) }) }), _jsx(MenuPopover, { children: _jsx(MenuList, { children: items.map((group, groupIndex) => (_jsxs(Fragment, { children: [groupIndex > 0 && (_jsx(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 : '' : '';
-                                return (_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) => transformMenuItems(x, language))
+    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) => {
+                                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'
+                                        ? 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 isVisible = useIsOverflowItemVisible(id);
+    const { id, ...rest } = props;
+    const isVisible = (0, react_components_1.useIsOverflowItemVisible)(id);
     if (isVisible) {
         return null;
     }
-    return _jsx(MenuItem, Object.assign({}, rest));
+    return (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { ...rest });
 };

package/OverflowCommandBar/OverflowMenuDivider.js

@@ -1,10 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MenuDivider, useIsOverflowGroupVisible, } from '@fluentui/react-components';
-export const OverflowMenuDivider = (props) => {
-    const isGroupVisible = useIsOverflowGroupVisible(props.id);
-    const isPreviousGroupVisible = useIsOverflowGroupVisible(props.previousGroupId);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverflowMenuDivider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const OverflowMenuDivider = (props) => {
+    const isGroupVisible = (0, react_components_1.useIsOverflowGroupVisible)(props.id);
+    const isPreviousGroupVisible = (0, react_components_1.useIsOverflowGroupVisible)(props.previousGroupId);
     if (isGroupVisible !== 'hidden' || isPreviousGroupVisible === 'visible') {
         return null;
     }
-    return _jsx(MenuDivider, {});
+    return (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {});
 };
+exports.OverflowMenuDivider = OverflowMenuDivider;

package/OverflowCommandBar/index.js

@@ -1,3 +1,9 @@
-export { OverflowCommandBar } from './OverflowCommandBar';
-export { transformMenuItems } from './utils';
-export { renderCommandItem } from './render';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderCommandItem = exports.transformMenuItems = exports.OverflowCommandBar = void 0;
+var OverflowCommandBar_1 = require("./OverflowCommandBar");
+Object.defineProperty(exports, "OverflowCommandBar", { enumerable: true, get: function () { return OverflowCommandBar_1.OverflowCommandBar; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "transformMenuItems", { enumerable: true, get: function () { return utils_1.transformMenuItems; } });
+var render_1 = require("./render");
+Object.defineProperty(exports, "renderCommandItem", { enumerable: true, get: function () { return render_1.renderCommandItem; } });

package/OverflowCommandBar/render.js

@@ -1,19 +1,24 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import CommandBar from '../CommandBar';
-import { CommandMenuButton } from '../CommandBar/MenuButton';
-import { transformMenuItems } from './utils';
-export function renderCommandItem(key, item, language) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderCommandItem = renderCommandItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CommandBar_1 = __importDefault(require("../CommandBar"));
+const MenuButton_1 = require("../CommandBar/MenuButton");
+const utils_1 = require("./utils");
+function renderCommandItem(key, item, language) {
     const commandType = item.type;
     switch (item.type) {
         case 'menu':
-            return (_jsx(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) => 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 (_jsx(CommandBar.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 (_jsx(CommandBar.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 (_jsx(CommandBar.IconButton, { Icon: item.Icon, danger: item.danger, disabled: item.disabled, onClick: item.onClick }, key));
+            return ((0, jsx_runtime_1.jsx)(CommandBar_1.default.IconButton, { Icon: item.Icon, danger: item.danger, disabled: item.disabled, onClick: item.onClick }, key));
         default:
             throw new Error(`Unknown command type: ${commandType}`);
     }

package/OverflowCommandBar/utils.js

@@ -1,14 +1,16 @@
+"use strict";
+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)),
     };
 }
-export function transformMenuItems(items, language) {
+function transformMenuItems(items, language) {
     return items.map((x) => transformMenuItem(x, language));
 }

package/PageBoard/BoardColumn.js

@@ -1,6 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BoardColumnProvider } from '@headless-adminapp/app/board/BoardColumnProvider';
-import { BoardColumnUI } from './BoardColumnUI';
-export function BoardColumn(props) {
-    return (_jsx(BoardColumnProvider, { config: props.config, children: _jsx(BoardColumnUI, {}) }));
+"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

@@ -8,5 +8,5 @@ interface BoardColumnCardProps {
     PreviewComponent: BoardColumnCardPreviewFC;
     schema: Schema;
 }
-export declare function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, schema, }: BoardColumnCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, schema, }: Readonly<BoardColumnCardProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageBoard/BoardColumnCard.js

@@ -1,9 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { tokens } from '@fluentui/react-components';
-import { useRef } from 'react';
-import { useDrag } from 'react-dnd';
-export function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, schema, }) {
-    const ref = useRef(null);
+"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,
@@ -15,11 +19,11 @@ export function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, s
         }),
     });
     drag(ref);
-    return (_jsx("div", { ref: ref, style: {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
             display: 'flex',
-            background: tokens.colorNeutralBackground1,
-            borderRadius: tokens.borderRadiusLarge,
-            boxShadow: tokens.shadow4,
+            background: react_components_1.tokens.colorNeutralBackground1,
+            borderRadius: react_components_1.tokens.borderRadiusLarge,
+            boxShadow: react_components_1.tokens.shadow4,
             opacity: isDragging ? 0.5 : 1,
-        }, children: _jsx(PreviewComponent, { record: record }) }));
+        }, children: (0, jsx_runtime_1.jsx)(PreviewComponent, { record: record }) }));
 }