@synerise/ds-slider 1.0.8 → 1.0.10

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-slider@1.0.9...@synerise/ds-slider@1.0.10) (2025-06-02)
+
+
+### Bug Fixes
+
+* **slider:** render marks if tooltip is hidden ([fa528d4](https://github.com/Synerise/synerise-design/commit/fa528d42e1c94cd55b01184c05adf3b3a97de6ae))
+
+
+
+
+
+## [1.0.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-slider@1.0.8...@synerise/ds-slider@1.0.9) (2025-05-26)
+
+**Note:** Version bump only for package @synerise/ds-slider
+
+
+
+
+
 ## [1.0.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-slider@1.0.7...@synerise/ds-slider@1.0.8) (2025-05-19)
 
 **Note:** Version bump only for package @synerise/ds-slider

package/dist/Slider.js

@@ -1,7 +1,7 @@
-var _excluded = ["useColorPalette", "label", "inverted", "getTooltipPopupContainer", "tracksColorMap", "type", "thickness", "description", "tipFormatter", "allocationConfig", "hideMinAndMaxMarks", "disabled", "max", "min", "value", "range"];
+var _excluded = ["useColorPalette", "label", "inverted", "getTooltipPopupContainer", "tracksColorMap", "type", "thickness", "description", "tipFormatter", "allocationConfig", "hideMinAndMaxMarks", "disabled", "max", "min", "value", "range", "tooltipVisible", "tooltipPlacement"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Label } from '@synerise/ds-typography';
 import '@synerise/ds-core/dist/js/style';
 import { defaultColorsOrder } from '@synerise/ds-core';
@@ -45,17 +45,23 @@ var Slider = function Slider(props) {
     min = props.min,
     value = props.value,
     range = props.range,
+    tooltipVisible = props.tooltipVisible,
+    _props$tooltipPlaceme = props.tooltipPlacement,
+    tooltipPlacement = _props$tooltipPlaceme === void 0 ? 'bottom' : _props$tooltipPlaceme,
     antdProps = _objectWithoutPropertiesLoose(props, _excluded);
-  var _React$useState = React.useState(false),
-    reachedEnd = _React$useState[0],
-    setReachedEnd = _React$useState[1];
-  var _React$useState2 = React.useState(false),
-    reachedStart = _React$useState2[0],
-    setReachedStart = _React$useState2[1];
-  var calcHandlePosition = React.useCallback(function () {
+  var _useState = useState(false),
+    reachedEnd = _useState[0],
+    setReachedEnd = _useState[1];
+  var _useState2 = useState(false),
+    reachedStart = _useState2[0],
+    setReachedStart = _useState2[1];
+  var showValueTooltip = useMemo(function () {
+    return tooltipVisible !== false && (!antdProps.tooltip || antdProps.tooltip.open !== false);
+  }, [tooltipVisible, antdProps.tooltip]);
+  var calcHandlePosition = useCallback(function () {
     var handler = document.querySelectorAll('.ant-slider-handle');
     var markTexts = document.querySelectorAll('.ant-slider-mark-text');
-    if (handler && markTexts != null && markTexts.length) {
+    if (handler && markTexts != null && markTexts.length && showValueTooltip) {
       var firstMark = markTexts[0].getBoundingClientRect();
       var lastMark = markTexts[markTexts.length - 1].getBoundingClientRect();
       var firstHandler = handler[0].getBoundingClientRect();
@@ -75,13 +81,13 @@ var Slider = function Slider(props) {
       reachedEnd: reachedEnd,
       reachedStart: reachedStart
     };
-  }, [reachedEnd, reachedStart]);
-  React.useEffect(function () {
+  }, [reachedEnd, reachedStart, showValueTooltip]);
+  useEffect(function () {
     setTimeout(function () {
       calcHandlePosition();
     }, 0);
   }, [calcHandlePosition, value]);
-  var labelElement = React.useMemo(function () {
+  var labelElement = useMemo(function () {
     return label ? /*#__PURE__*/React.createElement(S.LabelWrapper, null, /*#__PURE__*/React.createElement(Label, null, label)) : null;
   }, [label]);
   if (type === SliderTypes.ALLOCATION && !!allocationConfig) {
@@ -92,6 +98,10 @@ var Slider = function Slider(props) {
     max: max,
     value: value,
     reachedEnd: reachedEnd,
+    tooltip: _extends({}, antdProps.tooltip, {
+      placement: tooltipPlacement,
+      open: tooltipVisible
+    }),
     range: range,
     reachedStart: reachedStart,
     className: value && couldBeInverted(value, !!inverted) ? 'ant-slider-inverted' : undefined,

package/dist/Slider.styles.d.ts

@@ -1,4 +1,3 @@
-import { FlattenSimpleInterpolation } from 'styled-components';
 import { SliderSingleProps, SliderRangeProps } from 'antd/lib/slider';
 import { ThemeProps } from '@synerise/ds-core';
 import { ComponentType } from 'react';
@@ -9,8 +8,8 @@ export declare const Description: import("styled-components").StyledComponent<"d
 }, never>;
 export declare const LabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const applyTooltipStyles: (props: ThemeProps & DsSliderProps & SliderStyles) => FlattenSimpleInterpolation;
-export declare const createTracksStyles: (props: ThemeProps, colorsMap: ColorMapProps) => FlattenSimpleInterpolation;
+export declare const applyTooltipStyles: (props: ThemeProps & DsSliderProps & SliderStyles) => import("styled-components").FlattenSimpleInterpolation;
+export declare const createTracksStyles: (props: ThemeProps, colorsMap: ColorMapProps) => import("styled-components").FlattenSimpleInterpolation;
 type SliderStyles = {
     reachedEnd?: boolean;
     reachedStart?: boolean;

package/dist/Slider.styles.js

@@ -15,7 +15,7 @@ var INDEX_MAP = {
 export var Description = styled.div.withConfig({
   displayName: "Sliderstyles__Description",
   componentId: "sc-1gtvqj9-0"
-})(["margin-bottom:45px;padding-bottom:80px;color:", ";font-weight:400;position:absolute;opacity:", ";"], function (props) {
+})(["bottom:70px;color:", ";font-weight:400;position:absolute;opacity:", ";"], function (props) {
   return props.theme.palette['grey-500'];
 }, function (props) {
   return props.range ? '0' : '1';
@@ -27,7 +27,7 @@ export var LabelWrapper = styled.div.withConfig({
 export var DescriptionWrapper = styled.div.withConfig({
   displayName: "Sliderstyles__DescriptionWrapper",
   componentId: "sc-1gtvqj9-2"
-})(["display:flex;direction:column;align-items:center;justify-content:center;position:relative;user-select:none;bottom:0;right:0;"]);
+})(["display:flex;direction:column;align-items:center;justify-content:center;position:relative;user-select:none;pointer-events:none;bottom:0;right:0;"]);
 export var applyTooltipStyles = function applyTooltipStyles(props) {
   return css([".ant-tooltip-inner{font-size:13px;padding:3px 7px;user-select:none;white-space:nowrap;}", " ", " &&&.ant-slider-disabled{.ant-slider-dot-active{background-color:", ";}.ant-slider-rail{background-color:", ";}}.ant-slider-handle:hover,.ant-slider-handle:focus{", "}.ant-slider-handle:focus{", " .ant-slider-handle:hover:not(:focus){background-color:", ";}.ant-slider-handle:not(:focus){.ant-tooltip-content:hover{background-color:transparent !important;border-radius:3px;}.ant-tooltip-inner:hover{color:", " !important;}}.ant-slider-dot[style*='left: 100%;'],.ant-slider-dot:first-of-type{visibility:", ";}.ant-slider-mark-text:last-of-type{padding-right:30px;}.ant-slider-mark-text:last-of-type{", "}.ant-slider-mark-text:first-of-type{", "}.ant-slider-handle-dragging{border-color:", " !important;box-shadow:0 0 0 3px rgba(35,138,254,0.25) !important;}"], props.disabled && ".ant-tooltip-inner {\n        color: " + props.theme.palette['grey-400'] + ";\n      }\n    ", props.disabled && ".ant-slider-dot {\n        background-color: " + props.theme.palette.white + ";\n      }\n    ", props.theme.palette.white, props.theme.palette['grey-200'], !props.disabled && "\n    .ant-tooltip-content {\n      background-color: " + props.theme.palette['grey-900'] + ";\n      border-radius: 3px;\n    }\n    " + Description + " {\n      color: " + (!props.disabled && props.theme.palette['grey-600']) + ";\n    }\n    .ant-tooltip-inner {\n      color: " + props.theme.palette['grey-050'] + ";\n    }\n    ", !props.disabled && "\n  " + Description + " {\n     " + (props.range && "opacity: 1") + ";\n    }\n    }\n    ", !props.disabled && props.theme.palette['grey-500'], !props.disabled && props.theme.palette['grey-600'], props.hideMinAndMaxMarks ? 'hidden' : 'visible', props.reachedEnd && "opacity: 0", props.reachedStart && "opacity: 0", props.theme.palette['grey-050']);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-slider",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Slider UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,9 +34,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-tooltip": "^1.1.7",
-    "@synerise/ds-typography": "^1.0.8",
-    "@synerise/ds-utils": "^1.1.0"
+    "@synerise/ds-tooltip": "^1.1.8",
+    "@synerise/ds-typography": "^1.0.9",
+    "@synerise/ds-utils": "^1.1.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -45,5 +45,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8aa16b27c86c97e3ac774d92561ab0a03176c439"
+  "gitHead": "022e7ef05dd9d54cdb148bdd03dcf592fbaf3a52"
 }