@equinor/eds-core-react/dist/esm/components/InputWrapper/InputWrapper.js

The React implementation of the Equinor Design System

import { forwardRef, useCallback } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { useToken } from '@equinor/eds-utils';
import { inputToken } from './InputWrapper.tokens.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { HelperText as TextfieldHelperText } from './HelperText/HelperText.js';
import { Label as Label$1 } from '../Label/Label.js';
import { useEds } from '../EdsProvider/eds.context.js';

const Container = styled.div.withConfig({
  displayName: "InputWrapper__Container",
  componentId: "sc-v6o9z1-0"
})([""]);
const HelperText = styled(TextfieldHelperText).withConfig({
  displayName: "InputWrapper__HelperText",
  componentId: "sc-v6o9z1-1"
})(["margin-top:8px;margin-left:8px;"]);
const Label = styled(Label$1).withConfig({
  displayName: "InputWrapper__Label",
  componentId: "sc-v6o9z1-2"
})(["margin-left:8px;margin-right:8px;"]);
/* @TODO fix no-unused-prop-types disabled & readOnly */

/** InputWrapper is a internal skeleton component for structuring input elements  */
const InputWrapper = /*#__PURE__*/forwardRef(function InputWrapper({
  children,
  color,
  label,
  labelProps = {},
  helperProps = {},
  helperIcon,
  ...other
}, ref) {
  const {
    density
  } = useEds();
  const actualVariant = color || 'input';
  const inputToken$1 = inputToken[actualVariant];
  const token = useToken({
    density
  }, inputToken$1);
  const helperTextColor = useCallback(() => {
    const _token = token();
    return other.disabled ? _token.entities.helperText.states.disabled.typography.color : _token.entities.helperText.typography.color;
  }, [token, other.disabled])();
  const hasHelperText = Boolean(helperProps?.text);
  const hasLabel = Boolean(label || labelProps?.label);
  return /*#__PURE__*/jsx(ThemeProvider, {
    theme: token,
    children: /*#__PURE__*/jsxs(Container, {
      ...other,
      ref: ref,
      children: [hasLabel && /*#__PURE__*/jsx(Label, {
        label,
        ...labelProps
      }), children, hasHelperText && /*#__PURE__*/jsx(HelperText, {
        color: helperTextColor,
        icon: helperIcon,
        ...helperProps
      })]
    })
  });
});

export { InputWrapper };