@commonsku/styles 1.17.22 → 1.17.24

package/dist/index.d.ts

@@ -15,7 +15,7 @@ import { GroupBase, StylesConfig, SelectInstance } from 'react-select';
 export { components, createFilter, mergeStyles } from 'react-select';
 import * as react_select_dist_declarations_src_Select from 'react-select/dist/declarations/src/Select';
 import { ReactDatePickerProps } from 'react-datepicker';
-import { HeaderGroup, UseSortByColumnProps, UseTableRowProps, UseExpandedRowProps, UseGroupByRowProps, UseRowSelectRowProps, UseRowStateRowProps, Column as Column$1, SortingRule, Cell } from 'react-table';
+import { UseTableRowProps, UseExpandedRowProps, UseGroupByRowProps, UseRowSelectRowProps, UseRowStateRowProps, Column as Column$1, SortingRule, Cell, UseSortByState } from 'react-table';
 import { ListOnScrollProps } from 'react-window';
 import * as react_tooltip from 'react-tooltip';
 
@@ -2938,12 +2938,6 @@ type InputStepperStyledProps = Omit<NumberInputProps, 'onChange'> & {
 declare function InputStepperStyled(props: InputStepperStyledProps): React__default.JSX.Element;
 declare function InputStepper(props: InputStepperProps): React__default.JSX.Element;
 
-interface BaseSortByHeaderGroup<D extends object = {}> extends HeaderGroup<D>, UseSortByColumnProps<D> {
-    containerProps?: object;
-    style?: React__default.CSSProperties;
-    className?: string;
-}
-
 interface Row<D extends Record<string, unknown> = Record<string, unknown>> extends UseTableRowProps<D>, UseExpandedRowProps<D>, UseGroupByRowProps<D>, UseRowSelectRowProps<D>, UseRowStateRowProps<D> {
 }
 
@@ -2984,9 +2978,6 @@ type VirtualTableProps<RowType extends Record<string, unknown>, TableProps, Tabl
         [key: string]: any;
     }>) => React__default.ReactElement;
     renderRowSubComponent?: <P = unknown>(props: React__default.PropsWithChildren<P>) => React__default.ReactElement;
-    onSort?: (value: {
-        column: BaseSortByHeaderGroup<RowType>;
-    }) => void;
     onResize?: VoidFunction;
     rowGroupStyles?: (value: {
         row: Row<RowType>;
@@ -2997,6 +2988,7 @@ type VirtualTableProps<RowType extends Record<string, unknown>, TableProps, Tabl
         style: React__default.CSSProperties;
     }) => React__default.CSSProperties;
     gutterSize?: number;
+    onSortChange?: (sortState: UseSortByState<RowType>) => void;
 };
 declare const VirtualTable: <RowType extends Record<string, unknown>, TableProps, TableFooterProps>(props: VirtualTableProps<RowType, TableProps, TableFooterProps>) => React__default.JSX.Element;
 
@@ -3290,16 +3282,17 @@ type GearIconProps = SVGIconProps & {
 declare function GearIcon({ color, filled, size, altText, ...props }: GearIconProps): React__default.JSX.Element;
 
 type CircleProgressIconProps = SVGIconProps & {
-    sqSize?: number;
     strokeWidth?: number;
     percentage?: number;
     strokeColor?: string;
     textColor?: string;
     text?: string;
-    viewBox?: string;
     textStyle?: React__default.CSSProperties;
+    showCheckMarkOnComplete?: boolean;
+    size?: "tiny" | "small" | "medium" | "large" | "huge";
+    altText?: string;
 };
-declare function CircleProgressIcon({ sqSize, strokeWidth, percentage, strokeColor, textColor, text, textStyle, color, size, altText, ...props }: CircleProgressIconProps): React__default.JSX.Element;
+declare function CircleProgressIcon({ strokeWidth, percentage, strokeColor, textColor, text, textStyle, showCheckMarkOnComplete, size, altText, ...props }: CircleProgressIconProps): React__default.JSX.Element;
 
 declare function Loading({ height, width, animationDuration, barWidth, barRadius, colorful, bars, viewBox, rotate, startColor, endColor, ...props }: {
     height?: number;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import _, { map, pick, keys, isUndefined, get, uniqueId, assign, range as range$1, isEmpty, tail, toNumber, isString, filter, round, partial, debounce } from 'lodash';
 import styled, { css, createGlobalStyle, ThemeProvider, keyframes } from 'styled-components';
-import React, { useMemo, Fragment, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, useLayoutEffect, forwardRef, createContext, memo } from 'react';
+import React, { useCallback, useMemo, Fragment, useState, useEffect, useRef, useImperativeHandle, Component, useLayoutEffect, forwardRef, createContext, memo } from 'react';
 import { useDropzone } from 'react-dropzone';
 import BaseSelect from 'react-select';
 export { components, createFilter, mergeStyles } from 'react-select';
@@ -1421,58 +1421,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.createElement(SVG$1, __assign({ size: size, iconSizes: iconSizes, "aria-labelledby": "CircleProgressIcon" }, props),
-        React.createElement("title", { id: "CircleProgressIcon" }, text !== '' ? "".concat(text, " stage") : percentage ? "".concat(percentage, "% completed") : altText),
-        React.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.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 = useCallback(function () { return (React.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 = 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.createElement("path", { d: "M".concat(scaledPath), stroke: strokeColor, strokeWidth: "".concat(strokeWidth, "px"), fill: "none" }));
+    }, [squareSize, strokeColor, strokeWidth]);
+    return (React.createElement(SVG$1, __assign({ size: size, iconSizes: iconSizes$9, "aria-labelledby": "CircleProgressIcon" }, props),
+        React.createElement("title", { id: "CircleProgressIcon" }, altText || (text ? "".concat(text, " stage") : "".concat(percentage, "% completed"))),
+        React.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.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.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.svg(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), SharedStyles);
@@ -7144,7 +7172,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 = useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: maxWidth,
@@ -7159,6 +7187,7 @@ var VirtualTable = function (props) {
     var footerRef = useRef(null);
     var rowsRef = useRef(null);
     var listRef = useRef(null);
+    var sortBy = tableData.state.sortBy;
     function resetList(index) {
         if (index === void 0) { index = 0; }
         listRef.current && listRef.current.resetAfterIndex(index);
@@ -7174,8 +7203,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;
@@ -7253,11 +7281,27 @@ var VirtualTable = function (props) {
             setScrolledToBottom(Math.round(rows.scrollTop) >= rows.scrollHeight - rows.offsetHeight);
         }
     }, [onScroll]);
-    return (React.createElement("div", __assign({}, getTableProps(), { className: "table ".concat(className || '') }),
-        React.createElement("div", __assign({}, tableHeaderProps, { className: "thead ".concat(tableHeaderProps.className || ''), style: __assign(__assign({}, (tableHeaderProps.style || {})), (hideHeader ? { display: 'none' } : {})) }), headerGroups.map(function (headerGroup) { return (React.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { ref: headerRef, style: { width: tableWidth, } }), headerGroup.headers.map(function (column) { return (React.createElement("div", __assign({}, getHeaderProps(column, false), { className: "th", onClick: function () { return handleSort(column); } }),
+    var renderTableHeader = useCallback(function () {
+        var sortIconDirection = function (column) { return column.isSorted
+            ? sortDirection(column)
+            : "updown"; };
+        return (React.createElement("div", __assign({}, tableHeaderProps, { className: "thead ".concat(tableHeaderProps.className || ""), style: __assign(__assign({}, (tableHeaderProps.style || {})), (hideHeader ? { display: "none" } : {})) }), headerGroups.map(function (headerGroup) { return (React.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { ref: headerRef, style: { width: tableWidth } }), headerGroup.headers.map(function (column) { return (React.createElement("div", __assign({}, getHeaderProps(column, false), { className: "th", onClick: function () { return handleSort(column); } }),
             column.render("Header"),
-            React.createElement("span", null, column.canSort &&
-                React.createElement(FilledChevronIcon, { direction: column.isSorted ? sortDirection(column) : 'updown', size: "medium", style: { verticalAlign: 'middle' } })))); }))); })),
+            React.createElement("span", null, column.canSort && (React.createElement(FilledChevronIcon, { direction: sortIconDirection(column), size: "medium", style: { verticalAlign: "middle" } }))))); }))); })));
+    }, [
+        getHeaderGroupProps,
+        getHeaderProps,
+        handleSort,
+        headerGroups,
+        hideHeader,
+        tableHeaderProps,
+        tableWidth,
+    ]);
+    useEffect(function () {
+        onSortChange && onSortChange({ sortBy: sortBy });
+    }, [sortBy]);
+    return (React.createElement("div", __assign({}, getTableProps(), { className: "table ".concat(className || '') }),
+        renderTableHeader(),
         React.createElement("div", __assign({ className: "tbody" }, getTableBodyProps()), rows.length === 0 && NoRowsFound ? React.createElement(NoRowsFound, null) :
             React.createElement("div", { className: "scroll-container" },
                 !scrolledToTop &&