@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/utils/composeEventHandlers.ts

@@ -1,44 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file composeEventHandlers.ts
- * @input Multiple React event handlers (or undefined)
- * @output A single handler that calls each in order, stopping if one prevents default
- * @position Utility; used by components that own an interaction (a click that
- *   selects, a keydown that drives arrow navigation) but also accept a consumer
- *   handler for the same event through {...rest}. Composes them instead of
- *   letting one clobber the other.
- *
- * Order is call order: the first argument runs first. Put the consumer handler
- * first so it can opt out of the component's built-in behavior via
- * `event.preventDefault()`; put the component's handler first when its behavior
- * must always run regardless of the consumer.
- */
-
-import type {SyntheticEvent} from 'react';
-
-/**
- * Compose event handlers into one. Each handler runs in argument order; if any
- * calls `event.preventDefault()`, the remaining handlers are skipped.
- *
- * @example
- * ```tsx
- * // Consumer first: a consumer onClick can preventDefault to block selection.
- * <button onClick={composeEventHandlers(onClickProp, handleSelect)} />
- *
- * // Component first: built-in keyboard nav always runs.
- * <div onKeyDown={composeEventHandlers(handleArrowKeys, onKeyDownProp)} />
- * ```
- */
-export function composeEventHandlers<E extends SyntheticEvent>(
-  ...handlers: (((event: E) => void) | undefined)[]
-): (event: E) => void {
-  return (event: E) => {
-    for (const handler of handlers) {
-      handler?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-    }
-  };
-}

package/src/utils/mergeProps.test.ts

@@ -1,166 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, expect, it} from 'vitest';
-import {mergeProps} from './mergeProps';
-
-describe('mergeProps', () => {
-  describe('string-first form (xdsClass, stylexResult, className?, style?)', () => {
-    it('returns the xds class alone when the stylex result has no class', () => {
-      expect(mergeProps('astryx-button', {className: ''})).toEqual({
-        className: 'astryx-button',
-        style: undefined,
-      });
-    });
-
-    it('prefixes the xds class before the stylex class name', () => {
-      expect(mergeProps('astryx-button', {className: 'x1 x2'})).toEqual({
-        className: 'astryx-button x1 x2',
-        style: undefined,
-      });
-    });
-
-    it('appends a consumer className after the stylex classes', () => {
-      expect(
-        mergeProps('astryx-button', {className: 'x1'}, 'consumer'),
-      ).toEqual({
-        className: 'astryx-button x1 consumer',
-        style: undefined,
-      });
-    });
-
-    it('omits the consumer className when it is falsy', () => {
-      expect(mergeProps('astryx-button', {className: 'x1'}, undefined)).toEqual(
-        {
-          className: 'astryx-button x1',
-          style: undefined,
-        },
-      );
-      expect(mergeProps('astryx-button', {className: 'x1'}, '')).toEqual({
-        className: 'astryx-button x1',
-        style: undefined,
-      });
-    });
-
-    it('defaults the stylex result to an empty class when omitted', () => {
-      expect(mergeProps('astryx-button')).toEqual({
-        className: 'astryx-button',
-        style: undefined,
-      });
-    });
-
-    it('lets the consumer style override the stylex style key-by-key', () => {
-      const result = mergeProps(
-        'astryx-button',
-        {className: 'x1', style: {color: 'red', margin: 0}},
-        undefined,
-        {color: 'blue'},
-      );
-      expect(result.style).toEqual({color: 'blue', margin: 0});
-    });
-
-    it('uses only the stylex style when no consumer style is given', () => {
-      const result = mergeProps('astryx-button', {
-        className: 'x1',
-        style: {color: 'red'},
-      });
-      expect(result.style).toEqual({color: 'red'});
-    });
-
-    it('uses only the consumer style when the stylex result has none', () => {
-      const result = mergeProps('astryx-button', {className: 'x1'}, undefined, {
-        color: 'blue',
-      });
-      expect(result.style).toEqual({color: 'blue'});
-    });
-
-    it('preserves extra keys from the stylex result via spread', () => {
-      const result = mergeProps('astryx-button', {
-        className: 'x1',
-        'data-style-src': 'stylex',
-      });
-      expect(result['data-style-src']).toBe('stylex');
-    });
-  });
-
-  describe('object-first form (arbitrary prop merge)', () => {
-    it('space-joins class names from both objects', () => {
-      expect(mergeProps({className: 'a'}, {className: 'b'})).toEqual({
-        className: 'a b',
-      });
-    });
-
-    it('keeps the single class name when only one side has one', () => {
-      expect(mergeProps({className: 'a'}, {})).toEqual({className: 'a'});
-      expect(mergeProps({}, {className: 'b'})).toEqual({className: 'b'});
-    });
-
-    it('drops className entirely when neither side has one', () => {
-      const result = mergeProps({id: 'x'}, {role: 'button'});
-      expect('className' in result).toBe(false);
-      expect(result).toEqual({id: 'x', role: 'button'});
-    });
-
-    it('lets override props win over base props', () => {
-      expect(mergeProps({role: 'button', id: 'a'}, {id: 'b'})).toEqual({
-        role: 'button',
-        id: 'b',
-      });
-    });
-
-    it('merges styles with the override winning per key', () => {
-      const result = mergeProps(
-        {style: {color: 'red', margin: 0}},
-        {style: {color: 'green'}},
-      );
-      expect(result.style).toEqual({color: 'green', margin: 0});
-    });
-
-    it('drops style entirely when neither side has one', () => {
-      const result = mergeProps({id: 'x'}, {id: 'y'});
-      expect('style' in result).toBe(false);
-    });
-
-    it('treats a string third argument as an appended className', () => {
-      expect(mergeProps({className: 'a'}, {className: 'b'}, 'c')).toEqual({
-        className: 'a b c',
-      });
-    });
-
-    it('treats an object third argument as a style', () => {
-      const result = mergeProps({className: 'a'}, {}, {color: 'red'});
-      expect(result).toEqual({className: 'a', style: {color: 'red'}});
-    });
-
-    it('applies the fourth argument as an overriding style', () => {
-      const result = mergeProps({style: {color: 'red'}}, {}, undefined, {
-        color: 'blue',
-      });
-      expect(result.style).toEqual({color: 'blue'});
-    });
-
-    it('accepts a string second argument as a className', () => {
-      expect(mergeProps({className: 'a'}, 'b')).toEqual({className: 'a b'});
-    });
-
-    it('merges arbitrary data attributes, override winning', () => {
-      const result = mergeProps(
-        {'data-variant': 'primary', 'data-size': 'md'},
-        {'data-size': 'lg'},
-      );
-      expect(result).toEqual({'data-variant': 'primary', 'data-size': 'lg'});
-    });
-
-    it('does not mutate the input objects', () => {
-      const base = {className: 'a', style: {color: 'red'}};
-      const overrides = {className: 'b', style: {color: 'blue'}};
-      mergeProps(base, overrides);
-      expect(base).toEqual({className: 'a', style: {color: 'red'}});
-      expect(overrides).toEqual({className: 'b', style: {color: 'blue'}});
-    });
-
-    it('ignores a null third argument (no style, no class added)', () => {
-      const result = mergeProps({className: 'a'}, {className: 'b'}, undefined);
-      expect(result).toEqual({className: 'a b'});
-    });
-  });
-});