@primer/react 38.0.0-rc.0 → 38.0.0-rc.09f015db1

package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts

@@ -0,0 +1,54 @@
+import React, { type FC, type PropsWithChildren } from 'react';
+import type { IconProps } from '@primer/octicons-react';
+import type { FCWithSlotMarker } from '../../utils/types';
+export type UnderlinePanelsProps = {
+    /**
+     * Tabs (UnderlinePanels.Tab) and panels (UnderlinePanels.Panel) to render
+     */
+    children: React.ReactNode;
+    /**
+     * Accessible name for the tab list
+     */
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    /**
+     * ID of the element containing the name for the tab list
+     */
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    /**
+     * Custom string to use when generating the IDs of tabs and `aria-labelledby` for the panels
+     */
+    id?: string;
+    /**
+     * Loading state for all counters. It displays loading animation for individual counters until all are resolved. It is needed to prevent multiple layout shift.
+     */
+    loadingCounters?: boolean;
+    /**
+     * Class name for custom styling
+     */
+    className?: string;
+};
+export type TabProps = PropsWithChildren<{
+    /**
+     * Whether this is the selected tab
+     */
+    'aria-selected'?: boolean;
+    /**
+     * Callback that will trigger both on click selection and keyboard selection.
+     */
+    onSelect?: (event: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Content of CounterLabel rendered after tab text label
+     */
+    counter?: number | string;
+    /**
+     *  Icon rendered before the tab text label
+     */
+    icon?: FC<IconProps>;
+}>;
+export type PanelProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.FC<UnderlinePanelsProps> & import("../..").SlotMarker & {
+    Panel: FCWithSlotMarker<PanelProps>;
+    Tab: FCWithSlotMarker<TabProps>;
+};
+export default _default;
+//# sourceMappingURL=UnderlinePanels.d.ts.map

package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAerD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAA;CACrB,CAAC,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;;;;;AA8J7D,wBAA2D"}

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -0,0 +1,220 @@
+import { c } from 'react-compiler-runtime';
+import React, { useState, useRef, useEffect, Children, isValidElement, cloneElement } from 'react';
+import { TabContainerElement } from '@github/tab-container-element';
+import { createComponent } from '../../utils/create-component.js';
+import { UnderlineWrapper, UnderlineItemList, UnderlineItem } from '../../internal/components/UnderlineTabbedInterface.js';
+import { invariant } from '../../utils/invariant.js';
+import { useResizeObserver } from '../../hooks/useResizeObserver.js';
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect.js';
+import classes from './UnderlinePanels.module.css.js';
+import { clsx } from 'clsx';
+import { isSlot } from '../../utils/is-slot.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from '../../hooks/useId.js';
+
+const TabContainerComponent = createComponent(TabContainerElement, 'tab-container');
+const UnderlinePanels = ({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  children,
+  loadingCounters,
+  className,
+  ...props
+}) => {
+  const [iconsVisible, setIconsVisible] = useState(true);
+  const wrapperRef = useRef(null);
+  const listRef = useRef(null);
+  // We need to always call useId() because React Hooks must be
+  // called in the exact same order in every component render
+  const parentId = useId(props.id);
+  const [tabs, setTabs] = useState([]);
+  const [tabPanels, setTabPanels] = useState([]);
+
+  // Make sure we have fresh prop data whenever the tabs or panels are updated (keep aria-selected current)
+  useEffect(() => {
+    // Loop through the chidren, if it's a tab, then add id="{id}-tab-{index}"
+    // If it's a panel, then add aria-labelledby="{id}-tab-{index}"
+    let tabIndex = 0;
+    let panelIndex = 0;
+    const childrenWithProps = Children.map(children, child => {
+      if (/*#__PURE__*/isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) {
+        return /*#__PURE__*/cloneElement(child, {
+          id: `${parentId}-tab-${tabIndex++}`,
+          loadingCounters,
+          iconsVisible
+        });
+      }
+      if (/*#__PURE__*/isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) {
+        const childPanel = child;
+        return /*#__PURE__*/cloneElement(childPanel, {
+          'aria-labelledby': `${parentId}-tab-${panelIndex++}`
+        });
+      }
+      return child;
+    });
+    const newTabs = Children.toArray(childrenWithProps).filter(child_0 => {
+      return /*#__PURE__*/isValidElement(child_0) && (child_0.type === Tab || isSlot(child_0, Tab));
+    });
+    const newTabPanels = Children.toArray(childrenWithProps).filter(child_1 => /*#__PURE__*/isValidElement(child_1) && (child_1.type === Panel || isSlot(child_1, Panel)));
+    setTabs(newTabs);
+    setTabPanels(newTabPanels);
+  }, [children, parentId, loadingCounters, iconsVisible]);
+  const tabsHaveIcons = tabs.some(tab => /*#__PURE__*/React.isValidElement(tab) && tab.props.icon);
+
+  // this is a workaround to get the list's width on the first render
+  const [listWidth, setListWidth] = useState(0);
+  useIsomorphicLayoutEffect(() => {
+    var _listRef$current$getB, _listRef$current;
+    if (!tabsHaveIcons) {
+      return;
+    }
+    setListWidth((_listRef$current$getB = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.getBoundingClientRect().width) !== null && _listRef$current$getB !== void 0 ? _listRef$current$getB : 0);
+  }, [tabsHaveIcons]);
+
+  // when the wrapper resizes, check if the icons should be visible
+  // by comparing the wrapper width to the list width
+  useResizeObserver(resizeObserverEntries => {
+    if (!tabsHaveIcons) {
+      return;
+    }
+    const wrapperWidth = resizeObserverEntries[0].contentRect.width;
+    setIconsVisible(wrapperWidth > listWidth);
+  }, wrapperRef, []);
+  if (process.env.NODE_ENV !== "production") {
+    const selectedTabs = tabs.filter(tab_0 => {
+      const ariaSelected = /*#__PURE__*/React.isValidElement(tab_0) && tab_0.props['aria-selected'];
+      return ariaSelected === true || ariaSelected === 'true';
+    });
+    !(selectedTabs.length <= 1) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Only one tab can be selected at a time.') : invariant(false) : void 0;
+    !(tabs.length === tabPanels.length) ? process.env.NODE_ENV !== "production" ? invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`) : invariant(false) : void 0;
+  }
+  return /*#__PURE__*/jsxs(TabContainerComponent, {
+    children: [/*#__PURE__*/jsx(UnderlineWrapper, {
+      ref: wrapperRef,
+      slot: "tablist-wrapper",
+      "data-icons-visible": iconsVisible,
+      className: clsx(className, classes.StyledUnderlineWrapper),
+      ...props,
+      children: /*#__PURE__*/jsx(UnderlineItemList, {
+        ref: listRef,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        role: "tablist",
+        children: tabs
+      })
+    }), tabPanels]
+  });
+};
+UnderlinePanels.displayName = "UnderlinePanels";
+const Tab = t0 => {
+  const $ = c(14);
+  let ariaSelected;
+  let onSelect;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      "aria-selected": ariaSelected,
+      onSelect,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = ariaSelected;
+    $[2] = onSelect;
+    $[3] = props;
+  } else {
+    ariaSelected = $[1];
+    onSelect = $[2];
+    props = $[3];
+  }
+  let t1;
+  if ($[4] !== onSelect) {
+    t1 = event => {
+      if (!event.defaultPrevented && typeof onSelect === "function") {
+        onSelect(event);
+      }
+    };
+    $[4] = onSelect;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const clickHandler = t1;
+  let t2;
+  if ($[6] !== onSelect) {
+    t2 = event_0 => {
+      if ((event_0.key === " " || event_0.key === "Enter") && !event_0.defaultPrevented && typeof onSelect === "function") {
+        onSelect(event_0);
+      }
+    };
+    $[6] = onSelect;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const keyDownHandler = t2;
+  const t3 = ariaSelected ? 0 : -1;
+  let t4;
+  if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== keyDownHandler || $[11] !== props || $[12] !== t3) {
+    t4 = /*#__PURE__*/jsx(UnderlineItem, {
+      as: "button",
+      role: "tab",
+      tabIndex: t3,
+      "aria-selected": ariaSelected,
+      type: "button",
+      onClick: clickHandler,
+      onKeyDown: keyDownHandler,
+      ...props
+    });
+    $[8] = ariaSelected;
+    $[9] = clickHandler;
+    $[10] = keyDownHandler;
+    $[11] = props;
+    $[12] = t3;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
+};
+Tab.displayName = 'UnderlinePanels.Tab';
+const Panel = t0 => {
+  const $ = c(6);
+  let children;
+  let rest;
+  if ($[0] !== t0) {
+    ({
+      children,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = rest;
+  } else {
+    children = $[1];
+    rest = $[2];
+  }
+  let t1;
+  if ($[3] !== children || $[4] !== rest) {
+    t1 = /*#__PURE__*/jsx("div", {
+      role: "tabpanel",
+      ...rest,
+      children: children
+    });
+    $[3] = children;
+    $[4] = rest;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+};
+Panel.displayName = 'UnderlinePanels.Panel';
+var UnderlinePanels$1 = Object.assign(UnderlinePanels, {
+  Panel,
+  Tab
+});
+UnderlinePanels.__SLOT__ = Symbol('UnderlinePanels');
+Tab.__SLOT__ = Symbol('UnderlinePanels.Tab');
+Panel.__SLOT__ = Symbol('UnderlinePanels.Panel');
+
+export { UnderlinePanels$1 as default };

package/dist/experimental/index.d.ts

@@ -0,0 +1,48 @@
+/**
+ * This is the place where we keep components that are not part of the public
+ * api yet (not in main bundle). We don't recommend using it in production.
+ *
+ * But, they are published on npm and you can import them for experimentation/feedback.
+ * example: import {ActionList} from '@primer/react/drafts
+ */
+export { Blankslate } from '../Blankslate';
+export type { BlankslateProps } from '../Blankslate';
+export { ButtonBase } from '../Button';
+export type { ButtonBaseProps } from '../Button';
+export { DataTable, Table, createColumnHelper } from '../DataTable';
+export type { DataTableProps, TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableHeaderProps, TableCellProps, TableContainerProps, TableTitleProps, TableSubtitleProps, TableActionsProps, Column, CellAlignment, ColumnWidth, UniqueRow, ObjectPaths, } from '../DataTable';
+export * from '../Dialog/Dialog';
+export { InlineMessage } from '../InlineMessage';
+export type { InlineMessageProps } from '../InlineMessage';
+export { PageHeader } from '../PageHeader';
+export type { PageHeaderProps, TitleProps, TitleProps as PageHeaderTitleProps, ActionsProps as PageHeaderActionsProps, } from '../PageHeader';
+export * from '../Hidden';
+export * from './hooks';
+export { NavList } from '../NavList';
+export type { NavListProps, NavListItemProps, NavListSubNavProps, NavListGroupProps, NavListLeadingVisualProps, NavListTrailingVisualProps, NavListDividerProps, } from '../NavList';
+export * from './SelectPanel2';
+export { Tooltip } from '../TooltipV2';
+export type { TooltipProps } from '../TooltipV2';
+export * from '../ActionBar';
+export { ScrollableRegion } from '../ScrollableRegion';
+export type { ScrollableRegionProps } from '../ScrollableRegion';
+export { Stack } from '../Stack';
+export type { StackProps, StackItemProps } from '../Stack';
+export { Announce, AriaStatus, AriaAlert } from '../live-region';
+export type { AnnounceProps, AriaStatusProps, AriaAlertProps } from '../live-region';
+export { UnderlinePanels } from './UnderlinePanels';
+export type { UnderlinePanelsProps, UnderlinePanelsTabProps, UnderlinePanelsPanelProps } from './UnderlinePanels';
+export { SkeletonBox } from '../Skeleton';
+export type { SkeletonBoxProps } from '../Skeleton';
+export { SkeletonText } from '../SkeletonText';
+export type { SkeletonTextProps } from '../SkeletonText';
+export { SkeletonAvatar } from '../SkeletonAvatar';
+export type { SkeletonAvatarProps } from '../SkeletonAvatar';
+export { FeatureFlags, DefaultFeatureFlags, useFeatureFlag } from '../FeatureFlags';
+export type { FeatureFlagsProps } from '../FeatureFlags';
+export { FilteredActionList } from '../FilteredActionList';
+export type { FilteredActionListProps } from '../FilteredActionList';
+export { IssueLabel } from './IssueLabel';
+export type { IssueLabelProps } from './IssueLabel';
+export * from '../KeybindingHint';
+//# sourceMappingURL=index.d.ts.map

package/dist/experimental/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"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"}

package/dist/experimental/index.js

@@ -0,0 +1,31 @@
+"use client";
+export { Blankslate } from '../Blankslate/index.js';
+export { Table } from '../DataTable/index.js';
+export { Dialog } from '../Dialog/Dialog.js';
+export { default as ActionBar } from '../ActionBar/index.js';
+export { Stack } from '../Stack/index.js';
+export { ButtonBase } from '../Button/ButtonBase.js';
+export { DataTable } from '../DataTable/DataTable.js';
+export { createColumnHelper } from '../DataTable/column.js';
+export { InlineMessage } from '../InlineMessage/InlineMessage.js';
+export { PageHeader } from '../PageHeader/PageHeader.js';
+export { NavList } from '../NavList/NavList.js';
+export { Tooltip } from '../TooltipV2/Tooltip.js';
+export { ScrollableRegion } from '../ScrollableRegion/ScrollableRegion.js';
+export { Announce } from '../live-region/Announce.js';
+export { AriaStatus } from '../live-region/AriaStatus.js';
+export { AriaAlert } from '../live-region/AriaAlert.js';
+export { default as UnderlinePanels } from './UnderlinePanels/UnderlinePanels.js';
+export { SkeletonBox } from '../Skeleton/SkeletonBox.js';
+export { SkeletonText } from '../SkeletonText/SkeletonText.js';
+export { SkeletonAvatar } from '../SkeletonAvatar/SkeletonAvatar.js';
+export { FeatureFlags } from '../FeatureFlags/FeatureFlags.js';
+export { DefaultFeatureFlags } from '../FeatureFlags/DefaultFeatureFlags.js';
+export { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
+export { FilteredActionList } from '../FilteredActionList/FilteredActionList.js';
+export { IssueLabel } from './IssueLabel/IssueLabel.js';
+export { Hidden } from '../Hidden/Hidden.js';
+export { useOverflow } from '../hooks/useOverflow.js';
+export { useSlots } from '../hooks/useSlots.js';
+export { SelectPanel } from './SelectPanel2/SelectPanel.js';
+export { KeybindingHint, getAccessibleKeybindingHintString } from '../KeybindingHint/KeybindingHint.js';

package/dist/hooks/useMenuKeyboardNavigation.js

@@ -0,0 +1,139 @@
+import { c } from 'react-compiler-runtime';
+import React from 'react';
+import { iterateFocusableElements } from '@primer/behaviors/utils';
+import { useMenuInitialFocus } from './useMenuInitialFocus.js';
+import { useMnemonics } from './useMnemonics.js';
+
+/**
+ * Keyboard navigation is a mix of 4 hooks
+ * 1. useMenuInitialFocus
+ * 2. useTypeaheadFocus
+ * 3. useCloseMenuOnTab
+ * 4. useMoveFocusToMenuItem
+ */
+const useMenuKeyboardNavigation = (open, onClose, containerRef, anchorRef, t0) => {
+  const isSubmenu = t0 === undefined ? false : t0;
+  useMenuInitialFocus(open, containerRef, anchorRef);
+  useMnemonics(open, containerRef);
+  useCloseMenuOnTab(open, onClose, containerRef, anchorRef);
+  useMoveFocusToMenuItem(open, containerRef, anchorRef);
+  useCloseSubmenuOnArrow(open, isSubmenu, onClose, containerRef);
+};
+
+/**
+ * When Tab or Shift+Tab is pressed, the menu should close
+ * and the focus should naturally move to the next item
+ */
+const useCloseMenuOnTab = (open, onClose, containerRef, anchorRef) => {
+  const $ = c(6);
+  let t0;
+  let t1;
+  if ($[0] !== anchorRef || $[1] !== containerRef || $[2] !== onClose || $[3] !== open) {
+    t0 = () => {
+      const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+      const anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+      const handler = event => {
+        if (open && event.key === "Tab") {
+          onClose === null || onClose === void 0 ? void 0 : onClose("tab");
+        }
+      };
+      container === null || container === void 0 ? void 0 : container.addEventListener("keydown", handler);
+      anchor === null || anchor === void 0 ? void 0 : anchor.addEventListener("keydown", handler);
+      return () => {
+        container === null || container === void 0 ? void 0 : container.removeEventListener("keydown", handler);
+        anchor === null || anchor === void 0 ? void 0 : anchor.removeEventListener("keydown", handler);
+      };
+    };
+    t1 = [open, onClose, containerRef, anchorRef];
+    $[0] = anchorRef;
+    $[1] = containerRef;
+    $[2] = onClose;
+    $[3] = open;
+    $[4] = t0;
+    $[5] = t1;
+  } else {
+    t0 = $[4];
+    t1 = $[5];
+  }
+  React.useEffect(t0, t1);
+};
+
+/**
+ * Close submenu when left arrow key is pressed
+ */
+const useCloseSubmenuOnArrow = (open, isSubmenu, onClose, containerRef) => {
+  const $ = c(6);
+  let t0;
+  let t1;
+  if ($[0] !== containerRef || $[1] !== isSubmenu || $[2] !== onClose || $[3] !== open) {
+    t0 = () => {
+      const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+      const handler = event => {
+        if (open && isSubmenu && event.key === "ArrowLeft") {
+          onClose === null || onClose === void 0 ? void 0 : onClose("arrow-left");
+        }
+      };
+      container === null || container === void 0 ? void 0 : container.addEventListener("keydown", handler);
+      return () => {
+        container === null || container === void 0 ? void 0 : container.removeEventListener("keydown", handler);
+      };
+    };
+    t1 = [open, onClose, containerRef, isSubmenu];
+    $[0] = containerRef;
+    $[1] = isSubmenu;
+    $[2] = onClose;
+    $[3] = open;
+    $[4] = t0;
+    $[5] = t1;
+  } else {
+    t0 = $[4];
+    t1 = $[5];
+  }
+  React.useEffect(t0, t1);
+};
+
+/**
+ * When Arrow Keys are pressed and the focus is on the anchor,
+ * focus should move to a menu item
+ */
+const useMoveFocusToMenuItem = (open, containerRef, anchorRef) => {
+  const $ = c(5);
+  let t0;
+  let t1;
+  if ($[0] !== anchorRef || $[1] !== containerRef || $[2] !== open) {
+    t0 = () => {
+      const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+      const anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+      const handler = event => {
+        if (!open || !container) {
+          return;
+        }
+        const iterable = iterateFocusableElements(container);
+        if (event.key === "ArrowDown") {
+          const firstElement = iterable.next().value;
+          setTimeout(() => firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus());
+        } else {
+          if (event.key === "ArrowUp") {
+            const elements = [...iterable];
+            const lastElement = elements[elements.length - 1];
+            setTimeout(() => lastElement.focus());
+          }
+        }
+      };
+      anchor === null || anchor === void 0 ? void 0 : anchor.addEventListener("keydown", handler);
+      return () => anchor === null || anchor === void 0 ? void 0 : anchor.addEventListener("keydown", handler);
+    };
+    t1 = [open, containerRef, anchorRef];
+    $[0] = anchorRef;
+    $[1] = containerRef;
+    $[2] = open;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t0 = $[3];
+    t1 = $[4];
+  }
+  React.useEffect(t0, t1);
+};
+
+export { useMenuKeyboardNavigation };

package/dist/hooks/useMnemonics.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const useMnemonics: (open: boolean, providedRef?: React.RefObject<HTMLElement>) => {
+    containerRef: React.RefObject<HTMLElement>;
+};
+export declare const isAlphabetKey: (event: KeyboardEvent) => boolean;
+//# sourceMappingURL=useMnemonics.d.ts.map

package/dist/hooks/useMnemonics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMnemonics.d.ts","sourceRoot":"","sources":["../../src/hooks/useMnemonics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,eAAO,MAAM,YAAY,GAAI,MAAM,OAAO,EAAE,cAAc,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;;CA2ErF,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,aAAa,YAEjD,CAAA"}

package/dist/hooks/useMnemonics.js

@@ -0,0 +1,115 @@
+import { c } from 'react-compiler-runtime';
+import React from 'react';
+import { iterateFocusableElements } from '@primer/behaviors/utils';
+import { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js';
+
+/*
+ * A mnemonic indicates to the user which key to press (single)
+ * to activate a command or navigate to a component
+ * typically appearing in a menu title, menu item, or the text of a button.
+ */
+
+const useMnemonics = (open, providedRef) => {
+  const $ = c(10);
+  const containerRef = useProvidedRefOrCreate(providedRef);
+  let t0;
+  let t1;
+  if ($[0] !== containerRef || $[1] !== open) {
+    t0 = function addAriaKeyshortcuts() {
+      if (!open || !containerRef.current) {
+        return;
+      }
+      const container = containerRef.current;
+      const focusableItems = [...iterateFocusableElements(container)];
+      focusableItems.map(_temp);
+    };
+    t1 = [open, containerRef];
+    $[0] = containerRef;
+    $[1] = open;
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t0 = $[2];
+    t1 = $[3];
+  }
+  React.useEffect(t0, t1);
+  let t2;
+  let t3;
+  if ($[4] !== containerRef || $[5] !== open) {
+    t2 = function handleKeyDown() {
+      if (!open || !containerRef.current) {
+        return;
+      }
+      const container_0 = containerRef.current;
+      const handler = event => {
+        var _elementToFocus;
+        const activeElement = document.activeElement;
+        if (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA") {
+          return;
+        }
+        const hasModifier = event.ctrlKey || event.altKey || event.metaKey;
+        if (hasModifier) {
+          return;
+        }
+        if (!isAlphabetKey(event)) {
+          return;
+        }
+        event.stopPropagation();
+        const query = event.key.toLowerCase();
+        let elementToFocus;
+        const focusableItems_0 = [...iterateFocusableElements(container_0)];
+        const itemsMatchingKey = focusableItems_0.filter(item_0 => {
+          var _item_0$getAttribute;
+          const keyshortcuts = (_item_0$getAttribute = item_0.getAttribute("aria-keyshortcuts")) === null || _item_0$getAttribute === void 0 ? void 0 : _item_0$getAttribute.split(" ").map(_temp2);
+          return keyshortcuts && keyshortcuts.includes(query);
+        });
+        const currentActiveIndex = itemsMatchingKey.indexOf(activeElement);
+        if (currentActiveIndex === itemsMatchingKey.length - 1) {
+          elementToFocus = itemsMatchingKey[0];
+        } else {
+          elementToFocus = itemsMatchingKey.find((item_1, index) => index > currentActiveIndex);
+        }
+        (_elementToFocus = elementToFocus) === null || _elementToFocus === void 0 ? void 0 : _elementToFocus.focus();
+      };
+      container_0.addEventListener("keydown", handler);
+      return () => container_0.removeEventListener("keydown", handler);
+    };
+    t3 = [open, containerRef];
+    $[4] = containerRef;
+    $[5] = open;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t2 = $[6];
+    t3 = $[7];
+  }
+  React.useEffect(t2, t3);
+  let t4;
+  if ($[8] !== containerRef) {
+    t4 = {
+      containerRef
+    };
+    $[8] = containerRef;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+};
+const isAlphabetKey = event => {
+  return event.key.length === 1 && /[a-z\d]/i.test(event.key);
+};
+function _temp(item) {
+  if (item.getAttribute("aria-keyshortcuts")) {
+    return;
+  }
+  const firstLetter = item.textContent.toLowerCase()[0];
+  if (firstLetter) {
+    item.setAttribute("aria-keyshortcuts", firstLetter);
+  }
+}
+function _temp2(shortcut) {
+  return shortcut.toLowerCase();
+}
+
+export { isAlphabetKey, useMnemonics };

package/dist/hooks/useOpenAndCloseFocus.js

@@ -0,0 +1,46 @@
+import { c } from 'react-compiler-runtime';
+import { useEffect } from 'react';
+import { iterateFocusableElements } from '@primer/behaviors/utils';
+
+function useOpenAndCloseFocus(t0) {
+  const $ = c(6);
+  const {
+    initialFocusRef,
+    returnFocusRef,
+    containerRef,
+    preventFocusOnOpen
+  } = t0;
+  let t1;
+  let t2;
+  if ($[0] !== containerRef || $[1] !== initialFocusRef || $[2] !== preventFocusOnOpen || $[3] !== returnFocusRef) {
+    t1 = () => {
+      if (!preventFocusOnOpen) {
+        if (initialFocusRef && initialFocusRef.current) {
+          initialFocusRef.current.focus();
+        } else {
+          if (containerRef.current) {
+            const firstItem = iterateFocusableElements(containerRef.current).next().value;
+            firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+          }
+        }
+      }
+      const returnFocusRefCurrent = returnFocusRef.current;
+      return function () {
+        returnFocusRefCurrent === null || returnFocusRefCurrent === void 0 ? void 0 : returnFocusRefCurrent.focus();
+      };
+    };
+    t2 = [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen];
+    $[0] = containerRef;
+    $[1] = initialFocusRef;
+    $[2] = preventFocusOnOpen;
+    $[3] = returnFocusRef;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t1 = $[4];
+    t2 = $[5];
+  }
+  useEffect(t1, t2);
+}
+
+export { useOpenAndCloseFocus };