pge-front-common 14.0.17 → 14.0.20
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/Select/index.d.ts +1 -1
- package/lib/components/SkeletonLoader/index.d.ts +6 -0
- package/lib/components/SkeletonLoader/skeletonloader.stories.d.ts +8 -0
- package/lib/index.d.ts +1 -1
- package/lib/index.esm.js +44 -13
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +44 -13
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { SelectDefaultProps } from "./index.types";
|
|
3
|
-
declare const SelectDefault: ({ name, control, optionsSelect, placeholder, isDisabled, label, hasError, handleChange, isRequired, value, }: SelectDefaultProps) => React.JSX.Element;
|
|
3
|
+
declare const SelectDefault: ({ name, control, optionsSelect, placeholder, isDisabled, label, hasError, handleChange, isRequired, value, handleInputChange, }: SelectDefaultProps) => React.JSX.Element;
|
|
4
4
|
export default SelectDefault;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { SkeletonLoader } from "./index";
|
|
3
|
+
declare const meta: Meta<typeof SkeletonLoader>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Avatar: Story;
|
|
8
|
+
export declare const Card: Story;
|
package/lib/index.d.ts
CHANGED
|
@@ -381,7 +381,7 @@ type OptionsProps = {
|
|
|
381
381
|
value: string;
|
|
382
382
|
};
|
|
383
383
|
|
|
384
|
-
declare const SelectDefault: ({ name, control, optionsSelect, placeholder, isDisabled, label, hasError, handleChange, isRequired, value, }: SelectDefaultProps) => React$1.JSX.Element;
|
|
384
|
+
declare const SelectDefault: ({ name, control, optionsSelect, placeholder, isDisabled, label, hasError, handleChange, isRequired, value, handleInputChange, }: SelectDefaultProps) => React$1.JSX.Element;
|
|
385
385
|
|
|
386
386
|
interface ModalProps$1 {
|
|
387
387
|
isModalOpen: boolean;
|
package/lib/index.esm.js
CHANGED
|
@@ -107,7 +107,7 @@ var InputBase = function (_a) {
|
|
|
107
107
|
var _b;
|
|
108
108
|
var customClass = _a.customClass, restrictionMessage = _a.restrictionMessage, label = _a.label, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onRightIconClick = _a.onRightIconClick, style = _a.style, required = _a.required; _a.error; _a.helperText; var disabled = _a.disabled; _a.readOnly; _a.className; var props = __rest(_a, ["customClass", "restrictionMessage", "label", "leftIcon", "rightIcon", "onRightIconClick", "style", "required", "error", "helperText", "disabled", "readOnly", "className"]);
|
|
109
109
|
return (React__default.createElement("div", { className: styles$v.inputContainer },
|
|
110
|
-
label && (React__default.createElement("label", { htmlFor: props.name, className: "".concat(styles$v.labelInput, " ").concat(required ? styles$v.labelRequired : "") }, label)),
|
|
110
|
+
label && (React__default.createElement("label", { tabIndex: 0, htmlFor: props.name, className: "".concat(styles$v.labelInput, " ").concat(required ? styles$v.labelRequired : "") }, label)),
|
|
111
111
|
React__default.createElement("div", { className: styles$v.inputContent },
|
|
112
112
|
leftIcon && React__default.createElement("div", { className: styles$v.iconWrapperLeft }, leftIcon),
|
|
113
113
|
React__default.createElement("input", __assign({ className: clsx(styles$v.textInput, customClass, (_b = {},
|
|
@@ -609,14 +609,16 @@ var Tooltip$1 = function (_a) {
|
|
|
609
609
|
var tooltipRef = useRef(null);
|
|
610
610
|
var containerRef = useRef(null);
|
|
611
611
|
var visible = internalVisible || forceVisible;
|
|
612
|
+
var isMobile = typeof window !== "undefined" && window.innerWidth <= 480;
|
|
612
613
|
useEffect(function () {
|
|
613
|
-
if (!
|
|
614
|
+
if (!tooltipRef.current || !containerRef.current)
|
|
614
615
|
return;
|
|
615
|
-
var isMobile = window.innerWidth <= 480;
|
|
616
616
|
if (isMobile) {
|
|
617
617
|
setPosition("mobile");
|
|
618
618
|
return;
|
|
619
619
|
}
|
|
620
|
+
if (!visible)
|
|
621
|
+
return;
|
|
620
622
|
var tooltipRect = tooltipRef.current.getBoundingClientRect();
|
|
621
623
|
var containerRect = containerRef.current.getBoundingClientRect();
|
|
622
624
|
var spaceAbove = containerRect.top;
|
|
@@ -637,13 +639,28 @@ var Tooltip$1 = function (_a) {
|
|
|
637
639
|
newPosition = "top-left";
|
|
638
640
|
}
|
|
639
641
|
setPosition(newPosition);
|
|
640
|
-
}, [visible]);
|
|
641
|
-
var
|
|
642
|
-
|
|
642
|
+
}, [visible, isMobile]);
|
|
643
|
+
var handleDesktopMouseEnter = function () {
|
|
644
|
+
if (!isMobile)
|
|
645
|
+
setInternalVisible(true);
|
|
646
|
+
};
|
|
647
|
+
var handleDesktopMouseLeave = function () {
|
|
648
|
+
if (!isMobile)
|
|
649
|
+
setInternalVisible(false);
|
|
650
|
+
};
|
|
651
|
+
var handleMobileTouch = function () {
|
|
652
|
+
if (isMobile) {
|
|
653
|
+
setInternalVisible(function (prev) { return !prev; });
|
|
654
|
+
}
|
|
643
655
|
};
|
|
644
|
-
|
|
656
|
+
var handleClick = function () {
|
|
657
|
+
if (!isMobile) {
|
|
658
|
+
setInternalVisible(function (prev) { return !prev; });
|
|
659
|
+
}
|
|
660
|
+
};
|
|
661
|
+
return (React__default.createElement("div", { className: styles$p.container, ref: containerRef, onMouseEnter: handleDesktopMouseEnter, onMouseLeave: handleDesktopMouseLeave, onClick: handleClick, onTouchStart: handleMobileTouch, role: "button", "aria-haspopup": "true", "aria-expanded": visible },
|
|
645
662
|
children,
|
|
646
|
-
visible && (React__default.createElement("div", { ref: tooltipRef, className: "".concat(styles$p.tooltip, " ").concat(styles$p[position]) },
|
|
663
|
+
visible && (React__default.createElement("div", { ref: tooltipRef, className: "".concat(styles$p.tooltip, " ").concat(styles$p[position]), "aria-hidden": !visible },
|
|
647
664
|
React__default.createElement("span", { className: styles$p.textContent }, text)))));
|
|
648
665
|
};
|
|
649
666
|
|
|
@@ -1079,7 +1096,7 @@ var PaginationTable = function (_a) {
|
|
|
1079
1096
|
React__default.createElement("button", { type: "button", className: "".concat(styles$f.paginationButton, " ").concat(currentPage === countPage ? styles$f.paginationButtonDisabled : ""), onClick: function () { return handleClickPage === null || handleClickPage === void 0 ? void 0 : handleClickPage(currentPage + 1); }, disabled: currentPage === countPage }, ">")))));
|
|
1080
1097
|
};
|
|
1081
1098
|
|
|
1082
|
-
var css_248z$e = ".styles-module__paginationContainer___FagFs {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 16px;\r\n border: 1px solid #d9d9d9;\r\n border-radius: 8px;\r\n font-size: var(--font-size-14);\r\n max-height: 61px;\r\n
|
|
1099
|
+
var css_248z$e = ".styles-module__paginationContainer___FagFs {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 16px;\r\n border: 1px solid #d9d9d9;\r\n border-radius: 8px;\r\n font-size: var(--font-size-14);\r\n max-height: 61px;\r\n border-radius: 0px 0px 10px 10px;\r\n background-color: var(--background-color);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__paginationContainer___FagFs {\r\n font-size: var(--font-size-12);\r\n max-height: 105px;\r\n }\r\n}\r\n\r\n.styles-module__labelItems___p-9pv {\r\n font-size: var(--font-size-14, 14px);\r\n font-weight: 400;\r\n color: var(--foreground);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__labelItems___p-9pv {\r\n display: none;\r\n }\r\n}\r\n\r\n.styles-module__itemsPerPageWrapper___PTkJr {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n height: 61px;\r\n}\r\n\r\n.styles-module__itemsPerPageWrapperSelect___gVLGU {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n}\r\n\r\n.styles-module__paginationInfo___NrLda {\r\n font-size: var(--font-size-14, 14px);\r\n font-weight: 400;\r\n color: var(--foreground);\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n .styles-module__paginationInfo___NrLda {\r\n font-size: var(--font-size-12, 12px);\r\n }\r\n}\r\n\r\n.styles-module__navigationWrapper___lJ040 {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n height: 61px;\r\n}\r\n\r\n.styles-module__separatorItem___t-PSR {\r\n width: 1px;\r\n height: 50%;\r\n background-color: #cccccc;\r\n}\r\n\r\n.styles-module__currentPage___SRV7Q {\r\n font-size: var(--font-size-16, 16px);\r\n font-weight: bold;\r\n margin: 0 5px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n border: 1px solid #FFFFFF;\r\n background-color: transparent;\r\n color: var(--paginationv2-arrow-color);\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:first-of-type {\r\n border-top-left-radius: 4px;\r\n border-bottom-left-radius: 4px;\r\n margin-left: 10px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:last-of-type {\r\n border-top-right-radius: 4px;\r\n border-bottom-right-radius: 4px;\r\n}\r\n\r\n.styles-module__navButton___pqOMS:disabled {\r\n cursor: not-allowed;\r\n}\r\n\r\n/* .navButton:hover:not(:disabled) {\r\n} */\r\n\r\n/* Select.module.css */\r\n.styles-module__selectContainerPagination___C-Epb {\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.styles-module__selectTrigger___A5PsD {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 8px 12px;\r\n background: var(--paginationv2-selecttrigger-bg-color);\r\n border: 1px solid var(--paginationv2-selecttrigger-border-color);\r\n border-radius: 4px;\r\n cursor: default;\r\n gap: 12px;\r\n margin-right: 10px;\r\n}\r\n\r\n.styles-module__selectedValue___S6skE {\r\n font-size: var(--font-size-14, 14px);\r\n color: var(--paginationv2-selectedValue-color);\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n .styles-module__selectedValue___S6skE {\r\n font-size: var(--font-size-12, 12px);\r\n }\r\n}\r\n\r\n.styles-module__icon___-BaZE {\r\n width: 10px;\r\n height: 18px;\r\n cursor: pointer;\r\n transition: transform 0.2s ease;\r\n}\r\n\r\n.styles-module__iconOpen___Azg3S {\r\n transform: rotate(180deg);\r\n}\r\n\r\n.styles-module__optionsList___Xs-ze {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n margin-top: 4px;\r\n background: var(--paginationv2-optionslist-bg-color);\r\n border: 1px solid #e1e1e1;\r\n border-radius: 4px;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n z-index: 1000;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n width: fit-content;\r\n padding: 0;\r\n}\r\n\r\n.styles-module__option___riTqX {\r\n padding: 8px 12px;\r\n font-size: var(--font-size-14, 14px);\r\n color: var(--paginationv2-optionslist-font-color);\r\n cursor: pointer;\r\n}\r\n\r\n.styles-module__option___riTqX:hover {\r\n background-color: var(--paginationv2-optionslist-hover-bg-color);\r\n}\r\n\r\n.styles-module__option___riTqX.styles-module__selected___6iUvP {\r\n background-color: var(--paginationv2-optionselect-bg-color);\r\n color: var(--paginationv2-optionselect-text-color);\r\n}\r\n\r\n.styles-module__selectTrigger___A5PsD:hover {\r\n border-color: var(--primary-color);\r\n}";
|
|
1083
1100
|
var styles$e = {"paginationContainer":"styles-module__paginationContainer___FagFs","labelItems":"styles-module__labelItems___p-9pv","itemsPerPageWrapper":"styles-module__itemsPerPageWrapper___PTkJr","itemsPerPageWrapperSelect":"styles-module__itemsPerPageWrapperSelect___gVLGU","paginationInfo":"styles-module__paginationInfo___NrLda","navigationWrapper":"styles-module__navigationWrapper___lJ040","separatorItem":"styles-module__separatorItem___t-PSR","currentPage":"styles-module__currentPage___SRV7Q","navButton":"styles-module__navButton___pqOMS","selectContainerPagination":"styles-module__selectContainerPagination___C-Epb","selectTrigger":"styles-module__selectTrigger___A5PsD","selectedValue":"styles-module__selectedValue___S6skE","icon":"styles-module__icon___-BaZE","iconOpen":"styles-module__iconOpen___Azg3S","optionsList":"styles-module__optionsList___Xs-ze","option":"styles-module__option___riTqX","selected":"styles-module__selected___6iUvP"};
|
|
1084
1101
|
styleInject(css_248z$e);
|
|
1085
1102
|
|
|
@@ -1105,10 +1122,20 @@ var SelectPagination = function (_a) {
|
|
|
1105
1122
|
setIsOpen(false);
|
|
1106
1123
|
};
|
|
1107
1124
|
return (React__default.createElement("div", { ref: selectRef, className: "".concat(styles$e.selectContainerPagination, " ").concat(className) },
|
|
1108
|
-
React__default.createElement("div", { className: styles$e.selectTrigger
|
|
1125
|
+
React__default.createElement("div", { className: styles$e.selectTrigger, tabIndex: 0, onKeyDown: function (e) {
|
|
1126
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
1127
|
+
e.preventDefault();
|
|
1128
|
+
setIsOpen(function (prev) { return !prev; });
|
|
1129
|
+
}
|
|
1130
|
+
} },
|
|
1109
1131
|
React__default.createElement("span", { className: styles$e.selectedValue }, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label.padStart(2, "0")),
|
|
1110
1132
|
React__default.createElement(IconTriangleRecall, { onClick: function () { return setIsOpen(!isOpen); }, className: "".concat(styles$e.icon, " ").concat(isOpen ? styles$e.iconOpen : ""), fill: "#005A92" })),
|
|
1111
|
-
isOpen && (React__default.createElement("div", { className: styles$e.optionsList }, options.map(function (option) { return (React__default.createElement("div", { key: option.value, className: "".concat(styles$e.option, " ").concat(option.value === value ? styles$e.selected : ""), onClick: function () { return handleSelect(option.value); }
|
|
1133
|
+
isOpen && (React__default.createElement("div", { className: styles$e.optionsList }, options.map(function (option) { return (React__default.createElement("div", { key: option.value, tabIndex: 0, className: "".concat(styles$e.option, " ").concat(option.value === value ? styles$e.selected : ""), onClick: function () { return handleSelect(option.value); }, onKeyDown: function (e) {
|
|
1134
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
1135
|
+
e.preventDefault();
|
|
1136
|
+
handleSelect(option.value);
|
|
1137
|
+
}
|
|
1138
|
+
} }, option.label.padStart(2, "0"))); })))));
|
|
1112
1139
|
};
|
|
1113
1140
|
|
|
1114
1141
|
var IconArrowLeft = function (props) {
|
|
@@ -21380,7 +21407,7 @@ var selectColourStyles = function (isInvalid) { return ({
|
|
|
21380
21407
|
},
|
|
21381
21408
|
}); };
|
|
21382
21409
|
var SelectDefault = function (_a) {
|
|
21383
|
-
var name = _a.name, control = _a.control, optionsSelect = _a.optionsSelect, placeholder = _a.placeholder, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, label = _a.label, _c = _a.hasError, hasError = _c === void 0 ? false : _c, handleChange = _a.handleChange, isRequired = _a.isRequired, value = _a.value;
|
|
21410
|
+
var name = _a.name, control = _a.control, optionsSelect = _a.optionsSelect, placeholder = _a.placeholder, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, label = _a.label, _c = _a.hasError, hasError = _c === void 0 ? false : _c, handleChange = _a.handleChange, isRequired = _a.isRequired, value = _a.value, handleInputChange = _a.handleInputChange;
|
|
21384
21411
|
var _d = useController({ name: name, control: control }), _e = _d.field; _e.onChange; _e.value; var rest = __rest(_e, ["onChange", "value"]), error = _d.fieldState.error;
|
|
21385
21412
|
var CustomDropdownIndicator = function () {
|
|
21386
21413
|
return (React.createElement("div", { className: styles$3.contentIcon },
|
|
@@ -21392,7 +21419,11 @@ var SelectDefault = function (_a) {
|
|
|
21392
21419
|
" ",
|
|
21393
21420
|
isRequired ? React.createElement("span", { className: styles$3.errorRequired }, "*") : null)),
|
|
21394
21421
|
React.createElement("div", { className: styles$3.selectElement },
|
|
21395
|
-
React.createElement(StateManagedSelect$1, __assign({ isMulti: false, isDisabled: isDisabled, options: optionsSelect, value: optionsSelect.find(function (opt) { return opt.value === value; }) || value, onChange: handleChange,
|
|
21422
|
+
React.createElement(StateManagedSelect$1, __assign({ isMulti: false, isDisabled: isDisabled, options: optionsSelect, value: optionsSelect.find(function (opt) { return opt.value === value; }) || value, onChange: handleChange, onInputChange: function (inputValue) {
|
|
21423
|
+
if (inputValue) {
|
|
21424
|
+
handleInputChange === null || handleInputChange === void 0 ? void 0 : handleInputChange(inputValue);
|
|
21425
|
+
}
|
|
21426
|
+
}, placeholder: placeholder, styles: selectColourStyles(hasError || !!error), isClearable: true, isSearchable: true, noOptionsMessage: function () { return "Nenhuma opção disponível"; }, components: { DropdownIndicator: CustomDropdownIndicator } }, rest))),
|
|
21396
21427
|
error && React.createElement("span", { className: styles$3.errorText }, error.message)));
|
|
21397
21428
|
};
|
|
21398
21429
|
|