@assure-one/design-system 1.49.0 → 1.51.0

package/dist/{chunk-7VPEFOTS.js → chunk-KITVNCIJ.js}

@@ -1,4 +1,4 @@
-import { stateAttributes, slot, chipAnatomy, Pressable, CONTROL_GAP_CLASSES, EN_MESSAGES, microInteractions, listItemClasses, groupHeadingClasses, useDsMessages, withPortalContainer, Backdrop, sheetAnatomy, deprecate, OverlaySurface, DismissButton, DEFAULT_OVERLAY_MESSAGES, DISMISS_GLYPH_CLASSES, OverlayBody, OverlayTitle, OverlayDescription, Input, Textarea, Select, FileUpload, FileChip, Button, Checkbox, Tooltip, TooltipTrigger, TooltipContent, useMergedRefs, TooltipProvider, sidebarAnatomy, Slot, Avatar, DropdownMenu, DropdownMenuTrigger, sidebarBrandSwitcherAnatomy, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, buttonBase, CONTROL_SIZE_CLASSES, useDsDirection, TooltipRoot, useFieldControl, useId as useId$1, useControllableState, Popover, PopoverAnchor, comboboxAnatomy, Spinner, IconButton, PopoverContent, LIST_SEPARATOR, listItemAttributes, optionElementId, FormBridge, useLinkComponent, useImageComponent, OverlayHeader, OverlayFooter, LIST_ITEM_INDICATOR_WELL } from './chunk-SFHFY72L.js';
+import { stateAttributes, slot, chipAnatomy, Pressable, CONTROL_GAP_CLASSES, EN_MESSAGES, microInteractions, listItemClasses, groupHeadingClasses, useDsMessages, withPortalContainer, Backdrop, sheetAnatomy, deprecate, OverlaySurface, DismissButton, DEFAULT_OVERLAY_MESSAGES, DISMISS_GLYPH_CLASSES, OverlayBody, OverlayTitle, OverlayDescription, Input, Textarea, Select, FileUpload, FileChip, Button, Checkbox, Tooltip, TooltipTrigger, TooltipContent, useMergedRefs, TooltipProvider, sidebarAnatomy, Slot, useDsDirection, Popover, PopoverAnchor, PopoverContent, Avatar, DropdownMenu, DropdownMenuTrigger, sidebarBrandSwitcherAnatomy, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, buttonBase, CONTROL_SIZE_CLASSES, TooltipRoot, useFieldControl, useId as useId$1, useControllableState, comboboxAnatomy, Spinner, IconButton, LIST_SEPARATOR, listItemAttributes, optionElementId, FormBridge, useLinkComponent, useImageComponent, OverlayHeader, OverlayFooter, LIST_ITEM_INDICATOR_WELL } from './chunk-TL4NK3KN.js';
 import { cn, XIcon, CheckIcon, EyeIcon, DownloadIcon, PhoneIcon, MailIcon, GlobeIcon, HomeIcon, ChevronLeftIcon, ChevronRightIcon, ReceiptIcon, RotateCcwIcon, CreditCardIcon, LockIcon, FileTextIcon, PlayIcon, InfoIcon, ClockIcon, PenSignIcon, TrashIcon, PlusIcon, CheckCircleSolidIcon, HelpCircleIcon, MinusIcon, PanelLeftCloseIcon, PanelLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronDownIcon } from './chunk-ARCWF2S3.js';
 import { parseHexColor, contrastRatio, WHITE, formatHexColor, darkenUntilContrast } from './chunk-EUHGZA6Q.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -2045,8 +2045,11 @@ var AgreementViewer = forwardRef(
                 "section",
                 {
                   "data-bleed": steps[current]?.bleed || void 0,
+                  "aria-label": steps[current]?.label,
+                  tabIndex: 0,
                   className: cn(
                     "ds:@container/pane ds:scrollbar-thin ds:flex ds:min-w-0 ds:flex-1 ds:flex-col ds:overflow-y-auto",
+                    "ds:focus-visible:outline-2 ds:focus-visible:-outline-offset-2 ds:focus-visible:outline-[var(--focus-ring-border)]",
                     // `bleed` steps own their own padding so a cover can reach the
                     // card edges — this replaces the app-side
                     // `*:has(> [data-esign-cover]) { padding: 0 }` global rule.
@@ -3714,6 +3717,7 @@ function SidebarProvider({
 }
 SidebarProvider.displayName = "SidebarProvider";
 var SidebarLabelsHiddenContext = React7.createContext(false);
+var SidebarVariantContext = React7.createContext("classic");
 function useCollapsedAttribute() {
   return React7.useContext(SidebarLabelsHiddenContext) ? { "data-collapsed": "true" } : {};
 }
@@ -3864,7 +3868,7 @@ var Sidebar = React7.forwardRef(function Sidebar2({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(SidebarLabelsHiddenContext.Provider, { value: labelsHidden, children: collapsible ? /* @__PURE__ */ jsx(SidebarTooltipScopeContext.Provider, { value: true, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, skipDelayDuration: 400, children }) }) : children })
+      children: /* @__PURE__ */ jsx(SidebarVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(SidebarLabelsHiddenContext.Provider, { value: labelsHidden, children: collapsible ? /* @__PURE__ */ jsx(SidebarTooltipScopeContext.Provider, { value: true, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, skipDelayDuration: 400, children }) }) : children }) })
     }
   );
 });
@@ -4309,6 +4313,8 @@ var SidebarLinkGroup = React7.forwardRef(
     const reactId = React7.useId();
     const id = idProp ?? reactId;
     const scope = React7.useContext(SidebarGroupScopeContext);
+    const variant = React7.useContext(SidebarVariantContext);
+    const side = useDsDirection() === "rtl" ? "left" : "right";
     const [uncontrolledOpen, setUncontrolledOpen] = React7.useState(defaultOpen);
     const open = controlled ?? uncontrolledOpen;
     const setOpen = React7.useCallback(
@@ -4324,6 +4330,13 @@ var SidebarLinkGroup = React7.forwardRef(
       }
     }, [scope?.exclusiveId, id, open, setOpen]);
     const handleBodyClick = (e) => {
+      if (flyoutEnabled && touchTap.current) {
+        touchTap.current = false;
+        e.preventDefault();
+        clearTimeout(flyoutTimer.current);
+        setFlyoutRequested(true);
+        return;
+      }
       onActivate?.(e);
       if (e.defaultPrevented) return;
       scope?.setExclusive(id);
@@ -4335,6 +4348,35 @@ var SidebarLinkGroup = React7.forwardRef(
       setOpen(!open);
     };
     const contentId = `${id}-content`;
+    const flyoutId = `${id}-flyout`;
+    const flyoutEnabled = labelsHidden && React7.Children.toArray(children).length > 0;
+    const [flyoutRequested, setFlyoutRequested] = React7.useState(false);
+    if (!flyoutEnabled && flyoutRequested) setFlyoutRequested(false);
+    const flyoutOpen = flyoutEnabled && flyoutRequested;
+    const linkRef = React7.useRef(null);
+    const flyoutRef = React7.useRef(null);
+    const flyoutTimer = React7.useRef(void 0);
+    const touchTap = React7.useRef(false);
+    const skipFocusOpen = React7.useRef(false);
+    const setFlyoutSoon = (next, delay) => {
+      clearTimeout(flyoutTimer.current);
+      flyoutTimer.current = setTimeout(() => setFlyoutRequested(next), delay);
+    };
+    React7.useEffect(() => () => clearTimeout(flyoutTimer.current), []);
+    const flyoutItems = () => Array.from(
+      flyoutRef.current?.querySelectorAll(
+        'a[href],button:not([disabled]),[tabindex]:not([tabindex="-1"])'
+      ) ?? []
+    );
+    const isTouch = (e) => e.pointerType === "touch";
+    const flyoutHover = {
+      onPointerEnter: (e) => {
+        if (flyoutEnabled && !isTouch(e)) setFlyoutSoon(true, flyoutOpen ? 0 : 100);
+      },
+      onPointerLeave: (e) => {
+        if (flyoutEnabled && !isTouch(e)) setFlyoutSoon(false, 200);
+      }
+    };
     const bodyClassName = cn(
       "ds:group/link ds:relative ds:flex ds:flex-1 ds:cursor-pointer ds:items-center ds:gap-2.5 ds:rounded-control ds:px-2.5 ds:py-1.5",
       "ds:group-data-[labels=hide]/sidebar:justify-center ds:group-data-[labels=hide]/sidebar:px-0",
@@ -4377,14 +4419,35 @@ var SidebarLinkGroup = React7.forwardRef(
       }
     );
     const groupText = getTextContent(label) || void 0;
+    const tree = /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:mt-px ds:ml-[18px] ds:border-l ds:pl-2", children });
     const bodyLink = /* @__PURE__ */ jsxs(
       "a",
       {
+        ref: linkRef,
         href,
         "data-active": active || labelsHidden && activeDescendant ? "true" : void 0,
         "aria-current": active ? "page" : void 0,
         "aria-label": groupText,
         onClick: handleBodyClick,
+        ...flyoutEnabled ? {
+          "aria-expanded": flyoutOpen,
+          "aria-controls": flyoutOpen ? flyoutId : void 0,
+          ...flyoutHover,
+          onPointerDown: (e) => {
+            touchTap.current = e.pointerType !== "mouse" && !flyoutOpen;
+          },
+          onFocus: () => {
+            if (skipFocusOpen.current) skipFocusOpen.current = false;
+            else setFlyoutSoon(true, 0);
+          },
+          onKeyDown: (e) => {
+            if (e.key !== "Tab" || e.shiftKey || !flyoutOpen) return;
+            const first = flyoutItems()[0];
+            if (!first) return;
+            e.preventDefault();
+            first.focus();
+          }
+        } : {},
         ...slot(sidebarAnatomy, "group-link"),
         className: bodyClassName,
         children: [
@@ -4402,32 +4465,97 @@ var SidebarLinkGroup = React7.forwardRef(
         className: cn("ds:mb-px", className),
         ...props,
         children: /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("ds:flex ds:items-stretch", classNames?.row), children: [
-            /* @__PURE__ */ jsx(SidebarRailTooltip, { label: groupText, children: bodyLink }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-expanded": open,
-                "aria-controls": contentId,
-                "aria-label": open ? messages.collapseSection : messages.expandSection,
-                onClick: handleChevronClick,
-                ...slot(sidebarAnatomy, "group-trigger"),
-                className: cn(
-                  "ds:ml-px ds:inline-flex ds:size-7 ds:shrink-0 ds:cursor-pointer ds:items-center ds:justify-center ds:rounded-control",
-                  "ds:text-fg-4 ds:hover:bg-bg-3 ds:hover:text-fg-2",
-                  "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
-                  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
-                  FORCED_COLORS_FOCUS,
-                  "ds:[&_svg]:size-3.5 ds:[&_svg]:shrink-0 ds:[&_svg]:transition-transform ds:[&_svg]:duration-[var(--duration-fast)] ds:[&_svg]:ease-[var(--ease-out-quart)] ds:motion-reduce:[&_svg]:transition-none",
-                  // Hide in rail — content tree is hidden too, so the
-                  // affordance has nothing to control.
-                  "ds:group-data-[labels=hide]/sidebar:hidden"
-                ),
-                children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: open ? "" : "ds:-rotate-90" })
-              }
-            )
-          ] }),
+          /* @__PURE__ */ jsxs(
+            Popover,
+            {
+              open: flyoutOpen,
+              onOpenChange: (next) => {
+                if (next) return;
+                clearTimeout(flyoutTimer.current);
+                setFlyoutRequested(false);
+              },
+              children: [
+                /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("ds:flex ds:items-stretch", classNames?.row), children: [
+                  /* @__PURE__ */ jsx(SidebarRailTooltip, { label: groupText, suppressed: flyoutEnabled, children: bodyLink }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-expanded": open,
+                      "aria-controls": contentId,
+                      "aria-label": open ? messages.collapseSection : messages.expandSection,
+                      onClick: handleChevronClick,
+                      ...slot(sidebarAnatomy, "group-trigger"),
+                      className: cn(
+                        "ds:ml-px ds:inline-flex ds:size-7 ds:shrink-0 ds:cursor-pointer ds:items-center ds:justify-center ds:rounded-control",
+                        "ds:text-fg-4 ds:hover:bg-bg-3 ds:hover:text-fg-2",
+                        "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                        "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+                        FORCED_COLORS_FOCUS,
+                        "ds:[&_svg]:size-3.5 ds:[&_svg]:shrink-0 ds:[&_svg]:transition-transform ds:[&_svg]:duration-[var(--duration-fast)] ds:[&_svg]:ease-[var(--ease-out-quart)] ds:motion-reduce:[&_svg]:transition-none",
+                        // Hide in rail — content tree is hidden too, so the
+                        // affordance has nothing to control.
+                        "ds:group-data-[labels=hide]/sidebar:hidden"
+                      ),
+                      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: open ? "" : "ds:-rotate-90" })
+                    }
+                  )
+                ] }) }),
+                flyoutOpen ? /* @__PURE__ */ jsx(
+                  PopoverContent,
+                  {
+                    ref: flyoutRef,
+                    id: flyoutId,
+                    role: "group",
+                    "aria-label": groupText,
+                    side,
+                    align: "start",
+                    sideOffset: 16,
+                    width: "auto",
+                    padding: "sm",
+                    className: "ds:min-w-48",
+                    ...flyoutHover,
+                    onOpenAutoFocus: (e) => e.preventDefault(),
+                    onCloseAutoFocus: (e) => e.preventDefault(),
+                    onFocusOutside: (e) => {
+                      if (e.target instanceof Node && linkRef.current?.contains(e.target)) e.preventDefault();
+                    },
+                    onPointerDownOutside: (e) => {
+                      if (e.target instanceof Node && linkRef.current?.contains(e.target)) e.preventDefault();
+                    },
+                    onEscapeKeyDown: () => {
+                      if (!flyoutRef.current?.contains(document.activeElement)) return;
+                      skipFocusOpen.current = true;
+                      linkRef.current?.focus();
+                    },
+                    onClickCapture: () => setFlyoutSoon(false, 0),
+                    onKeyDown: (e) => {
+                      if (e.key !== "Tab") return;
+                      const items = flyoutItems();
+                      const edge = e.shiftKey ? items[0] : items.at(-1);
+                      if (document.activeElement !== edge) return;
+                      if (e.shiftKey) e.preventDefault();
+                      linkRef.current?.focus();
+                    },
+                    children: /* @__PURE__ */ jsx(SidebarLabelsHiddenContext.Provider, { value: false, children: /* @__PURE__ */ jsxs("div", { "data-variant": variant, "data-labels": "show", className: "ds:group/sidebar group/sidebar", children: [
+                      /* @__PURE__ */ jsx(
+                        SidebarLink,
+                        {
+                          ...href !== void 0 && { href },
+                          icon,
+                          active,
+                          onClick: (e) => onActivate?.(e),
+                          className: "ds:font-medium",
+                          children: label
+                        }
+                      ),
+                      tree
+                    ] }) })
+                  }
+                ) : null
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx(
             CollapsibleContent,
             {
@@ -4440,7 +4568,7 @@ var SidebarLinkGroup = React7.forwardRef(
                 // left edge.
                 "ds:group-data-[labels=hide]/sidebar:hidden"
               ),
-              children: /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:mt-px ds:ml-[18px] ds:border-l ds:pl-2", children })
+              children: tree
             }
           )
         ] })
@@ -4869,5 +4997,5 @@ var BrandScope = forwardRef(function BrandScope2({ product, children, ...props }
 BrandScope.displayName = "BrandScope";
 
 export { AgreementPaneHeading, AgreementViewer, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, BRAND_PRODUCTS, BrandScope, BrandScopeProvider, Chip, ClientSelect, CmdkCompatContext, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComingSoon, DEFAULT_COMBOBOX_MESSAGES, Grid, Logo, PlainLink, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QUESTION_TYPES, QUESTION_TYPE_CONTRACT_VERSION, Questions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarBrand, SidebarBrandSwitcher, SidebarBrandSwitcherTile, SidebarBrandText, SidebarDrawer, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, TaxSoftwareLogo, assetPath, brandLabel, brandScope, chipVariants, getAssetBasePath, resolveChipStyle, setAssetBasePath, sidebarLinkBadgeVariants, useBrandScope, useSidebarPeekLock, useSidebarState };
-//# sourceMappingURL=chunk-7VPEFOTS.js.map
-//# sourceMappingURL=chunk-7VPEFOTS.js.map
+//# sourceMappingURL=chunk-KITVNCIJ.js.map
+//# sourceMappingURL=chunk-KITVNCIJ.js.map