@eightshift/ui-components 1.4.5 → 1.4.7

package/dist/components/animated-visibility/animated-visibility.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as React from "react";
-import { createContext, useLayoutEffect, useEffect, useContext, useRef, useInsertionEffect, useCallback, useMemo, forwardRef, Fragment, createElement, useId, Component, useState, cloneElement, Children, isValidElement } from "react";
+import { createContext, useLayoutEffect, useEffect, useContext, useRef, useInsertionEffect, useCallback, useMemo, forwardRef, Fragment, createElement, useId, Component, Children, isValidElement, useState } from "react";
 const MotionConfigContext = createContext({
   transformPagePoint: (p) => p,
   isStatic: false,
@@ -498,40 +498,6 @@ function isForcedMotionValue(key, { layout: layout2, layoutId }) {
   return transformProps.has(key) || key.startsWith("origin") || (layout2 || layoutId !== void 0) && (!!scaleCorrectors[key] || key === "opacity");
 }
 const isMotionValue = (value) => Boolean(value && value.getVelocity);
-const translateAlias = {
-  x: "translateX",
-  y: "translateY",
-  z: "translateZ",
-  transformPerspective: "perspective"
-};
-const numTransforms = transformPropOrder.length;
-function buildTransform(transform, transformIsDefault, transformTemplate) {
-  let transformString = "";
-  for (let i = 0; i < numTransforms; i++) {
-    const key = transformPropOrder[i];
-    if (transform[key] !== void 0) {
-      const transformName = translateAlias[key] || key;
-      transformString += `${transformName}(${transform[key]}) `;
-    }
-  }
-  transformString = transformString.trim();
-  if (transformTemplate) {
-    transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
-  } else if (transformIsDefault) {
-    transformString = "none";
-  }
-  return transformString;
-}
-const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
-const isCSSVariableName = checkStringStartsWith("--");
-const startsAsVariableToken = checkStringStartsWith("var(--");
-const isCSSVariableToken = (value) => {
-  const startsWithToken = startsAsVariableToken(value);
-  if (!startsWithToken)
-    return false;
-  return singleCssVariableRegex.test(value.split("/*")[0].trim());
-};
-const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
 const getValueAsType = (value, type) => {
   return type && typeof value === "number" ? type.transform(value) : value;
 };
@@ -652,36 +618,82 @@ const numberValueTypes = {
   strokeOpacity: alpha,
   numOctaves: int
 };
+const translateAlias = {
+  x: "translateX",
+  y: "translateY",
+  z: "translateZ",
+  transformPerspective: "perspective"
+};
+const numTransforms = transformPropOrder.length;
+function buildTransform(latestValues, transform, transformTemplate) {
+  let transformString = "";
+  let transformIsDefault = true;
+  for (let i = 0; i < numTransforms; i++) {
+    const key = transformPropOrder[i];
+    const value = latestValues[key];
+    if (value === void 0)
+      continue;
+    let valueIsDefault = true;
+    if (typeof value === "number") {
+      valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
+    } else {
+      valueIsDefault = parseFloat(value) === 0;
+    }
+    if (!valueIsDefault || transformTemplate) {
+      const valueAsType = getValueAsType(value, numberValueTypes[key]);
+      if (!valueIsDefault) {
+        transformIsDefault = false;
+        const transformName = translateAlias[key] || key;
+        transformString += `${transformName}(${valueAsType}) `;
+      }
+      if (transformTemplate) {
+        transform[key] = valueAsType;
+      }
+    }
+  }
+  transformString = transformString.trim();
+  if (transformTemplate) {
+    transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
+  } else if (transformIsDefault) {
+    transformString = "none";
+  }
+  return transformString;
+}
+const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
+const isCSSVariableName = checkStringStartsWith("--");
+const startsAsVariableToken = checkStringStartsWith("var(--");
+const isCSSVariableToken = (value) => {
+  const startsWithToken = startsAsVariableToken(value);
+  if (!startsWithToken)
+    return false;
+  return singleCssVariableRegex.test(value.split("/*")[0].trim());
+};
+const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
 function buildHTMLStyles(state, latestValues, transformTemplate) {
-  const { style, vars, transform, transformOrigin } = state;
+  const { style, vars, transformOrigin } = state;
   let hasTransform2 = false;
   let hasTransformOrigin = false;
-  let transformIsNone = true;
   for (const key in latestValues) {
     const value = latestValues[key];
-    if (isCSSVariableName(key)) {
-      vars[key] = value;
-      continue;
-    }
-    const valueType = numberValueTypes[key];
-    const valueAsType = getValueAsType(value, valueType);
     if (transformProps.has(key)) {
       hasTransform2 = true;
-      transform[key] = valueAsType;
-      if (!transformIsNone)
-        continue;
-      if (value !== (valueType.default || 0))
-        transformIsNone = false;
-    } else if (key.startsWith("origin")) {
-      hasTransformOrigin = true;
-      transformOrigin[key] = valueAsType;
+      continue;
+    } else if (isCSSVariableName(key)) {
+      vars[key] = value;
+      continue;
     } else {
-      style[key] = valueAsType;
+      const valueAsType = getValueAsType(value, numberValueTypes[key]);
+      if (key.startsWith("origin")) {
+        hasTransformOrigin = true;
+        transformOrigin[key] = valueAsType;
+      } else {
+        style[key] = valueAsType;
+      }
     }
   }
   if (!latestValues.transform) {
     if (hasTransform2 || transformTemplate) {
-      style.transform = buildTransform(state.transform, transformIsNone, transformTemplate);
+      style.transform = buildTransform(latestValues, state.transform, transformTemplate);
     } else if (style.transform) {
       style.transform = "none";
     }
@@ -2358,13 +2370,9 @@ function spring({ keyframes: keyframes2, restDelta, restSpeed, ...options }) {
     next: (t) => {
       const current = resolveSpring(t);
       if (!isResolvedFromDuration) {
-        let currentVelocity = initialVelocity;
-        if (t !== 0) {
-          if (dampingRatio < 1) {
-            currentVelocity = calcGeneratorVelocity(resolveSpring, t, current);
-          } else {
-            currentVelocity = 0;
-          }
+        let currentVelocity = 0;
+        if (dampingRatio < 1) {
+          currentVelocity = t === 0 ? secondsToMilliseconds(initialVelocity) : calcGeneratorVelocity(resolveSpring, t, current);
         }
         const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
         const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
@@ -3231,6 +3239,8 @@ class AcceleratedAnimation extends BaseAnimation {
     this.isStopped = true;
     if (this.state === "idle")
       return;
+    this.resolveFinishedPromise();
+    this.updateFinishedPromise();
     const { resolved } = this;
     if (!resolved)
       return;
@@ -3477,7 +3487,7 @@ class MotionValue {
    * @internal
    */
   constructor(init, options = {}) {
-    this.version = "11.3.17";
+    this.version = "11.3.22";
     this.canTrackVelocity = null;
     this.events = {};
     this.updateAndNotify = (v, render = true) => {
@@ -3895,9 +3905,7 @@ function animateVisualElement(visualElement, definition, options = {}) {
     animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));
   }
   return animation.then(() => {
-    frame.postRender(() => {
-      visualElement.notify("AnimationComplete", definition);
-    });
+    visualElement.notify("AnimationComplete", definition);
   });
 }
 const reversePriorityOrder = [...variantPriorityOrder].reverse();
@@ -6511,7 +6519,7 @@ function updateMotionValuesFromProps(element, next, prev) {
     if (isMotionValue(nextValue)) {
       element.addValue(key, nextValue);
       if (process.env.NODE_ENV === "development") {
-        warnOnce(nextValue.version === "11.3.17", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.17 may not work as expected.`);
+        warnOnce(nextValue.version === "11.3.22", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.22 may not work as expected.`);
       }
     } else if (isMotionValue(prevValue)) {
       element.addValue(key, motionValue(nextValue, { owner: element }));
@@ -7011,25 +7019,6 @@ const preloadedFeatures = {
   ...layout
 };
 const motion = /* @__PURE__ */ createMotionProxy((Component2, config) => createDomMotionConfig(Component2, config, preloadedFeatures, createDomVisualElement));
-function useIsMounted() {
-  const isMounted = useRef(false);
-  useIsomorphicLayoutEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-  return isMounted;
-}
-function useForceUpdate() {
-  const isMounted = useIsMounted();
-  const [forcedRenderCount, setForcedRenderCount] = useState(0);
-  const forceRender = useCallback(() => {
-    isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
-  }, [forcedRenderCount]);
-  const deferredForceRender = useCallback(() => frame.postRender(forceRender), [forceRender]);
-  return [deferredForceRender, forcedRenderCount];
-}
 class PopChildMeasure extends React.Component {
   getSnapshotBeforeUpdate(prevProps) {
     const element = this.props.childRef.current;
@@ -7130,16 +7119,7 @@ const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, p
 function newChildrenMap() {
   return /* @__PURE__ */ new Map();
 }
-function useUnmountEffect(callback) {
-  return useEffect(() => () => callback(), []);
-}
 const getChildKey = (child) => child.key || "";
-function updateChildLookup(children, allChildren) {
-  children.forEach((child) => {
-    const key = getChildKey(child);
-    allChildren.set(key, child);
-  });
-}
 function onlyElements(children) {
   const filtered = [];
   Children.forEach(children, (child) => {
@@ -7148,83 +7128,73 @@ function onlyElements(children) {
   });
   return filtered;
 }
-const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync" }) => {
+const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync" }) => {
   invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
-  const forceRender = useContext(LayoutGroupContext).forceRender || useForceUpdate()[0];
-  const isMounted = useIsMounted();
-  const filteredChildren = onlyElements(children);
-  let childrenToRender = filteredChildren;
-  const exitingChildren = useRef(/* @__PURE__ */ new Map()).current;
-  const presentChildren = useRef(childrenToRender);
-  const allChildren = useRef(/* @__PURE__ */ new Map()).current;
+  const presentChildren = useMemo(() => onlyElements(children), [children]);
+  const presentKeys = presentChildren.map(getChildKey);
   const isInitialRender = useRef(true);
+  const pendingPresentChildren = useRef(presentChildren);
+  const exitComplete = useConstant(() => /* @__PURE__ */ new Map());
+  const [diffedChildren, setDiffedChildren] = useState(presentChildren);
+  const [renderedChildren, setRenderedChildren] = useState(presentChildren);
   useIsomorphicLayoutEffect(() => {
     isInitialRender.current = false;
-    updateChildLookup(filteredChildren, allChildren);
-    presentChildren.current = childrenToRender;
-  });
-  useUnmountEffect(() => {
-    isInitialRender.current = true;
-    allChildren.clear();
-    exitingChildren.clear();
-  });
-  if (isInitialRender.current) {
-    return jsx(Fragment$1, { children: childrenToRender.map((child) => jsx(PresenceChild, { isPresent: true, initial: initial ? void 0 : false, presenceAffectsLayout, mode, children: child }, getChildKey(child))) });
-  }
-  childrenToRender = [...childrenToRender];
-  const presentKeys = presentChildren.current.map(getChildKey);
-  const targetKeys = filteredChildren.map(getChildKey);
-  const numPresent = presentKeys.length;
-  for (let i = 0; i < numPresent; i++) {
-    const key = presentKeys[i];
-    if (targetKeys.indexOf(key) === -1 && !exitingChildren.has(key)) {
-      exitingChildren.set(key, void 0);
-    }
-  }
-  if (mode === "wait" && exitingChildren.size) {
-    childrenToRender = [];
-  }
-  exitingChildren.forEach((component, key) => {
-    if (targetKeys.indexOf(key) !== -1)
-      return;
-    const child = allChildren.get(key);
-    if (!child)
-      return;
-    const insertionIndex = presentKeys.indexOf(key);
-    let exitingComponent = component;
-    if (!exitingComponent) {
-      const onExit = () => {
-        exitingChildren.delete(key);
-        const leftOverKeys = Array.from(allChildren.keys()).filter((childKey) => !targetKeys.includes(childKey));
-        leftOverKeys.forEach((leftOverKey) => allChildren.delete(leftOverKey));
-        presentChildren.current = filteredChildren.filter((presentChild) => {
-          const presentChildKey = getChildKey(presentChild);
-          return (
-            // filter out the node exiting
-            presentChildKey === key || // filter out the leftover children
-            leftOverKeys.includes(presentChildKey)
-          );
-        });
-        if (!exitingChildren.size) {
-          if (isMounted.current === false)
-            return;
-          forceRender();
-          onExitComplete && onExitComplete();
+    pendingPresentChildren.current = presentChildren;
+    for (let i = 0; i < renderedChildren.length; i++) {
+      const key = getChildKey(renderedChildren[i]);
+      if (!presentKeys.includes(key)) {
+        if (exitComplete.get(key) !== true) {
+          exitComplete.set(key, false);
         }
-      };
-      exitingComponent = jsx(PresenceChild, { isPresent: false, onExitComplete: onExit, custom, presenceAffectsLayout, mode, children: child }, getChildKey(child));
-      exitingChildren.set(key, exitingComponent);
+      } else {
+        exitComplete.delete(key);
+      }
     }
-    childrenToRender.splice(insertionIndex, 0, exitingComponent);
-  });
-  childrenToRender = childrenToRender.map((child) => {
-    const key = child.key;
-    return exitingChildren.has(key) ? child : jsx(PresenceChild, { isPresent: true, presenceAffectsLayout, mode, children: child }, getChildKey(child));
-  });
-  if (process.env.NODE_ENV !== "production" && mode === "wait" && childrenToRender.length > 1) {
+  }, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
+  const exitingChildren = [];
+  if (presentChildren !== diffedChildren) {
+    let nextChildren = [...presentChildren];
+    for (let i = 0; i < renderedChildren.length; i++) {
+      const child = renderedChildren[i];
+      const key = getChildKey(child);
+      if (!presentKeys.includes(key)) {
+        nextChildren.splice(i, 0, child);
+        exitingChildren.push(child);
+      }
+    }
+    if (mode === "wait" && exitingChildren.length) {
+      nextChildren = exitingChildren;
+    }
+    setRenderedChildren(onlyElements(nextChildren));
+    setDiffedChildren(presentChildren);
+    return;
+  }
+  if (process.env.NODE_ENV !== "production" && mode === "wait" && renderedChildren.length > 1) {
     console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
   }
-  return jsx(Fragment$1, { children: exitingChildren.size ? childrenToRender : childrenToRender.map((child) => cloneElement(child)) });
+  const { forceRender } = useContext(LayoutGroupContext);
+  return jsx(Fragment$1, { children: renderedChildren.map((child) => {
+    const key = getChildKey(child);
+    const isPresent = presentChildren === renderedChildren || presentKeys.includes(key);
+    const onExit = () => {
+      if (exitComplete.has(key)) {
+        exitComplete.set(key, true);
+      } else {
+        return;
+      }
+      let isEveryExitComplete = true;
+      exitComplete.forEach((isExitComplete) => {
+        if (!isExitComplete)
+          isEveryExitComplete = false;
+      });
+      if (isEveryExitComplete) {
+        forceRender === null || forceRender === void 0 ? void 0 : forceRender();
+        setRenderedChildren(pendingPresentChildren.current);
+        onExitComplete && onExitComplete();
+      }
+    };
+    return jsx(PresenceChild, { isPresent, initial: !isInitialRender.current || initial ? void 0 : false, custom: isPresent ? void 0 : custom, presenceAffectsLayout, mode, onExitComplete: isPresent ? void 0 : onExit, children: child }, key);
+  }) });
 };
 /**
  * Component that allows animating the visibility of its children.

package/dist/components/component-toggle/component-toggle.js

@@ -108,6 +108,7 @@ const ComponentToggle = (props) => {
         }
       ),
       disabled: !useComponent || expandButtonDisabled,
+      noFocusHandling: true,
       children: !expandButtonDisabled && /* @__PURE__ */ jsx("div", { className: contentClassName, children })
     }
   );

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

@@ -1755,6 +1755,7 @@ const LinkInput = (props) => {
   } = props;
   const triggerRef = useRef(null);
   const suggestionList = $f86e6c1ec7da6ebb$export$bc3384a35de93d66({
+    initialFilterText: url,
     async load({ signal, filterText }) {
       const items = await fetchSuggestions(filterText, signal);
       return {
@@ -1854,8 +1855,8 @@ 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",
-              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",
+              isEntering && "es-uic-animate-in es-uic-fade-in-0 es-uic-slide-in-from-top-3 es-uic-fill-mode-forwards",
+              isExiting && "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: {

package/dist/components/menu/menu.js

@@ -1086,8 +1086,7 @@ const Menu = (props) => {
             children: /* @__PURE__ */ jsx(
               $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
               {
-                "aria-label": ariaLabel,
-                className: "focus:es-uic-outline-none",
+                className: "es-uic-outline-none",
                 ...props,
                 ...additionalProps,
                 children

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

@@ -236,7 +236,7 @@ const NumberPicker = ({
                   {
                     onFocus: () => setIsInputFocused(true),
                     onBlur: () => setIsInputFocused(false),
-                    className: "es-uic-col-start-2 es-uic-row-span-2 es-uic-bg-transparent es-uic-py-1 es-uic-text-sm es-uic-tabular-nums selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950 focus:es-uic-outline-none",
+                    className: "es-uic-col-start-2 es-uic-row-span-2 !es-uic-border-none es-uic-bg-transparent !es-uic-px-0 !es-uic-py-1 es-uic-text-sm es-uic-tabular-nums !es-uic-shadow-none !es-uic-outline-none selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950 focus:!es-uic-shadow-none focus:es-uic-outline-none",
                     placeholder,
                     style: {
                       width: fixedWidth ? `${fixedWidth}ch` : `calc(${min < 0 ? "0.75ch + " : ""}${(_d = (_c = max ?? 1e3) == null ? void 0 : _c.toString()) == null ? void 0 : _d.length} * 1ch)`

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

@@ -181,7 +181,7 @@ const OptionSelect = (props) => {
         type === "menu" && /* @__PURE__ */ jsxs(
           Menu,
           {
-            triggerLabel: !noTriggerLabel && (currentItem ? currentItem == null ? void 0 : currentItem.label : notSetLabel),
+            triggerLabel: noTriggerLabel ? null : (currentItem == null ? void 0 : currentItem.label) ?? notSetLabel,
             triggerIcon: !noTriggerIcon && // eslint-disable-next-line no-nested-ternary
             (currentItem ? typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (_a = icons) == null ? void 0 : _a[currentItem == null ? void 0 : currentItem.icon] : currentItem == null ? void 0 : currentItem.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel),
             tooltip: noTriggerLabel ? /* @__PURE__ */ jsx(
@@ -194,9 +194,10 @@ const OptionSelect = (props) => {
             ) : tooltip,
             triggerProps: {
               ...wrapperProps == null ? void 0 : wrapperProps.triggerProps,
-              "aria-label": typeof label !== "undefined" ? null : ariaLabel
+              "aria-label": typeof label !== "undefined" ? null : ariaLabel ?? label ?? tooltip
             },
             keepOpen: true,
+            "aria-label": ariaLabel ?? label ?? tooltip ?? __("Menu", "eightshift-ui-components"),
             ...wrapperProps,
             children: [
               options.map(

package/dist/components/popover/popover.js

@@ -77,9 +77,14 @@ const Popover = (props) => {
     containerPadding,
     shouldFlip,
     shouldCloseOnInteractOutside = () => true,
+    "aria-label": rawAriaLabel,
     hidden,
     ...other
   } = props;
+  let ariaLabel = rawAriaLabel;
+  if (ariaLabel === false) {
+    ariaLabel = void 0;
+  }
   if (hidden) {
     return null;
   }
@@ -98,8 +103,8 @@ const Popover = (props) => {
       containerPadding,
       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",
-        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",
+        isEntering && "es-uic-animate-in es-uic-fade-in-0 es-uic-slide-in-from-top-3 es-uic-fill-mode-forwards",
+        isExiting && "es-uic-animate-out es-uic-fade-out-0 es-uic-slide-out-to-top-2 es-uic-fill-mode-forwards",
         wrapperClassName
       ),
       style,
@@ -107,6 +112,7 @@ const Popover = (props) => {
         $de32f1b87079253c$export$3ddf2d174ce01153,
         {
           className: clsx("es-uic-p-1 es-uic-text-sm es-uic-outline-none", className),
+          "aria-label": ariaLabel,
           ...other,
           children
         }

package/dist/components/repeater/repeater.js

@@ -5082,7 +5082,7 @@ const Repeater = (props) => {
   const [items, setItems] = useState(fixIds(rawItems));
   const [canDelete, setCanDelete] = useState(false);
   const [isPanelOpen, setIsPanelOpen] = useState({});
-  const isAnyPanelOpen = ((_a3 = Object.keys(isPanelOpen)) == null ? void 0 : _a3.length) < 1 ? false : Object.entries(isPanelOpen).every(([_2, v2]) => v2 === true);
+  const isAnyPanelOpen = ((_a3 = Object.keys(isPanelOpen)) == null ? void 0 : _a3.length) < 1 ? false : Object.entries(isPanelOpen).some(([_2, v2]) => v2 === true);
   if (canDelete && items.length < (minItems ?? 1)) {
     setCanDelete(false);
   }

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

@@ -92,8 +92,11 @@ const AsyncMultiSelect = (props) => {
   const idBase = useId();
   const value = rawValue.map((item, index) => ({
     ...item,
-    id: `${idBase}-${index}`
+    id: (item == null ? void 0 : item.value) ?? `${idBase}-${index}`
   }));
+  const modifiedOnChange = (v) => {
+    onChange(v == null ? void 0 : v.map((item) => ({ ...item, id: void 0 })));
+  };
   if (hidden) {
     return null;
   }
@@ -114,7 +117,7 @@ const AsyncMultiSelect = (props) => {
         DndContext,
         {
           modifiers: [restrictToParentElement],
-          onDragEnd: getDragEndHandler(onChange, value),
+          onDragEnd: getDragEndHandler(modifiedOnChange, value),
           children: /* @__PURE__ */ jsx(SortableContext, { items: value.map(({ id }) => id), children: /* @__PURE__ */ jsx(
             AsyncSelect$1,
             {
@@ -123,7 +126,7 @@ const AsyncMultiSelect = (props) => {
               loadOptions: customLoadOptions,
               defaultOptions: preloadOptions,
               value,
-              onChange,
+              onChange: modifiedOnChange,
               closeMenuOnSelect: !keepMenuOpenAfterSelect,
               isClearable: clearable,
               isSearchable: !noSearch,

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

@@ -105,7 +105,10 @@ const AsyncSelect = (props) => {
           loadOptions: customLoadOptions,
           defaultOptions: preloadOptions,
           value,
-          onChange,
+          onChange: (value2) => {
+            delete value2.id;
+            onChange(value2);
+          },
           closeMenuOnSelect: !keepMenuOpenAfterSelect,
           isClearable: clearable,
           isSearchable: !noSearch,

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

@@ -4,7 +4,7 @@ import { S as StateManagedSelect$1 } from "../../react-select.esm-DkSeQzOP.js";
 import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-DTvEidE3.js";
 import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
 import { CustomSelectDefaultMultiValueRemove, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
-import { getValue, customOnChange } from "./shared.js";
+import { getValue } from "./shared.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { eightshiftSelectClasses } from "./styles.js";
 import { c as components } from "../../index-a301f526.esm-B9tWL9yi.js";
@@ -87,8 +87,15 @@ const MultiSelect = (props) => {
   const idBase = useId();
   const value = getValue(simpleValue, rawValue, options).map((item, index) => ({
     ...item,
-    id: `${idBase}-${index}`
+    id: (simpleValue ? item : item == null ? void 0 : item.value) ?? `${idBase}-${index}`
   }));
+  const modifiedOnChange = (v) => {
+    if (simpleValue) {
+      onChange(v == null ? void 0 : v.map(({ value: value2 }) => value2));
+      return;
+    }
+    onChange(v == null ? void 0 : v.map((item) => ({ ...item, id: void 0 })));
+  };
   if (hidden) {
     return null;
   }
@@ -105,7 +112,7 @@ const MultiSelect = (props) => {
         DndContext,
         {
           modifiers: [restrictToParentElement],
-          onDragEnd: getDragEndHandler(onChange, value),
+          onDragEnd: getDragEndHandler(modifiedOnChange, value),
           children: /* @__PURE__ */ jsx(SortableContext, { items: value.map(({ id }) => id), children: /* @__PURE__ */ jsx(
             StateManagedSelect$1,
             {
@@ -113,7 +120,7 @@ const MultiSelect = (props) => {
               unstyled: true,
               options: options.map((item) => ({ id: item.value, ...item })),
               value,
-              onChange: (v) => customOnChange(simpleValue, v, onChange),
+              onChange: modifiedOnChange,
               closeMenuOnSelect: !keepMenuOpenAfterSelect,
               isClearable: clearable,
               isSearchable: !noSearch,

package/dist/components/select/shared.js

@@ -10,66 +10,17 @@
  * @preserve
  */
 const getValue = (simpleValue, value, options) => {
-  if (!simpleValue) {
-    return value;
-  }
   if (Array.isArray(value)) {
-    return value.map((value2) => options == null ? void 0 : options.find(({ value: itemValue }) => itemValue === value2));
-  }
-  return options == null ? void 0 : options.find(({ value: itemValue }) => itemValue === value);
-};
-/**
- * Handles the `onChange` callback.
- *
- * @param {boolean} simpleValue - Whether `simpleValue` is set.
- * @param {string|{label: string, value: string, metadata: Object<string, any>[]}} newValue - The new value to be set.
- * @param {Function} onChange - The `onChange` callback passed to the component.
- * @returns {void}
- *
- * @preserve
- */
-const customOnChange = (simpleValue, newValue, onChange) => {
-  if (typeof newValue === "undefined" || newValue === null || newValue === "") {
-    onChange(void 0);
-    return;
-  }
-  delete newValue.id;
-  if (!simpleValue) {
-    onChange(newValue);
-    return;
-  }
-  if (Array.isArray(newValue)) {
-    onChange(newValue.map((item) => item == null ? void 0 : item.value));
-    return;
+    if (simpleValue) {
+      return value.map((value2) => options == null ? void 0 : options.find(({ value: itemValue }) => itemValue === value2));
+    }
+    return value;
   }
-  onChange(newValue == null ? void 0 : newValue.value);
-};
-/**
- * Handles the `onChange` callback.
- *
- * @param {object[]} items - Current items.
- * @param {Function} onChange - The `onChange` callback passed to the component.
- * @returns {void}
- *
- * @preserve
- */
-const fixIds = (items, onChange) => {
-  const allIds = (items == null ? void 0 : items.map(({ id }) => id)) ?? [];
-  const hasDuplicates = (input) => {
-    var _a;
-    return ((_a = new Set(input)) == null ? void 0 : _a.size) !== (input == null ? void 0 : input.length);
-  };
-  const hasMissingIds = items == null ? void 0 : items.some(({ id }) => typeof id === "undefined" || id === null || id === "");
-  if (hasDuplicates(allIds) && (items == null ? void 0 : items.length) > 0 || hasMissingIds) {
-    const newItems = [...items].map((item, index) => ({
-      ...item,
-      id: index + 1
-    }));
-    onChange(newItems);
+  if (simpleValue) {
+    return options == null ? void 0 : options.find(({ value: itemValue }) => itemValue === value);
   }
+  return value;
 };
 export {
-  customOnChange,
-  fixIds,
   getValue
 };