@codecademy/gamut-styles 17.13.2-alpha.d5be1a.0 → 17.13.2-alpha.d74f60.0

package/dist/utilities/elementDir.d.ts

@@ -0,0 +1,32 @@
+import type { RefObject } from 'react';
+/**
+ * Resolved HTML `dir` keyword: effective writing direction after `dir`, then CSS
+ * `direction`, then document root.
+ */
+export type DirValue = 'rtl' | 'ltr';
+/**
+ * Resolves the effective `dir` for an element (`rtl` or `ltr`), including JSDOM where
+ * `getComputedStyle(el).direction` is often empty while `dir` is set on the root.
+ *
+ * @param el - DOM node whose effective direction is resolved.
+ * @returns `rtl` or `ltr`.
+ */
+export declare function elementDir(el: Element): DirValue;
+/**
+ * Ref whose `current` may be any DOM {@link Element} subclass (`HTMLElement`, `SVGElement`,
+ * `HTMLButtonElement`, etc.). For structural/minimal types (e.g. tests), intersect with
+ * `Element` so `current` is still typed as an `Element` (e.g. `Pick<HTMLAnchorElement, 'id'> & Element`).
+ *
+ * @template T - DOM element type for `current`; defaults to {@link Element}.
+ */
+export type ElementDirRef<T extends Element = Element> = RefObject<T | null>;
+/**
+ * Returns the effective `dir` for the resolved element (`rtl` or `ltr`), and updates when `dir`
+ * changes on the document subtree or after layout (so `ref.current` is current).
+ * Resolution uses {@link elementDir}.
+ *
+ * @template T - DOM element type for the optional ref; defaults to {@link Element}.
+ * @param elementRef - Optional ref; when missing or `current` is not an `Element`, uses `document.documentElement`.
+ * @returns Effective direction for the resolved element, or `ltr` when `document` is undefined (SSR).
+ */
+export declare function useElementDir<T extends Element = Element>(elementRef?: ElementDirRef<T>): DirValue;

package/dist/utilities/elementDir.js

@@ -0,0 +1,69 @@
+import { useEffect, useLayoutEffect, useReducer } from 'react';
+
+/**
+ * Resolved HTML `dir` keyword: effective writing direction after `dir`, then CSS
+ * `direction`, then document root.
+ */
+
+/**
+ * Resolves the effective `dir` for an element (`rtl` or `ltr`), including JSDOM where
+ * `getComputedStyle(el).direction` is often empty while `dir` is set on the root.
+ *
+ * @param el - DOM node whose effective direction is resolved.
+ * @returns `rtl` or `ltr`.
+ */
+export function elementDir(el) {
+  const ownDir = el.getAttribute('dir');
+  if (ownDir === 'rtl') return 'rtl';
+  if (ownDir === 'ltr') return 'ltr';
+  const {
+    direction
+  } = getComputedStyle(el);
+  if (direction === 'rtl' || direction === 'ltr') {
+    return direction;
+  }
+  return document.documentElement.getAttribute('dir') === 'rtl' ? 'rtl' : 'ltr';
+}
+
+/**
+ * Ref whose `current` may be any DOM {@link Element} subclass (`HTMLElement`, `SVGElement`,
+ * `HTMLButtonElement`, etc.). For structural/minimal types (e.g. tests), intersect with
+ * `Element` so `current` is still typed as an `Element` (e.g. `Pick<HTMLAnchorElement, 'id'> & Element`).
+ *
+ * @template T - DOM element type for `current`; defaults to {@link Element}.
+ */
+
+function resolveElement(elementRef) {
+  return elementRef?.current instanceof Element ? elementRef.current : document.documentElement;
+}
+
+/**
+ * Returns the effective `dir` for the resolved element (`rtl` or `ltr`), and updates when `dir`
+ * changes on the document subtree or after layout (so `ref.current` is current).
+ * Resolution uses {@link elementDir}.
+ *
+ * @template T - DOM element type for the optional ref; defaults to {@link Element}.
+ * @param elementRef - Optional ref; when missing or `current` is not an `Element`, uses `document.documentElement`.
+ * @returns Effective direction for the resolved element, or `ltr` when `document` is undefined (SSR).
+ */
+export function useElementDir(elementRef) {
+  const [, bump] = useReducer(n => n + 1, 0);
+  useLayoutEffect(() => {
+    bump();
+  }, [elementRef]);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      bump();
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: ['dir'],
+      attributes: true,
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, []);
+  if (typeof document === 'undefined') {
+    return 'ltr';
+  }
+  return elementDir(resolveElement(elementRef));
+}

package/dist/utilities/index.d.ts

@@ -1,3 +1,3 @@
-export * from './directionIsRtl';
+export * from './elementDir';
 export * from './themed';
 export * from './useLogicalProperties';

package/dist/utilities/index.js

@@ -1,3 +1,3 @@
-export * from './directionIsRtl';
+export * from './elementDir';
 export * from './themed';
 export * from './useLogicalProperties';

package/dist/utilities/useLogicalProperties.d.ts

@@ -1,8 +1,7 @@
 /**
- * Whether Gamut system props emit logical CSS properties (`marginInlineStart`, etc.)
- * vs physical (`marginLeft`, etc.). Matches `@codecademy/variance` when the theme
- * omits the field: `theme.useLogicalProperties ?? true`.
+ * Whether Gamut system props map to logical CSS properties (`marginInlineStart`, etc.)
+ * vs physical (`marginLeft`, etc.).
  *
  * `GamutProvider` always merges an explicit boolean (default `false`).
  */
-export declare function useLogicalProperties(): boolean;
+export declare function useLogicalProperties(): boolean | undefined;

package/dist/utilities/useLogicalProperties.js

@@ -1,13 +1,12 @@
 import { useTheme } from '@emotion/react';
 
 /**
- * Whether Gamut system props emit logical CSS properties (`marginInlineStart`, etc.)
- * vs physical (`marginLeft`, etc.). Matches `@codecademy/variance` when the theme
- * omits the field: `theme.useLogicalProperties ?? true`.
+ * Whether Gamut system props map to logical CSS properties (`marginInlineStart`, etc.)
+ * vs physical (`marginLeft`, etc.).
  *
  * `GamutProvider` always merges an explicit boolean (default `false`).
  */
 export function useLogicalProperties() {
   const theme = useTheme();
-  return theme.useLogicalProperties ?? true;
+  return theme?.useLogicalProperties;
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.13.2-alpha.d5be1a.0",
+  "version": "17.13.2-alpha.d74f60.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.26.2-alpha.d5be1a.0",
+    "@codecademy/variance": "0.26.2-alpha.d74f60.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "framer-motion": "^11.18.0",
     "get-nonce": "^1.0.0",

package/dist/utilities/directionIsRtl.d.ts

@@ -1,14 +0,0 @@
-import type { RefObject } from 'react';
-/**
- * Resolves whether layout direction is RTL for an element, including JSDOM where
- * `getComputedStyle(el).direction` is often empty while `dir` is set on the root.
- */
-export declare function directionIsRtl(el: Element): boolean;
-/**
- * Returns whether the resolved element’s direction is RTL, and updates when `dir`
- * changes on the document subtree or after layout (so `ref.current` is current).
- * Resolution uses {@link directionIsRtl}.
- *
- * @param elementRef - Optional ref; when missing or `current` is not an `Element`, uses `document.documentElement`.
- */
-export declare function useDirectionIsRtl(elementRef?: RefObject<Element | null>): boolean;

package/dist/utilities/directionIsRtl.js

@@ -1,50 +0,0 @@
-import { useEffect, useLayoutEffect, useReducer } from 'react';
-
-/**
- * Resolves whether layout direction is RTL for an element, including JSDOM where
- * `getComputedStyle(el).direction` is often empty while `dir` is set on the root.
- */
-export function directionIsRtl(el) {
-  const ownDir = el.getAttribute('dir');
-  if (ownDir === 'rtl') return true;
-  if (ownDir === 'ltr') return false;
-  const {
-    direction
-  } = getComputedStyle(el);
-  if (direction === 'rtl' || direction === 'ltr') {
-    return direction === 'rtl';
-  }
-  return document.documentElement.getAttribute('dir') === 'rtl';
-}
-function resolveElement(elementRef) {
-  return elementRef?.current instanceof Element ? elementRef.current : document.documentElement;
-}
-
-/**
- * Returns whether the resolved element’s direction is RTL, and updates when `dir`
- * changes on the document subtree or after layout (so `ref.current` is current).
- * Resolution uses {@link directionIsRtl}.
- *
- * @param elementRef - Optional ref; when missing or `current` is not an `Element`, uses `document.documentElement`.
- */
-export function useDirectionIsRtl(elementRef) {
-  const [, bump] = useReducer(n => n + 1, 0);
-  useLayoutEffect(() => {
-    bump();
-  }, [elementRef]);
-  useEffect(() => {
-    const observer = new MutationObserver(() => {
-      bump();
-    });
-    observer.observe(document.documentElement, {
-      attributeFilter: ['dir'],
-      attributes: true,
-      subtree: true
-    });
-    return () => observer.disconnect();
-  }, []);
-  if (typeof document === 'undefined') {
-    return false;
-  }
-  return directionIsRtl(resolveElement(elementRef));
-}