@instructure/ui-tabs 8.56.1 → 8.56.2-pr-snapshot-1721749364069

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.56.2-pr-snapshot-1721749364069](https://github.com/instructure/instructure-ui/compare/v8.56.1...v8.56.2-pr-snapshot-1721749364069) (2024-07-23)
+
+**Note:** Version bump only for package @instructure/ui-tabs
+
+
+
+
+
 ## [8.56.1](https://github.com/instructure/instructure-ui/compare/v8.56.0...v8.56.1) (2024-06-13)
 
 

package/lib/Tabs/Panel/index.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Panel = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _View = require("@instructure/ui-view/lib/View");
-var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-var _Transition = require("@instructure/ui-motion/lib/Transition");
+var _uiView = require("@instructure/ui-view");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiMotion = require("@instructure/ui-motion");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
@@ -83,19 +83,19 @@ let Panel = exports.Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       active = _this$props3.active,
       props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const isHidden = !isSelected || !!isDisabled;
-    return (0, _emotion.jsx)("div", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
+    return (0, _emotion.jsx)("div", Object.assign({}, (0, _uiReactUtils.passthroughProps)(props), {
       css: styles === null || styles === void 0 ? void 0 : styles.panel,
       role: "tabpanel",
       id: id,
       "aria-labelledby": labelledBy,
       "aria-hidden": isHidden ? 'true' : void 0,
       ref: this.handleRef
-    }), (0, _emotion.jsx)(_Transition.Transition, {
+    }), (0, _emotion.jsx)(_uiMotion.Transition, {
       type: "fade",
       in: !isHidden,
       unmountOnExit: true,
       transitionExit: false
-    }, (0, _emotion.jsx)(_View.View, {
+    }, (0, _emotion.jsx)(_uiView.View, {
       css: styles === null || styles === void 0 ? void 0 : styles.content,
       maxHeight: maxHeight,
       minHeight: minHeight,

package/lib/Tabs/Tab/index.js

@@ -8,9 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Tab = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-var _View = require("@instructure/ui-view/lib/View");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiView = require("@instructure/ui-view");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
@@ -100,7 +99,7 @@ let Tab = exports.Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
       children = _this$props5.children,
       styles = _this$props5.styles,
       props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
+    return (0, _emotion.jsx)(_uiView.View, Object.assign({}, (0, _uiReactUtils.passthroughProps)(props), {
       as: "div",
       role: "tab",
       id: id,
@@ -113,7 +112,7 @@ let Tab = exports.Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
       tabIndex: isSelected && !isDisabled ? 0 : void 0,
       position: "relative",
       focusPosition: "inset"
-    }), (0, _callRenderProp.callRenderProp)(children));
+    }), (0, _uiReactUtils.callRenderProp)(children));
   }
 }, _class2.displayName = "Tab", _class2.componentId = 'Tabs.Tab', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   variant: 'default',

package/lib/Tabs/TabsLocator.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabsLocator = void 0;
-var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+var _uiTestLocator = require("@instructure/ui-test-locator");
 var _index = require("./index");
 /*
  * The MIT License (MIT)
@@ -30,12 +30,12 @@ var _index = require("./index");
  * SOFTWARE.
  */
 
-const TabLocator = (0, _locator.locator)('[role="tab"]');
-const PanelLocator = (0, _locator.locator)('[role="tabpanel"]');
-const SelectedTabLocator = (0, _locator.locator)('[role="tab"][aria-selected="true"]');
+const TabLocator = (0, _uiTestLocator.locator)('[role="tab"]');
+const PanelLocator = (0, _uiTestLocator.locator)('[role="tabpanel"]');
+const SelectedTabLocator = (0, _uiTestLocator.locator)('[role="tab"][aria-selected="true"]');
 
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-const TabsLocator = exports.TabsLocator = (0, _locator.locator)(_index.Tabs.selector, {
+const TabsLocator = exports.TabsLocator = (0, _uiTestLocator.locator)(_index.Tabs.selector, {
   findTab: (...args) => {
     return TabLocator.find(...args);
   },

package/lib/Tabs/index.js

@@ -15,17 +15,15 @@ exports.default = exports.Tabs = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _keycode = _interopRequireDefault(require("keycode"));
-var _View = require("@instructure/ui-view/lib/View");
-var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
-var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _uiView = require("@instructure/ui-view");
+var _uiReactUtils = require("@instructure/ui-react-utils");
 var _console = require("@instructure/console");
 var _uid = require("@instructure/uid");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
-var _Focusable = require("@instructure/ui-focusable/lib/Focusable");
-var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
+var _uiTestable = require("@instructure/ui-testable");
+var _uiFocusable = require("@instructure/ui-focusable");
+var _uiDomUtils = require("@instructure/ui-dom-utils");
 var _debounce = require("@instructure/debounce");
-var _px = require("@instructure/ui-utils/lib/px.js");
+var _uiUtils = require("@instructure/ui-utils");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
@@ -63,7 +61,7 @@ var _dec, _dec2, _class, _class2;
 category: components
 ---
 **/
-let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class Tabs extends _react.Component {
+let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_class2 = class Tabs extends _react.Component {
   constructor(props) {
     super(props);
     this._tabList = null;
@@ -105,7 +103,7 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       this.setState({
         withTabListOverflow: this._tabList.scrollWidth > this._tabList.offsetWidth
       });
-      this._tabListPosition = (0, _getBoundingClientRect.getBoundingClientRect)(this._tabList);
+      this._tabListPosition = (0, _uiDomUtils.getBoundingClientRect)(this._tabList);
     };
     this.handleFocusableRef = el => {
       this._focusable = el;
@@ -119,7 +117,7 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
         return;
       }
       const tabList = event.currentTarget;
-      const scrollLeftMax = Math.round(tabList.scrollWidth - (0, _getBoundingClientRect.getBoundingClientRect)(tabList).width);
+      const scrollLeftMax = Math.round(tabList.scrollWidth - (0, _uiDomUtils.getBoundingClientRect)(tabList).width);
       const scrollLeft = Math.floor(Math.abs(tabList.scrollLeft));
       this.setState({
         showStartOverLay: scrollLeft > 0,
@@ -180,7 +178,7 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       leading: true,
       trailing: true
     });
-    this._tabListPosition = (0, _getBoundingClientRect.getBoundingClientRect)(this._tabList);
+    this._tabListPosition = (0, _uiDomUtils.getBoundingClientRect)(this._tabList);
     this._resizeListener = new ResizeObserver(entries => {
       for (const entry of entries) {
         const newWidth = entry.contentRect.width;
@@ -207,9 +205,9 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       styles = _this$props3.styles;
     if (styles && tabOverflow === 'scroll') {
       if (variant === 'default') {
-        return (0, _px.px)(styles === null || styles === void 0 ? void 0 : styles.scrollOverlayWidthDefault);
+        return (0, _uiUtils.px)(styles === null || styles === void 0 ? void 0 : styles.scrollOverlayWidthDefault);
       } else {
-        return (0, _px.px)(styles === null || styles === void 0 ? void 0 : styles.scrollOverlayWidthSecondary);
+        return (0, _uiUtils.px)(styles === null || styles === void 0 ? void 0 : styles.scrollOverlayWidthSecondary);
       }
     }
     return 0;
@@ -217,7 +215,7 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
   showActiveTabIfOverlayed(activeTabEl) {
     if (this._tabList && this._tabListPosition && typeof this._tabList.scrollTo === 'function' // test for scrollTo support
     ) {
-      const tabPosition = (0, _getBoundingClientRect.getBoundingClientRect)(activeTabEl);
+      const tabPosition = (0, _uiDomUtils.getBoundingClientRect)(activeTabEl);
       const tabListPosition = this._tabListPosition;
       const tabListBoundStart = tabListPosition.left + this.getOverlayWidth();
       const tabListBoundEnd = tabListPosition.right + this.getOverlayWidth();
@@ -241,7 +239,7 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
     }
   }
   getNextTab(startIndex, step) {
-    const tabs = _react.default.Children.toArray(this.props.children).map(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel]) && child);
+    const tabs = _react.default.Children.toArray(this.props.children).map(child => (0, _uiReactUtils.matchComponentTypes)(child, [_Panel.Panel]) && child);
     const count = tabs.length;
     const change = step < 0 ? step + count : step;
     (0, _console.logError)(startIndex >= 0 && startIndex < count, `[Tabs] Invalid tab index: '${startIndex}'.`);
@@ -309,13 +307,13 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       activePanelClone = /*#__PURE__*/_react.default.cloneElement(activePanel, {
         key: `panel-${index}`
       });
-      return (0, _safeCloneElement.safeCloneElement)(activePanelClone, {
+      return (0, _uiReactUtils.safeCloneElement)(activePanelClone, {
         padding: activePanelClone.props.padding || this.props.padding,
         textAlign: activePanelClone.props.textAlign || this.props.textAlign,
         ...commonProps
       });
     } else {
-      return (0, _safeCloneElement.safeCloneElement)(panel, {
+      return (0, _uiReactUtils.safeCloneElement)(panel, {
         key: `panel-${index}`,
         padding: panel.props.padding || this.props.padding,
         textAlign: panel.props.textAlign || this.props.textAlign,
@@ -340,14 +338,14 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       tabOverflow = _this$props4.tabOverflow,
       styles = _this$props4.styles,
       props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
-    const activePanels = _react.default.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])).filter(child => child.props.active);
+    const activePanels = _react.default.Children.toArray(children).filter(child => (0, _uiReactUtils.matchComponentTypes)(child, [_Panel.Panel])).filter(child => child.props.active);
     if (activePanels.length > 1) {
       (0, _console.logError)(false, `[Tabs] Only one Panel can be marked as active.`);
     }
-    const selectedChildIndex = _react.default.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])).findIndex(child => child.props.isSelected && !child.props.isDisabled);
+    const selectedChildIndex = _react.default.Children.toArray(children).filter(child => (0, _uiReactUtils.matchComponentTypes)(child, [_Panel.Panel])).findIndex(child => child.props.isSelected && !child.props.isDisabled);
     const selectedIndex = selectedChildIndex >= 0 ? selectedChildIndex : 0;
     _react.default.Children.toArray(children).map((child, index) => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])) {
+      if ((0, _uiReactUtils.matchComponentTypes)(child, [_Panel.Panel])) {
         const selected = !child.props.isDisabled && (child.props.isSelected || selectedIndex === index);
         const id = (0, _uid.uid)();
         tabs.push(this.createTab(index, id, selected, child));
@@ -371,21 +369,21 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       key: "end-overlay",
       css: styles === null || styles === void 0 ? void 0 : styles.endScrollOverlay
     }) : null;
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
+    return (0, _emotion.jsx)(_uiView.View, Object.assign({}, (0, _uiReactUtils.passthroughProps)(props), {
       elementRef: this.handleRef,
       maxWidth: maxWidth,
       margin: margin,
       as: "div",
       css: styles === null || styles === void 0 ? void 0 : styles.container
-    }), (0, _emotion.jsx)(_Focusable.Focusable, {
+    }), (0, _emotion.jsx)(_uiFocusable.Focusable, {
       ref: this.handleFocusableRef
-    }, () => (0, _emotion.jsx)(_View.View, {
+    }, () => (0, _emotion.jsx)(_uiView.View, {
       as: "div",
       position: "relative",
       borderRadius: "medium",
       shouldAnimateFocus: false,
       css: styles === null || styles === void 0 ? void 0 : styles.tabs
-    }, (0, _emotion.jsx)(_View.View, {
+    }, (0, _emotion.jsx)(_uiView.View, {
       as: "div",
       role: "tablist",
       css: styles === null || styles === void 0 ? void 0 : styles.tabList,

package/lib/Tabs/props.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.propTypes = exports.allowedProps = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+var _uiPropTypes = require("@instructure/ui-prop-types");
 var _emotion = require("@instructure/emotion");
 var _Panel = require("./Panel");
 /*
@@ -34,7 +34,7 @@ var _Panel = require("./Panel");
  */
 
 const propTypes = exports.propTypes = {
-  children: _Children.Children.oneOf([_Panel.Panel, null]),
+  children: _uiPropTypes.Children.oneOf([_Panel.Panel, null]),
   variant: _propTypes.default.oneOf(['default', 'secondary']),
   screenReaderLabel: _propTypes.default.string,
   onRequestTabChange: _propTypes.default.func,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tabs",
-  "version": "8.56.1",
+  "version": "8.56.2-pr-snapshot-1721749364069",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,30 +23,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.56.1",
-    "@instructure/ui-color-utils": "8.56.1",
-    "@instructure/ui-test-locator": "8.56.1",
-    "@instructure/ui-test-utils": "8.56.1",
-    "@instructure/ui-themes": "8.56.1",
+    "@instructure/ui-babel-preset": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-color-utils": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-test-locator": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-test-utils": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-themes": "8.56.2-pr-snapshot-1721749364069",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.56.1",
-    "@instructure/debounce": "8.56.1",
-    "@instructure/emotion": "8.56.1",
-    "@instructure/shared-types": "8.56.1",
-    "@instructure/ui-dom-utils": "8.56.1",
-    "@instructure/ui-focusable": "8.56.1",
-    "@instructure/ui-i18n": "8.56.1",
-    "@instructure/ui-motion": "8.56.1",
-    "@instructure/ui-prop-types": "8.56.1",
-    "@instructure/ui-react-utils": "8.56.1",
-    "@instructure/ui-testable": "8.56.1",
-    "@instructure/ui-utils": "8.56.1",
-    "@instructure/ui-view": "8.56.1",
-    "@instructure/uid": "8.56.1",
+    "@instructure/console": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/debounce": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/emotion": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/shared-types": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-dom-utils": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-focusable": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-i18n": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-motion": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-prop-types": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-react-utils": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-testable": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-utils": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-view": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/uid": "8.56.2-pr-snapshot-1721749364069",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },