@hypothesis/frontend-shared/lib/components/input/Input.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/input/Input.tsx";
import classnames from 'classnames';
import { useSyncedRef } from '../../hooks/use-synced-ref';
import { useValidationError } from '../../hooks/use-validation-error';
import { downcastRef } from '../../util/typing';
import { inputGroupStyles } from './InputGroup';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export function inputStyles({
  classes,
  feedback
}) {
  return classnames('focus-visible-ring ring-inset border rounded w-full p-2', 'bg-grey-0 focus:bg-white disabled:bg-grey-1', 'placeholder:text-grey-6 disabled:placeholder:text-grey-7',
  // On iOS, the input font size must be at least 16px to prevent the browser
  // from zooming into it on touch.
  'touch:text-at-least-16px', {
    'ring-2': !!feedback,
    'ring-red-error': feedback === 'error',
    'ring-yellow-notice': feedback === 'warning'
  },
  // Adapt styles when this component is inside an InputGroup
  inputGroupStyles, classes);
}
/**
 * Render a text field input
 */
export default function Input({
  elementRef,
  type = 'text',
  classes,
  error,
  feedback,
  ...htmlAttributes
}) {
  if (!htmlAttributes.id && !htmlAttributes['aria-label']) {
    console.warn('`Input` component should have either an `id` or an `aria-label` attribute');
  }
  const inputRef = downcastRef(elementRef);
  const ref = useSyncedRef(inputRef);
  if (error) {
    feedback = 'error';
  }
  useValidationError(ref, error);
  return _jsxDEV("input", {
    "data-component": "Input",
    ...htmlAttributes,
    ref: ref,
    type: type,
    className: inputStyles({
      classes,
      feedback
    }),
    "aria-invalid": feedback === 'error'
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 73,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=Input.js.map