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

package/Insights/charts/renderers.js

@@ -1,65 +1,54 @@
-"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, 
+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, 
         // 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,
+            stroke: tokens.colorNeutralBackground6,
+        }, fontSize: tokens.fontSizeBase100, tick: {
+            fill: 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,
+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,
             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 }));
+export function renderGrid() {
+    return (_jsx(CartesianGrid, { strokeDasharray: "8 4", vertical: false, strokeWidth: 0.2, stroke: tokens.colorNeutralBackground6 }));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function renderLine(line, dataset) {
+export function renderLine(line, dataset) {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(recharts_1.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: {
+    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: {
             stroke: line.color,
         } }, line.dataKey));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function renderLines(lines, dataset) {
+export 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: {
+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: {
             stroke: area.color,
         } }, area.dataKey));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function renderAreas(areas, dataset) {
+export 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));
+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));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function renderBars(bars, dataset) {
+export function renderBars(bars, dataset) {
     return bars.map((bar) => renderBar(bar, dataset));
 }

package/Insights/hooks/useQueriesData.js

@@ -1,4 +1,3 @@
-"use strict";
 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) {
@@ -8,24 +7,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-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)(() => {
+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(() => {
         return queries.map((item) => {
             if (typeof item === 'function') {
                 console.log('temp.item', item, item(insightsState, widgetState));
@@ -34,7 +28,7 @@ function useQueriesData(queries) {
             return item;
         });
     }, [queries, insightsState, widgetState]);
-    const result = (0, react_query_1.useQueries)({
+    const result = useQueries({
         queries: resolvedQueries.map((item) => ({
             queryKey: ['insights', 'aggregate', item],
             queryFn: () => __awaiter(this, void 0, void 0, function* () {
@@ -57,7 +51,7 @@ function useQueriesData(queries) {
     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)(() => {
+    const data = useMemo(() => {
         return result.map((r) => r.data);
     }, [result]);
     return { isPending, isFetching, dataset: data, refetch };
@@ -78,19 +72,19 @@ function getAttributeValueTransformer(attribute) {
     let transformer = undefined;
     if (attribute.type === 'date') {
         if (attribute.format) {
-            transformer = (value) => (0, dayjs_1.default)(value, attribute.format)
+            transformer = (value) => dayjs(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')
+            if (attribute.value.value === AggregateAttributeFunction.YearMonth) {
+                transformer = (value) => dayjs(value, 'YYYY-MM')
                     .toDate()
                     .getTime();
             }
         }
         else {
-            transformer = (value) => (0, dayjs_1.default)(value)
+            transformer = (value) => dayjs(value)
                 .toDate()
                 .getTime();
         }

package/Insights/hooks/useWidgetDetail.js

@@ -1,24 +1,21 @@
-"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);
+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);
     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)(
+    const widgetSetValue = useContextSetValue(WidgetContext);
+    const { dataset, isPending, isFetching, refetch } = useQueriesData(widget.dataset);
+    const baseCommandHandleContext = useBaseCommandHandlerContext();
+    const updateStateValue = 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]);
-    const transformedCommands = (0, command_1.useCommands)([widgetContent.commands], Object.assign(Object.assign({}, baseCommandHandleContext), { primaryControl: {
+    const transformedCommands = useCommands([widgetContent.commands], Object.assign(Object.assign({}, baseCommandHandleContext), { primaryControl: {
             refresh: refetch,
             updateStateValue,
         } }));

package/OverflowCommandBar/OverflowCommandBar.js

@@ -1,29 +1,22 @@
-"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) => {
+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) => {
                             const commandType = item.type;
                             switch (item.type) {
                                 case 'menu':
                                 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 (_jsx(OverflowItem, { id: `${groupIndex}-${index}`, groupId: String(groupIndex), children: renderCommandItem(`${groupIndex}-${index}`, item, language) }, `${groupIndex}-${index}`));
                                 default:
                                     throw new Error(`Unknown command type: ${commandType}`);
                             }
-                        })] }, groupIndex))), (0, jsx_runtime_1.jsx)(OverflowMenu_1.OverflowMenu, { items: commands }), afterDivider && (0, jsx_runtime_1.jsx)(CommandBar_1.default.Divider, {})] }) }));
+                        })] }, groupIndex))), _jsx(OverflowMenu, { items: commands }), afterDivider && _jsx(CommandBar.Divider, {})] }) }));
 };
-exports.OverflowCommandBar = OverflowCommandBar;

package/OverflowCommandBar/OverflowMenu.js

@@ -1,4 +1,3 @@
-"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)
@@ -10,36 +9,33 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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)();
+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();
     if (!isOverflowing) {
         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) => {
+    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 ((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));
+                                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))
+                                        : undefined }, `${groupIndex}-${index}`));
                             })] }, groupIndex))) }) })] }));
 };
-exports.OverflowMenu = OverflowMenu;
 const OverflowMenuItem = (props) => {
     const { id } = props, rest = __rest(props, ["id"]);
-    const isVisible = (0, react_components_1.useIsOverflowItemVisible)(id);
+    const isVisible = useIsOverflowItemVisible(id);
     if (isVisible) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, Object.assign({}, rest));
+    return _jsx(MenuItem, Object.assign({}, rest));
 };

package/OverflowCommandBar/OverflowMenuDivider.js

@@ -1,14 +1,10 @@
-"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);
+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);
     if (isGroupVisible !== 'hidden' || isPreviousGroupVisible === 'visible') {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {});
+    return _jsx(MenuDivider, {});
 };
-exports.OverflowMenuDivider = OverflowMenuDivider;

package/OverflowCommandBar/index.js

@@ -1,9 +1,3 @@
-"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; } });
+export { OverflowCommandBar } from './OverflowCommandBar';
+export { transformMenuItems } from './utils';
+export { renderCommandItem } from './render';

package/OverflowCommandBar/render.js

@@ -1,25 +1,19 @@
-"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) {
+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;
     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 (_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));
         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 (_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));
         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 (_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));
         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));
+            return (_jsx(CommandBar.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,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformMenuItems = transformMenuItems;
 function transformMenuItem(item, language) {
     var _a, _b, _c, _d;
     return {
@@ -12,6 +9,6 @@ function transformMenuItem(item, language) {
         items: (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((x) => transformMenuItems(x, language)),
     };
 }
-function transformMenuItems(items, language) {
+export function transformMenuItems(items, language) {
     return items.map((x) => transformMenuItem(x, language));
 }

package/PageBoard/BoardColumn.js

@@ -1,9 +1,6 @@
-"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, {}) }));
+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, {}) }));
 }

package/PageBoard/BoardColumnCard.js

@@ -1,13 +1,10 @@
-"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 react_dnd_1 = require("react-dnd");
-function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, schema, }) {
-    const ref = (0, react_1.useRef)(null);
-    const [{ isDragging }, drag] = (0, react_dnd_1.useDrag)({
+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);
+    const [{ isDragging }, drag] = useDrag({
         type: columnId,
         canDrag,
         item: () => {
@@ -18,11 +15,11 @@ function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, schema,
         }),
     });
     drag(ref);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
+    return (_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,
+            background: tokens.colorNeutralBackground1,
+            borderRadius: tokens.borderRadiusLarge,
+            boxShadow: tokens.shadow4,
             opacity: isDragging ? 0.5 : 1,
-        }, children: (0, jsx_runtime_1.jsx)(PreviewComponent, { record: record }) }));
+        }, children: _jsx(PreviewComponent, { record: record }) }));
 }

package/PageBoard/BoardColumnUI.js

@@ -1,4 +1,3 @@
-"use strict";
 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) {
@@ -8,28 +7,26 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoardColumnUI = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const context_1 = require("@headless-adminapp/app/board/context");
-const hooks_1 = require("@headless-adminapp/app/board/hooks");
-const hooks_2 = require("@headless-adminapp/app/command/hooks");
-const ScrollbarWithMoreDataRequest_1 = require("@headless-adminapp/app/components/ScrollbarWithMoreDataRequest");
-const context_2 = require("@headless-adminapp/app/mutable/context");
-const react_1 = require("react");
-const react_dnd_1 = require("react-dnd");
-const BoardColumnCard_1 = require("./BoardColumnCard");
-const BoardingColumnCardLoading_1 = require("./BoardingColumnCardLoading");
-const BoardColumnUI = () => {
-    const data = (0, hooks_1.useBoardColumnData)();
-    const dataState = (0, hooks_1.useBoardColumnDataState)();
-    const fetchNextPage = (0, context_2.useContextSelector)(context_1.BoardColumnContext, (state) => state.fetchNextPage);
-    const { columnId, acceptSourceIds, title, updateFn } = (0, hooks_1.useBoardColumnConfig)();
-    const { PreviewComponent, schema, columnConfigs } = (0, hooks_1.useBoardConfig)();
-    const baseContext = (0, hooks_2.useBaseCommandHandlerContext)();
-    const ref = (0, react_1.useRef)(null);
-    const [{ handlerId, over, canDrop }, drop] = (0, react_dnd_1.useDrop)({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Body1Strong, tokens } from '@fluentui/react-components';
+import { BoardColumnContext } from '@headless-adminapp/app/board/context';
+import { useBoardColumnConfig, useBoardColumnData, useBoardColumnDataState, useBoardConfig, } from '@headless-adminapp/app/board/hooks';
+import { useBaseCommandHandlerContext } from '@headless-adminapp/app/command/hooks';
+import { ScrollbarWithMoreDataRequest } from '@headless-adminapp/app/components/ScrollbarWithMoreDataRequest';
+import { useContextSelector } from '@headless-adminapp/app/mutable/context';
+import { useMemo, useRef } from 'react';
+import { useDrop } from 'react-dnd';
+import { BoardColumnCard } from './BoardColumnCard';
+import { BoardingColumnCardLoading } from './BoardingColumnCardLoading';
+export const BoardColumnUI = () => {
+    const data = useBoardColumnData();
+    const dataState = useBoardColumnDataState();
+    const fetchNextPage = useContextSelector(BoardColumnContext, (state) => state.fetchNextPage);
+    const { columnId, acceptSourceIds, title, updateFn } = useBoardColumnConfig();
+    const { PreviewComponent, schema, columnConfigs } = useBoardConfig();
+    const baseContext = useBaseCommandHandlerContext();
+    const ref = useRef(null);
+    const [{ handlerId, over, canDrop }, drop] = useDrop({
         accept: acceptSourceIds,
         collect(monitor) {
             return {
@@ -48,34 +45,33 @@ const BoardColumnUI = () => {
             }))().catch(console.error);
         },
     });
-    const canDrag = (0, react_1.useMemo)(() => {
+    const canDrag = useMemo(() => {
         return columnConfigs.some((config) => config.acceptSourceIds.length > 0);
     }, [columnConfigs]);
     drop(ref);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
+    return (_jsxs("div", { ref: ref, style: {
             display: 'flex',
             flexDirection: 'column',
             flex: 1,
-            borderRadius: react_components_1.tokens.borderRadiusXLarge,
+            borderRadius: tokens.borderRadiusXLarge,
             outline: over
-                ? `2px dashed ${react_components_1.tokens.colorBrandBackground}`
+                ? `2px dashed ${tokens.colorBrandBackground}`
                 : canDrop
-                    ? `2px dashed ${react_components_1.tokens.colorNeutralStroke1}`
+                    ? `2px dashed ${tokens.colorNeutralStroke1}`
                     : 'none',
             outlineOffset: -5,
-            paddingTop: react_components_1.tokens.spacingVerticalS,
-        }, "data-handler-id": handlerId, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+            paddingTop: tokens.spacingVerticalS,
+        }, "data-handler-id": handlerId, children: [_jsx("div", { style: {
                     display: 'flex',
-                    paddingInline: react_components_1.tokens.spacingHorizontalS,
+                    paddingInline: tokens.spacingHorizontalS,
                     alignItems: 'center',
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } })] }) }), (0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data === null || data === void 0 ? void 0 : data.records, hasMore: dataState === null || dataState === void 0 ? void 0 : dataState.hasNextPage, onRequestMore: () => {
+                }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx(Body1Strong, { children: title }), _jsx("div", { style: { flex: 1 } })] }) }), _jsx(ScrollbarWithMoreDataRequest, { data: data === null || data === void 0 ? void 0 : data.records, hasMore: dataState === null || dataState === void 0 ? void 0 : dataState.hasNextPage, onRequestMore: () => {
                     fetchNextPage();
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: _jsxs("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
-                        gap: react_components_1.tokens.spacingHorizontalM,
-                        padding: react_components_1.tokens.spacingHorizontalS,
-                    }, children: [data === null || data === void 0 ? void 0 : data.records.map((record, index) => ((0, jsx_runtime_1.jsx)(BoardColumnCard_1.BoardColumnCard, { record: record, index: index, columnId: columnId, canDrag: canDrag, PreviewComponent: PreviewComponent, schema: schema }, index))), dataState.isFetching &&
-                            Array.from({ length: 5 }).map((_, index) => ((0, jsx_runtime_1.jsx)(BoardingColumnCardLoading_1.BoardingColumnCardLoading, {}, index)))] }) })] }));
+                        gap: tokens.spacingHorizontalM,
+                        padding: tokens.spacingHorizontalS,
+                    }, children: [data === null || data === void 0 ? void 0 : data.records.map((record, index) => (_jsx(BoardColumnCard, { record: record, index: index, columnId: columnId, canDrag: canDrag, PreviewComponent: PreviewComponent, schema: schema }, index))), dataState.isFetching &&
+                            Array.from({ length: 5 }).map((_, index) => (_jsx(BoardingColumnCardLoading, {}, index)))] }) })] }));
 };
-exports.BoardColumnUI = BoardColumnUI;

package/PageBoard/BoardingColumnCardLoading.js

@@ -1,20 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoardingColumnCardLoading = BoardingColumnCardLoading;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-function BoardingColumnCardLoading() {
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Skeleton, { style: {
-            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
-            borderRadius: react_components_1.tokens.borderRadiusLarge,
-            padding: react_components_1.tokens.spacingHorizontalM,
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton, SkeletonItem, tokens } from '@fluentui/react-components';
+export function BoardingColumnCardLoading() {
+    return (_jsxs(Skeleton, { style: {
+            backgroundColor: tokens.colorNeutralBackground1,
+            borderRadius: tokens.borderRadiusLarge,
+            padding: tokens.spacingHorizontalM,
             display: 'flex',
             flexDirection: 'column',
-            gap: react_components_1.tokens.spacingVerticalM,
-        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: {
+            gap: tokens.spacingVerticalM,
+        }, children: [_jsx(SkeletonItem, { style: {
                     height: 16,
                     width: '100%',
-                } }), (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: {
+                } }), _jsx(SkeletonItem, { style: {
                     height: 16,
                     width: '50%',
                 } })] }));