@instructure/ui-tabs 10.16.0 → 10.16.1-pr-snapshot-1744893671793

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.
 
+## [10.16.1-pr-snapshot-1744893671793](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-pr-snapshot-1744893671793) (2025-04-17)
+
+**Note:** Version bump only for package @instructure/ui-tabs
+
+
+
+
+
 # [10.16.0](https://github.com/instructure/instructure-ui/compare/v10.15.2...v10.16.0) (2025-04-11)
 
 **Note:** Version bump only for package @instructure/ui-tabs

package/es/Tabs/Panel/__new-tests__/Panel.test.js

@@ -23,24 +23,26 @@ var _Panel, _Panel2;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { Panel } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<Tabs.Panel />', () => {
   it('should render children', async () => {
-    render(_Panel || (_Panel = /*#__PURE__*/React.createElement(Panel, {
+    render(_Panel || (_Panel = _jsx(Panel, {
       isSelected: true,
-      renderTitle: "Panel Title"
-    }, "Panel contents")));
+      renderTitle: "Panel Title",
+      children: "Panel contents"
+    })));
     const children = screen.getByText('Panel contents');
     expect(children).toBeInTheDocument();
   });
   it('should have appropriate role attribute', async () => {
-    const _render = render(_Panel2 || (_Panel2 = /*#__PURE__*/React.createElement(Panel, {
+    const _render = render(_Panel2 || (_Panel2 = _jsx(Panel, {
         isSelected: true,
-        renderTitle: "Panel Title"
-      }, "Panel contents"))),
+        renderTitle: "Panel Title",
+        children: "Panel contents"
+      }))),
       container = _render.container;
     const tabPanel = container.querySelector('[class$="-panel"]');
     expect(tabPanel).toHaveAttribute('role', 'tabpanel');

package/es/Tabs/Panel/index.js

@@ -25,12 +25,11 @@ var _dec, _class, _Panel;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { View } from '@instructure/ui-view';
 import { passthroughProps } from '@instructure/ui-react-utils';
 import { Transition } from '@instructure/ui-motion';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -41,6 +40,7 @@ parent: Tabs
 id: Tabs.Panel
 ---
 **/
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Panel = class Panel extends Component {
   constructor(...args) {
     super(...args);
@@ -88,27 +88,31 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
       active = _this$props4.active,
       unmountOnExit = _this$props4.unmountOnExit,
       props = _objectWithoutProperties(_this$props4, _excluded);
-    return jsx("div", Object.assign({}, passthroughProps(props), {
+    return _jsx("div", {
+      ...passthroughProps(props),
       css: styles === null || styles === void 0 ? void 0 : styles.panel,
       role: "tabpanel",
       tabIndex: 0,
       id: id,
       "aria-labelledby": labelledBy,
       "aria-hidden": this.isHidden ? 'true' : void 0,
-      ref: this.handleRef
-    }), jsx(Transition, {
-      type: "fade",
-      in: !this.isHidden,
-      unmountOnExit: unmountOnExit,
-      transitionExit: false
-    }, jsx(View, {
-      css: styles === null || styles === void 0 ? void 0 : styles.content,
-      maxHeight: maxHeight,
-      minHeight: minHeight,
-      as: "div",
-      padding: padding,
-      textAlign: textAlign
-    }, children)));
+      ref: this.handleRef,
+      children: _jsx(Transition, {
+        type: "fade",
+        in: !this.isHidden,
+        unmountOnExit: unmountOnExit,
+        transitionExit: false,
+        children: _jsx(View, {
+          css: styles === null || styles === void 0 ? void 0 : styles.content,
+          maxHeight: maxHeight,
+          minHeight: minHeight,
+          as: "div",
+          padding: padding,
+          textAlign: textAlign,
+          children: children
+        })
+      })
+    });
   }
 }, _Panel.displayName = "Panel", _Panel.componentId = 'Tabs.Panel', _Panel.allowedProps = allowedProps, _Panel.propTypes = propTypes, _Panel.defaultProps = {
   isDisabled: false,

package/es/Tabs/Tab/__new-tests__/Tab.test.js

@@ -23,99 +23,108 @@ var _Tab, _Tab2, _Tab3, _Tab4, _Tab5, _Tab6, _Tab7, _Tab8;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { Tab } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<Tabs.Tab />', () => {
   it('should render children', async () => {
-    render(_Tab || (_Tab = /*#__PURE__*/React.createElement(Tab, {
+    render(_Tab || (_Tab = _jsx(Tab, {
       id: "foo",
       index: 0,
-      controls: "foo-panel"
-    }, "Tab Label")));
+      controls: "foo-panel",
+      children: "Tab Label"
+    })));
     const children = screen.getByText('Tab Label');
     expect(children).toBeInTheDocument();
   });
   it('should have appropriate role attribute', async () => {
-    render(_Tab2 || (_Tab2 = /*#__PURE__*/React.createElement(Tab, {
+    render(_Tab2 || (_Tab2 = _jsx(Tab, {
       id: "foo",
       index: 0,
-      controls: "foo-panel"
-    }, "Tab Label")));
+      controls: "foo-panel",
+      children: "Tab Label"
+    })));
     const tab = screen.getByRole('tab');
     expect(tab).toBeInTheDocument();
   });
   it('should have appropriate aria attributes', async () => {
-    render(_Tab3 || (_Tab3 = /*#__PURE__*/React.createElement(Tab, {
+    render(_Tab3 || (_Tab3 = _jsx(Tab, {
       id: "foo",
       index: 0,
-      controls: "foo-panel"
-    }, "Tab Label")));
+      controls: "foo-panel",
+      children: "Tab Label"
+    })));
     const tab = screen.getByRole('tab');
     expect(tab).not.toHaveAttribute('aria-selected');
     expect(tab).not.toHaveAttribute('aria-disabled');
   });
   it('should set the aria-selected attribute', async () => {
-    render(_Tab4 || (_Tab4 = /*#__PURE__*/React.createElement(Tab, {
+    render(_Tab4 || (_Tab4 = _jsx(Tab, {
       id: "foo",
       index: 0,
       controls: "foo-panel",
-      isSelected: true
-    }, "Tab Label")));
+      isSelected: true,
+      children: "Tab Label"
+    })));
     const tab = screen.getByRole('tab');
     expect(tab).toHaveAttribute('aria-selected', 'true');
   });
   it('should set the aria-disabled attribute', async () => {
-    render(_Tab5 || (_Tab5 = /*#__PURE__*/React.createElement(Tab, {
+    render(_Tab5 || (_Tab5 = _jsx(Tab, {
       id: "foo",
       index: 0,
       controls: "foo-panel",
-      isDisabled: true
-    }, "Tab Label")));
+      isDisabled: true,
+      children: "Tab Label"
+    })));
     const tab = screen.getByRole('tab');
     expect(tab).toHaveAttribute('aria-disabled', 'true');
   });
   it('should set the tabindex to 0 when selected', async () => {
-    render(_Tab6 || (_Tab6 = /*#__PURE__*/React.createElement(Tab, {
+    render(_Tab6 || (_Tab6 = _jsx(Tab, {
       id: "foo",
       index: 0,
       controls: "foo-panel",
-      isSelected: true
-    }, "Tab Label")));
+      isSelected: true,
+      children: "Tab Label"
+    })));
     const tab = screen.getByRole('tab');
     expect(tab).toHaveAttribute('tabindex', '0');
   });
   it('should not set the tabindex when not selected', async () => {
-    render(_Tab7 || (_Tab7 = /*#__PURE__*/React.createElement(Tab, {
+    render(_Tab7 || (_Tab7 = _jsx(Tab, {
       id: "foo",
       index: 0,
-      controls: "foo-panel"
-    }, "Tab Label")));
+      controls: "foo-panel",
+      children: "Tab Label"
+    })));
     const tab = screen.getByRole('tab');
     expect(tab).not.toHaveAttribute('tabindex');
   });
   it('should remove the tabindex attribute when disabled', async () => {
-    render(_Tab8 || (_Tab8 = /*#__PURE__*/React.createElement(Tab, {
+    render(_Tab8 || (_Tab8 = _jsx(Tab, {
       id: "foo",
       index: 0,
       controls: "foo-panel",
-      isDisabled: true
-    }, "Tab Label")));
+      isDisabled: true,
+      children: "Tab Label"
+    })));
     const tab = screen.getByRole('tab');
     expect(tab).not.toHaveAttribute('tabindex');
   });
   it('should call onClick when clicked', async () => {
     const onClick = vi.fn();
     const index = 2;
-    render(/*#__PURE__*/React.createElement(Tab, {
+    render(_jsx(Tab, {
       id: "foo",
       index: index,
       controls: "foo-panel",
-      onClick: onClick
-    }, "Tab Label"));
+      onClick: onClick,
+      children: "Tab Label"
+    }));
     const tab = screen.getByRole('tab');
     await userEvent.click(tab);
     await waitFor(() => {
@@ -126,13 +135,14 @@ describe('<Tabs.Tab />', () => {
   });
   it('should NOT call onClick when clicked and tab is disabled', async () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(Tab, {
+    render(_jsx(Tab, {
       id: "foo",
       index: 0,
       controls: "foo-panel",
       onClick: onClick,
-      isDisabled: true
-    }, "Tab Label"));
+      isDisabled: true,
+      children: "Tab Label"
+    }));
     const tab = screen.getByRole('tab');
     await userEvent.click(tab);
     await waitFor(() => {
@@ -142,13 +152,14 @@ describe('<Tabs.Tab />', () => {
   it('should call onKeyDown when keys are pressed and tab is selected', async () => {
     const onKeyDown = vi.fn();
     const index = 2;
-    render(/*#__PURE__*/React.createElement(Tab, {
+    render(_jsx(Tab, {
       id: "foo",
       isSelected: true,
       index: index,
       controls: "foo-panel",
-      onKeyDown: onKeyDown
-    }, "Tab Label"));
+      onKeyDown: onKeyDown,
+      children: "Tab Label"
+    }));
     const tab = screen.getByRole('tab');
     await userEvent.type(tab, '{enter}');
     await waitFor(() => {
@@ -159,13 +170,14 @@ describe('<Tabs.Tab />', () => {
   });
   it('should NOT call onKeyDown when keys are pressed and tab is disabled', async () => {
     const onKeyDown = vi.fn();
-    render(/*#__PURE__*/React.createElement(Tab, {
+    render(_jsx(Tab, {
       id: "foo",
       index: 0,
       controls: "foo-panel",
       onKeyDown: onKeyDown,
-      isDisabled: true
-    }, "Tab Label"));
+      isDisabled: true,
+      children: "Tab Label"
+    }));
     const tab = screen.getByRole('tab');
     await userEvent.type(tab, '{enter}');
     await waitFor(() => {

package/es/Tabs/Tab/index.js

@@ -25,11 +25,10 @@ var _dec, _class, _Tab;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { passthroughProps, callRenderProp } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -39,6 +38,7 @@ import { allowedProps, propTypes } from './props';
 category: components/utilities
 ---
 **/
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Tab = class Tab extends Component {
   constructor(...args) {
     super(...args);
@@ -93,7 +93,8 @@ let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       children = _this$props5.children,
       styles = _this$props5.styles,
       props = _objectWithoutProperties(_this$props5, _excluded);
-    return jsx(View, Object.assign({}, passthroughProps(props), {
+    return _jsx(View, {
+      ...passthroughProps(props),
       as: "div",
       role: "tab",
       id: id,
@@ -105,8 +106,9 @@ let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       "aria-controls": controls,
       tabIndex: isSelected && !isDisabled ? 0 : void 0,
       position: "relative",
-      focusPosition: "inset"
-    }), callRenderProp(children));
+      focusPosition: "inset",
+      children: callRenderProp(children)
+    });
   }
 }, _Tab.displayName = "Tab", _Tab.componentId = 'Tabs.Tab', _Tab.allowedProps = allowedProps, _Tab.propTypes = propTypes, _Tab.defaultProps = {
   variant: 'default',