@xyo-network/react-appbar 7.5.7 → 7.5.11

package/dist/browser/components/MobileSystemControls/SystemControlsRoot.d.ts

@@ -1,4 +1,5 @@
+import type React from 'react';
 import type { SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx';
-declare const SystemControlsRoot: import("@emotion/styled").StyledComponent<Pick<SystemControlsUnstyledProps, keyof SystemControlsUnstyledProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & SystemControlsUnstyledProps, {}, {}>;
+declare const SystemControlsRoot: React.FC<SystemControlsUnstyledProps>;
 export { SystemControlsRoot };
 //# sourceMappingURL=SystemControlsRoot.d.ts.map

package/dist/browser/components/MobileSystemControls/SystemControlsRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemControlsRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/MobileSystemControls/SystemControlsRoot.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAA;AAG/E,QAAA,MAAM,kBAAkB,mOAiDrB,CAAA;AAEH,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"SystemControlsRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/MobileSystemControls/SystemControlsRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAA;AAG/E,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAiD3D,CAAA;AAEH,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/browser/index.mjs

@@ -1,153 +1,177 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // src/components/AppBar/Application.tsx
 import { ApplicationAppBar } from "@xylabs/react-appbar";
-import React5 from "react";
 
 // src/components/Toolbar/Context/ContextToolbar.tsx
 import { Toolbar } from "@mui/material";
-import React3 from "react";
 
 // src/components/Toolbar/Context/LogoLinkEx.tsx
 import { Typography, useTheme } from "@mui/material";
 import { FlexRow } from "@xylabs/react-flexbox";
 import { LinkEx } from "@xylabs/react-link";
 import { assertEx } from "@xylabs/sdk-js";
-import React2 from "react";
 
 // src/components/Toolbar/Context/Logo.tsx
-import React from "react";
-var Logo = /* @__PURE__ */ __name((props) => {
+import { jsx } from "react/jsx-runtime";
+var Logo = (props) => {
   const logoUrl = "https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg";
-  return /* @__PURE__ */ React.createElement("img", {
-    src: logoUrl,
-    ...props
-  });
-}, "Logo");
+  return /* @__PURE__ */ jsx("img", { src: logoUrl, ...props });
+};
 
 // src/components/Toolbar/Context/LogoLinkEx.tsx
-var LogoLinkEx = /* @__PURE__ */ __name(({ logo, to = "/", href, version = false, ...props }) => {
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var LogoLinkEx = ({
+  logo,
+  to = "/",
+  href,
+  version = false,
+  ...props
+}) => {
   const theme = useTheme();
   assertEx(href === void 0, () => "href is not supported");
-  return /* @__PURE__ */ React2.createElement(LinkEx, {
-    to,
-    sx: {
-      "opacity": 0.8,
-      "&:hover": {
-        opacity: 1
+  return /* @__PURE__ */ jsx2(LinkEx, { to, sx: { "opacity": 0.8, "&:hover": { opacity: 1 } }, ...props, children: /* @__PURE__ */ jsxs(FlexRow, { paddingX: "4px", children: [
+    logo ?? /* @__PURE__ */ jsx2(Logo, { height: "40", width: "43" }),
+    version === void 0 ? null : /* @__PURE__ */ jsx2(
+      Typography,
+      {
+        position: "absolute",
+        borderRadius: 1,
+        right: 6,
+        color: theme.vars.palette.primary.main,
+        bottom: 0,
+        bgcolor: theme.vars.palette.primary.contrastText,
+        paddingX: "2px",
+        lineHeight: 1,
+        variant: "caption",
+        border: `1px ${theme.vars.palette.primary.main} solid`,
+        children: typeof version === "string" ? version : "2.1"
       }
-    },
-    ...props
-  }, /* @__PURE__ */ React2.createElement(FlexRow, {
-    paddingX: "4px"
-  }, logo ?? /* @__PURE__ */ React2.createElement(Logo, {
-    height: "40",
-    width: "43"
-  }), version === void 0 ? null : /* @__PURE__ */ React2.createElement(Typography, {
-    position: "absolute",
-    borderRadius: 1,
-    right: 6,
-    color: theme.vars.palette.primary.main,
-    bottom: 0,
-    bgcolor: theme.vars.palette.primary.contrastText,
-    paddingX: "2px",
-    lineHeight: 1,
-    variant: "caption",
-    border: `1px ${theme.vars.palette.primary.main} solid`
-  }, typeof version === "string" ? version : "2.1")));
-}, "LogoLinkEx");
+    )
+  ] }) });
+};
 
 // src/components/Toolbar/Context/ContextToolbar.tsx
-var XyoContextToolbar = /* @__PURE__ */ __name(({ children, logo, logoTo = "/", version = false, ...props }) => {
-  return /* @__PURE__ */ React3.createElement(Toolbar, props, /* @__PURE__ */ React3.createElement(LogoLinkEx, {
-    logo,
-    version,
-    to: logoTo
-  }), children);
-}, "XyoContextToolbar");
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var XyoContextToolbar = ({
+  children,
+  logo,
+  logoTo = "/",
+  version = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs2(Toolbar, { ...props, children: [
+    /* @__PURE__ */ jsx3(LogoLinkEx, { logo, version, to: logoTo }),
+    children
+  ] });
+};
 
 // src/components/Toolbar/System/SystemToolbar.tsx
 import { Paper } from "@mui/material";
-import { SystemToolbar } from "@xylabs/react-appbar";
+import {
+  SystemToolbar
+} from "@xylabs/react-appbar";
 import { FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
 import { NetworkSelectEx } from "@xyo-network/react-network";
-import React4 from "react";
-var XyoSystemToolbar = /* @__PURE__ */ __name(({ children, hideNetworkSelect, networkSelectProps, precedingChildren, ...props }) => {
-  return /* @__PURE__ */ React4.createElement(SystemToolbar, props, precedingChildren, hideNetworkSelect ? null : /* @__PURE__ */ React4.createElement(FlexRow2, {
-    marginX: 0.5
-  }, /* @__PURE__ */ React4.createElement(Paper, {
-    variant: "elevation"
-  }, /* @__PURE__ */ React4.createElement(NetworkSelectEx, {
-    fullWidth: true,
-    ...networkSelectProps
-  }))), children);
-}, "XyoSystemToolbar");
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var XyoSystemToolbar = ({
+  children,
+  hideNetworkSelect,
+  networkSelectProps,
+  precedingChildren,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs3(SystemToolbar, { ...props, children: [
+    precedingChildren,
+    hideNetworkSelect ? null : /* @__PURE__ */ jsx4(FlexRow2, { marginX: 0.5, children: /* @__PURE__ */ jsx4(Paper, { variant: "elevation", children: /* @__PURE__ */ jsx4(NetworkSelectEx, { fullWidth: true, ...networkSelectProps }) }) }),
+    children
+  ] });
+};
 
 // src/components/AppBar/Application.tsx
-var XyoApplicationAppBar = /* @__PURE__ */ __name(({ systemToolbar, contextToolbar, responsive = true, ...props }) => {
-  return /* @__PURE__ */ React5.createElement(ApplicationAppBar, {
-    systemToolbar: systemToolbar ?? /* @__PURE__ */ React5.createElement(XyoSystemToolbar, null),
-    contextToolbar: contextToolbar ?? /* @__PURE__ */ React5.createElement(XyoContextToolbar, null),
-    position: "sticky",
-    responsive,
-    ...props
-  });
-}, "XyoApplicationAppBar");
+import { jsx as jsx5 } from "react/jsx-runtime";
+var XyoApplicationAppBar = ({
+  systemToolbar,
+  contextToolbar,
+  responsive = true,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx5(
+    ApplicationAppBar,
+    {
+      systemToolbar: systemToolbar ?? /* @__PURE__ */ jsx5(XyoSystemToolbar, {}),
+      contextToolbar: contextToolbar ?? /* @__PURE__ */ jsx5(XyoContextToolbar, {}),
+      position: "sticky",
+      responsive,
+      ...props
+    }
+  );
+};
 
 // src/components/CollapsibleDrawer/CollapseToggle.tsx
 import { Icon, useTheme as useTheme2 } from "@mui/material";
 import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
 import { useCollapsible } from "@xylabs/react-shared";
-import React6, { useState } from "react";
+import { useState } from "react";
 import { VscArrowSmallLeft, VscArrowSmallRight } from "react-icons/vsc";
-var CollapseToggleFlex = /* @__PURE__ */ __name((props) => {
-  const { collapse, setCollapse, setCollapseEnd } = useCollapsible();
+import { jsx as jsx6 } from "react/jsx-runtime";
+var CollapseToggleFlex = (props) => {
+  const {
+    collapse,
+    setCollapse,
+    setCollapseEnd
+  } = useCollapsible();
   const [hover, setHover] = useState(false);
   const theme = useTheme2();
-  const handleCollapseToggle = /* @__PURE__ */ __name(() => {
+  const handleCollapseToggle = () => {
     setCollapse?.(!collapse);
     setCollapseEnd?.((previous) => previous ? false : previous);
-  }, "handleCollapseToggle");
-  return /* @__PURE__ */ React6.createElement(FlexRow3, {
-    mt: 2,
-    py: 2,
-    justifyContent: collapse ? "start" : "center",
-    ...props
-  }, /* @__PURE__ */ React6.createElement(Icon, {
-    onClick: handleCollapseToggle,
-    onMouseEnter: /* @__PURE__ */ __name(() => setHover(true), "onMouseEnter"),
-    onMouseLeave: /* @__PURE__ */ __name(() => setHover(false), "onMouseLeave"),
-    fontSize: "large",
-    sx: {
-      color: hover ? theme.vars.palette.secondary.main : "inherit",
-      cursor: "pointer"
+  };
+  return /* @__PURE__ */ jsx6(FlexRow3, { mt: 2, py: 2, justifyContent: collapse ? "start" : "center", ...props, children: /* @__PURE__ */ jsx6(
+    Icon,
+    {
+      onClick: handleCollapseToggle,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      fontSize: "large",
+      sx: { color: hover ? theme.vars.palette.secondary.main : "inherit", cursor: "pointer" },
+      children: collapse ? /* @__PURE__ */ jsx6(VscArrowSmallRight, {}) : /* @__PURE__ */ jsx6(VscArrowSmallLeft, {})
     }
-  }, collapse ? /* @__PURE__ */ React6.createElement(VscArrowSmallRight, null) : /* @__PURE__ */ React6.createElement(VscArrowSmallLeft, null)));
-}, "CollapseToggleFlex");
+  ) });
+};
 
 // src/components/CollapsibleDrawer/CollapsibleDrawer.tsx
-import { Collapse, styled, useTheme as useTheme3 } from "@mui/material";
+import {
+  Collapse,
+  styled,
+  useTheme as useTheme3
+} from "@mui/material";
 import { useCollapsible as useCollapsible2 } from "@xylabs/react-shared";
-import React7 from "react";
-var CollapsibleDrawer = /* @__PURE__ */ __name(({ children, sx, ...props }) => {
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CollapsibleDrawer = ({
+  children,
+  sx,
+  ...props
+}) => {
   const { collapse, setCollapseEnd } = useCollapsible2();
   const theme = useTheme3();
   const collapsedSize = props.collapsedSize ?? theme.spacing(5);
-  return /* @__PURE__ */ React7.createElement(CollapsibleFlexInner, {
-    in: !collapse,
-    orientation: "horizontal",
-    collapsedSize,
-    onExited: /* @__PURE__ */ __name(() => setCollapseEnd?.(true), "onExited"),
-    sx: {
-      alignItems: "start",
-      display: "flex",
-      height: "100%",
-      ...sx
-    },
-    ...props
-  }, children);
-}, "CollapsibleDrawer");
+  return /* @__PURE__ */ jsx7(
+    CollapsibleFlexInner,
+    {
+      in: !collapse,
+      orientation: "horizontal",
+      collapsedSize,
+      onExited: () => setCollapseEnd?.(true),
+      sx: {
+        alignItems: "start",
+        display: "flex",
+        height: "100%",
+        ...sx
+      },
+      ...props,
+      children
+    }
+  );
+};
 var CollapsibleFlexInner = styled(Collapse)(() => ({
   "& .MuiCollapse-wrapperInner": {
     display: "flex",
@@ -157,7 +181,6 @@ var CollapsibleFlexInner = styled(Collapse)(() => ({
 
 // src/components/MobileSystemControls/SystemControls.tsx
 import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
-import React10 from "react";
 
 // src/components/MobileSystemControls/SystemControlsRoot.tsx
 import { styled as styled2 } from "@mui/material";
@@ -174,13 +197,18 @@ var SystemControlsType = Enum({
 import { Paper as Paper2, useMediaQuery } from "@mui/material";
 import { FlexCol as FlexCol2, FlexRow as FlexRow5 } from "@xylabs/react-flexbox";
 import { NetworkSelectEx as NetworkSelectEx2 } from "@xyo-network/react-network";
-import React9 from "react";
 
 // src/components/MobileSystemControls/controls/SystemControl.tsx
 import { Collapse as Collapse2 } from "@mui/material";
 import { FlexCol, FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
-import React8, { useState as useState2 } from "react";
-var SystemControl = /* @__PURE__ */ __name(({ children, controlElement, systemControlsType = SystemControlsType.WindowShade, ...props }) => {
+import { useState as useState2 } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var SystemControl = ({
+  children,
+  controlElement,
+  systemControlsType = SystemControlsType.WindowShade,
+  ...props
+}) => {
   const [toggleControls, setToggleControls] = useState2(false);
   let orientation = "vertical";
   switch (systemControlsType) {
@@ -189,54 +217,34 @@ var SystemControl = /* @__PURE__ */ __name(({ children, controlElement, systemCo
       break;
     }
   }
-  return /* @__PURE__ */ React8.createElement(FlexRow4, {
-    className: "controls",
-    ...props
-  }, /* @__PURE__ */ React8.createElement(Collapse2, {
-    in: toggleControls,
-    orientation,
-    timeout: 500
-  }, /* @__PURE__ */ React8.createElement(FlexRow4, {
-    bgcolor: "primary.main",
-    className: "control"
-  }, controlElement)), /* @__PURE__ */ React8.createElement(FlexCol, {
-    style: {
-      cursor: "pointer"
-    },
-    onClick: /* @__PURE__ */ __name(() => setToggleControls(!toggleControls), "onClick")
-  }, children));
-}, "SystemControl");
+  return /* @__PURE__ */ jsxs4(FlexRow4, { className: "controls", ...props, children: [
+    /* @__PURE__ */ jsx8(Collapse2, { in: toggleControls, orientation, timeout: 500, children: /* @__PURE__ */ jsx8(FlexRow4, { bgcolor: "primary.main", className: "control", children: controlElement }) }),
+    /* @__PURE__ */ jsx8(FlexCol, { style: { cursor: "pointer" }, onClick: () => setToggleControls(!toggleControls), children })
+  ] });
+};
 
 // src/components/MobileSystemControls/SystemControlsUnstyled.tsx
-var SystemControlsUnstyled = /* @__PURE__ */ __name(({ visible, systemControlsType = SystemControlsType.WindowShade, ...props }) => {
+import { jsx as jsx9 } from "react/jsx-runtime";
+var SystemControlsUnstyled = ({
+  visible,
+  systemControlsType = SystemControlsType.WindowShade,
+  ...props
+}) => {
   const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
-  return visible || isSmall ? /* @__PURE__ */ React9.createElement(FlexCol2, {
-    ...props,
-    className: `${props.className} system-controls-type-${systemControlsType}`
-  }, /* @__PURE__ */ React9.createElement(SystemControl, {
-    systemControlsType,
-    controlElement: /* @__PURE__ */ React9.createElement(FlexRow5, {
-      className: "control-wrap"
-    }, /* @__PURE__ */ React9.createElement(Paper2, {
-      variant: "elevation",
-      elevation: 0
-    }, /* @__PURE__ */ React9.createElement(NetworkSelectEx2, {
-      responsive: false,
-      className: "network-ex"
-    })))
-  })) : /* @__PURE__ */ React9.createElement(FlexCol2, null);
-}, "SystemControlsUnstyled");
+  return visible || isSmall ? /* @__PURE__ */ jsx9(FlexCol2, { ...props, className: `${props.className} system-controls-type-${systemControlsType}`, children: /* @__PURE__ */ jsx9(
+    SystemControl,
+    {
+      systemControlsType,
+      controlElement: /* @__PURE__ */ jsx9(FlexRow5, { className: "control-wrap", children: /* @__PURE__ */ jsx9(Paper2, { variant: "elevation", elevation: 0, children: /* @__PURE__ */ jsx9(NetworkSelectEx2, { responsive: false, className: "network-ex" }) }) })
+    }
+  ) }) : /* @__PURE__ */ jsx9(FlexCol2, {});
+};
 
 // src/components/MobileSystemControls/SystemControlsRoot.tsx
-var SystemControlsRoot = styled2(SystemControlsUnstyled, {
-  name: "SystemControls",
-  slot: "Root"
-})(({ theme }) => ({
+var SystemControlsRoot = styled2(SystemControlsUnstyled, { name: "SystemControls", slot: "Root" })(({ theme }) => ({
   // shared defaults
   ["&"]: {
-    ".toggle": {
-      backgroundColor: theme.vars.palette.primary.main
-    },
+    ".toggle": { backgroundColor: theme.vars.palette.primary.main },
     "alignItems": "start",
     "zIndex": 1
   },
@@ -270,9 +278,7 @@ var SystemControlsRoot = styled2(SystemControlsUnstyled, {
       flexDirection: "column",
       padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`
     },
-    ".control-wrap": {
-      marginBottom: `${theme.spacing(2)}`
-    },
+    ".control-wrap": { marginBottom: `${theme.spacing(2)}` },
     ".toggle": {
       borderRadius: "0 5px 5px 0",
       padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
@@ -287,58 +293,72 @@ var SystemControlsRoot = styled2(SystemControlsUnstyled, {
 }));
 
 // src/components/MobileSystemControls/SystemControls.tsx
-var SystemControls = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React10.createElement(FlexCol3, null, /* @__PURE__ */ React10.createElement(SystemControlsRoot, props));
-}, "SystemControls");
+import { jsx as jsx10 } from "react/jsx-runtime";
+var SystemControls = (props) => {
+  return /* @__PURE__ */ jsx10(FlexCol3, { children: /* @__PURE__ */ jsx10(SystemControlsRoot, { ...props }) });
+};
 
 // src/components/SearchBar/SearchBar.tsx
 import { Search as SearchIcon } from "@mui/icons-material";
 import { Paper as Paper3, TextField } from "@mui/material";
 import { ButtonEx } from "@xylabs/react-button";
 import { FlexRow as FlexRow6 } from "@xylabs/react-flexbox";
-import React11, { useState as useState3 } from "react";
-var SearchBar = /* @__PURE__ */ __name(({ defaultValue, onSearch, ...props }) => {
+import { useState as useState3 } from "react";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var SearchBar = ({
+  defaultValue,
+  onSearch,
+  ...props
+}) => {
   const [term, setTerm] = useState3();
-  return /* @__PURE__ */ React11.createElement(FlexRow6, {
-    alignItems: "stretch",
-    ...props
-  }, /* @__PURE__ */ React11.createElement(Paper3, {
-    variant: "elevation",
-    elevation: 0,
-    style: {
-      display: "flex",
-      overflow: "hidden",
-      width: "100%"
-    }
-  }, /* @__PURE__ */ React11.createElement(TextField, {
-    variant: "outlined",
-    size: "small",
-    defaultValue,
-    fullWidth: true,
-    onChange: /* @__PURE__ */ __name((event) => setTerm(event.target.value), "onChange"),
-    onKeyDown: /* @__PURE__ */ __name((event) => {
-      if (event.key === "Enter") onSearch?.(term);
-    }, "onKeyDown"),
-    slotProps: {
-      input: {
-        color: "secondary",
-        style: {
-          borderBottomRightRadius: 0,
-          borderTopRightRadius: 0,
-          borderWidth: 0
-        }
-      }
+  return /* @__PURE__ */ jsx11(FlexRow6, { alignItems: "stretch", ...props, children: /* @__PURE__ */ jsxs5(
+    Paper3,
+    {
+      variant: "elevation",
+      elevation: 0,
+      style: {
+        display: "flex",
+        overflow: "hidden",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx11(
+          TextField,
+          {
+            variant: "outlined",
+            size: "small",
+            defaultValue,
+            fullWidth: true,
+            onChange: (event) => setTerm(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter") onSearch?.(term);
+            },
+            slotProps: {
+              input: {
+                color: "secondary",
+                style: {
+                  borderBottomRightRadius: 0,
+                  borderTopRightRadius: 0,
+                  borderWidth: 0
+                }
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          ButtonEx,
+          {
+            variant: "contained",
+            style: { borderRadius: 0, borderTopLeftRadius: 0 },
+            color: "secondary",
+            onClick: () => onSearch?.(term),
+            children: /* @__PURE__ */ jsx11(SearchIcon, {})
+          }
+        )
+      ]
     }
-  }), /* @__PURE__ */ React11.createElement(ButtonEx, {
-    variant: "contained",
-    style: {
-      borderRadius: 0,
-      borderTopLeftRadius: 0
-    },
-    color: "secondary",
-    onClick: /* @__PURE__ */ __name(() => onSearch?.(term), "onClick")
-  }, /* @__PURE__ */ React11.createElement(SearchIcon, null))));
-}, "SearchBar");
+  ) });
+};
 export {
   CollapseToggleFlex,
   CollapsibleDrawer,