@primer/react/lib/ActionList/List.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var styled = require('styled-components');
var sx = require('../sx.js');
var ActionListContainerContext = require('./ActionListContainerContext.js');
var defaultSxProp = require('../utils/defaultSxProp.js');
var useSlots = require('../hooks/useSlots.js');
var Heading = require('./Heading.js');
var useId = require('../hooks/useId.js');
var shared = require('./shared.js');
var useProvidedRefOrCreate = require('../hooks/useProvidedRefOrCreate.js');
require('@primer/behaviors/utils');
var behaviors = require('@primer/behaviors');
var useFocusZone = require('../hooks/useFocusZone.js');
var clsx = require('clsx');
require('../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
require('../FeatureFlags/DefaultFeatureFlags.js');
var ActionList_module = require('./ActionList.module.css.js');
var featureflag = require('./featureflag.js');
var merge = require('deepmerge');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var merge__default = /*#__PURE__*/_interopDefault(merge);

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const ListBox = styled__default.default.ul.withConfig({
  displayName: "List__ListBox",
  componentId: "sc-1x7olzq-0"
})(sx.default);
const List = /*#__PURE__*/React__default.default.forwardRef(({
  variant = 'inset',
  selectionVariant,
  showDividers = false,
  role,
  sx: sxProp = defaultSxProp.defaultSxProp,
  className,
  ...props
}, forwardedRef) => {
  var _slots$heading$props$;
  const styles = {
    margin: 0,
    paddingInlineStart: 0,
    // reset ul styles
    paddingY: variant === 'inset' ? 2 : 0
  };
  const [slots, childrenWithoutSlots] = useSlots.useSlots(props.children, {
    heading: Heading.Heading
  });
  const headingId = useId.useId();

  /** if list is inside a Menu, it will get a role from the Menu */
  const {
    listRole: listRoleFromContainer,
    listLabelledBy,
    selectionVariant: containerSelectionVariant,
    // TODO: Remove after DropdownMenu2 deprecation
    enableFocusZone: enableFocusZoneFromContainer
  } = React__default.default.useContext(ActionListContainerContext.ActionListContainerContext);
  const ariaLabelledBy = slots.heading ? (_slots$heading$props$ = slots.heading.props.id) !== null && _slots$heading$props$ !== undefined ? _slots$heading$props$ : headingId : listLabelledBy;
  const listRole = role || listRoleFromContainer;
  const listRef = useProvidedRefOrCreate.useProvidedRefOrCreate(forwardedRef);
  let enableFocusZone = false;
  if (enableFocusZoneFromContainer !== undefined) enableFocusZone = enableFocusZoneFromContainer;else if (listRole) enableFocusZone = ['menu', 'menubar', 'listbox'].includes(listRole);
  useFocusZone.useFocusZone({
    disabled: !enableFocusZone,
    containerRef: listRef,
    bindKeys: behaviors.FocusKeys.ArrowVertical | behaviors.FocusKeys.HomeAndEnd | behaviors.FocusKeys.PageUpDown,
    focusOutBehavior: listRole === 'menu' ? 'wrap' : undefined
  });
  const enabled = useFeatureFlag.useFeatureFlag(featureflag.actionListCssModulesFlag);
  return /*#__PURE__*/React__default.default.createElement(shared.ListContext.Provider, {
    value: {
      variant,
      selectionVariant: selectionVariant || containerSelectionVariant,
      showDividers,
      role: listRole,
      headingId
    }
  }, slots.heading, enabled ? sxProp !== defaultSxProp.defaultSxProp ? /*#__PURE__*/React__default.default.createElement(ListBox, _extends({
    sx: merge__default.default(styles, sxProp),
    className: clsx.clsx(ActionList_module.ActionList, className),
    role: listRole,
    "aria-labelledby": ariaLabelledBy,
    ref: listRef,
    "data-dividers": showDividers,
    "data-variant": variant
  }, props), childrenWithoutSlots) : /*#__PURE__*/React__default.default.createElement("ul", _extends({
    className: clsx.clsx(ActionList_module.ActionList, className),
    role: listRole,
    "aria-labelledby": ariaLabelledBy,
    ref: listRef,
    "data-dividers": showDividers,
    "data-variant": variant
  }, props), childrenWithoutSlots) : /*#__PURE__*/React__default.default.createElement(ListBox, _extends({
    sx: merge__default.default(styles, sxProp),
    role: listRole,
    "aria-labelledby": ariaLabelledBy
  }, props, {
    ref: listRef,
    className: className
  }), childrenWithoutSlots));
});
List.displayName = 'ActionList';

exports.List = List;