@televet/kibble-ui 1.17.0 → 1.17.2

package/build/components/Forms/DatePicker/datepicker.component.d.ts

@@ -5,7 +5,7 @@ export interface DatePickerProps {
     date: Date | null;
     onDateChange?: (date: Date | null) => void;
     dateFormat?: string | DateFormats;
-    inputProps?: Omit<TextInputProps, 'onChange' | 'value'>;
+    inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;
     placement?: PlacementWithLogical;
     minYear?: number;
     maxYear?: number;

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

package/build/index.js

@@ -3262,12 +3262,16 @@ var Button = React.forwardRef(function (props, ref) {
     var color = react.useColorModeValue(modeColor.content, dark.content);
     var borderColor = react.useColorModeValue(modeColor.border, dark.border);
     var p = __assign(__assign({}, props), { variant: variant, bg: bg, color: color, borderColor: borderColor });
+    var hoverLight = p.isDisabled ? modeColor.default : modeColor.hover;
+    var hoverDark = p.isDisabled ? dark.default : dark.hover;
     var hoverClass = {
-        bg: react.useColorModeValue(modeColor.hover, dark.hover),
+        bg: react.useColorModeValue(hoverLight, hoverDark),
     };
+    var activeLight = p.isDisabled ? modeColor.default : modeColor.active;
+    var activeDark = p.isDisabled ? dark.default : dark.active;
     var activeClass = {
-        bg: react.useColorModeValue(modeColor.active, dark.active),
-        transform: 'scale(0.98)',
+        bg: react.useColorModeValue(activeLight, activeDark),
+        transform: "scale(".concat(p.isDisabled ? '1' : '0.98', ")"),
     };
     var iconName = p.iconName; p.darkMode; var iconPosition = p.iconPosition, domProps = __rest(p, ["iconName", "darkMode", "iconPosition"]);
     if (iconName) {
@@ -14645,12 +14649,33 @@ var FormControlConfig = {
 
 var TextareaConfig = __assign({}, FormControlConfig);
 
-var TextInput = withFormControl(function (props) {
-    // 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 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"]);
+    var leftElement = props.leftElement, inputRef = props.inputRef; props.isFieldInline; var onClear = props.onClear, value = props.value, domProps = __rest(props, ["leftElement", "inputRef", "isFieldInline", "onClear", "value"]);
+    var rightElement = props.rightElement;
+    var handleClear = function () {
+        if (onClear) {
+            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({}, domProps, { ref: inputRef, size: size, value: value })),
         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))); });