@salt-ds/lab 1.0.0-alpha.38 → 1.0.0-alpha.39

package/dist-es/overlay/Overlay.js

@@ -1,98 +1,70 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useMemo } from 'react';
+import { useRef, useMemo } from 'react';
 import { OverlayContext } from './OverlayContext.js';
-import { useId, useControlled, useFloatingUI } from '@salt-ds/core';
+import { useControlled, useFloatingUI } from '@salt-ds/core';
 import { offset, flip, shift, limitShift, arrow, useInteractions, useRole, useClick, useDismiss } from '@floating-ui/react';
 
-const Overlay = forwardRef(
-  function Overlay2(props, ref) {
-    const {
-      children,
-      open,
-      onOpenChange,
-      placement: placementProp = "top",
-      id: idProp,
-      onClose,
-      ...rest
-    } = props;
-    const id = useId(idProp);
-    const arrowRef = useRef(null);
-    const [openState, setOpenState] = useControlled({
-      controlled: open,
-      default: false,
-      name: "Overlay",
-      state: "open"
-    });
-    const {
-      x,
-      y,
-      strategy,
+const Overlay = ({
+  children,
+  open,
+  onOpenChange,
+  placement: placementProp = "top"
+}) => {
+  const arrowRef = useRef(null);
+  const [openState, setOpenState] = useControlled({
+    controlled: open,
+    default: false,
+    name: "Overlay",
+    state: "open"
+  });
+  const handleOpenChange = (newOpen) => {
+    setOpenState(newOpen);
+    onOpenChange == null ? void 0 : onOpenChange(newOpen);
+  };
+  const { x, y, strategy, context, elements, floating, reference } = useFloatingUI({
+    open: openState,
+    onOpenChange: handleOpenChange,
+    placement: placementProp,
+    middleware: [
+      offset(11),
+      flip(),
+      shift({ limiter: limitShift() }),
+      arrow({ element: arrowRef })
+    ]
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useRole(context, { role: "dialog" }),
+    useClick(context),
+    useDismiss(context)
+  ]);
+  const floatingStyles = useMemo(() => {
+    var _a, _b;
+    return {
+      top: y != null ? y : 0,
+      left: x != null ? x : 0,
+      position: strategy,
+      width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+      height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight
+    };
+  }, [elements.floating, strategy, x, y]);
+  const arrowProps = {
+    ref: arrowRef,
+    context
+  };
+  return /* @__PURE__ */ jsx(OverlayContext.Provider, {
+    value: {
+      openState,
+      floatingStyles,
       context,
-      elements,
+      arrowProps,
       floating,
       reference,
-      placement
-    } = useFloatingUI({
-      open: openState,
-      onOpenChange: setOpenState,
-      placement: placementProp,
-      middleware: [
-        offset(11),
-        flip(),
-        shift({ limiter: limitShift() }),
-        arrow({ element: arrowRef })
-      ]
-    });
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-      useRole(context, { role: "dialog" }),
-      useClick(context),
-      useDismiss(context)
-    ]);
-    const floatingStyles = useMemo(() => {
-      var _a, _b;
-      return {
-        top: y != null ? y : 0,
-        left: x != null ? x : 0,
-        position: strategy,
-        width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
-        height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight
-      };
-    }, [elements.floating, strategy, x, y]);
-    const setOpen = (event, newOpen) => {
-      setOpenState(newOpen);
-      onOpenChange == null ? void 0 : onOpenChange(event, newOpen);
-    };
-    const arrowProps = {
-      ref: arrowRef,
-      context
-    };
-    const handleCloseButton = (event) => {
-      setOpen(event, false);
-      onClose == null ? void 0 : onClose(event);
-    };
-    return /* @__PURE__ */ jsx(OverlayContext.Provider, {
-      value: {
-        id: id != null ? id : "",
-        openState,
-        setOpen,
-        floatingStyles,
-        placement,
-        context,
-        arrowProps,
-        floating,
-        reference,
-        handleCloseButton,
-        getFloatingProps,
-        getReferenceProps
-      },
-      children: /* @__PURE__ */ jsx("div", {
-        ref,
-        ...rest,
-        children
-      })
-    });
-  }
-);
+      getFloatingProps,
+      getReferenceProps
+    },
+    children
+  });
+};
 
 export { Overlay };
 //# sourceMappingURL=Overlay.js.map

package/dist-es/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  SyntheticEvent,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { OverlayContext } from \"./OverlayContext\";\nimport { useControlled, useFloatingUI, useId } from \"@salt-ds/core\";\nimport {\n  flip,\n  offset,\n  shift,\n  limitShift,\n  arrow,\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\n\nexport interface OverlayProps extends ComponentPropsWithoutRef<\"div\"> {\n  open?: boolean;\n  onOpenChange?: (event: SyntheticEvent, newOpen: boolean) => void;\n  /*\n   * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.\n   */\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /*\n   * Use in controlled version to close Overlay.\n   */\n  onClose?: (event: SyntheticEvent) => void;\n}\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n  function Overlay(props, ref) {\n    const {\n      children,\n      open,\n      onOpenChange,\n      placement: placementProp = \"top\",\n      id: idProp,\n      onClose,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const arrowRef = useRef<SVGSVGElement | null>(null);\n\n    const [openState, setOpenState] = useControlled({\n      controlled: open,\n      default: false,\n      name: \"Overlay\",\n      state: \"open\",\n    });\n\n    const {\n      x,\n      y,\n      strategy,\n      context,\n      elements,\n      floating,\n      reference,\n      placement,\n    } = useFloatingUI({\n      open: openState,\n      onOpenChange: setOpenState,\n      placement: placementProp,\n      middleware: [\n        offset(11),\n        flip(),\n        shift({ limiter: limitShift() }),\n        arrow({ element: arrowRef }),\n      ],\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n      useRole(context, { role: \"dialog\" }),\n      useClick(context),\n      useDismiss(context),\n    ]);\n\n    const floatingStyles = useMemo(() => {\n      return {\n        top: y ?? 0,\n        left: x ?? 0,\n        position: strategy,\n        width: elements.floating?.offsetWidth,\n        height: elements.floating?.offsetHeight,\n      };\n    }, [elements.floating, strategy, x, y]);\n\n    const setOpen = (event: SyntheticEvent, newOpen: boolean) => {\n      setOpenState(newOpen);\n      onOpenChange?.(event, newOpen);\n    };\n\n    const arrowProps = {\n      ref: arrowRef,\n      context,\n    };\n\n    const handleCloseButton = (event: SyntheticEvent) => {\n      setOpen(event, false);\n      onClose?.(event);\n    };\n\n    return (\n      <OverlayContext.Provider\n        value={{\n          id: id ?? \"\",\n          openState,\n          setOpen,\n          floatingStyles,\n          placement,\n          context,\n          arrowProps,\n          floating,\n          reference,\n          handleCloseButton,\n          getFloatingProps,\n          getReferenceProps,\n        }}\n      >\n        <div ref={ref} {...rest}>\n          {children}\n        </div>\n      </OverlayContext.Provider>\n    );\n  }\n);\n"],"names":["Overlay"],"mappings":"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"}
+{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, useMemo, useRef } from \"react\";\nimport { OverlayContext } from \"./OverlayContext\";\nimport { useControlled, useFloatingUI } from \"@salt-ds/core\";\nimport {\n  flip,\n  offset,\n  shift,\n  limitShift,\n  arrow,\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\n\nexport interface OverlayProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /*\n   * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.\n   */\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nexport const Overlay = ({\n  children,\n  open,\n  onOpenChange,\n  placement: placementProp = \"top\",\n}: OverlayProps) => {\n  const arrowRef = useRef<SVGSVGElement | null>(null);\n\n  const [openState, setOpenState] = useControlled({\n    controlled: open,\n    default: false,\n    name: \"Overlay\",\n    state: \"open\",\n  });\n\n  const handleOpenChange = (newOpen: boolean) => {\n    setOpenState(newOpen);\n    onOpenChange?.(newOpen);\n  };\n\n  const { x, y, strategy, context, elements, floating, reference } =\n    useFloatingUI({\n      open: openState,\n      onOpenChange: handleOpenChange,\n      placement: placementProp,\n      middleware: [\n        offset(11),\n        flip(),\n        shift({ limiter: limitShift() }),\n        arrow({ element: arrowRef }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(context, { role: \"dialog\" }),\n    useClick(context),\n    useDismiss(context),\n  ]);\n\n  const floatingStyles = useMemo(() => {\n    return {\n      top: y ?? 0,\n      left: x ?? 0,\n      position: strategy,\n      width: elements.floating?.offsetWidth,\n      height: elements.floating?.offsetHeight,\n    };\n  }, [elements.floating, strategy, x, y]);\n\n  const arrowProps = {\n    ref: arrowRef,\n    context,\n  };\n\n  return (\n    <OverlayContext.Provider\n      value={{\n        openState,\n        floatingStyles,\n        context,\n        arrowProps,\n        floating,\n        reference,\n        getFloatingProps,\n        getReferenceProps,\n      }}\n    >\n      {children}\n    </OverlayContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA8BO,MAAM,UAAU,CAAC;AAAA,EACtB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAW,aAAgB,GAAA,KAAA;AAC7B,CAAoB,KAAA;AAClB,EAAM,MAAA,QAAA,GAAW,OAA6B,IAAI,CAAA,CAAA;AAElD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAc,CAAA;AAAA,IAC9C,UAAY,EAAA,IAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,gBAAA,GAAmB,CAAC,OAAqB,KAAA;AAC7C,IAAA,YAAA,CAAa,OAAO,CAAA,CAAA;AACpB,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,OAAA,CAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA,EAAE,GAAG,CAAG,EAAA,QAAA,EAAU,SAAS,QAAU,EAAA,QAAA,EAAU,SAAU,EAAA,GAC7D,aAAc,CAAA;AAAA,IACZ,IAAM,EAAA,SAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACd,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACV,OAAO,EAAE,CAAA;AAAA,MACT,IAAK,EAAA;AAAA,MACL,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc,CAAA;AAAA,MAC/B,KAAM,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAA;AAAA,KAC7B;AAAA,GACD,CAAA,CAAA;AAEH,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAI,eAAgB,CAAA;AAAA,IAC9D,OAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,UAAU,CAAA;AAAA,IACnC,SAAS,OAAO,CAAA;AAAA,IAChB,WAAW,OAAO,CAAA;AAAA,GACnB,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,QAAQ,MAAM;AArEvC,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAsEI,IAAO,OAAA;AAAA,MACL,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,MACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,MACX,QAAU,EAAA,QAAA;AAAA,MACV,KAAA,EAAA,CAAO,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA;AAAA,MAC1B,MAAA,EAAA,CAAQ,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA;AAAA,KAC7B,CAAA;AAAA,KACC,CAAC,QAAA,CAAS,UAAU,QAAU,EAAA,CAAA,EAAG,CAAC,CAAC,CAAA,CAAA;AAEtC,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAK,EAAA,QAAA;AAAA,IACL,OAAA;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,eAAe,QAAf,EAAA;AAAA,IACC,KAAO,EAAA;AAAA,MACL,SAAA;AAAA,MACA,cAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,iBAAA;AAAA,KACF;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/overlay/OverlayContext.js

@@ -4,22 +4,14 @@ import { useContext } from 'react';
 const OverlayContext = createContext(
   "OverlayContext",
   {
-    id: "",
     openState: false,
-    setOpen() {
-      return void 0;
-    },
     floatingStyles: {
       top: 0,
       left: 0,
       position: ""
     },
-    placement: "",
     context: {},
     arrowProps: {},
-    handleCloseButton() {
-      return void 0;
-    },
     reference: {},
     floating: {},
     getFloatingProps() {

package/dist-es/overlay/OverlayContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayContext.js","sources":["../src/overlay/OverlayContext.ts"],"sourcesContent":["import {\n  FloatingArrowProps,\n  FloatingContext,\n  Placement,\n  ReferenceType,\n  Strategy,\n} from \"@floating-ui/react\";\nimport { createContext, useFloatingUI } from \"@salt-ds/core\";\nimport { SyntheticEvent, useContext } from \"react\";\n\ntype FloatingReturn = ReturnType<typeof useFloatingUI>;\ntype FloatingStyleProps = {\n  top: number;\n  left: number;\n  position: Strategy;\n  width?: number;\n  height?: number;\n};\n\nexport interface OverlayContextValue {\n  id: string;\n  openState: boolean;\n  setOpen: (event: SyntheticEvent, newOpen: boolean) => void;\n  floatingStyles: FloatingStyleProps;\n  placement: Placement;\n  arrowProps: FloatingArrowProps;\n  context: FloatingContext;\n  reference?: (node: ReferenceType | null) => void;\n  floating?: (node: HTMLElement | null) => void;\n  handleCloseButton: (event: SyntheticEvent) => void;\n  getFloatingProps: (\n    userProps?: React.HTMLProps<HTMLElement> | undefined\n  ) => Record<string, unknown>;\n  getReferenceProps: (\n    userProps?: React.HTMLProps<Element> | undefined\n  ) => Record<string, unknown>;\n}\n\nexport const OverlayContext = createContext<OverlayContextValue>(\n  \"OverlayContext\",\n  {\n    id: \"\",\n    openState: false,\n    setOpen() {\n      return undefined;\n    },\n    floatingStyles: {\n      top: 0,\n      left: 0,\n      position: \"\" as Strategy,\n    },\n    placement: \"\" as Placement,\n    context: {} as FloatingContext,\n    arrowProps: {} as FloatingArrowProps,\n    handleCloseButton() {\n      return undefined;\n    },\n    reference: {} as FloatingReturn[\"reference\"],\n    floating: {} as FloatingReturn[\"floating\"],\n    getFloatingProps() {\n      return {} as Record<string, unknown>;\n    },\n    getReferenceProps() {\n      return {} as Record<string, unknown>;\n    },\n  }\n);\n\nexport function useOverlayContext() {\n  return useContext(OverlayContext);\n}\n"],"names":[],"mappings":";;;AAsCO,MAAM,cAAiB,GAAA,aAAA;AAAA,EAC5B,gBAAA;AAAA,EACA;AAAA,IACE,EAAI,EAAA,EAAA;AAAA,IACJ,SAAW,EAAA,KAAA;AAAA,IACX,OAAU,GAAA;AACR,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,GAAK,EAAA,CAAA;AAAA,MACL,IAAM,EAAA,CAAA;AAAA,MACN,QAAU,EAAA,EAAA;AAAA,KACZ;AAAA,IACA,SAAW,EAAA,EAAA;AAAA,IACX,SAAS,EAAC;AAAA,IACV,YAAY,EAAC;AAAA,IACb,iBAAoB,GAAA;AAClB,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAW,EAAC;AAAA,IACZ,UAAU,EAAC;AAAA,IACX,gBAAmB,GAAA;AACjB,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAAA,IACA,iBAAoB,GAAA;AAClB,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAAA,GACF;AACF,EAAA;AAEO,SAAS,iBAAoB,GAAA;AAClC,EAAA,OAAO,WAAW,cAAc,CAAA,CAAA;AAClC;;;;"}
+{"version":3,"file":"OverlayContext.js","sources":["../src/overlay/OverlayContext.ts"],"sourcesContent":["import {\n  FloatingArrowProps,\n  FloatingContext,\n  ReferenceType,\n  Strategy,\n} from \"@floating-ui/react\";\nimport { createContext, useFloatingUI } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\n\ntype FloatingReturn = ReturnType<typeof useFloatingUI>;\ntype FloatingStyleProps = {\n  top: number;\n  left: number;\n  position: Strategy;\n  width?: number;\n  height?: number;\n};\n\nexport interface OverlayContextValue {\n  openState: boolean;\n  floatingStyles: FloatingStyleProps;\n  arrowProps: FloatingArrowProps;\n  context: FloatingContext;\n  reference?: (node: ReferenceType | null) => void;\n  floating?: (node: HTMLElement | null) => void;\n  getFloatingProps: (\n    userProps?: React.HTMLProps<HTMLElement> | undefined\n  ) => Record<string, unknown>;\n  getReferenceProps: (\n    userProps?: React.HTMLProps<Element> | undefined\n  ) => Record<string, unknown>;\n}\n\nexport const OverlayContext = createContext<OverlayContextValue>(\n  \"OverlayContext\",\n  {\n    openState: false,\n    floatingStyles: {\n      top: 0,\n      left: 0,\n      position: \"\" as Strategy,\n    },\n    context: {} as FloatingContext,\n    arrowProps: {} as FloatingArrowProps,\n    reference: {} as FloatingReturn[\"reference\"],\n    floating: {} as FloatingReturn[\"floating\"],\n    getFloatingProps() {\n      return {} as Record<string, unknown>;\n    },\n    getReferenceProps() {\n      return {} as Record<string, unknown>;\n    },\n  }\n);\n\nexport function useOverlayContext() {\n  return useContext(OverlayContext);\n}\n"],"names":[],"mappings":";;;AAiCO,MAAM,cAAiB,GAAA,aAAA;AAAA,EAC5B,gBAAA;AAAA,EACA;AAAA,IACE,SAAW,EAAA,KAAA;AAAA,IACX,cAAgB,EAAA;AAAA,MACd,GAAK,EAAA,CAAA;AAAA,MACL,IAAM,EAAA,CAAA;AAAA,MACN,QAAU,EAAA,EAAA;AAAA,KACZ;AAAA,IACA,SAAS,EAAC;AAAA,IACV,YAAY,EAAC;AAAA,IACb,WAAW,EAAC;AAAA,IACZ,UAAU,EAAC;AAAA,IACX,gBAAmB,GAAA;AACjB,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAAA,IACA,iBAAoB,GAAA;AAClB,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAAA,GACF;AACF,EAAA;AAEO,SAAS,iBAAoB,GAAA;AAClC,EAAA,OAAO,WAAW,cAAc,CAAA,CAAA;AAClC;;;;"}

package/dist-es/overlay/OverlayPanel.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOverlayPanel {\n  --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-primary-borderColor));\n  --overlay-background: var(--saltOverlay-background, var(--salt-container-primary-background));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltOverlay-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltOverlay-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight));\n\n  border-color: var(--overlay-borderColor);\n  border-style: var(--saltOverlay-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltOverlay-borderWidth, var(--salt-size-border));\n  border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));\n\n  background: var(--overlay-background);\n  box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));\n\n  color: var(--saltOverlay-text-color, var(--salt-text-primary-foreground));\n  z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover));\n  width: max-content;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OverlayPanel.css.js.map

package/dist-es/overlay/OverlayPanel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/overlay/OverlayPanel.js

@@ -1,38 +1,44 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { makePrefixer, useFloatingComponent, useForkRef } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { useOverlayContext } from './OverlayContext.js';
-import { OverlayPanelBase } from './OverlayPanelBase.js';
+import { FloatingArrow } from '@floating-ui/react';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './OverlayPanel.css.js';
 
 const withBaseName = makePrefixer("saltOverlayPanel");
 const OverlayPanel = forwardRef(
   function OverlayPanel2(props, ref) {
-    const { className, ["aria-labelledby"]: ariaLabelledby, ...rest } = props;
+    const {
+      className,
+      ["aria-labelledby"]: ariaLabelledby,
+      children,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-overlay-panel",
+      css: css_248z,
+      window: targetWindow
+    });
     const { Component: FloatingComponent } = useFloatingComponent();
     const {
-      id,
       openState,
       floatingStyles,
-      placement,
       context,
       getFloatingProps,
-      floating
+      floating,
+      arrowProps
     } = useOverlayContext();
     const handleRef = useForkRef(floating, ref);
     const { top, left, width, height, position } = floatingStyles;
-    const getOverlayProps = () => {
-      return getFloatingProps({
-        "data-placement": placement,
-        ref: floating,
-        id: `${id}-panel`
-      });
-    };
-    return /* @__PURE__ */ jsx(FloatingComponent, {
+    return /* @__PURE__ */ jsxs(FloatingComponent, {
       open: openState,
       className: clsx(withBaseName(), className),
       "aria-modal": "true",
-      ...getOverlayProps(),
+      ...getFloatingProps(),
       ref: handleRef,
       width,
       height,
@@ -43,9 +49,24 @@ const OverlayPanel = forwardRef(
         context
       },
       "aria-labelledby": ariaLabelledby,
-      children: /* @__PURE__ */ jsx(OverlayPanelBase, {
-        ...rest
-      })
+      children: [
+        /* @__PURE__ */ jsxs("div", {
+          ...rest,
+          children: [
+            " ",
+            children,
+            " "
+          ]
+        }),
+        /* @__PURE__ */ jsx(FloatingArrow, {
+          ...arrowProps,
+          strokeWidth: 1,
+          fill: "var(--overlay-background)",
+          stroke: "var(--overlay-borderColor)",
+          height: 5,
+          width: 10
+        })
+      ]
     });
   }
 );

package/dist-es/overlay/OverlayPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanel.js","sources":["../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  HTMLProps,\n  ComponentPropsWithoutRef,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport { OverlayPanelBase } from \"./OverlayPanelBase\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanel\");\n\nexport interface OverlayPanelProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nexport const OverlayPanel = forwardRef<HTMLDivElement, OverlayPanelProps>(\n  function OverlayPanel(props, ref: ForwardedRef<HTMLDivElement>) {\n    const { className, [\"aria-labelledby\"]: ariaLabelledby, ...rest } = props;\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      id,\n      openState,\n      floatingStyles,\n      placement,\n      context,\n      getFloatingProps,\n      floating,\n    } = useOverlayContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    const { top, left, width, height, position } = floatingStyles;\n\n    const getOverlayProps = (): HTMLProps<HTMLDivElement> => {\n      return getFloatingProps({\n        // @ts-ignore data-placement does not exist\n        \"data-placement\": placement,\n        ref: floating,\n        id: `${id}-panel`,\n      });\n    };\n\n    return (\n      <FloatingComponent\n        open={openState}\n        className={clsx(withBaseName(), className)}\n        aria-modal=\"true\"\n        {...getOverlayProps()}\n        ref={handleRef}\n        width={width}\n        height={height}\n        top={top}\n        left={left}\n        position={position}\n        focusManagerProps={{\n          context: context,\n        }}\n        aria-labelledby={ariaLabelledby}\n      >\n        <OverlayPanelBase {...rest} />\n      </FloatingComponent>\n    );\n  }\n);\n"],"names":["OverlayPanel"],"mappings":";;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAI7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,GAAmC,EAAA;AAC9D,IAAA,MAAM,EAAE,SAAA,EAAA,CAAY,iBAAoB,GAAA,cAAA,EAAA,GAAmB,MAAS,GAAA,KAAA,CAAA;AAEpE,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,IAAM,MAAA;AAAA,MACJ,EAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,QAAA;AAAA,QACE,iBAAkB,EAAA,CAAA;AAEtB,IAAM,MAAA,SAAA,GAAY,UAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE1D,IAAA,MAAM,EAAE,GAAK,EAAA,IAAA,EAAM,KAAO,EAAA,MAAA,EAAQ,UAAa,GAAA,cAAA,CAAA;AAE/C,IAAA,MAAM,kBAAkB,MAAiC;AACvD,MAAA,OAAO,gBAAiB,CAAA;AAAA,QAEtB,gBAAkB,EAAA,SAAA;AAAA,QAClB,GAAK,EAAA,QAAA;AAAA,QACL,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAAA,KACH,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,iBAAA,EAAA;AAAA,MACC,IAAM,EAAA,SAAA;AAAA,MACN,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,YAAW,EAAA,MAAA;AAAA,MACV,GAAG,eAAgB,EAAA;AAAA,MACpB,GAAK,EAAA,SAAA;AAAA,MACL,KAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,iBAAmB,EAAA;AAAA,QACjB,OAAA;AAAA,OACF;AAAA,MACA,iBAAiB,EAAA,cAAA;AAAA,MAEjB,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,QAAkB,GAAG,IAAA;AAAA,OAAM,CAAA;AAAA,KAC9B,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"OverlayPanel.js","sources":["../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport { FloatingArrow } from \"@floating-ui/react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport overlayPanelCss from \"./OverlayPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanel\");\nexport interface OverlayPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Overlay Panel\n   */\n  children?: ReactNode;\n}\n\nexport const OverlayPanel = forwardRef<HTMLDivElement, OverlayPanelProps>(\n  function OverlayPanel(props, ref) {\n    const {\n      className,\n      [\"aria-labelledby\"]: ariaLabelledby,\n      children,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-overlay-panel\",\n      css: overlayPanelCss,\n      window: targetWindow,\n    });\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      openState,\n      floatingStyles,\n      context,\n      getFloatingProps,\n      floating,\n      arrowProps,\n    } = useOverlayContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    const { top, left, width, height, position } = floatingStyles;\n\n    return (\n      <FloatingComponent\n        open={openState}\n        className={clsx(withBaseName(), className)}\n        aria-modal=\"true\"\n        {...getFloatingProps()}\n        ref={handleRef}\n        width={width}\n        height={height}\n        top={top}\n        left={left}\n        position={position}\n        focusManagerProps={{\n          context: context,\n        }}\n        aria-labelledby={ariaLabelledby}\n      >\n        <div {...rest}> {children} </div>\n        <FloatingArrow\n          {...arrowProps}\n          strokeWidth={1}\n          fill=\"var(--overlay-background)\"\n          stroke=\"var(--overlay-borderColor)\"\n          height={5}\n          width={10}\n        />\n      </FloatingComponent>\n    );\n  }\n);\n"],"names":["OverlayPanel","overlayPanelCss"],"mappings":";;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAQ7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MAAA,CACC,iBAAoB,GAAA,cAAA;AAAA,MACrB,QAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,cAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,QACE,iBAAkB,EAAA,CAAA;AAEtB,IAAM,MAAA,SAAA,GAAY,UAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE1D,IAAA,MAAM,EAAE,GAAK,EAAA,IAAA,EAAM,KAAO,EAAA,MAAA,EAAQ,UAAa,GAAA,cAAA,CAAA;AAE/C,IAAA,uBACG,IAAA,CAAA,iBAAA,EAAA;AAAA,MACC,IAAM,EAAA,SAAA;AAAA,MACN,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,YAAW,EAAA,MAAA;AAAA,MACV,GAAG,gBAAiB,EAAA;AAAA,MACrB,GAAK,EAAA,SAAA;AAAA,MACL,KAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,iBAAmB,EAAA;AAAA,QACjB,OAAA;AAAA,OACF;AAAA,MACA,iBAAiB,EAAA,cAAA;AAAA,MAEjB,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAK,GAAG,IAAA;AAAA,UAAM,QAAA,EAAA;AAAA,YAAA,GAAA;AAAA,YAAE,QAAA;AAAA,YAAS,GAAA;AAAA,WAAA;AAAA,SAAC,CAAA;AAAA,wBAC1B,GAAA,CAAA,aAAA,EAAA;AAAA,UACE,GAAG,UAAA;AAAA,UACJ,WAAa,EAAA,CAAA;AAAA,UACb,IAAK,EAAA,2BAAA;AAAA,UACL,MAAO,EAAA,4BAAA;AAAA,UACP,MAAQ,EAAA,CAAA;AAAA,UACR,KAAO,EAAA,EAAA;AAAA,SACT,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/overlay/OverlayPanelCloseButton.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOverlayPanelCloseButton {\n  position: absolute;\n  right: 0;\n  z-index: 1;\n}\n\n.saltOverlayPanelCloseButton-button.saltButton-secondary {\n  position: sticky;\n  right: 0;\n  top: 0;\n}\n\n.saltOverlayPanelCloseButton ~ .saltOverlayPanelContent {\n  padding-right: var(--salt-spacing-400);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OverlayPanelCloseButton.css.js.map

package/dist-es/overlay/OverlayPanelCloseButton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayPanelCloseButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/overlay/OverlayPanelCloseButton.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { makePrefixer, Button } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { CloseIcon } from '@salt-ds/icons';
+import css_248z from './OverlayPanelCloseButton.css.js';
+
+const withBaseName = makePrefixer("saltOverlayPanelCloseButton");
+const OverlayPanelCloseButton = forwardRef(function OverlayPanelButton({ className, ...rest }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-overlay-panel-close-button",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(withBaseName(), className),
+    children: /* @__PURE__ */ jsx(Button, {
+      ref,
+      "aria-label": "Close overlay",
+      variant: "secondary",
+      className: withBaseName("button"),
+      ...rest,
+      children: /* @__PURE__ */ jsx(CloseIcon, {
+        "aria-hidden": true
+      })
+    })
+  });
+});
+
+export { OverlayPanelCloseButton };
+//# sourceMappingURL=OverlayPanelCloseButton.js.map

package/dist-es/overlay/OverlayPanelCloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayPanelCloseButton.js","sources":["../src/overlay/OverlayPanelCloseButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport overlayPanelCloseButtonCss from \"./OverlayPanelCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelCloseButton\");\n\nexport const OverlayPanelCloseButton = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(function OverlayPanelButton({ className, ...rest }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-close-button\",\n    css: overlayPanelCloseButtonCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)}>\n      <Button\n        ref={ref}\n        aria-label=\"Close overlay\"\n        variant=\"secondary\"\n        className={withBaseName(\"button\")}\n        {...rest}\n      >\n        <CloseIcon aria-hidden />\n      </Button>\n    </div>\n  );\n});\n"],"names":["overlayPanelCloseButtonCss"],"mappings":";;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,6BAA6B,CAAA,CAAA;AAElD,MAAA,uBAAA,GAA0B,WAGrC,SAAS,kBAAA,CAAmB,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACzD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAC5C,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAW,EAAA,eAAA;AAAA,MACX,OAAQ,EAAA,WAAA;AAAA,MACR,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,MAC/B,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,QAAU,aAAW,EAAA,IAAA;AAAA,OAAC,CAAA;AAAA,KACzB,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/overlay/OverlayPanelContent.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOverlayPanelContent {\n  animation: var(--salt-animation-fade-in-center);\n  position: relative;\n  overflow: auto;\n  padding: var(--saltOverlay-content-padding, var(--salt-spacing-100));\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OverlayPanelContent.css.js.map

package/dist-es/overlay/OverlayPanelContent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayPanelContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/{segmented-button-group/SegmentedButtonGroup.js → overlay/OverlayPanelContent.js}

@@ -1,26 +1,27 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { clsx } from 'clsx';
-import { makePrefixer } from '@salt-ds/core';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
-import css_248z from './SegmentedButtonGroup.css.js';
+import { makePrefixer } from '@salt-ds/core';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import css_248z from './OverlayPanelContent.css.js';
 
-const withBaseName = makePrefixer("saltSegmentedButtonGroup");
-const SegmentedButtonGroup = forwardRef(function SegmentedButtonGroup2({ className, children, ...rest }, ref) {
+const withBaseName = makePrefixer("saltOverlayPanelContent");
+const OverlayPanelContent = forwardRef(function OverlayPanelContent2(props, ref) {
   const targetWindow = useWindow();
   useComponentCssInjection({
-    testId: "salt-segmented-button-group",
+    testId: "salt-overlay-panel-content",
     css: css_248z,
     window: targetWindow
   });
+  const { children, className, ...rest } = props;
   return /* @__PURE__ */ jsx("div", {
     className: clsx(withBaseName(), className),
-    ref,
     ...rest,
+    ref,
     children
   });
 });
 
-export { SegmentedButtonGroup };
-//# sourceMappingURL=SegmentedButtonGroup.js.map
+export { OverlayPanelContent };
+//# sourceMappingURL=OverlayPanelContent.js.map

package/dist-es/overlay/OverlayPanelContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayPanelContent.js","sources":["../src/overlay/OverlayPanelContent.tsx"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ReactNode, ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport overlayPanelContentCss from \"./OverlayPanelContent.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelContent\");\n\nexport interface OverlayPanelContentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Overlay Panel Content\n   */\n  children?: ReactNode;\n}\n\nexport const OverlayPanelContent = forwardRef<\n  HTMLDivElement,\n  OverlayPanelContentProps\n>(function OverlayPanelContent(props, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-content\",\n    css: overlayPanelContentCss,\n    window: targetWindow,\n  });\n\n  const { children, className, ...rest } = props;\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["OverlayPanelContent","overlayPanelContentCss"],"mappings":";;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAUpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,IAAA;AAAA,IAAM,GAAA;AAAA,IACxD,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/overlay/OverlayTrigger.js

@@ -5,7 +5,7 @@ import { useOverlayContext } from './OverlayContext.js';
 
 function OverlayTrigger(props) {
   const { children } = props;
-  const { setOpen, reference, getReferenceProps, id } = useOverlayContext();
+  const { reference, getReferenceProps } = useOverlayContext();
   const triggerRef = useForkRef(
     isValidElement(children) ? children.ref : null,
     reference
@@ -15,18 +15,9 @@ function OverlayTrigger(props) {
       children
     });
   }
-  const handleClick = (event) => {
-    setOpen(event, true);
-  };
-  const getTriggerProps = () => getReferenceProps({
-    ref: reference,
-    onClick: handleClick,
-    id: `${id}-trigger`,
-    "aria-controls": `${id}-panel`
-  });
   return /* @__PURE__ */ jsx(Fragment, {
     children: cloneElement(children, {
-      ...mergeProps(getTriggerProps(), children.props),
+      ...mergeProps(getReferenceProps(), children.props),
       ref: triggerRef
     })
   });

package/dist-es/overlay/OverlayTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayTrigger.js","sources":["../src/overlay/OverlayTrigger.tsx"],"sourcesContent":["import { cloneElement, isValidElement, ReactNode, MouseEvent } from \"react\";\nimport { mergeProps, useForkRef } from \"@salt-ds/core\";\nimport { useOverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayTriggerProps {\n  children?: ReactNode;\n}\n\nexport function OverlayTrigger(props: OverlayTriggerProps) {\n  const { children } = props;\n\n  const { setOpen, reference, getReferenceProps, id } = useOverlayContext();\n\n  const triggerRef = useForkRef(\n    // @ts-ignore error TS2339 missing property ref\n    isValidElement(children) ? children.ref : null,\n    reference\n  );\n\n  if (!children || !isValidElement(children)) {\n    return <>{children}</>;\n  }\n  const handleClick = (event: MouseEvent) => {\n    setOpen(event, true);\n  };\n\n  const getTriggerProps = () =>\n    getReferenceProps({\n      ref: reference,\n      onClick: handleClick,\n      id: `${id}-trigger`,\n      \"aria-controls\": `${id}-panel`,\n    });\n\n  return (\n    <>\n      {cloneElement(children, {\n        ...mergeProps(getTriggerProps(), children.props),\n        ref: triggerRef,\n      })}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;AAQO,SAAS,eAAe,KAA4B,EAAA;AACzD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA,CAAA;AAErB,EAAA,MAAM,EAAE,OAAS,EAAA,SAAA,EAAW,iBAAmB,EAAA,EAAA,KAAO,iBAAkB,EAAA,CAAA;AAExE,EAAA,MAAM,UAAa,GAAA,UAAA;AAAA,IAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,IAC1C,SAAA;AAAA,GACF,CAAA;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAe,QAAQ,CAAG,EAAA;AAC1C,IAAO,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MAAG,QAAA;AAAA,KAAS,CAAA,CAAA;AAAA,GACrB;AACA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAsB,KAAA;AACzC,IAAA,OAAA,CAAQ,OAAO,IAAI,CAAA,CAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,MACtB,iBAAkB,CAAA;AAAA,IAChB,GAAK,EAAA,SAAA;AAAA,IACL,OAAS,EAAA,WAAA;AAAA,IACT,IAAI,CAAG,EAAA,EAAA,CAAA,QAAA,CAAA;AAAA,IACP,iBAAiB,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,GACrB,CAAA,CAAA;AAEH,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,IACG,uBAAa,QAAU,EAAA;AAAA,MACtB,GAAG,UAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,MAC/C,GAAK,EAAA,UAAA;AAAA,KACN,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OverlayTrigger.js","sources":["../src/overlay/OverlayTrigger.tsx"],"sourcesContent":["import { cloneElement, isValidElement, ReactNode } from \"react\";\nimport { mergeProps, useForkRef } from \"@salt-ds/core\";\nimport { useOverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayTriggerProps {\n  children?: ReactNode;\n}\n\nexport function OverlayTrigger(props: OverlayTriggerProps) {\n  const { children } = props;\n\n  const { reference, getReferenceProps } = useOverlayContext();\n\n  const triggerRef = useForkRef(\n    // @ts-ignore error TS2339 missing property ref\n    isValidElement(children) ? children.ref : null,\n    reference\n  );\n\n  if (!children || !isValidElement(children)) {\n    return <>{children}</>;\n  }\n\n  return (\n    <>\n      {cloneElement(children, {\n        ...mergeProps(getReferenceProps(), children.props),\n        ref: triggerRef,\n      })}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;AAQO,SAAS,eAAe,KAA4B,EAAA;AACzD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA,CAAA;AAErB,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAE3D,EAAA,MAAM,UAAa,GAAA,UAAA;AAAA,IAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,IAC1C,SAAA;AAAA,GACF,CAAA;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAe,QAAQ,CAAG,EAAA;AAC1C,IAAO,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MAAG,QAAA;AAAA,KAAS,CAAA,CAAA;AAAA,GACrB;AAEA,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,IACG,uBAAa,QAAU,EAAA;AAAA,MACtB,GAAG,UAAA,CAAW,iBAAkB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,MACjD,GAAK,EAAA,UAAA;AAAA,KACN,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-types/calendar/useCalendar.d.ts

@@ -0,0 +1,57 @@
+import { DateValue } from "@internationalized/date";
+import { SyntheticEvent } from "react";
+import { UseMultiSelectionCalendarProps, UseOffsetSelectionCalendarProps, UseRangeSelectionCalendarProps, UseSingleSelectionCalendarProps } from "./useSelection";
+interface BaseUseCalendarProps {
+    defaultVisibleMonth?: DateValue;
+    onVisibleMonthChange?: (event: SyntheticEvent, visibleMonth: DateValue) => void;
+    isDayUnselectable?: (date: DateValue) => string | false | void;
+    isDayHighlighted?: (date: DateValue) => string | false | void;
+    isDayDisabled?: (date: DateValue) => boolean;
+    visibleMonth?: DateValue;
+    hideOutOfRangeDates?: boolean;
+    hideYearDropdown?: boolean;
+    minDate?: DateValue;
+    maxDate?: DateValue;
+}
+export declare type useCalendarProps = (Omit<UseSingleSelectionCalendarProps, "isDaySelectable"> | Omit<UseMultiSelectionCalendarProps, "isDaySelectable"> | Omit<UseRangeSelectionCalendarProps, "isDaySelectable"> | Omit<UseOffsetSelectionCalendarProps, "isDaySelectable">) & BaseUseCalendarProps;
+export declare function useCalendar(props: useCalendarProps): {
+    state: {
+        selectedDate: import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | {
+            startDate?: DateValue | undefined;
+            endDate?: DateValue | undefined;
+        } | {
+            startDate?: DateValue | undefined;
+            endDate?: DateValue | undefined;
+        } | DateValue[] | null | undefined;
+        hoveredDate: import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | null | undefined;
+        visibleMonth: DateValue;
+        focusedDate: DateValue;
+        minDate: DateValue | undefined;
+        maxDate: DateValue | undefined;
+        selectionVariant: "offset" | "range" | "default" | "multiselect";
+        hideOutOfRangeDates: boolean | undefined;
+        calendarFocused: boolean;
+    };
+    helpers: {
+        setSelectedDate: (event: SyntheticEvent<HTMLButtonElement, Event>, newSelectedDate: DateValue) => void;
+        isSelected: (date: DateValue) => boolean;
+        setHoveredDate: (event: SyntheticEvent<Element, Event>, date: DateValue | null) => void;
+        isHovered: (date: DateValue) => boolean;
+        isSelectedSpan: (date: DateValue) => boolean;
+        isHoveredSpan: (date: DateValue) => boolean;
+        isSelectedStart: (date: DateValue) => boolean;
+        isSelectedEnd: (date: DateValue) => boolean;
+        isHoveredOffset: (date: DateValue) => boolean;
+        setVisibleMonth: (event: SyntheticEvent, newVisibleMonth: DateValue) => void;
+        setFocusedDate: (event: SyntheticEvent, date: DateValue) => void;
+        setCalendarFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        isDayUnselectable: (date: DateValue) => string | false | void;
+        isDayHighlighted: (date: DateValue) => string | false | void;
+        isDayDisabled: (date: DateValue) => boolean;
+        isDayVisible: (date: DateValue) => boolean;
+        isOutsideAllowedDates: (date: DateValue) => boolean;
+        isOutsideAllowedMonths: (date: DateValue) => boolean;
+        isOutsideAllowedYears: (date: DateValue) => boolean;
+    };
+};
+export {};

package/dist-types/calendar/useSelection.d.ts

@@ -10,14 +10,14 @@ interface BaseUseSelectionCalendarProps<SelectionVariantType> {
 }
 declare type SingleSelectionValueType = DateValue;
 declare type MultiSelectionValueType = DateValue[];
-interface RangeSelectionValueType {
+declare type RangeSelectionValueType = {
     startDate?: DateValue;
     endDate?: DateValue;
-}
-interface OffsetSelectionValueType {
+};
+declare type OffsetSelectionValueType = {
     startDate?: DateValue;
     endDate?: DateValue;
-}
+};
 export interface UseOffsetSelectionCalendarProps extends Omit<BaseUseSelectionCalendarProps<OffsetSelectionValueType>, "startDateOffset" | "endDateOffset"> {
     selectionVariant: "offset";
     startDateOffset?: (date: DateValue) => DateValue;

package/dist-types/index.d.ts

@@ -33,7 +33,6 @@ export * from "./portal";
 export * from "./query-input";
 export * from "./responsive";
 export * from "./search-input";
-export * from "./segmented-button-group";
 export * from "./skip-link";
 export * from "./slider";
 export * from "./stepped-tracker";

package/dist-types/overlay/Overlay.d.ts

@@ -1,8 +1,13 @@
-import { ComponentPropsWithoutRef, SyntheticEvent } from "react";
+import { ComponentPropsWithoutRef } from "react";
 export interface OverlayProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Display or hide the component.
+     */
     open?: boolean;
-    onOpenChange?: (event: SyntheticEvent, newOpen: boolean) => void;
+    /**
+     * Callback function triggered when open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
     placement?: "top" | "bottom" | "left" | "right";
-    onClose?: (event: SyntheticEvent) => void;
 }
-export declare const Overlay: import("react").ForwardRefExoticComponent<OverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Overlay: ({ children, open, onOpenChange, placement: placementProp, }: OverlayProps) => JSX.Element;

package/dist-types/overlay/OverlayContext.d.ts

@@ -1,5 +1,4 @@
-import { FloatingArrowProps, FloatingContext, Placement, ReferenceType, Strategy } from "@floating-ui/react";
-import { SyntheticEvent } from "react";
+import { FloatingArrowProps, FloatingContext, ReferenceType, Strategy } from "@floating-ui/react";
 declare type FloatingStyleProps = {
     top: number;
     left: number;
@@ -8,16 +7,12 @@ declare type FloatingStyleProps = {
     height?: number;
 };
 export interface OverlayContextValue {
-    id: string;
     openState: boolean;
-    setOpen: (event: SyntheticEvent, newOpen: boolean) => void;
     floatingStyles: FloatingStyleProps;
-    placement: Placement;
     arrowProps: FloatingArrowProps;
     context: FloatingContext;
     reference?: (node: ReferenceType | null) => void;
     floating?: (node: HTMLElement | null) => void;
-    handleCloseButton: (event: SyntheticEvent) => void;
     getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
 }