@entry-ui/qwik 0.6.0 → 0.7.0

package/lib/components/collapsible/parts/collapsible-panel/collapsible-panel.qwik.mjs

@@ -10,23 +10,18 @@ import { warn } from "../../../../_internal/utilities/warn/warn.qwik.mjs";
 import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
 import { useCollapsibleRootContext } from "../../contexts/collapsible-root-context/collapsible-root-context.qwik.mjs";
 const CollapsiblePanel = component$((props) => {
-  const { as = "div", ref: _ref, id, hiddenUntilFound = false, onOpenChangeComplete$, onBeforematch$, style, ...others } = props;
+  const { as = "div", ref: _ref, id, hiddenUntilFound: _hiddenUntilFound = false, onOpenChangeComplete$, onBeforematch$, style, ...others } = props;
   const { open, setOpen$, disabled, panelId, triggerId } = useCollapsibleRootContext();
   const ref = useSignal(void 0);
   const hidden = useSignal(!open.value);
   const state = useSignal(open.value ? "open" : "closed");
-  const height = useSignal(open.value ? "auto" : "0px");
+  const height = useSignal(open.value ? "auto" : _hiddenUntilFound ? disabled.value ? "0px" : "none" : "0px");
+  const isBeforeMatch = useSignal(false);
   const preventInitialAnimation = useSignal(true);
+  const hiddenUntilFound = useComputed$(() => disabled.value ? false : _hiddenUntilFound);
   const mergedStyles = useComputed$(() => mergeStyles([
     {
-      display: hidden.value ? hiddenUntilFound ? void 0 : "none" : void 0,
-      contentVisibility: hidden.value ? hiddenUntilFound ? "hidden" : void 0 : void 0,
-      // When using hidden="until-found", the panel automatically opens when a search
-      // match occurs. However, Chromium-based browsers (like Chrome) will fail to
-      // highlight the matched text if the element has an overflow value other than
-      // "visible". Firefox handles this regardless of the overflow setting, but we force
-      // visible here to ensure cross-browser consistency for the "Find-in-page" feature.
-      overflow: hidden.value ? hiddenUntilFound ? "visible" : void 0 : void 0,
+      display: hidden.value ? hiddenUntilFound.value ? void 0 : "none !important" : void 0,
       transitionDuration: preventInitialAnimation.value ? "0s" : void 0,
       animationDuration: preventInitialAnimation.value ? "0s" : void 0,
       "--entry-ui-qwik-collapsible-panel-height": height.value
@@ -38,11 +33,20 @@ const CollapsiblePanel = component$((props) => {
     onMount$: $(() => panelId.set$(id)),
     onUnmount$: $(() => panelId.delete$())
   });
+  useTask$(({ track }) => {
+    const isHiddenUntilFound = track(() => hiddenUntilFound.value);
+    const panelRef = ref.value;
+    if (isBrowser && panelRef) {
+      const panelHeight = open.value ? "auto" : isHiddenUntilFound ? "none" : "0px";
+      height.value = panelHeight;
+      panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", panelHeight);
+    }
+  });
   useTask$(({ track, cleanup }) => {
     const isOpen = track(() => open.value);
     const panelRef = ref.value;
     if (isBrowser && panelRef) {
-      if (preventInitialAnimation.value) {
+      if (preventInitialAnimation.value && !isBeforeMatch.value) {
         preventInitialAnimation.value = false;
         panelRef.style.removeProperty("transition-duration");
         panelRef.style.removeProperty("animation-duration");
@@ -50,17 +54,31 @@ const CollapsiblePanel = component$((props) => {
       if (isOpen) {
         hidden.value = false;
         panelRef.removeAttribute("hidden");
-        if (hiddenUntilFound) {
-          panelRef.style.removeProperty("content-visibility");
-          panelRef.style.removeProperty("overflow");
+        if (hiddenUntilFound.value) {
+          isBeforeMatch.value = false;
         } else {
           panelRef.style.removeProperty("display");
         }
         state.value = "open";
         panelRef.setAttribute("data-state", "open");
+        const { animationDuration: animationDuration2, transitionDuration: transitionDuration2 } = getComputedStyle(panelRef);
         const panelHeight = getHiddenElementHeight(panelRef);
-        height.value = `${panelHeight}px`;
-        panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
+        if (animationDuration2 === "0s" && transitionDuration2 !== "0s") {
+          if (height.value === "none") {
+            height.value = "0px";
+            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "0px");
+            setTimeout(() => {
+              height.value = `${panelHeight}px`;
+              panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
+            }, 0);
+          } else {
+            height.value = `${panelHeight}px`;
+            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
+          }
+        } else {
+          height.value = `${panelHeight}px`;
+          panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", `${panelHeight}px`);
+        }
       } else {
         state.value = "closed";
         panelRef.setAttribute("data-state", "closed");
@@ -89,8 +107,13 @@ const CollapsiblePanel = component$((props) => {
           panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "auto");
         } else {
           hidden.value = true;
-          height.value = "0px";
-          panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "0px");
+          if (hiddenUntilFound.value) {
+            height.value = "none";
+            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "none");
+          } else {
+            height.value = "0px";
+            panelRef.style.setProperty("--entry-ui-qwik-collapsible-panel-height", "0px");
+          }
         }
         if (onOpenChangeComplete$) {
           onOpenChangeComplete$(isOpen);
@@ -128,18 +151,17 @@ const CollapsiblePanel = component$((props) => {
     }
   });
   const handleBeforeMatchSync$ = sync$((event) => {
-    event.preventDefault();
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented) {
+      event.preventDefault();
+    }
   });
-  const handleBeforeMatch$ = $((_, currentTarget) => {
-    setOpen$(true);
-    if ("scrollIntoViewIfNeeded" in currentTarget) {
-      currentTarget.scrollIntoViewIfNeeded(true);
-    } else {
-      currentTarget.scrollIntoView({
-        behavior: "auto",
-        block: "center",
-        inline: "nearest"
-      });
+  const handleBeforeMatch$ = $((event) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented) {
+      isBeforeMatch.value = true;
+      preventInitialAnimation.value = true;
+      setOpen$(true);
     }
   });
   return /* @__PURE__ */ jsx(Primitive.div, {
@@ -149,7 +171,8 @@ const CollapsiblePanel = component$((props) => {
       ref
     ]),
     id: panelId.id.value,
-    hidden: hidden.value ? hiddenUntilFound ? "until-found" : "hidden" : void 0,
+    role: triggerId.id.value ? "group" : void 0,
+    hidden: hidden.value ? hiddenUntilFound.value ? "until-found" : "hidden" : void 0,
     "aria-labelledby": triggerId.id.value,
     "data-entry-ui-qwik-collapsible-panel": "",
     "data-state": state.value,

package/lib/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './accordion';
 export * from './alert';
 export * from './collapsible';
 export * from './separator';

package/lib/index.qwik.mjs

@@ -1,9 +1,13 @@
-import * as index from "./components/alert/parts/index.qwik.mjs";
-import * as index$1 from "./components/collapsible/parts/index.qwik.mjs";
+import * as index from "./components/accordion/parts/index.qwik.mjs";
+import { useAccordionRootContext } from "./components/accordion/hooks/use-accordion-root-context/use-accordion-root-context.qwik.mjs";
+import { useAccordionItemContext } from "./components/accordion/hooks/use-accordion-item-context/use-accordion-item-context.qwik.mjs";
+import { useAccordionItemTriggerContext } from "./components/accordion/hooks/use-accordion-item-trigger-context/use-accordion-item-trigger-context.qwik.mjs";
+import * as index$1 from "./components/alert/parts/index.qwik.mjs";
+import * as index$2 from "./components/collapsible/parts/index.qwik.mjs";
 import { useCollapsibleRootContext } from "./components/collapsible/hooks/use-collapsible-root-context/use-collapsible-root-context.qwik.mjs";
 import { useCollapsibleTriggerContext } from "./components/collapsible/hooks/use-collapsible-trigger-context/use-collapsible-trigger-context.qwik.mjs";
-import * as index$2 from "./components/separator/parts/index.qwik.mjs";
-import * as index$3 from "./components/toggle/parts/index.qwik.mjs";
+import * as index$3 from "./components/separator/parts/index.qwik.mjs";
+import * as index$4 from "./components/toggle/parts/index.qwik.mjs";
 import { useToggleRootContext } from "./components/toggle/hooks/use-toggle-root-context/use-toggle-root-context.qwik.mjs";
 import { useBoolean } from "./hooks/use-boolean/use-boolean.qwik.mjs";
 import { useControllable } from "./hooks/use-controllable/use-controllable.qwik.mjs";
@@ -14,13 +18,17 @@ import { makeEventPreventable } from "./utilities/make-event-preventable/make-ev
 import { mergeRefs } from "./utilities/merge-refs/merge-refs.qwik.mjs";
 import { mergeStyles } from "./utilities/merge-styles/merge-styles.qwik.mjs";
 export {
-  index as Alert,
-  index$1 as Collapsible,
-  index$2 as Separator,
-  index$3 as Toggle,
+  index as Accordion,
+  index$1 as Alert,
+  index$2 as Collapsible,
+  index$3 as Separator,
+  index$4 as Toggle,
   makeEventPreventable,
   mergeRefs,
   mergeStyles,
+  useAccordionItemContext,
+  useAccordionItemTriggerContext,
+  useAccordionRootContext,
   useBoolean,
   useCollapsibleRootContext,
   useCollapsibleTriggerContext,

package/lib/utilities/merge-refs/merge-refs.d.ts

@@ -1,6 +1,6 @@
 import type { PossibleRef } from './merge-refs.types';
 /**
- * Combines multiple references into a single callback ref.
+ * Merges multiple references into a single callback ref.
  *
  * This utility function allows you to assign a single DOM element to multiple
  * reference handlers (both Qwik Signals and callback functions). It is particularly

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entry-ui/qwik",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/ZAHON/entry-ui#readme",
@@ -15,6 +15,10 @@
       "types": "./lib/index.d.ts",
       "import": "./lib/index.qwik.mjs"
     },
+    "./accordion": {
+      "types": "./lib/components/accordion/index.d.ts",
+      "import": "./lib/components/accordion/index.qwik.mjs"
+    },
     "./alert": {
       "types": "./lib/components/alert/index.d.ts",
       "import": "./lib/components/alert/index.qwik.mjs"
@@ -104,7 +108,7 @@
     "qwik": "qwik"
   },
   "dependencies": {
-    "@entry-ui/utilities": "^0.5.0"
+    "@entry-ui/utilities": "^0.6.0"
   },
   "devDependencies": {
     "@entry-ui/eslint": "workspace:*",