@zag-js/range-slider - npm Package Compare versions

Comparing version 0.19.1 to 0.20.0

dist/index.d.ts

@@ -8,2 +8,9 @@ import * as _zag_js_anatomy from '@zag-js/anatomy';
 
+interface ValueChangeDetails {
+    value: number[];
+}
+interface FocusChangeDetails {
+    focusedIndex: number;
+    value: number[];
+}
 type ElementIds = Partial<{
@@ -19,3 +26,3 @@ root: string;
 }>;
-type PublicContext = DirectionProperty & CommonProperties & {
+interface PublicContext extends DirectionProperty, CommonProperties {
     /**
@@ -60,24 +67,15 @@ * The ids of the elements in the range slider. Useful for composition.
      */
-    onChange?(details: {
-        value: number[];
-    }): void;
+    onValueChange?(details: ValueChangeDetails): void;
     /**
      * Function invoked when the slider value change is started
      */
-    onChangeStart?(details: {
-        value: number[];
-    }): void;
+    onValueChangeStart?(details: ValueChangeDetails): void;
     /**
      * Function invoked when the slider value change is done
      */
-    onChangeEnd?(details: {
-        value: number[];
-    }): void;
+    onValueChangeEnd?(details: ValueChangeDetails): void;
     /**
      * Function invoked when the slider's focused index changes
      */
-    onFocusChange?(details: {
-        index: number;
-        value: number[];
-    }): void;
+    onFocusChange?(details: FocusChangeDetails): void;
     /**
@@ -120,3 +118,3 @@ * Function that returns a human readable value for the slider thumb
     } | null;
-};
+}
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
@@ -166,9 +164,13 @@ type ComputedContext = Readonly<{
 type PrivateContext = Context<{}>;
-type MachineContext = PublicContext & ComputedContext & PrivateContext;
-type MachineState = {
+interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
+}
+interface MachineState {
     value: "idle" | "dragging" | "focus";
-};
+}
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type MachineApi<T extends PropTypes = PropTypes> = {
+interface MarkerProps {
+    value: number;
+}
+interface MachineApi<T extends PropTypes = PropTypes> {
     /**
@@ -243,6 +245,4 @@ * The value of the slider.
     markerGroupProps: T["element"];
-    getMarkerProps({ value }: {
-        value: number;
-    }): T["element"];
-};
+    getMarkerProps(props: MarkerProps): T["element"];
+}
 
@@ -249,0 +249,0 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;

dist/index.js

@@ -321,2 +321,4 @@ "use strict";
         onPointerDown(event) {
+          if (!isInteractive)
+            return;
           send({ type: "THUMB_POINTER_DOWN", index });
@@ -646,6 +648,6 @@ event.stopPropagation();
         invokeOnChangeStart(ctx2) {
-          ctx2.onChangeStart?.({ value: ctx2.value });
+          ctx2.onValueChangeStart?.({ value: ctx2.value });
         },
         invokeOnChangeEnd(ctx2) {
-          ctx2.onChangeEnd?.({ value: ctx2.value });
+          ctx2.onValueChangeEnd?.({ value: ctx2.value });
         },
@@ -712,7 +714,12 @@ setClosestThumbIndex(ctx2, evt) {
   change: (ctx) => {
-    ctx.onChange?.({ value: Array.from(ctx.value) });
+    ctx.onValueChange?.({
+      value: Array.from(ctx.value)
+    });
     dom.dispatchChangeEvent(ctx);
   },
   focusChange: (ctx) => {
-    ctx.onFocusChange?.({ value: Array.from(ctx.value), index: ctx.focusedIndex });
+    ctx.onFocusChange?.({
+      value: Array.from(ctx.value),
+      focusedIndex: ctx.focusedIndex
+    });
   }
@@ -719,0 +726,0 @@ };

package.json

 {
   "name": "@zag-js/range-slider",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "Core logic for the range-slider widget implemented as a state machine",
@@ -30,12 +30,12 @@ "keywords": [
   "dependencies": {
-    "@zag-js/anatomy": "0.19.1",
-    "@zag-js/core": "0.19.1",
-    "@zag-js/form-utils": "0.19.1",
-    "@zag-js/dom-query": "0.19.1",
-    "@zag-js/dom-event": "0.19.1",
-    "@zag-js/utils": "0.19.1",
-    "@zag-js/numeric-range": "0.19.1",
-    "@zag-js/element-size": "0.19.1",
-    "@zag-js/slider": "0.19.1",
-    "@zag-js/types": "0.19.1"
+    "@zag-js/anatomy": "0.20.0",
+    "@zag-js/core": "0.20.0",
+    "@zag-js/form-utils": "0.20.0",
+    "@zag-js/dom-query": "0.20.0",
+    "@zag-js/dom-event": "0.20.0",
+    "@zag-js/utils": "0.20.0",
+    "@zag-js/numeric-range": "0.20.0",
+    "@zag-js/element-size": "0.20.0",
+    "@zag-js/slider": "0.20.0",
+    "@zag-js/types": "0.20.0"
   },
@@ -42,0 +42,0 @@ "devDependencies": {

src/range-slider.connect.ts

@@ -166,2 +166,3 @@ import {
         onPointerDown(event) {
+          if (!isInteractive) return
           send({ type: "THUMB_POINTER_DOWN", index })
@@ -168,0 +169,0 @@ event.stopPropagation()

src/range-slider.machine.ts

@@ -211,6 +211,6 @@ import { createMachine } from "@zag-js/core"
         invokeOnChangeStart(ctx) {
-          ctx.onChangeStart?.({ value: ctx.value })
+          ctx.onValueChangeStart?.({ value: ctx.value })
         },
         invokeOnChangeEnd(ctx) {
-          ctx.onChangeEnd?.({ value: ctx.value })
+          ctx.onValueChangeEnd?.({ value: ctx.value })
         },
@@ -278,7 +278,12 @@ setClosestThumbIndex(ctx, evt) {
   change: (ctx: MachineContext) => {
-    ctx.onChange?.({ value: Array.from(ctx.value) })
+    ctx.onValueChange?.({
+      value: Array.from(ctx.value),
+    })
     dom.dispatchChangeEvent(ctx)
   },
   focusChange: (ctx: MachineContext) => {
-    ctx.onFocusChange?.({ value: Array.from(ctx.value), index: ctx.focusedIndex })
+    ctx.onFocusChange?.({
+      value: Array.from(ctx.value),
+      focusedIndex: ctx.focusedIndex,
+    })
   },
@@ -285,0 +290,0 @@ }

src/range-slider.types.ts

 import type { StateMachine as S } from "@zag-js/core"
 import type { CommonProperties, Context, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
 
+/* -----------------------------------------------------------------------------
+ * Callback details
+ * -----------------------------------------------------------------------------*/
+
+export interface ValueChangeDetails {
+  value: number[]
+}
+
+export interface FocusChangeDetails {
+  focusedIndex: number
+  value: number[]
+}
+
+/* -----------------------------------------------------------------------------
+ * Machine context
+ * -----------------------------------------------------------------------------*/
+
 type ElementIds = Partial<{
@@ -15,91 +32,90 @@ root: string
 
-type PublicContext = DirectionProperty &
-  CommonProperties & {
-    /**
-     * The ids of the elements in the range slider. Useful for composition.
-     */
-    ids?: ElementIds
-    /**
-     * The aria-label of each slider thumb. Useful for providing an accessible name to the slider
-     */
-    "aria-label"?: string[]
-    /**
-     * The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
-     */
-    "aria-labelledby"?: string[]
-    /**
-     * The name associated with each slider thumb (when used in a form)
-     */
-    name?: string
-    /**
-     * The associate form of the underlying input element.
-     */
-    form?: string
-    /**
-     * The value of the range slider
-     */
-    value: number[]
-    /**
-     * Whether the slider is disabled
-     */
-    disabled?: boolean
-    /**
-     * Whether the slider is read-only
-     */
-    readOnly?: boolean
-    /**
-     * Whether the slider is invalid
-     */
-    invalid?: boolean
-    /**
-     * Function invoked when the value of the slider changes
-     */
-    onChange?(details: { value: number[] }): void
-    /**
-     * Function invoked when the slider value change is started
-     */
-    onChangeStart?(details: { value: number[] }): void
-    /**
-     * Function invoked when the slider value change is done
-     */
-    onChangeEnd?(details: { value: number[] }): void
-    /**
-     * Function invoked when the slider's focused index changes
-     */
-    onFocusChange?(details: { index: number; value: number[] }): void
-    /**
-     * Function that returns a human readable value for the slider thumb
-     */
-    getAriaValueText?(value: number, index: number): string
-    /**
-     * The minimum value of the slider
-     */
-    min: number
-    /**
-     * The maximum value of the slider
-     */
-    max: number
-    /**
-     * The step value of the slider
-     */
-    step: number
-    /**
-     * The minimum permitted steps between multiple thumbs.
-     */
-    minStepsBetweenThumbs: number
-    /**
-     * The orientation of the slider
-     */
-    orientation: "vertical" | "horizontal"
-    /**
-     * The alignment of the slider thumb relative to the track
-     * - `center`: the thumb will extend beyond the bounds of the slider track.
-     * - `contain`: the thumb will be contained within the bounds of the track.
-     */
-    thumbAlignment?: "contain" | "center"
-    /**
-     * The slider thumbs dimensions
-     */
-    thumbSize: { width: number; height: number } | null
-  }
+interface PublicContext extends DirectionProperty, CommonProperties {
+  /**
+   * The ids of the elements in the range slider. Useful for composition.
+   */
+  ids?: ElementIds
+  /**
+   * The aria-label of each slider thumb. Useful for providing an accessible name to the slider
+   */
+  "aria-label"?: string[]
+  /**
+   * The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
+   */
+  "aria-labelledby"?: string[]
+  /**
+   * The name associated with each slider thumb (when used in a form)
+   */
+  name?: string
+  /**
+   * The associate form of the underlying input element.
+   */
+  form?: string
+  /**
+   * The value of the range slider
+   */
+  value: number[]
+  /**
+   * Whether the slider is disabled
+   */
+  disabled?: boolean
+  /**
+   * Whether the slider is read-only
+   */
+  readOnly?: boolean
+  /**
+   * Whether the slider is invalid
+   */
+  invalid?: boolean
+  /**
+   * Function invoked when the value of the slider changes
+   */
+  onValueChange?(details: ValueChangeDetails): void
+  /**
+   * Function invoked when the slider value change is started
+   */
+  onValueChangeStart?(details: ValueChangeDetails): void
+  /**
+   * Function invoked when the slider value change is done
+   */
+  onValueChangeEnd?(details: ValueChangeDetails): void
+  /**
+   * Function invoked when the slider's focused index changes
+   */
+  onFocusChange?(details: FocusChangeDetails): void
+  /**
+   * Function that returns a human readable value for the slider thumb
+   */
+  getAriaValueText?(value: number, index: number): string
+  /**
+   * The minimum value of the slider
+   */
+  min: number
+  /**
+   * The maximum value of the slider
+   */
+  max: number
+  /**
+   * The step value of the slider
+   */
+  step: number
+  /**
+   * The minimum permitted steps between multiple thumbs.
+   */
+  minStepsBetweenThumbs: number
+  /**
+   * The orientation of the slider
+   */
+  orientation: "vertical" | "horizontal"
+  /**
+   * The alignment of the slider thumb relative to the track
+   * - `center`: the thumb will extend beyond the bounds of the slider track.
+   * - `contain`: the thumb will be contained within the bounds of the track.
+   */
+  thumbAlignment?: "contain" | "center"
+  /**
+   * The slider thumbs dimensions
+   */
+  thumbSize: { width: number; height: number } | null
+}
 
@@ -170,5 +186,5 @@ export type UserDefinedContext = RequiredBy<PublicContext, "id">
 
-export type MachineContext = PublicContext & ComputedContext & PrivateContext
+export interface MachineContext extends PublicContext, ComputedContext, PrivateContext {}
 
-export type MachineState = {
+export interface MachineState {
   value: "idle" | "dragging" | "focus"
@@ -181,3 +197,11 @@ }
 
-export type MachineApi<T extends PropTypes = PropTypes> = {
+/* -----------------------------------------------------------------------------
+ * Component API
+ * -----------------------------------------------------------------------------*/
+
+export interface MarkerProps {
+  value: number
+}
+
+export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
@@ -252,3 +276,3 @@ * The value of the slider.
   markerGroupProps: T["element"]
-  getMarkerProps({ value }: { value: number }): T["element"]
+  getMarkerProps(props: MarkerProps): T["element"]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

186862

increased by0.75%

Lines of code

2701

increased by1.43%

Dependency changes

• + Added@zag-js/anatomy@0.20.0(transitive)

• + Added@zag-js/core@0.20.0(transitive)

• + Added@zag-js/dom-event@0.20.0(transitive)

• + Added@zag-js/dom-query@0.20.0(transitive)

• + Added@zag-js/element-size@0.20.0(transitive)

• + Added@zag-js/form-utils@0.20.0(transitive)

• + Added@zag-js/mutation-observer@0.20.0(transitive)

• + Added@zag-js/numeric-range@0.20.0(transitive)

• + Added@zag-js/slider@0.20.0(transitive)

• + Added@zag-js/store@0.20.0(transitive)

• + Added@zag-js/text-selection@0.20.0(transitive)

• + Added@zag-js/types@0.20.0(transitive)

• + Added@zag-js/utils@0.20.0(transitive)

• - Removed@zag-js/anatomy@0.19.1(transitive)

• - Removed@zag-js/core@0.19.1(transitive)

• - Removed@zag-js/dom-event@0.19.1(transitive)

• - Removed@zag-js/dom-query@0.19.1(transitive)

• - Removed@zag-js/element-size@0.19.1(transitive)

• - Removed@zag-js/form-utils@0.19.1(transitive)

• - Removed@zag-js/mutation-observer@0.19.1(transitive)

• - Removed@zag-js/numeric-range@0.19.1(transitive)

• - Removed@zag-js/slider@0.19.1(transitive)

• - Removed@zag-js/store@0.19.1(transitive)

• - Removed@zag-js/text-selection@0.19.1(transitive)

• - Removed@zag-js/types@0.19.1(transitive)

• - Removed@zag-js/utils@0.19.1(transitive)

• Updated@zag-js/anatomy@0.20.0

• Updated@zag-js/core@0.20.0

• Updated@zag-js/dom-event@0.20.0

• Updated@zag-js/dom-query@0.20.0

• Updated@zag-js/element-size@0.20.0

• Updated@zag-js/form-utils@0.20.0

• Updated@zag-js/numeric-range@0.20.0

• Updated@zag-js/slider@0.20.0

• Updated@zag-js/types@0.20.0

• Updated@zag-js/utils@0.20.0