react-asc 25.4.0 → 25.4.1

package/index.es.js

@@ -2022,8 +2022,8 @@ const NumberSelect = (props) => {
     return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
 };
 
-var css_248z$l = ".Tooltip-module_tooltipContainer__9ZWx3 {\n  display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n  background-color: #333;\n  color: white;\n  padding: 5px 10px;\n  border-radius: 4px;\n  font-size: 13px;\n  position: absolute;\n  left: -1000000px;\n  z-index: 1100;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe,\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  z-index: -1;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n  content: \"\";\n  transform: rotate(45deg);\n  background: #333;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=top] > #Tooltip-module_arrow__B6lfe {\n  bottom: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=bottom] > #Tooltip-module_arrow__B6lfe {\n  top: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=left] > #Tooltip-module_arrow__B6lfe {\n  right: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=right] > #Tooltip-module_arrow__B6lfe {\n  left: -4px;\n}";
-var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
+var css_248z$l = ".Tooltip-module_tooltipContainer__9ZWx3 {\n  display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n  background-color: #333;\n  color: white;\n  padding: 5px 10px;\n  border-radius: 4px;\n  font-size: 13px;\n  position: absolute;\n  left: -1000000px;\n  z-index: 1100;\n}\n\n.Tooltip-module_arrow__B6lfe, .Tooltip-module_arrow__B6lfe::before {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  z-index: -1;\n}\n.Tooltip-module_arrow__B6lfe::before {\n  content: \"\";\n  transform: rotate(45deg);\n  background: #333;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-top__h5aww {\n  bottom: -4px;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-bottom__dYc5B {\n  top: -4px;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-left__8-2Jw {\n  right: -4px;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-right__v4h4z {\n  left: -4px;\n}";
+var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe","placement-top":"Tooltip-module_placement-top__h5aww","placement-bottom":"Tooltip-module_placement-bottom__dYc5B","placement-left":"Tooltip-module_placement-left__8-2Jw","placement-right":"Tooltip-module_placement-right__v4h4z"};
 styleInject(css_248z$l);
 
 var TooltipPlacement;
@@ -2094,16 +2094,22 @@ const Tooltip = (props) => {
     useOnDestroy(() => {
         hideTooltip();
     });
+    const getArrowStyles = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$l.arrow);
+        placement && cssClasses.push(styles$l[`placement-${placement}`]);
+        return cssClasses.filter(css => css).join(' ');
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { ref: refChild, className: styles$l.tooltipContainer, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur }, children),
         open && text &&
-            React.createElement("div", { className: styles$l.tooltip, ref: refTooltip, id: "tooltip" },
+            React.createElement("div", { className: styles$l.tooltip, ref: refTooltip },
                 React.createElement("div", { className: 'd-flex align-items-center' },
                     text,
                     showClose &&
                         React.createElement(Icon, { className: 'ml-1', onClick: handleClickClose },
                             React.createElement(TimesSolidIcon, null))),
-                React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
+                React.createElement("div", { className: getArrowStyles(), "data-popper-arrow": true }))));
 };
 
 var css_248z$k = ":root {\n  --progress-height: 0.5rem;\n  --progress-bg: #e9ecef;\n  --progress-box-shadow: var(--shadow);\n  --progress-bar-color: #fff;\n  --progress-bar-bg: var(--primary);\n  --progress-bar-transition: width 0.6s ease;\n}\n\n.ProgressBar-module_progressBarContainer__vtbBw {\n  display: flex;\n  height: var(--progress-height);\n  overflow: hidden;\n  background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  color: var(--progress-bar-color);\n  text-align: center;\n  white-space: nowrap;\n  transition: var(--progress-bar-transition);\n  background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n  width: 100%;\n  height: 100%;\n  animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n  transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n  0% {\n    transform: translateX(0) scaleX(0);\n  }\n  40% {\n    transform: translateX(0) scaleX(0.4);\n  }\n  100% {\n    transform: translateX(100%) scaleX(0.5);\n  }\n}";

package/index.js

@@ -2031,8 +2031,8 @@ const NumberSelect = (props) => {
     return (React__default["default"].createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
 };
 
-var css_248z$l = ".Tooltip-module_tooltipContainer__9ZWx3 {\n  display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n  background-color: #333;\n  color: white;\n  padding: 5px 10px;\n  border-radius: 4px;\n  font-size: 13px;\n  position: absolute;\n  left: -1000000px;\n  z-index: 1100;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe,\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  z-index: -1;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n  content: \"\";\n  transform: rotate(45deg);\n  background: #333;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=top] > #Tooltip-module_arrow__B6lfe {\n  bottom: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=bottom] > #Tooltip-module_arrow__B6lfe {\n  top: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=left] > #Tooltip-module_arrow__B6lfe {\n  right: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=right] > #Tooltip-module_arrow__B6lfe {\n  left: -4px;\n}";
-var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
+var css_248z$l = ".Tooltip-module_tooltipContainer__9ZWx3 {\n  display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n  background-color: #333;\n  color: white;\n  padding: 5px 10px;\n  border-radius: 4px;\n  font-size: 13px;\n  position: absolute;\n  left: -1000000px;\n  z-index: 1100;\n}\n\n.Tooltip-module_arrow__B6lfe, .Tooltip-module_arrow__B6lfe::before {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  z-index: -1;\n}\n.Tooltip-module_arrow__B6lfe::before {\n  content: \"\";\n  transform: rotate(45deg);\n  background: #333;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-top__h5aww {\n  bottom: -4px;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-bottom__dYc5B {\n  top: -4px;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-left__8-2Jw {\n  right: -4px;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-right__v4h4z {\n  left: -4px;\n}";
+var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe","placement-top":"Tooltip-module_placement-top__h5aww","placement-bottom":"Tooltip-module_placement-bottom__dYc5B","placement-left":"Tooltip-module_placement-left__8-2Jw","placement-right":"Tooltip-module_placement-right__v4h4z"};
 styleInject(css_248z$l);
 
 var TooltipPlacement;
@@ -2103,16 +2103,22 @@ const Tooltip = (props) => {
     useOnDestroy(() => {
         hideTooltip();
     });
+    const getArrowStyles = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$l.arrow);
+        placement && cssClasses.push(styles$l[`placement-${placement}`]);
+        return cssClasses.filter(css => css).join(' ');
+    };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { ref: refChild, className: styles$l.tooltipContainer, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur }, children),
         open && text &&
-            React__default["default"].createElement("div", { className: styles$l.tooltip, ref: refTooltip, id: "tooltip" },
+            React__default["default"].createElement("div", { className: styles$l.tooltip, ref: refTooltip },
                 React__default["default"].createElement("div", { className: 'd-flex align-items-center' },
                     text,
                     showClose &&
                         React__default["default"].createElement(Icon, { className: 'ml-1', onClick: handleClickClose },
                             React__default["default"].createElement(TimesSolidIcon, null))),
-                React__default["default"].createElement("div", { id: "arrow", "data-popper-arrow": true }))));
+                React__default["default"].createElement("div", { className: getArrowStyles(), "data-popper-arrow": true }))));
 };
 
 var css_248z$k = ":root {\n  --progress-height: 0.5rem;\n  --progress-bg: #e9ecef;\n  --progress-box-shadow: var(--shadow);\n  --progress-bar-color: #fff;\n  --progress-bar-bg: var(--primary);\n  --progress-bar-transition: width 0.6s ease;\n}\n\n.ProgressBar-module_progressBarContainer__vtbBw {\n  display: flex;\n  height: var(--progress-height);\n  overflow: hidden;\n  background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  color: var(--progress-bar-color);\n  text-align: center;\n  white-space: nowrap;\n  transition: var(--progress-bar-transition);\n  background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n  width: 100%;\n  height: 100%;\n  animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n  transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n  0% {\n    transform: translateX(0) scaleX(0);\n  }\n  40% {\n    transform: translateX(0) scaleX(0.4);\n  }\n  100% {\n    transform: translateX(100%) scaleX(0.5);\n  }\n}";

package/package.json

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