@proyecto-viviana/solid-stately 0.5.1 → 0.6.0-rc.1

package/src/steplist/createStepListState.ts

@@ -1,12 +1,34 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/steplist/useStepListState.ts
+
 /**
  * State management for step list components.
  * Tracks selected step, completion status, and selectability.
+ *
+ * Ported from packages/react-stately/src/steplist/useStepListState.ts.
  */
 
-import { createEffect, createMemo, createSignal, type Accessor } from "solid-js";
-import type { Key } from "../collections/types";
+import { createEffect, createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createInternalSignal } from "../utils";
+import type { CollectionNode, Key } from "../collections/types";
+import {
+  createSingleSelectListState,
+  type SingleSelectListState,
+} from "../collections/createListState";
 
-export interface StepListStateProps {
+export interface StepListStateProps<T = unknown> {
   /** The currently selected step key (controlled). */
   selectedKey?: Key;
   /** The default selected step key (uncontrolled). */
@@ -26,47 +48,31 @@ export interface StepListStateProps {
   /** Keys of individually disabled steps. */
   disabledKeys?: Iterable<Key>;
   /** The step items. */
-  items: Array<{ key: Key; [key: string]: any }>;
+  items: T[];
 }
 
-export interface StepListState {
-  readonly selectedKey: Accessor<Key | null>;
+export interface StepListState<T = unknown> extends SingleSelectListState<T> {
   readonly lastCompletedStep: Accessor<Key | null>;
-  readonly items: Accessor<Array<{ key: Key }>>;
+  readonly items: Accessor<T[]>;
   setSelectedKey(key: Key): void;
-  setLastCompletedStep(key: Key): void;
+  setLastCompletedStep(key: Key | null): void;
   isCompleted(key: Key): boolean;
   isSelectable(key: Key): boolean;
-  isDisabled: Accessor<boolean>;
+  isDisabled: Accessor<boolean> & ((key?: Key) => boolean);
   isReadOnly: Accessor<boolean>;
 }
 
 /**
  * Creates state for a step list component.
  */
-export function createStepListState(props: StepListStateProps): StepListState {
-  const items = () => props.items;
-
-  // Build an index map: Key -> index
-  const indexMap = createMemo(() => {
-    const map = new Map<Key, number>();
-    const currentItems = items();
-    for (let i = 0; i < currentItems.length; i++) {
-      map.set(currentItems[i].key, i);
-    }
-    return map;
-  });
-
-  // Disabled keys set
-  const disabledKeysSet = createMemo(() => new Set<Key>(props.disabledKeys ?? []));
-
-  const isDisabled: Accessor<boolean> = () => props.isDisabled ?? false;
+export function createStepListState<T = unknown>(props: StepListStateProps<T>): StepListState<T> {
+  const isListDisabled: Accessor<boolean> = () => props.isDisabled ?? false;
   const isReadOnly: Accessor<boolean> = () => props.isReadOnly ?? false;
+  const items: Accessor<T[]> = () => props.items ?? [];
 
-  // Last completed step signal (uncontrolled)
-  const [lastCompletedStepInternal, setLastCompletedStepInternal] = createSignal<Key | null>(
-    props.defaultLastCompletedStep ?? null,
-  );
+  // Last completed step signal (uncontrolled / controlled sync)
+  const [lastCompletedStepInternal, setLastCompletedStepInternal] =
+    createInternalSignal<Key | null>(props.defaultLastCompletedStep ?? null);
 
   const lastCompletedStep: Accessor<Key | null> = () => {
     if (props.lastCompletedStep !== undefined) {
@@ -75,140 +81,188 @@ export function createStepListState(props: StepListStateProps): StepListState {
     return lastCompletedStepInternal();
   };
 
-  const setLastCompletedStep = (key: Key) => {
-    const currentIndex = indexMap().get(key);
-    const prevIndex = lastCompletedStep() !== null ? indexMap().get(lastCompletedStep()!) : -1;
+  const isCompleted = (step: Key): boolean => {
+    if (step == null) return false;
+    const completed = lastCompletedStep();
+    if (completed == null) return false;
+    const { indexMap } = keyMaps();
+    const stepIdx = indexMap.get(step);
+    const completedIdx = indexMap.get(completed);
+    if (stepIdx === undefined || completedIdx === undefined) return false;
+    return stepIdx <= completedIdx;
+  };
 
-    // Only advance completion, never go back
-    if (
-      currentIndex !== undefined &&
-      (prevIndex === undefined || currentIndex > (prevIndex ?? -1))
-    ) {
-      if (props.lastCompletedStep === undefined) {
-        setLastCompletedStepInternal(key);
-      }
-      props.onLastCompletedStepChange?.(key);
+  const isSelectable = (step: Key): boolean => {
+    if (isListDisabled() || singleSelectListState.disabledKeys().has(step) || isReadOnly()) {
+      return false;
     }
+    if (isCompleted(step)) return true;
+    const { keysLinkedList } = keyMaps();
+    const prevStep = keysLinkedList.get(step);
+    return (
+      (prevStep !== undefined && isCompleted(prevStep)) ||
+      step === singleSelectListState.collection().getFirstKey()
+    );
   };
 
-  const isCompleted = (key: Key): boolean => {
-    const completed = lastCompletedStep();
-    if (completed === null) return false;
-    const keyIndex = indexMap().get(key);
-    const completedIndex = indexMap().get(completed);
-    if (keyIndex === undefined || completedIndex === undefined) return false;
-    return keyIndex <= completedIndex;
+  const findInitialSelectedKey = (): Key | undefined => {
+    if (props.defaultSelectedKey !== undefined) {
+      return props.defaultSelectedKey;
+    }
+    const currentItems = (props.items ?? []) as Array<{ key: Key }>;
+    const disabled = new Set<Key>(props.disabledKeys ?? []);
+    for (const item of currentItems) {
+      if (!disabled.has(item.key)) {
+        return item.key;
+      }
+    }
+    return currentItems[0]?.key;
   };
 
-  const isStepDisabled = (key: Key): boolean => {
-    if (isDisabled()) return true;
-    return disabledKeysSet().has(key);
-  };
+  // Route through the shared SingleSelectListState collection spine
+  const singleSelectListState = createSingleSelectListState<T>({
+    get items() {
+      return (props.items ?? []) as T[];
+    },
+    getKey(item: any) {
+      return item.key;
+    },
+    getTextValue(item: any) {
+      return item.label ?? item.textValue ?? (item.key != null ? String(item.key) : "");
+    },
+    get disabledKeys() {
+      return props.disabledKeys;
+    },
+    get selectedKey() {
+      return props.selectedKey;
+    },
+    get defaultSelectedKey() {
+      return findInitialSelectedKey();
+    },
+    onSelectionChange(key) {
+      if (key != null) {
+        props.onSelectionChange?.(key);
+      }
+    },
+  });
 
-  const isSelectable = (key: Key): boolean => {
-    if (isDisabled() || isReadOnly() || isStepDisabled(key)) return false;
-    // Completed steps are always selectable
-    if (isCompleted(key)) return true;
-    // First step is always selectable
-    const keyIndex = indexMap().get(key);
-    if (keyIndex === 0) return true;
-    // Otherwise a step is selectable only if the PREVIOUS step is completed —
-    // mirrors react-stately `useStepListState.isSelectable`
-    // (`isCompleted(prevStep) || step === firstKey`). There is no "step after the
-    // currently selected step" clause upstream: a fresh list exposes only the
-    // first step, and the immediate-next step becomes selectable when its
-    // predecessor is *completed*, not merely selected.
-    const currentItems = items();
-    if (keyIndex !== undefined && keyIndex > 0) {
-      const prevKey = currentItems[keyIndex - 1].key;
-      if (isCompleted(prevKey)) return true;
+  // Build indexMap and keysLinkedList from the collection
+  const keyMaps = createMemo(() => {
+    const coll = singleSelectListState.collection();
+    const indexMap = new Map<Key, number>();
+    const keysLinkedList = new Map<Key, Key | undefined>();
+    let i = 0;
+    let prev: CollectionNode<T> | undefined;
+    for (const item of coll) {
+      indexMap.set(item.key, i);
+      keysLinkedList.set(item.key, prev?.key);
+      prev = item;
+      i++;
     }
-    return false;
-  };
+    return { indexMap, keysLinkedList };
+  });
 
-  // Find the first selectable non-completed step
-  const findDefaultSelectedKey = (): Key | null => {
-    const currentItems = items();
-    for (const item of currentItems) {
-      if (!isCompleted(item.key) && !isStepDisabled(item.key)) {
-        return item.key;
+  const setLastCompletedStep = (key: Key | null) => {
+    if (key == null) {
+      if (props.lastCompletedStep === undefined) {
+        setLastCompletedStepInternal(null);
       }
+      props.onLastCompletedStepChange?.(null);
+      return;
     }
-    // All completed - select first non-disabled
-    for (const item of currentItems) {
-      if (!isStepDisabled(item.key)) {
-        return item.key;
+    const { indexMap } = keyMaps();
+    const currentIndex = indexMap.get(key);
+    const completed = lastCompletedStep();
+    const prevIndex = completed !== null ? indexMap.get(completed) : -1;
+
+    // Only advance completion, never go back
+    if (
+      currentIndex !== undefined &&
+      (prevIndex === undefined || currentIndex > (prevIndex ?? -1))
+    ) {
+      if (props.lastCompletedStep === undefined) {
+        setLastCompletedStepInternal(key);
       }
+      props.onLastCompletedStepChange?.(key);
     }
-    return currentItems.length > 0 ? currentItems[0].key : null;
   };
 
-  // Selected key signal (uncontrolled)
-  const [selectedKeyInternal, setSelectedKeyInternal] = createSignal<Key | null>(
-    props.defaultSelectedKey ?? findDefaultSelectedKey(),
+  // Mirror react-stately useStepListState's effect: whenever the selected step
+  // sits more than one past the last completed step (e.g. mounted with a
+  // defaultSelectedKey ahead of progress), auto-complete its immediate predecessor.
+  createEffect(
+    () => {
+      const selKey = singleSelectListState.selectedKey();
+      if (selKey === null) return null;
+      const { indexMap, keysLinkedList } = keyMaps();
+      const selIdx = indexMap.get(selKey);
+      if (selIdx === undefined || selIdx <= 0) return null;
+      const completed = lastCompletedStep();
+      const lcs = completed !== null ? (indexMap.get(completed) ?? -1) : -1;
+      if (selIdx <= lcs + 1) return null;
+      return keysLinkedList.get(selKey) ?? null;
+    },
+    (prevKey) => {
+      if (prevKey != null) {
+        setLastCompletedStep(prevKey);
+      }
+    },
   );
 
-  const selectedKey: Accessor<Key | null> = () => {
-    if (props.selectedKey !== undefined) {
-      return props.selectedKey;
-    }
-    return selectedKeyInternal();
-  };
+  // Sync initial focus to selectedKey if focusedKey is unset
+  createEffect(
+    () => singleSelectListState.selectedKey(),
+    (selKey) => {
+      if (singleSelectListState.focusedKey() == null && selKey != null) {
+        singleSelectListState.setFocusedKey(selKey);
+      }
+    },
+  );
 
   const setSelectedKey = (key: Key) => {
-    if (isReadOnly() || isDisabled()) return;
+    if (isListDisabled() || isReadOnly()) return;
     if (!isSelectable(key)) return;
-
-    // Mark previous selected step as completed if advancing
-    const currentSelected = selectedKey();
-    if (currentSelected !== null) {
-      const currentIndex = indexMap().get(currentSelected);
-      const newIndex = indexMap().get(key);
-      if (
-        currentIndex !== undefined &&
-        newIndex !== undefined &&
-        newIndex > currentIndex &&
-        !isCompleted(currentSelected)
-      ) {
-        setLastCompletedStep(currentSelected);
-      }
+    const { keysLinkedList } = keyMaps();
+    const prevKey = keysLinkedList.get(key);
+    if (prevKey && !isCompleted(prevKey)) {
+      setLastCompletedStep(prevKey);
     }
+    singleSelectListState.setSelectedKey(key);
+  };
 
-    if (props.selectedKey === undefined) {
-      setSelectedKeyInternal(key);
+  // Bridge selectionManager with step list selectability
+  singleSelectListState.selectionManager.canSelectItem = (key: Key) => isSelectable(key);
+  const origReplaceSelection = singleSelectListState.selectionManager.replaceSelection.bind(
+    singleSelectListState.selectionManager,
+  );
+  singleSelectListState.selectionManager.replaceSelection = (key: Key) => {
+    if (isListDisabled() || isReadOnly()) return;
+    if (!isSelectable(key)) return;
+    const { keysLinkedList } = keyMaps();
+    const prevKey = keysLinkedList.get(key);
+    if (prevKey && !isCompleted(prevKey)) {
+      setLastCompletedStep(prevKey);
     }
-    props.onSelectionChange?.(key);
+    origReplaceSelection(key);
   };
 
-  // Mirror react-stately `useStepListState`'s effect: whenever the selected step
-  // sits more than one past the last completed step (e.g. mounted with a
-  // `defaultSelectedKey` ahead of progress), auto-complete its immediate
-  // predecessor. Because completion is cumulative (`isCompleted` = index ≤
-  // lastCompleted index), advancing `lastCompletedStep` to `selectedIdx - 1`
-  // marks every intermediate step complete. This runs regardless of
-  // `isDisabled` / `isReadOnly`, exactly as upstream (the effect is ungated).
-  createEffect(() => {
-    const selKey = selectedKey();
-    if (selKey === null) return;
-    const selIdx = indexMap().get(selKey);
-    if (selIdx === undefined || selIdx <= 0) return;
-    const completed = lastCompletedStep();
-    const lcs = completed !== null ? (indexMap().get(completed) ?? -1) : -1;
-    if (selIdx > lcs + 1) {
-      const prevKey = items()[selIdx - 1]?.key;
-      if (prevKey !== undefined) setLastCompletedStep(prevKey);
+  const isDisabledFn = ((key?: Key): boolean => {
+    if (key === undefined) {
+      return isListDisabled();
     }
-  });
+    return !isSelectable(key);
+  }) as Accessor<boolean> & ((key?: Key) => boolean);
 
   return {
-    selectedKey,
+    ...singleSelectListState,
+    selectedKey: singleSelectListState.selectedKey,
     lastCompletedStep,
     items,
     setSelectedKey,
     setLastCompletedStep,
     isCompleted,
     isSelectable,
-    isDisabled,
+    isDisabled: isDisabledFn,
     isReadOnly,
   };
 }

package/src/table/TableCollection.ts

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/table/TableCollection.ts
+
 /**
  * TableCollection - A collection class for table data.
  * Based on @react-stately/table/TableCollection.

package/src/table/createTableColumnResizeState.ts

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/table/useTableColumnResizeState.ts
+
 /**
  * Table column resize state management.
  * Based on @react-stately/table/useTableColumnResizeState.
@@ -7,7 +21,10 @@
  * width distribution and clamping.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createInternalSignal } from "../utils";
+
 import type { Key } from "../collections/types";
 
 /** Column size: a number (px) or a string ('100px', '50%', '1fr'). */
@@ -96,13 +113,38 @@ function parseColumnDef(col: ColumnResizeDefinition, tableWidth: number): Parsed
   return { key: col.key, fr: 0, fixedPx: isNaN(px) ? 0 : px, minWidth, maxWidth };
 }
 
+function applyFractionalRemainder(
+  widths: Map<Key, number>,
+  columns: ColumnResizeDefinition[],
+  originalWidth: number,
+): void {
+  const flooredWidth = Math.floor(originalWidth);
+  const hasFractionalWidth = originalWidth - flooredWidth > 0;
+  if (!hasFractionalWidth || columns.length === 0) return;
+
+  const lastKey = columns[columns.length - 1].key;
+  if (widths.has(lastKey)) {
+    const tableFractionalWidth = originalWidth.toString().split(".")[1];
+    if (tableFractionalWidth) {
+      const columnWidth = Math.floor(widths.get(lastKey)!).toString();
+      widths.set(lastKey, Number(columnWidth + "." + tableFractionalWidth));
+    }
+  }
+}
+
 /**
  * Distribute `tableWidth` among columns:
- *  1. Fixed-width columns get their declared width (clamped to min/max).
- *  2. Remaining space is distributed among fractional columns proportionally.
+ *  1. Floor tableWidth to integer before column sizing, matching upstream TableUtils.calculateColumnSizes.
+ *  2. Fixed-width columns get their declared width (clamped to min/max).
+ *  3. Remaining space is distributed among fractional columns proportionally with cascading rounding.
+ *  4. Leftover sub-pixel width is added to the last column so widths sum exactly to tableWidth.
  */
 function distributeWidths(columns: ColumnResizeDefinition[], tableWidth: number): Map<Key, number> {
-  const parsed = columns.map((c) => parseColumnDef(c, tableWidth));
+  const originalWidth = tableWidth;
+  const flooredWidth = Math.floor(tableWidth);
+  const availableWidth = Math.max(0, flooredWidth);
+
+  const parsed = columns.map((c) => parseColumnDef(c, availableWidth));
 
   // Pass 1 — allocate fixed columns
   let usedSpace = 0;
@@ -116,23 +158,36 @@ function distributeWidths(columns: ColumnResizeDefinition[], tableWidth: number)
     }
   }
 
-  const remainingSpace = Math.max(0, tableWidth - usedSpace);
+  const remainingSpace = Math.max(0, availableWidth - usedSpace);
   const perFr = totalFr > 0 ? remainingSpace / totalFr : 0;
 
-  // Pass 2 — build map
+  // Pass 2 — build map with cascading rounding
   const widths = new Map<Key, number>();
+  let fpTotal = 0;
+  let intTotal = 0;
+
   for (const p of parsed) {
-    let w: number;
+    let targetSize: number;
     if (p.fr > 0) {
-      w = p.fr * perFr;
+      targetSize = p.fr * perFr;
     } else {
-      w = p.fixedPx;
+      targetSize = p.fixedPx;
     }
     // Clamp
-    w = Math.max(p.minWidth, Math.min(p.maxWidth, w));
-    widths.set(p.key, Math.round(w));
+    targetSize = Math.max(p.minWidth, Math.min(p.maxWidth, targetSize));
+
+    // Cascade rounding to ensure sum of integers matches availableWidth
+    const rounded = Math.round(targetSize + fpTotal) - intTotal;
+    fpTotal += targetSize;
+    intTotal += rounded;
+
+    widths.set(p.key, rounded);
   }
 
+  // Give the leftover sub-pixel width to the last column so the columns sum
+  // exactly to the (possibly fractional) available width.
+  applyFractionalRemainder(widths, columns, originalWidth);
+
   return widths;
 }
 
@@ -154,8 +209,8 @@ export function createTableColumnResizeState(
   );
 
   // User-overridden widths (set during/after resize)
-  const [overrides, setOverrides] = createSignal<Map<Key, number>>(new Map());
-  const [resizingColumn, setResizingColumn] = createSignal<Key | null>(null);
+  const [overrides, setOverrides] = createInternalSignal<Map<Key, number>>(new Map());
+  const [resizingColumn, setResizingColumn] = createInternalSignal<Key | null>(null);
 
   // Computed widths: initial merged with overrides
   const columnWidths = createMemo(() => {
@@ -169,6 +224,7 @@ export function createTableColumnResizeState(
         merged.set(key, width);
       }
     }
+    applyFractionalRemainder(merged, getProps().columns, getProps().tableWidth);
     return merged;
   });
 
@@ -212,7 +268,7 @@ export function createTableColumnResizeState(
   const updateResizedColumns = (key: Key, width: number): Map<Key, number> => {
     const minW = getColumnMinWidth(key);
     const maxW = getColumnMaxWidth(key);
-    const clampedWidth = Math.round(Math.max(minW, Math.min(maxW, width)));
+    const clampedWidth = Math.max(minW, Math.min(maxW, Math.floor(width)));
 
     const newOverrides = new Map(overrides());
     newOverrides.set(key, clampedWidth);
@@ -226,6 +282,7 @@ export function createTableColumnResizeState(
         merged.set(k, w);
       }
     }
+    applyFractionalRemainder(merged, getProps().columns, getProps().tableWidth);
     return merged;
   };
 

package/src/table/createTableState.ts

@@ -1,9 +1,24 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/table/useTableState.ts
+
 /**
  * Table state management for Table components.
  * Based on @react-stately/table/useTableState.
  */
 
-import { createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import { propsAccessor, type MaybeAccessor } from "../utils";
 import { createGridState } from "../grid/createGridState";
 import type { Key } from "../collections/types";
 import type {
@@ -26,8 +41,8 @@ const OPPOSITE_SORT_DIRECTION: Record<SortDirection, SortDirection> = {
 export function createTableState<
   T extends object,
   C extends TableCollection<T> = TableCollection<T>,
->(options: Accessor<TableStateOptions<T, C>>): TableState<T, C> {
-  const getOptions = () => options();
+>(options: MaybeAccessor<TableStateOptions<T, C>>): TableState<T, C> {
+  const getOptions = propsAccessor(options);
 
   // Create the underlying grid state
   const gridState = createGridState<T, C>(() => ({
@@ -88,7 +103,8 @@ export function createTableState<
       return gridState.disabledBehavior;
     },
     get isKeyboardNavigationDisabled() {
-      return gridState.isKeyboardNavigationDisabled;
+      // An empty body keeps navigation disabled after the flag is cleared.
+      return getOptions().collection.size === 0 || gridState.isKeyboardNavigationDisabled;
     },
     get focusedKey() {
       return gridState.focusedKey;
@@ -111,6 +127,12 @@ export function createTableState<
     get selectedKeys() {
       return gridState.selectedKeys;
     },
+    get isEmpty() {
+      return gridState.isEmpty;
+    },
+    get isSelectAll() {
+      return gridState.isSelectAll;
+    },
 
     // Grid state methods
     isSelected: gridState.isSelected,