refactor: composite widgets (#1489)

* refactor: svelte * chore: rename * chore: rename * refactor: composite widgets * fix: menu composite * chore: add changeset * refactor: code * chore: changeset * refactor: combobox and tabs composition * fix: dialog + initial focus * chore: slider tooltip composition * feat(slider): invoke on change end of keyboard * chore: reduce pkgs * docs: update * chore: refactor * chore: refactor * docs: update changeset
chakra-ui · May 14, 2024 · 6784564 · 6784564
1 parent 79498c3
commit 6784564
Show file tree

Hide file tree

Showing 137 changed files with 1,573 additions and 2,828 deletions.
diff --git a/.changeset/curly-snails-marry.md b/.changeset/curly-snails-marry.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/combobox": minor
+---
+
+Rename `triggerProps` to `getTriggerProps()` to allow for more flexible compositions.
diff --git a/.changeset/nervous-kids-grin.md b/.changeset/nervous-kids-grin.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/popper": patch
+---
+
+Fix issue where positioner does not respect the `offset.crossAxis`
diff --git a/.changeset/odd-moles-fetch.md b/.changeset/odd-moles-fetch.md
@@ -0,0 +1,7 @@
+---
+"@zag-js/dialog": minor
+---
+
+- Prevent closing dialog on outside click when `role=alertdialog` is set.
+- Set the initial focus to the close trigger, when `role=alertdialog` is set to prevent accidental selection of
+  destructive action.
diff --git a/.changeset/twelve-dragons-report.md b/.changeset/twelve-dragons-report.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/slider": minor
+---
+
+Invoke `onValueChangeEnd` when using keyboard to interact with slider thumb
diff --git a/.npmrc b/.npmrc
@@ -1 +1,2 @@
 strict-peer-dependencies=false
+package-manager-strict=false
diff --git a/.xstate/combobox.js b/.xstate/combobox.js
@@ -97,14 +97,14 @@ const fetchMachine = createMachine({
         },
         "TRIGGER.CLICK": [{
           cond: "isOpenControlled",
-          actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+          actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
         }, {
           target: "interacting",
-          actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+          actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
         }],
         "INPUT.CLICK": [{
           cond: "isOpenControlled",
-          actions: ["invokeOnOpen"]
+          actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
         }, {
           target: "interacting",
           actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
@@ -127,7 +127,7 @@ const fetchMachine = createMachine({
     },
     focused: {
       tags: ["focused", "closed"],
-      entry: ["focusInputOrTrigger", "scrollContentToTop", "clearHighlightedItem"],
+      entry: ["scrollContentToTop", "clearHighlightedItem"],
       on: {
         "CONTROLLED.OPEN": [{
           cond: "isChangeEvent",
@@ -137,11 +137,11 @@ const fetchMachine = createMachine({
         }],
         "INPUT.CHANGE": [{
           cond: "isOpenControlled && openOnChange",
-          actions: ["setInputValue", "invokeOnOpen"]
+          actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
         }, {
           cond: "openOnChange",
           target: "suggesting",
-          actions: ["setInputValue", "invokeOnOpen"]
+          actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
         }, {
           actions: "setInputValue"
         }],
@@ -164,10 +164,10 @@ const fetchMachine = createMachine({
         }],
         "TRIGGER.CLICK": [{
           cond: "isOpenControlled",
-          actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+          actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
         }, {
           target: "interacting",
-          actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+          actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
         }],
         "INPUT.ARROW_DOWN": [
         // == group 1 ==
@@ -220,11 +220,13 @@ const fetchMachine = createMachine({
     },
     interacting: {
       tags: ["open", "focused"],
-      activities: ["scrollIntoView", "trackDismissableLayer", "computePlacement", "hideOtherElements", "trackContentHeight"],
+      entry: ["setInitialFocus"],
+      activities: ["scrollToHighlightedItem", "trackDismissableLayer", "computePlacement", "hideOtherElements"],
       on: {
         "CONTROLLED.CLOSE": [{
           cond: "restoreFocus",
-          target: "focused"
+          target: "focused",
+          actions: ["setFinalFocus"]
         }, {
           target: "idle"
         }],
@@ -252,7 +254,7 @@ const fetchMachine = createMachine({
         }, {
           cond: "closeOnSelect",
           target: "focused",
-          actions: ["selectHighlightedItem", "invokeOnClose"]
+          actions: ["selectHighlightedItem", "invokeOnClose", "setFinalFocus"]
         }, {
           actions: ["selectHighlightedItem"]
         }],
@@ -276,7 +278,7 @@ const fetchMachine = createMachine({
         }, {
           cond: "closeOnSelect",
           target: "focused",
-          actions: ["selectItem", "invokeOnClose"]
+          actions: ["selectItem", "invokeOnClose", "setFinalFocus"]
         }, {
           actions: ["selectItem"]
         }],
@@ -292,7 +294,7 @@ const fetchMachine = createMachine({
           actions: "invokeOnClose"
         }, {
           target: "focused",
-          actions: ["invokeOnClose"]
+          actions: ["invokeOnClose", "setFinalFocus"]
         }],
         "TRIGGER.CLICK": [{
           cond: "isOpenControlled",
@@ -321,28 +323,29 @@ const fetchMachine = createMachine({
         }],
         CLOSE: [{
           cond: "isOpenControlled",
-          actions: "invokeOnClose"
+          actions: ["invokeOnClose"]
         }, {
           target: "focused",
-          actions: "invokeOnClose"
+          actions: ["invokeOnClose", "setFinalFocus"]
         }],
         "VALUE.CLEAR": [{
           cond: "isOpenControlled",
           actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
         }, {
           target: "focused",
-          actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+          actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose", "setFinalFocus"]
         }]
       }
     },
     suggesting: {
       tags: ["open", "focused"],
-      activities: ["trackDismissableLayer", "scrollIntoView", "computePlacement", "trackChildNodes", "hideOtherElements", "trackContentHeight"],
-      entry: ["focusInput"],
+      activities: ["trackDismissableLayer", "scrollToHighlightedItem", "computePlacement", "trackChildNodes", "hideOtherElements"],
+      entry: ["setInitialFocus"],
       on: {
         "CONTROLLED.CLOSE": [{
           cond: "restoreFocus",
-          target: "focused"
+          target: "focused",
+          actions: ["setFinalFocus"]
         }, {
           target: "idle"
         }],
@@ -351,11 +354,11 @@ const fetchMachine = createMachine({
         },
         "INPUT.ARROW_DOWN": {
           target: "interacting",
-          actions: "highlightNextItem"
+          actions: ["highlightNextItem"]
         },
         "INPUT.ARROW_UP": {
           target: "interacting",
-          actions: "highlightPrevItem"
+          actions: ["highlightPrevItem"]
         },
         "INPUT.HOME": {
           target: "interacting",
@@ -371,7 +374,7 @@ const fetchMachine = createMachine({
         }, {
           cond: "closeOnSelect",
           target: "focused",
-          actions: ["selectHighlightedItem", "invokeOnClose"]
+          actions: ["selectHighlightedItem", "invokeOnClose", "setFinalFocus"]
         }, {
           actions: ["selectHighlightedItem"]
         }],
@@ -383,17 +386,17 @@ const fetchMachine = createMachine({
         }],
         "LAYER.ESCAPE": [{
           cond: "isOpenControlled",
-          actions: "invokeOnClose"
+          actions: ["invokeOnClose"]
         }, {
           target: "focused",
-          actions: "invokeOnClose"
+          actions: ["invokeOnClose"]
         }],
         "ITEM.POINTER_MOVE": {
           target: "interacting",
-          actions: "setHighlightedItem"
+          actions: ["setHighlightedItem"]
         },
         "ITEM.POINTER_LEAVE": {
-          actions: "clearHighlightedItem"
+          actions: ["clearHighlightedItem"]
         },
         "LAYER.INTERACT_OUTSIDE": [
         // == group 1 ==
@@ -408,41 +411,41 @@ const fetchMachine = createMachine({
         // == group 2 ==
         {
           cond: "isOpenControlled",
-          actions: "invokeOnClose"
+          actions: ["invokeOnClose"]
         }, {
           target: "idle",
-          actions: "invokeOnClose"
+          actions: ["invokeOnClose"]
         }],
         "TRIGGER.CLICK": [{
           cond: "isOpenControlled",
-          actions: "invokeOnClose"
+          actions: ["invokeOnClose"]
         }, {
           target: "focused",
-          actions: "invokeOnClose"
+          actions: ["invokeOnClose"]
         }],
         "ITEM.CLICK": [{
           cond: "isOpenControlled && closeOnSelect",
           actions: ["selectItem", "invokeOnClose"]
         }, {
           cond: "closeOnSelect",
           target: "focused",
-          actions: ["selectItem", "invokeOnClose"]
+          actions: ["selectItem", "invokeOnClose", "setFinalFocus"]
         }, {
           actions: ["selectItem"]
         }],
         CLOSE: [{
           cond: "isOpenControlled",
-          actions: "invokeOnClose"
+          actions: ["invokeOnClose"]
         }, {
           target: "focused",
-          actions: "invokeOnClose"
+          actions: ["invokeOnClose", "setFinalFocus"]
         }],
         "VALUE.CLEAR": [{
           cond: "isOpenControlled",
           actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
         }, {
           target: "focused",
-          actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+          actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose", "setFinalFocus"]
         }]
       }
     }

diff --git a/.xstate/dialog.js b/.xstate/dialog.js
@@ -30,21 +30,21 @@ const fetchMachine = createMachine({
       on: {
         "CONTROLLED.CLOSE": {
           target: "closed",
-          actions: ["restoreFocus"]
+          actions: ["setFinalFocus"]
         },
         CLOSE: [{
           cond: "isOpenControlled",
           actions: ["invokeOnClose"]
         }, {
           target: "closed",
-          actions: ["invokeOnClose", "restoreFocus"]
+          actions: ["invokeOnClose", "setFinalFocus"]
         }],
         TOGGLE: [{
           cond: "isOpenControlled",
           actions: ["invokeOnClose"]
         }, {
           target: "closed",
-          actions: ["invokeOnClose", "restoreFocus"]
+          actions: ["invokeOnClose", "setFinalFocus"]
         }]
       }
     },

diff --git a/.xstate/menu.js b/.xstate/menu.js
@@ -37,7 +37,6 @@ const fetchMachine = createMachine({
     "isArrowLeftEvent": false,
     "!isTriggerItem && isOpenControlled": false,
     "!isTriggerItem": false,
-    "isForwardTabNavigation": false,
     "isSubmenu && isOpenControlled": false,
     "isSubmenu": false,
     "isTriggerItemHighlighted": false,
@@ -284,12 +283,6 @@ const fetchMachine = createMachine({
           target: "closed",
           actions: "invokeOnClose"
         }],
-        TAB: [{
-          cond: "isForwardTabNavigation",
-          actions: ["highlightNextItem"]
-        }, {
-          actions: ["highlightPrevItem"]
-        }],
         ARROW_UP: {
           actions: ["highlightPrevItem", "focusMenu"]
         },
@@ -400,7 +393,6 @@ const fetchMachine = createMachine({
     "isArrowLeftEvent": ctx => ctx["isArrowLeftEvent"],
     "!isTriggerItem && isOpenControlled": ctx => ctx["!isTriggerItem && isOpenControlled"],
     "!isTriggerItem": ctx => ctx["!isTriggerItem"],
-    "isForwardTabNavigation": ctx => ctx["isForwardTabNavigation"],
     "isSubmenu && isOpenControlled": ctx => ctx["isSubmenu && isOpenControlled"],
     "isTriggerItemHighlighted": ctx => ctx["isTriggerItemHighlighted"],
     "closeOnSelect && isOpenControlled": ctx => ctx["closeOnSelect && isOpenControlled"],

diff --git a/.xstate/popover.js b/.xstate/popover.js
@@ -52,14 +52,14 @@ const fetchMachine = createMachine({
       on: {
         "CONTROLLED.CLOSE": {
           target: "closed",
-          actions: ["restoreFocus"]
+          actions: ["setFinalFocus"]
         },
         CLOSE: [{
           cond: "isOpenControlled",
           actions: ["invokeOnClose"]
         }, {
           target: "closed",
-          actions: ["invokeOnClose", "restoreFocus"]
+          actions: ["invokeOnClose", "setFinalFocus"]
         }],
         TOGGLE: [{
           cond: "isOpenControlled",

diff --git a/.xstate/select.js b/.xstate/select.js
@@ -103,7 +103,7 @@ const fetchMachine = createMachine({
     },
     focused: {
       tags: ["closed"],
-      entry: ["focusTriggerEl"],
+      entry: ["setFinalFocus"],
       on: {
         "CONTROLLED.OPEN": [{
           cond: "isTriggerClickEvent",
@@ -188,7 +188,7 @@ const fetchMachine = createMachine({
     },
     open: {
       tags: ["open"],
-      entry: ["focusContentEl"],
+      entry: ["setInitialFocus"],
       exit: ["scrollContentToTop"],
       activities: ["trackDismissableElement", "computePlacement", "scrollToHighlightedItem"],
       on: {