@eightshift/ui-components 1.4.1 → 1.4.3

package/dist/components/expandable/expandable.js

@@ -65,7 +65,7 @@ const Expandable = (props) => {
     "div",
     {
       className: clsx(
-        "es-uic-w-full es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-border-opacity-0 es-uic-text-sm es-uic-transition",
+        "es-uic-w-full es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-border-opacity-0 es-uic-text-sm es-uic-transition focus:es-uic-outline-none",
         isOpen && "es-uic-border-opacity-100 es-uic-shadow-lg",
         className
       ),

package/dist/components/link-input/link-input.js

@@ -1853,9 +1853,10 @@ const LinkInput = (props) => {
           {
             "aria-label": __("URL suggestions", "eightshift-ui-components"),
             className: ({ isEntering, isExiting }) => clsx(
-              "es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow-lg es-uic-outline-none empty:es-uic-opacity-0",
+              "es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow-lg es-uic-outline-none",
               isEntering && "es-uic-outline es-uic-animate-in es-uic-fade-in-0 es-uic-slide-in-from-top-2 es-uic-fill-mode-forwards",
-              isExiting && "es-uic-outline es-uic-animate-out es-uic-fade-out-0 es-uic-slide-out-to-top-2 es-uic-fill-mode-forwards"
+              isExiting && "es-uic-outline es-uic-animate-out es-uic-fade-out-0 es-uic-slide-out-to-top-2 es-uic-fill-mode-forwards",
+              !shouldShowSuggestions && suggestionList.items.length < 1 && "es-uic-invisible"
             ),
             style: {
               width: `${(_a = triggerRef.current) == null ? void 0 : _a.offsetWidth}px`

package/dist/components/number-picker/number-picker.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default, { forwardRef, useRef, createContext, useState, cloneElement } from "react";
+import { _ as __ } from "../../default-i18n-BqWys-1G.js";
 import { $ as $a049562f99e7db0e$export$f9c6924e160136d1, a as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-WZgNv9RE.js";
 import { $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CaS4qmLb.js";
 import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-yZgqvhXc.js";

package/dist/components/repeater/repeater-item.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
@@ -27,8 +27,8 @@ import { RepeaterContext } from "./repeater-context.js";
  */
 const RepeaterItem = (props) => {
   const { children, icon, label, subtitle, "aria-label": ariaLabel, className, actions, textValue, expandDisabled, ...rest } = props;
-  const { canDelete, handleOpenChange, isPanelOpen, handleRef, deleteItem, isAnyPanelOpen, isDragSource } = useContext(RepeaterContext);
-  return /* @__PURE__ */ jsx(
+  const { canDelete, handleOpenChange, deleteItem, isDragSource } = useContext(RepeaterContext);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     Expandable,
     {
       disabled: canDelete,
@@ -39,21 +39,7 @@ const RepeaterItem = (props) => {
       labelClassName: className,
       onOpenChange: (isOpen) => handleOpenChange(isOpen),
       actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            className: clsx(
-              "es-uic-h-6 es-uic-w-4 !es-uic-text-gray-500 es-uic-opacity-50 focus:es-uic-opacity-100",
-              (isAnyPanelOpen || canDelete) && "es-uic-pointer-events-none es-uic-invisible !es-uic-cursor-default"
-            ),
-            type: "ghost",
-            icon: icons.reorderGrabberV,
-            tooltip: !isDragSource && __("Re-order", "eightshift-ui-components"),
-            forwardedRef: handleRef,
-            disabled: isPanelOpen
-          }
-        ),
+        actions,
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -65,13 +51,12 @@ const RepeaterItem = (props) => {
             onPress: () => deleteItem(),
             className: "es-uic-translate-x-px"
           }
-        ),
-        actions
+        )
       ] }),
       noFocusHandling: true,
       children
     }
-  );
+  ) });
 };
 export {
   RepeaterItem

package/dist/components/repeater/repeater.js

@@ -8,6 +8,7 @@ import { AnimatedVisibility } from "../animated-visibility/animated-visibility.j
 import { ToggleButton } from "../toggle-button/toggle-button.js";
 import { r as reactDomExports } from "../../index-BTCzc3zb.js";
 import { RepeaterContext } from "./repeater-context.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 var i = Symbol.for("preact-signals");
 function t() {
   if (!(s > 1)) {
@@ -5085,6 +5086,9 @@ const Repeater = (props) => {
   if (canDelete && items.length < (minItems ?? 1)) {
     setCanDelete(false);
   }
+  useEffect(() => {
+    setItems(fixIds(rawItems));
+  }, [rawItems]);
   if (hidden) {
     return null;
   }
@@ -5113,30 +5117,28 @@ const Repeater = (props) => {
           {
             onPress: () => {
               const newItem = { id: `${itemIdBase}${items.length + 1}`, ...addDefaultItem };
-              setItems((items2) => [...items2, newItem]);
-              onChange(items);
+              onChange([...items, newItem]);
               if (onAfterItemAdd) {
                 onAfterItemAdd(newItem);
               }
             },
             size: "small",
             icon: icons.add,
-            className: "[&>svg]:es-uic-size-4",
+            className: clsx("[&>svg]:es-uic-size-4", !hideEmptyState && items.length < 1 && "es-uic-invisible"),
             tooltip: __("Add item", "eightshift-ui-components"),
             disabled: addDisabled || canDelete
           }
         ),
-        addButton && addButton({
+        addButton && /* @__PURE__ */ jsx("div", { className: clsx(!hideEmptyState && items.length < 1 && "es-uic-invisible"), children: addButton({
           addItem: (additional = {}) => {
             const newItem = { id: `${itemIdBase}${items.length + 1}`, ...addDefaultItem, ...additional };
-            setItems((items2) => [...items2, newItem]);
-            onChange(items);
+            onChange([...items, newItem]);
             if (onAfterItemAdd) {
               onAfterItemAdd(newItem);
             }
           },
           disabled: addDisabled || canDelete
-        })
+        }) })
       ] }),
       className: "es-uic-w-full",
       children: [
@@ -5172,8 +5174,7 @@ const Repeater = (props) => {
               if (event.canceled) {
                 return;
               }
-              setItems((items2) => move(items2, source, target));
-              onChange(items);
+              onChange(move([...items], source, target));
             },
             children: items.map((item, index) => /* @__PURE__ */ jsx(
               SortableItem,
@@ -5188,31 +5189,46 @@ const Repeater = (props) => {
                     value: {
                       ...item,
                       index,
-                      handleRef,
                       canDelete,
                       deleteItem: () => {
-                        setItems([...items].filter((i2) => i2.id !== item.id));
                         onChange([...items].filter((i2) => i2.id !== item.id));
-                        onAfterItemRemove(item);
+                        if (onAfterItemRemove) {
+                          onAfterItemRemove(item);
+                        }
                       },
-                      isPanelOpen: (isPanelOpen == null ? void 0 : isPanelOpen[item.id]) ?? false,
-                      isAnyPanelOpen,
                       handleOpenChange: (isOpen) => setIsPanelOpen((data) => ({ ...data, [item.id]: isOpen })),
                       isDragSource
                     },
-                    children: /* @__PURE__ */ jsx("div", { children: children({
-                      ...item,
-                      updateData: (newValue) => {
-                        setItems((items2) => items2.map((i2) => i2.id === item.id ? { ...i2, ...newValue } : i2));
-                        onChange(items);
-                      },
-                      itemIndex: index,
-                      deleteItem: () => {
-                        setItems([...items].filter((i2) => i2.id !== item.id));
-                        onChange([...items].filter((i2) => i2.id !== item.id));
-                        onAfterItemRemove(item);
-                      }
-                    }) })
+                    children: /* @__PURE__ */ jsxs("div", { className: "es-uic-relative", children: [
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          size: "small",
+                          className: clsx(
+                            "es-uic-absolute es-uic-bottom-0 es-uic-left-0 es-uic-top-0 es-uic-my-auto es-uic-h-6 es-uic-w-4 -es-uic-translate-x-full !es-uic-text-gray-500 es-uic-opacity-50 focus:es-uic-opacity-100",
+                            (isAnyPanelOpen || canDelete) && "es-uic-pointer-events-none es-uic-invisible !es-uic-cursor-default"
+                          ),
+                          type: "ghost",
+                          icon: icons.reorderGrabberV,
+                          tooltip: !isDragSource && __("Re-order", "eightshift-ui-components"),
+                          forwardedRef: handleRef
+                        }
+                      ),
+                      children({
+                        ...item,
+                        updateData: (newValue) => {
+                          const updated = [...items].map((i2) => i2.id === item.id ? { ...i2, ...newValue } : i2);
+                          onChange(updated);
+                        },
+                        itemIndex: index,
+                        deleteItem: () => {
+                          onChange([...items].filter((i2) => i2.id !== item.id));
+                          if (onAfterItemRemove) {
+                            onAfterItemRemove(item);
+                          }
+                        }
+                      })
+                    ] })
                   },
                   item.id
                 )
@@ -5223,7 +5239,35 @@ const Repeater = (props) => {
         ) }),
         /* @__PURE__ */ jsxs(AnimatedVisibility, { visible: items.length < 1, children: [
           emptyState,
-          !hideEmptyState && /* @__PURE__ */ jsx("div", {})
+          !hideEmptyState && /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-flex-col es-uic-items-center es-uic-gap-2 es-uic-rounded-md es-uic-border es-uic-border-dashed es-uic-border-gray-300 es-uic-p-4 es-uic-text-center es-uic-text-sm es-uic-text-gray-400", children: [
+            !addButton && /* @__PURE__ */ jsx(
+              Button,
+              {
+                onPress: () => {
+                  const newItem = { id: `${itemIdBase}${items.length + 1}`, ...addDefaultItem };
+                  onChange([...items, newItem]);
+                  if (onAfterItemAdd) {
+                    onAfterItemAdd(newItem);
+                  }
+                },
+                size: "small",
+                icon: icons.add,
+                className: "[&>svg]:es-uic-size-4",
+                disabled: addDisabled,
+                children: __("Add item", "eightshift-ui-components")
+              }
+            ),
+            addButton && !hideEmptyState && addButton({
+              addItem: (additional = {}) => {
+                const newItem = { id: `${itemIdBase}${items.length + 1}`, ...addDefaultItem, ...additional };
+                onChange([...items, newItem]);
+                if (onAfterItemAdd) {
+                  onAfterItemAdd(newItem);
+                }
+              },
+              disabled: addDisabled || canDelete
+            })
+          ] })
         ] })
       ]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eightshift/ui-components",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -85,6 +85,7 @@
     "tailwindcss": "^3.4.7",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-react-aria-components": "^1.1.4",
+    "tailwindcss-scoped-preflight": "^3.4.3",
     "vite": "^5.3.5",
     "vite-plugin-lib-inject-css": "^2.1.1"
   },