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

package/dist/utilities/elementDir.d.ts

@@ -0,0 +1,22 @@
+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.
+ */
+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`).
+ */
+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}.
+ *
+ * @param elementRef - Optional ref; when missing or `current` is not an `Element`, uses `document.documentElement`.
+ */
+export declare function useElementDir<T extends Element = Element>(elementRef?: ElementDirRef<T>): DirValue;

package/dist/utilities/{directionIsRtl.js → elementDir.js}

@@ -1,33 +1,42 @@
 import { useEffect, useLayoutEffect, useReducer } from 'react';
 
+/** Resolved HTML `dir` keyword: effective writing direction after `dir`, then CSS `direction`, then document root. */
+
 /**
- * Resolves whether layout direction is RTL for an element, including JSDOM where
+ * 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.
  */
-export function directionIsRtl(el) {
+export function elementDir(el) {
   const ownDir = el.getAttribute('dir');
-  if (ownDir === 'rtl') return true;
-  if (ownDir === 'ltr') return false;
+  if (ownDir === 'rtl') return 'rtl';
+  if (ownDir === 'ltr') return 'ltr';
   const {
     direction
   } = getComputedStyle(el);
   if (direction === 'rtl' || direction === 'ltr') {
-    return direction === 'rtl';
+    return direction;
   }
-  return document.documentElement.getAttribute('dir') === 'rtl';
+  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`).
+ */
+
 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`
+ * 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 directionIsRtl}.
+ * Resolution uses {@link elementDir}.
  *
  * @param elementRef - Optional ref; when missing or `current` is not an `Element`, uses `document.documentElement`.
  */
-export function useDirectionIsRtl(elementRef) {
+export function useElementDir(elementRef) {
   const [, bump] = useReducer(n => n + 1, 0);
   useLayoutEffect(() => {
     bump();
@@ -44,7 +53,7 @@ export function useDirectionIsRtl(elementRef) {
     return () => observer.disconnect();
   }, []);
   if (typeof document === 'undefined') {
-    return false;
+    return 'ltr';
   }
-  return directionIsRtl(resolveElement(elementRef));
+  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`.
+ * 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

@@ -2,12 +2,11 @@ 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`.
+ * 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.d7c4c0.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.26.2-alpha.d5be1a.0",
+    "@codecademy/variance": "0.26.2-alpha.d7c4c0.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;