@atlaskit/textfield 5.1.2

package/dist/cjs/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _textField.default;
+  }
+});
+Object.defineProperty(exports, "TextFieldColors", {
+  enumerable: true,
+  get: function get() {
+    return _styles.textFieldColors;
+  }
+});
+
+var _textField = _interopRequireDefault(require("./text-field"));
+
+var _styles = require("./styles");

package/dist/cjs/styles.js

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textFieldColors = exports.inputStyles = exports.containerStyles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
+
+var componentTokens = _interopRequireWildcard(require("./component-tokens"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(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) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var fontSize = (0, _constants.fontSize)();
+var gridSize = (0, _constants.gridSize)();
+var disabledRules = {
+  light: {
+    backgroundColor: componentTokens.disabledBackgroundColor.light,
+    backgroundColorHover: componentTokens.disabledBackgroundColor.light,
+    borderColor: componentTokens.disabledBackgroundColor.light,
+    textColor: componentTokens.disabledTextColor.light
+  },
+  dark: {
+    backgroundColor: componentTokens.disabledBackgroundColor.dark,
+    backgroundColorHover: componentTokens.disabledBackgroundColor.dark,
+    borderColor: componentTokens.disabledBackgroundColor.dark,
+    textColor: componentTokens.disabledTextColor.dark
+  }
+};
+var invalidRules = {
+  light: {
+    // ----
+    backgroundColor: componentTokens.defaultBackgroundColor.light,
+    backgroundColorHover: componentTokens.defaultBackgroundColorHover.light,
+    // ^--- the above values aren't used directly they remain because its exposed by the `textFieldColors` export
+    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.light,
+    borderColor: (0, _tokens.token)('color.iconBorder.danger', _colors.R400),
+    borderColorFocus: componentTokens.defaultBorderColorFocus.light
+  },
+  dark: {
+    // ----
+    backgroundColor: componentTokens.defaultBackgroundColor.dark,
+    backgroundColorHover: componentTokens.defaultBackgroundColorHover.dark,
+    // ^--- the above values aren't used directly they remain because its exposed by the `textFieldColors` export
+    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.dark,
+    borderColor: (0, _tokens.token)('color.iconBorder.danger', _colors.R400),
+    borderColorFocus: componentTokens.defaultBorderColorFocus.dark
+  }
+};
+var backgroundColor = {
+  standard: componentTokens.defaultBackgroundColor,
+  subtle: componentTokens.transparent,
+  none: componentTokens.transparent
+};
+var backgroundColorFocus = {
+  standard: componentTokens.defaultBackgroundColorFocus,
+  subtle: componentTokens.defaultBackgroundColorFocus,
+  none: componentTokens.transparent
+};
+var backgroundColorHover = {
+  standard: componentTokens.defaultBackgroundColorHover,
+  subtle: componentTokens.subtleBackgroundColorHover,
+  none: componentTokens.transparent
+};
+var borderColor = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.transparent,
+  none: componentTokens.transparent
+};
+var borderColorFocus = {
+  standard: componentTokens.defaultBorderColorFocus,
+  subtle: componentTokens.defaultBorderColorFocus,
+  none: componentTokens.transparent
+};
+
+var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor(appearance, mode) {
+  return {
+    backgroundColor: backgroundColor[appearance][mode],
+    borderColor: borderColor[appearance][mode],
+    color: componentTokens.textColor[mode],
+    cursor: 'text',
+    '&:hover': {
+      backgroundColor: backgroundColorHover[appearance][mode]
+    },
+    '&:focus-within': {
+      backgroundColor: backgroundColorFocus[appearance][mode],
+      borderColor: borderColorFocus[appearance][mode]
+    },
+    '&[data-disabled]': {
+      backgroundColor: disabledRules[mode].backgroundColor,
+      borderColor: disabledRules[mode].borderColor,
+      color: disabledRules[mode].textColor,
+      cursor: 'not-allowed'
+    },
+    '&[data-invalid]': {
+      borderColor: invalidRules[mode].borderColor
+    },
+    '&[data-invalid]:focus-within': {
+      backgroundColor: invalidRules[mode].backgroundColorFocus,
+      borderColor: invalidRules[mode].borderColorFocus
+    },
+    '@media screen and (-ms-high-contrast: active)': {
+      '&[data-invalid]:focus-within': {
+        borderColor: 'Highlight'
+      },
+      '&:focus-within': {
+        borderColor: 'Highlight'
+      },
+      '&[data-disabled]': {
+        borderColor: 'GrayText'
+      }
+    }
+  };
+};
+
+var widthMap = {
+  xsmall: 80,
+  small: 160,
+  medium: 240,
+  large: 320,
+  xlarge: 480
+};
+
+var getMaxWidth = function getMaxWidth(width) {
+  return !width ? "100%" : width in widthMap ? widthMap[width] : +width;
+};
+
+var containerStyles = function containerStyles(appearance, mode, width) {
+  return _objectSpread(_objectSpread({
+    alignItems: 'center'
+  }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
+    borderRadius: 3,
+    borderWidth: 2,
+    borderStyle: appearance === 'none' ? 'none' : 'solid',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flex: '1 1 100%',
+    fontSize: fontSize,
+    justifyContent: 'space-between',
+    maxWidth: getMaxWidth(width),
+    overflow: 'hidden',
+    transition: "background-color 0.2s ease-in-out, border-color 0.2s ease-in-out",
+    wordWrap: 'break-word',
+    verticalAlign: 'top',
+    pointerEvents: 'auto'
+  });
+};
+
+exports.containerStyles = containerStyles;
+
+var inputStyles = function inputStyles(mode) {
+  return {
+    backgroundColor: 'transparent',
+    border: 0,
+    boxSizing: 'border-box',
+    color: 'inherit',
+    cursor: 'inherit',
+    fontSize: fontSize,
+    minWidth: '0',
+    outline: 'none',
+    width: '100%',
+    lineHeight: gridSize * 2.5 / fontSize,
+    fontFamily: (0, _constants.fontFamily)(),
+    '&[data-monospaced]': {
+      fontFamily: (0, _constants.codeFontFamily)()
+    },
+    '&[data-compact]': {
+      padding: "".concat(gridSize / 2, "px ").concat(gridSize - 2, "px"),
+      height: "".concat((gridSize * 3.5 / fontSize).toFixed(2), "em")
+    },
+    '&:not([data-compact])': {
+      padding: "".concat(gridSize, "px ").concat(gridSize - 2, "px"),
+      height: "".concat((gridSize * 4.5 / fontSize).toFixed(2), "em")
+    },
+    '&[disabled]': {
+      // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
+      // which takes priority over color and makes the text unreadable. Need to
+      // override it with the color we want.
+      WebkitTextFillColor: disabledRules[mode].textColor
+    },
+    // Hide the clear indicator on Edge (Windows only)
+    '&::-ms-clear': {
+      display: 'none'
+    },
+    '&:invalid': {
+      boxShadow: 'none'
+    },
+    '&::placeholder': {
+      color: componentTokens.placeholderTextColor[mode],
+      '&:disabled': {
+        color: disabledRules[mode].textColor
+      }
+    },
+    '@media screen and (-ms-high-contrast: active)': {
+      '&[disabled]': {
+        color: 'GrayText'
+      }
+    }
+  };
+}; // TODO: Remove when removing legacy theming.
+
+
+exports.inputStyles = inputStyles;
+var textFieldColors = {
+  backgroundColor: backgroundColor,
+  backgroundColorFocus: backgroundColorFocus,
+  backgroundColorHover: backgroundColorHover,
+  borderColor: borderColor,
+  borderColorFocus: borderColorFocus,
+  placeholderTextColor: componentTokens.placeholderTextColor,
+  textColor: componentTokens.textColor,
+  invalidRules: invalidRules,
+  disabledRules: disabledRules
+};
+exports.textFieldColors = textFieldColors;

package/dist/cjs/text-field.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _components = require("@atlaskit/theme/components");
+
+var _styles = require("./styles");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(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) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var analyticsParams = {
+  componentName: 'textField',
+  packageName: "@atlaskit/textfield",
+  packageVersion: "5.1.2"
+};
+var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
+      _props$isCompact = props.isCompact,
+      isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
+      _props$isDisabled = props.isDisabled,
+      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+      _props$isInvalid = props.isInvalid,
+      isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+      _props$isRequired = props.isRequired,
+      isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+      _props$isReadOnly = props.isReadOnly,
+      isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
+      _props$isMonospaced = props.isMonospaced,
+      isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
+      width = props.width,
+      elemAfterInput = props.elemAfterInput,
+      elemBeforeInput = props.elemBeforeInput,
+      testId = props.testId,
+      onFocus = props.onFocus,
+      onBlur = props.onBlur,
+      onMouseDown = props.onMouseDown,
+      className = props.className,
+      spreadProps = (0, _objectWithoutProperties2.default)(props, ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"]);
+  var inputRef = (0, _react.useRef)(null);
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  var handleOnFocus = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
+    fn: function fn(event) {
+      onFocus && onFocus(event);
+    },
+    action: 'focused'
+  }, analyticsParams));
+  var handleOnBlur = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
+    fn: function fn(event) {
+      onBlur && onBlur(event);
+    },
+    action: 'blurred'
+  }, analyticsParams));
+  var handleOnMouseDown = (0, _react.useCallback)(function (event) {
+    // Running e.preventDefault() on the INPUT prevents double click behaviour
+    // Sadly we needed this cast as the target type is being correctly set
+    var target = event.target;
+
+    if (target.tagName !== 'INPUT') {
+      event.preventDefault();
+    }
+
+    if (inputRef && inputRef.current && !isDisabled && document.activeElement !== inputRef.current) {
+      inputRef.current.focus();
+    }
+
+    onMouseDown && onMouseDown(event);
+  }, [onMouseDown, isDisabled]);
+  var setInputRef = (0, _react.useCallback)(function (inputElement) {
+    inputRef.current = inputElement;
+
+    if (!ref) {
+      return;
+    }
+
+    if ((0, _typeof2.default)(ref) === 'object') {
+      // This is a blunder on the part of @types/react
+      // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065
+      // .current should be assignable
+      // @ts-expect-error
+      ref.current = inputElement;
+    }
+
+    if (typeof ref === 'function') {
+      ref(inputElement);
+    }
+  }, [ref]);
+  var containerStyles = (0, _react.useMemo)(function () {
+    return (0, _styles.containerStyles)(appearance, mode, width);
+  }, [appearance, mode, width]);
+  var inputStyle = (0, _react.useMemo)(function () {
+    return (0, _styles.inputStyles)(mode);
+  }, [mode]);
+  return (// We use event bubbling here to listen to any child element mouse down event.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _core.jsx)("div", {
+      "data-disabled": isDisabled ? isDisabled : undefined,
+      "data-invalid": isInvalid ? isInvalid : undefined,
+      "data-ds--text-field--container": true,
+      "data-testid": testId && "".concat(testId, "-container"),
+      onMouseDown: handleOnMouseDown // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
+      css: containerStyles,
+      className: className
+    }, elemBeforeInput, (0, _core.jsx)("input", (0, _extends2.default)({}, spreadProps, {
+      "data-compact": isCompact ? isCompact : undefined,
+      "data-monospaced": isMonospaced ? isMonospaced : undefined,
+      "data-ds--text-field--input": true,
+      "data-testid": testId,
+      "aria-invalid": isInvalid ? isInvalid : undefined,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      onBlur: handleOnBlur,
+      onFocus: handleOnFocus,
+      ref: setInputRef // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
+      css: inputStyle
+    })), elemAfterInput)
+  );
+});
+Textfield.displayName = 'Textfield';
+/**
+ * __Textfield__
+ *
+ * A text field is an input that allows a user to write or edit text.
+ *
+ * - [Examples](https://atlassian.design/components/textfield/examples)
+ * - [Code](https://atlassian.design/components/textfield/code)
+ * - [Usage](https://atlassian.design/components/textfield/usage)
+ */
+
+var _default = /*#__PURE__*/(0, _react.memo)(Textfield); // The above generic is used to let ERTC know what props to extract.
+// See: https://github.com/atlassian/extract-react-types/issues/201
+
+
+exports.default = _default;

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/textfield",
+	"version": "5.1.2",
+	"sideEffects": false
+}

package/dist/es2019/component-tokens.js

@@ -0,0 +1,46 @@
+import { B100, B75, DN10, DN30, DN40, DN600, DN90, N0, N10, N100, N30, N40, N70, N900 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+export const disabledBackgroundColor = {
+  light: token('color.background.disabled', N10),
+  dark: token('color.background.disabled', DN10)
+};
+export const defaultBackgroundColor = {
+  light: token('color.background.subtleBorderedNeutral.resting', N10),
+  dark: token('color.background.subtleBorderedNeutral.resting', DN10)
+};
+export const defaultBackgroundColorFocus = {
+  light: token('color.background.default', N0),
+  dark: token('color.background.default', DN10)
+};
+export const defaultBackgroundColorHover = {
+  light: token('color.background.default', N30),
+  dark: token('color.background.default', DN30)
+};
+export const subtleBackgroundColorHover = {
+  light: token('color.background.transparentNeutral.hover', N30),
+  dark: token('color.background.transparentNeutral.hover', DN30)
+};
+export const defaultBorderColor = {
+  light: token('color.border.neutral', N40),
+  dark: token('color.border.neutral', DN40)
+};
+export const defaultBorderColorFocus = {
+  light: token('color.border.focus', B100),
+  dark: token('color.border.focus', B75)
+};
+export const transparent = {
+  light: 'transparent',
+  dark: 'transparent'
+};
+export const textColor = {
+  light: token('color.text.highEmphasis', N900),
+  dark: token('color.text.highEmphasis', DN600)
+};
+export const disabledTextColor = {
+  light: token('color.text.disabled', N70),
+  dark: token('color.text.disabled', DN90)
+};
+export const placeholderTextColor = {
+  light: token('color.text.lowEmphasis', N100),
+  dark: token('color.text.lowEmphasis', DN90)
+};