@mirohq/design-system-base-form 0.1.1 → 0.2.0

package/dist/main.js

@@ -40,7 +40,7 @@ const FormFieldProvider = ({
   const [focused, setFocused] = React.useState(false);
   const [isFloatingLabel, setIsFloatingLabel] = React.useState(true);
   const [label, setLabel] = React.useState(null);
-  const shouldUseFloatingLabel = label !== void 0 && isFloatingLabel;
+  const shouldUseFloatingLabel = label != null && isFloatingLabel;
   const autoId = designSystemUseId.useId();
   const id = customId != null ? customId : autoId;
   const [messageId, setMessageId] = React.useState("".concat(id, "-message"));
@@ -51,9 +51,9 @@ const FormFieldProvider = ({
   const [readOnly, setReadOnly] = React.useState();
   const [disabled, setDisabled] = React.useState();
   const [ariaDisabled, setAriaDisabled] = React.useState();
-  const [ariaInvalid, setAriaInvalid] = React.useState();
   const [ariaDescribedBy, setAriaDescribedBy] = React.useState("");
-  const [valid, setValid] = React.useState(true);
+  const valid = status === FORM_FIELD_STATUS.valid ? true : status === FORM_FIELD_STATUS.invalid ? false : void 0;
+  const ariaInvalid = status === FORM_FIELD_STATUS.invalid ? true : void 0;
   React.useEffect(() => {
     const message = document.getElementById(messageId);
     const helper = document.getElementById(helperId);
@@ -65,22 +65,6 @@ const FormFieldProvider = ({
     );
     setAriaDescribedBy(ariaDescribedBy2 === "" ? void 0 : ariaDescribedBy2);
   }, [messageId, helperId, descriptionId]);
-  React.useEffect(() => {
-    if (status === FORM_FIELD_STATUS.invalid) {
-      setAriaInvalid(true);
-    } else {
-      setAriaInvalid(void 0);
-    }
-  }, [status]);
-  React.useEffect(() => {
-    if (status === FORM_FIELD_STATUS.valid) {
-      setValid(true);
-    } else if (status === FORM_FIELD_STATUS.invalid) {
-      setValid(false);
-    } else {
-      setValid(void 0);
-    }
-  }, [status]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormFieldContext.Provider,
     {
@@ -114,7 +98,6 @@ const FormFieldProvider = ({
         ariaDisabled,
         setAriaDisabled,
         ariaInvalid,
-        setAriaInvalid,
         valid
       },
       children

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/constants.ts","../src/hooks/use-form-field-context.tsx","../src/floating-label.styled.ts","../src/floating-label.tsx"],"sourcesContent":["export const FORM_FIELD_STATUS = Object.freeze({\n  // the field value is valid\n  valid: 'valid',\n  // the field value is invalid\n  invalid: 'invalid',\n  // the field value has been changed\n  dirty: 'dirty',\n  // the field value has not been changed\n  pristine: 'pristine',\n  // the field has been focused and blurred\n  touched: 'touched',\n})\n\nexport type FormFieldStatus = keyof typeof FORM_FIELD_STATUS\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n} from 'react'\nimport type { PropsWithChildren, AriaAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\n\nimport type { FormFieldStatus } from '../constants'\nimport { FORM_FIELD_STATUS } from '../constants'\n\ntype FormElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n\ninterface FormFieldProps {\n  /**\n   * Field status\n   * @default \"pristine\"\n   */\n  status?: FormFieldStatus\n\n  id?: string\n}\n\ninterface FormFieldContextProps<FormElementRef extends FormElements>\n  extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<FormFieldStatus>>\n  isFloatingLabel: boolean\n  setIsFloatingLabel: React.Dispatch<React.SetStateAction<boolean>>\n  label: React.ReactNode\n  setLabel: React.Dispatch<React.SetStateAction<React.ReactNode>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  setHelperId: React.Dispatch<React.SetStateAction<string>>\n  messageId: string\n  setMessageId: React.Dispatch<React.SetStateAction<string>>\n  descriptionId: string\n  setDescriptionId: React.Dispatch<React.SetStateAction<string>>\n  formElementId: string\n  formElementRef: React.MutableRefObject<FormElementRef>\n  ariaDescribedBy: string | undefined\n  shouldUseFloatingLabel: boolean\n  required: boolean | undefined\n  setRequired: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  readOnly: boolean | undefined\n  setReadOnly: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  disabled: boolean | undefined\n  setDisabled: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  ariaDisabled: Booleanish | undefined\n  setAriaDisabled: React.Dispatch<React.SetStateAction<Booleanish | undefined>>\n  ariaInvalid: AriaAttributes['aria-invalid']\n  setAriaInvalid: React.Dispatch<\n    React.SetStateAction<AriaAttributes['aria-invalid']>\n  >\n  valid: boolean | undefined\n}\n\nexport type FormFieldProviderProps = Partial<FormFieldProps>\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: PropsWithChildren<FormFieldProviderProps>): JSX.Element => {\n  // form field state\n  const [status, setStatus] = useState<FormFieldStatus>(\n    customStatus ?? 'pristine'\n  )\n  const [focused, setFocused] = useState(false)\n  const [isFloatingLabel, setIsFloatingLabel] = useState(true)\n  const [label, setLabel] = useState<React.ReactNode>(null)\n  const shouldUseFloatingLabel = label !== undefined && isFloatingLabel\n\n  // partials\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  const [messageId, setMessageId] = useState(`${id}-message`)\n  const [helperId, setHelperId] = useState(`${id}-helper`)\n  const [descriptionId, setDescriptionId] = useState(`${id}-description`)\n\n  // form element\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [required, setRequired] = useState<boolean>()\n  const [readOnly, setReadOnly] = useState<boolean>()\n  const [disabled, setDisabled] = useState<boolean>()\n  const [ariaDisabled, setAriaDisabled] = useState<Booleanish>()\n  const [ariaInvalid, setAriaInvalid] =\n    useState<AriaAttributes['aria-invalid']>()\n  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>('')\n  const [valid, setValid] = useState<boolean | undefined>(true)\n\n  useEffect(() => {\n    const message = document.getElementById(messageId)\n    const helper = document.getElementById(helperId)\n    const description = document.getElementById(descriptionId)\n\n    const ariaDescribedBy = stringAttrValue(\n      // message or description\n      message != null ? messageId : description != null && descriptionId,\n      helper != null && helperId\n    )\n\n    /**\n     * message + helper text\n     * description + helper text\n     */\n    setAriaDescribedBy(ariaDescribedBy === '' ? undefined : ariaDescribedBy)\n  }, [messageId, helperId, descriptionId])\n\n  useEffect(() => {\n    if (status === FORM_FIELD_STATUS.invalid) {\n      setAriaInvalid(true)\n    } else {\n      setAriaInvalid(undefined)\n    }\n  }, [status])\n\n  useEffect(() => {\n    if (status === FORM_FIELD_STATUS.valid) {\n      setValid(true)\n    } else if (status === FORM_FIELD_STATUS.invalid) {\n      setValid(false)\n    } else {\n      setValid(undefined)\n    }\n  }, [status])\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        formElementId: `${id}-form-element`,\n        messageId,\n        setMessageId,\n        helperId,\n        setHelperId,\n        descriptionId,\n        setDescriptionId,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n        isFloatingLabel,\n        setIsFloatingLabel,\n        label,\n        setLabel,\n        ariaDescribedBy,\n        shouldUseFloatingLabel,\n        required,\n        setRequired,\n        readOnly,\n        setReadOnly,\n        disabled,\n        setDisabled,\n        ariaDisabled,\n        setAriaDisabled,\n        ariaInvalid,\n        setAriaInvalid,\n        valid,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = <\n  T extends FormElements\n>(): FormFieldContextProps<T> => useContext(FormFieldContext)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styles as baseInputStyles } from '@mirohq/design-system-base-input'\n\nexport const StyledFloatingLabel = styled(Primitive.label, {\n  transitionProperty: 'transform, margin, top, left, font-size',\n  transitionDuration: '200ms',\n  transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  zIndex: 1,\n  pointerEvents: 'none',\n  whiteSpace: 'nowrap',\n  fontStyle: 'normal',\n  lineHeight: 1.5,\n  height: '0.75em',\n  variants: {\n    floating: {\n      true: {\n        top: '-$100',\n        left: '$150',\n        fontSize: '$150',\n        color: '$text-neutrals-subtle',\n        padding: '0 2px',\n        backgroundColor: '$background-neutrals-container',\n      },\n      false: {\n        fontSize: '$200',\n        marginTop: '-1px', // adjust for the input's border\n        ...baseInputStyles.base.placeholder,\n      },\n    },\n    size: {\n      large: {},\n      'x-large': {},\n    },\n  },\n  compoundVariants: [\n    {\n      size: 'large',\n      floating: false,\n      css: {\n        top: '$100',\n        left: '$150',\n      },\n    },\n    {\n      size: 'x-large',\n      floating: false,\n      css: {\n        top: '$150',\n        // $space$250 does not exist by design but we will force it here\n        left: 'calc($200 + $space$50)',\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'large',\n  },\n})\n\nexport type StyledFloatingLabelProps = ComponentPropsWithRef<\n  typeof StyledFloatingLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from './hooks/use-form-field-context'\nimport { StyledFloatingLabel } from './floating-label.styled'\nimport type { StyledFloatingLabelProps } from './floating-label.styled'\n\nexport interface FloatingLabelProps extends StyledFloatingLabelProps {}\n\nexport const FloatingLabel = React.forwardRef<\n  ElementRef<typeof StyledFloatingLabel>,\n  FloatingLabelProps\n>((props, forwardRef) => {\n  const { isFloatingLabel, formElementId } = useFormFieldContext()\n\n  return (\n    <StyledFloatingLabel\n      htmlFor={formElementId}\n      floating={isFloatingLabel}\n      {...props}\n      ref={forwardRef}\n    />\n  )\n})\n"],"names":["createContext","useState","useId","useRef","useEffect","ariaDescribedBy","stringAttrValue","jsx","useContext","styled","Primitive","baseInputStyles","React"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/constants.ts","../src/hooks/use-form-field-context.tsx","../src/floating-label.styled.ts","../src/floating-label.tsx"],"sourcesContent":["export const FORM_FIELD_STATUS = Object.freeze({\n  // the field value is valid\n  valid: 'valid',\n  // the field value is invalid\n  invalid: 'invalid',\n  // the field value has been changed\n  dirty: 'dirty',\n  // the field value has not been changed\n  pristine: 'pristine',\n  // the field has been focused and blurred\n  touched: 'touched',\n})\n\nexport type FormFieldStatus = keyof typeof FORM_FIELD_STATUS\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n} from 'react'\nimport type { PropsWithChildren, AriaAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\n\nimport type { FormFieldStatus } from '../constants'\nimport { FORM_FIELD_STATUS } from '../constants'\n\ntype FormElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n\ninterface FormFieldProps {\n  /**\n   * Field status\n   * @default \"pristine\"\n   */\n  status?: FormFieldStatus\n\n  id?: string\n}\n\ninterface FormFieldContextProps<FormElementRef extends FormElements>\n  extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<FormFieldStatus>>\n  isFloatingLabel: boolean\n  setIsFloatingLabel: React.Dispatch<React.SetStateAction<boolean>>\n  label: React.ReactNode\n  setLabel: React.Dispatch<React.SetStateAction<React.ReactNode>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  setHelperId: React.Dispatch<React.SetStateAction<string>>\n  messageId: string\n  setMessageId: React.Dispatch<React.SetStateAction<string>>\n  descriptionId: string\n  setDescriptionId: React.Dispatch<React.SetStateAction<string>>\n  formElementId: string\n  formElementRef: React.MutableRefObject<FormElementRef>\n  ariaDescribedBy: string | undefined\n  shouldUseFloatingLabel: boolean\n  required: boolean | undefined\n  setRequired: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  readOnly: boolean | undefined\n  setReadOnly: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  disabled: boolean | undefined\n  setDisabled: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  ariaDisabled: Booleanish | undefined\n  setAriaDisabled: React.Dispatch<React.SetStateAction<Booleanish | undefined>>\n  ariaInvalid: AriaAttributes['aria-invalid']\n  valid: boolean | undefined\n}\n\nexport type FormFieldProviderProps = Partial<FormFieldProps>\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: PropsWithChildren<FormFieldProviderProps>): JSX.Element => {\n  // form field state\n  const [status, setStatus] = useState<FormFieldStatus>(\n    customStatus ?? 'pristine'\n  )\n  const [focused, setFocused] = useState(false)\n  const [isFloatingLabel, setIsFloatingLabel] = useState(true)\n  const [label, setLabel] = useState<React.ReactNode>(null)\n  const shouldUseFloatingLabel = label != null && isFloatingLabel\n\n  // partials\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  const [messageId, setMessageId] = useState(`${id}-message`)\n  const [helperId, setHelperId] = useState(`${id}-helper`)\n  const [descriptionId, setDescriptionId] = useState(`${id}-description`)\n\n  // form element\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [required, setRequired] = useState<boolean>()\n  const [readOnly, setReadOnly] = useState<boolean>()\n  const [disabled, setDisabled] = useState<boolean>()\n  const [ariaDisabled, setAriaDisabled] = useState<Booleanish>()\n  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>('')\n\n  const valid =\n    status === FORM_FIELD_STATUS.valid\n      ? true\n      : status === FORM_FIELD_STATUS.invalid\n      ? false\n      : undefined\n\n  const ariaInvalid: AriaAttributes['aria-invalid'] =\n    status === FORM_FIELD_STATUS.invalid ? true : undefined\n\n  useEffect(() => {\n    const message = document.getElementById(messageId)\n    const helper = document.getElementById(helperId)\n    const description = document.getElementById(descriptionId)\n\n    const ariaDescribedBy = stringAttrValue(\n      // message or description\n      message != null ? messageId : description != null && descriptionId,\n      helper != null && helperId\n    )\n\n    /**\n     * message + helper text\n     * description + helper text\n     */\n    setAriaDescribedBy(ariaDescribedBy === '' ? undefined : ariaDescribedBy)\n  }, [messageId, helperId, descriptionId])\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        formElementId: `${id}-form-element`,\n        messageId,\n        setMessageId,\n        helperId,\n        setHelperId,\n        descriptionId,\n        setDescriptionId,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n        isFloatingLabel,\n        setIsFloatingLabel,\n        label,\n        setLabel,\n        ariaDescribedBy,\n        shouldUseFloatingLabel,\n        required,\n        setRequired,\n        readOnly,\n        setReadOnly,\n        disabled,\n        setDisabled,\n        ariaDisabled,\n        setAriaDisabled,\n        ariaInvalid,\n        valid,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = <\n  T extends FormElements\n>(): FormFieldContextProps<T> => useContext(FormFieldContext)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styles as baseInputStyles } from '@mirohq/design-system-base-input'\n\nexport const StyledFloatingLabel = styled(Primitive.label, {\n  transitionProperty: 'transform, margin, top, left, font-size',\n  transitionDuration: '200ms',\n  transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  zIndex: 1,\n  pointerEvents: 'none',\n  whiteSpace: 'nowrap',\n  fontStyle: 'normal',\n  lineHeight: 1.5,\n  height: '0.75em',\n  variants: {\n    floating: {\n      true: {\n        top: '-$100',\n        left: '$150',\n        fontSize: '$150',\n        color: '$text-neutrals-subtle',\n        padding: '0 2px',\n        backgroundColor: '$background-neutrals-container',\n      },\n      false: {\n        fontSize: '$200',\n        marginTop: '-1px', // adjust for the input's border\n        ...baseInputStyles.base.placeholder,\n      },\n    },\n    size: {\n      large: {},\n      'x-large': {},\n    },\n  },\n  compoundVariants: [\n    {\n      size: 'large',\n      floating: false,\n      css: {\n        top: '$100',\n        left: '$150',\n      },\n    },\n    {\n      size: 'x-large',\n      floating: false,\n      css: {\n        top: '$150',\n        // $space$250 does not exist by design but we will force it here\n        left: 'calc($200 + $space$50)',\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'large',\n  },\n})\n\nexport type StyledFloatingLabelProps = ComponentPropsWithRef<\n  typeof StyledFloatingLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from './hooks/use-form-field-context'\nimport { StyledFloatingLabel } from './floating-label.styled'\nimport type { StyledFloatingLabelProps } from './floating-label.styled'\n\nexport interface FloatingLabelProps extends StyledFloatingLabelProps {}\n\nexport const FloatingLabel = React.forwardRef<\n  ElementRef<typeof StyledFloatingLabel>,\n  FloatingLabelProps\n>((props, forwardRef) => {\n  const { isFloatingLabel, formElementId } = useFormFieldContext()\n\n  return (\n    <StyledFloatingLabel\n      htmlFor={formElementId}\n      floating={isFloatingLabel}\n      {...props}\n      ref={forwardRef}\n    />\n  )\n})\n"],"names":["createContext","useState","useId","useRef","useEffect","ariaDescribedBy","stringAttrValue","jsx","useContext","styled","Primitive","baseInputStyles","React"],"mappings":"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"}

package/dist/module.js

@@ -32,7 +32,7 @@ const FormFieldProvider = ({
   const [focused, setFocused] = useState(false);
   const [isFloatingLabel, setIsFloatingLabel] = useState(true);
   const [label, setLabel] = useState(null);
-  const shouldUseFloatingLabel = label !== void 0 && isFloatingLabel;
+  const shouldUseFloatingLabel = label != null && isFloatingLabel;
   const autoId = useId();
   const id = customId != null ? customId : autoId;
   const [messageId, setMessageId] = useState("".concat(id, "-message"));
@@ -43,9 +43,9 @@ const FormFieldProvider = ({
   const [readOnly, setReadOnly] = useState();
   const [disabled, setDisabled] = useState();
   const [ariaDisabled, setAriaDisabled] = useState();
-  const [ariaInvalid, setAriaInvalid] = useState();
   const [ariaDescribedBy, setAriaDescribedBy] = useState("");
-  const [valid, setValid] = useState(true);
+  const valid = status === FORM_FIELD_STATUS.valid ? true : status === FORM_FIELD_STATUS.invalid ? false : void 0;
+  const ariaInvalid = status === FORM_FIELD_STATUS.invalid ? true : void 0;
   useEffect(() => {
     const message = document.getElementById(messageId);
     const helper = document.getElementById(helperId);
@@ -57,22 +57,6 @@ const FormFieldProvider = ({
     );
     setAriaDescribedBy(ariaDescribedBy2 === "" ? void 0 : ariaDescribedBy2);
   }, [messageId, helperId, descriptionId]);
-  useEffect(() => {
-    if (status === FORM_FIELD_STATUS.invalid) {
-      setAriaInvalid(true);
-    } else {
-      setAriaInvalid(void 0);
-    }
-  }, [status]);
-  useEffect(() => {
-    if (status === FORM_FIELD_STATUS.valid) {
-      setValid(true);
-    } else if (status === FORM_FIELD_STATUS.invalid) {
-      setValid(false);
-    } else {
-      setValid(void 0);
-    }
-  }, [status]);
   return /* @__PURE__ */ jsx(
     FormFieldContext.Provider,
     {
@@ -106,7 +90,6 @@ const FormFieldProvider = ({
         ariaDisabled,
         setAriaDisabled,
         ariaInvalid,
-        setAriaInvalid,
         valid
       },
       children

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/constants.ts","../src/hooks/use-form-field-context.tsx","../src/floating-label.styled.ts","../src/floating-label.tsx"],"sourcesContent":["export const FORM_FIELD_STATUS = Object.freeze({\n  // the field value is valid\n  valid: 'valid',\n  // the field value is invalid\n  invalid: 'invalid',\n  // the field value has been changed\n  dirty: 'dirty',\n  // the field value has not been changed\n  pristine: 'pristine',\n  // the field has been focused and blurred\n  touched: 'touched',\n})\n\nexport type FormFieldStatus = keyof typeof FORM_FIELD_STATUS\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n} from 'react'\nimport type { PropsWithChildren, AriaAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\n\nimport type { FormFieldStatus } from '../constants'\nimport { FORM_FIELD_STATUS } from '../constants'\n\ntype FormElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n\ninterface FormFieldProps {\n  /**\n   * Field status\n   * @default \"pristine\"\n   */\n  status?: FormFieldStatus\n\n  id?: string\n}\n\ninterface FormFieldContextProps<FormElementRef extends FormElements>\n  extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<FormFieldStatus>>\n  isFloatingLabel: boolean\n  setIsFloatingLabel: React.Dispatch<React.SetStateAction<boolean>>\n  label: React.ReactNode\n  setLabel: React.Dispatch<React.SetStateAction<React.ReactNode>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  setHelperId: React.Dispatch<React.SetStateAction<string>>\n  messageId: string\n  setMessageId: React.Dispatch<React.SetStateAction<string>>\n  descriptionId: string\n  setDescriptionId: React.Dispatch<React.SetStateAction<string>>\n  formElementId: string\n  formElementRef: React.MutableRefObject<FormElementRef>\n  ariaDescribedBy: string | undefined\n  shouldUseFloatingLabel: boolean\n  required: boolean | undefined\n  setRequired: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  readOnly: boolean | undefined\n  setReadOnly: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  disabled: boolean | undefined\n  setDisabled: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  ariaDisabled: Booleanish | undefined\n  setAriaDisabled: React.Dispatch<React.SetStateAction<Booleanish | undefined>>\n  ariaInvalid: AriaAttributes['aria-invalid']\n  setAriaInvalid: React.Dispatch<\n    React.SetStateAction<AriaAttributes['aria-invalid']>\n  >\n  valid: boolean | undefined\n}\n\nexport type FormFieldProviderProps = Partial<FormFieldProps>\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: PropsWithChildren<FormFieldProviderProps>): JSX.Element => {\n  // form field state\n  const [status, setStatus] = useState<FormFieldStatus>(\n    customStatus ?? 'pristine'\n  )\n  const [focused, setFocused] = useState(false)\n  const [isFloatingLabel, setIsFloatingLabel] = useState(true)\n  const [label, setLabel] = useState<React.ReactNode>(null)\n  const shouldUseFloatingLabel = label !== undefined && isFloatingLabel\n\n  // partials\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  const [messageId, setMessageId] = useState(`${id}-message`)\n  const [helperId, setHelperId] = useState(`${id}-helper`)\n  const [descriptionId, setDescriptionId] = useState(`${id}-description`)\n\n  // form element\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [required, setRequired] = useState<boolean>()\n  const [readOnly, setReadOnly] = useState<boolean>()\n  const [disabled, setDisabled] = useState<boolean>()\n  const [ariaDisabled, setAriaDisabled] = useState<Booleanish>()\n  const [ariaInvalid, setAriaInvalid] =\n    useState<AriaAttributes['aria-invalid']>()\n  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>('')\n  const [valid, setValid] = useState<boolean | undefined>(true)\n\n  useEffect(() => {\n    const message = document.getElementById(messageId)\n    const helper = document.getElementById(helperId)\n    const description = document.getElementById(descriptionId)\n\n    const ariaDescribedBy = stringAttrValue(\n      // message or description\n      message != null ? messageId : description != null && descriptionId,\n      helper != null && helperId\n    )\n\n    /**\n     * message + helper text\n     * description + helper text\n     */\n    setAriaDescribedBy(ariaDescribedBy === '' ? undefined : ariaDescribedBy)\n  }, [messageId, helperId, descriptionId])\n\n  useEffect(() => {\n    if (status === FORM_FIELD_STATUS.invalid) {\n      setAriaInvalid(true)\n    } else {\n      setAriaInvalid(undefined)\n    }\n  }, [status])\n\n  useEffect(() => {\n    if (status === FORM_FIELD_STATUS.valid) {\n      setValid(true)\n    } else if (status === FORM_FIELD_STATUS.invalid) {\n      setValid(false)\n    } else {\n      setValid(undefined)\n    }\n  }, [status])\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        formElementId: `${id}-form-element`,\n        messageId,\n        setMessageId,\n        helperId,\n        setHelperId,\n        descriptionId,\n        setDescriptionId,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n        isFloatingLabel,\n        setIsFloatingLabel,\n        label,\n        setLabel,\n        ariaDescribedBy,\n        shouldUseFloatingLabel,\n        required,\n        setRequired,\n        readOnly,\n        setReadOnly,\n        disabled,\n        setDisabled,\n        ariaDisabled,\n        setAriaDisabled,\n        ariaInvalid,\n        setAriaInvalid,\n        valid,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = <\n  T extends FormElements\n>(): FormFieldContextProps<T> => useContext(FormFieldContext)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styles as baseInputStyles } from '@mirohq/design-system-base-input'\n\nexport const StyledFloatingLabel = styled(Primitive.label, {\n  transitionProperty: 'transform, margin, top, left, font-size',\n  transitionDuration: '200ms',\n  transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  zIndex: 1,\n  pointerEvents: 'none',\n  whiteSpace: 'nowrap',\n  fontStyle: 'normal',\n  lineHeight: 1.5,\n  height: '0.75em',\n  variants: {\n    floating: {\n      true: {\n        top: '-$100',\n        left: '$150',\n        fontSize: '$150',\n        color: '$text-neutrals-subtle',\n        padding: '0 2px',\n        backgroundColor: '$background-neutrals-container',\n      },\n      false: {\n        fontSize: '$200',\n        marginTop: '-1px', // adjust for the input's border\n        ...baseInputStyles.base.placeholder,\n      },\n    },\n    size: {\n      large: {},\n      'x-large': {},\n    },\n  },\n  compoundVariants: [\n    {\n      size: 'large',\n      floating: false,\n      css: {\n        top: '$100',\n        left: '$150',\n      },\n    },\n    {\n      size: 'x-large',\n      floating: false,\n      css: {\n        top: '$150',\n        // $space$250 does not exist by design but we will force it here\n        left: 'calc($200 + $space$50)',\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'large',\n  },\n})\n\nexport type StyledFloatingLabelProps = ComponentPropsWithRef<\n  typeof StyledFloatingLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from './hooks/use-form-field-context'\nimport { StyledFloatingLabel } from './floating-label.styled'\nimport type { StyledFloatingLabelProps } from './floating-label.styled'\n\nexport interface FloatingLabelProps extends StyledFloatingLabelProps {}\n\nexport const FloatingLabel = React.forwardRef<\n  ElementRef<typeof StyledFloatingLabel>,\n  FloatingLabelProps\n>((props, forwardRef) => {\n  const { isFloatingLabel, formElementId } = useFormFieldContext()\n\n  return (\n    <StyledFloatingLabel\n      htmlFor={formElementId}\n      floating={isFloatingLabel}\n      {...props}\n      ref={forwardRef}\n    />\n  )\n})\n"],"names":["ariaDescribedBy","baseInputStyles"],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/constants.ts","../src/hooks/use-form-field-context.tsx","../src/floating-label.styled.ts","../src/floating-label.tsx"],"sourcesContent":["export const FORM_FIELD_STATUS = Object.freeze({\n  // the field value is valid\n  valid: 'valid',\n  // the field value is invalid\n  invalid: 'invalid',\n  // the field value has been changed\n  dirty: 'dirty',\n  // the field value has not been changed\n  pristine: 'pristine',\n  // the field has been focused and blurred\n  touched: 'touched',\n})\n\nexport type FormFieldStatus = keyof typeof FORM_FIELD_STATUS\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n} from 'react'\nimport type { PropsWithChildren, AriaAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\n\nimport type { FormFieldStatus } from '../constants'\nimport { FORM_FIELD_STATUS } from '../constants'\n\ntype FormElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n\ninterface FormFieldProps {\n  /**\n   * Field status\n   * @default \"pristine\"\n   */\n  status?: FormFieldStatus\n\n  id?: string\n}\n\ninterface FormFieldContextProps<FormElementRef extends FormElements>\n  extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<FormFieldStatus>>\n  isFloatingLabel: boolean\n  setIsFloatingLabel: React.Dispatch<React.SetStateAction<boolean>>\n  label: React.ReactNode\n  setLabel: React.Dispatch<React.SetStateAction<React.ReactNode>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  setHelperId: React.Dispatch<React.SetStateAction<string>>\n  messageId: string\n  setMessageId: React.Dispatch<React.SetStateAction<string>>\n  descriptionId: string\n  setDescriptionId: React.Dispatch<React.SetStateAction<string>>\n  formElementId: string\n  formElementRef: React.MutableRefObject<FormElementRef>\n  ariaDescribedBy: string | undefined\n  shouldUseFloatingLabel: boolean\n  required: boolean | undefined\n  setRequired: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  readOnly: boolean | undefined\n  setReadOnly: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  disabled: boolean | undefined\n  setDisabled: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  ariaDisabled: Booleanish | undefined\n  setAriaDisabled: React.Dispatch<React.SetStateAction<Booleanish | undefined>>\n  ariaInvalid: AriaAttributes['aria-invalid']\n  valid: boolean | undefined\n}\n\nexport type FormFieldProviderProps = Partial<FormFieldProps>\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: PropsWithChildren<FormFieldProviderProps>): JSX.Element => {\n  // form field state\n  const [status, setStatus] = useState<FormFieldStatus>(\n    customStatus ?? 'pristine'\n  )\n  const [focused, setFocused] = useState(false)\n  const [isFloatingLabel, setIsFloatingLabel] = useState(true)\n  const [label, setLabel] = useState<React.ReactNode>(null)\n  const shouldUseFloatingLabel = label != null && isFloatingLabel\n\n  // partials\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  const [messageId, setMessageId] = useState(`${id}-message`)\n  const [helperId, setHelperId] = useState(`${id}-helper`)\n  const [descriptionId, setDescriptionId] = useState(`${id}-description`)\n\n  // form element\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [required, setRequired] = useState<boolean>()\n  const [readOnly, setReadOnly] = useState<boolean>()\n  const [disabled, setDisabled] = useState<boolean>()\n  const [ariaDisabled, setAriaDisabled] = useState<Booleanish>()\n  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>('')\n\n  const valid =\n    status === FORM_FIELD_STATUS.valid\n      ? true\n      : status === FORM_FIELD_STATUS.invalid\n      ? false\n      : undefined\n\n  const ariaInvalid: AriaAttributes['aria-invalid'] =\n    status === FORM_FIELD_STATUS.invalid ? true : undefined\n\n  useEffect(() => {\n    const message = document.getElementById(messageId)\n    const helper = document.getElementById(helperId)\n    const description = document.getElementById(descriptionId)\n\n    const ariaDescribedBy = stringAttrValue(\n      // message or description\n      message != null ? messageId : description != null && descriptionId,\n      helper != null && helperId\n    )\n\n    /**\n     * message + helper text\n     * description + helper text\n     */\n    setAriaDescribedBy(ariaDescribedBy === '' ? undefined : ariaDescribedBy)\n  }, [messageId, helperId, descriptionId])\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        formElementId: `${id}-form-element`,\n        messageId,\n        setMessageId,\n        helperId,\n        setHelperId,\n        descriptionId,\n        setDescriptionId,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n        isFloatingLabel,\n        setIsFloatingLabel,\n        label,\n        setLabel,\n        ariaDescribedBy,\n        shouldUseFloatingLabel,\n        required,\n        setRequired,\n        readOnly,\n        setReadOnly,\n        disabled,\n        setDisabled,\n        ariaDisabled,\n        setAriaDisabled,\n        ariaInvalid,\n        valid,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = <\n  T extends FormElements\n>(): FormFieldContextProps<T> => useContext(FormFieldContext)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styles as baseInputStyles } from '@mirohq/design-system-base-input'\n\nexport const StyledFloatingLabel = styled(Primitive.label, {\n  transitionProperty: 'transform, margin, top, left, font-size',\n  transitionDuration: '200ms',\n  transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  zIndex: 1,\n  pointerEvents: 'none',\n  whiteSpace: 'nowrap',\n  fontStyle: 'normal',\n  lineHeight: 1.5,\n  height: '0.75em',\n  variants: {\n    floating: {\n      true: {\n        top: '-$100',\n        left: '$150',\n        fontSize: '$150',\n        color: '$text-neutrals-subtle',\n        padding: '0 2px',\n        backgroundColor: '$background-neutrals-container',\n      },\n      false: {\n        fontSize: '$200',\n        marginTop: '-1px', // adjust for the input's border\n        ...baseInputStyles.base.placeholder,\n      },\n    },\n    size: {\n      large: {},\n      'x-large': {},\n    },\n  },\n  compoundVariants: [\n    {\n      size: 'large',\n      floating: false,\n      css: {\n        top: '$100',\n        left: '$150',\n      },\n    },\n    {\n      size: 'x-large',\n      floating: false,\n      css: {\n        top: '$150',\n        // $space$250 does not exist by design but we will force it here\n        left: 'calc($200 + $space$50)',\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'large',\n  },\n})\n\nexport type StyledFloatingLabelProps = ComponentPropsWithRef<\n  typeof StyledFloatingLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from './hooks/use-form-field-context'\nimport { StyledFloatingLabel } from './floating-label.styled'\nimport type { StyledFloatingLabelProps } from './floating-label.styled'\n\nexport interface FloatingLabelProps extends StyledFloatingLabelProps {}\n\nexport const FloatingLabel = React.forwardRef<\n  ElementRef<typeof StyledFloatingLabel>,\n  FloatingLabelProps\n>((props, forwardRef) => {\n  const { isFloatingLabel, formElementId } = useFormFieldContext()\n\n  return (\n    <StyledFloatingLabel\n      htmlFor={formElementId}\n      floating={isFloatingLabel}\n      {...props}\n      ref={forwardRef}\n    />\n  )\n})\n"],"names":["ariaDescribedBy","baseInputStyles"],"mappings":"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"}

package/dist/types.d.ts

@@ -592,7 +592,6 @@ interface FormFieldContextProps<FormElementRef extends FormElements> extends For
     ariaDisabled: Booleanish | undefined;
     setAriaDisabled: React__default.Dispatch<React__default.SetStateAction<Booleanish | undefined>>;
     ariaInvalid: AriaAttributes['aria-invalid'];
-    setAriaInvalid: React__default.Dispatch<React__default.SetStateAction<AriaAttributes['aria-invalid']>>;
     valid: boolean | undefined;
 }
 declare type FormFieldProviderProps = Partial<FormFieldProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-base-form",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,12 +26,12 @@
     "react": "^16.14 || ^17 || ^18"
   },
   "dependencies": {
-    "@mirohq/design-system-primitive": "^1.1.2",
     "@mirohq/design-system-base-input": "^0.0.3",
+    "@mirohq/design-system-primitive": "^1.1.2",
+    "@mirohq/design-system-stitches": "^2.6.1",
     "@mirohq/design-system-types": "^0.6.2",
-    "@mirohq/design-system-use-id": "^0.1.1",
     "@mirohq/design-system-utils": "^0.15.0",
-    "@mirohq/design-system-stitches": "^2.6.1"
+    "@mirohq/design-system-use-id": "^0.1.1"
   },
   "scripts": {
     "build": "rollup -c ../../../../rollup.config.js",