npm - @fluentui/react-button - Versions diffs - 0.0.0-nightly-20220318-0416.1 → 0.0.0-nightly-20220323-0419.1 - Mend

@fluentui/react-button 0.0.0-nightly-20220318-0416.1 → 0.0.0-nightly-20220323-0419.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Fri, 18 Mar 2022 04:27:17 GMT",
-      "tag": "@fluentui/react-button_v0.0.0-nightly-20220318-0416.1",
-      "version": "0.0.0-nightly-20220318-0416.1",
+      "date": "Wed, 23 Mar 2022 04:31:01 GMT",
+      "tag": "@fluentui/react-button_v0.0.0-nightly-20220323-0419.1",
+      "version": "0.0.0-nightly-20220323-0419.1",
       "comments": {
         "prerelease": [
           {
@@ -19,6 +19,12 @@
             "commit": "e0660222b8d9f4f38a61b718c18d4c67e52c8df9",
             "comment": "Disabling lint rule for deprecated [component]ClassName exports."
           },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "1209d5881f9d9d581b481aa82979a22ce371cf8b",
+            "comment": "Button: Deprecating block prop."
+          },
           {
             "author": "Humberto.Morimoto@microsoft.com",
             "package": "@fluentui/react-button",
@@ -46,38 +52,38 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220318-0416.1",
-            "commit": "9fe23c6e14ceb14d72b49bf59ded7e05f0dc185d"
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220323-0419.1",
+            "commit": "a411c919dd84df2278316a58a76063a8ed45ecf1"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20220318-0416.1",
-            "commit": "9fe23c6e14ceb14d72b49bf59ded7e05f0dc185d"
+            "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20220323-0419.1",
+            "commit": "a411c919dd84df2278316a58a76063a8ed45ecf1"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220318-0416.1",
-            "commit": "9fe23c6e14ceb14d72b49bf59ded7e05f0dc185d"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220323-0419.1",
+            "commit": "a411c919dd84df2278316a58a76063a8ed45ecf1"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220318-0416.1",
-            "commit": "9fe23c6e14ceb14d72b49bf59ded7e05f0dc185d"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220323-0419.1",
+            "commit": "a411c919dd84df2278316a58a76063a8ed45ecf1"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220318-0416.1",
-            "commit": "9fe23c6e14ceb14d72b49bf59ded7e05f0dc185d"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220323-0419.1",
+            "commit": "a411c919dd84df2278316a58a76063a8ed45ecf1"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220318-0416.1",
-            "commit": "9fe23c6e14ceb14d72b49bf59ded7e05f0dc185d"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220323-0419.1",
+            "commit": "a411c919dd84df2278316a58a76063a8ed45ecf1"
           }
         ],
         "none": [

package/CHANGELOG.md CHANGED Viewed

@@ -1,28 +1,29 @@
 # Change Log - @fluentui/react-button
-This log was last generated on Fri, 18 Mar 2022 04:27:17 GMT and should not be manually modified.
+This log was last generated on Wed, 23 Mar 2022 04:31:01 GMT and should not be manually modified.
 <!-- Start content -->
-## [0.0.0-nightly-20220318-0416.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.0.0-nightly-20220318-0416.1)
+## [0.0.0-nightly-20220323-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.0.0-nightly-20220323-0419.1)
-Fri, 18 Mar 2022 04:27:17 GMT
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-rc.5..@fluentui/react-button_v0.0.0-nightly-20220318-0416.1)
+Wed, 23 Mar 2022 04:31:01 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-rc.5..@fluentui/react-button_v0.0.0-nightly-20220323-0419.1)
 ### Changes
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
 - Disabling lint rule for deprecated [component]ClassName exports. ([PR #22131](https://github.com/microsoft/fluentui/pull/22131) by Humberto.Morimoto@microsoft.com)
+- Button: Deprecating block prop. ([PR #22148](https://github.com/microsoft/fluentui/pull/22148) by Humberto.Morimoto@microsoft.com)
 - Button components: Making root a non-nullable slot. ([PR #22147](https://github.com/microsoft/fluentui/pull/22147) by Humberto.Morimoto@microsoft.com)
 - CompoundButton: Fixing bug where component was iconOnly even when secondaryContent was being provided. ([PR #22107](https://github.com/microsoft/fluentui/pull/22107) by Humberto.Morimoto@microsoft.com)
 - Removing star exports. ([PR #22111](https://github.com/microsoft/fluentui/pull/22111) by Humberto.Morimoto@microsoft.com)
 - Add deprecation messages to react-button ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220318-0416.1 ([commit](https://github.com/microsoft/fluentui/commit/9fe23c6e14ceb14d72b49bf59ded7e05f0dc185d) by beachball)
-- Bump @fluentui/react-aria to v0.0.0-nightly-20220318-0416.1 ([commit](https://github.com/microsoft/fluentui/commit/9fe23c6e14ceb14d72b49bf59ded7e05f0dc185d) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20220318-0416.1 ([commit](https://github.com/microsoft/fluentui/commit/9fe23c6e14ceb14d72b49bf59ded7e05f0dc185d) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20220318-0416.1 ([commit](https://github.com/microsoft/fluentui/commit/9fe23c6e14ceb14d72b49bf59ded7e05f0dc185d) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20220318-0416.1 ([commit](https://github.com/microsoft/fluentui/commit/9fe23c6e14ceb14d72b49bf59ded7e05f0dc185d) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220318-0416.1 ([commit](https://github.com/microsoft/fluentui/commit/9fe23c6e14ceb14d72b49bf59ded7e05f0dc185d) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220323-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a411c919dd84df2278316a58a76063a8ed45ecf1) by beachball)
+- Bump @fluentui/react-aria to v0.0.0-nightly-20220323-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a411c919dd84df2278316a58a76063a8ed45ecf1) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20220323-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a411c919dd84df2278316a58a76063a8ed45ecf1) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20220323-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a411c919dd84df2278316a58a76063a8ed45ecf1) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220323-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a411c919dd84df2278316a58a76063a8ed45ecf1) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220323-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a411c919dd84df2278316a58a76063a8ed45ecf1) by beachball)
 ## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-rc.5)

package/dist/react-button.d.ts CHANGED Viewed

@@ -30,6 +30,8 @@ declare type ButtonCommons = {
     /**
      * A button can fill the width of its container.
      * @default false
+     *
+     * @deprecated - Use style overrides instead.
      */
     block: boolean;
     /**

package/lib/components/Button/Button.types.d.ts CHANGED Viewed

@@ -22,6 +22,8 @@ export declare type ButtonCommons = {
     /**
      * A button can fill the width of its container.
      * @default false
+     *
+     * @deprecated - Use style overrides instead.
      */
     block: boolean;
     /**

package/lib/components/Button/Button.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.types.js","sourceRoot":"../src/","sources":["components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n /*\n Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n /\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n\n /\n Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n /\n icon?: Slot<'span'>;\n};\n\nexport type ButtonCommons = {\n /\n A button can have its content and borders styled for greater emphasis or to be subtle.\n * - 'primary': Emphasizes the button as a primary action.\n * - 'outline': Removes background styling.\n * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n * - 'transparent': Removes background and border styling.\n /\n appearance?: 'primary' \| 'outline' \| 'subtle' \| 'transparent';\n\n /\n A button can fill the width of its container.\n * @default false\n /\n block: boolean;\n\n /\n When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n * @default false\n /\n disabledFocusable: boolean;\n\n /\n A button can show that it cannot be interacted with.\n * @default false\n /\n disabled: boolean;\n\n /\n A button can format its icon to appear before or after its content.\n * @default 'before'\n /\n iconPosition?: 'before' \| 'after';\n\n /\n A button can be rounded, circular, or square.\n * @default 'rounded'\n /\n shape: 'rounded' \| 'circular' \| 'square';\n\n /\n A button supports different sizes.\n * @default 'medium'\n /\n size: 'small' \| 'medium' \| 'large';\n};\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & Partial<ButtonCommons>;\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n ButtonCommons & {\n /\n A button can contain only an icon.\n * @default false\n */\n iconOnly: boolean;\n };\n"]}
1	+ {"version":3,"file":"Button.types.js","sourceRoot":"../src/","sources":["components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n /*\n Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n /\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n\n /\n Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n /\n icon?: Slot<'span'>;\n};\n\nexport type ButtonCommons = {\n /\n A button can have its content and borders styled for greater emphasis or to be subtle.\n * - 'primary': Emphasizes the button as a primary action.\n * - 'outline': Removes background styling.\n * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n * - 'transparent': Removes background and border styling.\n /\n appearance?: 'primary' \| 'outline' \| 'subtle' \| 'transparent';\n\n /\n A button can fill the width of its container.\n * @default false\n \n @deprecated - Use style overrides instead.\n /\n block: boolean;\n\n /\n When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n * @default false\n /\n disabledFocusable: boolean;\n\n /\n A button can show that it cannot be interacted with.\n * @default false\n /\n disabled: boolean;\n\n /\n A button can format its icon to appear before or after its content.\n * @default 'before'\n /\n iconPosition?: 'before' \| 'after';\n\n /\n A button can be rounded, circular, or square.\n * @default 'rounded'\n /\n shape: 'rounded' \| 'circular' \| 'square';\n\n /\n A button supports different sizes.\n * @default 'medium'\n /\n size: 'small' \| 'medium' \| 'large';\n};\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & Partial<ButtonCommons>;\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n ButtonCommons & {\n /\n A button can contain only an icon.\n * @default false\n */\n iconOnly: boolean;\n };\n"]}

package/lib/components/Button/useButton.js CHANGED Viewed

@@ -10,6 +10,7 @@ export const useButton_unstable = (props, ref) => {
   const {
     appearance,
     as,
+    // eslint-disable-next-line deprecation/deprecation
     block = false,
     disabled = false,
     disabledFocusable = false,

package/lib/components/Button/useButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,QAA8B,sBAA9B;AAEA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;AAIG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,EAFI;AAGJ,IAAA,KAAK,GAAG,~~KAHJ~~;~~AAIJ~~,IAAA,QAAQ,GAAG,~~KAJP~~;~~AAKJ~~,IAAA,iBAAiB,GAAG,~~KALhB~~;~~AAMJ~~,IAAA,~~IANI~~;~~AAOJ~~,IAAA,YAAY,GAAG,~~QAPX~~;~~AAQJ~~,IAAA,KAAK,GAAG,~~SARJ~~;~~AASJ~~,IAAA,IAAI,GAAG;~~AATH~~,~~MAUF~~,~~KAVJ~~;~~AAWA~~,QAAM,aAAa,GAAG,gBAAgB,CAAC,IAAD,CAAtC;AAEA,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAXZ;AAaL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAdP;AAmBL,IAAA,IAAI,EAAE,qBAAqB,CACzB,EAAE,IAAI,QADmB,EAEzB,aAAa,CAAsB,KAAtB,EAA6B;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA7B,CAFY,CAnBtB;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,~~CAjDM~~","sourcesContent":["import * as React from 'react';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/*\n Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ButtonState => {\n const {\n appearance,\n as,\n block = false,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n shape = 'rounded',\n size = 'medium',\n } = props;\n const iconShorthand = resolveShorthand(icon);\n\n return {\n // Props passed at the top-level\n appearance,\n block,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n },\n\n root: getNativeElementProps(\n as \|\| 'button',\n useARIAButton<ARIAButtonSlotProps>(props, {\n required: true,\n defaultProps: {\n // useARIAButton isn't working with React.Ref<HTMLButtonElement \| HTMLAnchorElement>\n ref: ref as React.Ref<HTMLButtonElement>,\n type: 'button', // This is added because the default for type is 'submit'\n },\n }),\n ),\n icon: iconShorthand,\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,QAA8B,sBAA9B;AAEA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;AAIG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,EAFI;AAGJ;AACA,IAAA,KAAK,GAAG,KAJJ;AAKJ,IAAA,QAAQ,GAAG,KALP;AAMJ,IAAA,iBAAiB,GAAG,KANhB;AAOJ,IAAA,IAPI;AAQJ,IAAA,YAAY,GAAG,QARX;AASJ,IAAA,KAAK,GAAG,SATJ;AAUJ,IAAA,IAAI,GAAG;AAVH,MAWF,KAXJ;AAYA,QAAM,aAAa,GAAG,gBAAgB,CAAC,IAAD,CAAtC;AAEA,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAXZ;AAaL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAdP;AAmBL,IAAA,IAAI,EAAE,qBAAqB,CACzB,EAAE,IAAI,QADmB,EAEzB,aAAa,CAAsB,KAAtB,EAA6B;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA7B,CAFY,CAnBtB;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CAlDM","sourcesContent":["import * as React from 'react';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/*\n Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ButtonState => {\n const {\n appearance,\n as,\n // eslint-disable-next-line deprecation/deprecation\n block = false,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n shape = 'rounded',\n size = 'medium',\n } = props;\n const iconShorthand = resolveShorthand(icon);\n\n return {\n // Props passed at the top-level\n appearance,\n block,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n },\n\n root: getNativeElementProps(\n as \|\| 'button',\n useARIAButton<ARIAButtonSlotProps>(props, {\n required: true,\n defaultProps: {\n // useARIAButton isn't working with React.Ref<HTMLButtonElement \| HTMLAnchorElement>\n ref: ref as React.Ref<HTMLButtonElement>,\n type: 'button', // This is added because the default for type is 'submit'\n },\n }),\n ),\n icon: iconShorthand,\n };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Button/useButtonStyles.js CHANGED Viewed

@@ -403,6 +403,7 @@ export const useButtonStyles_unstable = state => {
   const iconStyles = useIconStyles();
   const {
     appearance,
+    // eslint-disable-next-line deprecation/deprecation
     block,
     disabled,
     disabledFocusable,

package/lib/components/Button/useButtonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n/*\n @deprecated Use `buttonClassNames.root` instead.\n /\nexport const buttonClassName = buttonClassNames.root;\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n verticalAlign: 'middle',\n\n ...shorthands.margin(0),\n\n maxWidth: '280px',\n\n ...shorthands.overflow('hidden'),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n fontFamily: tokens.fontFamilyBase,\n\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1,\n\n cursor: 'pointer',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1,\n\n outlineStyle: 'none',\n },\n },\n\n // Block styles\n block: {\n maxWidth: '100%',\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n / The borderRadius rounded styles are handled in the size variations */\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n ...shorthands.gap('4px'),\n ...shorthands.padding('0', '8px'),\n\n height: '24px',\n minWidth: '64px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n medium: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '12px'),\n\n height: '32px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '16px'),\n\n height: '40px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n subtle: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // TODO: `overflow: 'hidden'` on the root does not pay well with `position: absolute`\n // used by the outline pseudo-element. Need to introduce a text container for children and set\n // overflow there so that default focus outline can work\n //\n // base: createFocusOutlineStyle(),\n // circular: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.circular } }),\n // primary: createFocusOutlineStyle({ style: { outlineOffset: '2px' } }),\n // square: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.none } }),\n\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: 'transparent',\n outlineWidth: '2px',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {},\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n }),\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding('4px'),\n\n minWidth: '28px',\n maxWidth: '28px',\n },\n medium: {\n ...shorthands.padding('4px'),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding('6px'),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const { appearance, block, disabled, disabledFocusable, iconOnly, shape, size } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n\n // Root styles\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n rootStyles[size],\n rootStyles[shape],\n\n // Disabled styles\n (disabled \|\| disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled \|\| disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n rootFocusStyles.base,\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(buttonClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n/*\n @deprecated Use `buttonClassNames.root` instead.\n /\nexport const buttonClassName = buttonClassNames.root;\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n verticalAlign: 'middle',\n\n ...shorthands.margin(0),\n\n maxWidth: '280px',\n\n ...shorthands.overflow('hidden'),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n fontFamily: tokens.fontFamilyBase,\n\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1,\n\n cursor: 'pointer',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1,\n\n outlineStyle: 'none',\n },\n },\n\n // Block styles\n block: {\n maxWidth: '100%',\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n / The borderRadius rounded styles are handled in the size variations */\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n ...shorthands.gap('4px'),\n ...shorthands.padding('0', '8px'),\n\n height: '24px',\n minWidth: '64px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n medium: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '12px'),\n\n height: '32px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '16px'),\n\n height: '40px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n subtle: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // TODO: `overflow: 'hidden'` on the root does not pay well with `position: absolute`\n // used by the outline pseudo-element. Need to introduce a text container for children and set\n // overflow there so that default focus outline can work\n //\n // base: createFocusOutlineStyle(),\n // circular: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.circular } }),\n // primary: createFocusOutlineStyle({ style: { outlineOffset: '2px' } }),\n // square: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.none } }),\n\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: 'transparent',\n outlineWidth: '2px',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {},\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n }),\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding('4px'),\n\n minWidth: '28px',\n maxWidth: '28px',\n },\n medium: {\n ...shorthands.padding('4px'),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding('6px'),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const {\n appearance,\n // eslint-disable-next-line deprecation/deprecation\n block,\n disabled,\n disabledFocusable,\n iconOnly,\n shape,\n size,\n } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n\n // Root styles\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n rootStyles[size],\n rootStyles[shape],\n\n // Disabled styles\n (disabled \|\| disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled \|\| disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n rootFocusStyles.base,\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(buttonClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/SplitButton/useSplitButton.js CHANGED Viewed

@@ -10,6 +10,7 @@ import { MenuButton } from '../MenuButton/MenuButton';
 export const useSplitButton_unstable = (props, ref) => {
   const {
     appearance,
+    // eslint-disable-next-line deprecation/deprecation
     block = false,
     children,
     disabled = false,

package/lib/components/SplitButton/useSplitButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,KAAK,GAAG,~~KAFJ~~;~~AAGJ~~,IAAA,~~QAHI~~;~~AAIJ~~,IAAA,QAAQ,GAAG,~~KAJP~~;~~AAKJ~~,IAAA,iBAAiB,GAAG,~~KALhB~~;~~AAMJ~~,IAAA,~~IANI~~;~~AAOJ~~,IAAA,YAAY,GAAG,~~QAPX~~;~~AAQJ~~,IAAA,~~UARI~~;~~AASJ~~,IAAA,~~QATI~~;~~AAUJ~~,IAAA,~~mBAVI~~;~~AAWJ~~,IAAA,KAAK,GAAG,~~SAXJ~~;~~AAYJ~~,IAAA,IAAI,GAAG;~~AAZH~~,~~MAaF~~,~~KAbJ~~;~~AAeA~~,QAAM,MAAM,GAAG,KAAK,CAAC,cAAD,CAApB;AAEA,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY,KADyC;AASvD,IAAA,QAAQ,EAAE;AAT6C,GAAb,CAA5C;AAYA,QAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,KAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,iBALY;AAMZ,MAAA,IANY;AAOZ,MAAA,YAPY;AAQZ,MAAA,EAAE,EAAE,MAAM,GAAG,uBARD;AASZ,MAAA,KATY;AAUZ,MAAA;AAVY,KAD2D;AAazE,IAAA,QAAQ,EAAE;AAb+D,GAAtB,CAArD,~~CA9BoB~~,~~CA8CpB~~;AACA;;AACA,MACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;AACA,IAAA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;AACD;;AAED,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,UAFF;AAGV,MAAA,mBAAmB,EAAE;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAR,CAjBtB;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,~~CAjFM~~","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/*\n Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance,\n block = false,\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n } = props;\n\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = resolveShorthand(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n required: true,\n });\n\n const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n defaultProps: {\n appearance,\n block,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n required: true,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n // by the user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n block,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // Slots definition\n components: {\n root: 'div',\n menuButton: MenuButton,\n primaryActionButton: Button,\n },\n\n root: getNativeElementProps('div', { ref, ...props }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ;AACA,IAAA,KAAK,GAAG,KAHJ;AAIJ,IAAA,QAJI;AAKJ,IAAA,QAAQ,GAAG,KALP;AAMJ,IAAA,iBAAiB,GAAG,KANhB;AAOJ,IAAA,IAPI;AAQJ,IAAA,YAAY,GAAG,QARX;AASJ,IAAA,UATI;AAUJ,IAAA,QAVI;AAWJ,IAAA,mBAXI;AAYJ,IAAA,KAAK,GAAG,SAZJ;AAaJ,IAAA,IAAI,GAAG;AAbH,MAcF,KAdJ;AAgBA,QAAM,MAAM,GAAG,KAAK,CAAC,cAAD,CAApB;AAEA,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY,KADyC;AASvD,IAAA,QAAQ,EAAE;AAT6C,GAAb,CAA5C;AAYA,QAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,KAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,iBALY;AAMZ,MAAA,IANY;AAOZ,MAAA,YAPY;AAQZ,MAAA,EAAE,EAAE,MAAM,GAAG,uBARD;AASZ,MAAA,KATY;AAUZ,MAAA;AAVY,KAD2D;AAazE,IAAA,QAAQ,EAAE;AAb+D,GAAtB,CAArD,CA/BoB,CA+CpB;AACA;;AACA,MACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;AACA,IAAA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;AACD;;AAED,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,UAFF;AAGV,MAAA,mBAAmB,EAAE;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAR,CAjBtB;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CAlFM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/*\n Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance,\n // eslint-disable-next-line deprecation/deprecation\n block = false,\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n } = props;\n\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = resolveShorthand(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n required: true,\n });\n\n const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n defaultProps: {\n appearance,\n block,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n required: true,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n // by the user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n block,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // Slots definition\n components: {\n root: 'div',\n menuButton: MenuButton,\n primaryActionButton: Button,\n },\n\n root: getNativeElementProps('div', { ref, ...props }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/SplitButton/useSplitButtonStyles.js CHANGED Viewed

@@ -79,6 +79,7 @@ export const useSplitButtonStyles_unstable = state => {
   const focusStyles = useFocusStyles();
   const {
     appearance,
+    // eslint-disable-next-line deprecation/deprecation
     block,
     disabled,
     disabledFocusable

package/lib/components/SplitButton/useSplitButtonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,UAAU,EAAE,6BAFyD;AAGrE,EAAA,mBAAmB,EAAE;AAHgD,CAAhE;AAMP;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,IAAnD;;AAEP,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;~~AAAE~~,IAAA,~~UAAF~~;~~AAAc~~,IAAA,~~KAAd~~;~~AAAqB~~,IAAA,~~QAArB~~;~~AAA+B~~,IAAA;~~AAA/B~~,~~MAAqD~~,~~KAA3D~~;~~AAEA~~,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBAAqB,CAAC,IADW,EAEjC,UAAU,CAAC,IAFsB,EAGjC,KAAK,IAAI,UAAU,CAAC,KAHa,EAIjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAJS,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,~~CAhCM~~","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n/*\n @deprecated Use `splitButtonClassName.root` instead.\n /\nexport const splitButtonClassName = splitButtonClassNames.root;\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base rootStyles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n },\n },\n\n // Block rootStyles\n block: {\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n / No rootStyles */\n },\n primary: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n },\n subtle: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n transparent: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled rootStyles\n disabled: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, block, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n (disabled \|\| disabledFocusable) && rootStyles.disabled,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,UAAU,EAAE,6BAFyD;AAGrE,EAAA,mBAAmB,EAAE;AAHgD,CAAhE;AAMP;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,IAAnD;;AAEP,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AACJ,IAAA,UADI;AAEJ;AACA,IAAA,KAHI;AAIJ,IAAA,QAJI;AAKJ,IAAA;AALI,MAMF,KANJ;AAQA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBAAqB,CAAC,IADW,EAEjC,UAAU,CAAC,IAFsB,EAGjC,KAAK,IAAI,UAAU,CAAC,KAHa,EAIjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAJS,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CAtCM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n/*\n @deprecated Use `splitButtonClassName.root` instead.\n /\nexport const splitButtonClassName = splitButtonClassNames.root;\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base rootStyles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n },\n },\n\n // Block rootStyles\n block: {\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n / No rootStyles */\n },\n primary: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n },\n subtle: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n transparent: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled rootStyles\n disabled: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const {\n appearance,\n // eslint-disable-next-line deprecation/deprecation\n block,\n disabled,\n disabledFocusable,\n } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n (disabled \|\| disabledFocusable) && rootStyles.disabled,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Button/Button.types.d.ts CHANGED Viewed

@@ -22,6 +22,8 @@ export declare type ButtonCommons = {
     /**
      * A button can fill the width of its container.
      * @default false
+     *
+     * @deprecated - Use style overrides instead.
      */
     block: boolean;
     /**

package/lib-commonjs/components/Button/useButton.js CHANGED Viewed

@@ -19,6 +19,7 @@ const useButton_unstable = (props, ref) => {
   const {
     appearance,
     as,
+    // eslint-disable-next-line deprecation/deprecation
     block = false,
     disabled = false,
     disabledFocusable = false,

package/lib-commonjs/components/Button/useButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,EAFI;AAGJ,IAAA,KAAK,GAAG,~~KAHJ~~;~~AAIJ~~,IAAA,QAAQ,GAAG,~~KAJP~~;~~AAKJ~~,IAAA,iBAAiB,GAAG,~~KALhB~~;~~AAMJ~~,IAAA,~~IANI~~;~~AAOJ~~,IAAA,YAAY,GAAG,~~QAPX~~;~~AAQJ~~,IAAA,KAAK,GAAG,~~SARJ~~;~~AASJ~~,IAAA,IAAI,GAAG;~~AATH~~,~~MAUF~~,~~KAVJ~~;~~AAWA~~,QAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,CAAtB;AAEA,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAXZ;AAaL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAdP;AAmBL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CACJ,EAAE,IAAI,QADF,EAEJ,YAAA,CAAA,aAAA,CAAmC,KAAnC,EAA0C;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA1C,CAFI,CAnBD;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,~~CAjDM~~;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/*\n Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ButtonState => {\n const {\n appearance,\n as,\n block = false,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n shape = 'rounded',\n size = 'medium',\n } = props;\n const iconShorthand = resolveShorthand(icon);\n\n return {\n // Props passed at the top-level\n appearance,\n block,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n },\n\n root: getNativeElementProps(\n as \|\| 'button',\n useARIAButton<ARIAButtonSlotProps>(props, {\n required: true,\n defaultProps: {\n // useARIAButton isn't working with React.Ref<HTMLButtonElement \| HTMLAnchorElement>\n ref: ref as React.Ref<HTMLButtonElement>,\n type: 'button', // This is added because the default for type is 'submit'\n },\n }),\n ),\n icon: iconShorthand,\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,EAFI;AAGJ;AACA,IAAA,KAAK,GAAG,KAJJ;AAKJ,IAAA,QAAQ,GAAG,KALP;AAMJ,IAAA,iBAAiB,GAAG,KANhB;AAOJ,IAAA,IAPI;AAQJ,IAAA,YAAY,GAAG,QARX;AASJ,IAAA,KAAK,GAAG,SATJ;AAUJ,IAAA,IAAI,GAAG;AAVH,MAWF,KAXJ;AAYA,QAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,CAAtB;AAEA,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAXZ;AAaL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAdP;AAmBL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CACJ,EAAE,IAAI,QADF,EAEJ,YAAA,CAAA,aAAA,CAAmC,KAAnC,EAA0C;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA1C,CAFI,CAnBD;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CAlDM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/*\n Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ButtonState => {\n const {\n appearance,\n as,\n // eslint-disable-next-line deprecation/deprecation\n block = false,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n shape = 'rounded',\n size = 'medium',\n } = props;\n const iconShorthand = resolveShorthand(icon);\n\n return {\n // Props passed at the top-level\n appearance,\n block,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n },\n\n root: getNativeElementProps(\n as \|\| 'button',\n useARIAButton<ARIAButtonSlotProps>(props, {\n required: true,\n defaultProps: {\n // useARIAButton isn't working with React.Ref<HTMLButtonElement \| HTMLAnchorElement>\n ref: ref as React.Ref<HTMLButtonElement>,\n type: 'button', // This is added because the default for type is 'submit'\n },\n }),\n ),\n icon: iconShorthand,\n };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Button/useButtonStyles.js CHANGED Viewed

@@ -413,6 +413,7 @@ const useButtonStyles_unstable = state => {
   const iconStyles = useIconStyles();
   const {
     appearance,
+    // eslint-disable-next-line deprecation/deprecation
     block,
     disabled,
     disabledFocusable,

package/lib-commonjs/components/Button/useButtonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n/*\n @deprecated Use `buttonClassNames.root` instead.\n /\nexport const buttonClassName = buttonClassNames.root;\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n verticalAlign: 'middle',\n\n ...shorthands.margin(0),\n\n maxWidth: '280px',\n\n ...shorthands.overflow('hidden'),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n fontFamily: tokens.fontFamilyBase,\n\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1,\n\n cursor: 'pointer',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1,\n\n outlineStyle: 'none',\n },\n },\n\n // Block styles\n block: {\n maxWidth: '100%',\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n / The borderRadius rounded styles are handled in the size variations */\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n ...shorthands.gap('4px'),\n ...shorthands.padding('0', '8px'),\n\n height: '24px',\n minWidth: '64px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n medium: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '12px'),\n\n height: '32px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '16px'),\n\n height: '40px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n subtle: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // TODO: `overflow: 'hidden'` on the root does not pay well with `position: absolute`\n // used by the outline pseudo-element. Need to introduce a text container for children and set\n // overflow there so that default focus outline can work\n //\n // base: createFocusOutlineStyle(),\n // circular: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.circular } }),\n // primary: createFocusOutlineStyle({ style: { outlineOffset: '2px' } }),\n // square: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.none } }),\n\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: 'transparent',\n outlineWidth: '2px',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {},\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n }),\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding('4px'),\n\n minWidth: '28px',\n maxWidth: '28px',\n },\n medium: {\n ...shorthands.padding('4px'),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding('6px'),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const { appearance, block, disabled, disabledFocusable, iconOnly, shape, size } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n\n // Root styles\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n rootStyles[size],\n rootStyles[shape],\n\n // Disabled styles\n (disabled \|\| disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled \|\| disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n rootFocusStyles.base,\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(buttonClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n/*\n @deprecated Use `buttonClassNames.root` instead.\n /\nexport const buttonClassName = buttonClassNames.root;\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n verticalAlign: 'middle',\n\n ...shorthands.margin(0),\n\n maxWidth: '280px',\n\n ...shorthands.overflow('hidden'),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n fontFamily: tokens.fontFamilyBase,\n\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1,\n\n cursor: 'pointer',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1,\n\n outlineStyle: 'none',\n },\n },\n\n // Block styles\n block: {\n maxWidth: '100%',\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n / The borderRadius rounded styles are handled in the size variations */\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n ...shorthands.gap('4px'),\n ...shorthands.padding('0', '8px'),\n\n height: '24px',\n minWidth: '64px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n medium: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '12px'),\n\n height: '32px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '16px'),\n\n height: '40px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n subtle: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // TODO: `overflow: 'hidden'` on the root does not pay well with `position: absolute`\n // used by the outline pseudo-element. Need to introduce a text container for children and set\n // overflow there so that default focus outline can work\n //\n // base: createFocusOutlineStyle(),\n // circular: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.circular } }),\n // primary: createFocusOutlineStyle({ style: { outlineOffset: '2px' } }),\n // square: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.none } }),\n\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: 'transparent',\n outlineWidth: '2px',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {},\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n }),\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding('4px'),\n\n minWidth: '28px',\n maxWidth: '28px',\n },\n medium: {\n ...shorthands.padding('4px'),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding('6px'),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const {\n appearance,\n // eslint-disable-next-line deprecation/deprecation\n block,\n disabled,\n disabledFocusable,\n iconOnly,\n shape,\n size,\n } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n\n // Root styles\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n rootStyles[size],\n rootStyles[shape],\n\n // Disabled styles\n (disabled \|\| disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled \|\| disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n rootFocusStyles.base,\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(buttonClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/SplitButton/useSplitButton.js CHANGED Viewed

@@ -20,6 +20,7 @@ const MenuButton_1 = /*#__PURE__*/require("../MenuButton/MenuButton");
 const useSplitButton_unstable = (props, ref) => {
   const {
     appearance,
+    // eslint-disable-next-line deprecation/deprecation
     block = false,
     children,
     disabled = false,

package/lib-commonjs/components/SplitButton/useSplitButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,KAAK,GAAG,~~KAFJ~~;~~AAGJ~~,IAAA,~~QAHI~~;~~AAIJ~~,IAAA,QAAQ,GAAG,~~KAJP~~;~~AAKJ~~,IAAA,iBAAiB,GAAG,~~KALhB~~;~~AAMJ~~,IAAA,~~IANI~~;~~AAOJ~~,IAAA,YAAY,GAAG,~~QAPX~~;~~AAQJ~~,IAAA,~~UARI~~;~~AASJ~~,IAAA,~~QATI~~;~~AAUJ~~,IAAA,~~mBAVI~~;~~AAWJ~~,IAAA,KAAK,GAAG,~~SAXJ~~;~~AAYJ~~,IAAA,IAAI,GAAG;~~AAZH~~,~~MAaF~~,~~KAbJ~~;~~AAeA~~,QAAM,MAAM,GAAG,iBAAA,CAAA,KAAA,CAAM,cAAN,CAAf;AAEA,QAAM,mBAAmB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAjB,EAA6B;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY,KADyC;AASvD,IAAA,QAAQ,EAAE;AAT6C,GAA7B,CAA5B;AAYA,QAAM,4BAA4B,GAAG,iBAAA,CAAA,gBAAA,CAAiB,mBAAjB,EAAsC;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,KAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,iBALY;AAMZ,MAAA,IANY;AAOZ,MAAA,YAPY;AAQZ,MAAA,EAAE,EAAE,MAAM,GAAG,uBARD;AASZ,MAAA,KATY;AAUZ,MAAA;AAVY,KAD2D;AAazE,IAAA,QAAQ,EAAE;AAb+D,GAAtC,CAArC,~~CA9BoB~~,~~CA8CpB~~;AACA;;AACA,MACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;AACA,IAAA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;AACD;;AAED,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,YAAA,CAAA,UAFF;AAGV,MAAA,mBAAmB,EAAE,QAAA,CAAA;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAA7B,CAjBD;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,~~CAjFM~~;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/*\n Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance,\n block = false,\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n } = props;\n\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = resolveShorthand(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n required: true,\n });\n\n const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n defaultProps: {\n appearance,\n block,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n required: true,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n // by the user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n block,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // Slots definition\n components: {\n root: 'div',\n menuButton: MenuButton,\n primaryActionButton: Button,\n },\n\n root: getNativeElementProps('div', { ref, ...props }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ;AACA,IAAA,KAAK,GAAG,KAHJ;AAIJ,IAAA,QAJI;AAKJ,IAAA,QAAQ,GAAG,KALP;AAMJ,IAAA,iBAAiB,GAAG,KANhB;AAOJ,IAAA,IAPI;AAQJ,IAAA,YAAY,GAAG,QARX;AASJ,IAAA,UATI;AAUJ,IAAA,QAVI;AAWJ,IAAA,mBAXI;AAYJ,IAAA,KAAK,GAAG,SAZJ;AAaJ,IAAA,IAAI,GAAG;AAbH,MAcF,KAdJ;AAgBA,QAAM,MAAM,GAAG,iBAAA,CAAA,KAAA,CAAM,cAAN,CAAf;AAEA,QAAM,mBAAmB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAjB,EAA6B;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY,KADyC;AASvD,IAAA,QAAQ,EAAE;AAT6C,GAA7B,CAA5B;AAYA,QAAM,4BAA4B,GAAG,iBAAA,CAAA,gBAAA,CAAiB,mBAAjB,EAAsC;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,KAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,iBALY;AAMZ,MAAA,IANY;AAOZ,MAAA,YAPY;AAQZ,MAAA,EAAE,EAAE,MAAM,GAAG,uBARD;AASZ,MAAA,KATY;AAUZ,MAAA;AAVY,KAD2D;AAazE,IAAA,QAAQ,EAAE;AAb+D,GAAtC,CAArC,CA/BoB,CA+CpB;AACA;;AACA,MACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;AACA,IAAA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;AACD;;AAED,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,YAAA,CAAA,UAFF;AAGV,MAAA,mBAAmB,EAAE,QAAA,CAAA;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAA7B,CAjBD;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CAlFM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/*\n Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance,\n // eslint-disable-next-line deprecation/deprecation\n block = false,\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n } = props;\n\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = resolveShorthand(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n required: true,\n });\n\n const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n defaultProps: {\n appearance,\n block,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n required: true,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n // by the user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n block,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // Slots definition\n components: {\n root: 'div',\n menuButton: MenuButton,\n primaryActionButton: Button,\n },\n\n root: getNativeElementProps('div', { ref, ...props }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js CHANGED Viewed

@@ -89,6 +89,7 @@ const useSplitButtonStyles_unstable = state => {
   const focusStyles = useFocusStyles();
   const {
     appearance,
+    // eslint-disable-next-line deprecation/deprecation
     block,
     disabled,
     disabledFocusable

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,GAA0D;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,UAAU,EAAE,6BAFyD;AAGrE,EAAA,mBAAmB,EAAE;AAHgD,CAA1D;AAMb;;AAEG;;AACU,OAAA,CAAA,oBAAA,GAAuB,OAAA,CAAA,qBAAA,CAAsB,IAA7C;;AAEb,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;~~AAAE~~,IAAA,~~UAAF~~;~~AAAc~~,IAAA,~~KAAd~~;~~AAAqB~~,IAAA,~~QAArB~~;~~AAA+B~~,IAAA;~~AAA/B~~,~~MAAqD~~,~~KAA3D~~;~~AAEA~~,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,qBAAA,CAAsB,IADD,EAErB,UAAU,CAAC,IAFU,EAGrB,KAAK,IAAI,UAAU,CAAC,KAHC,EAIrB,UAAU,IAAI,UAAU,CAAC,UAAD,CAJH,EAKrB,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALzB,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,OAAA,CAAA,YAAA,CAC3B,OAAA,CAAA,qBAAA,CAAsB,UADK,EAE3B,WAAW,CAAC,UAFe,EAG3B,KAAK,CAAC,UAAN,CAAiB,SAHU,CAA7B;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,OAAA,CAAA,YAAA,CACpC,OAAA,CAAA,qBAAA,CAAsB,mBADc,EAEpC,WAAW,CAAC,mBAFwB,EAGpC,KAAK,CAAC,mBAAN,CAA0B,SAHU,CAAtC;AAKD;;AAED,SAAO,KAAP;AACD,~~CAhCM~~;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n/*\n @deprecated Use `splitButtonClassName.root` instead.\n /\nexport const splitButtonClassName = splitButtonClassNames.root;\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base rootStyles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n },\n },\n\n // Block rootStyles\n block: {\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n / No rootStyles */\n },\n primary: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n },\n subtle: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n transparent: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled rootStyles\n disabled: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, block, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n (disabled \|\| disabledFocusable) && rootStyles.disabled,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,GAA0D;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,UAAU,EAAE,6BAFyD;AAGrE,EAAA,mBAAmB,EAAE;AAHgD,CAA1D;AAMb;;AAEG;;AACU,OAAA,CAAA,oBAAA,GAAuB,OAAA,CAAA,qBAAA,CAAsB,IAA7C;;AAEb,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AACJ,IAAA,UADI;AAEJ;AACA,IAAA,KAHI;AAIJ,IAAA,QAJI;AAKJ,IAAA;AALI,MAMF,KANJ;AAQA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,qBAAA,CAAsB,IADD,EAErB,UAAU,CAAC,IAFU,EAGrB,KAAK,IAAI,UAAU,CAAC,KAHC,EAIrB,UAAU,IAAI,UAAU,CAAC,UAAD,CAJH,EAKrB,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALzB,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,OAAA,CAAA,YAAA,CAC3B,OAAA,CAAA,qBAAA,CAAsB,UADK,EAE3B,WAAW,CAAC,UAFe,EAG3B,KAAK,CAAC,UAAN,CAAiB,SAHU,CAA7B;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,OAAA,CAAA,YAAA,CACpC,OAAA,CAAA,qBAAA,CAAsB,mBADc,EAEpC,WAAW,CAAC,mBAFwB,EAGpC,KAAK,CAAC,mBAAN,CAA0B,SAHU,CAAtC;AAKD;;AAED,SAAO,KAAP;AACD,CAtCM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n/*\n @deprecated Use `splitButtonClassName.root` instead.\n /\nexport const splitButtonClassName = splitButtonClassNames.root;\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base rootStyles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n },\n },\n\n // Block rootStyles\n block: {\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n / No rootStyles */\n },\n primary: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n },\n subtle: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n transparent: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled rootStyles\n disabled: {\n // Use classnames to increase specificy of rootStyles and avoid collisions.\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const {\n appearance,\n // eslint-disable-next-line deprecation/deprecation\n block,\n disabled,\n disabledFocusable,\n } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n (disabled \|\| disabledFocusable) && rootStyles.disabled,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-button",
-  "version": "0.0.0-nightly-20220318-0416.1",
+  "version": "0.0.0-nightly-20220323-0419.1",
   "description": "Fluent UI React Button component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -29,16 +29,16 @@
     "@fluentui/a11y-testing": "^0.1.0",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220318-0416.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220323-0419.1",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20220318-0416.1",
-    "@fluentui/react-aria": "0.0.0-nightly-20220318-0416.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20220323-0419.1",
+    "@fluentui/react-aria": "0.0.0-nightly-20220323-0419.1",
     "@fluentui/react-icons": "^2.0.159-beta.10",
-    "@fluentui/react-tabster": "0.0.0-nightly-20220318-0416.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20220318-0416.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20220318-0416.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20220323-0419.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20220323-0419.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20220323-0419.1",
     "@griffel/react": "1.0.0",
     "tslib": "^2.1.0"
   },