@stackone/malachite 2.38.0 → 2.39.0

package/dist/components/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../src/components/Breadcrumbs.tsx"],"sourcesContent":["import React from 'react';\nimport Button from './Button';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport type { BreadcrumbLink, PageAction, RenderBreadcrumbLink } from './PageLayout/types';\nimport Text, { type TextColor } from './Typography/Text';\nimport { hasBackButton } from './breadcrumbsNav';\nimport { FOCUS_RING } from './focusRing';\nimport { isSafeHref, safeHref } from './safeHref';\n\nexport interface BreadcrumbsProps {\n    links: BreadcrumbLink[];\n    actions?: PageAction[];\n    renderLink?: RenderBreadcrumbLink;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst CRUMB_LINK_CLASSES = `no-underline rounded-xs cursor-pointer transition-colors duration-200 ease-in-out hover:text-[var(--malachite-accent-foreground)] ${FOCUS_RING}`;\n\nconst BACK_BUTTON_CLASSES = `flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--malachite-radius-10,10px)] no-underline bg-[var(--malachite-number-tag-background)] text-[var(--malachite-text-primary)] transition-colors duration-200 ease-in-out hover:bg-[var(--malachite-number-tag-emphasis-background)] ${FOCUS_RING}`;\n\ntype LinkProps = Parameters<RenderBreadcrumbLink>[0];\n\nconst renderCrumbLink = (props: LinkProps, renderLink?: RenderBreadcrumbLink): React.ReactNode => {\n    // An unsafe url degrades to plain text rather than a link that could run a script.\n    if (!isSafeHref(props.href)) {\n        return props.children;\n    }\n    return renderLink ? renderLink(props) : <a {...props} />;\n};\n\nconst renderCrumbName = (name: React.ReactNode, color: TextColor): React.ReactNode =>\n    typeof name === 'string' ? (\n        <Text size=\"medium\" fontWeight=\"semi-bold\" color={color}>\n            {name}\n        </Text>\n    ) : (\n        name\n    );\n\nconst renderAction = (\n    {\n        label,\n        onClick,\n        disabled,\n        variant,\n        icon,\n        href,\n        target,\n        tooltip,\n        tooltipPlacement,\n    }: PageAction,\n    index: number,\n) => {\n    const safe = safeHref(href);\n    return (\n        <Button\n            key={`${index}-${label}`}\n            size=\"small\"\n            variant={variant ?? 'outline'}\n            disabled={disabled}\n            icon={icon}\n            tooltip={tooltip}\n            tooltipPlacement={tooltipPlacement}\n            href={safe}\n            target={safe ? (target ?? '_blank') : undefined}\n            onClick={safe ? undefined : onClick}\n        >\n            {label}\n        </Button>\n    );\n};\n\nconst Breadcrumbs: React.FC<BreadcrumbsProps> = ({\n    links,\n    actions,\n    renderLink,\n    className = '',\n    style,\n}) => {\n    // PageLayout mounts this unconditionally, so returning markup would leave an empty\n    // navigation landmark on every page without crumbs.\n    if (links.length === 0 && !actions?.length) {\n        return null;\n    }\n\n    const isTitle = links.length === 1 && Boolean(links[0].isRoot);\n    const parentCrumb = hasBackButton(links) ? links[links.length - 2] : undefined;\n    const parentName = parentCrumb?.name;\n    const hasActions = Boolean(actions?.length);\n\n    return (\n        <div\n            className={`flex items-center ${hasActions ? 'justify-between' : ''} ${className}`}\n            style={style}\n        >\n            {isTitle ? (\n                renderCrumbName(links[0].name, 'primary')\n            ) : (\n                <div className=\"flex items-center gap-4\">\n                    {parentCrumb?.url &&\n                        renderCrumbLink(\n                            {\n                                href: parentCrumb.url,\n                                'aria-label':\n                                    typeof parentName === 'string'\n                                        ? `Back to ${parentName}`\n                                        : 'Go back',\n                                className: BACK_BUTTON_CLASSES,\n                                children: <ArrowLeftIcon size={12} />,\n                            },\n                            renderLink,\n                        )}\n                    {links.length > 0 && (\n                        <nav aria-label=\"Breadcrumb\">\n                            <ol className=\"flex flex-wrap items-center gap-2 m-0 p-0 list-none\">\n                                {links.map((link, index) => {\n                                    const isLast = index === links.length - 1;\n                                    const color: TextColor = isLast ? 'primary' : 'muted';\n\n                                    return (\n                                        <li\n                                            key={`${link.url ?? ''}-${index}`}\n                                            className=\"flex items-center gap-2\"\n                                            aria-current={isLast && !link.url ? 'page' : undefined}\n                                        >\n                                            {link.url\n                                                ? renderCrumbLink(\n                                                      {\n                                                          href: link.url,\n                                                          'aria-current': isLast\n                                                              ? 'page'\n                                                              : undefined,\n                                                          className: `${CRUMB_LINK_CLASSES} ${\n                                                              isLast\n                                                                  ? 'text-[var(--malachite-text-primary)]'\n                                                                  : 'text-[var(--malachite-text-muted)]'\n                                                          }`,\n                                                          children: renderCrumbName(\n                                                              link.name,\n                                                              'inherit',\n                                                          ),\n                                                      },\n                                                      renderLink,\n                                                  )\n                                                : renderCrumbName(link.name, color)}\n                                            {!isLast && (\n                                                <span\n                                                    aria-hidden=\"true\"\n                                                    className=\"flex items-center text-[var(--malachite-text-dimmed)]\"\n                                                >\n                                                    <CaretRightIcon size={13} />\n                                                </span>\n                                            )}\n                                        </li>\n                                    );\n                                })}\n                            </ol>\n                        </nav>\n                    )}\n                </div>\n            )}\n            {hasActions && (\n                <div className=\"flex items-center gap-2\">{actions?.map(renderAction)}</div>\n            )}\n        </div>\n    );\n};\n\nexport { Breadcrumbs };\nexport default Breadcrumbs;\n"],"names":["CRUMB_LINK_CLASSES","FOCUS_RING","BACK_BUTTON_CLASSES","renderCrumbLink","props","renderLink","isSafeHref","jsx","renderCrumbName","name","color","Text","renderAction","label","onClick","disabled","variant","icon","href","target","tooltip","tooltipPlacement","index","safe","safeHref","Button","Breadcrumbs","links","actions","className","style","isTitle","parentCrumb","hasBackButton","parentName","hasActions","jsxs","ArrowLeftIcon","link","isLast","CaretRightIcon"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../../src/components/Breadcrumbs.tsx"],"sourcesContent":["import React from 'react';\nimport Button from './Button';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport type { BreadcrumbLink, PageAction, RenderBreadcrumbLink } from './PageLayout/types';\nimport Text, { type TextColor } from './Typography/Text';\nimport { hasBackButton } from './breadcrumbsNav';\nimport { FOCUS_RING } from './focusRing';\nimport { isSafeHref, safeHref } from './safeHref';\n\nexport interface BreadcrumbsProps {\n    links: BreadcrumbLink[];\n    actions?: PageAction[];\n    renderLink?: RenderBreadcrumbLink;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst CRUMB_LINK_CLASSES = `no-underline rounded-xs cursor-pointer transition-colors duration-200 ease-in-out hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))] ${FOCUS_RING}`;\n\nconst BACK_BUTTON_CLASSES = `flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--malachite-radius-10,10px)] no-underline bg-[var(--malachite-number-tag-background,rgba(0,0,0,0.08))] text-[var(--malachite-text-primary,rgb(10,10,10))] transition-colors duration-200 ease-in-out hover:bg-[var(--malachite-number-tag-emphasis-background,rgba(0,0,0,0.15))] ${FOCUS_RING}`;\n\ntype LinkProps = Parameters<RenderBreadcrumbLink>[0];\n\nconst renderCrumbLink = (props: LinkProps, renderLink?: RenderBreadcrumbLink): React.ReactNode => {\n    // An unsafe url degrades to plain text rather than a link that could run a script.\n    if (!isSafeHref(props.href)) {\n        return props.children;\n    }\n    return renderLink ? renderLink(props) : <a {...props} />;\n};\n\nconst renderCrumbName = (name: React.ReactNode, color: TextColor): React.ReactNode =>\n    typeof name === 'string' ? (\n        <Text size=\"medium\" fontWeight=\"semi-bold\" color={color}>\n            {name}\n        </Text>\n    ) : (\n        name\n    );\n\nconst renderAction = (\n    {\n        label,\n        onClick,\n        disabled,\n        variant,\n        icon,\n        href,\n        target,\n        tooltip,\n        tooltipPlacement,\n    }: PageAction,\n    index: number,\n) => {\n    const safe = safeHref(href);\n    return (\n        <Button\n            key={`${index}-${label}`}\n            size=\"small\"\n            variant={variant ?? 'outline'}\n            disabled={disabled}\n            icon={icon}\n            tooltip={tooltip}\n            tooltipPlacement={tooltipPlacement}\n            href={safe}\n            target={safe ? (target ?? '_blank') : undefined}\n            onClick={safe ? undefined : onClick}\n        >\n            {label}\n        </Button>\n    );\n};\n\nconst Breadcrumbs: React.FC<BreadcrumbsProps> = ({\n    links,\n    actions,\n    renderLink,\n    className = '',\n    style,\n}) => {\n    // PageLayout mounts this unconditionally, so returning markup would leave an empty\n    // navigation landmark on every page without crumbs.\n    if (links.length === 0 && !actions?.length) {\n        return null;\n    }\n\n    const isTitle = links.length === 1 && Boolean(links[0].isRoot);\n    const parentCrumb = hasBackButton(links) ? links[links.length - 2] : undefined;\n    const parentName = parentCrumb?.name;\n    const hasActions = Boolean(actions?.length);\n\n    return (\n        <div\n            className={`flex items-center ${hasActions ? 'justify-between' : ''} ${className}`}\n            style={style}\n        >\n            {isTitle ? (\n                renderCrumbName(links[0].name, 'primary')\n            ) : (\n                <div className=\"flex items-center gap-4\">\n                    {parentCrumb?.url &&\n                        renderCrumbLink(\n                            {\n                                href: parentCrumb.url,\n                                'aria-label':\n                                    typeof parentName === 'string'\n                                        ? `Back to ${parentName}`\n                                        : 'Go back',\n                                className: BACK_BUTTON_CLASSES,\n                                children: <ArrowLeftIcon size={12} />,\n                            },\n                            renderLink,\n                        )}\n                    {links.length > 0 && (\n                        <nav aria-label=\"Breadcrumb\">\n                            <ol className=\"flex flex-wrap items-center gap-2 m-0 p-0 list-none\">\n                                {links.map((link, index) => {\n                                    const isLast = index === links.length - 1;\n                                    const color: TextColor = isLast ? 'primary' : 'muted';\n\n                                    return (\n                                        <li\n                                            key={`${link.url ?? ''}-${index}`}\n                                            className=\"flex items-center gap-2\"\n                                            aria-current={isLast && !link.url ? 'page' : undefined}\n                                        >\n                                            {link.url\n                                                ? renderCrumbLink(\n                                                      {\n                                                          href: link.url,\n                                                          'aria-current': isLast\n                                                              ? 'page'\n                                                              : undefined,\n                                                          className: `${CRUMB_LINK_CLASSES} ${\n                                                              isLast\n                                                                  ? 'text-[var(--malachite-text-primary,rgb(10,10,10))]'\n                                                                  : 'text-[var(--malachite-text-muted,rgb(76,75,75))]'\n                                                          }`,\n                                                          children: renderCrumbName(\n                                                              link.name,\n                                                              'inherit',\n                                                          ),\n                                                      },\n                                                      renderLink,\n                                                  )\n                                                : renderCrumbName(link.name, color)}\n                                            {!isLast && (\n                                                <span\n                                                    aria-hidden=\"true\"\n                                                    className=\"flex items-center text-[var(--malachite-text-dimmed,rgb(161,161,161))]\"\n                                                >\n                                                    <CaretRightIcon size={13} />\n                                                </span>\n                                            )}\n                                        </li>\n                                    );\n                                })}\n                            </ol>\n                        </nav>\n                    )}\n                </div>\n            )}\n            {hasActions && (\n                <div className=\"flex items-center gap-2\">{actions?.map(renderAction)}</div>\n            )}\n        </div>\n    );\n};\n\nexport { Breadcrumbs };\nexport default Breadcrumbs;\n"],"names":["CRUMB_LINK_CLASSES","FOCUS_RING","BACK_BUTTON_CLASSES","renderCrumbLink","props","renderLink","isSafeHref","jsx","renderCrumbName","name","color","Text","renderAction","label","onClick","disabled","variant","icon","href","target","tooltip","tooltipPlacement","index","safe","safeHref","Button","Breadcrumbs","links","actions","className","style","isTitle","parentCrumb","hasBackButton","parentName","hasActions","jsxs","ArrowLeftIcon","link","isLast","CaretRightIcon"],"mappings":"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"}

package/dist/components/actionMenuStyles.js

@@ -1,36 +1,37 @@
 import { MENU_SPECS as t } from "./floatingMenuGeometry.js";
 import { injectStyleSheet as l } from "./injectStyleSheet.js";
-import { ensureOverlayStyles as d } from "./portalOverlay.js";
-const h = {
+import { ensureOverlayStyles as n } from "./portalOverlay.js";
+import { SELECTED_ROW_BACKGROUND as o, SELECTED_ROW_FOREGROUND as d } from "./selectedRow.js";
+const b = {
   small: { icon: 16, iconBox: "text-[16px] [&_svg]:size-[16px]!" },
   xsmall: { icon: 11, iconBox: "text-[11px] [&_svg]:size-[11px]!" }
-}, g = {
+}, p = {
   minWidth: 0,
   overflow: "hidden",
   textOverflow: "ellipsis"
-}, n = {
+}, c = {
   padding: "6px 10px",
   fontSize: "var(--malachite-font-size-small, 13px)",
   color: "var(--malachite-text-dimmed, rgb(161, 161, 161))",
   userSelect: "none"
-}, o = {
-  ...n,
+}, i = {
+  ...c,
   color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
-}, u = {
+}, v = {
   display: "inline-flex",
   flexShrink: 0,
   color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
-}, r = "malachite-actionmenu-item", i = [
-  `.${r} { background: transparent; }`,
-  `.${r}:not(:disabled):hover { background: var(--malachite-card-dimmed-background, rgb(247, 247, 247)); }`,
-  `.${r}:focus-visible { outline: 2px solid var(--malachite-text-primary, rgb(10, 10, 10)); outline-offset: -2px; }`
-], f = () => (d(), l("malachite-actionmenu-item-styles", i)), c = {
+}, a = "malachite-actionmenu-item", s = "data-malachite-actionmenu-tag", E = { display: "inline-flex", flexShrink: 0 }, T = { [s]: "" }, m = [
+  `.${a} { background: transparent; }`,
+  `.${a}:not(:disabled):hover { background: var(--malachite-card-dimmed-background, rgb(247, 247, 247)); }`,
+  `.${a}:focus-visible { outline: 2px solid var(--malachite-text-primary, rgb(10, 10, 10)); outline-offset: -2px; }`
+], _ = () => (n(), l("malachite-actionmenu-item-styles", m)), x = {
   default: "var(--malachite-text-primary, rgb(10, 10, 10))",
   muted: "var(--malachite-text-secondary, rgb(123, 123, 123))"
-}, b = (e, a = "default") => e.type === "text" ? o : e.type === "divider" ? {
+}, u = (e, r) => e.danger ? "var(--malachite-text-destructive, rgb(237, 53, 54))" : e.current ? d : x[r], y = (e, r = "default") => e.type === "text" ? i : e.type === "divider" ? {
   height: 1,
   background: "var(--malachite-card-border, rgb(232, 232, 232))",
   margin: "4px 0"
@@ -42,7 +43,8 @@ const h = {
   borderRadius: 8,
   fontSize: "var(--malachite-font-size-small, 13px)",
   fontWeight: 400,
-  color: e.danger ? "var(--malachite-text-destructive, rgb(237, 53, 54))" : c[a],
+  color: u(e, r),
+  background: e.current ? o : void 0,
   cursor: e.disabled ? "not-allowed" : "pointer",
   opacity: e.disabled ? 0.5 : 1,
   userSelect: "none",
@@ -51,7 +53,7 @@ const h = {
   border: "none",
   textAlign: "left",
   width: "100%"
-}, p = (e) => ({
+}, w = (e) => ({
   position: "fixed",
   top: (e == null ? void 0 : e.top) ?? 0,
   left: (e == null ? void 0 : e.left) ?? 0,
@@ -70,14 +72,17 @@ const h = {
   opacity: e ? 1 : 0
 });
 export {
-  n as EMPTY_ITEM_STYLE,
-  r as ITEM_CLASS,
-  u as ITEM_ICON_STYLE,
-  g as LABEL_STYLE,
-  o as TEXT_ITEM_STYLE,
-  h as TRIGGER_SIZES,
-  f as ensureActionMenuStyles,
-  b as itemStyle,
-  p as menuStyle
+  c as EMPTY_ITEM_STYLE,
+  a as ITEM_CLASS,
+  v as ITEM_ICON_STYLE,
+  p as LABEL_STYLE,
+  s as TAG_HOST_ATTR,
+  T as TAG_HOST_PROPS,
+  E as TAG_HOST_STYLE,
+  i as TEXT_ITEM_STYLE,
+  b as TRIGGER_SIZES,
+  _ as ensureActionMenuStyles,
+  y as itemStyle,
+  w as menuStyle
 };
 //# sourceMappingURL=actionMenuStyles.js.map

package/dist/components/actionMenuStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"actionMenuStyles.js","sources":["../../src/components/actionMenuStyles.ts"],"sourcesContent":["import type React from 'react';\nimport type { ActionMenuItem } from './actionMenuTypes';\nimport { MENU_SPECS, type MenuGeometry } from './floatingMenuGeometry';\nimport { injectStyleSheet } from './injectStyleSheet';\nimport { ensureOverlayStyles } from './portalOverlay';\n\nexport const TRIGGER_SIZES: Record<'small' | 'xsmall', { icon: number; iconBox: string }> = {\n    small: { icon: 16, iconBox: 'text-[16px] [&_svg]:size-[16px]!' },\n    xsmall: { icon: 11, iconBox: 'text-[11px] [&_svg]:size-[11px]!' },\n};\n\nexport const LABEL_STYLE: React.CSSProperties = {\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n};\n\nexport const EMPTY_ITEM_STYLE: React.CSSProperties = {\n    padding: '6px 10px',\n    fontSize: 'var(--malachite-font-size-small, 13px)',\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n    userSelect: 'none',\n};\n\nexport const TEXT_ITEM_STYLE: React.CSSProperties = {\n    ...EMPTY_ITEM_STYLE,\n    color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n};\n\nexport const ITEM_ICON_STYLE: React.CSSProperties = {\n    display: 'inline-flex',\n    flexShrink: 0,\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n};\n\nexport const ITEM_CLASS = 'malachite-actionmenu-item';\n\nconst ITEM_RULES = [\n    `.${ITEM_CLASS} { background: transparent; }`,\n    `.${ITEM_CLASS}:not(:disabled):hover { background: var(--malachite-card-dimmed-background, rgb(247, 247, 247)); }`,\n    `.${ITEM_CLASS}:focus-visible { outline: 2px solid var(--malachite-text-primary, rgb(10, 10, 10)); outline-offset: -2px; }`,\n];\n\nexport const ensureActionMenuStyles = (): CSSStyleSheet | null => {\n    ensureOverlayStyles();\n    return injectStyleSheet('malachite-actionmenu-item-styles', ITEM_RULES);\n};\n\nexport type ActionMenuTone = 'default' | 'muted';\n\nconst ITEM_TEXT: Record<ActionMenuTone, string> = {\n    default: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n    muted: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n};\n\nexport const itemStyle = (\n    item: ActionMenuItem,\n    tone: ActionMenuTone = 'default',\n): React.CSSProperties => {\n    if (item.type === 'text') {\n        return TEXT_ITEM_STYLE;\n    }\n    if (item.type === 'divider') {\n        return {\n            height: 1,\n            background: 'var(--malachite-card-border, rgb(232, 232, 232))',\n            margin: '4px 0',\n        };\n    }\n    return {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        padding: '6px 10px',\n        borderRadius: 8,\n        fontSize: 'var(--malachite-font-size-small, 13px)',\n        fontWeight: 400,\n        color: item.danger ? 'var(--malachite-text-destructive, rgb(237, 53, 54))' : ITEM_TEXT[tone],\n        cursor: item.disabled ? 'not-allowed' : 'pointer',\n        opacity: item.disabled ? 0.5 : 1,\n        userSelect: 'none',\n        whiteSpace: 'nowrap',\n        overflow: 'hidden',\n        border: 'none',\n        textAlign: 'left',\n        width: '100%',\n    };\n};\n\nexport const menuStyle = (position: MenuGeometry | null): React.CSSProperties => ({\n    position: 'fixed',\n    top: position?.top ?? 0,\n    left: position?.left ?? 0,\n    width: position?.width,\n    maxHeight: position?.maxHeight,\n    overflowY: 'auto',\n    background: MENU_SPECS.options.background,\n    border: MENU_SPECS.options.border,\n    borderRadius: MENU_SPECS.options.radius,\n    boxShadow: MENU_SPECS.options.shadow,\n    padding: MENU_SPECS.options.padding,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    visibility: position ? 'visible' : 'hidden',\n    opacity: position ? 1 : 0,\n});\n"],"names":["TRIGGER_SIZES","LABEL_STYLE","EMPTY_ITEM_STYLE","TEXT_ITEM_STYLE","ITEM_ICON_STYLE","ITEM_CLASS","ITEM_RULES","ensureActionMenuStyles","ensureOverlayStyles","injectStyleSheet","ITEM_TEXT","itemStyle","item","tone","menuStyle","position","MENU_SPECS"],"mappings":";;;AAMO,MAAMA,IAA+E;AAAA,EACxF,OAAO,EAAE,MAAM,IAAI,SAAS,mCAAA;AAAA,EAC5B,QAAQ,EAAE,MAAM,IAAI,SAAS,mCAAA;AACjC,GAEaC,IAAmC;AAAA,EAC5C,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAClB,GAEaC,IAAwC;AAAA,EACjD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAChB,GAEaC,IAAuC;AAAA,EAChD,GAAGD;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAChB,GAEaE,IAAuC;AAAA,EAChD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AACX,GAEaC,IAAa,6BAEpBC,IAAa;AAAA,EACf,IAAID,CAAU;AAAA,EACd,IAAIA,CAAU;AAAA,EACd,IAAIA,CAAU;AAClB,GAEaE,IAAyB,OAClCC,EAAA,GACOC,EAAiB,oCAAoCH,CAAU,IAKpEI,IAA4C;AAAA,EAC9C,SAAS;AAAA,EACT,OAAO;AACX,GAEaC,IAAY,CACrBC,GACAC,IAAuB,cAEnBD,EAAK,SAAS,SACPT,IAEPS,EAAK,SAAS,YACP;AAAA,EACH,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,QAAQ;AAAA,IAGT;AAAA,EACH,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,SAAS;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAOA,EAAK,SAAS,wDAAwDF,EAAUG,CAAI;AAAA,EAC3F,QAAQD,EAAK,WAAW,gBAAgB;AAAA,EACxC,SAASA,EAAK,WAAW,MAAM;AAAA,EAC/B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,GAIFE,IAAY,CAACC,OAAwD;AAAA,EAC9E,UAAU;AAAA,EACV,MAAKA,KAAA,gBAAAA,EAAU,QAAO;AAAA,EACtB,OAAMA,KAAA,gBAAAA,EAAU,SAAQ;AAAA,EACxB,OAAOA,KAAA,gBAAAA,EAAU;AAAA,EACjB,WAAWA,KAAA,gBAAAA,EAAU;AAAA,EACrB,WAAW;AAAA,EACX,YAAYC,EAAW,QAAQ;AAAA,EAC/B,QAAQA,EAAW,QAAQ;AAAA,EAC3B,cAAcA,EAAW,QAAQ;AAAA,EACjC,WAAWA,EAAW,QAAQ;AAAA,EAC9B,SAASA,EAAW,QAAQ;AAAA,EAC5B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK;AAAA,EACL,YAAYD,IAAW,YAAY;AAAA,EACnC,SAASA,IAAW,IAAI;AAC5B;"}
+{"version":3,"file":"actionMenuStyles.js","sources":["../../src/components/actionMenuStyles.ts"],"sourcesContent":["import type React from 'react';\nimport type { ActionMenuItem } from './actionMenuTypes';\nimport { MENU_SPECS, type MenuGeometry } from './floatingMenuGeometry';\nimport { injectStyleSheet } from './injectStyleSheet';\nimport { ensureOverlayStyles } from './portalOverlay';\nimport { SELECTED_ROW_BACKGROUND, SELECTED_ROW_FOREGROUND } from './selectedRow';\n\nexport const TRIGGER_SIZES: Record<'small' | 'xsmall', { icon: number; iconBox: string }> = {\n    small: { icon: 16, iconBox: 'text-[16px] [&_svg]:size-[16px]!' },\n    xsmall: { icon: 11, iconBox: 'text-[11px] [&_svg]:size-[11px]!' },\n};\n\nexport const LABEL_STYLE: React.CSSProperties = {\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n};\n\nexport const EMPTY_ITEM_STYLE: React.CSSProperties = {\n    padding: '6px 10px',\n    fontSize: 'var(--malachite-font-size-small, 13px)',\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n    userSelect: 'none',\n};\n\nexport const TEXT_ITEM_STYLE: React.CSSProperties = {\n    ...EMPTY_ITEM_STYLE,\n    color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n};\n\nexport const ITEM_ICON_STYLE: React.CSSProperties = {\n    display: 'inline-flex',\n    flexShrink: 0,\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n};\n\nexport const ITEM_CLASS = 'malachite-actionmenu-item';\n\nexport const TAG_HOST_ATTR = 'data-malachite-actionmenu-tag' as const;\n\nexport const TAG_HOST_STYLE: React.CSSProperties = { display: 'inline-flex', flexShrink: 0 };\n\nexport const TAG_HOST_PROPS = { [TAG_HOST_ATTR]: '' };\n\nconst ITEM_RULES = [\n    `.${ITEM_CLASS} { background: transparent; }`,\n    `.${ITEM_CLASS}:not(:disabled):hover { background: var(--malachite-card-dimmed-background, rgb(247, 247, 247)); }`,\n    `.${ITEM_CLASS}:focus-visible { outline: 2px solid var(--malachite-text-primary, rgb(10, 10, 10)); outline-offset: -2px; }`,\n];\n\nexport const ensureActionMenuStyles = (): CSSStyleSheet | null => {\n    ensureOverlayStyles();\n    return injectStyleSheet('malachite-actionmenu-item-styles', ITEM_RULES);\n};\n\nexport type ActionMenuTone = 'default' | 'muted';\n\nconst ITEM_TEXT: Record<ActionMenuTone, string> = {\n    default: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n    muted: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n};\n\ntype ActionItem = Exclude<ActionMenuItem, { type: 'text' } | { type: 'divider' }>;\n\nconst actionItemColor = (item: ActionItem, tone: ActionMenuTone): string => {\n    if (item.danger) {\n        return 'var(--malachite-text-destructive, rgb(237, 53, 54))';\n    }\n    if (item.current) {\n        return SELECTED_ROW_FOREGROUND;\n    }\n    return ITEM_TEXT[tone];\n};\n\nexport const itemStyle = (\n    item: ActionMenuItem,\n    tone: ActionMenuTone = 'default',\n): React.CSSProperties => {\n    if (item.type === 'text') {\n        return TEXT_ITEM_STYLE;\n    }\n    if (item.type === 'divider') {\n        return {\n            height: 1,\n            background: 'var(--malachite-card-border, rgb(232, 232, 232))',\n            margin: '4px 0',\n        };\n    }\n    return {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        padding: '6px 10px',\n        borderRadius: 8,\n        fontSize: 'var(--malachite-font-size-small, 13px)',\n        fontWeight: 400,\n        color: actionItemColor(item, tone),\n        background: item.current ? SELECTED_ROW_BACKGROUND : undefined,\n        cursor: item.disabled ? 'not-allowed' : 'pointer',\n        opacity: item.disabled ? 0.5 : 1,\n        userSelect: 'none',\n        whiteSpace: 'nowrap',\n        overflow: 'hidden',\n        border: 'none',\n        textAlign: 'left',\n        width: '100%',\n    };\n};\n\nexport const menuStyle = (position: MenuGeometry | null): React.CSSProperties => ({\n    position: 'fixed',\n    top: position?.top ?? 0,\n    left: position?.left ?? 0,\n    width: position?.width,\n    maxHeight: position?.maxHeight,\n    overflowY: 'auto',\n    background: MENU_SPECS.options.background,\n    border: MENU_SPECS.options.border,\n    borderRadius: MENU_SPECS.options.radius,\n    boxShadow: MENU_SPECS.options.shadow,\n    padding: MENU_SPECS.options.padding,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    visibility: position ? 'visible' : 'hidden',\n    opacity: position ? 1 : 0,\n});\n"],"names":["TRIGGER_SIZES","LABEL_STYLE","EMPTY_ITEM_STYLE","TEXT_ITEM_STYLE","ITEM_ICON_STYLE","ITEM_CLASS","TAG_HOST_ATTR","TAG_HOST_STYLE","TAG_HOST_PROPS","ITEM_RULES","ensureActionMenuStyles","ensureOverlayStyles","injectStyleSheet","ITEM_TEXT","actionItemColor","item","tone","SELECTED_ROW_FOREGROUND","itemStyle","SELECTED_ROW_BACKGROUND","menuStyle","position","MENU_SPECS"],"mappings":";;;;AAOO,MAAMA,IAA+E;AAAA,EACxF,OAAO,EAAE,MAAM,IAAI,SAAS,mCAAA;AAAA,EAC5B,QAAQ,EAAE,MAAM,IAAI,SAAS,mCAAA;AACjC,GAEaC,IAAmC;AAAA,EAC5C,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAClB,GAEaC,IAAwC;AAAA,EACjD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAChB,GAEaC,IAAuC;AAAA,EAChD,GAAGD;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAChB,GAEaE,IAAuC;AAAA,EAChD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AACX,GAEaC,IAAa,6BAEbC,IAAgB,iCAEhBC,IAAsC,EAAE,SAAS,eAAe,YAAY,EAAA,GAE5EC,IAAiB,EAAE,CAACF,CAAa,GAAG,GAAA,GAE3CG,IAAa;AAAA,EACf,IAAIJ,CAAU;AAAA,EACd,IAAIA,CAAU;AAAA,EACd,IAAIA,CAAU;AAClB,GAEaK,IAAyB,OAClCC,EAAA,GACOC,EAAiB,oCAAoCH,CAAU,IAKpEI,IAA4C;AAAA,EAC9C,SAAS;AAAA,EACT,OAAO;AACX,GAIMC,IAAkB,CAACC,GAAkBC,MACnCD,EAAK,SACE,wDAEPA,EAAK,UACEE,IAEJJ,EAAUG,CAAI,GAGZE,IAAY,CACrBH,GACAC,IAAuB,cAEnBD,EAAK,SAAS,SACPZ,IAEPY,EAAK,SAAS,YACP;AAAA,EACH,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,QAAQ;AAAA,IAGT;AAAA,EACH,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,SAAS;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAOD,EAAgBC,GAAMC,CAAI;AAAA,EACjC,YAAYD,EAAK,UAAUI,IAA0B;AAAA,EACrD,QAAQJ,EAAK,WAAW,gBAAgB;AAAA,EACxC,SAASA,EAAK,WAAW,MAAM;AAAA,EAC/B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,GAIFK,IAAY,CAACC,OAAwD;AAAA,EAC9E,UAAU;AAAA,EACV,MAAKA,KAAA,gBAAAA,EAAU,QAAO;AAAA,EACtB,OAAMA,KAAA,gBAAAA,EAAU,SAAQ;AAAA,EACxB,OAAOA,KAAA,gBAAAA,EAAU;AAAA,EACjB,WAAWA,KAAA,gBAAAA,EAAU;AAAA,EACrB,WAAW;AAAA,EACX,YAAYC,EAAW,QAAQ;AAAA,EAC/B,QAAQA,EAAW,QAAQ;AAAA,EAC3B,cAAcA,EAAW,QAAQ;AAAA,EACjC,WAAWA,EAAW,QAAQ;AAAA,EAC9B,SAASA,EAAW,QAAQ;AAAA,EAC5B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK;AAAA,EACL,YAAYD,IAAW,YAAY;AAAA,EACnC,SAASA,IAAW,IAAI;AAC5B;"}

package/dist/components/useActionMenuPosition.js

@@ -1,73 +1,80 @@
-import { useState as L, useRef as y, useInsertionEffect as A, useCallback as F, useLayoutEffect as b } from "react";
-import { ensureActionMenuStyles as O } from "./actionMenuStyles.js";
-import { measureContentWidth as z, measureMenuGeometry as C, computeFloatingGeometry as P, fullPanelHeight as T, MENU_MAX_HEIGHT_PX as H, rectSignature as E, FLOATING_OFFSET_PX as W } from "./floatingMenuGeometry.js";
-import { useTopLayer as _ } from "./topLayer.js";
-const I = (c, i, l, { minWidth: g, placement: m, offset: h }) => {
-  const [M, p] = L(null), w = y(void 0), d = y(!0);
-  _(l, c), A(() => {
-    c && O();
-  }, [c]);
-  const r = F(() => {
-    const o = i.current;
-    if (!o)
+import { useState as L, useRef as T, useInsertionEffect as S, useCallback as F, useLayoutEffect as O } from "react";
+import { ensureActionMenuStyles as _, TAG_HOST_ATTR as z } from "./actionMenuStyles.js";
+import { measureContentWidth as C, measureMenuGeometry as G, computeFloatingGeometry as P, fullPanelHeight as W, MENU_MAX_HEIGHT_PX as E, rectSignature as A, FLOATING_OFFSET_PX as q } from "./floatingMenuGeometry.js";
+import { useTopLayer as x } from "./topLayer.js";
+const B = (s, t, r) => {
+  const w = new Set(s ? s.querySelectorAll(`[${z}]`) : []);
+  r.forEach((i) => {
+    w.has(i) || (r.delete(i), t == null || t.unobserve(i));
+  }), w.forEach((i) => {
+    r.has(i) || (r.add(i), t == null || t.observe(i));
+  });
+}, U = (s, t, r, { minWidth: w, placement: i, offset: p }) => {
+  const [v, y] = L(null), g = T(void 0), c = T(!0);
+  x(r, s), S(() => {
+    s && _();
+  }, [s]);
+  const u = F(() => {
+    const l = t.current;
+    if (!l)
       return;
-    const t = l.current;
-    if (t && d.current) {
-      const n = t.style.width;
-      t.style.width = "", w.current = z(t) ?? w.current, t.style.width = n, d.current = !1;
+    const e = r.current;
+    if (e && c.current) {
+      const o = e.style.width;
+      e.style.width = "", g.current = C(e) ?? g.current, e.style.width = o, c.current = !1;
     }
-    const a = o.getBoundingClientRect(), s = C(t, {
-      triggerRect: a,
+    const m = l.getBoundingClientRect(), a = G(e, {
+      triggerRect: m,
       preset: "options",
-      minWidth: g,
-      contentWidth: w.current,
+      minWidth: w,
+      contentWidth: g.current,
       viewportWidth: window.innerWidth,
       viewportHeight: window.innerHeight
     });
-    if (m === "bottom-end" && h === void 0 || !t) {
-      p(s);
+    if (i === "bottom-end" && p === void 0 || !e) {
+      y(a);
       return;
     }
-    const e = P({
-      triggerRect: a,
-      placement: m,
-      panelWidth: s.width,
-      panelHeight: Math.min(T(t), H),
-      gap: W[h ?? "small"],
+    const n = P({
+      triggerRect: m,
+      placement: i,
+      panelWidth: a.width,
+      panelHeight: Math.min(W(e), E),
+      gap: q[p ?? "small"],
       viewportWidth: window.innerWidth,
       viewportHeight: window.innerHeight
     });
-    p({
-      ...s,
-      top: e.top,
-      left: e.left,
-      maxHeight: Math.min(H, e.maxHeight),
-      openUp: e.side === "top"
+    y({
+      ...a,
+      top: n.top,
+      left: n.left,
+      maxHeight: Math.min(E, n.maxHeight),
+      openUp: n.side === "top"
     });
-  }, [i, l, g, m, h]);
-  return b(() => {
-    if (!c) {
-      p(null), w.current = void 0, d.current = !0;
+  }, [t, r, w, i, p]);
+  return O(() => {
+    if (!s) {
+      y(null), g.current = void 0, c.current = !0;
       return;
     }
-    d.current = !0, r();
-    let o = 0, t = !1, a = i.current ? E(i.current.getBoundingClientRect()) : "";
-    const s = () => {
-      const f = i.current, v = f ? E(f.getBoundingClientRect()) : "";
-      (v !== a || t) && (a = v, t = !1, r()), o = requestAnimationFrame(s);
+    c.current = !0, u();
+    let l = 0, e = !1, m = t.current ? A(t.current.getBoundingClientRect()) : "";
+    const a = () => {
+      const f = t.current, h = f ? A(f.getBoundingClientRect()) : "";
+      (h !== m || e) && (m = h, e = !1, u()), l = requestAnimationFrame(a);
     };
-    o = requestAnimationFrame(s), window.addEventListener("scroll", r, !0), window.addEventListener("resize", r);
-    const e = l.current, n = e && typeof ResizeObserver < "u" ? new ResizeObserver(() => {
-      t = !0;
-    }) : null, u = e && typeof MutationObserver < "u" ? new MutationObserver(() => {
-      d.current = !0, t = !0;
+    l = requestAnimationFrame(a), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u);
+    const n = r.current, o = n && typeof ResizeObserver < "u" ? new ResizeObserver((f) => {
+      f.some((h) => h.target !== n) && (c.current = !0), e = !0;
+    }) : null, M = /* @__PURE__ */ new Set(), H = () => B(n, o, M), d = n && typeof MutationObserver < "u" ? new MutationObserver(() => {
+      c.current = !0, e = !0, H();
     }) : null;
-    return e && (n == null || n.observe(e), u == null || u.observe(e, { childList: !0, subtree: !0, characterData: !0 })), () => {
-      cancelAnimationFrame(o), n == null || n.disconnect(), u == null || u.disconnect(), window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
+    return n && (o == null || o.observe(n), H(), d == null || d.observe(n, { childList: !0, subtree: !0, characterData: !0 })), () => {
+      cancelAnimationFrame(l), o == null || o.disconnect(), d == null || d.disconnect(), window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
     };
-  }, [c, r, i, l]), M;
+  }, [s, u, t, r]), v;
 };
 export {
-  I as useActionMenuPosition
+  U as useActionMenuPosition
 };
 //# sourceMappingURL=useActionMenuPosition.js.map

package/dist/components/useActionMenuPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useActionMenuPosition.js","sources":["../../src/components/useActionMenuPosition.ts"],"sourcesContent":["import {\n    type RefObject,\n    useCallback,\n    useInsertionEffect,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { ensureActionMenuStyles } from './actionMenuStyles';\nimport type { ActionMenuPlacement } from './actionMenuTypes';\nimport {\n    FLOATING_OFFSET_PX,\n    type FloatingOffset,\n    MENU_MAX_HEIGHT_PX,\n    type MenuGeometry,\n    computeFloatingGeometry,\n    fullPanelHeight,\n    measureContentWidth,\n    measureMenuGeometry,\n    rectSignature,\n} from './floatingMenuGeometry';\nimport { useTopLayer } from './topLayer';\n\ninterface PositionOptions {\n    minWidth?: number;\n    placement: ActionMenuPlacement;\n    offset?: FloatingOffset;\n}\n\nexport const useActionMenuPosition = (\n    open: boolean,\n    triggerRef: RefObject<HTMLElement | null>,\n    menuRef: RefObject<HTMLDivElement | null>,\n    { minWidth, placement, offset }: PositionOptions,\n): MenuGeometry | null => {\n    const [position, setPosition] = useState<MenuGeometry | null>(null);\n    const contentWidth = useRef<number | undefined>(undefined);\n    const contentDirty = useRef(true);\n\n    useTopLayer(menuRef, open);\n\n    useInsertionEffect(() => {\n        if (open) {\n            ensureActionMenuStyles();\n        }\n    }, [open]);\n\n    const update = useCallback(() => {\n        const trigger = triggerRef.current;\n        if (!trigger) {\n            return;\n        }\n        const menu = menuRef.current;\n        if (menu && contentDirty.current) {\n            const inlineWidth = menu.style.width;\n            menu.style.width = '';\n            contentWidth.current = measureContentWidth(menu) ?? contentWidth.current;\n            menu.style.width = inlineWidth;\n            contentDirty.current = false;\n        }\n        const triggerRect = trigger.getBoundingClientRect();\n        const geometry = measureMenuGeometry(menu, {\n            triggerRect,\n            preset: 'options',\n            minWidth,\n            contentWidth: contentWidth.current,\n            viewportWidth: window.innerWidth,\n            viewportHeight: window.innerHeight,\n        });\n        if ((placement === 'bottom-end' && offset === undefined) || !menu) {\n            setPosition(geometry);\n            return;\n        }\n        const floating = computeFloatingGeometry({\n            triggerRect,\n            placement,\n            panelWidth: geometry.width,\n            panelHeight: Math.min(fullPanelHeight(menu), MENU_MAX_HEIGHT_PX),\n            gap: FLOATING_OFFSET_PX[offset ?? 'small'],\n            viewportWidth: window.innerWidth,\n            viewportHeight: window.innerHeight,\n        });\n        setPosition({\n            ...geometry,\n            top: floating.top,\n            left: floating.left,\n            maxHeight: Math.min(MENU_MAX_HEIGHT_PX, floating.maxHeight),\n            openUp: floating.side === 'top',\n        });\n    }, [triggerRef, menuRef, minWidth, placement, offset]);\n\n    useLayoutEffect(() => {\n        if (!open) {\n            setPosition(null);\n            contentWidth.current = undefined;\n            contentDirty.current = true;\n            return;\n        }\n        contentDirty.current = true;\n        update();\n        let frame = 0;\n        let menuResized = false;\n        let lastRect = triggerRef.current\n            ? rectSignature(triggerRef.current.getBoundingClientRect())\n            : '';\n        const followTrigger = () => {\n            const trigger = triggerRef.current;\n            const signature = trigger ? rectSignature(trigger.getBoundingClientRect()) : '';\n            if (signature !== lastRect || menuResized) {\n                lastRect = signature;\n                menuResized = false;\n                update();\n            }\n            frame = requestAnimationFrame(followTrigger);\n        };\n        frame = requestAnimationFrame(followTrigger);\n        window.addEventListener('scroll', update, true);\n        window.addEventListener('resize', update);\n        const menu = menuRef.current;\n        const observer =\n            menu && typeof ResizeObserver !== 'undefined'\n                ? new ResizeObserver(() => {\n                      menuResized = true;\n                  })\n                : null;\n        const contentWatcher =\n            menu && typeof MutationObserver !== 'undefined'\n                ? new MutationObserver(() => {\n                      contentDirty.current = true;\n                      menuResized = true;\n                  })\n                : null;\n        if (menu) {\n            observer?.observe(menu);\n            contentWatcher?.observe(menu, { childList: true, subtree: true, characterData: true });\n        }\n        return () => {\n            cancelAnimationFrame(frame);\n            observer?.disconnect();\n            contentWatcher?.disconnect();\n            window.removeEventListener('scroll', update, true);\n            window.removeEventListener('resize', update);\n        };\n    }, [open, update, triggerRef, menuRef]);\n\n    return position;\n};\n"],"names":["useActionMenuPosition","open","triggerRef","menuRef","minWidth","placement","offset","position","setPosition","useState","contentWidth","useRef","contentDirty","useTopLayer","useInsertionEffect","ensureActionMenuStyles","update","useCallback","trigger","menu","inlineWidth","measureContentWidth","triggerRect","geometry","measureMenuGeometry","floating","computeFloatingGeometry","fullPanelHeight","MENU_MAX_HEIGHT_PX","FLOATING_OFFSET_PX","useLayoutEffect","frame","menuResized","lastRect","rectSignature","followTrigger","signature","observer","contentWatcher"],"mappings":"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"}
+{"version":3,"file":"useActionMenuPosition.js","sources":["../../src/components/useActionMenuPosition.ts"],"sourcesContent":["import {\n    type RefObject,\n    useCallback,\n    useInsertionEffect,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { TAG_HOST_ATTR, ensureActionMenuStyles } from './actionMenuStyles';\nimport type { ActionMenuPlacement } from './actionMenuTypes';\nimport {\n    FLOATING_OFFSET_PX,\n    type FloatingOffset,\n    MENU_MAX_HEIGHT_PX,\n    type MenuGeometry,\n    computeFloatingGeometry,\n    fullPanelHeight,\n    measureContentWidth,\n    measureMenuGeometry,\n    rectSignature,\n} from './floatingMenuGeometry';\nimport { useTopLayer } from './topLayer';\n\ninterface PositionOptions {\n    minWidth?: number;\n    placement: ActionMenuPlacement;\n    offset?: FloatingOffset;\n}\n\n// A tag renders inside its own shadow root, which neither observer on the menu can see grow.\nconst syncTagHosts = (\n    menu: HTMLElement | null,\n    observer: ResizeObserver | null,\n    watched: Set<Element>,\n) => {\n    const present = new Set(menu ? menu.querySelectorAll(`[${TAG_HOST_ATTR}]`) : []);\n    watched.forEach((host) => {\n        if (!present.has(host)) {\n            watched.delete(host);\n            observer?.unobserve(host);\n        }\n    });\n    present.forEach((host) => {\n        if (!watched.has(host)) {\n            watched.add(host);\n            observer?.observe(host);\n        }\n    });\n};\n\nexport const useActionMenuPosition = (\n    open: boolean,\n    triggerRef: RefObject<HTMLElement | null>,\n    menuRef: RefObject<HTMLDivElement | null>,\n    { minWidth, placement, offset }: PositionOptions,\n): MenuGeometry | null => {\n    const [position, setPosition] = useState<MenuGeometry | null>(null);\n    const contentWidth = useRef<number | undefined>(undefined);\n    const contentDirty = useRef(true);\n\n    useTopLayer(menuRef, open);\n\n    useInsertionEffect(() => {\n        if (open) {\n            ensureActionMenuStyles();\n        }\n    }, [open]);\n\n    const update = useCallback(() => {\n        const trigger = triggerRef.current;\n        if (!trigger) {\n            return;\n        }\n        const menu = menuRef.current;\n        if (menu && contentDirty.current) {\n            const inlineWidth = menu.style.width;\n            menu.style.width = '';\n            contentWidth.current = measureContentWidth(menu) ?? contentWidth.current;\n            menu.style.width = inlineWidth;\n            contentDirty.current = false;\n        }\n        const triggerRect = trigger.getBoundingClientRect();\n        const geometry = measureMenuGeometry(menu, {\n            triggerRect,\n            preset: 'options',\n            minWidth,\n            contentWidth: contentWidth.current,\n            viewportWidth: window.innerWidth,\n            viewportHeight: window.innerHeight,\n        });\n        if ((placement === 'bottom-end' && offset === undefined) || !menu) {\n            setPosition(geometry);\n            return;\n        }\n        const floating = computeFloatingGeometry({\n            triggerRect,\n            placement,\n            panelWidth: geometry.width,\n            panelHeight: Math.min(fullPanelHeight(menu), MENU_MAX_HEIGHT_PX),\n            gap: FLOATING_OFFSET_PX[offset ?? 'small'],\n            viewportWidth: window.innerWidth,\n            viewportHeight: window.innerHeight,\n        });\n        setPosition({\n            ...geometry,\n            top: floating.top,\n            left: floating.left,\n            maxHeight: Math.min(MENU_MAX_HEIGHT_PX, floating.maxHeight),\n            openUp: floating.side === 'top',\n        });\n    }, [triggerRef, menuRef, minWidth, placement, offset]);\n\n    useLayoutEffect(() => {\n        if (!open) {\n            setPosition(null);\n            contentWidth.current = undefined;\n            contentDirty.current = true;\n            return;\n        }\n        contentDirty.current = true;\n        update();\n        let frame = 0;\n        let menuResized = false;\n        let lastRect = triggerRef.current\n            ? rectSignature(triggerRef.current.getBoundingClientRect())\n            : '';\n        const followTrigger = () => {\n            const trigger = triggerRef.current;\n            const signature = trigger ? rectSignature(trigger.getBoundingClientRect()) : '';\n            if (signature !== lastRect || menuResized) {\n                lastRect = signature;\n                menuResized = false;\n                update();\n            }\n            frame = requestAnimationFrame(followTrigger);\n        };\n        frame = requestAnimationFrame(followTrigger);\n        window.addEventListener('scroll', update, true);\n        window.addEventListener('resize', update);\n        const menu = menuRef.current;\n        const observer =\n            menu && typeof ResizeObserver !== 'undefined'\n                ? new ResizeObserver((entries) => {\n                      if (entries.some((entry) => entry.target !== menu)) {\n                          contentDirty.current = true;\n                      }\n                      menuResized = true;\n                  })\n                : null;\n        const watchedTagHosts = new Set<Element>();\n        const watchTagHosts = () => syncTagHosts(menu, observer, watchedTagHosts);\n        const contentWatcher =\n            menu && typeof MutationObserver !== 'undefined'\n                ? new MutationObserver(() => {\n                      contentDirty.current = true;\n                      menuResized = true;\n                      watchTagHosts();\n                  })\n                : null;\n        if (menu) {\n            observer?.observe(menu);\n            watchTagHosts();\n            contentWatcher?.observe(menu, { childList: true, subtree: true, characterData: true });\n        }\n        return () => {\n            cancelAnimationFrame(frame);\n            observer?.disconnect();\n            contentWatcher?.disconnect();\n            window.removeEventListener('scroll', update, true);\n            window.removeEventListener('resize', update);\n        };\n    }, [open, update, triggerRef, menuRef]);\n\n    return position;\n};\n"],"names":["syncTagHosts","menu","observer","watched","present","TAG_HOST_ATTR","host","useActionMenuPosition","open","triggerRef","menuRef","minWidth","placement","offset","position","setPosition","useState","contentWidth","useRef","contentDirty","useTopLayer","useInsertionEffect","ensureActionMenuStyles","update","useCallback","trigger","inlineWidth","measureContentWidth","triggerRect","geometry","measureMenuGeometry","floating","computeFloatingGeometry","fullPanelHeight","MENU_MAX_HEIGHT_PX","FLOATING_OFFSET_PX","useLayoutEffect","frame","menuResized","lastRect","rectSignature","followTrigger","signature","entries","entry","watchedTagHosts","watchTagHosts","contentWatcher"],"mappings":"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"}

package/dist/index.d.ts

@@ -105,6 +105,13 @@ export declare type ActionMenuItem = {
     danger?: boolean;
     tooltip?: string;
     icon?: default_2.ReactNode;
+    /** Rendered after the label in its own styled host, e.g. a malachite `Tag`. Its text
+     *  joins the item's accessible name. Non-interactive content only: the item is a
+     *  `<button>`, so a control inside it (a removable `Tag`'s button) would be nested. */
+    tag?: default_2.ReactNode;
+    /** Marks the item for the page the user is on: `aria-current="page"` and the selected
+     *  row paint. A `danger` item keeps its red text. */
+    current?: boolean;
 } | {
     type: 'text';
     key: string;