@fluentui/react-infobutton 9.0.0-beta.11 → 9.0.0-beta.110

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/CHANGELOG.md +1224 -5
  2. package/README.md +3 -24
  3. package/dist/index.d.ts +115 -9
  4. package/lib/InfoButton.js +1 -2
  5. package/lib/InfoButton.js.map +1 -1
  6. package/lib/InfoLabel.js +1 -0
  7. package/lib/InfoLabel.js.map +1 -0
  8. package/lib/components/InfoButton/DefaultInfoButtonIcons.js +3 -4
  9. package/lib/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
  10. package/lib/components/InfoButton/InfoButton.js +8 -7
  11. package/lib/components/InfoButton/InfoButton.js.map +1 -1
  12. package/lib/components/InfoButton/InfoButton.types.js +5 -2
  13. package/lib/components/InfoButton/InfoButton.types.js.map +1 -1
  14. package/lib/components/InfoButton/index.js +4 -6
  15. package/lib/components/InfoButton/index.js.map +1 -1
  16. package/lib/components/InfoButton/renderInfoButton.js +14 -16
  17. package/lib/components/InfoButton/renderInfoButton.js.map +1 -1
  18. package/lib/components/InfoButton/useInfoButton.js +71 -50
  19. package/lib/components/InfoButton/useInfoButton.js.map +1 -1
  20. package/lib/components/InfoButton/useInfoButtonStyles.styles.js +181 -0
  21. package/lib/components/InfoButton/useInfoButtonStyles.styles.js.map +1 -0
  22. package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js +99 -0
  23. package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -0
  24. package/lib/components/InfoLabel/InfoLabel.js +15 -0
  25. package/lib/components/InfoLabel/InfoLabel.js.map +1 -0
  26. package/lib/components/InfoLabel/InfoLabel.types.js +5 -0
  27. package/lib/components/InfoLabel/InfoLabel.types.js.map +1 -0
  28. package/lib/components/InfoLabel/index.js +4 -0
  29. package/lib/components/InfoLabel/index.js.map +1 -0
  30. package/lib/components/InfoLabel/renderInfoLabel.js +15 -0
  31. package/lib/components/InfoLabel/renderInfoLabel.js.map +1 -0
  32. package/lib/components/InfoLabel/useInfoLabel.js +80 -0
  33. package/lib/components/InfoLabel/useInfoLabel.js.map +1 -0
  34. package/lib/components/InfoLabel/useInfoLabelStyles.styles.js +50 -0
  35. package/lib/components/InfoLabel/useInfoLabelStyles.styles.js.map +1 -0
  36. package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js +45 -0
  37. package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -0
  38. package/lib/index.js +2 -2
  39. package/lib/index.js.map +1 -1
  40. package/lib-commonjs/InfoButton.js +26 -6
  41. package/lib-commonjs/InfoButton.js.map +1 -1
  42. package/lib-commonjs/InfoLabel.js +28 -0
  43. package/lib-commonjs/InfoLabel.js.map +1 -0
  44. package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js +22 -8
  45. package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
  46. package/lib-commonjs/components/InfoButton/InfoButton.js +18 -16
  47. package/lib-commonjs/components/InfoButton/InfoButton.js.map +1 -1
  48. package/lib-commonjs/components/InfoButton/InfoButton.types.js +6 -4
  49. package/lib-commonjs/components/InfoButton/InfoButton.types.js.map +1 -1
  50. package/lib-commonjs/components/InfoButton/index.js +29 -10
  51. package/lib-commonjs/components/InfoButton/index.js.map +1 -1
  52. package/lib-commonjs/components/InfoButton/renderInfoButton.js +21 -24
  53. package/lib-commonjs/components/InfoButton/renderInfoButton.js.map +1 -1
  54. package/lib-commonjs/components/InfoButton/useInfoButton.js +80 -65
  55. package/lib-commonjs/components/InfoButton/useInfoButton.js.map +1 -1
  56. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js +350 -0
  57. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js.map +1 -0
  58. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js +113 -0
  59. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -0
  60. package/lib-commonjs/components/InfoLabel/InfoLabel.js +22 -0
  61. package/lib-commonjs/components/InfoLabel/InfoLabel.js.map +1 -0
  62. package/lib-commonjs/components/InfoLabel/InfoLabel.types.js +8 -0
  63. package/lib-commonjs/components/InfoLabel/InfoLabel.types.js.map +1 -0
  64. package/lib-commonjs/components/InfoLabel/index.js +31 -0
  65. package/lib-commonjs/components/InfoLabel/index.js.map +1 -0
  66. package/lib-commonjs/components/InfoLabel/renderInfoLabel.js +21 -0
  67. package/lib-commonjs/components/InfoLabel/renderInfoLabel.js.map +1 -0
  68. package/lib-commonjs/components/InfoLabel/useInfoLabel.js +81 -0
  69. package/lib-commonjs/components/InfoLabel/useInfoLabel.js.map +1 -0
  70. package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js +68 -0
  71. package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js.map +1 -0
  72. package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js +57 -0
  73. package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -0
  74. package/lib-commonjs/index.js +41 -35
  75. package/lib-commonjs/index.js.map +1 -1
  76. package/package.json +22 -33
  77. package/CHANGELOG.json +0 -342
  78. package/lib/components/InfoButton/useInfoButtonStyles.js +0 -153
  79. package/lib/components/InfoButton/useInfoButtonStyles.js.map +0 -1
  80. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.js +0 -160
  81. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.js.map +0 -1
package/README.md CHANGED
@@ -2,28 +2,7 @@
2
2
 
3
3
  **React Infobutton components for [Fluent UI React](https://react.fluentui.dev/)**
4
4
 
5
- ## STATUS: WIP 🚧
5
+ # STATUS: Deprecated 🚧
6
6
 
7
- These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
8
-
9
- ## Usage
10
-
11
- To import InfoButton:
12
-
13
- ```js
14
- import { InfoButton } from '@fluentui/react-infobutton';
15
- ```
16
-
17
- Once the InfoButton component graduates to a production release, the component will be available at:
18
-
19
- ```js
20
- import { InfoButton } from '@fluentui/react-components';
21
- ```
22
-
23
- ### Examples
24
-
25
- ```jsx
26
- const InfoButtonExample = () => {
27
- return <InfoButton content="This is an InfoButton's content." />;
28
- };
29
- ```
7
+ This package has been deprecated and must no longer be used. We now provide an InfoLabel component in `@fluentui/react-components` and in `@fluentui/react-infolabel`.
8
+ Please refer to these packages if the component is needed.
package/dist/index.d.ts CHANGED
@@ -1,8 +1,7 @@
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';
4
+ import { Label } from '@fluentui/react-label';
6
5
  import type { PopoverProps } from '@fluentui/react-popover';
7
6
  import type { PopoverSurface } from '@fluentui/react-popover';
8
7
  import * as React_2 from 'react';
@@ -11,44 +10,129 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
11
10
 
12
11
  /**
13
12
  * InfoButtons provide a way to display additional information about a form field or an area in the UI.
13
+ *
14
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
14
15
  */
15
16
  export declare const InfoButton: ForwardRefComponent<InfoButtonProps>;
16
17
 
18
+ /**
19
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
20
+ */
17
21
  export declare const infoButtonClassNames: SlotClassNames<InfoButtonSlots>;
18
22
 
19
23
  /**
20
24
  * InfoButton Props
25
+ *
26
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
21
27
  */
22
- export declare type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {
28
+ export declare type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled' | 'popover'> & {
23
29
  /**
24
30
  * Size of the InfoButton.
25
31
  *
26
32
  * @default medium
27
33
  */
28
34
  size?: 'small' | 'medium' | 'large';
35
+ /**
36
+ * Whether the InfoButton should be rendered inline or on a Portal.
37
+ *
38
+ * @default true
39
+ */
40
+ inline?: boolean;
41
+ /**
42
+ * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.
43
+ */
44
+ popover?: InfoButtonSlots['popover'];
29
45
  };
30
46
 
47
+ /**
48
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
49
+ */
31
50
  export declare type InfoButtonSlots = {
32
51
  root: NonNullable<Slot<'button'>>;
33
52
  /**
34
- * The Popover element that wraps the content and root. Use this slot to pass props to the Popover.
53
+ * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.
35
54
  */
36
- popover: NonNullable<Slot<Partial<PopoverProps>>>;
55
+ popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;
37
56
  /**
38
- * The content to be displayed in the PopoverSurface when the button is pressed.
57
+ * The information to be displayed in the PopoverSurface when the button is pressed.
39
58
  */
40
- content: NonNullable<Slot<typeof PopoverSurface>>;
59
+ info: NonNullable<Slot<typeof PopoverSurface>>;
41
60
  };
42
61
 
43
62
  /**
44
63
  * State used in rendering InfoButton
64
+ *
65
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
66
+ */
67
+ export declare type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;
68
+
69
+ /**
70
+ * InfoLabel component
71
+ *
72
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
73
+ */
74
+ export declare const InfoLabel: ForwardRefComponent<InfoLabelProps>;
75
+
76
+ /**
77
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
78
+ */
79
+ export declare const infoLabelClassNames: SlotClassNames<InfoLabelSlots>;
80
+
81
+ /**
82
+ * InfoLabel Props
83
+ *
84
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
85
+ */
86
+ export declare type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {
87
+ /**
88
+ * The content of the InfoButton's popover.
89
+ */
90
+ info?: InfoButtonProps['info'];
91
+ };
92
+
93
+ /**
94
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
45
95
  */
46
- export declare type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'size'>>;
96
+ export declare type InfoLabelSlots = {
97
+ root: NonNullable<Slot<'span'>>;
98
+ /**
99
+ * The Label component.
100
+ *
101
+ * It is not typically necessary to use this prop. The label text is the child of the `<InfoLabel>`, and other props
102
+ * such as `size` and `required` should be set directly on the `InfoLabel`.
103
+ *
104
+ * This is the PRIMARY slot: all native properties specified directly on `<InfoLabel>` will be applied to this slot,
105
+ * except `className` and `style`, which remain on the root slot.
106
+ */
107
+ label: NonNullable<Slot<typeof Label>>;
108
+ /**
109
+ * The InfoButton component.
110
+ *
111
+ * It is not typically necessary to use this prop. The content can be set using the `info` prop of the InfoLabel.
112
+ */
113
+ infoButton: Slot<typeof InfoButton>;
114
+ };
115
+
116
+ /**
117
+ * State used in rendering InfoLabel
118
+ *
119
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
120
+ */
121
+ export declare type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;
47
122
 
48
123
  /**
49
124
  * Render the final JSX of InfoButton
125
+ *
126
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
50
127
  */
51
- export declare const renderInfoButton_unstable: (state: InfoButtonState) => JSX.Element;
128
+ export declare const renderInfoButton_unstable: (state: InfoButtonState) => React_2.ReactElement;
129
+
130
+ /**
131
+ * Render the final JSX of InfoLabel
132
+ *
133
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
134
+ */
135
+ export declare const renderInfoLabel_unstable: (state: InfoLabelState) => React_2.ReactElement;
52
136
 
53
137
  /**
54
138
  * Create the state required to render InfoButton.
@@ -58,6 +142,8 @@ export declare const renderInfoButton_unstable: (state: InfoButtonState) => JSX.
58
142
  *
59
143
  * @param props - props from this instance of InfoButton
60
144
  * @param ref - reference to root HTMLElement of InfoButton
145
+ *
146
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
61
147
  */
62
148
  export declare const useInfoButton_unstable: (props: InfoButtonProps, ref: React_2.Ref<HTMLElement>) => InfoButtonState;
63
149
 
@@ -66,4 +152,24 @@ export declare const useInfoButton_unstable: (props: InfoButtonProps, ref: React
66
152
  */
67
153
  export declare const useInfoButtonStyles_unstable: (state: InfoButtonState) => InfoButtonState;
68
154
 
155
+ /**
156
+ * Create the state required to render InfoLabel.
157
+ *
158
+ * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,
159
+ * before being passed to renderInfoLabel_unstable.
160
+ *
161
+ * @param props - props from this instance of InfoLabel
162
+ * @param ref - reference to label element of InfoLabel
163
+ *
164
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
165
+ */
166
+ export declare const useInfoLabel_unstable: (props: InfoLabelProps, ref: React_2.Ref<HTMLLabelElement>) => InfoLabelState;
167
+
168
+ /**
169
+ * Apply styling to the InfoLabel slots based on the state
170
+ *
171
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
172
+ */
173
+ export declare const useInfoLabelStyles_unstable: (state: InfoLabelState) => InfoLabelState;
174
+
69
175
  export { }
package/lib/InfoButton.js CHANGED
@@ -1,2 +1 @@
1
- export * from './components/InfoButton/index';
2
- //# sourceMappingURL=InfoButton.js.map
1
+ /* eslint-disable @typescript-eslint/no-deprecated */ export { InfoButton, infoButtonClassNames, renderInfoButton_unstable, useInfoButtonStyles_unstable, useInfoButton_unstable } from './components/InfoButton/index';
@@ -1 +1 @@
1
- {"version":3,"file":"InfoButton.js","sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/InfoButton.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/InfoButton/index';\n"]}
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"}
@@ -0,0 +1 @@
1
+ /* eslint-disable @typescript-eslint/no-deprecated */ export { InfoLabel, infoLabelClassNames, renderInfoLabel_unstable, useInfoLabelStyles_unstable, useInfoLabel_unstable } from './components/InfoLabel/index';
@@ -0,0 +1 @@
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,5 +1,4 @@
1
1
  import { Info12Regular, Info12Filled, Info16Regular, Info16Filled, Info20Regular, Info20Filled, bundleIcon } from '@fluentui/react-icons';
2
- export const DefaultInfoButtonIcon12 = /*#__PURE__*/bundleIcon(Info12Filled, Info12Regular);
3
- export const DefaultInfoButtonIcon16 = /*#__PURE__*/bundleIcon(Info16Filled, Info16Regular);
4
- export const DefaultInfoButtonIcon20 = /*#__PURE__*/bundleIcon(Info20Filled, Info20Regular);
5
- //# sourceMappingURL=DefaultInfoButtonIcons.js.map
2
+ export const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);
3
+ export const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);
4
+ export const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);
@@ -1 +1 @@
1
- {"version":3,"mappings":"AAAA,SACEA,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,UAAU,QACL,uBAAuB;AAE9B,OAAO,MAAMC,uBAAuB,gBAAGD,UAAU,CAACL,YAAY,EAAED,aAAa,CAAC;AAC9E,OAAO,MAAMQ,uBAAuB,gBAAGF,UAAU,CAACH,YAAY,EAAED,aAAa,CAAC;AAC9E,OAAO,MAAMO,uBAAuB,gBAAGH,UAAU,CAACD,YAAY,EAAED,aAAa,CAAC","names":["Info12Regular","Info12Filled","Info16Regular","Info16Filled","Info20Regular","Info20Filled","bundleIcon","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/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"]}
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,14 +1,15 @@
1
+ /* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
1
2
  import * as React from 'react';
2
3
  import { renderInfoButton_unstable } from './renderInfoButton';
3
4
  import { useInfoButton_unstable } from './useInfoButton';
4
- import { useInfoButtonStyles_unstable } from './useInfoButtonStyles';
5
+ import { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';
5
6
  /**
6
7
  * InfoButtons provide a way to display additional information about a form field or an area in the UI.
7
- */
8
- export const InfoButton = /*#__PURE__*/React.forwardRef((props, ref) => {
9
- const state = useInfoButton_unstable(props, ref);
10
- useInfoButtonStyles_unstable(state);
11
- return renderInfoButton_unstable(state);
8
+ *
9
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
10
+ */ export const InfoButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
11
+ const state = useInfoButton_unstable(props, ref);
12
+ useInfoButtonStyles_unstable(state);
13
+ return renderInfoButton_unstable(state);
12
14
  });
13
15
  InfoButton.displayName = 'InfoButton';
14
- //# sourceMappingURL=InfoButton.js.map
@@ -1 +1 @@
1
- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,4BAA4B,QAAQ,uBAAuB;AAGpE;;;AAGA,OAAO,MAAMC,UAAU,gBAAyCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGN,sBAAsB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAEhDJ,4BAA4B,CAACK,KAAK,CAAC;EACnC,OAAOP,yBAAyB,CAACO,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFJ,UAAU,CAACK,WAAW,GAAG,YAAY","names":["React","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["import * 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';\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 return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"]}
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,2 +1,5 @@
1
- export {};
2
- //# sourceMappingURL=InfoButton.types.js.map
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,"file":"InfoButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n root: NonNullable<Slot<'button'>>;\n\n /**\n * The Popover element that wraps the content and root. Use this slot to pass props to the Popover.\n */\n popover: NonNullable<Slot<Partial<PopoverProps>>>;\n\n /**\n * The content to be displayed in the PopoverSurface when the button is pressed.\n */\n content: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {\n /**\n * Size of the InfoButton.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'size'>>;\n"]}
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' | 'popover'> & {\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 * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n */\n popover?: InfoButtonSlots['popover'];\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,GA+CnD;;;;CAIC,GACD,WAAmH"}
@@ -1,6 +1,4 @@
1
- export * from './InfoButton';
2
- export * from './InfoButton.types';
3
- export * from './renderInfoButton';
4
- export * from './useInfoButton';
5
- export * from './useInfoButtonStyles';
6
- //# sourceMappingURL=index.js.map
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,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './InfoButton';\nexport * from './InfoButton.types';\nexport * from './renderInfoButton';\nexport * from './useInfoButton';\nexport * from './useInfoButtonStyles';\n"]}
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,20 +1,18 @@
1
- import * as React from 'react';
2
- import { getSlots } from '@fluentui/react-utilities';
1
+ /* eslint-disable @typescript-eslint/no-deprecated */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
2
+ import { assertSlots } from '@fluentui/react-utilities';
3
3
  import { PopoverTrigger } from '@fluentui/react-popover';
4
4
  /**
5
5
  * Render the final JSX of InfoButton
6
- */
7
- export const renderInfoButton_unstable = state => {
8
- const {
9
- slots,
10
- slotProps
11
- } = getSlots(state);
12
- return /*#__PURE__*/React.createElement(slots.popover, {
13
- ...slotProps.popover
14
- }, /*#__PURE__*/React.createElement(PopoverTrigger, null, /*#__PURE__*/React.createElement(slots.root, {
15
- ...slotProps.root
16
- })), /*#__PURE__*/React.createElement(slots.content, {
17
- ...slotProps.content
18
- }));
6
+ *
7
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
8
+ */ export const renderInfoButton_unstable = (state)=>{
9
+ assertSlots(state);
10
+ return /*#__PURE__*/ _jsxs(state.popover, {
11
+ children: [
12
+ /*#__PURE__*/ _jsx(PopoverTrigger, {
13
+ children: /*#__PURE__*/ _jsx(state.root, {})
14
+ }),
15
+ /*#__PURE__*/ _jsx(state.info, {})
16
+ ]
17
+ });
19
18
  };
20
- //# sourceMappingURL=renderInfoButton.js.map
@@ -1 +1 @@
1
- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,cAAc,QAAQ,yBAAyB;AAIxD;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAkBG,KAAK,CAAC;EAE7D,oBACEJ,oBAACK,KAAK,CAACE,OAAO;IAAA,GAAMD,SAAS,CAACC;EAAwB,gBACpDP,oBAACE,cAAc,qBACbF,oBAACK,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,EAAI,CACnB,eACjBR,oBAACK,KAAK,CAACI,OAAO;IAAA,GAAKH,SAAS,CAACG;EAAO,EAAI,CAC1B;AAEpB,CAAC","names":["React","getSlots","PopoverTrigger","renderInfoButton_unstable","state","slots","slotProps","popover","root","content"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { PopoverProps } from '@fluentui/react-popover';\nimport type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';\n\n/**\n * Render the final JSX of InfoButton\n */\nexport const renderInfoButton_unstable = (state: InfoButtonState) => {\n const { slots, slotProps } = getSlots<InfoButtonSlots>(state);\n\n return (\n <slots.popover {...(slotProps.popover as PopoverProps)}>\n <PopoverTrigger>\n <slots.root {...slotProps.root} />\n </PopoverTrigger>\n <slots.content {...slotProps.content} />\n </slots.popover>\n );\n};\n"]}
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,17 +1,17 @@
1
+ /* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
1
2
  import * as React from 'react';
2
3
  import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';
3
- import { getNativeElementProps, mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';
4
+ import { getIntrinsicElementProps, mergeCallbacks, useControllableState, slot, useMergedRefs, isHTMLElement, elementContains } from '@fluentui/react-utilities';
4
5
  import { Popover, PopoverSurface } from '@fluentui/react-popover';
5
- import { useControllableState } from '@fluentui/react-utilities';
6
6
  const infoButtonIconMap = {
7
- small: /*#__PURE__*/React.createElement(DefaultInfoButtonIcon12, null),
8
- medium: /*#__PURE__*/React.createElement(DefaultInfoButtonIcon16, null),
9
- large: /*#__PURE__*/React.createElement(DefaultInfoButtonIcon20, null)
7
+ small: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon12, null),
8
+ medium: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon16, null),
9
+ large: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon20, null)
10
10
  };
11
11
  const popoverSizeMap = {
12
- small: 'small',
13
- medium: 'small',
14
- large: 'medium'
12
+ small: 'small',
13
+ medium: 'small',
14
+ large: 'medium'
15
15
  };
16
16
  /**
17
17
  * Create the state required to render InfoButton.
@@ -21,46 +21,67 @@ const popoverSizeMap = {
21
21
  *
22
22
  * @param props - props from this instance of InfoButton
23
23
  * @param ref - reference to root HTMLElement of InfoButton
24
- */
25
- export const useInfoButton_unstable = (props, ref) => {
26
- const {
27
- size = 'medium'
28
- } = props;
29
- const state = {
30
- size,
31
- components: {
32
- root: 'button',
33
- popover: Popover,
34
- content: PopoverSurface
35
- },
36
- root: getNativeElementProps('button', {
37
- children: infoButtonIconMap[size],
38
- type: 'button',
39
- ...props,
40
- ref
41
- }),
42
- popover: resolveShorthand(props.popover, {
43
- required: true,
44
- defaultProps: {
45
- positioning: 'above-start',
46
- size: popoverSizeMap[size],
47
- withArrow: true
48
- }
49
- }),
50
- content: resolveShorthand(props.content, {
51
- required: true,
52
- defaultProps: {
53
- role: 'note'
54
- }
55
- })
56
- };
57
- const [popoverOpen, setPopoverOpen] = useControllableState({
58
- state: state.popover.open,
59
- defaultState: state.popover.defaultOpen,
60
- initialState: false
61
- });
62
- state.popover.open = popoverOpen;
63
- state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));
64
- return state;
24
+ *
25
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
26
+ */ export const useInfoButton_unstable = (props, ref)=>{
27
+ const { size = 'medium', inline = true, popover, info, ...rest } = props;
28
+ const state = {
29
+ inline,
30
+ size,
31
+ components: {
32
+ root: 'button',
33
+ popover: Popover,
34
+ info: PopoverSurface
35
+ },
36
+ root: slot.always(getIntrinsicElementProps('button', {
37
+ children: infoButtonIconMap[size],
38
+ type: 'button',
39
+ 'aria-label': 'information',
40
+ ...rest,
41
+ // FIXME:
42
+ // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`
43
+ // but since it would be a breaking change to fix it, we are casting ref to it's proper type
44
+ ref: ref
45
+ }), {
46
+ elementType: 'button'
47
+ }),
48
+ popover: slot.always(popover, {
49
+ defaultProps: {
50
+ inline,
51
+ positioning: 'above-start',
52
+ size: popoverSizeMap[size],
53
+ withArrow: true
54
+ },
55
+ elementType: Popover
56
+ }),
57
+ info: slot.always(info, {
58
+ defaultProps: {
59
+ role: 'note',
60
+ tabIndex: -1
61
+ },
62
+ elementType: PopoverSurface
63
+ })
64
+ };
65
+ const [popoverOpen, setPopoverOpen] = useControllableState({
66
+ state: state.popover.open,
67
+ defaultState: state.popover.defaultOpen,
68
+ initialState: false
69
+ });
70
+ state.popover.open = popoverOpen;
71
+ state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data)=>setPopoverOpen(data.open));
72
+ const focusOutRef = React.useCallback((el)=>{
73
+ if (!el) {
74
+ return;
75
+ }
76
+ el.addEventListener('focusout', (e)=>{
77
+ const nextFocused = e.relatedTarget;
78
+ if (isHTMLElement(nextFocused) && !elementContains(el, nextFocused)) {
79
+ setPopoverOpen(false);
80
+ }
81
+ });
82
+ }, [
83
+ setPopoverOpen
84
+ ]);
85
+ state.info.ref = useMergedRefs(state.info.ref, focusOutRef);
86
+ return state;
65
87
  };
66
- //# sourceMappingURL=useInfoButton.js.map
@@ -1 +1 @@
1
- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,0BAA0B;AACpH,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,gBAAgB,QAAQ,2BAA2B;AACnG,SAASC,OAAO,EAAEC,cAAc,QAAQ,yBAAyB;AACjE,SAASC,oBAAoB,QAAQ,2BAA2B;AAIhE,MAAMC,iBAAiB,GAAG;EACxBC,KAAK,eAAEX,oBAACC,uBAAuB,OAAG;EAClCW,MAAM,eAAEZ,oBAACE,uBAAuB,OAAG;EACnCW,KAAK,eAAEb,oBAACG,uBAAuB;CACvB;AAEV,MAAMW,cAAc,GAAG;EACrBH,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,OAAO;EACfC,KAAK,EAAE;CACC;AAEV;;;;;;;;;AASA,OAAO,MAAME,sBAAsB,GAAG,CAACC,KAAsB,EAAEC,GAA2B,KAAqB;EAC7G,MAAM;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGF,KAAK;EAEjC,MAAMG,KAAK,GAAoB;IAC7BD,IAAI;IAEJE,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdC,OAAO,EAAEf,OAA0C;MACnDgB,OAAO,EAAEf;KACV;IAEDa,IAAI,EAAEjB,qBAAqB,CAAC,QAAQ,EAAE;MACpCoB,QAAQ,EAAEd,iBAAiB,CAACQ,IAAI,CAAC;MACjCO,IAAI,EAAE,QAAQ;MACd,GAAGT,KAAK;MACRC;KACD,CAAC;IACFK,OAAO,EAAEhB,gBAAgB,CAACU,KAAK,CAACM,OAAO,EAAE;MACvCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,WAAW,EAAE,aAAa;QAC1BV,IAAI,EAAEJ,cAAc,CAACI,IAAI,CAAC;QAC1BW,SAAS,EAAE;;KAEd,CAAC;IACFN,OAAO,EAAEjB,gBAAgB,CAACU,KAAK,CAACO,OAAO,EAAE;MACvCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZG,IAAI,EAAE;;KAET;GACF;EAED,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGvB,oBAAoB,CAAC;IACzDU,KAAK,EAAEA,KAAK,CAACG,OAAO,CAACW,IAAI;IACzBC,YAAY,EAAEf,KAAK,CAACG,OAAO,CAACa,WAAW;IACvCC,YAAY,EAAE;GACf,CAAC;EAEFjB,KAAK,CAACG,OAAO,CAACW,IAAI,GAAGF,WAAW;EAChCZ,KAAK,CAACG,OAAO,CAACe,YAAY,GAAGhC,cAAc,CAACc,KAAK,CAACG,OAAO,CAACe,YAAY,EAAE,CAACC,CAAC,EAAEC,IAAI,KAAKP,cAAc,CAACO,IAAI,CAACN,IAAI,CAAC,CAAC;EAE/G,OAAOd,KAAK;AACd,CAAC","names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getNativeElementProps","mergeCallbacks","resolveShorthand","Popover","PopoverSurface","useControllableState","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","state","components","root","popover","content","children","type","required","defaultProps","positioning","withArrow","role","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { useControllableState } from '@fluentui/react-utilities';\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 */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {\n const { size = 'medium' } = props;\n\n const state: InfoButtonState = {\n size,\n\n components: {\n root: 'button',\n popover: Popover as React.FC<Partial<PopoverProps>>,\n content: PopoverSurface,\n },\n\n root: getNativeElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n ...props,\n ref,\n }),\n popover: resolveShorthand(props.popover, {\n required: true,\n defaultProps: {\n positioning: 'above-start',\n size: popoverSizeMap[size],\n withArrow: true,\n },\n }),\n content: resolveShorthand(props.content, {\n required: true,\n defaultProps: {\n role: 'note',\n },\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 return state;\n};\n"]}
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, popover, info, ...rest } = 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 ...rest,\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(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 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","popover","info","rest","state","components","root","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,EAAEC,OAAO,EAAEC,IAAI,EAAE,GAAGC,MAAM,GAAGN;IAEnE,MAAMO,QAAyB;QAC7BJ;QACAD;QAEAM,YAAY;YACVC,MAAM;YACNL,SAASZ;YACTa,MAAMZ;QACR;QAEAgB,MAAMrB,KAAKsB,MAAM,CACfzB,yBAAyB,UAAU;YACjC0B,UAAUjB,iBAAiB,CAACQ,KAAK;YACjCU,MAAM;YACN,cAAc;YACd,GAAGN,IAAI;YACP,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FL,KAAKA;QACP,IACA;YAAEY,aAAa;QAAS;QAE1BT,SAAShB,KAAKsB,MAAM,CAACN,SAAS;YAC5BU,cAAc;gBACZX;gBACAY,aAAa;gBACbb,MAAMJ,cAAc,CAACI,KAAK;gBAC1Bc,WAAW;YACb;YACAH,aAAarB;QACf;QACAa,MAAMjB,KAAKsB,MAAM,CAACL,MAAM;YACtBS,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAapB;QACf;IACF;IAEA,MAAM,CAAC0B,aAAaC,eAAe,GAAGjC,qBAAqB;QACzDoB,OAAOA,MAAMH,OAAO,CAACiB,IAAI;QACzBC,cAAcf,MAAMH,OAAO,CAACmB,WAAW;QACvCC,cAAc;IAChB;IAEAjB,MAAMH,OAAO,CAACiB,IAAI,GAAGF;IACrBZ,MAAMH,OAAO,CAACqB,YAAY,GAAGvC,eAAeqB,MAAMH,OAAO,CAACqB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,cAAc/C,MAAMgD,WAAW,CACnC,CAACC;QACC,IAAI,CAACA,IAAI;YACP;QACF;QAEAA,GAAGC,gBAAgB,CAAC,YAAYL,CAAAA;YAC9B,MAAMM,cAAcN,EAAEO,aAAa;YAEnC,IAAI3C,cAAc0C,gBAAgB,CAACzC,gBAAgBuC,IAAIE,cAAc;gBACnEZ,eAAe;YACjB;QACF;IACF,GACA;QAACA;KAAe;IAGlBb,MAAMF,IAAI,CAACJ,GAAG,GAAGZ,cAAckB,MAAMF,IAAI,CAACJ,GAAG,EAAE2B;IAE/C,OAAOrB;AACT,EAAE"}