@headless-adminapp/fluent 1.0.2 → 1.1.0

package/Insights/charts/LineChart.d.ts

@@ -3,3 +3,4 @@ export declare function LineChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: LineChartInfo;
 }>): import("react/jsx-runtime").JSX.Element;
+export default LineChart;

package/Insights/charts/LineChart.js

@@ -13,9 +13,9 @@ function LineChart({ dataset, chartInfo, }) {
     const lines = chartInfo.lines;
     const xAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(xAxis.tick);
     const yAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(yAxis.tick);
-    console.log('dataset', dataset, chartInfo);
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(yAxis), (0, renderers_1.renderXAxis)(xAxis), (0, renderers_1.renderLines)(lines, dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { data: dataset[0], children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(yAxis), (0, renderers_1.renderXAxis)(xAxis), (0, renderers_1.renderLines)(lines), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
                         stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
                     }, content: ({ active, payload, label }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));
 }
+exports.default = LineChart;

package/Insights/charts/OhlcChart.d.ts

@@ -4,3 +4,4 @@ export declare function OhlcChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: OhlcChartInfo;
 }>): import("react/jsx-runtime").JSX.Element;
+export default OhlcChart;

package/Insights/charts/OhlcChart.js

@@ -46,7 +46,6 @@ function OhlcChart({ dataset, chartInfo, }) {
     const xAxisFormatter = (0, formatters_1.createAxisFormatter)(xAxis.tick);
     const xAxisLongFormatter = (0, formatters_1.createLongAxisFormatter)(chartInfo.xAxis.tick);
     const yAxisLongFormatter = (0, formatters_1.createLongAxisFormatter)(chartInfo.yAxis.tick);
-    console.log('temp.data', dataset, chartInfo);
     return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.ScatterChart, { data: data, children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)({
                     ...chartInfo.yAxis,
                     domain,
@@ -117,3 +116,4 @@ function renderShape(props, { chartInfo, bar, }) {
     }
     return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)(recharts_1.Rectangle, { x: x + width / 2, y: yAxis.scale(high), width: 1, height: yAxis.scale(low) - yAxis.scale(high), fill: color, stroke: color, strokeWidth: 1 }), (0, jsx_runtime_1.jsx)(recharts_1.Rectangle, { x: xPosition - xWidth / 2, y: Math.min(yAxis.scale(open), yAxis.scale(close)), width: xWidth, height: Math.abs(yAxis.scale(close) - yAxis.scale(open)), fill: color, stroke: color, strokeWidth: 1 })] }));
 }
+exports.default = OhlcChart;

package/Insights/charts/PieChart.d.ts

@@ -3,3 +3,4 @@ export declare function PieChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: PieChartInfo;
 }>): import("react/jsx-runtime").JSX.Element;
+export default PieChart;

package/Insights/charts/PieChart.js

@@ -21,7 +21,7 @@ function PieChart({ dataset, chartInfo, }) {
     const item = chartInfo.pie[0];
     const nameFormatter = (0, formatters_1.createLongAxisFormatter)(item.nameTick);
     const valueFormatter = (0, formatters_1.createLongAxisFormatter)(item.dataTick);
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.PieChart, { children: [(0, jsx_runtime_1.jsx)(recharts_1.Pie, { data: dataset[item.dataIndex ?? 0], cx: "50%", cy: "50%", labelLine: false, label: renderCustomizedLabel, outerRadius: 80, dataKey: item.dataKey, nameKey: item.nameKey, children: dataset[item.dataIndex ?? 0].map((entry, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Cell, { fill: item.colorKey && entry[item.colorKey]
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.PieChart, { children: [(0, jsx_runtime_1.jsx)(recharts_1.Pie, { data: dataset[item.dataIndex ?? 0], cx: "50%", cy: "50%", labelLine: false, label: renderCustomizedLabel, outerRadius: 80, dataKey: item.dataKey, nameKey: item.nameKey, blendStroke: true, legendType: "circle", children: dataset[item.dataIndex ?? 0].map((entry, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Cell, { fill: item.colorKey && entry[item.colorKey]
                             ? entry[item.colorKey]
                             : (item.colors ?? constants_1.defaultColors)[index % (item.colors ?? constants_1.defaultColors).length] }, 'cell-' + String(index)))) }), chartInfo.showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { align: "right", layout: "vertical", verticalAlign: "top", wrapperStyle: {
                         fontSize: react_components_1.tokens.fontSizeBase100,
@@ -52,3 +52,4 @@ function renderTooltipContent({ payload, nameFormatter, valueFormatter, }) {
                             marginLeft: 8,
                         }, children: nameFormatter(item.name) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: valueFormatter(item.value) })] }, index))) }) }));
 }
+exports.default = PieChart;

package/Insights/charts/RadarChart.d.ts

@@ -3,3 +3,4 @@ export declare function RadarChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: RadarChartInfo;
 }>): import("react/jsx-runtime").JSX.Element;
+export default RadarChart;

package/Insights/charts/RadarChart.js

@@ -36,3 +36,4 @@ function renderTooltipContent({ payload, nameFormatter, valueFormatter, radar, }
                             marginLeft: 8,
                         }, children: nameFormatter(item.payload[radar.nameKey]) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: valueFormatter(item.value) })] }, index))) }) }));
 }
+exports.default = RadarChart;

package/Insights/charts/ScatterChart.d.ts

@@ -3,3 +3,4 @@ export declare function ScatterChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: ScatterChartInfo;
 }>): import("react/jsx-runtime").JSX.Element;
+export default ScatterChart;

package/Insights/charts/ScatterChart.js

@@ -9,7 +9,7 @@ const constants_1 = require("./constants");
 const formatters_1 = require("./formatters");
 const renderers_1 = require("./renderers");
 function ScatterChart({ dataset, chartInfo, }) {
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.ScatterChart, { children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderXAxis)(chartInfo.xAxis), (0, renderers_1.renderYAxis)(chartInfo.yAxis), (0, jsx_runtime_1.jsx)(recharts_1.ZAxis, { type: "number", dataKey: chartInfo.zAxis.dataKey, range: chartInfo.zAxis.range, name: chartInfo.zAxis.name }), chartInfo.scatters.map((scatter, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Scatter, { yAxisId: "left", name: scatter.dataLabel, data: dataset[scatter.dataIndex ?? 0], dataKey: scatter.dataKey, fill: scatter.color ?? constants_1.defaultColors[index] }, index))), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: false, content: (props) => {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.ScatterChart, { children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderXAxis)(chartInfo.xAxis, false, { left: 10, right: 10 }), (0, renderers_1.renderYAxis)(chartInfo.yAxis), (0, jsx_runtime_1.jsx)(recharts_1.ZAxis, { type: "number", dataKey: chartInfo.zAxis.dataKey, range: chartInfo.zAxis.range, name: chartInfo.zAxis.name }), chartInfo.scatters.map((scatter, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Scatter, { yAxisId: "left", name: scatter.dataLabel, data: dataset[scatter.dataIndex ?? 0], dataKey: scatter.dataKey, fill: scatter.color ?? constants_1.defaultColors[index] }, index))), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: false, content: (props) => {
                         if (!props.active || !props.payload?.length) {
                             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                         }
@@ -79,3 +79,4 @@ const ScatterTooltipContent = (props) => {
                                 borderRadius: 4,
                             } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4, marginLeft: 8 }, children: item.name }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: zAxisFormatter(item.value) })] }, index)))] }) }));
 };
+exports.default = ScatterChart;

package/Insights/charts/renderers.d.ts

@@ -1,10 +1,11 @@
 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;
+import { XAxisProps } from 'recharts';
+export declare function renderXAxis(axis: XAxis, forceCategory?: boolean, padding?: XAxisProps['padding']): 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 renderLine(line: LineInfo): import("react/jsx-runtime").JSX.Element;
+export declare function renderLines(lines: LineInfo[]): import("react/jsx-runtime").JSX.Element[];
+export declare function renderArea(area: AreaInfo, chartId: string): import("react/jsx-runtime").JSX.Element;
+export declare function renderAreas(areas: AreaInfo[], chartId: string): 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

@@ -11,13 +11,14 @@ exports.renderBar = renderBar;
 exports.renderBars = renderBars;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
 const recharts_1 = require("recharts");
 const formatters_1 = require("./formatters");
-function renderXAxis(axis, forceCategory = false) {
+function renderXAxis(axis, forceCategory = false, padding = 'gap') {
     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: {
+        padding: padding, axisLine: {
             stroke: react_components_1.tokens.colorNeutralBackground6,
         }, fontSize: react_components_1.tokens.fontSizeBase100, tick: {
             fill: react_components_1.tokens.colorNeutralForeground1,
@@ -35,28 +36,30 @@ 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: {
+function renderLine(line) {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.Line, { yAxisId: 'left', type: line.curveType, 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));
+function renderLines(lines) {
+    return lines.map((line) => renderLine(line));
 }
 // 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));
+function renderArea(area, chartId) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: chartId + ':' + area.dataKey, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: area.color, stopOpacity: 0.8 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: area.color, stopOpacity: 0 })] }) }), (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}
+                fill: `url(#${chartId}:${area.dataKey})`, strokeWidth: 2, 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));
+function renderAreas(areas, chartId) {
+    return areas.map((area) => renderArea(area, chartId));
 }
 // 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));
+    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, radius: bar.radius, barSize: bar.barSize }, bar.dataKey));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function renderBars(bars, dataset) {

package/Insights/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const ROW_HEIGHT = 100;
+export declare const GAP = 20;
+export declare const COLUMN_GAP = 20;
+export declare const ROW_GAP = 20;

package/Insights/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ROW_GAP = exports.COLUMN_GAP = exports.GAP = exports.ROW_HEIGHT = void 0;
+exports.ROW_HEIGHT = 100;
+exports.GAP = 20;
+exports.COLUMN_GAP = exports.GAP;
+exports.ROW_GAP = exports.GAP;

package/Insights/hooks/useQueriesData.d.ts

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

package/Insights/hooks/useQueriesData.js

@@ -19,7 +19,6 @@ function useQueriesData(queries) {
     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;

package/OverflowCommandBar/render.js

@@ -12,13 +12,13 @@ function renderCommandItem(key, item, language) {
     const commandType = item.type;
     switch (item.type) {
         case 'menu':
-            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));
+            return ((0, jsx_runtime_1.jsx)(MenuButton_1.CommandMenuButton, { Icon: item.Icon, text: item.localizedTexts?.[language] ?? item.text ?? '', danger: item.danger, disabled: item.disabled, appearance: item.appearance, 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: item.localizedTexts?.[language] ?? item.text ?? '', Icon: item.Icon, iconPosition: item.iconPosition ?? '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, appearance: item.appearance }, key));
         case 'label':
             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));
+            return ((0, jsx_runtime_1.jsx)(CommandBar_1.default.IconButton, { Icon: item.Icon, danger: item.danger, disabled: item.disabled, onClick: item.onClick, appearance: item.appearance }, key));
         default:
             throw new Error(`Unknown command type: ${commandType}`);
     }

package/PageBoard/BoardColumnUI.js

@@ -8,6 +8,7 @@ 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 icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const DndProvider_1 = require("../components/DndProvider");
 const BoardColumnCard_1 = require("./BoardColumnCard");
@@ -16,8 +17,8 @@ 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 { columnId, acceptSourceIds, updateFn } = (0, hooks_1.useBoardColumnConfig)();
+    const { PreviewComponent, HeaderComponent = ColumnHeaderComponent, emptyMessage = 'Nothing to show here. Drag and drop items from other columns.', schema, columnConfigs, minColumnWidth, maxColumnWidth, } = (0, hooks_1.useBoardConfig)();
     const baseContext = (0, hooks_2.useBaseCommandHandlerContext)();
     const { useDrop } = (0, DndProvider_1.useDndContext)();
     const ref = (0, react_1.useRef)(null);
@@ -47,6 +48,7 @@ const BoardColumnUI = () => {
         return columnConfigs.some((config) => config.acceptSourceIds.length > 0);
     }, [columnConfigs]);
     drop(ref);
+    const isEmpty = !data?.records.length && !dataState.isFetching;
     return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
             display: 'flex',
             flexDirection: 'column',
@@ -59,11 +61,24 @@ const BoardColumnUI = () => {
                     : 'none',
             outlineOffset: -5,
             paddingTop: react_components_1.tokens.spacingVerticalS,
-        }, "data-handler-id": handlerId, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+            minWidth: minColumnWidth ?? 240,
+            maxWidth: maxColumnWidth ?? 400,
+        }, "data-handler-id": handlerId, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, {}), isEmpty && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    padding: react_components_1.tokens.spacingHorizontalS,
                     display: 'flex',
-                    paddingInline: react_components_1.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?.records, hasMore: dataState?.hasNextPage, onRequestMore: () => {
+                    flex: 1,
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        flexDirection: 'column',
+                        gap: react_components_1.tokens.spacingVerticalM,
+                        color: react_components_1.tokens.colorNeutralForeground3,
+                        padding: react_components_1.tokens.spacingVerticalXXXL,
+                        borderRadius: react_components_1.tokens.borderRadiusLarge,
+                        backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+                    }, children: [(0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 56, opacity: 0.8 }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { textAlign: 'center' }, children: emptyMessage })] }) })), !isEmpty && ((0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data?.records, hasMore: dataState?.hasNextPage, onRequestMore: () => {
                     fetchNextPage();
                 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
@@ -71,6 +86,20 @@ const BoardColumnUI = () => {
                         gap: react_components_1.tokens.spacingHorizontalM,
                         padding: react_components_1.tokens.spacingHorizontalS,
                     }, children: [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)))] }) })] }));
+                            Array.from({ length: 5 }).map((_, index) => ((0, jsx_runtime_1.jsx)(BoardingColumnCardLoading_1.BoardingColumnCardLoading, {}, index)))] }) }))] }));
 };
 exports.BoardColumnUI = BoardColumnUI;
+const ColumnHeaderComponent = () => {
+    const data = (0, hooks_1.useBoardColumnData)();
+    const { title } = (0, hooks_1.useBoardColumnConfig)();
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            paddingInline: react_components_1.tokens.spacingHorizontalS,
+            alignItems: 'center',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                width: '100%',
+                gap: react_components_1.tokens.spacingHorizontalS,
+            }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), !!data?.count && ((0, jsx_runtime_1.jsx)(react_components_1.CounterBadge, { color: "informative", children: data?.count })), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } })] }) }));
+};

package/PageBoard/Header.js

@@ -2,15 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// eslint-disable-next-line simple-import-sort/imports
 const react_components_1 = require("@fluentui/react-components");
-const react_query_1 = require("@tanstack/react-query");
 const hooks_1 = require("@headless-adminapp/app/board/hooks");
+const hooks_2 = require("@headless-adminapp/app/hooks");
 const icons_1 = require("@headless-adminapp/icons");
+const react_query_1 = require("@tanstack/react-query");
 const AppStringContext_1 = require("../App/AppStringContext");
 const Header = ({ title, subtitle }) => {
     const client = (0, react_query_1.useQueryClient)();
     const schema = (0, hooks_1.useBoardSchema)();
+    const isMobile = (0, hooks_2.useIsMobile)();
     const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
     const appStrings = (0, AppStringContext_1.useAppStrings)();
     const refresh = async () => {
@@ -20,7 +21,8 @@ const Header = ({ title, subtitle }) => {
     };
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
-            alignItems: 'center',
+            flexDirection: isMobile ? 'column' : 'row',
+            alignItems: isMobile ? 'flex-start' : 'center',
             gap: react_components_1.tokens.spacingHorizontalM,
         }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { color: react_components_1.tokens.colorNeutralForeground1 }, children: title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: subtitle })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',

package/PageBoard/PageBoard.js

@@ -4,6 +4,7 @@ exports.PageBoard = PageBoard;
 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 ScrollView_1 = require("@headless-adminapp/app/components/ScrollView");
 const context_2 = require("@headless-adminapp/app/mutable/context");
 const react_1 = require("react");
 const DndProvider_1 = require("../components/DndProvider");
@@ -42,5 +43,10 @@ function PageBoard(props) {
                             flex: 1,
                             marginInline: -6,
                             marginTop: react_components_1.tokens.spacingVerticalM,
-                        }, children: props.config.columnConfigs.map((config) => ((0, jsx_runtime_1.jsx)(BoardColumn_1.BoardColumn, { config: config }, config.columnId))) })] }) }) }));
+                        }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    flex: 1,
+                                    height: '100%',
+                                }, children: props.config.columnConfigs.map((config) => ((0, jsx_runtime_1.jsx)(BoardColumn_1.BoardColumn, { config: config }, config.columnId))) }) }) })] }) }) }));
 }

package/PageCalendar/CalendarSection.js

@@ -10,6 +10,7 @@ const daygrid_1 = __importDefault(require("@fullcalendar/daygrid"));
 const interaction_1 = __importDefault(require("@fullcalendar/interaction"));
 const react_1 = __importDefault(require("@fullcalendar/react"));
 const timegrid_1 = __importDefault(require("@fullcalendar/timegrid"));
+const hooks_1 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const icons_1 = require("@headless-adminapp/icons");
 const dayjs_1 = __importDefault(require("dayjs"));
@@ -28,6 +29,7 @@ dayjs_1.default.extend(isoWeek_1.default);
 const CalendarSection = ({ startDate, endDate, viewType, onRangeChange, events, onDateSelect, onEventClick, loading, }) => {
     const calendarRef = (0, react_2.useRef)(null);
     const { timezone } = (0, locale_1.useLocale)();
+    const isMobile = (0, hooks_1.useIsMobile)();
     const isToday = (0, react_2.useMemo)(() => {
         if (!startDate || !endDate) {
             return false;
@@ -83,6 +85,18 @@ const CalendarSection = ({ startDate, endDate, viewType, onRangeChange, events,
                 break;
         }
     }
+    const initialScrollTime = (0, react_2.useMemo)(() => {
+        const now = (0, dayjs_1.default)().tz(timezone);
+        if (now.hour() < 3) {
+            return '00:00:00';
+        }
+        const time = (0, dayjs_1.default)()
+            .tz(timezone)
+            .subtract(1, 'hour')
+            .startOf('hour')
+            .format('HH:mm:ss');
+        return time;
+    }, [timezone]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flexDirection: 'column',
@@ -93,15 +107,30 @@ const CalendarSection = ({ startDate, endDate, viewType, onRangeChange, events,
             borderRadius: react_components_1.tokens.borderRadiusMedium,
             boxShadow: react_components_1.tokens.shadow2,
             gap: react_components_1.tokens.spacingVerticalM,
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "outline", style: { fontWeight: react_components_1.tokens.fontWeightMedium }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, {}), onClick: () => calendarRef.current?.getApi().today(), disabled: isToday, children: "Today" }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronLeft, {}), onClick: () => calendarRef.current?.getApi().prev() }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronRight, {}), onClick: () => calendarRef.current?.getApi().next() })] }), (0, jsx_runtime_1.jsx)(TitleSelector_1.TitleSelector, { start: startDate, end: endDate, onChange: (start) => {
-                            const api = calendarRef.current?.getApi();
-                            if (!api) {
-                                return;
-                            }
-                            api.gotoDate(start);
-                        }, viewType: viewType }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, justifyContent: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(ViewSelector_1.ViewSelector, { viewType: viewType, onChange: (viewType) => {
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    gap: react_components_1.tokens.spacingHorizontalS,
+                    flexDirection: isMobile ? 'column' : 'row',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "outline", style: { fontWeight: react_components_1.tokens.fontWeightMedium }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, {}), onClick: () => calendarRef.current?.getApi().today(), disabled: isToday, children: "Today" }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronLeft, {}), onClick: () => calendarRef.current?.getApi().prev() }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronRight, {}), onClick: () => calendarRef.current?.getApi().next() }), isMobile && ((0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex', justifyContent: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(TitleSelector_1.TitleSelector, { start: startDate, end: endDate, onChange: (start) => {
+                                        const api = calendarRef.current?.getApi();
+                                        if (!api) {
+                                            return;
+                                        }
+                                        api.gotoDate(start);
+                                    }, viewType: viewType }) }))] }), !isMobile && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TitleSelector_1.TitleSelector, { start: startDate, end: endDate, onChange: (start) => {
+                                const api = calendarRef.current?.getApi();
+                                if (!api) {
+                                    return;
+                                }
+                                api.gotoDate(start);
+                            }, viewType: viewType }) })), (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            flex: 1,
+                            justifyContent: isMobile ? 'flex-start' : 'flex-end',
+                        }, children: (0, jsx_runtime_1.jsx)(ViewSelector_1.ViewSelector, { viewType: viewType, onChange: (viewType) => {
                                 calendarRef.current?.getApi().changeView(viewType);
-                            } }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0 }, children: (0, jsx_runtime_1.jsx)(react_1.default, { ref: calendarRef, plugins: [daygrid_1.default, timegrid_1.default, interaction_1.default], initialView: types_1.ViewType.Month, weekends: true, firstDay: 1, events: events, datesSet: handleDateRangeChange, select: onDateSelect, eventClick: onEventClick, eventContent: renderEventContent_1.renderEventContent, timeZone: timezone, height: "100%", editable: false, selectable: true, selectMirror: true, dayMaxEvents: true, eventMinHeight: 24, eventTimeFormat: (props) => {
+                                calendarRef.current?.getApi().scrollToTime(initialScrollTime);
+                            } }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0 }, children: (0, jsx_runtime_1.jsx)(react_1.default, { ref: calendarRef, plugins: [daygrid_1.default, timegrid_1.default, interaction_1.default], initialView: types_1.ViewType.Month, weekends: true, firstDay: 1, events: events, datesSet: handleDateRangeChange, select: onDateSelect, eventClick: onEventClick, eventContent: renderEventContent_1.renderEventContent, timeZone: timezone, height: "100%", nowIndicator: true, scrollTime: initialScrollTime, scrollTimeReset: false, editable: false, selectable: true, selectMirror: true, dayMaxEvents: true, eventMinHeight: 24, eventTimeFormat: (props) => {
                                 return (0, dayjs_1.default)(props.start.marker).tz(timezone).format('hh:mm A');
                             }, headerToolbar: false }) }), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: loading })] })] }));
 };

package/PageCalendar/EventDialog/AttributeController.d.ts

@@ -5,6 +5,7 @@ interface AttributeControllerProps {
     attribute: Attribute;
     attributeName: Path<BaseFieldValues>;
     form: UseFormReturn<BaseFieldValues>;
+    readOnly?: boolean;
 }
-export declare function AttributeController({ attribute, attributeName, form, }: Readonly<AttributeControllerProps>): import("react/jsx-runtime").JSX.Element;
+export declare function AttributeController({ attribute, attributeName, form, readOnly, }: Readonly<AttributeControllerProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageCalendar/EventDialog/AttributeController.js

@@ -5,13 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_hook_form_1 = require("react-hook-form");
 const SectionControl_1 = require("../../DataForm/SectionControl");
 const StandardControl_1 = require("../../PageEntityForm/StandardControl");
-function AttributeController({ attribute, attributeName, form, }) {
+function AttributeController({ attribute, attributeName, form, readOnly, }) {
     return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: attributeName, render: ({ field, fieldState, formState }) => {
             const isError = (fieldState.isTouched || formState.isSubmitted) &&
                 !!fieldState.error?.message;
             const errorMessage = fieldState.isTouched || formState.isSubmitted
                 ? fieldState.error?.message
                 : '';
-            return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "left", required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, readOnly: attribute.readonly }) }));
+            return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "left", required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, readOnly: readOnly || attribute.readonly }) }));
         } }));
 }

package/PageCalendar/EventDialog/EventFormBody.js

@@ -54,7 +54,22 @@ function EventFormBody(props) {
     (0, react_1.useEffect)(() => {
         formRef.current.reset(defaultValues);
     }, [defaultValues]);
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsxs)(react_components_1.DialogTitle, { action: props.values.id ? ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-end", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", "aria-label": "close", icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.MoreVertical, {}) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [props.allowOpenRecord && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.OpenInNew, { size: 20 }), onClick: () => props.onOpenRecord?.(props.values.id), children: "Open" })), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.Delete, { size: 20 }), onClick: () => props.onDelete?.(props.values.id), children: "Delete" })] }) })] })) : null, children: [props.values.id ? 'Edit' : 'New', ' ', props.config.eventLabel.toLowerCase()] }), (0, jsx_runtime_1.jsx)(EventFormContent_1.EventFormContent, { form: form, afterDescriptionAttributes: props.config.afterDescriptionAttributes, beforeDescriptionAttributes: props.config.beforeDescriptionAttributes }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", disabled: form.formState.submitCount > 0 && !form.formState.isValid, onClick: async () => {
+    const menuItems = [];
+    if (props.allowOpenRecord) {
+        menuItems.push((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.OpenInNew, { size: 20 }), onClick: () => props.onOpenRecord?.(props.values.id), children: "Open" }, "open"));
+    }
+    if (!props.config.disableEdit) {
+        menuItems.push((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.Delete, { size: 20 }), onClick: () => props.onDelete?.(props.values.id), children: "Delete" }, "delete"));
+    }
+    let title = (props.values.id ? 'Edit' : 'New') +
+        ` ${props.config.eventLabel.toLowerCase()}`;
+    if (props.values.id && props.config.disableEdit) {
+        title = props.config.eventLabel;
+    }
+    let readOnly = props.values.id
+        ? props.config.disableEdit
+        : props.config.disableCreate;
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { action: props.values.id && menuItems.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-end", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", "aria-label": "close", icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.MoreVertical, {}) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: menuItems }) })] })) : null, children: title }), (0, jsx_runtime_1.jsx)(EventFormContent_1.EventFormContent, { form: form, afterDescriptionAttributes: props.config.afterDescriptionAttributes, beforeDescriptionAttributes: props.config.beforeDescriptionAttributes, readOnly: readOnly, config: props.config }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [!readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", disabled: form.formState.submitCount > 0 && !form.formState.isValid, onClick: async () => {
                             await form.handleSubmit(async (values) => {
                                 await props.onSubmit?.({
                                     modifiedValues: values.id
@@ -63,7 +78,7 @@ function EventFormBody(props) {
                                     values,
                                 });
                             })();
-                        }, children: props.values.id ? 'Save' : 'Create' }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", type: "button", onClick: () => {
+                        }, children: props.values.id ? 'Save' : 'Create' })), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", type: "button", onClick: () => {
                             props.onCancel?.();
                         }, children: props.values.id ? 'Close' : 'Cancel' })] }), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isPending })] }));
 }

package/PageCalendar/EventDialog/EventFormContent.d.ts

@@ -1,3 +1,4 @@
+import { CalendarConfig } from '@headless-adminapp/app/calendar/types';
 import { SchemaAttributes } from '@headless-adminapp/core/schema';
 import { UseFormReturn } from 'react-hook-form';
 import { BaseFieldValues } from './types';
@@ -5,6 +6,8 @@ interface EventFormContentProps<SA1 extends SchemaAttributes = SchemaAttributes,
     form: UseFormReturn<BaseFieldValues>;
     beforeDescriptionAttributes?: SA1;
     afterDescriptionAttributes?: SA2;
+    readOnly?: boolean;
+    config: CalendarConfig;
 }
-export declare function EventFormContent<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes>({ form, afterDescriptionAttributes, beforeDescriptionAttributes, }: Readonly<EventFormContentProps<SA1, SA2>>): import("react/jsx-runtime").JSX.Element;
+export declare function EventFormContent<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes>({ form, afterDescriptionAttributes, beforeDescriptionAttributes, readOnly, config, }: Readonly<EventFormContentProps<SA1, SA2>>): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageCalendar/EventDialog/EventFormContent.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const baseEventAttributes_1 = require("@headless-adminapp/app/calendar/baseEventAttributes");
 const AttributeController_1 = require("./AttributeController");
-function EventFormContent({ form, afterDescriptionAttributes, beforeDescriptionAttributes, }) {
+function EventFormContent({ form, afterDescriptionAttributes, beforeDescriptionAttributes, readOnly, config, }) {
     const allDay = form.watch('allDay');
     return ((0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',
@@ -13,15 +13,15 @@ function EventFormContent({ form, afterDescriptionAttributes, beforeDescriptionA
                 gap: react_components_1.tokens.spacingVerticalM,
                 marginTop: react_components_1.tokens.spacingVerticalL,
                 marginBottom: react_components_1.tokens.spacingVerticalL,
-            }, children: [(0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "title", attribute: baseEventAttributes_1.baseEventAttributes.title }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "start", attribute: {
+            }, children: [(0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "title", attribute: baseEventAttributes_1.baseEventAttributes.title, readOnly: readOnly }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "start", attribute: {
                         ...baseEventAttributes_1.baseEventAttributes.start,
                         ...(allDay ? { format: 'date' } : { format: 'datetime' }),
-                    } }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "end", attribute: {
+                    }, readOnly: readOnly }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "end", attribute: {
                         ...baseEventAttributes_1.baseEventAttributes.end,
                         ...(allDay ? { format: 'date' } : { format: 'datetime' }),
-                    } }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "allDay", attribute: baseEventAttributes_1.baseEventAttributes.allDay }), Object.entries(beforeDescriptionAttributes ?? {}).map(([attributeName, attribute]) => {
-                    return ((0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: attributeName, attribute: attribute }, attributeName));
-                }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "description", attribute: baseEventAttributes_1.baseEventAttributes.description }), Object.entries(afterDescriptionAttributes ?? {}).map(([attributeName, attribute]) => {
-                    return ((0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: attributeName, attribute: attribute }, attributeName));
+                    }, readOnly: readOnly }), !config.disableAllDay && ((0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "allDay", attribute: baseEventAttributes_1.baseEventAttributes.allDay, readOnly: readOnly })), Object.entries(beforeDescriptionAttributes ?? {}).map(([attributeName, attribute]) => {
+                    return ((0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: attributeName, attribute: attribute, readOnly: readOnly }, attributeName));
+                }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "description", attribute: baseEventAttributes_1.baseEventAttributes.description, readOnly: readOnly }), Object.entries(afterDescriptionAttributes ?? {}).map(([attributeName, attribute]) => {
+                    return ((0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: attributeName, attribute: attribute, readOnly: readOnly }, attributeName));
                 })] }) }));
 }

package/PageCalendar/Header.js

@@ -27,7 +27,7 @@ function Header({ filterForm, onCreateButtonClick, }) {
                             display: 'flex',
                             alignItems: 'center',
                             gap: react_components_1.tokens.spacingHorizontalS,
-                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { style: { fontWeight: react_components_1.tokens.fontWeightMedium }, icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.Add, {}), appearance: "primary", onClick: onCreateButtonClick, children: "Create" }) })] }), !!config.filterAttributes && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: Object.entries(config.filterAttributes).map(([attributeName, attribute]) => {
+                        }, children: !config.disableCreate && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { style: { fontWeight: react_components_1.tokens.fontWeightMedium }, icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.Add, {}), appearance: "primary", onClick: onCreateButtonClick, children: "Create" })) })] }), !!config.filterAttributes && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: Object.entries(config.filterAttributes).map(([attributeName, attribute]) => {
                             return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: filterForm.control, name: attributeName, render: ({ field }) => {
                                     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) }));
                                 } }, attributeName));