@wordpress/components/build/tabs/tablist.js

UI components for WordPress.

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/components/src/tabs/tablist.tsx
var tablist_exports = {};
__export(tablist_exports, {
  TabList: () => TabList
});
module.exports = __toCommonJS(tablist_exports);
var Ariakit = __toESM(require("@ariakit/react"));
var import_clsx = __toESM(require("clsx"));
var import_warning = __toESM(require("@wordpress/warning"));
var import_element = require("@wordpress/element");
var import_compose = require("@wordpress/compose");
var import_context = require("./context");
var import_styles = require("./styles");
var import_element_rect = require("../utils/element-rect");
var import_use_track_overflow = require("./use-track-overflow");
var import_use_animated_offset_rect = require("../utils/hooks/use-animated-offset-rect");
var import_jsx_runtime = require("react/jsx-runtime");
var DEFAULT_SCROLL_MARGIN = 24;
function useScrollRectIntoView(parent, rect, {
  margin = DEFAULT_SCROLL_MARGIN
} = {}) {
  (0, import_element.useLayoutEffect)(() => {
    if (!parent || !rect) {
      return;
    }
    const {
      scrollLeft: parentScroll
    } = parent;
    const parentWidth = parent.getBoundingClientRect().width;
    const {
      left: childLeft,
      width: childWidth
    } = rect;
    const parentRightEdge = parentScroll + parentWidth;
    const childRightEdge = childLeft + childWidth;
    const rightOverflow = childRightEdge + margin - parentRightEdge;
    const leftOverflow = parentScroll - (childLeft - margin);
    let scrollLeft = null;
    if (leftOverflow > 0) {
      scrollLeft = parentScroll - leftOverflow;
    } else if (rightOverflow > 0) {
      scrollLeft = parentScroll + rightOverflow;
    }
    if (scrollLeft !== null) {
      parent.scroll?.({
        left: scrollLeft
      });
    }
  }, [margin, parent, rect]);
}
var TabList = (0, import_element.forwardRef)(function TabList2({
  children,
  ...otherProps
}, ref) {
  var _useTabsContext;
  const {
    store
  } = (_useTabsContext = (0, import_context.useTabsContext)()) !== null && _useTabsContext !== void 0 ? _useTabsContext : {};
  const selectedId = Ariakit.useStoreState(store, "selectedId");
  const activeId = Ariakit.useStoreState(store, "activeId");
  const selectOnMove = Ariakit.useStoreState(store, "selectOnMove");
  const items = Ariakit.useStoreState(store, "items");
  const [parent, setParent] = (0, import_element.useState)();
  const refs = (0, import_compose.useMergeRefs)([ref, setParent]);
  const selectedItem = store?.item(selectedId);
  const renderedItems = Ariakit.useStoreState(store, "renderedItems");
  const selectedItemIndex = renderedItems && selectedItem ? renderedItems.indexOf(selectedItem) : -1;
  const selectedRect = (0, import_element_rect.useTrackElementOffsetRect)(selectedItem?.element, [selectedItemIndex]);
  const overflow = (0, import_use_track_overflow.useTrackOverflow)(parent, {
    first: items?.at(0)?.element,
    last: items?.at(-1)?.element
  });
  (0, import_use_animated_offset_rect.useAnimatedOffsetRect)(parent, selectedRect, {
    prefix: "selected",
    dataAttribute: "indicator-animated",
    transitionEndFilter: (event) => event.pseudoElement === "::before",
    roundRect: true
  });
  useScrollRectIntoView(parent, selectedRect);
  const onBlur = () => {
    if (!selectOnMove) {
      return;
    }
    if (selectedId !== activeId) {
      store?.setActiveId(selectedId);
    }
  };
  if (!store) {
    globalThis.SCRIPT_DEBUG === true ? (0, import_warning.default)("`Tabs.TabList` must be wrapped in a `Tabs` component.") : void 0;
    return null;
  }
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTabList, {
    ref: refs,
    store,
    render: (props) => {
      var _props$tabIndex;
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
        ...props,
        // Fallback to -1 to prevent browsers from making the tablist
        // tabbable when it is a scrolling container.
        tabIndex: (_props$tabIndex = props.tabIndex) !== null && _props$tabIndex !== void 0 ? _props$tabIndex : -1
      });
    },
    onBlur,
    "data-select-on-move": selectOnMove ? "true" : "false",
    ...otherProps,
    className: (0, import_clsx.default)(overflow.first && "is-overflowing-first", overflow.last && "is-overflowing-last", otherProps.className),
    children
  });
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  TabList
});
//# sourceMappingURL=tablist.js.map