@mirohq/design-system-base-form 0.2.13-combobox.0 → 0.2.13
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.
- package/dist/main.js +2 -5
- package/dist/main.js.map +1 -1
- package/dist/module.js +2 -5
- package/dist/module.js.map +1 -1
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -125,15 +125,12 @@ const StyledFloatingLabel = designSystemStitches.styled(designSystemPrimitive.Pr
|
|
|
125
125
|
variants: {
|
|
126
126
|
floating: {
|
|
127
127
|
true: {
|
|
128
|
-
top: "
|
|
129
|
-
transform: "translateY(-50%)",
|
|
128
|
+
top: "-$100",
|
|
130
129
|
left: "$150",
|
|
131
130
|
fontSize: "$150",
|
|
132
131
|
color: "$text-neutrals-subtle",
|
|
133
132
|
padding: "0 2px",
|
|
134
|
-
backgroundColor: "$background-neutrals-container"
|
|
135
|
-
height: "auto",
|
|
136
|
-
lineHeight: 1
|
|
133
|
+
backgroundColor: "$background-neutrals-container"
|
|
137
134
|
},
|
|
138
135
|
false: {
|
|
139
136
|
fontSize: "$200",
|
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 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: '0',\n transform: 'translateY(-50%)',\n left: '$150',\n fontSize: '$150',\n color: '$text-neutrals-subtle',\n padding: '0 2px',\n backgroundColor: '$background-neutrals-container',\n height: 'auto',\n lineHeight: 1,\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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"}
|
|
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
|
@@ -117,15 +117,12 @@ const StyledFloatingLabel = styled(Primitive.label, {
|
|
|
117
117
|
variants: {
|
|
118
118
|
floating: {
|
|
119
119
|
true: {
|
|
120
|
-
top: "
|
|
121
|
-
transform: "translateY(-50%)",
|
|
120
|
+
top: "-$100",
|
|
122
121
|
left: "$150",
|
|
123
122
|
fontSize: "$150",
|
|
124
123
|
color: "$text-neutrals-subtle",
|
|
125
124
|
padding: "0 2px",
|
|
126
|
-
backgroundColor: "$background-neutrals-container"
|
|
127
|
-
height: "auto",
|
|
128
|
-
lineHeight: 1
|
|
125
|
+
backgroundColor: "$background-neutrals-container"
|
|
129
126
|
},
|
|
130
127
|
false: {
|
|
131
128
|
fontSize: "$200",
|
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 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: '0',\n transform: 'translateY(-50%)',\n left: '$150',\n fontSize: '$150',\n color: '$text-neutrals-subtle',\n padding: '0 2px',\n backgroundColor: '$background-neutrals-container',\n height: 'auto',\n lineHeight: 1,\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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"}
|
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-base-form",
|
|
3
|
-
"version": "0.2.13
|
|
3
|
+
"version": "0.2.13",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@mirohq/design-system-base-input": "^0.0.4",
|
|
30
30
|
"@mirohq/design-system-primitive": "^1.1.2",
|
|
31
|
-
"@mirohq/design-system-stitches": "^2.6.10",
|
|
32
31
|
"@mirohq/design-system-types": "^0.10.0",
|
|
33
32
|
"@mirohq/design-system-use-id": "^0.1.2",
|
|
33
|
+
"@mirohq/design-system-stitches": "^2.6.11",
|
|
34
34
|
"@mirohq/design-system-utils": "^0.15.4"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|