@zendeskgarden/react-forms 9.0.0-next.9 → 9.1.0

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 (140) hide show
  1. package/dist/esm/elements/Checkbox.js +4 -3
  2. package/dist/esm/elements/FileUpload.js +7 -3
  3. package/dist/esm/elements/Input.js +18 -17
  4. package/dist/esm/elements/MediaInput.js +2 -2
  5. package/dist/esm/elements/Radio.js +4 -3
  6. package/dist/esm/elements/Range.js +9 -9
  7. package/dist/esm/elements/Select.js +9 -8
  8. package/dist/esm/elements/Textarea.js +24 -14
  9. package/dist/esm/elements/Toggle.js +4 -3
  10. package/dist/esm/elements/common/Fieldset.js +10 -5
  11. package/dist/esm/elements/common/Hint.js +1 -1
  12. package/dist/esm/elements/common/Label.js +35 -33
  13. package/dist/esm/elements/common/Legend.js +1 -3
  14. package/dist/esm/elements/common/Message.js +7 -6
  15. package/dist/esm/elements/common/MessageIcon.js +78 -0
  16. package/dist/esm/elements/faux-input/FauxInput.js +20 -8
  17. package/dist/esm/elements/faux-input/components/EndIcon.js +4 -0
  18. package/dist/esm/elements/faux-input/components/StartIcon.js +4 -0
  19. package/dist/esm/elements/file-list/components/File.js +6 -5
  20. package/dist/esm/elements/input-group/InputGroup.js +3 -3
  21. package/dist/esm/elements/tiles/components/Description.js +1 -1
  22. package/dist/esm/elements/tiles/components/Icon.js +1 -1
  23. package/dist/esm/elements/tiles/components/Label.js +1 -1
  24. package/dist/esm/elements/tiles/components/Tile.js +1 -3
  25. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/check-circle-stroke.svg.js +1 -1
  26. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/check-sm-fill.svg.js +1 -1
  27. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/circle-sm-fill.svg.js +1 -1
  28. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/dash-fill.svg.js +1 -1
  29. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-document-stroke.svg.js +1 -1
  30. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-error-stroke.svg.js +1 -1
  31. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-generic-stroke.svg.js +1 -1
  32. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-image-stroke.svg.js +1 -1
  33. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-pdf-stroke.svg.js +1 -1
  34. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-presentation-stroke.svg.js +1 -1
  35. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-spreadsheet-stroke.svg.js +1 -1
  36. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/file-zip-stroke.svg.js +1 -1
  37. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/trash-stroke.svg.js +1 -1
  38. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js +1 -1
  39. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js +1 -1
  40. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js +1 -1
  41. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js +1 -1
  42. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js +1 -1
  43. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/circle-sm-fill.svg.js +1 -1
  44. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-document-stroke.svg.js +1 -1
  45. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-error-stroke.svg.js +1 -1
  46. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-generic-stroke.svg.js +1 -1
  47. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-image-stroke.svg.js +1 -1
  48. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-pdf-stroke.svg.js +1 -1
  49. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-presentation-stroke.svg.js +1 -1
  50. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-spreadsheet-stroke.svg.js +1 -1
  51. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-zip-stroke.svg.js +1 -1
  52. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/trash-stroke.svg.js +1 -1
  53. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js +1 -1
  54. package/dist/esm/styled/checkbox/StyledCheckHint.js +2 -5
  55. package/dist/esm/styled/checkbox/StyledCheckInput.js +55 -14
  56. package/dist/esm/styled/checkbox/StyledCheckLabel.js +2 -5
  57. package/dist/esm/styled/checkbox/StyledCheckMessage.js +2 -5
  58. package/dist/esm/styled/checkbox/StyledCheckSvg.js +2 -5
  59. package/dist/esm/styled/checkbox/StyledDashSvg.js +2 -5
  60. package/dist/esm/styled/common/StyledField.js +2 -5
  61. package/dist/esm/styled/common/StyledFieldset.js +3 -6
  62. package/dist/esm/styled/common/StyledHint.js +6 -6
  63. package/dist/esm/styled/common/StyledLabel.js +6 -6
  64. package/dist/esm/styled/common/StyledLegend.js +2 -5
  65. package/dist/esm/styled/common/StyledMessage.js +33 -19
  66. package/dist/esm/styled/common/StyledMessageIcon.js +3 -29
  67. package/dist/esm/styled/file-list/StyledFile.js +49 -31
  68. package/dist/esm/styled/file-list/StyledFileClose.js +6 -6
  69. package/dist/esm/styled/file-list/StyledFileDelete.js +6 -6
  70. package/dist/esm/styled/file-list/StyledFileIcon.js +24 -7
  71. package/dist/esm/styled/file-list/StyledFileList.js +2 -5
  72. package/dist/esm/styled/file-list/StyledFileListItem.js +2 -5
  73. package/dist/esm/styled/file-upload/StyledFileUpload.js +89 -23
  74. package/dist/esm/styled/input-group/StyledInputGroup.js +3 -6
  75. package/dist/esm/styled/radio/StyledRadioHint.js +2 -5
  76. package/dist/esm/styled/radio/StyledRadioInput.js +85 -27
  77. package/dist/esm/styled/radio/StyledRadioLabel.js +3 -6
  78. package/dist/esm/styled/radio/StyledRadioMessage.js +2 -5
  79. package/dist/esm/styled/radio/StyledRadioSvg.js +2 -5
  80. package/dist/esm/styled/range/StyledRangeInput.js +79 -29
  81. package/dist/esm/styled/select/StyledSelect.js +35 -14
  82. package/dist/esm/styled/select/StyledSelectWrapper.js +12 -7
  83. package/dist/esm/styled/text/StyledTextFauxInput.js +40 -35
  84. package/dist/esm/styled/text/StyledTextInput.js +104 -62
  85. package/dist/esm/styled/text/StyledTextMediaFigure.js +35 -13
  86. package/dist/esm/styled/text/StyledTextMediaInput.js +3 -6
  87. package/dist/esm/styled/text/StyledTextarea.js +3 -6
  88. package/dist/esm/styled/tiles/StyledTile.js +93 -37
  89. package/dist/esm/styled/tiles/StyledTileDescription.js +13 -16
  90. package/dist/esm/styled/tiles/StyledTileIcon.js +52 -16
  91. package/dist/esm/styled/tiles/StyledTileInput.js +1 -5
  92. package/dist/esm/styled/tiles/StyledTileLabel.js +13 -18
  93. package/dist/esm/styled/toggle/StyledToggleHint.js +2 -5
  94. package/dist/esm/styled/toggle/StyledToggleInput.js +38 -16
  95. package/dist/esm/styled/toggle/StyledToggleLabel.js +2 -5
  96. package/dist/esm/styled/toggle/StyledToggleMessage.js +2 -5
  97. package/dist/esm/styled/toggle/StyledToggleSvg.js +2 -5
  98. package/dist/index.cjs.js +1212 -773
  99. package/dist/typings/elements/common/Field.d.ts +1 -1
  100. package/dist/typings/elements/common/Fieldset.d.ts +3 -1
  101. package/dist/typings/elements/common/MessageIcon.d.ts +9 -0
  102. package/dist/typings/elements/faux-input/FauxInput.d.ts +3 -1
  103. package/dist/typings/elements/faux-input/components/EndIcon.d.ts +1 -1
  104. package/dist/typings/elements/faux-input/components/StartIcon.d.ts +1 -1
  105. package/dist/typings/elements/file-list/FileList.d.ts +3 -1
  106. package/dist/typings/elements/file-list/components/File.d.ts +3 -1
  107. package/dist/typings/elements/tiles/Tiles.d.ts +3 -1
  108. package/dist/typings/styled/checkbox/StyledCheckLabel.d.ts +2 -2
  109. package/dist/typings/styled/common/StyledFieldset.d.ts +1 -1
  110. package/dist/typings/styled/common/StyledLabel.d.ts +2 -2
  111. package/dist/typings/styled/common/StyledLegend.d.ts +1 -5
  112. package/dist/typings/styled/common/StyledMessage.d.ts +1 -1
  113. package/dist/typings/styled/common/StyledMessageIcon.d.ts +2 -9
  114. package/dist/typings/styled/file-list/StyledFile.d.ts +3 -3
  115. package/dist/typings/styled/file-list/StyledFileIcon.d.ts +7 -2
  116. package/dist/typings/styled/file-upload/StyledFileUpload.d.ts +2 -2
  117. package/dist/typings/styled/input-group/StyledInputGroup.d.ts +1 -1
  118. package/dist/typings/styled/radio/StyledRadioInput.d.ts +1 -1
  119. package/dist/typings/styled/radio/StyledRadioLabel.d.ts +2 -2
  120. package/dist/typings/styled/range/StyledRangeInput.d.ts +2 -2
  121. package/dist/typings/styled/select/StyledSelect.d.ts +0 -3
  122. package/dist/typings/styled/select/StyledSelectWrapper.d.ts +3 -1
  123. package/dist/typings/styled/text/StyledTextFauxInput.d.ts +3 -7
  124. package/dist/typings/styled/text/StyledTextInput.d.ts +6 -6
  125. package/dist/typings/styled/text/StyledTextMediaFigure.d.ts +1 -2
  126. package/dist/typings/styled/text/StyledTextMediaInput.d.ts +2 -2
  127. package/dist/typings/styled/text/StyledTextarea.d.ts +2 -2
  128. package/dist/typings/styled/tiles/StyledTile.d.ts +4 -7
  129. package/dist/typings/styled/tiles/StyledTileDescription.d.ts +1 -1
  130. package/dist/typings/styled/tiles/StyledTileIcon.d.ts +1 -1
  131. package/dist/typings/styled/tiles/StyledTileLabel.d.ts +1 -1
  132. package/dist/typings/styled/toggle/StyledToggleLabel.d.ts +2 -2
  133. package/dist/typings/types/index.d.ts +9 -3
  134. package/dist/typings/utils/useFieldContext.d.ts +0 -1
  135. package/dist/typings/utils/useFieldsetContext.d.ts +0 -1
  136. package/dist/typings/utils/useFileContext.d.ts +0 -1
  137. package/dist/typings/utils/useInputContext.d.ts +0 -1
  138. package/dist/typings/utils/useInputGroupContext.d.ts +0 -1
  139. package/dist/typings/utils/useTilesContext.d.ts +0 -1
  140. package/package.json +8 -8
@@ -12,7 +12,7 @@ export declare const FieldComponent: React.ForwardRefExoticComponent<React.HTMLA
12
12
  /**
13
13
  * @extends HTMLAttributes<HTMLDivElement>
14
14
  */
15
- export declare const Field: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>> & {
15
+ export declare const Field: typeof FieldComponent & {
16
16
  Hint: typeof Hint;
17
17
  Label: typeof Label;
18
18
  Message: typeof Message;
@@ -7,9 +7,11 @@
7
7
  import React from 'react';
8
8
  import { Legend } from './Legend';
9
9
  import { IFieldsetProps } from '../../types';
10
+ declare const FieldsetComponent: React.ForwardRefExoticComponent<IFieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;
10
11
  /**
11
12
  * @extends FieldsetHTMLAttributes<HTMLFieldSetElement>
12
13
  */
13
- export declare const Fieldset: React.ForwardRefExoticComponent<IFieldsetProps & React.RefAttributes<HTMLFieldSetElement>> & {
14
+ export declare const Fieldset: typeof FieldsetComponent & {
14
15
  Legend: typeof Legend;
15
16
  };
17
+ export {};
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import { FC, PropsWithChildren } from 'react';
8
+ import { IMessageIconProps } from '../../types';
9
+ export declare const MessageIcon: FC<PropsWithChildren<IMessageIconProps>>;
@@ -8,10 +8,12 @@ import React from 'react';
8
8
  import { IFauxInputProps } from '../../types';
9
9
  import { StartIcon } from './components/StartIcon';
10
10
  import { EndIcon } from './components/EndIcon';
11
+ declare const FauxInputComponent: React.ForwardRefExoticComponent<IFauxInputProps & React.RefAttributes<HTMLDivElement>>;
11
12
  /**
12
13
  * @extends HTMLAttributes<HTMLDivElement>
13
14
  */
14
- export declare const FauxInput: React.ForwardRefExoticComponent<IFauxInputProps & React.RefAttributes<HTMLDivElement>> & {
15
+ export declare const FauxInput: typeof FauxInputComponent & {
15
16
  EndIcon: typeof EndIcon;
16
17
  StartIcon: typeof StartIcon;
17
18
  };
19
+ export {};
@@ -10,6 +10,6 @@ import { IFauxInputIconProps } from '../../../types';
10
10
  * @extends SVGAttributes<SVGElement>
11
11
  */
12
12
  export declare const EndIcon: {
13
- ({ isDisabled, isRotated, ...props }: IFauxInputIconProps): React.JSX.Element;
13
+ ({ isDisabled, isFocused, isHovered, isRotated, ...props }: IFauxInputIconProps): React.JSX.Element;
14
14
  displayName: string;
15
15
  };
@@ -10,6 +10,6 @@ import { IFauxInputIconProps } from '../../../types';
10
10
  * @extends SVGAttributes<SVGElement>
11
11
  */
12
12
  export declare const StartIcon: {
13
- ({ isDisabled, isRotated, ...props }: IFauxInputIconProps): React.JSX.Element;
13
+ ({ isDisabled, isFocused, isHovered, isRotated, ...props }: IFauxInputIconProps): React.JSX.Element;
14
14
  displayName: string;
15
15
  };
@@ -6,9 +6,11 @@
6
6
  */
7
7
  import React from 'react';
8
8
  import { Item } from './components/Item';
9
+ declare const FileListComponent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
9
10
  /**
10
11
  * @extends HTMLAttributes<HTMLUListElement>
11
12
  */
12
- export declare const FileList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>> & {
13
+ export declare const FileList: typeof FileListComponent & {
13
14
  Item: typeof Item;
14
15
  };
16
+ export {};
@@ -8,10 +8,12 @@ import React from 'react';
8
8
  import { IFileProps } from '../../../types';
9
9
  import { Close } from './Close';
10
10
  import { Delete } from './Delete';
11
+ declare const FileComponent: React.ForwardRefExoticComponent<IFileProps & React.RefAttributes<HTMLDivElement>>;
11
12
  /**
12
13
  * @extends HTMLAttributes<HTMLDivElement>
13
14
  */
14
- export declare const File: React.ForwardRefExoticComponent<IFileProps & React.RefAttributes<HTMLDivElement>> & {
15
+ export declare const File: typeof FileComponent & {
15
16
  Close: typeof Close;
16
17
  Delete: typeof Delete;
17
18
  };
19
+ export {};
@@ -10,12 +10,14 @@ import { Tile } from './components/Tile';
10
10
  import { Description } from './components/Description';
11
11
  import { Icon } from './components/Icon';
12
12
  import { Label } from './components/Label';
13
+ declare const TilesComponent: React.ForwardRefExoticComponent<ITilesProps & React.RefAttributes<HTMLDivElement>>;
13
14
  /**
14
15
  * @extends HTMLAttributes<HTMLDivElement>
15
16
  */
16
- export declare const Tiles: React.ForwardRefExoticComponent<ITilesProps & React.RefAttributes<HTMLDivElement>> & {
17
+ export declare const Tiles: typeof TilesComponent & {
17
18
  Description: typeof Description;
18
19
  Icon: typeof Icon;
19
20
  Label: typeof Label;
20
21
  Tile: typeof Tile;
21
22
  };
23
+ export {};
@@ -10,8 +10,8 @@ export declare const StyledCheckLabel: import("styled-components").StyledCompone
10
10
  } & import("..").IStyledLabelProps & {
11
11
  'data-garden-id': string;
12
12
  'data-garden-version': string;
13
- isRadio: boolean;
13
+ $isRadio: boolean;
14
14
  } & {
15
15
  'data-garden-id': string;
16
16
  'data-garden-version': string;
17
- }, "data-garden-id" | "data-garden-version" | "isRadio">;
17
+ }, "data-garden-id" | "data-garden-version" | "$isRadio">;
@@ -5,7 +5,7 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  interface IStyledFieldsetProps {
8
- isCompact?: boolean;
8
+ $isCompact?: boolean;
9
9
  }
10
10
  export declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {
11
11
  as: string;
@@ -5,8 +5,8 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  export interface IStyledLabelProps {
8
- isRegular?: boolean;
9
- isRadio?: boolean;
8
+ $isRegular?: boolean;
9
+ $isRadio?: boolean;
10
10
  }
11
11
  /**
12
12
  * 1. CSS Bedrock override.
@@ -4,9 +4,6 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- interface IStyledLegend {
8
- isCompact?: boolean;
9
- }
10
7
  /**
11
8
  * 1. Reset for <legend>.
12
9
  */
@@ -14,5 +11,4 @@ export declare const StyledLegend: import("styled-components").StyledComponent<"
14
11
  as: string;
15
12
  'data-garden-id': string;
16
13
  'data-garden-version': string;
17
- } & IStyledLegend, "as" | "data-garden-id" | "data-garden-version">;
18
- export {};
14
+ }, "as" | "data-garden-id" | "data-garden-version">;
@@ -7,7 +7,7 @@
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  import { Validation } from '../../types';
9
9
  export interface IStyledMessageProps {
10
- validation?: Validation;
10
+ $validation?: Validation;
11
11
  }
12
12
  export declare const StyledMessage: import("styled-components").StyledComponent<"div", DefaultTheme, {
13
13
  'data-garden-id': any;
@@ -4,14 +4,7 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React from 'react';
8
- import { Validation } from '../../types';
9
- interface IStyledMessageIconProps {
10
- validation?: Validation;
11
- }
12
- export declare const StyledMessageIcon: import("styled-components").StyledComponent<React.FC<React.PropsWithChildren<IStyledMessageIconProps>>, import("styled-components").DefaultTheme, {
7
+ export declare const StyledMessageIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {
13
8
  'data-garden-id': string;
14
9
  'data-garden-version': string;
15
- 'aria-hidden': null;
16
- } & IStyledMessageIconProps, "aria-hidden" | "data-garden-id" | "data-garden-version">;
17
- export {};
10
+ }, "data-garden-id" | "data-garden-version">;
@@ -7,9 +7,9 @@
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  import { FileValidation } from '../../types';
9
9
  interface IStyledFileProps {
10
- isCompact?: boolean;
11
- focusInset?: boolean;
12
- validation?: FileValidation;
10
+ $isCompact?: boolean;
11
+ $focusInset?: boolean;
12
+ $validation?: FileValidation;
13
13
  }
14
14
  export declare const StyledFile: import("styled-components").StyledComponent<"div", DefaultTheme, {
15
15
  'data-garden-id': string;
@@ -4,8 +4,13 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- /// <reference types="react" />
8
- export declare const StyledFileIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {
7
+ import { DefaultTheme } from 'styled-components';
8
+ import { FileValidation } from '../../types';
9
+ export interface IStyledFileIconProps {
10
+ $isCompact?: boolean;
11
+ $validation?: FileValidation;
12
+ }
13
+ export declare const StyledFileIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
9
14
  'data-garden-id': string;
10
15
  'data-garden-version': string;
11
16
  }, "data-garden-id" | "data-garden-version">;
@@ -6,8 +6,8 @@
6
6
  */
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  interface IStyledFileUploadProps {
9
- isDragging?: boolean;
10
- isCompact?: boolean;
9
+ $isDragging?: boolean;
10
+ $isCompact?: boolean;
11
11
  }
12
12
  export declare const StyledFileUpload: import("styled-components").StyledComponent<"div", DefaultTheme, {
13
13
  'data-garden-id': string;
@@ -6,7 +6,7 @@
6
6
  */
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  interface IStyledInputGroupProps {
9
- isCompact?: boolean;
9
+ $isCompact?: boolean;
10
10
  }
11
11
  export declare const StyledInputGroup: import("styled-components").StyledComponent<"div", DefaultTheme, {
12
12
  'data-garden-id': string;
@@ -6,7 +6,7 @@
6
6
  */
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  export interface IStyledRadioInputProps {
9
- isCompact?: boolean;
9
+ $isCompact?: boolean;
10
10
  }
11
11
  export declare const StyledRadioInput: import("styled-components").StyledComponent<"input", DefaultTheme, {
12
12
  'data-garden-id': string;
@@ -14,5 +14,5 @@ export declare const StyledRadioLabel: import("styled-components").StyledCompone
14
14
  } & import("../common/StyledLabel").IStyledLabelProps & {
15
15
  'data-garden-id': string;
16
16
  'data-garden-version': string;
17
- isRadio: boolean;
18
- }, "data-garden-id" | "data-garden-version" | "isRadio">;
17
+ $isRadio: boolean;
18
+ }, "data-garden-id" | "data-garden-version" | "$isRadio">;
@@ -6,8 +6,8 @@
6
6
  */
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  interface IStyledRangeInputProps {
9
- backgroundSize?: number | string;
10
- hasLowerTrack?: boolean;
9
+ $backgroundSize?: number | string;
10
+ $hasLowerTrack?: boolean;
11
11
  }
12
12
  export declare const StyledRangeInput: import("styled-components").StyledComponent<"input", DefaultTheme, IStyledRangeInputProps, never>;
13
13
  export {};
@@ -6,9 +6,6 @@
6
6
  */
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  import { IStyledTextInputProps } from '../text/StyledTextInput';
9
- /**
10
- * 1. Select reset.
11
- */
12
9
  export declare const StyledSelect: import("styled-components").StyledComponent<"input", DefaultTheme, IStyledTextInputProps & {
13
10
  'data-garden-id': string;
14
11
  'data-garden-version': string;
@@ -4,7 +4,9 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- export declare const StyledSelectWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../text/StyledTextFauxInput").IStyledTextFauxInputProps & {
7
+ import { DefaultTheme } from 'styled-components';
8
+ import { IStyledTextFauxInputProps } from '../text/StyledTextFauxInput';
9
+ export declare const StyledSelectWrapper: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledTextFauxInputProps & {
8
10
  'data-garden-id': string;
9
11
  'data-garden-version': string;
10
12
  }, "data-garden-id" | "data-garden-version">;
@@ -7,12 +7,8 @@
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  import { IStyledTextInputProps } from './StyledTextInput';
9
9
  export interface IStyledTextFauxInputProps extends IStyledTextInputProps {
10
- mediaLayout?: boolean;
11
- isDisabled?: boolean;
12
- isReadOnly?: boolean;
10
+ $mediaLayout?: boolean;
11
+ $isDisabled?: boolean;
12
+ $isReadOnly?: boolean;
13
13
  }
14
- export declare function getValidationHue(validation?: IStyledTextFauxInputProps['validation'], defaultHue?: string): string;
15
- /**
16
- * [1] removes inner input styles when focused
17
- */
18
14
  export declare const StyledTextFauxInput: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledTextFauxInputProps, never>;
@@ -7,11 +7,11 @@
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  import { Validation } from '../../types';
9
9
  export interface IStyledTextInputProps {
10
- isCompact?: boolean;
11
- isBare?: boolean;
12
- isHovered?: boolean;
13
- isFocused?: boolean;
14
- focusInset?: boolean;
15
- validation?: Validation;
10
+ $isCompact?: boolean;
11
+ $isBare?: boolean;
12
+ $isHovered?: boolean;
13
+ $isFocused?: boolean;
14
+ $focusInset?: boolean;
15
+ $validation?: Validation;
16
16
  }
17
17
  export declare const StyledTextInput: import("styled-components").StyledComponent<"input", DefaultTheme, IStyledTextInputProps, never>;
@@ -4,7 +4,6 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- /// <reference types="react" />
8
7
  import { DefaultTheme } from 'styled-components';
9
8
  interface IStyledTextMediaFigureProps {
10
9
  $isRotated?: boolean;
@@ -13,7 +12,7 @@ interface IStyledTextMediaFigureProps {
13
12
  $isDisabled?: boolean;
14
13
  $position: 'start' | 'end';
15
14
  }
16
- export declare const StyledTextMediaFigure: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
15
+ export declare const StyledTextMediaFigure: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
17
16
  'data-garden-id': string;
18
17
  'data-garden-version': string;
19
18
  } & IStyledTextMediaFigureProps, "data-garden-id" | "data-garden-version">;
@@ -7,5 +7,5 @@
7
7
  export declare const StyledTextMediaInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, import("./StyledTextInput").IStyledTextInputProps & {
8
8
  'data-garden-id': string;
9
9
  'data-garden-version': string;
10
- isBare: boolean;
11
- }, "data-garden-id" | "data-garden-version" | "isBare">;
10
+ $isBare: boolean;
11
+ }, "data-garden-id" | "data-garden-version" | "$isBare">;
@@ -5,8 +5,8 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  interface IStyledTextareaProps {
8
- isResizable?: boolean;
9
- isHidden?: boolean;
8
+ $isResizable?: boolean;
9
+ $isHidden?: boolean;
10
10
  }
11
11
  export declare const StyledTextarea: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, import("./StyledTextInput").IStyledTextInputProps & {
12
12
  as: string;
@@ -5,10 +5,7 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import { DefaultTheme } from 'styled-components';
8
- interface IStyledTileProps {
9
- isDisabled?: boolean;
10
- isFocused?: boolean;
11
- isSelected?: boolean;
12
- }
13
- export declare const StyledTile: import("styled-components").StyledComponent<"label", DefaultTheme, IStyledTileProps, never>;
14
- export {};
8
+ export declare const StyledTile: import("styled-components").StyledComponent<"label", DefaultTheme, {
9
+ 'data-garden-id': string;
10
+ 'data-garden-version': string;
11
+ }, "data-garden-id" | "data-garden-version">;
@@ -6,7 +6,7 @@
6
6
  */
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  interface IStyledTileDescriptionProps {
9
- isCentered?: boolean;
9
+ $isCentered?: boolean;
10
10
  }
11
11
  export declare const StyledTileDescription: import("styled-components").StyledComponent<"span", DefaultTheme, {
12
12
  'data-garden-id': string;
@@ -6,7 +6,7 @@
6
6
  */
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  interface IStyledTileIconProps {
9
- isCentered?: boolean;
9
+ $isCentered?: boolean;
10
10
  }
11
11
  export declare const StyledTileIcon: import("styled-components").StyledComponent<"span", DefaultTheme, {
12
12
  'data-garden-id': string;
@@ -6,7 +6,7 @@
6
6
  */
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  interface IStyledTileLabelProps {
9
- isCentered?: boolean;
9
+ $isCentered?: boolean;
10
10
  }
11
11
  export declare const StyledTileLabel: import("styled-components").StyledComponent<"span", DefaultTheme, {
12
12
  'data-garden-id': string;
@@ -11,11 +11,11 @@ export declare const StyledToggleLabel: import("styled-components").StyledCompon
11
11
  } & import("..").IStyledLabelProps & {
12
12
  'data-garden-id': string;
13
13
  'data-garden-version': string;
14
- isRadio: boolean;
14
+ $isRadio: boolean;
15
15
  } & {
16
16
  'data-garden-id': string;
17
17
  'data-garden-version': string;
18
18
  } & {
19
19
  'data-garden-id': string;
20
20
  'data-garden-version': string;
21
- }, "data-garden-id" | "data-garden-version" | "isRadio">;
21
+ }, "data-garden-id" | "data-garden-version" | "$isRadio">;
@@ -29,6 +29,10 @@ export interface IMessageProps extends HTMLAttributes<HTMLDivElement> {
29
29
  /** Defines the aria-label for the validation icon */
30
30
  validationLabel?: string;
31
31
  }
32
+ export interface IMessageIconProps {
33
+ /** Applies validation state styling */
34
+ validation?: Validation;
35
+ }
32
36
  export interface IRadioProps extends InputHTMLAttributes<HTMLInputElement> {
33
37
  /** Applies compact styling */
34
38
  isCompact?: IFieldsetProps['isCompact'];
@@ -69,6 +73,8 @@ export interface IFauxInputProps extends Pick<IInputProps, 'isCompact' | 'isBare
69
73
  isFocused?: boolean;
70
74
  /** Applies hover stying */
71
75
  isHovered?: boolean;
76
+ /** @ignore Internal use only */
77
+ mediaLayout?: boolean;
72
78
  }
73
79
  export interface IFauxInputIconProps extends Pick<IFauxInputProps, 'isHovered' | 'isFocused'>, SVGAttributes<SVGElement> {
74
80
  /** Applies disabled styling */
@@ -103,9 +109,9 @@ export interface IRangeProps extends InputHTMLAttributes<HTMLInputElement> {
103
109
  hasLowerTrack?: boolean;
104
110
  }
105
111
  export interface ITilesProps extends HTMLAttributes<HTMLDivElement> {
106
- /** Sets the value of the selected radio button */
112
+ /** Sets the selected value in a controlled tiles component */
107
113
  value?: IRadioProps['value'];
108
- /** Handles radio selection */
114
+ /** Handles selection change event */
109
115
  onChange?: IRadioProps['onChange'];
110
116
  /** Sets the name used to reference the value of the control */
111
117
  name: NonNullable<IRadioProps['name']>;
@@ -113,7 +119,7 @@ export interface ITilesProps extends HTMLAttributes<HTMLDivElement> {
113
119
  isCentered?: boolean;
114
120
  }
115
121
  export interface ITilesTileProps extends HTMLAttributes<HTMLLabelElement> {
116
- /** Sets the value of the input */
122
+ /** Sets the value of the tile */
117
123
  value?: IRadioProps['value'];
118
124
  /** Indicates that the element is not interactive */
119
125
  disabled?: IRadioProps['disabled'];
@@ -4,7 +4,6 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- /// <reference types="react" />
8
7
  import { IUseFieldReturnValue } from '@zendeskgarden/container-field';
9
8
  interface IFieldContext extends IUseFieldReturnValue {
10
9
  getMessageProps: (messageProps: any) => any;
@@ -4,7 +4,6 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- /// <reference types="react" />
8
7
  interface IFieldsetContext {
9
8
  isCompact?: boolean;
10
9
  }
@@ -4,7 +4,6 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- /// <reference types="react" />
8
7
  interface IFileContext {
9
8
  isCompact?: boolean;
10
9
  }
@@ -4,7 +4,6 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- /// <reference types="react" />
8
7
  type INPUT_CONTEXT_VALUE = 'checkbox' | 'radio' | 'toggle' | undefined;
9
8
  export declare const InputContext: import("react").Context<INPUT_CONTEXT_VALUE>;
10
9
  /**
@@ -4,7 +4,6 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- /// <reference types="react" />
8
7
  interface IInputGroupContext {
9
8
  isCompact?: boolean;
10
9
  }
@@ -4,7 +4,6 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- /// <reference types="react" />
8
7
  import { ITilesProps } from '../types';
9
8
  export declare const TilesContext: import("react").Context<Pick<ITilesProps, "value" | "onChange" | "name" | "isCentered"> | undefined>;
10
9
  export declare const useTilesContext: () => Pick<ITilesProps, "value" | "onChange" | "name" | "isCentered"> | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-forms",
3
- "version": "9.0.0-next.9",
3
+ "version": "9.1.0",
4
4
  "description": "Components relating to form elements in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -24,21 +24,21 @@
24
24
  "@zendeskgarden/container-field": "^3.0.0",
25
25
  "@zendeskgarden/container-utilities": "^2.0.0",
26
26
  "lodash.debounce": "^4.0.8",
27
- "polished": "^4.0.0",
27
+ "polished": "^4.3.1",
28
28
  "prop-types": "^15.5.7",
29
29
  "react-merge-refs": "^2.0.0"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "@zendeskgarden/react-theming": ">=9.0.0-next",
33
- "react": ">=16.8.0",
34
- "react-dom": ">=16.8.0",
33
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
34
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
35
35
  "styled-components": "^5.3.1"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@types/lodash.debounce": "4.0.9",
39
- "@zendeskgarden/react-theming": "^9.0.0-next.9",
40
- "@zendeskgarden/svg-icons": "7.0.0",
41
- "react-dropzone": "14.2.3"
39
+ "@zendeskgarden/react-theming": "^9.1.0",
40
+ "@zendeskgarden/svg-icons": "7.3.0",
41
+ "react-dropzone": "14.2.9"
42
42
  },
43
43
  "keywords": [
44
44
  "components",
@@ -50,5 +50,5 @@
50
50
  "access": "public"
51
51
  },
52
52
  "zendeskgarden:src": "src/index.ts",
53
- "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
53
+ "gitHead": "a2842d18615ad057d75988fde4df5a0c79d2714e"
54
54
  }