@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -1,124 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type ExpandableBlockOwnProps = {
-    /**
-     * Status of the block.
-     * When set, a colored status icon is shown at the end of the main text.
-     */
-    status?: 'positive' | 'negative' | 'warning' | 'informational';
-    /**
-     * Whether or not to show the block's content.
-     * @default false
-     */
-    isExpanded?: boolean;
-    /**
-     * Callback function for toggling an expansion state.
-     */
-    onToggle?: (isExpanding: boolean) => void;
-    /**
-     * Content in the expandable block.
-     */
-    children: React.ReactNode;
-    /**
-     * Modify size of the ExpandableBlock.
-     * @default 'default'
-     */
-    size?: 'default' | 'small';
-    /**
-     * Style of the ExpandableBlock.
-     * Use 'borderless' to hide outline.
-     * @default 'default'
-     */
-    styleType?: 'default' | 'borderless';
-    /**
-     * Disables ExpandableBlock.
-     * @default false
-     */
-    disabled?: boolean;
-};
-type ExpandableBlockTriggerOwnProps = {
-    label?: React.ReactNode;
-    caption?: React.ReactNode;
-    expandIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-};
-type ExpandableBlockContentOwnProps = {
-    innerProps?: React.ComponentPropsWithoutRef<'div'>;
-};
-/**
- * Expandable block with customizable Title, Caption, Content and EndIcon subcomponents.
- * @example
- *  <ExpandableBlock.Wrapper>
- *    <ExpandableBlock.Trigger>
- *      <ExpandableBlock.ExpandIcon/>
- *      <ExpandableBlock.LabelArea>
- *        <ExpandableBlock.Title/>
- *        <ExpandableBlock.Caption/>
- *      </ExpandableBlock.LabelArea>
- *      <ExpandableBlock.EndIcon/>
- *    </ExpandableBlock.Trigger>
- *    <ExpandableBlock.Content/>
- *  </ExpandableBlock.Wrapper>
- */
-export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps & {
-    title?: React.ReactNode;
-} & Pick<ExpandableBlockTriggerOwnProps, "caption" | "endIcon">> & {
-    Wrapper: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps>;
-    /**
-     * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
-     * @example
-     * <ExpandableBlock.Trigger>
-     *    <ExpandableBlock.ExpandIcon/>
-     *    <ExpandableBlock.LabelArea/>
-     *    <ExpandableBlock.EndIcon/>
-     * </ExpandableBlock.Trigger>
-     */
-    Trigger: PolymorphicForwardRefComponent<"div", ExpandableBlockTriggerOwnProps>;
-    /**
-     * The expanding icon on the left of header
-     */
-    ExpandIcon: PolymorphicForwardRefComponent<"span", {}>;
-    /**
-     * `LabelArea` subcomponent that contains `Title` and `Caption`
-     * @example
-     * <ExpandableBlock.LabelArea>
-     *    <ExpandableBLock.Title> Title </ExpandableBlock.Title>
-     *    <ExpandableBlock.Caption> Caption </ExpandableBlock.Caption>
-     * </ExpandableBlock.LabelArea>
-     */
-    LabelArea: PolymorphicForwardRefComponent<"span", {}>;
-    /**
-     * The main text displayed on the block header, regardless of state.
-     */
-    Title: PolymorphicForwardRefComponent<"button", {}>;
-    /**
-     * Small note displayed below title, regardless of state.
-     */
-    Caption: PolymorphicForwardRefComponent<"div", {}>;
-    /**
-     * Svg icon displayed at the end of the main text.
-     * Will override status icon if specified. Used inside `Header` subcomponent.
-     * @example
-     * <ExpandableBlock.Trigger>
-     *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
-     * <ExpandableBlock.Trigger/>
-     */
-    EndIcon: PolymorphicForwardRefComponent<"span", Omit<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;
-    }, "ref">>;
-    /**
-     * Content shown in the block's body when fully expanded.
-     * @example
-     * <ExpandableBlock.Wrapper>
-     *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
-     * </ExpandableBlock.Wrapper>
-     */
-    Content: PolymorphicForwardRefComponent<"div", ExpandableBlockContentOwnProps>;
-};
-export {};

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -1,196 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import {
-  StatusIconMap,
-  SvgChevronRight,
-  Box,
-  useSafeContext,
-  polymorphic,
-  mergeEventHandlers,
-  ButtonBase,
-  useId,
-} from '../../utils/index.js';
-import { Icon } from '../Icon/Icon.js';
-import { LinkBox } from '../LinkAction/LinkAction.js';
-let ExpandableBlockContext = React.createContext(void 0);
-let ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
-  let { children, title, caption, endIcon, ...rest } = props;
-  return React.createElement(
-    ExpandableBlock.Wrapper,
-    {
-      ...rest,
-      ref: forwardedRef,
-    },
-    React.createElement(ExpandableBlock.Trigger, {
-      label: title,
-      caption: caption,
-      endIcon: endIcon,
-    }),
-    React.createElement(ExpandableBlock.Content, null, children),
-  );
-});
-let ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
-  let {
-    children,
-    className,
-    onToggle,
-    style,
-    isExpanded,
-    status,
-    size = 'default',
-    styleType = 'default',
-    disabled = false,
-    ...rest
-  } = props;
-  let [expandedState, setExpanded] = React.useState(isExpanded ?? false);
-  let expanded = isExpanded ?? expandedState;
-  let [descriptionId, setDescriptionId] = React.useState(void 0);
-  return React.createElement(
-    ExpandableBlockContext.Provider,
-    {
-      value: {
-        status,
-        isExpanded: expanded,
-        onToggle,
-        size,
-        styleType,
-        disabled,
-        setExpanded,
-        children,
-        descriptionId,
-        setDescriptionId,
-      },
-    },
-    React.createElement(
-      Box,
-      {
-        className: cx('iui-expandable-block', className),
-        'data-iui-expanded': expanded,
-        'data-iui-size': size,
-        'data-iui-variant': 'default' !== styleType ? styleType : void 0,
-        style: style,
-        ref: forwardedRef,
-        ...rest,
-      },
-      children,
-    ),
-  );
-});
-let ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
-  let { className, children, label, caption, expandIcon, endIcon, ...rest } =
-    props;
-  let { disabled, status } = useSafeContext(ExpandableBlockContext);
-  return React.createElement(
-    LinkBox,
-    {
-      className: cx('iui-expandable-header', className),
-      'data-iui-disabled': disabled ? 'true' : void 0,
-      ref: forwardedRef,
-      ...rest,
-    },
-    children ??
-      React.createElement(
-        React.Fragment,
-        null,
-        expandIcon ?? React.createElement(ExpandableBlock.ExpandIcon, null),
-        React.createElement(
-          ExpandableBlock.LabelArea,
-          null,
-          React.createElement(ExpandableBlock.Title, null, label),
-          caption &&
-            React.createElement(ExpandableBlock.Caption, null, caption),
-        ),
-        endIcon || status
-          ? React.createElement(ExpandableBlock.EndIcon, null, endIcon)
-          : null,
-      ),
-  );
-});
-let ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
-  let { className, children, ...rest } = props;
-  return React.createElement(
-    Icon,
-    {
-      className: cx('iui-expandable-block-icon', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children ??
-      React.createElement(SvgChevronRight, {
-        'aria-hidden': true,
-      }),
-  );
-});
-let ExpandableBlockLabelArea = polymorphic.span('iui-expandable-block-label');
-let ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
-  let { className, children, onClick: onClickProp, ...rest } = props;
-  let { isExpanded, setExpanded, disabled, onToggle, descriptionId } =
-    useSafeContext(ExpandableBlockContext);
-  return React.createElement(
-    ButtonBase,
-    {
-      className: cx('iui-expandable-block-title', 'iui-link-action', className),
-      'aria-expanded': isExpanded,
-      'aria-disabled': disabled,
-      onClick: mergeEventHandlers(onClickProp, () => {
-        if (disabled) return;
-        setExpanded(!isExpanded);
-        onToggle?.(!isExpanded);
-      }),
-      ref: forwardedRef,
-      'aria-describedby': descriptionId,
-      ...rest,
-    },
-    children,
-  );
-});
-let ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
-  let fallbackId = useId();
-  let { setDescriptionId } = useSafeContext(ExpandableBlockContext);
-  React.useEffect(() => {
-    setDescriptionId(props.id || fallbackId);
-    return () => setDescriptionId(void 0);
-  }, [props.id, fallbackId, setDescriptionId]);
-  return React.createElement(Box, {
-    ref: forwardedRef,
-    id: fallbackId,
-    ...props,
-    className: cx('iui-expandable-block-caption', props?.className),
-  });
-});
-let ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
-  let { children, ...rest } = props;
-  let { status } = useSafeContext(ExpandableBlockContext);
-  let icon = children ?? (status && StatusIconMap[status]());
-  return React.createElement(
-    Icon,
-    {
-      fill: status,
-      ref: forwardedRef,
-      ...rest,
-    },
-    icon,
-  );
-});
-let ExpandableBlockContent = React.forwardRef((props, forwardedRef) => {
-  let { className, children, innerProps, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-expandable-content', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(Box, innerProps, children),
-  );
-});
-export const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
-  Wrapper: ExpandableBlockWrapper,
-  Trigger: ExpandableBlockTrigger,
-  ExpandIcon: ExpandableBlockExpandIcon,
-  LabelArea: ExpandableBlockLabelArea,
-  Title: ExpandableBlockTitle,
-  Caption: ExpandableBlockCaption,
-  EndIcon: ExpandableBlockEndIcon,
-  Content: ExpandableBlockContent,
-});

package/esm/core/Fieldset/Fieldset.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type FieldsetProps = {
-    /**
-     * The caption or title for the fieldset.
-     */
-    legend?: React.ReactNode;
-};
-/**
- * Fieldset component to group several inputs, controls and labels within a form.
- * @example
- * <Fieldset legend='Settings'>
- *   <Input />
- *   <InputGroup>
- *     <ToggleSwitch />
- *     <ToggleSwitch />
- *   </InputGroup>
- * </Fieldset>
- */
-export declare const Fieldset: PolymorphicForwardRefComponent<"fieldset", FieldsetProps>;
-export {};

package/esm/core/Fieldset/Fieldset.js

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { FieldsetBase } from '../../utils/index.js';
-import cx from 'classnames';
-export const Fieldset = React.forwardRef((props, ref) => {
-  let { children, className, disabled, legend, ...rest } = props;
-  return React.createElement(
-    FieldsetBase,
-    {
-      className: cx('iui-fieldset', className),
-      disabled: disabled,
-      ref: ref,
-      ...rest,
-    },
-    legend && React.createElement('legend', null, legend),
-    disabled
-      ? React.Children.map(children, (child) =>
-          React.isValidElement(child)
-            ? React.cloneElement(child, {
-                disabled: true,
-              })
-            : child,
-        )
-      : children,
-  );
-});

package/esm/core/FileUpload/FileEmptyCard.d.ts

@@ -1,21 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-/**
- * Empty file card to be used with the `FileUploadCard` component when no file has been uploaded.
- * @example
- * <FileEmptyCard />
- * <FileEmptyCard>
- *   <FileEmptyCard.Icon>
- *     <SvgSmileySadVery />
- *   </FileEmptyCard.Icon>
- *   <FileEmptyCard.Text>
- *     <FileUploadCard.InputLabel>
- *       Custom Label Text
- *     </FileUploadCard.InputLabel>
- *     <div>Custom Description Text</div>
- *   </FileEmptyCard.Text>
- * </FileEmptyCard>
- */
-export declare const FileEmptyCard: PolymorphicForwardRefComponent<"div", {}> & {
-    Icon: PolymorphicForwardRefComponent<"span", {}>;
-    Text: PolymorphicForwardRefComponent<"span", {}>;
-};

package/esm/core/FileUpload/FileEmptyCard.js

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { Box, polymorphic, SvgUpload } from '../../utils/index.js';
-import cx from 'classnames';
-import { FileUploadCard } from './FileUploadCard.js';
-let FileEmptyCardIcon = polymorphic.span('iui-file-card-empty-icon', {
-  children: React.createElement(SvgUpload, null),
-});
-let FileEmptyCardText = polymorphic.span('iui-file-card-empty-action');
-let FileEmptyCardComponent = React.forwardRef((props, ref) => {
-  let { children, className, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-file-card-empty', className),
-      ref: ref,
-      ...rest,
-    },
-    children ??
-      React.createElement(
-        React.Fragment,
-        null,
-        React.createElement(FileEmptyCard.Icon, null),
-        React.createElement(
-          FileEmptyCard.Text,
-          null,
-          React.createElement(FileUploadCard.InputLabel, null, 'Choose a file'),
-          React.createElement('div', null, 'to upload.'),
-        ),
-      ),
-  );
-});
-export const FileEmptyCard = Object.assign(FileEmptyCardComponent, {
-  Icon: FileEmptyCardIcon,
-  Text: FileEmptyCardText,
-});

package/esm/core/FileUpload/FileUpload.d.ts

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type FileUploadProps = {
-    /**
-     * Content shown over `children` when file is being dragged onto the component.
-     * Should always be used when drag content differs from `children` being wrapped.
-     */
-    dragContent?: React.ReactNode;
-    /**
-     * Callback fired when files are dropped onto the component.
-     *
-     * The first argument is the `files` list, and the second argument is the underlying "drop" event.
-     */
-    onFileDropped: (files: FileList, event: React.DragEvent) => void;
-    /**
-     * Component to wrap `FileUpload` around.
-     * Either pass `FileUploadCard` (for default state) or a different component to wrap.
-     */
-    children: React.ReactNode;
-    /**
-     *  Allows for custom prop to be passed for content.
-     */
-    contentProps?: React.ComponentProps<'div'>;
-};
-/**
- * File upload component to be wrapped around `FileUploadCard` or any arbitrary component.
- * Provides support for dragging and dropping multiple files.
- * @example
- * <FileUpload onFileDropped={console.log}><FileUploadCard /></FileUpload>
- * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
- */
-export declare const FileUpload: PolymorphicForwardRefComponent<"div", FileUploadProps>;
-export {};

package/esm/core/FileUpload/FileUpload.js

@@ -1,70 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box, mergeEventHandlers } from '../../utils/index.js';
-export const FileUpload = React.forwardRef((props, forwardedRef) => {
-  let { dragContent, children, onFileDropped, contentProps, ...rest } = props;
-  let [isDragActive, setIsDragActive] = React.useState(false);
-  let onDragOverHandler = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  let onDragEnterHandler = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file')
-      setIsDragActive(true);
-  };
-  let onDragLeaveHandler = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (isDragActive && !e.currentTarget?.contains(e.relatedTarget))
-      setIsDragActive(false);
-  };
-  let onDropHandler = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (isDragActive) {
-      setIsDragActive(false);
-      onFileDropped(e.dataTransfer?.files, e);
-    }
-  };
-  return React.createElement(
-    Box,
-    {
-      ...rest,
-      className: cx(
-        'iui-file-upload',
-        {
-          'iui-drag': isDragActive,
-        },
-        props?.className,
-      ),
-      ref: forwardedRef,
-      onDragEnter: mergeEventHandlers(props.onDragEnter, onDragEnterHandler),
-      onDragOver: mergeEventHandlers(props.onDragOver, onDragOverHandler),
-      onDragLeave: mergeEventHandlers(props.onDragLeave, onDragLeaveHandler),
-      onDrop: mergeEventHandlers(props.onDrop, onDropHandler),
-    },
-    dragContent
-      ? children
-      : React.createElement(
-          Box,
-          {
-            as: 'div',
-            ...contentProps,
-            className: cx('iui-content', contentProps?.className),
-          },
-          children,
-        ),
-    dragContent &&
-      React.createElement(
-        Box,
-        {
-          as: 'div',
-          ...contentProps,
-          className: cx('iui-content', contentProps?.className),
-        },
-        dragContent,
-      ),
-  );
-});

package/esm/core/FileUpload/FileUploadCard.d.ts

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type FileUploadCardProps = {
-    /**
-     * Files to pass (only needed when passing a custom action)
-     */
-    files?: File[];
-    /**
-     * Callback fired when files has changed (only needed passing custom action)
-     */
-    onFilesChange?: (files: File[]) => void;
-    /**
-     * Node that is shown when there is no file uploaded
-     * Either pass `FileEmptyCard` (for default state) or a different component to show
-     * @default <FileEmptyCard />
-     */
-    emptyCard?: React.ReactNode;
-    /**
-     * Input node
-     * @default <FileUploadCard.Input />
-     */
-    input?: React.ReactNode;
-};
-/**
- * Default card to be used with the `FileUpload` wrapper component for single-file uploading.
- * @example
- * <FileUploadCard />
- * <FileUploadCard files={files} onFilesChange={(files) => setFiles(files)}>
- *   <FileUploadCard.Icon>
- *     <SvgSmileyHappyVery />
- *   </FileUploadCard.Icon>
- *   <FileUploadCard.Info>
- *     <FileUploadCard.Title>Custom File Name</FileUploadCard.Title>
- *     <FileUploadCard.Description>
- *       Custom File Description
- *     </FileUploadCard.Description>
- *   </FileUploadCard.Info>
- *   <FileUploadCard.Action>
- *     <Button
- *       onClick={() => {
- *         setFiles([]);
- *       }}
- *     />
- *     <FileUploadCard.Input name={fileInputId} ref={inputRef} />
- *   </FileUploadCard.Action>
- * </FileUploadCard>
- */
-export declare const FileUploadCard: PolymorphicForwardRefComponent<"div", FileUploadCardProps> & {
-    Icon: PolymorphicForwardRefComponent<"span", {}>;
-    Info: PolymorphicForwardRefComponent<"span", {}>;
-    Title: PolymorphicForwardRefComponent<"span", {}>;
-    Description: PolymorphicForwardRefComponent<"span", {}>;
-    Action: PolymorphicForwardRefComponent<"div", {}>;
-    InputLabel: PolymorphicForwardRefComponent<"label", {}>;
-    Input: PolymorphicForwardRefComponent<"input", {}>;
-};
-export declare const FileUploadCardContext: React.Context<{
-    /**
-     * Files to pass
-     */
-    files: File[];
-    /**
-     * Callback fired when files have changed
-     */
-    onFilesChange?: (files: File[]) => void;
-    /**
-     * Sets the state of the files within FileUploadCard
-     */
-    setInternalFiles: (files: File[]) => void;
-    /**
-     * Id to pass to input
-     */
-    inputId?: string;
-    setInputId: (inputId: string) => void;
-} | undefined>;
-export {};