@fluentui/react-infolabel 9.3.7 → 9.4.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 (40) hide show
  1. package/CHANGELOG.md +27 -2
  2. package/lib/InfoButton.js.map +1 -1
  3. package/lib/InfoLabel.js.map +1 -1
  4. package/lib/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
  5. package/lib/components/InfoButton/InfoButton.js.map +1 -1
  6. package/lib/components/InfoButton/InfoButton.types.js.map +1 -1
  7. package/lib/components/InfoButton/index.js.map +1 -1
  8. package/lib/components/InfoButton/renderInfoButton.js.map +1 -1
  9. package/lib/components/InfoButton/useInfoButton.js.map +1 -1
  10. package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js +97 -0
  11. package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -0
  12. package/lib/components/InfoLabel/InfoLabel.js.map +1 -1
  13. package/lib/components/InfoLabel/InfoLabel.types.js.map +1 -1
  14. package/lib/components/InfoLabel/index.js.map +1 -1
  15. package/lib/components/InfoLabel/renderInfoLabel.js.map +1 -1
  16. package/lib/components/InfoLabel/useInfoLabel.js.map +1 -1
  17. package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js +40 -0
  18. package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -0
  19. package/lib/index.js.map +1 -1
  20. package/lib-commonjs/InfoButton.js.map +1 -1
  21. package/lib-commonjs/InfoLabel.js.map +1 -1
  22. package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
  23. package/lib-commonjs/components/InfoButton/InfoButton.js.map +1 -1
  24. package/lib-commonjs/components/InfoButton/InfoButton.types.js.map +1 -1
  25. package/lib-commonjs/components/InfoButton/index.js.map +1 -1
  26. package/lib-commonjs/components/InfoButton/renderInfoButton.js.map +1 -1
  27. package/lib-commonjs/components/InfoButton/useInfoButton.js.map +1 -1
  28. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js.map +1 -1
  29. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js +113 -0
  30. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -0
  31. package/lib-commonjs/components/InfoLabel/InfoLabel.js.map +1 -1
  32. package/lib-commonjs/components/InfoLabel/InfoLabel.types.js.map +1 -1
  33. package/lib-commonjs/components/InfoLabel/index.js.map +1 -1
  34. package/lib-commonjs/components/InfoLabel/renderInfoLabel.js.map +1 -1
  35. package/lib-commonjs/components/InfoLabel/useInfoLabel.js.map +1 -1
  36. package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js.map +1 -1
  37. package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js +56 -0
  38. package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -0
  39. package/lib-commonjs/index.js.map +1 -1
  40. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,12 +1,37 @@
1
1
  # Change Log - @fluentui/react-infolabel
2
2
 
3
- This log was last generated on Fri, 11 Jul 2025 15:56:58 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 28 Jul 2025 18:44:12 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.4.1)
8
+
9
+ Mon, 28 Jul 2025 18:44:12 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infolabel_v9.4.0..@fluentui/react-infolabel_v9.4.1)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-label to v9.3.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
15
+ - Bump @fluentui/react-popover to v9.12.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
16
+ - Bump @fluentui/react-tabster to v9.26.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
17
+ - Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
18
+ - Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
19
+
20
+ ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.4.0)
21
+
22
+ Thu, 17 Jul 2025 13:49:39 GMT
23
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infolabel_v9.3.7..@fluentui/react-infolabel_v9.4.0)
24
+
25
+ ### Minor changes
26
+
27
+ - feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
28
+ - Bump @fluentui/react-label to v9.3.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
29
+ - Bump @fluentui/react-popover to v9.12.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
30
+ - Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
31
+
7
32
  ## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.3.7)
8
33
 
9
- Fri, 11 Jul 2025 15:56:58 GMT
34
+ Fri, 11 Jul 2025 15:59:24 GMT
10
35
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infolabel_v9.3.6..@fluentui/react-infolabel_v9.3.7)
11
36
 
12
37
  ### Patches
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/InfoButton.ts"],"sourcesContent":["export type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './components/InfoButton/index';\nexport {\n InfoButton,\n infoButtonClassNames,\n renderInfoButton_unstable,\n useInfoButtonStyles_unstable,\n useInfoButton_unstable,\n} from './components/InfoButton/index';\n"],"names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}
1
+ {"version":3,"sources":["../src/InfoButton.ts"],"sourcesContent":["export type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './components/InfoButton/index';\nexport {\n InfoButton,\n infoButtonClassNames,\n renderInfoButton_unstable,\n useInfoButtonStyles_unstable,\n useInfoButton_unstable,\n} from './components/InfoButton/index';\n"],"names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"mappings":"AACA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/InfoLabel.ts"],"sourcesContent":["export type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './components/InfoLabel/index';\nexport {\n InfoLabel,\n infoLabelClassNames,\n renderInfoLabel_unstable,\n useInfoLabelStyles_unstable,\n useInfoLabel_unstable,\n} from './components/InfoLabel/index';\n"],"names":["InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB,+BAA+B"}
1
+ {"version":3,"sources":["../src/InfoLabel.ts"],"sourcesContent":["export type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './components/InfoLabel/index';\nexport {\n InfoLabel,\n infoLabelClassNames,\n renderInfoLabel_unstable,\n useInfoLabelStyles_unstable,\n useInfoLabel_unstable,\n} from './components/InfoLabel/index';\n"],"names":["InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"mappings":"AACA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB,+BAA+B"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoButton/DefaultInfoButtonIcons.tsx"],"sourcesContent":["import {\n Info12Regular,\n Info12Filled,\n Info16Regular,\n Info16Filled,\n Info20Regular,\n Info20Filled,\n bundleIcon,\n} from '@fluentui/react-icons';\n\nexport const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);\nexport const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);\nexport const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);\n"],"names":["Info12Regular","Info12Filled","Info16Regular","Info16Filled","Info20Regular","Info20Filled","bundleIcon","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20"],"rangeMappings":";;;","mappings":"AAAA,SACEA,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,UAAU,QACL,wBAAwB;AAE/B,OAAO,MAAMC,0BAA0BD,WAAWL,cAAcD,eAAe;AAC/E,OAAO,MAAMQ,0BAA0BF,WAAWH,cAAcD,eAAe;AAC/E,OAAO,MAAMO,0BAA0BH,WAAWD,cAAcD,eAAe"}
1
+ {"version":3,"sources":["../src/components/InfoButton/DefaultInfoButtonIcons.tsx"],"sourcesContent":["import {\n Info12Regular,\n Info12Filled,\n Info16Regular,\n Info16Filled,\n Info20Regular,\n Info20Filled,\n bundleIcon,\n} from '@fluentui/react-icons';\n\nexport const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);\nexport const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);\nexport const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);\n"],"names":["Info12Regular","Info12Filled","Info16Regular","Info16Filled","Info20Regular","Info20Filled","bundleIcon","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20"],"mappings":"AAAA,SACEA,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,UAAU,QACL,wBAAwB;AAE/B,OAAO,MAAMC,0BAA0BD,WAAWL,cAAcD,eAAe;AAC/E,OAAO,MAAMQ,0BAA0BF,WAAWH,cAAcD,eAAe;AAC/E,OAAO,MAAMO,0BAA0BH,WAAWD,cAAcD,eAAe"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\nimport type { InfoButtonProps } from './InfoButton.types';\n\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */\nexport const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {\n const state = useInfoButton_unstable(props, ref);\n\n useInfoButtonStyles_unstable(state);\n useCustomStyleHook_unstable('useInfoButtonStyles_unstable')(state);\n\n return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQN,uBAAuBI,OAAOC;IAE5CJ,6BAA6BK;IAC7BR,4BAA4B,gCAAgCQ;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\nimport type { InfoButtonProps } from './InfoButton.types';\n\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */\nexport const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {\n const state = useInfoButton_unstable(props, ref);\n\n useInfoButtonStyles_unstable(state);\n useCustomStyleHook_unstable('useInfoButtonStyles_unstable')(state);\n\n return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQN,uBAAuBI,OAAOC;IAE5CJ,6BAA6BK;IAC7BR,4BAA4B,gCAAgCQ;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoButton/InfoButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n root: NonNullable<Slot<'button'>>;\n\n /**\n * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n */\n popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;\n\n /**\n * The information to be displayed in the PopoverSurface when the button is pressed.\n */\n info: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {\n /**\n * Size of the InfoButton.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Whether the InfoButton should be rendered inline or on a Portal.\n *\n * @default true\n */\n inline?: boolean;\n};\n\n/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoCA;;CAEC,GACD,WAAmH"}
1
+ {"version":3,"sources":["../src/components/InfoButton/InfoButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n root: NonNullable<Slot<'button'>>;\n\n /**\n * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n */\n popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;\n\n /**\n * The information to be displayed in the PopoverSurface when the button is pressed.\n */\n info: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {\n /**\n * Size of the InfoButton.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Whether the InfoButton should be rendered inline or on a Portal.\n *\n * @default true\n */\n inline?: boolean;\n};\n\n/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAAmH"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoButton/index.ts"],"sourcesContent":["export { InfoButton } from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nexport { renderInfoButton_unstable } from './renderInfoButton';\nexport { useInfoButton_unstable } from './useInfoButton';\nexport { infoButtonClassNames, useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\n"],"names":["InfoButton","renderInfoButton_unstable","useInfoButton_unstable","infoButtonClassNames","useInfoButtonStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}
1
+ {"version":3,"sources":["../src/components/InfoButton/index.ts"],"sourcesContent":["export { InfoButton } from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nexport { renderInfoButton_unstable } from './renderInfoButton';\nexport { useInfoButton_unstable } from './useInfoButton';\nexport { infoButtonClassNames, useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\n"],"names":["InfoButton","renderInfoButton_unstable","useInfoButton_unstable","infoButtonClassNames","useInfoButtonStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';\n\n/**\n * Render the final JSX of InfoButton\n */\nexport const renderInfoButton_unstable = (state: InfoButtonState) => {\n assertSlots<InfoButtonSlots>(state);\n\n return (\n <state.popover>\n <PopoverTrigger>\n <state.root />\n </PopoverTrigger>\n <state.info />\n </state.popover>\n );\n};\n"],"names":["assertSlots","PopoverTrigger","renderInfoButton_unstable","state","popover","root","info"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCH,YAA6BG;IAE7B,qBACE,MAACA,MAAMC,OAAO;;0BACZ,KAACH;0BACC,cAAA,KAACE,MAAME,IAAI;;0BAEb,KAACF,MAAMG,IAAI;;;AAGjB,EAAE"}
1
+ {"version":3,"sources":["../src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';\n\n/**\n * Render the final JSX of InfoButton\n */\nexport const renderInfoButton_unstable = (state: InfoButtonState) => {\n assertSlots<InfoButtonSlots>(state);\n\n return (\n <state.popover>\n <PopoverTrigger>\n <state.root />\n </PopoverTrigger>\n <state.info />\n </state.popover>\n );\n};\n"],"names":["assertSlots","PopoverTrigger","renderInfoButton_unstable","state","popover","root","info"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCH,YAA6BG;IAE7B,qBACE,MAACA,MAAMC,OAAO;;0BACZ,KAACH;0BACC,cAAA,KAACE,MAAME,IAAI;;0BAEb,KAACF,MAAMG,IAAI;;;AAGjB,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useControllableState,\n slot,\n useMergedRefs,\n elementContains,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n small: <DefaultInfoButtonIcon12 />,\n medium: <DefaultInfoButtonIcon16 />,\n large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLButtonElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLButtonElement>): InfoButtonState => {\n const { size = 'medium', inline = true } = props;\n\n const rootRef = useMergedRefs(ref);\n\n const state: InfoButtonState = {\n inline,\n size,\n\n components: {\n root: 'button',\n popover: Popover as React.FC<Partial<PopoverProps>>,\n info: PopoverSurface,\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...props,\n ref: rootRef,\n }),\n { elementType: 'button' },\n ),\n popover: slot.always(props.popover, {\n defaultProps: {\n inline,\n positioning: 'above-start',\n size: popoverSizeMap[size],\n withArrow: true,\n },\n elementType: Popover as React.FC<Partial<Omit<PopoverProps, 'openOnHover'>>>,\n }),\n info: slot.always(props.info, {\n defaultProps: {\n role: 'note',\n tabIndex: -1,\n },\n elementType: PopoverSurface,\n }),\n };\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: state.popover.open,\n defaultState: state.popover.defaultOpen,\n initialState: false,\n });\n\n state.popover.open = popoverOpen;\n state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n const infoRef = useMergedRefs(state.info.ref);\n state.info.ref = infoRef;\n\n // Hide the popover when focus moves out of the button and popover\n const onBlurButtonOrInfo = (e: React.FocusEvent) => {\n const nextFocused = e.relatedTarget;\n\n if (nextFocused && rootRef.current !== nextFocused && !elementContains(infoRef.current, nextFocused)) {\n setPopoverOpen(false);\n }\n };\n\n state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlurButtonOrInfo));\n state.info.onBlurCapture = useEventCallback(mergeCallbacks(state.info.onBlurCapture, onBlurButtonOrInfo));\n return state;\n};\n"],"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getIntrinsicElementProps","mergeCallbacks","useControllableState","slot","useMergedRefs","elementContains","useEventCallback","Popover","PopoverSurface","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","inline","rootRef","state","components","root","popover","info","always","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","infoRef","onBlurButtonOrInfo","nextFocused","relatedTarget","current","onBlur","onBlurCapture"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,2BAA2B;AACrH,SACEC,wBAAwB,EACxBC,cAAc,EACdC,oBAAoB,EACpBC,IAAI,EACJC,aAAa,EACbC,eAAe,EACfC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,OAAO,EAAEC,cAAc,QAAQ,0BAA0B;AAIlE,MAAMC,oBAAoB;IACxBC,qBAAO,oBAACb;IACRc,sBAAQ,oBAACb;IACTc,qBAAO,oBAACb;AACV;AAEA,MAAMc,iBAAiB;IACrBH,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAE,GAAGH;IAE3C,MAAMI,UAAUf,cAAcY;IAE9B,MAAMI,QAAyB;QAC7BF;QACAD;QAEAI,YAAY;YACVC,MAAM;YACNC,SAAShB;YACTiB,MAAMhB;QACR;QAEAc,MAAMnB,KAAKsB,MAAM,CACfzB,yBAAyB,UAAU;YACjC0B,UAAUjB,iBAAiB,CAACQ,KAAK;YACjCU,MAAM;YACN,cAAc;YACd,GAAGZ,KAAK;YACRC,KAAKG;QACP,IACA;YAAES,aAAa;QAAS;QAE1BL,SAASpB,KAAKsB,MAAM,CAACV,MAAMQ,OAAO,EAAE;YAClCM,cAAc;gBACZX;gBACAY,aAAa;gBACbb,MAAMJ,cAAc,CAACI,KAAK;gBAC1Bc,WAAW;YACb;YACAH,aAAarB;QACf;QACAiB,MAAMrB,KAAKsB,MAAM,CAACV,MAAMS,IAAI,EAAE;YAC5BK,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAapB;QACf;IACF;IAEA,MAAM,CAAC0B,aAAaC,eAAe,GAAGjC,qBAAqB;QACzDkB,OAAOA,MAAMG,OAAO,CAACa,IAAI;QACzBC,cAAcjB,MAAMG,OAAO,CAACe,WAAW;QACvCC,cAAc;IAChB;IAEAnB,MAAMG,OAAO,CAACa,IAAI,GAAGF;IACrBd,MAAMG,OAAO,CAACiB,YAAY,GAAGvC,eAAemB,MAAMG,OAAO,CAACiB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,UAAUvC,cAAcgB,MAAMI,IAAI,CAACR,GAAG;IAC5CI,MAAMI,IAAI,CAACR,GAAG,GAAG2B;IAEjB,kEAAkE;IAClE,MAAMC,qBAAqB,CAACH;QAC1B,MAAMI,cAAcJ,EAAEK,aAAa;QAEnC,IAAID,eAAe1B,QAAQ4B,OAAO,KAAKF,eAAe,CAACxC,gBAAgBsC,QAAQI,OAAO,EAAEF,cAAc;YACpGV,eAAe;QACjB;IACF;IAEAf,MAAME,IAAI,CAAC0B,MAAM,GAAG1C,iBAAiBL,eAAemB,MAAME,IAAI,CAAC0B,MAAM,EAAEJ;IACvExB,MAAMI,IAAI,CAACyB,aAAa,GAAG3C,iBAAiBL,eAAemB,MAAMI,IAAI,CAACyB,aAAa,EAAEL;IACrF,OAAOxB;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useControllableState,\n slot,\n useMergedRefs,\n elementContains,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n small: <DefaultInfoButtonIcon12 />,\n medium: <DefaultInfoButtonIcon16 />,\n large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLButtonElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLButtonElement>): InfoButtonState => {\n const { size = 'medium', inline = true } = props;\n\n const rootRef = useMergedRefs(ref);\n\n const state: InfoButtonState = {\n inline,\n size,\n\n components: {\n root: 'button',\n popover: Popover as React.FC<Partial<PopoverProps>>,\n info: PopoverSurface,\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...props,\n ref: rootRef,\n }),\n { elementType: 'button' },\n ),\n popover: slot.always(props.popover, {\n defaultProps: {\n inline,\n positioning: 'above-start',\n size: popoverSizeMap[size],\n withArrow: true,\n },\n elementType: Popover as React.FC<Partial<Omit<PopoverProps, 'openOnHover'>>>,\n }),\n info: slot.always(props.info, {\n defaultProps: {\n role: 'note',\n tabIndex: -1,\n },\n elementType: PopoverSurface,\n }),\n };\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: state.popover.open,\n defaultState: state.popover.defaultOpen,\n initialState: false,\n });\n\n state.popover.open = popoverOpen;\n state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n const infoRef = useMergedRefs(state.info.ref);\n state.info.ref = infoRef;\n\n // Hide the popover when focus moves out of the button and popover\n const onBlurButtonOrInfo = (e: React.FocusEvent) => {\n const nextFocused = e.relatedTarget;\n\n if (nextFocused && rootRef.current !== nextFocused && !elementContains(infoRef.current, nextFocused)) {\n setPopoverOpen(false);\n }\n };\n\n state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlurButtonOrInfo));\n state.info.onBlurCapture = useEventCallback(mergeCallbacks(state.info.onBlurCapture, onBlurButtonOrInfo));\n return state;\n};\n"],"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getIntrinsicElementProps","mergeCallbacks","useControllableState","slot","useMergedRefs","elementContains","useEventCallback","Popover","PopoverSurface","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","inline","rootRef","state","components","root","popover","info","always","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","infoRef","onBlurButtonOrInfo","nextFocused","relatedTarget","current","onBlur","onBlurCapture"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,2BAA2B;AACrH,SACEC,wBAAwB,EACxBC,cAAc,EACdC,oBAAoB,EACpBC,IAAI,EACJC,aAAa,EACbC,eAAe,EACfC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,OAAO,EAAEC,cAAc,QAAQ,0BAA0B;AAIlE,MAAMC,oBAAoB;IACxBC,qBAAO,oBAACb;IACRc,sBAAQ,oBAACb;IACTc,qBAAO,oBAACb;AACV;AAEA,MAAMc,iBAAiB;IACrBH,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAE,GAAGH;IAE3C,MAAMI,UAAUf,cAAcY;IAE9B,MAAMI,QAAyB;QAC7BF;QACAD;QAEAI,YAAY;YACVC,MAAM;YACNC,SAAShB;YACTiB,MAAMhB;QACR;QAEAc,MAAMnB,KAAKsB,MAAM,CACfzB,yBAAyB,UAAU;YACjC0B,UAAUjB,iBAAiB,CAACQ,KAAK;YACjCU,MAAM;YACN,cAAc;YACd,GAAGZ,KAAK;YACRC,KAAKG;QACP,IACA;YAAES,aAAa;QAAS;QAE1BL,SAASpB,KAAKsB,MAAM,CAACV,MAAMQ,OAAO,EAAE;YAClCM,cAAc;gBACZX;gBACAY,aAAa;gBACbb,MAAMJ,cAAc,CAACI,KAAK;gBAC1Bc,WAAW;YACb;YACAH,aAAarB;QACf;QACAiB,MAAMrB,KAAKsB,MAAM,CAACV,MAAMS,IAAI,EAAE;YAC5BK,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAapB;QACf;IACF;IAEA,MAAM,CAAC0B,aAAaC,eAAe,GAAGjC,qBAAqB;QACzDkB,OAAOA,MAAMG,OAAO,CAACa,IAAI;QACzBC,cAAcjB,MAAMG,OAAO,CAACe,WAAW;QACvCC,cAAc;IAChB;IAEAnB,MAAMG,OAAO,CAACa,IAAI,GAAGF;IACrBd,MAAMG,OAAO,CAACiB,YAAY,GAAGvC,eAAemB,MAAMG,OAAO,CAACiB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,UAAUvC,cAAcgB,MAAMI,IAAI,CAACR,GAAG;IAC5CI,MAAMI,IAAI,CAACR,GAAG,GAAG2B;IAEjB,kEAAkE;IAClE,MAAMC,qBAAqB,CAACH;QAC1B,MAAMI,cAAcJ,EAAEK,aAAa;QAEnC,IAAID,eAAe1B,QAAQ4B,OAAO,KAAKF,eAAe,CAACxC,gBAAgBsC,QAAQI,OAAO,EAAEF,cAAc;YACpGV,eAAe;QACjB;IACF;IAEAf,MAAME,IAAI,CAAC0B,MAAM,GAAG1C,iBAAiBL,eAAemB,MAAME,IAAI,CAAC0B,MAAM,EAAEJ;IACvExB,MAAMI,IAAI,CAACyB,aAAa,GAAG3C,iBAAiBL,eAAemB,MAAMI,IAAI,CAACyB,aAAa,EAAEL;IACrF,OAAOxB;AACT,EAAE"}
@@ -0,0 +1,97 @@
1
+ import { createFocusOutlineStyle } from '@fluentui/react-tabster';
2
+ import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
3
+ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
4
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
5
+ export const infoButtonClassNames = {
6
+ root: 'fui-InfoButton',
7
+ // this className won't be used, but it's needed to satisfy the type checker
8
+ popover: 'fui-InfoButton__popover',
9
+ info: 'fui-InfoButton__info'
10
+ };
11
+ /**
12
+ * Styles for the root slot
13
+ */ const useButtonStyles = makeStyles({
14
+ base: {
15
+ alignItems: 'center',
16
+ boxSizing: 'border-box',
17
+ display: 'inline-flex',
18
+ justifyContent: 'center',
19
+ textDecorationLine: 'none',
20
+ verticalAlign: 'middle',
21
+ position: 'relative',
22
+ backgroundColor: tokens.colorTransparentBackground,
23
+ color: tokens.colorNeutralForeground2,
24
+ ...shorthands.borderStyle('none'),
25
+ borderRadius: tokens.borderRadiusMedium,
26
+ margin: '0',
27
+ padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,
28
+ [`& .${iconFilledClassName}`]: {
29
+ display: 'none'
30
+ },
31
+ [`& .${iconRegularClassName}`]: {
32
+ display: 'inline-flex'
33
+ },
34
+ ':hover': {
35
+ backgroundColor: tokens.colorTransparentBackgroundHover,
36
+ color: tokens.colorNeutralForeground2BrandHover,
37
+ cursor: 'pointer',
38
+ [`& .${iconFilledClassName}`]: {
39
+ display: 'inline-flex'
40
+ },
41
+ [`& .${iconRegularClassName}`]: {
42
+ display: 'none'
43
+ }
44
+ },
45
+ ':hover:active': {
46
+ backgroundColor: tokens.colorTransparentBackgroundPressed,
47
+ color: tokens.colorNeutralForeground2BrandPressed
48
+ }
49
+ },
50
+ selected: {
51
+ backgroundColor: tokens.colorTransparentBackgroundSelected,
52
+ color: tokens.colorNeutralForeground2BrandSelected,
53
+ [`& .${iconFilledClassName}`]: {
54
+ display: 'inline-flex'
55
+ },
56
+ [`& .${iconRegularClassName}`]: {
57
+ display: 'none'
58
+ },
59
+ '@media (forced-colors: active)': {
60
+ backgroundColor: 'Highlight',
61
+ color: 'Canvas'
62
+ }
63
+ },
64
+ highContrast: {
65
+ '@media (forced-colors: active)': {
66
+ color: 'CanvasText',
67
+ ':hover,:hover:active': {
68
+ forcedColorAdjust: 'none',
69
+ backgroundColor: 'Highlight',
70
+ color: 'Canvas'
71
+ }
72
+ }
73
+ },
74
+ focusIndicator: createFocusOutlineStyle(),
75
+ large: {
76
+ padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`
77
+ }
78
+ });
79
+ const usePopoverSurfaceStyles = makeStyles({
80
+ base: {
81
+ maxWidth: '264px'
82
+ },
83
+ smallMedium: typographyStyles.caption1,
84
+ large: typographyStyles.body1
85
+ });
86
+ /**
87
+ * Apply styling to the InfoButton slots based on the state
88
+ */ export const useInfoButtonStyles_unstable = (state)=>{
89
+ 'use no memo';
90
+ const { size } = state;
91
+ const { open } = state.popover;
92
+ const buttonStyles = useButtonStyles();
93
+ const popoverSurfaceStyles = usePopoverSurfaceStyles();
94
+ state.info.className = mergeClasses(infoButtonClassNames.info, popoverSurfaceStyles.base, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
95
+ state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
96
+ return state;
97
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {\n root: 'fui-InfoButton',\n // this className won't be used, but it's needed to satisfy the type checker\n popover: 'fui-InfoButton__popover',\n info: 'fui-InfoButton__info',\n};\n\n/**\n * Styles for the root slot\n */\nconst useButtonStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n position: 'relative',\n\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground2,\n\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n margin: '0',\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline-flex',\n },\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n cursor: 'pointer',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n selected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n\n ':hover,:hover:active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n },\n\n focusIndicator: createFocusOutlineStyle(),\n\n large: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`,\n },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\n base: {\n maxWidth: '264px',\n },\n smallMedium: typographyStyles.caption1,\n large: typographyStyles.body1,\n});\n\n/**\n * Apply styling to the InfoButton slots based on the state\n */\nexport const useInfoButtonStyles_unstable = (state: InfoButtonState): InfoButtonState => {\n 'use no memo';\n\n const { size } = state;\n const { open } = state.popover;\n const buttonStyles = useButtonStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n state.info.className = mergeClasses(\n infoButtonClassNames.info,\n popoverSurfaceStyles.base,\n size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium,\n state.info.className,\n );\n\n state.root.className = mergeClasses(\n infoButtonClassNames.root,\n buttonStyles.base,\n buttonStyles.highContrast,\n buttonStyles.focusIndicator,\n open && buttonStyles.selected,\n size === 'large' && buttonStyles.large,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","info","useButtonStyles","base","alignItems","boxSizing","display","justifyContent","textDecorationLine","verticalAlign","position","backgroundColor","colorTransparentBackground","color","colorNeutralForeground2","borderStyle","borderRadius","borderRadiusMedium","margin","padding","spacingVerticalXS","spacingHorizontalXS","colorTransparentBackgroundHover","colorNeutralForeground2BrandHover","cursor","colorTransparentBackgroundPressed","colorNeutralForeground2BrandPressed","selected","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","highContrast","forcedColorAdjust","focusIndicator","large","spacingVerticalXXS","usePopoverSurfaceStyles","maxWidth","smallMedium","caption1","body1","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoLabel/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { InfoLabelProps } from './InfoLabel.types';\nimport { renderInfoLabel_unstable } from './renderInfoLabel';\nimport { useInfoLabel_unstable } from './useInfoLabel';\nimport { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n\n/**\n * InfoLabel component\n */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n const state = useInfoLabel_unstable(props, ref);\n\n useInfoLabelStyles_unstable(state);\n useCustomStyleHook_unstable('useInfoLabelStyles_unstable')(state);\n\n return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoLabel_unstable","useInfoLabel_unstable","useInfoLabelStyles_unstable","InfoLabel","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,sBAAsBI,OAAOC;IAE3CJ,4BAA4BK;IAC5BR,4BAA4B,+BAA+BQ;IAE3D,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/InfoLabel/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { InfoLabelProps } from './InfoLabel.types';\nimport { renderInfoLabel_unstable } from './renderInfoLabel';\nimport { useInfoLabel_unstable } from './useInfoLabel';\nimport { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n\n/**\n * InfoLabel component\n */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n const state = useInfoLabel_unstable(props, ref);\n\n useInfoLabelStyles_unstable(state);\n useCustomStyleHook_unstable('useInfoLabelStyles_unstable')(state);\n\n return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoLabel_unstable","useInfoLabel_unstable","useInfoLabelStyles_unstable","InfoLabel","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,sBAAsBI,OAAOC;IAE3CJ,4BAA4BK;IAC5BR,4BAA4B,+BAA+BQ;IAE3D,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoLabel/InfoLabel.types.ts"],"sourcesContent":["import { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton';\nimport type { InfoButtonProps } from '../InfoButton';\n\nexport type InfoLabelSlots = {\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Label component.\n *\n * It is not typically necessary to use this prop. The label text is the child of the `<InfoLabel>`, and other props\n * such as `size` and `required` should be set directly on the `InfoLabel`.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<InfoLabel>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n label: NonNullable<Slot<typeof Label>>;\n\n /**\n * The InfoButton component.\n *\n * It is not typically necessary to use this prop. The content can be set using the `info` prop of the InfoLabel.\n */\n infoButton: Slot<typeof InfoButton>;\n};\n\n/**\n * InfoLabel Props\n */\nexport type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {\n /**\n * The content of the InfoButton's popover.\n */\n info?: InfoButtonProps['info'];\n};\n\n/**\n * State used in rendering InfoLabel\n */\nexport type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAqCA;;CAEC,GACD,WAA2F"}
1
+ {"version":3,"sources":["../src/components/InfoLabel/InfoLabel.types.ts"],"sourcesContent":["import { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton';\nimport type { InfoButtonProps } from '../InfoButton';\n\nexport type InfoLabelSlots = {\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Label component.\n *\n * It is not typically necessary to use this prop. The label text is the child of the `<InfoLabel>`, and other props\n * such as `size` and `required` should be set directly on the `InfoLabel`.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<InfoLabel>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n label: NonNullable<Slot<typeof Label>>;\n\n /**\n * The InfoButton component.\n *\n * It is not typically necessary to use this prop. The content can be set using the `info` prop of the InfoLabel.\n */\n infoButton: Slot<typeof InfoButton>;\n};\n\n/**\n * InfoLabel Props\n */\nexport type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {\n /**\n * The content of the InfoButton's popover.\n */\n info?: InfoButtonProps['info'];\n};\n\n/**\n * State used in rendering InfoLabel\n */\nexport type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;\n"],"names":[],"mappings":"AAqCA;;CAEC,GACD,WAA2F"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoLabel/index.ts"],"sourcesContent":["export { InfoLabel } from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\nexport { renderInfoLabel_unstable } from './renderInfoLabel';\nexport { useInfoLabel_unstable } from './useInfoLabel';\nexport { infoLabelClassNames, useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n"],"names":["InfoLabel","renderInfoLabel_unstable","useInfoLabel_unstable","infoLabelClassNames","useInfoLabelStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAExC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B"}
1
+ {"version":3,"sources":["../src/components/InfoLabel/index.ts"],"sourcesContent":["export { InfoLabel } from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\nexport { renderInfoLabel_unstable } from './renderInfoLabel';\nexport { useInfoLabel_unstable } from './useInfoLabel';\nexport { infoLabelClassNames, useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n"],"names":["InfoLabel","renderInfoLabel_unstable","useInfoLabel_unstable","infoLabelClassNames","useInfoLabelStyles_unstable"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAExC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoLabel/renderInfoLabel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Render the final JSX of InfoLabel\n */\nexport const renderInfoLabel_unstable = (state: InfoLabelState) => {\n assertSlots<InfoLabelSlots>(state);\n\n return (\n <state.root>\n <state.label />\n {state.infoButton && <state.infoButton />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderInfoLabel_unstable","state","root","label","infoButton"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;;;AAG5C,EAAE"}
1
+ {"version":3,"sources":["../src/components/InfoLabel/renderInfoLabel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Render the final JSX of InfoLabel\n */\nexport const renderInfoLabel_unstable = (state: InfoLabelState) => {\n assertSlots<InfoLabelSlots>(state);\n\n return (\n <state.root>\n <state.label />\n {state.infoButton && <state.infoButton />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderInfoLabel_unstable","state","root","label","infoButton"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;;;AAG5C,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton/InfoButton';\nimport type { InfoLabelProps, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Create the state required to render InfoLabel.\n *\n * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,\n * before being passed to renderInfoLabel_unstable.\n *\n * @param props - props from this instance of InfoLabel\n * @param ref - reference to label element of InfoLabel\n */\nexport const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTMLLabelElement>): InfoLabelState => {\n const {\n root: rootShorthand,\n label: labelShorthand,\n infoButton: infoButtonShorthand,\n info,\n size,\n className,\n style,\n ...labelProps\n } = props;\n const baseId = useId('infolabel-');\n const [open, setOpen] = React.useState(false);\n\n const root = slot.always(rootShorthand, {\n defaultProps: {\n className,\n style,\n },\n elementType: 'span',\n });\n\n const label = slot.always(labelShorthand, {\n defaultProps: {\n id: baseId + '__label',\n ref,\n size,\n ...labelProps,\n },\n elementType: Label,\n });\n\n const infoButton = slot.optional(infoButtonShorthand, {\n renderByDefault: !!info,\n defaultProps: {\n id: baseId + '__infoButton',\n size,\n info,\n },\n elementType: InfoButton,\n });\n\n const infoButtonPopover = slot.always(infoButton?.popover, {\n elementType: 'div',\n });\n infoButtonPopover.onOpenChange = useEventCallback(\n mergeCallbacks(infoButtonPopover.onOpenChange, (e, data) => {\n setOpen(data.open);\n }),\n );\n\n if (infoButton) {\n infoButton.popover = infoButtonPopover;\n const infoPopupId = baseId + '__info'; // used as a self-referencing aria-labelledby to name the popup\n infoButton.info = slot.optional(infoButton?.info, {\n defaultProps: {\n id: infoPopupId,\n 'aria-labelledby': infoPopupId,\n },\n elementType: 'div',\n });\n\n infoButton['aria-labelledby'] ??= `${label.id} ${infoButton.id}`;\n\n if (open) {\n root['aria-owns'] ??= infoButton.info?.id;\n }\n }\n\n return {\n size,\n components: {\n root: 'span',\n label: Label,\n infoButton: InfoButton,\n },\n root,\n label,\n infoButton,\n };\n};\n"],"names":["React","Label","mergeCallbacks","useEventCallback","useId","slot","InfoButton","useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","info","size","className","style","labelProps","baseId","open","setOpen","useState","always","defaultProps","elementType","id","optional","renderByDefault","infoButtonPopover","popover","onOpenChange","e","data","infoPopupId","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EACJC,MAAMC,aAAa,EACnBC,OAAOC,cAAc,EACrBC,YAAYC,mBAAmB,EAC/BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,YACJ,GAAGZ;IACJ,MAAMa,SAASjB,MAAM;IACrB,MAAM,CAACkB,MAAMC,QAAQ,GAAGvB,MAAMwB,QAAQ,CAAC;IAEvC,MAAMd,OAAOL,KAAKoB,MAAM,CAACd,eAAe;QACtCe,cAAc;YACZR;YACAC;QACF;QACAQ,aAAa;IACf;IAEA,MAAMf,QAAQP,KAAKoB,MAAM,CAACZ,gBAAgB;QACxCa,cAAc;YACZE,IAAIP,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;QACAO,aAAa1B;IACf;IAEA,MAAMa,aAAaT,KAAKwB,QAAQ,CAACd,qBAAqB;QACpDe,iBAAiB,CAAC,CAACd;QACnBU,cAAc;YACZE,IAAIP,SAAS;YACbJ;YACAD;QACF;QACAW,aAAarB;IACf;IAEA,MAAMyB,oBAAoB1B,KAAKoB,MAAM,CAACX,uBAAAA,iCAAAA,WAAYkB,OAAO,EAAE;QACzDL,aAAa;IACf;IACAI,kBAAkBE,YAAY,GAAG9B,iBAC/BD,eAAe6B,kBAAkBE,YAAY,EAAE,CAACC,GAAGC;QACjDZ,QAAQY,KAAKb,IAAI;IACnB;IAGF,IAAIR,YAAY;YAWdA,aAAW;QAVXA,WAAWkB,OAAO,GAAGD;QACrB,MAAMK,cAAcf,SAAS,UAAU,+DAA+D;QACtGP,WAAWE,IAAI,GAAGX,KAAKwB,QAAQ,CAACf,uBAAAA,iCAAAA,WAAYE,IAAI,EAAE;YAChDU,cAAc;gBACZE,IAAIQ;gBACJ,mBAAmBA;YACrB;YACAT,aAAa;QACf;;QAEAb,MAAAA,cAAAA,WAAU,CAAC,kBAAA,kBAAkB,iCAA7BA,WAAU,CAAC,gBAAkB,GAAK,CAAC,EAAEF,MAAMgB,EAAE,CAAC,CAAC,EAAEd,WAAWc,EAAE,CAAC,CAAC;QAEhE,IAAIN,MAAM;gBACcR;gBAAtBJ,OAAK;;YAALA,OAAAA,QAAAA,KAAI,CAAC,YAAA,YAAY,mCAAjBA,KAAI,CAAC,UAAY,IAAKI,mBAAAA,WAAWE,IAAI,cAAfF,uCAAAA,iBAAiBc,EAAE;QAC3C;IACF;IAEA,OAAO;QACLX;QACAoB,YAAY;YACV3B,MAAM;YACNE,OAAOX;YACPa,YAAYR;QACd;QACAI;QACAE;QACAE;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton/InfoButton';\nimport type { InfoLabelProps, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Create the state required to render InfoLabel.\n *\n * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,\n * before being passed to renderInfoLabel_unstable.\n *\n * @param props - props from this instance of InfoLabel\n * @param ref - reference to label element of InfoLabel\n */\nexport const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTMLLabelElement>): InfoLabelState => {\n const {\n root: rootShorthand,\n label: labelShorthand,\n infoButton: infoButtonShorthand,\n info,\n size,\n className,\n style,\n ...labelProps\n } = props;\n const baseId = useId('infolabel-');\n const [open, setOpen] = React.useState(false);\n\n const root = slot.always(rootShorthand, {\n defaultProps: {\n className,\n style,\n },\n elementType: 'span',\n });\n\n const label = slot.always(labelShorthand, {\n defaultProps: {\n id: baseId + '__label',\n ref,\n size,\n ...labelProps,\n },\n elementType: Label,\n });\n\n const infoButton = slot.optional(infoButtonShorthand, {\n renderByDefault: !!info,\n defaultProps: {\n id: baseId + '__infoButton',\n size,\n info,\n },\n elementType: InfoButton,\n });\n\n const infoButtonPopover = slot.always(infoButton?.popover, {\n elementType: 'div',\n });\n infoButtonPopover.onOpenChange = useEventCallback(\n mergeCallbacks(infoButtonPopover.onOpenChange, (e, data) => {\n setOpen(data.open);\n }),\n );\n\n if (infoButton) {\n infoButton.popover = infoButtonPopover;\n const infoPopupId = baseId + '__info'; // used as a self-referencing aria-labelledby to name the popup\n infoButton.info = slot.optional(infoButton?.info, {\n defaultProps: {\n id: infoPopupId,\n 'aria-labelledby': infoPopupId,\n },\n elementType: 'div',\n });\n\n infoButton['aria-labelledby'] ??= `${label.id} ${infoButton.id}`;\n\n if (open) {\n root['aria-owns'] ??= infoButton.info?.id;\n }\n }\n\n return {\n size,\n components: {\n root: 'span',\n label: Label,\n infoButton: InfoButton,\n },\n root,\n label,\n infoButton,\n };\n};\n"],"names":["React","Label","mergeCallbacks","useEventCallback","useId","slot","InfoButton","useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","info","size","className","style","labelProps","baseId","open","setOpen","useState","always","defaultProps","elementType","id","optional","renderByDefault","infoButtonPopover","popover","onOpenChange","e","data","infoPopupId","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EACJC,MAAMC,aAAa,EACnBC,OAAOC,cAAc,EACrBC,YAAYC,mBAAmB,EAC/BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,YACJ,GAAGZ;IACJ,MAAMa,SAASjB,MAAM;IACrB,MAAM,CAACkB,MAAMC,QAAQ,GAAGvB,MAAMwB,QAAQ,CAAC;IAEvC,MAAMd,OAAOL,KAAKoB,MAAM,CAACd,eAAe;QACtCe,cAAc;YACZR;YACAC;QACF;QACAQ,aAAa;IACf;IAEA,MAAMf,QAAQP,KAAKoB,MAAM,CAACZ,gBAAgB;QACxCa,cAAc;YACZE,IAAIP,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;QACAO,aAAa1B;IACf;IAEA,MAAMa,aAAaT,KAAKwB,QAAQ,CAACd,qBAAqB;QACpDe,iBAAiB,CAAC,CAACd;QACnBU,cAAc;YACZE,IAAIP,SAAS;YACbJ;YACAD;QACF;QACAW,aAAarB;IACf;IAEA,MAAMyB,oBAAoB1B,KAAKoB,MAAM,CAACX,uBAAAA,iCAAAA,WAAYkB,OAAO,EAAE;QACzDL,aAAa;IACf;IACAI,kBAAkBE,YAAY,GAAG9B,iBAC/BD,eAAe6B,kBAAkBE,YAAY,EAAE,CAACC,GAAGC;QACjDZ,QAAQY,KAAKb,IAAI;IACnB;IAGF,IAAIR,YAAY;YAWdA,aAAW;QAVXA,WAAWkB,OAAO,GAAGD;QACrB,MAAMK,cAAcf,SAAS,UAAU,+DAA+D;QACtGP,WAAWE,IAAI,GAAGX,KAAKwB,QAAQ,CAACf,uBAAAA,iCAAAA,WAAYE,IAAI,EAAE;YAChDU,cAAc;gBACZE,IAAIQ;gBACJ,mBAAmBA;YACrB;YACAT,aAAa;QACf;;QAEAb,MAAAA,cAAAA,WAAU,CAAC,kBAAA,kBAAkB,iCAA7BA,WAAU,CAAC,gBAAkB,GAAK,GAAGF,MAAMgB,EAAE,CAAC,CAAC,EAAEd,WAAWc,EAAE,EAAE;QAEhE,IAAIN,MAAM;gBACcR;gBAAtBJ,OAAK;;YAALA,OAAAA,QAAAA,KAAI,CAAC,YAAA,YAAY,mCAAjBA,KAAI,CAAC,UAAY,IAAKI,mBAAAA,WAAWE,IAAI,cAAfF,uCAAAA,iBAAiBc,EAAE;QAC3C;IACF;IAEA,OAAO;QACLX;QACAoB,YAAY;YACV3B,MAAM;YACNE,OAAOX;YACPa,YAAYR;QACd;QACAI;QACAE;QACAE;IACF;AACF,EAAE"}
@@ -0,0 +1,40 @@
1
+ import { tokens } from '@fluentui/react-theme';
2
+ import { makeStyles, mergeClasses } from '@griffel/react';
3
+ export const infoLabelClassNames = {
4
+ root: 'fui-InfoLabel',
5
+ label: 'fui-InfoLabel__label',
6
+ infoButton: 'fui-InfoLabel__infoButton'
7
+ };
8
+ const useLabelStyles = makeStyles({
9
+ base: {
10
+ verticalAlign: 'top',
11
+ cursor: 'inherit',
12
+ color: 'inherit'
13
+ }
14
+ });
15
+ const useInfoButtonStyles = makeStyles({
16
+ base: {
17
+ verticalAlign: 'top',
18
+ // Negative margin to align with the text
19
+ marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,
20
+ marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`
21
+ },
22
+ large: {
23
+ // Negative margin to align with the text
24
+ marginTop: '-1px',
25
+ marginBottom: '-1px'
26
+ }
27
+ });
28
+ /**
29
+ * Apply styling to the InfoLabel slots based on the state
30
+ */ export const useInfoLabelStyles_unstable = (state)=>{
31
+ 'use no memo';
32
+ state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);
33
+ const labelStyles = useLabelStyles();
34
+ state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);
35
+ const infoButtonStyles = useInfoButtonStyles();
36
+ if (state.infoButton) {
37
+ state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
38
+ }
39
+ return state;
40
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\nexport const infoLabelClassNames: SlotClassNames<InfoLabelSlots> = {\n root: 'fui-InfoLabel',\n label: 'fui-InfoLabel__label',\n infoButton: 'fui-InfoLabel__infoButton',\n};\n\nconst useLabelStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n cursor: 'inherit',\n color: 'inherit',\n },\n});\n\nconst useInfoButtonStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n\n // Negative margin to align with the text\n marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`,\n },\n\n large: {\n // Negative margin to align with the text\n marginTop: '-1px',\n marginBottom: '-1px',\n },\n});\n\n/**\n * Apply styling to the InfoLabel slots based on the state\n */\nexport const useInfoLabelStyles_unstable = (state: InfoLabelState): InfoLabelState => {\n 'use no memo';\n\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n\n const labelStyles = useLabelStyles();\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n state.infoButton.className = mergeClasses(\n infoLabelClassNames.infoButton,\n infoButtonStyles.base,\n state.size === 'large' && infoButtonStyles.large,\n state.infoButton.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","verticalAlign","cursor","color","useInfoButtonStyles","marginTop","spacingVerticalXXS","marginBottom","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,OAAO;IACPC,YAAY;AACd,EAAE;AAEF,MAAMC,iBAAiBN,WAAW;IAChCO,MAAM;QACJC,eAAe;QACfC,QAAQ;QACRC,OAAO;IACT;AACF;AAEA,MAAMC,sBAAsBX,WAAW;IACrCO,MAAM;QACJC,eAAe;QAEf,yCAAyC;QACzCI,WAAW,CAAC,WAAW,EAAEb,OAAOc,kBAAkB,CAAC,CAAC,CAAC;QACrDC,cAAc,CAAC,WAAW,EAAEf,OAAOc,kBAAkB,CAAC,CAAC,CAAC;IAC1D;IAEAE,OAAO;QACL,yCAAyC;QACzCH,WAAW;QACXE,cAAc;IAChB;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,8BAA8B,CAACC;IAC1C;IAEAA,MAAMd,IAAI,CAACe,SAAS,GAAGjB,aAAaC,oBAAoBC,IAAI,EAAEc,MAAMd,IAAI,CAACe,SAAS;IAElF,MAAMC,cAAcb;IACpBW,MAAMb,KAAK,CAACc,SAAS,GAAGjB,aAAaC,oBAAoBE,KAAK,EAAEe,YAAYZ,IAAI,EAAEU,MAAMb,KAAK,CAACc,SAAS;IAEvG,MAAME,mBAAmBT;IACzB,IAAIM,MAAMZ,UAAU,EAAE;QACpBY,MAAMZ,UAAU,CAACa,SAAS,GAAGjB,aAC3BC,oBAAoBG,UAAU,EAC9Be,iBAAiBb,IAAI,EACrBU,MAAMI,IAAI,KAAK,WAAWD,iBAAiBL,KAAK,EAChDE,MAAMZ,UAAU,CAACa,SAAS;IAE9B;IAEA,OAAOD;AACT,EAAE"}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n InfoLabel,\n infoLabelClassNames,\n renderInfoLabel_unstable,\n useInfoLabelStyles_unstable,\n useInfoLabel_unstable,\n} from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel';\n\nexport {\n InfoButton,\n infoButtonClassNames,\n renderInfoButton_unstable,\n useInfoButtonStyles_unstable,\n useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\n"],"names":["InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable","InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"rangeMappings":";","mappings":"AAAA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc;AAGrB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n InfoLabel,\n infoLabelClassNames,\n renderInfoLabel_unstable,\n useInfoLabelStyles_unstable,\n useInfoLabel_unstable,\n} from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel';\n\nexport {\n InfoButton,\n infoButtonClassNames,\n renderInfoButton_unstable,\n useInfoButtonStyles_unstable,\n useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\n"],"names":["InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable","InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"mappings":"AAAA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc;AAGrB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/InfoButton.ts"],"sourcesContent":["export type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './components/InfoButton/index';\nexport {\n InfoButton,\n infoButtonClassNames,\n renderInfoButton_unstable,\n useInfoButtonStyles_unstable,\n useInfoButton_unstable,\n} from './components/InfoButton/index';\n"],"names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,UAAU;eAAVA,iBAAU;;IACVC,oBAAoB;eAApBA,2BAAoB;;IACpBC,yBAAyB;eAAzBA,gCAAyB;;IACzBC,4BAA4B;eAA5BA,mCAA4B;;IAC5BC,sBAAsB;eAAtBA,6BAAsB;;;uBACjB"}
1
+ {"version":3,"sources":["../src/InfoButton.ts"],"sourcesContent":["export type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './components/InfoButton/index';\nexport {\n InfoButton,\n infoButtonClassNames,\n renderInfoButton_unstable,\n useInfoButtonStyles_unstable,\n useInfoButton_unstable,\n} from './components/InfoButton/index';\n"],"names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"mappings":";;;;;;;;;;;;eAEEA,iBAAU;;;eACVC,2BAAoB;;;eACpBC,gCAAyB;;;eACzBC,mCAA4B;;;eAC5BC,6BAAsB;;;uBACjB,gCAAgC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/InfoLabel.ts"],"sourcesContent":["export type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './components/InfoLabel/index';\nexport {\n InfoLabel,\n infoLabelClassNames,\n renderInfoLabel_unstable,\n useInfoLabelStyles_unstable,\n useInfoLabel_unstable,\n} from './components/InfoLabel/index';\n"],"names":["InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,SAAS;eAATA,gBAAS;;IACTC,mBAAmB;eAAnBA,0BAAmB;;IACnBC,wBAAwB;eAAxBA,+BAAwB;;IACxBC,2BAA2B;eAA3BA,kCAA2B;;IAC3BC,qBAAqB;eAArBA,4BAAqB;;;uBAChB"}
1
+ {"version":3,"sources":["../src/InfoLabel.ts"],"sourcesContent":["export type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './components/InfoLabel/index';\nexport {\n InfoLabel,\n infoLabelClassNames,\n renderInfoLabel_unstable,\n useInfoLabelStyles_unstable,\n useInfoLabel_unstable,\n} from './components/InfoLabel/index';\n"],"names":["InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"mappings":";;;;;;;;;;;;eAEEA,gBAAS;;;eACTC,0BAAmB;;;eACnBC,+BAAwB;;;eACxBC,kCAA2B;;;eAC3BC,4BAAqB;;;uBAChB,+BAA+B"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoButton/DefaultInfoButtonIcons.tsx"],"sourcesContent":["import {\n Info12Regular,\n Info12Filled,\n Info16Regular,\n Info16Filled,\n Info20Regular,\n Info20Filled,\n bundleIcon,\n} from '@fluentui/react-icons';\n\nexport const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);\nexport const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);\nexport const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);\n"],"names":["DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","bundleIcon","Info12Filled","Info12Regular","Info16Filled","Info16Regular","Info20Filled","Info20Regular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUaA,uBAAAA;eAAAA;;IACAC,uBAAAA;eAAAA;;IACAC,uBAAAA;eAAAA;;;4BAJN;AAEA,MAAMF,0BAA0BG,IAAAA,sBAAAA,EAAWC,wBAAAA,EAAcC,yBAAAA;AACzD,MAAMJ,0BAA0BE,IAAAA,sBAAAA,EAAWG,wBAAAA,EAAcC,yBAAAA;AACzD,MAAML,0BAA0BC,IAAAA,sBAAAA,EAAWK,wBAAAA,EAAcC,yBAAAA"}
1
+ {"version":3,"sources":["../src/components/InfoButton/DefaultInfoButtonIcons.tsx"],"sourcesContent":["import {\n Info12Regular,\n Info12Filled,\n Info16Regular,\n Info16Filled,\n Info20Regular,\n Info20Filled,\n bundleIcon,\n} from '@fluentui/react-icons';\n\nexport const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);\nexport const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);\nexport const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);\n"],"names":["Info12Regular","Info12Filled","Info16Regular","Info16Filled","Info20Regular","Info20Filled","bundleIcon","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20"],"mappings":";;;;;;;;;;;IAUaO,uBAAAA;;;2BACAC;;;2BACAC;;;;4BAJN,wBAAwB;AAExB,oCAAgCH,sBAAAA,EAAWL,wBAAAA,EAAcD,yBAAAA,EAAe;AACxE,MAAMQ,8BAA0BF,sBAAAA,EAAWH,wBAAAA,EAAcD,yBAAAA,EAAe;AACxE,MAAMO,8BAA0BH,sBAAAA,EAAWD,wBAAAA,EAAcD,yBAAAA,EAAe"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\nimport type { InfoButtonProps } from './InfoButton.types';\n\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */\nexport const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {\n const state = useInfoButton_unstable(props, ref);\n\n useInfoButtonStyles_unstable(state);\n useCustomStyleHook_unstable('useInfoButtonStyles_unstable')(state);\n\n return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"],"names":["InfoButton","React","forwardRef","props","ref","state","useInfoButton_unstable","useInfoButtonStyles_unstable","useCustomStyleHook_unstable","renderInfoButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;qCACqB;kCAEF;+BACH;2CACM;AAMtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7BG,IAAAA,gDAAAA,EAA4B,gCAAgCH;IAE5D,OAAOI,IAAAA,2CAAAA,EAA0BJ;AACnC;AAEAL,WAAWU,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\nimport type { InfoButtonProps } from './InfoButton.types';\n\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */\nexport const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {\n const state = useInfoButton_unstable(props, ref);\n\n useInfoButtonStyles_unstable(state);\n useCustomStyleHook_unstable('useInfoButtonStyles_unstable')(state);\n\n return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;qCACa,kCAAkC;kCAEpC,qBAAqB;+BACxB,kBAAkB;2CACZ,+BAA+B;AAMrE,mBAAMA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQN,yCAAAA,EAAuBI,OAAOC;QAE5CJ,uDAAAA,EAA6BK;QAC7BR,gDAAAA,EAA4B,gCAAgCQ;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoButton/InfoButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n root: NonNullable<Slot<'button'>>;\n\n /**\n * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n */\n popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;\n\n /**\n * The information to be displayed in the PopoverSurface when the button is pressed.\n */\n info: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {\n /**\n * Size of the InfoButton.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Whether the InfoButton should be rendered inline or on a Portal.\n *\n * @default true\n */\n inline?: boolean;\n};\n\n/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoCA;;CAEC"}
1
+ {"version":3,"sources":["../src/components/InfoButton/InfoButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n root: NonNullable<Slot<'button'>>;\n\n /**\n * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n */\n popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;\n\n /**\n * The information to be displayed in the PopoverSurface when the button is pressed.\n */\n info: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {\n /**\n * Size of the InfoButton.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Whether the InfoButton should be rendered inline or on a Portal.\n *\n * @default true\n */\n inline?: boolean;\n};\n\n/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAAmH"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoButton/index.ts"],"sourcesContent":["export { InfoButton } from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nexport { renderInfoButton_unstable } from './renderInfoButton';\nexport { useInfoButton_unstable } from './useInfoButton';\nexport { infoButtonClassNames, useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\n"],"names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,UAAU;eAAVA,sBAAU;;IAIVC,oBAAoB;eAApBA,+CAAoB;;IAFpBC,yBAAyB;eAAzBA,2CAAyB;;IAEHC,4BAA4B;eAA5BA,uDAA4B;;IADlDC,sBAAsB;eAAtBA,qCAAsB;;;4BAHJ;kCAEe;+BACH;2CAC4B"}
1
+ {"version":3,"sources":["../src/components/InfoButton/index.ts"],"sourcesContent":["export { InfoButton } from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nexport { renderInfoButton_unstable } from './renderInfoButton';\nexport { useInfoButton_unstable } from './useInfoButton';\nexport { infoButtonClassNames, useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\n"],"names":["InfoButton","renderInfoButton_unstable","useInfoButton_unstable","infoButtonClassNames","useInfoButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAIVG,+CAAoB;;;eAFpBF,2CAAyB;;;eAEHG,uDAA4B;;;eADlDF,qCAAsB;;;4BAHJ,eAAe;kCAEA,qBAAqB;+BACxB,kBAAkB;2CACU,+BAA+B"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';\n\n/**\n * Render the final JSX of InfoButton\n */\nexport const renderInfoButton_unstable = (state: InfoButtonState) => {\n assertSlots<InfoButtonSlots>(state);\n\n return (\n <state.popover>\n <PopoverTrigger>\n <state.root />\n </PopoverTrigger>\n <state.info />\n </state.popover>\n );\n};\n"],"names":["renderInfoButton_unstable","state","assertSlots","_jsxs","popover","_jsx","PopoverTrigger","root","info"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;8BACG;AAMxB,MAAMA,4BAA4B,CAACC;IACxCC,IAAAA,2BAAAA,EAA6BD;IAE7B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,OAAO,EAAA;;0BACZC,IAAAA,eAAA,EAACC,4BAAAA,EAAAA;0BACC,WAAA,GAAAD,IAAAA,eAAA,EAACJ,MAAMM,IAAI,EAAA,CAAA;;0BAEbF,IAAAA,eAAA,EAACJ,MAAMO,IAAI,EAAA,CAAA;;;AAGjB"}
1
+ {"version":3,"sources":["../src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';\n\n/**\n * Render the final JSX of InfoButton\n */\nexport const renderInfoButton_unstable = (state: InfoButtonState) => {\n assertSlots<InfoButtonSlots>(state);\n\n return (\n <state.popover>\n <PopoverTrigger>\n <state.root />\n </PopoverTrigger>\n <state.info />\n </state.popover>\n );\n};\n"],"names":["assertSlots","PopoverTrigger","renderInfoButton_unstable","state","popover","root","info"],"mappings":";;;;+BAUaE;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;8BACzB,0BAA0B;AAMlD,kCAAkC,CAACC;QACxCH,2BAAAA,EAA6BG;IAE7B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,OAAO,EAAA;;0BACZ,mBAAA,EAACH,4BAAAA,EAAAA;0BACC,WAAA,OAAA,eAAA,EAACE,MAAME,IAAI,EAAA,CAAA;;8BAEb,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;;;AAGjB,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useControllableState,\n slot,\n useMergedRefs,\n elementContains,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n small: <DefaultInfoButtonIcon12 />,\n medium: <DefaultInfoButtonIcon16 />,\n large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLButtonElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLButtonElement>): InfoButtonState => {\n const { size = 'medium', inline = true } = props;\n\n const rootRef = useMergedRefs(ref);\n\n const state: InfoButtonState = {\n inline,\n size,\n\n components: {\n root: 'button',\n popover: Popover as React.FC<Partial<PopoverProps>>,\n info: PopoverSurface,\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...props,\n ref: rootRef,\n }),\n { elementType: 'button' },\n ),\n popover: slot.always(props.popover, {\n defaultProps: {\n inline,\n positioning: 'above-start',\n size: popoverSizeMap[size],\n withArrow: true,\n },\n elementType: Popover as React.FC<Partial<Omit<PopoverProps, 'openOnHover'>>>,\n }),\n info: slot.always(props.info, {\n defaultProps: {\n role: 'note',\n tabIndex: -1,\n },\n elementType: PopoverSurface,\n }),\n };\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: state.popover.open,\n defaultState: state.popover.defaultOpen,\n initialState: false,\n });\n\n state.popover.open = popoverOpen;\n state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n const infoRef = useMergedRefs(state.info.ref);\n state.info.ref = infoRef;\n\n // Hide the popover when focus moves out of the button and popover\n const onBlurButtonOrInfo = (e: React.FocusEvent) => {\n const nextFocused = e.relatedTarget;\n\n if (nextFocused && rootRef.current !== nextFocused && !elementContains(infoRef.current, nextFocused)) {\n setPopoverOpen(false);\n }\n };\n\n state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlurButtonOrInfo));\n state.info.onBlurCapture = useEventCallback(mergeCallbacks(state.info.onBlurCapture, onBlurButtonOrInfo));\n return state;\n};\n"],"names":["useInfoButton_unstable","infoButtonIconMap","small","React","createElement","DefaultInfoButtonIcon12","medium","DefaultInfoButtonIcon16","large","DefaultInfoButtonIcon20","popoverSizeMap","props","ref","size","inline","rootRef","useMergedRefs","state","components","root","popover","Popover","info","PopoverSurface","slot","always","getIntrinsicElementProps","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","useControllableState","open","defaultState","defaultOpen","initialState","onOpenChange","mergeCallbacks","e","data","infoRef","onBlurButtonOrInfo","nextFocused","relatedTarget","current","elementContains","onBlur","useEventCallback","onBlurCapture"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoCaA;;;eAAAA;;;;iEApCU;wCACmE;gCASnF;8BACiC;AAIxC,MAAMC,oBAAoB;IACxBC,OAAAA,WAAAA,GAAOC,OAAAC,aAAA,CAACC,+CAAAA,EAAAA;IACRC,QAAAA,WAAAA,GAAQH,OAAAC,aAAA,CAACG,+CAAAA,EAAAA;IACTC,OAAAA,WAAAA,GAAOL,OAAAC,aAAA,CAACK,+CAAAA,EAAAA;AACV;AAEA,MAAMC,iBAAiB;IACrBR,OAAO;IACPI,QAAQ;IACRE,OAAO;AACT;AAWO,MAAMR,yBAAyB,CAACW,OAAwBC;IAC7D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAE,GAAGH;IAE3C,MAAMI,UAAUC,IAAAA,6BAAAA,EAAcJ;IAE9B,MAAMK,QAAyB;QAC7BH;QACAD;QAEAK,YAAY;YACVC,MAAM;YACNC,SAASC,qBAAAA;YACTC,MAAMC,4BAAAA;QACR;QAEAJ,MAAMK,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,UAAU;YACjCC,UAAU1B,iBAAiB,CAACY,KAAK;YACjCe,MAAM;YACN,cAAc;YACd,GAAGjB,KAAK;YACRC,KAAKG;QACP,IACA;YAAEc,aAAa;QAAS;QAE1BT,SAASI,oBAAAA,CAAKC,MAAM,CAACd,MAAMS,OAAO,EAAE;YAClCU,cAAc;gBACZhB;gBACAiB,aAAa;gBACblB,MAAMH,cAAc,CAACG,KAAK;gBAC1BmB,WAAW;YACb;YACAH,aAAaR,qBAAAA;QACf;QACAC,MAAME,oBAAAA,CAAKC,MAAM,CAACd,MAAMW,IAAI,EAAE;YAC5BQ,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAaN,4BAAAA;QACf;IACF;IAEA,MAAM,CAACY,aAAaC,eAAe,GAAGC,IAAAA,oCAAAA,EAAqB;QACzDpB,OAAOA,MAAMG,OAAO,CAACkB,IAAI;QACzBC,cAActB,MAAMG,OAAO,CAACoB,WAAW;QACvCC,cAAc;IAChB;IAEAxB,MAAMG,OAAO,CAACkB,IAAI,GAAGH;IACrBlB,MAAMG,OAAO,CAACsB,YAAY,GAAGC,IAAAA,8BAAAA,EAAe1B,MAAMG,OAAO,CAACsB,YAAY,EAAE,CAACE,GAAGC,OAAST,eAAeS,KAAKP,IAAI;IAE7G,MAAMQ,UAAU9B,IAAAA,6BAAAA,EAAcC,MAAMK,IAAI,CAACV,GAAG;IAC5CK,MAAMK,IAAI,CAACV,GAAG,GAAGkC;IAEjB,kEAAkE;IAClE,MAAMC,qBAAqB,CAACH;QAC1B,MAAMI,cAAcJ,EAAEK,aAAa;QAEnC,IAAID,eAAejC,QAAQmC,OAAO,KAAKF,eAAe,CAACG,IAAAA,+BAAAA,EAAgBL,QAAQI,OAAO,EAAEF,cAAc;YACpGZ,eAAe;QACjB;IACF;IAEAnB,MAAME,IAAI,CAACiC,MAAM,GAAGC,IAAAA,gCAAAA,EAAiBV,IAAAA,8BAAAA,EAAe1B,MAAME,IAAI,CAACiC,MAAM,EAAEL;IACvE9B,MAAMK,IAAI,CAACgC,aAAa,GAAGD,IAAAA,gCAAAA,EAAiBV,IAAAA,8BAAAA,EAAe1B,MAAMK,IAAI,CAACgC,aAAa,EAAEP;IACrF,OAAO9B;AACT"}
1
+ {"version":3,"sources":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useControllableState,\n slot,\n useMergedRefs,\n elementContains,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n small: <DefaultInfoButtonIcon12 />,\n medium: <DefaultInfoButtonIcon16 />,\n large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLButtonElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLButtonElement>): InfoButtonState => {\n const { size = 'medium', inline = true } = props;\n\n const rootRef = useMergedRefs(ref);\n\n const state: InfoButtonState = {\n inline,\n size,\n\n components: {\n root: 'button',\n popover: Popover as React.FC<Partial<PopoverProps>>,\n info: PopoverSurface,\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...props,\n ref: rootRef,\n }),\n { elementType: 'button' },\n ),\n popover: slot.always(props.popover, {\n defaultProps: {\n inline,\n positioning: 'above-start',\n size: popoverSizeMap[size],\n withArrow: true,\n },\n elementType: Popover as React.FC<Partial<Omit<PopoverProps, 'openOnHover'>>>,\n }),\n info: slot.always(props.info, {\n defaultProps: {\n role: 'note',\n tabIndex: -1,\n },\n elementType: PopoverSurface,\n }),\n };\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: state.popover.open,\n defaultState: state.popover.defaultOpen,\n initialState: false,\n });\n\n state.popover.open = popoverOpen;\n state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n const infoRef = useMergedRefs(state.info.ref);\n state.info.ref = infoRef;\n\n // Hide the popover when focus moves out of the button and popover\n const onBlurButtonOrInfo = (e: React.FocusEvent) => {\n const nextFocused = e.relatedTarget;\n\n if (nextFocused && rootRef.current !== nextFocused && !elementContains(infoRef.current, nextFocused)) {\n setPopoverOpen(false);\n }\n };\n\n state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlurButtonOrInfo));\n state.info.onBlurCapture = useEventCallback(mergeCallbacks(state.info.onBlurCapture, onBlurButtonOrInfo));\n return state;\n};\n"],"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getIntrinsicElementProps","mergeCallbacks","useControllableState","slot","useMergedRefs","elementContains","useEventCallback","Popover","PopoverSurface","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","inline","rootRef","state","components","root","popover","info","always","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","infoRef","onBlurButtonOrInfo","nextFocused","relatedTarget","current","onBlur","onBlurCapture"],"mappings":";;;;+BAoCakB;;;;;;;iEApCU,QAAQ;wCAC2D,2BAA2B;gCAS9G,4BAA4B;8BACK,0BAA0B;AAIlE,MAAML,oBAAoB;IACxBC,OAAAA,WAAAA,GAAO,OAAA,aAAA,CAACb,+CAAAA,EAAAA;IACRc,QAAAA,WAAAA,GAAQ,OAAA,aAAA,CAACb,+CAAAA,EAAAA;IACTc,OAAAA,WAAAA,GAAO,OAAA,aAAA,CAACb,+CAAAA,EAAAA;AACV;AAEA,MAAMc,iBAAiB;IACrBH,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAWO,+BAA+B,CAACG,OAAwBC;IAC7D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAE,GAAGH;IAE3C,MAAMI,cAAUf,6BAAAA,EAAcY;IAE9B,MAAMI,QAAyB;QAC7BF;QACAD;QAEAI,YAAY;YACVC,MAAM;YACNC,SAAShB,qBAAAA;YACTiB,MAAMhB,4BAAAA;QACR;QAEAc,MAAMnB,oBAAAA,CAAKsB,MAAM,KACfzB,wCAAAA,EAAyB,UAAU;YACjC0B,UAAUjB,iBAAiB,CAACQ,KAAK;YACjCU,MAAM;YACN,cAAc;YACd,GAAGZ,KAAK;YACRC,KAAKG;QACP,IACA;YAAES,aAAa;QAAS;QAE1BL,SAASpB,oBAAAA,CAAKsB,MAAM,CAACV,MAAMQ,OAAO,EAAE;YAClCM,cAAc;gBACZX;gBACAY,aAAa;gBACbb,MAAMJ,cAAc,CAACI,KAAK;gBAC1Bc,WAAW;YACb;YACAH,aAAarB,qBAAAA;QACf;QACAiB,MAAMrB,oBAAAA,CAAKsB,MAAM,CAACV,MAAMS,IAAI,EAAE;YAC5BK,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAapB,4BAAAA;QACf;IACF;IAEA,MAAM,CAAC0B,aAAaC,eAAe,OAAGjC,oCAAAA,EAAqB;QACzDkB,OAAOA,MAAMG,OAAO,CAACa,IAAI;QACzBC,cAAcjB,MAAMG,OAAO,CAACe,WAAW;QACvCC,cAAc;IAChB;IAEAnB,MAAMG,OAAO,CAACa,IAAI,GAAGF;IACrBd,MAAMG,OAAO,CAACiB,YAAY,OAAGvC,8BAAAA,EAAemB,MAAMG,OAAO,CAACiB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,cAAUvC,6BAAAA,EAAcgB,MAAMI,IAAI,CAACR,GAAG;IAC5CI,MAAMI,IAAI,CAACR,GAAG,GAAG2B;IAEjB,kEAAkE;IAClE,MAAMC,qBAAqB,CAACH;QAC1B,MAAMI,cAAcJ,EAAEK,aAAa;QAEnC,IAAID,eAAe1B,QAAQ4B,OAAO,KAAKF,eAAe,KAACxC,+BAAAA,EAAgBsC,QAAQI,OAAO,EAAEF,cAAc;YACpGV,eAAe;QACjB;IACF;IAEAf,MAAME,IAAI,CAAC0B,MAAM,OAAG1C,gCAAAA,MAAiBL,8BAAAA,EAAemB,MAAME,IAAI,CAAC0B,MAAM,EAAEJ;IACvExB,MAAMI,IAAI,CAACyB,aAAa,OAAG3C,gCAAAA,MAAiBL,8BAAAA,EAAemB,MAAMI,IAAI,CAACyB,aAAa,EAAEL;IACrF,OAAOxB;AACT,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const infoButtonClassNames = {\n root: 'fui-InfoButton',\n // this className won't be used, but it's needed to satisfy the type checker\n popover: 'fui-InfoButton__popover',\n info: 'fui-InfoButton__info'\n};\n/**\n * Styles for the root slot\n */ const useButtonStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n position: 'relative',\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n margin: '0',\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline-flex'\n },\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n cursor: 'pointer',\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed\n }\n },\n selected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n highContrast: {\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n ':hover,:hover:active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n }\n },\n focusIndicator: createFocusOutlineStyle(),\n large: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`\n }\n});\nconst usePopoverSurfaceStyles = makeStyles({\n base: {\n maxWidth: '264px'\n },\n smallMedium: typographyStyles.caption1,\n large: typographyStyles.body1\n});\n/**\n * Apply styling to the InfoButton slots based on the state\n */ export const useInfoButtonStyles_unstable = (state)=>{\n 'use no memo';\n const { size } = state;\n const { open } = state.popover;\n const buttonStyles = useButtonStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n state.info.className = mergeClasses(infoButtonClassNames.info, popoverSurfaceStyles.base, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);\n state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);\n return state;\n};\n"],"names":["infoButtonClassNames","useInfoButtonStyles_unstable","root","popover","info","useButtonStyles","__styles","base","Bt984gj","B7ck84d","mc9l5x","Brf1p80","w71qe1","ha4doy","qhf8xq","De3pzq","sj55zd","icvyot","vrafjx","oivjwe","wvpqe5","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","D0sxk3","t6yez3","Jwef8y","Bi91k9c","eoavqd","Bk3fhr4","Bmfj8id","iro3zm","B2d53fq","selected","Bsw6fvg","Bbusuzp","highContrast","Bs6v0vm","B46dtvo","gh1jta","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bb7d1vk","zhwhgb","dhy2o1","Gfyso","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","large","d","p","h","m","f","i","usePopoverSurfaceStyles","B2u0y6b","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","state","size","open","buttonStyles","popoverSurfaceStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const infoButtonClassNames = {\n root: 'fui-InfoButton',\n // this className won't be used, but it's needed to satisfy the type checker\n popover: 'fui-InfoButton__popover',\n info: 'fui-InfoButton__info'\n};\n/**\n * Styles for the root slot\n */ const useButtonStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n position: 'relative',\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n margin: '0',\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline-flex'\n },\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n cursor: 'pointer',\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed\n }\n },\n selected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n highContrast: {\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n ':hover,:hover:active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n }\n },\n focusIndicator: createFocusOutlineStyle(),\n large: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`\n }\n});\nconst usePopoverSurfaceStyles = makeStyles({\n base: {\n maxWidth: '264px'\n },\n smallMedium: typographyStyles.caption1,\n large: typographyStyles.body1\n});\n/**\n * Apply styling to the InfoButton slots based on the state\n */ export const useInfoButtonStyles_unstable = (state)=>{\n 'use no memo';\n const { size } = state;\n const { open } = state.popover;\n const buttonStyles = useButtonStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n state.info.className = mergeClasses(infoButtonClassNames.info, popoverSurfaceStyles.base, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);\n state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);\n return state;\n};\n"],"names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","__styles","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","info","useButtonStyles","base","Bt984gj","B7ck84d","mc9l5x","Brf1p80","w71qe1","ha4doy","qhf8xq","De3pzq","sj55zd","icvyot","vrafjx","oivjwe","wvpqe5","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","D0sxk3","t6yez3","Jwef8y","Bi91k9c","eoavqd","Bk3fhr4","Bmfj8id","iro3zm","B2d53fq","selected","Bsw6fvg","Bbusuzp","highContrast","Bs6v0vm","B46dtvo","gh1jta","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bb7d1vk","zhwhgb","dhy2o1","Gfyso","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","large","d","p","h","m","f","i","usePopoverSurfaceStyles","B2u0y6b","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"mappings":"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"}
@@ -0,0 +1,113 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ infoButtonClassNames: function() {
13
+ return infoButtonClassNames;
14
+ },
15
+ useInfoButtonStyles_unstable: function() {
16
+ return useInfoButtonStyles_unstable;
17
+ }
18
+ });
19
+ const _reacttabster = require("@fluentui/react-tabster");
20
+ const _reacticons = require("@fluentui/react-icons");
21
+ const _react = require("@griffel/react");
22
+ const _reacttheme = require("@fluentui/react-theme");
23
+ const infoButtonClassNames = {
24
+ root: 'fui-InfoButton',
25
+ // this className won't be used, but it's needed to satisfy the type checker
26
+ popover: 'fui-InfoButton__popover',
27
+ info: 'fui-InfoButton__info'
28
+ };
29
+ /**
30
+ * Styles for the root slot
31
+ */ const useButtonStyles = (0, _react.makeStyles)({
32
+ base: {
33
+ alignItems: 'center',
34
+ boxSizing: 'border-box',
35
+ display: 'inline-flex',
36
+ justifyContent: 'center',
37
+ textDecorationLine: 'none',
38
+ verticalAlign: 'middle',
39
+ position: 'relative',
40
+ backgroundColor: _reacttheme.tokens.colorTransparentBackground,
41
+ color: _reacttheme.tokens.colorNeutralForeground2,
42
+ ..._react.shorthands.borderStyle('none'),
43
+ borderRadius: _reacttheme.tokens.borderRadiusMedium,
44
+ margin: '0',
45
+ padding: `${_reacttheme.tokens.spacingVerticalXS} ${_reacttheme.tokens.spacingHorizontalXS}`,
46
+ [`& .${_reacticons.iconFilledClassName}`]: {
47
+ display: 'none'
48
+ },
49
+ [`& .${_reacticons.iconRegularClassName}`]: {
50
+ display: 'inline-flex'
51
+ },
52
+ ':hover': {
53
+ backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
54
+ color: _reacttheme.tokens.colorNeutralForeground2BrandHover,
55
+ cursor: 'pointer',
56
+ [`& .${_reacticons.iconFilledClassName}`]: {
57
+ display: 'inline-flex'
58
+ },
59
+ [`& .${_reacticons.iconRegularClassName}`]: {
60
+ display: 'none'
61
+ }
62
+ },
63
+ ':hover:active': {
64
+ backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
65
+ color: _reacttheme.tokens.colorNeutralForeground2BrandPressed
66
+ }
67
+ },
68
+ selected: {
69
+ backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected,
70
+ color: _reacttheme.tokens.colorNeutralForeground2BrandSelected,
71
+ [`& .${_reacticons.iconFilledClassName}`]: {
72
+ display: 'inline-flex'
73
+ },
74
+ [`& .${_reacticons.iconRegularClassName}`]: {
75
+ display: 'none'
76
+ },
77
+ '@media (forced-colors: active)': {
78
+ backgroundColor: 'Highlight',
79
+ color: 'Canvas'
80
+ }
81
+ },
82
+ highContrast: {
83
+ '@media (forced-colors: active)': {
84
+ color: 'CanvasText',
85
+ ':hover,:hover:active': {
86
+ forcedColorAdjust: 'none',
87
+ backgroundColor: 'Highlight',
88
+ color: 'Canvas'
89
+ }
90
+ }
91
+ },
92
+ focusIndicator: (0, _reacttabster.createFocusOutlineStyle)(),
93
+ large: {
94
+ padding: `${_reacttheme.tokens.spacingVerticalXXS} ${_reacttheme.tokens.spacingVerticalXXS}`
95
+ }
96
+ });
97
+ const usePopoverSurfaceStyles = (0, _react.makeStyles)({
98
+ base: {
99
+ maxWidth: '264px'
100
+ },
101
+ smallMedium: _reacttheme.typographyStyles.caption1,
102
+ large: _reacttheme.typographyStyles.body1
103
+ });
104
+ const useInfoButtonStyles_unstable = (state)=>{
105
+ 'use no memo';
106
+ const { size } = state;
107
+ const { open } = state.popover;
108
+ const buttonStyles = useButtonStyles();
109
+ const popoverSurfaceStyles = usePopoverSurfaceStyles();
110
+ state.info.className = (0, _react.mergeClasses)(infoButtonClassNames.info, popoverSurfaceStyles.base, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
111
+ state.root.className = (0, _react.mergeClasses)(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
112
+ return state;
113
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {\n root: 'fui-InfoButton',\n // this className won't be used, but it's needed to satisfy the type checker\n popover: 'fui-InfoButton__popover',\n info: 'fui-InfoButton__info',\n};\n\n/**\n * Styles for the root slot\n */\nconst useButtonStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n position: 'relative',\n\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground2,\n\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n margin: '0',\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline-flex',\n },\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n cursor: 'pointer',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n selected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n\n ':hover,:hover:active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n },\n\n focusIndicator: createFocusOutlineStyle(),\n\n large: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`,\n },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\n base: {\n maxWidth: '264px',\n },\n smallMedium: typographyStyles.caption1,\n large: typographyStyles.body1,\n});\n\n/**\n * Apply styling to the InfoButton slots based on the state\n */\nexport const useInfoButtonStyles_unstable = (state: InfoButtonState): InfoButtonState => {\n 'use no memo';\n\n const { size } = state;\n const { open } = state.popover;\n const buttonStyles = useButtonStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n state.info.className = mergeClasses(\n infoButtonClassNames.info,\n popoverSurfaceStyles.base,\n size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium,\n state.info.className,\n );\n\n state.root.className = mergeClasses(\n infoButtonClassNames.root,\n buttonStyles.base,\n buttonStyles.highContrast,\n buttonStyles.focusIndicator,\n open && buttonStyles.selected,\n size === 'large' && buttonStyles.large,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","info","useButtonStyles","base","alignItems","boxSizing","display","justifyContent","textDecorationLine","verticalAlign","position","backgroundColor","colorTransparentBackground","color","colorNeutralForeground2","borderStyle","borderRadius","borderRadiusMedium","margin","padding","spacingVerticalXS","spacingHorizontalXS","colorTransparentBackgroundHover","colorNeutralForeground2BrandHover","cursor","colorTransparentBackgroundPressed","colorNeutralForeground2BrandPressed","selected","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","highContrast","forcedColorAdjust","focusIndicator","large","spacingVerticalXXS","usePopoverSurfaceStyles","maxWidth","smallMedium","caption1","body1","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoLabel/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { InfoLabelProps } from './InfoLabel.types';\nimport { renderInfoLabel_unstable } from './renderInfoLabel';\nimport { useInfoLabel_unstable } from './useInfoLabel';\nimport { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n\n/**\n * InfoLabel component\n */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n const state = useInfoLabel_unstable(props, ref);\n\n useInfoLabelStyles_unstable(state);\n useCustomStyleHook_unstable('useInfoLabelStyles_unstable')(state);\n\n return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"names":["InfoLabel","React","forwardRef","props","ref","state","useInfoLabel_unstable","useInfoLabelStyles_unstable","useCustomStyleHook_unstable","renderInfoLabel_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qCAEqB;iCAGH;8BACH;0CACM;AAKrC,MAAMA,YAAAA,WAAAA,GAAiDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQC,IAAAA,mCAAAA,EAAsBH,OAAOC;IAE3CG,IAAAA,qDAAAA,EAA4BF;IAC5BG,IAAAA,gDAAAA,EAA4B,+BAA+BH;IAE3D,OAAOI,IAAAA,yCAAAA,EAAyBJ;AAClC;AAEAL,UAAUU,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/InfoLabel/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { InfoLabelProps } from './InfoLabel.types';\nimport { renderInfoLabel_unstable } from './renderInfoLabel';\nimport { useInfoLabel_unstable } from './useInfoLabel';\nimport { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n\n/**\n * InfoLabel component\n */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n const state = useInfoLabel_unstable(props, ref);\n\n useInfoLabelStyles_unstable(state);\n useCustomStyleHook_unstable('useInfoLabelStyles_unstable')(state);\n\n return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoLabel_unstable","useInfoLabel_unstable","useInfoLabelStyles_unstable","InfoLabel","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;qCAEa,kCAAkC;iCAGrC,oBAAoB;8BACvB,iBAAiB;0CACX,8BAA8B;AAKnE,kBAAMA,WAAAA,GAAiDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,uCAAAA,EAAsBI,OAAOC;QAE3CJ,qDAAAA,EAA4BK;QAC5BR,gDAAAA,EAA4B,+BAA+BQ;IAE3D,WAAOP,yCAAAA,EAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoLabel/InfoLabel.types.ts"],"sourcesContent":["import { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton';\nimport type { InfoButtonProps } from '../InfoButton';\n\nexport type InfoLabelSlots = {\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Label component.\n *\n * It is not typically necessary to use this prop. The label text is the child of the `<InfoLabel>`, and other props\n * such as `size` and `required` should be set directly on the `InfoLabel`.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<InfoLabel>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n label: NonNullable<Slot<typeof Label>>;\n\n /**\n * The InfoButton component.\n *\n * It is not typically necessary to use this prop. The content can be set using the `info` prop of the InfoLabel.\n */\n infoButton: Slot<typeof InfoButton>;\n};\n\n/**\n * InfoLabel Props\n */\nexport type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {\n /**\n * The content of the InfoButton's popover.\n */\n info?: InfoButtonProps['info'];\n};\n\n/**\n * State used in rendering InfoLabel\n */\nexport type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAqCA;;CAEC"}
1
+ {"version":3,"sources":["../src/components/InfoLabel/InfoLabel.types.ts"],"sourcesContent":["import { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton';\nimport type { InfoButtonProps } from '../InfoButton';\n\nexport type InfoLabelSlots = {\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Label component.\n *\n * It is not typically necessary to use this prop. The label text is the child of the `<InfoLabel>`, and other props\n * such as `size` and `required` should be set directly on the `InfoLabel`.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<InfoLabel>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n label: NonNullable<Slot<typeof Label>>;\n\n /**\n * The InfoButton component.\n *\n * It is not typically necessary to use this prop. The content can be set using the `info` prop of the InfoLabel.\n */\n infoButton: Slot<typeof InfoButton>;\n};\n\n/**\n * InfoLabel Props\n */\nexport type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {\n /**\n * The content of the InfoButton's popover.\n */\n info?: InfoButtonProps['info'];\n};\n\n/**\n * State used in rendering InfoLabel\n */\nexport type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;\n"],"names":[],"mappings":"AAqCA;;CAEC,GACD,WAA2F"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoLabel/index.ts"],"sourcesContent":["export { InfoLabel } from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\nexport { renderInfoLabel_unstable } from './renderInfoLabel';\nexport { useInfoLabel_unstable } from './useInfoLabel';\nexport { infoLabelClassNames, useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n"],"names":["InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,SAAS;eAATA,oBAAS;;IAITC,mBAAmB;eAAnBA,6CAAmB;;IAFnBC,wBAAwB;eAAxBA,yCAAwB;;IAEHC,2BAA2B;eAA3BA,qDAA2B;;IADhDC,qBAAqB;eAArBA,mCAAqB;;;2BAHJ;iCAEe;8BACH;0CAC2B"}
1
+ {"version":3,"sources":["../src/components/InfoLabel/index.ts"],"sourcesContent":["export { InfoLabel } from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\nexport { renderInfoLabel_unstable } from './renderInfoLabel';\nexport { useInfoLabel_unstable } from './useInfoLabel';\nexport { infoLabelClassNames, useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n"],"names":["InfoLabel","renderInfoLabel_unstable","useInfoLabel_unstable","infoLabelClassNames","useInfoLabelStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,oBAAS;;;eAITG,6CAAmB;;;eAFnBF,yCAAwB;;;eAEHG,qDAA2B;;;eADhDF,mCAAqB;;;2BAHJ,cAAc;iCAEC,oBAAoB;8BACvB,iBAAiB;0CACU,8BAA8B"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoLabel/renderInfoLabel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Render the final JSX of InfoLabel\n */\nexport const renderInfoLabel_unstable = (state: InfoLabelState) => {\n assertSlots<InfoLabelSlots>(state);\n\n return (\n <state.root>\n <state.label />\n {state.infoButton && <state.infoButton />}\n </state.root>\n );\n};\n"],"names":["renderInfoLabel_unstable","state","assertSlots","_jsxs","root","_jsx","label","infoButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,2BAA2B,CAACC;IACvCC,IAAAA,2BAAAA,EAA4BD;IAE5B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTC,IAAAA,eAAA,EAACJ,MAAMK,KAAK,EAAA,CAAA;YACXL,MAAMM,UAAU,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACJ,MAAMM,UAAU,EAAA,CAAA;;;AAG5C"}
1
+ {"version":3,"sources":["../src/components/InfoLabel/renderInfoLabel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Render the final JSX of InfoLabel\n */\nexport const renderInfoLabel_unstable = (state: InfoLabelState) => {\n assertSlots<InfoLabelSlots>(state);\n\n return (\n <state.root>\n <state.label />\n {state.infoButton && <state.infoButton />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderInfoLabel_unstable","state","root","label","infoButton"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,iCAAiC,CAACC;QACvCF,2BAAAA,EAA4BE;IAE5B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;YACXF,MAAMG,UAAU,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,UAAU,EAAA,CAAA;;;AAG5C,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton/InfoButton';\nimport type { InfoLabelProps, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Create the state required to render InfoLabel.\n *\n * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,\n * before being passed to renderInfoLabel_unstable.\n *\n * @param props - props from this instance of InfoLabel\n * @param ref - reference to label element of InfoLabel\n */\nexport const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTMLLabelElement>): InfoLabelState => {\n const {\n root: rootShorthand,\n label: labelShorthand,\n infoButton: infoButtonShorthand,\n info,\n size,\n className,\n style,\n ...labelProps\n } = props;\n const baseId = useId('infolabel-');\n const [open, setOpen] = React.useState(false);\n\n const root = slot.always(rootShorthand, {\n defaultProps: {\n className,\n style,\n },\n elementType: 'span',\n });\n\n const label = slot.always(labelShorthand, {\n defaultProps: {\n id: baseId + '__label',\n ref,\n size,\n ...labelProps,\n },\n elementType: Label,\n });\n\n const infoButton = slot.optional(infoButtonShorthand, {\n renderByDefault: !!info,\n defaultProps: {\n id: baseId + '__infoButton',\n size,\n info,\n },\n elementType: InfoButton,\n });\n\n const infoButtonPopover = slot.always(infoButton?.popover, {\n elementType: 'div',\n });\n infoButtonPopover.onOpenChange = useEventCallback(\n mergeCallbacks(infoButtonPopover.onOpenChange, (e, data) => {\n setOpen(data.open);\n }),\n );\n\n if (infoButton) {\n infoButton.popover = infoButtonPopover;\n const infoPopupId = baseId + '__info'; // used as a self-referencing aria-labelledby to name the popup\n infoButton.info = slot.optional(infoButton?.info, {\n defaultProps: {\n id: infoPopupId,\n 'aria-labelledby': infoPopupId,\n },\n elementType: 'div',\n });\n\n infoButton['aria-labelledby'] ??= `${label.id} ${infoButton.id}`;\n\n if (open) {\n root['aria-owns'] ??= infoButton.info?.id;\n }\n }\n\n return {\n size,\n components: {\n root: 'span',\n label: Label,\n infoButton: InfoButton,\n },\n root,\n label,\n infoButton,\n };\n};\n"],"names":["useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","info","size","className","style","labelProps","baseId","useId","open","setOpen","React","useState","slot","always","defaultProps","elementType","id","Label","optional","renderByDefault","InfoButton","infoButtonPopover","popover","onOpenChange","useEventCallback","mergeCallbacks","e","data","_arialabelledby","infoPopupId","_","_ariaowns","_1","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;4BAED;gCACwC;4BACnC;AAYpB,MAAMA,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EACJC,MAAMC,aAAa,EACnBC,OAAOC,cAAc,EACrBC,YAAYC,mBAAmB,EAC/BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,YACJ,GAAGZ;IACJ,MAAMa,SAASC,IAAAA,qBAAAA,EAAM;IACrB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,OAAMC,QAAQ,CAAC;IAEvC,MAAMhB,OAAOiB,oBAAAA,CAAKC,MAAM,CAACjB,eAAe;QACtCkB,cAAc;YACZX;YACAC;QACF;QACAW,aAAa;IACf;IAEA,MAAMlB,QAAQe,oBAAAA,CAAKC,MAAM,CAACf,gBAAgB;QACxCgB,cAAc;YACZE,IAAIV,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;QACAU,aAAaE,iBAAAA;IACf;IAEA,MAAMlB,aAAaa,oBAAAA,CAAKM,QAAQ,CAAClB,qBAAqB;QACpDmB,iBAAiB,CAAC,CAAClB;QACnBa,cAAc;YACZE,IAAIV,SAAS;YACbJ;YACAD;QACF;QACAc,aAAaK,sBAAAA;IACf;IAEA,MAAMC,oBAAoBT,oBAAAA,CAAKC,MAAM,CAACd,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYuB,OAAO,EAAE;QACzDP,aAAa;IACf;IACAM,kBAAkBE,YAAY,GAAGC,IAAAA,gCAAAA,EAC/BC,IAAAA,8BAAAA,EAAeJ,kBAAkBE,YAAY,EAAE,CAACG,GAAGC;QACjDlB,QAAQkB,KAAKnB,IAAI;IACnB;IAGF,IAAIT,YAAY;YAWdA,aAAW6B;QAVX7B,WAAWuB,OAAO,GAAGD;QACrB,MAAMQ,cAAcvB,SAAS,UAAU,+DAA+D;QACtGP,WAAWE,IAAI,GAAGW,oBAAAA,CAAKM,QAAQ,CAACnB,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYE,IAAI,EAAE;YAChDa,cAAc;gBACZE,IAAIa;gBACJ,mBAAmBA;YACrB;YACAd,aAAa;QACf;;QAEAhB,CAAAA,IAAAA,CAAAA,cAAAA,UAAAA,CAAU,CAAC6B,kBAAA,kBAAkB,AAAlB,MAAkB,QAAAE,MAAA,KAAA,IAAAA,IAA7B/B,WAAU,CAAC6B,gBAAkB,GAAK,CAAC,EAAE/B,MAAMmB,EAAE,CAAC,CAAC,EAAEjB,WAAWiB,EAAE,CAAC,CAAC;QAEhE,IAAIR,MAAM;gBACcT;gBAAtBJ,OAAKoC;;YAALpC,CAAAA,KAAAA,CAAAA,QAAAA,IAAAA,CAAI,CAACoC,YAAA,YAAY,AAAZ,MAAY,QAAAC,OAAA,KAAA,IAAAA,KAAjBrC,KAAI,CAACoC,UAAY,GAAA,AAAKhC,CAAAA,mBAAAA,WAAWE,IAAI,AAAJA,MAAI,QAAfF,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiBiB,EAAE;QAC3C;IACF;IAEA,OAAO;QACLd;QACA+B,YAAY;YACVtC,MAAM;YACNE,OAAOoB,iBAAAA;YACPlB,YAAYqB,sBAAAA;QACd;QACAzB;QACAE;QACAE;IACF;AACF"}
1
+ {"version":3,"sources":["../src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton/InfoButton';\nimport type { InfoLabelProps, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Create the state required to render InfoLabel.\n *\n * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,\n * before being passed to renderInfoLabel_unstable.\n *\n * @param props - props from this instance of InfoLabel\n * @param ref - reference to label element of InfoLabel\n */\nexport const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTMLLabelElement>): InfoLabelState => {\n const {\n root: rootShorthand,\n label: labelShorthand,\n infoButton: infoButtonShorthand,\n info,\n size,\n className,\n style,\n ...labelProps\n } = props;\n const baseId = useId('infolabel-');\n const [open, setOpen] = React.useState(false);\n\n const root = slot.always(rootShorthand, {\n defaultProps: {\n className,\n style,\n },\n elementType: 'span',\n });\n\n const label = slot.always(labelShorthand, {\n defaultProps: {\n id: baseId + '__label',\n ref,\n size,\n ...labelProps,\n },\n elementType: Label,\n });\n\n const infoButton = slot.optional(infoButtonShorthand, {\n renderByDefault: !!info,\n defaultProps: {\n id: baseId + '__infoButton',\n size,\n info,\n },\n elementType: InfoButton,\n });\n\n const infoButtonPopover = slot.always(infoButton?.popover, {\n elementType: 'div',\n });\n infoButtonPopover.onOpenChange = useEventCallback(\n mergeCallbacks(infoButtonPopover.onOpenChange, (e, data) => {\n setOpen(data.open);\n }),\n );\n\n if (infoButton) {\n infoButton.popover = infoButtonPopover;\n const infoPopupId = baseId + '__info'; // used as a self-referencing aria-labelledby to name the popup\n infoButton.info = slot.optional(infoButton?.info, {\n defaultProps: {\n id: infoPopupId,\n 'aria-labelledby': infoPopupId,\n },\n elementType: 'div',\n });\n\n infoButton['aria-labelledby'] ??= `${label.id} ${infoButton.id}`;\n\n if (open) {\n root['aria-owns'] ??= infoButton.info?.id;\n }\n }\n\n return {\n size,\n components: {\n root: 'span',\n label: Label,\n infoButton: InfoButton,\n },\n root,\n label,\n infoButton,\n };\n};\n"],"names":["React","Label","mergeCallbacks","useEventCallback","useId","slot","InfoButton","useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","info","size","className","style","labelProps","baseId","open","setOpen","useState","always","defaultProps","elementType","id","optional","renderByDefault","infoButtonPopover","popover","onOpenChange","e","data","infoPopupId","components"],"mappings":";;;;+BAgBaO;;;;;;;iEAhBU,QAAQ;4BAET,wBAAwB;gCACgB,4BAA4B;4BAC/D,2BAA2B;AAY/C,8BAA8B,CAACC,OAAuBC;IAC3D,MAAM,EACJC,MAAMC,aAAa,EACnBC,OAAOC,cAAc,EACrBC,YAAYC,mBAAmB,EAC/BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,YACJ,GAAGZ;IACJ,MAAMa,aAASjB,qBAAAA,EAAM;IACrB,MAAM,CAACkB,MAAMC,QAAQ,GAAGvB,OAAMwB,QAAQ,CAAC;IAEvC,MAAMd,OAAOL,oBAAAA,CAAKoB,MAAM,CAACd,eAAe;QACtCe,cAAc;YACZR;YACAC;QACF;QACAQ,aAAa;IACf;IAEA,MAAMf,QAAQP,oBAAAA,CAAKoB,MAAM,CAACZ,gBAAgB;QACxCa,cAAc;YACZE,IAAIP,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;QACAO,aAAa1B,iBAAAA;IACf;IAEA,MAAMa,aAAaT,oBAAAA,CAAKwB,QAAQ,CAACd,qBAAqB;QACpDe,iBAAiB,CAAC,CAACd;QACnBU,cAAc;YACZE,IAAIP,SAAS;YACbJ;YACAD;QACF;QACAW,aAAarB,sBAAAA;IACf;IAEA,MAAMyB,oBAAoB1B,oBAAAA,CAAKoB,MAAM,CAACX,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYkB,OAAO,EAAE;QACzDL,aAAa;IACf;IACAI,kBAAkBE,YAAY,OAAG9B,gCAAAA,MAC/BD,8BAAAA,EAAe6B,kBAAkBE,YAAY,EAAE,CAACC,GAAGC;QACjDZ,QAAQY,KAAKb,IAAI;IACnB;IAGF,IAAIR,YAAY;YAWdA,aAAW;QAVXA,WAAWkB,OAAO,GAAGD;QACrB,MAAMK,cAAcf,SAAS,UAAU,+DAA+D;QACtGP,WAAWE,IAAI,GAAGX,oBAAAA,CAAKwB,QAAQ,CAACf,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYE,IAAI,EAAE;YAChDU,cAAc;gBACZE,IAAIQ;gBACJ,mBAAmBA;YACrB;YACAT,aAAa;QACf;;QAEAb,CAAAA,IAAAA,CAAAA,cAAAA,UAAAA,CAAU,CAAC,kBAAA,kBAAA,AAAkB,MAAA,QAAA,MAAA,KAAA,IAAA,IAA7BA,WAAU,CAAC,gBAAkB,GAAK,GAAGF,MAAMgB,EAAE,CAAC,CAAC,EAAEd,WAAWc,EAAE,EAAE;QAEhE,IAAIN,MAAM;gBACcR;gBAAtBJ,OAAK;;YAALA,CAAAA,KAAAA,CAAAA,QAAAA,IAAAA,CAAI,CAAC,YAAA,YAAA,AAAY,MAAA,QAAA,OAAA,KAAA,IAAA,KAAjBA,KAAI,CAAC,UAAY,GAAA,CAAKI,mBAAAA,WAAWE,IAAAA,AAAI,MAAA,QAAfF,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiBc,EAAE;QAC3C;IACF;IAEA,OAAO;QACLX;QACAoB,YAAY;YACV3B,MAAM;YACNE,OAAOX,iBAAAA;YACPa,YAAYR,sBAAAA;QACd;QACAI;QACAE;QACAE;IACF;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useInfoLabelStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const infoLabelClassNames = {\n root: 'fui-InfoLabel',\n label: 'fui-InfoLabel__label',\n infoButton: 'fui-InfoLabel__infoButton'\n};\nconst useLabelStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n cursor: 'inherit',\n color: 'inherit'\n }\n});\nconst useInfoButtonStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n // Negative margin to align with the text\n marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`\n },\n large: {\n // Negative margin to align with the text\n marginTop: '-1px',\n marginBottom: '-1px'\n }\n});\n/**\n * Apply styling to the InfoLabel slots based on the state\n */ export const useInfoLabelStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n const labelStyles = useLabelStyles();\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);\n }\n return state;\n};\n"],"names":["infoLabelClassNames","useInfoLabelStyles_unstable","root","label","infoButton","useLabelStyles","__styles","base","ha4doy","Bceei9c","sj55zd","d","useInfoButtonStyles","B6of3ja","jrapky","large","state","className","mergeClasses","labelStyles","infoButtonStyles","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,mBAAmB;eAAnBA;;IA2BIC,2BAA2B;eAA3BA;;;uBA5BwB;AAClC,MAAMD,sBAAsB;IAC/BE,MAAM;IACNC,OAAO;IACPC,YAAY;AAChB;AACA,MAAMC,iBAAc,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAOvB,MAAMC,sBAAmB,WAAA,GAAGN,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,QAAA;QAAAK,SAAA;QAAAC,QAAA;IAAA;IAAAC,OAAA;QAAAF,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAH,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAejB,MAAMV,8BAA+Be,CAAAA;IAC5C;IACAA,MAAMd,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,oBAAoBE,IAAI,EAAEc,MAAMd,IAAI,CAACe,SAAS;IAClF,MAAME,cAAcd;IACpBW,MAAMb,KAAK,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,oBAAoBG,KAAK,EAAEgB,YAAYZ,IAAI,EAAES,MAAMb,KAAK,CAACc,SAAS;IACvG,MAAMG,mBAAmBR;IACzB,IAAII,MAAMZ,UAAU,EAAE;QAClBY,MAAMZ,UAAU,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,oBAAoBI,UAAU,EAAEgB,iBAAiBb,IAAI,EAAES,MAAMK,IAAI,KAAK,WAAWD,iBAAiBL,KAAK,EAAEC,MAAMZ,UAAU,CAACa,SAAS;IACjL;IACA,OAAOD;AACX"}
1
+ {"version":3,"sources":["useInfoLabelStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const infoLabelClassNames = {\n root: 'fui-InfoLabel',\n label: 'fui-InfoLabel__label',\n infoButton: 'fui-InfoLabel__infoButton'\n};\nconst useLabelStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n cursor: 'inherit',\n color: 'inherit'\n }\n});\nconst useInfoButtonStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n // Negative margin to align with the text\n marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`\n },\n large: {\n // Negative margin to align with the text\n marginTop: '-1px',\n marginBottom: '-1px'\n }\n});\n/**\n * Apply styling to the InfoLabel slots based on the state\n */ export const useInfoLabelStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n const labelStyles = useLabelStyles();\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);\n }\n return state;\n};\n"],"names":["tokens","__styles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","ha4doy","Bceei9c","sj55zd","d","useInfoButtonStyles","B6of3ja","jrapky","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"mappings":";;;;;;;;;;;IAEaG,mBAAmB;;;+BA2BY;eAA3Bc;;;uBA5BwB,gBAAgB;AAClD,4BAA4B;IAC/Bb,IAAI,EAAE,eAAe;IACrBC,KAAK,EAAE,sBAAsB;IAC7BC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,cAAc,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAO,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAMtB,CAAC;AACF,MAAMC,mBAAmB,GAAA,WAAA,OAAGZ,eAAA,EAAA;IAAAO,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAF,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAH,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAY3B,CAAC;AAGS,qCAAqCM,KAAK,IAAG;IACpD,aAAa;IACbA,KAAK,CAACd,IAAI,CAACe,SAAS,OAAGjB,mBAAY,EAACC,mBAAmB,CAACC,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACe,SAAS,CAAC;IACnF,MAAMC,WAAW,GAAGb,cAAc,CAAC,CAAC;IACpCW,KAAK,CAACb,KAAK,CAACc,SAAS,GAAGjB,uBAAY,EAACC,mBAAmB,CAACE,KAAK,EAAEe,WAAW,CAACZ,IAAI,EAAEU,KAAK,CAACb,KAAK,CAACc,SAAS,CAAC;IACxG,MAAME,gBAAgB,GAAGR,mBAAmB,CAAC,CAAC;IAC9C,IAAIK,KAAK,CAACZ,UAAU,EAAE;QAClBY,KAAK,CAACZ,UAAU,CAACa,SAAS,OAAGjB,mBAAY,EAACC,mBAAmB,CAACG,UAAU,EAAEe,gBAAgB,CAACb,IAAI,EAAEU,KAAK,CAACI,IAAI,KAAK,OAAO,IAAID,gBAAgB,CAACL,KAAK,EAAEE,KAAK,CAACZ,UAAU,CAACa,SAAS,CAAC;IAClL;IACA,OAAOD,KAAK;AAChB,CAAC"}
@@ -0,0 +1,56 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ infoLabelClassNames: function() {
13
+ return infoLabelClassNames;
14
+ },
15
+ useInfoLabelStyles_unstable: function() {
16
+ return useInfoLabelStyles_unstable;
17
+ }
18
+ });
19
+ const _reacttheme = require("@fluentui/react-theme");
20
+ const _react = require("@griffel/react");
21
+ const infoLabelClassNames = {
22
+ root: 'fui-InfoLabel',
23
+ label: 'fui-InfoLabel__label',
24
+ infoButton: 'fui-InfoLabel__infoButton'
25
+ };
26
+ const useLabelStyles = (0, _react.makeStyles)({
27
+ base: {
28
+ verticalAlign: 'top',
29
+ cursor: 'inherit',
30
+ color: 'inherit'
31
+ }
32
+ });
33
+ const useInfoButtonStyles = (0, _react.makeStyles)({
34
+ base: {
35
+ verticalAlign: 'top',
36
+ // Negative margin to align with the text
37
+ marginTop: `calc(0px - ${_reacttheme.tokens.spacingVerticalXXS})`,
38
+ marginBottom: `calc(0px - ${_reacttheme.tokens.spacingVerticalXXS})`
39
+ },
40
+ large: {
41
+ // Negative margin to align with the text
42
+ marginTop: '-1px',
43
+ marginBottom: '-1px'
44
+ }
45
+ });
46
+ const useInfoLabelStyles_unstable = (state)=>{
47
+ 'use no memo';
48
+ state.root.className = (0, _react.mergeClasses)(infoLabelClassNames.root, state.root.className);
49
+ const labelStyles = useLabelStyles();
50
+ state.label.className = (0, _react.mergeClasses)(infoLabelClassNames.label, labelStyles.base, state.label.className);
51
+ const infoButtonStyles = useInfoButtonStyles();
52
+ if (state.infoButton) {
53
+ state.infoButton.className = (0, _react.mergeClasses)(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
54
+ }
55
+ return state;
56
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\nexport const infoLabelClassNames: SlotClassNames<InfoLabelSlots> = {\n root: 'fui-InfoLabel',\n label: 'fui-InfoLabel__label',\n infoButton: 'fui-InfoLabel__infoButton',\n};\n\nconst useLabelStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n cursor: 'inherit',\n color: 'inherit',\n },\n});\n\nconst useInfoButtonStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n\n // Negative margin to align with the text\n marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`,\n },\n\n large: {\n // Negative margin to align with the text\n marginTop: '-1px',\n marginBottom: '-1px',\n },\n});\n\n/**\n * Apply styling to the InfoLabel slots based on the state\n */\nexport const useInfoLabelStyles_unstable = (state: InfoLabelState): InfoLabelState => {\n 'use no memo';\n\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n\n const labelStyles = useLabelStyles();\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n state.infoButton.className = mergeClasses(\n infoLabelClassNames.infoButton,\n infoButtonStyles.base,\n state.size === 'large' && infoButtonStyles.large,\n state.infoButton.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","verticalAlign","cursor","color","useInfoButtonStyles","marginTop","spacingVerticalXXS","marginBottom","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"mappings":";;;;;;;;;;;IAKaG,mBAAAA;;;+BAiCAc;eAAAA;;;4BAtCU,wBAAwB;uBAEN,iBAAiB;AAGnD,4BAA4D;IACjEb,MAAM;IACNC,OAAO;IACPC,YAAY;AACd,EAAE;AAEF,MAAMC,qBAAiBN,iBAAAA,EAAW;IAChCO,MAAM;QACJC,eAAe;QACfC,QAAQ;QACRC,OAAO;IACT;AACF;AAEA,MAAMC,0BAAsBX,iBAAAA,EAAW;IACrCO,MAAM;QACJC,eAAe;QAEf,yCAAyC;QACzCI,WAAW,CAAC,WAAW,EAAEb,kBAAAA,CAAOc,kBAAkB,CAAC,CAAC,CAAC;QACrDC,cAAc,CAAC,WAAW,EAAEf,kBAAAA,CAAOc,kBAAkB,CAAC,CAAC,CAAC;IAC1D;IAEAE,OAAO;QACL,yCAAyC;QACzCH,WAAW;QACXE,cAAc;IAChB;AACF;AAKO,oCAAoC,CAACG;IAC1C;IAEAA,MAAMd,IAAI,CAACe,SAAS,GAAGjB,uBAAAA,EAAaC,oBAAoBC,IAAI,EAAEc,MAAMd,IAAI,CAACe,SAAS;IAElF,MAAMC,cAAcb;IACpBW,MAAMb,KAAK,CAACc,SAAS,OAAGjB,mBAAAA,EAAaC,oBAAoBE,KAAK,EAAEe,YAAYZ,IAAI,EAAEU,MAAMb,KAAK,CAACc,SAAS;IAEvG,MAAME,mBAAmBT;IACzB,IAAIM,MAAMZ,UAAU,EAAE;QACpBY,MAAMZ,UAAU,CAACa,SAAS,OAAGjB,mBAAAA,EAC3BC,oBAAoBG,UAAU,EAC9Be,iBAAiBb,IAAI,EACrBU,MAAMI,IAAI,KAAK,WAAWD,iBAAiBL,KAAK,EAChDE,MAAMZ,UAAU,CAACa,SAAS;IAE9B;IAEA,OAAOD;AACT,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n InfoLabel,\n infoLabelClassNames,\n renderInfoLabel_unstable,\n useInfoLabelStyles_unstable,\n useInfoLabel_unstable,\n} from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel';\n\nexport {\n InfoButton,\n infoButtonClassNames,\n renderInfoButton_unstable,\n useInfoButtonStyles_unstable,\n useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\n"],"names":["InfoButton","InfoLabel","infoButtonClassNames","infoLabelClassNames","renderInfoButton_unstable","renderInfoLabel_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUEA,UAAU;eAAVA,sBAAU;;IATVC,SAAS;eAATA,oBAAS;;IAUTC,oBAAoB;eAApBA,gCAAoB;;IATpBC,mBAAmB;eAAnBA,8BAAmB;;IAUnBC,yBAAyB;eAAzBA,qCAAyB;;IATzBC,wBAAwB;eAAxBA,mCAAwB;;IAUxBC,4BAA4B;eAA5BA,wCAA4B;;IAC5BC,sBAAsB;eAAtBA,kCAAsB;;IAVtBC,2BAA2B;eAA3BA,sCAA2B;;IAC3BC,qBAAqB;eAArBA,gCAAqB;;;2BAChB;4BASA"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n InfoLabel,\n infoLabelClassNames,\n renderInfoLabel_unstable,\n useInfoLabelStyles_unstable,\n useInfoLabel_unstable,\n} from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel';\n\nexport {\n InfoButton,\n infoButtonClassNames,\n renderInfoButton_unstable,\n useInfoButtonStyles_unstable,\n useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\n"],"names":["InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable","InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"mappings":";;;;;;;;;;;IAUEK;qCAAU;;;eATVL,oBAAS;;IAUTM,oBAAoB;;;;eATpBL,8BAAmB;;;eAUnBM,qCAAyB;;;eATzBL,mCAAwB;;;eAUxBM,wCAA4B;;;eAC5BC,kCAAsB;;IAVtBN,2BAA2B;;;;eAC3BC,gCAAqB;;;2BAChB,cAAc;4BASd,eAAe"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-infolabel",
3
- "version": "9.3.7",
3
+ "version": "9.4.1",
4
4
  "description": "InfoLabel component for Fluent UI v9",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -22,12 +22,12 @@
22
22
  "dependencies": {
23
23
  "@fluentui/react-icons": "^2.0.245",
24
24
  "@fluentui/react-shared-contexts": "^9.24.0",
25
- "@fluentui/react-label": "^9.2.2",
26
- "@fluentui/react-popover": "^9.11.7",
27
- "@fluentui/react-tabster": "^9.25.3",
28
- "@fluentui/react-jsx-runtime": "^9.1.2",
25
+ "@fluentui/react-label": "^9.3.1",
26
+ "@fluentui/react-popover": "^9.12.1",
27
+ "@fluentui/react-tabster": "^9.26.1",
28
+ "@fluentui/react-jsx-runtime": "^9.1.3",
29
29
  "@fluentui/react-theme": "^9.1.24",
30
- "@fluentui/react-utilities": "^9.22.0",
30
+ "@fluentui/react-utilities": "^9.23.0",
31
31
  "@griffel/react": "^1.5.22",
32
32
  "@swc/helpers": "^0.5.1"
33
33
  },