@jsenv/navi 0.10.2 → 0.11.0

package/src/components/field/input_textual.jsx

@@ -1,389 +0,0 @@
-/**
- * Input component for all textual input types.
- *
- * Supports:
- * - text (default)
- * - password
- * - hidden
- * - email
- * - url
- * - search
- * - tel
- * - etc.
- *
- * For non-textual inputs, specialized components will be used:
- * - <InputCheckbox /> for type="checkbox"
- * - <InputRadio /> for type="radio"
- */
-
-import { forwardRef } from "preact/compat";
-import {
-  useContext,
-  useImperativeHandle,
-  useLayoutEffect,
-  useRef,
-} from "preact/hooks";
-
-import { useActionStatus } from "../../use_action_status.js";
-import { forwardActionRequested } from "../../validation/custom_constraint_validation.js";
-import { useConstraints } from "../../validation/hooks/use_constraints.js";
-import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
-import { useActionBoundToOneParam } from "../action_execution/use_action.js";
-import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { useLayoutStyle } from "../layout/use_layout_style.js";
-import { LoadableInlineElement } from "../loader/loader_background.jsx";
-import { withPropsClassName } from "../props_composition/with_props_class_name.js";
-import { withPropsStyle } from "../props_composition/with_props_style.js";
-import { useAutoFocus } from "../use_auto_focus.js";
-import { initCustomField } from "./custom_field.js";
-import { ReportReadOnlyOnLabelContext } from "./label.jsx";
-import { useActionEvents } from "./use_action_events.js";
-import {
-  DisabledContext,
-  LoadingContext,
-  LoadingElementContext,
-  ReadOnlyContext,
-  UIStateContext,
-  UIStateControllerContext,
-  useUIState,
-  useUIStateController,
-} from "./use_ui_state_controller.js";
-
-import.meta.css = /* css */ `
-  @layer navi {
-    .navi_input {
-      --border-width: 1px;
-      --outline-width: 1px;
-      --outer-width: calc(var(--border-width) + var(--outline-width));
-      --padding-x: 6px;
-      --padding-y: 1px;
-
-      --outline-color: light-dark(#4476ff, #3b82f6);
-
-      --border-radius: 2px;
-      --border-color: light-dark(#767676, #8e8e93);
-      --border-color-hover: color-mix(in srgb, var(--border-color) 70%, black);
-      --border-color-active: color-mix(in srgb, var(--border-color) 90%, black);
-      --border-color-readonly: color-mix(
-        in srgb,
-        var(--border-color) 45%,
-        transparent
-      );
-      --border-color-disabled: var(--border-color-readonly);
-
-      --background-color: white;
-      --background-color-hover: color-mix(
-        in srgb,
-        var(--background-color) 95%,
-        black
-      );
-      --background-color-readonly: var(--background-color);
-      --background-color-disabled: color-mix(
-        in srgb,
-        var(--background-color) 60%,
-        transparent
-      );
-
-      --color: currentColor;
-      --color-readonly: color-mix(in srgb, currentColor 60%, transparent);
-      --color-disabled: var(--color-readonly);
-
-      width: 100%;
-      color: var(--color);
-
-      background-color: var(--background-color);
-      border-width: var(--outer-width);
-      border-width: var(--outer-width);
-      border-style: solid;
-      border-color: transparent;
-      border-radius: var(--border-radius);
-      outline-width: var(--border-width);
-      outline-style: solid;
-      outline-color: var(--border-color);
-      outline-offset: calc(-1 * (var(--border-width)));
-    }
-    /* Focus */
-    .navi_input[data-focus] {
-      border-color: var(--outline-color);
-      outline-width: var(--outer-width);
-      outline-color: var(--outline-color);
-      outline-offset: calc(-1 * var(--outer-width));
-    }
-    /* Readonly */
-    .navi_input[data-readonly] {
-      color: var(--color-readonly);
-      background-color: var(--background-color-readonly);
-      outline-color: var(--border-color-readonly);
-    }
-    .navi_input[data-readonly]::placeholder {
-      color: var(--color-readonly);
-    }
-    /* Disabled */
-    .navi_input[data-disabled] {
-      color: var(--color-disabled);
-      background-color: var(--background-color-disabled);
-      outline-color: var(--border-color-disabled);
-    }
-    /* Callout (info, warning, error) */
-    .navi_input[data-callout] {
-      border-color: var(--callout-color);
-    }
-  }
-`;
-
-export const InputTextual = forwardRef((props, ref) => {
-  const uiStateController = useUIStateController(props, "input");
-  const uiState = useUIState(uiStateController);
-
-  const input = renderActionableComponent(props, ref, {
-    Basic: InputTextualBasic,
-    WithAction: InputTextualWithAction,
-    InsideForm: InputTextualInsideForm,
-  });
-  return (
-    <UIStateControllerContext.Provider value={uiStateController}>
-      <UIStateContext.Provider value={uiState}>{input}</UIStateContext.Provider>
-    </UIStateControllerContext.Provider>
-  );
-});
-
-const InputTextualBasic = forwardRef((props, ref) => {
-  const contextReadOnly = useContext(ReadOnlyContext);
-  const contextDisabled = useContext(DisabledContext);
-  const contextLoading = useContext(LoadingContext);
-  const contextLoadingElement = useContext(LoadingElementContext);
-  const reportReadOnlyOnLabel = useContext(ReportReadOnlyOnLabelContext);
-  const uiStateController = useContext(UIStateControllerContext);
-  const uiState = useContext(UIStateContext);
-  const {
-    type,
-    onInput,
-
-    readOnly,
-    disabled,
-    constraints = [],
-    loading,
-
-    autoFocus,
-    autoFocusVisible,
-    autoSelect,
-
-    // visual
-    appearance = "navi",
-    accentColor,
-    className,
-    style,
-
-    ...rest
-  } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const innerValue =
-    type === "datetime-local" ? convertToLocalTimezone(uiState) : uiState;
-  const innerLoading =
-    loading || (contextLoading && contextLoadingElement === innerRef.current);
-  const innerReadOnly =
-    readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
-  const innerDisabled = disabled || contextDisabled;
-  // infom any <label> parent of our readOnly state
-  reportReadOnlyOnLabel?.(innerReadOnly);
-  useAutoFocus(innerRef, autoFocus, {
-    autoFocusVisible,
-    autoSelect,
-  });
-  useConstraints(innerRef, constraints);
-
-  const innerClassName = withPropsClassName(
-    appearance === "navi" ? "navi_input" : undefined,
-    className,
-  );
-  const { margin, padding, alignment, expansion } = useLayoutStyle(rest);
-  const innerStyle = withPropsStyle(padding, style);
-  const inputTextual = (
-    <input
-      {...rest}
-      ref={innerRef}
-      className={innerClassName}
-      style={innerStyle}
-      type={type}
-      data-value={uiState}
-      value={innerValue}
-      readOnly={innerReadOnly}
-      disabled={innerDisabled}
-      data-readOnly={innerReadOnly ? "" : undefined}
-      data-disabled={innerDisabled ? "" : undefined}
-      onInput={(e) => {
-        let inputValue;
-        if (type === "number") {
-          inputValue = e.target.valueAsNumber;
-        } else if (type === "datetime-local") {
-          inputValue = convertToUTCTimezone(e.target.value);
-        } else {
-          inputValue = e.target.value;
-        }
-        uiStateController.setUIState(inputValue, e);
-        onInput?.(e);
-      }}
-      // eslint-disable-next-line react/no-unknown-property
-      onresetuistate={(e) => {
-        uiStateController.resetUIState(e);
-      }}
-      // eslint-disable-next-line react/no-unknown-property
-      onsetuistate={(e) => {
-        uiStateController.setUIState(e.detail.value, e);
-      }}
-    />
-  );
-
-  useLayoutEffect(() => {
-    return initCustomField(innerRef.current, innerRef.current);
-  }, []);
-
-  if (type === "hidden") {
-    return inputTextual;
-  }
-  return (
-    <LoadableInlineElement
-      loading={innerLoading}
-      style={{
-        ...margin,
-        ...alignment,
-        ...expansion,
-        "--accent-color": accentColor || "light-dark(#355fcc, #4476ff)",
-      }}
-      color="var(--accent-color)"
-      inset={-1}
-    >
-      {inputTextual}
-    </LoadableInlineElement>
-  );
-});
-
-const InputTextualWithAction = forwardRef((props, ref) => {
-  const uiState = useContext(UIStateContext);
-  const {
-    action,
-    loading,
-    onCancel,
-    onActionPrevented,
-    onActionStart,
-    onActionError,
-    onActionEnd,
-    cancelOnBlurInvalid,
-    cancelOnEscape,
-    actionErrorEffect,
-    ...rest
-  } = props;
-  const innerRef = useRef(null);
-  useImperativeHandle(ref, () => innerRef.current);
-  const [boundAction] = useActionBoundToOneParam(action, uiState);
-  const { loading: actionLoading } = useActionStatus(boundAction);
-  const executeAction = useExecuteAction(innerRef, {
-    errorEffect: actionErrorEffect,
-  });
-  // here updating the input won't call the associated action
-  // (user have to blur or press enter for this to happen)
-  // so we can keep the ui state on cancel/abort/error and let user decide
-  // to update ui state or retry via blur/enter as is
-  useActionEvents(innerRef, {
-    onCancel: (e, reason) => {
-      if (reason.startsWith("blur_invalid")) {
-        if (!cancelOnBlurInvalid) {
-          return;
-        }
-        if (
-          // error prevent cancellation until the user closes it (or something closes it)
-          e.detail.failedConstraintInfo.level === "error" &&
-          e.detail.failedConstraintInfo.reportStatus !== "closed"
-        ) {
-          return;
-        }
-      }
-      if (reason === "escape_key") {
-        if (!cancelOnEscape) {
-          return;
-        }
-      }
-      onCancel?.(e, reason);
-    },
-    onRequested: (e) => {
-      forwardActionRequested(e, boundAction);
-    },
-    onPrevented: onActionPrevented,
-    onAction: executeAction,
-    onStart: onActionStart,
-    onError: onActionError,
-    onEnd: onActionEnd,
-  });
-
-  return (
-    <InputTextualBasic
-      data-action={boundAction.name}
-      {...rest}
-      ref={innerRef}
-      loading={loading || actionLoading}
-    />
-  );
-});
-const InputTextualInsideForm = forwardRef((props, ref) => {
-  const {
-    // We destructure formContext to avoid passing it to the underlying input element
-    // eslint-disable-next-line no-unused-vars
-    formContext,
-    ...rest
-  } = props;
-
-  return <InputTextualBasic {...rest} ref={ref} />;
-});
-
-// As explained in https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/datetime-local#setting_timezones
-// datetime-local does not support timezones
-const convertToLocalTimezone = (dateTimeString) => {
-  const date = new Date(dateTimeString);
-  // Check if the date is valid
-  if (isNaN(date.getTime())) {
-    return dateTimeString;
-  }
-
-  // Format to YYYY-MM-DDThh:mm:ss
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  const hours = String(date.getHours()).padStart(2, "0");
-  const minutes = String(date.getMinutes()).padStart(2, "0");
-  const seconds = String(date.getSeconds()).padStart(2, "0");
-
-  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
-};
-/**
- * Converts a datetime string without timezone (local time) to UTC format with 'Z' notation
- *
- * @param {string} localDateTimeString - Local datetime string without timezone (e.g., "2023-07-15T14:30:00")
- * @returns {string} Datetime string in UTC with 'Z' notation (e.g., "2023-07-15T12:30:00Z")
- */
-const convertToUTCTimezone = (localDateTimeString) => {
-  if (!localDateTimeString) {
-    return localDateTimeString;
-  }
-
-  try {
-    // Create a Date object using the local time string
-    // The browser will interpret this as local timezone
-    const localDate = new Date(localDateTimeString);
-
-    // Check if the date is valid
-    if (isNaN(localDate.getTime())) {
-      return localDateTimeString;
-    }
-
-    // Convert to UTC ISO string
-    const utcString = localDate.toISOString();
-
-    // Return the UTC string (which includes the 'Z' notation)
-    return utcString;
-  } catch (error) {
-    console.error("Error converting local datetime to UTC:", error);
-    return localDateTimeString;
-  }
-};

package/src/components/field/label.jsx

@@ -1,46 +0,0 @@
-import { createContext } from "preact";
-import { forwardRef } from "preact/compat";
-import { useImperativeHandle, useRef, useState } from "preact/hooks";
-
-import.meta.css = /* css */ `
-  @layer navi {
-    label {
-      cursor: pointer;
-    }
-
-    label[data-readonly],
-    label[data-disabled] {
-      color: rgba(0, 0, 0, 0.5);
-      cursor: default;
-    }
-  }
-`;
-
-export const ReportReadOnlyOnLabelContext = createContext();
-export const ReportDisabledOnLabelContext = createContext();
-
-export const Label = forwardRef((props, ref) => {
-  const { readOnly, disabled, children, ...rest } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const [inputReadOnly, setInputReadOnly] = useState(false);
-  const innerReadOnly = readOnly || inputReadOnly;
-  const [inputDisabled, setInputDisabled] = useState(false);
-  const innerDisabled = disabled || inputDisabled;
-
-  return (
-    <label
-      ref={innerRef}
-      data-readonly={innerReadOnly ? "" : undefined}
-      data-disabled={innerDisabled ? "" : undefined}
-      {...rest}
-    >
-      <ReportReadOnlyOnLabelContext.Provider value={setInputReadOnly}>
-        <ReportDisabledOnLabelContext.Provider value={setInputDisabled}>
-          {children}
-        </ReportDisabledOnLabelContext.Provider>
-      </ReportReadOnlyOnLabelContext.Provider>
-    </label>
-  );
-});

package/src/components/field/radio_list.jsx

@@ -1,183 +0,0 @@
-import { forwardRef } from "preact/compat";
-import {
-  useContext,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "preact/hooks";
-
-import { useActionStatus } from "../../use_action_status.js";
-import { requestAction } from "../../validation/custom_constraint_validation.js";
-import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
-import { useActionBoundToOneParam } from "../action_execution/use_action.js";
-import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { InputRadio } from "./input_radio.jsx";
-import { useActionEvents } from "./use_action_events.js";
-import {
-  DisabledContext,
-  FieldNameContext,
-  LoadingContext,
-  LoadingElementContext,
-  ParentUIStateControllerContext,
-  ReadOnlyContext,
-  RequiredContext,
-  UIStateContext,
-  UIStateControllerContext,
-  useUIGroupStateController,
-  useUIState,
-} from "./use_ui_state_controller.js";
-
-import.meta.css = /* css */ `
-  @layer navi {
-    .navi_radio_list {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-`;
-
-export const RadioList = forwardRef((props, ref) => {
-  const uiStateController = useUIGroupStateController(props, "radio_list", {
-    childComponentType: "radio",
-    aggregateChildStates: (childUIStateControllers) => {
-      let activeValue;
-      for (const childUIStateController of childUIStateControllers) {
-        if (childUIStateController.uiState) {
-          activeValue = childUIStateController.uiState;
-          break;
-        }
-      }
-      return activeValue;
-    },
-  });
-  const uiState = useUIState(uiStateController);
-  const radioList = renderActionableComponent(props, ref, {
-    Basic: RadioListBasic,
-    WithAction: RadioListWithAction,
-    InsideForm: RadioListInsideForm,
-  });
-  return (
-    <UIStateControllerContext.Provider value={uiStateController}>
-      <UIStateContext.Provider value={uiState}>
-        {radioList}
-      </UIStateContext.Provider>
-    </UIStateControllerContext.Provider>
-  );
-});
-export const Radio = InputRadio;
-
-const RadioListBasic = forwardRef((props, ref) => {
-  const contextReadOnly = useContext(ReadOnlyContext);
-  const contextDisabled = useContext(DisabledContext);
-  const contextLoading = useContext(LoadingContext);
-  const uiStateController = useContext(UIStateControllerContext);
-  const { name, loading, disabled, readOnly, children, required, ...rest } =
-    props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const innerLoading = loading || contextLoading;
-  const innerReadOnly =
-    readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
-  const innerDisabled = disabled || contextDisabled;
-
-  return (
-    <div
-      data-action={rest["data-action"]}
-      {...rest}
-      ref={innerRef}
-      className="navi_radio_list"
-      data-radio-list
-      // eslint-disable-next-line react/no-unknown-property
-      onresetuistate={(e) => {
-        uiStateController.resetUIState(e);
-      }}
-    >
-      <ParentUIStateControllerContext.Provider value={uiStateController}>
-        <FieldNameContext.Provider value={name}>
-          <ReadOnlyContext.Provider value={innerReadOnly}>
-            <DisabledContext.Provider value={innerDisabled}>
-              <RequiredContext.Provider value={required}>
-                <LoadingContext.Provider value={innerLoading}>
-                  {children}
-                </LoadingContext.Provider>
-              </RequiredContext.Provider>
-            </DisabledContext.Provider>
-          </ReadOnlyContext.Provider>
-        </FieldNameContext.Provider>
-      </ParentUIStateControllerContext.Provider>
-    </div>
-  );
-});
-const RadioListWithAction = forwardRef((props, ref) => {
-  const uiStateController = useContext(UIStateControllerContext);
-  const uiState = useContext(UIStateContext);
-  const {
-    action,
-
-    onCancel,
-    onActionPrevented,
-    onActionStart,
-    onActionAbort,
-    onActionError,
-    onActionEnd,
-    actionErrorEffect,
-    loading,
-    children,
-    ...rest
-  } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  const [boundAction] = useActionBoundToOneParam(action, uiState);
-  const { loading: actionLoading } = useActionStatus(boundAction);
-  const executeAction = useExecuteAction(innerRef, {
-    errorEffect: actionErrorEffect,
-  });
-  const [actionRequester, setActionRequester] = useState(null);
-
-  useActionEvents(innerRef, {
-    onCancel: (e, reason) => {
-      uiStateController.resetUIState(e);
-      onCancel?.(e, reason);
-    },
-    onPrevented: onActionPrevented,
-    onAction: (actionEvent) => {
-      setActionRequester(actionEvent.detail.requester);
-      executeAction(actionEvent);
-    },
-    onStart: onActionStart,
-    onAbort: (e) => {
-      uiStateController.resetUIState(e);
-      onActionAbort?.(e);
-    },
-    onError: (e) => {
-      uiStateController.resetUIState(e);
-      onActionError?.(e);
-    },
-    onEnd: (e) => {
-      onActionEnd?.(e);
-    },
-  });
-
-  return (
-    <RadioListBasic
-      data-action={boundAction}
-      {...rest}
-      ref={innerRef}
-      onChange={(e) => {
-        const radio = e.target;
-        const radioListContainer = innerRef.current;
-        requestAction(radioListContainer, boundAction, {
-          event: e,
-          requester: radio,
-        });
-      }}
-      loading={loading || actionLoading}
-    >
-      <LoadingElementContext.Provider value={actionRequester}>
-        {children}
-      </LoadingElementContext.Provider>
-    </RadioListBasic>
-  );
-});
-const RadioListInsideForm = RadioListBasic;