@instructure/ui-tabs 8.11.2-snapshot.7 → 8.12.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.12.0](https://github.com/instructure/instructure-ui/compare/v8.11.1...v8.12.0) (2021-11-17)
+
+### Features
+
+- **ui-tabs:** update Tabs focus styles to inset focus ring ([3a59c3f](https://github.com/instructure/instructure-ui/commit/3a59c3f0443db81631c4f4d5dafe5778389e8dbc))
+
 ## [8.11.1](https://github.com/instructure/instructure-ui/compare/v8.11.0...v8.11.1) (2021-10-19)
 
 **Note:** Version bump only for package @instructure/ui-tabs

package/es/Tabs/Tab/index.js

@@ -114,7 +114,9 @@ let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       "aria-selected": isSelected ? 'true' : void 0,
       "aria-disabled": isDisabled ? 'true' : void 0,
       "aria-controls": controls,
-      tabIndex: isSelected && !isDisabled ? '0' : void 0
+      tabIndex: isSelected && !isDisabled ? '0' : void 0,
+      position: "relative",
+      focusPosition: "inset"
     }), callRenderProp(children));
   }
 

package/es/Tabs/Tab/styles.js

@@ -102,6 +102,18 @@ const generateStyle = (componentTheme, props) => {
         })
       }
     }
+  }; // overrides for View default focus ring
+
+  const focusRingStyles = {
+    '&:before': {
+      inset: '0.5rem',
+      borderRadius: '0.25rem'
+    },
+    '&:focus': {
+      '&:before': {
+        inset: '0.375rem'
+      }
+    }
   };
   return {
     tab: {
@@ -119,9 +131,7 @@ const generateStyle = (componentTheme, props) => {
       ...(isDisabled && {
         opacity: 0.5
       }),
-      '&:focus': {
-        outline: 'none'
-      },
+      ...focusRingStyles,
       ...variants[variant]
     }
   };

package/es/Tabs/index.js

@@ -39,20 +39,20 @@ import { Focusable } from '@instructure/ui-focusable';
 import { getBoundingClientRect } from '@instructure/ui-dom-utils';
 import { debounce } from '@instructure/debounce';
 import { px } from '@instructure/ui-utils';
-import { bidirectional } from '@instructure/ui-i18n';
+import { textDirectionContextConsumer } from '@instructure/ui-i18n';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { Tab } from './Tab';
 import { Panel } from './Panel';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 ---
 **/
-
-let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = bidirectional(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Tabs extends Component {
+let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Tabs extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -215,7 +215,7 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = bid
     if (this._tabList && this._tabListPosition && typeof this._tabList.scrollTo === 'function' // test for scrollTo support
     ) {
       const dir = this.props.dir;
-      const isRtl = dir === bidirectional.DIRECTION.rtl;
+      const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl;
       const tabPosition = getBoundingClientRect(activeTabEl);
       const tabListPosition = this._tabListPosition;
       const tabListBoundStart = isRtl ? tabListPosition.left + this.getOverlayWidth() : tabListPosition.left;
@@ -293,7 +293,7 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = bid
     });
   }
 
-  clonePanel(index, generatedId, selected, panel) {
+  clonePanel(_index, generatedId, selected, panel) {
     const id = panel.props.id || generatedId; // fixHeight can be 0, so simply `fixheight` could return falsy value
 
     const hasFixedHeight = typeof this.props.fixHeight !== 'undefined';
@@ -305,8 +305,8 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = bid
       variant: this.props.variant,
       padding: panel.props.padding || this.props.padding,
       textAlign: panel.props.textAlign || this.props.textAlign,
-      maxHeight: panel.maxHeight || (!hasFixedHeight ? this.props.maxHeight : void 0),
-      minHeight: panel.minHeight || (!hasFixedHeight ? this.props.minHeight : '100%')
+      maxHeight: !hasFixedHeight ? this.props.maxHeight : void 0,
+      minHeight: !hasFixedHeight ? this.props.minHeight : '100%'
     });
   }
 
@@ -363,13 +363,10 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = bid
       css: styles === null || styles === void 0 ? void 0 : styles.container
     }), jsx(Focusable, {
       ref: this.handleFocusableRef
-    }, ({
-      focusVisible
-    }) => jsx(View, {
+    }, () => jsx(View, {
       as: "div",
       position: "relative",
       borderRadius: "medium",
-      withFocusOutline: focusVisible,
       shouldAnimateFocus: false,
       css: styles === null || styles === void 0 ? void 0 : styles.tabs
     }, jsx(View, {

package/es/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/Tabs/Tab/index.js

@@ -106,7 +106,9 @@ let Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
       "aria-selected": isSelected ? 'true' : void 0,
       "aria-disabled": isDisabled ? 'true' : void 0,
       "aria-controls": controls,
-      tabIndex: isSelected && !isDisabled ? '0' : void 0
+      tabIndex: isSelected && !isDisabled ? '0' : void 0,
+      position: "relative",
+      focusPosition: "inset"
     }), (0, _callRenderProp.callRenderProp)(children));
   }
 

package/lib/Tabs/Tab/styles.js

@@ -110,6 +110,18 @@ const generateStyle = (componentTheme, props) => {
         })
       }
     }
+  }; // overrides for View default focus ring
+
+  const focusRingStyles = {
+    '&:before': {
+      inset: '0.5rem',
+      borderRadius: '0.25rem'
+    },
+    '&:focus': {
+      '&:before': {
+        inset: '0.375rem'
+      }
+    }
   };
   return {
     tab: {
@@ -127,9 +139,7 @@ const generateStyle = (componentTheme, props) => {
       ...(isDisabled && {
         opacity: 0.5
       }),
-      '&:focus': {
-        outline: 'none'
-      },
+      ...focusRingStyles,
       ...variants[variant]
     }
   };

package/lib/Tabs/index.js

@@ -43,7 +43,7 @@ var _debounce = require("@instructure/debounce");
 
 var _px = require("@instructure/ui-utils/lib/px.js");
 
-var _bidirectional = require("@instructure/ui-i18n/lib/bidirectional.js");
+var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
 
 var _emotion = require("@instructure/emotion");
 
@@ -66,7 +66,7 @@ var _dec, _dec2, _dec3, _class, _class2, _temp;
 category: components
 ---
 **/
-let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _bidirectional.bidirectional)(), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Tabs extends _react.Component {
+let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Tabs extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -229,7 +229,7 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     if (this._tabList && this._tabListPosition && typeof this._tabList.scrollTo === 'function' // test for scrollTo support
     ) {
       const dir = this.props.dir;
-      const isRtl = dir === _bidirectional.bidirectional.DIRECTION.rtl;
+      const isRtl = dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl;
       const tabPosition = (0, _getBoundingClientRect.getBoundingClientRect)(activeTabEl);
       const tabListPosition = this._tabListPosition;
       const tabListBoundStart = isRtl ? tabListPosition.left + this.getOverlayWidth() : tabListPosition.left;
@@ -308,7 +308,7 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     });
   }
 
-  clonePanel(index, generatedId, selected, panel) {
+  clonePanel(_index, generatedId, selected, panel) {
     const id = panel.props.id || generatedId; // fixHeight can be 0, so simply `fixheight` could return falsy value
 
     const hasFixedHeight = typeof this.props.fixHeight !== 'undefined';
@@ -320,8 +320,8 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       variant: this.props.variant,
       padding: panel.props.padding || this.props.padding,
       textAlign: panel.props.textAlign || this.props.textAlign,
-      maxHeight: panel.maxHeight || (!hasFixedHeight ? this.props.maxHeight : void 0),
-      minHeight: panel.minHeight || (!hasFixedHeight ? this.props.minHeight : '100%')
+      maxHeight: !hasFixedHeight ? this.props.maxHeight : void 0,
+      minHeight: !hasFixedHeight ? this.props.minHeight : '100%'
     });
   }
 
@@ -380,13 +380,10 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       css: styles === null || styles === void 0 ? void 0 : styles.container
     }), (0, _emotion.jsx)(_Focusable.Focusable, {
       ref: this.handleFocusableRef
-    }, ({
-      focusVisible
-    }) => (0, _emotion.jsx)(_View.View, {
+    }, () => (0, _emotion.jsx)(_View.View, {
       as: "div",
       position: "relative",
       borderRadius: "medium",
-      withFocusOutline: focusVisible,
       shouldAnimateFocus: false,
       css: styles === null || styles === void 0 ? void 0 : styles.tabs
     }, (0, _emotion.jsx)(_View.View, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tabs",
-  "version": "8.11.2-snapshot.7+2681e145a",
+  "version": "8.12.0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,28 +24,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-color-utils": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-test-locator": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-test-utils": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-themes": "8.11.2-snapshot.7+2681e145a"
+    "@instructure/ui-babel-preset": "8.12.0",
+    "@instructure/ui-color-utils": "8.12.0",
+    "@instructure/ui-test-locator": "8.12.0",
+    "@instructure/ui-test-utils": "8.12.0",
+    "@instructure/ui-themes": "8.12.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/debounce": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/emotion": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/shared-types": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-dom-utils": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-focusable": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-i18n": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-motion": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-prop-types": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-react-utils": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-testable": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-utils": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-view": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/uid": "8.11.2-snapshot.7+2681e145a",
+    "@instructure/console": "8.12.0",
+    "@instructure/debounce": "8.12.0",
+    "@instructure/emotion": "8.12.0",
+    "@instructure/shared-types": "8.12.0",
+    "@instructure/ui-dom-utils": "8.12.0",
+    "@instructure/ui-focusable": "8.12.0",
+    "@instructure/ui-i18n": "8.12.0",
+    "@instructure/ui-motion": "8.12.0",
+    "@instructure/ui-prop-types": "8.12.0",
+    "@instructure/ui-react-utils": "8.12.0",
+    "@instructure/ui-testable": "8.12.0",
+    "@instructure/ui-utils": "8.12.0",
+    "@instructure/ui-view": "8.12.0",
+    "@instructure/uid": "8.12.0",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -55,6 +55,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "2681e145ad469e1396536d3e9eed75a19995eb8a"
+  "sideEffects": false
 }

package/src/Tabs/Tab/index.tsx

@@ -118,6 +118,8 @@ class Tab extends Component<TabsTabProps> {
         aria-controls={controls}
         //@ts-expect-error fix this to be number
         tabIndex={isSelected && !isDisabled ? '0' : undefined}
+        position="relative"
+        focusPosition="inset"
       >
         {callRenderProp(children)}
       </View>

package/src/Tabs/Tab/styles.ts

@@ -115,6 +115,20 @@ const generateStyle = (
     }
   }
 
+  // overrides for View default focus ring
+  const focusRingStyles = {
+    '&:before': {
+      inset: '0.5rem',
+      borderRadius: '0.25rem'
+    },
+
+    '&:focus': {
+      '&:before': {
+        inset: '0.375rem'
+      }
+    }
+  }
+
   return {
     tab: {
       label: 'tab',
@@ -129,7 +143,7 @@ const generateStyle = (
       ...((isSelected || isDisabled) && { cursor: 'default' }),
       ...(isDisabled && { opacity: 0.5 }),
 
-      '&:focus': { outline: 'none' },
+      ...focusRingStyles,
 
       ...variants[variant!]
     }

package/src/Tabs/index.tsx

@@ -23,7 +23,13 @@
  */
 
 /** @jsx jsx */
-import React, { Component, createElement } from 'react'
+import React, {
+  Component,
+  ComponentClass,
+  ComponentElement,
+  createElement,
+  ReactElement
+} from 'react'
 
 import keycode from 'keycode'
 
@@ -40,7 +46,7 @@ import { Focusable } from '@instructure/ui-focusable'
 import { getBoundingClientRect } from '@instructure/ui-dom-utils'
 import { debounce } from '@instructure/debounce'
 import { px } from '@instructure/ui-utils'
-import { bidirectional } from '@instructure/ui-i18n'
+import { textDirectionContextConsumer } from '@instructure/ui-i18n'
 
 import { withStyle, jsx } from '@instructure/emotion'
 
@@ -49,8 +55,14 @@ import generateComponentTheme from './theme'
 
 import { Tab } from './Tab'
 import { Panel } from './Panel'
-import type { TabsProps } from './props'
+
 import { allowedProps, propTypes } from './props'
+import type { TabsProps } from './props'
+import type { TabsTabProps } from './Tab/props'
+import type { TabsPanelProps } from './Panel/props'
+
+type TabChild = ReactElement & ComponentElement<TabsTabProps, any>
+type PanelChild = ReactElement & ComponentElement<TabsPanelProps, any>
 
 /**
 ---
@@ -58,7 +70,7 @@ category: components
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
-@bidirectional()
+@textDirectionContextConsumer()
 @testable()
 class Tabs extends Component<TabsProps> {
   static readonly componentId = 'Tabs'
@@ -235,7 +247,7 @@ class Tabs extends Component<TabsProps> {
       typeof this._tabList.scrollTo === 'function' // test for scrollTo support
     ) {
       const { dir } = this.props
-      const isRtl = dir === bidirectional.DIRECTION.rtl
+      const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl
 
       const tabPosition = getBoundingClientRect(activeTabEl)
       // @ts-expect-error ts-migrate(2339) FIXME: Property '_tabListPosition' does not exist on type... Remove this comment to see the full error message
@@ -354,12 +366,15 @@ class Tabs extends Component<TabsProps> {
       this.showActiveTabIfOverlayed(this._tabList.querySelector(`#tab-${id}`))
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'index' implicitly has an 'any' type.
-  createTab(index, generatedId, selected, panel) {
+  createTab(
+    index: number,
+    generatedId: string,
+    selected: boolean,
+    panel: PanelChild
+  ): TabChild {
     const id = panel.props.id || generatedId
 
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-    return createElement(Tab, {
+    return createElement(Tab as ComponentClass<TabsTabProps>, {
       variant: this.props.variant,
       key: `tab-${id}`,
       id: `tab-${id}`,
@@ -373,8 +388,12 @@ class Tabs extends Component<TabsProps> {
     })
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'index' is declared but its value is never read.
-  clonePanel(index, generatedId, selected, panel) {
+  clonePanel(
+    _index: number,
+    generatedId: string,
+    selected: boolean,
+    panel: PanelChild
+  ) {
     const id = panel.props.id || generatedId
 
     // fixHeight can be 0, so simply `fixheight` could return falsy value
@@ -388,10 +407,8 @@ class Tabs extends Component<TabsProps> {
       variant: this.props.variant,
       padding: panel.props.padding || this.props.padding,
       textAlign: panel.props.textAlign || this.props.textAlign,
-      maxHeight:
-        panel.maxHeight || (!hasFixedHeight ? this.props.maxHeight : undefined),
-      minHeight:
-        panel.minHeight || (!hasFixedHeight ? this.props.minHeight : '100%')
+      maxHeight: !hasFixedHeight ? this.props.maxHeight : undefined,
+      minHeight: !hasFixedHeight ? this.props.minHeight : '100%'
     })
   }
 
@@ -419,8 +436,7 @@ class Tabs extends Component<TabsProps> {
   render() {
     // @ts-expect-error ts-migrate(7034) FIXME: Variable 'panels' implicitly has type 'any[]' in s... Remove this comment to see the full error message
     const panels = []
-    // @ts-expect-error ts-migrate(7034) FIXME: Variable 'tabs' implicitly has type 'any[]' in som... Remove this comment to see the full error message
-    const tabs = []
+    const tabs: TabChild[] = []
     const {
       children,
       elementRef,
@@ -445,14 +461,12 @@ class Tabs extends Component<TabsProps> {
     React.Children.forEach(children, (child) => {
       if (matchComponentTypes(child, [Panel])) {
         const selected =
-          // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
-          !child.props.isDisabled &&
-          // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
-          (child.props.isSelected || selectedIndex === index)
+          !(child as PanelChild).props.isDisabled &&
+          ((child as PanelChild).props.isSelected || selectedIndex === index)
         const id = uid()
 
-        tabs.push(this.createTab(index, id, selected, child))
-        panels.push(this.clonePanel(index, id, selected, child))
+        tabs.push(this.createTab(index, id, selected, child as PanelChild))
+        panels.push(this.clonePanel(index, id, selected, child as PanelChild))
 
         index++
       } else {
@@ -486,12 +500,11 @@ class Tabs extends Component<TabsProps> {
         css={styles?.container}
       >
         <Focusable ref={this.handleFocusableRef}>
-          {({ focusVisible }) => (
+          {() => (
             <View
               as="div"
               position="relative"
               borderRadius="medium"
-              withFocusOutline={focusVisible}
               shouldAnimateFocus={false}
               css={styles?.tabs}
             >
@@ -502,7 +515,6 @@ class Tabs extends Component<TabsProps> {
                 aria-label={screenReaderLabel}
                 elementRef={this.handleTabListRef}
               >
-                {/* @ts-expect-error ts-migrate(7005) FIXME: Variable 'tabs' implicitly has an 'any[]' type. */}
                 {tabs}
                 {withScrollFade && scrollFadeEls}
               </View>

package/types/Tabs/Tab/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAIrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C;;;;;GAKG;AACH,cACM,GAAI,SAAQ,SAAS,CAAC,YAAY,CAAC;IACvC,MAAM,CAAC,QAAQ,CAAC,WAAW,cAAa;IAExC,MAAM,CAAC,YAAY;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;MASlB;IAED,iBAAiB;IAKjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,WAAW,uBASV;IAGD,aAAa,uBASZ;IAED,MAAM;CA+BP;AAED,eAAe,GAAG,CAAA;AAClB,OAAO,EAAE,GAAG,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAIrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C;;;;;GAKG;AACH,cACM,GAAI,SAAQ,SAAS,CAAC,YAAY,CAAC;IACvC,MAAM,CAAC,QAAQ,CAAC,WAAW,cAAa;IAExC,MAAM,CAAC,YAAY;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;MASlB;IAED,iBAAiB;IAKjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,WAAW,uBASV;IAGD,aAAa,uBASZ;IAED,MAAM;CAiCP;AAED,eAAe,GAAG,CAAA;AAClB,OAAO,EAAE,GAAG,EAAE,CAAA"}

package/types/Tabs/Tab/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tab/styles.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAUzD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,YAAY,SACrB,YAAY,KAClB,YAsFF,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tab/styles.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAUzD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,YAAY,SACrB,YAAY,KAClB,YAoGF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/Tabs/index.d.ts

@@ -1,9 +1,13 @@
 /** @jsx jsx */
-import React, { Component } from 'react';
+import React, { Component, ComponentElement, ReactElement } from 'react';
 import { jsx } from '@instructure/emotion';
 import { Tab } from './Tab';
 import { Panel } from './Panel';
 import type { TabsProps } from './props';
+import type { TabsTabProps } from './Tab/props';
+import type { TabsPanelProps } from './Panel/props';
+declare type TabChild = ReactElement & ComponentElement<TabsTabProps, any>;
+declare type PanelChild = ReactElement & ComponentElement<TabsPanelProps, any>;
 /**
 ---
 category: components
@@ -82,18 +86,8 @@ declare class Tabs extends Component<TabsProps> {
         index: any;
         id: any;
     }): void;
-    createTab(index: any, generatedId: any, selected: any, panel: any): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-    clonePanel(index: any, generatedId: any, selected: any, panel: any): React.ReactElement<{
-        id: any;
-        labelledBy: string;
-        isSelected: any;
-        key: any;
-        variant: "default" | "secondary" | undefined;
-        padding: any;
-        textAlign: any;
-        maxHeight: any;
-        minHeight: any;
-    }, string | React.JSXElementConstructor<any>>;
+    createTab(index: number, generatedId: string, selected: boolean, panel: PanelChild): TabChild;
+    clonePanel(_index: number, generatedId: string, selected: boolean, panel: PanelChild): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     handleFocusableRef: (el: any) => void;
     handleTabListRef: (el: any) => void;
     focus(): void;

package/types/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tabs/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAA;AAmBvD,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGxC;;;;GAIG;AACH,cAGM,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;IAEpC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;MAQlB;IAED,MAAM,CAAC,KAAK,eAAQ;IACpB,MAAM,CAAC,GAAG,aAAM;IAEhB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;gBAGW,KAAK,KAAA;IAajB,iBAAiB;IAcjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IA+CjD,oBAAoB;IAIpB,mBAAmB;IA2BnB,oBAAoB;IAepB,eAAe;IAaf,wBAAwB,CAAC,WAAW,KAAA;IAiDpC,cAAc;;;eAGb;IAGD,gBAAgB;;eAoBf;IAED,YAAY,aAQX;IAGD,UAAU,CAAC,UAAU,KAAA,EAAE,IAAI,KAAA;;;;IA8B3B,YAAY,CAAC,KAAK,KAAA,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;;;KAAA;IAYjC,SAAS,CAAC,KAAK,KAAA,EAAE,WAAW,KAAA,EAAE,QAAQ,KAAA,EAAE,KAAK,KAAA;IAmB7C,UAAU,CAAC,KAAK,KAAA,EAAE,WAAW,KAAA,EAAE,QAAQ,KAAA,EAAE,KAAK,KAAA;;;;;;;;;;;IAsB9C,kBAAkB,oBAGjB;IAGD,gBAAgB,oBAGf;IAED,KAAK;IASL,MAAM;CAqGP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tabs/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EACZ,SAAS,EAET,gBAAgB,EAEhB,YAAY,EACb,MAAM,OAAO,CAAA;AAmBd,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAG/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAEnD,aAAK,QAAQ,GAAG,YAAY,GAAG,gBAAgB,CAAC,YAAY,EAAE,GAAG,CAAC,CAAA;AAClE,aAAK,UAAU,GAAG,YAAY,GAAG,gBAAgB,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;AAEtE;;;;GAIG;AACH,cAGM,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;IAEpC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;MAQlB;IAED,MAAM,CAAC,KAAK,eAAQ;IACpB,MAAM,CAAC,GAAG,aAAM;IAEhB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;gBAGW,KAAK,KAAA;IAajB,iBAAiB;IAcjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IA+CjD,oBAAoB;IAIpB,mBAAmB;IA2BnB,oBAAoB;IAepB,eAAe;IAaf,wBAAwB,CAAC,WAAW,KAAA;IAiDpC,cAAc;;;eAGb;IAGD,gBAAgB;;eAoBf;IAED,YAAY,aAQX;IAGD,UAAU,CAAC,UAAU,KAAA,EAAE,IAAI,KAAA;;;;IA8B3B,YAAY,CAAC,KAAK,KAAA,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;;;KAAA;IAWjC,SAAS,CACP,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE,UAAU,GAChB,QAAQ;IAiBX,UAAU,CACR,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE,UAAU;IAqBnB,kBAAkB,oBAGjB;IAGD,gBAAgB,oBAGf;IAED,KAAK;IASL,MAAM;CAgGP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA"}

package/LICENSE.md

@@ -1,27 +0,0 @@
----
-title: The MIT License (MIT)
-category: Getting Started
-order: 9
----
-
-# The MIT License (MIT)
-
-Copyright (c) 2015 Instructure, Inc.
-
-**Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions.**
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.