@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/Tabs/Tab.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tabs.css';
+import { Box, ButtonBase } from '../utils/index.js';
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example
@@ -15,11 +14,44 @@ import '@itwin/itwinui-css/css/tabs.css';
  * ];
  */
 export const Tab = React.forwardRef((props, forwardedRef) => {
-    const { label, sublabel, startIcon, children, active = false, className, ...rest } = props;
-    return (React.createElement(Box, { as: 'button', className: cx('iui-tab', { 'iui-active': active }, className), role: 'tab', tabIndex: -1, ref: forwardedRef, ...rest },
-        !!startIcon ? (React.createElement(Box, { as: 'span', className: 'iui-tab-icon', "aria-hidden": true }, startIcon)) : null,
-        label && (React.createElement(Box, { as: 'span', className: 'iui-tab-label' },
-            React.createElement("div", null, label),
-            sublabel && React.createElement(Box, { className: 'iui-tab-description' }, sublabel))),
-        children));
+  const {
+    label,
+    sublabel,
+    startIcon,
+    children,
+    active = false,
+    className,
+    ...rest
+  } = props;
+  return React.createElement(
+    ButtonBase,
+    {
+      className: cx('iui-tab', { 'iui-active': active }, className),
+      role: 'tab',
+      tabIndex: -1,
+      ref: forwardedRef,
+      ...rest,
+    },
+    !!startIcon
+      ? React.createElement(
+          Box,
+          { as: 'span', className: 'iui-tab-icon', 'aria-hidden': true },
+          startIcon,
+        )
+      : null,
+    label &&
+      React.createElement(
+        Box,
+        { as: 'span', className: 'iui-tab-label' },
+        React.createElement('div', null, label),
+        sublabel &&
+          React.createElement(
+            Box,
+            { className: 'iui-tab-description' },
+            sublabel,
+          ),
+      ),
+    children,
+  );
 });
+export default Tab;

package/esm/core/Tabs/Tabs.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/tabs.css';
-export declare type OverflowOptions = {
+export type OverflowOptions = {
     /**
      * Whether to allow tabs list to scroll when there is overflow,
      * i.e. when there is not enough space to fit all the tabs.
@@ -9,7 +8,7 @@ export declare type OverflowOptions = {
      */
     useOverflow?: boolean;
 };
-declare type TabsOverflowProps = {
+type TabsOverflowProps = {
     /**
      * Options that can be specified to deal with tabs overflowing the allotted space.
      */
@@ -24,7 +23,7 @@ declare type TabsOverflowProps = {
 } | {
     type: 'pill' | 'borderless';
 };
-declare type TabsOrientationProps = {
+type TabsOrientationProps = {
     /**
      * Orientation of the tabs.
      * @default 'horizontal'
@@ -41,7 +40,7 @@ declare type TabsOrientationProps = {
     orientation: 'vertical';
     type?: 'default' | 'borderless';
 };
-declare type TabsTypeProps = {
+type TabsTypeProps = {
     /**
      * Type of the tabs.
      *
@@ -58,7 +57,7 @@ declare type TabsTypeProps = {
 } | {
     type: 'pill';
 };
-export declare type TabsProps = {
+export type TabsProps = {
     /**
      * Elements shown for each tab.
      * Recommended to pass an array of `Tab` components.
@@ -100,16 +99,6 @@ export declare type TabsProps = {
      */
     children?: React.ReactNode;
 } & TabsOrientationProps & TabsTypeProps & TabsOverflowProps;
-/**
- * @deprecated Since v2, use `TabProps` with `Tabs`
- */
-declare type HorizontalTabsProps = Omit<TabsProps, 'orientation'>;
-/**
- * @deprecated Since v2, use `TabProps` with `Tabs`
- */
-declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'> & {
-    type?: 'default' | 'borderless';
-};
 /**
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
@@ -137,31 +126,5 @@ declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'> & {
  * ];
  * <Tabs labels={tabsWithIcons} type='pill' />
  */
-export declare const Tabs: (props: TabsProps) => JSX.Element;
-/**
- * @deprecated Since v2, directly use `Tabs` with `orientation: 'horizontal'`
- *
- * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
- * @example
- * const tabs = [
- *   <Tab label='Label 1' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
- * ];
- * <HorizontalTabs labels={tabs} activeIndex={1}>Tabpanel content</HorizontalTabs>
- */
-export declare const HorizontalTabs: (props: HorizontalTabsProps) => JSX.Element;
-/**
- * @deprecated Since v2, directly use `Tabs` with `orientation: 'vertical'`
- *
- * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
- * @example
- * const tabs = [
- *   <Tab label='Label 1' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
- * ];
- * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
- */
-export declare const VerticalTabs: (props: VerticalTabsProps) => JSX.Element;
+export declare const Tabs: (props: TabsProps) => React.JSX.Element;
 export default Tabs;