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

package/cjs/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/cjs/core/FileUpload/FileUpload.js

@@ -1,97 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'FileUpload', {
-  enumerable: true,
-  get: function () {
-    return FileUpload;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
-const _index = require('../../utils/index.js');
-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(
-    _index.Box,
-    {
-      ...rest,
-      className: (0, _classnames.default)(
-        'iui-file-upload',
-        {
-          'iui-drag': isDragActive,
-        },
-        props?.className,
-      ),
-      ref: forwardedRef,
-      onDragEnter: (0, _index.mergeEventHandlers)(
-        props.onDragEnter,
-        onDragEnterHandler,
-      ),
-      onDragOver: (0, _index.mergeEventHandlers)(
-        props.onDragOver,
-        onDragOverHandler,
-      ),
-      onDragLeave: (0, _index.mergeEventHandlers)(
-        props.onDragLeave,
-        onDragLeaveHandler,
-      ),
-      onDrop: (0, _index.mergeEventHandlers)(props.onDrop, onDropHandler),
-    },
-    dragContent
-      ? children
-      : _react.createElement(
-          _index.Box,
-          {
-            as: 'div',
-            ...contentProps,
-            className: (0, _classnames.default)(
-              'iui-content',
-              contentProps?.className,
-            ),
-          },
-          children,
-        ),
-    dragContent &&
-      _react.createElement(
-        _index.Box,
-        {
-          as: 'div',
-          ...contentProps,
-          className: (0, _classnames.default)(
-            'iui-content',
-            contentProps?.className,
-          ),
-        },
-        dragContent,
-      ),
-  );
-});

package/cjs/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 {};

package/cjs/core/FileUpload/FileUploadCard.js

@@ -1,201 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-function _export(target, all) {
-  for (var name in all)
-    Object.defineProperty(target, name, {
-      enumerable: true,
-      get: all[name],
-    });
-}
-_export(exports, {
-  FileUploadCard: function () {
-    return FileUploadCard;
-  },
-  FileUploadCardContext: function () {
-    return FileUploadCardContext;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
-const _classnames = _interop_require_default._(require('classnames'));
-const _FileEmptyCard = require('./FileEmptyCard.js');
-const _Anchor = require('../Typography/Anchor.js');
-const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
-const toBytes = (bytes) => {
-  let units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
-  let i = 0;
-  while (bytes >= 1024 && ++i) bytes /= 1024;
-  return bytes.toFixed(bytes < 10 && i > 0 ? 2 : 0) + units[i];
-};
-const toDate = (dateNumber) => {
-  let date = new Date(dateNumber);
-  return date.toDateString() + ' ' + date.toLocaleTimeString();
-};
-const FileUploadCardIcon = _index.polymorphic.span('iui-file-card-icon', {
-  children: _react.createElement(_index.SvgDocument, null),
-});
-const FileUploadCardInfo = _index.polymorphic.span('iui-file-card-text');
-const FileUploadCardTitle = _react.forwardRef((props, ref) => {
-  let { children, className, ...rest } = props;
-  let { files } = (0, _index.useSafeContext)(FileUploadCardContext);
-  let title =
-    files.length > 1 ? files.length + ' files selected' : files[0].name;
-  return _react.createElement(
-    _index.Box,
-    {
-      as: 'span',
-      className: (0, _classnames.default)('iui-file-card-title', className),
-      ref: ref,
-      ...rest,
-    },
-    children ?? title,
-  );
-});
-const FileUploadCardDescription = _react.forwardRef((props, ref) => {
-  let { children, className, ...rest } = props;
-  let { files } = (0, _index.useSafeContext)(FileUploadCardContext);
-  let description =
-    files.length > 1
-      ? files[0].name + ', ' + files[1].name
-      : toBytes(files[0].size) + ' ' + toDate(files[0].lastModified);
-  if (files.length > 2)
-    description += ', and ' + (files.length - 2) + ' others';
-  return _react.createElement(
-    _index.Box,
-    {
-      as: 'span',
-      className: (0, _classnames.default)(
-        'iui-file-card-description',
-        className,
-      ),
-      ref: ref,
-      ...rest,
-    },
-    children ?? description,
-  );
-});
-const FileUploadCardAction = _index.polymorphic.div('iui-file-card-action');
-const FileUploadCardInputLabel = _react.forwardRef((props, ref) => {
-  let { children, ...rest } = props;
-  let { inputId } = (0, _index.useSafeContext)(FileUploadCardContext);
-  return _react.createElement(
-    _Anchor.Anchor,
-    {
-      as: 'label',
-      ref: ref,
-      htmlFor: inputId,
-      ...rest,
-    },
-    children,
-  );
-});
-const FileUploadCardInput = _react.forwardRef((props, ref) => {
-  let { children, onChange, id, ...rest } = props;
-  let { files, onFilesChange, setInternalFiles, inputId, setInputId } = (0,
-  _index.useSafeContext)(FileUploadCardContext);
-  let setNativeFilesRef = _react.useCallback(
-    (node) => {
-      if (!node || !(0, _index.getWindow)()?.DataTransfer) return;
-      let dataTransfer = new DataTransfer();
-      dataTransfer.items.clear();
-      Array.from(files).forEach((file) => dataTransfer.items.add(file));
-      node.files = dataTransfer.files;
-    },
-    [files],
-  );
-  let refs = (0, _index.useMergedRefs)(ref, setNativeFilesRef);
-  _react.useEffect(() => {
-    if (id && id !== inputId) setInputId(id);
-  }, [id, inputId, setInputId]);
-  return _react.createElement(
-    _react.Fragment,
-    null,
-    _react.createElement(_VisuallyHidden.VisuallyHidden, {
-      as: 'input',
-      type: 'file',
-      unhideOnFocus: false,
-      onChange: (0, _index.mergeEventHandlers)(onChange, (e) => {
-        let _files = Array.from(e.currentTarget.files || []);
-        onFilesChange?.(_files);
-        setInternalFiles(_files);
-      }),
-      ref: refs,
-      id: id ?? inputId,
-      ...rest,
-    }),
-    children,
-  );
-});
-const FileUploadCardComponent = _react.forwardRef((props, ref) => {
-  let {
-    className,
-    children,
-    files: filesProp,
-    onFilesChange,
-    emptyCard = _react.createElement(_FileEmptyCard.FileEmptyCard, null),
-    input,
-    ...rest
-  } = props;
-  let [internalFiles, setInternalFiles] = _react.useState();
-  let uid = (0, _index.useId)();
-  let [inputId, setInputId] = _react.useState(uid);
-  let files = filesProp ?? internalFiles ?? [];
-  return _react.createElement(
-    FileUploadCardContext.Provider,
-    {
-      value: {
-        files,
-        onFilesChange,
-        setInternalFiles,
-        inputId,
-        setInputId,
-      },
-    },
-    files?.length
-      ? _react.createElement(
-          _index.Box,
-          {
-            className: (0, _classnames.default)('iui-file-card', className),
-            ref: ref,
-            ...rest,
-          },
-          children ??
-            _react.createElement(
-              _react.Fragment,
-              null,
-              _react.createElement(FileUploadCard.Icon, null),
-              _react.createElement(
-                FileUploadCard.Info,
-                null,
-                _react.createElement(FileUploadCard.Title, null),
-                _react.createElement(FileUploadCard.Description, null),
-              ),
-              _react.createElement(
-                FileUploadCard.Action,
-                null,
-                _react.createElement(
-                  FileUploadCard.InputLabel,
-                  null,
-                  'Replace',
-                ),
-              ),
-            ),
-        )
-      : emptyCard,
-    input ?? _react.createElement(FileUploadCard.Input, null),
-  );
-});
-const FileUploadCard = Object.assign(FileUploadCardComponent, {
-  Icon: FileUploadCardIcon,
-  Info: FileUploadCardInfo,
-  Title: FileUploadCardTitle,
-  Description: FileUploadCardDescription,
-  Action: FileUploadCardAction,
-  InputLabel: FileUploadCardInputLabel,
-  Input: FileUploadCardInput,
-});
-const FileUploadCardContext = _react.createContext(void 0);

package/cjs/core/FileUpload/FileUploadTemplate.d.ts

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type FileUploadTemplateProps = {
-    /**
-     * Callback fired when a file is selected from the device.
-     */
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    /**
-     * Whether the file input accepts multiple files.
-     * Passed to the `multiple` attribute of native file input.
-     * @default true
-     */
-    acceptMultiple?: boolean;
-    /**
-     * File types allowed.
-     * Passed to the `accept` attribute of native file input.
-     */
-    acceptType?: string;
-    /**
-     * Localized version of primary clickable label. Gets styled like a hyperlink.
-     * @default 'Choose a file'
-     */
-    label?: React.ReactNode;
-    /**
-     * Localized version of the secondary text shown below the label.
-     * @default 'or drag & drop it here.'
-     */
-    subtitle?: React.ReactNode;
-    /**
-     * Optional children appended to the template.
-     */
-    children?: React.ReactNode;
-};
-/**
- * @deprecated Use [`FileUploadCard`](https://itwinui.bentley.com/docs/fileupload#fileuploadcard) instead.
- *
- * Default template to be used with the `FileUpload` wrapper component.
- * Contains a hidden input with styled labels (customizable).
- * @example
- * <FileUploadTemplate onChange={(e) => console.log(e.target.files)} />
- */
-export declare const FileUploadTemplate: PolymorphicForwardRefComponent<"div", FileUploadTemplateProps>;
-export {};

package/cjs/core/FileUpload/FileUploadTemplate.js

@@ -1,66 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'FileUploadTemplate', {
-  enumerable: true,
-  get: function () {
-    return FileUploadTemplate;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
-const _index = require('../../utils/index.js');
-const _Anchor = require('../Typography/Anchor.js');
-const FileUploadTemplate = _react.forwardRef((props, ref) => {
-  let {
-    onChange,
-    acceptMultiple = true,
-    acceptType,
-    label = 'Choose a file',
-    subtitle = 'or drag & drop it here.',
-    children,
-    className,
-    ...rest
-  } = props;
-  return _react.createElement(
-    _index.Box,
-    {
-      className: (0, _classnames.default)(
-        'iui-file-upload-template',
-        className,
-      ),
-      ref: ref,
-      ...rest,
-    },
-    _react.createElement(_index.SvgUpload, {
-      className: 'iui-template-icon',
-      'aria-hidden': true,
-    }),
-    _react.createElement(
-      _index.Box,
-      {
-        className: 'iui-template-text',
-      },
-      _react.createElement(
-        _Anchor.Anchor,
-        {
-          as: 'label',
-        },
-        _react.createElement(_index.Box, {
-          as: 'input',
-          className: 'iui-browse-input',
-          type: 'file',
-          onChange: onChange,
-          multiple: acceptMultiple,
-          accept: acceptType,
-        }),
-        label,
-      ),
-      _react.createElement('div', null, subtitle),
-      children,
-    ),
-  );
-});

package/cjs/core/Flex/Flex.d.ts

@@ -1,138 +0,0 @@
-import * as React from 'react';
-import type { AnyString } from '../../utils/types.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/props.js';
-declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
-/**
- * String literal shorthands that correspond to the size tokens in [itwinui-variables](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/src/sizes.scss).
- */
-type SizeToken = (typeof sizeTokens)[number];
-type FlexOwnProps = {
-    /**
-     * Value of the `display` property.
-     * @default 'flex'
-     */
-    display?: 'flex' | 'inline-flex';
-    /**
-     * Value of the `justify-content` property.
-     * @default 'flex-start'
-     */
-    justifyContent?: React.CSSProperties['justifyContent'];
-    /**
-     * Value of the `align-items` property. Defaults to 'center' but you
-     * might want to use 'flex-start' in some cases.
-     * @default 'center'
-     */
-    alignItems?: React.CSSProperties['alignItems'];
-    /**
-     * Value of the `gap` property.
-     *
-     * Supports aliases for iTwinUI size tokens:
-     * 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl
-     *
-     * Also accepts any valid css value (e.g. "1rem" or "2px")
-     *
-     * @default 'xs'
-     */
-    gap?: SizeToken | AnyString;
-    /**
-     * Value of the `direction` property.
-     * @default 'row'
-     */
-    flexDirection?: React.CSSProperties['flexDirection'];
-    /**
-     * Value of the `flex-wrap` property.
-     * @default 'nowrap'
-     */
-    flexWrap?: React.CSSProperties['flexWrap'];
-};
-type FlexSpacerOwnProps = {
-    /**
-     * Value of the `flex` css property.
-     *
-     * This may need to be adjusted if you're also setting `flex` on
-     * other `Flex.Item`s.
-     *
-     * @default 999
-     */
-    flex?: React.CSSProperties['flex'];
-};
-type FlexItemOwnProps = {
-    /**
-     * Gap before the flex item, if different from the `gap` set on `Flex` component.
-     */
-    gapBefore?: SizeToken | AnyString;
-    /**
-     * Gap after the flex item, if different from the `gap` set on `Flex` component.
-     */
-    gapAfter?: SizeToken | AnyString;
-    /**
-     * Value of the `flex` css property.
-     * @default 'auto'
-     */
-    flex?: React.CSSProperties['flex'];
-    /**
-     * Value of the `align-self` css property.
-     * @default 'auto'
-     */
-    alignSelf?: React.CSSProperties['alignSelf'];
-};
-/**
- * A utility component that makes it easier to work with CSS flexbox
- * and iTwinUI design tokens. Supports all flex properties.
- * Can be used with or without `Flex.Item` and `Flex.Spacer` subcomponents.
- *
- * @example
- * <Flex>
- *   <Icon>...</Icon>
- *   <Text>...</Text>
- *   <Flex.Spacer />
- *   <IconButton>...</IconButton>
- * </Flex>
- *
- * @example
- * <Flex gap='m' flexWrap='wrap'>
- *   <Flex.Item>...</Flex.Item>
- *   <Flex.Item>...</Flex.Item>
- *   ...
- * </Flex>
- *
- * @example
- * <Flex gap='l'>
- *   <Flex.Item>...</Flex.Item>
- *   <Flex.Item>...</Flex.Item>
- *   <Flex.Item gapBefore='s'>...</Flex.Item>
- *   <Flex.Item>...</Flex.Item>
- * </Flex>
- */
-export declare const Flex: PolymorphicForwardRefComponent<"div", FlexOwnProps> & {
-    /**
-     * Subcomponent that allows customizing flex items through the
-     * `flex`, `alignSelf` and `gapBefore`/`gapAfter` props.
-     *
-     * The `gapBefore`/`gapAfter` props can used to override the gap at an
-     * individual level, for when you need a different gap than the one
-     * set in the parent `Flex`.
-     *
-     * @example
-     * <Flex gap='l'>
-     *   <Flex.Item>...</Flex.Item>
-     *   <Flex.Item>...</Flex.Item>
-     *   <Flex.Item gapBefore='s'>...</Flex.Item>
-     *   <Flex.Item>...</Flex.Item>
-     * </Flex>
-     */
-    Item: PolymorphicForwardRefComponent<"div", FlexItemOwnProps>;
-    /**
-     * Subcomponent that fills up the available space using a really large `flex` value.
-     * Useful when you want to push certain items to one edge.
-     *
-     * @example
-     * <Flex>
-     *   <div>this stays on the left</div>
-     *   <Flex.Spacer /> // this fills up the available empty space
-     *   <div>this gets pushed all the way to the end</div>
-     * </Flex>
-     */
-    Spacer: PolymorphicForwardRefComponent<"div", FlexSpacerOwnProps>;
-};
-export {};