@react-md/core 6.2.0 → 6.3.0

package/dist/datetime/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/datetime/utils.ts"],"sourcesContent":["/**\n * Since time input steps are based on seconds, this is a simple helper to\n * create the step in a human-readable form.\n *\n * @since 6.3.0\n */\nexport interface TimeFieldStepOptions {\n  /**\n   * @defaultValue `0`\n   */\n  seconds?: number;\n\n  /**\n   * @defaultValue `0`\n   */\n  minutes?: number;\n\n  /**\n   * @defaultValue `0`\n   */\n  hours?: number;\n}\n\n/**\n * Since time input steps are based on seconds, this is a simple helper to\n * create the step in a human-readable form.\n *\n * @example Simple Example\n * ```tsx\n * const step1 = getTimeStep({ minutes: 15 });\n * const step2 = getTimeStep({ hours: 1 });\n * const step3 = getTimeStep({ seconds: 15, minutes: 30, hours: 2 });\n * ```\n *\n * @since 6.3.0\n */\nexport function getTimeStep(\n  step: TimeFieldStepOptions | \"any\" | number | undefined\n): number | \"any\" | undefined {\n  if (!step || typeof step === \"string\" || typeof step === \"number\") {\n    return step;\n  }\n\n  const { hours = 0, minutes = 0, seconds = 0 } = step;\n\n  const total = Math.abs(Math.round(seconds + minutes * 60 + hours * 60 * 60));\n  return total === 0 ? undefined : total;\n}\n"],"names":["getTimeStep","step","hours","minutes","seconds","total","Math","abs","round","undefined"],"mappings":"AAAA;;;;;CAKC,GAkBD;;;;;;;;;;;;CAYC,GACD,OAAO,SAASA,YACdC,IAAuD;IAEvD,IAAI,CAACA,QAAQ,OAAOA,SAAS,YAAY,OAAOA,SAAS,UAAU;QACjE,OAAOA;IACT;IAEA,MAAM,EAAEC,QAAQ,CAAC,EAAEC,UAAU,CAAC,EAAEC,UAAU,CAAC,EAAE,GAAGH;IAEhD,MAAMI,QAAQC,KAAKC,GAAG,CAACD,KAAKE,KAAK,CAACJ,UAAUD,UAAU,KAAKD,QAAQ,KAAK;IACxE,OAAOG,UAAU,IAAII,YAAYJ;AACnC"}

package/dist/draggable/utils.d.ts

@@ -1,4 +1,5 @@
 import { type MouseEvent, type RefObject, type TouchEvent } from "react";
+import { type MinMaxRange } from "../types.js";
 import { type ClientPositionEvent, type ClientPositionOptions } from "../utils/getClientPosition.js";
 /**
  * @internal
@@ -23,9 +24,7 @@ export declare const getDragPosition: (options: DragPositionOptions) => number;
 /**
  * @internal
  */
-interface RelativeDragPositionOptions extends DragPositionOptions {
-    min: number;
-    max: number;
+interface RelativeDragPositionOptions extends DragPositionOptions, MinMaxRange {
     step: number;
     rangeMin: number;
     rangeMax: number;
@@ -62,9 +61,7 @@ export declare const updateDragPosition: (options: UpdateDragPositionOptions) =>
  * @internal
  * @since 6.0.0
  */
-export interface DeserializeDraggableValueOptions {
-    min: number;
-    max: number;
+export interface DeserializeDraggableValueOptions extends MinMaxRange {
     item: string;
 }
 /**

package/dist/draggable/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/draggable/utils.ts"],"sourcesContent":["import { type MouseEvent, type RefObject, type TouchEvent } from \"react\";\n\nimport {\n  type ClientPositionEvent,\n  type ClientPositionOptions,\n  getClientPosition,\n} from \"../utils/getClientPosition.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\n\n/**\n * @internal\n */\nexport const isMouseDragStartEvent = (event: MouseEvent): boolean =>\n  event.button === 0 &&\n  !event.altKey &&\n  !event.metaKey &&\n  !event.ctrlKey &&\n  !event.shiftKey;\n\n/**\n * @internal\n */\nexport const isTouchDragStartEvent = (event: TouchEvent): boolean =>\n  event.changedTouches.length === 1;\n\n/**\n * @internal\n */\ninterface DragPositionOptions extends ClientPositionOptions {\n  isRTL: boolean;\n  reversed: boolean;\n  container: Element;\n}\n\n/**\n * @internal\n */\nexport const getDragPosition = (options: DragPositionOptions): number => {\n  const { isRTL, reversed, vertical, container } = options;\n\n  const clientPosition = getClientPosition(options);\n  const { left, right, top } = container.getBoundingClientRect();\n  if (vertical) {\n    if (reversed) {\n      return window.innerHeight - clientPosition;\n    }\n\n    // added `Math.max` since the `top` will be a negative number if rendered\n    // within a portal element like a dialog/sheet\n    return clientPosition - Math.max(0, top);\n  }\n\n  if (reversed ? !isRTL : isRTL) {\n    return right - clientPosition;\n  }\n\n  return clientPosition - left;\n};\n\n/**\n * @internal\n */\ninterface RelativeDragPositionOptions extends DragPositionOptions {\n  min: number;\n  max: number;\n  step: number;\n  rangeMin: number;\n  rangeMax: number;\n}\n\n/**\n * @internal\n */\ninterface RelativeDragPosition {\n  value: number;\n  dragPercentage: number;\n}\n\n/**\n * @internal\n */\nexport const getRelativeDragPosition = (\n  options: RelativeDragPositionOptions\n): RelativeDragPosition => {\n  const { min, max, rangeMin, rangeMax, step, isRTL, vertical, container } =\n    options;\n\n  const { height, width, left, top } = container.getBoundingClientRect();\n  const containerSize = vertical ? height : width;\n  const containerPosition = vertical ? top + height : left;\n  const clientPosition = getClientPosition(options);\n\n  const position = vertical\n    ? containerPosition - clientPosition\n    : clientPosition - containerPosition;\n  const distanceDragged = Math.min(Math.max(0, position), containerSize);\n  let dragPercentage = distanceDragged / containerSize;\n  if (isRTL && !vertical) {\n    dragPercentage = 1 - dragPercentage;\n  }\n\n  const range = rangeMax - rangeMin;\n  const steps = getRangeSteps({ min: rangeMin, max: rangeMax, step });\n  const value = dragPercentage * range + rangeMin;\n  const nextValue = nearest({\n    min,\n    max,\n    steps,\n    range,\n    value,\n  });\n\n  return {\n    value: nextValue,\n    dragPercentage,\n  };\n};\n\n/**\n * @internal\n */\ninterface UpdateDragPositionOptions\n  extends Omit<RelativeDragPositionOptions, \"container\"> {\n  event: ClientPositionEvent;\n  nodeRef: RefObject<HTMLElement>;\n  focus?: boolean;\n  isDragStart: boolean;\n  setValue: (value: number) => void;\n  setDragging: (dragging: boolean) => void;\n  setDragPercentage: (value: number) => void;\n  withinOffsetParent: boolean;\n}\n\n/**\n * @internal\n */\nexport const updateDragPosition = (\n  options: UpdateDragPositionOptions\n): void => {\n  const {\n    event,\n    nodeRef,\n    min,\n    max,\n    step,\n    rangeMin,\n    rangeMax,\n    isRTL,\n    reversed,\n    vertical,\n    isDragStart,\n    setValue,\n    setDragging,\n    setDragPercentage,\n    withinOffsetParent,\n  } = options;\n\n  const element = nodeRef.current;\n  if (!element) {\n    return;\n  }\n\n  if (isDragStart) {\n    // need to focus so that Chromium based browsers allow drag events. this\n    // really appeared while trying to create a DnD tree\n    element.focus({ preventScroll: true });\n\n    if (!withinOffsetParent && !(\"changedTouches\" in event)) {\n      return;\n    }\n\n    // unlike the other flow, start dragging immediately so that you can trigger\n    // a mousedown or touchstart event on the container element and drag until\n    // the user lets go\n    setDragging(true);\n  }\n\n  // firefox defaults to `document.body` while chrome will return `null`\n  const container = element.offsetParent || document.body;\n  if (!withinOffsetParent) {\n    const dragPosition = getDragPosition({\n      event,\n      isRTL,\n      reversed,\n      vertical,\n      container,\n    });\n    const nextValue = withinRange({\n      min,\n      max,\n      value: dragPosition,\n    });\n    setValue(nextValue);\n\n    return;\n  }\n\n  const { value, dragPercentage } = getRelativeDragPosition({\n    min,\n    max,\n    rangeMin,\n    rangeMax,\n    step,\n    event,\n    isRTL,\n    reversed,\n    vertical,\n    container,\n  });\n\n  setValue(value);\n  setDragPercentage(dragPercentage);\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface DeserializeDraggableValueOptions {\n  min: number;\n  max: number;\n  item: string;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function deserializeDraggableValue(\n  options: DeserializeDraggableValueOptions\n): number {\n  const { item, min, max } = options;\n\n  const value = parseFloat(item);\n  if (Number.isNaN(item)) {\n    return min;\n  }\n\n  return Math.max(min, Math.min(max, value));\n}\n"],"names":["getClientPosition","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","event","button","altKey","metaKey","ctrlKey","shiftKey","isTouchDragStartEvent","changedTouches","length","getDragPosition","options","isRTL","reversed","vertical","container","clientPosition","left","right","top","getBoundingClientRect","window","innerHeight","Math","max","getRelativeDragPosition","min","rangeMin","rangeMax","step","height","width","containerSize","containerPosition","position","distanceDragged","dragPercentage","range","steps","value","nextValue","updateDragPosition","nodeRef","isDragStart","setValue","setDragging","setDragPercentage","withinOffsetParent","element","current","focus","preventScroll","offsetParent","document","body","dragPosition","deserializeDraggableValue","item","parseFloat","Number","isNaN"],"mappings":"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"}
+{"version":3,"sources":["../../src/draggable/utils.ts"],"sourcesContent":["import { type MouseEvent, type RefObject, type TouchEvent } from \"react\";\n\nimport { type MinMaxRange } from \"../types.js\";\nimport {\n  type ClientPositionEvent,\n  type ClientPositionOptions,\n  getClientPosition,\n} from \"../utils/getClientPosition.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\n\n/**\n * @internal\n */\nexport const isMouseDragStartEvent = (event: MouseEvent): boolean =>\n  event.button === 0 &&\n  !event.altKey &&\n  !event.metaKey &&\n  !event.ctrlKey &&\n  !event.shiftKey;\n\n/**\n * @internal\n */\nexport const isTouchDragStartEvent = (event: TouchEvent): boolean =>\n  event.changedTouches.length === 1;\n\n/**\n * @internal\n */\ninterface DragPositionOptions extends ClientPositionOptions {\n  isRTL: boolean;\n  reversed: boolean;\n  container: Element;\n}\n\n/**\n * @internal\n */\nexport const getDragPosition = (options: DragPositionOptions): number => {\n  const { isRTL, reversed, vertical, container } = options;\n\n  const clientPosition = getClientPosition(options);\n  const { left, right, top } = container.getBoundingClientRect();\n  if (vertical) {\n    if (reversed) {\n      return window.innerHeight - clientPosition;\n    }\n\n    // added `Math.max` since the `top` will be a negative number if rendered\n    // within a portal element like a dialog/sheet\n    return clientPosition - Math.max(0, top);\n  }\n\n  if (reversed ? !isRTL : isRTL) {\n    return right - clientPosition;\n  }\n\n  return clientPosition - left;\n};\n\n/**\n * @internal\n */\ninterface RelativeDragPositionOptions extends DragPositionOptions, MinMaxRange {\n  step: number;\n  rangeMin: number;\n  rangeMax: number;\n}\n\n/**\n * @internal\n */\ninterface RelativeDragPosition {\n  value: number;\n  dragPercentage: number;\n}\n\n/**\n * @internal\n */\nexport const getRelativeDragPosition = (\n  options: RelativeDragPositionOptions\n): RelativeDragPosition => {\n  const { min, max, rangeMin, rangeMax, step, isRTL, vertical, container } =\n    options;\n\n  const { height, width, left, top } = container.getBoundingClientRect();\n  const containerSize = vertical ? height : width;\n  const containerPosition = vertical ? top + height : left;\n  const clientPosition = getClientPosition(options);\n\n  const position = vertical\n    ? containerPosition - clientPosition\n    : clientPosition - containerPosition;\n  const distanceDragged = Math.min(Math.max(0, position), containerSize);\n  let dragPercentage = distanceDragged / containerSize;\n  if (isRTL && !vertical) {\n    dragPercentage = 1 - dragPercentage;\n  }\n\n  const range = rangeMax - rangeMin;\n  const steps = getRangeSteps({ min: rangeMin, max: rangeMax, step });\n  const value = dragPercentage * range + rangeMin;\n  const nextValue = nearest({\n    min,\n    max,\n    steps,\n    range,\n    value,\n  });\n\n  return {\n    value: nextValue,\n    dragPercentage,\n  };\n};\n\n/**\n * @internal\n */\ninterface UpdateDragPositionOptions\n  extends Omit<RelativeDragPositionOptions, \"container\"> {\n  event: ClientPositionEvent;\n  nodeRef: RefObject<HTMLElement>;\n  focus?: boolean;\n  isDragStart: boolean;\n  setValue: (value: number) => void;\n  setDragging: (dragging: boolean) => void;\n  setDragPercentage: (value: number) => void;\n  withinOffsetParent: boolean;\n}\n\n/**\n * @internal\n */\nexport const updateDragPosition = (\n  options: UpdateDragPositionOptions\n): void => {\n  const {\n    event,\n    nodeRef,\n    min,\n    max,\n    step,\n    rangeMin,\n    rangeMax,\n    isRTL,\n    reversed,\n    vertical,\n    isDragStart,\n    setValue,\n    setDragging,\n    setDragPercentage,\n    withinOffsetParent,\n  } = options;\n\n  const element = nodeRef.current;\n  if (!element) {\n    return;\n  }\n\n  if (isDragStart) {\n    // need to focus so that Chromium based browsers allow drag events. this\n    // really appeared while trying to create a DnD tree\n    element.focus({ preventScroll: true });\n\n    if (!withinOffsetParent && !(\"changedTouches\" in event)) {\n      return;\n    }\n\n    // unlike the other flow, start dragging immediately so that you can trigger\n    // a mousedown or touchstart event on the container element and drag until\n    // the user lets go\n    setDragging(true);\n  }\n\n  // firefox defaults to `document.body` while chrome will return `null`\n  const container = element.offsetParent || document.body;\n  if (!withinOffsetParent) {\n    const dragPosition = getDragPosition({\n      event,\n      isRTL,\n      reversed,\n      vertical,\n      container,\n    });\n    const nextValue = withinRange({\n      min,\n      max,\n      value: dragPosition,\n    });\n    setValue(nextValue);\n\n    return;\n  }\n\n  const { value, dragPercentage } = getRelativeDragPosition({\n    min,\n    max,\n    rangeMin,\n    rangeMax,\n    step,\n    event,\n    isRTL,\n    reversed,\n    vertical,\n    container,\n  });\n\n  setValue(value);\n  setDragPercentage(dragPercentage);\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface DeserializeDraggableValueOptions extends MinMaxRange {\n  item: string;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function deserializeDraggableValue(\n  options: DeserializeDraggableValueOptions\n): number {\n  const { item, min, max } = options;\n\n  const value = parseFloat(item);\n  if (Number.isNaN(item)) {\n    return min;\n  }\n\n  return Math.max(min, Math.min(max, value));\n}\n"],"names":["getClientPosition","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","event","button","altKey","metaKey","ctrlKey","shiftKey","isTouchDragStartEvent","changedTouches","length","getDragPosition","options","isRTL","reversed","vertical","container","clientPosition","left","right","top","getBoundingClientRect","window","innerHeight","Math","max","getRelativeDragPosition","min","rangeMin","rangeMax","step","height","width","containerSize","containerPosition","position","distanceDragged","dragPercentage","range","steps","value","nextValue","updateDragPosition","nodeRef","isDragStart","setValue","setDragging","setDragPercentage","withinOffsetParent","element","current","focus","preventScroll","offsetParent","document","body","dragPosition","deserializeDraggableValue","item","parseFloat","Number","isNaN"],"mappings":"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"}

package/dist/expansion-panel/ExpansionList.js

@@ -17,6 +17,7 @@ import { useExpansionList } from "./useExpansionList.js";
  */ export const ExpansionList = /*#__PURE__*/ forwardRef(function ExpansionList(props, ref) {
     const { onClick, onFocus, onKeyDown, children, ...remaining } = props;
     const { movementContext, movementProps } = useExpansionList({
+        ref,
         onClick,
         onFocus,
         onKeyDown
@@ -26,7 +27,6 @@ import { useExpansionList } from "./useExpansionList.js";
         children: /*#__PURE__*/ _jsx("div", {
             ...remaining,
             ...movementProps,
-            ref: ref,
             children: children
         })
     });

package/dist/expansion-panel/ExpansionList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/ExpansionList.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useExpansionList } from \"./useExpansionList.js\";\n\n/**\n * @since 6.0.0 No longer requires the `onKeyDown` prop.\n */\nexport interface ExpansionListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is only used to implement the keyboard movement behavior for\n * the `ExpansionPanel` components.\n *\n * @see {@link https://react-md.dev/components/expansion-panel | ExpansionPanel Demos}\n * @see {@link useExpansionList} for a custom implementation example if you do\n * not want to use a `<div>` for this wrapper component.\n * @since 6.0.0 Uses the new keyboard movement API and does not\n * require the `onKeyDown` prop to be provided.\n */\nexport const ExpansionList = forwardRef<HTMLDivElement, ExpansionListProps>(\n  function ExpansionList(props, ref) {\n    const { onClick, onFocus, onKeyDown, children, ...remaining } = props;\n\n    const { movementContext, movementProps } = useExpansionList({\n      onClick,\n      onFocus,\n      onKeyDown,\n    });\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <div {...remaining} {...movementProps} ref={ref}>\n          {children}\n        </div>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","KeyboardMovementProvider","useExpansionList","ExpansionList","props","ref","onClick","onFocus","onKeyDown","children","remaining","movementContext","movementProps","value","div"],"mappings":"AAAA;;AAEA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAASC,gBAAgB,QAAQ,wBAAwB;AASzD;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,8BAAgBH,WAC3B,SAASG,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAEhE,MAAM,EAAEO,eAAe,EAAEC,aAAa,EAAE,GAAGV,iBAAiB;QAC1DI;QACAC;QACAC;IACF;IAEA,qBACE,KAACP;QAAyBY,OAAOF;kBAC/B,cAAA,KAACG;YAAK,GAAGJ,SAAS;YAAG,GAAGE,aAAa;YAAEP,KAAKA;sBACzCI;;;AAIT,GACA"}
+{"version":3,"sources":["../../src/expansion-panel/ExpansionList.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useExpansionList } from \"./useExpansionList.js\";\n\n/**\n * @since 6.0.0 No longer requires the `onKeyDown` prop.\n */\nexport interface ExpansionListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is only used to implement the keyboard movement behavior for\n * the `ExpansionPanel` components.\n *\n * @see {@link https://react-md.dev/components/expansion-panel | ExpansionPanel Demos}\n * @see {@link useExpansionList} for a custom implementation example if you do\n * not want to use a `<div>` for this wrapper component.\n * @since 6.0.0 Uses the new keyboard movement API and does not\n * require the `onKeyDown` prop to be provided.\n */\nexport const ExpansionList = forwardRef<HTMLDivElement, ExpansionListProps>(\n  function ExpansionList(props, ref) {\n    const { onClick, onFocus, onKeyDown, children, ...remaining } = props;\n\n    const { movementContext, movementProps } = useExpansionList({\n      ref,\n      onClick,\n      onFocus,\n      onKeyDown,\n    });\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <div {...remaining} {...movementProps}>\n          {children}\n        </div>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","KeyboardMovementProvider","useExpansionList","ExpansionList","props","ref","onClick","onFocus","onKeyDown","children","remaining","movementContext","movementProps","value","div"],"mappings":"AAAA;;AAEA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAASC,gBAAgB,QAAQ,wBAAwB;AASzD;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,8BAAgBH,WAC3B,SAASG,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAEhE,MAAM,EAAEO,eAAe,EAAEC,aAAa,EAAE,GAAGV,iBAAiB;QAC1DG;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,KAACP;QAAyBY,OAAOF;kBAC/B,cAAA,KAACG;YAAK,GAAGJ,SAAS;YAAG,GAAGE,aAAa;sBAClCH;;;AAIT,GACA"}

package/dist/expansion-panel/useExpansionList.d.ts

@@ -1,11 +1,6 @@
-import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from "react";
-import type { KeyboardMovementProviderImplementation } from "../movement/types.js";
+import { type KeyboardMovementProviderImplementation, type SimpleKeyboardMovementWrapperOptions } from "../movement/types.js";
 /** @since 6.0.0 */
-export interface ExpansionListHookOptions<E extends HTMLElement> {
-    onClick?: MouseEventHandler<E>;
-    onFocus?: FocusEventHandler<E>;
-    onKeyDown?: KeyboardEventHandler<E>;
-}
+export type ExpansionListHookOptions<E extends HTMLElement> = SimpleKeyboardMovementWrapperOptions<E>;
 /** @since 6.0.0 */
 export type ExpansionListImplementation<E extends HTMLElement> = KeyboardMovementProviderImplementation<E>;
 /**

package/dist/expansion-panel/useExpansionList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/useExpansionList.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\n\nimport type { KeyboardMovementProviderImplementation } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nconst getPanelsOnly = (container: HTMLElement): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLElement>(\".rmd-expansion-panel__button\"),\n];\n\n/** @since 6.0.0 */\nexport interface ExpansionListHookOptions<E extends HTMLElement> {\n  onClick?: MouseEventHandler<E>;\n  onFocus?: FocusEventHandler<E>;\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/** @since 6.0.0 */\nexport type ExpansionListImplementation<E extends HTMLElement> =\n  KeyboardMovementProviderImplementation<E>;\n\n/**\n * @example Custom Implementation\n * ```tsx\n * import { ExpansionPanel } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { useExpansionList } from \"@react-md/core/expansion-panel/useExpansionList\";\n * import { useExpansionPanels } from \"@react-md/core/expansion-panel/useExpansionPanels\";\n * import { KeyboardMovementProvider } from \"@react-md/core/movement/useKeyboardMovementProvider\";\n * import { Form } from \"@react-md/core/form/Form\";\n * import { type ReactElement } from \"react\";\n *\n * import { BillingAddress } from \"./BillingAddress\";\n * import { BillingInformation } from \"./BillingInformation\";\n * import { PersonalInformation } from \"./PersonalInformation\";\n *\n * function Example(): ReactElement {\n *   const { movementContext, movementProps } = useExpansionList();\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <KeyboardMovementProvider value={movementContext}>\n *       <Form {...movementProps}>\n *         <ExpansionPanel {...getPanelProps(\"personal-information-panel\")}>\n *           <PersonalInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-information-panel\")}>\n *           <BillingInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-address-panel\")}>\n *           <BillingAddress />\n *         </ExpansionPanel>\n *       </Form>\n *     </KeyboardMovementProvider>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/expansion-panel | ExpansionPanel Demos}\n * @since 6.0.0\n */\nexport function useExpansionList<E extends HTMLElement>(\n  options: ExpansionListHookOptions<E> = {}\n): ExpansionListImplementation<E> {\n  return useKeyboardMovementProvider({\n    ...options,\n    loopable: true,\n    includeDisabled: true,\n    getFocusableElements: getPanelsOnly,\n  });\n}\n"],"names":["useKeyboardMovementProvider","getPanelsOnly","container","querySelectorAll","useExpansionList","options","loopable","includeDisabled","getFocusableElements"],"mappings":"AAAA;AASA,SAASA,2BAA2B,QAAQ,6CAA6C;AAEzF;;;CAGC,GACD,MAAMC,gBAAgB,CAACC,YAAmD;WACrEA,UAAUC,gBAAgB,CAAc;KAC5C;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,SAASC,iBACdC,UAAuC,CAAC,CAAC;IAEzC,OAAOL,4BAA4B;QACjC,GAAGK,OAAO;QACVC,UAAU;QACVC,iBAAiB;QACjBC,sBAAsBP;IACxB;AACF"}
+{"version":3,"sources":["../../src/expansion-panel/useExpansionList.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type KeyboardMovementProviderImplementation,\n  type SimpleKeyboardMovementWrapperOptions,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nconst getPanelsOnly = (container: HTMLElement): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLElement>(\".rmd-expansion-panel__button\"),\n];\n\n/** @since 6.0.0 */\nexport type ExpansionListHookOptions<E extends HTMLElement> =\n  SimpleKeyboardMovementWrapperOptions<E>;\n\n/** @since 6.0.0 */\nexport type ExpansionListImplementation<E extends HTMLElement> =\n  KeyboardMovementProviderImplementation<E>;\n\n/**\n * @example Custom Implementation\n * ```tsx\n * import { ExpansionPanel } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { useExpansionList } from \"@react-md/core/expansion-panel/useExpansionList\";\n * import { useExpansionPanels } from \"@react-md/core/expansion-panel/useExpansionPanels\";\n * import { KeyboardMovementProvider } from \"@react-md/core/movement/useKeyboardMovementProvider\";\n * import { Form } from \"@react-md/core/form/Form\";\n * import { type ReactElement } from \"react\";\n *\n * import { BillingAddress } from \"./BillingAddress\";\n * import { BillingInformation } from \"./BillingInformation\";\n * import { PersonalInformation } from \"./PersonalInformation\";\n *\n * function Example(): ReactElement {\n *   const { movementContext, movementProps } = useExpansionList();\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <KeyboardMovementProvider value={movementContext}>\n *       <Form {...movementProps}>\n *         <ExpansionPanel {...getPanelProps(\"personal-information-panel\")}>\n *           <PersonalInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-information-panel\")}>\n *           <BillingInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-address-panel\")}>\n *           <BillingAddress />\n *         </ExpansionPanel>\n *       </Form>\n *     </KeyboardMovementProvider>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/expansion-panel | ExpansionPanel Demos}\n * @since 6.0.0\n */\nexport function useExpansionList<E extends HTMLElement>(\n  options: ExpansionListHookOptions<E> = {}\n): ExpansionListImplementation<E> {\n  return useKeyboardMovementProvider({\n    ...options,\n    loopable: true,\n    includeDisabled: true,\n    getFocusableElements: getPanelsOnly,\n  });\n}\n"],"names":["useKeyboardMovementProvider","getPanelsOnly","container","querySelectorAll","useExpansionList","options","loopable","includeDisabled","getFocusableElements"],"mappings":"AAAA;AAMA,SAASA,2BAA2B,QAAQ,6CAA6C;AAEzF;;;CAGC,GACD,MAAMC,gBAAgB,CAACC,YAAmD;WACrEA,UAAUC,gBAAgB,CAAc;KAC5C;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,SAASC,iBACdC,UAAuC,CAAC,CAAC;IAEzC,OAAOL,4BAA4B;QACjC,GAAGK,OAAO;QACVC,UAAU;QACVC,iBAAiB;QACjBC,sBAAsBP;IACxB;AACF"}

package/dist/form/FormMessage.js

@@ -15,13 +15,14 @@ import { formMessage, formMessageText } from "./formMessageStyles.js";
  *
  * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}
  */ export const FormMessage = /*#__PURE__*/ forwardRef(function FormMessage(props, ref) {
-    const { id: propId, role, className, counterStyle, counterClassName, messageStyle, messageClassName, error = false, disableWrap = false, theme: propTheme, children, length, maxLength, ...remaining } = props;
+    const { id: propId, role, className, counterStyle, counterClassName, messageStyle, messageClassName, error = false, disableWrap = false, theme: propTheme, children, length, maxLength, counterProps, messageProps, ...remaining } = props;
     const id = useEnsuredId(propId, "form-message");
     const theme = getFormConfig("theme", propTheme);
     let message = children;
     if (!disableWrap && children) {
         message = /*#__PURE__*/ _jsx("p", {
             id: `${id}-message`,
+            ...messageProps,
             style: messageStyle,
             className: formMessageText({
                 className: messageClassName
@@ -44,6 +45,7 @@ import { formMessage, formMessageText } from "./formMessageStyles.js";
             message,
             typeof length === "number" && typeof maxLength === "number" && /*#__PURE__*/ _jsx(FormMessageCounter, {
                 id: `${id}-counter`,
+                ...counterProps,
                 style: counterStyle,
                 className: counterClassName,
                 children: `${length} / ${maxLength}`

package/dist/form/FormMessage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/FormMessage.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageCounter } from \"./FormMessageCounter.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { formMessage, formMessageText } from \"./formMessageStyles.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\n\n/**\n * The `FormMessage` component is used to create additional helper messages or\n * error messages and generally placed below the related `TextField`. If a\n * `length` (of the `value`) and `maxLength` are provided, a counter will also\n * be displayed to the right of the `children`.\n *\n * This component can also be used to create form-level validation messages by\n * setting the `role` prop to `\"alert\"`.\n *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n */\nexport const FormMessage = forwardRef<\n  HTMLDivElement,\n  FormMessageProps & Partial<FormMessageInputLengthCounterProps>\n>(function FormMessage(props, ref) {\n  const {\n    id: propId,\n    role,\n    className,\n    counterStyle,\n    counterClassName,\n    messageStyle,\n    messageClassName,\n    error = false,\n    disableWrap = false,\n    theme: propTheme,\n    children,\n    length,\n    maxLength,\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"form-message\");\n  const theme = getFormConfig(\"theme\", propTheme);\n\n  let message = children;\n  if (!disableWrap && children) {\n    message = (\n      <p\n        id={`${id}-message`}\n        style={messageStyle}\n        className={formMessageText({ className: messageClassName })}\n      >\n        {children}\n      </p>\n    );\n  }\n\n  return (\n    <div\n      {...remaining}\n      id={id}\n      ref={ref}\n      aria-live={role !== \"alert\" ? \"polite\" : undefined}\n      role={role}\n      className={formMessage({ error, theme, className })}\n    >\n      {message}\n      {typeof length === \"number\" && typeof maxLength === \"number\" && (\n        <FormMessageCounter\n          id={`${id}-counter`}\n          style={counterStyle}\n          className={counterClassName}\n        >\n          {`${length} / ${maxLength}`}\n        </FormMessageCounter>\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","useEnsuredId","FormMessageCounter","getFormConfig","formMessage","formMessageText","FormMessage","props","ref","id","propId","role","className","counterStyle","counterClassName","messageStyle","messageClassName","error","disableWrap","theme","propTheme","children","length","maxLength","remaining","message","p","style","div","aria-live","undefined"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,WAAW,EAAEC,eAAe,QAAQ,yBAAyB;AAMtE;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,4BAAcN,WAGzB,SAASM,YAAYC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,SAAS,EACTC,YAAY,EACZC,gBAAgB,EAChBC,YAAY,EACZC,gBAAgB,EAChBC,QAAQ,KAAK,EACbC,cAAc,KAAK,EACnBC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACT,GAAGC,WACJ,GAAGjB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAChC,MAAMS,QAAQhB,cAAc,SAASiB;IAErC,IAAIK,UAAUJ;IACd,IAAI,CAACH,eAAeG,UAAU;QAC5BI,wBACE,KAACC;YACCjB,IAAI,GAAGA,GAAG,QAAQ,CAAC;YACnBkB,OAAOZ;YACPH,WAAWP,gBAAgB;gBAAEO,WAAWI;YAAiB;sBAExDK;;IAGP;IAEA,qBACE,MAACO;QACE,GAAGJ,SAAS;QACbf,IAAIA;QACJD,KAAKA;QACLqB,aAAWlB,SAAS,UAAU,WAAWmB;QACzCnB,MAAMA;QACNC,WAAWR,YAAY;YAAEa;YAAOE;YAAOP;QAAU;;YAEhDa;YACA,OAAOH,WAAW,YAAY,OAAOC,cAAc,0BAClD,KAACrB;gBACCO,IAAI,GAAGA,GAAG,QAAQ,CAAC;gBACnBkB,OAAOd;gBACPD,WAAWE;0BAEV,GAAGQ,OAAO,GAAG,EAAEC,WAAW;;;;AAKrC,GAAG"}
+{"version":3,"sources":["../../src/form/FormMessage.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageCounter } from \"./FormMessageCounter.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { formMessage, formMessageText } from \"./formMessageStyles.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\n\n/**\n * The `FormMessage` component is used to create additional helper messages or\n * error messages and generally placed below the related `TextField`. If a\n * `length` (of the `value`) and `maxLength` are provided, a counter will also\n * be displayed to the right of the `children`.\n *\n * This component can also be used to create form-level validation messages by\n * setting the `role` prop to `\"alert\"`.\n *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n */\nexport const FormMessage = forwardRef<\n  HTMLDivElement,\n  FormMessageProps & Partial<FormMessageInputLengthCounterProps>\n>(function FormMessage(props, ref) {\n  const {\n    id: propId,\n    role,\n    className,\n    counterStyle,\n    counterClassName,\n    messageStyle,\n    messageClassName,\n    error = false,\n    disableWrap = false,\n    theme: propTheme,\n    children,\n    length,\n    maxLength,\n    counterProps,\n    messageProps,\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"form-message\");\n  const theme = getFormConfig(\"theme\", propTheme);\n\n  let message = children;\n  if (!disableWrap && children) {\n    message = (\n      <p\n        id={`${id}-message`}\n        {...messageProps}\n        style={messageStyle}\n        className={formMessageText({ className: messageClassName })}\n      >\n        {children}\n      </p>\n    );\n  }\n\n  return (\n    <div\n      {...remaining}\n      id={id}\n      ref={ref}\n      aria-live={role !== \"alert\" ? \"polite\" : undefined}\n      role={role}\n      className={formMessage({ error, theme, className })}\n    >\n      {message}\n      {typeof length === \"number\" && typeof maxLength === \"number\" && (\n        <FormMessageCounter\n          id={`${id}-counter`}\n          {...counterProps}\n          style={counterStyle}\n          className={counterClassName}\n        >\n          {`${length} / ${maxLength}`}\n        </FormMessageCounter>\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","useEnsuredId","FormMessageCounter","getFormConfig","formMessage","formMessageText","FormMessage","props","ref","id","propId","role","className","counterStyle","counterClassName","messageStyle","messageClassName","error","disableWrap","theme","propTheme","children","length","maxLength","counterProps","messageProps","remaining","message","p","style","div","aria-live","undefined"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,WAAW,EAAEC,eAAe,QAAQ,yBAAyB;AAMtE;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,4BAAcN,WAGzB,SAASM,YAAYC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,SAAS,EACTC,YAAY,EACZC,gBAAgB,EAChBC,YAAY,EACZC,gBAAgB,EAChBC,QAAQ,KAAK,EACbC,cAAc,KAAK,EACnBC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,YAAY,EACZ,GAAGC,WACJ,GAAGnB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAChC,MAAMS,QAAQhB,cAAc,SAASiB;IAErC,IAAIO,UAAUN;IACd,IAAI,CAACH,eAAeG,UAAU;QAC5BM,wBACE,KAACC;YACCnB,IAAI,GAAGA,GAAG,QAAQ,CAAC;YAClB,GAAGgB,YAAY;YAChBI,OAAOd;YACPH,WAAWP,gBAAgB;gBAAEO,WAAWI;YAAiB;sBAExDK;;IAGP;IAEA,qBACE,MAACS;QACE,GAAGJ,SAAS;QACbjB,IAAIA;QACJD,KAAKA;QACLuB,aAAWpB,SAAS,UAAU,WAAWqB;QACzCrB,MAAMA;QACNC,WAAWR,YAAY;YAAEa;YAAOE;YAAOP;QAAU;;YAEhDe;YACA,OAAOL,WAAW,YAAY,OAAOC,cAAc,0BAClD,KAACrB;gBACCO,IAAI,GAAGA,GAAG,QAAQ,CAAC;gBAClB,GAAGe,YAAY;gBAChBK,OAAOhB;gBACPD,WAAWE;0BAEV,GAAGQ,OAAO,GAAG,EAAEC,WAAW;;;;AAKrC,GAAG"}

package/dist/form/FormMessageContainer.d.ts

@@ -1,10 +1,11 @@
 import { type HTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
+import { type FormMessageContainerClassNameOptions } from "./formMessageContainerStyles.js";
 import { type FormMessageProps } from "./types.js";
 /**
  * @since 2.5.0
  */
-export interface FormMessageContainerProps extends HTMLAttributes<HTMLDivElement> {
+export interface FormMessageContainerProps extends HTMLAttributes<HTMLDivElement>, FormMessageContainerClassNameOptions {
     /**
      * If the extension doesn't actually want to render the `FormMessage`
      * component, these props are optional. It kind of eliminates the whole

package/dist/form/FormMessageContainer.js

@@ -9,7 +9,7 @@ import { formMessageContainer } from "./formMessageContainerStyles.js";
  * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}
  * @since 2.5.0
  */ export const FormMessageContainer = /*#__PURE__*/ forwardRef(function FormMessageContainer(props, ref) {
-    const { className, children, messageProps, ...remaining } = props;
+    const { className, children, inline, messageProps, ...remaining } = props;
     if (!messageProps) {
         return /*#__PURE__*/ _jsx(_Fragment, {
             children: children
@@ -19,7 +19,8 @@ import { formMessageContainer } from "./formMessageContainerStyles.js";
         ...remaining,
         ref: ref,
         className: formMessageContainer({
-            className
+            className,
+            inline
         }),
         children: [
             children,

package/dist/form/FormMessageContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/FormMessageContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { FormMessage } from \"./FormMessage.js\";\nimport { formMessageContainer } from \"./formMessageContainerStyles.js\";\nimport { type FormMessageProps } from \"./types.js\";\n\n/**\n * @since 2.5.0\n */\nexport interface FormMessageContainerProps\n  extends HTMLAttributes<HTMLDivElement> {\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<FormMessageProps>;\n}\n\n/**\n * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper\n * and renders the {@link FormMessage} component.\n *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n * @since 2.5.0\n */\nexport const FormMessageContainer = forwardRef<\n  HTMLDivElement,\n  FormMessageContainerProps\n>(function FormMessageContainer(props, ref) {\n  const { className, children, messageProps, ...remaining } = props;\n  if (!messageProps) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={formMessageContainer({ className })}\n    >\n      {children}\n      <FormMessage {...messageProps} />\n    </div>\n  );\n});\n"],"names":["forwardRef","FormMessage","formMessageContainer","FormMessageContainer","props","ref","className","children","messageProps","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,kCAAkC;AAgBvE;;;;;;CAMC,GACD,OAAO,MAAMC,qCAAuBH,WAGlC,SAASG,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGC,WAAW,GAAGL;IAC5D,IAAI,CAACI,cAAc;QACjB,qBAAO;sBAAGD;;IACZ;IAEA,qBACE,MAACG;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWJ,qBAAqB;YAAEI;QAAU;;YAE3CC;0BACD,KAACN;gBAAa,GAAGO,YAAY;;;;AAGnC,GAAG"}
+{"version":3,"sources":["../../src/form/FormMessageContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { FormMessage } from \"./FormMessage.js\";\nimport {\n  type FormMessageContainerClassNameOptions,\n  formMessageContainer,\n} from \"./formMessageContainerStyles.js\";\nimport { type FormMessageProps } from \"./types.js\";\n\n/**\n * @since 2.5.0\n */\nexport interface FormMessageContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    FormMessageContainerClassNameOptions {\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<FormMessageProps>;\n}\n\n/**\n * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper\n * and renders the {@link FormMessage} component.\n *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n * @since 2.5.0\n */\nexport const FormMessageContainer = forwardRef<\n  HTMLDivElement,\n  FormMessageContainerProps\n>(function FormMessageContainer(props, ref) {\n  const { className, children, inline, messageProps, ...remaining } = props;\n  if (!messageProps) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={formMessageContainer({ className, inline })}\n    >\n      {children}\n      <FormMessage {...messageProps} />\n    </div>\n  );\n});\n"],"names":["forwardRef","FormMessage","formMessageContainer","FormMessageContainer","props","ref","className","children","inline","messageProps","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAEEC,oBAAoB,QACf,kCAAkC;AAiBzC;;;;;;CAMC,GACD,OAAO,MAAMC,qCAAuBH,WAGlC,SAASG,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,YAAY,EAAE,GAAGC,WAAW,GAAGN;IACpE,IAAI,CAACK,cAAc;QACjB,qBAAO;sBAAGF;;IACZ;IAEA,qBACE,MAACI;QACE,GAAGD,SAAS;QACbL,KAAKA;QACLC,WAAWJ,qBAAqB;YAAEI;YAAWE;QAAO;;YAEnDD;0BACD,KAACN;gBAAa,GAAGQ,YAAY;;;;AAGnC,GAAG"}

package/dist/form/FormMessageCounter.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 /** @since 2.9.0 */
 export interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement> {
     /**
@@ -39,5 +39,6 @@ export interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement>
  * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}
  * @see {@link https://react-md.dev/components/text-field | TextField Demos}
  * @since 2.9.0
+ * @since 6.3.0 Supports refs.
  */
-export declare function FormMessageCounter(props: FormMessageCounterProps): ReactElement;
+export declare const FormMessageCounter: import("react").ForwardRefExoticComponent<FormMessageCounterProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/form/FormMessageCounter.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { formMessageCounter } from "./formMessageStyles.js";
 /**
  * This component can be used to create a "counter" within the
@@ -28,15 +29,17 @@ import { formMessageCounter } from "./formMessageStyles.js";
  * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}
  * @see {@link https://react-md.dev/components/text-field | TextField Demos}
  * @since 2.9.0
- */ export function FormMessageCounter(props) {
+ * @since 6.3.0 Supports refs.
+ */ export const FormMessageCounter = /*#__PURE__*/ forwardRef(function FormMessageCounter(props, ref) {
     const { children, className, ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
+        ref: ref,
         ...remaining,
         className: formMessageCounter({
             className
         }),
         children: children
     });
-}
+});
 
 //# sourceMappingURL=FormMessageCounter.js.map

package/dist/form/FormMessageCounter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/FormMessageCounter.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement, type ReactNode } from \"react\";\n\nimport { formMessageCounter } from \"./formMessageStyles.js\";\n\n/** @since 2.9.0 */\nexport interface FormMessageCounterProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The children to display in the counter. This is normally a string like:\n   *\n   * @example String Example\n   * ```ts\n   * `${min} / ${max}`\n   * ```\n   */\n  children: ReactNode;\n}\n\n/**\n * This component can be used to create a \"counter\" within the\n * {@link FormMessage} component.\n *\n * Note: This is really only useful when using the {@link FormMessage} component\n * without a {@link TextField}.\n *\n * @example Example Usage\n * ```ts\n * interface ExampleProps {\n *   min: number;\n *   max: number;\n * }\n *\n * function Example({ min, max }: ExampleProps) {\n *   return (\n *     <FormMessage disableWrap>\n *       <FormMessageCounter>\n *         {`${min} / ${max}`}\n *       </FormMessageCounter>\n *     </FormMessage>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @since 2.9.0\n */\nexport function FormMessageCounter(\n  props: FormMessageCounterProps\n): ReactElement {\n  const { children, className, ...remaining } = props;\n\n  return (\n    <span {...remaining} className={formMessageCounter({ className })}>\n      {children}\n    </span>\n  );\n}\n"],"names":["formMessageCounter","FormMessageCounter","props","children","className","remaining","span"],"mappings":";AAEA,SAASA,kBAAkB,QAAQ,yBAAyB;AAgB5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,SAASC,mBACdC,KAA8B;IAE9B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGH;IAE9C,qBACE,KAACI;QAAM,GAAGD,SAAS;QAAED,WAAWJ,mBAAmB;YAAEI;QAAU;kBAC5DD;;AAGP"}
+{"version":3,"sources":["../../src/form/FormMessageCounter.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { formMessageCounter } from \"./formMessageStyles.js\";\n\n/** @since 2.9.0 */\nexport interface FormMessageCounterProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The children to display in the counter. This is normally a string like:\n   *\n   * @example String Example\n   * ```ts\n   * `${min} / ${max}`\n   * ```\n   */\n  children: ReactNode;\n}\n\n/**\n * This component can be used to create a \"counter\" within the\n * {@link FormMessage} component.\n *\n * Note: This is really only useful when using the {@link FormMessage} component\n * without a {@link TextField}.\n *\n * @example Example Usage\n * ```ts\n * interface ExampleProps {\n *   min: number;\n *   max: number;\n * }\n *\n * function Example({ min, max }: ExampleProps) {\n *   return (\n *     <FormMessage disableWrap>\n *       <FormMessageCounter>\n *         {`${min} / ${max}`}\n *       </FormMessageCounter>\n *     </FormMessage>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @since 2.9.0\n * @since 6.3.0 Supports refs.\n */\nexport const FormMessageCounter = forwardRef<\n  HTMLSpanElement,\n  FormMessageCounterProps\n>(function FormMessageCounter(props, ref): ReactElement {\n  const { children, className, ...remaining } = props;\n\n  return (\n    <span\n      ref={ref}\n      {...remaining}\n      className={formMessageCounter({ className })}\n    >\n      {children}\n    </span>\n  );\n});\n"],"names":["forwardRef","formMessageCounter","FormMessageCounter","props","ref","children","className","remaining","span"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAASC,kBAAkB,QAAQ,yBAAyB;AAgB5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,mCAAqBF,WAGhC,SAASE,mBAAmBC,KAAK,EAAEC,GAAG;IACtC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAE9C,qBACE,KAACK;QACCJ,KAAKA;QACJ,GAAGG,SAAS;QACbD,WAAWL,mBAAmB;YAAEK;QAAU;kBAEzCD;;AAGP,GAAG"}

package/dist/form/Listbox.d.ts

@@ -1,20 +1,13 @@
-import { type Dispatch, type ReactElement, type ReactNode, type Ref } from "react";
+import { type ReactElement, type ReactNode, type Ref } from "react";
 import { type MenuProps } from "../menu/Menu.js";
 import { type LabelRequiredForA11y } from "../types.js";
-import { type OptionSelectedIconProps } from "./Option.js";
+import { type ListboxProviderOptions, type ListboxValue } from "./ListboxProvider.js";
 /**
  * @since 6.0.0
  * @internal
  */
-export type ListboxValue = string | number | null | object;
-/**
- * @since 6.0.0
- * @internal
- */
-export interface ListboxProps<Value extends ListboxValue> extends MenuProps, OptionSelectedIconProps {
+export interface ListboxProps<Value extends ListboxValue> extends MenuProps, ListboxProviderOptions<Value> {
     nodeRef?: Ref<HTMLDivElement>;
-    value: Value | readonly NonNullable<ListboxValue>[];
-    setValue: Dispatch<NonNullable<Value>>;
     children: ReactNode;
 }
 /**

package/dist/form/Listbox.js

@@ -1,40 +1,21 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
 import { Menu } from "../menu/Menu.js";
-import { ListboxProvider } from "./ListboxProvider.js";
+import { ListboxProvider, useListboxProvider } from "./ListboxProvider.js";
 /**
  * @since 6.0.0
  * @internal
  */ export function Listbox(props) {
     const { value, setValue, children, nodeRef, selectedIconAfter, selectedIcon, unselectedIcon, disableSelectedIcon, ...remaining } = props;
-    const values = useMemo(()=>{
-        if (Array.isArray(value)) {
-            return new Set(value);
-        }
-        return new Set([
-            value
-        ]);
-    }, [
-        value
-    ]);
     return /*#__PURE__*/ _jsx(ListboxProvider, {
-        value: useMemo(()=>({
-                selectOption: setValue,
-                isOptionSelected (option) {
-                    return values.has(option);
-                },
-                selectedIcon,
-                unselectedIcon,
-                selectedIconAfter,
-                disableSelectedIcon
-            }), [
-            disableSelectedIcon,
+        value: useListboxProvider({
+            value,
+            setValue,
             selectedIcon,
             selectedIconAfter,
-            setValue,
-            unselectedIcon,
-            values
-        ]),
+            disableSelectedIcon,
+            unselectedIcon
+        }),
         children: /*#__PURE__*/ _jsx(Menu, {
             ...remaining,
             ref: nodeRef,

package/dist/form/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Listbox.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useMemo,\n} from \"react\";\n\nimport { Menu, type MenuProps } from \"../menu/Menu.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { ListboxProvider } from \"./ListboxProvider.js\";\nimport { type OptionSelectedIconProps } from \"./Option.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ListboxValue = string | number | null | object;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ListboxProps<Value extends ListboxValue>\n  extends MenuProps,\n    OptionSelectedIconProps {\n  nodeRef?: Ref<HTMLDivElement>;\n\n  value: Value | readonly NonNullable<ListboxValue>[];\n  setValue: Dispatch<NonNullable<Value>>;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function Listbox<T extends ListboxValue>(\n  props: LabelRequiredForA11y<ListboxProps<T>>\n): ReactElement {\n  const {\n    value,\n    setValue,\n    children,\n    nodeRef,\n    selectedIconAfter,\n    selectedIcon,\n    unselectedIcon,\n    disableSelectedIcon,\n    ...remaining\n  } = props;\n  const values = useMemo(() => {\n    if (Array.isArray(value)) {\n      return new Set(value);\n    }\n\n    return new Set([value]);\n  }, [value]);\n\n  return (\n    <ListboxProvider\n      value={useMemo(\n        () => ({\n          selectOption: setValue,\n          isOptionSelected(option) {\n            return values.has(option);\n          },\n          selectedIcon,\n          unselectedIcon,\n          selectedIconAfter,\n          disableSelectedIcon,\n        }),\n        [\n          disableSelectedIcon,\n          selectedIcon,\n          selectedIconAfter,\n          setValue,\n          unselectedIcon,\n          values,\n        ]\n      )}\n    >\n      <Menu {...remaining} ref={nodeRef}>\n        {children}\n      </Menu>\n    </ListboxProvider>\n  );\n}\n"],"names":["useMemo","Menu","ListboxProvider","Listbox","props","value","setValue","children","nodeRef","selectedIconAfter","selectedIcon","unselectedIcon","disableSelectedIcon","remaining","values","Array","isArray","Set","selectOption","isOptionSelected","option","has","ref"],"mappings":";AAAA,SAKEA,OAAO,QACF,QAAQ;AAEf,SAASC,IAAI,QAAwB,kBAAkB;AAEvD,SAASC,eAAe,QAAQ,uBAAuB;AAuBvD;;;CAGC,GACD,OAAO,SAASC,QACdC,KAA4C;IAE5C,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACnB,GAAGC,WACJ,GAAGT;IACJ,MAAMU,SAASd,QAAQ;QACrB,IAAIe,MAAMC,OAAO,CAACX,QAAQ;YACxB,OAAO,IAAIY,IAAIZ;QACjB;QAEA,OAAO,IAAIY,IAAI;YAACZ;SAAM;IACxB,GAAG;QAACA;KAAM;IAEV,qBACE,KAACH;QACCG,OAAOL,QACL,IAAO,CAAA;gBACLkB,cAAcZ;gBACda,kBAAiBC,MAAM;oBACrB,OAAON,OAAOO,GAAG,CAACD;gBACpB;gBACAV;gBACAC;gBACAF;gBACAG;YACF,CAAA,GACA;YACEA;YACAF;YACAD;YACAH;YACAK;YACAG;SACD;kBAGH,cAAA,KAACb;YAAM,GAAGY,SAAS;YAAES,KAAKd;sBACvBD;;;AAIT"}
+{"version":3,"sources":["../../src/form/Listbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode, type Ref } from \"react\";\n\nimport { Menu, type MenuProps } from \"../menu/Menu.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport {\n  ListboxProvider,\n  type ListboxProviderOptions,\n  type ListboxValue,\n  useListboxProvider,\n} from \"./ListboxProvider.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ListboxProps<Value extends ListboxValue>\n  extends MenuProps,\n    ListboxProviderOptions<Value> {\n  nodeRef?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function Listbox<T extends ListboxValue>(\n  props: LabelRequiredForA11y<ListboxProps<T>>\n): ReactElement {\n  const {\n    value,\n    setValue,\n    children,\n    nodeRef,\n    selectedIconAfter,\n    selectedIcon,\n    unselectedIcon,\n    disableSelectedIcon,\n    ...remaining\n  } = props;\n\n  return (\n    <ListboxProvider\n      value={useListboxProvider({\n        value,\n        setValue,\n        selectedIcon,\n        selectedIconAfter,\n        disableSelectedIcon,\n        unselectedIcon,\n      })}\n    >\n      <Menu {...remaining} ref={nodeRef}>\n        {children}\n      </Menu>\n    </ListboxProvider>\n  );\n}\n"],"names":["Menu","ListboxProvider","useListboxProvider","Listbox","props","value","setValue","children","nodeRef","selectedIconAfter","selectedIcon","unselectedIcon","disableSelectedIcon","remaining","ref"],"mappings":"AAAA;;AAIA,SAASA,IAAI,QAAwB,kBAAkB;AAEvD,SACEC,eAAe,EAGfC,kBAAkB,QACb,uBAAuB;AAa9B;;;CAGC,GACD,OAAO,SAASC,QACdC,KAA4C;IAE5C,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACnB,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACH;QACCI,OAAOH,mBAAmB;YACxBG;YACAC;YACAI;YACAD;YACAG;YACAD;QACF;kBAEA,cAAA,KAACX;YAAM,GAAGa,SAAS;YAAEC,KAAKN;sBACvBD;;;AAIT"}

package/dist/form/ListboxProvider.d.ts

@@ -1,3 +1,4 @@
+import { type Dispatch } from "react";
 import { type OptionSelectedIconProps } from "./Option.js";
 /**
  * @internal
@@ -19,3 +20,19 @@ export declare const ListboxProvider: import("react").Provider<ListboxContext |
  * @since 6.0.0
  */
 export declare function useListboxContext(): ListboxContext;
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export type ListboxValue = string | number | null | object;
+/**
+ * @since 6.3.0
+ */
+export interface ListboxProviderOptions<Value extends ListboxValue> extends OptionSelectedIconProps {
+    value: ListboxValue | readonly NonNullable<ListboxValue>[];
+    setValue: Dispatch<NonNullable<Value>>;
+}
+/**
+ * @since 6.3.0
+ */
+export declare function useListboxProvider<Value extends ListboxValue>(options: ListboxProviderOptions<Value>): ListboxContext;

package/dist/form/ListboxProvider.js

@@ -1,5 +1,5 @@
 "use client";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 const context = createContext(null);
 /**
  * **Client Component**
@@ -17,5 +17,37 @@ const context = createContext(null);
     }
     return value;
 }
+/**
+ * @since 6.3.0
+ */ export function useListboxProvider(options) {
+    const { value, setValue, selectedIconAfter, selectedIcon, unselectedIcon, disableSelectedIcon } = options;
+    const values = useMemo(()=>{
+        if (Array.isArray(value)) {
+            return new Set(value);
+        }
+        return new Set([
+            value
+        ]);
+    }, [
+        value
+    ]);
+    return useMemo(()=>({
+            selectOption: setValue,
+            isOptionSelected (option) {
+                return values.has(option);
+            },
+            selectedIcon,
+            unselectedIcon,
+            selectedIconAfter,
+            disableSelectedIcon
+        }), [
+        disableSelectedIcon,
+        selectedIcon,
+        selectedIconAfter,
+        setValue,
+        unselectedIcon,
+        values
+    ]);
+}
 
 //# sourceMappingURL=ListboxProvider.js.map

package/dist/form/ListboxProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/ListboxProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\nimport { type OptionSelectedIconProps } from \"./Option.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface ListboxContext extends OptionSelectedIconProps {\n  // NOTE: These are not converted to arrow functions so the option can be\n  // inferred correctly\n  selectOption(option: unknown): void;\n  isOptionSelected(option: unknown): boolean;\n}\n\nconst context = createContext<ListboxContext | null>(null);\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const { Provider: ListboxProvider } = context;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useListboxContext(): ListboxContext {\n  const value = useContext(context);\n  if (!value) {\n    throw new Error(\"The `ListboxProvider` must be a parent component\");\n  }\n\n  return value;\n}\n"],"names":["createContext","useContext","context","Provider","ListboxProvider","useListboxContext","value","Error"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAelD,MAAMC,UAAUF,cAAqC;AAErD;;;;;CAKC,GACD,OAAO,MAAM,EAAEG,UAAUC,eAAe,EAAE,GAAGF,QAAQ;AAErD;;;CAGC,GACD,OAAO,SAASG;IACd,MAAMC,QAAQL,WAAWC;IACzB,IAAI,CAACI,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IAEA,OAAOD;AACT"}
+{"version":3,"sources":["../../src/form/ListboxProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { type Dispatch, createContext, useContext, useMemo } from \"react\";\n\nimport { type OptionSelectedIconProps } from \"./Option.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface ListboxContext extends OptionSelectedIconProps {\n  // NOTE: These are not converted to arrow functions so the option can be\n  // inferred correctly\n  selectOption(option: unknown): void;\n  isOptionSelected(option: unknown): boolean;\n}\n\nconst context = createContext<ListboxContext | null>(null);\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const { Provider: ListboxProvider } = context;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useListboxContext(): ListboxContext {\n  const value = useContext(context);\n  if (!value) {\n    throw new Error(\"The `ListboxProvider` must be a parent component\");\n  }\n\n  return value;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ListboxValue = string | number | null | object;\n\n/**\n * @since 6.3.0\n */\nexport interface ListboxProviderOptions<Value extends ListboxValue>\n  extends OptionSelectedIconProps {\n  value: ListboxValue | readonly NonNullable<ListboxValue>[];\n  setValue: Dispatch<NonNullable<Value>>;\n}\n\n/**\n * @since 6.3.0\n */\nexport function useListboxProvider<Value extends ListboxValue>(\n  options: ListboxProviderOptions<Value>\n): ListboxContext {\n  const {\n    value,\n    setValue,\n    selectedIconAfter,\n    selectedIcon,\n    unselectedIcon,\n    disableSelectedIcon,\n  } = options;\n\n  const values = useMemo(() => {\n    if (Array.isArray(value)) {\n      return new Set(value);\n    }\n\n    return new Set([value]);\n  }, [value]);\n\n  return useMemo(\n    () => ({\n      selectOption: setValue,\n      isOptionSelected(option) {\n        return values.has(option);\n      },\n      selectedIcon,\n      unselectedIcon,\n      selectedIconAfter,\n      disableSelectedIcon,\n    }),\n    [\n      disableSelectedIcon,\n      selectedIcon,\n      selectedIconAfter,\n      setValue,\n      unselectedIcon,\n      values,\n    ]\n  );\n}\n"],"names":["createContext","useContext","useMemo","context","Provider","ListboxProvider","useListboxContext","value","Error","useListboxProvider","options","setValue","selectedIconAfter","selectedIcon","unselectedIcon","disableSelectedIcon","values","Array","isArray","Set","selectOption","isOptionSelected","option","has"],"mappings":"AAAA;AAEA,SAAwBA,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAe1E,MAAMC,UAAUH,cAAqC;AAErD;;;;;CAKC,GACD,OAAO,MAAM,EAAEI,UAAUC,eAAe,EAAE,GAAGF,QAAQ;AAErD;;;CAGC,GACD,OAAO,SAASG;IACd,MAAMC,QAAQN,WAAWE;IACzB,IAAI,CAACI,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IAEA,OAAOD;AACT;AAiBA;;CAEC,GACD,OAAO,SAASE,mBACdC,OAAsC;IAEtC,MAAM,EACJH,KAAK,EACLI,QAAQ,EACRC,iBAAiB,EACjBC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACpB,GAAGL;IAEJ,MAAMM,SAASd,QAAQ;QACrB,IAAIe,MAAMC,OAAO,CAACX,QAAQ;YACxB,OAAO,IAAIY,IAAIZ;QACjB;QAEA,OAAO,IAAIY,IAAI;YAACZ;SAAM;IACxB,GAAG;QAACA;KAAM;IAEV,OAAOL,QACL,IAAO,CAAA;YACLkB,cAAcT;YACdU,kBAAiBC,MAAM;gBACrB,OAAON,OAAOO,GAAG,CAACD;YACpB;YACAT;YACAC;YACAF;YACAG;QACF,CAAA,GACA;QACEA;QACAF;QACAD;QACAD;QACAG;QACAE;KACD;AAEL"}

package/dist/form/NativeSelect.js

@@ -64,6 +64,7 @@ import { nativeSelect, nativeSelectContainer } from "./nativeSelectStyles.js";
         rightAddon = icon;
     }
     return /*#__PURE__*/ _jsx(FormMessageContainer, {
+        inline: inline,
         ...messageContainerProps,
         messageProps: messageProps && {
             error,

package/dist/form/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/NativeSelect.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type SelectHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { nativeSelect, nativeSelectContainer } from \"./nativeSelectStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutocompleteProps,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0 Added support for {@link UserAgentAutocompleteProps}\n */\nexport interface NativeSelectProps\n  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"autoComplete\">,\n    UserAgentAutocompleteProps,\n    FormFieldOptions {\n  /**\n   * A custom dropdown icon to use instead of the browser's default select\n   * dropdown icon.\n   *\n   * Set this to `null` if the browser's default icon should be used instead.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * This applies custom inline styles to the `<select>` element since the\n   * `style` prop is applied to the container element instead.\n   */\n  selectStyle?: CSSProperties;\n\n  /**\n   * This applies custom className to the `<select>` element since the\n   * `className` prop is applied to the container element instead.\n   */\n  selectClassName?: string;\n\n  /**\n   * This should be a list of `<option>` elements for specific values within the\n   * `<select>`.\n   *\n   * Check out the {@link NativeSelect} for examples around using \"placeholder\"\n   * text and requiring a value to be selected.\n   */\n  children: ReactNode;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n}\n\n/**\n * This component is a wrapper for the native `<select>` field that applies the\n * same theming as `TextField` and `TextArea` components. This component might\n * not be used much since the `Select` offers more styling options.\n *\n * @example Simple Example\n * ```tsx\n * <NativeSelect label=\"Label\">\n *   <option value=\"a\">Value 1</option>\n *   <option value=\"b\">Value 2</option>\n *   <option value=\"c\">Value 3</option>\n *   <option value=\"d\">Value 4</option>\n * </NativeSelect>\n * ```\n *\n * @example Required Value Example\n * ```tsx\n * function Example(): ReactElement {\n *   // using `defaultValue=\"\"` makes it so the first option selected by default\n *   // and considered an \"invalid\" value since it is `disabled`\n *   //\n *   // a `name` must be set with `required` so that the form validation will\n *   // fire if the value is still the empty string when the form is submitted\n *   //\n *   // the first `<option>` is kind of like placeholder text since it doesn't\n *   // have a value and is disabled by default\n *\n *   return (\n *     <NativeSelect\n *       label=\"State\"\n *       name=\"state\"\n *       required\n *       defaultValue=\"\"\n *     >\n *       <option value=\"\" disabled>Choose a state</option>\n *       {states.map(({ name, code }) => (\n *         <option key={code} value={code}>{name}</option>\n *       ))}\n *     </NativeSelect>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/native-select | NativeSelect Demos}\n */\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n  function NativeSelect(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      icon: propIcon,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      selectStyle,\n      selectClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense,\n      error,\n      active,\n      inline,\n      leftAddon,\n      rightAddon: propRightAddon,\n      leftAddonProps,\n      rightAddonProps,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      children,\n      ...remaining\n    } = props;\n    const { disabled, readOnly, multiple } = props;\n    const id = useEnsuredId(propId, \"select\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const icon = getIcon(\"dropdown\", propIcon);\n    const underlined = theme === \"underline\" || theme === \"filled\";\n\n    let rightAddon = propRightAddon;\n    if (typeof propRightAddon === \"undefined\" && !multiple) {\n      rightAddon = icon;\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={\n          messageProps && {\n            error,\n            theme,\n            ...messageProps,\n          }\n        }\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={nativeSelectContainer({\n            label: !!label,\n            multiple,\n            underlined,\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          <select\n            {...remaining}\n            id={id}\n            ref={ref}\n            autoComplete={autoComplete}\n            name={name}\n            disabled={disabled}\n            style={selectStyle}\n            className={nativeSelect({\n              icon: !!icon,\n              className: selectClassName,\n            })}\n          >\n            {children}\n          </select>\n          {label && (\n            <Label\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","nativeSelect","nativeSelectContainer","NativeSelect","props","ref","id","propId","style","className","icon","propIcon","label","labelProps","labelStyle","labelClassName","selectStyle","selectClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","leftAddon","rightAddon","propRightAddon","leftAddonProps","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","multiple","underlined","select","htmlFor","floating"],"mappings":";AAAA,SAKEA,UAAU,QACL,QAAQ;AAEf,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,YAAY,EAAEC,qBAAqB,QAAQ,0BAA0B;AAoD9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CC,GACD,OAAO,MAAMC,6BAAeT,WAC1B,SAASS,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,MAAMC,QAAQ,EACdC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,eAAe,EACfC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,eAAe,EACfC,sBAAsB,EACtBC,uBAAuB,EACvBC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGpC;IACJ,MAAM,EAAEqC,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGvC;IACzC,MAAME,KAAKV,aAAaW,QAAQ;IAChC,MAAMyB,QAAQhC,cAAc,SAASiC;IACrC,MAAMC,qBAAqBlC,cACzB,sBACAmC;IAEF,MAAMzB,OAAOf,QAAQ,YAAYgB;IACjC,MAAMiC,aAAaZ,UAAU,eAAeA,UAAU;IAEtD,IAAIN,aAAaC;IACjB,IAAI,OAAOA,mBAAmB,eAAe,CAACgB,UAAU;QACtDjB,aAAahB;IACf;IAEA,qBACE,KAACb;QACE,GAAGwC,qBAAqB;QACzBD,cACEA,gBAAgB;YACdd;YACAU;YACA,GAAGI,YAAY;QACjB;kBAGF,cAAA,MAACrC;YACE,GAAGuC,cAAc;YAClB9B,OAAOA;YACPC,WAAWP,sBAAsB;gBAC/BU,OAAO,CAAC,CAACA;gBACT+B;gBACAC;gBACAnC;YACF;YACAuB,OAAOA;YACPpB,OAAO,CAAC,CAACA;YACTU,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRmB,UAAUA;YACVD,UAAUA;YACVhB,WAAWA;YACXG,gBAAgBA;YAChBF,YAAYA;YACZG,iBAAiBA;YACjBK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACc;oBACE,GAAGL,SAAS;oBACblC,IAAIA;oBACJD,KAAKA;oBACLc,cAAcA;oBACdC,MAAMA;oBACNqB,UAAUA;oBACVjC,OAAOQ;oBACPP,WAAWR,aAAa;wBACtBS,MAAM,CAAC,CAACA;wBACRD,WAAWQ;oBACb;8BAECsB;;gBAEF3B,uBACC,KAACd;oBACE,GAAGe,UAAU;oBACdiC,SAASxC;oBACTE,OAAOK,YAAYL,SAASM;oBAC5BL,WAAWI,YAAYJ,aAAaM;oBACpCgC,QAAQ;oBACR1B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRkB,UAAUA;8BAET7B;;;;;AAMb,GACA"}
+{"version":3,"sources":["../../src/form/NativeSelect.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type SelectHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { nativeSelect, nativeSelectContainer } from \"./nativeSelectStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutocompleteProps,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0 Added support for {@link UserAgentAutocompleteProps}\n */\nexport interface NativeSelectProps\n  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"autoComplete\">,\n    UserAgentAutocompleteProps,\n    FormFieldOptions {\n  /**\n   * A custom dropdown icon to use instead of the browser's default select\n   * dropdown icon.\n   *\n   * Set this to `null` if the browser's default icon should be used instead.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * This applies custom inline styles to the `<select>` element since the\n   * `style` prop is applied to the container element instead.\n   */\n  selectStyle?: CSSProperties;\n\n  /**\n   * This applies custom className to the `<select>` element since the\n   * `className` prop is applied to the container element instead.\n   */\n  selectClassName?: string;\n\n  /**\n   * This should be a list of `<option>` elements for specific values within the\n   * `<select>`.\n   *\n   * Check out the {@link NativeSelect} for examples around using \"placeholder\"\n   * text and requiring a value to be selected.\n   */\n  children: ReactNode;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n}\n\n/**\n * This component is a wrapper for the native `<select>` field that applies the\n * same theming as `TextField` and `TextArea` components. This component might\n * not be used much since the `Select` offers more styling options.\n *\n * @example Simple Example\n * ```tsx\n * <NativeSelect label=\"Label\">\n *   <option value=\"a\">Value 1</option>\n *   <option value=\"b\">Value 2</option>\n *   <option value=\"c\">Value 3</option>\n *   <option value=\"d\">Value 4</option>\n * </NativeSelect>\n * ```\n *\n * @example Required Value Example\n * ```tsx\n * function Example(): ReactElement {\n *   // using `defaultValue=\"\"` makes it so the first option selected by default\n *   // and considered an \"invalid\" value since it is `disabled`\n *   //\n *   // a `name` must be set with `required` so that the form validation will\n *   // fire if the value is still the empty string when the form is submitted\n *   //\n *   // the first `<option>` is kind of like placeholder text since it doesn't\n *   // have a value and is disabled by default\n *\n *   return (\n *     <NativeSelect\n *       label=\"State\"\n *       name=\"state\"\n *       required\n *       defaultValue=\"\"\n *     >\n *       <option value=\"\" disabled>Choose a state</option>\n *       {states.map(({ name, code }) => (\n *         <option key={code} value={code}>{name}</option>\n *       ))}\n *     </NativeSelect>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/native-select | NativeSelect Demos}\n */\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n  function NativeSelect(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      icon: propIcon,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      selectStyle,\n      selectClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense,\n      error,\n      active,\n      inline,\n      leftAddon,\n      rightAddon: propRightAddon,\n      leftAddonProps,\n      rightAddonProps,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      children,\n      ...remaining\n    } = props;\n    const { disabled, readOnly, multiple } = props;\n    const id = useEnsuredId(propId, \"select\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const icon = getIcon(\"dropdown\", propIcon);\n    const underlined = theme === \"underline\" || theme === \"filled\";\n\n    let rightAddon = propRightAddon;\n    if (typeof propRightAddon === \"undefined\" && !multiple) {\n      rightAddon = icon;\n    }\n\n    return (\n      <FormMessageContainer\n        inline={inline}\n        {...messageContainerProps}\n        messageProps={\n          messageProps && {\n            error,\n            theme,\n            ...messageProps,\n          }\n        }\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={nativeSelectContainer({\n            label: !!label,\n            multiple,\n            underlined,\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          <select\n            {...remaining}\n            id={id}\n            ref={ref}\n            autoComplete={autoComplete}\n            name={name}\n            disabled={disabled}\n            style={selectStyle}\n            className={nativeSelect({\n              icon: !!icon,\n              className: selectClassName,\n            })}\n          >\n            {children}\n          </select>\n          {label && (\n            <Label\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","nativeSelect","nativeSelectContainer","NativeSelect","props","ref","id","propId","style","className","icon","propIcon","label","labelProps","labelStyle","labelClassName","selectStyle","selectClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","leftAddon","rightAddon","propRightAddon","leftAddonProps","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","multiple","underlined","select","htmlFor","floating"],"mappings":";AAAA,SAKEA,UAAU,QACL,QAAQ;AAEf,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,YAAY,EAAEC,qBAAqB,QAAQ,0BAA0B;AAoD9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CC,GACD,OAAO,MAAMC,6BAAeT,WAC1B,SAASS,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,MAAMC,QAAQ,EACdC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,eAAe,EACfC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,eAAe,EACfC,sBAAsB,EACtBC,uBAAuB,EACvBC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGpC;IACJ,MAAM,EAAEqC,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGvC;IACzC,MAAME,KAAKV,aAAaW,QAAQ;IAChC,MAAMyB,QAAQhC,cAAc,SAASiC;IACrC,MAAMC,qBAAqBlC,cACzB,sBACAmC;IAEF,MAAMzB,OAAOf,QAAQ,YAAYgB;IACjC,MAAMiC,aAAaZ,UAAU,eAAeA,UAAU;IAEtD,IAAIN,aAAaC;IACjB,IAAI,OAAOA,mBAAmB,eAAe,CAACgB,UAAU;QACtDjB,aAAahB;IACf;IAEA,qBACE,KAACb;QACC2B,QAAQA;QACP,GAAGa,qBAAqB;QACzBD,cACEA,gBAAgB;YACdd;YACAU;YACA,GAAGI,YAAY;QACjB;kBAGF,cAAA,MAACrC;YACE,GAAGuC,cAAc;YAClB9B,OAAOA;YACPC,WAAWP,sBAAsB;gBAC/BU,OAAO,CAAC,CAACA;gBACT+B;gBACAC;gBACAnC;YACF;YACAuB,OAAOA;YACPpB,OAAO,CAAC,CAACA;YACTU,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRmB,UAAUA;YACVD,UAAUA;YACVhB,WAAWA;YACXG,gBAAgBA;YAChBF,YAAYA;YACZG,iBAAiBA;YACjBK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACc;oBACE,GAAGL,SAAS;oBACblC,IAAIA;oBACJD,KAAKA;oBACLc,cAAcA;oBACdC,MAAMA;oBACNqB,UAAUA;oBACVjC,OAAOQ;oBACPP,WAAWR,aAAa;wBACtBS,MAAM,CAAC,CAACA;wBACRD,WAAWQ;oBACb;8BAECsB;;gBAEF3B,uBACC,KAACd;oBACE,GAAGe,UAAU;oBACdiC,SAASxC;oBACTE,OAAOK,YAAYL,SAASM;oBAC5BL,WAAWI,YAAYJ,aAAaM;oBACpCgC,QAAQ;oBACR1B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRkB,UAAUA;8BAET7B;;;;;AAMb,GACA"}

package/dist/form/TextArea.js

@@ -99,6 +99,7 @@ import { useResizingTextArea } from "./useResizingTextArea.js";
         });
     }
     return /*#__PURE__*/ _jsx(FormMessageContainer, {
+        inline: inline,
         ...messageContainerProps,
         messageProps: messageProps,
         children: /*#__PURE__*/ _jsx(TextFieldContainer, {