"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Label = _interopRequireDefault(require("../Label"));

var _useBlockingEffect = _interopRequireDefault(require("../hooks/useBlockingEffect"));

var _SuperField = require("../SuperField");

var SuperFieldLabel = function SuperFieldLabel(_ref) {
  var children = _ref.children,
      alwaysShrank = _ref.alwaysShrank;

  var _useSuperFieldContext = (0, _SuperField.useSuperFieldContext)(),
      id = _useSuperFieldContext.id,
      onLabelShrank = _useSuperFieldContext.onLabelShrank,
      onLabelExpand = _useSuperFieldContext.onLabelExpand,
      isFocused = _useSuperFieldContext.isFocused,
      isInputFilledIn = _useSuperFieldContext.isInputFilledIn,
      isLabelShrank = _useSuperFieldContext.isLabelShrank;

  (0, _useBlockingEffect.default)(function () {
    if (isInputFilledIn || isFocused || alwaysShrank) {
      onLabelShrank();
    } else {
      onLabelExpand();
    }
  }, [isFocused, isInputFilledIn]);
  return (
    /*#__PURE__*/
    _react.default.createElement(_Label.default, {
      htmlFor: id,
      sx: {
        position: 'absolute',
        top: 0,
        left: 0,
        transition: 'color 200ms ease, transform 200ms ease 0ms',
        transform: isLabelShrank ? 'translate(0, 0) scale(0.75)' : 'translate(0, 16px)',
        transformOrigin: 'top left',
        color: 'inherit'
      }
    }, children)
  );
};

process.env.NODE_ENV !== "production" ? SuperFieldLabel.propTypes = {
  alwaysShrank: _propTypes.default.bool,
  children: _propTypes.default.node
} : void 0;
var _default = SuperFieldLabel;
exports.default = _default;