@idds/react 1.5.3 → 1.5.6

package/dist/index.es.js

@@ -6012,6 +6012,8 @@ const TimePicker = forwardRef(
     disabledTimeBefore,
     disabledTimeAfter,
     showNowButton = false,
+    label,
+    required,
     ...props
   }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -6298,6 +6300,10 @@ const TimePicker = forwardRef(
       (suffixIcon || allowClear) && "ina-time-picker__input--with-suffix"
     );
     return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, children: [
+      label && /* @__PURE__ */ jsxs("label", { className: "ina-time-picker__label", children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "ina-time-picker__required", children: "*" })
+      ] }),
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -9408,7 +9414,9 @@ function DatePicker({
   disabledDateAfter,
   disabled = false,
   readonly = false,
-  size = "md"
+  size = "md",
+  label,
+  required
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [currentMonth, setCurrentMonth] = useState(/* @__PURE__ */ new Date());
@@ -10073,274 +10081,290 @@ function DatePicker({
     () => generateCalendarDays(nextMonth),
     [nextMonth, generateCalendarDays]
   );
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: clsx("ina-date-picker", className), children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref: triggerRef,
-        type: "button",
-        onClick: () => {
-          if (disabled || readonly) return;
-          if (!isOpen) {
-            const allDatePickers = document.querySelectorAll(".ina-date-picker");
-            allDatePickers.forEach((picker) => {
-              if (picker !== containerRef.current) {
-                const closeEvent = new CustomEvent("closeDatePicker", {
-                  detail: { exclude: containerRef.current }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: clsx(
+        "ina-date-picker",
+        disabled && "ina-date-picker--disabled",
+        className
+      ),
+      style: { width: validatedTriggerWidth },
+      children: [
+        label && /* @__PURE__ */ jsxs("label", { className: "ina-date-picker__label", children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "ina-date-picker__required", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            onClick: () => {
+              if (disabled || readonly) return;
+              if (!isOpen) {
+                const allDatePickers = document.querySelectorAll(".ina-date-picker");
+                allDatePickers.forEach((picker) => {
+                  if (picker !== containerRef.current) {
+                    const closeEvent = new CustomEvent("closeDatePicker", {
+                      detail: { exclude: containerRef.current }
+                    });
+                    document.dispatchEvent(closeEvent);
+                  }
                 });
-                document.dispatchEvent(closeEvent);
               }
-            });
-          }
-          setIsOpen(!isOpen);
-        },
-        className: clsx(
-          "ina-date-picker__trigger",
-          `ina-date-picker__trigger--size-${size}`,
-          disabled && "ina-date-picker__trigger--disabled",
-          readonly && "ina-date-picker__trigger--readonly",
-          triggerClassname
-        ),
-        style: { width: validatedTriggerWidth },
-        disabled,
-        children: [
-          /* @__PURE__ */ jsx(IconCalendar, { size: 20, className: "ina-date-picker__trigger-icon" }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: clsx(
-                "ina-date-picker__trigger-text",
-                getDisplayText() ? "ina-date-picker__trigger-text--value" : "ina-date-picker__trigger-text--placeholder"
+              setIsOpen(!isOpen);
+            },
+            className: clsx(
+              "ina-date-picker__trigger",
+              `ina-date-picker__trigger--size-${size}`,
+              disabled && "ina-date-picker__trigger--disabled",
+              readonly && "ina-date-picker__trigger--readonly",
+              triggerClassname
+            ),
+            style: { width: validatedTriggerWidth },
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx(IconCalendar, { size: 20, className: "ina-date-picker__trigger-icon" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: clsx(
+                    "ina-date-picker__trigger-text",
+                    getDisplayText() ? "ina-date-picker__trigger-text--value" : "ina-date-picker__trigger-text--placeholder"
+                  ),
+                  children: getDisplayText() || placeholder
+                }
               ),
-              children: getDisplayText() || placeholder
-            }
-          ),
-          getDisplayText() && !disabled && !readonly && /* @__PURE__ */ jsx(
-            "div",
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                handleUnselect();
-              },
-              className: "ina-date-picker__clear-button",
-              "aria-label": "Clear selected date",
-              children: /* @__PURE__ */ jsx(IconX, { size: 16, className: "ina-date-picker__clear-icon" })
-            }
-          )
-        ]
-      }
-    ),
-    isOpen && !disabled && !readonly && /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: panelRef,
-        className: clsx(
-          "ina-date-picker__panel",
-          `ina-date-picker__panel--${popperPlacement.split("-")[0]}`,
-          useRightPositioning && !popperPlacement.includes("left") && !popperPlacement.includes("right") && "ina-date-picker__panel--right-aligned",
-          panelClassName
-        ),
-        style: {
-          ...panelMaxHeight !== void 0 && {
-            maxHeight: typeof panelMaxHeight === "string" ? panelMaxHeight : `${panelMaxHeight}px`
-          },
-          ...popperPlacement.includes("bottom") && {
-            top: "100%",
-            marginTop: "4px"
-          },
-          ...popperPlacement.includes("top") && {
-            bottom: "100%",
-            marginBottom: "4px"
-          },
-          ...popperPlacement.includes("left") && {
-            right: "100%",
-            marginRight: "4px"
-          },
-          ...popperPlacement.includes("right") && {
-            left: "100%",
-            marginLeft: "4px"
+              getDisplayText() && !disabled && !readonly && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleUnselect();
+                  },
+                  className: "ina-date-picker__clear-button",
+                  "aria-label": "Clear selected date",
+                  children: /* @__PURE__ */ jsx(IconX, { size: 16, className: "ina-date-picker__clear-icon" })
+                }
+              )
+            ]
           }
-        },
-        children: /* @__PURE__ */ jsxs(
+        ),
+        isOpen && !disabled && !readonly && /* @__PURE__ */ jsx(
           "div",
           {
+            ref: panelRef,
             className: clsx(
-              "ina-date-picker__panel-content",
-              "ina-date-picker__panel-content--responsive",
-              mode === "single" && "ina-date-picker__panel-content--single",
-              (mode === "range" || mode === "multiple") && "ina-date-picker__panel-content--dual"
+              "ina-date-picker__panel",
+              `ina-date-picker__panel--${popperPlacement.split("-")[0]}`,
+              useRightPositioning && !popperPlacement.includes("left") && !popperPlacement.includes("right") && "ina-date-picker__panel--right-aligned",
+              panelClassName
             ),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__calendar-container", children: [
-                /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__calendar-header", children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => navigateLeftMonth("prev"),
-                      className: "ina-date-picker__nav-button",
-                      children: /* @__PURE__ */ jsx(
-                        IconChevronLeft,
+            style: {
+              ...panelMaxHeight !== void 0 && {
+                maxHeight: typeof panelMaxHeight === "string" ? panelMaxHeight : `${panelMaxHeight}px`
+              },
+              ...popperPlacement.includes("bottom") && {
+                top: "100%",
+                marginTop: "4px"
+              },
+              ...popperPlacement.includes("top") && {
+                bottom: "100%",
+                marginBottom: "4px"
+              },
+              ...popperPlacement.includes("left") && {
+                right: "100%",
+                marginRight: "4px"
+              },
+              ...popperPlacement.includes("right") && {
+                left: "100%",
+                marginLeft: "4px"
+              }
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: clsx(
+                  "ina-date-picker__panel-content",
+                  "ina-date-picker__panel-content--responsive",
+                  mode === "single" && "ina-date-picker__panel-content--single",
+                  (mode === "range" || mode === "multiple") && "ina-date-picker__panel-content--dual"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__calendar-container", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__calendar-header", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
                         {
-                          size: 20,
-                          className: "ina-date-picker__nav-icon"
+                          type: "button",
+                          onClick: () => navigateLeftMonth("prev"),
+                          className: "ina-date-picker__nav-button",
+                          children: /* @__PURE__ */ jsx(
+                            IconChevronLeft,
+                            {
+                              size: 20,
+                              className: "ina-date-picker__nav-icon"
+                            }
+                          )
                         }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__header-controls", children: [
-                    /* @__PURE__ */ jsx("div", { className: "ina-date-picker__dropdown-container", children: /* @__PURE__ */ jsx(
-                      MonthPicker,
-                      {
-                        value: currentMonth.getMonth(),
-                        onChange: (month) => setMonth(month),
-                        locale: "id",
-                        disabled,
-                        readonly,
-                        size: "sm"
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx("div", { className: "ina-date-picker__dropdown-container", children: /* @__PURE__ */ jsx(
-                      YearPicker,
-                      {
-                        value: currentMonth.getFullYear(),
-                        onChange: (year) => {
-                          const yearNumber = typeof year === "string" ? parseInt(year, 10) : year;
-                          setYear(yearNumber);
-                        },
-                        minYear: 1900,
-                        maxYear: 2100,
-                        decadeSize: 20,
-                        disabled,
-                        readonly,
-                        size: "sm"
-                      }
-                    ) })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => navigateLeftMonth("next"),
-                      className: "ina-date-picker__nav-button",
-                      children: /* @__PURE__ */ jsx(
-                        IconChevronRight,
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__header-controls", children: [
+                        /* @__PURE__ */ jsx("div", { className: "ina-date-picker__dropdown-container", children: /* @__PURE__ */ jsx(
+                          MonthPicker,
+                          {
+                            value: currentMonth.getMonth(),
+                            onChange: (month) => setMonth(month),
+                            locale: "id",
+                            disabled,
+                            readonly,
+                            size: "sm"
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx("div", { className: "ina-date-picker__dropdown-container", children: /* @__PURE__ */ jsx(
+                          YearPicker,
+                          {
+                            value: currentMonth.getFullYear(),
+                            onChange: (year) => {
+                              const yearNumber = typeof year === "string" ? parseInt(year, 10) : year;
+                              setYear(yearNumber);
+                            },
+                            minYear: 1900,
+                            maxYear: 2100,
+                            decadeSize: 20,
+                            disabled,
+                            readonly,
+                            size: "sm"
+                          }
+                        ) })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "button",
                         {
-                          size: 20,
-                          className: "ina-date-picker__nav-icon"
+                          type: "button",
+                          onClick: () => navigateLeftMonth("next"),
+                          className: "ina-date-picker__nav-button",
+                          children: /* @__PURE__ */ jsx(
+                            IconChevronRight,
+                            {
+                              size: 20,
+                              className: "ina-date-picker__nav-icon"
+                            }
+                          )
                         }
                       )
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__calendar-grid", children: [
-                  dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: "ina-date-picker__day-header", children: day }, day)),
-                  currentDays.map((day) => {
-                    const styling = getDateStyling(day);
-                    return /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => !styling.isDisabled && handleDateClick(day.date),
-                        onMouseEnter: () => !styling.isDisabled && setHoveredDate(day.date),
-                        onMouseLeave: () => setHoveredDate(null),
-                        disabled: styling.isDisabled,
-                        className: styling.className + (!styling.isSelected && !styling.isInRange && !styling.isHovered && !styling.isHoveredEnd && !styling.isDisabled ? " ina-date-picker__day--hover" : ""),
-                        children: /* @__PURE__ */ jsx("span", { className: "ina-date-picker__day-number", children: day.date.getDate() })
-                      },
-                      `${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
-                    );
-                  })
-                ] })
-              ] }),
-              (mode === "range" || mode === "multiple") && /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__calendar", children: [
-                /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__next-month-header", children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => navigateRightMonth("prev"),
-                      className: "ina-date-picker__nav-button",
-                      children: /* @__PURE__ */ jsx(
-                        IconChevronLeft,
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__calendar-grid", children: [
+                      dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: "ina-date-picker__day-header", children: day }, day)),
+                      currentDays.map((day) => {
+                        const styling = getDateStyling(day);
+                        return /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => !styling.isDisabled && handleDateClick(day.date),
+                            onMouseEnter: () => !styling.isDisabled && setHoveredDate(day.date),
+                            onMouseLeave: () => setHoveredDate(null),
+                            disabled: styling.isDisabled,
+                            className: styling.className + (!styling.isSelected && !styling.isInRange && !styling.isHovered && !styling.isHoveredEnd && !styling.isDisabled ? " ina-date-picker__day--hover" : ""),
+                            children: /* @__PURE__ */ jsx("span", { className: "ina-date-picker__day-number", children: day.date.getDate() })
+                          },
+                          `${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
+                        );
+                      })
+                    ] })
+                  ] }),
+                  (mode === "range" || mode === "multiple") && /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__calendar", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__next-month-header", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
                         {
-                          size: 20,
-                          className: "ina-date-picker__nav-icon"
+                          type: "button",
+                          onClick: () => navigateRightMonth("prev"),
+                          className: "ina-date-picker__nav-button",
+                          children: /* @__PURE__ */ jsx(
+                            IconChevronLeft,
+                            {
+                              size: 20,
+                              className: "ina-date-picker__nav-icon"
+                            }
+                          )
                         }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__next-month-controls", children: [
-                    /* @__PURE__ */ jsx("div", { className: "ina-date-picker__dropdown-container", children: /* @__PURE__ */ jsx(
-                      MonthPicker,
-                      {
-                        value: nextMonth.getMonth(),
-                        onChange: (month) => setMonth(month, true),
-                        locale: "id",
-                        disabled,
-                        readonly,
-                        size: "sm"
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx("div", { className: "ina-date-picker__dropdown-container", children: /* @__PURE__ */ jsx(
-                      YearPicker,
-                      {
-                        value: nextMonth.getFullYear(),
-                        onChange: (year) => {
-                          const yearNumber = typeof year === "string" ? parseInt(year, 10) : year;
-                          setYear(yearNumber, true);
-                        },
-                        minYear: 1900,
-                        maxYear: 2100,
-                        decadeSize: 20,
-                        disabled,
-                        readonly,
-                        size: "sm"
-                      }
-                    ) })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => navigateRightMonth("next"),
-                      className: "ina-date-picker__nav-button",
-                      children: /* @__PURE__ */ jsx(
-                        IconChevronRight,
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__next-month-controls", children: [
+                        /* @__PURE__ */ jsx("div", { className: "ina-date-picker__dropdown-container", children: /* @__PURE__ */ jsx(
+                          MonthPicker,
+                          {
+                            value: nextMonth.getMonth(),
+                            onChange: (month) => setMonth(month, true),
+                            locale: "id",
+                            disabled,
+                            readonly,
+                            size: "sm"
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx("div", { className: "ina-date-picker__dropdown-container", children: /* @__PURE__ */ jsx(
+                          YearPicker,
+                          {
+                            value: nextMonth.getFullYear(),
+                            onChange: (year) => {
+                              const yearNumber = typeof year === "string" ? parseInt(year, 10) : year;
+                              setYear(yearNumber, true);
+                            },
+                            minYear: 1900,
+                            maxYear: 2100,
+                            decadeSize: 20,
+                            disabled,
+                            readonly,
+                            size: "sm"
+                          }
+                        ) })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "button",
                         {
-                          size: 20,
-                          className: "ina-date-picker__nav-icon"
+                          type: "button",
+                          onClick: () => navigateRightMonth("next"),
+                          className: "ina-date-picker__nav-button",
+                          children: /* @__PURE__ */ jsx(
+                            IconChevronRight,
+                            {
+                              size: 20,
+                              className: "ina-date-picker__nav-icon"
+                            }
+                          )
                         }
                       )
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__calendar-grid", children: [
-                  dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: "ina-date-picker__day-header", children: day }, day)),
-                  nextDays.map((day) => {
-                    const styling = getDateStyling(day);
-                    return /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => !styling.isDisabled && handleDateClick(day.date),
-                        onMouseEnter: () => !styling.isDisabled && setHoveredDate(day.date),
-                        onMouseLeave: () => setHoveredDate(null),
-                        disabled: styling.isDisabled,
-                        className: styling.className + (!styling.isSelected && !styling.isInRange && !styling.isHovered && !styling.isHoveredEnd && !styling.isDisabled ? " ina-date-picker__day--hover" : ""),
-                        children: day.date.getDate()
-                      },
-                      `right-${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
-                    );
-                  })
-                ] })
-              ] })
-            ]
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "ina-date-picker__calendar-grid", children: [
+                      dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: "ina-date-picker__day-header", children: day }, day)),
+                      nextDays.map((day) => {
+                        const styling = getDateStyling(day);
+                        return /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => !styling.isDisabled && handleDateClick(day.date),
+                            onMouseEnter: () => !styling.isDisabled && setHoveredDate(day.date),
+                            onMouseLeave: () => setHoveredDate(null),
+                            disabled: styling.isDisabled,
+                            className: styling.className + (!styling.isSelected && !styling.isInRange && !styling.isHovered && !styling.isHoveredEnd && !styling.isDisabled ? " ina-date-picker__day--hover" : ""),
+                            children: day.date.getDate()
+                          },
+                          `right-${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
+                        );
+                      })
+                    ] })
+                  ] })
+                ]
+              }
+            )
           }
         )
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 function MultipleChoiceGrid({
   columns,