@fluentui/react-infolabel 9.4.19 → 9.4.21
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.
- package/CHANGELOG.md +28 -2
- package/dist/index.d.ts +2 -2
- package/lib/components/InfoButton/InfoButton.js.map +1 -1
- package/lib/components/InfoButton/useInfoButton.js +4 -1
- package/lib/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib/components/InfoButton/useInfoButtonStyles.styles.js +2 -0
- package/lib/components/InfoButton/useInfoButtonStyles.styles.js.map +1 -1
- package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js +2 -0
- package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/InfoLabel/InfoLabel.types.js.map +1 -1
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.js +3 -0
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.js.map +1 -1
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js +3 -0
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/InfoButton/InfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButton.js +2 -0
- package/lib-commonjs/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js +2 -0
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js +2 -0
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/InfoLabel/InfoLabel.types.js.map +1 -1
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js +3 -0
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js.map +1 -1
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js +3 -0
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,38 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-infolabel
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 26 May 2026 09:34:22 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.4.21)
|
|
8
|
+
|
|
9
|
+
Tue, 26 May 2026 09:34:22 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infolabel_v9.4.20..@fluentui/react-infolabel_v9.4.21)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-label to v9.4.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
15
|
+
- Bump @fluentui/react-popover to v9.14.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.4.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.4.20)
|
|
21
|
+
|
|
22
|
+
Thu, 23 Apr 2026 14:21:17 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infolabel_v9.4.19..@fluentui/react-infolabel_v9.4.20)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- Bump @fluentui/react-label to v9.4.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
28
|
+
- Bump @fluentui/react-popover to v9.14.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
29
|
+
- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
30
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
31
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
32
|
+
|
|
7
33
|
## [9.4.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.4.19)
|
|
8
34
|
|
|
9
|
-
Wed, 01 Apr 2026 15:
|
|
35
|
+
Wed, 01 Apr 2026 15:52:43 GMT
|
|
10
36
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infolabel_v9.4.18..@fluentui/react-infolabel_v9.4.19)
|
|
11
37
|
|
|
12
38
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
2
2
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
3
|
-
import { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
4
4
|
import type { JSXElement } from '@fluentui/react-utilities';
|
|
5
|
-
import { Label } from '@fluentui/react-label';
|
|
5
|
+
import type { Label } from '@fluentui/react-label';
|
|
6
6
|
import type { PopoverProps } from '@fluentui/react-popover';
|
|
7
7
|
import type { PopoverSurface } from '@fluentui/react-popover';
|
|
8
8
|
import * as React_2 from 'react';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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":["'use client';\n\nimport * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { 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;AAEA,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"}
|
|
@@ -32,7 +32,8 @@ const popoverSizeMap = {
|
|
|
32
32
|
popover: Popover,
|
|
33
33
|
info: PopoverSurface
|
|
34
34
|
},
|
|
35
|
-
root: slot.always(
|
|
35
|
+
root: slot.always(// eslint-disable-next-line react-hooks/refs
|
|
36
|
+
getIntrinsicElementProps('button', {
|
|
36
37
|
children: infoButtonIconMap[size],
|
|
37
38
|
type: 'button',
|
|
38
39
|
'aria-label': 'information',
|
|
@@ -74,7 +75,9 @@ const popoverSizeMap = {
|
|
|
74
75
|
setPopoverOpen(false);
|
|
75
76
|
}
|
|
76
77
|
};
|
|
78
|
+
// eslint-disable-next-line react-hooks/refs
|
|
77
79
|
state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlurButtonOrInfo));
|
|
80
|
+
// eslint-disable-next-line react-hooks/refs
|
|
78
81
|
state.info.onBlurCapture = useEventCallback(mergeCallbacks(state.info.onBlurCapture, onBlurButtonOrInfo));
|
|
79
82
|
return state;
|
|
80
83
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["'use client';\n\nimport * 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, popover, info, ...rest } = 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 ...rest,\n ref: rootRef,\n }),\n { elementType: 'button' },\n ),\n popover: slot.always(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(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","popover","info","rest","rootRef","state","components","root","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;AAEA,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,EAAEC,OAAO,EAAEC,IAAI,EAAE,GAAGC,MAAM,GAAGN;IAEnE,MAAMO,UAAUlB,cAAcY;IAE9B,MAAMO,QAAyB;QAC7BL;QACAD;QAEAO,YAAY;YACVC,MAAM;YACNN,SAASZ;YACTa,MAAMZ;QACR;QAEAiB,MAAMtB,KAAKuB,MAAM,
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["'use client';\n\nimport * 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, popover, info, ...rest } = 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 // eslint-disable-next-line react-hooks/refs\n getIntrinsicElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...rest,\n ref: rootRef,\n }),\n { elementType: 'button' },\n ),\n popover: slot.always(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(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 // eslint-disable-next-line react-hooks/refs\n state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlurButtonOrInfo));\n // eslint-disable-next-line react-hooks/refs\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","popover","info","rest","rootRef","state","components","root","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;AAEA,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,EAAEC,OAAO,EAAEC,IAAI,EAAE,GAAGC,MAAM,GAAGN;IAEnE,MAAMO,UAAUlB,cAAcY;IAE9B,MAAMO,QAAyB;QAC7BL;QACAD;QAEAO,YAAY;YACVC,MAAM;YACNN,SAASZ;YACTa,MAAMZ;QACR;QAEAiB,MAAMtB,KAAKuB,MAAM,CACf,4CAA4C;QAC5C1B,yBAAyB,UAAU;YACjC2B,UAAUlB,iBAAiB,CAACQ,KAAK;YACjCW,MAAM;YACN,cAAc;YACd,GAAGP,IAAI;YACPL,KAAKM;QACP,IACA;YAAEO,aAAa;QAAS;QAE1BV,SAAShB,KAAKuB,MAAM,CAACP,SAAS;YAC5BW,cAAc;gBACZZ;gBACAa,aAAa;gBACbd,MAAMJ,cAAc,CAACI,KAAK;gBAC1Be,WAAW;YACb;YACAH,aAAatB;QACf;QACAa,MAAMjB,KAAKuB,MAAM,CAACN,MAAM;YACtBU,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAarB;QACf;IACF;IAEA,MAAM,CAAC2B,aAAaC,eAAe,GAAGlC,qBAAqB;QACzDqB,OAAOA,MAAMJ,OAAO,CAACkB,IAAI;QACzBC,cAAcf,MAAMJ,OAAO,CAACoB,WAAW;QACvCC,cAAc;IAChB;IAEAjB,MAAMJ,OAAO,CAACkB,IAAI,GAAGF;IACrBZ,MAAMJ,OAAO,CAACsB,YAAY,GAAGxC,eAAesB,MAAMJ,OAAO,CAACsB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,UAAUxC,cAAcmB,MAAMH,IAAI,CAACJ,GAAG;IAC5CO,MAAMH,IAAI,CAACJ,GAAG,GAAG4B;IAEjB,kEAAkE;IAClE,MAAMC,qBAAqB,CAACH;QAC1B,MAAMI,cAAcJ,EAAEK,aAAa;QAEnC,IAAID,eAAexB,QAAQ0B,OAAO,KAAKF,eAAe,CAACzC,gBAAgBuC,QAAQI,OAAO,EAAEF,cAAc;YACpGV,eAAe;QACjB;IACF;IAEA,4CAA4C;IAC5Cb,MAAME,IAAI,CAACwB,MAAM,GAAG3C,iBAAiBL,eAAesB,MAAME,IAAI,CAACwB,MAAM,EAAEJ;IACvE,4CAA4C;IAC5CtB,MAAMH,IAAI,CAAC8B,aAAa,GAAG5C,iBAAiBL,eAAesB,MAAMH,IAAI,CAAC8B,aAAa,EAAEL;IACrF,OAAOtB;AACT,EAAE"}
|
|
@@ -186,7 +186,9 @@ export const useInfoButtonStyles_unstable = state => {
|
|
|
186
186
|
} = state.popover;
|
|
187
187
|
const buttonStyles = useButtonStyles();
|
|
188
188
|
const popoverSurfaceStyles = usePopoverSurfaceStyles();
|
|
189
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
189
190
|
state.info.className = mergeClasses(infoButtonClassNames.info, popoverSurfaceStyles.base, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
|
|
191
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
190
192
|
state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
|
|
191
193
|
return state;
|
|
192
194
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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","By8wz76","B7iucu3","highContrast","Bfsdueo","pb71ee","ik86qs","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","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"],"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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"],"mappings":"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
|
|
1
|
+
{"version":3,"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","By8wz76","B7iucu3","highContrast","Bfsdueo","pb71ee","ik86qs","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","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"],"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 // eslint-disable-next-line react-hooks/immutability\n state.info.className = mergeClasses(infoButtonClassNames.info, popoverSurfaceStyles.base, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);\n // eslint-disable-next-line react-hooks/immutability\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"],"mappings":"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","ignoreList":[]}
|
|
@@ -92,7 +92,9 @@ const usePopoverSurfaceStyles = makeStyles({
|
|
|
92
92
|
const { open } = state.popover;
|
|
93
93
|
const buttonStyles = useButtonStyles();
|
|
94
94
|
const popoverSurfaceStyles = usePopoverSurfaceStyles();
|
|
95
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
95
96
|
state.info.className = mergeClasses(infoButtonClassNames.info, popoverSurfaceStyles.base, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
|
|
97
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
96
98
|
state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
|
|
97
99
|
return state;
|
|
98
100
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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":"AAAA;AAEA,SAASA,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,wBAAwB;AAClF,SAASC,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACN,4EAA4E;IAC5EC,SAAS;IACTC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,kBAAkBT,WAAW;IACjCU,MAAM;QACJC,YAAY;QACZC,WAAW;QACXC,SAAS;QACTC,gBAAgB;QAChBC,oBAAoB;QACpBC,eAAe;QACfC,UAAU;QAEVC,iBAAiBf,OAAOgB,0BAA0B;QAClDC,OAAOjB,OAAOkB,uBAAuB;QAErC,GAAGnB,WAAWoB,WAAW,CAAC,OAAO;QACjCC,cAAcpB,OAAOqB,kBAAkB;QACvCC,QAAQ;QACRC,SAAS,GAAGvB,OAAOwB,iBAAiB,CAAC,CAAC,EAAExB,OAAOyB,mBAAmB,EAAE;QAEpE,CAAC,CAAC,GAAG,EAAE9B,qBAAqB,CAAC,EAAE;YAC7Be,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEd,sBAAsB,CAAC,EAAE;YAC9Bc,SAAS;QACX;QAEA,UAAU;YACRK,iBAAiBf,OAAO0B,+BAA+B;YACvDT,OAAOjB,OAAO2B,iCAAiC;YAC/CC,QAAQ;YAER,CAAC,CAAC,GAAG,EAAEjC,qBAAqB,CAAC,EAAE;gBAC7Be,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEd,sBAAsB,CAAC,EAAE;gBAC9Bc,SAAS;YACX;QACF;QACA,iBAAiB;YACfK,iBAAiBf,OAAO6B,iCAAiC;YACzDZ,OAAOjB,OAAO8B,mCAAmC;QACnD;IACF;IAEAC,UAAU;QACRhB,iBAAiBf,OAAOgC,kCAAkC;QAC1Df,OAAOjB,OAAOiC,oCAAoC;QAElD,CAAC,CAAC,GAAG,EAAEtC,qBAAqB,CAAC,EAAE;YAC7Be,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEd,sBAAsB,CAAC,EAAE;YAC9Bc,SAAS;QACX;QAEA,kCAAkC;YAChCK,iBAAiB;YACjBE,OAAO;QACT;IACF;IAEAiB,cAAc;QACZ,kCAAkC;YAChCjB,OAAO;YAEP,wBAAwB;gBACtBkB,mBAAmB;gBACnBpB,iBAAiB;gBACjBE,OAAO;YACT;QACF;IACF;IAEAmB,gBAAgB1C;IAEhB2C,OAAO;QACLd,SAAS,GAAGvB,OAAOsC,kBAAkB,CAAC,CAAC,EAAEtC,OAAOsC,kBAAkB,EAAE;IACtE;AACF;AAEA,MAAMC,0BAA0B1C,WAAW;IACzCU,MAAM;QACJiC,UAAU;IACZ;IACAC,aAAaxC,iBAAiByC,QAAQ;IACtCL,OAAOpC,iBAAiB0C,KAAK;AAC/B;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAM,EAAEE,IAAI,EAAE,GAAGF,MAAMzC,OAAO;IAC9B,MAAM4C,eAAe1C;IACrB,MAAM2C,uBAAuBV;
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\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.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
|
+
{"version":3,"sources":["../src/components/InfoLabel/InfoLabel.types.ts"],"sourcesContent":["import type { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { 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"}
|
|
@@ -35,11 +35,14 @@ const useInfoButtonStyles = /*#__PURE__*/__styles({
|
|
|
35
35
|
export const useInfoLabelStyles_unstable = state => {
|
|
36
36
|
'use no memo';
|
|
37
37
|
|
|
38
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
38
39
|
state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);
|
|
39
40
|
const labelStyles = useLabelStyles();
|
|
41
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
40
42
|
state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);
|
|
41
43
|
const infoButtonStyles = useInfoButtonStyles();
|
|
42
44
|
if (state.infoButton) {
|
|
45
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
43
46
|
state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
|
|
44
47
|
}
|
|
45
48
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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"],"sources":["useInfoLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE,sBAAsB;EAC7BC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,cAAc,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMtB,CAAC;AACF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAK,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAF,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAY3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;
|
|
1
|
+
{"version":3,"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"],"sources":["useInfoLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n const labelStyles = useLabelStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE,sBAAsB;EAC7BC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,cAAc,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMtB,CAAC;AACF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAK,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAF,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAY3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACb;EACAA,KAAK,CAACd,IAAI,CAACe,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACC,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACe,SAAS,CAAC;EACnF,MAAMC,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC;EACAW,KAAK,CAACb,KAAK,CAACc,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACE,KAAK,EAAEe,WAAW,CAACZ,IAAI,EAAEU,KAAK,CAACb,KAAK,CAACc,SAAS,CAAC;EACxG,MAAME,gBAAgB,GAAGR,mBAAmB,CAAC,CAAC;EAC9C,IAAIK,KAAK,CAACZ,UAAU,EAAE;IAClB;IACAY,KAAK,CAACZ,UAAU,CAACa,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACG,UAAU,EAAEe,gBAAgB,CAACb,IAAI,EAAEU,KAAK,CAACI,IAAI,KAAK,OAAO,IAAID,gBAAgB,CAACL,KAAK,EAAEE,KAAK,CAACZ,UAAU,CAACa,SAAS,CAAC;EAClL;EACA,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -30,11 +30,14 @@ const useInfoButtonStyles = makeStyles({
|
|
|
30
30
|
* Apply styling to the InfoLabel slots based on the state
|
|
31
31
|
*/ export const useInfoLabelStyles_unstable = (state)=>{
|
|
32
32
|
'use no memo';
|
|
33
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
33
34
|
state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);
|
|
34
35
|
const labelStyles = useLabelStyles();
|
|
36
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
35
37
|
state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);
|
|
36
38
|
const infoButtonStyles = useInfoButtonStyles();
|
|
37
39
|
if (state.infoButton) {
|
|
40
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
38
41
|
state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
|
|
39
42
|
}
|
|
40
43
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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;AAEA,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;
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n\n const labelStyles = useLabelStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n // eslint-disable-next-line react-hooks/immutability\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;AAEA,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;IAEA,oDAAoD;IACpDA,MAAMd,IAAI,CAACe,SAAS,GAAGjB,aAAaC,oBAAoBC,IAAI,EAAEc,MAAMd,IAAI,CAACe,SAAS;IAElF,MAAMC,cAAcb;IACpB,oDAAoD;IACpDW,MAAMb,KAAK,CAACc,SAAS,GAAGjB,aAAaC,oBAAoBE,KAAK,EAAEe,YAAYZ,IAAI,EAAEU,MAAMb,KAAK,CAACc,SAAS;IAEvG,MAAME,mBAAmBT;IACzB,IAAIM,MAAMZ,UAAU,EAAE;QACpB,oDAAoD;QACpDY,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["'use client';\n\nimport * 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;;;;;;;;;;;;iEAEuB,QAAQ;qCACa,kCAAkC;kCAEpC,qBAAqB;+BACxB,kBAAkB;2CACZ,+BAA+B;AAMrE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQN,qCAAAA,EAAuBI,OAAOC;QAE5CJ,uDAAAA,EAA6BK;QAC7BR,gDAAAA,EAA4B,gCAAgCQ;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { 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;;;;;;;;;;;;iEAEuB,QAAQ;qCACa,kCAAkC;kCAEpC,qBAAqB;+BACxB,kBAAkB;2CACZ,+BAA+B;AAMrE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQN,qCAAAA,EAAuBI,OAAOC;QAE5CJ,uDAAAA,EAA6BK;QAC7BR,gDAAAA,EAA4B,gCAAgCQ;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
|
|
@@ -77,7 +77,9 @@ const useInfoButton_unstable = (props, ref)=>{
|
|
|
77
77
|
setPopoverOpen(false);
|
|
78
78
|
}
|
|
79
79
|
};
|
|
80
|
+
// eslint-disable-next-line react-hooks/refs
|
|
80
81
|
state.root.onBlur = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onBlur, onBlurButtonOrInfo));
|
|
82
|
+
// eslint-disable-next-line react-hooks/refs
|
|
81
83
|
state.info.onBlurCapture = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.info.onBlurCapture, onBlurButtonOrInfo));
|
|
82
84
|
return state;
|
|
83
85
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["'use client';\n\nimport * 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, popover, info, ...rest } = 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 ...rest,\n ref: rootRef,\n }),\n { elementType: 'button' },\n ),\n popover: slot.always(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(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","popover","info","rest","rootRef","state","components","root","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;;;;;+BAsCakB;;;;;;;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,EAAEC,OAAO,EAAEC,IAAI,EAAE,GAAGC,MAAM,GAAGN;IAEnE,MAAMO,UAAUlB,iCAAAA,EAAcY;IAE9B,MAAMO,QAAyB;QAC7BL;QACAD;QAEAO,YAAY;YACVC,MAAM;YACNN,SAASZ,qBAAAA;YACTa,MAAMZ,4BAAAA;QACR;QAEAiB,MAAMtB,oBAAAA,CAAKuB,MAAM,
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["'use client';\n\nimport * 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, popover, info, ...rest } = 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 // eslint-disable-next-line react-hooks/refs\n getIntrinsicElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...rest,\n ref: rootRef,\n }),\n { elementType: 'button' },\n ),\n popover: slot.always(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(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 // eslint-disable-next-line react-hooks/refs\n state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlurButtonOrInfo));\n // eslint-disable-next-line react-hooks/refs\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","popover","info","rest","rootRef","state","components","root","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;;;;;+BAsCakB;;;;;;;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,EAAEC,OAAO,EAAEC,IAAI,EAAE,GAAGC,MAAM,GAAGN;IAEnE,MAAMO,UAAUlB,iCAAAA,EAAcY;IAE9B,MAAMO,QAAyB;QAC7BL;QACAD;QAEAO,YAAY;YACVC,MAAM;YACNN,SAASZ,qBAAAA;YACTa,MAAMZ,4BAAAA;QACR;QAEAiB,MAAMtB,oBAAAA,CAAKuB,MAAM,CACf,IACA1B,wCAD4C,AAC5CA,EAAyB,UAAU;YACjC2B,UAAUlB,iBAAiB,CAACQ,KAAK;YACjCW,MAAM;YACN,cAAc;YACd,GAAGP,IAAI;YACPL,KAAKM;QACP,IACA;YAAEO,aAAa;QAAS;QAE1BV,SAAShB,oBAAAA,CAAKuB,MAAM,CAACP,SAAS;YAC5BW,cAAc;gBACZZ;gBACAa,aAAa;gBACbd,MAAMJ,cAAc,CAACI,KAAK;gBAC1Be,WAAW;YACb;YACAH,aAAatB,qBAAAA;QACf;QACAa,MAAMjB,oBAAAA,CAAKuB,MAAM,CAACN,MAAM;YACtBU,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAarB,4BAAAA;QACf;IACF;IAEA,MAAM,CAAC2B,aAAaC,eAAe,OAAGlC,oCAAAA,EAAqB;QACzDqB,OAAOA,MAAMJ,OAAO,CAACkB,IAAI;QACzBC,cAAcf,MAAMJ,OAAO,CAACoB,WAAW;QACvCC,cAAc;IAChB;IAEAjB,MAAMJ,OAAO,CAACkB,IAAI,GAAGF;IACrBZ,MAAMJ,OAAO,CAACsB,YAAY,OAAGxC,8BAAAA,EAAesB,MAAMJ,OAAO,CAACsB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,cAAUxC,6BAAAA,EAAcmB,MAAMH,IAAI,CAACJ,GAAG;IAC5CO,MAAMH,IAAI,CAACJ,GAAG,GAAG4B;IAEjB,kEAAkE;IAClE,MAAMC,qBAAqB,CAACH;QAC1B,MAAMI,cAAcJ,EAAEK,aAAa;QAEnC,IAAID,eAAexB,QAAQ0B,OAAO,KAAKF,eAAe,KAACzC,+BAAAA,EAAgBuC,QAAQI,OAAO,EAAEF,cAAc;YACpGV,eAAe;QACjB;IACF;IAEA,4CAA4C;IAC5Cb,MAAME,IAAI,CAACwB,MAAM,OAAG3C,gCAAAA,MAAiBL,8BAAAA,EAAesB,MAAME,IAAI,CAACwB,MAAM,EAAEJ;IACvE,4CAA4C;IAC5CtB,MAAMH,IAAI,CAAC8B,aAAa,OAAG5C,gCAAAA,MAAiBL,8BAAAA,EAAesB,MAAMH,IAAI,CAAC8B,aAAa,EAAEL;IACrF,OAAOtB;AACT,EAAE"}
|
|
@@ -328,7 +328,9 @@ const useInfoButtonStyles_unstable = (state)=>{
|
|
|
328
328
|
const { open } = state.popover;
|
|
329
329
|
const buttonStyles = useButtonStyles();
|
|
330
330
|
const popoverSurfaceStyles = usePopoverSurfaceStyles();
|
|
331
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
331
332
|
state.info.className = (0, _react.mergeClasses)(infoButtonClassNames.info, popoverSurfaceStyles.base, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
|
|
333
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
332
334
|
state.root.className = (0, _react.mergeClasses)(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
|
|
333
335
|
return state;
|
|
334
336
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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","By8wz76","B7iucu3","highContrast","Bfsdueo","pb71ee","ik86qs","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","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":"AAAA,YAAY;;;;;;;;;;;;IAKCQ,oBAAoB;;;gCAmFY;eAA5ByG;;;uBArFoC,gBAAgB;AAE9D,6BAA6B;IAChCxG,IAAI,EAAE,gBAAgB;IACtB,4EAAA;IACAC,OAAO,EAAE,yBAAyB;IAClCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,eAAe,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAU,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAA9B,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAoB,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAD,OAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA,EAAA;QAAA9D,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAA2D,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAiE3B,CAAC;AACF,MAAMC,uBAAuB,GAAA,WAAA,OAAGvG,eAAA,EAAA;IAAAU,IAAA,EAAA;QAAA8F,OAAA,EAAA;IAAA;IAAAC,WAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAb,KAAA,EAAA;QAAAU,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAZ,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAM/B,CAAC;AAGS,
|
|
1
|
+
{"version":3,"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 // eslint-disable-next-line react-hooks/immutability\n state.info.className = mergeClasses(infoButtonClassNames.info, popoverSurfaceStyles.base, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);\n // eslint-disable-next-line react-hooks/immutability\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","By8wz76","B7iucu3","highContrast","Bfsdueo","pb71ee","ik86qs","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","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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"}
|
|
@@ -108,7 +108,9 @@ const useInfoButtonStyles_unstable = (state)=>{
|
|
|
108
108
|
const { open } = state.popover;
|
|
109
109
|
const buttonStyles = useButtonStyles();
|
|
110
110
|
const popoverSurfaceStyles = usePopoverSurfaceStyles();
|
|
111
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
111
112
|
state.info.className = (0, _react.mergeClasses)(infoButtonClassNames.info, popoverSurfaceStyles.base, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
|
|
113
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
112
114
|
state.root.className = (0, _react.mergeClasses)(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
|
|
113
115
|
return state;
|
|
114
116
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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":"AAAA;;;;;;;;;;;;IASaQ,oBAAAA;;;gCAoGA0C;;;;8BA3G2B,0BAA0B;4BACR,wBAAwB;uBAC7B,iBAAiB;4BAC7B,wBAAwB;AAI1D,6BAA8D;IACnEzC,MAAM;IACN,4EAA4E;IAC5EC,SAAS;IACTC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,sBAAkBT,iBAAAA,EAAW;IACjCU,MAAM;QACJC,YAAY;QACZC,WAAW;QACXC,SAAS;QACTC,gBAAgB;QAChBC,oBAAoB;QACpBC,eAAe;QACfC,UAAU;QAEVC,iBAAiBf,kBAAAA,CAAOgB,0BAA0B;QAClDC,OAAOjB,kBAAAA,CAAOkB,uBAAuB;QAErC,GAAGnB,iBAAAA,CAAWoB,WAAW,CAAC,OAAO;QACjCC,cAAcpB,kBAAAA,CAAOqB,kBAAkB;QACvCC,QAAQ;QACRC,SAAS,GAAGvB,kBAAAA,CAAOwB,iBAAiB,CAAC,CAAC,EAAExB,kBAAAA,CAAOyB,mBAAmB,EAAE;QAEpE,CAAC,CAAC,GAAG,EAAE9B,+BAAAA,EAAqB,CAAC,EAAE;YAC7Be,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEd,gCAAAA,EAAsB,CAAC,EAAE;YAC9Bc,SAAS;QACX;QAEA,UAAU;YACRK,iBAAiBf,kBAAAA,CAAO0B,+BAA+B;YACvDT,OAAOjB,kBAAAA,CAAO2B,iCAAiC;YAC/CC,QAAQ;YAER,CAAC,CAAC,GAAG,EAAEjC,+BAAAA,EAAqB,CAAC,EAAE;gBAC7Be,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEd,gCAAAA,EAAsB,CAAC,EAAE;gBAC9Bc,SAAS;YACX;QACF;QACA,iBAAiB;YACfK,iBAAiBf,kBAAAA,CAAO6B,iCAAiC;YACzDZ,OAAOjB,kBAAAA,CAAO8B,mCAAmC;QACnD;IACF;IAEAC,UAAU;QACRhB,iBAAiBf,kBAAAA,CAAOgC,kCAAkC;QAC1Df,OAAOjB,kBAAAA,CAAOiC,oCAAoC;QAElD,CAAC,CAAC,GAAG,EAAEtC,+BAAAA,EAAqB,CAAC,EAAE;YAC7Be,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEd,gCAAAA,EAAsB,CAAC,EAAE;YAC9Bc,SAAS;QACX;QAEA,kCAAkC;YAChCK,iBAAiB;YACjBE,OAAO;QACT;IACF;IAEAiB,cAAc;QACZ,kCAAkC;YAChCjB,OAAO;YAEP,wBAAwB;gBACtBkB,mBAAmB;gBACnBpB,iBAAiB;gBACjBE,OAAO;YACT;QACF;IACF;IAEAmB,oBAAgB1C,qCAAAA;IAEhB2C,OAAO;QACLd,SAAS,GAAGvB,kBAAAA,CAAOsC,kBAAkB,CAAC,CAAC,EAAEtC,kBAAAA,CAAOsC,kBAAkB,EAAE;IACtE;AACF;AAEA,MAAMC,8BAA0B1C,iBAAAA,EAAW;IACzCU,MAAM;QACJiC,UAAU;IACZ;IACAC,aAAaxC,4BAAAA,CAAiByC,QAAQ;IACtCL,OAAOpC,4BAAAA,CAAiB0C,KAAK;AAC/B;AAKO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAM,EAAEE,IAAI,EAAE,GAAGF,MAAMzC,OAAO;IAC9B,MAAM4C,eAAe1C;IACrB,MAAM2C,uBAAuBV;
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\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.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
|
+
{"version":3,"sources":["../src/components/InfoLabel/InfoLabel.types.ts"],"sourcesContent":["import type { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { 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"}
|
|
@@ -57,11 +57,14 @@ const useInfoButtonStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
57
57
|
});
|
|
58
58
|
const useInfoLabelStyles_unstable = (state)=>{
|
|
59
59
|
'use no memo';
|
|
60
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
60
61
|
state.root.className = (0, _react.mergeClasses)(infoLabelClassNames.root, state.root.className);
|
|
61
62
|
const labelStyles = useLabelStyles();
|
|
63
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
62
64
|
state.label.className = (0, _react.mergeClasses)(infoLabelClassNames.label, labelStyles.base, state.label.className);
|
|
63
65
|
const infoButtonStyles = useInfoButtonStyles();
|
|
64
66
|
if (state.infoButton) {
|
|
67
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
65
68
|
state.infoButton.className = (0, _react.mergeClasses)(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
|
|
66
69
|
}
|
|
67
70
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInfoLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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":"AAAA,YAAY;;;;;;;;;;;;IAGCG,mBAAmB;;;IA2Bfc,2BAA2B;;;;uBA5BH,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,GAAGZ,mBAAA,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,oCAAqCM,KAAK,IAAG;IACpD,aAAa;
|
|
1
|
+
{"version":3,"sources":["useInfoLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n const labelStyles = useLabelStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n // eslint-disable-next-line react-hooks/immutability\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":"AAAA,YAAY;;;;;;;;;;;;IAGCG,mBAAmB;;;IA2Bfc,2BAA2B;;;;uBA5BH,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,GAAGZ,mBAAA,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,oCAAqCM,KAAK,IAAG;IACpD,aAAa;IACb,oDAAA;IACAA,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;IACpC,oDAAA;IACAW,KAAK,CAACb,KAAK,CAACc,SAAS,OAAGjB,mBAAY,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;QAClB,oDAAA;QACAY,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"}
|
|
@@ -46,11 +46,14 @@ const useInfoButtonStyles = (0, _react.makeStyles)({
|
|
|
46
46
|
});
|
|
47
47
|
const useInfoLabelStyles_unstable = (state)=>{
|
|
48
48
|
'use no memo';
|
|
49
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
49
50
|
state.root.className = (0, _react.mergeClasses)(infoLabelClassNames.root, state.root.className);
|
|
50
51
|
const labelStyles = useLabelStyles();
|
|
52
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
51
53
|
state.label.className = (0, _react.mergeClasses)(infoLabelClassNames.label, labelStyles.base, state.label.className);
|
|
52
54
|
const infoButtonStyles = useInfoButtonStyles();
|
|
53
55
|
if (state.infoButton) {
|
|
56
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
54
57
|
state.infoButton.className = (0, _react.mergeClasses)(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
|
|
55
58
|
}
|
|
56
59
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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;;;;;;;;;;;;IAOaG,mBAAAA;;;+BAiCAc;;;;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,MAAME,8BAA8B,CAACC;IAC1C;
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n\n const labelStyles = useLabelStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n // eslint-disable-next-line react-hooks/immutability\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;;;;;;;;;;;;IAOaG,mBAAAA;;;+BAiCAc;;;;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,MAAME,8BAA8B,CAACC;IAC1C;IAEA,oDAAoD;IACpDA,MAAMd,IAAI,CAACe,SAAS,OAAGjB,mBAAAA,EAAaC,oBAAoBC,IAAI,EAAEc,MAAMd,IAAI,CAACe,SAAS;IAElF,MAAMC,cAAcb;IACpB,oDAAoD;IACpDW,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;QACpB,oDAAoD;QACpDY,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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-infolabel",
|
|
3
|
-
"version": "9.4.
|
|
3
|
+
"version": "9.4.21",
|
|
4
4
|
"description": "InfoLabel component for Fluent UI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/react-icons": "^2.0.245",
|
|
16
16
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
17
|
-
"@fluentui/react-label": "^9.4.
|
|
18
|
-
"@fluentui/react-popover": "^9.14.
|
|
19
|
-
"@fluentui/react-tabster": "^9.26.
|
|
20
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
17
|
+
"@fluentui/react-label": "^9.4.2",
|
|
18
|
+
"@fluentui/react-popover": "^9.14.3",
|
|
19
|
+
"@fluentui/react-tabster": "^9.26.15",
|
|
20
|
+
"@fluentui/react-jsx-runtime": "^9.4.3",
|
|
21
21
|
"@fluentui/react-theme": "^9.2.1",
|
|
22
|
-
"@fluentui/react-utilities": "^9.26.
|
|
22
|
+
"@fluentui/react-utilities": "^9.26.4",
|
|
23
23
|
"@griffel/react": "^1.5.32",
|
|
24
24
|
"@swc/helpers": "^0.5.1"
|
|
25
25
|
},
|