@wix/editor-react-components 1.2288.0 → 1.2290.0

package/dist/site/components/chunks/Button2.js

@@ -0,0 +1,299 @@
+import { c as $bbaa08b3cd72f041$export$9d1611c77c2fe928, w as $2c9edc598a03d523$export$420e68273165f4ec, A as $0c4a58759813079a$export$4e328f61c538687f, B as $e969f22b6713ca4a$export$ae780daf29e6d456, x as $390e54f620492c70$export$f680877a34711e37 } from "./Group.js";
+import React__default, { useState, useMemo, createContext, useRef, useEffect } from "react";
+import { $ as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, a as $f39a9eba43920ace$export$86427a43e3e48ebb, b as $64fa3d84918910a7$export$29f1550f4b0d4415, f as $64fa3d84918910a7$export$4d86445c2cf5e3, g as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps.js";
+import { $ as $d1116acdf220c2da$export$4c014de7c8940b4c } from "./useFocusable.js";
+import { a as $d27d541f9569d26d$export$45712eceda6fad21 } from "./usePress.js";
+const $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY = 7e3;
+let $319e236875307eab$var$liveAnnouncer = null;
+function $319e236875307eab$export$a9b970dcc4ae71a9(message, assertiveness = "assertive", timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
+  if (!$319e236875307eab$var$liveAnnouncer) {
+    $319e236875307eab$var$liveAnnouncer = new $319e236875307eab$var$LiveAnnouncer();
+    if (!(typeof IS_REACT_ACT_ENVIRONMENT === "boolean" ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== "undefined")) setTimeout(() => {
+      if ($319e236875307eab$var$liveAnnouncer === null || $319e236875307eab$var$liveAnnouncer === void 0 ? void 0 : $319e236875307eab$var$liveAnnouncer.isAttached()) $319e236875307eab$var$liveAnnouncer === null || $319e236875307eab$var$liveAnnouncer === void 0 ? void 0 : $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
+    }, 100);
+    else $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
+  } else $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
+}
+class $319e236875307eab$var$LiveAnnouncer {
+  isAttached() {
+    var _this_node;
+    return (_this_node = this.node) === null || _this_node === void 0 ? void 0 : _this_node.isConnected;
+  }
+  createLog(ariaLive) {
+    let node = document.createElement("div");
+    node.setAttribute("role", "log");
+    node.setAttribute("aria-live", ariaLive);
+    node.setAttribute("aria-relevant", "additions");
+    return node;
+  }
+  destroy() {
+    if (!this.node) return;
+    document.body.removeChild(this.node);
+    this.node = null;
+  }
+  announce(message, assertiveness = "assertive", timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
+    var _this_assertiveLog, _this_politeLog;
+    if (!this.node) return;
+    let node = document.createElement("div");
+    if (typeof message === "object") {
+      node.setAttribute("role", "img");
+      node.setAttribute("aria-labelledby", message["aria-labelledby"]);
+    } else node.textContent = message;
+    if (assertiveness === "assertive") (_this_assertiveLog = this.assertiveLog) === null || _this_assertiveLog === void 0 ? void 0 : _this_assertiveLog.appendChild(node);
+    else (_this_politeLog = this.politeLog) === null || _this_politeLog === void 0 ? void 0 : _this_politeLog.appendChild(node);
+    if (message !== "") setTimeout(() => {
+      node.remove();
+    }, timeout);
+  }
+  clear(assertiveness) {
+    if (!this.node) return;
+    if ((!assertiveness || assertiveness === "assertive") && this.assertiveLog) this.assertiveLog.innerHTML = "";
+    if ((!assertiveness || assertiveness === "polite") && this.politeLog) this.politeLog.innerHTML = "";
+  }
+  constructor() {
+    this.node = null;
+    this.assertiveLog = null;
+    this.politeLog = null;
+    if (typeof document !== "undefined") {
+      this.node = document.createElement("div");
+      this.node.dataset.liveAnnouncer = "true";
+      Object.assign(this.node.style, {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        clipPath: "inset(50%)",
+        height: "1px",
+        margin: "-1px",
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        width: "1px",
+        whiteSpace: "nowrap"
+      });
+      this.assertiveLog = this.createLog("assertive");
+      this.node.appendChild(this.assertiveLog);
+      this.politeLog = this.createLog("polite");
+      this.node.appendChild(this.politeLog);
+      document.body.prepend(this.node);
+    }
+  }
+}
+function $ac4318a9c075bb9f$export$ea18c227d4417cc3(props, ref) {
+  let { elementType = "button", isDisabled, onPress, onPressStart, onPressEnd, onPressUp, onPressChange, preventFocusOnPress, allowFocusWhenDisabled, onClick, href, target, rel, type = "button" } = props;
+  let additionalProps;
+  if (elementType === "button") additionalProps = {
+    type,
+    disabled: isDisabled,
+    form: props.form,
+    formAction: props.formAction,
+    formEncType: props.formEncType,
+    formMethod: props.formMethod,
+    formNoValidate: props.formNoValidate,
+    formTarget: props.formTarget,
+    name: props.name,
+    value: props.value
+  };
+  else additionalProps = {
+    role: "button",
+    href: elementType === "a" && !isDisabled ? href : void 0,
+    target: elementType === "a" ? target : void 0,
+    type: elementType === "input" ? type : void 0,
+    disabled: elementType === "input" ? isDisabled : void 0,
+    "aria-disabled": !isDisabled || elementType === "input" ? void 0 : isDisabled,
+    rel: elementType === "a" ? rel : void 0
+  };
+  let { pressProps, isPressed } = $d27d541f9569d26d$export$45712eceda6fad21({
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPress,
+    onPressUp,
+    onClick,
+    isDisabled,
+    preventFocusOnPress,
+    ref
+  });
+  let { focusableProps } = $d1116acdf220c2da$export$4c014de7c8940b4c(props, ref);
+  if (allowFocusWhenDisabled) focusableProps.tabIndex = isDisabled ? -1 : focusableProps.tabIndex;
+  let buttonProps = $bbaa08b3cd72f041$export$9d1611c77c2fe928(focusableProps, pressProps, $8e9d2fae0ecb9001$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  }));
+  return {
+    isPressed,
+    buttonProps: $bbaa08b3cd72f041$export$9d1611c77c2fe928(additionalProps, buttonProps, {
+      "aria-haspopup": props["aria-haspopup"],
+      "aria-expanded": props["aria-expanded"],
+      "aria-controls": props["aria-controls"],
+      "aria-pressed": props["aria-pressed"],
+      "aria-current": props["aria-current"],
+      "aria-disabled": props["aria-disabled"]
+    })
+  };
+}
+function $240e9101ba2842f5$export$7d15b64cf5a3a4c4(value, min = -Infinity, max = Infinity) {
+  let newValue = Math.min(Math.max(value, min), max);
+  return newValue;
+}
+function $240e9101ba2842f5$export$e1a7b8e69ef6c52f(value, step) {
+  let roundedValue = value;
+  let precision = 0;
+  let stepString = step.toString();
+  let eIndex = stepString.toLowerCase().indexOf("e-");
+  if (eIndex > 0) precision = Math.abs(Math.floor(Math.log10(Math.abs(step)))) + eIndex;
+  else {
+    let pointIndex = stepString.indexOf(".");
+    if (pointIndex >= 0) precision = stepString.length - pointIndex;
+  }
+  if (precision > 0) {
+    let pow = Math.pow(10, precision);
+    roundedValue = Math.round(roundedValue * pow) / pow;
+  }
+  return roundedValue;
+}
+function $240e9101ba2842f5$export$cb6e0bb50bc19463(value, min, max, step) {
+  min = Number(min);
+  max = Number(max);
+  let remainder = (value - (isNaN(min) ? 0 : min)) % step;
+  let snappedValue = $240e9101ba2842f5$export$e1a7b8e69ef6c52f(Math.abs(remainder) * 2 >= step ? value + Math.sign(remainder) * (step - Math.abs(remainder)) : value - remainder, step);
+  if (!isNaN(min)) {
+    if (snappedValue < min) snappedValue = min;
+    else if (!isNaN(max) && snappedValue > max) snappedValue = min + Math.floor($240e9101ba2842f5$export$e1a7b8e69ef6c52f((max - min) / step, step)) * step;
+  } else if (!isNaN(max) && snappedValue > max) snappedValue = Math.floor($240e9101ba2842f5$export$e1a7b8e69ef6c52f(max / step, step)) * step;
+  snappedValue = $240e9101ba2842f5$export$e1a7b8e69ef6c52f(snappedValue, step);
+  return snappedValue;
+}
+const $ea3928288112382f$var$styles = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  width: "1px",
+  whiteSpace: "nowrap"
+};
+function $ea3928288112382f$export$a966af930f325cab(props = {}) {
+  let { style, isFocusable } = props;
+  let [isFocused, setFocused] = useState(false);
+  let { focusWithinProps } = $2c9edc598a03d523$export$420e68273165f4ec({
+    isDisabled: !isFocusable,
+    onFocusWithinChange: (val) => setFocused(val)
+  });
+  let combinedStyles = useMemo(() => {
+    if (isFocused) return style;
+    else if (style) return {
+      ...$ea3928288112382f$var$styles,
+      ...style
+    };
+    else return $ea3928288112382f$var$styles;
+  }, [
+    isFocused
+  ]);
+  return {
+    visuallyHiddenProps: {
+      ...focusWithinProps,
+      style: combinedStyles
+    }
+  };
+}
+function $ea3928288112382f$export$439d29a4e110a164(props) {
+  let { children, elementType: Element = "div", isFocusable, style, ...otherProps } = props;
+  let { visuallyHiddenProps } = $ea3928288112382f$export$a966af930f325cab(props);
+  return /* @__PURE__ */ React__default.createElement(Element, $bbaa08b3cd72f041$export$9d1611c77c2fe928(otherProps, visuallyHiddenProps), children);
+}
+const $0393f8ab869a0f1a$export$e9f3bf65a26ce129 = /* @__PURE__ */ createContext(null);
+const $d2b4bc8c273e7be6$export$24d547caef80ccd1 = /* @__PURE__ */ createContext({});
+const $d2b4bc8c273e7be6$export$353f5b6fc5456de1 = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb(function Button(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $d2b4bc8c273e7be6$export$24d547caef80ccd1);
+  props = $d2b4bc8c273e7be6$var$disablePendingProps(props);
+  let ctx = props;
+  let { isPending } = ctx;
+  let { buttonProps, isPressed } = $ac4318a9c075bb9f$export$ea18c227d4417cc3(props, ref);
+  let { focusProps, isFocused, isFocusVisible } = $0c4a58759813079a$export$4e328f61c538687f(props);
+  let { hoverProps, isHovered } = $e969f22b6713ca4a$export$ae780daf29e6d456({
+    ...props,
+    isDisabled: props.isDisabled || isPending
+  });
+  let renderValues = {
+    isHovered,
+    isPressed: (ctx.isPressed || isPressed) && !isPending,
+    isFocused,
+    isFocusVisible,
+    isDisabled: props.isDisabled || false,
+    isPending: isPending !== null && isPending !== void 0 ? isPending : false
+  };
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    values: renderValues,
+    defaultClassName: "react-aria-Button"
+  });
+  let buttonId = $390e54f620492c70$export$f680877a34711e37(buttonProps.id);
+  let progressId = $390e54f620492c70$export$f680877a34711e37();
+  let ariaLabelledby = buttonProps["aria-labelledby"];
+  if (isPending) {
+    if (ariaLabelledby) ariaLabelledby = `${ariaLabelledby} ${progressId}`;
+    else if (buttonProps["aria-label"]) ariaLabelledby = `${buttonId} ${progressId}`;
+  }
+  let wasPending = useRef(isPending);
+  useEffect(() => {
+    let message = {
+      "aria-labelledby": ariaLabelledby || buttonId
+    };
+    if (!wasPending.current && isFocused && isPending) $319e236875307eab$export$a9b970dcc4ae71a9(message, "assertive");
+    else if (wasPending.current && isFocused && !isPending) $319e236875307eab$export$a9b970dcc4ae71a9(message, "assertive");
+    wasPending.current = isPending;
+  }, [
+    isPending,
+    isFocused,
+    ariaLabelledby,
+    buttonId
+  ]);
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    global: true
+  });
+  delete DOMProps.onClick;
+  return /* @__PURE__ */ React__default.createElement("button", {
+    ...$bbaa08b3cd72f041$export$9d1611c77c2fe928(DOMProps, renderProps, buttonProps, focusProps, hoverProps),
+    // When the button is in a pending state, we want to stop implicit form submission (ie. when the user presses enter on a text input).
+    // We do this by changing the button's type to button.
+    type: buttonProps.type === "submit" && isPending ? "button" : buttonProps.type,
+    id: buttonId,
+    ref,
+    "aria-labelledby": ariaLabelledby,
+    slot: props.slot || void 0,
+    "aria-disabled": isPending ? "true" : buttonProps["aria-disabled"],
+    "data-disabled": props.isDisabled || void 0,
+    "data-pressed": renderValues.isPressed || void 0,
+    "data-hovered": isHovered || void 0,
+    "data-focused": isFocused || void 0,
+    "data-pending": isPending || void 0,
+    "data-focus-visible": isFocusVisible || void 0
+  }, /* @__PURE__ */ React__default.createElement($0393f8ab869a0f1a$export$e9f3bf65a26ce129.Provider, {
+    value: {
+      id: progressId
+    }
+  }, renderProps.children));
+});
+function $d2b4bc8c273e7be6$var$disablePendingProps(props) {
+  if (props.isPending) {
+    props.onPress = void 0;
+    props.onPressStart = void 0;
+    props.onPressEnd = void 0;
+    props.onPressChange = void 0;
+    props.onPressUp = void 0;
+    props.onKeyDown = void 0;
+    props.onKeyUp = void 0;
+    props.onClick = void 0;
+    props.href = void 0;
+  }
+  return props;
+}
+export {
+  $ea3928288112382f$export$439d29a4e110a164 as $,
+  $240e9101ba2842f5$export$7d15b64cf5a3a4c4 as a,
+  $d2b4bc8c273e7be6$export$24d547caef80ccd1 as b,
+  $ea3928288112382f$export$a966af930f325cab as c,
+  $d2b4bc8c273e7be6$export$353f5b6fc5456de1 as d,
+  $240e9101ba2842f5$export$cb6e0bb50bc19463 as e
+};