@dnb/eufemia/cjs/fragments/drawer-list/DrawerList.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _push = _interopRequireDefault(require("core-js-pure/stable/instance/push.js"));
var _react = _interopRequireWildcard(require("react"));
var _useMountEffect = _interopRequireDefault(require("../../shared/helpers/useMountEffect.js"));
var _clsx = _interopRequireDefault(require("clsx"));
var _componentHelper = require("../../shared/component-helper.js");
var _Theme = require("../../shared/Theme.js");
var _SpacingUtils = require("../../components/space/SpacingUtils.js");
var _Element = _interopRequireDefault(require("../../elements/Element.js"));
var _DrawerListContext = _interopRequireDefault(require("./DrawerListContext.js"));
var _DrawerListProvider = _interopRequireDefault(require("./DrawerListProvider.js"));
var _DrawerListPortal = _interopRequireDefault(require("./DrawerListPortal.js"));
var _DrawerListHelpers = require("./DrawerListHelpers.js");
var _DrawerListItem = require("./DrawerListItem.js");
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const propsToFilterOut = {
  onOpen: null,
  onClose: null,
  handleDismissFocus: null,
  onChange: null,
  onPreChange: null,
  onResize: null,
  onSelect: null,
  onKeyDown: null,
  optionsRender: null,
  wrapperElement: null,
  onItemMouseEnter: null
};
function DrawerList(props) {
  const drawerListContext = (0, _react.useContext)(_DrawerListContext.default);
  if (drawerListContext !== null && drawerListContext !== void 0 && drawerListContext.drawerList) {
    return (0, _jsxRuntime.jsx)(DrawerListInstance, {
      ...props
    });
  }
  const {
    data,
    children,
    ...rest
  } = props;
  return (0, _jsxRuntime.jsx)(_DrawerListProvider.default, {
    ...rest,
    data: data || (!_react.default.isValidElement(children) ? children : undefined),
    children: (0, _jsxRuntime.jsx)(DrawerListInstance, {
      ...props
    })
  });
}
DrawerList.blurDelay = _DrawerListProvider.default.blurDelay;
const DrawerListInstance = _react.default.memo(function DrawerListInstance(ownProps) {
  var _renderData$;
  const context = (0, _react.useContext)(_DrawerListContext.default);
  const propsWithDefaults = {
    ..._DrawerListHelpers.drawerListDefaultProps,
    ...(0, _componentHelper.removeUndefinedProps)({
      ...ownProps
    })
  };
  (0, _useMountEffect.default)(() => {
    const eventHandlerState = Object.keys(propsToFilterOut).reduce((acc, key) => {
      if (propsWithDefaults[key]) {
        acc[key] = propsWithDefaults[key];
      }
      return acc;
    }, {});
    context.drawerList.setState(eventHandlerState);
    context.drawerList.setState({
      arrowPosition: propsWithDefaults.arrowPosition
    });
  });
  const preventTab = (0, _react.useCallback)(e => {
    switch (e.key) {
      case 'Tab':
        if (!context.drawerList.hasFocusOnElement) {
          e.preventDefault();
          context.drawerList.setHidden();
        }
        break;
      case 'PageDown':
      case 'PageUp':
        e.preventDefault();
        break;
    }
  }, [context.drawerList]);
  const selectItemHandler = (0, _react.useCallback)(params => {
    const selectedItem = Number(params['data-item']);
    if (selectedItem > -1) {
      context.drawerList.selectItemAndClose(selectedItem, {
        fireSelectEvent: true,
        event: params
      });
    }
  }, [context.drawerList]);
  const onItemMouseEnterCallback = context.drawerList.onItemMouseEnter;
  const onItemMouseEnterHandler = (0, _react.useCallback)((itemId, event) => {
    if (onItemMouseEnterCallback) {
      const data = (0, _DrawerListHelpers.getEventData)(itemId, context.drawerList.data);
      onItemMouseEnterCallback({
        item: itemId,
        data,
        event
      });
    }
  }, [onItemMouseEnterCallback, context.drawerList.data]);
  const {
    role,
    alignDrawer,
    fixedPosition,
    independentWidth,
    scrollable,
    focusable,
    size,
    noAnimation,
    noScrollAnimation,
    preventSelection,
    isPopup,
    portalClass,
    listClass,
    ignoreEvents,
    optionsRender,
    className,
    cacheHash: _cacheHash,
    wrapperElement: _wrapperElement,
    arrowPosition: _arrowPosition,
    direction: _direction,
    maxHeight: _maxHeight,
    id: _id,
    data: _data,
    open: _open,
    value: _value,
    keepOpen: _keepOpen,
    preventClose: _preventClose,
    skipKeysearch: _skipKeysearch,
    skipPortal: _skipPortal,
    enableBodyLock: _enableBodyLock,
    preventFocus: _preventFocus,
    pageOffset: _pageOffset,
    observerElement: _observerElement,
    children,
    onOpen: _onOpen,
    onClose: _onClose,
    handleDismissFocus: _handleDismissFocus,
    onChange: _onChange,
    onPreChange: _onPreChange,
    onResize: _onResize,
    onSelect: _onSelect,
    onKeyDown: _onKeyDown,
    onItemMouseEnter: _onItemMouseEnter,
    ...attributes
  } = propsWithDefaults;
  function noNullNumbers({
    selectedItem,
    activeItem,
    maxHeight,
    ...rest
  }) {
    return {
      selectedItem: selectedItem !== null && selectedItem !== void 0 ? selectedItem : undefined,
      activeItem: activeItem !== null && activeItem !== void 0 ? activeItem : undefined,
      maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : undefined,
      ...rest
    };
  }
  const {
    id,
    data,
    groups,
    open,
    hidden,
    arrowPosition,
    direction,
    maxHeight,
    cacheHash,
    selectedItem,
    activeItem,
    showFocusRing,
    closestToTop,
    closestToBottom,
    skipPortal,
    addObservers,
    removeObservers,
    _refShell,
    _refTriangle,
    _refUl,
    _refRoot
  } = noNullNumbers(context.drawerList);
  const renderData = makeRenderData(data, groups, context.getTranslation(propsWithDefaults).DrawerList);
  const hasGroups = renderData.length > 1 || ((_renderData$ = renderData[0]) === null || _renderData$ === void 0 ? void 0 : _renderData$.groupTitle) !== undefined;
  const mainParams = (0, _SpacingUtils.applySpacing)(propsWithDefaults, {
    id: `${id}-drawer-list`,
    className: (0, _clsx.default)(`dnb-drawer-list dnb-drawer-list--${direction}`, className, open && 'dnb-drawer-list--open', hidden && 'dnb-drawer-list--hidden', arrowPosition && `dnb-drawer-list--arrow-position-${arrowPosition}`, alignDrawer && `dnb-drawer-list--${alignDrawer}`, size && `dnb-drawer-list--${size}`, isPopup && 'dnb-drawer-list--is-popup', independentWidth && 'dnb-drawer-list--independent-width', scrollable && 'dnb-drawer-list--scroll', noScrollAnimation && 'dnb-drawer-list--no-scroll-animation'),
    ...attributes
  });
  const listParams = {
    id: `${id}-listbox`,
    className: (0, _clsx.default)('dnb-drawer-list__list', listClass, noAnimation && 'dnb-drawer-list__list--no-animation')
  };
  const ulParams = {
    role,
    id: `${id}-ul`,
    'aria-expanded': open,
    'aria-labelledby': `${id}-label`,
    tabIndex: -1,
    style: {
      maxHeight: parseFloat(maxHeight) > 0 ? `${maxHeight}rem` : null
    },
    ref: _refUl
  };
  if (!hidden) {
    ulParams['aria-activedescendant'] = context.drawerList.ariaActiveDescendant;
  }
  if (focusable) {
    ulParams.tabIndex = 0;
  }
  (0, _componentHelper.validateDOMAttributes)(ownProps, mainParams);
  (0, _componentHelper.validateDOMAttributes)(null, listParams);
  (0, _componentHelper.validateDOMAttributes)(null, ulParams);
  Object.assign(context.drawerList.attributes, (0, _componentHelper.validateDOMAttributes)(null, attributes));
  const ignoreEventsBoolean = ignoreEvents;
  const GroupItems = () => renderData.filter(Boolean).map(({
    groupTitle,
    groupData: data,
    hideTitle
  }, j) => {
    var _Items;
    const Items = () => data.map((dataItem, i) => {
      const {
        __id,
        ignoreEvents,
        className,
        disabled,
        style
      } = dataItem;
      const hash = `option-${id}-${__id}-${i}`;
      const tagId = `option-${id}-${__id}`;
      const liParams = {
        role: role === 'menu' ? 'menuitem' : 'option',
        'data-item': __id,
        id: tagId,
        hash,
        className: (0, _clsx.default)((ignoreEventsBoolean || ignoreEvents) && 'ignore-events', className, i === 0 && 'first-of-type' + (j === 0 ? " first-item" : ""), i === data.length - 1 && 'last-of-type' + (j === renderData.length - 1 ? " last-item" : ""), tagId === closestToTop && 'closest-to-top', tagId === closestToBottom && 'closest-to-bottom'),
        active: __id === activeItem,
        selected: !ignoreEvents && __id === selectedItem,
        onClick: selectItemHandler,
        onKeyDown: preventTab,
        onMouseEnter: onItemMouseEnterHandler ? e => onItemMouseEnterHandler(__id, e) : undefined,
        disabled: disabled,
        style: style
      };
      if (ignoreEventsBoolean) {
        liParams.active = null;
        liParams.selected = null;
        liParams.onClick = null;
        liParams.onKeyDown = null;
        liParams.onMouseEnter = null;
        liParams.className = (0, _clsx.default)(liParams.className, 'dnb-drawer-list__option--ignore');
      }
      return (0, _jsxRuntime.jsx)(DrawerList.Item, {
        ...liParams,
        children: dataItem
      }, hash);
    });
    const ItemsRendered = () => typeof optionsRender === 'function' ? optionsRender({
      data,
      Items,
      Item: DrawerList.Item
    }) : _Items || (_Items = (0, _jsxRuntime.jsx)(Items, {}));
    if (hasGroups) {
      const groupdId = `${id}-group-title-${j}`;
      return (0, _jsxRuntime.jsxs)("ul", {
        role: "group",
        "aria-labelledby": groupdId,
        className: (0, _clsx.default)('dnb-drawer-list__group', j === 0 && 'first-of-type', j === renderData.length - 1 && 'last-of-type'),
        children: [(0, _jsxRuntime.jsx)("li", {
          id: groupdId,
          role: "presentation",
          className: (0, _clsx.default)('dnb-drawer-list__group-title', hideTitle && 'dnb-sr-only', groupdId === closestToBottom && 'closest-to-bottom', groupdId === closestToTop && 'closest-to-top'),
          children: groupTitle
        }), (0, _jsxRuntime.jsx)(ItemsRendered, {})]
      }, j);
    } else {
      return (0, _jsxRuntime.jsx)(ItemsRendered, {}, j);
    }
  });
  const mainList = (0, _jsxRuntime.jsx)("span", {
    ...mainParams,
    ref: _refShell,
    children: (0, _jsxRuntime.jsx)("span", {
      ...listParams,
      children: hidden === false && renderData.length > 0 ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [(0, _jsxRuntime.jsx)(DrawerList.Options, {
          hasGroups: hasGroups,
          cacheHash: cacheHash + activeItem + selectedItem + closestToTop + closestToBottom + direction + maxHeight,
          ...ulParams,
          showFocusRing: showFocusRing,
          triangleRef: _refTriangle,
          children: (0, _jsxRuntime.jsx)(GroupItems, {})
        }), (0, _jsxRuntime.jsx)(OnMounted, {
          addObservers: addObservers,
          removeObservers: removeObservers
        })]
      }) : _react.default.isValidElement(children) && (0, _jsxRuntime.jsxs)("span", {
        className: "dnb-drawer-list__content",
        children: [children, (0, _jsxRuntime.jsx)("span", {
          className: "dnb-drawer-list__arrow",
          ref: _refTriangle
        })]
      })
    })
  });
  return (0, _jsxRuntime.jsx)("span", {
    className: 'dnb-drawer-list__root' + (!skipPortal ? " dnb-drawer-list__root--portal" : ""),
    ref: _refRoot,
    children: (0, _jsxRuntime.jsx)(_DrawerListPortal.default, {
      id: id,
      rootRef: _refRoot,
      open: hidden === false,
      includeOwnerWidth: alignDrawer === 'right',
      independentWidth: independentWidth,
      fixedPosition: fixedPosition,
      className: (0, _Theme.getThemeClasses)(context === null || context === void 0 ? void 0 : context.theme, portalClass),
      skipPortal: skipPortal,
      children: mainList
    })
  });
});
function makeRenderData(data, groups, translation) {
  const renderData = [];
  const noIndex = [];
  if (Array.isArray(data) && data.length > 0) {
    data.forEach(dataItem => {
      var _dataItem$groupIndex;
      const index = (_dataItem$groupIndex = dataItem.groupIndex) !== null && _dataItem$groupIndex !== void 0 ? _dataItem$groupIndex : undefined;
      if (index >= 0) {
        var _context;
        if (!renderData[index]) {
          let groupTitle = groups === null || groups === void 0 ? void 0 : groups[index];
          let hideTitle = false;
          if (!groupTitle) {
            if (index === 0) {
              groupTitle = translation.defaultGroupSR;
              hideTitle = true;
            } else {
              (0, _componentHelper.warn)(`Missing group title for groupIndex: ${index}`);
              groupTitle = `${translation.missingGroup} ${index + 1}`;
            }
          }
          renderData[index] = {
            groupTitle,
            hideTitle,
            groupData: []
          };
        }
        (0, _push.default)(_context = renderData[index].groupData).call(_context, dataItem);
      } else {
        (0, _push.default)(noIndex).call(noIndex, dataItem);
      }
    });
  }
  if (noIndex.length > 0) {
    (0, _push.default)(renderData).call(renderData, {
      groupTitle: renderData.length > 0 ? translation.noGroupSR : undefined,
      hideTitle: true,
      groupData: noIndex
    });
  }
  return renderData;
}
DrawerList.Options = _react.default.memo(({
  children,
  className,
  triangleRef,
  cacheHash,
  showFocusRing = false,
  hasGroups = false,
  ref,
  ...rest
}) => {
  return (0, _jsxRuntime.jsxs)(_Element.default, {
    internalClass: false,
    as: hasGroups ? 'span' : 'ul',
    className: (0, _clsx.default)('dnb-drawer-list__options', className, showFocusRing && 'dnb-drawer-list__options--focusring'),
    ...rest,
    ref: ref,
    children: [children, (0, _jsxRuntime.jsx)(_Element.default, {
      internalClass: false,
      as: hasGroups ? 'span' : 'li',
      className: "dnb-drawer-list__arrow",
      "aria-hidden": true,
      ref: triangleRef
    })]
  });
}, (prevProps, nextProps) => {
  if (!prevProps.cacheHash) {
    return false;
  }
  return prevProps.cacheHash === nextProps.cacheHash;
});
DrawerList.Item = _DrawerListItem.DrawerListItem;
DrawerList.HorizontalItem = _DrawerListItem.DrawerListHorizontalItem;
(0, _withComponentMarkers.default)(DrawerList, {
  _supportsSpacingProps: true
});
function OnMounted({
  addObservers,
  removeObservers
}) {
  (0, _useMountEffect.default)(() => {
    addObservers();
    return () => {
      removeObservers();
    };
  });
  return null;
}
var _default = exports.default = DrawerList;
//# sourceMappingURL=DrawerList.js.map