corvu - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

dist/primitives/drawer/index.d.ts

@@ -95,3 +95,3 @@ import * as solid_js from 'solid-js';
     /**
-     * Corvu drawers have logic to make dragging and scrolling work together. If you don't want this behavior or if you want to implement something yourself, you can disable it with this property.
+     * corvu drawers have logic to make dragging and scrolling work together. If you don't want this behavior or if you want to implement something yourself, you can disable it with this property.
      * @defaultValue `true`
@@ -98,0 +98,0 @@ */

dist/primitives/resizable/index.d.ts

@@ -23,2 +23,6 @@ import * as solid_js from 'solid-js';
     /**
+     * Callback fired when the handle starts being dragged. Can be prevented by calling `event.preventDefault`.
+     */
+    onDragStart?: (event: PointerEvent) => void;
+    /**
      * Callback fired when the handle is being dragged. Can be prevented by calling `event.preventDefault`.
@@ -28,2 +32,6 @@ */
     /**
+     * Callback fired when the handle stops being dragged.
+     */
+    onDragEnd?: (event: PointerEvent) => void;
+    /**
      * The `id` of the resizable context to use.
@@ -40,2 +48,16 @@ */
     children?: JSX.Element;
+    /** @hidden */
+    onMouseEnter?: JSX.EventHandlerUnion<HTMLElement, MouseEvent>;
+    /** @hidden */
+    onMouseLeave?: JSX.EventHandlerUnion<HTMLElement, MouseEvent>;
+    /** @hidden */
+    onKeyDown?: JSX.EventHandlerUnion<HTMLElement, KeyboardEvent>;
+    /** @hidden */
+    onKeyUp?: JSX.EventHandlerUnion<HTMLElement, KeyboardEvent>;
+    /** @hidden */
+    onFocus?: JSX.EventHandlerUnion<HTMLElement, FocusEvent>;
+    /** @hidden */
+    onBlur?: JSX.EventHandlerUnion<HTMLElement, FocusEvent>;
+    /** @hidden */
+    onPointerDown?: JSX.EventHandlerUnion<HTMLElement, PointerEvent>;
 }>;
@@ -42,0 +64,0 @@ /** Resizable handle.

dist/primitives/resizable/index.js

 import { size_default } from '../../chunk/F5HR5543.js';
-import { useKeyedContext, Dynamic_default, mergeRefs, dataIf, once_default, controllableSignal_default, some, createKeyedContext, isFunction, sortByDocumentPosition } from '../../chunk/63MU3UX6.js';
+import { useKeyedContext, Dynamic_default, mergeRefs, dataIf, once_default, controllableSignal_default, some, createKeyedContext, callEventHandler, isFunction, sortByDocumentPosition } from '../../chunk/63MU3UX6.js';
 import { createComponent, mergeProps as mergeProps$1, effect, memo, template } from 'solid-js/web';
@@ -276,3 +276,3 @@ import { createContext, useContext, mergeProps, splitProps, createSignal, createMemo, createEffect, onCleanup, on, Show, createUniqueId, untrack, batch } from 'solid-js';
 };
-var onDragEnd = () => {
+var onDragEnd = (event) => {
   batch(() => {
@@ -289,3 +289,3 @@ for (const handle of handles) {
         handle.setDragging(false);
-        handle.onDragEnd();
+        handle.onDragEnd(event);
         if (!handle.hovered() && !handle.hoveredAsIntersection()) {
@@ -377,3 +377,3 @@ handle.setActive(false);
   }, props);
-  const [localProps, otherProps] = splitProps(defaultedProps, ["startIntersection", "endIntersection", "altKey", "onDrag", "contextId", "as", "ref", "style", "disabled", "children"]);
+  const [localProps, otherProps] = splitProps(defaultedProps, ["startIntersection", "endIntersection", "altKey", "onDragStart", "onDrag", "onDragEnd", "contextId", "as", "ref", "style", "disabled", "children", "onMouseEnter", "onMouseLeave", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "onPointerDown"]);
   const [ref, setRef] = createSignal(null);
@@ -462,3 +462,3 @@ const [hoveredAsIntersection, setHoveredAsIntersection] = createSignal(false);
           });
-          localProps.onDrag(dragEvent);
+          localProps.onDrag?.(dragEvent);
           if (dragEvent.defaultPrevented)
@@ -469,3 +469,6 @@ return;
       },
-      onDragEnd: context().onDragEnd
+      onDragEnd: (event) => {
+        localProps.onDragEnd?.(event);
+        context().onDragEnd();
+      }
     };
@@ -481,2 +484,54 @@ globalHandleCallbacks = registerHandle(globalHandle);
   }));
+  const onMouseEnter = (e) => {
+    if (callEventHandler(localProps.onMouseEnter, e) || localProps.disabled === true)
+      return;
+    setHovered("handle");
+  };
+  const onMouseLeave = (e) => {
+    if (callEventHandler(localProps.onMouseLeave, e))
+      return;
+    setHovered(null);
+  };
+  const onKeyDown = (e) => {
+    if (callEventHandler(localProps.onKeyDown, e) || dragging())
+      return;
+    const element = ref();
+    if (!element)
+      return;
+    context().onKeyDown(element, e);
+  };
+  const onKeyUp = (e) => {
+    if (callEventHandler(localProps.onKeyUp, e) || e.key !== "Tab")
+      return;
+    setFocused(true);
+  };
+  const onFocus = (e) => {
+    if (callEventHandler(localProps.onFocus, e) || hovered())
+      return;
+    setFocused(true);
+    setActive(true);
+  };
+  const onBlur = (e) => {
+    if (callEventHandler(localProps.onBlur, e))
+      return;
+    setFocused(false);
+    if (hovered())
+      return;
+    setActive(false);
+  };
+  const onPointerDown = (e) => {
+    if (callEventHandler(localProps.onPointerDown, e))
+      return;
+    if (callEventHandler(localProps.onDragStart, e))
+      return;
+    const targetElement = e.target;
+    let target = "handle";
+    if (targetElement.hasAttribute("data-corvu-resizable-handle-start-intersection")) {
+      target = "startIntersection";
+    }
+    if (targetElement.hasAttribute("data-corvu-resizable-handle-end-intersection")) {
+      target = "endIntersection";
+    }
+    globalHandleCallbacks?.onDragStart(e, target);
+  };
   return createComponent(Dynamic_default, mergeProps$1({
@@ -490,40 +545,9 @@ get as() {
     },
-    onMouseEnter: () => localProps.disabled !== true && setHovered("handle"),
-    onMouseLeave: () => setHovered(null),
-    onKeyDown: (event) => {
-      if (dragging())
-        return;
-      const element = ref();
-      if (!element)
-        return;
-      context().onKeyDown(element, event);
-    },
-    onKeyUp: (event) => {
-      if (event.key !== "Tab")
-        return;
-      setFocused(true);
-    },
-    onFocus: () => {
-      if (hovered())
-        return;
-      setFocused(true);
-      setActive(true);
-    },
-    onBlur: () => {
-      setFocused(false);
-      if (hovered())
-        return;
-      setActive(false);
-    },
-    onPointerDown: (event) => {
-      const targetElement = event.target;
-      let target = "handle";
-      if (targetElement.hasAttribute("data-corvu-resizable-handle-start-intersection")) {
-        target = "startIntersection";
-      }
-      if (targetElement.hasAttribute("data-corvu-resizable-handle-end-intersection")) {
-        target = "endIntersection";
-      }
-      globalHandleCallbacks?.onDragStart(event, target);
-    },
+    onMouseEnter,
+    onMouseLeave,
+    onKeyDown,
+    onKeyUp,
+    onFocus,
+    onBlur,
+    onPointerDown,
     role: "separator",
@@ -560,2 +584,3 @@ get ["aria-controls"]() {
         "touch-action": "none",
+        "flex-shrink": 0,
         ...localProps.style
@@ -725,5 +750,5 @@ };
       if (collapsed2 && localProps.onCollapse !== void 0) {
-        localProps.onCollapse(instance.size());
+        localProps.onCollapse?.(instance.size());
       } else if (!collapsed2 && localProps.onExpand !== void 0) {
-        localProps.onExpand(instance.size());
+        localProps.onExpand?.(instance.size());
       }
@@ -1233,3 +1258,3 @@ }
     if (localProps.onSizesChange !== void 0) {
-      localProps.onSizesChange(sizes());
+      localProps.onSizesChange?.(sizes());
     }
@@ -1236,0 +1261,0 @@ });

dist/primitives/resizable/index.jsx

@@ -6,2 +6,3 @@ import {
   Dynamic_default,
+  callEventHandler,
   controllableSignal_default,
@@ -303,3 +304,3 @@ createKeyedContext,
 };
-var onDragEnd = () => {
+var onDragEnd = (event) => {
   batch(() => {
@@ -316,3 +317,3 @@ for (const handle of handles) {
         handle.setDragging(false);
-        handle.onDragEnd();
+        handle.onDragEnd(event);
         if (!handle.hovered() && !handle.hoveredAsIntersection()) {
@@ -412,3 +413,5 @@ handle.setActive(false);
     "altKey",
+    "onDragStart",
     "onDrag",
+    "onDragEnd",
     "contextId",
@@ -419,3 +422,10 @@ "as",
     "disabled",
-    "children"
+    "children",
+    "onMouseEnter",
+    "onMouseLeave",
+    "onKeyDown",
+    "onKeyUp",
+    "onFocus",
+    "onBlur",
+    "onPointerDown"
   ]);
@@ -511,3 +521,3 @@ const [ref, setRef] = createSignal(null);
           });
-          localProps.onDrag(dragEvent);
+          localProps.onDrag?.(dragEvent);
           if (dragEvent.defaultPrevented)
@@ -518,3 +528,6 @@ return;
       },
-      onDragEnd: context().onDragEnd
+      onDragEnd: (event) => {
+        localProps.onDragEnd?.(event);
+        context().onDragEnd();
+      }
     };
@@ -532,47 +545,66 @@ globalHandleCallbacks = registerHandle(globalHandle);
   );
+  const onMouseEnter = (e) => {
+    if (callEventHandler(localProps.onMouseEnter, e) || localProps.disabled === true)
+      return;
+    setHovered("handle");
+  };
+  const onMouseLeave = (e) => {
+    if (callEventHandler(localProps.onMouseLeave, e))
+      return;
+    setHovered(null);
+  };
+  const onKeyDown = (e) => {
+    if (callEventHandler(localProps.onKeyDown, e) || dragging())
+      return;
+    const element = ref();
+    if (!element)
+      return;
+    context().onKeyDown(element, e);
+  };
+  const onKeyUp = (e) => {
+    if (callEventHandler(localProps.onKeyUp, e) || e.key !== "Tab")
+      return;
+    setFocused(true);
+  };
+  const onFocus = (e) => {
+    if (callEventHandler(localProps.onFocus, e) || hovered())
+      return;
+    setFocused(true);
+    setActive(true);
+  };
+  const onBlur = (e) => {
+    if (callEventHandler(localProps.onBlur, e))
+      return;
+    setFocused(false);
+    if (hovered())
+      return;
+    setActive(false);
+  };
+  const onPointerDown = (e) => {
+    if (callEventHandler(localProps.onPointerDown, e))
+      return;
+    if (callEventHandler(localProps.onDragStart, e))
+      return;
+    const targetElement = e.target;
+    let target = "handle";
+    if (targetElement.hasAttribute(
+      "data-corvu-resizable-handle-start-intersection"
+    )) {
+      target = "startIntersection";
+    }
+    if (targetElement.hasAttribute("data-corvu-resizable-handle-end-intersection")) {
+      target = "endIntersection";
+    }
+    globalHandleCallbacks?.onDragStart(e, target);
+  };
   return <Dynamic_default
     as={localProps.as ?? DEFAULT_RESIZABLE_HANDLE_ELEMENT}
     ref={mergeRefs(setRef, localProps.ref)}
-    onMouseEnter={() => localProps.disabled !== true && setHovered("handle")}
-    onMouseLeave={() => setHovered(null)}
-    onKeyDown={(event) => {
-      if (dragging())
-        return;
-      const element = ref();
-      if (!element)
-        return;
-      context().onKeyDown(element, event);
-    }}
-    onKeyUp={(event) => {
-      if (event.key !== "Tab")
-        return;
-      setFocused(true);
-    }}
-    onFocus={() => {
-      if (hovered())
-        return;
-      setFocused(true);
-      setActive(true);
-    }}
-    onBlur={() => {
-      setFocused(false);
-      if (hovered())
-        return;
-      setActive(false);
-    }}
-    onPointerDown={(event) => {
-      const targetElement = event.target;
-      let target = "handle";
-      if (targetElement.hasAttribute(
-        "data-corvu-resizable-handle-start-intersection"
-      )) {
-        target = "startIntersection";
-      }
-      if (targetElement.hasAttribute(
-        "data-corvu-resizable-handle-end-intersection"
-      )) {
-        target = "endIntersection";
-      }
-      globalHandleCallbacks?.onDragStart(event, target);
-    }}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
+    onKeyDown={onKeyDown}
+    onKeyUp={onKeyUp}
+    onFocus={onFocus}
+    onBlur={onBlur}
+    onPointerDown={onPointerDown}
     role="separator"
@@ -592,2 +624,3 @@ aria-controls={ariaInformation()?.ariaControls}
       "touch-action": "none",
+      "flex-shrink": 0,
       ...localProps.style
@@ -765,5 +798,5 @@ }}
       if (collapsed2 && localProps.onCollapse !== void 0) {
-        localProps.onCollapse(instance.size());
+        localProps.onCollapse?.(instance.size());
       } else if (!collapsed2 && localProps.onExpand !== void 0) {
-        localProps.onExpand(instance.size());
+        localProps.onExpand?.(instance.size());
       }
@@ -1294,3 +1327,3 @@ }
     if (localProps.onSizesChange !== void 0) {
-      localProps.onSizesChange(sizes());
+      localProps.onSizesChange?.(sizes());
     }
@@ -1297,0 +1330,0 @@ });

package.json

 {
   "name": "corvu",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Unstyled, accessible and customizable UI primitives for SolidJS",

README.md

@@ -17,3 +17,3 @@ <div align="center">
 ## About
-Corvu is a collection of open source UI primitives for SolidJS. It offers:
+corvu is a collection of open source UI primitives for SolidJS. It offers:
 
@@ -20,0 +20,0 @@ - 🫥 Unstyled,

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

451811

0.58%

Lines of code

12739

0.64%

Number of medium supply chain risk alerts

0

-100%

No dependency changes