Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@zag-js/range-slider

Package Overview
Dependencies
Maintainers
1
Versions
604
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.0.0-dev-20230913081107 to 0.0.0-dev-20230913193954

46

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>;

13

dist/index.js

@@ -647,6 +647,6 @@ "use strict";

invokeOnChangeStart(ctx2) {
ctx2.onChangeStart?.({ value: ctx2.value });
ctx2.onValueChangeStart?.({ value: ctx2.value });
},
invokeOnChangeEnd(ctx2) {
ctx2.onChangeEnd?.({ value: ctx2.value });
ctx2.onValueChangeEnd?.({ value: ctx2.value });
},

@@ -713,7 +713,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
});
}

@@ -720,0 +725,0 @@ };

22

package.json
{
"name": "@zag-js/range-slider",
"version": "0.0.0-dev-20230913081107",
"version": "0.0.0-dev-20230913193954",
"description": "Core logic for the range-slider widget implemented as a state machine",

@@ -30,12 +30,12 @@ "keywords": [

"dependencies": {
"@zag-js/anatomy": "0.0.0-dev-20230913081107",
"@zag-js/core": "0.0.0-dev-20230913081107",
"@zag-js/form-utils": "0.0.0-dev-20230913081107",
"@zag-js/dom-query": "0.0.0-dev-20230913081107",
"@zag-js/dom-event": "0.0.0-dev-20230913081107",
"@zag-js/utils": "0.0.0-dev-20230913081107",
"@zag-js/numeric-range": "0.0.0-dev-20230913081107",
"@zag-js/element-size": "0.0.0-dev-20230913081107",
"@zag-js/slider": "0.0.0-dev-20230913081107",
"@zag-js/types": "0.0.0-dev-20230913081107"
"@zag-js/anatomy": "0.0.0-dev-20230913193954",
"@zag-js/core": "0.0.0-dev-20230913193954",
"@zag-js/form-utils": "0.0.0-dev-20230913193954",
"@zag-js/dom-query": "0.0.0-dev-20230913193954",
"@zag-js/dom-event": "0.0.0-dev-20230913193954",
"@zag-js/utils": "0.0.0-dev-20230913193954",
"@zag-js/numeric-range": "0.0.0-dev-20230913193954",
"@zag-js/element-size": "0.0.0-dev-20230913193954",
"@zag-js/slider": "0.0.0-dev-20230913193954",
"@zag-js/types": "0.0.0-dev-20230913193954"
},

@@ -42,0 +42,0 @@ "devDependencies": {

13

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 @@ }

210

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"]
}
dist/index.d.mts

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc