@splunk/react-ui 4.7.0 → 4.8.0

package/CHANGELOG.md

@@ -1,6 +1,15 @@
 Change Log
 ============
 
+4.8.0 - May 20, 2022
+----------
+New Features:
+* Added `startAdornment` and `endAdornment` props to `RadioBar.Option` (SUI-3505).
+
+Deprecation:
+* `RadioBar.Option`s `icon` prop is deprecated and will be removed in a future major version. Use `startAdornment` or `endAdornment` instead (SUI-3505).
+* `RadioBar`s `appearance` prop is deprecated and will be removed in a future major version (SUI-3505).
+
 4.7.0 - May 4, 2022
 ----------
 New Features:
@@ -15,6 +24,7 @@ Bug Fixes:
 * `Select`'s options should no longer be clickable while it's collapsing (SUI-3337).
 * `Menu`s should now correctly manage focus if the first item is disabled (SUI-3468).
 * `Message`'s `appearance="banner"` renders with an icon for improved accessibility (SUI-3526).
+* `Modal` will now correctly gain focus when created with `open=true` (SUI-3412). 
 
 Deprecations: 
 * `Message`'s `appearance="banner"`is deprecated and will be removed in a future major version. Use `MessageBar` instead (SUI-3437).

package/Clickable.js

@@ -326,6 +326,7 @@ var Clickable_Clickable = /*#__PURE__*/function (_Component) {
 
           providedOnClick(e, {
             to: getPrefixedURL(_this.props.to, prefix),
+            originalTo: _this.props.to,
             openInNewContext: _this.props.openInNewContext,
             label: label
           });

package/RadioBar.js

@@ -156,7 +156,7 @@ var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 var StyledClickable = external_styled_components_default()(Clickable_default.a).withConfig({
   displayName: "OptionStyles__StyledClickable",
   componentId: "fyq77p-0"
-})(["border-radius:3px;flex:1 1 auto;display:flex;justify-content:center;align-items:center;color:", ";padding:2px 12px;height:calc(", " - 6px);position:relative;& + &{margin-left:2px;}", " ", " &:focus{color:", ";box-shadow:", ";z-index:2;&:active{background-color:", ";}}", " ", ""], themes_["variables"].contentColorDefault, themes_["variables"].inputHeight, function (_ref) {
+})(["border-radius:3px;flex:1 1 auto;display:flex;justify-content:center;align-items:center;color:", ";padding:2px 12px;height:calc(", " - 6px);position:relative;gap:8px;& + &{margin-left:2px;}", " ", " &:focus{color:", ";box-shadow:", ";z-index:2;&:active{background-color:", ";}}", " ", ""], themes_["variables"].contentColorDefault, themes_["variables"].inputHeight, function (_ref) {
   var $selected = _ref.$selected;
   return $selected && Object(external_styled_components_["css"])(["color:", ";background-color:", ";box-shadow:", ";"], themes_["variables"].contentColorActive, Object(themes_["pick"])({
     dark: 'rgba(255, 255, 255, 0.2)',
@@ -181,7 +181,13 @@ var StyledIcon = external_styled_components_default.a.div.withConfig({
 var StyledLabel = external_styled_components_default.a.div.withConfig({
   displayName: "OptionStyles__StyledLabel",
   componentId: "fyq77p-2"
-})(["flex:0 1 auto;", " &:not(:first-child){margin-left:8px;}"], themes_["mixins"].ellipsis);
+})(["flex:0 1 auto;", " padding:", ";&:not(:first-child){margin-left:8px;}"], themes_["mixins"].ellipsis, Object(themes_["pick"])({
+  enterprise: '0 12px'
+}));
+var StyledAdornment = external_styled_components_default.a.div.withConfig({
+  displayName: "OptionStyles__StyledAdornment",
+  componentId: "fyq77p-3"
+})(["flex:0 0 auto;"]);
 
 // CONCATENATED MODULE: ./src/RadioBar/RadioBarContext.tsx
 
@@ -202,6 +208,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var propTypes = {
   disabled: external_prop_types_default.a.bool,
+  startAdornment: external_prop_types_default.a.node,
+  endAdornment: external_prop_types_default.a.node,
   icon: external_prop_types_default.a.node,
   label: external_prop_types_default.a.string,
 
@@ -214,11 +222,13 @@ var propTypes = {
 
 function Option(_ref) {
   var disabled = _ref.disabled,
-      label = _ref.label,
       icon = _ref.icon,
+      label = _ref.label,
       selected = _ref.selected,
+      startAdornment = _ref.startAdornment,
+      endAdornment = _ref.endAdornment,
       value = _ref.value,
-      otherProps = _objectWithoutProperties(_ref, ["disabled", "label", "icon", "selected", "value"]);
+      otherProps = _objectWithoutProperties(_ref, ["disabled", "icon", "label", "selected", "startAdornment", "endAdornment", "value"]);
 
   // @docs-props-type OptionPropsBase
   var _useContext = Object(external_react_["useContext"])(RadioBar_RadioBarContext),
@@ -226,6 +236,8 @@ function Option(_ref) {
       appearanceContext = _useContext.appearance,
       errorContext = _useContext.error;
 
+  if (false) {}
+
   if (appearanceContext === 'prisma') {
     return /*#__PURE__*/external_react_default.a.createElement(StyledClickable, _extends({
       "data-test": "option",
@@ -242,7 +254,7 @@ function Option(_ref) {
       $selected: selected,
       tabIndex: selected ? -1 : undefined,
       disabled: disabled
-    }), icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, null, icon), label && /*#__PURE__*/external_react_default.a.createElement(StyledLabel, null, label));
+    }), icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, null, icon), startAdornment && /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, null, startAdornment), label && /*#__PURE__*/external_react_default.a.createElement(StyledLabel, null, label), endAdornment && /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, null, endAdornment));
   }
 
   return /*#__PURE__*/external_react_default.a.createElement(Button_default.a, _extends({
@@ -250,7 +262,6 @@ function Option(_ref) {
     "data-test-value": value,
     appearance: appearanceContext,
     disabled: disabled,
-    label: label,
     icon: icon,
     selected: selected,
     value: value,
@@ -265,7 +276,7 @@ function Option(_ref) {
     role: "radio",
     "aria-checked": selected,
     tabIndex: selected ? -1 : undefined
-  }));
+  }), startAdornment && /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, null, startAdornment), label && /*#__PURE__*/external_react_default.a.createElement(StyledLabel, null, label), endAdornment && /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, null, endAdornment));
 }
 
 Option.propTypes = propTypes;
@@ -331,7 +342,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 /** @public */
 
 var RadioBar_propTypes = {
-  appearance: external_prop_types_default.a.oneOf(['default', 'pill', 'flat']),
+  appearance: external_prop_types_default.a.oneOf(['default', 'pill']),
   children: external_prop_types_default.a.node,
   defaultValue: external_prop_types_default.a.any,
   describedBy: external_prop_types_default.a.string,
@@ -426,6 +437,8 @@ var RadioBar_RadioBar = /*#__PURE__*/function (_Component) {
           value = _this$props2.value,
           otherProps = RadioBar_objectWithoutProperties(_this$props2, ["appearance", "children", "describedBy", "error", "labelledBy", "splunkTheme", "value"]);
 
+      if (false) {}
+
       var selectedValue = this.isControlled() ? value : this.state.value;
       var isPrisma = splunkTheme.isPrisma;
       var disabled = true;

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --bail && yarn types:build && yarn build-storybook",
+    "build": "cross-env NODE_ENV=production webpack && yarn types:build && yarn build-storybook",
+    "docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
+    "docs:start": "webpack serve --config docs.gen.webpack.config.js",
     "eslint": "eslint src .storybook --ext \".ts,.tsx,.js,.jsx\"",
     "eslint:fix": "yarn run eslint --fix",
     "eslint:ci": "yarn run eslint -f junit -o test-reports/lint-results.xml",
@@ -26,7 +28,7 @@
     "test:cypress:ci": "yarn cypress run-ct",
     "test:visual:cloud": "splunk-wdio-functional-test-runner functional.visual.conf.js",
     "types:build": "tsc --emitDeclarationOnly --declaration --declarationDir ./types && node ./scripts/pruneTypes.js",
-    "types:start": "tsc --emitDeclarationOnly --declaration --declarationDir ./types --watch"
+    "types:start": "yarn types:build --watch"
   },
   "peerDependencies": {
     "react": "^16.8",
@@ -61,7 +63,9 @@
     "@cypress/react": "^5.12.4",
     "@cypress/webpack-dev-server": "^1.8.2",
     "@splunk/babel-preset": "^3.0.0",
+    "@splunk/docs-gen": "^0.11.1",
     "@splunk/eslint-config": "^4.0.0",
+    "@splunk/react-docs": "^0.11.0",
     "@splunk/stylelint-config": "^4.0.0",
     "@splunk/test-runner-utils": "^0.4.0",
     "@splunk/wdio-functional-test-runner": "^10.1.0",
@@ -94,6 +98,7 @@
     "cross-env": "^6.0.3",
     "cypress": "^9.5.1",
     "cypress-real-events": "^1.7.0",
+    "docgen-loader": "^1.3.4",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^7.14.0",
@@ -116,6 +121,7 @@
     "prompt": "^1.0.0",
     "raw-loader": "^0.5.1",
     "react": "^16.12.0",
+    "react-docgen": "^5.4.0",
     "react-dom": "^16.12.0",
     "react-test-renderer": "^16.13.1",
     "sinon": "^2.1.0",
@@ -125,7 +131,7 @@
     "typescript": "^4.0.5",
     "wdio-image-comparison-service": "^1.9.0",
     "webpack": "^4.16.2",
-    "webpack-cli": "^3.1.0",
+    "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^4.1.3"
   },

package/stubs-splunkui.d.ts

@@ -1,6 +1,7 @@
 declare const __DEV__: boolean;
 declare const __EXAMPLES__: any;
 declare const __OPTIONS__: any;
+declare const __EXAMPLES_OFFSET__: number;
 
 declare module '__FONTS_IMPORT__/*' {
     const component: string;

package/types/src/Accordion/docs/examples/Controlled.d.ts

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

package/types/src/Accordion/docs/examples/FixedHeight.d.ts

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

package/types/src/Accordion/docs/examples/InDropdown.d.ts

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

package/types/src/Accordion/docs/examples/Inset.d.ts

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

package/types/src/Accordion/docs/examples/Uncontrolled.d.ts

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

package/types/src/Anchor/docs/examples/Basic.d.ts

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

package/types/src/AnimationToggle/docs/examples/Provider.d.ts

@@ -0,0 +1,11 @@
+import { Component } from 'react';
+declare class Provider extends Component<{}, {
+    animatedTransitions: boolean;
+    open: boolean;
+}> {
+    constructor(props: {});
+    handleButtonClick: () => void;
+    handleSwitchClick: () => void;
+    render(): JSX.Element;
+}
+export default Provider;

package/types/src/AnimationToggle/docs/examples/ReducedMotionComponent.d.ts

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

package/types/src/AnimationToggle/docs/examples/ReducedMotionHook.d.ts

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

package/types/src/AnimationToggle/docs/examples/ToggleComponent.d.ts

@@ -0,0 +1,9 @@
+import { Component } from 'react';
+declare class ToggleComponent extends Component<{}, {
+    animatedTransitions: boolean;
+}> {
+    constructor(props: {});
+    handleSwitchClick: () => void;
+    render(): JSX.Element;
+}
+export default ToggleComponent;

package/types/src/AnimationToggle/docs/examples/ToggleHook.d.ts

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

package/types/src/Button/docs/examples/Basic.d.ts

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

package/types/src/Button/docs/examples/Block.d.ts

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

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

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

package/types/src/Button/docs/examples/Icons.d.ts

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

package/types/src/Button/docs/examples/Menus.d.ts

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

package/types/src/Button/docs/examples/Selected.d.ts

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

package/types/src/Button/docs/examples/To.d.ts

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

package/types/src/Button/docs/examples/Truncated.d.ts

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

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

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

package/types/src/Button/docs/examples/prisma/Block.d.ts

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

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

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

package/types/src/Button/docs/examples/prisma/Icons.d.ts

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

package/types/src/Button/docs/examples/prisma/Menus.d.ts

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

package/types/src/Button/docs/examples/prisma/To.d.ts

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

package/types/src/Button/docs/examples/prisma/Truncated.d.ts

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

package/types/src/ButtonGroup/docs/examples/Basic.d.ts

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

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

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

package/types/src/Card/docs/examples/Basic.d.ts

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

package/types/src/Card/docs/examples/Clickable.d.ts

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

package/types/src/Card/docs/examples/Full.d.ts

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

package/types/src/Card/docs/examples/Images.d.ts

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

package/types/src/Card/docs/examples/Selectable.d.ts

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

package/types/src/Card/docs/examples/prisma/Actions.d.ts

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

package/types/src/CardLayout/docs/examples/Basic.d.ts

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

package/types/src/CardLayout/docs/examples/Interactive.d.ts

@@ -0,0 +1,28 @@
+import { Component } from 'react';
+import { NumberChangeHandler } from '@splunk/react-ui/Number';
+import { SwitchClickHandler } from '@splunk/react-ui/Switch';
+interface InteractiveState {
+    value?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    gutterSize?: number;
+    wrapCards: boolean;
+    alignCards: 'left' | 'center' | 'right';
+    setAsWidth: boolean;
+    hasMaxWidth: boolean;
+}
+declare class Interactive extends Component<{}, InteractiveState> {
+    constructor(props: {});
+    handleChangeAmount: NumberChangeHandler;
+    handleChangeMinWidth: NumberChangeHandler;
+    handleChangeMaxWidth: NumberChangeHandler;
+    handleChangeGutter: NumberChangeHandler;
+    handleChangeWrap: SwitchClickHandler;
+    handleChangeAlign: (e: any, { value }: {
+        value: any;
+    }) => void;
+    handleSetAsWidth: SwitchClickHandler;
+    handleHasMaxWidth: SwitchClickHandler;
+    render(): JSX.Element;
+}
+export default Interactive;

package/types/src/Chip/docs/examples/Appearance.d.ts

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

package/types/src/Chip/docs/examples/Basic.d.ts

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

package/types/src/Chip/docs/examples/CustomColors.d.ts

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

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

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

package/types/src/Chip/docs/examples/Icon.d.ts

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

package/types/src/Chip/docs/examples/Removable.d.ts

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

package/types/src/Chip/docs/examples/prisma/Appearance.d.ts

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

package/types/src/Clickable/NavigationProvider.d.ts

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 declare type NavigationProviderClickHandler = (event: React.MouseEvent<HTMLAnchorElement>, data: {
     openInNewContext?: boolean;
     to: string;
+    originalTo: string;
     label?: string;
 }) => void;
 interface NavigationProviderProps {

package/types/src/Clickable/docs/examples/Basic.d.ts

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

package/types/src/Clickable/docs/examples/NavigationProvider.d.ts

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

package/types/src/Code/docs/examples/Default.d.ts

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

package/types/src/Code/docs/examples/HideIndent.d.ts

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

package/types/src/Code/docs/examples/Language.d.ts

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

package/types/src/CollapsiblePanel/docs/examples/BasicControlled.d.ts

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

package/types/src/CollapsiblePanel/docs/examples/BasicUncontrolled.d.ts

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

package/types/src/CollapsiblePanel/docs/examples/MultiControlled.d.ts

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

package/types/src/CollapsiblePanel/docs/examples/MultiUncontrolled.d.ts

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

package/types/src/CollapsiblePanel/docs/examples/TitleWithActions.d.ts

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

package/types/src/CollapsiblePanel/docs/examples/prisma/BasicControlled.d.ts

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

package/types/src/CollapsiblePanel/docs/examples/prisma/BasicUncontrolled.d.ts

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

package/types/src/CollapsiblePanel/docs/examples/prisma/Content.d.ts

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

package/types/src/CollapsiblePanel/docs/examples/prisma/MultiControlled.d.ts

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

package/types/src/CollapsiblePanel/docs/examples/prisma/MultiUncontrolled.d.ts

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