terra-list - npm Package Compare versions

Comparing version 4.51.5 to 4.52.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## 4.52.0 - (December 7, 2022)
+
+* Changed
+  * Sections and subsections updated to add programmatic context to communicate hierarchal relationships
+
 ## 4.51.5 - (July 5, 2022)
@@ -28,3 +33,3 @@
 
-* Changed 
+* Changed
   * Migrate docs to terra-core-docs.
@@ -31,0 +36,0 @@

lib/index.js

@@ -43,20 +43,11 @@ "use strict";
 exports.default = void 0;
-
 var _List = _interopRequireDefault(require("./List"));
-
 var _ListItem = _interopRequireDefault(require("./ListItem"));
-
 var _ListSection = _interopRequireDefault(require("./ListSection"));
-
 var _ListSubsection = _interopRequireDefault(require("./ListSubsection"));
-
 var _ListSectionHeader = _interopRequireDefault(require("./ListSectionHeader"));
-
 var _ListSubsectionHeader = _interopRequireDefault(require("./ListSubsectionHeader"));
-
 var _ListUtils = _interopRequireDefault(require("./ListUtils"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _List.default;
 exports.default = _default;

lib/List.js

@@ -7,27 +7,14 @@ "use strict";
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _bind = _interopRequireDefault(require("classnames/bind"));
-
 var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
-
 var _ListModule = _interopRequireDefault(require("./List.module.scss"));
-
 var _excluded = ["children", "dividerStyle", "paddingStyle", "refCallback", "role"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var cx = _bind.default.bind(_ListModule.default);
-
 var propTypes = {
@@ -38,3 +25,2 @@ /**
   children: _propTypes.default.node,
-
   /**
@@ -45,3 +31,2 @@ * Whether or not the list's child items should have a border color applied.
   dividerStyle: _propTypes.default.oneOf(['none', 'standard', 'bottom-only']),
-
   /**
@@ -52,3 +37,2 @@ * The padding styling to apply to the child list item content.
   paddingStyle: _propTypes.default.oneOf(['none', 'standard', 'compact']),
-
   /**
@@ -58,3 +42,2 @@ * Function callback for the ref of the ul.
   refCallback: _propTypes.default.func,
-
   /**
@@ -71,13 +54,10 @@ * Accessibility role of the list, defaults to 'none'. If creating a list with selectable items, pass 'listbox'.
 };
-
 var List = function List(_ref) {
   var children = _ref.children,
-      dividerStyle = _ref.dividerStyle,
-      paddingStyle = _ref.paddingStyle,
-      refCallback = _ref.refCallback,
-      role = _ref.role,
-      customProps = _objectWithoutProperties(_ref, _excluded);
-
+    dividerStyle = _ref.dividerStyle,
+    paddingStyle = _ref.paddingStyle,
+    refCallback = _ref.refCallback,
+    role = _ref.role,
+    customProps = _objectWithoutProperties(_ref, _excluded);
   var theme = _react.default.useContext(_terraThemeContext.default);
-
   var listClassNames = (0, _classnames.default)(cx('list', {
@@ -93,7 +73,5 @@ 'padding-standard': paddingStyle === 'standard'
   var attrSpread = {};
-
   if (role && role.length > 0 && role !== 'none') {
     attrSpread.role = role;
   }
-
   return /*#__PURE__*/_react.default.createElement("ul", _extends({}, customProps, attrSpread, {
@@ -104,3 +82,2 @@ className: listClassNames,
 };
-
 List.propTypes = propTypes;
@@ -107,0 +84,0 @@ List.defaultProps = defaultProps;

lib/ListItem.js

@@ -7,31 +7,16 @@ "use strict";
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _bind = _interopRequireDefault(require("classnames/bind"));
-
 var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
-
 var _IconChevronRight = _interopRequireDefault(require("terra-icon/lib/icon/IconChevronRight"));
-
 var _ListUtils = _interopRequireDefault(require("./ListUtils"));
-
 var _ListModule = _interopRequireDefault(require("./List.module.scss"));
-
 var _excluded = ["children", "hasChevron", "isSelected", "isSelectable", "metaData", "onBlur", "onClick", "onKeyDown", "onMouseDown", "onSelect", "refCallback"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var cx = _bind.default.bind(_ListModule.default);
-
 var propTypes = {
@@ -42,3 +27,2 @@ /**
   children: _propTypes.default.node,
-
   /**
@@ -48,3 +32,2 @@ * Whether or not the list item has a disclosure indicator presented.
   hasChevron: _propTypes.default.bool,
-
   /**
@@ -54,3 +37,2 @@ * Whether or not the list item should have selection styles applied.
   isSelected: _propTypes.default.bool,
-
   /**
@@ -60,3 +42,2 @@ * Whether or not the list item should have styles to indicate the item is selectable.
   isSelectable: _propTypes.default.bool,
-
   /**
@@ -67,3 +48,2 @@ * The associated metaData to be provided in the onSelect callback.
   metaData: _propTypes.default.object,
-
   /**
@@ -74,3 +54,2 @@ * Function callback for when the appropriate click or key action is performed.
   onSelect: _propTypes.default.func,
-
   /**
@@ -80,3 +59,2 @@ * Function callback for the ref of the li.
   refCallback: _propTypes.default.func,
-
   /**
@@ -86,3 +64,2 @@ * @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
   onBlur: _propTypes.default.func,
-
   /**
@@ -92,3 +69,2 @@ * @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
   onClick: _propTypes.default.func,
-
   /**
@@ -98,3 +74,2 @@ * @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
   onKeyDown: _propTypes.default.func,
-
   /**
@@ -111,19 +86,16 @@ * @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
 };
-
 var ListItem = function ListItem(_ref) {
   var children = _ref.children,
-      hasChevron = _ref.hasChevron,
-      isSelected = _ref.isSelected,
-      isSelectable = _ref.isSelectable,
-      metaData = _ref.metaData,
-      onBlur = _ref.onBlur,
-      onClick = _ref.onClick,
-      onKeyDown = _ref.onKeyDown,
-      onMouseDown = _ref.onMouseDown,
-      onSelect = _ref.onSelect,
-      refCallback = _ref.refCallback,
-      customProps = _objectWithoutProperties(_ref, _excluded);
-
+    hasChevron = _ref.hasChevron,
+    isSelected = _ref.isSelected,
+    isSelectable = _ref.isSelectable,
+    metaData = _ref.metaData,
+    onBlur = _ref.onBlur,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
+    onMouseDown = _ref.onMouseDown,
+    onSelect = _ref.onSelect,
+    refCallback = _ref.refCallback,
+    customProps = _objectWithoutProperties(_ref, _excluded);
   var theme = _react.default.useContext(_terraThemeContext.default);
-
   var listItemClassNames = (0, _classnames.default)(cx('list-item', {
@@ -135,3 +107,2 @@ selected: isSelected && isSelectable
   var attrSpread = {};
-
   if (isSelectable) {
@@ -151,3 +122,2 @@ attrSpread.onClick = _ListUtils.default.wrappedOnClickForItem(onClick, onSelect, metaData);
   }
-
   return /*#__PURE__*/_react.default.createElement("li", _extends({}, customProps, attrSpread, {
@@ -169,3 +139,2 @@ className: listItemClassNames,
 };
-
 ListItem.propTypes = propTypes;
@@ -172,0 +141,0 @@ ListItem.defaultProps = defaultProps;

lib/ListSection.js

@@ -7,19 +7,15 @@ "use strict";
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
+var _classnames = _interopRequireDefault(require("classnames"));
+var _bind = _interopRequireDefault(require("classnames/bind"));
+var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
 var _ListSectionHeader = _interopRequireDefault(require("./ListSectionHeader"));
-
+var _ListModule = _interopRequireDefault(require("./List.module.scss"));
 var _excluded = ["children", "isCollapsed", "isCollapsible"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
+var cx = _bind.default.bind(_ListModule.default);
 var propTypes = {
@@ -30,3 +26,2 @@ /**
   children: _propTypes.default.node,
-
   /**
@@ -36,3 +31,2 @@ * Whether or not the section is collapsed.
   isCollapsed: _propTypes.default.bool,
-
   /**
@@ -42,3 +36,2 @@ * Whether or not the section can be collapsed.
   isCollapsible: _propTypes.default.bool,
-
   /**
@@ -48,3 +41,2 @@ * Optionally sets the heading level. One of `1`, `2`, `3`, `4`, `5`, `6`.
   level: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6]),
-
   /**
@@ -55,3 +47,2 @@ * The associated metaData to be provided in the onSelect callback.
   metaData: _propTypes.default.object,
-
   /**
@@ -62,3 +53,2 @@ * Function callback for when the appropriate click or key action is performed.
   onSelect: _propTypes.default.func,
-
   /**
@@ -68,3 +58,2 @@ * Function callback passthrough for the ref of the section li.
   refCallback: _propTypes.default.func,
-
   /**
@@ -81,21 +70,20 @@ * Title text to be placed within the section header.
 };
-
 var ListSection = function ListSection(_ref) {
   var children = _ref.children,
-      isCollapsed = _ref.isCollapsed,
-      isCollapsible = _ref.isCollapsible,
-      customProps = _objectWithoutProperties(_ref, _excluded);
-
+    isCollapsed = _ref.isCollapsed,
+    isCollapsible = _ref.isCollapsible,
+    customProps = _objectWithoutProperties(_ref, _excluded);
   var sectionItems;
-
   if (!isCollapsible || !isCollapsed) {
     sectionItems = children;
   }
-
+  var theme = _react.default.useContext(_terraThemeContext.default);
+  var listClassNames = (0, _classnames.default)(cx('list', theme.className), customProps.className);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListSectionHeader.default, _extends({}, customProps, {
     isCollapsible: isCollapsible,
     isCollapsed: isCollapsed
-  })), sectionItems);
+  })), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("ul", _extends({}, customProps, {
+    className: listClassNames
+  }), sectionItems)));
 };
-
 ListSection.propTypes = propTypes;
@@ -102,0 +90,0 @@ ListSection.defaultProps = defaultProps;

lib/ListSectionHeader.js

@@ -7,29 +7,15 @@ "use strict";
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _bind = _interopRequireDefault(require("classnames/bind"));
-
 var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
-
 var _ListUtils = _interopRequireDefault(require("./ListUtils"));
-
 var _ListSectionHeaderModule = _interopRequireDefault(require("./ListSectionHeader.module.scss"));
-
 var _excluded = ["isCollapsed", "isCollapsible", "level", "metaData", "onBlur", "onClick", "onKeyDown", "onMouseDown", "onSelect", "refCallback", "title"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var cx = _bind.default.bind(_ListSectionHeaderModule.default);
-
 var propTypes = {
@@ -40,3 +26,2 @@ /**
   isCollapsed: _propTypes.default.bool,
-
   /**
@@ -46,3 +31,2 @@ * @private Whether or not the section can be collapsed.
   isCollapsible: _propTypes.default.bool,
-
   /**
@@ -52,3 +36,2 @@ * Optionally sets the heading level. One of `1`, `2`, `3`, `4`, `5`, `6`.
   level: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6]),
-
   /**
@@ -59,3 +42,2 @@ * @private The associated metaData to be provided in the onSelect callback.
   metaData: _propTypes.default.object,
-
   /**
@@ -66,3 +48,2 @@ * @private Function callback for when the appropriate click or key action is performed.
   onSelect: _propTypes.default.func,
-
   /**
@@ -72,3 +53,2 @@ * Function callback passthrough for the ref of the section li.
   refCallback: _propTypes.default.func,
-
   /**
@@ -78,3 +58,2 @@ * Title text to be placed within the section header.
   title: _propTypes.default.string.isRequired,
-
   /**
@@ -84,3 +63,2 @@ * @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
   onBlur: _propTypes.default.func,
-
   /**
@@ -90,3 +68,2 @@ * @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
   onClick: _propTypes.default.func,
-
   /**
@@ -96,3 +73,2 @@ * @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
   onKeyDown: _propTypes.default.func,
-
   /**
@@ -108,19 +84,16 @@ * @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
 };
-
 var ListSectionHeader = function ListSectionHeader(_ref) {
   var isCollapsed = _ref.isCollapsed,
-      isCollapsible = _ref.isCollapsible,
-      level = _ref.level,
-      metaData = _ref.metaData,
-      onBlur = _ref.onBlur,
-      onClick = _ref.onClick,
-      onKeyDown = _ref.onKeyDown,
-      onMouseDown = _ref.onMouseDown,
-      onSelect = _ref.onSelect,
-      refCallback = _ref.refCallback,
-      title = _ref.title,
-      customProps = _objectWithoutProperties(_ref, _excluded);
-
+    isCollapsible = _ref.isCollapsible,
+    level = _ref.level,
+    metaData = _ref.metaData,
+    onBlur = _ref.onBlur,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
+    onMouseDown = _ref.onMouseDown,
+    onSelect = _ref.onSelect,
+    refCallback = _ref.refCallback,
+    title = _ref.title,
+    customProps = _objectWithoutProperties(_ref, _excluded);
   var theme = _react.default.useContext(_terraThemeContext.default);
-
   var sectionHeaderClassNames = (0, _classnames.default)(cx('section-header', {
@@ -131,9 +104,6 @@ 'is-collapsible': isCollapsible
   var Element = "h".concat(level);
-
-  var titleElement = /*#__PURE__*/_react.default.createElement(Element, {
-    className: cx('title')
+  var titleElement = /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('fill')
   }, title);
-
   var accordionIcon;
-
   if (isCollapsible) {
@@ -147,11 +117,7 @@ accordionIcon = /*#__PURE__*/_react.default.createElement("div", {
     }));
-    titleElement = /*#__PURE__*/_react.default.createElement("div", {
-      className: cx('fill')
-    }, titleElement);
     attrSpread.onClick = _ListUtils.default.wrappedOnClickForItem(onClick, onSelect, metaData);
     attrSpread.onKeyDown = _ListUtils.default.wrappedOnKeyDownForItem(onKeyDown, onSelect, metaData);
     attrSpread.tabIndex = '0';
-    attrSpread.role = 'heading';
+    attrSpread.role = 'button';
     attrSpread['aria-expanded'] = !isCollapsed;
-    attrSpread['aria-level'] = 1;
     attrSpread['data-item-show-focus'] = 'true';
@@ -165,9 +131,9 @@ attrSpread.onBlur = _ListUtils.default.wrappedEventCallback(onBlur, function (event) {
   }
-
-  return /*#__PURE__*/_react.default.createElement("li", _extends({}, customProps, attrSpread, {
+  return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(Element, {
+    className: cx('title')
+  }, /*#__PURE__*/_react.default.createElement("div", _extends({}, customProps, attrSpread, {
     className: sectionHeaderClassNames,
     ref: refCallback
-  }), accordionIcon, titleElement);
+  }), accordionIcon, titleElement)));
 };
-
 ListSectionHeader.propTypes = propTypes;
@@ -174,0 +140,0 @@ ListSectionHeader.defaultProps = defaultProps;

lib/ListSubsection.js

@@ -7,19 +7,15 @@ "use strict";
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
+var _classnames = _interopRequireDefault(require("classnames"));
+var _bind = _interopRequireDefault(require("classnames/bind"));
+var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
 var _ListSubsectionHeader = _interopRequireDefault(require("./ListSubsectionHeader"));
-
+var _ListModule = _interopRequireDefault(require("./List.module.scss"));
 var _excluded = ["children", "isCollapsed", "isCollapsible"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
+var cx = _bind.default.bind(_ListModule.default);
 var propTypes = {
@@ -30,3 +26,2 @@ /**
   children: _propTypes.default.node,
-
   /**
@@ -36,3 +31,2 @@ * Whether or not the subsection is collapsed.
   isCollapsed: _propTypes.default.bool,
-
   /**
@@ -42,3 +36,2 @@ * Whether or not the subsection can be collapsed.
   isCollapsible: _propTypes.default.bool,
-
   /**
@@ -48,3 +41,2 @@ * Optionally sets the heading level. One of `2`, `3`, `4`, `5`, `6`.
   level: _propTypes.default.oneOf([2, 3, 4, 5, 6]),
-
   /**
@@ -55,3 +47,2 @@ * The associated metaData to be provided in the onSelect callback.
   metaData: _propTypes.default.object,
-
   /**
@@ -62,3 +53,2 @@ * Function callback for when the appropriate click or key action is performed.
   onSelect: _propTypes.default.func,
-
   /**
@@ -68,3 +58,2 @@ * Function callback passthrough for the ref of the section li.
   refCallback: _propTypes.default.func,
-
   /**
@@ -81,21 +70,20 @@ * Title text to be placed within the subsection header.
 };
-
 var ListSubsection = function ListSubsection(_ref) {
   var children = _ref.children,
-      isCollapsed = _ref.isCollapsed,
-      isCollapsible = _ref.isCollapsible,
-      customProps = _objectWithoutProperties(_ref, _excluded);
-
+    isCollapsed = _ref.isCollapsed,
+    isCollapsible = _ref.isCollapsible,
+    customProps = _objectWithoutProperties(_ref, _excluded);
   var sectionItems;
-
   if (!isCollapsible || !isCollapsed) {
     sectionItems = children;
   }
-
+  var theme = _react.default.useContext(_terraThemeContext.default);
+  var listClassNames = (0, _classnames.default)(cx('list', theme.className), customProps.className);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListSubsectionHeader.default, _extends({}, customProps, {
     isCollapsible: isCollapsible,
     isCollapsed: isCollapsed
-  })), sectionItems);
+  })), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("ul", _extends({}, customProps, {
+    className: listClassNames
+  }), sectionItems)));
 };
-
 ListSubsection.propTypes = propTypes;
@@ -102,0 +90,0 @@ ListSubsection.defaultProps = defaultProps;

lib/ListSubsectionHeader.js

@@ -7,29 +7,15 @@ "use strict";
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _bind = _interopRequireDefault(require("classnames/bind"));
-
 var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
-
 var _ListUtils = _interopRequireDefault(require("./ListUtils"));
-
 var _ListSubsectionHeaderModule = _interopRequireDefault(require("./ListSubsectionHeader.module.scss"));
-
 var _excluded = ["isCollapsed", "isCollapsible", "level", "metaData", "onBlur", "onClick", "onKeyDown", "onMouseDown", "onSelect", "refCallback", "title"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var cx = _bind.default.bind(_ListSubsectionHeaderModule.default);
-
 var propTypes = {
@@ -40,3 +26,2 @@ /**
   isCollapsed: _propTypes.default.bool,
-
   /**
@@ -46,3 +31,2 @@ * @private Whether or not the subsection can be collapsed.
   isCollapsible: _propTypes.default.bool,
-
   /**
@@ -52,3 +36,2 @@ * Optionally sets the heading level. One of `2`, `3`, `4`, `5`, `6`.
   level: _propTypes.default.oneOf([2, 3, 4, 5, 6]),
-
   /**
@@ -59,3 +42,2 @@ * @private The associated metaData to be provided in the onSelect callback.
   metaData: _propTypes.default.object,
-
   /**
@@ -66,3 +48,2 @@ * @private Function callback for when the appropriate click or key action is performed.
   onSelect: _propTypes.default.func,
-
   /**
@@ -72,3 +53,2 @@ * Function callback passthrough for the ref of the section li.
   refCallback: _propTypes.default.func,
-
   /**
@@ -78,3 +58,2 @@ * Title text to be placed within the subsection header.
   title: _propTypes.default.string.isRequired,
-
   /**
@@ -84,3 +63,2 @@ * @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
   onBlur: _propTypes.default.func,
-
   /**
@@ -90,3 +68,2 @@ * @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
   onClick: _propTypes.default.func,
-
   /**
@@ -96,3 +73,2 @@ * @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
   onKeyDown: _propTypes.default.func,
-
   /**
@@ -108,19 +84,16 @@ * @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
 };
-
 var ListSubsectionHeader = function ListSubsectionHeader(_ref) {
   var isCollapsed = _ref.isCollapsed,
-      isCollapsible = _ref.isCollapsible,
-      level = _ref.level,
-      metaData = _ref.metaData,
-      onBlur = _ref.onBlur,
-      onClick = _ref.onClick,
-      onKeyDown = _ref.onKeyDown,
-      onMouseDown = _ref.onMouseDown,
-      onSelect = _ref.onSelect,
-      refCallback = _ref.refCallback,
-      title = _ref.title,
-      customProps = _objectWithoutProperties(_ref, _excluded);
-
+    isCollapsible = _ref.isCollapsible,
+    level = _ref.level,
+    metaData = _ref.metaData,
+    onBlur = _ref.onBlur,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
+    onMouseDown = _ref.onMouseDown,
+    onSelect = _ref.onSelect,
+    refCallback = _ref.refCallback,
+    title = _ref.title,
+    customProps = _objectWithoutProperties(_ref, _excluded);
   var theme = _react.default.useContext(_terraThemeContext.default);
-
   var sectionHeaderClassNames = (0, _classnames.default)(cx('subsection-header', {
@@ -131,9 +104,6 @@ 'is-collapsible': isCollapsible
   var Element = "h".concat(level);
-
-  var titleElement = /*#__PURE__*/_react.default.createElement(Element, {
-    className: cx('title')
+  var titleElement = /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('fill')
   }, title);
-
   var accordionIcon;
-
   if (isCollapsible) {
@@ -147,11 +117,7 @@ accordionIcon = /*#__PURE__*/_react.default.createElement("div", {
     }));
-    titleElement = /*#__PURE__*/_react.default.createElement("div", {
-      className: cx('fill')
-    }, titleElement);
     attrSpread.onClick = _ListUtils.default.wrappedOnClickForItem(onClick, onSelect, metaData);
     attrSpread.onKeyDown = _ListUtils.default.wrappedOnKeyDownForItem(onKeyDown, onSelect, metaData);
     attrSpread.tabIndex = '0';
-    attrSpread.role = 'heading';
+    attrSpread.role = 'button';
     attrSpread['aria-expanded'] = !isCollapsed;
-    attrSpread['aria-level'] = 2;
     attrSpread['data-item-show-focus'] = 'true';
@@ -165,9 +131,9 @@ attrSpread.onBlur = _ListUtils.default.wrappedEventCallback(onBlur, function (event) {
   }
-
-  return /*#__PURE__*/_react.default.createElement("li", _extends({}, customProps, attrSpread, {
+  return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(Element, {
+    className: cx('title')
+  }, /*#__PURE__*/_react.default.createElement("div", _extends({}, customProps, attrSpread, {
     className: sectionHeaderClassNames,
     ref: refCallback
-  }), accordionIcon, titleElement);
+  }), accordionIcon, titleElement)));
 };
-
 ListSubsectionHeader.propTypes = propTypes;
@@ -174,0 +140,0 @@ ListSubsectionHeader.defaultProps = defaultProps;

lib/ListUtils.js

 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,20 +8,14 @@ value: true
 exports.default = void 0;
-
 var KeyCode = _interopRequireWildcard(require("keycode-js"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var shouldBeMultiSelectable = function shouldBeMultiSelectable(maxSelectionCount, selectedKeys, key) {
   return maxSelectionCount < 0 || selectedKeys.indexOf(key) >= 0 || selectedKeys.length < maxSelectionCount;
 };
+
 /**
  * Returns a new array, updated with the newKey being added or removed from the existing.
  */
-
-
 var updatedMultiSelectedKeys = function updatedMultiSelectedKeys(currentKeys, newKey) {
   var newKeys = [];
-
   if (currentKeys.length) {
@@ -38,10 +31,8 @@ if (currentKeys.indexOf(newKey) >= 0) {
   }
-
   return newKeys;
 };
+
 /**
  * Returns a wrapped onClick callback function. If the onSelect method isn't passed, we return the initial onClick.
  */
-
-
 var wrappedOnClickForItem = function wrappedOnClickForItem(onClick, onSelect, metaData) {
@@ -51,6 +42,4 @@ if (!onSelect) {
   }
-
   return function (event) {
     onSelect(event, metaData);
-
     if (onClick) {
@@ -61,7 +50,6 @@ onClick(event);
 };
+
 /**
  * Returns a wrapped onKeyDown callback function with enter and space keys triggering onSelect. If the onSelect method isn't passed, we return the initial onClick.
  */
-
-
 var wrappedOnKeyDownForItem = function wrappedOnKeyDownForItem(onKeyDown, onSelect, metaData) {
@@ -71,3 +59,2 @@ if (!onSelect) {
   }
-
   return function (event) {
@@ -77,3 +64,2 @@ if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
     }
-
     if (onKeyDown) {
@@ -84,7 +70,6 @@ onKeyDown(event);
 };
+
 /**
  * Returns a function that wraps both the old and new callback.
  */
-
-
 var wrappedEventCallback = function wrappedEventCallback(callback, newCallback) {
@@ -94,6 +79,4 @@ if (!callback) {
   }
-
   return function (event) {
     newCallback(event);
-
     if (callback) {
@@ -104,3 +87,2 @@ callback(event);
 };
-
 var SelectableUtils = {
@@ -107,0 +89,0 @@ updatedMultiSelectedKeys: updatedMultiSelectedKeys,

package.json

 {
   "name": "terra-list",
   "main": "lib/index.js",
-  "version": "4.51.5",
+  "version": "4.52.0",
   "description": "The Terra List is a structural component to arrange content within list/listitems.",
@@ -29,7 +29,7 @@ "repository": {
   "dependencies": {
-    "@cerner/terra-docs": "^1.7.1",
+    "@cerner/terra-docs": "^1.8.0",
     "classnames": "^2.2.5",
     "keycode-js": "^3.1.0",
     "prop-types": "^15.5.8",
-    "terra-icon": "^3.48.0",
+    "terra-icon": "^3.49.0",
     "terra-mixins": "^1.40.0",
@@ -51,3 +51,3 @@ "terra-theme-context": "^1.0.0"
   },
-  "gitHead": "5d980c62d9a2c86597ccd689865c4090fc26c4b0"
+  "gitHead": "421b2643a58e6de628aa789a9cdd0778b0a942a2"
 }

README.md

@@ -10,3 +10,3 @@ # Terra List
 - [Getting Started](#getting-started)
-- [Documentation](https://engineering.cerner.com/terra-ui/components/terra-list/list/list)
+- [Documentation](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/list/about)
 - [LICENSE](#license)
@@ -13,0 +13,0 @@

src/ListSection.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import classNamesBind from 'classnames/bind';
+import ThemeContext from 'terra-theme-context';
 import SectionHeader from './ListSectionHeader';
+import styles from './List.module.scss';
 
+const cx = classNamesBind.bind(styles);
+
 const propTypes = {
@@ -60,7 +66,20 @@ /**
 
+  const theme = React.useContext(ThemeContext);
+  const listClassNames = classNames(
+    cx(
+      'list',
+      theme.className,
+    ),
+    customProps.className,
+  );
+
   return (
-    <React.Fragment>
+    <>
       <SectionHeader {...customProps} isCollapsible={isCollapsible} isCollapsed={isCollapsed} />
-      {sectionItems}
-    </React.Fragment>
+      <li>
+        <ul {...customProps} className={listClassNames}>
+          {sectionItems}
+        </ul>
+      </li>
+    </>
   );
@@ -67,0 +86,0 @@ };

src/ListSectionHeader.jsx

@@ -93,3 +93,3 @@ import React from 'react';
   const Element = `h${level}`;
-  let titleElement = <Element className={cx('title')}>{title}</Element>;
+  const titleElement = <div className={cx('fill')}>{title}</div>;
   let accordionIcon;
@@ -102,7 +102,2 @@ if (isCollapsible) {
     );
-    titleElement = (
-      <div className={cx('fill')}>
-        {titleElement}
-      </div>
-    );
 
@@ -112,5 +107,4 @@ attrSpread.onClick = ListUtils.wrappedOnClickForItem(onClick, onSelect, metaData);
     attrSpread.tabIndex = '0';
-    attrSpread.role = 'heading';
+    attrSpread.role = 'button';
     attrSpread['aria-expanded'] = !isCollapsed;
-    attrSpread['aria-level'] = 1;
     attrSpread['data-item-show-focus'] = 'true';
@@ -122,5 +116,9 @@ attrSpread.onBlur = ListUtils.wrappedEventCallback(onBlur, event => event.currentTarget.setAttribute('data-item-show-focus', 'true'));
   return (
-    <li {...customProps} {...attrSpread} className={sectionHeaderClassNames} ref={refCallback}>
-      {accordionIcon}
-      {titleElement}
+    <li>
+      <Element className={cx('title')}>
+        <div {...customProps} {...attrSpread} className={sectionHeaderClassNames} ref={refCallback}>
+          {accordionIcon}
+          {titleElement}
+        </div>
+      </Element>
     </li>
@@ -127,0 +125,0 @@ );

src/ListSubsection.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import classNamesBind from 'classnames/bind';
+import ThemeContext from 'terra-theme-context';
 import SubsectionHeader from './ListSubsectionHeader';
+import styles from './List.module.scss';
 
+const cx = classNamesBind.bind(styles);
+
 const propTypes = {
@@ -60,7 +66,20 @@ /**
 
+  const theme = React.useContext(ThemeContext);
+  const listClassNames = classNames(
+    cx(
+      'list',
+      theme.className,
+    ),
+    customProps.className,
+  );
+
   return (
-    <React.Fragment>
+    <>
       <SubsectionHeader {...customProps} isCollapsible={isCollapsible} isCollapsed={isCollapsed} />
-      {sectionItems}
-    </React.Fragment>
+      <li>
+        <ul {...customProps} className={listClassNames}>
+          {sectionItems}
+        </ul>
+      </li>
+    </>
   );
@@ -67,0 +86,0 @@ };

src/ListSubsectionHeader.jsx

@@ -93,3 +93,3 @@ import React from 'react';
   const Element = `h${level}`;
-  let titleElement = <Element className={cx('title')}>{title}</Element>;
+  const titleElement = <div className={cx('fill')}>{title}</div>;
   let accordionIcon;
@@ -102,7 +102,2 @@ if (isCollapsible) {
     );
-    titleElement = (
-      <div className={cx('fill')}>
-        {titleElement}
-      </div>
-    );
 
@@ -112,5 +107,4 @@ attrSpread.onClick = ListUtils.wrappedOnClickForItem(onClick, onSelect, metaData);
     attrSpread.tabIndex = '0';
-    attrSpread.role = 'heading';
+    attrSpread.role = 'button';
     attrSpread['aria-expanded'] = !isCollapsed;
-    attrSpread['aria-level'] = 2;
     attrSpread['data-item-show-focus'] = 'true';
@@ -122,5 +116,9 @@ attrSpread.onBlur = ListUtils.wrappedEventCallback(onBlur, event => event.currentTarget.setAttribute('data-item-show-focus', 'true'));
   return (
-    <li {...customProps} {...attrSpread} className={sectionHeaderClassNames} ref={refCallback}>
-      {accordionIcon}
-      {titleElement}
+    <li>
+      <Element className={cx('title')}>
+        <div {...customProps} {...attrSpread} className={sectionHeaderClassNames} ref={refCallback}>
+          {accordionIcon}
+          {titleElement}
+        </div>
+      </Element>
     </li>
@@ -127,0 +125,0 @@ );

tests/jest/ListSectionHeader.test.jsx

@@ -31,8 +31,8 @@ import React from 'react';
   const shallowComponent = shallow(
-    <ListSectionHeader title="test" isCollapsible onSelect={mockCallBack} refCallback={jest.fn()} />,
+    <ListSectionHeader title="test" level={1} isCollapsible onSelect={mockCallBack} refCallback={jest.fn()} />,
   );
   expect(shallowComponent).toMatchSnapshot();
-  shallowComponent.find('li').simulate('click');
-  shallowComponent.find('li').simulate('keydown', { nativeEvent: { keyCode: 13 } });
-  shallowComponent.find('li').simulate('keydown', { nativeEvent: { keyCode: 32 } });
+  shallowComponent.find('div').first().simulate('click');
+  shallowComponent.find('div').first().simulate('keydown', { nativeEvent: { keyCode: 13 } });
+  shallowComponent.find('div').first().simulate('keydown', { nativeEvent: { keyCode: 32 } });
   expect(mockCallBack.mock.calls.length).toEqual(3);
@@ -39,0 +39,0 @@ });

tests/jest/ListSubsectionHeader.test.jsx

@@ -34,5 +34,5 @@ import React from 'react';
   expect(shallowComponent).toMatchSnapshot();
-  shallowComponent.find('li').simulate('click');
-  shallowComponent.find('li').simulate('keydown', { nativeEvent: { keyCode: 13 } });
-  shallowComponent.find('li').simulate('keydown', { nativeEvent: { keyCode: 32 } });
+  shallowComponent.find('div').first().simulate('click');
+  shallowComponent.find('div').first().simulate('keydown', { nativeEvent: { keyCode: 13 } });
+  shallowComponent.find('div').first().simulate('keydown', { nativeEvent: { keyCode: 32 } });
   expect(mockCallBack.mock.calls.length).toEqual(3);
@@ -39,0 +39,0 @@ });

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

136997

increased by1.53%

Lines of code

1742

increased by2.59%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@cerner/terra-docs@^1.8.0

• Updatedterra-icon@^3.49.0