@idds/react 1.3.2 → 1.4.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { createContext, useRef, useState, useCallback, useMemo, useContext, useEffect, forwardRef, createElement, Fragment as Fragment$1, useId, useImperativeHandle } from "react";
+import React, { createContext, useRef, useState, useCallback, useMemo, useContext, useId, useEffect, forwardRef, createElement, Fragment as Fragment$1, useImperativeHandle } from "react";
 import { createPortal } from "react-dom";
 const iddsColorTokens = {
   // Neutral Colors
@@ -645,9 +645,8 @@ function Accordion(props) {
   } = props;
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const accordionGroup = useAccordionGroup();
-  const itemIdRef = useRef(
-    `accordion-${Math.random().toString(36).substr(2, 9)}`
-  );
+  const generatedId = useId().replace(/:/g, "-");
+  const itemIdRef = useRef(`accordion-${generatedId}`);
   const [itemIndex, setItemIndex] = useState(-1);
   const defaultOpenRef = useRef(defaultOpen);
   defaultOpenRef.current = defaultOpen;
@@ -1679,6 +1678,7 @@ function Checkbox({
   const checkboxClasses = clsx(
     "ina-checkbox",
     { "ina-checkbox--disabled": disabled },
+    { "ina-checkbox--with-subtext": subtext },
     className
   );
   return /* @__PURE__ */ jsxs("label", { htmlFor: id, className: checkboxClasses, children: [
@@ -2095,6 +2095,7 @@ function TextField({
         "input",
         {
           ...rest,
+          id: (rest == null ? void 0 : rest.id) || (rest == null ? void 0 : rest.name) ? String((rest == null ? void 0 : rest.id) || (rest == null ? void 0 : rest.name)) : String(label).toLowerCase(),
           type: rest.type ?? "text",
           className: clsx("ina-text-field__input", className),
           value: inner,
@@ -3293,10 +3294,18 @@ function FieldInputTable({
   const containerClasses = clsx("ina-field-input-table", className);
   return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
     /* @__PURE__ */ jsxs("div", { className: "ina-field-input-table__wrapper", children: [
-      /* @__PURE__ */ jsx("label", { className: "ina-field-input-table__label", children: placeholder }),
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "ina-field-input-table__label",
+          htmlFor: "field-input-table-input",
+          children: placeholder
+        }
+      ),
       /* @__PURE__ */ jsx(
         "input",
         {
+          id: "field-input-table-input",
           type: "text",
           className: "ina-field-input-table__input",
           value,
@@ -4519,7 +4528,8 @@ function Drawer({
   if (!isOpen || !mounted) return null;
   const containerClasses = clsx(
     "ina-drawer",
-    `ina-drawer--position-${position}`
+    `ina-drawer--position-${position}`,
+    className
   );
   const panelClasses = clsx(
     "ina-drawer__panel",
@@ -4578,7 +4588,7 @@ function Drawer({
           "div",
           {
             onClick: (e) => e.stopPropagation(),
-            className: clsx(panelClasses, className),
+            className: panelClasses,
             style: panelStyle,
             children: [
               position !== "top" && /* @__PURE__ */ jsxs("div", { className: headerClasses, children: [
@@ -5167,13 +5177,21 @@ function TextArea({
   );
   const bottomText = status !== "neutral" && statusMessage != null ? statusMessage : helperText;
   return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
-    label && /* @__PURE__ */ jsx("label", { className: "ina-text-area__label", children: label }),
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: "ina-text-area__label",
+        htmlFor: (rest == null ? void 0 : rest.id) || (rest == null ? void 0 : rest.name) ? String((rest == null ? void 0 : rest.id) || (rest == null ? void 0 : rest.name)) : String(label).toLowerCase(),
+        children: label
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
       prefixIcon && /* @__PURE__ */ jsx("div", { className: "ina-text-area__prefix-icon", children: prefixIcon }),
       /* @__PURE__ */ jsx(
         "textarea",
         {
           ...rest,
+          id: (rest == null ? void 0 : rest.id) || (rest == null ? void 0 : rest.name) ? String((rest == null ? void 0 : rest.id) || (rest == null ? void 0 : rest.name)) : String(label).toLowerCase(),
           ref: taRef,
           rows,
           className: "ina-text-area__input",
@@ -8127,52 +8145,42 @@ function YearPicker({
   useEffect(() => {
     if (isOpen && triggerRef.current) {
       const calculatePosition = () => {
+        var _a;
         if (!triggerRef.current || !panelRef.current) return;
         const triggerRect = triggerRef.current.getBoundingClientRect();
         const panelRect = panelRef.current.getBoundingClientRect();
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
-        const defaultPanelWidth = 320;
+        const isMobile = viewportWidth <= 640;
+        const defaultPanelWidth = isMobile ? 200 : 320;
         const panelWidthValue = panelRect.width || defaultPanelWidth;
         const availableSpaceRight = viewportWidth - triggerRect.right;
-        const isMobile = viewportWidth <= 640;
         let left = void 0;
         let right = void 0;
         let shouldUseRight = false;
         if (isMobile) {
-          const threshold = 16;
-          const triggerCenter = triggerRect.left + triggerRect.width / 2;
-          const viewportCenter = viewportWidth / 2;
-          if (triggerRect.right > viewportWidth - threshold) {
-            shouldUseRight = true;
-            right = viewportWidth - triggerRect.right;
-            left = void 0;
-          } else if (triggerRect.left < threshold) {
-            shouldUseRight = false;
-            left = triggerRect.left;
-            right = void 0;
-          } else if (Math.abs(triggerCenter - viewportCenter) < panelWidthValue / 2) {
-            const panelLeft = triggerRect.left - (panelWidthValue - triggerRect.width) / 2;
-            if (panelLeft < 0) {
-              left = 0;
-              right = void 0;
-            } else if (panelLeft + panelWidthValue > viewportWidth) {
-              right = 0;
-              left = void 0;
-            } else {
-              left = panelLeft;
-              right = void 0;
+          const panelCenterX = viewportWidth / 2;
+          const panelLeftFromViewport = panelCenterX - panelWidthValue / 2;
+          const containerRect = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
+          if (containerRect) {
+            let calculatedLeft = panelLeftFromViewport - containerRect.left;
+            if (calculatedLeft < 0) {
+              calculatedLeft = 0;
+            }
+            const panelRightInViewport = containerRect.left + calculatedLeft + panelWidthValue;
+            if (panelRightInViewport > viewportWidth) {
+              calculatedLeft = viewportWidth - panelWidthValue - containerRect.left;
+              if (calculatedLeft < 0) {
+                calculatedLeft = 0;
+              }
             }
+            left = calculatedLeft;
+            right = void 0;
             shouldUseRight = false;
           } else {
-            shouldUseRight = panelWidthValue > availableSpaceRight;
-            if (shouldUseRight) {
-              right = viewportWidth - triggerRect.right;
-              left = void 0;
-            } else {
-              left = triggerRect.left;
-              right = void 0;
-            }
+            left = Math.max(0, panelLeftFromViewport);
+            right = void 0;
+            shouldUseRight = false;
           }
         } else {
           shouldUseRight = panelWidthValue > availableSpaceRight;
@@ -8482,6 +8490,7 @@ function MonthPicker({
   useEffect(() => {
     if (isOpen && triggerRef.current) {
       const calculatePosition = () => {
+        var _a;
         if (!triggerRef.current || !panelRef.current) return;
         const triggerRect = triggerRef.current.getBoundingClientRect();
         const panelRect = panelRef.current.getBoundingClientRect();
@@ -8495,39 +8504,28 @@ function MonthPicker({
         let right = void 0;
         let shouldUseRight = false;
         if (isMobile) {
-          const threshold = 16;
-          const triggerCenter = triggerRect.left + triggerRect.width / 2;
-          const viewportCenter = viewportWidth / 2;
-          if (triggerRect.right > viewportWidth - threshold) {
-            shouldUseRight = true;
-            right = viewportWidth - triggerRect.right;
-            left = void 0;
-          } else if (triggerRect.left < threshold) {
-            shouldUseRight = false;
-            left = triggerRect.left;
-            right = void 0;
-          } else if (Math.abs(triggerCenter - viewportCenter) < panelWidthValue / 2) {
-            const panelLeft = triggerRect.left - (panelWidthValue - triggerRect.width) / 2;
-            if (panelLeft < 0) {
-              left = 0;
-              right = void 0;
-            } else if (panelLeft + panelWidthValue > viewportWidth) {
-              right = 0;
-              left = void 0;
-            } else {
-              left = panelLeft;
-              right = void 0;
+          const panelCenterX = viewportWidth / 2;
+          const panelLeftFromViewport = panelCenterX - panelWidthValue / 2;
+          const containerRect = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
+          if (containerRect) {
+            let calculatedLeft = panelLeftFromViewport - containerRect.left;
+            if (calculatedLeft < 0) {
+              calculatedLeft = 0;
+            }
+            const panelRightInViewport = containerRect.left + calculatedLeft + panelWidthValue;
+            if (panelRightInViewport > viewportWidth) {
+              calculatedLeft = viewportWidth - panelWidthValue - containerRect.left;
+              if (calculatedLeft < 0) {
+                calculatedLeft = 0;
+              }
             }
+            left = calculatedLeft;
+            right = void 0;
             shouldUseRight = false;
           } else {
-            shouldUseRight = panelWidthValue > availableSpaceRight;
-            if (shouldUseRight) {
-              right = viewportWidth - triggerRect.right;
-              left = void 0;
-            } else {
-              left = triggerRect.left;
-              right = void 0;
-            }
+            left = Math.max(0, panelLeftFromViewport);
+            right = void 0;
+            shouldUseRight = false;
           }
         } else {
           shouldUseRight = panelWidthValue > availableSpaceRight;
@@ -8792,7 +8790,7 @@ function DatePicker({
   popperPlacement = "bottom-start",
   dateFormat = "dd/MM/yyyy",
   className = "",
-  triggerWidth = "100%",
+  triggerWidth = "",
   panelMaxHeight,
   panelClassName = "",
   triggerClassname = "",
@@ -9792,22 +9790,30 @@ function MultipleChoiceGrid({
         "div",
         {
           className: "ina-multiple-choice-grid__cell",
-          children: /* @__PURE__ */ jsxs("label", { className: "ina-multiple-choice-grid__radio-label", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "radio",
-                name: `${name}-${row.id}`,
-                value: column.id,
-                checked: isSelected(row.id, column.id),
-                onChange: handleRadioChange,
-                disabled,
-                className: "ina-multiple-choice-grid__radio-input",
-                "aria-label": `${row.label} ${column.label}`
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "ina-multiple-choice-grid__radio-custom" })
-          ] })
+          children: /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "ina-multiple-choice-grid__radio-label",
+              htmlFor: `${name}-${row.id}-${column.id}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    id: `${name}-${row.id}-${column.id}`,
+                    type: "radio",
+                    name: `${name}-${row.id}`,
+                    value: column.id,
+                    checked: isSelected(row.id, column.id),
+                    onChange: handleRadioChange,
+                    disabled,
+                    className: "ina-multiple-choice-grid__radio-input",
+                    "aria-label": `${row.label} ${column.label}`
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "ina-multiple-choice-grid__radio-custom" })
+              ]
+            }
+          )
         },
         `${row.id}-${column.id}`
       ))