ui-ingredients
Version:
Headless component library for Svelte powered by zag
40 lines (39 loc) • 1.47 kB
JavaScript
import * as fileUpload from '@zag-js/file-upload';
import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
import { createUniqueId } from '../create-unique-id.js';
import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
import { getFieldContext } from '../field/field-context.svelte.js';
import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
export function createFileUpload(props) {
const field = getFieldContext();
const locale = getLocaleContext();
const environment = getEnvironmentContext();
const id = createUniqueId();
const context = reflect(() => ({
id,
dir: locale?.dir,
ids: {
label: field?.ids.label,
hiddenInput: field?.ids.control,
},
locale: locale?.locale,
invalid: field?.invalid,
disabled: field?.disabled,
required: field?.required,
getRootNode: environment?.getRootNode,
...props,
}));
const [state, send] = useMachine(fileUpload.machine(context), { context });
return reflect(() => {
const o = fileUpload.connect(state, send, normalizeProps);
return {
...o,
getHiddenInputProps() {
return {
'aria-describedby': field?.['aria-describedby'],
...o.getHiddenInputProps(),
};
},
};
});
}