@splunk/react-ui 4.16.2 → 4.17.0

package/usePrevious.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 237);
+/******/ 	return __webpack_require__(__webpack_require__.s = 242);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -94,7 +94,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 237:
+/***/ 242:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/useRovingFocus.d.ts

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

package/useRovingFocus.js

@@ -0,0 +1,237 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 243);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 243:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ useRovingFocus_useRovingFocus; });
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2);
+
+// EXTERNAL MODULE: external "@splunk/ui-utils/focus"
+var focus_ = __webpack_require__(29);
+
+// EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
+var keyboard_ = __webpack_require__(7);
+
+// CONCATENATED MODULE: ./src/useRovingFocus/useRovingFocus.tsx
+
+
+
+
+function focusElement(element) {
+  if (element instanceof HTMLElement && element.focus) {
+    element.focus();
+  }
+}
+/**
+ * This is a private hook not intended for use outside @splunk/react-ui
+ *
+ * Handles "roving focus" for a group of elements inside a containing element.
+ * Elements inside the element that "rovingFocusProps" are set on will act a single tab stop
+ * with arrow keys moving focus between them.
+ * See https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets#managing_focus_inside_groups
+ *
+ * ```
+ * import React from 'react';
+ * import useRovingFocus from '@splunk/react-ui/useRovingFocus';
+ *
+ * const rovingFocusProps = useRovingFocus();
+ *
+ * <div {...rovingFocusProps}>
+ *     <button type="button">first</button>
+ *     <button type="button">second</button>
+ * </div>
+ * ```
+ */
+
+
+function useRovingFocus() {
+  var activeItemIndex = Object(external_react_["useRef"])(0);
+  var actionItemsRef = Object(external_react_["useRef"])([]);
+
+  var updateActiveItem = function updateActiveItem(newActiveindex) {
+    activeItemIndex.current = newActiveindex;
+    actionItemsRef.current.forEach(function (el, index) {
+      return index === activeItemIndex.current ? el.removeAttribute('tabindex') : el.setAttribute('tabindex', '-1');
+    });
+  };
+
+  var handleItemsMount = function handleItemsMount(element) {
+    actionItemsRef.current = element != null ? Object(focus_["getSortedTabbableElements"])(element, {
+      ignoreTabIndex: true
+    }) : [];
+    updateActiveItem(activeItemIndex.current);
+  };
+
+  var handleBlur = function handleBlur(e) {
+    var focusOnActionItem = e.relatedTarget instanceof Element && actionItemsRef.current.includes(e.relatedTarget);
+
+    if (!focusOnActionItem) {
+      updateActiveItem(0);
+    }
+  };
+
+  var handleFocus = function handleFocus(e) {
+    var focusIndex = e.target instanceof Element ? actionItemsRef.current.indexOf(e.target) : -1;
+
+    if (focusIndex >= 0) {
+      updateActiveItem(focusIndex);
+    }
+  };
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.nativeEvent.target instanceof HTMLElement) {
+      var index = actionItemsRef.current.indexOf(e.nativeEvent.target);
+
+      if (index >= 0) {
+        var key = Object(keyboard_["keycode"])(e.nativeEvent);
+        var newIndex = -1;
+
+        if (key === 'left') {
+          newIndex = index - 1;
+        } else if (key === 'right') {
+          newIndex = index + 1;
+        } else if (key === 'home') {
+          newIndex = 0;
+        } else if (key === 'end') {
+          newIndex = actionItemsRef.current.length - 1;
+        }
+
+        if (newIndex >= 0) {
+          e.preventDefault();
+          focusElement(actionItemsRef.current[newIndex]);
+        }
+      }
+    }
+  };
+
+  return {
+    ref: handleItemsMount,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown
+  };
+}
+
+/* harmony default export */ var useRovingFocus_useRovingFocus = (useRovingFocus);
+// CONCATENATED MODULE: ./src/useRovingFocus/index.ts
+
+
+
+/***/ }),
+
+/***/ 29:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/focus");
+
+/***/ }),
+
+/***/ 7:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/keyboard");
+
+/***/ })
+
+/******/ });

package/Dockerfile.enterprise.storybook

@@ -1,7 +0,0 @@
-FROM node:14.20 as builder
-
-WORKDIR /react-ui
-
-COPY storybook-static-visual-enterprise storybook-static-visual-enterprise
-
-EXPOSE 6008

package/Dockerfile.prisma.storybook

@@ -1,7 +0,0 @@
-FROM node:14.20 as builder
-
-WORKDIR /react-ui
-
-COPY storybook-static-visual storybook-static-visual
-
-EXPOSE 6007

package/Dockerfile.visual

@@ -1,10 +0,0 @@
-FROM  mcr.microsoft.com/playwright:v1.26.0-focal
-
-WORKDIR /react-ui
-
-COPY .storybook-visual/config/visual.package.json ./package.json
-
-RUN yarn install
-
-COPY . .
-

package/types/src/File/docs/examples/CustomChildren.d.ts

@@ -1,12 +0,0 @@
-import { Component } from 'react';
-import { FileRequestAddHandler } from '@splunk/react-ui/File';
-declare class CustomChildren extends Component<{}, {
-    filename?: string;
-}> {
-    private fileReader;
-    constructor(props: {});
-    handleAddFiles: FileRequestAddHandler;
-    handleRemoveFile: () => void;
-    render(): JSX.Element;
-}
-export default CustomChildren;

package/types/src/File/docs/examples/prisma/Progress.d.ts

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

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

@@ -1,12 +0,0 @@
-export interface MatchCharacter {
-    index: number;
-    value: string;
-}
-export interface MatchOption {
-    itemKey: string;
-    label: string;
-    value: string | number | boolean;
-}
-declare const charFromMatchOption: (option: MatchOption | null, charIndex: number) => string;
-declare const fuzzyMatch: (options: MatchOption[], matchChar: MatchCharacter) => MatchOption[];
-export { charFromMatchOption, fuzzyMatch };

package/types/src/SplitButton/docs/examples/prisma/Basic.d.ts

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

package/types/src/SplitButton/docs/examples/prisma/Disabled.d.ts

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

package/types/src/Table/HeadExpandRowsIcon.d.ts

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

package/types/src/icons/Alert.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function AlertFilled(props: IconProps): JSX.Element;

package/types/src/icons/AlertFilled.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function AlertFilled(props: IconProps): JSX.Element;

package/types/src/icons/CaretDown.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function CaretDown(props: IconProps): JSX.Element;

package/types/src/icons/CaretRight.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function CaretRight(props: IconProps): JSX.Element;

package/types/src/icons/Check.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function Check(props: IconProps): JSX.Element;

package/types/src/icons/ChevronDown.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function ChevronDown(props: IconProps): JSX.Element;

package/types/src/icons/ChevronLeft.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function ChevronLeft(props: IconProps): JSX.Element;

package/types/src/icons/ChevronRight.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function ChevronRight(props: IconProps): JSX.Element;

package/types/src/icons/CrossMark.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function CrossMark(props: IconProps): JSX.Element;

package/types/src/icons/External.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function External(props: IconProps): JSX.Element;

package/types/src/icons/InfoFilled.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function InfoFilled(props: IconProps): JSX.Element;

package/types/src/icons/More.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function More(props: IconProps): JSX.Element;

package/types/src/icons/MoreVertical.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function MoreVertical(props: IconProps): JSX.Element;

package/types/src/icons/Plus.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function Plus(props: IconProps): JSX.Element;

package/types/src/icons/SVG.d.ts

@@ -1,4 +0,0 @@
-import { ComponentProps } from '../utils/types';
-declare type SVGProps = ComponentProps<{}, 'svg'>;
-export default function SVG(props: SVGProps): JSX.Element;
-export {};

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

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function Search(props: IconProps): JSX.Element;

package/types/src/icons/Sort.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function CaretDown(props: IconProps): JSX.Element;

package/types/src/icons/SortedDown.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function SortedDown(props: IconProps): JSX.Element;

package/types/src/icons/SortedUp.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function SortedUp(props: IconProps): JSX.Element;

package/types/src/icons/Success.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function SuccessFilled(props: IconProps): JSX.Element;

package/types/src/icons/SuccessFilled.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function SuccessFilled(props: IconProps): JSX.Element;

package/types/src/icons/ThemedIcon.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { IconProps } from './types';
-interface ThemedIconProps extends IconProps {
-    Enterprise: React.FunctionComponent<any>;
-    Prisma24: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-    Prisma20?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-    Prisma16?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-}
-declare function Icon({ Enterprise, Prisma24, Prisma20, Prisma16, prismaSize, inline, enterpriseSize, enterpriseWidth, enterpriseHeight, screenReaderText, ...otherProps }: ThemedIconProps): JSX.Element;
-declare namespace Icon {
-    var propTypes: {
-        Enterprise: PropTypes.Requireable<(...args: any[]) => any>;
-        enterpriseSize: PropTypes.Requireable<React.ReactText>;
-        enterpriseWidth: PropTypes.Requireable<React.ReactText>;
-        enterpriseHeight: PropTypes.Requireable<React.ReactText>;
-        Prisma24: PropTypes.Validator<(...args: any[]) => any>;
-        Prisma20: PropTypes.Requireable<(...args: any[]) => any>;
-        Prisma16: PropTypes.Requireable<(...args: any[]) => any>;
-        prismaSize: PropTypes.Requireable<string>;
-        inline: PropTypes.Requireable<boolean>;
-        screenReaderText: PropTypes.Requireable<string>;
-    };
-    var defaultProps: {
-        inline: boolean;
-        prismaSize: string;
-    };
-}
-export default Icon;

package/types/src/icons/WarningFilled.d.ts

@@ -1,2 +0,0 @@
-import { IconProps } from './types';
-export default function WarningFilled(props: IconProps): JSX.Element;

package/types/src/icons/types.d.ts

@@ -1,11 +0,0 @@
-import { ComponentProps } from '../utils/types';
-interface IconPropsBase {
-    enterpriseSize?: number | string;
-    enterpriseWidth?: number | string;
-    enterpriseHeight?: number | string;
-    prismaSize?: 'medium' | 'small';
-    inline?: boolean;
-    screenReaderText?: string;
-}
-export declare type IconProps = ComponentProps<IconPropsBase, 'svg'>;
-export {};