@eightshift/ui-components 1.4.4 → 1.4.6

package/dist/assets/wp-ui-enhancements.css

@@ -1 +1 @@
-.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:-webkit-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:-moz-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:is(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input{border-radius:.375rem!important}.components-input-control__container,.components-combobox-control__suggestions-container,.components-checkbox-control__input,button.components-toggle-group-control-option-base,.editor-post-visibility__password-input{border-radius:.25rem!important}.components-button-group .components-button:first-child{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.components-button-group .components-button:last-child{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.components-popover__content{border-radius:.5rem!important}.block-editor-inserter__search{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.components-base-control__label,.components-input-control__label,.components-custom-select-control__label{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:400!important}.edit-post-sidebar{width:20rem!important}.block-list-appender.wp-block{padding:.25rem!important;position:static!important}.components-dropdown.block-editor-inserter{width:-moz-fit-content!important;width:fit-content!important;margin-left:auto!important;margin-right:auto!important}.block-editor-block-list__block-crash-warning{--tw-shadow:var(--tw-shadow-colored)!important;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;--tw-shadow-color:#b91c1c1a!important;border-color:#b91c1c26!important;border-radius:.5rem!important}.block-editor-block-list__block-crash-warning .block-editor-warning__message{--tw-text-opacity:1!important;color:rgb(69 10 10/var(--tw-text-opacity))!important}.block-editor-block-contextual-toolbar,.block-editor-block-parent-selector__button{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item{border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item:after{content:var(--tw-content)!important;border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item svg{--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.block-editor-list-view-tree .block-editor-block-icon{border-radius:.25rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:first-child{border-top-left-radius:.5rem!important;border-bottom-left-radius:.5rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:last-child{border-top-right-radius:.5rem!important;border-bottom-right-radius:.5rem!important}.block-editor-block-inspector .block-editor-block-card .block-editor-block-icon{border-radius:.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender{width:-moz-fit-content;width:fit-content}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{width:2.25rem!important;height:2.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{border-radius:.375rem!important}.edit-post-header__toolbar .components-button{min-height:2.25rem!important}.edit-post-header__toolbar .components-button{min-width:2.25rem!important}.editor-styles-wrapper .wp-block:not(:-webkit-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:-moz-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:is(.editor-post-title,.block-list-appender)){max-width:100%!important}.components-tooltip{--tw-border-opacity:1;border-width:1px;border-color:rgb(31 41 55/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(24px);--tw-backdrop-brightness:brightness(1.05);--tw-backdrop-saturate:saturate(1.5);-webkit-backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);background-color:#030712b3;padding:.125rem .25rem;border-radius:.375rem!important}.components-tooltip:has(>:first-child){--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity));background-color:#fffc}
+.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.editor-document-tools__left .components-button,.editor-header__center .components-button,.editor-header__settings .components-button,.edit-post-sidebar .components-button:not(:-webkit-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input,.media-modal-content,.media-modal-content .components-button,.components-guide__container .components-button,.components-notice__content .components-button,.editor-post-featured-image__toggle.components-button{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.editor-document-tools__left .components-button,.editor-header__center .components-button,.editor-header__settings .components-button,.edit-post-sidebar .components-button:not(:-moz-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input,.media-modal-content,.media-modal-content .components-button,.components-guide__container .components-button,.components-notice__content .components-button,.editor-post-featured-image__toggle.components-button{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.editor-document-tools__left .components-button,.editor-header__center .components-button,.editor-header__settings .components-button,.edit-post-sidebar .components-button:not(:is(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input,.media-modal-content,.media-modal-content .components-button,.components-guide__container .components-button,.components-notice__content .components-button,.editor-post-featured-image__toggle.components-button{border-radius:.375rem!important}.components-input-control__container,.components-combobox-control__suggestions-container,.components-checkbox-control__input,button.components-toggle-group-control-option-base,.editor-post-visibility__password-input{border-radius:.25rem!important}.components-button-group .components-button:first-child{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.components-button-group .components-button:last-child{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.components-popover__content,.components-guide{border-radius:.5rem!important}.block-editor-inserter__search{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.media-menu-item.active{border-top-left-radius:.375rem!important;border-top-right-radius:.375rem!important}.components-base-control__label,.components-input-control__label,.components-custom-select-control__label{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:400!important}.edit-post-sidebar,.interface-interface-skeleton__sidebar:not(:empty)>.interface-complementary-area__fill[style="width: 280px;"],.interface-complementary-area.editor-sidebar{width:20rem!important}.block-list-appender.wp-block{padding:.25rem!important;position:static!important}.components-dropdown.block-editor-inserter{width:-moz-fit-content!important;width:fit-content!important;margin-left:auto!important;margin-right:auto!important}.block-editor-block-list__block-crash-warning{--tw-shadow:var(--tw-shadow-colored)!important;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;--tw-shadow-color:#b91c1c1a!important;border-color:#b91c1c26!important;border-radius:.5rem!important}.block-editor-block-list__block-crash-warning .block-editor-warning__message{--tw-text-opacity:1!important;color:rgb(69 10 10/var(--tw-text-opacity))!important}.block-editor-block-contextual-toolbar,.block-editor-block-parent-selector__button{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item{border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item:after{content:var(--tw-content)!important;border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item svg{--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.block-editor-list-view-tree .block-editor-block-icon{border-radius:.25rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:first-child{border-top-left-radius:.5rem!important;border-bottom-left-radius:.5rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:last-child{border-top-right-radius:.5rem!important;border-bottom-right-radius:.5rem!important}.block-editor-block-inspector .block-editor-block-card .block-editor-block-icon{border-radius:.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender{width:-moz-fit-content;width:fit-content}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{width:2.25rem!important;height:2.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{border-radius:.375rem!important}:is(.edit-post-header__toolbar,.edit-post-header__settings,.editor-document-tools__left,.editor-header__center,.editor-header__settings) .components-button{min-height:2.25rem!important}:is(.edit-post-header__toolbar,.edit-post-header__settings,.editor-document-tools__left,.editor-header__center,.editor-header__settings) .components-button{min-width:2.25rem!important}.editor-styles-wrapper .wp-block:not(:-webkit-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:-moz-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:is(.editor-post-title,.block-list-appender)){max-width:100%!important}.components-tooltip{--tw-border-opacity:1;border-width:1px;border-color:rgb(31 41 55/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(24px);--tw-backdrop-brightness:brightness(1.05);--tw-backdrop-saturate:saturate(1.5);-webkit-backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);background-color:#030712b3;padding:.125rem .25rem;border-radius:.375rem!important}.components-tooltip:has(>:first-child){--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity));background-color:#fffc}

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/button/button.js

@@ -93,7 +93,7 @@ const $13c3c67164f4d5be$export$4c260019440d418f = /* @__PURE__ */ forwardRef($13
  * @param {ButtonType} [props.type='default'] - The type of the button.
  * @param {boolean} [props.disabled] - If `true`, the button is disabled.
  * @param {string} [props.className] - Classes to pass to the button.
- * @param {string} [props.tooltip] - Tooltip text to display on hover.
+ * @param {string|boolean} [props.tooltip] - Tooltip text to display on hover. If set to `true` and an `aria-label` is not provided, the tooltip text will be used as the `aria-label`.
  * @param {Function} [props.onPress] - Function to run when the button is pressed.
  * @param {React.Ref} [props.forwardedRef] - Ref to forward to the button. Use the same as the `ref` prop.
  * @param {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper.
@@ -121,7 +121,7 @@ const Button = (props) => {
     type = "default",
     disabled,
     className,
-    tooltip,
+    tooltip: rawTooltip,
     onPress,
     forwardedRef,
     wrapperClassName,
@@ -130,6 +130,10 @@ const Button = (props) => {
     hidden,
     ...other
   } = props;
+  let tooltip = rawTooltip;
+  if (rawTooltip === true && (ariaLabel == null ? void 0 : ariaLabel.length) > 0) {
+    tooltip = ariaLabel;
+  }
   const objRef = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
   if (hidden) {
     return null;

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

@@ -143,6 +143,7 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ forwardRef($bc
  * @param {boolean} [props.disabled] - If `true`, the input is disabled.
  * @param {boolean} [props.readOnly] - If `true`, the input is read-only.
  * @param {string} [props.className] - Classes to pass to the input field.
+ * @param {string} [props.wrapperClassName] - Classes to pass to the input field wrapping element.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The InputField component.
@@ -159,7 +160,7 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ forwardRef($bc
  * @preserve
  */
 const InputField = (props) => {
-  const { icon, label, subtitle, help, actions, value, onChange, type = "text", disabled, readOnly, className, hidden, ...other } = props;
+  const { icon, label, subtitle, help, actions, value, onChange, type = "text", disabled, readOnly, className, wrapperClassName, hidden, ...other } = props;
   if (hidden) {
     return null;
   }
@@ -170,6 +171,7 @@ const InputField = (props) => {
       onChange,
       isDisabled: disabled,
       isReadOnly: readOnly,
+      className: wrapperClassName,
       ...other,
       children: /* @__PURE__ */ jsxs(
         BaseControl,

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

@@ -1854,8 +1854,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/option-select/option-select.js

@@ -31,7 +31,7 @@ import { _ as __ } from "../../default-i18n-BqWys-1G.js";
  * @param {Object} [props.itemProps] - Props to pass to each item.
  * @param {boolean} [props.noTriggerLabel] - Whether the trigger label should be hidden. Applies only to the `menu` type.
  * @param {boolean} [props.noTriggerIcon] - Whether the trigger icon should be hidden. Applies only to the `menu` type.
- * @param {string} [props.tooltip] - If provided, overrides the default tooltip text. If there is no label, the value will still be shown within the tooltip. Applies only to the `menu` type.
+ * @param {string|boolean} [props.tooltip] - If provided, overrides the default tooltip text. If there is no label, the value will still be shown within the tooltip. Applies only to the `menu` type. If `true` is set and an `aria-label` is provided, the tooltip will show the same text as the `aria-label`.
  * @param {boolean} [props.noItemLabel] - Whether the option label should be hidden.
  * @param {boolean} [props.noItemIcon] - Whether the option icon should be hidden.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
@@ -75,16 +75,21 @@ const OptionSelect = (props) => {
     itemProps,
     noTriggerLabel,
     noTriggerIcon,
-    tooltip,
+    tooltip: rawTooltip,
     noItemLabel,
     noItemIcon,
     children,
     hidden,
+    "aria-label": ariaLabel,
     ...rest
   } = props;
   if (hidden) {
     return null;
   }
+  let tooltip = rawTooltip;
+  if (rawTooltip === true && (ariaLabel == null ? void 0 : ariaLabel.length) > 0) {
+    tooltip = ariaLabel;
+  }
   const currentItem = options == null ? void 0 : options.find(({ value: optionValue }) => optionValue === value);
   const notSetLabel = /* @__PURE__ */ jsx("span", { className: "es-uic-leading-3 es-uic-opacity-50", children: __("Not set", "eightshift-ui-components") });
   return /* @__PURE__ */ jsxs(
@@ -103,7 +108,7 @@ const OptionSelect = (props) => {
           ButtonGroup,
           {
             vertical,
-            "aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"],
+            "aria-label": typeof label !== "undefined" ? null : ariaLabel,
             ...wrapperProps,
             children: options.map(
               ({
@@ -151,7 +156,7 @@ const OptionSelect = (props) => {
             orientation: vertical ? "vertical" : "horizontal",
             onChange: (v) => onChange(v),
             design: type === "radios" ? "default" : "segmented",
-            "aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"],
+            "aria-label": typeof label !== "undefined" ? null : ariaLabel,
             value,
             ...wrapperProps,
             children: options.map(({ label: optionLabel, value: optionValue, icon: optionIcon, ariaLabel: optionAriaLabel, subtitle: optionSubtitle, disabled: optionDisabled }) => {
@@ -176,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(
@@ -189,9 +194,10 @@ const OptionSelect = (props) => {
             ) : tooltip,
             triggerProps: {
               ...wrapperProps == null ? void 0 : wrapperProps.triggerProps,
-              "aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"]
+              "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

@@ -5117,8 +5117,7 @@ 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);
               }
@@ -5133,8 +5132,7 @@ const Repeater = (props) => {
         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);
             }
@@ -5251,8 +5249,7 @@ 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);
                   }
@@ -5267,8 +5264,7 @@ const Repeater = (props) => {
             addButton && !hideEmptyState && 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);
                 }