@televet/kibble-ui 1.16.0 → 1.16.1-beta.30eeeuh.0

package/build/components/Forms/FormControl/formControl.component.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Dict } from 'shared/types';
+import { HelperTextAlignment } from './formControl.types';
 export interface WithFormControlProps {
     errorText?: string;
     helperText?: string;
@@ -11,6 +12,6 @@ export interface WithFormControlProps {
     label?: string;
     labelStyle?: Dict;
     formControlStyle?: Dict;
-    helperTextAlignment?: 'start' | 'end';
+    helperTextAlignment?: HelperTextAlignment;
 }
 export declare function withFormControl<P extends WithFormControlProps>(Component: React.ComponentType<P>): React.FC<P>;

package/build/components/Forms/FormControl/formControl.types.d.ts

@@ -0,0 +1,2 @@
+export declare type FormControlSize = 'sm' | 'md' | 'lg';
+export declare type HelperTextAlignment = 'start' | 'end';

package/build/components/Forms/TextInput/components/ClearButton/clearButton.component.d.ts

@@ -0,0 +1,6 @@
+import { FormControlSize } from 'components/Forms/FormControl/formControl.types';
+export interface ClearButtonProps {
+    handleClear?: () => void;
+    size?: FormControlSize;
+}
+export declare const ClearButton: ({ handleClear, size }: ClearButtonProps) => JSX.Element;

package/build/components/Forms/TextInput/textInput.component.d.ts

@@ -1,10 +1,14 @@
 import React, { ForwardedRef, ReactElement } from 'react';
 import { InputProps as CInputProps } from '@chakra-ui/react';
 import { WithFormControlProps } from '../FormControl/formControl.component';
+import { FormControlSize } from '../FormControl/formControl.types';
 export interface TextInputProps extends WithFormControlProps, CInputProps {
     leftElement?: ReactElement;
     rightElement?: ReactElement;
     inputRef?: ForwardedRef<HTMLInputElement>;
+    isClearable?: boolean;
+    onClear?: (val: string | number | readonly string[]) => void;
+    size?: FormControlSize;
 }
 declare const WrappedTextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 export { WrappedTextInput as TextInput };

package/build/index.js

@@ -4006,12 +4006,42 @@ var FormControlConfig = {
 
 var TextareaConfig = __assign({}, FormControlConfig);
 
-var TextInput = withFormControl(function (props) {
+var closeButtonSize = {
+    sm: 5,
+    md: 5,
+    lg: 6,
+};
+var ClearButton = function (_a) {
+    var handleClear = _a.handleClear, _b = _a.size, size = _b === void 0 ? 'md' : _b;
+    var colors = useTheme().colors;
+    return (React__default["default"].createElement(react.Button, { color: colors.icon.light.default, display: "inline-flex", minW: "auto", w: closeButtonSize[size], h: closeButtonSize[size], variant: "unstyled", opacity: 0.5, _hover: { opacity: 0.8 }, _active: { opacity: 1 }, mr: size === 'sm' ? 3 : 4, onClick: handleClear },
+        React__default["default"].createElement(Icon, { name: "close", color: "currentColor", size: size === 'lg' ? 'sm' : 'xs' })));
+};
+
+var TextInput = withFormControl(function (_a) {
+    var _b = _a.isClearable, isClearable = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, props = __rest(_a, ["isClearable", "size"]);
     // the disabled styles coming from the FormControlConfig weren't getting applied to the TextInput, so they're added inline instead
-    var leftElement = props.leftElement, rightElement = props.rightElement, inputRef = props.inputRef; props.isFieldInline; var domProps = __rest(props, ["leftElement", "rightElement", "inputRef", "isFieldInline"]);
+    var leftElement = props.leftElement, inputRef = props.inputRef; props.isFieldInline; var domProps = __rest(props, ["leftElement", "inputRef", "isFieldInline"]);
+    var rightElement = props.rightElement;
+    var _d = __read(React.useState(props.value || ''), 2), value = _d[0], setValue = _d[1];
+    var handleChange = function (e) {
+        setValue(e.target.value);
+        if (props.onChange) {
+            props.onChange(e);
+        }
+    };
+    var handleClear = function () {
+        setValue('');
+        if (props.onClear) {
+            props.onClear(value);
+        }
+    };
+    if (isClearable && !!value) {
+        rightElement = React__default["default"].createElement(ClearButton, { size: size, handleClear: handleClear });
+    }
     return (React__default["default"].createElement(react.InputGroup, null,
         leftElement ? React__default["default"].createElement(react.InputLeftElement, { children: leftElement, h: "100%" }) : null,
-        React__default["default"].createElement(react.Input, __assign({ ref: inputRef }, domProps)),
+        React__default["default"].createElement(react.Input, __assign({ ref: inputRef }, domProps, { onChange: function (e) { return handleChange(e); }, value: value, size: size })),
         rightElement ? React__default["default"].createElement(react.InputRightElement, { children: rightElement, h: "100%" }) : null));
 });
 var WrappedTextInput = React.forwardRef(function (props, ref) { return (React__default["default"].createElement(TextInput, __assign({ inputRef: ref }, props))); });