npm - @mirohq/design-system-base-form - Versions diffs - 0.2.0-ssr.0 → 0.2.1 - Mend

@mirohq/design-system-base-form 0.2.0-ssr.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/main.js CHANGED Viewed

@@ -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();
+  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 CHANGED Viewed

	@@ -1 +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 != 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 [ariaInvalid, setAriaInvalid] =\n useState<AriaAttributes['aria-invalid']>()\n const [ariaDescribedBy, setAriaDescribedBy] = useState<string \| undefined>('')\n const [valid, setValid] = useState<boolean \| 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 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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"}
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 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":";;;;;;;;;;;;;;;;AAAa,MAAA,iBAAA,GAAoB,OAAO,MAAO,CAAA;AAAA;AAAA,EAE7C,KAAO,EAAA,OAAA;AAAA;AAAA,EAEP,OAAS,EAAA,SAAA;AAAA;AAAA,EAET,KAAO,EAAA,OAAA;AAAA;AAAA,EAEP,QAAU,EAAA,UAAA;AAAA;AAAA,EAEV,OAAS,EAAA,SAAA;AACX,CAAC;;ACiDD,MAAM,gBAAA,GAAmBA,mBAA0C,CAAA,EAAS,CAAA,CAAA;AAErE,MAAM,oBAAoB,CAAC;AAAA,EAChC,QAAA;AAAA,EACA,MAAQ,EAAA,YAAA;AAAA,EACR,EAAI,EAAA,QAAA;AAAA,EACJ,GAAG,SAAA;AACL,CAA8D,KAAA;AAE5D,EAAM,MAAA,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAAC,cAAA;AAAA,IAC1B,YAAgB,IAAA,IAAA,GAAA,YAAA,GAAA,UAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AAC5C,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIA,eAAS,IAAI,CAAA,CAAA;AAC3D,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAA0B,IAAI,CAAA,CAAA;AACxD,EAAM,MAAA,sBAAA,GAAyB,SAAS,IAAQ,IAAA,eAAA,CAAA;AAGhD,EAAA,MAAM,SAASC,uBAAM,EAAA,CAAA;AACrB,EAAA,MAAM,KAAK,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,MAAA,CAAA;AAEvB,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,IAAID,cAAS,CAAA,EAAA,CAAG,WAAE,UAAU,CAAA,CAAA,CAAA;AAC1D,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,IAAIA,cAAS,CAAA,EAAA,CAAG,WAAE,SAAS,CAAA,CAAA,CAAA;AACvD,EAAA,MAAM,CAAC,aAAe,EAAA,gBAAgB,IAAIA,cAAS,CAAA,EAAA,CAAG,WAAE,cAAc,CAAA,CAAA,CAAA;AAGtE,EAAM,MAAA,cAAA,GAAiBE,aAAyB,IAAI,CAAA,CAAA;AACpD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIF,cAAkB,EAAA,CAAA;AAClD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,cAAkB,EAAA,CAAA;AAClD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,cAAkB,EAAA,CAAA;AAClD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,cAAqB,EAAA,CAAA;AAC7D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIA,eAA6B,EAAE,CAAA,CAAA;AAE7E,EAAM,MAAA,KAAA,GACJ,WAAW,iBAAkB,CAAA,KAAA,GACzB,OACA,MAAW,KAAA,iBAAA,CAAkB,UAC7B,KACA,GAAA,KAAA,CAAA,CAAA;AAEN,EAAA,MAAM,WACJ,GAAA,MAAA,KAAW,iBAAkB,CAAA,OAAA,GAAU,IAAO,GAAA,KAAA,CAAA,CAAA;AAEhD,EAAAG,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,OAAA,GAAU,QAAS,CAAA,cAAA,CAAe,SAAS,CAAA,CAAA;AACjD,IAAM,MAAA,MAAA,GAAS,QAAS,CAAA,cAAA,CAAe,QAAQ,CAAA,CAAA;AAC/C,IAAM,MAAA,WAAA,GAAc,QAAS,CAAA,cAAA,CAAe,aAAa,CAAA,CAAA;AAEzD,IAAA,MAAMC,gBAAkB,GAAAC,iCAAA;AAAA;AAAA,MAEtB,OAAW,IAAA,IAAA,GAAO,SAAY,GAAA,WAAA,IAAe,IAAQ,IAAA,aAAA;AAAA,MACrD,UAAU,IAAQ,IAAA,QAAA;AAAA,KACpB,CAAA;AAMA,IAAmBD,kBAAAA,CAAAA,gBAAAA,KAAoB,EAAK,GAAA,KAAA,CAAA,GAAYA,gBAAe,CAAA,CAAA;AAAA,GACtE,EAAA,CAAC,SAAW,EAAA,QAAA,EAAU,aAAa,CAAC,CAAA,CAAA;AAEvC,EACE,uBAAAE,cAAA;AAAA,IAAC,gBAAiB,CAAA,QAAA;AAAA,IAAjB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,GAAG,SAAA;AAAA,QACH,EAAA;AAAA,QACA,cAAA;AAAA,QACA,aAAA,EAAe,GAAG,MAAE,CAAA,EAAA,EAAA,eAAA,CAAA;AAAA,QACpB,SAAA;AAAA,QACA,YAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,aAAA;AAAA,QACA,gBAAA;AAAA,QACA,MAAA;AAAA,QACA,SAAA;AAAA,QACA,OAAA;AAAA,QACA,UAAA;AAAA,QACA,eAAA;AAAA,QACA,kBAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAA;AAAA,QACA,eAAA;AAAA,QACA,sBAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,YAAA;AAAA,QACA,eAAA;AAAA,QACA,WAAA;AAAA,QACA,KAAA;AAAA,OACF;AAAA,MAEC,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,EAAA;AAEa,MAAA,mBAAA,GAAsB,MAEFC,gBAAA,CAAW,gBAAgB;;AC9J/C,MAAA,mBAAA,GAAsBC,2BAAO,CAAAC,+BAAA,CAAU,KAAO,EAAA;AAAA,EACzD,kBAAoB,EAAA,yCAAA;AAAA,EACpB,kBAAoB,EAAA,OAAA;AAAA,EACpB,wBAA0B,EAAA,4BAAA;AAAA,EAC1B,QAAU,EAAA,UAAA;AAAA,EACV,GAAK,EAAA,CAAA;AAAA,EACL,IAAM,EAAA,CAAA;AAAA,EACN,MAAQ,EAAA,CAAA;AAAA,EACR,aAAe,EAAA,MAAA;AAAA,EACf,UAAY,EAAA,QAAA;AAAA,EACZ,SAAW,EAAA,QAAA;AAAA,EACX,UAAY,EAAA,GAAA;AAAA,EACZ,MAAQ,EAAA,QAAA;AAAA,EACR,QAAU,EAAA;AAAA,IACR,QAAU,EAAA;AAAA,MACR,IAAM,EAAA;AAAA,QACJ,GAAK,EAAA,OAAA;AAAA,QACL,IAAM,EAAA,MAAA;AAAA,QACN,QAAU,EAAA,MAAA;AAAA,QACV,KAAO,EAAA,uBAAA;AAAA,QACP,OAAS,EAAA,OAAA;AAAA,QACT,eAAiB,EAAA,gCAAA;AAAA,OACnB;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAU,EAAA,MAAA;AAAA,QACV,SAAW,EAAA,MAAA;AAAA;AAAA,QACX,GAAGC,6BAAgB,IAAK,CAAA,WAAA;AAAA,OAC1B;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,OAAO,EAAC;AAAA,MACR,WAAW,EAAC;AAAA,KACd;AAAA,GACF;AAAA,EACA,gBAAkB,EAAA;AAAA,IAChB;AAAA,MACE,IAAM,EAAA,OAAA;AAAA,MACN,QAAU,EAAA,KAAA;AAAA,MACV,GAAK,EAAA;AAAA,QACH,GAAK,EAAA,MAAA;AAAA,QACL,IAAM,EAAA,MAAA;AAAA,OACR;AAAA,KACF;AAAA,IACA;AAAA,MACE,IAAM,EAAA,SAAA;AAAA,MACN,QAAU,EAAA,KAAA;AAAA,MACV,GAAK,EAAA;AAAA,QACH,GAAK,EAAA,MAAA;AAAA;AAAA,QAEL,IAAM,EAAA,wBAAA;AAAA,OACR;AAAA,KACF;AAAA,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,OAAA;AAAA,GACR;AACF,CAAC,CAAA;;ACpDM,MAAM,aAAgB,GAAAC,yBAAA,CAAM,UAGjC,CAAA,CAAC,OAAO,UAAe,KAAA;AACvB,EAAA,MAAM,EAAE,eAAA,EAAiB,aAAc,EAAA,GAAI,mBAAoB,EAAA,CAAA;AAE/D,EACE,uBAAAL,cAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,aAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACT,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,UAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ,CAAC;;;;;;;"}

package/dist/module.js CHANGED Viewed

@@ -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();
+  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 CHANGED Viewed

	@@ -1 +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 != 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 [ariaInvalid, setAriaInvalid] =\n useState<AriaAttributes['aria-invalid']>()\n const [ariaDescribedBy, setAriaDescribedBy] = useState<string \| undefined>('')\n const [valid, setValid] = useState<boolean \| 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 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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"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

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