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

package/esm/core/FileUpload/FileUploadCard.js

@@ -1,182 +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),
-});
-let FileUploadCardInfo = polymorphic.span('iui-file-card-text');
-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,
-  );
-});
-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,
-  );
-});
-let FileUploadCardAction = polymorphic.div('iui-file-card-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,
-  );
-});
-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,
-  );
-});
-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,
-});
-export const FileUploadCardContext = React.createContext(void 0);

package/esm/core/FileUpload/FileUploadTemplate.d.ts

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type FileUploadTemplateProps = {
-    /**
-     * Callback fired when a file is selected from the device.
-     */
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    /**
-     * Whether the file input accepts multiple files.
-     * Passed to the `multiple` attribute of native file input.
-     * @default true
-     */
-    acceptMultiple?: boolean;
-    /**
-     * File types allowed.
-     * Passed to the `accept` attribute of native file input.
-     */
-    acceptType?: string;
-    /**
-     * Localized version of primary clickable label. Gets styled like a hyperlink.
-     * @default 'Choose a file'
-     */
-    label?: React.ReactNode;
-    /**
-     * Localized version of the secondary text shown below the label.
-     * @default 'or drag & drop it here.'
-     */
-    subtitle?: React.ReactNode;
-    /**
-     * Optional children appended to the template.
-     */
-    children?: React.ReactNode;
-};
-/**
- * @deprecated Use [`FileUploadCard`](https://itwinui.bentley.com/docs/fileupload#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 declare const FileUploadTemplate: PolymorphicForwardRefComponent<"div", FileUploadTemplateProps>;
-export {};

package/esm/core/FileUpload/FileUploadTemplate.js

@@ -1,51 +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,
-    ),
-  );
-});

package/esm/core/Flex/Flex.d.ts

@@ -1,138 +0,0 @@
-import * as React from 'react';
-import type { AnyString } from '../../utils/types.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/props.js';
-declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
-/**
- * String literal shorthands that correspond to the size tokens in [itwinui-variables](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/src/sizes.scss).
- */
-type SizeToken = (typeof sizeTokens)[number];
-type FlexOwnProps = {
-    /**
-     * Value of the `display` property.
-     * @default 'flex'
-     */
-    display?: 'flex' | 'inline-flex';
-    /**
-     * Value of the `justify-content` property.
-     * @default 'flex-start'
-     */
-    justifyContent?: React.CSSProperties['justifyContent'];
-    /**
-     * Value of the `align-items` property. Defaults to 'center' but you
-     * might want to use 'flex-start' in some cases.
-     * @default 'center'
-     */
-    alignItems?: React.CSSProperties['alignItems'];
-    /**
-     * Value of the `gap` property.
-     *
-     * Supports aliases for iTwinUI size tokens:
-     * 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl
-     *
-     * Also accepts any valid css value (e.g. "1rem" or "2px")
-     *
-     * @default 'xs'
-     */
-    gap?: SizeToken | AnyString;
-    /**
-     * Value of the `direction` property.
-     * @default 'row'
-     */
-    flexDirection?: React.CSSProperties['flexDirection'];
-    /**
-     * Value of the `flex-wrap` property.
-     * @default 'nowrap'
-     */
-    flexWrap?: React.CSSProperties['flexWrap'];
-};
-type FlexSpacerOwnProps = {
-    /**
-     * Value of the `flex` css property.
-     *
-     * This may need to be adjusted if you're also setting `flex` on
-     * other `Flex.Item`s.
-     *
-     * @default 999
-     */
-    flex?: React.CSSProperties['flex'];
-};
-type FlexItemOwnProps = {
-    /**
-     * Gap before the flex item, if different from the `gap` set on `Flex` component.
-     */
-    gapBefore?: SizeToken | AnyString;
-    /**
-     * Gap after the flex item, if different from the `gap` set on `Flex` component.
-     */
-    gapAfter?: SizeToken | AnyString;
-    /**
-     * Value of the `flex` css property.
-     * @default 'auto'
-     */
-    flex?: React.CSSProperties['flex'];
-    /**
-     * Value of the `align-self` css property.
-     * @default 'auto'
-     */
-    alignSelf?: React.CSSProperties['alignSelf'];
-};
-/**
- * A utility component that makes it easier to work with CSS flexbox
- * and iTwinUI design tokens. Supports all flex properties.
- * Can be used with or without `Flex.Item` and `Flex.Spacer` subcomponents.
- *
- * @example
- * <Flex>
- *   <Icon>...</Icon>
- *   <Text>...</Text>
- *   <Flex.Spacer />
- *   <IconButton>...</IconButton>
- * </Flex>
- *
- * @example
- * <Flex gap='m' flexWrap='wrap'>
- *   <Flex.Item>...</Flex.Item>
- *   <Flex.Item>...</Flex.Item>
- *   ...
- * </Flex>
- *
- * @example
- * <Flex gap='l'>
- *   <Flex.Item>...</Flex.Item>
- *   <Flex.Item>...</Flex.Item>
- *   <Flex.Item gapBefore='s'>...</Flex.Item>
- *   <Flex.Item>...</Flex.Item>
- * </Flex>
- */
-export declare const Flex: PolymorphicForwardRefComponent<"div", FlexOwnProps> & {
-    /**
-     * 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: PolymorphicForwardRefComponent<"div", FlexItemOwnProps>;
-    /**
-     * 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: PolymorphicForwardRefComponent<"div", FlexSpacerOwnProps>;
-};
-export {};

package/esm/core/Flex/Flex.js

@@ -1,74 +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,
-  });
-});
-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,
-  });
-});
-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,
-  });
-});
-export const Flex = Object.assign(FlexComponent, {
-  Item: FlexItem,
-  Spacer: FlexSpacer,
-});

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

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import type { CommonProps } from '../../utils/index.js';
-export type TitleTranslations = {
-    termsOfService?: string;
-    privacy?: string;
-    termsOfUse?: string;
-    cookies?: string;
-    legalNotices?: string;
-};
-type FooterProps = {
-    /**
-     * Customize footer elements.
-     * Providing a `FooterElement[]` will append the custom elements to the end of the default elements.
-     * Providing a function that returns a `FooterElement[]` allows further customization - whatever is returned from the function is displayed in the footer with no amendments.
-     */
-    customElements?: FooterElement[] | ((defaultElements: FooterElement[]) => FooterElement[]);
-    /**
-     * Provide localized strings.
-     */
-    translatedTitles?: TitleTranslations;
-    /**
-     * Custom footer content. If provided, it will render only what you passed.
-     * Use `defaultFooterElements` to get the default footer elements.
-     */
-    children?: React.ReactNode;
-} & CommonProps;
-export type FooterElement = {
-    /**
-     * Title of the footer element.
-     */
-    title: string;
-    /**
-     * URL of the footer element.
-     */
-    url?: string;
-    /**
-     * Key of the footer element.
-     */
-    key?: keyof TitleTranslations | 'copyright' | (string & Record<never, never>);
-};
-export declare const defaultFooterElements: FooterElement[];
-/**
- * Footer element with all needed legal and info links.
- * Be sure to place it manually at the bottom of your page.
- * You can use position 'absolute' with relative body or set the height of the content and place footer at the end.
- * @example <caption>Appending custom element after default elements</caption>
- * <Footer customElements={[{title: 'Bentley', url: 'https://www.bentley.com/'}]} />
- * @example <caption>Returning only custom elements</caption>
- * <Footer customElements={() => newFooterElements)} />
- * @example <caption>Filtering out a specific element</caption>
- * <Footer customElements={(defaultElements) => defaultElements.filter(({ key }) => key !== 'privacy' )} />
- * @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) => React.JSX.Element) & {
-    List: import("../../utils/props.js").PolymorphicForwardRefComponent<"ul", {}>;
-    Item: import("../../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
-    Separator: import("../../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
-};
-export {};

package/esm/core/Footer/Footer.js

@@ -1,114 +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,
-  },
-);

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

@@ -1,4 +0,0 @@
-/**
- * Footer item. Recommended to use inside `Footer.List`.
- */
-export declare const FooterItem: import("../../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;

package/esm/core/Footer/FooterItem.js

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

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

@@ -1,4 +0,0 @@
-/**
- * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
- */
-export declare const FooterList: import("../../utils/props.js").PolymorphicForwardRefComponent<"ul", {}>;

package/esm/core/Footer/FooterList.js

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

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

@@ -1,4 +0,0 @@
-/**
- * Footer separator. Recommended to use inside `Footer.List`.
- */
-export declare const FooterSeparator: import("../../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;

package/esm/core/Footer/FooterSeparator.js

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