@economic/taco 1.34.2 → 1.35.0

package/dist/taco.cjs.development.js

@@ -3938,6 +3938,9 @@ const defaultLocalisationTexts = {
   },
   table2: {
     columns: {
+      resize: {
+        tooltip: 'Resize column'
+      },
       actions: {
         tooltip: 'Other actions'
       },
@@ -9069,6 +9072,7 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     color,
     description,
     icon,
+    className: cName,
     ...otherProps
   } = props;
   const {
@@ -9082,7 +9086,7 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     tags,
     value
   } = useSelect2Context();
-  const className = createOptionClassName(shouldPauseHoverState);
+  const className = cn(createOptionClassName(shouldPauseHoverState), cName);
   const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;
   const isTag = tags && !!color;
   const handleClick = () => {
@@ -9549,17 +9553,11 @@ const useChildren = ({
       if (isGroup(child)) {
         return child.props.children;
       }
+      // Since we are filtering out groups just above, then casting child to React.ReactElement<Select2OptionProps>, to avoid type inconsistency errors.
       return child;
     }).flatMap(c => c)) || [];
-    if (emptyValue !== undefined && !multiple) {
-      return [/*#__PURE__*/React__default.createElement(Option$1, {
-        key: "__empty",
-        children: "",
-        value: emptyValue
-      }), ...initial];
-    }
     return initial;
-  }, [initialChildren, emptyValue]);
+  }, [initialChildren]);
   // set an initial value if none is set, we have to trigger state updates for controlled components
   React__default.useEffect(() => {
     if (!multiple && emptyValue === undefined && value === undefined) {
@@ -9698,7 +9696,7 @@ const useIsHoverStatePaused = () => {
 
 const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, ref) {
   const {
-    children: initialChildren,
+    children: initChildren,
     defaultValue: defaultProp,
     disabled = false,
     emptyValue = undefined,
@@ -9715,6 +9713,24 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     value: prop,
     ...otherProps
   } = props;
+  const emptyOption = React__default.useMemo(() => {
+    if (emptyValue !== undefined && !multiple) {
+      // Empty option has 0px height, because it's empty, so need to apply height manually
+      return /*#__PURE__*/React__default.createElement(Option$1, {
+        key: "__empty",
+        children: "",
+        value: emptyValue,
+        className: "h-8"
+      });
+    }
+    return;
+  }, [emptyValue, multiple]);
+  const initialChildren = React__default.useMemo(() => {
+    if (emptyOption) {
+      return [emptyOption, ...initChildren];
+    }
+    return initChildren;
+  }, [emptyOption, initChildren]);
   // refs
   const internalRef = useMergedRef(ref);
   const listboxRef = React__default.useRef(null);
@@ -9868,7 +9884,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     setValue: setValue,
     tabIndex: -1,
     value: value
-  }, /*#__PURE__*/React__default.createElement(Collection$1, null, filteredChildren), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
+  }, searchQuery === '' ? /*#__PURE__*/React__default.createElement(Collection$1, null, initialChildren) : /*#__PURE__*/React__default.createElement(Collection$1, null, filteredChildren), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
     onCreate: onCreate,
     options: flattenedChildren
   }) : null))))));
@@ -12930,6 +12946,9 @@ const Header$1 = function Header(props) {
     className: "truncate",
     ref: textRef
   }, reactTable$1.flexRender(header.column.columnDef.header, header.getContext()));
+  const {
+    texts
+  } = useLocalization();
   return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, columnProps, {
     // base props
     column: header.column,
@@ -12966,7 +12985,7 @@ const Header$1 = function Header(props) {
     columnIndex: index
   }) : null), header.column.getCanResize() ? /*#__PURE__*/React__default.createElement(Tooltip, {
     placement: "top",
-    title: "Resize column"
+    title: texts.table2.columns.resize.tooltip
   }, /*#__PURE__*/React__default.createElement("div", {
     className: cn('invisible absolute right-0 top-0 flex h-full cursor-col-resize touch-none select-none rounded py-0.5 group-hover/header:visible', {
       '-mr-2.5 w-5 justify-center': !isLastColumn,
@@ -13775,10 +13794,11 @@ const Column$1 = /*#__PURE__*/React__default.forwardRef(function Column(props, r
   });
   const attributes = draggable ? dragAttributes : undefined;
   const text = getColumnName(column);
+  const isVisible = column.getIsVisible();
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
     key: column.id,
     className: className,
-    onClick: () => column.toggleVisibility(),
+    onClick: () => column.toggleVisibility(!isVisible),
     ref: ref
   }), draggable ? /*#__PURE__*/React__default.createElement(Icon, {
     name: "drag",
@@ -13790,8 +13810,8 @@ const Column$1 = /*#__PURE__*/React__default.forwardRef(function Column(props, r
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "flex-grow select-none"
   }, text)), canHide ? /*#__PURE__*/React__default.createElement(Checkbox, {
-    checked: column.getIsVisible(),
-    onChange: column.toggleVisibility
+    checked: isVisible,
+    onChange: () => column.toggleVisibility(!isVisible)
   }) : null);
 });
 function ColumnSettingsButton(props) {
@@ -13972,6 +13992,7 @@ function BatchActionsMenu({
 }
 
 const InternalRow = ({
+  onRowDrop,
   row,
   rowIndex,
   table,
@@ -13983,8 +14004,10 @@ const InternalRow = ({
   const meta = table.options.meta;
   const isActiveRow = meta.activeRowIndex === rowIndex;
   const isDragging = meta.dragging[row.id];
+  const [, dropTargetProps] = useDropTarget(event => onRowDrop(event, row.original));
   const attributes = {
     ...props,
+    ...(typeof onRowDrop === 'function' ? dropTargetProps : undefined),
     'aria-current': isActiveRow ? true : undefined,
     'aria-grabbed': isDragging ? true : undefined,
     'data-row-index': rowIndex,
@@ -14506,7 +14529,7 @@ function Column$3(_) {
   return null;
 }
 Column$3.displayName = 'Table2Column';
-const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref) {
+const BaseTable2 = /*#__PURE__*/React__default.forwardRef(function BaseTable2(props, ref) {
   // dom
   const {
     emptyState: EmptyState,
@@ -14514,6 +14537,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     length = props.data.length,
     loadMore,
     onRowClick,
+    onRowDrop,
     toolbarLeft,
     toolbarRight,
     _experimentalActionsForTable,
@@ -14827,6 +14851,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
       key: row.id
     }, /*#__PURE__*/React__default.createElement(Row$1, {
       className: "group/row contents",
+      onRowDrop: onRowDrop,
       row: row,
       rowIndex: virtualRow.index,
       table: table
@@ -14874,6 +14899,13 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     table: table
   }) : null);
 });
+const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref) {
+  const key = React__default.useMemo(() => String('tableKey_' + String(props.children)), [props.children]);
+  return /*#__PURE__*/React__default.createElement(BaseTable2, Object.assign({}, props, {
+    key: key,
+    ref: ref
+  }));
+});
 Table2.Column = Column$3;
 
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {