@splunk/react-ui 4.16.3 → 4.17.0

package/Tooltip.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 201);
+/******/ 	return __webpack_require__(__webpack_require__.s = 209);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,28 +101,21 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 11:
+/***/ 10:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/has");
 
 /***/ }),
 
-/***/ 13:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/id");
-
-/***/ }),
-
-/***/ 14:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 16:
+/***/ 14:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScreenReaderContent");
@@ -136,7 +129,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 201:
+/***/ 209:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -155,7 +148,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/has"
-var has_ = __webpack_require__(11);
+var has_ = __webpack_require__(10);
 var has_default = /*#__PURE__*/__webpack_require__.n(has_);
 
 // EXTERNAL MODULE: external "lodash/throttle"
@@ -163,25 +156,25 @@ var throttle_ = __webpack_require__(31);
 var throttle_default = /*#__PURE__*/__webpack_require__.n(throttle_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(23);
+var Popover_ = __webpack_require__(21);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(16);
+var ScreenReaderContent_ = __webpack_require__(14);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(13);
+var id_ = __webpack_require__(8);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(4);
 
-// EXTERNAL MODULE: external "@splunk/react-icons/SVG"
-var SVG_ = __webpack_require__(32);
-var SVG_default = /*#__PURE__*/__webpack_require__.n(SVG_);
+// EXTERNAL MODULE: external "@splunk/react-icons/SVGEnterprise"
+var SVGEnterprise_ = __webpack_require__(32);
+var SVGEnterprise_default = /*#__PURE__*/__webpack_require__.n(SVGEnterprise_);
 
 // CONCATENATED MODULE: ./src/Tooltip/InfoIcon.tsx
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -197,7 +190,7 @@ function InfoCircle(props) {
       density = _useSplunkTheme.density;
 
   if (family === 'enterprise') {
-    return /*#__PURE__*/external_react_default.a.createElement(SVG_default.a, _extends({
+    return /*#__PURE__*/external_react_default.a.createElement(SVGEnterprise_default.a, _extends({
       screenReaderText: Object(i18n_["_"])('Info Circle'),
       viewBox: "0 0 24 24"
     }, props), /*#__PURE__*/external_react_default.a.createElement("path", {
@@ -228,7 +221,7 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(14);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // CONCATENATED MODULE: ./src/Tooltip/TooltipStyles.ts
@@ -696,7 +689,7 @@ TooltipWithTheme.propTypes = Tooltip_Tooltip.propTypes;
 
 /***/ }),
 
-/***/ 23:
+/***/ 21:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Popover");
@@ -720,7 +713,7 @@ module.exports = require("lodash/throttle");
 /***/ 32:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/SVG");
+module.exports = require("@splunk/react-icons/SVGEnterprise");
 
 /***/ }),
 
@@ -729,6 +722,13 @@ module.exports = require("@splunk/react-icons/SVG");
 
 module.exports = require("@splunk/ui-utils/i18n");
 
+/***/ }),
+
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
 /***/ })
 
 /******/ });

package/TransitionOpen.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 229);
+/******/ 	return __webpack_require__(__webpack_require__.s = 234);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,13 +101,6 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 10:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/keys");
-
-/***/ }),
-
 /***/ 2:
 /***/ (function(module, exports) {
 
@@ -115,7 +108,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 229:
+/***/ 234:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -134,7 +127,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/keys"
-var keys_ = __webpack_require__(10);
+var keys_ = __webpack_require__(9);
 var keys_default = /*#__PURE__*/__webpack_require__.n(keys_);
 
 // EXTERNAL MODULE: external "lodash/omit"
@@ -142,16 +135,16 @@ var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Animation"
-var Animation_ = __webpack_require__(43);
+var Animation_ = __webpack_require__(40);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
-var focus_ = __webpack_require__(35);
+var focus_ = __webpack_require__(29);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/style"
-var style_ = __webpack_require__(40);
+var style_ = __webpack_require__(37);
 
 // EXTERNAL MODULE: external "react-spring"
-var external_react_spring_ = __webpack_require__(26);
+var external_react_spring_ = __webpack_require__(24);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -510,35 +503,35 @@ _defineProperty(TransitionOpen_TransitionOpen, "getDerivedStateFromProps", funct
 
 /***/ }),
 
-/***/ 26:
+/***/ 24:
 /***/ (function(module, exports) {
 
 module.exports = require("react-spring");
 
 /***/ }),
 
-/***/ 3:
+/***/ 29:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("@splunk/ui-utils/focus");
 
 /***/ }),
 
-/***/ 35:
+/***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/focus");
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 40:
+/***/ 37:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/style");
 
 /***/ }),
 
-/***/ 43:
+/***/ 40:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Animation");
@@ -550,6 +543,13 @@ module.exports = require("@splunk/react-ui/Animation");
 
 module.exports = require("lodash/omit");
 
+/***/ }),
+
+/***/ 9:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/keys");
+
 /***/ })
 
 /******/ });

package/Typography.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 235);
+/******/ 	return __webpack_require__(__webpack_require__.s = 240);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 235:
+/***/ 240:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -120,12 +120,8 @@ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_)
 var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
-// EXTERNAL MODULE: external "lodash/pick"
-var pick_ = __webpack_require__(34);
-var pick_default = /*#__PURE__*/__webpack_require__.n(pick_);
-
 // EXTERNAL MODULE: external "@splunk/themes/mixins"
-var mixins_ = __webpack_require__(80);
+var mixins_ = __webpack_require__(79);
 var mixins_default = /*#__PURE__*/__webpack_require__.n(mixins_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -143,7 +139,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
-
 var propTypes = {
   children: external_prop_types_default.a.node.isRequired,
   as: external_prop_types_default.a.string.isRequired,
@@ -156,15 +151,6 @@ var propTypes = {
   weight: external_prop_types_default.a.oneOf([300, 400, 500, 600, 700, 800, 900, 'light', 'normal', 'semiBold', 'bold', 'extraBold', 'heavy']),
   withReset: external_prop_types_default.a.bool
 };
-var paramsToExtract = {
-  family: true,
-  size: true,
-  lineHeight: true,
-  color: true,
-  weight: true,
-  withReset: true
-};
-var keys = Object.keys(paramsToExtract);
 var StyledTypography = external_styled_components_default.a.p.withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "cgxs34-0"
@@ -173,6 +159,15 @@ var StyledTypography = external_styled_components_default.a.p.withConfig({
       $typographyParams = _ref.$typographyParams;
   return $variant ? mixins_default.a.typography($variant, $typographyParams) : mixins_default.a.typography($typographyParams);
 });
+var weightNumberToWeightVariable = {
+  300: 'light',
+  400: 'normal',
+  500: 'semiBold',
+  600: 'semiBold',
+  700: 'bold',
+  800: 'extraBold',
+  900: 'heavy'
+};
 /**
  * Typography renders text content with styling based on the Splunk Design System.
  */
@@ -181,11 +176,27 @@ function Typography(_ref2) {
   var children = _ref2.children,
       as = _ref2.as,
       elementRef = _ref2.elementRef,
-      otherProps = _objectWithoutProperties(_ref2, ["children", "as", "elementRef"]);
+      variant = _ref2.variant,
+      family = _ref2.family,
+      size = _ref2.size,
+      lineHeight = _ref2.lineHeight,
+      color = _ref2.color,
+      weight = _ref2.weight,
+      withReset = _ref2.withReset,
+      otherProps = _objectWithoutProperties(_ref2, ["children", "as", "elementRef", "variant", "family", "size", "lineHeight", "color", "weight", "withReset"]);
 
   // @docs-props-type TypographyPropsBase
-  var variant = otherProps.variant;
-  var typographyParams = pick_default()(otherProps, keys);
+  // TODO: Remove in next major version (SUI-5350)
+  if (false) {}
+
+  var typographyParams = {
+    family: family,
+    size: size,
+    lineHeight: lineHeight,
+    color: color,
+    withReset: withReset,
+    weight: typeof weight === 'number' ? weightNumberToWeightVariable[weight] : weight
+  };
   return /*#__PURE__*/external_react_default.a.createElement(StyledTypography, _extends({
     as: as,
     ref: elementRef,
@@ -209,14 +220,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 34:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/pick");
-
-/***/ }),
-
-/***/ 80:
+/***/ 79:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/mixins");

package/WaitSpinner.js

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

package/docker-compose.yml

@@ -3,21 +3,31 @@ services:
   prisma-storybook:
     build: 
       context: .
-      dockerfile: Dockerfile.prisma.storybook
-    command: npx http-server storybook-static-visual --port 6007
+      dockerfile: ../../infra/visual-tests/Dockerfile.storybook
+      args:
+        port: 6007
+        storybookfolder: storybook-static-visual-prisma
+        workdir: /react-ui
+    command: npx http-server storybook-static-visual-prisma --port 6007
     ports:
       - "6007:6007"
   enterprise-storybook:
     build: 
       context: .
-      dockerfile: Dockerfile.enterprise.storybook
+      dockerfile: ../../infra/visual-tests/Dockerfile.storybook
+      args:
+        port: 6008
+        storybookfolder: storybook-static-visual-enterprise
+        workdir: /react-ui
     command: npx http-server storybook-static-visual-enterprise --port 6008
     ports:
       - "6008:6008"
   prisma-visual-test:
     build: 
       context: .
-      dockerfile: Dockerfile.visual
+      dockerfile: ../../infra/visual-tests/Dockerfile.visual
+      args:
+        workdir: /react-ui
     env_file:
       - ./.storybook-visual/config/.env.visual
     working_dir: /react-ui
@@ -26,11 +36,13 @@ services:
       - "./test-reports:/react-ui/test-reports"
     depends_on:
       - prisma-storybook
-    command: /bin/sh -c "npx wait-on http://prisma-storybook:6007 && yarn cache clean && yarn test-storybook -c .storybook-visual --browsers $${STORYBOOK_BROWSER} $${STORYBOOK_UPDATE_SNAPSHOT} --url http://prisma-storybook:6007 --no-index-json"
+    command: /bin/sh -c "npx wait-on http://prisma-storybook:6007 && yarn cache clean && yarn test-storybook -c .storybook-visual --browsers $${STORYBOOK_BROWSER} $${STORYBOOK_UPDATE_SNAPSHOT} $${STORYBOOK_MAX_WORKERS} --url http://prisma-storybook:6007 --no-index-json"
   enterprise-visual-test:
     build: 
       context: .
-      dockerfile: Dockerfile.visual
+      dockerfile: ../../infra/visual-tests/Dockerfile.visual
+      args:
+        workdir: /react-ui
     env_file:
       - ./.storybook-visual/config/.env.visual
     working_dir: /react-ui
@@ -39,4 +51,4 @@ services:
       - "./test-reports:/react-ui/test-reports"
     depends_on:
       - enterprise-storybook
-    command: /bin/sh -c "npx wait-on http://enterprise-storybook:6008 && yarn cache clean && yarn test-storybook -c .storybook-visual --browsers $${STORYBOOK_BROWSER} $${STORYBOOK_UPDATE_SNAPSHOT} --url http://enterprise-storybook:6008 --no-index-json"
+    command: /bin/sh -c "npx wait-on http://enterprise-storybook:6008 && yarn cache clean && yarn test-storybook -c .storybook-visual --browsers $${STORYBOOK_BROWSER} $${STORYBOOK_UPDATE_SNAPSHOT} $${STORYBOOK_MAX_WORKERS} --url http://enterprise-storybook:6008 --no-index-json"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.16.3",
+  "version": "4.17.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -18,10 +18,10 @@
     "lint:ci": "yarn run eslint:ci && yarn run stylelint",
     "start": "cross-env NODE_ENV=development webpack --watch",
     "storybook": "start-storybook -p 6006",
-    "storybook:test": "./.storybook-visual/scripts/test.sh",
-    "storybook:test:all": "./.storybook-visual/scripts/test.sh --all",
-    "storybook:a11y": "./.storybook-visual/scripts/test.sh --a11y",
-    "storybook:a11y:all": "./.storybook-visual/scripts/test.sh --a11y --all",
+    "storybook:test": "node ../../infra/visual-tests/test.js",
+    "storybook:test:all": "yarn storybook:test --all",
+    "storybook:a11y": "yarn storybook:test --a11y",
+    "storybook:a11y:all": "yarn storybook:test --all --a11y",
     "storybook:build": "yarn build-storybook",
     "stylelint": "stylelint \"src/**/*.{ts,tsx,js,jsx}\" --config stylelint.config.js",
     "test": "jest",
@@ -38,9 +38,9 @@
     "styled-components": "5.1.1"
   },
   "dependencies": {
-    "@splunk/react-icons": "3.3.1",
-    "@splunk/themes": "^0.15.0",
-    "@splunk/ui-utils": "^1.5.2",
+    "@splunk/react-icons": "^4.0.0",
+    "@splunk/themes": "^0.16.0",
+    "@splunk/ui-utils": "^1.6.0",
     "@types/commonmark": "^0.27.0",
     "@types/lodash": "^4.14.156",
     "@types/react": "^16.9.38",
@@ -67,12 +67,11 @@
     "@cypress/webpack-dev-server": "^1.8.2",
     "@splunk/babel-preset": "^3.0.0",
     "@splunk/cicd-tools": "^0.5.0",
-    "@splunk/docs-gen": "1.0.0-beta.2",
+    "@splunk/docs-gen": "1.0.0-beta.4",
     "@splunk/eslint-config": "^4.0.0",
-    "@splunk/react-docs": "1.0.0-beta.2",
+    "@splunk/react-docs": "1.0.0-beta.4",
     "@splunk/stylelint-config": "^4.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
-    "@splunk/wdio-functional-test-runner": "^10.1.0",
     "@splunk/webpack-configs": "^6.0.0",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",

package/stubs-splunkui.d.ts

@@ -32,7 +32,10 @@ declare module '@splunk/ui-utils/format' {
 declare module '@splunk/ui-utils/focus' {
     // getSortedTabbableElements returns Elements
     // handleTab / takeFocus both call focus() which exists only on HTMLElement/SVGElement (modern browsers), but not Element
-    function getSortedTabbableElements(container: Element): Element[];
+    function getSortedTabbableElements(
+        container: Element,
+        options?: { ignoreTabIndex: boolean }
+    ): Element[];
     function isTabKey(event: KeyboardEvent<Element>): boolean;
     function handleTab(container: Element, event: KeyboardEvent): Element | null;
     function takeFocus(container: Element, defaultElement?: 'first' | 'container'): Element | null;

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

@@ -0,0 +1,2 @@
+declare const CaretSmallDown: () => JSX.Element;
+export default CaretSmallDown;

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

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

package/types/src/Code/Code.d.ts

@@ -16,6 +16,10 @@ interface CodePropsBase {
      * Applies syntax highlighting for a specific programming language.
      */
     language?: CodeSupportedLanguages;
+    /**
+     * In cases where `language` is not valid `Code` will use this value as the fallback for `language`.
+     */
+    languageFallback?: CodeSupportedLanguages;
     /**
      * Displays the indent guideline.
      */
@@ -26,12 +30,13 @@ interface CodePropsBase {
     value?: string;
 }
 declare type CodeProps = ComponentProps<CodePropsBase, 'pre'>;
-declare function Code({ elementRef, indentChars, language, showIndentGuide, value, ...otherProps }: CodeProps): JSX.Element;
+declare function Code({ elementRef, indentChars, language, languageFallback, showIndentGuide, value, ...otherProps }: CodeProps): JSX.Element;
 declare namespace Code {
     var propTypes: {
         elementRef: PropTypes.Requireable<object>;
         indentChars: PropTypes.Requireable<number>;
         language: PropTypes.Requireable<string>;
+        languageFallback: PropTypes.Requireable<string>;
         showIndentGuide: PropTypes.Requireable<boolean>;
         value: PropTypes.Requireable<string>;
     };

package/types/src/CollapsiblePanel/CollapsiblePanel.d.ts

@@ -75,7 +75,6 @@ interface CollapsiblePanelPropsBase {
     title: React.ReactNode;
     /**
      * Renders toggle button separate from `title`, allowing `title` to contain interactive elements.
-     * @includeTheme prisma
      */
     titleWithActions?: boolean;
 }

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

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+interface ChevronRightIconProps {
+    open?: boolean;
+}
+declare const ChevronRight: {
+    ({ open }: ChevronRightIconProps): JSX.Element;
+    propTypes: {
+        open: PropTypes.Requireable<boolean>;
+    };
+};
+export default ChevronRight;

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

@@ -1,2 +1,2 @@
-import { SVGPropsOptionalViewBox } from '@splunk/react-icons/SVG';
+import { SVGPropsOptionalViewBox } from '@splunk/react-icons/SVGEnterprise';
 export default function CalendarIcon(props: SVGPropsOptionalViewBox): JSX.Element;

package/types/src/Dropdown/docs/examples/Submenu.d.ts

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

package/types/src/DualListbox/DualListbox.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import Option from './Option';
+import { ComponentProps } from '../utils/types';
+/** @public */
+declare type DualListboxSelectHandler = (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLUListElement>, data: {
+    /**
+     * The list `name` associated to the batch action.
+     */
+    listName: string;
+    /**
+     * The values marked as selected with the given list.
+     */
+    values: string[];
+}) => void;
+/** @public */
+declare type DualListboxChangeHandler = (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLUListElement>, data: {
+    /**
+     * The values being changed.
+     */
+    affectedValues: string[];
+    /**
+     * The a11y text describing the move action.
+     * If `controlled="true"` the presentation of the text MUST be implemented by the consumer.
+     */
+    screenReaderMessage: string;
+    /**
+     * The list `name` associated to the source of the move action.
+     */
+    sourceListName: string;
+    /**
+     * The values now contained within the source list.
+     */
+    sourceValues: string[];
+    /**
+     * The list `name` associated to the target of the move action.
+     */
+    targetListName: string;
+    /**
+     * The values now contained within the target list.
+     */
+    targetValues: string[];
+}) => void;
+declare type ListboxConfig = {
+    name: string;
+    label: string;
+};
+interface DualListboxPropsBase {
+    /**
+     * All children must be instances of `DualListbox.Option`.
+     */
+    children?: React.ReactNode;
+    /**
+     * When true, `Options`'s `listName` and `selected` state props are fully controlled.
+     */
+    controlled?: boolean;
+    /**
+     * When true, fill height and width of the relative parent container.
+     */
+    fill?: boolean;
+    /**
+     * When false, display as inline-block with the default width.
+     * Ignored if `fill=true` set.
+     */
+    inline?: boolean;
+    /**
+     * List identifiers.
+     * `name` should map to child `Option`s `listName` prop, and will be returned with event calls.
+     * `label` will be used for visual and assistive text.
+     */
+    lists: ListboxConfig[];
+    /**
+     * Callback for selected options moving from one list to another.
+     */
+    onChange?: DualListboxChangeHandler;
+    /**
+     * Callback for single selected/de-select actions.
+     */
+    onSelect?: DualListboxSelectHandler;
+}
+declare type DualListboxProps = ComponentProps<DualListboxPropsBase, 'div'>;
+declare function DualListbox({ children, controlled, fill, inline, onChange, onSelect, lists, ...otherProps }: DualListboxProps): JSX.Element;
+declare namespace DualListbox {
+    var propTypes: React.WeakValidationMap<DualListboxPropsBase>;
+    var Option: typeof import("./Option").default;
+}
+export default DualListbox;
+export { DualListboxChangeHandler, DualListboxSelectHandler, DualListboxProps, DualListboxPropsBase, Option, };