@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.2

package/lib/cjs/hooks/useDeprecationWarning/useDeprecationWarning.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _react = require("react");
+
+var alreadyShown = new _set["default"]();
+/**
+ * Provides a development-only console warning on component mount.
+ * @param {String} text - The deprecation warning text. It should describe what is being deprecated,
+ * when it is being deprecated (what lib version usually), and what to use instead.
+ * @param {object} options
+ * @param {boolean} options.isActive - whether warning should be shown
+ * @param {boolean} options.onlyOnce - if true then warning will be globally shown just once
+ * e.g. "\`MyField\` will be deprecated in Astro-UI 1.0.0, use \`MyOtherField\` instead."
+ */
+
+var useDeprecationWarning = function useDeprecationWarning() {
+  var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$onlyOnce = _ref.onlyOnce,
+      onlyOnce = _ref$onlyOnce === void 0 ? true : _ref$onlyOnce,
+      _ref$isActive = _ref.isActive,
+      isActive = _ref$isActive === void 0 ? true : _ref$isActive;
+
+  (0, _react.useEffect)(function () {
+    if (!isActive) {
+      return;
+    }
+
+    if (onlyOnce && alreadyShown.has(text)) {
+      return;
+    }
+
+    if (process.env.NODE_ENV === 'development') {
+      alreadyShown.add(text); // eslint-disable-next-line no-console
+
+      console.warn("".concat(text), '\n', '\n', 'NOTE: This is a development-only warning and will not display in production.');
+    }
+  }, [isActive]);
+};
+
+var _default = useDeprecationWarning;
+exports["default"] = _default;

package/lib/cjs/hooks/useDeprecationWarning/useDeprecationWarning.test.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _toArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toArray"));
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _useDeprecationWarning = _interopRequireDefault(require("./useDeprecationWarning"));
+
+// since we cannot reset `alreadyShown` inside of module we will generate unique messages
+var uniqueIndex = 0;
+
+function generateUniqueMessage() {
+  var message = "Text ".concat(uniqueIndex);
+  uniqueIndex += 1;
+  return message;
+}
+
+beforeEach(function () {
+  process.env.NODE_ENV = 'development';
+
+  global.console.warn = function () {
+    return jest.mock();
+  }; // eslint-disable-line no-console
+
+});
+afterEach(function () {
+  process.env.NODE_ENV = 'test';
+  jest.restoreAllMocks();
+});
+test('default useDeprecationWarning', function () {
+  var spy = jest.spyOn(console, 'warn');
+  expect(spy).not.toHaveBeenCalled();
+  (0, _reactHooks.renderHook)(function () {
+    return (0, _useDeprecationWarning["default"])();
+  });
+  expect(spy).toHaveBeenCalledTimes(1);
+});
+test('useDeprecationWarning with string', function () {
+  var string = generateUniqueMessage();
+  var spy = jest.spyOn(console, 'warn');
+  expect(spy).not.toHaveBeenCalled();
+  (0, _reactHooks.renderHook)(function () {
+    return (0, _useDeprecationWarning["default"])(string);
+  });
+  expect(spy).toHaveBeenNthCalledWith(1, expect.stringMatching(string), expect.any(String), expect.any(String), expect.any(String));
+});
+test('useDeprecationWarning by default ignores duplicated messages', function () {
+  var spy = jest.spyOn(console, 'warn');
+  var message = generateUniqueMessage();
+  (0, _reactHooks.renderHook)(function () {
+    return (0, _useDeprecationWarning["default"])(message);
+  });
+  (0, _reactHooks.renderHook)(function () {
+    return (0, _useDeprecationWarning["default"])(message);
+  });
+  expect(spy).toHaveBeenCalledTimes(1);
+});
+test('useDeprecationWarning shows same message for few times if explicitly allowed', function () {
+  var spy = jest.spyOn(console, 'warn');
+  var message = generateUniqueMessage();
+  (0, _reactHooks.renderHook)(function () {
+    return (0, _useDeprecationWarning["default"])(message, {
+      onlyOnce: false
+    });
+  });
+  (0, _reactHooks.renderHook)(function () {
+    return (0, _useDeprecationWarning["default"])(message, {
+      onlyOnce: false
+    });
+  });
+  expect(spy).toHaveBeenCalledTimes(2);
+});
+test('shows message after isActive is flipped from false to true', function () {
+  var spy = jest.spyOn(console, 'warn');
+  var message = generateUniqueMessage();
+
+  var _renderHook = (0, _reactHooks.renderHook)(function (_ref) {
+    var _ref2 = (0, _toArray2["default"])(_ref),
+        args = (0, _slice["default"])(_ref2).call(_ref2, 0);
+
+    return _useDeprecationWarning["default"].apply(void 0, args);
+  }, {
+    initialProps: [message, {
+      isActive: false
+    }]
+  }),
+      rerender = _renderHook.rerender;
+
+  rerender([message, {
+    isActive: true
+  }]);
+  expect(spy).toHaveBeenCalledTimes(1);
+});

package/lib/cjs/hooks/useField/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useField["default"];
+  }
+});
+
+var _useField = _interopRequireDefault(require("./useField"));

package/lib/cjs/hooks/useField/useField.js

@@ -0,0 +1,249 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
+
+var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = require("react");
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _noop = _interopRequireDefault(require("lodash/noop"));
+
+var _label = require("@react-aria/label");
+
+var _interactions = require("@react-aria/interactions");
+
+var _focus = require("@react-aria/focus");
+
+var _utils = require("@react-aria/utils");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _hooks = require("../../hooks");
+
+var _constants = require("../../components/Label/constants");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source))).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+/**
+ * Generates the necessary props to be used in field components.
+ * @param {{}} props Props for the field
+ * @returns {{}} Prop objects to be spread into field components.
+ */
+var useField = function useField() {
+  var _context;
+
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var autocomplete = props.autocomplete,
+      autoComplete = props.autoComplete,
+      autoCorrect = props.autoCorrect,
+      children = props.children,
+      className = props.className,
+      _props$containerProps = props.containerProps,
+      containerProps = _props$containerProps === void 0 ? {} : _props$containerProps,
+      _props$controlProps = props.controlProps,
+      controlProps = _props$controlProps === void 0 ? {} : _props$controlProps,
+      defaultText = props.defaultText,
+      defaultValue = props.defaultValue,
+      direction = props.direction,
+      disabledKeys = props.disabledKeys,
+      hasAutoFocus = props.hasAutoFocus,
+      hasNoStatusIndicator = props.hasNoStatusIndicator,
+      helperText = props.helperText,
+      hintText = props.hintText,
+      id = props.id,
+      isDefaultSelected = props.isDefaultSelected,
+      isDisabled = props.isDisabled,
+      isReadOnly = props.isReadOnly,
+      isRequired = props.isRequired,
+      isSelected = props.isSelected,
+      label = props.label,
+      labelMode = props.labelMode,
+      _props$labelProps = props.labelProps,
+      labelProps = _props$labelProps === void 0 ? {} : _props$labelProps,
+      maxLength = props.maxLength,
+      name = props.name,
+      onBlur = props.onBlur,
+      _props$onChange = props.onChange,
+      onChange = _props$onChange === void 0 ? _noop["default"] : _props$onChange,
+      onClear = props.onClear,
+      onFocus = props.onFocus,
+      onFocusChange = props.onFocusChange,
+      onLoadMore = props.onLoadMore,
+      onOpenChange = props.onOpenChange,
+      onSelectionChange = props.onSelectionChange,
+      placeholder = props.placeholder,
+      role = props.role,
+      selectedKey = props.selectedKey,
+      spellCheck = props.spellCheck,
+      _props$status = props.status,
+      status = _props$status === void 0 ? _statuses["default"].DEFAULT : _props$status,
+      statusClasses = props.statusClasses,
+      type = props.type,
+      value = props.value,
+      others = (0, _objectWithoutProperties2["default"])(props, ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isReadOnly", "isRequired", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value"]); // 0 could be a valid input for fields, but null, undefined, and '' are not
+
+  var _useState = (0, _react.useState)(!!value || value === 0),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      hasValue = _useState2[0],
+      setHasValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      hasFocusWithin = _useState4[0],
+      setFocusWithin = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    if (!!defaultValue || defaultValue === 0 || !!value || value === 0 || !!placeholder || placeholder === 0) {
+      setHasValue(true);
+    } else {
+      setHasValue(false);
+    }
+  }, [defaultValue, value, placeholder]); // Capture value changes so we can apply the has-value class to the container
+
+  var fieldOnChange = function fieldOnChange(e) {
+    var _e$target;
+
+    var eventValue = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value;
+
+    if (!!eventValue || eventValue === 0 || !!placeholder || placeholder === 0) {
+      setHasValue(true);
+    } else {
+      setHasValue(false);
+    } // Make sure to call the original onChange event
+
+
+    return onChange(e);
+  };
+
+  var _useLabel = (0, _label.useLabel)(_objectSpread(_objectSpread({}, props), controlProps)),
+      raLabelProps = _useLabel.labelProps,
+      raFieldProps = _useLabel.fieldProps;
+
+  var _useFocusRing = (0, _focus.useFocusRing)(),
+      isFocusVisible = _useFocusRing.isFocusVisible,
+      focusProps = _useFocusRing.focusProps;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, _objectSpread((0, _defineProperty3["default"])({
+    hasNoStatusIndicator: hasNoStatusIndicator,
+    isFocused: isFocusVisible,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly
+  }, "is-".concat(status), true), statusClasses)),
+      classNames = _useStatusClasses.classNames;
+
+  var ariaProps = (0, _reduce["default"])(_context = (0, _entries["default"])(others)).call(_context, function (acc, _ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        key = _ref2[0],
+        val = _ref2[1];
+
+    if (key.match(/^aria-.*/)) return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty3["default"])({}, key, val));
+    return _objectSpread({}, acc);
+  }, {}); // Handle focus within and value state for the container. These are needed for float labels.
+
+  var _useFocusWithin = (0, _interactions.useFocusWithin)({
+    onFocusWithinChange: setFocusWithin
+  }),
+      focusWithinProps = _useFocusWithin.focusWithinProps;
+
+  var isFloatLabel = labelMode === _constants.modes.FLOAT;
+  var isLeftLabel = labelMode === _constants.modes.LEFT;
+  var isFloatLabelActive = isFloatLabel && (hasValue || hasFocusWithin || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
+
+  var _useStatusClasses2 = (0, _hooks.useStatusClasses)(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, {
+    'field-container': true,
+    // generates 'field-container' class
+    hasValue: hasValue,
+    hasFocusWithin: hasFocusWithin,
+    isLeftLabel: isLeftLabel,
+    isFloatLabel: isFloatLabel,
+    isFloatLabelActive: isFloatLabelActive
+  }),
+      containerClasses = _useStatusClasses2.classNames;
+
+  var nonAriaOthers = _objectSpread({}, (0, _omit["default"])(others, (0, _keys["default"])(ariaProps)));
+
+  var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaOthers), (0, _utils.mergeProps)(containerProps, focusWithinProps)), {}, {
+    className: containerClasses,
+    sx: _objectSpread({
+      position: 'relative'
+    }, containerProps === null || containerProps === void 0 ? void 0 : containerProps.sx)
+  });
+
+  var fieldControlProps = _objectSpread(_objectSpread(_objectSpread({
+    autocomplete: autocomplete || autoComplete,
+    autoCorrect: autoCorrect,
+    autoFocus: hasAutoFocus,
+    className: classNames,
+    defaultSelected: isDefaultSelected,
+    defaultValue: defaultValue,
+    disabled: isDisabled,
+    id: id,
+    isFocused: hasFocusWithin,
+    maxLength: maxLength,
+    name: name,
+    onChange: fieldOnChange,
+    placeholder: placeholder,
+    readOnly: isReadOnly,
+    required: isRequired,
+    role: role,
+    spellCheck: spellCheck,
+    type: type,
+    value: value
+  }, ariaProps), raFieldProps), (0, _utils.mergeProps)({
+    onBlur: onBlur,
+    onFocus: onFocus
+  }, (0, _omit["default"])(controlProps, 'data-testid'), focusProps));
+
+  var fieldLabelProps = _objectSpread(_objectSpread({
+    children: label,
+    className: classNames,
+    hintText: hintText,
+    isRequired: isRequired,
+    mode: labelMode
+  }, raLabelProps), labelProps);
+
+  return {
+    fieldContainerProps: fieldContainerProps,
+    fieldControlProps: fieldControlProps,
+    fieldLabelProps: fieldLabelProps
+  };
+};
+
+var _default = useField;
+exports["default"] = _default;

package/lib/cjs/hooks/useField/useField.test.js

@@ -0,0 +1,236 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _useField = _interopRequireDefault(require("./useField"));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _constants = require("../../components/Label/constants");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context4; (0, _forEach["default"])(_context4 = ownKeys(Object(source))).call(_context4, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var defaultProps = {
+  autocomplete: 'off',
+  className: 'test',
+  containerProps: {
+    id: 'test'
+  },
+  controlProps: {
+    id: 'test'
+  },
+  defaultValue: 'test',
+  hasAutoFocus: true,
+  id: 'test',
+  isDefaultSelected: true,
+  isDisabled: true,
+  isReadOnly: true,
+  isRequired: true,
+  isSelected: true,
+  label: 'test',
+  name: 'test',
+  placeholder: 'test',
+  role: 'test',
+  statusClasses: {
+    isTested: true
+  },
+  type: 'test',
+  value: 'test'
+};
+test('default useField', function () {
+  (0, _reactHooks.renderHook)(function () {
+    return (0, _useField["default"])();
+  });
+});
+test('should return props objects for field components', function () {
+  var _context, _context2;
+
+  var _renderHook = (0, _reactHooks.renderHook)(function () {
+    return (0, _useField["default"])(defaultProps);
+  }),
+      result = _renderHook.result;
+
+  var _result$current = result.current,
+      fieldContainerProps = _result$current.fieldContainerProps,
+      fieldControlProps = _result$current.fieldControlProps,
+      fieldLabelProps = _result$current.fieldLabelProps;
+  expect(fieldContainerProps).toEqual({
+    className: 'field-container has-value',
+    id: defaultProps.containerProps.id,
+    onBlur: expect.any(Function),
+    onFocus: expect.any(Function),
+    sx: expect.objectContaining({
+      position: 'relative'
+    })
+  });
+  expect(fieldControlProps).toEqual({
+    autocomplete: defaultProps.autocomplete,
+    autoFocus: defaultProps.hasAutoFocus,
+    className: (0, _concat["default"])(_context = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context, _statuses["default"].DEFAULT, " is-tested"),
+    defaultSelected: true,
+    defaultValue: defaultProps.defaultValue,
+    disabled: true,
+    id: defaultProps.id,
+    isFocused: false,
+    readOnly: true,
+    required: true,
+    onBlur: expect.any(Function),
+    onChange: expect.any(Function),
+    onFocus: expect.any(Function),
+    name: defaultProps.name,
+    placeholder: defaultProps.placeholder,
+    role: defaultProps.role,
+    type: defaultProps.type,
+    value: defaultProps.value,
+    'aria-label': undefined,
+    'aria-labelledby': expect.any(String)
+  });
+  expect(fieldLabelProps).toEqual({
+    children: defaultProps.label,
+    className: (0, _concat["default"])(_context2 = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context2, _statuses["default"].DEFAULT, " is-tested"),
+    id: expect.any(String),
+    htmlFor: expect.any(String),
+    isRequired: true
+  });
+});
+test('should return isFloatLabelActive class for container', function () {
+  var _renderHook2 = (0, _reactHooks.renderHook)(function (initialProps) {
+    return (0, _useField["default"])(_objectSpread(_objectSpread({}, initialProps), {}, {
+      placeholder: null
+    }));
+  }, {
+    initialProps: defaultProps
+  }),
+      result = _renderHook2.result,
+      rerender = _renderHook2.rerender; // Does not have the class if the label mode is not set to float
+
+
+  expect(result.current.fieldContainerProps.className).not.toContain('is-float-label-active'); // Has the class if the value is valid and label mode is float
+
+  rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+    labelMode: _constants.modes.FLOAT
+  }));
+  expect(result.current.fieldContainerProps.className).toContain('is-float-label-active'); // Does not have the class if the value is invalid
+
+  (0, _reactHooks.act)(function () {
+    return result.current.fieldControlProps.onChange({
+      target: {
+        value: undefined
+      }
+    });
+  });
+  expect(result.current.fieldContainerProps.className).not.toContain('is-float-label-active'); // Has the class if the container has focus within it
+
+  (0, _reactHooks.act)(function () {
+    return result.current.fieldContainerProps.onFocus({});
+  });
+  expect(result.current.fieldContainerProps.className).toContain('is-float-label-active'); // Does not have the class if the container loses focus within it
+
+  (0, _reactHooks.act)(function () {
+    return result.current.fieldContainerProps.onBlur({
+      currentTarget: {
+        contains: jest.fn()
+      }
+    });
+  });
+  expect(result.current.fieldContainerProps.className).not.toContain('is-float-label-active'); // Has the class if the mode is float and the isFloatLabelActive containerProp is passed in
+
+  rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+    labelMode: _constants.modes.FLOAT,
+    containerProps: {
+      isFloatLabelActive: true
+    }
+  }));
+  expect(result.current.fieldContainerProps.className).toContain('is-float-label-active');
+});
+test('should return isLeftLabel class for container', function () {
+  var _renderHook3 = (0, _reactHooks.renderHook)(function (initialProps) {
+    return (0, _useField["default"])(initialProps);
+  }, {
+    initialProps: defaultProps
+  }),
+      result = _renderHook3.result,
+      rerender = _renderHook3.rerender; // Does not have the class if the label mode is not set to left
+
+
+  expect(result.current.fieldContainerProps.className).not.toContain('is-left-label'); // Has the class if the value is valid and label mode is left
+
+  rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+    labelMode: _constants.modes.LEFT
+  }));
+  expect(result.current.fieldContainerProps.className).toContain('is-left-label');
+});
+test('should return hasValue class for container when onChange updates internal state', function () {
+  var onChange = jest.fn();
+  var numCalls = 0;
+
+  var _renderHook4 = (0, _reactHooks.renderHook)(function () {
+    return (0, _useField["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      defaultValue: null,
+      placeholder: null,
+      onChange: onChange,
+      value: ''
+    }));
+  }),
+      result = _renderHook4.result; // Empty string is not a valid value
+
+
+  expect(result.current.fieldContainerProps.className).not.toContain('has-value'); // 0 should be a valid value
+
+  (0, _reactHooks.act)(function () {
+    return result.current.fieldControlProps.onChange({
+      target: {
+        value: 0
+      }
+    });
+  });
+  expect(result.current.fieldContainerProps.className).toContain('has-value');
+  numCalls += 1; // undefined is not a valid value
+
+  (0, _reactHooks.act)(function () {
+    return result.current.fieldControlProps.onChange({
+      target: {
+        value: undefined
+      }
+    });
+  });
+  expect(result.current.fieldContainerProps.className).not.toContain('has-value');
+  numCalls += 1; // a non-empty string is a valid value
+
+  (0, _reactHooks.act)(function () {
+    return result.current.fieldControlProps.onChange({
+      target: {
+        value: 'a'
+      }
+    });
+  });
+  expect(result.current.fieldContainerProps.className).toContain('has-value');
+  numCalls += 1; // the original onChange should be called each time
+
+  expect(numCalls).toBeGreaterThan(0);
+  expect(onChange).toHaveBeenCalledTimes(numCalls);
+});

package/lib/cjs/hooks/useImageUploadState/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "useImageUploadState", {
+  enumerable: true,
+  get: function get() {
+    return _useImageUploadState["default"];
+  }
+});
+
+var _useImageUploadState = _interopRequireDefault(require("./useImageUploadState"));