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

package/DEV-esm/core/FileUpload/FileUploadCard.js

@@ -1,191 +0,0 @@
-import * as React from 'react';
-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';
-let toBytes = (bytes) => {
-  let units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
-  let i = 0;
-  while (bytes >= 1024 && ++i) bytes /= 1024;
-  return bytes.toFixed(bytes < 10 && i > 0 ? 2 : 0) + units[i];
-};
-let toDate = (dateNumber) => {
-  let date = new Date(dateNumber);
-  return date.toDateString() + ' ' + date.toLocaleTimeString();
-};
-let FileUploadCardIcon = polymorphic.span('iui-file-card-icon', {
-  children: React.createElement(SvgDocument, null),
-});
-FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
-let FileUploadCardInfo = polymorphic.span('iui-file-card-text');
-FileUploadCardInfo.displayName = 'FileUploadCard.Info';
-let FileUploadCardTitle = React.forwardRef((props, ref) => {
-  let { children, className, ...rest } = props;
-  let { files } = useSafeContext(FileUploadCardContext);
-  let 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';
-let FileUploadCardDescription = React.forwardRef((props, ref) => {
-  let { children, className, ...rest } = props;
-  let { 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';
-let FileUploadCardAction = polymorphic.div('iui-file-card-action');
-FileUploadCardAction.displayName = 'FileUploadCard.Action';
-let FileUploadCardInputLabel = React.forwardRef((props, ref) => {
-  let { children, ...rest } = props;
-  let { inputId } = useSafeContext(FileUploadCardContext);
-  return React.createElement(
-    Anchor,
-    {
-      as: 'label',
-      ref: ref,
-      htmlFor: inputId,
-      ...rest,
-    },
-    children,
-  );
-});
-FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
-let FileUploadCardInput = React.forwardRef((props, ref) => {
-  let { children, onChange, id, ...rest } = props;
-  let { files, onFilesChange, setInternalFiles, inputId, setInputId } =
-    useSafeContext(FileUploadCardContext);
-  let setNativeFilesRef = React.useCallback(
-    (node) => {
-      if (!node || !getWindow()?.DataTransfer) return;
-      let dataTransfer = new DataTransfer();
-      dataTransfer.items.clear();
-      Array.from(files).forEach((file) => dataTransfer.items.add(file));
-      node.files = dataTransfer.files;
-    },
-    [files],
-  );
-  let refs = 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) => {
-        let _files = Array.from(e.currentTarget.files || []);
-        onFilesChange?.(_files);
-        setInternalFiles(_files);
-      }),
-      ref: refs,
-      id: id ?? inputId,
-      ...rest,
-    }),
-    children,
-  );
-});
-FileUploadCardInput.displayName = 'FileUploadCard.Input';
-let FileUploadCardComponent = React.forwardRef((props, ref) => {
-  let {
-    className,
-    children,
-    files: filesProp,
-    onFilesChange,
-    emptyCard = React.createElement(FileEmptyCard, null),
-    input,
-    ...rest
-  } = props;
-  let [internalFiles, setInternalFiles] = React.useState();
-  let uid = useId();
-  let [inputId, setInputId] = React.useState(uid);
-  let files = filesProp ?? internalFiles ?? [];
-  return React.createElement(
-    FileUploadCardContext.Provider,
-    {
-      value: {
-        files,
-        onFilesChange,
-        setInternalFiles,
-        inputId,
-        setInputId,
-      },
-    },
-    files?.length
-      ? React.createElement(
-          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),
-  );
-});
-export const FileUploadCard = Object.assign(FileUploadCardComponent, {
-  Icon: FileUploadCardIcon,
-  Info: FileUploadCardInfo,
-  Title: FileUploadCardTitle,
-  Description: FileUploadCardDescription,
-  Action: FileUploadCardAction,
-  InputLabel: FileUploadCardInputLabel,
-  Input: FileUploadCardInput,
-});
-FileUploadCard.displayName = 'FileUploadCard';
-export const FileUploadCardContext = React.createContext(void 0);
-FileUploadCardContext.displayName = 'FileUploadCardContext';

package/DEV-esm/core/FileUpload/FileUploadTemplate.js

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { SvgUpload, Box } from '../../utils/index.js';
-import { Anchor } from '../Typography/Anchor.js';
-export const FileUploadTemplate = React.forwardRef((props, ref) => {
-  let {
-    onChange,
-    acceptMultiple = true,
-    acceptType,
-    label = 'Choose a file',
-    subtitle = 'or drag & drop it here.',
-    children,
-    className,
-    ...rest
-  } = props;
-  return React.createElement(
-    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,
-    ),
-  );
-});
-FileUploadTemplate.displayName = 'FileUploadTemplate';

package/DEV-esm/core/Flex/Flex.js

@@ -1,77 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box } from '../../utils/components/Box.js';
-let sizeTokens = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
-let getValueForToken = (token) => {
-  if (sizeTokens.includes(token)) return `var(--iui-size-${token})`;
-  return token;
-};
-let FlexComponent = React.forwardRef((props, ref) => {
-  let {
-    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';
-let FlexSpacer = React.forwardRef((props, ref) => {
-  let { 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';
-let FlexItem = React.forwardRef((props, ref) => {
-  let { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } =
-    props;
-  let _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),
-    ...(void 0 !== gapBefore && {
-      '--iui-flex-item-gap-before-toggle': 'var(--iui-on)',
-    }),
-    ...(void 0 !== gapAfter && {
-      '--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';
-export const Flex = Object.assign(FlexComponent, {
-  Item: FlexItem,
-  Spacer: FlexSpacer,
-});

package/DEV-esm/core/Footer/Footer.js

@@ -1,115 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box } from '../../utils/index.js';
-import { FooterItem } from './FooterItem.js';
-import { FooterSeparator } from './FooterSeparator.js';
-import { FooterList } from './FooterList.js';
-import { Anchor } from '../Typography/Anchor.js';
-let defaultTranslatedTitles = {
-  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: defaultTranslatedTitles.termsOfService,
-    url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
-  },
-  {
-    key: 'privacy',
-    title: defaultTranslatedTitles.privacy,
-    url: 'https://www.bentley.com/en/privacy-policy',
-  },
-  {
-    key: 'termsOfUse',
-    title: defaultTranslatedTitles.termsOfUse,
-    url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
-  },
-  {
-    key: 'cookies',
-    title: defaultTranslatedTitles.cookies,
-    url: 'https://www.bentley.com/en/cookie-policy',
-  },
-  {
-    key: 'legalNotices',
-    title: defaultTranslatedTitles.legalNotices,
-    url: 'https://connect.bentley.com/Legal',
-  },
-];
-export const Footer = Object.assign(
-  (props) => {
-    let { children, customElements, translatedTitles, className, ...rest } =
-      props;
-    let titles = {
-      ...defaultTranslatedTitles,
-      ...translatedTitles,
-    };
-    let translatedElements = defaultFooterElements.map((element) => {
-      if (element.key && titles.hasOwnProperty(element.key)) {
-        let key = element.key;
-        return {
-          ...element,
-          title: titles[key],
-        };
-      }
-      return element;
-    });
-    let elements = translatedElements;
-    if (customElements)
-      elements =
-        'function' == typeof customElements
-          ? 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) =>
-              React.createElement(
-                React.Fragment,
-                {
-                  key: element.key || `${element.title}-${index}`,
-                },
-                index > 0 && React.createElement(FooterSeparator, null),
-                React.createElement(
-                  FooterItem,
-                  null,
-                  element.url
-                    ? React.createElement(
-                        Anchor,
-                        {
-                          href: element.url,
-                          target: '_blank',
-                          rel: 'noreferrer',
-                        },
-                        element.title,
-                      )
-                    : element.title,
-                ),
-              ),
-            ),
-          ),
-    );
-  },
-  {
-    List: FooterList,
-    Item: FooterItem,
-    Separator: FooterSeparator,
-  },
-);
-Footer.displayName = 'Footer';

package/DEV-esm/core/Footer/FooterItem.js

@@ -1,3 +0,0 @@
-import { polymorphic } from '../../utils/index.js';
-export const FooterItem = polymorphic.li('iui-legal-footer-item');
-FooterItem.displayName = 'Footer.Item';

package/DEV-esm/core/Footer/FooterList.js

@@ -1,3 +0,0 @@
-import { polymorphic } from '../../utils/index.js';
-export const FooterList = polymorphic.ul('iui-legal-footer-list');
-FooterList.displayName = 'Footer.List';

package/DEV-esm/core/Footer/FooterSeparator.js

@@ -1,5 +0,0 @@
-import { polymorphic } from '../../utils/index.js';
-export const FooterSeparator = polymorphic.li('iui-legal-footer-separator', {
-  'aria-hidden': true,
-});
-FooterSeparator.displayName = 'Footer.Separator';

package/DEV-esm/core/Header/Header.js

@@ -1,80 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { IconButton } from '../Buttons/IconButton.js';
-import { SvgMoreVertical, Box } from '../../utils/index.js';
-import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
-let defaultTranslations = {
-  moreOptions: 'More options',
-};
-export const Header = React.forwardRef((props, forwardedRef) => {
-  let {
-    appLogo,
-    breadcrumbs,
-    isSlim = false,
-    actions,
-    menuItems,
-    translatedStrings,
-    className,
-    children,
-    ...rest
-  } = props;
-  let headerTranslations = {
-    ...defaultTranslations,
-    ...translatedStrings,
-  };
-  return React.createElement(
-    Box,
-    {
-      as: 'header',
-      className: cx('iui-page-header', className),
-      'data-iui-size': isSlim ? 'slim' : void 0,
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      {
-        className: 'iui-page-header-left',
-      },
-      appLogo,
-      breadcrumbs &&
-        React.createElement(Box, {
-          className: 'iui-page-header-divider',
-        }),
-      breadcrumbs,
-    ),
-    children &&
-      React.createElement(
-        Box,
-        {
-          className: 'iui-page-header-center',
-        },
-        children,
-      ),
-    React.createElement(
-      Box,
-      {
-        className: 'iui-page-header-right',
-      },
-      actions,
-      menuItems &&
-        React.createElement(
-          DropdownMenu,
-          {
-            menuItems: menuItems,
-          },
-          React.createElement(
-            IconButton,
-            {
-              styleType: 'borderless',
-              'aria-label': headerTranslations.moreOptions,
-            },
-            React.createElement(SvgMoreVertical, {
-              'aria-hidden': true,
-            }),
-          ),
-        ),
-    ),
-  );
-});
-Header.displayName = 'Header';

package/DEV-esm/core/Header/HeaderBasicButton.js

@@ -1,18 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { ButtonBase } from '../../utils/index.js';
-export const HeaderBasicButton = React.forwardRef((props, ref) => {
-  let { className, children, startIcon, endIcon, styleType, size, ...rest } =
-    props;
-  return React.createElement(
-    ButtonBase,
-    {
-      className: cx('iui-header-breadcrumb-button', className),
-      ref: ref,
-      ...rest,
-    },
-    startIcon,
-    children,
-    endIcon,
-  );
-});

package/DEV-esm/core/Header/HeaderBreadcrumbs.js

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { SvgChevronRight, Box } from '../../utils/index.js';
-export const HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
-  let { className, items, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      as: 'nav',
-      'aria-label': 'breadcrumbs',
-      className: cx('iui-breadcrumbs', 'iui-header-breadcrumbs', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      {
-        as: 'ol',
-        className: cx('iui-breadcrumbs-list', 'iui-header-breadcrumbs-list'),
-      },
-      items.reduce(
-        (previous, current, index) => [
-          ...previous,
-          current,
-          index !== items.length - 1 &&
-            React.createElement(
-              Box,
-              {
-                as: 'li',
-                className: 'iui-breadcrumbs-separator',
-                key: index,
-              },
-              React.createElement(SvgChevronRight, {
-                key: `chevron${index}`,
-                'aria-hidden': true,
-                className: 'iui-chevron',
-              }),
-            ),
-        ],
-        [],
-      ),
-    ),
-  );
-});
-HeaderBreadcrumbs.displayName = 'HeaderBreadcrumbs';

package/DEV-esm/core/Header/HeaderButton.js

@@ -1,78 +0,0 @@
-import * as React from 'react';
-import { Box } from '../../utils/index.js';
-import { HeaderSplitButton } from './HeaderSplitButton.js';
-import { HeaderDropdownButton } from './HeaderDropdownButton.js';
-import { HeaderBasicButton } from './HeaderBasicButton.js';
-export const HeaderButton = React.forwardRef((props, ref) => {
-  let {
-    name,
-    description,
-    htmlName,
-    isActive = false,
-    startIcon,
-    menuItems,
-    disabled,
-    ...rest
-  } = props;
-  let buttonProps = {
-    startIcon: startIcon
-      ? React.createElement(
-          Box,
-          {
-            as: 'span',
-            className: 'iui-header-breadcrumb-button-icon',
-            'aria-hidden': true,
-          },
-          startIcon,
-        )
-      : null,
-    children: React.createElement(
-      Box,
-      {
-        as: 'span',
-        className: 'iui-header-breadcrumb-button-text',
-      },
-      React.createElement(
-        Box,
-        {
-          as: 'span',
-          className: 'iui-header-breadcrumb-button-text-label',
-        },
-        name,
-      ),
-      description &&
-        React.createElement(
-          Box,
-          {
-            as: 'span',
-            className: 'iui-header-breadcrumb-button-text-sublabel',
-          },
-          description,
-        ),
-    ),
-    ref: ref,
-    disabled: disabled,
-    name: htmlName,
-    ...(!!menuItems && {
-      menuItems,
-    }),
-    ...rest,
-  };
-  let headerButton =
-    props.menuItems && props.onClick
-      ? React.createElement(HeaderSplitButton, buttonProps)
-      : props.menuItems
-        ? React.createElement(HeaderDropdownButton, buttonProps)
-        : React.createElement(HeaderBasicButton, buttonProps);
-  return React.createElement(
-    Box,
-    {
-      as: 'li',
-      className: 'iui-header-breadcrumb-item',
-      'aria-current': isActive ? 'location' : void 0,
-      'aria-disabled': disabled ? 'true' : void 0,
-    },
-    headerButton,
-  );
-});
-HeaderButton.displayName = 'HeaderButton';