@azure/communication-react 1.5.1-beta.4 → 1.5.1-beta.5

package/dist/dist-esm/react-components/src/components/VerticalGallery.js

@@ -18,7 +18,10 @@ import { bucketize } from './utils/overFlowGalleriesUtils';
 export const VerticalGallery = (props) => {
     const { children, styles, childrenPerPage, onFetchTilesToRender } = props;
     const [page, setPage] = useState(1);
-    const [buttonState, setButtonState] = useState({ previous: true, next: true });
+    const [buttonState, setButtonState] = useState({
+        previous: true,
+        next: true
+    });
     /* @conditional-compile-remove(vertical-gallery) */
     const ids = useIdentifiers();
     const numberOfChildren = React.Children.count(children);
@@ -34,7 +37,7 @@ export const VerticalGallery = (props) => {
     const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;
     const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
     const childrenOnCurrentPage = useMemo(() => {
-        return indexesArray[clippedPage - 1].map((index) => {
+        return indexesArray[clippedPage - 1].map(index => {
             return React.Children.toArray(children)[index];
         });
     }, [indexesArray, clippedPage, children]);
@@ -51,31 +54,44 @@ export const VerticalGallery = (props) => {
     useEffect(() => {
         if (page > 1 && page < lastPage && showButtons) {
             // we are somewhere in between first and last pages.
-            setButtonState({ previous: false, next: false });
+            setButtonState({
+                previous: false,
+                next: false
+            });
         }
         else if (page === 1 && showButtons) {
             // we are on the first page.
-            setButtonState({ previous: true, next: false });
+            setButtonState({
+                previous: true,
+                next: false
+            });
         }
         else if (page === lastPage && showButtons) {
             // we are on the last page.
-            setButtonState({ previous: false, next: true });
+            setButtonState({
+                previous: false,
+                next: true
+            });
         }
     }, [page, numberOfChildren, lastPage, showButtons]);
     const childContainerStyle = useMemo(() => {
-        return { root: childrenContainerStyle(2) };
+        return {
+            root: childrenContainerStyle(2)
+        };
     }, []);
     const childrenStyles = useMemo(() => {
-        return { root: styles === null || styles === void 0 ? void 0 : styles.children };
+        return {
+            root: styles === null || styles === void 0 ? void 0 : styles.children
+        };
     }, [styles === null || styles === void 0 ? void 0 : styles.children]);
     if (childrenPerPage <= 0) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(Stack, { className: mergeStyles(rootStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
+    return React.createElement(Stack, { className: mergeStyles(rootStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
         React.createElement(Stack, { styles: childContainerStyle }, childrenOnCurrentPage === null || childrenOnCurrentPage === void 0 ? void 0 : childrenOnCurrentPage.map((child, i) => {
-            return (React.createElement(Stack.Item, { key: i, styles: childrenStyles, "data-ui-id": ids.verticalGalleryVideoTile }, child));
+            return React.createElement(Stack.Item, { key: i, styles: childrenStyles, "data-ui-id": ids.verticalGalleryVideoTile }, child);
         })),
-        showButtons && (React.createElement(VerticalGalleryControlBar, { buttonsDisabled: buttonState, onPreviousButtonClick: onPreviousButtonClick, onNextButtonClick: onNextButtonClick, totalPages: lastPage, currentPage: page }))));
+        showButtons && React.createElement(VerticalGalleryControlBar, { buttonsDisabled: buttonState, onPreviousButtonClick: onPreviousButtonClick, onNextButtonClick: onNextButtonClick, totalPages: lastPage, currentPage: page }));
 };
 const VerticalGalleryControlBar = (props) => {
     const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;
@@ -96,18 +112,17 @@ const VerticalGalleryControlBar = (props) => {
     const nextButtonsStyles = useMemo(() => {
         return mergeStyles(leftRightButtonStyles(theme), styles === null || styles === void 0 ? void 0 : styles.nextButton);
     }, [styles === null || styles === void 0 ? void 0 : styles.nextButton, theme]);
-    const controlBarSpacing = { childrenGap: '0.5rem' };
-    return (React.createElement(Stack, { horizontalAlign: "center", tokens: controlBarSpacing, horizontal: true, className: pageCounterContainerStyles },
+    const controlBarSpacing = {
+        childrenGap: '0.5rem'
+    };
+    return React.createElement(Stack, { horizontalAlign: "center", tokens: controlBarSpacing, horizontal: true, className: pageCounterContainerStyles },
         React.createElement(DefaultButton, { className: previousButtonSyles, onClick: onPreviousButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.previous, 
-            /* @conditional-compile-remove(vertical-gallery) */
-            ariaLabel: strings.leftNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryLeftNavButton },
+            /* @conditional-compile-remove(vertical-gallery) */ ariaLabel: strings.leftNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryLeftNavButton },
             React.createElement(Icon, { iconName: "VerticalGalleryLeftButton", styles: navIconStyles })),
         React.createElement(Text
-        /* @conditional-compile-remove(vertical-gallery) */
-        , { "data-ui-id": ids.verticalGalleryPageCounter, className: pageCounterStyles }, `${currentPage} / ${totalPages}`),
+        /* @conditional-compile-remove(vertical-gallery) */ , { "data-ui-id": ids.verticalGalleryPageCounter, className: pageCounterStyles }, `${currentPage} / ${totalPages}`),
         React.createElement(DefaultButton, { className: nextButtonsStyles, onClick: onNextButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.next, 
-            /* @conditional-compile-remove(vertical-gallery) */
-            ariaLabel: strings.rightNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryRightNavButton },
-            React.createElement(Icon, { iconName: "VerticalGalleryRightButton", styles: navIconStyles }))));
+            /* @conditional-compile-remove(vertical-gallery) */ ariaLabel: strings.rightNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryRightNavButton },
+            React.createElement(Icon, { iconName: "VerticalGalleryRightButton", styles: navIconStyles })));
 };
 //# sourceMappingURL=VerticalGallery.js.map

package/dist/dist-esm/react-components/src/components/VerticalGallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { useIdentifiers } from '../identifiers';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport {\n  childrenContainerStyle,\n  pageNavigationControlBarContainerStyle,\n  participantPageCounter,\n  leftRightButtonStyles,\n  navIconStyles,\n  rootStyle\n} from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/**\n * Styles for the VerticalGallery component\n *\n * @beta\n */\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n  /** Styles for each video tile in the vertical gallery */\n  children?: IStyle;\n  /** Styles for the verticalGallery control bar */\n  controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * Strings for localization of the vertical gallery.\n *\n * @beta\n */\nexport interface VerticalGalleryStrings {\n  /** Aria label for the left page navigation button */\n  leftNavButtonAriaLabel?: string;\n  /** Aria label for the right page navigation button */\n  rightNavButtonAriaLabel?: string;\n}\n\n/**\n * Styles for the control bar inside the VerticalGallery component\n *\n * @beta\n */\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n  /**\n   * styles for the next button in the VerticalGalleryControlBar\n   */\n  nextButton?: IStyle;\n  /**\n   * Styles for the previous button in the VerticalGalleryControlBar\n   */\n  previousButton?: IStyle;\n  /**\n   * Styles for the counter in the VerticalGalleryControlBar\n   */\n  counter?: IStyle;\n}\n/**\n * Props for the VerticalGallery component\n *\n * @beta\n */\nexport interface VerticalGalleryProps {\n  /** Video tiles for the remote participants in the vertical gallery */\n  children: React.ReactNode;\n  /** Max number of children per page in the vertical Gallery */\n  childrenPerPage: number;\n  /** Styles to customize the vertical gallery */\n  styles?: VerticalGalleryStyles;\n  /** helper function to choose which tiles to give video to. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\ninterface VerticalGalleryControlBarProps {\n  onNextButtonClick: () => void;\n  onPreviousButtonClick: () => void;\n  buttonsDisabled: { next: boolean; previous: boolean };\n  totalPages: number;\n  currentPage: number;\n  styles?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n *\n * @beta\n */\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n  const { children, styles, childrenPerPage, onFetchTilesToRender } = props;\n\n  const [page, setPage] = useState(1);\n  const [buttonState, setButtonState] = useState<{ previous: boolean; next: boolean }>({ previous: true, next: true });\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const ids = useIdentifiers();\n\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page - 1]);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n\n  const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n  const childrenOnCurrentPage = useMemo(() => {\n    return indexesArray[clippedPage - 1].map((index) => {\n      return React.Children.toArray(children)[index];\n    });\n  }, [indexesArray, clippedPage, children]);\n\n  const showButtons = numberOfChildren > childrenPerPage;\n\n  const onPreviousButtonClick = (): void => {\n    setPage(page - 1);\n  };\n  const onNextButtonClick = (): void => {\n    setPage(page + 1);\n  };\n\n  if (page > lastPage && lastPage > 0) {\n    setPage(lastPage);\n  }\n\n  useEffect(() => {\n    if (page > 1 && page < lastPage && showButtons) {\n      // we are somewhere in between first and last pages.\n      setButtonState({ previous: false, next: false });\n    } else if (page === 1 && showButtons) {\n      // we are on the first page.\n      setButtonState({ previous: true, next: false });\n    } else if (page === lastPage && showButtons) {\n      // we are on the last page.\n      setButtonState({ previous: false, next: true });\n    }\n  }, [page, numberOfChildren, lastPage, showButtons]);\n\n  const childContainerStyle = useMemo(() => {\n    return { root: childrenContainerStyle(2) };\n  }, []);\n\n  const childrenStyles = useMemo(() => {\n    return { root: styles?.children };\n  }, [styles?.children]);\n\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n\n  return (\n    <Stack className={mergeStyles(rootStyle, styles?.root)}>\n      <Stack styles={childContainerStyle}>\n        {childrenOnCurrentPage?.map((child, i) => {\n          return (\n            <Stack.Item\n              key={i}\n              styles={childrenStyles}\n              /* @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.verticalGalleryVideoTile}\n            >\n              {child}\n            </Stack.Item>\n          );\n        })}\n      </Stack>\n      {showButtons && (\n        <VerticalGalleryControlBar\n          buttonsDisabled={buttonState}\n          onPreviousButtonClick={onPreviousButtonClick}\n          onNextButtonClick={onNextButtonClick}\n          totalPages={lastPage}\n          currentPage={page}\n        />\n      )}\n    </Stack>\n  );\n};\n\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n  const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;\n  const theme = useTheme();\n  /* @conditional-compile-remove(vertical-gallery) */\n  const ids = useIdentifiers();\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const strings = useLocale().strings.VerticalGallery;\n\n  const pageCounterContainerStyles = useMemo(() => {\n    return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n  }, [styles?.root]);\n\n  const previousButtonSyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n  }, [styles?.previousButton, theme]);\n\n  const pageCounterStyles = useMemo(() => {\n    return mergeStyles(participantPageCounter, styles?.counter);\n  }, [styles?.counter]);\n\n  const nextButtonsStyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n  }, [styles?.nextButton, theme]);\n\n  const controlBarSpacing = { childrenGap: '0.5rem' };\n\n  return (\n    <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n      <DefaultButton\n        className={previousButtonSyles}\n        onClick={onPreviousButtonClick}\n        disabled={buttonsDisabled?.previous}\n        /* @conditional-compile-remove(vertical-gallery) */\n        ariaLabel={strings.leftNavButtonAriaLabel}\n        /* @conditional-compile-remove(vertical-gallery) */\n        data-ui-id={ids.overflowGalleryLeftNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n      </DefaultButton>\n      <Text\n        /* @conditional-compile-remove(vertical-gallery) */\n        data-ui-id={ids.verticalGalleryPageCounter}\n        className={pageCounterStyles}\n      >{`${currentPage} / ${totalPages}`}</Text>\n      <DefaultButton\n        className={nextButtonsStyles}\n        onClick={onNextButtonClick}\n        disabled={buttonsDisabled?.next}\n        /* @conditional-compile-remove(vertical-gallery) */\n        ariaLabel={strings.rightNavButtonAriaLabel}\n        /* @conditional-compile-remove(vertical-gallery) */\n        data-ui-id={ids.overflowGalleryRightNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n      </DefaultButton>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAU,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,mDAAmD;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,mDAAmD;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,sBAAsB,EAAE,sCAAsC,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC1L,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAwE3D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EACJ,QAAQ,EACR,MAAM,EACN,eAAe,EACf,oBAAoB,EACrB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAG3C;QACD,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,IAAI;KACX,CAAC,CAAC;IAEH,mDAAmD;IACnD,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,CAAC;IAC/D,MAAM,YAAY,GAAe,OAAO,CAAC,GAAG,EAAE;QAC5C,OAAO,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,eAAe,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,oBAAoB,IAAI,YAAY,EAAE;YACxC,oBAAoB,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC;SAC9C;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC,CAAC;IAC/C,MAAM,uBAAuB,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC;IAC7D,MAAM,WAAW,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrF,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,OAAO,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YAC/C,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;QACjD,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,gBAAgB,GAAG,eAAe,CAAC;IACvD,MAAM,qBAAqB,GAAG,GAAS,EAAE;QACvC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,GAAS,EAAE;QACnC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,IAAI,IAAI,GAAG,QAAQ,IAAI,QAAQ,GAAG,CAAC,EAAE;QACnC,OAAO,CAAC,QAAQ,CAAC,CAAC;KACnB;IACD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,QAAQ,IAAI,WAAW,EAAE;YAC9C,oDAAoD;YACpD,cAAc,CAAC;gBACb,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,KAAK;aACZ,CAAC,CAAC;SACJ;aAAM,IAAI,IAAI,KAAK,CAAC,IAAI,WAAW,EAAE;YACpC,4BAA4B;YAC5B,cAAc,CAAC;gBACb,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,KAAK;aACZ,CAAC,CAAC;SACJ;aAAM,IAAI,IAAI,KAAK,QAAQ,IAAI,WAAW,EAAE;YAC3C,2BAA2B;YAC3B,cAAc,CAAC;gBACb,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,IAAI;aACX,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IACpD,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO;YACL,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC;SAChC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO;YACL,IAAI,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ;SACvB,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,CAAC,CAAC;IACvB,IAAI,eAAe,IAAI,CAAC,EAAE;QACxB,OAAO,yCAAK,CAAC;KACd;IACD,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,SAAS,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC;QACzD,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB,IAC/B,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,OAAO,oBAAC,KAAK,CAAC,IAAI,IAAC,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,cAAc,gBACe,GAAG,CAAC,wBAAwB,IACrF,KAAK,CACK,CAAC;QACpB,CAAC,CAAC,CACM;QACP,WAAW,IAAI,oBAAC,yBAAyB,IAAC,eAAe,EAAE,WAAW,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,GAAI,CAClM,CAAC;AACb,CAAC,CAAC;AACF,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IACvF,MAAM,EACJ,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,WAAW,EACX,UAAU,EACV,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,mDAAmD;IACnD,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAE7B,mDAAmD;IACnD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IACpD,MAAM,0BAA0B,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9C,OAAO,WAAW,CAAC,sCAAsC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC,CAAC;IACnB,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC;IACpC,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,WAAW,CAAC,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,CAAC,CAAC;IACtB,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAChC,MAAM,iBAAiB,GAAG;QACxB,WAAW,EAAE,QAAQ;KACtB,CAAC;IACF,OAAO,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,MAAM,EAAE,iBAAiB,EAAE,UAAU,QAAC,SAAS,EAAE,0BAA0B;QAC9G,oBAAC,aAAa,IAAC,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ;YACpH,mDAAmD,CAAC,SAAS,EAAE,OAAO,CAAC,sBAAsB,gBAC7B,GAAG,CAAC,4BAA4B;YAC5F,oBAAC,IAAI,IAAC,QAAQ,EAAC,2BAA2B,EAAC,MAAM,EAAE,aAAa,GAAI,CACtD;QAChB,oBAAC,IAAI;QACP,mDAAmD,mBAAa,GAAG,CAAC,0BAA0B,EAAE,SAAS,EAAE,iBAAiB,IAAG,GAAG,WAAW,MAAM,UAAU,EAAE,CAAQ;QACrK,oBAAC,aAAa,IAAC,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,IAAI;YAC1G,mDAAmD,CAAC,SAAS,EAAE,OAAO,CAAC,uBAAuB,gBAC9B,GAAG,CAAC,6BAA6B;YAC7F,oBAAC,IAAI,IAAC,QAAQ,EAAC,4BAA4B,EAAC,MAAM,EAAE,aAAa,GAAI,CACvD,CACV,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { useIdentifiers } from '../identifiers';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { childrenContainerStyle, pageNavigationControlBarContainerStyle, participantPageCounter, leftRightButtonStyles, navIconStyles, rootStyle } from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/**\n * Styles for the VerticalGallery component\n *\n * @beta\n */\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n  /** Styles for each video tile in the vertical gallery */\n  children?: IStyle;\n  /** Styles for the verticalGallery control bar */\n  controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * Strings for localization of the vertical gallery.\n *\n * @beta\n */\nexport interface VerticalGalleryStrings {\n  /** Aria label for the left page navigation button */\n  leftNavButtonAriaLabel?: string;\n  /** Aria label for the right page navigation button */\n  rightNavButtonAriaLabel?: string;\n}\n\n/**\n * Styles for the control bar inside the VerticalGallery component\n *\n * @beta\n */\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n  /**\n   * styles for the next button in the VerticalGalleryControlBar\n   */\n  nextButton?: IStyle;\n  /**\n   * Styles for the previous button in the VerticalGalleryControlBar\n   */\n  previousButton?: IStyle;\n  /**\n   * Styles for the counter in the VerticalGalleryControlBar\n   */\n  counter?: IStyle;\n}\n/**\n * Props for the VerticalGallery component\n *\n * @beta\n */\nexport interface VerticalGalleryProps {\n  /** Video tiles for the remote participants in the vertical gallery */\n  children: React.ReactNode;\n  /** Max number of children per page in the vertical Gallery */\n  childrenPerPage: number;\n  /** Styles to customize the vertical gallery */\n  styles?: VerticalGalleryStyles;\n  /** helper function to choose which tiles to give video to. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}\ninterface VerticalGalleryControlBarProps {\n  onNextButtonClick: () => void;\n  onPreviousButtonClick: () => void;\n  buttonsDisabled: {\n    next: boolean;\n    previous: boolean;\n  };\n  totalPages: number;\n  currentPage: number;\n  styles?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n *\n * @beta\n */\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n  const {\n    children,\n    styles,\n    childrenPerPage,\n    onFetchTilesToRender\n  } = props;\n  const [page, setPage] = useState(1);\n  const [buttonState, setButtonState] = useState<{\n    previous: boolean;\n    next: boolean;\n  }>({\n    previous: true,\n    next: true\n  });\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const ids = useIdentifiers();\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page - 1]);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n  const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n  const childrenOnCurrentPage = useMemo(() => {\n    return indexesArray[clippedPage - 1].map(index => {\n      return React.Children.toArray(children)[index];\n    });\n  }, [indexesArray, clippedPage, children]);\n  const showButtons = numberOfChildren > childrenPerPage;\n  const onPreviousButtonClick = (): void => {\n    setPage(page - 1);\n  };\n  const onNextButtonClick = (): void => {\n    setPage(page + 1);\n  };\n  if (page > lastPage && lastPage > 0) {\n    setPage(lastPage);\n  }\n  useEffect(() => {\n    if (page > 1 && page < lastPage && showButtons) {\n      // we are somewhere in between first and last pages.\n      setButtonState({\n        previous: false,\n        next: false\n      });\n    } else if (page === 1 && showButtons) {\n      // we are on the first page.\n      setButtonState({\n        previous: true,\n        next: false\n      });\n    } else if (page === lastPage && showButtons) {\n      // we are on the last page.\n      setButtonState({\n        previous: false,\n        next: true\n      });\n    }\n  }, [page, numberOfChildren, lastPage, showButtons]);\n  const childContainerStyle = useMemo(() => {\n    return {\n      root: childrenContainerStyle(2)\n    };\n  }, []);\n  const childrenStyles = useMemo(() => {\n    return {\n      root: styles?.children\n    };\n  }, [styles?.children]);\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n  return <Stack className={mergeStyles(rootStyle, styles?.root)}>\n      <Stack styles={childContainerStyle}>\n        {childrenOnCurrentPage?.map((child, i) => {\n        return <Stack.Item key={i} styles={childrenStyles}\n        /* @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.verticalGalleryVideoTile}>\n              {child}\n            </Stack.Item>;\n      })}\n      </Stack>\n      {showButtons && <VerticalGalleryControlBar buttonsDisabled={buttonState} onPreviousButtonClick={onPreviousButtonClick} onNextButtonClick={onNextButtonClick} totalPages={lastPage} currentPage={page} />}\n    </Stack>;\n};\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n  const {\n    onNextButtonClick,\n    onPreviousButtonClick,\n    buttonsDisabled,\n    currentPage,\n    totalPages,\n    styles\n  } = props;\n  const theme = useTheme();\n  /* @conditional-compile-remove(vertical-gallery) */\n  const ids = useIdentifiers();\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const strings = useLocale().strings.VerticalGallery;\n  const pageCounterContainerStyles = useMemo(() => {\n    return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n  }, [styles?.root]);\n  const previousButtonSyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n  }, [styles?.previousButton, theme]);\n  const pageCounterStyles = useMemo(() => {\n    return mergeStyles(participantPageCounter, styles?.counter);\n  }, [styles?.counter]);\n  const nextButtonsStyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n  }, [styles?.nextButton, theme]);\n  const controlBarSpacing = {\n    childrenGap: '0.5rem'\n  };\n  return <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n      <DefaultButton className={previousButtonSyles} onClick={onPreviousButtonClick} disabled={buttonsDisabled?.previous}\n    /* @conditional-compile-remove(vertical-gallery) */ ariaLabel={strings.leftNavButtonAriaLabel}\n    /* @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.overflowGalleryLeftNavButton}>\n        <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n      </DefaultButton>\n      <Text\n    /* @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.verticalGalleryPageCounter} className={pageCounterStyles}>{`${currentPage} / ${totalPages}`}</Text>\n      <DefaultButton className={nextButtonsStyles} onClick={onNextButtonClick} disabled={buttonsDisabled?.next}\n    /* @conditional-compile-remove(vertical-gallery) */ ariaLabel={strings.rightNavButtonAriaLabel}\n    /* @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.overflowGalleryRightNavButton}>\n        <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n      </DefaultButton>\n    </Stack>;\n};"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/PresetVideoEffectsItems.js

@@ -54,9 +54,7 @@ const deriveProps = (props, fallbacks) => {
     const tooltipProps = (_c = props.tooltipProps) !== null && _c !== void 0 ? _c : {
         content: (_d = props.title) !== null && _d !== void 0 ? _d : fallbacks.tooltipContent
     };
-    const ariaLabel = ((_e = props.ariaLabel) !== null && _e !== void 0 ? _e : typeof ((_f = props.tooltipProps) === null || _f === void 0 ? void 0 : _f.content) === 'string')
-        ? typeof ((_g = props.tooltipProps) === null || _g === void 0 ? void 0 : _g.content)
-        : (_h = props.title) !== null && _h !== void 0 ? _h : fallbacks.ariaLabel;
+    const ariaLabel = ((_e = props.ariaLabel) !== null && _e !== void 0 ? _e : typeof ((_f = props.tooltipProps) === null || _f === void 0 ? void 0 : _f.content) === 'string') ? typeof ((_g = props.tooltipProps) === null || _g === void 0 ? void 0 : _g.content) : (_h = props.title) !== null && _h !== void 0 ? _h : fallbacks.ariaLabel;
     return Object.assign(Object.assign({}, props), { iconProps,
         title,
         tooltipProps,

package/dist/dist-esm/react-components/src/components/VideoEffects/PresetVideoEffectsItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresetVideoEffectsItems.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/PresetVideoEffectsItems.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AAE/E;;;;GAIG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC1F,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,MAAM;QACb,cAAc,EAAE,mBAAmB;QACnC,SAAS,EAAE,mBAAmB;KAC/B,CAAC,CAAC;IAEH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAClF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,iBAAiB;QACjC,SAAS,EAAE,iBAAiB;KAC7B,CAAC,CAAC;IAEH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAA6B,EAAe,EAAE;IACtF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,sBAAsB;QAChC,KAAK,EAAE,OAAO;QACd,cAAc,EAAE,yBAAyB;QACzC,SAAS,EAAE,yBAAyB;KACrC,CAAC,CAAC;IAEH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF,oDAAoD;AACpD,MAAM,WAAW,GAAG,CAClB,KAA6B,EAC7B,SAKC,EACuB,EAAE;;IAC1B,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI;QACnC,QAAQ,EAAE,SAAS,CAAC,QAAQ;KAC7B,CAAC;IACF,MAAM,KAAK,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,KAAK,CAAC;IAC7C,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,YAAY,mCAAI;QACzC,OAAO,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,cAAc;KACjD,CAAC;IACF,MAAM,SAAS,GACb,CAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA,KAAK,QAAQ;QAChE,CAAC,CAAC,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA;QACpC,CAAC,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,SAAS,CAAC;IAEzC,uCACK,KAAK,KACR,SAAS;QACT,KAAK;QACL,YAAY;QACZ,SAAS,IACT;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\n\n/**\n * 'None' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemNoBackground = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsNone',\n    title: 'None',\n    tooltipContent: 'Remove Background',\n    ariaLabel: 'Remove Background'\n  });\n\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/**\n * 'Blur' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemBlur = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsBlur',\n    title: 'Blurred',\n    tooltipContent: 'Blur Background',\n    ariaLabel: 'Blur Background'\n  });\n\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/**\n * 'Add Image' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemAddImage = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsAddImage',\n    title: 'Image',\n    tooltipContent: 'Upload Background Image',\n    ariaLabel: 'Upload Background Image'\n  });\n\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/** Applies fallbacks if props were not specified */\nconst deriveProps = (\n  props: _VideoEffectsItemProps,\n  fallbacks: {\n    iconName: string;\n    title: string;\n    tooltipContent: string;\n    ariaLabel: string;\n  }\n): _VideoEffectsItemProps => {\n  const iconProps = props.iconProps ?? {\n    iconName: fallbacks.iconName\n  };\n  const title = props.title ?? fallbacks.title;\n  const tooltipProps = props.tooltipProps ?? {\n    content: props.title ?? fallbacks.tooltipContent\n  };\n  const ariaLabel =\n    props.ariaLabel ?? typeof props.tooltipProps?.content === 'string'\n      ? typeof props.tooltipProps?.content\n      : props.title ?? fallbacks.ariaLabel;\n\n  return {\n    ...props,\n    iconProps,\n    title,\n    tooltipProps,\n    ariaLabel\n  };\n};\n"]}
+{"version":3,"file":"PresetVideoEffectsItems.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/PresetVideoEffectsItems.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AAE/E;;;;GAIG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC1F,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,MAAM;QACb,cAAc,EAAE,mBAAmB;QACnC,SAAS,EAAE,mBAAmB;KAC/B,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAClF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,iBAAiB;QACjC,SAAS,EAAE,iBAAiB;KAC7B,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAA6B,EAAe,EAAE;IACtF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,sBAAsB;QAChC,KAAK,EAAE,OAAO;QACd,cAAc,EAAE,yBAAyB;QACzC,SAAS,EAAE,yBAAyB;KACrC,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF,oDAAoD;AACpD,MAAM,WAAW,GAAG,CAAC,KAA6B,EAAE,SAKnD,EAA0B,EAAE;;IAC3B,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI;QACnC,QAAQ,EAAE,SAAS,CAAC,QAAQ;KAC7B,CAAC;IACF,MAAM,KAAK,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,KAAK,CAAC;IAC7C,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,YAAY,mCAAI;QACzC,OAAO,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,cAAc;KACjD,CAAC;IACF,MAAM,SAAS,GAAG,CAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA,KAAK,QAAQ,EAAC,CAAC,CAAC,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,SAAS,CAAC;IAC/J,uCACK,KAAK,KACR,SAAS;QACT,KAAK;QACL,YAAY;QACZ,SAAS,IACT;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\n\n/**\n * 'None' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemNoBackground = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsNone',\n    title: 'None',\n    tooltipContent: 'Remove Background',\n    ariaLabel: 'Remove Background'\n  });\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/**\n * 'Blur' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemBlur = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsBlur',\n    title: 'Blurred',\n    tooltipContent: 'Blur Background',\n    ariaLabel: 'Blur Background'\n  });\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/**\n * 'Add Image' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemAddImage = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsAddImage',\n    title: 'Image',\n    tooltipContent: 'Upload Background Image',\n    ariaLabel: 'Upload Background Image'\n  });\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/** Applies fallbacks if props were not specified */\nconst deriveProps = (props: _VideoEffectsItemProps, fallbacks: {\n  iconName: string;\n  title: string;\n  tooltipContent: string;\n  ariaLabel: string;\n}): _VideoEffectsItemProps => {\n  const iconProps = props.iconProps ?? {\n    iconName: fallbacks.iconName\n  };\n  const title = props.title ?? fallbacks.title;\n  const tooltipProps = props.tooltipProps ?? {\n    content: props.title ?? fallbacks.tooltipContent\n  };\n  const ariaLabel = props.ariaLabel ?? typeof props.tooltipProps?.content === 'string' ? typeof props.tooltipProps?.content : props.title ?? fallbacks.ariaLabel;\n  return {\n    ...props,\n    iconProps,\n    title,\n    tooltipProps,\n    ariaLabel\n  };\n};"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js

@@ -5,6 +5,7 @@ import { useWarnings } from '@fluentui/react-hooks';
 import React from 'react';
 import { chunk } from '../utils';
 import { _VideoEffectsItem } from './VideoEffectsItem';
+import { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';
 /**
  * Picker for choosing a Video Background Effect.
  *
@@ -32,13 +33,24 @@ export const _VideoBackgroundEffectsPicker = (props) => {
         setComponentControlledSelectedEffectKey(selectedEffectKey);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, selectedEffectKey);
     };
-    const convertedOptions = props.options.map((option) => (Object.assign({ isSelected: option.key === selectedEffect, onSelect: () => setSelectedEffect(option.key) }, option)));
-    const optionsByRow = props.itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, (_b = props.itemsPerRow) !== null && _b !== void 0 ? _b : 3);
-    return (React.createElement(Stack, { tokens: { childrenGap: '0.5rem' } },
+    const convertedOptions = props.options.map(option => (Object.assign({ isSelected: option.itemKey === selectedEffect, onSelect: () => setSelectedEffect(option.itemKey) }, option)));
+    const itemsPerRow = (_b = props.itemsPerRow) !== null && _b !== void 0 ? _b : 3;
+    const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);
+    // If the final row is not full, fill it with hidden items to ensure layout.
+    const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;
+    return React.createElement(Stack, { tokens: {
+            childrenGap: '0.5rem'
+        } },
         React.createElement(Label, { className: mergeStyles((_c = props.styles) === null || _c === void 0 ? void 0 : _c.label) }, props.label),
         optionsByRow.map((options, rowIndex) => {
             var _a;
-            return (React.createElement(Stack, { className: mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' } }, options.map((option) => (React.createElement(_VideoEffectsItem, Object.assign({}, option, { key: option.key }))))));
-        })));
+            return React.createElement(Stack, { className: mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: {
+                    childrenGap: '0.5rem'
+                }, "data-ui-id": "video-effects-picker-row" },
+                options.map(option => React.createElement(_VideoEffectsItem, Object.assign({}, option, { key: option.itemKey, itemKey: option.itemKey }))),
+                fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({
+                    length: fillCount
+                }).map((_, index) => React.createElement(Stack, { key: index, styles: hiddenVideoEffectsItemContainerStyles, "data-ui-id": "video-effects-hidden-item" })));
+        }));
 };
 //# sourceMappingURL=VideoBackgroundEffectsPicker.js.map

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AA2E/E;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAyC,EAAe,EAAE;;IACtG,MAAM,CAAC,oCAAoC,EAAE,uCAAuC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAEpG,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAElC,+EAA+E;IAC/E,WAAW,CAAC;QACV,IAAI,EAAE,8BAA8B;QACpC,KAAK;QACL,eAAe,EAAE;YACf,YAAY,EAAE,UAAU;YACxB,SAAS,EAAE,mBAAmB;YAC9B,gBAAgB,EAAE,0BAA0B;SAC7C;KACF,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,MAAA,KAAK,CAAC,iBAAiB,mCAAI,oCAAoC,CAAC;IACvF,MAAM,iBAAiB,GAAG,CAAC,iBAAyB,EAAQ,EAAE;;QAC5D,uCAAuC,CAAC,iBAAiB,CAAC,CAAC;QAC3D,MAAA,KAAK,CAAC,QAAQ,+CAAd,KAAK,EAAY,iBAAiB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAA6B,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,iBAC/E,UAAU,EAAE,MAAM,CAAC,GAAG,KAAK,cAAc,EACzC,QAAQ,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,IAC1C,MAAM,EACT,CAAC,CAAC;IAEJ,MAAM,YAAY,GAChB,KAAK,CAAC,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,EAAE,MAAA,KAAK,CAAC,WAAW,mCAAI,CAAC,CAAC,CAAC;IAEtG,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE;QACtC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,CAAC,IAAG,KAAK,CAAC,KAAK,CAAS;QACxE,YAAY,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;;YAAC,OAAA,CACvC,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,OAAO,CAAC,EAC7C,IAAI,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,EAClC,UAAU,QACV,GAAG,EAAE,QAAQ,EACb,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,IAEhC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,oBAAC,iBAAiB,oBAAK,MAAM,IAAE,GAAG,EAAE,MAAM,CAAC,GAAG,IAAI,CACnD,CAAC,CACI,CACT,CAAA;SAAA,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\n\n/**\n * Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerProps {\n  /**\n   * The options to display in the picker.\n   */\n  options: _VideoBackgroundEffectChoiceOption[];\n\n  /**\n   * The key of the current selected Video Background Effect.\n   * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n   */\n  selectedEffectKey?: string;\n\n  /**\n   * Callback to invoke when a Video Background Effect is selected.\n   * @param effectKey - The key of the Video Background Effect that was selected.\n   */\n  onChange?: (effectKey: string) => void;\n\n  /**\n   * The key of the Video Background Effect that is initially selected.\n   * Only provide this if the picker is an uncontrolled component;\n   * otherwise, use the `selectedEffectKey` property.\n   */\n  defaultSelectedEffectKey?: string;\n\n  /**\n   * The label to display for the picker.\n   */\n  label?: string;\n\n  /**\n   * The number of items to display per row.\n   * @default 3\n   */\n  itemsPerRow?: 'wrap' | number;\n\n  /**\n   * Styles for the picker.\n   */\n  styles?: _VideoBackgroundEffectsPickerStyles;\n}\n\n/**\n * Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/**\n * Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerStyles {\n  /**\n   * Styles for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the label.\n   */\n  label?: IStyle;\n\n  /**\n   * Styles for the root of each row element.\n   */\n  rowRoot?: IStyle;\n}\n\n/**\n * Picker for choosing a Video Background Effect.\n *\n * @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n *\n * @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n  const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<\n    string | undefined\n  >(props.defaultSelectedEffectKey);\n\n  // Warn the developer if they use the component in an incorrect controlled way.\n  useWarnings({\n    name: 'VideoBackgroundEffectsPicker',\n    props,\n    controlledUsage: {\n      onChangeProp: 'onChange',\n      valueProp: 'selectedEffectKey',\n      defaultValueProp: 'defaultSelectedEffectKey'\n    }\n  });\n\n  const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n  const setSelectedEffect = (selectedEffectKey: string): void => {\n    setComponentControlledSelectedEffectKey(selectedEffectKey);\n    props.onChange?.(selectedEffectKey);\n  };\n\n  const convertedOptions: _VideoEffectsItemProps[] = props.options.map((option) => ({\n    isSelected: option.key === selectedEffect,\n    onSelect: () => setSelectedEffect(option.key),\n    ...option\n  }));\n\n  const optionsByRow =\n    props.itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, props.itemsPerRow ?? 3);\n\n  return (\n    <Stack tokens={{ childrenGap: '0.5rem' }}>\n      <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n      {optionsByRow.map((options, rowIndex) => (\n        <Stack\n          className={mergeStyles(props.styles?.rowRoot)}\n          wrap={props.itemsPerRow === 'wrap'}\n          horizontal\n          key={rowIndex}\n          tokens={{ childrenGap: '0.5rem' }}\n        >\n          {options.map((option) => (\n            <_VideoEffectsItem {...option} key={option.key} />\n          ))}\n        </Stack>\n      ))}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EAAE,qCAAqC,EAAE,MAAM,2BAA2B,CAAC;AA2ElF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAyC,EAAe,EAAE;;IACtG,MAAM,CAAC,oCAAoC,EAAE,uCAAuC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAE3J,+EAA+E;IAC/E,WAAW,CAAC;QACV,IAAI,EAAE,8BAA8B;QACpC,KAAK;QACL,eAAe,EAAE;YACf,YAAY,EAAE,UAAU;YACxB,SAAS,EAAE,mBAAmB;YAC9B,gBAAgB,EAAE,0BAA0B;SAC7C;KACF,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,MAAA,KAAK,CAAC,iBAAiB,mCAAI,oCAAoC,CAAC;IACvF,MAAM,iBAAiB,GAAG,CAAC,iBAAyB,EAAQ,EAAE;;QAC5D,uCAAuC,CAAC,iBAAiB,CAAC,CAAC;QAC3D,MAAA,KAAK,CAAC,QAAQ,+CAAd,KAAK,EAAY,iBAAiB,CAAC,CAAC;IACtC,CAAC,CAAC;IACF,MAAM,gBAAgB,GAA6B,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,iBAC7E,UAAU,EAAE,MAAM,CAAC,OAAO,KAAK,cAAc,EAC7C,QAAQ,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC,IAC9C,MAAM,EACT,CAAC,CAAC;IACJ,MAAM,WAAW,GAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IAExG,4EAA4E;IAC5E,MAAM,SAAS,GAAG,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;IAC1G,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE;YACpB,WAAW,EAAE,QAAQ;SACtB;QACG,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,CAAC,IAAG,KAAK,CAAC,KAAK,CAAS;QACxE,YAAY,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;;YAAC,OAAA,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,OAAO,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,EAAE,UAAU,QAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE;oBACrK,WAAW,EAAE,QAAQ;iBACtB,gBAAa,0BAA0B;gBACjC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,oBAAC,iBAAiB,oBAAK,MAAM,IAAE,GAAG,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,CAAC;gBACtG,SAAS,GAAG,CAAC,IAAI,QAAQ,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;oBACvE,MAAM,EAAE,SAAS;iBAClB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,qCAAqC,gBAAa,2BAA2B,GAAG,CAAC,CACvH,CAAA;SAAA,CAAC,CACL,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerProps {\n  /**\n   * The options to display in the picker.\n   */\n  options: _VideoBackgroundEffectChoiceOption[];\n\n  /**\n   * The key of the current selected Video Background Effect.\n   * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n   */\n  selectedEffectKey?: string;\n\n  /**\n   * Callback to invoke when a Video Background Effect is selected.\n   * @param effectKey - The key of the Video Background Effect that was selected.\n   */\n  onChange?: (effectKey: string) => void;\n\n  /**\n   * The key of the Video Background Effect that is initially selected.\n   * Only provide this if the picker is an uncontrolled component;\n   * otherwise, use the `selectedEffectKey` property.\n   */\n  defaultSelectedEffectKey?: string;\n\n  /**\n   * The label to display for the picker.\n   */\n  label?: string;\n\n  /**\n   * The number of items to display per row.\n   * @default 3\n   */\n  itemsPerRow?: 'wrap' | number;\n\n  /**\n   * Styles for the picker.\n   */\n  styles?: _VideoBackgroundEffectsPickerStyles;\n}\n\n/**\n * Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/**\n * Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerStyles {\n  /**\n   * Styles for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the label.\n   */\n  label?: IStyle;\n\n  /**\n   * Styles for the root of each row element.\n   */\n  rowRoot?: IStyle;\n}\n\n/**\n * Picker for choosing a Video Background Effect.\n *\n * @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n *\n * @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n  const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<string | undefined>(props.defaultSelectedEffectKey);\n\n  // Warn the developer if they use the component in an incorrect controlled way.\n  useWarnings({\n    name: 'VideoBackgroundEffectsPicker',\n    props,\n    controlledUsage: {\n      onChangeProp: 'onChange',\n      valueProp: 'selectedEffectKey',\n      defaultValueProp: 'defaultSelectedEffectKey'\n    }\n  });\n  const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n  const setSelectedEffect = (selectedEffectKey: string): void => {\n    setComponentControlledSelectedEffectKey(selectedEffectKey);\n    props.onChange?.(selectedEffectKey);\n  };\n  const convertedOptions: _VideoEffectsItemProps[] = props.options.map(option => ({\n    isSelected: option.itemKey === selectedEffect,\n    onSelect: () => setSelectedEffect(option.itemKey),\n    ...option\n  }));\n  const itemsPerRow = props.itemsPerRow ?? 3;\n  const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n  // If the final row is not full, fill it with hidden items to ensure layout.\n  const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n  return <Stack tokens={{\n    childrenGap: '0.5rem'\n  }}>\n      <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n      {optionsByRow.map((options, rowIndex) => <Stack className={mergeStyles(props.styles?.rowRoot)} wrap={props.itemsPerRow === 'wrap'} horizontal key={rowIndex} tokens={{\n      childrenGap: '0.5rem'\n    }} data-ui-id=\"video-effects-picker-row\">\n          {options.map(option => <_VideoEffectsItem {...option} key={option.itemKey} itemKey={option.itemKey} />)}\n          {fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({\n        length: fillCount\n      }).map((_, index) => <Stack key={index} styles={hiddenVideoEffectsItemContainerStyles} data-ui-id=\"video-effects-hidden-item\" />)}\n        </Stack>)}\n    </Stack>;\n};"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.d.ts

@@ -12,7 +12,7 @@ export interface _VideoEffectsItemProps {
      * It must be unique within the set of options.
      * @example 'blur'
      */
-    key: string;
+    itemKey: string;
     /**
      * The text to display for the Video effects item.
      */

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js

@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 import { Icon, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';
 import React, { useCallback } from 'react';
+import { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';
 /**
  * A component for displaying a Video Background Effect Option.
  *
@@ -17,64 +18,22 @@ export const _VideoEffectsItem = (props) => {
         theme,
         isSelected,
         disabled,
-        backgroundImage,
-        backgroundPosition,
-        backgroundSize
+        backgroundImage
     }), [backgroundImage, disabled, isSelected, theme]);
-    return (React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
-        React.createElement(Stack, { key: props.key, className: mergeStyles((_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), verticalAlign: "center", horizontalAlign: "center", styles: containerStyles, onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.key); }, onKeyDown: disabled
-                ? undefined
-                : (e) => {
-                    var _a;
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.key);
-                    }
-                }, tabIndex: props.disabled ? -1 : 0, "aria-label": props.ariaLabel, "aria-disabled": props.disabled, role: "button" },
-            props.iconProps && (React.createElement(Stack.Item, { styles: { root: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.iconContainer } },
-                React.createElement(Icon, Object.assign({}, props.iconProps)))),
-            props.title && (React.createElement(Stack.Item, { styles: { root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.textContainer } },
-                React.createElement(Text, { variant: "small" }, props.title))))));
-};
-const backgroundPosition = 'center';
-const backgroundSize = 'cover';
-const videoEffectsItemContainerStyles = (args) => {
-    const borderDefaultThickness = '1px';
-    const borderActiveThickness = '2px';
-    return {
-        root: {
-            background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,
-            backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,
-            backgroundPosition: args.backgroundPosition,
-            backgroundSize: args.backgroundSize,
-            borderRadius: '0.25rem',
-            color: args.theme.palette.neutralPrimary,
-            cursor: args.disabled ? 'default' : 'pointer',
-            height: '3.375rem',
-            position: 'relative',
-            width: '4.83rem',
-            // Use :after to display a border element. This is used to prevent the background image
-            // resizing when the border thichkness is changed. We also want the border to be inside
-            // the frame of the container, i.e. we want it to expand inwards and not outwards when
-            // border thickness changes from hover/selection.
-            ':after': {
-                content: '""',
-                position: 'absolute',
-                boxSizing: 'border-box',
-                border: args.isSelected
-                    ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
-                    : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,
-                height: '100%',
-                width: '100%',
-                borderRadius: '0.25rem'
-            },
-            ':hover': {
-                ':after': {
-                    border: args.disabled && !args.isSelected
-                        ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`
-                        : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
+    return React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
+        React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), verticalAlign: "center", horizontalAlign: "center", styles: containerStyles, "data-ui-id": `video-effects-item`, onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, onKeyDown: disabled ? undefined : e => {
+                var _a;
+                if (e.key === 'Enter' || e.key === ' ') {
+                    (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey);
                 }
-            }
-        }
-    };
+            }, tabIndex: props.disabled ? -1 : 0, "aria-label": props.ariaLabel, "aria-disabled": props.disabled, role: "button" },
+            props.iconProps && React.createElement(Stack.Item, { styles: {
+                    root: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.iconContainer
+                } },
+                React.createElement(Icon, Object.assign({}, props.iconProps))),
+            props.title && React.createElement(Stack.Item, { styles: {
+                    root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.textContainer
+                } },
+                React.createElement(Text, { variant: "small" }, props.title))));
 };
 //# sourceMappingURL=VideoEffectsItem.js.map

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  Icon,\n  IIconProps,\n  IStackStyles,\n  IStyle,\n  ITheme,\n  ITooltipHostProps,\n  mergeStyles,\n  Stack,\n  Text,\n  TooltipHost,\n  useTheme\n} from '@fluentui/react';\nimport React, { useCallback } from 'react';\n\n/**\n * Props for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemProps {\n  /**\n   * The key of the Video Background Effect.\n   * This is used to identify the Video Background Effect and is returned in the onChange event.\n   * It must be unique within the set of options.\n   * @example 'blur'\n   */\n  key: string;\n\n  /**\n   * The text to display for the Video effects item.\n   */\n  title?: string;\n\n  /**\n   * Whether the Video effects item is currently in the selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to invoke when the Video effects item is selected.\n   */\n  onSelect?: (key: string) => void;\n\n  /**\n   * Whether the Video effects item is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * The icon to display for the Video effects item.\n   * @default undefined (no icon)\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Properties to have a Tooltip display when hovering over the Video effects item.\n   * @default undefined (no tooltip)\n   */\n  tooltipProps?: ITooltipHostProps;\n\n  /**\n   * Aria label for the Video effects item.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background to display for the Video effects item.\n   * @default undefined (no background image)\n   */\n  backgroundProps?: {\n    /**\n     * The URL of the background image.\n     */\n    url: string;\n  };\n\n  /**\n   * Styles for the Video effects item.\n   */\n  styles?: _VideoEffectsItemStyles;\n}\n\n/**\n * Styles for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemStyles {\n  /**\n   * Styles for the container of the Video effects item.\n   */\n  root: IStyle;\n\n  /**\n   * Styles for the container of the icon of the Video effects item.\n   */\n  iconContainer: IStyle;\n\n  /**\n   * Styles for the text container of the Video effects item.\n   */\n  textContainer: IStyle;\n}\n\n/**\n * A component for displaying a Video Background Effect Option.\n *\n * @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n  const theme = useTheme();\n  const isSelected = props.isSelected ?? false;\n  const disabled = props.disabled ?? false;\n  const backgroundImage = props.backgroundProps?.url;\n\n  const containerStyles = useCallback(\n    () =>\n      videoEffectsItemContainerStyles({\n        theme,\n        isSelected,\n        disabled,\n        backgroundImage,\n        backgroundPosition,\n        backgroundSize\n      }),\n    [backgroundImage, disabled, isSelected, theme]\n  );\n\n  return (\n    <TooltipHost {...props.tooltipProps}>\n      <Stack\n        key={props.key}\n        className={mergeStyles(props.styles?.root)}\n        verticalAlign=\"center\"\n        horizontalAlign=\"center\"\n        styles={containerStyles}\n        onClick={disabled ? undefined : () => props.onSelect?.(props.key)}\n        onKeyDown={\n          disabled\n            ? undefined\n            : (e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  props.onSelect?.(props.key);\n                }\n              }\n        }\n        tabIndex={props.disabled ? -1 : 0}\n        aria-label={props.ariaLabel}\n        aria-disabled={props.disabled}\n        role=\"button\"\n      >\n        {props.iconProps && (\n          <Stack.Item styles={{ root: props.styles?.iconContainer }}>\n            <Icon {...props.iconProps} />\n          </Stack.Item>\n        )}\n        {props.title && (\n          <Stack.Item styles={{ root: props.styles?.textContainer }}>\n            <Text variant=\"small\">{props.title}</Text>\n          </Stack.Item>\n        )}\n      </Stack>\n    </TooltipHost>\n  );\n};\n\nconst backgroundPosition = 'center';\nconst backgroundSize = 'cover';\n\nconst videoEffectsItemContainerStyles = (args: {\n  theme: ITheme;\n  isSelected: boolean;\n  disabled: boolean;\n  backgroundImage?: string;\n  backgroundPosition?: string;\n  backgroundSize?: string;\n}): IStackStyles => {\n  const borderDefaultThickness = '1px';\n  const borderActiveThickness = '2px';\n  return {\n    root: {\n      background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,\n      backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,\n      backgroundPosition: args.backgroundPosition,\n      backgroundSize: args.backgroundSize,\n      borderRadius: '0.25rem',\n      color: args.theme.palette.neutralPrimary,\n      cursor: args.disabled ? 'default' : 'pointer',\n      height: '3.375rem',\n      position: 'relative', // Used for absolute positioning of :after\n      width: '4.83rem',\n      // Use :after to display a border element. This is used to prevent the background image\n      // resizing when the border thichkness is changed. We also want the border to be inside\n      // the frame of the container, i.e. we want it to expand inwards and not outwards when\n      // border thickness changes from hover/selection.\n      ':after': {\n        content: '\"\"',\n        position: 'absolute',\n        boxSizing: 'border-box',\n        border: args.isSelected\n          ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n          : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,\n        height: '100%',\n        width: '100%',\n        borderRadius: '0.25rem'\n      },\n      ':hover': {\n        ':after': {\n          border:\n            args.disabled && !args.isSelected\n              ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`\n              : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n        }\n      }\n    }\n  };\n};\n"]}
+{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAyC,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC/H,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AA8F5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,+BAA+B,CAAC;QACxE,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IACpD,OAAO,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACtC,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,gBAAc,oBAAoB,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,+CAAd,KAAK,EAAY,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;;gBAC/R,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;oBACtC,MAAA,KAAK,CAAC,QAAQ,+CAAd,KAAK,EAAY,KAAK,CAAC,OAAO,CAAC,CAAC;iBACjC;YACH,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAc,KAAK,CAAC,SAAS,mBAAiB,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ;YAC1G,KAAK,CAAC,SAAS,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE;oBACxC,IAAI,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa;iBAClC;gBACK,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB;YACd,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE;oBACpC,IAAI,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa;iBAClC;gBACK,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CAC/B,CACT,CACI,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Icon, IIconProps, IStyle, ITooltipHostProps, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemProps {\n  /**\n   * The key of the Video Background Effect.\n   * This is used to identify the Video Background Effect and is returned in the onChange event.\n   * It must be unique within the set of options.\n   * @example 'blur'\n   */\n  itemKey: string;\n\n  /**\n   * The text to display for the Video effects item.\n   */\n  title?: string;\n\n  /**\n   * Whether the Video effects item is currently in the selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to invoke when the Video effects item is selected.\n   */\n  onSelect?: (key: string) => void;\n\n  /**\n   * Whether the Video effects item is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * The icon to display for the Video effects item.\n   * @default undefined (no icon)\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Properties to have a Tooltip display when hovering over the Video effects item.\n   * @default undefined (no tooltip)\n   */\n  tooltipProps?: ITooltipHostProps;\n\n  /**\n   * Aria label for the Video effects item.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background to display for the Video effects item.\n   * @default undefined (no background image)\n   */\n  backgroundProps?: {\n    /**\n     * The URL of the background image.\n     */\n    url: string;\n  };\n\n  /**\n   * Styles for the Video effects item.\n   */\n  styles?: _VideoEffectsItemStyles;\n}\n\n/**\n * Styles for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemStyles {\n  /**\n   * Styles for the container of the Video effects item.\n   */\n  root: IStyle;\n\n  /**\n   * Styles for the container of the icon of the Video effects item.\n   */\n  iconContainer: IStyle;\n\n  /**\n   * Styles for the text container of the Video effects item.\n   */\n  textContainer: IStyle;\n}\n\n/**\n * A component for displaying a Video Background Effect Option.\n *\n * @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n  const theme = useTheme();\n  const isSelected = props.isSelected ?? false;\n  const disabled = props.disabled ?? false;\n  const backgroundImage = props.backgroundProps?.url;\n  const containerStyles = useCallback(() => videoEffectsItemContainerStyles({\n    theme,\n    isSelected,\n    disabled,\n    backgroundImage\n  }), [backgroundImage, disabled, isSelected, theme]);\n  return <TooltipHost {...props.tooltipProps}>\n      <Stack key={props.itemKey} className={mergeStyles(props.styles?.root)} verticalAlign=\"center\" horizontalAlign=\"center\" styles={containerStyles} data-ui-id={`video-effects-item`} onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)} onKeyDown={disabled ? undefined : e => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        props.onSelect?.(props.itemKey);\n      }\n    }} tabIndex={props.disabled ? -1 : 0} aria-label={props.ariaLabel} aria-disabled={props.disabled} role=\"button\">\n        {props.iconProps && <Stack.Item styles={{\n        root: props.styles?.iconContainer\n      }}>\n            <Icon {...props.iconProps} />\n          </Stack.Item>}\n        {props.title && <Stack.Item styles={{\n        root: props.styles?.textContainer\n      }}>\n            <Text variant=\"small\">{props.title}</Text>\n          </Stack.Item>}\n      </Stack>\n    </TooltipHost>;\n};"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.d.ts

@@ -0,0 +1,11 @@
+import { IStackStyles, ITheme } from '@fluentui/react';
+/** @private */
+export declare const hiddenVideoEffectsItemContainerStyles: IStackStyles;
+/** @private */
+export declare const videoEffectsItemContainerStyles: (args: {
+    theme: ITheme;
+    isSelected: boolean;
+    disabled: boolean;
+    backgroundImage?: string;
+}) => IStackStyles;
+//# sourceMappingURL=VideoEffectsItem.styles.d.ts.map

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js

@@ -0,0 +1,53 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+const VideoEffectsItemContainerHeight = '3.375rem';
+const VideoEffectsItemContainerWidth = '4.83rem';
+const VideoEffectsItemContainerBorderSize = '2px';
+/** @private */
+export const hiddenVideoEffectsItemContainerStyles = {
+    root: {
+        visibility: 'hidden',
+        height: VideoEffectsItemContainerHeight,
+        width: VideoEffectsItemContainerWidth,
+        border: VideoEffectsItemContainerBorderSize
+    }
+};
+/** @private */
+export const videoEffectsItemContainerStyles = (args) => {
+    const borderDefaultThickness = '1px';
+    const borderActiveThickness = '2px';
+    return {
+        root: {
+            background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,
+            backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            borderRadius: '0.25rem',
+            color: args.theme.palette.neutralPrimary,
+            cursor: args.disabled ? 'default' : 'pointer',
+            height: VideoEffectsItemContainerHeight,
+            position: 'relative',
+            // Used for absolute positioning of :after
+            width: VideoEffectsItemContainerWidth,
+            // Use :after to display a border element. This is used to prevent the background image
+            // resizing when the border thichkness is changed. We also want the border to be inside
+            // the frame of the container, i.e. we want it to expand inwards and not outwards when
+            // border thickness changes from hover/selection.
+            ':after': {
+                content: '""',
+                position: 'absolute',
+                boxSizing: 'border-box',
+                border: args.isSelected ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}` : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,
+                height: '100%',
+                width: '100%',
+                borderRadius: '0.25rem'
+            },
+            ':hover': {
+                ':after': {
+                    border: args.disabled && !args.isSelected ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
+                }
+            }
+        }
+    };
+};
+//# sourceMappingURL=VideoEffectsItem.styles.js.map

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoEffectsItem.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,MAAM,+BAA+B,GAAG,UAAU,CAAC;AACnD,MAAM,8BAA8B,GAAG,SAAS,CAAC;AACjD,MAAM,mCAAmC,GAAG,KAAK,CAAC;AAElD,eAAe;AACf,MAAM,CAAC,MAAM,qCAAqC,GAAiB;IACjE,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,+BAA+B;QACvC,KAAK,EAAE,8BAA8B;QACrC,MAAM,EAAE,mCAAmC;KAC5C;CACF,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,IAK/C,EAAgB,EAAE;IACjB,MAAM,sBAAsB,GAAG,KAAK,CAAC;IACrC,MAAM,qBAAqB,GAAG,KAAK,CAAC;IACpC,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;YAC/E,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,SAAS;YAClF,kBAAkB,EAAE,QAAQ;YAC5B,cAAc,EAAE,OAAO;YACvB,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;YACxC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC7C,MAAM,EAAE,+BAA+B;YACvC,QAAQ,EAAE,UAAU;YACpB,0CAA0C;YAC1C,KAAK,EAAE,8BAA8B;YACrC,uFAAuF;YACvF,uFAAuF;YACvF,sFAAsF;YACtF,iDAAiD;YACjD,QAAQ,EAAE;gBACR,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,UAAU;gBACpB,SAAS,EAAE,YAAY;gBACvB,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;gBAC5K,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;gBACb,YAAY,EAAE,SAAS;aACxB;YACD,QAAQ,EAAE;gBACR,QAAQ,EAAE;oBACR,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;iBAC/L;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, ITheme } from '@fluentui/react';\nconst VideoEffectsItemContainerHeight = '3.375rem';\nconst VideoEffectsItemContainerWidth = '4.83rem';\nconst VideoEffectsItemContainerBorderSize = '2px';\n\n/** @private */\nexport const hiddenVideoEffectsItemContainerStyles: IStackStyles = {\n  root: {\n    visibility: 'hidden',\n    height: VideoEffectsItemContainerHeight,\n    width: VideoEffectsItemContainerWidth,\n    border: VideoEffectsItemContainerBorderSize\n  }\n};\n\n/** @private */\nexport const videoEffectsItemContainerStyles = (args: {\n  theme: ITheme;\n  isSelected: boolean;\n  disabled: boolean;\n  backgroundImage?: string;\n}): IStackStyles => {\n  const borderDefaultThickness = '1px';\n  const borderActiveThickness = '2px';\n  return {\n    root: {\n      background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,\n      backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,\n      backgroundPosition: 'center',\n      backgroundSize: 'cover',\n      borderRadius: '0.25rem',\n      color: args.theme.palette.neutralPrimary,\n      cursor: args.disabled ? 'default' : 'pointer',\n      height: VideoEffectsItemContainerHeight,\n      position: 'relative',\n      // Used for absolute positioning of :after\n      width: VideoEffectsItemContainerWidth,\n      // Use :after to display a border element. This is used to prevent the background image\n      // resizing when the border thichkness is changed. We also want the border to be inside\n      // the frame of the container, i.e. we want it to expand inwards and not outwards when\n      // border thickness changes from hover/selection.\n      ':after': {\n        content: '\"\"',\n        position: 'absolute',\n        boxSizing: 'border-box',\n        border: args.isSelected ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}` : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,\n        height: '100%',\n        width: '100%',\n        borderRadius: '0.25rem'\n      },\n      ':hover': {\n        ':after': {\n          border: args.disabled && !args.isSelected ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n        }\n      }\n    }\n  };\n};"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js

@@ -32,17 +32,13 @@ export const DefaultLayout = (props) => {
         dominantSpeakers,
         maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
-        maxOverflowGalleryDominantSpeakers: screenShareComponent
-            ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
-            : childrenPerPage.current,
+        maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
     });
     let activeVideoStreams = 0;
-    const gridTiles = gridParticipants.map((p) => {
+    const gridTiles = gridParticipants.map(p => {
         var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
-            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     /**
      * instantiate indexes available to render with indexes available that would be on first page
@@ -51,14 +47,10 @@ export const DefaultLayout = (props) => {
      * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of
      * this case when those components are here
      */
-    const [indexesToRender, setIndexesToRender] = useState([
-        ...Array(maxRemoteVideoStreams - activeVideoStreams).keys()
-    ]);
+    const [indexesToRender, setIndexesToRender] = useState([...Array(maxRemoteVideoStreams - activeVideoStreams).keys()]);
     const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
         var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
-            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0 ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     if (localVideoComponent) {
         gridTiles.push(localVideoComponent);
@@ -67,30 +59,17 @@ export const DefaultLayout = (props) => {
         if (overflowGalleryTiles.length === 0) {
             return null;
         }
-        return (React.createElement(OverflowGallery, { isNarrow: isNarrow, 
-            /* @conditional-compile-remove(vertical-gallery) */
-            isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
-            /* @conditional-compile-remove(vertical-gallery) */
-            verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
-            /* @conditional-compile-remove(pinned-participants) */
-            overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
+        return React.createElement(OverflowGallery, { isNarrow: isNarrow, 
+            /* @conditional-compile-remove(vertical-gallery) */ isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+            /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
+            /* @conditional-compile-remove(pinned-participants) */ overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
-            } }));
-    }, [
-        isNarrow,
-        /* @conditional-compile-remove(vertical-gallery) */ isShort,
-        overflowGalleryTiles,
-        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
-        setIndexesToRender,
-        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
-    ]);
-    return (React.createElement(Stack
-    /* @conditional-compile-remove(vertical-gallery) */
-    , { 
-        /* @conditional-compile-remove(vertical-gallery) */
-        horizontal: overflowGalleryPosition === 'VerticalRight', styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
-        screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-        overflowGallery));
+            } });
+    }, [isNarrow, /* @conditional-compile-remove(vertical-gallery) */ isShort, overflowGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition, setIndexesToRender, /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery]);
+    return React.createElement(Stack
+    /* @conditional-compile-remove(vertical-gallery) */ , { 
+        /* @conditional-compile-remove(vertical-gallery) */ horizontal: overflowGalleryPosition === 'VerticalRight', styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
+        screenShareComponent ? screenShareComponent : React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles),
+        overflowGallery);
 };
 //# sourceMappingURL=DefaultLayout.js.map