@octanejs/radix 0.1.31 → 0.1.33

package/dist/cjs/PasswordToggleField.cjs

@@ -0,0 +1,377 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PasswordToggleField_exports = {};
+__export(PasswordToggleField_exports, {
+  Icon: () => PasswordToggleFieldIcon,
+  Input: () => PasswordToggleFieldInput,
+  PasswordToggleField: () => PasswordToggleField,
+  PasswordToggleFieldIcon: () => PasswordToggleFieldIcon,
+  PasswordToggleFieldInput: () => PasswordToggleFieldInput,
+  PasswordToggleFieldSlot: () => PasswordToggleFieldSlot,
+  PasswordToggleFieldToggle: () => PasswordToggleFieldToggle,
+  Root: () => PasswordToggleField,
+  Slot: () => PasswordToggleFieldSlot,
+  Toggle: () => PasswordToggleFieldToggle,
+  createPasswordToggleFieldScope: () => createPasswordToggleFieldScope
+});
+module.exports = __toCommonJS(PasswordToggleField_exports);
+var import_octane = require("octane");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_internal = require("./internal.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_use_effect_event = require("./use-effect-event.cjs");
+var import_useId = require("./useId.cjs");
+var import_use_is_hydrated = require("./use-is-hydrated.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+const PASSWORD_TOGGLE_FIELD_NAME = "PasswordToggleField";
+const [createPasswordToggleFieldContext, createPasswordToggleFieldScope] = (0, import_context.createContextScope)(
+  PASSWORD_TOGGLE_FIELD_NAME
+);
+const [PasswordToggleFieldProvider, usePasswordToggleFieldContext] = createPasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_NAME);
+const INITIAL_FOCUS_STATE = {
+  clickTriggered: false,
+  selectionStart: null,
+  selectionEnd: null
+};
+function PasswordToggleField(props) {
+  const slot = (0, import_internal.S)("PasswordToggleField.Root");
+  const {
+    __scopePasswordToggleField,
+    visible: visibleProp,
+    defaultVisible,
+    children
+  } = props ?? {};
+  const baseId = (0, import_useId.useId)(props?.id, (0, import_internal.subSlot)(slot, "id"));
+  const defaultInputId = `${baseId}-input`;
+  const [inputIdState, setInputIdState] = (0, import_octane.useState)(
+    defaultInputId,
+    (0, import_internal.subSlot)(slot, "inputId")
+  );
+  const inputId = inputIdState ?? defaultInputId;
+  const syncInputId = (0, import_octane.useCallback)(
+    (providedId) => setInputIdState(providedId != null ? String(providedId) : null),
+    [],
+    (0, import_internal.subSlot)(slot, "syncId")
+  );
+  let onVisibilityChange = props?.onVisibilityChange;
+  if (!onVisibilityChange && props != null && "onVisiblityChange" in props && typeof props.onVisiblityChange === "function") {
+    onVisibilityChange = props.onVisiblityChange;
+  }
+  const [visible = false, setVisible] = (0, import_useControllableState.useControllableState)(
+    {
+      prop: visibleProp,
+      defaultProp: defaultVisible ?? false,
+      onChange: onVisibilityChange
+    },
+    (0, import_internal.subSlot)(slot, "visible")
+  );
+  const inputRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "inputRef"));
+  const focusState = (0, import_octane.useRef)(INITIAL_FOCUS_STATE, (0, import_internal.subSlot)(slot, "focusState"));
+  return (0, import_octane.createElement)(PasswordToggleFieldProvider, {
+    scope: __scopePasswordToggleField,
+    inputId,
+    inputRef,
+    setVisible,
+    syncInputId,
+    visible,
+    focusState,
+    children
+  });
+}
+const PASSWORD_TOGGLE_FIELD_INPUT_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Input";
+function PasswordToggleFieldInput(props) {
+  const slot = (0, import_internal.S)("PasswordToggleField.Input");
+  const {
+    __scopePasswordToggleField,
+    autoComplete = "current-password",
+    autoCapitalize = "off",
+    spellCheck = false,
+    id: idProp,
+    ref: forwardedRef,
+    onBlur,
+    ...inputProps
+  } = props ?? {};
+  const { visible, inputRef, inputId, syncInputId, setVisible, focusState } = usePasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_INPUT_NAME, __scopePasswordToggleField);
+  (0, import_octane.useEffect)(
+    () => {
+      syncInputId(idProp);
+    },
+    [idProp, syncInputId],
+    (0, import_internal.subSlot)(slot, "e:syncId")
+  );
+  const _setVisible = (0, import_use_effect_event.useEffectEvent)(setVisible, (0, import_internal.subSlot)(slot, "setVisible"));
+  (0, import_octane.useEffect)(
+    () => {
+      const inputElement = inputRef.current;
+      const form = inputElement?.form;
+      if (!form) {
+        return;
+      }
+      const controller = new AbortController();
+      form.addEventListener(
+        "reset",
+        (event) => {
+          if (!event.defaultPrevented) {
+            _setVisible(false);
+          }
+        },
+        { signal: controller.signal }
+      );
+      form.addEventListener(
+        "submit",
+        () => {
+          _setVisible(false);
+        },
+        { signal: controller.signal }
+      );
+      return () => {
+        controller.abort();
+      };
+    },
+    [inputRef],
+    (0, import_internal.subSlot)(slot, "e:form")
+  );
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, inputRef, (0, import_internal.subSlot)(slot, "refs"));
+  return (0, import_octane.createElement)(import_Primitive.Primitive.input, {
+    ...inputProps,
+    id: idProp ?? inputId,
+    autoCapitalize,
+    autoComplete,
+    ref: composedRefs,
+    // octane: boolean spellCheck must render the literal "true"/"false" attribute value
+    // (octane's setAttribute removes `false`-valued attributes; React stringifies it).
+    spellCheck: typeof spellCheck === "boolean" ? String(spellCheck) : spellCheck,
+    type: visible ? "text" : "password",
+    onBlur: (0, import_compose_event_handlers.composeEventHandlers)(onBlur, (event) => {
+      const { selectionStart, selectionEnd } = event.currentTarget;
+      focusState.current.selectionStart = selectionStart;
+      focusState.current.selectionEnd = selectionEnd;
+    })
+  });
+}
+const PASSWORD_TOGGLE_FIELD_TOGGLE_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Toggle";
+function PasswordToggleFieldToggle(props) {
+  const slot = (0, import_internal.S)("PasswordToggleField.Toggle");
+  const {
+    __scopePasswordToggleField,
+    onClick,
+    onPointerDown,
+    onPointerCancel,
+    onPointerUp,
+    // Kept verbatim from the source: `onFocus` is destructured off the props and never
+    // attached to the button (the upstream component swallows it).
+    onFocus: _onFocus,
+    children,
+    "aria-label": ariaLabelProp,
+    ref: forwardedRef,
+    ...toggleProps
+  } = props ?? {};
+  let { "aria-controls": ariaControls, "aria-hidden": ariaHidden, tabIndex } = toggleProps;
+  delete toggleProps["aria-controls"];
+  delete toggleProps["aria-hidden"];
+  delete toggleProps.tabIndex;
+  const { setVisible, visible, inputRef, inputId, focusState } = usePasswordToggleFieldContext(
+    PASSWORD_TOGGLE_FIELD_TOGGLE_NAME,
+    __scopePasswordToggleField
+  );
+  const [internalAriaLabel, setInternalAriaLabel] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "ariaLabel")
+  );
+  const elementRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "el"));
+  const ref = (0, import_compose_refs.useComposedRefs)(forwardedRef, elementRef, (0, import_internal.subSlot)(slot, "refs"));
+  const isHydrated = (0, import_use_is_hydrated.useIsHydrated)((0, import_internal.subSlot)(slot, "hydrated"));
+  (0, import_octane.useEffect)(
+    () => {
+      const element = elementRef.current;
+      if (!element || ariaLabelProp) {
+        setInternalAriaLabel(void 0);
+        return;
+      }
+      const DEFAULT_ARIA_LABEL = visible ? "Hide password" : "Show password";
+      function checkForInnerTextLabel(textContent) {
+        const text = textContent ? textContent : void 0;
+        setInternalAriaLabel(text ? void 0 : DEFAULT_ARIA_LABEL);
+      }
+      checkForInnerTextLabel(element.textContent);
+      const observer = new MutationObserver((entries) => {
+        let textContent;
+        for (const entry of entries) {
+          if (entry.type === "characterData") {
+            if (element.textContent) {
+              textContent = element.textContent;
+            }
+          }
+        }
+        checkForInnerTextLabel(textContent);
+      });
+      observer.observe(element, { characterData: true, subtree: true });
+      return () => {
+        observer.disconnect();
+      };
+    },
+    [visible, ariaLabelProp],
+    (0, import_internal.subSlot)(slot, "e:label")
+  );
+  const ariaLabel = ariaLabelProp || internalAriaLabel;
+  if (!isHydrated) {
+    ariaHidden ??= true;
+    tabIndex ??= -1;
+  } else {
+    ariaControls ??= inputId;
+  }
+  void tabIndex;
+  (0, import_octane.useEffect)(
+    () => {
+      let cleanup = () => {
+      };
+      const ownerWindow = elementRef.current?.ownerDocument?.defaultView || window;
+      const reset = () => focusState.current.clickTriggered = false;
+      const handlePointerUp = () => {
+        cleanup = requestIdleCallback(ownerWindow, reset);
+      };
+      ownerWindow.addEventListener("pointerup", handlePointerUp);
+      return () => {
+        cleanup();
+        ownerWindow.removeEventListener("pointerup", handlePointerUp);
+      };
+    },
+    [focusState],
+    (0, import_internal.subSlot)(slot, "e:pointerup")
+  );
+  return (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+    "aria-controls": ariaControls,
+    "aria-hidden": ariaHidden,
+    "aria-label": ariaLabel,
+    ref,
+    id: inputId,
+    ...toggleProps,
+    onPointerDown: (0, import_compose_event_handlers.composeEventHandlers)(onPointerDown, () => {
+      focusState.current.clickTriggered = true;
+    }),
+    onPointerCancel: (event) => {
+      onPointerCancel?.(event);
+      focusState.current = INITIAL_FOCUS_STATE;
+    },
+    // do not use `composeEventHandlers` here because we always want to
+    // reset the ref after click, regardless of whether the user has
+    // called preventDefault on the event
+    onClick: (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) {
+        focusState.current = INITIAL_FOCUS_STATE;
+        return;
+      }
+      (0, import_octane.flushSync)(() => {
+        setVisible((s) => !s);
+      });
+      if (focusState.current.clickTriggered) {
+        const input = inputRef.current;
+        if (input) {
+          const { selectionStart, selectionEnd } = focusState.current;
+          input.focus();
+          if (selectionStart !== null || selectionEnd !== null) {
+            requestAnimationFrame(() => {
+              if (input.ownerDocument.activeElement === input) {
+                input.selectionStart = selectionStart;
+                input.selectionEnd = selectionEnd;
+              }
+            });
+          }
+        }
+      }
+      focusState.current = INITIAL_FOCUS_STATE;
+    },
+    onPointerUp: (event) => {
+      onPointerUp?.(event);
+      setTimeout(() => {
+        focusState.current = INITIAL_FOCUS_STATE;
+      }, 50);
+    },
+    type: "button",
+    children
+  });
+}
+const PASSWORD_TOGGLE_FIELD_SLOT_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Slot";
+function PasswordToggleFieldSlot(props) {
+  const { __scopePasswordToggleField, ...slotProps } = props ?? {};
+  const { visible } = usePasswordToggleFieldContext(
+    PASSWORD_TOGGLE_FIELD_SLOT_NAME,
+    __scopePasswordToggleField
+  );
+  return "render" in slotProps ? (
+    //
+    slotProps.render({ visible })
+  ) : visible ? slotProps.visible : slotProps.hidden;
+}
+const PASSWORD_TOGGLE_FIELD_ICON_NAME = PASSWORD_TOGGLE_FIELD_NAME + "Icon";
+function PasswordToggleFieldIcon(props) {
+  const {
+    __scopePasswordToggleField,
+    // (source drops `children` — the icon elements come through the
+    // `visible`/`hidden` props)
+    children: _children,
+    ref: forwardedRef,
+    ...rest
+  } = props ?? {};
+  const { visible } = usePasswordToggleFieldContext(
+    PASSWORD_TOGGLE_FIELD_ICON_NAME,
+    __scopePasswordToggleField
+  );
+  const { visible: visibleIcon, hidden: hiddenIcon, ...domProps } = rest;
+  return (0, import_octane.createElement)(import_Primitive.Primitive.svg, {
+    ...domProps,
+    ref: forwardedRef,
+    "aria-hidden": true,
+    asChild: true,
+    children: visible ? visibleIcon : hiddenIcon
+  });
+}
+function requestIdleCallback(window2, callback, options) {
+  if (window2.requestIdleCallback) {
+    const id2 = window2.requestIdleCallback(callback, options);
+    return () => {
+      window2.cancelIdleCallback(id2);
+    };
+  }
+  const start = Date.now();
+  const id = window2.setTimeout(() => {
+    const timeRemaining = () => Math.max(0, 50 - (Date.now() - start));
+    callback({ didTimeout: false, timeRemaining });
+  }, 1);
+  return () => {
+    window2.clearTimeout(id);
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Icon,
+  Input,
+  PasswordToggleField,
+  PasswordToggleFieldIcon,
+  PasswordToggleFieldInput,
+  PasswordToggleFieldSlot,
+  PasswordToggleFieldToggle,
+  Root,
+  Slot,
+  Toggle,
+  createPasswordToggleFieldScope
+});