+
++ Base Avatar +
+
+
+ 
+
+
+
+
+
+
+ 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,
+
+ /**
+ * Name of the icon. Visit Lightning Design System Icons to reference icon names.
+ */
+ iconName: _propTypes.default.string,
+
+ /**
+ * Determines the size of the icon.
+ */
+ iconSize: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large']),
+
+ /**
+ * 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'])
+}; // 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
+ };
+ return _this;
+ }
+
+ _createClass(ButtonStateful, [{
+ key: "componentWillMount",
+ value: function componentWillMount() {
+ (0, _checkProps.default)(_constants.BUTTON_STATEFUL, this.props, _docs.default);
+ }
+ }, {
+ key: "getClassName",
+ value: function getClassName(active) {
+ return (0, _classnames.default)(this.props.className, 'slds-button', {
+ 'slds-button_neutral': this.props.variant !== 'icon',
+ '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'
+ });
+ }
+ }, {
+ key: "render",
+ value: function render() {
+ var _this$props = this.props,
+ active = _this$props.active,
+ disabled = _this$props.disabled,
+ 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 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') {
+ 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
+ }, _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);
+ }
+
+ 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
+ }, _react.default.createElement("span", {
+ className: "slds-text-not-selected"
+ }, _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"
+ }, _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"
+ }, _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..ee8d117eaa
--- /dev/null
+++ b/components/button/__docs__/__snapshots__/storybook-stories.storyshot
@@ -0,0 +1,661 @@
+// 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-*` props will be added to the `button` element if passed in.
+ */
+
+var Button =
+/*#__PURE__*/
+function (_React$Component) {
+ _inherits(Button, _React$Component);
+
+ function Button() {
+ var _getPrototypeOf2;
+
+ var _this;
+
+ _classCallCheck(this, Button);
+
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+
+ _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Button)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+ _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);
+ return _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,
+ style: _this.props.style
+ }, ariaProps), _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);
+ });
+
+ return _this;
+ }
+
+ _createClass(Button, [{
+ key: "componentWillMount",
+ value: function componentWillMount() {
+ // `checkProps` issues warnings to developers about properties (similar to React's built in development tools)
+ (0, _checkProps.default)(_constants.BUTTON, this.props, _docs.default);
+ }
+ }, {
+ 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 `\n\t\t);\n\t}\n}\n\nButtonStateful.displayName = BUTTON_STATEFUL;\nButtonStateful.propTypes = propTypes;\nButtonStateful.defaultProps = defaultProps;\n\nexport default ButtonStateful;\n\n\n\n// WEBPACK FOOTER //\n// ./components/button-stateful/index.jsx","/* 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// # Card Component\n\n// Implements the [Card design pattern](https://www.lightningdesignsystem.com/components/cards/) in React.\n// Based on SLDS v2.2.1\n\n// ### React\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n// ### classNames\n// [github.com/JedWatson/classnames](https://github.com/JedWatson/classnames)\n// This project uses `classnames`, \"a simple javascript utility for conditionally\n// joining classNames together.\"\nimport classnames from 'classnames';\n\n// ## Children\nimport Header from './private/header';\nimport Body from './private/body';\nimport Footer from './private/footer';\nimport Empty from './empty';\n\nimport { CARD } from '../../utilities/constants';\n\nconst idSuffixes = {\n\tbody: '__body',\n\theaderActions: '__header-actions',\n\theading: '__heading',\n\tfilter: '__filter-input',\n};\n\n/**\n * Cards are used to apply a container around a related grouping of information. It has a header, a body, and an optional footer. It often contains a DataTable or Tile (coming soon). Actions associated with selected items or with all items are included within the header actions. Footer often contains pagination.\n */\nconst Card = function(props) {\n\tconst bodyId = props.id ? props.id + idSuffixes.body : null;\n\tconst filterId = props.id ? props.id + idSuffixes.filter : null;\n\tconst headingId = props.id ? props.id + idSuffixes.heading : null;\n\tconst headerActionsId = props.id ? props.id + idSuffixes.headerActions : null;\n\n\tlet { empty } = props;\n\tif (empty === true) {\n\t\t// Can be overridden by passing in a node to the empty prop\n\t\tempty = \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\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\n\n\n// WEBPACK FOOTER //\n// ./components/global-navigation-bar/dropdown.jsx","/* 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/* eslint-disable import/no-mutable-exports */\n\nimport sunsetProperty from '../../utilities/warning/sunset-property';\nimport getComponentDocFn from '../../utilities/get-component-doc';\n\nlet checkProps = function() {};\n\nif (process.env.NODE_ENV !== 'production') {\n\tcheckProps = function(COMPONENT, props, jsonDoc) {\n\t\tconst createDocUrl = getComponentDocFn(jsonDoc);\n\n\t\tif (typeof props.assistiveText === 'string') {\n\t\t\tsunsetProperty(\n\t\t\t\tCOMPONENT,\n\t\t\t\tprops.assistiveText,\n\t\t\t\t'assistiveText',\n\t\t\t\t`\\`assistiveText\\` as a string has been deprecated and is now an object to allow for multiple uses in the component. Please use \\`assistiveText.icon\\` instead. ${createDocUrl(\n\t\t\t\t\t'assistiveText'\n\t\t\t\t)}`\n\t\t\t);\n\t\t}\n\t};\n}\n\nexport default checkProps;\n\n\n\n// WEBPACK FOOTER //\n// ./components/global-navigation-bar/check-props.js","module.exports = {\"component\":\"global-navigation-bar\",\"status\":\"prototype\",\"display-name\":\"Global Navigation Bar\",\"last-accessibility-review\":{\"date-iso-8601\":\"2017/05/02\",\"commit-sha\":\"ad6b6c6523ee21cada11be5f7ea4d99abc530726\"},\"SLDS-component-path\":\"/components/global-navigation\",\"dependencies\":[{\"component\":\"button\"},{\"component\":\"dropdown\"},{\"component\":\"label\"},{\"component\":\"link\"},{\"component\":\"region\"}],\"url-slug\":\"global-navigation-bar\"}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./components/global-navigation-bar/docs.json\n// module id = 128\n// module chunks = 0","/* eslint-disable max-lines */\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// # Data Table Component\n\n// Implements the [Data Table design pattern](https://www.lightningdesignsystem.com/components/data-tables) in React.\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n// ### shortid\n// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)\n// shortid is a short, non-sequential, url-friendly, unique id generator\nimport shortid from 'shortid';\n\nimport classNames from 'classnames';\nimport assign from 'lodash.assign';\nimport reject from 'lodash.reject';\n\n// This component's `checkProps` which issues warnings to developers about properties when in development mode (similar to React's built in development tools)\nimport checkProps from './check-props';\nimport componentDoc from './docs.json';\n\nimport {\n\tcanUseDOM,\n\tcanUseEventListeners,\n} from '../../utilities/execution-environment';\nimport paletteColorsCommon from '../../utilities/design-tokens/dist/palette-colors.common';\n\n// ## Children\nimport DataTableCell from './cell';\nimport DataTableColumn from './column';\nimport DataTableHead from './private/head';\nimport DataTableRow from './private/row';\nimport DataTableRowActions from './row-actions';\n\nimport {\n\tDATA_TABLE,\n\tDATA_TABLE_CELL,\n\tDATA_TABLE_HEAD,\n\tDATA_TABLE_ROW,\n} from '../../utilities/constants';\n\n// Safely get the length of an array, returning 0 for invalid input.\nconst count = (array) => (Array.isArray(array) ? array.length : 0);\n\nconst defaultProps = {\n\tassistiveText: {\n\t\tactionsHeader: 'Actions',\n\t\tcolumnSort: 'Sort by: ',\n\t\tcolumnSortedAscending: 'Sorted Ascending',\n\t\tcolumnSortedDescending: 'Sorted Descending',\n\t\tselectAllRows: 'Select all rows',\n\t\tselectRow: 'Select row',\n\t},\n\tselection: [],\n};\n\n/**\n * DataTables support the display of structured data in rows and columns with an HTML table. To sort, filter or paginate the table, simply update the data passed in the items to the table and it will re-render itself appropriately. The table will throw a sort event as needed, and helper components for paging and filtering are coming soon.\n *\n */\nclass DataTable extends React.Component {\n\t// ### Display Name\n\t// Always use the canonical component name as the React display name.\n\tstatic displayName = DATA_TABLE;\n\n\t// ### Prop Types\n\tstatic propTypes = {\n\t\t/**\n\t\t * **Assistive text for accessibility.**\n\t\t * This object is merged with the default props object on every render.\n\t\t * * `actionsHeader`: Text for heading of actions column\n\t\t * * `columnSort`: Text for sort action on table column header\n\t\t * * `columnSortedAscending`: Text announced once a column is sorted in ascending order\n\t\t * * `columnSortedDescending`: Text announced once a column is sorted in descending order\n\t\t * * `selectAllRows`: Text for select all checkbox within the table header\n\t\t * * `selectRow`: Text for select row\n\t\t */\n\t\tassistiveText: PropTypes.shape({\n\t\t\tactionsHeader: PropTypes.string,\n\t\t\tcolumnSort: PropTypes.string,\n\t\t\tcolumnSortedAscending: PropTypes.string,\n\t\t\tcolumnSortedDescending: PropTypes.string,\n\t\t\tselectAllRows: PropTypes.string,\n\t\t\tselectRow: PropTypes.string,\n\t\t}),\n\t\t/**\n\t\t * Provide children of the type `{messageBody}
\n\t\t\t\t) : null}\n\t\t\t{this.props.property}
\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t{this.props.predicate}
\n\t\t\t\t\t\t\n\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\tcomponentWillMount() {\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\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\t\t\t