@react-md/core 1.0.0-next.16 → 1.0.0-next.17

package/dist/form/optionStyles.js

@@ -4,11 +4,11 @@ const styles = bem("rmd-option");
 /**
  * @since 6.0.0
  */ export function option(options) {
-    const { className, icon, selected } = options;
+    const { className, icon, selected, selectedClassName } = options;
     return cnb(styles({
         icon,
         selected
-    }), className);
+    }), selected && selectedClassName, className);
 }
 
 //# sourceMappingURL=optionStyles.js.map

package/dist/form/optionStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/optionStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-option\");\n\n/**\n * @since 6.0.0\n */\nexport interface OptionClassNameOptions {\n  className?: string;\n  icon: boolean;\n  selected: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function option(options: OptionClassNameOptions): string {\n  const { className, icon, selected } = options;\n\n  return cnb(styles({ icon, selected }), className);\n}\n"],"names":["cnb","bem","styles","option","options","className","icon","selected"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGH;IAEtC,OAAOJ,IAAIE,OAAO;QAAEI;QAAMC;IAAS,IAAIF;AACzC"}
+{"version":3,"sources":["../../src/form/optionStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-option\");\n\n/**\n * @since 6.0.0\n */\nexport interface OptionClassNameOptions {\n  className?: string;\n  icon: boolean;\n  selected: boolean;\n  selectedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function option(options: OptionClassNameOptions): string {\n  const { className, icon, selected, selectedClassName } = options;\n\n  return cnb(\n    styles({ icon, selected }),\n    selected && selectedClassName,\n    className\n  );\n}\n"],"names":["cnb","bem","styles","option","options","className","icon","selected","selectedClassName"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGJ;IAEzD,OAAOJ,IACLE,OAAO;QAAEI;QAAMC;IAAS,IACxBA,YAAYC,mBACZH;AAEJ"}

package/dist/form/selectUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/selectUtils.ts"],"sourcesContent":["import { Children, isValidElement, type ReactNode } from \"react\";\nimport { type MenuItemProps } from \"../menu/MenuItem.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SelectOption<Value extends string | number = string>\n  extends MenuItemProps {\n  value: Value;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getLabelFromChildren(children: ReactNode): string {\n  if (!children) {\n    return \"\";\n  }\n\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return `${children}`;\n  }\n\n  if (isValidElement<{ children: ReactNode; hidden?: boolean }>(children)) {\n    if (children.props.hidden) {\n      return \"\";\n    }\n\n    return getLabelFromChildren(children.props.children);\n  }\n\n  const childList = Children.toArray(children);\n  for (const child of childList) {\n    if (typeof child === \"string\" || typeof child === \"number\") {\n      return `${child}`[0].toUpperCase();\n    }\n\n    if (\n      isValidElement<{ children: ReactNode; hidden?: boolean }>(child) &&\n      !child.props.hidden\n    ) {\n      return getLabelFromChildren(child.props.children);\n    }\n  }\n\n  return \"\";\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\ninterface ExtractedOptions<Value extends string | number> {\n  options: readonly Value[];\n  currentOption: SelectOption<Value> | undefined;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function extractOptionsFromChildren<Value extends string | number>(\n  children: ReactNode,\n  currentValue: Value | undefined\n): ExtractedOptions<Value> {\n  let currentOption: SelectOption<Value> | undefined;\n\n  const options: Value[] = [];\n  const searchValues: string[] = [];\n  Children.forEach(children, (child) => {\n    if (!isValidElement<SelectOption<Value>>(child)) {\n      return;\n    }\n\n    const { value, disabled, children } = child.props;\n    if (typeof value !== \"undefined\") {\n      if (\n        value === currentValue ||\n        (!currentOption && typeof currentValue === \"undefined\")\n      ) {\n        currentOption = child.props;\n      }\n\n      if (!disabled) {\n        options.push(child.props.value);\n        searchValues.push(getLabelFromChildren(children));\n      }\n    } else if (children) {\n      const result = extractOptionsFromChildren(children, currentValue);\n      if (!currentOption) {\n        ({ currentOption } = result);\n      }\n\n      options.push(...result.options);\n    }\n  });\n\n  return {\n    options,\n    currentOption,\n  };\n}\n"],"names":["Children","isValidElement","getLabelFromChildren","children","props","hidden","childList","toArray","child","toUpperCase","extractOptionsFromChildren","currentValue","currentOption","options","searchValues","forEach","value","disabled","push","result"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,QAAwB,QAAQ;AAYjE;;;CAGC,GACD,SAASC,qBAAqBC,QAAmB;IAC/C,IAAI,CAACA,UAAU;QACb,OAAO;IACT;IAEA,IAAI,OAAOA,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChE,OAAO,CAAC,EAAEA,SAAS,CAAC;IACtB;IAEA,IAAIF,eAA0DE,WAAW;QACvE,IAAIA,SAASC,KAAK,CAACC,MAAM,EAAE;YACzB,OAAO;QACT;QAEA,OAAOH,qBAAqBC,SAASC,KAAK,CAACD,QAAQ;IACrD;IAEA,MAAMG,YAAYN,SAASO,OAAO,CAACJ;IACnC,KAAK,MAAMK,SAASF,UAAW;QAC7B,IAAI,OAAOE,UAAU,YAAY,OAAOA,UAAU,UAAU;YAC1D,OAAO,CAAC,EAAEA,MAAM,CAAC,CAAC,EAAE,CAACC,WAAW;QAClC;QAEA,IACER,eAA0DO,UAC1D,CAACA,MAAMJ,KAAK,CAACC,MAAM,EACnB;YACA,OAAOH,qBAAqBM,MAAMJ,KAAK,CAACD,QAAQ;QAClD;IACF;IAEA,OAAO;AACT;AAWA;;;CAGC,GACD,OAAO,SAASO,2BACdP,QAAmB,EACnBQ,YAA+B;IAE/B,IAAIC;IAEJ,MAAMC,UAAmB,EAAE;IAC3B,MAAMC,eAAyB,EAAE;IACjCd,SAASe,OAAO,CAACZ,UAAU,CAACK;QAC1B,IAAI,CAACP,eAAoCO,QAAQ;YAC/C;QACF;QAEA,MAAM,EAAEQ,KAAK,EAAEC,QAAQ,EAAEd,QAAQ,EAAE,GAAGK,MAAMJ,KAAK;QACjD,IAAI,OAAOY,UAAU,aAAa;YAChC,IACEA,UAAUL,gBACT,CAACC,iBAAiB,OAAOD,iBAAiB,aAC3C;gBACAC,gBAAgBJ,MAAMJ,KAAK;YAC7B;YAEA,IAAI,CAACa,UAAU;gBACbJ,QAAQK,IAAI,CAACV,MAAMJ,KAAK,CAACY,KAAK;gBAC9BF,aAAaI,IAAI,CAAChB,qBAAqBC;YACzC;QACF,OAAO,IAAIA,UAAU;YACnB,MAAMgB,SAAST,2BAA2BP,UAAUQ;YACpD,IAAI,CAACC,eAAe;gBACjB,CAAA,EAAEA,aAAa,EAAE,GAAGO,MAAK;YAC5B;YAEAN,QAAQK,IAAI,IAAIC,OAAON,OAAO;QAChC;IACF;IAEA,OAAO;QACLA;QACAD;IACF;AACF"}
+{"version":3,"sources":["../../src/form/selectUtils.ts"],"sourcesContent":["import { Children, isValidElement, type ReactNode } from \"react\";\nimport { type MenuItemProps } from \"../menu/MenuItem.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SelectOption<Value extends string | number = string>\n  extends MenuItemProps {\n  value: Value;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getLabelFromChildren(children: ReactNode): string {\n  if (!children) {\n    return \"\";\n  }\n\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return `${children}`;\n  }\n\n  if (isValidElement<{ children: ReactNode; hidden?: boolean }>(children)) {\n    if (children.props.hidden) {\n      return \"\";\n    }\n\n    return getLabelFromChildren(children.props.children);\n  }\n\n  const childList = Children.toArray(children);\n  for (const child of childList) {\n    if (typeof child === \"string\" || typeof child === \"number\") {\n      return `${child}`[0].toUpperCase();\n    }\n\n    if (\n      isValidElement<{ children: ReactNode; hidden?: boolean }>(child) &&\n      !child.props.hidden\n    ) {\n      return getLabelFromChildren(child.props.children);\n    }\n  }\n\n  return \"\";\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\ninterface ExtractedOptions<Value extends string | number> {\n  options: readonly Value[];\n  currentOption: SelectOption<Value> | undefined;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function extractOptionsFromChildren<Value extends string | number>(\n  children: ReactNode,\n  currentValue: Value | undefined\n): ExtractedOptions<Value> {\n  let currentOption: SelectOption<Value> | undefined;\n\n  const options: Value[] = [];\n  const searchValues: string[] = [];\n  Children.forEach(children, (child) => {\n    if (!isValidElement<SelectOption<Value>>(child)) {\n      return;\n    }\n\n    const { value, disabled, children } = child.props;\n    if (typeof value !== \"undefined\") {\n      if (\n        value === currentValue ||\n        (!currentOption && typeof currentValue === \"undefined\")\n      ) {\n        currentOption = child.props;\n      }\n\n      if (!disabled) {\n        options.push(child.props.value);\n        searchValues.push(getLabelFromChildren(children));\n      }\n    } else if (children) {\n      const result = extractOptionsFromChildren(children, currentValue);\n      if (!currentOption) {\n        ({ currentOption } = result);\n      }\n\n      options.push(...result.options);\n    }\n  });\n\n  return {\n    options,\n    currentOption,\n  };\n}\n"],"names":["Children","isValidElement","getLabelFromChildren","children","props","hidden","childList","toArray","child","toUpperCase","extractOptionsFromChildren","currentValue","currentOption","options","searchValues","forEach","value","disabled","push","result"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,QAAwB,QAAQ;AAYjE;;;CAGC,GACD,SAASC,qBAAqBC,QAAmB;IAC/C,IAAI,CAACA,UAAU;QACb,OAAO;IACT;IAEA,IAAI,OAAOA,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChE,OAAO,GAAGA,UAAU;IACtB;IAEA,IAAIF,eAA0DE,WAAW;QACvE,IAAIA,SAASC,KAAK,CAACC,MAAM,EAAE;YACzB,OAAO;QACT;QAEA,OAAOH,qBAAqBC,SAASC,KAAK,CAACD,QAAQ;IACrD;IAEA,MAAMG,YAAYN,SAASO,OAAO,CAACJ;IACnC,KAAK,MAAMK,SAASF,UAAW;QAC7B,IAAI,OAAOE,UAAU,YAAY,OAAOA,UAAU,UAAU;YAC1D,OAAO,GAAGA,OAAO,CAAC,EAAE,CAACC,WAAW;QAClC;QAEA,IACER,eAA0DO,UAC1D,CAACA,MAAMJ,KAAK,CAACC,MAAM,EACnB;YACA,OAAOH,qBAAqBM,MAAMJ,KAAK,CAACD,QAAQ;QAClD;IACF;IAEA,OAAO;AACT;AAWA;;;CAGC,GACD,OAAO,SAASO,2BACdP,QAAmB,EACnBQ,YAA+B;IAE/B,IAAIC;IAEJ,MAAMC,UAAmB,EAAE;IAC3B,MAAMC,eAAyB,EAAE;IACjCd,SAASe,OAAO,CAACZ,UAAU,CAACK;QAC1B,IAAI,CAACP,eAAoCO,QAAQ;YAC/C;QACF;QAEA,MAAM,EAAEQ,KAAK,EAAEC,QAAQ,EAAEd,QAAQ,EAAE,GAAGK,MAAMJ,KAAK;QACjD,IAAI,OAAOY,UAAU,aAAa;YAChC,IACEA,UAAUL,gBACT,CAACC,iBAAiB,OAAOD,iBAAiB,aAC3C;gBACAC,gBAAgBJ,MAAMJ,KAAK;YAC7B;YAEA,IAAI,CAACa,UAAU;gBACbJ,QAAQK,IAAI,CAACV,MAAMJ,KAAK,CAACY,KAAK;gBAC9BF,aAAaI,IAAI,CAAChB,qBAAqBC;YACzC;QACF,OAAO,IAAIA,UAAU;YACnB,MAAMgB,SAAST,2BAA2BP,UAAUQ;YACpD,IAAI,CAACC,eAAe;gBACjB,CAAA,EAAEA,aAAa,EAAE,GAAGO,MAAK;YAC5B;YAEAN,QAAQK,IAAI,IAAIC,OAAON,OAAO;QAChC;IACF;IAEA,OAAO;QACLA;QACAD;IACF;AACF"}

package/dist/form/sliderUtils.d.ts

@@ -20,7 +20,7 @@ export declare const getJumpValue: (options: JumpOptions) => number;
  * @since 6.0.0
  * @internal
  */
-type RequiredThumbProps = Pick<DraggableImplementation<HTMLElement>, "dragging" | keyof DraggableMouseEventHandlers<HTMLElement> | keyof DraggableTouchEventHandlers<HTMLElement>> & {
+type RequiredThumbProps = Pick<DraggableImplementation, "dragging" | keyof DraggableMouseEventHandlers<HTMLElement> | keyof DraggableTouchEventHandlers<HTMLElement>> & {
     ref: RefObject<HTMLSpanElement>;
 };
 /**

package/dist/form/sliderUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/sliderUtils.ts"],"sourcesContent":["import { type RefObject } from \"react\";\nimport {\n  type DraggableEventHandlers,\n  type DraggableImplementation,\n  type DraggableMouseEventHandlers,\n  type DraggableTouchEventHandlers,\n} from \"../draggable/useDraggable.js\";\nimport { type RenameKeysWithPrefix } from \"../types.js\";\nimport {\n  getClientPosition,\n  type ClientPositionEvent,\n} from \"../utils/getClientPosition.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface JumpOptions {\n  min: number;\n  max: number;\n  step: number;\n  jump: number | undefined;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const getJumpValue = (options: JumpOptions): number => {\n  const { min, max, step, jump } = options;\n\n  const steps = getRangeSteps({ min, max, step });\n  const value = jump ?? (steps / 10) * step;\n  if (Number.isInteger(step)) {\n    return Math.ceil(value);\n  }\n\n  return value;\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\ntype RequiredThumbProps = Pick<\n  DraggableImplementation<HTMLElement>,\n  | \"dragging\"\n  | keyof DraggableMouseEventHandlers<HTMLElement>\n  | keyof DraggableTouchEventHandlers<HTMLElement>\n> & { ref: RefObject<HTMLSpanElement> };\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ClosestThumbEventHandlersOptions = RenameKeysWithPrefix<\n  RequiredThumbProps,\n  \"thumb1\"\n> &\n  RenameKeysWithPrefix<RequiredThumbProps, \"thumb2\"> & {\n    vertical: boolean;\n    isRangeSlider: boolean;\n  };\n\n/**\n * NOTE: I do not need the mousemove events for this one to work.\n *\n * @since 6.0.0\n * @internal\n */\nexport const getClosestThumbEventHandlers = (\n  options: ClosestThumbEventHandlersOptions\n): DraggableEventHandlers<HTMLElement> => {\n  const {\n    thumb1Ref,\n    thumb1Dragging,\n    thumb1OnMouseUp,\n    thumb1OnMouseDown,\n    thumb1OnTouchStart,\n    thumb1OnTouchMove,\n    thumb2Ref,\n    thumb2Dragging,\n    thumb2OnMouseUp,\n    thumb2OnMouseDown,\n    thumb2OnTouchStart,\n    thumb2OnTouchMove,\n    isRangeSlider,\n    vertical,\n  } = options;\n\n  if (!isRangeSlider) {\n    return {\n      onMouseDown: thumb1OnMouseDown,\n      onMouseUp: thumb1OnMouseUp,\n      onTouchStart: thumb1OnTouchStart,\n      onTouchMove: thumb1OnTouchMove,\n    };\n  }\n\n  const isThumbOneClosest = (event: ClientPositionEvent): boolean => {\n    if (thumb2Dragging) {\n      return false;\n    }\n\n    const thumb1 = thumb1Ref.current;\n    const thumb2 = thumb2Ref.current;\n    if (!thumb1Dragging && thumb1 && thumb2) {\n      const clientPosition = getClientPosition({ event, vertical });\n      const thumb1Rect = thumb1.getBoundingClientRect();\n      const thumb2Rect = thumb2.getBoundingClientRect();\n      const thumb1Position = vertical ? thumb1Rect.y : thumb1Rect.x;\n      const thumb2Position = vertical ? thumb2Rect.y : thumb2Rect.x;\n\n      return (\n        Math.abs(clientPosition - thumb1Position) <\n        Math.abs(clientPosition - thumb2Position)\n      );\n    }\n\n    return true;\n  };\n\n  return {\n    onMouseDown(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnMouseDown(event);\n      } else {\n        thumb2OnMouseDown(event);\n      }\n    },\n    onMouseUp(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnMouseUp(event);\n      } else {\n        thumb2OnMouseUp(event);\n      }\n    },\n    onTouchStart(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnTouchStart(event);\n      } else {\n        thumb2OnTouchStart(event);\n      }\n    },\n    onTouchMove(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnTouchMove(event);\n      } else {\n        thumb2OnTouchMove(event);\n      }\n    },\n  };\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function getThumbOffset(\n  offset: number | undefined,\n  fallback: number\n): string | undefined {\n  if (typeof offset !== \"number\") {\n    return;\n  }\n\n  // the `offset` will be NaN when there are no possible steps to take because\n  // the first thumb is at the maximum value or the second thumb is at the\n  // minimum value\n  const value = Number.isNaN(offset) ? fallback : offset;\n  return `${value * 100}%`;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ThumbOffsetsOptions {\n  min: number;\n  max: number;\n  thumb1Value: number;\n  thumb1Dragging: boolean;\n  thumb1DragPercentage: number;\n  thumb2Value: number;\n  thumb2Dragging: boolean;\n  thumb2DragPercentage: number;\n  isRangeSlider: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface ThumbOffsets {\n  \"--rmd-slider-offset-1\"?: string;\n  \"--rmd-slider-offset-2\"?: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const getThumbOffsets = (options: ThumbOffsetsOptions): ThumbOffsets => {\n  const {\n    min,\n    max,\n    thumb1Value,\n    thumb1Dragging,\n    thumb1DragPercentage,\n    thumb2Value,\n    thumb2Dragging,\n    thumb2DragPercentage,\n    isRangeSlider,\n  } = options;\n  let thumb1Percentage = thumb1Dragging\n    ? thumb1DragPercentage\n    : getPercentage({ min, max, value: thumb1Value });\n\n  let thumb2Percentage: number | undefined;\n  if (isRangeSlider) {\n    const percentage = getPercentage({ min, max, value: thumb2Value });\n\n    thumb1Percentage = Math.min(thumb1Percentage, percentage);\n    thumb2Percentage = thumb2Dragging\n      ? Math.max(thumb1Percentage, thumb2DragPercentage)\n      : percentage;\n  }\n\n  return {\n    \"--rmd-slider-offset-1\": getThumbOffset(thumb1Percentage, 0),\n    \"--rmd-slider-offset-2\": getThumbOffset(thumb2Percentage, 1),\n  };\n};\n"],"names":["getClientPosition","getPercentage","getRangeSteps","getJumpValue","options","min","max","step","jump","steps","value","Number","isInteger","Math","ceil","getClosestThumbEventHandlers","thumb1Ref","thumb1Dragging","thumb1OnMouseUp","thumb1OnMouseDown","thumb1OnTouchStart","thumb1OnTouchMove","thumb2Ref","thumb2Dragging","thumb2OnMouseUp","thumb2OnMouseDown","thumb2OnTouchStart","thumb2OnTouchMove","isRangeSlider","vertical","onMouseDown","onMouseUp","onTouchStart","onTouchMove","isThumbOneClosest","event","thumb1","current","thumb2","clientPosition","thumb1Rect","getBoundingClientRect","thumb2Rect","thumb1Position","y","x","thumb2Position","abs","getThumbOffset","offset","fallback","isNaN","getThumbOffsets","thumb1Value","thumb1DragPercentage","thumb2Value","thumb2DragPercentage","thumb1Percentage","thumb2Percentage","percentage"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/sliderUtils.ts"],"sourcesContent":["import { type RefObject } from \"react\";\nimport {\n  type DraggableEventHandlers,\n  type DraggableImplementation,\n  type DraggableMouseEventHandlers,\n  type DraggableTouchEventHandlers,\n} from \"../draggable/useDraggable.js\";\nimport { type RenameKeysWithPrefix } from \"../types.js\";\nimport {\n  getClientPosition,\n  type ClientPositionEvent,\n} from \"../utils/getClientPosition.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface JumpOptions {\n  min: number;\n  max: number;\n  step: number;\n  jump: number | undefined;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const getJumpValue = (options: JumpOptions): number => {\n  const { min, max, step, jump } = options;\n\n  const steps = getRangeSteps({ min, max, step });\n  const value = jump ?? (steps / 10) * step;\n  if (Number.isInteger(step)) {\n    return Math.ceil(value);\n  }\n\n  return value;\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\ntype RequiredThumbProps = Pick<\n  DraggableImplementation,\n  | \"dragging\"\n  | keyof DraggableMouseEventHandlers<HTMLElement>\n  | keyof DraggableTouchEventHandlers<HTMLElement>\n> & { ref: RefObject<HTMLSpanElement> };\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ClosestThumbEventHandlersOptions = RenameKeysWithPrefix<\n  RequiredThumbProps,\n  \"thumb1\"\n> &\n  RenameKeysWithPrefix<RequiredThumbProps, \"thumb2\"> & {\n    vertical: boolean;\n    isRangeSlider: boolean;\n  };\n\n/**\n * NOTE: I do not need the mousemove events for this one to work.\n *\n * @since 6.0.0\n * @internal\n */\nexport const getClosestThumbEventHandlers = (\n  options: ClosestThumbEventHandlersOptions\n): DraggableEventHandlers<HTMLElement> => {\n  const {\n    thumb1Ref,\n    thumb1Dragging,\n    thumb1OnMouseUp,\n    thumb1OnMouseDown,\n    thumb1OnTouchStart,\n    thumb1OnTouchMove,\n    thumb2Ref,\n    thumb2Dragging,\n    thumb2OnMouseUp,\n    thumb2OnMouseDown,\n    thumb2OnTouchStart,\n    thumb2OnTouchMove,\n    isRangeSlider,\n    vertical,\n  } = options;\n\n  if (!isRangeSlider) {\n    return {\n      onMouseDown: thumb1OnMouseDown,\n      onMouseUp: thumb1OnMouseUp,\n      onTouchStart: thumb1OnTouchStart,\n      onTouchMove: thumb1OnTouchMove,\n    };\n  }\n\n  const isThumbOneClosest = (event: ClientPositionEvent): boolean => {\n    if (thumb2Dragging) {\n      return false;\n    }\n\n    const thumb1 = thumb1Ref.current;\n    const thumb2 = thumb2Ref.current;\n    if (!thumb1Dragging && thumb1 && thumb2) {\n      const clientPosition = getClientPosition({ event, vertical });\n      const thumb1Rect = thumb1.getBoundingClientRect();\n      const thumb2Rect = thumb2.getBoundingClientRect();\n      const thumb1Position = vertical ? thumb1Rect.y : thumb1Rect.x;\n      const thumb2Position = vertical ? thumb2Rect.y : thumb2Rect.x;\n\n      return (\n        Math.abs(clientPosition - thumb1Position) <\n        Math.abs(clientPosition - thumb2Position)\n      );\n    }\n\n    return true;\n  };\n\n  return {\n    onMouseDown(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnMouseDown(event);\n      } else {\n        thumb2OnMouseDown(event);\n      }\n    },\n    onMouseUp(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnMouseUp(event);\n      } else {\n        thumb2OnMouseUp(event);\n      }\n    },\n    onTouchStart(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnTouchStart(event);\n      } else {\n        thumb2OnTouchStart(event);\n      }\n    },\n    onTouchMove(event) {\n      if (isThumbOneClosest(event)) {\n        thumb1OnTouchMove(event);\n      } else {\n        thumb2OnTouchMove(event);\n      }\n    },\n  };\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function getThumbOffset(\n  offset: number | undefined,\n  fallback: number\n): string | undefined {\n  if (typeof offset !== \"number\") {\n    return;\n  }\n\n  // the `offset` will be NaN when there are no possible steps to take because\n  // the first thumb is at the maximum value or the second thumb is at the\n  // minimum value\n  const value = Number.isNaN(offset) ? fallback : offset;\n  return `${value * 100}%`;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ThumbOffsetsOptions {\n  min: number;\n  max: number;\n  thumb1Value: number;\n  thumb1Dragging: boolean;\n  thumb1DragPercentage: number;\n  thumb2Value: number;\n  thumb2Dragging: boolean;\n  thumb2DragPercentage: number;\n  isRangeSlider: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface ThumbOffsets {\n  \"--rmd-slider-offset-1\"?: string;\n  \"--rmd-slider-offset-2\"?: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const getThumbOffsets = (options: ThumbOffsetsOptions): ThumbOffsets => {\n  const {\n    min,\n    max,\n    thumb1Value,\n    thumb1Dragging,\n    thumb1DragPercentage,\n    thumb2Value,\n    thumb2Dragging,\n    thumb2DragPercentage,\n    isRangeSlider,\n  } = options;\n  let thumb1Percentage = thumb1Dragging\n    ? thumb1DragPercentage\n    : getPercentage({ min, max, value: thumb1Value });\n\n  let thumb2Percentage: number | undefined;\n  if (isRangeSlider) {\n    const percentage = getPercentage({ min, max, value: thumb2Value });\n\n    thumb1Percentage = Math.min(thumb1Percentage, percentage);\n    thumb2Percentage = thumb2Dragging\n      ? Math.max(thumb1Percentage, thumb2DragPercentage)\n      : percentage;\n  }\n\n  return {\n    \"--rmd-slider-offset-1\": getThumbOffset(thumb1Percentage, 0),\n    \"--rmd-slider-offset-2\": getThumbOffset(thumb2Percentage, 1),\n  };\n};\n"],"names":["getClientPosition","getPercentage","getRangeSteps","getJumpValue","options","min","max","step","jump","steps","value","Number","isInteger","Math","ceil","getClosestThumbEventHandlers","thumb1Ref","thumb1Dragging","thumb1OnMouseUp","thumb1OnMouseDown","thumb1OnTouchStart","thumb1OnTouchMove","thumb2Ref","thumb2Dragging","thumb2OnMouseUp","thumb2OnMouseDown","thumb2OnTouchStart","thumb2OnTouchMove","isRangeSlider","vertical","onMouseDown","onMouseUp","onTouchStart","onTouchMove","isThumbOneClosest","event","thumb1","current","thumb2","clientPosition","thumb1Rect","getBoundingClientRect","thumb2Rect","thumb1Position","y","x","thumb2Position","abs","getThumbOffset","offset","fallback","isNaN","getThumbOffsets","thumb1Value","thumb1DragPercentage","thumb2Value","thumb2DragPercentage","thumb1Percentage","thumb2Percentage","percentage"],"mappings":"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"}

package/dist/form/textFieldContainerStyles.d.ts

@@ -20,8 +20,6 @@ export interface TextFieldContainerClassNameOptions extends FormThemeOptions, Fo
     /** @defaultValue `false` */
     inline?: boolean;
     /** @defaultValue `false` */
-    stretch?: boolean;
-    /** @defaultValue `false` */
     label?: boolean;
     /** @defaultValue `false` */
     leftAddon?: boolean;

package/dist/form/textFieldContainerStyles.js

@@ -5,7 +5,7 @@ const styles = bem("rmd-text-field-container");
 /**
  * @since 6.0.0
  */ export function textFieldContainer(options = {}) {
-    const { className, theme = "outline", dense = false, error = false, label = false, active = false, inline = false, stretch = false, readOnly = false, disabled = false, leftAddon = false, rightAddon = false, underlineDirection = "left" } = options;
+    const { className, theme = "outline", dense, error, label, active, inline, readOnly, disabled, leftAddon, rightAddon, underlineDirection = "left" } = options;
     const underline = theme === "underline";
     const outline = theme === "outline";
     const filled = theme === "filled";
@@ -20,7 +20,6 @@ const styles = bem("rmd-text-field-container");
     return cnb(styles({
         error,
         inline,
-        stretch,
         filled,
         outline,
         disabled: disabled || readOnly,

package/dist/form/textFieldContainerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/textFieldContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type TextColor, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates, type FormThemeOptions } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-text-field-height\"?: string | number;\n    \"--rmd-text-field-padding-left\"?: string | number;\n    \"--rmd-text-field-padding-right\"?: string | number;\n    \"--rmd-text-field-padding-top\"?: string | number;\n    \"--rmd-text-field-border-color\"?: string;\n    \"--rmd-text-field-hover-border-color\"?: string;\n    \"--rmd-text-field-filled-color\"?: string;\n    \"--rmd-form-addon-top\"?: string | number;\n    \"--rmd-form-addon-margin-top\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-text-field-container\");\n\n/** @since 6.0.0 */\nexport interface TextFieldContainerClassNameOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  inline?: boolean;\n\n  /** @defaultValue `false` */\n  stretch?: boolean;\n\n  /** @defaultValue `false` */\n  label?: boolean;\n\n  /** @defaultValue `false` */\n  leftAddon?: boolean;\n\n  /** @defaultValue `false` */\n  rightAddon?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function textFieldContainer(\n  options: TextFieldContainerClassNameOptions = {}\n): string {\n  const {\n    className,\n    theme = \"outline\",\n    dense = false,\n    error = false,\n    label = false,\n    active = false,\n    inline = false,\n    stretch = false,\n    readOnly = false,\n    disabled = false,\n    leftAddon = false,\n    rightAddon = false,\n    underlineDirection = \"left\",\n  } = options;\n  const underline = theme === \"underline\";\n  const outline = theme === \"outline\";\n  const filled = theme === \"filled\";\n  const isUnderlined = underline || filled;\n  const isOutlineActive = outline && active;\n\n  let textColor: ThemeColor | TextColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  }\n\n  return cnb(\n    styles({\n      error,\n      inline,\n      stretch,\n      filled,\n      outline,\n      disabled: disabled || readOnly,\n      hoverable: !disabled && !isOutlineActive,\n      label: label && !dense,\n      dense: !label && dense,\n      \"dense-label\": label && dense,\n      \"dense-placeholder\": !label && dense && isUnderlined,\n      \"outline-active\": isOutlineActive,\n      \"outline-error\": outline && error,\n      \"outline-left\": outline && leftAddon,\n      \"outline-right\": outline && rightAddon,\n      underline: isUnderlined,\n      \"underline-placeholder\": isUnderlined && !label,\n      \"underline-placeholder-only\":\n        isUnderlined && !label && !leftAddon && !rightAddon,\n      \"underline-labelled\": isUnderlined && label,\n      \"underline-active\": isUnderlined && active,\n      [`underline-${underlineDirection}`]: isUnderlined,\n      \"underline-left-addon\": isUnderlined && leftAddon,\n      \"underline-right-addon\": isUnderlined && rightAddon,\n    }),\n    cssUtils({ textColor }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","textFieldContainer","options","className","theme","dense","error","label","active","inline","stretch","readOnly","disabled","leftAddon","rightAddon","underlineDirection","underline","outline","filled","isUnderlined","isOutlineActive","textColor","hoverable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyC,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAiBtC,MAAMC,SAASD,IAAI;AA2BnB;;CAEC,GACD,OAAO,SAASE,mBACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,qBAAqB,MAAM,EAC5B,GAAGb;IACJ,MAAMc,YAAYZ,UAAU;IAC5B,MAAMa,UAAUb,UAAU;IAC1B,MAAMc,SAASd,UAAU;IACzB,MAAMe,eAAeH,aAAaE;IAClC,MAAME,kBAAkBH,WAAWT;IAEnC,IAAIa;IACJ,IAAIT,UAAU;QACZS,YAAY;IACd,OAAO,IAAIf,OAAO;QAChBe,YAAY;IACd;IAEA,OAAOxB,IACLG,OAAO;QACLM;QACAG;QACAC;QACAQ;QACAD;QACAL,UAAUA,YAAYD;QACtBW,WAAW,CAACV,YAAY,CAACQ;QACzBb,OAAOA,SAAS,CAACF;QACjBA,OAAO,CAACE,SAASF;QACjB,eAAeE,SAASF;QACxB,qBAAqB,CAACE,SAASF,SAASc;QACxC,kBAAkBC;QAClB,iBAAiBH,WAAWX;QAC5B,gBAAgBW,WAAWJ;QAC3B,iBAAiBI,WAAWH;QAC5BE,WAAWG;QACX,yBAAyBA,gBAAgB,CAACZ;QAC1C,8BACEY,gBAAgB,CAACZ,SAAS,CAACM,aAAa,CAACC;QAC3C,sBAAsBK,gBAAgBZ;QACtC,oBAAoBY,gBAAgBX;QACpC,CAAC,CAAC,UAAU,EAAEO,mBAAmB,CAAC,CAAC,EAAEI;QACrC,wBAAwBA,gBAAgBN;QACxC,yBAAyBM,gBAAgBL;IAC3C,IACAhB,SAAS;QAAEuB;IAAU,IACrBlB;AAEJ"}
+{"version":3,"sources":["../../src/form/textFieldContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type TextColor, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type FormComponentStates, type FormThemeOptions } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-text-field-height\"?: string | number;\n    \"--rmd-text-field-padding-left\"?: string | number;\n    \"--rmd-text-field-padding-right\"?: string | number;\n    \"--rmd-text-field-padding-top\"?: string | number;\n    \"--rmd-text-field-border-color\"?: string;\n    \"--rmd-text-field-hover-border-color\"?: string;\n    \"--rmd-text-field-filled-color\"?: string;\n    \"--rmd-form-addon-top\"?: string | number;\n    \"--rmd-form-addon-margin-top\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-text-field-container\");\n\n/** @since 6.0.0 */\nexport interface TextFieldContainerClassNameOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  inline?: boolean;\n\n  /** @defaultValue `false` */\n  label?: boolean;\n\n  /** @defaultValue `false` */\n  leftAddon?: boolean;\n\n  /** @defaultValue `false` */\n  rightAddon?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function textFieldContainer(\n  options: TextFieldContainerClassNameOptions = {}\n): string {\n  const {\n    className,\n    theme = \"outline\",\n    dense,\n    error,\n    label,\n    active,\n    inline,\n    readOnly,\n    disabled,\n    leftAddon,\n    rightAddon,\n    underlineDirection = \"left\",\n  } = options;\n  const underline = theme === \"underline\";\n  const outline = theme === \"outline\";\n  const filled = theme === \"filled\";\n  const isUnderlined = underline || filled;\n  const isOutlineActive = outline && active;\n\n  let textColor: ThemeColor | TextColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  }\n\n  return cnb(\n    styles({\n      error,\n      inline,\n      filled,\n      outline,\n      disabled: disabled || readOnly,\n      hoverable: !disabled && !isOutlineActive,\n      label: label && !dense,\n      dense: !label && dense,\n      \"dense-label\": label && dense,\n      \"dense-placeholder\": !label && dense && isUnderlined,\n      \"outline-active\": isOutlineActive,\n      \"outline-error\": outline && error,\n      \"outline-left\": outline && leftAddon,\n      \"outline-right\": outline && rightAddon,\n      underline: isUnderlined,\n      \"underline-placeholder\": isUnderlined && !label,\n      \"underline-placeholder-only\":\n        isUnderlined && !label && !leftAddon && !rightAddon,\n      \"underline-labelled\": isUnderlined && label,\n      \"underline-active\": isUnderlined && active,\n      [`underline-${underlineDirection}`]: isUnderlined,\n      \"underline-left-addon\": isUnderlined && leftAddon,\n      \"underline-right-addon\": isUnderlined && rightAddon,\n    }),\n    cssUtils({ textColor }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","textFieldContainer","options","className","theme","dense","error","label","active","inline","readOnly","disabled","leftAddon","rightAddon","underlineDirection","underline","outline","filled","isUnderlined","isOutlineActive","textColor","hoverable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyC,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAiBtC,MAAMC,SAASD,IAAI;AAwBnB;;CAEC,GACD,OAAO,SAASE,mBACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,qBAAqB,MAAM,EAC5B,GAAGZ;IACJ,MAAMa,YAAYX,UAAU;IAC5B,MAAMY,UAAUZ,UAAU;IAC1B,MAAMa,SAASb,UAAU;IACzB,MAAMc,eAAeH,aAAaE;IAClC,MAAME,kBAAkBH,WAAWR;IAEnC,IAAIY;IACJ,IAAIT,UAAU;QACZS,YAAY;IACd,OAAO,IAAId,OAAO;QAChBc,YAAY;IACd;IAEA,OAAOvB,IACLG,OAAO;QACLM;QACAG;QACAQ;QACAD;QACAL,UAAUA,YAAYD;QACtBW,WAAW,CAACV,YAAY,CAACQ;QACzBZ,OAAOA,SAAS,CAACF;QACjBA,OAAO,CAACE,SAASF;QACjB,eAAeE,SAASF;QACxB,qBAAqB,CAACE,SAASF,SAASa;QACxC,kBAAkBC;QAClB,iBAAiBH,WAAWV;QAC5B,gBAAgBU,WAAWJ;QAC3B,iBAAiBI,WAAWH;QAC5BE,WAAWG;QACX,yBAAyBA,gBAAgB,CAACX;QAC1C,8BACEW,gBAAgB,CAACX,SAAS,CAACK,aAAa,CAACC;QAC3C,sBAAsBK,gBAAgBX;QACtC,oBAAoBW,gBAAgBV;QACpC,CAAC,CAAC,UAAU,EAAEM,oBAAoB,CAAC,EAAEI;QACrC,wBAAwBA,gBAAgBN;QACxC,yBAAyBM,gBAAgBL;IAC3C,IACAf,SAAS;QAAEsB;IAAU,IACrBjB;AAEJ"}

package/dist/form/types.d.ts

@@ -73,7 +73,7 @@ export interface FormComponentStates {
  * @see https://html.spec.whatwg.org/multipage/forms.html#autofill
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
  */
-export type AutocompleteValue = "off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tek-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
+export type AutocompleteAttributeValue = "off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tek-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
 /**
  * @since 6.0.0
  */
@@ -110,11 +110,11 @@ export interface UserAgentAutocompleteProps {
      *
      * @see https://html.spec.whatwg.org/multipage/forms.html#autofill
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
-     * @see {@link AutocompleteValue}
+     * @see {@link AutocompleteAttributeValue}
      * @see {@link autoComplete}
      * @see {@link UserAgentAutocompleteProps.name}
      */
-    autoCompleteValue?: AutocompleteValue;
+    autoCompleteValue?: AutocompleteAttributeValue;
     /**
      * @see {@link autoCompleteValue}
      * @defaultValue `autoCompleteValue`
@@ -354,13 +354,6 @@ export interface TextFieldContainerOptions extends FormThemeOptions, FormCompone
      * @defaultValue `false`
      */
     inline?: boolean;
-    /**
-     * Set this to `true` if this component should stretch to fill a flex or grid
-     * container using `flex: 1 1 auto`.
-     *
-     * @defaultValue `false`
-     */
-    stretch?: boolean;
     /**
      * This should generally be an icon or a button that will be placed before the
      * `TextField` or `TextArea`.

package/dist/form/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-active-color\"?: string;\n    \"--rmd-form-focus-color\"?: string;\n  }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n *   colors.\n * - \"underline\" - display with only an underline that gains the form active\n *   color and animates from the left or right to the other side when the field\n *   is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n *   slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n *   active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n  /**\n   * The current theme type.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n\n  /**\n   * The current underline direction.\n   *\n   * @defaultValue `\"left\"`\n   */\n  underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n  /**\n   * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n   * is set to `true` in the Sass configuration.\n   *\n   * Since the `checked` state only changes for the radio that has been clicked,\n   * the previously checked radio would also be shown as checked with no way of\n   * fixing it without controlling the radio component. When this flag is\n   * enabled, the checked icons and state are handled through css instead of\n   * `useState`.\n   *\n   * @defaultValue `true`\n   */\n  uncontrolledToggles: boolean;\n}\n\nexport interface FormComponentStates {\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  readOnly?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutocompleteValue =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level1\"\n  | \"address-level2\"\n  | \"address-level3\"\n  | \"address-level4\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tek-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\n/**\n * @since 6.0.0\n */\nexport interface UserAgentAutocompleteProps {\n  /**\n   * Set this to enable additional autocompletion suggestions for a user for\n   * different form fields. Using this prop will update the\n   * {@link UserAgentAutocompleteProps.name} and {@link autoComplete} to default to\n   * this value.\n   *\n   * @example\n   * ```tsx\n   * <Form>\n   *   <TextField\n   *     label=\"Enter your credit card number\"\n   *     autoCompleteValue=\"cc-number\"\n   *     {...creditCardProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <TextField\n   *     label=\"Name on card\"\n   *     autoCompleteValue=\"cc-name\"\n   *     {...creditCardNameProps}\n   *   />\n   *   <TextField\n   *     label=\"Security code\"\n   *     autoCompleteValue=\"cc-csc\"\n   *     {...securityCodeProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <Button type=\"submit\">Submit</Button>\n   * </Form>\n   * ```\n   *\n   * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   * @see {@link AutocompleteValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutocompleteProps.name}\n   */\n  autoCompleteValue?: AutocompleteValue;\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the message should gain the error state which changes the text\n   * color to `red` by default.\n   *\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * The current theme for the related text field. This is really only used to\n   * match the current horizontal padding of the text field.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n    FormMessageClassNameOptions {\n  /**\n   * If this component is acting as a form-level error message handler, the role\n   * should be updated to be `\"alert\"` for additional accessibility.\n   *\n   * Note: when creating a form-level error message handler, the messages should\n   * no longer appear as the user types and instead once the user tries to\n   * submit the form. Having an alert role disrupts normal screen reader\n   * behavior by immediately reading changes in this element.\n   *\n   * @defaultValue `undefined`\n   */\n  role?: \"alert\";\n\n  /**\n   * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n   * should normally only be disabled if using a custom error message wrapper or\n   * the counter behavior is not being used. To get correct alignments of the\n   * message and counter, the `children` must be wrapped in some element and\n   * cannot be plain test.\n   *\n   * Note: this will always be considered `true` if the `role` is set to\n   * `\"alert\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * An optional style to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   */\n  messageStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the `<p>` tag that surrounds the\n   * `children`. This will not be used if `role=\"alert\"` or\n   * `disableWrap={true}`.\n   */\n  messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n *   {errorMessage}\n *   <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n  /**\n   * The current length of the value in the related text field.\n   */\n  length: number;\n\n  /**\n   * The max length allowed for the value in the related text field.\n   */\n  maxLength: number;\n\n  /**\n   * An optional style to apply to the counter wrapper element.\n   */\n  counterStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the counter wrapper element.\n   */\n  counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n  extends FormMessageProps,\n    FormMessageInputLengthCounterProps {}\n\n/**\n * @since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n  length?: never;\n  maxLength?: never;\n  counterStyle?: never;\n  counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<\n    FormMessageProps & Partial<FormMessageInputLengthCounterProps>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Any props (and an optional ref) to provide to the `<div>` surrounding the\n   * children and `FormMessage` component.\n   *\n   * Note: This will not be used if the `messageProps` are not provided since\n   * only the `children` will be returned without the container.\n   */\n  messageContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n}\n\n/** @since 6.0.0 */\nexport interface LabelClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to remove the `gap` style from the label.\n   *\n   * @see `$label-gap`\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n   * spec enabled. This updates the floating styles to match the smaller height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the error color.\n   *\n   * @see `$error-color`\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the active color.\n   *\n   * @see `$active-color`\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * Set this to `true` if the label should gain `flex-direction: column`\n   * styling.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to be the disabled color.\n   *\n   * @see `$disabled-color`\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to true when label can floating above an input, textarea, or\n   * select inside of a `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * Set this to true when label is currently floating above an input,\n   * textarea, or selected inside of a `TextFieldContainer`.\n   *\n   * @see {@link active}\n   * @defaultValue `active`\n   */\n  floatingActive?: boolean;\n\n  /**\n   * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n   * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n   * be applied.\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inactive?: boolean;\n}\n\nexport interface LabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement>,\n    LabelClassNameOptions {}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Boolean if the addon should be presentational only and prevent pointer\n   * events.\n   *\n   * @defaultValue `false`\n   */\n  pointerEvents?: boolean;\n}\n\n/**\n * @since 6.0.0 Added support for `leftAddonProps` and\n * `rightAddonProps`.\n */\nexport interface TextFieldContainerOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  /**\n   * Set this to `true` to enable the dense spec which reduces the height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to change the style from `display: flex` to\n   * `display: inline-flex`.\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * Set this to `true` if this component should stretch to fill a flex or grid\n   * container using `flex: 1 1 auto`.\n   *\n   * @defaultValue `false`\n   */\n  stretch?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed before the\n   * `TextField` or `TextArea`.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n   *\n   * @since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableLeftAddonStyles?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed after the\n   * `TextField` or `TextArea`.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n   *\n   * @since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n  extends TextFieldContainerOptions,\n    FormMessageContainerExtension {\n  /**\n   * An optional floating label to use with the text field. A label is generally\n   * recommended for accessibility, but can be omitted if an `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any additional props and/or ref that should be passed to the `<label>`\n   * element when a {@link label} is provided.\n   *\n   * @example\n   * ```tsx\n   * labelProps={{\n   *   ref: labelRef,\n   *   style: {},\n   *   className: \"some-custom-class-name\",\n   *   onClick: (event) => {\n   *     // do something\n   *   }\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelProps, HTMLLabelElement>;\n\n  /**\n   * A convenience prop to apply a custom style to a label. This is equivalent\n   * to:\n   *\n   * ```ts\n   * labelProps={{\n   *   style: // some style here\n   * }}\n   * ```\n   */\n  labelStyle?: CSSProperties;\n\n  /**\n   * A convenience prop to apply a custom className to a label. This is\n   * equivalent to:\n   *\n   * ```ts\n   * labelProps={{\n   *   className: \"some-class-name\",\n   * }}\n   * ```\n   */\n  labelClassName?: string;\n}\n"],"names":[],"mappings":"AAihBA,WAmDC"}
+{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-active-color\"?: string;\n    \"--rmd-form-focus-color\"?: string;\n  }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n *   colors.\n * - \"underline\" - display with only an underline that gains the form active\n *   color and animates from the left or right to the other side when the field\n *   is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n *   slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n *   active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n  /**\n   * The current theme type.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n\n  /**\n   * The current underline direction.\n   *\n   * @defaultValue `\"left\"`\n   */\n  underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n  /**\n   * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n   * is set to `true` in the Sass configuration.\n   *\n   * Since the `checked` state only changes for the radio that has been clicked,\n   * the previously checked radio would also be shown as checked with no way of\n   * fixing it without controlling the radio component. When this flag is\n   * enabled, the checked icons and state are handled through css instead of\n   * `useState`.\n   *\n   * @defaultValue `true`\n   */\n  uncontrolledToggles: boolean;\n}\n\nexport interface FormComponentStates {\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  readOnly?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutocompleteAttributeValue =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level1\"\n  | \"address-level2\"\n  | \"address-level3\"\n  | \"address-level4\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tek-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\n/**\n * @since 6.0.0\n */\nexport interface UserAgentAutocompleteProps {\n  /**\n   * Set this to enable additional autocompletion suggestions for a user for\n   * different form fields. Using this prop will update the\n   * {@link UserAgentAutocompleteProps.name} and {@link autoComplete} to default to\n   * this value.\n   *\n   * @example\n   * ```tsx\n   * <Form>\n   *   <TextField\n   *     label=\"Enter your credit card number\"\n   *     autoCompleteValue=\"cc-number\"\n   *     {...creditCardProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <TextField\n   *     label=\"Name on card\"\n   *     autoCompleteValue=\"cc-name\"\n   *     {...creditCardNameProps}\n   *   />\n   *   <TextField\n   *     label=\"Security code\"\n   *     autoCompleteValue=\"cc-csc\"\n   *     {...securityCodeProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <Button type=\"submit\">Submit</Button>\n   * </Form>\n   * ```\n   *\n   * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   * @see {@link AutocompleteAttributeValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutocompleteProps.name}\n   */\n  autoCompleteValue?: AutocompleteAttributeValue;\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the message should gain the error state which changes the text\n   * color to `red` by default.\n   *\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * The current theme for the related text field. This is really only used to\n   * match the current horizontal padding of the text field.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n    FormMessageClassNameOptions {\n  /**\n   * If this component is acting as a form-level error message handler, the role\n   * should be updated to be `\"alert\"` for additional accessibility.\n   *\n   * Note: when creating a form-level error message handler, the messages should\n   * no longer appear as the user types and instead once the user tries to\n   * submit the form. Having an alert role disrupts normal screen reader\n   * behavior by immediately reading changes in this element.\n   *\n   * @defaultValue `undefined`\n   */\n  role?: \"alert\";\n\n  /**\n   * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n   * should normally only be disabled if using a custom error message wrapper or\n   * the counter behavior is not being used. To get correct alignments of the\n   * message and counter, the `children` must be wrapped in some element and\n   * cannot be plain test.\n   *\n   * Note: this will always be considered `true` if the `role` is set to\n   * `\"alert\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * An optional style to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   */\n  messageStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the `<p>` tag that surrounds the\n   * `children`. This will not be used if `role=\"alert\"` or\n   * `disableWrap={true}`.\n   */\n  messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n *   {errorMessage}\n *   <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n  /**\n   * The current length of the value in the related text field.\n   */\n  length: number;\n\n  /**\n   * The max length allowed for the value in the related text field.\n   */\n  maxLength: number;\n\n  /**\n   * An optional style to apply to the counter wrapper element.\n   */\n  counterStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the counter wrapper element.\n   */\n  counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n  extends FormMessageProps,\n    FormMessageInputLengthCounterProps {}\n\n/**\n * @since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n  length?: never;\n  maxLength?: never;\n  counterStyle?: never;\n  counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<\n    FormMessageProps & Partial<FormMessageInputLengthCounterProps>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Any props (and an optional ref) to provide to the `<div>` surrounding the\n   * children and `FormMessage` component.\n   *\n   * Note: This will not be used if the `messageProps` are not provided since\n   * only the `children` will be returned without the container.\n   */\n  messageContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n}\n\n/** @since 6.0.0 */\nexport interface LabelClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to remove the `gap` style from the label.\n   *\n   * @see `$label-gap`\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n   * spec enabled. This updates the floating styles to match the smaller height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the error color.\n   *\n   * @see `$error-color`\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the active color.\n   *\n   * @see `$active-color`\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * Set this to `true` if the label should gain `flex-direction: column`\n   * styling.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to be the disabled color.\n   *\n   * @see `$disabled-color`\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to true when label can floating above an input, textarea, or\n   * select inside of a `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * Set this to true when label is currently floating above an input,\n   * textarea, or selected inside of a `TextFieldContainer`.\n   *\n   * @see {@link active}\n   * @defaultValue `active`\n   */\n  floatingActive?: boolean;\n\n  /**\n   * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n   * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n   * be applied.\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inactive?: boolean;\n}\n\nexport interface LabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement>,\n    LabelClassNameOptions {}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Boolean if the addon should be presentational only and prevent pointer\n   * events.\n   *\n   * @defaultValue `false`\n   */\n  pointerEvents?: boolean;\n}\n\n/**\n * @since 6.0.0 Added support for `leftAddonProps` and\n * `rightAddonProps`.\n */\nexport interface TextFieldContainerOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  /**\n   * Set this to `true` to enable the dense spec which reduces the height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to change the style from `display: flex` to\n   * `display: inline-flex`.\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed before the\n   * `TextField` or `TextArea`.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n   *\n   * @since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableLeftAddonStyles?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed after the\n   * `TextField` or `TextArea`.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n   *\n   * @since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n  extends TextFieldContainerOptions,\n    FormMessageContainerExtension {\n  /**\n   * An optional floating label to use with the text field. A label is generally\n   * recommended for accessibility, but can be omitted if an `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any additional props and/or ref that should be passed to the `<label>`\n   * element when a {@link label} is provided.\n   *\n   * @example\n   * ```tsx\n   * labelProps={{\n   *   ref: labelRef,\n   *   style: {},\n   *   className: \"some-custom-class-name\",\n   *   onClick: (event) => {\n   *     // do something\n   *   }\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelProps, HTMLLabelElement>;\n\n  /**\n   * A convenience prop to apply a custom style to a label. This is equivalent\n   * to:\n   *\n   * ```ts\n   * labelProps={{\n   *   style: // some style here\n   * }}\n   * ```\n   */\n  labelStyle?: CSSProperties;\n\n  /**\n   * A convenience prop to apply a custom className to a label. This is\n   * equivalent to:\n   *\n   * ```ts\n   * labelProps={{\n   *   className: \"some-class-name\",\n   * }}\n   * ```\n   */\n  labelClassName?: string;\n}\n"],"names":[],"mappings":"AAygBA,WAmDC"}

package/dist/form/useCheckboxGroup.d.ts

@@ -46,64 +46,64 @@ export interface CheckboxGroupOptions<V> {
 }
 /** @since 6.0.0 */
 export interface CheckboxGroupImplementation<V extends string> {
-    reset(): void;
+    reset: () => void;
     checkedValues: ReadonlySet<V>;
     setCheckedValues: UseStateSetter<ReadonlySet<V>>;
-    getCheckboxProps(value: V): {
+    getCheckboxProps: (value: V) => {
         name: string;
         value: V;
         checked: boolean;
-        onChange(): void;
+        onChange: () => void;
     };
 }
 /** @since 6.0.0 */
 export interface IndeterminateCheckboxGroupImplementation<V extends string> extends CheckboxGroupImplementation<V> {
-    getIndeterminateProps(): {
+    getIndeterminateProps: () => {
         "aria-checked": "mixed" | undefined;
         name: string;
         checked: boolean;
         indeterminate: boolean;
-        onChange(): void;
+        onChange: () => void;
     };
 }
 /** @since 6.0.0 */
 export interface MenuItemCheckboxGroupImplementation<V extends string> {
-    reset(): void;
+    reset: () => void;
     checkedValues: ReadonlySet<V>;
     setCheckedValues: UseStateSetter<ReadonlySet<V>>;
-    getCheckboxProps(value: V): {
+    getCheckboxProps: (value: V) => {
         checked: boolean;
-        onCheckedChange(): void;
+        onCheckedChange: () => void;
     };
 }
 /** @since 6.0.0 */
 export interface IndeterminateMenuItemCheckboxGroupImplementation<V extends string> extends MenuItemCheckboxGroupImplementation<V> {
-    getIndeterminateProps(): {
+    getIndeterminateProps: () => {
         "aria-checked": "mixed" | undefined;
         checked: boolean;
         indeterminate: boolean;
-        onCheckedChange(): void;
+        onCheckedChange: () => void;
     };
 }
 /** @since 6.0.0 */
 export interface CombinedCheckboxGroupReturnValue<V extends string> {
-    reset(): void;
+    reset: () => void;
     checkedValues: ReadonlySet<V>;
     setCheckedValues: UseStateSetter<ReadonlySet<V>>;
-    getCheckboxProps(value: V): {
+    getCheckboxProps: (value: V) => {
         name?: string;
         value?: V;
         checked: boolean;
-        onChange?(): void;
-        onCheckedChange?(): void;
+        onChange?: () => void;
+        onCheckedChange?: () => void;
     };
-    getIndeterminateProps?(): {
+    getIndeterminateProps?: () => {
         "aria-checked": "mixed" | undefined;
         name?: string;
         checked: boolean;
         indeterminate: boolean;
-        onChange?(): void;
-        onCheckedChange?(): void;
+        onChange?: () => void;
+        onCheckedChange?: () => void;
     };
 }
 /**

package/dist/form/useCheckboxGroup.js

@@ -1,13 +1,11 @@
 "use client";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useRef } from "react";
+import { useReadonlySet } from "../useReadonlySet.js";
 const EMPTY_LIST = [];
 export function useCheckboxGroup(options) {
     const { name, menu = false, values, defaultCheckedValues = EMPTY_LIST } = options;
-    const [checkedValues, setCheckedValues] = useState(()=>{
-        if (typeof defaultCheckedValues === "function") {
-            return new Set(defaultCheckedValues());
-        }
-        return new Set(defaultCheckedValues);
+    const { value: checkedValues, setValue: setCheckedValues, toggleValue } = useReadonlySet({
+        defaultValue: defaultCheckedValues
     });
     const initial = useRef(checkedValues);
     let getIndeterminateProps;
@@ -21,7 +19,7 @@ export function useCheckboxGroup(options) {
                 checked,
                 indeterminate,
                 [menu ? "onCheckedChange" : "onChange"] () {
-                    setCheckedValues(()=>{
+                    setCheckedValues((checkedValues)=>{
                         if (checkedValues.size === 0 || indeterminate) {
                             return new Set(values);
                         }
@@ -34,7 +32,9 @@ export function useCheckboxGroup(options) {
     return {
         reset: useCallback(()=>{
             setCheckedValues(initial.current);
-        }, []),
+        }, [
+            setCheckedValues
+        ]),
         checkedValues,
         setCheckedValues,
         getIndeterminateProps,
@@ -44,15 +44,7 @@ export function useCheckboxGroup(options) {
                 value: menu ? undefined : value,
                 checked: checkedValues.has(value),
                 [menu ? "onCheckedChange" : "onChange"] () {
-                    setCheckedValues((prevValues)=>{
-                        const nextValues = new Set(prevValues);
-                        if (prevValues.has(value)) {
-                            nextValues.delete(value);
-                        } else {
-                            nextValues.add(value);
-                        }
-                        return nextValues;
-                    });
+                    toggleValue(value);
                 }
             };
         }

package/dist/form/useCheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useCheckboxGroup.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\n\nconst EMPTY_LIST = [] as const;\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupOptions<V> {\n  /**\n   * A `name` to apply to all the checkboxes within the group. This is required\n   * if the {@link menu} option is set to `true`.\n   */\n  name?: string;\n\n  /**\n   * Set this to `true` if using the `MenuItemCheckbox` component instead of the\n   * `Checkbox` so the correct props can be provided.\n   *\n   * @defaultValue `false`\n   */\n  menu?: boolean;\n\n  /**\n   * This prop **must** be defined to enable the indeterminate checkbox feature\n   * from the hook. This should be a list of all the possible checkbox values in\n   * the group. This will be used to select all values when the indeterminate\n   * checkbox is checked and determine if all the checkboxes have manually be\n   * selected.\n   *\n   * @example Indeterminate Behavior\n   * ```tsx\n   * const OPTIONS = [\n   *   { label: \"First\", value: \"a\" },\n   *   { label: \"Second\", value: \"b\" },\n   *   { label: \"Third\", value: \"c\" },\n   * ] as const:\n   * const VALUES = OPTIONS.map(({ value }) => value) as const;\n   *\n   * const {\n   *   getCheckboxProps,\n   *   getIndeterminateProps,\n   *   checkedValues,\n   * } = useCheckboxGroup({ name: \"group\", values: VALUES });\n   * ```\n   */\n  values?: readonly V[];\n\n  /**\n   * Set this to a list of checkbox values that should be checked by default.\n   *\n   * @defaultValue `[]`\n   */\n  defaultCheckedValues?: UseStateInitializer<readonly V[]>;\n}\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupImplementation<V extends string> {\n  reset(): void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps(value: V): {\n    name: string;\n    value: V;\n    checked: boolean;\n    onChange(): void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateCheckboxGroupImplementation<V extends string>\n  extends CheckboxGroupImplementation<V> {\n  getIndeterminateProps(): {\n    \"aria-checked\": \"mixed\" | undefined;\n    name: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange(): void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface MenuItemCheckboxGroupImplementation<V extends string> {\n  reset(): void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps(value: V): {\n    checked: boolean;\n    onCheckedChange(): void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateMenuItemCheckboxGroupImplementation<\n  V extends string,\n> extends MenuItemCheckboxGroupImplementation<V> {\n  getIndeterminateProps(): {\n    \"aria-checked\": \"mixed\" | undefined;\n    checked: boolean;\n    indeterminate: boolean;\n    onCheckedChange(): void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface CombinedCheckboxGroupReturnValue<V extends string> {\n  reset(): void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps(value: V): {\n    name?: string;\n    value?: V;\n    checked: boolean;\n    onChange?(): void;\n    onCheckedChange?(): void;\n  };\n  getIndeterminateProps?(): {\n    \"aria-checked\": \"mixed\" | undefined;\n    name?: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange?(): void;\n    onCheckedChange?(): void;\n  };\n}\n\n/**\n * @example Checkbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ name: \"example\" });\n *\n * return (\n *   <>\n *     <Checkbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </Checkbox>\n *   </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values?: never;\n  }\n): CheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate Checkbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const {\n *   getCheckboxProps,\n *   getIndeterminateProps,\n *   checkedValues\n * } = useCheckboxGroup({\n *     name: \"example\",\n *     values: VALUES,\n *   });\n *\n * return (\n *   <>\n *     <Checkbox {...getIndeterminateProps()} label=\"Select all\" />\n *     {VALUES.map(({ label, value }) => (\n *       <Checkbox key={value} label={label} {...getCheckboxProps(value)} />\n *     ))}\n *   </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values: readonly V[];\n  }\n): IndeterminateCheckboxGroupImplementation<V>;\n/**\n * @example MenuItemCheckbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ menu: true });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </MenuItemCheckbox>\n *   </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values?: never;\n  }\n): MenuItemCheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate MenuItemCheckbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const { getCheckboxProps, getIndeterminateProps, checkedValues } = useCheckboxGroup({\n *   menu: true,\n *   values: VALUES,\n * });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getIndeterminateProps()}>\n *       All\n *     <MenuItemCheckbox>\n *     {OPTIONS.map(({ label, value }) => (\n *       <MenuItemCheckbox key={value} {...getCheckboxProps(value)}>\n *         {label}\n *       </MenuItemCheckbox>\n *     ))}\n *   </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values: readonly V[];\n  }\n): IndeterminateMenuItemCheckboxGroupImplementation<V>;\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V>\n): CombinedCheckboxGroupReturnValue<V> {\n  const {\n    name,\n    menu = false,\n    values,\n    defaultCheckedValues = EMPTY_LIST,\n  } = options;\n  const [checkedValues, setCheckedValues] = useState<ReadonlySet<V>>(() => {\n    if (typeof defaultCheckedValues === \"function\") {\n      return new Set(defaultCheckedValues());\n    }\n\n    return new Set(defaultCheckedValues);\n  });\n  const initial = useRef(checkedValues);\n\n  let getIndeterminateProps: CombinedCheckboxGroupReturnValue<V>[\"getIndeterminateProps\"];\n  if (values) {\n    getIndeterminateProps = () => {\n      const checked = checkedValues.size > 0;\n      const indeterminate = checked && checkedValues.size < values.length;\n\n      return {\n        \"aria-checked\": indeterminate ? \"mixed\" : undefined,\n        name,\n        checked,\n        indeterminate,\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          setCheckedValues(() => {\n            if (checkedValues.size === 0 || indeterminate) {\n              return new Set(values);\n            }\n\n            return new Set();\n          });\n        },\n      };\n    };\n  }\n\n  return {\n    reset: useCallback(() => {\n      setCheckedValues(initial.current);\n    }, []),\n    checkedValues,\n    setCheckedValues,\n    getIndeterminateProps,\n    getCheckboxProps(value) {\n      return {\n        name,\n        value: menu ? undefined : value,\n        checked: checkedValues.has(value),\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          setCheckedValues((prevValues) => {\n            const nextValues = new Set(prevValues);\n            if (prevValues.has(value)) {\n              nextValues.delete(value);\n            } else {\n              nextValues.add(value);\n            }\n\n            return nextValues;\n          });\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useState","EMPTY_LIST","useCheckboxGroup","options","name","menu","values","defaultCheckedValues","checkedValues","setCheckedValues","Set","initial","getIndeterminateProps","checked","size","indeterminate","length","undefined","reset","current","getCheckboxProps","value","has","prevValues","nextValues","delete","add"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGtD,MAAMC,aAAa,EAAE;AA+PrB,OAAO,SAASC,iBACdC,OAAgC;IAEhC,MAAM,EACJC,IAAI,EACJC,OAAO,KAAK,EACZC,MAAM,EACNC,uBAAuBN,UAAU,EAClC,GAAGE;IACJ,MAAM,CAACK,eAAeC,iBAAiB,GAAGT,SAAyB;QACjE,IAAI,OAAOO,yBAAyB,YAAY;YAC9C,OAAO,IAAIG,IAAIH;QACjB;QAEA,OAAO,IAAIG,IAAIH;IACjB;IACA,MAAMI,UAAUZ,OAAOS;IAEvB,IAAII;IACJ,IAAIN,QAAQ;QACVM,wBAAwB;YACtB,MAAMC,UAAUL,cAAcM,IAAI,GAAG;YACrC,MAAMC,gBAAgBF,WAAWL,cAAcM,IAAI,GAAGR,OAAOU,MAAM;YAEnE,OAAO;gBACL,gBAAgBD,gBAAgB,UAAUE;gBAC1Cb;gBACAS;gBACAE;gBACA,CAACV,OAAO,oBAAoB,WAAW;oBACrCI,iBAAiB;wBACf,IAAID,cAAcM,IAAI,KAAK,KAAKC,eAAe;4BAC7C,OAAO,IAAIL,IAAIJ;wBACjB;wBAEA,OAAO,IAAII;oBACb;gBACF;YACF;QACF;IACF;IAEA,OAAO;QACLQ,OAAOpB,YAAY;YACjBW,iBAAiBE,QAAQQ,OAAO;QAClC,GAAG,EAAE;QACLX;QACAC;QACAG;QACAQ,kBAAiBC,KAAK;YACpB,OAAO;gBACLjB;gBACAiB,OAAOhB,OAAOY,YAAYI;gBAC1BR,SAASL,cAAcc,GAAG,CAACD;gBAC3B,CAAChB,OAAO,oBAAoB,WAAW;oBACrCI,iBAAiB,CAACc;wBAChB,MAAMC,aAAa,IAAId,IAAIa;wBAC3B,IAAIA,WAAWD,GAAG,CAACD,QAAQ;4BACzBG,WAAWC,MAAM,CAACJ;wBACpB,OAAO;4BACLG,WAAWE,GAAG,CAACL;wBACjB;wBAEA,OAAOG;oBACT;gBACF;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useCheckboxGroup.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef } from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useReadonlySet } from \"../useReadonlySet.js\";\n\nconst EMPTY_LIST = [] as const;\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupOptions<V> {\n  /**\n   * A `name` to apply to all the checkboxes within the group. This is required\n   * if the {@link menu} option is set to `true`.\n   */\n  name?: string;\n\n  /**\n   * Set this to `true` if using the `MenuItemCheckbox` component instead of the\n   * `Checkbox` so the correct props can be provided.\n   *\n   * @defaultValue `false`\n   */\n  menu?: boolean;\n\n  /**\n   * This prop **must** be defined to enable the indeterminate checkbox feature\n   * from the hook. This should be a list of all the possible checkbox values in\n   * the group. This will be used to select all values when the indeterminate\n   * checkbox is checked and determine if all the checkboxes have manually be\n   * selected.\n   *\n   * @example Indeterminate Behavior\n   * ```tsx\n   * const OPTIONS = [\n   *   { label: \"First\", value: \"a\" },\n   *   { label: \"Second\", value: \"b\" },\n   *   { label: \"Third\", value: \"c\" },\n   * ] as const:\n   * const VALUES = OPTIONS.map(({ value }) => value) as const;\n   *\n   * const {\n   *   getCheckboxProps,\n   *   getIndeterminateProps,\n   *   checkedValues,\n   * } = useCheckboxGroup({ name: \"group\", values: VALUES });\n   * ```\n   */\n  values?: readonly V[];\n\n  /**\n   * Set this to a list of checkbox values that should be checked by default.\n   *\n   * @defaultValue `[]`\n   */\n  defaultCheckedValues?: UseStateInitializer<readonly V[]>;\n}\n\n/** @since 6.0.0 */\nexport interface CheckboxGroupImplementation<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    name: string;\n    value: V;\n    checked: boolean;\n    onChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateCheckboxGroupImplementation<V extends string>\n  extends CheckboxGroupImplementation<V> {\n  getIndeterminateProps: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    name: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface MenuItemCheckboxGroupImplementation<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    checked: boolean;\n    onCheckedChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface IndeterminateMenuItemCheckboxGroupImplementation<\n  V extends string,\n> extends MenuItemCheckboxGroupImplementation<V> {\n  getIndeterminateProps: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    checked: boolean;\n    indeterminate: boolean;\n    onCheckedChange: () => void;\n  };\n}\n\n/** @since 6.0.0 */\nexport interface CombinedCheckboxGroupReturnValue<V extends string> {\n  reset: () => void;\n  checkedValues: ReadonlySet<V>;\n  setCheckedValues: UseStateSetter<ReadonlySet<V>>;\n  getCheckboxProps: (value: V) => {\n    name?: string;\n    value?: V;\n    checked: boolean;\n    onChange?: () => void;\n    onCheckedChange?: () => void;\n  };\n  getIndeterminateProps?: () => {\n    \"aria-checked\": \"mixed\" | undefined;\n    name?: string;\n    checked: boolean;\n    indeterminate: boolean;\n    onChange?: () => void;\n    onCheckedChange?: () => void;\n  };\n}\n\n/**\n * @example Checkbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ name: \"example\" });\n *\n * return (\n *   <>\n *     <Checkbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </Checkbox>\n *     <Checkbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </Checkbox>\n *   </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values?: never;\n  }\n): CheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate Checkbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const {\n *   getCheckboxProps,\n *   getIndeterminateProps,\n *   checkedValues\n * } = useCheckboxGroup({\n *     name: \"example\",\n *     values: VALUES,\n *   });\n *\n * return (\n *   <>\n *     <Checkbox {...getIndeterminateProps()} label=\"Select all\" />\n *     {VALUES.map(({ label, value }) => (\n *       <Checkbox key={value} label={label} {...getCheckboxProps(value)} />\n *     ))}\n *   </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu?: false;\n    name: string;\n    values: readonly V[];\n  }\n): IndeterminateCheckboxGroupImplementation<V>;\n/**\n * @example MenuItemCheckbox Group\n * ```tsx\n * const { getCheckboxProps, checkedValues } = useCheckboxGroup({ menu: true });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getCheckboxProps(\"a\")}>\n *       First\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"b\")}>\n *       Second\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox {...getCheckboxProps(\"c\")}>\n *       Third\n *     </MenuItemCheckbox>\n *   </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values?: never;\n  }\n): MenuItemCheckboxGroupImplementation<V>;\n/**\n * @example Indeterminate MenuItemCheckbox Group\n * ```tsx\n * const OPTIONS = [\n *   { label: \"First\", value: \"a\" },\n *   { label: \"Second\", value: \"b\" },\n *   { label: \"Third\", value: \"c\" },\n * ] as const:\n * const VALUES = OPTIONS.map(({ value }) => value) as const;\n *\n * const { getCheckboxProps, getIndeterminateProps, checkedValues } = useCheckboxGroup({\n *   menu: true,\n *   values: VALUES,\n * });\n *\n * return (\n *   <>\n *     <MenuItemCheckbox {...getIndeterminateProps()}>\n *       All\n *     <MenuItemCheckbox>\n *     {OPTIONS.map(({ label, value }) => (\n *       <MenuItemCheckbox key={value} {...getCheckboxProps(value)}>\n *         {label}\n *       </MenuItemCheckbox>\n *     ))}\n *   </>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V> & {\n    menu: true;\n    name?: never;\n    values: readonly V[];\n  }\n): IndeterminateMenuItemCheckboxGroupImplementation<V>;\nexport function useCheckboxGroup<V extends string>(\n  options: CheckboxGroupOptions<V>\n): CombinedCheckboxGroupReturnValue<V> {\n  const {\n    name,\n    menu = false,\n    values,\n    defaultCheckedValues = EMPTY_LIST,\n  } = options;\n  const {\n    value: checkedValues,\n    setValue: setCheckedValues,\n    toggleValue,\n  } = useReadonlySet({\n    defaultValue: defaultCheckedValues,\n  });\n  const initial = useRef(checkedValues);\n\n  let getIndeterminateProps: CombinedCheckboxGroupReturnValue<V>[\"getIndeterminateProps\"];\n  if (values) {\n    getIndeterminateProps = () => {\n      const checked = checkedValues.size > 0;\n      const indeterminate = checked && checkedValues.size < values.length;\n\n      return {\n        \"aria-checked\": indeterminate ? \"mixed\" : undefined,\n        name,\n        checked,\n        indeterminate,\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          setCheckedValues((checkedValues) => {\n            if (checkedValues.size === 0 || indeterminate) {\n              return new Set(values);\n            }\n\n            return new Set();\n          });\n        },\n      };\n    };\n  }\n\n  return {\n    reset: useCallback(() => {\n      setCheckedValues(initial.current);\n    }, [setCheckedValues]),\n    checkedValues,\n    setCheckedValues,\n    getIndeterminateProps,\n    getCheckboxProps(value) {\n      return {\n        name,\n        value: menu ? undefined : value,\n        checked: checkedValues.has(value),\n        [menu ? \"onCheckedChange\" : \"onChange\"]() {\n          toggleValue(value);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useRef","useReadonlySet","EMPTY_LIST","useCheckboxGroup","options","name","menu","values","defaultCheckedValues","value","checkedValues","setValue","setCheckedValues","toggleValue","defaultValue","initial","getIndeterminateProps","checked","size","indeterminate","length","undefined","Set","reset","current","getCheckboxProps","has"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AAE5C,SAASC,cAAc,QAAQ,uBAAuB;AAEtD,MAAMC,aAAa,EAAE;AA+PrB,OAAO,SAASC,iBACdC,OAAgC;IAEhC,MAAM,EACJC,IAAI,EACJC,OAAO,KAAK,EACZC,MAAM,EACNC,uBAAuBN,UAAU,EAClC,GAAGE;IACJ,MAAM,EACJK,OAAOC,aAAa,EACpBC,UAAUC,gBAAgB,EAC1BC,WAAW,EACZ,GAAGZ,eAAe;QACjBa,cAAcN;IAChB;IACA,MAAMO,UAAUf,OAAOU;IAEvB,IAAIM;IACJ,IAAIT,QAAQ;QACVS,wBAAwB;YACtB,MAAMC,UAAUP,cAAcQ,IAAI,GAAG;YACrC,MAAMC,gBAAgBF,WAAWP,cAAcQ,IAAI,GAAGX,OAAOa,MAAM;YAEnE,OAAO;gBACL,gBAAgBD,gBAAgB,UAAUE;gBAC1ChB;gBACAY;gBACAE;gBACA,CAACb,OAAO,oBAAoB,WAAW;oBACrCM,iBAAiB,CAACF;wBAChB,IAAIA,cAAcQ,IAAI,KAAK,KAAKC,eAAe;4BAC7C,OAAO,IAAIG,IAAIf;wBACjB;wBAEA,OAAO,IAAIe;oBACb;gBACF;YACF;QACF;IACF;IAEA,OAAO;QACLC,OAAOxB,YAAY;YACjBa,iBAAiBG,QAAQS,OAAO;QAClC,GAAG;YAACZ;SAAiB;QACrBF;QACAE;QACAI;QACAS,kBAAiBhB,KAAK;YACpB,OAAO;gBACLJ;gBACAI,OAAOH,OAAOe,YAAYZ;gBAC1BQ,SAASP,cAAcgB,GAAG,CAACjB;gBAC3B,CAACH,OAAO,oBAAoB,WAAW;oBACrCO,YAAYJ;gBACd;YACF;QACF;IACF;AACF"}

package/dist/form/useCombobox.d.ts

@@ -17,8 +17,8 @@ export type SupportedComboboxPopup = "listbox" | "grid" | "dialog";
  * @since 6.0.0
  */
 export interface ComboboxKeyboardMovementData<E extends HTMLElement = HTMLInputElement> extends KeyboardMovementExtensionData<E> {
-    show(): void;
-    hide(): void;
+    show: () => void;
+    hide: () => void;
     visible: boolean;
     focusLast: NonNullMutableRef<boolean>;
 }
@@ -33,7 +33,38 @@ export type ComboboxKeyboardMovementOptions<ComboboxEl extends HTMLElement = HTM
 /**
  * @since 6.0.0
  */
-export interface BaseComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ComboboxKeyboardMovementOptions<ComboboxEl> {
+export interface ComboboxVisibilityOptions {
+    /**
+     * This can be used to control the popup's visibility and **must** be used
+     * along with {@link setVisible}.
+     */
+    visible?: boolean;
+    /**
+     * Used to control the popup's visibility and should generally be a `useState`
+     * setter.
+     *
+     * @example Controlling the Visibility
+     * ```tsx
+     * const [visible, setVisible] = useState(false);
+     *
+     * useCombobox({
+     *   visible,
+     *   setVisible,
+     * });
+     * ```
+     */
+    setVisible?: UseStateSetter<boolean>;
+    /**
+     * Set this to `true` to have the combobox's popup visible by default.
+     *
+     * @defaultValue `false`
+     */
+    defaultVisible?: UseStateInitializer<boolean>;
+}
+/**
+ * @since 6.0.0
+ */
+export interface ConfigurableComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ComboboxKeyboardMovementOptions<ComboboxEl>, ComboboxVisibilityOptions {
     /**
      * This is the {@link InputHTMLAttributes.form} attribute and is used to
      * attempt submitting a form when the enter key is pressed.
@@ -56,7 +87,7 @@ export interface BaseComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputE
     /**
      * @defaultValue `false`
      */
-    defaultVisible?: UseStateInitializer<boolean>;
+    multiselect?: boolean;
     extendKeyDown?: ExtendComboboxKeyDown<ComboboxEl>;
     /**
      * @defaultValue {@link getNonDisabledOptions}
@@ -67,12 +98,16 @@ export interface BaseComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputE
 /**
  * @since 6.0.0
  */
-export interface ComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
-    getEnterDefaultFocusedIndex(options: {
-        focusLast: boolean;
-        focusables: readonly HTMLElement[];
-        currentFocusIndex: number;
-    }): number;
+export interface ComboboxGetEnterDefaultFocusedIndexOptions {
+    focusLast: boolean;
+    focusables: readonly HTMLElement[];
+    currentFocusIndex: number;
+}
+/**
+ * @since 6.0.0
+ */
+export interface ComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ConfigurableComboboxOptions<ComboboxEl, PopupEl> {
+    getEnterDefaultFocusedIndex: (options: ComboboxGetEnterDefaultFocusedIndexOptions) => number;
 }
 /**
  * @since 6.0.0
@@ -93,6 +128,7 @@ export interface ComboboxWidgetProps<ComboboxEl extends HTMLElement = HTMLInputE
  * @since 6.0.0
  */
 export interface ComboboxWidgetPopupProps<PopupEl extends HTMLElement = HTMLElement> {
+    "aria-multiselectable": true | undefined;
     id: string;
     ref: RefCallback<PopupEl>;
     role: "listbox" | "dialog" | "grid";
@@ -116,7 +152,7 @@ export type ConfigurableComboboxMenuProps = Partial<Omit<MenuProps, "visible" |
  */
 export interface ProvidedComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement> extends Required<ComboboxTransitionCallbacks>, ComboboxWidgetPopupProps<PopupEl> {
     visible: boolean;
-    onRequestClose(): void;
+    onRequestClose: () => void;
     /** @defaultValue `"min"` */
     width: PositionWidth;
     /** @defaultValue `BELOW_CENTER_ANCHOR` */
@@ -129,18 +165,12 @@ export interface ProvidedComboboxMenuProps<PopupEl extends HTMLElement = HTMLDiv
  */
 export interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement> extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>, ProvidedComboboxMenuProps<PopupEl> {
 }
-/**
- * Since the combobox usually uses the `Menu` as a popup element, this is a
- * helper util to create the required props and merge any additional props
- * with reasonable defaults.
- */
-export type ComboboxGetMenuProps<PopupEl extends HTMLElement = HTMLDivElement> = (props?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<PopupEl>;
 /**
  * @since 6.0.0
  */
 export interface ComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends KeyboardMovementProviderImplementation<ComboboxEl> {
-    show(): void;
-    hide(): void;
+    show: () => void;
+    hide: () => void;
     visible: boolean;
     setVisible: UseStateSetter<boolean>;
     focusLast: NonNullMutableRef<boolean>;
@@ -148,8 +178,13 @@ export interface ComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInp
     popupProps: ComboboxWidgetPopupProps<PopupEl>;
     comboboxRef: RefObject<ComboboxEl>;
     comboboxProps: ComboboxWidgetProps<ComboboxEl>;
-    getMenuProps: ComboboxGetMenuProps<PopupEl>;
-    getTransitionCallbacks(options: ComboboxTransitionOptions): Required<ComboboxTransitionCallbacks>;
+    /**
+     * Since the combobox usually uses the `Menu` as a popup element, this is a
+     * helper util to create the required props and merge any additional props
+     * with reasonable defaults.
+     */
+    getMenuProps: (overrides?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<PopupEl>;
+    getTransitionCallbacks: (options: ComboboxTransitionOptions) => Required<ComboboxTransitionCallbacks>;
 }
 /**
  * @since 6.0.0