@lax-wp/design-system 0.8.18 → 0.8.19

package/dist/index.es.js

@@ -12067,8 +12067,12 @@ const FM = ({
   disabled: i = !1,
   errorMessage: s
 }) => {
-  const [o, a] = R(!1), c = ce(!1), d = (u) => {
-    u.stopPropagation(), e?.("");
+  const [o, a] = R(!1), c = ce(!1), d = ce(null), u = ce(!1);
+  ee(() => {
+    u.current && !o && d.current?.focus(), u.current = o;
+  }, [o]);
+  const h = (f) => {
+    f.stopPropagation(), e?.("");
   };
   return /* @__PURE__ */ l(
     aa,
@@ -12076,10 +12080,10 @@ const FM = ({
       arrow: !1,
       placement: "bottom",
       trigger: "click",
-      getPopupContainer: (u) => u?.parentElement || document.body,
+      getPopupContainer: (f) => f?.parentElement || document.body,
       open: o,
-      onOpenChange: (u) => {
-        u ? (c.current && a(!0), c.current = !1) : a(!1);
+      onOpenChange: (f) => {
+        f ? (c.current && a(!0), c.current = !1) : a(!1);
       },
       content: /* @__PURE__ */ l(j7, { onChange: e, selectedIcon: A, setOpen: a }),
       children: /* @__PURE__ */ k("div", { className: "flex flex-col gap-1", children: [
@@ -12087,19 +12091,20 @@ const FM = ({
         /* @__PURE__ */ k(
           "button",
           {
+            ref: d,
             type: "button",
             id: `btn-icon-picker-icon-${A ? "selected" : "unselected"}`,
             className: `min-w-[83px] py-1.5 px-3 rounded-md border ${i ? "cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800" : "bg-white dark:bg-black-800"} ${s ? "border-red-500" : "focus:border-primary-200 "} flex items-center justify-between gap-2`,
             disabled: i,
-            onClick: (u) => {
+            onClick: (f) => {
               if (i) {
-                u.preventDefault(), u.stopPropagation();
+                f.preventDefault(), f.stopPropagation();
                 return;
               }
-              u.detail > 0 && (c.current = !0);
+              f.detail > 0 && (c.current = !0);
             },
-            onKeyDown: (u) => {
-              u.key === "Enter" && (u.preventDefault(), o || u.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click());
+            onKeyDown: (f) => {
+              f.key === "Enter" && (f.preventDefault(), o || f.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click());
             },
             children: [
               A ? /* @__PURE__ */ l(V0, { iconName: A, sx: { width: 20, height: 20 }, className: "text-neutral-900 dark:text-white" }) : /* @__PURE__ */ l(
@@ -12116,7 +12121,7 @@ const FM = ({
                 {
                   sx: { width: 20, height: 20 },
                   className: "hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500",
-                  onClick: d
+                  onClick: h
                 }
               ) : null
             ]