@spark-web/text-input 1.0.3 → 1.1.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,4 @@
+export { InputAdornment } from './InputAdornment';
 export { TextInput, useInput } from './TextInput';
+export type { AdornmentChild } from './childrenToAdornments';
 export type { TextInputProps, UseInputProps } from './TextInput';

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

@@ -2,25 +2,154 @@
 
 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, {
+        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"],
+/**
+ * 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"],
     _excluded2 = ["disabled", "invalid"];
 
 /** 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(),
@@ -28,28 +157,47 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       invalid = _useFieldContext.invalid,
       a11yProps = _objectWithoutProperties(_useFieldContext, _excluded2);
 
-  var inputStyles = useInput({
-    disabled: disabled,
-    invalid: invalid
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({
-    as: "input",
-    disabled: disabled,
-    ref: forwardedRef // styles
-    ,
+  var _childrenToAdornments = childrenToAdornments(children),
+      startAdornment = _childrenToAdornments.startAdornment,
+      endAdornment = _childrenToAdornments.endAdornment;
+
+  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
     background: disabled ? 'inputDisabled' : 'input',
     border: invalid ? 'critical' : 'field',
     borderRadius: "small",
+    display: "inline-flex",
+    alignItems: "center",
+    flexDirection: "row",
     height: "medium",
-    paddingX: "medium",
-    className: css.css(inputStyles)
-  }, data ? internal.buildDataAttributes(data) : null), a11yProps), consumerProps));
+    marginY: "none",
+    className: css.css(useInput({
+      disabled: disabled,
+      invalid: invalid
+    })),
+    children: [startAdornment, /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+      as: "input",
+      ref: forwardedRef,
+      disabled: disabled // Styles
+      ,
+      flex: 1,
+      height: "medium",
+      paddingX: "medium",
+      paddingLeft: startAdornment ? 'none' : 'medium',
+      paddingRight: endAdornment ? 'none' : 'medium',
+      className: css.css(useInput({
+        disabled: disabled,
+        invalid: invalid,
+        isNested: true
+      })),
+      data: data
+    }, a11yProps), consumerProps)), endAdornment]
+  });
 });
-TextInput.displayName = 'TextInput'; // Styled components
-// ------------------------------
-
-function useInput(_ref2) {
-  var disabled = _ref2.disabled;
+TextInput.displayName = 'TextInput';
+var useInput = function useInput(_ref2) {
+  var disabled = _ref2.disabled,
+      _ref2$isNested = _ref2.isNested,
+      isNested = _ref2$isNested === void 0 ? false : _ref2$isNested;
   var theme$1 = theme.useTheme();
   var focusRingStyles = a11y.useFocusRing({
     always: true
@@ -65,17 +213,27 @@ function useInput(_ref2) {
       typographyStyles = _textStyles[0],
       responsiveStyles = _textStyles[1];
 
-  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), {}, {
+  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), isNested ? {
+    ':focus': {
+      // This removes the nested input outline visibility since
+      // the wrapper will be outlined, but still visibly focusable
+      // to windows high contrast mode users.
+      // @see https://tailwindcss.com/docs/outline-style#removing-outlines
+      outline: '2px solid transparent',
+      outlineOffset: '2px'
+    }
+  } : {
     ':enabled': {
-      '&:hover': {
-        borderColor: theme$1.border.color.fieldHover
-      },
       '&:focus': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
         borderColor: theme$1.border.color.fieldAccent
       })
-    }
+    },
+    ':focus-within': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
+      borderColor: theme$1.border.color.fieldAccent
+    })
   });
-}
+};
 
+exports.InputAdornment = InputAdornment;
 exports.TextInput = TextInput;
 exports.useInput = useInput;

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

@@ -2,25 +2,154 @@
 
 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, {
+        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"],
+/**
+ * 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"],
     _excluded2 = ["disabled", "invalid"];
 
 /** 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(),
@@ -28,28 +157,47 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       invalid = _useFieldContext.invalid,
       a11yProps = _objectWithoutProperties(_useFieldContext, _excluded2);
 
-  var inputStyles = useInput({
-    disabled: disabled,
-    invalid: invalid
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({
-    as: "input",
-    disabled: disabled,
-    ref: forwardedRef // styles
-    ,
+  var _childrenToAdornments = childrenToAdornments(children),
+      startAdornment = _childrenToAdornments.startAdornment,
+      endAdornment = _childrenToAdornments.endAdornment;
+
+  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
     background: disabled ? 'inputDisabled' : 'input',
     border: invalid ? 'critical' : 'field',
     borderRadius: "small",
+    display: "inline-flex",
+    alignItems: "center",
+    flexDirection: "row",
     height: "medium",
-    paddingX: "medium",
-    className: css.css(inputStyles)
-  }, data ? internal.buildDataAttributes(data) : null), a11yProps), consumerProps));
+    marginY: "none",
+    className: css.css(useInput({
+      disabled: disabled,
+      invalid: invalid
+    })),
+    children: [startAdornment, /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+      as: "input",
+      ref: forwardedRef,
+      disabled: disabled // Styles
+      ,
+      flex: 1,
+      height: "medium",
+      paddingX: "medium",
+      paddingLeft: startAdornment ? 'none' : 'medium',
+      paddingRight: endAdornment ? 'none' : 'medium',
+      className: css.css(useInput({
+        disabled: disabled,
+        invalid: invalid,
+        isNested: true
+      })),
+      data: data
+    }, a11yProps), consumerProps)), endAdornment]
+  });
 });
-TextInput.displayName = 'TextInput'; // Styled components
-// ------------------------------
-
-function useInput(_ref2) {
-  var disabled = _ref2.disabled;
+TextInput.displayName = 'TextInput';
+var useInput = function useInput(_ref2) {
+  var disabled = _ref2.disabled,
+      _ref2$isNested = _ref2.isNested,
+      isNested = _ref2$isNested === void 0 ? false : _ref2$isNested;
   var theme$1 = theme.useTheme();
   var focusRingStyles = a11y.useFocusRing({
     always: true
@@ -65,17 +213,27 @@ function useInput(_ref2) {
       typographyStyles = _textStyles[0],
       responsiveStyles = _textStyles[1];
 
-  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), {}, {
+  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), isNested ? {
+    ':focus': {
+      // This removes the nested input outline visibility since
+      // the wrapper will be outlined, but still visibly focusable
+      // to windows high contrast mode users.
+      // @see https://tailwindcss.com/docs/outline-style#removing-outlines
+      outline: '2px solid transparent',
+      outlineOffset: '2px'
+    }
+  } : {
     ':enabled': {
-      '&:hover': {
-        borderColor: theme$1.border.color.fieldHover
-      },
       '&:focus': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
         borderColor: theme$1.border.color.fieldAccent
       })
-    }
+    },
+    ':focus-within': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
+      borderColor: theme$1.border.color.fieldAccent
+    })
   });
-}
+};
 
+exports.InputAdornment = InputAdornment;
 exports.TextInput = TextInput;
 exports.useInput = useInput;