@economic/taco 2.45.0-alpha.19 → 2.45.0-alpha.20

package/dist/taco.cjs.development.js

@@ -3989,7 +3989,7 @@ const Action = /*#__PURE__*/React.forwardRef(function AlertDialogAction(props, r
 });
 
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
-  const className = cn('fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute', props.className);
+  const className = cn('fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute z-10', props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
     "data-taco": "backdrop",
@@ -4487,13 +4487,13 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
     side: placement,
     sideOffset: 3
   }), /*#__PURE__*/React.createElement("div", {
-    className: "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm bg-blue-900 px-2 py-1 text-xs font-bold text-white print:hidden",
+    className: "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-blue-900 px-2 py-1 text-xs text-white print:hidden",
     "data-taco": "tooltip",
     style: {
       transformOrigin: 'var(--radix-tooltip-content-transform-origin)'
     }
   }, /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, {
-    className: "-mt-px fill-blue-900/90 stroke-blue-900/90"
+    className: "-mt-px fill-blue-900 stroke-blue-900"
   }), title))));
 });
 
@@ -5210,7 +5210,7 @@ const Content$2 = /*#__PURE__*/React.forwardRef(function CardContent(externalPro
     ...props
   } = externalProps;
   const className = cn('flex-grow overflow-auto', {
-    'mx-4 mb-4': !noPadding
+    'px-4 pb-4': !noPadding
   }, props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
@@ -5232,7 +5232,7 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
     "data-taco": "card",
     ref: ref
   }), /*#__PURE__*/React.createElement("div", {
-    className: "mx-4 mb-2 mt-4 flex justify-between"
+    className: "flex justify-between px-4 pb-2 pt-4"
   }, title && (/*#__PURE__*/React.createElement(Truncate, {
     tooltip: title
   }, /*#__PURE__*/React.createElement("h4", {
@@ -5301,8 +5301,9 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
     ...otherProps
   } = props;
   const id = useId(props.id);
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
-    'self-start': !!label
+  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
+    'self-start': !!label,
+    'mt-[0.1rem]': !label
   }, invalid ? {
     'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700': !props.disabled,
     'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled
@@ -6063,15 +6064,11 @@ const useCombobox = ({
     }
   }, [open]);
   const handleChange = nextValue => {
-    const event = createCustomEvent('change');
+    //const event = createCustomEvent('change');
     if (onChange && nextValue !== String(value)) {
       const item = findByValue(flattenedData, nextValue);
-      event.detail = sanitizeItem(item);
-      const parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
-      if (parents !== null && parents.length > 0) {
-        event.detail.parents = parents;
-      }
-      onChange(event);
+      const sanitizedItem = sanitizeItem(item);
+      onChange(sanitizedItem === null || sanitizedItem === void 0 ? void 0 : sanitizedItem.value);
     }
   };
   // event handlers
@@ -6405,6 +6402,12 @@ const useDatepicker = ({
       setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
     }
   }, [value]);
+  const isDisabledDay = React.useMemo(() => {
+    if (originalValueAsDate && calendar !== null && calendar !== void 0 && calendar.disabledDays) {
+      return reactDayPicker.isMatch(originalValueAsDate, calendar === null || calendar === void 0 ? void 0 : calendar.disabledDays); // can happen if you type a disabled date in input.
+    }
+    return false;
+  }, [originalValueAsDate]);
   // event handlers
   const handleInputBlur = event => {
     event.persist();
@@ -6442,6 +6445,7 @@ const useDatepicker = ({
   const inputProps = {
     ...props,
     autoComplete: 'off',
+    invalid: props.invalid || isDisabledDay,
     onBlur: handleInputBlur,
     onChange: handleInputChange,
     onKeyDown: handleKeyDown,
@@ -6807,8 +6811,10 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   const {
     texts
   } = useLocalization();
-  const className = cn('relative bg-white animate-[fade-in_150ms] rounded', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-full print:m-0 print:overflow-visible');
-  const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0', 'print:overflow-visible print:h-full print:!transform-none print:!fixed print:!inset-0 print:!m-0', {
+  const className = cn('relative bg-white animate-[fade-in_150ms] rounded print:!static', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-max print:m-0 print:overflow-visible');
+  const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0',
+  // The `!fixed` property is crucial to ensure that when a draggable dialog is moved, the printed document still displays its content across the full page.
+  'print:overflow-visible print:h-max print:!transform-none print:!inset-0 print:!m-0', {
     'rounded-b-none': !!dialog.elements.extra
   }, props.className);
   const handleEscapeKeyDown = event => {
@@ -7567,7 +7573,8 @@ const Title$3 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
 });
 const Content$6 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
   const {
-    placement: side
+    placement: side,
+    hideWhenDetached = false
   } = props;
   const context = React.useContext(HangerContext);
   const {
@@ -7583,7 +7590,8 @@ const Content$6 = /*#__PURE__*/React.forwardRef(function HangerContent(props, re
     onInteractOutside: handleInteractOutside,
     side: side,
     sideOffset: 1,
-    ref: ref
+    ref: ref,
+    hideWhenDetached: hideWhenDetached
   }, props.children, /*#__PURE__*/React.createElement(UnstyledArrow, {
     className: "text-blue-500"
   }), /*#__PURE__*/React.createElement(PopoverPrimitive.Close, {
@@ -9496,16 +9504,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref)
 });
 const Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
   const {
-    editable,
     ...otherProps
   } = props;
-  if (editable) {
-    return /*#__PURE__*/React.createElement(Combobox, Object.assign({}, otherProps, {
-      dialog: undefined,
-      inline: true,
-      ref: ref
-    }));
-  }
   return /*#__PURE__*/React.createElement(BaseSelect, Object.assign({}, otherProps, {
     ref: ref
   }));
@@ -12056,7 +12056,7 @@ function useTableStyleGrid(tableId, table, fontSize) {
     // we have to be specific so that nested tables don't inherit the same css
     const hiddenColumns = printHiddenColumns.map(id => `table[data-taco^='table']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco^='table']#${tableId} > tbody > tr > td[data-cell-id='${id}']\n`).join(',');
     const stylesheet = `@media print { table[data-taco^='table']#${tableId} { grid-template-columns: repeat(${printGridTemplateColumns}, auto) !important; }
-        table[data-taco^='table']#${tableId} [data-cell-id^='__']${hiddenColumns ? `, ${hiddenColumns}` : ''} { display: none; }}`;
+        table[data-taco^='table']#${tableId} [data-cell-id^='__']${hiddenColumns ? `, ${hiddenColumns}` : ''} { display: none; } table[data-taco^='table']#${tableId} tr { page-break-inside: avoid; break-inside: avoid;}}`;
     return {
       style,
       stylesheet
@@ -20063,7 +20063,6 @@ function DiscardChangesConfirmationDialog(props) {
   }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
     tabIndex: 0
   }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
-    autoFocus: true,
     tabIndex: 0,
     appearance: "primary",
     onClick: handleDiscard
@@ -20481,7 +20480,7 @@ function CreateNewRow(props) {
       keys: shortcut
     });
   }
-  const className = cn('group/row border-grey-300 !sticky z-[21] print:hidden', {
+  const className = cn('group/row border-grey-300 !sticky z-[21]', {
     'bottom-10': tableMeta.footer.isEnabled,
     'bottom-0': !tableMeta.footer.isEnabled,
     'border-b': !isScrolled
@@ -22483,7 +22482,8 @@ function useTableDataLoader2(fetchPage, fetchAll, options = {
             length.current = response.length;
             const pages = [];
             const cache = {};
-            Array.from(Array(response.length / pageSize).keys()).forEach(index => {
+            const pageCount = Math.ceil(response.length / pageSize);
+            Array.from(Array(pageCount).keys()).forEach(index => {
               pages.push(index);
               const startIndex = index * pageSize;
               cache[index] = response.data.slice(startIndex, startIndex + pageSize);