@indico-data/design-system 3.6.4 → 3.7.0

package/lib/index.js

@@ -13674,7 +13674,26 @@ const DatePicker = (props) => {
         onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
     };
     const finalProps = Object.assign(Object.assign(Object.assign({}, commonProps), rest), modeProps);
-    return (jsxRuntime.jsxs("div", { className: "date-picker-wrapper", children: [hasTimePicker && (jsxRuntime.jsx("div", { className: "time-picker-wrapper", children: jsxRuntime.jsxs(Row, { align: "center", children: [jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("p", { className: "ma-0", children: "Select Time" }) }), jsxRuntime.jsx(Col, { children: jsxRuntime.jsx(TimePicker, { ref: ref, timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange, readonly: isReadOnly, tabIndex: timeTabIndex }) })] }) })), jsxRuntime.jsx(DayPicker, Object.assign({}, finalProps))] }));
+    const wrapperRef = React.useRef(null);
+    // Disable tab focus on all date picker elements
+    React.useEffect(() => {
+        const disableTabFocus = () => {
+            if (wrapperRef.current) {
+                const focusableElements = wrapperRef.current.querySelectorAll('button, input, select, textarea, a, [tabindex]:not([tabindex="-1"])');
+                focusableElements.forEach((element) => {
+                    element.tabIndex = -1;
+                });
+            }
+        };
+        // Run immediately and set up observer for dynamic elements
+        disableTabFocus();
+        const observer = new MutationObserver(disableTabFocus);
+        if (wrapperRef.current) {
+            observer.observe(wrapperRef.current, { childList: true, subtree: true });
+        }
+        return () => observer.disconnect();
+    }, []);
+    return (jsxRuntime.jsxs("div", { className: "date-picker-wrapper", tabIndex: -1, ref: wrapperRef, children: [hasTimePicker && (jsxRuntime.jsx("div", { className: "time-picker-wrapper", children: jsxRuntime.jsxs(Row, { align: "center", children: [jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("p", { className: "ma-0", children: "Select Time" }) }), jsxRuntime.jsx(Col, { children: jsxRuntime.jsx(TimePicker, { ref: ref, timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange, readonly: isReadOnly, tabIndex: timeTabIndex }) })] }) })), jsxRuntime.jsx(DayPicker, Object.assign({}, finalProps))] }));
 };
 
 const IconTriggerDatePicker = (props) => {