@solid-primitives/active-element - npm Package Compare versions

Comparing version 2.0.20 to 2.1.0

dist/index.d.ts

@@ -1,4 +0,3 @@
-import { JSX, Accessor } from 'solid-js';
-import { MaybeAccessor, Directive } from '@solid-primitives/utils';
-
+import { Accessor, JSX } from "solid-js";
+import { MaybeAccessor, Directive } from "@solid-primitives/utils";
 declare module "solid-js" {
@@ -11,3 +10,3 @@ namespace JSX {
 }
-type E = JSX.Element;
+export type E = JSX.Element;
 /**
@@ -24,3 +23,3 @@ * Attaches event listeners to window, listening for the changes of the `document.activeElement`.
  */
-declare function makeActiveElementListener(callback: (element: Element | null) => void): VoidFunction;
+export declare function makeActiveElementListener(callback: (element: Element | null) => void): VoidFunction;
 /**
@@ -34,3 +33,3 @@ * Provides reactive signal of `document.activeElement`. Check which element is currently focused.
  */
-declare function createActiveElement(): Accessor<Element | null>;
+export declare function createActiveElement(): Accessor<Element | null>;
 /**
@@ -49,3 +48,3 @@ * Attaches "blur" and "focus" event listeners to the element.
  */
-declare function makeFocusListener(target: Element, callback: (isActive: boolean) => void, useCapture?: boolean): VoidFunction;
+export declare function makeFocusListener(target: Element, callback: (isActive: boolean) => void, useCapture?: boolean): VoidFunction;
 /**
@@ -60,3 +59,3 @@ * Provides a signal representing element's focus state.
  */
-declare function createFocusSignal(target: MaybeAccessor<Element>): Accessor<boolean>;
+export declare function createFocusSignal(target: MaybeAccessor<Element>): Accessor<boolean>;
 /**
@@ -71,4 +70,2 @@ * A directive that notifies you when the element becomes active or inactive.
  */
-declare const focus: Directive<(isActive: boolean) => void>;
-
-export { E, createActiveElement, createFocusSignal, focus, makeActiveElementListener, makeFocusListener };
+export declare const focus: Directive<(isActive: boolean) => void>;

dist/index.js

@@ -1,53 +0,96 @@
-import { isServer } from 'solid-js/web';
-import { createHydratableSignal } from '@solid-primitives/utils';
-import { makeEventListener, createEventListener } from '@solid-primitives/event-listener';
-
-// src/index.ts
-var getActiveElement = () => document.activeElement === document.body ? null : document.activeElement;
-function makeActiveElementListener(callback) {
-  if (isServer) {
-    return () => void 0;
-  }
-  const handleChange = () => callback(getActiveElement());
-  const clear1 = makeEventListener(window, "blur", handleChange, true);
-  const clear2 = makeEventListener(window, "focus", handleChange, true);
-  return () => (clear1(), clear2());
+import { isServer } from "solid-js/web";
+import { createHydratableSignal } from "@solid-primitives/utils";
+import { makeEventListener, createEventListener } from "@solid-primitives/event-listener";
+const getActiveElement = () => document.activeElement === document.body ? null : document.activeElement;
+/**
+ * Attaches event listeners to window, listening for the changes of the `document.activeElement`.
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/active-element#makeActiveElementListener
+ * @param callback handle active element change
+ * @returns function to clear event listeners
+ * @example
+ * const [activeElement, setActiveElement] = createSignal(null);
+ * const clear = makeActiveElementListener(el => setActiveElement(el));
+ * // remove listeners (happens also on cleanup)
+ * clear();
+ */
+export function makeActiveElementListener(callback) {
+    if (isServer) {
+        return () => void 0;
+    }
+    const handleChange = () => callback(getActiveElement());
+    const clear1 = makeEventListener(window, "blur", handleChange, true);
+    const clear2 = makeEventListener(window, "focus", handleChange, true);
+    return () => (clear1(), clear2());
 }
-function createActiveElement() {
-  if (isServer) {
-    return () => null;
-  }
-  const [active, setActive] = createHydratableSignal(null, getActiveElement);
-  makeActiveElementListener(setActive);
-  return active;
+/**
+ * Provides reactive signal of `document.activeElement`. Check which element is currently focused.
+ *
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/active-element#createActiveElement
+ * @example
+ * const activeEl = createActiveElement()
+ * activeEl() // T: Element | null
+ */
+export function createActiveElement() {
+    if (isServer) {
+        return () => null;
+    }
+    const [active, setActive] = createHydratableSignal(null, getActiveElement);
+    makeActiveElementListener(setActive);
+    return active;
 }
-function makeFocusListener(target, callback, useCapture = true) {
-  if (isServer) {
-    return () => void 0;
-  }
-  const clear1 = makeEventListener(target, "blur", callback.bind(void 0, false), useCapture);
-  const clear2 = makeEventListener(target, "focus", callback.bind(void 0, true), useCapture);
-  return () => (clear1(), clear2());
+/**
+ * Attaches "blur" and "focus" event listeners to the element.
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/active-element#makeFocusListener
+ * @param target element
+ * @param callback handle focus change
+ * @param useCapture activates capturing, which allows to listen on events at the root that don't support bubbling.
+ * @returns function for clearing event listeners
+ * @example
+ * const [isFocused, setIsFocused] = createSignal(false)
+ * const clear = makeFocusListener(focused => setIsFocused(focused));
+ * // remove listeners (happens also on cleanup)
+ * clear();
+ */
+export function makeFocusListener(target, callback, useCapture = true) {
+    if (isServer) {
+        return () => void 0;
+    }
+    const clear1 = makeEventListener(target, "blur", callback.bind(void 0, false), useCapture);
+    const clear2 = makeEventListener(target, "focus", callback.bind(void 0, true), useCapture);
+    return () => (clear1(), clear2());
 }
-function createFocusSignal(target) {
-  if (isServer) {
-    return () => false;
-  }
-  const [isActive, setIsActive] = createHydratableSignal(
-    false,
-    () => document.activeElement === target
-  );
-  createEventListener(target, "blur", () => setIsActive(false), true);
-  createEventListener(target, "focus", () => setIsActive(true), true);
-  return isActive;
+/**
+ * Provides a signal representing element's focus state.
+ * @param target element or a reactive function returning one
+ * @returns boolean signal representing element's focus state
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/active-element#createFocusSignal
+ * @example
+ * const isFocused = createFocusSignal(() => el)
+ * isFocused() // T: boolean
+ */
+export function createFocusSignal(target) {
+    if (isServer) {
+        return () => false;
+    }
+    const [isActive, setIsActive] = createHydratableSignal(false, () => document.activeElement === target);
+    createEventListener(target, "blur", () => setIsActive(false), true);
+    createEventListener(target, "focus", () => setIsActive(true), true);
+    return isActive;
 }
-var focus = (target, props) => {
-  if (isServer) {
-    return;
-  }
-  const callback = props();
-  callback(document.activeElement === target);
-  makeFocusListener(target, callback);
+/**
+ * A directive that notifies you when the element becomes active or inactive.
+ *
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/active-element#focus
+ *
+ * @example
+ * const [active, setActive] = createSignal(false)
+ * <input use:focus={setActive} />
+ */
+export const focus = (target, props) => {
+    if (isServer) {
+        return;
+    }
+    const callback = props();
+    callback(document.activeElement === target);
+    makeFocusListener(target, callback);
 };
-
-export { createActiveElement, createFocusSignal, focus, makeActiveElementListener, makeFocusListener };

package.json

 {
   "name": "@solid-primitives/active-element",
-  "version": "2.0.20",
+  "version": "2.1.0",
   "description": "A reactive document.activeElement. Check which element is currently focused.",
@@ -30,3 +30,2 @@ "author": "Damian Tarnawski @thetarnav <[e-mail]>",
   "type": "module",
-  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -36,9 +35,6 @@ "browser": {},
   "exports": {
+    "@solid-primitives/source": "./src/index.ts",
     "import": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
-    },
-    "require": {
-      "types": "./dist/index.d.cts",
-      "default": "./dist/index.cjs"
     }
@@ -53,4 +49,4 @@ },
   "dependencies": {
-    "@solid-primitives/event-listener": "^2.3.3",
-    "@solid-primitives/utils": "^6.2.3"
+    "@solid-primitives/event-listener": "^2.4.0",
+    "@solid-primitives/utils": "^6.3.0"
   },
@@ -57,0 +53,0 @@ "peerDependencies": {

README.md

@@ -7,3 +7,2 @@ <p>
 
-[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
 [![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/active-element?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/active-element)
@@ -15,9 +14,9 @@ [![size](https://img.shields.io/npm/v/@solid-primitives/active-element?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/active-element)
 
-- [`makeActiveElementListener`](#makeActiveElementListener) - Listen for changes to the `document.activeElement`.
-- [`makeFocusListener`](#makeFocusListener) - Attaches "blur" and "focus" event listeners to the element.
+- [`makeActiveElementListener`](#makeactiveelementlistener) - Listen for changes to the `document.activeElement`.
+- [`makeFocusListener`](#makefocuslistener) - Attaches "blur" and "focus" event listeners to the element.
 
 ##### Reactive primitives:
 
-- [`createActiveElement`](#createActiveElement) - Provides reactive signal of `document.activeElement`.
-- [`createFocusSignal`](#createFocusSignal) - Provides a signal representing element's focus state.
+- [`createActiveElement`](#createactiveelement) - Provides reactive signal of `document.activeElement`.
+- [`createFocusSignal`](#createfocussignal) - Provides a signal representing element's focus state.
 
@@ -24,0 +23,0 @@ ##### Directives:

New 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

Worsened metrics

Total package byte prevSize

13752

decreased by-27.59%

Number of package files

5

decreased by-37.5%

Lines of code

161

decreased by-29.07%

Number of lines in readme file

156

decreased by-0.64%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@solid-primitives/event-listener@^2.4.0

• Updated@solid-primitives/utils@^6.3.0