@splunk/react-ui 4.36.0 → 4.38.0

package/TextArea.js

@@ -76,8 +76,8 @@
     const s = require("lodash/has");
     var c =  e.n(s);
     // CONCATENATED MODULE: external "lodash/keys"
-    const d = require("lodash/keys");
-    var p =  e.n(d);
+    const p = require("lodash/keys");
+    var d =  e.n(p);
     // CONCATENATED MODULE: external "lodash/noop"
     const u = require("lodash/noop");
     var f =  e.n(u);
@@ -269,9 +269,11 @@
     var V = M()(H).withConfig({
         displayName: "TextAreaStyles__StyledTextAreaShadow",
         componentId: "gfy8yp-5"
-    })([ "position:absolute;overflow:hidden;left:-10000px;top:-10000px;visibility:hidden;pointer-events:none;", ";" ], (function(e) {
+    })([ "position:absolute;overflow:hidden;left:-10000px;top:-10000px;visibility:hidden;pointer-events:none;", "" ], (function(e) {
         var t = e.$startAdornmentWidth, r = e.$endAdornmentWidth;
-        return (0, T.css)([ "width:calc( 100% - ", " - ", " );" ], t || B, r || z);
+        var n = t ? "".concat(t, "px") : B;
+        var a = r ? "".concat(r, "px") : z;
+        return (0, T.css)([ "width:calc(100% - ", " - ", ");" ], n, a);
     }));
     var K = (0, k.pick)({
         enterprise: {
@@ -423,9 +425,9 @@
             var l = parseInt(o, 10);
             var s = parseInt(i.getPropertyValue("padding-top"), 10);
             var c = parseInt(i.getPropertyValue("padding-bottom"), 10);
-            var d = parseInt(i.getPropertyValue("border-top-width"), 10);
-            var p = parseInt(i.getPropertyValue("border-bottom-width"), 10);
-            var u = a.scrollHeight + d + p + 1;
+            var p = parseInt(i.getPropertyValue("border-top-width"), 10);
+            var d = parseInt(i.getPropertyValue("border-bottom-width"), 10);
+            var u = a.scrollHeight + p + d + 1;
  // need one extra.
             /* eslint-disable no-restricted-globals */
             // Leverage the global `isNaN` here for IE support, rather than Number.isNaN.
@@ -434,11 +436,11 @@
                 return false;
             }
             /* eslint-enable no-restricted-globals */            if (r >= n) {
-                var f = r * l + s + c + d + p + 1;
+                var f = r * l + s + c + p + d + 1;
  // need one extra.
                                 u = Math.min(f, u);
             }
-            var h = n * l + s + c + d + p + 1;
+            var h = n * l + s + c + p + d + 1;
  // need one extra.
                         u = Math.max(h, u);
             if (t !== u) {
@@ -495,7 +497,7 @@
         return oe.apply(this, arguments);
     }
     function le(e) {
-        return pe(e) || de(e) || ce(e) || se();
+        return de(e) || pe(e) || ce(e) || se();
     }
     function se() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -508,10 +510,10 @@
         if (r === "Map" || r === "Set") return Array.from(e);
         if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return ue(e, t);
     }
-    function de(e) {
+    function pe(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
-    function pe(e) {
+    function de(e) {
         if (Array.isArray(e)) return ue(e);
     }
     function ue(e, t) {
@@ -868,14 +870,14 @@
             Ie(Se(a), "renderEndAdornment", (function() {
                 var e;
                 var t = a.props, r = t.appearance, i = t.endAdornment, o = t.disabled, l = t.canClear, s = t.splunkTheme;
-                var c = s.isPrisma, d = s.isEnterprise;
+                var c = s.isPrisma, p = s.isEnterprise;
                 if (i) {
                     return a.renderAdornment(i, "end");
                 }
-                var p = a.context;
-                var u = (e = p.labelAttrs) === null || e === void 0 ? void 0 : e.text;
+                var d = a.context;
+                var u = (e = d.labelAttrs) === null || e === void 0 ? void 0 : e.text;
                 var f = u ? (0, S._)("Clear ".concat(u, " text field")) : (0, S._)("Clear text field");
-                if (d && r === "search") {
+                if (p && r === "search") {
                     /* Both icons are rendered, and StyledBox toggles visibility based on :focus-within */
                     return a.renderAdornment( n().createElement(n().Fragment, null,  n().createElement(Q, {
                         "aria-label": f,
@@ -965,7 +967,7 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, r = t.append, a = t.autoCapitalize, i = t.autoComplete, o = t.autoCorrect, l = t.autoFocus, s = t.children, c = t.className, d = t.classNamePrivate, u = t.disabled, h = t.describedBy, m = t.elementRef, y = t.error, g = t.inline, x = t.inputClassName, w = t.inputId, k = t.labelledBy, S = t.maxLength, O = t.name, I = t.placeholder, j = t.prepend, E = t.required, T = t.rowsMin, M = t.spellCheck, P = t.tabIndex, $ = t.title, _ = ve(t, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "maxLength", "name", "placeholder", "prepend", "required", "rowsMin", "spellCheck", "tabIndex", "title" ]);
+                var t = this.props, r = t.append, a = t.autoCapitalize, i = t.autoComplete, o = t.autoCorrect, l = t.autoFocus, s = t.children, c = t.className, p = t.classNamePrivate, u = t.disabled, h = t.describedBy, m = t.elementRef, y = t.error, g = t.inline, x = t.inputClassName, w = t.inputId, k = t.labelledBy, S = t.maxLength, O = t.name, I = t.placeholder, j = t.prepend, E = t.required, T = t.rowsMin, M = t.spellCheck, P = t.tabIndex, $ = t.title, _ = ve(t, [ "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "maxLength", "name", "placeholder", "prepend", "required", "rowsMin", "spellCheck", "tabIndex", "title" ]);
                 var D = he(he({}, b()(_, (function(e, t) {
                     return t === "role" || t.indexOf("aria-") === 0;
                 }))), {}, {
@@ -973,7 +975,7 @@
                     "aria-labelledby": k,
                     "aria-invalid": y || undefined
                 });
-                var q = v()(_, [ "inputRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onSelect", "onInputClick" ].concat(le(p()(D))));
+                var q = v()(_, [ "inputRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onSelect", "onInputClick" ].concat(le(d()(D))));
                 var W = this.getDisplayValue();
                 var N = {
                     className: (0, A.toClassName)(c, x),
@@ -1016,7 +1018,7 @@
                 
                 return n().createElement(R, oe({
                     tabIndex: -1,
-                    className: (0, A.toClassName)(c, d),
+                    className: (0, A.toClassName)(c, p),
                     "data-test": "text-area",
                     "data-test-value": W,
                     elementRef: m,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.36.0",
+  "version": "4.38.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -44,8 +44,8 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@splunk/react-icons": "^4.7.0",
-    "@splunk/themes": "^0.21.0",
+    "@splunk/react-icons": "^4.8.0",
+    "@splunk/themes": "^0.22.0",
     "@splunk/ui-utils": "^1.7.1",
     "commonmark": "^0.30.0",
     "commonmark-react-renderer": "^4.3.2",
@@ -64,7 +64,7 @@
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/docs-gen": "1.0.0-beta.13",
     "@splunk/eslint-config": "^4.0.0",
-    "@splunk/react-docs": "1.0.0-beta.17",
+    "@splunk/react-docs": "1.0.0-beta.19",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",

package/types/src/Button/Button.d.ts

@@ -34,7 +34,6 @@ interface ButtonPropsBase {
      * Turns the button red. If you use this prop, apply other error
      * indicators, such as an error message, to meet accessibility
      * requirements.
-     *
      * */
     error?: boolean;
     /** Applies the text that displays on the button. */
@@ -47,13 +46,24 @@ interface ButtonPropsBase {
      * remove the right margin and stretch the button to the full width of
      * its container.  */
     inline?: boolean;
-    /** Displays the chevron-down icon to indicate that the button behaves
-     * as a menu. */
+    /**
+     * Displays the chevron-down icon to indicate that the button behaves as a menu.
+     *
+     * To meet accessibility requirements, this prop should be used together with the `Dropdown` component.
+     *
+     * If `Dropdown` is not used, this prop should be used together with `aria-controls` and `aria-expanded`.
+     */
     isMenu?: boolean;
     /** Prevents callback when the button is disabled. */
     onClick?: ButtonClickHandler;
-    /** Opens the 'to' link in a new browser tab.  */
-    openInNewContext?: boolean;
+    /**
+     * Open the "to" link in a new context, which is usually a new tab or window based on browser settings.
+     *
+     * An icon and a screen reader message is added to indicate this behavior to users.
+     * The default message is "(Opens new window)"; this can be customized by passing
+     * a string instead of boolean to `openInNewContext`.
+     */
+    openInNewContext?: boolean | string;
     /** Removes the left border and border-radius of the button so you can
      * prepend elements to it. */
     prepend?: boolean;

package/types/src/Color/Color.d.ts

@@ -27,6 +27,7 @@ interface ColorPropsBase {
     error?: boolean;
     /**
      * Set this property to hide the hex value text input in the initial appearance.
+     * The input will still appear inside the dropdown when opened.
      * @themeNotes Defaults to `false` in Prisma and `true` in Enterprise themes.
      */
     hideInput?: boolean;
@@ -81,6 +82,8 @@ declare class Color extends Component<ColorProps, ColorState> {
     private focusExpandButton;
     private controlledExternally;
     private dropdown;
+    private swatchToggleReaderContentId;
+    private hexInputReaderContentId;
     static propTypes: React.WeakValidationMap<ColorProps>;
     static defaultProps: Required<Pick<ColorPropsBase, "disabled" | "error" | "append" | "prepend" | "palette">>;
     static hasNull(palette: (string | null)[]): boolean;

package/types/src/Color/Palette.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import Clickable from '@splunk/react-ui/Clickable';
-interface PaletteProps {
+import { ComponentProps } from '../utils/types';
+interface PalettePropsBase {
     /**
      * In the prisma theme, controls if the palette is expanded
      */
@@ -42,5 +43,6 @@ interface PaletteProps {
      */
     onSystemColorPickerChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-declare function Palette({ expanded, palette, value, swatchToFocusRef, onSwatchClick, expandButtonRef, onPaletteExpand, onSystemColorPickerChange, renderInput, }: PaletteProps): JSX.Element;
+type PaletteProps = ComponentProps<PalettePropsBase, 'div'>;
+declare function Palette({ expanded, palette, value, swatchToFocusRef, onSwatchClick, expandButtonRef, onPaletteExpand, onSystemColorPickerChange, renderInput, ...otherProps }: PaletteProps): JSX.Element;
 export default Palette;

package/types/src/ControlGroup/docs/examples/Error.d.ts

@@ -1,2 +1,2 @@
-declare function ControlGroupError(): JSX.Element;
-export default ControlGroupError;
+declare function Error(): JSX.Element;
+export default Error;

package/types/src/Date/Date.d.ts

@@ -51,7 +51,6 @@ interface DatePropsBase {
     inputId?: string;
     /**
      * Whether or not to display the calendar menu.
-     * @includeTheme prisma
      */
     inputOnly?: boolean;
     /** Locale set by language and localization specifiers. */

package/types/src/Date/docs/examples/Error.d.ts

@@ -0,0 +1,2 @@
+declare function Error(): JSX.Element;
+export default Error;

package/types/src/Link/Link.d.ts

@@ -17,11 +17,10 @@ interface LinkPropsBase {
      */
     elementRef?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
     /**
-     * Open the link in a new context. Usually this will open the location in a new tab,
-     * but may open in a new window depending on the user's browser and settings.
+     * Open the "to" link in a new context, which is usually a new tab or window based on browser settings.
      *
-     * An icon and a message is added to indicate this behavior to users.
-     * "(Opens new window)" is the default message. This can be customized by passing
+     * An icon and a screen reader message is added to indicate this behavior to users.
+     * The default message is "(Opens new window)"; this can be customized by passing
      * a string instead of boolean to `openInNewContext`.
      */
     openInNewContext?: boolean | string;

package/types/src/Menu/Item.d.ts

@@ -57,10 +57,13 @@ interface ItemPropsBase {
     onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
     onFocus?: ItemFocusHandler;
     /**
-     * To open the link in a new window, set `openInNewContext` to `true`. An icon is added
-     * indicating the behavior.
+     * Open the "to" link in a new context, which is usually a new tab or window based on browser settings.
+     *
+     * An icon and a screen reader message is added to indicate this behavior to users.
+     * The default message is "(Opens new window)"; this can be customized by passing
+     * a string instead of boolean to `openInNewContext`.
      */
-    openInNewContext?: boolean;
+    openInNewContext?: boolean | string;
     /**
      * @private
      * Prevents the element from becoming focused. Used to keep the focus inside the filter box

package/types/src/Progress/Progress.d.ts

@@ -17,7 +17,7 @@ interface ProgressPropsBase {
      * Sets the appearance of the `Progress` component.
      *
      * The `warning` appearance is deprecated and will be removed in the next major version.
-     * @excludeTheme enterprise
+     * @themeNotes Enterprise themes do not support `warning` and will fall back to `info`
      */
     type?: 'info' | 'success' | 'warning' | 'error';
 }

package/types/src/Search/Option.d.ts

@@ -32,6 +32,13 @@ interface OptionPropsBase {
      * Caution: The element(s) passed here must be pure. All icons in the react-icons package are pure.
      */
     icon?: React.ReactNode;
+    /**
+     * Sections of the label string to highlight as a match.
+     */
+    matchRanges?: {
+        start: number;
+        end: number;
+    }[];
     /**
      * Callback for click events.
      * Returning "false" from the callback will prevent the parent Search component from updating its value,

package/types/src/Select/Select.d.ts

@@ -12,7 +12,7 @@ type SelectFilterChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HT
     keyword: string;
 }) => void;
 /** @public */
-type SelectScrollBottomHandler = (event: React.UIEvent<HTMLDivElement> | React.KeyboardEvent<HTMLInputElement> | null) => void;
+type SelectScrollBottomHandler = (event: React.UIEvent<HTMLDivElement> | React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLButtonElement> | null) => void;
 interface SelectPropsBase {
     /**
      * Whether or not to allow entered keyboard printable characters to match options.

package/types/src/Select/SelectBase.d.ts

@@ -228,7 +228,6 @@ declare class SelectBase extends Component<SelectBaseProps, SelectBaseState> {
     private dropdown;
     private firstSelectedEnabledOption;
     private firstSelectedOptionIndex?;
-    private menuId;
     private menuListboxId;
     private previousActiveIndex;
     private selectedOptionCount;

package/types/src/Slider/Slider.d.ts

@@ -25,7 +25,6 @@ interface SliderPropsBase {
     elementRef?: React.Ref<HTMLDivElement>;
     /**
      * Highlight the Slider as having an error. The thumb and bar background-color turn to accent negative.
-     * @excludeTheme enterprise
      */
     error: boolean;
     /** When false, display as inline-block with the default width. */

package/types/src/Slider/docs/examples/Error.d.ts

@@ -0,0 +1,2 @@
+declare function Error(): JSX.Element;
+export default Error;

package/types/src/Switch/Switch.d.ts

@@ -29,6 +29,7 @@ interface SwitchPropsBase {
     id?: string;
     /** Make the control an inline block with variable width. */
     inline?: boolean;
+    inputClassName?: string;
     /**
      * In a couple of cases, the switch is to show state, but is not interactive in itself.
      * The parent takes focus and handles click. Set interactive to false to prevent focus and