@react-spectrum/s2 3.0.0-nightly-5ae234603-240925 → 3.0.0-nightly-d57bd8d90-240927

package/src/Tabs.tsx

@@ -27,9 +27,9 @@ import {
 import {centerBaseline} from './CenterBaseline';
 import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation} from '@react-types/shared';
 import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';
-import {focusRing, getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {focusRing, style} from '../style' with {type: 'macro'};
+import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLayoutEffect} from '@react-aria/utils';
@@ -43,7 +43,7 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
   children?: ReactNode,
   /**
    * The amount of space between the tabs.
-   * @default "regular"
+   * @default 'regular'
    */
   density?: 'compact' | 'regular'
 }

package/src/TagGroup.tsx

@@ -32,17 +32,18 @@ import {ClearButton} from './ClearButton';
 import {Collection, CollectionBuilder} from '@react-aria/collections';
 import {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';
-import {field, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldLabel} from './Field';
 import {flushSync} from 'react-dom';
-import {fontRelative, style} from '../style/spectrum-theme' with { type: 'macro' };
+import {focusRing, fontRelative, style} from '../style' 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/TextField.tsx

@@ -27,7 +27,7 @@ import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FormContext, useFormProps} from './Form';
 import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {mergeRefs} from '@react-aria/utils';
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 import {TextFieldRef} from '@react-types/textfield';
 import {useSpectrumContextProps} from './useSpectrumContextProps';

package/src/ToggleButton.tsx

@@ -15,7 +15,7 @@ import {centerBaseline} from './CenterBaseline';
 import {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {fontRelative, style} from '../style' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
 import {SkeletonContext} from './Skeleton';
@@ -48,7 +48,8 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
         staticColor: props.staticColor,
         size: props.size,
         isQuiet: props.isQuiet,
-        isEmphasized: props.isEmphasized
+        isEmphasized: props.isEmphasized,
+        isPending: false
       }, props.styles)}>
       <Provider
         values={[

package/src/Tooltip.tsx

@@ -25,7 +25,7 @@ import {ColorSchemeContext} from './Provider';
 import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react';
 import {DOMRef} from '@react-types/shared';
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 
 export interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay'>, Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'> {

package/src/index.ts

@@ -63,12 +63,15 @@ 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';
 export {ToggleButton, ToggleButtonContext} from './ToggleButton';
 export {Tooltip, TooltipTrigger} from './Tooltip';
 
+export {pressScale} from './pressScale';
+
 export {Collection} from 'react-aria-components';
 export {FileTrigger} from 'react-aria-components';
 
@@ -121,6 +124,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/style-utils.ts

@@ -13,16 +13,6 @@
 import {CSSProperties} from 'react';
 import {StyleString} from '../style/types';
 
-export const focusRing = () => ({
-  outlineStyle: {
-    default: 'none',
-    isFocusVisible: 'solid'
-  },
-  outlineColor: 'focus-ring',
-  outlineWidth: 2,
-  outlineOffset: 2
-} as const);
-
 export function centerPadding(minHeight: string = 'self(minHeight)'): `[${string}]` {
   return `[calc((${minHeight} - self(borderTopWidth, 0px) - self(borderBottomWidth, 0px) - 1lh) / 2)]`;
 }

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);
+        }
+      }
+
+      "
+    `);
+  });
+});

package/style/dist/main.cjs

@@ -0,0 +1,38 @@
+var $7dddb03c6ef7d79c$exports = require("./spectrum-theme.cjs");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "focusRing", () => $68f77cfae04dca88$export$8e24544ddba725ee);
+$parcel$export(module.exports, "baseColor", () => $7dddb03c6ef7d79c$exports.baseColor);
+$parcel$export(module.exports, "edgeToText", () => $7dddb03c6ef7d79c$exports.edgeToText);
+$parcel$export(module.exports, "fontRelative", () => $7dddb03c6ef7d79c$exports.fontRelative);
+$parcel$export(module.exports, "lightDark", () => $7dddb03c6ef7d79c$exports.lightDark);
+$parcel$export(module.exports, "size", () => $7dddb03c6ef7d79c$exports.size);
+$parcel$export(module.exports, "space", () => $7dddb03c6ef7d79c$exports.space);
+$parcel$export(module.exports, "style", () => $7dddb03c6ef7d79c$exports.style);
+/*
+ * 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.
+ */ 
+const $68f77cfae04dca88$export$8e24544ddba725ee = ()=>({
+        outlineStyle: {
+            default: 'none',
+            isFocusVisible: 'solid'
+        },
+        outlineColor: 'focus-ring',
+        outlineWidth: 2,
+        outlineOffset: 2
+    });
+
+
+//# sourceMappingURL=main.cjs.map

package/style/dist/main.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;AAKM,MAAM,4CAAY,IAAO,CAAA;QAC9B,cAAc;YACZ,SAAS;YACT,gBAAgB;QAClB;QACA,cAAc;QACd,cAAc;QACd,eAAe;IACjB,CAAA","sources":["packages/@react-spectrum/s2/style/index.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {baseColor, edgeToText, fontRelative, lightDark, size, space, style} from './spectrum-theme';\nexport type {StyleString} from './types';\n\nexport const focusRing = () => ({\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineColor: 'focus-ring',\n  outlineWidth: 2,\n  outlineOffset: 2\n} as const);\n"],"names":[],"version":3,"file":"main.cjs.map","sourceRoot":"../../../../../"}

package/style/dist/module.mjs

@@ -0,0 +1,26 @@
+import {baseColor as $468034641bb536ce$export$49bbad2a916ab57c, edgeToText as $468034641bb536ce$export$17b63977b35bb6d2, fontRelative as $468034641bb536ce$export$ba024f4caf693d15, lightDark as $468034641bb536ce$export$d19e682d444755ed, size as $468034641bb536ce$export$346677f925de839c, space as $468034641bb536ce$export$a941ed4b947d12f8, style as $468034641bb536ce$export$1d567c320f4763bc} from "./spectrum-theme.mjs";
+
+/*
+ * 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.
+ */ 
+const $b308eef0abc42945$export$8e24544ddba725ee = ()=>({
+        outlineStyle: {
+            default: 'none',
+            isFocusVisible: 'solid'
+        },
+        outlineColor: 'focus-ring',
+        outlineWidth: 2,
+        outlineOffset: 2
+    });
+
+
+export {$b308eef0abc42945$export$8e24544ddba725ee as focusRing, $468034641bb536ce$export$49bbad2a916ab57c as baseColor, $468034641bb536ce$export$17b63977b35bb6d2 as edgeToText, $468034641bb536ce$export$ba024f4caf693d15 as fontRelative, $468034641bb536ce$export$d19e682d444755ed as lightDark, $468034641bb536ce$export$346677f925de839c as size, $468034641bb536ce$export$a941ed4b947d12f8 as space, $468034641bb536ce$export$1d567c320f4763bc as style};
+//# sourceMappingURL=module.mjs.map

package/style/dist/module.mjs.map

@@ -0,0 +1 @@
+{"mappings":";;AAAA;;;;;;;;;;CAUC;AAKM,MAAM,4CAAY,IAAO,CAAA;QAC9B,cAAc;YACZ,SAAS;YACT,gBAAgB;QAClB;QACA,cAAc;QACd,cAAc;QACd,eAAe;IACjB,CAAA","sources":["packages/@react-spectrum/s2/style/index.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {baseColor, edgeToText, fontRelative, lightDark, size, space, style} from './spectrum-theme';\nexport type {StyleString} from './types';\n\nexport const focusRing = () => ({\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineColor: 'focus-ring',\n  outlineWidth: 2,\n  outlineOffset: 2\n} as const);\n"],"names":[],"version":3,"file":"module.mjs.map","sourceRoot":"../../../../../"}