@longline/aqua-ui 1.0.338 → 1.0.340

package/controls/Ghost/Ghost.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 var GhostBase = function (props) {
-    return React.createElement("div", { "data-testid": props['data-testid'] || "Ghost", className: props.className, style: props.style },
+    return React.createElement("div", { "data-testid": props['data-testid'] || "Ghost", className: props.className, style: props.style, "aria-hidden": "true" },
         React.createElement(Gradient1, null),
         React.createElement(Gradient2, null));
 };
@@ -24,8 +24,8 @@ var COLOR1 = "#2C4E68";
 var COLOR2 = "#6B8BA2";
 var anim = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"], ["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
 var anim2 = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n"], ["\n  0% {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n"])));
-var Gradient1 = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 1;\n  background: linear-gradient(-45deg, ", ", ", ");\n  animation: ", " 4s infinite linear;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 1;\n  background: linear-gradient(-45deg, ", ", ", ");\n  animation: ", " 4s infinite linear;\n"])), COLOR1, COLOR2, anim2);
-var Gradient2 = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 1;\n  background: linear-gradient(-45deg, ", ", ", ");\n  animation: ", " 4s infinite linear;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 1;\n  background: linear-gradient(-45deg, ", ", ", ");\n  animation: ", " 4s infinite linear;\n"])), COLOR2, COLOR1, anim);
+var Gradient1 = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 1;\n  background: linear-gradient(-45deg, ", ", ", ");\n  animation: ", " 4s infinite linear;\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 1;\n  background: linear-gradient(-45deg, ", ", ", ");\n  animation: ", " 4s infinite linear;\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"])), COLOR1, COLOR2, anim2);
+var Gradient2 = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 1;\n  background: linear-gradient(-45deg, ", ", ", ");\n  animation: ", " 4s infinite linear;\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 1;\n  background: linear-gradient(-45deg, ", ", ", ");\n  animation: ", " 4s infinite linear;\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"])), COLOR2, COLOR1, anim);
 var GhostStyled = styled(GhostBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  min-width: 5px;\n  min-height: 5px;\n  border-radius: ", "px;\n  overflow: hidden;\n  pointer-events: none;\n  opacity: 0.3;\n"], ["\n  position: relative;\n  min-width: 5px;\n  min-height: 5px;\n  border-radius: ", "px;\n  overflow: hidden;\n  pointer-events: none;\n  opacity: 0.3;\n"
     /**
      * A placeholder element that displays a subtle animated gradient while content is loading.

package/controls/Gradient/Gradient.d.ts

@@ -23,6 +23,11 @@ interface IGradientProps extends ITestable {
      * @default false
      */
     checkered?: boolean;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A horizontal color gradient bar for visualizing color scales or ranges.

package/controls/Gradient/Gradient.js

@@ -26,20 +26,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled from 'styled-components';
+var DEFAULT_THICKNESS = 5;
 var GradientBase = function (props) {
     // Runtime guard:
     if (!Array.isArray(props.gradientStops) || props.gradientStops.length === 0) {
         console.warn("Gradient: Missing or invalid 'gradientStops'");
         return null;
     }
-    return React.createElement("div", { "data-testid": props['data-testid'] || "Gradient", className: props.className });
+    return React.createElement("div", { "data-testid": props['data-testid'] || "Gradient", className: props.className, style: props.style });
 };
 var generateGradient = function (stops) {
-    return "linear-gradient(to right, ".concat(stops.map(function (gs) { return "".concat(gs.color, " ").concat(gs.pos * 100, "%"); }).join(', '), ")");
+    return !Array.isArray(stops) || stops.length === 0
+        ? 'none'
+        : "linear-gradient(to right, ".concat(stops.map(function (gs) { return "".concat(gs.color, " ").concat(gs.pos * 100, "%"); }).join(', '), ")");
 };
 var GradientStyled = styled(GradientBase).attrs(function (p) {
     var _a;
-    var thickness = (_a = p.thickness) !== null && _a !== void 0 ? _a : 5;
+    var thickness = (_a = p.thickness) !== null && _a !== void 0 ? _a : DEFAULT_THICKNESS;
     var background = p.checkered
         ? "".concat(generateGradient(p.gradientStops), ", repeating-conic-gradient(#808080 0% 25%, #fff 0% 50%) 50% / 10px 10px")
         : generateGradient(p.gradientStops);
@@ -153,7 +156,7 @@ var GradientStyled = styled(GradientBase).attrs(function (p) {
  * with transparency, making alpha values visible.
  */
 var Gradient = function (_a) {
-    var _b = _a.thickness, thickness = _b === void 0 ? 5 : _b, _c = _a.checkered, checkered = _c === void 0 ? false : _c, props = __rest(_a, ["thickness", "checkered"]);
+    var _b = _a.thickness, thickness = _b === void 0 ? DEFAULT_THICKNESS : _b, _c = _a.checkered, checkered = _c === void 0 ? false : _c, props = __rest(_a, ["thickness", "checkered"]);
     return React.createElement(GradientStyled, __assign({ thickness: thickness, checkered: checkered }, props));
 };
 Gradient.displayName = "Gradient";

package/controls/Histogram/Histogram.d.ts

@@ -40,9 +40,15 @@ interface IHistogramProps extends ITestable {
      */
     nodata?: React.ReactNode;
     /**
-     * Optional click event includes the index of the bar clicked (0-based):
+     * Fired when a bar is clicked. Receives the 0-based bar index and the
+     * originating mouse event.
      */
-    onClick?: (idx: number) => void;
+    onClick?: (idx: number, e: React.MouseEvent) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A bar chart visualization for displaying binned data distributions.

package/controls/Histogram/Histogram.js

@@ -31,28 +31,28 @@ import { HistogramBar } from './HistogramBar';
 import { HistogramTick } from './HistogramTick';
 import { DefaultHistogramAppearance } from './HistogramAppearance';
 var HistogramBase = function (props) {
+    var _a;
     // Abort if there are no bins.
     if (props.bins.length === 0)
         return React.createElement(HistogramNoData, null, props.nodata);
     // Find tallest bar. This is used to calculate the percentage height
     // of each bar.
-    var maxHeight = Math.max.apply(Math, props.bins.map(function (b) { return b.count; }));
+    var maxHeight = Math.max.apply(Math, props.bins.map(function (b) { var _a; return (_a = b.count) !== null && _a !== void 0 ? _a : 0; }));
     // Abort if bins are all empty.
     if (maxHeight === 0)
         return React.createElement(HistogramNoData, null, props.nodata);
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "Histogram", className: props.className },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Histogram", className: props.className, style: props.style },
         React.createElement(ChartArea, null,
             React.createElement(Indent, null,
                 React.createElement(BarArea, null, props.bins.map(function (bin, idx) {
-                    return React.createElement(HistogramBar, { key: idx, values: props.values, value: bin.count, label: bin.name, height: 100 * bin.count / maxHeight, onClick: props.onClick ? function () { return props.onClick(idx); } : null, loading: props.loading, appearance: props.appearance });
+                    var _a, _b, _c;
+                    return React.createElement(HistogramBar, { key: idx, values: props.values, value: (_a = bin.count) !== null && _a !== void 0 ? _a : 0, label: bin.name, height: 100 * ((_b = bin.count) !== null && _b !== void 0 ? _b : 0) / maxHeight, onClick: props.onClick ? function (e) { return props.onClick(idx, e); } : undefined, loading: props.loading, appearance: (_c = props.appearance) !== null && _c !== void 0 ? _c : DefaultHistogramAppearance });
                 })))),
         props.tickStyle !== 'none' && React.createElement(AxisArea, null,
             React.createElement(Indent, null,
-                props.bins.map(function (bin, idx) {
-                    return React.createElement(HistogramTick, { key: idx, showValue: props.tickStyle === 'value', left: 100 * idx / props.bins.length, value: bin.binStart });
-                }),
+                props.bins.map(function (bin, idx) { var _a; return React.createElement(HistogramTick, { key: idx, showValue: props.tickStyle === 'value', left: 100 * idx / props.bins.length, value: (_a = bin.binStart) !== null && _a !== void 0 ? _a : 0 }); }),
                 props.bins.length > 0 &&
-                    React.createElement(HistogramTick, { left: 100, showValue: props.tickStyle === 'value', value: props.bins[props.bins.length - 1].binEnd }))),
+                    React.createElement(HistogramTick, { left: 100, showValue: props.tickStyle === 'value', value: (_a = props.bins[props.bins.length - 1].binEnd) !== null && _a !== void 0 ? _a : 0 }))),
         props.unit && React.createElement(UnitArea, null, props.unit)));
 };
 var ChartArea = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
@@ -60,7 +60,7 @@ var AxisArea = styled.div(templateObject_2 || (templateObject_2 = __makeTemplate
 var UnitArea = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
 var BarArea = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
 var Indent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
-var HistogramStyled = styled(HistogramBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  // Chart elements are stacked vertically:\n  display:     flex;\n  flex-direction: column;\n  // Histogram fills available space:\n  width:       100%;\n  height:      100%;\n  box-sizing:  border-box;\n\n  ", " {\n    position:  relative;\n    flex:      1;\n  }\n  ", " {\n    position:  relative;\n    flex:      0;\n    height:    22px;\n    min-height: 22px;\n    box-sizing: border-box;\n  }\n  ", " {\n    flex:      0;\n    height:    20px;\n    min-height: 20px;\n    font-size: 10px;\n    color:     #fff;\n    user-select: none;    \n    display: flex;\n    flex-direction: column;\n    justify-content: end;\n    align-items: center;\n  }\n  ", " {\n    // BarArea takes up an absolute position:\n    position:  absolute;\n    width:     100%;\n    height:    100%;\n    // Bars are placed using flexbox:\n    display:   flex;\n    flex-direction: row;  \n    justify-content: center;\n    align-items: flex-end;\n    overflow-y: hidden;\n    overflow-x: hidden;\n  }\n  ", " {\n    position:  absolute;\n    top:       0;\n    bottom:    0;\n    left:      5%;\n    right:     5%;\n  }\n"], ["\n  // Chart elements are stacked vertically:\n  display:     flex;\n  flex-direction: column;\n  // Histogram fills available space:\n  width:       100%;\n  height:      100%;\n  box-sizing:  border-box;\n\n  ", " {\n    position:  relative;\n    flex:      1;\n  }\n  ", " {\n    position:  relative;\n    flex:      0;\n    height:    22px;\n    min-height: 22px;\n    box-sizing: border-box;\n  }\n  ", " {\n    flex:      0;\n    height:    20px;\n    min-height: 20px;\n    font-size: 10px;\n    color:     #fff;\n    user-select: none;    \n    display: flex;\n    flex-direction: column;\n    justify-content: end;\n    align-items: center;\n  }\n  ", " {\n    // BarArea takes up an absolute position:\n    position:  absolute;\n    width:     100%;\n    height:    100%;\n    // Bars are placed using flexbox:\n    display:   flex;\n    flex-direction: row;  \n    justify-content: center;\n    align-items: flex-end;\n    overflow-y: hidden;\n    overflow-x: hidden;\n  }\n  ", " {\n    position:  absolute;\n    top:       0;\n    bottom:    0;\n    left:      5%;\n    right:     5%;\n  }\n"
+var HistogramStyled = styled(HistogramBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  // Chart elements are stacked vertically:\n  display:     flex;\n  flex-direction: column;\n  // Histogram fills available space:\n  width:       100%;\n  height:      100%;\n  box-sizing:  border-box;\n\n  ", " {\n    position:  relative;\n    flex:      1;\n  }\n  ", " {\n    position:  relative;\n    flex:      0;\n    height:    22px;\n    min-height: 22px;\n    box-sizing: border-box;\n  }\n  ", " {\n    flex:      0;\n    height:    20px;\n    min-height: 20px;\n    font-size: 10px;\n    color:     ", ";\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n    justify-content: end;\n    align-items: center;\n  }\n  ", " {\n    // BarArea takes up an absolute position:\n    position:  absolute;\n    width:     100%;\n    height:    100%;\n    // Bars are placed using flexbox:\n    display:   flex;\n    flex-direction: row;  \n    justify-content: center;\n    align-items: flex-end;\n    overflow-y: hidden;\n    overflow-x: hidden;\n  }\n  ", " {\n    position:  absolute;\n    top:       0;\n    bottom:    0;\n    left:      5%;\n    right:     5%;\n  }\n"], ["\n  // Chart elements are stacked vertically:\n  display:     flex;\n  flex-direction: column;\n  // Histogram fills available space:\n  width:       100%;\n  height:      100%;\n  box-sizing:  border-box;\n\n  ", " {\n    position:  relative;\n    flex:      1;\n  }\n  ", " {\n    position:  relative;\n    flex:      0;\n    height:    22px;\n    min-height: 22px;\n    box-sizing: border-box;\n  }\n  ", " {\n    flex:      0;\n    height:    20px;\n    min-height: 20px;\n    font-size: 10px;\n    color:     ", ";\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n    justify-content: end;\n    align-items: center;\n  }\n  ", " {\n    // BarArea takes up an absolute position:\n    position:  absolute;\n    width:     100%;\n    height:    100%;\n    // Bars are placed using flexbox:\n    display:   flex;\n    flex-direction: row;  \n    justify-content: center;\n    align-items: flex-end;\n    overflow-y: hidden;\n    overflow-x: hidden;\n  }\n  ", " {\n    position:  absolute;\n    top:       0;\n    bottom:    0;\n    left:      5%;\n    right:     5%;\n  }\n"
     /**
      * A bar chart visualization for displaying binned data distributions.
      *
@@ -103,7 +103,7 @@ var HistogramStyled = styled(HistogramBase)(templateObject_6 || (templateObject_
      * gaps, opacity, and border radius. `DefaultHistogramAppearance` and
      * `BlueHistogramAppearance` presets are available.
      */
-])), ChartArea, AxisArea, UnitArea, BarArea, Indent);
+])), ChartArea, AxisArea, UnitArea, function (p) { return p.theme.colors.font; }, BarArea, Indent);
 /**
  * A bar chart visualization for displaying binned data distributions.
  *

package/controls/Histogram/HistogramBar.d.ts

@@ -16,8 +16,8 @@ interface IProps {
     loading?: boolean;
     /** Histogram appearance. */
     appearance: IHistogramAppearance;
-    /** Fired if bar is clicked. */
-    onClick?: () => void;
+    /** Fired if bar is clicked. Receives the originating mouse event. */
+    onClick?: (e: React.MouseEvent) => void;
 }
 declare const HistogramBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 export { HistogramBar };

package/controls/Icon/Icon.d.ts

@@ -60,15 +60,21 @@ interface IIconProps extends ITestable {
      */
     padded?: boolean;
     /**
-     * An icon can have an `onClick` handler. It is triggered when the icon
-     * is clicked.
+     * An icon can have an `onClick` handler, triggered when the icon is clicked
+     * or, for keyboard users, activated with Enter/Space. Receives the
+     * originating mouse or keyboard event. When set, the icon is exposed as a
+     * focusable `button` to assistive technology.
      */
-    onClick?: (e?: React.MouseEvent) => void;
+    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 declare const IconBase: (props: IIconProps) => React.JSX.Element;
 interface IStyledProps {
     $realSize: string;
-    $color: string;
 }
 declare const IconStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<IIconProps, IIconProps>, IIconProps & Partial<IStyledProps>>, IIconProps>> & string & Omit<(props: IIconProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 /**

package/controls/Icon/Icon.js

@@ -29,25 +29,42 @@ import styled, { keyframes, css } from 'styled-components';
 // Helpers
 import { lighten } from '../../helper/lighten';
 import { scaleSize } from '../../helper/SizeHelper';
+// Default prop values, referenced both by the IconStyled fallbacks and the
+// Icon wrapper below.
+var DEFAULT_SIZE = 'medium';
+var DEFAULT_COLOR = 'white';
 var IconBase = function (props) {
+    // An icon with an onClick behaves as a button; otherwise it is presentational.
+    var interactive = !!props.onClick && !props.disabled;
     var handleClick = function (e) {
         if (props.disabled)
             return;
         if (props.onClick)
             props.onClick(e);
     };
-    return (React.createElement("svg", { "data-testid": props['data-testid'] || "Icon", className: props.className, onClick: handleClick, focusable: "false", role: "img" },
+    var handleKeyDown = function (e) {
+        var _a;
+        if (props.disabled)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+    };
+    return (React.createElement("svg", { "data-testid": props['data-testid'] || "Icon", className: props.className, style: props.style, onClick: handleClick, onKeyDown: interactive ? handleKeyDown : undefined, tabIndex: interactive ? 0 : undefined, role: interactive ? 'button' : props.title ? 'img' : undefined, "aria-label": interactive ? props.title : undefined, "aria-hidden": !interactive && !props.title ? true : undefined, focusable: interactive ? undefined : "false" },
         props.title && React.createElement("title", null, props.title),
         React.createElement("use", { xlinkHref: props.url })));
 };
 var rotate = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { rotate: 0deg; }\n  to   { rotate: 360deg; }\n"], ["\n  from { rotate: 0deg; }\n  to   { rotate: 360deg; }\n"])));
 var IconStyled = styled(IconBase).attrs(function (p) {
-    var _a, _b;
+    var _a;
     return ({
-        $realSize: typeof p.size === 'number' ? "".concat(p.size, "px") : "".concat(scaleSize((_a = p.size) !== null && _a !== void 0 ? _a : 'medium', 1, 'minorThird'), "em"),
-        $color: (_b = p.$color) !== null && _b !== void 0 ? _b : p.theme.colors.neutral[100]
+        $realSize: typeof p.size === 'number' ? "".concat(p.size, "px") : "".concat(scaleSize((_a = p.size) !== null && _a !== void 0 ? _a : DEFAULT_SIZE, 1, 'minorThird'), "em")
     });
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  shape-rendering: geometricPrecision;\n  box-sizing: border-box;\n\n  // Circle:\n  ", "\n  \n  // Spacing around icon:\n  ", "\n\n  // Clickable icons have a cursor hint:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Sizes:\n  width: ", ";  \n  height: ", ";\n  // Don't be squished when in a flex:\n  min-width: ", ";  \n  min-height: ", ";\n\n  // Transformations:\n  transform-origin: center;\n  transform: ", " ", " ", ";\n\n  // Icon colors:\n  fill: ", ";\n  ", "\n\n  // Animated:\n  ", "\n"], ["\n  position: relative;\n  shape-rendering: geometricPrecision;\n  box-sizing: border-box;\n\n  // Circle:\n  ", "\n  \n  // Spacing around icon:\n  ", "\n\n  // Clickable icons have a cursor hint:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Sizes:\n  width: ", ";  \n  height: ", ";\n  // Don't be squished when in a flex:\n  min-width: ", ";  \n  min-height: ", ";\n\n  // Transformations:\n  transform-origin: center;\n  transform: ", " ", " ", ";\n\n  // Icon colors:\n  fill: ", ";\n  ", "\n\n  // Animated:\n  ", "\n"])), function (p) { return p.circle && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border-radius: 50%;\n    border: solid 1px ", ";\n  "], ["\n    border-radius: 50%;\n    border: solid 1px ", ";\n  "])), p.color); }, function (p) { return p.padded && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["margin: 2px;"], ["margin: 2px;"]))); }, function (p) { return p.onClick && !p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["cursor: pointer;"], ["cursor: pointer;"]))); }, function (p) { return p.disabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    pointer-events: none;\n    opacity: 0.6;\n  "], ["\n    pointer-events: none;\n    opacity: 0.6;\n  "]))); }, function (p) { return p.$realSize; }, function (p) { return p.$realSize; }, function (p) { return p.$realSize; }, function (p) { return p.$realSize; }, function (p) { return p.flipped ? 'scaleY(-1)' : ''; }, function (p) { return p.mirrored ? 'scaleX(-1)' : ''; }, function (p) { return p.rotated ? "rotate(".concat(p.rotated, "deg)") : ''; }, function (p) { return p.color; }, function (p) { return p.onClick && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    transition: \n      fill ", "ms ease, \n      border-color ", "ms ease,\n      outline-color ", "ms ease;\n    &:hover {\n      fill: ", ";\n      border-color:  ", ";\n    }\n  "], ["\n    transition: \n      fill ", "ms ease, \n      border-color ", "ms ease,\n      outline-color ", "ms ease;\n    &:hover {\n      fill: ", ";\n      border-color:  ", ";\n    }\n  "])), function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, lighten(0.3, p.color), lighten(0.3, p.color)); }, function (p) { return p.animated && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    animation: ", " 2s linear infinite;\n  "], ["\n    animation: ", " 2s linear infinite;\n  "])), rotate); });
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  shape-rendering: geometricPrecision;\n  box-sizing: border-box;\n\n  // Circle:\n  ", "\n  \n  // Spacing around icon:\n  ", "\n\n  // Clickable icons have a cursor hint:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Sizes:\n  width: ", ";  \n  height: ", ";\n  // Don't be squished when in a flex:\n  min-width: ", ";  \n  min-height: ", ";\n\n  // Transformations:\n  transform-origin: center;\n  transform: ", " ", " ", ";\n\n  // Icon colors:\n  fill: ", ";\n  ", "\n\n  // Animated:\n  ", "\n"], ["\n  position: relative;\n  shape-rendering: geometricPrecision;\n  box-sizing: border-box;\n\n  // Circle:\n  ", "\n  \n  // Spacing around icon:\n  ", "\n\n  // Clickable icons have a cursor hint:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Sizes:\n  width: ", ";  \n  height: ", ";\n  // Don't be squished when in a flex:\n  min-width: ", ";  \n  min-height: ", ";\n\n  // Transformations:\n  transform-origin: center;\n  transform: ", " ", " ", ";\n\n  // Icon colors:\n  fill: ", ";\n  ", "\n\n  // Animated:\n  ", "\n"])), function (p) { return p.circle && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border-radius: 50%;\n    border: solid 1px ", ";\n  "], ["\n    border-radius: 50%;\n    border: solid 1px ", ";\n  "])), p.color); }, function (p) { return p.padded && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["margin: 2px;"], ["margin: 2px;"]))); }, function (p) { return p.onClick && !p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["cursor: pointer;"], ["cursor: pointer;"]))); }, function (p) { return p.disabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    pointer-events: none;\n    opacity: 0.6;\n  "], ["\n    pointer-events: none;\n    opacity: 0.6;\n  "]))); }, function (p) { return p.$realSize; }, function (p) { return p.$realSize; }, function (p) { return p.$realSize; }, function (p) { return p.$realSize; }, function (p) { return p.flipped ? 'scaleY(-1)' : ''; }, function (p) { return p.mirrored ? 'scaleX(-1)' : ''; }, function (p) { return p.rotated ? "rotate(".concat(p.rotated, "deg)") : ''; }, function (p) { return p.color; }, function (p) {
+    var _a, _b;
+    return p.onClick && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    transition: \n      fill ", "ms ease, \n      border-color ", "ms ease,\n      outline-color ", "ms ease;\n    &:hover {\n      fill: ", ";\n      border-color:  ", ";\n    }\n  "], ["\n    transition: \n      fill ", "ms ease, \n      border-color ", "ms ease,\n      outline-color ", "ms ease;\n    &:hover {\n      fill: ", ";\n      border-color:  ", ";\n    }\n  "])), function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, lighten(0.3, (_a = p.color) !== null && _a !== void 0 ? _a : DEFAULT_COLOR), lighten(0.3, (_b = p.color) !== null && _b !== void 0 ? _b : DEFAULT_COLOR));
+}, function (p) { return p.animated && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    animation: ", " 2s linear infinite;\n  "], ["\n    animation: ", " 2s linear infinite;\n  "])), rotate); });
 /**
  * An SVG icon from a sprite sheet with support for sizing, colors, and transformations.
  *
@@ -102,7 +119,7 @@ var IconStyled = styled(IconBase).attrs(function (p) {
  * | `animated` | Continuous rotation animation |
  */
 var Icon = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.flipped, flipped = _d === void 0 ? false : _d, _e = _a.mirrored, mirrored = _e === void 0 ? false : _e, _f = _a.animated, animated = _f === void 0 ? false : _f, _g = _a.padded, padded = _g === void 0 ? false : _g, _h = _a.circle, circle = _h === void 0 ? false : _h, _j = _a.color, color = _j === void 0 ? "white" : _j, props = __rest(_a, ["size", "disabled", "flipped", "mirrored", "animated", "padded", "circle", "color"]);
+    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.flipped, flipped = _d === void 0 ? false : _d, _e = _a.mirrored, mirrored = _e === void 0 ? false : _e, _f = _a.animated, animated = _f === void 0 ? false : _f, _g = _a.padded, padded = _g === void 0 ? false : _g, _h = _a.circle, circle = _h === void 0 ? false : _h, _j = _a.color, color = _j === void 0 ? DEFAULT_COLOR : _j, props = __rest(_a, ["size", "disabled", "flipped", "mirrored", "animated", "padded", "circle", "color"]);
     return React.createElement(IconStyled, __assign({ size: size, disabled: disabled, flipped: flipped, mirrored: mirrored, animated: animated, padded: padded, circle: circle, color: color }, props));
 };
 export { IconBase, Icon, IconStyled };

package/controls/Key/Key.d.ts

@@ -12,6 +12,11 @@ interface IKeyProps extends ITestable {
      * Fakes a Mac keyboard.
      */
     _fakeMac?: boolean;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A visual representation of a keyboard key for displaying shortcuts or instructions.

package/controls/Key/Key.js

@@ -18,7 +18,7 @@ import styled from 'styled-components';
 import { Icon } from '../Icon';
 import { SVG } from '../../svg';
 var KeyBase = function (props) {
-    var isMac = navigator.userAgent.includes('Mac') || props._fakeMac;
+    var isMac = (typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac')) || props._fakeMac;
     // symbol and wide depend only on isMac and props.value, so we memoize them:
     var _a = React.useMemo(function () {
         var sym = props.value;
@@ -48,10 +48,7 @@ var KeyBase = function (props) {
         }
         return { symbol: sym, wide: isWide };
     }, [props.value, isMac]), symbol = _a.symbol, wide = _a.wide;
-    return (React.createElement("span", { "data-testid": props['data-testid'] || "Key", className: props.className, style: {
-            maxWidth: wide ? 'auto' : '16px',
-            minWidth: wide ? '36px' : 'auto'
-        }, "aria-label": props.value },
+    return (React.createElement("span", { "data-testid": props['data-testid'] || "Key", className: props.className, style: __assign({ maxWidth: wide ? 'auto' : '16px', minWidth: wide ? '36px' : 'auto' }, props.style), role: "img", "aria-label": props.value },
         React.createElement(Inner, { style: { justifyContent: wide ? 'flex-start' : 'center' } }, symbol)));
 };
 var Inner = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n"])));

package/controls/LinearChart/LinearChart.d.ts

@@ -27,6 +27,15 @@ interface ILinearChartProps extends ITestable {
      * @default false
      */
     ghost?: boolean;
+    /**
+     * 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 for visualizing percentage values.

package/controls/LinearChart/LinearChart.js

@@ -27,22 +27,27 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled from 'styled-components';
 import { Ghost } from '../Ghost';
+// Clamp a value into the 0..100 progress range, guarding against non-finite input.
+var clampPercent = function (v) { return Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0; };
 var LinearChartBase = function (props) {
-    var percentage = Math.round(Math.max(0, Math.min(100, props.value))) + "%";
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "LinearChart", className: props.className, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(props.value) },
+    var value = clampPercent(props.value);
+    var percentage = Math.round(value) + "%";
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "LinearChart", className: props.className, style: props.style, role: "progressbar", "aria-label": props.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(value) },
         props.label && React.createElement(Label, null,
             props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: '2px', right: 0, bottom: '2px' } }),
             !props.ghost && props.label),
-        !props.ghost && props.numbered && React.createElement(Number, null, percentage),
+        !props.ghost && props.numbered && React.createElement(Percentage, null, percentage),
         !props.ghost && React.createElement(Bar, null),
         props.ghost && React.createElement(GhostWrapper, null,
             React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: '2px', right: 0, bottom: '2px' } }))));
 };
 var Label = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 120px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  height: 18px;\n  line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n"], ["\n  position: relative;\n  width: 120px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  height: 18px;\n  line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n"])));
-var Number = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 40px;\n  text-align: right;\n  height: 18px;     // If not, will chop accents of \u00C3 and \u00C7.\n  line-height: 18px;\n"], ["\n  width: 40px;\n  text-align: right;\n  height: 18px;     // If not, will chop accents of \u00C3 and \u00C7.\n  line-height: 18px;\n"])));
+var Percentage = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 40px;\n  text-align: right;\n  height: 18px;     // If not, will chop accents of \u00C3 and \u00C7.\n  line-height: 18px;\n"], ["\n  width: 40px;\n  text-align: right;\n  height: 18px;     // If not, will chop accents of \u00C3 and \u00C7.\n  line-height: 18px;\n"])));
 var Bar = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative; \n  box-sizing: border-box;\n  flex: 1;\n  height: 14px;\n\n  background-color: ", ";\n  border-radius: 7px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    box-sizing: border-box;\n    transition: width ", "ms ease;\n    border-radius: 7px;\n  }  \n"], ["\n  position: relative; \n  box-sizing: border-box;\n  flex: 1;\n  height: 14px;\n\n  background-color: ", ";\n  border-radius: 7px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    box-sizing: border-box;\n    transition: width ", "ms ease;\n    border-radius: 7px;\n  }  \n"])), function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.animation.duration * 2; });
 var GhostWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  height: 18px;\n  flex: 1;\n"], ["\n  position: relative;\n  height: 18px;\n  flex: 1;\n"])));
-var LinearChartStyled = styled(LinearChartBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  min-width: 200px;\n  user-select: none;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  min-width: 200px;\n  user-select: none;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"
+var LinearChartStyled = styled(LinearChartBase).attrs(function (p) { return ({
+    $fill: clampPercent(p.value)
+}); })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  min-width: 200px;\n  user-select: none;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  min-width: 200px;\n  user-select: none;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"
     /**
      * A horizontal progress bar for visualizing percentage values.
      *
@@ -78,7 +83,7 @@ var LinearChartStyled = styled(LinearChartBase)(templateObject_5 || (templateObj
      *
      * Includes `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`.
      */
-])), function (p) { return p.theme.font.dataLarge; }, function (p) { return p.theme.colors.font; }, Bar, function (p) { return Math.max(0, Math.min(100, p.value)); }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
+])), function (p) { return p.theme.font.dataLarge; }, function (p) { return p.theme.colors.font; }, Bar, function (p) { return p.$fill; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
 /**
  * A horizontal progress bar for visualizing percentage values.
  *

package/controls/ListButton/ListButton.d.ts

@@ -4,9 +4,14 @@ import { ITestable } from '../../Types';
 interface IListButtonProps extends ITestable {
     /** @ignore */
     children?: React.ReactNode;
-    /** Toggle control that opens/closes the list. Receives an `onClick` handler. */
+    /**
+     * Toggle control that opens/closes the list. It is cloned with an `onClick`
+     * handler and `aria-haspopup` / `aria-expanded` attributes.
+     */
     toggle: React.ReactElement<{
         onClick?: React.MouseEventHandler;
+        'aria-haspopup'?: boolean;
+        'aria-expanded'?: boolean;
     }>;
     /**
      * Pane width in pixels.
@@ -18,12 +23,50 @@ interface IListButtonProps extends ITestable {
      * @default top-start
      */
     placement?: Placement;
+    /**
+     * Maximum number of list rows shown before the pane scrolls.
+     * @default 6
+     */
+    maxItems?: number;
+    /**
+     * Optional inline styles applied to the outer (trigger) element, for one-off
+     * overrides of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
- * Best used with `<ListRow>` children.
+ * A trigger element that opens a floating panel of list rows, positioned
+ * relative to the trigger with Popper.
+ *
+ * You provide any element as the `toggle` (typically a button or icon); it is
+ * cloned with a click handler that opens/closes the panel, plus
+ * `aria-haspopup` / `aria-expanded`. The panel contents are best expressed as
+ * `<ListRow>` children. The panel closes on outside click or `Escape`.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <ListButton toggle={<Fab icon={SVG.Icons.More} onClick={() => {}} />}>
+ *   <ListRow onClick={rename}>Rename</ListRow>
+ *   <ListRow onClick={remove}>Delete</ListRow>
+ * </ListButton>
+ *
+ * // Custom width and placement
+ * <ListButton toggle={<Button>Options</Button>} width={320} placement="bottom-end">
+ *   ...
+ * </ListButton>
+ * ```
+ *
+ * ## Display Options
+ *
+ * | Prop | Default | Description |
+ * |------|---------|-------------|
+ * | `width` | `250` | Panel width in pixels |
+ * | `placement` | `top-start` | Popper placement of the panel |
+ * | `maxItems` | `6` | Rows shown before the panel scrolls |
  */
 declare const ListButton: {
-    ({ width, placement, ...props }: IListButtonProps): React.JSX.Element;
+    ({ width, placement, maxItems, ...props }: IListButtonProps): React.JSX.Element;
     displayName: string;
 };
 export { ListButton };

package/controls/ListButton/ListButton.js

@@ -30,10 +30,15 @@ import { usePopper } from 'react-popper';
 import { createPortal } from 'react-dom';
 import { useOutsideClose } from '../../hooks/useOutsideClose';
 import { List } from '../../containers/List';
+// Default prop values, referenced both by the ListButtonBase fallbacks and the
+// ListButton wrapper below.
+var DEFAULT_WIDTH = 250;
+var DEFAULT_MAX_ITEMS = 6;
 var ListButtonBase = function (props) {
+    var _a, _b;
     var buttonRef = React.useRef(null);
     var paneRef = React.useRef(null);
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
     useOutsideClose({
         open: open,
         refs: [paneRef, buttonRef],
@@ -41,7 +46,7 @@ var ListButtonBase = function (props) {
         escapeToClose: true,
         blurToClose: false
     });
-    var _b = usePopper(buttonRef.current, paneRef.current, {
+    var _d = usePopper(buttonRef.current, paneRef.current, {
         placement: props.placement,
         modifiers: [
             {
@@ -51,7 +56,7 @@ var ListButtonBase = function (props) {
                 },
             }
         ]
-    }), styles = _b.styles, attributes = _b.attributes, update = _b.update;
+    }), styles = _d.styles, attributes = _d.attributes, update = _d.update;
     var toggleOpen = function () {
         setOpen(!open);
         // Update popper.
@@ -59,20 +64,76 @@ var ListButtonBase = function (props) {
             update();
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { "data-testid": props['data-testid'] || "ListButton", ref: buttonRef, style: { display: 'inline-block' } }, React.cloneElement(props.toggle, { onClick: toggleOpen })),
-        createPortal(React.createElement(Pane, __assign({ "$open": open, "$width": props.width, style: styles.popper }, attributes.popper, { ref: paneRef }), open && React.createElement(List, { maxItems: 6, contract: true }, props.children)), document.body)));
+        React.createElement("div", { "data-testid": props['data-testid'] || "ListButton", ref: buttonRef, style: __assign({ display: 'inline-block' }, props.style) }, React.cloneElement(props.toggle, { onClick: toggleOpen, 'aria-haspopup': true, 'aria-expanded': open })),
+        createPortal(React.createElement(Pane, __assign({ "$open": open, "$width": (_a = props.width) !== null && _a !== void 0 ? _a : DEFAULT_WIDTH, style: styles.popper }, attributes.popper, { ref: paneRef }), open && React.createElement(List, { maxItems: (_b = props.maxItems) !== null && _b !== void 0 ? _b : DEFAULT_MAX_ITEMS, contract: true }, props.children)), document.body)));
 };
 var Pane = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"], ["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"
     /**
-     * Best used with `<ListRow>` children.
+     * A trigger element that opens a floating panel of list rows, positioned
+     * relative to the trigger with Popper.
+     *
+     * You provide any element as the `toggle` (typically a button or icon); it is
+     * cloned with a click handler that opens/closes the panel, plus
+     * `aria-haspopup` / `aria-expanded`. The panel contents are best expressed as
+     * `<ListRow>` children. The panel closes on outside click or `Escape`.
+     *
+     * ## Usage
+     *
+     * ```tsx
+     * <ListButton toggle={<Fab icon={SVG.Icons.More} onClick={() => {}} />}>
+     *   <ListRow onClick={rename}>Rename</ListRow>
+     *   <ListRow onClick={remove}>Delete</ListRow>
+     * </ListButton>
+     *
+     * // Custom width and placement
+     * <ListButton toggle={<Button>Options</Button>} width={320} placement="bottom-end">
+     *   ...
+     * </ListButton>
+     * ```
+     *
+     * ## Display Options
+     *
+     * | Prop | Default | Description |
+     * |------|---------|-------------|
+     * | `width` | `250` | Panel width in pixels |
+     * | `placement` | `top-start` | Popper placement of the panel |
+     * | `maxItems` | `6` | Rows shown before the panel scrolls |
      */
 ])), function (p) { return p.$open ? 'block' : 'none'; }, function (p) { return p.$width; });
 /**
- * Best used with `<ListRow>` children.
+ * A trigger element that opens a floating panel of list rows, positioned
+ * relative to the trigger with Popper.
+ *
+ * You provide any element as the `toggle` (typically a button or icon); it is
+ * cloned with a click handler that opens/closes the panel, plus
+ * `aria-haspopup` / `aria-expanded`. The panel contents are best expressed as
+ * `<ListRow>` children. The panel closes on outside click or `Escape`.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <ListButton toggle={<Fab icon={SVG.Icons.More} onClick={() => {}} />}>
+ *   <ListRow onClick={rename}>Rename</ListRow>
+ *   <ListRow onClick={remove}>Delete</ListRow>
+ * </ListButton>
+ *
+ * // Custom width and placement
+ * <ListButton toggle={<Button>Options</Button>} width={320} placement="bottom-end">
+ *   ...
+ * </ListButton>
+ * ```
+ *
+ * ## Display Options
+ *
+ * | Prop | Default | Description |
+ * |------|---------|-------------|
+ * | `width` | `250` | Panel width in pixels |
+ * | `placement` | `top-start` | Popper placement of the panel |
+ * | `maxItems` | `6` | Rows shown before the panel scrolls |
  */
 var ListButton = function (_a) {
-    var _b = _a.width, width = _b === void 0 ? 250 : _b, _c = _a.placement, placement = _c === void 0 ? 'top-start' : _c, props = __rest(_a, ["width", "placement"]);
-    return React.createElement(ListButtonBase, __assign({ width: width, placement: placement }, props));
+    var _b = _a.width, width = _b === void 0 ? DEFAULT_WIDTH : _b, _c = _a.placement, placement = _c === void 0 ? 'top-start' : _c, _d = _a.maxItems, maxItems = _d === void 0 ? DEFAULT_MAX_ITEMS : _d, props = __rest(_a, ["width", "placement", "maxItems"]);
+    return React.createElement(ListButtonBase, __assign({ width: width, placement: placement, maxItems: maxItems }, props));
 };
 ListButton.displayName = "ListButton";
 export { ListButton };

package/controls/ListView/ColumnsManager/ColumnDraggable.js

@@ -22,9 +22,13 @@ var ColumnDraggableBase = function (props) {
     var theme = useTheme();
     var wrapperRef = React.useRef(null);
     var handleMouseDown = function () {
+        if (!wrapperRef.current)
+            return;
         wrapperRef.current.draggable = true;
     };
     var handleMouseUp = function () {
+        if (!wrapperRef.current)
+            return;
         wrapperRef.current.draggable = false;
     };
     var handleDragStart = function (ev) {
@@ -56,20 +60,22 @@ var ColumnDraggableBase = function (props) {
         return target;
     };
     var handleDragEnter = function (ev) {
+        var _a;
         ev.preventDefault();
-        getDropzone(ev.target).classList.add('drop');
+        (_a = getDropzone(ev.target)) === null || _a === void 0 ? void 0 : _a.classList.add('drop');
     };
     var handleDragLeave = function (ev) {
+        var _a, _b, _c, _d;
         // If the destination is not a dropzone, remove my class.
         if (!getDropzone(ev.relatedTarget)) {
-            getDropzone(ev.target).classList.remove('drop');
+            (_a = getDropzone(ev.target)) === null || _a === void 0 ? void 0 : _a.classList.remove('drop');
             return;
         }
         // The destination is a dropzone. Is it the same as the current one?
-        var src_name = getDropzone(ev.target).getAttribute('x-name');
-        var dest_name = getDropzone(ev.relatedTarget).getAttribute('x-name');
+        var src_name = (_b = getDropzone(ev.target)) === null || _b === void 0 ? void 0 : _b.getAttribute('x-name');
+        var dest_name = (_c = getDropzone(ev.relatedTarget)) === null || _c === void 0 ? void 0 : _c.getAttribute('x-name');
         if (src_name != dest_name) {
-            getDropzone(ev.target).classList.remove('drop');
+            (_d = getDropzone(ev.target)) === null || _d === void 0 ? void 0 : _d.classList.remove('drop');
             return;
         }
     };

package/controls/ListView/ColumnsManager/SourceColumns.js

@@ -36,7 +36,7 @@ var SourceColumnsBase = function (props) {
      */
     var reactNodeToString = function (node) {
         if (node === null || node === undefined || typeof node === 'boolean')
-            return null;
+            return '';
         if (typeof node === 'string' || typeof node === 'number')
             return String(node);
         // If it's an array of nodes, recursively join them