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

package/cjs/core/Select/Select.js

@@ -1,484 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'Select', {
-  enumerable: true,
-  get: function () {
-    return Select;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
-const _MenuItem = require('../Menu/MenuItem.js');
-const _index = require('../../utils/index.js');
-const _SelectTag = require('./SelectTag.js');
-const _SelectTagContainer = require('./SelectTagContainer.js');
-const _Icon = require('../Icon/Icon.js');
-const _Popover = require('../Popover/Popover.js');
-const _List = require('../List/List.js');
-const _react1 = require('@floating-ui/react');
-const Select = _react.forwardRef((props, forwardedRef) => {
-  let { native, ...rest } = props;
-  let Component = native ? NativeSelect : CustomSelect;
-  return _react.createElement(Component, {
-    ...rest,
-    ref: forwardedRef,
-  });
-});
-const NativeSelect = _react.forwardRef((props, forwardedRef) => {
-  let {
-    triggerProps,
-    options,
-    disabled,
-    placeholder,
-    defaultValue: defaultValueProp = void 0 !== placeholder ? '' : void 0,
-    value: valueProp,
-    onChange: onChangeProp,
-    size,
-    status,
-    styleType,
-    required,
-    ...rest
-  } = props;
-  return _react.createElement(
-    _index.InputWithIcon,
-    {
-      ...rest,
-      ref: forwardedRef,
-    },
-    _react.createElement(
-      SelectButton,
-      {
-        as: 'select',
-        size: size,
-        status: status,
-        styleType: styleType,
-        disabled: disabled,
-        defaultValue: void 0 === valueProp ? defaultValueProp : void 0,
-        value: null === valueProp ? '' : valueProp,
-        required: required,
-        ...triggerProps,
-        onKeyDown: (0, _index.mergeEventHandlers)(
-          triggerProps?.onKeyDown,
-          (event) => {
-            if ('Enter' === event.key) event.currentTarget.showPicker?.();
-          },
-        ),
-        onChange: (0, _index.mergeEventHandlers)(
-          triggerProps?.onChange,
-          (event) => {
-            onChangeProp?.(event.currentTarget.value, event);
-          },
-        ),
-      },
-      'borderless' !== styleType && void 0 !== placeholder
-        ? _react.createElement(
-            'option',
-            {
-              value: '',
-              disabled: true,
-            },
-            placeholder,
-          )
-        : null,
-      options.map((option) =>
-        _react.createElement(
-          'option',
-          {
-            key: option.value,
-            ...option,
-          },
-          option.label,
-        ),
-      ),
-    ),
-    _react.createElement(SelectEndIcon, {
-      disabled: disabled,
-    }),
-  );
-});
-const CustomSelect = _react.forwardRef((props, forwardedRef) => {
-  let uid = (0, _index.useId)();
-  let {
-    options,
-    value: valueProp,
-    onChange: onChangeProp,
-    placeholder,
-    disabled = false,
-    size,
-    itemRenderer,
-    selectedItemRenderer,
-    menuClassName,
-    menuStyle,
-    multiple = false,
-    triggerProps,
-    status,
-    popoverProps: { portal = true, ...popoverProps } = {},
-    styleType,
-    ...rest
-  } = props;
-  let [isOpen, setIsOpen] = _react.useState(false);
-  let [liveRegionSelection, setLiveRegionSelection] = _react.useState('');
-  let [uncontrolledValue, setUncontrolledValue] = _react.useState();
-  let value = void 0 !== valueProp ? valueProp : uncontrolledValue;
-  let onChangeRef = (0, _index.useLatestRef)(onChangeProp);
-  let selectRef = _react.useRef(null);
-  let show = _react.useCallback(() => {
-    if (disabled) return;
-    setIsOpen(true);
-    popoverProps?.onVisibleChange?.(true);
-  }, [disabled, popoverProps]);
-  let hide = _react.useCallback(() => {
-    setIsOpen(false);
-    selectRef.current?.focus({
-      preventScroll: true,
-    });
-    popoverProps?.onVisibleChange?.(false);
-  }, [popoverProps]);
-  let menuItems = _react.useMemo(
-    () =>
-      options.map((option, index) => {
-        let isSelected = isMultipleEnabled(value, multiple)
-          ? value?.includes(option.value) ?? false
-          : value === option.value;
-        let menuItem = itemRenderer
-          ? itemRenderer(option, {
-              close: () => setIsOpen(false),
-              isSelected,
-            })
-          : _react.createElement(_MenuItem.MenuItem, null, option.label);
-        let { label, icon, startIcon: startIconProp, ...restOption } = option;
-        let startIcon = startIconProp ?? icon;
-        return _react.cloneElement(menuItem, {
-          key: `${label}-${index}`,
-          isSelected,
-          startIcon: startIcon,
-          endIcon: isSelected
-            ? _react.createElement(_index.SvgCheckmark, {
-                'aria-hidden': true,
-              })
-            : null,
-          onClick: () => {
-            if (option.disabled) return;
-            if (isSingleOnChange(onChangeRef.current, multiple)) {
-              setUncontrolledValue(option.value);
-              onChangeRef.current?.(option.value);
-              hide();
-            } else {
-              setUncontrolledValue((prev) =>
-                isSelected
-                  ? prev?.filter((i) => option.value !== i)
-                  : [...(prev ?? []), option.value],
-              );
-              onChangeRef.current?.(
-                option.value,
-                isSelected ? 'removed' : 'added',
-              );
-            }
-            if (isMultipleEnabled(value, multiple)) {
-              let prevSelectedValue = value || [];
-              let newSelectedValue = isSelected
-                ? prevSelectedValue.filter((i) => option.value !== i)
-                : [...prevSelectedValue, option.value];
-              setLiveRegionSelection(
-                options
-                  .filter((i) => newSelectedValue.includes(i.value))
-                  .map((item) => item.label)
-                  .filter(Boolean)
-                  .join(', '),
-              );
-            }
-          },
-          ref: (el) => {
-            if (isSelected && !multiple)
-              el?.scrollIntoView({
-                block: 'nearest',
-              });
-          },
-          role: 'option',
-          ...restOption,
-          ...menuItem.props,
-        });
-      }),
-    [hide, itemRenderer, multiple, onChangeRef, options, value],
-  );
-  let selectedItems = _react.useMemo(() => {
-    if (null == value) return;
-    return isMultipleEnabled(value, multiple)
-      ? options.filter((option) => value.some((val) => val === option.value))
-      : options.find((option) => option.value === value);
-  }, [multiple, options, value]);
-  let defaultFocusedIndex = _react.useMemo(() => {
-    let index = 0;
-    if (Array.isArray(value) && value.length > 0)
-      index = options.findIndex((option) => option.value === value[0]);
-    else if (value)
-      index = options.findIndex((option) => option.value === value);
-    return index >= 0 ? index : 0;
-  }, [options, value]);
-  let tagRenderer = _react.useCallback(
-    (item) =>
-      _react.createElement(_SelectTag.SelectTag, {
-        key: item.label,
-        label: item.label,
-      }),
-    [],
-  );
-  let popover = (0, _Popover.usePopover)({
-    visible: isOpen,
-    matchWidth: true,
-    closeOnOutsideClick: true,
-    middleware: {
-      size: {
-        maxHeight: 'var(--iui-menu-max-height)',
-      },
-    },
-    ...popoverProps,
-    onVisibleChange: (open) => (open ? show() : hide()),
-  });
-  return _react.createElement(
-    _react.Fragment,
-    null,
-    _react.createElement(
-      _index.InputWithIcon,
-      {
-        ...rest,
-        ref: (0, _index.useMergedRefs)(
-          popover.refs.setPositionReference,
-          forwardedRef,
-        ),
-      },
-      _react.createElement(
-        SelectButton,
-        {
-          ...popover.getReferenceProps(),
-          tabIndex: 0,
-          role: 'combobox',
-          size: size,
-          status: status,
-          'aria-disabled': disabled ? 'true' : void 0,
-          'data-iui-disabled': disabled ? 'true' : void 0,
-          'aria-autocomplete': 'none',
-          'aria-expanded': isOpen,
-          'aria-haspopup': 'listbox',
-          'aria-controls': `${uid}-menu`,
-          styleType: styleType,
-          ...triggerProps,
-          ref: (0, _index.useMergedRefs)(
-            selectRef,
-            triggerProps?.ref,
-            popover.refs.setReference,
-          ),
-          className: (0, _classnames.default)(
-            {
-              'iui-placeholder':
-                (!selectedItems || 0 === selectedItems.length) && !!placeholder,
-            },
-            triggerProps?.className,
-          ),
-        },
-        (!selectedItems || 0 === selectedItems.length) &&
-          _react.createElement(
-            _index.Box,
-            {
-              as: 'span',
-              className: 'iui-content',
-            },
-            placeholder,
-          ),
-        isMultipleEnabled(selectedItems, multiple)
-          ? _react.createElement(MultipleSelectButton, {
-              selectedItems: selectedItems,
-              selectedItemsRenderer: selectedItemRenderer,
-              tagRenderer: tagRenderer,
-            })
-          : _react.createElement(SingleSelectButton, {
-              selectedItem: selectedItems,
-              selectedItemRenderer: selectedItemRenderer,
-            }),
-      ),
-      _react.createElement(SelectEndIcon, {
-        disabled: disabled,
-        isOpen: isOpen,
-      }),
-      multiple
-        ? _react.createElement(_index.AutoclearingHiddenLiveRegion, {
-            text: liveRegionSelection,
-          })
-        : null,
-    ),
-    popover.open &&
-      _react.createElement(
-        _index.Portal,
-        {
-          portal: portal,
-        },
-        _react.createElement(
-          SelectListbox,
-          {
-            defaultFocusedIndex: defaultFocusedIndex,
-            className: menuClassName,
-            id: `${uid}-menu`,
-            key: `${uid}-menu`,
-            ...popover.getFloatingProps({
-              style: menuStyle,
-              onKeyDown: ({ key }) => {
-                if ('Tab' === key) hide();
-              },
-            }),
-            ref: popover.refs.setFloating,
-          },
-          menuItems,
-        ),
-      ),
-  );
-});
-const isMultipleEnabled = (variable, multiple) => multiple;
-const isSingleOnChange = (onChange, multiple) => !multiple;
-const SelectButton = _react.forwardRef((props, forwardedRef) => {
-  let { size, status, styleType = 'default', ...rest } = props;
-  return _react.createElement(_index.Box, {
-    'data-iui-size': size,
-    'data-iui-status': status,
-    'data-iui-variant': 'default' !== styleType ? styleType : void 0,
-    ...rest,
-    ref: forwardedRef,
-    className: (0, _classnames.default)(
-      'iui-select-button',
-      'iui-field',
-      props.className,
-    ),
-  });
-});
-const SelectEndIcon = _react.forwardRef((props, forwardedRef) => {
-  let { disabled, isOpen, ...rest } = props;
-  return _react.createElement(
-    _Icon.Icon,
-    {
-      'aria-hidden': true,
-      ...rest,
-      ref: forwardedRef,
-      className: (0, _classnames.default)(
-        'iui-end-icon',
-        {
-          'iui-disabled': disabled,
-          'iui-open': isOpen,
-        },
-        props.className,
-      ),
-    },
-    _react.createElement(_index.SvgCaretDownSmall, null),
-  );
-});
-const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
-  let startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
-  return _react.createElement(
-    _react.Fragment,
-    null,
-    selectedItem && selectedItemRenderer && selectedItemRenderer(selectedItem),
-    selectedItem &&
-      !selectedItemRenderer &&
-      _react.createElement(
-        _react.Fragment,
-        null,
-        startIcon &&
-          _react.createElement(
-            _index.Box,
-            {
-              as: 'span',
-              className: 'iui-icon',
-              'aria-hidden': true,
-            },
-            startIcon,
-          ),
-        _react.createElement(
-          _index.Box,
-          {
-            as: 'span',
-            className: 'iui-content',
-          },
-          selectedItem.label,
-        ),
-      ),
-  );
-};
-const MultipleSelectButton = ({
-  selectedItems,
-  selectedItemsRenderer,
-  tagRenderer,
-}) => {
-  let selectedItemsElements = _react.useMemo(() => {
-    if (!selectedItems) return [];
-    return selectedItems.map((item) => tagRenderer(item));
-  }, [selectedItems, tagRenderer]);
-  return _react.createElement(
-    _react.Fragment,
-    null,
-    selectedItems &&
-      selectedItemsRenderer &&
-      selectedItemsRenderer(selectedItems),
-    selectedItems &&
-      !selectedItemsRenderer &&
-      _react.createElement(
-        _index.Box,
-        {
-          as: 'span',
-          className: 'iui-content',
-        },
-        _react.createElement(_SelectTagContainer.SelectTagContainer, {
-          tags: selectedItemsElements,
-        }),
-      ),
-  );
-};
-const SelectListbox = _react.forwardRef((props, forwardedRef) => {
-  let {
-    defaultFocusedIndex = 0,
-    autoFocus = true,
-    children: childrenProp,
-    className,
-    ...rest
-  } = props;
-  let [focusedIndex, setFocusedIndex] = _react.useState(defaultFocusedIndex);
-  let autoFocusRef = _react.useCallback((element) => {
-    queueMicrotask(() => {
-      let firstFocusable = element?.querySelector('[tabindex="0"]');
-      firstFocusable?.focus();
-    });
-  }, []);
-  let children = _react.useMemo(
-    () =>
-      _react.Children.map(childrenProp, (child, index) =>
-        _react.isValidElement(child)
-          ? _react.createElement(_react1.CompositeItem, {
-              key: index,
-              render: child,
-              ref: child.props.ref || child.ref,
-            })
-          : child,
-      ),
-    [childrenProp],
-  );
-  return _react.createElement(
-    _react1.Composite,
-    {
-      render: _react.createElement(_List.List, {
-        as: 'div',
-        className: (0, _classnames.default)('iui-menu', className),
-      }),
-      orientation: 'vertical',
-      role: 'listbox',
-      activeIndex: focusedIndex,
-      onNavigate: setFocusedIndex,
-      ref: (0, _index.useMergedRefs)(
-        forwardedRef,
-        autoFocus ? autoFocusRef : void 0,
-      ),
-      ...rest,
-    },
-    children,
-  );
-});

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

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

package/cjs/core/Select/SelectTag.d.ts

@@ -1,13 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type SelectTagProps = {
-    /**
-     * Text inside the tag.
-     */
-    label: string;
-};
-/**
- * Tag for showing selected value in `Select`.
- * @private
- */
-export declare const SelectTag: PolymorphicForwardRefComponent<"span", SelectTagProps>;
-export {};

package/cjs/core/Select/SelectTag.js

@@ -1,35 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-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 _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) => {
-  let { className, label, ...rest } = props;
-  return _react.createElement(
-    _index.Box,
-    {
-      as: 'span',
-      className: (0, _classnames.default)('iui-select-tag', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    _react.createElement(
-      _index.Box,
-      {
-        as: 'span',
-        className: 'iui-select-tag-label',
-      },
-      label,
-    ),
-  );
-});

package/cjs/core/Select/SelectTagContainer.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type SelectTagContainerProps = {
-    /**
-     * Select tags.
-     */
-    tags: React.ReactNode[];
-};
-/**
- */
-export declare const SelectTagContainer: PolymorphicForwardRefComponent<"div", SelectTagContainerProps>;
-export {};

package/cjs/core/Select/SelectTagContainer.js

@@ -1,55 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-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 _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
-const _SelectTag = require('./SelectTag.js');
-const _index = require('../../utils/index.js');
-const SelectTagContainer = _react.forwardRef((props, ref) => {
-  let { tags: tagsProp, className, ...rest } = props;
-  let tags = _react.useMemo(
-    () => _react.Children.toArray(tagsProp),
-    [tagsProp],
-  );
-  return _react.createElement(
-    _index.OverflowContainer,
-    {
-      itemsCount: tags.length,
-      className: (0, _classnames.default)(
-        'iui-select-tag-container',
-        className,
-      ),
-      ref: ref,
-      ...rest,
-    },
-    _react.createElement(SelectTagContainerContent, {
-      ...props,
-      tags: tags,
-    }),
-  );
-});
-const SelectTagContainerContent = (props) => {
-  let { tags } = props;
-  let { visibleCount } = _index.OverflowContainer.useContext();
-  return _react.createElement(
-    _react.Fragment,
-    null,
-    visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
-    _react.createElement(
-      _index.OverflowContainer.OverflowNode,
-      null,
-      _react.createElement(_SelectTag.SelectTag, {
-        label: `+${tags.length - visibleCount + 1} item(s)`,
-      }),
-    ),
-  );
-};