@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/FileUpload/FileUploadCard.js

@@ -3,27 +3,36 @@
  * 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, VisuallyHidden, } from '../utils/index.js';
+import {
+  getWindow,
+  SvgDocument,
+  useMergedRefs,
+  useSafeContext,
+  useId,
+  mergeEventHandlers,
+  polymorphic,
+  Box,
+  VisuallyHidden,
+} from '../utils/index.js';
 import cx from 'classnames';
 import { FileEmptyCard } from './FileEmptyCard.js';
 import { Anchor } from '../Typography/Anchor/Anchor.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 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';
 // ----------------------------------------------------------------------------
@@ -33,24 +42,44 @@ 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 !== null && children !== void 0 ? 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 !== null && children !== void 0 ? 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';
 // ----------------------------------------------------------------------------
@@ -60,62 +89,109 @@ 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) => {
-        var _a;
-        if (!node || !((_a = getWindow()) === null || _a === void 0 ? void 0 : _a.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', onChange: mergeEventHandlers(onChange, (e) => {
-                const _files = Array.from(e.currentTarget.files || []);
-                onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
-                setInternalFiles(_files);
-            }), ref: refs, id: id !== null && id !== void 0 ? 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) => {
-    var _a;
-    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 = (_a = filesProp !== null && filesProp !== void 0 ? filesProp : internalFiles) !== null && _a !== void 0 ? _a : [];
-    return (React.createElement(FileUploadCardContext.Provider, { value: {
-            files,
-            onFilesChange,
-            setInternalFiles,
-            inputId,
-            setInputId,
-        } },
-        (files === null || files === void 0 ? void 0 : files.length) ? (React.createElement(Box, { className: cx('iui-file-card', className), ref: ref, ...rest }, children !== null && children !== void 0 ? 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 !== null && input !== void 0 ? 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.
@@ -142,13 +218,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.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
-declare type FileUploadTemplateProps = {
+type FileUploadTemplateProps = {
     /**
      * Callback fired when a file is selected from the device.
      */
@@ -33,6 +32,7 @@ declare type FileUploadTemplateProps = {
     children?: React.ReactNode;
 };
 /**
+ * @deprecated Use `FileUploadCard` instead.
  * Default template to be used with the `FileUpload` wrapper component.
  * Contains a hidden input with styled labels (customizable).
  * @example

package/esm/core/FileUpload/FileUploadTemplate.js

@@ -5,23 +5,51 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgUpload, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 import { Anchor } from '../Typography/Anchor/Anchor.js';
 /**
+ * @deprecated Use `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 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/Footer/Footer.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
-export declare type TitleTranslations = {
+export type TitleTranslations = {
     termsOfService: string;
     privacy: string;
     termsOfUse: string;
     cookies: string;
     legalNotices: string;
 };
-declare type FooterProps = {
+type FooterProps = {
     /**
      * Customize footer elements.
      * Providing a `FooterElement[]` will append the custom elements to the end of the default elements.
@@ -25,7 +24,7 @@ declare type FooterProps = {
      */
     children?: React.ReactNode;
 } & CommonProps;
-export declare type FooterElement = {
+export type FooterElement = {
     /**
      * Title of the footer element.
      */
@@ -53,7 +52,7 @@ export declare const defaultFooterElements: FooterElement[];
  * @example <caption>Changing a url</caption>
  * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
-export declare const Footer: ((props: FooterProps) => JSX.Element) & {
+export declare const Footer: ((props: FooterProps) => React.JSX.Element) & {
     List: import("../utils/props.js").PolymorphicForwardRefComponent<"ul", {}>;
     Item: import("../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
     Separator: import("../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;

package/esm/core/Footer/Footer.js

@@ -5,47 +5,46 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 import { FooterItem } from './FooterItem.js';
 import { FooterSeparator } from './FooterSeparator.js';
 import { FooterList } from './FooterList.js';
 const footerTranslations = {
-    cookies: 'Cookies',
-    legalNotices: 'Legal notices',
-    privacy: 'Privacy',
-    termsOfService: 'Terms of service',
-    termsOfUse: 'Terms of use',
+  cookies: 'Cookies',
+  legalNotices: 'Legal notices',
+  privacy: 'Privacy',
+  termsOfService: 'Terms of service',
+  termsOfUse: 'Terms of use',
 };
 export const defaultFooterElements = [
-    {
-        key: 'copyright',
-        title: `© ${new Date().getFullYear()} Bentley Systems, Incorporated`,
-    },
-    {
-        key: 'termsOfService',
-        title: footerTranslations.termsOfService,
-        url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
-    },
-    {
-        key: 'privacy',
-        title: footerTranslations.privacy,
-        url: 'https://www.bentley.com/en/privacy-policy',
-    },
-    {
-        key: 'termsOfUse',
-        title: footerTranslations.termsOfUse,
-        url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
-    },
-    {
-        key: 'cookies',
-        title: footerTranslations.cookies,
-        url: 'https://www.bentley.com/en/cookie-policy',
-    },
-    {
-        key: 'legalNotices',
-        title: footerTranslations.legalNotices,
-        url: 'https://connect.bentley.com/Legal',
-    },
+  {
+    key: 'copyright',
+    title: `© ${new Date().getFullYear()} Bentley Systems, Incorporated`,
+  },
+  {
+    key: 'termsOfService',
+    title: footerTranslations.termsOfService,
+    url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
+  },
+  {
+    key: 'privacy',
+    title: footerTranslations.privacy,
+    url: 'https://www.bentley.com/en/privacy-policy',
+  },
+  {
+    key: 'termsOfUse',
+    title: footerTranslations.termsOfUse,
+    url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
+  },
+  {
+    key: 'cookies',
+    title: footerTranslations.cookies,
+    url: 'https://www.bentley.com/en/cookie-policy',
+  },
+  {
+    key: 'legalNotices',
+    title: footerTranslations.legalNotices,
+    url: 'https://connect.bentley.com/Legal',
+  },
 ];
 /**
  * Footer element with all needed legal and info links.
@@ -60,34 +59,65 @@ export const defaultFooterElements = [
  * @example <caption>Changing a url</caption>
  * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
-export const Footer = Object.assign((props) => {
-    const { children, customElements, translatedTitles, className, ...rest } = props;
+export const Footer = Object.assign(
+  (props) => {
+    const { children, customElements, translatedTitles, className, ...rest } =
+      props;
     const titles = { ...footerTranslations, ...translatedTitles };
     const translatedElements = defaultFooterElements.map((element) => {
-        if (element.key && titles.hasOwnProperty(element.key)) {
-            const key = element.key;
-            return {
-                ...element,
-                title: titles[key],
-            };
-        }
-        return element;
+      if (element.key && titles.hasOwnProperty(element.key)) {
+        const key = element.key;
+        return {
+          ...element,
+          title: titles[key],
+        };
+      }
+      return element;
     });
     let elements = translatedElements;
     if (customElements) {
-        elements =
-            typeof customElements === 'function'
-                ? customElements(translatedElements)
-                : [...translatedElements, ...customElements];
+      elements =
+        typeof customElements === 'function'
+          ? customElements(translatedElements)
+          : [...translatedElements, ...customElements];
     }
-    return (React.createElement(Box, { as: 'footer', className: cx('iui-legal-footer', className), ...rest }, children ? (children) : (React.createElement(FooterList, null, elements.map((element, index) => {
-        return (React.createElement(React.Fragment, { key: element.key || `${element.title}-${index}` },
-            index > 0 && React.createElement(FooterSeparator, null),
-            React.createElement(FooterItem, null, element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));
-    })))));
-}, {
+    return React.createElement(
+      Box,
+      { as: 'footer', className: cx('iui-legal-footer', className), ...rest },
+      children
+        ? children
+        : React.createElement(
+            FooterList,
+            null,
+            elements.map((element, index) => {
+              return React.createElement(
+                React.Fragment,
+                { key: element.key || `${element.title}-${index}` },
+                index > 0 && React.createElement(FooterSeparator, null),
+                React.createElement(
+                  FooterItem,
+                  null,
+                  element.url
+                    ? React.createElement(
+                        'a',
+                        {
+                          href: element.url,
+                          target: '_blank',
+                          rel: 'noreferrer',
+                        },
+                        element.title,
+                      )
+                    : element.title,
+                ),
+              );
+            }),
+          ),
+    );
+  },
+  {
     List: FooterList,
     Item: FooterItem,
     Separator: FooterSeparator,
-});
+  },
+);
 export default Footer;

package/esm/core/Footer/FooterItem.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer item. Recommended to use inside `Footer.List`.
  */

package/esm/core/Footer/FooterItem.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer item. Recommended to use inside `Footer.List`.
  */

package/esm/core/Footer/FooterList.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */

package/esm/core/Footer/FooterList.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */

package/esm/core/Footer/FooterSeparator.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer separator. Recommended to use inside `Footer.List`.
  */

package/esm/core/Footer/FooterSeparator.js

@@ -3,11 +3,10 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer separator. Recommended to use inside `Footer.List`.
  */
 export const FooterSeparator = polymorphic.li('iui-legal-footer-separator', {
-    'aria-hidden': true,
+  'aria-hidden': true,
 });
 export default FooterSeparator;