support focus rect in shadow dom

.codesandbox/ci.json

@@ -1,6 +1,11 @@
 {
   "buildCommand": "build:codesandbox",
-  "packages": ["packages/react", "packages/react-components/react-components"],
+  "packages": [
+    "packages/react",
+    "packages/react-components/react-components",
+    "packages/merge-styles",
+    "packages/utilities"
+  ],
   "sandboxes": ["x5u3t", "spnyu"],
   "node": "16"
 }

packages/jest-serializer-merge-styles/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "es5",
     "outDir": "lib",
     "module": "commonjs",
-    "lib": ["es2017"],
+    "lib": ["es2017", "dom"],
     "jsx": "react",
     "declaration": true,
     "sourceMap": true,

packages/merge-styles/etc/merge-styles.api.md

@@ -33,17 +33,43 @@ export type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends (infer U)[] ? DeepPartial<U>[] : T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
 
+// @public (undocumented)
+export class EventMap<K, V> {
+    constructor();
+    // (undocumented)
+    forEach(callback: (value: V, key: K, map: Map<K, V>) => void): void;
+    // (undocumented)
+    get(key: K): V | undefined;
+    // (undocumented)
+    has(key: K): boolean;
+    // (undocumented)
+    off(type: string, callback: EventHandler): void;
+    // Warning: (ae-forgotten-export) The symbol "EventHandler" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    on(type: string, callback: EventHandler): void;
+    // (undocumented)
+    raise(type: string, data: {
+        key: K;
+        sheet: V;
+    }): void;
+    // (undocumented)
+    set(key: K, value: V): void;
+}
+
 // @public
 export function fontFace(font: IFontFace): void;
 
+// Warning: (ae-forgotten-export) The symbol "IStylesheetKey" needs to be exported by the entry point index.d.ts
+//
 // @public
 export type IConcatenatedStyleSet<TStyleSet extends IStyleSet<TStyleSet>> = {
     [P in keyof Omit_2<TStyleSet, 'subComponentStyles'>]: IStyle;
 } & {
     subComponentStyles?: {
         [P in keyof TStyleSet['subComponentStyles']]: IStyleFunction<any, any>;
     };
-};
+} & IStylesheetKey;
 
 // @public
 export interface ICSPSettings {
@@ -75,6 +101,9 @@ export const InjectionMode: {
     none: 0;
     insertNode: 1;
     appendChild: 2;
+    unstable_constructibleStylesheet: 3;
+    insertNodeAndConstructableStylesheet: 4;
+    appedChildAndConstructableStylesheet: 5;
 };
 
 // @public (undocumented)
@@ -87,7 +116,7 @@ export type IProcessedStyleSet<TStyleSet extends IStyleSet<TStyleSet>> = {
     subComponentStyles: {
         [P in keyof TStyleSet['subComponentStyles']]: __MapToFunctionType<TStyleSet['subComponentStyles'] extends infer J ? (P extends keyof J ? J[P] : never) : never>;
     };
-};
+} & IStylesheetKey;
 
 // @public
 export interface IRawFontStyle {
@@ -425,7 +454,7 @@ export interface IStyleBaseArray extends Array<IStyle> {
 }
 
 // @public
-export type IStyleFunction<TStylesProps, TStyleSet extends IStyleSet<TStyleSet>> = (props: TStylesProps) => DeepPartial<TStyleSet>;
+export type IStyleFunction<TStylesProps, TStyleSet extends IStyleSet<TStyleSet>> = (props: TStylesProps, __stylesheetKey__?: string) => DeepPartial<TStyleSet>;
 
 // @public
 export type IStyleFunctionOrObject<TStylesProps, TStyleSet extends IStyleSet<TStyleSet>> = IStyleFunction<TStylesProps, TStyleSet> | DeepPartial<TStyleSet>;
@@ -439,7 +468,7 @@ export type IStyleSet<TStyleSet extends IStyleSet<TStyleSet> = {
     subComponentStyles?: {
         [P in keyof TStyleSet['subComponentStyles']]: IStyleFunctionOrObject<any, any>;
     };
-};
+} & IStylesheetKey;
 
 // @public
 export interface IStyleSheetConfig {
@@ -459,33 +488,34 @@ export interface IStyleSheetConfig {
 export function keyframes(timeline: IKeyframes): string;
 
 // Warning: (ae-forgotten-export) The symbol "IStyleOptions" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "ShadowConfig" needs to be exported by the entry point index.d.ts
 //
 // @public
-export function mergeCss(args: (IStyle | IStyleBaseArray | false | null | undefined) | (IStyle | IStyleBaseArray | false | null | undefined)[], options?: IStyleOptions): string;
+export function mergeCss(args: (IStyle | IStyleBaseArray | false | null | undefined) | (IStyle | IStyleBaseArray | false | null | undefined)[], options?: IStyleOptions, shadowConfig?: ShadowConfig): string;
 
 // @public
-export function mergeCssSets<TStyleSet>(styleSets: [TStyleSet | false | null | undefined], options?: IStyleOptions): IProcessedStyleSet<TStyleSet>;
+export function mergeCssSets<TStyleSet>(styleSets: [TStyleSet | false | null | undefined], options?: IStyleOptions, shadowConfig?: ShadowConfig): IProcessedStyleSet<TStyleSet>;
 
 // @public
-export function mergeCssSets<TStyleSet1, TStyleSet2>(styleSets: [TStyleSet1 | false | null | undefined, TStyleSet2 | false | null | undefined], options?: IStyleOptions): IProcessedStyleSet<TStyleSet1 & TStyleSet2>;
+export function mergeCssSets<TStyleSet1, TStyleSet2>(styleSets: [TStyleSet1 | false | null | undefined, TStyleSet2 | false | null | undefined], options?: IStyleOptions, shadowConfig?: ShadowConfig): IProcessedStyleSet<TStyleSet1 & TStyleSet2>;
 
 // @public
 export function mergeCssSets<TStyleSet1, TStyleSet2, TStyleSet3>(styleSets: [
 TStyleSet1 | false | null | undefined,
 TStyleSet2 | false | null | undefined,
 TStyleSet3 | false | null | undefined
-], options?: IStyleOptions): IProcessedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3>;
+], options?: IStyleOptions, shadowConfig?: ShadowConfig): IProcessedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3>;
 
 // @public
 export function mergeCssSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4>(styleSets: [
 TStyleSet1 | false | null | undefined,
 TStyleSet2 | false | null | undefined,
 TStyleSet3 | false | null | undefined,
 TStyleSet4 | false | null | undefined
-], options?: IStyleOptions): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4>>;
+], options?: IStyleOptions, shadowConfig?: ShadowConfig): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4>>;
 
 // @public
-export function mergeCssSets<TStyleSet>(styleSet: [TStyleSet | false | null | undefined], options?: IStyleOptions): IProcessedStyleSet<TStyleSet>;
+export function mergeCssSets<TStyleSet>(styleSet: [TStyleSet | false | null | undefined], options?: IStyleOptions, shadowConfig?: ShadowConfig): IProcessedStyleSet<TStyleSet>;
 
 // @public
 export function mergeStyles(...args: (IStyle | IStyleBaseArray | false | null | undefined)[]): string;
@@ -505,6 +535,9 @@ export function mergeStyleSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4>(s
 // @public
 export function mergeStyleSets(...styleSets: Array<IStyleSet | undefined | false | null>): IProcessedStyleSet<any>;
 
+// @public (undocumented)
+export function mergeStyleSets(shadowConfig: ShadowConfig, ...styleSets: Array<IStyleSet | undefined | false | null>): IProcessedStyleSet<any>;
+
 // @public (undocumented)
 export type ObjectOnly<TArg> = TArg extends {} ? TArg : {};
 
@@ -519,15 +552,17 @@ export function setRTL(isRTL: boolean): void;
 
 // @public
 export class Stylesheet {
-    constructor(config?: IStyleSheetConfig, serializedStylesheet?: ISerializedStylesheet);
+    constructor(config?: IStyleSheetConfig, serializedStylesheet?: ISerializedStylesheet, stylesheetKey?: string);
     argsFromClassName(className: string): IStyle[] | undefined;
     cacheClassName(className: string, key: string, args: IStyle[], rules: string[]): void;
     classNameFromKey(key: string): string | undefined;
+    // (undocumented)
+    getAdoptableStyleSheet(): CSSStyleSheet | undefined;
     getClassName(displayName?: string): string;
     getClassNameCache(): {
         [key: string]: string;
     };
-    static getInstance(): Stylesheet;
+    static getInstance({ stylesheetKey, inShadow }?: ShadowConfig): Stylesheet;
     getRules(includePreservedRules?: boolean): string;
     insertedRulesFromClassName(className: string): string[] | undefined;
     insertRule(rule: string, preserve?: boolean): void;

packages/merge-styles/src/IStyleFunction.ts

@@ -7,6 +7,7 @@ import { DeepPartial } from './DeepPartial';
  */
 export type IStyleFunction<TStylesProps, TStyleSet extends IStyleSet<TStyleSet>> = (
   props: TStylesProps,
+  __stylesheetKey__?: string,
 ) => DeepPartial<TStyleSet>;
 
 /**

packages/merge-styles/src/IStyleOptions.ts

@@ -1,4 +1,5 @@
 export interface IStyleOptions {
   rtl?: boolean;
   specificityMultiplier?: number;
+  stylesheetKey?: string;
 }

packages/merge-styles/src/IStyleSet.ts

@@ -33,7 +33,7 @@ export type IStyleSet<TStyleSet extends IStyleSet<TStyleSet> = { [key: string]:
   [P in keyof Omit<TStyleSet, 'subComponentStyles'>]: IStyle;
 } & {
   subComponentStyles?: { [P in keyof TStyleSet['subComponentStyles']]: IStyleFunctionOrObject<any, any> };
-};
+} & IStylesheetKey;
 
 /**
  * A concatenated style set differs from `IStyleSet` in that subComponentStyles will always be a style function.
@@ -43,7 +43,7 @@ export type IConcatenatedStyleSet<TStyleSet extends IStyleSet<TStyleSet>> = {
   [P in keyof Omit<TStyleSet, 'subComponentStyles'>]: IStyle;
 } & {
   subComponentStyles?: { [P in keyof TStyleSet['subComponentStyles']]: IStyleFunction<any, any> };
-};
+} & IStylesheetKey;
 
 /**
  * A processed style set is one which the set of styles associated with each area has been converted
@@ -58,4 +58,11 @@ export type IProcessedStyleSet<TStyleSet extends IStyleSet<TStyleSet>> = {
       TStyleSet['subComponentStyles'] extends infer J ? (P extends keyof J ? J[P] : never) : never
     >;
   };
+} & IStylesheetKey;
+
+/**
+ * NOTE: This API is unstable and subject to breaking change or removal at any time.
+ */
+export type IStylesheetKey = {
+  __stylesheetKey__?: string;
 };