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

package/esm/core/ProgressIndicators/ProgressLinear/ProgressLinear.js

@@ -1,37 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import cx from 'classnames';
-import { Box } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
-/**
- * Shows progress on a linear bar
- * @example
- * Determinate
- * <ProgressLinear value={25}/>
- * Indeterminate
- * <ProgressLinear indeterminate={true}/>
- * Labeled - Center
- * <ProgressLinear value={50} labels={['Centered Label']} />
- * Labeled - Left & Right
- * <ProgressLinear value={50} labels={['Loading...', '50%']} />
- * Positive / Negative.
- * <ProgressLinear status='positive' labels={['Upload done!', <SvgStatusSuccessHollow />]} />
- * <ProgressLinear status='negative' />
- */
-export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
-    const { value = 0, indeterminate = false, labels = [], isAnimated = false, status, className, ...rest } = props;
-    const boundedValue = Math.min(100, Math.max(0, value));
-    return (React.createElement(Box, { className: cx('iui-progress-indicator-linear', {
-            [`iui-${status}`]: !!status,
-        }, className), ref: forwardedRef, ...rest },
-        React.createElement(Box, { className: 'iui-track' },
-            React.createElement(Box, { className: cx('iui-fill', {
-                    'iui-determinate': !indeterminate && isAnimated,
-                    'iui-indeterminate': indeterminate,
-                }), style: { width: indeterminate ? '100%' : `${boundedValue}%` } })),
-        labels.length > 0 && (React.createElement(Box, { className: 'iui-label' }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
-});
-export default ProgressLinear;

package/esm/core/ProgressIndicators/ProgressLinear/index.d.ts

@@ -1,3 +0,0 @@
-export { ProgressLinear } from './ProgressLinear.js';
-declare const _default: "./ProgressLinear";
-export default _default;

package/esm/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -1,49 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
-import * as React from 'react';
-import { SvgCheckmarkSmall, SvgImportantSmall, Box, } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
-/**
- * Circular Progress Indicator
- * @example
- * Basic
- * <ProgressRadial value={50} />
- * Indeterminate
- * <ProgressRadial indeterminate />
- * Positive / Negative
- * <ProgressRadial status='positive' />
- * <ProgressRadial status='negative' />
- * Centered Content
- * <ProgressRadial value={63}>63</ProgressRadial>
- * Small
- * <ProgressRadial size={'small'} indeterminate/>
- */
-export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
-    const { value = 0, indeterminate = false, status, children, size = '', className, ...rest } = props;
-    const statusMap = {
-        negative: React.createElement(SvgImportantSmall, { "aria-hidden": true }),
-        positive: React.createElement(SvgCheckmarkSmall, { "aria-hidden": true }),
-    };
-    const fillStyle = {
-        strokeDashoffset: status === 'positive'
-            ? 0
-            : 88 -
-                Math.min(88, Math.max(0, indeterminate ? 88 : (88 * value) / 100)),
-    };
-    return (React.createElement(Box, { className: cx('iui-progress-indicator-radial', {
-            'iui-determinate': !indeterminate,
-            'iui-indeterminate': indeterminate,
-            [`iui-${size}`]: !!size,
-            [`iui-${status}`]: !!status,
-        }, className), ref: forwardedRef, ...rest },
-        React.createElement(Box, { as: 'svg', className: 'iui-radial', viewBox: '0 0 32 32', "aria-hidden": 'true' },
-            React.createElement(Box, { as: 'circle', className: 'iui-track', cx: '16', cy: '16', r: '14' }),
-            React.createElement(Box, { as: 'circle', className: 'iui-fill', cx: '16', cy: '16', r: '14', style: fillStyle })),
-        React.createElement(React.Fragment, null,
-            status && (React.createElement(Box, { as: 'span', className: 'iui-inner-content' }, statusMap[status])),
-            !status && children && (React.createElement(Box, { as: 'span', className: 'iui-inner-content' }, children)))));
-});
-export default ProgressRadial;

package/esm/core/ProgressIndicators/ProgressRadial/index.d.ts

@@ -1,3 +0,0 @@
-export { ProgressRadial } from './ProgressRadial.js';
-declare const _default: "./ProgressRadial";
-export default _default;

package/esm/core/Stepper/Wizard.d.ts

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import type { StepperProps, StepperLocalization } from './Stepper.js';
-/**
- * @deprecated Since v2:
- *
- * - For `default` | `long`, use `StepperType` with `Stepper` instead
- * - For `workflow`, use `WorkflowDiagram` instead
- */
-export declare type WizardType = 'default' | 'long' | 'workflow';
-/**
- * @deprecated Since v2, use `StepperLocalization` with `Stepper`
- */
-export declare type WizardLocalization = StepperLocalization;
-/**
- * @deprecated Since v2, use `StepperProps` with `Stepper` or `WorkflowDiagramProps` with `WorkflowDiagram`
- */
-export declare type WizardProps = {
-    /**
-     *  The type of Wizard to display.
-     *  @default 'default'
-     */
-    type?: WizardType;
-} & Omit<StepperProps, 'type'>;
-/**
- * @deprecated Since v2, use `Stepper` (type = `default` | `long`) or WorkflowDiagram (type = `workflow`)
- *
- * A wizard displays progress through a sequence of logical and numbered steps.
- * It may also be used for navigation.
- *
- * The `type` can be set to 'long' to show labels under steps.
- *
- * @example
- * <Wizard
- *  steps=[{name: "Step One"}, {name: "Step Two"}, {name: "Step Three"}]
- *  currentStep={0}
- *  type='long'
- *  />
- */
-export declare const Wizard: React.ForwardRefExoticComponent<{
-    /**
-     *  The type of Wizard to display.
-     *  @default 'default'
-     */
-    type?: WizardType | undefined;
-} & Omit<StepperProps, "type"> & React.RefAttributes<HTMLDivElement>>;
-export default Wizard;

package/esm/core/Stepper/Wizard.js

@@ -1,29 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import { Stepper } from './Stepper.js';
-import { WorkflowDiagram } from './WorkflowDiagram.js';
-/**
- * @deprecated Since v2, use `Stepper` (type = `default` | `long`) or WorkflowDiagram (type = `workflow`)
- *
- * A wizard displays progress through a sequence of logical and numbered steps.
- * It may also be used for navigation.
- *
- * The `type` can be set to 'long' to show labels under steps.
- *
- * @example
- * <Wizard
- *  steps=[{name: "Step One"}, {name: "Step Two"}, {name: "Step Three"}]
- *  currentStep={0}
- *  type='long'
- *  />
- */
-export const Wizard = React.forwardRef(
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(props, ref) => {
-    const { currentStep, steps, type = 'default', localization, onStepClick, ...rest } = props;
-    return type !== 'workflow' ? (React.createElement(Stepper, { type: type, currentStep: currentStep, steps: steps, localization: localization, onStepClick: onStepClick, ref: ref, ...rest })) : (React.createElement(WorkflowDiagram, { steps: steps, ref: ref, ...rest }));
-});
-export default Wizard;

package/esm/core/Toast/ToastWrapper.d.ts

@@ -1,11 +0,0 @@
-import '@itwin/itwinui-css/css/toast.css';
-import * as React from 'react';
-import type { ToastProps } from './Toast.js';
-import type { ToasterSettings } from './Toaster.js';
-declare type ToastPlacement = NonNullable<ToasterSettings['placement']>;
-export declare type ToastWrapperHandle = {
-    setToasts: (toasts: ToastProps[]) => void;
-    setPlacement: (placement: ToastPlacement) => void;
-};
-export declare const ToastWrapper: React.ForwardRefExoticComponent<React.RefAttributes<ToastWrapperHandle>>;
-export {};

package/esm/core/Toast/ToastWrapper.js

@@ -1,21 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import '@itwin/itwinui-css/css/toast.css';
-import * as React from 'react';
-import cx from 'classnames';
-import Toast from './Toast.js';
-import { Box } from '../utils/index.js';
-export const ToastWrapper = React.forwardRef((_, ref) => {
-    const [toasts, setToasts] = React.useState([]);
-    const [placement, setPlacement] = React.useState('top');
-    const placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
-    React.useImperativeHandle(ref, () => ({
-        setToasts,
-        setPlacement,
-    }), []);
-    return (React.createElement(Box, { className: cx(`iui-toast-wrapper`, `iui-placement-${placement}`) }, toasts.map((toastProps) => {
-        return (React.createElement(Toast, { key: toastProps.id, placementPosition: placementPosition, ...toastProps }));
-    })));
-});

package/esm/core/utils/functions/styles.d.ts

@@ -1,6 +0,0 @@
-/**
- * Returns translate values as an array of a given element.
- * @param element HTML element you want to get translate value of
- * @returns Translate values in pixels in an array `[translateX, translateY]`
- */
-export declare const getTranslateValues: (element: HTMLElement | null | undefined) => number[];

package/esm/core/utils/functions/styles.js

@@ -1,17 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-/**
- * Returns translate values as an array of a given element.
- * @param element HTML element you want to get translate value of
- * @returns Translate values in pixels in an array `[translateX, translateY]`
- */
-export const getTranslateValues = (element) => {
-    if (!element) {
-        return [];
-    }
-    const transformValue = getComputedStyle(element).getPropertyValue('transform');
-    const matrix = new DOMMatrix(transformValue);
-    return [matrix.m41, matrix.m42];
-};

package/esm/core/utils/hooks/useIsThemeAlreadySet.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-/**
- * Hook that returns a boolean ref which is true if either:
- * - There is a parent `ThemeProvider` in the tree, or
- * - The <body> element has data-iui-theme attribute
- */
-export declare const useIsThemeAlreadySet: (ownerDocument?: Document | undefined) => React.MutableRefObject<boolean>;

package/esm/core/utils/hooks/useIsThemeAlreadySet.js

@@ -1,27 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
-import { getDocument } from '../functions/index.js';
-/**
- * Hook that returns a boolean ref which is true if either:
- * - There is a parent `ThemeProvider` in the tree, or
- * - The <body> element has data-iui-theme attribute
- */
-export const useIsThemeAlreadySet = (ownerDocument = getDocument()) => {
-    const parentContext = React.useContext(ThemeContext);
-    const isThemeAlreadySet = React.useRef(!!parentContext || !!(ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.dataset.iuiTheme));
-    useIsomorphicLayoutEffect(() => {
-        if (parentContext ||
-            (ownerDocument && !!ownerDocument.body.dataset.iuiTheme)) {
-            isThemeAlreadySet.current = true;
-        }
-        return () => {
-            isThemeAlreadySet.current = false;
-        };
-    }, [parentContext, ownerDocument]);
-    return isThemeAlreadySet;
-};

package/esm/types/react-table-config.d.ts

@@ -1,135 +0,0 @@
-/// <reference types="react" />
-import type { TableFilterProps } from '../core/Table/filters/index.js';
-declare module 'react-table' {
-    type FieldType = 'text' | 'number' | 'date' | string;
-    type CellRendererProps<D extends object = {}> = {
-        /**
-         * Cell HTML props passed from the Table.
-         */
-        cellElementProps: TableCellProps;
-        /**
-         * Table specific cell props like `column`, `row`.
-         */
-        cellProps: CellProps<D>;
-        /**
-         * Cell's content.
-         */
-        children: React.ReactNode;
-        /**
-         * Function that returns whether the cell is disabled.
-         */
-        isDisabled?: (rowData: D) => boolean;
-    };
-    interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data' | 'columns'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, UseGlobalFiltersOptions<D>, UseGlobalFiltersColumnOptions<D>, Omit<UseResizeColumnsOptions<D>, 'disableResizing'>, UseSortByOptions<D> {
-        /**
-         * List of columns.
-         *
-         * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility.
-         * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes).
-         */
-        columns: Array<Column<D>>;
-        /**
-         * Table data list.
-         * Must be memoized.
-         *
-         * Supports expandable sub-rows using the `subRows` field in data entries.
-         * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing.
-         */
-        data: D[];
-        /**
-         * Column's resize mode.
-         *  - `fit` - when resizing it affects current and the next column,
-         *   e.g. when increasing width of current column, next column's width will decrease.
-         *  - `expand` - when resizing it affects only the current column,
-         *   e.g. when increasing width of the current column, next column's width remains the same.
-         * @default 'fit'
-         */
-        columnResizeMode?: 'fit' | 'expand';
-    }
-    interface Hooks<D extends object = {}> extends UseExpandedHooks<D>, UseGroupByHooks<D>, UseRowSelectHooks<D>, UseSortByHooks<D> {
-    }
-    interface TableInstance<D extends object = {}> extends UseColumnOrderInstanceProps<D>, UseExpandedInstanceProps<D>, UseFiltersInstanceProps<D>, UseGlobalFiltersInstanceProps<D>, UseGroupByInstanceProps<D>, UsePaginationInstanceProps<D>, UseRowSelectInstanceProps<D>, UseRowStateInstanceProps<D>, UseSortByInstanceProps<D> {
-        initialRows: Row<D>[];
-        columnResizeMode: TableOptions['columnResizeMode'];
-        tableWidth: number;
-    }
-    interface TableState<D extends object = {}> extends UseColumnOrderState<D>, UseExpandedState<D>, UseFiltersState<D>, UseGlobalFiltersState<D>, UseGroupByState<D>, UsePaginationState<D>, UseRowSelectState<D>, UseRowStateState<D>, UseSortByState<D> {
-        columnResizing: {
-            startX?: number;
-            columnWidth?: number;
-            nextColumnWidth?: number;
-            headerIdWidths?: Array<[string, number]>;
-            nextHeaderIdWidths?: Array<[string, number]>;
-            columnWidths: Record<string, number>;
-            isResizingColumn?: string;
-        };
-        isTableResizing?: boolean;
-        columnReorderStartIndex: number;
-        sticky: {
-            isScrolledToRight?: boolean;
-            isScrolledToLeft?: boolean;
-        };
-        lastSelectedRowId?: string;
-    }
-    interface ColumnInterface<D extends object = {}> extends UseSortByColumnOptions<D>, UseFiltersColumnOptions<D>, UseResizeColumnsColumnOptions<D>, UseGlobalFiltersColumnOptions<D> {
-        /**
-         * Custom class name applied to header column cell.
-         */
-        columnClassName?: string;
-        /**
-         * Custom class name applied to each column's cell.
-         */
-        cellClassName?: string;
-        /**
-         * Type of the data in cell. Used for manual filtering.
-         */
-        fieldType?: FieldType;
-        /**
-         * Filter component used as a column filter. Should use filters from `tableFilters`.
-         */
-        Filter?: Renderer<FilterProps<D>> | Renderer<TableFilterProps<D>>;
-        /**
-         * String value or custom function to use for filtering.
-         * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`.
-         * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js
-         */
-        filter?: FilterType<D> | DefaultFilterTypes | string;
-        /**
-         * Function that should return whole cell element not only the content.
-         * Must be memoized.
-         * @example
-         * {
-         *   Header: 'Name',
-         *   accessor: 'name',
-         *   cellRenderer: (props) => <EditableCell {...props} onCellEdit={onCellEditHandler} />,
-         * }
-         */
-        cellRenderer?: (props: CellRendererProps<D>) => React.ReactNode;
-        /**
-         * If true, column can't be reordered.
-         * @default false
-         */
-        disableReordering?: boolean;
-        /**
-         * If true, column's visibility cannot be toggled.
-         * @default false
-         */
-        disableToggleVisibility?: boolean;
-        /**
-         * Side on which column should be sticked to.
-         */
-        sticky?: 'left' | 'right';
-    }
-    interface ColumnInstance<D extends object = {}> extends UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
-        originalWidth: number;
-        resizeWidth?: number;
-        isResizerVisible?: boolean;
-        getDragAndDropProps: () => TableKeyedProps;
-        originalSticky?: 'left' | 'right' | 'none';
-    }
-    interface Cell<D extends object = {}> extends UseGroupByCellProps<D>, UseRowStateCellProps<D> {
-    }
-    interface Row<D extends object = {}> extends UseExpandedRowProps<D>, UseGroupByRowProps<D>, UseRowSelectRowProps<D>, UseRowStateRowProps<D> {
-        initialSubRows: Row<D>[];
-    }
-}

package/esm/types/react-table-config.js

@@ -1 +0,0 @@
-export {};