sit-onyx 1.1.0-dev-20250930114848 → 1.1.0

package/dist/components/OnyxBasicPopover/OnyxBasicPopover.d.vue.ts

@@ -49,9 +49,9 @@ declare const __VLS_component: import('vue').DefineComponent<OnyxBasicPopoverPro
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     role: "menu" | "listbox" | "tree" | "grid" | "dialog";
+    sticky: boolean;
     alignment: import('../../composables/useOpenAlignment.js', { with: { "resolution-mode": "import" } }).OpenAlignment | "auto";
     position: import('../../composables/useAnchorPositionPolyfill.js', { with: { "resolution-mode": "import" } }).AnchorPosition | "auto";
-    clipping: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     popoverWrapper: HTMLDivElement;
     popover: HTMLDivElement;

package/dist/components/OnyxBasicPopover/types.d.ts

@@ -35,5 +35,5 @@ export type OnyxBasicPopoverProps = {
      */
     role?: "menu" | "listbox" | "tree" | "grid" | "dialog";
     /** If true, the popover remains visible within the viewport even if its parent element scrolls out of view. */
-    clipping?: boolean;
+    sticky?: boolean;
 };

package/dist/components/OnyxDialog/OnyxDialog.d.vue.ts

@@ -57,8 +57,8 @@ declare const __VLS_component: import('vue').DefineComponent<OnyxDialogProps, {}
 }, string, import('vue').PublicProps, Readonly<OnyxDialogProps> & Readonly<{
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
+    sticky: boolean;
     open: boolean | null;
-    clipping: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/composables/{useClipping.d.ts → useSticky.d.ts}

@@ -1,16 +1,16 @@
 import { CSSProperties, Ref } from 'vue';
 import { AnchorPosition } from './useAnchorPositionPolyfill.js';
 import { OpenDirection } from './useOpenDirection.js';
-export type UseClippingOptions = {
+export type UseStickyOptions = {
     popoverRef: Ref<HTMLElement | null>;
     popoverWrapperRef: Ref<HTMLElement | null>;
     popoverPosition: Ref<AnchorPosition | OpenDirection>;
     isVisible: Ref<boolean>;
-    clipping: Ref<boolean>;
+    sticky: Ref<boolean>;
 };
-export declare function useClipping(options: UseClippingOptions): {
-    clippingStyles: Ref<CSSProperties | undefined, CSSProperties | undefined>;
+export declare function useSticky(options: UseStickyOptions): {
+    stickyStyles: Ref<CSSProperties | undefined, CSSProperties | undefined>;
     scrolledOut: Ref<OpenDirection | undefined, OpenDirection | undefined>;
-    isClipping: Ref<boolean, boolean>;
+    isSticky: Ref<boolean, boolean>;
     checkVisibilityOnScroll: () => void;
 };

package/dist/index.esm-bundler.js

@@ -2296,82 +2296,6 @@ const useAnchorPositionPolyfill = ({
     useragentSupportsAnchorApi
   };
 };
-function useClipping(options) {
-  const clippingStyles = ref();
-  const scrolledOut = ref();
-  const isClipping = ref(false);
-  const checkVisibilityOnScroll = () => {
-    const MIN_DISTANCE_TO_BORDER = 16;
-    const MARGIN = 8;
-    if (!options.popoverRef.value || !options.popoverWrapperRef.value || !options.isVisible.value)
-      return;
-    if (isClipping.value) {
-      const popoverRect = options.popoverRef.value.getBoundingClientRect();
-      const wrapperRect = options.popoverWrapperRef.value.getBoundingClientRect();
-      const requiredHeight = popoverRect.height + MIN_DISTANCE_TO_BORDER + MARGIN;
-      if (options.popoverPosition.value.includes("top")) {
-        if (scrolledOut.value === "top" && wrapperRect.top > requiredHeight) {
-          isClipping.value = false;
-          return;
-        }
-        if (scrolledOut.value === "bottom" && wrapperRect.top + MARGIN < window.innerHeight) {
-          isClipping.value = false;
-          return;
-        }
-      } else if (options.popoverPosition.value.includes("bottom")) {
-        if (scrolledOut.value === "top" && wrapperRect.bottom > MARGIN) {
-          isClipping.value = false;
-          return;
-        }
-        if (scrolledOut.value === "bottom" && window.innerHeight - wrapperRect.bottom > requiredHeight) {
-          isClipping.value = false;
-          return;
-        }
-      } else {
-        if (scrolledOut.value === "top" && wrapperRect.top + MIN_DISTANCE_TO_BORDER > popoverRect.height) {
-          isClipping.value = false;
-          return;
-        }
-        if (scrolledOut.value === "bottom" && wrapperRect.bottom + MIN_DISTANCE_TO_BORDER < window.innerHeight) {
-          isClipping.value = false;
-          return;
-        }
-      }
-    } else {
-      const rect = options.popoverRef.value.getBoundingClientRect();
-      const isTooHigh = rect.top < MIN_DISTANCE_TO_BORDER;
-      const isTooLow = rect.bottom > window.innerHeight - MIN_DISTANCE_TO_BORDER;
-      if (isTooHigh || isTooLow) {
-        isClipping.value = true;
-        if (isTooHigh) {
-          scrolledOut.value = "top";
-          clippingStyles.value = { left: rect.left + "px", top: "var(--onyx-density-md)" };
-        } else if (isTooLow) {
-          scrolledOut.value = "bottom";
-          clippingStyles.value = { left: rect.left + "px", bottom: "var(--onyx-density-md)" };
-        }
-      }
-    }
-  };
-  const disableClipping = computed(() => {
-    return !options.clipping.value || !options.isVisible.value;
-  });
-  useGlobalEventListener({
-    type: "scroll",
-    listener: () => checkVisibilityOnScroll(),
-    disabled: disableClipping
-  });
-  useGlobalEventListener({
-    type: "resize",
-    listener: () => checkVisibilityOnScroll(),
-    disabled: disableClipping
-  });
-  onMounted(async () => {
-    await nextTick();
-    if (!disableClipping.value) checkVisibilityOnScroll();
-  });
-  return { clippingStyles, scrolledOut, isClipping, checkVisibilityOnScroll };
-}
 const useOpenAlignment = (element, tooltipElement, defaultPosition = "center") => {
   const minMargin = 16;
   const openAlignment = ref(defaultPosition);
@@ -2451,6 +2375,82 @@ const findParentWithHiddenOverflow = (element) => {
   }
   return element.parentElement ? findParentWithHiddenOverflow(element.parentElement) : void 0;
 };
+function useSticky(options) {
+  const stickyStyles = ref();
+  const scrolledOut = ref();
+  const isSticky = ref(false);
+  const checkVisibilityOnScroll = () => {
+    const MIN_DISTANCE_TO_BORDER = 16;
+    const MARGIN = 8;
+    if (!options.popoverRef.value || !options.popoverWrapperRef.value || !options.isVisible.value)
+      return;
+    if (isSticky.value) {
+      const popoverRect = options.popoverRef.value.getBoundingClientRect();
+      const wrapperRect = options.popoverWrapperRef.value.getBoundingClientRect();
+      const requiredHeight = popoverRect.height + MIN_DISTANCE_TO_BORDER + MARGIN;
+      if (options.popoverPosition.value.includes("top")) {
+        if (scrolledOut.value === "top" && wrapperRect.top > requiredHeight) {
+          isSticky.value = false;
+          return;
+        }
+        if (scrolledOut.value === "bottom" && wrapperRect.top + MARGIN < window.innerHeight) {
+          isSticky.value = false;
+          return;
+        }
+      } else if (options.popoverPosition.value.includes("bottom")) {
+        if (scrolledOut.value === "top" && wrapperRect.bottom > MARGIN) {
+          isSticky.value = false;
+          return;
+        }
+        if (scrolledOut.value === "bottom" && window.innerHeight - wrapperRect.bottom > requiredHeight) {
+          isSticky.value = false;
+          return;
+        }
+      } else {
+        if (scrolledOut.value === "top" && wrapperRect.top + MIN_DISTANCE_TO_BORDER > popoverRect.height) {
+          isSticky.value = false;
+          return;
+        }
+        if (scrolledOut.value === "bottom" && wrapperRect.bottom + MIN_DISTANCE_TO_BORDER < window.innerHeight) {
+          isSticky.value = false;
+          return;
+        }
+      }
+    } else {
+      const rect = options.popoverRef.value.getBoundingClientRect();
+      const isTooHigh = rect.top < MIN_DISTANCE_TO_BORDER;
+      const isTooLow = rect.bottom > window.innerHeight - MIN_DISTANCE_TO_BORDER;
+      if (isTooHigh || isTooLow) {
+        isSticky.value = true;
+        if (isTooHigh) {
+          scrolledOut.value = "top";
+          stickyStyles.value = { left: rect.left + "px", top: "var(--onyx-density-md)" };
+        } else if (isTooLow) {
+          scrolledOut.value = "bottom";
+          stickyStyles.value = { left: rect.left + "px", bottom: "var(--onyx-density-md)" };
+        }
+      }
+    }
+  };
+  const disableSticky = computed(() => {
+    return !options.sticky.value || !options.isVisible.value;
+  });
+  useGlobalEventListener({
+    type: "scroll",
+    listener: () => checkVisibilityOnScroll(),
+    disabled: disableSticky
+  });
+  useGlobalEventListener({
+    type: "resize",
+    listener: () => checkVisibilityOnScroll(),
+    disabled: disableSticky
+  });
+  onMounted(async () => {
+    await nextTick();
+    if (!disableSticky.value) checkVisibilityOnScroll();
+  });
+  return { stickyStyles, scrolledOut, isSticky, checkVisibilityOnScroll };
+}
 const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   __name: "OnyxBasicPopover",
   props: {
@@ -2461,7 +2461,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
     fitParent: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
     role: { type: String, required: false, default: "dialog" },
-    clipping: { type: Boolean, required: false, default: false }
+    sticky: { type: Boolean, required: false, default: false }
   },
   emits: ["update:open"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -2532,12 +2532,12 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
       updateOpenDirection();
       updateOpenAlignment();
     };
-    const { clippingStyles, isClipping } = useClipping({
+    const { stickyStyles, isSticky } = useSticky({
       popoverRef,
       popoverWrapperRef,
       popoverPosition,
       isVisible,
-      clipping: computed(() => props.clipping)
+      sticky: toRef(() => props.sticky)
     });
     useGlobalEventListener({
       type: "resize",
@@ -2573,7 +2573,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
         [`onyx-basic-popover__dialog--alignment-${popoverAlignment.value}`]: true,
         "onyx-basic-popover__dialog--fitparent": props.fitParent,
         "onyx-basic-popover__dialog--disabled": disabled.value,
-        "onyx-basic-popover__dialog--clipping": isClipping.value,
+        "onyx-basic-popover__dialog--sticky": isSticky.value,
         "onyx-basic-popover__dialog--dont-support-anchor": !useragentSupportsAnchorApi.value
       };
     });
@@ -2604,7 +2604,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
         top: topPosition.value
       };
     });
-    const __returned__ = { props, emit, _isVisible, isVisible, popoverPosition, popoverAlignment, disabled, positionAndAlignment, popoverRef, popoverWrapperRef, openDirection, updateOpenDirection, openAlignment, updateOpenAlignment, leftPosition, topPosition, updateAnchorPositionPolyfill, useragentSupportsAnchorApi, width, handleOpening, updateDirections, clippingStyles, isClipping, toggle, trigger, id, anchorName, popoverClasses, popoverStyles };
+    const __returned__ = { props, emit, _isVisible, isVisible, popoverPosition, popoverAlignment, disabled, positionAndAlignment, popoverRef, popoverWrapperRef, openDirection, updateOpenDirection, openAlignment, updateOpenAlignment, leftPosition, topPosition, updateAnchorPositionPolyfill, useragentSupportsAnchorApi, width, handleOpening, updateDirections, stickyStyles, isSticky, toggle, trigger, id, anchorName, popoverClasses, popoverStyles };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -2626,7 +2626,7 @@ function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-label": $setup.props.label,
         popover: "manual",
         class: normalizeClass(["onyx-basic-popover__dialog", $setup.popoverClasses]),
-        style: normalizeStyle(!$setup.isClipping ? $setup.popoverStyles : $setup.clippingStyles)
+        style: normalizeStyle(!$setup.isSticky ? $setup.popoverStyles : $setup.stickyStyles)
       }, [
         renderSlot(_ctx.$slots, "content")
       ], 14, _hoisted_1$11)
@@ -8983,7 +8983,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     position: { type: String, required: false },
     alignment: { type: String, required: false },
     disabled: { type: Boolean, required: false },
-    clipping: { type: Boolean, required: false, default: true },
+    sticky: { type: Boolean, required: false, default: true },
     nonDismissible: { type: Boolean, required: false }
   },
   emits: ["update:open"],