npm - @cube-dev/ui-kit - Versions diffs - 0.180.0 → 0.182.0 - Mend

@cube-dev/ui-kit 0.180.0 → 0.182.0

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 (676) hide show

package/dist/components/fields/TextInputMapper/TextInputMapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInputMapper.js","names":["TextArea","PasswordInput"],"sources":["../../../../src/components/fields/TextInputMapper/TextInputMapper.tsx"],"sourcesContent":["import {\n ComponentType,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { PlusIcon } from '../../../icons/PlusIcon';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { Button } from '../../actions';\nimport { Block } from '../../Block';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Flow } from '../../layout/Flow';\nimport { Grid } from '../../layout/Grid';\nimport { Space } from '../../layout/Space';\nimport { ComboBox } from '../ComboBox';\nimport { PasswordInput } from '../PasswordInput/PasswordInput';\nimport { TextArea } from '../TextArea/index';\nimport { TextInput } from '../TextInput';\n\ntype Mapping = {\n key: string;\n value: string;\n id: number;\n};\n\nexport interface CubeTextInputMapperProps extends FieldBaseProps {\n qa?: string;\n actionLabel?: string;\n isDisabled?: boolean;\n value?: Record<string, string>;\n onChange?: (value: Record<string, string> \| undefined) => void;\n KeyComponent?: ComponentType<CubeTextInputMapperInputProps>;\n ValueComponent?: ComponentType<CubeTextInputMapperInputProps>;\n keyProps?: Partial<CubeTextInputMapperInputProps>;\n valueProps?: Partial<CubeTextInputMapperInputProps>;\n allowsCustomValue?: boolean;\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n}\n\n// Rewrites upper level field component styles\n// @TODO: Remove this after the release of new Element API\nconst PROPS_GRID_HACK = {\n styles: {\n InputArea: {\n gridColumn: {\n '': 'auto',\n 'has-sider': 'auto',\n },\n },\n },\n};\n\n// remove duplicates in mappings\nfunction removeDuplicates(mappings: Mapping[]) {\n const keys = new Set<string>();\n\n return mappings.filter(({ key }) => {\n if (keys.has(key)) {\n return false;\n }\n\n keys.add(key);\n\n return true;\n });\n}\n\nfunction TextInputMapper(\n props: CubeTextInputMapperProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { t } = useI18n();\n\n ref = useCombinedRefs(ref);\n\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value != null ? value : {},\n onChange: onChange,\n }),\n });\n\n const counterRef = useRef(0);\n\n let {\n qa,\n isDisabled,\n isInvalid,\n isValid,\n actionLabel,\n value,\n onChange,\n keyProps,\n valueProps,\n KeyComponent,\n ValueComponent,\n size = 'medium',\n form,\n } = props;\n\n function extractLocalValues(\n value: Record<string, string>,\n localValues: Mapping[],\n ) {\n const valueKeys = Object.keys(value);\n const localKeys = localValues.map(({ key }) => key);\n\n localKeys.forEach((key) => {\n if (!valueKeys.includes(key) && key !== '') {\n localValues = localValues.filter(({ key: k }) => k !== key);\n }\n });\n\n Object.entries(value ?? {}).forEach(([key, value]) => {\n const exist = localValues.find(({ key: k }) => k === key);\n\n if (exist) {\n exist.value = value;\n } else {\n localValues.push({ key, value, id: counterRef.current++ });\n }\n });\n\n return removeDuplicates(localValues);\n }\n\n const [mappings, setMappings] = useState(() => {\n return extractLocalValues(value ?? {}, []);\n });\n\n useEffect(() => {\n setMappings(extractLocalValues(value ?? {}, mappings));\n }, [JSON.stringify(value)]);\n\n const onMappingsChange = useEvent((newMappings: Mapping[]) => {\n const newValue = newMappings.reduce(\n (acc, { key, value }) => {\n acc[key.trim()] = value.trim();\n\n return acc;\n },\n {} as Record<string, string>,\n );\n\n const keys = Object.keys(newValue);\n\n if (!keys.length) {\n onChange?.(undefined);\n } else {\n onChange?.(newValue);\n }\n\n const updatedMappings = extractLocalValues(newValue ?? {}, newMappings);\n\n if (JSON.stringify(updatedMappings) !== JSON.stringify(mappings)) {\n setMappings(updatedMappings);\n }\n });\n\n // useEffect(() => {\n // // focus on the last non-disabled input\n // setTimeout(() => {\n // (\n // ref?.current?.querySelector(\n // '[data-qa=\"Mapping\"]:last-child input:not([disabled])',\n // ) as HTMLInputElement\n // )?.focus();\n // }, 100);\n // }, [mappings.length]);\n\n const addNewMapping = useEvent(() => {\n setMappings((prev) => {\n return [...prev, { key: '', value: '', id: counterRef.current++ }];\n });\n });\n\n const showNewButton = useMemo(() => {\n return (\n !mappings.length \|\| !mappings.some(({ key, value }) => !key \|\| !value)\n );\n }, [mappings]);\n\n KeyComponent = KeyComponent ?? TextInputMapperInput;\n ValueComponent = ValueComponent ?? TextInputMapperInput;\n\n const onKeyChange = useEvent((id: number, value: string) => {\n mappings.forEach((mapping) => {\n if (mapping.id === id) {\n mapping.key = value;\n }\n });\n\n setMappings([...mappings]);\n });\n\n const onValueChange = useEvent((id: number, value: string) => {\n mappings.forEach((mapping) => {\n if (mapping.id === id) {\n mapping.value = value;\n }\n });\n\n setMappings([...mappings]);\n });\n\n const onSubmit = useEvent(() => {\n onMappingsChange(mappings);\n });\n\n const onKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {\n // if Ctrl+Enter or Cmd+Enter is pressed then add new mapping if that's enabled\n if ((e.ctrlKey \|\| e.metaKey) && e.key === 'Enter' && showNewButton) {\n addNewMapping();\n }\n });\n\n const renderedMappings = useMemo(() => {\n return mappings.map((mapping, index) => {\n const { key, value, id } = mapping;\n\n return (\n <Grid\n key={id}\n qa=\"Mapping\"\n columns=\"minmax(0, 1fr) minmax(0, 1fr) min-content\"\n gap=\"1x\"\n >\n <KeyComponent\n autoFocus={index === mappings.length - 1}\n id={id}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n fieldType=\"key\"\n value={key}\n placeholder={t('textInputMapper.key', 'Key')}\n size={size}\n onChange={onKeyChange}\n onSubmit={onSubmit}\n {...keyProps}\n />\n <ValueComponent\n id={id}\n fieldType=\"value\"\n isDisabled={!key \|\| isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n value={value}\n placeholder={t('textInputMapper.value', 'Value')}\n size={size}\n onChange={onValueChange}\n onSubmit={onSubmit}\n {...valueProps}\n />\n <Button\n aria-label={t('textInputMapper.removeMapping', 'Remove mapping')}\n theme=\"danger\"\n type=\"clear\"\n size={size}\n icon={<CloseIcon />}\n onPress={() => {\n setMappings(mappings.filter((m) => m.id !== id));\n onMappingsChange(mappings.filter((m) => m.id !== id));\n }}\n />\n </Grid>\n );\n });\n }, [JSON.stringify(mappings), t, isDisabled, isInvalid, isValid]);\n\n const element = (\n <Flow\n ref={ref}\n gap=\"1x\"\n data-qa={qa \|\| 'TextInputMapper'}\n data-input-type=\"textinputmapper\"\n onKeyDown={onKeyDown}\n >\n {[...renderedMappings]}\n {showNewButton ? (\n <Space gap={0}>\n {/ Hotfix for inconsistent alignment with the label /}\n <Block styles={{ overflow: 'clip', width: 'max 0px' }}> </Block>\n <Button\n isDisabled={isDisabled}\n size={size}\n icon={<PlusIcon />}\n onPress={addNewMapping}\n >\n {actionLabel ? actionLabel : 'Mapping'}\n </Button>\n </Space>\n ) : null}\n </Flow>\n );\n\n return wrapWithField(element, ref, props);\n}\n\nexport interface CubeTextInputMapperInputProps {\n id: number;\n fieldType: 'key' \| 'value';\n inputType?: 'input' \| 'combobox' \| 'password' \| 'textarea';\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n value?: string;\n options?: string[];\n placeholder?: string;\n onChange?: (id: number, newValue: string) => void;\n onSubmit?: (id: number) => void;\n isDisabled?: boolean;\n isInvalid?: boolean;\n isValid?: boolean;\n autoFocus?: boolean;\n allowsCustomValue?: boolean;\n /*\n What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token\n * (`off`, `email`, …). Forwarded to the underlying input component.\n */\n autoComplete?: string;\n}\n\nfunction TextInputMapperInput(props: CubeTextInputMapperInputProps) {\n const {\n id,\n fieldType,\n inputType = 'input',\n options,\n value,\n size = 'medium',\n placeholder,\n allowsCustomValue,\n ...rest\n } = props;\n\n const onChange = useEvent((newValue: string) => {\n props.onChange?.(id, newValue);\n });\n\n const onBlur = useEvent(() => {\n props.onSubmit?.(id);\n });\n\n const onSelectionChange = useEvent((newValue: string) => {\n if (!allowsCustomValue && !options?.includes(newValue)) {\n props.onChange?.(id, '');\n } else {\n props.onChange?.(id, newValue);\n }\n\n props.onSubmit?.(id);\n });\n\n const Component = {\n input: TextInput,\n textarea: TextArea,\n password: PasswordInput,\n }[inputType];\n\n if (inputType === 'combobox') {\n return (\n <ComboBox\n qa=\"AddMapping\"\n data-type={fieldType}\n width=\"auto\"\n size={size}\n {...mergeProps(rest, PROPS_GRID_HACK)}\n id={undefined}\n inputValue={value}\n selectedKey={value}\n labelPosition=\"top\"\n aria-label={placeholder}\n placeholder={placeholder}\n allowsCustomValue={allowsCustomValue}\n onInputChange={onChange}\n onSelectionChange={(val) => onSelectionChange(val ?? '')}\n >\n {(options ?? []).map((option) => (\n <ComboBox.Item key={option}>{option}</ComboBox.Item>\n ))}\n </ComboBox>\n );\n }\n\n return (\n <Component\n qa=\"AddMapping\"\n data-type={fieldType}\n width=\"auto\"\n rows={1}\n size={size}\n {...mergeProps(rest, PROPS_GRID_HACK)}\n id={undefined}\n value={value}\n labelPosition=\"top\"\n aria-label={placeholder}\n placeholder={placeholder}\n onChange={onChange}\n onBlur={onBlur}\n />\n );\n}\n\nconst _TextInputMapper = forwardRef(TextInputMapper);\n\n_TextInputMapper.displayName = 'TextInputMapper';\n\nexport { _TextInputMapper as TextInputMapper };\n"],"mappings":"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"}
1	+ {"version":3,"file":"TextInputMapper.js","names":["TextArea","PasswordInput"],"sources":["../../../../src/components/fields/TextInputMapper/TextInputMapper.tsx"],"sourcesContent":["import {\n ComponentType,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { PlusIcon } from '../../../icons/PlusIcon';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { Button } from '../../actions';\nimport { Block } from '../../Block';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Flow } from '../../layout/Flow';\nimport { Grid } from '../../layout/Grid';\nimport { Space } from '../../layout/Space';\nimport { ComboBox } from '../ComboBox';\nimport { PasswordInput } from '../PasswordInput/PasswordInput';\nimport { TextArea } from '../TextArea/index';\nimport { TextInput } from '../TextInput';\n\ntype Mapping = {\n key: string;\n value: string;\n id: number;\n};\n\nexport interface CubeTextInputMapperProps\n extends FieldBaseProps<Record<string, string> \| null \| undefined> {\n qa?: string;\n actionLabel?: string;\n isDisabled?: boolean;\n value?: Record<string, string>;\n onChange?: (value: Record<string, string> \| undefined) => void;\n KeyComponent?: ComponentType<CubeTextInputMapperInputProps>;\n ValueComponent?: ComponentType<CubeTextInputMapperInputProps>;\n keyProps?: Partial<CubeTextInputMapperInputProps>;\n valueProps?: Partial<CubeTextInputMapperInputProps>;\n allowsCustomValue?: boolean;\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n}\n\n// Rewrites upper level field component styles\n// @TODO: Remove this after the release of new Element API\nconst PROPS_GRID_HACK = {\n styles: {\n InputArea: {\n gridColumn: {\n '': 'auto',\n 'has-sider': 'auto',\n },\n },\n },\n};\n\n// remove duplicates in mappings\nfunction removeDuplicates(mappings: Mapping[]) {\n const keys = new Set<string>();\n\n return mappings.filter(({ key }) => {\n if (keys.has(key)) {\n return false;\n }\n\n keys.add(key);\n\n return true;\n });\n}\n\nfunction TextInputMapper(\n props: CubeTextInputMapperProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { t } = useI18n();\n\n ref = useCombinedRefs(ref);\n\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value != null ? value : {},\n onChange: onChange,\n }),\n });\n\n const counterRef = useRef(0);\n\n let {\n qa,\n isDisabled,\n isInvalid,\n isValid,\n actionLabel,\n value,\n onChange,\n keyProps,\n valueProps,\n KeyComponent,\n ValueComponent,\n size = 'medium',\n form,\n } = props;\n\n function extractLocalValues(\n value: Record<string, string>,\n localValues: Mapping[],\n ) {\n const valueKeys = Object.keys(value);\n const localKeys = localValues.map(({ key }) => key);\n\n localKeys.forEach((key) => {\n if (!valueKeys.includes(key) && key !== '') {\n localValues = localValues.filter(({ key: k }) => k !== key);\n }\n });\n\n Object.entries(value ?? {}).forEach(([key, value]) => {\n const exist = localValues.find(({ key: k }) => k === key);\n\n if (exist) {\n exist.value = value;\n } else {\n localValues.push({ key, value, id: counterRef.current++ });\n }\n });\n\n return removeDuplicates(localValues);\n }\n\n const [mappings, setMappings] = useState(() => {\n return extractLocalValues(value ?? {}, []);\n });\n\n useEffect(() => {\n setMappings(extractLocalValues(value ?? {}, mappings));\n }, [JSON.stringify(value)]);\n\n const onMappingsChange = useEvent((newMappings: Mapping[]) => {\n const newValue = newMappings.reduce(\n (acc, { key, value }) => {\n acc[key.trim()] = value.trim();\n\n return acc;\n },\n {} as Record<string, string>,\n );\n\n const keys = Object.keys(newValue);\n\n if (!keys.length) {\n onChange?.(undefined);\n } else {\n onChange?.(newValue);\n }\n\n const updatedMappings = extractLocalValues(newValue ?? {}, newMappings);\n\n if (JSON.stringify(updatedMappings) !== JSON.stringify(mappings)) {\n setMappings(updatedMappings);\n }\n });\n\n // useEffect(() => {\n // // focus on the last non-disabled input\n // setTimeout(() => {\n // (\n // ref?.current?.querySelector(\n // '[data-qa=\"Mapping\"]:last-child input:not([disabled])',\n // ) as HTMLInputElement\n // )?.focus();\n // }, 100);\n // }, [mappings.length]);\n\n const addNewMapping = useEvent(() => {\n setMappings((prev) => {\n return [...prev, { key: '', value: '', id: counterRef.current++ }];\n });\n });\n\n const showNewButton = useMemo(() => {\n return (\n !mappings.length \|\| !mappings.some(({ key, value }) => !key \|\| !value)\n );\n }, [mappings]);\n\n KeyComponent = KeyComponent ?? TextInputMapperInput;\n ValueComponent = ValueComponent ?? TextInputMapperInput;\n\n const onKeyChange = useEvent((id: number, value: string) => {\n mappings.forEach((mapping) => {\n if (mapping.id === id) {\n mapping.key = value;\n }\n });\n\n setMappings([...mappings]);\n });\n\n const onValueChange = useEvent((id: number, value: string) => {\n mappings.forEach((mapping) => {\n if (mapping.id === id) {\n mapping.value = value;\n }\n });\n\n setMappings([...mappings]);\n });\n\n const onSubmit = useEvent(() => {\n onMappingsChange(mappings);\n });\n\n const onKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {\n // if Ctrl+Enter or Cmd+Enter is pressed then add new mapping if that's enabled\n if ((e.ctrlKey \|\| e.metaKey) && e.key === 'Enter' && showNewButton) {\n addNewMapping();\n }\n });\n\n const renderedMappings = useMemo(() => {\n return mappings.map((mapping, index) => {\n const { key, value, id } = mapping;\n\n return (\n <Grid\n key={id}\n qa=\"Mapping\"\n columns=\"minmax(0, 1fr) minmax(0, 1fr) min-content\"\n gap=\"1x\"\n >\n <KeyComponent\n autoFocus={index === mappings.length - 1}\n id={id}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n fieldType=\"key\"\n value={key}\n placeholder={t('textInputMapper.key', 'Key')}\n size={size}\n onChange={onKeyChange}\n onSubmit={onSubmit}\n {...keyProps}\n />\n <ValueComponent\n id={id}\n fieldType=\"value\"\n isDisabled={!key \|\| isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n value={value}\n placeholder={t('textInputMapper.value', 'Value')}\n size={size}\n onChange={onValueChange}\n onSubmit={onSubmit}\n {...valueProps}\n />\n <Button\n aria-label={t('textInputMapper.removeMapping', 'Remove mapping')}\n theme=\"danger\"\n type=\"clear\"\n size={size}\n icon={<CloseIcon />}\n onPress={() => {\n setMappings(mappings.filter((m) => m.id !== id));\n onMappingsChange(mappings.filter((m) => m.id !== id));\n }}\n />\n </Grid>\n );\n });\n }, [JSON.stringify(mappings), t, isDisabled, isInvalid, isValid]);\n\n const element = (\n <Flow\n ref={ref}\n gap=\"1x\"\n data-qa={qa \|\| 'TextInputMapper'}\n data-input-type=\"textinputmapper\"\n onKeyDown={onKeyDown}\n >\n {[...renderedMappings]}\n {showNewButton ? (\n <Space gap={0}>\n {/ Hotfix for inconsistent alignment with the label /}\n <Block styles={{ overflow: 'clip', width: 'max 0px' }}> </Block>\n <Button\n isDisabled={isDisabled}\n size={size}\n icon={<PlusIcon />}\n onPress={addNewMapping}\n >\n {actionLabel ? actionLabel : 'Mapping'}\n </Button>\n </Space>\n ) : null}\n </Flow>\n );\n\n return wrapWithField(element, ref, props);\n}\n\nexport interface CubeTextInputMapperInputProps {\n id: number;\n fieldType: 'key' \| 'value';\n inputType?: 'input' \| 'combobox' \| 'password' \| 'textarea';\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n value?: string;\n options?: string[];\n placeholder?: string;\n onChange?: (id: number, newValue: string) => void;\n onSubmit?: (id: number) => void;\n isDisabled?: boolean;\n isInvalid?: boolean;\n isValid?: boolean;\n autoFocus?: boolean;\n allowsCustomValue?: boolean;\n /*\n What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token\n * (`off`, `email`, …). Forwarded to the underlying input component.\n */\n autoComplete?: string;\n}\n\nfunction TextInputMapperInput(props: CubeTextInputMapperInputProps) {\n const {\n id,\n fieldType,\n inputType = 'input',\n options,\n value,\n size = 'medium',\n placeholder,\n allowsCustomValue,\n ...rest\n } = props;\n\n const onChange = useEvent((newValue: string) => {\n props.onChange?.(id, newValue);\n });\n\n const onBlur = useEvent(() => {\n props.onSubmit?.(id);\n });\n\n const onSelectionChange = useEvent((newValue: string) => {\n if (!allowsCustomValue && !options?.includes(newValue)) {\n props.onChange?.(id, '');\n } else {\n props.onChange?.(id, newValue);\n }\n\n props.onSubmit?.(id);\n });\n\n const Component = {\n input: TextInput,\n textarea: TextArea,\n password: PasswordInput,\n }[inputType];\n\n if (inputType === 'combobox') {\n return (\n <ComboBox\n qa=\"AddMapping\"\n data-type={fieldType}\n width=\"auto\"\n size={size}\n {...mergeProps(rest, PROPS_GRID_HACK)}\n id={undefined}\n inputValue={value}\n selectedKey={value}\n labelPosition=\"top\"\n aria-label={placeholder}\n placeholder={placeholder}\n allowsCustomValue={allowsCustomValue}\n onInputChange={onChange}\n onSelectionChange={(val) => onSelectionChange(val ?? '')}\n >\n {(options ?? []).map((option) => (\n <ComboBox.Item key={option}>{option}</ComboBox.Item>\n ))}\n </ComboBox>\n );\n }\n\n return (\n <Component\n qa=\"AddMapping\"\n data-type={fieldType}\n width=\"auto\"\n rows={1}\n size={size}\n {...mergeProps(rest, PROPS_GRID_HACK)}\n id={undefined}\n value={value}\n labelPosition=\"top\"\n aria-label={placeholder}\n placeholder={placeholder}\n onChange={onChange}\n onBlur={onBlur}\n />\n );\n}\n\nconst _TextInputMapper = forwardRef(TextInputMapper);\n\n_TextInputMapper.displayName = 'TextInputMapper';\n\nexport { _TextInputMapper as TextInputMapper };\n"],"mappings":"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"}

package/dist/components/fields/TriggerActions.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { ItemActionIcon } from "../actions/ItemActionsWrapper.js";
 import { Fragment, jsxs } from "react/jsx-runtime";

package/dist/components/fields/color/ColorPanel.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
 import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";

package/dist/components/fields/color/channels.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { maxChroma, normalizeHue, oklchToOkhsl } from "../../../utils/colors.js";
 import { fromOkhst, fromRgb, isAchromatic, toHex, toOkhst, toOklch, toRgb } from "./color.js";

package/dist/components/fields/color/color.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { anyNaN, clamp, maxChroma, normalizeHue, oklchToOkhsl, parseColorFunction, readComponent, readHue, rgbFromSrgb } from "../../../utils/colors.js";
 import { contrastRatioFromLuminance, formatHsl, formatOkhsl, formatOkhst, formatOklch, formatRgb, hslToSrgb, okhslToLinearSrgb, okhslToOkhst, okhslToOklch, okhslToSrgb, okhstToOkhsl, parseHexAlpha, relativeLuminanceFromLinearRgb, srgbToHex, srgbToOkhsl } from "@tenphi/glaze";

package/dist/components/fields/color/context.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 //#region src/components/fields/color/context.ts

package/dist/components/form/FieldWrapper/FieldWrapper.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";

package/dist/components/form/Form/Field.d.ts CHANGED Viewed

@@ -9,6 +9,8 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/components/form/Form/Field.d.ts
 interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {
+  /** Legacy field name; nested fields use dot notation. */
+  name?: string;
   /** The initial value of the input. */
   defaultValue?: any;
   styles?: Styles;

package/dist/components/form/Form/Field.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { warn } from "../../../utils/warnings.js";
 import { useValidationProps } from "../validation/use-validation-props.js";

package/dist/components/form/Form/Field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Field.js","names":[],"sources":["../../../../src/components/form/Form/Field.tsx"],"sourcesContent":["import { Styles } from '@tenphi/tasty';\nimport {\n Children,\n cloneElement,\n createContext,\n PropsWithChildren,\n ReactElement,\n useContext,\n useMemo,\n} from 'react';\n\nimport { FieldBaseProps, LabelPosition } from '../../../shared/index';\nimport { mergeProps } from '../../../utils/react/index';\nimport { warn } from '../../../utils/warnings';\nimport { FieldWrapper } from '../FieldWrapper/index';\nimport { useValidationProps } from '../validation/index';\n\nimport { useFormProps } from './Form';\nimport { FieldTypes } from './types';\nimport { useField } from './use-field/index';\nimport { CubeFormInstance } from './use-form';\n\nfunction getDefaultValidateTrigger(type) {\n type = type \|\| '';\n\n return type === 'Number' \|\| type.includes('Text') ? 'onBlur' : 'onChange';\n}\n\nfunction getValueProps(\n type?: string,\n value?,\n onChange?,\n allowsCustomValue?: boolean,\n) {\n type = type \|\| '';\n\n if (type === 'Number') {\n return {\n value: value != null ? value : null,\n onChange: onChange,\n };\n } else if (type === 'Text') {\n return {\n value:\n typeof value === 'string' \|\| typeof value === 'number'\n ? String(value)\n : '',\n onChange: onChange,\n };\n } else if (type === 'Checkbox') {\n return {\n isSelected: value != null ? value : false,\n isIndeterminate: false,\n onChange: onChange,\n };\n } else if (type === 'CheckboxGroup') {\n return {\n value: value != null ? value : [],\n onChange: onChange,\n };\n } else if (type === 'RangeSlider') {\n return {\n value: value != null ? value : undefined,\n onChange: onChange,\n };\n } else if (type === 'ComboBox') {\n return {\n selectedKey: !allowsCustomValue ? value ?? null : undefined,\n inputValue: allowsCustomValue ? value ?? '' : undefined,\n onInputChange(val) {\n if (!allowsCustomValue) {\n return;\n }\n\n onChange(val);\n },\n onSelectionChange(val: string) {\n if (val == null && allowsCustomValue) {\n return;\n }\n\n onChange(val);\n },\n };\n } else if (type === 'Select') {\n return {\n selectedKey: value ?? null,\n onSelectionChange: onChange,\n };\n }\n\n return {\n value: value != null ? value : null,\n onChange,\n };\n}\n\nexport interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {\n /** The initial value of the input. /\n defaultValue?: any;\n styles?: Styles;\n children?: ReactElement \| ((CubeFormInstance) => ReactElement);\n /* The form instance */\n form?: CubeFormInstance<T>;\n}\n\ninterface CubeFullFieldProps<T extends FieldTypes> extends CubeFieldProps<T> {\n form: CubeFormInstance<T>;\n}\n\ninterface CubeReplaceFieldProps<T extends FieldTypes>\n extends CubeFieldProps<T> {\n isRequired?: boolean;\n isOptional?: boolean;\n onChange?: (any) => void;\n onSelectionChange?: (any) => void;\n onBlur: () => void;\n labelPosition?: LabelPosition;\n}\n\nexport function Field<T extends FieldTypes>(props: CubeFieldProps<T>) {\n const allProps: CubeFullFieldProps<T> = useValidationProps(\n useFormProps(props),\n );\n\n let {\n children,\n form,\n label,\n extra,\n necessityIndicator,\n tooltip,\n isHidden,\n isDisabled,\n isLoading,\n isOptional,\n styles,\n labelProps,\n labelPosition = 'top',\n labelStyles,\n labelSuffix,\n } = allProps;\n\n if (typeof children === 'function') {\n children = children(form);\n }\n\n let child = children == null ? null : Children.only(children);\n\n const inputType = (child?.type as any)?.cubeInputType ?? 'Text';\n\n const __props = useField<T, CubeFullFieldProps<T>>(allProps, {\n defaultValidationTrigger: getDefaultValidateTrigger(inputType),\n });\n\n const {\n isInvalid,\n isValid,\n message,\n description,\n errorMessage,\n isRequired,\n name,\n id,\n } = __props;\n\n // `useField` reports `null` here when `isRequired` came from a `required` rule\n // rather than from the props, which suppresses the label marker. An indicator\n // set on the `Field` itself is an explicit request and outranks that.\n const resolvedNecessityIndicator =\n necessityIndicator !== undefined\n ? necessityIndicator\n : __props.necessityIndicator;\n\n if (!child) return null;\n\n if (id) {\n if (!labelProps) {\n labelProps = {};\n }\n\n labelProps.for = id;\n }\n\n if (__props.nonInput) {\n return (\n <LegacyFieldProvider>\n <FieldWrapper\n isHidden={isHidden}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n necessityIndicator={resolvedNecessityIndicator}\n isRequired={isRequired}\n isOptional={isOptional}\n label={label}\n labelProps={labelProps}\n extra={extra}\n tooltip={tooltip}\n message={message}\n description={description}\n errorMessage={errorMessage}\n Component={child}\n styles={styles}\n labelPosition={labelPosition}\n labelStyles={labelStyles}\n labelSuffix={labelSuffix}\n />\n </LegacyFieldProvider>\n );\n }\n\n if (!form) {\n warn(\n 'Form Field requires declared form instance if field name is specified',\n );\n\n return null;\n }\n\n if (!__props.field) {\n return (\n <LegacyFieldProvider>\n {cloneElement(\n child,\n mergeProps(child.props as any, {\n ...getValueProps(inputType),\n label: name,\n name,\n id,\n }),\n )}\n </LegacyFieldProvider>\n );\n }\n\n const newProps: CubeReplaceFieldProps<T> = {\n id,\n name,\n onBlur: __props.onBlur,\n };\n\n // A `null` indicator suppresses the marker for a rule-derived `isRequired`. It\n // must not override a necessity the child input declares for itself, which the\n // `useField` above never saw.\n const childDeclaresNecessity =\n (child.props as any).isRequired != null \|\|\n (child.props as any).necessityIndicator !== undefined;\n\n if (\n resolvedNecessityIndicator !== undefined &&\n !(resolvedNecessityIndicator === null && childDeclaresNecessity)\n ) {\n newProps.necessityIndicator = resolvedNecessityIndicator;\n }\n\n if (isInvalid) {\n newProps.isInvalid = isInvalid;\n }\n\n if (isValid) {\n newProps.isValid = isValid;\n }\n\n if (isRequired) {\n newProps.isRequired = isRequired;\n }\n\n if (isOptional != null) {\n newProps.isOptional = isOptional;\n }\n\n if (label) {\n newProps.label = label;\n }\n\n if (extra) {\n newProps.extra = extra;\n }\n\n if (tooltip) {\n newProps.tooltip = tooltip;\n }\n\n if (message !== undefined) {\n newProps.message = message;\n }\n\n if (errorMessage !== undefined) {\n newProps.errorMessage = errorMessage;\n }\n\n if (description !== undefined) {\n newProps.description = description;\n }\n\n if (isHidden != null) {\n newProps.isHidden = isHidden;\n }\n\n if (isDisabled != null) {\n newProps.isDisabled = isDisabled;\n }\n\n if (isLoading != null) {\n newProps.isLoading = isLoading;\n }\n\n Object.assign(\n newProps,\n getValueProps(\n inputType,\n __props.field?.value,\n __props.onChange,\n (child.props as any).allowsCustomValue,\n ),\n );\n\n const { onChange, onSelectionChange, ...childProps } = child.props as any;\n\n // onChange event passed to the child should be executed after Form onChange logic\n return (\n <LegacyFieldProvider>\n {cloneElement(\n child,\n mergeProps(\n childProps,\n newProps,\n onChange ? { onChange: __props.onChange } : {},\n onSelectionChange ? { onSelectionChange: __props.onChange } : {},\n ),\n )}\n </LegacyFieldProvider>\n );\n}\n\ntype LegacyFieldContextValue = {\n insideLegacyField: boolean;\n};\n\nconst LegacyFieldContext = createContext<LegacyFieldContextValue>({\n insideLegacyField: false,\n});\n\nfunction LegacyFieldProvider(props: PropsWithChildren<unknown>) {\n const value = useMemo(() => ({ insideLegacyField: true }), []);\n return (\n <LegacyFieldContext.Provider value={value}>\n {props.children}\n </LegacyFieldContext.Provider>\n );\n}\n\nexport function useInsideLegacyField() {\n const { insideLegacyField = false } = useContext(LegacyFieldContext);\n\n return insideLegacyField;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Field.js","names":[],"sources":["../../../../src/components/form/Form/Field.tsx"],"sourcesContent":["import { Styles } from '@tenphi/tasty';\nimport {\n Children,\n cloneElement,\n createContext,\n PropsWithChildren,\n ReactElement,\n useContext,\n useMemo,\n} from 'react';\n\nimport { FieldBaseProps, LabelPosition } from '../../../shared/index';\nimport { mergeProps } from '../../../utils/react/index';\nimport { warn } from '../../../utils/warnings';\nimport { FieldWrapper } from '../FieldWrapper/index';\nimport { useValidationProps } from '../validation/index';\n\nimport { useFormProps } from './Form';\nimport { FieldTypes } from './types';\nimport { useField } from './use-field/index';\nimport { CubeFormInstance } from './use-form';\n\nfunction getDefaultValidateTrigger(type) {\n type = type \|\| '';\n\n return type === 'Number' \|\| type.includes('Text') ? 'onBlur' : 'onChange';\n}\n\nfunction getValueProps(\n type?: string,\n value?,\n onChange?,\n allowsCustomValue?: boolean,\n) {\n type = type \|\| '';\n\n if (type === 'Number') {\n return {\n value: value != null ? value : null,\n onChange: onChange,\n };\n } else if (type === 'Text') {\n return {\n value:\n typeof value === 'string' \|\| typeof value === 'number'\n ? String(value)\n : '',\n onChange: onChange,\n };\n } else if (type === 'Checkbox') {\n return {\n isSelected: value != null ? value : false,\n isIndeterminate: false,\n onChange: onChange,\n };\n } else if (type === 'CheckboxGroup') {\n return {\n value: value != null ? value : [],\n onChange: onChange,\n };\n } else if (type === 'RangeSlider') {\n return {\n value: value != null ? value : undefined,\n onChange: onChange,\n };\n } else if (type === 'ComboBox') {\n return {\n selectedKey: !allowsCustomValue ? value ?? null : undefined,\n inputValue: allowsCustomValue ? value ?? '' : undefined,\n onInputChange(val) {\n if (!allowsCustomValue) {\n return;\n }\n\n onChange(val);\n },\n onSelectionChange(val: string) {\n if (val == null && allowsCustomValue) {\n return;\n }\n\n onChange(val);\n },\n };\n } else if (type === 'Select') {\n return {\n selectedKey: value ?? null,\n onSelectionChange: onChange,\n };\n }\n\n return {\n value: value != null ? value : null,\n onChange,\n };\n}\n\nexport interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {\n /** Legacy field name; nested fields use dot notation. /\n name?: string;\n /* The initial value of the input. /\n defaultValue?: any;\n styles?: Styles;\n children?: ReactElement \| ((CubeFormInstance) => ReactElement);\n /* The form instance */\n form?: CubeFormInstance<T>;\n}\n\ninterface CubeFullFieldProps<T extends FieldTypes> extends CubeFieldProps<T> {\n form: CubeFormInstance<T>;\n}\n\ninterface CubeReplaceFieldProps<T extends FieldTypes>\n extends CubeFieldProps<T> {\n isRequired?: boolean;\n isOptional?: boolean;\n onChange?: (any) => void;\n onSelectionChange?: (any) => void;\n onBlur: () => void;\n labelPosition?: LabelPosition;\n}\n\nexport function Field<T extends FieldTypes>(props: CubeFieldProps<T>) {\n const allProps: CubeFullFieldProps<T> = useValidationProps(\n useFormProps(props),\n );\n\n let {\n children,\n form,\n label,\n extra,\n necessityIndicator,\n tooltip,\n isHidden,\n isDisabled,\n isLoading,\n isOptional,\n styles,\n labelProps,\n labelPosition = 'top',\n labelStyles,\n labelSuffix,\n } = allProps;\n\n if (typeof children === 'function') {\n children = children(form);\n }\n\n let child = children == null ? null : Children.only(children);\n\n const inputType = (child?.type as any)?.cubeInputType ?? 'Text';\n\n const __props = useField<T, CubeFullFieldProps<T>>(allProps, {\n defaultValidationTrigger: getDefaultValidateTrigger(inputType),\n });\n\n const {\n isInvalid,\n isValid,\n message,\n description,\n errorMessage,\n isRequired,\n name,\n id,\n } = __props;\n\n // `useField` reports `null` here when `isRequired` came from a `required` rule\n // rather than from the props, which suppresses the label marker. An indicator\n // set on the `Field` itself is an explicit request and outranks that.\n const resolvedNecessityIndicator =\n necessityIndicator !== undefined\n ? necessityIndicator\n : __props.necessityIndicator;\n\n if (!child) return null;\n\n if (id) {\n if (!labelProps) {\n labelProps = {};\n }\n\n labelProps.for = id;\n }\n\n if (__props.nonInput) {\n return (\n <LegacyFieldProvider>\n <FieldWrapper\n isHidden={isHidden}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n necessityIndicator={resolvedNecessityIndicator}\n isRequired={isRequired}\n isOptional={isOptional}\n label={label}\n labelProps={labelProps}\n extra={extra}\n tooltip={tooltip}\n message={message}\n description={description}\n errorMessage={errorMessage}\n Component={child}\n styles={styles}\n labelPosition={labelPosition}\n labelStyles={labelStyles}\n labelSuffix={labelSuffix}\n />\n </LegacyFieldProvider>\n );\n }\n\n if (!form) {\n warn(\n 'Form Field requires declared form instance if field name is specified',\n );\n\n return null;\n }\n\n if (!__props.field) {\n return (\n <LegacyFieldProvider>\n {cloneElement(\n child,\n mergeProps(child.props as any, {\n ...getValueProps(inputType),\n label: name,\n name,\n id,\n }),\n )}\n </LegacyFieldProvider>\n );\n }\n\n const newProps: CubeReplaceFieldProps<T> = {\n id,\n name,\n onBlur: __props.onBlur,\n };\n\n // A `null` indicator suppresses the marker for a rule-derived `isRequired`. It\n // must not override a necessity the child input declares for itself, which the\n // `useField` above never saw.\n const childDeclaresNecessity =\n (child.props as any).isRequired != null \|\|\n (child.props as any).necessityIndicator !== undefined;\n\n if (\n resolvedNecessityIndicator !== undefined &&\n !(resolvedNecessityIndicator === null && childDeclaresNecessity)\n ) {\n newProps.necessityIndicator = resolvedNecessityIndicator;\n }\n\n if (isInvalid) {\n newProps.isInvalid = isInvalid;\n }\n\n if (isValid) {\n newProps.isValid = isValid;\n }\n\n if (isRequired) {\n newProps.isRequired = isRequired;\n }\n\n if (isOptional != null) {\n newProps.isOptional = isOptional;\n }\n\n if (label) {\n newProps.label = label;\n }\n\n if (extra) {\n newProps.extra = extra;\n }\n\n if (tooltip) {\n newProps.tooltip = tooltip;\n }\n\n if (message !== undefined) {\n newProps.message = message;\n }\n\n if (errorMessage !== undefined) {\n newProps.errorMessage = errorMessage;\n }\n\n if (description !== undefined) {\n newProps.description = description;\n }\n\n if (isHidden != null) {\n newProps.isHidden = isHidden;\n }\n\n if (isDisabled != null) {\n newProps.isDisabled = isDisabled;\n }\n\n if (isLoading != null) {\n newProps.isLoading = isLoading;\n }\n\n Object.assign(\n newProps,\n getValueProps(\n inputType,\n __props.field?.value,\n __props.onChange,\n (child.props as any).allowsCustomValue,\n ),\n );\n\n const { onChange, onSelectionChange, ...childProps } = child.props as any;\n\n // onChange event passed to the child should be executed after Form onChange logic\n return (\n <LegacyFieldProvider>\n {cloneElement(\n child,\n mergeProps(\n childProps,\n newProps,\n onChange ? { onChange: __props.onChange } : {},\n onSelectionChange ? { onSelectionChange: __props.onChange } : {},\n ),\n )}\n </LegacyFieldProvider>\n );\n}\n\ntype LegacyFieldContextValue = {\n insideLegacyField: boolean;\n};\n\nconst LegacyFieldContext = createContext<LegacyFieldContextValue>({\n insideLegacyField: false,\n});\n\nfunction LegacyFieldProvider(props: PropsWithChildren<unknown>) {\n const value = useMemo(() => ({ insideLegacyField: true }), []);\n return (\n <LegacyFieldContext.Provider value={value}>\n {props.children}\n </LegacyFieldContext.Provider>\n );\n}\n\nexport function useInsideLegacyField() {\n const { insideLegacyField = false } = useContext(LegacyFieldContext);\n\n return insideLegacyField;\n}\n"],"mappings":"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"}

package/dist/components/form/Form/Form.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Provider, useProviderProps } from "../../../provider.js";

package/dist/components/form/Form/ModernFormRoot.d.ts CHANGED Viewed

@@ -2,17 +2,22 @@
 import { FormCallbacks } from "./modern/types.js";
 import { FormController } from "./modern/controller.js";
 import { CubeFormProps } from "./Form.js";
-import { FormEvent, ReactElement, Ref } from "react";
+import { FormEvent, ReactElement, ReactNode, Ref } from "react";
 //#region src/components/form/Form/ModernFormRoot.d.ts
 /** Modern root owns callback bindings; subscriptions stay in descendants. */
 interface ModernFormProps<T extends object = Record<string, unknown>> extends Omit<CubeFormProps<T>, 'form' | 'defaultValues' | 'onSubmit' | 'onSubmitFailed' | 'onValuesChange'> {
   form: FormController<T>;
   defaultValues?: never;
+  /** Runs before a controller reset; preventDefault cancels the reset, including nested controls. */
   onReset?: (event: FormEvent<HTMLFormElement>) => void;
-  onSubmit?: FormCallbacks<T>['onSubmit'];
-  onSubmitFailed?: FormCallbacks<T>['onSubmitFailed'];
-  onValuesChange?: FormCallbacks<T>['onValuesChange'];
+  /** Reserved for controller reset interception. Use onReset to cancel. */
+  onResetCapture?: never;
+  onSubmit?: FormCallbacks<T, ReactNode>['onSubmit'];
+  onSubmitFailed?: FormCallbacks<T, ReactNode>['onSubmitFailed'];
+  onValuesChange?: FormCallbacks<T, ReactNode>['onValuesChange'];
+  /** Payload selection for native submission, including Enter and external buttons. */
+  submitValues?: 'active' | 'all';
 }
 //#endregion
 export { ModernFormProps };

package/dist/components/form/Form/ModernFormRoot.js CHANGED Viewed

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
+import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { Provider, useProviderProps } from "../../../provider.js";
 import { useValidationProps } from "../validation/use-validation-props.js";
@@ -14,10 +15,14 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/form/Form/ModernFormRoot.tsx
 const EMPTY_LEGACY_CONTEXT = {};
 function ModernFormRoot(props, ref) {
-	const { form, qa, name, children, orientation = "vertical", labelPosition: authoredLabelPosition, labelWidth: authoredLabelWidth, labelStyles, necessityIndicator, validateTrigger, requiredMark = true, showValid, isDisabled, isReadOnly, isInvalid, isValid, defaultValues, onSubmit, onSubmitFailed, onValuesChange, ...otherProps } = useValidationProps(useProviderProps(props));
+	const { form, qa, name, children, orientation = "vertical", labelPosition: authoredLabelPosition, labelWidth: authoredLabelWidth, labelStyles, necessityIndicator, validateTrigger, requiredMark = true, showValid, isDisabled, isReadOnly, isInvalid, isValid, defaultValues, onSubmit, onSubmitFailed, onValuesChange, submitValues = "active", ...otherProps } = useValidationProps(useProviderProps(props));
 	const labelPosition = authoredLabelPosition ?? (orientation === "horizontal" ? "side" : "top");
 	const labelWidth = authoredLabelWidth ?? (orientation === "horizontal" ? "auto" : void 0);
-	const { store } = getControllerInternals(form, "<Form>");
+	const internals = getControllerInternals(form, "<Form>");
+	const { store } = internals;
+	const rootRef = useRef(null);
+	const mergedRef = useMemo(() => mergeRefs(ref, rootRef), [ref]);
+	useLayoutEffect$1(() => internals.bindRootElement(rootRef.current), [internals]);
 	if (defaultValues !== void 0) throw new Error("A modern <Form> does not accept defaultValues. Seed Form.useController() or use an explicit defaults command.");
 	const binding = useRef(void 0);
 	useLayoutEffect$1(() => {
@@ -38,9 +43,10 @@ function ModernFormRoot(props, ref) {
 	const handleSubmit = useEvent((event) => {
 		event.preventDefault();
 		event.stopPropagation();
-		form.submit();
+		form.submit({ include: submitValues });
 	});
 	const handleReset = useEvent((event) => {
+		event.stopPropagation();
 		otherProps.onReset?.(event);
 		if (!event.defaultPrevented) {
 			event.preventDefault();
@@ -70,7 +76,7 @@ function ModernFormRoot(props, ref) {
 	if (labelWidth) styles["$label-width"] = labelWidth;
 	return /* @__PURE__ */ jsx(FormElement, {
 		...filterBaseProps(otherProps, { propNames: formPropNames }),
-		ref,
+		ref: mergedRef,
 		qa,
 		noValidate: true,
 		styles,
@@ -80,7 +86,8 @@ function ModernFormRoot(props, ref) {
 			horizontal: orientation === "horizontal"
 		},
 		onSubmit: otherProps.action == null ? handleSubmit : void 0,
-		onReset: otherProps.action == null ? handleReset : otherProps.onReset,
+		onReset: otherProps.action == null ? void 0 : otherProps.onReset,
+		onResetCapture: otherProps.action == null ? handleReset : void 0,
 		children: /* @__PURE__ */ jsx(FormContext.Provider, {
 			value: EMPTY_LEGACY_CONTEXT,
 			children: /* @__PURE__ */ jsx(ModernControllerContext.Provider, {

package/dist/components/form/Form/ModernFormRoot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModernFormRoot.js","names":[],"sources":["../../../../src/components/form/Form/ModernFormRoot.tsx"],"sourcesContent":["import { CONTAINER_STYLES, filterBaseProps } from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { Provider, useProviderProps } from '../../../provider';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { extractStyles } from '../../../utils/styles';\nimport { useValidationProps } from '../validation/use-validation-props';\n\nimport {\n FormContext,\n FormElement,\n FormPresentationContext,\n formPropNames,\n} from './Form';\nimport { ModernControllerContext } from './modern/context';\nimport { getControllerInternals } from './modern/controller';\n\nimport type { FormEvent, ReactElement, Ref } from 'react';\nimport type { CubeFormProps, FormPresentationContextValue } from './Form';\nimport type { FormController } from './modern/controller';\nimport type { CallbackBinding, FormCallbacks } from './modern/types';\n\n/** Modern root owns callback bindings; subscriptions stay in descendants. */\nexport interface ModernFormProps<T extends object = Record<string, unknown>>\n extends Omit<\n CubeFormProps<T>,\n 'form' \| 'defaultValues' \| 'onSubmit' \| 'onSubmitFailed' \| 'onValuesChange'\n > {\n form: FormController<T>;\n defaultValues?: never;\n onReset?: (event: FormEvent<HTMLFormElement>) => void;\n onSubmit?: FormCallbacks<T>['onSubmit'];\n onSubmitFailed?: FormCallbacks<T>['onSubmitFailed'];\n onValuesChange?: FormCallbacks<T>['onValuesChange'];\n}\n\nconst EMPTY_LEGACY_CONTEXT = {};\n\nfunction ModernFormRoot<T extends object>(\n props: ModernFormProps<T>,\n ref: Ref<HTMLFormElement>,\n): ReactElement {\n const resolved = useValidationProps(useProviderProps(props));\n const {\n form,\n qa,\n name,\n children,\n orientation = 'vertical',\n labelPosition: authoredLabelPosition,\n labelWidth: authoredLabelWidth,\n labelStyles,\n necessityIndicator,\n validateTrigger,\n requiredMark = true,\n showValid,\n isDisabled,\n isReadOnly,\n isInvalid,\n isValid,\n defaultValues,\n onSubmit,\n onSubmitFailed,\n onValuesChange,\n ...otherProps\n } = resolved;\n const labelPosition =\n authoredLabelPosition ?? (orientation === 'horizontal' ? 'side' : 'top');\n const labelWidth =\n authoredLabelWidth ?? (orientation === 'horizontal' ? 'auto' : undefined);\n const { ~~store }~~ = getControllerInternals(form, '<Form>');\n if (defaultValues !== undefined) {\n throw new Error(\n 'A modern <Form> does not accept defaultValues. Seed Form.useController() or use an explicit defaults command.',\n );\n }\n const binding = useRef<CallbackBinding<T> \| undefined>(undefined);\n useLayoutEffect(() => {\n const token = store.bindCallbacks({});\n binding.current = token;\n return () => {\n token.release();\n if (binding.current === token) binding.current = undefined;\n };\n }, [store]);\n useLayoutEffect(() => {\n binding.current?.update({\n ...(onSubmit === undefined ? {} : { onSubmit }),\n ...(onSubmitFailed === undefined ? {} : { onSubmitFailed }),\n ...(onValuesChange === undefined ? {} : { onValuesChange }),\n });\n });\n const handleSubmit = useEvent((event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n event.stopPropagation();\n void form.submit();\n });\n const handleReset = useEvent((event: FormEvent<HTMLFormElement>) => {\n otherProps.onReset?.(event);\n if (!event.defaultPrevented) {\n event.preventDefault();\n form.reset();\n }\n });\n const presentation = useMemo<FormPresentationContextValue>(\n () => ({\n labelPosition,\n labelStyles,\n orientation,\n necessityIndicator,\n validateTrigger,\n requiredMark,\n showValid,\n idPrefix: name,\n }),\n [\n labelPosition,\n labelStyles,\n orientation,\n necessityIndicator,\n validateTrigger,\n requiredMark,\n showValid,\n name,\n ],\n );\n const styles = extractStyles(otherProps, CONTAINER_STYLES);\n if (labelWidth) styles['$label-width'] = labelWidth;\n\n return (\n <FormElement\n {...filterBaseProps(otherProps, { propNames: formPropNames })}\n ref={~~ref~~}\n qa={qa}\n noValidate\n styles={styles}\n mods={{\n 'has-sider': labelPosition === 'side',\n 'has-split': labelPosition === 'split',\n horizontal: orientation === 'horizontal',\n }}\n onSubmit={otherProps.action == null ? handleSubmit : undefined}\n onReset={otherProps.action == null ? ~~handleReset~~ : otherProps.onReset}\n >\n <FormContext.Provider value={EMPTY_LEGACY_CONTEXT}>\n <ModernControllerContext.Provider value={form}>\n <FormPresentationContext.Provider value={presentation}>\n <Provider\n insideForm\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isInvalid={isInvalid}\n isValid={isValid}\n >\n {children}\n </Provider>\n </FormPresentationContext.Provider>\n </ModernControllerContext.Provider>\n </FormContext.Provider>\n </FormElement>\n );\n}\n\nconst _ModernFormRoot = forwardRef(ModernFormRoot) as unknown as <\n T extends object,\n>(\n props: ModernFormProps<T> & { ref?: Ref<HTMLFormElement> },\n) => ReactElement;\n\n(_ModernFormRoot as any).displayName = 'ModernFormRoot';\n\nexport { _ModernFormRoot as ModernFormRoot };\n"],"mappings":"~~;;;;;;;;;;;;;;AAqCA~~,MAAM,uBAAuB,EAAE;AAE/B,SAAS,eACP,OACA,KACc;CAEd,MAAM,EACJ,MACA,IACA,MACA,UACA,cAAc,YACd,eAAe,uBACf,YAAY,oBACZ,aACA,oBACA,iBACA,eAAe,MACf,WACA,YACA,YACA,WACA,SACA,eACA,UACA,gBACA,gBACA,GAAG,~~eAtBY~~,mBAAmB,iBAAiB,MAAM,CAAC;~~CAwB5D~~,MAAM,gBACJ,0BAA0B,gBAAgB,eAAe,SAAS;CACpE,MAAM,aACJ,uBAAuB,gBAAgB,eAAe,SAAS;CACjE,MAAM,EAAE,UAAU,~~uBAAuB~~,MAAM,~~SAAS~~;~~AACxD~~,KAAI,kBAAkB,OACpB,OAAM,IAAI,MACR,gHACD;CAEH,MAAM,UAAU,~~OAAuC~~,OAAU;~~AACjE~~,yBAAsB;EACpB,MAAM,QAAQ,MAAM,cAAc,EAAE,CAAC;AACrC,UAAQ,UAAU;AAClB,eAAa;AACX,SAAM,SAAS;AACf,OAAI,QAAQ,YAAY,MAAO,SAAQ,UAAU;;IAElD,CAAC,MAAM,CAAC;AACX,yBAAsB;AACpB,UAAQ,SAAS,OAAO;GACtB,GAAI,aAAa,SAAY,EAAE,GAAG,EAAE,UAAU;GAC9C,GAAI,mBAAmB,SAAY,EAAE,GAAG,EAAE,gBAAgB;GAC1D,GAAI,mBAAmB,SAAY,EAAE,GAAG,EAAE,gBAAgB;GAC3D,CAAC;GACF;CACF,MAAM,eAAe,UAAU,UAAsC;AACnE,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;AACvB,EAAK,KAAK,~~QAAQ~~;~~GAClB~~;CACF,MAAM,cAAc,UAAU,UAAsC;~~AAClE~~,aAAW,UAAU,MAAM;AAC3B,MAAI,CAAC,MAAM,kBAAkB;AAC3B,SAAM,gBAAgB;AACtB,QAAK,OAAO;;GAEd;CACF,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,UAAU;EACX,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAC1D,KAAI,WAAY,QAAO,kBAAkB;AAEzC,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,WAAW,eAAe,CAAC;~~EACxD~~;EACD;EACJ;EACQ;EACR,MAAM;GACJ,aAAa,kBAAkB;GAC/B,aAAa,kBAAkB;GAC/B,YAAY,gBAAgB;GAC7B;EACD,UAAU,WAAW,UAAU,OAAO,eAAe;EACrD,SAAS,WAAW,UAAU,OAAO,~~cAAc~~,WAAW;~~YAE9D~~,oBAAC,YAAY;GAAS,OAAO;aAC3B,oBAAC,wBAAwB;IAAS,OAAO;cACvC,oBAAC,wBAAwB;KAAS,OAAO;eACvC,oBAAC;MACC;MACY;MACA;MACD;MACF;MAER;OACQ;MACsB;KACF;IACd;GACX;;AAIlB,MAAM,kBAAkB,WAAW,eAAe;AAMlD,AAAC,gBAAwB,cAAc"}
1	+ {"version":3,"file":"ModernFormRoot.js","names":[],"sources":["../../../../src/components/form/Form/ModernFormRoot.tsx"],"sourcesContent":["import { CONTAINER_STYLES, filterBaseProps } from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { Provider, useProviderProps } from '../../../provider';\nimport { mergeRefs } from '../../../utils/react/useCombinedRefs';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { extractStyles } from '../../../utils/styles';\nimport { useValidationProps } from '../validation/use-validation-props';\n\nimport {\n FormContext,\n FormElement,\n FormPresentationContext,\n formPropNames,\n} from './Form';\nimport { ModernControllerContext } from './modern/context';\nimport { getControllerInternals } from './modern/controller';\n\nimport type { FormEvent, ReactElement, ReactNode, Ref } from 'react';\nimport type { CubeFormProps, FormPresentationContextValue } from './Form';\nimport type { FormController } from './modern/controller';\nimport type { CallbackBinding, FormCallbacks } from './modern/types';\n\n/** Modern root owns callback bindings; subscriptions stay in descendants. /\nexport interface ModernFormProps<T extends object = Record<string, unknown>>\n extends Omit<\n CubeFormProps<T>,\n 'form' \| 'defaultValues' \| 'onSubmit' \| 'onSubmitFailed' \| 'onValuesChange'\n > {\n form: FormController<T>;\n defaultValues?: never;\n /* Runs before a controller reset; preventDefault cancels the reset, including nested controls. /\n onReset?: (event: FormEvent<HTMLFormElement>) => void;\n /* Reserved for controller reset interception. Use onReset to cancel. /\n onResetCapture?: never;\n onSubmit?: FormCallbacks<T, ReactNode>['onSubmit'];\n onSubmitFailed?: FormCallbacks<T, ReactNode>['onSubmitFailed'];\n onValuesChange?: FormCallbacks<T, ReactNode>['onValuesChange'];\n /* Payload selection for native submission, including Enter and external buttons. */\n submitValues?: 'active' \| 'all';\n}\n\nconst EMPTY_LEGACY_CONTEXT = {};\n\nfunction ModernFormRoot<T extends object>(\n props: ModernFormProps<T>,\n ref: Ref<HTMLFormElement>,\n): ReactElement {\n const resolved = useValidationProps(useProviderProps(props));\n const {\n form,\n qa,\n name,\n children,\n orientation = 'vertical',\n labelPosition: authoredLabelPosition,\n labelWidth: authoredLabelWidth,\n labelStyles,\n necessityIndicator,\n validateTrigger,\n requiredMark = true,\n showValid,\n isDisabled,\n isReadOnly,\n isInvalid,\n isValid,\n defaultValues,\n onSubmit,\n onSubmitFailed,\n onValuesChange,\n submitValues = 'active',\n ...otherProps\n } = resolved;\n const labelPosition =\n authoredLabelPosition ?? (orientation === 'horizontal' ? 'side' : 'top');\n const labelWidth =\n authoredLabelWidth ?? (orientation === 'horizontal' ? 'auto' : undefined);\n const internals = getControllerInternals(form, '<Form>');\n const { store } = internals;\n const rootRef = useRef<HTMLFormElement>(null);\n const mergedRef = useMemo(() => mergeRefs(ref, rootRef), [ref]);\n useLayoutEffect(\n () => internals.bindRootElement(rootRef.current),\n [internals],\n );\n if (defaultValues !== undefined) {\n throw new Error(\n 'A modern <Form> does not accept defaultValues. Seed Form.useController() or use an explicit defaults command.',\n );\n }\n const binding = useRef<CallbackBinding<T, ReactNode> \| undefined>(undefined);\n useLayoutEffect(() => {\n const token = store.bindCallbacks({});\n binding.current = token;\n return () => {\n token.release();\n if (binding.current === token) binding.current = undefined;\n };\n }, [store]);\n useLayoutEffect(() => {\n binding.current?.update({\n ...(onSubmit === undefined ? {} : { onSubmit }),\n ...(onSubmitFailed === undefined ? {} : { onSubmitFailed }),\n ...(onValuesChange === undefined ? {} : { onValuesChange }),\n });\n });\n const handleSubmit = useEvent((event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n event.stopPropagation();\n void form.submit({ include: submitValues });\n });\n const handleReset = useEvent((event: FormEvent<HTMLFormElement>) => {\n // React Aria's native reset listeners do not honor preventDefault. Handle\n // controller resets in capture, before they can write mount-time defaults.\n event.stopPropagation();\n otherProps.onReset?.(event);\n if (!event.defaultPrevented) {\n event.preventDefault();\n form.reset();\n }\n });\n const presentation = useMemo<FormPresentationContextValue>(\n () => ({\n labelPosition,\n labelStyles,\n orientation,\n necessityIndicator,\n validateTrigger,\n requiredMark,\n showValid,\n idPrefix: name,\n }),\n [\n labelPosition,\n labelStyles,\n orientation,\n necessityIndicator,\n validateTrigger,\n requiredMark,\n showValid,\n name,\n ],\n );\n const styles = extractStyles(otherProps, CONTAINER_STYLES);\n if (labelWidth) styles['$label-width'] = labelWidth;\n\n return (\n <FormElement\n {...filterBaseProps(otherProps, { propNames: formPropNames })}\n ref={mergedRef}\n qa={qa}\n noValidate\n styles={styles}\n mods={{\n 'has-sider': labelPosition === 'side',\n 'has-split': labelPosition === 'split',\n horizontal: orientation === 'horizontal',\n }}\n onSubmit={otherProps.action == null ? handleSubmit : undefined}\n onReset={otherProps.action == null ? undefined : otherProps.onReset}\n onResetCapture={otherProps.action == null ? handleReset : undefined}\n >\n <FormContext.Provider value={EMPTY_LEGACY_CONTEXT}>\n <ModernControllerContext.Provider value={form}>\n <FormPresentationContext.Provider value={presentation}>\n <Provider\n insideForm\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isInvalid={isInvalid}\n isValid={isValid}\n >\n {children}\n </Provider>\n </FormPresentationContext.Provider>\n </ModernControllerContext.Provider>\n </FormContext.Provider>\n </FormElement>\n );\n}\n\nconst _ModernFormRoot = forwardRef(ModernFormRoot) as unknown as <\n T extends object,\n>(\n props: ModernFormProps<T> & { ref?: Ref<HTMLFormElement> },\n) => ReactElement;\n\n(_ModernFormRoot as any).displayName = 'ModernFormRoot';\n\nexport { _ModernFormRoot as ModernFormRoot };\n"],"mappings":";;;;;;;;;;;;;;;AA2CA,MAAM,uBAAuB,EAAE;AAE/B,SAAS,eACP,OACA,KACc;CAEd,MAAM,EACJ,MACA,IACA,MACA,UACA,cAAc,YACd,eAAe,uBACf,YAAY,oBACZ,aACA,oBACA,iBACA,eAAe,MACf,WACA,YACA,YACA,WACA,SACA,eACA,UACA,gBACA,gBACA,eAAe,UACf,GAAG,eAvBY,mBAAmB,iBAAiB,MAAM,CAAC;CAyB5D,MAAM,gBACJ,0BAA0B,gBAAgB,eAAe,SAAS;CACpE,MAAM,aACJ,uBAAuB,gBAAgB,eAAe,SAAS;CACjE,MAAM,YAAY,uBAAuB,MAAM,SAAS;CACxD,MAAM,EAAE,UAAU;CAClB,MAAM,UAAU,OAAwB,KAAK;CAC7C,MAAM,YAAY,cAAc,UAAU,KAAK,QAAQ,EAAE,CAAC,IAAI,CAAC;AAC/D,yBACQ,UAAU,gBAAgB,QAAQ,QAAQ,EAChD,CAAC,UAAU,CACZ;AACD,KAAI,kBAAkB,OACpB,OAAM,IAAI,MACR,gHACD;CAEH,MAAM,UAAU,OAAkD,OAAU;AAC5E,yBAAsB;EACpB,MAAM,QAAQ,MAAM,cAAc,EAAE,CAAC;AACrC,UAAQ,UAAU;AAClB,eAAa;AACX,SAAM,SAAS;AACf,OAAI,QAAQ,YAAY,MAAO,SAAQ,UAAU;;IAElD,CAAC,MAAM,CAAC;AACX,yBAAsB;AACpB,UAAQ,SAAS,OAAO;GACtB,GAAI,aAAa,SAAY,EAAE,GAAG,EAAE,UAAU;GAC9C,GAAI,mBAAmB,SAAY,EAAE,GAAG,EAAE,gBAAgB;GAC1D,GAAI,mBAAmB,SAAY,EAAE,GAAG,EAAE,gBAAgB;GAC3D,CAAC;GACF;CACF,MAAM,eAAe,UAAU,UAAsC;AACnE,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;AACvB,EAAK,KAAK,OAAO,EAAE,SAAS,cAAc,CAAC;GAC3C;CACF,MAAM,cAAc,UAAU,UAAsC;AAGlE,QAAM,iBAAiB;AACvB,aAAW,UAAU,MAAM;AAC3B,MAAI,CAAC,MAAM,kBAAkB;AAC3B,SAAM,gBAAgB;AACtB,QAAK,OAAO;;GAEd;CACF,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,UAAU;EACX,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAC1D,KAAI,WAAY,QAAO,kBAAkB;AAEzC,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,WAAW,eAAe,CAAC;EAC7D,KAAK;EACD;EACJ;EACQ;EACR,MAAM;GACJ,aAAa,kBAAkB;GAC/B,aAAa,kBAAkB;GAC/B,YAAY,gBAAgB;GAC7B;EACD,UAAU,WAAW,UAAU,OAAO,eAAe;EACrD,SAAS,WAAW,UAAU,OAAO,SAAY,WAAW;EAC5D,gBAAgB,WAAW,UAAU,OAAO,cAAc;YAE1D,oBAAC,YAAY;GAAS,OAAO;aAC3B,oBAAC,wBAAwB;IAAS,OAAO;cACvC,oBAAC,wBAAwB;KAAS,OAAO;eACvC,oBAAC;MACC;MACY;MACA;MACD;MACF;MAER;OACQ;MACsB;KACF;IACd;GACX;;AAIlB,MAAM,kBAAkB,WAAW,eAAe;AAMlD,AAAC,gBAAwB,cAAc"}

package/dist/components/form/Form/ResetButton/ResetButton.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
+import { FormController } from "../modern/controller.js";
 import { CubeButtonProps } from "../../../actions/Button/Button.js";
 import { FieldTypes } from "../types.js";
-import { FormController } from "../modern/controller.js";
 import { CubeFormInstance } from "../use-form.js";
 import * as react from "react";
 import * as _react_types_shared0 from "@react-types/shared";

package/dist/components/form/Form/ResetButton/ResetButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";

package/dist/components/form/Form/SubmitButton/SubmitButton.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
+import { FormController } from "../modern/controller.js";
 import { CubeButtonProps } from "../../../actions/Button/Button.js";
 import { FieldTypes } from "../types.js";
-import { FormController } from "../modern/controller.js";
 import { CubeFormInstance } from "../use-form.js";
 import * as react from "react";
 import * as _react_types_shared0 from "@react-types/shared";
@@ -9,6 +9,8 @@ import * as _react_types_shared0 from "@react-types/shared";
 //#region src/components/form/Form/SubmitButton/SubmitButton.d.ts
 interface CubeSubmitButtonProps<T extends FieldTypes = FieldTypes> extends CubeButtonProps {
   form?: CubeFormInstance<T> | FormController<T>;
+  /** Modern forms: disable after validation fails. Defaults to false so submit can show errors. */
+  disableOnInvalid?: boolean;
 }
 declare const _SubmitButton: react.ForwardRefExoticComponent<Omit<CubeSubmitButtonProps<FieldTypes>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
 //#endregion

package/dist/components/form/Form/SubmitButton/SubmitButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
 import { isModernFormController } from "../backend.js";
@@ -13,7 +13,7 @@ function LegacySubmitButton(props, ref) {
 	props = useFormProps(props);
 	const { isDisabled: isContextDisabled } = providerProps;
 	props = useFormProps(props);
-	const { form, isDisabled, ...otherProps } = props;
+	const { form, isDisabled, disableOnInvalid: _disableOnInvalid, ...otherProps } = props;
 	const isSomethingDisabled = isDisabled || isContextDisabled;
 	return /* @__PURE__ */ jsx(Button, {
 		ref,

package/dist/components/form/Form/SubmitButton/SubmitButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubmitButton.js","names":[],"sources":["../../../../../src/components/form/Form/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\n\nimport { useProviderProps } from '../../../../provider';\nimport { Button, CubeButtonProps } from '../../../actions/Button/Button';\nimport { isModernFormController } from '../backend';\nimport { useFormProps } from '../Form';\nimport { ModernSubmitButton } from '../modern/actions';\nimport { FieldTypes } from '../types';\nimport { CubeFormInstance } from '../use-form';\n\nimport type { FormController } from '../modern/controller';\n\nexport interface CubeSubmitButtonProps<T extends FieldTypes = FieldTypes>\n extends CubeButtonProps {\n form?: CubeFormInstance<T> \| FormController<T>;\n}\n\nfunction LegacySubmitButton(\n props: Omit<CubeSubmitButtonProps, 'form'> & {\n form?: CubeFormInstance<FieldTypes>;\n },\n ref: FocusableRef<HTMLElement>,\n) {\n const providerProps = useProviderProps({} as CubeButtonProps);\n\n props = useFormProps(props);\n\n const { isDisabled: isContextDisabled } = providerProps;\n\n props = useFormProps(props);\n\n const { form, isDisabled, ...otherProps } = props;\n const isSomethingDisabled = isDisabled \|\| isContextDisabled;\n\n return (\n <Button\n ref={ref}\n type=\"primary\"\n htmlType=\"submit\"\n isLoading={form?.isSubmitting}\n isDisabled={\n isSomethingDisabled \|\| form?.isSubmitting ? true : form?.isInvalid\n }\n {...otherProps}\n />\n );\n}\n\nfunction SubmitButton(\n props: CubeSubmitButtonProps,\n ref: FocusableRef<HTMLElement>,\n) {\n const resolved = useFormProps(props);\n if (isModernFormController(resolved.form)) {\n return (\n <ModernSubmitButton\n {...resolved}\n form={resolved.form as FormController}\n buttonRef={ref}\n />\n );\n }\n return (\n <LegacySubmitButtonWithRef\n {...(props as Omit<CubeSubmitButtonProps, 'form'> & {\n form?: CubeFormInstance<FieldTypes>;\n })}\n ref={ref}\n />\n );\n}\n\nconst LegacySubmitButtonWithRef = forwardRef(LegacySubmitButton);\nconst _SubmitButton = forwardRef(SubmitButton);\n\n_SubmitButton.displayName = 'SubmitButton';\n\nexport { _SubmitButton as SubmitButton };\n"],"mappings":";;;;;;;;;;~~AAkBA~~,SAAS,mBACP,OAGA,KACA;CACA,MAAM,gBAAgB,iBAAiB,EAAE,CAAoB;AAE7D,SAAQ,aAAa,MAAM;CAE3B,MAAM,EAAE,YAAY,sBAAsB;AAE1C,SAAQ,aAAa,MAAM;CAE3B,MAAM,~~EAAE~~,~~MAAM~~,~~YAAY~~,GAAG,~~eAAe~~;~~CAC5C~~,MAAM,sBAAsB,cAAc;AAE1C,QACE,oBAAC;EACM;EACL,MAAK;EACL,UAAS;EACT,WAAW,MAAM;EACjB,YACE,uBAAuB,MAAM,eAAe,OAAO,MAAM;EAE3D,GAAI;GACJ;;AAIN,SAAS,aACP,OACA,KACA;CACA,MAAM,WAAW,aAAa,MAAM;AACpC,KAAI,uBAAuB,SAAS,KAAK,CACvC,QACE,oBAAC;EACC,GAAI;EACJ,MAAM,SAAS;EACf,WAAW;GACX;AAGN,QACE,oBAAC;EACC,GAAK;EAGA;GACL;;AAIN,MAAM,4BAA4B,WAAW,mBAAmB;AAChE,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}
1	+ {"version":3,"file":"SubmitButton.js","names":[],"sources":["../../../../../src/components/form/Form/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\n\nimport { useProviderProps } from '../../../../provider';\nimport { Button, CubeButtonProps } from '../../../actions/Button/Button';\nimport { isModernFormController } from '../backend';\nimport { useFormProps } from '../Form';\nimport { ModernSubmitButton } from '../modern/actions';\nimport { FieldTypes } from '../types';\nimport { CubeFormInstance } from '../use-form';\n\nimport type { FormController } from '../modern/controller';\n\nexport interface CubeSubmitButtonProps<T extends FieldTypes = FieldTypes>\n extends CubeButtonProps {\n form?: CubeFormInstance<T> \| FormController<T>;\n /** Modern forms: disable after validation fails. Defaults to false so submit can show errors. */\n disableOnInvalid?: boolean;\n}\n\nfunction LegacySubmitButton(\n props: Omit<CubeSubmitButtonProps, 'form'> & {\n form?: CubeFormInstance<FieldTypes>;\n },\n ref: FocusableRef<HTMLElement>,\n) {\n const providerProps = useProviderProps({} as CubeButtonProps);\n\n props = useFormProps(props);\n\n const { isDisabled: isContextDisabled } = providerProps;\n\n props = useFormProps(props);\n\n const {\n form,\n isDisabled,\n disableOnInvalid: _disableOnInvalid,\n ...otherProps\n } = props;\n const isSomethingDisabled = isDisabled \|\| isContextDisabled;\n\n return (\n <Button\n ref={ref}\n type=\"primary\"\n htmlType=\"submit\"\n isLoading={form?.isSubmitting}\n isDisabled={\n isSomethingDisabled \|\| form?.isSubmitting ? true : form?.isInvalid\n }\n {...otherProps}\n />\n );\n}\n\nfunction SubmitButton(\n props: CubeSubmitButtonProps,\n ref: FocusableRef<HTMLElement>,\n) {\n const resolved = useFormProps(props);\n if (isModernFormController(resolved.form)) {\n return (\n <ModernSubmitButton\n {...resolved}\n form={resolved.form as FormController}\n buttonRef={ref}\n />\n );\n }\n return (\n <LegacySubmitButtonWithRef\n {...(props as Omit<CubeSubmitButtonProps, 'form'> & {\n form?: CubeFormInstance<FieldTypes>;\n })}\n ref={ref}\n />\n );\n}\n\nconst LegacySubmitButtonWithRef = forwardRef(LegacySubmitButton);\nconst _SubmitButton = forwardRef(SubmitButton);\n\n_SubmitButton.displayName = 'SubmitButton';\n\nexport { _SubmitButton as SubmitButton };\n"],"mappings":";;;;;;;;;;AAoBA,SAAS,mBACP,OAGA,KACA;CACA,MAAM,gBAAgB,iBAAiB,EAAE,CAAoB;AAE7D,SAAQ,aAAa,MAAM;CAE3B,MAAM,EAAE,YAAY,sBAAsB;AAE1C,SAAQ,aAAa,MAAM;CAE3B,MAAM,EACJ,MACA,YACA,kBAAkB,mBAClB,GAAG,eACD;CACJ,MAAM,sBAAsB,cAAc;AAE1C,QACE,oBAAC;EACM;EACL,MAAK;EACL,UAAS;EACT,WAAW,MAAM;EACjB,YACE,uBAAuB,MAAM,eAAe,OAAO,MAAM;EAE3D,GAAI;GACJ;;AAIN,SAAS,aACP,OACA,KACA;CACA,MAAM,WAAW,aAAa,MAAM;AACpC,KAAI,uBAAuB,SAAS,KAAK,CACvC,QACE,oBAAC;EACC,GAAI;EACJ,MAAM,SAAS;EACf,WAAW;GACX;AAGN,QACE,oBAAC;EACC,GAAK;EAGA;GACL;;AAIN,MAAM,4BAA4B,WAAW,mBAAmB;AAChE,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}

package/dist/components/form/Form/SubmitError.d.ts CHANGED Viewed

@@ -1,13 +1,19 @@
+import { FormController } from "./modern/controller.js";
 import { CubeAlertProps } from "../../content/Alert/types.js";
 import "../../content/Alert/index.js";
 import * as react from "react";
+import { ReactNode } from "react";
 //#region src/components/form/Form/SubmitError.d.ts
+interface CubeSubmitErrorProps extends CubeAlertProps {
+  form?: FormController<any>;
+  renderError?: (error: unknown) => ReactNode;
+}
 /**
  * An alert that shows a form error message received from the onSubmit callback.
  */
-declare const _SubmitError: react.ForwardRefExoticComponent<CubeAlertProps & react.RefAttributes<HTMLDivElement>>;
+declare const _SubmitError: react.ForwardRefExoticComponent<CubeSubmitErrorProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { _SubmitError };
+export { CubeSubmitErrorProps, _SubmitError };
 //# sourceMappingURL=SubmitError.d.ts.map

package/dist/components/form/Form/SubmitError.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { ModernControllerContext } from "./modern/context.js";
 import { FormContext } from "./Form.js";
@@ -8,9 +8,15 @@ import { forwardRef, isValidElement, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/form/Form/SubmitError.tsx
-function ErrorAlert({ submitError, ...props }, ref) {
+function ErrorAlert({ submitError, renderError, ...props }, ref) {
 	const { t } = useI18n();
 	if (!submitError) return null;
+	if (renderError) return /* @__PURE__ */ jsx(Alert, {
+		ref,
+		theme: "danger",
+		...props,
+		children: renderError(submitError)
+	});
 	if (!isValidElement(submitError) && typeof submitError !== "string") submitError = t("form.internalError", "Internal error");
 	return /* @__PURE__ */ jsx(Alert, {
 		ref,
@@ -28,8 +34,9 @@ function ModernSubmitError({ form, alertRef, ...props }) {
 		submitError
 	});
 }
-function SubmitError(props, ref) {
-	const modern = useContext(ModernControllerContext);
+function SubmitError({ form, ...props }, ref) {
+	const context = useContext(ModernControllerContext);
+	const modern = form ?? context;
 	const legacy = useContext(FormContext);
 	return modern ? /* @__PURE__ */ jsx(ModernSubmitError, {
 		...props,

package/dist/components/form/Form/SubmitError.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubmitError.js","names":[],"sources":["../../../../src/components/form/Form/SubmitError.tsx"],"sourcesContent":["import {\n ForwardedRef,\n forwardRef,\n isValidElement,\n ReactNode,\n useContext,\n} from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { Alert, CubeAlertProps } from '../../content/Alert/index';\n\nimport { FormContext } from './Form';\nimport { ModernControllerContext } from './modern/context';\nimport { useFormSelector } from './modern/react';\n\nimport type { FormController } from './modern/controller';\n\ntype SubmitErrorContextProps = {\n submitError?: unknown;\n};\n\nfunction ErrorAlert(\n { submitError, ...props }: ~~CubeAlertProps~~ & SubmitErrorContextProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { t } = useI18n();\n\n if (!submitError) {\n return null;\n }\n\n if (\n !isValidElement(submitError as ReactNode) &&\n typeof submitError !== 'string'\n ) {\n submitError = t('form.internalError', 'Internal error');\n }\n\n return (\n <Alert ref={ref} theme=\"danger\" {...props}>\n {submitError as ReactNode}\n </Alert>\n );\n}\n\nconst ForwardedErrorAlert = forwardRef(ErrorAlert);\n\nfunction ModernSubmitError({\n form,\n alertRef,\n ...props\n}: ~~CubeAlertProps~~ & {\n form: FormController<any>;\n alertRef: ForwardedRef<HTMLDivElement>;\n}) {\n const submitError = useFormSelector(form, (state) => state.submitError);\n return (\n <ForwardedErrorAlert {...props} ref={alertRef} submitError={submitError} />\n );\n}\n\nfunction SubmitError(props: ~~CubeAlertProps,~~ ref: ForwardedRef<HTMLDivElement>) {\n const ~~modern~~ = useContext(ModernControllerContext);\n const legacy = useContext(FormContext) as SubmitErrorContextProps;\n return modern ? (\n <ModernSubmitError {...props} form={modern} alertRef={ref} />\n ) : (\n <ForwardedErrorAlert\n {...props}\n ref={ref}\n submitError={legacy.submitError}\n />\n );\n}\n\n/*\n An alert that shows a form error message received from the onSubmit callback.\n */\nconst _SubmitError = forwardRef(SubmitError);\n\n_SubmitError.displayName = 'SubmitError';\n\nexport { _SubmitError as SubmitError };\n"],"mappings":";;;;;;;;;;~~AAqBA~~,SAAS,WACP,~~EAAE~~,~~aAAa~~,GAAG,~~SAClB~~,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,KAAI,CAAC,YACH,QAAO;AAGT,KACE,CAAC,eAAe,YAAyB,IACzC,OAAO,gBAAgB,SAEvB,eAAc,EAAE,sBAAsB,iBAAiB;AAGzD,QACE,oBAAC;EAAW;EAAK,OAAM;EAAS,GAAI;YACjC;GACK;;AAIZ,MAAM,sBAAsB,WAAW,WAAW;AAElD,SAAS,kBAAkB,EACzB,MACA,UACA,GAAG,SAIF;CACD,MAAM,cAAc,gBAAgB,OAAO,UAAU,MAAM,YAAY;AACvE,QACE,oBAAC;EAAoB,GAAI;EAAO,KAAK;EAAuB;GAAe;;AAI/E,SAAS,~~YAAY~~,~~OAAuB~~,~~KAAmC~~;~~CAC7E~~,MAAM,~~SAAS~~,WAAW,wBAAwB;~~CAClD~~,MAAM,SAAS,WAAW,YAAY;AACtC,QAAO,SACL,oBAAC;EAAkB,GAAI;EAAO,MAAM;EAAQ,UAAU;GAAO,GAE7D,oBAAC;EACC,GAAI;EACC;EACL,aAAa,OAAO;GACpB;;;;;AAON,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}
1	+ {"version":3,"file":"SubmitError.js","names":[],"sources":["../../../../src/components/form/Form/SubmitError.tsx"],"sourcesContent":["import {\n ForwardedRef,\n forwardRef,\n isValidElement,\n ReactNode,\n useContext,\n} from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { Alert, CubeAlertProps } from '../../content/Alert/index';\n\nimport { FormContext } from './Form';\nimport { ModernControllerContext } from './modern/context';\nimport { useFormSelector } from './modern/react';\n\nimport type { FormController } from './modern/controller';\n\ntype SubmitErrorContextProps = {\n submitError?: unknown;\n};\n\nexport interface CubeSubmitErrorProps extends CubeAlertProps {\n form?: FormController<any>;\n renderError?: (error: unknown) => ReactNode;\n}\n\nfunction ErrorAlert(\n {\n submitError,\n renderError,\n ...props\n }: CubeSubmitErrorProps & SubmitErrorContextProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { t } = useI18n();\n\n if (!submitError) {\n return null;\n }\n\n if (renderError)\n return (\n <Alert ref={ref} theme=\"danger\" {...props}>\n {renderError(submitError)}\n </Alert>\n );\n\n if (\n !isValidElement(submitError as ReactNode) &&\n typeof submitError !== 'string'\n ) {\n submitError = t('form.internalError', 'Internal error');\n }\n\n return (\n <Alert ref={ref} theme=\"danger\" {...props}>\n {submitError as ReactNode}\n </Alert>\n );\n}\n\nconst ForwardedErrorAlert = forwardRef(ErrorAlert);\n\nfunction ModernSubmitError({\n form,\n alertRef,\n ...props\n}: CubeSubmitErrorProps & {\n form: FormController<any>;\n alertRef: ForwardedRef<HTMLDivElement>;\n}) {\n const submitError = useFormSelector(form, (state) => state.submitError);\n return (\n <ForwardedErrorAlert {...props} ref={alertRef} submitError={submitError} />\n );\n}\n\nfunction SubmitError(\n { form, ...props }: CubeSubmitErrorProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const context = useContext(ModernControllerContext);\n const modern = form ?? context;\n const legacy = useContext(FormContext) as SubmitErrorContextProps;\n return modern ? (\n <ModernSubmitError {...props} form={modern} alertRef={ref} />\n ) : (\n <ForwardedErrorAlert\n {...props}\n ref={ref}\n submitError={legacy.submitError}\n />\n );\n}\n\n/*\n An alert that shows a form error message received from the onSubmit callback.\n */\nconst _SubmitError = forwardRef(SubmitError);\n\n_SubmitError.displayName = 'SubmitError';\n\nexport { _SubmitError as SubmitError };\n"],"mappings":";;;;;;;;;;AA0BA,SAAS,WACP,EACE,aACA,aACA,GAAG,SAEL,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,KAAI,CAAC,YACH,QAAO;AAGT,KAAI,YACF,QACE,oBAAC;EAAW;EAAK,OAAM;EAAS,GAAI;YACjC,YAAY,YAAY;GACnB;AAGZ,KACE,CAAC,eAAe,YAAyB,IACzC,OAAO,gBAAgB,SAEvB,eAAc,EAAE,sBAAsB,iBAAiB;AAGzD,QACE,oBAAC;EAAW;EAAK,OAAM;EAAS,GAAI;YACjC;GACK;;AAIZ,MAAM,sBAAsB,WAAW,WAAW;AAElD,SAAS,kBAAkB,EACzB,MACA,UACA,GAAG,SAIF;CACD,MAAM,cAAc,gBAAgB,OAAO,UAAU,MAAM,YAAY;AACvE,QACE,oBAAC;EAAoB,GAAI;EAAO,KAAK;EAAuB;GAAe;;AAI/E,SAAS,YACP,EAAE,MAAM,GAAG,SACX,KACA;CACA,MAAM,UAAU,WAAW,wBAAwB;CACnD,MAAM,SAAS,QAAQ;CACvB,MAAM,SAAS,WAAW,YAAY;AACtC,QAAO,SACL,oBAAC;EAAkB,GAAI;EAAO,MAAM;EAAQ,UAAU;GAAO,GAE7D,oBAAC;EACC,GAAI;EACC;EACL,aAAa,OAAO;GACpB;;;;;AAON,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}

package/dist/components/form/Form/backend.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 //#region src/components/form/Form/backend.ts
 /**
 * Nominal branding for the two Form backends (modernization plan §5.1).

package/dist/components/form/Form/index.d.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 import { FormPath } from "./modern/values.js";
-import { ModernValidationContext } from "./modern/validation.js";
-import { FieldTypes, Fields } from "./types.js";
 import { FormValueAtPath } from "./modern/path-types.js";
+import { FormReadValue, FormValues } from "./modern/read-types.js";
+import { ModernValidationContext } from "./modern/validation.js";
 import { FormChange, ModernSubmitContext, SetValueOptions } from "./modern/types.js";
-import { FormController, ModernFieldValidationResult, ModernFormState, ModernSubmitResult, ModernValidationResult, ModernValidationRule, UseFormControllerOptions } from "./modern/controller.js";
+import { FormController, ModernFieldState, ModernFieldValidationResult, ModernFormState, ModernSubmitFailure, ModernSubmitResult, ModernValidationResult, ModernValidationRule, UseFormControllerOptions } from "./modern/controller.js";
+import { FormField, FormFieldContext, FormFieldOptions } from "./modern/field.js";
+import { FieldTypes, Fields } from "./types.js";
 import { CubeFormInstance, useForm } from "./use-form.js";
 import { ModernFormProps } from "./ModernFormRoot.js";
 import { CubeFormProps, FormContext, FormRootComponent, FormScopeMask, useFormProps } from "./Form.js";
@@ -12,12 +14,10 @@ import { CubeSubmitButtonProps, _SubmitButton } from "./SubmitButton/SubmitButto
 import "./SubmitButton/index.js";
 import { CubeResetButtonProps, _ResetButton } from "./ResetButton/ResetButton.js";
 import "./ResetButton/index.js";
-import { CubeAlertProps } from "../../content/Alert/types.js";
-import "../../content/Alert/index.js";
+import { CubeSubmitErrorProps, _SubmitError } from "./SubmitError.js";
 import { Field } from "./Field.js";
 import { useFormControllerContext } from "./modern/context.js";
-import { FormSelectorOptions, FormSubscribe, FormSubscribeProps, useFormController, useFormSelector } from "./modern/react.js";
-import { _SubmitError } from "./SubmitError.js";
+import { FormSelectorOptions, FormSubscribe, FormSubscribeProps, useFormController, useFormFieldState, useFormSelector, useFormValue } from "./modern/react.js";
 import { FieldReturnValue, UseFieldProps } from "./use-field/types.js";
 import { UseFieldParams, useField } from "./use-field/use-field.js";
 import { UseFieldPropsParams, useFieldProps } from "./use-field/use-field-props.js";
@@ -34,6 +34,8 @@ declare const Form: FormRootComponent & {
   useForm: typeof useForm;
   useController: typeof useFormController;
   useSelector: typeof useFormSelector;
+  useValue: typeof useFormValue;
+  useFieldState: typeof useFormFieldState;
   Subscribe: typeof FormSubscribe;
   useControllerContext: typeof useFormControllerContext;
 } & {
@@ -41,11 +43,13 @@ declare const Form: FormRootComponent & {
   useForm: typeof useForm;
   useController: typeof useFormController;
   useSelector: typeof useFormSelector;
+  useValue: typeof useFormValue;
+  useFieldState: typeof useFormFieldState;
   Subscribe: typeof FormSubscribe;
   useControllerContext: typeof useFormControllerContext;
   Submit: react.ForwardRefExoticComponent<Omit<CubeSubmitButtonProps<FieldTypes>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
   Reset: react.ForwardRefExoticComponent<Omit<CubeResetButtonProps<FieldTypes>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
-  SubmitError: react.ForwardRefExoticComponent<CubeAlertProps & react.RefAttributes<HTMLDivElement>>;
+  SubmitError: react.ForwardRefExoticComponent<CubeSubmitErrorProps & react.RefAttributes<HTMLDivElement>>;
 };
 //#endregion
 export { Form };

package/dist/components/form/Form/index.js CHANGED Viewed

@@ -1,11 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
 import { useFormControllerContext } from "./modern/context.js";
 import { useForm } from "./use-form.js";
 import { FormContext, FormScopeMask, _Form, useFormProps } from "./Form.js";
 import { useField } from "./use-field/use-field.js";
 import { useFieldProps } from "./use-field/use-field-props.js";
 import { Field } from "./Field.js";
-import { FormSubscribe, useFormController, useFormSelector } from "./modern/react.js";
+import { FormSubscribe, useFormController, useFormFieldState, useFormSelector, useFormValue } from "./modern/react.js";
 import { _ResetButton } from "./ResetButton/ResetButton.js";
 import { _SubmitButton } from "./SubmitButton/SubmitButton.js";
 import { _SubmitError } from "./SubmitError.js";
@@ -16,6 +16,8 @@ const Form = Object.assign(_Form, {
 	useForm,
 	useController: useFormController,
 	useSelector: useFormSelector,
+	useValue: useFormValue,
+	useFieldState: useFormFieldState,
 	Subscribe: FormSubscribe,
 	useControllerContext: useFormControllerContext,
 	Submit: _SubmitButton,

package/dist/components/form/Form/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["SubmitButton","ResetButton"],"sources":["../../../../src/components/form/Form/index.ts"],"sourcesContent":["import { ~~CubeAlertProps } from '../../content/Alert/index';\n\nimport {~~ Field } from './Field';\nimport {\n Form as _Form,\n FormContext,\n FormScopeMask,\n useFormProps,\n} from './Form';\nimport { useFormControllerContext } from './modern/context';\nimport {\n FormSubscribe,\n useFormController,\n useFormSelector,\n} from './modern/react';\nimport { ResetButton } from './ResetButton';\nimport { SubmitButton } from './SubmitButton';\nimport { SubmitError } from './SubmitError';\nimport { useForm } from './use-form';\n\nconst Form = Object.assign(\n _Form as typeof _Form & {\n Item: typeof Field;\n SubmitError: typeof SubmitError;\n Submit: typeof SubmitButton;\n Reset: typeof ResetButton;\n useForm: typeof useForm;\n useController: typeof useFormController;\n useSelector: typeof useFormSelector;\n Subscribe: typeof FormSubscribe;\n useControllerContext: typeof useFormControllerContext;\n },\n {\n Item: Field,\n useForm,\n useController: useFormController,\n useSelector: useFormSelector,\n Subscribe: FormSubscribe,\n useControllerContext: useFormControllerContext,\n Submit: SubmitButton,\n Reset: ResetButton,\n SubmitError,\n },\n);\n\nexport * from './SubmitError';\nexport * from './SubmitButton';\nexport * from './ResetButton';\nexport * from './use-field';\nexport { useFormProps, Form, Field, useForm, FormContext, FormScopeMask };\nexport type { CubeFormProps } from './Form';\nexport type { ModernFormProps } from './ModernFormRoot';\nexport type {\n FormController,\n ModernFormState,\n UseFormControllerOptions,\n ModernValidationRule,\n ModernValidationResult,\n ModernFieldValidationResult,\n ModernSubmitResult,\n} from './modern/controller';\nexport type { FormSelectorOptions, FormSubscribeProps } from './modern/react';\nexport type {\n FormChange,\n SetValueOptions,\n ModernSubmitContext,\n} from './modern/types';\nexport type { ModernValidationContext } from './modern/validation';\nexport type { FormPath } from './modern/values';\nexport type { FormValueAtPath } from './modern/path-types';\nexport type { CubeFormInstance } from './use-form';\nexport type { FieldTypes, Fields } from './types';\nexport type { ~~CubeAlertProps~~ as ~~CubeSubmitErrorProps~~ };\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,OAAO,OAAO,OAClB,~~OAWA~~;CACE,MAAM;CACN;CACA,eAAe;CACf,aAAa;CACb,WAAW;CACX,sBAAsB;CACtB,QAAQA;CACR,OAAOC;CACP;CACD,CACF"}
1	+ {"version":3,"file":"index.js","names":["SubmitButton","ResetButton"],"sources":["../../../../src/components/form/Form/index.ts"],"sourcesContent":["import { Field } from './Field';\nimport {\n Form as _Form,\n FormContext,\n FormScopeMask,\n useFormProps,\n} from './Form';\nimport { useFormControllerContext } from './modern/context';\nimport {\n FormSubscribe,\n useFormController,\n useFormFieldState,\n useFormSelector,\n useFormValue,\n} from './modern/react';\nimport { ResetButton } from './ResetButton';\nimport { SubmitButton } from './SubmitButton';\nimport { SubmitError } from './SubmitError';\nimport { useForm } from './use-form';\n\nconst Form = Object.assign(\n _Form as typeof _Form & {\n Item: typeof Field;\n SubmitError: typeof SubmitError;\n Submit: typeof SubmitButton;\n Reset: typeof ResetButton;\n useForm: typeof useForm;\n useController: typeof useFormController;\n useSelector: typeof useFormSelector;\n useValue: typeof useFormValue;\n useFieldState: typeof useFormFieldState;\n Subscribe: typeof FormSubscribe;\n useControllerContext: typeof useFormControllerContext;\n },\n {\n Item: Field,\n useForm,\n useController: useFormController,\n useSelector: useFormSelector,\n useValue: useFormValue,\n useFieldState: useFormFieldState,\n Subscribe: FormSubscribe,\n useControllerContext: useFormControllerContext,\n Submit: SubmitButton,\n Reset: ResetButton,\n SubmitError,\n },\n);\n\nexport * from './SubmitError';\nexport * from './SubmitButton';\nexport * from './ResetButton';\nexport * from './use-field';\nexport { useFormProps, Form, Field, useForm, FormContext, FormScopeMask };\nexport type { CubeFormProps } from './Form';\nexport type { ModernFormProps } from './ModernFormRoot';\nexport type {\n FormController,\n ModernFormState,\n ModernFieldState,\n ModernSubmitFailure,\n UseFormControllerOptions,\n ModernValidationRule,\n ModernValidationResult,\n ModernFieldValidationResult,\n ModernSubmitResult,\n} from './modern/controller';\nexport type { FormSelectorOptions, FormSubscribeProps } from './modern/react';\nexport type {\n FormChange,\n SetValueOptions,\n ModernSubmitContext,\n} from './modern/types';\nexport type { ModernValidationContext } from './modern/validation';\nexport type { FormPath } from './modern/values';\nexport type { FormValueAtPath } from './modern/path-types';\nexport type { CubeFormInstance } from './use-form';\nexport type { FieldTypes, Fields } from './types';\n\nexport type {\n FormField,\n FormFieldOptions,\n FormFieldContext,\n} from './modern/field';\nexport type { FormReadValue, FormValues } from './modern/read-types';\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,OAAO,OAAO,OAClB,OAaA;CACE,MAAM;CACN;CACA,eAAe;CACf,aAAa;CACb,UAAU;CACV,eAAe;CACf,WAAW;CACX,sBAAsB;CACtB,QAAQA;CACR,OAAOC;CACP;CACD,CACF"}