@react-md/core 1.0.0-next.9 → 6.0.1

package/dist/form/useResizingTextArea.js

@@ -1,16 +1,17 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useResizeObserver } from "../useResizeObserver.js";
 // this is the default of 1.5rem line-height in the styles
-const DEFAULT_LINE_HEIGHT = "24";
+const DEFAULT_LINE_HEIGHT = 24;
 const noop = ()=>{
 // do nothing
 };
 /** @internal */ export function useResizingTextArea(options) {
-    const { maxRows, resize, onChange = noop, containerRef } = options;
+    const { maxRows, resize, onChange = noop, containerRef: propContainerRef, disableTransition } = options;
     const maskRef = useRef(null);
+    const [containerRef, containerRefCallback] = useEnsuredRef(propContainerRef);
     const [height, setHeight] = useState();
-    const [scrollable, setScrollable] = useState(false);
     useEffect(()=>{
         if (resize !== "auto") {
             setHeight(undefined);
@@ -18,32 +19,59 @@ const noop = ()=>{
     }, [
         resize
     ]);
+    // Since access to the DOM is required to calculate the current height of the
+    // textarea, do not enable the height transition until it has been calculated
+    // once.
+    const isHeightSet = useRef(true);
+    useEffect(()=>{
+        isHeightSet.current = !height;
+    }, [
+        height
+    ]);
+    // Do not enable the scrollbar until the max height has been reached since
+    // it'll flash as the user types on OS that display scrollbars.
+    //
+    // Note: This does cause an infinite loop issue on browsers that display OS
+    // when rendered in a flex/grid container and a "fluid" width since:
+    // - the width changes when the overflow changes to `auto`
+    // - the resize observer triggers since there was a width change
+    // - the number of rows imght change because of this width change
+    // - it might no longer be at the max height, so remove the scrollbar
+    // - restart
+    const [isMaxHeightReached, setMaxHeightReached] = useState(false);
     const updateHeight = useCallback(()=>{
         const mask = maskRef.current;
         const container = containerRef.current;
-        if (!mask || !container) {
+        /* c8 ignore start */ if (!mask || !container) {
             return;
         }
-        const containerStyles = window.getComputedStyle(container);
-        const borderHeight = parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth);
+        /* c8 ignore stop */ const containerStyles = window.getComputedStyle(container);
+        const isBorderBox = containerStyles.boxSizing === "border-box";
+        let borderHeight = 0;
+        if (isBorderBox) {
+            borderHeight = parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth);
+        }
         let nextHeight = mask.scrollHeight + borderHeight;
-        /* istanbul ignore if */ if (maxRows > 0) {
-            const lineHeight = parseFloat(window.getComputedStyle(mask).lineHeight || DEFAULT_LINE_HEIGHT);
-            const maxHeight = maxRows * lineHeight;
-            nextHeight = Math.min(maxHeight, nextHeight);
-            // only want the textarea to be scrollable if there's a limit on the rows
-            // since it'll flash the scrollbar on most OS during the height transition
-            if (nextHeight === maxHeight && !scrollable) {
-                setScrollable(true);
-            } else if (nextHeight !== maxHeight && scrollable) {
-                setScrollable(false);
+        if (maxRows > 0) {
+            nextHeight -= borderHeight;
+            const maskStyles = window.getComputedStyle(mask);
+            // in tests, this is `"normal"` by default instead of a number
+            let lineHeight = parseFloat(maskStyles.lineHeight);
+            if (Number.isNaN(lineHeight)) {
+                lineHeight = DEFAULT_LINE_HEIGHT;
             }
+            const maxHeight = maxRows * lineHeight;
+            setMaxHeightReached(nextHeight > maxHeight + borderHeight);
+            nextHeight = Math.min(maxHeight, nextHeight) + borderHeight;
+        }
+        // This just makes snapshots look nicer since `nextHeight` will be 0 in
+        // tests unless the user mocks out all the DOM properties
+        if (nextHeight) {
+            setHeight(nextHeight);
         }
-        setHeight(nextHeight + 2);
     }, [
         containerRef,
-        maxRows,
-        scrollable
+        maxRows
     ]);
     const maskRefCallback = useResizeObserver({
         ref: maskRef,
@@ -53,11 +81,13 @@ const noop = ()=>{
     return {
         height: typeof height === "number" ? `${height}px` : undefined,
         maskRef: maskRefCallback,
-        scrollable,
+        containerRef: containerRefCallback,
+        scrollable: maxRows > 0 && isMaxHeightReached,
+        disableTransition: disableTransition || isHeightSet.current,
         onChange (event) {
-            const mask = maskRef.current;
             onChange(event);
-            if (event.isPropagationStopped() || !mask || resize !== "auto") {
+            const mask = maskRef.current;
+            if (!mask || resize !== "auto") {
                 return;
             }
             // to get the height transition to work, you have to set the height on:

package/dist/form/useResizingTextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useResizingTextArea.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEventHandler,\n  type RefCallback,\n  type RefObject,\n} from \"react\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\n\n// this is the default of 1.5rem line-height in the styles\nconst DEFAULT_LINE_HEIGHT = \"24\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * A textarea is normally resizable in browsers by default by dragging the\n * bottom right corner to the desired size which will set inline styles for\n * `height` and `width`. Since this makes creating layouts a bit more difficult,\n * this is disabled by default but can be configured using one of these values:\n *\n * - `\"auto\"` - The textarea will automatically grow in in height as the user\n *   types until a max number of rows have been added. If there is additional\n *   text, a scrollbar will appear in the textarea. The browser's native resize\n *   behavior is disabled.\n * - `\"none\"` - The textarea's height and width will remain static\n * - `\"horizontal\"` - The textarea's width can be resized by the browser's\n *   native resize behavior.\n * - `\"vertical\"` - The textarea's height can be resized by the browser's native\n *   resize behavior.\n * - `\"both\"` - The browser's native resize behavior will be allowed.\n */\nexport type TextAreaResize =\n  | \"none\"\n  | \"auto\"\n  | \"horizontal\"\n  | \"vertical\"\n  | \"both\";\n\n/** @internal */\nexport interface ResizingTextAreaOptions {\n  resize: TextAreaResize;\n  maxRows: number;\n  onChange: ChangeEventHandler<HTMLTextAreaElement> | undefined;\n  containerRef: RefObject<HTMLDivElement>;\n}\n\n/** @internal */\nexport interface ResizingTextAreaReturnValue {\n  height: string | undefined;\n  maskRef: RefCallback<HTMLTextAreaElement>;\n  onChange: ChangeEventHandler<HTMLTextAreaElement>;\n  scrollable: boolean;\n}\n\n/** @internal */\nexport function useResizingTextArea(\n  options: ResizingTextAreaOptions\n): ResizingTextAreaReturnValue {\n  const { maxRows, resize, onChange = noop, containerRef } = options;\n\n  const maskRef = useRef<HTMLTextAreaElement>(null);\n  const [height, setHeight] = useState<number>();\n  const [scrollable, setScrollable] = useState(false);\n  useEffect(() => {\n    if (resize !== \"auto\") {\n      setHeight(undefined);\n    }\n  }, [resize]);\n\n  const updateHeight = useCallback(() => {\n    const mask = maskRef.current;\n    const container = containerRef.current;\n    if (!mask || !container) {\n      return;\n    }\n\n    const containerStyles = window.getComputedStyle(container);\n    const borderHeight =\n      parseFloat(containerStyles.borderTopWidth) +\n      parseFloat(containerStyles.borderBottomWidth);\n    let nextHeight = mask.scrollHeight + borderHeight;\n    /* istanbul ignore if */\n    if (maxRows > 0) {\n      const lineHeight = parseFloat(\n        window.getComputedStyle(mask).lineHeight || DEFAULT_LINE_HEIGHT\n      );\n      const maxHeight = maxRows * lineHeight;\n      nextHeight = Math.min(maxHeight, nextHeight);\n\n      // only want the textarea to be scrollable if there's a limit on the rows\n      // since it'll flash the scrollbar on most OS during the height transition\n      if (nextHeight === maxHeight && !scrollable) {\n        setScrollable(true);\n      } else if (nextHeight !== maxHeight && scrollable) {\n        setScrollable(false);\n      }\n    }\n\n    setHeight(nextHeight + 2);\n  }, [containerRef, maxRows, scrollable]);\n\n  const maskRefCallback = useResizeObserver({\n    ref: maskRef,\n    onUpdate: updateHeight,\n    disableHeight: true,\n  });\n\n  return {\n    height: typeof height === \"number\" ? `${height}px` : undefined,\n    maskRef: maskRefCallback,\n    scrollable,\n    onChange(event) {\n      const mask = maskRef.current;\n      onChange(event);\n      if (event.isPropagationStopped() || !mask || resize !== \"auto\") {\n        return;\n      }\n\n      // to get the height transition to work, you have to set the height on:\n      // - the main container element (including padding) that has the height\n      //    transition enabled\n      // - a child div wrapper (without padding) that has the height transition\n      //    enabled\n      // - the textarea element (without padding) and without a height transition\n      //\n      // if it isn't done this way, the height transition will look weird since\n      // the text will be fixed to the bottom of the area and more text at the top\n      // will become visible as the height transition completes. applying the\n      // transition on the two parent elements work because:\n      // - the height is set immediately on the text field so it expands to show all\n      //    the text\n      // - the height is correctly applied to both parent elements, but their height\n      //    haven't fully been adjusted due to the animation\n      // - the parent divs have overflow visible by default, so the textarea's text\n      //    will expand past the boundaries of the divs and not cause the upwards\n      //    animation weirdness.\n      mask.value = event.currentTarget.value;\n      updateHeight();\n    },\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useResizeObserver","DEFAULT_LINE_HEIGHT","noop","useResizingTextArea","options","maxRows","resize","onChange","containerRef","maskRef","height","setHeight","scrollable","setScrollable","undefined","updateHeight","mask","current","container","containerStyles","window","getComputedStyle","borderHeight","parseFloat","borderTopWidth","borderBottomWidth","nextHeight","scrollHeight","lineHeight","maxHeight","Math","min","maskRefCallback","ref","onUpdate","disableHeight","event","isPropagationStopped","value","currentTarget"],"mappings":"AAAA;AACA,SACEA,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QAIH,QAAQ;AACf,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,0DAA0D;AAC1D,MAAMC,sBAAsB;AAE5B,MAAMC,OAAO;AACX,aAAa;AACf;AA0CA,cAAc,GACd,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EAAEC,OAAO,EAAEC,MAAM,EAAEC,WAAWL,IAAI,EAAEM,YAAY,EAAE,GAAGJ;IAE3D,MAAMK,UAAUX,OAA4B;IAC5C,MAAM,CAACY,QAAQC,UAAU,GAAGZ;IAC5B,MAAM,CAACa,YAAYC,cAAc,GAAGd,SAAS;IAC7CF,UAAU;QACR,IAAIS,WAAW,QAAQ;YACrBK,UAAUG;QACZ;IACF,GAAG;QAACR;KAAO;IAEX,MAAMS,eAAenB,YAAY;QAC/B,MAAMoB,OAAOP,QAAQQ,OAAO;QAC5B,MAAMC,YAAYV,aAAaS,OAAO;QACtC,IAAI,CAACD,QAAQ,CAACE,WAAW;YACvB;QACF;QAEA,MAAMC,kBAAkBC,OAAOC,gBAAgB,CAACH;QAChD,MAAMI,eACJC,WAAWJ,gBAAgBK,cAAc,IACzCD,WAAWJ,gBAAgBM,iBAAiB;QAC9C,IAAIC,aAAaV,KAAKW,YAAY,GAAGL;QACrC,sBAAsB,GACtB,IAAIjB,UAAU,GAAG;YACf,MAAMuB,aAAaL,WACjBH,OAAOC,gBAAgB,CAACL,MAAMY,UAAU,IAAI3B;YAE9C,MAAM4B,YAAYxB,UAAUuB;YAC5BF,aAAaI,KAAKC,GAAG,CAACF,WAAWH;YAEjC,yEAAyE;YACzE,0EAA0E;YAC1E,IAAIA,eAAeG,aAAa,CAACjB,YAAY;gBAC3CC,cAAc;YAChB,OAAO,IAAIa,eAAeG,aAAajB,YAAY;gBACjDC,cAAc;YAChB;QACF;QAEAF,UAAUe,aAAa;IACzB,GAAG;QAAClB;QAAcH;QAASO;KAAW;IAEtC,MAAMoB,kBAAkBhC,kBAAkB;QACxCiC,KAAKxB;QACLyB,UAAUnB;QACVoB,eAAe;IACjB;IAEA,OAAO;QACLzB,QAAQ,OAAOA,WAAW,WAAW,CAAC,EAAEA,OAAO,EAAE,CAAC,GAAGI;QACrDL,SAASuB;QACTpB;QACAL,UAAS6B,KAAK;YACZ,MAAMpB,OAAOP,QAAQQ,OAAO;YAC5BV,SAAS6B;YACT,IAAIA,MAAMC,oBAAoB,MAAM,CAACrB,QAAQV,WAAW,QAAQ;gBAC9D;YACF;YAEA,uEAAuE;YACvE,uEAAuE;YACvE,wBAAwB;YACxB,yEAAyE;YACzE,aAAa;YACb,2EAA2E;YAC3E,EAAE;YACF,yEAAyE;YACzE,4EAA4E;YAC5E,uEAAuE;YACvE,sDAAsD;YACtD,8EAA8E;YAC9E,cAAc;YACd,8EAA8E;YAC9E,sDAAsD;YACtD,6EAA6E;YAC7E,2EAA2E;YAC3E,0BAA0B;YAC1BU,KAAKsB,KAAK,GAAGF,MAAMG,aAAa,CAACD,KAAK;YACtCvB;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useResizingTextArea.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type ChangeEventHandler,\n  type Ref,\n  type RefCallback,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\n\n// this is the default of 1.5rem line-height in the styles\nconst DEFAULT_LINE_HEIGHT = 24;\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * A textarea is normally resizable in browsers by default by dragging the\n * bottom right corner to the desired size which will set inline styles for\n * `height` and `width`. Since this makes creating layouts a bit more difficult,\n * this is disabled by default but can be configured using one of these values:\n *\n * - `\"auto\"` - The textarea will automatically grow in in height as the user\n *   types until a max number of rows have been added. If there is additional\n *   text, a scrollbar will appear in the textarea. The browser's native resize\n *   behavior is disabled.\n * - `\"none\"` - The textarea's height and width will remain static\n * - `\"horizontal\"` - The textarea's width can be resized by the browser's\n *   native resize behavior.\n * - `\"vertical\"` - The textarea's height can be resized by the browser's native\n *   resize behavior.\n * - `\"both\"` - The browser's native resize behavior will be allowed.\n */\nexport type TextAreaResize =\n  | \"none\"\n  | \"auto\"\n  | \"horizontal\"\n  | \"vertical\"\n  | \"both\";\n\n/** @internal */\nexport interface ResizingTextAreaOptions {\n  resize: TextAreaResize;\n  maxRows: number;\n  onChange: ChangeEventHandler<HTMLTextAreaElement> | undefined;\n  containerRef?: Ref<HTMLDivElement>;\n  disableTransition: boolean | undefined;\n}\n\n/** @internal */\nexport interface ResizingTextAreaReturnValue {\n  height: string | undefined;\n  maskRef: RefCallback<HTMLTextAreaElement>;\n  containerRef: RefCallback<HTMLDivElement>;\n  onChange: ChangeEventHandler<HTMLTextAreaElement>;\n  scrollable: boolean;\n  disableTransition: boolean;\n}\n\n/** @internal */\nexport function useResizingTextArea(\n  options: ResizingTextAreaOptions\n): ResizingTextAreaReturnValue {\n  const {\n    maxRows,\n    resize,\n    onChange = noop,\n    containerRef: propContainerRef,\n    disableTransition,\n  } = options;\n\n  const maskRef = useRef<HTMLTextAreaElement>(null);\n  const [containerRef, containerRefCallback] = useEnsuredRef(propContainerRef);\n  const [height, setHeight] = useState<number>();\n  useEffect(() => {\n    if (resize !== \"auto\") {\n      setHeight(undefined);\n    }\n  }, [resize]);\n\n  // Since access to the DOM is required to calculate the current height of the\n  // textarea, do not enable the height transition until it has been calculated\n  // once.\n  const isHeightSet = useRef(true);\n  useEffect(() => {\n    isHeightSet.current = !height;\n  }, [height]);\n\n  // Do not enable the scrollbar until the max height has been reached since\n  // it'll flash as the user types on OS that display scrollbars.\n  //\n  // Note: This does cause an infinite loop issue on browsers that display OS\n  // when rendered in a flex/grid container and a \"fluid\" width since:\n  // - the width changes when the overflow changes to `auto`\n  // - the resize observer triggers since there was a width change\n  // - the number of rows imght change because of this width change\n  // - it might no longer be at the max height, so remove the scrollbar\n  // - restart\n  const [isMaxHeightReached, setMaxHeightReached] = useState(false);\n  const updateHeight = useCallback(() => {\n    const mask = maskRef.current;\n    const container = containerRef.current;\n    /* c8 ignore start */\n    if (!mask || !container) {\n      return;\n    }\n    /* c8 ignore stop */\n\n    const containerStyles = window.getComputedStyle(container);\n    const isBorderBox = containerStyles.boxSizing === \"border-box\";\n    let borderHeight = 0;\n    if (isBorderBox) {\n      borderHeight =\n        parseFloat(containerStyles.borderTopWidth) +\n        parseFloat(containerStyles.borderBottomWidth);\n    }\n\n    let nextHeight = mask.scrollHeight + borderHeight;\n    if (maxRows > 0) {\n      nextHeight -= borderHeight;\n      const maskStyles = window.getComputedStyle(mask);\n      // in tests, this is `\"normal\"` by default instead of a number\n      let lineHeight = parseFloat(maskStyles.lineHeight);\n      if (Number.isNaN(lineHeight)) {\n        lineHeight = DEFAULT_LINE_HEIGHT;\n      }\n\n      const maxHeight = maxRows * lineHeight;\n      setMaxHeightReached(nextHeight > maxHeight + borderHeight);\n      nextHeight = Math.min(maxHeight, nextHeight) + borderHeight;\n    }\n\n    // This just makes snapshots look nicer since `nextHeight` will be 0 in\n    // tests unless the user mocks out all the DOM properties\n    if (nextHeight) {\n      setHeight(nextHeight);\n    }\n  }, [containerRef, maxRows]);\n\n  const maskRefCallback = useResizeObserver({\n    ref: maskRef,\n    onUpdate: updateHeight,\n    disableHeight: true,\n  });\n\n  return {\n    height: typeof height === \"number\" ? `${height}px` : undefined,\n    maskRef: maskRefCallback,\n    containerRef: containerRefCallback,\n    scrollable: maxRows > 0 && isMaxHeightReached,\n    disableTransition: disableTransition || isHeightSet.current,\n    onChange(event) {\n      onChange(event);\n\n      const mask = maskRef.current;\n      if (!mask || resize !== \"auto\") {\n        return;\n      }\n\n      // to get the height transition to work, you have to set the height on:\n      // - the main container element (including padding) that has the height\n      //    transition enabled\n      // - a child div wrapper (without padding) that has the height transition\n      //    enabled\n      // - the textarea element (without padding) and without a height transition\n      //\n      // if it isn't done this way, the height transition will look weird since\n      // the text will be fixed to the bottom of the area and more text at the top\n      // will become visible as the height transition completes. applying the\n      // transition on the two parent elements work because:\n      // - the height is set immediately on the text field so it expands to show all\n      //    the text\n      // - the height is correctly applied to both parent elements, but their height\n      //    haven't fully been adjusted due to the animation\n      // - the parent divs have overflow visible by default, so the textarea's text\n      //    will expand past the boundaries of the divs and not cause the upwards\n      //    animation weirdness.\n      mask.value = event.currentTarget.value;\n      updateHeight();\n    },\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useEnsuredRef","useResizeObserver","DEFAULT_LINE_HEIGHT","noop","useResizingTextArea","options","maxRows","resize","onChange","containerRef","propContainerRef","disableTransition","maskRef","containerRefCallback","height","setHeight","undefined","isHeightSet","current","isMaxHeightReached","setMaxHeightReached","updateHeight","mask","container","containerStyles","window","getComputedStyle","isBorderBox","boxSizing","borderHeight","parseFloat","borderTopWidth","borderBottomWidth","nextHeight","scrollHeight","maskStyles","lineHeight","Number","isNaN","maxHeight","Math","min","maskRefCallback","ref","onUpdate","disableHeight","scrollable","event","value","currentTarget"],"mappings":"AAAA;AAEA,SAIEA,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,0DAA0D;AAC1D,MAAMC,sBAAsB;AAE5B,MAAMC,OAAO;AACX,aAAa;AACf;AA6CA,cAAc,GACd,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EACJC,OAAO,EACPC,MAAM,EACNC,WAAWL,IAAI,EACfM,cAAcC,gBAAgB,EAC9BC,iBAAiB,EAClB,GAAGN;IAEJ,MAAMO,UAAUd,OAA4B;IAC5C,MAAM,CAACW,cAAcI,qBAAqB,GAAGb,cAAcU;IAC3D,MAAM,CAACI,QAAQC,UAAU,GAAGhB;IAC5BF,UAAU;QACR,IAAIU,WAAW,QAAQ;YACrBQ,UAAUC;QACZ;IACF,GAAG;QAACT;KAAO;IAEX,6EAA6E;IAC7E,6EAA6E;IAC7E,QAAQ;IACR,MAAMU,cAAcnB,OAAO;IAC3BD,UAAU;QACRoB,YAAYC,OAAO,GAAG,CAACJ;IACzB,GAAG;QAACA;KAAO;IAEX,0EAA0E;IAC1E,+DAA+D;IAC/D,EAAE;IACF,2EAA2E;IAC3E,oEAAoE;IACpE,0DAA0D;IAC1D,gEAAgE;IAChE,iEAAiE;IACjE,qEAAqE;IACrE,YAAY;IACZ,MAAM,CAACK,oBAAoBC,oBAAoB,GAAGrB,SAAS;IAC3D,MAAMsB,eAAezB,YAAY;QAC/B,MAAM0B,OAAOV,QAAQM,OAAO;QAC5B,MAAMK,YAAYd,aAAaS,OAAO;QACtC,mBAAmB,GACnB,IAAI,CAACI,QAAQ,CAACC,WAAW;YACvB;QACF;QACA,kBAAkB,GAElB,MAAMC,kBAAkBC,OAAOC,gBAAgB,CAACH;QAChD,MAAMI,cAAcH,gBAAgBI,SAAS,KAAK;QAClD,IAAIC,eAAe;QACnB,IAAIF,aAAa;YACfE,eACEC,WAAWN,gBAAgBO,cAAc,IACzCD,WAAWN,gBAAgBQ,iBAAiB;QAChD;QAEA,IAAIC,aAAaX,KAAKY,YAAY,GAAGL;QACrC,IAAIvB,UAAU,GAAG;YACf2B,cAAcJ;YACd,MAAMM,aAAaV,OAAOC,gBAAgB,CAACJ;YAC3C,8DAA8D;YAC9D,IAAIc,aAAaN,WAAWK,WAAWC,UAAU;YACjD,IAAIC,OAAOC,KAAK,CAACF,aAAa;gBAC5BA,aAAalC;YACf;YAEA,MAAMqC,YAAYjC,UAAU8B;YAC5BhB,oBAAoBa,aAAaM,YAAYV;YAC7CI,aAAaO,KAAKC,GAAG,CAACF,WAAWN,cAAcJ;QACjD;QAEA,uEAAuE;QACvE,yDAAyD;QACzD,IAAII,YAAY;YACdlB,UAAUkB;QACZ;IACF,GAAG;QAACxB;QAAcH;KAAQ;IAE1B,MAAMoC,kBAAkBzC,kBAAkB;QACxC0C,KAAK/B;QACLgC,UAAUvB;QACVwB,eAAe;IACjB;IAEA,OAAO;QACL/B,QAAQ,OAAOA,WAAW,WAAW,GAAGA,OAAO,EAAE,CAAC,GAAGE;QACrDJ,SAAS8B;QACTjC,cAAcI;QACdiC,YAAYxC,UAAU,KAAKa;QAC3BR,mBAAmBA,qBAAqBM,YAAYC,OAAO;QAC3DV,UAASuC,KAAK;YACZvC,SAASuC;YAET,MAAMzB,OAAOV,QAAQM,OAAO;YAC5B,IAAI,CAACI,QAAQf,WAAW,QAAQ;gBAC9B;YACF;YAEA,uEAAuE;YACvE,uEAAuE;YACvE,wBAAwB;YACxB,yEAAyE;YACzE,aAAa;YACb,2EAA2E;YAC3E,EAAE;YACF,yEAAyE;YACzE,4EAA4E;YAC5E,uEAAuE;YACvE,sDAAsD;YACtD,8EAA8E;YAC9E,cAAc;YACd,8EAA8E;YAC9E,sDAAsD;YACtD,6EAA6E;YAC7E,2EAA2E;YAC3E,0BAA0B;YAC1Be,KAAK0B,KAAK,GAAGD,MAAME,aAAa,CAACD,KAAK;YACtC3B;QACF;IACF;AACF"}

package/dist/form/useSelectCombobox.d.ts

@@ -1,17 +1,16 @@
-import { type BaseComboboxOptions, type ComboboxImplementation } from "./useCombobox.js";
+import { type ComboboxImplementation, type ConfigurableComboboxOptions } from "./useCombobox.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export interface SelectComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
+export interface SelectComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ConfigurableComboboxOptions<ComboboxEl, PopupEl> {
     value: string;
     values: readonly string[];
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export interface SelectComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ComboboxImplementation<ComboboxEl, PopupEl> {
-}
+export type SelectComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> = ComboboxImplementation<ComboboxEl, PopupEl>;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useSelectCombobox<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options: SelectComboboxOptions<ComboboxEl, PopupEl>): SelectComboboxImplementation<ComboboxEl, PopupEl>;

package/dist/form/useSelectCombobox.js

@@ -1,7 +1,7 @@
 "use client";
 import { useCombobox } from "./useCombobox.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useSelectCombobox(options) {
     const { value, values, ...comboboxOptions } = options;
     return useCombobox({

package/dist/form/useSelectCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useSelectCombobox.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCombobox,\n  type BaseComboboxOptions,\n  type ComboboxImplementation,\n} from \"./useCombobox.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SelectComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends BaseComboboxOptions<ComboboxEl, PopupEl> {\n  value: string;\n  values: readonly string[];\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SelectComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxImplementation<ComboboxEl, PopupEl> {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function useSelectCombobox<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: SelectComboboxOptions<ComboboxEl, PopupEl>\n): SelectComboboxImplementation<ComboboxEl, PopupEl> {\n  const { value, values, ...comboboxOptions } = options;\n\n  return useCombobox({\n    ...comboboxOptions,\n    searchable: true,\n    extendKeyDown(movementData) {\n      const { event, show, focusLast, visible } = movementData;\n      if (visible) {\n        return;\n      }\n\n      switch (event.key) {\n        case \" \":\n        case \"Home\":\n        case \"End\":\n          event.preventDefault();\n          event.stopPropagation();\n          focusLast.current = event.key === \"End\";\n          show();\n          break;\n      }\n    },\n    getEnterDefaultFocusedIndex(options) {\n      const { focusLast } = options;\n      if (focusLast && !value) {\n        return values.length - 1;\n      }\n\n      return Math.max(\n        0,\n        values.findIndex((option) => option === value)\n      );\n    },\n  });\n}\n"],"names":["useCombobox","useSelectCombobox","options","value","values","comboboxOptions","searchable","extendKeyDown","movementData","event","show","focusLast","visible","key","preventDefault","stopPropagation","current","getEnterDefaultFocusedIndex","length","Math","max","findIndex","option"],"mappings":"AAAA;AACA,SACEA,WAAW,QAGN,mBAAmB;AAqB1B;;CAEC,GACD,OAAO,SAASC,kBAIdC,OAAmD;IAEnD,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,iBAAiB,GAAGH;IAE9C,OAAOF,YAAY;QACjB,GAAGK,eAAe;QAClBC,YAAY;QACZC,eAAcC,YAAY;YACxB,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,SAAS,EAAEC,OAAO,EAAE,GAAGJ;YAC5C,IAAII,SAAS;gBACX;YACF;YAEA,OAAQH,MAAMI,GAAG;gBACf,KAAK;gBACL,KAAK;gBACL,KAAK;oBACHJ,MAAMK,cAAc;oBACpBL,MAAMM,eAAe;oBACrBJ,UAAUK,OAAO,GAAGP,MAAMI,GAAG,KAAK;oBAClCH;oBACA;YACJ;QACF;QACAO,6BAA4Bf,OAAO;YACjC,MAAM,EAAES,SAAS,EAAE,GAAGT;YACtB,IAAIS,aAAa,CAACR,OAAO;gBACvB,OAAOC,OAAOc,MAAM,GAAG;YACzB;YAEA,OAAOC,KAAKC,GAAG,CACb,GACAhB,OAAOiB,SAAS,CAAC,CAACC,SAAWA,WAAWnB;QAE5C;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useSelectCombobox.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type ComboboxImplementation,\n  type ConfigurableComboboxOptions,\n  useCombobox,\n} from \"./useCombobox.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SelectComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ConfigurableComboboxOptions<ComboboxEl, PopupEl> {\n  value: string;\n  values: readonly string[];\n}\n\n/**\n * @since 6.0.0\n */\nexport type SelectComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = ComboboxImplementation<ComboboxEl, PopupEl>;\n\n/**\n * @since 6.0.0\n */\nexport function useSelectCombobox<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: SelectComboboxOptions<ComboboxEl, PopupEl>\n): SelectComboboxImplementation<ComboboxEl, PopupEl> {\n  const { value, values, ...comboboxOptions } = options;\n\n  return useCombobox({\n    ...comboboxOptions,\n    searchable: true,\n    extendKeyDown(movementData) {\n      const { event, show, focusLast, visible } = movementData;\n      if (visible) {\n        return;\n      }\n\n      switch (event.key) {\n        case \" \":\n        case \"Home\":\n        case \"End\":\n          event.preventDefault();\n          event.stopPropagation();\n          focusLast.current = event.key === \"End\";\n          show();\n          break;\n      }\n    },\n    getEnterDefaultFocusedIndex(options) {\n      const { focusLast } = options;\n      if (focusLast && !value) {\n        return values.length - 1;\n      }\n\n      return Math.max(\n        0,\n        values.findIndex((option) => option === value)\n      );\n    },\n  });\n}\n"],"names":["useCombobox","useSelectCombobox","options","value","values","comboboxOptions","searchable","extendKeyDown","movementData","event","show","focusLast","visible","key","preventDefault","stopPropagation","current","getEnterDefaultFocusedIndex","length","Math","max","findIndex","option"],"mappings":"AAAA;AAEA,SAGEA,WAAW,QACN,mBAAmB;AAqB1B;;CAEC,GACD,OAAO,SAASC,kBAIdC,OAAmD;IAEnD,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,iBAAiB,GAAGH;IAE9C,OAAOF,YAAY;QACjB,GAAGK,eAAe;QAClBC,YAAY;QACZC,eAAcC,YAAY;YACxB,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,SAAS,EAAEC,OAAO,EAAE,GAAGJ;YAC5C,IAAII,SAAS;gBACX;YACF;YAEA,OAAQH,MAAMI,GAAG;gBACf,KAAK;gBACL,KAAK;gBACL,KAAK;oBACHJ,MAAMK,cAAc;oBACpBL,MAAMM,eAAe;oBACrBJ,UAAUK,OAAO,GAAGP,MAAMI,GAAG,KAAK;oBAClCH;oBACA;YACJ;QACF;QACAO,6BAA4Bf,OAAO;YACjC,MAAM,EAAES,SAAS,EAAE,GAAGT;YACtB,IAAIS,aAAa,CAACR,OAAO;gBACvB,OAAOC,OAAOc,MAAM,GAAG;YACzB;YAEA,OAAOC,KAAKC,GAAG,CACb,GACAhB,OAAOiB,SAAS,CAAC,CAACC,SAAWA,WAAWnB;QAE5C;IACF;AACF"}

package/dist/form/useSlider.d.ts

@@ -1,6 +1,6 @@
 import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 /**
- * @remarks \@since 2.5.0
+ * @since 2.5.0
  */
 export interface SliderValueOptions {
     /**
@@ -25,31 +25,30 @@ export interface SliderValueOptions {
     step?: number;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface SliderState {
     value: number;
     setValue: UseStateSetter<number>;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface SliderImplementation extends Required<SliderValueOptions>, SliderState {
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface SliderOptions extends SliderValueOptions {
-    /**
-     * @defaultValue `(max - min ) / 2`
-     */
+    /** @defaultValue `(max - min ) / 2` */
     defaultValue?: UseStateInitializer<number>;
 }
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { Form, Slider, useSlider } from "@react-md/core";
+ * import { Form } from "@react-md/core/form/Form";
+ * import { Slider } from "@react-md/core/form/Slider";
+ * import { useSlider } from "@react-md/core/form/useSlider";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -73,10 +72,10 @@ export interface SliderOptions extends SliderValueOptions {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slider | Slider Demos}
  * @see The `Slider` component for additional examples.
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Now returns an object instead of an ordered tuple and only
+ * @since 2.5.0
+ * @since 6.0.0 Now returns an object instead of an ordered tuple and only
  * return the `value` and `setValue` instead of all the slider functionality. In
  * addition, the hook only accepts a single object argument.
  */

package/dist/form/useSlider.js

@@ -2,10 +2,11 @@
 import { useState } from "react";
 import { getRangeDefaultValue } from "../utils/getRangeDefaultValue.js";
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { Form, Slider, useSlider } from "@react-md/core";
+ * import { Form } from "@react-md/core/form/Form";
+ * import { Slider } from "@react-md/core/form/Slider";
+ * import { useSlider } from "@react-md/core/form/useSlider";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -29,10 +30,10 @@ import { getRangeDefaultValue } from "../utils/getRangeDefaultValue.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slider | Slider Demos}
  * @see The `Slider` component for additional examples.
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Now returns an object instead of an ordered tuple and only
+ * @since 2.5.0
+ * @since 6.0.0 Now returns an object instead of an ordered tuple and only
  * return the `value` and `setValue` instead of all the slider functionality. In
  * addition, the hook only accepts a single object argument.
  */ export function useSlider(options = {}) {

package/dist/form/useSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useSlider.ts"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { getRangeDefaultValue } from \"../utils/getRangeDefaultValue.js\";\n\n/**\n * @remarks \\@since 2.5.0\n */\nexport interface SliderValueOptions {\n  /**\n   * The min value for the slider.\n   *\n   * @defaultValue `0`\n   */\n  min?: number;\n\n  /**\n   * The max value for the slider.\n   *\n   * @defaultValue `100`\n   */\n  max?: number;\n\n  /**\n   * A positive number representing the value to \"jump\" while incrementing or\n   * decrementing the slider's value. This should normally stay as the default\n   * value of `1`, but can also be decimal values if needed.\n   *\n   * @defaultValue `1`\n   */\n  step?: number;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SliderState {\n  value: number;\n  setValue: UseStateSetter<number>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SliderImplementation\n  extends Required<SliderValueOptions>,\n    SliderState {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SliderOptions extends SliderValueOptions {\n  /**\n   * @defaultValue `(max - min ) / 2`\n   */\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import { Form, Slider, useSlider } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: 50,\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { value, setValue } = slider;\n *\n *   return (\n *     <Form>\n *       <Slider {...slider} aria-label=\"Volume\" />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see The `Slider` component for additional examples.\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Now returns an object instead of an ordered tuple and only\n * return the `value` and `setValue` instead of all the slider functionality. In\n * addition, the hook only accepts a single object argument.\n */\nexport function useSlider(options: SliderOptions = {}): SliderImplementation {\n  const { min = 0, max = 100, step = 1, defaultValue } = options;\n  const [value, setValue] = useState(\n    getRangeDefaultValue({\n      min,\n      max,\n      step,\n      defaultValue,\n    })\n  );\n\n  return {\n    min,\n    max,\n    step,\n    value,\n    setValue,\n  };\n}\n"],"names":["useState","getRangeDefaultValue","useSlider","options","min","max","step","defaultValue","value","setValue"],"mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,oBAAoB,QAAQ,mCAAmC;AAuDxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,GACD,OAAO,SAASC,UAAUC,UAAyB,CAAC,CAAC;IACnD,MAAM,EAAEC,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEC,OAAO,CAAC,EAAEC,YAAY,EAAE,GAAGJ;IACvD,MAAM,CAACK,OAAOC,SAAS,GAAGT,SACxBC,qBAAqB;QACnBG;QACAC;QACAC;QACAC;IACF;IAGF,OAAO;QACLH;QACAC;QACAC;QACAE;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useSlider.ts"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { getRangeDefaultValue } from \"../utils/getRangeDefaultValue.js\";\n\n/**\n * @since 2.5.0\n */\nexport interface SliderValueOptions {\n  /**\n   * The min value for the slider.\n   *\n   * @defaultValue `0`\n   */\n  min?: number;\n\n  /**\n   * The max value for the slider.\n   *\n   * @defaultValue `100`\n   */\n  max?: number;\n\n  /**\n   * A positive number representing the value to \"jump\" while incrementing or\n   * decrementing the slider's value. This should normally stay as the default\n   * value of `1`, but can also be decimal values if needed.\n   *\n   * @defaultValue `1`\n   */\n  step?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderState {\n  value: number;\n  setValue: UseStateSetter<number>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderImplementation\n  extends Required<SliderValueOptions>,\n    SliderState {}\n\n/**\n * @since 6.0.0\n */\nexport interface SliderOptions extends SliderValueOptions {\n  /** @defaultValue `(max - min ) / 2` */\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Slider } from \"@react-md/core/form/Slider\";\n * import { useSlider } from \"@react-md/core/form/useSlider\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: 50,\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { value, setValue } = slider;\n *\n *   return (\n *     <Form>\n *       <Slider {...slider} aria-label=\"Volume\" />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/slider | Slider Demos}\n * @see The `Slider` component for additional examples.\n * @since 2.5.0\n * @since 6.0.0 Now returns an object instead of an ordered tuple and only\n * return the `value` and `setValue` instead of all the slider functionality. In\n * addition, the hook only accepts a single object argument.\n */\nexport function useSlider(options: SliderOptions = {}): SliderImplementation {\n  const { min = 0, max = 100, step = 1, defaultValue } = options;\n  const [value, setValue] = useState(\n    getRangeDefaultValue({\n      min,\n      max,\n      step,\n      defaultValue,\n    })\n  );\n\n  return {\n    min,\n    max,\n    step,\n    value,\n    setValue,\n  };\n}\n"],"names":["useState","getRangeDefaultValue","useSlider","options","min","max","step","defaultValue","value","setValue"],"mappings":"AAAA;AAEA,SAASA,QAAQ,QAAQ,QAAQ;AAGjC,SAASC,oBAAoB,QAAQ,mCAAmC;AAqDxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,SAASC,UAAUC,UAAyB,CAAC,CAAC;IACnD,MAAM,EAAEC,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEC,OAAO,CAAC,EAAEC,YAAY,EAAE,GAAGJ;IACvD,MAAM,CAACK,OAAOC,SAAS,GAAGT,SACxBC,qBAAqB;QACnBG;QACAC;QACAC;QACAC;IACF;IAGF,OAAO;QACLH;QACAC;QACAC;QACAE;QACAC;IACF;AACF"}

package/dist/form/useSliderDraggable.d.ts

@@ -0,0 +1,9 @@
+import { type DraggableImplementation, type DraggableOptions } from "../draggable/useDraggable.js";
+type SliderDraggableOptions = Pick<Required<DraggableOptions>, "ref" | "min" | "max" | "step" | "value" | "setValue" | "disabled" | "vertical"> & Pick<DraggableOptions, "rangeMin" | "rangeMax"> & {
+    jump: number;
+};
+/**
+ * @internal
+ */
+export declare function useSliderDraggable(options: SliderDraggableOptions): DraggableImplementation;
+export {};

package/dist/form/useSliderDraggable.js

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { useDraggable } from "../draggable/useDraggable.js";
+import { withinRange } from "../utils/withinRange.js";
+/**
+ * @internal
+ */ export function useSliderDraggable(options) {
+    const { value, setValue, jump, ...remaining } = options;
+    const { min, max } = options;
+    const [dragging, setDragging] = useState(false);
+    const draggable = useDraggable({
+        ...remaining,
+        withinOffsetParent: true,
+        disableDraggingCursorClassName: true,
+        dragging,
+        setDragging,
+        value,
+        setValue,
+        onKeyDown (event) {
+            switch(event.key){
+                case "PageUp":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setValue((prevValue)=>withinRange({
+                            min,
+                            max,
+                            value: prevValue + jump
+                        }));
+                    break;
+                case "PageDown":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setValue((prevValue)=>withinRange({
+                            min,
+                            max,
+                            value: prevValue - jump
+                        }));
+                    break;
+            }
+        }
+    });
+    return draggable;
+}
+
+//# sourceMappingURL=useSliderDraggable.js.map

package/dist/form/useSliderDraggable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/useSliderDraggable.ts"],"sourcesContent":["import { useState } from \"react\";\n\nimport {\n  type DraggableImplementation,\n  type DraggableOptions,\n  useDraggable,\n} from \"../draggable/useDraggable.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\n\ntype SliderDraggableOptions = Pick<\n  Required<DraggableOptions>,\n  | \"ref\"\n  | \"min\"\n  | \"max\"\n  | \"step\"\n  | \"value\"\n  | \"setValue\"\n  | \"disabled\"\n  | \"vertical\"\n> &\n  Pick<DraggableOptions, \"rangeMin\" | \"rangeMax\"> & {\n    jump: number;\n  };\n\n/**\n * @internal\n */\nexport function useSliderDraggable(\n  options: SliderDraggableOptions\n): DraggableImplementation {\n  const { value, setValue, jump, ...remaining } = options;\n  const { min, max } = options;\n  const [dragging, setDragging] = useState(false);\n  const draggable = useDraggable({\n    ...remaining,\n    withinOffsetParent: true,\n    disableDraggingCursorClassName: true,\n    dragging,\n    setDragging,\n    value,\n    setValue,\n    onKeyDown(event) {\n      switch (event.key) {\n        case \"PageUp\":\n          event.preventDefault();\n          event.stopPropagation();\n          setValue((prevValue) =>\n            withinRange({\n              min,\n              max,\n              value: prevValue + jump,\n            })\n          );\n          break;\n        case \"PageDown\":\n          event.preventDefault();\n          event.stopPropagation();\n          setValue((prevValue) =>\n            withinRange({\n              min,\n              max,\n              value: prevValue - jump,\n            })\n          );\n          break;\n      }\n    },\n  });\n\n  return draggable;\n}\n"],"names":["useState","useDraggable","withinRange","useSliderDraggable","options","value","setValue","jump","remaining","min","max","dragging","setDragging","draggable","withinOffsetParent","disableDraggingCursorClassName","onKeyDown","event","key","preventDefault","stopPropagation","prevValue"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAGEC,YAAY,QACP,+BAA+B;AACtC,SAASC,WAAW,QAAQ,0BAA0B;AAiBtD;;CAEC,GACD,OAAO,SAASC,mBACdC,OAA+B;IAE/B,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGC,WAAW,GAAGJ;IAChD,MAAM,EAAEK,GAAG,EAAEC,GAAG,EAAE,GAAGN;IACrB,MAAM,CAACO,UAAUC,YAAY,GAAGZ,SAAS;IACzC,MAAMa,YAAYZ,aAAa;QAC7B,GAAGO,SAAS;QACZM,oBAAoB;QACpBC,gCAAgC;QAChCJ;QACAC;QACAP;QACAC;QACAU,WAAUC,KAAK;YACb,OAAQA,MAAMC,GAAG;gBACf,KAAK;oBACHD,MAAME,cAAc;oBACpBF,MAAMG,eAAe;oBACrBd,SAAS,CAACe,YACRnB,YAAY;4BACVO;4BACAC;4BACAL,OAAOgB,YAAYd;wBACrB;oBAEF;gBACF,KAAK;oBACHU,MAAME,cAAc;oBACpBF,MAAMG,eAAe;oBACrBd,SAAS,CAACe,YACRnB,YAAY;4BACVO;4BACAC;4BACAL,OAAOgB,YAAYd;wBACrB;oBAEF;YACJ;QACF;IACF;IAEA,OAAOM;AACT"}

package/dist/form/useTextField.d.ts

@@ -4,12 +4,11 @@ import { type TextFieldProps } from "./TextField.js";
 import { type FormMessageInputLengthCounterProps, type FormMessageProps } from "./types.js";
 import { type GetErrorIcon, type GetErrorMessage, type IsErrored, type TextFieldValidationOptions, type TextFieldValidationType } from "./validation.js";
 /**
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Added the `onInvalid` handler
+ * @since 2.5.0
+ * @since 6.0.0 Added the `onInvalid` handler
  */
 export type TextFieldChangeHandlers<E extends HTMLInputElement | HTMLTextAreaElement> = Pick<HTMLAttributes<E>, "onBlur" | "onChange" | "onInvalid">;
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ErrorChangeHandlerOptions<E extends HTMLInputElement | HTMLTextAreaElement> {
     /**
      * A ref containing the `TextField` or `TextArea` if you need access to that
@@ -49,12 +48,11 @@ export interface ErrorChangeHandlerOptions<E extends HTMLInputElement | HTMLText
  * <Button type="submit" disabled={invalid} onClick={submitForm}>Submit</Button>
  * ```
  *
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Changed to object argument.
+ * @since 2.5.0
+ * @since 6.0.0 Changed to object argument.
  */
 export type ErrorChangeHandler<E extends HTMLInputElement | HTMLTextAreaElement> = (options: ErrorChangeHandlerOptions<E>) => void;
-/** @remarks \@since 2.5.6 */
+/** @since 2.5.6 */
 export interface TextFieldHookState {
     /**
      * The current value for the `TextField` or `TextArea`.
@@ -75,7 +73,7 @@ export interface TextFieldHookState {
  * All the props that will be generated and return from the `useTextField` hook
  * that should be passed to a `FormMessage` component.
  *
- * @remarks \@since 2.5.0
+ * @since 2.5.0
  */
 export interface ProvidedFormMessageProps extends Pick<FormMessageProps, "id" | "theme" | "children">, Required<Pick<TextFieldProps, "error">>, Partial<Pick<FormMessageInputLengthCounterProps, "length" | "maxLength">> {
 }
@@ -83,19 +81,19 @@ export interface ProvidedFormMessageProps extends Pick<FormMessageProps, "id" |
  * All the props that will be generated and returned by the `useTextField` hook
  * that should be passed to a `TextField` component.
  *
- * @remarks \@since 2.5.0
+ * @since 2.5.0
  */
 export interface ProvidedTextFieldProps<E extends HTMLInputElement | HTMLTextAreaElement> extends TextFieldValidationOptions, TextFieldChangeHandlers<E>, Required<Pick<TextFieldProps, "id" | "name" | "value" | "error">>, Pick<TextFieldProps, "aria-describedby" | "rightAddon"> {
     /**
      * A ref that must be passed to the `TextField`/`TextArea` so that the custom
      * validity behavior can work.
      *
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     ref: RefCallback<E>;
 }
 /**
- * @remarks \@since 2.5.0
+ * @since 2.5.0
  */
 export interface ProvidedTextFieldMessageProps<E extends HTMLInputElement | HTMLTextAreaElement> extends ProvidedTextFieldProps<E> {
     /**
@@ -104,7 +102,7 @@ export interface ProvidedTextFieldMessageProps<E extends HTMLInputElement | HTML
      */
     messageProps: ProvidedFormMessageProps;
 }
-/** @remarks \@since 2.5.6 */
+/** @since 2.5.6 */
 export interface TextFieldHookOptions<E extends HTMLInputElement | HTMLTextAreaElement> extends TextFieldValidationOptions, TextFieldChangeHandlers<E> {
     /**
      * An optional id to use for the `TextField` or `TextArea` that is also used
@@ -120,10 +118,10 @@ export interface TextFieldHookOptions<E extends HTMLInputElement | HTMLTextAreaE
      * `<textarea>` DOM node, you can use the `fieldRef` returned by this hook
      * instead.
      *
-     * @example
-     * Accessing TextField DOM Node
+     * @example Accessing TextField DOM Node
      * ```tsx
-     * import { TextField, useTextField } from "@react-md/core";
+     * import { TextField } from "@react-md/core/form/TextField";
+     * import { useTextField } from "@react-md/core/form/useTextField";
      * import { useEffect } from "react";
      * import type { ReactElement } from "react";
      *
@@ -217,11 +215,12 @@ export interface TextFieldHookOptions<E extends HTMLInputElement | HTMLTextAreaE
      */
     onErrorChange?: ErrorChangeHandler<E>;
     /**
-     * Boolean if the `TextField` or `TextArea` will **not** be rendered along
-     * with a `FormMessage` component. This will prevent the `aria-describedby`
-     * prop from being returned when set to `true`.
+     * Set this to `true` to prevent the `errorMessage` from being
+     * rendered inline below the `TextField`.
      *
      * @defaultValue `false`
+     * @since 6.0.0 Only disables the `errorMessage` behavior so
+     * that counters and help text can still be rendered easily.
      */
     disableMessage?: boolean;
     /**
@@ -239,18 +238,18 @@ export interface TextFieldHookOptions<E extends HTMLInputElement | HTMLTextAreaE
      */
     validationType?: TextFieldValidationType;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface TextFieldImplementation<E extends HTMLInputElement | HTMLTextAreaElement> extends TextFieldHookState {
     fieldRef: RefObject<E>;
-    reset(): void;
+    reset: () => void;
     setState: UseStateSetter<Readonly<TextFieldHookState>>;
     fieldProps: ProvidedTextFieldProps<E>;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface TextFieldWithMessageImplementation<E extends HTMLInputElement | HTMLTextAreaElement> extends TextFieldImplementation<E> {
     fieldProps: ProvidedTextFieldMessageProps<E>;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ValidatedTextFieldImplementation<E extends HTMLInputElement | HTMLTextAreaElement> extends TextFieldImplementation<E> {
     fieldProps: ProvidedTextFieldProps<E> | ProvidedTextFieldMessageProps<E>;
 }
@@ -258,11 +257,11 @@ export interface ValidatedTextFieldImplementation<E extends HTMLInputElement | H
  * If you do not want to display the error messages below the `TextField` and
  * handle error messages separately, set the `disableMessage` option to `true`.
  *
- * @example
- * No Inline Error Messages
+ * @example No Inline Error Messages
  * ```tsx
- * import type { ReactElement } from "react";
- * import { TextField, useTextField } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { useTextField } from "@react-md/core/form/useTextField";
  *
  * function Example(): ReactElement {
  *   const { fieldProps } = useTextField({
@@ -275,16 +274,19 @@ export interface ValidatedTextFieldImplementation<E extends HTMLInputElement | H
  * ```
  *
  * Look at the other {@link useTextField} override for additional examples.
+ *
+ * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}
  */
 export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(options: TextFieldHookOptions<E> & {
     disableMessage: true;
 }): TextFieldImplementation<E>;
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import type { ReactElement } from "react";
- * import { TextField, useTextField } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { useTextField } from "@react-md/core/form/useTextField";
  *
  * function Example(): ReactElement {
  *   const { fieldProps } = useTextField({
@@ -295,11 +297,11 @@ export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaEl
  * }
  * ```
  *
- * @example
- * Inline Counter
+ * @example Inline Counter
  * ```tsx
- * import type { ReactElement } from "react";
- * import { TextField, useTextField } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { useTextField } from "@react-md/core/form/useTextField";
  *
  * function Example(): ReactElement {
  *   const { fieldProps } = useTextField({
@@ -307,6 +309,8 @@ export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaEl
  *     counter: true,
  *     required: true,
  *     maxLength: 20,
+ *     // this allows the user to type beyond the max length limit and display
+ *     // an error message. omit or set to `false` to enforce the max length instead
  *     disableMaxLength: true,
  *   });
  *
@@ -314,17 +318,17 @@ export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaEl
  * }
  * ```
  *
- * @example
- * Adding Constraints
+ * @example Adding Constraints
  * ```tsx
- * import type { ReactElement } from "react";
- * import { TextField, useTextField } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { useTextField } from "@react-md/core/form/useTextField";
  *
  * function Example(): ReactElement {
  *   const { fieldProps } = useTextField({
  *     name: "example",
  *     required: true,
- *     pattern: "^[A-z]+$",
+ *     pattern: "^[A-Za-z]+$",
  *     minLength: 4,
  *     maxLength: 20,
  *   });
@@ -333,11 +337,11 @@ export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaEl
  * }
  * ```
  *
- * @example
- * Custom Validation
+ * @example Custom Validation
  * ```tsx
- * import type { ReactElement } from "react";
- * import { TextField, useTextField } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { useTextField } from "@react-md/core/form/useTextField";
  *
  * function Example(): ReactElement {
  *   const { fieldProps } = useTextField({
@@ -381,9 +385,12 @@ export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaEl
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}
  * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
- * @remarks
- * \@since 2.5.6
- * \@since 6.0.0 This hook returns an object instead of an ordered list.
+ * @since 2.5.6
+ * @since 6.0.0 This hook returns an object instead of an ordered list. Also
+ * added the ability to display an inline counter and help text while disabling
+ * the error messaging.
  */
 export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(options: TextFieldHookOptions<E>): TextFieldWithMessageImplementation<E>;