@webiny/admin-ui 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/Slider/primitives/presenters/SliderPresenter.test.js

@@ -1,97 +1,99 @@
 import { SliderPresenter } from "./SliderPresenter.js";
 import { describe, expect, it, vi } from "vitest";
-describe("SliderPresenter", () => {
-  const onValueChange = vi.fn();
-  const presenter = new SliderPresenter();
-  it("should return the compatible `vm` based on params", () => {
-    // `value`
-    {
-      presenter.init({
-        onValueChange,
-        value: 50
-      });
-      expect(presenter.vm.value).toEqual([50]);
-      expect(presenter.vm.textValue).toEqual("50");
-    }
-
-    // `min`
-    {
-      presenter.init({
-        onValueChange,
-        min: 25
-      });
-      expect(presenter.vm.min).toEqual(25);
-      expect(presenter.vm.textValue).toEqual("25");
-    }
-    {
-      // default: no optional params
-      presenter.init({
-        onValueChange
-      });
-      expect(presenter.vm.value).toEqual(undefined);
-      expect(presenter.vm.min).toEqual(0); // `min` should default to 0
-      expect(presenter.vm.textValue).toEqual("0");
-      expect(presenter.vm.showTooltip).toEqual(false);
-    }
-  });
-  it("should apply `transformValue` function if provided", () => {
-    const transformValue = value => `${value} units`;
+describe("SliderPresenter", ()=>{
+    const onValueChange = vi.fn();
     const presenter = new SliderPresenter();
-    presenter.init({
-      onValueChange,
-      value: 30,
-      transformValue
+    it("should return the compatible `vm` based on params", ()=>{
+        presenter.init({
+            onValueChange,
+            value: 50
+        });
+        expect(presenter.vm.value).toEqual([
+            50
+        ]);
+        expect(presenter.vm.textValue).toEqual("50");
+        presenter.init({
+            onValueChange,
+            min: 25
+        });
+        expect(presenter.vm.min).toEqual(25);
+        expect(presenter.vm.textValue).toEqual("25");
+        presenter.init({
+            onValueChange
+        });
+        expect(presenter.vm.value).toEqual(void 0);
+        expect(presenter.vm.min).toEqual(0);
+        expect(presenter.vm.textValue).toEqual("0");
+        expect(presenter.vm.showTooltip).toEqual(false);
     });
-    expect(presenter.vm.textValue).toEqual("30 units");
-  });
-  it("should fall back to `value` as a string if `transformValue` is undefined", () => {
-    const presenter = new SliderPresenter();
-    presenter.init({
-      onValueChange,
-      value: 45
+    it("should apply `transformValue` function if provided", ()=>{
+        const transformValue = (value)=>`${value} units`;
+        const presenter = new SliderPresenter();
+        presenter.init({
+            onValueChange,
+            value: 30,
+            transformValue
+        });
+        expect(presenter.vm.textValue).toEqual("30 units");
     });
-    expect(presenter.vm.textValue).toEqual("45");
-  });
-  it("should call `onValueChange` callback when `changeValue` is called", () => {
-    const presenter = new SliderPresenter();
-    presenter.init({
-      onValueChange,
-      value: 20
+    it("should fall back to `value` as a string if `transformValue` is undefined", ()=>{
+        const presenter = new SliderPresenter();
+        presenter.init({
+            onValueChange,
+            value: 45
+        });
+        expect(presenter.vm.textValue).toEqual("45");
     });
-    presenter.changeValue([40]);
-    expect(onValueChange).toHaveBeenCalledWith(40);
-  });
-  it("should call `onValueCommit` callback when `commitValue` is called", () => {
-    const onValueCommit = vi.fn();
-    const presenter = new SliderPresenter();
-    presenter.init({
-      onValueChange,
-      value: 20,
-      onValueCommit
+    it("should call `onValueChange` callback when `changeValue` is called", ()=>{
+        const presenter = new SliderPresenter();
+        presenter.init({
+            onValueChange,
+            value: 20
+        });
+        presenter.changeValue([
+            40
+        ]);
+        expect(onValueChange).toHaveBeenCalledWith(40);
     });
-    presenter.commitValue([40]);
-    expect(onValueCommit).toHaveBeenCalledWith(40);
-  });
-  it("should handle negative values correctly", () => {
-    const presenter = new SliderPresenter();
-    presenter.init({
-      onValueChange,
-      value: -10
+    it("should call `onValueCommit` callback when `commitValue` is called", ()=>{
+        const onValueCommit = vi.fn();
+        const presenter = new SliderPresenter();
+        presenter.init({
+            onValueChange,
+            value: 20,
+            onValueCommit
+        });
+        presenter.commitValue([
+            40
+        ]);
+        expect(onValueCommit).toHaveBeenCalledWith(40);
     });
-    expect(presenter.vm.value).toEqual([-10]);
-    expect(presenter.vm.textValue).toEqual("-10");
-  });
-  it("should toggle `showTooltip` based on actions", () => {
-    const presenter = new SliderPresenter();
-    presenter.init({
-      onValueChange,
-      showTooltip: true
+    it("should handle negative values correctly", ()=>{
+        const presenter = new SliderPresenter();
+        presenter.init({
+            onValueChange,
+            value: -10
+        });
+        expect(presenter.vm.value).toEqual([
+            -10
+        ]);
+        expect(presenter.vm.textValue).toEqual("-10");
+    });
+    it("should toggle `showTooltip` based on actions", ()=>{
+        const presenter = new SliderPresenter();
+        presenter.init({
+            onValueChange,
+            showTooltip: true
+        });
+        presenter.changeValue([
+            30
+        ]);
+        expect(presenter.vm.showTooltip).toBeTruthy();
+        presenter.commitValue([
+            30
+        ]);
+        expect(presenter.vm.showTooltip).toBeFalsy();
     });
-    presenter.changeValue([30]);
-    expect(presenter.vm.showTooltip).toBeTruthy();
-    presenter.commitValue([30]);
-    expect(presenter.vm.showTooltip).toBeFalsy();
-  });
 });
 
 //# sourceMappingURL=SliderPresenter.test.js.map

package/Slider/primitives/presenters/SliderPresenter.test.js.map

@@ -1 +1 @@
-{"version":3,"names":["SliderPresenter","describe","expect","it","vi","onValueChange","fn","presenter","init","value","vm","toEqual","textValue","min","undefined","showTooltip","transformValue","changeValue","toHaveBeenCalledWith","onValueCommit","commitValue","toBeTruthy","toBeFalsy"],"sources":["SliderPresenter.test.ts"],"sourcesContent":["import { SliderPresenter } from \"./SliderPresenter.js\";\nimport { describe, expect, it, vi } from \"vitest\";\n\ndescribe(\"SliderPresenter\", () => {\n    const onValueChange = vi.fn();\n    const presenter = new SliderPresenter();\n\n    it(\"should return the compatible `vm` based on params\", () => {\n        // `value`\n        {\n            presenter.init({ onValueChange, value: 50 });\n            expect(presenter.vm.value).toEqual([50]);\n            expect(presenter.vm.textValue).toEqual(\"50\");\n        }\n\n        // `min`\n        {\n            presenter.init({ onValueChange, min: 25 });\n            expect(presenter.vm.min).toEqual(25);\n            expect(presenter.vm.textValue).toEqual(\"25\");\n        }\n\n        {\n            // default: no optional params\n            presenter.init({ onValueChange });\n            expect(presenter.vm.value).toEqual(undefined);\n            expect(presenter.vm.min).toEqual(0); // `min` should default to 0\n            expect(presenter.vm.textValue).toEqual(\"0\");\n            expect(presenter.vm.showTooltip).toEqual(false);\n        }\n    });\n\n    it(\"should apply `transformValue` function if provided\", () => {\n        const transformValue = (value: number) => `${value} units`;\n        const presenter = new SliderPresenter();\n        presenter.init({ onValueChange, value: 30, transformValue });\n        expect(presenter.vm.textValue).toEqual(\"30 units\");\n    });\n\n    it(\"should fall back to `value` as a string if `transformValue` is undefined\", () => {\n        const presenter = new SliderPresenter();\n        presenter.init({ onValueChange, value: 45 });\n        expect(presenter.vm.textValue).toEqual(\"45\");\n    });\n\n    it(\"should call `onValueChange` callback when `changeValue` is called\", () => {\n        const presenter = new SliderPresenter();\n        presenter.init({ onValueChange, value: 20 });\n        presenter.changeValue([40]);\n        expect(onValueChange).toHaveBeenCalledWith(40);\n    });\n\n    it(\"should call `onValueCommit` callback when `commitValue` is called\", () => {\n        const onValueCommit = vi.fn();\n        const presenter = new SliderPresenter();\n        presenter.init({ onValueChange, value: 20, onValueCommit });\n        presenter.commitValue([40]);\n        expect(onValueCommit).toHaveBeenCalledWith(40);\n    });\n\n    it(\"should handle negative values correctly\", () => {\n        const presenter = new SliderPresenter();\n        presenter.init({ onValueChange, value: -10 });\n        expect(presenter.vm.value).toEqual([-10]);\n        expect(presenter.vm.textValue).toEqual(\"-10\");\n    });\n\n    it(\"should toggle `showTooltip` based on actions\", () => {\n        const presenter = new SliderPresenter();\n        presenter.init({ onValueChange, showTooltip: true });\n\n        presenter.changeValue([30]);\n        expect(presenter.vm.showTooltip).toBeTruthy();\n\n        presenter.commitValue([30]);\n        expect(presenter.vm.showTooltip).toBeFalsy();\n    });\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Slider/primitives/presenters/SliderPresenter.test.js","sources":["../../../../src/Slider/primitives/presenters/SliderPresenter.test.ts"],"sourcesContent":["import { SliderPresenter } from \"./SliderPresenter.js\";\nimport { describe, expect, it, vi } from \"vitest\";\n\ndescribe(\"SliderPresenter\", () => {\n    const onValueChange = vi.fn();\n    const presenter = new SliderPresenter();\n\n    it(\"should return the compatible `vm` based on params\", () => {\n        // `value`\n        {\n            presenter.init({ onValueChange, value: 50 });\n            expect(presenter.vm.value).toEqual([50]);\n            expect(presenter.vm.textValue).toEqual(\"50\");\n        }\n\n        // `min`\n        {\n            presenter.init({ onValueChange, min: 25 });\n            expect(presenter.vm.min).toEqual(25);\n            expect(presenter.vm.textValue).toEqual(\"25\");\n        }\n\n        {\n            // default: no optional params\n            presenter.init({ onValueChange });\n            expect(presenter.vm.value).toEqual(undefined);\n            expect(presenter.vm.min).toEqual(0); // `min` should default to 0\n            expect(presenter.vm.textValue).toEqual(\"0\");\n            expect(presenter.vm.showTooltip).toEqual(false);\n        }\n    });\n\n    it(\"should apply `transformValue` function if provided\", () => {\n        const transformValue = (value: number) => `${value} units`;\n        const presenter = new SliderPresenter();\n        presenter.init({ onValueChange, value: 30, transformValue });\n        expect(presenter.vm.textValue).toEqual(\"30 units\");\n    });\n\n    it(\"should fall back to `value` as a string if `transformValue` is undefined\", () => {\n        const presenter = new SliderPresenter();\n        presenter.init({ onValueChange, value: 45 });\n        expect(presenter.vm.textValue).toEqual(\"45\");\n    });\n\n    it(\"should call `onValueChange` callback when `changeValue` is called\", () => {\n        const presenter = new SliderPresenter();\n        presenter.init({ onValueChange, value: 20 });\n        presenter.changeValue([40]);\n        expect(onValueChange).toHaveBeenCalledWith(40);\n    });\n\n    it(\"should call `onValueCommit` callback when `commitValue` is called\", () => {\n        const onValueCommit = vi.fn();\n        const presenter = new SliderPresenter();\n        presenter.init({ onValueChange, value: 20, onValueCommit });\n        presenter.commitValue([40]);\n        expect(onValueCommit).toHaveBeenCalledWith(40);\n    });\n\n    it(\"should handle negative values correctly\", () => {\n        const presenter = new SliderPresenter();\n        presenter.init({ onValueChange, value: -10 });\n        expect(presenter.vm.value).toEqual([-10]);\n        expect(presenter.vm.textValue).toEqual(\"-10\");\n    });\n\n    it(\"should toggle `showTooltip` based on actions\", () => {\n        const presenter = new SliderPresenter();\n        presenter.init({ onValueChange, showTooltip: true });\n\n        presenter.changeValue([30]);\n        expect(presenter.vm.showTooltip).toBeTruthy();\n\n        presenter.commitValue([30]);\n        expect(presenter.vm.showTooltip).toBeFalsy();\n    });\n});\n"],"names":["describe","onValueChange","vi","presenter","SliderPresenter","it","expect","undefined","transformValue","value","onValueCommit"],"mappings":";;AAGAA,SAAS,mBAAmB;IACxB,MAAMC,gBAAgBC,GAAG,EAAE;IAC3B,MAAMC,YAAY,IAAIC;IAEtBC,GAAG,qDAAqD;QAGhDF,UAAU,IAAI,CAAC;YAAEF;YAAe,OAAO;QAAG;QAC1CK,OAAOH,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC;YAAC;SAAG;QACvCG,OAAOH,UAAU,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;QAKvCA,UAAU,IAAI,CAAC;YAAEF;YAAe,KAAK;QAAG;QACxCK,OAAOH,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC;QACjCG,OAAOH,UAAU,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;QAKvCA,UAAU,IAAI,CAAC;YAAEF;QAAc;QAC/BK,OAAOH,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,CAACI;QACnCD,OAAOH,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC;QACjCG,OAAOH,UAAU,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;QACvCG,OAAOH,UAAU,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC;IAEjD;IAEAE,GAAG,sDAAsD;QACrD,MAAMG,iBAAiB,CAACC,QAAkB,GAAGA,MAAM,MAAM,CAAC;QAC1D,MAAMN,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAAC;YAAEF;YAAe,OAAO;YAAIO;QAAe;QAC1DF,OAAOH,UAAU,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;IAC3C;IAEAE,GAAG,4EAA4E;QAC3E,MAAMF,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAAC;YAAEF;YAAe,OAAO;QAAG;QAC1CK,OAAOH,UAAU,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;IAC3C;IAEAE,GAAG,qEAAqE;QACpE,MAAMF,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAAC;YAAEF;YAAe,OAAO;QAAG;QAC1CE,UAAU,WAAW,CAAC;YAAC;SAAG;QAC1BG,OAAOL,eAAe,oBAAoB,CAAC;IAC/C;IAEAI,GAAG,qEAAqE;QACpE,MAAMK,gBAAgBR,GAAG,EAAE;QAC3B,MAAMC,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAAC;YAAEF;YAAe,OAAO;YAAIS;QAAc;QACzDP,UAAU,WAAW,CAAC;YAAC;SAAG;QAC1BG,OAAOI,eAAe,oBAAoB,CAAC;IAC/C;IAEAL,GAAG,2CAA2C;QAC1C,MAAMF,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAAC;YAAEF;YAAe,OAAO;QAAI;QAC3CK,OAAOH,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC;YAAC;SAAI;QACxCG,OAAOH,UAAU,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;IAC3C;IAEAE,GAAG,gDAAgD;QAC/C,MAAMF,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAAC;YAAEF;YAAe,aAAa;QAAK;QAElDE,UAAU,WAAW,CAAC;YAAC;SAAG;QAC1BG,OAAOH,UAAU,EAAE,CAAC,WAAW,EAAE,UAAU;QAE3CA,UAAU,WAAW,CAAC;YAAC;SAAG;QAC1BG,OAAOH,UAAU,EAAE,CAAC,WAAW,EAAE,SAAS;IAC9C;AACJ"}

package/Slider/primitives/presenters/index.js

@@ -1,3 +1 @@
 export * from "./SliderPresenter.js";
-
-//# sourceMappingURL=index.js.map

package/Slider/primitives/useSlider.js

@@ -1,34 +1,44 @@
 import { useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
 import { SliderPresenter } from "./presenters/SliderPresenter.js";
-export const useSlider = props => {
-  const params = useMemo(() => ({
-    min: props.min,
-    onValueChange: props.onValueChange,
-    onValueCommit: props.onValueCommit,
-    showTooltip: props.showTooltip,
-    transformValue: props.transformValue,
-    value: props.value
-  }), [props.min, props.onValueChange, props.onValueCommit, props.showTooltip, props.transformValue, props.value]);
-  const presenter = useMemo(() => {
-    const presenter = new SliderPresenter();
-    presenter.init(params);
-    return presenter;
-  }, []);
-  const [vm, setVm] = useState(presenter.vm);
-  useEffect(() => {
-    presenter.init(params);
-  }, [params]);
-  useEffect(() => {
-    return autorun(() => {
-      setVm(presenter.vm);
-    });
-  }, [presenter]);
-  return {
-    vm,
-    changeValue: presenter.changeValue,
-    commitValue: presenter.commitValue
-  };
+const useSlider = (props)=>{
+    const params = useMemo(()=>({
+            min: props.min,
+            onValueChange: props.onValueChange,
+            onValueCommit: props.onValueCommit,
+            showTooltip: props.showTooltip,
+            transformValue: props.transformValue,
+            value: props.value
+        }), [
+        props.min,
+        props.onValueChange,
+        props.onValueCommit,
+        props.showTooltip,
+        props.transformValue,
+        props.value
+    ]);
+    const presenter = useMemo(()=>{
+        const presenter = new SliderPresenter();
+        presenter.init(params);
+        return presenter;
+    }, []);
+    const [vm, setVm] = useState(presenter.vm);
+    useEffect(()=>{
+        presenter.init(params);
+    }, [
+        params
+    ]);
+    useEffect(()=>autorun(()=>{
+            setVm(presenter.vm);
+        }), [
+        presenter
+    ]);
+    return {
+        vm,
+        changeValue: presenter.changeValue,
+        commitValue: presenter.commitValue
+    };
 };
+export { useSlider };
 
 //# sourceMappingURL=useSlider.js.map

package/Slider/primitives/useSlider.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","autorun","SliderPresenter","useSlider","props","params","min","onValueChange","onValueCommit","showTooltip","transformValue","value","presenter","init","vm","setVm","changeValue","commitValue"],"sources":["useSlider.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { SliderPrimitiveProps } from \"./SliderPrimitive.js\";\nimport type { SliderPresenterParams } from \"./presenters/SliderPresenter.js\";\nimport { SliderPresenter } from \"./presenters/SliderPresenter.js\";\n\nexport const useSlider = (props: SliderPrimitiveProps) => {\n    const params: SliderPresenterParams = useMemo(\n        () => ({\n            min: props.min,\n            onValueChange: props.onValueChange,\n            onValueCommit: props.onValueCommit,\n            showTooltip: props.showTooltip,\n            transformValue: props.transformValue,\n            value: props.value\n        }),\n        [\n            props.min,\n            props.onValueChange,\n            props.onValueCommit,\n            props.showTooltip,\n            props.transformValue,\n            props.value\n        ]\n    );\n\n    const presenter = useMemo(() => {\n        const presenter = new SliderPresenter();\n        presenter.init(params);\n        return presenter;\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return { vm, changeValue: presenter.changeValue, commitValue: presenter.commitValue };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAG9B,SAASC,eAAe;AAExB,OAAO,MAAMC,SAAS,GAAIC,KAA2B,IAAK;EACtD,MAAMC,MAA6B,GAAGN,OAAO,CACzC,OAAO;IACHO,GAAG,EAAEF,KAAK,CAACE,GAAG;IACdC,aAAa,EAAEH,KAAK,CAACG,aAAa;IAClCC,aAAa,EAAEJ,KAAK,CAACI,aAAa;IAClCC,WAAW,EAAEL,KAAK,CAACK,WAAW;IAC9BC,cAAc,EAAEN,KAAK,CAACM,cAAc;IACpCC,KAAK,EAAEP,KAAK,CAACO;EACjB,CAAC,CAAC,EACF,CACIP,KAAK,CAACE,GAAG,EACTF,KAAK,CAACG,aAAa,EACnBH,KAAK,CAACI,aAAa,EACnBJ,KAAK,CAACK,WAAW,EACjBL,KAAK,CAACM,cAAc,EACpBN,KAAK,CAACO,KAAK,CAEnB,CAAC;EAED,MAAMC,SAAS,GAAGb,OAAO,CAAC,MAAM;IAC5B,MAAMa,SAAS,GAAG,IAAIV,eAAe,CAAC,CAAC;IACvCU,SAAS,CAACC,IAAI,CAACR,MAAM,CAAC;IACtB,OAAOO,SAAS;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACE,EAAE,EAAEC,KAAK,CAAC,GAAGf,QAAQ,CAACY,SAAS,CAACE,EAAE,CAAC;EAE1ChB,SAAS,CAAC,MAAM;IACZc,SAAS,CAACC,IAAI,CAACR,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZP,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBc,KAAK,CAACH,SAAS,CAACE,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACF,SAAS,CAAC,CAAC;EAEf,OAAO;IAAEE,EAAE;IAAEE,WAAW,EAAEJ,SAAS,CAACI,WAAW;IAAEC,WAAW,EAAEL,SAAS,CAACK;EAAY,CAAC;AACzF,CAAC","ignoreList":[]}
+{"version":3,"file":"Slider/primitives/useSlider.js","sources":["../../../src/Slider/primitives/useSlider.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { SliderPrimitiveProps } from \"./SliderPrimitive.js\";\nimport type { SliderPresenterParams } from \"./presenters/SliderPresenter.js\";\nimport { SliderPresenter } from \"./presenters/SliderPresenter.js\";\n\nexport const useSlider = (props: SliderPrimitiveProps) => {\n    const params: SliderPresenterParams = useMemo(\n        () => ({\n            min: props.min,\n            onValueChange: props.onValueChange,\n            onValueCommit: props.onValueCommit,\n            showTooltip: props.showTooltip,\n            transformValue: props.transformValue,\n            value: props.value\n        }),\n        [\n            props.min,\n            props.onValueChange,\n            props.onValueCommit,\n            props.showTooltip,\n            props.transformValue,\n            props.value\n        ]\n    );\n\n    const presenter = useMemo(() => {\n        const presenter = new SliderPresenter();\n        presenter.init(params);\n        return presenter;\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return { vm, changeValue: presenter.changeValue, commitValue: presenter.commitValue };\n};\n"],"names":["useSlider","props","params","useMemo","presenter","SliderPresenter","vm","setVm","useState","useEffect","autorun"],"mappings":";;;AAMO,MAAMA,YAAY,CAACC;IACtB,MAAMC,SAAgCC,QAClC,IAAO;YACH,KAAKF,MAAM,GAAG;YACd,eAAeA,MAAM,aAAa;YAClC,eAAeA,MAAM,aAAa;YAClC,aAAaA,MAAM,WAAW;YAC9B,gBAAgBA,MAAM,cAAc;YACpC,OAAOA,MAAM,KAAK;QACtB,IACA;QACIA,MAAM,GAAG;QACTA,MAAM,aAAa;QACnBA,MAAM,aAAa;QACnBA,MAAM,WAAW;QACjBA,MAAM,cAAc;QACpBA,MAAM,KAAK;KACd;IAGL,MAAMG,YAAYD,QAAQ;QACtB,MAAMC,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAACF;QACf,OAAOE;IACX,GAAG,EAAE;IAEL,MAAM,CAACE,IAAIC,MAAM,GAAGC,SAASJ,UAAU,EAAE;IAEzCK,UAAU;QACNL,UAAU,IAAI,CAACF;IACnB,GAAG;QAACA;KAAO;IAEXO,UAAU,IACCC,QAAQ;YACXH,MAAMH,UAAU,EAAE;QACtB,IACD;QAACA;KAAU;IAEd,OAAO;QAAEE;QAAI,aAAaF,UAAU,WAAW;QAAE,aAAaA,UAAU,WAAW;IAAC;AACxF"}

package/SteppedProgress/SteppedProgress.js

@@ -1,23 +1,19 @@
-import React from "react";
+import react from "react";
 import { SteppedProgressItem } from "./SteppedProgressItem.js";
 import { makeDecoratable, withStaticProps } from "../utils.js";
 import { useSteppedProgress } from "./useSteppedProgress.js";
-const DecoratableSteppedProgress = ({
-  items,
-  ...props
-}) => {
-  const {
-    vm
-  } = useSteppedProgress({
-    items
-  });
-  return /*#__PURE__*/React.createElement("div", props, vm.items.map(item => /*#__PURE__*/React.createElement(SteppedProgressItem, Object.assign({
-    key: item.id
-  }, item))));
+const DecoratableSteppedProgress = ({ items, ...props })=>{
+    const { vm } = useSteppedProgress({
+        items
+    });
+    return /*#__PURE__*/ react.createElement("div", props, vm.items.map((item)=>/*#__PURE__*/ react.createElement(SteppedProgressItem, {
+            key: item.id,
+            ...item
+        })));
 };
 const BaseSteppedProgress = makeDecoratable("SteppedProgress", DecoratableSteppedProgress);
 const SteppedProgress = withStaticProps(BaseSteppedProgress, {
-  Item: SteppedProgressItem
+    Item: SteppedProgressItem
 });
 export { SteppedProgress };
 

package/SteppedProgress/SteppedProgress.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","SteppedProgressItem","makeDecoratable","withStaticProps","useSteppedProgress","DecoratableSteppedProgress","items","props","vm","createElement","map","item","Object","assign","key","id","BaseSteppedProgress","SteppedProgress","Item"],"sources":["SteppedProgress.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ProgressItemParams } from \"./domains/index.js\";\nimport { SteppedProgressItem } from \"~/SteppedProgress/SteppedProgressItem.js\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { useSteppedProgress } from \"~/SteppedProgress/useSteppedProgress.js\";\n\ninterface SteppedProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n    items: ProgressItemParams[];\n}\n\nconst DecoratableSteppedProgress = ({ items, ...props }: SteppedProgressProps) => {\n    const { vm } = useSteppedProgress({ items });\n\n    return (\n        <div {...props}>\n            {vm.items.map(item => (\n                <SteppedProgressItem key={item.id} {...item} />\n            ))}\n        </div>\n    );\n};\n\nconst BaseSteppedProgress = makeDecoratable(\"SteppedProgress\", DecoratableSteppedProgress);\n\nconst SteppedProgress = withStaticProps(BaseSteppedProgress, {\n    Item: SteppedProgressItem\n});\n\nexport { SteppedProgress, type SteppedProgressProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,mBAAmB;AAC5B,SAASC,eAAe,EAAEC,eAAe;AACzC,SAASC,kBAAkB;AAM3B,MAAMC,0BAA0B,GAAGA,CAAC;EAAEC,KAAK;EAAE,GAAGC;AAA4B,CAAC,KAAK;EAC9E,MAAM;IAAEC;EAAG,CAAC,GAAGJ,kBAAkB,CAAC;IAAEE;EAAM,CAAC,CAAC;EAE5C,oBACIN,KAAA,CAAAS,aAAA,QAASF,KAAK,EACTC,EAAE,CAACF,KAAK,CAACI,GAAG,CAACC,IAAI,iBACdX,KAAA,CAAAS,aAAA,CAACR,mBAAmB,EAAAW,MAAA,CAAAC,MAAA;IAACC,GAAG,EAAEH,IAAI,CAACI;EAAG,GAAKJ,IAAI,CAAG,CACjD,CACA,CAAC;AAEd,CAAC;AAED,MAAMK,mBAAmB,GAAGd,eAAe,CAAC,iBAAiB,EAAEG,0BAA0B,CAAC;AAE1F,MAAMY,eAAe,GAAGd,eAAe,CAACa,mBAAmB,EAAE;EACzDE,IAAI,EAAEjB;AACV,CAAC,CAAC;AAEF,SAASgB,eAAe","ignoreList":[]}
+{"version":3,"file":"SteppedProgress/SteppedProgress.js","sources":["../../src/SteppedProgress/SteppedProgress.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ProgressItemParams } from \"./domains/index.js\";\nimport { SteppedProgressItem } from \"~/SteppedProgress/SteppedProgressItem.js\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { useSteppedProgress } from \"~/SteppedProgress/useSteppedProgress.js\";\n\ninterface SteppedProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n    items: ProgressItemParams[];\n}\n\nconst DecoratableSteppedProgress = ({ items, ...props }: SteppedProgressProps) => {\n    const { vm } = useSteppedProgress({ items });\n\n    return (\n        <div {...props}>\n            {vm.items.map(item => (\n                <SteppedProgressItem key={item.id} {...item} />\n            ))}\n        </div>\n    );\n};\n\nconst BaseSteppedProgress = makeDecoratable(\"SteppedProgress\", DecoratableSteppedProgress);\n\nconst SteppedProgress = withStaticProps(BaseSteppedProgress, {\n    Item: SteppedProgressItem\n});\n\nexport { SteppedProgress, type SteppedProgressProps };\n"],"names":["DecoratableSteppedProgress","items","props","vm","useSteppedProgress","item","SteppedProgressItem","BaseSteppedProgress","makeDecoratable","SteppedProgress","withStaticProps"],"mappings":";;;;AAUA,MAAMA,6BAA6B,CAAC,EAAEC,KAAK,EAAE,GAAGC,OAA6B;IACzE,MAAM,EAAEC,EAAE,EAAE,GAAGC,mBAAmB;QAAEH;IAAM;IAE1C,OAAO,WAAP,GACI,oBAAC,OAAQC,OACJC,GAAG,KAAK,CAAC,GAAG,CAACE,CAAAA,OAAAA,WAAAA,GACV,oBAACC,qBAAmBA;YAAC,KAAKD,KAAK,EAAE;YAAG,GAAGA,IAAI;;AAI3D;AAEA,MAAME,sBAAsBC,gBAAgB,mBAAmBR;AAE/D,MAAMS,kBAAkBC,gBAAgBH,qBAAqB;IACzD,MAAMD;AACV"}

package/SteppedProgress/SteppedProgress.stories.js

@@ -1,115 +1,144 @@
-import React from "react";
+import react from "react";
 import { SteppedProgress } from "./SteppedProgress.js";
 import { ProgressItemState } from "./domains/index.js";
 const meta = {
-  title: "Components/SteppedProgress",
-  component: SteppedProgress,
-  argTypes: {},
-  parameters: {
-    layout: "padded"
-  }
+    title: "Components/SteppedProgress",
+    component: SteppedProgress,
+    argTypes: {},
+    parameters: {
+        layout: "padded"
+    }
 };
-export default meta;
-export const Default = {
-  args: {
-    items: [{
-      label: "Step"
-    }, {
-      label: "Step In Progress",
-      state: ProgressItemState.IN_PROGRESS
-    }, {
-      label: "Step Completed",
-      state: ProgressItemState.COMPLETED
-    }, {
-      label: "Completed Affirmative",
-      state: ProgressItemState.COMPLETED_AFFIRMATIVE
-    }]
-  }
+const SteppedProgress_stories = meta;
+const Default = {
+    args: {
+        items: [
+            {
+                label: "Step"
+            },
+            {
+                label: "Step In Progress",
+                state: ProgressItemState.IN_PROGRESS
+            },
+            {
+                label: "Step Completed",
+                state: ProgressItemState.COMPLETED
+            },
+            {
+                label: "Completed Affirmative",
+                state: ProgressItemState.COMPLETED_AFFIRMATIVE
+            }
+        ]
+    }
 };
-export const WithMultipleLines = {
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "240px"
+const WithMultipleLines = {
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                style: {
+                    width: "240px"
+                }
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ],
+    args: {
+        items: [
+            {
+                label: "Step but with multiple lines of text."
+            },
+            {
+                label: "Step in progress but with multiple lines of text.",
+                state: ProgressItemState.IN_PROGRESS
+            },
+            {
+                label: "Step completed but with multiple lines of text.",
+                state: ProgressItemState.COMPLETED
+            },
+            {
+                label: "Completed affirmative but with multiple lines of text.",
+                state: ProgressItemState.COMPLETED_AFFIRMATIVE
+            }
+        ]
     }
-  }, /*#__PURE__*/React.createElement(Story, null))],
-  args: {
-    items: [{
-      label: "Step but with multiple lines of text."
-    }, {
-      label: "Step in progress but with multiple lines of text.",
-      state: ProgressItemState.IN_PROGRESS
-    }, {
-      label: "Step completed but with multiple lines of text.",
-      state: ProgressItemState.COMPLETED
-    }, {
-      label: "Completed affirmative but with multiple lines of text.",
-      state: ProgressItemState.COMPLETED_AFFIRMATIVE
-    }]
-  }
 };
-export const Disabled = {
-  args: {
-    items: [{
-      label: "Step",
-      disabled: true
-    }, {
-      label: "Step In Progress",
-      state: ProgressItemState.IN_PROGRESS,
-      disabled: true
-    }, {
-      label: "Step Completed",
-      state: ProgressItemState.COMPLETED,
-      disabled: true
-    }, {
-      label: "Completed Affirmative",
-      state: ProgressItemState.COMPLETED_AFFIRMATIVE,
-      disabled: true
-    }]
-  }
+const Disabled = {
+    args: {
+        items: [
+            {
+                label: "Step",
+                disabled: true
+            },
+            {
+                label: "Step In Progress",
+                state: ProgressItemState.IN_PROGRESS,
+                disabled: true
+            },
+            {
+                label: "Step Completed",
+                state: ProgressItemState.COMPLETED,
+                disabled: true
+            },
+            {
+                label: "Completed Affirmative",
+                state: ProgressItemState.COMPLETED_AFFIRMATIVE,
+                disabled: true
+            }
+        ]
+    }
 };
-export const Errored = {
-  args: {
-    items: [{
-      label: "Step",
-      errored: true
-    }, {
-      label: "Step In Progress",
-      state: ProgressItemState.IN_PROGRESS,
-      errored: true
-    }, {
-      label: "Step Completed",
-      state: ProgressItemState.COMPLETED,
-      errored: true
-    }, {
-      label: "Completed Affirmative",
-      state: ProgressItemState.COMPLETED_AFFIRMATIVE,
-      errored: true
-    }]
-  }
+const Errored = {
+    args: {
+        items: [
+            {
+                label: "Step",
+                errored: true
+            },
+            {
+                label: "Step In Progress",
+                state: ProgressItemState.IN_PROGRESS,
+                errored: true
+            },
+            {
+                label: "Step Completed",
+                state: ProgressItemState.COMPLETED,
+                errored: true
+            },
+            {
+                label: "Completed Affirmative",
+                state: ProgressItemState.COMPLETED_AFFIRMATIVE,
+                errored: true
+            }
+        ]
+    }
 };
-export const DisabledAndErrored = {
-  args: {
-    items: [{
-      label: "Step",
-      disabled: true,
-      errored: true
-    }, {
-      label: "Step In Progress",
-      state: ProgressItemState.IN_PROGRESS,
-      disabled: true,
-      errored: true
-    }, {
-      label: "Step Completed",
-      state: ProgressItemState.COMPLETED,
-      disabled: true,
-      errored: true
-    }, {
-      label: "Completed Affirmative",
-      state: ProgressItemState.COMPLETED_AFFIRMATIVE,
-      disabled: true,
-      errored: true
-    }]
-  }
+const DisabledAndErrored = {
+    args: {
+        items: [
+            {
+                label: "Step",
+                disabled: true,
+                errored: true
+            },
+            {
+                label: "Step In Progress",
+                state: ProgressItemState.IN_PROGRESS,
+                disabled: true,
+                errored: true
+            },
+            {
+                label: "Step Completed",
+                state: ProgressItemState.COMPLETED,
+                disabled: true,
+                errored: true
+            },
+            {
+                label: "Completed Affirmative",
+                state: ProgressItemState.COMPLETED_AFFIRMATIVE,
+                disabled: true,
+                errored: true
+            }
+        ]
+    }
 };
+export default SteppedProgress_stories;
+export { Default, Disabled, DisabledAndErrored, Errored, WithMultipleLines };
 
 //# sourceMappingURL=SteppedProgress.stories.js.map