@7shifts/sous-chef 1.5.6 → 1.5.7

package/dist/forms/TextField/TextField.d.ts

@@ -1,24 +1,27 @@
 import React from 'react';
 declare type AutoCompleteType = 'off' | 'on';
 declare type Props = {
-    name: string;
+    autoComplete?: AutoCompleteType;
+    autoFocus?: boolean;
+    caption?: React.ReactNode;
+    defaultValue?: string;
+    disabled?: boolean;
+    error?: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
     id?: string;
-    value?: string;
-    onChange?: (e: string) => void;
-    onBlur?: (e: string) => void;
     label?: React.ReactNode;
-    caption?: React.ReactNode;
-    error?: string;
+    maxLength?: number;
+    name: string;
+    onBlur?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onFocus?: (value: string) => void;
+    onKeyDown?: (key: string) => void;
     placeholder?: string;
-    disabled?: boolean;
     /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
     prefix?: React.ReactNode;
     /** Use suffix for things like units of measure (“in”, “cm”, ”hours”) or icons. */
     suffix?: React.ReactNode;
-    defaultValue?: string;
-    autoFocus?: boolean;
-    autoComplete?: AutoCompleteType;
+    value?: string;
 };
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/dist/forms/hooks/useFieldControllers.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 declare type InputElement = HTMLInputElement | HTMLTextAreaElement;
 declare type FieldControls = {
     id: string;
@@ -6,15 +6,19 @@ declare type FieldControls = {
     value?: string;
     onChange: (e: React.ChangeEvent<InputElement>) => void;
     onBlur: (e: React.ChangeEvent<InputElement>) => void;
+    onFocus: (e: React.FocusEvent<InputElement>) => void;
+    onKeyDown: (e: React.KeyboardEvent<InputElement>) => void;
 };
 declare type Props = {
     name: string;
     id?: string;
     value?: string;
-    onChange?: (e: string) => void;
-    onBlur?: (e: string) => void;
+    onChange?: (value: string) => void;
+    onBlur?: (value: string) => void;
+    onFocus?: (value: string) => void;
+    onKeyDown?: (key: string) => void;
     error?: string;
     type?: 'text' | 'currency';
 };
-export declare const useFieldControllers: ({ name, id: inputId, value, onChange, onBlur, error, type }: Props) => FieldControls;
+export declare const useFieldControllers: ({ name, id: inputId, value, onChange, onBlur, onFocus, onKeyDown, error, type }: Props) => FieldControls;
 export {};

package/dist/index.js

@@ -1652,6 +1652,8 @@ var useFieldControllers = function useFieldControllers(_ref) {
       value = _ref.value,
       _onChange = _ref.onChange,
       _onBlur = _ref.onBlur,
+      _onFocus = _ref.onFocus,
+      _onKeyDown = _ref.onKeyDown,
       error = _ref.error,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type;
@@ -1672,6 +1674,12 @@ var useFieldControllers = function useFieldControllers(_ref) {
     },
     onBlur: function onBlur(e) {
       return _onBlur && _onBlur(e.target.value);
+    },
+    onFocus: function onFocus(e) {
+      return _onFocus && _onFocus(e.target.value);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return _onKeyDown && _onKeyDown(e.key);
     }
   };
   var formikState = getFormikState(name, formik);
@@ -2080,58 +2088,66 @@ var styles$k = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field
 var TextField = function TextField(_ref, ref) {
   var _classnames;
 
-  var name = _ref.name,
-      inputId = _ref.id,
-      value = _ref.value,
-      onChange = _ref.onChange,
-      onBlur = _ref.onBlur,
-      label = _ref.label,
+  var autoComplete = _ref.autoComplete,
+      autoFocus = _ref.autoFocus,
       caption = _ref.caption,
+      defaultValue = _ref.defaultValue,
+      disabled = _ref.disabled,
       error = _ref.error,
+      inputId = _ref.id,
+      label = _ref.label,
+      maxLength = _ref.maxLength,
+      name = _ref.name,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      onKeyDown = _ref.onKeyDown,
       placeholder = _ref.placeholder,
-      disabled = _ref.disabled,
       prefix = _ref.prefix,
       suffix = _ref.suffix,
-      defaultValue = _ref.defaultValue,
-      autoFocus = _ref.autoFocus,
-      autoComplete = _ref.autoComplete;
+      value = _ref.value;
   var controllers = useFieldControllers({
-    name: name,
+    error: error,
     id: inputId,
-    value: value,
+    name: name,
     onChange: onChange,
     onBlur: onBlur,
-    error: error
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value
   });
   var hasError = !!controllers.error;
   var fieldProps = {
-    name: name,
-    id: controllers.id,
-    label: label,
     caption: caption,
-    error: controllers.error
+    error: controllers.error,
+    label: label,
+    id: controllers.id,
+    name: name
   };
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: prefix,
     suffix: suffix
   }, React__default.createElement("input", {
-    name: name,
-    id: controllers.id,
-    className: classnames(styles$k['text-field'], (_classnames = {}, _classnames[styles$k['text-field--invalid']] = hasError, _classnames)),
-    type: "text",
-    "data-testid": "text-field-" + name,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
     "aria-invalid": hasError,
+    autoComplete: autoComplete,
+    autoFocus: autoFocus,
+    className: classnames(styles$k['text-field'], (_classnames = {}, _classnames[styles$k['text-field--invalid']] = hasError, _classnames)),
+    "data-testid": "text-field-" + name,
     disabled: disabled,
-    placeholder: placeholder,
     defaultValue: defaultValue,
-    value: controllers.value,
-    onChange: controllers.onChange,
+    id: controllers.id,
+    maxLength: maxLength,
+    name: name,
     onBlur: controllers.onBlur,
-    size: 1,
+    onChange: controllers.onChange,
+    onFocus: controllers.onFocus,
+    onKeyDown: controllers.onKeyDown,
+    placeholder: placeholder,
     ref: ref,
-    autoFocus: autoFocus,
-    autoComplete: autoComplete
+    size: 1,
+    type: "text",
+    value: controllers.value
   })));
 };