@vention/machine-ui 6.9.0 → 6.10.0

package/README.md

@@ -115,6 +115,7 @@ Components built on an MUI component (noted as "built on MUI `X`") accept that c
   - 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`.
+  - `size` is `"medium"` (default) or `"small"`, which shows 16px names on tabs at least 100px wide.
 - `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

@@ -10987,6 +10987,7 @@ const VentionTabs = ({
   onRename,
   onRemove,
   onAdd,
+  size: _size = "medium",
   value
 }) => {
   const theme = useTheme();
@@ -10994,6 +10995,7 @@ const VentionTabs = ({
     cx,
     classes
   } = useStyles$l();
+  const isSmall = _size === "small";
   const canRemove = onRemove !== undefined && tabOptions.length > 1;
   const [editingIndex, setEditingIndex] = useState(null);
   const [draft, setDraft] = useState("");
@@ -11063,7 +11065,7 @@ const VentionTabs = ({
       const isSelected = index === value;
       const isEditing = index === editingIndex;
       return jsxs("div", {
-        className: cx(classes.tab, isSelected && classes.selectedTab),
+        className: cx(classes.tab, isSmall && classes.smallTab, isSelected && classes.selectedTab),
         children: [jsx("button", {
           ref: labelButton => attachLabelButton(labelButton, index),
           className: cx(classes.label, isEditing && classes.hiddenLabel),
@@ -11072,13 +11074,13 @@ const VentionTabs = ({
           "aria-selected": isSelected,
           onClick: event => handleTabClick(event, index),
           children: jsx(Typography, {
-            variant: "heading18SemiBold",
+            variant: isSmall ? "heading16SemiBold" : "heading18SemiBold",
             noWrap: true,
             children: tabLabel
           })
         }), isEditing && jsx("input", {
           ref: focusInputOnMount,
-          className: classes.input,
+          className: cx(classes.input, isSmall && classes.smallInput),
           type: "text",
           "aria-label": "Tab name",
           value: draft,
@@ -11168,6 +11170,9 @@ const useStyles$l = tss.withNestedSelectors().create(({
         [`&:hover .${classes.removeControls}`]: shownRemoveControls
       }
     },
+    smallTab: {
+      minWidth: "100px"
+    },
     selectedTab: {
       backgroundColor: theme.palette.background.default,
       boxShadow: theme.shadows[1],
@@ -11213,6 +11218,7 @@ const useStyles$l = tss.withNestedSelectors().create(({
       outline: "none",
       boxShadow: `0 0 0 3px ${alpha(theme.palette.border.blue, 0.18)}`
     }),
+    smallInput: Object.assign({}, theme.typography.heading16SemiBold),
     removeControls: {
       flexShrink: 0,
       alignSelf: "stretch",

package/package.json

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

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

@@ -6,6 +6,7 @@ type VentionTabsProps = {
     onRename?: (index: number, name: string) => void;
     onRemove?: (index: number) => void;
     onAdd?: () => void;
+    size?: "small" | "medium";
 };
-export declare const VentionTabs: ({ tabOptions, onChange, onRename, onRemove, onAdd, value }: VentionTabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VentionTabs: ({ tabOptions, onChange, onRename, onRemove, onAdd, size, value }: VentionTabsProps) => import("react/jsx-runtime").JSX.Element;
 export {};