@spark-web/text-input 1.0.3 → 1.2.0

package/dist/declarations/src/childrenToAdornments.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+import type { InputAdornmentProps } from './InputAdornment';
+export declare type AdornmentChild = ReactElement<InputAdornmentProps> | null | undefined;
+export declare type AdornmentsAsChildren = AdornmentChild | [AdornmentChild, AdornmentChild];
+/**
+ * Map children for placement within the `TextInput` flex container. Ensures that
+ * placeholders are provided for unused placements.
+ */
+export declare const childrenToAdornments: (children?: AdornmentsAsChildren) => {
+    startAdornment: ReactElement<InputAdornmentProps> | null;
+    endAdornment: ReactElement<InputAdornmentProps> | null;
+};

package/dist/declarations/src/index.d.ts

@@ -1,2 +1,6 @@
+export { InputAdornment } from './InputAdornment';
+export { InputContainer } from './InputContainer';
 export { TextInput, useInput } from './TextInput';
+export type { AdornmentChild } from './childrenToAdornments';
+export type { InputContainerProps } from './InputContainer';
 export type { TextInputProps, UseInputProps } from './TextInput';

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

@@ -2,53 +2,238 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var css = require('@emotion/css');
-var a11y = require('@spark-web/a11y');
 var box = require('@spark-web/box');
 var field = require('@spark-web/field');
-var text = require('@spark-web/text');
 var theme = require('@spark-web/theme');
-var internal = require('@spark-web/utils/internal');
 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 _useTheme = theme.useTheme(),
+      sizing = _useTheme.sizing;
+
+  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: 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 = ["data"],
-    _excluded2 = ["disabled", "invalid"];
+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({
+    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,
+    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 data = _ref.data,
+  var children = _ref.children,
+      data = _ref.data,
       consumerProps = _objectWithoutProperties(_ref, _excluded);
 
   var _useFieldContext = field.useFieldContext(),
-      disabled = _useFieldContext.disabled,
-      invalid = _useFieldContext.invalid,
-      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded2);
+      _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 inputStyles = useInput({
-    disabled: disabled,
-    invalid: invalid
+  return /*#__PURE__*/jsxRuntime.jsx(InputContainer, {
+    display: "inline-flex",
+    alignItems: "center",
+    startAdornment: startAdornment,
+    endAdornment: endAdornment,
+    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), a11yProps), {}, {
+      as: "input",
+      ref: forwardedRef,
+      data: data,
+      disabled: disabled,
+      position: "relative" // Styles
+      ,
+      flex: 1,
+      height: "medium",
+      paddingX: "medium",
+      paddingLeft: startAdornment ? 'none' : 'medium',
+      paddingRight: endAdornment ? 'none' : 'medium',
+      className: css.css(useInput({
+        disabled: disabled,
+        invalid: invalid
+      }))
+    }))
   });
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({
-    as: "input",
-    disabled: disabled,
-    ref: forwardedRef // styles
-    ,
-    background: disabled ? 'inputDisabled' : 'input',
-    border: invalid ? 'critical' : 'field',
-    borderRadius: "small",
-    height: "medium",
-    paddingX: "medium",
-    className: css.css(inputStyles)
-  }, data ? internal.buildDataAttributes(data) : null), a11yProps), consumerProps));
 });
-TextInput.displayName = 'TextInput'; // Styled components
-// ------------------------------
-
-function useInput(_ref2) {
+TextInput.displayName = 'TextInput';
+var useInput = function useInput(_ref2) {
   var disabled = _ref2.disabled;
   var theme$1 = theme.useTheme();
   var focusRingStyles = a11y.useFocusRing({
@@ -66,16 +251,18 @@ function useInput(_ref2) {
       responsiveStyles = _textStyles[1];
 
   return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), {}, {
+    ':focus': {
+      outline: 'none'
+    },
     ':enabled': {
-      '&:hover': {
-        borderColor: theme$1.border.color.fieldHover
-      },
-      '&:focus': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
+      ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme$1.border.color.fieldAccent
-      })
+      }, focusRingStyles)
     }
   });
-}
+};
 
+exports.InputAdornment = InputAdornment;
+exports.InputContainer = InputContainer;
 exports.TextInput = TextInput;
 exports.useInput = useInput;

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

@@ -2,53 +2,238 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var css = require('@emotion/css');
-var a11y = require('@spark-web/a11y');
 var box = require('@spark-web/box');
 var field = require('@spark-web/field');
-var text = require('@spark-web/text');
 var theme = require('@spark-web/theme');
-var internal = require('@spark-web/utils/internal');
 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 _useTheme = theme.useTheme(),
+      sizing = _useTheme.sizing;
+
+  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: 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 = ["data"],
-    _excluded2 = ["disabled", "invalid"];
+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({
+    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,
+    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 data = _ref.data,
+  var children = _ref.children,
+      data = _ref.data,
       consumerProps = _objectWithoutProperties(_ref, _excluded);
 
   var _useFieldContext = field.useFieldContext(),
-      disabled = _useFieldContext.disabled,
-      invalid = _useFieldContext.invalid,
-      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded2);
+      _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 inputStyles = useInput({
-    disabled: disabled,
-    invalid: invalid
+  return /*#__PURE__*/jsxRuntime.jsx(InputContainer, {
+    display: "inline-flex",
+    alignItems: "center",
+    startAdornment: startAdornment,
+    endAdornment: endAdornment,
+    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), a11yProps), {}, {
+      as: "input",
+      ref: forwardedRef,
+      data: data,
+      disabled: disabled,
+      position: "relative" // Styles
+      ,
+      flex: 1,
+      height: "medium",
+      paddingX: "medium",
+      paddingLeft: startAdornment ? 'none' : 'medium',
+      paddingRight: endAdornment ? 'none' : 'medium',
+      className: css.css(useInput({
+        disabled: disabled,
+        invalid: invalid
+      }))
+    }))
   });
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({
-    as: "input",
-    disabled: disabled,
-    ref: forwardedRef // styles
-    ,
-    background: disabled ? 'inputDisabled' : 'input',
-    border: invalid ? 'critical' : 'field',
-    borderRadius: "small",
-    height: "medium",
-    paddingX: "medium",
-    className: css.css(inputStyles)
-  }, data ? internal.buildDataAttributes(data) : null), a11yProps), consumerProps));
 });
-TextInput.displayName = 'TextInput'; // Styled components
-// ------------------------------
-
-function useInput(_ref2) {
+TextInput.displayName = 'TextInput';
+var useInput = function useInput(_ref2) {
   var disabled = _ref2.disabled;
   var theme$1 = theme.useTheme();
   var focusRingStyles = a11y.useFocusRing({
@@ -66,16 +251,18 @@ function useInput(_ref2) {
       responsiveStyles = _textStyles[1];
 
   return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), {}, {
+    ':focus': {
+      outline: 'none'
+    },
     ':enabled': {
-      '&:hover': {
-        borderColor: theme$1.border.color.fieldHover
-      },
-      '&:focus': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
+      ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme$1.border.color.fieldAccent
-      })
+      }, focusRingStyles)
     }
   });
-}
+};
 
+exports.InputAdornment = InputAdornment;
+exports.InputContainer = InputContainer;
 exports.TextInput = TextInput;
 exports.useInput = useInput;