@itwin/itwinui-react 3.11.3 → 3.12.0

package/cjs/core/Flex/Flex.js

@@ -1,156 +1,92 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Flex = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Box_js_1 = require("../../utils/components/Box.js");
-const sizeTokens = [
-    '3xs',
-    '2xs',
-    'xs',
-    's',
-    'm',
-    'l',
-    'xl',
-    '2xl',
-    '3xl',
-];
+Object.defineProperty(exports, 'Flex', {
+  enumerable: true,
+  get: function () {
+    return Flex;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _Box = 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 FlexComponent = _react.forwardRef((props, ref) => {
+  const {
+    display,
+    flexDirection,
+    justifyContent,
+    alignItems,
+    gap,
+    flexWrap,
+    className,
+    style,
+    ...rest
+  } = props;
+  return (0, _jsxruntime.jsx)(_Box.Box, {
+    className: (0, _classnames.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 FlexSpacer = _react.forwardRef((props, ref) => {
+  const { flex, className, style, ...rest } = props;
+  return (0, _jsxruntime.jsx)(_Box.Box, {
+    className: (0, _classnames.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 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 (0, _jsxruntime.jsx)(_Box.Box, {
+    className: (0, _classnames.default)('iui-flex-item', className),
+    ref: ref,
+    style: _style,
+    ...rest,
+  });
 });
 FlexItem.displayName = 'Flex.Item';
-// ----------------------------------------------------------------------------
-// Exported compound component
-/**
- * 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>
- */
-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,
+const Flex = Object.assign(FlexComponent, {
+  Item: FlexItem,
+  Spacer: FlexSpacer,
 });

package/cjs/core/Footer/Footer.d.ts

@@ -52,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) => React.JSX.Element) & {
+export declare const Footer: ((props: FooterProps) => import("react/jsx-runtime").JSX.Element) & {
     List: import("../../utils/props.js").PolymorphicForwardRefComponent<"ul", {}>;
     Item: import("../../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
     Separator: import("../../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;

package/cjs/core/Footer/Footer.js

@@ -1,121 +1,133 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Footer = exports.defaultFooterElements = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../utils/index.js");
-const FooterItem_js_1 = require("./FooterItem.js");
-const FooterSeparator_js_1 = require("./FooterSeparator.js");
-const FooterList_js_1 = require("./FooterList.js");
-const Anchor_js_1 = require("../Typography/Anchor.js");
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  Footer: function () {
+    return Footer;
+  },
+  defaultFooterElements: function () {
+    return defaultFooterElements;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.js');
+const _FooterItem = require('./FooterItem.js');
+const _FooterSeparator = require('./FooterSeparator.js');
+const _FooterList = require('./FooterList.js');
+const _Anchor = require('../Typography/Anchor.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',
 };
-exports.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',
-    },
+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',
+  },
 ];
-/**
- * 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 }))} />
- */
-exports.Footer = Object.assign((props) => {
-    const { children, customElements, translatedTitles, className, ...rest } = props;
-    const titles = { ...footerTranslations, ...translatedTitles };
-    const translatedElements = exports.defaultFooterElements.map((element) => {
-        if (element.key && titles.hasOwnProperty(element.key)) {
-            const key = element.key;
-            return {
-                ...element,
-                title: titles[key],
-            };
-        }
-        return element;
+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;
     });
     let elements = translatedElements;
     if (customElements) {
-        elements =
-            typeof customElements === 'function'
-                ? customElements(translatedElements)
-                : [...translatedElements, ...customElements];
+      elements =
+        typeof customElements === 'function'
+          ? customElements(translatedElements)
+          : [...translatedElements, ...customElements];
     }
-    return (React.createElement(index_js_1.Box, { as: 'footer', className: (0, classnames_1.default)('iui-legal-footer', className), ...rest }, children ? (children) : (React.createElement(FooterList_js_1.FooterList, null, elements.map((element, index) => {
-        return (React.createElement(React.Fragment, { key: element.key || `${element.title}-${index}` },
-            index > 0 && React.createElement(FooterSeparator_js_1.FooterSeparator, null),
-            React.createElement(FooterItem_js_1.FooterItem, null, element.url ? (React.createElement(Anchor_js_1.Anchor, { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));
-    })))));
-}, {
-    List: FooterList_js_1.FooterList,
-    Item: FooterItem_js_1.FooterItem,
-    Separator: FooterSeparator_js_1.FooterSeparator,
-});
+    return (0, _jsxruntime.jsx)(_index.Box, {
+      as: 'footer',
+      className: (0, _classnames.default)('iui-legal-footer', className),
+      ...rest,
+      children: children
+        ? children
+        : (0, _jsxruntime.jsx)(_FooterList.FooterList, {
+            children: elements.map((element, index) => {
+              return (0, _jsxruntime.jsxs)(
+                _react.Fragment,
+                {
+                  children: [
+                    index > 0 &&
+                      (0, _jsxruntime.jsx)(
+                        _FooterSeparator.FooterSeparator,
+                        {},
+                      ),
+                    (0, _jsxruntime.jsx)(_FooterItem.FooterItem, {
+                      children: element.url
+                        ? (0, _jsxruntime.jsx)(_Anchor.Anchor, {
+                            href: element.url,
+                            target: '_blank',
+                            rel: 'noreferrer',
+                            children: element.title,
+                          })
+                        : element.title,
+                    }),
+                  ],
+                },
+                element.key || `${element.title}-${index}`,
+              );
+            }),
+          }),
+    });
+  },
+  {
+    List: _FooterList.FooterList,
+    Item: _FooterItem.FooterItem,
+    Separator: _FooterSeparator.FooterSeparator,
+  },
+);

package/cjs/core/Footer/FooterItem.js

@@ -1,12 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FooterItem = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require("../../utils/index.js");
-/**
- * Footer item. Recommended to use inside `Footer.List`.
- */
-exports.FooterItem = index_js_1.polymorphic.li('iui-legal-footer-item');
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'FooterItem', {
+  enumerable: true,
+  get: function () {
+    return FooterItem;
+  },
+});
+const _index = require('../../utils/index.js');
+const FooterItem = _index.polymorphic.li('iui-legal-footer-item');

package/cjs/core/Footer/FooterList.js

@@ -1,12 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FooterList = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require("../../utils/index.js");
-/**
- * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
- */
-exports.FooterList = index_js_1.polymorphic.ul('iui-legal-footer-list');
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'FooterList', {
+  enumerable: true,
+  get: function () {
+    return FooterList;
+  },
+});
+const _index = require('../../utils/index.js');
+const FooterList = _index.polymorphic.ul('iui-legal-footer-list');

package/cjs/core/Footer/FooterSeparator.js

@@ -1,14 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FooterSeparator = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require("../../utils/index.js");
-/**
- * Footer separator. Recommended to use inside `Footer.List`.
- */
-exports.FooterSeparator = index_js_1.polymorphic.li('iui-legal-footer-separator', {
-    'aria-hidden': true,
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'FooterSeparator', {
+  enumerable: true,
+  get: function () {
+    return FooterSeparator;
+  },
+});
+const _index = require('../../utils/index.js');
+const FooterSeparator = _index.polymorphic.li('iui-legal-footer-separator', {
+  'aria-hidden': true,
 });