@economic/taco 2.11.2 → 2.12.0

package/dist/taco.cjs.development.js

@@ -1287,6 +1287,21 @@ function IconESignature(props, svgRef) {
 }
 var ESignature = /*#__PURE__*/React.forwardRef(IconESignature);
 
+function IconEditSimple(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16.013 4.513a1.75 1.75 0 012.35-.114l.124.114 1.586 1.585a1.75 1.75 0 01.114 2.35l-.114.125L8.061 20.586H4v-4.06L16.013 4.512zm-1.514 3.633l-8.999 9v1.94h1.938l9-9.001-1.939-1.939zm2.928-2.573a.25.25 0 00-.3-.04l-.054.04-1.513 1.512 1.939 1.939 1.514-1.511a.25.25 0 00.065-.24l-.025-.06-.04-.054-1.586-1.586z",
+    fill: "currentColor"
+  }));
+}
+var EditSimple = /*#__PURE__*/React.forwardRef(IconEditSimple);
+
 function IconEdit(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3349,6 +3364,7 @@ const icons = {
   drag: Drag,
   'e-copedia': ECopedia,
   'e-signature': ESignature,
+  'edit-simple': EditSimple,
   edit: Edit,
   'ellipsis-horizontal': EllipsisHorizontal,
   'ellipsis-vertical': EllipsisVertical,
@@ -4358,8 +4374,7 @@ const defaultLocalisationTexts = {
       },
       buttons: {
         edit: {
-          text: 'Edit',
-          tooltip: 'Edit'
+          tooltip: 'Edit table'
         }
       },
       rowIndicator: {
@@ -7943,6 +7958,29 @@ Menu$1.Header = Header;
 Menu$1.RadioGroup = RadioGroup$1;
 Menu$1.SubMenu = SubMenu;
 
+const ModeSwitch = /*#__PURE__*/React.forwardRef(function ModeSwitch(props, ref) {
+  const {
+    onChange,
+    ...otherProps
+  } = props;
+  const className = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1', {
+    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
+    'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled
+  }, props.className);
+  return /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "mode",
+    onCheckedChange: onChange,
+    ref: ref
+  }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
+    className: "'will-change-transform flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "edit-simple",
+    className: "!h-5 !w-5"
+  })));
+});
+ModeSwitch.displayName = 'ModeSwitch';
+
 const TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
   return /*#__PURE__*/React__default.createElement("a", Object.assign({}, props, {
     ref: ref
@@ -16009,7 +16047,7 @@ function Menu$3(props) {
       // we do this in the next tick, otherwise the menu closes and react throws a "state update on unmounted component" error
       const handleClick = event => setTimeout(() => handleHide(event), 1);
       menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
-        icon: "unreconciled",
+        icon: "eye-off",
         onClick: handleClick
       }, texts.table3.columns.menu.hideColumn));
     }
@@ -16656,7 +16694,7 @@ const getInputAppearanceClassnames = () => {
   return cn('[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none');
 };
 
-const useCssGrid = (table, isPrintTable = false) => {
+const useCssGrid = (table, isPrintTable = false, actionsForRowLength = 0) => {
   const allVisibleColumns = table.getVisibleLeafColumns();
   const columnSizing = table.getState().columnSizing;
   const rowsLength = table.getRowModel().rows.length;
@@ -16675,7 +16713,8 @@ const useCssGrid = (table, isPrintTable = false) => {
         size = `minmax(${PRINT_MIN_COLUMN_SIZE}px, ${maxWidth})`;
       } else if (isColumnInternal) {
         if (column.id === COLUMN_ID) {
-          size = 'minmax(max-content, auto)';
+          const minWidth = actionsForRowLength * 32 + 8 /* button margins l+r */ + 8; /* cell padding l+r */
+          size = `minmax(${minWidth}px, auto)`;
         } else {
           // getSize method is used instead of columnSizing state because columnSizing state doesn't have
           // sizes of internal columns.
@@ -16768,16 +16807,31 @@ function useCurrentRow(defaultCurrentRowIndex) {
       // do it in the next tick, otherwise it prevents internal focus from working
       // meaning you have to tab twice to get to the first focusable element
       setTimeout(() => {
-        setCurrentRowIndex(0);
-        scrollToIndex(0);
+        setCurrentRowIndex(index => {
+          if (index === undefined) {
+            scrollToIndex(0);
+            return 0;
+          }
+          return index;
+        });
       }, 1);
     }
   }, [currentRowIndex, length]);
+  const onMouseCapture = React__default.useCallback((event, length) => {
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    if (currentRowIndex === undefined && length > 0) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, [currentRowIndex, length]);
   return {
     currentRowIndex,
     setCurrentRowIndex,
     handleFocus: onFocus,
-    handleKeyDown: onKeyDown
+    handleKeyDown: onKeyDown,
+    handleMouseCapture: onMouseCapture
   };
 }
 const getNextIndex$2 = (direction, currentIndex, length) => {
@@ -20145,15 +20199,8 @@ function EditButton(props) {
     texts
   } = useLocalization();
   const tableMeta = props.table.options.meta;
-  const className = cn({
-    '!wcag-blue-100': tableMeta.editing.isEditing
-  });
-  const handleClick = () => tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);
-  return /*#__PURE__*/React__default.createElement(Button$1, {
-    "aria-pressed": tableMeta.editing.isEditing,
-    className: className,
-    onClick: handleClick,
-    tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table3.editing.buttons.edit.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table3.editing.buttons.edit.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
       className: "ml-2",
       keys: {
         key: 'e',
@@ -20161,10 +20208,11 @@ function EditButton(props) {
         shift: false
       }
     }))
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    "aria-hidden": true,
-    name: "edit"
-  }), texts.table3.editing.buttons.edit.text);
+  }, /*#__PURE__*/React__default.createElement(ModeSwitch, {
+    "aria-pressed": tableMeta.editing.isEditing,
+    checked: tableMeta.editing.isEditing,
+    onChange: tableMeta.editing.toggleEditing
+  }));
 }
 
 const PRINT_STYLES = `
@@ -21185,12 +21233,16 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   // scrollToIndex function changes when row count changes, so it is important to update handlers with new
   // scrollToIndex function.
   [scrollToIndex, tableMeta.editing.isEditing, internalRef.current]);
-  const handleBlur = event => {
+  const handleBlur = tableMeta.editing.isEnabled ? event => {
     tableMeta.editing.handleBlur(event);
-  };
-  const handleFocus = event => {
+  } : undefined;
+  const handleFocus = tableMeta.currentRow.currentRowIndex === undefined ? event => {
     tableMeta.currentRow.handleFocus(event, table.getRowModel().rows.length, scrollToIndex);
-  };
+  } : undefined;
+  // mouse capture fires before focus, so we can prevent propagation and stop double setting of the active row
+  const handleMouseCapture = tableMeta.currentRow.currentRowIndex === undefined ? event => {
+    tableMeta.currentRow.handleMouseCapture(event, table.getRowModel().rows.length);
+  } : undefined;
   const handleScroll = function (event) {
     try {
       tableMeta.columnFreezing.handleScroll(event);
@@ -21208,7 +21260,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   // if the table is a print table or not.
   const {
     style: cssGridStyle
-  } = useCssGrid(table, tableMeta.isPrinting);
+  } = useCssGrid(table, tableMeta.isPrinting, tableMeta.rowActions.actionsForRowLength);
   const {
     style: cssVars
   } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);
@@ -21242,6 +21294,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     "data-taco": "table2",
     onBlur: handleBlur,
     onFocus: handleFocus,
+    onMouseDownCapture: handleMouseCapture,
     onScroll: handleScroll,
     ref: internalRef,
     role: "table",
@@ -22268,6 +22321,7 @@ exports.Listbox = Listbox;
 exports.LocalizationContext = LocalizationContext;
 exports.LocalizationProvider = LocalizationProvider;
 exports.Menu = Menu$1;
+exports.ModeSwitch = ModeSwitch;
 exports.MultiListbox = MultiListbox;
 exports.Navigation = Navigation;
 exports.Navigation2 = Navigation2;