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

package/esm/core/RadioTiles/RadioTile.js

@@ -1,67 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { useMergedRefs, Box } from '../../utils/index.js';
-export const RadioTile = React.forwardRef((props, ref) => {
-  let {
-    icon,
-    label,
-    description,
-    className,
-    wrapperProps,
-    iconProps,
-    labelProps,
-    subLabelProps,
-    style,
-    ...rest
-  } = props;
-  let inputElementRef = React.useRef(null);
-  let refs = useMergedRefs(inputElementRef, ref);
-  return React.createElement(
-    Box,
-    {
-      as: 'label',
-      'data-iui-disabled': props.disabled ? 'true' : void 0,
-      ...wrapperProps,
-      className: cx('iui-radio-tile', wrapperProps?.className),
-    },
-    React.createElement(Box, {
-      as: 'input',
-      ref: refs,
-      className: cx('iui-radio-tile-input', className),
-      style: style,
-      type: 'radio',
-      ...rest,
-    }),
-    icon &&
-      React.createElement(
-        Box,
-        {
-          as: 'span',
-          'aria-hidden': true,
-          ...iconProps,
-          className: cx('iui-radio-tile-icon', iconProps?.className),
-        },
-        icon,
-      ),
-    label &&
-      React.createElement(
-        Box,
-        {
-          as: 'div',
-          ...labelProps,
-          className: cx('iui-radio-tile-label', labelProps?.className),
-        },
-        label,
-      ),
-    description &&
-      React.createElement(
-        Box,
-        {
-          as: 'div',
-          ...subLabelProps,
-          className: cx('iui-radio-tile-sublabel', subLabelProps?.className),
-        },
-        description,
-      ),
-  );
-});

package/esm/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { InputGroup } from '../InputGroup/InputGroup.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type RadioTileGroupProps = Omit<React.ComponentProps<typeof InputGroup>, 'displayStyle' | 'disabled'>;
-/**
- * RadioTileGroup component to group RadioTile components together
- * @example
- * <RadioTileGroup label='My group'>
- *   <RadioTile label='First tile' icon={<SvgSmileyHappy />} />
- *   <RadioTile label='Second tile' icon={<SvgSmileySad />} />
- * </RadioTileGroup>
- */
-export declare const RadioTileGroup: PolymorphicForwardRefComponent<"div", RadioTileGroupProps>;
-export {};

package/esm/core/RadioTiles/RadioTileGroup.js

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { InputGroup } from '../InputGroup/InputGroup.js';
-import { Box } from '../../utils/index.js';
-export const RadioTileGroup = React.forwardRef((props, forwardedRef) => {
-  let { children, label, ...rest } = props;
-  return React.createElement(
-    InputGroup,
-    {
-      label: label,
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      {
-        className: 'iui-radio-tile-container',
-      },
-      children,
-    ),
-  );
-});

package/esm/core/SearchBox/SearchBox.d.ts

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent, InputFlexContainerProps } from '../../utils/index.js';
-import type { IconButtonProps } from '../Buttons/IconButton.js';
-import type { IconProps } from '../Icon/Icon.js';
-type SearchBoxOwnProps = {
-    /**
-     * Whether the searchbox is expandable.
-     * @default false
-     */
-    expandable?: boolean;
-    /**
-     * SearchBox state toggle.
-     */
-    isExpanded?: boolean;
-    /**
-     * Function that is called on expanding searchbox.
-     */
-    onExpand?: () => void;
-    /**
-     * Function that is called on collapsing searchbox.
-     */
-    onCollapse?: () => void;
-    /**
-     * Input props when using default searchbox.
-     */
-    inputProps?: React.ComponentPropsWithoutRef<'input'>;
-    /**
-     * Modify size of the searchbox and it's subcomponents.
-     */
-    size?: 'small' | 'large';
-};
-/**
- * SearchBox component.
- * Can be used to implement search functionality for pages, tables and more.
- * @example
- *  <SearchBox inputProps={{ placeholder: 'Basic search' }}/>
- *
- * @example
- * <SearchBox expandable inputProps={{ placeholder: 'Expandable search' }}/>
- *
- * @example
- * <SearchBox>
- *   <SearchBox.CollapsedState />
- *   <SearchBox.ExpandedState>
- *     <SearchBox.Icon />
- *     <SearchBox.Input />
- *     <SearchBox.CollapseButton />
- *   </SearchBox.ExpandedState>
- * </SearchBox>
- */
-export declare const SearchBox: PolymorphicForwardRefComponent<"div", SearchBoxOwnProps & InputFlexContainerProps> & {
-    /**
-     * Icon to be placed within SearchBox.
-     * @default Looking glass icon
-     */
-    Icon: PolymorphicForwardRefComponent<"span", IconProps>;
-    /**
-     * Input to be placed within SearchBox
-     */
-    Input: PolymorphicForwardRefComponent<"input", {}>;
-    /**
-     * Button to be placed within SearchBox. Default has looking glass icon.
-     */
-    Button: PolymorphicForwardRefComponent<"button", IconButtonProps>;
-    /**
-     * Collapse button for expandable SearchBox. Clicking on this button will collapse SearchBox.
-     */
-    CollapseButton: PolymorphicForwardRefComponent<"button", IconButtonProps>;
-    /**
-     * Expand button for expandable SearchBox. Clicking on this will expand SearchBox.
-     */
-    ExpandButton: PolymorphicForwardRefComponent<"button", IconButtonProps>;
-    /**
-     * Subcomponent to customise expanded state of the SearchBox
-     */
-    ExpandedState: {
-        ({ children, }: {
-            children: React.ReactNode;
-        }): React.JSX.Element | null;
-        displayName: string;
-    };
-    /**
-     * Subcomponent to customise collapsed state.
-     */
-    CollapsedState: {
-        ({ children, }: {
-            children?: React.ReactNode;
-        }): React.JSX.Element | null;
-        displayName: string;
-    };
-};
-export {};

package/esm/core/SearchBox/SearchBox.js

@@ -1,216 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import {
-  InputFlexContainer,
-  SvgSearch,
-  SvgCloseSmall,
-  useSafeContext,
-  useId,
-  useMergedRefs,
-  mergeEventHandlers,
-  Box,
-  InputFlexContainerIcon,
-  InputFlexContainerButton,
-} from '../../utils/index.js';
-let SearchBoxContext = React.createContext(void 0);
-let SearchBoxComponent = React.forwardRef((props, ref) => {
-  let {
-    size,
-    expandable = false,
-    isDisabled = false,
-    onCollapse: onCollapseProp,
-    onExpand: onExpandProp,
-    isExpanded: isExpandedProp,
-    children,
-    inputProps,
-    className,
-    ...rest
-  } = props;
-  let uid = useId();
-  let [inputId, setInputId] = React.useState(uid);
-  let inputRef = React.useRef(null);
-  let openButtonRef = React.useRef(null);
-  let [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
-  let isExpanded = isExpandedProp ?? localExpanded;
-  let onCollapse = () => {
-    setLocalExpanded(false);
-    onCollapseProp?.();
-    queueMicrotask(() =>
-      openButtonRef.current?.focus({
-        preventScroll: true,
-      }),
-    );
-  };
-  let onExpand = () => {
-    setLocalExpanded(true);
-    onExpandProp?.();
-    queueMicrotask(() =>
-      inputRef.current?.focus({
-        preventScroll: true,
-      }),
-    );
-  };
-  return React.createElement(
-    SearchBoxContext.Provider,
-    {
-      value: {
-        size,
-        isDisabled,
-        onCollapse,
-        onExpand,
-        inputRef,
-        inputId,
-        setInputId,
-        openButtonRef,
-        isExpanded,
-        expandable,
-      },
-    },
-    React.createElement(
-      InputFlexContainer,
-      {
-        ref: ref,
-        className: cx(
-          'iui-searchbox',
-          {
-            'iui-expandable-searchbox': expandable,
-          },
-          className,
-        ),
-        size: size,
-        isDisabled: isDisabled,
-        'data-iui-expanded': isExpanded,
-        ...rest,
-      },
-      children ??
-        React.createElement(
-          React.Fragment,
-          null,
-          React.createElement(
-            SearchBoxCollapsedState,
-            null,
-            React.createElement(SearchBoxExpandButton, null),
-          ),
-          React.createElement(
-            SearchBoxExpandedState,
-            null,
-            React.createElement(SearchBoxIcon, null),
-            React.createElement(SearchBoxInput, inputProps),
-            expandable
-              ? React.createElement(SearchBoxCollapseButton, null)
-              : null,
-          ),
-        ),
-    ),
-  );
-});
-let SearchBoxCollapsedState = ({ children }) => {
-  let { isExpanded, expandable } = useSafeContext(SearchBoxContext);
-  if (!expandable || isExpanded) return null;
-  return React.createElement(
-    React.Fragment,
-    null,
-    children ?? React.createElement(SearchBoxExpandButton, null),
-  );
-};
-let SearchBoxExpandedState = ({ children }) => {
-  let { isExpanded, expandable } = useSafeContext(SearchBoxContext);
-  if (expandable && !isExpanded) return null;
-  return React.createElement(React.Fragment, null, children);
-};
-let SearchBoxIcon = React.forwardRef((props, ref) => {
-  let { className, children, ...rest } = props;
-  return React.createElement(
-    InputFlexContainerIcon,
-    {
-      'aria-hidden': true,
-      className: cx('iui-search-icon', className),
-      ref: ref,
-      ...rest,
-    },
-    children ?? React.createElement(SvgSearch, null),
-  );
-});
-let SearchBoxInput = React.forwardRef((props, ref) => {
-  let { className, id: idProp, ...rest } = props;
-  let { inputId, setInputId, isDisabled, inputRef } =
-    useSafeContext(SearchBoxContext);
-  React.useEffect(() => {
-    if (idProp && idProp !== inputId) setInputId(idProp);
-  }, [idProp, inputId, setInputId]);
-  return React.createElement(Box, {
-    as: 'input',
-    id: idProp ?? inputId,
-    ref: useMergedRefs(ref, inputRef),
-    role: 'searchbox',
-    type: 'text',
-    className: cx('iui-search-input', className),
-    disabled: isDisabled,
-    ...rest,
-  });
-});
-let SearchBoxButton = React.forwardRef((props, ref) => {
-  let { children, ...rest } = props;
-  let { size: sizeContext, isDisabled } = useSafeContext(SearchBoxContext);
-  return React.createElement(
-    InputFlexContainerButton,
-    {
-      size: sizeContext,
-      ref: ref,
-      disabled: isDisabled,
-      ...rest,
-    },
-    children ?? React.createElement(SvgSearch, null),
-  );
-});
-let SearchBoxCollapseButton = React.forwardRef((props, ref) => {
-  let { children, onClick: onClickProp, ...rest } = props;
-  let {
-    onCollapse,
-    size: sizeContext,
-    isDisabled,
-  } = useSafeContext(SearchBoxContext);
-  return React.createElement(
-    SearchBoxButton,
-    {
-      ref: ref,
-      'aria-label': 'Close searchbox',
-      size: sizeContext,
-      disabled: isDisabled,
-      onClick: mergeEventHandlers(onClickProp, onCollapse),
-      ...rest,
-    },
-    children ?? React.createElement(SvgCloseSmall, null),
-  );
-});
-let SearchBoxExpandButton = React.forwardRef((props, ref) => {
-  let { children, onClick: onClickProp, ...rest } = props;
-  let {
-    onExpand,
-    size: sizeContext,
-    isDisabled,
-    openButtonRef,
-  } = useSafeContext(SearchBoxContext);
-  return React.createElement(
-    SearchBoxButton,
-    {
-      ref: useMergedRefs(ref, openButtonRef),
-      'aria-label': 'Expand searchbox',
-      size: sizeContext,
-      disabled: isDisabled,
-      onClick: mergeEventHandlers(onClickProp, onExpand),
-      styleType: 'default',
-      ...rest,
-    },
-    children ?? React.createElement(SvgSearch, null),
-  );
-});
-export const SearchBox = Object.assign(SearchBoxComponent, {
-  Icon: SearchBoxIcon,
-  Input: SearchBoxInput,
-  Button: SearchBoxButton,
-  CollapseButton: SearchBoxCollapseButton,
-  ExpandButton: SearchBoxExpandButton,
-  ExpandedState: SearchBoxExpandedState,
-  CollapsedState: SearchBoxCollapsedState,
-});

package/esm/core/Select/Select.d.ts

@@ -1,280 +0,0 @@
-import * as React from 'react';
-import type { CommonProps, PortalProps } from '../../utils/index.js';
-import { usePopover } from '../Popover/Popover.js';
-/**
- * Select component to select value from options.
- * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.
- * @example
- * <caption>Basic select.</caption>
- * <Select
- *  options={[
- *    { value: '1', label: 'Option 1' },
- *    { value: '2', label: 'Option 2' },
- *    { value: '3', label: 'Option 3' },
- *  ]}
- * />
- * @example
- * <caption>Native select.</caption>
- * <Select
- *  native
- *  options={[
- *    { value: '1', label: 'Option 1' },
- *    { value: '2', label: 'Option 2' },
- *    { value: '3', label: 'Option 3' },
- *  ]}
- * />
- * @example
- * <caption>Disabled select with placeholder.</caption>
- * <Select
- *   disabled={true}
- *   placeholder='Placeholder text'
- *   options={[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }, { value: 3, label: 'Option 3' }]}
- * />
- * @example
- * <caption>Select with selected value and change handler.</caption>
- * <Select
- *   value={selectedValue}
- *   onChange={(value) => setSelectedValue(value)}
- *   options={[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }, { value: 3, label: 'Option 3' }]}
- * />
- * @example
- * <caption>Select using custom renderers for menu items and selected value.</caption>
- * <Select
- *   options={[
- *     { value: 'yellow', label: 'Yellow' },
- *     { value: 'green', label: 'Green' },
- *     { value: 'red', label: 'Red' },
- *   ]}
- *   value={selectedValue}
- *   placeholder='Placeholder text'
- *   itemRenderer={(option, itemProps) => (
- *     <MenuItem
- *       style={{ color: option.value }}
- *       isSelected={itemProps.isSelected}
- *       onClick={() => {
- *         setSelectedValue(option.value);
- *         itemProps.close();
- *       }}
- *       role='option'
- *       ref={(el) => itemProps.isSelected && el?.scrollIntoView()}
- *     >
- *       {option.label}
- *     </MenuItem>
- *   )}
- *   selectedItemRenderer={(option) => (
- *     <span style={{ backgroundColor: option.value }}>{option.label}</span>
- *   )}
- * />
- */
-export declare const Select: <T>(props: SelectProps<T> & {
-    ref?: React.ForwardedRef<HTMLElement>;
-}) => JSX.Element;
-export type SelectProps<T> = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'placeholder' | 'value' | 'defaultValue'> & (({
-    /**
-     * If true, the native `<select>` element will be rendered.
-     *
-     * Extra props, such as `name` can be passed to the `<select>` using `triggerProps`.
-     *
-     * @default false
-     */
-    native: true;
-} & NativeSelectProps) | ({
-    native?: false;
-} & CustomSelectProps<T> & {
-    /**
-     * styleType is only supported for `<Select native>`.
-     */
-    styleType?: never;
-}));
-type NativeSelectProps = SelectCommonProps & {
-    /**
-     * Selected option value.
-     *
-     * Must be a string, because it is passed as an attribute to the native <select>.
-     *
-     * Alternatively, pass `null` to reset the value.
-     */
-    value?: string | null;
-    /**
-     * Callback invoked when the selected value changes.
-     */
-    onChange?: (value: string, event: React.ChangeEvent<HTMLSelectElement>) => void;
-    /**
-     * Array of options that populates the select menu.
-     *
-     * The `value` property of each option must be a string.
-     */
-    options: Array<{
-        label: string;
-        value: string;
-        disabled?: boolean;
-    }>;
-    /**
-     * Default value that is selected on initial render. This is useful when you don't want to
-     * maintain your own state but still want to control the initial value.
-     *
-     * If not passed, the first option (or placeholder) will be automatically selected.
-     */
-    defaultValue?: string;
-    /**
-     * Props to pass to the select element.
-     */
-    triggerProps?: Omit<React.ComponentPropsWithRef<'select'>, 'size'>;
-    required?: boolean;
-    multiple?: never;
-} & NativeSelectStyleTypeProps;
-type NativeSelectStyleTypeProps = {
-    /**
-     * Style of the select.
-     * Use 'borderless' to hide outline.
-     * @default 'default'
-     */
-    styleType?: 'default';
-    /**
-     * Placeholder for when no item is selected.
-     *
-     * Will be rendered as a disabled option at the top of the list, and automatically
-     * selected when no `value` or `defaultValue` is provided.
-     *
-     * Not allowed when `styleType` is `borderless`.
-     */
-    placeholder?: string;
-} | {
-    styleType: 'borderless';
-    placeholder?: never;
-};
-type SelectCommonProps = {
-    /**
-     * Disables select.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Modify size of select.
-     */
-    size?: 'small' | 'large';
-    /**
-     * Status of select.
-     */
-    status?: 'positive' | 'warning' | 'negative';
-};
-export type CustomSelectProps<T> = SelectCommonProps & {
-    /**
-     * Placeholder when no item is selected.
-     */
-    placeholder?: React.ReactNode;
-    /**
-     * Array of options that populates the select menu.
-     */
-    options: SelectOption<T>[];
-    /**
-     * Custom renderer for an item in the dropdown list. `MenuItem` item props are going to be populated if not provided.
-     */
-    itemRenderer?: (option: SelectOption<T>, itemProps: ItemRendererProps) => JSX.Element;
-    /**
-     * Custom class for menu.
-     */
-    menuClassName?: string;
-    /**
-     * Custom style for menu.
-     */
-    menuStyle?: React.CSSProperties;
-    /**
-     * Props to customize Popover behavior.
-     */
-    popoverProps?: Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth' | 'closeOnOutsideClick'> & {
-        /**
-         * Middleware options.
-         *
-         * By default, `hide` is enabled. If the floating options get hidden even when they shouldn't (e.g. some custom
-         * styles interfering with the trigger's hide detection) consider disabling the `hide` middleware.
-         *
-         * @see https://floating-ui.com/docs/middleware
-         */
-        middleware?: {
-            hide?: boolean;
-        };
-    } & Pick<PortalProps, 'portal'>;
-    /**
-     * Props to pass to the select button (trigger) element.
-     */
-    triggerProps?: React.ComponentPropsWithRef<'div'>;
-} & SelectMultipleTypeProps<T> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
-export type SelectValueChangeEvent = 'added' | 'removed';
-export type SelectMultipleTypeProps<T> = {
-    /**
-     * Enable multiple selection.
-     * @default false
-     */
-    multiple?: false;
-    /**
-     * Custom renderer for the selected item in select.
-     * If `multiple` is enabled, it will give array of options to render.
-     */
-    selectedItemRenderer?: (option: SelectOption<T>) => JSX.Element;
-    /**
-     * Selected option value.
-     * If `multiple` is enabled, it is an array of values.
-     *
-     * Pass `null` to reset the value.
-     */
-    value?: T | null;
-    /**
-     * Callback function handling change event on select.
-     */
-    onChange?: (value: T) => void;
-} | {
-    multiple: true;
-    selectedItemRenderer?: (options: SelectOption<T>[]) => JSX.Element;
-    value?: T[];
-    onChange?: (value: T, event: SelectValueChangeEvent) => void;
-};
-export type ItemRendererProps = {
-    /**
-     * Close handler that closes the dropdown.
-     */
-    close: () => void;
-    /**
-     * Indicates whether an item is selected.
-     */
-    isSelected: boolean;
-};
-export type SelectOption<T> = {
-    /**
-     * Label of the item used in dropdown list and when selected.
-     */
-    label: string;
-    /**
-     * Sublabel of the item shown below the label.
-     */
-    sublabel?: React.ReactNode;
-    /**
-     * Modify height of the item.
-     * Use 'large' when any of the select options have `sublabel`.
-     *
-     * Defaults to 'large' if `sublabel` provided, otherwise 'default'.
-     */
-    size?: 'default' | 'large';
-    /**
-     * Value of the item.
-     */
-    value: T;
-    /**
-     * @deprecated Use startIcon
-     * SVG icon component shown on the left.
-     */
-    icon?: JSX.Element;
-    /**
-     * SVG icon component shown on the left.
-     */
-    startIcon?: JSX.Element;
-    /**
-     * Item is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Any other props.
-     */
-    [key: string]: unknown;
-} & CommonProps;
-export {};