@splunk/react-ui 5.7.1 → 5.9.0

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

@@ -26,6 +26,12 @@ interface JSONTreePropsBase {
      * The default is `false`, which expands only the first level of properties.
      */
     defaultExpanded?: boolean;
+    /**
+     * If set to `true`, using `shift + click` or `shift + enter` will expand all descendant nodes
+     * of the tree at once. A tooltip is added to the expand all / collapse all button to indicate that this feature
+     * is enabled. Defaults to `true`.
+     */
+    expandChildrenOnShiftKey?: boolean;
     /**
      * Number of space characters per level of indentation.
      */
@@ -54,17 +60,18 @@ interface JSONTreePropsBase {
      */
     overflow?: 'wrap' | 'scroll';
     /**
-     * If set to `true`, using `shift + click` or `shift + enter` will expand all descendant nodes
-     * of the tree at once. A tooltip is added to the expand all / collapse all button to indicate that this feature
-     * is enabled. Defaults to `true`.
+     * @private
+     * Controls how string values in leaf nodes are rendered.
+     * - `literal`: renders strings in quotes and respects control characters (new lines, tabs, etc.).
+     * - `stringify`: renders strings using `JSON.stringify`, which causes control characters to be escaped.
      */
-    expandChildrenOnShiftKey?: boolean;
+    stringRenderer?: 'literal' | 'stringify';
 }
 type JSONTreeProps = ComponentProps<JSONTreePropsBase, 'code'>;
 /**
  * Used to visualize a JSON string.
  */
-declare function JSONTree({ elementRef, defaultExpanded, indent, json, onClickKey, onClickValue, overflow, expandChildrenOnShiftKey, ...otherProps }: JSONTreeProps): React.JSX.Element;
+declare function JSONTree({ elementRef, defaultExpanded, indent, json, onClickKey, onClickValue, overflow, expandChildrenOnShiftKey, stringRenderer, ...otherProps }: JSONTreeProps): React.JSX.Element;
 declare namespace JSONTree {
     var propTypes: {
         elementRef: PropTypes.Requireable<object>;

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

@@ -13,7 +13,8 @@ type RenderTreeItemsProps = {
     overflow?: 'wrap' | 'scroll';
     path?: (string | number)[];
     shift?: boolean;
+    stringRenderer?: 'literal' | 'stringify';
     updateShift: ((newShift: boolean) => void) | undefined;
 };
-export declare function renderTreeItems({ baseId, defaultOpen, defaultExpanded, expandChildrenOnShiftKey, indent, indentLevel, obj, onClickKey, onClickValue, overflow, path, shift, updateShift, }: RenderTreeItemsProps): React.JSX.Element | React.JSX.Element[];
+export declare function renderTreeItems({ baseId, defaultOpen, defaultExpanded, expandChildrenOnShiftKey, indent, indentLevel, obj, onClickKey, onClickValue, overflow, path, shift, stringRenderer, updateShift, }: RenderTreeItemsProps): React.JSX.Element | React.JSX.Element[];
 export {};

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

@@ -80,6 +80,7 @@ interface ItemPropsBase {
     selectable?: boolean;
     /**
      * Specifies the type of selection control to display when `selectable` is enabled.
+     * Use `'checkmark'` for single-select menus and `'checkbox'` for multi-select menus.
      */
     selectableAppearance?: 'checkmark' | 'checkbox';
     /**
@@ -102,7 +103,7 @@ interface ItemPropsBase {
      */
     to?: string;
     /**
-     * When `true`, wrapping is disabled and any additional text is truncated using an ellipsis.
+     * When `true`, wrapping is disabled and any additional text is truncated using an ellipsis. A `Tooltip` will render so users can see the full text on hover.
      */
     truncate?: boolean;
 }

package/types/src/Menu/docs/examples/SelectableCheckbox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Selectable appearance
+ * @description A Menu.Item's selected indicator can appear as a checkmark (default) or a checkbox with the `selectableAppearance` prop. Use a checkmark when only one Item can be selected, and a checkbox when multiple can be selected.
+ */
+declare function SelectableCheckbox(): React.JSX.Element;
+export default SelectableCheckbox;

package/types/src/Modal/Modal.d.ts

@@ -21,7 +21,6 @@ interface ModalPropsBase {
      */
     children?: React.ReactNode;
     /**
-     * @private
      * Set to 'true' to enable closing the Modal by clicking outside of it.
      *
      * This behavior should be avoided as it can lead to accidental dismissal of the modal causing data loss or disruption of a user's workflow.
@@ -50,7 +49,7 @@ interface ModalPropsBase {
      * When `Modal` includes this prop, a close button is displayed by default in the `Modal.Header`.
      * To hide the close button, pass the `hideCloseButton` prop to `Modal.Header`.
      *
-     * The callback is passed the event and a reason, which is 'escapeKey' or 'clickCloseButton'.
+     * The callback is passed the event and a reason, which is 'escapeKey', 'clickAway', or 'clickCloseButton'.
      *
      * Generally, use this callback to toggle the `open` prop.
      */

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

@@ -36,8 +36,13 @@ interface CompactPropsBase {
      * ControlGroup's help component.
      */
     describedBy?: string;
-    /** Disable adding and removing. */
-    disabled?: boolean;
+    /**
+     * Prevents user interaction and adds disabled styling.
+     *
+     * If set to `dimmed`, the component is able to receive focus.
+     * If set to `disabled`, the component is unable to receive focus.
+     */
+    disabled?: boolean | 'dimmed' | 'disabled';
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
@@ -171,7 +176,7 @@ declare namespace Compact {
         defaultPlacement: PropTypes.Requireable<string>;
         defaultValues: PropTypes.Requireable<any[]>;
         describedBy: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string | boolean>;

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

@@ -55,8 +55,13 @@ interface MultiselectPropsBase {
      * ControlGroup's help component.
      */
     describedBy?: string;
-    /** Disable adding and removing. */
-    disabled?: boolean;
+    /**
+     * Prevents user interaction and adds disabled styling.
+     *
+     * If set to `dimmed`, the component is able to receive focus.
+     * If set to `disabled`, the component is unable to receive focus.
+     */
+    disabled?: boolean | 'dimmed' | 'disabled';
     /**
      * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
      */
@@ -223,7 +228,7 @@ declare namespace Multiselect {
         defaultPlacement: PropTypes.Requireable<string>;
         defaultValues: PropTypes.Requireable<any[]>;
         describedBy: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string | boolean>;

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

@@ -32,8 +32,13 @@ interface NormalPropsBase {
      * ControlGroup's help component.
      */
     describedBy?: string;
-    /** Disable adding and removing. */
-    disabled?: boolean;
+    /**
+     * Prevents user interaction and adds disabled styling.
+     *
+     * If set to `dimmed`, the component is able to receive focus.
+     * If set to `disabled`, the component is unable to receive focus.
+     */
+    disabled?: boolean | 'dimmed' | 'disabled';
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
@@ -138,7 +143,7 @@ declare namespace Normal {
         defaultPlacement: PropTypes.Requireable<string>;
         defaultValues: PropTypes.Requireable<any[]>;
         describedBy: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;
         footerMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;

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

@@ -26,9 +26,12 @@ interface OptionPropsBase {
      */
     descriptionPosition?: 'right' | 'bottom';
     /**
-     * If disabled=true, the option is grayed out and cannot be clicked.
+     * Prevents user interaction and adds disabled styling.
+     *
+     * If set to `dimmed`, the component is able to receive focus.
+     * If set to `disabled`, the component is unable to receive focus.
      */
-    disabled?: boolean;
+    disabled?: boolean | 'dimmed' | 'disabled';
     /**
      * @private Undocumented due to limitations in supporting in compact `Multiselect` (see SUI-8286 notes for more info).
      * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
@@ -99,7 +102,7 @@ declare namespace Option {
         compact: PropTypes.Requireable<boolean>;
         description: PropTypes.Requireable<string>;
         descriptionPosition: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
         /**
          * @private Undocumented due to limitations in supporting in compact `Multiselect` (see SUI-8286 notes for more info).
          */

package/types/src/Multiselect/docs/examples/Disabled.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 /**
  * @name Disabled
+ * @description If you absolutely need to disable a `Multiselect` use `"disabled="dimmed"`. This ensures the `Multiselect` does not respond to events, but can still receive focus to so that users can navigate to the `Multiselect` when using assistive technologies.
  */
 declare function Disabled(): React.JSX.Element;
 export default Disabled;

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

@@ -19,9 +19,12 @@ interface OptionPropsBase {
      */
     descriptionPosition?: 'right' | 'bottom';
     /**
-     * If disabled=true, the option is grayed out and cannot be clicked.
+     * Prevents user interaction and adds disabled styling.
+     *
+     * If set to `dimmed`, the component is able to receive focus.
+     * If set to `disabled`, the component is unable to receive focus (as a result of setting the html `disabled` attribute).
      */
-    disabled?: boolean;
+    disabled?: boolean | 'dimmed' | 'disabled';
     /**
      * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
      */
@@ -78,7 +81,7 @@ type OptionProps = ComponentProps<OptionPropsBase, 'button'>;
 /**
  * An option within a `Select`. Any elements passed to it should be memoized.
  */
-declare function Option({ children, descriptionPosition, elementRef, label, ...otherProps }: OptionProps): React.JSX.Element;
+declare function Option({ children, descriptionPosition, disabled, elementRef, label, ...otherProps }: OptionProps): React.JSX.Element;
 declare const OptionMemoized: React.MemoExoticComponent<typeof Option>;
 export default OptionMemoized;
 export type { OptionBaseClickHandler, OptionPropsBase };

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

@@ -55,9 +55,12 @@ interface SelectPropsBase {
      */
     describedBy?: string;
     /**
-     * disabled to toggle.
+     * Prevents user interaction and adds disabled styling.
+     *
+     * If set to `dimmed`, the component is able to receive focus.
+     * If set to `disabled`, the component is unable to receive focus (as a result of setting the html `disabled` attribute).
      */
-    disabled?: boolean;
+    disabled?: boolean | 'dimmed' | 'disabled';
     /**
      * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
      */
@@ -187,7 +190,7 @@ interface SelectPropsBaseUncontrolled extends SelectPropsBase {
     value?: never;
 }
 type SelectProps = ComponentProps<SelectPropsBaseControlled | SelectPropsBaseUncontrolled, 'button'>;
-declare function Select({ allowKeyMatching, appearance, defaultPlacement, defaultValue, inline, noOptionsMessage, onChange, placeholder, toggleContent, value, ...otherProps }: SelectProps): React.JSX.Element;
+declare function Select({ allowKeyMatching, appearance, defaultPlacement, defaultValue, disabled, inline, noOptionsMessage, onChange, placeholder, toggleContent, value, ...otherProps }: SelectProps): React.JSX.Element;
 declare namespace Select {
     var propTypes: {
         allowKeyMatching: PropTypes.Requireable<boolean>;
@@ -198,7 +201,7 @@ declare namespace Select {
         defaultPlacement: PropTypes.Requireable<string>;
         defaultValue: PropTypes.Requireable<NonNullable<string | number | boolean | null | undefined>>;
         describedBy: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string | boolean>;
@@ -231,7 +234,7 @@ declare namespace Select {
         /** @private. */
         virtualization: PropTypes.Requireable<number>;
     };
-    var Option: React.MemoExoticComponent<({ children, descriptionPosition, elementRef, label, ...otherProps }: import("./Option").OptionPropsBase & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref" | "css" | keyof import("./Option").OptionPropsBase>) => React.JSX.Element>;
+    var Option: React.MemoExoticComponent<({ children, descriptionPosition, disabled, elementRef, label, ...otherProps }: import("./Option").OptionPropsBase & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref" | "css" | keyof import("./Option").OptionPropsBase>) => React.JSX.Element>;
     var Heading: typeof BaseHeading;
     var Divider: typeof BaseDivider;
 }

package/types/src/Select/docs/examples/Dimmed.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Dimmed
+ * @description If you absolutely need to disable a Select use a dimmed Select. When the disabled prop is set to "dimmed", the Select does not respond to events but can still receive focus to ensure users can navigate to the Select when using assistive technologies. This also sets aria-disabled to true.
+ */
+declare function Dimmed(): React.JSX.Element;
+export default Dimmed;

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

@@ -23,9 +23,12 @@ interface OptionPropsBase {
      */
     descriptionPosition?: 'right' | 'bottom';
     /**
-     * If disabled=true, the option is grayed out and cannot be clicked.
+     * Prevents user interaction and adds disabled styling.
+     *
+     * If set to `dimmed`, the component is able to receive focus.
+     * If set to `disabled`, the component is unable to receive focus (as a result of setting the html `disabled` attribute).
      */
-    disabled?: boolean;
+    disabled?: boolean | 'dimmed' | 'disabled';
     /**
      * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
      */
@@ -94,7 +97,7 @@ declare namespace Option {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         description: PropTypes.Requireable<string>;
         descriptionPosition: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
         elementRef: PropTypes.Requireable<object>;
         endAdornment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         hidden: PropTypes.Requireable<boolean>;

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

@@ -54,8 +54,13 @@ interface SelectBasePropsBase {
      * ControlGroup's help component.
      */
     describedBy?: string;
-    /** Disable adding and removing. */
-    disabled?: boolean;
+    /**
+     * Prevents user interaction and adds disabled styling.
+     *
+     * If set to `dimmed`, the component is able to receive focus.
+     * If set to `disabled`, the component is unable to receive focus.
+     */
+    disabled?: boolean | 'dimmed' | 'disabled';
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
@@ -248,7 +253,7 @@ declare namespace SelectBase {
         defaultPlacement: PropTypes.Requireable<string>;
         defaultValues: PropTypes.Requireable<any[]>;
         describedBy: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string | boolean>;

package/types/src/SidePanel/SidePanel.d.ts

@@ -7,8 +7,18 @@ type SidePanelRequestCloseHandler = (data: {
     event: React.MouseEvent<HTMLDivElement> | MouseEvent | KeyboardEvent | TouchEvent;
     reason: 'clickAway' | 'escapeKey';
 }) => void;
+type SidePanelInitialFocus = 'first' | 'container' | (React.Component & {
+    focus: () => void;
+}) | HTMLElement | null;
 interface SidePanelPropsBase extends TransitionOpenPropsBase {
     children?: React.ReactNode;
+    /**
+     * The layout mode for the panel.
+     * - page: Positions relative to the viewport (default)
+     * - container: Positions relative to nearest positioned ancestor
+     * - inline: Renders inline allowing content to reflow around the panel
+     */
+    dockLayout?: 'page' | 'container' | 'inline';
     /**
      * The position of the Panel on the screen.
      */
@@ -17,6 +27,12 @@ interface SidePanelPropsBase extends TransitionOpenPropsBase {
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Allows focus to be set to a component other than the default.
+     * Supports `'first'` (first focusable element), `'container'` (the panel itself), or a ref.
+     * Note: Panel should be in view on open.
+     */
+    initialFocus?: SidePanelInitialFocus;
     /**
      * The inner element can control the width of the side bar when placed left or right and
      * the height when placed top or bottom.
@@ -32,6 +48,9 @@ interface SidePanelPropsBase extends TransitionOpenPropsBase {
      */
     onAnimationEnd?: () => void;
     /**
+     * Only applies to dockLayout=page because other dockLayout modes do not support
+     * closing via the escape key or click away.
+     *
      * A function that is called when a close event occurs. The callback is passed a
      * reason and the event.
      *
@@ -59,18 +78,39 @@ interface SidePanelPropsBase extends TransitionOpenPropsBase {
      */
     outerStyle?: React.CSSProperties;
     /**
+     * Pass the ref of the invoking element (or other element that follows the logical flow of the application) to automatically move focus
+     * to the invoking element on SidePanel close. If using a ref is not possible, you can pass a function that sets focus to the appropriate element.
+     * This function will be called when the panel closes.
+     */
+    returnFocus?: React.MutableRefObject<(React.Component & {
+        focus: () => void;
+    }) | HTMLElement | null> | (() => void);
+    /**
+     * Only applies to dockLayout=page because other dockLayout modes do not support
+     * closing via click away.
+     *
      * Indicates whether to add an overlay mask on the whole page, blocking other interactions
      * while the Panel is open.
      */
     useLayerForClickAway?: boolean;
 }
-type SidePanelProps = ComponentProps<SidePanelPropsBase, 'div'>;
-declare function SidePanel({ children, dockPosition, elementRef, innerClassName, innerStyle, onAnimationEnd, onRequestClose, open, outerClassName, outerStyle, useLayerForClickAway, ...otherProps }: SidePanelProps): React.JSX.Element;
+interface SidePanelPageLayoutProps extends SidePanelPropsBase {
+    dockLayout?: 'page';
+}
+interface SidePanelNonPageLayoutProps extends SidePanelPropsBase {
+    dockLayout: 'container' | 'inline';
+    onRequestClose?: never;
+    useLayerForClickAway?: never;
+}
+type SidePanelProps = ComponentProps<SidePanelPageLayoutProps | SidePanelNonPageLayoutProps, 'div'>;
+declare function SidePanel({ children, dockLayout, dockPosition, elementRef, initialFocus, innerClassName, innerStyle, onAnimationEnd, onRequestClose, open, outerClassName, outerStyle, returnFocus, useLayerForClickAway, ...otherProps }: SidePanelProps): React.JSX.Element;
 declare namespace SidePanel {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        dockLayout: PropTypes.Requireable<string>;
         dockPosition: PropTypes.Requireable<string>;
         elementRef: PropTypes.Requireable<object>;
+        initialFocus: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
         innerClassName: PropTypes.Requireable<string>;
         innerStyle: PropTypes.Requireable<object>;
         onAnimationEnd: PropTypes.Requireable<(...args: any[]) => any>;
@@ -78,6 +118,7 @@ declare namespace SidePanel {
         open: PropTypes.Requireable<boolean>;
         outerClassName: PropTypes.Requireable<string>;
         outerStyle: PropTypes.Requireable<object>;
+        returnFocus: PropTypes.Requireable<object>;
         useLayerForClickAway: PropTypes.Requireable<boolean>;
     };
 }

package/types/src/SidePanel/docs/examples/DockLayout.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * @name Dock Layout
+ * @description The `dockLayout` prop controls how the panel is positioned:
+ *
+ * - **page**
+ *   - Positions relative to the viewport.
+ *   - Overlays all content.
+ * - **container**
+ *   - Positions relative to the nearest positioned ancestor.
+ *   - Overlays content within that container.
+ * - **inline**
+ *   - Renders inline in the document flow.
+ *   - Pushes adjacent content aside when opened.
+ */
+declare function DockLayout(): React.JSX.Element;
+export default DockLayout;

package/types/src/SidePanel/docs/examples/InitialFocus.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * @name Initial focus
+ * @description Initial focus can be set to a different element using the `initialFocus` prop.
+ * Use `'first'` to focus the first focusable element, `'container'` to focus the panel itself,
+ * or pass a ref to a specific element.
+ */
+declare function InitialFocus(): React.JSX.Element;
+export default InitialFocus;

package/types/src/TransitionOpen/TransitionOpen.d.ts

@@ -1,8 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
+/** @public */
+type AnimationType = 'slideFromTop' | 'slideFromRight' | 'slideFromBottom' | 'slideFromLeft' | 'expandHeight' | 'expandWidth' | 'none';
+/** @public */
+type AnimationOnOpen = {
+    open: AnimationType;
+    close: 'none';
+};
+/** @public */
+type AnimationOnClose = {
+    open: 'none';
+    close: AnimationType;
+};
+type AnimationProp = AnimationType | AnimationOnOpen | AnimationOnClose;
 interface TransitionOpenPropsBase {
-    animation?: 'slideFromTop' | 'slideFromRight' | 'slideFromBottom' | 'slideFromLeft' | 'expandHeight' | 'expandWidth' | 'none';
+    /**
+     * The animation to use when opening and closing. Can be:
+     * - A string (e.g., 'expandHeight') to animate both open and close
+     * - An object with `{ open: AnimationType, close: 'none' }` to animate only when opening
+     * - An object with `{ open: 'none', close: AnimationType }` to animate only when closing
+     */
+    animation?: AnimationProp;
     animateOnMount?: boolean;
     children?: React.ReactNode;
     /** @private */
@@ -39,10 +58,16 @@ interface TransitionOpenPropsBase {
     takeFocus?: boolean;
 }
 type TransitionOpenProps = ComponentProps<TransitionOpenPropsBase, 'div'>;
-declare function TransitionOpen({ animation, animateOnMount, children, className, elementRef, id, innerClassName, innerStyle, onAnimationEnd, onAnimationStart, open: openProp, outerClassName, outerId, outerStyle, renderChildrenWhenCollapsed, retainFocus, takeFocus: takeFocusProp, ...otherProps }: TransitionOpenProps): React.JSX.Element;
+declare function TransitionOpen({ animation: animationProp, animateOnMount, children, className, elementRef, id, innerClassName, innerStyle, onAnimationEnd, onAnimationStart, open: openProp, outerClassName, outerId, outerStyle, renderChildrenWhenCollapsed, retainFocus, takeFocus: takeFocusProp, ...otherProps }: TransitionOpenProps): React.JSX.Element;
 declare namespace TransitionOpen {
     var propTypes: {
-        animation: PropTypes.Requireable<string>;
+        animation: PropTypes.Requireable<NonNullable<AnimationType | PropTypes.InferProps<{
+            open: PropTypes.Validator<NonNullable<AnimationType>>;
+            close: PropTypes.Validator<string>;
+        }> | PropTypes.InferProps<{
+            open: PropTypes.Validator<string>;
+            close: PropTypes.Validator<NonNullable<AnimationType>>;
+        }> | null | undefined>>;
         animateOnMount: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         elementRef: PropTypes.Requireable<object>;
@@ -62,4 +87,4 @@ declare namespace TransitionOpen {
     };
 }
 export default TransitionOpen;
-export { TransitionOpenPropsBase };
+export { AnimationType, AnimationOnOpen, AnimationOnClose, TransitionOpenPropsBase };

package/types/src/useKeyPress/index.d.ts

@@ -28,10 +28,17 @@
  *
  * @param {String} targetKey - The key value to listen to.
  * @param {Function} handler - A function invoked when the target key is pressed.
+ * @param {Object} [options] - An options object.
+ * @param {Boolean} [options.enabled=true] - Whether to enable the key listener.
+ * @param {String} [options.eventType='keyup'] - The keyboard event type to listen to.
  * @public
  */
 type KeyboardEventKeys = 'Unidentified' | 'Alt' | 'AltGraph' | 'CapsLock' | 'Control' | 'Fn' | 'FnLock' | 'Hyper' | 'Meta' | 'NumLock' | 'ScrollLock' | 'Shift' | 'Super' | 'Symbol' | 'SymbolLock' | 'Enter' | 'Tab' | ' ' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'End' | 'Home' | 'PageDown' | 'PageUp' | 'Backspace' | 'Clear' | 'Copy' | 'CrSel' | 'Cut' | 'Delete' | 'EraseEof' | 'ExSel' | 'Insert' | 'Paste' | 'Redo' | 'Undo' | 'Accept' | 'Again' | 'Attn' | 'Cancel' | 'ContextMenu' | 'Escape' | 'Execute' | 'Find' | 'Finish' | 'Help' | 'Pause' | 'Play' | 'Props' | 'Select' | 'ZoomIn' | 'ZoomOut' | 'BrightnessDown' | 'BrightnessUp' | 'Eject' | 'LogOff' | 'Power' | 'PowerOff' | 'PrintScreen' | 'Hibernate' | 'Standby' | 'WakeUp' | 'AllCandidates' | 'Alphanumeric' | 'CodeInput' | 'Compose' | 'Convert' | 'Dead' | 'FinalMode' | 'GroupFirst' | 'GroupLast' | 'GroupNext' | 'GroupPrevious' | 'ModeChange' | 'NextCandidate' | 'NonConvert' | 'PreviousCandidate' | 'Process' | 'SingleCandidate' | 'HangulMode' | 'HanjaMode' | 'JunjaMode' | 'Eisu' | 'Hankaku' | 'Hiragana' | 'HiraganaKatakana' | 'KanaMode' | 'KanjiMode' | 'Katakana' | 'Romaji' | 'Zenkaku' | 'ZenkakuHanaku' | 'F1' | 'F2' | 'F3' | 'F4' | 'F5' | 'F6' | 'F7' | 'F8' | 'F9' | 'F10' | 'F11' | 'F12' | 'F13' | 'F14' | 'F15' | 'F16' | 'F17' | 'F18' | 'F19' | 'F20' | 'Soft1' | 'Soft2' | 'Soft3' | 'Soft4' | 'AppSwitch' | 'Call' | 'Camera' | 'CameraFocus' | 'EndCall' | 'GoBack' | 'GoHome' | 'HeadsetHook' | 'LastNumberRedial' | 'Notification' | 'MannerMode' | 'VoiceDial' | 'ChannelDown' | 'ChannelUp' | 'MediaFastForward' | 'MediaPause' | 'MediaPlay' | 'MediaPlayPause' | 'MediaRecord' | 'MediaRewind' | 'MediaStop' | 'MediaTrackNext' | 'MediaTrackPrevious' | 'AudioBalanceLeft' | 'AudioBalanceRight' | 'AudioBassDown' | 'AudioBassBoostDown' | 'AudioBassBoostToggle' | 'AudioBassBoostUp' | 'AudioBassUp' | 'AudioFaderFront' | 'AudioFaderRear' | 'AudioSurroundModeNext' | 'AudioTrebleDown' | 'AudioTrebleUp' | 'AudioVolumeDown' | 'AudioVolumeMute' | 'AudioVolumeUp' | 'MicrophoneToggle' | 'MicrophoneVolumeDown' | 'MicrophoneVolumeMute' | 'MicrophoneVolumeUp' | 'TV' | 'TV3DMode' | 'TVAntennaCable' | 'TVAudioDescription' | 'TVAudioDescriptionMixDown' | 'TVAudioDescriptionMixUp' | 'TVContentsMenu' | 'TVDataService' | 'TVInput' | 'TVInputComponent1' | 'TVInputComponent2' | 'TVInputComposite1' | 'TVInputComposite2' | 'TVInputHDMI1' | 'TVInputHDMI2' | 'TVInputHDMI3' | 'TVInputHDMI4' | 'TVInputVGA1' | 'TVMediaContext' | 'TVNetwork' | 'TVNumberEntry' | 'TVPower' | 'TVRadioService' | 'TVSatellite' | 'TVSatelliteBS' | 'TVSatelliteCS' | 'TVSatelliteToggle' | 'TVTerrestrialAnalog' | 'TVTerrestrialDigital' | 'TVTimer' | 'AVRInput' | 'AVRPower' | 'ColorF0Red' | 'ColorF1Green' | 'ColorF2Yellow' | 'ColorF3Blue' | 'ColorF4Grey' | 'ColorF5Brown' | 'ClosedCaptionToggle' | 'Dimmer' | 'DisplaySwap' | 'DVR' | 'Exit' | 'FavoriteClear0' | 'FavoriteClear1' | 'FavoriteClear2' | 'FavoriteClear3' | 'FavoriteRecall0' | 'FavoriteRecall1' | 'FavoriteRecall2' | 'FavoriteRecall3' | 'FavoriteStore0' | 'FavoriteStore1' | 'FavoriteStore2' | 'FavoriteStore3' | 'Guide' | 'GuideNextDay' | 'GuidePreviousDay' | 'Info' | 'InstantReplay' | 'Link' | 'ListProgram' | 'LiveContent' | 'Lock' | 'MediaApps' | 'MediaAudioTrack' | 'MediaLast' | 'MediaSkipBackward' | 'MediaSkipForward' | 'MediaStepBackward' | 'MediaStepForward' | 'MediaTopMenu' | 'NavigateIn' | 'NavigateNext' | 'NavigateOut' | 'NavigatePrevious' | 'NextFavoriteChannel' | 'NextUserProfile' | 'OnDemand' | 'Pairing' | 'PinPDown' | 'PinPMove' | 'PinPToggle' | 'PinPUp' | 'PlaySpeedDown' | 'PlaySpeedReset' | 'PlaySpeedUp' | 'RandomToggle' | 'RcLowBattery' | 'RecordSpeedNext' | 'RfBypass' | 'ScanChannelsToggle' | 'ScreenModeNext' | 'Settings' | 'SplitScreenToggle' | 'STBInput' | 'STBPower' | 'Subtitle' | 'Teletext' | 'VideoModeNext' | 'Wink' | 'ZoomToggle' | 'SpeechCorrectionList' | 'SpeechInputToggle' | 'Close' | 'New' | 'Open' | 'Print' | 'Save' | 'SpellCheck' | 'MailForward' | 'MailReply' | 'MailSend' | 'LaunchCalculator' | 'LaunchCalendar' | 'LaunchContacts' | 'LaunchMail' | 'LaunchMediaPlayer' | 'LaunchMusicPlayer' | 'LaunchMyComputer' | 'LaunchPhone' | 'LaunchScreenSaver' | 'LaunchSpreadsheet' | 'LaunchWebBrowser' | 'LaunchWebCam' | 'LaunchWordProcessor' | 'LaunchApplication1' | 'LaunchApplication2' | 'LaunchApplication3' | 'LaunchApplication4' | 'LaunchApplication5' | 'LaunchApplication6' | 'LaunchApplication7' | 'LaunchApplication8' | 'LaunchApplication9' | 'LaunchApplication10' | 'LaunchApplication11' | 'LaunchApplication12' | 'LaunchApplication13' | 'LaunchApplication14' | 'LaunchApplication15' | 'LaunchApplication16' | 'BrowserBack' | 'BrowserFavorites' | 'BrowserForward' | 'BrowserHome' | 'BrowserRefresh' | 'BrowserSearch' | 'BrowserStop' | 'Decimal' | 'Key11' | 'Key12' | 'Multiply' | 'Add' | 'Clear' | 'Divide' | 'Subtract' | 'Separator' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
 type Handler = (event: Event) => void;
-export declare function useKeyPress(targetKey: KeyboardEventKeys, handler: Handler): void;
+interface UseKeyPressOptions {
+    enabled?: boolean;
+    eventType?: 'keydown' | 'keyup';
+}
+export declare function useKeyPress(targetKey: KeyboardEventKeys, handler: Handler, options?: UseKeyPressOptions): void;
 export default useKeyPress;
-export { Handler, KeyboardEventKeys };
+export { Handler, KeyboardEventKeys, UseKeyPressOptions };

package/types/src/useOnClickOutside/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './useOnClickOutside';
+export * from './useOnClickOutside';

package/types/src/useOnClickOutside/useOnClickOutside.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+type Handler = (event: MouseEvent | TouchEvent) => void;
+declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: React.RefObject<T>, handler: Handler, enabled?: boolean) => void;
+export default useOnClickOutside;

package/useKeyPress.js

@@ -8,12 +8,12 @@
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (t, n) => {
+            /******/ for (var r in n) {
+                /******/ if (e.o(n, r) && !e.o(t, r)) {
+                    /******/ Object.defineProperty(t, r, {
                         enumerable: true,
-                        get: r[n]
+                        get: n[r]
                     });
                     /******/                }
                 /******/            }
@@ -47,10 +47,10 @@
     // EXPORTS
         e.d(t, {
         default: () => /* binding */ o,
-        useKeyPress: () => /* binding */ n
+        useKeyPress: () => /* binding */ r
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
+    const n = require("react");
     // CONCATENATED MODULE: ./src/useKeyPress/index.ts
     /**
  * TargetKey is any key available via event.key: [https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key).
@@ -82,25 +82,30 @@
  *
  * @param {String} targetKey - The key value to listen to.
  * @param {Function} handler - A function invoked when the target key is pressed.
+ * @param {Object} [options] - An options object.
+ * @param {Boolean} [options.enabled=true] - Whether to enable the key listener.
+ * @param {String} [options.eventType='keyup'] - The keyboard event type to listen to.
  * @public
  */
-    function n(e, t) {
-        var n = (0, r.useCallback)((function(r) {
-            if (r.key === e) {
-                t(r);
-                r.preventDefault();
+    function r(e, t) {
+        var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+        var o = r.enabled, i = o === void 0 ? true : o, u = r.eventType, d = u === void 0 ? "keyup" : u;
+        var f = (0, n.useCallback)((function(n) {
+            if (n.key === e) {
+                t(n);
+                n.preventDefault();
             }
         }), [ t, e ]);
         // eslint-disable-next-line consistent-return
-                (0, r.useEffect)((function() {
-            if (typeof window !== "undefined") {
-                window.addEventListener("keyup", n);
+                (0, n.useEffect)((function() {
+            if (typeof window !== "undefined" && i) {
+                window.addEventListener(d, f);
                 return function() {
-                    window.removeEventListener("keyup", n);
+                    window.removeEventListener(d, f);
                 };
             }
-        }), [ n ]);
+        }), [ i, d, f ]);
     }
-    /* harmony default export */    const o = n;
+    /* harmony default export */    const o = r;
     module.exports = t;
     /******/})();

package/useOnClickOutside.d.ts

@@ -0,0 +1,2 @@
+export { default } from './types/src/useOnClickOutside';
+export * from './types/src/useOnClickOutside';