@instructure/ui-tabs 11.6.0 → 11.6.1-snapshot-129

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tabs",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,28 +16,28 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "keycode": "^2",
-    "@instructure/console": "11.6.0",
-    "@instructure/debounce": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-focusable": "11.6.0",
-    "@instructure/ui-i18n": "11.6.0",
-    "@instructure/ui-motion": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/ui-view": "11.6.0",
-    "@instructure/uid": "11.6.0"
+    "@instructure/debounce": "11.6.1-snapshot-129",
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-focusable": "11.6.1-snapshot-129",
+    "@instructure/ui-i18n": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-motion": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129",
+    "@instructure/uid": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -47,17 +47,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/Tabs/{Panel → v1/Panel}/index.tsx

@@ -24,11 +24,11 @@
 
 import { Component } from 'react'
 
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 import { passthroughProps } from '@instructure/ui-react-utils'
 import { Transition } from '@instructure/ui-motion'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Tabs/{Tab → v1/Tab}/index.tsx

@@ -25,10 +25,10 @@
 import { Component } from 'react'
 
 import { passthroughProps, callRenderProp } from '@instructure/ui-react-utils'
-import { View } from '@instructure/ui-view'
-import type { ViewOwnProps } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
+import type { ViewOwnProps } from '@instructure/ui-view/v11_6'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Tabs/{Tab → v1/Tab}/props.ts

@@ -29,7 +29,7 @@ import type {
   TabsTabTheme
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type { ViewOwnProps } from '@instructure/ui-view'
+import type { ViewOwnProps } from '@instructure/ui-view/v11_6'
 
 type TabsTabOwnProps = {
   variant?: 'default' | 'secondary'

package/src/Tabs/{index.tsx → v1/index.tsx}

@@ -32,8 +32,8 @@ import {
 
 import keycode from 'keycode'
 
-import { View } from '@instructure/ui-view'
-import type { ViewOwnProps } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
+import type { ViewOwnProps } from '@instructure/ui-view/v11_6'
 import {
   matchComponentTypes,
   safeCloneElement,
@@ -48,7 +48,7 @@ import { debounce } from '@instructure/debounce'
 import type { Debounced } from '@instructure/debounce'
 import { px } from '@instructure/ui-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Tabs/{props.ts → v1/props.ts}

@@ -29,7 +29,7 @@ import type {
 } from '@instructure/emotion'
 import type { OtherHTMLAttributes, TabsTheme } from '@instructure/shared-types'
 import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n'
-import type { ViewOwnProps } from '@instructure/ui-view'
+import type { ViewOwnProps } from '@instructure/ui-view/v11_6'
 
 type TabsOwnProps = {
   /**

package/src/Tabs/v2/Panel/index.tsx

@@ -0,0 +1,138 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+
+import { Component } from 'react'
+
+import { View } from '@instructure/ui-view/latest'
+import { passthroughProps } from '@instructure/ui-react-utils'
+import { Transition } from '@instructure/ui-motion'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import type { TabsPanelProps } from './props'
+import { allowedProps } from './props'
+
+/**
+---
+parent: Tabs
+id: Tabs.Panel
+---
+**/
+@withStyle(generateStyle)
+class Panel extends Component<TabsPanelProps> {
+  static readonly componentId = 'Tabs.Panel'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    isDisabled: false,
+    textAlign: 'start',
+    variant: 'default',
+    isSelected: false,
+    padding: 'small',
+    active: false,
+    unmountOnExit: true
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.({ isHidden: this.isHidden })
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.({ isHidden: this.isHidden })
+  }
+
+  ref: HTMLDivElement | null = null
+
+  get isHidden() {
+    const { isDisabled, isSelected } = this.props
+    return !isSelected || !!isDisabled
+  }
+
+  handleRef = (el: HTMLDivElement | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  render() {
+    const {
+      labelledBy,
+      variant,
+      id,
+      maxHeight,
+      minHeight,
+      padding,
+      textAlign,
+      children,
+      elementRef,
+      isDisabled,
+      isSelected,
+      styles,
+      active,
+      unmountOnExit,
+      tabIndex,
+      ...props
+    } = this.props
+
+    return (
+      <div
+        {...passthroughProps(props)}
+        css={styles?.panel}
+        role="tabpanel"
+        id={id}
+        aria-labelledby={labelledBy}
+        aria-hidden={this.isHidden ? 'true' : undefined}
+        tabIndex={this.isHidden ? undefined : tabIndex}
+        ref={this.handleRef}
+      >
+        <Transition
+          type="fade"
+          in={!this.isHidden}
+          unmountOnExit={unmountOnExit}
+          transitionExit={false}
+        >
+          <View
+            css={styles?.content}
+            maxHeight={maxHeight}
+            minHeight={minHeight}
+            as="div"
+            padding={padding}
+            textAlign={textAlign}
+          >
+            {children}
+          </View>
+        </Transition>
+      </div>
+    )
+  }
+}
+
+export default Panel
+export { Panel }

package/src/Tabs/v2/Panel/props.ts

@@ -0,0 +1,100 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+
+import React from 'react'
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type {
+  OtherHTMLAttributes,
+  TabsPanelTheme
+} from '@instructure/shared-types'
+
+type TabsPanelOwnProps = {
+  /**
+   * The content that will be rendered in the corresponding <Tab /> and will label
+   * this `<Tabs.Panel />` for screen readers
+   */
+  renderTitle: React.ReactNode | (() => React.ReactNode)
+  children?: React.ReactNode
+  variant?: 'default' | 'secondary'
+  isSelected?: boolean
+  isDisabled?: boolean
+  maxHeight?: string | number
+  minHeight?: string | number
+  id?: string
+  labelledBy?: string
+  padding?: Spacing
+  textAlign?: 'start' | 'center' | 'end'
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef?: (element: HTMLDivElement | null) => void
+  /**
+   * Only one `<Tabs.Panel />` can be marked as active. The marked panel's content is rendered
+   * for all the `<Tabs.Panel />`s.
+   */
+  active?: boolean
+  /**
+   * When set to false, the tabPanel only will be hidden, but not dismounted when not active
+   */
+  unmountOnExit?: boolean
+  /**
+   * The tabIndex of the tabpanel element. Set to 0 for text-only panels to make them
+   * accessible to keyboard and screen reader users.
+   */
+  tabIndex?: number
+}
+
+type PropKeys = keyof TabsPanelOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TabsPanelProps = TabsPanelOwnProps &
+  WithStyleProps<TabsPanelTheme, TabsPanelStyle> &
+  OtherHTMLAttributes<TabsPanelOwnProps>
+
+type TabsPanelStyle = ComponentStyle<'panel' | 'content'>
+const allowedProps: AllowedPropKeys = [
+  'renderTitle',
+  'children',
+  'variant',
+  'isSelected',
+  'isDisabled',
+  'maxHeight',
+  'minHeight',
+  'id',
+  'labelledBy',
+  'padding',
+  'textAlign',
+  'elementRef',
+  'active',
+  'unmountOnExit',
+  'tabIndex'
+]
+
+export type { TabsPanelProps, TabsPanelStyle }
+export { allowedProps }

package/src/Tabs/v2/Panel/styles.ts

@@ -0,0 +1,92 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+
+import type { TabsPanelProps, TabsPanelStyle } from './props'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+
+type StyleParams = {
+  maxHeight: TabsPanelProps['maxHeight']
+  isSelected: TabsPanelProps['isSelected']
+  isHidden: boolean
+}
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} params the props and passed through data of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['TabsPanel'],
+  params: StyleParams,
+  sharedTokens: SharedTokens
+): TabsPanelStyle => {
+  const { maxHeight, isSelected, isHidden } = params
+
+  return {
+    panel: {
+      label: 'panel',
+      boxSizing: 'border-box',
+      flexShrink: 0,
+      flexGrow: 0,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      lineHeight: componentTheme.lineHeight,
+      fontSize: componentTheme.fontSize,
+      ...(isSelected && {
+        flexGrow: 1,
+        height: '100%'
+      }),
+      ...(isHidden && {
+        display: 'none'
+      }),
+      '&:focus': {
+        outlineColor: sharedTokens.focusOutline.infoColor
+      }
+    },
+    content: {
+      label: 'panel__content',
+      boxSizing: 'border-box',
+      width: '100%',
+      height: '100%',
+      borderWidth: componentTheme.borderWidth,
+      borderStyle: 'solid',
+      background: componentTheme.background,
+      borderColor: componentTheme.borderColor,
+      color: componentTheme.textColor,
+      borderLeft: 'none',
+      borderRight: 'none',
+      borderBottom: 'none',
+      // we exposed this so in some use cases it can be set to "visible",
+      // e.g. when a 100% width button's focus ring would get cropped
+      overflowY: componentTheme.defaultOverflowY,
+      ...(maxHeight && { overflow: 'auto' })
+    }
+  }
+}
+
+export default generateStyle