@vention/machine-ui 6.7.2 → 6.8.0

package/README.md

@@ -111,7 +111,10 @@ Components built on an MUI component (noted as "built on MUI `X`") accept that c
 
 ### Navigation and layout
 
-- `VentionTabs`: a row of tabs. `value` is the index of the selected tab, and `onChange(event, index)` receives the new index.
+- `VentionTabs`: a row of tabs. `value` is the index of the selected tab, and `onChange(event, index)` receives the new index. The tabs are controlled, so the app updates `tabOptions` and `value` itself.
+  - With `onRename(index, name)`, clicking the selected tab opens an input over its label. Enter or leaving the input saves, Esc cancels. The name is trimmed, and `onRename` isn't called when it's empty or unchanged.
+  - With `onRemove(index)`, each tab gets a remove button. It shows while the pointer is over the tab and while the tab has keyboard focus. Touch screens have no hover, so there it shows on the selected tab. It isn't rendered when only one tab is left. Removing doesn't change `value`, so pick the new selected tab in `onRemove`. Clicking it moves focus to that tab's label, or to the previous tab's label for the last tab, so once the parent drops the tab, focus is on the tab that took its place.
+  - With `onAdd()`, an add button follows the tabs. Append the new tab to `tabOptions` in `onAdd`.
 - `VentionSteps`: a vertical list of steps for a guided procedure. Use `size="xx-large"` on touch HMIs; `"small"` always shows dots.
 - `VentionSidebarItem`: a profile entry in a sidebar.
 - `VentionTreeItem`: one row of a tree, with nested `VentionTreeItem` children.

package/index.esm.js

@@ -10976,57 +10976,270 @@ const useStyles$m = tss.withNestedSelectors().create(({
   };
 });
 
+const ICON_BUTTON_WIDTH = 32;
+const HOVER_MEDIA_QUERY = "@media (hover: hover) and (pointer: fine)";
+const TOUCH_MEDIA_QUERY = "@media not all and (hover: hover) and (pointer: fine)";
 const VentionTabs = ({
   tabOptions,
   onChange,
+  onRename,
+  onRemove,
+  onAdd,
   value
 }) => {
+  const theme = useTheme();
   const {
     cx,
     classes
   } = useStyles$l();
-  return jsx(Box$1, {
+  const canRemove = onRemove !== undefined && tabOptions.length > 1;
+  const [editingIndex, setEditingIndex] = useState(null);
+  const [draft, setDraft] = useState("");
+  const isCancellingRef = useRef(false);
+  const refocusIndexRef = useRef(null);
+  const labelButtonsRef = useRef([]);
+  // The edit is tied to a tab position, so it closes when the parent changes the selection or the tab count.
+  useEffect(() => {
+    setEditingIndex(null);
+    refocusIndexRef.current = null;
+  }, [value, tabOptions.length]);
+  const focusInputOnMount = useCallback(input => {
+    if (input) {
+      input.focus();
+      input.select();
+    }
+  }, []);
+  const handleTabClick = (event, index) => {
+    if (onRename && index === value) {
+      setDraft(tabOptions[index]);
+      setEditingIndex(index);
+      return;
+    }
+    onChange(event, index);
+  };
+  // Enter and Esc both blur the input, so blur is the only place the edit closes.
+  const handleInputKeyDown = (event, index) => {
+    // Safari ends the composition before the Enter that confirms it, and only flags that Enter with keyCode 229.
+    if (event.nativeEvent.isComposing || event.keyCode === 229) {
+      return;
+    }
+    if (event.key === "Enter" || event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      isCancellingRef.current = event.key === "Escape";
+      refocusIndexRef.current = index;
+      event.currentTarget.blur();
+    }
+  };
+  // The label is hidden while the input is open, so it can only take focus back once it renders visible again.
+  const attachLabelButton = (labelButton, index) => {
+    labelButtonsRef.current[index] = labelButton;
+    if (labelButton && refocusIndexRef.current === index) {
+      refocusIndexRef.current = null;
+      labelButton.focus();
+    }
+  };
+  const handleInputBlur = index => {
+    const name = draft.trim();
+    if (!isCancellingRef.current && name.length > 0 && name !== tabOptions[index]) {
+      onRename === null || onRename === void 0 ? void 0 : onRename(index, name);
+    }
+    isCancellingRef.current = false;
+    setEditingIndex(null);
+  };
+  // Tabs are keyed by index, so once the parent drops this tab, the label at this index shows the tab that took its place.
+  const handleRemoveClick = index => {
+    var _a;
+    const isLastTab = index === tabOptions.length - 1;
+    (_a = labelButtonsRef.current[isLastTab ? index - 1 : index]) === null || _a === void 0 ? void 0 : _a.focus();
+    onRemove === null || onRemove === void 0 ? void 0 : onRemove(index);
+  };
+  return jsxs(Box$1, {
     className: classes.root,
-    children: tabOptions.map((buttonLabel, index) => jsx(Button, {
-      className: index === value ? cx(classes.button, classes.selectedButton) : classes.button,
-      onClick: event => onChange(event, index),
-      disableRipple: true,
-      children: jsx(Typography, {
-        variant: "heading18SemiBold",
-        children: buttonLabel
+    role: "tablist",
+    children: [tabOptions.map((tabLabel, index) => {
+      const isSelected = index === value;
+      const isEditing = index === editingIndex;
+      return jsxs("div", {
+        className: cx(classes.tab, isSelected && classes.selectedTab),
+        children: [jsx("button", {
+          ref: labelButton => attachLabelButton(labelButton, index),
+          className: cx(classes.label, isEditing && classes.hiddenLabel),
+          type: "button",
+          role: "tab",
+          "aria-selected": isSelected,
+          onClick: event => handleTabClick(event, index),
+          children: jsx(Typography, {
+            variant: "heading18SemiBold",
+            noWrap: true,
+            children: tabLabel
+          })
+        }), isEditing && jsx("input", {
+          ref: focusInputOnMount,
+          className: classes.input,
+          type: "text",
+          "aria-label": "Tab name",
+          value: draft,
+          onChange: event => setDraft(event.target.value),
+          onKeyDown: event => handleInputKeyDown(event, index),
+          onBlur: () => handleInputBlur(index)
+        }), canRemove && !isEditing && jsx("span", {
+          className: classes.removeControls,
+          children: jsx("button", {
+            className: classes.removeButton,
+            type: "button",
+            "aria-label": `Remove tab ${tabLabel}`,
+            onClick: () => handleRemoveClick(index),
+            children: jsx(VentionIcon, {
+              type: "close",
+              size: 16,
+              color: theme.palette.icon.secondary
+            })
+          })
+        })]
+      }, index);
+    }), onAdd && jsx("button", {
+      className: classes.addButton,
+      type: "button",
+      "aria-label": "Add tab",
+      onClick: () => onAdd(),
+      children: jsx(VentionIcon, {
+        type: "plus",
+        size: 16,
+        color: theme.palette.icon.secondary
       })
-    }, index))
+    })]
   });
 };
-const useStyles$l = tss.create(({
-  theme
+const useStyles$l = tss.withNestedSelectors().create(({
+  theme,
+  classes
 }) => {
+  const iconButton = {
+    flexShrink: 0,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: `${ICON_BUTTON_WIDTH}px`,
+    padding: 0,
+    border: "none",
+    backgroundColor: "transparent",
+    cursor: "pointer",
+    transition: "background-color 120ms",
+    "&:focus-visible": {
+      outline: `2px solid ${theme.palette.border.blue}`,
+      outlineOffset: "-2px"
+    }
+  };
+  const shownRemoveControls = {
+    opacity: 1,
+    pointerEvents: "auto"
+  };
   return {
     root: {
+      display: "inline-flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      gap: "1px",
+      padding: "1px",
       borderRadius: theme.spacing(1),
       borderWidth: "2px",
       borderColor: theme.palette.misc.stepper.border,
       borderStyle: "solid",
       backgroundColor: theme.palette.background.surface2
     },
-    button: {
-      color: theme.palette.text.primary,
-      borderWidth: theme.spacing(2),
+    tab: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      height: "36px",
+      minWidth: "150px",
       margin: "1px",
-      minWidth: "120px",
-      textTransform: "none",
-      "&:hover": {
-        backgroundColor: theme.palette.background.default
-      },
-      "@media (hover: none)": {
+      paddingLeft: theme.spacing(1),
+      borderRadius: "2px",
+      transition: "background-color 120ms",
+      [`&:has(:focus-visible) .${classes.removeControls}`]: shownRemoveControls,
+      [HOVER_MEDIA_QUERY]: {
+        "&:hover": {
+          backgroundColor: alpha(theme.palette.common.white, 0.6)
+        },
+        [`&:hover .${classes.removeControls}`]: shownRemoveControls
+      }
+    },
+    selectedTab: {
+      backgroundColor: theme.palette.background.default,
+      boxShadow: theme.shadows[1],
+      [HOVER_MEDIA_QUERY]: {
         "&:hover": {
-          backgroundColor: "initial"
+          backgroundColor: theme.palette.background.default
         }
+      },
+      [TOUCH_MEDIA_QUERY]: {
+        [`& .${classes.removeControls}`]: shownRemoveControls
       }
     },
-    selectedButton: {
-      background: theme.palette.background.default
-    }
+    label: {
+      flexGrow: 1,
+      minWidth: 0,
+      height: "100%",
+      padding: theme.spacing(0, 2),
+      border: "none",
+      background: "transparent",
+      color: theme.palette.text.primary,
+      cursor: "pointer",
+      textAlign: "left",
+      "&:focus-visible": {
+        outline: `2px solid ${theme.palette.border.blue}`,
+        outlineOffset: "-2px",
+        borderRadius: "2px"
+      }
+    },
+    hiddenLabel: {
+      visibility: "hidden"
+    },
+    input: Object.assign(Object.assign({}, theme.typography.heading18SemiBold), {
+      position: "absolute",
+      top: theme.spacing(1),
+      bottom: theme.spacing(1),
+      left: "6px",
+      right: theme.spacing(1),
+      padding: "0 5px",
+      border: `1px solid ${theme.palette.border.blue}`,
+      borderRadius: "3px",
+      backgroundColor: theme.palette.background.default,
+      color: theme.palette.text.primary,
+      outline: "none",
+      boxShadow: `0 0 0 3px ${alpha(theme.palette.border.blue, 0.18)}`
+    }),
+    removeControls: {
+      flexShrink: 0,
+      alignSelf: "stretch",
+      display: "inline-flex",
+      opacity: 0,
+      pointerEvents: "none",
+      transition: "opacity 120ms"
+    },
+    removeButton: Object.assign(Object.assign({}, iconButton), {
+      borderRadius: "0 2px 2px 0",
+      [HOVER_MEDIA_QUERY]: {
+        "&:hover": {
+          backgroundColor: theme.palette.background.surface3
+        }
+      },
+      "&:active": {
+        backgroundColor: theme.palette.background.surface4
+      }
+    }),
+    addButton: Object.assign(Object.assign({}, iconButton), {
+      height: "36px",
+      margin: "1px",
+      borderRadius: "2px",
+      [HOVER_MEDIA_QUERY]: {
+        "&:hover": {
+          backgroundColor: alpha(theme.palette.common.white, 0.6)
+        }
+      }
+    })
   };
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-ui",
-  "version": "6.7.2",
+  "version": "6.8.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/lib/components/vention-tabs/vention-tabs.d.ts

@@ -3,6 +3,9 @@ type VentionTabsProps = {
     tabOptions: string[];
     value: number;
     onChange: (event: React.MouseEvent<HTMLElement>, arg: number) => void;
+    onRename?: (index: number, name: string) => void;
+    onRemove?: (index: number) => void;
+    onAdd?: () => void;
 };
-export declare const VentionTabs: ({ tabOptions, onChange, value }: VentionTabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VentionTabs: ({ tabOptions, onChange, onRename, onRemove, onAdd, value }: VentionTabsProps) => import("react/jsx-runtime").JSX.Element;
 export {};