@zendeskgarden/react-forms 9.15.8 → 9.16.0

package/dist/typings/elements/ClearableInput.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * 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';
+import { IClearableInputProps } from '../types';
+/**
+ * @extends InputHTMLAttributes<HTMLInputElement>
+ */
+export declare const ClearableInput: React.ForwardRefExoticComponent<IClearableInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/typings/index.d.ts

@@ -22,6 +22,8 @@ export { Select } from './elements/Select';
 export { Tiles } from './elements/tiles/Tiles';
 /** Input Group */
 export { InputGroup } from './elements/input-group/InputGroup';
+/** Clearable Input */
+export { ClearableInput } from './elements/ClearableInput';
 /** File Upload */
 export { FileUpload } from './elements/FileUpload';
 /** File List */
@@ -31,4 +33,4 @@ export { File } from './elements/file-list/components/File';
 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 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 IClearableInputProps, type ITilesProps, type ITilesTileProps, type IFauxInputProps, type IFauxInputIconProps as IFauxInputStartIconProps, type IFauxInputIconProps as IFauxInputEndIconProps, type IMediaInputProps } from './types';

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

@@ -26,6 +26,7 @@ export * from './text/StyledTextMediaFigure';
  * InputGroup styles
  */
 export * from './input-group/StyledInputGroup';
+export * from './input-group/StyledClearableInput';
 /**
  * Checkbox styles
  */

package/dist/typings/styled/input-group/StyledClearableInput.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * 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 interface IStyledClearableInputProps {
+    $isBare?: boolean;
+}
+export declare const StyledClearableInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("../..").IInputGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, IStyledClearableInputProps>> & string & Omit<import("react").ForwardRefExoticComponent<import("../..").IInputGroupProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/typings/styled/input-group/StyledInputGroup.d.ts

@@ -4,8 +4,12 @@
  * 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 { Validation } from '../../types';
 interface IStyledInputGroupProps {
     $isCompact?: boolean;
+    $isUnified?: boolean;
+    $focusInset?: boolean;
+    $validation?: Validation;
 }
 export declare const StyledInputGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;

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

@@ -4,7 +4,8 @@
  * 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, ReactElement, SelectHTMLAttributes, SVGAttributes, TextareaHTMLAttributes } from 'react';
+import { FieldsetHTMLAttributes, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, SelectHTMLAttributes, SVGAttributes, TextareaHTMLAttributes } from 'react';
+import { IIconButtonProps } from '@zendeskgarden/react-buttons';
 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"];
@@ -16,6 +17,10 @@ export interface IFieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetEleme
     isCompact?: boolean;
 }
 export interface IInputGroupProps extends Pick<IFieldsetProps, 'isCompact'>, HTMLAttributes<HTMLDivElement> {
+    /** Applies unified styling so the group is bordered/focused as a single field */
+    isUnified?: boolean;
+    /** Insets the container's own `isUnified` focus ring, e.g. when nested inside another group */
+    focusInset?: boolean;
 }
 export interface ILabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     /** Applies regular (non-bold) font weight */
@@ -54,14 +59,28 @@ export interface IInputProps extends IRadioProps {
     /** Applies validation state styling */
     validation?: Validation;
 }
+export interface IClearableInputProps extends Omit<IInputProps, 'value' | 'defaultValue'> {
+    /** Sets the input's value */
+    value?: string;
+    /** Sets the input's default value */
+    defaultValue?: string;
+    /** Defines the clear button's `aria-label` */
+    clearButtonLabel?: string;
+    /** Applies props to the wrapping InputGroup element */
+    wrapperProps?: Omit<IInputGroupProps, 'children' | 'isUnified' | 'isCompact'>;
+    /** Applies a ref to the wrapping InputGroup element */
+    wrapperRef?: Ref<HTMLDivElement>;
+    /** Applies props to the clear IconButton element */
+    buttonProps?: IIconButtonProps;
+}
 export interface IMediaInputProps extends IInputProps {
     /** Accepts a "start" icon to display */
     start?: ReactElement;
     /** Accepts an "end" icon to display */
     end?: ReactElement;
-    /** Applies props to the wrapping [FauxInput](#fauxinput) element */
+    /** Applies props to the wrapping FauxInput element */
     wrapperProps?: any;
-    /** Applies a ref to the wrapping [FauxInput](#fauxinput) element */
+    /** Applies a ref to the wrapping FauxInput element */
     wrapperRef?: any;
 }
 export interface IFauxInputProps extends Pick<IInputProps, 'isCompact' | 'isBare' | 'focusInset' | 'validation'>, HTMLAttributes<HTMLDivElement> {

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

@@ -15,6 +15,8 @@ interface IFieldContext extends IUseFieldReturnValue {
     hasHint: boolean;
     setHasMessage: (messagePresent: boolean) => void;
     hasMessage: boolean;
+    setHasLabel: (labelPresent: boolean) => void;
+    hasLabel: boolean;
 }
 export declare const FieldContext: import("react").Context<IFieldContext | undefined>;
 /**

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

@@ -4,12 +4,34 @@
  * 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 { Validation } from '../types';
+type InputGroupValidationId = object;
 interface IInputGroupContext {
     isCompact?: boolean;
+    isUnified?: boolean;
+    /** Registers a child Input's validation with the nearest unified group. */
+    registerValidation: (id: InputGroupValidationId, validation?: Validation) => void;
 }
 export declare const InputGroupContext: import("react").Context<IInputGroupContext | undefined>;
 /**
  * Retrieve InputGroup component context
  */
 export declare const useInputGroupContext: () => IInputGroupContext | undefined;
+/**
+ * Owns the validation published by nested `Input`s so `InputGroup` can pass
+ * `$validation` to its view without inspecting children or stamping DOM attributes.
+ * A unified group supports a single validation-bearing `Input`; a second one
+ * triggers a development warning, while the Map keeps last-wins and
+ * unmount-restore behavior so the unsupported composition degrades gracefully.
+ */
+export declare const useInputGroupValidationState: () => {
+    validation: "success" | "warning" | "error" | undefined;
+    registerValidation: (id: InputGroupValidationId, next?: Validation) => void;
+};
+/**
+ * Publishes `validation` to the nearest unified `InputGroup` so the container
+ * can style its chrome from `$validation` without a public DOM attribute.
+ * No-ops outside a group, and for the classic (non-unified) variant.
+ */
+export declare const usePublishInputGroupValidation: (validation?: Validation) => void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-forms",
-  "version": "9.15.8",
+  "version": "9.16.0",
   "description": "Components relating to form elements in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,6 +23,7 @@
   "dependencies": {
     "@zendeskgarden/container-field": "^3.0.21",
     "@zendeskgarden/container-utilities": "^2.0.4",
+    "@zendeskgarden/react-buttons": "^9.16.0",
     "lodash.debounce": "^4.0.8",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7",
@@ -36,7 +37,7 @@
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.9",
-    "@zendeskgarden/react-theming": "^9.15.8",
+    "@zendeskgarden/react-theming": "^9.16.0",
     "@zendeskgarden/svg-icons": "7.6.0",
     "react-dropzone": "14.3.8"
   },
@@ -50,5 +51,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "d82f80c4b56f8c2e3cd40a475dfffda5eac7ac37"
+  "gitHead": "26dc6a8cf9650e9214896d6994a4f3fba1e63541"
 }