@clickpalm/react 1.3.0 → 1.3.2

package/dist/index.d.ts

@@ -2313,6 +2313,7 @@ interface DatePickerInputProps {
     value?: string;
     onChange: (date: string) => void;
     errorMessage?: string;
+    endDate?: Date;
 }
 declare const Datepicker: react.ForwardRefExoticComponent<DatePickerInputProps & react.RefAttributes<HTMLInputElement>>;
 
@@ -3058,6 +3059,7 @@ interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'>, VariantPro
     htmlFor?: string;
     errorMessage?: string;
     maxLength?: number;
+    showCounter?: boolean;
 }
 declare const TextArea: react.ForwardRefExoticComponent<TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
@@ -3088,6 +3090,7 @@ interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
     noMargin?: boolean;
     errorMessage?: string;
     maxLength?: number;
+    showCounter?: boolean;
 }
 declare const Input: react__default.ForwardRefExoticComponent<TextInputProps & react__default.RefAttributes<HTMLInputElement>>;
 

package/dist/index.js

@@ -1312,7 +1312,7 @@ var CharCounter = styled(Span2, {
   whiteSpace: "nowrap",
   paddingRight: "1px",
   marginTop: "2px",
-  marginBottom: "$6",
+  marginBottom: "0px",
   variants: {
     hasReachedMax: {
       true: {
@@ -1325,7 +1325,7 @@ var CharCounter = styled(Span2, {
 // src/components/Input/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Input2 = (0, import_react5.forwardRef)(
-  ({ prefix, suffix, label, maxLength, errorMessage, noMargin = false, ...props }, forwardedRef) => {
+  ({ prefix, suffix, label, maxLength, showCounter = false, errorMessage, noMargin = false, ...props }, forwardedRef) => {
     const [charCount, setCharCount] = (0, import_react5.useState)(0);
     const localInputRef = (0, import_react5.useRef)(null);
     const inputRef = forwardedRef || localInputRef;
@@ -1346,7 +1346,7 @@ var Input2 = (0, import_react5.forwardRef)(
           hasButtonSuffix: isButtonElement(suffix),
           noMargin,
           hasError: !!errorMessage,
-          hasCounter: !!maxLength,
+          hasCounter: showCounter,
           onClick: handleContainerClick,
           children: [
             !!prefix && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Prefix, { children: prefix }),
@@ -1370,7 +1370,7 @@ var Input2 = (0, import_react5.forwardRef)(
       ),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Footer, { children: [
         errorMessage && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Span2, { children: errorMessage }),
-        maxLength && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CharCounter, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
+        showCounter && maxLength && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CharCounter, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
           charCount,
           "/",
           maxLength
@@ -1430,7 +1430,8 @@ var SelectOptionsList = styled("ul", {
   fontFamily: theme.fonts.default,
   fontWeight: theme.fontWeights.regular,
   textAlign: "left",
-  width: "100%",
+  width: "120px",
+  overflowX: "hidden",
   "&::-webkit-scrollbar": {
     width: "8px"
   },
@@ -1455,6 +1456,14 @@ var SelectOptionItem = styled("li", {
     backgroundColor: theme.colors.gray_background,
     color: theme.colors.clickpalm_mid
   },
+  '&[aria-disabled="true"]': {
+    color: theme.colors.gray_mid,
+    cursor: "not-allowed",
+    "&:hover": {
+      backgroundColor: "transparent",
+      color: theme.colors.gray_mid
+    }
+  },
   variants: {
     selected: {
       true: {
@@ -1539,7 +1548,8 @@ var CustomSelect = ({
       SelectOptionItem,
       {
         selected: option.value === value,
-        onClick: () => handleOptionClick(option.value),
+        onClick: () => !option.disabled && handleOptionClick(option.value),
+        "aria-disabled": option.disabled,
         children: option.label
       },
       option.value
@@ -1563,9 +1573,14 @@ function DatePickerSelectAdapter(props) {
     const label = typeof option.label === "string" ? option.label.charAt(0).toUpperCase() + option.label.slice(1) : option.label;
     return {
       label,
-      value: option.value?.toString() ?? ""
+      value: option.value?.toString() ?? "",
+      disabled: option.disabled
     };
   }) || [];
+  const isYearDropdown = options && options.length > 0 && typeof options[0].value === "number" && options[0].value > 31;
+  if (isYearDropdown) {
+    selectOptions.reverse();
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     CustomSelect,
     {
@@ -1671,7 +1686,8 @@ var datePickerStyles = globalCss({
 // src/components/Datepicker/index.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 datePickerStyles();
-var Datepicker = (0, import_react7.forwardRef)(({ label, placeholder, value, onChange, errorMessage }, ref) => {
+var oneYearMore = new Date((/* @__PURE__ */ new Date()).getFullYear() + 1, 11);
+var Datepicker = (0, import_react7.forwardRef)(({ label, placeholder, value, onChange, errorMessage, endDate = oneYearMore }, ref) => {
   const [selected, setSelected] = (0, import_react7.useState)(void 0);
   const [month, setMonth] = (0, import_react7.useState)(/* @__PURE__ */ new Date());
   const [open, setOpen] = (0, import_react7.useState)(false);
@@ -1739,7 +1755,7 @@ var Datepicker = (0, import_react7.forwardRef)(({ label, placeholder, value, onC
             showOutsideDays: true,
             captionLayout: "dropdown",
             startMonth: new Date(1915, 0),
-            endMonth: /* @__PURE__ */ new Date(),
+            endMonth: endDate,
             components: {
               PreviousMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "TriangleLeft", size: 16 }) }),
               NextMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "TriangleRight", size: 16 }) }),
@@ -2502,7 +2518,7 @@ var CharCounter2 = styled(Span5, {
   whiteSpace: "nowrap",
   paddingRight: "1px",
   marginTop: "2px",
-  marginBottom: "$6",
+  marginBottom: "0px",
   variants: {
     hasReachedMax: {
       true: {
@@ -2512,7 +2528,7 @@ var CharCounter2 = styled(Span5, {
   }
 });
 var TextArea = (0, import_react13.forwardRef)(
-  ({ label, id, htmlFor, errorMessage, maxLength, ...props }, ref) => {
+  ({ label, id, htmlFor, errorMessage, maxLength, showCounter = false, ...props }, ref) => {
     const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
     const [charCount, setCharCount] = (0, import_react13.useState)(0);
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Wrapper4, { children: [
@@ -2523,7 +2539,7 @@ var TextArea = (0, import_react13.forwardRef)(
           id: textAreaId,
           ...props,
           hasError: !!errorMessage,
-          hasCounter: !!maxLength,
+          hasCounter: showCounter,
           ref,
           maxLength,
           onChange: (e) => {
@@ -2536,7 +2552,7 @@ var TextArea = (0, import_react13.forwardRef)(
       ),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Footer2, { children: [
         errorMessage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Span5, { children: errorMessage }),
-        maxLength && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(CharCounter2, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
+        showCounter && maxLength && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(CharCounter2, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
           charCount,
           "/",
           maxLength
@@ -4171,19 +4187,24 @@ var AccordionHeader = styled(Accordion.Header, {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  padding: "0 $5"
+  padding: "0 $5",
+  gap: "$2"
 });
 var AccordionTrigger = styled(Accordion.Trigger, {
   all: "unset",
-  fontFamily: "$default",
   backgroundColor: "transparent",
   display: "flex",
   alignItems: "center",
+  fontFamily: "$default",
+  fontWeight: "$bold",
   fontSize: "$md",
   lineHeight: "$regular",
+  textAlign: "left",
   color: "$black",
-  fontWeight: "$bold",
   width: "100%",
+  flexWrap: "wrap",
+  wordBreak: "break-word",
+  whiteSpace: "normal",
   "&:hover": {
     cursor: "pointer"
   },

package/dist/index.mjs

@@ -1242,7 +1242,7 @@ var CharCounter = styled(Span2, {
   whiteSpace: "nowrap",
   paddingRight: "1px",
   marginTop: "2px",
-  marginBottom: "$6",
+  marginBottom: "0px",
   variants: {
     hasReachedMax: {
       true: {
@@ -1255,7 +1255,7 @@ var CharCounter = styled(Span2, {
 // src/components/Input/index.tsx
 import { jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
 var Input2 = forwardRef3(
-  ({ prefix, suffix, label, maxLength, errorMessage, noMargin = false, ...props }, forwardedRef) => {
+  ({ prefix, suffix, label, maxLength, showCounter = false, errorMessage, noMargin = false, ...props }, forwardedRef) => {
     const [charCount, setCharCount] = useState2(0);
     const localInputRef = useRef2(null);
     const inputRef = forwardedRef || localInputRef;
@@ -1276,7 +1276,7 @@ var Input2 = forwardRef3(
           hasButtonSuffix: isButtonElement(suffix),
           noMargin,
           hasError: !!errorMessage,
-          hasCounter: !!maxLength,
+          hasCounter: showCounter,
           onClick: handleContainerClick,
           children: [
             !!prefix && /* @__PURE__ */ jsx19(Prefix, { children: prefix }),
@@ -1300,7 +1300,7 @@ var Input2 = forwardRef3(
       ),
       /* @__PURE__ */ jsxs4(Footer, { children: [
         errorMessage && /* @__PURE__ */ jsx19(Span2, { children: errorMessage }),
-        maxLength && /* @__PURE__ */ jsxs4(CharCounter, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
+        showCounter && maxLength && /* @__PURE__ */ jsxs4(CharCounter, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
           charCount,
           "/",
           maxLength
@@ -1360,7 +1360,8 @@ var SelectOptionsList = styled("ul", {
   fontFamily: theme.fonts.default,
   fontWeight: theme.fontWeights.regular,
   textAlign: "left",
-  width: "100%",
+  width: "120px",
+  overflowX: "hidden",
   "&::-webkit-scrollbar": {
     width: "8px"
   },
@@ -1385,6 +1386,14 @@ var SelectOptionItem = styled("li", {
     backgroundColor: theme.colors.gray_background,
     color: theme.colors.clickpalm_mid
   },
+  '&[aria-disabled="true"]': {
+    color: theme.colors.gray_mid,
+    cursor: "not-allowed",
+    "&:hover": {
+      backgroundColor: "transparent",
+      color: theme.colors.gray_mid
+    }
+  },
   variants: {
     selected: {
       true: {
@@ -1469,7 +1478,8 @@ var CustomSelect = ({
       SelectOptionItem,
       {
         selected: option.value === value,
-        onClick: () => handleOptionClick(option.value),
+        onClick: () => !option.disabled && handleOptionClick(option.value),
+        "aria-disabled": option.disabled,
         children: option.label
       },
       option.value
@@ -1493,9 +1503,14 @@ function DatePickerSelectAdapter(props) {
     const label = typeof option.label === "string" ? option.label.charAt(0).toUpperCase() + option.label.slice(1) : option.label;
     return {
       label,
-      value: option.value?.toString() ?? ""
+      value: option.value?.toString() ?? "",
+      disabled: option.disabled
     };
   }) || [];
+  const isYearDropdown = options && options.length > 0 && typeof options[0].value === "number" && options[0].value > 31;
+  if (isYearDropdown) {
+    selectOptions.reverse();
+  }
   return /* @__PURE__ */ jsx21(
     CustomSelect,
     {
@@ -1601,7 +1616,8 @@ var datePickerStyles = globalCss({
 // src/components/Datepicker/index.tsx
 import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
 datePickerStyles();
-var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessage }, ref) => {
+var oneYearMore = new Date((/* @__PURE__ */ new Date()).getFullYear() + 1, 11);
+var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessage, endDate = oneYearMore }, ref) => {
   const [selected, setSelected] = useState4(void 0);
   const [month, setMonth] = useState4(/* @__PURE__ */ new Date());
   const [open, setOpen] = useState4(false);
@@ -1669,7 +1685,7 @@ var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessag
             showOutsideDays: true,
             captionLayout: "dropdown",
             startMonth: new Date(1915, 0),
-            endMonth: /* @__PURE__ */ new Date(),
+            endMonth: endDate,
             components: {
               PreviousMonthButton: (props) => /* @__PURE__ */ jsx22(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ jsx22(Icon, { name: "TriangleLeft", size: 16 }) }),
               NextMonthButton: (props) => /* @__PURE__ */ jsx22(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ jsx22(Icon, { name: "TriangleRight", size: 16 }) }),
@@ -2432,7 +2448,7 @@ var CharCounter2 = styled(Span5, {
   whiteSpace: "nowrap",
   paddingRight: "1px",
   marginTop: "2px",
-  marginBottom: "$6",
+  marginBottom: "0px",
   variants: {
     hasReachedMax: {
       true: {
@@ -2442,7 +2458,7 @@ var CharCounter2 = styled(Span5, {
   }
 });
 var TextArea = forwardRef8(
-  ({ label, id, htmlFor, errorMessage, maxLength, ...props }, ref) => {
+  ({ label, id, htmlFor, errorMessage, maxLength, showCounter = false, ...props }, ref) => {
     const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
     const [charCount, setCharCount] = useState7(0);
     return /* @__PURE__ */ jsxs12(Wrapper4, { children: [
@@ -2453,7 +2469,7 @@ var TextArea = forwardRef8(
           id: textAreaId,
           ...props,
           hasError: !!errorMessage,
-          hasCounter: !!maxLength,
+          hasCounter: showCounter,
           ref,
           maxLength,
           onChange: (e) => {
@@ -2466,7 +2482,7 @@ var TextArea = forwardRef8(
       ),
       /* @__PURE__ */ jsxs12(Footer2, { children: [
         errorMessage && /* @__PURE__ */ jsx30(Span5, { children: errorMessage }),
-        maxLength && /* @__PURE__ */ jsxs12(CharCounter2, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
+        showCounter && maxLength && /* @__PURE__ */ jsxs12(CharCounter2, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
           charCount,
           "/",
           maxLength
@@ -4105,19 +4121,24 @@ var AccordionHeader = styled(Accordion.Header, {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  padding: "0 $5"
+  padding: "0 $5",
+  gap: "$2"
 });
 var AccordionTrigger = styled(Accordion.Trigger, {
   all: "unset",
-  fontFamily: "$default",
   backgroundColor: "transparent",
   display: "flex",
   alignItems: "center",
+  fontFamily: "$default",
+  fontWeight: "$bold",
   fontSize: "$md",
   lineHeight: "$regular",
+  textAlign: "left",
   color: "$black",
-  fontWeight: "$bold",
   width: "100%",
+  flexWrap: "wrap",
+  wordBreak: "break-word",
+  whiteSpace: "normal",
   "&:hover": {
     cursor: "pointer"
   },

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Design System da Clikpalm",
 	"author": "Enisson Shilo",
 	"license": "MIT",
-	"version": "1.3.0",
+	"version": "1.3.2",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/clickpalm/clickpalm-designsystem-lib.git"