@ausbom/tabs 0.4.1 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import React from 'react'
|
|
1
|
+
import React, { AriaAttributes } from 'react'
|
|
2
2
|
|
|
3
3
|
export interface IProps {
|
|
4
|
+
children: React.ReactNode[]
|
|
4
5
|
className?: string
|
|
5
6
|
dark?: boolean
|
|
6
7
|
equalWidthOnMobile?: boolean
|
|
7
8
|
innerRef?: React.RefObject<HTMLDivElement>
|
|
8
|
-
orientation?: '
|
|
9
|
+
orientation?: AriaAttributes['aria-orientation']
|
|
9
10
|
selectionFollowsFocus?: boolean
|
|
10
11
|
onChange?: (event: React.MouseEvent<HTMLButtonElement>, tabId: string) => void
|
|
11
12
|
[x: string]: any
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"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
|
|
2
|
-
},{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
|
|
2
|
+
},{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});var safeChildren=children!=null&&children.filter(function(ch){return ch!=null})||[];// NOTE: It was recommended to us by Intopia not to use standard 'role="tablist"' here as their research
|
|
3
3
|
// found it was confusing for users
|
|
4
|
-
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":
|
|
4
|
+
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":orientation},restProps),_react.Children.map(safeChildren,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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ausbom/tabs",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@ausbom/styles": "^0.12.0"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "ef2380654dcd9bf969cf1ae8752db86354249d39"
|
|
43
43
|
}
|