@spark-web/text-input 3.0.0 → 4.0.0-rc.0

package/dist/spark-web-text-input.cjs.dev.js

@@ -1,268 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var box = require('@spark-web/box');
-var field = require('@spark-web/field');
-var theme = require('@spark-web/theme');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var css = require('@emotion/css');
-var a11y = require('@spark-web/a11y');
-var text = require('@spark-web/text');
-
-/**
- * Components like the `SelectInput` may subscribe to the adornment context and
- * change their appearance or behaviour.
- */
-var InputAdornmentContext = /*#__PURE__*/react.createContext(null);
-var placementToPadding = {
-  start: {
-    paddingLeft: 'medium',
-    paddingRight: 'xsmall'
-  },
-  end: {
-    paddingLeft: 'xsmall',
-    paddingRight: 'medium'
-  }
-};
-/**
- * Places an element at the "start" or "end" of the input, only one adornment
- * may be provided for each placement. By default, the adornment element will be
- * wrapped to provide alignment and spacing, use the "raw" property to opt-out
- * of this behaviour.
- *
- * @example
- * <TextInput>
- *   <InputAdornment placement="start">
- *     <Text tone="placeholder">$</Text>
- *   </InputAdornment>
- * </TextInput>
- */
-var InputAdornment = function InputAdornment(_ref) {
-  var children = _ref.children,
-    fieldLabel = _ref.fieldLabel,
-    placement = _ref.placement,
-    raw = _ref.raw;
-  var theme$1 = theme.useTheme();
-  var adornmentContext = react.useMemo(function () {
-    return {
-      placement: placement
-    };
-  }, [placement]);
-  var _placementToPadding$p = placementToPadding[placement],
-    paddingLeft = _placementToPadding$p.paddingLeft,
-    paddingRight = _placementToPadding$p.paddingRight;
-  var content = children;
-  if (!raw) {
-    content = /*#__PURE__*/jsxRuntime.jsx(box.Box, {
-      paddingLeft: paddingLeft,
-      paddingRight: paddingRight,
-      children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        style: {
-          minWidth: theme$1.sizing.xxsmall
-        },
-        children: children
-      })
-    });
-  }
-  var wrappedContent = /*#__PURE__*/jsxRuntime.jsx(InputAdornmentContext.Provider, {
-    value: adornmentContext,
-    children: content
-  });
-  if (fieldLabel) {
-    return /*#__PURE__*/jsxRuntime.jsx(FieldAdornment, {
-      fieldLabel: fieldLabel,
-      children: wrappedContent
-    });
-  }
-  return wrappedContent;
-};
-
-/**
- * Wrap the element with a field provider to override the parent field label.
- * Only split-out from `InputAdornment` to avoid the conditional hook rule.
- */
-var FieldAdornment = function FieldAdornment(_ref2) {
-  var children = _ref2.children,
-    fieldLabel = _ref2.fieldLabel;
-  var parentFieldContext = field.useFieldContext();
-  var fieldContext = react.useMemo(function () {
-    return _objectSpread(_objectSpread({}, parentFieldContext), {}, {
-      accessibilityLabel: fieldLabel
-    });
-  }, [fieldLabel, parentFieldContext]);
-  return /*#__PURE__*/jsxRuntime.jsx(field.FieldContextProvider, {
-    value: fieldContext,
-    children: children
-  });
-};
-
-var _excluded$1 = ["children", "startAdornment", "endAdornment"];
-var InputContainer = function InputContainer(_ref) {
-  var children = _ref.children,
-    startAdornment = _ref.startAdornment,
-    endAdornment = _ref.endAdornment,
-    boxProps = _objectWithoutProperties(_ref, _excluded$1);
-  var _useFieldContext = field.useFieldContext(),
-    _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
-    _useFieldContext2$ = _useFieldContext2[0],
-    disabled = _useFieldContext2$.disabled,
-    invalid = _useFieldContext2$.invalid;
-  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
-    borderRadius: "small",
-    position: "relative",
-    background: disabled ? 'inputDisabled' : 'input'
-  }, boxProps), {}, {
-    children: [startAdornment, children, /*#__PURE__*/jsxRuntime.jsx(FocusIndicator, {
-      invalid: invalid
-    }), endAdornment]
-  }));
-};
-var FocusIndicator = function FocusIndicator(_ref2) {
-  var invalid = _ref2.invalid;
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
-    "aria-hidden": "true",
-    as: "span",
-    data: {
-      'focus-indicator': 'true'
-    }
-    // Styles
-    ,
-    border: invalid ? 'critical' : 'field',
-    borderRadius: "small",
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    top: 0,
-    shadow: "small",
-    className: css.css({
-      pointerEvents: 'none'
-    })
-  });
-};
-
-/**
- * Map children for placement within the `TextInput` flex container. Ensures that
- * placeholders are provided for unused placements.
- */
-var childrenToAdornments = function childrenToAdornments(children) {
-  var startAdornment = null;
-  var endAdornment = null;
-  if (!children) {
-    return {
-      startAdornment: startAdornment,
-      endAdornment: endAdornment
-    };
-  }
-  react.Children.forEach(children, function (child) {
-    if ( /*#__PURE__*/react.isValidElement(child)) {
-      if (child.props.placement === 'end') {
-        endAdornment = child;
-      }
-      if (child.props.placement === 'start') {
-        startAdornment = child;
-      }
-    }
-  });
-  return {
-    startAdornment: startAdornment,
-    endAdornment: endAdornment
-  };
-};
-
-var _excluded = ["children", "data"];
-/** Organize and emphasize information quickly and effectively in a list of text elements. */
-var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
-  var children = _ref.children,
-    data = _ref.data,
-    consumerProps = _objectWithoutProperties(_ref, _excluded);
-  var _useFieldContext = field.useFieldContext(),
-    _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
-    _useFieldContext2$ = _useFieldContext2[0],
-    disabled = _useFieldContext2$.disabled,
-    invalid = _useFieldContext2$.invalid,
-    a11yProps = _useFieldContext2[1];
-  var _childrenToAdornments = childrenToAdornments(children),
-    startAdornment = _childrenToAdornments.startAdornment,
-    endAdornment = _childrenToAdornments.endAdornment;
-  var _useInputStyles = useInputStyles({
-      disabled: disabled,
-      invalid: invalid,
-      startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment)
-    }),
-    _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
-    boxProps = _useInputStyles2[0],
-    inputStyles = _useInputStyles2[1];
-  return /*#__PURE__*/jsxRuntime.jsx(InputContainer, {
-    display: "inline-flex",
-    alignItems: "center",
-    startAdornment: startAdornment,
-    endAdornment: endAdornment,
-    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
-      as: "input",
-      className: css.css(inputStyles),
-      data: data,
-      disabled: disabled,
-      ref: forwardedRef
-    }))
-  });
-});
-TextInput.displayName = 'TextInput';
-/**
- * Returns a tuple where the first item is an object of props to spread onto the
- * underlying Box component that our inputs are created with, and the second
- * item is a CSS object to be passed to Emotion's `css` function
- **/
-var useInputStyles = function useInputStyles(_ref2) {
-  var disabled = _ref2.disabled,
-    startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment;
-  var theme$1 = theme.useTheme();
-  var overflowStyles = text.useOverflowStrategy('truncate');
-  var focusRingStyles = a11y.useFocusRing({
-    always: true
-  });
-  var textStyles = text.useText({
-    baseline: false,
-    tone: disabled ? 'disabled' : 'neutral',
-    size: 'standard',
-    weight: 'regular'
-  });
-  var _textStyles = _slicedToArray(textStyles, 2),
-    typographyStyles = _textStyles[0],
-    responsiveStyles = _textStyles[1];
-  return [{
-    flex: 1,
-    position: 'relative',
-    height: 'medium',
-    paddingLeft: startAdornment ? 'none' : 'medium',
-    paddingRight: endAdornment ? 'none' : 'medium',
-    width: 'full'
-  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
-    ':enabled': {
-      ':focus + [data-focus-indicator]': _objectSpread({
-        borderColor: theme$1.border.color.fieldAccent
-      }, focusRingStyles)
-    },
-    ':focus': {
-      outline: 'none'
-    },
-    '&[aria-invalid=true]': {
-      color: theme$1.color.foreground.muted
-    }
-  })];
-};
-
-exports.InputAdornment = InputAdornment;
-exports.InputContainer = InputContainer;
-exports.TextInput = TextInput;
-exports.useInputStyles = useInputStyles;

package/dist/spark-web-text-input.cjs.prod.js

@@ -1,268 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var box = require('@spark-web/box');
-var field = require('@spark-web/field');
-var theme = require('@spark-web/theme');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var css = require('@emotion/css');
-var a11y = require('@spark-web/a11y');
-var text = require('@spark-web/text');
-
-/**
- * Components like the `SelectInput` may subscribe to the adornment context and
- * change their appearance or behaviour.
- */
-var InputAdornmentContext = /*#__PURE__*/react.createContext(null);
-var placementToPadding = {
-  start: {
-    paddingLeft: 'medium',
-    paddingRight: 'xsmall'
-  },
-  end: {
-    paddingLeft: 'xsmall',
-    paddingRight: 'medium'
-  }
-};
-/**
- * Places an element at the "start" or "end" of the input, only one adornment
- * may be provided for each placement. By default, the adornment element will be
- * wrapped to provide alignment and spacing, use the "raw" property to opt-out
- * of this behaviour.
- *
- * @example
- * <TextInput>
- *   <InputAdornment placement="start">
- *     <Text tone="placeholder">$</Text>
- *   </InputAdornment>
- * </TextInput>
- */
-var InputAdornment = function InputAdornment(_ref) {
-  var children = _ref.children,
-    fieldLabel = _ref.fieldLabel,
-    placement = _ref.placement,
-    raw = _ref.raw;
-  var theme$1 = theme.useTheme();
-  var adornmentContext = react.useMemo(function () {
-    return {
-      placement: placement
-    };
-  }, [placement]);
-  var _placementToPadding$p = placementToPadding[placement],
-    paddingLeft = _placementToPadding$p.paddingLeft,
-    paddingRight = _placementToPadding$p.paddingRight;
-  var content = children;
-  if (!raw) {
-    content = /*#__PURE__*/jsxRuntime.jsx(box.Box, {
-      paddingLeft: paddingLeft,
-      paddingRight: paddingRight,
-      children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        style: {
-          minWidth: theme$1.sizing.xxsmall
-        },
-        children: children
-      })
-    });
-  }
-  var wrappedContent = /*#__PURE__*/jsxRuntime.jsx(InputAdornmentContext.Provider, {
-    value: adornmentContext,
-    children: content
-  });
-  if (fieldLabel) {
-    return /*#__PURE__*/jsxRuntime.jsx(FieldAdornment, {
-      fieldLabel: fieldLabel,
-      children: wrappedContent
-    });
-  }
-  return wrappedContent;
-};
-
-/**
- * Wrap the element with a field provider to override the parent field label.
- * Only split-out from `InputAdornment` to avoid the conditional hook rule.
- */
-var FieldAdornment = function FieldAdornment(_ref2) {
-  var children = _ref2.children,
-    fieldLabel = _ref2.fieldLabel;
-  var parentFieldContext = field.useFieldContext();
-  var fieldContext = react.useMemo(function () {
-    return _objectSpread(_objectSpread({}, parentFieldContext), {}, {
-      accessibilityLabel: fieldLabel
-    });
-  }, [fieldLabel, parentFieldContext]);
-  return /*#__PURE__*/jsxRuntime.jsx(field.FieldContextProvider, {
-    value: fieldContext,
-    children: children
-  });
-};
-
-var _excluded$1 = ["children", "startAdornment", "endAdornment"];
-var InputContainer = function InputContainer(_ref) {
-  var children = _ref.children,
-    startAdornment = _ref.startAdornment,
-    endAdornment = _ref.endAdornment,
-    boxProps = _objectWithoutProperties(_ref, _excluded$1);
-  var _useFieldContext = field.useFieldContext(),
-    _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
-    _useFieldContext2$ = _useFieldContext2[0],
-    disabled = _useFieldContext2$.disabled,
-    invalid = _useFieldContext2$.invalid;
-  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
-    borderRadius: "small",
-    position: "relative",
-    background: disabled ? 'inputDisabled' : 'input'
-  }, boxProps), {}, {
-    children: [startAdornment, children, /*#__PURE__*/jsxRuntime.jsx(FocusIndicator, {
-      invalid: invalid
-    }), endAdornment]
-  }));
-};
-var FocusIndicator = function FocusIndicator(_ref2) {
-  var invalid = _ref2.invalid;
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
-    "aria-hidden": "true",
-    as: "span",
-    data: {
-      'focus-indicator': 'true'
-    }
-    // Styles
-    ,
-    border: invalid ? 'critical' : 'field',
-    borderRadius: "small",
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    top: 0,
-    shadow: "small",
-    className: css.css({
-      pointerEvents: 'none'
-    })
-  });
-};
-
-/**
- * Map children for placement within the `TextInput` flex container. Ensures that
- * placeholders are provided for unused placements.
- */
-var childrenToAdornments = function childrenToAdornments(children) {
-  var startAdornment = null;
-  var endAdornment = null;
-  if (!children) {
-    return {
-      startAdornment: startAdornment,
-      endAdornment: endAdornment
-    };
-  }
-  react.Children.forEach(children, function (child) {
-    if ( /*#__PURE__*/react.isValidElement(child)) {
-      if (child.props.placement === 'end') {
-        endAdornment = child;
-      }
-      if (child.props.placement === 'start') {
-        startAdornment = child;
-      }
-    }
-  });
-  return {
-    startAdornment: startAdornment,
-    endAdornment: endAdornment
-  };
-};
-
-var _excluded = ["children", "data"];
-/** Organize and emphasize information quickly and effectively in a list of text elements. */
-var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
-  var children = _ref.children,
-    data = _ref.data,
-    consumerProps = _objectWithoutProperties(_ref, _excluded);
-  var _useFieldContext = field.useFieldContext(),
-    _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
-    _useFieldContext2$ = _useFieldContext2[0],
-    disabled = _useFieldContext2$.disabled,
-    invalid = _useFieldContext2$.invalid,
-    a11yProps = _useFieldContext2[1];
-  var _childrenToAdornments = childrenToAdornments(children),
-    startAdornment = _childrenToAdornments.startAdornment,
-    endAdornment = _childrenToAdornments.endAdornment;
-  var _useInputStyles = useInputStyles({
-      disabled: disabled,
-      invalid: invalid,
-      startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment)
-    }),
-    _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
-    boxProps = _useInputStyles2[0],
-    inputStyles = _useInputStyles2[1];
-  return /*#__PURE__*/jsxRuntime.jsx(InputContainer, {
-    display: "inline-flex",
-    alignItems: "center",
-    startAdornment: startAdornment,
-    endAdornment: endAdornment,
-    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
-      as: "input",
-      className: css.css(inputStyles),
-      data: data,
-      disabled: disabled,
-      ref: forwardedRef
-    }))
-  });
-});
-TextInput.displayName = 'TextInput';
-/**
- * Returns a tuple where the first item is an object of props to spread onto the
- * underlying Box component that our inputs are created with, and the second
- * item is a CSS object to be passed to Emotion's `css` function
- **/
-var useInputStyles = function useInputStyles(_ref2) {
-  var disabled = _ref2.disabled,
-    startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment;
-  var theme$1 = theme.useTheme();
-  var overflowStyles = text.useOverflowStrategy('truncate');
-  var focusRingStyles = a11y.useFocusRing({
-    always: true
-  });
-  var textStyles = text.useText({
-    baseline: false,
-    tone: disabled ? 'disabled' : 'neutral',
-    size: 'standard',
-    weight: 'regular'
-  });
-  var _textStyles = _slicedToArray(textStyles, 2),
-    typographyStyles = _textStyles[0],
-    responsiveStyles = _textStyles[1];
-  return [{
-    flex: 1,
-    position: 'relative',
-    height: 'medium',
-    paddingLeft: startAdornment ? 'none' : 'medium',
-    paddingRight: endAdornment ? 'none' : 'medium',
-    width: 'full'
-  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
-    ':enabled': {
-      ':focus + [data-focus-indicator]': _objectSpread({
-        borderColor: theme$1.border.color.fieldAccent
-      }, focusRingStyles)
-    },
-    ':focus': {
-      outline: 'none'
-    },
-    '&[aria-invalid=true]': {
-      color: theme$1.color.foreground.muted
-    }
-  })];
-};
-
-exports.InputAdornment = InputAdornment;
-exports.InputContainer = InputContainer;
-exports.TextInput = TextInput;
-exports.useInputStyles = useInputStyles;