@tcn/ui 0.16.0 → 0.18.0

package/dist/mobile/inputs/date_picker/mobile_date_picker_year_selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile_date_picker_year_selector.js","sources":["../../../../src/mobile/inputs/date_picker/mobile_date_picker_year_selector.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { MobileButton } from '../../actions/button/mobile_button.js';\nimport { HStack } from '../../../stacks/h_stack.js';\nimport { Spacer } from '../../../stacks/spacer.js';\nimport { VStack } from '../../../stacks/v_stack.js';\nimport { BodyText, Headline } from '../../../typography/index.js';\nimport { DatePickerPresenter } from '../../../inputs/date_picker/date_picker_presenter.js';\nimport { FocusRedirect } from '../../../utils/index.js';\nimport { clsx } from 'clsx';\nimport styles from './mobile_date_picker_year_selector.module.css';\n\nexport interface MobileDatePickerYearSelectorProps {\n  presenter: DatePickerPresenter;\n  onClose: () => void;\n}\n\nexport function MobileDatePickerYearSelector({\n  presenter,\n  onClose,\n}: MobileDatePickerYearSelectorProps) {\n  const { min, max, visibleYear, visibleMonth } = useSignalValue(\n    presenter.stateBroadcast\n  );\n\n  const [offset, setOffset] = useState(0);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const minYear = min == null ? -Infinity : min.getFullYear();\n  const maxYear = max == null ? Infinity : max.getFullYear();\n  const years: React.ReactNode[] = [];\n  const remainder = visibleYear % 20;\n  const firstYear = visibleYear - remainder + offset;\n  const lastYear = firstYear + 19;\n\n  for (let x = 0; x < 20; x++) {\n    const date = new Date(visibleYear, visibleMonth, 1);\n    date.setFullYear(visibleYear - remainder + x + offset);\n\n    const disabled = date.getFullYear() > maxYear || date.getFullYear() < minYear;\n\n    years.push(\n      <button\n        key={x}\n        disabled={disabled}\n        className={clsx(styles['mobile-year-button'], 'tcn-date-picker-year-button')}\n        data-is-disabled={String(disabled)}\n        data-is-selected={String(date.getFullYear() === visibleYear)}\n        onClick={() => {\n          presenter.setVisibleYear(date.getFullYear());\n          onClose();\n        }}\n      >\n        <BodyText>{date.getFullYear()}</BodyText>\n      </button>\n    );\n  }\n\n  function focus() {\n    containerRef.current?.focus();\n  }\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, []);\n\n  const rows = [\n    years.slice(0, 4),\n    years.slice(4, 8),\n    years.slice(8, 12),\n    years.slice(12, 16),\n    years.slice(16, 20),\n  ];\n\n  function prev() {\n    setOffset(offset - 20);\n  }\n\n  function next() {\n    setOffset(offset + 20);\n  }\n\n  return (\n    <VStack\n      ref={containerRef}\n      tabIndex={0}\n      padding=\"8px\"\n      width=\"100%\"\n      className={clsx(\n        styles['mobile-year-selector'],\n        'tcn-mobile-date-picker-year-selector'\n      )}\n      gap=\"4px\"\n    >\n      <HStack gap=\"4px\">\n        <MobileButton onClick={prev} hierarchy=\"tertiary\" width=\"auto\">\n          <ChevronLeftIcon flipOnRtl size=\"md\" />\n        </MobileButton>\n        <Spacer />\n        <Headline\n          selectable={false}\n          emphasis=\"faint\"\n          hierarchy=\"tertiary\"\n        >{`${firstYear}-${lastYear}`}</Headline>\n        <Spacer />\n        <MobileButton hierarchy=\"tertiary\" width=\"auto\" onClick={next}>\n          <ChevronRightIcon size=\"md\" />\n        </MobileButton>\n      </HStack>\n      {rows.map((row, index) => (\n        <HStack key={index} gap=\"4px\" width=\"100%\">\n          {row}\n        </HStack>\n      ))}\n      <FocusRedirect onRedirect={focus} />\n    </VStack>\n  );\n}\n"],"names":["MobileDatePickerYearSelector","presenter","onClose","min","max","visibleYear","visibleMonth","useSignalValue","offset","setOffset","useState","containerRef","useRef","minYear","maxYear","years","remainder","firstYear","lastYear","x","date","disabled","jsx","clsx","styles","BodyText","focus","useEffect","rows","prev","next","jsxs","VStack","HStack","MobileButton","ChevronLeftIcon","Spacer","Headline","ChevronRightIcon","row","index","FocusRedirect"],"mappings":"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"}
+{"version":3,"file":"mobile_date_picker_year_selector.js","sources":["../../../../src/mobile/inputs/date_picker/mobile_date_picker_year_selector.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { MobileButton } from '../../actions/button/mobile_button.js';\nimport { HStack } from '../../../stacks/h_stack.js';\nimport { Spacer } from '../../../stacks/spacer.js';\nimport { VStack } from '../../../stacks/v_stack.js';\nimport { BodyText, Headline } from '../../../typography/index.js';\nimport { DatePickerPresenter } from '../../../inputs/date_picker/date_picker_presenter.js';\nimport { FocusRedirect } from '../../../utils/index.js';\nimport { clsx } from 'clsx';\nimport styles from './mobile_date_picker_year_selector.module.css';\n\nexport interface MobileDatePickerYearSelectorProps {\n  presenter: DatePickerPresenter;\n  onClose: () => void;\n}\n\nexport function MobileDatePickerYearSelector({\n  presenter,\n  onClose,\n}: MobileDatePickerYearSelectorProps) {\n  const { min, max, visibleYear, visibleMonth } = useSignalValue(\n    presenter.stateBroadcast\n  );\n\n  const [offset, setOffset] = useState(0);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const minYear = min == null ? -Infinity : min.getFullYear();\n  const maxYear = max == null ? Infinity : max.getFullYear();\n  const years: React.ReactNode[] = [];\n  const remainder = visibleYear % 20;\n  const firstYear = visibleYear - remainder + offset;\n  const lastYear = firstYear + 19;\n\n  for (let x = 0; x < 20; x++) {\n    const date = new Date(visibleYear, visibleMonth, 1);\n    date.setFullYear(visibleYear - remainder + x + offset);\n\n    const disabled = date.getFullYear() > maxYear || date.getFullYear() < minYear;\n\n    years.push(\n      <button\n        key={x}\n        disabled={disabled}\n        className={clsx(styles['mobile-year-button'], 'tcn-date-picker-year-button')}\n        data-is-disabled={String(disabled)}\n        data-is-selected={String(date.getFullYear() === visibleYear)}\n        onClick={() => {\n          presenter.setVisibleYear(date.getFullYear());\n          onClose();\n        }}\n      >\n        <BodyText>{date.getFullYear()}</BodyText>\n      </button>\n    );\n  }\n\n  function focus() {\n    containerRef.current?.focus();\n  }\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, []);\n\n  const rows = [\n    years.slice(0, 4),\n    years.slice(4, 8),\n    years.slice(8, 12),\n    years.slice(12, 16),\n    years.slice(16, 20),\n  ];\n\n  function prev() {\n    setOffset(offset - 20);\n  }\n\n  function next() {\n    setOffset(offset + 20);\n  }\n\n  return (\n    <VStack\n      ref={containerRef}\n      tabIndex={0}\n      padding=\"8px\"\n      width=\"100%\"\n      className={clsx(\n        styles['mobile-year-selector'],\n        'tcn-mobile-date-picker-year-selector'\n      )}\n      gap=\"4px\"\n    >\n      <HStack gap=\"4px\">\n        <MobileButton onClick={prev} hierarchy=\"tertiary\" width=\"auto\">\n          <ChevronLeftIcon flipOnRtl size=\"md\" />\n        </MobileButton>\n        <Spacer />\n        <Headline\n          selectable={false}\n          emphasis=\"faint\"\n          hierarchy=\"tertiary\"\n        >{`${firstYear}-${lastYear}`}</Headline>\n        <Spacer />\n        <MobileButton hierarchy=\"tertiary\" width=\"auto\" onClick={next}>\n          <ChevronRightIcon size=\"md\" />\n        </MobileButton>\n      </HStack>\n      {rows.map((row, index) => (\n        <HStack key={index} gap=\"4px\" width=\"100%\">\n          {row}\n        </HStack>\n      ))}\n      <FocusRedirect onRedirect={focus} />\n    </VStack>\n  );\n}\n"],"names":["MobileDatePickerYearSelector","presenter","onClose","min","max","visibleYear","visibleMonth","useSignalValue","offset","setOffset","useState","containerRef","useRef","minYear","maxYear","years","remainder","firstYear","lastYear","x","date","disabled","jsx","clsx","styles","BodyText","focus","useEffect","rows","prev","next","jsxs","VStack","HStack","MobileButton","ChevronLeftIcon","Spacer","Headline","ChevronRightIcon","row","index","FocusRedirect"],"mappings":"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"}

package/dist/multiselect_values.css

@@ -1 +1 @@
-@layer tcn-system{:where(._chip_ab2e86b){margin-block:2px;margin-inline-end:4px;padding:4px 8px 4px 12px}:where(._remove_e42285d),:where(._remove_e42285d:focus),:where(._remove_e42285d:active){outline-width:1px}:where(._item-container_2592c83){background-color:#fff;border-radius:4px;padding:4px;max-height:150px;min-width:100%;overflow:auto;border:1px solid #aaa}:where(._item-container_2592c83[data-is-disabled=true]){background-color:#0000000d;cursor:not-allowed}:where(._item-container_2592c83[data-is-disabled=true]>._chip_ab2e86b){opacity:.5;cursor:not-allowed}}
+@layer tcn-system{:where(._chip_ab2e86b){margin-block:2px;margin-inline-end:4px;padding:4px 8px 4px 12px}:where(._remove_e42285d),:where(._remove_e42285d:focus),:where(._remove_e42285d:active){outline-width:1px}:where(._item-container_2592c83){box-sizing:border-box;background-color:#fff;border-radius:4px;padding:4px;max-height:150px;min-width:100%;overflow:auto;border:1px solid #aaa}:where(._item-container_2592c83[data-is-disabled=true]){background-color:#0000000d;cursor:not-allowed}:where(._item-container_2592c83[data-is-disabled=true]>._chip_ab2e86b){opacity:.5;cursor:not-allowed}}

package/dist/navigation/tabs/state/link/tab_link.js

@@ -1,24 +1,28 @@
 import { jsx as k } from "react/jsx-runtime";
 import { forwardRef as x, useCallback as W } from "react";
 import { TabItem as l } from "../../primitives/tabs_list.js";
-import "../../../../utils/click_away_listener.js";
-import "../../../../utils/focus_redirect.js";
-import "../../../../utils/scroll_away_listener.js";
+import "../../../../utils/listeners/click_away_listener.js";
+import "../../../../utils/listeners/focus_redirect.js";
+import "../../../../utils/listeners/scroll_away_listener.js";
 import { useForkRef as I } from "../../../../utils/hooks/use_fork_ref.js";
 import "../../../../utils/hooks/use_resize_observer.js";
-import "../../../../utils/dnd/context.js";
+import "../../../../utils/hooks/labelled_by_context.js";
+import "../../../../utils/decorators/draggable/context.js";
 import "clsx";
-import "../../../../draggable.module-BgelQsuJ.js";
+import "../../../../draggable.module-DFYR5n3n.js";
+import "../../../../utils/decorators/resizable/context.js";
+import "../../../../resizable.module-ur5FBfxo.js";
+import "../../../../utils/decorators/resizable/resize_handle.js";
 import { useTabs as T } from "../context.js";
 import { useTabLink as C } from "./use_tab_link.js";
-const D = x(
-  ({ children: m, value: t, onClick: o, minWidth: n, maxWidth: e, id: M, ...a }, p) => {
-    const { ref: s, isMatch: r } = C(t), i = T(), c = I(s, p), d = W(
+const J = x(
+  ({ children: m, value: t, onClick: o, minWidth: n, maxWidth: p, id: M, ...e }, a) => {
+    const { ref: s, isMatch: r } = C(t), i = T(), c = I(s, a), d = W(
       (b) => {
         i.onChange?.(t), o?.(b);
       },
       [i, t, o]
-    ), f = i.minItemWidth ?? n, h = i.maxItemWidth ?? e;
+    ), f = i.minItemWidth ?? n, h = i.maxItemWidth ?? p;
     return /* @__PURE__ */ k(
       l,
       {
@@ -30,13 +34,13 @@ const D = x(
         id: `tab-${t}`,
         "aria-controls": `tabpanel-${t}`,
         tabIndex: r ? 0 : -1,
-        ...a,
+        ...e,
         children: m
       }
     );
   }
 );
 export {
-  D as TabLink
+  J as TabLink
 };
 //# sourceMappingURL=tab_link.js.map

package/dist/navigation/tabs/state/link/tab_link.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab_link.js","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"sourcesContent":["import { forwardRef, useCallback, type PropsWithChildren } from 'react';\nimport { TabItem, type TabItemProps } from '../../primitives/tabs_list.js';\nimport { useForkRef } from '../../../../utils/index.js';\nimport { useTabs } from '../context.js';\nimport { useTabLink } from './use_tab_link.js';\n\nexport interface TabLinkOwnProps {\n  value: string;\n}\n\nexport interface TabLinkProps\n  extends Omit<TabItemProps, 'selected' | 'value'>,\n    TabLinkOwnProps {}\n\nexport const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkProps>>(\n  ({ children, value, onClick, minWidth, maxWidth, id, ...props }, forwardedRef) => {\n    const { ref: internalRef, isMatch } = useTabLink(value);\n    const state = useTabs();\n    const ref = useForkRef(internalRef, forwardedRef);\n\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        state.onChange?.(value);\n        onClick?.(event);\n      },\n      [state, value, onClick]\n    );\n\n    const pickMinWidth = state.minItemWidth ?? minWidth;\n    const pickMaxWidth = state.maxItemWidth ?? maxWidth;\n\n    return (\n      <TabItem\n        ref={ref}\n        selected={isMatch}\n        onClick={handleClick}\n        minWidth={pickMinWidth}\n        maxWidth={pickMaxWidth}\n        id={`tab-${value}`}\n        aria-controls={`tabpanel-${value}`}\n        tabIndex={isMatch ? 0 : -1}\n        {...props}\n      >\n        {children}\n      </TabItem>\n    );\n  }\n);\n"],"names":["TabLink","forwardRef","children","value","onClick","minWidth","maxWidth","id","props","forwardedRef","internalRef","isMatch","useTabLink","state","useTabs","ref","useForkRef","handleClick","useCallback","event","pickMinWidth","pickMaxWidth","jsx","TabItem"],"mappings":";;;;;;;;;;;;;AAcO,MAAMA,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAiB;AAChF,UAAM,EAAE,KAAKC,GAAa,SAAAC,EAAA,IAAYC,EAAWT,CAAK,GAChDU,IAAQC,EAAA,GACRC,IAAMC,EAAWN,GAAaD,CAAY,GAE1CQ,IAAcC;AAAA,MAClB,CAACC,MAA+C;AAC9C,QAAAN,EAAM,WAAWV,CAAK,GACtBC,IAAUe,CAAK;AAAA,MACjB;AAAA,MACA,CAACN,GAAOV,GAAOC,CAAO;AAAA,IAAA,GAGlBgB,IAAeP,EAAM,gBAAgBR,GACrCgB,IAAeR,EAAM,gBAAgBP;AAE3C,WACE,gBAAAgB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,UAAUJ;AAAA,QACV,SAASM;AAAA,QACT,UAAUG;AAAA,QACV,UAAUC;AAAA,QACV,IAAI,OAAOlB,CAAK;AAAA,QAChB,iBAAe,YAAYA,CAAK;AAAA,QAChC,UAAUQ,IAAU,IAAI;AAAA,QACvB,GAAGH;AAAA,QAEH,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"tab_link.js","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"sourcesContent":["import { forwardRef, useCallback, type PropsWithChildren } from 'react';\nimport { TabItem, type TabItemProps } from '../../primitives/tabs_list.js';\nimport { useForkRef } from '../../../../utils/index.js';\nimport { useTabs } from '../context.js';\nimport { useTabLink } from './use_tab_link.js';\n\nexport interface TabLinkOwnProps {\n  value: string;\n}\n\nexport interface TabLinkProps\n  extends Omit<TabItemProps, 'selected' | 'value'>,\n    TabLinkOwnProps {}\n\nexport const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkProps>>(\n  ({ children, value, onClick, minWidth, maxWidth, id, ...props }, forwardedRef) => {\n    const { ref: internalRef, isMatch } = useTabLink(value);\n    const state = useTabs();\n    const ref = useForkRef(internalRef, forwardedRef);\n\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        state.onChange?.(value);\n        onClick?.(event);\n      },\n      [state, value, onClick]\n    );\n\n    const pickMinWidth = state.minItemWidth ?? minWidth;\n    const pickMaxWidth = state.maxItemWidth ?? maxWidth;\n\n    return (\n      <TabItem\n        ref={ref}\n        selected={isMatch}\n        onClick={handleClick}\n        minWidth={pickMinWidth}\n        maxWidth={pickMaxWidth}\n        id={`tab-${value}`}\n        aria-controls={`tabpanel-${value}`}\n        tabIndex={isMatch ? 0 : -1}\n        {...props}\n      >\n        {children}\n      </TabItem>\n    );\n  }\n);\n"],"names":["TabLink","forwardRef","children","value","onClick","minWidth","maxWidth","id","props","forwardedRef","internalRef","isMatch","useTabLink","state","useTabs","ref","useForkRef","handleClick","useCallback","event","pickMinWidth","pickMaxWidth","jsx","TabItem"],"mappings":";;;;;;;;;;;;;;;;;AAcO,MAAMA,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAiB;AAChF,UAAM,EAAE,KAAKC,GAAa,SAAAC,EAAA,IAAYC,EAAWT,CAAK,GAChDU,IAAQC,EAAA,GACRC,IAAMC,EAAWN,GAAaD,CAAY,GAE1CQ,IAAcC;AAAA,MAClB,CAACC,MAA+C;AAC9C,QAAAN,EAAM,WAAWV,CAAK,GACtBC,IAAUe,CAAK;AAAA,MACjB;AAAA,MACA,CAACN,GAAOV,GAAOC,CAAO;AAAA,IAAA,GAGlBgB,IAAeP,EAAM,gBAAgBR,GACrCgB,IAAeR,EAAM,gBAAgBP;AAE3C,WACE,gBAAAgB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,UAAUJ;AAAA,QACV,SAASM;AAAA,QACT,UAAUG;AAAA,QACV,UAAUC;AAAA,QACV,IAAI,OAAOlB,CAAK;AAAA,QAChB,iBAAe,YAAYA,CAAK;AAAA,QAChC,UAAUQ,IAAU,IAAI;AAAA,QACvB,GAAGH;AAAA,QAEH,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/overlay/frame/frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../src/overlay/frame/frame.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAGL,KAAK,QAAQ,EAGd,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,aAAa,CAAC;AAElD,eAAO,MAAM,KAAK,2GAyChB,CAAC;AACH,UAAU,gBAAiB,SAAQ,QAAQ;CAAG;AAE9C,eAAO,MAAM,WAAW,sFAkEvB,CAAC"}
+{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../src/overlay/frame/frame.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAGL,KAAK,QAAQ,EAGd,MAAM,uBAAuB,CAAC;AAS/B,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,aAAa,CAAC;AAElD,eAAO,MAAM,KAAK,2GA6ChB,CAAC;AACH,UAAU,gBAAiB,SAAQ,QAAQ;CAAG;AAE9C,eAAO,MAAM,WAAW,sFA4GvB,CAAC"}

package/dist/overlay/frame/frame.js

@@ -1,101 +1,142 @@
-import { jsx as i } from "react/jsx-runtime";
-import { clsx as F } from "clsx";
-import R, { useCallback as _ } from "react";
-import { flushSync as p } from "react-dom";
-import { Box as k } from "../../stacks/box/box.js";
+import { jsx as n, jsxs as B } from "react/jsx-runtime";
+import { clsx as N } from "clsx";
+import v, { useRef as C, useCallback as W } from "react";
+import { flushSync as E } from "react-dom";
+import { Box as _ } from "../../stacks/box/box.js";
 import "../../stacks/h_collapsible_box.js";
 import "../../stacks/h_stack.js";
 import "../../stacks/spacer.js";
 import "../../stacks/v_collapsible_box.js";
 import "../../stacks/v_stack.js";
-import { ZStack as w } from "../../stacks/z_stack.js";
-import { useDragContainer as z } from "../../utils/dnd/context.js";
-import { Draggable as C } from "../../utils/dnd/draggable/draggable.js";
-import { Portal as P } from "../portal/portal.js";
-import '../../frame.css';const S = "_frame-dialog_2a77c1d", B = { "frame-dialog": S }, J = R.forwardRef(function({
+import { ZStack as L } from "../../stacks/z_stack.js";
+import { useDragContainer as T } from "../../utils/decorators/draggable/context.js";
+import { Draggable as Z } from "../../utils/decorators/draggable/draggable.js";
+import { Resizable as q } from "../../utils/decorators/resizable/resizable.js";
+import { ResizeHandle as i } from "../../utils/decorators/resizable/resize_handle.js";
+import { Portal as A } from "../portal/portal.js";
+const ot = v.forwardRef(function({
   children: a,
-  isOpen: c = !1,
-  draggable: o = !0,
-  veil: l = !1,
-  resizable: t = !0,
-  className: s,
-  enableResizeOnTop: m = !0,
-  enableResizeOnBottom: u = !0,
-  enableResizeOnStart: h = !0,
-  enableResizeOnEnd: r = !0,
-  enableResizeOnLeft: d = !1,
-  enableResizeOnRight: g = !1,
-  ...e
-}, n) {
-  return c ? /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(w, { width: "100%", height: "100%", "data-is-veil": l, className: "tcn-frame-veil", children: /* @__PURE__ */ i(C, { draggable: o, children: /* @__PURE__ */ i(
-    N,
+  isOpen: h = !1,
+  draggable: m = !0,
+  veil: R = !1,
+  resizable: e = !0,
+  className: o,
+  enableResizeOnTop: s = !0,
+  enableResizeOnBottom: p = !0,
+  enableResizeOnStart: d = !0,
+  enableResizeOnEnd: g = !0,
+  enableResizeOnLeft: x = !1,
+  enableResizeOnRight: D = !1,
+  minWidth: O = 1,
+  minHeight: w = 1,
+  ...z
+}, F) {
+  return h ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(L, { width: "100%", height: "100%", "data-is-veil": R, className: "tcn-frame-veil", children: /* @__PURE__ */ n(Z, { draggable: m, children: /* @__PURE__ */ n(
+    G,
     {
-      className: s,
-      ref: n,
-      enableResizeOnStart: t && h,
-      enableResizeOnEnd: t && r,
-      enableResizeOnTop: t && m,
-      enableResizeOnBottom: t && u,
-      enableResizeOnRight: t && g,
-      enableResizeOnLeft: t && d,
-      draggable: o,
-      ...e,
+      className: o,
+      ref: F,
+      enableResizeOnStart: e && d,
+      enableResizeOnEnd: e && g,
+      enableResizeOnTop: e && s,
+      enableResizeOnBottom: e && p,
+      enableResizeOnRight: e && D,
+      enableResizeOnLeft: e && x,
+      draggable: m,
+      minWidth: O,
+      minHeight: w,
+      ...z,
       children: a
     }
   ) }) }) }) : null;
-}), N = R.forwardRef(
+}), G = v.forwardRef(
   function({
     as: a = "div",
-    role: c = "dialog",
-    children: o,
-    className: l,
-    draggable: t,
-    onWidthResize: s,
-    onHeightResize: m,
-    ...u
-  }, h) {
-    const r = z(), d = R.useCallback(
-      (e) => {
-        if (!t || e.currentDelta === 0) return;
-        const n = e.origin === "right" ? 1 : -1, x = e.currentDelta / 2 * n;
-        p(() => {
-          r.setPosition((f) => ({
-            x: f.x + x,
-            y: f.y
+    role: h = "dialog",
+    children: m,
+    className: R,
+    draggable: e,
+    onWidthResize: o,
+    onHeightResize: s,
+    onWidthResizeEnd: p,
+    onHeightResizeEnd: d,
+    enableResizeOnTop: g,
+    enableResizeOnBottom: x,
+    enableResizeOnStart: D,
+    enableResizeOnEnd: O,
+    enableResizeOnLeft: w,
+    enableResizeOnRight: z,
+    ...F
+  }, P) {
+    const u = T(), l = C(null), f = C(null), S = v.useCallback(
+      (t) => {
+        const r = l.current !== null ? t.width - l.current : t.currentDelta;
+        if (l.current = t.width, !e || r === 0) {
+          o?.(t);
+          return;
+        }
+        const b = t.origin === "end" ? 1 : -1, k = r / 2 * b;
+        E(() => {
+          u.setPosition((c) => ({
+            x: c.x + k,
+            y: c.y
           }));
-        }), s?.(e);
+        }), o?.(t);
       },
-      [s, r, t]
-    ), g = _(
-      (e) => {
-        if (!t || e.currentDelta === 0) return;
-        const n = e.origin === "bottom" ? 1 : -1, f = e.currentDelta / 2 * n;
-        p(() => {
-          r.setPosition((D) => ({
-            x: D.x,
-            y: D.y + f
+      [o, u, e]
+    ), j = W(
+      (t) => {
+        const r = f.current !== null ? t.height - f.current : t.currentDelta;
+        if (f.current = t.height, !e || r === 0) {
+          s?.(t);
+          return;
+        }
+        const b = t.origin === "bottom" ? 1 : -1, k = r / 2 * b;
+        E(() => {
+          u.setPosition((c) => ({
+            x: c.x,
+            y: c.y + k
           }));
-        }), m?.(e);
+        }), s?.(t);
       },
-      [m, r, t]
+      [s, u, e]
     );
-    return /* @__PURE__ */ i(
-      k,
+    return /* @__PURE__ */ B(
+      q,
       {
-        className: F(B["frame-dialog"], "tcn-frame-dialog", l),
-        ref: h,
-        onWidthResize: d,
-        onHeightResize: g,
-        as: a,
-        role: c,
-        ...u,
-        children: o
+        onWidthResize: S,
+        onHeightResize: j,
+        onWidthResizeEnd: (t, r) => {
+          l.current = null, p?.(t, r);
+        },
+        onHeightResizeEnd: (t, r) => {
+          f.current = null, d?.(t, r);
+        },
+        children: [
+          /* @__PURE__ */ n(
+            _,
+            {
+              className: N("tcn-frame", "tcn-frame-dialog", R),
+              ref: P,
+              as: a,
+              role: h,
+              ...F,
+              children: m
+            }
+          ),
+          g && /* @__PURE__ */ n(i, { position: "top" }),
+          x && /* @__PURE__ */ n(i, { position: "bottom" }),
+          D && /* @__PURE__ */ n(i, { position: "start" }),
+          O && /* @__PURE__ */ n(i, { position: "end" }),
+          w && /* @__PURE__ */ n(i, { position: "start" }),
+          z && /* @__PURE__ */ n(i, { position: "end" })
+        ]
       }
     );
   }
 );
 export {
-  J as Frame,
-  N as FrameDialog
+  ot as Frame,
+  G as FrameDialog
 };
 //# sourceMappingURL=frame.js.map

package/dist/overlay/frame/frame.js.map

@@ -1 +1 @@
-{"version":3,"file":"frame.js","sources":["../../../src/overlay/frame/frame.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useCallback } from 'react';\nimport { flushSync } from 'react-dom';\nimport {\n  Box,\n  ZStack,\n  type BoxProps,\n  type OnHeightResizePayload,\n  type OnWidthResizePayload,\n} from '../../stacks/index.js';\nimport { useDragContainer } from '../../utils/dnd/context.js';\nimport { Draggable } from '../../utils/dnd/draggable/draggable.js';\nimport { Portal } from '../portal/portal.js';\n\n// Styles\nimport styles from './frame.module.css';\nexport interface FrameOwnProps {\n  isOpen?: boolean;\n  draggable?: boolean;\n  veil?: boolean;\n  resizable?: boolean;\n}\n\nexport type FrameProps = BoxProps & FrameOwnProps;\n\nexport const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(\n  {\n    children,\n    isOpen = false,\n    draggable = true,\n    veil = false,\n    resizable = true,\n    className,\n    enableResizeOnTop = true,\n    enableResizeOnBottom = true,\n    enableResizeOnStart = true,\n    enableResizeOnEnd = true,\n    enableResizeOnLeft = false,\n    enableResizeOnRight = false,\n    ...rest\n  }: FrameProps,\n  ref\n) {\n  if (!isOpen) return null;\n  return (\n    <Portal>\n      <ZStack width=\"100%\" height=\"100%\" data-is-veil={veil} className=\"tcn-frame-veil\">\n        <Draggable draggable={draggable}>\n          <FrameDialog\n            className={className}\n            ref={ref}\n            enableResizeOnStart={resizable && enableResizeOnStart}\n            enableResizeOnEnd={resizable && enableResizeOnEnd}\n            enableResizeOnTop={resizable && enableResizeOnTop}\n            enableResizeOnBottom={resizable && enableResizeOnBottom}\n            enableResizeOnRight={resizable && enableResizeOnRight}\n            enableResizeOnLeft={resizable && enableResizeOnLeft}\n            draggable={draggable}\n            {...rest}\n          >\n            {children}\n          </FrameDialog>\n        </Draggable>\n      </ZStack>\n    </Portal>\n  );\n});\ninterface FrameDialogProps extends BoxProps {}\n\nexport const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(\n  function FrameDialog(\n    {\n      as = 'div',\n      role = 'dialog',\n      children,\n      className,\n      draggable,\n      onWidthResize,\n      onHeightResize,\n      ...rest\n    }: FrameDialogProps,\n    ref: React.Ref<HTMLElement>\n  ) {\n    const drag = useDragContainer();\n\n    const handleWidthResize = React.useCallback(\n      (payload: OnWidthResizePayload) => {\n        if (!draggable) return;\n        if (payload.currentDelta === 0) return;\n        const sign = payload.origin === 'right' ? 1 : -1;\n        const dx = (payload.currentDelta / 2) * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x + dx,\n            y: prev.y,\n          }));\n        });\n\n        onWidthResize?.(payload);\n      },\n      [onWidthResize, drag, draggable]\n    );\n\n    const handleHeightResize = useCallback(\n      (payload: OnHeightResizePayload) => {\n        if (!draggable) return;\n        if (payload.currentDelta === 0) return;\n        const sign = payload.origin === 'bottom' ? 1 : -1;\n        const half = payload.currentDelta / 2;\n        const dy = half * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x,\n            y: prev.y + dy,\n          }));\n        });\n        onHeightResize?.(payload);\n      },\n      [onHeightResize, drag, draggable]\n    );\n\n    return (\n      <Box\n        className={clsx(styles['frame-dialog'], 'tcn-frame-dialog', className)}\n        ref={ref}\n        onWidthResize={handleWidthResize}\n        onHeightResize={handleHeightResize}\n        as={as}\n        role={role}\n        {...rest}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["Frame","React","children","isOpen","draggable","veil","resizable","className","enableResizeOnTop","enableResizeOnBottom","enableResizeOnStart","enableResizeOnEnd","enableResizeOnLeft","enableResizeOnRight","rest","ref","jsx","Portal","ZStack","Draggable","FrameDialog","as","role","onWidthResize","onHeightResize","drag","useDragContainer","handleWidthResize","payload","sign","dx","flushSync","prev","handleHeightResize","useCallback","dy","Box","clsx","styles"],"mappings":";;;;;;;;;;;;;;8DAyBaA,IAAQC,EAAM,WAAoC,SAC7D;AAAA,EACE,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,sBAAAC,IAAuB;AAAA,EACvB,qBAAAC,IAAsB;AAAA,EACtB,mBAAAC,IAAoB;AAAA,EACpB,oBAAAC,IAAqB;AAAA,EACrB,qBAAAC,IAAsB;AAAA,EACtB,GAAGC;AACL,GACAC,GACA;AACA,SAAKZ,IAEH,gBAAAa,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,EAAO,OAAM,QAAO,QAAO,QAAO,gBAAcb,GAAM,WAAU,kBAC/D,UAAA,gBAAAW,EAACG,KAAU,WAAAf,GACT,UAAA,gBAAAY;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,WAAAb;AAAA,MACA,KAAAQ;AAAA,MACA,qBAAqBT,KAAaI;AAAA,MAClC,mBAAmBJ,KAAaK;AAAA,MAChC,mBAAmBL,KAAaE;AAAA,MAChC,sBAAsBF,KAAaG;AAAA,MACnC,qBAAqBH,KAAaO;AAAA,MAClC,oBAAoBP,KAAaM;AAAA,MACjC,WAAAR;AAAA,MACC,GAAGU;AAAA,MAEH,UAAAZ;AAAA,IAAA;AAAA,EAAA,EACH,CACF,GACF,GACF,IArBkB;AAuBtB,CAAC,GAGYkB,IAAcnB,EAAM;AAAA,EAC/B,SACE;AAAA,IACE,IAAAoB,IAAK;AAAA,IACL,MAAAC,IAAO;AAAA,IACP,UAAApB;AAAA,IACA,WAAAK;AAAA,IACA,WAAAH;AAAA,IACA,eAAAmB;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGV;AAAA,EAAA,GAELC,GACA;AACA,UAAMU,IAAOC,EAAA,GAEPC,IAAoB1B,EAAM;AAAA,MAC9B,CAAC2B,MAAkC;AAEjC,YADI,CAACxB,KACDwB,EAAQ,iBAAiB,EAAG;AAChC,cAAMC,IAAOD,EAAQ,WAAW,UAAU,IAAI,IACxCE,IAAMF,EAAQ,eAAe,IAAKC;AACxC,QAAAE,EAAU,MAAM;AACd,UAAAN,EAAK,YAAY,CAAAO,OAAS;AAAA,YACxB,GAAGA,EAAK,IAAIF;AAAA,YACZ,GAAGE,EAAK;AAAA,UAAA,EACR;AAAA,QACJ,CAAC,GAEDT,IAAgBK,CAAO;AAAA,MACzB;AAAA,MACA,CAACL,GAAeE,GAAMrB,CAAS;AAAA,IAAA,GAG3B6B,IAAqBC;AAAA,MACzB,CAACN,MAAmC;AAElC,YADI,CAACxB,KACDwB,EAAQ,iBAAiB,EAAG;AAChC,cAAMC,IAAOD,EAAQ,WAAW,WAAW,IAAI,IAEzCO,IADOP,EAAQ,eAAe,IAClBC;AAClB,QAAAE,EAAU,MAAM;AACd,UAAAN,EAAK,YAAY,CAAAO,OAAS;AAAA,YACxB,GAAGA,EAAK;AAAA,YACR,GAAGA,EAAK,IAAIG;AAAA,UAAA,EACZ;AAAA,QACJ,CAAC,GACDX,IAAiBI,CAAO;AAAA,MAC1B;AAAA,MACA,CAACJ,GAAgBC,GAAMrB,CAAS;AAAA,IAAA;AAGlC,WACE,gBAAAY;AAAA,MAACoB;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,cAAc,GAAG,oBAAoB/B,CAAS;AAAA,QACrE,KAAAQ;AAAA,QACA,eAAeY;AAAA,QACf,gBAAgBM;AAAA,QAChB,IAAAZ;AAAA,QACA,MAAAC;AAAA,QACC,GAAGR;AAAA,QAEH,UAAAZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"frame.js","sources":["../../../src/overlay/frame/frame.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useCallback, useRef } from 'react';\nimport { flushSync } from 'react-dom';\nimport {\n  Box,\n  ZStack,\n  type BoxProps,\n  type OnHeightResizePayload,\n  type OnWidthResizePayload,\n} from '../../stacks/index.js';\nimport { useDragContainer } from '../../utils/decorators/draggable/context.js';\nimport { Draggable } from '../../utils/decorators/draggable/draggable.js';\nimport { Resizable } from '../../utils/decorators/resizable/resizable.js';\nimport { ResizeHandle } from '../../utils/decorators/resizable/resize_handle.js';\nimport { Portal } from '../portal/portal.js';\n\n// Styles\n\nexport interface FrameOwnProps {\n  isOpen?: boolean;\n  draggable?: boolean;\n  veil?: boolean;\n  resizable?: boolean;\n}\n\nexport type FrameProps = BoxProps & FrameOwnProps;\n\nexport const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(\n  {\n    children,\n    isOpen = false,\n    draggable = true,\n    veil = false,\n    resizable = true,\n    className,\n    enableResizeOnTop = true,\n    enableResizeOnBottom = true,\n    enableResizeOnStart = true,\n    enableResizeOnEnd = true,\n    enableResizeOnLeft = false,\n    enableResizeOnRight = false,\n    minWidth = 1,\n    minHeight = 1,\n    ...rest\n  }: FrameProps,\n  ref\n) {\n  if (!isOpen) return null;\n  return (\n    <Portal>\n      <ZStack width=\"100%\" height=\"100%\" data-is-veil={veil} className=\"tcn-frame-veil\">\n        <Draggable draggable={draggable}>\n          <FrameDialog\n            className={className}\n            ref={ref}\n            enableResizeOnStart={resizable && enableResizeOnStart}\n            enableResizeOnEnd={resizable && enableResizeOnEnd}\n            enableResizeOnTop={resizable && enableResizeOnTop}\n            enableResizeOnBottom={resizable && enableResizeOnBottom}\n            enableResizeOnRight={resizable && enableResizeOnRight}\n            enableResizeOnLeft={resizable && enableResizeOnLeft}\n            draggable={draggable}\n            minWidth={minWidth}\n            minHeight={minHeight}\n            {...rest}\n          >\n            {children}\n          </FrameDialog>\n        </Draggable>\n      </ZStack>\n    </Portal>\n  );\n});\ninterface FrameDialogProps extends BoxProps {}\n\nexport const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(\n  function FrameDialog(\n    {\n      as = 'div',\n      role = 'dialog',\n      children,\n      className,\n      draggable,\n      onWidthResize,\n      onHeightResize,\n      onWidthResizeEnd,\n      onHeightResizeEnd,\n      enableResizeOnTop,\n      enableResizeOnBottom,\n      enableResizeOnStart,\n      enableResizeOnEnd,\n      enableResizeOnLeft,\n      enableResizeOnRight,\n      ...rest\n    }: FrameDialogProps,\n    ref: React.Ref<HTMLElement>\n  ) {\n    const drag = useDragContainer();\n    const prevWidthRef = useRef<number | null>(null);\n    const prevHeightRef = useRef<number | null>(null);\n\n    const handleWidthResize = React.useCallback(\n      (payload: OnWidthResizePayload) => {\n        const actualDelta =\n          prevWidthRef.current !== null\n            ? payload.width - prevWidthRef.current\n            : payload.currentDelta;\n        prevWidthRef.current = payload.width;\n\n        if (!draggable || actualDelta === 0) {\n          onWidthResize?.(payload);\n          return;\n        }\n        const sign = payload.origin === 'end' ? 1 : -1;\n        const dx = (actualDelta / 2) * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x + dx,\n            y: prev.y,\n          }));\n        });\n\n        onWidthResize?.(payload);\n      },\n      [onWidthResize, drag, draggable]\n    );\n\n    const handleHeightResize = useCallback(\n      (payload: OnHeightResizePayload) => {\n        const actualDelta =\n          prevHeightRef.current !== null\n            ? payload.height - prevHeightRef.current\n            : payload.currentDelta;\n        prevHeightRef.current = payload.height;\n\n        if (!draggable || actualDelta === 0) {\n          onHeightResize?.(payload);\n          return;\n        }\n        const sign = payload.origin === 'bottom' ? 1 : -1;\n        const dy = (actualDelta / 2) * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x,\n            y: prev.y + dy,\n          }));\n        });\n        onHeightResize?.(payload);\n      },\n      [onHeightResize, drag, draggable]\n    );\n\n    return (\n      <Resizable\n        onWidthResize={handleWidthResize}\n        onHeightResize={handleHeightResize}\n        onWidthResizeEnd={(width, origin) => {\n          prevWidthRef.current = null;\n          onWidthResizeEnd?.(width, origin);\n        }}\n        onHeightResizeEnd={(height, origin) => {\n          prevHeightRef.current = null;\n          onHeightResizeEnd?.(height, origin);\n        }}\n      >\n        <Box\n          className={clsx('tcn-frame', 'tcn-frame-dialog', className)}\n          ref={ref}\n          as={as}\n          role={role}\n          {...rest}\n        >\n          {children}\n        </Box>\n        {enableResizeOnTop && <ResizeHandle position=\"top\" />}\n        {enableResizeOnBottom && <ResizeHandle position=\"bottom\" />}\n        {enableResizeOnStart && <ResizeHandle position=\"start\" />}\n        {enableResizeOnEnd && <ResizeHandle position=\"end\" />}\n        {enableResizeOnLeft && <ResizeHandle position=\"start\" />}\n        {enableResizeOnRight && <ResizeHandle position=\"end\" />}\n      </Resizable>\n    );\n  }\n);\n"],"names":["Frame","React","children","isOpen","draggable","veil","resizable","className","enableResizeOnTop","enableResizeOnBottom","enableResizeOnStart","enableResizeOnEnd","enableResizeOnLeft","enableResizeOnRight","minWidth","minHeight","rest","ref","jsx","Portal","ZStack","Draggable","FrameDialog","as","role","onWidthResize","onHeightResize","onWidthResizeEnd","onHeightResizeEnd","drag","useDragContainer","prevWidthRef","useRef","prevHeightRef","handleWidthResize","payload","actualDelta","sign","dx","flushSync","prev","handleHeightResize","useCallback","dy","jsxs","Resizable","width","origin","height","Box","clsx","ResizeHandle"],"mappings":"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"}

package/dist/overlay/menu/menu.js

@@ -1,14 +1,18 @@
 import { jsx as g, jsxs as W, Fragment as q } from "react/jsx-runtime";
 import { BodyText as O } from "../../typography/body_text/body_text.js";
-import "../../utils/click_away_listener.js";
-import "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
+import "../../utils/listeners/click_away_listener.js";
+import "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
 import f, { useState as F, useLayoutEffect as V, useRef as M } from "react";
 import { useForkRef as T } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
 import { clsx as L } from "clsx";
-import "../../draggable.module-BgelQsuJ.js";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
 import { HStack as G } from "../../stacks/h_stack.js";
 import { VStack as J } from "../../stacks/v_stack.js";
 import { Popper as K } from "../popper/legacy/popper.js";
@@ -30,7 +34,7 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
   className: E,
   ...b
 }, I) {
-  const [z, r] = F(-1), l = f.Children.toArray(_).map((t, m) => {
+  const [z, n] = F(-1), l = f.Children.toArray(_).map((t, m) => {
     if (!f.isValidElement(t))
       return t;
     if (t.type !== D)
@@ -54,13 +58,13 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
         t.props.children == null && x && x(), t.props.onClick && t.props.onClick(o);
       },
       onMouseEnter: (o) => {
-        r(m), c && c(!0), t.props.onMouseEnter && t.props.onMouseEnter(o);
+        n(m), c && c(!0), t.props.onMouseEnter && t.props.onMouseEnter(o);
       }
     };
     return t.type === D && (k.open = z === m), f.cloneElement(t, k);
   });
   return a === "up" && l.reverse(), V(() => {
-    y || (r(-1), c && c(!1));
+    y || (n(-1), c && c(!1));
   }, [y, c]), /* @__PURE__ */ g(
     K,
     {
@@ -93,28 +97,28 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
   open: s = !1,
   ...c
 }, _) {
-  const E = M(!1), b = M({ x: -1, y: -1 }), I = M({ x: -1, y: -1 }), [z, r] = F(!1), l = M(null), t = T(_, l), m = i != null && i.length > 0;
+  const E = M(!1), b = M({ x: -1, y: -1 }), I = M({ x: -1, y: -1 }), [z, n] = F(!1), l = M(null), t = T(_, l), m = i != null && i.length > 0;
   function k() {
-    r(!1);
+    n(!1);
   }
   return V(() => {
     const o = l.current;
     if (o && m && s) {
-      const u = window.getComputedStyle(o).direction, e = b.current, p = I.current, B = (n) => {
-        e.x === -1 && (e.x = n.clientX, e.y = n.clientY);
-        const P = n.clientX - e.x, w = n.clientY - e.y;
+      const u = window.getComputedStyle(o).direction, e = b.current, p = I.current, B = (r) => {
+        e.x === -1 && (e.x = r.clientX, e.y = r.clientY);
+        const P = r.clientX - e.x, w = r.clientY - e.y;
         if (p.x = Math.max(Math.abs(P), 1e-3), p.y = Math.max(Math.abs(w), 1e-3), (P < 0 || u === "down" && w < 0 || u === "up" && w > 0) && u === "ltr" || (P > 0 || u === "down" && w < 0 || u === "up" && w > 0) && u === "rtl") {
-          e.x = n.clientX, e.y = n.clientY, r(!1);
+          e.x = r.clientX, e.y = r.clientY, n(!1);
           return;
         }
         const H = Math.sqrt(p.x ** 2 + p.y ** 2);
         if (E.current) {
-          e.x = n.clientX, e.y = n.clientY, r(!1);
+          e.x = r.clientX, e.y = r.clientY, n(!1);
           return;
         }
         if (H > 5) {
           const N = p.x / p.y > 0.2;
-          r(!!N), e.x = n.clientX, e.y = n.clientY;
+          n(!!N), e.x = r.clientX, e.y = r.clientY;
         }
       };
       return window.addEventListener("mousemove", B), () => {
@@ -122,7 +126,7 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
       };
     }
   }, [m, s]), V(() => {
-    r(s);
+    n(s);
   }, [s]), /* @__PURE__ */ W(q, { children: [
     /* @__PURE__ */ g(
       G,

package/dist/overlay/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/overlay/menu/menu.tsx"],"sourcesContent":["import { BodyText } from '../../typography/body_text/body_text.js';\nimport { useForkRef } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { HStackProps } from '../../stacks/h_stack.js';\nimport type { VStackProps } from '../../stacks/v_stack.js';\nimport { Popper, type PopperProps } from '../popper/legacy/popper.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport styles from './menu.module.css';\nimport { clsx } from 'clsx';\n\nexport type MenuProps = Omit<PopperProps & VStackProps, 'children'> & {\n  children?: React.ReactNode;\n  onActivatedMenu?: (hasActiveMenu: boolean) => void;\n  direction?: 'up' | 'down';\n};\n\nexport const Menu = React.forwardRef(function Menu(\n  {\n    anchorElement,\n    verticalAnchor,\n    verticalOrigin,\n    verticalOffset,\n    horizontalAnchor,\n    horizontalOrigin,\n    horizontalOffset,\n    direction,\n    open,\n    onClose,\n    restoreFocus,\n    veil,\n    onActivatedMenu,\n    children = [],\n    className,\n    ...props\n  }: MenuProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const clonedChildren = React.Children.toArray(children).map((child, index) => {\n    if (!React.isValidElement(child)) {\n      return child;\n    }\n\n    if (child.type !== MenuItem) {\n      return React.cloneElement(child, {\n        ...child.props,\n        onClick: (e: React.MouseEvent<HTMLElement>) => {\n          e.stopPropagation();\n          child.props.onClick && child.props.onClick(e);\n        },\n      });\n    }\n\n    const props = {\n      ...child.props,\n      key: index,\n      verticalAnchor: direction === 'up' ? 'bottom' : 'top',\n      verticalOrigin: direction === 'up' ? 'bottom' : 'top',\n      verticalOffset,\n      horizontalAnchor: 'end',\n      horizontalOrigin: 'start',\n      horizontalOffset,\n      direction,\n      onClick: (e: React.MouseEvent<HTMLDivElement>) => {\n        if (child.props.children == null) {\n          onClose && onClose();\n        }\n        child.props.onClick && child.props.onClick(e);\n      },\n      onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {\n        setFocusedIndex(index);\n        onActivatedMenu && onActivatedMenu(true);\n        child.props.onMouseEnter && child.props.onMouseEnter(e);\n      },\n    };\n\n    if (child.type === MenuItem) {\n      props.open = focusedIndex === index;\n    }\n\n    return React.cloneElement(child, props);\n  });\n\n  direction === 'up' && clonedChildren.reverse();\n\n  useLayoutEffect(() => {\n    if (!open) {\n      setFocusedIndex(-1);\n      onActivatedMenu && onActivatedMenu(false);\n    }\n  }, [open, onActivatedMenu]);\n\n  return (\n    <Popper\n      anchorElement={anchorElement}\n      verticalAnchor={verticalAnchor}\n      verticalOrigin={verticalOrigin}\n      verticalOffset={verticalOffset}\n      horizontalAnchor={horizontalAnchor || 'end'}\n      horizontalOrigin={horizontalOrigin || 'end'}\n      horizontalOffset={horizontalOffset}\n      open={open}\n      onClose={onClose}\n      restoreFocus={restoreFocus}\n      veil={veil}\n    >\n      <VStack ref={ref} className={clsx(styles.menu, className, 'tcn-menu')} {...props}>\n        {clonedChildren}\n      </VStack>\n    </Popper>\n  );\n});\n\nexport interface MenuItemProps extends Omit<HStackProps, 'children'> {\n  open?: boolean;\n  children?: React.ReactElement<MenuItemProps>[];\n  selected?: boolean;\n  label?: React.ReactNode;\n  direction?: 'up' | 'down';\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'center' | 'start' | 'end';\n  horizontalOrigin?: 'center' | 'start' | 'end';\n  horizontalOffset?: number;\n}\n\nexport const MenuItem = React.forwardRef(function MenuItem(\n  {\n    selected,\n    label,\n    className,\n    children,\n    direction = 'down',\n    verticalAnchor = 'top',\n    verticalOrigin = 'top',\n    verticalOffset,\n    horizontalAnchor = 'end',\n    horizontalOrigin = 'start',\n    horizontalOffset,\n    open = false,\n    ...props\n  }: MenuItemProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const hasEnteredMenuRef = useRef(false);\n  const cursorPositionRef = useRef({ x: -1, y: -1 });\n  const cursorDeltaRef = useRef({ x: -1, y: -1 });\n  const [showVeil, setShowVeil] = useState(false);\n  const itemRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, itemRef);\n  const hasSubmenu = children != null && children.length > 0;\n\n  function close() {\n    setShowVeil(false);\n  }\n\n  useLayoutEffect(() => {\n    const itemElement = itemRef.current;\n\n    if (itemElement && hasSubmenu && open) {\n      const direction = window.getComputedStyle(itemElement).direction;\n\n      const startPosition = cursorPositionRef.current;\n      const delta = cursorDeltaRef.current;\n\n      const calculateSlope = (event: MouseEvent) => {\n        if (startPosition.x === -1) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n\n        const deltaX = event.clientX - startPosition.x;\n        const deltaY = event.clientY - startPosition.y;\n        delta.x = Math.max(Math.abs(deltaX), 0.001);\n        delta.y = Math.max(Math.abs(deltaY), 0.001);\n\n        const isSlopeWrongDirection =\n          ((deltaX < 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'ltr') ||\n          ((deltaX > 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'rtl');\n\n        if (isSlopeWrongDirection) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        const distance = Math.sqrt(delta.x ** 2 + delta.y ** 2);\n\n        if (hasEnteredMenuRef.current) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        if (distance > 5) {\n          const movingHorizontal = delta.x / delta.y > 0.2;\n\n          if (movingHorizontal) {\n            setShowVeil(true);\n          } else {\n            setShowVeil(false);\n          }\n\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n      };\n\n      window.addEventListener('mousemove', calculateSlope);\n\n      return () => {\n        window.removeEventListener('mousemove', calculateSlope);\n      };\n    }\n  }, [hasSubmenu, open]);\n\n  useLayoutEffect(() => {\n    setShowVeil(open);\n  }, [open]);\n\n  return (\n    <>\n      <HStack\n        as=\"button\"\n        ref={forkedRef}\n        data-is-selected={Boolean(selected)}\n        data-has-children={Boolean(hasSubmenu)}\n        className={clsx(className, styles['menu-item'], 'tcn-menu-item')}\n        data-is-open={open}\n        {...props}\n      >\n        {typeof label === 'string' ? <BodyText color=\"inherit\">{label}</BodyText> : label}\n      </HStack>\n      {children && (\n        <Menu\n          anchorElement={itemRef.current}\n          veil={showVeil}\n          onClose={close}\n          open={open}\n          direction={direction}\n          verticalAnchor={verticalAnchor}\n          verticalOrigin={verticalOrigin}\n          verticalOffset={verticalOffset}\n          horizontalAnchor={horizontalAnchor}\n          horizontalOrigin={horizontalOrigin}\n          horizontalOffset={horizontalOffset}\n          hAlign=\"start\"\n          onActivatedMenu={hasActiveMenu => {\n            hasEnteredMenuRef.current = hasActiveMenu;\n          }}\n        >\n          {children}\n        </Menu>\n      )}\n    </>\n  );\n});\n"],"names":["Menu","React","anchorElement","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","direction","open","onClose","restoreFocus","veil","onActivatedMenu","children","className","props","ref","focusedIndex","setFocusedIndex","useState","clonedChildren","child","index","MenuItem","e","useLayoutEffect","jsx","Popper","VStack","clsx","styles","selected","label","hasEnteredMenuRef","useRef","cursorPositionRef","cursorDeltaRef","showVeil","setShowVeil","itemRef","forkedRef","useForkRef","hasSubmenu","close","itemElement","startPosition","delta","calculateSlope","event","deltaX","deltaY","distance","movingHorizontal","jsxs","Fragment","HStack","BodyText","hasActiveMenu"],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../../src/overlay/menu/menu.tsx"],"sourcesContent":["import { BodyText } from '../../typography/body_text/body_text.js';\nimport { useForkRef } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { HStackProps } from '../../stacks/h_stack.js';\nimport type { VStackProps } from '../../stacks/v_stack.js';\nimport { Popper, type PopperProps } from '../popper/legacy/popper.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport styles from './menu.module.css';\nimport { clsx } from 'clsx';\n\nexport type MenuProps = Omit<PopperProps & VStackProps, 'children'> & {\n  children?: React.ReactNode;\n  onActivatedMenu?: (hasActiveMenu: boolean) => void;\n  direction?: 'up' | 'down';\n};\n\nexport const Menu = React.forwardRef(function Menu(\n  {\n    anchorElement,\n    verticalAnchor,\n    verticalOrigin,\n    verticalOffset,\n    horizontalAnchor,\n    horizontalOrigin,\n    horizontalOffset,\n    direction,\n    open,\n    onClose,\n    restoreFocus,\n    veil,\n    onActivatedMenu,\n    children = [],\n    className,\n    ...props\n  }: MenuProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const clonedChildren = React.Children.toArray(children).map((child, index) => {\n    if (!React.isValidElement(child)) {\n      return child;\n    }\n\n    if (child.type !== MenuItem) {\n      return React.cloneElement(child, {\n        ...child.props,\n        onClick: (e: React.MouseEvent<HTMLElement>) => {\n          e.stopPropagation();\n          child.props.onClick && child.props.onClick(e);\n        },\n      });\n    }\n\n    const props = {\n      ...child.props,\n      key: index,\n      verticalAnchor: direction === 'up' ? 'bottom' : 'top',\n      verticalOrigin: direction === 'up' ? 'bottom' : 'top',\n      verticalOffset,\n      horizontalAnchor: 'end',\n      horizontalOrigin: 'start',\n      horizontalOffset,\n      direction,\n      onClick: (e: React.MouseEvent<HTMLDivElement>) => {\n        if (child.props.children == null) {\n          onClose && onClose();\n        }\n        child.props.onClick && child.props.onClick(e);\n      },\n      onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {\n        setFocusedIndex(index);\n        onActivatedMenu && onActivatedMenu(true);\n        child.props.onMouseEnter && child.props.onMouseEnter(e);\n      },\n    };\n\n    if (child.type === MenuItem) {\n      props.open = focusedIndex === index;\n    }\n\n    return React.cloneElement(child, props);\n  });\n\n  direction === 'up' && clonedChildren.reverse();\n\n  useLayoutEffect(() => {\n    if (!open) {\n      setFocusedIndex(-1);\n      onActivatedMenu && onActivatedMenu(false);\n    }\n  }, [open, onActivatedMenu]);\n\n  return (\n    <Popper\n      anchorElement={anchorElement}\n      verticalAnchor={verticalAnchor}\n      verticalOrigin={verticalOrigin}\n      verticalOffset={verticalOffset}\n      horizontalAnchor={horizontalAnchor || 'end'}\n      horizontalOrigin={horizontalOrigin || 'end'}\n      horizontalOffset={horizontalOffset}\n      open={open}\n      onClose={onClose}\n      restoreFocus={restoreFocus}\n      veil={veil}\n    >\n      <VStack ref={ref} className={clsx(styles.menu, className, 'tcn-menu')} {...props}>\n        {clonedChildren}\n      </VStack>\n    </Popper>\n  );\n});\n\nexport interface MenuItemProps extends Omit<HStackProps, 'children'> {\n  open?: boolean;\n  children?: React.ReactElement<MenuItemProps>[];\n  selected?: boolean;\n  label?: React.ReactNode;\n  direction?: 'up' | 'down';\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'center' | 'start' | 'end';\n  horizontalOrigin?: 'center' | 'start' | 'end';\n  horizontalOffset?: number;\n}\n\nexport const MenuItem = React.forwardRef(function MenuItem(\n  {\n    selected,\n    label,\n    className,\n    children,\n    direction = 'down',\n    verticalAnchor = 'top',\n    verticalOrigin = 'top',\n    verticalOffset,\n    horizontalAnchor = 'end',\n    horizontalOrigin = 'start',\n    horizontalOffset,\n    open = false,\n    ...props\n  }: MenuItemProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const hasEnteredMenuRef = useRef(false);\n  const cursorPositionRef = useRef({ x: -1, y: -1 });\n  const cursorDeltaRef = useRef({ x: -1, y: -1 });\n  const [showVeil, setShowVeil] = useState(false);\n  const itemRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, itemRef);\n  const hasSubmenu = children != null && children.length > 0;\n\n  function close() {\n    setShowVeil(false);\n  }\n\n  useLayoutEffect(() => {\n    const itemElement = itemRef.current;\n\n    if (itemElement && hasSubmenu && open) {\n      const direction = window.getComputedStyle(itemElement).direction;\n\n      const startPosition = cursorPositionRef.current;\n      const delta = cursorDeltaRef.current;\n\n      const calculateSlope = (event: MouseEvent) => {\n        if (startPosition.x === -1) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n\n        const deltaX = event.clientX - startPosition.x;\n        const deltaY = event.clientY - startPosition.y;\n        delta.x = Math.max(Math.abs(deltaX), 0.001);\n        delta.y = Math.max(Math.abs(deltaY), 0.001);\n\n        const isSlopeWrongDirection =\n          ((deltaX < 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'ltr') ||\n          ((deltaX > 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'rtl');\n\n        if (isSlopeWrongDirection) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        const distance = Math.sqrt(delta.x ** 2 + delta.y ** 2);\n\n        if (hasEnteredMenuRef.current) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        if (distance > 5) {\n          const movingHorizontal = delta.x / delta.y > 0.2;\n\n          if (movingHorizontal) {\n            setShowVeil(true);\n          } else {\n            setShowVeil(false);\n          }\n\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n      };\n\n      window.addEventListener('mousemove', calculateSlope);\n\n      return () => {\n        window.removeEventListener('mousemove', calculateSlope);\n      };\n    }\n  }, [hasSubmenu, open]);\n\n  useLayoutEffect(() => {\n    setShowVeil(open);\n  }, [open]);\n\n  return (\n    <>\n      <HStack\n        as=\"button\"\n        ref={forkedRef}\n        data-is-selected={Boolean(selected)}\n        data-has-children={Boolean(hasSubmenu)}\n        className={clsx(className, styles['menu-item'], 'tcn-menu-item')}\n        data-is-open={open}\n        {...props}\n      >\n        {typeof label === 'string' ? <BodyText color=\"inherit\">{label}</BodyText> : label}\n      </HStack>\n      {children && (\n        <Menu\n          anchorElement={itemRef.current}\n          veil={showVeil}\n          onClose={close}\n          open={open}\n          direction={direction}\n          verticalAnchor={verticalAnchor}\n          verticalOrigin={verticalOrigin}\n          verticalOffset={verticalOffset}\n          horizontalAnchor={horizontalAnchor}\n          horizontalOrigin={horizontalOrigin}\n          horizontalOffset={horizontalOffset}\n          hAlign=\"start\"\n          onActivatedMenu={hasActiveMenu => {\n            hasEnteredMenuRef.current = hasActiveMenu;\n          }}\n        >\n          {children}\n        </Menu>\n      )}\n    </>\n  );\n});\n"],"names":["Menu","React","anchorElement","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","direction","open","onClose","restoreFocus","veil","onActivatedMenu","children","className","props","ref","focusedIndex","setFocusedIndex","useState","clonedChildren","child","index","MenuItem","e","useLayoutEffect","jsx","Popper","VStack","clsx","styles","selected","label","hasEnteredMenuRef","useRef","cursorPositionRef","cursorDeltaRef","showVeil","setShowVeil","itemRef","forkedRef","useForkRef","hasSubmenu","close","itemElement","startPosition","delta","calculateSlope","event","deltaX","deltaY","distance","movingHorizontal","jsxs","Fragment","HStack","BodyText","hasActiveMenu"],"mappings":"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"}

package/dist/overlay/popper/base/dismissal_decorator.js

@@ -1,8 +1,8 @@
 import { jsx as l, jsxs as L, Fragment as m } from "react/jsx-runtime";
 import { forwardRef as C } from "react";
-import { ClickAwayListener as k } from "../../../utils/click_away_listener.js";
-import { ScrollAwayListener as v } from "../../../utils/scroll_away_listener.js";
-import { MouseLeaveRegion as d } from "../../../utils/mouse_leave_region.js";
+import { ClickAwayListener as k } from "../../../utils/listeners/click_away_listener.js";
+import { ScrollAwayListener as v } from "../../../utils/listeners/scroll_away_listener.js";
+import { MouseLeaveRegion as d } from "../../../utils/listeners/mouse_leave_region.js";
 var E = /* @__PURE__ */ ((e) => (e.CLICK_AWAY = "clickAway", e.SCROLL_AWAY = "scrollAway", e.MOUSE_LEAVE = "mouseLeave", e.VEIL_CLICK = "veilClick", e))(E || {});
 const I = C(function({ onDismissal: a, isException: A, dismissals: r = [], children: s, acceptedRefs: i = [] }, h) {
   const u = r.includes(

package/dist/overlay/popper/base/dismissal_decorator.js.map

@@ -1 +1 @@
-{"version":3,"file":"dismissal_decorator.js","sources":["../../../../src/overlay/popper/base/dismissal_decorator.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren } from 'react';\nimport { ClickAwayListener } from '../../../utils/click_away_listener.js';\nimport { ScrollAwayListener } from '../../../utils/scroll_away_listener.js';\nimport { MouseLeaveRegion } from '../../../utils/mouse_leave_region.js';\n\nexport enum PopperDismissal {\n  CLICK_AWAY = 'clickAway',\n  SCROLL_AWAY = 'scrollAway',\n  MOUSE_LEAVE = 'mouseLeave',\n  VEIL_CLICK = 'veilClick',\n}\n\nexport interface PopperDismissalDecoratorProps {\n  dismissals?: PopperDismissal[];\n  onDismissal?: (dismissal: PopperDismissal) => void;\n  isException?: (dismissal: PopperDismissal, target: HTMLElement) => boolean;\n  acceptedRefs?: React.RefObject<HTMLElement>[];\n}\n\nexport const PopperDismissalDecorator = forwardRef<\n  HTMLElement,\n  PropsWithChildren<PopperDismissalDecoratorProps>\n>(function DismissalDecorator(\n  { onDismissal, isException, dismissals = [], children, acceptedRefs = [] },\n  ref\n) {\n  const hasClickAway = dismissals.includes(PopperDismissal.CLICK_AWAY);\n  const hasScrollAway = dismissals.includes(PopperDismissal.SCROLL_AWAY);\n  const hasMouseLeave = dismissals.includes(PopperDismissal.MOUSE_LEAVE);\n  // TODO:\n  // const hasVeilClick = dismissals.includes(PopperDismissal.VEIL_CLICK);\n\n  const buildHandleDismissal = (dismissal: PopperDismissal) => () => {\n    onDismissal?.(dismissal);\n  };\n\n  function buildExceptionHandler(dismissal: PopperDismissal) {\n    if (dismissals.includes(dismissal)) {\n      return (target: HTMLElement) => isException?.(dismissal, target) ?? false;\n    }\n    return () => false;\n  }\n\n  let content: React.ReactNode = (\n    <>\n      {children}\n      {hasMouseLeave && (\n        <MouseLeaveRegion\n          elementsRefs={acceptedRefs}\n          onMouseLeave={buildHandleDismissal(PopperDismissal.MOUSE_LEAVE)}\n        />\n      )}\n    </>\n  );\n\n  if (hasScrollAway) {\n    content = (\n      <ScrollAwayListener\n        onScrollAway={buildHandleDismissal(PopperDismissal.SCROLL_AWAY)}\n        isException={buildExceptionHandler(PopperDismissal.SCROLL_AWAY)}\n      >\n        {content}\n      </ScrollAwayListener>\n    );\n  }\n\n  if (hasClickAway) {\n    content = (\n      <ClickAwayListener\n        onClickAway={buildHandleDismissal(PopperDismissal.CLICK_AWAY)}\n        refs={acceptedRefs}\n        isException={buildExceptionHandler(PopperDismissal.CLICK_AWAY)}\n      >\n        {content}\n      </ClickAwayListener>\n    );\n  }\n\n  return content;\n});\n"],"names":["PopperDismissal","PopperDismissalDecorator","forwardRef","onDismissal","isException","dismissals","children","acceptedRefs","ref","hasClickAway","hasScrollAway","hasMouseLeave","buildHandleDismissal","dismissal","buildExceptionHandler","target","content","jsxs","Fragment","jsx","MouseLeaveRegion","ScrollAwayListener","ClickAwayListener"],"mappings":";;;;;AAKO,IAAKA,sBAAAA,OACVA,EAAA,aAAa,aACbA,EAAA,cAAc,cACdA,EAAA,cAAc,cACdA,EAAA,aAAa,aAJHA,IAAAA,KAAA,CAAA,CAAA;AAcL,MAAMC,IAA2BC,EAGtC,SACA,EAAE,aAAAC,GAAa,aAAAC,GAAa,YAAAC,IAAa,CAAA,GAAI,UAAAC,GAAU,cAAAC,IAAe,CAAA,EAAC,GACvEC,GACA;AACA,QAAMC,IAAeJ,EAAW;AAAA,IAAS;AAAA;AAAA,EAAA,GACnCK,IAAgBL,EAAW;AAAA,IAAS;AAAA;AAAA,EAAA,GACpCM,IAAgBN,EAAW;AAAA,IAAS;AAAA;AAAA,EAAA,GAIpCO,IAAuB,CAACC,MAA+B,MAAM;AACjE,IAAAV,IAAcU,CAAS;AAAA,EACzB;AAEA,WAASC,EAAsBD,GAA4B;AACzD,WAAIR,EAAW,SAASQ,CAAS,IACxB,CAACE,MAAwBX,IAAcS,GAAWE,CAAM,KAAK,KAE/D,MAAM;AAAA,EACf;AAEA,MAAIC,IACF,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAZ;AAAA,IACAK,KACC,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,cAAcb;AAAA,QACd,cAAcK;AAAA,UAAqB;AAAA;AAAA,QAAA;AAAA,MAA2B;AAAA,IAAA;AAAA,EAChE,GAEJ;AAGF,SAAIF,MACFM,IACE,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,cAAcT;AAAA,QAAqB;AAAA;AAAA,MAAA;AAAA,MACnC,aAAaE;AAAA,QAAsB;AAAA;AAAA,MAAA;AAAA,MAElC,UAAAE;AAAA,IAAA;AAAA,EAAA,IAKHP,MACFO,IACE,gBAAAG;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,aAAaV;AAAA,QAAqB;AAAA;AAAA,MAAA;AAAA,MAClC,MAAML;AAAA,MACN,aAAaO;AAAA,QAAsB;AAAA;AAAA,MAAA;AAAA,MAElC,UAAAE;AAAA,IAAA;AAAA,EAAA,IAKAA;AACT,CAAC;"}
+{"version":3,"file":"dismissal_decorator.js","sources":["../../../../src/overlay/popper/base/dismissal_decorator.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren } from 'react';\nimport { ClickAwayListener } from '../../../utils/listeners/click_away_listener.js';\nimport { ScrollAwayListener } from '../../../utils/listeners/scroll_away_listener.js';\nimport { MouseLeaveRegion } from '../../../utils/listeners/mouse_leave_region.js';\n\nexport enum PopperDismissal {\n  CLICK_AWAY = 'clickAway',\n  SCROLL_AWAY = 'scrollAway',\n  MOUSE_LEAVE = 'mouseLeave',\n  VEIL_CLICK = 'veilClick',\n}\n\nexport interface PopperDismissalDecoratorProps {\n  dismissals?: PopperDismissal[];\n  onDismissal?: (dismissal: PopperDismissal) => void;\n  isException?: (dismissal: PopperDismissal, target: HTMLElement) => boolean;\n  acceptedRefs?: React.RefObject<HTMLElement>[];\n}\n\nexport const PopperDismissalDecorator = forwardRef<\n  HTMLElement,\n  PropsWithChildren<PopperDismissalDecoratorProps>\n>(function DismissalDecorator(\n  { onDismissal, isException, dismissals = [], children, acceptedRefs = [] },\n  ref\n) {\n  const hasClickAway = dismissals.includes(PopperDismissal.CLICK_AWAY);\n  const hasScrollAway = dismissals.includes(PopperDismissal.SCROLL_AWAY);\n  const hasMouseLeave = dismissals.includes(PopperDismissal.MOUSE_LEAVE);\n  // TODO:\n  // const hasVeilClick = dismissals.includes(PopperDismissal.VEIL_CLICK);\n\n  const buildHandleDismissal = (dismissal: PopperDismissal) => () => {\n    onDismissal?.(dismissal);\n  };\n\n  function buildExceptionHandler(dismissal: PopperDismissal) {\n    if (dismissals.includes(dismissal)) {\n      return (target: HTMLElement) => isException?.(dismissal, target) ?? false;\n    }\n    return () => false;\n  }\n\n  let content: React.ReactNode = (\n    <>\n      {children}\n      {hasMouseLeave && (\n        <MouseLeaveRegion\n          elementsRefs={acceptedRefs}\n          onMouseLeave={buildHandleDismissal(PopperDismissal.MOUSE_LEAVE)}\n        />\n      )}\n    </>\n  );\n\n  if (hasScrollAway) {\n    content = (\n      <ScrollAwayListener\n        onScrollAway={buildHandleDismissal(PopperDismissal.SCROLL_AWAY)}\n        isException={buildExceptionHandler(PopperDismissal.SCROLL_AWAY)}\n      >\n        {content}\n      </ScrollAwayListener>\n    );\n  }\n\n  if (hasClickAway) {\n    content = (\n      <ClickAwayListener\n        onClickAway={buildHandleDismissal(PopperDismissal.CLICK_AWAY)}\n        refs={acceptedRefs}\n        isException={buildExceptionHandler(PopperDismissal.CLICK_AWAY)}\n      >\n        {content}\n      </ClickAwayListener>\n    );\n  }\n\n  return content;\n});\n"],"names":["PopperDismissal","PopperDismissalDecorator","forwardRef","onDismissal","isException","dismissals","children","acceptedRefs","ref","hasClickAway","hasScrollAway","hasMouseLeave","buildHandleDismissal","dismissal","buildExceptionHandler","target","content","jsxs","Fragment","jsx","MouseLeaveRegion","ScrollAwayListener","ClickAwayListener"],"mappings":";;;;;AAKO,IAAKA,sBAAAA,OACVA,EAAA,aAAa,aACbA,EAAA,cAAc,cACdA,EAAA,cAAc,cACdA,EAAA,aAAa,aAJHA,IAAAA,KAAA,CAAA,CAAA;AAcL,MAAMC,IAA2BC,EAGtC,SACA,EAAE,aAAAC,GAAa,aAAAC,GAAa,YAAAC,IAAa,CAAA,GAAI,UAAAC,GAAU,cAAAC,IAAe,CAAA,EAAC,GACvEC,GACA;AACA,QAAMC,IAAeJ,EAAW;AAAA,IAAS;AAAA;AAAA,EAAA,GACnCK,IAAgBL,EAAW;AAAA,IAAS;AAAA;AAAA,EAAA,GACpCM,IAAgBN,EAAW;AAAA,IAAS;AAAA;AAAA,EAAA,GAIpCO,IAAuB,CAACC,MAA+B,MAAM;AACjE,IAAAV,IAAcU,CAAS;AAAA,EACzB;AAEA,WAASC,EAAsBD,GAA4B;AACzD,WAAIR,EAAW,SAASQ,CAAS,IACxB,CAACE,MAAwBX,IAAcS,GAAWE,CAAM,KAAK,KAE/D,MAAM;AAAA,EACf;AAEA,MAAIC,IACF,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAZ;AAAA,IACAK,KACC,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,cAAcb;AAAA,QACd,cAAcK;AAAA,UAAqB;AAAA;AAAA,QAAA;AAAA,MAA2B;AAAA,IAAA;AAAA,EAChE,GAEJ;AAGF,SAAIF,MACFM,IACE,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,cAAcT;AAAA,QAAqB;AAAA;AAAA,MAAA;AAAA,MACnC,aAAaE;AAAA,QAAsB;AAAA;AAAA,MAAA;AAAA,MAElC,UAAAE;AAAA,IAAA;AAAA,EAAA,IAKHP,MACFO,IACE,gBAAAG;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,aAAaV;AAAA,QAAqB;AAAA;AAAA,MAAA;AAAA,MAClC,MAAML;AAAA,MACN,aAAaO;AAAA,QAAsB;AAAA;AAAA,MAAA;AAAA,MAElC,UAAAE;AAAA,IAAA;AAAA,EAAA,IAKAA;AACT,CAAC;"}