@eightshift/ui-components 6.0.5 → 6.0.8

package/dist/assets/style-admin.css

@@ -2501,8 +2501,8 @@ input[data-rac]::-webkit-search-cancel-button {
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
-:is(body, body #wpwrap) .es\:translate-y-0 {
-  --tw-translate-y: calc(var(--es-spacing) * 0);
+:is(body, body #wpwrap) .es\:translate-y-1 {
+  --tw-translate-y: calc(var(--es-spacing) * 1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
@@ -3167,6 +3167,10 @@ input[data-rac]::-webkit-search-cancel-button {
   border-radius: var(--es-radius-18);
 }
 
+:is(body, body #wpwrap) .es\:rounded-20\! {
+  border-radius: var(--es-radius-20) !important;
+}
+
 :is(body, body #wpwrap) .es\:rounded-28 {
   border-radius: var(--es-radius-28);
 }
@@ -7855,6 +7859,17 @@ input[data-rac]::-webkit-search-cancel-button {
   grid-row-end: 1;
 }
 
+:is(:is(body, body #wpwrap) .es\:\*\:motion-preset-fade-sm > *) {
+  --motion-origin-opacity: 0;
+  --motion-duration: .3s;
+  --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both;
+  animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
+}
+
+:is(:is(body, body #wpwrap) .es\:\*\:motion-delay-75 > *) {
+  --motion-delay: 75ms;
+}
+
 :is(body, body #wpwrap) .es\:not-group-first\:not-group-before-current\:rounded-t-md:not(:is(:where(.es\:group):first-child *)):not(:is(:where(.es\:group):has( + :where(:pressed, :active, [data-selected="true"], [data-focus-visible="true"], [data-hovered="true"], [aria-expanded="true"], [data-expanded="true"])) *)) {
   border-top-left-radius: var(--es-radius-md);
   border-top-right-radius: var(--es-radius-md);

package/dist/assets/style-editor.css

@@ -2469,8 +2469,8 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
-:is(body, #wpwrap #editor) .es\:translate-y-0 {
-  --tw-translate-y: calc(var(--es-spacing) * 0);
+:is(body, #wpwrap #editor) .es\:translate-y-1 {
+  --tw-translate-y: calc(var(--es-spacing) * 1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
@@ -3135,6 +3135,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   border-radius: var(--es-radius-18);
 }
 
+:is(body, #wpwrap #editor) .es\:rounded-20\! {
+  border-radius: var(--es-radius-20) !important;
+}
+
 :is(body, #wpwrap #editor) .es\:rounded-28 {
   border-radius: var(--es-radius-28);
 }
@@ -7823,6 +7827,17 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   grid-row-end: 1;
 }
 
+:is(:is(body, #wpwrap #editor) .es\:\*\:motion-preset-fade-sm > *) {
+  --motion-origin-opacity: 0;
+  --motion-duration: .3s;
+  --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both;
+  animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
+}
+
+:is(:is(body, #wpwrap #editor) .es\:\*\:motion-delay-75 > *) {
+  --motion-delay: 75ms;
+}
+
 :is(body, #wpwrap #editor) .es\:not-group-first\:not-group-before-current\:rounded-t-md:not(:is(:where(.es\:group):first-child *)):not(:is(:where(.es\:group):has( + :where(:pressed, :active, [data-selected="true"], [data-focus-visible="true"], [data-hovered="true"], [aria-expanded="true"], [data-expanded="true"])) *)) {
   border-top-left-radius: var(--es-radius-md);
   border-top-right-radius: var(--es-radius-md);

package/dist/assets/style.css

@@ -2954,8 +2954,8 @@ input[data-rac]::-webkit-search-cancel-button {
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .es\:translate-y-0 {
-    --tw-translate-y: calc(var(--es-spacing) * 0);
+  .es\:translate-y-1 {
+    --tw-translate-y: calc(var(--es-spacing) * 1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
@@ -3620,6 +3620,10 @@ input[data-rac]::-webkit-search-cancel-button {
     border-radius: var(--es-radius-18);
   }
 
+  .es\:rounded-20\! {
+    border-radius: var(--es-radius-20) !important;
+  }
+
   .es\:rounded-28 {
     border-radius: var(--es-radius-28);
   }
@@ -8308,6 +8312,17 @@ input[data-rac]::-webkit-search-cancel-button {
     grid-row-end: 1;
   }
 
+  :is(.es\:\*\:motion-preset-fade-sm > *) {
+    --motion-origin-opacity: 0;
+    --motion-duration: .3s;
+    --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration, var(--motion-duration)) * var(--motion-opacity-perceptual-duration-multiplier, var(--motion-perceptual-duration-multiplier))) var(--motion-opacity-timing, var(--motion-timing)) var(--motion-opacity-delay, var(--motion-delay)) both;
+    animation: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation), var(--motion-scale-loop-animation), var(--motion-translate-loop-animation), var(--motion-rotate-loop-animation), var(--motion-filter-loop-animation), var(--motion-opacity-loop-animation), var(--motion-background-color-loop-animation), var(--motion-text-color-loop-animation);
+  }
+
+  :is(.es\:\*\:motion-delay-75 > *) {
+    --motion-delay: 75ms;
+  }
+
   .es\:not-group-first\:not-group-before-current\:rounded-t-md:not(:is(:where(.es\:group):first-child *)):not(:is(:where(.es\:group):has( + :where(:pressed, :active, [data-selected="true"], [data-focus-visible="true"], [data-hovered="true"], [aria-expanded="true"], [data-expanded="true"])) *)) {
     border-top-left-radius: var(--es-radius-md);
     border-top-right-radius: var(--es-radius-md);

package/dist/components/draggable/draggable.js

@@ -3,6 +3,7 @@ import { useEffect, useRef, useLayoutEffect, useMemo, useState, useCallback, sta
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { DraggableContext } from "./draggable-context.js";
 import { r as reactDomExports } from "../../index-oFgxU4zs.js";
+import { randomId } from "../../utilities/hash.js";
 var i = Symbol.for("preact-signals");
 function t() {
   if (!(s > 1)) {
@@ -7005,11 +7006,11 @@ var _AxisModifier = class _AxisModifier2 extends Modifier {
 };
 _AxisModifier.configure = configurator(_AxisModifier);
 var AxisModifier = _AxisModifier;
-AxisModifier.configure({
+var RestrictToVerticalAxis = AxisModifier.configure({
   axis: "x",
   value: 0
 });
-AxisModifier.configure({
+var RestrictToHorizontalAxis = AxisModifier.configure({
   axis: "y",
   value: 0
 });
@@ -7222,21 +7223,22 @@ function mutate(items, event, mutation) {
 function move(items, event) {
   return mutate(items, event, arrayMove);
 }
-const fixIds = (items, itemIdBase) => {
-  return items?.map((item, i2) => ({
-    ...item,
-    id: item?.id ?? `${itemIdBase}-${i2}`
-  })) ?? [];
-};
 const SortableItem = ({ id, index, disabled, children, axis }) => {
   const [element, setElement] = useState(null);
   const handleRef = useRef(null);
+  let modifiers = [RestrictToElement];
+  if (axis === "horizontal") {
+    modifiers.push(RestrictToHorizontalAxis);
+  }
+  if (axis === "vertical") {
+    modifiers.push(RestrictToVerticalAxis);
+  }
   const { isDragSource, status } = useSortable({
     id,
     index,
     element,
     type: "item",
-    modifiers: [RestrictToElement],
+    modifiers,
     transition: { idle: true, duration: 400, easing: "cubic-bezier(0, 0.55, 0.45, 1)" },
     // 'easeOutCirc'
     handle: handleRef,
@@ -7280,7 +7282,7 @@ const SortableItem = ({ id, index, disabled, children, axis }) => {
  * @preserve
  */
 const Draggable3 = (props) => {
-  const itemIdBase = useId("draggable-list-item-");
+  useId("draggable-list-item-");
   const {
     children,
     items: rawItems,
@@ -7295,9 +7297,9 @@ const Draggable3 = (props) => {
   if (typeof rawItems === "undefined" || rawItems === null || !Array.isArray(rawItems)) {
     console.warn(__("Draggable: 'items' are not an array or are undefined!", "eightshift-ui-components"));
   }
-  const [items, setItems] = useState(fixIds(rawItems ?? []));
+  const [items, setItems] = useState(rawItems);
   useEffect(() => {
-    setItems(fixIds(rawItems, itemIdBase));
+    setItems(rawItems);
   }, [rawItems]);
   if (hidden) {
     return null;
@@ -7321,36 +7323,33 @@ const Draggable3 = (props) => {
           children: items.map((item, index) => /* @__PURE__ */ jsx(
             SortableItem,
             {
-              id: item?.id ?? index,
+              id: randomId(6),
               index,
               item,
               disabled: noReorder,
               axis,
-              children: (handleRef, isDragSource, status) => /* @__PURE__ */ jsx(
-                DraggableContext.Provider,
-                {
-                  value: { isDragSource, handleRef, status },
-                  children: children({
-                    ...item,
-                    updateData: (newValue) => {
-                      const updated = [...items].map((i2) => i2.id === item.id ? { ...i2, ...newValue } : i2);
-                      onChange(updated);
-                      setItems(updated);
-                    },
-                    itemIndex: index,
-                    deleteItem: () => {
-                      setItems([...items].filter((i2) => i2.id !== item.id));
-                      onChange([...items].filter((i2) => i2.id !== item.id));
-                      if (onAfterItemRemove) {
-                        onAfterItemRemove(item);
-                      }
-                    }
-                  })
+              children: (handleRef, isDragSource, status) => /* @__PURE__ */ jsx(DraggableContext.Provider, { value: { isDragSource, handleRef, status }, children: children({
+                ...item,
+                updateData: (newValue) => {
+                  const updated = [...items];
+                  updated[index] = {
+                    ...updated[index],
+                    ...newValue
+                  };
+                  onChange(updated);
+                  setItems(updated);
                 },
-                item.id
-              )
+                itemIndex: index,
+                deleteItem: () => {
+                  setItems([...items].filter((_2, i2) => i2 !== index));
+                  onChange([...items].filter((_2, i2) => i2 !== index));
+                  if (onAfterItemRemove) {
+                    onAfterItemRemove(item);
+                  }
+                }
+              }) })
             },
-            item?.id ?? index
+            index
           ))
         }
       )

package/dist/components/draggable-list/draggable-list-item.js

@@ -37,7 +37,7 @@ const DraggableListItem = (props) => {
             icon,
             label,
             subtitle,
-            className: clsx("es:mr-auto", labelContainerClassName),
+            className: clsx("es:mr-auto es:min-h-9", labelContainerClassName),
             iconClassName,
             labelClassName,
             subtitleClassName,

package/dist/components/draggable-list/draggable-list.js

@@ -1,16 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { useId } from "react";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { L as List, a as arrayRemove, b as arrayMove } from "../../List-BGHOoFf0.js";
 import { Container, ContainerGroup } from "../base-control/container.js";
-const fixIds = (items, itemIdBase) => {
-  return items?.map((item, i) => ({
-    ...item,
-    id: item?.id ?? `${itemIdBase}-${i}`
-  }));
-};
 /**
  * A component that allows re-ordering a list of items.
  *
@@ -58,10 +51,9 @@ const fixIds = (items, itemIdBase) => {
  * @preserve
  */
 const DraggableList = (props) => {
-  const itemIdBase = useId("draggable-list-item-");
   const {
     children,
-    items: rawItems,
+    items,
     onChange,
     icon,
     label,
@@ -77,11 +69,10 @@ const DraggableList = (props) => {
     hidden,
     ...rest
   } = props;
-  if (typeof rawItems === "undefined" || rawItems === null || !Array.isArray(rawItems)) {
+  if (typeof items === "undefined" || items === null || !Array.isArray(items)) {
     console.warn(__("DraggableList: 'items' are not an array or are undefined!", "eightshift-ui-components"));
   }
-  const items = fixIds(rawItems ?? [], itemIdBase);
-  if (hidden) {
+  if (hidden || !items?.length) {
     return null;
   }
   return /* @__PURE__ */ jsx(
@@ -109,8 +100,7 @@ const DraggableList = (props) => {
                 className: clsx("es:w-full es:list-none es:m-0!", itemContainerClassName),
                 ...rest2,
                 children: children2
-              },
-              key
+              }
             );
           },
           renderItem: ({ value, index, isDragged, isSelected, props: props2 }) => {
@@ -127,11 +117,16 @@ const DraggableList = (props) => {
                 children: children({
                   ...value,
                   updateData: (newValue) => {
-                    onChange(items.map((i) => i.id === value.id ? { ...i, ...newValue } : i));
+                    const updated = [...items];
+                    updated[index] = {
+                      ...updated[index],
+                      ...newValue
+                    };
+                    onChange(updated);
                   },
                   itemIndex: index,
                   deleteItem: () => {
-                    onChange(items.filter((i) => i.id !== value.id));
+                    onChange(items.filter((_, i) => i !== index));
                     if (onAfterItemRemove) {
                       onAfterItemRemove(value);
                     }

package/dist/components/expandable/expandable.js

@@ -387,7 +387,7 @@ const Expandable = (props) => {
               "es:h-(--disclosure-panel-height)",
               "es:opacity-0 es:blur-[1px] es:-translate-y-2",
               !isOpen && "es:rounded-t-xl",
-              isOpen && "es:rounded-t-sm es:opacity-100 es:blur-none es:translate-y-0 es:mt-1",
+              isOpen && "es:rounded-t-md es:opacity-100 es:*:motion-preset-fade-sm es:*:motion-delay-75 es:blur-none es:translate-y-1 es:mb-1",
               "es:origin-top",
               "es:bg-white es:rounded-b-xl es:inset-ring es:inset-ring-surface-200",
               "es:inset-shadow-sm es:inset-shadow-accent-600/5",

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

@@ -30,7 +30,7 @@ import { RepeaterContext } from "./repeater-context.js";
  */
 const RepeaterItem = (props) => {
   const { children, icon, label, subtitle, "aria-label": ariaLabel, className, actions, textValue, expandDisabled, menuOptions, noMenuButton, ...rest } = props;
-  const { deleteItem, duplicateItem, isDragged, isOutOfBounds, isSelected, canDelete, canAdd, allOpen, setAllOpen, setOpenItems, id, isItemOpen, noDuplicateButton } = useContext(RepeaterContext);
+  const { deleteItem, duplicateItem, isDragged, isOutOfBounds, canDelete, canAdd, allOpen, setAllOpen, setOpenItems, isItemOpen, index, noDuplicateButton } = useContext(RepeaterContext);
   return /* @__PURE__ */ jsx(
     Expandable,
     {
@@ -49,7 +49,7 @@ const RepeaterItem = (props) => {
         if (allOpen && !open) {
           setAllOpen(false);
         }
-        setOpenItems((prev) => ({ ...prev, [id]: open }));
+        setOpenItems((prev) => ({ ...prev, [index]: open }));
       },
       customOpenButton: ({ open, toggleOpen, tooltip, disabled }) => {
         return /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:gap-px", children: [
@@ -82,6 +82,7 @@ const RepeaterItem = (props) => {
                     disabled: !canDelete,
                     icon: icons.trash,
                     onPress: () => deleteItem(),
+                    danger: true,
                     children: __("Remove", "eightshift-ui-components")
                   }
                 )

package/dist/components/repeater/repeater.js

@@ -1,14 +1,14 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useId, useState } from "react";
+import { useState } from "react";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { RepeaterContext } from "./repeater-context.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { L as List, a as arrayRemove, b as arrayMove } from "../../List-BGHOoFf0.js";
 import { Menu, MenuItem, MenuSeparator } from "../menu/menu.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 /**
  * A component that allows re-ordering a list of items with additional sub-options.
  *
@@ -67,7 +67,6 @@ import { Menu, MenuItem, MenuSeparator } from "../menu/menu.js";
  * @preserve
  */
 const Repeater = (props) => {
-  const itemIdBase = `item-${useId().replaceAll(":", "")}`;
   const {
     children,
     onChange,
@@ -95,7 +94,7 @@ const Repeater = (props) => {
   } = props;
   const [allOpen, setAllOpen] = useState(false);
   const [openItems, setOpenItems] = useState({});
-  if (typeof rawItems === "undefined" || rawItems === null || !Array.isArray(rawItems)) {
+  if (typeof items === "undefined" || items === null || !Array.isArray(items)) {
     console.warn(__("Repeater: 'items' are not an array or are undefined!", "eightshift-ui-components"));
   }
   const canDelete = items.length > (minItems ?? 0);
@@ -137,7 +136,7 @@ const Repeater = (props) => {
           Button,
           {
             onPress: () => {
-              const newItem = { id: `${itemIdBase}${items.length + 1}`, ...addDefaultItem };
+              const newItem = { ...addDefaultItem };
               onChange([...items, newItem]);
               if (onAfterItemAdd) {
                 onAfterItemAdd(newItem);
@@ -145,15 +144,14 @@ const Repeater = (props) => {
             },
             size: "small",
             icon: icons.add,
-            className: clsx("es:icon:size-4", !hideEmptyState && items.length < 1 && "es:invisible"),
+            className: !hideEmptyState && items.length < 1 && "es:invisible",
             tooltip: __("Add item", "eightshift-ui-components"),
-            disabled: addDisabled || !canAdd,
-            type: "simple"
+            disabled: addDisabled || !canAdd
           }
         ),
         addButton && /* @__PURE__ */ jsx("div", { className: clsx(!hideEmptyState && items.length < 1 && "es:invisible"), children: addButton({
           addItem: (additional = {}) => {
-            const newItem = { id: `${itemIdBase}${items.length + 1}`, ...addDefaultItem, ...additional };
+            const newItem = { ...addDefaultItem, ...additional };
             onChange([...items, newItem]);
             if (onAfterItemAdd) {
               onAfterItemAdd(newItem);
@@ -167,18 +165,16 @@ const Repeater = (props) => {
         /* @__PURE__ */ jsx(
           List,
           {
-            values: items.map((item) => ({ ...item, disabled: openItems?.[item?.id] })),
+            values: items.map((item, index) => ({ ...item, disabled: openItems?.[index] })),
             onChange: ({ oldIndex, newIndex }) => onChange(newIndex === -1 ? arrayRemove(items, oldIndex) : arrayMove(items, oldIndex, newIndex)),
             renderList: ({ children: children2, props: props2 }) => {
-              const { key, ...rest } = props2;
               return /* @__PURE__ */ jsx(
                 "ul",
                 {
-                  className: clsx("es:w-full es:list-none es:m-0! es:flex es:flex-col es:gap-1", className),
-                  ...rest,
+                  className: clsx("es:w-full es:list-none es:m-0! es:flex es:flex-col es:gap-0.75", className),
+                  ...props2,
                   children: children2
-                },
-                key
+                }
               );
             },
             renderItem: ({ value: item, index, isDragged, isSelected, isOutOfBounds, props: props2 }) => {
@@ -195,13 +191,13 @@ const Repeater = (props) => {
                         ...item,
                         index,
                         deleteItem: () => {
-                          onChange([...items].filter((i) => i.id !== item.id));
+                          onChange([...items].filter((_, i) => i !== index));
                           if (onAfterItemRemove) {
                             onAfterItemRemove(item);
                           }
                         },
                         duplicateItem: () => {
-                          const newItem = { ...item, id: `${itemIdBase}${items.length + 1}` };
+                          const newItem = { ...item };
                           onChange([...items, newItem]);
                           if (onAfterItemAdd) {
                             onAfterItemAdd(newItem);
@@ -215,18 +211,22 @@ const Repeater = (props) => {
                         allOpen,
                         setAllOpen,
                         setOpenItems,
-                        isItemOpen: openItems?.[item?.id] ?? allOpen,
+                        isItemOpen: openItems?.[index] ?? allOpen,
                         noDuplicateButton
                       },
                       children: children({
                         ...item,
                         updateData: (newValue) => {
-                          const updated = [...items].map((i) => i.id === item.id ? { ...i, ...newValue } : i);
+                          const updated = [...items];
+                          updated[index] = {
+                            ...updated[index],
+                            ...newValue
+                          };
                           onChange(updated);
                         },
                         itemIndex: index,
                         deleteItem: () => {
-                          onChange([...items].filter((i) => i.id !== item.id));
+                          onChange([...items].filter((_, i) => i !== index));
                           if (onAfterItemRemove) {
                             onAfterItemRemove(item);
                           }
@@ -248,7 +248,7 @@ const Repeater = (props) => {
               Button,
               {
                 onPress: () => {
-                  const newItem = { id: `${itemIdBase}${items.length + 1}`, ...addDefaultItem };
+                  const newItem = { ...addDefaultItem };
                   onChange([...items, newItem]);
                   if (onAfterItemAdd) {
                     onAfterItemAdd(newItem);
@@ -263,7 +263,7 @@ const Repeater = (props) => {
             ),
             addButton && !hideEmptyState && addButton({
               addItem: (additional = {}) => {
-                const newItem = { id: `${itemIdBase}${items.length + 1}`, ...addDefaultItem, ...additional };
+                const newItem = { ...addDefaultItem, ...additional };
                 onChange([...items, newItem]);
                 if (onAfterItemAdd) {
                   onAfterItemAdd(newItem);

package/dist/components/select/async-multi-select.js

@@ -162,7 +162,7 @@ const AsyncMultiSelect = (props) => {
       return;
     }
     const selectedValues = [...selected].map((item) => {
-      const option = list.items.find((option2) => option2.value === item) || value.find((option2) => option2.value === item);
+      const option = list?.items?.find((option2) => option2.value === item) || value.find((option2) => option2.value === item);
       if (!option) {
         return null;
       }
@@ -259,7 +259,7 @@ const AsyncMultiSelect = (props) => {
     {
       selectionMode: "multiple",
       isDisabled: disabled,
-      value: currentValueKeys,
+      value: currentValueKeys ?? [],
       onChange: (selected) => handleSelectionChange(selected),
       placeholder,
       ...rest,
@@ -354,14 +354,14 @@ const AsyncMultiSelect = (props) => {
                         slot: null
                       },
                       className: "es:grid es:grid-cols-1 es:grid-rows-[auto_minmax(0,1fr)] es:p-0!",
-                      wrapperClassName: "es:w-72 es:px-1.5 es:h-fit es:from-surface-300/35 es:to-surface-300/35 es:overflow-clip",
-                      hidden: noReorder || disabled || value?.length < 2,
+                      wrapperClassName: "es:w-72 es:px-1.5 es:h-fit es:from-surface-300/35 es:to-surface-300/35 es:overflow-clip es:rounded-20!",
+                      hidden: noReorder || disabled || (value ?? [])?.length < 2,
                       children: [
-                        /* @__PURE__ */ jsx("span", { className: 'es:text-lg es:mx-auto es:my-1 es:font-variation-["wdth"_140,"wght"_320] es:text-surface-600', children: __("Item order", "eightshift-ui-components") }),
+                        /* @__PURE__ */ jsx("span", { className: 'es:text-base es:mx-auto es:my-1 es:font-variation-["wdth"_140,"wght"_320] es:text-surface-600', children: __("Item order", "eightshift-ui-components") }),
                         /* @__PURE__ */ jsx(
                           DraggableList,
                           {
-                            items: value,
+                            items: value ?? [],
                             onChange: (value2) => {
                               handleSelectionChange(new Set(value2?.map((item) => item?.value ?? item)));
                             },
@@ -383,7 +383,7 @@ const AsyncMultiSelect = (props) => {
                                   iconClassName: "es:pointer-events-none es:select-none",
                                   labelClassName: "es:line-clamp-1",
                                   subtitleClassName: "es:line-clamp-1",
-                                  className: clsx("es:min-h-8 es:flex es:items-center es:justify-between", realItem?.icon ? "es:pl-1" : "es:pl-2")
+                                  className: clsx("es:flex es:items-center es:justify-between", realItem?.icon ? "es:pl-1" : "es:pl-2")
                                 }
                               );
                             }
@@ -468,7 +468,7 @@ const AsyncMultiSelect = (props) => {
                         $eed445e0843c11d0$export$41f133550aa26f48,
                         {
                           className: clsx("es:space-y-0.75 es:p-1.5 es:pt-0 es:any-focus:outline-hidden es:h-full es:overflow-y-auto es:rounded-t-xl", list?.isLoading && "es:hidden"),
-                          items: list.items,
+                          items: list?.items ?? [],
                           selectedKeys: list.selectedKeys,
                           selectionMode: "multiple",
                           selectionBehavior: "toggle",

package/dist/components/select/multi-select.js

@@ -308,14 +308,14 @@ const MultiSelect = (props) => {
                         slot: null
                       },
                       className: "es:grid es:grid-cols-1 es:grid-rows-[auto_minmax(0,1fr)] es:p-0!",
-                      wrapperClassName: "es:w-72 es:px-1.5 es:h-fit es:from-surface-300/35 es:to-surface-300/35 es:overflow-clip",
+                      wrapperClassName: "es:w-72 es:px-1.5 es:h-fit es:from-surface-300/35 es:to-surface-300/35 es:overflow-clip es:rounded-20!",
                       hidden: noReorder || disabled || currentValue?.length < 2,
                       children: [
-                        /* @__PURE__ */ jsx("span", { className: 'es:text-lg es:mx-auto es:my-1 es:font-variation-["wdth"_140,"wght"_320] es:text-surface-600', children: __("Item order", "eightshift-ui-components") }),
+                        /* @__PURE__ */ jsx("span", { className: 'es:text-base es:mx-auto es:my-1 es:font-variation-["wdth"_140,"wght"_320] es:text-surface-600', children: __("Item order", "eightshift-ui-components") }),
                         /* @__PURE__ */ jsx(
                           DraggableList,
                           {
-                            items: simpleValue ? value.map((item) => options.find((option) => option.value === item)) : value,
+                            items: simpleValue ? value?.map((item) => options.find((option) => option.value === item)) ?? [] : value ?? [],
                             onChange: (value2) => {
                               handleSelectionChange(new Set(value2?.map((item) => item?.value ?? item)));
                             },
@@ -333,7 +333,7 @@ const MultiSelect = (props) => {
                                   iconClassName: "es:pointer-events-none es:select-none",
                                   labelClassName: "es:line-clamp-1",
                                   subtitleClassName: "es:line-clamp-1",
-                                  className: clsx("es:min-h-8 es:flex es:items-center es:justify-between", realItem?.icon ? "es:pl-1" : "es:pl-2")
+                                  className: clsx("es:min-h-9 es:flex es:items-center es:justify-between", realItem?.icon ? "es:pl-1" : "es:pl-2")
                                 }
                               );
                             }

package/dist/components/slider/column-config-slider.js

@@ -7,7 +7,7 @@ import { BaseControl } from "../base-control/base-control.js";
 import { icons } from "../../icons/icons.js";
 import { getColumnConfigOutputText } from "./utils.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { A as AnimatePresence, m as motion } from "../../proxy-0B6wWuDe.js";
+import { A as AnimatePresence, m as motion } from "../../proxy-DkQpcQgI.js";
 /**
  * A two-thumb slider for selecting a range of columns.
  *

package/dist/components/slider/slider.js

@@ -6,7 +6,7 @@ import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { NumberPicker } from "../number-picker/number-picker.js";
 import { generateMarkers, generateGridTemplate } from "./utils.js";
 import { HStack } from "../layout/hstack.js";
-import { A as AnimatePresence, m as motion } from "../../proxy-0B6wWuDe.js";
+import { A as AnimatePresence, m as motion } from "../../proxy-DkQpcQgI.js";
 /**
  * A single/multi-thumb slider component.
  *

package/dist/components/tabs/tabs.js

@@ -460,6 +460,9 @@ const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920
  * @param {string} [props.className] - Classes to pass to the tabs container.
  * @param {TabsType} [props.type='underline'] - Design of the tabs.
  * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
+ * @param {string} [props.defaultSelectedKey] - **(uncontrolled mode)** The initial selected tab ID.
+ * @param {string} [props.selectedKey] - **(controlled mode)** The selected tab ID.
+ * @param {Function} [props.onSelectionChange] - Handler that is called when the selection changes. `(key: string) => void`.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Tabs component.
@@ -487,6 +490,7 @@ const Tabs2 = (props) => {
   let tabPanelCounter = 1;
   let tabCounter = 1;
   const preparedChildren = Array.isArray(children) ? children : [children];
+  let realTabIds = preparedChildren?.[0]?.props?.children?.map((tab, i) => tab?.props?.id ?? `tab-${baseId}-${i + 1}`);
   const childrenWithIds = preparedChildren.reduce((acc, child, index) => {
     if (child.type.displayName === "TabList") {
       const childItems = Array.isArray(child?.props?.children) ? child?.props?.children : [child?.props?.children].filter(Boolean);
@@ -504,7 +508,7 @@ const Tabs2 = (props) => {
           },
           childItems?.map(
             (innerChild, i) => cloneElement(innerChild, {
-              id: `tab-${baseId}-${i + 1}`,
+              id: innerChild?.props?.id ?? realTabIds?.[i] ?? `tab-${baseId}-${i + 1}`,
               key: i,
               isParentVertical: vertical,
               type,
@@ -518,7 +522,7 @@ const Tabs2 = (props) => {
       return [
         ...acc,
         cloneElement(child, {
-          id: `tab-${baseId}-${tabPanelCounter++}`,
+          id: realTabIds?.[tabPanelCounter++ - 1] ?? `tab-${baseId}-${tabPanelCounter++}`,
           key: index,
           className: child.props.className,
           flat,
@@ -678,6 +682,7 @@ TabList2.displayName = "TabList";
  * @param {boolean} [props.invisible] - If `true`, the tab is disabled and not rendered, but is not unmounted from the DOM.
  * @param {string} [props.label] - Tab label. **Note**: overrides inner items!
  * @param {string} [props.subtitle] - Tab subtitle. **Note**: overrides inner items!
+ * @param {string} [props.id] - The tab unique identifier.
  *
  * @returns {JSX.Element} The Tab component.
  *

package/dist/icons/icons.js

@@ -3402,8 +3402,10 @@ const icons = {
     /* @__PURE__ */ jsx("rect", { x: "1", y: "7", width: "7", height: "12", rx: "1.5", fill: "currentColor" })
   ] }),
   reorder: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
-    /* @__PURE__ */ jsx("path", { stroke: "currentColor", strokeLinecap: "round", d: "M2.5 5.5h15m-15 3h15m-15 3h15m-15 3h15", fill: "none" }),
-    /* @__PURE__ */ jsx("path", { d: "M12.148 3H7.852a.5.5 0 0 1-.326-.88L9.675.28a.5.5 0 0 1 .65 0l2.149 1.841a.5.5 0 0 1-.326.88Zm0 14H7.852a.5.5 0 0 0-.326.88l2.149 1.841a.5.5 0 0 0 .65 0l2.149-1.841a.5.5 0 0 0-.326-.88Z", fill: "currentColor" })
+    /* @__PURE__ */ jsx("path", { stroke: "currentColor", strokeLinecap: "round", d: "M2.5 5.5h15", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M17.5 8a.5.5 0 0 1 0 1h-15a.5.5 0 0 1 0-1h15Zm0 3a.5.5 0 0 1 0 1h-15a.5.5 0 0 1 0-1h15Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { stroke: "currentColor", strokeLinecap: "round", d: "M2.5 14.5h15", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M12.5 3h-5a.5.5 0 0 1-.3-.9L9.7.225a.5.5 0 0 1 .6 0L12.8 2.1a.5.5 0 0 1-.3.9Zm0 14h-5a.5.5 0 0 0-.3.9l2.5 1.875a.5.5 0 0 0 .6 0l2.5-1.875a.5.5 0 0 0-.3-.9Z", fill: "currentColor" })
   ] }),
   loaderAlt: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 19v-2m-9-7h2m13.367 6.367-1.414-1.414m-11.32 1.414 1.414-1.414M10 3V1m7 9h2M5.047 5.047 3.633 3.633m11.32 1.414 1.414-1.414M10 17v-1.555M3 10h1.555m10.396 4.951-1.1-1.1m-8.803 1.1 1.1-1.1M10 4.556V3m5.444 7H17M6.147 6.147l-1.1-1.1m8.806 1.1 1.1-1.1", stroke: "currentColor", strokeLinecap: "round", fill: "none" }) })
 };

package/dist/{proxy-0B6wWuDe.js → proxy-DkQpcQgI.js}

@@ -6184,6 +6184,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.treeScale = { x: 1, y: 1 };
       this.eventHandlers = /* @__PURE__ */ new Map();
       this.hasTreeAnimated = false;
+      this.layoutVersion = 0;
       this.updateScheduled = false;
       this.scheduleUpdate = () => this.update();
       this.projectionUpdateScheduled = false;
@@ -6201,6 +6202,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         this.nodes.forEach(cleanDirtyNodes);
       };
       this.resolvedRelativeTargetAt = 0;
+      this.linkedParentVersion = 0;
       this.hasProjected = false;
       this.isVisible = true;
       this.animationProgress = 0;
@@ -6456,6 +6458,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       }
       const prevLayout = this.layout;
       this.layout = this.measure(false);
+      this.layoutVersion++;
       this.layoutCorrected = createBox();
       this.isLayoutDirty = false;
       this.projectionDelta = void 0;
@@ -6623,17 +6626,15 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       if (!this.layout || !(layout2 || layoutId))
         return;
       this.resolvedRelativeTargetAt = frameData.timestamp;
+      const relativeParent = this.getClosestProjectingParent();
+      if (relativeParent && this.linkedParentVersion !== relativeParent.layoutVersion && !relativeParent.options.layoutRoot) {
+        this.removeRelativeTarget();
+      }
       if (!this.targetDelta && !this.relativeTarget) {
-        const relativeParent = this.getClosestProjectingParent();
-        if (relativeParent && relativeParent.layout && this.animationProgress !== 1) {
-          this.relativeParent = relativeParent;
-          this.forceRelativeParentToResolveTarget();
-          this.relativeTarget = createBox();
-          this.relativeTargetOrigin = createBox();
-          calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
-          copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+        if (relativeParent && relativeParent.layout) {
+          this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox);
         } else {
-          this.relativeParent = this.relativeTarget = void 0;
+          this.removeRelativeTarget();
         }
       }
       if (!this.relativeTarget && !this.targetDelta)
@@ -6657,14 +6658,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       }
       if (this.attemptToResolveRelativeTarget) {
         this.attemptToResolveRelativeTarget = false;
-        const relativeParent = this.getClosestProjectingParent();
         if (relativeParent && Boolean(relativeParent.resumingFrom) === Boolean(this.resumingFrom) && !relativeParent.options.layoutScroll && relativeParent.target && this.animationProgress !== 1) {
-          this.relativeParent = relativeParent;
-          this.forceRelativeParentToResolveTarget();
-          this.relativeTarget = createBox();
-          this.relativeTargetOrigin = createBox();
-          calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
-          copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+          this.createRelativeTarget(relativeParent, this.target, relativeParent.target);
         } else {
           this.relativeParent = this.relativeTarget = void 0;
         }
@@ -6683,6 +6678,18 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     isProjecting() {
       return Boolean((this.relativeTarget || this.targetDelta || this.options.layoutRoot) && this.layout);
     }
+    createRelativeTarget(relativeParent, layout2, parentLayout) {
+      this.relativeParent = relativeParent;
+      this.linkedParentVersion = relativeParent.layoutVersion;
+      this.forceRelativeParentToResolveTarget();
+      this.relativeTarget = createBox();
+      this.relativeTargetOrigin = createBox();
+      calcRelativePosition(this.relativeTargetOrigin, layout2, parentLayout);
+      copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+    }
+    removeRelativeTarget() {
+      this.relativeParent = this.relativeTarget = void 0;
+    }
     calcProjection() {
       const lead = this.getLead();
       const isShared = Boolean(this.resumingFrom) || this !== lead;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "6.0.5",
+	"version": "6.0.8",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -88,7 +88,7 @@
 		"just-throttle": "^4.2.0",
 		"lightningcss": "^1.30.2",
 		"postcss": "^8.5.6",
-		"prettier": "^3.7.0",
+		"prettier": "^3.7.3",
 		"prettier-plugin-tailwindcss": "^0.7.1",
 		"react": "^18.3.1",
 		"react-aria": "^3.44.0",
@@ -101,12 +101,12 @@
 		"tailwindcss": "^4.1.17",
 		"tailwindcss-motion": "^1.1.1",
 		"tailwindcss-react-aria-components": "^2.0.1",
-		"vite": "^7.2.4",
+		"vite": "^7.2.6",
 		"vite-plugin-lib-inject-css": "^2.2.2"
 	},
 	"dependencies": {
 		"@fontsource-variable/geist-mono": "^5.2.7",
 		"@fontsource-variable/roboto-flex": "^5.2.8",
-		"motion": "^12.23.24"
+		"motion": "^12.23.25"
 	}
 }