sit-onyx 1.1.0-dev-20250930091245 → 1.1.0-dev-20250930101606

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

@@ -51,6 +51,7 @@ declare const __VLS_component: import('vue').DefineComponent<OnyxBasicPopoverPro
     role: "menu" | "listbox" | "tree" | "grid" | "dialog";
     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

@@ -34,4 +34,6 @@ export type OnyxBasicPopoverProps = {
      * @default "dialog"
      */
     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;
 };

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

@@ -58,6 +58,7 @@ declare const __VLS_component: import('vue').DefineComponent<OnyxDialogProps, {}
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
     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/components/OnyxListItem/OnyxListItem.d.vue.ts

@@ -19,8 +19,8 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<OnyxListItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxListItemProps> & Readonly<{}>, {
     disabled: boolean;
     checked: boolean;
-    selected: boolean;
     active: boolean;
+    selected: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLIElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -1,14 +1,14 @@
 import { OnyxResizeHandleProps } from './types.js';
 declare const _default: import('vue').DefineComponent<OnyxResizeHandleProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    end: () => any;
+    start: () => any;
     updateWidth: (width: number) => any;
     autoSize: () => any;
-    start: () => any;
-    end: () => any;
 }, string, import('vue').PublicProps, Readonly<OnyxResizeHandleProps> & Readonly<{
+    onEnd?: (() => any) | undefined;
+    onStart?: (() => any) | undefined;
     onUpdateWidth?: ((width: number) => any) | undefined;
     onAutoSize?: (() => any) | undefined;
-    onStart?: (() => any) | undefined;
-    onEnd?: (() => any) | undefined;
 }>, {
     min: number;
     alignment: import('./types.js', { with: { "resolution-mode": "import" } }).ResizeHandleAlignment;

package/dist/composables/useClipping.d.ts

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

package/dist/index.esm-bundler.js

@@ -2294,6 +2294,82 @@ 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);
@@ -2382,7 +2458,8 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
     alignment: { type: String, required: false, default: "auto" },
     fitParent: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
-    role: { type: String, required: false, default: "dialog" }
+    role: { type: String, required: false, default: "dialog" },
+    clipping: { type: Boolean, required: false, default: false }
   },
   emits: ["update:open"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -2413,13 +2490,16 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
     const positionAndAlignment = computed(() => {
       if (popoverPosition.value === "top" || popoverPosition.value === "bottom") {
         if (popoverAlignment.value === "left") {
-          return popoverPosition.value + " span-right";
+          return `${popoverPosition.value} span-right`;
         }
         if (popoverAlignment.value === "right") {
-          return popoverPosition.value + " span-left";
+          return `${popoverPosition.value} span-left`;
         }
       }
-      return popoverPosition.value;
+      if (popoverPosition.value.includes(" ")) {
+        return popoverPosition.value;
+      }
+      return `${popoverPosition.value} center`;
     });
     const popoverRef = useTemplateRef("popover");
     const popoverWrapperRef = useTemplateRef("popoverWrapper");
@@ -2450,6 +2530,13 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
       updateOpenDirection();
       updateOpenAlignment();
     };
+    const { clippingStyles, isClipping } = useClipping({
+      popoverRef,
+      popoverWrapperRef,
+      popoverPosition,
+      isVisible,
+      clipping: computed(() => props.clipping)
+    });
     useGlobalEventListener({
       type: "resize",
       listener: () => updateDirections()
@@ -2484,6 +2571,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--dont-support-anchor": !useragentSupportsAnchorApi.value
       };
     });
@@ -2514,7 +2602,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, 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, clippingStyles, isClipping, toggle, trigger, id, anchorName, popoverClasses, popoverStyles };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -2536,7 +2624,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.popoverStyles)
+        style: normalizeStyle(!$setup.isClipping ? $setup.popoverStyles : $setup.clippingStyles)
       }, [
         renderSlot(_ctx.$slots, "content")
       ], 14, _hoisted_1$11)
@@ -8742,6 +8830,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     position: { type: String, required: false },
     alignment: { type: String, required: false },
     disabled: { type: Boolean, required: false },
+    clipping: { type: Boolean, required: false, default: true },
     nonDismissible: { type: Boolean, required: false }
   },
   emits: ["update:open"],