@itwin/itwinui-react 3.11.3 → 3.12.1

package/cjs/core/TransferList/TransferList.js

@@ -1,148 +1,203 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TransferListContext = exports.TransferList = 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_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../utils/index.js");
-const List_js_1 = require("../List/List.js");
-const ListItem_js_1 = require("../List/ListItem.js");
-const Label_js_1 = require("../Label/Label.js");
-// ----------------------------------------------------------------------------
-// TransferListComponent
-const TransferListComponent = (0, index_js_1.polymorphic)('iui-transfer-list-wrapper');
+'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 = _interop_require_wildcard._(require('react'));
+const _classnames = _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 TransferListComponent = (0, _index.polymorphic)(
+  'iui-transfer-list-wrapper',
+);
 TransferListComponent.displayName = 'TransferList';
-const TransferListListboxWrapper = react_1.default.forwardRef((props, ref) => {
-    const { className, children, ...rest } = props;
-    const uid = (0, index_js_1.useId)();
-    const [labelId, setLabelId] = react_1.default.useState(uid);
-    return (react_1.default.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-transfer-list-listbox-wrapper', className), ref: ref, ...rest },
-        react_1.default.createElement(exports.TransferListContext.Provider, { value: { labelId, setLabelId } }, children)));
+const TransferListListboxWrapper = _react.forwardRef((props, ref) => {
+  const { className, children, ...rest } = props;
+  const uid = (0, _index.useId)();
+  const [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,
+    ),
+  );
 });
 TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
-const TransferListListbox = react_1.default.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    const { labelId } = (0, index_js_1.useSafeContext)(exports.TransferListContext);
-    const [focusedIndex, setFocusedIndex] = react_1.default.useState();
-    const listRef = react_1.default.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(listRef, ref);
-    const getFocusableNodes = react_1.default.useCallback(() => {
-        const focusableItems = (0, index_js_1.getFocusableElements)(listRef.current);
-        // Filter out focusable elements that are inside each list item, e.g. checkbox, anchor
-        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
-    }, []);
-    react_1.default.useEffect(() => {
-        const items = getFocusableNodes();
-        if (focusedIndex != null) {
-            items?.[focusedIndex]?.focus();
-            return;
-        }
-    }, [focusedIndex, getFocusableNodes]);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        const items = getFocusableNodes();
-        if (!items?.length) {
-            return;
-        }
-        const 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_1.default.createElement(List_js_1.List, { className: (0, classnames_1.default)('iui-transfer-list-listbox', className), onKeyDown: onKeyDown, role: 'listbox', "aria-multiselectable": true, "aria-labelledby": labelId, tabIndex: 0, ref: refs, ...rest }, children));
+const TransferListListbox = _react.forwardRef((props, ref) => {
+  const { children, className, ...rest } = props;
+  const { labelId } = (0, _index.useSafeContext)(TransferListContext);
+  const [focusedIndex, setFocusedIndex] = _react.useState();
+  const listRef = _react.useRef(null);
+  const refs = (0, _index.useMergedRefs)(listRef, ref);
+  const getFocusableNodes = _react.useCallback(() => {
+    const focusableItems = (0, _index.getFocusableElements)(listRef.current);
+    return focusableItems.filter(
+      (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
+    );
+  }, []);
+  _react.useEffect(() => {
+    const items = getFocusableNodes();
+    if (focusedIndex != null) {
+      items?.[focusedIndex]?.focus();
+      return;
+    }
+  }, [focusedIndex, getFocusableNodes]);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    const items = getFocusableNodes();
+    if (!items?.length) {
+      return;
+    }
+    const 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,
+  );
 });
 TransferListListbox.displayName = 'TransferList.Listbox';
-const TransferListItem = react_1.default.forwardRef((props, ref) => {
-    const { actionable = true, disabled, onActiveChange, children, active, ...rest } = props;
-    const onClickEvents = () => actionable && onActiveChange && onActiveChange(!active);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        if (event.key === 'Enter' ||
-            event.key === ' ' ||
-            event.key === 'Spacebar') {
-            !disabled && onClickEvents();
-            event.preventDefault();
-        }
-    };
-    return (react_1.default.createElement(ListItem_js_1.ListItem, { ref: ref, onClick: onClickEvents, onKeyDown: onKeyDown, active: active, actionable: actionable, tabIndex: -1, role: 'option', "aria-disabled": disabled ? 'true' : undefined, "aria-selected": active ? 'true' : undefined, disabled: disabled, ...rest }, children));
+const TransferListItem = _react.forwardRef((props, ref) => {
+  const {
+    actionable = true,
+    disabled,
+    onActiveChange,
+    children,
+    active,
+    ...rest
+  } = props;
+  const onClickEvents = () =>
+    actionable && onActiveChange && onActiveChange(!active);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    if (
+      event.key === 'Enter' ||
+      event.key === ' ' ||
+      event.key === 'Spacebar'
+    ) {
+      !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' : undefined,
+      'aria-selected': active ? 'true' : undefined,
+      disabled: disabled,
+      ...rest,
+    },
+    children,
+  );
 });
 TransferListItem.displayName = 'TransferList.Item';
-const TransferListListboxLabel = react_1.default.forwardRef((props, ref) => {
-    const { children, id, ...rest } = props;
-    const { labelId, setLabelId } = (0, index_js_1.useSafeContext)(exports.TransferListContext);
-    react_1.default.useEffect(() => {
-        if (id && id !== labelId) {
-            setLabelId(id);
-        }
-    }, [id, labelId, setLabelId]);
-    return (react_1.default.createElement(Label_js_1.Label, { as: 'div', id: labelId, ref: ref, ...rest }, children));
+const TransferListListboxLabel = _react.forwardRef((props, ref) => {
+  const { children, id, ...rest } = props;
+  const { 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,
+  );
 });
 TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
-// ----------------------------------------------------------------------------
-// TransferList.Toolbar component
-const TransferListToolbar = (0, index_js_1.polymorphic)('iui-transfer-list-toolbar', {
+const TransferListToolbar = (0, _index.polymorphic)(
+  'iui-transfer-list-toolbar',
+  {
     role: 'toolbar',
-});
+  },
+);
 TransferListToolbar.displayName = 'TransferList.Toolbar';
-/**
- * The TransferList component is used to display a list within a box
- * @example
- * <TransferList>
- *   <TransferList.ListboxWrapper>
- *     <TransferList.Listbox>
- *       <TransferList.Item>Item 1</TransferList.Item>
- *       <TransferList.Item>Item 2</TransferList.Item>
- *       <TransferList.Item>Item 3</TransferList.Item>
- *       <TransferList.Item>Item 4</TransferList.Item>
- *       <TransferList.Item>Item 5</TransferList.Item>
- *       <TransferList.Item>Item 6</TransferList.Item>
- *     </TransferList.Listbox>
- *   </TransferList.ListboxWrapper>
- * </TransferList>
- */
-exports.TransferList = Object.assign(TransferListComponent, {
-    /**
-     * 	TransferList listbox wrapper subcomponent
-     */
-    ListboxWrapper: TransferListListboxWrapper,
-    /**
-     * 	TransferList listbox subcomponent
-     */
-    Listbox: TransferListListbox,
-    /**
-     * 	TransferList item subcomponent
-     */
-    Item: TransferListItem,
-    /**
-     * 	TransferList listbox label subcomponent
-     */
-    ListboxLabel: TransferListListboxLabel,
-    /**
-     * 	TransferList toolbar subcomponent
-     */
-    Toolbar: TransferListToolbar,
+const TransferList = Object.assign(TransferListComponent, {
+  ListboxWrapper: TransferListListboxWrapper,
+  Listbox: TransferListListbox,
+  Item: TransferListItem,
+  ListboxLabel: TransferListListboxLabel,
+  Toolbar: TransferListToolbar,
 });
-exports.TransferListContext = react_1.default.createContext(undefined);
+const TransferListContext = _react.createContext(undefined);