pge-front-common 14.0.46 → 14.0.47
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.
- package/lib/components/DropDown/Dropdown.d.ts +1 -1
- package/lib/index.esm.js +38 -6
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +38 -6
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -25,5 +25,5 @@ type DropDownProps = React.HTMLProps<HTMLDivElement> & {
|
|
|
25
25
|
toggleDropDown: Function;
|
|
26
26
|
optionSelection: (name: string, id: number) => void;
|
|
27
27
|
};
|
|
28
|
-
declare const DropDown: ({ options, optionSelection, ...restProps }: DropDownProps) => JSX.Element;
|
|
28
|
+
declare const DropDown: ({ options, optionSelection, toggleDropDown, ...restProps }: DropDownProps) => JSX.Element;
|
|
29
29
|
export default DropDown;
|
package/lib/index.esm.js
CHANGED
|
@@ -579,7 +579,7 @@ var PasswordInput = function (_a) {
|
|
|
579
579
|
restrictionMessage && (React__default.createElement("div", { className: clsx(styles$v.restrictionMessage) }, restrictionMessage))));
|
|
580
580
|
};
|
|
581
581
|
|
|
582
|
-
var css_248z$x = ".styles-module__button___ak3jK {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 12px 16px;\r\n gap: var(--small-space, 8px);\r\n border-radius: 10px;\r\n font-size: var(--font-size-14);\r\n cursor: pointer;\r\n transition: all 0.2s ease-in-out;\r\n
|
|
582
|
+
var css_248z$x = ".styles-module__button___ak3jK {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 12px 16px;\r\n gap: var(--small-space, 8px);\r\n border-radius: 10px;\r\n font-size: var(--font-size-14);\r\n cursor: pointer;\r\n transition: all 0.2s ease-in-out;\r\n height: 40px;\r\n font-family: var(--font-open-sans-serif);\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n .styles-module__button___ak3jK {\r\n font-size: var(--font-size-12);\r\n height: 35px;\r\n }\r\n}\r\n\r\n.styles-module__fullWidth___hkrRe {\r\n width: 100%;\r\n}\r\n\r\n.styles-module__fitContent___h16Hv {\r\n width: fit-content;\r\n}\r\n\r\n.styles-module__primary___0Lugn {\r\n background-color: var(--btn-bg-primary-color);\r\n color: var(--btn-text-primary-color);\r\n border: none;\r\n}\r\n\r\n.styles-module__primary___0Lugn:hover {\r\n background-color: var(--btn-bg-primary-color);\r\n color: var(--btn-text-hover-primary-color);\r\n outline: 3px solid var(--btn-bg-focus-primary-color);\r\n}\r\n\r\n.styles-module__primary___0Lugn:active {\r\n border: 1.8px solid var(--Pressed-button, #3ab0f3);\r\n}\r\n\r\n.styles-module__primary___0Lugn:focus {\r\n box-shadow: 0px 4px 4px 0px #00000040;\r\n background: var(--btn-bg-focus-primary-color, #00436d);\r\n color: var(--btn-text-focus-primary-color);\r\n outline: 2px solid var(--btn-text-focus-primary-color);\r\n}\r\n\r\n.styles-module__primary___0Lugn:disabled {\r\n background: var(--light-grey-color, #c3c3c3);\r\n cursor: not-allowed;\r\n}\r\n\r\n.styles-module__secondary___C7rZE {\r\n border: 1px solid var(--btn-border-secondary-color);\r\n background: var(--btn-bg-secondary-color);\r\n color: var(--btn-text-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___C7rZE:hover {\r\n background: var(--btn-bg-hover-secondary-color);\r\n border: 1px solid var(--btn-border-secondary-color);\r\n color: var(--btn-text-hover-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___C7rZE:active {\r\n background: #00436d1a;\r\n border: 2px solid #3ab0f3cc;\r\n}\r\n\r\n.styles-module__secondary___C7rZE:focus {\r\n background: var(--btn-bg-focus-secondary-color);\r\n color: var(--btn-text-focus-secondary-color);\r\n outline: 2.5px solid var(--btn-border-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___C7rZE:disabled {\r\n border: 1px solid var(--light-grey-color, #c3c3c3);\r\n color: var(--light-grey-color, #c3c3c3);\r\n cursor: not-allowed;\r\n}\r\n\r\n.styles-module__secondary___C7rZE.styles-module__danger___kcS09 {\r\n border: 1px solid var(--btn-border-danger-secondary-color, #cb0a0a);\r\n color: var(--btn-text-danger-secondary-color, #cb0a0a);\r\n}\r\n\r\n.styles-module__tertiary___xMgwD {\r\n border: none;\r\n background: var(--btn-bg-tertiary-color);\r\n color: var(--btn-text-tertiary-color);\r\n font-weight: 400;\r\n font-size: var(--font-size-14);\r\n}\r\n\r\n.styles-module__tertiary___xMgwD:active {\r\n background: var(--terciary-button-background, #0b81ca47);\r\n}\r\n\r\n.styles-module__tertiary___xMgwD:hover {\r\n background: var(--btn-bg-hover-tertiary-color, #0b81ca47);\r\n}\r\n\r\n.styles-module__tertiary___xMgwD:focus {\r\n background: var(--btn-bg-focus-tertiary-color);\r\n outline: 2px solid #52819e;\r\n}\r\n\r\n.styles-module__tertiary___xMgwD:disabled {\r\n background: var(--light-grey-color, #c3c3c3);\r\n cursor: not-allowed;\r\n}\r\n\r\n.styles-module__tertiary___xMgwD.styles-module__danger___kcS09 {\r\n border: none;\r\n color: var(--btn-text-danger-tertiary-color, #cb0a0a);\r\n}\r\n\r\n.styles-module__tertiary___xMgwD.styles-module__danger___kcS09:hover {\r\n border: none;\r\n background: none;\r\n}\r\n\r\n.styles-module__tertiary___xMgwD.styles-module__danger___kcS09:focus {\r\n border: none;\r\n background: none;\r\n}\r\n";
|
|
583
583
|
var styles$u = {"button":"styles-module__button___ak3jK","fullWidth":"styles-module__fullWidth___hkrRe","fitContent":"styles-module__fitContent___h16Hv","primary":"styles-module__primary___0Lugn","secondary":"styles-module__secondary___C7rZE","danger":"styles-module__danger___kcS09","tertiary":"styles-module__tertiary___xMgwD"};
|
|
584
584
|
styleInject(css_248z$x);
|
|
585
585
|
|
|
@@ -779,7 +779,7 @@ var styles$o = {"dropdown":"dropdown-module__dropdown___EIaq-","primaryDropdown"
|
|
|
779
779
|
styleInject(css_248z$r);
|
|
780
780
|
|
|
781
781
|
var DropDown = function (_a) {
|
|
782
|
-
var options = _a.options, optionSelection = _a.optionSelection, restProps = __rest(_a, ["options", "optionSelection"]);
|
|
782
|
+
var options = _a.options, optionSelection = _a.optionSelection, toggleDropDown = _a.toggleDropDown, restProps = __rest(_a, ["options", "optionSelection", "toggleDropDown"]);
|
|
783
783
|
var _b = useState(null), expandedMenuId = _b[0], setExpandedMenuId = _b[1];
|
|
784
784
|
var handleMenuClick = function (item, ev) {
|
|
785
785
|
ev.stopPropagation();
|
|
@@ -792,6 +792,8 @@ var DropDown = function (_a) {
|
|
|
792
792
|
optionSelection(item.chave, item.id);
|
|
793
793
|
}
|
|
794
794
|
};
|
|
795
|
+
var _c = useState(-1); _c[0]; var setFocusedIndex = _c[1];
|
|
796
|
+
var itemRefs = useRef([]);
|
|
795
797
|
var handleSubmenuClick = function (subItem, ev) {
|
|
796
798
|
ev.stopPropagation();
|
|
797
799
|
if (!subItem.checked)
|
|
@@ -799,14 +801,44 @@ var DropDown = function (_a) {
|
|
|
799
801
|
optionSelection(subItem.chave, subItem.id);
|
|
800
802
|
setExpandedMenuId(null);
|
|
801
803
|
};
|
|
802
|
-
|
|
804
|
+
useEffect(function () {
|
|
805
|
+
var handleKeyDown = function (e) {
|
|
806
|
+
var _a;
|
|
807
|
+
var activeTag = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase();
|
|
808
|
+
if (e.key === " " && (activeTag === "button" || activeTag === "input")) {
|
|
809
|
+
return;
|
|
810
|
+
}
|
|
811
|
+
if (e.key === "Escape") {
|
|
812
|
+
setExpandedMenuId(null);
|
|
813
|
+
toggleDropDown();
|
|
814
|
+
}
|
|
815
|
+
};
|
|
816
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
817
|
+
return function () {
|
|
818
|
+
document.removeEventListener("keydown", handleKeyDown);
|
|
819
|
+
};
|
|
820
|
+
}, []);
|
|
821
|
+
return (React__default.createElement("div", __assign({ className: styles$o.dropdown }, restProps), options.map(function (item, index) {
|
|
803
822
|
var isExpanded = expandedMenuId === item.id;
|
|
804
823
|
var hasSubmenu = item.submenu.length > 0;
|
|
805
824
|
return (React__default.createElement("div", { key: item.id, className: styles$o.menuItem },
|
|
806
825
|
React__default.createElement("button", { className: "".concat(styles$o.primaryDropdown, " ").concat(item.checked
|
|
807
826
|
? styles$o.primaryDropdown__menu
|
|
808
|
-
: styles$o.primaryDropdown__disabled), onClick: function (ev) { return handleMenuClick(item, ev); }, onKeyDown: function (e) {
|
|
809
|
-
|
|
827
|
+
: styles$o.primaryDropdown__disabled), onClick: function (ev) { return handleMenuClick(item, ev); }, ref: function (el) { return (itemRefs.current[index] = el); }, onKeyDown: function (e) {
|
|
828
|
+
var _a, _b;
|
|
829
|
+
if (e.key === "ArrowDown") {
|
|
830
|
+
e.preventDefault();
|
|
831
|
+
var next = (index + 1) % options.length;
|
|
832
|
+
setFocusedIndex(next);
|
|
833
|
+
(_a = itemRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
834
|
+
}
|
|
835
|
+
else if (e.key === "ArrowUp") {
|
|
836
|
+
e.preventDefault();
|
|
837
|
+
var prev = (index - 1 + options.length) % options.length;
|
|
838
|
+
setFocusedIndex(prev);
|
|
839
|
+
(_b = itemRefs.current[prev]) === null || _b === void 0 ? void 0 : _b.focus();
|
|
840
|
+
}
|
|
841
|
+
else if ((e.key === "Enter" || e.key === " ") && item.checked) {
|
|
810
842
|
e.preventDefault();
|
|
811
843
|
handleMenuClick(item, e);
|
|
812
844
|
}
|
|
@@ -8276,7 +8308,7 @@ var AsyncSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
8276
8308
|
});
|
|
8277
8309
|
var AsyncSelect$1 = AsyncSelect;
|
|
8278
8310
|
|
|
8279
|
-
var css_248z$g = ".styles-module__flex___sYumE {\r\n display: flex;\r\n}\r\n\r\n.styles-module__selectContainer___Q9aTK label {\r\n font-size: 16px;\r\n line-height: 24px;\r\n color: #303030;\r\n width: 100%;\r\n font-weight: 700;\r\n text-align: left;\r\n cursor: pointer;\r\n font-family: var(--font-open-sans-regular);\r\n margin-bottom: 8px;\r\n display: block;\r\n}\r\n\r\n.styles-module__selectContainerDisabled___-fS2V label {\r\n color: #30303099 !important;\r\n}\r\n\r\n.styles-module__buttonSelect___m3mZk {\r\n width: 100%;\r\n height: 48px;\r\n max-height: 48px;\r\n display: flex;\r\n justify-content: space-between;\r\n border: 1px solid #cfcfcffc;\r\n border-radius: 8px;\r\n background-color: var(--background-color);\r\n padding: 14px 8px;\r\n cursor: pointer;\r\n}\r\n\r\n.styles-module__selectContainerDisabled___-fS2V .styles-module__buttonSelect___m3mZk {\r\n background-color: var(--
|
|
8311
|
+
var css_248z$g = ".styles-module__flex___sYumE {\r\n display: flex;\r\n}\r\n\r\n.styles-module__selectContainer___Q9aTK label {\r\n font-size: 16px;\r\n line-height: 24px;\r\n color: #303030;\r\n width: 100%;\r\n font-weight: 700;\r\n text-align: left;\r\n cursor: pointer;\r\n font-family: var(--font-open-sans-regular);\r\n margin-bottom: 8px;\r\n display: block;\r\n}\r\n\r\n.styles-module__selectContainerDisabled___-fS2V label {\r\n color: #30303099 !important;\r\n}\r\n\r\n.styles-module__buttonSelect___m3mZk {\r\n width: 100%;\r\n height: 48px;\r\n max-height: 48px;\r\n display: flex;\r\n justify-content: space-between;\r\n border: 1px solid #cfcfcffc;\r\n border-radius: 8px;\r\n background-color: var(--background-color);\r\n padding: 14px 8px;\r\n cursor: pointer;\r\n}\r\n\r\n.styles-module__selectContainerDisabled___-fS2V .styles-module__buttonSelect___m3mZk {\r\n background-color: var(--input-disabled-bg-color) !important;\r\n color: var(--color-secondary) !important;\r\n}\r\n\r\n.styles-module__buttonSelectFocus___rOddz,\r\n.styles-module__buttonSelect___m3mZk:focus {\r\n /* border: 1px solid var(--color-information);\r\n outline: solid var(--color-focus-outline) 1.5px; */\r\n\r\n color: var(--input-placeholder-focus);\r\n outline: none;\r\n border: 1px solid var(--information-color);\r\n box-shadow: 0px 0px 0px 2px #0091ea80;\r\n}\r\n\r\n.styles-module__buttonSelect___m3mZk:hover {\r\n background-color: #005a9214;\r\n}\r\n\r\n.styles-module__buttonSelectIcon___bLyj7 {\r\n width: 20px;\r\n height: 20px;\r\n margin-right: 8px;\r\n}\r\n\r\n.styles-module__buttonSelect___m3mZk:hover svg {\r\n color: var(--color-label);\r\n}\r\n\r\n.styles-module__buttonSelectFocus___rOddz svg {\r\n color: var(--information-color);\r\n}\r\n\r\n.styles-module__buttonSelectAction___4Lg-L {\r\n display: flex;\r\n gap: 4px;\r\n height: 20px;\r\n align-items: center;\r\n}\r\n\r\n.styles-module__iconChefron___U4x1- {\r\n color: var(--color-label);\r\n}\r\n\r\n.styles-module__buttonSelectError___lLMCP {\r\n border: 1px solid var(--color-danger);\r\n box-shadow: 0px 0px 0px 2px #dc354580;\r\n}\r\n\r\n.styles-module__selectOption___IGq-X {\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n font-size: 14px;\r\n color: var(--input-placeholder-focus);\r\n font-weight: 700;\r\n font-family: var(--font-open-sans-regular);\r\n}\r\n\r\n.styles-module__placeholder___HYCsC {\r\n color: var(--input-placeholder-color);\r\n font-weight: 700;\r\n}\r\n\r\n.styles-module__isRequired___NzEUO::after {\r\n content: \" *\";\r\n color: var(--color-danger);\r\n}\r\n\r\n.styles-module__search___Vjtlj {\r\n display: flex;\r\n border: 1px solid #cfcfcffc;\r\n border-radius: 8px;\r\n padding: 5px;\r\n margin-bottom: 8px;\r\n height: 37px;\r\n}\r\n\r\n.styles-module__search___Vjtlj input {\r\n width: 100%;\r\n border-radius: 0.375rem;\r\n font-size: 14px;\r\n outline: none;\r\n transition: border-color 0.3s;\r\n border: none;\r\n}\r\n\r\n.styles-module__search___Vjtlj svg {\r\n margin-right: 8px;\r\n color: #cfcfcffc;\r\n margin-top: 5px;\r\n margin-left: 5px;\r\n}\r\n\r\n.styles-module__selectAll___KL-II {\r\n width: 98%;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n padding: 4px 8px;\r\n}\r\n\r\n.styles-module__selectAll___KL-II label {\r\n cursor: pointer;\r\n padding-left: 8px;\r\n width: 100%;\r\n font-size: 14px;\r\n color: #424242;\r\n font-weight: 400;\r\n margin: 0;\r\n}\r\n\r\n.styles-module__selectAll___KL-II input[type=\"checkbox\" i] {\r\n background-color: initial;\r\n cursor: pointer;\r\n appearance: auto;\r\n box-sizing: border-box;\r\n padding: initial;\r\n border: initial;\r\n transform: scale(1.25);\r\n width: 16px;\r\n height: 16px;\r\n}\r\n\r\n.styles-module__selectOptionChecked___m7r-X {\r\n width: 100%;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n margin-bottom: 4px;\r\n gap: 10px;\r\n}\r\n\r\n.styles-module__selectOptionChecked___m7r-X:hover {\r\n background-color: #005a921a;\r\n}\r\n\r\n.styles-module__selectOptionChecked___m7r-X input[type=\"checkbox\" i] {\r\n background-color: initial;\r\n cursor: pointer;\r\n appearance: auto;\r\n box-sizing: border-box;\r\n padding: initial;\r\n border: initial;\r\n transform: scale(1.25);\r\n width: 16px;\r\n height: 16px;\r\n}\r\n\r\n.styles-module__selectOptionChecked___m7r-X label {\r\n cursor: pointer;\r\n font-size: 14px;\r\n color: #424242;\r\n font-weight: 400;\r\n margin: 0;\r\n}\r\n\r\n.styles-module__selectOptionCheckedSelected___w6Zr- {\r\n background-color: #005a921a;\r\n}\r\n\r\n.styles-module__totalSelected___kBJZ0 {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.styles-module__selectedItem___Sbb4T {\r\n display: inline-flex;\r\n align-items: center;\r\n background-color: #f0f0f0;\r\n border-radius: 4px;\r\n padding: 4px 8px;\r\n margin-right: 4px;\r\n font-size: 14px;\r\n}\r\n\r\n.styles-module__excluir___WTjQd {\r\n cursor: pointer;\r\n z-index: 2;\r\n margin-top: 2px;\r\n}\r\n\r\n.styles-module__separator___06tCE {\r\n align-self: stretch;\r\n width: 1px;\r\n background-color: hsl(0, 0%, 80%);\r\n box-sizing: border-box;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.styles-module__message___k0oeC {\r\n font-size: 11px;\r\n color: #303030d9;\r\n font-weight: 700;\r\n line-height: 16px;\r\n padding: 4px 8px;\r\n}\r\n\r\n.styles-module__messageError___hRIme {\r\n color: var(--color-danger);\r\n}\r\n\r\n.styles-module__iconCheck___GS3XH {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n";
|
|
8280
8312
|
var styles$g = {"flex":"styles-module__flex___sYumE","selectContainer":"styles-module__selectContainer___Q9aTK","selectContainerDisabled":"styles-module__selectContainerDisabled___-fS2V","buttonSelect":"styles-module__buttonSelect___m3mZk","buttonSelectFocus":"styles-module__buttonSelectFocus___rOddz","buttonSelectIcon":"styles-module__buttonSelectIcon___bLyj7","buttonSelectAction":"styles-module__buttonSelectAction___4Lg-L","iconChefron":"styles-module__iconChefron___U4x1-","buttonSelectError":"styles-module__buttonSelectError___lLMCP","selectOption":"styles-module__selectOption___IGq-X","placeholder":"styles-module__placeholder___HYCsC","isRequired":"styles-module__isRequired___NzEUO","search":"styles-module__search___Vjtlj","selectAll":"styles-module__selectAll___KL-II","selectOptionChecked":"styles-module__selectOptionChecked___m7r-X","selectOptionCheckedSelected":"styles-module__selectOptionCheckedSelected___w6Zr-","totalSelected":"styles-module__totalSelected___kBJZ0","selectedItem":"styles-module__selectedItem___Sbb4T","excluir":"styles-module__excluir___WTjQd","separator":"styles-module__separator___06tCE","message":"styles-module__message___k0oeC","messageError":"styles-module__messageError___hRIme","iconCheck":"styles-module__iconCheck___GS3XH"};
|
|
8281
8313
|
styleInject(css_248z$g);
|
|
8282
8314
|
|