@fluentui/react-button 1.0.0-beta.8 → 9.0.0-alpha.100

package/lib/components/CompoundButton/useCompoundButtonClasses.js

@@ -1,180 +0,0 @@
-var _a;
-import { makeVariantClasses } from '@fluentui/react-theme-provider';
-import { useButtonClasses } from '../Button/useButtonClasses';
-var GlobalClassNames = {
-    root: 'ms-CompoundButton',
-    contentContainer: 'ms-CompoundButton-contentContainer',
-    secondaryContent: 'ms-CompoundButton-secondaryContent',
-};
-export var useClasses = makeVariantClasses({
-    name: 'CompoundButton',
-    prefix: '--button',
-    styles: {
-        root: [
-            GlobalClassNames.root,
-            {
-                alignItems: 'flex-start',
-            },
-        ],
-        contentContainer: [
-            GlobalClassNames.contentContainer,
-            {
-                display: 'flex',
-                flexDirection: 'column',
-                textAlign: 'left',
-            },
-        ],
-        secondaryContent: [
-            GlobalClassNames.secondaryContent,
-            (_a = {
-                    color: 'var(--button-secondaryContentColor, var(--button-contentColor))',
-                    fontSize: 'var(--button-secondaryContentFontSize)',
-                    fontWeight: 'var(--button-secondaryContentFontWeight)',
-                    lineHeight: '100%',
-                    marginTop: 'var(--button-secondaryContentGap)',
-                    '@media (forced-colors: active)': {
-                        color: 'var(--button-highContrast-secondaryContentColor)',
-                    }
-                },
-                _a["." + GlobalClassNames.root + ":hover &"] = {
-                    color: 'var(--button-hovered-secondaryContentColor, var(--button-secondaryContentColor))',
-                    '@media (forced-colors: active)': {
-                        color: 'var(--button-highContrast-hovered-secondaryContentColor, ' +
-                            'var(--button-highContrast-secondaryContentColor))',
-                    },
-                },
-                _a["." + GlobalClassNames.root + ":active &"] = {
-                    color: 'var(--button-pressed-secondaryContentColor, ' +
-                        'var(--button-hovered-secondaryContentColor, ' +
-                        'var(--button-secondaryContentColor)))',
-                    '@media (forced-colors: active)': {
-                        color: 'var(--button-highContrast-pressed-secondaryContentColor, ' +
-                            'var(--button-highContrast-hovered-secondaryContentColor, ' +
-                            'var(--button-highContrast-secondaryContentColor)))',
-                    },
-                },
-                _a["." + GlobalClassNames.root + "[aria-disabled=\"true\"] &"] = {
-                    color: 'var(--button-disabled-secondaryContentColor, var(--button-disabled-contentColor))',
-                    '@media (forced-colors: active)': {
-                        color: 'var(--button-highContrast-disabled-secondaryContentColor, ' +
-                            'var(--button-highContrast-secondaryContentColor))',
-                    },
-                },
-                _a),
-        ],
-    },
-    variants: function (theme) {
-        var _a, _b;
-        var fonts = theme.fonts, palette = theme.palette, semanticColors = theme.semanticColors;
-        return {
-            root: {
-                height: 'auto',
-                maxWidth: '280px',
-                minWidth: '72px',
-                paddingBottom: '16px',
-                paddingLeft: '12px',
-                paddingRight: '12px',
-                paddingTop: '16px',
-                iconSize: '28px',
-                secondaryContentColor: palette.neutralSecondary,
-                secondaryContentGap: '4px',
-                secondaryContentFontSize: (_a = fonts) === null || _a === void 0 ? void 0 : _a.small.fontSize,
-                secondaryContentFontWeight: 'normal',
-                hovered: {
-                    secondaryContentColor: palette.neutralDark,
-                },
-                pressed: {
-                    secondaryContentColor: semanticColors.buttonTextPressed,
-                },
-                disabled: {
-                    secondaryContentColor: semanticColors.buttonTextDisabled,
-                },
-                highContrast: {
-                    secondaryContentColor: 'WindowText',
-                    hovered: {
-                        secondaryContentColor: 'Highlight',
-                    },
-                    pressed: {
-                        secondaryContentColor: 'WindowText',
-                    },
-                    disabled: {
-                        secondaryContentColor: 'GrayText',
-                    },
-                },
-            },
-            block: {
-                maxWidth: '100%',
-            },
-            iconOnly: {
-                minHeight: 'var(--button-size-regular)',
-                width: 'var(--button-minHeight)',
-                minWidth: '0',
-                paddingBottom: '0',
-                paddingTop: '0',
-                paddingLeft: '0',
-                paddingRight: '0',
-            },
-            primary: {
-                secondaryContentColor: 'var(--color-brand-secondaryContentColor)',
-                focused: {
-                    secondaryContentColor: 'var(--color-brand-focused-secondaryContentColor)',
-                },
-                hovered: {
-                    secondaryContentColor: 'var(--color-brand-hovered-secondaryContentColor)',
-                },
-                pressed: {
-                    secondaryContentColor: 'var(--color-brand-pressed-secondaryContentColor)',
-                },
-                highContrast: {
-                    secondaryContentColor: 'Window',
-                    hovered: {
-                        secondaryContentColor: 'Window',
-                    },
-                    pressed: {
-                        secondaryContentColor: 'Window',
-                    },
-                    disabled: {
-                        secondaryContentColor: 'GrayText',
-                    },
-                },
-            },
-            ghost: {
-                secondaryContentColor: palette.neutralSecondary,
-                disabled: {
-                    secondaryContentColor: palette.neutralTertiary,
-                },
-                focused: {
-                    secondaryContentColor: palette.neutralSecondary,
-                },
-                hovered: {
-                    secondaryContentColor: palette.neutralDark,
-                },
-                pressed: {
-                    secondaryContentColor: palette.black,
-                },
-                highContrast: {
-                    secondaryContentColor: 'WindowText',
-                    hovered: {
-                        secondaryContentColor: 'Highlight',
-                    },
-                    pressed: {
-                        secondaryContentColor: 'Highlight',
-                    },
-                    disabled: {
-                        secondaryContentColor: 'GrayText',
-                    },
-                },
-            },
-            transparent: {
-                hovered: {
-                    secondaryContentColor: (_b = palette) === null || _b === void 0 ? void 0 : _b.themePrimary,
-                },
-            },
-        };
-    },
-});
-export var useCompoundButtonClasses = function (state) {
-    useButtonClasses(state);
-    useClasses(state);
-};
-//# sourceMappingURL=useCompoundButtonClasses.js.map

package/lib/components/CompoundButton/useCompoundButtonClasses.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCompoundButtonClasses.js","sourceRoot":"../src/","sources":["components/CompoundButton/useCompoundButtonClasses.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { CompoundButtonState, CompoundButtonVariants } from './CompoundButton.types';\nimport { useButtonClasses } from '../Button/useButtonClasses';\n\nconst GlobalClassNames = {\n  root: 'ms-CompoundButton',\n  contentContainer: 'ms-CompoundButton-contentContainer',\n  secondaryContent: 'ms-CompoundButton-secondaryContent',\n};\n\nexport const useClasses = makeVariantClasses<CompoundButtonState, CompoundButtonVariants>({\n  name: 'CompoundButton',\n  prefix: '--button',\n  styles: {\n    root: [\n      GlobalClassNames.root,\n      {\n        alignItems: 'flex-start',\n      },\n    ],\n\n    contentContainer: [\n      GlobalClassNames.contentContainer,\n      {\n        display: 'flex',\n        flexDirection: 'column',\n        textAlign: 'left',\n      },\n    ],\n\n    secondaryContent: [\n      GlobalClassNames.secondaryContent,\n      {\n        color: 'var(--button-secondaryContentColor, var(--button-contentColor))',\n        fontSize: 'var(--button-secondaryContentFontSize)',\n        fontWeight: 'var(--button-secondaryContentFontWeight)',\n        lineHeight: '100%',\n        marginTop: 'var(--button-secondaryContentGap)',\n\n        '@media (forced-colors: active)': {\n          color: 'var(--button-highContrast-secondaryContentColor)',\n        },\n\n        [`.${GlobalClassNames.root}:hover &`]: {\n          color: 'var(--button-hovered-secondaryContentColor, var(--button-secondaryContentColor))',\n\n          '@media (forced-colors: active)': {\n            color:\n              'var(--button-highContrast-hovered-secondaryContentColor, ' +\n              'var(--button-highContrast-secondaryContentColor))',\n          },\n        },\n\n        [`.${GlobalClassNames.root}:active &`]: {\n          color:\n            'var(--button-pressed-secondaryContentColor, ' +\n            'var(--button-hovered-secondaryContentColor, ' +\n            'var(--button-secondaryContentColor)))',\n\n          '@media (forced-colors: active)': {\n            color:\n              'var(--button-highContrast-pressed-secondaryContentColor, ' +\n              'var(--button-highContrast-hovered-secondaryContentColor, ' +\n              'var(--button-highContrast-secondaryContentColor)))',\n          },\n        },\n\n        [`.${GlobalClassNames.root}[aria-disabled=\"true\"] &`]: {\n          color: 'var(--button-disabled-secondaryContentColor, var(--button-disabled-contentColor))',\n\n          '@media (forced-colors: active)': {\n            color:\n              'var(--button-highContrast-disabled-secondaryContentColor, ' +\n              'var(--button-highContrast-secondaryContentColor))',\n          },\n        },\n      },\n    ],\n  },\n\n  variants: (theme: Theme): CompoundButtonVariants => {\n    const { fonts, palette, semanticColors } = theme;\n\n    return {\n      root: {\n        height: 'auto',\n        maxWidth: '280px',\n        minWidth: '72px',\n        paddingBottom: '16px',\n        paddingLeft: '12px',\n        paddingRight: '12px',\n        paddingTop: '16px',\n        iconSize: '28px',\n        secondaryContentColor: palette.neutralSecondary,\n        secondaryContentGap: '4px',\n        secondaryContentFontSize: fonts?.small.fontSize as string,\n        secondaryContentFontWeight: 'normal',\n\n        hovered: {\n          secondaryContentColor: palette.neutralDark,\n        },\n\n        pressed: {\n          secondaryContentColor: semanticColors.buttonTextPressed,\n        },\n\n        disabled: {\n          secondaryContentColor: semanticColors.buttonTextDisabled,\n        },\n\n        highContrast: {\n          secondaryContentColor: 'WindowText',\n          hovered: {\n            secondaryContentColor: 'Highlight',\n          },\n          pressed: {\n            secondaryContentColor: 'WindowText',\n          },\n          disabled: {\n            secondaryContentColor: 'GrayText',\n          },\n        },\n      },\n\n      block: {\n        maxWidth: '100%',\n      },\n\n      iconOnly: {\n        minHeight: 'var(--button-size-regular)',\n        width: 'var(--button-minHeight)',\n        minWidth: '0',\n        paddingBottom: '0',\n        paddingTop: '0',\n        paddingLeft: '0',\n        paddingRight: '0',\n      },\n\n      primary: {\n        secondaryContentColor: 'var(--color-brand-secondaryContentColor)',\n\n        focused: {\n          secondaryContentColor: 'var(--color-brand-focused-secondaryContentColor)',\n        },\n\n        hovered: {\n          secondaryContentColor: 'var(--color-brand-hovered-secondaryContentColor)',\n        },\n\n        pressed: {\n          secondaryContentColor: 'var(--color-brand-pressed-secondaryContentColor)',\n        },\n\n        highContrast: {\n          secondaryContentColor: 'Window',\n          hovered: {\n            secondaryContentColor: 'Window',\n          },\n          pressed: {\n            secondaryContentColor: 'Window',\n          },\n          disabled: {\n            secondaryContentColor: 'GrayText',\n          },\n        },\n      },\n\n      ghost: {\n        secondaryContentColor: palette.neutralSecondary,\n        disabled: {\n          secondaryContentColor: palette.neutralTertiary,\n        },\n        focused: {\n          secondaryContentColor: palette.neutralSecondary,\n        },\n        hovered: {\n          secondaryContentColor: palette.neutralDark,\n        },\n        pressed: {\n          secondaryContentColor: palette.black,\n        },\n\n        highContrast: {\n          secondaryContentColor: 'WindowText',\n          hovered: {\n            secondaryContentColor: 'Highlight',\n          },\n          pressed: {\n            secondaryContentColor: 'Highlight',\n          },\n          disabled: {\n            secondaryContentColor: 'GrayText',\n          },\n        },\n      },\n\n      transparent: {\n        hovered: {\n          secondaryContentColor: palette?.themePrimary,\n        },\n      },\n    };\n  },\n});\n\nexport const useCompoundButtonClasses = (state: CompoundButtonState) => {\n  useButtonClasses(state);\n  useClasses(state);\n};\n"]}

package/lib/components/MenuButton/useExpanded.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { MenuButtonState, MinimalMenuProps } from './MenuButton.types';
-export declare type ExpandedState = {
-    ref?: React.Ref<unknown>;
-    expanded?: boolean;
-    defaultExpanded?: boolean;
-    onClick?: (ev: React.MouseEvent) => void;
-    onMenuDismiss?: () => void;
-    onKeyDown?: (ev: React.KeyboardEvent) => void;
-    'aria-expanded'?: React.HTMLAttributes<HTMLElement>['aria-expanded'];
-    'aria-haspopup'?: React.HTMLAttributes<HTMLElement>['aria-haspopup'];
-    menu?: MenuButtonState['menu'];
-};
-export declare const useMenuContext: () => MinimalMenuProps;
-/**
- * @param draftState - mutable state object to update to add expanded behavior.
- */
-export declare const useExpanded: <TDraftState extends ExpandedState>(draftState: TDraftState) => void;

package/lib/components/MenuButton/useExpanded.js

@@ -1,61 +0,0 @@
-import * as React from 'react';
-import { useControllableValue, useMergedRefs } from '@fluentui/react-hooks';
-import { getCode, ArrowDownKey } from '@fluentui/keyboard-key';
-var MenuContext = React.createContext({});
-export var useMenuContext = function () {
-    return React.useContext(MenuContext);
-};
-/**
- * @param draftState - mutable state object to update to add expanded behavior.
- */
-export var useExpanded = function (draftState) {
-    var expanded = draftState.expanded, defaultExpanded = draftState.defaultExpanded, onClick = draftState.onClick, onMenuDismiss = draftState.onMenuDismiss, onKeyDown = draftState.onKeyDown;
-    var _a = useControllableValue(expanded, defaultExpanded), expandedValue = _a[0], setExpandedValue = _a[1];
-    var rootRef = React.useRef();
-    // Set up a ref to be used for the menu target.
-    draftState.ref = useMergedRefs(draftState.ref, rootRef);
-    // Set true value.
-    draftState.expanded = expandedValue;
-    // When the root is clicked, toggle menu.
-    draftState.onClick = React.useCallback(function (ev) {
-        if (onClick) {
-            onClick(ev);
-            if (ev.defaultPrevented) {
-                return;
-            }
-        }
-        setExpandedValue(!expandedValue);
-    }, [onClick, expandedValue, setExpandedValue]);
-    // When alt/meta down arrow is pressed, expand.
-    draftState.onKeyDown = React.useCallback(function (ev) {
-        if (onKeyDown) {
-            onKeyDown(ev);
-            if (ev.defaultPrevented) {
-                return;
-            }
-        }
-        if ((ev.altKey || ev.metaKey) && getCode(ev) === ArrowDownKey) {
-            setExpandedValue(true);
-            ev.stopPropagation();
-            ev.preventDefault();
-        }
-    }, [onKeyDown, setExpandedValue]);
-    var onDismiss = React.useCallback(function () {
-        var _a;
-        (_a = onMenuDismiss) === null || _a === void 0 ? void 0 : _a();
-        setExpandedValue(false);
-        // TODO: should we re-focus the root?
-    }, [onMenuDismiss, setExpandedValue]);
-    var menuProps = {
-        hidden: !expandedValue,
-        onDismiss: onDismiss,
-        target: rootRef,
-    };
-    // Assign extra props to the menu slot.
-    draftState.menu = {
-        children: draftState.menu ? (typeof draftState.menu.children === 'function' ? (draftState.menu.children(menuProps)) : (React.createElement(MenuContext.Provider, { value: menuProps }, draftState.menu.children))) : null,
-    };
-    draftState['aria-expanded'] = expandedValue;
-    draftState['aria-haspopup'] = true;
-};
-//# sourceMappingURL=useExpanded.js.map

package/lib/components/MenuButton/useExpanded.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useExpanded.js","sourceRoot":"../src/","sources":["components/MenuButton/useExpanded.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAgB/D,IAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB,EAAE,CAAC,CAAC;AAC9D,MAAM,CAAC,IAAM,cAAc,GAAG;IAC5B,OAAO,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;AACvC,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG,UAAoC,UAAuB;IAC5E,IAAA,8BAAQ,EAAE,4CAAe,EAAE,4BAAO,EAAE,wCAAa,EAAE,gCAAS,CAAgB;IAC9E,IAAA,oDAAmF,EAAlF,qBAAa,EAAE,wBAAmE,CAAC;IAC1F,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,EAA2B,CAAC;IAExD,+CAA+C;IAC/C,UAAU,CAAC,GAAG,GAAG,aAAa,CAAC,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAExD,kBAAkB;IAClB,UAAU,CAAC,QAAQ,GAAG,aAAa,CAAC;IAEpC,yCAAyC;IACzC,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CACpC,UAAC,EAAuC;QACtC,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,EAAE,CAAC,CAAC;YAEZ,IAAI,EAAE,CAAC,gBAAgB,EAAE;gBACvB,OAAO;aACR;SACF;QAED,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAC;IACnC,CAAC,EACD,CAAC,OAAO,EAAE,aAAa,EAAE,gBAAgB,CAAC,CAC3C,CAAC;IAEF,+CAA+C;IAC/C,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC,WAAW,CACtC,UAAC,EAAuB;QACtB,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,EAAE,CAAC,CAAC;YAEd,IAAI,EAAE,CAAC,gBAAgB,EAAE;gBACvB,OAAO;aACR;SACF;QAED,IAAI,CAAC,EAAE,CAAC,MAAM,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,EAAE,CAAC,KAAK,YAAY,EAAE;YAC7D,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;IACH,CAAC,EACD,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAC9B,CAAC;IAEF,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC;;QAClC,MAAA,aAAa,4CAAK;QAElB,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAExB,qCAAqC;IACvC,CAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEtC,IAAM,SAAS,GAAqB;QAClC,MAAM,EAAE,CAAC,aAAa;QACtB,SAAS,WAAA;QACT,MAAM,EAAE,OAAO;KAChB,CAAC;IAEF,uCAAuC;IACvC,UAAU,CAAC,IAAI,GAAG;QAChB,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,OAAO,UAAU,CAAC,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CAC/C,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CACpC,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAwB,CAC1F,CACF,CAAC,CAAC,CAAC,IAAI;KACT,CAAC;IAEF,UAAU,CAAC,eAAe,CAAC,GAAG,aAAa,CAAC;IAC5C,UAAU,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC;AACrC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { useControllableValue, useMergedRefs } from '@fluentui/react-hooks';\nimport { getCode, ArrowDownKey } from '@fluentui/keyboard-key';\nimport { MenuButtonState, MinimalMenuProps } from './MenuButton.types';\n\nexport type ExpandedState = {\n  ref?: React.Ref<unknown>;\n  expanded?: boolean;\n  defaultExpanded?: boolean;\n  onClick?: (ev: React.MouseEvent) => void;\n  onMenuDismiss?: () => void;\n  onKeyDown?: (ev: React.KeyboardEvent) => void;\n  'aria-expanded'?: React.HTMLAttributes<HTMLElement>['aria-expanded'];\n  'aria-haspopup'?: React.HTMLAttributes<HTMLElement>['aria-haspopup'];\n\n  menu?: MenuButtonState['menu'];\n};\n\nconst MenuContext = React.createContext<MinimalMenuProps>({});\nexport const useMenuContext = () => {\n  return React.useContext(MenuContext);\n};\n\n/**\n * @param draftState - mutable state object to update to add expanded behavior.\n */\nexport const useExpanded = <TDraftState extends ExpandedState>(draftState: TDraftState) => {\n  const { expanded, defaultExpanded, onClick, onMenuDismiss, onKeyDown } = draftState;\n  const [expandedValue, setExpandedValue] = useControllableValue(expanded, defaultExpanded);\n  const rootRef = React.useRef<HTMLElement | undefined>();\n\n  // Set up a ref to be used for the menu target.\n  draftState.ref = useMergedRefs(draftState.ref, rootRef);\n\n  // Set true value.\n  draftState.expanded = expandedValue;\n\n  // When the root is clicked, toggle menu.\n  draftState.onClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement>) => {\n      if (onClick) {\n        onClick(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      setExpandedValue(!expandedValue);\n    },\n    [onClick, expandedValue, setExpandedValue],\n  );\n\n  // When alt/meta down arrow is pressed, expand.\n  draftState.onKeyDown = React.useCallback(\n    (ev: React.KeyboardEvent) => {\n      if (onKeyDown) {\n        onKeyDown(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      if ((ev.altKey || ev.metaKey) && getCode(ev) === ArrowDownKey) {\n        setExpandedValue(true);\n        ev.stopPropagation();\n        ev.preventDefault();\n      }\n    },\n    [onKeyDown, setExpandedValue],\n  );\n\n  const onDismiss = React.useCallback(() => {\n    onMenuDismiss?.();\n\n    setExpandedValue(false);\n\n    // TODO: should we re-focus the root?\n  }, [onMenuDismiss, setExpandedValue]);\n\n  const menuProps: MinimalMenuProps = {\n    hidden: !expandedValue,\n    onDismiss,\n    target: rootRef,\n  };\n\n  // Assign extra props to the menu slot.\n  draftState.menu = {\n    children: draftState.menu ? (\n      typeof draftState.menu.children === 'function' ? (\n        draftState.menu.children(menuProps)\n      ) : (\n        <MenuContext.Provider value={menuProps}>{draftState.menu.children}</MenuContext.Provider>\n      )\n    ) : null,\n  };\n\n  draftState['aria-expanded'] = expandedValue;\n  draftState['aria-haspopup'] = true;\n};\n"]}

package/lib/components/MenuButton/useMenuButtonClasses.d.ts

@@ -1,3 +0,0 @@
-import { Theme } from '@fluentui/react-theme-provider';
-import { MenuButtonState } from './MenuButton.types';
-export declare const useMenuButtonClasses: (state: MenuButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;

package/lib/components/MenuButton/useMenuButtonClasses.js

@@ -1,78 +0,0 @@
-var _a, _b;
-import { makeVariantClasses } from '@fluentui/react-theme-provider';
-var GlobalClassNames = {
-    root: 'ms-Button-root',
-    menuIcon: 'ms-Button-menuIcon',
-    _disabled: 'ms-Button--disabled',
-    _iconOnly: 'ms-Button--iconOnly',
-    _ghost: 'ms-Button--ghost',
-    _expanded: 'ms-Button--expanded',
-};
-export var useMenuButtonClasses = makeVariantClasses({
-    name: 'MenuButton',
-    prefix: '--button',
-    styles: {
-        root: [
-            GlobalClassNames.root,
-            (_a = {
-                    // This seems like a bad selector.
-                    '& > .ms-Button-menuIcon + *': {
-                        marginLeft: 0,
-                    },
-                    '& .ms-layer': {
-                        position: 'absolute',
-                    }
-                },
-                _a["&:hover ." + GlobalClassNames.menuIcon] = {
-                    color: 'var(--button-hovered-menuIconColor, var(--button-menuIconColor))',
-                },
-                _a["&:active ." + GlobalClassNames.menuIcon] = {
-                    color: 'var(--button-pressed-menuIconColor, var(--button-hovered-menuIconColor, var(--button-menuIconColor)))',
-                },
-                _a),
-        ],
-        menuIcon: [
-            GlobalClassNames.menuIcon,
-            (_b = {
-                    color: 'var(--button-menuIconColor)',
-                    fontSize: 'var(--button-menuIconSize)'
-                },
-                _b["." + GlobalClassNames._disabled + " &"] = {
-                    color: 'var(--button-disabled-menuIconColor)',
-                },
-                _b),
-        ],
-        _disabled: [GlobalClassNames._disabled],
-        _iconOnly: [
-            GlobalClassNames._iconOnly,
-            {
-                '& > .ms-Button-icon + *': {
-                    marginLeft: 0,
-                },
-            },
-        ],
-    },
-    variants: function (theme) {
-        var _a, _b, _c, _d;
-        var palette = theme.palette;
-        return {
-            root: {
-                menuIconSize: '12px',
-                menuIconColor: 'var(--body-menuIconColor)',
-            },
-            ghost: {
-                menuIconColor: (_a = palette) === null || _a === void 0 ? void 0 : _a.neutralSecondary,
-                hovered: {
-                    menuIconColor: (_b = palette) === null || _b === void 0 ? void 0 : _b.themePrimary,
-                },
-                pressed: {
-                    menuIconColor: (_c = palette) === null || _c === void 0 ? void 0 : _c.black,
-                },
-            },
-            transparent: {
-                menuIconColor: (_d = palette) === null || _d === void 0 ? void 0 : _d.neutralSecondary,
-            },
-        };
-    },
-});
-//# sourceMappingURL=useMenuButtonClasses.js.map

package/lib/components/MenuButton/useMenuButtonClasses.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMenuButtonClasses.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButtonClasses.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAS,MAAM,gCAAgC,CAAC;AAG3E,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,gBAAgB;IACtB,QAAQ,EAAE,oBAAoB;IAC9B,SAAS,EAAE,qBAAqB;IAChC,SAAS,EAAE,qBAAqB;IAChC,MAAM,EAAE,kBAAkB;IAC1B,SAAS,EAAE,qBAAqB;CACjC,CAAC;AAEF,MAAM,CAAC,IAAM,oBAAoB,GAAG,kBAAkB,CAAsC;IAC1F,IAAI,EAAE,YAAY;IAClB,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;QACN,IAAI,EAAE;YACJ,gBAAgB,CAAC,IAAI;;oBAEnB,kCAAkC;oBAClC,6BAA6B,EAAE;wBAC7B,UAAU,EAAE,CAAC;qBACd;oBAED,aAAa,EAAE;wBACb,QAAQ,EAAE,UAAU;qBACrB;;gBAED,GAAC,cAAY,gBAAgB,CAAC,QAAU,IAAG;oBACzC,KAAK,EAAE,kEAAkE;iBAC1E;gBAED,GAAC,eAAa,gBAAgB,CAAC,QAAU,IAAG;oBAC1C,KAAK,EACH,uGAAuG;iBAC1G;;SAEJ;QAED,QAAQ,EAAE;YACR,gBAAgB,CAAC,QAAQ;;oBAEvB,KAAK,EAAE,6BAA6B;oBACpC,QAAQ,EAAE,4BAA4B;;gBAEtC,GAAC,MAAI,gBAAgB,CAAC,SAAS,OAAI,IAAG;oBACpC,KAAK,EAAE,sCAAsC;iBAC9C;;SAEJ;QAED,SAAS,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC;QAEvC,SAAS,EAAE;YACT,gBAAgB,CAAC,SAAS;YAC1B;gBACE,yBAAyB,EAAE;oBACzB,UAAU,EAAE,CAAC;iBACd;aACF;SACF;KACF;IAED,QAAQ,EAAE,UAAC,KAAY;;QACb,IAAA,uBAAO,CAAW;QAE1B,OAAO;YACL,IAAI,EAAE;gBACJ,YAAY,EAAE,MAAM;gBACpB,aAAa,EAAE,2BAA2B;aAC3C;YAED,KAAK,EAAE;gBACL,aAAa,QAAE,OAAO,0CAAE,gBAAgB;gBACxC,OAAO,EAAE;oBACP,aAAa,QAAE,OAAO,0CAAE,YAAY;iBACrC;gBACD,OAAO,EAAE;oBACP,aAAa,QAAE,OAAO,0CAAE,KAAK;iBAC9B;aACF;YAED,WAAW,EAAE;gBACX,aAAa,QAAE,OAAO,0CAAE,gBAAgB;aACzC;SACF,CAAC;IACJ,CAAC;CACF,CAAC,CAAC","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { MenuButtonState, MenuButtonVariants } from './MenuButton.types';\n\nconst GlobalClassNames = {\n  root: 'ms-Button-root',\n  menuIcon: 'ms-Button-menuIcon',\n  _disabled: 'ms-Button--disabled',\n  _iconOnly: 'ms-Button--iconOnly',\n  _ghost: 'ms-Button--ghost',\n  _expanded: 'ms-Button--expanded',\n};\n\nexport const useMenuButtonClasses = makeVariantClasses<MenuButtonState, MenuButtonVariants>({\n  name: 'MenuButton',\n  prefix: '--button',\n  styles: {\n    root: [\n      GlobalClassNames.root,\n      {\n        // This seems like a bad selector.\n        '& > .ms-Button-menuIcon + *': {\n          marginLeft: 0,\n        },\n\n        '& .ms-layer': {\n          position: 'absolute',\n        },\n\n        [`&:hover .${GlobalClassNames.menuIcon}`]: {\n          color: 'var(--button-hovered-menuIconColor, var(--button-menuIconColor))',\n        },\n\n        [`&:active .${GlobalClassNames.menuIcon}`]: {\n          color:\n            'var(--button-pressed-menuIconColor, var(--button-hovered-menuIconColor, var(--button-menuIconColor)))',\n        },\n      },\n    ],\n\n    menuIcon: [\n      GlobalClassNames.menuIcon,\n      {\n        color: 'var(--button-menuIconColor)',\n        fontSize: 'var(--button-menuIconSize)',\n\n        [`.${GlobalClassNames._disabled} &`]: {\n          color: 'var(--button-disabled-menuIconColor)',\n        },\n      },\n    ],\n\n    _disabled: [GlobalClassNames._disabled],\n\n    _iconOnly: [\n      GlobalClassNames._iconOnly,\n      {\n        '& > .ms-Button-icon + *': {\n          marginLeft: 0,\n        },\n      },\n    ],\n  },\n\n  variants: (theme: Theme): MenuButtonVariants => {\n    const { palette } = theme;\n\n    return {\n      root: {\n        menuIconSize: '12px',\n        menuIconColor: 'var(--body-menuIconColor)',\n      },\n\n      ghost: {\n        menuIconColor: palette?.neutralSecondary,\n        hovered: {\n          menuIconColor: palette?.themePrimary,\n        },\n        pressed: {\n          menuIconColor: palette?.black,\n        },\n      },\n\n      transparent: {\n        menuIconColor: palette?.neutralSecondary,\n      },\n    };\n  },\n});\n"]}

package/lib/components/MenuButton/useMenuButtonState.d.ts

@@ -1,2 +0,0 @@
-import { MenuButtonState } from './MenuButton.types';
-export declare const useMenuButtonState: (state: MenuButtonState) => void;

package/lib/components/MenuButton/useMenuButtonState.js

@@ -1,9 +0,0 @@
-import { useButtonState } from '../Button/useButtonState';
-import { useExpanded } from './useExpanded';
-export var useMenuButtonState = function (state) {
-    // It behaves like a button.
-    useButtonState(state);
-    // It can be expanded.
-    useExpanded(state);
-};
-//# sourceMappingURL=useMenuButtonState.js.map

package/lib/components/MenuButton/useMenuButtonState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMenuButtonState.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButtonState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAC,KAAsB;IACvD,4BAA4B;IAC5B,cAAc,CAAC,KAAK,CAAC,CAAC;IAEtB,sBAAsB;IACtB,WAAW,CAAC,KAAK,CAAC,CAAC;AACrB,CAAC,CAAC","sourcesContent":["import { MenuButtonState } from './MenuButton.types';\nimport { useButtonState } from '../Button/useButtonState';\nimport { useExpanded } from './useExpanded';\n\nexport const useMenuButtonState = (state: MenuButtonState) => {\n  // It behaves like a button.\n  useButtonState(state);\n\n  // It can be expanded.\n  useExpanded(state);\n};\n"]}

package/lib/components/SplitButton/useSplitButtonClasses.d.ts

@@ -1,3 +0,0 @@
-import { Theme } from '@fluentui/react-theme-provider';
-import { SplitButtonState } from './SplitButton.types';
-export declare const useSplitButtonClasses: (state: SplitButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;

package/lib/components/SplitButton/useSplitButtonClasses.js

@@ -1,123 +0,0 @@
-var _a, _b, _c, _d;
-import { __assign } from "tslib";
-import { makeVariantClasses } from '@fluentui/react-theme-provider';
-import { EdgeChromiumHighContrastSelector } from '@fluentui/style-utilities';
-import { ButtonSizeVariants } from '../Button/index';
-var GlobalClassNames = {
-    root: 'ms-SplitButton',
-    button: 'ms-SplitButton-button',
-    menuButton: 'ms-SplitButton-menuButton',
-};
-var menuButtonWidth = '32px';
-export var useSplitButtonClasses = makeVariantClasses({
-    name: 'SplitButton',
-    prefix: '--button',
-    styles: {
-        root: [
-            GlobalClassNames.root,
-            {
-                display: 'inline-flex',
-                justifyContent: 'stretch',
-                position: 'relative',
-                // Forward the menuIconSize to a variable which can be consumed by the child menu button.
-                '--button-splitMenuIconSize': 'var(--button-menuIconSize)',
-            },
-        ],
-        button: [
-            GlobalClassNames.button,
-            {
-                '--button-borderRightWidth': 0,
-                '--button-borderTopRightRadius': 0,
-                '--button-borderBottomRightRadius': 0,
-            },
-        ],
-        menuButton: [
-            GlobalClassNames.menuButton,
-            (_a = {},
-                // Scope the override to a child component, increase specificity.
-                _a["." + GlobalClassNames.root + " &"] = {
-                    width: menuButtonWidth,
-                    minWidth: menuButtonWidth,
-                    '--button-borderLeftWidth': 0,
-                    '--button-borderTopLeftRadius': 0,
-                    '--button-borderBottomLeftRadius': 0,
-                    '--button-iconColor': 'var(--button-menuIconColor)',
-                    '--button-iconSize': 'var(--button-splitMenuIconSize)',
-                },
-                _a),
-        ],
-        divider: (_b = {
-                width: 'var(--button-dividerThickness)',
-                backgroundColor: 'var(--button-dividerColor)',
-                position: 'absolute',
-                right: menuButtonWidth,
-                top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',
-                bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))'
-            },
-            _b[EdgeChromiumHighContrastSelector] = {
-                backgroundColor: 'var(--button-highContrast-dividerColor)',
-            },
-            _b["." + GlobalClassNames.root + "[aria-disabled=\"true\"] &"] = (_c = {
-                    backgroundColor: 'var(--button-disabled-dividerColor)'
-                },
-                _c[EdgeChromiumHighContrastSelector] = {
-                    backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',
-                },
-                _c),
-            _b),
-        _block: (_d = {
-                width: '100%',
-                maxWidth: '100%'
-            },
-            _d["." + GlobalClassNames.button] = {
-                flexGrow: 1,
-                maxWidth: '100%',
-            },
-            _d["." + GlobalClassNames.menuButton] = {
-                width: menuButtonWidth,
-            },
-            _d),
-    },
-    variants: function (theme) {
-        var _a;
-        var palette = theme.palette, semanticColors = theme.semanticColors;
-        return __assign({ root: {
-                size: {
-                    smallest: '24px',
-                    smaller: '24px',
-                    small: '24px',
-                    regular: '32px',
-                    large: '40px',
-                    larger: '48px',
-                    largest: '64px',
-                },
-                dividerThickness: '1px',
-                dividerColor: (_a = palette) === null || _a === void 0 ? void 0 : _a.neutralTertiaryAlt,
-                disabled: {
-                    dividerColor: semanticColors.disabledText,
-                },
-                menuIconColor: 'var(--body-menuIconColor)',
-                menuIconSize: '12px',
-                highContrast: {
-                    dividerColor: 'WindowText',
-                    disabled: {
-                        dividerColor: 'GrayText',
-                    },
-                },
-            }, primary: {
-                dividerColor: palette.white,
-                disabled: {
-                    dividerColor: semanticColors.disabledText,
-                },
-                highContrast: {
-                    dividerColor: 'Window',
-                    disabled: {
-                        dividerColor: 'GrayText',
-                    },
-                },
-            }, transparent: {
-                menuIconColor: palette.neutralSecondary,
-            } }, ButtonSizeVariants);
-    },
-});
-//# sourceMappingURL=useSplitButtonClasses.js.map

package/lib/components/SplitButton/useSplitButtonClasses.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSplitButtonClasses.js","sourceRoot":"../src/","sources":["components/SplitButton/useSplitButtonClasses.tsx"],"names":[],"mappings":"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","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { EdgeChromiumHighContrastSelector } from '@fluentui/style-utilities';\nimport { ButtonSizeVariants } from '../Button/index';\nimport { SplitButtonState, SplitButtonVariants } from './SplitButton.types';\n\nconst GlobalClassNames = {\n  root: 'ms-SplitButton',\n  button: 'ms-SplitButton-button',\n  menuButton: 'ms-SplitButton-menuButton',\n};\n\nconst menuButtonWidth = '32px';\n\nexport const useSplitButtonClasses = makeVariantClasses<SplitButtonState, SplitButtonVariants>({\n  name: 'SplitButton',\n  prefix: '--button',\n\n  styles: {\n    root: [\n      GlobalClassNames.root,\n      {\n        display: 'inline-flex',\n        justifyContent: 'stretch',\n        position: 'relative',\n\n        // Forward the menuIconSize to a variable which can be consumed by the child menu button.\n        '--button-splitMenuIconSize': 'var(--button-menuIconSize)',\n      },\n    ],\n\n    button: [\n      GlobalClassNames.button,\n      {\n        '--button-borderRightWidth': 0,\n        '--button-borderTopRightRadius': 0,\n        '--button-borderBottomRightRadius': 0,\n      },\n    ],\n\n    menuButton: [\n      GlobalClassNames.menuButton,\n      {\n        // Scope the override to a child component, increase specificity.\n        [`.${GlobalClassNames.root} &`]: {\n          width: menuButtonWidth,\n          minWidth: menuButtonWidth,\n          '--button-borderLeftWidth': 0,\n          '--button-borderTopLeftRadius': 0,\n          '--button-borderBottomLeftRadius': 0,\n          '--button-iconColor': 'var(--button-menuIconColor)',\n          '--button-iconSize': 'var(--button-splitMenuIconSize)',\n        },\n      },\n    ],\n\n    divider: {\n      width: 'var(--button-dividerThickness)',\n      backgroundColor: 'var(--button-dividerColor)',\n      position: 'absolute',\n      right: menuButtonWidth,\n      top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n      bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n\n      [EdgeChromiumHighContrastSelector]: {\n        backgroundColor: 'var(--button-highContrast-dividerColor)',\n      },\n\n      [`.${GlobalClassNames.root}[aria-disabled=\"true\"] &`]: {\n        backgroundColor: 'var(--button-disabled-dividerColor)',\n\n        [EdgeChromiumHighContrastSelector]: {\n          backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',\n        },\n      },\n    },\n\n    _block: {\n      width: '100%',\n      maxWidth: '100%',\n\n      [`.${GlobalClassNames.button}`]: {\n        flexGrow: 1,\n        maxWidth: '100%',\n      },\n\n      [`.${GlobalClassNames.menuButton}`]: {\n        width: menuButtonWidth,\n      },\n    },\n  },\n  variants: (theme: Theme): SplitButtonVariants => {\n    const { palette, semanticColors } = theme;\n\n    return {\n      root: {\n        size: {\n          smallest: '24px',\n          smaller: '24px',\n          small: '24px',\n          regular: '32px',\n          large: '40px',\n          larger: '48px',\n          largest: '64px',\n        },\n        dividerThickness: '1px',\n        dividerColor: palette?.neutralTertiaryAlt,\n        disabled: {\n          dividerColor: semanticColors.disabledText,\n        },\n        menuIconColor: 'var(--body-menuIconColor)',\n        menuIconSize: '12px',\n\n        highContrast: {\n          dividerColor: 'WindowText',\n\n          disabled: {\n            dividerColor: 'GrayText',\n          },\n        },\n      },\n\n      primary: {\n        dividerColor: palette.white,\n\n        disabled: {\n          dividerColor: semanticColors.disabledText,\n        },\n\n        highContrast: {\n          dividerColor: 'Window',\n\n          disabled: {\n            dividerColor: 'GrayText',\n          },\n        },\n      },\n\n      transparent: {\n        menuIconColor: palette.neutralSecondary,\n      },\n\n      ...ButtonSizeVariants,\n    };\n  },\n});\n"]}

package/lib/components/ToggleButton/useChecked.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-export interface CheckedState {
-    checked?: boolean;
-    defaultChecked?: boolean;
-    onClick?: React.DOMAttributes<HTMLElement>['onClick'];
-    role?: string;
-    'aria-checked'?: React.AriaAttributes['aria-pressed'];
-    'aria-pressed'?: React.AriaAttributes['aria-pressed'];
-}
-/**
- * The useToggle hook processes adds the correct toggled state and acccessibility as needed.
- * @param draftState - state to read and augment.
- */
-export declare const useChecked: <TDraftState extends CheckedState>(draftState: TDraftState) => void;

package/lib/components/ToggleButton/useChecked.js

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { useControllableValue } from '@fluentui/react-hooks';
-/**
- * The useToggle hook processes adds the correct toggled state and acccessibility as needed.
- * @param draftState - state to read and augment.
- */
-export var useChecked = function (draftState) {
-    var onClick = draftState.onClick, checked = draftState.checked, defaultChecked = draftState.defaultChecked, role = draftState.role;
-    var _a = useControllableValue(checked, defaultChecked), checkedValue = _a[0], setCheckedValue = _a[1];
-    // Ensure the state is the correct controlled/uncontrolled value.
-    draftState.checked = checkedValue;
-    // Ensure the right aria value is set to represent the checked state.
-    var isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
-    draftState[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = checkedValue;
-    draftState.onClick = React.useCallback(function (ev) {
-        if (onClick) {
-            onClick(ev);
-            if (ev.defaultPrevented) {
-                return;
-            }
-        }
-        setCheckedValue(!checkedValue);
-    }, [checkedValue, setCheckedValue, onClick]);
-};
-//# sourceMappingURL=useChecked.js.map

package/lib/components/ToggleButton/useChecked.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useChecked.js","sourceRoot":"../src/","sources":["components/ToggleButton/useChecked.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAY7D;;;GAGG;AACH,MAAM,CAAC,IAAM,UAAU,GAAG,UAAmC,UAAuB;IAC1E,IAAA,4BAAO,EAAE,4BAAO,EAAE,0CAAc,EAAE,sBAAI,CAAgB;IACxD,IAAA,kDAA+E,EAA9E,oBAAY,EAAE,uBAAgE,CAAC;IAEtF,iEAAiE;IACjE,UAAU,CAAC,OAAO,GAAG,YAAY,CAAC;IAElC,qEAAqE;IACrE,IAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAkB,IAAI,IAAI,KAAK,UAAU,CAAC;IAE9E,UAAU,CAAC,kBAAkB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,YAAY,CAAC;IAEhF,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CACpC,UAAC,EAAmD;QAClD,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,EAAE,CAAC,CAAC;YAEZ,IAAI,EAAE,CAAC,gBAAgB,EAAE;gBACvB,OAAO;aACR;SACF;QAED,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC;IACjC,CAAC,EACD,CAAC,YAAY,EAAE,eAAe,EAAE,OAAO,CAAC,CACzC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-hooks';\n\nexport interface CheckedState {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onClick?: React.DOMAttributes<HTMLElement>['onClick'];\n\n  role?: string;\n  'aria-checked'?: React.AriaAttributes['aria-pressed'];\n  'aria-pressed'?: React.AriaAttributes['aria-pressed'];\n}\n\n/**\n * The useToggle hook processes adds the correct toggled state and acccessibility as needed.\n * @param draftState - state to read and augment.\n */\nexport const useChecked = <TDraftState extends CheckedState>(draftState: TDraftState) => {\n  const { onClick, checked, defaultChecked, role } = draftState;\n  const [checkedValue, setCheckedValue] = useControllableValue(checked, defaultChecked);\n\n  // Ensure the state is the correct controlled/uncontrolled value.\n  draftState.checked = checkedValue;\n\n  // Ensure the right aria value is set to represent the checked state.\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  draftState[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = checkedValue;\n\n  draftState.onClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        onClick(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      setCheckedValue(!checkedValue);\n    },\n    [checkedValue, setCheckedValue, onClick],\n  );\n};\n"]}

package/lib/components/ToggleButton/useToggleButtonClasses.d.ts

@@ -1,3 +0,0 @@
-import { Theme } from '@fluentui/react-theme-provider';
-import { ToggleButtonState } from './ToggleButton.types';
-export declare const useToggleButtonClasses: (state: ToggleButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;