@usefragments/ui 1.0.2 → 1.2.0

package/dist/data-table.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { createElement } from "react";
 import styles from "./components/DataTable/DataTable.module.scss.js";
 import { Checkbox } from "./components/Checkbox/index.js";
 import { SortAscIcon, SortDescIcon, SortIcon, ExpandIcon } from "./components/DataTable/DataTable.icons.js";
@@ -23,7 +24,9 @@ function isInteractiveTarget(target, currentTarget) {
   const interactiveElement = target.closest(
     'button, a, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="switch"]'
   );
-  return Boolean(interactiveElement && currentTarget.contains(interactiveElement));
+  return Boolean(
+    interactiveElement && interactiveElement !== currentTarget && currentTarget.contains(interactiveElement)
+  );
 }
 function DataTableRoot({
   columns: userColumns,
@@ -37,6 +40,7 @@ function DataTableRoot({
   rowSelection: controlledRowSelection,
   onRowSelectionChange,
   onRowClick,
+  getRowProps,
   getSubRows,
   expanded: controlledExpanded,
   onExpandedChange,
@@ -204,12 +208,24 @@ function DataTableRoot({
           const isSelected = selectable ? row.getIsSelected() : false;
           const depth = row.depth ?? 0;
           const canExpand = hasSubRows && row.getCanExpand();
+          const resolvedRowProps = (getRowProps == null ? void 0 : getRowProps(row.original)) ?? {};
+          const {
+            className: rowClassName,
+            onClick: rowOnClick,
+            onKeyDown: rowOnKeyDown,
+            tabIndex: rowTabIndex,
+            ...rowHtmlProps
+          } = resolvedRowProps;
           const handleRowClick = (event) => {
+            rowOnClick == null ? void 0 : rowOnClick(event);
+            if (event.defaultPrevented) return;
             if (!onRowClick) return;
             if (isInteractiveTarget(event.target, event.currentTarget)) return;
             onRowClick(row.original, event);
           };
           const handleRowKeyDown = (event) => {
+            rowOnKeyDown == null ? void 0 : rowOnKeyDown(event);
+            if (event.defaultPrevented) return;
             if (!onRowClick) return;
             if (isInteractiveTarget(event.target, event.currentTarget)) return;
             if (event.key === "Enter" || event.key === " ") {
@@ -217,55 +233,57 @@ function DataTableRoot({
               onRowClick(row.original, event);
             }
           };
-          return /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ createElement(
             "tr",
             {
+              ...rowHtmlProps,
+              key: row.id,
               className: [
                 styles.row,
                 isClickable && styles.clickable,
                 isSelected && styles.selected,
-                depth > 0 && styles.subRow
+                depth > 0 && styles.subRow,
+                rowClassName
               ].filter(Boolean).join(" "),
-              onClick: isClickable ? handleRowClick : void 0,
-              onKeyDown: isClickable ? handleRowKeyDown : void 0,
-              tabIndex: isClickable ? 0 : void 0,
+              onClick: isClickable || rowOnClick ? handleRowClick : void 0,
+              onKeyDown: isClickable || rowOnKeyDown ? handleRowKeyDown : void 0,
+              tabIndex: rowTabIndex ?? (isClickable ? 0 : void 0),
               "data-selected": isSelected || void 0,
-              "data-depth": depth > 0 ? depth : void 0,
-              children: row.getVisibleCells().map((cell, cellIndex) => {
-                const isFirstDataCell = hasSubRows && cellIndex === (showCheckbox && selectable ? 1 : 0);
-                const colDef = cell.column.columnDef;
-                const truncate = !!colDef.truncate;
-                const rawValue = truncate ? cell.getValue() : void 0;
-                return /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    className: [styles.td, truncate && styles.truncate].filter(Boolean).join(" "),
-                    "data-align": colDef.align,
-                    title: typeof rawValue === "string" ? rawValue : void 0,
-                    style: {
-                      ...getColumnSizeStyle(cell.column),
-                      ...isFirstDataCell && depth > 0 ? { paddingLeft: `${depth * 24 + 12}px` } : void 0
-                    },
-                    children: isFirstDataCell && canExpand ? /* @__PURE__ */ jsxs("span", { className: styles.expandCell, children: [
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          type: "button",
-                          className: styles.expandButton,
-                          onClick: row.getToggleExpandedHandler(),
-                          "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
-                          "aria-expanded": row.getIsExpanded(),
-                          children: /* @__PURE__ */ jsx(ExpandIcon, { expanded: row.getIsExpanded() })
-                        }
-                      ),
-                      flexRender(cell.column.columnDef.cell, cell.getContext())
-                    ] }) : flexRender(cell.column.columnDef.cell, cell.getContext())
-                  },
-                  cell.id
-                );
-              })
+              "data-depth": depth > 0 ? depth : void 0
             },
-            row.id
+            row.getVisibleCells().map((cell, cellIndex) => {
+              const isFirstDataCell = hasSubRows && cellIndex === (showCheckbox && selectable ? 1 : 0);
+              const colDef = cell.column.columnDef;
+              const truncate = !!colDef.truncate;
+              const rawValue = truncate ? cell.getValue() : void 0;
+              return /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: [styles.td, truncate && styles.truncate].filter(Boolean).join(" "),
+                  "data-align": colDef.align,
+                  title: typeof rawValue === "string" ? rawValue : void 0,
+                  style: {
+                    ...getColumnSizeStyle(cell.column),
+                    ...isFirstDataCell && depth > 0 ? { paddingLeft: `${depth * 24 + 12}px` } : void 0
+                  },
+                  children: isFirstDataCell && canExpand ? /* @__PURE__ */ jsxs("span", { className: styles.expandCell, children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: styles.expandButton,
+                        onClick: row.getToggleExpandedHandler(),
+                        "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+                        "aria-expanded": row.getIsExpanded(),
+                        children: /* @__PURE__ */ jsx(ExpandIcon, { expanded: row.getIsExpanded() })
+                      }
+                    ),
+                    flexRender(cell.column.columnDef.cell, cell.getContext())
+                  ] }) : flexRender(cell.column.columnDef.cell, cell.getContext())
+                },
+                cell.id
+              );
+            })
           );
         }) })
       ]

package/dist/datepicker.cjs

@@ -3,6 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const popover = require("@base-ui/react/popover");
+const reactDayPicker = require("react-day-picker");
+const dateFns = require("date-fns");
 const aria = require("./utils/aria.cjs");
 const index = require("./components/ComponentDefaults/index.cjs");
 const DatePicker_module = require("./components/DatePicker/DatePicker.module.scss.cjs");
@@ -23,31 +25,6 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-let _DayPicker = null;
-let _dpUI = null;
-let _SelectionState = null;
-let _DayFlag = null;
-let _formatDate = null;
-let _dpLoaded = false;
-let _dpFailed = false;
-function loadDatePickerDeps() {
-  if (_dpLoaded) return;
-  _dpLoaded = true;
-  try {
-    const rdp = require("react-day-picker");
-    _DayPicker = rdp.DayPicker;
-    _dpUI = rdp.UI;
-    _SelectionState = rdp.SelectionState;
-    _DayFlag = rdp.DayFlag;
-  } catch {
-    _dpFailed = true;
-  }
-  try {
-    _formatDate = require("date-fns").format;
-  } catch {
-    _dpFailed = true;
-  }
-}
 function CalendarIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -116,17 +93,12 @@ function useDatePickerContext() {
   return context;
 }
 function defaultFormatDate(date) {
-  if (_formatDate) return _formatDate(date, "PPP");
-  return date.toLocaleDateString();
+  return dateFns.format(date, "PPP");
 }
 function defaultFormatRange(range) {
   if (!range.from) return "";
-  if (_formatDate) {
-    if (!range.to) return _formatDate(range.from, "LLL dd, y");
-    return `${_formatDate(range.from, "LLL dd, y")} - ${_formatDate(range.to, "LLL dd, y")}`;
-  }
-  if (!range.to) return range.from.toLocaleDateString();
-  return `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`;
+  if (!range.to) return dateFns.format(range.from, "LLL dd, y");
+  return `${dateFns.format(range.from, "LLL dd, y")} - ${dateFns.format(range.to, "LLL dd, y")}`;
 }
 function formatDateForHiddenInput(date) {
   if (!date) return "";
@@ -136,32 +108,31 @@ function formatDateForHiddenInput(date) {
   return `${year}-${month}-${day}`;
 }
 function getCalendarClassNames() {
-  if (!_dpUI || !_SelectionState || !_DayFlag) return {};
   return {
-    [_dpUI.Root]: DatePicker_module.default.calendar,
-    [_dpUI.Months]: DatePicker_module.default.months,
-    [_dpUI.Month]: DatePicker_module.default.month,
-    [_dpUI.MonthCaption]: DatePicker_module.default.monthCaption,
-    [_dpUI.CaptionLabel]: DatePicker_module.default.captionLabel,
-    [_dpUI.Nav]: DatePicker_module.default.nav,
-    [_dpUI.PreviousMonthButton]: DatePicker_module.default.navButton,
-    [_dpUI.NextMonthButton]: DatePicker_module.default.navButton,
-    [_dpUI.MonthGrid]: DatePicker_module.default.monthGrid,
-    [_dpUI.Weekdays]: DatePicker_module.default.weekdays,
-    [_dpUI.Weekday]: DatePicker_module.default.weekday,
-    [_dpUI.Weeks]: DatePicker_module.default.weeks,
-    [_dpUI.Week]: DatePicker_module.default.week,
-    [_dpUI.Day]: DatePicker_module.default.day,
-    [_dpUI.DayButton]: DatePicker_module.default.dayButton,
-    [_dpUI.Chevron]: DatePicker_module.default.chevron,
-    [_SelectionState.selected]: DatePicker_module.default.selected,
-    [_SelectionState.range_start]: DatePicker_module.default.rangeStart,
-    [_SelectionState.range_middle]: DatePicker_module.default.rangeMiddle,
-    [_SelectionState.range_end]: DatePicker_module.default.rangeEnd,
-    [_DayFlag.today]: DatePicker_module.default.today,
-    [_DayFlag.outside]: DatePicker_module.default.outside,
-    [_DayFlag.disabled]: DatePicker_module.default.disabled,
-    [_DayFlag.focused]: DatePicker_module.default.focused
+    [reactDayPicker.UI.Root]: DatePicker_module.default.calendar,
+    [reactDayPicker.UI.Months]: DatePicker_module.default.months,
+    [reactDayPicker.UI.Month]: DatePicker_module.default.month,
+    [reactDayPicker.UI.MonthCaption]: DatePicker_module.default.monthCaption,
+    [reactDayPicker.UI.CaptionLabel]: DatePicker_module.default.captionLabel,
+    [reactDayPicker.UI.Nav]: DatePicker_module.default.nav,
+    [reactDayPicker.UI.PreviousMonthButton]: DatePicker_module.default.navButton,
+    [reactDayPicker.UI.NextMonthButton]: DatePicker_module.default.navButton,
+    [reactDayPicker.UI.MonthGrid]: DatePicker_module.default.monthGrid,
+    [reactDayPicker.UI.Weekdays]: DatePicker_module.default.weekdays,
+    [reactDayPicker.UI.Weekday]: DatePicker_module.default.weekday,
+    [reactDayPicker.UI.Weeks]: DatePicker_module.default.weeks,
+    [reactDayPicker.UI.Week]: DatePicker_module.default.week,
+    [reactDayPicker.UI.Day]: DatePicker_module.default.day,
+    [reactDayPicker.UI.DayButton]: DatePicker_module.default.dayButton,
+    [reactDayPicker.UI.Chevron]: DatePicker_module.default.chevron,
+    [reactDayPicker.SelectionState.selected]: DatePicker_module.default.selected,
+    [reactDayPicker.SelectionState.range_start]: DatePicker_module.default.rangeStart,
+    [reactDayPicker.SelectionState.range_middle]: DatePicker_module.default.rangeMiddle,
+    [reactDayPicker.SelectionState.range_end]: DatePicker_module.default.rangeEnd,
+    [reactDayPicker.DayFlag.today]: DatePicker_module.default.today,
+    [reactDayPicker.DayFlag.outside]: DatePicker_module.default.outside,
+    [reactDayPicker.DayFlag.disabled]: DatePicker_module.default.disabled,
+    [reactDayPicker.DayFlag.focused]: DatePicker_module.default.focused
   };
 }
 const DatePickerRoot = React__namespace.forwardRef(function DatePickerRoot2({
@@ -190,7 +161,6 @@ const DatePickerRoot = React__namespace.forwardRef(function DatePickerRoot2({
   name
 }, ref) {
   const size = index.useResolvedControlSize(sizeProp);
-  loadDatePickerDeps();
   const [internalSelected, setInternalSelected] = React__namespace.useState(selectedProp ?? null);
   const [internalRange, setInternalRange] = React__namespace.useState(
     selectedRangeProp ?? null
@@ -361,7 +331,6 @@ function DatePickerCalendar({
   numberOfMonths: numberOfMonthsProp,
   className
 }) {
-  loadDatePickerDeps();
   const ctx = useDatePickerContext();
   const monthCount = numberOfMonthsProp ?? ctx.numberOfMonths;
   const components = React__namespace.useMemo(
@@ -370,21 +339,12 @@ function DatePickerCalendar({
     }),
     []
   );
-  if (_dpFailed || !_DayPicker) {
-    if (_dpFailed && process.env.NODE_ENV === "development") {
-      console.warn(
-        "[@usefragments/ui] DatePicker: react-day-picker and date-fns are not installed. Install them with: npm install react-day-picker date-fns"
-      );
-    }
-    return null;
-  }
   const calendarClassNames = getCalendarClassNames();
-  const calendarClasses = className ? { ...calendarClassNames, [_dpUI.Root]: [DatePicker_module.default.calendar, className].join(" ") } : calendarClassNames;
-  const DayPickerComponent = _DayPicker;
+  const calendarClasses = className ? { ...calendarClassNames, [reactDayPicker.UI.Root]: [DatePicker_module.default.calendar, className].join(" ") } : calendarClassNames;
   if (ctx.mode === "range") {
     const rangeSelected = ctx.selectedRange ? { from: ctx.selectedRange.from ?? void 0, to: ctx.selectedRange.to ?? void 0 } : void 0;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      DayPickerComponent,
+      reactDayPicker.DayPicker,
       {
         mode: "range",
         selected: rangeSelected,
@@ -404,7 +364,7 @@ function DatePickerCalendar({
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DayPickerComponent,
+    reactDayPicker.DayPicker,
     {
       mode: "single",
       selected: ctx.selected ?? void 0,

package/dist/datepicker.js

@@ -1,34 +1,11 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { Popover } from "@base-ui/react/popover";
+import { UI, DayPicker, DayFlag, SelectionState } from "react-day-picker";
+import { format } from "date-fns";
 import { useFormFieldIds } from "./utils/aria.js";
 import { useResolvedControlSize } from "./components/ComponentDefaults/index.js";
 import styles from "./components/DatePicker/DatePicker.module.scss.js";
-let _DayPicker = null;
-let _dpUI = null;
-let _SelectionState = null;
-let _DayFlag = null;
-let _formatDate = null;
-let _dpLoaded = false;
-let _dpFailed = false;
-function loadDatePickerDeps() {
-  if (_dpLoaded) return;
-  _dpLoaded = true;
-  try {
-    const rdp = require("react-day-picker");
-    _DayPicker = rdp.DayPicker;
-    _dpUI = rdp.UI;
-    _SelectionState = rdp.SelectionState;
-    _DayFlag = rdp.DayFlag;
-  } catch {
-    _dpFailed = true;
-  }
-  try {
-    _formatDate = require("date-fns").format;
-  } catch {
-    _dpFailed = true;
-  }
-}
 function CalendarIcon() {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -97,17 +74,12 @@ function useDatePickerContext() {
   return context;
 }
 function defaultFormatDate(date) {
-  if (_formatDate) return _formatDate(date, "PPP");
-  return date.toLocaleDateString();
+  return format(date, "PPP");
 }
 function defaultFormatRange(range) {
   if (!range.from) return "";
-  if (_formatDate) {
-    if (!range.to) return _formatDate(range.from, "LLL dd, y");
-    return `${_formatDate(range.from, "LLL dd, y")} - ${_formatDate(range.to, "LLL dd, y")}`;
-  }
-  if (!range.to) return range.from.toLocaleDateString();
-  return `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`;
+  if (!range.to) return format(range.from, "LLL dd, y");
+  return `${format(range.from, "LLL dd, y")} - ${format(range.to, "LLL dd, y")}`;
 }
 function formatDateForHiddenInput(date) {
   if (!date) return "";
@@ -117,32 +89,31 @@ function formatDateForHiddenInput(date) {
   return `${year}-${month}-${day}`;
 }
 function getCalendarClassNames() {
-  if (!_dpUI || !_SelectionState || !_DayFlag) return {};
   return {
-    [_dpUI.Root]: styles.calendar,
-    [_dpUI.Months]: styles.months,
-    [_dpUI.Month]: styles.month,
-    [_dpUI.MonthCaption]: styles.monthCaption,
-    [_dpUI.CaptionLabel]: styles.captionLabel,
-    [_dpUI.Nav]: styles.nav,
-    [_dpUI.PreviousMonthButton]: styles.navButton,
-    [_dpUI.NextMonthButton]: styles.navButton,
-    [_dpUI.MonthGrid]: styles.monthGrid,
-    [_dpUI.Weekdays]: styles.weekdays,
-    [_dpUI.Weekday]: styles.weekday,
-    [_dpUI.Weeks]: styles.weeks,
-    [_dpUI.Week]: styles.week,
-    [_dpUI.Day]: styles.day,
-    [_dpUI.DayButton]: styles.dayButton,
-    [_dpUI.Chevron]: styles.chevron,
-    [_SelectionState.selected]: styles.selected,
-    [_SelectionState.range_start]: styles.rangeStart,
-    [_SelectionState.range_middle]: styles.rangeMiddle,
-    [_SelectionState.range_end]: styles.rangeEnd,
-    [_DayFlag.today]: styles.today,
-    [_DayFlag.outside]: styles.outside,
-    [_DayFlag.disabled]: styles.disabled,
-    [_DayFlag.focused]: styles.focused
+    [UI.Root]: styles.calendar,
+    [UI.Months]: styles.months,
+    [UI.Month]: styles.month,
+    [UI.MonthCaption]: styles.monthCaption,
+    [UI.CaptionLabel]: styles.captionLabel,
+    [UI.Nav]: styles.nav,
+    [UI.PreviousMonthButton]: styles.navButton,
+    [UI.NextMonthButton]: styles.navButton,
+    [UI.MonthGrid]: styles.monthGrid,
+    [UI.Weekdays]: styles.weekdays,
+    [UI.Weekday]: styles.weekday,
+    [UI.Weeks]: styles.weeks,
+    [UI.Week]: styles.week,
+    [UI.Day]: styles.day,
+    [UI.DayButton]: styles.dayButton,
+    [UI.Chevron]: styles.chevron,
+    [SelectionState.selected]: styles.selected,
+    [SelectionState.range_start]: styles.rangeStart,
+    [SelectionState.range_middle]: styles.rangeMiddle,
+    [SelectionState.range_end]: styles.rangeEnd,
+    [DayFlag.today]: styles.today,
+    [DayFlag.outside]: styles.outside,
+    [DayFlag.disabled]: styles.disabled,
+    [DayFlag.focused]: styles.focused
   };
 }
 const DatePickerRoot = React.forwardRef(function DatePickerRoot2({
@@ -171,7 +142,6 @@ const DatePickerRoot = React.forwardRef(function DatePickerRoot2({
   name
 }, ref) {
   const size = useResolvedControlSize(sizeProp);
-  loadDatePickerDeps();
   const [internalSelected, setInternalSelected] = React.useState(selectedProp ?? null);
   const [internalRange, setInternalRange] = React.useState(
     selectedRangeProp ?? null
@@ -342,7 +312,6 @@ function DatePickerCalendar({
   numberOfMonths: numberOfMonthsProp,
   className
 }) {
-  loadDatePickerDeps();
   const ctx = useDatePickerContext();
   const monthCount = numberOfMonthsProp ?? ctx.numberOfMonths;
   const components = React.useMemo(
@@ -351,21 +320,12 @@ function DatePickerCalendar({
     }),
     []
   );
-  if (_dpFailed || !_DayPicker) {
-    if (_dpFailed && process.env.NODE_ENV === "development") {
-      console.warn(
-        "[@usefragments/ui] DatePicker: react-day-picker and date-fns are not installed. Install them with: npm install react-day-picker date-fns"
-      );
-    }
-    return null;
-  }
   const calendarClassNames = getCalendarClassNames();
-  const calendarClasses = className ? { ...calendarClassNames, [_dpUI.Root]: [styles.calendar, className].join(" ") } : calendarClassNames;
-  const DayPickerComponent = _DayPicker;
+  const calendarClasses = className ? { ...calendarClassNames, [UI.Root]: [styles.calendar, className].join(" ") } : calendarClassNames;
   if (ctx.mode === "range") {
     const rangeSelected = ctx.selectedRange ? { from: ctx.selectedRange.from ?? void 0, to: ctx.selectedRange.to ?? void 0 } : void 0;
     return /* @__PURE__ */ jsx(
-      DayPickerComponent,
+      DayPicker,
       {
         mode: "range",
         selected: rangeSelected,
@@ -385,7 +345,7 @@ function DatePickerCalendar({
     );
   }
   return /* @__PURE__ */ jsx(
-    DayPickerComponent,
+    DayPicker,
     {
       mode: "single",
       selected: ctx.selected ?? void 0,