@pedidopago/ui 1.3.25 → 1.3.28

package/dist/components/Slider/index.js

@@ -15,7 +15,7 @@ var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["value", "onChange", "step", "max", "min", "fullSize", "direction", "valueLabelDisplay"];
+var _excluded = ["valueSlider", "onChangeSlider", "step", "max", "min", "fullSize", "direction", "valueLabelDisplay"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -49,9 +49,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var Slider = function Slider(_ref) {
-  var value = _ref.value,
-      onChange = _ref.onChange,
+var Slider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var valueSlider = _ref.valueSlider,
+      onChangeSlider = _ref.onChangeSlider,
       _ref$step = _ref.step,
       step = _ref$step === void 0 ? 1 : _ref$step,
       _ref$max = _ref.max,
@@ -65,33 +65,52 @@ var Slider = function Slider(_ref) {
       valueLabelDisplay = _ref$valueLabelDispla === void 0 ? 'off' : _ref$valueLabelDispla,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = (0, _react.useState)(value),
+  var _useState = (0, _react.useState)(valueSlider),
       _useState2 = _slicedToArray(_useState, 2),
       sliderValue = _useState2[0],
       setSliderValue = _useState2[1];
 
+  var sliderRef = (0, _react.useRef)(null);
+
   function handleChangeValue(percent, index) {
+    var _sliderRef$current;
+
     var value = Math.round((percent * (max - min) + min) / step) * step;
+    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
 
     if (Array.isArray(sliderValue)) {
+      var _nativeInputValueSett;
+
       var newValues = _toConsumableArray(sliderValue);
 
       newValues[index || 0] = value > max ? max : value < min ? min : value;
       setSliderValue(newValues);
+      onChangeSlider === null || onChangeSlider === void 0 ? void 0 : onChangeSlider(newValues);
+      nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : (_nativeInputValueSett = nativeInputValueSetter.set) === null || _nativeInputValueSett === void 0 ? void 0 : _nativeInputValueSett.call(sliderRef.current, newValues);
     } else {
+      var _nativeInputValueSett2;
+
       setSliderValue(value > max ? max : value < min ? min : value);
+      nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : (_nativeInputValueSett2 = nativeInputValueSetter.set) === null || _nativeInputValueSett2 === void 0 ? void 0 : _nativeInputValueSett2.call(sliderRef.current, value);
+      onChangeSlider === null || onChangeSlider === void 0 ? void 0 : onChangeSlider(value);
     }
 
-    onChange && onChange(sliderValue);
+    var event = new Event('input', {
+      bubbles: true
+    });
+    sliderRef === null || sliderRef === void 0 ? void 0 : (_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.dispatchEvent(event);
   }
 
   (0, _react.useEffect)(function () {
-    setSliderValue(value);
-  }, [value]);
+    setSliderValue(valueSlider);
+  }, [valueSlider]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return sliderRef.current;
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SliderContent, {
     direction: direction,
     fullSize: fullSize,
-    size: rest.size,
+    size: rest.sizeSlider,
     disabled: rest.disabled,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
       direction: direction === 'vertical' ? 'column-reverse' : 'row',
@@ -103,16 +122,17 @@ var Slider = function Slider(_ref) {
         children: max
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SliderSelector.SliderSelector, _objectSpread({
-      value: sliderValue,
+      ref: sliderRef,
+      valueSliderSelector: sliderValue,
       min: min,
       max: max,
       step: step,
-      onChange: handleChangeValue,
+      onChangeSliderSelector: handleChangeValue,
       direction: direction,
       valueLabelDisplay: valueLabelDisplay
     }, rest))]
   });
-};
-
+});
 var _default = Slider;
-exports.default = _default;
+exports.default = _default;
+Slider.displayName = 'Slider';

package/dist/components/Slider/slider.test.js

@@ -24,8 +24,8 @@ var setup = function setup(props) {
 describe('Slider', function () {
   it('should it render the slider component', function () {
     var _setup = setup({
-      value: 50,
-      onChange: jest.fn(),
+      valueSlider: 50,
+      onChangeSlider: jest.fn(),
       min: 0,
       max: 100
     }),
@@ -35,8 +35,8 @@ describe('Slider', function () {
   });
   it('should it render the slider component with multiply values', function () {
     var _setup2 = setup({
-      value: [50, 100],
-      onChange: jest.fn(),
+      valueSlider: [50, 100],
+      onChangeSlider: jest.fn(),
       min: 0,
       max: 100
     }),
@@ -46,8 +46,8 @@ describe('Slider', function () {
   });
   it('should it render the slider component with different pointer', function () {
     var _setup3 = setup({
-      value: 50,
-      onChange: jest.fn(),
+      valueSlider: 50,
+      onChangeSlider: jest.fn(),
       min: 0,
       max: 100,
       thumbType: 'pointer'
@@ -58,8 +58,8 @@ describe('Slider', function () {
   });
   it('should it render the slider component with different colors', function () {
     var _setup4 = setup({
-      value: 50,
-      onChange: jest.fn(),
+      valueSlider: 50,
+      onChangeSlider: jest.fn(),
       min: 0,
       max: 100,
       trackColor: 'primary.alert',
@@ -71,25 +71,25 @@ describe('Slider', function () {
   });
   it('should it render the slider component with different sizes', function () {
     var small = setup({
-      value: 50,
-      onChange: jest.fn(),
+      valueSlider: 50,
+      onChangeSlider: jest.fn(),
       min: 0,
       max: 100,
-      size: 'sm'
+      sizeSlider: 'sm'
     });
     var medium = setup({
-      value: 50,
-      onChange: jest.fn(),
+      valueSlider: 50,
+      onChangeSlider: jest.fn(),
       min: 0,
       max: 100,
-      size: 'md'
+      sizeSlider: 'md'
     });
     var large = setup({
-      value: 50,
-      onChange: jest.fn(),
+      valueSlider: 50,
+      onChangeSlider: jest.fn(),
       min: 0,
       max: 100,
-      size: 'lg'
+      sizeSlider: 'lg'
     });
     expect(small.container).toBeInTheDocument();
     expect(medium.container).toBeInTheDocument();
@@ -97,8 +97,8 @@ describe('Slider', function () {
   });
   it('should it render the slider component with label', function () {
     var _setup5 = setup({
-      value: 50,
-      onChange: jest.fn(),
+      valueSlider: 50,
+      onChangeSlider: jest.fn(),
       min: 0,
       max: 100,
       valueLabelDisplay: 'auto'
@@ -109,8 +109,8 @@ describe('Slider', function () {
   });
   it('should it render the slider component with custom label', function () {
     var _setup6 = setup({
-      value: 50,
-      onChange: jest.fn(),
+      valueSlider: 50,
+      onChangeSlider: jest.fn(),
       min: 0,
       max: 100,
       valueLabelDisplay: 'Teste'
@@ -121,8 +121,8 @@ describe('Slider', function () {
   });
   it('should it render the slider component with multiply value and different pointer', function () {
     var _setup7 = setup({
-      value: [50, 100],
-      onChange: jest.fn(),
+      valueSlider: [50, 100],
+      onChangeSlider: jest.fn(),
       min: 0,
       max: 100,
       thumbType: 'pointer'

package/dist/components/Slider/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,eAAO,MAAM,aAAa;;;;;;;;yGAiDzB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;0IAK9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;yGAW/B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;gBACV,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;;;yGAgB9C,CAAC;AAEF,eAAO,MAAM,WAAW;;;kHAIvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;gBAEV,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;;;;yGAsF9C,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;gBAGnB,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;yGA0BhD,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAO7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;2GAgEvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,eAAO,MAAM,aAAa;;;;;;;;yGAiDzB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;0IAK9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;yGAS/B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;gBACV,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;;;yGAgB9C,CAAC;AAEF,eAAO,MAAM,WAAW;;;kHAIvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;gBAEV,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;;;;yGAqF9C,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;gBAGnB,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;yGA0BhD,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAO7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;2GAgEvB,CAAC"}

package/dist/components/Slider/styles.js

@@ -38,7 +38,7 @@ var SliderContainer = _styled.default.div(_templateObject3 || (_templateObject3
 exports.SliderContainer = SliderContainer;
 
 var SliderRailContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  background: ", ";\n  border-radius: 8px;\n  cursor: pointer;\n"])), function (props) {
-  return (0, _colorCheck.stripThemeColors)(props.trackColor || '', props.theme.colors) || (props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral5 : props.theme.colors.tertiary.default);
+  return (0, _colorCheck.stripThemeColors)(props.trackColor || '', props.theme.colors) || props.theme.colors.tertiary.default;
 });
 
 exports.SliderRailContainer = SliderRailContainer;
@@ -57,12 +57,12 @@ var SliderInput = _styled.default.input(_templateObject6 || (_templateObject6 =
 
 exports.SliderInput = SliderInput;
 
-var SliderThumb = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: absolute;\n  ", "\n\n  ", "\n\n  background: ", ";\n\n  pointer-events: ", ";\n\n  cursor: pointer;\n"])), function (props) {
+var SliderThumb = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: absolute;\n  ", "\n\n  ", "\n\n  background: ", ";\n  pointer-events: ", ";\n\n  cursor: pointer;\n"])), function (props) {
   return props.direction === 'vertical' ? "\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 50%);\n  " : "\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  ";
 }, function (props) {
   return props.thumbType !== 'pointer' ? "\n      width: ".concat(props.size === 'sm' ? '20px' : '25px', ";\n      height: ").concat(props.size === 'sm' ? '20px' : '25px', ";\n      border-radius: 999999px;\n\n      transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 100%;\n        height: 100%;\n        border-radius: 999999px;\n        box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%),\n          0px 1px 5px 0px rgb(0 0 0 / 12%);\n      }\n\n      &:hover {\n        box-shadow: 0 0 0 10px\n          ").concat((0, _colorCheck.parseHexColorToRgba)((0, _colorCheck.stripThemeColors)(props.thumbColor || '', props.theme.colors) || props.theme.colors.primary.default, 0.15), ";\n      }\n\n      &:active,\n      &:focus {\n        box-shadow: 0 0 0 15px\n          ").concat((0, _colorCheck.parseHexColorToRgba)((0, _colorCheck.stripThemeColors)(props.thumbColor || '', props.theme.colors) || props.theme.colors.primary.default, 0.15), ";\n      }\n\n      &:hover,\n      &:focus,\n      &:active {\n        & span {\n          transform: ").concat(props.direction === 'vertical' ? 'translate(100%, -50%)' : 'translate(-50%, -100%)', " scale(1);\n        }\n      }\n    ") : "\n      width: ".concat(props.direction === 'vertical' ? '100%' : '5px', ";\n      height: ").concat(props.direction === 'vertical' ? '5px' : '100%', ";\n    ");
 }, function (props) {
-  if (props.disabled) return props.theme.colors.neutral.neutral4;
+  if (props.disabled) return props.theme.colors.neutral.neutral6;
   if (props.thumbType !== 'pointer') return props.theme.colors.neutral.white;
   return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.black : props.theme.colors.neutral.white;
 }, function (props) {

package/dist/components/Slider/types.d.ts

@@ -8,25 +8,26 @@ declare type IGenericSliderProps = {
     min: number;
     max: number;
     step?: number;
-    value: number | number[];
     trackColor?: GlobalColorsProps | (string & {});
     thumbColor?: GlobalColorsProps | (string & {});
     disabled?: boolean;
     fullSize?: boolean;
-    size?: 'sm' | 'md' | 'lg';
+    sizeSlider?: 'sm' | 'md' | 'lg';
     direction?: 'horizontal' | 'vertical';
     valueLabelDisplay?: 'auto' | 'off' | '%v' | (string & {});
 };
 export declare type ISliderProps = IGenericSliderProps & {
-    onChange: (value: number | number[], index?: number) => void;
+    valueSlider: number | number[];
+    onChangeSlider: (value: number | number[], index?: number) => void;
 };
 export declare type ISliderSelectorProps = IGenericSliderProps & {
-    onChange: (percentage: number, index?: number) => void;
+    valueSliderSelector: number | number[];
+    onChangeSliderSelector: (percentage: number, index?: number) => void;
 };
 export declare type ISliderTrackerProps = {
     max: number;
     step: number;
-    onChange: (value: number, ref?: RefObject<HTMLDivElement>) => void;
+    onChangeSliderTracker: (value: number, ref?: RefObject<HTMLDivElement>) => void;
     trackColor?: GlobalColorsProps | (string & {});
     children: ReactNode;
     direction?: 'horizontal' | 'vertical';

package/dist/components/Slider/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,aAAK,mBAAmB,GAAG;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC7C,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/C,UAAU,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,iBAAiB,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC3D,CAAC;AAEF,oBAAY,YAAY,GAAG,mBAAmB,GAAG;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF,oBAAY,oBAAoB,GAAG,mBAAmB,GAAG;IACvD,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACnE,UAAU,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,UAAU,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC/C,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,aAAK,mBAAmB,GAAG;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC7C,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/C,UAAU,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,iBAAiB,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC3D,CAAC;AAEF,oBAAY,YAAY,GAAG,mBAAmB,GAAG;IAC/C,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpE,CAAC;AAEF,oBAAY,oBAAoB,GAAG,mBAAmB,GAAG;IACvD,mBAAmB,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACvC,sBAAsB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACtE,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAChF,UAAU,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,UAAU,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC/C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pedidopago/ui",
-  "version": "1.3.25",
+  "version": "1.3.28",
   "description": "Quick build beatiful Pedido Pago apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",