react-asc 25.0.7 → 25.1.0

package/components/Stepper/Stepper.d.ts

@@ -12,5 +12,7 @@ export interface IStepperProps {
     alternativeLabel?: boolean;
     value?: number;
     isReadonly?: boolean;
+    showDoneButton?: boolean;
+    showResetButton?: boolean;
 }
 export declare const Stepper: (props: IStepperProps) => JSX.Element;

package/components/Stepper/StepperActions/StepperActions.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 export interface IStepperActionsProps {
     className?: string;
+    showDoneButton?: boolean;
+    showResetButton?: boolean;
     isCompleted?: boolean;
     isFirstStep?: boolean;
     isStepOptional?: boolean;

package/index.es.js

@@ -260,7 +260,7 @@ function useHover() {
                 node.removeEventListener('mouseout', handleMouseOut);
             };
         }
-        return;
+        return undefined;
     }, [ref.current] // Recall only if ref changes
     );
     return [ref, value];
@@ -2328,7 +2328,7 @@ var styles$e = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
 styleInject(css_248z$e);
 
 const StepperActions = (props) => {
-    const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
+    const { className, showDoneButton, showResetButton, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$e.stepperActions);
@@ -2336,11 +2336,15 @@ const StepperActions = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("div", { className: getCssClasses() },
-        React.createElement(Button, { className: "mr-2", variant: VARIANT.outline, disabled: isFirstStep, startIcon: !isFirstStep ? React.createElement(ChevronLeftSolidIcon, null) : undefined, onClick: () => onBack && onBack() }, "Back"),
+        !isFirstStep &&
+            React.createElement(Button, { className: "mr-2", variant: VARIANT.outline, startIcon: React.createElement(ChevronLeftSolidIcon, null), onClick: () => onBack && onBack() }, "Back"),
         React.createElement("div", { className: "ml-auto" },
-            isCompleted && (React.createElement(Button, { className: "mr-2", color: COLOR.secondary, variant: VARIANT.text, onClick: () => onReset && onReset() }, "Reset")),
-            isStepOptional && (React.createElement(Button, { className: "mr-2", variant: VARIANT.contained, color: COLOR.primary, onClick: () => onSkip && onSkip() }, "Skip")),
-            React.createElement(Button, { variant: VARIANT.contained, color: COLOR.primary, startIcon: isCompleted ? React.createElement(CheckSolidIcon, null) : undefined, endIcon: !isCompleted ? React.createElement(ChevronRightSolidIcon, null) : undefined, onClick: () => onNext && onNext() }, isCompleted ? 'Done' : 'Next'))));
+            isCompleted && showResetButton && (React.createElement(Button, { color: COLOR.secondary, variant: VARIANT.text, onClick: () => onReset && onReset() }, "Reset")),
+            isStepOptional && (React.createElement(Button, { variant: VARIANT.contained, color: COLOR.primary, onClick: () => onSkip && onSkip() }, "Skip")),
+            !isCompleted &&
+                React.createElement(Button, { className: 'ml-2', variant: VARIANT.contained, color: COLOR.primary, endIcon: React.createElement(ChevronRightSolidIcon, null), onClick: () => onNext && onNext() }, "Next"),
+            isCompleted && showDoneButton &&
+                React.createElement(Button, { className: 'ml-2', variant: VARIANT.contained, color: COLOR.primary, startIcon: React.createElement(CheckSolidIcon, null), onClick: () => onNext && onNext() }, "Done"))));
 };
 
 const StepPanel = (props) => {
@@ -2375,7 +2379,7 @@ var styles$c = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Steppe
 styleInject(css_248z$c);
 
 const Stepper = (props) => {
-    const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
+    const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, showDoneButton, showResetButton, onChange, onFinish } = props;
     const [steps, setSteps] = useState();
     const [activeIndex, setActiveIndex] = React.useState(0);
     const [skipped, setSkipped] = React.useState(new Set());
@@ -2392,7 +2396,7 @@ const Stepper = (props) => {
     const isStepSkipped = (step) => {
         return skipped.has(step);
     };
-    const handleClickStep = (event, newValue, index) => {
+    const handleClickStep = (index) => {
         setActiveIndex(() => {
             onChange && onChange(index);
             return index;
@@ -2407,7 +2411,7 @@ const Stepper = (props) => {
                 isDisabled: isLinear && (activeIndex + 1 < index),
                 showLabel: showLabel,
                 showProgressCheckIcon: showProgressCheckIcon,
-                onClick: (e) => handleClickStep(e.event, e.value, index)
+                onClick: () => handleClickStep(index)
             })));
     };
     const isStepOptional = (index) => {
@@ -2466,12 +2470,12 @@ const Stepper = (props) => {
     };
     return (React.createElement(React.Fragment, null, steps &&
         React.createElement(React.Fragment, null,
-            React.createElement("div", { className: getCssClasses() }, steps.map((child, index) => (React.createElement(React.Fragment, { key: child.props.value },
+            React.createElement("div", { className: getCssClasses() }, steps.map((child, index) => (React.createElement(Fragment, { key: child.props.value },
                 renderSteps(child, index),
                 index !== steps.length - 1 && React.createElement(StepConnector, { isActive: activeIndex > index }))))),
             steps && steps.map((step, index) => React.createElement(Fragment, { key: step.props.value }, index === activeIndex &&
                 React.createElement(StepPanel, null, step.props.children))),
-            React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
+            React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset, showDoneButton: showDoneButton, showResetButton: showResetButton }))));
 };
 
 var css_248z$b = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily);\n}\n.Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw);\n}\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw);\n}\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw);\n}\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw);\n}\n\nh5 {\n  font-size: 1.25rem;\n}\n\nh6 {\n  font-size: 1rem;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2;\n}";
@@ -2899,6 +2903,8 @@ var css_248z = ".TreeItem-module_treeItem__Mxsjr {\n  display: flex;\n  flex-dir
 var styles = {"treeItem":"TreeItem-module_treeItem__Mxsjr"};
 styleInject(css_248z);
 
+// TODO - extract
+const TreeViewItemPadding = 48;
 const TreeItem = (props) => {
     const { nodeId, label, children, className, isExpanded, isSelected, isSelectable, onToggleExpand, onItemSelect } = props;
     const [_isExpanded, setIsExpanded] = useState(false);
@@ -2927,7 +2933,7 @@ const TreeItem = (props) => {
         setIsSelected(!_isSelected);
         onItemSelect && onItemSelect({ id: nodeId, isSelected: !_isSelected });
     };
-    return (React.createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
+    return (React.createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(TreeViewItemPadding * (children ? 0 : 1))}px` } },
         React.createElement("div", { className: "d-flex align-items-center" },
             children && nodeId &&
                 React.createElement(IconButton, { onClick: () => handleOnToggleExpand(nodeId), icon: !_isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),

package/index.js

@@ -269,7 +269,7 @@ function useHover() {
                 node.removeEventListener('mouseout', handleMouseOut);
             };
         }
-        return;
+        return undefined;
     }, [ref.current] // Recall only if ref changes
     );
     return [ref, value];
@@ -2337,7 +2337,7 @@ var styles$e = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
 styleInject(css_248z$e);
 
 const StepperActions = (props) => {
-    const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
+    const { className, showDoneButton, showResetButton, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$e.stepperActions);
@@ -2345,11 +2345,15 @@ const StepperActions = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement("div", { className: getCssClasses() },
-        React__default["default"].createElement(Button, { className: "mr-2", variant: exports.VARIANT.outline, disabled: isFirstStep, startIcon: !isFirstStep ? React__default["default"].createElement(ChevronLeftSolidIcon, null) : undefined, onClick: () => onBack && onBack() }, "Back"),
+        !isFirstStep &&
+            React__default["default"].createElement(Button, { className: "mr-2", variant: exports.VARIANT.outline, startIcon: React__default["default"].createElement(ChevronLeftSolidIcon, null), onClick: () => onBack && onBack() }, "Back"),
         React__default["default"].createElement("div", { className: "ml-auto" },
-            isCompleted && (React__default["default"].createElement(Button, { className: "mr-2", color: exports.COLOR.secondary, variant: exports.VARIANT.text, onClick: () => onReset && onReset() }, "Reset")),
-            isStepOptional && (React__default["default"].createElement(Button, { className: "mr-2", variant: exports.VARIANT.contained, color: exports.COLOR.primary, onClick: () => onSkip && onSkip() }, "Skip")),
-            React__default["default"].createElement(Button, { variant: exports.VARIANT.contained, color: exports.COLOR.primary, startIcon: isCompleted ? React__default["default"].createElement(CheckSolidIcon, null) : undefined, endIcon: !isCompleted ? React__default["default"].createElement(ChevronRightSolidIcon, null) : undefined, onClick: () => onNext && onNext() }, isCompleted ? 'Done' : 'Next'))));
+            isCompleted && showResetButton && (React__default["default"].createElement(Button, { color: exports.COLOR.secondary, variant: exports.VARIANT.text, onClick: () => onReset && onReset() }, "Reset")),
+            isStepOptional && (React__default["default"].createElement(Button, { variant: exports.VARIANT.contained, color: exports.COLOR.primary, onClick: () => onSkip && onSkip() }, "Skip")),
+            !isCompleted &&
+                React__default["default"].createElement(Button, { className: 'ml-2', variant: exports.VARIANT.contained, color: exports.COLOR.primary, endIcon: React__default["default"].createElement(ChevronRightSolidIcon, null), onClick: () => onNext && onNext() }, "Next"),
+            isCompleted && showDoneButton &&
+                React__default["default"].createElement(Button, { className: 'ml-2', variant: exports.VARIANT.contained, color: exports.COLOR.primary, startIcon: React__default["default"].createElement(CheckSolidIcon, null), onClick: () => onNext && onNext() }, "Done"))));
 };
 
 const StepPanel = (props) => {
@@ -2384,7 +2388,7 @@ var styles$c = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Steppe
 styleInject(css_248z$c);
 
 const Stepper = (props) => {
-    const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
+    const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, showDoneButton, showResetButton, onChange, onFinish } = props;
     const [steps, setSteps] = React.useState();
     const [activeIndex, setActiveIndex] = React__default["default"].useState(0);
     const [skipped, setSkipped] = React__default["default"].useState(new Set());
@@ -2401,7 +2405,7 @@ const Stepper = (props) => {
     const isStepSkipped = (step) => {
         return skipped.has(step);
     };
-    const handleClickStep = (event, newValue, index) => {
+    const handleClickStep = (index) => {
         setActiveIndex(() => {
             onChange && onChange(index);
             return index;
@@ -2416,7 +2420,7 @@ const Stepper = (props) => {
                 isDisabled: isLinear && (activeIndex + 1 < index),
                 showLabel: showLabel,
                 showProgressCheckIcon: showProgressCheckIcon,
-                onClick: (e) => handleClickStep(e.event, e.value, index)
+                onClick: () => handleClickStep(index)
             })));
     };
     const isStepOptional = (index) => {
@@ -2475,12 +2479,12 @@ const Stepper = (props) => {
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null, steps &&
         React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", { className: getCssClasses() }, steps.map((child, index) => (React__default["default"].createElement(React__default["default"].Fragment, { key: child.props.value },
+            React__default["default"].createElement("div", { className: getCssClasses() }, steps.map((child, index) => (React__default["default"].createElement(React.Fragment, { key: child.props.value },
                 renderSteps(child, index),
                 index !== steps.length - 1 && React__default["default"].createElement(StepConnector, { isActive: activeIndex > index }))))),
             steps && steps.map((step, index) => React__default["default"].createElement(React.Fragment, { key: step.props.value }, index === activeIndex &&
                 React__default["default"].createElement(StepPanel, null, step.props.children))),
-            React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
+            React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset, showDoneButton: showDoneButton, showResetButton: showResetButton }))));
 };
 
 var css_248z$b = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily);\n}\n.Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw);\n}\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw);\n}\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw);\n}\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw);\n}\n\nh5 {\n  font-size: 1.25rem;\n}\n\nh6 {\n  font-size: 1rem;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2;\n}";
@@ -2908,6 +2912,8 @@ var css_248z = ".TreeItem-module_treeItem__Mxsjr {\n  display: flex;\n  flex-dir
 var styles = {"treeItem":"TreeItem-module_treeItem__Mxsjr"};
 styleInject(css_248z);
 
+// TODO - extract
+const TreeViewItemPadding = 48;
 const TreeItem = (props) => {
     const { nodeId, label, children, className, isExpanded, isSelected, isSelectable, onToggleExpand, onItemSelect } = props;
     const [_isExpanded, setIsExpanded] = React.useState(false);
@@ -2936,7 +2942,7 @@ const TreeItem = (props) => {
         setIsSelected(!_isSelected);
         onItemSelect && onItemSelect({ id: nodeId, isSelected: !_isSelected });
     };
-    return (React__default["default"].createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
+    return (React__default["default"].createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(TreeViewItemPadding * (children ? 0 : 1))}px` } },
         React__default["default"].createElement("div", { className: "d-flex align-items-center" },
             children && nodeId &&
                 React__default["default"].createElement(IconButton, { onClick: () => handleOnToggleExpand(nodeId), icon: !_isExpanded ? React__default["default"].createElement(ChevronRightSolidIcon, null) : React__default["default"].createElement(ChevronDownSolidIcon, null) }),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "25.0.7",
+	"version": "25.1.0",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",