@autoguru/overdrive 4.45.2 → 4.46.0

package/dist/hooks/useMedia/useMedia.spec.js

@@ -0,0 +1,288 @@
+"use strict";
+
+import { renderHook, act } from '@testing-library/react';
+import React from 'react';
+import { OverdriveProvider } from "../../components/OverdriveProvider/index.js";
+import baseTheme from "../../themes/base/index.js";
+import { useMedia } from "./useMedia.js"; // Mock the utils module to control isBrowser
+vi.mock('../../utils', () => ({
+  isBrowser: true
+}));
+
+// Mock window.matchMedia since it's not available in test environment
+const mockMatchMedia = vi.fn();
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: mockMatchMedia
+});
+
+// Helper to create a mock MediaQueryList
+const createMockMediaQueryList = (matches = false) => ({
+  matches,
+  media: '',
+  onchange: null,
+  addListener: vi.fn(),
+  // deprecated but still used by some
+  removeListener: vi.fn(),
+  // deprecated but still used by some
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  dispatchEvent: vi.fn()
+});
+
+// Wrapper component with OverdriveProvider
+const createWrapper = () => {
+  // eslint-disable-next-line react/display-name
+  return ({
+    children
+  }) => /*#__PURE__*/React.createElement(OverdriveProvider, {
+    theme: baseTheme
+  }, children);
+};
+describe('useMedia hook', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Default mock implementation
+    mockMatchMedia.mockImplementation(() => createMockMediaQueryList(false));
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // Note: SSR testing is complex due to static imports, focusing on browser behavior
+
+  describe('Browser environment', () => {
+    it('creates media queries with correct breakpoint values', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      mockMatchMedia.mockReturnValue(mockMQL);
+      renderHook(() => useMedia(['mobile', 'tablet']), {
+        wrapper: createWrapper()
+      });
+
+      // Should be called twice for each query, once for initial and once for effect
+      expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 0px)'); // mobile
+      expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 768px)'); // tablet
+    });
+    it('returns initial matches state', () => {
+      const mockMobileMatch = createMockMediaQueryList(true);
+      const mockTabletMatch = createMockMediaQueryList(false);
+      mockMatchMedia.mockReturnValueOnce(mockMobileMatch) // initial mobile
+      .mockReturnValueOnce(mockTabletMatch) // initial tablet
+      .mockReturnValueOnce(mockMobileMatch) // effect mobile
+      .mockReturnValueOnce(mockTabletMatch); // effect tablet
+
+      const {
+        result
+      } = renderHook(() => useMedia(['mobile', 'tablet']), {
+        wrapper: createWrapper()
+      });
+      expect(result.current).toEqual([true, false]);
+    });
+    it('sets up event listeners for media query changes', () => {
+      const mockMQL1 = createMockMediaQueryList(false);
+      const mockMQL2 = createMockMediaQueryList(false);
+      mockMatchMedia.mockReturnValueOnce(mockMQL1).mockReturnValueOnce(mockMQL2).mockReturnValueOnce(mockMQL1).mockReturnValueOnce(mockMQL2);
+      renderHook(() => useMedia(['mobile', 'tablet']), {
+        wrapper: createWrapper()
+      });
+      expect(mockMQL1.addEventListener).toHaveBeenCalledWith('change', expect.any(Function), {
+        passive: true
+      });
+      expect(mockMQL2.addEventListener).toHaveBeenCalledWith('change', expect.any(Function), {
+        passive: true
+      });
+    });
+    it('updates state when media query changes', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      let changeHandler;
+      mockMQL.addEventListener.mockImplementation((event, handler) => {
+        if (event === 'change') {
+          changeHandler = handler;
+        }
+      });
+      mockMatchMedia.mockReturnValue(mockMQL);
+      const {
+        result
+      } = renderHook(() => useMedia(['mobile']), {
+        wrapper: createWrapper()
+      });
+      expect(result.current).toEqual([false]);
+
+      // Simulate media query change
+      act(() => {
+        changeHandler({
+          matches: true
+        });
+      });
+      expect(result.current).toEqual([true]);
+    });
+    it('handles multiple media query changes independently', () => {
+      const mockMQL1 = createMockMediaQueryList(false);
+      const mockMQL2 = createMockMediaQueryList(false);
+      let changeHandler1;
+      let changeHandler2;
+      mockMQL1.addEventListener.mockImplementation((event, handler) => {
+        if (event === 'change') changeHandler1 = handler;
+      });
+      mockMQL2.addEventListener.mockImplementation((event, handler) => {
+        if (event === 'change') changeHandler2 = handler;
+      });
+      mockMatchMedia.mockReturnValueOnce(mockMQL1).mockReturnValueOnce(mockMQL2).mockReturnValueOnce(mockMQL1).mockReturnValueOnce(mockMQL2);
+      const {
+        result
+      } = renderHook(() => useMedia(['mobile', 'tablet']), {
+        wrapper: createWrapper()
+      });
+      expect(result.current).toEqual([false, false]);
+
+      // Change first media query
+      act(() => {
+        changeHandler1({
+          matches: true
+        });
+      });
+      expect(result.current).toEqual([true, false]);
+
+      // Change second media query
+      act(() => {
+        changeHandler2({
+          matches: true
+        });
+      });
+      expect(result.current).toEqual([true, true]);
+    });
+    it('removes event listeners on unmount', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      mockMatchMedia.mockReturnValue(mockMQL);
+      const {
+        unmount
+      } = renderHook(() => useMedia(['mobile']), {
+        wrapper: createWrapper()
+      });
+      expect(mockMQL.removeEventListener).not.toHaveBeenCalled();
+      unmount();
+      expect(mockMQL.removeEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+    });
+    it('prevents state updates after unmount', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      let changeHandler;
+      mockMQL.addEventListener.mockImplementation((event, handler) => {
+        if (event === 'change') changeHandler = handler;
+      });
+      mockMatchMedia.mockReturnValue(mockMQL);
+      const {
+        result,
+        unmount
+      } = renderHook(() => useMedia(['mobile']), {
+        wrapper: createWrapper()
+      });
+      const initialResult = result.current;
+      unmount();
+
+      // Simulate change after unmount - should not update state
+      act(() => {
+        changeHandler({
+          matches: true
+        });
+      });
+
+      // State should remain unchanged after unmount
+      expect(result.current).toBe(initialResult);
+    });
+    it('updates listeners when queries change', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      mockMatchMedia.mockReturnValue(mockMQL);
+      const {
+        rerender
+      } = renderHook(({
+        queries
+      }) => useMedia(queries), {
+        wrapper: createWrapper(),
+        initialProps: {
+          queries: ['mobile']
+        }
+      });
+
+      // Change queries
+      rerender({
+        queries: ['tablet', 'desktop']
+      });
+
+      // Should have been called more times now with the new queries
+      expect(mockMatchMedia.mock.calls.length).toBeGreaterThan(2);
+    });
+    it('handles all standard breakpoint keys', () => {
+      const allBreakpoints = ['mobile', 'tablet', 'desktop', 'largeDesktop'];
+      mockMatchMedia.mockReturnValue(createMockMediaQueryList(false));
+      const {
+        result
+      } = renderHook(() => useMedia(allBreakpoints), {
+        wrapper: createWrapper()
+      });
+      expect(result.current).toHaveLength(4);
+      expect(result.current).toEqual([false, false, false, false]);
+
+      // Verify correct media queries were created
+      expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 0px)'); // mobile
+      expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 768px)'); // tablet
+      expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 1024px)'); // desktop
+      expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 1920px)'); // largeDesktop
+    });
+    it('handles empty queries array in browser', () => {
+      mockMatchMedia.mockReturnValue(createMockMediaQueryList(false));
+      const {
+        result
+      } = renderHook(() => useMedia([]), {
+        wrapper: createWrapper()
+      });
+      expect(result.current).toEqual([]);
+      expect(mockMatchMedia).not.toHaveBeenCalled();
+    });
+    it('maintains referential stability when values do not change', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      mockMatchMedia.mockReturnValue(mockMQL);
+      const {
+        result,
+        rerender
+      } = renderHook(() => useMedia(['mobile']), {
+        wrapper: createWrapper()
+      });
+      const firstResult = result.current;
+      rerender();
+
+      // Should maintain the same reference when values haven't changed
+      expect(result.current).toBe(firstResult);
+    });
+  });
+  describe('Edge cases', () => {
+    it('handles rapid successive changes', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      let changeHandler;
+      mockMQL.addEventListener.mockImplementation((event, handler) => {
+        if (event === 'change') changeHandler = handler;
+      });
+      mockMatchMedia.mockReturnValue(mockMQL);
+      const {
+        result
+      } = renderHook(() => useMedia(['mobile']), {
+        wrapper: createWrapper()
+      });
+      expect(result.current).toEqual([false]);
+
+      // Rapid changes
+      act(() => {
+        changeHandler({
+          matches: true
+        });
+        changeHandler({
+          matches: false
+        });
+        changeHandler({
+          matches: true
+        });
+      });
+      expect(result.current).toEqual([true]);
+    });
+  });
+});

package/dist/styles/selectors.d.ts

@@ -0,0 +1,13 @@
+export declare const selectors: {
+    readonly active: "&:active";
+    readonly checked: "&:checked, &[data-checked], &[data-selected]";
+    readonly disabled: "&:disabled, &[data-disabled]";
+    readonly focus: "&:focus, &[data-focus], &[data-focused]";
+    readonly focusVisible: "&:focus-visible, &[data-focus-visible]";
+    readonly selected: "&[data-selected], &[aria-selected=\"true\"]";
+    readonly hover: string;
+    readonly hoverNotDisabled: string;
+    readonly hoverNotSelected: string;
+    readonly focusVisibleNotSelected: string;
+};
+//# sourceMappingURL=selectors.d.ts.map

package/dist/styles/selectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../lib/styles/selectors.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS;;;;;;;;;;;CAmBZ,CAAC"}

package/dist/styles/selectors.js

@@ -0,0 +1,26 @@
+"use strict";
+
+// === Common selector patterns for consistent interactive states
+// These patterns provide a standardized way to target element states across components and
+// include support for both pseudo-classes and data attributes used by libraries like React Aria
+
+export const selectors = {
+  active: '&:active',
+  checked: '&:checked, &[data-checked], &[data-selected]',
+  disabled: '&:disabled, &[data-disabled]',
+  focus: '&:focus, &[data-focus], &[data-focused]',
+  focusVisible: '&:focus-visible, &[data-focus-visible]',
+  selected: '&[data-selected], &[aria-selected="true"]',
+  get hover() {
+    return `&:hover:not(${this.disabled}), &[data-hover]:not(${this.disabled})`;
+  },
+  get hoverNotDisabled() {
+    return `&:hover:not(${this.disabled}), &[data-hover]:not(${this.disabled})`;
+  },
+  get hoverNotSelected() {
+    return `&:hover:not(${this.disabled}, ${this.selected}), &[data-hover]:not(${this.disabled}, ${this.selected})`;
+  },
+  get focusVisibleNotSelected() {
+    return `&:focus-visible:not(${this.disabled}, ${this.selected}), &[data-focus-visible]:not(${this.disabled}, ${this.selected})`;
+  }
+};

package/dist/utils/css.d.ts

@@ -1,25 +1,3 @@
-import type { StyleRule } from '@vanilla-extract/css';
 export declare const cssVarUnwrap: (value: string) => string;
 export declare const getThemeTokenValue: (themeClass?: string | null, token?: string | null) => string;
-export type SelectorStates = 'base' | 'active' | 'checked' | 'selected' | 'disabled' | 'focus' | 'focusVisible' | 'hover' | 'hoverNotFocus' | 'hoverNotSelected';
-export type InteractionStyleProps = Partial<Record<SelectorStates, StyleRule>>;
-export declare const notDisabled = ":not(:disabled,[data-disabled])";
-export declare const notFocused = ":not(:focus,[data-focus],[data-focused])";
-export declare const notSelected = ":not(:checked,[data-checked],[data-selected])";
-/**
- * Creates style variants for different interaction states that can be spread
- * within vanilla-extract `style` object.
- *
- * @example
- * const buttonStyle = style({
- *   backgroundColor: tokens.colours.background.primary,
- *   color: tokens.colours.text.primary,
- *   ...interactionStyle({
- *     initial: { background: 'white', color: 'black' },
- *     hover: { background: 'lightgray' },
- *     disabled: { opacity: 0.5 }
- *   })
- * });
- */
-export declare const interactionStyle: (selectors: InteractionStyleProps) => StyleRule;
 //# sourceMappingURL=css.d.ts.map

package/dist/utils/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../lib/utils/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAItD,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,WAIzC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC9B,aAAa,MAAM,GAAG,IAAI,EAC1B,QAAQ,MAAM,GAAG,IAAI,KACnB,MAQF,CAAC;AAEF,MAAM,MAAM,cAAc,GACvB,MAAM,GACN,QAAQ,GACR,SAAS,GACT,UAAU,GACV,UAAU,GACV,OAAO,GACP,cAAc,GACd,OAAO,GACP,eAAe,GACf,kBAAkB,CAAC;AACtB,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC;AAG/E,eAAO,MAAM,WAAW,oCAAoC,CAAC;AAC7D,eAAO,MAAM,UAAU,6CAA6C,CAAC;AACrE,eAAO,MAAM,WAAW,kDAAkD,CAAC;AAE3E;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,GAC5B,WAAW,qBAAqB,KAC9B,SAwBF,CAAC"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../lib/utils/css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,WAIzC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC9B,aAAa,MAAM,GAAG,IAAI,EAC1B,QAAQ,MAAM,GAAG,IAAI,KACnB,MAQF,CAAC"}

package/dist/utils/css.js

@@ -1,10 +1,5 @@
 "use strict";
 
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["base"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const cssVarRegExp = /var\(([^)]+)\)/;
 export const cssVarUnwrap = value => {
   const matches = cssVarRegExp.exec(value);
@@ -17,51 +12,4 @@ export const getThemeTokenValue = (themeClass, token) => {
   const themedElement = document.querySelector(`.${themeClass}`);
   if (!themedElement || !cssVar) return '';
   return ((_getComputedStyle$get = getComputedStyle(themedElement).getPropertyValue(cssVar)) === null || _getComputedStyle$get === void 0 ? void 0 : _getComputedStyle$get.trim()) || '';
-};
-export const notDisabled = ':not(:disabled,[data-disabled])';
-export const notFocused = ':not(:focus,[data-focus],[data-focused])';
-export const notSelected = ':not(:checked,[data-checked],[data-selected])';
-
-/**
- * Creates style variants for different interaction states that can be spread
- * within vanilla-extract `style` object.
- *
- * @example
- * const buttonStyle = style({
- *   backgroundColor: tokens.colours.background.primary,
- *   color: tokens.colours.text.primary,
- *   ...interactionStyle({
- *     initial: { background: 'white', color: 'black' },
- *     hover: { background: 'lightgray' },
- *     disabled: { opacity: 0.5 }
- *   })
- * });
- */
-export const interactionStyle = selectors => {
-  const {
-      base = {}
-    } = selectors,
-    interactionStyles = _objectWithoutProperties(selectors, _excluded);
-  const styles = _objectSpread(_objectSpread({}, base), {}, {
-    selectors: {}
-  });
-  const rules = {
-    hover: `&:hover${notDisabled}, &[data-hover]${notDisabled}`,
-    hoverNotFocus: `&:hover${notFocused}${notDisabled}, &[data-hover]${notFocused}${notDisabled}`,
-    hoverNotSelected: `&:hover${notSelected}${notDisabled}, &[data-hover]${notSelected}${notDisabled}`,
-    active: '&:active',
-    selected: '&:checked, &[data-checked], &[data-selected]',
-    focus: '&:focus, &[data-focus], &[data-focused]',
-    focusVisible: '&:focus-visible, &[data-focus-visible]',
-    disabled: '&:disabled, &[data-disabled]'
-  };
-
-  // Add selectors for each interaction state that has styles
-  Object.entries(interactionStyles).forEach(([state, stateStyles]) => {
-    if (state in rules && stateStyles) {
-      if (state === 'checked') state = 'selected';
-      styles.selectors[rules[state]] = stateStyles;
-    }
-  });
-  return styles;
 };

package/dist/utils/css.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=css.spec.d.ts.map

package/dist/utils/css.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.spec.d.ts","sourceRoot":"","sources":["../../lib/utils/css.spec.ts"],"names":[],"mappings":""}

package/dist/utils/css.spec.js

@@ -0,0 +1,66 @@
+"use strict";
+
+import { cssVarUnwrap, getThemeTokenValue } from "./css.js";
+describe('css utilities', () => {
+  describe('cssVarUnwrap', () => {
+    it('extracts CSS variable name from var() function', () => {
+      expect(cssVarUnwrap('var(--color-primary)')).toBe('--color-primary');
+      expect(cssVarUnwrap('var(--spacing-2)')).toBe('--spacing-2');
+      expect(cssVarUnwrap('var(--border-radius, 4px)')).toBe('--border-radius, 4px');
+    });
+    it('returns original value if not a CSS variable', () => {
+      expect(cssVarUnwrap('#ff0000')).toBe('#ff0000');
+      expect(cssVarUnwrap('16px')).toBe('16px');
+      expect(cssVarUnwrap('solid')).toBe('solid');
+    });
+    it('handles edge cases', () => {
+      expect(cssVarUnwrap('')).toBe('');
+      expect(cssVarUnwrap('var()')).toBe('var()');
+      expect(cssVarUnwrap('var')).toBe('var');
+    });
+  });
+  describe('getThemeTokenValue', () => {
+    beforeEach(() => {
+      // Clean up any existing test elements
+      document.querySelectorAll('.test-theme').forEach(el => el.remove());
+    });
+    afterEach(() => {
+      // Clean up test elements
+      document.querySelectorAll('.test-theme').forEach(el => el.remove());
+    });
+    it('returns empty string when themeClass is null/undefined', () => {
+      expect(getThemeTokenValue(null, '--color-primary')).toBe('');
+      expect(getThemeTokenValue(undefined, '--color-primary')).toBe('');
+    });
+    it('returns empty string when token is null/undefined', () => {
+      expect(getThemeTokenValue('theme-class', null)).toBe('');
+      expect(getThemeTokenValue('theme-class')).toBe('');
+    });
+    it('returns empty string when element is not found', () => {
+      expect(getThemeTokenValue('non-existent-theme', '--color-primary')).toBe('');
+    });
+    it('returns CSS custom property value from themed element', () => {
+      // Create a test element with CSS custom properties
+      const testElement = document.createElement('div');
+      testElement.className = 'test-theme';
+      testElement.style.setProperty('--color-primary', '#ff0000');
+      testElement.style.setProperty('--spacing-large', '24px');
+      document.body.append(testElement);
+      expect(getThemeTokenValue('test-theme', 'var(--color-primary)')).toBe('#ff0000');
+      expect(getThemeTokenValue('test-theme', '--spacing-large')).toBe('24px');
+    });
+    it('trims whitespace from computed values', () => {
+      const testElement = document.createElement('div');
+      testElement.className = 'test-theme';
+      testElement.style.setProperty('--color-with-spaces', '  #ff0000  ');
+      document.body.append(testElement);
+      expect(getThemeTokenValue('test-theme', '--color-with-spaces')).toBe('#ff0000');
+    });
+    it('returns empty string for non-existent CSS variables', () => {
+      const testElement = document.createElement('div');
+      testElement.className = 'test-theme';
+      document.body.append(testElement);
+      expect(getThemeTokenValue('test-theme', '--non-existent-var')).toBe('');
+    });
+  });
+});

package/dist/utils/object.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=object.spec.d.ts.map

package/dist/utils/object.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"object.spec.d.ts","sourceRoot":"","sources":["../../lib/utils/object.spec.ts"],"names":[],"mappings":""}

package/dist/utils/object.spec.js

@@ -0,0 +1,135 @@
+"use strict";
+
+import { arrayFromKeys } from "./object.js";
+describe('object utilities', () => {
+  describe('arrayFromKeys', () => {
+    it('returns array of object keys with proper typing', () => {
+      const testObj = {
+        name: 'John',
+        age: 30,
+        active: true
+      };
+      const keys = arrayFromKeys(testObj);
+      expect(keys).toEqual(['name', 'age', 'active']);
+      expect(keys).toHaveLength(3);
+    });
+    it('works with empty objects', () => {
+      const emptyObj = {};
+      const keys = arrayFromKeys(emptyObj);
+      expect(keys).toEqual([]);
+      expect(keys).toHaveLength(0);
+    });
+    it('preserves key order', () => {
+      const orderedObj = {
+        first: 1,
+        second: 2,
+        third: 3,
+        fourth: 4
+      };
+      const keys = arrayFromKeys(orderedObj);
+      expect(keys).toEqual(['first', 'second', 'third', 'fourth']);
+    });
+    it('works with objects containing different value types', () => {
+      const mixedObj = {
+        string: 'text',
+        number: 42,
+        boolean: false,
+        array: [1, 2, 3],
+        object: {
+          nested: true
+        },
+        nullValue: null,
+        undefinedValue: undefined,
+        functionValue: () => {}
+      };
+      const keys = arrayFromKeys(mixedObj);
+      expect(keys).toEqual(['string', 'number', 'boolean', 'array', 'object', 'nullValue', 'undefinedValue', 'functionValue']);
+      expect(keys).toHaveLength(8);
+    });
+    it('works with objects having symbol keys (should be excluded)', () => {
+      const symbolKey = Symbol('test');
+      const objWithSymbol = {
+        normalKey: 'value',
+        [symbolKey]: 'symbol value'
+      };
+      const keys = arrayFromKeys(objWithSymbol);
+
+      // Object.keys() only returns enumerable string keys, not symbols
+      expect(keys).toEqual(['normalKey']);
+      expect(keys).toHaveLength(1);
+    });
+    it('works with objects having numeric string keys', () => {
+      const numericKeysObj = {
+        '0': 'zero',
+        '1': 'one',
+        '10': 'ten',
+        '2': 'two'
+      };
+      const keys = arrayFromKeys(numericKeysObj);
+
+      // Object.keys() returns numeric keys in ascending order, then other keys
+      expect(keys).toEqual(['0', '1', '2', '10']);
+      expect(keys).toHaveLength(4);
+    });
+    it('works with objects created with null prototype', () => {
+      const nullProtoObj = Object.create(null);
+      nullProtoObj.key1 = 'value1';
+      nullProtoObj.key2 = 'value2';
+      const keys = arrayFromKeys(nullProtoObj);
+      expect(keys).toEqual(['key1', 'key2']);
+      expect(keys).toHaveLength(2);
+    });
+    it('ignores inherited properties', () => {
+      // Create a prototype object
+      const proto = {
+        inheritedProp: 'inherited'
+      };
+
+      // Create object that inherits from proto
+      const obj = Object.create(proto);
+      obj.ownProp1 = 'own1';
+      obj.ownProp2 = 'own2';
+      const keys = arrayFromKeys(obj);
+
+      // Should only include own properties, not inherited ones
+      expect(keys).toEqual(['ownProp1', 'ownProp2']);
+      expect(keys).toHaveLength(2);
+    });
+    it('works with array-like objects', () => {
+      const arrayLikeObj = {
+        '0': 'a',
+        '1': 'b',
+        '2': 'c',
+        length: 3
+      };
+      const keys = arrayFromKeys(arrayLikeObj);
+
+      // Array-like objects have numeric string keys + length
+      expect(keys).toEqual(['0', '1', '2', 'length']);
+      expect(keys).toHaveLength(4);
+    });
+    it('maintains type safety with specific object types', () => {
+      const typedObj = {
+        prop1: 'test',
+        prop2: 123
+      };
+      const keys = arrayFromKeys(typedObj);
+
+      // TypeScript should infer the correct key type
+      expect(keys).toEqual(['prop1', 'prop2']);
+
+      // This ensures the return type is properly typed
+      const firstKey = keys[0]; // Should be string
+      expect(['prop1', 'prop2']).toContain(firstKey);
+    });
+    it('works with readonly objects', () => {
+      const readonlyObj = {
+        readonly1: 'value1',
+        readonly2: 'value2'
+      };
+      const keys = arrayFromKeys(readonlyObj);
+      expect(keys).toEqual(['readonly1', 'readonly2']);
+      expect(keys).toHaveLength(2);
+    });
+  });
+});

package/dist/utils/responsiveStyle.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=responsiveStyle.spec.d.ts.map

package/dist/utils/responsiveStyle.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsiveStyle.spec.d.ts","sourceRoot":"","sources":["../../lib/utils/responsiveStyle.spec.ts"],"names":[],"mappings":""}