@procore/core-react 12.49.0 → 12.50.0

package/dist/Table/Table.styles.js

@@ -48,38 +48,38 @@ var tableCellInputErrorBorder = "1px solid ".concat(colors.red50);
 var tableRowBorderBottom = /*#__PURE__*/css(["border-bottom:", ";&:last-child{border-bottom:0;}"], tableBorder);
 export var StyledTableHeaderCellSortableContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTableHeaderCellSortableContainer",
-  componentId: "core-12_49_0__sc-9c7xd-0"
+  componentId: "core-12_50_0__sc-9c7xd-0"
 })([""]);
 export var StyledTableHeaderCellLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTableHeaderCellLabel",
-  componentId: "core-12_49_0__sc-9c7xd-1"
+  componentId: "core-12_50_0__sc-9c7xd-1"
 })(["display:inline-block;flex:1 1 auto;position:relative;"]);
 export var StyledTableHeaderCellIconWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTableHeaderCellIconWrapper",
-  componentId: "core-12_49_0__sc-9c7xd-2"
+  componentId: "core-12_50_0__sc-9c7xd-2"
 })(["height:20px;line-height:20px;padding:0 ", "px 0 ", "px;width:20px;"], spacing.lg, spacing.sm);
 export var StyledTableHeaderCellSortIcon = /*#__PURE__*/styled(ArrowUp).withConfig({
   displayName: "StyledTableHeaderCellSortIcon",
-  componentId: "core-12_49_0__sc-9c7xd-3"
+  componentId: "core-12_50_0__sc-9c7xd-3"
 })(["height:16px;width:16px;"]);
 export var StyledTableHeaderCellSortButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledTableHeaderCellSortButton",
-  componentId: "core-12_49_0__sc-9c7xd-4"
+  componentId: "core-12_50_0__sc-9c7xd-4"
 })(["background:transparent;border:none;color:inherit;display:flex;align-items:center;font:inherit;margin:0;min-height:", "px;padding:", "px;text-align:left;width:100%;&:focus-visible{", " outline-offset:-1px;}", "{min-height:14px;}", "{color:", ";opacity:0;transition:all 0.15s ease-in-out;position:absolute;}::before,::after{font-size:16px;}"], tableHeaderHeight, spacing.lg, getGapOutlineFocus('inside'), StyledTableHeaderCellLabel, StyledTableHeaderCellSortIcon, tableSortFontColor);
 export var StyledCheckbox = /*#__PURE__*/styled(Checkbox).withConfig({
   displayName: "StyledCheckbox",
-  componentId: "core-12_49_0__sc-9c7xd-5"
+  componentId: "core-12_50_0__sc-9c7xd-5"
 })([""]);
 export var StyledTableBodyCell = /*#__PURE__*/styled.td.withConfig({
   displayName: "StyledTableBodyCell",
-  componentId: "core-12_49_0__sc-9c7xd-6"
+  componentId: "core-12_50_0__sc-9c7xd-6"
 })(["position:relative;vertical-align:middle;", ""], function (_ref) {
   var $snugfit = _ref.$snugfit;
   return $snugfit && css(["white-space:nowrap;width:0.1%;"]);
 });
 export var StyledTableHeaderCell = /*#__PURE__*/styled.th.withConfig({
   displayName: "StyledTableHeaderCell",
-  componentId: "core-12_49_0__sc-9c7xd-7"
+  componentId: "core-12_50_0__sc-9c7xd-7"
 })(["", " font-weight:", ";border-right:", ";color:", ";height:", "px;padding:", "px;position:relative;text-align:left;transition:background-color 0.2s ease-in-out;&:last-child{border-right:0;}", "{display:flex;align-items:center;}", " ", " ", " ", ""], getTypographyIntent('small'), tableHeaderFontWeight, tableHeaderBorderRight, tableHeaderFontColor, tableHeaderHeight, tableHeaderPadding, StyledTableHeaderCellSortableContainer, function (_ref2) {
   var $sortable = _ref2.$sortable;
   return $sortable && css(["padding:0;&:hover{background-color:", ";}"], tableHeaderBgColorHover);
@@ -95,15 +95,15 @@ export var StyledTableHeaderCell = /*#__PURE__*/styled.th.withConfig({
 });
 export var StyledHead = /*#__PURE__*/styled.thead.withConfig({
   displayName: "StyledHead",
-  componentId: "core-12_49_0__sc-9c7xd-8"
+  componentId: "core-12_50_0__sc-9c7xd-8"
 })(["background-color:", ";transition:background-color 0.2s ease-in-out;", ""], tableHeaderBgColor, tableRowBorderBottom);
 export var StyledCaratWrapper = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledCaratWrapper",
-  componentId: "core-12_49_0__sc-9c7xd-9"
+  componentId: "core-12_50_0__sc-9c7xd-9"
 })([""]);
 export var StyledCarat = /*#__PURE__*/styled(ChevronRight).withConfig({
   displayName: "StyledCarat",
-  componentId: "core-12_49_0__sc-9c7xd-10"
+  componentId: "core-12_50_0__sc-9c7xd-10"
 })(["", ""], function (_ref6) {
   var $expanded = _ref6.$expanded;
   return $expanded && css(["transform:rotate(90deg);"]);
@@ -111,7 +111,7 @@ export var StyledCarat = /*#__PURE__*/styled(ChevronRight).withConfig({
 var cellInputCSS = /*#__PURE__*/css(["background-color:rgba(255,255,255,0);&&&{border:", ";border-radius:4px;width:100%;&::placeholder{color:", ";}&::-ms-clear{display:none;}&:hover{border-color:transparent;}&:focus{background-color:", ";border-style:solid;border-width:1px;border-color:", ";box-shadow:0 0 0 1px ", ";outline:none;}&:disabled{border:", ";color:", ";}}"], tableCellInputBorder, tableCellInputPlaceholderColor, colors.white, colors.blue40, colors.blue40, tableCellInputBorder, colors.gray70);
 export var StyledTableCellSelect = /*#__PURE__*/styled(Select).withConfig({
   displayName: "StyledTableCellSelect",
-  componentId: "core-12_49_0__sc-9c7xd-11"
+  componentId: "core-12_50_0__sc-9c7xd-11"
 })(["", ";background-color:transparent;border-color:transparent;height:auto;&:hover{background-color:transparent;}&:active:hover{border-color:", ";}&:focus,", ":focus-within &{background-color:", ";cursor:pointer;", " ", "{white-space:nowrap;}", "{opacity:1;pointer-events:all;}", " ", "}", " ", "{white-space:normal;}", ",& + ", "{opacity:0;pointer-events:none;}", " ", ""], cellInputCSS, colors.gray85, StyledSelectButtonWrapper, colors.white, getFocus(), StyledSelectButtonLabel, StyledSelectArrow, function (_ref7) {
   var $hasClearIcon = _ref7.$hasClearIcon;
   return $hasClearIcon && css(["& + ", "{opacity:1;pointer-events:all;}"], StyledSelectClearIcon);
@@ -132,25 +132,25 @@ export var StyledTableCellSelect = /*#__PURE__*/styled(Select).withConfig({
 });
 export var StyledTableCellInput = /*#__PURE__*/styled(Input).withConfig({
   displayName: "StyledTableCellInput",
-  componentId: "core-12_49_0__sc-9c7xd-12"
+  componentId: "core-12_50_0__sc-9c7xd-12"
 })(["", ""], cellInputCSS);
 export var StyledTableCellDateInput = /*#__PURE__*/styled(DateSelect).withConfig({
   displayName: "StyledTableCellDateInput",
-  componentId: "core-12_49_0__sc-9c7xd-13"
+  componentId: "core-12_50_0__sc-9c7xd-13"
 })(["background-color:transparent;border-color:transparent;&:active:hover{border-color:", ";}&&&:focus-within{", ";background-color:", ";}", " ", "{opacity:0;}", "{&[data-qa-table-visible='false']{opacity:0;}}", "{&[data-placeholder='true']{opacity:0;}}&:focus-within{", "{opacity:1;}", "{&[data-qa-table-visible='false']{opacity:1;}}", "{&[data-placeholder='true']{opacity:1;}}}"], colors.gray45, getFocus(), colors.white, function (_ref10) {
   var error = _ref10.error;
   return error && css(["border-color:", ";"], colors.red50);
 }, StyledDateInputIconContainer, StyledDateInputDelimiter, StyledDateInputSegment, StyledDateInputIconContainer, StyledDateInputDelimiter, StyledDateInputSegment);
 export var StyledTableCellTextArea = /*#__PURE__*/styled(TextArea).withConfig({
   displayName: "StyledTableCellTextArea",
-  componentId: "core-12_49_0__sc-9c7xd-14"
+  componentId: "core-12_50_0__sc-9c7xd-14"
 })(["", " &&{height:", "px;min-height:", "px;overflow:hidden;padding-top:", "px;resize:none;width:100%;", "}"], cellInputCSS, spacing.xxl, spacing.xxl, spacing.xs, function (_ref11) {
   var $resizable = _ref11.$resizable;
   return $resizable && css(["&:focus{min-height:64px;overflow:auto;resize:vertical;}"]);
 });
 export var StyledTableCellText = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTableCellText",
-  componentId: "core-12_49_0__sc-9c7xd-15"
+  componentId: "core-12_50_0__sc-9c7xd-15"
 })(["margin:", "px;display:flex;color:", ";", ""], spacing.lg, tableCellTextColor, function (_ref12) {
   var $percent = _ref12.$percent,
     $currency = _ref12.$currency;
@@ -158,22 +158,22 @@ export var StyledTableCellText = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledIconCell = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledIconCell",
-  componentId: "core-12_49_0__sc-9c7xd-16"
+  componentId: "core-12_50_0__sc-9c7xd-16"
 })(["display:flex;color:", ";"], tableCellIconColor);
 export var StyledOverdueIcon = /*#__PURE__*/styled(Error).withConfig({
   displayName: "StyledOverdueIcon",
-  componentId: "core-12_49_0__sc-9c7xd-17"
+  componentId: "core-12_50_0__sc-9c7xd-17"
 })(["color:", ";flex-shrink:0;align-self:center;", ""], colors.red50, function (_ref13) {
   var $rightAligned = _ref13.$rightAligned;
   return $rightAligned ? css(["margin-right:", "px;"], spacing.sm) : css(["margin-left:", "px;"], spacing.sm);
 });
 export var StyledSelectCellWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSelectCellWrapper",
-  componentId: "core-12_49_0__sc-9c7xd-18"
+  componentId: "core-12_50_0__sc-9c7xd-18"
 })(["display:flex;flex-direction:column;"]);
 export var StyledTableInlineEditErrorBox = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTableInlineEditErrorBox",
-  componentId: "core-12_49_0__sc-9c7xd-19"
+  componentId: "core-12_50_0__sc-9c7xd-19"
 })(["", " color:", ";font-style:italic;background:", ";border-radius:0 2px 2px 2px;box-shadow:0 1px 2px rgba(0,0,0,0.2),0 1px 3px rgba(0,0,0,0.1);padding:6px ", "px;position:absolute;max-width:160px;z-index:1;", ""], getTypographyIntent('small'), colors.white, colors.red50, spacing.md, function (_ref14) {
   var $size = _ref14.$size;
   var sizes = {
@@ -191,7 +191,7 @@ export var StyledTableInlineEditErrorBox = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledTableInlineEditContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTableInlineEditContainer",
-  componentId: "core-12_49_0__sc-9c7xd-20"
+  componentId: "core-12_50_0__sc-9c7xd-20"
 })(["background-color:", ";margin:", "px ", "px;position:relative;", " ", ""], tableBgColor, spacing.sm, spacing.xs, function (_ref15) {
   var $error = _ref15.$error;
   return $error && css(["position:static;background-color:", ";", ",", ",", ",", "{border:", ";border-radius:4px 4px 0 0;border-bottom:none;&:hover{border-bottom:none;}&:focus{background-color:", ";border:", ";border-bottom:none;}}"], tableCellInputErrorBgColor, StyledTableCellDateInput, StyledTableCellInput, StyledTableCellSelect, StyledTableCellTextArea, tableCellInputErrorBorder, tableCellInputFocusBgColor, tableCellInputFocusBorder);
@@ -215,26 +215,26 @@ export var StyledTableInlineEditContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledTableBodyRow = /*#__PURE__*/styled.tr.withConfig({
   displayName: "StyledTableBodyRow",
-  componentId: "core-12_49_0__sc-9c7xd-21"
+  componentId: "core-12_50_0__sc-9c7xd-21"
 })(["", " ", " &:focus-within{", "{background-color:", ";&.disabled{background-color:transparent;}}", ".error{background-color:", ";}}&:hover{", "{background-color:", ";cursor:pointer;&:hover{background-color:", ";}&.disabled{&,&:hover{background-color:transparent;cursor:default;}}}", ".error{background-color:", ";&:hover{background-color:", ";}", ",", ",", "{border:", ";border-bottom:none;&:hover{border-bottom:none;}&:focus{border:", ";border-bottom:none;}}}}"], tableRowBorderBottom, function (_ref17) {
   var $overdue = _ref17.$overdue;
   return $overdue && css(["", ",", ",", ",", ",", "{color:", ";}"], StyledTableCellText, StyledTableCellSelect, StyledTableCellInput, StyledTableCellDateInput, StyledTableCellTextArea, colors.red50);
 }, StyledTableInlineEditContainer, tableCellInputRowHoverBgColor, StyledTableInlineEditContainer, tableCellInputErrorBgColor, StyledTableInlineEditContainer, tableCellInputRowHoverBgColor, tableCellInputHoverBgColor, StyledTableInlineEditContainer, tableCellInputErrorBgColor, tableCellInputErrorBgColor, StyledTableCellInput, StyledTableCellSelect, StyledTableCellTextArea, tableCellInputErrorBorder, tableCellInputFocusBorder);
 export var StyledTableGroupRowContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTableGroupRowContent",
-  componentId: "core-12_49_0__sc-9c7xd-22"
+  componentId: "core-12_50_0__sc-9c7xd-22"
 })([""]);
 export var StyledTableGroupRowHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTableGroupRowHeader",
-  componentId: "core-12_49_0__sc-9c7xd-23"
+  componentId: "core-12_50_0__sc-9c7xd-23"
 })([""]);
 export var StyledTableGroupRowTitle = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTableGroupRowTitle",
-  componentId: "core-12_49_0__sc-9c7xd-24"
+  componentId: "core-12_50_0__sc-9c7xd-24"
 })([""]);
 export var StyledTableGroupRow = /*#__PURE__*/styled.tr.withConfig({
   displayName: "StyledTableGroupRow",
-  componentId: "core-12_49_0__sc-9c7xd-25"
+  componentId: "core-12_50_0__sc-9c7xd-25"
 })(["background-color:", ";", " ", "{margin-left:", "px;padding:", "px 0;display:flex;flex-direction:row;}", "{display:flex;align-items:center;}", "{font-weight:", ";padding-left:", "px;}", ""], tableGroupRowBgColor, tableRowBorderBottom, StyledTableGroupRowContent, spacing.lg, spacing.lg, StyledTableGroupRowHeader, StyledTableGroupRowTitle, tableHeaderFontWeight, spacing.lg, function (_ref18) {
   var $depth = _ref18.$depth;
   if (typeof $depth !== 'number') {
@@ -244,7 +244,7 @@ export var StyledTableGroupRow = /*#__PURE__*/styled.tr.withConfig({
 });
 export var StyledTableWrapper = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledTableWrapper",
-  componentId: "core-12_49_0__sc-9c7xd-26"
+  componentId: "core-12_50_0__sc-9c7xd-26"
 })(["border-radius:", "px;border:", ";", ",tbody{&:first-child{tr:first-child{", ",td{&:first-child{border-top-left-radius:", "px;}&:last-child{border-top-right-radius:", "px;}}}}&:last-child{tr:last-child{", ",td{&:first-child{border-bottom-left-radius:", "px;}&:last-child{border-bottom-right-radius:", "px;}}}}}", ""], tableBorderRadius, tableBorder, StyledHead, StyledTableHeaderCell, tableBorderRadius, tableBorderRadius, StyledTableHeaderCell, tableBorderRadius, tableBorderRadius, function (_ref19) {
   var $withShelf = _ref19.$withShelf;
   return $withShelf && css(["position:relative;height:100%;"]);
@@ -253,7 +253,7 @@ var BodyRow = StyledTableBodyRow;
 var GroupRow = StyledTableGroupRow;
 export var StyledTable = /*#__PURE__*/styled.table.withConfig({
   displayName: "StyledTable",
-  componentId: "core-12_49_0__sc-9c7xd-27"
+  componentId: "core-12_50_0__sc-9c7xd-27"
 })(["background-color:", ";border-collapse:collapse;border-radius:", "px;", " width:100%;td:first-child ", "{padding-left:", "px;}", " ", " + ", "{margin-left:", "px;padding-left:0;}", " ", " ", " + ", " > td{padding-left:", "px;}", " + ", " + ", " > td{padding-left:", "px;}", " + ", " + ", " + ", " > td{padding-left:", "px;}", " + ", " + ", " + ", " + ", " > td{padding-left:", "px;}", " ~ ", "{", "{padding-left:0;margin:0 ", "px;}& > td:first-child{padding-left:", "px;}}", " + ", " ~ ", "{& > td:first-child{padding-left:", "px;}}", " + ", " + ", " ~ ", "{& > td:first-child{padding-left:", "px;}}", " + ", " + ", " + ", " ~ ", "{& > td:first-child{padding-left:", "px;}}", " + ", " + ", " + ", " + ", " ~ ", "{& > td:first-child{padding-left:", "px;}}"], tableBgColor, tableBorderRadius, getTypographyIntent('body'), StyledCheckbox, spacing.lg, StyledTableGroupRow, StyledCaratWrapper, StyledCheckbox, spacing.xs, function (_ref20) {
   var $fixed = _ref20.$fixed;
   return $fixed && css(["table-layout:fixed;"]);
@@ -263,6 +263,6 @@ export var StyledTable = /*#__PURE__*/styled.table.withConfig({
 }, GroupRow, GroupRow, tableGroupHeaderRowIndentation, GroupRow, GroupRow, GroupRow, 2 * tableGroupHeaderRowIndentation, GroupRow, GroupRow, GroupRow, GroupRow, 3 * tableGroupHeaderRowIndentation, GroupRow, GroupRow, GroupRow, GroupRow, GroupRow, 4 * tableGroupHeaderRowIndentation, GroupRow, BodyRow, StyledCheckbox, spacing.xs, tableGroupHeaderRowIndentation + tableGroupBodyRowIndentation, GroupRow, GroupRow, BodyRow, 2 * tableGroupHeaderRowIndentation + tableGroupBodyRowIndentation, GroupRow, GroupRow, GroupRow, BodyRow, 3 * tableGroupHeaderRowIndentation + tableGroupBodyRowIndentation, GroupRow, GroupRow, GroupRow, GroupRow, BodyRow, 4 * tableGroupHeaderRowIndentation + tableGroupBodyRowIndentation, GroupRow, GroupRow, GroupRow, GroupRow, GroupRow, BodyRow, 5 * tableGroupHeaderRowIndentation + tableGroupBodyRowIndentation);
 export var StyledLoadingContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLoadingContainer",
-  componentId: "core-12_49_0__sc-9c7xd-28"
+  componentId: "core-12_50_0__sc-9c7xd-28"
 })(["cursor:default;align-items:center;background:", ";display:flex;height:100%;justify-content:center;opacity:0.9;position:absolute;width:100%;z-index:2;"], colors.gray96);
 //# sourceMappingURL=Table.styles.js.map

package/dist/TableShelf/TableShelf.styles.js

@@ -4,22 +4,22 @@ import { spacing } from '../_styles/spacing';
 var tableShelfShadow = '-4px 0px 5px 0px rgba(112, 112, 112, 0.1)';
 export var StyledShelf = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledShelf",
-  componentId: "core-12_49_0__sc-a6498a-0"
+  componentId: "core-12_50_0__sc-a6498a-0"
 })(["position:absolute;right:0;top:0;bottom:0;box-shadow:", ";background-color:", ";"], tableShelfShadow, colors.white);
 export var StyledHead = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHead",
-  componentId: "core-12_49_0__sc-a6498a-1"
+  componentId: "core-12_50_0__sc-a6498a-1"
 })(["background-color:", ";transition:background-color 0.2s ease-in-out;"], colors.gray96);
 export var StyledBodyRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBodyRow",
-  componentId: "core-12_49_0__sc-a6498a-2"
+  componentId: "core-12_50_0__sc-a6498a-2"
 })(["border-top:1px solid ", ";transition:background-color 0.2s ease-in-out;"], colors.gray85);
 export var StyledHeadCell = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeadCell",
-  componentId: "core-12_49_0__sc-a6498a-3"
+  componentId: "core-12_50_0__sc-a6498a-3"
 })(["text-align:left;padding:", "px;line-height:13px;"], spacing.lg);
 export var StyledBodyCell = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBodyCell",
-  componentId: "core-12_49_0__sc-a6498a-4"
+  componentId: "core-12_50_0__sc-a6498a-4"
 })(["padding:", "px;line-height:13px;"], spacing.lg);
 //# sourceMappingURL=TableShelf.styles.js.map

package/dist/Tabs/Tablist.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { TabListProps, TabListTabProps, TabPanelProps } from './Tablist.types';
+declare function TabListTab(props: TabListTabProps): React.JSX.Element;
+declare namespace TabListTab {
+    var displayName: string;
+}
+export declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>> & {
+    Tab: typeof TabListTab;
+};
+export {};

package/dist/Tabs/Tablist.js

@@ -0,0 +1,45 @@
+var _excluded = ["children", "idPanel"],
+  _excluded2 = ["idPanel", "selected", "children"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { addSubcomponents } from '../_utils/addSubcomponents';
+import { Tabs } from './Tabs';
+var TabList_ = /*#__PURE__*/React.forwardRef(function TabList(props, ref) {
+  return /*#__PURE__*/React.createElement(Tabs, _extends({
+    ref: ref,
+    role: "tablist"
+  }, props));
+});
+function TabListTab(props) {
+  var children = props.children,
+    idPanel = props.idPanel,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(Tabs.Tab, _extends({
+    role: "tab",
+    "aria-controls": "panel__".concat(idPanel),
+    id: "tab__".concat(idPanel)
+  }, rest), /*#__PURE__*/React.createElement(Tabs.Link, null, children));
+}
+export var TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(_ref, ref) {
+  var idPanel = _ref.idPanel,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "tabpanel",
+    "aria-labelledby": "tab__".concat(idPanel),
+    hidden: !selected,
+    id: "panel__".concat(idPanel),
+    ref: ref
+  }, props), children);
+});
+TabListTab.displayName = 'TabList.Tab';
+TabPanel.displayName = 'TabPanel';
+export var TabList = addSubcomponents({
+  Tab: TabListTab
+}, TabList_);
+TabList.displayName = 'TabList';
+//# sourceMappingURL=Tablist.js.map

package/dist/Tabs/Tablist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tablist.js","names":["React","addSubcomponents","Tabs","TabList_","forwardRef","TabList","props","ref","createElement","_extends","role","TabListTab","children","idPanel","rest","_objectWithoutProperties","_excluded","Tab","concat","id","Link","TabPanel","_ref","_ref$selected","selected","_excluded2","hidden","displayName"],"sources":["../../src/Tabs/Tablist.tsx"],"sourcesContent":["import React from 'react'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type {\n  TabListProps,\n  TabListTabProps,\n  TabPanelProps,\n} from './Tablist.types'\nimport { Tabs } from './Tabs'\n\nconst TabList_ = React.forwardRef<HTMLDivElement, TabListProps>(\n  function TabList(props, ref) {\n    return <Tabs ref={ref} role=\"tablist\" {...props} />\n  }\n)\n\nfunction TabListTab(props: TabListTabProps) {\n  const { children, idPanel, ...rest } = props\n\n  return (\n    <Tabs.Tab\n      role=\"tab\"\n      aria-controls={`panel__${idPanel}`}\n      id={`tab__${idPanel}`}\n      {...rest}\n    >\n      <Tabs.Link>{children}</Tabs.Link>\n    </Tabs.Tab>\n  )\n}\n\nexport const TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(\n  function TabPanel(\n    {\n      // @ts-expect-error TabPanelProps is typed for this automatic prop, or a set of aria props to replace it\n      idPanel,\n      selected = false,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    return (\n      <div\n        role=\"tabpanel\"\n        aria-labelledby={`tab__${idPanel}`}\n        hidden={!selected}\n        id={`panel__${idPanel}`}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n)\n\nTabListTab.displayName = 'TabList.Tab'\nTabPanel.displayName = 'TabPanel'\n\nexport const TabList = addSubcomponents(\n  {\n    Tab: TabListTab,\n  },\n  TabList_\n)\n\nTabList.displayName = 'TabList'\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB,QAAQ,4BAA4B;AAM7D,SAASC,IAAI,QAAQ,QAAQ;AAE7B,IAAMC,QAAQ,gBAAGH,KAAK,CAACI,UAAU,CAC/B,SAASC,OAAOA,CAACC,KAAK,EAAEC,GAAG,EAAE;EAC3B,oBAAOP,KAAA,CAAAQ,aAAA,CAACN,IAAI,EAAAO,QAAA;IAACF,GAAG,EAAEA,GAAI;IAACG,IAAI,EAAC;EAAS,GAAKJ,KAAK,CAAG,CAAC;AACrD,CACF,CAAC;AAED,SAASK,UAAUA,CAACL,KAAsB,EAAE;EAC1C,IAAQM,QAAQ,GAAuBN,KAAK,CAApCM,QAAQ;IAAEC,OAAO,GAAcP,KAAK,CAA1BO,OAAO;IAAKC,IAAI,GAAAC,wBAAA,CAAKT,KAAK,EAAAU,SAAA;EAE5C,oBACEhB,KAAA,CAAAQ,aAAA,CAACN,IAAI,CAACe,GAAG,EAAAR,QAAA;IACPC,IAAI,EAAC,KAAK;IACV,2BAAAQ,MAAA,CAAyBL,OAAO,CAAG;IACnCM,EAAE,UAAAD,MAAA,CAAUL,OAAO;EAAG,GAClBC,IAAI,gBAERd,KAAA,CAAAQ,aAAA,CAACN,IAAI,CAACkB,IAAI,QAAER,QAAoB,CACxB,CAAC;AAEf;AAEA,OAAO,IAAMS,QAAQ,gBAAGrB,KAAK,CAACI,UAAU,CACtC,SAASiB,QAAQA,CAAAC,IAAA,EAQff,GAAG,EACH;EAAA,IANEM,OAAO,GAAAS,IAAA,CAAPT,OAAO;IAAAU,aAAA,GAAAD,IAAA,CACPE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAChBX,QAAQ,GAAAU,IAAA,CAARV,QAAQ;IACLN,KAAK,GAAAS,wBAAA,CAAAO,IAAA,EAAAG,UAAA;EAIV,oBACEzB,KAAA,CAAAQ,aAAA,QAAAC,QAAA;IACEC,IAAI,EAAC,UAAU;IACf,2BAAAQ,MAAA,CAAyBL,OAAO,CAAG;IACnCa,MAAM,EAAE,CAACF,QAAS;IAClBL,EAAE,YAAAD,MAAA,CAAYL,OAAO,CAAG;IACxBN,GAAG,EAAEA;EAAI,GACLD,KAAK,GAERM,QACE,CAAC;AAEV,CACF,CAAC;AAEDD,UAAU,CAACgB,WAAW,GAAG,aAAa;AACtCN,QAAQ,CAACM,WAAW,GAAG,UAAU;AAEjC,OAAO,IAAMtB,OAAO,GAAGJ,gBAAgB,CACrC;EACEgB,GAAG,EAAEN;AACP,CAAC,EACDR,QACF,CAAC;AAEDE,OAAO,CAACsB,WAAW,GAAG,SAAS"}

package/dist/Tabs/Tablist.types.d.ts

@@ -0,0 +1,58 @@
+import type React from 'react';
+import type { TabProps } from './Tabs.types';
+export declare type TabListProps = {
+    /**
+     * Accessible name for the tablist when no visible label element is referenced.
+     * Provide this OR `aria-labelledby`.
+     */
+    'aria-label': string;
+    'aria-labelledby'?: never;
+    /**
+     * One or more `TabList.Tab` children that make up the tablist.
+     */
+    children: React.ReactNode;
+} | {
+    'aria-label'?: never;
+    /**
+     * @a11y Required - Id reference to visible labeling text for the tablist.
+     */
+    'aria-labelledby': string;
+    /**
+     * One or more `TabList.Tab` children that make up the tablist.
+     */
+    children: React.ReactNode;
+};
+export declare type TabListTabProps = Pick<TabProps<'tab'>, 'selected' | 'as' | 'href' | 'onPress' | 'onClick'> & {
+    /**
+     * Visible tab label content.
+     */
+    children: React.ReactNode;
+    /**
+     * @a11y Required shared id used to match this tab to its `TabPanel`.
+     * This becomes the tab `aria-controls` property.
+     */
+    idPanel: string;
+};
+export declare type TabPanelProps = {
+    /**
+     * Panel content for the associated tab.
+     */
+    children?: React.ReactNode;
+    /**
+     * @a11y Required shared id that must match the controlling `TabList.Tab idPanel`.
+     * Used to derive panel id/label relationships in the tab pattern.
+     */
+    idPanel: string;
+    /**
+     * Whether this panel is visible. Keep this synchronized with the selected tab state.
+     */
+    selected?: boolean;
+} | {
+    children?: React.ReactNode;
+    id: string;
+    'aria-labelledby': string;
+    /**
+     * Whether this panel is visible. Keep this synchronized with the selected tab state.
+     */
+    selected?: boolean;
+};

package/dist/Tabs/Tablist.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tablist.types.js.map

package/dist/Tabs/Tablist.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tablist.types.js","names":[],"sources":["../../src/Tabs/Tablist.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { TabProps } from './Tabs.types'\n\nexport type TabListProps =\n  | {\n      /**\n       * Accessible name for the tablist when no visible label element is referenced.\n       * Provide this OR `aria-labelledby`.\n       */\n      'aria-label': string\n      'aria-labelledby'?: never\n      /**\n       * One or more `TabList.Tab` children that make up the tablist.\n       */\n      children: React.ReactNode\n    }\n  | {\n      'aria-label'?: never\n      /**\n       * @a11y Required - Id reference to visible labeling text for the tablist.\n       */\n      'aria-labelledby': string\n      /**\n       * One or more `TabList.Tab` children that make up the tablist.\n       */\n      children: React.ReactNode\n    }\n\nexport type TabListTabProps = Pick<\n  TabProps<'tab'>,\n  'selected' | 'as' | 'href' | 'onPress' | 'onClick'\n> & {\n  /**\n   * Visible tab label content.\n   */\n  children: React.ReactNode\n  /**\n   * @a11y Required shared id used to match this tab to its `TabPanel`.\n   * This becomes the tab `aria-controls` property.\n   */\n  idPanel: string\n}\n\nexport type TabPanelProps =\n  | {\n      /**\n       * Panel content for the associated tab.\n       */\n      children?: React.ReactNode\n      /**\n       * @a11y Required shared id that must match the controlling `TabList.Tab idPanel`.\n       * Used to derive panel id/label relationships in the tab pattern.\n       */\n      idPanel: string\n      /**\n       * Whether this panel is visible. Keep this synchronized with the selected tab state.\n       */\n      selected?: boolean\n    }\n  | {\n      children?: React.ReactNode\n      id: string\n      'aria-labelledby': string\n      /**\n       * Whether this panel is visible. Keep this synchronized with the selected tab state.\n       */\n      selected?: boolean\n    }\n"],"mappings":""}

package/dist/Tabs/Tabs.js

@@ -36,6 +36,33 @@ import { getStyledComponents, StyledOverlay, StyledTabList, StyledTabs } from '.
 var ExtraTabSpacing = spacing.xxl;
 var HelixHeaderExtraTabSpacing = spacing.sm;
 function noop() {}
+var ROVING_TAB_KEYS = ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
+function moveRovingFocusWithinTablist(event) {
+  var key = event.key;
+  if (!ROVING_TAB_KEYS.includes(key)) return false;
+  event.preventDefault();
+  var current = event.currentTarget;
+  var tablist = current.closest('[role="tablist"]');
+  if (!tablist) return;
+  var tabs = Array.from(tablist.querySelectorAll('[role="tab"], button')).filter(function (tab) {
+    if (tab.hasAttribute('disabled')) return false;
+    var styles = window.getComputedStyle(tab);
+    var isHidden = styles.visibility === 'hidden' || styles.pointerEvents === 'none';
+    return !isHidden;
+  });
+  if (!tabs.length) return;
+  var currentIndex = tabs.indexOf(current);
+  if (currentIndex < 0) return;
+  var nextIndex = currentIndex;
+  if (key === 'ArrowRight') nextIndex = (currentIndex + 1) % tabs.length;
+  if (key === 'ArrowLeft') nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+  if (key === 'Home') nextIndex = 0;
+  if (key === 'End') nextIndex = tabs.length - 1;
+  var nextTab = tabs[nextIndex];
+  current.tabIndex = -1;
+  nextTab.tabIndex = 0;
+  nextTab.focus();
+}
 export var Link = /*#__PURE__*/React.forwardRef(function Link(_ref, ref) {
   var children = _ref.children,
     _ref$UNSAFE_helixHead = _ref.UNSAFE_helixHeader,
@@ -91,6 +118,16 @@ function TabInternal(_ref2, ref) {
   // The no role check addition allows overrides / opt-out, for like
   // role = presentation or role = link having click handlers for some reason.
   var shouldDefaultToButton = !role && onPress || !role && onClick;
+  function onTablistTabKeyDown(event) {
+    // props.onKeyDown?.(event)
+    if (event.defaultPrevented) return;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.currentTarget.click();
+      return;
+    }
+    moveRovingFocusWithinTablist(event);
+  }
   var a11yProps = role === 'button' || shouldDefaultToButton ? _objectSpread(_objectSpread({}, buttonProps), {}, {
     role: 'button',
     'aria-current': selected || active,
@@ -102,10 +139,16 @@ function TabInternal(_ref2, ref) {
     as: as || 'a',
     $clickable: !disabled
   }) : role === 'tab' ? {
-    as: as,
     role: 'tab',
+    id: props.id,
+    'aria-controls': props['aria-controls'],
+    'aria-selected': selected || active ? true : false,
+    tabIndex: selected || active ? 0 : -1,
     onBlur: onBlur,
-    onFocus: onFocus
+    onFocus: onFocus,
+    onClick: onClick || onPress,
+    onKeyDown: onTablistTabKeyDown,
+    as: as ? as : props.href ? 'a' : 'button'
   } : {
     as: as,
     role: role,
@@ -123,7 +166,7 @@ function TabInternal(_ref2, ref) {
 
   // For button/link roles, spread buttonPropsBase to preserve useButton's onClick
   // For other roles, spread all props
-  var roleSpecificProps = role === 'button' || role === 'link' || shouldDefaultToButton ? buttonPropsBase : props;
+  var roleSpecificProps = role === 'button' || role === 'link' || shouldDefaultToButton ? buttonPropsBase : role === 'tab' ? props : props;
   return /*#__PURE__*/React.createElement(Styled.Tab, _extends({
     $selected: tabSelected,
     $dark: props.dark,
@@ -175,7 +218,9 @@ export var MoreMenu = /*#__PURE__*/React.forwardRef(function MoreMenu(_ref4, ref
         key: i,
         selected: child.props.selected || child.props.active
       }, /*#__PURE__*/React.cloneElement(child, {
-        ref: null
+        ref: null,
+        tabIndex: 0,
+        role: child.props.role === 'tab' ? undefined : child.props.role
       }));
     }
   }))));
@@ -237,6 +282,13 @@ var Tabs_ = /*#__PURE__*/React.forwardRef(function Tabs(_ref5, ref) {
     return /*#__PURE__*/React.isValidElement(child) && (child.props.active || child.props.selected);
   });
   var Styled = getStyledComponents(UNSAFE_helixHeader);
+  var moreButtonProps = props.role === 'tablist' ? {
+    role: 'tab',
+    tabIndex: -1,
+    onKeyDown: function onMoreKeyDown(event) {
+      moveRovingFocusWithinTablist(event);
+    }
+  } : {};
   var moreDropdownTrigger = cutoffIndex >= 1 ? /*#__PURE__*/React.createElement(OverlayTrigger, {
     "aria-label": i18n.t('core.tabs.more'),
     beforeShow: function beforeShow() {
@@ -250,12 +302,12 @@ var Tabs_ = /*#__PURE__*/React.forwardRef(function Tabs(_ref5, ref) {
     overlay: /*#__PURE__*/React.createElement(MoreMenu, null, overflowing),
     ref: ref,
     role: "dialog"
-  }, /*#__PURE__*/React.createElement(Styled.DropdownTab, {
+  }, /*#__PURE__*/React.createElement(Styled.DropdownTab, _extends({
     $selected: isOverflowingSelected,
     $dark: dark,
     "aria-hidden": !overflowing.length,
     as: "button"
-  }, /*#__PURE__*/React.createElement(Styled.DropdownTabInner, {
+  }, moreButtonProps), /*#__PURE__*/React.createElement(Styled.DropdownTabInner, {
     $selected: isOverflowingSelected,
     $dark: dark
   }, /*#__PURE__*/React.createElement(Styled.Link, {
@@ -267,7 +319,7 @@ var Tabs_ = /*#__PURE__*/React.forwardRef(function Tabs(_ref5, ref) {
   })))) : null;
   return /*#__PURE__*/React.createElement(StyledTabs, _extends({
     ref: ref,
-    role: "group",
+    role: props.role || 'group',
     $dark: dark,
     $index: cutoffIndex
   }, props), /*#__PURE__*/React.createElement(StyledTabList, {
@@ -275,7 +327,7 @@ var Tabs_ = /*#__PURE__*/React.forwardRef(function Tabs(_ref5, ref) {
     ref: containerRef
   }, filtered.map(function (child, i) {
     if ( /*#__PURE__*/React.isValidElement(child)) return /*#__PURE__*/React.cloneElement(child, {
-      as: props.role === 'navigation' ? 'li' : undefined,
+      as: props.role === 'navigation' ? 'li' : child.props.as,
       dark: dark,
       onMount: function onMount(el) {
         setTabElements(function (elements) {