@zendeskgarden/react-forms 9.0.0-next.2 → 9.0.0-next.20

package/dist/typings/elements/common/Field.d.ts

@@ -4,15 +4,16 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes } from 'react';
-/**
- * @deprecated
- */
-export interface IFieldProps extends HTMLAttributes<HTMLDivElement> {
-    /** Sets the field ID and the prefix for the generated label, input, and hint IDs */
-    id?: string;
-}
+import React from 'react';
+import { Hint } from './Hint';
+import { Message } from './Message';
+import { Label } from './Label';
+export declare const FieldComponent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Field: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const Field: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>> & {
+    Hint: typeof Hint;
+    Label: typeof Label;
+    Message: typeof Message;
+};

package/dist/typings/elements/common/Hint.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Field.Hint` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const Hint: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/common/Label.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { ILabelProps } from '../../types';
 /**
+ * @deprecated use `Field.Label` instead
+ *
  * @extends LabelHTMLAttributes<HTMLLabelElement>
  */
 export declare const Label: React.ForwardRefExoticComponent<ILabelProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/typings/elements/common/Message.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IMessageProps } from '../../types';
 /**
+ * @deprecated use `Field.Message` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const Message: React.ForwardRefExoticComponent<IMessageProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/faux-input/FauxInput.d.ts

@@ -4,20 +4,10 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes } from 'react';
+import React from 'react';
 import { IFauxInputProps } from '../../types';
 import { StartIcon } from './components/StartIcon';
 import { EndIcon } from './components/EndIcon';
-/**
- * @deprecated use IFauxInputStartIconProps or IFauxInputEndIconProps instead
- */
-export interface IIconProps extends HTMLAttributes<HTMLElement> {
-    isHovered?: boolean;
-    isFocused: boolean;
-    isDisabled: boolean;
-    isRotated: boolean;
-    children: any;
-}
 /**
  *  @extends HTMLAttributes<HTMLDivElement>
  */

package/dist/typings/elements/faux-input/components/EndIcon.d.ts

@@ -10,6 +10,6 @@ import { IFauxInputIconProps } from '../../../types';
  * @extends SVGAttributes<SVGElement>
  */
 export declare const EndIcon: {
-    (props: IFauxInputIconProps): React.JSX.Element;
+    ({ isDisabled, isFocused, isHovered, isRotated, ...props }: IFauxInputIconProps): React.JSX.Element;
     displayName: string;
 };

package/dist/typings/elements/faux-input/components/StartIcon.d.ts

@@ -10,6 +10,6 @@ import { IFauxInputIconProps } from '../../../types';
  * @extends SVGAttributes<SVGElement>
  */
 export declare const StartIcon: {
-    (props: IFauxInputIconProps): React.JSX.Element;
+    ({ isDisabled, isFocused, isHovered, isRotated, ...props }: IFauxInputIconProps): React.JSX.Element;
     displayName: string;
 };

package/dist/typings/index.d.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 /** Common */
-export { Field, type IFieldProps } from './elements/common/Field';
+export { Field } from './elements/common/Field';
 export { Fieldset } from './elements/common/Fieldset';
 export { Hint } from './elements/common/Hint';
 export { Label } from './elements/common/Label';
@@ -18,7 +18,6 @@ export { Range } from './elements/Range';
 export { Textarea } from './elements/Textarea';
 export { Toggle } from './elements/Toggle';
 export { Select } from './elements/Select';
-export { MultiThumbRange } from './elements/MultiThumbRange';
 /** Tiles */
 export { Tiles } from './elements/tiles/Tiles';
 /** Input Group */
@@ -29,7 +28,7 @@ export { FileUpload } from './elements/FileUpload';
 export { FileList } from './elements/file-list/FileList';
 export { File } from './elements/file-list/components/File';
 /** Other */
-export { FauxInput, type IIconProps } from './elements/faux-input/FauxInput';
+export { FauxInput } from './elements/faux-input/FauxInput';
 export { MediaInput } from './elements/MediaInput';
 /** types */
-export { VALIDATION, type IFieldsetProps, type ILabelProps, type IMessageProps, type ICheckboxProps, type IRadioProps, type IToggleProps, type IInputProps, type ITextareaProps, type ISelectProps, type IFileUploadProps, type IFileProps, type IRangeProps, type IMultiThumbRangeProps, type IInputGroupProps, type ITilesProps, type ITilesTileProps, type IFauxInputProps, type IFauxInputIconProps as IFauxInputStartIconProps, type IFauxInputIconProps as IFauxInputEndIconProps, type IMediaInputProps } from './types';
+export { VALIDATION, type IFieldsetProps, type ILabelProps, type IMessageProps, type ICheckboxProps, type IRadioProps, type IToggleProps, type IInputProps, type ITextareaProps, type ISelectProps, type IFileUploadProps, type IFileProps, type IRangeProps, type IInputGroupProps, type ITilesProps, type ITilesTileProps, type IFauxInputProps, type IFauxInputIconProps as IFauxInputStartIconProps, type IFauxInputIconProps as IFauxInputEndIconProps, type IMediaInputProps } from './types';

package/dist/typings/styled/file-list/StyledFileIcon.d.ts

@@ -4,8 +4,14 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React from 'react';
-export declare const StyledFileIcon: import("styled-components").StyledComponent<({ children, isCompact, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {
+/// <reference types="react" />
+import { DefaultTheme } from 'styled-components';
+import { FileValidation } from '../../types';
+export interface IStyledFileIconProps {
+    $isCompact?: boolean;
+    $validation?: FileValidation;
+}
+export declare const StyledFileIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/index.d.ts

@@ -73,10 +73,6 @@ export * from './select/StyledSelectWrapper';
  * Range styles
  */
 export * from './range/StyledRangeInput';
-export * from './range/StyledSlider';
-export * from './range/StyledSliderThumb';
-export * from './range/StyledSliderTrack';
-export * from './range/StyledSliderTrackRail';
 /**
  * Tile styles
  */

package/dist/typings/styled/select/StyledSelect.d.ts

@@ -6,11 +6,8 @@
  */
 import { DefaultTheme } from 'styled-components';
 import { IStyledTextInputProps } from '../text/StyledTextInput';
-/**
- * 1. Select reset.
- */
 export declare const StyledSelect: import("styled-components").StyledComponent<"input", DefaultTheme, IStyledTextInputProps & {
     'data-garden-id': string;
     'data-garden-version': string;
     as: string;
-}, "data-garden-id" | "data-garden-version" | "as">;
+}, "as" | "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/select/StyledSelectWrapper.d.ts

@@ -4,7 +4,9 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export declare const StyledSelectWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../text/StyledTextFauxInput").IStyledTextFauxInputProps & {
+import { DefaultTheme } from 'styled-components';
+import { IStyledTextFauxInputProps } from '../text/StyledTextFauxInput';
+export declare const StyledSelectWrapper: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledTextFauxInputProps & {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/text/StyledTextFauxInput.d.ts

@@ -11,8 +11,4 @@ export interface IStyledTextFauxInputProps extends IStyledTextInputProps {
     isDisabled?: boolean;
     isReadOnly?: boolean;
 }
-export declare function getValidationHue(validation?: IStyledTextFauxInputProps['validation'], defaultHue?: string): string;
-/**
- * [1] removes inner input styles when focused
- */
 export declare const StyledTextFauxInput: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledTextFauxInputProps, never>;

package/dist/typings/styled/text/StyledTextMediaFigure.d.ts

@@ -4,16 +4,16 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+/// <reference types="react" />
 import { DefaultTheme } from 'styled-components';
-import React from 'react';
 interface IStyledTextMediaFigureProps {
-    isRotated?: boolean;
-    isHovered?: boolean;
-    isFocused?: boolean;
-    isDisabled?: boolean;
-    position: 'start' | 'end';
+    $isRotated?: boolean;
+    $isHovered?: boolean;
+    $isFocused?: boolean;
+    $isDisabled?: boolean;
+    $position: 'start' | 'end';
 }
-export declare const StyledTextMediaFigure: import("styled-components").StyledComponent<({ children, position, isHovered, isFocused, isDisabled, isRotated, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
+export declare const StyledTextMediaFigure: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledTextMediaFigureProps, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/text/StyledTextarea.d.ts

@@ -12,5 +12,5 @@ export declare const StyledTextarea: import("styled-components").StyledComponent
     as: string;
     'data-garden-id': string;
     'data-garden-version': string;
-} & IStyledTextareaProps, "data-garden-id" | "data-garden-version" | "as">;
+} & IStyledTextareaProps, "as" | "data-garden-id" | "data-garden-version">;
 export {};

package/dist/typings/styled/tiles/StyledTile.d.ts

@@ -5,10 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
-interface IStyledTileProps {
-    isDisabled?: boolean;
-    isFocused?: boolean;
-    isSelected?: boolean;
-}
-export declare const StyledTile: import("styled-components").StyledComponent<"label", DefaultTheme, IStyledTileProps, never>;
-export {};
+export declare const StyledTile: import("styled-components").StyledComponent<"label", DefaultTheme, {
+    'data-garden-id': string;
+    'data-garden-version': string;
+}, "data-garden-id" | "data-garden-version">;

package/dist/typings/types/index.d.ts

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { FieldsetHTMLAttributes, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, SelectHTMLAttributes, SVGAttributes, TextareaHTMLAttributes } from 'react';
+import { FieldsetHTMLAttributes, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, SelectHTMLAttributes, SVGAttributes, TextareaHTMLAttributes } from 'react';
 export declare const VALIDATION: readonly ["success", "warning", "error"];
 export declare const FILE_VALIDATION: readonly ["success", "error"];
 export declare const FILE_TYPE: readonly ["pdf", "zip", "image", "document", "spreadsheet", "presentation", "generic"];
@@ -52,9 +52,9 @@ export interface IInputProps extends IRadioProps {
 }
 export interface IMediaInputProps extends IInputProps {
     /** Accepts a "start" icon to display */
-    start?: any;
+    start?: ReactElement;
     /** Accepts an "end" icon to display */
-    end?: any;
+    end?: ReactElement;
     /** Applies props to the wrapping [FauxInput](#fauxinput) element */
     wrapperProps?: any;
     /** Applies a ref to the wrapping [FauxInput](#fauxinput) element */
@@ -102,37 +102,10 @@ export interface IRangeProps extends InputHTMLAttributes<HTMLInputElement> {
     /** @ignore */
     hasLowerTrack?: boolean;
 }
-export interface IMultiThumbRangeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    /** Sets the minimum permitted value */
-    min?: number;
-    /** Sets the maximum permitted value */
-    max?: number;
-    /** Sets the minimum thumb value */
-    minValue?: number;
-    /** Sets the maximum thumb value */
-    maxValue?: number;
-    /** Defines the stepping interval */
-    step?: number;
-    /** Defines the jumping interval for keyboard page up/down navigation. Defaults to `step`. */
-    jump?: number;
-    /** Indicates that the element is not interactive */
-    disabled?: IRangeProps['disabled'];
-    /**
-     * Handles change events
-     *
-     * @param {Object} updatedValues The values that have changed
-     * @param {number} [updatedValues.minValue] The optional minimum value
-     * @param {number} [updatedValues.maxValue] The optional maximum value
-     * */
-    onChange?: (updatedValues: {
-        minValue?: number;
-        maxValue?: number;
-    }) => void;
-}
 export interface ITilesProps extends HTMLAttributes<HTMLDivElement> {
-    /** Sets the value of the selected radio button */
+    /** Sets the selected value in a controlled tiles component */
     value?: IRadioProps['value'];
-    /** Handles radio selection */
+    /** Handles selection change event */
     onChange?: IRadioProps['onChange'];
     /** Sets the name used to reference the value of the control */
     name: NonNullable<IRadioProps['name']>;
@@ -140,7 +113,7 @@ export interface ITilesProps extends HTMLAttributes<HTMLDivElement> {
     isCentered?: boolean;
 }
 export interface ITilesTileProps extends HTMLAttributes<HTMLLabelElement> {
-    /** Sets the value of the input */
+    /** Sets the value of the tile */
     value?: IRadioProps['value'];
     /** Indicates that the element is not interactive */
     disabled?: IRadioProps['disabled'];

package/dist/typings/utils/useFieldContext.d.ts

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { MutableRefObject } from 'react';
+/// <reference types="react" />
 import { IUseFieldReturnValue } from '@zendeskgarden/container-field';
 interface IFieldContext extends IUseFieldReturnValue {
     getMessageProps: (messageProps: any) => any;
@@ -12,7 +12,6 @@ interface IFieldContext extends IUseFieldReturnValue {
     isLabelHovered: boolean;
     setIsLabelHovered: (isLabelHovered: boolean) => void;
     setIsLabelActive: (isLabelActive: boolean) => void;
-    multiThumbRangeRef: MutableRefObject<HTMLDivElement | null>;
     setHasHint: (hintPresent: boolean) => void;
     hasHint: boolean;
     setHasMessage: (messagePresent: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-forms",
-  "version": "9.0.0-next.2",
+  "version": "9.0.0-next.20",
   "description": "Components relating to form elements in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -22,23 +22,22 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-field": "^3.0.0",
-    "@zendeskgarden/container-slider": "^0.1.1",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "lodash.debounce": "^4.0.8",
-    "polished": "^4.0.0",
+    "polished": "^4.3.1",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.9",
-    "@zendeskgarden/react-theming": "^9.0.0-next.2",
-    "@zendeskgarden/svg-icons": "7.0.0",
+    "@zendeskgarden/react-theming": "^9.0.0-next.20",
+    "@zendeskgarden/svg-icons": "7.1.1",
     "react-dropzone": "14.2.3"
   },
   "keywords": [
@@ -51,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e47dd011fedf130106acdb485a023340564171af"
+  "gitHead": "eab087ac0d6e74b3a4489d37d067baf7a225e7a8"
 }