@monolith-forensics/monolith-ui 1.9.3-dev.0 → 1.9.3-dev.1

package/dist/Charts/LineChart/LineChart.js

@@ -23,16 +23,17 @@ import { scaleLinear, scalePoint, scaleTime } from "d3-scale";
 import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { useTheme } from "styled-components";
 import { ChartExportControl } from "../ChartPrimitives";
-import { DEFAULT_CHART_EXPORT_FORMATS, copyChartImage, downloadChartImage, } from "../ChartUtils";
+import { DEFAULT_CHART_EXPORT_FORMATS, copyChartImage, downloadChartImage, useChartResponsiveSize, } from "../ChartUtils";
 import { buildAreaPath, buildLinePath, clamp, easeOutCubic, formatDefaultValue, getGradientStops, getPointKey, getSeriesKey, getSeriesLabelText, getValueDomain, measureSvgPath, mergeChartMargin, normalizeTickValue, parseLineChartXValue, resolveXAxisType, useThemeColor, useThemeColors, } from "./LineChart.lib";
 import { StyledArea, StyledAxisLine, StyledAxisText, StyledChartActions, StyledChartFrame, StyledChartScroller, StyledContainer, StyledEmptyState, StyledGridLine, StyledHoverTarget, StyledLegend, StyledLegendItem, StyledLegendLabel, StyledLegendLine, StyledLegendValue, StyledLine, StyledPoint, StyledSvg, StyledTooltip, StyledTooltipHeader, StyledTooltipLabel, StyledTooltipMeta, StyledTooltipSwatch, StyledValueLabel, } from "./LineChart.styled";
 const LineChartInner = (_a, ref) => {
     var _b, _c, _d;
-    var { data, series, seriesLabel = "Series", width = 720, height = 320, margin, xAxisType = "auto", curve = "monotone", lineColor, colors, colorGradient, lineWidth = 2.5, lineOpacity = 1, lineDasharray, showArea = false, areaColor, areaOpacity = 0.14, showPoints = false, pointRadius = 3, activePointRadius = 4, pointColor, pointBorderColor, pointBorderWidth = 1.5, pointOpacity = 1, yMin, yMax, xTickCount = 6, yTickCount = 5, showGridLines = true, showAxisLines = true, showXAxisLabels = true, showYAxisLabels = true, showLegend = false, showLabels = false, emptyLabel = "No data", ariaLabel = "Line chart", animateOnRender = false, animationDuration = 720, showExportButton = false, exportFileName = "line-chart", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, valueFormatter, xValueFormatter, xTickFormatter, yTickFormatter, labelFormatter, tooltipFormatter, onPointClick, className } = _a, props = __rest(_a, ["data", "series", "seriesLabel", "width", "height", "margin", "xAxisType", "curve", "lineColor", "colors", "colorGradient", "lineWidth", "lineOpacity", "lineDasharray", "showArea", "areaColor", "areaOpacity", "showPoints", "pointRadius", "activePointRadius", "pointColor", "pointBorderColor", "pointBorderWidth", "pointOpacity", "yMin", "yMax", "xTickCount", "yTickCount", "showGridLines", "showAxisLines", "showXAxisLabels", "showYAxisLabels", "showLegend", "showLabels", "emptyLabel", "ariaLabel", "animateOnRender", "animationDuration", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "valueFormatter", "xValueFormatter", "xTickFormatter", "yTickFormatter", "labelFormatter", "tooltipFormatter", "onPointClick", "className"]);
+    var { data, series, seriesLabel = "Series", width, height, responsive = false, aspectRatio, minWidth = 240, minHeight = 200, margin, xAxisType = "auto", curve = "monotone", lineColor, colors, colorGradient, lineWidth = 2.5, lineOpacity = 1, lineDasharray, showArea = false, areaColor, areaOpacity = 0.14, showPoints = false, pointRadius = 3, activePointRadius = 4, pointColor, pointBorderColor, pointBorderWidth = 1.5, pointOpacity = 1, yMin, yMax, xTickCount = 6, yTickCount = 5, showGridLines = true, showAxisLines = true, showXAxisLabels = true, showYAxisLabels = true, showLegend = false, showLabels = false, emptyLabel = "No data", ariaLabel = "Line chart", animateOnRender = false, animationDuration = 720, showExportButton = false, exportFileName = "line-chart", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, valueFormatter, xValueFormatter, xTickFormatter, yTickFormatter, labelFormatter, tooltipFormatter, onPointClick, className } = _a, props = __rest(_a, ["data", "series", "seriesLabel", "width", "height", "responsive", "aspectRatio", "minWidth", "minHeight", "margin", "xAxisType", "curve", "lineColor", "colors", "colorGradient", "lineWidth", "lineOpacity", "lineDasharray", "showArea", "areaColor", "areaOpacity", "showPoints", "pointRadius", "activePointRadius", "pointColor", "pointBorderColor", "pointBorderWidth", "pointOpacity", "yMin", "yMax", "xTickCount", "yTickCount", "showGridLines", "showAxisLines", "showXAxisLabels", "showYAxisLabels", "showLegend", "showLabels", "emptyLabel", "ariaLabel", "animateOnRender", "animationDuration", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "valueFormatter", "xValueFormatter", "xTickFormatter", "yTickFormatter", "labelFormatter", "tooltipFormatter", "onPointClick", "className"]);
     const descriptionId = useId();
     const gradientBaseId = useId();
     const theme = useTheme();
     const containerRef = useRef(null);
+    const chartSizeRef = useRef(null);
     const chartFrameRef = useRef(null);
     const svgRef = useRef(null);
     const tooltipRef = useRef(null);
@@ -46,8 +47,18 @@ const LineChartInner = (_a, ref) => {
     const themeLineColor = useThemeColor(lineColor);
     const themeColors = useThemeColors(colors);
     const resolvedMargin = mergeChartMargin(margin, showXAxisLabels, showYAxisLabels, showLabels);
-    const safeWidth = Math.max(width, 240);
-    const safeHeight = Math.max(height, 200);
+    const chartSize = useChartResponsiveSize(chartSizeRef, {
+        width,
+        height,
+        responsive,
+        aspectRatio,
+        defaultWidth: 720,
+        defaultHeight: 320,
+        minWidth: Math.max(minWidth, 1),
+        minHeight: Math.max(minHeight, 1),
+    });
+    const safeWidth = chartSize.width;
+    const safeHeight = chartSize.height;
     const plotWidth = Math.max(safeWidth - resolvedMargin.left - resolvedMargin.right, 1);
     const plotHeight = Math.max(safeHeight - resolvedMargin.top - resolvedMargin.bottom, 1);
     const resolvedGlobalLineWidth = Math.max(lineWidth, 1);
@@ -207,7 +218,7 @@ const LineChartInner = (_a, ref) => {
         if (resolvedXAxisType !== "time")
             return null;
         const timeValues = allPoints
-            .map((point) => (point.parsedX instanceof Date ? point.parsedX.getTime() : null))
+            .map((point) => point.parsedX instanceof Date ? point.parsedX.getTime() : null)
             .filter((value) => value != null);
         const min = Math.min(...timeValues);
         const max = Math.max(...timeValues);
@@ -289,7 +300,8 @@ const LineChartInner = (_a, ref) => {
     }, [renderedSeries, renderedSeriesKey]);
     useLayoutEffect(() => {
         var _a;
-        if (!animateOnRender || renderedSeries.every((seriesEntry) => !seriesEntry.linePath)) {
+        if (!animateOnRender ||
+            renderedSeries.every((seriesEntry) => !seriesEntry.linePath)) {
             setAnimationProgress(1);
             return;
         }
@@ -307,7 +319,9 @@ const LineChartInner = (_a, ref) => {
             if (startTime == null)
                 startTime = timestamp;
             const elapsed = timestamp - startTime;
-            const progress = safeDuration === 0 ? 1 : easeOutCubic(clamp(elapsed / safeDuration, 0, 1));
+            const progress = safeDuration === 0
+                ? 1
+                : easeOutCubic(clamp(elapsed / safeDuration, 0, 1));
             setAnimationProgress(progress);
             if (progress < 1) {
                 animationFrame = window.requestAnimationFrame(runAnimation);
@@ -337,7 +351,10 @@ const LineChartInner = (_a, ref) => {
     const yTicks = useMemo(() => Array.from(new Set(yScale
         .ticks(Math.max(yTickCount, 2))
         .map((tick) => normalizeTickValue(tick)))), [yScale, yTickCount]);
-    const formatValue = (datum, sourceSeries) => { var _a; return (_a = valueFormatter === null || valueFormatter === void 0 ? void 0 : valueFormatter(datum.y, datum, sourceSeries)) !== null && _a !== void 0 ? _a : formatDefaultValue(datum.y); };
+    const formatValue = (datum, sourceSeries) => {
+        var _a;
+        return (_a = valueFormatter === null || valueFormatter === void 0 ? void 0 : valueFormatter(datum.y, datum, sourceSeries)) !== null && _a !== void 0 ? _a : formatDefaultValue(datum.y);
+    };
     const formatXValue = (datum, sourceSeries) => {
         var _a;
         return (_a = xValueFormatter === null || xValueFormatter === void 0 ? void 0 : xValueFormatter(datum.x, datum, sourceSeries)) !== null && _a !== void 0 ? _a : (datum.x instanceof Date ? datum.x.toLocaleDateString() : String(datum.x));
@@ -428,7 +445,7 @@ const LineChartInner = (_a, ref) => {
         .join(", ");
     const shouldAnimateStroke = animateOnRender && animationProgress < 1;
     const shouldShowDataLabels = showLabels && allPoints.length <= 24;
-    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className }, props, { children: [allPoints.length === 0 ? (_jsx(StyledEmptyState, { "$width": safeWidth, "$height": safeHeight, children: emptyLabel })) : (_jsx(StyledChartScroller, { children: _jsxs(StyledChartFrame, { ref: chartFrameRef, children: [showExportButton && exportFormats.length > 0 && (_jsx(StyledChartActions, { "data-chart-export-ignore": "true", children: _jsx(ChartExportControl, { rootRef: containerRef, svgRef: svgRef, fileName: exportFileName, formats: exportFormats, scale: exportScale, backgroundColor: resolvedExportBackgroundColor }) })), _jsxs(StyledSvg, { ref: svgRef, width: safeWidth, height: safeHeight, viewBox: `0 0 ${safeWidth} ${safeHeight}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: description }), _jsx("defs", { children: renderedSeries
+    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className, "$fillAvailableWidth": chartSize.fillAvailableWidth }, props, { children: [_jsx(StyledChartScroller, { ref: chartSizeRef, "$width": chartSize.widthStyle, "$height": chartSize.heightStyle, children: allPoints.length === 0 ? (_jsx(StyledEmptyState, { "$width": safeWidth, "$height": safeHeight, children: emptyLabel })) : (_jsxs(StyledChartFrame, { ref: chartFrameRef, children: [showExportButton && exportFormats.length > 0 && (_jsx(StyledChartActions, { "data-chart-export-ignore": "true", children: _jsx(ChartExportControl, { rootRef: containerRef, svgRef: svgRef, fileName: exportFileName, formats: exportFormats, scale: exportScale, backgroundColor: resolvedExportBackgroundColor }) })), _jsxs(StyledSvg, { ref: svgRef, width: safeWidth, height: safeHeight, viewBox: `0 0 ${safeWidth} ${safeHeight}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: description }), _jsx("defs", { children: renderedSeries
                                         .filter((seriesEntry) => { var _a; return (_a = seriesEntry.gradientStops) === null || _a === void 0 ? void 0 : _a.length; })
                                         .map((seriesEntry) => {
                                         var _a;
@@ -437,7 +454,8 @@ const LineChartInner = (_a, ref) => {
                                                 return (_jsx("stop", { offset: `${((_a = seriesEntry.gradientStops) !== null && _a !== void 0 ? _a : []).length === 1
                                                         ? 100
                                                         : (index /
-                                                            (((_b = seriesEntry.gradientStops) !== null && _b !== void 0 ? _b : []).length - 1)) *
+                                                            (((_b = seriesEntry.gradientStops) !== null && _b !== void 0 ? _b : []).length -
+                                                                1)) *
                                                             100}%`, stopColor: stop }, `${stop}-${index}`));
                                             }) }, seriesEntry.gradientId));
                                     }) }), showGridLines &&
@@ -446,10 +464,10 @@ const LineChartInner = (_a, ref) => {
                                     xTicks.map((tick, index) => {
                                         var _a, _b, _c;
                                         const x = resolvedXAxisType === "time"
-                                            ? (_a = timeScale === null || timeScale === void 0 ? void 0 : timeScale(tick)) !== null && _a !== void 0 ? _a : 0
+                                            ? ((_a = timeScale === null || timeScale === void 0 ? void 0 : timeScale(tick)) !== null && _a !== void 0 ? _a : 0)
                                             : resolvedXAxisType === "linear"
-                                                ? (_b = linearScale === null || linearScale === void 0 ? void 0 : linearScale(tick)) !== null && _b !== void 0 ? _b : 0
-                                                : (_c = pointScale === null || pointScale === void 0 ? void 0 : pointScale(String(tick))) !== null && _c !== void 0 ? _c : 0;
+                                                ? ((_b = linearScale === null || linearScale === void 0 ? void 0 : linearScale(tick)) !== null && _b !== void 0 ? _b : 0)
+                                                : ((_c = pointScale === null || pointScale === void 0 ? void 0 : pointScale(String(tick))) !== null && _c !== void 0 ? _c : 0);
                                         return (_jsx(StyledAxisText, { x: resolvedMargin.left + x, y: resolvedMargin.top + plotHeight + 20, textAnchor: "middle", children: formatXTick(tick) }, `tick-x-${index}`));
                                     }), _jsxs("g", { transform: `translate(${resolvedMargin.left}, ${resolvedMargin.top})`, children: [_jsx(StyledHoverTarget, { x: 0, y: 0, width: plotWidth, height: plotHeight, onMouseEnter: (event) => {
                                                 if (!showTooltips && !showPoints && !onPointClick)
@@ -488,7 +506,8 @@ const LineChartInner = (_a, ref) => {
                                                                 : undefined,
                                                             opacity: isSeriesDimmed ? 0.7 : 1,
                                                         } })), seriesEntry.linePath && (_jsx(StyledLine, { "$active": isSeriesActive, "$dimmed": isSeriesDimmed, ref: (node) => {
-                                                            linePathRefs.current[String(seriesEntry.key)] = node;
+                                                            linePathRefs.current[String(seriesEntry.key)] =
+                                                                node;
                                                         }, d: seriesEntry.linePath, stroke: gradientReference, strokeWidth: isSeriesActive
                                                             ? seriesEntry.lineWidth + 0.8
                                                             : seriesEntry.lineWidth, strokeOpacity: seriesEntry.lineOpacity, strokeDasharray: shouldAnimateStroke && lineLength > 0
@@ -518,7 +537,7 @@ const LineChartInner = (_a, ref) => {
                                             renderedSeries.map((seriesEntry) => seriesEntry.points.map((point) => {
                                                 var _a;
                                                 return (_jsx(StyledValueLabel, { x: getPointX(point), y: getPointY(point) - 10, textAnchor: "middle", children: (_a = labelFormatter === null || labelFormatter === void 0 ? void 0 : labelFormatter(point, point.index, seriesEntry.sourceSeries)) !== null && _a !== void 0 ? _a : formatValue(point, seriesEntry.sourceSeries) }, `label-${point.key}`));
-                                            }))] })] })] }) })), activeTooltip && activePoint && activeSeries && tooltipStyle && (_jsx(StyledTooltip, { ref: tooltipRef, style: tooltipStyle, children: tooltipFormatter ? (tooltipFormatter(activePoint, activePoint.index, activeSeries.sourceSeries)) : (_jsxs(_Fragment, { children: [_jsxs(StyledTooltipHeader, { children: [_jsx(StyledTooltipSwatch, { "$color": (_d = activePoint.color) !== null && _d !== void 0 ? _d : activeSeries.pointColor }), _jsx(StyledTooltipLabel, { children: formatXValue(activePoint, activeSeries.sourceSeries) })] }), _jsxs(StyledTooltipMeta, { children: [_jsx("span", { children: activePoint.seriesLabel }), _jsx("span", { children: formatValue(activePoint, activeSeries.sourceSeries) })] })] })) })), showLegend && (_jsx(StyledLegend, { children: renderedSeries.map((seriesEntry) => {
+                                            }))] })] })] })) }), activeTooltip && activePoint && activeSeries && tooltipStyle && (_jsx(StyledTooltip, { ref: tooltipRef, style: tooltipStyle, children: tooltipFormatter ? (tooltipFormatter(activePoint, activePoint.index, activeSeries.sourceSeries)) : (_jsxs(_Fragment, { children: [_jsxs(StyledTooltipHeader, { children: [_jsx(StyledTooltipSwatch, { "$color": (_d = activePoint.color) !== null && _d !== void 0 ? _d : activeSeries.pointColor }), _jsx(StyledTooltipLabel, { children: formatXValue(activePoint, activeSeries.sourceSeries) })] }), _jsxs(StyledTooltipMeta, { children: [_jsx("span", { children: activePoint.seriesLabel }), _jsx("span", { children: formatValue(activePoint, activeSeries.sourceSeries) })] })] })) })), showLegend && (_jsx(StyledLegend, { children: renderedSeries.map((seriesEntry) => {
                     const latestPoint = seriesEntry.points[seriesEntry.points.length - 1];
                     if (!latestPoint)
                         return null;

package/dist/Charts/LineChart/LineChart.styled.d.ts

@@ -1,6 +1,11 @@
 import { StyledChartActions } from "../ChartPrimitives";
-export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledChartScroller: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fillAvailableWidth: boolean;
+}>> & string;
+export declare const StyledChartScroller: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width?: string;
+    $height?: string;
+}>> & string;
 export declare const StyledChartFrame: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export { StyledChartActions };
 export declare const StyledSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;

package/dist/Charts/LineChart/LineChart.styled.js

@@ -10,7 +10,7 @@ export const StyledContainer = styled.div `
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 20px;
-  width: fit-content;
+  width: ${({ $fillAvailableWidth }) => $fillAvailableWidth ? "100%" : "fit-content"};
   max-width: 100%;
   color: ${({ theme }) => theme.palette.text.primary};
   box-sizing: border-box;
@@ -18,10 +18,13 @@ export const StyledContainer = styled.div `
 `;
 export const StyledChartScroller = styled.div `
   display: flex;
+  width: ${({ $width }) => $width !== null && $width !== void 0 ? $width : "auto"};
+  height: ${({ $height }) => $height !== null && $height !== void 0 ? $height : "auto"};
   max-width: 100%;
   overflow-x: auto;
   overflow-y: visible;
   padding-bottom: 2px;
+  box-sizing: border-box;
 `;
 export const StyledChartFrame = styled.div `
   position: relative;
@@ -120,6 +123,7 @@ export const StyledEmptyState = styled.div `
   justify-content: center;
   width: ${({ $width }) => $width}px;
   height: ${({ $height }) => $height}px;
+  box-sizing: border-box;
   border: 1px dashed ${({ theme }) => theme.palette.divider};
   border-radius: 8px;
   background: linear-gradient(

package/dist/Charts/LineChart/LineChart.types.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import type { ChartExportOptions } from "../ChartUtils";
+import type { ChartDimension, ChartExportOptions } from "../ChartUtils";
 export type LineChartDatum<TData = unknown> = {
     /** Stable identifier for the point. Falls back to x and index when omitted. */
     id?: string | number;
@@ -104,10 +104,18 @@ export type LineChartProps<TData = unknown> = HTMLAttributes<HTMLDivElement> & C
     series?: LineChartSeries<TData>[];
     /** Label used for the single-line variant in legend and tooltip context. */
     seriesLabel?: React.ReactNode;
-    /** SVG width in pixels. Defaults to 720. */
-    width?: number;
-    /** SVG height in pixels. Defaults to 320. */
-    height?: number;
+    /** SVG width in pixels or any CSS length measured from the chart frame. Defaults to 720. */
+    width?: ChartDimension;
+    /** SVG height in pixels or any CSS length measured from the chart frame. Defaults to 320. */
+    height?: ChartDimension;
+    /** Measures the chart frame and fits the SVG width to its available space. Defaults to false. */
+    responsive?: boolean;
+    /** Calculates height from resolved width when height is omitted. */
+    aspectRatio?: number;
+    /** Minimum rendered SVG width in pixels. Defaults to 240. */
+    minWidth?: number;
+    /** Minimum rendered SVG height in pixels. Defaults to 200. */
+    minHeight?: number;
     /** Partial chart margin overrides. Defaults are based on visible labels. */
     margin?: Partial<LineChartMargin>;
     /** X-axis scale type. Defaults to "auto". */

package/dist/Charts/PieChart/PieChart.js

@@ -23,15 +23,16 @@ import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, use
 import { arc, pie } from "d3-shape";
 import { useTheme } from "styled-components";
 import { ChartExportControl } from "../ChartPrimitives";
-import { DEFAULT_CHART_EXPORT_FORMATS, copyChartImage, downloadChartImage, } from "../ChartUtils";
+import { DEFAULT_CHART_EXPORT_FORMATS, copyChartImage, downloadChartImage, useChartResponsiveSize, } from "../ChartUtils";
 import { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getSliceKey, useThemeColors, } from "./PieChart.lib";
 import { StyledCenter, StyledCenterLabel, StyledCenterPanel, StyledCenterValue, StyledChartActions, StyledChartWrap, StyledContainer, StyledEmptyState, StyledLabel, StyledLegend, StyledLegendItem, StyledLegendLabel, StyledLegendMeta, StyledLegendPercent, StyledLegendValue, StyledSlice, StyledSvg, StyledSwatch, StyledTooltip, StyledTooltipHeader, StyledTooltipLabel, StyledTooltipMeta, StyledTooltipSwatch, } from "./PieChart.styled";
 const PieChartInner = (_a, ref) => {
     var _b, _c;
-    var { data, size = 220, innerRadius = 58, outerRadius, cornerRadius = 1, padAngle = 0.004, colors, colorGradient, sliceOpacity = 1, sliceBorderColor, sliceBorderWidth = 1, sliceBorderOpacity = 1, sliceBorderLineJoin = "round", showLegend = true, showLegendSwatches = true, showLegendLabels = true, showLegendValues = true, showLegendPercentages = true, showLabels = false, centerLabel, centerValue, emptyLabel = "No data", ariaLabel = "Pie chart", animateOnRender = false, animationDuration = 520, animationStagger = 35, showExportButton = false, exportFileName = "pie-chart", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, valueFormatter, labelFormatter, tooltipFormatter, onSliceClick, onLegendItemClick, className } = _a, props = __rest(_a, ["data", "size", "innerRadius", "outerRadius", "cornerRadius", "padAngle", "colors", "colorGradient", "sliceOpacity", "sliceBorderColor", "sliceBorderWidth", "sliceBorderOpacity", "sliceBorderLineJoin", "showLegend", "showLegendSwatches", "showLegendLabels", "showLegendValues", "showLegendPercentages", "showLabels", "centerLabel", "centerValue", "emptyLabel", "ariaLabel", "animateOnRender", "animationDuration", "animationStagger", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "valueFormatter", "labelFormatter", "tooltipFormatter", "onSliceClick", "onLegendItemClick", "className"]);
+    var { data, size, responsive = false, minSize = 120, innerRadius, outerRadius, cornerRadius = 1, padAngle = 0.004, colors, colorGradient, sliceOpacity = 1, sliceBorderColor, sliceBorderWidth = 1, sliceBorderOpacity = 1, sliceBorderLineJoin = "round", showLegend = true, showLegendSwatches = true, showLegendLabels = true, showLegendValues = true, showLegendPercentages = true, showLabels = false, centerLabel, centerValue, emptyLabel = "No data", ariaLabel = "Pie chart", animateOnRender = false, animationDuration = 520, animationStagger = 35, showExportButton = false, exportFileName = "pie-chart", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, valueFormatter, labelFormatter, tooltipFormatter, onSliceClick, onLegendItemClick, className } = _a, props = __rest(_a, ["data", "size", "responsive", "minSize", "innerRadius", "outerRadius", "cornerRadius", "padAngle", "colors", "colorGradient", "sliceOpacity", "sliceBorderColor", "sliceBorderWidth", "sliceBorderOpacity", "sliceBorderLineJoin", "showLegend", "showLegendSwatches", "showLegendLabels", "showLegendValues", "showLegendPercentages", "showLabels", "centerLabel", "centerValue", "emptyLabel", "ariaLabel", "animateOnRender", "animationDuration", "animationStagger", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "valueFormatter", "labelFormatter", "tooltipFormatter", "onSliceClick", "onLegendItemClick", "className"]);
     const descriptionId = useId();
     const theme = useTheme();
     const containerRef = useRef(null);
+    const chartSizeRef = useRef(null);
     const svgRef = useRef(null);
     const [activeSliceKey, setActiveSliceKey] = useState(null);
     const [activeTooltip, setActiveTooltip] = useState(null);
@@ -39,7 +40,21 @@ const PieChartInner = (_a, ref) => {
     const themeColors = useThemeColors(colors);
     const validData = useMemo(() => data.filter((datum) => Number.isFinite(datum.value) && datum.value > 0), [data]);
     const total = useMemo(() => validData.reduce((sum, datum) => sum + datum.value, 0), [validData]);
-    const radius = outerRadius !== null && outerRadius !== void 0 ? outerRadius : Math.max(size / 2 - 6, 0);
+    const chartSize = useChartResponsiveSize(chartSizeRef, {
+        width: size,
+        responsive,
+        aspectRatio: 1,
+        defaultWidth: 220,
+        defaultHeight: 220,
+        minWidth: Math.max(minSize, 1),
+        minHeight: Math.max(minSize, 1),
+    });
+    const safeSize = Math.min(chartSize.width, chartSize.height);
+    const radius = outerRadius !== null && outerRadius !== void 0 ? outerRadius : Math.max(safeSize / 2 - 6, 0);
+    const shouldScaleDefaultInnerRadius = innerRadius == null && (responsive || typeof size === "string");
+    const defaultInnerRadius = shouldScaleDefaultInnerRadius
+        ? Math.max(radius * (58 / 104), 0)
+        : 58;
     const resolvedSliceOpacity = clamp(sliceOpacity, 0, 1);
     const resolvedSliceBorderWidth = Math.max(sliceBorderWidth, 0);
     const resolvedSliceBorderOpacity = clamp(sliceBorderOpacity, 0, 1);
@@ -69,7 +84,7 @@ const PieChartInner = (_a, ref) => {
             });
         }),
     }), [exportFileName, exportScale, resolvedExportBackgroundColor]);
-    const resolvedInnerRadius = Math.min(innerRadius, radius - 1);
+    const resolvedInnerRadius = Math.max(Math.min(innerRadius !== null && innerRadius !== void 0 ? innerRadius : defaultInnerRadius, radius - 1), 0);
     const centerPanelDiameter = Math.max(resolvedInnerRadius * 1.62, 52);
     const labelRadius = resolvedInnerRadius > 0
         ? resolvedInnerRadius + (radius - resolvedInnerRadius) / 2
@@ -155,35 +170,35 @@ const PieChartInner = (_a, ref) => {
     const activeTooltipSlice = showTooltips && activeTooltip
         ? slices.find((slice, index) => getSliceKey(slice.data, index) === activeTooltip.sliceKey)
         : null;
-    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className }, props, { children: [slices.length === 0 ? (_jsx(StyledEmptyState, { "$size": size, children: emptyLabel })) : (_jsxs(StyledChartWrap, { children: [showExportButton && exportFormats.length > 0 && (_jsx(StyledChartActions, { "data-chart-export-ignore": "true", children: _jsx(ChartExportControl, { rootRef: containerRef, svgRef: svgRef, fileName: exportFileName, formats: exportFormats, scale: exportScale, backgroundColor: resolvedExportBackgroundColor }) })), _jsxs(StyledSvg, { ref: svgRef, width: size, height: size, viewBox: `0 0 ${size} ${size}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: slices
-                                    .map((slice) => `${slice.data.label}: ${formatDefaultValue(slice.data.value)}`)
-                                    .join(", ") }), _jsx("g", { transform: `translate(${size / 2}, ${size / 2})`, children: slices.map((slice, index) => {
-                                    var _a;
-                                    const sliceKey = getSliceKey(slice.data, index);
-                                    const sliceAnimationProgress = getSliceAnimationProgress(index);
-                                    const animatedSlice = Object.assign(Object.assign({}, slice), { startAngle: animationStartAngle +
-                                            (slice.startAngle - animationStartAngle) *
-                                                sliceAnimationProgress, endAngle: animationStartAngle +
-                                            (slice.endAngle - animationStartAngle) *
-                                                sliceAnimationProgress });
-                                    const path = arcGenerator(animatedSlice);
-                                    const labelPosition = labelArcGenerator.centroid(slice);
-                                    const percent = Math.round(slice.percent * 100);
-                                    return (_jsxs("g", { children: [_jsx(StyledSlice, { "$active": activeSliceKey === sliceKey, d: path !== null && path !== void 0 ? path : undefined, fill: slice.color, fillOpacity: resolvedSliceOpacity, stroke: resolvedSliceBorderColor, strokeWidth: resolvedSliceBorderWidth, strokeOpacity: resolvedSliceBorderOpacity, strokeLinejoin: sliceBorderLineJoin, tabIndex: 0, onFocus: () => setActiveSliceKey(sliceKey), onBlur: () => setActiveSliceKey(null), onMouseEnter: (event) => {
-                                                    setActiveSliceKey(sliceKey);
-                                                    updateTooltipPosition(event, sliceKey);
-                                                }, onMouseMove: (event) => updateTooltipPosition(event, sliceKey), onMouseLeave: () => {
-                                                    setActiveSliceKey(null);
-                                                    setActiveTooltip(null);
-                                                }, onClick: (event) => onSliceClick === null || onSliceClick === void 0 ? void 0 : onSliceClick(event, slice.data), onKeyDown: (event) => {
-                                                    if (event.key !== "Enter" && event.key !== " ")
-                                                        return;
-                                                    event.preventDefault();
-                                                    onSliceClick === null || onSliceClick === void 0 ? void 0 : onSliceClick(event, slice.data);
-                                                }, "aria-label": `${slice.data.label}: ${formatDefaultValue(slice.data.value)}, ${percent}%` }), showLabels &&
-                                                slice.percent >= 0.05 &&
-                                                sliceAnimationProgress >= 0.92 && (_jsx(StyledLabel, { x: labelPosition[0], y: labelPosition[1], textAnchor: "middle", dominantBaseline: "central", children: (_a = labelFormatter === null || labelFormatter === void 0 ? void 0 : labelFormatter(slice.data, slice.percent)) !== null && _a !== void 0 ? _a : `${percent}%` }))] }, sliceKey));
-                                }) })] }), (centerLabel != null || centerValue != null) && (_jsx(StyledCenter, { children: _jsxs(StyledCenterPanel, { "$diameter": centerPanelDiameter, children: [centerValue != null && (_jsx(StyledCenterValue, { children: centerValue })), centerLabel != null && (_jsx(StyledCenterLabel, { children: centerLabel }))] }) }))] })), shouldShowLegend && (_jsx(StyledLegend, { children: slices.map((slice, index) => {
+    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className, "$fillAvailableWidth": chartSize.fillAvailableWidth }, props, { children: [_jsx(StyledChartWrap, { ref: chartSizeRef, "$width": chartSize.widthStyle, "$height": chartSize.heightStyle, children: slices.length === 0 ? (_jsx(StyledEmptyState, { "$size": safeSize, children: emptyLabel })) : (_jsxs(_Fragment, { children: [showExportButton && exportFormats.length > 0 && (_jsx(StyledChartActions, { "data-chart-export-ignore": "true", children: _jsx(ChartExportControl, { rootRef: containerRef, svgRef: svgRef, fileName: exportFileName, formats: exportFormats, scale: exportScale, backgroundColor: resolvedExportBackgroundColor }) })), _jsxs(StyledSvg, { ref: svgRef, width: safeSize, height: safeSize, viewBox: `0 0 ${safeSize} ${safeSize}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: slices
+                                        .map((slice) => `${slice.data.label}: ${formatDefaultValue(slice.data.value)}`)
+                                        .join(", ") }), _jsx("g", { transform: `translate(${safeSize / 2}, ${safeSize / 2})`, children: slices.map((slice, index) => {
+                                        var _a;
+                                        const sliceKey = getSliceKey(slice.data, index);
+                                        const sliceAnimationProgress = getSliceAnimationProgress(index);
+                                        const animatedSlice = Object.assign(Object.assign({}, slice), { startAngle: animationStartAngle +
+                                                (slice.startAngle - animationStartAngle) *
+                                                    sliceAnimationProgress, endAngle: animationStartAngle +
+                                                (slice.endAngle - animationStartAngle) *
+                                                    sliceAnimationProgress });
+                                        const path = arcGenerator(animatedSlice);
+                                        const labelPosition = labelArcGenerator.centroid(slice);
+                                        const percent = Math.round(slice.percent * 100);
+                                        return (_jsxs("g", { children: [_jsx(StyledSlice, { "$active": activeSliceKey === sliceKey, d: path !== null && path !== void 0 ? path : undefined, fill: slice.color, fillOpacity: resolvedSliceOpacity, stroke: resolvedSliceBorderColor, strokeWidth: resolvedSliceBorderWidth, strokeOpacity: resolvedSliceBorderOpacity, strokeLinejoin: sliceBorderLineJoin, tabIndex: 0, onFocus: () => setActiveSliceKey(sliceKey), onBlur: () => setActiveSliceKey(null), onMouseEnter: (event) => {
+                                                        setActiveSliceKey(sliceKey);
+                                                        updateTooltipPosition(event, sliceKey);
+                                                    }, onMouseMove: (event) => updateTooltipPosition(event, sliceKey), onMouseLeave: () => {
+                                                        setActiveSliceKey(null);
+                                                        setActiveTooltip(null);
+                                                    }, onClick: (event) => onSliceClick === null || onSliceClick === void 0 ? void 0 : onSliceClick(event, slice.data), onKeyDown: (event) => {
+                                                        if (event.key !== "Enter" && event.key !== " ")
+                                                            return;
+                                                        event.preventDefault();
+                                                        onSliceClick === null || onSliceClick === void 0 ? void 0 : onSliceClick(event, slice.data);
+                                                    }, "aria-label": `${slice.data.label}: ${formatDefaultValue(slice.data.value)}, ${percent}%` }), showLabels &&
+                                                    slice.percent >= 0.05 &&
+                                                    sliceAnimationProgress >= 0.92 && (_jsx(StyledLabel, { x: labelPosition[0], y: labelPosition[1], textAnchor: "middle", dominantBaseline: "central", children: (_a = labelFormatter === null || labelFormatter === void 0 ? void 0 : labelFormatter(slice.data, slice.percent)) !== null && _a !== void 0 ? _a : `${percent}%` }))] }, sliceKey));
+                                    }) })] }), (centerLabel != null || centerValue != null) && (_jsx(StyledCenter, { children: _jsxs(StyledCenterPanel, { "$diameter": centerPanelDiameter, children: [centerValue != null && (_jsx(StyledCenterValue, { children: centerValue })), centerLabel != null && (_jsx(StyledCenterLabel, { children: centerLabel }))] }) }))] })) }), shouldShowLegend && (_jsx(StyledLegend, { children: slices.map((slice, index) => {
                     const sliceKey = getSliceKey(slice.data, index);
                     return (_jsxs(StyledLegendItem, { "$active": activeSliceKey === sliceKey, "$showSwatch": showLegendSwatches, "$showLabel": showLegendLabels, "$showMeta": showLegendMeta, tabIndex: 0, onMouseEnter: () => setActiveSliceKey(sliceKey), onMouseLeave: () => setActiveSliceKey(null), onFocus: () => setActiveSliceKey(sliceKey), onBlur: () => setActiveSliceKey(null), onClick: (event) => onLegendItemClick === null || onLegendItemClick === void 0 ? void 0 : onLegendItemClick(event, slice.data), onKeyDown: (event) => {
                             if (event.key !== "Enter" && event.key !== " ")

package/dist/Charts/PieChart/PieChart.styled.d.ts

@@ -1,6 +1,11 @@
 import { StyledChartActions } from "../ChartPrimitives";
-export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledChartWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fillAvailableWidth: boolean;
+}>> & string;
+export declare const StyledChartWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width?: string;
+    $height?: string;
+}>> & string;
 export { StyledChartActions };
 export declare const StyledSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;
 export declare const StyledSlice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGPathElement>, {

package/dist/Charts/PieChart/PieChart.styled.js

@@ -11,7 +11,7 @@ export const StyledContainer = styled.div `
   align-items: center;
   flex-wrap: wrap;
   gap: 20px;
-  width: fit-content;
+  width: ${({ $fillAvailableWidth }) => $fillAvailableWidth ? "100%" : "fit-content"};
   max-width: 100%;
   color: ${({ theme }) => theme.palette.text.primary};
   box-sizing: border-box;
@@ -24,6 +24,10 @@ export const StyledChartWrap = styled.div `
   align-items: stretch;
   justify-content: center;
   flex: 0 0 auto;
+  width: ${({ $width }) => $width !== null && $width !== void 0 ? $width : "auto"};
+  height: ${({ $height }) => $height !== null && $height !== void 0 ? $height : "auto"};
+  max-width: 100%;
+  box-sizing: border-box;
 `;
 export { StyledChartActions };
 export const StyledSvg = styled.svg `
@@ -146,6 +150,7 @@ export const StyledEmptyState = styled.div `
   justify-content: center;
   width: ${({ $size }) => $size}px;
   height: ${({ $size }) => $size}px;
+  box-sizing: border-box;
   border: 1px dashed ${({ theme }) => theme.palette.divider};
   border-radius: 50%;
   background: radial-gradient(

package/dist/Charts/PieChart/PieChart.types.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { PieArcDatum } from "d3-shape";
-import type { ChartExportOptions } from "../ChartUtils";
+import type { ChartDimension, ChartExportOptions } from "../ChartUtils";
 export type PieChartDatum<TData = unknown> = {
     /** Stable identifier for the slice. Falls back to label and index when omitted. */
     id?: string | number;
@@ -26,8 +26,12 @@ string[]
 export type PieChartProps<TData = unknown> = HTMLAttributes<HTMLDivElement> & ChartExportOptions & {
     /** Slice data rendered by the chart. Only positive finite values are displayed. */
     data: PieChartDatum<TData>[];
-    /** SVG width and height in pixels. Defaults to 220. */
-    size?: number;
+    /** SVG width and height in pixels or any CSS length measured from the chart frame. Defaults to 220. */
+    size?: ChartDimension;
+    /** Measures the chart frame and fits the square SVG to its available width. Defaults to false. */
+    responsive?: boolean;
+    /** Minimum rendered SVG size in pixels. Defaults to 120. */
+    minSize?: number;
     /** Inner radius in pixels. Set to 0 for a solid pie. Defaults to 58. */
     innerRadius?: number;
     /** Outer radius in pixels. Defaults to half the size minus chart padding. */

package/dist/FieldLabel/FieldLabel.js

@@ -1,29 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import * as Tooltip from "@radix-ui/react-tooltip";
 import { getControlSizeTokens } from "../core";
+import Tooltip from "../Tooltip";
 export const InfoComponent = styled(({ className, children, description, label }) => {
     if (!description)
         return children;
-    return (_jsx(Tooltip.Provider, { delayDuration: 300, skipDelayDuration: 0, disableHoverableContent: true, children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: children }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: className, side: "right", sideOffset: 15, align: "start", onClick: (e) => e.stopPropagation(), children: [_jsx("div", { className: "title", children: label || "Info" }), _jsx("div", { children: description || "N/A" })] }) })] }) }));
+    return (_jsx(Tooltip, { className: className, content: _jsxs(_Fragment, { children: [_jsx("div", { className: "title", children: label || "Info" }), _jsx("div", { children: description })] }), side: "right", hoverableContent: true, sideOffset: 15, align: "start", children: children }));
 }) `
-  pointer-events: none;
-  z-index: 999999;
-  background-color: ${({ theme }) => theme.palette.background.default};
-  padding: 15px;
-  border-radius: 5px;
-  border: 1px solid ${({ theme }) => theme.palette.divider};
-  font-size: 0.75rem;
   max-width: 350px;
   width: 250px;
-
-  white-space: pre-wrap;
-
-  .title {
-    font-size: 0.85rem;
-    font-weight: 600;
-    margin-bottom: 5px;
-  }
 `;
 const FieldLabel = styled(({ className, children, error, description, size = "sm", style, actionComponent, }) => {
     return (_jsxs("div", { className: className + " FieldLabel", style: style, children: [_jsxs("div", { className: "label-content", children: [_jsx(InfoComponent, { description: description, label: children, children: _jsx("div", { className: "label", children: children }) }), error && (_jsx("div", { className: "error", title: error, children: error || "Invalid Value" }))] }), actionComponent && (_jsx("div", { className: "action-section", children: actionComponent }))] }));

package/dist/RichTextEditor/Extensions/getSlashCommand.d.ts

@@ -1,10 +1,30 @@
-import { Extension } from "@tiptap/core";
+import type { ComponentType } from "react";
+import { Extension, Editor } from "@tiptap/core";
 import { HandleImageUpload } from "../Plugins/UploadImagesPlugin.js";
 import { SlashCommands } from "../Enums";
-type CommandName = keyof typeof SlashCommands;
+export type SlashCommandRange = {
+    from: number;
+    to: number;
+};
+export type SlashCommandActionProps = {
+    editor: Editor;
+    range: SlashCommandRange;
+};
+export type CustomSlashCommand = {
+    id: string;
+    title: string;
+    description?: string;
+    searchTerms?: string[];
+    icon?: ComponentType<{
+        size?: number;
+    }>;
+    command: (props: SlashCommandActionProps) => void;
+};
 interface SlashCommandOptions {
     handleImageUpload?: HandleImageUpload;
-    commands?: CommandName[];
+    commands?: SlashCommands[];
+    customCommands?: CustomSlashCommand[];
+    getCustomCommands?: () => CustomSlashCommand[];
 }
 declare const getSlashCommand: (options?: SlashCommandOptions) => Extension;
 export default getSlashCommand;

package/dist/RichTextEditor/Extensions/getSlashCommand.js

@@ -20,14 +20,14 @@ import moment from "moment/moment.js";
 import { DEFAULT_CODE_BLOCK_LANGUAGE } from "../Utils/codeBlockUtils";
 const SlashCommandPluginKey = new PluginKey("slash-command");
 const getCommandItems = (values, options) => {
-    var _a;
+    var _a, _b;
     if ((_a = options === null || options === void 0 ? void 0 : options.commands) === null || _a === void 0 ? void 0 : _a.includes(SlashCommands.Image)) {
         // Assert that options.handleImageUpload is defined
         if (!options.handleImageUpload) {
             throw new Error("options.handleImageUpload is required when using the Image command.");
         }
     }
-    return [
+    const builtInItems = [
         {
             title: SlashCommands.Text,
             description: "Just start typing with plain text.",
@@ -208,14 +208,22 @@ const getCommandItems = (values, options) => {
                     .run();
             },
         },
-    ]
-        .filter((item) => {
+    ].filter((item) => {
         if (options === null || options === void 0 ? void 0 : options.commands) {
             return options.commands.includes(item.title);
         }
         return true;
-    })
-        .filter((item) => {
+    });
+    const customItems = (((_b = options === null || options === void 0 ? void 0 : options.getCustomCommands) === null || _b === void 0 ? void 0 : _b.call(options)) ||
+        (options === null || options === void 0 ? void 0 : options.customCommands) ||
+        []).map((command) => ({
+        title: command.title,
+        description: command.description || "",
+        searchTerms: command.searchTerms,
+        icon: command.icon || Text,
+        command: command.command,
+    }));
+    return [...builtInItems, ...customItems].filter((item) => {
         var _a, _b;
         if (typeof (values === null || values === void 0 ? void 0 : values.query) === "string" && ((_a = values === null || values === void 0 ? void 0 : values.query) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             const search = (_b = values === null || values === void 0 ? void 0 : values.query) === null || _b === void 0 ? void 0 : _b.toLowerCase();

package/dist/RichTextEditor/Extensions/getTiptapExtensions.d.ts

@@ -1,6 +1,7 @@
 import { Extension } from "@tiptap/core";
 import { HandleImageUpload } from "../Plugins";
-import { Extensions } from "../Enums";
+import type { CustomSlashCommand } from "./getSlashCommand";
+import { Extensions, SlashCommands } from "../Enums";
 export type ExtensionPreset = "minimal" | "basic" | "full";
 export type ExtensionType = (typeof Extensions)[keyof typeof Extensions];
 export declare const BASIC_EXTENSIONS: ExtensionType[];
@@ -14,7 +15,9 @@ export declare const resolveExtensions: ({ disabledExtensions, extensionPreset,
 interface GetTipTapExtensionsProps {
     disabledExtensions?: ExtensionType[];
     extensions?: ExtensionType[];
-    slashCommands?: any[];
+    slashCommands?: SlashCommands[];
+    customSlashCommands?: CustomSlashCommand[];
+    getCustomSlashCommands?: () => CustomSlashCommand[];
     handleImageUpload?: HandleImageUpload;
 }
 declare const getTipTapExtensions: (props: GetTipTapExtensionsProps) => Extension[];

package/dist/RichTextEditor/Extensions/getTiptapExtensions.js

@@ -118,7 +118,7 @@ export const resolveExtensions = ({ disabledExtensions = [], extensionPreset = "
     disabled.forEach((extension) => resolved.delete(extension));
     return Array.from(resolved);
 };
-const getTipTapExtensions = ({ disabledExtensions = [], extensions = [], slashCommands = [], handleImageUpload, }) => {
+const getTipTapExtensions = ({ disabledExtensions = [], extensions = [], slashCommands = [], customSlashCommands = [], getCustomSlashCommands, handleImageUpload, }) => {
     const disabled = new Set(disabledExtensions);
     const enabled = new Set(extensions);
     const isEnabled = (extension) => enabled.has(extension) && !disabled.has(extension);
@@ -297,6 +297,8 @@ const getTipTapExtensions = ({ disabledExtensions = [], extensions = [], slashCo
             name: Extensions.SlashCommand,
             extension: getSlashCommand({
                 commands: slashCommands,
+                customCommands: customSlashCommands,
+                getCustomCommands: getCustomSlashCommands,
                 handleImageUpload,
             }),
         },

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -1,15 +1,18 @@
 import { Editor } from "@tiptap/react";
 import { ExtensionPreset, ExtensionType } from "./Extensions/getTiptapExtensions";
+import type { CustomSlashCommand } from "./Extensions/getSlashCommand";
+import { SlashCommands } from "./Enums";
 import { HandleImageUrlUpload, HandleImageUpload } from "./Plugins/UploadImagesPlugin";
 import { BubbleMenuOptions } from "./Components/BubbleMenu";
 import { ToolbarOptions } from "./Toolbar/Toolbar";
-type RichTextEditorProps = {
+export type RichTextEditorProps = {
     className?: string;
     editorInstanceRef?: React.RefObject<Editor | null>;
     extensions?: ExtensionType[];
     disabledExtensions?: ExtensionType[];
     extensionPreset?: ExtensionPreset;
-    slashCommands?: any[];
+    slashCommands?: SlashCommands[];
+    customSlashCommands?: CustomSlashCommand[];
     defaultValue?: string;
     value?: string;
     readOnly?: boolean;
@@ -25,5 +28,5 @@ type RichTextEditorProps = {
     autoFocus?: boolean;
     style?: React.CSSProperties;
 };
+export type { CustomSlashCommand, SlashCommandActionProps, SlashCommandRange, } from "./Extensions/getSlashCommand";
 export declare const RichTextEditor: React.FC<RichTextEditorProps>;
-export {};