+
+ + Pellentesque magna tellus, dapibus vitae placerat nec, + viverra vel mi.{' '} + + Learn More + +
+icon prop and use the label prop.
+ */
+ assistiveText: _propTypes.default.shape({
+ icon: _propTypes.default.string
+ }),
+
+ /**
+ * Disables the button and adds disabled styling.
+ */
+ disabled: _propTypes.default.bool,
+
+ /**
+ * Icon associated with the stateful button. Accepts an `Icon` component
+ */
+ icon: _propTypes.default.node,
+
+ /**
+ * Triggered when focus is removed.
+ */
+ onBlur: _propTypes.default.func,
+
+ /**
+ * Triggered when the button is clicked.
+ */
+ onClick: _propTypes.default.func,
+
+ /**
+ * Triggered when component is focused.
+ */
+ onFocus: _propTypes.default.func,
+
+ /**
+ * Triggered when a key is pressed down
+ */
+ onKeyDown: _propTypes.default.func,
+
+ /**
+ * Triggered when a key is pressed and released
+ */
+ onKeyPress: _propTypes.default.func,
+
+ /**
+ * Triggered when a key is released
+ */
+ onKeyUp: _propTypes.default.func,
+
+ /**
+ * Triggered when a mouse button is pressed down
+ */
+ onMouseDown: _propTypes.default.func,
+
+ /**
+ * Triggered when a mouse arrow hovers
+ */
+ onMouseEnter: _propTypes.default.func,
+
+ /**
+ * If true, button scales to 100% width on small form factors.
+ */
+ responsive: _propTypes.default.bool,
+
+ /**
+ * Initial label and icon (optional) of button.
+ */
+ stateOne: _propTypes.default.object,
+
+ /**
+ * Selected label and icon (optional) of button.
+ */
+ stateTwo: _propTypes.default.object,
+
+ /**
+ * Deselect label and icon (optional) of button.
+ */
+ stateThree: _propTypes.default.object,
+
+ /**
+ * Write "-1" if you don't want the user to tab to the button.
+ */
+ tabIndex: _propTypes.default.string,
+
+ /**
+ * Different types of buttons
+ */
+ variant: _propTypes.default.oneOf(['base', 'neutral', 'brand', 'destructive', 'icon', 'icon-filled'])
+}; // i18n
+
+var defaultProps = {
+ assistiveText: {
+ icon: ''
+ },
+ disabled: false,
+ iconSize: 'medium',
+ responsive: false,
+ stateOne: {
+ iconName: 'add',
+ label: 'Follow'
+ },
+ stateTwo: {
+ iconName: 'check',
+ label: 'Following'
+ },
+ stateThree: {
+ iconName: 'close',
+ label: 'Unfollow'
+ }
+};
+/**
+ * The ButtonStateful component is a variant of the Lightning Design System Button component. It is used for buttons that have a state of unselected or selected.
+ * For icon buttons, use variant='icon'. For buttons with labels or buttons with labels and icons, pass data to the state props (ie. stateOne={{iconName: 'add', label: 'Join'}}).
+ */
+
+var ButtonStateful =
+/*#__PURE__*/
+function (_React$Component) {
+ _inherits(ButtonStateful, _React$Component);
+
+ function ButtonStateful(props) {
+ var _this;
+
+ _classCallCheck(this, ButtonStateful);
+
+ _this = _possibleConstructorReturn(this, _getPrototypeOf(ButtonStateful).call(this, props));
+
+ _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
+ if (_this.props.onBlur) _this.props.onBlur(e);
+ e.currentTarget.blur();
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
+ if ((0, _lodash.default)(_this.props.onClick)) _this.props.onClick(e);
+
+ if (typeof _this.props.active !== 'boolean') {
+ _this.setState(function (prevState) {
+ return {
+ active: !prevState.active
+ };
+ });
+ }
+ });
+
+ _this.state = {
+ active: false
+ };
+ (0, _checkProps.default)(_constants.BUTTON_STATEFUL, props, _component.default);
+ return _this;
+ }
+
+ _createClass(ButtonStateful, [{
+ key: "getClassName",
+ value: function getClassName(active) {
+ return (0, _classnames.default)(this.props.className, 'slds-button', {
+ 'slds-button_neutral': this.props.variant !== 'icon' && this.props.variant !== 'icon-filled',
+ 'slds-button_inverse': this.props.variant === 'inverse',
+ 'slds-not-selected': !active,
+ 'slds-is-selected': active,
+ 'slds-max-small-button_stretch': this.props.responsive,
+ 'slds-button_icon-border': this.props.variant === 'icon',
+ 'slds-button_icon-border-filled': this.props.variant === 'icon-filled'
+ });
+ }
+ }, {
+ key: "render",
+ value: function render() {
+ var _this$props = this.props,
+ active = _this$props.active,
+ disabled = _this$props.disabled,
+ icon = _this$props.icon,
+ iconName = _this$props.iconName,
+ iconSize = _this$props.iconSize,
+ id = _this$props.id,
+ onFocus = _this$props.onFocus,
+ onKeyDown = _this$props.onKeyDown,
+ onKeyPress = _this$props.onKeyPress,
+ onKeyUp = _this$props.onKeyUp,
+ onMouseDown = _this$props.onMouseDown,
+ onMouseEnter = _this$props.onMouseEnter,
+ stateOne = _this$props.stateOne,
+ stateTwo = _this$props.stateTwo,
+ stateThree = _this$props.stateThree,
+ tabIndex = _this$props.tabIndex,
+ variant = _this$props.variant;
+ var defaultIconProps = {
+ disabled: disabled,
+ size: 'small',
+ className: 'slds-button__icon_stateful'
+ };
+ var iconAssistiveText = typeof this.props.assistiveText === 'string' ? this.props.assistiveText : _objectSpread({}, defaultProps.assistiveText, this.props.assistiveText).icon;
+ var isActive = typeof active === 'boolean' ? active : this.state.active;
+
+ if (variant === 'icon' || variant === 'icon-filled') {
+ return _react.default.createElement("button", {
+ "aria-live": "polite",
+ className: this.getClassName(isActive),
+ disabled: disabled,
+ id: id,
+ onBlur: this.handleBlur,
+ onClick: this.handleClick,
+ onFocus: onFocus,
+ onKeyDown: onKeyDown,
+ onKeyPress: onKeyPress,
+ onKeyUp: onKeyUp,
+ onMouseDown: onMouseDown,
+ onMouseEnter: onMouseEnter,
+ onMouseLeave: this.handleBlur,
+ tabIndex: tabIndex,
+ type: "button"
+ }, icon ? _react.default.cloneElement(icon, _objectSpread({}, defaultIconProps, icon.props)) : _react.default.createElement(_buttonIcon.default, {
+ disabled: disabled,
+ name: iconName,
+ size: iconSize,
+ className: "slds-button__icon_stateful"
+ }), iconAssistiveText ? _react.default.createElement("span", {
+ className: "slds-assistive-text"
+ }, iconAssistiveText) : null);
+ }
+
+ defaultIconProps.position = 'left';
+ return _react.default.createElement("button", {
+ "aria-live": "assertive",
+ className: this.getClassName(isActive),
+ disabled: disabled,
+ id: id,
+ onBlur: this.handleBlur,
+ onClick: this.handleClick,
+ onFocus: onFocus,
+ onKeyDown: onKeyDown,
+ onKeyPress: onKeyPress,
+ onKeyUp: onKeyUp,
+ onMouseEnter: onMouseEnter,
+ onMouseLeave: this.handleBlur,
+ tabIndex: tabIndex,
+ type: "button"
+ }, _react.default.createElement("span", {
+ className: "slds-text-not-selected"
+ }, stateOne.icon ? _react.default.cloneElement(stateOne.icon, _objectSpread({}, defaultIconProps, stateOne.icon.props, {
+ size: 'small'
+ })) : _react.default.createElement(_buttonIcon.default, {
+ disabled: disabled,
+ name: stateOne.iconName,
+ size: "small",
+ position: "left",
+ className: "slds-button__icon_stateful"
+ }), stateOne.label), _react.default.createElement("span", {
+ className: "slds-text-selected"
+ }, stateTwo.icon ? _react.default.cloneElement(stateTwo.icon, _objectSpread({}, defaultIconProps, stateTwo.icon.props, {
+ size: 'small'
+ })) : _react.default.createElement(_buttonIcon.default, {
+ disabled: disabled,
+ name: stateTwo.iconName,
+ size: "small",
+ position: "left",
+ className: "slds-button__icon_stateful"
+ }), stateTwo.label), _react.default.createElement("span", {
+ className: "slds-text-selected-focus"
+ }, stateThree.icon ? _react.default.cloneElement(stateThree.icon, _objectSpread({}, defaultIconProps, stateThree.icon.props, {
+ size: 'small'
+ })) : _react.default.createElement(_buttonIcon.default, {
+ disabled: disabled,
+ name: stateThree.iconName,
+ size: "small",
+ position: "left",
+ className: "slds-button__icon_stateful"
+ }), stateThree.label));
+ }
+ }]);
+
+ return ButtonStateful;
+}(_react.default.Component);
+
+ButtonStateful.displayName = _constants.BUTTON_STATEFUL;
+ButtonStateful.propTypes = propTypes;
+ButtonStateful.defaultProps = defaultProps;
+var _default = ButtonStateful;
+exports.default = _default;
\ No newline at end of file
diff --git a/components/button/__docs__/__snapshots__/storybook-stories.storyshot b/components/button/__docs__/__snapshots__/storybook-stories.storyshot
new file mode 100644
index 0000000000..7853d93b2b
--- /dev/null
+++ b/components/button/__docs__/__snapshots__/storybook-stories.storyshot
@@ -0,0 +1,590 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DOM snapshots SLDSButton Base 1`] = `
+label or assistiveText.icon is required; see the Prop Details table below. For buttons that maintain selected/unselected states, use the ButtonStateful component.
+ * Although not listed in the prop table, all `aria-*` and `form*` props will be added to the `button` element if passed in.
+ */
+
+var Button =
+/*#__PURE__*/
+function (_React$Component) {
+ _inherits(Button, _React$Component);
+
+ function Button(props) {
+ var _this;
+
+ _classCallCheck(this, Button);
+
+ _this = _possibleConstructorReturn(this, _getPrototypeOf(Button).call(this, props)); // `checkProps` issues warnings to developers about properties (similar to React's built in development tools)
+
+ _defineProperty(_assertThisInitialized(_this), "getClassName", function () {
+ var _classNames;
+
+ var isIcon = _this.props.variant === 'icon';
+ var iconVariant = _this.props.iconVariant;
+ var iconMore = iconVariant === 'more';
+ var iconBorder = iconVariant === 'border';
+ var iconGlobalHeader = iconVariant === 'global-header';
+ var showButtonVariant = _this.props.variant !== 'base' && !iconVariant && !_this.props.inverse && _this.props.variant !== 'link' || iconVariant === 'bare';
+ var plainInverseBtn = _this.props.inverse && !isIcon;
+ var plainInverseIcon = _this.props.inverse && isIcon && !iconMore && !iconBorder;
+ var moreInverseIcon = _this.props.inverse && iconMore;
+ var borderInverseIcon = _this.props.inverse && iconBorder; // After hijacking `iconVariant` to let `Button` know it's in the header, we reset to container style for the actual button CSS.
+
+ if (iconVariant === 'global-header') {
+ iconVariant = 'container';
+ }
+
+ return (0, _classnames.default)((_classNames = {
+ 'slds-button': _this.props.variant !== 'link'
+ }, _defineProperty(_classNames, "slds-button_".concat(_this.props.variant), showButtonVariant), _defineProperty(_classNames, 'slds-button_inverse', plainInverseBtn), _defineProperty(_classNames, 'slds-button_icon-inverse', plainInverseIcon || moreInverseIcon), _defineProperty(_classNames, 'slds-button_icon-border-inverse', borderInverseIcon), _defineProperty(_classNames, "slds-button_icon-".concat(iconVariant), iconVariant && !borderInverseIcon), _defineProperty(_classNames, 'slds-global-header__button_icon', iconGlobalHeader), _defineProperty(_classNames, "slds-button_icon-".concat(_this.props.iconSize), iconVariant && _this.props.iconSize !== 'medium'), _defineProperty(_classNames, 'slds-button_reset', _this.props.variant === 'link'), _defineProperty(_classNames, 'slds-text-link', _this.props.variant === 'link'), _classNames), _this.props.className);
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
+ if (_this.props.onClick) {
+ _this.props.onClick(event, {});
+ }
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "renderIcon", function (name) {
+ var iconSize = !_this.props.iconSize || _this.props.iconVariant ? null : _this.props.iconSize;
+ return _react.default.createElement(_buttonIcon.default, {
+ category: _this.props.iconCategory || 'utility' // BREAKING CHANGE we will introduce in 1.0. For the moment, set default prop here if none specified.
+ ,
+ className: (0, _classnames.default)({
+ 'slds-global-header__icon': _this.props.iconVariant === 'global-header'
+ }, _this.props.iconClassName),
+ hint: _this.props.hint,
+ inverse: _this.props.inverse,
+ name: name,
+ path: _this.props.iconPath,
+ position: _this.props.iconPosition,
+ size: iconSize
+ });
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "renderLabel", function () {
+ var iconOnly = _this.props.iconName || _this.props.iconPath;
+ var assistiveTextIcon = typeof _this.props.assistiveText === 'string' ? _this.props.assistiveText : _objectSpread({}, defaultProps.assistiveText, _this.props.assistiveText).icon;
+ return iconOnly && assistiveTextIcon ? _react.default.createElement("span", {
+ className: "slds-assistive-text"
+ }, assistiveTextIcon) : _this.props.label;
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "renderButton", function () {
+ var ariaProps = (0, _getAriaProps.default)(_this.props);
+ var formProps = (0, _getFormProps.default)(_this.props);
+ return (// eslint-disable-next-line react/button-has-type
+ _react.default.createElement("button", _extends({
+ className: _this.getClassName(),
+ disabled: _this.props.disabled,
+ id: _this.props.id,
+ onBlur: _this.props.onBlur,
+ onClick: _this.handleClick,
+ onFocus: _this.props.onFocus,
+ onKeyDown: _this.props.onKeyDown,
+ onKeyPress: _this.props.onKeyPress,
+ onKeyUp: _this.props.onKeyUp,
+ onMouseDown: _this.props.onMouseDown,
+ onMouseEnter: _this.props.onMouseEnter,
+ onMouseLeave: _this.props.onMouseLeave,
+ onMouseUp: _this.props.onMouseUp,
+ ref: function ref(component) {
+ if (_this.props.buttonRef) {
+ _this.props.buttonRef(component);
+ }
+ },
+ tabIndex: _this.props.tabIndex,
+ title: _this.props.title,
+ type: _this.props.type || 'button',
+ style: _this.props.style
+ }, ariaProps, formProps), _this.props.iconPosition === 'right' ? _this.renderLabel() : null, _this.props.iconName || _this.props.iconPath ? _this.renderIcon(_this.props.iconName) : null, _this.props.iconVariant === 'more' ? _react.default.createElement(_buttonIcon.default, {
+ category: "utility",
+ name: "down",
+ size: "x-small",
+ className: _this.props.iconClassName
+ }) : null, _this.props.iconPosition === 'left' || !_this.props.iconPosition ? _this.renderLabel() : null, _this.props.children // eslint-disable-line react/prop-types
+ )
+ );
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "renderTooltip", function () {
+ return _react.default.createElement(_tooltip.default, {
+ content: _this.props.tooltip
+ }, _this.renderButton);
+ });
+
+ (0, _checkProps.default)(_constants.BUTTON, props, _component.default);
+ return _this;
+ }
+
+ _createClass(Button, [{
+ key: "render",
+ value: function render() {
+ return this.props.tooltip ? this.renderTooltip() : this.renderButton();
+ }
+ }]);
+
+ return Button;
+}(_react.default.Component);
+
+_defineProperty(Button, "displayName", _constants.BUTTON);
+
+_defineProperty(Button, "propTypes", {
+ /**
+ * **Assistive text for accessibility.**
+ * This object is merged with the default props object on every render.
+ * * `icon`: Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means. If the button has an icon and a visible label, you can omit the assistiveText.icon prop and use the label prop.
+ */
+ assistiveText: _propTypes.default.shape({
+ icon: _propTypes.default.string
+ }),
+
+ /**
+ * Callback that passes in the DOM reference of the `icon prop and use the label prop.\n\t */\n\tassistiveText: PropTypes.shape({\n\t\ticon: PropTypes.string,\n\t}),\n\t/**\n\t * Disables the button and adds disabled styling.\n\t */\n\tdisabled: PropTypes.bool,\n\t/**\n\t * Icon associated with the stateful button. Accepts an `Icon` component\n\t */\n\ticon: PropTypes.node,\n\t/**\n\t * Triggered when focus is removed.\n\t */\n\tonBlur: PropTypes.func,\n\t/**\n\t * Triggered when the button is clicked.\n\t */\n\tonClick: PropTypes.func,\n\t/**\n\t * Triggered when component is focused.\n\t */\n\tonFocus: PropTypes.func,\n\t/**\n\t * Triggered when a key is pressed down\n\t */\n\tonKeyDown: PropTypes.func,\n\t/**\n\t * Triggered when a key is pressed and released\n\t */\n\tonKeyPress: PropTypes.func,\n\t/**\n\t * Triggered when a key is released\n\t */\n\tonKeyUp: PropTypes.func,\n\t/**\n\t * Triggered when a mouse button is pressed down\n\t */\n\tonMouseDown: PropTypes.func,\n\t/**\n\t * Triggered when a mouse arrow hovers\n\t */\n\tonMouseEnter: PropTypes.func,\n\t/**\n\t * If true, button scales to 100% width on small form factors.\n\t */\n\tresponsive: PropTypes.bool,\n\t/**\n\t * Initial label and icon (optional) of button.\n\t */\n\tstateOne: PropTypes.object,\n\t/**\n\t * Selected label and icon (optional) of button.\n\t */\n\tstateTwo: PropTypes.object,\n\t/**\n\t * Deselect label and icon (optional) of button.\n\t */\n\tstateThree: PropTypes.object,\n\t/**\n\t * Write \"-1\" if you don't want the user to tab to the button.\n\t */\n\ttabIndex: PropTypes.string,\n\t/**\n\t * Different types of buttons\n\t */\n\tvariant: PropTypes.oneOf([\n\t\t'base',\n\t\t'neutral',\n\t\t'brand',\n\t\t'destructive',\n\t\t'icon',\n\t\t'icon-filled',\n\t]),\n};\n\n// i18n\nconst defaultProps = {\n\tassistiveText: { icon: '' },\n\tdisabled: false,\n\ticonSize: 'medium',\n\tresponsive: false,\n\tstateOne: { iconName: 'add', label: 'Follow' },\n\tstateTwo: { iconName: 'check', label: 'Following' },\n\tstateThree: { iconName: 'close', label: 'Unfollow' },\n};\n\n/**\n * The ButtonStateful component is a variant of the Lightning Design System Button component. It is used for buttons that have a state of unselected or selected.\n * For icon buttons, use variant='icon'. For buttons with labels or buttons with labels and icons, pass data to the state props (ie. stateOne={{iconName: 'add', label: 'Join'}}).\n */\nclass ButtonStateful extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = { active: false };\n\n\t\tcheckProps(BUTTON_STATEFUL, props, componentDoc);\n\t}\n\n\tgetClassName(active) {\n\t\treturn classNames(this.props.className, 'slds-button', {\n\t\t\t'slds-button_neutral':\n\t\t\t\tthis.props.variant !== 'icon' && this.props.variant !== 'icon-filled',\n\t\t\t'slds-button_inverse': this.props.variant === 'inverse',\n\t\t\t'slds-not-selected': !active,\n\t\t\t'slds-is-selected': active,\n\t\t\t'slds-max-small-button_stretch': this.props.responsive,\n\t\t\t'slds-button_icon-border': this.props.variant === 'icon',\n\t\t\t'slds-button_icon-border-filled': this.props.variant === 'icon-filled',\n\t\t});\n\t}\n\n\thandleBlur = (e) => {\n\t\tif (this.props.onBlur) this.props.onBlur(e);\n\t\te.currentTarget.blur();\n\t};\n\n\thandleClick = (e) => {\n\t\tif (isFunction(this.props.onClick)) this.props.onClick(e);\n\t\tif (typeof this.props.active !== 'boolean') {\n\t\t\tthis.setState((prevState) => ({ active: !prevState.active }));\n\t\t}\n\t};\n\n\trender() {\n\t\tconst {\n\t\t\tactive,\n\t\t\tdisabled,\n\t\t\ticon,\n\t\t\ticonName,\n\t\t\ticonSize,\n\t\t\tid,\n\t\t\tonFocus,\n\t\t\tonKeyDown,\n\t\t\tonKeyPress,\n\t\t\tonKeyUp,\n\t\t\tonMouseDown,\n\t\t\tonMouseEnter,\n\t\t\t// onMouseLeave, // This prop isn't used anywhere! But removing it would be a breaking change\n\t\t\tstateOne,\n\t\t\tstateTwo,\n\t\t\tstateThree,\n\t\t\ttabIndex,\n\t\t\tvariant,\n\t\t} = this.props;\n\n\t\tconst defaultIconProps = {\n\t\t\tdisabled,\n\t\t\tsize: 'small',\n\t\t\tclassName: 'slds-button__icon_stateful',\n\t\t};\n\t\tconst iconAssistiveText =\n\t\t\ttypeof this.props.assistiveText === 'string'\n\t\t\t\t? this.props.assistiveText\n\t\t\t\t: {\n\t\t\t\t\t\t...defaultProps.assistiveText,\n\t\t\t\t\t\t...this.props.assistiveText,\n\t\t\t\t\t}.icon;\n\n\t\tconst isActive = typeof active === 'boolean' ? active : this.state.active;\n\n\t\tif (variant === 'icon' || variant === 'icon-filled') {\n\t\t\treturn (\n\t\t\t\tThey show when you click the first tab.
\n\t * \tThey show when you click the second tab.
\n\t * \tThey show when you click the first tab.
\n\t * \t\tThey show when you click the second tab.
\n\t * \t\tThey show when you click the first tab.
\n * \t\n\t\t\t\t\t\t\t\t\t{props.stepText}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t{this.props.property}
\n\t\t\t\t\t\t{this.props.predicate}
\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{// Remove button\n\t\t\t\t!this.props.isPermanent && !this.props.isLocked ? (\n\t\t\t\t\tassistiveText.icon prop and use the label prop.\n\t\t */\n\t\tassistiveText: PropTypes.shape({\n\t\t\ticon: PropTypes.string,\n\t\t}),\n\t\t/**\n\t\t * CSS classes to be added to the 'li'.\n\t\t */\n\t\tclassName: PropTypes.oneOfType([\n\t\t\tPropTypes.array,\n\t\t\tPropTypes.object,\n\t\t\tPropTypes.string,\n\t\t]),\n\t\t/**\n\t\t * Determines position of separating bar.\n\t\t */\n\t\tdividerPosition: PropTypes.oneOf(['left', 'right']),\n\t\t/**\n\t\t * A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the dropdown to the triggering button.\n\t\t */\n\t\tid: PropTypes.string,\n\t\t/**\n\t\t * Allows the dropdown menu to style itself accordingly when open since CSS hover rules cannot take effect if the menu is not inline.\n\t\t */\n\t\tisOpen: PropTypes.bool,\n\t\t/**\n\t\t * Visible label on the dropdown menu trigger button.\n\t\t */\n\t\tlabel: PropTypes.string,\n\t\t/**\n\t\t * The dropdown menu.\n\t\t */\n\t\tmenu: PropTypes.node,\n\t\t/**\n\t\t * Is only called when `openOn` is set to `hover` and when the triggering li loses focus.\n\t\t */\n\t\tonBlur: PropTypes.func,\n\t\t/**\n\t\t * This prop is passed onto the triggering `li`. Triggered when the trigger li is clicked.\n\t\t */\n\t\tonClick: PropTypes.func,\n\t\t/**\n\t\t * Is only called when `openOn` is set to `hover` and when the triggering li gains focus.\n\t\t */\n\t\tonFocus: PropTypes.func,\n\t\t/**\n\t\t * Called when a key pressed.\n\t\t */\n\t\tonKeyDown: PropTypes.func,\n\t\t/**\n\t\t * Called when mouse clicks down on the trigger `li`.\n\t\t */\n\t\tonMouseDown: PropTypes.func,\n\t\t/**\n\t\t * Called when mouse hovers over the trigger `li`.\n\t\t */\n\t\tonMouseEnter: PropTypes.func,\n\t\t/**\n\t\t * Called when mouse leaves trigger `li` or the menu.\n\t\t */\n\t\tonMouseLeave: PropTypes.func,\n\t\t/**\n\t\t * The ref of the actual triggering button.\n\t\t */\n\t\ttriggerRef: PropTypes.func,\n\t};\n\n\tstatic defaultProps = { assistiveText: { icon: 'Open menu item submenu' } };\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tcheckProps(MENU_DROPDOWN_TRIGGER, this.props, componentDoc);\n\t}\n\n\t// ### Render\n\trender() {\n\t\tconst {\n\t\t\tactive,\n\t\t\tactiveBackgroundColor,\n\t\t\tclassName,\n\t\t\tdividerPosition,\n\t\t\tid,\n\t\t\tisOpen,\n\t\t\tlabel,\n\t\t\tmenu,\n\t\t\tonBlur,\n\t\t\tonClick,\n\t\t\tonFocus,\n\t\t\tonKeyDown,\n\t\t\tonMouseDown,\n\t\t\tonMouseEnter,\n\t\t\tonMouseLeave,\n\t\t\ttriggerRef,\n\t\t\t...rest\n\t\t} = this.props;\n\n\t\tconst listItemstyle = {};\n\t\t// Uses design token to get correct color\n\t\tconst hoverBackgroundColor = colors.brandPrimaryTransparent10;\n\n\t\tif (active) {\n\t\t\tlistItemstyle.backgroundColor = activeBackgroundColor;\n\t\t\tlistItemstyle.borderBottomColor = activeBackgroundColor;\n\t\t}\n\n\t\t// Per SLDS pattern, set trigger style like hover style, so that hover visuals and menu being open and closed are in same state\n\t\tif (isOpen) {\n\t\t\tlistItemstyle.backgroundColor = hoverBackgroundColor;\n\t\t}\n\n\t\treturn (\n\t\t\tassistiveText.icon prop and use the label prop.\n\t */\n\tassistiveText: PropTypes.shape({\n\t\ticon: PropTypes.string,\n\t}),\n\t/**\n\t * Aligns the right or left side of the menu with the respective side of the trigger. This is not intended for use with `nubbinPosition`.\n\t */\n\talign: PropTypes.oneOf(['left', 'right']),\n\t/**\n\t * Extra classnames to apply to the dropdown menu.\n\t */\n\tclassName: PropTypes.string,\n\t/**\n\t * Determines position of separating bar.\n\t */\n\tdividerPosition: PropTypes.oneOf(['left', 'right']),\n\t/**\n\t * CSS classes to be added to `li` element.\n\t */\n\tbuttonClassName: PropTypes.oneOfType([\n\t\tPropTypes.array,\n\t\tPropTypes.object,\n\t\tPropTypes.string,\n\t]),\n\t/**\n\t * A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the dropdown to the triggering button.\n\t */\n\tid: PropTypes.string,\n\t/**\n\t * Provided to List to indicate number of items visible in the List. Pass `null` to display all items, or a string containing one of the numeric option values listed under [Dropdown Height](https://www.lightningdesignsystem.com/components/menus/#flavor-dropdown-height) at the right (eg. '5').\n\t */\n\tlength: PropTypes.oneOf([null, '5', '7', '10']),\n\t/**\n\t * Offset adds pixels to the absolutely positioned dropdown menu in the format: ([vertical]px [horizontal]px).\n\t */\n\toffset: PropTypes.string,\n\t/**\n\t * Triggered when an item in the menu is clicked.\n\t */\n\tonSelect: PropTypes.func,\n\t/**\n\t * An array of menu item.\n\t */\n\toptions: PropTypes.array.isRequired,\n};\n\n// ### Default Props\nGlobalNavigationBarDropdown.defaultProps = {\n\talign: 'right',\n\tlength: null,\n};\n\nexport default GlobalNavigationBarDropdown;\n","/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */\n/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */\n\n// # GlobalNavigationBar Label Component\n\n// ## Dependencies\n\n// ### React\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n// ### classNames\nimport classNames from 'classnames';\n\nimport colors from '../../utilities/design-tokens/dist/salesforce-skin.common.js';\n\n// ## Constants\nimport { GLOBAL_NAVIGATION_BAR_LABEL } from '../../utilities/constants';\n\n/**\n * Wraps text in the proper markup and removes link styling to support use in the GlobalNavigationBar.\n */\nconst GlobalNavigationBarLabel = (props) => {\n\t// Separate props we care about in order to pass others along passively to the `span` tag\n\tconst { className, dividerPosition, id, label } = props;\n\n\treturn (\n\t\t{messageBody}
\n\t\t\t\t) : null}\n\t\t\tLookup.DefaultFooter.\n\t\t */\n\t\tfooterRenderer: PropTypes.func,\n\t\t/**\n\t\t * Custom component for Lookup header. The default header has a search icon and shows the search term - see Lightning Design System Lookup > Base. To use the default header, pass in Lookup.DefaultHeader.\n\t\t */\n\t\theaderRenderer: PropTypes.func,\n\t\t/**\n\t\t * Please refer to Lightning Design System Icons to view categories.\n\t\t */\n\t\ticonCategory: PropTypes.string,\n\t\t/**\n\t\t * If true, icon color is white. If false, icon color is the default text color.\n\t\t */\n\t\ticonInverse: PropTypes.bool,\n\t\t/**\n\t\t * Name of icon. Please refer to Lightning Design System Icons to view icon names.\n\t\t */\n\t\ticonName: PropTypes.string,\n\t\t/**\n\t\t * Determines whether the input's icon will display that icon on the left or the right.\n\t\t */\n\t\ticonPosition: PropTypes.oneOf(['left', 'right']),\n\t\t/**\n\t\t * Renders menu within the wrapping trigger as a sibling of the button. By default, you will have an absolutely positioned container at an elevated z-index.\n\t\t */\n\t\tisInline: PropTypes.bool,\n\t\t/**\n\t\t * Whether or not the dropdown menu is open. This overrides the default behavior.\n\t\t */\n\t\tisOpen: PropTypes.bool,\n\t\t/**\n\t\t * Form label for input.\n\t\t */\n\t\tlabel: PropTypes.string,\n\t\t/**\n\t\t * Custom component that overrides the default Lookup Item component.\n\t\t */\n\t\tlistItemLabelRenderer: PropTypes.func,\n\t\t/**\n\t\t * Triggered when input focus is removed.\n\t\t */\n\t\tonBlur: PropTypes.func,\n\t\t/**\n\t\t * Triggered when the contents of the input changes.\n\t\t */\n\t\tonChange: PropTypes.func,\n\t\t/**\n\t\t * Triggered when input is focused.\n\t\t */\n\t\tonFocus: PropTypes.func,\n\t\t/**\n\t\t * Function called when the lookup dropdown would like hide. This will turn the Lookup into into a controlled component. Please use with `isOpen`.\n\t\t */\n\t\tonRequestClose: PropTypes.func,\n\t\t/**\n\t\t * Function called when the lookup dropdown would like show. This will turn the Lookup into into a controlled component. Please use with `isOpen`.\n\t\t */\n\t\tonRequestOpen: PropTypes.func,\n\t\t/**\n\t\t * Triggered when the user scrolls in the dropdown menu.\n\t\t */\n\t\tonScroll: PropTypes.func,\n\t\t/**\n\t\t * Triggered when an item is selected from the dropdown menu.\n\t\t */\n\t\tonSelect: PropTypes.func,\n\t\t/**\n\t\t * Triggered when an item is an item is removed from the input.\n\t\t */\n\t\tonUnselect: PropTypes.func,\n\t\t/**\n\t\t * Item added to the dropdown menu.\n\t\t */\n\t\toptions: PropTypes.array.isRequired,\n\t\t/**\n\t\t * Text that will appear in an empty input.\n\t\t */\n\t\tplaceholder: PropTypes.string,\n\t\t/**\n\t\t * If true, adds asterisk next to input label to indicate it is a required field.\n\t\t */\n\t\trequired: PropTypes.bool,\n\t\t/**\n\t\t * Text passed on to header search input of dropdown menu.\n\t\t */\n\t\tsearchTerm: PropTypes.string,\n\t\t/**\n\t\t * Custom component that overrides the default section divider\n\t\t */\n\t\tsectionDividerRenderer: PropTypes.func,\n\t\t/**\n\t\t * Index of current selected item. To clear the selection, pass in -1.\n\t\t */\n\t\tselectedItem: PropTypes.number,\n\t};\n\n\tstatic defaultProps = {\n\t\tconstrainToScrollParent: true,\n\t\tfilterWith: defaultFilter,\n\t\ticonPosition: 'right',\n\t\tsearchTerm: '',\n\t\tmenuPosition: 'absolute',\n\t};\n\n\tstate = {\n\t\tcurrentFocus: null,\n\t\tfocusIndex: null,\n\t\titems: [],\n\t\tlistLength: this.props.options.length,\n\t\tsearchTerm: normalizeSearchTerm(this.props.searchTerm),\n\t\tselectedIndex: this.props.selectedItem,\n\t};\n\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\t// `checkProps` issues warnings to developers about properties (similar to React's built in development tools)\n\t\tcheckProps(LOOKUP, props);\n\n\t\t// Keeps track of references of children for keyboard navigation\n\t\tthis.pills = [];\n\t}\n\n\tcomponentDidMount() {\n\t\tthis.modifyItems(this.props.options);\n\t}\n\n\tcomponentWillReceiveProps(newProps) {\n\t\tif (newProps.options) {\n\t\t\tthis.modifyItems(newProps.options);\n\t\t}\n\t\tif (\n\t\t\tnewProps.selectedItem !== this.props.selectedItem ||\n\t\t\t!isEqual(newProps.options, this.props.options)\n\t\t) {\n\t\t\tthis.setState({ selectedIndex: newProps.selectedItem });\n\t\t}\n\t}\n\n\tcomponentDidUpdate(prevProps, prevState) {\n\t\tif (\n\t\t\t!isNaN(parseInt(prevState.selectedIndex, 10)) &&\n\t\t\tisNaN(parseInt(this.state.selectedIndex, 10))\n\t\t) {\n\t\t\tif (this.input) {\n\t\t\t\tthis.input.focus();\n\t\t\t}\n\t\t} else if (\n\t\t\tisNaN(parseInt(prevState.selectedIndex, 10)) &&\n\t\t\t!isNaN(parseInt(this.state.selectedIndex, 10))\n\t\t) {\n\t\t\tif (this.pills[this.state.selectedIndex]) {\n\t\t\t\tthis.pills[this.state.selectedIndex].focus();\n\t\t\t}\n\t\t}\n\t}\n\n\tgetClassName = () =>\n\t\tclassNames(this.props.className, 'slds-form-element slds-lookup', {\n\t\t\t'slds-has-selection': this.isSelected(),\n\t\t\t'slds-is-open': this.getIsOpen(),\n\t\t});\n\n\tsetFirstIndex = () => {\n\t\tlet nextFocusIndex = 0;\n\t\tlet filteredItem = this.state.items[0];\n\n\t\tif (this.menuComponent && this.menuComponent.getFilteredItemForIndex) {\n\t\t\tfilteredItem = this.menuComponent.getFilteredItemForIndex(nextFocusIndex);\n\t\t}\n\n\t\tif (filteredItem && filteredItem.data.type === 'section') {\n\t\t\tnextFocusIndex += 1;\n\t\t}\n\n\t\tthis.setState({ focusIndex: nextFocusIndex });\n\t};\n\n\tgetHeader = () => {\n\t\tconst Header = this.props.headerRenderer;\n\t\tconst headerActive = this.state.focusIndex === 0;\n\n\t\treturn (\n\t\t\t\n\t\t\t\t\t\t\t\t\t{this.props.step.setupAssistantEstimatedTime}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.props.description}
\n\t\t\t\t{labels.details}
: null}\n\t\t\t\t{this.props.description}
\n\t\t\t\t{labels.description}
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{this.state.completedSteps}\n\t\t\t\t\t\t\t\t\t\t\t{`/`}\n\t\t\t\t\t\t\t\t\t\t\t{this.state.totalSteps}\n\t\t\t\t\t\t\t\t\t\t\t{` ${labels.unitsCompletedAfter}`}\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t{this.state.completedSteps}\n\t\t\t\t\t\t\t\t\t\t\t\t{`/`}\n\t\t\t\t\t\t\t\t\t\t\t\t{this.state.totalSteps}\n\t\t\t\t\t\t\t\t\t\t\t\t{` ${labels.unitsCompletedAfter}`}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{this.props.description}\n\t\t\t\t\t\t
\n\t\t\t\t\tvariant='icon'.
+ */
+
+var icon_Icon = function Icon(props) {
+ icon_check_props(ICON, props, icon_component);
+ var category = props.category,
+ className = props.className,
+ colorVariant = props.colorVariant,
+ containerClassName = props.containerClassName,
+ containerStyle = props.containerStyle,
+ icon = props.icon,
+ inverse = props.inverse,
+ name = props.name,
+ path = props.path,
+ size = props.size,
+ title = props.title,
+ productTheme = props.productTheme;
+ var style = props.style;
+
+ if (productTheme) {
+ style = icon_objectSpread({
+ backgroundColor: icon_backgrounds_default.a[productTheme]
+ }, style);
+ }
+
+ var assistiveText = typeof props.assistiveText === 'string' ? props.assistiveText : icon_objectSpread({}, icon_defaultProps.assistiveText, props.assistiveText).label;
+ var kababCaseName = name ? name.replace(/_/g, '-') : '';
+ return external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement("span", {
+ className: class_names(icon_defineProperty({
+ 'slds-icon_container': category !== 'utility',
+ 'slds-icon_container_circle': category === 'action'
+ }, "slds-icon-".concat(category, "-").concat(kababCaseName), category !== 'utility' && category !== 'doctype' && !path), containerClassName),
+ style: containerStyle,
+ title: title
+ }, external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement(utility_icon, {
+ "aria-hidden": "true",
+ category: category,
+ className: class_names(className, 'slds-icon', {
+ 'slds-icon_xx-small': size === 'xx-small',
+ 'slds-icon_x-small': size === 'x-small',
+ 'slds-icon_small': size === 'small',
+ // medium intentially not present
+ 'slds-icon_large': size === 'large',
+ // if category is `utility` and `inverse` is false (default), icon will be dark // return true
+ // if category is `utility` and `inverse` is true, icon will be light // return false
+ // if category is NOT `utility` and `inverse` is false (default), icon will be light // return false
+ // if category is NOT `utility` and `inverse` is true, icon will be dark // return true
+ 'slds-icon-text-default': colorVariant === 'default' && category === 'utility' ? !inverse : inverse,
+ 'slds-icon-text-warning': colorVariant === 'warning',
+ 'slds-icon-text-error': colorVariant === 'error',
+ 'slds-icon-text-light': colorVariant === 'light'
+ }),
+ icon: icon,
+ name: name,
+ path: path,
+ style: style
+ }), assistiveText ? external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement("span", {
+ className: "slds-assistive-text"
+ }, assistiveText) : '');
+}; // ### Display Name
+// Always use the canonical component name as the React display name.
+
+
+icon_Icon.displayName = ICON; // ### Prop Types
+
+icon_Icon.propTypes = {
+ /**
+ * **Assistive text for accessibility.**
+ * This object is merged with the default props object on every render.
+ * * `label`: Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means. Naked icons must have assistive text, however, if you also have visible descriptive text with the icon, declare this prop as assistiveText=''.
+ */
+ assistiveText: prop_types_default.a.shape({
+ label: prop_types_default.a.string
+ }),
+
+ /**
+ * Icon category from [lightningdesignsystem.com/icons/](https://www.lightningdesignsystem.com/icons/)
+ */
+ category: prop_types_default.a.oneOf(['action', 'custom', 'doctype', 'standard', 'utility']).isRequired,
+
+ /**
+ * CSS classes that are applied to the SVG.
+ */
+ className: prop_types_default.a.oneOfType([prop_types_default.a.array, prop_types_default.a.object, prop_types_default.a.string]),
+
+ /**
+ * CSS classes that are applied to the span.
+ */
+ containerClassName: prop_types_default.a.oneOfType([prop_types_default.a.array, prop_types_default.a.object, prop_types_default.a.string]),
+
+ /**
+ * Styles that are applied to the span.
+ */
+ containerStyle: prop_types_default.a.object,
+
+ /**
+ * Icon color variants
+ */
+ colorVariant: prop_types_default.a.oneOf(['base', 'default', 'error', 'light', 'warning']),
+
+ /**
+ * A custom SVG object to use instead of the supplied SLDS icons, look in `design-system-react/icons` for examples and syntax.
+ */
+ icon: prop_types_default.a.object,
+
+ /**
+ * Setting `inverse` to true will switch the color of the icon: light to dark, dark to light.
+ */
+ inverse: prop_types_default.a.bool,
+
+ /**
+ * Name of the icon. Visit Lightning Design System Icons to reference icon names.
+ */
+ name: prop_types_default.a.string,
+
+ /**
+ * Path to the icon. This will override any global icon settings
+ */
+ path: prop_types_default.a.string,
+
+ /**
+ * Background theme color for the icon. **Only compatible with icon category `standard`**
+ */
+ productTheme: prop_types_default.a.oneOf(['global-setup', 'service-cloud', 'industry-cloud', 'sales-cloud', 'commerce-cloud', 'community-cloud', 'marketing-cloud', 'quip']),
+
+ /**
+ * Size of the icon. Visit [lightningdesignsystem.com/components/icons/#flavor-sizes](https://www.lightningdesignsystem.com/components/icons/#flavor-sizes)
+ */
+ size: prop_types_default.a.oneOf(['xx-small', 'x-small', 'small', 'medium', 'large']),
+
+ /**
+ * Custom styles to be passed to the SVG. Could be used to change icon or background color.
+ */
+ style: prop_types_default.a.object,
+
+ /**
+ * Title attribute for the icon container
+ */
+ title: prop_types_default.a.string
+};
+icon_Icon.defaultProps = icon_defaultProps;
+/* harmony default export */ var components_icon = (icon_Icon);
+// CONCATENATED MODULE: ./utilities/warning/deprecated-property.js
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
+
+/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/* eslint-disable import/no-mutable-exports */
+// This function will deliver an error message to the browser console about the removal of a property.
+
+
+var deprecated = function deprecatedFunction() {};
+
+if (false) { var deprecated_property_hasWarned; }
+
+/* harmony default export */ var deprecated_property = (deprecated);
+// CONCATENATED MODULE: ./utilities/warning/deprecated-property-value.js
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
+
+/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/* eslint-disable import/no-mutable-exports */
+
+/* eslint-disable max-len */
+// This function will deliver an error message to the browser console about the future of a removal and moving of a property's valid value to another prop. This makes the most sense to be used with `oneOf` prop types.
+
+
+var deprecated_property_value_deprecated = function deprecatedFunction() {};
+
+if (false) { var deprecated_property_value_hasWarned; }
+
+/* harmony default export */ var deprecated_property_value = (deprecated_property_value_deprecated);
+// CONCATENATED MODULE: ./utilities/warning/is-trigger-tabbable.js
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
+
+/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/* eslint-disable import/no-mutable-exports */
+// This function will deliver an error message to the browser console about the removal of a property.
+
+
+/* eslint-disable import/no-mutable-exports */
+
+var isTriggerTabbable = function isTriggerTabbableFunction() {};
+
+if (false) { var is_trigger_tabbable_hasWarned; }
+
+/* harmony default export */ var is_trigger_tabbable = (isTriggerTabbable);
+// CONCATENATED MODULE: ./components/tooltip/check-props.js
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
+
+/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/* eslint-disable import/no-mutable-exports */
+
+
+
+
+
+
+var tooltip_check_props_checkProps = function checkPropsFunction() {};
+
+if (false) {}
+
+/* harmony default export */ var tooltip_check_props = (tooltip_check_props_checkProps);
+// EXTERNAL MODULE: ./components/tooltip/component.json
+var tooltip_component = __webpack_require__(33);
+
+// CONCATENATED MODULE: ./components/tooltip/index.jsx
+function tooltip_typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { tooltip_typeof = function _typeof(obj) { return typeof obj; }; } else { tooltip_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return tooltip_typeof(obj); }
+
+function tooltip_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { tooltip_defineProperty(target, key, source[key]); }); } return target; }
+
+function tooltip_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function tooltip_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function tooltip_createClass(Constructor, protoProps, staticProps) { if (protoProps) tooltip_defineProperties(Constructor.prototype, protoProps); if (staticProps) tooltip_defineProperties(Constructor, staticProps); return Constructor; }
+
+function tooltip_possibleConstructorReturn(self, call) { if (call && (tooltip_typeof(call) === "object" || typeof call === "function")) { return call; } return tooltip_assertThisInitialized(self); }
+
+function tooltip_getPrototypeOf(o) { tooltip_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return tooltip_getPrototypeOf(o); }
+
+function tooltip_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function tooltip_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) tooltip_setPrototypeOf(subClass, superClass); }
+
+function tooltip_setPrototypeOf(o, p) { tooltip_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return tooltip_setPrototypeOf(o, p); }
+
+function tooltip_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
+
+/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+// # Tooltip
+
+
+ // ### shortid
+// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
+// shortid is a short, non-sequential, url-friendly, unique id generator
+
+
+
+
+ // eslint-disable-next-line import/no-cycle
+
+ // This component's `checkProps` which issues warnings to developers about properties when in development mode (similar to React's built in development tools)
+
+
+ // ### Display Name
+// Always use the canonical component name as the React display name.
+
+var displayName = POPOVER_TOOLTIP;
+var tooltip_propTypes = {
+ /**
+ * Alignment of the Tooltip relative to the element that triggers it.
+ */
+ align: prop_types_default.a.oneOf(['top', 'top left', 'top right', 'right', 'right top', 'right bottom', 'bottom', 'bottom left', 'bottom right', 'left', 'left top', 'left bottom']).isRequired,
+
+ /**
+ * **Assistive text for accessibility**
+ * This object is merged with the default props object on every render.
+ * * `tooltipTipLearnMoreIcon`: This text is inside the info icon within the tooltip content and exists to "complete the sentence" for assistive tech users.
+ * * `triggerLearnMoreIcon`: This text is inside the info icon that triggers the tooltip in order to have text within the link.
+ */
+ assistiveText: prop_types_default.a.shape({
+ tooltipTipLearnMoreIcon: prop_types_default.a.string,
+ triggerLearnMoreIcon: prop_types_default.a.string
+ }),
+
+ /**
+ * Pass the one element that triggers the Tooltip as a child. It must be an element with `tabIndex` or an element that already has a `tabIndex` set such as an anchor or a button, so that keyboard users can tab to it.
+ */
+ children: prop_types_default.a.node,
+
+ /**
+ * Content inside Tooltip.
+ */
+ content: prop_types_default.a.node.isRequired,
+
+ /**
+ * CSS classes to be added to the popover dialog. That is the element with `.slds-popover` on it.
+ */
+ dialogClassName: prop_types_default.a.oneOfType([prop_types_default.a.array, prop_types_default.a.object, prop_types_default.a.string]),
+
+ /**
+ * By default, dialogs will flip their alignment (such as bottom to top) if they extend beyond a boundary element such as a scrolling parent or a window/viewpoint. `hasStaticAlignment` disables this behavior and allows this component to extend beyond boundary elements. _Not tested._
+ */
+ hasStaticAlignment: prop_types_default.a.bool,
+
+ /**
+ * Delay on Tooltip closing in milliseconds. Defaults to 50
+ */
+ hoverCloseDelay: prop_types_default.a.number,
+
+ /**
+ * Delay on Tooltip opening in milliseconds. Defaults to 0
+ */
+ hoverOpenDelay: prop_types_default.a.number,
+
+ /**
+ * A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the popover to the triggering element.
+ */
+ id: prop_types_default.a.string,
+
+ /**
+ * **Text labels for internationalization**
+ * This object is merged with the default props object on every render.
+ * * `learnMoreAfter`: This label appears in the tooltip after the info icon.
+ * * `learnMoreBefore`: This label appears in the tooltip before the info icon.
+ */
+ labels: prop_types_default.a.shape({
+ learnMoreAfter: prop_types_default.a.string,
+ learnMoreBefore: prop_types_default.a.string
+ }),
+
+ /**
+ * Forces tooltip to be open. A value of `false` will disable any interaction with the tooltip.
+ */
+ isOpen: prop_types_default.a.bool,
+
+ /**
+ * CSS classes to be added to tag with `slds-tooltip-trigger`.
+ */
+ triggerClassName: prop_types_default.a.oneOfType([prop_types_default.a.array, prop_types_default.a.object, prop_types_default.a.string]),
+
+ /**
+ * Please select one of the following:
+ * * `absolute` - (default) The dialog will use `position: absolute` and style attributes to position itself. This allows inverted placement or flipping of the dialog.
+ * * `overflowBoundaryElement` - The dialog will overflow scrolling parents. Use on elements that are aligned to the left or right of their target and don't care about the target being within a scrolling parent. Typically this is a popover or tooltip. Dropdown menus can usually open up and down if no room exists. In order to achieve this a portal element will be created and attached to `body`. This element will render into that detached render tree.
+ * * `relative` - No styling or portals will be used. Menus will be positioned relative to their triggers. This is a great choice for HTML snapshot testing.
+ */
+ position: prop_types_default.a.oneOf(['absolute', 'overflowBoundaryElement', 'relative']),
+
+ /**
+ * Custom styles to be added to wrapping triggering `div`.
+ */
+ triggerStyle: prop_types_default.a.object,
+
+ /**
+ * Determines the theme of tooltip: for informative purpose (blue background) or warning purpose (red background). This used to be `variant`.
+ */
+ theme: prop_types_default.a.oneOf(['info', 'error']),
+
+ /**
+ * Determines the type of the tooltip.
+ */
+ variant: prop_types_default.a.oneOf(['base', 'learnMore', 'list-item'])
+};
+var tooltip_defaultProps = {
+ assistiveText: {
+ tooltipTipLearnMoreIcon: 'this link',
+ triggerLearnMoreIcon: 'Help'
+ },
+ align: 'top',
+ // eslint-disable-next-line react/jsx-curly-brace-presence
+ content: external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement("span", null, 'Tooltip'),
+ labels: {
+ learnMoreAfter: 'to learn more.',
+ learnMoreBefore: 'Click'
+ },
+ hoverCloseDelay: 50,
+ hoverOpenDelay: 0,
+ position: 'absolute',
+ theme: 'info',
+ variant: 'base'
+};
+/**
+ * The PopoverTooltip component is variant of the Lightning Design System Popover component. This component wraps an element that triggers it to open. It must be a focusable child element (either a button or an anchor), so that keyboard users can navigate to it.
+ */
+
+var tooltip_Tooltip =
+/*#__PURE__*/
+function (_React$Component) {
+ tooltip_inherits(Tooltip, _React$Component);
+
+ function Tooltip(props) {
+ var _this;
+
+ tooltip_classCallCheck(this, Tooltip);
+
+ _this = tooltip_possibleConstructorReturn(this, tooltip_getPrototypeOf(Tooltip).call(this, props));
+
+ tooltip_defineProperty(tooltip_assertThisInitialized(_this), "handleCancel", function () {
+ clearTimeout(_this.tooltipTimeout);
+
+ _this.setState({
+ isOpen: false
+ });
+ });
+
+ tooltip_defineProperty(tooltip_assertThisInitialized(_this), "handleMouseEnter", function () {
+ clearTimeout(_this.tooltipTimeout);
+ _this.tooltipTimeout = setTimeout(function () {
+ if (!_this.isUnmounting) {
+ _this.setState({
+ isOpen: true
+ });
+ }
+ }, _this.props.hoverOpenDelay);
+ });
+
+ tooltip_defineProperty(tooltip_assertThisInitialized(_this), "handleMouseLeave", function () {
+ clearTimeout(_this.tooltipTimeout);
+ _this.tooltipTimeout = setTimeout(function () {
+ if (!_this.isUnmounting) {
+ _this.setState({
+ isOpen: false
+ });
+ }
+ }, _this.props.hoverCloseDelay);
+ });
+
+ tooltip_defineProperty(tooltip_assertThisInitialized(_this), "saveTriggerRef", function (component) {
+ _this.trigger = component; // yes, this is a re-render triggered by a render.
+ // Dialog/Popper.js cannot place the popover until
+ // the trigger/target DOM node is mounted. This
+ // way `findDOMNode` is not called and parent
+ // DOM nodes are not queried.
+
+ if (!_this.state.triggerRendered) {
+ _this.setState({
+ triggerRendered: true
+ });
+ }
+ });
+
+ _this.state = {
+ isOpen: false
+ };
+ _this.tooltipTimeout = {}; // `checkProps` issues warnings to developers about properties (similar to React's built in development tools)
+
+ tooltip_check_props(POPOVER_TOOLTIP, props, tooltip_component);
+ _this.generatedId = shortid_default.a.generate();
+ return _this;
+ }
+
+ tooltip_createClass(Tooltip, [{
+ key: "componentWillUnmount",
+ value: function componentWillUnmount() {
+ this.isUnmounting = true;
+ }
+ }, {
+ key: "getContent",
+ value: function getContent() {
+ var _this2 = this;
+
+ var children;
+ var noChildrenProvided = external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.Children.count(this.props.children) === 0;
+
+ if (noChildrenProvided && this.props.onClickTrigger) {
+ children = [external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement("a", {
+ href: "javascript:void(0)",
+ onClick: this.props.onClickTrigger
+ }, external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement(components_icon, {
+ category: "utility",
+ name: "info",
+ assistiveText: {
+ label: this.props.assistiveText.triggerLearnMoreIcon
+ },
+ size: "x-small"
+ }))];
+ } else if (noChildrenProvided) {
+ children = [external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement(components_button, {
+ "aria-disabled": true,
+ assistiveText: {
+ icon: this.props.assistiveText.triggerLearnMoreIcon
+ },
+ iconCategory: "utility",
+ iconName: "info",
+ variant: "icon"
+ })];
+ } else {
+ // eslint-disable-next-line prefer-destructuring
+ children = this.props.children;
+ }
+
+ return external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.Children.map(children, function (child, i) {
+ return external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.cloneElement(child, {
+ key: i,
+ // eslint-disable-line react/no-array-index-key
+ 'aria-describedby': _this2.getIsOpen() ? _this2.getId() : undefined,
+ onBlur: _this2.handleMouseLeave,
+ onFocus: _this2.handleMouseEnter,
+ onMouseEnter: _this2.handleMouseEnter,
+ onMouseLeave: _this2.handleMouseLeave
+ });
+ });
+ }
+ }, {
+ key: "getId",
+ value: function getId() {
+ return this.props.id || this.generatedId;
+ }
+ }, {
+ key: "getIsOpen",
+ value: function getIsOpen() {
+ return this.props.isOpen === undefined ? this.state.isOpen : this.props.isOpen;
+ }
+ }, {
+ key: "getTooltip",
+ value: function getTooltip() {
+ var _this3 = this;
+
+ var isOpen = this.getIsOpen();
+ var align = this.props.align; // REMOVE AT NEXT BREAKING CHANGE (v1.0 or v0.9)
+
+ var deprecatedWay = this.props.variant === 'error';
+ return isOpen ? external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement(dialog, {
+ closeOnTabKey: true,
+ hasNubbin: true,
+ contentsClassName: classnames_default()('slds-popover', 'slds-popover_tooltip', {
+ 'slds-theme_error': this.props.theme === 'error' || deprecatedWay
+ }, this.props.dialogClassName),
+ align: align,
+ context: this.context,
+ hasStaticAlignment: this.props.hasStaticAlignment,
+ onClose: this.handleCancel,
+ onRequestTargetElement: function onRequestTargetElement() {
+ return _this3.getTooltipTarget();
+ },
+ position: this.props.position,
+ variant: "tooltip",
+ containerProps: {
+ id: this.getId()
+ }
+ }, this.getTooltipContent()) : external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement("span", null);
+ }
+ }, {
+ key: "getTooltipContent",
+ value: function getTooltipContent() {
+ return external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement("div", {
+ className: "slds-popover__body"
+ }, this.props.content, this.props.variant === 'learnMore' && this.props.onClickTrigger ? external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement("div", {
+ className: "slds-m-top_x-small",
+ "aria-hidden": "true"
+ }, this.props.labels.learnMoreBefore, ' ', external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement(components_icon, {
+ assistiveText: {
+ label: this.props.assistiveText.tooltipTipLearnMoreIcon
+ },
+ category: "utility",
+ inverse: true,
+ name: "info",
+ size: "x-small"
+ }), ' ', this.props.labels.learnMoreAfter, ' ') : null);
+ }
+ }, {
+ key: "getTooltipTarget",
+ value: function getTooltipTarget() {
+ return this.props.target ? this.props.target : this.trigger;
+ }
+ }, {
+ key: "render",
+ value: function render() {
+ var containerStyles = tooltip_objectSpread({
+ display: 'inline-block'
+ }, this.props.triggerStyle);
+
+ return external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement("div", {
+ className: classnames_default()('slds-tooltip-trigger', this.props.triggerClassName),
+ style: containerStyles,
+ ref: this.saveTriggerRef
+ }, this.getContent(), this.getTooltip());
+ }
+ }]);
+
+ return Tooltip;
+}(external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.Component);
+
+tooltip_Tooltip.contextTypes = {
+ iconPath: prop_types_default.a.string
+};
+tooltip_Tooltip.displayName = displayName;
+tooltip_Tooltip.propTypes = tooltip_propTypes;
+tooltip_Tooltip.defaultProps = tooltip_defaultProps;
+/* harmony default export */ var tooltip = (tooltip_Tooltip);
+// CONCATENATED MODULE: ./utilities/get-aria-props.js
+function getAriaProps(props) {
+ return Object.keys(props).reduce(function (prev, key) {
+ if (key.substr(0, 5) === 'aria-') {
+ // eslint-disable-next-line no-param-reassign
+ prev[key] = props[key];
+ }
+
+ return prev;
+ }, {});
+}
+// CONCATENATED MODULE: ./utilities/get-form-props.js
+var formPropsSet = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget']);
+function getFormProps(props) {
+ return Object.keys(props).reduce(function (prev, key) {
+ if (formPropsSet.has(key)) {
+ // eslint-disable-next-line no-param-reassign
+ prev[key] = props[key];
+ }
+
+ return prev;
+ }, {});
+}
+// CONCATENATED MODULE: ./components/button/index.jsx
+function button_typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { button_typeof = function _typeof(obj) { return typeof obj; }; } else { button_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return button_typeof(obj); }
+
+function button_extends() { button_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 button_extends.apply(this, arguments); }
+
+function button_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { button_defineProperty(target, key, source[key]); }); } return target; }
+
+function button_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function button_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function button_createClass(Constructor, protoProps, staticProps) { if (protoProps) button_defineProperties(Constructor.prototype, protoProps); if (staticProps) button_defineProperties(Constructor, staticProps); return Constructor; }
+
+function button_possibleConstructorReturn(self, call) { if (call && (button_typeof(call) === "object" || typeof call === "function")) { return call; } return button_assertThisInitialized(self); }
+
+function button_getPrototypeOf(o) { button_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return button_getPrototypeOf(o); }
+
+function button_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function button_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) button_setPrototypeOf(subClass, superClass); }
+
+function button_setPrototypeOf(o, p) { button_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return button_setPrototypeOf(o, p); }
+
+function button_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
+
+/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+// Implements the [Button design pattern](https://lightningdesignsystem.com/components/buttons/) in React.
+// Based on SLDS v2.2.1
+
+
+
+
+
+
+ // eslint-disable-next-line import/no-cycle
+
+
+
+
+
+var button_defaultProps = {
+ assistiveText: {
+ icon: ''
+ },
+ disabled: false,
+ hint: false,
+ iconSize: 'medium',
+ responsive: false,
+ type: 'button',
+ variant: 'neutral'
+};
+/**
+ * The Button component is the Lightning Design System Button component. The Button should be used for label buttons, icon buttons, or buttons that have both labels and icons.
+ * Either a label or assistiveText.icon is required; see the Prop Details table below. For buttons that maintain selected/unselected states, use the ButtonStateful component.
+ * Although not listed in the prop table, all `aria-*` and `form*` props will be added to the `button` element if passed in.
+ */
+
+var button_Button =
+/*#__PURE__*/
+function (_React$Component) {
+ button_inherits(Button, _React$Component);
+
+ function Button(props) {
+ var _this;
+
+ button_classCallCheck(this, Button);
+
+ _this = button_possibleConstructorReturn(this, button_getPrototypeOf(Button).call(this, props)); // `checkProps` issues warnings to developers about properties (similar to React's built in development tools)
+
+ button_defineProperty(button_assertThisInitialized(_this), "getClassName", function () {
+ var _classNames;
+
+ var isIcon = _this.props.variant === 'icon';
+ var iconVariant = _this.props.iconVariant;
+ var iconMore = iconVariant === 'more';
+ var iconBorder = iconVariant === 'border';
+ var iconGlobalHeader = iconVariant === 'global-header';
+ var showButtonVariant = _this.props.variant !== 'base' && !iconVariant && !_this.props.inverse && _this.props.variant !== 'link' || iconVariant === 'bare';
+ var plainInverseBtn = _this.props.inverse && !isIcon;
+ var plainInverseIcon = _this.props.inverse && isIcon && !iconMore && !iconBorder;
+ var moreInverseIcon = _this.props.inverse && iconMore;
+ var borderInverseIcon = _this.props.inverse && iconBorder; // After hijacking `iconVariant` to let `Button` know it's in the header, we reset to container style for the actual button CSS.
+
+ if (iconVariant === 'global-header') {
+ iconVariant = 'container';
+ }
+
+ return classnames_default()((_classNames = {
+ 'slds-button': _this.props.variant !== 'link'
+ }, button_defineProperty(_classNames, "slds-button_".concat(_this.props.variant), showButtonVariant), button_defineProperty(_classNames, 'slds-button_inverse', plainInverseBtn), button_defineProperty(_classNames, 'slds-button_icon-inverse', plainInverseIcon || moreInverseIcon), button_defineProperty(_classNames, 'slds-button_icon-border-inverse', borderInverseIcon), button_defineProperty(_classNames, "slds-button_icon-".concat(iconVariant), iconVariant && !borderInverseIcon), button_defineProperty(_classNames, 'slds-global-header__button_icon', iconGlobalHeader), button_defineProperty(_classNames, "slds-button_icon-".concat(_this.props.iconSize), iconVariant && _this.props.iconSize !== 'medium'), button_defineProperty(_classNames, 'slds-button_reset', _this.props.variant === 'link'), button_defineProperty(_classNames, 'slds-text-link', _this.props.variant === 'link'), _classNames), _this.props.className);
+ });
+
+ button_defineProperty(button_assertThisInitialized(_this), "handleClick", function (event) {
+ if (_this.props.onClick) {
+ _this.props.onClick(event, {});
+ }
+ });
+
+ button_defineProperty(button_assertThisInitialized(_this), "renderIcon", function (name) {
+ var iconSize = !_this.props.iconSize || _this.props.iconVariant ? null : _this.props.iconSize;
+ return external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement(button_icon, {
+ category: _this.props.iconCategory || 'utility' // BREAKING CHANGE we will introduce in 1.0. For the moment, set default prop here if none specified.
+ ,
+ className: classnames_default()({
+ 'slds-global-header__icon': _this.props.iconVariant === 'global-header'
+ }, _this.props.iconClassName),
+ hint: _this.props.hint,
+ inverse: _this.props.inverse,
+ name: name,
+ path: _this.props.iconPath,
+ position: _this.props.iconPosition,
+ size: iconSize
+ });
+ });
+
+ button_defineProperty(button_assertThisInitialized(_this), "renderLabel", function () {
+ var iconOnly = _this.props.iconName || _this.props.iconPath;
+ var assistiveTextIcon = typeof _this.props.assistiveText === 'string' ? _this.props.assistiveText : button_objectSpread({}, button_defaultProps.assistiveText, _this.props.assistiveText).icon;
+ return iconOnly && assistiveTextIcon ? external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement("span", {
+ className: "slds-assistive-text"
+ }, assistiveTextIcon) : _this.props.label;
+ });
+
+ button_defineProperty(button_assertThisInitialized(_this), "renderButton", function () {
+ var ariaProps = getAriaProps(_this.props);
+ var formProps = getFormProps(_this.props);
+ return (// eslint-disable-next-line react/button-has-type
+ external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement("button", button_extends({
+ className: _this.getClassName(),
+ disabled: _this.props.disabled,
+ id: _this.props.id,
+ onBlur: _this.props.onBlur,
+ onClick: _this.handleClick,
+ onFocus: _this.props.onFocus,
+ onKeyDown: _this.props.onKeyDown,
+ onKeyPress: _this.props.onKeyPress,
+ onKeyUp: _this.props.onKeyUp,
+ onMouseDown: _this.props.onMouseDown,
+ onMouseEnter: _this.props.onMouseEnter,
+ onMouseLeave: _this.props.onMouseLeave,
+ onMouseUp: _this.props.onMouseUp,
+ ref: function ref(component) {
+ if (_this.props.buttonRef) {
+ _this.props.buttonRef(component);
+ }
+ },
+ tabIndex: _this.props.tabIndex,
+ title: _this.props.title,
+ type: _this.props.type || 'button',
+ style: _this.props.style
+ }, ariaProps, formProps), _this.props.iconPosition === 'right' ? _this.renderLabel() : null, _this.props.iconName || _this.props.iconPath ? _this.renderIcon(_this.props.iconName) : null, _this.props.iconVariant === 'more' ? external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement(button_icon, {
+ category: "utility",
+ name: "down",
+ size: "x-small",
+ className: _this.props.iconClassName
+ }) : null, _this.props.iconPosition === 'left' || !_this.props.iconPosition ? _this.renderLabel() : null, _this.props.children // eslint-disable-line react/prop-types
+ )
+ );
+ });
+
+ button_defineProperty(button_assertThisInitialized(_this), "renderTooltip", function () {
+ return external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.createElement(tooltip, {
+ content: _this.props.tooltip
+ }, _this.renderButton);
+ });
+
+ button_check_props(BUTTON, props, button_component);
+ return _this;
+ }
+
+ button_createClass(Button, [{
+ key: "render",
+ value: function render() {
+ return this.props.tooltip ? this.renderTooltip() : this.renderButton();
+ }
+ }]);
+
+ return Button;
+}(external_amd_react_commonjs_react_commonjs2_react_root_React_default.a.Component);
+
+button_defineProperty(button_Button, "displayName", BUTTON);
+
+button_defineProperty(button_Button, "propTypes", {
+ /**
+ * **Assistive text for accessibility.**
+ * This object is merged with the default props object on every render.
+ * * `icon`: Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means. If the button has an icon and a visible label, you can omit the assistiveText.icon prop and use the label prop.
+ */
+ assistiveText: prop_types_default.a.shape({
+ icon: prop_types_default.a.string
+ }),
+
+ /**
+ * Callback that passes in the DOM reference of the `