@itwin/itwinui-react 3.0.4 → 3.0.5

package/esm/core/FileUpload/FileUploadCard.js

@@ -3,36 +3,27 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import {
-  getWindow,
-  SvgDocument,
-  useMergedRefs,
-  useSafeContext,
-  useId,
-  mergeEventHandlers,
-  polymorphic,
-  Box,
-} from '../utils/index.js';
+import { getWindow, SvgDocument, useMergedRefs, useSafeContext, useId, mergeEventHandlers, polymorphic, Box, } from '../utils/index.js';
 import cx from 'classnames';
 import { FileEmptyCard } from './FileEmptyCard.js';
 import { Anchor } from '../Typography/Anchor.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 const toBytes = (bytes) => {
-  const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
-  let i = 0;
-  while (bytes >= 1024 && ++i) {
-    bytes = bytes / 1024;
-  }
-  return bytes.toFixed(bytes < 10 && i > 0 ? 2 : 0) + units[i];
+    const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
+    let i = 0;
+    while (bytes >= 1024 && ++i) {
+        bytes = bytes / 1024;
+    }
+    return bytes.toFixed(bytes < 10 && i > 0 ? 2 : 0) + units[i];
 };
 const toDate = (dateNumber) => {
-  const date = new Date(dateNumber);
-  return date.toDateString() + ' ' + date.toLocaleTimeString();
+    const date = new Date(dateNumber);
+    return date.toDateString() + ' ' + date.toLocaleTimeString();
 };
 // ----------------------------------------------------------------------------
 // FileUploadCard.Icon component
 const FileUploadCardIcon = polymorphic.span('iui-file-card-icon', {
-  children: React.createElement(SvgDocument, null),
+    children: React.createElement(SvgDocument, null),
 });
 FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
 // ----------------------------------------------------------------------------
@@ -42,44 +33,24 @@ FileUploadCardInfo.displayName = 'FileUploadCard.Info';
 // ----------------------------------------------------------------------------
 // FileUploadCard.Title component
 const FileUploadCardTitle = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  const { files } = useSafeContext(FileUploadCardContext);
-  const title =
-    files.length > 1 ? files.length + ' files selected' : files[0].name;
-  return React.createElement(
-    Box,
-    {
-      as: 'span',
-      className: cx('iui-file-card-title', className),
-      ref: ref,
-      ...rest,
-    },
-    children ?? title,
-  );
+    const { children, className, ...rest } = props;
+    const { files } = useSafeContext(FileUploadCardContext);
+    const title = files.length > 1 ? files.length + ' files selected' : files[0].name;
+    return (React.createElement(Box, { as: 'span', className: cx('iui-file-card-title', className), ref: ref, ...rest }, children ?? title));
 });
 FileUploadCardTitle.displayName = 'FileUploadCard.Title';
 // ----------------------------------------------------------------------------
 // FileUploadCard.Description component
 const FileUploadCardDescription = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  const { files } = 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(
-    Box,
-    {
-      as: 'span',
-      className: cx('iui-file-card-description', className),
-      ref: ref,
-      ...rest,
-    },
-    children ?? description,
-  );
+    const { children, className, ...rest } = props;
+    const { files } = 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(Box, { as: 'span', className: cx('iui-file-card-description', className), ref: ref, ...rest }, children ?? description));
 });
 FileUploadCardDescription.displayName = 'FileUploadCard.Description';
 // ----------------------------------------------------------------------------
@@ -89,109 +60,61 @@ FileUploadCardAction.displayName = 'FileUploadCard.Action';
 // ----------------------------------------------------------------------------
 // FileUploadCard.InputLabel component
 const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
-  const { children, ...rest } = props;
-  const { inputId } = useSafeContext(FileUploadCardContext);
-  return React.createElement(
-    Anchor,
-    { as: 'label', ref: ref, htmlFor: inputId, ...rest },
-    children,
-  );
+    const { children, ...rest } = props;
+    const { inputId } = useSafeContext(FileUploadCardContext);
+    return (React.createElement(Anchor, { as: 'label', ref: ref, htmlFor: inputId, ...rest }, children));
 });
 FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
 // ----------------------------------------------------------------------------
 // FileUploadCard.Input component
 const FileUploadCardInput = React.forwardRef((props, ref) => {
-  const { children, onChange, id, ...rest } = props;
-  const { files, onFilesChange, setInternalFiles, inputId, setInputId } =
-    useSafeContext(FileUploadCardContext);
-  const setNativeFilesRef = React.useCallback(
-    (node) => {
-      if (!node || !getWindow()?.DataTransfer) {
-        return;
-      }
-      const dataTransfer = new DataTransfer();
-      dataTransfer.items.clear();
-      Array.from(files).forEach((file) => dataTransfer.items.add(file));
-      node.files = dataTransfer.files;
-    },
-    [files],
-  );
-  const refs = useMergedRefs(ref, setNativeFilesRef);
-  React.useEffect(() => {
-    if (id && id !== inputId) {
-      setInputId(id);
-    }
-  }, [id, inputId, setInputId]);
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(VisuallyHidden, {
-      as: 'input',
-      type: 'file',
-      unhideOnFocus: false,
-      onChange: mergeEventHandlers(onChange, (e) => {
-        const _files = Array.from(e.currentTarget.files || []);
-        onFilesChange?.(_files);
-        setInternalFiles(_files);
-      }),
-      ref: refs,
-      id: id ?? inputId,
-      ...rest,
-    }),
-    children,
-  );
+    const { children, onChange, id, ...rest } = props;
+    const { files, onFilesChange, setInternalFiles, inputId, setInputId } = useSafeContext(FileUploadCardContext);
+    const setNativeFilesRef = React.useCallback((node) => {
+        if (!node || !getWindow()?.DataTransfer) {
+            return;
+        }
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.clear();
+        Array.from(files).forEach((file) => dataTransfer.items.add(file));
+        node.files = dataTransfer.files;
+    }, [files]);
+    const refs = useMergedRefs(ref, setNativeFilesRef);
+    React.useEffect(() => {
+        if (id && id !== inputId) {
+            setInputId(id);
+        }
+    }, [id, inputId, setInputId]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(VisuallyHidden, { as: 'input', type: 'file', unhideOnFocus: false, onChange: mergeEventHandlers(onChange, (e) => {
+                const _files = Array.from(e.currentTarget.files || []);
+                onFilesChange?.(_files);
+                setInternalFiles(_files);
+            }), ref: refs, id: id ?? inputId, ...rest }),
+        children));
 });
 FileUploadCardInput.displayName = 'FileUploadCard.Input';
 const FileUploadCardComponent = React.forwardRef((props, ref) => {
-  const {
-    className,
-    children,
-    files: filesProp,
-    onFilesChange,
-    emptyCard = React.createElement(FileEmptyCard, null),
-    input,
-    ...rest
-  } = props;
-  const [internalFiles, setInternalFiles] = React.useState();
-  const uid = useId();
-  const [inputId, setInputId] = React.useState(uid);
-  const files = filesProp ?? internalFiles ?? [];
-  return React.createElement(
-    FileUploadCardContext.Provider,
-    {
-      value: {
-        files,
-        onFilesChange,
-        setInternalFiles,
-        inputId,
-        setInputId,
-      },
-    },
-    files?.length
-      ? React.createElement(
-          Box,
-          { className: cx('iui-file-card', className), ref: ref, ...rest },
-          children ??
-            React.createElement(
-              React.Fragment,
-              null,
-              React.createElement(FileUploadCard.Icon, null),
-              React.createElement(
-                FileUploadCard.Info,
-                null,
+    const { className, children, files: filesProp, onFilesChange, emptyCard = React.createElement(FileEmptyCard, null), input, ...rest } = props;
+    const [internalFiles, setInternalFiles] = React.useState();
+    const uid = useId();
+    const [inputId, setInputId] = React.useState(uid);
+    const files = filesProp ?? internalFiles ?? [];
+    return (React.createElement(FileUploadCardContext.Provider, { value: {
+            files,
+            onFilesChange,
+            setInternalFiles,
+            inputId,
+            setInputId,
+        } },
+        files?.length ? (React.createElement(Box, { className: cx('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),
-  );
+                React.createElement(FileUploadCard.Description, null)),
+            React.createElement(FileUploadCard.Action, null,
+                React.createElement(FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard),
+        input ?? React.createElement(FileUploadCard.Input, null)));
 });
 /**
  * Default card to be used with the `FileUpload` wrapper component for single-file uploading.
@@ -218,13 +141,13 @@ const FileUploadCardComponent = React.forwardRef((props, ref) => {
  * </FileUploadCard>
  */
 export const FileUploadCard = Object.assign(FileUploadCardComponent, {
-  Icon: FileUploadCardIcon,
-  Info: FileUploadCardInfo,
-  Title: FileUploadCardTitle,
-  Description: FileUploadCardDescription,
-  Action: FileUploadCardAction,
-  InputLabel: FileUploadCardInputLabel,
-  Input: FileUploadCardInput,
+    Icon: FileUploadCardIcon,
+    Info: FileUploadCardInfo,
+    Title: FileUploadCardTitle,
+    Description: FileUploadCardDescription,
+    Action: FileUploadCardAction,
+    InputLabel: FileUploadCardInputLabel,
+    Input: FileUploadCardInput,
 });
 FileUploadCard.displayName = 'FileUploadCard';
 export default FileUploadCard;

package/esm/core/FileUpload/FileUploadTemplate.js

@@ -14,42 +14,14 @@ import { Anchor } from '../Typography/Anchor.js';
  * <FileUploadTemplate onChange={(e) => console.log(e.target.files)} />
  */
 export const FileUploadTemplate = React.forwardRef((props, ref) => {
-  const {
-    onChange,
-    acceptMultiple = true,
-    acceptType,
-    label = 'Choose a file',
-    subtitle = 'or drag & drop it here.',
-    children,
-    className,
-    ...rest
-  } = props;
-  return React.createElement(
-    Box,
-    { className: cx('iui-file-upload-template', className), ref: ref, ...rest },
-    React.createElement(SvgUpload, {
-      className: 'iui-template-icon',
-      'aria-hidden': true,
-    }),
-    React.createElement(
-      Box,
-      { className: 'iui-template-text' },
-      React.createElement(
-        Anchor,
-        { as: 'label' },
-        React.createElement(Box, {
-          as: 'input',
-          className: 'iui-browse-input',
-          type: 'file',
-          onChange: onChange,
-          multiple: acceptMultiple,
-          accept: acceptType,
-        }),
-        label,
-      ),
-      React.createElement('div', null, subtitle),
-      children,
-    ),
-  );
+    const { onChange, acceptMultiple = true, acceptType, label = 'Choose a file', subtitle = 'or drag & drop it here.', children, className, ...rest } = props;
+    return (React.createElement(Box, { className: cx('iui-file-upload-template', className), ref: ref, ...rest },
+        React.createElement(SvgUpload, { className: 'iui-template-icon', "aria-hidden": true }),
+        React.createElement(Box, { className: 'iui-template-text' },
+            React.createElement(Anchor, { as: 'label' },
+                React.createElement(Box, { as: 'input', className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),
+                label),
+            React.createElement("div", null, subtitle),
+            children)));
 });
 export default FileUploadTemplate;

package/esm/core/Flex/Flex.js

@@ -5,79 +5,63 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/components/Box.js';
-const sizeTokens = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
+const sizeTokens = [
+    '3xs',
+    '2xs',
+    'xs',
+    's',
+    'm',
+    'l',
+    'xl',
+    '2xl',
+    '3xl',
+];
 const getValueForToken = (token) => {
-  if (sizeTokens.includes(token)) {
-    return `var(--iui-size-${token})`;
-  }
-  return token;
+    if (sizeTokens.includes(token)) {
+        return `var(--iui-size-${token})`;
+    }
+    return token;
 };
 // ----------------------------------------------------------------------------
 // Main Flex component
 const FlexComponent = React.forwardRef((props, ref) => {
-  const {
-    display,
-    flexDirection,
-    justifyContent,
-    alignItems,
-    gap,
-    flexWrap,
-    className,
-    style,
-    ...rest
-  } = props;
-  return React.createElement(Box, {
-    className: cx('iui-flex', className),
-    style: {
-      '--iui-flex-display': display,
-      '--iui-flex-direction': flexDirection,
-      '--iui-flex-justify': justifyContent,
-      '--iui-flex-align': alignItems,
-      '--iui-flex-gap': getValueForToken(gap),
-      '--iui-flex-wrap': flexWrap,
-      ...style,
-    },
-    ref: ref,
-    ...rest,
-  });
+    const { display, flexDirection, justifyContent, alignItems, gap, flexWrap, className, style, ...rest } = props;
+    return (React.createElement(Box, { className: cx('iui-flex', className), style: {
+            '--iui-flex-display': display,
+            '--iui-flex-direction': flexDirection,
+            '--iui-flex-justify': justifyContent,
+            '--iui-flex-align': alignItems,
+            '--iui-flex-gap': getValueForToken(gap),
+            '--iui-flex-wrap': flexWrap,
+            ...style,
+        }, ref: ref, ...rest }));
 });
 FlexComponent.displayName = 'Flex';
 // ----------------------------------------------------------------------------
 // Flex.Spacer component
 const FlexSpacer = React.forwardRef((props, ref) => {
-  const { flex, className, style, ...rest } = props;
-  return React.createElement(Box, {
-    className: cx('iui-flex-spacer', className),
-    style: { '--iui-flex-spacer-flex': flex, ...style },
-    ref: ref,
-    ...rest,
-  });
+    const { flex, className, style, ...rest } = props;
+    return (React.createElement(Box, { className: cx('iui-flex-spacer', className), style: { '--iui-flex-spacer-flex': flex, ...style }, ref: ref, ...rest }));
 });
 FlexSpacer.displayName = 'Flex.Spacer';
 // ----------------------------------------------------------------------------
 // Flex.Item subcomponent
 const FlexItem = React.forwardRef((props, ref) => {
-  const { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } =
-    props;
-  const _style = {
-    '--iui-flex-item-flex': flex,
-    '--iui-flex-item-align': alignSelf,
-    '--iui-flex-item-gap-before': getValueForToken(gapBefore),
-    '--iui-flex-item-gap-after': getValueForToken(gapAfter),
-    ...(gapBefore !== undefined && {
-      '--iui-flex-item-gap-before-toggle': 'var(--iui-on)',
-    }),
-    ...(gapAfter !== undefined && {
-      '--iui-flex-item-gap-after-toggle': 'var(--iui-on)',
-    }),
-    ...style,
-  };
-  return React.createElement(Box, {
-    className: cx('iui-flex-item', className),
-    ref: ref,
-    style: _style,
-    ...rest,
-  });
+    const { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } = props;
+    const _style = {
+        '--iui-flex-item-flex': flex,
+        '--iui-flex-item-align': alignSelf,
+        '--iui-flex-item-gap-before': getValueForToken(gapBefore),
+        '--iui-flex-item-gap-after': getValueForToken(gapAfter),
+        ...(gapBefore !== undefined && {
+            '--iui-flex-item-gap-before-toggle': 'var(--iui-on)',
+        }),
+        ...(gapAfter !== undefined && {
+            '--iui-flex-item-gap-after-toggle': 'var(--iui-on)',
+        }),
+        ...style,
+    };
+    return (React.createElement(Box, { className: cx('iui-flex-item', className), ref: ref, style: _style, ...rest }));
 });
 FlexItem.displayName = 'Flex.Item';
 // ----------------------------------------------------------------------------
@@ -111,34 +95,34 @@ FlexItem.displayName = 'Flex.Item';
  * </Flex>
  */
 export const Flex = Object.assign(FlexComponent, {
-  /**
-   * 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: FlexItem,
-  /**
-   * 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: FlexSpacer,
+    /**
+     * 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: FlexItem,
+    /**
+     * 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: FlexSpacer,
 });
 export default Flex;