@itwin/itwinui-react 3.0.0-dev.8 → 3.0.0

package/esm/core/Table/filters/FilterToggle.js

@@ -4,13 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import {
-  useGlobals,
-  Popover,
-  SvgFilterHollow,
-  SvgFilter,
-} from '../../utils/index.js';
-import { IconButton } from '../../Buttons/index.js';
+import { useGlobals, SvgFilterHollow, SvgFilter } from '../../utils/index.js';
+import { IconButton } from '../../Buttons/IconButton.js';
+import { Popover } from '../../Popover/Popover.js';
 /**
  * Handles showing filter icon and opening filter component.
  */
@@ -43,7 +39,9 @@ export const FilterToggle = (props) => {
           content: column.render('Filter', { close, setFilter, clearFilter }),
           placement: 'bottom-start',
           visible: isVisible,
-          onClickOutside: close,
+          onVisibleChange: setIsVisible,
+          closeOnOutsideClick: true,
+          applyBackground: true,
         },
         React.createElement(
           IconButton,
@@ -51,8 +49,8 @@ export const FilterToggle = (props) => {
             styleType: 'borderless',
             isActive: isVisible || isColumnFiltered,
             className: cx('iui-table-filter-button', className),
+            'aria-label': 'Filter',
             onClick: (e) => {
-              setIsVisible((v) => !v);
               // Prevents from triggering sort
               e.stopPropagation();
             },

package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useGlobals } from '../../../utils/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
-import { LabeledInput } from '../../../LabeledInput/index.js';
+import { LabeledInput } from '../../../LabeledInput/LabeledInput.js';
 const defaultStrings = {
   from: 'From',
   to: 'To',

package/esm/core/Table/filters/TextFilter/TextFilter.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { useGlobals } from '../../../utils/index.js';
-import { Input } from '../../../Input/index.js';
+import { Input } from '../../../Input/Input.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
 export const TextFilter = (props) => {

package/esm/core/Table/filters/customFilterFunctions.d.ts

@@ -1,4 +1,4 @@
-import type { IdType, Row } from 'react-table';
+import type { IdType, Row } from '../../../react-table/react-table.js';
 export declare const customFilterFunctions: {
     betweenDate: {
         <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: [Date?, Date?] | undefined): Row<T>[];

package/esm/core/Table/filters/defaultFilterFunctions.d.ts

@@ -24,7 +24,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import type { IdType, Row } from 'react-table';
+import type { IdType, Row } from '../../../react-table/react-table.js';
 export declare const defaultFilterFunctions: {
     text: {
         <T extends Record<string, unknown>>(rows: Row<T>[], ids: IdType<T>[], filterValue: string): Row<T>[];

package/esm/core/Table/filters/types.d.ts

@@ -1,4 +1,4 @@
-import type { FieldType, FilterProps, FilterType, HeaderGroup } from 'react-table';
+import type { FieldType, FilterType, TableFilterProps } from '../../../react-table/react-table.js';
 export interface TableFilterValue<T extends Record<string, unknown>> {
     /**
      * Id of the column.
@@ -17,21 +17,4 @@ export interface TableFilterValue<T extends Record<string, unknown>> {
      */
     filterType: FilterType<T>;
 }
-export type TableFilterProps<T extends Record<string, unknown> | object> = FilterProps<T> & {
-    /**
-     * Data of column on which filter is opened. It is provided by the table it self.
-     */
-    column: HeaderGroup<T>;
-    /**
-     * Function to close the filter. It is provided by the table it self.
-     */
-    close: () => void;
-    /**
-     * Function to set the filter value. It is provided by the table it self.
-     */
-    setFilter: (filterValue: unknown | undefined) => void;
-    /**
-     * Function to clear the filter value. It is provided by the table it self.
-     */
-    clearFilter: () => void;
-};
+export type { TableFilterProps };

package/esm/core/Table/hooks/useColumnDragAndDrop.d.ts

@@ -1,2 +1,2 @@
-import type { Hooks } from 'react-table';
+import type { Hooks } from '../../../react-table/react-table.js';
 export declare const useColumnDragAndDrop: <T extends Record<string, unknown>>(isEnabled: boolean) => (hooks: Hooks<T>) => void;

package/esm/core/Table/hooks/useExpanderCell.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import type { CellProps, Hooks, Row } from 'react-table';
+import type { CellProps, Hooks, Row } from '../../../react-table/react-table.js';
 export declare const useExpanderCell: <T extends Record<string, unknown>>(subComponent?: ((row: Row<T>) => React.ReactNode) | undefined, expanderCell?: ((cellProps: CellProps<T>) => React.ReactNode) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;

package/esm/core/Table/hooks/useResizeColumns.d.ts

@@ -30,7 +30,7 @@
  * SOFTWARE.
  */
 import type * as React from 'react';
-import type { Hooks } from 'react-table';
+import type { Hooks } from '../../../react-table/react-table.js';
 export declare const useResizeColumns: {
     <T extends Record<string, unknown>>(ownerDocument: React.RefObject<Document | undefined>): (hooks: Hooks<T>) => void;
     pluginName: string;

package/esm/core/Table/hooks/useScrollToRow.d.ts

@@ -1,4 +1,4 @@
-import type { Row } from 'react-table';
+import type { Row } from '../../../react-table/react-table.js';
 import type { TableProps } from '../Table.js';
 type ScrollToRow<T extends Record<string, unknown>> = {
     scrollToIndex: number | undefined;

package/esm/core/Table/hooks/useScrollToRow.js

@@ -37,7 +37,7 @@ export function useScrollToRow({
     ) {
       return;
     }
-    rowRefs.current[pageRef.current[scrollToIndex].id]?.scrollIntoView();
+    rowRefs.current[pageRef.current[scrollToIndex]?.id]?.scrollIntoView();
   }, [enableVirtualization, scrollToIndex]);
   const tableRowRef = React.useCallback((row) => {
     return (element) => {

package/esm/core/Table/hooks/useSelectionCell.d.ts

@@ -1,2 +1,2 @@
-import type { Hooks } from 'react-table';
+import type { Hooks } from '../../../react-table/react-table.js';
 export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, selectionMode: 'multi' | 'single', isRowDisabled?: ((rowData: T) => boolean) | undefined, density?: 'default' | 'condensed' | 'extra-condensed') => (hooks: Hooks<T>) => void;

package/esm/core/Table/hooks/useStickyColumns.d.ts

@@ -1,2 +1,2 @@
-import type { Hooks } from 'react-table';
+import type { Hooks } from '../../../react-table/react-table.js';
 export declare const useStickyColumns: <T extends Record<string, unknown>>(hooks: Hooks<T>) => void;

package/esm/core/Table/hooks/useSubRowFiltering.d.ts

@@ -1,2 +1,2 @@
-import type { Hooks } from 'react-table';
+import type { Hooks } from '../../../react-table/react-table.js';
 export declare const useSubRowFiltering: <T extends Record<string, unknown>>(hasAnySubRows: boolean) => (hooks: Hooks<T>) => void;

package/esm/core/Table/hooks/useSubRowSelection.d.ts

@@ -1,2 +1,2 @@
-import type { Hooks } from 'react-table';
+import type { Hooks } from '../../../react-table/react-table.js';
 export declare const useSubRowSelection: <T extends Record<string, unknown>>(hooks: Hooks<T>) => void;

package/esm/core/Table/index.d.ts

@@ -1,5 +1,5 @@
 export { Table } from './Table.js';
-export type { TableProps, TablePaginatorRendererProps } from './Table.js';
+export type { TablePaginatorRendererProps } from './Table.js';
 export { BaseFilter, FilterButtonBar, tableFilters } from './filters/index.js';
 export type { BaseFilterProps, DateRangeFilterOptions, FilterButtonBarProps, FilterButtonBarTranslation, TableFilterProps, TableFilterValue, } from './filters/index.js';
 export { DefaultCell, EditableCell } from './cells/index.js';

package/esm/core/Table/utils.d.ts

@@ -1,3 +1,3 @@
-import type { ColumnInstance } from 'react-table';
+import type { ColumnInstance } from '../../react-table/react-table.js';
 export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;
 export declare const getStickyStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, columnList: ColumnInstance<T>[]) => React.CSSProperties;

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

@@ -1,28 +1,5 @@
 import * as React from 'react';
-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.
-     *
-     * Not applicable to types `pill` and `borderless`.
-     */
-    useOverflow?: boolean;
-};
-type TabsOverflowProps = {
-    /**
-     * Options that can be specified to deal with tabs overflowing the allotted space.
-     */
-    overflowOptions?: OverflowOptions;
-    /**
-     * Type of the tabs.
-     *
-     * If `orientation = 'vertical'`, `pill` is not applicable.
-     * @default 'default'
-     */
-    type?: 'default';
-} | {
-    type: 'pill' | 'borderless';
-};
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type TabsOrientationProps = {
     /**
      * Orientation of the tabs.
@@ -40,24 +17,85 @@ type TabsOrientationProps = {
     orientation: 'vertical';
     type?: 'default' | 'borderless';
 };
-type TabsTypeProps = {
+type TabsWrapperOwnProps = {
     /**
-     * Type of the tabs.
+     * Color of the bar on the active tab.
+     * @default 'blue'
+     */
+    color?: 'blue' | 'green';
+    /**
+     * Control whether focusing tabs (using arrow keys) should automatically select them.
+     * Use 'manual' if tab panel content is not preloaded.
+     * @default 'auto'
+     */
+    focusActivationMode?: 'auto' | 'manual';
+    /**
+     * Value of the tab that should be active on initial render.
      *
-     * If `orientation = 'vertical'`, `pill` is not applicable.
-     * @default 'default'
+     * Should be used for uncontrolled state (when no `value` passed).
+     *
+     * If not specified, then first tab will be active by default.
      */
-    type?: 'default' | 'borderless';
+    defaultValue?: string;
+    /**
+     * Value of the active tab for controlled state.
+     */
+    value?: string;
+    /**
+     * Function that gets called when active tab is changed.
+     *
+     * Should be used alongside `value` prop.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * @deprecated Do not use.
+     */
+    defaultChecked?: never;
+} & TabsOrientationProps;
+type TabListOwnProps = {
+    /**
+     * Tab items.
+     */
+    children: React.ReactNode[];
+};
+type TabOwnProps = {
+    /**
+     * Value used to associate the tab with a given panel.
+     */
+    value: string;
+    /**
+     * Tab label used for simple Tab construction.
+     * Cannot be used with tabs that have icons or descriptions.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * @deprecated Don't pass `id`, as it will be automatically set.
+     */
+    id?: string;
+};
+type TabsActionsOwnProps = {
+    /**
+     * Passes props to the wrapper component for the actions
+     */
+    wrapperProps?: React.ComponentPropsWithRef<'div'>;
+};
+type TabsPanelOwnProps = {
+    /**
+     * Value used to associate the panel with a given tab.
+     */
+    value: string;
+    /**
+     * @deprecated Don't pass `id`, as it will be automatically set.
+     */
+    id?: string;
+};
+type TabsLegacyProps = {
     /**
      * Content displayed to the right/bottom of the horizontal/vertical tabs
      *
      * If `type = 'pill'`, `actions` is not applicable.
      */
     actions?: React.ReactNode[];
-} | {
-    type: 'pill';
-};
-export type TabsProps = {
     /**
      * Elements shown for each tab.
      * Recommended to pass an array of `Tab` components.
@@ -98,33 +136,165 @@ export type TabsProps = {
      * Content inside the tab panel.
      */
     children?: React.ReactNode;
-} & TabsOrientationProps & TabsTypeProps & TabsOverflowProps;
+    /**
+     * @deprecated Tabs will now overflow by default, so this prop does nothing.
+     */
+    overflowOptions?: {
+        /**
+         * @deprecated Tabs will now overflow by default, so this prop does nothing.
+         */
+        useOverflow?: boolean;
+    };
+    defaultValue?: never;
+    defaultChecked?: never;
+} & TabsOrientationProps;
+type TabLegacyProps = {
+    /**
+     * The main label shown in the tab.
+     */
+    label?: React.ReactNode;
+    /**
+     * Secondary label shown below the main label.
+     */
+    sublabel?: React.ReactNode;
+    /**
+     * Svg icon shown before the labels.
+     */
+    startIcon?: JSX.Element;
+    /**
+     * Control whether the tab is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Custom content appended to the tab.
+     */
+    children?: React.ReactNode;
+    /**
+     * `value` of the tab.
+     *
+     * Will be set by parent `Tabs` component.
+     */
+    value?: string;
+};
 /**
- * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
+ * Legacy Tab component.
+ * For full functionality use composition API.
+ *
+ * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example
  * const tabs = [
- *   <Tab label='Label 1' />,
- *   <Tab label='Label 2' />,
- *   <Tab label='Label 3' />,
+ *   <Tab label='Label 1' sublabel='Description 1' />,
+ *   <Tab label='Label 2' startIcon={<SvgPlaceholder />} />,
  * ];
- * <Tabs labels={tabs} />
- *
+ */
+declare const LegacyTab: PolymorphicForwardRefComponent<"button", TabLegacyProps>;
+export { LegacyTab as Tab };
+/**
+ * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
+ * `Tabs.Tab` and `Tabs.Panel` can be associated with each other by passing them the same `value`.
  * @example
- * <Tabs orientation='vertical' labels={tabs} />
+ * <Tabs.Wrapper>
+ *   <Tabs.TabList>
+ *     <Tabs.Tab value='tab1' label='Label 1' />
+ *     <Tabs.Tab value='tab2' label='Label 2' />
+ *     <Tabs.Tab value='tab3' label='Label 3' />
+ *   </Tabs.TabList>
+ *   <Tabs.ActionsWrapper>
+ *     <Tabs.Actions>
+ *       <Button>Sample Button</Button>
+ *     </Tabs.Actions>
+ *   </Tabs.ActionsWrapper>
+ *   <Tabs.Panel value='tab1'>Content 1</Tabs.Panel>
+ *   <Tabs.Panel value='tab2'>Content 2</Tabs.Panel>
+ *   <Tabs.Panel value='tab3'>Content 3</Tabs.Panel>
+ * </Tabs.Wrapper>
  *
  * @example
- * const tabsWithSublabels = [
- *   <Tab label='Label 1' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- * ];
- * <Tabs labels={tabsWithSublabels} activeIndex={1} />
+ * <Tabs orientation='vertical'/>
  *
  * @example
- * const tabsWithIcons = [
- *   <Tab label='Label 1' icon={<SvgPlaceholder />} />,
- *   <Tab label='Label 2' icon={<SvgPlaceholder />} />,
- * ];
- * <Tabs labels={tabsWithIcons} type='pill' />
+ * <Tabs.Wrapper focusActivationMode='manual'>
+ *  <Tabs.Tab value='sample'>
+ *   <Tabs.TabIcon>
+ *     <SvgPlaceholder />
+ *   </Tabs.TabIcon>
+ *   <Tabs.TabLabel>Sample Label</Tabs.TabLabel>
+ *   <Tabs.TabDescription>Sample Description</Tabs.TabDescription>
+ *  </Tabs.Tab>
+ * </Tabs.Wrapper>
  */
-export declare const Tabs: (props: TabsProps) => React.JSX.Element;
+export declare const Tabs: PolymorphicForwardRefComponent<"div", TabsLegacyProps> & {
+    /**
+     * A wrapper component for Tabs
+     */
+    Wrapper: PolymorphicForwardRefComponent<"div", TabsWrapperOwnProps>;
+    /**
+     * Tablist subcomponent which contains all of the tab subcomponents.
+     * @example
+     * <Tabs.TabList>
+     *   <Tabs.Tab value='tab1' label='Label 1' />
+     *   <Tabs.Tab value='tab2' label='Label 2' />
+     *   <Tabs.Tab value='tab3' label='Label 3' />
+     * </Tabs.TabList>
+     *
+     * @example
+     * <Tabs.TabList>
+     *   <Tabs.Tab value='tab1' label='Green Tab' />
+     * </Tabs.TabList>
+     *
+     * @example
+     * <Tabs.TabList focusActivationMode='manual'>
+     *   <Tabs.Tab value='tab1' label='Manual Focus Tab' />
+     * </Tabs.TabList>
+     */
+    TabList: PolymorphicForwardRefComponent<"div", TabListOwnProps>;
+    /**
+     * Tab subcomponent which is used for each of the tabs.
+     * @example
+     * <Tabs.Tab value='tab1' label='Label 1' />
+     *
+     * @example
+     * <Tabs.Tab value='sample'>
+     *   <Tabs.TabIcon>
+     *     <SvgPlaceholder />
+     *   </Tabs.TabIcon>
+     *   <Tabs.TabLabel>Sample Label</Tabs.TabLabel>
+     *   <Tabs.TabDescription>Sample Description</Tabs.TabDescription>
+     * </Tabs.Tab>
+     *
+     */
+    Tab: PolymorphicForwardRefComponent<"button", TabOwnProps>;
+    /**
+     * Tab icon subcomponent which places an icon on the left side of the tab.
+     */
+    TabIcon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
+        size?: "small" | "auto" | "medium" | "large" | import("../utils/types.js").AnyString | undefined;
+        fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
+        padded?: boolean | undefined;
+    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        as?: "span" | undefined;
+    }>;
+    /**
+     * Tab label subcomponent which holds the tab's label.
+     */
+    TabLabel: PolymorphicForwardRefComponent<"span", {}>;
+    /**
+     * Tab description subcomponent which places a description under the tab label.
+     */
+    TabDescription: PolymorphicForwardRefComponent<"span", {}>;
+    /**
+     * Tab actions subcomponent which contains action buttons that are placed at the end of the tabs.
+     */
+    Actions: PolymorphicForwardRefComponent<"div", TabsActionsOwnProps>;
+    /**
+     * Tab panel subcomponent which contains the tab's content.
+     * @example
+     * <Tabs.Panel value='tab1'>
+     *   Sample Panel
+     * </Tabs.Panel>
+     */
+    Panel: PolymorphicForwardRefComponent<"div", TabsPanelOwnProps>;
+};
 export default Tabs;