@atlaskit/textfield 5.6.7 → 6.0.0

package/dist/cjs/text-field.js

@@ -13,9 +13,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _components = require("@atlaskit/theme/components");
 var _styles = require("./styles");
-var _excluded = ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"];
+var _excluded = ["appearance", "className", "elemAfterInput", "elemBeforeInput", "isCompact", "isDisabled", "isInvalid", "isMonospaced", "isReadOnly", "isRequired", "name", "onBlur", "onChange", "onFocus", "onMouseDown", "placeholder", "testId", "width"];
 /** @jsx jsx */
 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; }
@@ -24,35 +23,36 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.6.7"
+  packageVersion: "6.0.0"
 };
 var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
+    className = props.className,
+    elemAfterInput = props.elemAfterInput,
+    elemBeforeInput = props.elemBeforeInput,
     _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,
+    _props$isReadOnly = props.isReadOnly,
+    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    name = props.name,
     onBlur = props.onBlur,
+    onChange = props.onChange,
+    onFocus = props.onFocus,
     onMouseDown = props.onMouseDown,
-    className = props.className,
+    placeholder = props.placeholder,
+    testId = props.testId,
+    width = props.width,
     spreadProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   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);
@@ -90,15 +90,19 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }, [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 (0, _styles.containerStyles)(appearance, width);
+  }, [appearance, width]);
+  var inputStyle = (0, _styles.inputStyles)();
   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
+    /**
+     * It is not normally acceptable to add click and key handlers to
+     * non-interactive elements as this is an accessibility anti-pattern.
+     * However, because this instance is to handle events on all children that
+     * should be associated with the input, we can add role="presentation" so
+     * that there are no negative impacts to assistive technologies.
+     */
     (0, _react2.jsx)("div", {
+      role: "presentation",
       "data-disabled": isDisabled ? isDisabled : undefined,
       "data-invalid": isInvalid ? isInvalid : undefined,
       "data-ds--text-field--container": true,
@@ -110,21 +114,24 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       css: containerStyles,
       className: className
     }, elemBeforeInput, (0, _react2.jsx)("input", (0, _extends2.default)({}, spreadProps, {
+      "aria-invalid": isInvalid ? isInvalid : undefined
+      // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      ,
+      css: inputStyle,
       "data-compact": isCompact ? isCompact : undefined,
-      "data-monospaced": isMonospaced ? isMonospaced : undefined,
       "data-ds--text-field--input": true,
+      "data-monospaced": isMonospaced ? isMonospaced : undefined,
       "data-testid": testId,
-      "aria-invalid": isInvalid ? isInvalid : undefined,
       disabled: isDisabled,
-      readOnly: isReadOnly,
-      required: isRequired,
+      name: name,
       onBlur: handleOnBlur,
+      onChange: onChange,
       onFocus: handleOnFocus,
-      ref: setInputRef
-      // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      ,
-      css: inputStyle
+      placeholder: placeholder,
+      readOnly: isReadOnly,
+      ref: setInputRef,
+      required: isRequired
     })), elemAfterInput)
   );
 });
@@ -139,6 +146,5 @@ Textfield.displayName = 'Textfield';
  * - [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;
+var _default = exports.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

package/dist/es2019/index.js

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

package/dist/es2019/styles.js

@@ -1,107 +1,72 @@
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { R400 } from '@atlaskit/theme/colors';
+import { B200, N0, N10, N100, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontFamily, fontSize as getFontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize as getGridSize } from '@atlaskit/theme/constants';
-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: `var(--ds-border-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: `var(--ds-border-danger, ${R400})`,
-    borderColorFocus: componentTokens.defaultBorderColorFocus.dark
-  }
-};
 const backgroundColor = {
-  standard: componentTokens.defaultBackgroundColor,
-  subtle: componentTokens.transparent,
-  none: componentTokens.transparent
+  standard: `var(--ds-background-input, ${N10})`,
+  subtle: 'transparent',
+  none: 'transparent'
 };
 const backgroundColorFocus = {
-  standard: componentTokens.defaultBackgroundColorFocus,
-  subtle: componentTokens.defaultBackgroundColorFocus,
-  none: componentTokens.transparent
+  standard: `var(--ds-background-input-pressed, ${N0})`,
+  subtle: `var(--ds-background-input-pressed, ${N0})`,
+  none: 'transparent'
 };
 const backgroundColorHover = {
-  standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
-  none: componentTokens.transparent
+  standard: `var(--ds-background-input-hovered, ${N30})`,
+  subtle: `var(--ds-background-input-hovered, ${N30})`,
+  none: 'transparent'
 };
 const borderColor = {
-  standard: componentTokens.defaultBorderColor,
-  subtle: componentTokens.transparent,
-  none: componentTokens.transparent
+  standard: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
+  subtle: 'transparent',
+  none: 'transparent'
 };
 const borderColorFocus = {
-  standard: componentTokens.defaultBorderColorFocus,
-  subtle: componentTokens.defaultBorderColorFocus,
-  none: componentTokens.transparent
+  standard: `var(--ds-border-focused, ${B200})`,
+  subtle: `var(--ds-border-focused, ${B200})`,
+  none: 'transparent'
 };
 const borderColorHover = {
-  standard: componentTokens.defaultBorderColor,
-  subtle: componentTokens.subtleBorderColorHover,
-  none: componentTokens.transparent
+  standard: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
+  subtle: "var(--ds-border-input, transparent)",
+  none: 'transparent'
 };
-const getContainerTextBgAndBorderColor = (appearance, mode) => ({
-  backgroundColor: backgroundColor[appearance][mode],
-  borderColor: borderColor[appearance][mode],
-  color: componentTokens.textColor[mode],
+const getContainerTextBgAndBorderColor = appearance => ({
+  backgroundColor: backgroundColor[appearance],
+  borderColor: borderColor[appearance],
+  color: `var(--ds-text, ${N900})`,
   cursor: 'text',
   '&:hover:not([data-disabled])': {
-    backgroundColor: backgroundColorHover[appearance][mode],
-    borderColor: borderColorHover[appearance][mode]
+    backgroundColor: backgroundColorHover[appearance],
+    borderColor: borderColorHover[appearance]
   },
   '&:focus-within:not([data-disabled])': {
-    backgroundColor: backgroundColorFocus[appearance][mode],
-    borderColor: borderColorFocus[appearance][mode],
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance][mode]}` : undefined
+    backgroundColor: backgroundColorFocus[appearance],
+    borderColor: borderColorFocus[appearance],
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}` : undefined
   },
   '&[data-disabled]': {
-    color: disabledRules[mode].textColor,
+    color: `var(--ds-text-disabled, ${N70})`,
     cursor: 'not-allowed',
     // Disabled background and border styles should not be applied to components that
     // have either no background or transparent background to begin with
     ...(appearance === 'standard' && {
-      backgroundColor: disabledRules[mode].backgroundColor,
-      borderColor: disabledRules[mode].borderColor
+      backgroundColor: `var(--ds-background-disabled, ${N10})`,
+      borderColor: `var(--ds-background-disabled, ${N10})`
     })
   },
   '&[data-invalid], &[data-invalid]:hover': {
-    borderColor: invalidRules[mode].borderColor,
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules[mode].borderColor}` : undefined
+    borderColor: `var(--ds-border-danger, ${R400})`,
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${R400})`}` : undefined
   },
   '&[data-invalid]:focus-within': {
-    backgroundColor: invalidRules[mode].backgroundColorFocus,
-    borderColor: invalidRules[mode].borderColorFocus,
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules[mode].borderColorFocus}` : undefined
+    backgroundColor: `var(--ds-background-input-pressed, ${N0})`,
+    borderColor: `var(--ds-border-focused, ${B200})`,
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}` : undefined
   },
   '@media screen and (-ms-high-contrast: active)': {
     '&[data-invalid]:focus-within': {
@@ -123,15 +88,13 @@ const widthMap = {
   xlarge: 480
 };
 const getMaxWidth = width => !width ? `100%` : width in widthMap ? widthMap[width] : +width;
-export const containerStyles = (appearance, mode, width) => ({
+export const containerStyles = (appearance, width) => ({
   alignItems: 'center',
-  ...getContainerTextBgAndBorderColor(appearance, mode),
+  ...getContainerTextBgAndBorderColor(appearance),
   borderRadius: 3,
   borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2,
   // add 1px padding on both top and bottom to keep the same overall height after border reduced from 2px to 1px under feature flag
-  ...(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ?
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  {
+  ...(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? {
     padding: `${"var(--ds-border-width, 1px)"} 0`
   } : {}),
   borderStyle: appearance === 'none' ? 'none' : 'solid',
@@ -147,7 +110,7 @@ export const containerStyles = (appearance, mode, width) => ({
   verticalAlign: 'top',
   pointerEvents: 'auto'
 });
-export const inputStyles = mode => ({
+export const inputStyles = () => ({
   backgroundColor: 'transparent',
   border: 0,
   boxSizing: 'border-box',
@@ -174,7 +137,7 @@ export const inputStyles = mode => ({
     // 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
+    WebkitTextFillColor: `var(--ds-text-disabled, ${N70})`
   },
   // Hide the clear indicator on Edge (Windows only)
   '&::-ms-clear': {
@@ -187,9 +150,9 @@ export const inputStyles = mode => ({
     textOverflow: 'ellipsis'
   },
   '&::placeholder': {
-    color: componentTokens.placeholderTextColor[mode],
+    color: `var(--ds-text-subtlest, ${N200})`,
     '&:disabled': {
-      color: disabledRules[mode].textColor
+      color: `var(--ds-text-disabled, ${N70})`
     }
   },
   '@media screen and (-ms-high-contrast: active)': {
@@ -197,18 +160,4 @@ export const inputStyles = mode => ({
       color: 'GrayText'
     }
   }
-});
-
-// TODO: Remove when removing legacy theming.
-export const textFieldColors = {
-  backgroundColor,
-  backgroundColorFocus,
-  backgroundColorHover,
-  borderColor,
-  borderColorFocus,
-  borderColorHover,
-  placeholderTextColor: componentTokens.placeholderTextColor,
-  textColor: componentTokens.textColor,
-  invalidRules,
-  disabledRules
-};
+});

package/dist/es2019/text-field.js

@@ -3,36 +3,35 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
 import { jsx } from '@emotion/react';
 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.6.7"
+  packageVersion: "6.0.0"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     appearance = 'standard',
+    className,
+    elemAfterInput,
+    elemBeforeInput,
     isCompact = false,
     isDisabled = false,
     isInvalid = false,
-    isRequired = false,
-    isReadOnly = false,
     isMonospaced = false,
-    width,
-    elemAfterInput,
-    elemBeforeInput,
-    testId,
-    onFocus,
+    isReadOnly = false,
+    isRequired = false,
+    name,
     onBlur,
+    onChange,
+    onFocus,
     onMouseDown,
-    className,
+    placeholder,
+    testId,
+    width,
     ...spreadProps
   } = props;
   const inputRef = useRef(null);
-  const {
-    mode
-  } = useGlobalTheme();
   const handleOnFocus = usePlatformLeafEventHandler({
     fn: event => {
       onFocus && onFocus(event);
@@ -71,12 +70,18 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
       ref(inputElement);
     }
   }, [ref]);
-  const containerStyles = useMemo(() => getContainerStyles(appearance, mode, width), [appearance, mode, width]);
-  const inputStyle = useMemo(() => getInputStyles(mode), [mode]);
+  const containerStyles = useMemo(() => getContainerStyles(appearance, width), [appearance, width]);
+  const inputStyle = getInputStyles();
   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
+    /**
+     * It is not normally acceptable to add click and key handlers to
+     * non-interactive elements as this is an accessibility anti-pattern.
+     * However, because this instance is to handle events on all children that
+     * should be associated with the input, we can add role="presentation" so
+     * that there are no negative impacts to assistive technologies.
+     */
     jsx("div", {
+      role: "presentation",
       "data-disabled": isDisabled ? isDisabled : undefined,
       "data-invalid": isInvalid ? isInvalid : undefined,
       "data-ds--text-field--container": true,
@@ -88,21 +93,24 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
       css: containerStyles,
       className: className
     }, elemBeforeInput, jsx("input", _extends({}, spreadProps, {
+      "aria-invalid": isInvalid ? isInvalid : undefined
+      // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      ,
+      css: inputStyle,
       "data-compact": isCompact ? isCompact : undefined,
-      "data-monospaced": isMonospaced ? isMonospaced : undefined,
       "data-ds--text-field--input": true,
+      "data-monospaced": isMonospaced ? isMonospaced : undefined,
       "data-testid": testId,
-      "aria-invalid": isInvalid ? isInvalid : undefined,
       disabled: isDisabled,
-      readOnly: isReadOnly,
-      required: isRequired,
+      name: name,
       onBlur: handleOnBlur,
+      onChange: onChange,
       onFocus: handleOnFocus,
-      ref: setInputRef
-      // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      ,
-      css: inputStyle
+      placeholder: placeholder,
+      readOnly: isReadOnly,
+      ref: setInputRef,
+      required: isRequired
     })), elemAfterInput)
   );
 });

package/dist/esm/index.js

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