@instructure/ui-text-input 11.7.3 → 11.7.4-pr-snapshot-1781695314229

package/lib/TextInput/v1/theme.js

@@ -1,80 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * Generates the theme object for the component from the theme and provided additional information
- * @param  {Object} theme The actual theme object.
- * @return {Object} The final theme object with the overrides and component variables
- */
-const generateComponentTheme = theme => {
-  const {
-    colors,
-    typography,
-    borders,
-    spacing,
-    forms,
-    key: themeName
-  } = theme;
-  const themeSpecificStyle = {
-    canvas: {
-      color: theme['ic-brand-font-color-dark'],
-      focusOutlineColor: theme['ic-brand-primary']
-    }
-  };
-  const componentVariables = {
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    borderWidth: borders?.widthSmall,
-    borderStyle: borders?.style,
-    borderColor: colors?.contrasts?.grey3045,
-    borderRadius: borders?.radiusMedium,
-    color: colors?.contrasts?.grey125125,
-    background: colors?.contrasts?.white1010,
-    requiredInvalidColor: colors?.contrasts?.red5782,
-    padding: spacing?.small,
-    focusOutlineWidth: borders?.widthMedium,
-    focusOutlineStyle: borders?.style,
-    focusOutlineColor: colors?.contrasts?.blue4570,
-    errorBorderColor: colors?.contrasts?.red4570,
-    errorOutlineColor: colors?.contrasts?.red4570,
-    placeholderColor: colors?.contrasts?.grey4570,
-    smallFontSize: typography?.fontSizeSmall,
-    smallHeight: forms?.inputHeightSmall,
-    mediumFontSize: typography?.fontSizeMedium,
-    mediumHeight: forms?.inputHeightMedium,
-    largeFontSize: typography?.fontSizeLarge,
-    largeHeight: forms?.inputHeightLarge
-  };
-  return {
-    ...componentVariables,
-    ...themeSpecificStyle[themeName]
-  };
-};
-var _default = exports.default = generateComponentTheme;

package/lib/TextInput/v2/index.js

@@ -1,266 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TextInput = void 0;
-var _react = require("react");
-var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
-var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
-var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
-var _latest = require("@instructure/ui-form-field/latest");
-var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles"));
-var _props = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class;
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-/**
----
-category: components
-tags: form, field, input
----
-**/
-let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = _dec2(_class = class TextInput extends _react.Component {
-  static displayName = "TextInput";
-  static componentId = 'TextInput';
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    type: 'text',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: undefined,
-    isRequired: false,
-    display: 'block',
-    shouldNotWrap: false,
-    size: 'medium',
-    textAlign: 'start',
-    messages: []
-  };
-  constructor(props) {
-    super(props);
-    this._defaultId = props.deterministicId();
-    this._messagesId = props.deterministicId('TextInput-messages');
-  }
-  ref = null;
-  _input = null;
-  _defaultId;
-  _messagesId;
-  _focusListener = null;
-  handleRef = el => {
-    const {
-      elementRef
-    } = this.props;
-    this.ref = el;
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-  componentDidMount() {
-    if (this._input) {
-      this._focusListener = (0, _addEventListener.addEventListener)(this._input, 'focus', this.handleFocus);
-    }
-    this.props.makeStyles?.(this.makeStyleProps());
-  }
-  componentWillUnmount() {
-    if (this._focusListener) {
-      this._focusListener.remove();
-    }
-  }
-  componentDidUpdate() {
-    this.props.makeStyles?.(this.makeStyleProps());
-  }
-  renderInstUIIcon(elementToRender) {
-    if (!elementToRender) {
-      return null;
-    }
-    const rendered = (0, _callRenderProp.callRenderProp)(elementToRender);
-    // Map sizes to Lucide icon semantic size tokens
-    const linkSizeToIconSize = {
-      small: 'sm',
-      medium: 'md',
-      large: 'lg'
-    };
-    const iconSize = linkSizeToIconSize[this.props.size || 'medium'];
-    if (/*#__PURE__*/(0, _react.isValidElement)(elementToRender) && elementToRender.type?.name === 'WrappedIcon') {
-      return (0, _safeCloneElement.safeCloneElement)(rendered, {
-        size: iconSize
-      });
-    }
-    return rendered;
-  }
-  makeStyleProps = () => {
-    const beforeElement = this.props.renderBeforeInput ? (0, _callRenderProp.callRenderProp)(this.props.renderBeforeInput) : null;
-    const success = !!this.props.messages && this.props.messages.some(message => message.type === 'success');
-    return {
-      interaction: this.interaction,
-      invalid: this.invalid,
-      success: success,
-      beforeElementExists: !!beforeElement
-    };
-  };
-  focus() {
-    this._input?.focus();
-  }
-  get interaction() {
-    return (0, _getInteraction.getInteraction)({
-      props: this.props
-    });
-  }
-  get hasMessages() {
-    return !!this.props.messages && this.props.messages.length > 0;
-  }
-  get invalid() {
-    return !!this.props.messages && this.props.messages.findIndex(message => {
-      return message.type === 'error' || message.type === 'newError';
-    }) >= 0;
-  }
-  get focused() {
-    return (0, _isActiveElement.isActiveElement)(this._input);
-  }
-  get value() {
-    return this._input?.value;
-  }
-  get id() {
-    return this.props.id || this._defaultId;
-  }
-  handleInputRef = node => {
-    this._input = node;
-    if (typeof this.props.inputRef === 'function') {
-      this.props.inputRef(node);
-    }
-  };
-  handleChange = event => {
-    if (typeof this.props.onChange === 'function') {
-      this.props.onChange(event, event.target.value);
-    }
-  };
-  handleBlur = event => {
-    if (typeof this.props.onBlur === 'function') {
-      this.props.onBlur(event);
-    }
-  };
-  handleFocus = event => {
-    if (typeof this.props.onFocus === 'function') {
-      this.props.onFocus(event);
-    }
-  };
-  renderInput() {
-    const {
-      type,
-      size,
-      htmlSize,
-      display,
-      textAlign,
-      placeholder,
-      value,
-      defaultValue,
-      isRequired,
-      onFocus,
-      ...rest
-    } = this.props;
-    const props = (0, _passthroughProps.passthroughProps)(rest);
-    const {
-      interaction
-    } = this;
-    let descriptionIds = '';
-    if (props['aria-describedby']) {
-      descriptionIds = `${props['aria-describedby']}`;
-    }
-    return (0, _jsxRuntime.jsx)("input", {
-      ...props,
-      css: this.props.styles?.textInput,
-      defaultValue: defaultValue,
-      value: value,
-      placeholder: interaction === 'enabled' ? placeholder : undefined,
-      ref: this.handleInputRef,
-      type: type,
-      id: this.id,
-      required: isRequired,
-      "aria-invalid": this.invalid ? 'true' : undefined,
-      disabled: interaction === 'disabled',
-      readOnly: interaction === 'readonly',
-      "aria-describedby": descriptionIds !== '' ? descriptionIds : undefined,
-      size: htmlSize,
-      onChange: this.handleChange,
-      onBlur: this.handleBlur
-    });
-  }
-  render() {
-    const {
-      width,
-      display,
-      renderLabel,
-      renderBeforeInput,
-      renderAfterInput,
-      messages,
-      inputContainerRef,
-      isRequired,
-      styles
-    } = this.props;
-    const beforeElement = this.renderInstUIIcon(renderBeforeInput);
-    const afterElement = this.renderInstUIIcon(renderAfterInput);
-    const renderBeforeOrAfter = !!beforeElement || !!afterElement || renderBeforeInput !== undefined || renderAfterInput !== undefined;
-    const label = (0, _callRenderProp.callRenderProp)(renderLabel);
-    return (0, _jsxRuntime.jsx)(_latest.FormField, {
-      id: this.id,
-      label: label,
-      messagesId: this._messagesId,
-      messages: messages,
-      inline: display === 'inline-block',
-      width: width,
-      inputContainerRef: inputContainerRef,
-      layout: this.props.layout,
-      elementRef: this.handleRef,
-      margin: this.props.margin,
-      isRequired: isRequired,
-      disabled: this.interaction === 'disabled',
-      readOnly: this.interaction === 'readonly',
-      "data-cid": "TextInput",
-      children: (0, _jsxRuntime.jsx)("span", {
-        css: styles?.facade,
-        children: renderBeforeOrAfter ? (0, _jsxRuntime.jsxs)("span", {
-          css: styles?.layout,
-          children: [beforeElement && (0, _jsxRuntime.jsx)("span", {
-            css: styles?.beforeElement,
-            children: beforeElement
-          }), (0, _jsxRuntime.jsxs)("span", {
-            css: styles?.inputLayout,
-            children: [this.renderInput(), afterElement && (0, _jsxRuntime.jsx)("span", {
-              css: styles?.afterElement,
-              children: afterElement
-            })]
-          })]
-        }) : (/* If no prepended or appended content, don't render Flex layout */
-        this.renderInput())
-      })
-    });
-  }
-}) || _class) || _class);
-var _default = exports.default = TextInput;

package/lib/TextInput/v2/styles.js

@@ -1,230 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("@instructure/emotion");
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * ---
- * private: true
- * ---
- * Generates the style object from the theme and provided additional information
- * @param componentTheme The theme variable object.
- * @param props the props of the component, the style is applied to
- * @param sharedTokens Shared token object that stores common values for the theme.
- * @param state the state of the component, the style is applied to
- * @return The final style object, which will be used in the component
- */
-const generateStyle = (componentTheme, props, sharedTokens, state) => {
-  const {
-    size,
-    textAlign,
-    shouldNotWrap
-  } = props;
-  const {
-    interaction,
-    success,
-    invalid,
-    beforeElementExists
-  } = state;
-  const sizeVariants = {
-    small: {
-      fontSize: componentTheme.fontSizeSm,
-      height: `calc(${componentTheme.heightSm} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.heightSm} - (2 * ${componentTheme.borderWidth}))`
-    },
-    medium: {
-      fontSize: componentTheme.fontSizeMd,
-      height: `calc(${componentTheme.heightMd} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.heightMd} - (2 * ${componentTheme.borderWidth}))`
-    },
-    large: {
-      fontSize: componentTheme.fontSizeLg,
-      height: `calc(${componentTheme.heightLg} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.heightLg} - (2 * ${componentTheme.borderWidth}))`
-    }
-  };
-  const paddingHorizontalVariants = {
-    small: componentTheme.paddingHorizontalSm,
-    medium: componentTheme.paddingHorizontalMd,
-    large: componentTheme.paddingHorizontalLg
-  };
-  const inputInteractionStates = {
-    ...(interaction === 'enabled' && {
-      color: componentTheme.textColor,
-      '&::placeholder': {
-        color: componentTheme.placeholderColor
-      },
-      '&:hover::placeholder': {
-        color: componentTheme.placeholderHoverColor
-      }
-      // placeholder is not rendered in the `readOnly` and `disabled` state
-    }),
-    ...(interaction === 'readonly' && {
-      color: componentTheme.textReadonlyColor
-    }),
-    ...(interaction === 'disabled' && {
-      color: componentTheme.textDisabledColor
-    })
-  };
-  const inputStyle = {
-    all: 'initial',
-    width: '100%',
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    appearance: 'none',
-    margin: 0,
-    display: 'block',
-    boxSizing: 'border-box',
-    outline: 'none',
-    fontFamily: componentTheme.fontFamily,
-    fontWeight: componentTheme.fontWeight,
-    // padding of the text in the input
-    padding: `0 ${componentTheme.gapContent} 0  ${componentTheme.gapContent}`,
-    background: 'transparent',
-    border: 'none',
-    verticalAlign: 'baseline',
-    '&[autocomplete="off"]::-webkit-contacts-auto-fill-button': {
-      display: 'none !important'
-    },
-    '&:focus': {
-      boxShadow: 'initial'
-    },
-    ...sizeVariants[size],
-    textAlign: textAlign,
-    ...inputInteractionStates
-  };
-  const viewBase = {
-    boxSizing: 'border-box',
-    fontFamily: componentTheme.fontFamily,
-    maxWidth: '100%',
-    overflow: 'visible',
-    unicodeBidi: 'isolate'
-  };
-  const containerInteractionStates = {
-    ...(interaction === 'enabled' && {
-      backgroundColor: componentTheme.backgroundColor,
-      borderColor: componentTheme.borderColor,
-      ...(success && {
-        borderColor: componentTheme.successBorderColor
-      }),
-      ...(invalid && {
-        borderColor: componentTheme.errorBorderColor
-      }),
-      '&:hover': {
-        backgroundColor: componentTheme.backgroundHoverColor,
-        borderColor: componentTheme.borderHoverColor,
-        ...(success && {
-          borderColor: componentTheme.successBorderColor
-        }),
-        ...(invalid && {
-          borderColor: componentTheme.errorBorderColor
-        })
-      }
-    }),
-    ...(interaction === 'readonly' && {
-      backgroundColor: componentTheme.backgroundReadonlyColor,
-      borderColor: componentTheme.borderReadonlyColor
-    }),
-    ...(interaction === 'disabled' && {
-      cursor: 'not-allowed',
-      pointerEvents: 'none',
-      backgroundColor: componentTheme.backgroundDisabledColor,
-      borderColor: componentTheme.borderDisabledColor
-    })
-  };
-  const focusOutline = (0, _emotion.calcFocusOutlineStyles)(sharedTokens.focusOutline, {
-    focusColor: invalid ? 'danger' : success ? 'success' : undefined,
-    // Only display the focus outline when the input is focused.
-    // This is to prevent double focus ring when e.g., a Button is rendered in
-    // `renderBeforeInput`
-    customCSSSelector: '&:has(input:focus)'
-  });
-  return {
-    textInput: {
-      label: 'textInput',
-      ...inputStyle,
-      '&:is(input)[type]': inputStyle,
-      '&:-webkit-any(input)[type]': inputStyle
-    },
-    facade: {
-      label: 'textInput__facade',
-      position: 'relative',
-      display: 'block',
-      boxSizing: 'border-box',
-      border: `${componentTheme.borderWidth} solid`,
-      borderRadius: componentTheme.borderRadius,
-      color: componentTheme.textColor,
-      ...containerInteractionStates,
-      ...focusOutline
-    },
-    layout: {
-      label: 'textInput__layout',
-      ...viewBase,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      flexDirection: 'row',
-      ...(!shouldNotWrap && {
-        flexWrap: 'wrap'
-      }),
-      // left padding of the `renderBeforeInput` element
-      ...(beforeElementExists && {
-        paddingInlineStart: paddingHorizontalVariants[size]
-      })
-    },
-    inputLayout: {
-      label: 'textInput__inputLayout',
-      flexGrow: 1,
-      ...viewBase,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      flexDirection: 'row'
-    },
-    beforeElement: {
-      ...(interaction === 'disabled' && {
-        opacity: 0.5
-      }),
-      label: 'textInput__beforeElement'
-    },
-    afterElement: {
-      ...(interaction === 'disabled' && {
-        opacity: 0.5
-      }),
-      display: 'flex',
-      alignItems: 'center',
-      paddingInlineEnd: paddingHorizontalVariants[size],
-      label: 'textInput__afterElement',
-      ...viewBase,
-      borderRadius: componentTheme.borderRadius,
-      flexShrink: 0
-    }
-  };
-};
-var _default = exports.default = generateStyle;

package/lib/exports/a.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "TextInput", {
-  enumerable: true,
-  get: function () {
-    return _v.TextInput;
-  }
-});
-var _v = require("../TextInput/v1");

package/lib/exports/b.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "TextInput", {
-  enumerable: true,
-  get: function () {
-    return _v.TextInput;
-  }
-});
-var _v = require("../TextInput/v2");

package/lib/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}