@salt-ds/core 1.54.0 → 1.54.1

package/dist-es/list-control/ListControlState.js

@@ -38,13 +38,13 @@ function useListControl(props) {
   const [activeState, setActiveState] = useState(
     void 0
   );
-  const setActive = (option) => {
+  const setActive = useCallback((option) => {
     if (option) {
       setActiveState(option);
     } else {
       setActiveState(void 0);
     }
-  };
+  }, []);
   const [openState, setOpenState] = useControlled({
     controlled: openProp,
     default: Boolean(defaultOpen),
@@ -136,97 +136,118 @@ function useListControl(props) {
     sortOptions();
     return () => mutationObserver.disconnect();
   }, [listElement]);
-  const getOptionAtIndex = (index) => {
-    return optionsRef.current[index];
-  };
-  const getIndexOfOption = (option) => {
+  const getOptionAtIndex = useCallback(
+    (index) => {
+      return optionsRef.current[index];
+    },
+    []
+  );
+  const getIndexOfOption = useCallback((option) => {
     return optionsRef.current.findIndex(
       (item) => item.data.value === option.value
     );
-  };
-  const getOptionsMatching = (predicate) => {
-    return optionsRef.current.filter((item) => predicate(item.data));
-  };
-  const getOptionFromSearch = (search, startFrom) => {
-    const collator = new Intl.Collator("en", {
-      usage: "search",
-      sensitivity: "base"
-    });
-    const startIndex = startFrom ? getIndexOfOption(startFrom) + 1 : 0;
-    const searchList = optionsRef.current.map((item) => item.data);
-    let matches = searchList.filter(
-      (option) => collator.compare(
-        valueToString(option.value).substring(0, search.length),
-        search
-      ) === 0
-    );
-    if (matches.length === 0) {
-      const letters = search.split("");
-      const allSameLetter = letters.length > 0 && letters.every((letter) => collator.compare(letter, letters[0]) === 0);
-      if (allSameLetter) {
-        matches = searchList.filter(
-          (option) => collator.compare(
-            valueToString(option.value)[0].toLowerCase(),
-            letters[0]
-          ) === 0
-        );
+  }, []);
+  const getOptionsMatching = useCallback(
+    (predicate) => {
+      return optionsRef.current.filter((item) => predicate(item.data));
+    },
+    []
+  );
+  const getOptionFromSearch = useCallback(
+    (search, startFrom) => {
+      const collator = new Intl.Collator("en", {
+        usage: "search",
+        sensitivity: "base"
+      });
+      const startIndex = startFrom ? getIndexOfOption(startFrom) + 1 : 0;
+      const searchList = optionsRef.current.map((item) => item.data);
+      let matches = searchList.filter(
+        (option) => collator.compare(
+          valueToString(option.value).substring(0, search.length),
+          search
+        ) === 0
+      );
+      if (matches.length === 0) {
+        const letters = search.split("");
+        const allSameLetter = letters.length > 0 && letters.every((letter) => collator.compare(letter, letters[0]) === 0);
+        if (allSameLetter) {
+          matches = searchList.filter(
+            (option) => collator.compare(
+              valueToString(option.value)[0].toLowerCase(),
+              letters[0]
+            ) === 0
+          );
+        }
       }
-    }
-    return matches.find((option) => getIndexOfOption(option) >= startIndex);
-  };
-  const getFirstOption = () => {
+      return matches.find((option) => getIndexOfOption(option) >= startIndex);
+    },
+    [getIndexOfOption, valueToString]
+  );
+  const getFirstOption = useCallback(() => {
     return getOptionAtIndex(0);
-  };
-  const getLastOption = () => {
+  }, [getOptionAtIndex]);
+  const getLastOption = useCallback(() => {
     return getOptionAtIndex(optionsRef.current.length - 1);
-  };
-  const getOptionBefore = (option) => {
-    const index = getIndexOfOption(option);
-    return getOptionAtIndex(index - 1);
-  };
-  const getOptionAfter = (option) => {
-    const index = getIndexOfOption(option);
-    return getOptionAtIndex(index + 1);
-  };
-  const getOptionPageAbove = (start) => {
-    var _a;
-    const list = listRef.current;
-    let option = optionsRef.current.find((option2) => option2.data === start);
-    if (!list || !option) {
-      return void 0;
-    }
-    const containerRect = list.getBoundingClientRect();
-    let optionRect = option.element.getBoundingClientRect();
-    const listY = containerRect.y - list.scrollTop;
-    const pageY = Math.max(
-      0,
-      optionRect.y - listY + optionRect.height - containerRect.height
-    );
-    while (option && optionRect && optionRect.y - listY > pageY) {
-      option = getOptionBefore(option.data);
-      optionRect = (_a = option == null ? void 0 : option.element) == null ? void 0 : _a.getBoundingClientRect();
-    }
-    return option ?? getFirstOption();
-  };
-  const getOptionPageBelow = (start) => {
-    const list = listRef.current;
-    let option = optionsRef.current.find((option2) => option2.data === start);
-    if (!list || !option) {
-      return void 0;
-    }
-    const containerRect = list.getBoundingClientRect();
-    let optionRect = option.element.getBoundingClientRect();
-    const listY = containerRect.y - list.scrollTop;
-    const pageY = Math.min(
-      list.scrollHeight,
-      optionRect.y - listY - optionRect.height + containerRect.height
-    );
-    while (option && optionRect && optionRect.y - listY < pageY) {
-      option = getOptionAfter(option.data);
-      optionRect = option == null ? void 0 : option.element.getBoundingClientRect();
-    }
-    return option ?? getLastOption();
-  };
+  }, [getOptionAtIndex]);
+  const getOptionBefore = useCallback(
+    (option) => {
+      const index = getIndexOfOption(option);
+      return getOptionAtIndex(index - 1);
+    },
+    [getIndexOfOption, getOptionAtIndex]
+  );
+  const getOptionAfter = useCallback(
+    (option) => {
+      const index = getIndexOfOption(option);
+      return getOptionAtIndex(index + 1);
+    },
+    [getIndexOfOption, getOptionAtIndex]
+  );
+  const getOptionPageAbove = useCallback(
+    (start) => {
+      var _a;
+      const list = listRef.current;
+      let option = optionsRef.current.find((option2) => option2.data === start);
+      if (!list || !option) {
+        return void 0;
+      }
+      const containerRect = list.getBoundingClientRect();
+      let optionRect = option.element.getBoundingClientRect();
+      const listY = containerRect.y - list.scrollTop;
+      const pageY = Math.max(
+        0,
+        optionRect.y - listY + optionRect.height - containerRect.height
+      );
+      while (option && optionRect && optionRect.y - listY > pageY) {
+        option = getOptionBefore(option.data);
+        optionRect = (_a = option == null ? void 0 : option.element) == null ? void 0 : _a.getBoundingClientRect();
+      }
+      return option ?? getFirstOption();
+    },
+    [getFirstOption, getOptionBefore]
+  );
+  const getOptionPageBelow = useCallback(
+    (start) => {
+      const list = listRef.current;
+      let option = optionsRef.current.find((option2) => option2.data === start);
+      if (!list || !option) {
+        return void 0;
+      }
+      const containerRect = list.getBoundingClientRect();
+      let optionRect = option.element.getBoundingClientRect();
+      const listY = containerRect.y - list.scrollTop;
+      const pageY = Math.min(
+        list.scrollHeight,
+        optionRect.y - listY - optionRect.height + containerRect.height
+      );
+      while (option && optionRect && optionRect.y - listY < pageY) {
+        option = getOptionAfter(option.data);
+        optionRect = option == null ? void 0 : option.element.getBoundingClientRect();
+      }
+      return option ?? getLastOption();
+    },
+    [getLastOption, getOptionAfter]
+  );
   useEffect(() => {
     var _a;
     if (listRef.current) {

package/dist-es/list-control/ListControlState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListControlState.js","sources":["../src/list-control/ListControlState.ts"],"sourcesContent":["import {\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useControlled, useForkRef } from \"../utils\";\nimport type { OptionValue } from \"./ListControlContext\";\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport type ListControlProps<Item> = {\n  /**\n   * If true, the control will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, the control will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * If true, the list will be open by default.\n   */\n  defaultOpen?: boolean;\n  /**\n   * If true, the list will be open. Useful for controlling the component.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the open state changes.\n   */\n  onOpenChange?: (newOpen: boolean, reason?: OpenChangeReason) => void;\n  /**\n   * The default selected options. If this is provided `defaultValue` should be provided as well.\n   */\n  defaultSelected?: Item[];\n  /**\n   * The selected options. The component will be controlled if this prop is provided.\n   */\n  selected?: Item[];\n  /**\n   * Callback fired when the selected options change.\n   */\n  onSelectionChange?: (event: SyntheticEvent, newSelected: Item[]) => void;\n  /**\n   * If true, multiple options can be selected.\n   */\n  multiselect?: boolean;\n  /**\n   * Callback used to convert an option's `value` to a string. This is needed when the value is different to the display value or the value is not a string.\n   */\n  valueToString?: (item: Item) => string;\n};\n\nexport function defaultValueToString<Item>(item: Item): string {\n  return String(item);\n}\n\nexport function useListControl<Item>(props: ListControlProps<Item>) {\n  const {\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected: selectedProp,\n    onSelectionChange,\n    disabled,\n    readOnly,\n    valueToString = defaultValueToString,\n  } = props;\n\n  const listRef = useRef<HTMLDivElement>(null);\n  const [listElement, setListElement] = useState<HTMLDivElement | null>(null);\n  const setListRef = useForkRef<HTMLDivElement>(listRef, setListElement);\n\n  const [focusedState, setFocusedState] = useState(false);\n  const [focusVisibleState, setFocusVisibleState] = useState(false);\n\n  useEffect(() => {\n    // remove focus when controlling disabled\n    if (disabled && focusedState) {\n      setFocusedState(false);\n      setFocusVisibleState(false);\n    }\n  }, [disabled, focusedState]);\n\n  const [activeState, setActiveState] = useState<OptionValue<Item> | undefined>(\n    undefined,\n  );\n\n  const setActive = (option?: OptionValue<Item>) => {\n    if (option) {\n      setActiveState(option);\n    } else {\n      setActiveState(undefined);\n    }\n  };\n\n  const [openState, setOpenState] = useControlled({\n    controlled: openProp,\n    default: Boolean(defaultOpen),\n    name: \"ListControl\",\n    state: \"open\",\n  });\n\n  const openKey = useRef<string | undefined>(undefined);\n\n  const setOpen = (\n    newOpen: boolean,\n    reason?: OpenChangeReason,\n    key?: string,\n  ) => {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    setOpenState(newOpen);\n    openKey.current = key;\n\n    if (newOpen !== openState) {\n      onOpenChange?.(newOpen, reason);\n    }\n  };\n\n  const [selectedState, setSelectedState] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"ListControl\",\n    state: \"selected\",\n  });\n\n  const select = (event: SyntheticEvent, option: OptionValue<Item>) => {\n    if (option.disabled || readOnly || disabled) {\n      return;\n    }\n\n    let newSelected = [option.value];\n\n    if (multiselect) {\n      if (selectedState.includes(option.value)) {\n        newSelected = selectedState.filter((item) => item !== option.value);\n      } else {\n        newSelected = selectedState.concat([option.value]);\n      }\n    }\n\n    setSelectedState(newSelected);\n    onSelectionChange?.(event, newSelected);\n\n    if (!multiselect) {\n      setOpen(false);\n    }\n  };\n\n  const clear = (event: SyntheticEvent) => {\n    setSelectedState([]);\n    if (selectedState.length !== 0) {\n      onSelectionChange?.(event, []);\n    }\n  };\n\n  const optionsRef = useRef<\n    { data: OptionValue<Item>; element: HTMLElement }[]\n  >([]);\n\n  const register = useCallback(\n    (optionValue: OptionValue<Item>, element: HTMLElement) => {\n      const { id } = optionValue;\n\n      optionsRef.current.push({ data: optionValue, element });\n\n      return () => {\n        optionsRef.current = optionsRef.current.filter(\n          (item) => item.data.id !== id,\n        );\n      };\n    },\n    [],\n  );\n\n  useEffect(() => {\n    const sortOptions = () => {\n      optionsRef.current = optionsRef.current\n        .filter((a) => a.element.isConnected)\n        .sort(({ element: a }, { element: b }) => {\n          if (a === b) return 0;\n          const pos = a.compareDocumentPosition(b);\n          if (pos & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n          if (pos & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n          // Disconnected / impl-specific — keep input order (stable) or add your own rule\n          return 0;\n        });\n    };\n\n    const mutationObserver = new MutationObserver((mutations) => {\n      const optionsChanged = mutations.some((mutation) =>\n        Array.from(mutation.addedNodes).some(\n          (node) =>\n            node instanceof HTMLElement && node.matches?.('[role=\"option\"]'),\n        ),\n      );\n\n      if (optionsChanged) {\n        sortOptions();\n      }\n    });\n\n    if (!listElement) return;\n    mutationObserver.observe(listElement, {\n      childList: true,\n      subtree: true,\n    });\n\n    sortOptions();\n\n    return () => mutationObserver.disconnect();\n  }, [listElement]);\n\n  const getOptionAtIndex = (\n    index: number,\n  ): { data: OptionValue<Item>; element: HTMLElement } | undefined => {\n    return optionsRef.current[index];\n  };\n\n  const getIndexOfOption = (option: OptionValue<Item>) => {\n    return optionsRef.current.findIndex(\n      (item) => item.data.value === option.value,\n    );\n  };\n\n  const getOptionsMatching = (\n    predicate: (option: OptionValue<Item>) => boolean,\n  ) => {\n    return optionsRef.current.filter((item) => predicate(item.data));\n  };\n\n  const getOptionFromSearch = (\n    search: string,\n    startFrom?: OptionValue<Item>,\n  ) => {\n    const collator = new Intl.Collator(\"en\", {\n      usage: \"search\",\n      sensitivity: \"base\",\n    });\n\n    const startIndex = startFrom ? getIndexOfOption(startFrom) + 1 : 0;\n    const searchList = optionsRef.current.map((item) => item.data);\n\n    let matches = searchList.filter(\n      (option) =>\n        collator.compare(\n          valueToString(option.value).substring(0, search.length),\n          search,\n        ) === 0,\n    );\n\n    if (matches.length === 0) {\n      const letters = search.split(\"\");\n      const allSameLetter =\n        letters.length > 0 &&\n        letters.every((letter) => collator.compare(letter, letters[0]) === 0);\n      if (allSameLetter) {\n        matches = searchList.filter(\n          (option) =>\n            collator.compare(\n              valueToString(option.value)[0].toLowerCase(),\n              letters[0],\n            ) === 0,\n        );\n      }\n    }\n\n    return matches.find((option) => getIndexOfOption(option) >= startIndex);\n  };\n\n  const getFirstOption = () => {\n    return getOptionAtIndex(0);\n  };\n\n  const getLastOption = () => {\n    return getOptionAtIndex(optionsRef.current.length - 1);\n  };\n\n  const getOptionBefore = (option: OptionValue<Item>) => {\n    const index = getIndexOfOption(option);\n    return getOptionAtIndex(index - 1);\n  };\n\n  const getOptionAfter = (option: OptionValue<Item>) => {\n    const index = getIndexOfOption(option);\n    return getOptionAtIndex(index + 1);\n  };\n\n  const getOptionPageAbove = (start: OptionValue<Item>) => {\n    const list = listRef.current;\n    let option = optionsRef.current.find((option) => option.data === start);\n\n    if (!list || !option) {\n      return undefined;\n    }\n\n    const containerRect = list.getBoundingClientRect();\n    let optionRect: DOMRect | undefined =\n      option.element.getBoundingClientRect();\n\n    const listY = containerRect.y - list.scrollTop;\n    const pageY = Math.max(\n      0,\n      optionRect.y - listY + optionRect.height - containerRect.height,\n    );\n\n    while (option && optionRect && optionRect.y - listY > pageY) {\n      option = getOptionBefore(option.data);\n      optionRect = option?.element?.getBoundingClientRect();\n    }\n\n    return option ?? getFirstOption();\n  };\n\n  const getOptionPageBelow = (start: OptionValue<Item>) => {\n    const list = listRef.current;\n    let option = optionsRef.current.find((option) => option.data === start);\n\n    if (!list || !option) {\n      return undefined;\n    }\n\n    const containerRect = list.getBoundingClientRect();\n    let optionRect: DOMRect | undefined =\n      option.element.getBoundingClientRect();\n\n    const listY = containerRect.y - list.scrollTop;\n    const pageY = Math.min(\n      list.scrollHeight,\n      optionRect.y - listY - optionRect.height + containerRect.height,\n    );\n\n    while (option && optionRect && optionRect.y - listY < pageY) {\n      option = getOptionAfter(option.data);\n      optionRect = option?.element.getBoundingClientRect();\n    }\n\n    return option ?? getLastOption();\n  };\n\n  useEffect(() => {\n    if (listRef.current) {\n      const activeElement = optionsRef.current.find(\n        (option) => option.data === activeState,\n      )?.element;\n\n      if (!activeElement) {\n        return;\n      }\n\n      activeElement.scrollIntoView({\n        block: \"nearest\",\n        inline: \"nearest\",\n      });\n    }\n  }, [activeState]);\n\n  return {\n    multiselect: Boolean(multiselect),\n    openState,\n    setOpen,\n    openKey,\n    activeState,\n    setActive,\n    selectedState,\n    setSelectedState,\n    select,\n    clear,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    setListRef,\n    listRef,\n    options: optionsRef.current.map((option) => option.element),\n    register,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    getFirstOption,\n    getLastOption,\n    valueToString,\n    disabled,\n  };\n}\n"],"names":["option"],"mappings":"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"}
+{"version":3,"file":"ListControlState.js","sources":["../src/list-control/ListControlState.ts"],"sourcesContent":["import {\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useControlled, useForkRef } from \"../utils\";\nimport type { OptionValue } from \"./ListControlContext\";\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport type ListControlProps<Item> = {\n  /**\n   * If true, the control will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, the control will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * If true, the list will be open by default.\n   */\n  defaultOpen?: boolean;\n  /**\n   * If true, the list will be open. Useful for controlling the component.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the open state changes.\n   */\n  onOpenChange?: (newOpen: boolean, reason?: OpenChangeReason) => void;\n  /**\n   * The default selected options. If this is provided `defaultValue` should be provided as well.\n   */\n  defaultSelected?: Item[];\n  /**\n   * The selected options. The component will be controlled if this prop is provided.\n   */\n  selected?: Item[];\n  /**\n   * Callback fired when the selected options change.\n   */\n  onSelectionChange?: (event: SyntheticEvent, newSelected: Item[]) => void;\n  /**\n   * If true, multiple options can be selected.\n   */\n  multiselect?: boolean;\n  /**\n   * Callback used to convert an option's `value` to a string. This is needed when the value is different to the display value or the value is not a string.\n   */\n  valueToString?: (item: Item) => string;\n};\n\nexport function defaultValueToString<Item>(item: Item): string {\n  return String(item);\n}\n\nexport function useListControl<Item>(props: ListControlProps<Item>) {\n  const {\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected: selectedProp,\n    onSelectionChange,\n    disabled,\n    readOnly,\n    valueToString = defaultValueToString,\n  } = props;\n\n  const listRef = useRef<HTMLDivElement>(null);\n  const [listElement, setListElement] = useState<HTMLDivElement | null>(null);\n  const setListRef = useForkRef<HTMLDivElement>(listRef, setListElement);\n\n  const [focusedState, setFocusedState] = useState(false);\n  const [focusVisibleState, setFocusVisibleState] = useState(false);\n\n  useEffect(() => {\n    // remove focus when controlling disabled\n    if (disabled && focusedState) {\n      setFocusedState(false);\n      setFocusVisibleState(false);\n    }\n  }, [disabled, focusedState]);\n\n  const [activeState, setActiveState] = useState<OptionValue<Item> | undefined>(\n    undefined,\n  );\n\n  const setActive = useCallback((option?: OptionValue<Item>) => {\n    if (option) {\n      setActiveState(option);\n    } else {\n      setActiveState(undefined);\n    }\n  }, []);\n\n  const [openState, setOpenState] = useControlled({\n    controlled: openProp,\n    default: Boolean(defaultOpen),\n    name: \"ListControl\",\n    state: \"open\",\n  });\n\n  const openKey = useRef<string | undefined>(undefined);\n\n  const setOpen = (\n    newOpen: boolean,\n    reason?: OpenChangeReason,\n    key?: string,\n  ) => {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    setOpenState(newOpen);\n    openKey.current = key;\n\n    if (newOpen !== openState) {\n      onOpenChange?.(newOpen, reason);\n    }\n  };\n\n  const [selectedState, setSelectedState] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"ListControl\",\n    state: \"selected\",\n  });\n\n  const select = (event: SyntheticEvent, option: OptionValue<Item>) => {\n    if (option.disabled || readOnly || disabled) {\n      return;\n    }\n\n    let newSelected = [option.value];\n\n    if (multiselect) {\n      if (selectedState.includes(option.value)) {\n        newSelected = selectedState.filter((item) => item !== option.value);\n      } else {\n        newSelected = selectedState.concat([option.value]);\n      }\n    }\n\n    setSelectedState(newSelected);\n    onSelectionChange?.(event, newSelected);\n\n    if (!multiselect) {\n      setOpen(false);\n    }\n  };\n\n  const clear = (event: SyntheticEvent) => {\n    setSelectedState([]);\n    if (selectedState.length !== 0) {\n      onSelectionChange?.(event, []);\n    }\n  };\n\n  const optionsRef = useRef<\n    { data: OptionValue<Item>; element: HTMLElement }[]\n  >([]);\n\n  const register = useCallback(\n    (optionValue: OptionValue<Item>, element: HTMLElement) => {\n      const { id } = optionValue;\n\n      optionsRef.current.push({ data: optionValue, element });\n\n      return () => {\n        optionsRef.current = optionsRef.current.filter(\n          (item) => item.data.id !== id,\n        );\n      };\n    },\n    [],\n  );\n\n  useEffect(() => {\n    const sortOptions = () => {\n      optionsRef.current = optionsRef.current\n        .filter((a) => a.element.isConnected)\n        .sort(({ element: a }, { element: b }) => {\n          if (a === b) return 0;\n          const pos = a.compareDocumentPosition(b);\n          if (pos & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n          if (pos & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n          // Disconnected / impl-specific — keep input order (stable) or add your own rule\n          return 0;\n        });\n    };\n\n    const mutationObserver = new MutationObserver((mutations) => {\n      const optionsChanged = mutations.some((mutation) =>\n        Array.from(mutation.addedNodes).some(\n          (node) =>\n            node instanceof HTMLElement && node.matches?.('[role=\"option\"]'),\n        ),\n      );\n\n      if (optionsChanged) {\n        sortOptions();\n      }\n    });\n\n    if (!listElement) return;\n    mutationObserver.observe(listElement, {\n      childList: true,\n      subtree: true,\n    });\n\n    sortOptions();\n\n    return () => mutationObserver.disconnect();\n  }, [listElement]);\n\n  const getOptionAtIndex = useCallback(\n    (\n      index: number,\n    ): { data: OptionValue<Item>; element: HTMLElement } | undefined => {\n      return optionsRef.current[index];\n    },\n    [],\n  );\n\n  const getIndexOfOption = useCallback((option: OptionValue<Item>) => {\n    return optionsRef.current.findIndex(\n      (item) => item.data.value === option.value,\n    );\n  }, []);\n\n  const getOptionsMatching = useCallback(\n    (predicate: (option: OptionValue<Item>) => boolean) => {\n      return optionsRef.current.filter((item) => predicate(item.data));\n    },\n    [],\n  );\n\n  const getOptionFromSearch = useCallback(\n    (search: string, startFrom?: OptionValue<Item>) => {\n      const collator = new Intl.Collator(\"en\", {\n        usage: \"search\",\n        sensitivity: \"base\",\n      });\n\n      const startIndex = startFrom ? getIndexOfOption(startFrom) + 1 : 0;\n      const searchList = optionsRef.current.map((item) => item.data);\n\n      let matches = searchList.filter(\n        (option) =>\n          collator.compare(\n            valueToString(option.value).substring(0, search.length),\n            search,\n          ) === 0,\n      );\n\n      if (matches.length === 0) {\n        const letters = search.split(\"\");\n        const allSameLetter =\n          letters.length > 0 &&\n          letters.every((letter) => collator.compare(letter, letters[0]) === 0);\n        if (allSameLetter) {\n          matches = searchList.filter(\n            (option) =>\n              collator.compare(\n                valueToString(option.value)[0].toLowerCase(),\n                letters[0],\n              ) === 0,\n          );\n        }\n      }\n\n      return matches.find((option) => getIndexOfOption(option) >= startIndex);\n    },\n    [getIndexOfOption, valueToString],\n  );\n\n  const getFirstOption = useCallback(() => {\n    return getOptionAtIndex(0);\n  }, [getOptionAtIndex]);\n\n  const getLastOption = useCallback(() => {\n    return getOptionAtIndex(optionsRef.current.length - 1);\n  }, [getOptionAtIndex]);\n\n  const getOptionBefore = useCallback(\n    (option: OptionValue<Item>) => {\n      const index = getIndexOfOption(option);\n      return getOptionAtIndex(index - 1);\n    },\n    [getIndexOfOption, getOptionAtIndex],\n  );\n\n  const getOptionAfter = useCallback(\n    (option: OptionValue<Item>) => {\n      const index = getIndexOfOption(option);\n      return getOptionAtIndex(index + 1);\n    },\n    [getIndexOfOption, getOptionAtIndex],\n  );\n\n  const getOptionPageAbove = useCallback(\n    (start: OptionValue<Item>) => {\n      const list = listRef.current;\n      let option = optionsRef.current.find((option) => option.data === start);\n\n      if (!list || !option) {\n        return undefined;\n      }\n\n      const containerRect = list.getBoundingClientRect();\n      let optionRect: DOMRect | undefined =\n        option.element.getBoundingClientRect();\n\n      const listY = containerRect.y - list.scrollTop;\n      const pageY = Math.max(\n        0,\n        optionRect.y - listY + optionRect.height - containerRect.height,\n      );\n\n      while (option && optionRect && optionRect.y - listY > pageY) {\n        option = getOptionBefore(option.data);\n        optionRect = option?.element?.getBoundingClientRect();\n      }\n\n      return option ?? getFirstOption();\n    },\n    [getFirstOption, getOptionBefore],\n  );\n\n  const getOptionPageBelow = useCallback(\n    (start: OptionValue<Item>) => {\n      const list = listRef.current;\n      let option = optionsRef.current.find((option) => option.data === start);\n\n      if (!list || !option) {\n        return undefined;\n      }\n\n      const containerRect = list.getBoundingClientRect();\n      let optionRect: DOMRect | undefined =\n        option.element.getBoundingClientRect();\n\n      const listY = containerRect.y - list.scrollTop;\n      const pageY = Math.min(\n        list.scrollHeight,\n        optionRect.y - listY - optionRect.height + containerRect.height,\n      );\n\n      while (option && optionRect && optionRect.y - listY < pageY) {\n        option = getOptionAfter(option.data);\n        optionRect = option?.element.getBoundingClientRect();\n      }\n\n      return option ?? getLastOption();\n    },\n    [getLastOption, getOptionAfter],\n  );\n\n  useEffect(() => {\n    if (listRef.current) {\n      const activeElement = optionsRef.current.find(\n        (option) => option.data === activeState,\n      )?.element;\n\n      if (!activeElement) {\n        return;\n      }\n\n      activeElement.scrollIntoView({\n        block: \"nearest\",\n        inline: \"nearest\",\n      });\n    }\n  }, [activeState]);\n\n  return {\n    multiselect: Boolean(multiselect),\n    openState,\n    setOpen,\n    openKey,\n    activeState,\n    setActive,\n    selectedState,\n    setSelectedState,\n    select,\n    clear,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    setListRef,\n    listRef,\n    options: optionsRef.current.map((option) => option.element),\n    register,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    getFirstOption,\n    getLastOption,\n    valueToString,\n    disabled,\n  };\n}\n"],"names":["option"],"mappings":"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"}

package/dist-es/menu/MenuTrigger.js

@@ -13,7 +13,7 @@ import { MenuTriggerContext } from './MenuTriggerContext.js';
 
 const MenuTrigger = forwardRef(
   function MenuTrigger2(props, ref) {
-    const { children } = props;
+    const { children, ...rest } = props;
     const { getReferenceProps, refs, setFocusInside, focusInside, openState } = useMenuContext();
     const { setFocusInside: setFocusInsideParent } = useMenuPanelContext();
     const handleFloatingRef = useForkRef(
@@ -34,7 +34,8 @@ const MenuTrigger = forwardRef(
               onFocus() {
                 setFocusInsideParent(true);
                 setFocusInside(false);
-              }
+              },
+              ...rest
             }),
             children.props
           ),

package/dist-es/menu/MenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.js","sources":["../src/menu/MenuTrigger.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { MenuTriggerContext } from \"./MenuTriggerContext\";\n\nexport interface MenuTriggerProps {\n  /**\n   * The trigger element for the menu. This should be a single child element and accept a ref.\n   */\n  children?: ReactNode;\n}\n\nexport const MenuTrigger = forwardRef<HTMLElement, MenuTriggerProps>(\n  function MenuTrigger(props, ref) {\n    const { children } = props;\n\n    const { getReferenceProps, refs, setFocusInside, focusInside, openState } =\n      useMenuContext();\n    const { setFocusInside: setFocusInsideParent } = useMenuPanelContext();\n\n    const handleFloatingRef = useForkRef(\n      getRefFromChildren(children),\n      refs?.setReference,\n    );\n    const handleRef = useForkRef(handleFloatingRef, ref);\n\n    if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n      // Should we log or throw error?\n      return <>{children}</>;\n    }\n\n    return (\n      <MenuTriggerContext.Provider\n        value={{ triggersSubmenu: true, blurActive: focusInside && openState }}\n      >\n        {cloneElement(children, {\n          ...mergeProps(\n            getReferenceProps({\n              onFocus() {\n                setFocusInsideParent(true);\n                setFocusInside(false);\n              },\n            }),\n            children.props,\n          ),\n          ref: handleRef,\n        })}\n      </MenuTriggerContext.Provider>\n    );\n  },\n);\n"],"names":["MenuTrigger"],"mappings":";;;;;;;;;;;;;AAmBO,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,SAASA,YAAAA,CAAY,KAAA,EAAO,GAAA,EAAK;AAC/B,IAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AAErB,IAAA,MAAM,EAAE,iBAAA,EAAmB,IAAA,EAAM,gBAAgB,WAAA,EAAa,SAAA,KAC5D,cAAA,EAAe;AACjB,IAAA,MAAM,EAAE,cAAA,EAAgB,oBAAA,EAAqB,GAAI,mBAAA,EAAoB;AAErE,IAAA,MAAM,iBAAA,GAAoB,UAAA;AAAA,MACxB,mBAAmB,QAAQ,CAAA;AAAA,MAC3B,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM;AAAA,KACR;AACA,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,iBAAA,EAAmB,GAAG,CAAA;AAEnD,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAuC,QAAQ,CAAA,EAAG;AAElE,MAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,IACrB;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,kBAAA,CAAmB,QAAA;AAAA,MAAnB;AAAA,QACC,OAAO,EAAE,eAAA,EAAiB,IAAA,EAAM,UAAA,EAAY,eAAe,SAAA,EAAU;AAAA,QAEpE,uBAAa,QAAA,EAAU;AAAA,UACtB,GAAG,UAAA;AAAA,YACD,iBAAA,CAAkB;AAAA,cAChB,OAAA,GAAU;AACR,gBAAA,oBAAA,CAAqB,IAAI,CAAA;AACzB,gBAAA,cAAA,CAAe,KAAK,CAAA;AAAA,cACtB;AAAA,aACD,CAAA;AAAA,YACD,QAAA,CAAS;AAAA,WACX;AAAA,UACA,GAAA,EAAK;AAAA,SACN;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"MenuTrigger.js","sources":["../src/menu/MenuTrigger.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { MenuTriggerContext } from \"./MenuTriggerContext\";\n\nexport interface MenuTriggerProps {\n  /**\n   * The trigger element for the menu. This should be a single child element and accept a ref.\n   */\n  children?: ReactNode;\n}\n\nexport const MenuTrigger = forwardRef<HTMLElement, MenuTriggerProps>(\n  function MenuTrigger(props, ref) {\n    const { children, ...rest } = props;\n\n    const { getReferenceProps, refs, setFocusInside, focusInside, openState } =\n      useMenuContext();\n    const { setFocusInside: setFocusInsideParent } = useMenuPanelContext();\n\n    const handleFloatingRef = useForkRef(\n      getRefFromChildren(children),\n      refs?.setReference,\n    );\n    const handleRef = useForkRef(handleFloatingRef, ref);\n\n    if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n      // Should we log or throw error?\n      return <>{children}</>;\n    }\n\n    return (\n      <MenuTriggerContext.Provider\n        value={{ triggersSubmenu: true, blurActive: focusInside && openState }}\n      >\n        {cloneElement(children, {\n          ...mergeProps(\n            getReferenceProps({\n              onFocus() {\n                setFocusInsideParent(true);\n                setFocusInside(false);\n              },\n              ...rest,\n            }),\n            children.props,\n          ),\n          ref: handleRef,\n        })}\n      </MenuTriggerContext.Provider>\n    );\n  },\n);\n"],"names":["MenuTrigger"],"mappings":";;;;;;;;;;;;;AAmBO,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,SAASA,YAAAA,CAAY,KAAA,EAAO,GAAA,EAAK;AAC/B,IAAA,MAAM,EAAE,QAAA,EAAU,GAAG,IAAA,EAAK,GAAI,KAAA;AAE9B,IAAA,MAAM,EAAE,iBAAA,EAAmB,IAAA,EAAM,gBAAgB,WAAA,EAAa,SAAA,KAC5D,cAAA,EAAe;AACjB,IAAA,MAAM,EAAE,cAAA,EAAgB,oBAAA,EAAqB,GAAI,mBAAA,EAAoB;AAErE,IAAA,MAAM,iBAAA,GAAoB,UAAA;AAAA,MACxB,mBAAmB,QAAQ,CAAA;AAAA,MAC3B,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM;AAAA,KACR;AACA,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,iBAAA,EAAmB,GAAG,CAAA;AAEnD,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAuC,QAAQ,CAAA,EAAG;AAElE,MAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,IACrB;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,kBAAA,CAAmB,QAAA;AAAA,MAAnB;AAAA,QACC,OAAO,EAAE,eAAA,EAAiB,IAAA,EAAM,UAAA,EAAY,eAAe,SAAA,EAAU;AAAA,QAEpE,uBAAa,QAAA,EAAU;AAAA,UACtB,GAAG,UAAA;AAAA,YACD,iBAAA,CAAkB;AAAA,cAChB,OAAA,GAAU;AACR,gBAAA,oBAAA,CAAqB,IAAI,CAAA;AACzB,gBAAA,cAAA,CAAe,KAAK,CAAA;AAAA,cACtB,CAAA;AAAA,cACA,GAAG;AAAA,aACJ,CAAA;AAAA,YACD,QAAA,CAAS;AAAA,WACX;AAAA,UACA,GAAA,EAAK;AAAA,SACN;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-es/overlay/OverlayTrigger.js

@@ -11,7 +11,7 @@ import { useOverlayContext } from './OverlayContext.js';
 
 const OverlayTrigger = forwardRef(
   function OverlayTrigger2(props, ref) {
-    const { children } = props;
+    const { children, ...rest } = props;
     const { reference, getReferenceProps } = useOverlayContext();
     const handleFloatingRef = useForkRef(
       getRefFromChildren(children),
@@ -22,7 +22,7 @@ const OverlayTrigger = forwardRef(
       return /* @__PURE__ */ jsx(Fragment, { children });
     }
     return /* @__PURE__ */ jsx(Fragment, { children: cloneElement(children, {
-      ...mergeProps(getReferenceProps(), children.props),
+      ...mergeProps(getReferenceProps(rest), children.props),
       ref: handleRef
     }) });
   }

package/dist-es/overlay/OverlayTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayTrigger.js","sources":["../src/overlay/OverlayTrigger.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayTriggerProps {\n  children?: ReactNode;\n}\n\nexport const OverlayTrigger = forwardRef<HTMLElement, OverlayTriggerProps>(\n  function OverlayTrigger(props, ref) {\n    const { children } = props;\n\n    const { reference, getReferenceProps } = useOverlayContext();\n\n    const handleFloatingRef = useForkRef(\n      getRefFromChildren(children),\n      reference,\n    );\n    const handleRef = useForkRef(handleFloatingRef, ref);\n\n    if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n      return <>{children}</>;\n    }\n\n    return (\n      <>\n        {cloneElement(children, {\n          ...mergeProps(getReferenceProps(), children.props),\n          ref: handleRef,\n        })}\n      </>\n    );\n  },\n);\n"],"names":["OverlayTrigger"],"mappings":";;;;;;;;;;;AAcO,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AAErB,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAI,iBAAA,EAAkB;AAE3D,IAAA,MAAM,iBAAA,GAAoB,UAAA;AAAA,MACxB,mBAAmB,QAAQ,CAAA;AAAA,MAC3B;AAAA,KACF;AACA,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,iBAAA,EAAmB,GAAG,CAAA;AAEnD,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAuC,QAAQ,CAAA,EAAG;AAClE,MAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,IACrB;AAEA,IAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACG,uBAAa,QAAA,EAAU;AAAA,MACtB,GAAG,UAAA,CAAW,iBAAA,EAAkB,EAAG,SAAS,KAAK,CAAA;AAAA,MACjD,GAAA,EAAK;AAAA,KACN,CAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"OverlayTrigger.js","sources":["../src/overlay/OverlayTrigger.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayTriggerProps {\n  children?: ReactNode;\n}\n\nexport const OverlayTrigger = forwardRef<HTMLElement, OverlayTriggerProps>(\n  function OverlayTrigger(props, ref) {\n    const { children, ...rest } = props;\n\n    const { reference, getReferenceProps } = useOverlayContext();\n\n    const handleFloatingRef = useForkRef(\n      getRefFromChildren(children),\n      reference,\n    );\n    const handleRef = useForkRef(handleFloatingRef, ref);\n\n    if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n      return <>{children}</>;\n    }\n\n    return (\n      <>\n        {cloneElement(children, {\n          ...mergeProps(getReferenceProps(rest), children.props),\n          ref: handleRef,\n        })}\n      </>\n    );\n  },\n);\n"],"names":["OverlayTrigger"],"mappings":";;;;;;;;;;;AAcO,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,GAAG,IAAA,EAAK,GAAI,KAAA;AAE9B,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAI,iBAAA,EAAkB;AAE3D,IAAA,MAAM,iBAAA,GAAoB,UAAA;AAAA,MACxB,mBAAmB,QAAQ,CAAA;AAAA,MAC3B;AAAA,KACF;AACA,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,iBAAA,EAAmB,GAAG,CAAA;AAEnD,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAuC,QAAQ,CAAA,EAAG;AAClE,MAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,IACrB;AAEA,IAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACG,uBAAa,QAAA,EAAU;AAAA,MACtB,GAAG,UAAA,CAAW,iBAAA,CAAkB,IAAI,CAAA,EAAG,SAAS,KAAK,CAAA;AAAA,MACrD,GAAA,EAAK;AAAA,KACN,CAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-es/salt-provider/ProviderContext.js

@@ -0,0 +1,9 @@
+import { createContext } from '../utils/createContext.js';
+
+const ProviderContext = createContext(
+  "ProviderContext",
+  null
+);
+
+export { ProviderContext };
+//# sourceMappingURL=ProviderContext.js.map

package/dist-es/salt-provider/ProviderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderContext.js","sources":["../src/salt-provider/ProviderContext.ts"],"sourcesContent":["import type { WindowContextType } from \"@salt-ds/window\";\nimport { createContext } from \"../utils/createContext\";\n\nexport interface ProviderContext {\n  targetWindow: WindowContextType;\n}\n\nexport const ProviderContext = createContext<ProviderContext | null>(\n  \"ProviderContext\",\n  null,\n);\n"],"names":[],"mappings":";;AAOO,MAAM,eAAA,GAAkB,aAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AACF;;;;"}

package/dist-es/salt-provider/SaltProvider.js

@@ -2,14 +2,15 @@ import { jsx } from 'react/jsx-runtime';
 import { StyleInjectionProvider, useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { createContext, useContext, useMemo, isValidElement, cloneElement } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import '../aria-announcer/AriaAnnouncerContext.js';
 import { AriaAnnouncerProvider } from '../aria-announcer/AriaAnnouncerProvider.js';
 import { useMatchedBreakpoints, BreakpointProvider } from '../breakpoints/BreakpointProvider.js';
 import { DEFAULT_BREAKPOINTS } from '../breakpoints/Breakpoints.js';
-import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import { ViewportProvider } from '../viewport/ViewportProvider.js';
+import { ProviderContext } from './ProviderContext.js';
 import css_248z from './SaltProvider.css.js';
+import { ThemeApplicator } from './ThemeApplicator.js';
 
 const DEFAULT_DENSITY = "medium";
 const DEFAULT_THEME_NAME = "salt-theme";
@@ -34,70 +35,6 @@ const ThemeContext = createContext({
   UNSTABLE_actionFont: DEFAULT_ACTION_FONT
 });
 const BreakpointContext = createContext(DEFAULT_BREAKPOINTS);
-const getThemeNames = (themeName, themeNext) => {
-  if (themeNext) {
-    return themeName === DEFAULT_THEME_NAME ? clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT) : clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT, themeName);
-  }
-  return themeName === DEFAULT_THEME_NAME ? themeName : clsx(DEFAULT_THEME_NAME, themeName);
-};
-const createThemedChildren = ({
-  children,
-  themeName,
-  density,
-  mode,
-  applyClassesTo,
-  themeNext,
-  corner,
-  headingFont,
-  accent,
-  actionFont
-}) => {
-  var _a;
-  const themeNamesString = getThemeNames(themeName, themeNext);
-  const themeNextProps = {
-    "data-corner": corner,
-    "data-heading-font": headingFont,
-    "data-accent": accent,
-    "data-action-font": actionFont
-  };
-  if (applyClassesTo === "root") {
-    return children;
-  }
-  if (applyClassesTo === "child") {
-    if (isValidElement(children)) {
-      return cloneElement(children, {
-        className: clsx(
-          (_a = children.props) == null ? void 0 : _a.className,
-          themeNamesString,
-          `salt-density-${density}`
-        ),
-        // @ts-expect-error
-        "data-mode": mode,
-        ...themeNext ? themeNextProps : {}
-      });
-    }
-    console.warn(
-      `
-SaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.
-        Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a
-        div element will wrap your child elements`
-    );
-    return children;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(
-        "salt-provider",
-        themeNamesString,
-        `salt-density-${density}`
-      ),
-      "data-mode": mode,
-      ...themeNext ? themeNextProps : {},
-      children
-    }
-  );
-};
 function InternalSaltProvider({
   applyClassesTo: applyClassesToProp,
   children,
@@ -111,26 +48,26 @@ function InternalSaltProvider({
   accent: accentProp,
   actionFont: actionFontProp
 }) {
+  const prevProvider = useContext(ProviderContext);
   const inheritedDensity = useContext(DensityContext);
   const {
     theme: inheritedTheme,
     mode: inheritedMode,
-    window: inheritedWindow,
     corner: inheritedCorner,
     headingFont: inheritedHeadingFont,
     accent: inheritedAccent,
     actionFont: inheritedActionFont
   } = useContext(ThemeContext);
-  const isRootProvider = inheritedTheme === void 0 || inheritedTheme === "";
+  const isRootProvider = prevProvider === null;
   const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;
-  const themeName = themeProp ?? (inheritedTheme === "" ? DEFAULT_THEME_NAME : inheritedTheme);
+  const inheritedThemeName = inheritedTheme === "" ? DEFAULT_THEME_NAME : inheritedTheme;
+  const themeName = themeProp ?? inheritedThemeName;
   const mode = modeProp ?? inheritedMode;
   const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;
   const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;
   const headingFont = headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;
   const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;
   const actionFont = actionFontProp ?? inheritedActionFont ?? DEFAULT_ACTION_FONT;
-  const applyClassesTo = applyClassesToProp ?? (isRootProvider ? "root" : "scope");
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "salt-provider",
@@ -164,70 +101,25 @@ function InternalSaltProvider({
       actionFont
     ]
   );
-  const themedChildren = createThemedChildren({
-    children,
-    themeName,
-    density,
-    mode,
-    applyClassesTo,
-    themeNext,
-    corner,
-    headingFont,
-    accent,
-    actionFont
-  });
-  useIsomorphicLayoutEffect(() => {
-    const themeNamesString = getThemeNames(themeName, themeNext);
-    const themeNames = themeNamesString.split(" ");
-    if (applyClassesTo === "root" && targetWindow) {
-      if (inheritedWindow !== targetWindow) {
-        targetWindow.document.documentElement.classList.add(
-          ...themeNames,
-          `salt-density-${density}`
-        );
-        targetWindow.document.documentElement.dataset.mode = mode;
-        if (themeNext) {
-          targetWindow.document.documentElement.dataset.corner = corner;
-          targetWindow.document.documentElement.dataset.headingFont = headingFont;
-          targetWindow.document.documentElement.dataset.accent = accent;
-          targetWindow.document.documentElement.dataset.actionFont = actionFont;
-        }
-      } else {
-        console.warn(
-          "SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider."
-        );
-      }
-    }
-    return () => {
-      if (applyClassesTo === "root" && targetWindow) {
-        targetWindow.document.documentElement.classList.remove(
-          ...themeNames,
-          `salt-density-${density}`
-        );
-        targetWindow.document.documentElement.dataset.mode = void 0;
-        if (themeNext) {
-          delete targetWindow.document.documentElement.dataset.corner;
-          delete targetWindow.document.documentElement.dataset.headingFont;
-          delete targetWindow.document.documentElement.dataset.accent;
-          delete targetWindow.document.documentElement.dataset.actionFont;
-        }
-      }
-    };
-  }, [
-    applyClassesTo,
-    density,
-    mode,
-    themeName,
-    targetWindow,
-    inheritedWindow,
-    themeNext,
-    corner,
-    headingFont,
-    accent,
-    actionFont
-  ]);
   const matchedBreakpoints = useMatchedBreakpoints(breakpoints);
-  const saltProvider = /* @__PURE__ */ jsx(DensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx(ThemeContext.Provider, { value: themeContextValue, children: /* @__PURE__ */ jsx(BreakpointProvider, { matchedBreakpoints, children: /* @__PURE__ */ jsx(BreakpointContext.Provider, { value: breakpoints, children: /* @__PURE__ */ jsx(ViewportProvider, { children: themedChildren }) }) }) }) });
+  const saltProvider = /* @__PURE__ */ jsx(ProviderContext.Provider, { value: { targetWindow }, children: /* @__PURE__ */ jsx(DensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx(ThemeContext.Provider, { value: themeContextValue, children: /* @__PURE__ */ jsx(BreakpointProvider, { matchedBreakpoints, children: /* @__PURE__ */ jsx(BreakpointContext.Provider, { value: breakpoints, children: /* @__PURE__ */ jsx(ViewportProvider, { children: /* @__PURE__ */ jsx(
+    ThemeApplicator,
+    {
+      applyClassesTo: applyClassesToProp ?? (isRootProvider ? "root" : "scope"),
+      density,
+      theme: clsx(
+        DEFAULT_THEME_NAME,
+        { [DEFAULT_THEME_NAME_NEXT]: themeNext },
+        themeProp
+      ),
+      mode,
+      accent: themeNext ? accent : void 0,
+      actionFont: themeNext ? actionFont : void 0,
+      headingFont: themeNext ? headingFont : void 0,
+      corner: themeNext ? corner : void 0,
+      children
+    }
+  ) }) }) }) }) }) });
   if (isRootProvider) {
     return /* @__PURE__ */ jsx(AriaAnnouncerProvider, { children: saltProvider });
   }