@itwin/itwinui-react 3.0.4 → 3.0.6

package/cjs/core/FileUpload/FileUploadCard.js

@@ -1,33 +1,33 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileUploadCardContext = exports.FileUploadCard = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const FileEmptyCard_js_1 = require('./FileEmptyCard.js');
-const Anchor_js_1 = require('../Typography/Anchor.js');
-const VisuallyHidden_js_1 = require('../VisuallyHidden/VisuallyHidden.js');
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const FileEmptyCard_js_1 = require("./FileEmptyCard.js");
+const Anchor_js_1 = require("../Typography/Anchor.js");
+const VisuallyHidden_js_1 = require("../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 = index_js_1.polymorphic.span('iui-file-card-icon', {
-  children: React.createElement(index_js_1.SvgDocument, null),
+    children: React.createElement(index_js_1.SvgDocument, null),
 });
 FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
 // ----------------------------------------------------------------------------
@@ -37,51 +37,24 @@ FileUploadCardInfo.displayName = 'FileUploadCard.Info';
 // ----------------------------------------------------------------------------
 // FileUploadCard.Title component
 const FileUploadCardTitle = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  const { files } = (0, index_js_1.useSafeContext)(
-    exports.FileUploadCardContext,
-  );
-  const title =
-    files.length > 1 ? files.length + ' files selected' : files[0].name;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      as: 'span',
-      className: (0, classnames_1.default)('iui-file-card-title', className),
-      ref: ref,
-      ...rest,
-    },
-    children ?? title,
-  );
+    const { children, className, ...rest } = props;
+    const { files } = (0, index_js_1.useSafeContext)(exports.FileUploadCardContext);
+    const title = files.length > 1 ? files.length + ' files selected' : files[0].name;
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('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 } = (0, index_js_1.useSafeContext)(
-    exports.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_js_1.Box,
-    {
-      as: 'span',
-      className: (0, classnames_1.default)(
-        'iui-file-card-description',
-        className,
-      ),
-      ref: ref,
-      ...rest,
-    },
-    children ?? description,
-  );
+    const { children, className, ...rest } = props;
+    const { files } = (0, index_js_1.useSafeContext)(exports.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_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-file-card-description', className), ref: ref, ...rest }, children ?? description));
 });
 FileUploadCardDescription.displayName = 'FileUploadCard.Description';
 // ----------------------------------------------------------------------------
@@ -91,119 +64,61 @@ FileUploadCardAction.displayName = 'FileUploadCard.Action';
 // ----------------------------------------------------------------------------
 // FileUploadCard.InputLabel component
 const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
-  const { children, ...rest } = props;
-  const { inputId } = (0, index_js_1.useSafeContext)(
-    exports.FileUploadCardContext,
-  );
-  return React.createElement(
-    Anchor_js_1.Anchor,
-    { as: 'label', ref: ref, htmlFor: inputId, ...rest },
-    children,
-  );
+    const { children, ...rest } = props;
+    const { inputId } = (0, index_js_1.useSafeContext)(exports.FileUploadCardContext);
+    return (React.createElement(Anchor_js_1.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 } = (0,
-  index_js_1.useSafeContext)(exports.FileUploadCardContext);
-  const setNativeFilesRef = React.useCallback(
-    (node) => {
-      if (!node || !(0, index_js_1.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 = (0, index_js_1.useMergedRefs)(ref, setNativeFilesRef);
-  React.useEffect(() => {
-    if (id && id !== inputId) {
-      setInputId(id);
-    }
-  }, [id, inputId, setInputId]);
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(VisuallyHidden_js_1.VisuallyHidden, {
-      as: 'input',
-      type: 'file',
-      unhideOnFocus: false,
-      onChange: (0, index_js_1.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 } = (0, index_js_1.useSafeContext)(exports.FileUploadCardContext);
+    const setNativeFilesRef = React.useCallback((node) => {
+        if (!node || !(0, index_js_1.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 = (0, index_js_1.useMergedRefs)(ref, setNativeFilesRef);
+    React.useEffect(() => {
+        if (id && id !== inputId) {
+            setInputId(id);
+        }
+    }, [id, inputId, setInputId]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(VisuallyHidden_js_1.VisuallyHidden, { as: 'input', type: 'file', unhideOnFocus: false, onChange: (0, index_js_1.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_js_1.FileEmptyCard, null),
-    input,
-    ...rest
-  } = props;
-  const [internalFiles, setInternalFiles] = React.useState();
-  const uid = (0, index_js_1.useId)();
-  const [inputId, setInputId] = React.useState(uid);
-  const files = filesProp ?? internalFiles ?? [];
-  return React.createElement(
-    exports.FileUploadCardContext.Provider,
-    {
-      value: {
-        files,
-        onFilesChange,
-        setInternalFiles,
-        inputId,
-        setInputId,
-      },
-    },
-    files?.length
-      ? React.createElement(
-          index_js_1.Box,
-          {
-            className: (0, classnames_1.default)('iui-file-card', className),
-            ref: ref,
-            ...rest,
-          },
-          children ??
-            React.createElement(
-              React.Fragment,
-              null,
-              React.createElement(exports.FileUploadCard.Icon, null),
-              React.createElement(
-                exports.FileUploadCard.Info,
-                null,
+    const { className, children, files: filesProp, onFilesChange, emptyCard = React.createElement(FileEmptyCard_js_1.FileEmptyCard, null), input, ...rest } = props;
+    const [internalFiles, setInternalFiles] = React.useState();
+    const uid = (0, index_js_1.useId)();
+    const [inputId, setInputId] = React.useState(uid);
+    const files = filesProp ?? internalFiles ?? [];
+    return (React.createElement(exports.FileUploadCardContext.Provider, { value: {
+            files,
+            onFilesChange,
+            setInternalFiles,
+            inputId,
+            setInputId,
+        } },
+        files?.length ? (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-card', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
+            React.createElement(exports.FileUploadCard.Icon, null),
+            React.createElement(exports.FileUploadCard.Info, null,
                 React.createElement(exports.FileUploadCard.Title, null),
-                React.createElement(exports.FileUploadCard.Description, null),
-              ),
-              React.createElement(
-                exports.FileUploadCard.Action,
-                null,
-                React.createElement(
-                  exports.FileUploadCard.InputLabel,
-                  null,
-                  'Replace',
-                ),
-              ),
-            ),
-        )
-      : emptyCard,
-    input ?? React.createElement(exports.FileUploadCard.Input, null),
-  );
+                React.createElement(exports.FileUploadCard.Description, null)),
+            React.createElement(exports.FileUploadCard.Action, null,
+                React.createElement(exports.FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard),
+        input ?? React.createElement(exports.FileUploadCard.Input, null)));
 });
 /**
  * Default card to be used with the `FileUpload` wrapper component for single-file uploading.
@@ -230,13 +145,13 @@ const FileUploadCardComponent = React.forwardRef((props, ref) => {
  * </FileUploadCard>
  */
 exports.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,
 });
 exports.FileUploadCard.displayName = 'FileUploadCard';
 exports.default = exports.FileUploadCard;

package/cjs/core/FileUpload/FileUploadTemplate.js

@@ -1,15 +1,15 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileUploadTemplate = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const Anchor_js_1 = require('../Typography/Anchor.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const Anchor_js_1 = require("../Typography/Anchor.js");
 /**
  * @deprecated Use `FileUploadCard` instead.
  * Default template to be used with the `FileUpload` wrapper component.
@@ -18,49 +18,14 @@ const Anchor_js_1 = require('../Typography/Anchor.js');
  * <FileUploadTemplate onChange={(e) => console.log(e.target.files)} />
  */
 exports.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(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        'iui-file-upload-template',
-        className,
-      ),
-      ref: ref,
-      ...rest,
-    },
-    React.createElement(index_js_1.SvgUpload, {
-      className: 'iui-template-icon',
-      'aria-hidden': true,
-    }),
-    React.createElement(
-      index_js_1.Box,
-      { className: 'iui-template-text' },
-      React.createElement(
-        Anchor_js_1.Anchor,
-        { as: 'label' },
-        React.createElement(index_js_1.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(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-upload-template', className), ref: ref, ...rest },
+        React.createElement(index_js_1.SvgUpload, { className: 'iui-template-icon', "aria-hidden": true }),
+        React.createElement(index_js_1.Box, { className: 'iui-template-text' },
+            React.createElement(Anchor_js_1.Anchor, { as: 'label' },
+                React.createElement(index_js_1.Box, { as: 'input', className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),
+                label),
+            React.createElement("div", null, subtitle),
+            children)));
 });
 exports.default = exports.FileUploadTemplate;

package/cjs/core/Flex/Flex.js

@@ -1,87 +1,71 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Flex = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Box_js_1 = require('../utils/components/Box.js');
-const sizeTokens = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Box_js_1 = require("../utils/components/Box.js");
+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_js_1.Box, {
-    className: (0, classnames_1.default)('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_js_1.Box, { className: (0, classnames_1.default)('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_js_1.Box, {
-    className: (0, classnames_1.default)('iui-flex-spacer', className),
-    style: { '--iui-flex-spacer-flex': flex, ...style },
-    ref: ref,
-    ...rest,
-  });
+    const { flex, className, style, ...rest } = props;
+    return (React.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('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_js_1.Box, {
-    className: (0, classnames_1.default)('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_js_1.Box, { className: (0, classnames_1.default)('iui-flex-item', className), ref: ref, style: _style, ...rest }));
 });
 FlexItem.displayName = 'Flex.Item';
 // ----------------------------------------------------------------------------
@@ -115,34 +99,34 @@ FlexItem.displayName = 'Flex.Item';
  * </Flex>
  */
 exports.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,
 });
 exports.default = exports.Flex;