@tcn/ui 0.12.1 → 0.12.3

package/src/surfaces/pop_confirm/pop_confirm.stories.tsx

@@ -2,25 +2,35 @@ import { useRef, useState } from 'react';
 import { Button } from '../../actions/index.js';
 import { Footer, Header, Section, VBody } from '../../layouts/index.js';
 import { HStack } from '../../stacks/h_stack.js';
-import { PopConfirm as PopConfirmComponent } from './pop_confirm.js';
+import { PopConfirm, type PopConfirmProps } from './pop_confirm.js';
 import { BodyText, Title } from '../../typography/index.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
+import { PopperDismissal } from '../../overlay/popper/base/dismissal_decorator.js';
+import {
+  tetheredArgs,
+  tetheredArgTypes,
+} from '../../overlay/tethered/__stories__/shared/base_story_config.js';
 
 export default {
   title: 'Surfaces/Pop Confirm',
-  component: PopConfirmComponent,
+  component: PopConfirm,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
-        component: 'A tooltip component that displays a tooltip when hovered.',
+        component:
+          'A confirmation popover triggered by a button. Supports different dismissal behaviors: click away, mouse leave, and scroll away.',
       },
     },
   },
+  args: tetheredArgs,
+  argTypes: tetheredArgTypes,
 };
 
-export const DefaultPopConfirm = () => {
+export const DefaultPopConfirm = (
+  args: Omit<PopConfirmProps, 'anchorElement' | 'open' | 'onDismissal'>
+) => {
   const anchorRef = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState(false);
 
@@ -42,11 +52,14 @@ export const DefaultPopConfirm = () => {
         <Button ref={anchorRef} onClick={prompt}>
           Click to Confirm
         </Button>
-        <PopConfirmComponent
+        <PopConfirm
           height={'200px'}
           open={open}
           onDismissal={cancel}
           anchorElement={anchorRef}
+          // PopperDismissal.CLICK_AWAY is the default dismissal behavior but shown here for demonstration purposes
+          dismissals={[PopperDismissal.CLICK_AWAY]}
+          {...args}
         >
           <Header>
             <Title>Confirmation Title</Title>
@@ -65,8 +78,195 @@ export const DefaultPopConfirm = () => {
               Confirm
             </Button>
           </Footer>
-        </PopConfirmComponent>
+        </PopConfirm>
       </HStack>
     </VStack>
   );
 };
+
+DefaultPopConfirm.parameters = {
+  docs: {
+    description: {
+      story:
+        'Closes only when clicking outside the popover. Clicking inside (title, body, or buttons) keeps it open.',
+    },
+  },
+};
+
+export const ManualCloseOnly = () => {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <VStack hAlign="center" vAlign="center" height="100%" width="100%">
+      <HStack hAlign="center" vAlign="center">
+        <Button ref={anchorRef} onClick={() => setOpen(true)}>
+          Open
+        </Button>
+        <PopConfirm
+          height={'200px'}
+          open={open}
+          onDismissal={() => setOpen(false)}
+          anchorElement={anchorRef}
+          dismissals={[]}
+        >
+          <Header>
+            <Title>Must confirm or cancel</Title>
+          </Header>
+          <VBody>
+            <Section>
+              <BodyText>
+                No automatic dismissal. The popover stays open until you click Cancel or
+                Confirm. Clicking or scrolling outside does nothing.
+              </BodyText>
+            </Section>
+          </VBody>
+          <Footer>
+            <Spacer />
+            <Button hierarchy="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button hierarchy="primary" onClick={() => setOpen(false)}>
+              Confirm
+            </Button>
+          </Footer>
+        </PopConfirm>
+      </HStack>
+    </VStack>
+  );
+};
+
+ManualCloseOnly.parameters = {
+  docs: {
+    description: {
+      story:
+        'No dismissal behaviors. The popover only closes when the user clicks Cancel or Confirm—clicking outside, scrolling, or moving the pointer away has no effect.',
+    },
+  },
+};
+
+export const MouseLeaveOnly = () => {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <VStack hAlign="center" vAlign="center" height="100%" width="100%">
+      <HStack hAlign="center" vAlign="center">
+        <Button ref={anchorRef} onMouseEnter={() => setOpen(true)}>
+          Hover to confirm
+        </Button>
+        <PopConfirm
+          height={'200px'}
+          open={open}
+          onDismissal={() => setOpen(false)}
+          anchorElement={anchorRef}
+          dismissals={[PopperDismissal.MOUSE_LEAVE]}
+        >
+          <Header>
+            <Title>Confirm action</Title>
+          </Header>
+          <VBody>
+            <Section>
+              <BodyText>
+                Closes when the pointer leaves the popover and trigger area.
+              </BodyText>
+            </Section>
+          </VBody>
+          <Footer>
+            <Spacer />
+            <Button hierarchy="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button hierarchy="primary" onClick={() => setOpen(false)}>
+              OK
+            </Button>
+          </Footer>
+        </PopConfirm>
+      </HStack>
+    </VStack>
+  );
+};
+
+MouseLeaveOnly.parameters = {
+  docs: {
+    description: {
+      story:
+        'Closes when the mouse leaves the region (popover + trigger). No click-away or scroll-away. Suited to hover-triggered flows.',
+    },
+  },
+};
+
+export const ClickAwayAndScrollAway = () => {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div
+      style={{
+        height: '320px',
+        overflow: 'auto',
+        padding: '16px',
+        boxSizing: 'border-box',
+      }}
+    >
+      <VStack gap="24px" padding="16px" style={{ minHeight: '600px' }}>
+        <Section>
+          <BodyText>
+            Scroll down to find the button and open the popover. Then scroll this
+            container—the popover will close when you scroll away.
+          </BodyText>
+        </Section>
+        <Spacer />
+        <HStack hAlign="center" vAlign="center">
+          <Button ref={anchorRef} onClick={() => setOpen(true)}>
+            Open
+          </Button>
+          <PopConfirm
+            height={'200px'}
+            open={open}
+            onDismissal={() => setOpen(false)}
+            anchorElement={anchorRef}
+            dismissals={[PopperDismissal.CLICK_AWAY, PopperDismissal.SCROLL_AWAY]}
+          >
+            <Header>
+              <Title>Scroll or click away</Title>
+            </Header>
+            <VBody>
+              <Section>
+                <BodyText>
+                  Closes when you click outside or when you scroll outside the popover.
+                  Scroll the container above or below to see it close.
+                </BodyText>
+              </Section>
+            </VBody>
+            <Footer>
+              <Spacer />
+              <Button hierarchy="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button hierarchy="primary" onClick={() => setOpen(false)}>
+                Confirm
+              </Button>
+            </Footer>
+          </PopConfirm>
+        </HStack>
+        <Spacer />
+        <Section>
+          <BodyText>
+            More content below. After opening the popover, scroll up or down within this
+            panel—the popover dismisses because the scroll happened outside of it.
+          </BodyText>
+        </Section>
+      </VStack>
+    </div>
+  );
+};
+
+ClickAwayAndScrollAway.parameters = {
+  docs: {
+    description: {
+      story:
+        'Closes on outside click or when scrolling outside the popover. This story uses a scrollable container—open the popover, then scroll the panel; the popover dismisses because the scroll happened outside it.',
+    },
+  },
+};

package/src/surfaces/pop_confirm/pop_confirm.tsx

@@ -14,7 +14,7 @@ export const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(
     {
       children,
       className,
-      precision = 'low',
+      precision = 'high',
       dismissals = [PopperDismissal.CLICK_AWAY],
       ...props
     },

package/src/surfaces/tooltip/__stories__/tooltip.stories.tsx

@@ -0,0 +1,136 @@
+import { StyleBox } from '../../../stacks/story_components/style_box.js';
+import { ZStack } from '../../../stacks/z_stack.js';
+import { Tooltip as TooltipComponent, type TooltipProps } from '../tooltip.js';
+import {
+  tetheredArgs,
+  tetheredArgTypes,
+} from '../../../overlay/tethered/__stories__/shared/base_story_config.js';
+import { BodyText, Title } from '../../../typography/index.js';
+import { VStack } from '../../../stacks/v_stack.js';
+import styles from './tooltip_stories.module.css';
+
+export default {
+  title: 'Surfaces/Tooltip',
+  component: TooltipComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A tooltip component that displays a tooltip when hovered.',
+      },
+    },
+  },
+  argTypes: tetheredArgTypes,
+  args: tetheredArgs,
+};
+
+type TooltipStoryProps = TooltipProps & {
+  label: string;
+};
+export const DefaultTooltip = ({
+  label = 'Tooltip content',
+  precision = 'high',
+  ...args
+}: TooltipStoryProps) => {
+  return (
+    <ZStack width="100%" minWidth="400px" minHeight="300px">
+      <TooltipComponent label={label} precision={precision} {...args}>
+        <StyleBox
+          backgroundColor="red"
+          padding="8px"
+          borderRadius={'8px'}
+          width="200px"
+          height="100px"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          Hover to open
+        </StyleBox>
+      </TooltipComponent>
+    </ZStack>
+  );
+};
+
+export const CustomTooltip = ({
+  label = 'Tooltip content',
+  precision = 'high',
+  ...args
+}: TooltipStoryProps) => {
+  return (
+    <ZStack width="100%" minWidth="400px" minHeight="400px">
+      <TooltipComponent
+        className={styles.tooltip}
+        label={
+          <VStack
+            className={styles.label}
+            vAlign="center"
+            hAlign="center"
+            width="200px"
+            height="100px"
+          >
+            <Title>{label}</Title>
+            <BodyText>Custom Tooltip Content</BodyText>
+          </VStack>
+        }
+        precision={precision}
+        {...args}
+      >
+        <StyleBox
+          backgroundColor="red"
+          padding="8px"
+          borderRadius={'8px'}
+          width="200px"
+          height="100px"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          Hover to open
+        </StyleBox>
+      </TooltipComponent>
+    </ZStack>
+  );
+};
+
+export const CustomTooltipLabel = ({
+  label = 'Tooltip content',
+  precision = 'high',
+  ...args
+}: TooltipStoryProps) => {
+  return (
+    <ZStack width="100%" minWidth="400px" minHeight="400px">
+      <TooltipComponent
+        label={
+          <VStack
+            className="tcn-tooltip-label"
+            vAlign="center"
+            hAlign="center"
+            width="200px"
+            height="100px"
+          >
+            <BodyText>✨ Can have custom children and styles</BodyText>
+            <BodyText>
+              ✨ But still inherits the themes tooltip label container styles
+            </BodyText>
+          </VStack>
+        }
+        precision={precision}
+        {...args}
+      >
+        <StyleBox
+          backgroundColor="red"
+          padding="8px"
+          borderRadius={'8px'}
+          width="200px"
+          height="100px"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          Hover to open
+        </StyleBox>
+      </TooltipComponent>
+    </ZStack>
+  );
+};

package/src/surfaces/tooltip/__stories__/tooltip_stories.module.css

@@ -0,0 +1,14 @@
+.tooltip {
+  --custom-color: #e5735c;
+  color: #561a0b;
+
+  :global(.tcn-tethered-origin-indicator) {
+    border-top-color: var(--custom-color);
+  }
+
+  .label {
+    background-color: var(--custom-color);
+    border-radius: 8px;
+    gap: 8px;
+  }
+}

package/src/surfaces/tooltip/tooltip.tsx

@@ -22,7 +22,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function T
     verticalOrigin = 'bottom',
     horizontalAnchor = 'center',
     horizontalOrigin = 'center',
-    precision = 'low', // TODO: Fix caret styles and set to high
+    precision = 'high',
     label,
     ...props
   },
@@ -54,7 +54,11 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function T
         className={clsx(className, styles.tooltip, 'tcn-surface', 'tcn-tooltip')}
         {...props}
       >
-        {label}
+        {typeof label === 'string' ? (
+          <span className="tcn-tooltip-label">{label}</span>
+        ) : (
+          label
+        )}
       </PreviewPopper>
     </>
   );

package/src/themes/themes/ergo/ergo_theme.css

@@ -89,6 +89,7 @@
     --shape-radius-small: 2px;
     --shape-radius-medium: 4px;
     --shape-radius-large: 8px;
+    --shape-triangle-medium: 12px;
 
     /* Palette */
     --primary-color-faint: #c0c0c0;
@@ -607,12 +608,88 @@
     border: inherit;
   }
 
+  .tcn-tethered {
+    /* Managing offset of the indicator in relation for the tethered element
+    pad defaults to 0, but should be set depending on the surface */
+
+    --tether-pad-x: 0px;
+    --tether-pad-y: 0px;
+    --indicator-pad-x: 0px;
+    --indicator-pad-y: 0px;
+    --tether-pad-size: 0px;
+    --tether-pad-pos: var(--tether-pad-size);
+    --tether-pad-neg: calc(-1 * var(--tether-pad-size));
+    left: calc(
+      var(--tether-pad-x, 0) -
+      var(--indicator-pad-x, 0) +
+      var(--tethered-left, 0)
+    );
+    top: calc(var(--tether-pad-y, 0) + var(--tethered-top, 0));
+
+    :where(.tcn-tethered-origin-indicator) {
+      left: calc(var(--indicator-pad-x, 0) + var(--tethered-origin-delta-x, 0));
+      top: calc(var(--indicator-pad-y, 0) + var(--tethered-origin-delta-y, 0));
+    }
+
+    &[data-h-anchor="start"] {
+      --tether-pad-x: var(--tether-pad-pos);
+    }
+
+    &[data-h-anchor="end"] {
+      --tether-pad-x: var(--tether-pad-neg);
+    }
+
+    &[data-h-origin="start"] {
+      --indicator-pad-x: var(--tether-pad-pos);
+    }
+
+    &[data-h-origin="end"] {
+      --indicator-pad-x: var(--tether-pad-neg);
+    }
+
+    &[data-v-origin="center"] {
+      --indicator-pad-x: 0px;
+      --tether-pad-x: 0px;
+      &[data-v-anchor="top"] {
+        --tether-pad-y: var(--tether-pad-pos);
+      }
+
+      &[data-v-anchor="bottom"] {
+        --tether-pad-y: var(--tether-pad-neg);
+      }
+    }
+
+    &[data-anchor-direction="bottom"] {
+      padding-bottom: var(--shape-triangle-medium);
+    }
+
+    &[data-anchor-direction="top"] {
+      padding-top: var(--shape-triangle-medium);
+    }
+
+    &[data-anchor-direction="start"] {
+      padding-left: var(--shape-triangle-medium);
+    }
+
+    &[data-anchor-direction="end"] {
+      padding-right: var(--shape-triangle-medium);
+    }
+  }
+
   .tcn-tooltip {
-    background: rgba(57, 85, 120, 0.85);
-    box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);
-    color: rgba(255, 255, 255, 1);
-    border-radius: var(--shape-radius-medium);
-    padding: var(--padding-medium);
+    --tether-pad-size: 16px;
+    background: transparent;
+    --material: var(--ergo-secondary-dark);
+    --on-material: var(--ergo-white);
+    --action: var(--ergo-tertiary);
+    --on-action: var(--ergo-secondary-dark);
+    .tcn-tooltip-label {
+      box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);
+      color: var(--on-material);
+      background: var(--material);
+      border-radius: var(--shape-radius-medium);
+      padding: var(--padding-medium);
+    }
   }
 
   .tcn-list {
@@ -738,6 +815,17 @@
 
   .tcn-pop-confirm {
     --divide-header: 0;
+    --tether-pad-size: 16px;
+    :where(.tcn-tethered-origin-indicator) {
+      --material: var(--ergo-white);
+    }
+
+    /* Set the indicator to match the header color */
+    &[data-v-origin="top"] {
+      :where(.tcn-tethered-origin-indicator) {
+        --material: var(--ergo-secondary-dark);
+      }
+    }
 
     :where(.tcn-scaffold) {
       --pad-inline: var(--padding-medium);
@@ -860,14 +948,16 @@
   }
 
   .tcn-caret {
-    --caret-size: 12px;
+    --caret-size: var(--shape-triangle-medium);
     --caret-triangle-height: calc(var(--caret-size) / 2);
     --caret-triangle-width: var(--caret-size);
     --caret-triangle-base: var(--caret-triangle-height) solid transparent;
     --caret-triangle-peak: var(--caret-triangle-width) solid var(--material);
 
-    width: 0;
-    height: 0;
+    width: var(--caret-size);
+    height: var(--caret-size);
+    min-width: var(--caret-size);
+    min-height: var(--caret-size);
     flex-grow: 0;
     display: inline-block;
 

package/dist/overlay/tethered/hooks/calculate_origin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"calculate_origin.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/calculate_origin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEpE,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAEzE;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,cAAc,GACtB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CA+BtC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,gBAAgB,EAAE,QAAQ,EAC1B,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC3C,QAAQ,CAKV;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,gBAAgB,GACxB,cAAc,CAQhB"}

package/dist/overlay/tethered/hooks/calculate_origin.js

@@ -1,41 +0,0 @@
-function r(e, t, s) {
-  let n = 0, i = 0;
-  switch (s) {
-    case "top":
-      n = 0;
-      break;
-    case "center":
-      n = e.dimensions.height / 2;
-      break;
-    case "bottom":
-      n = e.dimensions.height;
-      break;
-  }
-  switch (t) {
-    case "start":
-      i = 0;
-      break;
-    case "center":
-      i = e.dimensions.width / 2;
-      break;
-    case "end":
-      i = e.dimensions.width;
-      break;
-  }
-  return { yOffset: n, xOffset: i };
-}
-function c(e, t) {
-  return {
-    x: e.x + t.xOffset,
-    y: e.y + t.yOffset
-  };
-}
-function f(e, t) {
-  return e !== "center" ? e : t !== "center" ? t : "none";
-}
-export {
-  f as getOriginDirection,
-  r as getOriginOffset,
-  c as getOriginPosition
-};
-//# sourceMappingURL=calculate_origin.js.map

package/dist/overlay/tethered/hooks/calculate_origin.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"calculate_origin.js","sources":["../../../../src/overlay/tethered/hooks/calculate_origin.ts"],"sourcesContent":["import type { Position, Rectangle } from '../../../utils/index.js';\nimport type { HorizontalTether, VerticalTether } from '../types.js';\n\nexport type CaretDirection = 'top' | 'bottom' | 'start' | 'end' | 'none';\n\n/**\n * Calculates the offset from the tethered element's top-left corner to the origin point\n * based on tether dimensions and origin alignment.\n */\nexport function getOriginOffset(\n  tether: Rectangle,\n  hOrigin: HorizontalTether,\n  vOrigin: VerticalTether\n): { yOffset: number; xOffset: number } {\n  let yOffset = 0;\n  let xOffset = 0;\n\n  // Calculate vertical offset\n  switch (vOrigin) {\n    case 'top':\n      yOffset = 0;\n      break;\n    case 'center':\n      yOffset = tether.dimensions.height / 2;\n      break;\n    case 'bottom':\n      yOffset = tether.dimensions.height;\n      break;\n  }\n\n  // Calculate horizontal offset\n  switch (hOrigin) {\n    case 'start':\n      xOffset = 0;\n      break;\n    case 'center':\n      xOffset = tether.dimensions.width / 2;\n      break;\n    case 'end':\n      xOffset = tether.dimensions.width;\n      break;\n  }\n\n  return { yOffset, xOffset };\n}\n\n/**\n * Adds offset to baseline position to get absolute origin position.\n */\nexport function getOriginPosition(\n  baselinePosition: Position,\n  offset: { yOffset: number; xOffset: number }\n): Position {\n  return {\n    x: baselinePosition.x + offset.xOffset,\n    y: baselinePosition.y + offset.yOffset,\n  };\n}\n\n/**\n * Determines caret direction based on origin values.\n */\nexport function getOriginDirection(\n  vOrigin: VerticalTether,\n  hOrigin: HorizontalTether\n): CaretDirection {\n  if (vOrigin !== 'center') {\n    return vOrigin;\n  } else if (hOrigin !== 'center') {\n    return hOrigin;\n  } else {\n    return 'none';\n  }\n}\n"],"names":["getOriginOffset","tether","hOrigin","vOrigin","yOffset","xOffset","getOriginPosition","baselinePosition","offset","getOriginDirection"],"mappings":"AASO,SAASA,EACdC,GACAC,GACAC,GACsC;AACtC,MAAIC,IAAU,GACVC,IAAU;AAGd,UAAQF,GAAA;AAAA,IACN,KAAK;AACH,MAAAC,IAAU;AACV;AAAA,IACF,KAAK;AACH,MAAAA,IAAUH,EAAO,WAAW,SAAS;AACrC;AAAA,IACF,KAAK;AACH,MAAAG,IAAUH,EAAO,WAAW;AAC5B;AAAA,EAAA;AAIJ,UAAQC,GAAA;AAAA,IACN,KAAK;AACH,MAAAG,IAAU;AACV;AAAA,IACF,KAAK;AACH,MAAAA,IAAUJ,EAAO,WAAW,QAAQ;AACpC;AAAA,IACF,KAAK;AACH,MAAAI,IAAUJ,EAAO,WAAW;AAC5B;AAAA,EAAA;AAGJ,SAAO,EAAE,SAAAG,GAAS,SAAAC,EAAA;AACpB;AAKO,SAASC,EACdC,GACAC,GACU;AACV,SAAO;AAAA,IACL,GAAGD,EAAiB,IAAIC,EAAO;AAAA,IAC/B,GAAGD,EAAiB,IAAIC,EAAO;AAAA,EAAA;AAEnC;AAKO,SAASC,EACdN,GACAD,GACgB;AAChB,SAAIC,MAAY,WACPA,IACED,MAAY,WACdA,IAEA;AAEX;"}

package/dist/overlay/tethered/hooks/calculate_position.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"calculate_position.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/calculate_position.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,WAAW,+BAA+B;IAC9C,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,UAAU,CAAC;CACtB;AAED,eAAO,MAAM,yBAAyB,GAAI,gJAWvC,+BAA+B;;;CAiFjC,CAAC"}

package/dist/overlay/tethered/hooks/calculate_position.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"calculate_position.js","sources":["../../../../src/overlay/tethered/hooks/calculate_position.ts"],"sourcesContent":["import type { HorizontalTether, VerticalTether } from '../types.js';\nimport type { Rectangle } from '../../../utils/index.js';\nimport type { Dimensions } from '../../../utils/index.js';\n\nexport interface CalculateTetheredPositionParams {\n  anchor: Rectangle;\n  tether: Rectangle;\n  direction: 'ltr' | 'rtl';\n  verticalAnchor: VerticalTether;\n  verticalOrigin: VerticalTether;\n  horizontalAnchor: HorizontalTether;\n  horizontalOrigin: HorizontalTether;\n  verticalOffset: number;\n  horizontalOffset: number;\n  viewport: Dimensions;\n}\n\nexport const calculateTetheredPosition = ({\n  anchor,\n  tether,\n  direction,\n  verticalAnchor,\n  verticalOrigin,\n  horizontalAnchor,\n  horizontalOrigin,\n  verticalOffset,\n  horizontalOffset,\n  viewport,\n}: CalculateTetheredPositionParams) => {\n  const isRtl = direction === 'rtl';\n\n  let top = anchor.position.y;\n  let left = anchor.position.x;\n\n  // Calculate vertical position\n  switch (verticalAnchor) {\n    case 'top':\n      top += verticalOffset;\n      break;\n    case 'center':\n      top += anchor.dimensions.height / 2;\n      break;\n    case 'bottom':\n      top += anchor.dimensions.height - verticalOffset;\n      break;\n  }\n\n  switch (verticalOrigin) {\n    case 'top':\n      break;\n    case 'center':\n      top -= tether.dimensions.height / 2;\n      break;\n    case 'bottom':\n      top -= tether.dimensions.height;\n      break;\n  }\n\n  // Calculate horizontal position with direction sensitivity\n  if (horizontalAnchor === 'start') {\n    left += isRtl ? anchor.dimensions.width + horizontalOffset : horizontalOffset;\n  } else if (horizontalAnchor === 'center') {\n    left += anchor.dimensions.width / 2;\n  } else if (horizontalAnchor === 'end') {\n    left += isRtl ? -horizontalOffset : anchor.dimensions.width + horizontalOffset;\n  }\n\n  // Adjust the origin based on RTL direction\n  let adjustedHorizontalOrigin = horizontalOrigin;\n  if (isRtl) {\n    if (horizontalOrigin === 'start') {\n      adjustedHorizontalOrigin = 'end';\n    } else if (horizontalOrigin === 'end') {\n      adjustedHorizontalOrigin = 'start';\n    }\n  }\n\n  // Apply adjusted origin to the position calculation\n  if (adjustedHorizontalOrigin === 'start') {\n    // No adjustment needed\n  } else if (adjustedHorizontalOrigin === 'center') {\n    left -= tether.dimensions.width / 2;\n  } else if (adjustedHorizontalOrigin === 'end') {\n    left -= tether.dimensions.width;\n  }\n\n  // Ensure the popover stays within the viewport\n  // Prevent overflow to the right\n  if (left + tether.dimensions.width > viewport.width) {\n    left = viewport.width - tether.dimensions.width;\n  }\n\n  // Prevent overflow to the left\n  if (left < 0) {\n    left = 0;\n  }\n\n  // Prevent overflow to the bottom\n  // FIXME: doesn't account for padding.\n  if (top + tether.dimensions.height > viewport.height) {\n    top = viewport.height - tether.dimensions.height;\n  }\n\n  // Prevent overflow to the top\n  if (top < 0) {\n    top = 0;\n  }\n\n  return { top, left };\n};\n"],"names":["calculateTetheredPosition","anchor","tether","direction","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","viewport","isRtl","top","left","adjustedHorizontalOrigin"],"mappings":"AAiBO,MAAMA,IAA4B,CAAC;AAAA,EACxC,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AACF,MAAuC;AACrC,QAAMC,IAAQR,MAAc;AAE5B,MAAIS,IAAMX,EAAO,SAAS,GACtBY,IAAOZ,EAAO,SAAS;AAG3B,UAAQG,GAAA;AAAA,IACN,KAAK;AACH,MAAAQ,KAAOJ;AACP;AAAA,IACF,KAAK;AACH,MAAAI,KAAOX,EAAO,WAAW,SAAS;AAClC;AAAA,IACF,KAAK;AACH,MAAAW,KAAOX,EAAO,WAAW,SAASO;AAClC;AAAA,EAAA;AAGJ,UAAQH,GAAA;AAAA,IACN,KAAK;AACH;AAAA,IACF,KAAK;AACH,MAAAO,KAAOV,EAAO,WAAW,SAAS;AAClC;AAAA,IACF,KAAK;AACH,MAAAU,KAAOV,EAAO,WAAW;AACzB;AAAA,EAAA;AAIJ,EAAII,MAAqB,UACvBO,KAAQF,IAAQV,EAAO,WAAW,QAAQQ,IAAmBA,IACpDH,MAAqB,WAC9BO,KAAQZ,EAAO,WAAW,QAAQ,IACzBK,MAAqB,UAC9BO,KAAQF,IAAQ,CAACF,IAAmBR,EAAO,WAAW,QAAQQ;AAIhE,MAAIK,IAA2BP;AAC/B,SAAII,MACEJ,MAAqB,UACvBO,IAA2B,QAClBP,MAAqB,UAC9BO,IAA2B,WAK3BA,MAA6B,YAEtBA,MAA6B,WACtCD,KAAQX,EAAO,WAAW,QAAQ,IACzBY,MAA6B,UACtCD,KAAQX,EAAO,WAAW,SAKxBW,IAAOX,EAAO,WAAW,QAAQQ,EAAS,UAC5CG,IAAOH,EAAS,QAAQR,EAAO,WAAW,QAIxCW,IAAO,MACTA,IAAO,IAKLD,IAAMV,EAAO,WAAW,SAASQ,EAAS,WAC5CE,IAAMF,EAAS,SAASR,EAAO,WAAW,SAIxCU,IAAM,MACRA,IAAM,IAGD,EAAE,KAAAA,GAAK,MAAAC,EAAA;AAChB;"}

package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts

@@ -1,9 +0,0 @@
-import { CaretDirection } from './calculate_origin.js';
-export declare function useCaretRefDimensions(precision: 'high' | 'low', originDirection: CaretDirection): {
-    caretElementRef: (element: HTMLElement | null) => void;
-    caretSize: {
-        width: number;
-        height: number;
-    };
-};
-//# sourceMappingURL=useCaretRefDimensions.d.ts.map

package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCaretRefDimensions.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/useCaretRefDimensions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,MAAM,GAAG,KAAK,EACzB,eAAe,EAAE,cAAc,GAC9B;IACD,eAAe,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C,CAYA"}

package/dist/overlay/tethered/hooks/useCaretRefDimensions.js

@@ -1,14 +0,0 @@
-import { useState as i, useLayoutEffect as c } from "react";
-function u(t, n) {
-  const [e, r] = i(null), [s, a] = i({ width: 0, height: 0 });
-  return c(() => {
-    if (t === "high" && n !== "none" && e) {
-      const h = e.getBoundingClientRect();
-      a({ width: h.width, height: h.height });
-    }
-  }, [t, n, e]), { caretElementRef: r, caretSize: s };
-}
-export {
-  u as useCaretRefDimensions
-};
-//# sourceMappingURL=useCaretRefDimensions.js.map

package/dist/overlay/tethered/hooks/useCaretRefDimensions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCaretRefDimensions.js","sources":["../../../../src/overlay/tethered/hooks/useCaretRefDimensions.ts"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\nimport type { CaretDirection } from './calculate_origin.js';\n\nexport function useCaretRefDimensions(\n  precision: 'high' | 'low',\n  originDirection: CaretDirection\n): {\n  caretElementRef: (element: HTMLElement | null) => void;\n  caretSize: { width: number; height: number };\n} {\n  const [caretElement, setCaretElement] = useState<HTMLElement | null>(null);\n  const [caretSize, setCaretSize] = useState({ width: 0, height: 0 });\n\n  useLayoutEffect(() => {\n    if (precision === 'high' && originDirection !== 'none' && caretElement) {\n      const rect = caretElement.getBoundingClientRect();\n      setCaretSize({ width: rect.width, height: rect.height });\n    }\n  }, [precision, originDirection, caretElement]);\n\n  return { caretElementRef: setCaretElement, caretSize };\n}\n"],"names":["useCaretRefDimensions","precision","originDirection","caretElement","setCaretElement","useState","caretSize","setCaretSize","useLayoutEffect","rect"],"mappings":";AAGO,SAASA,EACdC,GACAC,GAIA;AACA,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAA6B,IAAI,GACnE,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAE,OAAO,GAAG,QAAQ,GAAG;AAElE,SAAAG,EAAgB,MAAM;AACpB,QAAIP,MAAc,UAAUC,MAAoB,UAAUC,GAAc;AACtE,YAAMM,IAAON,EAAa,sBAAA;AAC1B,MAAAI,EAAa,EAAE,OAAOE,EAAK,OAAO,QAAQA,EAAK,QAAQ;AAAA,IACzD;AAAA,EACF,GAAG,CAACR,GAAWC,GAAiBC,CAAY,CAAC,GAEtC,EAAE,iBAAiBC,GAAiB,WAAAE,EAAA;AAC7C;"}