@allxsmith/bestax-bulma 5.54.0 → 5.54.1

package/dist/esm/form/File.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.js","sources":["../../../src/form/File.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\nimport { useNumberFormat } from '../helpers/localeFormat';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n} from './FormContext';\nimport { Field } from './Field';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * Props for the File component.\n * Inside an outer `Field`, or a `Control` with no `Field` around it, it\n * renders no `Field` of its own. The exception is `label`, `message`,\n * `horizontal` or `fieldClassName` in that bare `Control`: it keeps a `Field`\n * for them, nested in the `.control`, and warns in development. Wrap the\n * `Control` in a `Field` instead, and set the `label`, `horizontal` and class\n * name on that `Field`.\n *\n * @helperProps Helper props go on the `.file` wrapper `<div>`, with\n * `className`. The other attributes go on the `<input>`.\n */\nexport interface FileProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'color' | 'type'\n    >,\n    Omit<BulmaClassesProps, 'color'>,\n    FormFieldProps {\n  /** Field label. Automatically associated with the file input via `htmlFor` — uses your `id` when provided, otherwise a generated one. The input then has two labels (this one plus the wrapping `file-label`); assistive tech reads both. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Bulma color modifier for the file input. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Size modifier for the file input. */\n  size?: 'small' | 'medium' | 'large';\n  /** Boxed file input. */\n  isBoxed?: boolean;\n  /** Whether the file input expands to full width. */\n  isFullwidth?: boolean;\n  /** Whether the file input expands to full width. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  isFullWidth?: boolean;\n  /** Position the CTA on the right (with `hasName`). */\n  isRight?: boolean;\n  /** Center the file input within its container. */\n  isCentered?: boolean;\n  /**\n   * Show a file name area. Without `fileName` it shows what the user picked: the file's name, or\n   * a count when `multiple` lets them pick several (see `pickedFilesLabel`). Before a pick there is\n   * no name area, and the root takes Bulma's `is-empty`. A reset of the input's form clears the\n   * name, but clearing the input from code fires no change event and leaves it showing, so pass\n   * `fileName` to control the text then.\n   */\n  hasName?: boolean;\n  /** Text on the file CTA button (defaults to \"Choose a file…\"). */\n  buttonLabel?: React.ReactNode;\n  /**\n   * Left icon element. It renders inside the `<label>` that names the file input, beside\n   * `buttonLabel`, so leave an `Icon` here unnamed (`<Icon name=\"upload\" />`): it is then\n   * `aria-hidden`, while an `ariaLabel` would join the input's accessible name.\n   */\n  iconLeft?: React.ReactNode;\n  /**\n   * Right icon element. Sits inside the same `<label>` as `iconLeft`, so the same applies:\n   * an `Icon` here with an `ariaLabel` joins the input's accessible name.\n   */\n  iconRight?: React.ReactNode;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Additional CSS classes for the `<input>`. */\n  inputClassName?: string;\n  /**\n   * Text for the file name area (with `hasName`), for a file chosen earlier or your own wording.\n   * Setting it takes over from the picked file's name; an empty string shows no name area.\n   */\n  fileName?: string;\n  /**\n   * Builds the text `hasName` shows when several files are picked, from their count, for\n   * localization. Default: `` `${count} files` ``, with the count written the way the `locale`\n   * of a `LocaleProvider` around it writes numbers. A single pick shows its file's name.\n   */\n  pickedFilesLabel?: (count: number) => string;\n}\n\n/**\n * The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, \"has name\", and filename display.\n *\n * @function\n * @param {FileProps} props - Props for the File component.\n * @returns {JSX.Element} The rendered file upload field.\n * @see {@link https://bulma.io/documentation/form/file/ | Bulma File documentation}\n */\nexport const File = forwardRef<HTMLInputElement, FileProps>(\n  (\n    {\n      // Field props\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      color,\n      size,\n      isBoxed,\n      isFullwidth,\n      isFullWidth,\n      isRight,\n      isCentered,\n      hasName,\n      buttonLabel,\n      iconLeft,\n      iconRight,\n      className,\n      inputClassName,\n      fileName,\n      pickedFilesLabel,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // What the user last picked, and the form a reset of which clears it.\n    const [picked, setPicked] = useState<{\n      count: number;\n      firstName: string;\n      form: HTMLFormElement | null;\n    }>();\n    const pickedForm = picked?.form;\n    useEffect(() => {\n      if (!pickedForm) return;\n      let timer: ReturnType<typeof setTimeout> | undefined;\n      // The reset event fires before the form resets, and a listener after this one can still\n      // cancel it, so the name is cleared a task later, and only if the reset went ahead.\n      const onReset = (event: Event) => {\n        timer = setTimeout(() => {\n          if (!event.defaultPrevented) setPicked(undefined);\n        });\n      };\n      pickedForm.addEventListener('reset', onReset);\n      return () => {\n        pickedForm.removeEventListener('reset', onReset);\n        clearTimeout(timer);\n      };\n    }, [pickedForm]);\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const { files, form } = event.target;\n      setPicked(\n        files?.length\n          ? { count: files.length, firstName: files[0].name, form }\n          : undefined\n      );\n      onChange?.(event);\n    };\n    const formatNumber = useNumberFormat();\n    const pickedText =\n      picked &&\n      (picked.count === 1\n        ? picked.firstName\n        : (pickedFilesLabel?.(picked.count) ??\n          `${formatNumber ? formatNumber(picked.count) : picked.count} files`));\n    const shownName = fileName ?? pickedText;\n\n    const insideField = useInsideField();\n    const insideControl = useInsideControl();\n    const ownField = rendersOwnField('File', {\n      insideField,\n      insideControl,\n      label,\n      message,\n      horizontal,\n      fieldClassName,\n    });\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id: props.id,\n      labelProps,\n      rendersLabel: ownField,\n    });\n    const { classPrefix } = useConfig();\n    // The input takes `controlId`, so `id` stays out of the spread, where an\n    // undefined `id` key would wipe the id the label points at.\n    const { id: _id, ...inputProps } = props;\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color,\n      ...inputProps,\n    });\n\n    // Mutually exclusive alignment\n    let alignmentClass: string | undefined;\n    if (isRight && isCentered) {\n      // If both are set, prefer isRight and warn in dev\n      alignmentClass = prefixedClassNames(classPrefix, 'is-right');\n    } else if (isRight) {\n      alignmentClass = prefixedClassNames(classPrefix, 'is-right');\n    } else if (isCentered) {\n      alignmentClass = prefixedClassNames(classPrefix, 'is-centered');\n    }\n\n    const mainClass = usePrefixedClassNames('file', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-boxed': isBoxed,\n      'is-fullwidth': isFullwidth ?? isFullWidth,\n      'has-name': hasName,\n      'is-empty': hasName && !shownName,\n    });\n    const fileClass = classNames(\n      mainClass,\n      bulmaHelperClasses,\n      alignmentClass,\n      className\n    );\n\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    const fileElement = (\n      <div className={fileClass}>\n        <label className={usePrefixedClassNames('file-label')}>\n          <input\n            ref={ref}\n            className={classNames(\n              usePrefixedClassNames('file-input'),\n              inputClassName\n            )}\n            type=\"file\"\n            id={controlId}\n            onChange={handleChange}\n            {...rest}\n          />\n          <span className={usePrefixedClassNames('file-cta')}>\n            {iconLeft && (\n              <span className={prefixedClassNames(classPrefix, 'file-icon')}>\n                {iconLeft}\n              </span>\n            )}\n            <span className={usePrefixedClassNames('file-label')}>\n              {buttonLabel || 'Choose a file\\u2026'}\n            </span>\n            {iconRight && (\n              <span className={prefixedClassNames(classPrefix, 'file-icon')}>\n                {iconRight}\n              </span>\n            )}\n          </span>\n          {hasName && shownName && (\n            <span className={prefixedClassNames(classPrefix, 'file-name')}>\n              {shownName}\n            </span>\n          )}\n        </label>\n      </div>\n    );\n\n    if (ownField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {fileElement}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {fileElement}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nFile.displayName = 'File';\n\nexport default File;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;AA0GA;;;;;;;AAOG;AACI,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE;AACE;AACA,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,OAAO,EACP,YAAY,EACZ,cAAc,EACd,KAAK,EACL,IAAI,EACJ,OAAO,EACP,WAAW,EACX,WAAW,EACX,OAAO,EACP,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAS,EACT,SAAS,EACT,cAAc,EACd,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;;IAEF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAIhC;AACJ,IAAA,MAAM,UAAU,GAAG,MAAM,EAAE,IAAI;IAC/B,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,UAAU;YAAE;AACjB,QAAA,IAAI,KAAgD;;;AAGpD,QAAA,MAAM,OAAO,GAAG,CAAC,KAAY,KAAI;AAC/B,YAAA,KAAK,GAAG,UAAU,CAAC,MAAK;gBACtB,IAAI,CAAC,KAAK,CAAC,gBAAgB;oBAAE,SAAS,CAAC,SAAS,CAAC;AACnD,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;AACD,QAAA,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC7C,QAAA,OAAO,MAAK;AACV,YAAA,UAAU,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;YAChD,YAAY,CAAC,KAAK,CAAC;AACrB,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAChB,IAAA,MAAM,YAAY,GAAG,CAAC,KAA0C,KAAI;QAClE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM;QACpC,SAAS,CACP,KAAK,EAAE;AACL,cAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI;cACrD,SAAS,CACd;AACD,QAAA,QAAQ,GAAG,KAAK,CAAC;AACnB,IAAA,CAAC;AACD,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;IACtC,MAAM,UAAU,GACd,MAAM;AACN,SAAC,MAAM,CAAC,KAAK,KAAK;cACd,MAAM,CAAC;eACN,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC;AACjC,gBAAA,CAAA,EAAG,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAA,MAAA,CAAQ,CAAC,CAAC;AAC3E,IAAA,MAAM,SAAS,GAAG,QAAQ,IAAI,UAAU;AAExC,IAAA,MAAM,WAAW,GAAG,cAAc,EAAE;AACpC,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;AACxC,IAAA,MAAM,QAAQ,GAAG,eAAe,CAAC,MAAM,EAAE;QACvC,WAAW;QACX,aAAa;QACb,KAAK;QACL,OAAO;QACP,UAAU;QACV,cAAc;AACf,KAAA,CAAC;AACF,IAAA,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC;QACpD,KAAK;QACL,EAAE,EAAE,KAAK,CAAC,EAAE;QACZ,UAAU;AACV,QAAA,YAAY,EAAE,QAAQ;AACvB,KAAA,CAAC;AACF,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;;;IAGnC,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK;AACxC,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACnD,KAAK;AACL,QAAA,GAAG,UAAU;AACd,KAAA,CAAC;;AAGF,IAAA,IAAI,cAAkC;AACtC,IAAA,IAAI,OAAO,IAAI,UAAU,EAAE;;AAEzB,QAAA,cAAc,GAAG,kBAAkB,CAAC,WAAW,EAAE,UAAU,CAAC;IAC9D;SAAO,IAAI,OAAO,EAAE;AAClB,QAAA,cAAc,GAAG,kBAAkB,CAAC,WAAW,EAAE,UAAU,CAAC;IAC9D;SAAO,IAAI,UAAU,EAAE;AACrB,QAAA,cAAc,GAAG,kBAAkB,CAAC,WAAW,EAAE,aAAa,CAAC;IACjE;AAEA,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,EAAE;AAC9C,QAAA,CAAC,MAAM,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,KAAK;AACxB,QAAA,CAAC,MAAM,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI;AACtB,QAAA,UAAU,EAAE,OAAO;QACnB,cAAc,EAAE,WAAW,IAAI,WAAW;AAC1C,QAAA,UAAU,EAAE,OAAO;AACnB,QAAA,UAAU,EAAE,OAAO,IAAI,CAAC,SAAS;AAClC,KAAA,CAAC;AACF,IAAA,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,EACT,kBAAkB,EAClB,cAAc,EACd,SAAS,CACV;AAED,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,EAAE;AAC9C,QAAA,CAAC,MAAM,YAAY,CAAA,CAAE,GAAG,CAAC,CAAC,YAAY;AACvC,KAAA,CAAC;AACF,IAAA,MAAM,SAAS,GAAG,OAAO,GAAGA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,SAAS,YAAG,OAAO,EAAA,CAAK,GAAG,IAAI;AAEzE,IAAA,MAAM,WAAW,IACfA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,EAAA,QAAA,EACvBC,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,qBAAqB,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,CACnDD,GAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,qBAAqB,CAAC,YAAY,CAAC,EACnC,cAAc,CACf,EACD,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,SAAS,EACb,QAAQ,EAAE,YAAY,EAAA,GAClB,IAAI,EAAA,CACR,EACFC,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,qBAAqB,CAAC,UAAU,CAAC,EAAA,QAAA,EAAA,CAC/C,QAAQ,KACPD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,WAAW,CAAC,EAAA,QAAA,EAC1D,QAAQ,EAAA,CACJ,CACR,EACDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,qBAAqB,CAAC,YAAY,CAAC,EAAA,QAAA,EACjD,WAAW,IAAI,qBAAqB,EAAA,CAChC,EACN,SAAS,KACRA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,WAAW,CAAC,EAAA,QAAA,EAC1D,SAAS,EAAA,CACL,CACR,CAAA,EAAA,CACI,EACN,OAAO,IAAI,SAAS,KACnBA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,WAAW,CAAC,EAAA,QAAA,EAC1D,SAAS,EAAA,CACL,CACR,CAAA,EAAA,CACK,EAAA,CACJ,CACP;IAED,IAAI,QAAQ,EAAE;AACZ,QAAA,QACEC,IAAA,CAAC,KAAK,EAAA,EACJ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,cAAc,EAAA,QAAA,EAAA,CAExB,WAAW,EACX,SAAS,CAAA,EAAA,CACJ;IAEZ;AAEA,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,WAAW,EACX,SAAS,CAAA,EAAA,CACT;AAEP,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;"}
+{"version":3,"file":"File.js","sources":["../../../src/form/File.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\nimport { useNumberFormat } from '../helpers/localeFormat';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n} from './FormContext';\nimport { Field } from './Field';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * Props for the File component.\n * Inside an outer `Field`, or a `Control` with no `Field` around it, it\n * renders no `Field` of its own. The exception is `label`, `message`,\n * `horizontal` or `fieldClassName` in that bare `Control`: it keeps a `Field`\n * for them, nested in the `.control`, and warns in development. Wrap the\n * `Control` in a `Field` instead, and set the `label`, `horizontal` and class\n * name on that `Field`.\n *\n * @helperProps Helper props go on the `.file` wrapper `<div>`, with\n * `className`. The other attributes go on the `<input>`.\n * @extraProp {string} [accept] - File types the picker offers, as the native attribute takes them (`.pdf`, `image/*`, `application/pdf`). Browsers apply it in the picker only: a file dropped on the input lands whatever its type, so check `files` in `onChange` when the type matters.\n * @extraProp {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] - Called when the user picks files, or drops them on the input. With the extras stylesheet loaded, a drop does what a pick does: it replaces what was picked and fires `input` and `change`. A drop of several files lands only with `multiple`.\n */\nexport interface FileProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'color' | 'type'\n    >,\n    Omit<BulmaClassesProps, 'color'>,\n    FormFieldProps {\n  /** Field label. Automatically associated with the file input via `htmlFor` — uses your `id` when provided, otherwise a generated one. The input then has two labels (this one plus the wrapping `file-label`); assistive tech reads both. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Bulma color modifier for the file input. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Size modifier for the file input. */\n  size?: 'small' | 'medium' | 'large';\n  /** Boxed file input. */\n  isBoxed?: boolean;\n  /** Whether the file input expands to full width. */\n  isFullwidth?: boolean;\n  /** Whether the file input expands to full width. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  isFullWidth?: boolean;\n  /** Position the CTA on the right (with `hasName`). */\n  isRight?: boolean;\n  /** Center the file input within its container. */\n  isCentered?: boolean;\n  /**\n   * Show a file name area. Without `fileName` it shows what the user picked: the file's name, or\n   * a count when `multiple` lets them pick several (see `pickedFilesLabel`). Before a pick there is\n   * no name area, and the root takes Bulma's `is-empty`. A reset of the input's form clears the\n   * name, but clearing the input from code fires no change event and leaves it showing, so pass\n   * `fileName` to control the text then.\n   */\n  hasName?: boolean;\n  /** Text on the file CTA button (defaults to \"Choose a file…\"). */\n  buttonLabel?: React.ReactNode;\n  /**\n   * Left icon element. It renders inside the `<label>` that names the file input, beside\n   * `buttonLabel`, so leave an `Icon` here unnamed (`<Icon name=\"upload\" />`): it is then\n   * `aria-hidden`, while an `ariaLabel` would join the input's accessible name.\n   */\n  iconLeft?: React.ReactNode;\n  /**\n   * Right icon element. Sits inside the same `<label>` as `iconLeft`, so the same applies:\n   * an `Icon` here with an `ariaLabel` joins the input's accessible name.\n   */\n  iconRight?: React.ReactNode;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Additional CSS classes for the `<input>`. */\n  inputClassName?: string;\n  /**\n   * Text for the file name area (with `hasName`), for a file chosen earlier or your own wording.\n   * Setting it takes over from the picked file's name; an empty string shows no name area.\n   */\n  fileName?: string;\n  /**\n   * Builds the text `hasName` shows when several files are picked, from their count, for\n   * localization. Default: `` `${count} files` ``, with the count written the way the `locale`\n   * of a `LocaleProvider` around it writes numbers. A single pick shows its file's name.\n   */\n  pickedFilesLabel?: (count: number) => string;\n}\n\n/**\n * The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, \"has name\", and filename display.\n *\n * @function\n * @param {FileProps} props - Props for the File component.\n * @returns {JSX.Element} The rendered file upload field.\n * @see {@link https://bulma.io/documentation/form/file/ | Bulma File documentation}\n */\nexport const File = forwardRef<HTMLInputElement, FileProps>(\n  (\n    {\n      // Field props\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      color,\n      size,\n      isBoxed,\n      isFullwidth,\n      isFullWidth,\n      isRight,\n      isCentered,\n      hasName,\n      buttonLabel,\n      iconLeft,\n      iconRight,\n      className,\n      inputClassName,\n      fileName,\n      pickedFilesLabel,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // What the user last picked, and the form a reset of which clears it.\n    const [picked, setPicked] = useState<{\n      count: number;\n      firstName: string;\n      form: HTMLFormElement | null;\n    }>();\n    const pickedForm = picked?.form;\n    useEffect(() => {\n      if (!pickedForm) return;\n      let timer: ReturnType<typeof setTimeout> | undefined;\n      // The reset event fires before the form resets, and a listener after this one can still\n      // cancel it, so the name is cleared a task later, and only if the reset went ahead.\n      const onReset = (event: Event) => {\n        timer = setTimeout(() => {\n          if (!event.defaultPrevented) setPicked(undefined);\n        });\n      };\n      pickedForm.addEventListener('reset', onReset);\n      return () => {\n        pickedForm.removeEventListener('reset', onReset);\n        clearTimeout(timer);\n      };\n    }, [pickedForm]);\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const { files, form } = event.target;\n      setPicked(\n        files?.length\n          ? { count: files.length, firstName: files[0].name, form }\n          : undefined\n      );\n      onChange?.(event);\n    };\n    const formatNumber = useNumberFormat();\n    const pickedText =\n      picked &&\n      (picked.count === 1\n        ? picked.firstName\n        : (pickedFilesLabel?.(picked.count) ??\n          `${formatNumber ? formatNumber(picked.count) : picked.count} files`));\n    const shownName = fileName ?? pickedText;\n\n    const insideField = useInsideField();\n    const insideControl = useInsideControl();\n    const ownField = rendersOwnField('File', {\n      insideField,\n      insideControl,\n      label,\n      message,\n      horizontal,\n      fieldClassName,\n    });\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id: props.id,\n      labelProps,\n      rendersLabel: ownField,\n    });\n    const { classPrefix } = useConfig();\n    // The input takes `controlId`, so `id` stays out of the spread, where an\n    // undefined `id` key would wipe the id the label points at.\n    const { id: _id, ...inputProps } = props;\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color,\n      ...inputProps,\n    });\n\n    // Mutually exclusive alignment\n    let alignmentClass: string | undefined;\n    if (isRight && isCentered) {\n      // If both are set, prefer isRight and warn in dev\n      alignmentClass = prefixedClassNames(classPrefix, 'is-right');\n    } else if (isRight) {\n      alignmentClass = prefixedClassNames(classPrefix, 'is-right');\n    } else if (isCentered) {\n      alignmentClass = prefixedClassNames(classPrefix, 'is-centered');\n    }\n\n    const mainClass = usePrefixedClassNames('file', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-boxed': isBoxed,\n      'is-fullwidth': isFullwidth ?? isFullWidth,\n      'has-name': hasName,\n      'is-empty': hasName && !shownName,\n    });\n    const fileClass = classNames(\n      mainClass,\n      bulmaHelperClasses,\n      alignmentClass,\n      className\n    );\n\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    const fileElement = (\n      <div className={fileClass}>\n        <label className={usePrefixedClassNames('file-label')}>\n          <input\n            ref={ref}\n            className={classNames(\n              usePrefixedClassNames('file-input'),\n              inputClassName\n            )}\n            type=\"file\"\n            id={controlId}\n            onChange={handleChange}\n            {...rest}\n          />\n          <span className={usePrefixedClassNames('file-cta')}>\n            {iconLeft && (\n              <span className={prefixedClassNames(classPrefix, 'file-icon')}>\n                {iconLeft}\n              </span>\n            )}\n            <span className={usePrefixedClassNames('file-label')}>\n              {buttonLabel || 'Choose a file\\u2026'}\n            </span>\n            {iconRight && (\n              <span className={prefixedClassNames(classPrefix, 'file-icon')}>\n                {iconRight}\n              </span>\n            )}\n          </span>\n          {hasName && shownName && (\n            <span className={prefixedClassNames(classPrefix, 'file-name')}>\n              {shownName}\n            </span>\n          )}\n        </label>\n      </div>\n    );\n\n    if (ownField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {fileElement}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {fileElement}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nFile.displayName = 'File';\n\nexport default File;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}