@react-spectrum/s2 3.0.0-nightly-5a0b4fabc-240924 → 3.0.0-nightly-a626c2596-240926

package/src/TagGroup.tsx

@@ -39,10 +39,11 @@ import {fontRelative, style} from '../style/spectrum-theme' with { type: 'macro'
 import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
 import {IconContext} from './Icon';
-import {ImageContext, Text, TextContext} from './Content';
+import {ImageContext} from './Image';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {pressScale} from './pressScale';
+import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
@@ -573,7 +574,7 @@ function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM}) {
               styles: style({order: 0})
             }],
             [ImageContext, {
-              className: style({
+              styles: style({
                 size: fontRelative(20),
                 flexShrink: 0,
                 order: 0,

package/src/index.ts

@@ -63,6 +63,7 @@ export {Skeleton, useIsSkeleton} from './Skeleton';
 export {SkeletonCollection} from './SkeletonCollection';
 export {StatusLight, StatusLightContext} from './StatusLight';
 export {Switch, SwitchContext} from './Switch';
+export {Table, TableHeader, TableBody, Row, Cell, Column} from './Table';
 export {Tabs, TabList, Tab, TabPanel, TabsContext} from './Tabs';
 export {TagGroup, Tag, TagGroupContext} from './TagGroup';
 export {TextArea, TextField, TextAreaContext, TextFieldContext} from './TextField';
@@ -121,6 +122,7 @@ export type {SkeletonProps} from './Skeleton';
 export type {SkeletonCollectionProps} from './SkeletonCollection';
 export type {StatusLightProps} from './StatusLight';
 export type {SwitchProps} from './Switch';
+export type {TableProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, ColumnProps} from './Table';
 export type {TabsProps, TabProps, TabListProps, TabPanelProps} from './Tabs';
 export type {TagGroupProps, TagProps} from './TagGroup';
 export type {TextFieldProps, TextAreaProps} from './TextField';

package/src/utils.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {useMediaQuery} from '@react-spectrum/utils';
+
+export type Scale = 'large' | 'medium';
+
+export function useIsMobileDevice(): boolean {
+  return useMediaQuery('(max-width: 640px)');
+}
+
+export function useScale(): Scale {
+  let matchesFine = useMediaQuery('not ((hover: hover) and (pointer: fine))');
+  if (matchesFine) {
+    return 'large';
+  }
+
+  return 'medium';
+}

package/style/__tests__/mergeStyles.test.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {mergeStyles} from '../runtime';
+import {style} from '../spectrum-theme';
+
+describe('mergeStyles', () => {
+  it('should merge styles', () => {
+    let a = style({backgroundColor: 'red-1000', color: 'pink-100'});
+    let b = style({fontSize: 'body-xs', backgroundColor: 'gray-50'});
+    let expected = style({backgroundColor: 'gray-50', color: 'pink-100', fontSize: 'body-xs'});
+    let merged = mergeStyles(a, b);
+    expect(merged).toBe(expected);
+  });
+
+  it('should merge with arbitrary values', () => {
+    let a = style({backgroundColor: 'red-1000', color: '[hotpink]'});
+    let b = style({fontSize: '[15px]', backgroundColor: 'gray-50'});
+    let expected = style({backgroundColor: 'gray-50', color: '[hotpink]', fontSize: '[15px]'});
+    let merged = mergeStyles(a, b);
+    expect(merged).toBe(expected);
+  });
+});

package/style/__tests__/style-macro.test.js

@@ -0,0 +1,128 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {style} from '../spectrum-theme';
+
+function testStyle(...args) {
+  let css;
+  let js = style.apply(
+    {
+      addAsset({content}) {
+        css = content;
+      }
+    },
+    args
+  );
+  return {css, js};
+}
+
+describe('style-macro', () => {
+  it('should handle nested css conditions', () => {
+    let {css, js} = testStyle({
+      marginTop: {
+        ':first-child': {
+          default: 4,
+          lg: 8
+        }
+      }
+    });
+
+    expect(css).toMatchInlineSnapshot(`
+      ".\\.:not(#a#b) { all: revert-layer }
+
+      @layer _.a, _.b, _.c, UNSAFE_overrides;
+
+      @layer _.b {
+        .A-13alit4c {
+          &:first-child {
+            margin-top: 0.25rem;
+          }
+        }
+      }
+
+      @layer _.c.e {
+        @media (min-width: 1024px) {
+          .A-13alit4ed {
+            &:first-child {
+              margin-top: 0.5rem;
+            }
+          }
+        }
+      }
+
+      "
+    `);
+    expect(js).toMatchInlineSnapshot('" . A-13alit4c A-13alit4ed"');
+  });
+
+  it('should support self references', () => {
+    let {css} = testStyle({
+      borderWidth: 2,
+      paddingX: 'edge-to-text',
+      width: '[calc(200px - self(borderStartWidth) - self(paddingStart))]'
+    });
+
+    expect(css).toMatchInlineSnapshot(`
+      ".\\.:not(#a#b) { all: revert-layer }
+
+      @layer _.a, _.b, UNSAFE_overrides;
+
+      @layer _.a {
+        .uc {
+          border-top-width: 2px;
+        }
+
+
+        .vc {
+          border-bottom-width: 2px;
+        }
+
+
+        .s-375toy {
+          border-inline-start-width: var(--s);
+        }
+
+
+        .tc {
+          border-inline-end-width: 2px;
+        }
+
+
+        .C-375tnm {
+          padding-inline-start: var(--C);
+        }
+
+
+        .DI {
+          padding-inline-end: calc(var(--k, var(--o)) * 3 / 8);
+        }
+
+
+        .l-4s570k {
+          width: calc(200px - var(--s) - var(--C));
+        }
+
+
+        .-_375toy_s-c {
+          --s: 2px;
+        }
+
+
+        .-_375tnm_C-I {
+          --C: calc(var(--k, var(--o)) * 3 / 8);
+        }
+      }
+
+      "
+    `);
+  });
+});