@fluentui/react-label 9.0.0-alpha.9 → 9.0.0-beta.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (82) hide show
  1. package/CHANGELOG.json +1348 -1
  2. package/CHANGELOG.md +486 -2
  3. package/Spec.md +28 -31
  4. package/dist/react-label.d.ts +28 -45
  5. package/lib/Label.js.map +1 -1
  6. package/lib/common/isConformant.d.ts +1 -1
  7. package/lib/common/isConformant.js +7 -5
  8. package/lib/common/isConformant.js.map +1 -1
  9. package/lib/components/Label/Label.d.ts +3 -4
  10. package/lib/components/Label/Label.js +5 -5
  11. package/lib/components/Label/Label.js.map +1 -1
  12. package/lib/components/Label/Label.types.d.ts +17 -32
  13. package/lib/components/Label/Label.types.js.map +1 -1
  14. package/lib/components/Label/index.js.map +1 -1
  15. package/lib/components/Label/renderLabel.d.ts +1 -2
  16. package/lib/components/Label/renderLabel.js +7 -7
  17. package/lib/components/Label/renderLabel.js.map +1 -1
  18. package/lib/components/Label/useLabel.d.ts +3 -6
  19. package/lib/components/Label/useLabel.js +32 -36
  20. package/lib/components/Label/useLabel.js.map +1 -1
  21. package/lib/components/Label/useLabelStyles.d.ts +2 -1
  22. package/lib/components/Label/useLabelStyles.js +44 -35
  23. package/lib/components/Label/useLabelStyles.js.map +1 -1
  24. package/lib/index.js.map +1 -1
  25. package/lib/tsdoc-metadata.json +1 -1
  26. package/lib-commonjs/Label.js +7 -2
  27. package/lib-commonjs/Label.js.map +1 -1
  28. package/lib-commonjs/common/isConformant.d.ts +1 -1
  29. package/lib-commonjs/common/isConformant.js +16 -7
  30. package/lib-commonjs/common/isConformant.js.map +1 -1
  31. package/lib-commonjs/components/Label/Label.d.ts +3 -4
  32. package/lib-commonjs/components/Label/Label.js +18 -10
  33. package/lib-commonjs/components/Label/Label.js.map +1 -1
  34. package/lib-commonjs/components/Label/Label.types.d.ts +17 -32
  35. package/lib-commonjs/components/Label/Label.types.js +4 -1
  36. package/lib-commonjs/components/Label/Label.types.js.map +1 -1
  37. package/lib-commonjs/components/Label/index.js +11 -2
  38. package/lib-commonjs/components/Label/index.js.map +1 -1
  39. package/lib-commonjs/components/Label/renderLabel.d.ts +1 -2
  40. package/lib-commonjs/components/Label/renderLabel.js +19 -11
  41. package/lib-commonjs/components/Label/renderLabel.js.map +1 -1
  42. package/lib-commonjs/components/Label/useLabel.d.ts +3 -6
  43. package/lib-commonjs/components/Label/useLabel.js +40 -37
  44. package/lib-commonjs/components/Label/useLabel.js.map +1 -1
  45. package/lib-commonjs/components/Label/useLabelStyles.d.ts +2 -1
  46. package/lib-commonjs/components/Label/useLabelStyles.js +52 -37
  47. package/lib-commonjs/components/Label/useLabelStyles.js.map +1 -1
  48. package/lib-commonjs/index.js +7 -2
  49. package/lib-commonjs/index.js.map +1 -1
  50. package/package.json +14 -11
  51. package/config/api-extractor.json +0 -3
  52. package/config/tests.js +0 -7
  53. package/etc/react-label.api.md +0 -51
  54. package/just.config.ts +0 -3
  55. package/lib-amd/Label.d.ts +0 -1
  56. package/lib-amd/Label.js +0 -6
  57. package/lib-amd/Label.js.map +0 -1
  58. package/lib-amd/common/isConformant.d.ts +0 -4
  59. package/lib-amd/common/isConformant.js +0 -14
  60. package/lib-amd/common/isConformant.js.map +0 -1
  61. package/lib-amd/components/Label/Label.d.ts +0 -7
  62. package/lib-amd/components/Label/Label.js +0 -16
  63. package/lib-amd/components/Label/Label.js.map +0 -1
  64. package/lib-amd/components/Label/Label.types.d.ts +0 -53
  65. package/lib-amd/components/Label/Label.types.js +0 -5
  66. package/lib-amd/components/Label/Label.types.js.map +0 -1
  67. package/lib-amd/components/Label/index.d.ts +0 -5
  68. package/lib-amd/components/Label/index.js +0 -10
  69. package/lib-amd/components/Label/index.js.map +0 -1
  70. package/lib-amd/components/Label/renderLabel.d.ts +0 -6
  71. package/lib-amd/components/Label/renderLabel.js +0 -17
  72. package/lib-amd/components/Label/renderLabel.js.map +0 -1
  73. package/lib-amd/components/Label/useLabel.d.ts +0 -20
  74. package/lib-amd/components/Label/useLabel.js +0 -55
  75. package/lib-amd/components/Label/useLabel.js.map +0 -1
  76. package/lib-amd/components/Label/useLabelStyles.d.ts +0 -5
  77. package/lib-amd/components/Label/useLabelStyles.js +0 -49
  78. package/lib-amd/components/Label/useLabelStyles.js.map +0 -1
  79. package/lib-amd/index.d.ts +0 -2
  80. package/lib-amd/index.js +0 -6
  81. package/lib-amd/index.js.map +0 -1
  82. package/src/components/Label/Label.types.ts +0 -61
@@ -1,51 +0,0 @@
1
- ## API Report File for "@fluentui/react-label"
2
-
3
- > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
-
5
- ```ts
6
-
7
- import { ComponentProps } from '@fluentui/react-utilities';
8
- import { ComponentState } from '@fluentui/react-utilities';
9
- import { ObjectShorthandProps } from '@fluentui/react-utilities';
10
- import * as React_2 from 'react';
11
- import { ShorthandProps } from '@fluentui/react-utilities';
12
-
13
- // @public
14
- export const Label: React_2.ForwardRefExoticComponent<LabelProps & React_2.RefAttributes<HTMLElement>>;
15
-
16
- // @public
17
- export type LabelDefaultedProps = 'size';
18
-
19
- // @public
20
- export interface LabelProps extends ComponentProps, React_2.LabelHTMLAttributes<HTMLLabelElement> {
21
- disabled?: boolean;
22
- required?: boolean | ShorthandProps<ComponentProps>;
23
- size?: 'small' | 'medium' | 'large';
24
- strong?: boolean;
25
- }
26
-
27
- // @public
28
- export type LabelShorthandProps = 'required';
29
-
30
- // @public
31
- export const labelShorthandProps: LabelShorthandProps[];
32
-
33
- // @public
34
- export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
35
- ref: React_2.Ref<HTMLElement>;
36
- required?: ObjectShorthandProps<ComponentProps>;
37
- }
38
-
39
- // @public
40
- export const renderLabel: (state: LabelState) => JSX.Element;
41
-
42
- // @public
43
- export const useLabel: (props: LabelProps, ref: React_2.Ref<HTMLElement>, defaultProps?: LabelProps | undefined) => LabelState;
44
-
45
- // @public
46
- export const useLabelStyles: (state: LabelState) => LabelState;
47
-
48
-
49
- // (No @packageDocumentation comment for this package)
50
-
51
- ```
package/just.config.ts DELETED
@@ -1,3 +0,0 @@
1
- import { preset } from '@fluentui/scripts';
2
-
3
- preset();
@@ -1 +0,0 @@
1
- export * from './components/Label/index';
package/lib-amd/Label.js DELETED
@@ -1,6 +0,0 @@
1
- define(["require", "exports", "tslib", "./components/Label/index"], function (require, exports, tslib_1, index_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(index_1, exports);
5
- });
6
- //# sourceMappingURL=Label.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Label.js","sourceRoot":"../src/","sources":["Label.ts"],"names":[],"mappings":";;;IAAA,uCAAyC","sourcesContent":["export * from './components/Label/index';\n"]}
@@ -1,4 +0,0 @@
1
- import { IsConformantOptions } from '@fluentui/react-conformance';
2
- export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
3
- componentPath?: string;
4
- }): void;
@@ -1,14 +0,0 @@
1
- define(["require", "exports", "@fluentui/react-conformance"], function (require, exports, react_conformance_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.isConformant = void 0;
5
- function isConformant(testInfo) {
6
- var defaultOptions = {
7
- asPropHandlesRef: true,
8
- componentPath: module.parent.filename.replace('.test', ''),
9
- };
10
- react_conformance_1.isConformant(defaultOptions, testInfo);
11
- }
12
- exports.isConformant = isConformant;
13
- });
14
- //# sourceMappingURL=isConformant.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;;IAEA,SAAgB,YAAY,CAC1B,QAAyF;QAEzF,IAAM,cAAc,GAAyC;YAC3D,gBAAgB,EAAE,IAAI;YACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;SAC7D,CAAC;QAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IATD,oCASC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n asPropHandlesRef: true,\n componentPath: module!.parent!.filename.replace('.test', ''),\n };\n\n baseIsConformant(defaultOptions, testInfo);\n}\n"]}
@@ -1,7 +0,0 @@
1
- import * as React from 'react';
2
- import { LabelProps } from './Label.types';
3
- /**
4
- * A label component provides a title or name to a component.
5
- * {@docCategory Label}
6
- */
7
- export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLElement>>;
@@ -1,16 +0,0 @@
1
- define(["require", "exports", "react", "./useLabel", "./renderLabel", "./useLabelStyles"], function (require, exports, React, useLabel_1, renderLabel_1, useLabelStyles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.Label = void 0;
5
- /**
6
- * A label component provides a title or name to a component.
7
- * {@docCategory Label}
8
- */
9
- exports.Label = React.forwardRef(function (props, ref) {
10
- var state = useLabel_1.useLabel(props, ref);
11
- useLabelStyles_1.useLabelStyles(state);
12
- return renderLabel_1.renderLabel(state);
13
- });
14
- exports.Label.displayName = 'Label';
15
- });
16
- //# sourceMappingURL=Label.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Label.js","sourceRoot":"../src/","sources":["components/Label/Label.tsx"],"names":[],"mappings":";;;;IAMA;;;OAGG;IACU,QAAA,KAAK,GAAG,KAAK,CAAC,UAAU,CAA0B,UAAC,KAAK,EAAE,GAAG;QACxE,IAAM,KAAK,GAAG,mBAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEnC,+BAAc,CAAC,KAAK,CAAC,CAAC;QACtB,OAAO,yBAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { useLabel } from './useLabel';\nimport { LabelProps } from './Label.types';\nimport { renderLabel } from './renderLabel';\nimport { useLabelStyles } from './useLabelStyles';\n\n/**\n * A label component provides a title or name to a component.\n * {@docCategory Label}\n */\nexport const Label = React.forwardRef<HTMLElement, LabelProps>((props, ref) => {\n const state = useLabel(props, ref);\n\n useLabelStyles(state);\n return renderLabel(state);\n});\n\nLabel.displayName = 'Label';\n"]}
@@ -1,53 +0,0 @@
1
- import * as React from 'react';
2
- import { ComponentProps, ComponentState, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';
3
- /**
4
- * Label Props
5
- * {@docCategory Label}
6
- */
7
- export interface LabelProps extends ComponentProps, React.LabelHTMLAttributes<HTMLLabelElement> {
8
- /**
9
- * Renders the label as disabled
10
- * @defaultvalue false
11
- */
12
- disabled?: boolean;
13
- /**
14
- * Displays and indicator that the label is for a required field. The required prop can be set to true to display
15
- * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
16
- * @defaultvalue false
17
- */
18
- required?: boolean | ShorthandProps<ComponentProps>;
19
- /**
20
- * A label supports different sizes.
21
- * @defaultvalue 'medium'
22
- */
23
- size?: 'small' | 'medium' | 'large';
24
- /**
25
- * A label supports semibold/strong fontweight.
26
- * @defaultvalue false
27
- */
28
- strong?: boolean;
29
- }
30
- /**
31
- * Names of the shorthand properties in LabelProps
32
- * {@docCategory Label}
33
- */
34
- export declare type LabelShorthandProps = 'required';
35
- /**
36
- * Names of LabelProps that have a default value in useLabel
37
- * {@docCategory Label}
38
- */
39
- export declare type LabelDefaultedProps = 'size';
40
- /**
41
- * State used in rendering Label
42
- * {@docCategory Label}
43
- */
44
- export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
45
- /**
46
- * Ref to the root element
47
- */
48
- ref: React.Ref<HTMLElement>;
49
- /**
50
- * The required prop resolved to a slot object
51
- */
52
- required?: ObjectShorthandProps<ComponentProps>;
53
- }
@@ -1,5 +0,0 @@
1
- define(["require", "exports"], function (require, exports) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- });
5
- //# sourceMappingURL=Label.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Label.types.js","sourceRoot":"../src/","sources":["components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';\n\n/**\n * Label Props\n * {@docCategory Label}\n */\nexport interface LabelProps extends ComponentProps, React.LabelHTMLAttributes<HTMLLabelElement> {\n /**\n * Renders the label as disabled\n * @defaultvalue false\n */\n disabled?: boolean;\n\n /**\n * Displays and indicator that the label is for a required field. The required prop can be set to true to display\n * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.\n * @defaultvalue false\n */\n required?: boolean | ShorthandProps<ComponentProps>;\n\n /**\n * A label supports different sizes.\n * @defaultvalue 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * A label supports semibold/strong fontweight.\n * @defaultvalue false\n */\n strong?: boolean;\n}\n\n/**\n * Names of the shorthand properties in LabelProps\n * {@docCategory Label}\n */\nexport type LabelShorthandProps = 'required';\n\n/**\n * Names of LabelProps that have a default value in useLabel\n * {@docCategory Label}\n */\nexport type LabelDefaultedProps = 'size';\n\n/**\n * State used in rendering Label\n * {@docCategory Label}\n */\nexport interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {\n /**\n * Ref to the root element\n */\n ref: React.Ref<HTMLElement>;\n\n /**\n * The required prop resolved to a slot object\n */\n required?: ObjectShorthandProps<ComponentProps>;\n}\n"]}
@@ -1,5 +0,0 @@
1
- export * from './Label';
2
- export * from './Label.types';
3
- export * from './renderLabel';
4
- export * from './useLabel';
5
- export * from './useLabelStyles';
@@ -1,10 +0,0 @@
1
- define(["require", "exports", "tslib", "./Label", "./Label.types", "./renderLabel", "./useLabel", "./useLabelStyles"], function (require, exports, tslib_1, Label_1, Label_types_1, renderLabel_1, useLabel_1, useLabelStyles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(Label_1, exports);
5
- tslib_1.__exportStar(Label_types_1, exports);
6
- tslib_1.__exportStar(renderLabel_1, exports);
7
- tslib_1.__exportStar(useLabel_1, exports);
8
- tslib_1.__exportStar(useLabelStyles_1, exports);
9
- });
10
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Label/index.ts"],"names":[],"mappings":";;;IAAA,uCAAwB;IACxB,6CAA8B;IAC9B,6CAA8B;IAC9B,0CAA2B;IAC3B,gDAAiC","sourcesContent":["export * from './Label';\nexport * from './Label.types';\nexport * from './renderLabel';\nexport * from './useLabel';\nexport * from './useLabelStyles';\n"]}
@@ -1,6 +0,0 @@
1
- import { LabelState } from './Label.types';
2
- /**
3
- * Render the final JSX of Label
4
- * {@docCategory Label}
5
- */
6
- export declare const renderLabel: (state: LabelState) => JSX.Element;
@@ -1,17 +0,0 @@
1
- define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./useLabel"], function (require, exports, tslib_1, React, react_utilities_1, useLabel_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.renderLabel = void 0;
5
- /**
6
- * Render the final JSX of Label
7
- * {@docCategory Label}
8
- */
9
- var renderLabel = function (state) {
10
- var _a = react_utilities_1.getSlots(state, useLabel_1.labelShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
11
- return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
12
- state.children,
13
- state.required && React.createElement(slots.required, tslib_1.__assign({}, slotProps.required))));
14
- };
15
- exports.renderLabel = renderLabel;
16
- });
17
- //# sourceMappingURL=renderLabel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"renderLabel.js","sourceRoot":"../src/","sources":["components/Label/renderLabel.tsx"],"names":[],"mappings":";;;;IAKA;;;OAGG;IACI,IAAM,WAAW,GAAG,UAAC,KAAiB;QACrC,IAAA,KAAuB,0BAAQ,CAAC,KAAK,EAAE,8BAAmB,CAAC,EAAzD,KAAK,WAAA,EAAE,SAAS,eAAyC,CAAC;QAElE,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,QAAQ;YACd,KAAK,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI,CAClD,CACd,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,WAAW,eAStB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { LabelState } from './Label.types';\nimport { labelShorthandProps } from './useLabel';\n\n/**\n * Render the final JSX of Label\n * {@docCategory Label}\n */\nexport const renderLabel = (state: LabelState) => {\n const { slots, slotProps } = getSlots(state, labelShorthandProps);\n\n return (\n <slots.root {...slotProps.root}>\n {state.children}\n {state.required && <slots.required {...slotProps.required} />}\n </slots.root>\n );\n};\n"]}
@@ -1,20 +0,0 @@
1
- import * as React from 'react';
2
- import { LabelProps, LabelShorthandProps, LabelState } from './Label.types';
3
- /**
4
- * Array of all shorthand properties listed in LabelShorthandProps
5
- * {@docCatergory Label}
6
- */
7
- export declare const labelShorthandProps: LabelShorthandProps[];
8
- /**
9
- * Create the state required to render Label.
10
- *
11
- * The returned state can be modified with hooks such as useLabelStyles,
12
- * before being passed to renderLabel.
13
- *
14
- * @param props - props from this instance of Label
15
- * @param ref - reference to root HTMLElement of Label
16
- * @param defaultProps - (optional) default prop values provided by the implementing type
17
- *
18
- * {@docCategory Label}
19
- */
20
- export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>, defaultProps?: LabelProps | undefined) => LabelState;
@@ -1,55 +0,0 @@
1
- define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useLabel = exports.labelShorthandProps = void 0;
5
- /**
6
- * Array of all shorthand properties listed in LabelShorthandProps
7
- * {@docCatergory Label}
8
- */
9
- exports.labelShorthandProps = ['required'];
10
- var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.labelShorthandProps });
11
- /**
12
- * Create the state required to render Label.
13
- *
14
- * The returned state can be modified with hooks such as useLabelStyles,
15
- * before being passed to renderLabel.
16
- *
17
- * @param props - props from this instance of Label
18
- * @param ref - reference to root HTMLElement of Label
19
- * @param defaultProps - (optional) default prop values provided by the implementing type
20
- *
21
- * {@docCategory Label}
22
- */
23
- var useLabel = function (props, ref, defaultProps) {
24
- var state = mergeProps({
25
- ref: ref,
26
- as: 'label',
27
- size: 'medium',
28
- required: {
29
- as: 'span',
30
- },
31
- }, defaultProps && resolveLabelShorthandProps(defaultProps), resolveLabelShorthandProps(props));
32
- return state;
33
- };
34
- exports.useLabel = useLabel;
35
- /**
36
- * Label will first need to check if required is a boolean or shorthandprops,
37
- * this allows for the required prop to handle both the default asterisk for required
38
- * or a custom required text.
39
- */
40
- var resolveLabelShorthandProps = function (props) {
41
- var propsNormalized;
42
- if (props.required === true) {
43
- propsNormalized = tslib_1.__assign(tslib_1.__assign({}, props), { required: { children: '*' } });
44
- }
45
- else if (props.required === false) {
46
- propsNormalized = tslib_1.__assign(tslib_1.__assign({}, props), { required: undefined });
47
- }
48
- else {
49
- // TypeScript needs a nudge to figure out that props.required won't be a boolean here
50
- propsNormalized = props;
51
- }
52
- return react_utilities_1.resolveShorthandProps(propsNormalized, exports.labelShorthandProps);
53
- };
54
- });
55
- //# sourceMappingURL=useLabel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useLabel.js","sourceRoot":"../src/","sources":["components/Label/useLabel.tsx"],"names":[],"mappings":";;;;IAIA;;;OAGG;IACU,QAAA,mBAAmB,GAA0B,CAAC,UAAU,CAAC,CAAC;IAEvE,IAAM,UAAU,GAAG,gCAAc,CAAa,EAAE,SAAS,EAAE,2BAAmB,EAAE,CAAC,CAAC;IAElF;;;;;;;;;;;OAWG;IACI,IAAM,QAAQ,GAAG,UAAC,KAAiB,EAAE,GAA2B,EAAE,YAAyB;QAChG,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,KAAA;YACH,EAAE,EAAE,OAAO;YACX,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE;gBACR,EAAE,EAAE,MAAM;aACX;SACF,EACD,YAAY,IAAI,0BAA0B,CAAC,YAAY,CAAC,EACxD,0BAA0B,CAAC,KAAK,CAAC,CAClC,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAfW,QAAA,QAAQ,YAenB;IAEF;;;;OAIG;IACH,IAAM,0BAA0B,GAAG,UAAC,KAAiB;QACnD,IAAI,eAAe,CAAC;QACpB,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC3B,eAAe,yCAAQ,KAAK,KAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;SAC7D;aAAM,IAAI,KAAK,CAAC,QAAQ,KAAK,KAAK,EAAE;YACnC,eAAe,yCAAQ,KAAK,KAAE,QAAQ,EAAE,SAAS,GAAE,CAAC;SACrD;aAAM;YACL,qFAAqF;YACrF,eAAe,GAAG,KAA6E,CAAC;SACjG;QAED,OAAO,uCAAqB,CAAC,eAAe,EAAE,2BAAmB,CAAC,CAAC;IACrE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { LabelProps, LabelShorthandProps, LabelState } from './Label.types';\n\n/**\n * Array of all shorthand properties listed in LabelShorthandProps\n * {@docCatergory Label}\n */\nexport const labelShorthandProps: LabelShorthandProps[] = ['required'];\n\nconst mergeProps = makeMergeProps<LabelState>({ deepMerge: labelShorthandProps });\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles,\n * before being passed to renderLabel.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n * @param defaultProps - (optional) default prop values provided by the implementing type\n *\n * {@docCategory Label}\n */\nexport const useLabel = (props: LabelProps, ref: React.Ref<HTMLElement>, defaultProps?: LabelProps): LabelState => {\n const state = mergeProps(\n {\n ref,\n as: 'label',\n size: 'medium',\n required: {\n as: 'span',\n },\n },\n defaultProps && resolveLabelShorthandProps(defaultProps),\n resolveLabelShorthandProps(props),\n );\n\n return state;\n};\n\n/**\n * Label will first need to check if required is a boolean or shorthandprops,\n * this allows for the required prop to handle both the default asterisk for required\n * or a custom required text.\n */\nconst resolveLabelShorthandProps = (props: LabelProps) => {\n let propsNormalized;\n if (props.required === true) {\n propsNormalized = { ...props, required: { children: '*' } };\n } else if (props.required === false) {\n propsNormalized = { ...props, required: undefined };\n } else {\n // TypeScript needs a nudge to figure out that props.required won't be a boolean here\n propsNormalized = props as LabelProps & { required?: Exclude<LabelProps['required'], boolean> };\n }\n\n return resolveShorthandProps(propsNormalized, labelShorthandProps);\n};\n"]}
@@ -1,5 +0,0 @@
1
- import { LabelState } from './Label.types';
2
- /**
3
- * Apply styling to the Label slots based on the state
4
- */
5
- export declare const useLabelStyles: (state: LabelState) => LabelState;
@@ -1,49 +0,0 @@
1
- define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useLabelStyles = void 0;
5
- /**
6
- * Styles for the label
7
- */
8
- var useStyles = react_make_styles_1.makeStyles({
9
- root: function (theme) { return ({
10
- fontFamily: theme.global.type.fontFamilies.base,
11
- fontSize: theme.global.type.fontSizes.base[300],
12
- color: theme.alias.color.neutral.neutralForeground1,
13
- }); },
14
- disabled: function (theme) { return ({
15
- color: theme.alias.color.neutral.neutralForegroundDisabled,
16
- }); },
17
- required: function (theme) { return ({
18
- color: theme.alias.color.red.foreground3,
19
- // TODO: Once spacing tokens are added, change this to Horizontal XS
20
- paddingLeft: '4px',
21
- }); },
22
- small: function (theme) { return ({
23
- fontSize: theme.global.type.fontSizes.base[200],
24
- }); },
25
- medium: function (theme) { return ({
26
- fontSize: theme.global.type.fontSizes.base[300],
27
- }); },
28
- large: function (theme) { return ({
29
- fontSize: theme.global.type.fontSizes.base[400],
30
- fontWeight: theme.global.type.fontWeights.semibold,
31
- }); },
32
- strong: function (theme) { return ({
33
- fontWeight: theme.global.type.fontWeights.semibold,
34
- }); },
35
- });
36
- /**
37
- * Apply styling to the Label slots based on the state
38
- */
39
- var useLabelStyles = function (state) {
40
- var styles = useStyles();
41
- state.className = react_make_styles_1.mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.className);
42
- if (state.required) {
43
- state.required.className = react_make_styles_1.mergeClasses(styles.required, state.required.className);
44
- }
45
- return state;
46
- };
47
- exports.useLabelStyles = useLabelStyles;
48
- });
49
- //# sourceMappingURL=useLabelStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useLabelStyles.js","sourceRoot":"../src/","sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":";;;;IAGA;;OAEG;IACH,IAAM,SAAS,GAAG,8BAAU,CAAC;QAC3B,IAAI,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACd,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI;YAC/C,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;YAC/C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB;SACpD,CAAC,EAJa,CAIb;QAEF,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAClB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAAyB;SAC3D,CAAC,EAFiB,CAEjB;QAEF,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAClB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW;YACxC,oEAAoE;YACpE,WAAW,EAAE,KAAK;SACnB,CAAC,EAJiB,CAIjB;QAEF,KAAK,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACf,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;SAChD,CAAC,EAFc,CAEd;QAEF,MAAM,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAChB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;SAChD,CAAC,EAFe,CAEf;QAEF,KAAK,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACf,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;YAC/C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ;SACnD,CAAC,EAHc,CAGd;QAEF,MAAM,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAChB,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ;SACnD,CAAC,EAFe,CAEf;KACH,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,cAAc,GAAG,UAAC,KAAiB;QAC9C,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,SAAS,GAAG,gCAAY,CAC5B,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,EACjC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAClB,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,EAC7B,KAAK,CAAC,SAAS,CAChB,CAAC;QAEF,IAAI,KAAK,CAAC,QAAQ,EAAE;YAClB,KAAK,CAAC,QAAQ,CAAC,SAAS,GAAG,gCAAY,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;SACpF;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAfW,QAAA,cAAc,kBAezB","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { LabelState } from './Label.types';\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: theme => ({\n fontFamily: theme.global.type.fontFamilies.base,\n fontSize: theme.global.type.fontSizes.base[300],\n color: theme.alias.color.neutral.neutralForeground1,\n }),\n\n disabled: theme => ({\n color: theme.alias.color.neutral.neutralForegroundDisabled,\n }),\n\n required: theme => ({\n color: theme.alias.color.red.foreground3,\n // TODO: Once spacing tokens are added, change this to Horizontal XS\n paddingLeft: '4px',\n }),\n\n small: theme => ({\n fontSize: theme.global.type.fontSizes.base[200],\n }),\n\n medium: theme => ({\n fontSize: theme.global.type.fontSizes.base[300],\n }),\n\n large: theme => ({\n fontSize: theme.global.type.fontSizes.base[400],\n fontWeight: theme.global.type.fontWeights.semibold,\n }),\n\n strong: theme => ({\n fontWeight: theme.global.type.fontWeights.semibold,\n }),\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles = (state: LabelState): LabelState => {\n const styles = useStyles();\n state.className = mergeClasses(\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.strong && styles.strong,\n state.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(styles.required, state.required.className);\n }\n\n return state;\n};\n"]}
@@ -1,2 +0,0 @@
1
- export {};
2
- export * from './Label';
package/lib-amd/index.js DELETED
@@ -1,6 +0,0 @@
1
- define(["require", "exports", "tslib", "./Label"], function (require, exports, tslib_1, Label_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(Label_1, exports);
5
- });
6
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;IAEA,uCAAwB","sourcesContent":["// TODO: replace with real exports\nexport {};\nexport * from './Label';\n"]}
@@ -1,61 +0,0 @@
1
- import * as React from 'react';
2
- import { ComponentProps, ComponentState, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';
3
-
4
- /**
5
- * Label Props
6
- * {@docCategory Label}
7
- */
8
- export interface LabelProps extends ComponentProps, React.LabelHTMLAttributes<HTMLLabelElement> {
9
- /**
10
- * Renders the label as disabled
11
- * @defaultvalue false
12
- */
13
- disabled?: boolean;
14
-
15
- /**
16
- * Displays and indicator that the label is for a required field. The required prop can be set to true to display
17
- * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
18
- * @defaultvalue false
19
- */
20
- required?: boolean | ShorthandProps<ComponentProps>;
21
-
22
- /**
23
- * A label supports different sizes.
24
- * @defaultvalue 'medium'
25
- */
26
- size?: 'small' | 'medium' | 'large';
27
-
28
- /**
29
- * A label supports semibold/strong fontweight.
30
- * @defaultvalue false
31
- */
32
- strong?: boolean;
33
- }
34
-
35
- /**
36
- * Names of the shorthand properties in LabelProps
37
- * {@docCategory Label}
38
- */
39
- export type LabelShorthandProps = 'required';
40
-
41
- /**
42
- * Names of LabelProps that have a default value in useLabel
43
- * {@docCategory Label}
44
- */
45
- export type LabelDefaultedProps = 'size';
46
-
47
- /**
48
- * State used in rendering Label
49
- * {@docCategory Label}
50
- */
51
- export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
52
- /**
53
- * Ref to the root element
54
- */
55
- ref: React.Ref<HTMLElement>;
56
-
57
- /**
58
- * The required prop resolved to a slot object
59
- */
60
- required?: ObjectShorthandProps<ComponentProps>;
61
- }