@fluentui/react-migration-v0-v9 9.2.7 → 9.2.8

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-migration-v0-v9
 
-This log was last generated on Wed, 07 Aug 2024 12:31:33 GMT and should not be manually modified.
+This log was last generated on Thu, 15 Aug 2024 08:18:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.2.8)
+
+Thu, 15 Aug 2024 08:18:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.2.7..@fluentui/react-migration-v0-v9_v9.2.8)
+
+### Patches
+
+- v9 migration: Add Video shim component ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by jukapsia@microsoft.com)
+- Bump @fluentui/react-aria to v9.13.3 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
+- Bump @fluentui/react-components to v9.54.11 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
+- Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
+
 ## [9.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.2.7)
 
-Wed, 07 Aug 2024 12:31:33 GMT 
+Wed, 07 Aug 2024 12:31:57 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.2.6..@fluentui/react-migration-v0-v9_v9.2.7)
 
 ### Patches

package/dist/index.d.ts

@@ -460,6 +460,42 @@ export declare const v9HoverClasses: () => GriffelStyle;
 
 export declare const v9Icon: () => GriffelStyle;
 
+export declare const Video: React_2.ForwardRefExoticComponent<VideoProps & React_2.RefAttributes<HTMLVideoElement>>;
+
+export declare const videoClassName = "fui-Video";
+
+/**
+ * Video component props
+ */
+declare interface VideoProps extends React_2.VideoHTMLAttributes<HTMLVideoElement> {
+    /**
+     * The source URL of the video
+     */
+    src: string;
+    /**
+     * Whether the video should start playing automatically
+     * @default false
+     */
+    autoPlay?: boolean;
+    /**
+     * Whether the video should display controls
+     * @default true
+     */
+    controls?: boolean;
+    /**
+     * Whether the video should loop
+     */
+    loop?: boolean;
+    /**
+     * Whether the video should be muted
+     */
+    muted?: boolean;
+    /**
+     * The URL of an image to display while the video is loading
+     */
+    poster?: string;
+}
+
 declare type WithContent = ObjectShorthandValue<React_2.HTMLAttributes<HTMLDivElement>> | string;
 
 export { }

package/lib/components/Video/Video.js

@@ -0,0 +1,42 @@
+import { mergeClasses, useMergedRefs } from '@fluentui/react-components';
+import * as React from 'react';
+import { useVideoStyles } from './Video.styles';
+export const videoClassName = 'fui-Video';
+export const Video = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    'use no memo';
+    const { className, muted, ...rest } = props;
+    const videoRef = React.useRef();
+    const classes = useVideoStyles();
+    React.useEffect(()=>{
+        // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=969049
+        return ()=>{
+            if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) {
+                // we want to perform the cleanup on the latest element rendered
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                videoRef.current.src = '';
+            }
+        };
+    }, [
+        videoRef
+    ]);
+    React.useEffect(()=>{
+        // React doesn't guarantee that props will be set:
+        // https://github.com/facebook/react/issues/10389
+        if (videoRef.current) {
+            videoRef.current.muted = !!muted;
+        }
+    }, [
+        muted
+    ]);
+    return /*#__PURE__*/ React.createElement("video", {
+        ref: useMergedRefs(ref, videoRef),
+        role: "application",
+        className: mergeClasses(videoClassName, classes.root, className),
+        controls: true,
+        autoPlay: false,
+        muted: muted,
+        ...rest
+    });
+});
+Video.displayName = 'Video';

package/lib/components/Video/Video.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Video.tsx"],"sourcesContent":["import { mergeClasses, useMergedRefs } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useVideoStyles } from './Video.styles';\n\nexport const videoClassName = 'fui-Video';\n\n/**\n * Video component props\n */\nexport interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {\n  /**\n   * The source URL of the video\n   */\n  src: string;\n\n  /**\n   * Whether the video should start playing automatically\n   * @default false\n   */\n  autoPlay?: boolean;\n\n  /**\n   * Whether the video should display controls\n   * @default true\n   */\n  controls?: boolean;\n\n  /**\n   * Whether the video should loop\n   */\n  loop?: boolean;\n\n  /**\n   * Whether the video should be muted\n   */\n  muted?: boolean;\n\n  /**\n   * The URL of an image to display while the video is loading\n   */\n  poster?: string;\n}\n\nexport const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {\n  'use no memo';\n\n  const { className, muted, ...rest } = props;\n\n  const videoRef = React.useRef<HTMLVideoElement>();\n\n  const classes = useVideoStyles();\n  React.useEffect(() => {\n    // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted\n    // https://bugs.chromium.org/p/chromium/issues/detail?id=969049\n    return () => {\n      if (videoRef?.current) {\n        // we want to perform the cleanup on the latest element rendered\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        videoRef.current.src = '';\n      }\n    };\n  }, [videoRef]);\n\n  React.useEffect(() => {\n    // React doesn't guarantee that props will be set:\n    // https://github.com/facebook/react/issues/10389\n    if (videoRef.current) {\n      videoRef.current.muted = !!muted;\n    }\n  }, [muted]);\n\n  return (\n    <video\n      ref={useMergedRefs(ref, videoRef) as React.Ref<HTMLVideoElement>}\n      role=\"application\"\n      className={mergeClasses(videoClassName, classes.root, className)}\n      controls={true}\n      autoPlay={false}\n      muted={muted}\n      {...rest}\n    />\n  );\n});\n\nVideo.displayName = 'Video';\n"],"names":["mergeClasses","useMergedRefs","React","useVideoStyles","videoClassName","Video","forwardRef","props","ref","className","muted","rest","videoRef","useRef","classes","useEffect","current","src","video","role","root","controls","autoPlay","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,aAAa,QAAQ,6BAA6B;AACzE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,iBAAiB;AAEhD,OAAO,MAAMC,iBAAiB,YAAY;AAuC1C,OAAO,MAAMC,sBAAQH,MAAMI,UAAU,CAA+B,CAACC,OAAOC;IAC1E;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAEtC,MAAMK,WAAWV,MAAMW,MAAM;IAE7B,MAAMC,UAAUX;IAChBD,MAAMa,SAAS,CAAC;QACd,4IAA4I;QAC5I,+DAA+D;QAC/D,OAAO;YACL,IAAIH,qBAAAA,+BAAAA,SAAUI,OAAO,EAAE;gBACrB,gEAAgE;gBAChE,uDAAuD;gBACvDJ,SAASI,OAAO,CAACC,GAAG,GAAG;YACzB;QACF;IACF,GAAG;QAACL;KAAS;IAEbV,MAAMa,SAAS,CAAC;QACd,kDAAkD;QAClD,iDAAiD;QACjD,IAAIH,SAASI,OAAO,EAAE;YACpBJ,SAASI,OAAO,CAACN,KAAK,GAAG,CAAC,CAACA;QAC7B;IACF,GAAG;QAACA;KAAM;IAEV,qBACE,oBAACQ;QACCV,KAAKP,cAAcO,KAAKI;QACxBO,MAAK;QACLV,WAAWT,aAAaI,gBAAgBU,QAAQM,IAAI,EAAEX;QACtDY,UAAU;QACVC,UAAU;QACVZ,OAAOA;QACN,GAAGC,IAAI;;AAGd,GAAG;AAEHN,MAAMkB,WAAW,GAAG"}

package/lib/components/Video/Video.styles.js

@@ -0,0 +1,12 @@
+import { __styles } from '@fluentui/react-components';
+export const useVideoStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f14t3ns0",
+    ha4doy: "fmrv4ls",
+    a9b677: "fly5x3f",
+    Bqenvij: "f11ysow2"
+  }
+}, {
+  d: [".f14t3ns0{display:inline-block;}", ".fmrv4ls{vertical-align:middle;}", ".fly5x3f{width:100%;}", ".f11ysow2{height:auto;}"]
+});
+//# sourceMappingURL=Video.styles.js.map

package/lib/components/Video/Video.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","useVideoStyles","root","mc9l5x","ha4doy","a9b677","Bqenvij","d"],"sources":["Video.styles.js"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\nexport const useVideoStyles = makeStyles({\n    root: {\n        display: 'inline-block',\n        verticalAlign: 'middle',\n        width: '100%',\n        height: 'auto'\n    }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B,4BAA4B;AACvD,OAAO,MAAMC,cAAc,gBAAGD,QAAA;EAAAE,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAO7B,CAAC","ignoreList":[]}

package/lib/components/Video/index.js

@@ -0,0 +1 @@
+export * from './Video';

package/lib/components/Video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Video';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,UAAU"}

package/lib/index.js

@@ -2,6 +2,7 @@ export { GridShim, grid, gridClassName, useGridStyles } from './components/Grid/
 export { FormFieldShim } from './components/FormField';
 export { Segment } from './components/Segment';
 export { slider } from './components/Slider';
+export { Video, videoClassName } from './components/Video';
 export { input } from './components/Input';
 export { v0Icon, v9CustomSizeIcon, v9DisabledCursor, v9HoverClasses, v9Icon } from './components/Button';
 export { spinner } from './components/Spinner';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { GridShim, grid, gridClassName, useGridStyles } from './components/Grid/index';\nexport type { GridShimProps } from './components/Grid/index';\nexport { FormFieldShim } from './components/FormField';\nexport { Segment } from './components/Segment';\nexport { slider } from './components/Slider';\nexport { input } from './components/Input';\nexport { v0Icon, v9CustomSizeIcon, v9DisabledCursor, v9HoverClasses, v9Icon } from './components/Button';\nexport { spinner } from './components/Spinner';\nexport { StyledText, styledTextClassName } from './components/StyledText';\nexport type { StyledTextProps, StyledTextSlots } from './components/StyledText';\nexport { Primitive, primitiveClassName } from './components/Primitive';\nexport { ItemLayout, itemLayoutClassName, useItemLayoutStyles } from './components/ItemLayout';\nexport { Flex, flexClassName, flexItem, useFlexStyles } from './components/Flex';\nexport {\n  List,\n  ListItem,\n  listClassNames,\n  listItemClassNames,\n  renderListItem_unstable,\n  renderList_unstable,\n  useListItemStyles_unstable,\n  useListItem_unstable,\n  useListSelection,\n  useListStyles_unstable,\n  useList_unstable,\n} from './components/List';\nexport type { ListItemProps, ListItemSlots, ListItemState, ListProps, ListSlots, ListState } from './components/List';\nexport {\n  Attachment,\n  AttachmentAction,\n  AttachmentBody,\n  AttachmentDescription,\n  AttachmentHeader,\n  AttachmentIcon,\n  attachmentClassName,\n  attachmentActionClassName,\n  attachmentBodyClassName,\n  attachmentDescriptionClassName,\n  attachmentHeaderClassName,\n  attachmentIconClassName,\n  attachmentProgressBarClassName,\n  attachmentProgressContainerClassName,\n} from './components/Attachment';\n\nexport type {\n  AttachmentProps,\n  AttachmentActionProps,\n  AttachmentBodyProps,\n  AttachmentDescriptionProps,\n  AttachmentHeaderProps,\n  AttachmentIconProps,\n} from './components/Attachment';\n"],"names":["GridShim","grid","gridClassName","useGridStyles","FormFieldShim","Segment","slider","input","v0Icon","v9CustomSizeIcon","v9DisabledCursor","v9HoverClasses","v9Icon","spinner","StyledText","styledTextClassName","Primitive","primitiveClassName","ItemLayout","itemLayoutClassName","useItemLayoutStyles","Flex","flexClassName","flexItem","useFlexStyles","List","ListItem","listClassNames","listItemClassNames","renderListItem_unstable","renderList_unstable","useListItemStyles_unstable","useListItem_unstable","useListSelection","useListStyles_unstable","useList_unstable","Attachment","AttachmentAction","AttachmentBody","AttachmentDescription","AttachmentHeader","AttachmentIcon","attachmentClassName","attachmentActionClassName","attachmentBodyClassName","attachmentDescriptionClassName","attachmentHeaderClassName","attachmentIconClassName","attachmentProgressBarClassName","attachmentProgressContainerClassName"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,SAASA,QAAQ,EAAEC,IAAI,EAAEC,aAAa,EAAEC,aAAa,QAAQ,0BAA0B;AAEvF,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,MAAM,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,MAAM,QAAQ,sBAAsB;AACzG,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,UAAU,EAAEC,mBAAmB,QAAQ,0BAA0B;AAE1E,SAASC,SAAS,EAAEC,kBAAkB,QAAQ,yBAAyB;AACvE,SAASC,UAAU,EAAEC,mBAAmB,EAAEC,mBAAmB,QAAQ,0BAA0B;AAC/F,SAASC,IAAI,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,oBAAoB;AACjF,SACEC,IAAI,EACJC,QAAQ,EACRC,cAAc,EACdC,kBAAkB,EAClBC,uBAAuB,EACvBC,mBAAmB,EACnBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,gBAAgB,EAChBC,sBAAsB,EACtBC,gBAAgB,QACX,oBAAoB;AAE3B,SACEC,UAAU,EACVC,gBAAgB,EAChBC,cAAc,EACdC,qBAAqB,EACrBC,gBAAgB,EAChBC,cAAc,EACdC,mBAAmB,EACnBC,yBAAyB,EACzBC,uBAAuB,EACvBC,8BAA8B,EAC9BC,yBAAyB,EACzBC,uBAAuB,EACvBC,8BAA8B,EAC9BC,oCAAoC,QAC/B,0BAA0B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { GridShim, grid, gridClassName, useGridStyles } from './components/Grid/index';\nexport type { GridShimProps } from './components/Grid/index';\nexport { FormFieldShim } from './components/FormField';\nexport { Segment } from './components/Segment';\nexport { slider } from './components/Slider';\nexport { Video, videoClassName } from './components/Video';\nexport { input } from './components/Input';\nexport { v0Icon, v9CustomSizeIcon, v9DisabledCursor, v9HoverClasses, v9Icon } from './components/Button';\nexport { spinner } from './components/Spinner';\nexport { StyledText, styledTextClassName } from './components/StyledText';\nexport type { StyledTextProps, StyledTextSlots } from './components/StyledText';\nexport { Primitive, primitiveClassName } from './components/Primitive';\nexport { ItemLayout, itemLayoutClassName, useItemLayoutStyles } from './components/ItemLayout';\nexport { Flex, flexClassName, flexItem, useFlexStyles } from './components/Flex';\nexport {\n  List,\n  ListItem,\n  listClassNames,\n  listItemClassNames,\n  renderListItem_unstable,\n  renderList_unstable,\n  useListItemStyles_unstable,\n  useListItem_unstable,\n  useListSelection,\n  useListStyles_unstable,\n  useList_unstable,\n} from './components/List';\nexport type { ListItemProps, ListItemSlots, ListItemState, ListProps, ListSlots, ListState } from './components/List';\nexport {\n  Attachment,\n  AttachmentAction,\n  AttachmentBody,\n  AttachmentDescription,\n  AttachmentHeader,\n  AttachmentIcon,\n  attachmentClassName,\n  attachmentActionClassName,\n  attachmentBodyClassName,\n  attachmentDescriptionClassName,\n  attachmentHeaderClassName,\n  attachmentIconClassName,\n  attachmentProgressBarClassName,\n  attachmentProgressContainerClassName,\n} from './components/Attachment';\n\nexport type {\n  AttachmentProps,\n  AttachmentActionProps,\n  AttachmentBodyProps,\n  AttachmentDescriptionProps,\n  AttachmentHeaderProps,\n  AttachmentIconProps,\n} from './components/Attachment';\n"],"names":["GridShim","grid","gridClassName","useGridStyles","FormFieldShim","Segment","slider","Video","videoClassName","input","v0Icon","v9CustomSizeIcon","v9DisabledCursor","v9HoverClasses","v9Icon","spinner","StyledText","styledTextClassName","Primitive","primitiveClassName","ItemLayout","itemLayoutClassName","useItemLayoutStyles","Flex","flexClassName","flexItem","useFlexStyles","List","ListItem","listClassNames","listItemClassNames","renderListItem_unstable","renderList_unstable","useListItemStyles_unstable","useListItem_unstable","useListSelection","useListStyles_unstable","useList_unstable","Attachment","AttachmentAction","AttachmentBody","AttachmentDescription","AttachmentHeader","AttachmentIcon","attachmentClassName","attachmentActionClassName","attachmentBodyClassName","attachmentDescriptionClassName","attachmentHeaderClassName","attachmentIconClassName","attachmentProgressBarClassName","attachmentProgressContainerClassName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,SAASA,QAAQ,EAAEC,IAAI,EAAEC,aAAa,EAAEC,aAAa,QAAQ,0BAA0B;AAEvF,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,KAAK,EAAEC,cAAc,QAAQ,qBAAqB;AAC3D,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,MAAM,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,MAAM,QAAQ,sBAAsB;AACzG,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,UAAU,EAAEC,mBAAmB,QAAQ,0BAA0B;AAE1E,SAASC,SAAS,EAAEC,kBAAkB,QAAQ,yBAAyB;AACvE,SAASC,UAAU,EAAEC,mBAAmB,EAAEC,mBAAmB,QAAQ,0BAA0B;AAC/F,SAASC,IAAI,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,oBAAoB;AACjF,SACEC,IAAI,EACJC,QAAQ,EACRC,cAAc,EACdC,kBAAkB,EAClBC,uBAAuB,EACvBC,mBAAmB,EACnBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,gBAAgB,EAChBC,sBAAsB,EACtBC,gBAAgB,QACX,oBAAoB;AAE3B,SACEC,UAAU,EACVC,gBAAgB,EAChBC,cAAc,EACdC,qBAAqB,EACrBC,gBAAgB,EAChBC,cAAc,EACdC,mBAAmB,EACnBC,yBAAyB,EACzBC,uBAAuB,EACvBC,8BAA8B,EAC9BC,yBAAyB,EACzBC,uBAAuB,EACvBC,8BAA8B,EAC9BC,oCAAoC,QAC/B,0BAA0B"}

package/lib-commonjs/components/Video/Video.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Video: function() {
+        return Video;
+    },
+    videoClassName: function() {
+        return videoClassName;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reactcomponents = require("@fluentui/react-components");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _Videostyles = require("./Video.styles");
+const videoClassName = 'fui-Video';
+const Video = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    'use no memo';
+    const { className, muted, ...rest } = props;
+    const videoRef = _react.useRef();
+    const classes = (0, _Videostyles.useVideoStyles)();
+    _react.useEffect(()=>{
+        // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=969049
+        return ()=>{
+            if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) {
+                // we want to perform the cleanup on the latest element rendered
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                videoRef.current.src = '';
+            }
+        };
+    }, [
+        videoRef
+    ]);
+    _react.useEffect(()=>{
+        // React doesn't guarantee that props will be set:
+        // https://github.com/facebook/react/issues/10389
+        if (videoRef.current) {
+            videoRef.current.muted = !!muted;
+        }
+    }, [
+        muted
+    ]);
+    return /*#__PURE__*/ _react.createElement("video", {
+        ref: (0, _reactcomponents.useMergedRefs)(ref, videoRef),
+        role: "application",
+        className: (0, _reactcomponents.mergeClasses)(videoClassName, classes.root, className),
+        controls: true,
+        autoPlay: false,
+        muted: muted,
+        ...rest
+    });
+});
+Video.displayName = 'Video';

package/lib-commonjs/components/Video/Video.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Video.tsx"],"sourcesContent":["import { mergeClasses, useMergedRefs } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useVideoStyles } from './Video.styles';\n\nexport const videoClassName = 'fui-Video';\n\n/**\n * Video component props\n */\nexport interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {\n  /**\n   * The source URL of the video\n   */\n  src: string;\n\n  /**\n   * Whether the video should start playing automatically\n   * @default false\n   */\n  autoPlay?: boolean;\n\n  /**\n   * Whether the video should display controls\n   * @default true\n   */\n  controls?: boolean;\n\n  /**\n   * Whether the video should loop\n   */\n  loop?: boolean;\n\n  /**\n   * Whether the video should be muted\n   */\n  muted?: boolean;\n\n  /**\n   * The URL of an image to display while the video is loading\n   */\n  poster?: string;\n}\n\nexport const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {\n  'use no memo';\n\n  const { className, muted, ...rest } = props;\n\n  const videoRef = React.useRef<HTMLVideoElement>();\n\n  const classes = useVideoStyles();\n  React.useEffect(() => {\n    // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted\n    // https://bugs.chromium.org/p/chromium/issues/detail?id=969049\n    return () => {\n      if (videoRef?.current) {\n        // we want to perform the cleanup on the latest element rendered\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        videoRef.current.src = '';\n      }\n    };\n  }, [videoRef]);\n\n  React.useEffect(() => {\n    // React doesn't guarantee that props will be set:\n    // https://github.com/facebook/react/issues/10389\n    if (videoRef.current) {\n      videoRef.current.muted = !!muted;\n    }\n  }, [muted]);\n\n  return (\n    <video\n      ref={useMergedRefs(ref, videoRef) as React.Ref<HTMLVideoElement>}\n      role=\"application\"\n      className={mergeClasses(videoClassName, classes.root, className)}\n      controls={true}\n      autoPlay={false}\n      muted={muted}\n      {...rest}\n    />\n  );\n});\n\nVideo.displayName = 'Video';\n"],"names":["Video","videoClassName","React","forwardRef","props","ref","className","muted","rest","videoRef","useRef","classes","useVideoStyles","useEffect","current","src","createElement","video","useMergedRefs","role","mergeClasses","root","controls","autoPlay","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA2CaA,KAAAA;eAAAA;;IAvCAC,cAAAA;eAAAA;;;;iCAJ+B;iEACrB;6BACQ;AAExB,MAAMA,iBAAiB;AAuCvB,MAAMD,QAAAA,WAAAA,GAAQE,OAAMC,UAAU,CAA+B,CAACC,OAAOC;IAC1E;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAEtC,MAAMK,WAAWP,OAAMQ,MAAM;IAE7B,MAAMC,UAAUC,IAAAA,2BAAAA;IAChBV,OAAMW,SAAS,CAAC;QACd,4IAA4I;QAC5I,+DAA+D;QAC/D,OAAO;YACL,IAAIJ,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUK,OAAO,EAAE;gBACrB,gEAAgE;gBAChE,uDAAuD;gBACvDL,SAASK,OAAO,CAACC,GAAG,GAAG;YACzB;QACF;IACF,GAAG;QAACN;KAAS;IAEbP,OAAMW,SAAS,CAAC;QACd,kDAAkD;QAClD,iDAAiD;QACjD,IAAIJ,SAASK,OAAO,EAAE;YACpBL,SAASK,OAAO,CAACP,KAAK,GAAG,CAAC,CAACA;QAC7B;IACF,GAAG;QAACA;KAAM;IAEV,OAAA,WAAA,GACEL,OAAAc,aAAA,CAACC,SAAAA;QACCZ,KAAKa,IAAAA,8BAAAA,EAAcb,KAAKI;QACxBU,MAAK;QACLb,WAAWc,IAAAA,6BAAAA,EAAanB,gBAAgBU,QAAQU,IAAI,EAAEf;QACtDgB,UAAU;QACVC,UAAU;QACVhB,OAAOA;QACN,GAAGC,IAAI;;AAGd;AAEAR,MAAMwB,WAAW,GAAG"}

package/lib-commonjs/components/Video/Video.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useVideoStyles", {
+    enumerable: true,
+    get: function() {
+        return useVideoStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const useVideoStyles = /*#__PURE__*/ (0, _reactcomponents.__styles)({
+    root: {
+        mc9l5x: "f14t3ns0",
+        ha4doy: "fmrv4ls",
+        a9b677: "fly5x3f",
+        Bqenvij: "f11ysow2"
+    }
+}, {
+    d: [
+        ".f14t3ns0{display:inline-block;}",
+        ".fmrv4ls{vertical-align:middle;}",
+        ".fly5x3f{width:100%;}",
+        ".f11ysow2{height:auto;}"
+    ]
+}); //# sourceMappingURL=Video.styles.js.map

package/lib-commonjs/components/Video/Video.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Video.styles.js"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\nexport const useVideoStyles = makeStyles({\n    root: {\n        display: 'inline-block',\n        verticalAlign: 'middle',\n        width: '100%',\n        height: 'auto'\n    }\n});\n"],"names":["useVideoStyles","__styles","root","mc9l5x","ha4doy","a9b677","Bqenvij","d"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BACaA;;;eAAAA;;;iCADc;AACpB,MAAMA,iBAAc,WAAA,GAAGC,IAAAA,yBAAA,EAAA;IAAAC,MAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA"}

package/lib-commonjs/components/Video/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Video"), exports);

package/lib-commonjs/components/Video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Video';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/index.js

@@ -54,6 +54,9 @@ _export(exports, {
     StyledText: function() {
         return _StyledText.StyledText;
     },
+    Video: function() {
+        return _Video.Video;
+    },
     attachmentActionClassName: function() {
         return _Attachment.attachmentActionClassName;
     },
@@ -158,12 +161,16 @@ _export(exports, {
     },
     v9Icon: function() {
         return _Button.v9Icon;
+    },
+    videoClassName: function() {
+        return _Video.videoClassName;
     }
 });
 const _index = require("./components/Grid/index");
 const _FormField = require("./components/FormField");
 const _Segment = require("./components/Segment");
 const _Slider = require("./components/Slider");
+const _Video = require("./components/Video");
 const _Input = require("./components/Input");
 const _Button = require("./components/Button");
 const _Spinner = require("./components/Spinner");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { GridShim, grid, gridClassName, useGridStyles } from './components/Grid/index';\nexport type { GridShimProps } from './components/Grid/index';\nexport { FormFieldShim } from './components/FormField';\nexport { Segment } from './components/Segment';\nexport { slider } from './components/Slider';\nexport { input } from './components/Input';\nexport { v0Icon, v9CustomSizeIcon, v9DisabledCursor, v9HoverClasses, v9Icon } from './components/Button';\nexport { spinner } from './components/Spinner';\nexport { StyledText, styledTextClassName } from './components/StyledText';\nexport type { StyledTextProps, StyledTextSlots } from './components/StyledText';\nexport { Primitive, primitiveClassName } from './components/Primitive';\nexport { ItemLayout, itemLayoutClassName, useItemLayoutStyles } from './components/ItemLayout';\nexport { Flex, flexClassName, flexItem, useFlexStyles } from './components/Flex';\nexport {\n  List,\n  ListItem,\n  listClassNames,\n  listItemClassNames,\n  renderListItem_unstable,\n  renderList_unstable,\n  useListItemStyles_unstable,\n  useListItem_unstable,\n  useListSelection,\n  useListStyles_unstable,\n  useList_unstable,\n} from './components/List';\nexport type { ListItemProps, ListItemSlots, ListItemState, ListProps, ListSlots, ListState } from './components/List';\nexport {\n  Attachment,\n  AttachmentAction,\n  AttachmentBody,\n  AttachmentDescription,\n  AttachmentHeader,\n  AttachmentIcon,\n  attachmentClassName,\n  attachmentActionClassName,\n  attachmentBodyClassName,\n  attachmentDescriptionClassName,\n  attachmentHeaderClassName,\n  attachmentIconClassName,\n  attachmentProgressBarClassName,\n  attachmentProgressContainerClassName,\n} from './components/Attachment';\n\nexport type {\n  AttachmentProps,\n  AttachmentActionProps,\n  AttachmentBodyProps,\n  AttachmentDescriptionProps,\n  AttachmentHeaderProps,\n  AttachmentIconProps,\n} from './components/Attachment';\n"],"names":["Attachment","AttachmentAction","AttachmentBody","AttachmentDescription","AttachmentHeader","AttachmentIcon","Flex","FormFieldShim","GridShim","ItemLayout","List","ListItem","Primitive","Segment","StyledText","attachmentActionClassName","attachmentBodyClassName","attachmentClassName","attachmentDescriptionClassName","attachmentHeaderClassName","attachmentIconClassName","attachmentProgressBarClassName","attachmentProgressContainerClassName","flexClassName","flexItem","grid","gridClassName","input","itemLayoutClassName","listClassNames","listItemClassNames","primitiveClassName","renderListItem_unstable","renderList_unstable","slider","spinner","styledTextClassName","useFlexStyles","useGridStyles","useItemLayoutStyles","useListItemStyles_unstable","useListItem_unstable","useListSelection","useListStyles_unstable","useList_unstable","v0Icon","v9CustomSizeIcon","v9DisabledCursor","v9HoverClasses","v9Icon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA4BEA,UAAU;eAAVA,sBAAU;;IACVC,gBAAgB;eAAhBA,4BAAgB;;IAChBC,cAAc;eAAdA,0BAAc;;IACdC,qBAAqB;eAArBA,iCAAqB;;IACrBC,gBAAgB;eAAhBA,4BAAgB;;IAChBC,cAAc;eAAdA,0BAAc;;IArBPC,IAAI;eAAJA,UAAI;;IAVJC,aAAa;eAAbA,wBAAa;;IAFbC,QAAQ;eAARA,eAAQ;;IAWRC,UAAU;eAAVA,sBAAU;;IAGjBC,IAAI;eAAJA,UAAI;;IACJC,QAAQ;eAARA,cAAQ;;IALDC,SAAS;eAATA,oBAAS;;IAPTC,OAAO;eAAPA,gBAAO;;IAKPC,UAAU;eAAVA,sBAAU;;IA2BjBC,yBAAyB;eAAzBA,qCAAyB;;IACzBC,uBAAuB;eAAvBA,mCAAuB;;IAFvBC,mBAAmB;eAAnBA,+BAAmB;;IAGnBC,8BAA8B;eAA9BA,0CAA8B;;IAC9BC,yBAAyB;eAAzBA,qCAAyB;;IACzBC,uBAAuB;eAAvBA,mCAAuB;;IACvBC,8BAA8B;eAA9BA,0CAA8B;;IAC9BC,oCAAoC;eAApCA,gDAAoC;;IA7BvBC,aAAa;eAAbA,mBAAa;;IAAEC,QAAQ;eAARA,cAAQ;;IAZnBC,IAAI;eAAJA,WAAI;;IAAEC,aAAa;eAAbA,oBAAa;;IAK7BC,KAAK;eAALA,YAAK;;IAMOC,mBAAmB;eAAnBA,+BAAmB;;IAKtCC,cAAc;eAAdA,oBAAc;;IACdC,kBAAkB;eAAlBA,wBAAkB;;IAPAC,kBAAkB;eAAlBA,6BAAkB;;IAQpCC,uBAAuB;eAAvBA,6BAAuB;;IACvBC,mBAAmB;eAAnBA,yBAAmB;;IAfZC,MAAM;eAANA,cAAM;;IAGNC,OAAO;eAAPA,gBAAO;;IACKC,mBAAmB;eAAnBA,+BAAmB;;IAIAC,aAAa;eAAbA,mBAAa;;IAZbC,aAAa;eAAbA,oBAAa;;IAWXC,mBAAmB;eAAnBA,+BAAmB;;IAS3DC,0BAA0B;eAA1BA,gCAA0B;;IAC1BC,oBAAoB;eAApBA,0BAAoB;;IACpBC,gBAAgB;eAAhBA,sBAAgB;;IAChBC,sBAAsB;eAAtBA,4BAAsB;;IACtBC,gBAAgB;eAAhBA,sBAAgB;;IAlBTC,MAAM;eAANA,cAAM;;IAAEC,gBAAgB;eAAhBA,wBAAgB;;IAAEC,gBAAgB;eAAhBA,wBAAgB;;IAAEC,cAAc;eAAdA,sBAAc;;IAAEC,MAAM;eAANA,cAAM;;;uBANd;2BAE/B;yBACN;wBACD;uBACD;wBAC6D;yBAC3D;4BACwB;2BAEF;4BACuB;sBACR;sBAatD;4BAiBA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { GridShim, grid, gridClassName, useGridStyles } from './components/Grid/index';\nexport type { GridShimProps } from './components/Grid/index';\nexport { FormFieldShim } from './components/FormField';\nexport { Segment } from './components/Segment';\nexport { slider } from './components/Slider';\nexport { Video, videoClassName } from './components/Video';\nexport { input } from './components/Input';\nexport { v0Icon, v9CustomSizeIcon, v9DisabledCursor, v9HoverClasses, v9Icon } from './components/Button';\nexport { spinner } from './components/Spinner';\nexport { StyledText, styledTextClassName } from './components/StyledText';\nexport type { StyledTextProps, StyledTextSlots } from './components/StyledText';\nexport { Primitive, primitiveClassName } from './components/Primitive';\nexport { ItemLayout, itemLayoutClassName, useItemLayoutStyles } from './components/ItemLayout';\nexport { Flex, flexClassName, flexItem, useFlexStyles } from './components/Flex';\nexport {\n  List,\n  ListItem,\n  listClassNames,\n  listItemClassNames,\n  renderListItem_unstable,\n  renderList_unstable,\n  useListItemStyles_unstable,\n  useListItem_unstable,\n  useListSelection,\n  useListStyles_unstable,\n  useList_unstable,\n} from './components/List';\nexport type { ListItemProps, ListItemSlots, ListItemState, ListProps, ListSlots, ListState } from './components/List';\nexport {\n  Attachment,\n  AttachmentAction,\n  AttachmentBody,\n  AttachmentDescription,\n  AttachmentHeader,\n  AttachmentIcon,\n  attachmentClassName,\n  attachmentActionClassName,\n  attachmentBodyClassName,\n  attachmentDescriptionClassName,\n  attachmentHeaderClassName,\n  attachmentIconClassName,\n  attachmentProgressBarClassName,\n  attachmentProgressContainerClassName,\n} from './components/Attachment';\n\nexport type {\n  AttachmentProps,\n  AttachmentActionProps,\n  AttachmentBodyProps,\n  AttachmentDescriptionProps,\n  AttachmentHeaderProps,\n  AttachmentIconProps,\n} from './components/Attachment';\n"],"names":["Attachment","AttachmentAction","AttachmentBody","AttachmentDescription","AttachmentHeader","AttachmentIcon","Flex","FormFieldShim","GridShim","ItemLayout","List","ListItem","Primitive","Segment","StyledText","Video","attachmentActionClassName","attachmentBodyClassName","attachmentClassName","attachmentDescriptionClassName","attachmentHeaderClassName","attachmentIconClassName","attachmentProgressBarClassName","attachmentProgressContainerClassName","flexClassName","flexItem","grid","gridClassName","input","itemLayoutClassName","listClassNames","listItemClassNames","primitiveClassName","renderListItem_unstable","renderList_unstable","slider","spinner","styledTextClassName","useFlexStyles","useGridStyles","useItemLayoutStyles","useListItemStyles_unstable","useListItem_unstable","useListSelection","useListStyles_unstable","useList_unstable","v0Icon","v9CustomSizeIcon","v9DisabledCursor","v9HoverClasses","v9Icon","videoClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA6BEA,UAAU;eAAVA,sBAAU;;IACVC,gBAAgB;eAAhBA,4BAAgB;;IAChBC,cAAc;eAAdA,0BAAc;;IACdC,qBAAqB;eAArBA,iCAAqB;;IACrBC,gBAAgB;eAAhBA,4BAAgB;;IAChBC,cAAc;eAAdA,0BAAc;;IArBPC,IAAI;eAAJA,UAAI;;IAXJC,aAAa;eAAbA,wBAAa;;IAFbC,QAAQ;eAARA,eAAQ;;IAYRC,UAAU;eAAVA,sBAAU;;IAGjBC,IAAI;eAAJA,UAAI;;IACJC,QAAQ;eAARA,cAAQ;;IALDC,SAAS;eAATA,oBAAS;;IARTC,OAAO;eAAPA,gBAAO;;IAMPC,UAAU;eAAVA,sBAAU;;IAJVC,KAAK;eAALA,YAAK;;IA+BZC,yBAAyB;eAAzBA,qCAAyB;;IACzBC,uBAAuB;eAAvBA,mCAAuB;;IAFvBC,mBAAmB;eAAnBA,+BAAmB;;IAGnBC,8BAA8B;eAA9BA,0CAA8B;;IAC9BC,yBAAyB;eAAzBA,qCAAyB;;IACzBC,uBAAuB;eAAvBA,mCAAuB;;IACvBC,8BAA8B;eAA9BA,0CAA8B;;IAC9BC,oCAAoC;eAApCA,gDAAoC;;IA7BvBC,aAAa;eAAbA,mBAAa;;IAAEC,QAAQ;eAARA,cAAQ;;IAbnBC,IAAI;eAAJA,WAAI;;IAAEC,aAAa;eAAbA,oBAAa;;IAM7BC,KAAK;eAALA,YAAK;;IAMOC,mBAAmB;eAAnBA,+BAAmB;;IAKtCC,cAAc;eAAdA,oBAAc;;IACdC,kBAAkB;eAAlBA,wBAAkB;;IAPAC,kBAAkB;eAAlBA,6BAAkB;;IAQpCC,uBAAuB;eAAvBA,6BAAuB;;IACvBC,mBAAmB;eAAnBA,yBAAmB;;IAhBZC,MAAM;eAANA,cAAM;;IAINC,OAAO;eAAPA,gBAAO;;IACKC,mBAAmB;eAAnBA,+BAAmB;;IAIAC,aAAa;eAAbA,mBAAa;;IAbbC,aAAa;eAAbA,oBAAa;;IAYXC,mBAAmB;eAAnBA,+BAAmB;;IAS3DC,0BAA0B;eAA1BA,gCAA0B;;IAC1BC,oBAAoB;eAApBA,0BAAoB;;IACpBC,gBAAgB;eAAhBA,sBAAgB;;IAChBC,sBAAsB;eAAtBA,4BAAsB;;IACtBC,gBAAgB;eAAhBA,sBAAgB;;IAlBTC,MAAM;eAANA,cAAM;;IAAEC,gBAAgB;eAAhBA,wBAAgB;;IAAEC,gBAAgB;eAAhBA,wBAAgB;;IAAEC,cAAc;eAAdA,sBAAc;;IAAEC,MAAM;eAANA,cAAM;;IAF3DC,cAAc;eAAdA,qBAAc;;;uBAL+B;2BAE/B;yBACN;wBACD;uBACe;uBAChB;wBAC6D;yBAC3D;4BACwB;2BAEF;4BACuB;sBACR;sBAatD;4BAiBA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-migration-v0-v9",
-  "version": "9.2.7",
+  "version": "9.2.8",
   "description": "Migration shim components and methods for hybrid v0/v9 applications building on Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,13 +33,13 @@
     "@fluentui/scripts-storybook": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.13.2",
-    "@fluentui/react-components": "^9.54.10",
+    "@fluentui/react-aria": "^9.13.3",
+    "@fluentui/react-components": "^9.54.11",
     "@fluentui/react-context-selector": "^9.1.65",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.0.42",
     "@fluentui/react-shared-contexts": "^9.20.0",
-    "@fluentui/react-tabster": "^9.22.3",
+    "@fluentui/react-tabster": "^9.22.4",
     "@fluentui/react-theme": "^9.1.19",
     "@fluentui/react-utilities": "^9.18.13",
     "@griffel/react": "^1.5.22",