@react-spectrum/s2 0.10.0 → 0.11.0

package/icons/Skeleton.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAUM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,aAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,oBAAY,EAAE;IACjC,OAAO,CAAA,GAAA,kBAAU,EAAE,CAAC;QAClB,IAAI,eAAe,CAAC,aAAa,OAAO,IAAI,WAAW,CAAC,cAAc;YACpE,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBACE;oBAAC,oBAAoB;gBAAM;gBAC3B;oBAAC,oBAAoB;gBAAI;aAC1B,EACD;gBACE,UAAU;gBACV,YAAY;gBACZ,QAAQ;YACV;YAEF,aAAa,OAAO,CAAC,SAAS,GAAG;QACnC,OAAO,IAAI,CAAC,eAAe,aAAa,OAAO,EAAE;YAC/C,aAAa,OAAO,CAAC,MAAM;YAC3B,aAAa,OAAO,GAAG;QACzB;IACF,GAAG;QAAC;KAAY;AAClB;AASO,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B;;AAGP;AAEO,MAAM,sDAMJ,qEAAqE;AAEvE,SAAS,0CAAgB,QAAmB,EAAE,KAAgC;IACnF,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YAAY;QACd,yBAAW,gBAAC;sBAAc;;QAC1B,QAAQ;YACN,GAAG,KAAK;YACR,8DAA8D;YAC9D,2EAA2E;YAC3E,qBAAqB;QACvB;IACF;IACA,OAAO;QAAC;QAAU;KAAM;AAC1B;AAGO,SAAS,0CAAa,YAAC,QAAQ,EAAwB;IAC5D,qBACE,gBAAC;QACC,6CAA6C;QAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WAAW;kBAKV;;AAGP;AAGO,SAAS,0CAAgB,YAAC,QAAQ,EAA8B;IACrE,IAAI,YAAY,CAAA,GAAA,iBAAS,EAAE;IAC3B,IAAI,YAAY,0CAAoB,aAAa;IACjD,IAAI,aAAa,MACf,OAAO;IAGT,IAAI,WAAW,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MAAM,SAAS,GAAG,GAAU,SAAS,KAAK,CAAC,GAAG;IACrI,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BAAY,CAAA,GAAA,mBAAW,EAAE,UAAU;YAClC,KAAK,CAAA,GAAA,gBAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QACpB,KAAK;;AAGX;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,yCAAU,sBAA+B;IAElD,OAAO,UAAU;AACnB","sources":["packages/@react-spectrum/s2/src/Skeleton.tsx"],"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\nimport {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {inertValue, mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from '@react-spectrum/utils';\n\nexport function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void {\n  let animationRef = useRef<Animation | null>(null);\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  return useCallback((element: HTMLElement | null) => {\n    if (isAnimating && !animationRef.current && element && !reduceMotion) {\n      // Use web animation API instead of CSS animations so that we can\n      // synchronize it between all loading elements on the page (via startTime).\n      animationRef.current = element.animate(\n        [\n          {backgroundPosition: '100%'},\n          {backgroundPosition: '0%'}\n        ],\n        {\n          duration: 2000,\n          iterations: Infinity,\n          easing: 'ease-in-out'\n        }\n      );\n      animationRef.current.startTime = 0;\n    } else if (!isAnimating && animationRef.current) {\n      animationRef.current.cancel();\n      animationRef.current = null;\n    }\n  }, [isAnimating]);\n}\n\nexport type SkeletonElement = ReactElement<{\n  children: ReactNode,\n  className?: string,\n  ref?: Ref<HTMLElement>,\n  inert?: boolean | 'true'\n}>;\n\nexport const SkeletonContext = createContext<boolean | null>(null);\nexport function useIsSkeleton(): boolean {\n  return useContext(SkeletonContext) || false;\n}\n\nexport interface SkeletonProps {\n  children: ReactNode,\n  isLoading: boolean\n}\n\n/**\n * A Skeleton wraps around content to render it as a placeholder.\n */\nexport function Skeleton({children, isLoading}: SkeletonProps): ReactNode {\n  // Disable all form components inside a skeleton.\n  return (\n    <SkeletonContext.Provider value={isLoading}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n}\n\nexport const loadingStyle = raw(`\n  background-image: linear-gradient(to right, ${color('gray-100')} 33%, light-dark(${color('gray-25')}, ${color('gray-300')}), ${color('gray-100')} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`, 'L'); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(children: ReactNode, style: CSSProperties | undefined): [ReactNode, CSSProperties | undefined] {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    children = <SkeletonText>{children}</SkeletonText>;\n    style = {\n      ...style,\n      // This ensures the ellipsis on truncated text is also hidden.\n      // -webkit-text-fill-color overrides any `color` property that is also set.\n      WebkitTextFillColor: 'transparent'\n    };\n  }\n  return [children, style];\n}\n\n// Rendered inside <Text> to create skeleton line boxes via box-decoration-break.\nexport function SkeletonText({children}: {children: ReactNode}): ReactNode {\n  return (\n    <span\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(true)}\n      ref={useLoadingAnimation(true)}\n      className={loadingStyle + style({\n        color: 'transparent',\n        boxDecorationBreak: 'clone',\n        borderRadius: 'sm'\n      })}>\n      {children}\n    </span>\n  );\n}\n\n// Clones the child element and displays it with skeleton styling.\nexport function SkeletonWrapper({children}: {children: SkeletonElement}): ReactNode {\n  let isLoading = useContext(SkeletonContext);\n  let animation = useLoadingAnimation(isLoading || false);\n  if (isLoading == null) {\n    return children;\n  }\n\n  let childRef = 'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get ? children.ref as any : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading ? cloneElement(children, {\n        ref: mergeRefs(childRef, animation),\n        className: (children.props.className || '') + ' ' + loadingStyle,\n        // @ts-ignore - compatibility with React < 19\n        inert: inertValue(true)\n      }) : children}\n    </SkeletonContext.Provider>\n  );\n}\n\n// Adds default border radius around icons when displayed in a skeleton.\nexport function useSkeletonIcon(styles: StyleString): StyleString {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    return mergeStyles(style({borderRadius: 'sm'}), styles);\n  }\n  return styles || '' as StyleString;\n}\n"],"names":[],"version":3,"file":"Skeleton.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAUM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,aAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,oBAAY,EAAE;IACjC,OAAO,CAAA,GAAA,kBAAU,EAAE,CAAC;QAClB,IAAI,eAAe,CAAC,aAAa,OAAO,IAAI,WAAW,CAAC,cAAc;YACpE,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBACE;oBAAC,oBAAoB;gBAAM;gBAC3B;oBAAC,oBAAoB;gBAAI;aAC1B,EACD;gBACE,UAAU;gBACV,YAAY;gBACZ,QAAQ;YACV;YAEF,aAAa,OAAO,CAAC,SAAS,GAAG;QACnC,OAAO,IAAI,CAAC,eAAe,aAAa,OAAO,EAAE;YAC/C,aAAa,OAAO,CAAC,MAAM;YAC3B,aAAa,OAAO,GAAG;QACzB;IACF,GAAG;QAAC;KAAY;AAClB;AASO,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B;;AAGP;AAEO,MAAM,sDAMJ,qEAAqE;AAEvE,SAAS,0CAAgB,QAAmB,EAAE,KAAgC;IACnF,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YAAY;QACd,yBAAW,gBAAC;sBAAc;;QAC1B,QAAQ;YACN,GAAG,KAAK;YACR,8DAA8D;YAC9D,2EAA2E;YAC3E,qBAAqB;QACvB;IACF;IACA,OAAO;QAAC;QAAU;KAAM;AAC1B;AAGO,SAAS,0CAAa,YAAC,QAAQ,EAAwB;IAC5D,qBACE,gBAAC;QACC,6CAA6C;QAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WAAW;kBAKV;;AAGP;AAGO,SAAS,0CAAgB,YAAC,QAAQ,EAA8B;IACrE,IAAI,YAAY,CAAA,GAAA,iBAAS,EAAE;IAC3B,IAAI,YAAY,0CAAoB,aAAa;IACjD,IAAI,aAAa,MACf,OAAO;IAGT,IAAI,WAAW,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MAAM,SAAS,GAAG,GAAU,SAAS,KAAK,CAAC,GAAG;IACrI,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BAAY,CAAA,GAAA,mBAAW,EAAE,UAAU;YAClC,KAAK,CAAA,GAAA,gBAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QACpB,KAAK;;AAGX;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,yCAAU,0BAA+B;IAElD,OAAO,UAAU;AACnB","sources":["packages/@react-spectrum/s2/src/Skeleton.tsx"],"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\nimport {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {inertValue, mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from '@react-spectrum/utils';\n\nexport function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void {\n  let animationRef = useRef<Animation | null>(null);\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  return useCallback((element: HTMLElement | null) => {\n    if (isAnimating && !animationRef.current && element && !reduceMotion) {\n      // Use web animation API instead of CSS animations so that we can\n      // synchronize it between all loading elements on the page (via startTime).\n      animationRef.current = element.animate(\n        [\n          {backgroundPosition: '100%'},\n          {backgroundPosition: '0%'}\n        ],\n        {\n          duration: 2000,\n          iterations: Infinity,\n          easing: 'ease-in-out'\n        }\n      );\n      animationRef.current.startTime = 0;\n    } else if (!isAnimating && animationRef.current) {\n      animationRef.current.cancel();\n      animationRef.current = null;\n    }\n  }, [isAnimating]);\n}\n\nexport type SkeletonElement = ReactElement<{\n  children: ReactNode,\n  className?: string,\n  ref?: Ref<HTMLElement>,\n  inert?: boolean | 'true'\n}>;\n\nexport const SkeletonContext = createContext<boolean | null>(null);\nexport function useIsSkeleton(): boolean {\n  return useContext(SkeletonContext) || false;\n}\n\nexport interface SkeletonProps {\n  children: ReactNode,\n  isLoading: boolean\n}\n\n/**\n * A Skeleton wraps around content to render it as a placeholder.\n */\nexport function Skeleton({children, isLoading}: SkeletonProps): ReactNode {\n  // Disable all form components inside a skeleton.\n  return (\n    <SkeletonContext.Provider value={isLoading}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n}\n\nexport const loadingStyle = raw(`\n  background-image: linear-gradient(to right, ${color('gray-100')} 33%, light-dark(${color('gray-25')}, ${color('gray-300')}), ${color('gray-100')} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`, 'L'); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(children: ReactNode, style: CSSProperties | undefined): [ReactNode, CSSProperties | undefined] {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    children = <SkeletonText>{children}</SkeletonText>;\n    style = {\n      ...style,\n      // This ensures the ellipsis on truncated text is also hidden.\n      // -webkit-text-fill-color overrides any `color` property that is also set.\n      WebkitTextFillColor: 'transparent'\n    };\n  }\n  return [children, style];\n}\n\n// Rendered inside <Text> to create skeleton line boxes via box-decoration-break.\nexport function SkeletonText({children}: {children: ReactNode}): ReactNode {\n  return (\n    <span\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(true)}\n      ref={useLoadingAnimation(true)}\n      className={loadingStyle + style({\n        color: 'transparent',\n        boxDecorationBreak: 'clone',\n        borderRadius: 'sm'\n      })}>\n      {children}\n    </span>\n  );\n}\n\n// Clones the child element and displays it with skeleton styling.\nexport function SkeletonWrapper({children}: {children: SkeletonElement}): ReactNode {\n  let isLoading = useContext(SkeletonContext);\n  let animation = useLoadingAnimation(isLoading || false);\n  if (isLoading == null) {\n    return children;\n  }\n\n  let childRef = 'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get ? children.ref as any : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading ? cloneElement(children, {\n        ref: mergeRefs(childRef, animation),\n        className: (children.props.className || '') + ' ' + loadingStyle,\n        // @ts-ignore - compatibility with React < 19\n        inert: inertValue(true)\n      }) : children}\n    </SkeletonContext.Provider>\n  );\n}\n\n// Adds default border radius around icons when displayed in a skeleton.\nexport function useSkeletonIcon(styles: StyleString): StyleString {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    return mergeStyles(style({borderRadius: 'sm'}), styles);\n  }\n  return styles || '' as StyleString;\n}\n"],"names":[],"version":3,"file":"Skeleton.mjs.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -77,28 +77,28 @@
     "src"
   ],
   "dependencies": {
-    "@internationalized/date": "^3.8.2",
-    "@internationalized/number": "^3.6.4",
-    "@react-aria/calendar": "^3.9.0",
-    "@react-aria/collections": "3.0.0-rc.4",
-    "@react-aria/focus": "^3.21.0",
-    "@react-aria/i18n": "^3.12.11",
-    "@react-aria/interactions": "^3.25.4",
+    "@internationalized/date": "^3.9.0",
+    "@internationalized/number": "^3.6.5",
+    "@react-aria/calendar": "^3.9.1",
+    "@react-aria/collections": "3.0.0-rc.5",
+    "@react-aria/focus": "^3.21.1",
+    "@react-aria/i18n": "^3.12.12",
+    "@react-aria/interactions": "^3.25.5",
     "@react-aria/live-announcer": "^3.4.4",
-    "@react-aria/utils": "^3.30.0",
-    "@react-spectrum/utils": "^3.12.7",
-    "@react-stately/layout": "^4.4.0",
+    "@react-aria/utils": "^3.30.1",
+    "@react-spectrum/utils": "^3.12.8",
+    "@react-stately/layout": "^4.5.0",
     "@react-stately/utils": "^3.10.8",
-    "@react-types/dialog": "^3.5.20",
-    "@react-types/grid": "^3.3.4",
-    "@react-types/provider": "^3.8.11",
-    "@react-types/shared": "^3.31.0",
-    "@react-types/table": "^3.13.2",
-    "@react-types/textfield": "^3.12.4",
+    "@react-types/dialog": "^3.5.21",
+    "@react-types/grid": "^3.3.5",
+    "@react-types/provider": "^3.8.12",
+    "@react-types/shared": "^3.32.0",
+    "@react-types/table": "^3.13.3",
+    "@react-types/textfield": "^3.12.5",
     "csstype": "^3.0.2",
-    "react-aria": "^3.42.0",
-    "react-aria-components": "^1.11.0",
-    "react-stately": "^3.40.0"
+    "react-aria": "^3.43.0",
+    "react-aria-components": "^1.12.0",
+    "react-stately": "^3.41.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0-rc.1",
@@ -107,5 +107,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8b9348ff255e018b2dd9b27e2a45507cadfa1d35"
+  "gitHead": "2c58ed3ddd9be9100af9b1d0cfd137fcdc95ba2d"
 }

package/src/Calendar.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {ActionButton, Header, Heading, pressScale} from './';
+import {ActionButton, Header, HeaderContext, Heading, HeadingContext, pressScale} from './';
 import {
   Calendar as AriaCalendar,
   CalendarCell as AriaCalendarCell,
@@ -27,6 +27,7 @@ import {
   CalendarStateContext,
   ContextValue,
   DateValue,
+  Provider,
   RangeCalendarState,
   RangeCalendarStateContext,
   Text
@@ -304,11 +305,17 @@ export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
       {({isInvalid, isDisabled}) => {
         return (
           <>
-            <Header styles={headerStyles}>
-              <CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
-              <CalendarHeading />
-              <CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
-            </Header>
+            <Provider
+              values={[
+                [HeaderContext, null],
+                [HeadingContext, null]
+              ]}>
+              <Header styles={headerStyles}>
+                <CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
+                <CalendarHeading />
+                <CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
+              </Header>
+            </Provider>
             <div
               className={style({
                 display: 'flex',

package/src/ComboBox.tsx

@@ -33,6 +33,7 @@ import {
   Virtualizer
 } from 'react-aria-components';
 import {AsyncLoadable, GlobalDOMAttributes, HelpTextProps, LoadingState, SpectrumLabelableProps} from '@react-types/shared';
+import {BaseCollection, CollectionNode, createLeafComponent} from '@react-aria/collections';
 import {baseColor, edgeToText, focusRing, space, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {centerPadding, control, controlBorderRadius, controlFont, controlSize, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -48,7 +49,6 @@ import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
 import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
-import {createLeafComponent} from '@react-aria/collections';
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
@@ -209,7 +209,8 @@ export let listbox = style<{size: 'S' | 'M' | 'L' | 'XL'}>({
   overflowY: 'auto',
   overflowX: 'hidden',
   fontFamily: 'sans',
-  fontSize: controlFont()
+  fontSize: controlFont(),
+  outlineStyle: 'none'
 });
 
 export let listboxItem = style({
@@ -338,14 +339,13 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
     labelPosition = 'top',
     UNSAFE_className = '',
     UNSAFE_style,
-    loadingState,
     ...comboBoxProps
   } = props;
 
   return (
     <AriaComboBox
       {...comboBoxProps}
-      allowsEmptyCollection={loadingState != null}
+      allowsEmptyCollection
       style={UNSAFE_style}
       className={UNSAFE_className + style(field(), getAllowedOverrides())({
         isInForm: !!formContext,
@@ -699,7 +699,22 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
   );
 });
 
-export const Divider = /*#__PURE__*/ createLeafComponent('separator', function Divider({size}: {size?: 'S' | 'M' | 'L' | 'XL'}, ref: ForwardedRef<HTMLDivElement>, node: Node<unknown>) {
+class SeparatorNode extends CollectionNode<any> {
+  static readonly type = 'separator';
+
+  filter(collection: BaseCollection<any>, newCollection: BaseCollection<any>): CollectionNode<any> | null {
+    let prevItem = newCollection.getItem(this.prevKey!);
+    if (prevItem && prevItem.type !== 'separator') {
+      let clone = this.clone();
+      newCollection.addDescendants(clone, collection);
+      return clone;
+    }
+
+    return null;
+  }
+}
+
+export const Divider = /*#__PURE__*/ createLeafComponent(SeparatorNode, function Divider({size}: {size?: 'S' | 'M' | 'L' | 'XL'}, ref: ForwardedRef<HTMLDivElement>, node: Node<unknown>) {
   let listState = useContext(ListStateContext)!;
 
   let nextNode = node.nextKey != null && listState.collection.getItem(node.nextKey);

package/src/DatePicker.tsx

@@ -139,10 +139,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     styles,
     placeholderValue,
     maxVisibleMonths = 1,
-    firstDayOfWeek,
     createCalendar,
-    pageBehavior,
-    isDateUnavailable,
     ...dateFieldProps
   } = props;
   let formContext = useContext(FormContext);
@@ -206,10 +203,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
             <CalendarPopover>
               <Calendar
                 visibleMonths={maxVisibleMonths}
-                createCalendar={createCalendar}
-                firstDayOfWeek={firstDayOfWeek}
-                isDateUnavailable={isDateUnavailable}
-                pageBehavior={pageBehavior} />
+                createCalendar={createCalendar} />
               {showTimeField && (
                 <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>
                   <TimeField

package/src/DateRangePicker.tsx

@@ -72,10 +72,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
     styles,
     placeholderValue,
     maxVisibleMonths = 1,
-    firstDayOfWeek,
     createCalendar,
-    pageBehavior,
-    isDateUnavailable,
     ...dateFieldProps
   } = props;
   let formContext = useContext(FormContext);
@@ -145,10 +142,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
             <CalendarPopover>
               <RangeCalendar
                 visibleMonths={maxVisibleMonths}
-                createCalendar={createCalendar}
-                firstDayOfWeek={firstDayOfWeek}
-                isDateUnavailable={isDateUnavailable}
-                pageBehavior={pageBehavior} />
+                createCalendar={createCalendar} />
               {showTimeField && (
                 <div className={style({display: 'flex', gap: 16, contain: 'inline-size', marginTop: 24})}>
                   <TimeField

package/src/RangeCalendar.tsx

@@ -15,6 +15,7 @@ import {
   RangeCalendarProps as AriaRangeCalendarProps,
   ContextValue,
   DateValue,
+  Provider,
   Text
 } from 'react-aria-components';
 import {CalendarButton, CalendarGrid, CalendarHeading} from './Calendar';
@@ -23,7 +24,7 @@ import ChevronRightIcon from '../s2wf-icons/S2_Icon_ChevronRight_20_N.svg';
 import {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';
 import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {Header} from './';
+import {Header, HeaderContext, HeadingContext} from './';
 import {helpTextStyles} from './Field';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -85,11 +86,17 @@ export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
       {({isInvalid, isDisabled}) => {
         return (
           <>
-            <Header styles={headerStyles}>
-              <CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
-              <CalendarHeading />
-              <CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
-            </Header>
+            <Provider
+              values={[
+                [HeaderContext, null],
+                [HeadingContext, null]
+              ]}>
+              <Header styles={headerStyles}>
+                <CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
+                <CalendarHeading />
+                <CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
+              </Header>
+            </Provider>
             <div
               className={style({
                 display: 'flex',