nexaas-ui-components 1.0.76 → 1.0.78

package/dist/index.cjs

@@ -192,7 +192,7 @@ var Button = ({
   React5.useEffect(() => {
     if (!hotkey || !props.onClick) return;
     const handleKeyDown = (event) => {
-      var _a;
+      var _a, _b;
       if (props.disabled || props.loading) return;
       const keys = hotkey.toLowerCase().split("+").map((k) => k.trim());
       const primaryKey = keys.pop();
@@ -201,10 +201,17 @@ var Button = ({
       const requiredAlt = keys.includes("alt");
       const requiredShift = keys.includes("shift");
       const requiredMeta = keys.includes("meta") || keys.includes("cmd");
-      const match = event.key.toLowerCase() === primaryKey && event.ctrlKey === requiredCtrl && event.altKey === requiredAlt && event.shiftKey === requiredShift && event.metaKey === requiredMeta;
+      const keyAliases = {
+        esc: "escape",
+        del: "delete",
+        space: " ",
+        spacebar: " "
+      };
+      const normalizedPrimary = (_a = keyAliases[primaryKey]) != null ? _a : primaryKey;
+      const match = event.key.toLowerCase() === normalizedPrimary && event.ctrlKey === requiredCtrl && event.altKey === requiredAlt && event.shiftKey === requiredShift && event.metaKey === requiredMeta;
       if (match) {
         event.preventDefault();
-        (_a = props.onClick) == null ? void 0 : _a.call(props, event);
+        (_b = props.onClick) == null ? void 0 : _b.call(props, event);
       }
     };
     window.addEventListener("keydown", handleKeyDown);
@@ -494,7 +501,7 @@ var Input = ({
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const [showPassword, setShowPassword] = React5__namespace.default.useState(false);
   const styles = {
-    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:text-disabled disabled:cursor-not-allowed focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px] ${label ? "pt-[22px]" : "pt-[10px]"}
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-[var(--input-bg-disabled)] disabled:border-[var(--input-border-disabled)] disabled:text-disabled disabled:cursor-not-allowed focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px] ${label ? "pt-[22px]" : "pt-[10px]"}
       ${!hasError ? "border-neutral-300" : ""}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label peer-focus:text-blue-500"} peer-focus:border-blue-500`,
     rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
@@ -1243,7 +1250,6 @@ var FilterCalendar = ({
     filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100  shadow-input hover:bg-blue-500 hover:text-accent-label active:text-accent-label active:bg-blue-600 active:border-blue-600"
   };
   const [currentValue, setCurrentValue] = React5.useState([]);
-  const [calendarLabel, setCalendarLabel] = React5.useState("");
   const isMobileSize = (window == null ? void 0 : window.innerWidth) < 768;
   const shorcuts = [
     {
@@ -1407,6 +1413,9 @@ var FilterCalendar = ({
   const [selectedShortcut, setSelectedShortcut] = React5.useState(
     defaultShortcut || shorcuts[0]
   );
+  const [calendarLabel, setCalendarLabel] = React5.useState(
+    defaultShortcut != null && shorcuts[defaultShortcut] ? shorcuts[defaultShortcut].label : ""
+  );
   const calendar = /* @__PURE__ */ jsxRuntime.jsx("div", { id: "group-input-calendar", className: "relative", children: rangeCalendar ? /* @__PURE__ */ jsxRuntime.jsx(
     datetime2.DateRangePicker3,
     {
@@ -1472,7 +1481,7 @@ var FilterCalendar = ({
       control,
       render: ({ field }) => {
         var _a;
-        let hasValue = ((_a = field == null ? void 0 : field.value) == null ? void 0 : _a.length) > 0;
+        let hasValue = ((_a = field == null ? void 0 : field.value) == null ? void 0 : _a.length) > 0 || !!calendarLabel && calendarLabel !== shorcuts[0].label;
         return /* @__PURE__ */ jsxRuntime.jsx(
           react.Popover,
           {
@@ -1499,9 +1508,9 @@ var FilterCalendar = ({
                         "div",
                         {
                           className: clsx9__default.default({
-                            ["text-label group-active:text-blue-500"]: !field.value && !open,
-                            ["text-blue-500"]: open && !field.value,
-                            ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && field.value
+                            ["text-label group-active:text-blue-500"]: !hasValue && !open,
+                            ["text-blue-500"]: open && !hasValue,
+                            ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
                           }),
                           children: icon
                         }
@@ -1511,9 +1520,9 @@ var FilterCalendar = ({
                         {
                           className: clsx9__default.default(
                             {
-                              [`${labelClassName != null ? labelClassName : "text-paragraph"} group-active:text-blue-500`]: !field.value && !open,
-                              ["text-blue-500"]: open && !field.value,
-                              ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && field.value
+                              [`${labelClassName != null ? labelClassName : "text-paragraph"} group-active:text-blue-500`]: !hasValue && !open,
+                              ["text-blue-500"]: open && !hasValue,
+                              ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
                             },
                             "truncate cursor-pointer"
                           ),
@@ -1527,9 +1536,9 @@ var FilterCalendar = ({
                         {
                           className: clsx9__default.default(
                             {
-                              ["text-label group-active:text-blue-500"]: !field.value && !open,
-                              ["text-blue-500"]: open && !field.value,
-                              ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && field.value
+                              ["text-label group-active:text-blue-500"]: !hasValue && !open,
+                              ["text-blue-500"]: open && !hasValue,
+                              ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
                             },
                             "uil uil-angle-down text-[18px]"
                           )
@@ -1694,6 +1703,7 @@ var FilterOptions = ({
   subFilters = [],
   emptyMessage,
   initialMessage,
+  initialMessageClassName,
   applyOnClick = false,
   showFilter = false,
   renderOption,
@@ -1982,7 +1992,7 @@ var FilterOptions = ({
                                     "Carregando"
                                   ] }),
                                   (data == null ? void 0 : data.length) === 0 && (filter == null ? void 0 : filter.length) > 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label text-p-md", children: emptyMessage }) }),
-                                  initialMessage && (data == null ? void 0 : data.length) === 0 && (filter == null ? void 0 : filter.length) === 0 && !loading && (options == null ? void 0 : options.length) === 0 && !(currentValue == null ? void 0 : currentValue.id) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label text-p-md", children: initialMessage }) }),
+                                  initialMessage && (data == null ? void 0 : data.length) === 0 && (filter == null ? void 0 : filter.length) === 0 && !loading && (options == null ? void 0 : options.length) === 0 && !(currentValue == null ? void 0 : currentValue.id) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx9__default.default("py-4", initialMessageClassName), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label text-p-md", children: initialMessage }) }),
                                   initialMessage && currentValue && (currentValue == null ? void 0 : currentValue.id) && (filter == null ? void 0 : filter.length) === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: isMulti ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: currentValue == null ? void 0 : currentValue.map((option) => {
                                     let isSelected = isMulti ? currentValue && (currentValue == null ? void 0 : currentValue.length) > 0 && (currentValue == null ? void 0 : currentValue.some(
                                       (e) => e.id === option.id
@@ -3248,20 +3258,21 @@ var customStyles2 = {
   }),
   placeholder: (provided, state) => ({
     ...provided,
-    paddingLeft: state.selectProps.hasIcon ? "34px" : "0px"
+    paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
+    color: state.isDisabled ? "var(--input-placeholder-disabled)" : "var(--label)"
   }),
   control: (provided, state) => ({
     ...provided,
     cursor: "pointer",
-    border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--neutral-300)",
+    border: state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--neutral-300)",
     boxShadow: state.isFocused ? "0 0 0 2px var(--surface), 0 0 0 3.5px var(--blue-500)" : "none",
     outline: "none",
     borderRadius: state.isFocused ? "2px" : "0.5rem",
     placeholder: " ",
     height: "46px",
-    backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
+    backgroundColor: state.isDisabled ? "var(--input-bg-disabled)" : "var(--surface)",
     ":hover": {
-      border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--neutral-300)"
+      border: state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--neutral-300)"
     }
   }),
   multiValue: (provided) => ({