@primer/react 38.0.0-rc.389f01088 → 38.0.0-rc.4

package/dist/TooltipV2/Tooltip.js

@@ -0,0 +1,294 @@
+import React, { Children, useRef, useState, useMemo, useEffect } from 'react';
+import { invariant } from '../utils/invariant.js';
+import { warning } from '../utils/warning.js';
+import { getAnchoredPosition } from '@primer/behaviors';
+import { isSupported, apply } from '@oddbird/popover-polyfill/fn';
+import { clsx } from 'clsx';
+import classes from './Tooltip.module.css.js';
+import VisuallyHidden from '../_VisuallyHidden.js';
+import useSafeTimeout from '../hooks/useSafeTimeout.js';
+import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useId } from '../hooks/useId.js';
+import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
+import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
+import { useIsMacOS } from '../hooks/useIsMacOS.js';
+import { getAccessibleKeybindingHintString, KeybindingHint } from '../KeybindingHint/KeybindingHint.js';
+
+// map tooltip direction to anchoredPosition props
+const directionToPosition = {
+  nw: {
+    side: 'outside-top',
+    align: 'end'
+  },
+  n: {
+    side: 'outside-top',
+    align: 'center'
+  },
+  ne: {
+    side: 'outside-top',
+    align: 'start'
+  },
+  e: {
+    side: 'outside-right',
+    align: 'center'
+  },
+  se: {
+    side: 'outside-bottom',
+    align: 'start'
+  },
+  s: {
+    side: 'outside-bottom',
+    align: 'center'
+  },
+  sw: {
+    side: 'outside-bottom',
+    align: 'end'
+  },
+  w: {
+    side: 'outside-left',
+    align: 'center'
+  }
+};
+
+// map anchoredPosition props to tooltip direction
+const positionToDirection = {
+  'outside-top-end': 'nw',
+  'outside-top-center': 'n',
+  'outside-top-start': 'ne',
+  'outside-right-center': 'e',
+  'outside-bottom-start': 'se',
+  'outside-bottom-center': 's',
+  'outside-bottom-end': 'sw',
+  'outside-left-center': 'w'
+};
+
+// The list is from GitHub's custom-axe-rules https://github.com/github/github/blob/master/app/assets/modules/github/axe-custom-rules.ts#L3
+const interactiveElements = ['a[href]', 'button:not([disabled])', 'summary', 'select', 'input:not([type=hidden])', 'textarea'];
+const isInteractive = element => {
+  return interactiveElements.some(selector => element.matches(selector)) || element.hasAttribute('role') && element.getAttribute('role') === 'button';
+};
+const TooltipContext = /*#__PURE__*/React.createContext({});
+const Tooltip = /*#__PURE__*/React.forwardRef(({
+  direction = 's',
+  text,
+  type = 'description',
+  children,
+  id,
+  className,
+  keybindingHint,
+  ...rest
+}, forwardedRef) => {
+  const tooltipId = useId(id);
+  const child = Children.only(children);
+  const triggerRef = useProvidedRefOrCreate(forwardedRef);
+  const tooltipElRef = useRef(null);
+  const [calculatedDirection, setCalculatedDirection] = useState(direction);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const openTimeoutRef = React.useRef(null);
+  const {
+    safeSetTimeout,
+    safeClearTimeout
+  } = useSafeTimeout();
+  const openTooltip = () => {
+    try {
+      if (tooltipElRef.current && triggerRef.current && tooltipElRef.current.hasAttribute('popover') && !tooltipElRef.current.matches(':popover-open')) {
+        const tooltip = tooltipElRef.current;
+        const trigger = triggerRef.current;
+        tooltip.showPopover();
+        setIsPopoverOpen(true);
+        /*
+         * TOOLTIP POSITIONING
+         */
+        const settings = {
+          side: directionToPosition[direction].side,
+          align: directionToPosition[direction].align
+        };
+        const {
+          top,
+          left,
+          anchorAlign,
+          anchorSide
+        } = getAnchoredPosition(tooltip, trigger, settings);
+        // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after
+        const calculatedDirection_0 = positionToDirection[`${anchorSide}-${anchorAlign}`];
+        setCalculatedDirection(calculatedDirection_0);
+        tooltip.style.top = `${top}px`;
+        tooltip.style.left = `${left}px`;
+      }
+    } catch (error) {
+      // older browsers don't support the :popover-open selector and will throw, even though we use a polyfill
+      // see https://github.com/github/issues/issues/12468
+      if (error && typeof error === 'object' && 'message' in error && typeof error.message === 'string' && error.message.includes('not a valid selector')) ; else {
+        throw error;
+      }
+    }
+  };
+  const closeTooltip = () => {
+    if (openTimeoutRef.current) {
+      safeClearTimeout(openTimeoutRef.current);
+      openTimeoutRef.current = null;
+    }
+    try {
+      if (tooltipElRef.current && triggerRef.current && tooltipElRef.current.hasAttribute('popover') && tooltipElRef.current.matches(':popover-open')) {
+        tooltipElRef.current.hidePopover();
+        setIsPopoverOpen(false);
+      } else {
+        setIsPopoverOpen(false);
+      }
+    } catch (error_0) {
+      // older browsers don't support the :popover-open selector and will throw, even though we use a polyfill
+      // see https://github.com/github/issues/issues/12468
+      if (error_0 && typeof error_0 === 'object' && 'message' in error_0 && typeof error_0.message === 'string' && error_0.message.includes('not a valid selector')) ; else {
+        throw error_0;
+      }
+    }
+  };
+
+  // context value
+  const value = useMemo(() => ({
+    tooltipId
+  }), [tooltipId]);
+  useEffect(() => {
+    if (!tooltipElRef.current || !triggerRef.current) return;
+    /*
+     * ACCESSIBILITY CHECKS
+     */
+    // Has trigger element or any of its children interactive elements?
+    const isTriggerInteractive = isInteractive(triggerRef.current);
+    const triggerChildren = triggerRef.current.childNodes;
+    // two levels deep
+    const hasInteractiveDescendant = Array.from(triggerChildren).some(child_0 => {
+      return child_0 instanceof HTMLElement && isInteractive(child_0) || Array.from(child_0.childNodes).some(grandChild => grandChild instanceof HTMLElement && isInteractive(grandChild));
+    });
+    !(isTriggerInteractive || hasInteractiveDescendant) ? process.env.NODE_ENV !== "production" ? invariant(false, 'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.') : invariant(false) : void 0;
+    // If the tooltip is used for labelling the interactive element, the trigger element or any of its children should not have aria-label
+    if (type === 'label') {
+      const hasAriaLabel = triggerRef.current.hasAttribute('aria-label');
+      const hasAriaLabelInChildren = Array.from(triggerRef.current.childNodes).some(child_1 => child_1 instanceof HTMLElement && child_1.hasAttribute('aria-label'));
+      process.env.NODE_ENV !== "production" ? warning(hasAriaLabel || hasAriaLabelInChildren, 'The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.') : void 0;
+    }
+
+    // SSR safe polyfill apply
+    if (typeof window !== 'undefined') {
+      if (!isSupported()) {
+        apply();
+      }
+    }
+    const tooltip_0 = tooltipElRef.current;
+    tooltip_0.setAttribute('popover', 'auto');
+  }, [tooltipElRef, triggerRef, direction, type]);
+  useOnEscapePress(event => {
+    if (isPopoverOpen) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      closeTooltip();
+    }
+  }, [isPopoverOpen]);
+  const isMacOS = useIsMacOS();
+  const hasAriaLabel_0 = 'aria-label' in rest;
+  return /*#__PURE__*/jsx(TooltipContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.cloneElement(child, {
+        ref: triggerRef,
+        // If it is a type description, we use tooltip to describe the trigger
+        'aria-describedby': (() => {
+          // If tooltip is not a description type, keep the original aria-describedby
+          if (type !== 'description') {
+            return child.props['aria-describedby'];
+          }
+
+          // If tooltip is a description type, append our tooltipId
+          const existingDescribedBy = child.props['aria-describedby'];
+          if (existingDescribedBy) {
+            return `${existingDescribedBy} ${tooltipId}`;
+          }
+
+          // If no existing aria-describedby, use our tooltipId
+          return tooltipId;
+        })(),
+        // If it is a label type, we use tooltip to label the trigger
+        'aria-labelledby': type === 'label' ? tooltipId : child.props['aria-labelledby'],
+        onBlur: event_0 => {
+          var _child$props$onBlur, _child$props;
+          closeTooltip();
+          (_child$props$onBlur = (_child$props = child.props).onBlur) === null || _child$props$onBlur === void 0 ? void 0 : _child$props$onBlur.call(_child$props, event_0);
+        },
+        onTouchEnd: event_1 => {
+          var _child$props$onTouchE, _child$props2;
+          (_child$props$onTouchE = (_child$props2 = child.props).onTouchEnd) === null || _child$props$onTouchE === void 0 ? void 0 : _child$props$onTouchE.call(_child$props2, event_1);
+
+          // Hide tooltips on tap to essentially disable them on touch devices;
+          // this still allows viewing the tooltip on tap-and-hold
+          safeSetTimeout(() => closeTooltip(), 10);
+        },
+        onFocus: event_2 => {
+          var _child$props$onFocus, _child$props3;
+          // only show tooltip on :focus-visible, not on :focus
+          try {
+            if (!event_2.target.matches(':focus-visible')) return;
+          } catch (_error) {
+            // jsdom (jest) does not support `:focus-visible` yet and would throw an error
+            // https://github.com/jsdom/jsdom/issues/3426
+          }
+          openTooltip();
+          (_child$props$onFocus = (_child$props3 = child.props).onFocus) === null || _child$props$onFocus === void 0 ? void 0 : _child$props$onFocus.call(_child$props3, event_2);
+        },
+        onMouseOverCapture: event_3 => {
+          // We use a `capture` event to ensure this is called first before
+          // events that might cancel the opening timeout (like `onTouchEnd`)
+          // show tooltip after mouse has been hovering for at least 50ms
+          // (prevent showing tooltip when mouse is just passing through)
+          openTimeoutRef.current = safeSetTimeout(() => {
+            var _child$props$onMouseE, _child$props4;
+            openTooltip();
+            (_child$props$onMouseE = (_child$props4 = child.props).onMouseEnter) === null || _child$props$onMouseE === void 0 ? void 0 : _child$props$onMouseE.call(_child$props4, event_3);
+          }, 50);
+        },
+        onMouseLeave: event_4 => {
+          var _child$props$onMouseL, _child$props5;
+          closeTooltip();
+          (_child$props$onMouseL = (_child$props5 = child.props).onMouseLeave) === null || _child$props$onMouseL === void 0 ? void 0 : _child$props$onMouseL.call(_child$props5, event_4);
+        }
+      }), /*#__PURE__*/jsx(BoxWithFallback, {
+        as: "span",
+        className: clsx(className, classes.Tooltip),
+        ref: tooltipElRef,
+        "data-direction": calculatedDirection,
+        ...rest,
+        // Only need tooltip role if the tooltip is a description for supplementary information
+        role: type === 'description' ? 'tooltip' : undefined
+        // stop AT from announcing the tooltip twice: when it is a label type it will be announced with "aria-labelledby",when it is a description type it will be announced with "aria-describedby"
+        ,
+        "aria-hidden": true
+        // mouse leave and enter on the tooltip itself is needed to keep the tooltip open when the mouse is over the tooltip
+        ,
+        onMouseEnter: openTooltip,
+        onMouseLeave: closeTooltip
+        // If there is an aria-label prop, always assign the ID to the parent so the accessible label can be overridden
+        ,
+        id: hasAriaLabel_0 || !keybindingHint ? tooltipId : undefined,
+        children: keybindingHint ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsxs("span", {
+            id: hasAriaLabel_0 ? undefined : tooltipId,
+            children: [text, /*#__PURE__*/jsxs(VisuallyHidden, {
+              children: ["(", getAccessibleKeybindingHintString(keybindingHint, isMacOS), ")"]
+            })]
+          }), /*#__PURE__*/jsx("span", {
+            className: clsx(classes.KeybindingHintContainer, text && classes.HasTextBefore),
+            "aria-hidden": true,
+            children: /*#__PURE__*/jsx(KeybindingHint, {
+              keys: keybindingHint,
+              format: "condensed",
+              variant: "onEmphasis",
+              size: "small"
+            })
+          })]
+        }) : text
+      })]
+    })
+  });
+});
+
+export { Tooltip, TooltipContext };

package/dist/TooltipV2/Tooltip.module.css.js

@@ -0,0 +1,5 @@
+import './Tooltip-5a80d7b2.css';
+
+var classes = {"Tooltip":"prc-TooltipV2-Tooltip-cYMVY","KeybindingHintContainer":"prc-TooltipV2-KeybindingHintContainer-iabqv","HasTextBefore":"prc-TooltipV2-HasTextBefore-cCzYC"};
+
+export { classes as default };

package/dist/TreeView/TreeView-bdf34914.css

@@ -0,0 +1,2 @@
+.prc-TreeView-TreeViewRootUlStyles-eZtxW{list-style:none;margin:0;padding:0}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0{outline:none}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0):focus-visible>div,:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0).focus-visible>div{box-shadow:var(--boxShadow-thick,inset 0 0 0 .125rem) var(--fgColor-accent,var(--color-accent-fg))}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0):focus-visible>div,:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0).focus-visible>div{outline:2px solid HighlightText;outline-offset:-2}}[data-has-leading-action]:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0){--has-leading-action:1}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn{--level:1;--toggle-width:1rem;--min-item-height:2rem;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:grid;font-size:var(--text-body-size-medium,.875rem);grid-template-areas:"spacer leadingAction toggle content trailingAction";grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;position:relative;width:100%;--leading-action-width:calc(var(--has-leading-action, 0)*1.5rem);--spacer-width:calc((var(--level) - 1)*(var(--toggle-width)/2))}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn):hover{outline:2px solid transparent;outline-offset:-2px}}@media (pointer:coarse){.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn{--toggle-width:1.5rem;--min-item-height:2.75rem}}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn):has(.prc-TreeView-TreeViewItemSkeleton-fqk59):hover{background-color:transparent;cursor:default}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn):has(.prc-TreeView-TreeViewItemSkeleton-fqk59):hover{outline:none}}.prc-TreeView-TreeViewRootUlStyles-eZtxW:where([data-omit-spacer=true]) .prc-TreeView-TreeViewItemContainer--2Rkn{grid-template-columns:0 0 0 1fr}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0[aria-current=true]>.prc-TreeView-TreeViewItemContainer--2Rkn{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0[aria-current=true]>.prc-TreeView-TreeViewItemContainer--2Rkn):after{background-color:var(--fgColor-accent,var(--color-accent-fg));border-radius:var(--borderRadius-medium,.375rem);content:"";height:1.5rem;left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - var(--base-size-12,.75rem));width:.25rem}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0[aria-current=true]>.prc-TreeView-TreeViewItemContainer--2Rkn):after{background-color:HighlightText}}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemToggle-gWUdE{align-items:flex-start;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;grid-area:toggle;height:100%;justify-content:center;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12,.75rem)/2)}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemToggleHover-nEgP-:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemToggleEnd-t-AEB{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContent-f0r0b{display:flex;gap:var(--stack-gap-condensed,.5rem);grid-area:content;height:100%;line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));padding:0 var(--base-size-8,.5rem);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2)}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContentText-smZM-{flex:1 1 auto;width:0}.prc-TreeView-TreeViewRootUlStyles-eZtxW:where([data-truncate-text=true]) .prc-TreeView-TreeViewItemContentText-smZM-{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-TreeView-TreeViewRootUlStyles-eZtxW:where([data-truncate-text=false]) .prc-TreeView-TreeViewItemContentText-smZM-{word-break:break-word}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemVisual-dRlGq{align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;height:var(--custom-line-height,1.3rem)}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemLeadingAction-VXx8I{color:var(--fgColor-muted,var(--color-fg-muted));display:flex;grid-area:leadingAction}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemLeadingAction-VXx8I)>button{flex-shrink:1}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemTrailingAction-EZETP{color:var(--fgColor-muted,var(--color-fg-muted));display:flex;grid-area:trailingAction}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemTrailingActionButton-u87Ku{flex-shrink:1}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemLevelLine-KPSSL{border-color:var(--borderColor-muted,var(--color-border-muted));border-right:var(--borderWidth-thin,.0625rem) solid;height:100%;width:100%}@media (hover:hover){.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemLevelLine-KPSSL{border-color:transparent}.prc-TreeView-TreeViewRootUlStyles-eZtxW:focus-within .prc-TreeView-TreeViewItemLevelLine-KPSSL,.prc-TreeView-TreeViewRootUlStyles-eZtxW:hover .prc-TreeView-TreeViewItemLevelLine-KPSSL{border-color:var(--borderColor-muted,var(--color-border-muted))}}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewDirectoryIcon-PHbeP{color:var(--treeViewItem-leadingVisual-iconColor-rest,var(--color-tree-view-item-directory-fill));display:grid}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewVisuallyHidden-4-mPv{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0{align-items:center;column-gap:.5rem;display:flex;height:2rem}@media (pointer:coarse){.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0{height:2.75rem}}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+1){--tree-item-loading-width:67%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+2){--tree-item-loading-width:47%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+3){--tree-item-loading-width:73%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+4){--tree-item-loading-width:64%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+5){--tree-item-loading-width:50%}.prc-TreeView-TreeItemSkeletonTextStyles-wnBY9{width:var(--tree-item-loading-width,67%)}
+/*# sourceMappingURL=TreeView-bdf34914.css.map */

package/dist/TreeView/TreeView-bdf34914.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TreeView/TreeView.module.css"],"names":[],"mappings":"AAAA,yCAGE,eAAgB,CADhB,QAAS,CADT,SA+OF,CA9NE,0EACE,YAgBF,CAdE,kMAEE,kGAOF,CALE,8BAJF,kMAKI,+BAAgC,CAEhC,iBAEJ,CADE,CAGF,wGACE,sBACF,CAGF,mFACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAQvB,gDAAyC,CAFzC,oDAA6B,CAC7B,cAAe,CAJf,YAAa,CAEb,8CAAuC,CAKvC,wEAAyE,CADzE,6FAA8F,CAP9F,iBAAkB,CAElB,UAAW,CAQX,gEAAmE,CACnE,+DAwBF,CAtBE,8FACE,wGAMF,CAJE,8BAHF,8FAII,6BAA8B,CAC9B,mBAEJ,CADE,CAGF,wBA3BF,mFA4BI,qBAAsB,CACtB,yBAWJ,CAVE,CAEA,4IAEE,4BAA6B,CAD7B,cAMF,CAHE,8BAJF,4IAKI,YAEJ,CADE,CAIJ,kHACE,+BACF,CAEA,uIACE,8GAwBF,CApBE,kJAaE,6DAAuC,CACvC,gDAAyC,CARzC,UAAW,CADX,aAAc,CAFd,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,YAeF,CAHE,8BAhBF,kJAiBI,8BAEJ,CADE,CAIJ,gFAWE,sBAAuB,CAHvB,gDAA2B,CAP3B,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,yEAKF,CAEA,2FACE,wGACF,CAEA,mFAEE,4DAAqD,CADrD,yDAEF,CAEA,iFACE,YAAa,CAWb,oCAA+B,CAD/B,iBAAkB,CATlB,WAAY,CAQZ,+EAAkF,CAPlF,kCAA6B,CAM7B,mFAAsF,CAFtF,gFAMF,CAEA,qFACE,aAAc,CACd,OACF,CAEA,sHACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,uHAEE,qBACF,CAEA,gFAOE,kBAAmB,CADnB,gDAA2B,CAL3B,YAAa,CAIb,uCAGF,CAEA,uFAEE,gDAA2B,CAD3B,YAAa,CAEb,uBAKF,CAHE,mGACE,aACF,CAGF,wFAEE,gDAA2B,CAD3B,YAAa,CAEb,wBACF,CAEA,8FACE,aACF,CAEA,mFAQE,+DAAsC,CACtC,mDAA2C,CAP3C,WAAY,CADZ,UASF,CAQA,qBACE,mFACE,wBACF,CAEA,yLAEE,+DACF,CACF,CAEA,mFAEE,iGAAuD,CADvD,YAEF,CAEA,oFAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAMV,kBAAsB,CAEtB,cAAe,CADf,kBAEF,CAGF,uDAEE,kBAAmB,CACnB,gBAAkB,CAFlB,YAAa,CAGb,WAyBF,CAvBE,wBANF,uDAOI,cAsBJ,CArBE,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAGF,+CACE,wCACF","file":"TreeView-bdf34914.css","sourcesContent":[".TreeViewRootUlStyles {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n\n  /*\n   * WARNING: This is a performance optimization.\n   *\n   * We define styles for the tree items at the root level of the tree\n   * to avoid recomputing the styles for each item when the tree updates.\n   * We're sacrificing maintainability for performance because TreeView\n   * needs to be performant enough to handle large trees (thousands of items).\n   *\n   * This is intended to be a temporary solution until we can improve the\n   * performance of our styling patterns.\n   *\n   * Do NOT copy this pattern without understanding the tradeoffs.\n   */\n  .TreeViewItem {\n    outline: none;\n\n    &:focus-visible > div,\n    &:global(.focus-visible) > div {\n      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n      @media (forced-colors: active) {\n        outline: 2px solid HighlightText;\n        /* stylelint-disable-next-line declaration-property-value-no-unknown */\n        outline-offset: -2;\n      }\n    }\n\n    &[data-has-leading-action] {\n      --has-leading-action: 1;\n    }\n  }\n\n  .TreeViewItemContainer {\n    --level: 1;\n    --toggle-width: 1rem;\n    --min-item-height: 2rem;\n\n    position: relative;\n    display: grid;\n    width: 100%;\n    font-size: var(--text-body-size-medium);\n    color: var(--fgColor-default);\n    cursor: pointer;\n    border-radius: var(--borderRadius-medium);\n    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;\n    grid-template-areas: 'spacer leadingAction toggle content trailingAction';\n\n    --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n    --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n    &:hover {\n      background-color: var(--control-transparent-bgColor-hover);\n\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: -2px;\n      }\n    }\n\n    @media (pointer: coarse) {\n      --toggle-width: 1.5rem;\n      --min-item-height: 2.75rem;\n    }\n\n    &:has(.TreeViewItemSkeleton):hover {\n      cursor: default;\n      background-color: transparent;\n\n      @media (forced-colors: active) {\n        outline: none;\n      }\n    }\n  }\n\n  &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n    grid-template-columns: 0 0 0 1fr;\n  }\n\n  .TreeViewItem[aria-current='true'] > .TreeViewItemContainer {\n    background-color: var(--control-transparent-bgColor-selected);\n\n    /* Current item indicator */\n    /* stylelint-disable-next-line selector-max-specificity */\n    &::after {\n      position: absolute;\n      top: calc(50% - var(--base-size-12));\n      left: calc(-1 * var(--base-size-8));\n      width: 0.25rem;\n      height: 1.5rem;\n      content: '';\n\n      /*\n       * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n       * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n       */\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--fgColor-accent);\n      border-radius: var(--borderRadius-medium);\n\n      @media (forced-colors: active) {\n        background-color: HighlightText;\n      }\n    }\n  }\n\n  .TreeViewItemToggle {\n    display: flex;\n    height: 100%;\n\n    /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n    color: var(--fgColor-muted);\n    grid-area: toggle;\n    justify-content: center;\n    align-items: flex-start;\n  }\n\n  .TreeViewItemToggleHover:hover {\n    background-color: var(--control-transparent-bgColor-hover);\n  }\n\n  .TreeViewItemToggleEnd {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  .TreeViewItemContent {\n    display: flex;\n    height: 100%;\n    padding: 0 var(--base-size-8);\n\n    /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n    grid-area: content;\n    gap: var(--stack-gap-condensed);\n  }\n\n  .TreeViewItemContentText {\n    flex: 1 1 auto;\n    width: 0;\n  }\n\n  &:where([data-truncate-text='true']) .TreeViewItemContentText {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &:where([data-truncate-text='false']) .TreeViewItemContentText {\n    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */\n    word-break: break-word;\n  }\n\n  .TreeViewItemVisual {\n    display: flex;\n\n    /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    height: var(--custom-line-height, 1.3rem);\n    color: var(--fgColor-muted);\n    align-items: center;\n  }\n\n  .TreeViewItemLeadingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: leadingAction;\n\n    & > button {\n      flex-shrink: 1;\n    }\n  }\n\n  .TreeViewItemTrailingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: trailingAction;\n  }\n\n  .TreeViewItemTrailingActionButton {\n    flex-shrink: 1;\n  }\n\n  .TreeViewItemLevelLine {\n    width: 100%;\n    height: 100%;\n\n    /*\n     * On devices without hover, the nesting indicator lines\n     * appear at all times.\n     */\n    border-color: var(--borderColor-muted);\n    border-right: var(--borderWidth-thin) solid;\n  }\n\n  /*\n   * On devices with :hover support, the nesting indicator lines\n   * fade in when the user mouses over the entire component,\n   * or when there's focus inside the component. This makes\n   * sure the component remains simple when not in use.\n   */\n  @media (hover: hover) {\n    .TreeViewItemLevelLine {\n      border-color: transparent;\n    }\n\n    &:hover .TreeViewItemLevelLine,\n    &:focus-within .TreeViewItemLevelLine {\n      border-color: var(--borderColor-muted);\n    }\n  }\n\n  .TreeViewDirectoryIcon {\n    display: grid;\n    color: var(--treeViewItem-leadingVisual-iconColor-rest);\n  }\n\n  .TreeViewVisuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n  display: flex;\n  align-items: center;\n  column-gap: 0.5rem;\n  height: 2rem;\n\n  @media (pointer: coarse) {\n    height: 2.75rem;\n  }\n\n  &:nth-of-type(5n + 1) {\n    --tree-item-loading-width: 67%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --tree-item-loading-width: 47%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --tree-item-loading-width: 73%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --tree-item-loading-width: 64%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --tree-item-loading-width: 50%;\n  }\n}\n\n.TreeItemSkeletonTextStyles {\n  width: var(--tree-item-loading-width, 67%);\n}\n"]}

package/dist/TreeView/TreeView.d.ts

@@ -0,0 +1,70 @@
+import { type Icon } from '@primer/octicons-react';
+import React from 'react';
+export type TreeViewProps = {
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    children: React.ReactNode;
+    flat?: boolean;
+    truncate?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export type TreeViewSecondaryActions = {
+    label: string;
+    onClick: () => void;
+    icon: Icon;
+};
+export type TreeViewItemProps = {
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    id: string;
+    children: React.ReactNode;
+    containIntrinsicSize?: string;
+    current?: boolean;
+    defaultExpanded?: boolean;
+    expanded?: boolean | null;
+    onExpandedChange?: (expanded: boolean) => void;
+    onSelect?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    className?: string;
+    secondaryActions?: TreeViewSecondaryActions[];
+};
+export type SubTreeState = 'initial' | 'loading' | 'done' | 'error';
+export type TreeViewSubTreeProps = {
+    children?: React.ReactNode;
+    state?: SubTreeState;
+    /**
+     * Display a skeleton loading state with the specified count of items
+     */
+    count?: number;
+    'aria-label'?: string;
+};
+export type TreeViewVisualProps = {
+    children: React.ReactNode | ((props: {
+        isExpanded: boolean;
+    }) => React.ReactNode);
+    label?: string;
+};
+export type TreeViewTrailingAction = {
+    items: TreeViewSecondaryActions[];
+    shortcutText: string;
+};
+export type TreeViewActionDialogProps = {
+    items: TreeViewSecondaryActions[];
+    onClose?: () => void;
+};
+export type TreeViewErrorDialogProps = {
+    children: React.ReactNode;
+    title?: string;
+    onRetry?: () => void;
+    onDismiss?: () => void;
+};
+export declare const TreeView: React.FC<TreeViewProps> & {
+    Item: React.ForwardRefExoticComponent<TreeViewItemProps & React.RefAttributes<HTMLElement>>;
+    SubTree: React.FC<TreeViewSubTreeProps>;
+    LeadingAction: React.FC<TreeViewVisualProps>;
+    LeadingVisual: React.FC<TreeViewVisualProps>;
+    TrailingVisual: React.FC<TreeViewVisualProps>;
+    DirectoryIcon: () => React.JSX.Element;
+    ErrorDialog: React.FC<TreeViewErrorDialogProps>;
+};
+//# sourceMappingURL=TreeView.d.ts.map

package/dist/TreeView/TreeView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,IAAI,EACV,MAAM,wBAAwB,CAAA;AAE/B,OAAO,KAA+B,MAAM,OAAO,CAAA;AA4DnD,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,EAAE,IAAI,CAAA;CACX,CAAA;AAqFD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,wBAAwB,EAAE,CAAA;CAC9C,CAAA;AAwQD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AAEnE,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAyMD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE;QAAC,UAAU,EAAE,OAAO,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAG/E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAqED,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,wBAAwB,EAAE,CAAA;IACjC,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAiDD,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,wBAAwB,EAAE,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAkED,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AA4CD,eAAO,MAAM,QAAQ;;;;;;;;CAQnB,CAAA"}