@ausbom/tabs 0.2.11 → 0.4.0

package/lib/components/Tab/Tab.d.ts

@@ -6,8 +6,11 @@ export interface IProps {
   className?: string
   disabled?: boolean
   innerRef?: React.RefObject<any>
-  label: string
+  label: React.ReactNode
   tabId: string
+  onChange?: (event: React.MouseEvent<HTMLButtonElement>, tabId: string) => void
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
+  onFocus?: (event: React.MouseEvent<HTMLButtonElement>) => void
   [x: string]: any
 }
 

package/lib/components/Tab/Tab.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireDefault(require("react"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var Tab=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(Tab,_React$PureComponent);var _super=_createSuper(Tab);function Tab(){(0,_classCallCheck2["default"])(this,Tab);return _super.apply(this,arguments)}(0,_createClass2["default"])(Tab,[{key:"render",value:function render(){var _ref=this.props,active=_ref.active,Tag=_ref.as,className=_ref.className,innerRef=_ref.innerRef,label=_ref.label,tabId=_ref.tabId,restProps=(0,_objectWithoutProperties2["default"])(_ref,["active","as","className","innerRef","label","tabId"]);var classes=(0,_classnames["default"])(className,"bom-tab",{"bom-tab--active":active});// NOTE: It was recommended to us by Intopia not to use standard 'role="tab"' here as their research
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireDefault(require("react"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var Tab=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(Tab,_React$PureComponent);var _super=_createSuper(Tab);function Tab(){(0,_classCallCheck2["default"])(this,Tab);return _super.apply(this,arguments)}(0,_createClass2["default"])(Tab,[{key:"handleClick",value:function handleClick(event){var _this$props=this.props,active=_this$props.active,onClick=_this$props.onClick,onChange=_this$props.onChange,tabId=_this$props.tabId;if(!active&&onChange){onChange(event,tabId)}if(onClick){onClick(event)}}},{key:"handleFocus",value:function handleFocus(event){var _this$props2=this.props,selectionFollowsFocus=_this$props2.selectionFollowsFocus,active=_this$props2.active,onFocus=_this$props2.onFocus,onClick=_this$props2.onClick,onChange=_this$props2.onChange,tabId=_this$props2.tabId;if(selectionFollowsFocus){if(!active&&onChange){onChange(event,tabId)}if(onClick){onClick(event)}}if(onFocus){onFocus(event)}}},{key:"render",value:function render(){var _ref=this.props,active=_ref.active,Tag=_ref.as,className=_ref.className,innerRef=_ref.innerRef,label=_ref.label,tabId=_ref.tabId,restProps=(0,_objectWithoutProperties2["default"])(_ref,["active","as","className","innerRef","label","tabId"]);var classes=(0,_classnames["default"])(className,"bom-tab",{"bom-tab--active":active});// NOTE: It was recommended to us by Intopia not to use standard 'role="tab"' here as their research
 // found it was confusing for users
 // NOTE remove aria-controls and aria-expanded from the <a> element based on Intopia comments
-var tagAs=Tag;if(tagAs!=="a"){return/*#__PURE__*/_react["default"].createElement(Tag,(0,_extends2["default"])({"aria-controls":"bom-tab-panel-".concat(tabId),"aria-expanded":!!active,className:classes,id:"bom-tab-".concat(tabId),ref:innerRef},restProps),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-tab__label"},label))}return/*#__PURE__*/_react["default"].createElement(Tag,(0,_extends2["default"])({className:classes,id:"bom-tab-".concat(tabId),ref:innerRef},restProps),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-tab__label"},label))}}]);return Tab}(_react["default"].PureComponent);(0,_defineProperty2["default"])(Tab,"defaultProps",{as:"button"});var TabWithRef=/*#__PURE__*/_react["default"].forwardRef(function(props,ref){return/*#__PURE__*/_react["default"].createElement(Tab,(0,_extends2["default"])({innerRef:ref},props))});TabWithRef.displayName="Tab";var _default=TabWithRef;exports["default"]=_default;
+var tagAs=Tag;var tagLabelClasses=(0,_classnames["default"])("bom-tab__label");if(tagAs!=="a"){return/*#__PURE__*/_react["default"].createElement(Tag,(0,_extends2["default"])({role:"tab","aria-controls":"bom-tab-panel-".concat(tabId),"aria-selected":!!active,className:classes,id:"bom-tab-".concat(tabId),ref:innerRef,onClick:this.handleClick.bind(this),onFocus:this.handleFocus.bind(this)},restProps),/*#__PURE__*/_react["default"].createElement("span",{className:tagLabelClasses},label))}return/*#__PURE__*/_react["default"].createElement(Tag,(0,_extends2["default"])({role:"tab",className:classes,id:"bom-tab-".concat(tabId),ref:innerRef},restProps),/*#__PURE__*/_react["default"].createElement("span",{className:tagLabelClasses},label))}}]);return Tab}(_react["default"].PureComponent);(0,_defineProperty2["default"])(Tab,"defaultProps",{as:"button"});var TabWithRef=/*#__PURE__*/_react["default"].forwardRef(function(props,ref){return/*#__PURE__*/_react["default"].createElement(Tab,(0,_extends2["default"])({innerRef:ref},props))});TabWithRef.displayName="Tab";var _default=TabWithRef;exports["default"]=_default;

package/lib/components/TabList/TabList.d.ts

@@ -4,7 +4,10 @@ export interface IProps {
   className?: string
   dark?: boolean
   equalWidthOnMobile?: boolean
-  innerRef?: React.RefObject<any>
+  innerRef?: React.RefObject<HTMLDivElement>
+  orientation?: 'horizontal' | 'vertical'
+  selectionFollowsFocus?: boolean
+  onChange?: (event: React.MouseEvent<HTMLButtonElement>, tabId: string) => void
   [x: string]: any
 }
 

package/lib/components/TabList/TabList.js

@@ -1,3 +1,4 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireDefault(require("react"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var TabList=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(TabList,_React$PureComponent);var _super=_createSuper(TabList);function TabList(){(0,_classCallCheck2["default"])(this,TabList);return _super.apply(this,arguments)}(0,_createClass2["default"])(TabList,[{key:"render",value:function render(){var _ref=this.props,children=_ref.children,className=_ref.className,dark=_ref.dark,equalWidthOnMobile=_ref.equalWidthOnMobile,innerRef=_ref.innerRef,restProps=(0,_objectWithoutProperties2["default"])(_ref,["children","className","dark","equalWidthOnMobile","innerRef"]);var classes=(0,_classnames["default"])(className,"bom-tab-list",{"bom-tab-list--equal-width":equalWidthOnMobile,"bom-tab-list--dark":dark});// NOTE: It was recommended to us by Intopia not to use standard 'role="tablist"' here as their research
+"use strict";var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireWildcard(require("react"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var TabList=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(TabList,_React$PureComponent);var _super=_createSuper(TabList);function TabList(props){var _this;(0,_classCallCheck2["default"])(this,TabList);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"tabListRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"tabs",[]);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"firstTab",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"lastTab",void 0);_this.tabListRef=/*#__PURE__*/_react["default"].createRef();return _this}(0,_createClass2["default"])(TabList,[{key:"componentDidMount",value:function componentDidMount(){if(this.tabListRef.current){this.tabs=Array.from(this.tabListRef.current.querySelectorAll("[role=tab]:not(:disabled)"))}for(var i=0;i<this.tabs.length;i+=1){var tab=this.tabs[i];tab.addEventListener("keydown",this.onKeydown.bind(this));if(!this.firstTab){this.firstTab=tab}this.lastTab=tab}}// eslint-disable-next-line class-methods-use-this
+},{key:"moveFocusToTab",value:function moveFocusToTab(currentTab){currentTab.focus()}},{key:"moveFocusToPreviousTab",value:function moveFocusToPreviousTab(currentTab){var index;if(currentTab===this.firstTab){this.moveFocusToTab(this.lastTab)}else{index=this.tabs.indexOf(currentTab);this.moveFocusToTab(this.tabs[index-1])}}},{key:"moveFocusToNextTab",value:function moveFocusToNextTab(currentTab){var index;if(currentTab===this.lastTab){this.moveFocusToTab(this.firstTab)}else{index=this.tabs.indexOf(currentTab);this.moveFocusToTab(this.tabs[index+1])}}},{key:"onKeydown",value:function onKeydown(event){var orientation=this.props.orientation;var target=event.currentTarget;var processed=false;switch(event.key){case"ArrowLeft":if(orientation==="horizontal"){this.moveFocusToPreviousTab(target);processed=true}break;case"ArrowRight":if(orientation==="horizontal"){this.moveFocusToNextTab(target);processed=true}break;case"ArrowUp":if(orientation==="vertical"){this.moveFocusToPreviousTab(target);processed=true}break;case"ArrowDown":if(orientation==="vertical"){this.moveFocusToNextTab(target);processed=true}break;case"Home":this.moveFocusToTab(this.firstTab);processed=true;break;case"End":this.moveFocusToTab(this.lastTab);processed=true;break;default:break;}if(processed){event.stopPropagation();event.preventDefault()}}},{key:"render",value:function render(){var _this2=this;var _this$props=this.props,children=_this$props.children,className=_this$props.className,dark=_this$props.dark,equalWidthOnMobile=_this$props.equalWidthOnMobile,innerRef=_this$props.innerRef,orientation=_this$props.orientation,selectionFollowsFocus=_this$props.selectionFollowsFocus,onChange=_this$props.onChange,restProps=(0,_objectWithoutProperties2["default"])(_this$props,["children","className","dark","equalWidthOnMobile","innerRef","orientation","selectionFollowsFocus","onChange"]);var classes=(0,_classnames["default"])(className,"bom-tab-list",{"bom-tab-list--vertical":orientation==="vertical","bom-tab-list--equal-width":equalWidthOnMobile,"bom-tab-list--dark":dark});// NOTE: It was recommended to us by Intopia not to use standard 'role="tablist"' here as their research
 // found it was confusing for users
-return/*#__PURE__*/_react["default"].createElement("div",(0,_extends2["default"])({className:classes,ref:innerRef},restProps),children)}}]);return TabList}(_react["default"].PureComponent);var TabListWithRef=/*#__PURE__*/_react["default"].forwardRef(function(props,ref){return/*#__PURE__*/_react["default"].createElement(TabList,(0,_extends2["default"])({innerRef:ref},props))});TabListWithRef.displayName="TabList";var _default=TabListWithRef;exports["default"]=_default;
+return/*#__PURE__*/_react["default"].createElement("div",(0,_extends2["default"])({role:"tablist",className:classes,ref:function ref(_ref){_this2.tabListRef.current=_ref;if(innerRef){innerRef.current=_ref}},"aria-orientation":"horizontal"},restProps),_react.Children.map(children,function(child){return/*#__PURE__*/(0,_react.cloneElement)(child,{selectionFollowsFocus:selectionFollowsFocus,onChange:onChange})}))}}]);return TabList}(_react["default"].PureComponent);(0,_defineProperty2["default"])(TabList,"defaultProps",{orientation:"horizontal"});var TabListWithRef=/*#__PURE__*/_react["default"].forwardRef(function(props,ref){return/*#__PURE__*/_react["default"].createElement(TabList,(0,_extends2["default"])({innerRef:ref},props))});TabListWithRef.displayName="TabList";var _default=TabListWithRef;exports["default"]=_default;

package/lib/components/TabList/TabList.scss

@@ -11,6 +11,7 @@
 
   .bom-tab {
     display: inline-block;
+    text-decoration: none;
 
     &:focus {
       @include bom-focus-outline;
@@ -72,6 +73,17 @@
   }
 }
 
+.bom-tab-list--vertical {
+  flex-direction: column;
+  box-shadow: none;
+
+  .bom-tab {
+    padding-left: 0;
+    padding-right: 0;
+    display: grid;
+  }
+}
+
 @include bp(0, m) {
   .bom-tab-list--equal-width {
     display: flex;

package/lib/components/TabPanel/TabPanel.js

@@ -1,3 +1,3 @@
 "use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireDefault(require("react"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var TabPanel=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(TabPanel,_React$PureComponent);var _super=_createSuper(TabPanel);function TabPanel(){(0,_classCallCheck2["default"])(this,TabPanel);return _super.apply(this,arguments)}(0,_createClass2["default"])(TabPanel,[{key:"render",value:function render(){var _ref=this.props,active=_ref.active,children=_ref.children,className=_ref.className,innerRef=_ref.innerRef,tabId=_ref.tabId,restProps=(0,_objectWithoutProperties2["default"])(_ref,["active","children","className","innerRef","tabId"]);var classes=(0,_classnames["default"])(className,"bom-tab-panel",{"bom-tab-panel--active":active});// NOTE: It was recommended to us by Intopia not to use standard 'role="tabpanel"' here as their research
 // found it was confusing for users
-return/*#__PURE__*/_react["default"].createElement("div",(0,_extends2["default"])({className:classes,"aria-labelledby":"bom-tab-".concat(tabId),id:"bom-tab-panel-".concat(tabId),ref:innerRef,hidden:!active,"aria-hidden":!active},restProps),children)}}]);return TabPanel}(_react["default"].PureComponent);var TabPanelWithRef=/*#__PURE__*/_react["default"].forwardRef(function(props,ref){return/*#__PURE__*/_react["default"].createElement(TabPanel,(0,_extends2["default"])({innerRef:ref},props))});TabPanelWithRef.displayName="TabPanel";var _default=TabPanelWithRef;exports["default"]=_default;
+return/*#__PURE__*/_react["default"].createElement("div",(0,_extends2["default"])({className:classes,"aria-labelledby":"bom-tab-".concat(tabId),id:"bom-tab-panel-".concat(tabId),ref:innerRef,hidden:!active,"aria-hidden":!active,role:"tabpanel"},restProps),children)}}]);return TabPanel}(_react["default"].PureComponent);var TabPanelWithRef=/*#__PURE__*/_react["default"].forwardRef(function(props,ref){return/*#__PURE__*/_react["default"].createElement(TabPanel,(0,_extends2["default"])({innerRef:ref},props))});TabPanelWithRef.displayName="TabPanel";var _default=TabPanelWithRef;exports["default"]=_default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ausbom/tabs",
-  "version": "0.2.11",
+  "version": "0.4.0",
   "description": "",
   "keywords": [],
   "author": "",
@@ -39,5 +39,5 @@
   "dependencies": {
     "@ausbom/styles": "^0.12.0"
   },
-  "gitHead": "7f762808b0e4ea8c9c20c400d1883f1cb845658a"
+  "gitHead": "c7059373c86b76334d4ac8322abc6e0c3a89e4d0"
 }