@itwin/itwinui-react 3.13.4 → 3.14.0

package/DEV-cjs/core/ComboBox/ComboBox.types-test.js

@@ -1,82 +1,89 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-const _react = require("react");
-const _ComboBox = require("./ComboBox.js");
-()=>{
-    let ref = (0, _react.useRef)(null);
-    return React.createElement(_ComboBox.ComboBox, {
-        options: [
-            {
-                label: 'Item 1',
-                value: 1
-            },
-            {
-                label: 'Item 2',
-                value: 2
-            },
-            {
-                label: 'Item 3',
-                value: 3
-            }
-        ],
-        onChange: (value)=>{
-            let returnValue = value;
-            return returnValue;
-        },
-        ref: ref
-    });
+const _react = require('react');
+const _ComboBox = require('./ComboBox.js');
+() => {
+  let ref = (0, _react.useRef)(null);
+  return React.createElement(_ComboBox.ComboBox, {
+    options: [
+      {
+        label: 'Item 1',
+        value: 1,
+      },
+      {
+        label: 'Item 2',
+        value: 2,
+      },
+      {
+        label: 'Item 3',
+        value: 3,
+      },
+    ],
+    onChange: (value) => {
+      let returnValue = value;
+      return returnValue;
+    },
+    ref: ref,
+  });
 };
-()=>React.createElement(_ComboBox.ComboBox, {
-        options: [
-            {
-                label: 'Item 1',
-                value: 1
-            },
-            {
-                label: 'Item 2',
-                value: 2
-            },
-            {
-                label: 'Item 3',
-                value: 3
-            }
-        ],
-        onChange: (value)=>{
-            let returnValue = value;
-            return returnValue;
-        }
-    });
-()=>React.createElement(_ComboBox.ComboBox, {
-        options: [
-            {
-                label: 'Item 1',
-                value: "1"
-            },
-            {
-                label: 'Item 2',
-                value: "2"
-            },
-            {
-                label: 'Item 3',
-                value: "3"
-            }
-        ],
-        onChange: (value)=>{
-            let returnValue = value;
-            return returnValue;
-        }
-    });
-()=>React.createElement(React.Fragment, null, React.createElement(_ComboBox.ComboBox, {
-        options: [
-            {
-                label: 'Item #1',
-                value: 1
-            }
-        ],
-        onChange: (value)=>{
-            let returnValue = value;
-            return returnValue;
-        }
-    }));
+() =>
+  React.createElement(_ComboBox.ComboBox, {
+    options: [
+      {
+        label: 'Item 1',
+        value: 1,
+      },
+      {
+        label: 'Item 2',
+        value: 2,
+      },
+      {
+        label: 'Item 3',
+        value: 3,
+      },
+    ],
+    onChange: (value) => {
+      let returnValue = value;
+      return returnValue;
+    },
+  });
+() =>
+  React.createElement(_ComboBox.ComboBox, {
+    options: [
+      {
+        label: 'Item 1',
+        value: '1',
+      },
+      {
+        label: 'Item 2',
+        value: '2',
+      },
+      {
+        label: 'Item 3',
+        value: '3',
+      },
+    ],
+    onChange: (value) => {
+      let returnValue = value;
+      return returnValue;
+    },
+  });
+() =>
+  React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(_ComboBox.ComboBox, {
+      options: [
+        {
+          label: 'Item #1',
+          value: 1,
+        },
+      ],
+      onChange: (value) => {
+        let returnValue = value;
+        return returnValue;
+      },
+    }),
+  );

package/DEV-cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -1,31 +1,40 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "ComboBoxEndIcon", {
-    enumerable: true,
-    get: function() {
-        return ComboBoxEndIcon;
-    }
+Object.defineProperty(exports, 'ComboBoxEndIcon', {
+  enumerable: true,
+  get: function () {
+    return ComboBoxEndIcon;
+  },
 });
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _classnames = _interop_require_default._(require("classnames"));
-const _react = _interop_require_wildcard._(require("react"));
-const _index = require("../../utils/index.js");
-const _Icon = require("../Icon/Icon.js");
-const ComboBoxEndIcon = _react.forwardRef((props, forwardedRef)=>{
-    let { className, children, disabled, isOpen, ...rest } = props;
-    return _react.createElement(_Icon.Icon, {
-        as: "span",
-        ref: forwardedRef,
-        className: (0, _classnames.default)('iui-end-icon', {
-            'iui-disabled': disabled,
-            'iui-open': isOpen
-        }, className),
-        ...rest
-    }, children ?? _react.createElement(_index.SvgCaretDownSmall, {
-        "aria-hidden": true
-    }));
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _classnames = _interop_require_default._(require('classnames'));
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _Icon = require('../Icon/Icon.js');
+const ComboBoxEndIcon = _react.forwardRef((props, forwardedRef) => {
+  let { className, children, disabled, isOpen, ...rest } = props;
+  return _react.createElement(
+    _Icon.Icon,
+    {
+      as: 'span',
+      ref: forwardedRef,
+      className: (0, _classnames.default)(
+        'iui-end-icon',
+        {
+          'iui-disabled': disabled,
+          'iui-open': isOpen,
+        },
+        className,
+      ),
+      ...rest,
+    },
+    children ??
+      _react.createElement(_index.SvgCaretDownSmall, {
+        'aria-hidden': true,
+      }),
+  );
 });
 ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/DEV-cjs/core/ComboBox/ComboBoxInput.js

@@ -1,133 +1,195 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "ComboBoxInput", {
-    enumerable: true,
-    get: function() {
-        return ComboBoxInput;
-    }
+Object.defineProperty(exports, 'ComboBoxInput', {
+  enumerable: true,
+  get: function () {
+    return ComboBoxInput;
+  },
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _Input = require("../Input/Input.js");
-const _index = require("../../utils/index.js");
-const _ComboBoxMultipleContainer = require("./ComboBoxMultipleContainer.js");
-const _helpers = require("./helpers.js");
-const ComboBoxInput = _react.forwardRef((props, forwardedRef)=>{
-    let { selectTags, size, style, ...rest } = props;
-    let { isOpen, id, focusedIndex, setFocusedIndex, enableVirtualization, multiple, onClickHandler, popover, show, hide } = (0, _index.useSafeContext)(_helpers.ComboBoxStateContext);
-    let { inputRef, menuRef, optionsExtraInfo } = (0, _index.useSafeContext)(_helpers.ComboBoxRefsContext);
-    let refs = (0, _index.useMergedRefs)(inputRef, popover.refs.setReference, forwardedRef);
-    let focusedIndexRef = (0, _index.useLatestRef)(focusedIndex ?? -1);
-    let getIdFromIndex = (index)=>menuRef.current?.querySelector(`[data-iui-index="${index}"]`)?.id ?? '';
-    let handleKeyDown = _react.useCallback((event)=>{
-        let length = Object.keys(optionsExtraInfo).length ?? 0;
-        if (event.altKey) return;
-        switch(event.key){
-            case 'ArrowDown':
-                {
-                    event.preventDefault();
-                    if (!isOpen) return show();
-                    if (0 === length) return;
-                    if (-1 === focusedIndexRef.current) {
-                        let currentElement = menuRef.current?.querySelector('[data-iui-index]');
-                        return setFocusedIndex(Number(currentElement?.getAttribute('data-iui-index') ?? 0));
-                    }
-                    if (enableVirtualization && !menuRef.current?.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)?.nextElementSibling) return;
-                    let nextIndex = focusedIndexRef.current;
-                    do {
-                        let currentElement = menuRef.current?.querySelector(`[data-iui-index="${nextIndex}"]`);
-                        let nextElement = currentElement?.nextElementSibling ?? menuRef.current?.querySelector('[data-iui-index]');
-                        nextIndex = Number(nextElement?.getAttribute('data-iui-index'));
-                        if (nextElement) return setFocusedIndex(nextIndex);
-                    }while (nextIndex !== focusedIndexRef.current)
-                    break;
-                }
-            case 'ArrowUp':
-                {
-                    event.preventDefault();
-                    if (!isOpen) return show();
-                    if (0 === length) return;
-                    if (enableVirtualization && !menuRef.current?.querySelector(`[data-iui-index="${focusedIndexRef.current}"]`)?.previousElementSibling) return;
-                    if (-1 === focusedIndexRef.current) return setFocusedIndex(Object.values(optionsExtraInfo)?.[length - 1].__originalIndex ?? -1);
-                    let prevIndex = focusedIndexRef.current;
-                    do {
-                        let currentElement = menuRef.current?.querySelector(`[data-iui-index="${prevIndex}"]`);
-                        let prevElement = currentElement?.previousElementSibling ?? menuRef.current?.querySelector('[data-iui-index]:last-of-type');
-                        prevIndex = Number(prevElement?.getAttribute('data-iui-index'));
-                        if (prevElement) return setFocusedIndex(prevIndex);
-                    }while (prevIndex !== focusedIndexRef.current)
-                    break;
-                }
-            case 'Enter':
-                event.preventDefault();
-                if (isOpen) {
-                    if (focusedIndexRef.current > -1) onClickHandler?.(focusedIndexRef.current);
-                } else show();
-                break;
-            case 'Escape':
-                event.preventDefault();
-                hide();
-                break;
-            case 'Tab':
-                hide();
-                break;
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _Input = require('../Input/Input.js');
+const _index = require('../../utils/index.js');
+const _ComboBoxMultipleContainer = require('./ComboBoxMultipleContainer.js');
+const _helpers = require('./helpers.js');
+const ComboBoxInput = _react.forwardRef((props, forwardedRef) => {
+  let { selectTags, size, style, ...rest } = props;
+  let {
+    isOpen,
+    id,
+    focusedIndex,
+    setFocusedIndex,
+    enableVirtualization,
+    multiple,
+    onClickHandler,
+    popover,
+    show,
+    hide,
+  } = (0, _index.useSafeContext)(_helpers.ComboBoxStateContext);
+  let { inputRef, menuRef, optionsExtraInfo } = (0, _index.useSafeContext)(
+    _helpers.ComboBoxRefsContext,
+  );
+  let refs = (0, _index.useMergedRefs)(
+    inputRef,
+    popover.refs.setReference,
+    forwardedRef,
+  );
+  let focusedIndexRef = (0, _index.useLatestRef)(focusedIndex ?? -1);
+  let getIdFromIndex = (index) =>
+    menuRef.current?.querySelector(`[data-iui-index="${index}"]`)?.id ?? '';
+  let handleKeyDown = _react.useCallback(
+    (event) => {
+      let length = Object.keys(optionsExtraInfo).length ?? 0;
+      if (event.altKey) return;
+      switch (event.key) {
+        case 'ArrowDown': {
+          event.preventDefault();
+          if (!isOpen) return show();
+          if (0 === length) return;
+          if (-1 === focusedIndexRef.current) {
+            let currentElement =
+              menuRef.current?.querySelector('[data-iui-index]');
+            return setFocusedIndex(
+              Number(currentElement?.getAttribute('data-iui-index') ?? 0),
+            );
+          }
+          if (
+            enableVirtualization &&
+            !menuRef.current?.querySelector(
+              `[data-iui-index="${focusedIndexRef.current}"]`,
+            )?.nextElementSibling
+          )
+            return;
+          let nextIndex = focusedIndexRef.current;
+          do {
+            let currentElement = menuRef.current?.querySelector(
+              `[data-iui-index="${nextIndex}"]`,
+            );
+            let nextElement =
+              currentElement?.nextElementSibling ??
+              menuRef.current?.querySelector('[data-iui-index]');
+            nextIndex = Number(nextElement?.getAttribute('data-iui-index'));
+            if (nextElement) return setFocusedIndex(nextIndex);
+          } while (nextIndex !== focusedIndexRef.current);
+          break;
         }
-    }, [
-        setFocusedIndex,
-        enableVirtualization,
-        focusedIndexRef,
-        isOpen,
-        menuRef,
-        onClickHandler,
-        optionsExtraInfo,
-        show,
-        hide
-    ]);
-    let wasOpenBeforeClick = _react.useRef(false);
-    let handlePointerDown = _react.useCallback(()=>{
-        wasOpenBeforeClick.current = isOpen;
-    }, [
-        isOpen
-    ]);
-    let handleClick = _react.useCallback(()=>{
-        if (wasOpenBeforeClick.current) hide();
-        else show();
-        wasOpenBeforeClick.current = false;
-    }, [
-        hide,
-        show
-    ]);
-    let [tagContainerWidthRef, tagContainerWidth] = (0, _index.useContainerWidth)();
-    return _react.createElement(_react.Fragment, null, _react.createElement(_Input.Input, {
-        ref: refs,
-        "aria-expanded": isOpen,
-        "aria-activedescendant": isOpen && void 0 != focusedIndex && focusedIndex > -1 ? getIdFromIndex(focusedIndex) : void 0,
-        role: "combobox",
-        "aria-controls": isOpen ? `${id}-list` : void 0,
-        "aria-autocomplete": "list",
-        spellCheck: false,
-        autoCapitalize: "none",
-        autoCorrect: "off",
-        style: {
-            ...multiple && {
-                paddingInlineStart: tagContainerWidth + 18
-            },
-            ...style
-        },
-        "aria-describedby": multiple ? `${id}-selected-live` : void 0,
-        size: size,
-        ...popover.getReferenceProps({
-            ...rest,
-            onPointerDown: (0, _index.mergeEventHandlers)(props.onPointerDown, handlePointerDown),
-            onClick: (0, _index.mergeEventHandlers)(props.onClick, handleClick),
-            onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, handleKeyDown)
-        })
-    }), multiple && selectTags ? _react.createElement(_ComboBoxMultipleContainer.ComboBoxMultipleContainer, {
-        ref: tagContainerWidthRef,
-        selectedItems: selectTags,
-        id: `${id}-selected-live`
-    }) : null);
+        case 'ArrowUp': {
+          event.preventDefault();
+          if (!isOpen) return show();
+          if (0 === length) return;
+          if (
+            enableVirtualization &&
+            !menuRef.current?.querySelector(
+              `[data-iui-index="${focusedIndexRef.current}"]`,
+            )?.previousElementSibling
+          )
+            return;
+          if (-1 === focusedIndexRef.current)
+            return setFocusedIndex(
+              Object.values(optionsExtraInfo)?.[length - 1].__originalIndex ??
+                -1,
+            );
+          let prevIndex = focusedIndexRef.current;
+          do {
+            let currentElement = menuRef.current?.querySelector(
+              `[data-iui-index="${prevIndex}"]`,
+            );
+            let prevElement =
+              currentElement?.previousElementSibling ??
+              menuRef.current?.querySelector('[data-iui-index]:last-of-type');
+            prevIndex = Number(prevElement?.getAttribute('data-iui-index'));
+            if (prevElement) return setFocusedIndex(prevIndex);
+          } while (prevIndex !== focusedIndexRef.current);
+          break;
+        }
+        case 'Enter':
+          event.preventDefault();
+          if (isOpen) {
+            if (focusedIndexRef.current > -1)
+              onClickHandler?.(focusedIndexRef.current);
+          } else show();
+          break;
+        case 'Escape':
+          event.preventDefault();
+          hide();
+          break;
+        case 'Tab':
+          hide();
+          break;
+      }
+    },
+    [
+      setFocusedIndex,
+      enableVirtualization,
+      focusedIndexRef,
+      isOpen,
+      menuRef,
+      onClickHandler,
+      optionsExtraInfo,
+      show,
+      hide,
+    ],
+  );
+  let wasOpenBeforeClick = _react.useRef(false);
+  let handlePointerDown = _react.useCallback(() => {
+    wasOpenBeforeClick.current = isOpen;
+  }, [isOpen]);
+  let handleClick = _react.useCallback(() => {
+    if (wasOpenBeforeClick.current) hide();
+    else show();
+    wasOpenBeforeClick.current = false;
+  }, [hide, show]);
+  let [tagContainerWidthRef, tagContainerWidth] = (0,
+  _index.useContainerWidth)();
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    _react.createElement(_Input.Input, {
+      ref: refs,
+      'aria-expanded': isOpen,
+      'aria-activedescendant':
+        isOpen && void 0 != focusedIndex && focusedIndex > -1
+          ? getIdFromIndex(focusedIndex)
+          : void 0,
+      role: 'combobox',
+      'aria-controls': isOpen ? `${id}-list` : void 0,
+      'aria-autocomplete': 'list',
+      spellCheck: false,
+      autoCapitalize: 'none',
+      autoCorrect: 'off',
+      style: {
+        ...(multiple && {
+          paddingInlineStart: tagContainerWidth + 18,
+        }),
+        ...style,
+      },
+      'aria-describedby': multiple ? `${id}-selected-live` : void 0,
+      size: size,
+      ...popover.getReferenceProps({
+        ...rest,
+        onPointerDown: (0, _index.mergeEventHandlers)(
+          props.onPointerDown,
+          handlePointerDown,
+        ),
+        onClick: (0, _index.mergeEventHandlers)(props.onClick, handleClick),
+        onKeyDown: (0, _index.mergeEventHandlers)(
+          props.onKeyDown,
+          handleKeyDown,
+        ),
+      }),
+    }),
+    multiple && selectTags
+      ? _react.createElement(
+          _ComboBoxMultipleContainer.ComboBoxMultipleContainer,
+          {
+            ref: tagContainerWidthRef,
+            selectedItems: selectTags,
+            id: `${id}-selected-live`,
+          },
+        )
+      : null,
+  );
 });
 ComboBoxInput.displayName = 'ComboBoxInput';

package/DEV-cjs/core/ComboBox/ComboBoxInputContainer.js

@@ -1,32 +1,44 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "ComboBoxInputContainer", {
-    enumerable: true,
-    get: function() {
-        return ComboBoxInputContainer;
-    }
+Object.defineProperty(exports, 'ComboBoxInputContainer', {
+  enumerable: true,
+  get: function () {
+    return ComboBoxInputContainer;
+  },
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _StatusMessage = require("../StatusMessage/StatusMessage.js");
-const _index = require("../../utils/index.js");
-const _helpers = require("./helpers.js");
-const ComboBoxInputContainer = _react.forwardRef((props, forwardedRef)=>{
-    let { className, status, message, children, ...rest } = props;
-    let { id } = (0, _index.useSafeContext)(_helpers.ComboBoxStateContext);
-    return _react.createElement(_index.InputContainer, {
-        className: className,
-        status: status,
-        statusMessage: 'string' == typeof message ? _react.createElement(_StatusMessage.StatusMessage, {
-            status: status
-        }, message) : _react.isValidElement(message) && _react.cloneElement(message, {
-            status
-        }),
-        ref: forwardedRef,
-        ...rest,
-        id: id
-    }, _react.createElement(_index.InputWithIcon, null, children));
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _StatusMessage = require('../StatusMessage/StatusMessage.js');
+const _index = require('../../utils/index.js');
+const _helpers = require('./helpers.js');
+const ComboBoxInputContainer = _react.forwardRef((props, forwardedRef) => {
+  let { className, status, message, children, ...rest } = props;
+  let { id } = (0, _index.useSafeContext)(_helpers.ComboBoxStateContext);
+  return _react.createElement(
+    _index.InputContainer,
+    {
+      className: className,
+      status: status,
+      statusMessage:
+        'string' == typeof message
+          ? _react.createElement(
+              _StatusMessage.StatusMessage,
+              {
+                status: status,
+              },
+              message,
+            )
+          : _react.isValidElement(message) &&
+            _react.cloneElement(message, {
+              status,
+            }),
+      ref: forwardedRef,
+      ...rest,
+      id: id,
+    },
+    _react.createElement(_index.InputWithIcon, null, children),
+  );
 });
 ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';