@fluentui/react-storybook-addon 0.5.0 → 0.6.0

package/lib/docs/DirSwitch.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { addons } from 'storybook/preview-api';
+import { Label } from '@fluentui/react-label';
+import { Switch } from '@fluentui/react-switch';
+import { useId } from '@fluentui/react-utilities';
+import { typographyStyles } from '@fluentui/react-theme';
+import { makeStyles } from '@griffel/react';
+import { DIR_ID } from '../constants';
+const useStyles = makeStyles({
+    container: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'start'
+    },
+    label: {
+        ...typographyStyles.subtitle2
+    }
+});
+/**
+ * Dir switch used in the react-components docs header
+ */ export const DirSwitch = ({ dir })=>{
+    const switchId = useId('dir-switch');
+    const styles = useStyles();
+    const [currentDir, setCurrentDir] = React.useState(dir);
+    const checked = currentDir === 'rtl';
+    const setGlobalDir = (newDir)=>{
+        addons.getChannel().emit('updateGlobals', {
+            globals: {
+                [DIR_ID]: newDir
+            }
+        });
+    };
+    const onChange = React.useCallback((_, data)=>{
+        const newDir = data.checked ? 'rtl' : 'ltr';
+        setGlobalDir(newDir);
+        setCurrentDir(newDir);
+    }, []);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: styles.container
+    }, /*#__PURE__*/ React.createElement(Label, {
+        className: styles.label,
+        htmlFor: currentDir === 'ltr' ? undefined : switchId
+    }, "LTR"), /*#__PURE__*/ React.createElement(Switch, {
+        checked: checked,
+        id: switchId,
+        onChange: onChange
+    }), /*#__PURE__*/ React.createElement(Label, {
+        className: styles.label,
+        htmlFor: currentDir === 'rtl' ? switchId : undefined
+    }, "RTL"));
+};

package/lib/docs/DirSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/DirSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { addons } from 'storybook/preview-api';\n\nimport { Label } from '@fluentui/react-label';\nimport { Switch, type SwitchProps } from '@fluentui/react-switch';\nimport { useId } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles } from '@griffel/react';\n\nimport { DIR_ID } from '../constants';\n\nconst useStyles = makeStyles({\n  container: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'start',\n  },\n  label: {\n    ...typographyStyles.subtitle2,\n  },\n});\n\n/**\n * Dir switch used in the react-components docs header\n */\nexport const DirSwitch: React.FC<{ dir?: 'ltr' | 'rtl' }> = ({ dir }) => {\n  const switchId = useId('dir-switch');\n\n  const styles = useStyles();\n\n  const [currentDir, setCurrentDir] = React.useState(dir);\n  const checked = currentDir === 'rtl';\n\n  const setGlobalDir = (newDir: 'ltr' | 'rtl'): void => {\n    addons.getChannel().emit('updateGlobals', { globals: { [DIR_ID]: newDir } });\n  };\n\n  const onChange = React.useCallback<NonNullable<SwitchProps['onChange']>>((_, data) => {\n    const newDir = data.checked ? 'rtl' : 'ltr';\n    setGlobalDir(newDir);\n    setCurrentDir(newDir);\n  }, []);\n\n  return (\n    <div className={styles.container}>\n      <Label className={styles.label} htmlFor={currentDir === 'ltr' ? undefined : switchId}>\n        LTR\n      </Label>\n      <Switch checked={checked} id={switchId} onChange={onChange} />\n      <Label className={styles.label} htmlFor={currentDir === 'rtl' ? switchId : undefined}>\n        RTL\n      </Label>\n    </div>\n  );\n};\n"],"names":["React","addons","Label","Switch","useId","typographyStyles","makeStyles","DIR_ID","useStyles","container","alignItems","display","justifyContent","label","subtitle2","DirSwitch","dir","switchId","styles","currentDir","setCurrentDir","useState","checked","setGlobalDir","newDir","getChannel","emit","globals","onChange","useCallback","_","data","div","className","htmlFor","undefined","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,MAAM,QAA0B,yBAAyB;AAClE,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,MAAM,QAAQ,eAAe;AAEtC,MAAMC,YAAYF,WAAW;IAC3BG,WAAW;QACTC,YAAY;QACZC,SAAS;QACTC,gBAAgB;IAClB;IACAC,OAAO;QACL,GAAGR,iBAAiBS,SAAS;IAC/B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,YAA+C,CAAC,EAAEC,GAAG,EAAE;IAClE,MAAMC,WAAWb,MAAM;IAEvB,MAAMc,SAASV;IAEf,MAAM,CAACW,YAAYC,cAAc,GAAGpB,MAAMqB,QAAQ,CAACL;IACnD,MAAMM,UAAUH,eAAe;IAE/B,MAAMI,eAAe,CAACC;QACpBvB,OAAOwB,UAAU,GAAGC,IAAI,CAAC,iBAAiB;YAAEC,SAAS;gBAAE,CAACpB,OAAO,EAAEiB;YAAO;QAAE;IAC5E;IAEA,MAAMI,WAAW5B,MAAM6B,WAAW,CAAuC,CAACC,GAAGC;QAC3E,MAAMP,SAASO,KAAKT,OAAO,GAAG,QAAQ;QACtCC,aAAaC;QACbJ,cAAcI;IAChB,GAAG,EAAE;IAEL,qBACE,oBAACQ;QAAIC,WAAWf,OAAOT,SAAS;qBAC9B,oBAACP;QAAM+B,WAAWf,OAAOL,KAAK;QAAEqB,SAASf,eAAe,QAAQgB,YAAYlB;OAAU,sBAGtF,oBAACd;QAAOmB,SAASA;QAASc,IAAInB;QAAUW,UAAUA;sBAClD,oBAAC1B;QAAM+B,WAAWf,OAAOL,KAAK;QAAEqB,SAASf,eAAe,QAAQF,WAAWkB;OAAW;AAK5F,EAAE"}

package/lib/docs/FluentCanvas.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { makeStyles } from '@griffel/react';
+const useStyles = makeStyles({
+    canvas: {
+        padding: '20px',
+        boxSizing: 'border-box',
+        overflow: 'auto'
+    }
+});
+/**
+ * Canvas component to wrap stories in a styled container.
+ * Provides a similar experience to Storybook's v7 `Canvas` component.
+ */ export const FluentCanvas = (props)=>{
+    const styles = useStyles();
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "sbdocs-preview"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.canvas,
+        ...props
+    }));
+};

package/lib/docs/FluentCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/FluentCanvas.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { makeStyles } from '@griffel/react';\n\nconst useStyles = makeStyles({\n  canvas: {\n    padding: '20px',\n    boxSizing: 'border-box',\n    overflow: 'auto',\n  },\n});\n\n/**\n * Canvas component to wrap stories in a styled container.\n * Provides a similar experience to Storybook's v7 `Canvas` component.\n */\nexport const FluentCanvas = (props: React.ComponentProps<'div'>): JSXElement => {\n  const styles = useStyles();\n\n  return (\n    <div className=\"sbdocs-preview\">\n      <div className={styles.canvas} {...props} />\n    </div>\n  );\n};\n"],"names":["React","makeStyles","useStyles","canvas","padding","boxSizing","overflow","FluentCanvas","props","styles","div","className"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,MAAMC,YAAYD,WAAW;IAC3BE,QAAQ;QACNC,SAAS;QACTC,WAAW;QACXC,UAAU;IACZ;AACF;AAEA;;;CAGC,GACD,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAMC,SAASP;IAEf,qBACE,oBAACQ;QAAIC,WAAU;qBACb,oBAACD;QAAIC,WAAWF,OAAON,MAAM;QAAG,GAAGK,KAAK;;AAG9C,EAAE"}

package/lib/docs/FluentDocsContainer.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+import { webLightTheme } from '@fluentui/react-theme';
+import { FluentProvider } from '@fluentui/react-provider';
+import { isDocsEnabled } from './utils';
+/**
+ * A container that wraps storybook's native docs container to add extra components to the docs experience
+ */ export const FluentDocsContainer = ({ children, context })=>{
+    if (isDocsEnabled(context)) {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(FluentProvider, {
+            className: "sb-unstyled",
+            style: {
+                backgroundColor: 'transparent'
+            },
+            theme: webLightTheme
+        }, /*#__PURE__*/ React.createElement(DocsContainer, {
+            context: context
+        }, children)));
+    }
+    // If docs container is not enabled, fall back to Storybook's default DocsContainer
+    return /*#__PURE__*/ React.createElement(DocsContainer, {
+        context: context
+    }, children);
+};

package/lib/docs/FluentDocsContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/FluentDocsContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DocsContainer, type DocsContextProps } from '@storybook/addon-docs/blocks';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport { FluentProvider } from '@fluentui/react-provider';\n\nimport { isDocsEnabled } from './utils';\n\ninterface FluentDocsContainerProps {\n  context: DocsContextProps;\n  children: React.ReactNode;\n}\n\n/**\n * A container that wraps storybook's native docs container to add extra components to the docs experience\n */\nexport const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {\n  if (isDocsEnabled(context)) {\n    return (\n      <>\n        {/** TODO add table of contents */}\n        <FluentProvider className=\"sb-unstyled\" style={{ backgroundColor: 'transparent' }} theme={webLightTheme}>\n          <DocsContainer context={context}>{children}</DocsContainer>\n        </FluentProvider>\n      </>\n    );\n  }\n\n  // If docs container is not enabled, fall back to Storybook's default DocsContainer\n  return <DocsContainer context={context}>{children}</DocsContainer>;\n};\n"],"names":["React","DocsContainer","webLightTheme","FluentProvider","isDocsEnabled","FluentDocsContainer","children","context","className","style","backgroundColor","theme"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAA+B,+BAA+B;AACpF,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,cAAc,QAAQ,2BAA2B;AAE1D,SAASC,aAAa,QAAQ,UAAU;AAOxC;;CAEC,GACD,OAAO,MAAMC,sBAA0D,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IAC3F,IAAIH,cAAcG,UAAU;QAC1B,qBACE,wDAEE,oBAACJ;YAAeK,WAAU;YAAcC,OAAO;gBAAEC,iBAAiB;YAAc;YAAGC,OAAOT;yBACxF,oBAACD;YAAcM,SAASA;WAAUD;IAI1C;IAEA,mFAAmF;IACnF,qBAAO,oBAACL;QAAcM,SAASA;OAAUD;AAC3C,EAAE"}

package/lib/docs/FluentDocsPage.js

@@ -0,0 +1,308 @@
+import * as React from 'react';
+import { DocsContext, ArgTypes, Title, Subtitle, Description, HeaderMdx, Primary, Stories } from '@storybook/addon-docs/blocks';
+import { tokens } from '@fluentui/react-theme';
+import { Link } from '@fluentui/react-link';
+import { Text } from '@fluentui/react-text';
+import { makeStyles } from '@griffel/react';
+import { InfoFilled } from '@fluentui/react-icons';
+import { DIR_ID, THEME_ID } from '../constants';
+import { themes } from '../theme';
+import { getDocsPageConfig } from './utils';
+import { DirSwitch } from './DirSwitch';
+import { ThemePicker } from './ThemePicker';
+import { Toc, nameToHash } from './Toc';
+import { CopyAsMarkdownButton } from './CopyAsMarkdownButton';
+const useStyles = makeStyles({
+    divider: {
+        height: '1px',
+        backgroundColor: '#e1dfdd',
+        border: '0px none',
+        margin: '48px 0px'
+    },
+    wrapper: {
+        display: 'flex',
+        gap: '16px'
+    },
+    toc: {
+        flexBasis: '200px',
+        flexShrink: 0,
+        [`@media screen and (max-width: 1000px)`]: {
+            display: 'none'
+        }
+    },
+    container: {
+        // without a width, this div grows wider than its parent
+        width: '200px',
+        flexGrow: 1
+    },
+    globalTogglesContainer: {
+        columnGap: tokens.spacingHorizontalXXXL,
+        display: 'flex'
+    },
+    description: {
+        display: 'grid',
+        gridTemplateColumns: '1fr min-content'
+    },
+    additionalInfoWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: tokens.spacingVerticalM
+    },
+    additionalInfo: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: tokens.spacingVerticalM,
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        borderRadius: tokens.borderRadiusMedium,
+        padding: tokens.spacingHorizontalM,
+        margin: `0 ${tokens.spacingHorizontalM}`
+    },
+    additionalInfoIcon: {
+        alignSelf: 'center',
+        color: tokens.colorBrandForeground1,
+        fontSize: '24px',
+        marginRight: tokens.spacingHorizontalM
+    },
+    additionalInfoMessage: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: tokens.spacingVerticalXS
+    },
+    infoIcon: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: tokens.spacingVerticalXS,
+        flex: 1
+    }
+});
+const useVideoClasses = makeStyles({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: tokens.spacingHorizontalMNudge
+    },
+    preview: {
+        borderRadius: tokens.borderRadiusSmall,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: tokens.spacingHorizontalM,
+        padding: tokens.spacingHorizontalM,
+        backgroundColor: tokens.colorNeutralBackground2,
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground2Hover
+        }
+    },
+    image: {
+        width: '200px'
+    }
+});
+const VideoPreviews = (props)=>{
+    const { videos } = props;
+    const classes = useVideoClasses();
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classes.container
+    }, videos.map((video)=>/*#__PURE__*/ React.createElement(Link, {
+            className: classes.preview,
+            href: video.href,
+            target: "_blank",
+            key: video.href
+        }, /*#__PURE__*/ React.createElement("img", {
+            alt: `Video: ${video.preview}`,
+            src: video.preview,
+            className: classes.image
+        }), /*#__PURE__*/ React.createElement(Text, null, video.title))));
+};
+const getNativeElementsList = (elements)=>{
+    const elementsArr = elements === null || elements === void 0 ? void 0 : elements.map((el, idx)=>[
+            /*#__PURE__*/ React.createElement("code", {
+                key: idx
+            }, `<${el}>`),
+            idx !== elements.length - 1 ? ', ' : ' '
+        ]);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, elementsArr, elementsArr.length > 1 ? 'elements' : 'element');
+};
+const slotRegex = /as\?:\s*"([^"]+)"/;
+/**
+ * NOTE: this function mutates original story argTypes including all story subcomponents if they are present
+ */ function withSlotEnhancer(story, options) {
+    var _story_argTypes_as_type, _story_argTypes_as;
+    const hasArgAsProp = options.nativePropsApi ? ((_story_argTypes_as = story.argTypes.as) === null || _story_argTypes_as === void 0 ? void 0 : (_story_argTypes_as_type = _story_argTypes_as.type) === null || _story_argTypes_as_type === void 0 ? void 0 : _story_argTypes_as_type.name) === 'enum' : false;
+    const argAsProp = hasArgAsProp ? story.argTypes.as.type.value : null;
+    let hasArgAsSlot = false;
+    const transformArgTypeNameWithSlotShorthand = (typeName)=>{
+        const match = typeName.match(slotRegex);
+        if (match) {
+            hasArgAsSlot = true;
+            return `Slot<\"${match[1]}\">`;
+        }
+        if (typeName.includes('WithSlotShorthandValue')) {
+            hasArgAsSlot = true;
+            return `Slot`;
+        }
+        return typeName;
+    };
+    /**
+   * Transform the arg types with slot shorthand (mutates the arg types object reference)
+   * This is necessary to ensure that the arg types are correctly displayed in the docs page
+   */ const transformArgTypesWithSlotShorthand = (argTypes)=>{
+        Object.values(argTypes).forEach((argType)=>{
+            var _argType_table_type, _argType_table, _argType_type;
+            // Transform the type summary if it exists
+            if (argType === null || argType === void 0 ? void 0 : (_argType_table = argType.table) === null || _argType_table === void 0 ? void 0 : (_argType_table_type = _argType_table.type) === null || _argType_table_type === void 0 ? void 0 : _argType_table_type.summary) {
+                argType.table.type.summary = transformArgTypeNameWithSlotShorthand(argType.table.type.summary);
+            }
+            // Transform the type name if it exists
+            if (argType === null || argType === void 0 ? void 0 : (_argType_type = argType.type) === null || _argType_type === void 0 ? void 0 : _argType_type.name) {
+                argType.type.name = transformArgTypeNameWithSlotShorthand(argType.type.name);
+            }
+        });
+    };
+    const transformComponentDocGenProps = (component)=>{
+        var _component___docgenInfo;
+        const docGenProps = component === null || component === void 0 ? void 0 : (_component___docgenInfo = component.__docgenInfo) === null || _component___docgenInfo === void 0 ? void 0 : _component___docgenInfo.props;
+        if (docGenProps) {
+            transformArgTypesWithSlotShorthand(docGenProps);
+        }
+    };
+    const component = story.moduleExport;
+    if (options.slotsApi) {
+        // Transform the arg types with slot shorthand (mutates the arg types object reference)
+        transformArgTypesWithSlotShorthand(story.argTypes);
+        // Transform the component doc gen props with slot shorthand (mutates the component doc gen props object reference)
+        transformComponentDocGenProps(component);
+        // Transform the subcomponents doc gen props with slot shorthand
+        // (mutates the subcomponents doc gen props object reference)
+        if (story.subcomponents) {
+            Object.values(story.subcomponents).forEach(transformComponentDocGenProps);
+        }
+    }
+    return {
+        component,
+        hasArgAsSlot,
+        hasArgAsProp,
+        argAsProp
+    };
+}
+const AdditionalApiDocs = ({ children })=>{
+    const styles = useStyles();
+    return /*#__PURE__*/ React.createElement("div", {
+        className: styles.additionalInfo
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.additionalInfoMessage
+    }, /*#__PURE__*/ React.createElement(InfoFilled, {
+        className: styles.additionalInfoIcon
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: styles.infoIcon
+    }, children)));
+};
+const RenderArgsTable = ({ story, hideArgsTable, showSlotsApi, showNativePropsApi })=>{
+    const { component, hasArgAsProp, hasArgAsSlot, argAsProp } = withSlotEnhancer(story, {
+        slotsApi: showSlotsApi,
+        nativePropsApi: showNativePropsApi
+    });
+    const styles = useStyles();
+    return hideArgsTable ? null : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+        className: styles.additionalInfoWrapper
+    }, hasArgAsProp && /*#__PURE__*/ React.createElement(AdditionalApiDocs, null, /*#__PURE__*/ React.createElement("p", null, /*#__PURE__*/ React.createElement("b", null, "Native props are supported ", /*#__PURE__*/ React.createElement("span", {
+        role: "presentation"
+    }, "🙌"), /*#__PURE__*/ React.createElement("br", null)), /*#__PURE__*/ React.createElement("span", null, "All HTML attributes native to the", getNativeElementsList(argAsProp), ", including all ", /*#__PURE__*/ React.createElement("code", null, "aria-*"), " and ", /*#__PURE__*/ React.createElement("code", null, "data-*"), ' ', "attributes, can be applied as native props on this component."))), hasArgAsSlot && /*#__PURE__*/ React.createElement(AdditionalApiDocs, null, /*#__PURE__*/ React.createElement("p", null, /*#__PURE__*/ React.createElement("b", null, "Customizing components with slots ", /*#__PURE__*/ React.createElement("span", {
+        role: "presentation"
+    }, "🙌")), /*#__PURE__*/ React.createElement("br", null), /*#__PURE__*/ React.createElement("span", null, "Slots in Fluent UI React components are designed to be modified or replaced, providing a flexible approach to customizing components. Each slot is exposed as a top-level prop and can be filled with primitive values, JSX/TSX, props objects, or render functions. This allows for more dynamic and reusable component structures, similar to slots in other frameworks.", ' ', /*#__PURE__*/ React.createElement(Link, {
+        href: "/?path=/docs/concepts-developer-customizing-components-with-slots--docs"
+    }, "Customizing components with slots", ' '))))), /*#__PURE__*/ React.createElement(ArgTypes, {
+        of: component
+    }));
+};
+const RenderPrimaryStory = ({ primaryStory, skipPrimaryStory })=>{
+    const styles = useStyles();
+    return skipPrimaryStory ? null : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("hr", {
+        className: styles.divider
+    }), /*#__PURE__*/ React.createElement(HeaderMdx, {
+        as: "h3",
+        id: nameToHash(primaryStory.name)
+    }, primaryStory.name), /*#__PURE__*/ React.createElement(Primary, null));
+};
+export const FluentDocsPage = ()=>{
+    var _primaryStoryContext_parameters, _primaryStoryContext_globals, _primaryStoryContext_parameters_docs, _primaryStoryContext_parameters1, _primaryStoryContext_parameters_docs1, _primaryStoryContext_parameters2, _primaryStoryContext_parameters3;
+    const context = React.useContext(DocsContext);
+    // Get the fluent docs page configuration from context
+    const docsPageConfig = getDocsPageConfig(context);
+    const stories = context.componentStories();
+    const primaryStory = stories[0];
+    const primaryStoryContext = context.getStoryContext(primaryStory);
+    assertStoryMetaValues(primaryStory);
+    var _primaryStoryContext_parameters_dir, _ref;
+    const dir = (_ref = (_primaryStoryContext_parameters_dir = (_primaryStoryContext_parameters = primaryStoryContext.parameters) === null || _primaryStoryContext_parameters === void 0 ? void 0 : _primaryStoryContext_parameters.dir) !== null && _primaryStoryContext_parameters_dir !== void 0 ? _primaryStoryContext_parameters_dir : (_primaryStoryContext_globals = primaryStoryContext.globals) === null || _primaryStoryContext_globals === void 0 ? void 0 : _primaryStoryContext_globals[DIR_ID]) !== null && _ref !== void 0 ? _ref : 'ltr';
+    const selectedTheme = themes.find((theme)=>theme.id === primaryStoryContext.globals[THEME_ID]);
+    const hideArgsTable = Boolean((_primaryStoryContext_parameters1 = primaryStoryContext.parameters) === null || _primaryStoryContext_parameters1 === void 0 ? void 0 : (_primaryStoryContext_parameters_docs = _primaryStoryContext_parameters1.docs) === null || _primaryStoryContext_parameters_docs === void 0 ? void 0 : _primaryStoryContext_parameters_docs.hideArgsTable);
+    const skipPrimaryStory = Boolean((_primaryStoryContext_parameters2 = primaryStoryContext.parameters) === null || _primaryStoryContext_parameters2 === void 0 ? void 0 : (_primaryStoryContext_parameters_docs1 = _primaryStoryContext_parameters2.docs) === null || _primaryStoryContext_parameters_docs1 === void 0 ? void 0 : _primaryStoryContext_parameters_docs1.skipPrimaryStory);
+    var _primaryStoryContext_parameters_videos;
+    const videos = (_primaryStoryContext_parameters_videos = (_primaryStoryContext_parameters3 = primaryStoryContext.parameters) === null || _primaryStoryContext_parameters3 === void 0 ? void 0 : _primaryStoryContext_parameters3.videos) !== null && _primaryStoryContext_parameters_videos !== void 0 ? _primaryStoryContext_parameters_videos : null;
+    const styles = useStyles();
+    // If docs page is disabled, return Storybook's default docs page
+    if (!docsPageConfig) {
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "sb-unstyled"
+        }, /*#__PURE__*/ React.createElement(Title, null), /*#__PURE__*/ React.createElement(Subtitle, null), /*#__PURE__*/ React.createElement(Description, null), /*#__PURE__*/ React.createElement(RenderPrimaryStory, {
+            primaryStory: primaryStory,
+            skipPrimaryStory: skipPrimaryStory
+        }), /*#__PURE__*/ React.createElement(RenderArgsTable, {
+            story: primaryStory,
+            hideArgsTable: hideArgsTable
+        }), /*#__PURE__*/ React.createElement(Stories, null));
+    }
+    // Determine what to show based on configuration
+    const { tableOfContents: showTableOfContents, dirSwitcher: showDirSwitcher, themePicker: showThemePicker, copyAsMarkdown: showCopyAsMarkdown, argTable } = docsPageConfig;
+    // DEBUG
+    // console.log('FluentDocsPage', context);
+    // console.table(stories.map((s: StoreItem) => ({ id: s.id, kind: s.kind, name: s.name, story: s.story })));
+    // console.table(
+    //   Object.values((context as any).argTypes).map(arg => ({
+    //     name: arg.name,
+    //     description: arg.description,
+    //     type: arg.table?.type?.summary ?? '?',
+    //     default: arg.table?.defaultValue?.summary ?? '-',
+    //   })),
+    // );
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "sb-unstyled"
+    }, /*#__PURE__*/ React.createElement(Title, null), /*#__PURE__*/ React.createElement("div", {
+        className: styles.wrapper
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.container
+    }, (showThemePicker || showDirSwitcher || showCopyAsMarkdown) && /*#__PURE__*/ React.createElement("div", {
+        className: styles.globalTogglesContainer
+    }, showThemePicker && /*#__PURE__*/ React.createElement(ThemePicker, {
+        selectedThemeId: selectedTheme === null || selectedTheme === void 0 ? void 0 : selectedTheme.id
+    }), showDirSwitcher && /*#__PURE__*/ React.createElement(DirSwitch, {
+        dir: dir
+    }), showCopyAsMarkdown && /*#__PURE__*/ React.createElement(CopyAsMarkdownButton, {
+        storyId: primaryStory.id
+    })), /*#__PURE__*/ React.createElement(Subtitle, null), /*#__PURE__*/ React.createElement("div", {
+        className: styles.description
+    }, /*#__PURE__*/ React.createElement(Description, null), videos && /*#__PURE__*/ React.createElement(VideoPreviews, {
+        videos: videos
+    })), /*#__PURE__*/ React.createElement(RenderPrimaryStory, {
+        primaryStory: primaryStory,
+        skipPrimaryStory: skipPrimaryStory
+    }), /*#__PURE__*/ React.createElement(RenderArgsTable, {
+        story: primaryStory,
+        hideArgsTable: hideArgsTable,
+        showSlotsApi: argTable.slotsApi,
+        showNativePropsApi: argTable.nativePropsApi
+    }), /*#__PURE__*/ React.createElement(Stories, null)), showTableOfContents && /*#__PURE__*/ React.createElement("div", {
+        className: styles.toc
+    }, /*#__PURE__*/ React.createElement(Toc, {
+        stories: stories
+    }))));
+};
+function assertStoryMetaValues(story) {
+    if (story.component === null) {
+        throw new Error([
+            '🚨 Invalid Story Meta declaration:',
+            `- primaryStory.component of componentId:${story.componentId} is "null"`,
+            '- to resolve this error, please update "component" property value in your story definition to reference a React Component or remove it if it is not needed.'
+        ].join('\n'));
+    }
+}

package/lib/docs/FluentDocsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/FluentDocsPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  DocsContext,\n  ArgTypes,\n  Title,\n  Subtitle,\n  Description,\n  HeaderMdx,\n  Primary,\n  Stories,\n  type DocsContextProps,\n} from '@storybook/addon-docs/blocks';\nimport type { PreparedStory, Renderer, SBEnumType } from 'storybook/internal/types';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { Link } from '@fluentui/react-link';\nimport { Text } from '@fluentui/react-text';\nimport { makeStyles } from '@griffel/react';\nimport { InfoFilled } from '@fluentui/react-icons';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { DIR_ID, THEME_ID } from '../constants';\nimport { themes } from '../theme';\n\nimport { getDocsPageConfig } from './utils';\nimport { DirSwitch } from './DirSwitch';\nimport { ThemePicker } from './ThemePicker';\nimport { Toc, nameToHash } from './Toc';\nimport { CopyAsMarkdownButton } from './CopyAsMarkdownButton';\n\ntype PrimaryStory = PreparedStory<Renderer>;\n\nconst useStyles = makeStyles({\n  divider: {\n    height: '1px',\n    backgroundColor: '#e1dfdd',\n    border: '0px none',\n    margin: '48px 0px',\n  },\n  wrapper: {\n    display: 'flex',\n    gap: '16px',\n  },\n  toc: {\n    flexBasis: '200px',\n    flexShrink: 0,\n    [`@media screen and (max-width: 1000px)`]: {\n      display: 'none',\n    },\n  },\n  container: {\n    // without a width, this div grows wider than its parent\n    width: '200px',\n    flexGrow: 1,\n  },\n  globalTogglesContainer: {\n    columnGap: tokens.spacingHorizontalXXXL,\n    display: 'flex',\n  },\n  description: {\n    display: 'grid',\n    gridTemplateColumns: '1fr min-content',\n  },\n  additionalInfoWrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalM,\n  },\n  additionalInfo: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalM,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderRadius: tokens.borderRadiusMedium,\n    padding: tokens.spacingHorizontalM,\n    margin: `0 ${tokens.spacingHorizontalM}`,\n  },\n  additionalInfoIcon: {\n    alignSelf: 'center',\n    color: tokens.colorBrandForeground1,\n    fontSize: '24px',\n    marginRight: tokens.spacingHorizontalM,\n  },\n  additionalInfoMessage: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: tokens.spacingVerticalXS,\n  },\n  infoIcon: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalXS,\n    flex: 1,\n  },\n});\n\nconst useVideoClasses = makeStyles({\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingHorizontalMNudge,\n  },\n  preview: {\n    borderRadius: tokens.borderRadiusSmall,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingHorizontalM,\n    padding: tokens.spacingHorizontalM,\n    backgroundColor: tokens.colorNeutralBackground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground2Hover,\n    },\n  },\n  image: {\n    width: '200px',\n  },\n});\n\nconst VideoPreviews: React.FC<{\n  videos: {\n    href: string;\n    preview: string;\n    source: 'youtube';\n    title: string;\n  }[];\n}> = props => {\n  const { videos } = props;\n  const classes = useVideoClasses();\n\n  return (\n    <div className={classes.container}>\n      {videos.map(video => (\n        <Link className={classes.preview} href={video.href} target=\"_blank\" key={video.href}>\n          <img alt={`Video: ${video.preview}`} src={video.preview} className={classes.image} />\n          <Text>{video.title}</Text>\n        </Link>\n      ))}\n    </div>\n  );\n};\n\nconst getNativeElementsList = (elements: SBEnumType['value']): React.ReactElement => {\n  const elementsArr = elements?.map((el, idx) => [\n    <code key={idx}>{`<${el}>`}</code>,\n    idx !== elements.length - 1 ? ', ' : ' ',\n  ]);\n\n  return (\n    <>\n      {elementsArr}\n      {elementsArr.length > 1 ? 'elements' : 'element'}\n    </>\n  );\n};\n\nconst slotRegex = /as\\?:\\s*\"([^\"]+)\"/;\n/**\n * NOTE: this function mutates original story argTypes including all story subcomponents if they are present\n */\nfunction withSlotEnhancer(story: PreparedStory, options: { slotsApi?: boolean; nativePropsApi?: boolean }) {\n  const hasArgAsProp = options.nativePropsApi ? story.argTypes.as?.type?.name === 'enum' : false;\n  const argAsProp = hasArgAsProp ? (story.argTypes.as.type as SBEnumType).value : null;\n  let hasArgAsSlot = false;\n\n  type ArgTypes = Record<\n    string,\n    {\n      table?: { type: { summary?: string } };\n      type: { name?: string };\n    }\n  >;\n\n  type InternalComponentApi = {\n    __docgenInfo: {\n      props?: ArgTypes;\n    };\n  };\n\n  const transformArgTypeNameWithSlotShorthand = (typeName: string) => {\n    const match = typeName.match(slotRegex);\n\n    if (match) {\n      hasArgAsSlot = true;\n      return `Slot<\\\"${match[1]}\\\">`;\n    }\n\n    if (typeName.includes('WithSlotShorthandValue')) {\n      hasArgAsSlot = true;\n      return `Slot`;\n    }\n\n    return typeName;\n  };\n\n  /**\n   * Transform the arg types with slot shorthand (mutates the arg types object reference)\n   * This is necessary to ensure that the arg types are correctly displayed in the docs page\n   */\n  const transformArgTypesWithSlotShorthand = (argTypes: ArgTypes) => {\n    Object.values(argTypes).forEach(argType => {\n      // Transform the type summary if it exists\n      if (argType?.table?.type?.summary) {\n        argType.table.type.summary = transformArgTypeNameWithSlotShorthand(argType.table.type.summary);\n      }\n      // Transform the type name if it exists\n      if (argType?.type?.name) {\n        argType.type.name = transformArgTypeNameWithSlotShorthand(argType.type.name);\n      }\n    });\n  };\n\n  const transformComponentDocGenProps = (component: InternalComponentApi) => {\n    const docGenProps = component?.__docgenInfo?.props;\n    if (docGenProps) {\n      transformArgTypesWithSlotShorthand(docGenProps);\n    }\n  };\n\n  const component = story.moduleExport;\n\n  if (options.slotsApi) {\n    // Transform the arg types with slot shorthand (mutates the arg types object reference)\n    transformArgTypesWithSlotShorthand(story.argTypes as ArgTypes);\n\n    // Transform the component doc gen props with slot shorthand (mutates the component doc gen props object reference)\n    transformComponentDocGenProps(component);\n\n    // Transform the subcomponents doc gen props with slot shorthand\n    // (mutates the subcomponents doc gen props object reference)\n    if (story.subcomponents) {\n      Object.values(story.subcomponents).forEach(transformComponentDocGenProps);\n    }\n  }\n\n  return { component, hasArgAsSlot, hasArgAsProp, argAsProp };\n}\n\nconst AdditionalApiDocs: React.FC<{ children: React.ReactElement | React.ReactElement[] }> = ({ children }) => {\n  const styles = useStyles();\n  return (\n    <div className={styles.additionalInfo}>\n      <div className={styles.additionalInfoMessage}>\n        <InfoFilled className={styles.additionalInfoIcon} />\n        <div className={styles.infoIcon}>{children}</div>\n      </div>\n    </div>\n  );\n};\n\nconst RenderArgsTable = ({\n  story,\n  hideArgsTable,\n  showSlotsApi,\n  showNativePropsApi,\n}: {\n  story: PrimaryStory;\n  hideArgsTable: boolean;\n  showSlotsApi?: boolean;\n  showNativePropsApi?: boolean;\n}) => {\n  const { component, hasArgAsProp, hasArgAsSlot, argAsProp } = withSlotEnhancer(story, {\n    slotsApi: showSlotsApi,\n    nativePropsApi: showNativePropsApi,\n  });\n  const styles = useStyles();\n\n  return hideArgsTable ? null : (\n    <>\n      <div className={styles.additionalInfoWrapper}>\n        {hasArgAsProp && (\n          <AdditionalApiDocs>\n            <p>\n              <b>\n                Native props are supported <span role=\"presentation\">🙌</span>\n                <br />\n              </b>\n              <span>\n                All HTML attributes native to the\n                {getNativeElementsList(argAsProp!)}, including all <code>aria-*</code> and <code>data-*</code>{' '}\n                attributes, can be applied as native props on this component.\n              </span>\n            </p>\n          </AdditionalApiDocs>\n        )}\n        {hasArgAsSlot && (\n          <AdditionalApiDocs>\n            <p>\n              <b>\n                Customizing components with slots <span role=\"presentation\">🙌</span>\n              </b>\n              <br />\n              <span>\n                Slots in Fluent UI React components are designed to be modified or replaced, providing a flexible\n                approach to customizing components. Each slot is exposed as a top-level prop and can be filled with\n                primitive values, JSX/TSX, props objects, or render functions. This allows for more dynamic and reusable\n                component structures, similar to slots in other frameworks.{' '}\n                <Link href=\"/?path=/docs/concepts-developer-customizing-components-with-slots--docs\">\n                  Customizing components with slots{' '}\n                </Link>\n              </span>\n            </p>\n          </AdditionalApiDocs>\n        )}\n      </div>\n      <ArgTypes of={component} />\n    </>\n  );\n};\n\nconst RenderPrimaryStory = ({\n  primaryStory,\n  skipPrimaryStory,\n}: {\n  primaryStory: PrimaryStory;\n  skipPrimaryStory: boolean;\n}) => {\n  const styles = useStyles();\n  return skipPrimaryStory ? null : (\n    <>\n      <hr className={styles.divider} />\n      <HeaderMdx as=\"h3\" id={nameToHash(primaryStory.name)}>\n        {primaryStory.name}\n      </HeaderMdx>\n      <Primary />\n    </>\n  );\n};\n\nexport const FluentDocsPage = (): JSXElement => {\n  const context = React.useContext(DocsContext);\n\n  // Get the fluent docs page configuration from context\n  const docsPageConfig = getDocsPageConfig(context);\n\n  const stories = context.componentStories();\n\n  const primaryStory = stories[0];\n  const primaryStoryContext = context.getStoryContext(primaryStory);\n\n  assertStoryMetaValues(primaryStory);\n\n  const dir = primaryStoryContext.parameters?.dir ?? primaryStoryContext.globals?.[DIR_ID] ?? 'ltr';\n  const selectedTheme = themes.find(theme => theme.id === primaryStoryContext.globals![THEME_ID]);\n\n  const hideArgsTable = Boolean(primaryStoryContext.parameters?.docs?.hideArgsTable);\n  const skipPrimaryStory = Boolean(primaryStoryContext.parameters?.docs?.skipPrimaryStory);\n\n  const videos = primaryStoryContext.parameters?.videos ?? null;\n  const styles = useStyles();\n\n  // If docs page is disabled, return Storybook's default docs page\n  if (!docsPageConfig) {\n    return (\n      <div className=\"sb-unstyled\">\n        <Title />\n        <Subtitle />\n        <Description />\n        <RenderPrimaryStory primaryStory={primaryStory} skipPrimaryStory={skipPrimaryStory} />\n        <RenderArgsTable story={primaryStory} hideArgsTable={hideArgsTable} />\n        <Stories />\n      </div>\n    );\n  }\n\n  // Determine what to show based on configuration\n  const {\n    tableOfContents: showTableOfContents,\n    dirSwitcher: showDirSwitcher,\n    themePicker: showThemePicker,\n    copyAsMarkdown: showCopyAsMarkdown,\n    argTable,\n  } = docsPageConfig;\n\n  // DEBUG\n  // console.log('FluentDocsPage', context);\n  // console.table(stories.map((s: StoreItem) => ({ id: s.id, kind: s.kind, name: s.name, story: s.story })));\n  // console.table(\n  //   Object.values((context as any).argTypes).map(arg => ({\n  //     name: arg.name,\n  //     description: arg.description,\n  //     type: arg.table?.type?.summary ?? '?',\n  //     default: arg.table?.defaultValue?.summary ?? '-',\n  //   })),\n  // );\n\n  return (\n    <div className=\"sb-unstyled\">\n      <Title />\n      <div className={styles.wrapper}>\n        <div className={styles.container}>\n          {(showThemePicker || showDirSwitcher || showCopyAsMarkdown) && (\n            <div className={styles.globalTogglesContainer}>\n              {showThemePicker && <ThemePicker selectedThemeId={selectedTheme?.id} />}\n              {showDirSwitcher && <DirSwitch dir={dir} />}\n              {showCopyAsMarkdown && <CopyAsMarkdownButton storyId={primaryStory.id} />}\n            </div>\n          )}\n          <Subtitle />\n          <div className={styles.description}>\n            <Description />\n            {videos && <VideoPreviews videos={videos} />}\n          </div>\n          <RenderPrimaryStory\n            primaryStory={primaryStory as unknown as PrimaryStory}\n            skipPrimaryStory={skipPrimaryStory}\n          />\n          <RenderArgsTable\n            story={primaryStory as unknown as PrimaryStory}\n            hideArgsTable={hideArgsTable}\n            showSlotsApi={argTable.slotsApi}\n            showNativePropsApi={argTable.nativePropsApi}\n          />\n          <Stories />\n        </div>\n        {showTableOfContents && (\n          <div className={styles.toc}>\n            <Toc stories={stories} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nfunction assertStoryMetaValues(story: ReturnType<DocsContextProps['componentStories']>[number]) {\n  if (story.component === null) {\n    throw new Error(\n      [\n        '🚨 Invalid Story Meta declaration:',\n        `- primaryStory.component of componentId:${story.componentId} is \"null\"`,\n        '- to resolve this error, please update \"component\" property value in your story definition to reference a React Component or remove it if it is not needed.',\n      ].join('\\n'),\n    );\n  }\n}\n"],"names":["React","DocsContext","ArgTypes","Title","Subtitle","Description","HeaderMdx","Primary","Stories","tokens","Link","Text","makeStyles","InfoFilled","DIR_ID","THEME_ID","themes","getDocsPageConfig","DirSwitch","ThemePicker","Toc","nameToHash","CopyAsMarkdownButton","useStyles","divider","height","backgroundColor","border","margin","wrapper","display","gap","toc","flexBasis","flexShrink","container","width","flexGrow","globalTogglesContainer","columnGap","spacingHorizontalXXXL","description","gridTemplateColumns","additionalInfoWrapper","flexDirection","spacingVerticalM","additionalInfo","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingHorizontalM","additionalInfoIcon","alignSelf","color","colorBrandForeground1","fontSize","marginRight","additionalInfoMessage","alignItems","spacingVerticalXS","infoIcon","flex","useVideoClasses","spacingHorizontalMNudge","preview","borderRadiusSmall","colorNeutralBackground2","colorNeutralBackground2Hover","image","VideoPreviews","props","videos","classes","div","className","map","video","href","target","key","img","alt","src","title","getNativeElementsList","elements","elementsArr","el","idx","code","length","slotRegex","withSlotEnhancer","story","options","hasArgAsProp","nativePropsApi","argTypes","as","type","name","argAsProp","value","hasArgAsSlot","transformArgTypeNameWithSlotShorthand","typeName","match","includes","transformArgTypesWithSlotShorthand","Object","values","forEach","argType","table","summary","transformComponentDocGenProps","component","docGenProps","__docgenInfo","moduleExport","slotsApi","subcomponents","AdditionalApiDocs","children","styles","RenderArgsTable","hideArgsTable","showSlotsApi","showNativePropsApi","p","b","span","role","br","of","RenderPrimaryStory","primaryStory","skipPrimaryStory","hr","id","FluentDocsPage","primaryStoryContext","context","useContext","docsPageConfig","stories","componentStories","getStoryContext","assertStoryMetaValues","dir","parameters","globals","selectedTheme","find","theme","Boolean","docs","tableOfContents","showTableOfContents","dirSwitcher","showDirSwitcher","themePicker","showThemePicker","copyAsMarkdown","showCopyAsMarkdown","argTable","selectedThemeId","storyId","Error","componentId","join"],"mappings":"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"}

package/lib/docs/FluentStory.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+const iframeStyle = {
+    width: '100%',
+    border: 'none'
+};
+/**
+ * Story component to render stories in an iframe.
+ * Provides a similar experience to Storybook's v7 `Story` component.
+ */ export const FluentStory = ({ id, height })=>{
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "sb-story sb-unstyled"
+    }, /*#__PURE__*/ React.createElement("iframe", {
+        title: id,
+        src: `iframe.html?id=${id}&mode=story`,
+        style: iframeStyle,
+        height: height
+    }));
+};

package/lib/docs/FluentStory.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/FluentStory.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nconst iframeStyle: React.CSSProperties = {\n  width: '100%',\n  border: 'none',\n};\n\ntype FluentStoryProps = {\n  /** The unique identifier for the story */\n  id: string;\n  /** The height of the iframe */\n  height?: string | number;\n};\n\n/**\n * Story component to render stories in an iframe.\n * Provides a similar experience to Storybook's v7 `Story` component.\n */\nexport const FluentStory = ({ id, height }: FluentStoryProps): JSXElement => {\n  return (\n    <div className=\"sb-story sb-unstyled\">\n      <iframe title={id} src={`iframe.html?id=${id}&mode=story`} style={iframeStyle} height={height} />\n    </div>\n  );\n};\n"],"names":["React","iframeStyle","width","border","FluentStory","id","height","div","className","iframe","title","src","style"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,cAAmC;IACvCC,OAAO;IACPC,QAAQ;AACV;AASA;;;CAGC,GACD,OAAO,MAAMC,cAAc,CAAC,EAAEC,EAAE,EAAEC,MAAM,EAAoB;IAC1D,qBACE,oBAACC;QAAIC,WAAU;qBACb,oBAACC;QAAOC,OAAOL;QAAIM,KAAK,CAAC,eAAe,EAAEN,GAAG,WAAW,CAAC;QAAEO,OAAOX;QAAaK,QAAQA;;AAG7F,EAAE"}

package/lib/docs/ThemePicker.js

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { addons } from 'storybook/preview-api';
+import { Menu, MenuItemRadio, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
+import { MenuButton } from '@fluentui/react-button';
+import { makeStyles } from '@griffel/react';
+import { themes, THEME_ID } from '..';
+const useStyles = makeStyles({
+    menuButton: {
+        minWidth: '210px',
+        justifyContent: 'flex-start'
+    },
+    chevronIcon: {
+        marginLeft: 'auto'
+    },
+    menuPopover: {
+        minWidth: '210px'
+    }
+});
+/**
+ * Theme picker used in the react-components docs header
+ */ export const ThemePicker = ({ selectedThemeId })=>{
+    const styles = useStyles();
+    const [currentThemeId, setCurrentThemeId] = React.useState(selectedThemeId !== null && selectedThemeId !== void 0 ? selectedThemeId : null);
+    const setGlobalTheme = (themeId)=>{
+        addons.getChannel().emit('updateGlobals', {
+            globals: {
+                [THEME_ID]: themeId
+            }
+        });
+    };
+    const onCheckedValueChange = (e, data)=>{
+        const newThemeId = data.checkedItems[0];
+        setGlobalTheme(newThemeId);
+        setCurrentThemeId(newThemeId);
+    };
+    const selectedTheme = themes.find((theme)=>theme.id === currentThemeId);
+    var _selectedTheme_label;
+    return /*#__PURE__*/ React.createElement(Menu, {
+        // eslint-disable-next-line react/jsx-no-bind
+        onCheckedValueChange: onCheckedValueChange,
+        checkedValues: {
+            theme: selectedThemeId ? [
+                selectedThemeId
+            ] : []
+        },
+        positioning: {
+            autoSize: true
+        }
+    }, /*#__PURE__*/ React.createElement(MenuTrigger, null, /*#__PURE__*/ React.createElement(MenuButton, {
+        className: styles.menuButton,
+        menuIcon: {
+            className: styles.chevronIcon
+        }
+    }, (_selectedTheme_label = selectedTheme === null || selectedTheme === void 0 ? void 0 : selectedTheme.label) !== null && _selectedTheme_label !== void 0 ? _selectedTheme_label : 'Theme')), /*#__PURE__*/ React.createElement(MenuPopover, {
+        className: styles.menuPopover
+    }, /*#__PURE__*/ React.createElement(MenuList, null, themes.map((theme)=>/*#__PURE__*/ React.createElement(MenuItemRadio, {
+            name: "theme",
+            value: theme.id,
+            key: theme.id
+        }, theme.label)))));
+};

package/lib/docs/ThemePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/ThemePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { addons } from 'storybook/preview-api';\n\nimport { Menu, MenuItemRadio, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';\nimport type { MenuProps } from '@fluentui/react-menu';\nimport { MenuButton } from '@fluentui/react-button';\nimport { makeStyles } from '@griffel/react';\n\nimport { themes, ThemeIds, THEME_ID } from '..';\n\nconst useStyles = makeStyles({\n  menuButton: {\n    minWidth: '210px',\n    justifyContent: 'flex-start',\n  },\n\n  chevronIcon: {\n    marginLeft: 'auto',\n  },\n\n  menuPopover: {\n    minWidth: '210px',\n  },\n});\n\n/**\n * Theme picker used in the react-components docs header\n */\nexport const ThemePicker: React.FC<{ selectedThemeId?: string }> = ({ selectedThemeId }) => {\n  const styles = useStyles();\n  const [currentThemeId, setCurrentThemeId] = React.useState(selectedThemeId ?? null);\n\n  const setGlobalTheme = (themeId: ThemeIds): void => {\n    addons.getChannel().emit('updateGlobals', { globals: { [THEME_ID]: themeId } });\n  };\n  const onCheckedValueChange: MenuProps['onCheckedValueChange'] = (e, data) => {\n    const newThemeId = data.checkedItems[0] as ThemeIds;\n    setGlobalTheme(newThemeId);\n    setCurrentThemeId(newThemeId);\n  };\n\n  const selectedTheme = themes.find(theme => theme.id === currentThemeId);\n\n  return (\n    <Menu\n      // eslint-disable-next-line react/jsx-no-bind\n      onCheckedValueChange={onCheckedValueChange}\n      checkedValues={{ theme: selectedThemeId ? [selectedThemeId] : [] }}\n      positioning={{ autoSize: true }}\n    >\n      <MenuTrigger>\n        <MenuButton className={styles.menuButton} menuIcon={{ className: styles.chevronIcon }}>\n          {selectedTheme?.label ?? 'Theme'}\n        </MenuButton>\n      </MenuTrigger>\n      <MenuPopover className={styles.menuPopover}>\n        <MenuList>\n          {themes.map(theme => (\n            <MenuItemRadio name=\"theme\" value={theme.id} key={theme.id}>\n              {theme.label}\n            </MenuItemRadio>\n          ))}\n        </MenuList>\n      </MenuPopover>\n    </Menu>\n  );\n};\n"],"names":["React","addons","Menu","MenuItemRadio","MenuList","MenuPopover","MenuTrigger","MenuButton","makeStyles","themes","THEME_ID","useStyles","menuButton","minWidth","justifyContent","chevronIcon","marginLeft","menuPopover","ThemePicker","selectedThemeId","styles","currentThemeId","setCurrentThemeId","useState","setGlobalTheme","themeId","getChannel","emit","globals","onCheckedValueChange","e","data","newThemeId","checkedItems","selectedTheme","find","theme","id","checkedValues","positioning","autoSize","className","menuIcon","label","map","name","value","key"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,IAAI,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,WAAW,QAAQ,uBAAuB;AAE/F,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,MAAM,EAAYC,QAAQ,QAAQ,KAAK;AAEhD,MAAMC,YAAYH,WAAW;IAC3BI,YAAY;QACVC,UAAU;QACVC,gBAAgB;IAClB;IAEAC,aAAa;QACXC,YAAY;IACd;IAEAC,aAAa;QACXJ,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,cAAsD,CAAC,EAAEC,eAAe,EAAE;IACrF,MAAMC,SAAST;IACf,MAAM,CAACU,gBAAgBC,kBAAkB,GAAGtB,MAAMuB,QAAQ,CAACJ,4BAAAA,6BAAAA,kBAAmB;IAE9E,MAAMK,iBAAiB,CAACC;QACtBxB,OAAOyB,UAAU,GAAGC,IAAI,CAAC,iBAAiB;YAAEC,SAAS;gBAAE,CAAClB,SAAS,EAAEe;YAAQ;QAAE;IAC/E;IACA,MAAMI,uBAA0D,CAACC,GAAGC;QAClE,MAAMC,aAAaD,KAAKE,YAAY,CAAC,EAAE;QACvCT,eAAeQ;QACfV,kBAAkBU;IACpB;IAEA,MAAME,gBAAgBzB,OAAO0B,IAAI,CAACC,CAAAA,QAASA,MAAMC,EAAE,KAAKhB;QAW/Ca;IATT,qBACE,oBAAChC;QACC,6CAA6C;QAC7C2B,sBAAsBA;QACtBS,eAAe;YAAEF,OAAOjB,kBAAkB;gBAACA;aAAgB,GAAG,EAAE;QAAC;QACjEoB,aAAa;YAAEC,UAAU;QAAK;qBAE9B,oBAAClC,iCACC,oBAACC;QAAWkC,WAAWrB,OAAOR,UAAU;QAAE8B,UAAU;YAAED,WAAWrB,OAAOL,WAAW;QAAC;OACjFmB,CAAAA,uBAAAA,0BAAAA,oCAAAA,cAAeS,KAAK,cAApBT,kCAAAA,uBAAwB,yBAG7B,oBAAC7B;QAAYoC,WAAWrB,OAAOH,WAAW;qBACxC,oBAACb,gBACEK,OAAOmC,GAAG,CAACR,CAAAA,sBACV,oBAACjC;YAAc0C,MAAK;YAAQC,OAAOV,MAAMC,EAAE;YAAEU,KAAKX,MAAMC,EAAE;WACvDD,MAAMO,KAAK;AAO1B,EAAE"}