@opengeoweb/shared 2.1.0 → 2.1.1

package/lib/components/CustomSlider/CustomSlider.d.ts

@@ -1,18 +1,9 @@
 import * as React from 'react';
-import { Mark } from '@material-ui/core';
+import { SliderProps } from '@material-ui/core';
 export declare const sliderStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"sliderHeader">;
-interface CustomSliderProps {
-    value: number;
-    onChange: (event: any, newValue: number) => void;
-    onKeyDown?: (event: any) => void;
-    dataTestId?: string;
-    orientation?: 'horizontal' | 'vertical';
-    max?: number;
-    min?: number;
-    step?: number;
-    marks?: Mark[];
-    disabled?: boolean;
-    ThumbComponent?: React.ElementType<React.HTMLAttributes<HTMLSpanElement>>;
+interface CustomSliderProps extends Omit<SliderProps, 'onChange'> {
+    onChange: (event: React.ChangeEvent<HTMLSpanElement>, newValue: number) => void;
+    shouldAutoFocus?: boolean;
 }
 export declare const CustomSlider: React.FC<CustomSliderProps>;
 export default CustomSlider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   "peerDependencies": {
     "react": "16.14.0",
     "@material-ui/lab": "^4.0.0-alpha.56",
-    "@opengeoweb/theme": "2.1.0",
+    "@opengeoweb/theme": "2.1.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "2.1.0",
+    "@opengeoweb/form-fields": "2.1.1",
     "react-hook-form": "^6.12.1",
     "@material-ui/pickers": "^3.2.10",
     "@date-io/moment": "^1.3.13",

package/shared.esm.js

@@ -2318,25 +2318,17 @@ var CustomSliderComponent = withStyles(function (theme) {
     }
   };
 })(Slider);
-var CustomSlider = function CustomSlider(_ref) {
-  var value = _ref.value,
-      onChange = _ref.onChange,
-      onKeyDown = _ref.onKeyDown,
-      _ref$dataTestId = _ref.dataTestId,
-      dataTestId = _ref$dataTestId === void 0 ? 'customSlider' : _ref$dataTestId,
-      _ref$orientation = _ref.orientation,
-      orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
-      max = _ref.max,
-      min = _ref.min,
-      step = _ref.step,
-      _ref$marks = _ref.marks,
-      marks = _ref$marks === void 0 ? [] : _ref$marks,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      ThumbComponent = _ref.ThumbComponent;
-  // Add custom class (for bold text) to label adjacent to thumb component.
+var CustomSlider = function CustomSlider(_a) {
+  var value = _a.value,
+      _a$orientation = _a.orientation,
+      orientation = _a$orientation === void 0 ? 'vertical' : _a$orientation,
+      _a$shouldAutoFocus = _a.shouldAutoFocus,
+      shouldAutoFocus = _a$shouldAutoFocus === void 0 ? false : _a$shouldAutoFocus,
+      props = __rest(_a, ["value", "orientation", "shouldAutoFocus"]); // Add custom class (for bold text) to label adjacent to thumb component.
   // Material UI doesn't support highlighing only adjacent label
   // when track is highlighted everywhere below selected value.
+
+
   var element = React.useRef(null);
   var themeContext = useThemeContext();
   React.useEffect(function () {
@@ -2351,21 +2343,20 @@ var CustomSlider = function CustomSlider(_ref) {
     rest.forEach(function (element) {
       return element.classList.remove('selectedLabel');
     });
-  }, [value, themeContext.isDark]);
-  return /*#__PURE__*/React.createElement(CustomSliderComponent, {
+  }, [value, themeContext.isDark]); // autofocus
+
+  React.useEffect(function () {
+    if (shouldAutoFocus && element.current) {
+      var thumb = element.current.querySelector('.MuiSlider-thumb');
+      thumb.focus();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
+  return /*#__PURE__*/React.createElement(CustomSliderComponent, Object.assign({
     ref: element,
-    "data-testid": dataTestId,
-    orientation: orientation,
     value: value,
-    step: step,
-    max: max,
-    min: min,
-    marks: marks,
-    onChange: onChange,
-    onKeyDown: onKeyDown,
-    disabled: disabled,
-    ThumbComponent: ThumbComponent
-  });
+    orientation: orientation
+  }, props));
 };
 
 /* *

package/shared.umd.js

@@ -2207,23 +2207,15 @@
     })(core.Slider);
     var CustomSlider = function CustomSlider(_a) {
       var value = _a.value,
-          onChange = _a.onChange,
-          onKeyDown = _a.onKeyDown,
-          _b = _a.dataTestId,
-          dataTestId = _b === void 0 ? 'customSlider' : _b,
-          _c = _a.orientation,
-          orientation = _c === void 0 ? 'vertical' : _c,
-          max = _a.max,
-          min = _a.min,
-          step = _a.step,
-          _d = _a.marks,
-          marks = _d === void 0 ? [] : _d,
-          _e = _a.disabled,
-          disabled = _e === void 0 ? false : _e,
-          ThumbComponent = _a.ThumbComponent; // Add custom class (for bold text) to label adjacent to thumb component.
+          _b = _a.orientation,
+          orientation = _b === void 0 ? 'vertical' : _b,
+          _c = _a.shouldAutoFocus,
+          shouldAutoFocus = _c === void 0 ? false : _c,
+          props = __rest(_a, ["value", "orientation", "shouldAutoFocus"]); // Add custom class (for bold text) to label adjacent to thumb component.
       // Material UI doesn't support highlighing only adjacent label
       // when track is highlighted everywhere below selected value.
 
+
       var element = React__namespace.useRef(null);
       var themeContext = theme.useThemeContext();
       React__namespace.useEffect(function () {
@@ -2237,21 +2229,20 @@
         rest.forEach(function (element) {
           return element.classList.remove('selectedLabel');
         });
-      }, [value, themeContext.isDark]);
-      return /*#__PURE__*/React__namespace.createElement(CustomSliderComponent, {
+      }, [value, themeContext.isDark]); // autofocus
+
+      React__namespace.useEffect(function () {
+        if (shouldAutoFocus && element.current) {
+          var thumb = element.current.querySelector('.MuiSlider-thumb');
+          thumb.focus();
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+      }, []);
+      return /*#__PURE__*/React__namespace.createElement(CustomSliderComponent, __assign({
         ref: element,
-        "data-testid": dataTestId,
-        orientation: orientation,
         value: value,
-        step: step,
-        max: max,
-        min: min,
-        marks: marks,
-        onChange: onChange,
-        onKeyDown: onKeyDown,
-        disabled: disabled,
-        ThumbComponent: ThumbComponent
-      });
+        orientation: orientation
+      }, props));
     };
 
     /* *