@arcgis/components-utils 4.34.0-next.27 → 4.34.0-next.29

package/dist/dom.d.cts

@@ -63,3 +63,13 @@ export declare const focusElement: (el: FocusableElement | undefined) => Promise
 export declare const setFocusOnElement: (ref: (Element & {
     componentOnReady?: () => Promise<void>;
 }) | null | undefined, selector: string) => void;
+/**
+ * This helper returns the Calcite "mode" of an element.
+ *
+ * **DISCLAIMER**: It is advised to consider alternative solutions before using this utility:
+ * - Calcite CSS variables. Benefits: makes styles more consistent, and variables are updated automatically to match dark/light theme.
+ * - Detect dark mode using CSS selectors and apply styles in CSS. Benefit: styles update automatically when the theme changes.
+ *
+ * @param {HTMLElement} el An element.
+ */
+export declare function unsafeGetModeName(el: HTMLElement): "dark" | "light";

package/dist/dom.d.ts

@@ -63,3 +63,13 @@ export declare const focusElement: (el: FocusableElement | undefined) => Promise
 export declare const setFocusOnElement: (ref: (Element & {
     componentOnReady?: () => Promise<void>;
 }) | null | undefined, selector: string) => void;
+/**
+ * This helper returns the Calcite "mode" of an element.
+ *
+ * **DISCLAIMER**: It is advised to consider alternative solutions before using this utility:
+ * - Calcite CSS variables. Benefits: makes styles more consistent, and variables are updated automatically to match dark/light theme.
+ * - Detect dark mode using CSS selectors and apply styles in CSS. Benefit: styles update automatically when the theme changes.
+ *
+ * @param {HTMLElement} el An element.
+ */
+export declare function unsafeGetModeName(el: HTMLElement): "dark" | "light";

package/dist/index.cjs

@@ -168,6 +168,10 @@ const setFocusOnElement = (ref, selector) => {
   }
   void Promise.resolve(ref.componentOnReady?.()).then(() => setFocus(ref, selector));
 };
+function unsafeGetModeName(el) {
+  const closestElWithMode = closestElement(el, `.calcite-mode-dark, .calcite-mode-light, .calcite-mode-auto`);
+  return closestElWithMode?.classList.contains("calcite-mode-dark") || closestElWithMode?.classList.contains("calcite-mode-auto") && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
 const isEsriInternalEnv = () => (
   /*
    * `globalThis.` is important here. Some bundlers remove the `typeof process`
@@ -431,3 +435,4 @@ exports.setValuesInString = setValuesInString;
 exports.startLocaleObserver = startLocaleObserver;
 exports.supportedLocales = supportedLocales;
 exports.uncapitalize = uncapitalize;
+exports.unsafeGetModeName = unsafeGetModeName;

package/dist/index.js

@@ -166,6 +166,10 @@ const setFocusOnElement = (ref, selector) => {
   }
   void Promise.resolve(ref.componentOnReady?.()).then(() => setFocus(ref, selector));
 };
+function unsafeGetModeName(el) {
+  const closestElWithMode = closestElement(el, `.calcite-mode-dark, .calcite-mode-light, .calcite-mode-auto`);
+  return closestElWithMode?.classList.contains("calcite-mode-dark") || closestElWithMode?.classList.contains("calcite-mode-auto") && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
 const isEsriInternalEnv = () => (
   /*
    * `globalThis.` is important here. Some bundlers remove the `typeof process`
@@ -429,5 +433,6 @@ export {
   setValuesInString,
   startLocaleObserver,
   supportedLocales,
-  uncapitalize
+  uncapitalize,
+  unsafeGetModeName
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcgis/components-utils",
-  "version": "4.34.0-next.27",
+  "version": "4.34.0-next.29",
   "description": "Collection of common internal patterns and utilities for ArcGIS Maps SDK for JavaScript components.",
   "homepage": "https://developers.arcgis.com/javascript/latest/",
   "sideEffects": false,