hplx-react-elements-dev 1.0.63 → 1.0.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DropdownItemsProps } from "../types";
|
|
3
|
-
declare const DropdownItems: ({ className, label, value, disabled, start_icon, active, end_icon, onSelect, }: DropdownItemsProps) => JSX.Element;
|
|
3
|
+
declare const DropdownItems: ({ className, label, value, disabled, start_icon, active, end_icon, onSelect, ddRef, setChangeLeft }: DropdownItemsProps) => JSX.Element;
|
|
4
4
|
export default DropdownItems;
|
package/dist/esm/index.css
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import require$$0$1, { useState,
|
|
1
|
+
import require$$0$1, { useState, useEffect, useRef } from 'react';
|
|
2
2
|
import require$$1$1 from 'prop-types';
|
|
3
3
|
|
|
4
4
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
@@ -2100,12 +2100,18 @@ var DropdownItems = function DropdownItems(_a) {
|
|
|
2100
2100
|
_b = _a.active,
|
|
2101
2101
|
active = _b === void 0 ? false : _b,
|
|
2102
2102
|
end_icon = _a.end_icon,
|
|
2103
|
-
onSelect = _a.onSelect
|
|
2103
|
+
onSelect = _a.onSelect,
|
|
2104
|
+
ddRef = _a.ddRef,
|
|
2105
|
+
setChangeLeft = _a.setChangeLeft;
|
|
2104
2106
|
|
|
2105
2107
|
var _c = useState(false),
|
|
2106
2108
|
hover = _c[0],
|
|
2107
2109
|
setHover = _c[1];
|
|
2108
2110
|
|
|
2111
|
+
useEffect(function () {
|
|
2112
|
+
if ((ddRef === null || ddRef === void 0 ? void 0 : ddRef.current.clientWidth) > 1300) setChangeLeft(false);
|
|
2113
|
+
}, []);
|
|
2114
|
+
|
|
2109
2115
|
var onMouseEnterHandler = function onMouseEnterHandler() {
|
|
2110
2116
|
setHover(true);
|
|
2111
2117
|
};
|
|
@@ -2137,7 +2143,11 @@ var DropdownItems = function DropdownItems(_a) {
|
|
|
2137
2143
|
},
|
|
2138
2144
|
className: "hplxt-h-10 hplxt-flex hplxt-items-center hplxt-px-2 ".concat(disabled ? "hplxt-cursor-not-allowed" : "hover:hplxt-bg-Blue_gray-100 hplxt-cursor-pointer", " ").concat(className),
|
|
2139
2145
|
onMouseEnter: onMouseEnterHandler,
|
|
2140
|
-
onMouseLeave: onMouseLeaveHandler
|
|
2146
|
+
onMouseLeave: onMouseLeaveHandler,
|
|
2147
|
+
style: {
|
|
2148
|
+
maxWidth: '93.5vw'
|
|
2149
|
+
},
|
|
2150
|
+
ref: ddRef
|
|
2141
2151
|
}, {
|
|
2142
2152
|
children: [Boolean(start_icon) && jsxRuntime.exports.jsx("div", __assign({
|
|
2143
2153
|
className: "hplxt-mr-2 ".concat(disabled ? "hplxt-text-Gray-200" : hover ? "hplxt-text-Gray-700" : "hplxt-text-Gray-500")
|
|
@@ -2148,10 +2158,10 @@ var DropdownItems = function DropdownItems(_a) {
|
|
|
2148
2158
|
})), jsxRuntime.exports.jsx(Typography, __assign({
|
|
2149
2159
|
variant: hover && !disabled ? "Medium" : "Regular",
|
|
2150
2160
|
type: "Text md",
|
|
2151
|
-
className: "hplxt-
|
|
2161
|
+
className: "hplxt-w-64 hplxt-overflow-hidden"
|
|
2152
2162
|
}, {
|
|
2153
2163
|
children: jsxRuntime.exports.jsx("div", __assign({
|
|
2154
|
-
className: "hplxt-flex-1 ".concat(disabled ? "hplxt-text-Gray-200" : "hplxt-text-Gray-700", " ").concat(className),
|
|
2164
|
+
className: "hplxt-flex-1 hplxt-truncate hplxt-overflow-hidden hplxt-line-clamp-3 ".concat(disabled ? "hplxt-text-Gray-200" : "hplxt-text-Gray-700", " ").concat(className),
|
|
2155
2165
|
title: checkOverFlow() ? label : undefined,
|
|
2156
2166
|
ref: ref
|
|
2157
2167
|
}, {
|
|
@@ -17378,9 +17388,8 @@ var DoubleInput = function DoubleInput(_a) {
|
|
|
17378
17388
|
active = _0[0],
|
|
17379
17389
|
setActive = _0[1];
|
|
17380
17390
|
|
|
17381
|
-
var _1 = useState(false)
|
|
17382
|
-
_1[
|
|
17383
|
-
var setSuffixActive = _1[1];
|
|
17391
|
+
var _1 = useState(false),
|
|
17392
|
+
setSuffixActive = _1[1];
|
|
17384
17393
|
|
|
17385
17394
|
var handleFocus = function handleFocus(event) {
|
|
17386
17395
|
setActive(true);
|
|
@@ -17628,6 +17637,7 @@ var InputTag = function InputTag(_a) {
|
|
|
17628
17637
|
|
|
17629
17638
|
var wrapperRef = useRef(null);
|
|
17630
17639
|
var inputRef = useRef(null);
|
|
17640
|
+
var ddRef = useRef(null);
|
|
17631
17641
|
|
|
17632
17642
|
var _q = useState([]),
|
|
17633
17643
|
dropdownArr = _q[0],
|
|
@@ -17649,6 +17659,10 @@ var InputTag = function InputTag(_a) {
|
|
|
17649
17659
|
focusIndex = _t[0],
|
|
17650
17660
|
setFocusIndex = _t[1];
|
|
17651
17661
|
|
|
17662
|
+
var _u = useState(true),
|
|
17663
|
+
changeLeft = _u[0],
|
|
17664
|
+
setChangeLeft = _u[1];
|
|
17665
|
+
|
|
17652
17666
|
var handleValueChange = function handleValueChange(e) {
|
|
17653
17667
|
var sug = [];
|
|
17654
17668
|
setShowDropdown(true);
|
|
@@ -17681,8 +17695,8 @@ var InputTag = function InputTag(_a) {
|
|
|
17681
17695
|
});
|
|
17682
17696
|
setTagInputValue("");
|
|
17683
17697
|
onDropdownClick && onDropdownClick(selectedItem);
|
|
17684
|
-
handleValChange && handleValChange(value);
|
|
17685
|
-
|
|
17698
|
+
handleValChange && handleValChange(value); // setShowDropdown(false);
|
|
17699
|
+
|
|
17686
17700
|
setFocusIndex(-1);
|
|
17687
17701
|
};
|
|
17688
17702
|
|
|
@@ -17710,9 +17724,9 @@ var InputTag = function InputTag(_a) {
|
|
|
17710
17724
|
setTags(__spreadArray(__spreadArray([], tags, true), [tagInputValue], false));
|
|
17711
17725
|
setValue(tags.filter(Boolean).join(", "));
|
|
17712
17726
|
setTagInputValue("");
|
|
17713
|
-
}
|
|
17727
|
+
} //setShowDropdown(false);
|
|
17728
|
+
|
|
17714
17729
|
|
|
17715
|
-
setShowDropdown(false);
|
|
17716
17730
|
setFocusIndex(-1);
|
|
17717
17731
|
setActive(false);
|
|
17718
17732
|
onBlur && onBlur(event);
|
|
@@ -17828,7 +17842,7 @@ var InputTag = function InputTag(_a) {
|
|
|
17828
17842
|
ref: wrapperRef,
|
|
17829
17843
|
className: "hplxt-absolute hplxt-border hplxt-border-Gray-300 hplxt-mt-1 hplxt-min-w-max hplxt-rounded-lg hplxt-bg-Indigo-25 hplxt-overflow-y-auto hplxt-shadow-md hplxt-z-10 hplxt-max-h-80 ".concat(dropdownClassName),
|
|
17830
17844
|
style: {
|
|
17831
|
-
left: "".concat((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.offsetLeft, "px"),
|
|
17845
|
+
left: changeLeft ? '' : "".concat((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.offsetLeft, "px"),
|
|
17832
17846
|
top: "".concat(((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.offsetTop) ? ((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.offsetTop) + 30 : (_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.offsetTop, "px")
|
|
17833
17847
|
}
|
|
17834
17848
|
}, {
|
|
@@ -17841,7 +17855,9 @@ var InputTag = function InputTag(_a) {
|
|
|
17841
17855
|
}, restOptions, {
|
|
17842
17856
|
onSelect: function onSelect() {
|
|
17843
17857
|
return handleDropdownClick(restOptions);
|
|
17844
|
-
}
|
|
17858
|
+
},
|
|
17859
|
+
ddRef: ddRef,
|
|
17860
|
+
setChangeLeft: setChangeLeft
|
|
17845
17861
|
}));
|
|
17846
17862
|
})
|
|
17847
17863
|
})
|
package/dist/esm/types.d.ts
CHANGED