@itwin/itwinui-react 3.0.0-dev.3 → 3.0.0-dev.5

package/cjs/core/Table/index.js

@@ -1,23 +1,83 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.tableFilters = exports.FilterButtonBar = exports.BaseFilter = exports.Table = void 0;
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.SelectionColumn =
+  exports.ExpanderColumn =
+  exports.ActionColumn =
+  exports.TablePaginator =
+  exports.EditableCell =
+  exports.DefaultCell =
+  exports.tableFilters =
+  exports.FilterButtonBar =
+  exports.BaseFilter =
+  exports.Table =
+    void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Table_js_1 = require("./Table.js");
-Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_js_1.Table; } });
-var index_js_1 = require("./filters/index.js");
-Object.defineProperty(exports, "BaseFilter", { enumerable: true, get: function () { return index_js_1.BaseFilter; } });
-Object.defineProperty(exports, "FilterButtonBar", { enumerable: true, get: function () { return index_js_1.FilterButtonBar; } });
-Object.defineProperty(exports, "tableFilters", { enumerable: true, get: function () { return index_js_1.tableFilters; } });
-var index_js_2 = require("./cells/index.js");
-Object.defineProperty(exports, "DefaultCell", { enumerable: true, get: function () { return index_js_2.DefaultCell; } });
-Object.defineProperty(exports, "EditableCell", { enumerable: true, get: function () { return index_js_2.EditableCell; } });
-var TablePaginator_js_1 = require("./TablePaginator.js");
-Object.defineProperty(exports, "TablePaginator", { enumerable: true, get: function () { return TablePaginator_js_1.TablePaginator; } });
-var index_js_3 = require("./columns/index.js");
-Object.defineProperty(exports, "ActionColumn", { enumerable: true, get: function () { return index_js_3.ActionColumn; } });
-Object.defineProperty(exports, "ExpanderColumn", { enumerable: true, get: function () { return index_js_3.ExpanderColumn; } });
-Object.defineProperty(exports, "SelectionColumn", { enumerable: true, get: function () { return index_js_3.SelectionColumn; } });
+var Table_js_1 = require('./Table.js');
+Object.defineProperty(exports, 'Table', {
+  enumerable: true,
+  get: function () {
+    return Table_js_1.Table;
+  },
+});
+var index_js_1 = require('./filters/index.js');
+Object.defineProperty(exports, 'BaseFilter', {
+  enumerable: true,
+  get: function () {
+    return index_js_1.BaseFilter;
+  },
+});
+Object.defineProperty(exports, 'FilterButtonBar', {
+  enumerable: true,
+  get: function () {
+    return index_js_1.FilterButtonBar;
+  },
+});
+Object.defineProperty(exports, 'tableFilters', {
+  enumerable: true,
+  get: function () {
+    return index_js_1.tableFilters;
+  },
+});
+var index_js_2 = require('./cells/index.js');
+Object.defineProperty(exports, 'DefaultCell', {
+  enumerable: true,
+  get: function () {
+    return index_js_2.DefaultCell;
+  },
+});
+Object.defineProperty(exports, 'EditableCell', {
+  enumerable: true,
+  get: function () {
+    return index_js_2.EditableCell;
+  },
+});
+var TablePaginator_js_1 = require('./TablePaginator.js');
+Object.defineProperty(exports, 'TablePaginator', {
+  enumerable: true,
+  get: function () {
+    return TablePaginator_js_1.TablePaginator;
+  },
+});
+var index_js_3 = require('./columns/index.js');
+Object.defineProperty(exports, 'ActionColumn', {
+  enumerable: true,
+  get: function () {
+    return index_js_3.ActionColumn;
+  },
+});
+Object.defineProperty(exports, 'ExpanderColumn', {
+  enumerable: true,
+  get: function () {
+    return index_js_3.ExpanderColumn;
+  },
+});
+Object.defineProperty(exports, 'SelectionColumn', {
+  enumerable: true,
+  get: function () {
+    return index_js_3.SelectionColumn;
+  },
+});
 exports.default = './Table';

package/cjs/core/Table/utils.js

@@ -1,50 +1,52 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.getStickyStyle = exports.getCellStyle = void 0;
 const getCellStyle = (column, isTableResizing) => {
-    const style = {};
-    style.flex = `1 1 145px`;
-    if (column.width) {
-        const width = typeof column.width === 'string' ? column.width : `${column.width}px`;
-        style.width = width;
-        // This allows flexbox to handle the width of the column on table resize
-        if (isTableResizing && column.canResize) {
-            style.flex = `${Number(column.width)} ${Number(column.width)} ${width}`;
-        }
-        else {
-            style.flex = `0 0 ${width}`;
-        }
+  const style = {};
+  style.flex = `1 1 145px`;
+  if (column.width) {
+    const width =
+      typeof column.width === 'string' ? column.width : `${column.width}px`;
+    style.width = width;
+    // This allows flexbox to handle the width of the column on table resize
+    if (isTableResizing && column.canResize) {
+      style.flex = `${Number(column.width)} ${Number(column.width)} ${width}`;
+    } else {
+      style.flex = `0 0 ${width}`;
     }
-    if (column.maxWidth) {
-        style.maxWidth = `${column.maxWidth}px`;
-    }
-    if (column.minWidth) {
-        style.minWidth = `${column.minWidth}px`;
-    }
-    return style;
+  }
+  if (column.maxWidth) {
+    style.maxWidth = `${column.maxWidth}px`;
+  }
+  if (column.minWidth) {
+    style.minWidth = `${column.minWidth}px`;
+  }
+  return style;
 };
 exports.getCellStyle = getCellStyle;
 const getStickyStyle = (column, columnList) => {
-    if (!column.sticky) {
-        return {};
-    }
-    let left = 0;
-    for (const col of columnList) {
-        if (col.id === column.id) {
-            break;
-        }
-        left += Number(col.width || col.resizeWidth || 0);
+  if (!column.sticky) {
+    return {};
+  }
+  let left = 0;
+  for (const col of columnList) {
+    if (col.id === column.id) {
+      break;
     }
-    let right = 0;
-    for (const col of [...columnList].reverse()) {
-        if (col.id === column.id) {
-            break;
-        }
-        right += Number(col.width || col.resizeWidth || 0);
+    left += Number(col.width || col.resizeWidth || 0);
+  }
+  let right = 0;
+  for (const col of [...columnList].reverse()) {
+    if (col.id === column.id) {
+      break;
     }
-    return {
-        '--iui-table-sticky-left': column.sticky === 'left' ? `${left}px` : undefined,
-        '--iui-table-sticky-right': column.sticky === 'right' ? `${right}px` : undefined,
-    };
+    right += Number(col.width || col.resizeWidth || 0);
+  }
+  return {
+    '--iui-table-sticky-left':
+      column.sticky === 'left' ? `${left}px` : undefined,
+    '--iui-table-sticky-right':
+      column.sticky === 'right' ? `${right}px` : undefined,
+  };
 };
 exports.getStickyStyle = getStickyStyle;

package/cjs/core/Tabs/Tab.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type TabProps = {
+type TabProps = {
     /**
      * The main label shown in the tab.
      */
@@ -37,4 +37,4 @@ declare type TabProps = {
  * ];
  */
 export declare const Tab: PolymorphicForwardRefComponent<"button", TabProps>;
-export default TabProps;
+export default Tab;

package/cjs/core/Tabs/Tab.js

@@ -1,39 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Tab = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example
@@ -43,11 +18,49 @@ const index_js_1 = require("../utils/index.js");
  * ];
  */
 exports.Tab = React.forwardRef((props, forwardedRef) => {
-    const { label, sublabel, startIcon, children, active = false, className, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { as: 'button', className: (0, classnames_1.default)('iui-tab', { 'iui-active': active }, className), role: 'tab', tabIndex: -1, ref: forwardedRef, ...rest },
-        !!startIcon ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-tab-icon', "aria-hidden": true }, startIcon)) : null,
-        label && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-tab-label' },
-            React.createElement("div", null, label),
-            sublabel && React.createElement(index_js_1.Box, { className: 'iui-tab-description' }, sublabel))),
-        children));
+  const {
+    label,
+    sublabel,
+    startIcon,
+    children,
+    active = false,
+    className,
+    ...rest
+  } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: 'button',
+      className: (0, classnames_1.default)(
+        'iui-tab',
+        { 'iui-active': active },
+        className,
+      ),
+      role: 'tab',
+      tabIndex: -1,
+      ref: forwardedRef,
+      ...rest,
+    },
+    !!startIcon
+      ? React.createElement(
+          index_js_1.Box,
+          { as: 'span', className: 'iui-tab-icon', 'aria-hidden': true },
+          startIcon,
+        )
+      : null,
+    label &&
+      React.createElement(
+        index_js_1.Box,
+        { as: 'span', className: 'iui-tab-label' },
+        React.createElement('div', null, label),
+        sublabel &&
+          React.createElement(
+            index_js_1.Box,
+            { className: 'iui-tab-description' },
+            sublabel,
+          ),
+      ),
+    children,
+  );
 });
+exports.default = exports.Tab;

package/cjs/core/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-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.
@@ -8,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.
      */
@@ -23,7 +23,7 @@ declare type TabsOverflowProps = {
 } | {
     type: 'pill' | 'borderless';
 };
-declare type TabsOrientationProps = {
+type TabsOrientationProps = {
     /**
      * Orientation of the tabs.
      * @default 'horizontal'
@@ -40,7 +40,7 @@ declare type TabsOrientationProps = {
     orientation: 'vertical';
     type?: 'default' | 'borderless';
 };
-declare type TabsTypeProps = {
+type TabsTypeProps = {
     /**
      * Type of the tabs.
      *
@@ -57,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.
@@ -99,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
@@ -136,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;