@fluentui/react-infobutton 9.0.0-beta.102 → 9.0.0-beta.103
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 +16 -2
- package/dist/index.d.ts +2 -4
- package/lib/InfoButton.js +1 -1
- package/lib/InfoButton.js.map +1 -1
- package/lib/InfoLabel.js +1 -1
- package/lib/InfoLabel.js.map +1 -1
- package/lib/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
- package/lib/components/InfoButton/InfoButton.js +2 -1
- package/lib/components/InfoButton/InfoButton.js.map +1 -1
- package/lib/components/InfoButton/InfoButton.types.js +5 -1
- package/lib/components/InfoButton/InfoButton.types.js.map +1 -1
- package/lib/components/InfoButton/index.js +4 -5
- package/lib/components/InfoButton/index.js.map +1 -1
- package/lib/components/InfoButton/renderInfoButton.js +1 -1
- package/lib/components/InfoButton/renderInfoButton.js.map +1 -1
- package/lib/components/InfoButton/useInfoButton.js +2 -1
- package/lib/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib/components/InfoButton/useInfoButtonStyles.styles.js +32 -20
- package/lib/components/InfoButton/useInfoButtonStyles.styles.js.map +1 -1
- package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js +99 -0
- package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -0
- package/lib/components/InfoLabel/InfoLabel.js +2 -1
- package/lib/components/InfoLabel/InfoLabel.js.map +1 -1
- package/lib/components/InfoLabel/InfoLabel.types.js +5 -1
- package/lib/components/InfoLabel/InfoLabel.types.js.map +1 -1
- package/lib/components/InfoLabel/index.js +4 -5
- package/lib/components/InfoLabel/index.js.map +1 -1
- package/lib/components/InfoLabel/renderInfoLabel.js +1 -1
- package/lib/components/InfoLabel/renderInfoLabel.js.map +1 -1
- package/lib/components/InfoLabel/useInfoLabel.js +2 -1
- package/lib/components/InfoLabel/useInfoLabel.js.map +1 -1
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.js +5 -3
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.js.map +1 -1
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js +45 -0
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -0
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/InfoButton.js +25 -3
- package/lib-commonjs/InfoButton.js.map +1 -1
- package/lib-commonjs/InfoLabel.js +25 -3
- package/lib-commonjs/InfoLabel.js.map +1 -1
- package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
- package/lib-commonjs/components/InfoButton/InfoButton.js +2 -1
- package/lib-commonjs/components/InfoButton/InfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/InfoButton.types.js +5 -1
- package/lib-commonjs/components/InfoButton/InfoButton.types.js.map +1 -1
- package/lib-commonjs/components/InfoButton/index.js +28 -7
- package/lib-commonjs/components/InfoButton/index.js.map +1 -1
- package/lib-commonjs/components/InfoButton/renderInfoButton.js +1 -1
- package/lib-commonjs/components/InfoButton/renderInfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButton.js +2 -1
- package/lib-commonjs/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js +38 -64
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js +113 -0
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/InfoLabel/InfoLabel.js +2 -1
- package/lib-commonjs/components/InfoLabel/InfoLabel.js.map +1 -1
- package/lib-commonjs/components/InfoLabel/InfoLabel.types.js +5 -1
- package/lib-commonjs/components/InfoLabel/InfoLabel.types.js.map +1 -1
- package/lib-commonjs/components/InfoLabel/index.js +28 -7
- package/lib-commonjs/components/InfoLabel/index.js.map +1 -1
- package/lib-commonjs/components/InfoLabel/renderInfoLabel.js +1 -1
- package/lib-commonjs/components/InfoLabel/renderInfoLabel.js.map +1 -1
- package/lib-commonjs/components/InfoLabel/useInfoLabel.js +2 -1
- package/lib-commonjs/components/InfoLabel/useInfoLabel.js.map +1 -1
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js +4 -2
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js.map +1 -1
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js +57 -0
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/index.js +10 -10
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +13 -30
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,26 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-infobutton
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 08 Oct 2025 12:00:18 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.103](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.103)
|
|
8
|
+
|
|
9
|
+
Wed, 08 Oct 2025 12:00:18 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.102..@fluentui/react-infobutton_v9.0.0-beta.103)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- feat: add react 19 support ([PR #35285](https://github.com/microsoft/fluentui/pull/35285) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-label to v9.3.7 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
|
|
16
|
+
- Bump @fluentui/react-popover to v9.12.8 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.26.7 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.25.1 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
|
|
19
|
+
- Bump @fluentui/react-jsx-runtime to v9.2.2 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
|
|
20
|
+
|
|
7
21
|
## [9.0.0-beta.102](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.102)
|
|
8
22
|
|
|
9
|
-
Thu, 02 May 2024 11:
|
|
23
|
+
Thu, 02 May 2024 11:36:33 GMT
|
|
10
24
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.101..@fluentui/react-infobutton_v9.0.0-beta.102)
|
|
11
25
|
|
|
12
26
|
### Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
|
|
3
1
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
4
2
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
5
3
|
import { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
@@ -123,14 +121,14 @@ export declare type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoL
|
|
|
123
121
|
*
|
|
124
122
|
* @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
|
|
125
123
|
*/
|
|
126
|
-
export declare const renderInfoButton_unstable: (state: InfoButtonState) =>
|
|
124
|
+
export declare const renderInfoButton_unstable: (state: InfoButtonState) => React_2.ReactElement;
|
|
127
125
|
|
|
128
126
|
/**
|
|
129
127
|
* Render the final JSX of InfoLabel
|
|
130
128
|
*
|
|
131
129
|
* @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
|
|
132
130
|
*/
|
|
133
|
-
export declare const renderInfoLabel_unstable: (state: InfoLabelState) =>
|
|
131
|
+
export declare const renderInfoLabel_unstable: (state: InfoLabelState) => React_2.ReactElement;
|
|
134
132
|
|
|
135
133
|
/**
|
|
136
134
|
* Create the state required to render InfoButton.
|
package/lib/InfoButton.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ export { InfoButton, infoButtonClassNames, renderInfoButton_unstable, useInfoButtonStyles_unstable, useInfoButton_unstable } from './components/InfoButton/index';
|
package/lib/InfoButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["InfoButton.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/InfoButton.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './components/InfoButton/index';\nexport {\n InfoButton,\n infoButtonClassNames,\n renderInfoButton_unstable,\n useInfoButtonStyles_unstable,\n useInfoButton_unstable,\n} from './components/InfoButton/index';\n"],"names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"mappings":"AAAA,mDAAmD,GAEnD,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}
|
package/lib/InfoLabel.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ export { InfoLabel, infoLabelClassNames, renderInfoLabel_unstable, useInfoLabelStyles_unstable, useInfoLabel_unstable } from './components/InfoLabel/index';
|
package/lib/InfoLabel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["InfoLabel.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/InfoLabel.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './components/InfoLabel/index';\nexport {\n InfoLabel,\n infoLabelClassNames,\n renderInfoLabel_unstable,\n useInfoLabelStyles_unstable,\n useInfoLabel_unstable,\n} from './components/InfoLabel/index';\n"],"names":["InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"mappings":"AAAA,mDAAmD,GAEnD,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB,+BAA+B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DefaultInfoButtonIcons.tsx"],"sourcesContent":["import {\n Info12Regular,\n Info12Filled,\n Info16Regular,\n Info16Filled,\n Info20Regular,\n Info20Filled,\n bundleIcon,\n} from '@fluentui/react-icons';\n\nexport const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);\nexport const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);\nexport const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);\n"],"names":["Info12Regular","Info12Filled","Info16Regular","Info16Filled","Info20Regular","Info20Filled","bundleIcon","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20"],"mappings":"AAAA,SACEA,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,UAAU,QACL,wBAAwB;AAE/B,OAAO,MAAMC,0BAA0BD,WAAWL,cAAcD,eAAe;AAC/E,OAAO,MAAMQ,0BAA0BF,WAAWH,cAAcD,eAAe;AAC/E,OAAO,MAAMO,0BAA0BH,WAAWD,cAAcD,eAAe"}
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/DefaultInfoButtonIcons.tsx"],"sourcesContent":["import {\n Info12Regular,\n Info12Filled,\n Info16Regular,\n Info16Filled,\n Info20Regular,\n Info20Filled,\n bundleIcon,\n} from '@fluentui/react-icons';\n\nexport const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);\nexport const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);\nexport const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);\n"],"names":["Info12Regular","Info12Filled","Info16Regular","Info16Filled","Info20Regular","Info20Filled","bundleIcon","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20"],"mappings":"AAAA,SACEA,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,UAAU,QACL,wBAAwB;AAE/B,OAAO,MAAMC,0BAA0BD,WAAWL,cAAcD,eAAe;AAC/E,OAAO,MAAMQ,0BAA0BF,WAAWH,cAAcD,eAAe;AAC/E,OAAO,MAAMO,0BAA0BH,WAAWD,cAAcD,eAAe"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
/* eslint-disable
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
|
|
2
|
+
import * as React from 'react';
|
|
2
3
|
import { renderInfoButton_unstable } from './renderInfoButton';
|
|
3
4
|
import { useInfoButton_unstable } from './useInfoButton';
|
|
4
5
|
import { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["InfoButton.tsx"],"sourcesContent":["/* eslint-disable
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'use client';\n\nimport * as React from 'react';\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 *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {\n const state = useInfoButton_unstable(props, ref);\n\n useInfoButtonStyles_unstable(state);\n return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"],"names":["React","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,mDAAmD,GAEnD;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;;;CAIC,GACD,OAAO,MAAMC,2BAAmDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQN,uBAAuBI,OAAOC;IAE5CJ,6BAA6BK;IAC7B,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
|
|
@@ -1 +1,5 @@
|
|
|
1
|
-
/* eslint-disable
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ /**
|
|
2
|
+
* State used in rendering InfoButton
|
|
3
|
+
*
|
|
4
|
+
* @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
|
|
5
|
+
*/ export { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["InfoButton.types.ts"],"sourcesContent":["/* eslint-disable
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/InfoButton.types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport type InfoButtonSlots = {\n root: NonNullable<Slot<'button'>>;\n\n /**\n * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n */\n popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;\n\n /**\n * The information to be displayed in the PopoverSurface when the button is pressed.\n */\n info: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {\n /**\n * Size of the InfoButton.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Whether the InfoButton should be rendered inline or on a Portal.\n *\n * @default true\n */\n inline?: boolean;\n};\n\n/**\n * State used in rendering InfoButton\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;\n"],"names":[],"mappings":"AAAA,mDAAmD,GA0CnD;;;;CAIC,GACD,WAAmH"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export * from './useInfoButtonStyles.styles';
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ export { InfoButton } from './InfoButton';
|
|
2
|
+
export { renderInfoButton_unstable } from './renderInfoButton';
|
|
3
|
+
export { useInfoButton_unstable } from './useInfoButton';
|
|
4
|
+
export { infoButtonClassNames, useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport { InfoButton } from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nexport { renderInfoButton_unstable } from './renderInfoButton';\nexport { useInfoButton_unstable } from './useInfoButton';\nexport { infoButtonClassNames, useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\n"],"names":["InfoButton","renderInfoButton_unstable","useInfoButton_unstable","infoButtonClassNames","useInfoButtonStyles_unstable"],"mappings":"AAAA,mDAAmD,GACnD,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* eslint-disable
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
2
|
import { assertSlots } from '@fluentui/react-utilities';
|
|
3
3
|
import { PopoverTrigger } from '@fluentui/react-popover';
|
|
4
4
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderInfoButton.tsx"],"sourcesContent":["/* eslint-disable
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport type * as React from 'react';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';\n\n/**\n * Render the final JSX of InfoButton\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const renderInfoButton_unstable = (state: InfoButtonState): React.ReactElement => {\n assertSlots<InfoButtonSlots>(state);\n\n return (\n <state.popover>\n <PopoverTrigger>\n <state.root />\n </PopoverTrigger>\n <state.info />\n </state.popover>\n );\n};\n"],"names":["assertSlots","PopoverTrigger","renderInfoButton_unstable","state","popover","root","info"],"mappings":"AAAA,mDAAmD,GACnD,0BAA0B,GAC1B,iDAAiD;AAGjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;;;CAIC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCH,YAA6BG;IAE7B,qBACE,MAACA,MAAMC,OAAO;;0BACZ,KAACH;0BACC,cAAA,KAACE,MAAME,IAAI;;0BAEb,KAACF,MAAMG,IAAI;;;AAGjB,EAAE"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
/* eslint-disable
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
|
|
2
|
+
import * as React from 'react';
|
|
2
3
|
import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';
|
|
3
4
|
import { getIntrinsicElementProps, mergeCallbacks, useControllableState, slot, useMergedRefs, isHTMLElement, elementContains } from '@fluentui/react-utilities';
|
|
4
5
|
import { Popover, PopoverSurface } from '@fluentui/react-popover';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInfoButton.tsx"],"sourcesContent":["/* eslint-disable
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'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 isHTMLElement,\n elementContains,\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 HTMLElement of InfoButton\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {\n const { size = 'medium', inline = true } = props;\n\n const state: InfoButtonState = {\n inline,\n size,\n\n components: {\n root: 'button',\n popover: Popover as React.FC<Partial<PopoverProps>>,\n info: PopoverSurface,\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLButtonElement>,\n }),\n { elementType: 'button' },\n ),\n popover: slot.always(props.popover, {\n defaultProps: {\n inline,\n positioning: 'above-start',\n size: popoverSizeMap[size],\n withArrow: true,\n },\n elementType: Popover as React.FC<Partial<Omit<PopoverProps, 'openOnHover'>>>,\n }),\n info: slot.always(props.info, {\n defaultProps: {\n role: 'note',\n tabIndex: -1,\n },\n elementType: PopoverSurface,\n }),\n };\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: state.popover.open,\n defaultState: state.popover.defaultOpen,\n initialState: false,\n });\n\n state.popover.open = popoverOpen;\n state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n const focusOutRef = React.useCallback(\n (el: HTMLDivElement) => {\n if (!el) {\n return;\n }\n\n el.addEventListener('focusout', e => {\n const nextFocused = e.relatedTarget;\n\n if (isHTMLElement(nextFocused) && !elementContains(el, nextFocused)) {\n setPopoverOpen(false);\n }\n });\n },\n [setPopoverOpen],\n );\n\n state.info.ref = useMergedRefs(state.info.ref, focusOutRef);\n\n return state;\n};\n"],"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getIntrinsicElementProps","mergeCallbacks","useControllableState","slot","useMergedRefs","isHTMLElement","elementContains","Popover","PopoverSurface","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","inline","state","components","root","popover","info","always","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","focusOutRef","useCallback","el","addEventListener","nextFocused","relatedTarget"],"mappings":"AAAA,mDAAmD,GAEnD;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,aAAa,EACbC,eAAe,QACV,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;;;;;;;;;;CAUC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAE,GAAGH;IAE3C,MAAMI,QAAyB;QAC7BD;QACAD;QAEAG,YAAY;YACVC,MAAM;YACNC,SAASf;YACTgB,MAAMf;QACR;QAEAa,MAAMlB,KAAKqB,MAAM,CACfxB,yBAAyB,UAAU;YACjCyB,UAAUhB,iBAAiB,CAACQ,KAAK;YACjCS,MAAM;YACN,cAAc;YACd,GAAGX,KAAK;YACR,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FC,KAAKA;QACP,IACA;YAAEW,aAAa;QAAS;QAE1BL,SAASnB,KAAKqB,MAAM,CAACT,MAAMO,OAAO,EAAE;YAClCM,cAAc;gBACZV;gBACAW,aAAa;gBACbZ,MAAMJ,cAAc,CAACI,KAAK;gBAC1Ba,WAAW;YACb;YACAH,aAAapB;QACf;QACAgB,MAAMpB,KAAKqB,MAAM,CAACT,MAAMQ,IAAI,EAAE;YAC5BK,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAanB;QACf;IACF;IAEA,MAAM,CAACyB,aAAaC,eAAe,GAAGhC,qBAAqB;QACzDiB,OAAOA,MAAMG,OAAO,CAACa,IAAI;QACzBC,cAAcjB,MAAMG,OAAO,CAACe,WAAW;QACvCC,cAAc;IAChB;IAEAnB,MAAMG,OAAO,CAACa,IAAI,GAAGF;IACrBd,MAAMG,OAAO,CAACiB,YAAY,GAAGtC,eAAekB,MAAMG,OAAO,CAACiB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,cAAc9C,MAAM+C,WAAW,CACnC,CAACC;QACC,IAAI,CAACA,IAAI;YACP;QACF;QAEAA,GAAGC,gBAAgB,CAAC,YAAYL,CAAAA;YAC9B,MAAMM,cAAcN,EAAEO,aAAa;YAEnC,IAAI1C,cAAcyC,gBAAgB,CAACxC,gBAAgBsC,IAAIE,cAAc;gBACnEZ,eAAe;YACjB;QACF;IACF,GACA;QAACA;KAAe;IAGlBf,MAAMI,IAAI,CAACP,GAAG,GAAGZ,cAAce,MAAMI,IAAI,CAACP,GAAG,EAAE0B;IAE/C,OAAOvB;AACT,EAAE"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
/* eslint-disable
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */'use client';
|
|
2
|
+
|
|
3
|
+
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
2
4
|
import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
|
|
3
5
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
4
6
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
@@ -82,22 +84,28 @@ const useButtonStyles = /*#__PURE__*/__styles({
|
|
|
82
84
|
B7ys5i9: "f14e48fq",
|
|
83
85
|
Busjfv9: "f18yb2kv",
|
|
84
86
|
Bhk32uz: "fd6o370",
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
Bhdgwq3:
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
Bonggc9:
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
87
|
+
f6g5ot: 0,
|
|
88
|
+
Boxcth7: 0,
|
|
89
|
+
Bhdgwq3: 0,
|
|
90
|
+
hgwjuy: 0,
|
|
91
|
+
Bshpdp8: 0,
|
|
92
|
+
Bsom6fd: 0,
|
|
93
|
+
Blkhhs4: 0,
|
|
94
|
+
Bonggc9: 0,
|
|
95
|
+
Ddfuxk: 0,
|
|
96
|
+
i03rao: 0,
|
|
97
|
+
kclons: 0,
|
|
98
|
+
clg4pj: 0,
|
|
99
|
+
Bpqj9nj: 0,
|
|
100
|
+
B6dhp37: 0,
|
|
101
|
+
Bf4ptjt: 0,
|
|
102
|
+
Bqtpl0w: 0,
|
|
103
|
+
i4rwgc: "ffwy5si",
|
|
104
|
+
Dah5zi: 0,
|
|
105
|
+
B1tsrr9: 0,
|
|
106
|
+
qqdqy8: 0,
|
|
107
|
+
Bkh64rk: 0,
|
|
108
|
+
e3fwne: "f3znvyf",
|
|
101
109
|
J0r882: "f57olzd",
|
|
102
110
|
Bule8hv: ["f4stah7", "fs1por5"],
|
|
103
111
|
Bjwuhne: "f480a47",
|
|
@@ -110,7 +118,11 @@ const useButtonStyles = /*#__PURE__*/__styles({
|
|
|
110
118
|
uwmqm3: ["f1b0r8ql", "f1w3695s"]
|
|
111
119
|
}
|
|
112
120
|
}, {
|
|
113
|
-
d: [".f122n59{align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:inline-flex;}", ".f4d9j23{justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".f10pi13n{position:relative;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f16u1re .fui-Icon-filled{display:none;}", ".f1rw4040 .fui-Icon-regular{display:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{display:inline-flex;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}",
|
|
121
|
+
d: [".f122n59{align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:inline-flex;}", ".f4d9j23{justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".f10pi13n{position:relative;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f16u1re .fui-Icon-filled{display:none;}", ".f1rw4040 .fui-Icon-regular{display:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{display:inline-flex;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".ffwy5si[data-fui-focus-visible]::after{border:2px solid var(--colorStrokeFocus2);}", {
|
|
122
|
+
p: -2
|
|
123
|
+
}], [".f3znvyf[data-fui-focus-visible]::after{border-radius:var(--borderRadiusMedium);}", {
|
|
124
|
+
p: -1
|
|
125
|
+
}], ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".f1w3695s{padding-right:var(--spacingVerticalXXS);}", ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"],
|
|
114
126
|
h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f8491dx:hover{cursor:pointer;}", ".f1jpd6y0:hover .fui-Icon-filled{display:inline-flex;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
|
|
115
127
|
m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
|
|
116
128
|
m: "(forced-colors: active)"
|
|
@@ -162,8 +174,8 @@ export const useInfoButtonStyles_unstable = state => {
|
|
|
162
174
|
} = state.popover;
|
|
163
175
|
const buttonStyles = useButtonStyles();
|
|
164
176
|
const popoverSurfaceStyles = usePopoverSurfaceStyles();
|
|
177
|
+
// eslint-disable-next-line react-compiler/react-compiler
|
|
165
178
|
state.info.className = mergeClasses(infoButtonClassNames.info, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
|
|
166
179
|
state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
|
|
167
180
|
return state;
|
|
168
|
-
};
|
|
169
|
-
//# sourceMappingURL=useInfoButtonStyles.styles.js.map
|
|
181
|
+
};
|
|
@@ -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","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","D0sxk3","t6yez3","Jwef8y","Bi91k9c","eoavqd","Bk3fhr4","Bmfj8id","iro3zm","B2d53fq","selected","Bsw6fvg","Bbusuzp","highContrast","Bs6v0vm","B46dtvo","gh1jta","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bb7d1vk","zhwhgb","dhy2o1","Gfyso","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","
|
|
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","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","D0sxk3","t6yez3","Jwef8y","Bi91k9c","eoavqd","Bk3fhr4","Bmfj8id","iro3zm","B2d53fq","selected","Bsw6fvg","Bbusuzp","highContrast","Bs6v0vm","B46dtvo","gh1jta","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bb7d1vk","zhwhgb","dhy2o1","Gfyso","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","large","d","p","h","m","f","i","usePopoverSurfaceStyles","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */ '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';\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */ export 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 *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\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 ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.margin(0),\n ...shorthands.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 ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS)\n }\n});\nconst usePopoverSurfaceStyles = makeStyles({\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 const { size } = state;\n const { open } = state.popover;\n const buttonStyles = useButtonStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n // eslint-disable-next-line react-compiler/react-compiler\n state.info.className = mergeClasses(infoButtonClassNames.info, 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":"AAAA,qDAAsD,YAAY;;AAClE,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAG;EACpCC,IAAI,EAAE,gBAAgB;EACtB;EACAC,OAAO,EAAE,yBAAyB;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AACA;AACA;AAAI,MAAMC,eAAe,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAA3B,MAAA;IAAAC,MAAA;IAAAiB,MAAA;IAAAC,MAAA;IAAAS,OAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAD,OAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAA7D,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAA2D,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAiE3B,CAAC;AACF,MAAMC,uBAAuB,gBAAGpG,QAAA;EAAAqG,WAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAZ,KAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAX,CAAA;AAAA,CAG/B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMY,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAM;IAAEC;EAAK,CAAC,GAAGD,KAAK;EACtB,MAAM;IAAEE;EAAK,CAAC,GAAGF,KAAK,CAACpG,OAAO;EAC9B,MAAMuG,YAAY,GAAGrG,eAAe,CAAC,CAAC;EACtC,MAAMsG,oBAAoB,GAAGX,uBAAuB,CAAC,CAAC;EACtD;EACAO,KAAK,CAACnG,IAAI,CAACwG,SAAS,GAAG/G,YAAY,CAACI,oBAAoB,CAACG,IAAI,EAAEoG,IAAI,KAAK,OAAO,GAAGG,oBAAoB,CAAClB,KAAK,GAAGkB,oBAAoB,CAACV,WAAW,EAAEM,KAAK,CAACnG,IAAI,CAACwG,SAAS,CAAC;EACtKL,KAAK,CAACrG,IAAI,CAAC0G,SAAS,GAAG/G,YAAY,CAACI,oBAAoB,CAACC,IAAI,EAAEwG,YAAY,CAACpG,IAAI,EAAEoG,YAAY,CAAC9D,YAAY,EAAE8D,YAAY,CAAC1D,cAAc,EAAEyD,IAAI,IAAIC,YAAY,CAACjE,QAAQ,EAAE+D,IAAI,KAAK,OAAO,IAAIE,YAAY,CAACjB,KAAK,EAAEc,KAAK,CAACrG,IAAI,CAAC0G,SAAS,CAAC;EACtO,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
|
|
2
|
+
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
3
|
+
import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
|
|
4
|
+
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
|
|
5
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
6
|
+
/**
|
|
7
|
+
* @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
|
|
8
|
+
*/ export const infoButtonClassNames = {
|
|
9
|
+
root: 'fui-InfoButton',
|
|
10
|
+
// this className won't be used, but it's needed to satisfy the type checker
|
|
11
|
+
popover: 'fui-InfoButton__popover',
|
|
12
|
+
info: 'fui-InfoButton__info'
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* Styles for the root slot
|
|
16
|
+
*
|
|
17
|
+
* @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
|
|
18
|
+
*/ const useButtonStyles = makeStyles({
|
|
19
|
+
base: {
|
|
20
|
+
alignItems: 'center',
|
|
21
|
+
boxSizing: 'border-box',
|
|
22
|
+
display: 'inline-flex',
|
|
23
|
+
justifyContent: 'center',
|
|
24
|
+
textDecorationLine: 'none',
|
|
25
|
+
verticalAlign: 'middle',
|
|
26
|
+
position: 'relative',
|
|
27
|
+
backgroundColor: tokens.colorTransparentBackground,
|
|
28
|
+
color: tokens.colorNeutralForeground2,
|
|
29
|
+
...shorthands.borderStyle('none'),
|
|
30
|
+
...shorthands.borderRadius(tokens.borderRadiusMedium),
|
|
31
|
+
...shorthands.margin(0),
|
|
32
|
+
...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),
|
|
33
|
+
[`& .${iconFilledClassName}`]: {
|
|
34
|
+
display: 'none'
|
|
35
|
+
},
|
|
36
|
+
[`& .${iconRegularClassName}`]: {
|
|
37
|
+
display: 'inline-flex'
|
|
38
|
+
},
|
|
39
|
+
':hover': {
|
|
40
|
+
backgroundColor: tokens.colorTransparentBackgroundHover,
|
|
41
|
+
color: tokens.colorNeutralForeground2BrandHover,
|
|
42
|
+
cursor: 'pointer',
|
|
43
|
+
[`& .${iconFilledClassName}`]: {
|
|
44
|
+
display: 'inline-flex'
|
|
45
|
+
},
|
|
46
|
+
[`& .${iconRegularClassName}`]: {
|
|
47
|
+
display: 'none'
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
':hover:active': {
|
|
51
|
+
backgroundColor: tokens.colorTransparentBackgroundPressed,
|
|
52
|
+
color: tokens.colorNeutralForeground2BrandPressed
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
selected: {
|
|
56
|
+
backgroundColor: tokens.colorTransparentBackgroundSelected,
|
|
57
|
+
color: tokens.colorNeutralForeground2BrandSelected,
|
|
58
|
+
[`& .${iconFilledClassName}`]: {
|
|
59
|
+
display: 'inline-flex'
|
|
60
|
+
},
|
|
61
|
+
[`& .${iconRegularClassName}`]: {
|
|
62
|
+
display: 'none'
|
|
63
|
+
},
|
|
64
|
+
'@media (forced-colors: active)': {
|
|
65
|
+
backgroundColor: 'Highlight',
|
|
66
|
+
color: 'Canvas'
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
highContrast: {
|
|
70
|
+
'@media (forced-colors: active)': {
|
|
71
|
+
color: 'CanvasText',
|
|
72
|
+
':hover,:hover:active': {
|
|
73
|
+
forcedColorAdjust: 'none',
|
|
74
|
+
backgroundColor: 'Highlight',
|
|
75
|
+
color: 'Canvas'
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
focusIndicator: createFocusOutlineStyle(),
|
|
80
|
+
large: {
|
|
81
|
+
...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS)
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
const usePopoverSurfaceStyles = makeStyles({
|
|
85
|
+
smallMedium: typographyStyles.caption1,
|
|
86
|
+
large: typographyStyles.body1
|
|
87
|
+
});
|
|
88
|
+
/**
|
|
89
|
+
* Apply styling to the InfoButton slots based on the state
|
|
90
|
+
*/ export const useInfoButtonStyles_unstable = (state)=>{
|
|
91
|
+
const { size } = state;
|
|
92
|
+
const { open } = state.popover;
|
|
93
|
+
const buttonStyles = useButtonStyles();
|
|
94
|
+
const popoverSurfaceStyles = usePopoverSurfaceStyles();
|
|
95
|
+
// eslint-disable-next-line react-compiler/react-compiler
|
|
96
|
+
state.info.className = mergeClasses(infoButtonClassNames.info, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
|
|
97
|
+
state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
|
|
98
|
+
return state;
|
|
99
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'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\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\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 *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\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 ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.margin(0),\n ...shorthands.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 ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS),\n },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\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 const { size } = state;\n const { open } = state.popover;\n const buttonStyles = useButtonStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n // eslint-disable-next-line react-compiler/react-compiler\n state.info.className = mergeClasses(\n infoButtonClassNames.info,\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","smallMedium","caption1","body1","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
/* eslint-disable
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
|
|
2
|
+
import * as React from 'react';
|
|
2
3
|
import { renderInfoLabel_unstable } from './renderInfoLabel';
|
|
3
4
|
import { useInfoLabel_unstable } from './useInfoLabel';
|
|
4
5
|
import { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["InfoLabel.tsx"],"sourcesContent":["/* eslint-disable
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoLabel/InfoLabel.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'use client';\n\nimport * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { InfoLabelProps } from './InfoLabel.types';\nimport { renderInfoLabel_unstable } from './renderInfoLabel';\nimport { useInfoLabel_unstable } from './useInfoLabel';\nimport { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n\n/**\n * InfoLabel component\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n const state = useInfoLabel_unstable(props, ref);\n\n useInfoLabelStyles_unstable(state);\n return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"names":["React","renderInfoLabel_unstable","useInfoLabel_unstable","useInfoLabelStyles_unstable","InfoLabel","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,mDAAmD,GAEnD;AAEA,YAAYA,WAAW,QAAQ;AAI/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E;;;;CAIC,GACD,OAAO,MAAMC,0BAAiDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,sBAAsBI,OAAOC;IAE3CJ,4BAA4BK;IAC5B,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
|
|
@@ -1 +1,5 @@
|
|
|
1
|
-
/* eslint-disable
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ /**
|
|
2
|
+
* State used in rendering InfoLabel
|
|
3
|
+
*
|
|
4
|
+
* @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
|
|
5
|
+
*/ export { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["InfoLabel.types.ts"],"sourcesContent":["/* eslint-disable
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoLabel/InfoLabel.types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nimport { Label } from '@fluentui/react-label';\nimport { InfoButton } from '../InfoButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { InfoButtonProps } from '../InfoButton';\n\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\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 *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\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 *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;\n"],"names":[],"mappings":"AAAA,mDAAmD,GA2CnD;;;;CAIC,GACD,WAA2F"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export * from './useInfoLabelStyles.styles';
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ export { InfoLabel } from './InfoLabel';
|
|
2
|
+
export { renderInfoLabel_unstable } from './renderInfoLabel';
|
|
3
|
+
export { useInfoLabel_unstable } from './useInfoLabel';
|
|
4
|
+
export { infoLabelClassNames, useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoLabel/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport { InfoLabel } from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\nexport { renderInfoLabel_unstable } from './renderInfoLabel';\nexport { useInfoLabel_unstable } from './useInfoLabel';\nexport { infoLabelClassNames, useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n"],"names":["InfoLabel","renderInfoLabel_unstable","useInfoLabel_unstable","infoLabelClassNames","useInfoLabelStyles_unstable"],"mappings":"AAAA,mDAAmD,GACnD,SAASA,SAAS,QAAQ,cAAc;AAExC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* eslint-disable
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
2
|
import { assertSlots } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of InfoLabel
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderInfoLabel.tsx"],"sourcesContent":["/* eslint-disable
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoLabel/renderInfoLabel.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport type * as React from 'react';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Render the final JSX of InfoLabel\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const renderInfoLabel_unstable = (state: InfoLabelState): React.ReactElement => {\n assertSlots<InfoLabelSlots>(state);\n\n return (\n <state.root>\n <state.label />\n {state.infoButton && <state.infoButton />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderInfoLabel_unstable","state","root","label","infoButton"],"mappings":"AAAA,mDAAmD,GACnD,0BAA0B,GAC1B,iDAAiD;AAGjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;;;AAG5C,EAAE"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
/* eslint-disable
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
|
|
2
|
+
import * as React from 'react';
|
|
2
3
|
import { Label } from '@fluentui/react-label';
|
|
3
4
|
import { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';
|
|
4
5
|
import { InfoButton } from '../InfoButton/InfoButton';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInfoLabel.ts"],"sourcesContent":["/* eslint-disable
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'use client';\n\nimport * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton/InfoButton';\nimport type { InfoLabelProps, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Create the state required to render InfoLabel.\n *\n * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,\n * before being passed to renderInfoLabel_unstable.\n *\n * @param props - props from this instance of InfoLabel\n * @param ref - reference to label element of InfoLabel\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTMLLabelElement>): InfoLabelState => {\n const {\n root: rootShorthand,\n label: labelShorthand,\n infoButton: infoButtonShorthand,\n info,\n size,\n className,\n style,\n ...labelProps\n } = props;\n const baseId = useId('infolabel-');\n const [open, setOpen] = React.useState(false);\n\n const root = slot.always(rootShorthand, {\n defaultProps: {\n className,\n style,\n },\n elementType: 'span',\n });\n\n const label = slot.always(labelShorthand, {\n defaultProps: {\n id: baseId + '__label',\n ref,\n size,\n ...labelProps,\n },\n elementType: Label,\n });\n\n const infoButton = slot.optional(infoButtonShorthand, {\n renderByDefault: !!info,\n defaultProps: {\n id: baseId + '__infoButton',\n size,\n info,\n },\n elementType: InfoButton,\n });\n\n const infoButtonPopover = slot.always(infoButton?.popover, {\n elementType: 'div',\n });\n infoButtonPopover.onOpenChange = useEventCallback(\n mergeCallbacks(infoButtonPopover.onOpenChange, (e, data) => {\n setOpen(data.open);\n }),\n );\n\n if (infoButton) {\n infoButton.popover = infoButtonPopover;\n infoButton.info = slot.optional(infoButton?.info, {\n defaultProps: {\n id: baseId + '__info',\n },\n elementType: 'div',\n });\n\n infoButton['aria-labelledby'] ??= `${label.id} ${infoButton.id}`;\n\n if (open) {\n root['aria-owns'] ??= infoButton.info?.id;\n }\n }\n\n return {\n size,\n components: {\n root: 'span',\n label: Label,\n infoButton: InfoButton,\n },\n root,\n label,\n infoButton,\n };\n};\n"],"names":["React","Label","mergeCallbacks","useEventCallback","useId","slot","InfoButton","useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","info","size","className","style","labelProps","baseId","open","setOpen","useState","always","defaultProps","elementType","id","optional","renderByDefault","infoButtonPopover","popover","onOpenChange","e","data","components"],"mappings":"AAAA,mDAAmD,GAEnD;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EACJC,MAAMC,aAAa,EACnBC,OAAOC,cAAc,EACrBC,YAAYC,mBAAmB,EAC/BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,YACJ,GAAGZ;IACJ,MAAMa,SAASjB,MAAM;IACrB,MAAM,CAACkB,MAAMC,QAAQ,GAAGvB,MAAMwB,QAAQ,CAAC;IAEvC,MAAMd,OAAOL,KAAKoB,MAAM,CAACd,eAAe;QACtCe,cAAc;YACZR;YACAC;QACF;QACAQ,aAAa;IACf;IAEA,MAAMf,QAAQP,KAAKoB,MAAM,CAACZ,gBAAgB;QACxCa,cAAc;YACZE,IAAIP,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;QACAO,aAAa1B;IACf;IAEA,MAAMa,aAAaT,KAAKwB,QAAQ,CAACd,qBAAqB;QACpDe,iBAAiB,CAAC,CAACd;QACnBU,cAAc;YACZE,IAAIP,SAAS;YACbJ;YACAD;QACF;QACAW,aAAarB;IACf;IAEA,MAAMyB,oBAAoB1B,KAAKoB,MAAM,CAACX,uBAAAA,iCAAAA,WAAYkB,OAAO,EAAE;QACzDL,aAAa;IACf;IACAI,kBAAkBE,YAAY,GAAG9B,iBAC/BD,eAAe6B,kBAAkBE,YAAY,EAAE,CAACC,GAAGC;QACjDZ,QAAQY,KAAKb,IAAI;IACnB;IAGF,IAAIR,YAAY;YASdA,aAAW;QARXA,WAAWkB,OAAO,GAAGD;QACrBjB,WAAWE,IAAI,GAAGX,KAAKwB,QAAQ,CAACf,uBAAAA,iCAAAA,WAAYE,IAAI,EAAE;YAChDU,cAAc;gBACZE,IAAIP,SAAS;YACf;YACAM,aAAa;QACf;;QAEAb,MAAAA,cAAAA,WAAU,CAAC,kBAAA,kBAAkB,iCAA7BA,WAAU,CAAC,gBAAkB,GAAK,GAAGF,MAAMgB,EAAE,CAAC,CAAC,EAAEd,WAAWc,EAAE,EAAE;QAEhE,IAAIN,MAAM;gBACcR;gBAAtBJ,OAAK;;YAALA,OAAAA,QAAAA,KAAI,CAAC,YAAA,YAAY,mCAAjBA,KAAI,CAAC,UAAY,IAAKI,mBAAAA,WAAWE,IAAI,cAAfF,uCAAAA,iBAAiBc,EAAE;QAC3C;IACF;IAEA,OAAO;QACLX;QACAmB,YAAY;YACV1B,MAAM;YACNE,OAAOX;YACPa,YAAYR;QACd;QACAI;QACAE;QACAE;IACF;AACF,EAAE"}
|