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

package/build/components/Feedback/index.d.ts

@@ -1 +1,2 @@
 export * from './Alert';
+export * from './Spinner';

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' | 'isClearable' | 'onClear'>;
+    inputProps?: Omit<TextInputProps, 'onChange' | 'value'>;
     placement?: PlacementWithLogical;
     minYear?: number;
     maxYear?: number;

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

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

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

@@ -1,21 +1,10 @@
 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 TextInputBaseProps extends WithFormControlProps, CInputProps {
+export interface TextInputProps 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

@@ -3666,6 +3666,26 @@ var AlertConfig = {
     },
 };
 
+var SpinnerSizMap = {
+    xs: 12,
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 48,
+};
+
+var spin = react.keyframes(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    from {transform: rotate(0deg);}\n    to {transform: rotate(360deg)}\n  "], ["\n    from {transform: rotate(0deg);}\n    to {transform: rotate(360deg)}\n  "])));
+var Spinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, darkMode = _a.darkMode;
+    var colors = useTheme().colors;
+    var spinnerColor = useAdaptiveColorMap(colors.icon, 'active', darkMode);
+    var spinnerSize = SpinnerSizMap[size];
+    var animation = "0.45s linear 0s infinite normal none running ".concat(spin);
+    return (React__default["default"].createElement(react.Box, { as: "div", display: "inline-block", animation: animation, borderWidth: "2px", borderStyle: "solid", borderTopColor: spinnerColor, borderRightColor: spinnerColor, borderLeftColor: "transparent", borderBottomColor: "transparent", height: "".concat(spinnerSize, "px"), width: "".concat(spinnerSize, "px"), borderRadius: "".concat(spinnerSize, "px") },
+        React__default["default"].createElement(react.Box, { as: "span", border: 0, w: "1px", h: "1px", m: "-1px", p: 0, overflow: "hidden", position: "absolute" }, "Loading...")));
+};
+var templateObject_1$1;
+
 var notificationCounterSize = {
     xs: 'sm',
     sm: 'md',
@@ -4006,33 +4026,12 @@ var FormControlConfig = {
 
 var TextareaConfig = __assign({}, FormControlConfig);
 
-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 });
-    }
+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"]);
     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({}, domProps, { ref: inputRef, size: size, value: value })),
+        React__default["default"].createElement(react.Input, __assign({ ref: inputRef }, domProps)),
         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))); });
@@ -16121,6 +16120,7 @@ exports.RatingDot = RatingDot;
 exports.RatingDots = RatingDots;
 exports.Select = WrappedSelect;
 exports.SelectConfig = SelectConfig;
+exports.Spinner = Spinner;
 exports.Switch = WrappedSwitch;
 exports.SwitchConfig = SwitchConfig;
 exports.Tab = Tab;