@itwin/itwinui-react/cjs/core/TransferList/TransferList.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
function _export(target, all) {
  for (var name in all)
    Object.defineProperty(target, name, {
      enumerable: true,
      get: all[name],
    });
}
_export(exports, {
  TransferList: function () {
    return TransferList;
  },
  TransferListContext: function () {
    return TransferListContext;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _index = require('../../utils/index.js');
const _List = require('../List/List.js');
const _ListItem = require('../List/ListItem.js');
const _Label = require('../Label/Label.js');
const _ButtonGroup = require('../ButtonGroup/ButtonGroup.js');
const TransferListComponent = _index.polymorphic.div(
  'iui-transfer-list-wrapper',
);
if ('development' === process.env.NODE_ENV)
  TransferListComponent.displayName = 'TransferList';
const TransferListListboxWrapper = _react.forwardRef((props, ref) => {
  let { className, children, ...rest } = props;
  let uid = (0, _index.useId)();
  let [labelId, setLabelId] = _react.useState(uid);
  return _react.createElement(
    _index.Box,
    {
      as: 'div',
      className: (0, _classnames.default)(
        'iui-transfer-list-listbox-wrapper',
        className,
      ),
      ref: ref,
      ...rest,
    },
    _react.createElement(
      TransferListContext.Provider,
      {
        value: {
          labelId,
          setLabelId,
        },
      },
      children,
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
const TransferListListbox = _react.forwardRef((props, ref) => {
  let { children, className, ...rest } = props;
  let { labelId } = (0, _index.useSafeContext)(TransferListContext);
  let [focusedIndex, setFocusedIndex] = _react.useState();
  let listRef = _react.useRef(null);
  let refs = (0, _index.useMergedRefs)(listRef, ref);
  let getFocusableNodes = _react.useCallback(() => {
    let focusableItems = (0, _index.getFocusableElements)(listRef.current);
    return focusableItems.filter(
      (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
    );
  }, []);
  _react.useEffect(() => {
    let items = getFocusableNodes();
    if (null != focusedIndex) return void items?.[focusedIndex]?.focus();
  }, [focusedIndex, getFocusableNodes]);
  let onKeyDown = (event) => {
    if (event.altKey) return;
    let items = getFocusableNodes();
    if (!items?.length) return;
    let currentIndex = focusedIndex ?? 0;
    switch (event.key) {
      case 'ArrowDown':
        setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
        event.preventDefault();
        event.stopPropagation();
        break;
      case 'ArrowUp':
        setFocusedIndex(Math.max(currentIndex - 1, 0));
        event.preventDefault();
        event.stopPropagation();
        break;
      default:
        break;
    }
  };
  return _react.createElement(
    _List.List,
    {
      className: (0, _classnames.default)(
        'iui-transfer-list-listbox',
        className,
      ),
      onKeyDown: onKeyDown,
      role: 'listbox',
      'aria-multiselectable': true,
      'aria-labelledby': labelId,
      tabIndex: 0,
      ref: refs,
      ...rest,
    },
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  TransferListListbox.displayName = 'TransferList.Listbox';
const TransferListItem = _react.forwardRef((props, ref) => {
  let {
    actionable = true,
    disabled,
    onActiveChange,
    children,
    active,
    ...rest
  } = props;
  let onClickEvents = () =>
    actionable && onActiveChange && onActiveChange(!active);
  let onKeyDown = (event) => {
    if (event.altKey) return;
    if (
      'Enter' === event.key ||
      ' ' === event.key ||
      'Spacebar' === event.key
    ) {
      disabled || onClickEvents();
      event.preventDefault();
    }
  };
  return _react.createElement(
    _ListItem.ListItem,
    {
      ref: ref,
      onClick: onClickEvents,
      onKeyDown: onKeyDown,
      active: active,
      actionable: actionable,
      tabIndex: -1,
      role: 'option',
      'aria-disabled': disabled ? 'true' : void 0,
      'aria-selected': active ? 'true' : void 0,
      disabled: disabled,
      ...rest,
    },
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  TransferListItem.displayName = 'TransferList.Item';
const TransferListListboxLabel = _react.forwardRef((props, ref) => {
  let { children, id, ...rest } = props;
  let { labelId, setLabelId } = (0, _index.useSafeContext)(TransferListContext);
  _react.useEffect(() => {
    if (id && id !== labelId) setLabelId(id);
  }, [id, labelId, setLabelId]);
  return _react.createElement(
    _Label.Label,
    {
      as: 'div',
      id: labelId,
      ref: ref,
      ...rest,
    },
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
const TransferListToolbar = _react.forwardRef((props, ref) => {
  let { className, children, ...rest } = props;
  return _react.createElement(
    _ButtonGroup.ButtonGroup,
    {
      role: 'toolbar',
      ref: ref,
      ...rest,
      orientation: 'vertical',
      className: (0, _classnames.default)(
        'iui-transfer-list-toolbar',
        className,
      ),
    },
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  TransferListToolbar.displayName = 'TransferList.Toolbar';
const TransferList = Object.assign(TransferListComponent, {
  ListboxWrapper: TransferListListboxWrapper,
  Listbox: TransferListListbox,
  Item: TransferListItem,
  ListboxLabel: TransferListListboxLabel,
  Toolbar: TransferListToolbar,
});
const TransferListContext = _react.createContext(void 0);
if ('development' === process.env.NODE_ENV)
  TransferListContext.displayName = 'TransferListContext';