@fluentui/react-storybook-addon 0.5.0 → 0.6.0-experimental.fluent-cli.20260409-f92690ecf6.0

package/CHANGELOG.md

@@ -1,12 +1,46 @@
 # Change Log - @fluentui/react-storybook-addon
 
-This log was last generated on Fri, 31 Oct 2025 16:17:32 GMT and should not be manually modified.
+This log was last generated on Thu, 09 Apr 2026 08:01:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.6.0-experimental.fluent-cli.20260409-f92690ecf6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.6.0-experimental.fluent-cli.20260409-f92690ecf6.0)
+
+Thu, 09 Apr 2026 08:01:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.6.0..@fluentui/react-storybook-addon_v0.6.0-experimental.fluent-cli.20260409-f92690ecf6.0)
+
+### Changes
+
+- Release experimental tools experimental.fluent-cli.20260409-f92690ecf6 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+
+## [0.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.6.0)
+
+Tue, 03 Mar 2026 13:16:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.5.1..@fluentui/react-storybook-addon_v0.6.0)
+
+### Minor changes
+
+- feat: upgrade to storybook 9 ([PR #35459](https://github.com/microsoft/fluentui/pull/35459) by dmytrokirpa@microsoft.com)
+- BREAKING: upgrade storybook to v8 ([PR #35279](https://github.com/microsoft/fluentui/pull/35279) by dmytrokirpa@microsoft.com)
+
+### Patches
+
+- chore: migrate source to react 19 ([PR #35434](https://github.com/microsoft/fluentui/pull/35434) by martinhochel@microsoft.com)
+- chore: bump storybook to mitigate CVE ([PR #35748](https://github.com/microsoft/fluentui/pull/35748) by martinhochel@microsoft.com)
+- chore: Bump @griffel/react package. ([PR #35469](https://github.com/microsoft/fluentui/pull/35469) by estebanmu@microsoft.com)
+
+## [0.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.5.1)
+
+Tue, 04 Nov 2025 14:47:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.5.0..@fluentui/react-storybook-addon_v0.5.1)
+
+### Patches
+
+- fix: force release ([PR #35445](https://github.com/microsoft/fluentui/pull/35445) by dmytrokirpa@microsoft.com)
+
 ## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.5.0)
 
-Fri, 31 Oct 2025 16:17:32 GMT 
+Fri, 31 Oct 2025 16:22:00 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.4.6..@fluentui/react-storybook-addon_v0.5.0)
 
 ### Minor changes

package/README.md

@@ -38,6 +38,15 @@ export const ThemePicker: React.FC<{ context: FluentStoryContext }> = ({ context
 };
 ```
 
+### Shared Storybook Preview Styles
+
+The package ships a `styles.css` file with shared Storybook preview styles (docs layout, table formatting, theme-aware backgrounds, etc.). Import it once in your Storybook `preview.js`/`preview.ts`:
+
+```js
+// .storybook/preview.js
+import '@fluentui/react-storybook-addon/styles.css';
+```
+
 ### Augmented Docs Blocks
 
 This presets uses [custom docs container and page](https://storybook.js.org/docs/7/writing-docs/autodocs#customize-the-docs-container) for unified FluentUI experience including:

package/dist/index.d.ts

@@ -0,0 +1,100 @@
+import { Args } from '@storybook/react-webpack5';
+import type { JSXElement } from '@fluentui/react-utilities';
+import { Parameters as Parameters_2 } from '@storybook/react-webpack5';
+import * as React_2 from 'react';
+import { StoryContext } from '@storybook/react-webpack5';
+
+export declare const DIR_ID: "storybook_fluentui-react-addon_dir";
+
+/**
+ * Canvas component to wrap stories in a styled container.
+ * Provides a similar experience to Storybook's v7 `Canvas` component.
+ */
+export declare const FluentCanvas: (props: React_2.ComponentProps<"div">) => JSXElement;
+
+/**
+ * Configuration for docs components
+ */
+declare type FluentDocsConfig = boolean | {
+    tableOfContents?: boolean;
+    dirSwitcher?: boolean;
+    themePicker?: boolean;
+    copyAsMarkdown?: boolean;
+    argTable?: boolean | {
+        slotsApi?: boolean;
+        nativePropsApi?: boolean;
+    };
+};
+
+/**
+ * Extends the storybook globals object to include fluent specific properties
+ */
+export declare interface FluentGlobals extends Args {
+    [DIR_ID]?: 'ltr' | 'rtl';
+    [THEME_ID]?: ThemeIds;
+    [STRICT_MODE_ID]?: boolean;
+}
+
+/**
+ * Extends the storybook parameters object to include fluent specific properties
+ */
+export declare interface FluentParameters extends Parameters_2 {
+    dir?: 'ltr' | 'rtl';
+    fluentTheme?: ThemeIds;
+    mode?: 'default' | 'vr-test';
+    reactStorybookAddon?: {
+        disabledDecorators?: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'];
+        docs?: FluentDocsConfig;
+    };
+}
+
+/**
+ * Story component to render stories in an iframe.
+ * Provides a similar experience to Storybook's v7 `Story` component.
+ */
+export declare const FluentStory: ({ id, height }: FluentStoryProps) => JSXElement;
+
+export declare interface FluentStoryContext extends StoryContext {
+    globals: FluentGlobals;
+    parameters: FluentParameters;
+}
+
+declare type FluentStoryProps = {
+    /** The unique identifier for the story */
+    id: string;
+    /** The height of the iframe */
+    height?: string | number;
+};
+
+export declare function parameters(options?: FluentParameters): FluentParameters;
+
+declare const STRICT_MODE_ID: "storybook_fluentui-react-addon_strict-mode";
+
+export declare const THEME_ID: "storybook_fluentui-react-addon_theme";
+
+export declare type ThemeIds = (typeof themes)[number]['id'];
+
+export declare const themes: readonly [{
+    readonly id: "web-light";
+    readonly label: "Web Light";
+}, {
+    readonly id: "web-dark";
+    readonly label: "Web Dark";
+}, {
+    readonly id: "teams-light";
+    readonly label: "Teams Light";
+}, {
+    readonly id: "teams-dark";
+    readonly label: "Teams Dark";
+}, {
+    readonly id: "teams-light-v21";
+    readonly label: "Teams Light V2.1";
+}, {
+    readonly id: "teams-dark-v21";
+    readonly label: "Teams Dark V2.1";
+}, {
+    readonly id: "teams-high-contrast";
+    readonly label: "Teams High Contrast";
+}];
+
+export { }

package/dist/styles.css

@@ -0,0 +1,470 @@
+#storybook-docs .sbdocs-content {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  max-width: 1200px;
+}
+
+#storybook-docs h1.sbdocs-title {
+  font-family: inherit;
+  font-size: 44px;
+  line-height: 60px;
+  /* identical to box height, or 143% */
+  font-weight: 900;
+  letter-spacing: -0.04em;
+  color: #000000;
+  margin-top: 49px;
+}
+
+#storybook-docs details:not(.sbdocs-preview details) {
+  position: relative;
+  z-index: 99;
+}
+
+#storybook-docs .sbdocs p:not(.sbdocs-preview p) {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 18px;
+  line-height: 27px;
+  letter-spacing: -0.01em;
+  color: #000000;
+  margin-top: 24px;
+}
+
+#storybook-docs .sbdocs-wrapper {
+  background: white;
+  min-height: auto;
+}
+
+#storybook-docs .sbdocs-img.featured-image {
+  margin: 48px 0;
+  display: block;
+  border-radius: 24px;
+}
+
+#storybook-docs .sbdocs-img {
+  max-width: 100%;
+}
+
+#storybook-docs .sbdocs hr:not(.sbdocs-preview hr) {
+  margin: 48px 0;
+  height: 0;
+  border-top: 1px solid #ebebeb;
+}
+
+#storybook-docs .sbdocs h2:not(.sbdocs-preview h2) {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 24px;
+  line-height: 28px;
+  letter-spacing: -0.04em;
+  color: black;
+  border-top: 1px solid #ebebeb;
+  border-bottom: none;
+  margin: 48px 0 15px 0;
+  padding: 48px 0 0 0;
+}
+
+#storybook-docs .sbdocs h2 code:not(.sbdocs-preview h2 code) {
+  border-radius: 4px;
+  font-size: 20px;
+}
+
+#storybook-docs .sbdocs-h3 {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  margin: 25px 0 0 0 !important;
+  letter-spacing: -0.01em;
+  color: #000000;
+}
+
+#storybook-docs .sbdocs-h3 code {
+  border-radius: 3px;
+  font-size: 16px;
+}
+
+/* Only apply to H3s inside of stories which have a parent with an ID */
+#storybook-docs [id] > .sbdocs-h3:before {
+  content: '';
+  display: block;
+  height: 40px;
+  margin: -40px 0 0;
+}
+
+#storybook-docs .sbdocs li:not(.sbdocs-preview li) {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 16px;
+  line-height: 150%;
+  letter-spacing: -0.01em;
+
+  /* Neutrals / Web / Gray 200 #1B1A19 */
+  color: #1b1a19;
+  margin-top: 8px;
+}
+
+#storybook-docs .sbdocs ul:not(.sbdocs-preview ul) {
+  margin: 12px 0;
+}
+
+#storybook-docs .sbdocs-ul li:not(.sbdocs-preview .sbdocs-ul li) {
+  list-style: none;
+  position: relative;
+}
+
+#storybook-docs .sbdocs-ul .sbdocs-li::before {
+  position: absolute;
+  content: '•';
+  color: #8d8d8d;
+  top: 0;
+  left: -15px;
+}
+
+#storybook-docs .sbdocs-ol .sbdocs-li::marker {
+  color: #8d8d8d;
+}
+
+#storybook-docs .sbdocs-preview {
+  border-radius: 16px;
+  background: var(--colorBrandBackgroundInverted, #fff);
+  padding: 0;
+  box-shadow: none;
+  border: 1px solid var(--colorNeutralStroke1, #e1dfdd);
+}
+
+#storybook-docs .sbdocs .docs-story div[scale] {
+  height: auto !important;
+}
+
+#storybook-docs .innerZoomElementWrapper {
+  padding: 30px;
+}
+
+#storybook-docs .sbdocs-preview > .os-host {
+  display: none;
+}
+
+#storybook-docs span + .sbdocs .docblock-argstable tbody tr td button {
+  color: #0078d4;
+  color: red;
+}
+
+#storybook-docs .docs-story + div {
+  background: #11100f;
+}
+
+#storybook-docs .sbdocs-content > div:last-child {
+  margin-bottom: 96px;
+}
+
+#storybook-docs .docs-story > div {
+  padding: 0;
+  background: none;
+}
+
+#storybook-docs .docs-story > div:last-child {
+  right: 31px;
+  border-radius: 24px;
+}
+
+.docs-story + div > div:last-child {
+  background: #000000;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 5px 5px 0px 0px;
+  right: 31px;
+}
+
+.docs-story + div > div:last-child > button {
+  color: white;
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 14px;
+  line-height: 150%;
+  text-align: center;
+  letter-spacing: -0.01em;
+}
+
+#storybook-docs a.sbdocs-a {
+  color: #0078d4;
+  text-decoration: underline;
+}
+
+/* Styles for Github-flavored Markdown tables */
+#storybook-docs table:not(.docblock-argstable, .sbdocs-preview table) {
+  margin: 16px 0px;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 0;
+  border-collapse: collapse;
+}
+
+#storybook-docs table:not(.docblock-argstable, .sbdocs-preview table) tr {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+#storybook-docs table:not(.docblock-argstable, .sbdocs-preview table) th {
+  font-weight: bold;
+  color: rgb(51, 51, 51);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 6px 13px;
+}
+
+#storybook-docs table:not(.docblock-argstable, .sbdocs-preview table) td {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 6px 13px;
+}
+
+/*  */
+/* Args Table */
+/*  */
+
+#storybook-docs .docblock-argstable tbody {
+  box-shadow: none;
+  border-left: none;
+  border-right: none;
+}
+
+#storybook-docs .docblock-argstable-head th {
+  letter-spacing: -0.01em;
+  color: black;
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 16px;
+  line-height: 150%;
+  font-weight: 600;
+}
+
+#storybook-docs thead.docblock-argstable-head {
+  border-bottom: 1px solid #edebe9;
+}
+
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(4) {
+  display: none;
+}
+
+#storybook-docs .docblock-argstable-head > tr > th:nth-child(4) {
+  display: none;
+}
+
+#storybook-docs .docblock-argstable tbody tr {
+  border: none;
+}
+
+#storybook-docs table.docblock-argstable tbody.docblock-argstable-body td,
+#storybook-docs .docblock-argstable th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 16px;
+}
+
+#storybook-docs .docblock-argstable tbody tr td:nth-child(1) span {
+  font-weight: normal;
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 16px;
+  line-height: 130%;
+  letter-spacing: -0.01em;
+  color: #616161;
+}
+
+#storybook-docs .docblock-argstable tbody tr td {
+  vertical-align: top;
+}
+
+#storybook-docs .docblock-argstable-body > tr > td > div > div > button {
+  color: #0078d4;
+  line-height: 21px;
+}
+
+#storybook-docs code:not(.sbdocs-preview code),
+#storybook-docs .docblock-argstable tbody tr td:nth-child(3) > div > span,
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
+#storybook-docs .css-16d4d7t {
+  font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 130%;
+  letter-spacing: -0.2px;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+#storybook-docs code.sbdocs-code,
+#storybook-docs .sbdocs-p code,
+#storybook-docs .sbdocs-li code,
+#storybook-docs .docblock-argstable code,
+#storybook-docs .docblock-argstable tbody tr td:nth-child(3) > div > span,
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
+#storybook-docs .css-16d4d7t {
+  font-size: 14px;
+  background: #f0f0f0;
+  border-radius: 4px;
+  padding: 1px 4px;
+  margin: 0 3px 0 3px;
+  color: black;
+  border: none;
+  line-height: 1.5;
+}
+
+#storybook-docs .docblock-argstable code {
+  white-space: normal;
+}
+
+#storybook-docs code:not(.sbdocs-preview code) {
+  padding: 0.1em 0.2em;
+  display: inline-block;
+  background-color: rgba(17, 16, 15, 0.1);
+  border-radius: 2px;
+}
+
+.os-content-glue {
+  width: auto !important;
+}
+
+#storybook-docs .sbdocs-preview .prismjs {
+  overflow: hidden;
+}
+
+#storybook-docs .os-content .prismjs * {
+  font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace;
+  font-size: 14px;
+  line-height: 1.4em;
+}
+
+#storybook-docs .sbdocs-preview .prismjs code {
+  color: white;
+  background: #11100f;
+  margin: 0;
+  overflow-x: auto;
+}
+
+#storybook-docs .docblock-argstable-body td > div > p,
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) p,
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > span {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 16px;
+  line-height: 130%;
+  color: black;
+  letter-spacing: -0.01em;
+}
+
+#storybook-docs .docblock-argstable tr > :nth-child(1) {
+  width: 4%;
+}
+
+#storybook-docs .docblock-argstable tr > :nth-child(2) {
+  width: 100%;
+}
+
+#storybook-docs .os-padding {
+  z-index: 0;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI Light'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format('truetype');
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI Semilight'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format('truetype');
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format('truetype');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI Semibold'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format('truetype');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI Bold'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format('truetype');
+  font-weight: 700;
+}
+
+body,
+body h1,
+body h2,
+body p,
+body ul,
+body ul li {
+  font-family: 'Segoe UI' !important;
+}
+
+h1.fluent {
+  font-weight: 700;
+  font-size: 40px;
+  font-family: 'Segoe UI';
+  line-height: 60px;
+  letter-spacing: -0.16px;
+}
+
+h1.fluent .fluent-version {
+  display: block;
+  font-size: 24px;
+  /* --font-size-base-600 */
+  line-height: 32px;
+  color: #707070;
+  /* --color-neutral-foreground-3 */
+}
+
+h2.fluent {
+  font-weight: 600;
+  font-size: 24px;
+  font-family: 'Segoe UI';
+  line-height: 36px;
+  letter-spacing: -0.16px;
+}
+
+/* remove the docs wrapper bg to let page bg show through */
+/* remove unnecessary padding now that theme switcher is not taking up space */
+#storybook-docs .sbdocs-wrapper {
+  background: transparent !important;
+  padding: 0 48px;
+}
+
+/* sb-show-main is missing during page transitions causing a page shift */
+/* todo: cleanup once we no longer inherit docs-root */
+.sb-show-main.sb-main-fullscreen,
+.sb-main-fullscreen {
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+/* remove loading overlay */
+.sb-preparing-story,
+.sb-preparing-docs,
+.sb-nopreview,
+.sb-errordisplay,
+.sidebar-container .search-field + div {
+  display: none !important;
+}

package/lib/components/DirectionSwitch.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { IconButton } from 'storybook/internal/components';
+import { styled } from 'storybook/theming';
+import { DIR_ID } from '../constants';
+import { useGlobals } from '../hooks';
+const Monospace = styled.span({
+    fontFamily: "'Cascadia Code', Menlo, 'Courier New', Courier, monospace",
+    letterSpacing: '-0.05em'
+});
+export const DirectionSwitch = ()=>{
+    const [globals, updateGlobals] = useGlobals();
+    var _globals_DIR_ID;
+    const direction = (_globals_DIR_ID = globals[DIR_ID]) !== null && _globals_DIR_ID !== void 0 ? _globals_DIR_ID : 'ltr';
+    const isLTR = direction === 'ltr';
+    const toggleDirection = React.useCallback(()=>updateGlobals({
+            [DIR_ID]: isLTR ? 'rtl' : 'ltr'
+        }), [
+        isLTR,
+        updateGlobals
+    ]);
+    return /*#__PURE__*/ React.createElement(IconButton, {
+        key: DIR_ID,
+        title: "Change Direction",
+        onClick: toggleDirection
+    }, /*#__PURE__*/ React.createElement("div", null, "Direction: ", /*#__PURE__*/ React.createElement(Monospace, null, direction.toUpperCase())));
+};

package/lib/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":["React","IconButton","styled","DIR_ID","useGlobals","Monospace","span","fontFamily","letterSpacing","DirectionSwitch","globals","updateGlobals","direction","isLTR","toggleDirection","useCallback","key","title","onClick","div","toUpperCase"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,gCAAgC;AAC3D,SAASC,MAAM,QAAQ,oBAAoB;AAG3C,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,UAAU,QAAQ,WAAW;AAEtC,MAAMC,YAAYH,OAAOI,IAAI,CAAC;IAC5BC,YAAY;IACZC,eAAe;AACjB;AAEA,OAAO,MAAMC,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGP;QAEfM;IAAlB,MAAME,YAAYF,CAAAA,kBAAAA,OAAO,CAACP,OAAO,cAAfO,6BAAAA,kBAAmB;IACrC,MAAMG,QAAQD,cAAc;IAE5B,MAAME,kBAAkBd,MAAMe,WAAW,CACvC,IACEJ,cAAc;YACZ,CAACR,OAAO,EAAEU,QAAQ,QAAQ;QAC5B,IACF;QAACA;QAAOF;KAAc;IAGxB,qBACE,oBAACV;QAAWe,KAAKb;QAAQc,OAAM;QAAmBC,SAASJ;qBACzD,oBAACK,aAAI,6BACQ,oBAACd,iBAAWO,UAAUQ,WAAW;AAIpD,EAAE"}

package/lib/components/ReactStrictMode.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { IconButton } from 'storybook/internal/components';
+import { LockIcon } from '@storybook/icons';
+import { STRICT_MODE_ID } from '../constants';
+import { useGlobals } from '../hooks';
+export const ReactStrictMode = ()=>{
+    const [globals, updateGlobals] = useGlobals();
+    var _globals_STRICT_MODE_ID;
+    const isActive = (_globals_STRICT_MODE_ID = globals[STRICT_MODE_ID]) !== null && _globals_STRICT_MODE_ID !== void 0 ? _globals_STRICT_MODE_ID : false;
+    const toggleStrictMode = React.useCallback(()=>updateGlobals({
+            [STRICT_MODE_ID]: !isActive
+        }), [
+        isActive,
+        updateGlobals
+    ]);
+    return /*#__PURE__*/ React.createElement(IconButton, {
+        key: STRICT_MODE_ID,
+        active: isActive,
+        title: "Toggle React Strict mode",
+        onClick: toggleStrictMode
+    }, /*#__PURE__*/ React.createElement(LockIcon, null));
+};

package/lib/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":["React","IconButton","LockIcon","STRICT_MODE_ID","useGlobals","ReactStrictMode","globals","updateGlobals","isActive","toggleStrictMode","useCallback","key","active","title","onClick"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,gCAAgC;AAC3D,SAASC,QAAQ,QAAQ,mBAAmB;AAG5C,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,UAAU,QAAQ,WAAW;AAEtC,OAAO,MAAMC,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGH;QAEhBE;IAAjB,MAAME,WAAWF,CAAAA,0BAAAA,OAAO,CAACH,eAAe,cAAvBG,qCAAAA,0BAA2B;IAE5C,MAAMG,mBAAmBT,MAAMU,WAAW,CACxC,IACEH,cAAc;YACZ,CAACJ,eAAe,EAAE,CAACK;QACrB,IACF;QAACA;QAAUD;KAAc;IAG3B,qBACE,oBAACN;QAAWU,KAAKR;QAAgBS,QAAQJ;QAAUK,OAAM;QAA2BC,SAASL;qBAC3F,oBAACP;AAGP,EAAE"}