@splunk/react-ui 4.22.1 → 4.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.22.1",
+  "version": "4.23.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -41,8 +41,8 @@
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.1",
-    "@splunk/react-icons": "^4.1.0",
-    "@splunk/themes": "^0.16.3",
+    "@splunk/react-icons": "^4.2.0",
+    "@splunk/themes": "^0.16.4",
     "@splunk/ui-utils": "^1.6.0",
     "@types/commonmark": "^0.27.6",
     "@types/lodash": "^4.14.156",
@@ -68,7 +68,7 @@
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/docs-gen": "1.0.0-beta.8",
     "@splunk/eslint-config": "^4.0.0",
-    "@splunk/react-docs": "1.0.0-beta.9",
+    "@splunk/react-docs": "1.0.0-beta.11",
     "@splunk/stylelint-config": "^4.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",
@@ -85,6 +85,7 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^26.0.0",
     "@types/mocha": "^7.0.2",
     "@types/node": "^10.17.26",

package/types/src/Dropdown/Dropdown.d.ts

@@ -100,8 +100,8 @@ interface DropdownPropsBase {
      */
     repositionMode?: 'none' | 'flip' | 'any';
     /**
-     * Keeps focus within the Popover while open. Menu handles its own focus by default,
-     * so this is only necessary when the popover contains other types of content.
+     * Keeps focus within the Popover while open. Only use this for inputs used in a form control.
+     * Do not use this when the Dropdown contains a Menu because Menu handles its own focus.
      */
     retainFocus?: boolean;
     /**

package/types/src/JSONTree/JSONTree.d.ts

@@ -21,6 +21,19 @@ interface JSONTreePropsBase {
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLElement>;
+    /**
+     * @deprecated The `expandChildren="withShiftModifier"` value is deprecated and will be removed in a future major version. Use the `expandChildrenOnShiftKey` prop instead.
+     *
+     * If set to `true`, `expandChildren` will expand all nodes on initial render
+     * and expand all descendant nodes of any expanded node. The default is `false`, which expands only the first
+     * level of properties. If set to `withShiftModifier`, using `shift + click` or `shift + enter` will
+     * expand or collapse all descendant nodes of the tree at once.
+     */
+    expandChildren?: boolean | 'withShiftModifier';
+    /**
+     * Number of space characters per level of indentation.
+     */
+    indent?: number;
     /**
      * The JSON string to visualize. Alternatively, this prop also accepts objects and other
      * possible return types of `JSON.parse`. `JSONTree` doesn't perform any runtime type
@@ -28,10 +41,6 @@ interface JSONTreePropsBase {
      * representable in JSON like functions and symbols, the component behavior is unspecified.
      */
     json: string | JSONElement;
-    /**
-     * Number of space characters per level of indentation.
-     */
-    indent?: number;
     /**
      * Optional event handler to call if keys are clicked on.
      * The function signature is `onClickKey({path, keyPath, value})`, where `path` is the property path
@@ -44,31 +53,31 @@ interface JSONTreePropsBase {
      *, `.a.b`; keyPath is an array of that property path, `['a', 'b']; and `value` is the value that was clicked.
      */
     onClickValue?: JSONTreeClickValueHandler;
-    /**
-     * Starts with all nodes expanded if set to `true`. The default is `false`, which expands only the first
-     * level of properties. If set to `withShiftModifier`, using `SHIFT + CLICK” or `SHIFT + ENTER` will expand or collapse all
-     * levels of the tree at once.
-     */
-    expandChildren?: boolean | 'withShiftModifier';
     /**
      * Handles overflow by wrapping values or by enabling scrolling.
      */
     overflow?: 'wrap' | 'scroll';
+    /**
+     * If set to `true`, using `shift + click` or `shift + enter` will expand or collapse all descendant nodes
+     * of the tree at once.
+     */
+    expandChildrenOnShiftKey?: boolean;
 }
 declare type JSONTreeProps = ComponentProps<JSONTreePropsBase, 'code'>;
 /**
  * Used to visualize a JSON string.
  */
-declare function JSONTree({ elementRef, expandChildren, indent, json, onClickKey, onClickValue, overflow, ...otherProps }: JSONTreeProps): JSX.Element;
+declare function JSONTree({ elementRef, expandChildren, indent, json, onClickKey, onClickValue, overflow, expandChildrenOnShiftKey, ...otherProps }: JSONTreeProps): JSX.Element;
 declare namespace JSONTree {
     var propTypes: {
         elementRef: PropTypes.Requireable<object>;
-        json: PropTypes.Validator<string | number | boolean | object>;
+        expandChildren: PropTypes.Requireable<string | boolean>;
         indent: PropTypes.Requireable<number>;
+        json: PropTypes.Validator<string | number | boolean | object>;
         onClickKey: PropTypes.Requireable<(...args: any[]) => any>;
         onClickValue: PropTypes.Requireable<(...args: any[]) => any>;
-        expandChildren: PropTypes.Requireable<string | boolean>;
         overflow: PropTypes.Requireable<string>;
+        expandChildrenOnShiftKey: PropTypes.Requireable<boolean>;
     };
 }
 export default JSONTree;

package/types/src/JSONTree/TreeNode.d.ts

@@ -13,8 +13,9 @@ interface JSONTreeNodePropsBase {
     onClickValue?: JSONTreeClickValueHandler;
     overflow?: 'wrap' | 'scroll';
     shift?: boolean;
+    expandChildrenOnShiftKey?: boolean;
 }
-declare const defaultProps: Required<Pick<JSONTreeNodePropsBase, 'path' | 'defaultOpen' | 'expandChildren' | 'indent' | 'indentLevel' | 'overflow'>>;
+declare const defaultProps: Required<Pick<JSONTreeNodePropsBase, 'path' | 'defaultOpen' | 'expandChildren' | 'indent' | 'indentLevel' | 'overflow' | 'expandChildrenOnShiftKey'>>;
 declare type JSONTreeNodeProps = ClassComponentProps<JSONTreeNodePropsBase, typeof defaultProps, 'span'>;
 interface JSONTreeNodeState {
     open: boolean;
@@ -28,8 +29,8 @@ declare class JSONTreeNode extends Component<JSONTreeNodeProps, JSONTreeNodeStat
     private mutableShift;
     context: React.ContextType<typeof JSONTreeContext>;
     static contextType: React.Context<JSONTreeContext>;
-    static propTypes: React.WeakValidationMap<ClassComponentProps<JSONTreeNodePropsBase, Required<Pick<JSONTreeNodePropsBase, "path" | "overflow" | "defaultOpen" | "expandChildren" | "indent" | "indentLevel">>, "span", never>>;
-    static defaultProps: Required<Pick<JSONTreeNodePropsBase, "path" | "overflow" | "defaultOpen" | "expandChildren" | "indent" | "indentLevel">>;
+    static propTypes: React.WeakValidationMap<ClassComponentProps<JSONTreeNodePropsBase, Required<Pick<JSONTreeNodePropsBase, "path" | "overflow" | "defaultOpen" | "expandChildren" | "indent" | "indentLevel" | "expandChildrenOnShiftKey">>, "span", never>>;
+    static defaultProps: Required<Pick<JSONTreeNodePropsBase, "path" | "overflow" | "defaultOpen" | "expandChildren" | "indent" | "indentLevel" | "expandChildrenOnShiftKey">>;
     constructor(props: JSONTreeNodeProps);
     private handleExpandClick;
     private handleClickKey;

package/types/src/JSONTree/docs/examples/ExpandChildrenOnShiftKey.d.ts

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

package/types/src/Multiselect/Compact.d.ts

@@ -125,7 +125,7 @@ interface CompactPropsBase {
      */
     repositionMode?: 'none' | 'flip';
     /**
-     * Determines how to display Select All/Clear All.
+     * Determines how to display Select all/Clear all.
      */
     selectAllAppearance?: 'buttongroup' | 'checkbox';
     /**

package/types/src/Multiselect/Multiselect.d.ts

@@ -143,7 +143,7 @@ interface MultiselectPropsBase {
      */
     repositionMode?: 'none' | 'flip';
     /**
-     * Determines how to display Select All/Clear All.
+     * Determines how to display Select all/Clear all.
      * Only supported when `compact=true`.
      */
     selectAllAppearance?: 'buttongroup' | 'checkbox';

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

@@ -160,7 +160,7 @@ interface SelectBasePropsBase {
      */
     repositionMode?: 'none' | 'flip';
     /**
-     * Determines how to display Select All/Clear All.
+     * Determines how to display Select all/Clear all.
      */
     selectAllAppearance?: 'buttongroup' | 'checkbox';
     showSelectedValuesFirst?: 'nextOpen' | 'immediately' | 'never';

package/types/src/JSONTree/docs/examples/WithShiftModifier.d.ts

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