@mirohq/design-system-base-form 0.2.2 → 0.2.4

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
  1. package/dist/main.js +18 -1
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +18 -1
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +6 -2
  6. package/package.json +5 -5
package/dist/main.js CHANGED
@@ -39,6 +39,7 @@ const FormFieldProvider = ({
39
39
  );
40
40
  const [focused, setFocused] = React.useState(false);
41
41
  const [isFloatingLabel, setIsFloatingLabel] = React.useState(true);
42
+ const [isHiddenLabel, setIsHiddenLabel] = React.useState(false);
42
43
  const [label, setLabel] = React.useState(null);
43
44
  const shouldUseFloatingLabel = label != null && isFloatingLabel;
44
45
  const autoId = designSystemUseId.useId();
@@ -85,6 +86,8 @@ const FormFieldProvider = ({
85
86
  setFocused,
86
87
  isFloatingLabel,
87
88
  setIsFloatingLabel,
89
+ isHiddenLabel,
90
+ setIsHiddenLabel,
88
91
  label,
89
92
  setLabel,
90
93
  ariaDescribedBy,
@@ -136,6 +139,19 @@ const StyledFloatingLabel = designSystemStitches.styled(designSystemPrimitive.Pr
136
139
  ...designSystemBaseInput.styles.base.placeholder
137
140
  }
138
141
  },
142
+ visuallyHidden: {
143
+ true: {
144
+ // todo MDS-1003: replace with shared styles
145
+ border: "0",
146
+ clip: "rect(0 0 0 0)",
147
+ height: "1px",
148
+ margin: "-1px",
149
+ overflow: "hidden",
150
+ padding: "0",
151
+ position: "absolute",
152
+ width: "1px"
153
+ }
154
+ },
139
155
  size: {
140
156
  large: {},
141
157
  "x-large": {}
@@ -166,12 +182,13 @@ const StyledFloatingLabel = designSystemStitches.styled(designSystemPrimitive.Pr
166
182
  });
167
183
 
168
184
  const FloatingLabel = React__default["default"].forwardRef((props, forwardRef) => {
169
- const { isFloatingLabel, formElementId } = useFormFieldContext();
185
+ const { isFloatingLabel, isHiddenLabel, formElementId } = useFormFieldContext();
170
186
  return /* @__PURE__ */ jsxRuntime.jsx(
171
187
  StyledFloatingLabel,
172
188
  {
173
189
  htmlFor: formElementId,
174
190
  floating: isFloatingLabel,
191
+ visuallyHidden: isHiddenLabel,
175
192
  ...props,
176
193
  ref: forwardRef
177
194
  }
package/dist/main.js.map CHANGED
@@ -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 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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"}
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 isHiddenLabel: boolean\n setIsHiddenLabel: 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 [isHiddenLabel, setIsHiddenLabel] = useState(false)\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 isHiddenLabel,\n setIsHiddenLabel,\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 visuallyHidden: {\n true: {\n // todo MDS-1003: replace with shared styles\n border: '0',\n clip: 'rect(0 0 0 0)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0',\n position: 'absolute',\n width: '1px',\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\n extends Omit<StyledFloatingLabelProps, 'visuallyHidden'> {}\n\nexport const FloatingLabel = React.forwardRef<\n ElementRef<typeof StyledFloatingLabel>,\n FloatingLabelProps\n>((props, forwardRef) => {\n const { isFloatingLabel, isHiddenLabel, formElementId } =\n useFormFieldContext()\n\n return (\n <StyledFloatingLabel\n htmlFor={formElementId}\n floating={isFloatingLabel}\n visuallyHidden={isHiddenLabel}\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 CHANGED
@@ -31,6 +31,7 @@ const FormFieldProvider = ({
31
31
  );
32
32
  const [focused, setFocused] = useState(false);
33
33
  const [isFloatingLabel, setIsFloatingLabel] = useState(true);
34
+ const [isHiddenLabel, setIsHiddenLabel] = useState(false);
34
35
  const [label, setLabel] = useState(null);
35
36
  const shouldUseFloatingLabel = label != null && isFloatingLabel;
36
37
  const autoId = useId();
@@ -77,6 +78,8 @@ const FormFieldProvider = ({
77
78
  setFocused,
78
79
  isFloatingLabel,
79
80
  setIsFloatingLabel,
81
+ isHiddenLabel,
82
+ setIsHiddenLabel,
80
83
  label,
81
84
  setLabel,
82
85
  ariaDescribedBy,
@@ -128,6 +131,19 @@ const StyledFloatingLabel = styled(Primitive.label, {
128
131
  ...styles.base.placeholder
129
132
  }
130
133
  },
134
+ visuallyHidden: {
135
+ true: {
136
+ // todo MDS-1003: replace with shared styles
137
+ border: "0",
138
+ clip: "rect(0 0 0 0)",
139
+ height: "1px",
140
+ margin: "-1px",
141
+ overflow: "hidden",
142
+ padding: "0",
143
+ position: "absolute",
144
+ width: "1px"
145
+ }
146
+ },
131
147
  size: {
132
148
  large: {},
133
149
  "x-large": {}
@@ -158,12 +174,13 @@ const StyledFloatingLabel = styled(Primitive.label, {
158
174
  });
159
175
 
160
176
  const FloatingLabel = React.forwardRef((props, forwardRef) => {
161
- const { isFloatingLabel, formElementId } = useFormFieldContext();
177
+ const { isFloatingLabel, isHiddenLabel, formElementId } = useFormFieldContext();
162
178
  return /* @__PURE__ */ jsx(
163
179
  StyledFloatingLabel,
164
180
  {
165
181
  htmlFor: formElementId,
166
182
  floating: isFloatingLabel,
183
+ visuallyHidden: isHiddenLabel,
167
184
  ...props,
168
185
  ref: forwardRef
169
186
  }
package/dist/module.js.map CHANGED
@@ -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 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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"}
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 isHiddenLabel: boolean\n setIsHiddenLabel: 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 [isHiddenLabel, setIsHiddenLabel] = useState(false)\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 isHiddenLabel,\n setIsHiddenLabel,\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 visuallyHidden: {\n true: {\n // todo MDS-1003: replace with shared styles\n border: '0',\n clip: 'rect(0 0 0 0)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0',\n position: 'absolute',\n width: '1px',\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\n extends Omit<StyledFloatingLabelProps, 'visuallyHidden'> {}\n\nexport const FloatingLabel = React.forwardRef<\n ElementRef<typeof StyledFloatingLabel>,\n FloatingLabelProps\n>((props, forwardRef) => {\n const { isFloatingLabel, isHiddenLabel, formElementId } =\n useFormFieldContext()\n\n return (\n <StyledFloatingLabel\n htmlFor={formElementId}\n floating={isFloatingLabel}\n visuallyHidden={isHiddenLabel}\n {...props}\n ref={forwardRef}\n />\n )\n})\n"],"names":["ariaDescribedBy","baseInputStyles"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -535,16 +535,18 @@ declare const StyledFloatingLabel: React.ForwardRefExoticComponent<Omit<Omit<_mi
535
535
  _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
536
536
  '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
537
537
  };
538
- }>>>, "size" | "floating"> & _stitches_react_types_styled_component.TransformProps<{
538
+ }>>>, "size" | "floating" | "visuallyHidden"> & _stitches_react_types_styled_component.TransformProps<{
539
539
  floating?: boolean | "false" | "true" | undefined;
540
+ visuallyHidden?: boolean | "true" | undefined;
540
541
  size?: "large" | "x-large" | undefined;
541
542
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLLabelElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"label">>, {
542
543
  floating?: boolean | "false" | "true" | undefined;
544
+ visuallyHidden?: boolean | "true" | undefined;
543
545
  size?: "large" | "x-large" | undefined;
544
546
  }, {}>;
545
547
  declare type StyledFloatingLabelProps = ComponentPropsWithRef<typeof StyledFloatingLabel>;
546
548
 
547
- interface FloatingLabelProps extends StyledFloatingLabelProps {
549
+ interface FloatingLabelProps extends Omit<StyledFloatingLabelProps, 'visuallyHidden'> {
548
550
  }
549
551
  declare const FloatingLabel: React__default.ForwardRefExoticComponent<Omit<FloatingLabelProps, "ref"> & React__default.RefAttributes<HTMLLabelElement>>;
550
552
 
@@ -570,6 +572,8 @@ interface FormFieldContextProps<FormElementRef extends FormElements> extends For
570
572
  setStatus: React__default.Dispatch<React__default.SetStateAction<FormFieldStatus>>;
571
573
  isFloatingLabel: boolean;
572
574
  setIsFloatingLabel: React__default.Dispatch<React__default.SetStateAction<boolean>>;
575
+ isHiddenLabel: boolean;
576
+ setIsHiddenLabel: React__default.Dispatch<React__default.SetStateAction<boolean>>;
573
577
  label: React__default.ReactNode;
574
578
  setLabel: React__default.Dispatch<React__default.SetStateAction<React__default.ReactNode>>;
575
579
  focused: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-base-form",
3
- "version": "0.2.2",
3
+ "version": "0.2.4",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,11 +27,11 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@mirohq/design-system-base-input": "^0.0.4",
30
- "@mirohq/design-system-primitive": "^1.1.2",
31
- "@mirohq/design-system-types": "^0.6.2",
30
+ "@mirohq/design-system-stitches": "^2.6.3",
32
31
  "@mirohq/design-system-use-id": "^0.1.1",
33
- "@mirohq/design-system-stitches": "^2.6.2",
34
- "@mirohq/design-system-utils": "^0.15.0"
32
+ "@mirohq/design-system-types": "^0.6.2",
33
+ "@mirohq/design-system-utils": "^0.15.0",
34
+ "@mirohq/design-system-primitive": "^1.1.2"
35
35
  },
36
36
  "scripts": {
37
37
  "build": "rollup -c ../../../../rollup.config.js",