@superdispatch/ui-lab 0.17.1 → 0.19.0

package/dist-src/navbar/NavbarMenu.js

@@ -0,0 +1,80 @@
+import { Menu, MenuItem, Typography } from '@material-ui/core';
+import { Color, Inline } from '@superdispatch/ui';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { useNavbarContext } from "./NavbarContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var Divider = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarMenu__Divider",
+  componentId: "SD__sc-1c8icpt-0"
+})(["border-bottom:1px solid ", ";margin:8px -16px;"], Color.Silver400);
+var StyledMenuItem = /*#__PURE__*/styled(MenuItem).withConfig({
+  displayName: "NavbarMenu__StyledMenuItem",
+  componentId: "SD__sc-1c8icpt-1"
+})(["& svg{font-size:24px;color:", ";}"], Color.Dark100);
+var Wrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarMenu__Wrapper",
+  componentId: "SD__sc-1c8icpt-2"
+})(["width:100%;padding:8px 16px;cursor:pointer;background:", ";border-left:4px solid ", ";&:hover{border-left-color:", ";background:", ";}"], Color.Dark400, _ref => {
+  var {
+    active
+  } = _ref;
+  return active ? Color.Blue300 : 'transparent';
+}, Color.Blue300, Color.Dark400);
+export function NavbarMenu(_ref2) {
+  var {
+    items,
+    children
+  } = _ref2;
+  var {
+    setDrawerOpen
+  } = useNavbarContext();
+  var [anchor, setAnchor] = useState(null);
+
+  function showProfileMenu(event) {
+    setAnchor(event.currentTarget);
+  }
+
+  function hideProfileMenu() {
+    setAnchor(null);
+    setDrawerOpen(false);
+  }
+
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Wrapper, {
+      onClick: showProfileMenu,
+      active: !!anchor,
+      children: children
+    }), /*#__PURE__*/_jsx(Menu, {
+      open: !!anchor,
+      anchorEl: anchor,
+      onClose: hideProfileMenu,
+      onClick: hideProfileMenu,
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      transformOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      },
+      children: items.filter(item => item.visible !== false).flatMap((item, index, arr) => {
+        return [/*#__PURE__*/_jsx(StyledMenuItem, {
+          onClick: item.onClick,
+          children: /*#__PURE__*/_jsxs(Inline, {
+            space: "small",
+            verticalAlign: "center",
+            children: [item.icon, /*#__PURE__*/_jsx(Typography, {
+              style: {
+                color: Color.Dark500
+              },
+              children: item.label
+            })]
+          })
+        }, item.key), index !== arr.length - 1 && /*#__PURE__*/_jsx(Divider, {}, "".concat(item.key, "-divider"))];
+      })
+    })]
+  });
+}

package/dist-types/index.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
-import { ReactNode, ForwardRefExoticComponent, RefAttributes, Ref, AriaAttributes, MouseEventHandler, FocusEventHandler, ReactChild, MouseEvent, ReactElement } from 'react';
+import { ReactNode, ForwardRefExoticComponent, RefAttributes, Ref, AriaAttributes, MouseEventHandler, FocusEventHandler, HTMLAttributes, AnchorHTMLAttributes, FunctionComponent, ReactElement, ComponentType, MouseEvent, Key, CSSProperties, ReactChild } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { SpaceProp, NegativeSpaceProp, ResponsiveProp, ColorProp } from '@superdispatch/ui';
 import { Property } from 'csstype';
-import { ButtonBaseProps, TooltipProps } from '@material-ui/core';
+import { ButtonBaseProps, AvatarProps, TooltipProps } from '@material-ui/core';
 import { FileRejection } from 'react-dropzone';
+import { StyledComponent, DefaultTheme } from 'styled-components';
 
 declare type AlertSeverityProp = 'positive' | 'info' | 'caution' | 'critical';
 interface AlertProps {
@@ -117,6 +118,13 @@ interface AnchorButtonProps extends BaseButtonProps<HTMLAnchorElement> {
 }
 declare const AnchorButton: ForwardRefExoticComponent<AnchorButtonProps & RefAttributes<HTMLAnchorElement>>;
 
+declare type ContainerProps = HTMLAttributes<HTMLDivElement> & {
+    fullViewportHeight?: boolean;
+};
+declare const Container: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    fullViewportHeight?: boolean | undefined;
+} & RefAttributes<HTMLDivElement>>;
+
 interface DescriptionItemProps {
     id?: string;
     'aria-label'?: string;
@@ -155,6 +163,123 @@ interface FileListItemProps {
 }
 declare const FileListItem: ForwardRefExoticComponent<FileListItemProps & RefAttributes<HTMLDivElement>>;
 
+declare type LinkComponentProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
+    href: string;
+    truncate?: number;
+};
+interface LinkedTextProps extends Omit<LinkComponentProps, 'ref' | 'href'> {
+    children?: null | string;
+    linkComponent?: FunctionComponent<LinkComponentProps>;
+}
+declare function LinkedText({ children, linkComponent, ...props }: LinkedTextProps): ReactElement | null;
+
+interface MultilineTextProps {
+    overflowWrap?: Extract<Property.OverflowWrap, 'anywhere' | 'break-word' | 'normal'>;
+}
+declare const MultilineText: StyledComponent<"span", DefaultTheme, MultilineTextProps, never>;
+
+interface NavbarBottomBarItem {
+    active?: boolean;
+    value: string;
+    hasBadge?: boolean;
+    label: ReactNode;
+    icon: ReactNode;
+    onClick?: () => void;
+    component?: ComponentType<HTMLAttributes<HTMLElement>>;
+}
+interface NavbarBottomBarProps {
+    items: NavbarBottomBarItem[];
+    hasMenuBadge?: boolean;
+}
+declare function NavbarBottomBar({ items, hasMenuBadge, }: NavbarBottomBarProps): ReactElement;
+
+interface NavbarAccordionProps {
+    label: ReactNode;
+    icon?: ReactNode;
+    gutter?: boolean;
+    items: NavbarItemOptions[];
+    onClick: (event: MouseEvent<HTMLDivElement>) => void;
+}
+
+declare const NavbarBadge: StyledComponent<"span", DefaultTheme, {}, never>;
+declare const NavbarLabel: StyledComponent<"span", DefaultTheme, {}, never>;
+interface NavbarItemProps {
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    component?: ComponentType<HTMLAttributes<HTMLElement>>;
+    label: ReactNode;
+    icon?: ReactNode;
+    badge?: ReactNode;
+    ident?: number;
+    gutter?: boolean;
+    variant?: 'danger' | 'primary';
+    active?: boolean;
+}
+declare function NavbarItem({ label, gutter, badge, icon, component, onClick, variant, ident, active, }: NavbarItemProps): ReactElement;
+
+interface NavbarMenuItemProps {
+    icon?: ReactNode;
+    label: ReactNode;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    component?: ComponentType<HTMLAttributes<HTMLElement>>;
+}
+declare function NavbarMenuItem({ label, icon, onClick, component, }: NavbarMenuItemProps): ReactElement;
+interface NavbarAccordionOptions extends NavbarAccordionProps {
+    key: Key;
+    groupKey?: Key;
+    hide?: boolean;
+}
+interface NavbarItemOptions extends NavbarItemProps {
+    key: Key;
+    groupKey?: Key;
+    hide?: boolean;
+}
+interface NavbarListProps {
+    header: ReactNode;
+    items: Array<NavbarItemOptions | NavbarAccordionOptions>;
+    footer?: ReactNode;
+}
+declare function NavbarList({ header, items, footer, }: NavbarListProps): ReactElement;
+
+interface NavbarProps {
+    containerStyle?: CSSProperties;
+    children: ReactNode;
+    header?: ReactNode;
+    items: NavbarItemOptions[];
+    bottomItems: NavbarBottomBarItem[];
+    footer?: ReactNode;
+    hasExtraBadge?: boolean;
+}
+declare function Navbar({ footer, items, header, bottomItems, children, containerStyle, hasExtraBadge, }: NavbarProps): ReactElement;
+
+interface NavbarAvatarProps extends Omit<AvatarProps, 'title'> {
+    title: ReactNode;
+    subtitle: ReactNode;
+    children: ReactNode;
+}
+declare function NavbarAvatar({ title, subtitle, children, ...props }: NavbarAvatarProps): ReactElement;
+
+
+interface NavbarContextType {
+    isDrawerOpen: boolean;
+    isExpanded: boolean;
+    setIsExpanded: (value: boolean) => void;
+    setDrawerOpen: (value: boolean) => void;
+}
+declare function useNavbarContext(): NavbarContextType;
+
+interface NavbarMenuItemOption {
+    key: Key;
+    icon: ReactNode;
+    label: ReactNode;
+    visible?: boolean;
+    onClick: () => void;
+}
+interface NavbarMenuProps {
+    children: ReactNode;
+    items: NavbarMenuItemOption[];
+}
+declare function NavbarMenu({ items, children }: NavbarMenuProps): ReactElement;
+
 interface SidebarProps {
     id?: string;
     title?: ReactNode;
@@ -226,4 +351,4 @@ interface TextBoxProps {
 }
 declare const TextBox: ForwardRefExoticComponent<TextBoxProps & RefAttributes<HTMLElement>>;
 
-export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, DescriptionItem, DescriptionItemProps, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, MarginProp, Sidebar, SidebarContainer, SidebarContainerProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes };
+export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Container, ContainerProps, DescriptionItem, DescriptionItemProps, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, LinkComponentProps, LinkedText, LinkedTextProps, MarginProp, MultilineText, MultilineTextProps, Navbar, NavbarAccordionOptions, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, Sidebar, SidebarContainer, SidebarContainerProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext };