@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd

package/src/TopNav/TopNavHeading.tsx

@@ -63,7 +63,10 @@ const styles = stylex.create({
     cursor: 'default',
   },
   interactive: {
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     borderRadius: radiusVars['--radius-element'],
     borderWidth: 0,
     borderStyle: 'none',
@@ -72,14 +75,17 @@ const styles = stylex.create({
     fontSize: 'inherit',
     fontWeight: fontWeightVars['--font-weight-normal'],
     textAlign: 'start',
-    ':hover': {
+    ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
       '@media (hover: hover)': {
         backgroundColor: colorVars['--color-overlay-hover'],
       },
     },
   },
   menuTrigger: {
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     borderRadius: radiusVars['--radius-element'],
     borderWidth: 0,
     borderStyle: 'none',
@@ -190,7 +196,10 @@ const styles = stylex.create({
     marginBlockStart: spacingVars['--spacing-1'],
     marginBlockEnd: spacingVars['--spacing-2'],
     marginInline: spacingVars['--spacing-1'],
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
   },
   // Composes over `chevron` — the flipped popover copy differs only by the
   // rotation, so it carries just that.

package/src/TopNav/TopNavItem.tsx

@@ -53,13 +53,16 @@ const styles = stylex.create({
     fontWeight: fontWeightVars['--font-weight-medium'],
     color: colorVars['--color-text-secondary'],
     textDecoration: 'none',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     transitionProperty: 'background-color, color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
       ':active': colorVars['--color-overlay-pressed'],
@@ -70,7 +73,7 @@ const styles = stylex.create({
     fontWeight: fontWeightVars['--font-weight-semibold'],
     backgroundColor: {
       default: colorVars['--color-neutral'],
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-neutral'],
       },
       ':active': colorVars['--color-neutral'],

package/src/TopNav/TopNavMegaMenu.tsx

@@ -78,13 +78,16 @@ const styles = stylex.create({
     fontWeight: fontWeightVars['--font-weight-medium'],
     color: colorVars['--color-text-secondary'],
     textDecoration: 'none',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     transitionProperty: 'background-color, color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },

package/src/TopNav/TopNavMegaMenuItem.tsx

@@ -50,13 +50,16 @@ const styles = stylex.create({
     paddingInline: spacingVars['--spacing-3'],
     borderRadius: radiusVars['--radius-element'],
     textDecoration: 'none',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     transitionProperty: 'background-color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
       ':active': colorVars['--color-overlay-pressed'],

package/src/TopNav/TopNavMenu.tsx

@@ -65,13 +65,16 @@ const styles = stylex.create({
     fontWeight: fontWeightVars['--font-weight-medium'],
     color: colorVars['--color-text-secondary'],
     textDecoration: 'none',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     transitionProperty: 'background-color, color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
@@ -115,13 +118,16 @@ const styles = stylex.create({
     paddingInline: spacingVars['--spacing-3'],
     borderRadius: radiusVars['--radius-element'],
     textDecoration: 'none',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     transitionProperty: 'background-color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },

package/src/TreeList/TreeListItem.tsx

@@ -95,20 +95,23 @@ const styles = stylex.create({
     marginInlineStart: 'var(--_tree-indent, 0px)',
   },
   interactive: {
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     transitionProperty: 'background-image',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundImage: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
       },
       ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
     },
   },
   disabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
     opacity: 0.5,
     pointerEvents: 'none' as const,
   },
@@ -117,7 +120,10 @@ const styles = stylex.create({
   },
   invisibleButton: {
     all: 'unset',
-    cursor: 'inherit',
+    cursor: {
+      default: 'inherit',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     font: 'inherit',
     color: 'inherit',
     display: 'flex',
@@ -130,7 +136,10 @@ const styles = stylex.create({
   },
   invisibleAnchor: {
     all: 'unset',
-    cursor: 'inherit',
+    cursor: {
+      default: 'inherit',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     font: 'inherit',
     color: 'inherit',
     display: 'flex',
@@ -174,7 +183,10 @@ const styles = stylex.create({
     width: spacingVars['--spacing-4'],
     height: spacingVars['--spacing-4'],
     fontSize: spacingVars['--spacing-4'],
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     border: 'none',
     background: 'none',
     padding: 0,
@@ -191,7 +203,10 @@ const styles = stylex.create({
     width: spacingVars['--spacing-4'],
     height: spacingVars['--spacing-4'],
     fontSize: spacingVars['--spacing-4'],
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     color: colorVars['--color-icon-secondary'],
     borderRadius: radiusVars['--radius-inner'],
     marginInlineStart: spacingVars['--spacing-1'],

package/src/Typeahead/BaseTypeahead.tsx

@@ -215,7 +215,7 @@ const styles = stylex.create({
     },
   },
   inputDisabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   dropdown: {
     boxSizing: 'border-box',
@@ -233,7 +233,10 @@ const styles = stylex.create({
     width: '100%',
     padding: spacingVars['--spacing-2'],
     borderRadius: radiusVars['--radius-element'],
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     outline: 'none',
     backgroundColor: 'transparent',
     border: 'none',

package/src/Typeahead/Typeahead.tsx

@@ -167,7 +167,10 @@ const styles = stylex.create({
     // Standard padding minus border width to prevent height jump
     // when a token (28px) is added inside the input
     paddingBlock: `calc(${spacingVars['--spacing-1']} - 1px)`,
-    cursor: 'text',
+    cursor: {
+      default: 'text',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
   },
   token: {
     // Offset token so it sits 3px from the inner edge (4px from outer edge

package/src/hooks/containerReveal.stylex.ts

@@ -32,13 +32,17 @@ export const styles = stylex.create({
     '--_hover-delay': '0s',
     '--_reveal-opacity': {
       default: 0,
-      ':hover': {'@media (hover: hover)': 1},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 1,
+      },
       ':focus-within': 1,
       '@media (any-pointer: coarse)': 1,
     },
     '--_reveal-position': {
       default: 'absolute',
-      ':hover': {'@media (hover: hover)': 'static'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 'static',
+      },
       ':focus-within': 'static',
       '@media (any-pointer: coarse)': 'static',
     },
@@ -49,7 +53,9 @@ export const styles = stylex.create({
     // content would snap out of flow at full opacity and flicker.
     '--_reveal-delay': {
       default: REST_DELAY,
-      ':hover': {'@media (hover: hover)': HOVER_DELAY + ', ' + HOVER_DELAY},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': HOVER_DELAY + ', ' + HOVER_DELAY,
+      },
       ':focus-within': '0s, 0s',
       '@media (any-pointer: coarse)': '0s, 0s',
     },
@@ -57,7 +63,9 @@ export const styles = stylex.create({
     // for) but keeps the dwell: an intent gate is timing, not motion.
     '--_reveal-delay-reduced': {
       default: '0s, 0s',
-      ':hover': {'@media (hover: hover)': HOVER_DELAY + ', ' + HOVER_DELAY},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': HOVER_DELAY + ', ' + HOVER_DELAY,
+      },
       ':focus-within': '0s, 0s',
       '@media (any-pointer: coarse)': '0s, 0s',
     },
@@ -66,13 +74,17 @@ export const styles = stylex.create({
     // coarse-pointer branch (it stays visible on touch).
     '--_conceal-opacity': {
       default: 1,
-      ':hover': {'@media (hover: hover)': 0},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 0,
+      },
     },
     // Single-value dwell for the opacity-only blocks, which have no discrete
     // position to sequence.
     '--_fade-delay': {
       default: '0s',
-      ':hover': {'@media (hover: hover)': HOVER_DELAY},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': HOVER_DELAY,
+      },
       ':focus-within': '0s',
       '@media (any-pointer: coarse)': '0s',
     },
@@ -87,35 +99,47 @@ export const styles = stylex.create({
   stateInactive: {
     '--_reveal-opacity': {
       default: 0,
-      ':hover': {'@media (hover: hover)': 0},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 0,
+      },
       ':focus-within': 1,
       '@media (any-pointer: coarse)': 1,
     },
     '--_reveal-position': {
       default: 'absolute',
-      ':hover': {'@media (hover: hover)': 'absolute'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 'absolute',
+      },
       ':focus-within': 'static',
       '@media (any-pointer: coarse)': 'static',
     },
     '--_reveal-delay': {
       default: REST_DELAY,
-      ':hover': {'@media (hover: hover)': REST_DELAY},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': REST_DELAY,
+      },
       ':focus-within': '0s, 0s',
       '@media (any-pointer: coarse)': '0s, 0s',
     },
     '--_reveal-delay-reduced': {
       default: '0s, 0s',
-      ':hover': {'@media (hover: hover)': '0s, 0s'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': '0s, 0s',
+      },
       ':focus-within': '0s, 0s',
       '@media (any-pointer: coarse)': '0s, 0s',
     },
     '--_conceal-opacity': {
       default: 1,
-      ':hover': {'@media (hover: hover)': 1},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 1,
+      },
     },
     '--_fade-delay': {
       default: '0s',
-      ':hover': {'@media (hover: hover)': '0s'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': '0s',
+      },
       ':focus-within': '0s',
       '@media (any-pointer: coarse)': '0s',
     },
@@ -126,35 +150,47 @@ export const styles = stylex.create({
   stateActive: {
     '--_reveal-opacity': {
       default: 1,
-      ':hover': {'@media (hover: hover)': 1},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 1,
+      },
       ':focus-within': 1,
       '@media (any-pointer: coarse)': 1,
     },
     '--_reveal-position': {
       default: 'static',
-      ':hover': {'@media (hover: hover)': 'static'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 'static',
+      },
       ':focus-within': 'static',
       '@media (any-pointer: coarse)': 'static',
     },
     '--_reveal-delay': {
       default: '0s, 0s',
-      ':hover': {'@media (hover: hover)': '0s, 0s'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': '0s, 0s',
+      },
       ':focus-within': '0s, 0s',
       '@media (any-pointer: coarse)': '0s, 0s',
     },
     '--_reveal-delay-reduced': {
       default: '0s, 0s',
-      ':hover': {'@media (hover: hover)': '0s, 0s'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': '0s, 0s',
+      },
       ':focus-within': '0s, 0s',
       '@media (any-pointer: coarse)': '0s, 0s',
     },
     '--_conceal-opacity': {
       default: 0,
-      ':hover': {'@media (hover: hover)': 0},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': 0,
+      },
     },
     '--_fade-delay': {
       default: '0s',
-      ':hover': {'@media (hover: hover)': '0s'},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': '0s',
+      },
       ':focus-within': '0s',
       '@media (any-pointer: coarse)': '0s',
     },

package/src/hooks/scrollbarGutter.test.ts

@@ -0,0 +1,167 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file scrollbarGutter.test.ts
+ * @input Uses vitest and a stubbed viewport + element box (jsdom does no layout)
+ * @output Unit tests for holdScrollbarGutter
+ * @position Testing; validates scrollbarGutter.ts implementation
+ *
+ * SYNC: When scrollbarGutter.ts changes, update tests to match new behavior
+ */
+
+import {afterEach, describe, expect, it} from 'vitest';
+import {holdScrollbarGutter} from './scrollbarGutter';
+
+/**
+ * jsdom does no layout, so both halves of the measurement are stubbed: the
+ * viewport (`innerWidth` vs `documentElement.clientWidth`) and the element's
+ * own box, which `widths` reads from and a test flips to simulate the lock
+ * widening it.
+ */
+function stub({
+  innerWidth,
+  clientWidth,
+  widths,
+}: {
+  innerWidth: number;
+  clientWidth: number;
+  widths?: () => number;
+}) {
+  Object.defineProperty(window, 'innerWidth', {
+    value: innerWidth,
+    configurable: true,
+    writable: true,
+  });
+  Object.defineProperty(document.documentElement, 'clientWidth', {
+    value: clientWidth,
+    configurable: true,
+  });
+  if (widths) {
+    document.body.getBoundingClientRect = () => ({width: widths()}) as DOMRect;
+  }
+}
+
+const rootGutter = () => document.documentElement.style.scrollbarGutter;
+
+describe('holdScrollbarGutter', () => {
+  afterEach(() => {
+    document.body.style.cssText = '';
+    document.documentElement.style.cssText = '';
+    // @ts-expect-error -- drop the stubs so jsdom's own values come back
+    delete document.documentElement.clientWidth;
+    // @ts-expect-error -- restore the prototype's implementation
+    delete document.body.getBoundingClientRect;
+  });
+
+  it('holds the gutter open when a space-taking scrollbar is about to be hidden', () => {
+    // A 1024px window over a 1009px layout viewport = a 15px classic scrollbar.
+    stub({innerWidth: 1024, clientWidth: 1009});
+
+    const hold = holdScrollbarGutter(document.body);
+
+    expect(rootGutter()).toBe('stable');
+
+    hold.settle();
+    hold.release();
+
+    expect(rootGutter()).toBe('');
+  });
+
+  it('leaves an overlay scrollbar alone — there is no gutter to hold', () => {
+    stub({innerWidth: 1024, clientWidth: 1024});
+
+    const hold = holdScrollbarGutter(document.body);
+    hold.settle();
+
+    expect(rootGutter()).toBe('');
+    expect(document.body.style.paddingRight).toBe('');
+
+    hold.release();
+  });
+
+  it('does not pad when holding the gutter kept the element still', () => {
+    stub({innerWidth: 1024, clientWidth: 1009, widths: () => 1009});
+
+    const hold = holdScrollbarGutter(document.body);
+    hold.settle();
+
+    expect(rootGutter()).toBe('stable');
+    expect(document.body.style.paddingRight).toBe('');
+
+    hold.release();
+  });
+
+  it('falls back to padding when the element grew anyway', () => {
+    // What an engine without scrollbar-gutter support does: the gutter request
+    // is ignored, the scrollbar goes away, and the element widens by 15px.
+    let width = 1009;
+    stub({innerWidth: 1024, clientWidth: 1009, widths: () => width});
+
+    const hold = holdScrollbarGutter(document.body);
+    width = 1024;
+    hold.settle();
+
+    expect(document.body.style.paddingRight).toBe('15px');
+
+    hold.release();
+
+    expect(document.body.style.paddingRight).toBe('');
+  });
+
+  it("adds to the page's own padding instead of replacing it", () => {
+    let width = 1009;
+    stub({innerWidth: 1024, clientWidth: 1009, widths: () => width});
+    document.body.style.paddingRight = '24px';
+
+    const hold = holdScrollbarGutter(document.body);
+    width = 1024;
+    hold.settle();
+
+    expect(document.body.style.paddingRight).toBe('39px');
+
+    hold.release();
+
+    expect(document.body.style.paddingRight).toBe('24px');
+  });
+
+  it('restores the page\u2019s own scrollbar-gutter rather than clearing it', () => {
+    stub({innerWidth: 1024, clientWidth: 1009});
+    document.documentElement.style.scrollbarGutter = 'stable both-edges';
+
+    const hold = holdScrollbarGutter(document.body);
+
+    expect(rootGutter()).toBe('stable');
+
+    hold.settle();
+    hold.release();
+
+    expect(rootGutter()).toBe('stable both-edges');
+  });
+
+  it('settles once, however many times it is called', () => {
+    let width = 1009;
+    stub({innerWidth: 1024, clientWidth: 1009, widths: () => width});
+
+    const hold = holdScrollbarGutter(document.body);
+    width = 1024;
+    hold.settle();
+    hold.settle();
+    hold.settle();
+
+    expect(document.body.style.paddingRight).toBe('15px');
+
+    hold.release();
+  });
+
+  it('does nothing where there is no layout to measure', () => {
+    stub({innerWidth: 1024, clientWidth: 0});
+
+    const hold = holdScrollbarGutter(document.body);
+    hold.settle();
+
+    expect(rootGutter()).toBe('');
+    expect(document.body.style.paddingRight).toBe('');
+
+    hold.release();
+  });
+});