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

package/dist/Tooltip/Tooltip.js

@@ -0,0 +1,133 @@
+import { c } from 'react-compiler-runtime';
+import { clsx } from 'clsx';
+import React from 'react';
+import styled from 'styled-components';
+import { get } from '../constants.js';
+import { jsx } from 'react/jsx-runtime';
+import { useId } from '../hooks/useId.js';
+
+const TooltipBase = styled.span.withConfig({
+  displayName: "Tooltip__TooltipBase",
+  componentId: "sc-17tf59c-0"
+})(["position:relative;display:inline-block;&::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 ", ";-webkit-font-smoothing:subpixel-antialiased;color:var(--tooltip-fgColor,", ");text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--tooltip-bgColor,", ");border-radius:", ";opacity:0;}@keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}&:hover,&:active,&:focus,&:focus-within{&::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0s;}}&.tooltipped-no-delay:hover,&.tooltipped-no-delay:active,&.tooltipped-no-delay:focus,&.tooltipped-no-delay:focus-within{&::after{animation-delay:0s;}}&.tooltipped-multiline:hover,&.tooltipped-multiline:active,&.tooltipped-multiline:focus,&.tooltipped-multiline:focus-within{&::after{display:table-cell;}}&.tooltipped-s,&.tooltipped-se,&.tooltipped-sw{&::after{top:100%;right:50%;margin-top:6px;}}&.tooltipped-se{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-sw::after{margin-right:-", ";}&.tooltipped-n,&.tooltipped-ne,&.tooltipped-nw{&::after{right:50%;bottom:100%;margin-bottom:6px;}}&.tooltipped-ne{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-nw::after{margin-right:-", ";}&.tooltipped-s::after,&.tooltipped-n::after{transform:translateX(50%);}&.tooltipped-w{&::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%);}}&.tooltipped-e{&::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%);}}&.tooltipped-multiline{&::after{width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}&.tooltipped-s::after,&.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%);}&.tooltipped-w::after,&.tooltipped-e::after{right:100%;}}&.tooltipped-align-right-2::after{right:0;margin-right:0;}&.tooltipped-align-left-2::after{left:0;margin-left:0;}"], get('fonts.normal'), get('colors.fg.onEmphasis'), get('colors.neutral.emphasisPlus'), get('radii.2'), get('space.3'), get('space.3'), get('space.3'), get('space.3'));
+
+/**
+ * @deprecated
+ */
+
+const TooltipContext = /*#__PURE__*/React.createContext({});
+
+/**
+ * @deprecated
+ */
+function Tooltip(t0) {
+  const $ = c(27);
+  let align;
+  let children;
+  let className;
+  let id;
+  let noDelay;
+  let rest;
+  let t1;
+  let text;
+  let wrap;
+  if ($[0] !== t0) {
+    ({
+      direction: t1,
+      children,
+      className,
+      text,
+      noDelay,
+      align,
+      wrap,
+      id,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = align;
+    $[2] = children;
+    $[3] = className;
+    $[4] = id;
+    $[5] = noDelay;
+    $[6] = rest;
+    $[7] = t1;
+    $[8] = text;
+    $[9] = wrap;
+  } else {
+    align = $[1];
+    children = $[2];
+    className = $[3];
+    id = $[4];
+    noDelay = $[5];
+    rest = $[6];
+    t1 = $[7];
+    text = $[8];
+    wrap = $[9];
+  }
+  const direction = t1 === undefined ? "n" : t1;
+  const tooltipId = useId(id);
+  const t2 = `tooltipped-${direction}`;
+  const t3 = align && `tooltipped-align-${align}-2`;
+  const t4 = noDelay && "tooltipped-no-delay";
+  const t5 = wrap && "tooltipped-multiline";
+  let t6;
+  if ($[10] !== className || $[11] !== t2 || $[12] !== t3 || $[13] !== t4 || $[14] !== t5) {
+    t6 = clsx(className, t2, t3, t4, t5);
+    $[10] = className;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  const classes = t6;
+  let t7;
+  if ($[16] !== tooltipId) {
+    t7 = {
+      tooltipId
+    };
+    $[16] = tooltipId;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  const value = t7;
+  let t8;
+  if ($[18] !== children || $[19] !== classes || $[20] !== rest || $[21] !== text || $[22] !== tooltipId) {
+    t8 = /*#__PURE__*/jsx(TooltipBase, {
+      role: "tooltip",
+      "aria-label": text,
+      id: tooltipId,
+      ...rest,
+      className: classes,
+      children: children
+    });
+    $[18] = children;
+    $[19] = classes;
+    $[20] = rest;
+    $[21] = text;
+    $[22] = tooltipId;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  let t9;
+  if ($[24] !== t8 || $[25] !== value) {
+    t9 = /*#__PURE__*/jsx(TooltipContext.Provider, {
+      value: value,
+      children: t8
+    });
+    $[24] = t8;
+    $[25] = value;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  return t9;
+}
+Tooltip.alignments = ['left', 'right'];
+Tooltip.directions = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
+
+export { TooltipContext, Tooltip as default };

package/dist/TooltipV2/Tooltip-5a80d7b2.css

@@ -0,0 +1,2 @@
+@keyframes prc-TooltipV2-tooltip-appear-hLf77{0%{opacity:0}to{opacity:1}}.prc-TooltipV2-Tooltip-cYMVY{display:none}.prc-TooltipV2-Tooltip-cYMVY[popover]{margin:auto;max-width:250px;overflow:visible;padding:var(--overlay-paddingBlock-condensed,.25rem) var(--overlay-padding-condensed,.5rem);position:absolute;width:max-content;clip:auto;color:var(--tooltip-fgColor,#fff);font:var(--text-body-shorthand-small,400 .75rem/1.6666 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");text-align:center;word-wrap:break-word;background:var(--tooltip-bgColor,#25292e);border:0;border-radius:var(--borderRadius-medium,.375rem);white-space:normal;-webkit-font-smoothing:subpixel-antialiased;inset:auto;text-wrap:balance}.prc-TooltipV2-Tooltip-cYMVY[popover]:popover-open{display:block}.prc-TooltipV2-Tooltip-cYMVY[popover].\\:popover-open{display:block}@media (forced-colors:active){.prc-TooltipV2-Tooltip-cYMVY{outline:1px solid transparent}}.prc-TooltipV2-Tooltip-cYMVY:after{content:"";display:block;height:var(--overlay-offset,.25rem);left:0;position:absolute;right:0}.prc-TooltipV2-Tooltip-cYMVY[data-direction=n]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=ne]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=nw]:after{top:100%}.prc-TooltipV2-Tooltip-cYMVY[data-direction=s]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=se]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=sw]:after{bottom:100%}.prc-TooltipV2-Tooltip-cYMVY[data-direction=w]:after{left:100%}.prc-TooltipV2-Tooltip-cYMVY[data-direction=e]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=w]:after{bottom:0;content:"";display:block;height:100%;position:absolute;width:8px}.prc-TooltipV2-Tooltip-cYMVY[data-direction=e]:after{margin-left:-8px;right:100%}@media screen and (prefers-reduced-motion:no-preference){.prc-TooltipV2-Tooltip-cYMVY:popover-open,.prc-TooltipV2-Tooltip-cYMVY:popover-open:before{animation-delay:0s;animation-duration:.1s;animation-fill-mode:forwards;animation-name:prc-TooltipV2-tooltip-appear-hLf77;animation-timing-function:ease-in}.prc-TooltipV2-Tooltip-cYMVY.\\:popover-open,.prc-TooltipV2-Tooltip-cYMVY.\\:popover-open:before{animation-delay:0s;animation-duration:.1s;animation-fill-mode:forwards;animation-name:prc-TooltipV2-tooltip-appear-hLf77;animation-timing-function:ease-in}}.prc-TooltipV2-KeybindingHintContainer-iabqv.prc-TooltipV2-HasTextBefore-cCzYC{margin-left:var(--base-size-6,.375rem)}
+/*# sourceMappingURL=Tooltip-5a80d7b2.css.map */

package/dist/TooltipV2/Tooltip-5a80d7b2.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TooltipV2/Tooltip.module.css"],"names":[],"mappings":"AACA,8CACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,6BAEE,YA6GF,CA3GE,sCAME,WAAY,CAHZ,eAAgB,CAMhB,gBAAiB,CAJjB,2FAA+E,CAJ/E,iBAAkB,CAClB,iBAAkB,CAQlB,SAAU,CAEV,iCAA6B,CAD7B,+KAAsC,CAEtC,iBAAkB,CAClB,oBAAqB,CAErB,yCAAkC,CAClC,QAAS,CACT,gDAAyC,CAHzC,kBAAmB,CAInB,2CAA4C,CAC5C,UAAW,CACX,iBACF,CAGA,mDACE,aACF,CAIA,sDACE,aACF,CAEA,8BAvCF,6BAwCI,6BAuEJ,CAtEE,CAGA,mCAME,UAAW,CAFX,aAAc,CACd,mCAA6B,CAF7B,MAAO,CAFP,iBAAkB,CAClB,OAKF,CAGA,iKAGE,QACF,CAEA,iKAGE,WACF,CAEA,qDAGE,SAKF,CAGA,0GATE,QAAS,CAKT,UAAW,CAHX,aAAc,CAEd,WAAY,CALZ,iBAAkB,CAIlB,SAgBF,CAVA,qDAQE,gBAAiB,CANjB,UAQF,CAGA,yDAEE,2FAME,kBAAmB,CAHnB,sBAAwB,CACxB,4BAA6B,CAF7B,iDAA8B,CAG9B,iCAEF,CAGA,iGAME,kBAAmB,CAHnB,sBAAwB,CACxB,4BAA6B,CAF7B,iDAA8B,CAG9B,iCAEF,CACF,CAGF,+EACE,sCACF","file":"Tooltip-5a80d7b2.css","sourcesContent":["/* Animation definition */\n@keyframes tooltip-appear {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n.Tooltip {\n  /* Overriding the default popover styles */\n  display: none;\n\n  &[popover] {\n    position: absolute;\n    width: max-content;\n    max-width: 250px;\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed);\n    margin: auto;\n\n    /* for scrollbar */\n    overflow: visible;\n    clip: auto;\n    font: var(--text-body-shorthand-small);\n    color: var(--tooltip-fgColor);\n    text-align: center;\n    word-wrap: break-word;\n    white-space: normal;\n    background: var(--tooltip-bgColor);\n    border: 0;\n    border-radius: var(--borderRadius-medium);\n    -webkit-font-smoothing: subpixel-antialiased;\n    inset: auto;\n    text-wrap: balance;\n  }\n\n  /* class name in chrome is :popover-open */\n  &[popover]:popover-open {\n    display: block;\n  }\n\n  /* class name in firefox and safari is \\:popover-open */\n  /* stylelint-disable-next-line selector-class-pattern */\n  &[popover]:global(.\\\\:popover-open) {\n    display: block;\n  }\n\n  @media (forced-colors: active) {\n    outline: 1px solid transparent;\n  }\n\n  /* This is needed to keep the tooltip open when the user leaves the trigger element to hover tooltip */\n  &::after {\n    position: absolute;\n    right: 0;\n    left: 0;\n    display: block;\n    height: var(--overlay-offset);\n    content: '';\n  }\n\n  /* South, East, Southeast, Southwest after */\n  &[data-direction='n']::after,\n  &[data-direction='ne']::after,\n  &[data-direction='nw']::after {\n    top: 100%;\n  }\n\n  &[data-direction='s']::after,\n  &[data-direction='se']::after,\n  &[data-direction='sw']::after {\n    bottom: 100%;\n  }\n\n  &[data-direction='w']::after {\n    position: absolute;\n    bottom: 0;\n    left: 100%;\n    display: block;\n    width: 8px;\n    height: 100%;\n    content: '';\n  }\n\n  /* East before and after */\n  &[data-direction='e']::after {\n    position: absolute;\n    right: 100%;\n    bottom: 0;\n    display: block;\n    width: 8px;\n    height: 100%;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: -8px;\n    content: '';\n  }\n\n  /* Only show animations if users don't have a preference for reduced motion */\n  @media screen and (prefers-reduced-motion: no-preference) {\n    /* Animation styles */\n    &:popover-open,\n    &:popover-open::before {\n      animation-name: tooltip-appear;\n      animation-duration: 0.1s;\n      animation-fill-mode: forwards;\n      animation-timing-function: ease-in;\n      animation-delay: 0s;\n    }\n\n    /* Animation styles */\n    &:global(.\\\\:popover-open) /* stylelint-disable-line selector-class-pattern */,\n    &:global(.\\\\:popover-open)::before /* stylelint-disable-line selector-class-pattern */ {\n      animation-name: tooltip-appear;\n      animation-duration: 0.1s;\n      animation-fill-mode: forwards;\n      animation-timing-function: ease-in;\n      animation-delay: 0s;\n    }\n  }\n}\n\n.KeybindingHintContainer.HasTextBefore {\n  margin-left: var(--base-size-6);\n}\n"]}

package/dist/TooltipV2/Tooltip.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { type KeybindingHintProps } from '../KeybindingHint';
+export type TooltipDirection = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w';
+export type TooltipProps = React.PropsWithChildren<{
+    direction?: TooltipDirection;
+    text: string;
+    type?: 'label' | 'description';
+    keybindingHint?: KeybindingHintProps['keys'];
+    /**
+     * Delay in milliseconds before showing the tooltip
+     * @default short (50ms)
+     * medium (400ms)
+     * long (1200ms)
+     */
+    delay?: 'short' | 'medium' | 'long';
+}> & React.HTMLAttributes<HTMLElement>;
+export declare const TooltipContext: React.Context<{
+    tooltipId?: string;
+}>;
+export declare const Tooltip: React.ForwardRefExoticComponent<{
+    direction?: TooltipDirection;
+    text: string;
+    type?: "label" | "description";
+    keybindingHint?: KeybindingHintProps["keys"];
+    /**
+     * Delay in milliseconds before showing the tooltip
+     * @default short (50ms)
+     * medium (400ms)
+     * long (1200ms)
+     */
+    delay?: "short" | "medium" | "long";
+} & {
+    children?: React.ReactNode | undefined;
+} & React.HTMLAttributes<HTMLElement> & React.RefAttributes<unknown>>;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/TooltipV2/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/TooltipV2/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAS3E,OAAO,EAAoD,KAAK,mBAAmB,EAAC,MAAM,mBAAmB,CAAA;AAI7G,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,CAAA;AAChF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACjD,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;IAC9B,cAAc,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAA;IAC5C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;CACpC,CAAC,GACA,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAiEnC,eAAO,MAAM,cAAc;gBAAoC,MAAM;EAAM,CAAA;AAE3E,eAAO,MAAM,OAAO;gBA/EN,gBAAgB;UACtB,MAAM;WACL,OAAO,GAAG,aAAa;qBACb,mBAAmB,CAAC,MAAM,CAAC;IAC5C;;;;;OAKG;YACK,OAAO,GAAG,QAAQ,GAAG,MAAM;;;qEAiVpC,CAAA"}

package/dist/TooltipV2/Tooltip.js

@@ -0,0 +1,304 @@
+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 { 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'];
+
+// Map delay prop to actual time in ms
+// For context on delay times, see https://github.com/github/primer/issues/3313#issuecomment-3336696699
+const delayTimeMap = {
+  short: 50,
+  medium: 400,
+  long: 1200
+};
+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,
+  delay = 'short',
+  ...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 => {
+          const delayTime = delayTimeMap[delay] || 50;
+          // 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 the specified delay time
+          // (prevent showing tooltip when mouse is just passing through)
+          openTimeoutRef.current = safeSetTimeout(() => {
+            var _child$props$onMouseE, _child$props4;
+            // if the mouse is already moved out, do not show the tooltip
+            if (!openTimeoutRef.current) return;
+            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);
+          }, delayTime);
+        },
+        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("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"}