@longline/aqua-ui 1.0.339 → 1.0.340

package/controls/ListView/IListViewProps.d.ts

@@ -129,13 +129,15 @@ interface IListViewProps {
     /**
      * Fired when a row is clicked.
      * @param item Clicked item
+     * @param e Originating mouse event
      */
-    onClick?: (item: any) => void;
+    onClick?: (item: any, e: React.MouseEvent) => void;
     /**
      * Fired when a row is double-clicked.
      * @param item Clicked item
+     * @param e Originating mouse event
      */
-    onDoubleClick?: (item: any) => void;
+    onDoubleClick?: (item: any, e: React.MouseEvent) => void;
     /**
      * If this callback is provided, items can be checked or unchecked. Items must have
      * a key `checked` when they're checked. If `item` is true, then all items must be checked.
@@ -144,5 +146,10 @@ interface IListViewProps {
      * @param item Item to toggle.
      */
     onCheck?: (data: any[], item: any | boolean) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 export type { IListViewProps };

package/controls/ListView/ListView.js

@@ -34,6 +34,7 @@ import { Column } from './Column';
 import { Table } from './elements/Table';
 import { sortItems } from './elements/sortItems';
 import { Ghost } from './elements/Ghost';
+import { DEFAULT_ROW_HEIGHT, DEFAULT_OVERSCAN } from './defaults';
 function getChildrenOfTypeDeep(children, componentType) {
     var result = [];
     React.Children.forEach(children, function (child) {
@@ -60,16 +61,16 @@ var getColumns = function (children) {
     return getChildrenOfTypeDeep(children, ListView.Column).map(function (c) { return c.props; });
 };
 var ListViewBase = function (props) {
-    var _a, _b;
+    var _a, _b, _c;
     var children = props.children, otherProps = __rest(props, ["children"]);
-    var _c = React.useState(false), columnsMode = _c[0], setColumnsMode = _c[1];
+    var _d = React.useState(false), columnsMode = _d[0], setColumnsMode = _d[1];
     var originalColumns = getColumns(props.children);
-    var _d = React.useState(originalColumns), columns = _d[0], setColumns = _d[1];
+    var _e = React.useState(originalColumns), columns = _e[0], setColumns = _e[1];
     // Find default sort column:
     var sortColumn = (_a = columns.find(function (c) { return c.defaultSort; })) !== null && _a !== void 0 ? _a : columns[0];
-    var _e = React.useState(sortColumn.sort), sort = _e[0], setSort = _e[1];
-    var _f = React.useState((_b = sortColumn.reverse) !== null && _b !== void 0 ? _b : false), reverse = _f[0], setReverse = _f[1];
-    var _g = React.useState(null), data = _g[0], setData = _g[1];
+    var _f = React.useState((_b = sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.sort) !== null && _b !== void 0 ? _b : ''), sort = _f[0], setSort = _f[1];
+    var _g = React.useState((_c = sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.reverse) !== null && _c !== void 0 ? _c : false), reverse = _g[0], setReverse = _g[1];
+    var _h = React.useState(null), data = _h[0], setData = _h[1];
     React.useEffect(function () {
         // Don't sort if no data is available yet:
         if (!Array.isArray(props.data))
@@ -79,20 +80,20 @@ var ListViewBase = function (props) {
         if (!sortColumn)
             return;
         setData(sortItems(props.data, sort, reverse, sortColumn.sortValue));
-    }, [props.data, sort, reverse]);
+    }, [props.data, sort, reverse, columns]);
     // If children change, then update columns state.
     React.useEffect(function () {
         setColumns(getColumns(props.children));
     }, [props.children]);
     // Change sort:
     var handleSort = function (column) {
-        var _a;
+        var _a, _b;
         if (sort === column.sort) {
             setReverse(!reverse);
         }
         else {
-            setSort(column.sort);
-            setReverse((_a = column.reverse) !== null && _a !== void 0 ? _a : false);
+            setSort((_a = column.sort) !== null && _a !== void 0 ? _a : '');
+            setReverse((_b = column.reverse) !== null && _b !== void 0 ? _b : false);
         }
     };
     var handleCheck = function (data, item) {
@@ -120,7 +121,7 @@ var ListViewBase = function (props) {
     if (props.ghost) {
         return React.createElement(Ghost, __assign({}, otherProps, { columns: columns }));
     }
-    return (React.createElement(Table, __assign({ "data-testid": props['data-testid'] || "ListView" }, otherProps, { data: data, columns: columns, sort: sort, reverse: reverse, onSortClick: handleSort, columnsMode: columnsMode, onOpenColumns: handleColumns, onCheck: props.onCheck ? handleCheck : null, onChangeColumns: handleChangeColumns, onCloseColumns: function () { return setColumnsMode(false); }, onResetColumns: handleResetColumns })));
+    return (React.createElement(Table, __assign({ "data-testid": props['data-testid'] || "ListView" }, otherProps, { data: data, columns: columns, sort: sort, reverse: reverse, onSortClick: handleSort, columnsMode: columnsMode, onOpenColumns: handleColumns, onCheck: props.onCheck ? handleCheck : undefined, onChangeColumns: handleChangeColumns, onCloseColumns: function () { return setColumnsMode(false); }, onResetColumns: handleResetColumns })));
 };
 /**
  * A data table with sorting, column management, virtualization, and row selection.
@@ -181,7 +182,7 @@ var ListViewBase = function (props) {
  * | `children` | Render function: `(item) => ReactNode` |
  */
 var ListView = function (_a) {
-    var _b = _a.data, data = _b === void 0 ? null : _b, _c = _a.dark, dark = _c === void 0 ? false : _c, _d = _a.noheader, noheader = _d === void 0 ? false : _d, _e = _a.hover, hover = _e === void 0 ? false : _e, _f = _a.striped, striped = _f === void 0 ? false : _f, _g = _a.grid, grid = _g === void 0 ? false : _g, _h = _a.total, total = _h === void 0 ? false : _h, _j = _a.singular, singular = _j === void 0 ? "record" : _j, _k = _a.plural, plural = _k === void 0 ? "records" : _k, _l = _a.shadow, shadow = _l === void 0 ? false : _l, _m = _a.ghost, ghost = _m === void 0 ? false : _m, _o = _a.rowHeight, rowHeight = _o === void 0 ? 48 : _o, _p = _a.columnsEditable, columnsEditable = _p === void 0 ? false : _p, _q = _a.expanded, expanded = _q === void 0 ? false : _q, _r = _a.focusActive, focusActive = _r === void 0 ? false : _r, _s = _a.virtual, virtual = _s === void 0 ? false : _s, _t = _a.overscan, overscan = _t === void 0 ? 10 : _t, props = __rest(_a, ["data", "dark", "noheader", "hover", "striped", "grid", "total", "singular", "plural", "shadow", "ghost", "rowHeight", "columnsEditable", "expanded", "focusActive", "virtual", "overscan"]);
+    var _b = _a.data, data = _b === void 0 ? null : _b, _c = _a.dark, dark = _c === void 0 ? false : _c, _d = _a.noheader, noheader = _d === void 0 ? false : _d, _e = _a.hover, hover = _e === void 0 ? false : _e, _f = _a.striped, striped = _f === void 0 ? false : _f, _g = _a.grid, grid = _g === void 0 ? false : _g, _h = _a.total, total = _h === void 0 ? false : _h, _j = _a.singular, singular = _j === void 0 ? "record" : _j, _k = _a.plural, plural = _k === void 0 ? "records" : _k, _l = _a.shadow, shadow = _l === void 0 ? false : _l, _m = _a.ghost, ghost = _m === void 0 ? false : _m, _o = _a.rowHeight, rowHeight = _o === void 0 ? DEFAULT_ROW_HEIGHT : _o, _p = _a.columnsEditable, columnsEditable = _p === void 0 ? false : _p, _q = _a.expanded, expanded = _q === void 0 ? false : _q, _r = _a.focusActive, focusActive = _r === void 0 ? false : _r, _s = _a.virtual, virtual = _s === void 0 ? false : _s, _t = _a.overscan, overscan = _t === void 0 ? DEFAULT_OVERSCAN : _t, props = __rest(_a, ["data", "dark", "noheader", "hover", "striped", "grid", "total", "singular", "plural", "shadow", "ghost", "rowHeight", "columnsEditable", "expanded", "focusActive", "virtual", "overscan"]);
     return React.createElement(ListViewBase, __assign({ data: data, dark: dark, noheader: noheader, hover: hover, striped: striped, grid: grid, total: total, singular: singular, plural: plural, shadow: shadow, ghost: ghost, rowHeight: rowHeight, columnsEditable: columnsEditable, expanded: expanded, focusActive: focusActive, virtual: virtual, overscan: overscan }, props));
 };
 ListView.displayName = "ListView";

package/controls/ListView/defaults.d.ts

@@ -0,0 +1,3 @@
+declare const DEFAULT_ROW_HEIGHT = 48;
+declare const DEFAULT_OVERSCAN = 10;
+export { DEFAULT_ROW_HEIGHT, DEFAULT_OVERSCAN };

package/controls/ListView/defaults.js

@@ -0,0 +1,6 @@
+// Default values for ListView props that are consumed both by the ListView
+// wrapper and by its child elements (Body, Ghost), so each default lives in
+// exactly one place.
+var DEFAULT_ROW_HEIGHT = 48;
+var DEFAULT_OVERSCAN = 10;
+export { DEFAULT_ROW_HEIGHT, DEFAULT_OVERSCAN };

package/controls/ListView/elements/Body.d.ts

@@ -5,7 +5,7 @@ import { IColumnProps } from '../Column';
 interface IProps extends IListViewProps {
     columns: IColumnProps[];
     /** Scrolling container */
-    container: OverlayScrollbarsComponentRef;
+    container: OverlayScrollbarsComponentRef | null;
 }
 declare const Body: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLElement>>;
 export { Body };

package/controls/ListView/elements/Body.js

@@ -1,14 +1,22 @@
 import * as React from 'react';
+import { DEFAULT_ROW_HEIGHT, DEFAULT_OVERSCAN } from '../defaults';
 import { Selector } from '../../../inputs/Selector';
 var Body = React.forwardRef(function (props, ref) {
+    var _a, _b;
     // The scrolling container's height is necessary to determine how many
     // rows must be rendered.
-    var _a = React.useState(0), height = _a[0], setHeight = _a[1];
+    var _c = React.useState(0), height = _c[0], setHeight = _c[1];
     // Current container scrollTop. This is updated by polling it using 
     // animation frames.
     var scrollTop = React.useRef(0);
     // This state is only used to trigger renders
-    var _b = React.useState(0), setTick = _b[1];
+    var _d = React.useState(0), setTick = _d[1];
+    // Normalized props with defaults applied by the export wrapper.
+    var data = Array.isArray(props.data) ? props.data : [];
+    var rowHeight = (_a = props.rowHeight) !== null && _a !== void 0 ? _a : DEFAULT_ROW_HEIGHT;
+    var overscan = (_b = props.overscan) !== null && _b !== void 0 ? _b : DEFAULT_OVERSCAN;
+    var onClick = props.onClick;
+    var onDoubleClick = props.onDoubleClick;
     // Watch resize of scrolling container using ResizeObserver.
     React.useEffect(function () {
         if (!props.container)
@@ -19,7 +27,9 @@ var Body = React.forwardRef(function (props, ref) {
                 setHeight(entry.contentRect.height);
             }
         });
-        observer.observe(props.container.getElement());
+        var element = props.container.getElement();
+        if (element)
+            observer.observe(element);
         return function () {
             if (observer)
                 observer.disconnect();
@@ -50,10 +60,10 @@ var Body = React.forwardRef(function (props, ref) {
         };
     }, [props.container]);
     var getOffsets = function () {
-        var totalRows = props.data.length;
+        var totalRows = data.length;
         if (props.virtual) {
-            var startIndex = Math.max(0, Math.floor(scrollTop.current / props.rowHeight) - props.overscan);
-            var endIndex = Math.min(totalRows - 1, Math.floor((scrollTop.current + height) / props.rowHeight) + props.overscan);
+            var startIndex = Math.max(0, Math.floor(scrollTop.current / rowHeight) - overscan);
+            var endIndex = Math.min(totalRows - 1, Math.floor((scrollTop.current + height) / rowHeight) + overscan);
             return [startIndex, endIndex];
         }
         else {
@@ -67,7 +77,7 @@ var Body = React.forwardRef(function (props, ref) {
         var rows = [];
         var _a = getOffsets(), startIndex = _a[0], endIndex = _a[1];
         var _loop_1 = function (i) {
-            var item = props.data[i];
+            var item = data[i];
             rows.push(React.createElement("div", { key: i, 
                 // Set classnames for row and cells; styles are in Table.
                 className: [
@@ -75,13 +85,14 @@ var Body = React.forwardRef(function (props, ref) {
                     props.active == item ? 'active' : null,
                     props.expanded && props.active == item ? 'expanded' : null,
                     (props.onClick || props.onDoubleClick) ? 'clickable' : null
-                ].join(' '), onClick: props.onClick ? function () { return props.onClick(item); } : null, onDoubleClick: props.onDoubleClick ? function () { return props.onDoubleClick(item); } : null },
+                ].join(' '), onClick: onClick ? function (e) { return onClick(item, e); } : undefined, onDoubleClick: onDoubleClick ? function (e) { return onDoubleClick(item, e); } : undefined },
                 props.onCheck && React.createElement("div", { className: "cell check" },
                     React.createElement(Selector, { checked: !!item.checked, onChange: function () {
-                            props.onCheck(props.data, props.data[i]);
+                            var _a;
+                            (_a = props.onCheck) === null || _a === void 0 ? void 0 : _a.call(props, data, data[i]);
                         } })),
                 props.columns.map(function (col, index) {
-                    return React.createElement("div", { className: "cell ".concat(col.error || item.error ? 'error' : ''), key: index, style: { justifyContent: col.align == 'right' ? 'end' : 'start', paddingLeft: col.paddingLeft ? "".concat(col.paddingLeft, "px") : null, paddingRight: col.paddingRight ? "".concat(col.paddingRight, "px") : null } },
+                    return React.createElement("div", { className: "cell ".concat(col.error || item.error ? 'error' : ''), key: index, style: { justifyContent: col.align == 'right' ? 'end' : 'start', paddingLeft: col.paddingLeft ? "".concat(col.paddingLeft, "px") : undefined, paddingRight: col.paddingRight ? "".concat(col.paddingRight, "px") : undefined } },
                         React.createElement("span", { className: "content" },
                             " ",
                             col.children(item)),
@@ -98,12 +109,12 @@ var Body = React.forwardRef(function (props, ref) {
             _loop_1(i);
         }
         // Here we add an offset above the rows what were actually rendered:
-        var offset = startIndex * props.rowHeight;
+        var offset = startIndex * rowHeight;
         return (React.createElement("div", { style: { position: "absolute", width: "100%", top: "".concat(offset, "px") } }, rows));
     };
     return (
     // Wrap the body in an element that is as tall as the number of items
     // in the list.
-    React.createElement("div", { style: { position: 'relative', width: '100%', height: (Array.isArray(props.data) ? props.data.length : 0) * props.rowHeight } }, Array.isArray(props.data) && getRows()));
+    React.createElement("div", { style: { position: 'relative', width: '100%', height: data.length * rowHeight } }, Array.isArray(props.data) && getRows()));
 });
 export { Body };

package/controls/ListView/elements/Ghost.js

@@ -15,8 +15,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import styled, { css, keyframes } from 'styled-components';
+import { DEFAULT_ROW_HEIGHT } from '../defaults';
 var GhostBase = function (props) {
-    return React.createElement("div", { className: props.className },
+    return React.createElement("div", { className: props.className, style: props.style },
         React.createElement("div", { className: "mask1" }),
         React.createElement("div", { className: "mask2" }),
         !props.noheader && props.onCheck && React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": false }),
@@ -46,7 +47,7 @@ var GhostStyled = styled(GhostBase).attrs(function (p) {
         // Postfix an columns management column?
         .concat(p.columnsEditable ? ['48px'] : [])
         .join(" ");
-}, function (p) { return p.rowHeight; }, function (p) { return p.fg; }, function (p) { return p.bg; }, function (p) { return p.fg; }, function (p) { return p.rowHeight - 1; }, function (p) { return p.rowHeight - 1; }, function (p) { return p.rowHeight; }, function (p) { return p.rowHeight * 2; }, Pulse, function (p) { return p.fg; }, function (p) { return p.bg; }, function (p) { return p.fg; }, function (p) { return p.rowHeight * 2 - 1; }, function (p) { return p.rowHeight * 2; }, Pulse2);
+}, function (p) { var _a; return ((_a = p.rowHeight) !== null && _a !== void 0 ? _a : DEFAULT_ROW_HEIGHT); }, function (p) { return p.fg; }, function (p) { return p.bg; }, function (p) { return p.fg; }, function (p) { var _a; return ((_a = p.rowHeight) !== null && _a !== void 0 ? _a : DEFAULT_ROW_HEIGHT) - 1; }, function (p) { var _a; return ((_a = p.rowHeight) !== null && _a !== void 0 ? _a : DEFAULT_ROW_HEIGHT) - 1; }, function (p) { var _a; return ((_a = p.rowHeight) !== null && _a !== void 0 ? _a : DEFAULT_ROW_HEIGHT); }, function (p) { var _a; return ((_a = p.rowHeight) !== null && _a !== void 0 ? _a : DEFAULT_ROW_HEIGHT) * 2; }, Pulse, function (p) { return p.fg; }, function (p) { return p.bg; }, function (p) { return p.fg; }, function (p) { var _a; return ((_a = p.rowHeight) !== null && _a !== void 0 ? _a : DEFAULT_ROW_HEIGHT) * 2 - 1; }, function (p) { var _a; return ((_a = p.rowHeight) !== null && _a !== void 0 ? _a : DEFAULT_ROW_HEIGHT) * 2; }, Pulse2);
 var Ghost = function (props) { return React.createElement(GhostStyled, __assign({}, props)); };
 Ghost.displayName = "Ghost";
 export { Ghost };

package/controls/ListView/elements/Header.js

@@ -4,6 +4,7 @@ import { Selector } from '../../../inputs/Selector';
 import { SVG } from '../../../svg';
 import { HeaderButton } from './HeaderButton';
 var Header = function (props) {
+    var _a;
     // Are ALL items checked?
     var allChecked = Array.isArray(props.data) ? props.data.map(function (x) { return !!x.checked; }).reduce(function (acc, cur) { return acc && !!cur; }, true) == true : false;
     // Are NO items checked?
@@ -12,10 +13,10 @@ var Header = function (props) {
     return (React.createElement("div", { className: "row header" },
         props.onCheck &&
             React.createElement("div", { className: "cell check" },
-                React.createElement(Selector, { indeterminate: indeterminate, checked: allChecked, onChange: function () { return props.onCheck(props.data, allChecked ? false : true); } })),
+                React.createElement(Selector, { indeterminate: indeterminate, checked: allChecked, onChange: function () { var _a, _b; return (_a = props.onCheck) === null || _a === void 0 ? void 0 : _a.call(props, (_b = props.data) !== null && _b !== void 0 ? _b : [], allChecked ? false : true); } })),
         props.columns.map(function (col, index) { return React.createElement(HeaderCell, { key: index, column: col, sort: props.sort, reverse: props.reverse, dark: props.dark, onSortClick: props.onSortClick }); }),
         props.columnsEditable &&
             React.createElement("div", { className: "cell columns" },
-                React.createElement(HeaderButton, { dark: props.dark, url: SVG.Icons.Columns, onClick: props.onOpenColumns }))));
+                React.createElement(HeaderButton, { dark: (_a = props.dark) !== null && _a !== void 0 ? _a : false, url: SVG.Icons.Columns, onClick: props.onOpenColumns }))));
 };
 export { Header };

package/controls/ListView/elements/HeaderCell.js

@@ -24,9 +24,9 @@ var HeaderCellBase = function (props) {
         className: "".concat(props.className, " cell ").concat(sorted ? 'sort' : ''), style: {
             // Sortable column has pointer cursor:
             cursor: props.column.sort ? 'pointer' : 'auto',
-            paddingLeft: props.column.paddingLeft ? "".concat(props.column.paddingLeft, "px") : null,
-            paddingRight: props.column.paddingRight ? "".concat(props.column.paddingRight, "px") : null,
-        }, onClick: (props.column.sort && props.onSortClick) ? function () { return props.onSortClick(props.column); } : null },
+            paddingLeft: props.column.paddingLeft ? "".concat(props.column.paddingLeft, "px") : undefined,
+            paddingRight: props.column.paddingRight ? "".concat(props.column.paddingRight, "px") : undefined,
+        }, onClick: (props.column.sort && props.onSortClick) ? function () { return props.onSortClick(props.column); } : undefined },
         React.createElement(Label, null, (_a = props.column.label) !== null && _a !== void 0 ? _a : props.column.name),
         props.column.sort && React.createElement(SortButton, { dark: props.dark, active: sorted, 
             // If currently sorted, show sort direction.

package/controls/ListView/elements/Table.js

@@ -37,18 +37,19 @@ import { ColumnsManager } from '../ColumnsManager/ColumnsManager';
 import { Anchor } from '../../../containers/Anchor';
 var HEADER_HEIGHT = 48;
 var TableBase = function (_a) {
+    var _b, _c;
     var className = _a.className, props = __rest(_a, ["className"]);
     var wrapperRef = React.useRef(null);
     var innerRef = React.useRef(null);
     var auxRef = React.useRef(null);
     var activeColumns = props.columns.filter(function (c) { return c.active; });
-    var _b = React.useState(null), activeRef = _b[0], setActiveRef = _b[1];
-    var _c = React.useState(0), time = _c[0], setTime = _c[1];
-    var _d = React.useState(false), showingNoData = _d[0], setShowingNoData = _d[1];
+    var _d = React.useState(null), activeRef = _d[0], setActiveRef = _d[1];
+    var _e = React.useState(0), time = _e[0], setTime = _e[1];
+    var _f = React.useState(false), showingNoData = _f[0], setShowingNoData = _f[1];
     // Popper latches on to activeRef. In a virtual list, activeRef can be null,
     // when the active item is out of view. In the case, popper latches on
     // to the list itself (wrapperRef.current).
-    var _e = usePopper(activeRef !== null && activeRef !== void 0 ? activeRef : wrapperRef.current, auxRef.current, {
+    var _g = usePopper(activeRef !== null && activeRef !== void 0 ? activeRef : wrapperRef.current, auxRef.current, {
         placement: 'right-start',
         modifiers: [
             {
@@ -62,13 +63,13 @@ var TableBase = function (_a) {
             }, {
                 name: 'preventOverflow',
                 options: {
-                    boundary: innerRef.current ? innerRef.current.getElement() : null,
+                    boundary: (_c = (_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.getElement()) !== null && _c !== void 0 ? _c : undefined,
                     tether: false,
                     padding: { top: 0, bottom: 16 }
                 }
             }
         ]
-    }), styles = _e.styles, attributes = _e.attributes, update = _e.update;
+    }), styles = _g.styles, attributes = _g.attributes, update = _g.update;
     React.useEffect(function () {
         if (update)
             update();
@@ -79,19 +80,24 @@ var TableBase = function (_a) {
     // may suddenly run off the screen.
     // When a resize is detected, we reposition the aux.
     React.useEffect(function () {
+        var _a;
         var resizeObserver = new ResizeObserver(function () {
             // Update component state so that we can update popper.
             setTime(Math.random());
         });
-        resizeObserver.observe(auxRef.current);
-        resizeObserver.observe(innerRef.current.getElement());
+        if (auxRef.current)
+            resizeObserver.observe(auxRef.current);
+        var innerElement = (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.getElement();
+        if (innerElement)
+            resizeObserver.observe(innerElement);
         return function () { return resizeObserver.disconnect(); };
     }, []);
     // If desired, scroll newly selected item into view.
     React.useEffect(function () {
+        var _a, _b, _c, _d;
         if (activeRef && props.focusActive) {
             if (props.expanded) {
-                activeRef.parentElement.parentElement.nextSibling.childNodes[0].scrollIntoView({ behavior: 'instant' });
+                (_d = (_c = (_b = (_a = activeRef.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.nextSibling) === null || _c === void 0 ? void 0 : _c.childNodes[0]) === null || _d === void 0 ? void 0 : _d.scrollIntoView({ behavior: 'instant' });
             }
             else {
                 activeRef.scrollIntoView({ behavior: 'instant' });
@@ -118,7 +124,7 @@ var TableBase = function (_a) {
                 React.createElement(ColumnsManager, { columns: props.columns, onChange: props.onChangeColumns, onClose: props.onCloseColumns, onReset: props.onResetColumns })),
         showingNoData && React.createElement(NoData, { dark: props.dark, component: props.noData }),
         React.createElement(AuxHolder, __assign({ ref: auxRef, style: __assign({ visibility: (props.active && props.aux && Array.isArray(props.data) && props.data.includes(props.active)) ? 'visible' : 'hidden' }, styles.popper) }, attributes.popper), (props.active && props.aux && Array.isArray(props.data) && props.data.includes(props.active)) && React.cloneElement(props.aux, { value: props.active })),
-        React.createElement("div", { className: className, ref: wrapperRef },
+        React.createElement("div", { className: className, ref: wrapperRef, style: props.style },
             props.noheader != true && React.createElement(Header, __assign({}, props, { columns: activeColumns, onOpenColumns: props.onOpenColumns })),
             React.createElement(OverlayScrollbarsComponent, { ref: innerRef, defer: true, options: {
                     scrollbars: { theme: 'os-theme-light', autoHide: 'leave' }

package/controls/Mouse/Mouse.d.ts

@@ -30,6 +30,11 @@ interface IMouseProps extends ITestable {
      * If set, the `Mouse` is rendered at the specified `size` (in pixels).
      */
     size?: number;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * An SVG mouse icon with interactive button highlighting.
@@ -64,9 +69,6 @@ interface IMouseProps extends ITestable {
  * | `accent` | Wheel highlight color (default: theme primary) |
  * | `size` | Height in pixels (max 100px) |
  */
-declare const Mouse: {
-    ({ left, right, wheel, ...props }: IMouseProps): React.JSX.Element;
-    displayName: string;
-};
+declare const Mouse: React.MemoExoticComponent<({ left, right, wheel, ...props }: IMouseProps) => React.JSX.Element>;
 export { Mouse };
 export type { IMouseProps };

package/controls/Mouse/Mouse.js

@@ -27,14 +27,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var MouseBase = function (props) {
-    return (React.createElement("svg", { "data-testid": props['data-testid'] || "Mouse", className: props.className, viewBox: "3 0 22 29", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" // Hide from assistive tech (for non-interactive icons)
+    return (React.createElement("svg", { "data-testid": props['data-testid'] || "Mouse", className: props.className, style: props.style, viewBox: "3 0 22 29", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" // Hide from assistive tech (for non-interactive icons)
         , focusable: "false" },
-        React.createElement("path", { d: "M14 1.75623C8.69307 1.75623 4.375 6.07429 4.375 11.3812V18.3812C4.375 23.6882 8.69307 28.0062 14 28.0062C19.3069 28.0062 23.625 23.6882 23.625 18.3812V11.3812C23.625 6.07429 19.3069 1.75623 14 1.75623ZM21.875 11.3812V12.2562H16.625V10.5062C16.625 9.36653 15.8911 8.40403 14.875 8.04199V3.55756C18.806 3.99506 21.875 7.33546 21.875 11.3812ZM14 9.63123C14.4834 9.63123 14.875 10.0239 14.875 10.5062V13.1312C14.875 13.6136 14.4834 14.0062 14 14.0062C13.5166 14.0062 13.125 13.6136 13.125 13.1312V10.5062C13.125 10.0239 13.5166 9.63123 14 9.63123ZM6.125 11.3812C6.125 7.33546 9.19403 3.99389 13.125 3.55779V8.04223C12.1089 8.40427 11.375 9.36677 11.375 10.5065V12.2565H6.125V11.3812ZM14 26.2562C9.65767 26.2562 6.125 22.7236 6.125 18.3812V14.0062H11.5358C11.8978 15.0223 12.8603 15.7562 14 15.7562C15.1397 15.7562 16.1022 15.0223 16.4642 14.0062H21.875V18.3812C21.875 22.7236 18.3423 26.2562 14 26.2562Z", fill: props.color }),
+        React.createElement("path", { d: "M14 1.75623C8.69307 1.75623 4.375 6.07429 4.375 11.3812V18.3812C4.375 23.6882 8.69307 28.0062 14 28.0062C19.3069 28.0062 23.625 23.6882 23.625 18.3812V11.3812C23.625 6.07429 19.3069 1.75623 14 1.75623ZM21.875 11.3812V12.2562H16.625V10.5062C16.625 9.36653 15.8911 8.40403 14.875 8.04199V3.55756C18.806 3.99506 21.875 7.33546 21.875 11.3812ZM14 9.63123C14.4834 9.63123 14.875 10.0239 14.875 10.5062V13.1312C14.875 13.6136 14.4834 14.0062 14 14.0062C13.5166 14.0062 13.125 13.6136 13.125 13.1312V10.5062C13.125 10.0239 13.5166 9.63123 14 9.63123ZM6.125 11.3812C6.125 7.33546 9.19403 3.99389 13.125 3.55779V8.04223C12.1089 8.40427 11.375 9.36677 11.375 10.5065V12.2565H6.125V11.3812ZM14 26.2562C9.65767 26.2562 6.125 22.7236 6.125 18.3812V14.0062H11.5358C11.8978 15.0223 12.8603 15.7562 14 15.7562C15.1397 15.7562 16.1022 15.0223 16.4642 14.0062H21.875V18.3812C21.875 22.7236 18.3423 26.2562 14 26.2562Z" }),
         props.left && React.createElement("path", { className: "left", d: "M13.125 3.55798C9.19403 3.99408 6.125 7.33565 6.125 11.3814V12.2567H11.375V10.5067C11.375 9.36696 12.1089 8.40446 13.125 8.04242V3.55798Z" }),
         props.right && React.createElement("path", { className: "right", d: "M21.875 12.2562V11.3812C21.875 7.33539 18.806 3.995 14.875 3.5575V8.04193C15.8911 8.40397 16.625 9.36647 16.625 10.5062V12.2562H21.875Z" }),
         props.wheel && React.createElement("path", { className: "wheel", d: "M15.875 10.5062C15.875 9.47241 15.0365 8.63123 14 8.63123C12.9635 8.63123 12.125 9.47241 12.125 10.5062V13.1312C12.125 14.165 12.9635 15.0062 14 15.0062C15.0365 15.0062 15.875 14.165 15.875 13.1312V10.5062Z" })));
 };
-var MouseStyled = styled(MouseBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  max-height: 100px;\n  fill: ", ";\n  .left  { fill: ", "; }\n  .right { fill: ", "; }\n  .wheel { fill: ", "; }\n"], ["\n  ", "\n  max-height: 100px;\n  fill: ", ";\n  .left  { fill: ", "; }\n  .right { fill: ", "; }\n  .wheel { fill: ", "; }\n"
+var MouseStyled = styled(MouseBase).attrs(function (p) {
+    var _a;
+    return ({
+        $color: (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]
+    });
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  max-height: 100px;\n  fill: ", ";\n  .left  { fill: ", "; }\n  .right { fill: ", "; }\n  .wheel { fill: ", "; }\n"], ["\n  ", "\n  max-height: 100px;\n  fill: ", ";\n  .left  { fill: ", "; }\n  .right { fill: ", "; }\n  .wheel { fill: ", "; }\n"
     /**
      * An SVG mouse icon with interactive button highlighting.
      *
@@ -68,7 +73,9 @@ var MouseStyled = styled(MouseBase)(templateObject_2 || (templateObject_2 = __ma
      * | `accent` | Wheel highlight color (default: theme primary) |
      * | `size` | Height in pixels (max 100px) |
      */
-])), function (p) { return p.size && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", "px;\n  "], ["\n    height: ", "px;\n  "])), p.size); }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.accent) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
+    // Component is pure and based solely on props, so it is wrapped in React.memo
+    // to avoid unnecessary re-renders.
+])), function (p) { return p.size && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", "px;\n  "], ["\n    height: ", "px;\n  "])), p.size); }, function (p) { return p.$color; }, function (p) { return p.$color; }, function (p) { return p.$color; }, function (p) { var _a; return (_a = p.accent) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
 /**
  * An SVG mouse icon with interactive button highlighting.
  *
@@ -102,12 +109,12 @@ var MouseStyled = styled(MouseBase)(templateObject_2 || (templateObject_2 = __ma
  * | `accent` | Wheel highlight color (default: theme primary) |
  * | `size` | Height in pixels (max 100px) |
  */
-var Mouse = function (_a) {
+// Component is pure and based solely on props, so it is wrapped in React.memo
+// to avoid unnecessary re-renders.
+var Mouse = React.memo(function (_a) {
     var _b = _a.left, left = _b === void 0 ? false : _b, _c = _a.right, right = _c === void 0 ? false : _c, _d = _a.wheel, wheel = _d === void 0 ? false : _d, props = __rest(_a, ["left", "right", "wheel"]);
-    // Component is pure and based solely on props. Wrapping it with React.memo 
-    // helps avoid unnecessary re-renders:
     return React.createElement(MouseStyled, __assign({ left: left, right: right, wheel: wheel }, props));
-};
+});
 Mouse.displayName = "Mouse";
 export { Mouse };
 var templateObject_1, templateObject_2;

package/controls/PrimaryButton/PrimaryButton.d.ts

@@ -40,10 +40,16 @@ interface IPrimaryButtonProps extends ITestable {
      */
     icon?: string | IIconProps;
     /**
-     * Fired when the button is clicked. The React MouseEvent is passed in,
-     * in case the calling code wants to stop event propagation.
+     * Fired when the button is clicked. The React MouseEvent is passed in, in case
+     * the calling code wants to inspect it or stop propagation. Handlers that
+     * don't need the event can omit the parameter.
      */
-    onClick: (e?: React.MouseEvent) => void;
+    onClick: (e: React.MouseEvent) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A prominent call-to-action button for primary actions.

package/controls/PrimaryButton/PrimaryButton.js

@@ -40,21 +40,21 @@ var PrimaryButtonBase = function (props) {
         // An IIconProps was provided. Use it as the props for the icon.
         return React.createElement(Icon, __assign({ color: theme.colors.neutral[100] }, props.icon));
     };
-    return (React.createElement("button", { "data-testid": props['data-testid'] || "PrimaryButton", className: props.className, type: "button", onClick: props.onClick, title: props.title, "aria-disabled": props.disabled, disabled: props.disabled },
+    return (React.createElement("button", { "data-testid": props['data-testid'] || "PrimaryButton", className: props.className, style: props.style, type: "button", onClick: props.onClick, title: props.title, "aria-disabled": props.disabled, disabled: props.disabled },
         icon(),
         props.children));
 };
 var PrimaryButtonStyled = styled(PrimaryButtonBase).attrs(function (p) {
     return {
-        backgroundColor: p.disabled ? p.theme.colors.neutral[80]
+        $backgroundColor: p.disabled ? p.theme.colors.neutral[80]
             : p.positive ? p.theme.colors.positive
                 : p.negative ? p.theme.colors.negative
                     : p.color ? p.color
                         : p.theme.colors.primary[1],
-        outlineColor: (p.positive || p.negative) ? p.theme.colors.primary[1]
+        $outlineColor: (p.positive || p.negative) ? p.theme.colors.primary[1]
             : p.theme.colors.accent
     };
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n  // Size:\n  height: 46px; // was 56\n  padding-left: 12px; // was 16\n  padding-right: 12px; // was 16\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 6px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"], [" \n  // Size:\n  height: 46px; // was 56\n  padding-left: 12px; // was 16\n  padding-right: 12px; // was 16\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 6px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Size:\n  height: 46px; // was 56\n  padding-left: 12px; // was 16\n  padding-right: 12px; // was 16\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition:\n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 6px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"], ["\n  // Size:\n  height: 46px; // was 56\n  padding-left: 12px; // was 16\n  padding-right: 12px; // was 16\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition:\n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 6px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"
     /**
      * A prominent call-to-action button for primary actions.
      *
@@ -94,7 +94,7 @@ var PrimaryButtonStyled = styled(PrimaryButtonBase).attrs(function (p) {
      * | `disabled` | Prevents interaction |
      * | `title` | Browser tooltip on hover |
      */
-])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.backgroundColor; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.strong; }, function (p) { return p.theme.shadows.medium; }, function (p) { return darken(0.025, p.backgroundColor); }, function (p) { return p.theme.shadows.large; }, function (p) { return p.backgroundColor; }, function (p) { return p.outlineColor; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3], p.theme.colors.primary[3]); });
+])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.$backgroundColor; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.strong; }, function (p) { return p.theme.shadows.medium; }, function (p) { var _a; return darken(0.025, (_a = p.$backgroundColor) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]); }, function (p) { return p.theme.shadows.large; }, function (p) { return p.$backgroundColor; }, function (p) { return p.$outlineColor; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3], p.theme.colors.primary[3]); });
 /**
  * A prominent call-to-action button for primary actions.
  *

package/controls/Progress/Progress.d.ts

@@ -35,6 +35,15 @@ interface IProgressProps extends ITestable {
      * If set, applies a custom width (a CSS string), e.g. `300px` or `50%`.
      */
     width?: string;
+    /**
+     * Accessible name for the progress bar, announced by screen readers.
+     */
+    ariaLabel?: string;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A horizontal progress bar showing completion percentage.

package/controls/Progress/Progress.js

@@ -27,17 +27,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 /**
- * Input value may be less than 0 or more than 100.
- * Clamp it.
+ * Input value may be less than 0 or more than 100 (or non-finite).
+ * Clamp it into 0..100, rounding, and treat non-finite input as 0.
  */
 var getClampedValue = function (value) {
-    return Math.round(Math.min(100, Math.max(0, value)));
+    return Number.isFinite(value) ? Math.round(Math.min(100, Math.max(0, value))) : 0;
 };
+// Default prop values, referenced both by the ProgressStyled fallback and the
+// Progress wrapper below.
+var DEFAULT_THICKNESS = 5;
 var ProgressBase = function (props) {
-    return React.createElement("div", { "data-testid": props['data-testid'] || "Progress", className: props.className, role: "progressbar", "aria-valuenow": getClampedValue(props.value), "aria-valuemin": 0, "aria-valuemax": 100 },
+    var value = getClampedValue(props.value);
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Progress", className: props.className, style: props.style, role: "progressbar", "aria-label": props.ariaLabel, "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100 },
         React.createElement(FillOuter, null,
-            React.createElement(FillInner, { style: { transform: "scaleX(".concat(getClampedValue(props.value) / 100, ")") } })),
-        props.numbered && React.createElement(Value, null, "".concat(getClampedValue(props.value), "%")));
+            React.createElement(FillInner, { style: { transform: "scaleX(".concat(value / 100, ")") } })),
+        props.numbered && React.createElement(Value, null, "".concat(value, "%"))));
 };
 // We use inner DIVs to the display the inner fill and value. Previously these
 // were done using :before/after pseudo-elements, which resulted in fewer
@@ -84,7 +88,7 @@ var ProgressStyled = styled(ProgressBase)(templateObject_6 || (templateObject_6
      *
      * Includes `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`.
      */
-])), function (p) { return p.thickness; }, function (p) { return p.width && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), p.width); }, function (p) { return p.padded && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["margin: 10px;"], ["margin: 10px;"]))); }, function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.thickness / 2; }, FillInner, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
+])), function (p) { return p.thickness; }, function (p) { return p.width && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), p.width); }, function (p) { return p.padded && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["margin: 10px;"], ["margin: 10px;"]))); }, function (p) { return p.theme.colors.neutral[50]; }, function (p) { var _a; return ((_a = p.thickness) !== null && _a !== void 0 ? _a : DEFAULT_THICKNESS) / 2; }, FillInner, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
 /**
  * A horizontal progress bar showing completion percentage.
  *
@@ -123,7 +127,7 @@ var ProgressStyled = styled(ProgressBase)(templateObject_6 || (templateObject_6
  * Includes `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`.
  */
 var Progress = function (_a) {
-    var _b = _a.thickness, thickness = _b === void 0 ? 5 : _b, _c = _a.numbered, numbered = _c === void 0 ? false : _c, _d = _a.padded, padded = _d === void 0 ? false : _d, props = __rest(_a, ["thickness", "numbered", "padded"]);
+    var _b = _a.thickness, thickness = _b === void 0 ? DEFAULT_THICKNESS : _b, _c = _a.numbered, numbered = _c === void 0 ? false : _c, _d = _a.padded, padded = _d === void 0 ? false : _d, props = __rest(_a, ["thickness", "numbered", "padded"]);
     return React.createElement(ProgressStyled, __assign({ thickness: thickness, numbered: numbered, padded: padded }, props));
 };
 Progress.displayName = 'Progress';

package/controls/SecondaryButton/SecondaryButton.d.ts

@@ -39,10 +39,15 @@ interface ISecondaryButtonProps extends ITestable {
      */
     title: string;
     /**
-     * Fired when the button is clicked. The synthetic React click event
-     * is passed along so that callers may stop event propagation.
+     * Fired when the button is clicked. The synthetic React click event is passed
+     * along so callers may inspect it or stop propagation.
      */
-    onClick: (e?: React.MouseEvent) => void;
+    onClick: (e: React.MouseEvent) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A compact icon-only button for secondary actions.

package/controls/SecondaryButton/SecondaryButton.js

@@ -29,7 +29,7 @@ import styled, { css, useTheme } from 'styled-components';
 import { Icon } from '../Icon';
 var SecondaryButtonBase = function (props) {
     var theme = useTheme();
-    return (React.createElement("button", { "data-testid": props['data-testid'] || "SecondaryButton", type: "button", className: props.className, disabled: props.disabled, onClick: props.onClick, title: props.title, "aria-label": props.title },
+    return (React.createElement("button", { "data-testid": props['data-testid'] || "SecondaryButton", type: "button", className: props.className, style: props.style, disabled: props.disabled, onClick: props.onClick, title: props.title, "aria-label": props.title },
         React.createElement(Icon, __assign({ color: theme.colors.neutral[100] }, (typeof props.icon === 'string' ? { url: props.icon } : props.icon)))));
 };
 // 

package/controls/SpeechRecognizer/EditorRegistry.js

@@ -16,8 +16,7 @@ var EditorRegistry = /** @class */ (function () {
         EditorRegistry.editors = EditorRegistry.editors.filter(function (e) { return e.div !== div; });
     };
     EditorRegistry.getEditor = function (div) {
-        var _a;
-        return (_a = EditorRegistry.editors.find(function (e) { return e.div === div; })) === null || _a === void 0 ? void 0 : _a.editor;
+        return EditorRegistry.editors.find(function (e) { return e.div === div; }).editor;
     };
     return EditorRegistry;
 }());