@fluentui/react-storybook-addon 0.5.0 → 0.6.0

package/lib/docs/Toc.js

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { addons } from 'storybook/manager-api';
+import { NAVIGATE_URL } from 'storybook/internal/core-events';
+import { makeStyles } from '@griffel/react';
+const useTocStyles = makeStyles({
+    root: {
+        top: '64px',
+        position: 'sticky',
+        marginLeft: '40px'
+    },
+    heading: {
+        fontSize: '11px',
+        fontWeight: 'bold',
+        textTransform: 'uppercase',
+        marginBottom: '20px'
+    },
+    ol: {
+        position: 'relative',
+        listStyleType: 'none',
+        marginLeft: 0,
+        marginTop: 0,
+        paddingInlineStart: '20px',
+        '& li': {
+            marginBottom: '15px',
+            lineHeight: '16px'
+        },
+        '& a': {
+            textDecorationLine: 'none',
+            color: '#201F1E',
+            fontSize: '14px',
+            ':hover': {
+                color: '#201F1E'
+            }
+        },
+        '&:before': {
+            content: '""',
+            position: 'absolute',
+            left: 0,
+            height: '100%',
+            width: '3px',
+            backgroundColor: '#EDEBE9',
+            borderRadius: '4px'
+        }
+    },
+    selected: {
+        position: 'relative',
+        '&:after': {
+            content: '""',
+            position: 'absolute',
+            left: '-20px',
+            top: 0,
+            bottom: 0,
+            width: '3px',
+            backgroundColor: '#436DCD',
+            borderRadius: '4px'
+        }
+    }
+});
+// // Alternative approach to navigate - rerenders the iframe
+// // Usage: selectStory({ story: s.name, kind: s.kind });
+// const selectStory = (story: { kind: string; story: string }) => {
+//   console.log('Select Story', story);
+//   addons.getChannel().emit(SELECT_STORY, story);
+// };
+const navigate = (url)=>{
+    addons.getChannel().emit(NAVIGATE_URL, url);
+};
+export const nameToHash = (id)=>id.toLowerCase().replace(/[^a-z0-9]/gi, '-');
+export const Toc = ({ stories })=>{
+    const [selected, setSelected] = React.useState('');
+    const isNavigating = React.useRef(false);
+    React.useEffect(()=>{
+        // eslint-disable-next-line @nx/workspace-no-restricted-globals
+        const observer = new IntersectionObserver((entries)=>{
+            if (isNavigating.current) {
+                isNavigating.current = false;
+                return;
+            }
+            for (const entry of entries){
+                const { intersectionRatio, target } = entry;
+                if (intersectionRatio > 0.5) {
+                    setSelected(target.id);
+                    return;
+                }
+            }
+        }, {
+            threshold: [
+                0.5
+            ]
+        });
+        stories.forEach((link)=>{
+            // eslint-disable-next-line @nx/workspace-no-restricted-globals
+            const element = document.getElementById(nameToHash(link.name));
+            if (element) {
+                observer.observe(element);
+            }
+        });
+        return ()=>observer.disconnect();
+    }, [
+        stories
+    ]);
+    const tocItems = stories.map((item)=>{
+        return {
+            ...item,
+            selected: nameToHash(item.name) === selected
+        };
+    });
+    const tocClasses = useTocStyles();
+    return /*#__PURE__*/ React.createElement("nav", {
+        className: tocClasses.root
+    }, /*#__PURE__*/ React.createElement("h3", {
+        className: tocClasses.heading
+    }, "On this page"), /*#__PURE__*/ React.createElement("ol", {
+        className: tocClasses.ol
+    }, tocItems.map((s)=>{
+        const name = nameToHash(s.name);
+        return /*#__PURE__*/ React.createElement("li", {
+            className: s.selected ? tocClasses.selected : '',
+            key: s.id
+        }, /*#__PURE__*/ React.createElement("a", {
+            href: `#${name}`,
+            target: "_self",
+            onClick: (e)=>{
+                isNavigating.current = true;
+                navigate(`#${name}`);
+                setSelected(name);
+            }
+        }, s.name));
+    })));
+};

package/lib/docs/Toc.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/Toc.tsx"],"sourcesContent":["import * as React from 'react';\nimport { addons } from 'storybook/manager-api';\nimport { NAVIGATE_URL } from 'storybook/internal/core-events';\n\nimport { makeStyles } from '@griffel/react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nconst useTocStyles = makeStyles({\n  root: {\n    top: '64px',\n    position: 'sticky',\n    marginLeft: '40px',\n  },\n  heading: {\n    fontSize: '11px',\n    fontWeight: 'bold',\n    textTransform: 'uppercase',\n    marginBottom: '20px',\n  },\n  ol: {\n    position: 'relative',\n    listStyleType: 'none',\n    marginLeft: 0,\n    marginTop: 0,\n    paddingInlineStart: '20px',\n    '& li': {\n      marginBottom: '15px',\n      lineHeight: '16px',\n    },\n    '& a': {\n      textDecorationLine: 'none',\n      color: '#201F1E',\n      fontSize: '14px',\n      ':hover': {\n        color: '#201F1E',\n      },\n    },\n    '&:before': {\n      content: '\"\"',\n      position: 'absolute',\n      left: 0,\n      height: '100%',\n      width: '3px',\n      backgroundColor: '#EDEBE9',\n      borderRadius: '4px',\n    },\n  },\n  selected: {\n    position: 'relative',\n    '&:after': {\n      content: '\"\"',\n      position: 'absolute',\n      left: '-20px',\n      top: 0,\n      bottom: 0,\n      width: '3px',\n      backgroundColor: '#436DCD',\n      borderRadius: '4px',\n    },\n  },\n});\n\ntype TocItem = { name: string; id: string; selected?: boolean };\n\n// // Alternative approach to navigate - rerenders the iframe\n// // Usage: selectStory({ story: s.name, kind: s.kind });\n// const selectStory = (story: { kind: string; story: string }) => {\n//   console.log('Select Story', story);\n//   addons.getChannel().emit(SELECT_STORY, story);\n// };\n\nconst navigate = (url: string) => {\n  addons.getChannel().emit(NAVIGATE_URL, url);\n};\n\nexport const nameToHash = (id: string): string => id.toLowerCase().replace(/[^a-z0-9]/gi, '-');\n\nexport const Toc = ({ stories }: { stories: TocItem[] }): JSXElement => {\n  const [selected, setSelected] = React.useState('');\n  const isNavigating = React.useRef<boolean>(false);\n\n  React.useEffect(() => {\n    // eslint-disable-next-line @nx/workspace-no-restricted-globals\n    const observer = new IntersectionObserver(\n      (entries: IntersectionObserverEntry[]) => {\n        if (isNavigating.current) {\n          isNavigating.current = false;\n          return;\n        }\n        for (const entry of entries) {\n          const { intersectionRatio, target } = entry;\n          if (intersectionRatio > 0.5) {\n            setSelected(target.id);\n            return;\n          }\n        }\n      },\n      {\n        threshold: [0.5],\n      },\n    );\n\n    stories.forEach(link => {\n      // eslint-disable-next-line @nx/workspace-no-restricted-globals\n      const element = document.getElementById(nameToHash(link.name));\n      if (element) {\n        observer.observe(element);\n      }\n    });\n\n    return () => observer.disconnect();\n  }, [stories]);\n\n  const tocItems = stories.map(item => {\n    return { ...item, selected: nameToHash(item.name) === selected };\n  });\n  const tocClasses = useTocStyles();\n  return (\n    <nav className={tocClasses.root}>\n      <h3 className={tocClasses.heading}>On this page</h3>\n      <ol className={tocClasses.ol}>\n        {tocItems.map(s => {\n          const name = nameToHash(s.name);\n          return (\n            <li className={s.selected ? tocClasses.selected : ''} key={s.id}>\n              <a\n                href={`#${name}`}\n                target=\"_self\"\n                onClick={e => {\n                  isNavigating.current = true;\n                  navigate(`#${name}`);\n                  setSelected(name);\n                }}\n              >\n                {s.name}\n              </a>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["React","addons","NAVIGATE_URL","makeStyles","useTocStyles","root","top","position","marginLeft","heading","fontSize","fontWeight","textTransform","marginBottom","ol","listStyleType","marginTop","paddingInlineStart","lineHeight","textDecorationLine","color","content","left","height","width","backgroundColor","borderRadius","selected","bottom","navigate","url","getChannel","emit","nameToHash","id","toLowerCase","replace","Toc","stories","setSelected","useState","isNavigating","useRef","useEffect","observer","IntersectionObserver","entries","current","entry","intersectionRatio","target","threshold","forEach","link","element","document","getElementById","name","observe","disconnect","tocItems","map","item","tocClasses","nav","className","h3","s","li","key","a","href","onClick","e"],"mappings":"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"}

package/lib/docs/index.js

@@ -0,0 +1,4 @@
+export { FluentCanvas } from './FluentCanvas';
+export { FluentDocsContainer } from './FluentDocsContainer';
+export { FluentDocsPage } from './FluentDocsPage';
+export { FluentStory } from './FluentStory';

package/lib/docs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/index.ts"],"sourcesContent":["export { FluentCanvas } from './FluentCanvas';\nexport { FluentDocsContainer } from './FluentDocsContainer';\nexport { FluentDocsPage } from './FluentDocsPage';\nexport { FluentStory } from './FluentStory';\n"],"names":["FluentCanvas","FluentDocsContainer","FluentDocsPage","FluentStory"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,WAAW,QAAQ,gBAAgB"}

package/lib/docs/utils.js

@@ -0,0 +1,74 @@
+const docsDefaults = {
+    copyAsMarkdown: true,
+    tableOfContents: true,
+    dirSwitcher: true,
+    themePicker: true,
+    argTable: {
+        slotsApi: true,
+        nativePropsApi: true
+    }
+};
+function getDocsParametersConfig(context) {
+    var _context_projectAnnotations_parameters_reactStorybookAddon, _context_projectAnnotations_parameters, _context_projectAnnotations;
+    return context === null || context === void 0 ? void 0 : (_context_projectAnnotations = context.projectAnnotations) === null || _context_projectAnnotations === void 0 ? void 0 : (_context_projectAnnotations_parameters = _context_projectAnnotations.parameters) === null || _context_projectAnnotations_parameters === void 0 ? void 0 : (_context_projectAnnotations_parameters_reactStorybookAddon = _context_projectAnnotations_parameters.reactStorybookAddon) === null || _context_projectAnnotations_parameters_reactStorybookAddon === void 0 ? void 0 : _context_projectAnnotations_parameters_reactStorybookAddon.docs;
+}
+/**
+ * Checks if the docs page is enabled
+ */ export function isDocsEnabled(context) {
+    const docsConfig = getDocsParametersConfig(context);
+    // If docs is true, enable page
+    if (docsConfig === true) {
+        return true;
+    }
+    // If docs is an object, page is enabled
+    if (typeof docsConfig === 'object' && docsConfig !== null) {
+        return true;
+    }
+    // Default: disabled
+    return false;
+}
+/**
+ * Gets the docs page configuration from context
+ */ export function getDocsPageConfig(context) {
+    const docsConfig = getDocsParametersConfig(context);
+    // If docs is true, return default config (all enabled)
+    if (docsConfig === true) {
+        return docsDefaults;
+    }
+    // If docs is an object, extract the configuration directly
+    if (typeof docsConfig === 'object' && docsConfig !== null) {
+        return {
+            copyAsMarkdown: docsConfig.copyAsMarkdown !== false,
+            tableOfContents: docsConfig.tableOfContents !== false,
+            dirSwitcher: docsConfig.dirSwitcher !== false,
+            themePicker: docsConfig.themePicker !== false,
+            argTable: getArgTableConfig(docsConfig.argTable)
+        };
+    }
+    // Fallback
+    return null;
+}
+/**
+ * Gets the argTable configuration with early exit pattern
+ */ function getArgTableConfig(argTableConfig) {
+    if (argTableConfig === false) {
+        return {
+            slotsApi: false,
+            nativePropsApi: false
+        };
+    }
+    if (argTableConfig === true || argTableConfig === undefined) {
+        return {
+            slotsApi: true,
+            nativePropsApi: true
+        };
+    }
+    if (typeof argTableConfig === 'object' && argTableConfig !== null) {
+        return {
+            slotsApi: argTableConfig.slotsApi !== false,
+            nativePropsApi: argTableConfig.nativePropsApi !== false
+        };
+    }
+    // Fallback to default
+    return docsDefaults.argTable;
+}

package/lib/docs/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/utils.ts"],"sourcesContent":["import { type DocsContextProps } from '@storybook/addon-docs/blocks';\n\nimport { type FluentParameters } from '../hooks';\n\nconst docsDefaults = {\n  copyAsMarkdown: true,\n  tableOfContents: true,\n  dirSwitcher: true,\n  themePicker: true,\n  argTable: {\n    slotsApi: true,\n    nativePropsApi: true,\n  },\n};\n\nfunction getDocsParametersConfig(\n  context: DocsContextProps,\n): NonNullable<FluentParameters['reactStorybookAddon']>['docs'] {\n  return context?.projectAnnotations?.parameters?.reactStorybookAddon?.docs;\n}\n\n/**\n * Checks if the docs page is enabled\n */\nexport function isDocsEnabled(context: DocsContextProps): boolean {\n  const docsConfig = getDocsParametersConfig(context);\n\n  // If docs is true, enable page\n  if (docsConfig === true) {\n    return true;\n  }\n\n  // If docs is an object, page is enabled\n  if (typeof docsConfig === 'object' && docsConfig !== null) {\n    return true;\n  }\n\n  // Default: disabled\n  return false;\n}\n\n/**\n * Gets the docs page configuration from context\n */\nexport function getDocsPageConfig(context: DocsContextProps): {\n  tableOfContents: boolean;\n  dirSwitcher: boolean;\n  themePicker: boolean;\n  copyAsMarkdown: boolean;\n  argTable: {\n    slotsApi: boolean;\n    nativePropsApi: boolean;\n  };\n} | null {\n  const docsConfig = getDocsParametersConfig(context);\n\n  // If docs is true, return default config (all enabled)\n  if (docsConfig === true) {\n    return docsDefaults;\n  }\n\n  // If docs is an object, extract the configuration directly\n  if (typeof docsConfig === 'object' && docsConfig !== null) {\n    return {\n      copyAsMarkdown: docsConfig.copyAsMarkdown !== false,\n      tableOfContents: docsConfig.tableOfContents !== false,\n      dirSwitcher: docsConfig.dirSwitcher !== false,\n      themePicker: docsConfig.themePicker !== false,\n      argTable: getArgTableConfig(docsConfig.argTable),\n    };\n  }\n\n  // Fallback\n  return null;\n}\n\n/**\n * Gets the argTable configuration with early exit pattern\n */\nfunction getArgTableConfig(argTableConfig: boolean | { slotsApi?: boolean; nativePropsApi?: boolean } | undefined) {\n  if (argTableConfig === false) {\n    return {\n      slotsApi: false,\n      nativePropsApi: false,\n    };\n  }\n\n  if (argTableConfig === true || argTableConfig === undefined) {\n    return {\n      slotsApi: true,\n      nativePropsApi: true,\n    };\n  }\n\n  if (typeof argTableConfig === 'object' && argTableConfig !== null) {\n    return {\n      slotsApi: argTableConfig.slotsApi !== false,\n      nativePropsApi: argTableConfig.nativePropsApi !== false,\n    };\n  }\n\n  // Fallback to default\n  return docsDefaults.argTable;\n}\n"],"names":["docsDefaults","copyAsMarkdown","tableOfContents","dirSwitcher","themePicker","argTable","slotsApi","nativePropsApi","getDocsParametersConfig","context","projectAnnotations","parameters","reactStorybookAddon","docs","isDocsEnabled","docsConfig","getDocsPageConfig","getArgTableConfig","argTableConfig","undefined"],"mappings":"AAIA,MAAMA,eAAe;IACnBC,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,aAAa;IACbC,UAAU;QACRC,UAAU;QACVC,gBAAgB;IAClB;AACF;AAEA,SAASC,wBACPC,OAAyB;QAElBA,4DAAAA,wCAAAA;IAAP,OAAOA,oBAAAA,+BAAAA,8BAAAA,QAASC,kBAAkB,cAA3BD,mDAAAA,yCAAAA,4BAA6BE,UAAU,cAAvCF,8DAAAA,6DAAAA,uCAAyCG,mBAAmB,cAA5DH,iFAAAA,2DAA8DI,IAAI;AAC3E;AAEA;;CAEC,GACD,OAAO,SAASC,cAAcL,OAAyB;IACrD,MAAMM,aAAaP,wBAAwBC;IAE3C,+BAA+B;IAC/B,IAAIM,eAAe,MAAM;QACvB,OAAO;IACT;IAEA,wCAAwC;IACxC,IAAI,OAAOA,eAAe,YAAYA,eAAe,MAAM;QACzD,OAAO;IACT;IAEA,oBAAoB;IACpB,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,SAASC,kBAAkBP,OAAyB;IAUzD,MAAMM,aAAaP,wBAAwBC;IAE3C,uDAAuD;IACvD,IAAIM,eAAe,MAAM;QACvB,OAAOf;IACT;IAEA,2DAA2D;IAC3D,IAAI,OAAOe,eAAe,YAAYA,eAAe,MAAM;QACzD,OAAO;YACLd,gBAAgBc,WAAWd,cAAc,KAAK;YAC9CC,iBAAiBa,WAAWb,eAAe,KAAK;YAChDC,aAAaY,WAAWZ,WAAW,KAAK;YACxCC,aAAaW,WAAWX,WAAW,KAAK;YACxCC,UAAUY,kBAAkBF,WAAWV,QAAQ;QACjD;IACF;IAEA,WAAW;IACX,OAAO;AACT;AAEA;;CAEC,GACD,SAASY,kBAAkBC,cAAsF;IAC/G,IAAIA,mBAAmB,OAAO;QAC5B,OAAO;YACLZ,UAAU;YACVC,gBAAgB;QAClB;IACF;IAEA,IAAIW,mBAAmB,QAAQA,mBAAmBC,WAAW;QAC3D,OAAO;YACLb,UAAU;YACVC,gBAAgB;QAClB;IACF;IAEA,IAAI,OAAOW,mBAAmB,YAAYA,mBAAmB,MAAM;QACjE,OAAO;YACLZ,UAAUY,eAAeZ,QAAQ,KAAK;YACtCC,gBAAgBW,eAAeX,cAAc,KAAK;QACpD;IACF;IAEA,sBAAsB;IACtB,OAAOP,aAAaK,QAAQ;AAC9B"}

package/lib/hooks.js

@@ -0,0 +1,16 @@
+import { useGlobals as useStorybookGlobals } from 'storybook/manager-api';
+export function useGlobals() {
+    return useStorybookGlobals();
+}
+export function parameters(options) {
+    return {
+        dir: 'ltr',
+        fluentTheme: 'web-light',
+        mode: 'default',
+        ...options
+    };
+}
+export function getParametersConfig(context) {
+    var _context_parameters;
+    return context === null || context === void 0 ? void 0 : (_context_parameters = context.parameters) === null || _context_parameters === void 0 ? void 0 : _context_parameters.reactStorybookAddon;
+}

package/lib/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks.ts"],"sourcesContent":["import { useGlobals as useStorybookGlobals } from 'storybook/manager-api';\nimport { Args as StorybookArgs, StoryContext as StorybookContext, Parameters } from '@storybook/react-webpack5';\n\nimport { DIR_ID, STRICT_MODE_ID, THEME_ID } from './constants';\nimport type { ThemeIds } from './theme';\n\nexport interface FluentStoryContext extends StorybookContext {\n  globals: FluentGlobals;\n  parameters: FluentParameters;\n}\n\n/**\n * Extends the storybook globals object to include fluent specific properties\n */\nexport interface FluentGlobals extends StorybookArgs {\n  [DIR_ID]?: 'ltr' | 'rtl';\n  [THEME_ID]?: ThemeIds;\n  [STRICT_MODE_ID]?: boolean;\n}\n\n/**\n * Extends the storybook parameters object to include fluent specific properties\n */\nexport interface FluentParameters extends Parameters {\n  dir?: 'ltr' | 'rtl';\n  fluentTheme?: ThemeIds;\n  mode?: 'default' | 'vr-test';\n  reactStorybookAddon?: {\n    disabledDecorators?: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'];\n    docs?: FluentDocsConfig;\n  };\n}\n\n/**\n * Configuration for docs components\n */\ntype FluentDocsConfig =\n  | boolean\n  | {\n      tableOfContents?: boolean;\n      dirSwitcher?: boolean;\n      themePicker?: boolean;\n      copyAsMarkdown?: boolean;\n      argTable?:\n        | boolean\n        | {\n            slotsApi?: boolean;\n            nativePropsApi?: boolean;\n          };\n    };\n\nexport function useGlobals(): [FluentGlobals, (newGlobals: FluentGlobals) => void, FluentGlobals, FluentGlobals] {\n  return useStorybookGlobals();\n}\n\nexport function parameters(options?: FluentParameters): FluentParameters {\n  return { dir: 'ltr', fluentTheme: 'web-light', mode: 'default', ...options };\n}\nexport function getParametersConfig(context: FluentStoryContext): FluentParameters['reactStorybookAddon'] {\n  return context?.parameters?.reactStorybookAddon;\n}\n"],"names":["useGlobals","useStorybookGlobals","parameters","options","dir","fluentTheme","mode","getParametersConfig","context","reactStorybookAddon"],"mappings":"AAAA,SAASA,cAAcC,mBAAmB,QAAQ,wBAAwB;AAmD1E,OAAO,SAASD;IACd,OAAOC;AACT;AAEA,OAAO,SAASC,WAAWC,OAA0B;IACnD,OAAO;QAAEC,KAAK;QAAOC,aAAa;QAAaC,MAAM;QAAW,GAAGH,OAAO;IAAC;AAC7E;AACA,OAAO,SAASI,oBAAoBC,OAA2B;QACtDA;IAAP,OAAOA,oBAAAA,+BAAAA,sBAAAA,QAASN,UAAU,cAAnBM,0CAAAA,oBAAqBC,mBAAmB;AACjD"}

package/lib/index.js

@@ -0,0 +1,4 @@
+export { themes } from './theme';
+export { DIR_ID, THEME_ID } from './constants';
+export { parameters } from './hooks';
+export { FluentCanvas, FluentStory } from './docs';

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { FluentGlobals, FluentParameters, FluentStoryContext } from './hooks';\nexport type { ThemeIds } from './theme';\nexport { themes } from './theme';\nexport { DIR_ID, THEME_ID } from './constants';\nexport { parameters } from './hooks';\nexport { FluentCanvas, FluentStory } from './docs';\n"],"names":["themes","DIR_ID","THEME_ID","parameters","FluentCanvas","FluentStory"],"mappings":"AAEA,SAASA,MAAM,QAAQ,UAAU;AACjC,SAASC,MAAM,EAAEC,QAAQ,QAAQ,cAAc;AAC/C,SAASC,UAAU,QAAQ,UAAU;AACrC,SAASC,YAAY,EAAEC,WAAW,QAAQ,SAAS"}

package/lib/preset/manager.js

@@ -0,0 +1,25 @@
+import { addons, types } from 'storybook/manager-api';
+import { ADDON_ID, DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';
+import { ThemePicker } from '../components/ThemePicker';
+import { ReactStrictMode } from '../components/ReactStrictMode';
+import { DirectionSwitch } from '../components/DirectionSwitch';
+addons.register(ADDON_ID, ()=>{
+    addons.add(THEME_ID, {
+        title: 'Fluent Theme Picker',
+        type: types.TOOL,
+        match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),
+        render: ThemePicker
+    });
+    addons.add(DIR_ID, {
+        title: 'Direction Switch',
+        type: types.TOOL,
+        match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),
+        render: DirectionSwitch
+    });
+    addons.add(STRICT_MODE_ID, {
+        type: types.TOOL,
+        title: 'React Strict Mode',
+        match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),
+        render: ReactStrictMode
+    });
+});

package/lib/preset/manager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/preset/manager.ts"],"sourcesContent":["import { addons, types } from 'storybook/manager-api';\n\nimport { ADDON_ID, DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';\nimport { ThemePicker } from '../components/ThemePicker';\nimport { ReactStrictMode } from '../components/ReactStrictMode';\nimport { DirectionSwitch } from '../components/DirectionSwitch';\n\naddons.register(ADDON_ID, () => {\n  addons.add(THEME_ID, {\n    title: 'Fluent Theme Picker',\n\n    type: types.TOOL,\n    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n    render: ThemePicker,\n  });\n  addons.add(DIR_ID, {\n    title: 'Direction Switch',\n\n    type: types.TOOL,\n    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n    render: DirectionSwitch,\n  });\n  addons.add(STRICT_MODE_ID, {\n    type: types.TOOL,\n    title: 'React Strict Mode',\n    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n    render: ReactStrictMode,\n  });\n});\n"],"names":["addons","types","ADDON_ID","DIR_ID","STRICT_MODE_ID","THEME_ID","ThemePicker","ReactStrictMode","DirectionSwitch","register","add","title","type","TOOL","match","viewMode","render"],"mappings":"AAAA,SAASA,MAAM,EAAEC,KAAK,QAAQ,wBAAwB;AAEtD,SAASC,QAAQ,EAAEC,MAAM,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,eAAe;AAC1E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,eAAe,QAAQ,gCAAgC;AAEhER,OAAOS,QAAQ,CAACP,UAAU;IACxBF,OAAOU,GAAG,CAACL,UAAU;QACnBM,OAAO;QAEPC,MAAMX,MAAMY,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQV;IACV;IACAN,OAAOU,GAAG,CAACP,QAAQ;QACjBQ,OAAO;QAEPC,MAAMX,MAAMY,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQR;IACV;IACAR,OAAOU,GAAG,CAACN,gBAAgB;QACzBQ,MAAMX,MAAMY,IAAI;QAChBF,OAAO;QACPG,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQT;IACV;AACF"}

package/lib/preset/preview.js

@@ -0,0 +1,26 @@
+import { withFluentProvider } from '../decorators/withFluentProvider';
+import { withReactStrictMode } from '../decorators/withReactStrictMode';
+import { withAriaLive } from '../decorators/withAriaLive';
+import { FluentDocsContainer, FluentDocsPage } from '../docs';
+import { DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';
+export const decorators = [
+    withFluentProvider,
+    withAriaLive,
+    withReactStrictMode
+];
+export const initialGlobals = {
+    [THEME_ID]: undefined,
+    [DIR_ID]: undefined,
+    [STRICT_MODE_ID]: undefined
+}; // allow theme to be set by URL query param
+const preview = {
+    decorators,
+    initialGlobals,
+    parameters: {
+        docs: {
+            container: FluentDocsContainer,
+            page: FluentDocsPage
+        }
+    }
+};
+export default preview;

package/lib/preset/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/preset/preview.ts"],"sourcesContent":["import type { Preview } from '@storybook/react-webpack5';\n\nimport { withFluentProvider } from '../decorators/withFluentProvider';\nimport { withReactStrictMode } from '../decorators/withReactStrictMode';\nimport { withAriaLive } from '../decorators/withAriaLive';\nimport { FluentDocsContainer, FluentDocsPage } from '../docs';\n\nimport { DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';\n\nexport const decorators = [withFluentProvider, withAriaLive, withReactStrictMode] as Preview['decorators'];\n\nexport const initialGlobals = { [THEME_ID]: undefined, [DIR_ID]: undefined, [STRICT_MODE_ID]: undefined }; // allow theme to be set by URL query param\n\nconst preview: Preview = {\n  decorators,\n  initialGlobals,\n  parameters: {\n    docs: {\n      container: FluentDocsContainer,\n      page: FluentDocsPage,\n    },\n  },\n};\n\nexport default preview;\n"],"names":["withFluentProvider","withReactStrictMode","withAriaLive","FluentDocsContainer","FluentDocsPage","DIR_ID","STRICT_MODE_ID","THEME_ID","decorators","initialGlobals","undefined","preview","parameters","docs","container","page"],"mappings":"AAEA,SAASA,kBAAkB,QAAQ,mCAAmC;AACtE,SAASC,mBAAmB,QAAQ,oCAAoC;AACxE,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,mBAAmB,EAAEC,cAAc,QAAQ,UAAU;AAE9D,SAASC,MAAM,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,eAAe;AAEhE,OAAO,MAAMC,aAAa;IAACR;IAAoBE;IAAcD;CAAoB,CAA0B;AAE3G,OAAO,MAAMQ,iBAAiB;IAAE,CAACF,SAAS,EAAEG;IAAW,CAACL,OAAO,EAAEK;IAAW,CAACJ,eAAe,EAAEI;AAAU,EAAE,CAAC,2CAA2C;AAEtJ,MAAMC,UAAmB;IACvBH;IACAC;IACAG,YAAY;QACVC,MAAM;YACJC,WAAWX;YACXY,MAAMX;QACR;IACF;AACF;AAEA,eAAeO,QAAQ"}

package/lib/theme.js

@@ -0,0 +1,31 @@
+export const themes = [
+    {
+        id: 'web-light',
+        label: 'Web Light'
+    },
+    {
+        id: 'web-dark',
+        label: 'Web Dark'
+    },
+    {
+        id: 'teams-light',
+        label: 'Teams Light'
+    },
+    {
+        id: 'teams-dark',
+        label: 'Teams Dark'
+    },
+    {
+        id: 'teams-light-v21',
+        label: 'Teams Light V2.1'
+    },
+    {
+        id: 'teams-dark-v21',
+        label: 'Teams Dark V2.1'
+    },
+    {
+        id: 'teams-high-contrast',
+        label: 'Teams High Contrast'
+    }
+];
+export const defaultTheme = themes[0];

package/lib/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme.ts"],"sourcesContent":["export const themes = [\n  { id: 'web-light', label: 'Web Light' },\n  { id: 'web-dark', label: 'Web Dark' },\n  { id: 'teams-light', label: 'Teams Light' },\n  { id: 'teams-dark', label: 'Teams Dark' },\n  { id: 'teams-light-v21', label: 'Teams Light V2.1' },\n  { id: 'teams-dark-v21', label: 'Teams Dark V2.1' },\n  { id: 'teams-high-contrast', label: 'Teams High Contrast' },\n] as const;\n\nexport const defaultTheme = themes[0];\n\nexport type ThemeIds = (typeof themes)[number]['id'];\nexport type ThemeLabels = (typeof themes)[number]['label'];\n"],"names":["themes","id","label","defaultTheme"],"mappings":"AAAA,OAAO,MAAMA,SAAS;IACpB;QAAEC,IAAI;QAAaC,OAAO;IAAY;IACtC;QAAED,IAAI;QAAYC,OAAO;IAAW;IACpC;QAAED,IAAI;QAAeC,OAAO;IAAc;IAC1C;QAAED,IAAI;QAAcC,OAAO;IAAa;IACxC;QAAED,IAAI;QAAmBC,OAAO;IAAmB;IACnD;QAAED,IAAI;QAAkBC,OAAO;IAAkB;IACjD;QAAED,IAAI;QAAuBC,OAAO;IAAsB;CAC3D,CAAU;AAEX,OAAO,MAAMC,eAAeH,MAAM,CAAC,EAAE,CAAC"}

package/lib/utils/isDecoratorDisabled.js

@@ -0,0 +1,6 @@
+import { getParametersConfig } from '../hooks';
+export function isDecoratorDisabled(context, decoratorName) {
+    var _getParametersConfig_disabledDecorators, _getParametersConfig;
+    var _getParametersConfig_disabledDecorators_includes;
+    return (_getParametersConfig_disabledDecorators_includes = (_getParametersConfig = getParametersConfig(context)) === null || _getParametersConfig === void 0 ? void 0 : (_getParametersConfig_disabledDecorators = _getParametersConfig.disabledDecorators) === null || _getParametersConfig_disabledDecorators === void 0 ? void 0 : _getParametersConfig_disabledDecorators.includes(decoratorName)) !== null && _getParametersConfig_disabledDecorators_includes !== void 0 ? _getParametersConfig_disabledDecorators_includes : false;
+}

package/lib/utils/isDecoratorDisabled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/isDecoratorDisabled.ts"],"sourcesContent":["import { getParametersConfig, type FluentParameters, type FluentStoryContext } from '../hooks';\n\ntype DecoratorName = NonNullable<NonNullable<FluentParameters['reactStorybookAddon']>['disabledDecorators']>[number];\n\nexport function isDecoratorDisabled(context: FluentStoryContext, decoratorName: DecoratorName): boolean {\n  return getParametersConfig(context)?.disabledDecorators?.includes(decoratorName) ?? false;\n}\n"],"names":["getParametersConfig","isDecoratorDisabled","context","decoratorName","disabledDecorators","includes"],"mappings":"AAAA,SAASA,mBAAmB,QAAwD,WAAW;AAI/F,OAAO,SAASC,oBAAoBC,OAA2B,EAAEC,aAA4B;QACpFH,yCAAAA;QAAAA;IAAP,OAAOA,CAAAA,oDAAAA,uBAAAA,oBAAoBE,sBAApBF,4CAAAA,0CAAAA,qBAA8BI,kBAAkB,cAAhDJ,8DAAAA,wCAAkDK,QAAQ,CAACF,4BAA3DH,8DAAAA,mDAA6E;AACtF"}

package/lib-commonjs/components/DirectionSwitch.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DirectionSwitch", {
+    enumerable: true,
+    get: function() {
+        return DirectionSwitch;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _components = require("storybook/internal/components");
+const _theming = require("storybook/theming");
+const _constants = require("../constants");
+const _hooks = require("../hooks");
+const Monospace = _theming.styled.span({
+    fontFamily: "'Cascadia Code', Menlo, 'Courier New', Courier, monospace",
+    letterSpacing: '-0.05em'
+});
+const DirectionSwitch = ()=>{
+    const [globals, updateGlobals] = (0, _hooks.useGlobals)();
+    var _globals_DIR_ID;
+    const direction = (_globals_DIR_ID = globals[_constants.DIR_ID]) !== null && _globals_DIR_ID !== void 0 ? _globals_DIR_ID : 'ltr';
+    const isLTR = direction === 'ltr';
+    const toggleDirection = _react.useCallback(()=>updateGlobals({
+            [_constants.DIR_ID]: isLTR ? 'rtl' : 'ltr'
+        }), [
+        isLTR,
+        updateGlobals
+    ]);
+    return /*#__PURE__*/ _react.createElement(_components.IconButton, {
+        key: _constants.DIR_ID,
+        title: "Change Direction",
+        onClick: toggleDirection
+    }, /*#__PURE__*/ _react.createElement("div", null, "Direction: ", /*#__PURE__*/ _react.createElement(Monospace, null, direction.toUpperCase())));
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DirectionSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton } from 'storybook/internal/components';\nimport { styled } from 'storybook/theming';\n\nimport { JSXElement } from '@fluentui/react-utilities';\nimport { DIR_ID } from '../constants';\nimport { useGlobals } from '../hooks';\n\nconst Monospace = styled.span({\n  fontFamily: \"'Cascadia Code', Menlo, 'Courier New', Courier, monospace\",\n  letterSpacing: '-0.05em',\n});\n\nexport const DirectionSwitch = (): JSXElement => {\n  const [globals, updateGlobals] = useGlobals();\n\n  const direction = globals[DIR_ID] ?? 'ltr';\n  const isLTR = direction === 'ltr';\n\n  const toggleDirection = React.useCallback(\n    () =>\n      updateGlobals({\n        [DIR_ID]: isLTR ? 'rtl' : 'ltr',\n      }),\n    [isLTR, updateGlobals],\n  );\n\n  return (\n    <IconButton key={DIR_ID} title=\"Change Direction\" onClick={toggleDirection}>\n      <div>\n        Direction: <Monospace>{direction.toUpperCase()}</Monospace>\n      </div>\n    </IconButton>\n  );\n};\n"],"names":["DirectionSwitch","Monospace","styled","span","fontFamily","letterSpacing","globals","updateGlobals","useGlobals","direction","DIR_ID","isLTR","toggleDirection","React","useCallback","IconButton","key","title","onClick","div","toUpperCase"],"mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;4BACI;yBACJ;2BAGA;uBACI;AAE3B,MAAMC,YAAYC,eAAM,CAACC,IAAI,CAAC;IAC5BC,YAAY;IACZC,eAAe;AACjB;AAEO,MAAML,kBAAkB;IAC7B,MAAM,CAACM,SAASC,cAAc,GAAGC,IAAAA,iBAAU;QAEzBF;IAAlB,MAAMG,YAAYH,CAAAA,kBAAAA,OAAO,CAACI,iBAAM,CAAC,cAAfJ,6BAAAA,kBAAmB;IACrC,MAAMK,QAAQF,cAAc;IAE5B,MAAMG,kBAAkBC,OAAMC,WAAW,CACvC,IACEP,cAAc;YACZ,CAACG,iBAAM,CAAC,EAAEC,QAAQ,QAAQ;QAC5B,IACF;QAACA;QAAOJ;KAAc;IAGxB,qBACE,qBAACQ,sBAAU;QAACC,KAAKN,iBAAM;QAAEO,OAAM;QAAmBC,SAASN;qBACzD,qBAACO,aAAI,6BACQ,qBAAClB,iBAAWQ,UAAUW,WAAW;AAIpD"}

package/lib-commonjs/components/ReactStrictMode.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReactStrictMode", {
+    enumerable: true,
+    get: function() {
+        return ReactStrictMode;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _components = require("storybook/internal/components");
+const _icons = require("@storybook/icons");
+const _constants = require("../constants");
+const _hooks = require("../hooks");
+const ReactStrictMode = ()=>{
+    const [globals, updateGlobals] = (0, _hooks.useGlobals)();
+    var _globals_STRICT_MODE_ID;
+    const isActive = (_globals_STRICT_MODE_ID = globals[_constants.STRICT_MODE_ID]) !== null && _globals_STRICT_MODE_ID !== void 0 ? _globals_STRICT_MODE_ID : false;
+    const toggleStrictMode = _react.useCallback(()=>updateGlobals({
+            [_constants.STRICT_MODE_ID]: !isActive
+        }), [
+        isActive,
+        updateGlobals
+    ]);
+    return /*#__PURE__*/ _react.createElement(_components.IconButton, {
+        key: _constants.STRICT_MODE_ID,
+        active: isActive,
+        title: "Toggle React Strict mode",
+        onClick: toggleStrictMode
+    }, /*#__PURE__*/ _react.createElement(_icons.LockIcon, null));
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ReactStrictMode.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton } from 'storybook/internal/components';\nimport { LockIcon } from '@storybook/icons';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { STRICT_MODE_ID } from '../constants';\nimport { useGlobals } from '../hooks';\n\nexport const ReactStrictMode = (): JSXElement => {\n  const [globals, updateGlobals] = useGlobals();\n\n  const isActive = globals[STRICT_MODE_ID] ?? false;\n\n  const toggleStrictMode = React.useCallback(\n    () =>\n      updateGlobals({\n        [STRICT_MODE_ID]: !isActive,\n      }),\n    [isActive, updateGlobals],\n  );\n\n  return (\n    <IconButton key={STRICT_MODE_ID} active={isActive} title=\"Toggle React Strict mode\" onClick={toggleStrictMode}>\n      <LockIcon />\n    </IconButton>\n  );\n};\n"],"names":["ReactStrictMode","globals","updateGlobals","useGlobals","isActive","STRICT_MODE_ID","toggleStrictMode","React","useCallback","IconButton","key","active","title","onClick","LockIcon"],"mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;4BACI;uBACF;2BAGM;uBACJ;AAEpB,MAAMA,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGC,IAAAA,iBAAU;QAE1BF;IAAjB,MAAMG,WAAWH,CAAAA,0BAAAA,OAAO,CAACI,yBAAc,CAAC,cAAvBJ,qCAAAA,0BAA2B;IAE5C,MAAMK,mBAAmBC,OAAMC,WAAW,CACxC,IACEN,cAAc;YACZ,CAACG,yBAAc,CAAC,EAAE,CAACD;QACrB,IACF;QAACA;QAAUF;KAAc;IAG3B,qBACE,qBAACO,sBAAU;QAACC,KAAKL,yBAAc;QAAEM,QAAQP;QAAUQ,OAAM;QAA2BC,SAASP;qBAC3F,qBAACQ,eAAQ;AAGf"}

package/lib-commonjs/components/ThemePicker.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ThemePicker", {
+    enumerable: true,
+    get: function() {
+        return ThemePicker;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _components = require("storybook/internal/components");
+const _icons = require("@storybook/icons");
+const _managerapi = require("storybook/manager-api");
+const _theme = require("../theme");
+const _constants = require("../constants");
+const _hooks = require("../hooks");
+function createThemeItems(value, changeTheme, getCurrentTheme) {
+    return value.map((item)=>{
+        return {
+            id: item.id,
+            title: item.id === _theme.defaultTheme.id ? `${item.label} (Default)` : item.label,
+            onClick: ()=>{
+                changeTheme(item.id);
+            },
+            value: item.id,
+            active: getCurrentTheme() === item.id
+        };
+    });
+}
+const ThemePicker = ()=>{
+    const [globals, updateGlobals] = (0, _hooks.useGlobals)();
+    const fluentTheme = (0, _managerapi.useParameter)('fluentTheme');
+    var _globals_THEME_ID;
+    const selectedThemeId = fluentTheme ? fluentTheme : (_globals_THEME_ID = globals[_constants.THEME_ID]) !== null && _globals_THEME_ID !== void 0 ? _globals_THEME_ID : _theme.defaultTheme.id;
+    const selectedTheme = _theme.themes.find((entry)=>entry.id === selectedThemeId);
+    const isActive = selectedThemeId !== _theme.defaultTheme.id;
+    const setTheme = _react.useCallback((id)=>{
+        updateGlobals({
+            [_constants.THEME_ID]: id
+        });
+    }, [
+        updateGlobals
+    ]);
+    const renderTooltip = _react.useCallback((props)=>{
+        return /*#__PURE__*/ _react.createElement(_components.TooltipLinkList, {
+            links: createThemeItems(_theme.themes, (id)=>{
+                setTheme(id);
+                props.onHide();
+            }, ()=>selectedThemeId)
+        });
+    }, [
+        selectedThemeId,
+        setTheme
+    ]);
+    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_components.WithTooltip, {
+        placement: "top",
+        trigger: "click",
+        closeOnOutsideClick: true,
+        tooltip: renderTooltip
+    }, /*#__PURE__*/ _react.createElement(_components.IconButton, {
+        key: _constants.THEME_ID,
+        title: "Change Fluent theme",
+        active: isActive
+    }, /*#__PURE__*/ _react.createElement(_icons.ArrowDownIcon, null), /*#__PURE__*/ _react.createElement("span", {
+        style: {
+            marginLeft: 5
+        }
+    }, "Theme: ", selectedTheme === null || selectedTheme === void 0 ? void 0 : selectedTheme.label))));
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ThemePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';\nimport { ArrowDownIcon } from '@storybook/icons';\nimport { useParameter } from 'storybook/manager-api';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ThemeIds, themes, defaultTheme } from '../theme';\nimport { THEME_ID } from '../constants';\nimport { useGlobals, FluentParameters } from '../hooks';\n\nexport interface ThemeSelectorItem {\n  id: string;\n  title: string;\n  onClick: () => void;\n  value: string;\n  active: boolean;\n}\n\nfunction createThemeItems(\n  value: typeof themes,\n  changeTheme: (id: ThemeIds) => void,\n  getCurrentTheme: () => ThemeIds,\n): ThemeSelectorItem[] {\n  return value.map(item => {\n    return {\n      id: item.id,\n      title: item.id === defaultTheme.id ? `${item.label} (Default)` : item.label,\n      onClick: () => {\n        changeTheme(item.id);\n      },\n      value: item.id,\n      active: getCurrentTheme() === item.id,\n    };\n  });\n}\n\nexport const ThemePicker = (): JSXElement => {\n  const [globals, updateGlobals] = useGlobals();\n  const fluentTheme: FluentParameters['fluentTheme'] = useParameter('fluentTheme');\n\n  const selectedThemeId = fluentTheme ? fluentTheme : globals[THEME_ID] ?? defaultTheme.id;\n  const selectedTheme = themes.find(entry => entry.id === selectedThemeId);\n\n  const isActive = selectedThemeId !== defaultTheme.id;\n\n  const setTheme = React.useCallback(\n    (id: ThemeIds) => {\n      updateGlobals({ [THEME_ID]: id });\n    },\n    [updateGlobals],\n  );\n\n  const renderTooltip = React.useCallback(\n    (props: { onHide: () => void }) => {\n      return (\n        <TooltipLinkList\n          links={createThemeItems(\n            themes,\n            id => {\n              setTheme(id);\n              props.onHide();\n            },\n            () => selectedThemeId,\n          )}\n        />\n      );\n    },\n    [selectedThemeId, setTheme],\n  );\n\n  return (\n    <>\n      <WithTooltip placement=\"top\" trigger=\"click\" closeOnOutsideClick tooltip={renderTooltip}>\n        <IconButton key={THEME_ID} title=\"Change Fluent theme\" active={isActive}>\n          <ArrowDownIcon />\n          <span style={{ marginLeft: 5 }}>Theme: {selectedTheme?.label}</span>\n        </IconButton>\n      </WithTooltip>\n    </>\n  );\n};\n"],"names":["ThemePicker","createThemeItems","value","changeTheme","getCurrentTheme","map","item","id","title","defaultTheme","label","onClick","active","globals","updateGlobals","useGlobals","fluentTheme","useParameter","selectedThemeId","THEME_ID","selectedTheme","themes","find","entry","isActive","setTheme","React","useCallback","renderTooltip","props","TooltipLinkList","links","onHide","WithTooltip","placement","trigger","closeOnOutsideClick","tooltip","IconButton","key","ArrowDownIcon","span","style","marginLeft"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;iEApCU;4BACkC;uBAC3B;4BACD;uBAGkB;2BACtB;uBACoB;AAU7C,SAASC,iBACPC,KAAoB,EACpBC,WAAmC,EACnCC,eAA+B;IAE/B,OAAOF,MAAMG,GAAG,CAACC,CAAAA;QACf,OAAO;YACLC,IAAID,KAAKC,EAAE;YACXC,OAAOF,KAAKC,EAAE,KAAKE,mBAAY,CAACF,EAAE,GAAG,GAAGD,KAAKI,KAAK,CAAC,UAAU,CAAC,GAAGJ,KAAKI,KAAK;YAC3EC,SAAS;gBACPR,YAAYG,KAAKC,EAAE;YACrB;YACAL,OAAOI,KAAKC,EAAE;YACdK,QAAQR,sBAAsBE,KAAKC,EAAE;QACvC;IACF;AACF;AAEO,MAAMP,cAAc;IACzB,MAAM,CAACa,SAASC,cAAc,GAAGC,IAAAA,iBAAU;IAC3C,MAAMC,cAA+CC,IAAAA,wBAAY,EAAC;QAEdJ;IAApD,MAAMK,kBAAkBF,cAAcA,cAAcH,CAAAA,oBAAAA,OAAO,CAACM,mBAAQ,CAAC,cAAjBN,+BAAAA,oBAAqBJ,mBAAY,CAACF,EAAE;IACxF,MAAMa,gBAAgBC,aAAM,CAACC,IAAI,CAACC,CAAAA,QAASA,MAAMhB,EAAE,KAAKW;IAExD,MAAMM,WAAWN,oBAAoBT,mBAAY,CAACF,EAAE;IAEpD,MAAMkB,WAAWC,OAAMC,WAAW,CAChC,CAACpB;QACCO,cAAc;YAAE,CAACK,mBAAQ,CAAC,EAAEZ;QAAG;IACjC,GACA;QAACO;KAAc;IAGjB,MAAMc,gBAAgBF,OAAMC,WAAW,CACrC,CAACE;QACC,qBACE,qBAACC,2BAAe;YACdC,OAAO9B,iBACLoB,aAAM,EACNd,CAAAA;gBACEkB,SAASlB;gBACTsB,MAAMG,MAAM;YACd,GACA,IAAMd;;IAId,GACA;QAACA;QAAiBO;KAAS;IAG7B,qBACE,0DACE,qBAACQ,uBAAW;QAACC,WAAU;QAAMC,SAAQ;QAAQC,qBAAAA;QAAoBC,SAAST;qBACxE,qBAACU,sBAAU;QAACC,KAAKpB,mBAAQ;QAAEX,OAAM;QAAsBI,QAAQY;qBAC7D,qBAACgB,oBAAa,uBACd,qBAACC;QAAKC,OAAO;YAAEC,YAAY;QAAE;OAAG,WAAQvB,0BAAAA,oCAAAA,cAAeV,KAAK;AAKtE"}

package/lib-commonjs/constants.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ADDON_ID: function() {
+        return ADDON_ID;
+    },
+    DIR_ID: function() {
+        return DIR_ID;
+    },
+    STRICT_MODE_ID: function() {
+        return STRICT_MODE_ID;
+    },
+    THEME_ID: function() {
+        return THEME_ID;
+    }
+});
+const ADDON_ID = 'storybook_fluentui-react-addon';
+const DIR_ID = `${ADDON_ID}_dir`;
+const STRICT_MODE_ID = `${ADDON_ID}_strict-mode`;
+const THEME_ID = `${ADDON_ID}_theme`;

package/lib-commonjs/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const ADDON_ID = 'storybook_fluentui-react-addon';\n\nexport const DIR_ID = `${ADDON_ID}_dir` as const;\nexport const STRICT_MODE_ID = `${ADDON_ID}_strict-mode` as const;\nexport const THEME_ID = `${ADDON_ID}_theme` as const;\n"],"names":["ADDON_ID","DIR_ID","STRICT_MODE_ID","THEME_ID"],"mappings":";;;;;;;;;;;IAAaA,QAAQ;eAARA;;IAEAC,MAAM;eAANA;;IACAC,cAAc;eAAdA;;IACAC,QAAQ;eAARA;;;AAJN,MAAMH,WAAW;AAEjB,MAAMC,SAAS,GAAGD,SAAS,IAAI,CAAC;AAChC,MAAME,iBAAiB,GAAGF,SAAS,YAAY,CAAC;AAChD,MAAMG,WAAW,GAAGH,SAAS,MAAM,CAAC"}

package/lib-commonjs/decorators/withAriaLive.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "withAriaLive", {
+    enumerable: true,
+    get: function() {
+        return withAriaLive;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reactaria = require("@fluentui/react-aria");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _isDecoratorDisabled = require("../utils/isDecoratorDisabled");
+const withAriaLive = (Story, context)=>{
+    if ((0, _isDecoratorDisabled.isDecoratorDisabled)(context, 'AriaLive')) {
+        return Story();
+    }
+    return /*#__PURE__*/ _react.createElement(AriaLiveWrapper, null, /*#__PURE__*/ _react.createElement(Story, null));
+};
+const AriaLiveWrapper = (props)=>{
+    const [mounted, setMounted] = _react.useState(false);
+    _react.useEffect(()=>{
+        // The AriaLiveAnnouncer appends an element to DOM in an effect
+        // Trigger an extra renderer to make sure that doc examples that need to announce on mount can do so
+        setMounted(true);
+    }, []);
+    return /*#__PURE__*/ _react.createElement(_reactaria.AriaLiveAnnouncer, null, mounted && props.children);
+};

package/lib-commonjs/decorators/withAriaLive.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/decorators/withAriaLive.tsx"],"sourcesContent":["import { AriaLiveAnnouncer } from '@fluentui/react-aria';\nimport * as React from 'react';\n\nimport type { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nexport const withAriaLive = (Story: () => JSXElement, context: FluentStoryContext): JSXElement => {\n  if (isDecoratorDisabled(context, 'AriaLive')) {\n    return Story();\n  }\n\n  return (\n    <AriaLiveWrapper>\n      <Story />\n    </AriaLiveWrapper>\n  );\n};\n\nconst AriaLiveWrapper: React.FC<{ children: React.ReactNode }> = props => {\n  const [mounted, setMounted] = React.useState(false);\n\n  React.useEffect(() => {\n    // The AriaLiveAnnouncer appends an element to DOM in an effect\n    // Trigger an extra renderer to make sure that doc examples that need to announce on mount can do so\n    setMounted(true);\n  }, []);\n\n  return <AriaLiveAnnouncer>{mounted && props.children}</AriaLiveAnnouncer>;\n};\n"],"names":["withAriaLive","Story","context","isDecoratorDisabled","AriaLiveWrapper","props","mounted","setMounted","React","useState","useEffect","AriaLiveAnnouncer","children"],"mappings":";;;;+BAOaA;;;eAAAA;;;;2BAPqB;iEACX;qCAGa;AAG7B,MAAMA,eAAe,CAACC,OAAyBC;IACpD,IAAIC,IAAAA,wCAAmB,EAACD,SAAS,aAAa;QAC5C,OAAOD;IACT;IAEA,qBACE,qBAACG,qCACC,qBAACH;AAGP;AAEA,MAAMG,kBAA2DC,CAAAA;IAC/D,MAAM,CAACC,SAASC,WAAW,GAAGC,OAAMC,QAAQ,CAAC;IAE7CD,OAAME,SAAS,CAAC;QACd,+DAA+D;QAC/D,oGAAoG;QACpGH,WAAW;IACb,GAAG,EAAE;IAEL,qBAAO,qBAACI,4BAAiB,QAAEL,WAAWD,MAAMO,QAAQ;AACtD"}