@allxsmith/bestax-bulma 5.34.0 → 5.34.1

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

@@ -1 +1 @@
-{"version":3,"file":"useAutoLabelId.js","sources":["../../../src/form/useAutoLabelId.ts"],"sourcesContent":["import React, { useId } from 'react';\nimport type { FieldProps } from './Field';\nimport {\n  useFieldLabelElementId,\n  useFieldLabelFor,\n  useFieldLabelId,\n  useReportFieldLabelFor,\n} from './FormContext';\n\ninterface UseAutoLabelIdOptions {\n  /** The convenience `label` prop as passed by the caller. */\n  label: React.ReactNode;\n  /** User-supplied id for the control, if any. */\n  id?: string;\n  /** User-supplied labelProps, if any. */\n  labelProps?: FieldProps['labelProps'];\n  /**\n   * True when this render actually outputs the label wired to a control —\n   * false inside an outer Field (label is dropped), in variants that render\n   * no Field, and in modes with no labellable control (e.g. inline pickers).\n   */\n  rendersLabel: boolean;\n  /**\n   * False when this render has no input to label at all (an inline picker),\n   * so it takes no id from a surrounding Field either. Defaults to true.\n   */\n  hasInput?: boolean;\n  /**\n   * True when the control also points `aria-labelledby` at the label, as a\n   * range Slider's thumbs (#981) and Autocomplete's suggestion list (#998)\n   * do, so it needs the label's own id. Its own label then gets one\n   * (`labelProps.id` when given, otherwise a generated one), and the hook\n   * returns it, or a surrounding Field's, as `labelId`.\n   */\n  needsLabelId?: boolean;\n}\n\n/**\n * Associates the convenience `label` prop with its control (#368): generates\n * an id for the control and returns labelProps carrying a matching `htmlFor`.\n * A user-supplied `id` is used as the target instead of the generated one, and\n * an explicit `htmlFor` key in labelProps — even set to `undefined` — disables\n * generation entirely: the user has taken over the association (#495 presence\n * semantics). When the control renders no label of its own, it adopts the id\n * a labeled Field around it offers, the way the bases do, so that Field's\n * label names it (#939); a user `id` still wins there. It tells that Field\n * when the control took its id, since the Field's label drops a `for`\n * nothing took (#1004). With `needsLabelId` it also returns the id of\n * whichever label names the control (#981).\n * Internal; not part of the public API.\n */\nexport function useAutoLabelId({\n  label,\n  id,\n  labelProps,\n  rendersLabel,\n  hasInput = true,\n  needsLabelId = false,\n}: UseAutoLabelIdOptions): {\n  controlId: string | undefined;\n  fieldLabelProps: FieldProps['labelProps'] | undefined;\n  /** Whether a rendered label, its own or a surrounding Field's, points at `controlId`. */\n  labelled: boolean;\n  /**\n   * With `needsLabelId`, the id of the label that names `controlId`, its own\n   * or a surrounding Field's. Undefined when no label names it, or when a\n   * Field's label wired by hand names it without an `id` in its labelProps,\n   * since the Field generates none for a label wired by hand.\n   */\n  labelId: string | undefined;\n} {\n  // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.\n  const generatedId = useId();\n  // Read outside the control's own Field, so it is set only when an outer\n  // Field holds the control, which then renders no label of its own.\n  const fieldLabelId = useFieldLabelId();\n  // What an outer Field's label points at, even when wired by hand, and the\n  // id that label renders with, read together so the id is that label's.\n  // Set in `grouped`/`hasAddons` Fields too when the label is wired by hand,\n  // since its `for` names this one control whatever the layout (see Field).\n  const fieldLabelFor = useFieldLabelFor();\n  // Truthiness mirrors Field's own `if (label)` render gate.\n  const active = !!label && rendersLabel;\n  // Presence, not truthiness: `htmlFor: undefined` is an explicit opt-out and\n  // must not leave an orphan generated id on the control.\n  const userWired = !!labelProps && 'htmlFor' in labelProps;\n  const adopted = !active && hasInput ? fieldLabelId : undefined;\n  const controlId = id ?? (active && !userWired ? generatedId : adopted);\n  // Tells a labeled Field around the control when its label's `for` names\n  // the control, since it drops a `for` nothing took (#1004).\n  useReportFieldLabelFor(\n    fieldLabelId !== undefined && controlId === fieldLabelId\n  );\n  const ownLabelProps = { htmlFor: controlId, ...labelProps };\n  const labelTarget = active ? ownLabelProps.htmlFor : fieldLabelFor.htmlFor;\n  const labelled = !!controlId && labelTarget === controlId;\n  // Only a label that names the control gets an id to point at, with the\n  // suffix Field gives its own, from an id that is already unique.\n  const ownLabelId =\n    needsLabelId && active && labelled\n      ? (labelProps?.id ?? `${generatedId}-label`)\n      : undefined;\n  // Inactive with a label still means an own Field may render it (pickers'\n  // inline mode, Taginput at maxTags) — the explicit `htmlFor: undefined`\n  // tells Field the association is owned here, so it must not generate one\n  // that would dangle (#495 presence semantics).\n  const fieldLabelProps = active\n    ? ownLabelId\n      ? { ...ownLabelProps, id: ownLabelId }\n      : ownLabelProps\n    : label\n      ? { htmlFor: undefined, ...labelProps }\n      : labelProps;\n  const labelId =\n    needsLabelId && labelled\n      ? active\n        ? ownLabelId\n        : fieldLabelFor.id\n      : undefined;\n  return { controlId, fieldLabelProps, labelled, labelId };\n}\n\ninterface UseAutoLabelledByOptions {\n  /** The convenience `label` prop as passed by the caller. */\n  label: React.ReactNode;\n  /** User-supplied labelProps, if any. */\n  labelProps?: FieldProps['labelProps'];\n  /** True when this render actually outputs the label naming the group. */\n  rendersLabel: boolean;\n  /**\n   * The caller's remaining props. A non-empty `aria-label` among them names\n   * the group, and so does any `aria-labelledby` key, even an undefined one,\n   * since the group spreads them after its own attribute. Either keeps every\n   * label off the group, its own and a surrounding Field's alike.\n   */\n  callerProps: object;\n}\n\n/**\n * Group-input counterpart of {@link useAutoLabelId} (#494): a group of\n * controls cannot take a single `htmlFor`, so instead the rendered `<label>`\n * gets a generated id and the group container points at it with\n * `aria-labelledby`. A user-supplied `labelProps.id` is used as the target\n * instead of generating one. Any caller `htmlFor` is stripped — a group label\n * names the group, never a single control — so the merged labelProps always\n * carry an explicit `htmlFor: undefined`. When the group renders no label of\n * its own, it points at the label of a labeled Field around it instead\n * (#939). A caller who named the group with `aria-label` or\n * `aria-labelledby` gets no `aria-labelledby` from either label, so their\n * name wins wherever the label sits.\n * Internal; not part of the public API.\n */\nexport function useAutoLabelledBy({\n  label,\n  labelProps,\n  rendersLabel,\n  callerProps,\n}: UseAutoLabelledByOptions): {\n  ariaLabelledBy: string | undefined;\n  fieldLabelProps: FieldProps['labelProps'] | undefined;\n} {\n  // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.\n  const generatedId = useId();\n  // Set only when an outer Field holds the group (see useAutoLabelId).\n  const fieldLabelElementId = useFieldLabelElementId();\n  const active = !!label && rendersLabel;\n  const labelId = labelProps?.id ?? (active ? generatedId : undefined);\n  const fieldLabelProps = active\n    ? { ...labelProps, id: labelId, htmlFor: undefined }\n    : labelProps;\n  const aria = callerProps as React.AriaAttributes;\n  // Presence for aria-labelledby: the caller's key replaces the attribute\n  // through the spread whatever its value, and pointing it at a label would\n  // only take a Rate's fallback name away. Checked before either label, so\n  // the caller's name wins over the group's own `label` as it does over a\n  // Field's, the way an aria-label beats a `<label for>` on a single input.\n  const callerNamed = !!aria['aria-label'] || 'aria-labelledby' in aria;\n  const ariaLabelledBy = callerNamed\n    ? undefined\n    : active\n      ? labelId\n      : fieldLabelElementId;\n  return { ariaLabelledBy, fieldLabelProps };\n}\n"],"names":[],"mappings":";;;;AAqCA;;;;;;;;;;;;;AAaG;SACa,cAAc,CAAC,EAC7B,KAAK,EACL,EAAE,EACF,UAAU,EACV,YAAY,EACZ,QAAQ,GAAG,IAAI,EACf,YAAY,GAAG,KAAK,GACE,EAAA;;AActB,IAAA,MAAM,WAAW,GAAG,KAAK,EAAE;;;AAG3B,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;;;;;AAKtC,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;;AAExC,IAAA,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,YAAY;;;IAGtC,MAAM,SAAS,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,IAAI,UAAU;AACzD,IAAA,MAAM,OAAO,GAAG,CAAC,MAAM,IAAI,QAAQ,GAAG,YAAY,GAAG,SAAS;AAC9D,IAAA,MAAM,SAAS,GAAG,EAAE,KAAK,MAAM,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;;;IAGtE,sBAAsB,CACpB,YAAY,KAAK,SAAS,IAAI,SAAS,KAAK,YAAY,CACzD;IACD,MAAM,aAAa,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE;AAC3D,IAAA,MAAM,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,OAAO,GAAG,aAAa,CAAC,OAAO;IAC1E,MAAM,QAAQ,GAAG,CAAC,CAAC,SAAS,IAAI,WAAW,KAAK,SAAS;;;AAGzD,IAAA,MAAM,UAAU,GACd,YAAY,IAAI,MAAM,IAAI;WACrB,UAAU,EAAE,EAAE,IAAI,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ;UACzC,SAAS;;;;;IAKf,MAAM,eAAe,GAAG;AACtB,UAAE;cACE,EAAE,GAAG,aAAa,EAAE,EAAE,EAAE,UAAU;AACpC,cAAE;AACJ,UAAE;cACE,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU;cACnC,UAAU;AAChB,IAAA,MAAM,OAAO,GACX,YAAY,IAAI;AACd,UAAE;AACA,cAAE;cACA,aAAa,CAAC;UAChB,SAAS;IACf,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE;AAC1D;AAkBA;;;;;;;;;;;;;AAaG;AACG,SAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,UAAU,EACV,YAAY,EACZ,WAAW,GACc,EAAA;;AAKzB,IAAA,MAAM,WAAW,GAAG,KAAK,EAAE;;AAE3B,IAAA,MAAM,mBAAmB,GAAG,sBAAsB,EAAE;AACpD,IAAA,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,YAAY;AACtC,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,EAAE,KAAK,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,MAAM,eAAe,GAAG;AACtB,UAAE,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS;UAChD,UAAU;IACd,MAAM,IAAI,GAAG,WAAmC;;;;;;AAMhD,IAAA,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,iBAAiB,IAAI,IAAI;IACrE,MAAM,cAAc,GAAG;AACrB,UAAE;AACF,UAAE;AACA,cAAE;cACA,mBAAmB;AACzB,IAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE;AAC5C;;"}
+{"version":3,"file":"useAutoLabelId.js","sources":["../../../src/form/useAutoLabelId.ts"],"sourcesContent":["import React, { useId } from 'react';\nimport type { FieldProps } from './Field';\nimport {\n  useFieldLabelElementId,\n  useFieldLabelFor,\n  useFieldLabelId,\n  useReportFieldLabelFor,\n} from './FormContext';\n\ninterface UseAutoLabelIdOptions {\n  /** The convenience `label` prop as passed by the caller. */\n  label: React.ReactNode;\n  /** User-supplied id for the control, if any. */\n  id?: string;\n  /** User-supplied labelProps, if any. */\n  labelProps?: FieldProps['labelProps'];\n  /**\n   * True when this render actually outputs the label wired to a control —\n   * false inside an outer Field (label is dropped), in variants that render\n   * no Field, and in modes with no labellable control (e.g. inline pickers).\n   */\n  rendersLabel: boolean;\n  /**\n   * False when this render has no input to label at all (an inline picker),\n   * so it takes no id from a surrounding Field either. Defaults to true.\n   */\n  hasInput?: boolean;\n  /**\n   * True when the control also points `aria-labelledby` at the label, as a\n   * range Slider's thumbs (#981) and Autocomplete's and Taginput's\n   * suggestion lists (#998, #1082) do, so it needs the label's own id. Its own label then gets one\n   * (`labelProps.id` when given, otherwise a generated one), and the hook\n   * returns it, or a surrounding Field's, as `labelId`.\n   */\n  needsLabelId?: boolean;\n}\n\n/**\n * Associates the convenience `label` prop with its control (#368): generates\n * an id for the control and returns labelProps carrying a matching `htmlFor`.\n * A user-supplied `id` is used as the target instead of the generated one, and\n * an explicit `htmlFor` key in labelProps — even set to `undefined` — disables\n * generation entirely: the user has taken over the association (#495 presence\n * semantics). When the control renders no label of its own, it adopts the id\n * a labeled Field around it offers, the way the bases do, so that Field's\n * label names it (#939); a user `id` still wins there. It tells that Field\n * when the control took its id, since the Field's label drops a `for`\n * nothing took (#1004). With `needsLabelId` it also returns the id of\n * whichever label names the control (#981).\n * Internal; not part of the public API.\n */\nexport function useAutoLabelId({\n  label,\n  id,\n  labelProps,\n  rendersLabel,\n  hasInput = true,\n  needsLabelId = false,\n}: UseAutoLabelIdOptions): {\n  controlId: string | undefined;\n  fieldLabelProps: FieldProps['labelProps'] | undefined;\n  /** Whether a rendered label, its own or a surrounding Field's, points at `controlId`. */\n  labelled: boolean;\n  /**\n   * With `needsLabelId`, the id of the label that names `controlId`, its own\n   * or a surrounding Field's. Undefined when no label names it, or when a\n   * Field's label wired by hand names it without an `id` in its labelProps,\n   * since the Field generates none for a label wired by hand.\n   */\n  labelId: string | undefined;\n} {\n  // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.\n  const generatedId = useId();\n  // Read outside the control's own Field, so it is set only when an outer\n  // Field holds the control, which then renders no label of its own.\n  const fieldLabelId = useFieldLabelId();\n  // What an outer Field's label points at, even when wired by hand, and the\n  // id that label renders with, read together so the id is that label's.\n  // Set in `grouped`/`hasAddons` Fields too when the label is wired by hand,\n  // since its `for` names this one control whatever the layout (see Field).\n  const fieldLabelFor = useFieldLabelFor();\n  // Truthiness mirrors Field's own `if (label)` render gate.\n  const active = !!label && rendersLabel;\n  // Presence, not truthiness: `htmlFor: undefined` is an explicit opt-out and\n  // must not leave an orphan generated id on the control.\n  const userWired = !!labelProps && 'htmlFor' in labelProps;\n  const adopted = !active && hasInput ? fieldLabelId : undefined;\n  const controlId = id ?? (active && !userWired ? generatedId : adopted);\n  // Tells a labeled Field around the control when its label's `for` names\n  // the control, since it drops a `for` nothing took (#1004).\n  useReportFieldLabelFor(\n    fieldLabelId !== undefined && controlId === fieldLabelId\n  );\n  const ownLabelProps = { htmlFor: controlId, ...labelProps };\n  const labelTarget = active ? ownLabelProps.htmlFor : fieldLabelFor.htmlFor;\n  const labelled = !!controlId && labelTarget === controlId;\n  // Only a label that names the control gets an id to point at, with the\n  // suffix Field gives its own, from an id that is already unique.\n  const ownLabelId =\n    needsLabelId && active && labelled\n      ? (labelProps?.id ?? `${generatedId}-label`)\n      : undefined;\n  // Inactive with a label still means an own Field may render it (pickers'\n  // inline mode, Taginput at maxTags) — the explicit `htmlFor: undefined`\n  // tells Field the association is owned here, so it must not generate one\n  // that would dangle (#495 presence semantics).\n  const fieldLabelProps = active\n    ? ownLabelId\n      ? { ...ownLabelProps, id: ownLabelId }\n      : ownLabelProps\n    : label\n      ? { htmlFor: undefined, ...labelProps }\n      : labelProps;\n  const labelId =\n    needsLabelId && labelled\n      ? active\n        ? ownLabelId\n        : fieldLabelFor.id\n      : undefined;\n  return { controlId, fieldLabelProps, labelled, labelId };\n}\n\ninterface UseAutoLabelledByOptions {\n  /** The convenience `label` prop as passed by the caller. */\n  label: React.ReactNode;\n  /** User-supplied labelProps, if any. */\n  labelProps?: FieldProps['labelProps'];\n  /** True when this render actually outputs the label naming the group. */\n  rendersLabel: boolean;\n  /**\n   * The caller's remaining props. A non-empty `aria-label` among them names\n   * the group, and so does any `aria-labelledby` key, even an undefined one,\n   * since the group spreads them after its own attribute. Either keeps every\n   * label off the group, its own and a surrounding Field's alike.\n   */\n  callerProps: object;\n}\n\n/**\n * Group-input counterpart of {@link useAutoLabelId} (#494): a group of\n * controls cannot take a single `htmlFor`, so instead the rendered `<label>`\n * gets a generated id and the group container points at it with\n * `aria-labelledby`. A user-supplied `labelProps.id` is used as the target\n * instead of generating one. Any caller `htmlFor` is stripped — a group label\n * names the group, never a single control — so the merged labelProps always\n * carry an explicit `htmlFor: undefined`. When the group renders no label of\n * its own, it points at the label of a labeled Field around it instead\n * (#939). A caller who named the group with `aria-label` or\n * `aria-labelledby` gets no `aria-labelledby` from either label, so their\n * name wins wherever the label sits.\n * Internal; not part of the public API.\n */\nexport function useAutoLabelledBy({\n  label,\n  labelProps,\n  rendersLabel,\n  callerProps,\n}: UseAutoLabelledByOptions): {\n  ariaLabelledBy: string | undefined;\n  fieldLabelProps: FieldProps['labelProps'] | undefined;\n} {\n  // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.\n  const generatedId = useId();\n  // Set only when an outer Field holds the group (see useAutoLabelId).\n  const fieldLabelElementId = useFieldLabelElementId();\n  const active = !!label && rendersLabel;\n  const labelId = labelProps?.id ?? (active ? generatedId : undefined);\n  const fieldLabelProps = active\n    ? { ...labelProps, id: labelId, htmlFor: undefined }\n    : labelProps;\n  const aria = callerProps as React.AriaAttributes;\n  // Presence for aria-labelledby: the caller's key replaces the attribute\n  // through the spread whatever its value, and pointing it at a label would\n  // only take a Rate's fallback name away. Checked before either label, so\n  // the caller's name wins over the group's own `label` as it does over a\n  // Field's, the way an aria-label beats a `<label for>` on a single input.\n  const callerNamed = !!aria['aria-label'] || 'aria-labelledby' in aria;\n  const ariaLabelledBy = callerNamed\n    ? undefined\n    : active\n      ? labelId\n      : fieldLabelElementId;\n  return { ariaLabelledBy, fieldLabelProps };\n}\n"],"names":[],"mappings":";;;;AAqCA;;;;;;;;;;;;;AAaG;SACa,cAAc,CAAC,EAC7B,KAAK,EACL,EAAE,EACF,UAAU,EACV,YAAY,EACZ,QAAQ,GAAG,IAAI,EACf,YAAY,GAAG,KAAK,GACE,EAAA;;AActB,IAAA,MAAM,WAAW,GAAG,KAAK,EAAE;;;AAG3B,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;;;;;AAKtC,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;;AAExC,IAAA,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,YAAY;;;IAGtC,MAAM,SAAS,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,IAAI,UAAU;AACzD,IAAA,MAAM,OAAO,GAAG,CAAC,MAAM,IAAI,QAAQ,GAAG,YAAY,GAAG,SAAS;AAC9D,IAAA,MAAM,SAAS,GAAG,EAAE,KAAK,MAAM,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;;;IAGtE,sBAAsB,CACpB,YAAY,KAAK,SAAS,IAAI,SAAS,KAAK,YAAY,CACzD;IACD,MAAM,aAAa,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE;AAC3D,IAAA,MAAM,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,OAAO,GAAG,aAAa,CAAC,OAAO;IAC1E,MAAM,QAAQ,GAAG,CAAC,CAAC,SAAS,IAAI,WAAW,KAAK,SAAS;;;AAGzD,IAAA,MAAM,UAAU,GACd,YAAY,IAAI,MAAM,IAAI;WACrB,UAAU,EAAE,EAAE,IAAI,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ;UACzC,SAAS;;;;;IAKf,MAAM,eAAe,GAAG;AACtB,UAAE;cACE,EAAE,GAAG,aAAa,EAAE,EAAE,EAAE,UAAU;AACpC,cAAE;AACJ,UAAE;cACE,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU;cACnC,UAAU;AAChB,IAAA,MAAM,OAAO,GACX,YAAY,IAAI;AACd,UAAE;AACA,cAAE;cACA,aAAa,CAAC;UAChB,SAAS;IACf,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE;AAC1D;AAkBA;;;;;;;;;;;;;AAaG;AACG,SAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,UAAU,EACV,YAAY,EACZ,WAAW,GACc,EAAA;;AAKzB,IAAA,MAAM,WAAW,GAAG,KAAK,EAAE;;AAE3B,IAAA,MAAM,mBAAmB,GAAG,sBAAsB,EAAE;AACpD,IAAA,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,YAAY;AACtC,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,EAAE,KAAK,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,MAAM,eAAe,GAAG;AACtB,UAAE,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS;UAChD,UAAU;IACd,MAAM,IAAI,GAAG,WAAmC;;;;;;AAMhD,IAAA,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,iBAAiB,IAAI,IAAI;IACrE,MAAM,cAAc,GAAG;AACrB,UAAE;AACF,UAAE;AACA,cAAE;cACA,mBAAmB;AACzB,IAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE;AAC5C;;"}

package/dist/index.cjs

@@ -10694,7 +10694,8 @@ const FieldLabelForContext = React.createContext({});
  * renders with, if it has one. An unlabeled Field passes both through
  * together, so a control in the inner Field of a horizontal layout can tell
  * the outer label names it, and point at that label by its id, as a range
- * Slider's thumbs (#981) and Autocomplete's suggestion list (#998) do. The
+ * Slider's thumbs (#981) and Autocomplete's and Taginput's suggestion lists
+ * (#998, #1082) do. The
  * `htmlFor` is only ever compared with a control's own id, never adopted, so
  * it hands out no id for a control. It keeps the generated id after the
  * label drops a `for` nothing took (#1004), which no control's id matches
@@ -10949,9 +10950,9 @@ Control.displayName = 'Control';
  * `id`, or give the horizontal `Field` a `label` prop, which renders this
  * column and its `<label>` for you. A `<label>` you put here names the
  * control through its `htmlFor` alone: a range `Slider`'s thumbs and an
- * `Autocomplete`'s suggestion list point `aria-labelledby` at a `Field`'s
- * label only when its `label` prop renders it and it names the control.
- * Where it would not name the control on its own, as in an inner `Field`,
+ * `Autocomplete`'s or `Taginput`'s suggestion list point `aria-labelledby` at
+ * a `Field`'s label only when its `label` prop renders it and it names the
+ * control. Where it would not name the control on its own, as in an inner `Field`,
  * pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.
  *
  * @function
@@ -12960,7 +12961,7 @@ Autocomplete.displayName = 'Autocomplete';
  */
 const Taginput = React.forwardRef(({ 
 // Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data = [], placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled = false, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, id, className, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data: dataProp, placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled = false, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, id, className, ...props }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('Taginput', {
@@ -12983,17 +12984,26 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const [inputValue, setInputValue] = React.useState('');
     const [isActive, setIsActive] = React.useState(false);
     const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
+    const listboxId = `${React.useId()}-listbox`;
+    // With `data` the input offers suggestions, so it's a combobox, even
+    // while none match. Without it there's never a list, so it stays a plain
+    // text field.
+    const hasSuggestions = dataProp !== undefined;
+    const data = dataProp ?? [];
     // Use controlled or internal tags
     const tags = controlledValue !== undefined ? controlledValue : internalTags;
     const isMaxReached = maxTags !== undefined && tags.length >= maxTags;
     // At the tag limit the text input is not rendered, so there is nothing to
-    // wire a label to, its own or a surrounding Field's.
-    const { controlId, fieldLabelProps, labelled } = useAutoLabelId({
+    // wire a label to, its own or a surrounding Field's. The suggestion list
+    // points `aria-labelledby` at the label that names the input, so with
+    // suggestions it needs that label's id.
+    const { controlId, fieldLabelProps, labelled, labelId: listLabelId, } = useAutoLabelId({
         label,
         id,
         labelProps,
         rendersLabel: ownField && !isMaxReached,
         hasInput: !isMaxReached,
+        needsLabelId: hasSuggestions,
     });
     // Get display value from tag
     const getDisplayValue = (tag) => {
@@ -13013,6 +13023,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         const hasInput = inputValue || (openOnFocus && isActive);
         return matchesInput && notAlreadyAdded && hasInput;
     });
+    const listOpen = isActive && filteredData.length > 0;
     // keepFirst: auto-highlight first item when dropdown opens
     React.useEffect(() => {
         if (keepFirst && isActive && filteredData.length > 0) {
@@ -13253,15 +13264,35 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         [`is-${messageColor}`]: !!messageColor,
     });
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
+    // The combobox controls its listbox and points at the highlighted option,
+    // the way Autocomplete's does. The listbox takes its name from the label
+    // that names the combobox, the one this renders or a surrounding Field's,
+    // and keeps a fallback name when no label names it or the one that does
+    // has no id to point at. While no suggestion matches there's no listbox,
+    // so the combobox is collapsed and points at nothing. It skips a
+    // highlighted suggestion that's blank once trimmed, since that one can't
+    // become a tag, and the option it points at is the one marked selected.
+    const optionId = (index) => `${listboxId}-${index}`;
+    const activeOptionId = listOpen && filteredData[highlightedIndex]?.trim()
+        ? optionId(highlightedIndex)
+        : undefined;
+    const comboboxProps = {
+        role: 'combobox',
+        'aria-expanded': listOpen,
+        'aria-controls': listOpen ? listboxId : undefined,
+        'aria-activedescendant': activeOptionId,
+        'aria-haspopup': 'listbox',
+        'aria-autocomplete': 'list',
+    };
     const taginputElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, onClick: handleContainerClick, ...rest, children: [jsxRuntime.jsxs("div", { className: containerClasses, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, library: resolvedLibrary, variant: iconVariant, features: iconFeatures, containerClassName: pcn('icon', 'is-left') })), jsxRuntime.jsxs("div", { className: tagsClasses, children: [tags.map((tag, index) => {
                                 const displayVal = getDisplayValue(tag);
                                 return (jsxRuntime.jsxs("span", { className: tagClasses, children: [tagTemplate ? (tagTemplate(tag)) : ellipsis ? (jsxRuntime.jsx("span", { title: displayVal, children: displayVal })) : (displayVal), closable && !disabled && !readonly && (jsxRuntime.jsx("button", { type: "button", className: pcn('delete', 'is-small'), onClick: e => {
                                                 e.stopPropagation();
                                                 removeTag(index);
                                             }, "aria-label": ariaCloseLabel || `Remove ${displayVal}` }))] }, index));
-                            }), !isMaxReached && (jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, readOnly: readonly, maxLength: maxlength, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, "aria-label": labelled ? undefined : 'Add tag' }))] }), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), isActive && filteredData.length > 0 && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsx("div", { ref: dropdownRef, className: dropdownContentClasses, role: "listbox", children: filteredData.map((item, index) => (jsxRuntime.jsx("a", { className: pcn('dropdown-item', {
+                            }), !isMaxReached && (jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, readOnly: readonly, maxLength: maxlength, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, ...(hasSuggestions && comboboxProps), "aria-label": labelled ? undefined : 'Add tag' }))] }), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), listOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsx("div", { ref: dropdownRef, id: listboxId, className: dropdownContentClasses, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', children: filteredData.map((item, index) => (jsxRuntime.jsx("a", { id: optionId(index), className: pcn('dropdown-item', {
                             'is-active': index === highlightedIndex,
-                        }), onClick: () => addTag(item), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: item }, index))) }) })), showCounter && jsxRuntime.jsx("small", { className: counterClasses, children: counterText }), name &&
+                        }), onClick: () => addTag(item), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": optionId(index) === activeOptionId, children: item }, index))) }) })), showCounter && jsxRuntime.jsx("small", { className: counterClasses, children: counterText }), name &&
                 tags.map((tag, i) => (jsxRuntime.jsx("input", { type: "hidden", name: name, value: getDisplayValue(tag), form: form }, `tag-input-${i}`)))] }));
     if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [taginputElement, messageEl] }));