refactor: more updates

packages/machines/package.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@ui-machines/core": "0.1.0",
+    "@ui-machines/utils": "0.1.0",
     "@types/react": "^17.0.6",
     "valtio": "^1.0.5"
   }

packages/machines/src/editable/editable.connect.ts

@@ -1,10 +1,10 @@
 import {
   defaultPropNormalizer,
-  determineBlur,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine"
-import { ariaAttr } from "@chakra-ui/utilities"
+} from "@ui-machines/core"
+import { ariaAttr } from "@ui-machines/utils/dom-helper"
+import { isValidBlurEvent } from "@ui-machines/utils/dom-event"
 import {
   DOMButtonProps,
   DOMHTMLProps,
@@ -42,7 +42,7 @@ export function connectEditableMachine(
       value: ctx.value,
       onBlur(event) {
         const { cancelBtn, submitBtn } = getElements(ctx)
-        const isValidBlur = determineBlur(event, {
+        const isValidBlur = isValidBlurEvent(event, {
           pointerdownNode: ctx.pointerdownNode,
           exclude: [cancelBtn, submitBtn],
         })

packages/machines/src/editable/editable.machine.ts

@@ -3,8 +3,8 @@ import {
   guards,
   preserve,
   trackPointerDown,
-} from "@chakra-ui/machine"
-import { nextTick } from "@chakra-ui/utilities"
+} from "@ui-machines/core"
+import { nextTick } from "@ui-machines/utils"
 import { WithDOM } from "../type-utils"
 import { getElements } from "./editable.dom"
 

packages/machines/src/menu/menu.connect.ts

@@ -1,9 +1,9 @@
 import {
   defaultPropNormalizer,
-  determineBlur,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine"
+} from "@ui-machines/core"
+import { isValidBlurEvent } from "@ui-machines/utils"
 import {
   DOMButtonProps,
   DOMHTMLProps,
@@ -65,7 +65,7 @@ export function connectMenuMachine(
       onBlur(event) {
         const { button } = getElements(ctx)
 
-        const isValidBlur = determineBlur(event, {
+        const isValidBlur = isValidBlurEvent(event, {
           exclude: button,
           pointerdownNode: ctx.pointerdownNode,
         })

packages/machines/src/menu/menu.dom.ts

@@ -1,4 +1,4 @@
-import { createCollection } from "@chakra-ui/utilities"
+import { createDOMCollection } from "@ui-machines/utils"
 import { MenuMachineContext } from "./menu.machine"
 
 export function getElementIds(uid: string) {
@@ -17,17 +17,27 @@ export function getElements(ctx: MenuMachineContext) {
   }
 }
 
-export function collection(ctx: MenuMachineContext) {
+export function dom(ctx: MenuMachineContext) {
   const ids = getElementIds(ctx.uid)
   const { menu } = getElements(ctx)
   const selector = `[role=menuitem][data-ownedby=${ids.menu}]:not([disabled])`
-  const dom = createCollection(menu, selector)
+  const {
+    prevById,
+    nextById,
+    first,
+    last,
+    findByEventKey,
+    getActiveDescendantId,
+  } = createDOMCollection(menu, selector)
 
   return {
-    ...dom,
-    getElementByCharacter(key: string) {
-      const activeDescendant = menu?.getAttribute("aria-activedescendant")
-      return dom.searchByKey(key, activeDescendant)
+    first,
+    last,
+    prev: prevById,
+    next: nextById,
+    searchByKey(key: string) {
+      const activeId = getActiveDescendantId()
+      return findByEventKey(key, activeId)
     },
   }
 }

packages/machines/src/menu/menu.machine.ts

@@ -1,7 +1,7 @@
-import { createMachine, preserve, trackPointerDown } from "@chakra-ui/machine"
-import { nextTick } from "@chakra-ui/utilities"
+import { createMachine, preserve, trackPointerDown } from "@ui-machines/core"
+import { nextTick } from "@ui-machines/utils"
 import { WithDOM } from "../type-utils"
-import { collection, getElements } from "./menu.dom"
+import { dom, getElements } from "./menu.dom"
 
 export type MenuMachineContext = WithDOM<{
   activeDescendantId: string | null
@@ -122,20 +122,20 @@ export const menuMachine = createMachine<MenuMachineContext, MenuMachineState>(
         nextTick(() => menu?.focus())
       },
       focusFirstItem(ctx) {
-        const menuitems = collection(ctx)
+        const menuitems = dom(ctx)
         ctx.activeDescendantId = menuitems.first.id
       },
       focusLastItem(ctx) {
-        const menuitems = collection(ctx)
+        const menuitems = dom(ctx)
         ctx.activeDescendantId = menuitems.last.id
       },
       focusNextItem(ctx) {
-        const menuitems = collection(ctx)
+        const menuitems = dom(ctx)
         const next = menuitems.next(ctx.activeDescendantId ?? "")
         ctx.activeDescendantId = next?.id ?? null
       },
       focusPrevItem(ctx) {
-        const menuitems = collection(ctx)
+        const menuitems = dom(ctx)
         const prev = menuitems.prev(ctx.activeDescendantId ?? "")
         ctx.activeDescendantId = prev?.id ?? null
       },
@@ -150,7 +150,7 @@ export const menuMachine = createMachine<MenuMachineContext, MenuMachineState>(
         nextTick(() => button?.focus())
       },
       focusMatchedItem(ctx, evt) {
-        const menuitems = collection(ctx)
+        const menuitems = dom(ctx)
         const node = menuitems.searchByKey(evt.key)
         ctx.activeDescendantId = node?.id ?? ctx.activeDescendantId
       },

packages/machines/src/number-input/number-input.connect.ts

@@ -2,8 +2,8 @@ import {
   defaultPropNormalizer,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine/vanilla"
-import { Range } from "@chakra-ui/utilities/range-utils"
+} from "@ui-machines/core"
+import { Range } from "@ui-machines/utils/range"
 import { getStepMultipler } from "../event-utils"
 import { DOMButtonProps, DOMInputProps, EventKeyMap } from "../type-utils"
 import { getElementIds } from "./number-input.dom"

packages/machines/src/number-input/number-input.machine.ts

@@ -1,5 +1,5 @@
-import { createMachine, guards, preserve } from "@chakra-ui/machine"
-import { addEventListener, nextTick, noop, Range } from "@chakra-ui/utilities"
+import { createMachine, guards, preserve } from "@ui-machines/core"
+import { addDomEvent, nextTick, noop, Range } from "@ui-machines/utils"
 import { getElements } from "./number-input.dom"
 import { sanitize } from "./number-input.utils"
 
@@ -149,7 +149,7 @@ export const numberInputMachine = createMachine<
             ctx.value = new Range(ctx).decrement().clamp().toString()
           }
         }
-        return addEventListener(input, "wheel", listener, { passive: false })
+        return addDomEvent(input, "wheel", listener, { passive: false })
       },
     },
     actions: {

packages/machines/src/pin-input/pin-input.connect.ts

@@ -2,7 +2,7 @@ import {
   defaultPropNormalizer,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine/vanilla"
+} from "@ui-machines/core"
 import { DOMInputProps, EventKeyMap, WithDataAttr } from "../type-utils"
 import { getElementIds } from "./pin-input.dom"
 import {

packages/machines/src/pin-input/pin-input.dom.ts

@@ -1,4 +1,4 @@
-import { createCollection } from "@chakra-ui/utilities"
+import { createDOMCollection } from "@ui-machines/utils"
 import { PinInputMachineContext } from "./pin-input.machine"
 
 export function getElementIds(uid: string) {
@@ -8,9 +8,9 @@ export function getElementIds(uid: string) {
   }
 }
 
-export function collection(ctx: PinInputMachineContext) {
+export function dom(ctx: PinInputMachineContext) {
   const doc = ctx.doc ?? document
   const ids = getElementIds(ctx.uid)
   const selector = `input[data-ownedby=${ids.root}]`
-  return createCollection<HTMLInputElement>(doc, selector)
+  return createDOMCollection<HTMLInputElement>(doc, selector)
 }

packages/machines/src/pin-input/pin-input.machine.ts

@@ -1,7 +1,7 @@
-import { createMachine, guards, preserve } from "@chakra-ui/machine"
-import { isArrayEmpty, nextTick } from "@chakra-ui/utilities"
+import { createMachine, guards, preserve } from "@ui-machines/core"
+import { ArrayCollection, nextTick } from "@ui-machines/utils"
 import { WithDOM } from "../type-utils"
-import { collection } from "./pin-input.dom"
+import { dom } from "./pin-input.dom"
 
 const { not } = guards
 
@@ -103,11 +103,11 @@ export const pinInputMachine = createMachine<
         return ctx.value.every(Boolean)
       },
       isLastValueBeforeComplete: (ctx) => {
-        const { count } = collection(ctx)
+        const { count } = dom(ctx)
         return ctx.value.filter(Boolean).length === count - 1
       },
       isLastInputFocused: (ctx) => {
-        const { count } = collection(ctx)
+        const { count } = dom(ctx)
         return ctx.focusedIndex === count - 1
       },
     },
@@ -117,17 +117,17 @@ export const pinInputMachine = createMachine<
       },
       initializeValue: (ctx) => {
         nextTick(() => {
-          const dom = collection(ctx)
-          const empty = [...new Array(dom.count).fill("")]
-          ctx.value = isArrayEmpty(ctx.value) ? preserve(empty) : ctx.value
+          const inputs = dom(ctx)
+          const empty = ArrayCollection.fromLength(inputs.count)
+          ctx.value = ctx.value.length === 0 ? preserve(empty.value) : ctx.value
         })
       },
       setOwnerDocument: (ctx, evt) => {
         ctx.doc = preserve(evt.doc)
       },
       focusInput: (ctx) => {
-        const dom = collection(ctx)
-        const input = dom.item(ctx.focusedIndex)
+        const inputs = dom(ctx)
+        const input = inputs.itemAt(ctx.focusedIndex)
         nextTick(() => input.focus())
       },
       invokeComplete: (ctx) => {
@@ -171,14 +171,14 @@ export const pinInputMachine = createMachine<
         if (!ctx.autoFocus) return
         ctx.focusedIndex = 0
         nextTick(() => {
-          const dom = collection(ctx)
-          dom.first?.focus()
+          const inputs = dom(ctx)
+          inputs.first?.focus()
         })
       },
       setNextFocusedIndex: (ctx, evt, { guards }) => {
         if (guards?.isValueComplete(ctx, evt)) return
-        const dom = collection(ctx)
-        let nextIndex = Math.min(ctx.focusedIndex + 1, dom.count)
+        const inputs = dom(ctx)
+        let nextIndex = Math.min(ctx.focusedIndex + 1, inputs.count)
         ctx.focusedIndex = nextIndex
       },
       setPrevFocusIndex: (ctx) => {

packages/machines/src/popover/popover.connect.ts

@@ -1,9 +1,9 @@
 import {
   defaultPropNormalizer,
-  determineBlur,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine"
+} from "@ui-machines/core"
+import { isValidBlurEvent } from "@ui-machines/utils"
 import { DOMHTMLProps } from "../type-utils"
 import { getElementIds, getElements } from "./popover.dom"
 import { PopoverMachineContext, PopoverMachineState } from "./popover.machine"
@@ -42,7 +42,7 @@ export function connectPopoverMachine(
       },
       onBlur(event) {
         const { trigger } = getElements(ctx)
-        const isValidBlur = determineBlur(event, {
+        const isValidBlur = isValidBlurEvent(event, {
           exclude: trigger,
           pointerdownNode: ctx.pointerdownNode,
         })

packages/machines/src/popover/popover.dom.ts

@@ -1,3 +1,4 @@
+import { ArrayCollection, DOMHelper } from "@ui-machines/utils"
 import { PopoverMachineContext } from "./popover.machine"
 
 export function getElementIds(uid: string) {
@@ -20,3 +21,14 @@ export function getElements(ctx: PopoverMachineContext) {
     body: doc.getElementById(ids.body),
   }
 }
+
+export function dom(ctx: PopoverMachineContext) {
+  const { content } = getElements(ctx)
+  return {
+    getFirstFocusable() {
+      const focusables = new DOMHelper(content).getFocusables(true)
+      const nodelist = new ArrayCollection(focusables)
+      return nodelist.first
+    },
+  }
+}

packages/machines/src/popover/popover.machine.ts

@@ -3,10 +3,10 @@ import {
   guards,
   preserve,
   trackPointerDown,
-} from "@chakra-ui/machine"
-import { getFirstFocusable, isTabbable, nextTick } from "@chakra-ui/utilities"
+} from "@ui-machines/core"
+import { DOMHelper, nextTick } from "@ui-machines/utils"
 import { WithDOM } from "../type-utils"
-import { getElements } from "./popover.dom"
+import { dom, getElements } from "./popover.dom"
 
 const { and } = guards
 
@@ -85,7 +85,8 @@ export const popoverMachine = createMachine<
     activities: { trackPointerDown },
     guards: {
       shouldCloseOnEsc: (ctx) => !!ctx.closeOnEsc,
-      isPointerdownFocusable: (ctx) => isTabbable(ctx.pointerdownNode),
+      isPointerdownFocusable: (ctx) =>
+        new DOMHelper(ctx.pointerdownNode).isTabbable,
       shouldCloseOnOutsideClick: (ctx) => !!ctx.closeOnOutsideClick,
     },
     actions: {
@@ -100,10 +101,9 @@ export const popoverMachine = createMachine<
       },
       autoFocus(ctx) {
         nextTick(() => {
-          const nodes = getElements(ctx)
-          if (!nodes.content) return
-          const el = getFirstFocusable(nodes.content) ?? nodes.content
-          el.focus()
+          const { getFirstFocusable } = dom(ctx)
+          const el = getFirstFocusable()
+          el?.focus()
         })
       },
       restoreFocus(ctx) {

packages/machines/src/pressable/pressable.machine.ts

@@ -1,4 +1,4 @@
-import { createMachine } from "@chakra-ui/machine"
+import { createMachine } from "@ui-machines/core"
 
 export type PressableMachineState = {
   value: "hover" | "pressIn" | "idle" | "longPressIn" | "test"

packages/machines/src/range-slider/range-slider.connect.ts

@@ -2,8 +2,8 @@ import {
   defaultPropNormalizer,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine"
-import { cast, dataAttr, Point, Range } from "@chakra-ui/utilities"
+} from "@ui-machines/core"
+import { cast, dataAttr, Point, Range } from "@ui-machines/utils"
 import { determineEventKey, getStepMultipler } from "../event-utils"
 import {
   DOMHTMLProps,

packages/machines/src/range-slider/range-slider.dom.ts

@@ -1,4 +1,4 @@
-import { Point, Range } from "@chakra-ui/utilities"
+import { Point, Range } from "@ui-machines/utils"
 import { RangeSliderMachineContext } from "./range-slider.machine"
 
 export function getElementIds(uid: string) {