@zag-js/number-input 0.0.0-dev-20220704163406 → 0.0.0-dev-20220708193601

package/dist/index.js

@@ -43,6 +43,22 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
@@ -75,6 +91,34 @@ var isMac = () => pt(/^Mac/) && !isTouchDevice;
 var isSafari = () => isApple() && vn(/apple/i);
 var isApple = () => pt(/mac|iphone|ipad|ipod/i);
 var isIos = () => isApple() && !isMac();
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function withRootHelpers(domUtils) {
+  const roots = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(roots.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = roots.getDoc(ctx).defaultView) != null ? _a : window;
+    }
+  };
+  return __spreadValues2(__spreadValues2({}, roots), domUtils);
+}
 function getNativeEvent(e) {
   var _a;
   return (_a = e.nativeEvent) != null ? _a : e;
@@ -241,43 +285,31 @@ function decimalOperation(a, op, b) {
 var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
 
 // src/number-input.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getWin: (ctx) => {
-    var _a;
-    return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
-  },
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
+var dom = withRootHelpers({
   getRootId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.uid}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.id}`;
   },
   getInputId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `number-input:${ctx.uid}:input`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `number-input:${ctx.id}:input`;
   },
   getIncButtonId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.incBtn) != null ? _b : `number-input:${ctx.uid}:inc-btn`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.incBtn) != null ? _b : `number-input:${ctx.id}:inc-btn`;
   },
   getDecButtonId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.decBtn) != null ? _b : `number-input:${ctx.uid}:dec-btn`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.decBtn) != null ? _b : `number-input:${ctx.id}:dec-btn`;
   },
   getScrubberId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.scrubber) != null ? _b : `number-input:${ctx.uid}:scrubber`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.scrubber) != null ? _b : `number-input:${ctx.id}:scrubber`;
   },
-  getCursorId: (ctx) => `number-input:${ctx.uid}:cursor`,
+  getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
   getLabelId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.uid}:label`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.id}:label`;
   },
   getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
   getIncButtonEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getIncButtonId(ctx)),
@@ -327,7 +359,7 @@ var dom = {
         </svg>`;
     doc.body.appendChild(el);
   }
-};
+});
 
 // src/number-input.utils.ts
 var utils = {
@@ -376,12 +408,14 @@ function connect(state, send, normalize) {
   const isFocused = state.hasTag("focus");
   const isInvalid = state.context.isOutOfRange || !!state.context.invalid;
   const isDisabled = !!state.context.disabled;
+  const isValueEmpty = state.context.isValueEmpty;
   const isIncrementDisabled = isDisabled || !state.context.canIncrement;
   const isDecrementDisabled = isDisabled || !state.context.canDecrement;
   const messages = state.context.messages;
   return {
     isFocused,
     isInvalid,
+    isValueEmpty,
     value: state.context.formattedValue,
     valueAsNumber: state.context.valueAsNumber,
     setValue(value) {
@@ -571,12 +605,11 @@ var callAll2 = (...fns) => (...a) => {
 
 // src/number-input.machine.ts
 var { not, and } = import_core.guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return (0, import_core.createMachine)({
     id: "number-input",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
-      uid: "",
       dir: "ltr",
       focusInputOnChange: true,
       clampValueOnBlur: true,
@@ -602,6 +635,7 @@ function machine(ctx = {}) {
       isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
       isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
       isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
+      isValueEmpty: (ctx2) => ctx2.value === "",
       canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
       canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
       valueText: (ctx2) => {
@@ -636,7 +670,7 @@ function machine(ctx = {}) {
         on: {
           SETUP: {
             target: "idle",
-            actions: ["setupDocument", "syncInputValue"]
+            actions: "syncInputValue"
           }
         }
       },
@@ -688,7 +722,7 @@ function machine(ctx = {}) {
               actions: ["clearValue", "clearHint"]
             },
             {
-              guard: and("clampOnBlur", not("isInRange")),
+              guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
               target: "idle",
               actions: ["clampValue", "clearHint"]
             },
@@ -778,6 +812,7 @@ function machine(ctx = {}) {
         var _a;
         return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
       },
+      isEmptyValue: (ctx2) => ctx2.isValueEmpty,
       isIncrementHint: (ctx2, evt) => {
         var _a;
         return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
@@ -841,13 +876,6 @@ function machine(ctx = {}) {
       }
     },
     actions: {
-      setupDocument: (ctx2, evt) => {
-        if (evt.doc)
-          ctx2.doc = (0, import_core.ref)(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = (0, import_core.ref)(evt.root);
-        ctx2.uid = evt.id;
-      },
       focusInput(ctx2) {
         if (!ctx2.focusInputOnChange)
           return;

package/dist/index.mjs

@@ -19,6 +19,22 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
@@ -51,6 +67,34 @@ var isMac = () => pt(/^Mac/) && !isTouchDevice;
 var isSafari = () => isApple() && vn(/apple/i);
 var isApple = () => pt(/mac|iphone|ipad|ipod/i);
 var isIos = () => isApple() && !isMac();
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function withRootHelpers(domUtils) {
+  const roots = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(roots.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = roots.getDoc(ctx).defaultView) != null ? _a : window;
+    }
+  };
+  return __spreadValues2(__spreadValues2({}, roots), domUtils);
+}
 function getNativeEvent(e) {
   var _a;
   return (_a = e.nativeEvent) != null ? _a : e;
@@ -217,43 +261,31 @@ function decimalOperation(a, op, b) {
 var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
 
 // src/number-input.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getWin: (ctx) => {
-    var _a;
-    return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
-  },
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
+var dom = withRootHelpers({
   getRootId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.uid}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.id}`;
   },
   getInputId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `number-input:${ctx.uid}:input`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `number-input:${ctx.id}:input`;
   },
   getIncButtonId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.incBtn) != null ? _b : `number-input:${ctx.uid}:inc-btn`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.incBtn) != null ? _b : `number-input:${ctx.id}:inc-btn`;
   },
   getDecButtonId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.decBtn) != null ? _b : `number-input:${ctx.uid}:dec-btn`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.decBtn) != null ? _b : `number-input:${ctx.id}:dec-btn`;
   },
   getScrubberId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.scrubber) != null ? _b : `number-input:${ctx.uid}:scrubber`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.scrubber) != null ? _b : `number-input:${ctx.id}:scrubber`;
   },
-  getCursorId: (ctx) => `number-input:${ctx.uid}:cursor`,
+  getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
   getLabelId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.uid}:label`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.id}:label`;
   },
   getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
   getIncButtonEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getIncButtonId(ctx)),
@@ -303,7 +335,7 @@ var dom = {
         </svg>`;
     doc.body.appendChild(el);
   }
-};
+});
 
 // src/number-input.utils.ts
 var utils = {
@@ -352,12 +384,14 @@ function connect(state, send, normalize) {
   const isFocused = state.hasTag("focus");
   const isInvalid = state.context.isOutOfRange || !!state.context.invalid;
   const isDisabled = !!state.context.disabled;
+  const isValueEmpty = state.context.isValueEmpty;
   const isIncrementDisabled = isDisabled || !state.context.canIncrement;
   const isDecrementDisabled = isDisabled || !state.context.canDecrement;
   const messages = state.context.messages;
   return {
     isFocused,
     isInvalid,
+    isValueEmpty,
     value: state.context.formattedValue,
     valueAsNumber: state.context.valueAsNumber,
     setValue(value) {
@@ -536,7 +570,7 @@ function connect(state, send, normalize) {
 }
 
 // src/number-input.machine.ts
-import { choose, createMachine, guards, ref } from "@zag-js/core";
+import { choose, createMachine, guards } from "@zag-js/core";
 
 // ../../utilities/core/dist/index.mjs
 var callAll2 = (...fns) => (...a) => {
@@ -547,12 +581,11 @@ var callAll2 = (...fns) => (...a) => {
 
 // src/number-input.machine.ts
 var { not, and } = guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return createMachine({
     id: "number-input",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
-      uid: "",
       dir: "ltr",
       focusInputOnChange: true,
       clampValueOnBlur: true,
@@ -578,6 +611,7 @@ function machine(ctx = {}) {
       isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
       isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
       isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
+      isValueEmpty: (ctx2) => ctx2.value === "",
       canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
       canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
       valueText: (ctx2) => {
@@ -612,7 +646,7 @@ function machine(ctx = {}) {
         on: {
           SETUP: {
             target: "idle",
-            actions: ["setupDocument", "syncInputValue"]
+            actions: "syncInputValue"
           }
         }
       },
@@ -664,7 +698,7 @@ function machine(ctx = {}) {
               actions: ["clearValue", "clearHint"]
             },
             {
-              guard: and("clampOnBlur", not("isInRange")),
+              guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
               target: "idle",
               actions: ["clampValue", "clearHint"]
             },
@@ -754,6 +788,7 @@ function machine(ctx = {}) {
         var _a;
         return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
       },
+      isEmptyValue: (ctx2) => ctx2.isValueEmpty,
       isIncrementHint: (ctx2, evt) => {
         var _a;
         return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
@@ -817,13 +852,6 @@ function machine(ctx = {}) {
       }
     },
     actions: {
-      setupDocument: (ctx2, evt) => {
-        if (evt.doc)
-          ctx2.doc = ref(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = ref(evt.root);
-        ctx2.uid = evt.id;
-      },
       focusInput(ctx2) {
         if (!ctx2.focusInputOnChange)
           return;

package/dist/number-input.connect.d.ts

@@ -3,6 +3,7 @@ import type { Send, State } from "./number-input.types";
 export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
     isFocused: boolean;
     isInvalid: boolean;
+    isValueEmpty: boolean;
     value: string;
     valueAsNumber: number;
     setValue(value: string | number): void;

package/dist/number-input.dom.d.ts

@@ -1,8 +1,15 @@
 import type { MachineContext as Ctx } from "./number-input.types";
 export declare const dom: {
-    getDoc: (ctx: Ctx) => Document;
-    getWin: (ctx: Ctx) => Window & typeof globalThis;
-    getRootNode: (ctx: Ctx) => Document | ShadowRoot;
+    getRootNode: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Window & typeof globalThis;
+} & {
     getRootId: (ctx: Ctx) => string;
     getInputId: (ctx: Ctx) => string;
     getIncButtonId: (ctx: Ctx) => string;

package/dist/number-input.machine.d.ts

@@ -1,2 +1,2 @@
 import type { MachineContext, MachineState, UserDefinedContext } from "./number-input.types";
-export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
+export declare function machine(ctx: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;

package/dist/number-input.types.d.ts

@@ -1,6 +1,6 @@
 import type { StateMachine as S } from "@zag-js/core";
 import type { FormatDecimalOptions } from "@zag-js/number-utils";
-import type { Context, DirectionProperty } from "@zag-js/types";
+import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
 declare type ValidityState = "rangeUnderflow" | "rangeOverflow";
 declare type ElementIds = Partial<{
     root: string;
@@ -25,7 +25,7 @@ declare type IntlMessages = {
      */
     decrementLabel: string;
 };
-declare type PublicContext = DirectionProperty & FormatDecimalOptions & {
+declare type PublicContext = DirectionProperty & CommonProperties & FormatDecimalOptions & {
     /**
      * The ids of the elements in the number input. Useful for composition.
      */
@@ -127,7 +127,7 @@ declare type PublicContext = DirectionProperty & FormatDecimalOptions & {
         valueAsNumber: number;
     }) => void;
 };
-export declare type UserDefinedContext = Partial<PublicContext>;
+export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
 declare type ComputedContext = Readonly<{
     /**
      * @computed
@@ -149,6 +149,11 @@ declare type ComputedContext = Readonly<{
      * Whether the value is out of the min/max range
      */
     isOutOfRange: boolean;
+    /**
+     * @computed
+     * Whether the value is empty
+     */
+    isValueEmpty: boolean;
     /**
      * @computed
      * Whether the increment button is enabled

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "0.0.0-dev-20220704163406",
+  "version": "0.0.0-dev-20220708193601",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,10 +29,10 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.0.0-dev-20220704163406",
-    "@zag-js/dom-utils": "0.0.0-dev-20220704163406",
+    "@zag-js/core": "0.1.7",
+    "@zag-js/dom-utils": "0.0.0-dev-20220708193601",
     "@zag-js/number-utils": "0.1.2",
-    "@zag-js/types": "0.0.0-dev-20220704163406",
+    "@zag-js/types": "0.0.0-dev-20220708193601",
     "@zag-js/utils": "0.1.2"
   },
   "scripts": {