@itwin/itwinui-react 3.15.5 → 5.0.0-alpha.0

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

@@ -1,84 +0,0 @@
-import * as React from 'react';
-import { defaultFilterFunctions } from '../filters/defaultFilterFunctions.js';
-export const useSubRowFiltering = (hasAnySubRows) => (hooks) => {
-  hooks.useInstance.push(useInstance.bind({}, hasAnySubRows));
-};
-let useInstance = (hasAnySubRows, instance) => {
-  let setInitialSubRows = (rows) => {
-    rows.forEach((row) => {
-      if (!row.initialSubRows) row.initialSubRows = row.subRows;
-      setInitialSubRows(row.subRows);
-    });
-  };
-  setInitialSubRows(instance.initialRows);
-  let {
-    filteredRows = instance.filteredRows,
-    filteredFlatRows = instance.filteredFlatRows,
-    filteredRowsById = instance.filteredRowsById,
-  } = React.useMemo(() => {
-    if (!hasAnySubRows) return {};
-    let setSubRows = (rows) => {
-      rows.forEach((row) => {
-        row.subRows = row.initialSubRows ?? [];
-        setSubRows(row.subRows);
-      });
-    };
-    setSubRows(instance.initialRows);
-    let currentlyFilteredRows = [...instance.initialRows];
-    instance.state.filters.forEach(({ id: columnId, value: filterValue }) => {
-      let column = instance.allColumns.find((c) => c.id === columnId);
-      if (!column) return;
-      let filterTypes = {
-        ...defaultFilterFunctions,
-        ...instance.filterTypes,
-      };
-      let filterFn =
-        'function' == typeof column.filter
-          ? column.filter
-          : filterTypes[column.filter ?? 'text'];
-      currentlyFilteredRows = currentlyFilteredRows.filter((row) =>
-        handleRowFiltering(row, filterFn, columnId, filterValue),
-      );
-    });
-    let filteredRows = [];
-    let filteredFlatRows = [];
-    let filteredRowsById = {};
-    let populateRows = (row) => {
-      if (0 === row.depth) filteredRows.push(row);
-      filteredFlatRows.push(row);
-      filteredRowsById[row.id] = row;
-      if (row.subRows.length) row.subRows.forEach((r) => populateRows(r));
-    };
-    currentlyFilteredRows.forEach((row) => populateRows(row));
-    return {
-      filteredRows,
-      filteredFlatRows,
-      filteredRowsById,
-    };
-  }, [
-    instance.allColumns,
-    instance.filterTypes,
-    instance.initialRows,
-    instance.state.filters,
-    hasAnySubRows,
-  ]);
-  Object.assign(instance, {
-    filteredRows,
-    filteredFlatRows,
-    filteredRowsById,
-    rows: filteredRows,
-    flatRows: filteredFlatRows,
-    rowsById: filteredRowsById,
-  });
-};
-let handleRowFiltering = (row, filterFn, columnId, filterValue) => {
-  let hasFilteredSubRows = false;
-  row.subRows = row.initialSubRows.filter((subRow) => {
-    let result = handleRowFiltering(subRow, filterFn, columnId, filterValue);
-    if (result) hasFilteredSubRows = true;
-    return result;
-  });
-  if (hasFilteredSubRows) return true;
-  let result = filterFn([row], [columnId], filterValue);
-  return !!result.length;
-};

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

@@ -1,2 +0,0 @@
-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/hooks/useSubRowSelection.js

@@ -1,32 +0,0 @@
-import * as React from 'react';
-export const useSubRowSelection = (hooks) => {
-  hooks.useInstance.push(useInstance);
-};
-let useInstance = (instance) => {
-  let selectedFlatRows = React.useMemo(() => {
-    let selectedFlatRows = [];
-    let setSelectionState = (row, selectedRowIds) => {
-      let isSomeSubRowsSelected = false;
-      row.initialSubRows.forEach((subRow) => {
-        setSelectionState(subRow, selectedRowIds);
-        if (subRow.isSelected || subRow.isSomeSelected)
-          isSomeSubRowsSelected = true;
-      });
-      if (selectedRowIds[row.id]) {
-        row.isSelected = true;
-        row.isSomeSelected = false;
-        selectedFlatRows.push(row);
-      } else {
-        row.isSelected = false;
-        row.isSomeSelected = isSomeSubRowsSelected;
-      }
-    };
-    instance.rows.forEach((row) =>
-      setSelectionState(row, instance.state.selectedRowIds),
-    );
-    return selectedFlatRows;
-  }, [instance.rows, instance.state.selectedRowIds]);
-  Object.assign(instance, {
-    selectedFlatRows,
-  });
-};

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

@@ -1,9 +0,0 @@
-export { Table } from './Table.js';
-export type { TablePaginatorRendererProps } from './Table.js';
-export { BaseFilter, FilterButtonBar, tableFilters } from './filters/index.js';
-export type { DateRangeFilterOptions, FilterButtonBarProps, FilterButtonBarTranslation, TableFilterProps, TableFilterValue, } from './filters/index.js';
-export { DefaultCell, EditableCell } from './cells/index.js';
-export type { DefaultCellProps, EditableCellProps } from './cells/index.js';
-export { TablePaginator } from './TablePaginator.js';
-export type { TablePaginatorProps } from './TablePaginator.js';
-export { ActionColumn, ExpanderColumn, SelectionColumn, } from './columns/index.js';

package/esm/core/Table/index.js

@@ -1,9 +0,0 @@
-export { Table } from './Table.js';
-export { BaseFilter, FilterButtonBar, tableFilters } from './filters/index.js';
-export { DefaultCell, EditableCell } from './cells/index.js';
-export { TablePaginator } from './TablePaginator.js';
-export {
-  ActionColumn,
-  ExpanderColumn,
-  SelectionColumn,
-} from './columns/index.js';

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

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import type { ColumnInstance, TableInstance } 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;
-export declare const getSubRowStyle: ({ density, depth }: {
-    density?: string | undefined;
-    depth?: number | undefined;
-}) => {
-    paddingInlineStart: number;
-};
-export declare const TableInstanceContext: React.Context<TableInstance<Record<string, unknown>> | undefined>;

package/esm/core/Table/utils.js

@@ -1,50 +0,0 @@
-import * as React from 'react';
-export const getCellStyle = (column, isTableResizing) => {
-  let style = {};
-  style.flex = '1 1 145px';
-  if (column.width) {
-    let width =
-      'string' == typeof column.width ? column.width : `${column.width}px`;
-    style.width = width;
-    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;
-};
-export const getStickyStyle = (column, columnList) => {
-  if (!column.sticky) return {};
-  let left = 0;
-  for (let col of columnList) {
-    if (col.id === column.id) break;
-    left += Number(col.width || col.resizeWidth || 0);
-  }
-  let right = 0;
-  for (let col of [...columnList].reverse()) {
-    if (col.id === column.id) break;
-    right += Number(col.width || col.resizeWidth || 0);
-  }
-  return {
-    '--iui-table-sticky-left': 'left' === column.sticky ? `${left}px` : void 0,
-    '--iui-table-sticky-right':
-      'right' === column.sticky ? `${right}px` : void 0,
-  };
-};
-export const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
-  let cellPadding = 16;
-  let expanderMargin = 8;
-  if ('condensed' === density) {
-    cellPadding = 12;
-    expanderMargin = 4;
-  } else if ('extra-condensed' === density) {
-    cellPadding = 8;
-    expanderMargin = 4;
-  }
-  let multiplier = 26 + expanderMargin;
-  return {
-    paddingInlineStart: cellPadding + depth * multiplier,
-  };
-};
-export const TableInstanceContext = React.createContext(void 0);

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

@@ -1,297 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type TabsOrientationProps = {
-    /**
-     * Orientation of the tabs.
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal';
-    /**
-     * Type of the tabs.
-     *
-     * If `orientation = 'vertical'`, `pill` is not applicable.
-     * @default 'default'
-     */
-    type?: 'default' | 'borderless' | 'pill';
-} | {
-    orientation: 'vertical';
-    type?: 'default' | 'borderless';
-};
-type TabsWrapperOwnProps = {
-    /**
-     * 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.
-     *
-     * Should be used for uncontrolled state (when no `value` passed).
-     *
-     * If not specified, then first tab will be active by default.
-     */
-    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[];
-    /**
-     * Elements shown for each tab.
-     * Recommended to pass an array of `Tab` components.
-     */
-    labels: React.ReactNode[];
-    /**
-     * Handler for activating a tab.
-     */
-    onTabSelected?: (index: number) => void;
-    /**
-     * Index of the active tab.
-     */
-    activeIndex?: number;
-    /**
-     * 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';
-    /**
-     * Color of the bar on the active tab.
-     * @default 'blue'
-     */
-    color?: 'blue' | 'green';
-    /**
-     * Custom CSS class name for tabs.
-     */
-    tabsClassName?: string;
-    /**
-     * Custom CSS class name for tab panel.
-     */
-    contentClassName?: string;
-    /**
-     * Custom CSS class name for the tabs wrapper.
-     */
-    wrapperClassName?: string;
-    /**
-     * Content inside the tab panel.
-     */
-    children?: React.ReactNode;
-    /**
-     * @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;
-};
-/**
- * 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' sublabel='Description 1' />,
- *   <Tab label='Label 2' startIcon={<SvgPlaceholder />} />,
- * ];
- */
-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.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.Actions>
- *     <Button>Sample Button</Button>
- *   </Tabs.Actions>
- *   <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
- * <Tabs orientation='vertical'/>
- *
- * @example
- * <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: 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?: "auto" | "small" | "medium" | "large" | import("../../utils/types.js").AnyString;
-        fill?: "default" | "positive" | "informational" | "negative" | "warning" | import("../../utils/types.js").AnyString;
-        padded?: boolean;
-    } & 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>;
-};