@commonsku/styles 1.17.7 → 1.17.9

package/dist/index.cjs

@@ -2810,6 +2810,45 @@ function SlideInIcon(_a) {
         React__default.default.createElement("path", { d: "M3 20.99L21 20.99C22.1 20.99 23 20.09 23 18.99L23 15L21 15L21 19.01L3 19.01L3 4.97999L21 4.97999L21 8.99999L23 8.99999L23 4.98999C23 3.88999 22.1 3.00999 21 3.00999L3 3.00999C1.9 3.00999 1 3.88999 1 4.98999L1 18.99C1 20.1 1.9 20.99 3 20.99ZM13 7.99999L9 12L13 16L13 13L23 13L23 11L13 11L13 7.99999ZM3 20.99L21 20.99C22.1 20.99 23 20.09 23 18.99L23 15L21 15L21 19.01L3 19.01L3 4.97999L21 4.97999L21 8.99999L23 8.99999L23 4.98999C23 3.88999 22.1 3.00999 21 3.00999L3 3.00999C1.9 3.00999 1 3.88999 1 4.98999L1 18.99C1 20.1 1.9 20.99 3 20.99ZM13 7.99999L9 12L13 16L13 13L23 13L23 11L13 11L13 7.99999Z", fill: color }));
 }
 
+function EmptyStateArrowIcon(_a) {
+    var _b = _a.direction, direction = _b === void 0 ? "Up" : _b; _a.altText; var props = __rest(_a, ["direction", "altText"]);
+    var d1, d2, x1, x2, y1, y2;
+    var arrowColor = teal['30'];
+    switch (direction) {
+        case "down":
+            d1 = "m9.239 20.009 2.704.784c.037.011.077.011.114 0l2.704-.784c.164-.048.304.114.207.24l-2.818 3.68a.196.196 0 0 1-.3 0l-2.818-3.68c-.097-.125.043-.288.207-.24Z";
+            d2 = "M5.15 0c5.411 2.2 6.084 16.033 6.084 21h1.57c0-5.275 0-18.5 6.246-21H5.15Z";
+            x1 = 12.636;
+            x2 = 12.636;
+            y1 = 19.98;
+            y2 = 0;
+            break;
+        case "up":
+            d1 = "m14.761 3.991-2.704-.784a.205.205 0 0 0-.114 0L9.24 3.99c-.164.048-.304-.115-.207-.24L11.85.07a.196.196 0 0 1 .3 0l2.818 3.68c.097.126-.043.288-.207.24Z";
+            d2 = "M18.85 24c-5.411-2.2-6.084-16.033-6.084-21h-1.57c0 5.276 0 18.5-6.246 21h13.9Z";
+            x1 = 11.364;
+            x2 = 11.364;
+            y1 = 4.02;
+            y2 = 24;
+            break;
+        case "up-right":
+            d1 = "m22.406 2.203-1.173-.394a.145.145 0 0 0-.092 0l-1.173.394c-.134.044-.247-.108-.169-.227l1.266-1.91a.146.146 0 0 1 .244 0l1.265 1.91c.079.119-.035.271-.168.227Z";
+            d2 = "M6.389 23.515C16.608 15.176 21.225 7.772 21.657 1.721l-.877-.064c.357 2.992-8.819 10.581-19.247 15.372l4.856 6.486Z";
+            x1 = 21.05;
+            x2 = 14.656;
+            y1 = 2.11;
+            y2 = 12.611;
+            break;
+    }
+    return React__default.default.createElement(SVG$1, __assign({ height: 500, width: 500, viewBox: "0 0 633 633", "aria-labelledby": "Arrow" }, props),
+        React__default.default.createElement("path", { fill: arrowColor, d: d1 }),
+        React__default.default.createElement("path", { fill: "url(#a)", d: d2 }),
+        React__default.default.createElement("defs", null,
+            React__default.default.createElement("linearGradient", { id: "a", x1: x1, x2: x2, y1: y1, y2: y2, gradientUnits: "userSpaceOnUse" },
+                React__default.default.createElement("stop", { stopColor: arrowColor }),
+                React__default.default.createElement("stop", { offset: 1, stopColor: arrowColor, stopOpacity: 0 }))));
+}
+
 function TagIcon(_a) {
     var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c; _a.altText; var props = __rest(_a, ["color", "size", "altText"]);
     return React__default.default.createElement(SVG$1, __assign({ size: size, "aria-labelledby": "TagIcon" }, props),
@@ -3653,7 +3692,7 @@ var LabeledIconInput = React__default.default.forwardRef(function (_a, ref) {
             }, style: __assign(__assign(__assign(__assign({}, activeStyles), errorStyles), disabledStyles), (props.style || {})), onMouseOver: function () { return setIsHovering(true); }, onMouseLeave: function () { return setIsHovering(false); } }),
             iconPosition !== 'right' ? React__default.default.createElement(InputIconLabel, { style: __assign({ marginBottom: 0 }, iconLabelStyles), isActive: isActive, isDisabled: disabled, isHover: isHovering }, NewIcon) : null,
             React__default.default.createElement(Input, { hasIcon: true, ref: ref, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, readOnly: readOnly, required: required, style: { marginBottom: 0, }, noMargin: noMargin, error: error, disabled: disabled, onFocus: onFocus, onChange: onChange, onBlur: onBlur }),
-            iconPosition === 'right' ? React__default.default.createElement(InputIconLabel, { style: { marginBottom: 0, padding: 6, }, isActive: isActive, isDisabled: disabled, isHover: isHovering, iconPosition: iconPosition }, NewIcon) : null)));
+            iconPosition === 'right' ? React__default.default.createElement(InputIconLabel, { style: __assign({ marginBottom: 0, padding: 6 }, iconLabelStyles), isActive: isActive, isDisabled: disabled, isHover: isHovering, iconPosition: iconPosition }, NewIcon) : null)));
 });
 var CheckboxLabel = styled__default.default.label(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  &&& {\n    display: inline-flex;\n    position: relative;\n    margin-bottom: 12px;\n    margin-right: 24px;\n    cursor: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-family: ", ";\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: normal;\n    line-height: ", ";\n    box-sizing: border-box;\n    opacity: ", ";\n    &:focus {\n      outline: 0;\n    }\n  }\n"], ["\n  &&& {\n    display: inline-flex;\n    position: relative;\n    margin-bottom: 12px;\n    margin-right: 24px;\n    cursor: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-family: ", ";\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: normal;\n    line-height: ", ";\n    box-sizing: border-box;\n    opacity: ", ";\n    &:focus {\n      outline: 0;\n    }\n  }\n"])), function (props) { return props.disabled ? 'default' : 'pointer'; }, fontStyles.label.fontSize, neutrals.darkest, fontStyles.label.fontFamily, fontStyles.label.lineHeight, function (props) { return props.disabled ? 0.7 : 1; });
 var RadioLabel = styled__default.default(CheckboxLabel)(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  &&& {\n    padding-left: 32px;\n  }\n"], ["\n  &&& {\n    padding-left: 32px;\n  }\n"])));
@@ -6800,50 +6839,51 @@ var VirtualTableStyles = styled__default.default.div(templateObject_1$a || (temp
 var templateObject_1$a;
 
 var SelectionTable = function (props) {
-    var columns = props.columns, onSelectRow = props.onSelectRow;
-    var _a = React.useState(props.data.map(function (row) { return (__assign({ selected: false }, row)); })), data = _a[0], setData = _a[1];
+    var columns = props.columns, data = props.data, selectedRows = props.selectedRows, onSelectionChange = props.onSelectionChange;
     var selectionState = React.useMemo(function () {
-        return !data.some(function (row) { return row.selected === false; })
-            ? 'all'
-            : data.some(function (row) { return row.selected === true; })
-                ? 'indeterminate'
-                : 'none';
-    }, [data]);
+        if (selectedRows == null)
+            return "none";
+        switch (selectedRows.length) {
+            case 0:
+                return 'none';
+            case data.length:
+                return 'all';
+            default:
+                return 'some';
+        }
+    }, [data.length, selectedRows]);
+    var handleSelectRows = React.useCallback(function (rows) {
+        if (onSelectionChange == null)
+            return;
+        if (selectedRows == null) {
+            onSelectionChange(rows);
+            return;
+        }
+        var newSelection = selectedRows.filter(function (row) { return !rows.includes(row); });
+        newSelection.push.apply(newSelection, rows.filter(function (row) { return !selectedRows.includes(row); }));
+        onSelectionChange(newSelection);
+    }, [selectedRows, onSelectionChange]);
     var handleSelectHeader = React.useCallback(function () {
+        if (onSelectionChange == null)
+            return;
         switch (selectionState) {
             case 'none':
-                setData(data.map(function (row) { return (__assign(__assign({}, row), { selected: true })); }));
+                onSelectionChange(__spreadArray([], data, true));
                 break;
             case 'all':
-            case 'indeterminate':
-                setData(data.map(function (row) { return (__assign(__assign({}, row), { selected: false })); }));
+            case 'some':
+                onSelectionChange([]);
                 break;
         }
-    }, [data, selectionState]);
-    var handleSelectRow = React.useCallback(function (rowIndex) {
-        setData(function (prev) { return prev.map(function (row, index) {
-            if (rowIndex !== index)
-                return row;
-            if (onSelectRow != null) {
-                onSelectRow(row, rowIndex);
-            }
-            return __assign(__assign({}, row), { selected: rowIndex === index
-                    ? !row.selected
-                    : row.selected });
-        }); });
-    }, [onSelectRow]);
-    var selectionHeader = React.useMemo(function () { return (React__default.default.createElement(LabeledCheckbox, { label: "", checked: selectionState === 'all', indeterminate: selectionState === 'indeterminate', onChange: handleSelectHeader })); }, [selectionState, handleSelectHeader]);
+    }, [selectionState, data, onSelectionChange]);
+    var selectionHeader = React.useMemo(function () { return (React__default.default.createElement(LabeledCheckbox, { label: "", checked: selectionState === 'all', indeterminate: selectionState === 'some', onChange: handleSelectHeader })); }, [selectionState, handleSelectHeader]);
     var selectionColumn = React.useMemo(function () { return ({
         Header: selectionHeader,
         accessor: 'selected',
-        Cell: function (cellObj) {
-            return (React__default.default.createElement(LabeledCheckbox, { label: "", checked: cellObj.row.original.selected, onChange: function () { return handleSelectRow(cellObj.row.index); } }));
-        },
-        sticky: 'left',
-        noDrag: true,
+        Cell: function (cell) { return (React__default.default.createElement(LabeledCheckbox, { label: "", checked: selectedRows != null && selectedRows.includes(cell.row.original), onChange: function () { return handleSelectRows([cell.row.original]); } })); },
         width: 40,
         disableSortBy: true,
-    }); }, [handleSelectRow, selectionHeader]);
+    }); }, [selectedRows, selectionHeader, handleSelectRows]);
     return (React__default.default.createElement(VirtualTable, __assign({}, props, { columns: __spreadArray([selectionColumn], columns, true), data: data, minWidth: 40 })));
 };
 
@@ -7972,6 +8012,7 @@ exports.DropzonedPreviews = DropzonedPreviews;
 exports.EPOIcon = EPOIcon;
 exports.EditIcon = EditIcon;
 exports.EllipsisIcon = EllipsisIcon;
+exports.EmptyStateArrow = EmptyStateArrowIcon;
 exports.EpsIcon = EpsIcon;
 exports.ErrorBoundary = ErrorBoundary;
 exports.EstimateCircleIcon = EstimateCircleIcon;