@itwin/itwinui-react 3.0.3 → 3.0.5

package/cjs/core/Fieldset/Fieldset.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Fieldset = 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 React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
 /**
  * Fieldset component to group several inputs, controls and labels within a form.
  * @example
@@ -21,24 +21,13 @@ const classnames_1 = tslib_1.__importDefault(require('classnames'));
  * </Fieldset>
  */
 exports.Fieldset = React.forwardRef((props, ref) => {
-  const { children, className, disabled, legend, ...rest } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      as: 'fieldset',
-      className: (0, classnames_1.default)('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,
-  );
+    const { children, className, disabled, legend, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'fieldset', className: (0, classnames_1.default)('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));
 });
 exports.default = exports.Fieldset;

package/cjs/core/FileUpload/FileEmptyCard.js

@@ -1,58 +1,32 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileEmptyCard = 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 FileUploadCard_js_1 = tslib_1.__importDefault(
-  require('./FileUploadCard.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 FileUploadCard_js_1 = tslib_1.__importDefault(require("./FileUploadCard.js"));
 // ----------------------------------------------------------------------------
 // FileEmptyCard.Icon component
-const FileEmptyCardIcon = index_js_1.polymorphic.span(
-  'iui-file-card-empty-icon',
-  {
+const FileEmptyCardIcon = index_js_1.polymorphic.span('iui-file-card-empty-icon', {
     children: React.createElement(index_js_1.SvgUpload, null),
-  },
-);
+});
 // ----------------------------------------------------------------------------
 // FileEmptyCard.Text component
-const FileEmptyCardText = index_js_1.polymorphic.span(
-  'iui-file-card-empty-action',
-);
+const FileEmptyCardText = index_js_1.polymorphic.span('iui-file-card-empty-action');
 // ----------------------------------------------------------------------------
 // FileEmptyCard component
 const FileEmptyCardComponent = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)('iui-file-card-empty', className),
-      ref: ref,
-      ...rest,
-    },
-    children ??
-      React.createElement(
-        React.Fragment,
-        null,
+    const { children, className, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-card-empty', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
         React.createElement(exports.FileEmptyCard.Icon, null),
-        React.createElement(
-          exports.FileEmptyCard.Text,
-          null,
-          React.createElement(
-            FileUploadCard_js_1.default.InputLabel,
-            null,
-            'Choose a file',
-          ),
-          React.createElement('div', null, 'to upload.'),
-        ),
-      ),
-  );
+        React.createElement(exports.FileEmptyCard.Text, null,
+            React.createElement(FileUploadCard_js_1.default.InputLabel, null, "Choose a file"),
+            React.createElement("div", null, "to upload."))))));
 });
 /**
  * Empty file card to be used with the `FileUploadCard` component when no file has been uploaded.
@@ -71,7 +45,7 @@ const FileEmptyCardComponent = React.forwardRef((props, ref) => {
  * </FileEmptyCard>
  */
 exports.FileEmptyCard = Object.assign(FileEmptyCardComponent, {
-  Icon: FileEmptyCardIcon,
-  Text: FileEmptyCardText,
+    Icon: FileEmptyCardIcon,
+    Text: FileEmptyCardText,
 });
 exports.default = exports.FileEmptyCard;

package/cjs/core/FileUpload/FileUpload.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileUpload = 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 React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
 /**
  * File upload component to be wrapped around `FileUploadCard` or any arbitrary component.
  * Provides support for dragging and dropping multiple files.
@@ -17,87 +17,41 @@ const index_js_1 = require('../utils/index.js');
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
 exports.FileUpload = React.forwardRef((props, ref) => {
-  const {
-    dragContent,
-    children,
-    onFileDropped,
-    className,
-    contentProps,
-    ...rest
-  } = props;
-  const [isDragActive, setIsDragActive] = React.useState(false);
-  const fileUploadRef = React.useRef(null);
-  const refs = (0, index_js_1.useMergedRefs)(fileUploadRef, ref);
-  const onDragOverHandler = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  const onDragEnterHandler = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    // only set active if a file is dragged over
-    if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file') {
-      setIsDragActive(true);
-    }
-  };
-  const onDragLeaveHandler = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    // only set inactive if secondary target is outside the component
-    if (isDragActive && !fileUploadRef.current?.contains(e.relatedTarget)) {
-      setIsDragActive(false);
-    }
-  };
-  const onDropHandler = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (isDragActive) {
-      setIsDragActive(false);
-      onFileDropped(e.dataTransfer?.files);
-    }
-  };
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        'iui-file-upload',
-        { 'iui-drag': isDragActive },
-        className,
-      ),
-      onDragEnter: onDragEnterHandler,
-      onDragOver: onDragOverHandler,
-      onDragLeave: onDragLeaveHandler,
-      onDrop: onDropHandler,
-      ref: refs,
-      ...rest,
-    },
-    dragContent
-      ? children
-      : React.createElement(
-          index_js_1.Box,
-          {
-            as: 'div',
-            ...contentProps,
-            className: (0, classnames_1.default)(
-              'iui-content',
-              contentProps?.className,
-            ),
-          },
-          children,
-        ),
-    dragContent &&
-      React.createElement(
-        index_js_1.Box,
-        {
-          as: 'div',
-          ...contentProps,
-          className: (0, classnames_1.default)(
-            'iui-content',
-            contentProps?.className,
-          ),
-        },
-        dragContent,
-      ),
-  );
+    const { dragContent, children, onFileDropped, className, contentProps, ...rest } = props;
+    const [isDragActive, setIsDragActive] = React.useState(false);
+    const fileUploadRef = React.useRef(null);
+    const refs = (0, index_js_1.useMergedRefs)(fileUploadRef, ref);
+    const onDragOverHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const onDragEnterHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // only set active if a file is dragged over
+        if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file') {
+            setIsDragActive(true);
+        }
+    };
+    const onDragLeaveHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // only set inactive if secondary target is outside the component
+        if (isDragActive &&
+            !fileUploadRef.current?.contains(e.relatedTarget)) {
+            setIsDragActive(false);
+        }
+    };
+    const onDropHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDragActive) {
+            setIsDragActive(false);
+            onFileDropped(e.dataTransfer?.files);
+        }
+    };
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-upload', { 'iui-drag': isDragActive }, className), onDragEnter: onDragEnterHandler, onDragOver: onDragOverHandler, onDragLeave: onDragLeaveHandler, onDrop: onDropHandler, ref: refs, ...rest },
+        dragContent ? (children) : (React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-content', contentProps?.className) }, children)),
+        dragContent && (React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-content', contentProps?.className) }, dragContent))));
 });
 exports.default = exports.FileUpload;

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;