@atlaskit/textfield 5.1.2

package/dist/es2019/index.js

@@ -0,0 +1,2 @@
+export { default } from './text-field';
+export { textFieldColors as TextFieldColors } from './styles';

package/dist/es2019/styles.js

@@ -0,0 +1,192 @@
+import { R400 } from '@atlaskit/theme/colors';
+import { codeFontFamily, fontFamily, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+import * as componentTokens from './component-tokens';
+const fontSize = getFontSize();
+const gridSize = getGridSize();
+const 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
+  }
+};
+const 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: token('color.iconBorder.danger', 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: token('color.iconBorder.danger', R400),
+    borderColorFocus: componentTokens.defaultBorderColorFocus.dark
+  }
+};
+const backgroundColor = {
+  standard: componentTokens.defaultBackgroundColor,
+  subtle: componentTokens.transparent,
+  none: componentTokens.transparent
+};
+const backgroundColorFocus = {
+  standard: componentTokens.defaultBackgroundColorFocus,
+  subtle: componentTokens.defaultBackgroundColorFocus,
+  none: componentTokens.transparent
+};
+const backgroundColorHover = {
+  standard: componentTokens.defaultBackgroundColorHover,
+  subtle: componentTokens.subtleBackgroundColorHover,
+  none: componentTokens.transparent
+};
+const borderColor = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.transparent,
+  none: componentTokens.transparent
+};
+const borderColorFocus = {
+  standard: componentTokens.defaultBorderColorFocus,
+  subtle: componentTokens.defaultBorderColorFocus,
+  none: componentTokens.transparent
+};
+
+const getContainerTextBgAndBorderColor = (appearance, mode) => ({
+  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'
+    }
+  }
+});
+
+const widthMap = {
+  xsmall: 80,
+  small: 160,
+  medium: 240,
+  large: 320,
+  xlarge: 480
+};
+
+const getMaxWidth = width => !width ? `100%` : width in widthMap ? widthMap[width] : +width;
+
+export const containerStyles = (appearance, mode, width) => ({
+  alignItems: 'center',
+  ...getContainerTextBgAndBorderColor(appearance, mode),
+  borderRadius: 3,
+  borderWidth: 2,
+  borderStyle: appearance === 'none' ? 'none' : 'solid',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flex: '1 1 100%',
+  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'
+});
+export const inputStyles = mode => ({
+  backgroundColor: 'transparent',
+  border: 0,
+  boxSizing: 'border-box',
+  color: 'inherit',
+  cursor: 'inherit',
+  fontSize,
+  minWidth: '0',
+  outline: 'none',
+  width: '100%',
+  lineHeight: gridSize * 2.5 / fontSize,
+  fontFamily: fontFamily(),
+  '&[data-monospaced]': {
+    fontFamily: codeFontFamily()
+  },
+  '&[data-compact]': {
+    padding: `${gridSize / 2}px ${gridSize - 2}px`,
+    height: `${(gridSize * 3.5 / fontSize).toFixed(2)}em`
+  },
+  '&:not([data-compact])': {
+    padding: `${gridSize}px ${gridSize - 2}px`,
+    height: `${(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.
+
+export const textFieldColors = {
+  backgroundColor,
+  backgroundColorFocus,
+  backgroundColorHover,
+  borderColor,
+  borderColorFocus,
+  placeholderTextColor: componentTokens.placeholderTextColor,
+  textColor: componentTokens.textColor,
+  invalidRules,
+  disabledRules
+};

package/dist/es2019/text-field.js

@@ -0,0 +1,129 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
+import { jsx } from '@emotion/core';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
+const analyticsParams = {
+  componentName: 'textField',
+  packageName: "@atlaskit/textfield",
+  packageVersion: "5.1.2"
+};
+const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    appearance = 'standard',
+    isCompact = false,
+    isDisabled = false,
+    isInvalid = false,
+    isRequired = false,
+    isReadOnly = false,
+    isMonospaced = false,
+    width,
+    elemAfterInput,
+    elemBeforeInput,
+    testId,
+    onFocus,
+    onBlur,
+    onMouseDown,
+    className,
+    ...spreadProps
+  } = props;
+  const inputRef = useRef(null);
+  const {
+    mode
+  } = useGlobalTheme();
+  const handleOnFocus = usePlatformLeafEventHandler({
+    fn: event => {
+      onFocus && onFocus(event);
+    },
+    action: 'focused',
+    ...analyticsParams
+  });
+  const handleOnBlur = usePlatformLeafEventHandler({
+    fn: event => {
+      onBlur && onBlur(event);
+    },
+    action: 'blurred',
+    ...analyticsParams
+  });
+  const handleOnMouseDown = useCallback(event => {
+    // Running e.preventDefault() on the INPUT prevents double click behaviour
+    // Sadly we needed this cast as the target type is being correctly set
+    const 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]);
+  const setInputRef = useCallback(inputElement => {
+    inputRef.current = inputElement;
+
+    if (!ref) {
+      return;
+    }
+
+    if (typeof 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]);
+  const containerStyles = useMemo(() => getContainerStyles(appearance, mode, width), [appearance, mode, width]);
+  const inputStyle = useMemo(() => getInputStyles(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
+    jsx("div", {
+      "data-disabled": isDisabled ? isDisabled : undefined,
+      "data-invalid": isInvalid ? isInvalid : undefined,
+      "data-ds--text-field--container": true,
+      "data-testid": testId && `${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, jsx("input", _extends({}, 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)
+ */
+
+export default /*#__PURE__*/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

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

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

package/dist/esm/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 var disabledBackgroundColor = {
+  light: token('color.background.disabled', N10),
+  dark: token('color.background.disabled', DN10)
+};
+export var defaultBackgroundColor = {
+  light: token('color.background.subtleBorderedNeutral.resting', N10),
+  dark: token('color.background.subtleBorderedNeutral.resting', DN10)
+};
+export var defaultBackgroundColorFocus = {
+  light: token('color.background.default', N0),
+  dark: token('color.background.default', DN10)
+};
+export var defaultBackgroundColorHover = {
+  light: token('color.background.default', N30),
+  dark: token('color.background.default', DN30)
+};
+export var subtleBackgroundColorHover = {
+  light: token('color.background.transparentNeutral.hover', N30),
+  dark: token('color.background.transparentNeutral.hover', DN30)
+};
+export var defaultBorderColor = {
+  light: token('color.border.neutral', N40),
+  dark: token('color.border.neutral', DN40)
+};
+export var defaultBorderColorFocus = {
+  light: token('color.border.focus', B100),
+  dark: token('color.border.focus', B75)
+};
+export var transparent = {
+  light: 'transparent',
+  dark: 'transparent'
+};
+export var textColor = {
+  light: token('color.text.highEmphasis', N900),
+  dark: token('color.text.highEmphasis', DN600)
+};
+export var disabledTextColor = {
+  light: token('color.text.disabled', N70),
+  dark: token('color.text.disabled', DN90)
+};
+export var placeholderTextColor = {
+  light: token('color.text.lowEmphasis', N100),
+  dark: token('color.text.lowEmphasis', DN90)
+};

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export { default } from './text-field';
+export { textFieldColors as TextFieldColors } from './styles';

package/dist/esm/styles.js

@@ -0,0 +1,206 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
+import { R400 } from '@atlaskit/theme/colors';
+import { codeFontFamily, fontFamily, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+import * as componentTokens from './component-tokens';
+var fontSize = getFontSize();
+var gridSize = getGridSize();
+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: token('color.iconBorder.danger', 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: token('color.iconBorder.danger', 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;
+};
+
+export 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'
+  });
+};
+export 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: fontFamily(),
+    '&[data-monospaced]': {
+      fontFamily: 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.
+
+export var textFieldColors = {
+  backgroundColor: backgroundColor,
+  backgroundColorFocus: backgroundColorFocus,
+  backgroundColorHover: backgroundColorHover,
+  borderColor: borderColor,
+  borderColorFocus: borderColorFocus,
+  placeholderTextColor: componentTokens.placeholderTextColor,
+  textColor: componentTokens.textColor,
+  invalidRules: invalidRules,
+  disabledRules: disabledRules
+};