@jsenv/navi 0.0.1 → 0.1.0

package/src/components/input/radio_list.jsx

@@ -1,283 +0,0 @@
-import { requestAction } from "@jsenv/validation";
-import { forwardRef } from "preact/compat";
-import { useEffect, useImperativeHandle, useRef, useState } from "preact/hooks";
-import { useNavState } from "../../browser_integration/browser_integration.js";
-import { useActionStatus } from "../../use_action_status.js";
-import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
-import {
-  useActionBoundToOneParam,
-  useOneFormParam,
-} from "../action_execution/use_action.js";
-import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { useActionEvents } from "../use_action_events.js";
-import { useRefArray } from "../use_ref_array.js";
-import { Field } from "./field.jsx";
-import { InputRadio } from "./input_radio.jsx";
-import { useFormEvents } from "./use_form_event.js";
-
-import.meta.css = /* css */ `
-  .radio_list {
-    display: flex;
-    flex-direction: column;
-  }
-`;
-
-export const RadioList = forwardRef((props, ref) => {
-  return renderActionableComponent(props, ref, {
-    Basic: RadioListBasic,
-    WithAction: RadioListWithAction,
-    InsideForm: RadioListInsideForm,
-  });
-});
-
-const RadioListControlled = forwardRef((props, ref) => {
-  const {
-    name,
-    value,
-    label,
-    loading,
-    disabled,
-    readOnly,
-    children,
-    onChange,
-    required,
-    ...rest
-  } = props;
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  return (
-    <fieldset className="radio_list" ref={innerRef} {...rest}>
-      {label ? <legend>{label}</legend> : null}
-      {children.map((child) => {
-        const {
-          label,
-          readOnly: childReadOnly,
-          disabled: childDisabled,
-          loading: childLoading,
-          onChange: childOnChange,
-          value: childValue,
-          ...childRest
-        } = child;
-
-        const radio = (
-          <InputRadio
-            {...childRest}
-            // ignoreForm: each input is controller by this list
-            // we don't want the input to try to update the form because it's already done here
-            ignoreForm
-            name={name}
-            value={childValue}
-            checked={childValue === value}
-            readOnly={readOnly || childReadOnly}
-            disabled={disabled || childDisabled}
-            loading={loading || childLoading}
-            required={required}
-            onChange={(event) => {
-              onChange(event);
-              childOnChange?.(event);
-            }}
-          />
-        );
-
-        return <Field key={childValue} input={radio} label={label} />;
-      })}
-    </fieldset>
-  );
-});
-
-const RadioListBasic = forwardRef((props, ref) => {
-  const { value: initialValue, id, children, ...rest } = props;
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const [navState, setNavState] = useNavState(id);
-  const valueAtStart = navState === undefined ? initialValue : navState;
-  const [value, setValue] = useState(valueAtStart);
-  useEffect(() => {
-    setNavState(value);
-  }, [value]);
-
-  return (
-    <RadioListControlled
-      ref={innerRef}
-      value={value}
-      onChange={(event) => {
-        const radio = event.target;
-        const radioIsChecked = radio.checked;
-        if (!radioIsChecked) {
-          return;
-        }
-        const value = radio.value;
-        setValue(value);
-      }}
-      {...rest}
-    >
-      {children}
-    </RadioListControlled>
-  );
-});
-
-const RadioListWithAction = forwardRef((props, ref) => {
-  const {
-    id,
-    name,
-    value: externalValue,
-    valueSignal,
-    action,
-    children,
-    onCancel,
-    onActionPrevented,
-    onActionStart,
-    onActionAbort,
-    onActionError,
-    onActionEnd,
-    actionErrorEffect,
-    ...rest
-  } = props;
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const [navState, setNavState, resetNavState] = useNavState(id);
-  const [boundAction, value, setValue, resetValue] = useActionBoundToOneParam(
-    action,
-    name,
-    valueSignal ? valueSignal : externalValue,
-    navState,
-  );
-  const { loading: actionLoading } = useActionStatus(boundAction);
-  const executeAction = useExecuteAction(innerRef, {
-    errorEffect: actionErrorEffect,
-  });
-  const actionRequesterRef = useRef(null);
-  useEffect(() => {
-    setNavState(value);
-  }, [value]);
-
-  useActionEvents(innerRef, {
-    onCancel: (e, reason) => {
-      resetNavState();
-      resetValue();
-      onCancel?.(e, reason);
-    },
-    onPrevented: onActionPrevented,
-    onAction: (actionEvent) => {
-      actionRequesterRef.current = actionEvent.detail.requester;
-      executeAction(actionEvent);
-    },
-    onStart: onActionStart,
-    onAbort: (e) => {
-      resetValue();
-      onActionAbort?.(e);
-    },
-    onError: (error) => {
-      resetValue();
-      onActionError?.(error);
-    },
-    onEnd: (e) => {
-      resetNavState();
-      onActionEnd?.(e);
-    },
-  });
-
-  const childRefArray = useRefArray(children, (child) => child.value);
-
-  return (
-    <RadioListControlled
-      ref={innerRef}
-      name={name}
-      value={value}
-      data-action={boundAction}
-      onChange={(event) => {
-        const radio = event.target;
-        const radioIsChecked = radio.checked;
-        if (!radioIsChecked) {
-          return;
-        }
-        const value = radio.value;
-        setValue(value);
-        const radioListContainer = innerRef.current;
-        requestAction(boundAction, {
-          event,
-          target: radioListContainer,
-          requester: radio,
-        });
-      }}
-      {...rest}
-    >
-      {children.map((child, i) => {
-        const childRef = childRefArray[i];
-        return {
-          ...child,
-          ref: childRef,
-          loading:
-            child.loading ||
-            (actionLoading && actionRequesterRef.current === childRef.current),
-          readOnly: child.readOnly || actionLoading,
-        };
-      })}
-    </RadioListControlled>
-  );
-});
-
-const RadioListInsideForm = forwardRef((props, ref) => {
-  const {
-    formContext,
-    id,
-    name,
-    readOnly,
-    value: externalValue,
-    children,
-    ...rest
-  } = props;
-  const { formIsReadOnly } = formContext;
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const [navState, setNavState] = useNavState(id);
-  const [value, setValue, resetValue] = useOneFormParam(
-    name,
-    externalValue,
-    navState,
-  );
-  useEffect(() => {
-    setNavState(value);
-  }, [value]);
-
-  useFormEvents(innerRef, {
-    onFormReset: () => {
-      setValue(undefined);
-    },
-    onFormActionAbort: () => {
-      resetValue();
-    },
-    onFormActionError: () => {
-      resetValue();
-    },
-  });
-
-  return (
-    <RadioListControlled
-      ref={innerRef}
-      name={name}
-      value={value}
-      readOnly={readOnly || formIsReadOnly}
-      onChange={(event) => {
-        const radio = event.target;
-        const radioIsChecked = radio.checked;
-        if (!radioIsChecked) {
-          return;
-        }
-        const value = radio.value;
-        setValue(value);
-      }}
-      {...rest}
-    >
-      {children}
-    </RadioListControlled>
-  );
-});

package/src/components/input/use_form_event.js

@@ -1,20 +0,0 @@
-import { useLayoutEffect } from "preact/hooks";
-import { addManyEventListeners } from "../../utils/add_many_event_listeners.js";
-
-export const useFormEvents = (
-  elementRef,
-  { onFormReset, onFormActionAbort, onFormActionError },
-) => {
-  useLayoutEffect(() => {
-    const element = elementRef.current;
-    const form = element.form;
-
-    return addManyEventListeners(form, {
-      reset: onFormReset,
-      actionabort: onFormActionAbort,
-      actionerror: (e) => {
-        onFormActionError?.(e.detail.error);
-      },
-    });
-  }, [onFormReset, onFormActionAbort, onFormActionError]);
-};

package/src/components/input/use_on_change.js

@@ -1,12 +0,0 @@
-import { useLayoutEffect } from "preact/hooks";
-
-export const useOnChange = (innerRef, callback) => {
-  // we must use a custom event listener because preact bind onChange to onInput for compat with react
-  useLayoutEffect(() => {
-    const input = innerRef.current;
-    input.addEventListener("change", callback);
-    return () => {
-      input.removeEventListener("change", callback);
-    };
-  }, [callback]);
-};

package/src/components/selection/selection.js

@@ -1,5 +0,0 @@
-export {
-  SelectionProvider,
-  useRegisterSelectionValue,
-  useSelectionContext,
-} from "./selection_context.jsx";

package/src/components/selection/selection_context.jsx

@@ -1,262 +0,0 @@
-import { canInterceptKeys } from "@jsenv/dom";
-import { createContext } from "preact";
-import { useContext, useLayoutEffect, useRef } from "preact/hooks";
-
-const SelectionContext = createContext(null);
-
-export const SelectionProvider = ({ value = [], onChange, children }) => {
-  const selection = value || [];
-  const registryRef = useRef([]); // Array<value>
-  const anchorRef = useRef(null);
-
-  const contextValue = {
-    selection,
-
-    register: (value) => {
-      const registry = registryRef.current;
-      const existingIndex = registry.indexOf(value);
-      if (existingIndex >= 0) {
-        console.warn(
-          `SelectionContext: Attempted to register an already registered value: ${value}. All values must be unique.`,
-        );
-        return;
-      }
-      registry.push(value);
-    },
-    unregister: (value) => {
-      const registry = registryRef.current;
-      const index = registry.indexOf(value);
-      if (index >= 0) {
-        registry.splice(index, 1);
-      }
-    },
-    setAnchor: (value) => {
-      anchorRef.current = value;
-    },
-    isSelected: (itemValue) => {
-      return selection.includes(itemValue);
-    },
-    getAllItems: () => {
-      return registryRef.current;
-    },
-    getRange: (fromValue, toValue) => {
-      const registry = registryRef.current;
-
-      // Find indices of fromValue and toValue
-      let fromIndex = -1;
-      let toIndex = -1;
-      let index = 0;
-      for (const valueCandidate of registry) {
-        if (valueCandidate === fromValue) {
-          fromIndex = index;
-        }
-        if (valueCandidate === toValue) {
-          toIndex = index;
-        }
-        index++;
-      }
-
-      if (fromIndex >= 0 && toIndex >= 0) {
-        // Select all items between fromIndex and toIndex (inclusive)
-        const start = Math.min(fromIndex, toIndex);
-        const end = Math.max(fromIndex, toIndex);
-        const valueInRangeArray = registry.slice(start, end + 1);
-        return valueInRangeArray;
-      }
-      return [];
-    },
-
-    // basic methods to manipulate selection
-    set: (newSelection, event = null) => {
-      if (
-        newSelection.length === selection.length &&
-        newSelection.every((value, index) => value === selection[index])
-      ) {
-        return;
-      }
-      onChange?.(newSelection, event);
-    },
-    add: (arrayOfValueToAddToSelection, event = null) => {
-      const selectionWithValues = [];
-      for (const value of selection) {
-        selectionWithValues.push(value);
-      }
-      let modified = false;
-      for (const valueToAdd of arrayOfValueToAddToSelection) {
-        if (selectionWithValues.includes(valueToAdd)) {
-          continue;
-        }
-        modified = true;
-        selectionWithValues.push(valueToAdd);
-      }
-      if (modified) {
-        onChange?.(selectionWithValues, event);
-      }
-    },
-    remove: (arrayOfValueToRemoveFromSelection, event = null) => {
-      let modified = false;
-      const selectionWithoutValues = [];
-      for (const value of selection) {
-        if (arrayOfValueToRemoveFromSelection.includes(value)) {
-          modified = true;
-          // If we're removing the last selected value, clear it
-          if (value === anchorRef.current) {
-            anchorRef.current = null;
-          }
-        } else {
-          selectionWithoutValues.push(value);
-        }
-      }
-
-      if (modified) {
-        onChange?.(selectionWithoutValues, event);
-      }
-    },
-
-    // Convenience method for multi-select: toggle, addFromLastSelectedTo
-    toggle: (value, event = null) => {
-      if (selection.includes(value)) {
-        contextValue.remove([value], event);
-      } else {
-        contextValue.add([value], event);
-      }
-    },
-    // Convenience method for shift-click: add range from last selected to target value
-    setFromAnchorTo: (value, event = null) => {
-      const anchorValue = anchorRef.current;
-
-      // Make sure the last selected value is still in the current selection
-      if (anchorValue && selection.includes(anchorValue)) {
-        const range = contextValue.getRange(anchorValue, value);
-        contextValue.set(range, event);
-      } else {
-        // No valid previous selection, just select this one
-        contextValue.set([value], event);
-      }
-    },
-
-    getValueAfter: (value) => {
-      const registry = registryRef.current;
-      const index = registry.indexOf(value);
-      if (index < 0 || index >= registry.length - 1) {
-        return null; // No next value
-      }
-      return registry[index + 1];
-    },
-    getValueBefore: (value) => {
-      const registry = registryRef.current;
-      const index = registry.indexOf(value);
-      if (index <= 0) {
-        return null; // No previous value
-      }
-      return registry[index - 1];
-    },
-  };
-
-  return (
-    <SelectionContext.Provider value={contextValue}>
-      {children}
-    </SelectionContext.Provider>
-  );
-};
-
-export const useSelectionContext = () => {
-  return useContext(SelectionContext);
-};
-
-export const useRegisterSelectionValue = (value) => {
-  const selectionContext = useSelectionContext();
-
-  useLayoutEffect(() => {
-    if (selectionContext) {
-      selectionContext.register(value);
-      return () => selectionContext.unregister(value);
-    }
-    return undefined;
-  }, [selectionContext, value]);
-};
-
-export const clickToSelect = (clickEvent, { selectionContext, value }) => {
-  if (clickEvent.defaultPrevented) {
-    // If the click was prevented by another handler, do not interfere
-    return;
-  }
-
-  const isMultiSelect = clickEvent.metaKey || clickEvent.ctrlKey;
-  const isShiftSelect = clickEvent.shiftKey;
-  const isSingleSelect = !isMultiSelect && !isShiftSelect;
-
-  if (isSingleSelect) {
-    // Single select - replace entire selection with just this item
-    selectionContext.set([value], clickEvent);
-    return;
-  }
-  if (isMultiSelect) {
-    // here no need to prevent nav on <a> but it means cmd + click will both multi select
-    // and open in a new tab
-    selectionContext.toggle(value, clickEvent);
-    return;
-  }
-  if (isShiftSelect) {
-    clickEvent.preventDefault(); // Prevent navigation
-    selectionContext.setFromAnchorTo(value, clickEvent);
-    return;
-  }
-};
-
-export const keydownToSelect = (keydownEvent, { selectionContext, value }) => {
-  if (!canInterceptKeys(keydownEvent)) {
-    return;
-  }
-
-  if (keydownEvent.key === "Shift") {
-    selectionContext.setAnchor(value);
-    return;
-  }
-
-  const isMultiSelect = keydownEvent.metaKey || keydownEvent.ctrlKey;
-  const isShiftSelect = keydownEvent.shiftKey;
-  const { key } = keydownEvent;
-  if (key === "a") {
-    if (!isMultiSelect) {
-      return;
-    }
-    keydownEvent.preventDefault(); // prevent default select all text behavior
-    selectionContext.set(selectionContext.getAllItems(), keydownEvent);
-    return;
-  }
-  if (key === "ArrowDown") {
-    const nextValue = selectionContext.getValueAfter(value);
-    if (!nextValue) {
-      return; // No next value to select
-    }
-    keydownEvent.preventDefault(); // Prevent default scrolling behavior
-    if (isShiftSelect) {
-      selectionContext.setFromAnchorTo(nextValue, keydownEvent);
-      return;
-    }
-    if (isMultiSelect) {
-      selectionContext.add([nextValue], keydownEvent);
-      return;
-    }
-    selectionContext.set([nextValue], keydownEvent);
-    return;
-  }
-  if (key === "ArrowUp") {
-    const previousValue = selectionContext.getValueBefore(value);
-    if (!previousValue) {
-      return; // No previous value to select
-    }
-    keydownEvent.preventDefault(); // Prevent default scrolling behavior
-    if (isShiftSelect) {
-      selectionContext.setFromAnchorTo(previousValue, keydownEvent);
-      return;
-    }
-    if (isMultiSelect) {
-      selectionContext.add([previousValue], keydownEvent);
-      return;
-    }
-    selectionContext.set([previousValue], keydownEvent);
-    return;
-  }
-};