@geneui/components 2.16.0-canary-b800577-24062024 → 2.16.0-canary-12a636d-09092024

package/Range/index.js

@@ -2,7 +2,7 @@ import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default, { useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { c as classnames } from '../index-031ff73c.js';
-import { c as createSliderWithTooltip, R as Range } from '../rangeAndSlider-693a3d41.js';
+import { c as createSliderWithTooltip, R as Range } from '../rangeAndSlider-63c5d423.js';
 import useWidth from '../hooks/useWidth.js';
 import '../dateValidation-67caec66.js';
 import 'react-dom';

package/Slider/index.js

@@ -2,7 +2,7 @@ import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { c as classnames } from '../index-031ff73c.js';
-import { c as createSliderWithTooltip, S as Slider } from '../rangeAndSlider-693a3d41.js';
+import { c as createSliderWithTooltip, S as Slider } from '../rangeAndSlider-63c5d423.js';
 import useWidth from '../hooks/useWidth.js';
 import '../dateValidation-67caec66.js';
 import 'react-dom';

package/TimePicker/index.js

@@ -1,5 +1,5 @@
 import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
-import React__default, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import React__default, { forwardRef, useRef, useState, useImperativeHandle, useEffect, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { c as classnames } from '../index-031ff73c.js';
 import { g as timePickerConfig, s as screenTypes } from '../configs-1fb8eed2.js';
@@ -29,7 +29,7 @@ import '../hooks/useMount.js';
 import '../index-122432cd.js';
 import '../debounce-4419bc2f.js';
 
-function TimePickerPopover(_ref) {
+const TimePickerPopover = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     readOnly,
@@ -39,16 +39,19 @@ function TimePickerPopover(_ref) {
   } = _ref;
   const rootRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
-  const openPopover = () => !readOnly && setIsOpen(true);
+  useImperativeHandle(ref, () => ({
+    toggleOpen() {
+      let isPopoverOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isOpen;
+      setIsOpen(!isPopoverOpen);
+    }
+  }));
+  const openPopover = () => !readOnly && !isOpen && setIsOpen(true);
   const closePopover = () => setIsOpen(false);
   useKeyDown(openPopover, [openPopover], rootRef, ['Enter']);
   useKeyDown(closePopover, [closePopover], rootRef, ['Tab', 'Escape']);
   const handleOutsideClick = useClickOutside(event => {
     !rootRef.current.contains(event.target) && closePopover();
   });
-
-  // We need to close popup every time when
-  // user select some value from current popup
   useEffect(() => {
     setIsOpen(false);
   }, [value]);
@@ -63,7 +66,7 @@ function TimePickerPopover(_ref) {
     ref: rootRef,
     onClick: openPopover
   }, children));
-}
+});
 
 var css_248z = "[data-gene-ui-version=\"2.15.0\"] .time-picker-holder{width:100%}[data-gene-ui-version=\"2.15.0\"] .time-picker-holder.read-only .cursor-pointer{cursor:default}[data-gene-ui-version=\"2.15.0\"] .time-picker-holder.mobile{caret-color:#0000;color:#0000;text-shadow:0 0 0 rgba(var(--background-sc-rgb),.75)}[data-gene-ui-version=\"2.15.0\"] .time-picker-holder.disabled{opacity:.6;pointer-events:none}[data-gene-ui-version=\"2.15.0\"] .time-picker-holder>ul{align-items:center;display:flex;width:100%}[data-gene-ui-version=\"2.15.0\"] .time-picker-holder>ul>li.no-shrink{align-items:center;display:flex;flex-shrink:0;justify-content:center}[data-gene-ui-version=\"2.15.0\"] .time-picker-holder>ul>li.no-shrink>span{display:block;font-weight:600;margin:0 .5rem}[data-gene-ui-version=\"2.15.0\"] .time-picker-holder>ul>li.shrink-auto{flex:auto}[data-gene-ui-version=\"2.15.0\"] .time-picker-holder>ul>li.icon-holder{margin-inline-end:.5rem;width:4rem}[data-gene-ui-version=\"2.15.0\"] .time-picker-drop-holder{display:flex;width:100%}[data-gene-ui-version=\"2.15.0\"] .time-picker-drop-holder>li{width:100%}[data-gene-ui-version=\"2.15.0\"] .time-picker-drop-holder>li+li{border-inline-start:1px solid rgba(var(--background-sc-rgb),.08)}[data-gene-ui-version=\"2.15.0\"] .time-picker-drop{font:600 1.4rem/1.8rem var(--font-family);padding:1rem 0;width:100%}[data-gene-ui-version=\"2.15.0\"] .time-picker-drop ul{width:100%}[data-gene-ui-version=\"2.15.0\"] .time-picker-drop ul li{align-items:center;cursor:pointer;display:flex;height:4rem;justify-content:center;text-align:center;transition:background .4s,color .4s;width:100%}@media (hover:hover){[data-gene-ui-version=\"2.15.0\"] .time-picker-drop ul li:hover{background:rgba(var(--background-sc-rgb),.05)}}[data-gene-ui-version=\"2.15.0\"] .time-picker-drop ul li.active{color:var(--hero)}";
 styleInject(css_248z);
@@ -133,6 +136,7 @@ function TimePicker(_ref) {
   const [hourPopupValue, setHourPopupValue] = useState(null);
   const [minutePopupValue, setMinutePopupValue] = useState(null);
   const [secondPopupValue, setSecondPopupValue] = useState(null);
+  const childRef = useRef();
 
   // for replacing special symbols
   const numberRegExp = useMemo(() => {
@@ -259,7 +263,7 @@ function TimePicker(_ref) {
     setInputValue(time);
     handleChange(e, time);
   }, [hour, minute, second, separator, showSeconds, handleChange, combinedValue]);
-  const handleInputChange = useCallback(e => {
+  const handleInputChange = e => {
     const {
       value
     } = e.target;
@@ -269,8 +273,6 @@ function TimePicker(_ref) {
     const timeParts = replacedValue.split(separator);
     const lastChar = replacedValue[replacedValue.length - 1];
     const secondLastChar = replacedValue[replacedValue.length - 2];
-
-    // Checking if last and second last chars are same and equal to separator then return
     if (lastChar === separator && lastChar === secondLastChar) return;
     if (value === '') {
       setHour('');
@@ -310,9 +312,6 @@ function TimePicker(_ref) {
         outOfRange = true;
       }
     }
-
-    // Make field valid when after typing field pass validation
-    // but we must set error only when user click outside or onBlur event fires
     !checkTimeValidation(timeParts[0], false) && setHourFieldError(false);
     !checkMinuteValidation(timeParts[1], false) && setMinuteFieldError(false);
     (!showSeconds || !checkSecondValidation(timeParts[2], false)) && setSecondFieldError(false);
@@ -320,31 +319,46 @@ function TimePicker(_ref) {
       setInputValue(replacedValue);
       onChange(e);
     }
-  }, [numberRegExp, separator, showSeconds, checkTimeValidation, checkMinuteValidation, checkSecondValidation, handleChange, hourFormat, onChange]);
+  };
   useEffect(() => {
-    // if hour format changes, convert value to that format
-    const formattedHour = convertToFormat(hour, hourFormat);
-    setHour(formattedHour);
-    setInputValue(combinedValue(formattedHour, minute, second, false));
-  }, [combinedValue, hour, hourFormat, minute, second]);
+    if ((disabled || readOnly) && childRef.current) {
+      childRef.current.toggleOpen(true);
+    }
+  }, [disabled, readOnly]);
   useEffect(() => {
-    // if minute format changes, convert value to that format
-    const formattedMinute = convertToFormat(minute, minuteFormat);
-    setMinute(formattedMinute);
-    setInputValue(combinedValue(hour, formattedMinute, second, false));
-  }, [combinedValue, hour, minute, minuteFormat, second]);
+    if (hour) {
+      const formattedHour = convertToFormat(hour, hourFormat);
+      setHour(formattedHour);
+      setInputValue(combinedValue(formattedHour, minute, second, false));
+    }
+  }, [hourFormat]);
+  useEffect(() => {
+    if (minute) {
+      const formattedMinute = convertToFormat(minute, minuteFormat);
+      setMinute(formattedMinute);
+      setInputValue(combinedValue(hour, formattedMinute, second, false));
+    }
+  }, [minuteFormat]);
+  useEffect(() => {
+    if (second) {
+      const formattedSecond = convertToFormat(second, secondFormat);
+      setSecond(formattedSecond);
+      setInputValue(combinedValue(hour, minute, formattedSecond, false));
+    }
+  }, [secondFormat]);
   useEffect(() => {
-    // if second format changes, convert value to that format
-    const formattedSecond = convertToFormat(second, secondFormat);
-    setSecond(formattedSecond);
-    setInputValue(combinedValue(hour, minute, formattedSecond, false));
-  }, [combinedValue, hour, minute, second, secondFormat]);
+    if (!inputValue) return;
+    const [splitHour, splitMinute, splitSecond] = inputValue.split(separator);
+    !showSeconds && setSecond('');
+    showSeconds && (inputValue || hour) && !second && setSecond(convertToFormat(second, secondFormat));
+    setInputValue(combinedValue(splitHour, splitMinute, splitSecond));
+  }, [showSeconds]);
   useEffect(() => {
     if (value) {
-      const timeParts = value.split(separator);
-      timeParts[0] && setHour(timeParts[0]);
-      timeParts[1] && setMinute(timeParts[1]);
-      showSeconds && timeParts[2] && setSecond(timeParts[2]);
+      const [splitHour, splitMinute, splitSecond] = value.split(separator);
+      splitHour && setHour(splitHour);
+      splitMinute && setMinute(splitMinute);
+      showSeconds && splitSecond && setSecond(splitSecond);
       setInputValue(value);
     }
   }, [value, separator, showSeconds]);
@@ -389,6 +403,7 @@ function TimePicker(_ref) {
     onBlur("".concat(hour).concat(hour && minute && ':').concat(minute).concat(minute && second && ':').concat(second), event);
   }, [hour, minute, second, onBlur, hourFormat, minuteFormat, showSeconds, secondFormat]);
   const signleInputPopoverValue = useMemo(() => showSeconds ? convertToFormat(second, secondFormat, true) : convertToFormat(minute, minuteFormat, true), [second, secondFormat, minute, minuteFormat, showSeconds]);
+  const handleIconClick = () => childRef.current && !readOnly && !disabled && childRef.current.toggleOpen();
   return /*#__PURE__*/React__default.createElement("div", {
     className: classnames('time-picker-holder', className, {
       'read-only': readOnly,
@@ -464,6 +479,7 @@ function TimePicker(_ref) {
     toggleHandler: handlePopoverToggle,
     readOnly: readOnly,
     value: signleInputPopoverValue,
+    ref: childRef,
     Content: /*#__PURE__*/React__default.createElement("ul", {
       className: "time-picker-drop-holder"
     }, /*#__PURE__*/React__default.createElement("li", null, hours), /*#__PURE__*/React__default.createElement("li", null, minutes), showSeconds && /*#__PURE__*/React__default.createElement("li", null, seconds)),
@@ -477,6 +493,8 @@ function TimePicker(_ref) {
     itemsDirection: "end",
     readOnly: readOnly,
     writeProtected: isMobile,
+    onIconClick: handleIconClick,
+    clickableIcon: true,
     onBlur: handleInputBlur
   }, restProps))));
 }

package/index.js

@@ -140,7 +140,7 @@ import './localization-4ba17032.js';
 import './Popover-f4d1cac0.js';
 import './index-122432cd.js';
 import './debounce-4419bc2f.js';
-import './rangeAndSlider-693a3d41.js';
+import './rangeAndSlider-63c5d423.js';
 import './index-45eafea6.js';
 import './react-lifecycles-compat.es-6e1f3768.js';
 import './SuggestionList/index.js';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "2.16.0-canary-b800577-24062024",
+    "version": "2.16.0-canary-12a636d-09092024",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {

package/{rangeAndSlider-693a3d41.js → rangeAndSlider-63c5d423.js}

@@ -251,20 +251,12 @@ var _cof = function (it) {
   return toString$2.call(it).slice(8, -1);
 };
 
-var _iobject;
-var hasRequired_iobject;
-
-function require_iobject () {
-	if (hasRequired_iobject) return _iobject;
-	hasRequired_iobject = 1;
-	// fallback for non-array-like ES3 and non-enumerable old V8 strings
-	var cof = _cof;
-	// eslint-disable-next-line no-prototype-builtins
-	_iobject = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
-	  return cof(it) == 'String' ? it.split('') : Object(it);
-	};
-	return _iobject;
-}
+// fallback for non-array-like ES3 and non-enumerable old V8 strings
+var cof$2 = _cof;
+// eslint-disable-next-line no-prototype-builtins
+var _iobject = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
+  return cof$2(it) == 'String' ? it.split('') : Object(it);
+};
 
 // 7.2.1 RequireObjectCoercible(argument)
 var _defined = function (it) {
@@ -273,7 +265,7 @@ var _defined = function (it) {
 };
 
 // to indexed object, toObject with fallback for non-array-like ES3 strings
-var IObject = require_iobject();
+var IObject = _iobject;
 var defined$2 = _defined;
 var _toIobject = function (it) {
   return IObject(defined$2(it));
@@ -446,7 +438,7 @@ function require_objectAssign () {
 	var gOPS = _objectGops;
 	var pIE = require_objectPie();
 	var toObject = _toObject;
-	var IObject = require_iobject();
+	var IObject = _iobject;
 	var $assign = Object.assign;
 
 	// should work with symbols and should have deterministic property order (V8 bug)