@itwin/itwinui-react 3.11.2 → 3.12.0

package/cjs/core/Select/Select.types-test.js

@@ -0,0 +1,112 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+const _jsxruntime = require('react/jsx-runtime');
+const _react = require('react');
+const _Select = require('./Select.js');
+() => {
+  const ref = (0, _react.useRef)(null);
+  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+    children: (0, _jsxruntime.jsx)(_Select.Select, {
+      options: [
+        {
+          value: 1,
+          label: 'Option 1',
+        },
+        {
+          value: 2,
+          label: 'Option 2',
+        },
+        {
+          value: 3,
+          label: 'Option 3',
+        },
+      ],
+      onChange: (value) => {
+        const returnValue = value;
+        return returnValue;
+      },
+      ref: ref,
+    }),
+  });
+};
+() => {
+  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+    children: (0, _jsxruntime.jsx)(_Select.Select, {
+      options: [
+        {
+          value: 1,
+          label: 'Option 1',
+        },
+        {
+          value: 2,
+          label: 'Option 2',
+        },
+        {
+          value: 3,
+          label: 'Option 3',
+        },
+      ],
+      onChange: (value) => {
+        const returnValue = value;
+        return returnValue;
+      },
+    }),
+  });
+};
+() => {
+  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+    children: (0, _jsxruntime.jsx)(_Select.Select, {
+      options: [
+        {
+          value: '1',
+          label: 'Option 1',
+        },
+        {
+          value: '2',
+          label: 'Option 2',
+        },
+        {
+          value: '3',
+          label: 'Option 3',
+        },
+      ],
+      onChange: (value) => {
+        const returnValue = value;
+        return returnValue;
+      },
+    }),
+  });
+};
+() => {
+  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+    children: (0, _jsxruntime.jsx)(_Select.Select, {
+      label: 'Select Label',
+      options: [
+        {
+          value: 1,
+          label: 'Item #1',
+        },
+      ],
+      onChange: (value) => {
+        const returnValue = value;
+        return returnValue;
+      },
+    }),
+  });
+};
+() => {
+  return (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    children: [
+      (0, _jsxruntime.jsx)(_Select.Select, {
+        styleType: 'borderless',
+        options: [],
+      }),
+      (0, _jsxruntime.jsx)(_Select.Select, {
+        styleType: 'default',
+        options: [],
+      }),
+    ],
+  });
+};

package/cjs/core/Select/SelectTag.js

@@ -1,45 +1,30 @@
-"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.SelectTag = 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 classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../../utils/index.js");
-/**
- * Tag for showing selected value in `Select`.
- * @private
- */
-exports.SelectTag = React.forwardRef((props, forwardedRef) => {
-    const { className, label, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-select-tag', className), ref: forwardedRef, ...rest },
-        React.createElement(index_js_1.Box, { as: 'span', className: 'iui-select-tag-label' }, label)));
+Object.defineProperty(exports, 'SelectTag', {
+  enumerable: true,
+  get: function () {
+    return SelectTag;
+  },
+});
+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 _classnames = _interop_require_default._(require('classnames'));
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const SelectTag = _react.forwardRef((props, forwardedRef) => {
+  const { className, label, ...rest } = props;
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    as: 'span',
+    className: (0, _classnames.default)('iui-select-tag', className),
+    ref: forwardedRef,
+    ...rest,
+    children: (0, _jsxruntime.jsx)(_index.Box, {
+      as: 'span',
+      className: 'iui-select-tag-label',
+      children: label,
+    }),
+  });
 });

package/cjs/core/Select/SelectTagContainer.js

@@ -1,48 +1,36 @@
-"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.SelectTagContainer = 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 SelectTag_js_1 = require("./SelectTag.js");
-/**
- */
-exports.SelectTagContainer = React.forwardRef((props, ref) => {
-    const { tags, className, ...rest } = props;
-    const [containerRef, visibleCount] = (0, index_js_1.useOverflow)(tags);
-    const refs = (0, index_js_1.useMergedRefs)(ref, containerRef);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-select-tag-container', className), ref: refs, ...rest },
-        React.createElement(React.Fragment, null,
-            visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
-            visibleCount < tags.length && (React.createElement(SelectTag_js_1.SelectTag, { label: `+${tags.length - visibleCount + 1} item(s)` })))));
+Object.defineProperty(exports, 'SelectTagContainer', {
+  enumerable: true,
+  get: function () {
+    return SelectTagContainer;
+  },
+});
+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 _SelectTag = require('./SelectTag.js');
+const SelectTagContainer = _react.forwardRef((props, ref) => {
+  const { tags, className, ...rest } = props;
+  const [containerRef, visibleCount] = (0, _index.useOverflow)(tags);
+  const refs = (0, _index.useMergedRefs)(ref, containerRef);
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    className: (0, _classnames.default)('iui-select-tag-container', className),
+    ref: refs,
+    ...rest,
+    children: (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+      children: [
+        visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
+        visibleCount < tags.length &&
+          (0, _jsxruntime.jsx)(_SelectTag.SelectTag, {
+            label: `+${tags.length - visibleCount + 1} item(s)`,
+          }),
+      ],
+    }),
+  });
 });

package/cjs/core/SideNavigation/SideNavigation.js

@@ -1,74 +1,124 @@
-"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.SideNavigation = exports.SidenavExpandedContext = 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 IconButton_js_1 = require("../Buttons/IconButton.js");
-// ----------------------------------------------------------------------------
-exports.SidenavExpandedContext = React.createContext(undefined);
-/**
- * Left side navigation menu component.
- * @example
- * <SideNavigation
- *   items={[
- *     <SidenavButton startIcon={<SvgPlaceholder />}>App 1</SidenavButton>,
- *     <SidenavButton startIcon={<SvgPlaceholder />}>App 2</SidenavButton>,
- *     <SidenavButton startIcon={<SvgPlaceholder />}>App 3</SidenavButton>,
- *   ]}
- *   secondaryItems={[
- *     <SidenavButton startIcon={<SvgSettings />}>Settings</SidenavButton>,
- *   ]}
- * />
- */
-exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
-    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded: isExpandedProp, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
-    const [isExpanded, setIsExpanded] = (0, index_js_1.useControlledState)(false, isExpandedProp);
-    const ExpandButton = (React.createElement(IconButton_js_1.IconButton, { label: 'Toggle icon labels', "aria-expanded": isExpanded, className: 'iui-sidenav-button iui-expand', size: 'small', onClick: React.useCallback(() => {
-            setIsExpanded((expanded) => !expanded);
-            onExpanderClick?.();
-        }, [onExpanderClick, setIsExpanded]) },
-        React.createElement(index_js_1.SvgChevronRight, null)));
-    return (React.createElement(exports.SidenavExpandedContext.Provider, { value: isExpanded },
-        React.createElement(index_js_1.Box, { ...wrapperProps, className: (0, classnames_1.default)('iui-side-navigation-wrapper', wrapperProps?.className), ref: forwardedRef },
-            React.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-side-navigation', {
-                    'iui-expanded': isExpanded,
-                    'iui-collapsed': !isExpanded,
-                }, className), ...rest },
-                expanderPlacement === 'top' && ExpandButton,
-                React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-sidenav-content', contentProps?.className) },
-                    React.createElement(index_js_1.Box, { as: 'div', ...topProps, className: (0, classnames_1.default)('iui-top', topProps?.className) }, items),
-                    React.createElement(index_js_1.Box, { as: 'div', ...bottomProps, className: (0, classnames_1.default)('iui-bottom', bottomProps?.className) }, secondaryItems)),
-                expanderPlacement === 'bottom' && ExpandButton),
-            submenu && (React.createElement(index_js_1.WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu)))));
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  SideNavigation: function () {
+    return SideNavigation;
+  },
+  SidenavExpandedContext: function () {
+    return SidenavExpandedContext;
+  },
+});
+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 _IconButton = require('../Buttons/IconButton.js');
+const SidenavExpandedContext = _react.createContext(undefined);
+const SideNavigation = _react.forwardRef((props, forwardedRef) => {
+  const {
+    items,
+    secondaryItems,
+    expanderPlacement = 'top',
+    className,
+    isExpanded: isExpandedProp,
+    onExpanderClick,
+    submenu,
+    isSubmenuOpen = false,
+    wrapperProps,
+    contentProps,
+    topProps,
+    bottomProps,
+    ...rest
+  } = props;
+  const [isExpanded, setIsExpanded] = (0, _index.useControlledState)(
+    false,
+    isExpandedProp,
+  );
+  const ExpandButton = (0, _jsxruntime.jsx)(_IconButton.IconButton, {
+    label: 'Toggle icon labels',
+    'aria-expanded': isExpanded,
+    className: 'iui-sidenav-button iui-expand',
+    size: 'small',
+    onClick: _react.useCallback(() => {
+      setIsExpanded((expanded) => !expanded);
+      onExpanderClick?.();
+    }, [onExpanderClick, setIsExpanded]),
+    children: (0, _jsxruntime.jsx)(_index.SvgChevronRight, {}),
+  });
+  return (0, _jsxruntime.jsx)(SidenavExpandedContext.Provider, {
+    value: isExpanded,
+    children: (0, _jsxruntime.jsxs)(_index.Box, {
+      ...wrapperProps,
+      className: (0, _classnames.default)(
+        'iui-side-navigation-wrapper',
+        wrapperProps?.className,
+      ),
+      ref: forwardedRef,
+      children: [
+        (0, _jsxruntime.jsxs)(_index.Box, {
+          as: 'div',
+          className: (0, _classnames.default)(
+            'iui-side-navigation',
+            {
+              'iui-expanded': isExpanded,
+              'iui-collapsed': !isExpanded,
+            },
+            className,
+          ),
+          ...rest,
+          children: [
+            expanderPlacement === 'top' && ExpandButton,
+            (0, _jsxruntime.jsxs)(_index.Box, {
+              as: 'div',
+              ...contentProps,
+              className: (0, _classnames.default)(
+                'iui-sidenav-content',
+                contentProps?.className,
+              ),
+              children: [
+                (0, _jsxruntime.jsx)(_index.Box, {
+                  as: 'div',
+                  ...topProps,
+                  className: (0, _classnames.default)(
+                    'iui-top',
+                    topProps?.className,
+                  ),
+                  children: items,
+                }),
+                (0, _jsxruntime.jsx)(_index.Box, {
+                  as: 'div',
+                  ...bottomProps,
+                  className: (0, _classnames.default)(
+                    'iui-bottom',
+                    bottomProps?.className,
+                  ),
+                  children: secondaryItems,
+                }),
+              ],
+            }),
+            expanderPlacement === 'bottom' && ExpandButton,
+          ],
+        }),
+        submenu &&
+          (0, _jsxruntime.jsx)(_index.WithCSSTransition, {
+            in: isSubmenuOpen,
+            dimension: 'width',
+            timeout: 200,
+            classNames: 'iui',
+            children: submenu,
+          }),
+      ],
+    }),
+  });
 });

package/cjs/core/SideNavigation/SidenavButton.js

@@ -1,48 +1,53 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-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.SidenavButton = void 0;
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const Button_js_1 = require("../Buttons/Button.js");
-const Tooltip_js_1 = require("../Tooltip/Tooltip.js");
-const SideNavigation_js_1 = require("./SideNavigation.js");
-/**
- * Wrapper around Button to be used as SideNavigation items.
- * Label is hidden when sidenav is collapsed.
- */
-exports.SidenavButton = React.forwardRef((props, ref) => {
-    const { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
-    const isExpanded = React.useContext(SideNavigation_js_1.SidenavExpandedContext) === true;
-    const sidenavButton = (React.createElement(Button_js_1.Button, { className: (0, classnames_1.default)('iui-sidenav-button', { 'iui-submenu-open': isSubmenuOpen }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
-    return !isExpanded ? (React.createElement(Tooltip_js_1.Tooltip, { content: children, placement: 'right', ariaStrategy: 'none' }, sidenavButton)) : (sidenavButton);
+Object.defineProperty(exports, 'SidenavButton', {
+  enumerable: true,
+  get: function () {
+    return SidenavButton;
+  },
+});
+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 _classnames = _interop_require_default._(require('classnames'));
+const _react = _interop_require_wildcard._(require('react'));
+const _Button = require('../Buttons/Button.js');
+const _Tooltip = require('../Tooltip/Tooltip.js');
+const _SideNavigation = require('./SideNavigation.js');
+const SidenavButton = _react.forwardRef((props, ref) => {
+  const {
+    className,
+    children,
+    isActive = false,
+    disabled = false,
+    isSubmenuOpen = false,
+    ...rest
+  } = props;
+  const isExpanded =
+    _react.useContext(_SideNavigation.SidenavExpandedContext) === true;
+  const sidenavButton = (0, _jsxruntime.jsx)(_Button.Button, {
+    className: (0, _classnames.default)(
+      'iui-sidenav-button',
+      {
+        'iui-submenu-open': isSubmenuOpen,
+      },
+      className,
+    ),
+    'data-iui-active': isActive,
+    size: 'large',
+    disabled: disabled,
+    ref: ref,
+    ...rest,
+    children: children,
+  });
+  return !isExpanded
+    ? (0, _jsxruntime.jsx)(_Tooltip.Tooltip, {
+        content: children,
+        placement: 'right',
+        ariaStrategy: 'none',
+        children: sidenavButton,
+      })
+    : sidenavButton;
 });

package/cjs/core/SideNavigation/SidenavSubmenu.d.ts

@@ -7,4 +7,4 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
  *   <div> ... </div>
  * </SidenavSubmenu>
  */
-export declare const SidenavSubmenu: PolymorphicForwardRefComponent<"div", {}>;
+export declare const SidenavSubmenu: PolymorphicForwardRefComponent<"div">;