@commonsku/styles 1.17.22 → 1.17.24

package/dist/index.cjs

@@ -1452,58 +1452,86 @@ var Theme = function (_a) {
         children));
 };
 
+var iconSizes$9 = {
+    tiny: {
+        width: 32,
+        height: 32,
+        viewBox: "0 0 32 32",
+        fontSize: ".6em",
+        defaultStrokeWidth: 3,
+    },
+    small: {
+        width: 40,
+        height: 40,
+        viewBox: "0 0 40 40",
+        fontSize: ".6em",
+        defaultStrokeWidth: 3,
+    },
+    medium: {
+        width: 48,
+        height: 48,
+        viewBox: "0 0 48 48",
+        fontSize: ".8em",
+        defaultStrokeWidth: 5,
+    },
+    large: {
+        width: 72,
+        height: 72,
+        viewBox: "0 0 72 72",
+        fontSize: "1em",
+        defaultStrokeWidth: 5,
+    },
+    huge: {
+        width: 96,
+        height: 96,
+        viewBox: "0 0 96 96",
+        fontSize: "1em",
+        defaultStrokeWidth: 5,
+    },
+    default: {
+        height: 48,
+        width: 48,
+        viewBox: "0 0 48 48",
+        fontSize: ".8em",
+        defaultStrokeWidth: 5,
+    },
+};
 function CircleProgressIcon(_a) {
-    var sqSize = _a.sqSize, strokeWidth = _a.strokeWidth, _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, _c = _a.strokeColor, strokeColor = _c === void 0 ? teal.main : _c, _d = _a.textColor, textColor = _d === void 0 ? teal.main : _d, _e = _a.text, text = _e === void 0 ? '' : _e, _f = _a.textStyle, textStyle = _f === void 0 ? {} : _f, _g = _a.color; _g === void 0 ? teal.main : _g; var _h = _a.size, size = _h === void 0 ? "medium" : _h, _j = _a.altText, altText = _j === void 0 ? "Progress level" : _j, props = __rest(_a, ["sqSize", "strokeWidth", "percentage", "strokeColor", "textColor", "text", "textStyle", "color", "size", "altText"]);
-    var iconSizes = {
-        tiny: {
-            width: 32,
-            height: 32,
-            viewBox: "0 0 32 32",
-        },
-        small: {
-            width: 40,
-            height: 40,
-            viewBox: "0 0 40 40",
-        },
-        medium: {
-            width: 48,
-            height: 48,
-            viewBox: "0 0 48 48",
-        },
-        large: {
-            width: 72,
-            height: 72,
-            viewBox: "0 0 72 72",
-        },
-        huge: {
-            width: 96,
-            height: 96,
-            viewBox: "0 0 96 96",
-        },
-        default: {
-            height: 48,
-            width: 48,
-            viewBox: "0 0 48 48",
-        },
-    };
-    sqSize = iconSizes[size]["width"];
-    strokeWidth = size === "tiny" || size === "small" ? 3 : 5;
-    var radius = (sqSize - strokeWidth) / 2;
-    // const viewBox = `0 0 ${sqSize} ${sqSize}`;
+    var strokeWidth = _a.strokeWidth, _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, _c = _a.strokeColor, strokeColor = _c === void 0 ? teal.main : _c, _d = _a.textColor, textColor = _d === void 0 ? teal.main : _d, _e = _a.text, text = _e === void 0 ? "" : _e, _f = _a.textStyle, textStyle = _f === void 0 ? {} : _f, _g = _a.showCheckMarkOnComplete, showCheckMarkOnComplete = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? "medium" : _h, _j = _a.altText, altText = _j === void 0 ? "Progress level" : _j, props = __rest(_a, ["strokeWidth", "percentage", "strokeColor", "textColor", "text", "textStyle", "showCheckMarkOnComplete", "size", "altText"]);
+    var _k = iconSizes$9[size], width = _k.width, defaultStrokeWidth = _k.defaultStrokeWidth, fontSize = _k.fontSize; _k.viewBox;
+    strokeWidth = strokeWidth || defaultStrokeWidth;
+    var squareSize = width;
+    var radius = (squareSize - strokeWidth) / 2;
     var dashArray = radius * Math.PI * 2;
-    var dashOffset = dashArray - dashArray * percentage / 100;
-    return React__default.default.createElement(SVG$1, __assign({ size: size, iconSizes: iconSizes, "aria-labelledby": "CircleProgressIcon" }, props),
-        React__default.default.createElement("title", { id: "CircleProgressIcon" }, text !== '' ? "".concat(text, " stage") : percentage ? "".concat(percentage, "% completed") : altText),
-        React__default.default.createElement("circle", { className: "circle-background", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), style: { fill: 'none', stroke: colors$1.disabledButtonBorder, } }),
-        React__default.default.createElement("circle", { className: "circle-progress", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), transform: "rotate(-90 ".concat(sqSize / 2, " ").concat(sqSize / 2, ")"), style: {
+    var dashOffset = dashArray - (dashArray * percentage) / 100;
+    var isComplete = percentage === 100;
+    var renderInnerText = React.useCallback(function () { return (React__default.default.createElement("text", { className: "circle-text", x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", style: __assign({ fontSize: fontSize, fontWeight: "bold", fill: textColor }, textStyle) }, text || "".concat(percentage, "%"))); }, [fontSize, textColor, textStyle, text, percentage]);
+    var renderCheckMark = React.useCallback(function () {
+        var preferredViewBox = 40;
+        var scale = squareSize / preferredViewBox;
+        var scaledPath = [
+            { x: 12.0006 * scale, y: 21.599 * scale },
+            { x: 17.5629 * scale, y: 27.1617 * scale },
+            { x: 29.1621 * scale, y: 15.5625 * scale },
+        ]
+            .map(function (p) { return "".concat(p.x, ",").concat(p.y); })
+            .join(" L");
+        return (React__default.default.createElement("path", { d: "M".concat(scaledPath), stroke: strokeColor, strokeWidth: "".concat(strokeWidth, "px"), fill: "none" }));
+    }, [squareSize, strokeColor, strokeWidth]);
+    return (React__default.default.createElement(SVG$1, __assign({ size: size, iconSizes: iconSizes$9, "aria-labelledby": "CircleProgressIcon" }, props),
+        React__default.default.createElement("title", { id: "CircleProgressIcon" }, altText || (text ? "".concat(text, " stage") : "".concat(percentage, "% completed"))),
+        React__default.default.createElement("circle", { className: "circle-background", cx: squareSize / 2, cy: squareSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), style: { fill: "none", stroke: colors$1.disabledButtonBorder } }),
+        React__default.default.createElement("circle", { className: "circle-progress", cx: squareSize / 2, cy: squareSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), transform: "rotate(-90 ".concat(squareSize / 2, " ").concat(squareSize / 2, ")"), style: {
                 strokeDasharray: dashArray,
                 strokeDashoffset: dashOffset,
-                fill: 'none',
+                fill: "none",
                 stroke: strokeColor,
-                strokeLinecap: 'round',
-                strokeLinejoin: 'round',
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
             } }),
-        React__default.default.createElement("text", { className: "circle-text", x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", style: __assign({ fontSize: size === "small" || size === "tiny" ? ".6em" : size === "medium" ? ".8em" : "1em", fontWeight: 'bold', fill: textColor }, textStyle) }, text || "".concat(percentage, "%")));
+        showCheckMarkOnComplete && isComplete
+            ? renderCheckMark()
+            : renderInnerText()));
 }
 
 var SVG = styled__default.default.svg(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), SharedStyles);
@@ -7175,7 +7203,7 @@ function InputStepper(props) {
 var templateObject_1$c, templateObject_2$1, templateObject_3, templateObject_4;
 
 var VirtualTable = function (props) {
-    var columns = props.columns, data = props.data, itemSize = props.itemSize, _a = props.height, height = _a === void 0 ? 500 : _a, _b = props.minWidth, minWidth = _b === void 0 ? 140 : _b, _c = props.maxWidth, maxWidth = _c === void 0 ? 500 : _c, defaultSort = props.defaultSort, onClickRow = props.onClickRow, onScroll = props.onScroll, onUpdateData = props.onUpdateData, _d = props.useTableProps, useTableProps = _d === void 0 ? {} : _d, _e = props.tableHeaderProps, tableHeaderProps = _e === void 0 ? {} : _e, _f = props.tableFooterProps, tableFooterProps = _f === void 0 ? {} : _f, _g = props.hideFooter, hideFooter = _g === void 0 ? true : _g, _h = props.hideHeader, hideHeader = _h === void 0 ? false : _h, _j = props.className, className = _j === void 0 ? '' : _j, NoRowsFound = props.NoRowsFound, renderRowSubComponent = props.renderRowSubComponent, onSort = props.onSort; props.onResize; var rowGroupStyles = props.rowGroupStyles, rowStyles = props.rowStyles, _k = props.gutterSize, gutterSize = _k === void 0 ? 0 : _k, _l = props.customTableFooterProps, customTableFooterProps = _l === void 0 ? {} : _l, TableFooter = props.TableFooter;
+    var columns = props.columns, data = props.data, itemSize = props.itemSize, _a = props.height, height = _a === void 0 ? 500 : _a, _b = props.minWidth, minWidth = _b === void 0 ? 140 : _b, _c = props.maxWidth, maxWidth = _c === void 0 ? 500 : _c, defaultSort = props.defaultSort, onClickRow = props.onClickRow, onScroll = props.onScroll, onUpdateData = props.onUpdateData, _d = props.useTableProps, useTableProps = _d === void 0 ? {} : _d, _e = props.tableHeaderProps, tableHeaderProps = _e === void 0 ? {} : _e, _f = props.tableFooterProps, tableFooterProps = _f === void 0 ? {} : _f, _g = props.hideFooter, hideFooter = _g === void 0 ? true : _g, _h = props.hideHeader, hideHeader = _h === void 0 ? false : _h, _j = props.className, className = _j === void 0 ? '' : _j, NoRowsFound = props.NoRowsFound, renderRowSubComponent = props.renderRowSubComponent; props.onResize; var rowGroupStyles = props.rowGroupStyles, rowStyles = props.rowStyles, _k = props.gutterSize, gutterSize = _k === void 0 ? 0 : _k, _l = props.customTableFooterProps, customTableFooterProps = _l === void 0 ? {} : _l, TableFooter = props.TableFooter, onSortChange = props.onSortChange;
     var defaultColumn = React.useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: maxWidth,
@@ -7190,6 +7218,7 @@ var VirtualTable = function (props) {
     var footerRef = React.useRef(null);
     var rowsRef = React.useRef(null);
     var listRef = React.useRef(null);
+    var sortBy = tableData.state.sortBy;
     function resetList(index) {
         if (index === void 0) { index = 0; }
         listRef.current && listRef.current.resetAfterIndex(index);
@@ -7205,8 +7234,7 @@ var VirtualTable = function (props) {
         var _a;
         listRef.current && listRef.current.resetAfterIndex(0);
         (_a = column.toggleSortBy) === null || _a === void 0 ? void 0 : _a.call(column);
-        onSort && onSort({ column: column });
-    }, [onSort]);
+    }, []);
     function onListScroll(e) {
         if (headerRef.current && e && e.target) {
             var target = e.target;
@@ -7284,11 +7312,27 @@ var VirtualTable = function (props) {
             setScrolledToBottom(Math.round(rows.scrollTop) >= rows.scrollHeight - rows.offsetHeight);
         }
     }, [onScroll]);
-    return (React__default.default.createElement("div", __assign({}, getTableProps(), { className: "table ".concat(className || '') }),
-        React__default.default.createElement("div", __assign({}, tableHeaderProps, { className: "thead ".concat(tableHeaderProps.className || ''), style: __assign(__assign({}, (tableHeaderProps.style || {})), (hideHeader ? { display: 'none' } : {})) }), headerGroups.map(function (headerGroup) { return (React__default.default.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { ref: headerRef, style: { width: tableWidth, } }), headerGroup.headers.map(function (column) { return (React__default.default.createElement("div", __assign({}, getHeaderProps(column, false), { className: "th", onClick: function () { return handleSort(column); } }),
+    var renderTableHeader = React.useCallback(function () {
+        var sortIconDirection = function (column) { return column.isSorted
+            ? sortDirection(column)
+            : "updown"; };
+        return (React__default.default.createElement("div", __assign({}, tableHeaderProps, { className: "thead ".concat(tableHeaderProps.className || ""), style: __assign(__assign({}, (tableHeaderProps.style || {})), (hideHeader ? { display: "none" } : {})) }), headerGroups.map(function (headerGroup) { return (React__default.default.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { ref: headerRef, style: { width: tableWidth } }), headerGroup.headers.map(function (column) { return (React__default.default.createElement("div", __assign({}, getHeaderProps(column, false), { className: "th", onClick: function () { return handleSort(column); } }),
             column.render("Header"),
-            React__default.default.createElement("span", null, column.canSort &&
-                React__default.default.createElement(FilledChevronIcon, { direction: column.isSorted ? sortDirection(column) : 'updown', size: "medium", style: { verticalAlign: 'middle' } })))); }))); })),
+            React__default.default.createElement("span", null, column.canSort && (React__default.default.createElement(FilledChevronIcon, { direction: sortIconDirection(column), size: "medium", style: { verticalAlign: "middle" } }))))); }))); })));
+    }, [
+        getHeaderGroupProps,
+        getHeaderProps,
+        handleSort,
+        headerGroups,
+        hideHeader,
+        tableHeaderProps,
+        tableWidth,
+    ]);
+    React.useEffect(function () {
+        onSortChange && onSortChange({ sortBy: sortBy });
+    }, [sortBy]);
+    return (React__default.default.createElement("div", __assign({}, getTableProps(), { className: "table ".concat(className || '') }),
+        renderTableHeader(),
         React__default.default.createElement("div", __assign({ className: "tbody" }, getTableBodyProps()), rows.length === 0 && NoRowsFound ? React__default.default.createElement(NoRowsFound, null) :
             React__default.default.createElement("div", { className: "scroll-container" },
                 !scrolledToTop &&