@superdispatch/ui-lab 0.43.0 → 0.44.1

package/dist-src/flag-list/FlagList.js

@@ -0,0 +1,33 @@
+import { ColorDynamic } from '@superdispatch/ui';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FlagListHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagList__FlagListHeader",
+  componentId: "SD__sc-te7hyy-0"
+})(["display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:12px 16px;background:", ";border:1px solid ", ";border-bottom:none;border-radius:4px 4px 0 0;", "{flex-direction:column;align-items:flex-start;}"], ColorDynamic.Silver200, ColorDynamic.Silver400, _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.breakpoints.down('xs');
+});
+var FlagListContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagList__FlagListContainer",
+  componentId: "SD__sc-te7hyy-1"
+})(["display:flex;flex-direction:column;"]);
+export var FlagList = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    isStandalone = false,
+    title,
+    endAction,
+    children
+  } = _ref2;
+  return /*#__PURE__*/_jsxs(FlagListContainer, {
+    "data-variant": isStandalone ? 'standalone' : 'with-header',
+    ref: ref,
+    children: [(title || endAction) && /*#__PURE__*/_jsxs(FlagListHeader, {
+      children: [title, endAction]
+    }), children]
+  });
+});
+if (process.env.NODE_ENV !== "production") FlagList.displayName = "FlagList";

package/dist-src/flag-list/FlagListItem.js

@@ -0,0 +1,83 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["variant", "showHelpIcon", "endAction", "children"];
+import { Error, Flag, Help, Warning } from '@material-ui/icons';
+import { ColorDynamic } from '@superdispatch/ui';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var IconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagListItem__IconContainer",
+  componentId: "SD__sc-o5bqru-0"
+})(["padding:4px;border-radius:50%;background:", ";color:", ";transition:", ";& .MuiSvgIcon-root{font-size:16px;}"], ColorDynamic.Silver200, ColorDynamic.Blue300, _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.transitions.create(['color', 'background-color']);
+});
+var Content = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagListItem__Content",
+  componentId: "SD__sc-o5bqru-1"
+})(["display:flex;align-items:center;width:100%;gap:8px;"]);
+var HelpIcon = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagListItem__HelpIcon",
+  componentId: "SD__sc-o5bqru-2"
+})(["margin-left:auto;& > svg{font-size:16px;color:", ";}"], ColorDynamic.Dark500);
+var EndActions = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagListItem__EndActions",
+  componentId: "SD__sc-o5bqru-3"
+})(["display:flex;align-items:center;margin-left:auto;gap:8px;", "{margin-left:0;width:100%;}"], _ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return theme.breakpoints.down('xs');
+});
+var BannerListItemDanger = /*#__PURE__*/css(["& ", "{background:", ";color:", ";}&:hover{background:", ";}"], IconContainer, ColorDynamic.Red50, ColorDynamic.Red300, ColorDynamic.Red50);
+var BannerListItemStandalone = /*#__PURE__*/css(["background:", ";"], ColorDynamic.Silver200);
+var BannerListContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagListItem__BannerListContainer",
+  componentId: "SD__sc-o5bqru-4"
+})(["display:flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border:1px solid ", ";background:", ";cursor:default;transition:", ";& + &{border-top:none;}&:last-child{border-radius:0 0 4px 4px;}&:hover{background:", ";& ", "{background:", ";}& ", " > svg{color:", ";}}[data-variant='standalone'] &:not(:hover){", "}", " ", "{flex-direction:column;align-items:flex-start;}"], ColorDynamic.Silver400, ColorDynamic.White, _ref3 => {
+  var {
+    theme
+  } = _ref3;
+  return theme.transitions.create(['color', 'background-color']);
+}, ColorDynamic.Blue50, IconContainer, ColorDynamic.White, HelpIcon, _ref4 => {
+  var {
+    $variant
+  } = _ref4;
+  return $variant === 'danger' ? ColorDynamic.Red300 : ColorDynamic.Blue300;
+}, BannerListItemStandalone, _ref5 => {
+  var {
+    $variant
+  } = _ref5;
+  return $variant === 'danger' ? BannerListItemDanger : null;
+}, _ref6 => {
+  var {
+    theme
+  } = _ref6;
+  return theme.breakpoints.down('xs');
+});
+export var FlagListItem = /*#__PURE__*/forwardRef((_ref7, ref) => {
+  var {
+      variant = 'primary',
+      showHelpIcon,
+      endAction,
+      children
+    } = _ref7,
+    rest = _objectWithoutProperties(_ref7, _excluded);
+  return /*#__PURE__*/_jsxs(BannerListContainer, _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref,
+    $variant: variant,
+    children: [/*#__PURE__*/_jsxs(Content, {
+      children: [/*#__PURE__*/_jsx(IconContainer, {
+        children: variant === 'danger' ? /*#__PURE__*/_jsx(Error, {}) : variant === 'warning' ? /*#__PURE__*/_jsx(Warning, {}) : /*#__PURE__*/_jsx(Flag, {})
+      }), children, /*#__PURE__*/_jsx(HelpIcon, {
+        children: showHelpIcon && /*#__PURE__*/_jsx(Help, {})
+      })]
+    }), endAction && /*#__PURE__*/_jsx(EndActions, {
+      children: endAction
+    })]
+  }));
+});
+if (process.env.NODE_ENV !== "production") FlagListItem.displayName = "FlagListItem";

package/dist-src/index.js

@@ -10,6 +10,8 @@ export * from "./description-item/DescriptionItem.js";
 export * from "./description-line-item/DescriptionLineItem.js";
 export * from "./file-drop-zone/FileDropZone.js";
 export * from "./file-list-item/FileListItem.js";
+export * from "./flag-list/FlagList.js";
+export * from "./flag-list/FlagListItem.js";
 export * from "./linked-text/LinkedText.js";
 export * from "./multiline-text/MultilineText.js";
 export * from "./navbar/Navbar.js";

package/dist-types/index.d.ts

@@ -194,6 +194,23 @@ interface FileListItemProps {
 }
 declare const FileListItem: ForwardRefExoticComponent<FileListItemProps & RefAttributes<HTMLDivElement>>;
 
+interface BannerListProps {
+    isStandalone?: boolean;
+    title?: ReactNode;
+    endAction?: ReactNode;
+    children: ReactNode;
+}
+declare const FlagList: ForwardRefExoticComponent<BannerListProps & RefAttributes<HTMLDivElement>>;
+
+declare type Variant = 'primary' | 'warning' | 'danger';
+interface BannerItemProps {
+    variant?: Variant;
+    showHelpIcon?: boolean;
+    endAction?: ReactNode;
+    children?: ReactNode;
+}
+declare const FlagListItem: ForwardRefExoticComponent<BannerItemProps & RefAttributes<HTMLDivElement>>;
+
 declare type LinkComponentProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
     href: string;
     truncate?: number;
@@ -402,4 +419,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, Chat, ChatMessage, Container, ContainerProps, DescriptionItem, DescriptionItemProps, DescriptionLineItem, DottedLine, 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, SidebarBackButton, SidebarContainer, SidebarContainerProps, SidebarContent, SidebarContentProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext, useSidebarContext };
+export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Chat, ChatMessage, Container, ContainerProps, DescriptionItem, DescriptionItemProps, DescriptionLineItem, DottedLine, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, FlagList, FlagListItem, LinkComponentProps, LinkedText, LinkedTextProps, MarginProp, MultilineText, MultilineTextProps, Navbar, NavbarAccordionOptions, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, Sidebar, SidebarBackButton, SidebarContainer, SidebarContainerProps, SidebarContent, SidebarContentProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext, useSidebarContext };

package/dist-web/index.js

@@ -1,4 +1,4 @@
-import { CheckCircle, Info, Error as Error$1, WarningRounded, Image, Refresh, Delete, Menu, ExpandMore, MenuOpen, ArrowBack, OpenInNew } from '@material-ui/icons';
+import { CheckCircle, Info, Error as Error$1, WarningRounded, Image, Refresh, Delete, Warning, Flag, Help, Menu, ExpandMore, MenuOpen, ArrowBack, OpenInNew } from '@material-ui/icons';
 import { Alert as Alert$1 } from '@material-ui/lab';
 import { ColorDynamic, parseResponsiveProp, isColorDynamicProp, parseSpaceProp, Stack, Color, Inline, mergeRefs, useUID, isEmptyReactNode, Columns, Column, CardButton, useResponsiveValue, ColorDark, useCollapseBreakpoint } from '@superdispatch/ui';
 import { forwardRef, useState, useEffect, Children, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement } from 'react';
@@ -1095,7 +1095,114 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") FileListItem.displayName = "FileListItem";
 
-var _excluded$6 = ["color", "target", "rel"],
+var FlagListHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagList__FlagListHeader",
+  componentId: "SD__sc-te7hyy-0"
+})(["display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:12px 16px;background:", ";border:1px solid ", ";border-bottom:none;border-radius:4px 4px 0 0;", "{flex-direction:column;align-items:flex-start;}"], ColorDynamic.Silver200, ColorDynamic.Silver400, _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.breakpoints.down('xs');
+});
+var FlagListContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagList__FlagListContainer",
+  componentId: "SD__sc-te7hyy-1"
+})(["display:flex;flex-direction:column;"]);
+var FlagList = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    isStandalone = false,
+    title,
+    endAction,
+    children
+  } = _ref2;
+  return /*#__PURE__*/jsxs(FlagListContainer, {
+    "data-variant": isStandalone ? 'standalone' : 'with-header',
+    ref: ref,
+    children: [(title || endAction) && /*#__PURE__*/jsxs(FlagListHeader, {
+      children: [title, endAction]
+    }), children]
+  });
+});
+if (process.env.NODE_ENV !== "production") FlagList.displayName = "FlagList";
+
+var _excluded$6 = ["variant", "showHelpIcon", "endAction", "children"];
+var IconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagListItem__IconContainer",
+  componentId: "SD__sc-o5bqru-0"
+})(["padding:4px;border-radius:50%;background:", ";color:", ";transition:", ";& .MuiSvgIcon-root{font-size:16px;}"], ColorDynamic.Silver200, ColorDynamic.Blue300, _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.transitions.create(['color', 'background-color']);
+});
+var Content = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagListItem__Content",
+  componentId: "SD__sc-o5bqru-1"
+})(["display:flex;align-items:center;width:100%;gap:8px;"]);
+var HelpIcon = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagListItem__HelpIcon",
+  componentId: "SD__sc-o5bqru-2"
+})(["margin-left:auto;& > svg{font-size:16px;color:", ";}"], ColorDynamic.Dark500);
+var EndActions = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagListItem__EndActions",
+  componentId: "SD__sc-o5bqru-3"
+})(["display:flex;align-items:center;margin-left:auto;gap:8px;", "{margin-left:0;width:100%;}"], _ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return theme.breakpoints.down('xs');
+});
+var BannerListItemDanger = /*#__PURE__*/css(["& ", "{background:", ";color:", ";}&:hover{background:", ";}"], IconContainer, ColorDynamic.Red50, ColorDynamic.Red300, ColorDynamic.Red50);
+var BannerListItemStandalone = /*#__PURE__*/css(["background:", ";"], ColorDynamic.Silver200);
+var BannerListContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FlagListItem__BannerListContainer",
+  componentId: "SD__sc-o5bqru-4"
+})(["display:flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border:1px solid ", ";background:", ";cursor:default;transition:", ";& + &{border-top:none;}&:last-child{border-radius:0 0 4px 4px;}&:hover{background:", ";& ", "{background:", ";}& ", " > svg{color:", ";}}[data-variant='standalone'] &:not(:hover){", "}", " ", "{flex-direction:column;align-items:flex-start;}"], ColorDynamic.Silver400, ColorDynamic.White, _ref3 => {
+  var {
+    theme
+  } = _ref3;
+  return theme.transitions.create(['color', 'background-color']);
+}, ColorDynamic.Blue50, IconContainer, ColorDynamic.White, HelpIcon, _ref4 => {
+  var {
+    $variant
+  } = _ref4;
+  return $variant === 'danger' ? ColorDynamic.Red300 : ColorDynamic.Blue300;
+}, BannerListItemStandalone, _ref5 => {
+  var {
+    $variant
+  } = _ref5;
+  return $variant === 'danger' ? BannerListItemDanger : null;
+}, _ref6 => {
+  var {
+    theme
+  } = _ref6;
+  return theme.breakpoints.down('xs');
+});
+var FlagListItem = /*#__PURE__*/forwardRef((_ref7, ref) => {
+  var {
+      variant = 'primary',
+      showHelpIcon,
+      endAction,
+      children
+    } = _ref7,
+    rest = _objectWithoutProperties(_ref7, _excluded$6);
+  return /*#__PURE__*/jsxs(BannerListContainer, _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref,
+    $variant: variant,
+    children: [/*#__PURE__*/jsxs(Content, {
+      children: [/*#__PURE__*/jsx(IconContainer, {
+        children: variant === 'danger' ? /*#__PURE__*/jsx(Error$1, {}) : variant === 'warning' ? /*#__PURE__*/jsx(Warning, {}) : /*#__PURE__*/jsx(Flag, {})
+      }), children, /*#__PURE__*/jsx(HelpIcon, {
+        children: showHelpIcon && /*#__PURE__*/jsx(Help, {})
+      })]
+    }), endAction && /*#__PURE__*/jsx(EndActions, {
+      children: endAction
+    })]
+  }));
+});
+if (process.env.NODE_ENV !== "production") FlagListItem.displayName = "FlagListItem";
+
+var _excluded$7 = ["color", "target", "rel"],
   _excluded2$2 = ["children", "linkComponent"];
 var DefaultLinkComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
@@ -1103,7 +1210,7 @@ var DefaultLinkComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
       target = '_blank',
       rel = 'noreferrer noopener'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   return /*#__PURE__*/jsx(Link, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     rel: rel,
@@ -1149,7 +1256,7 @@ function useNavbarContext() {
   return useContext(NavbarContext);
 }
 
-var _excluded$7 = ["active", "hasBadge"];
+var _excluded$8 = ["active", "hasBadge"];
 var StyledBottomNavigation = /*#__PURE__*/styled(BottomNavigation).withConfig({
   displayName: "NavbarBottomBar__StyledBottomNavigation",
   componentId: "SD__sc-9z6v3k-0"
@@ -1193,7 +1300,7 @@ function NavbarBottomBar(_ref) {
           active,
           hasBadge
         } = _ref2,
-        item = _objectWithoutProperties(_ref2, _excluded$7);
+        item = _objectWithoutProperties(_ref2, _excluded$8);
       return /*#__PURE__*/createElement(StyledBottomNavigationAction, _objectSpread(_objectSpread({}, item), {}, {
         key: item.value,
         icon: hasBadge ? /*#__PURE__*/jsxs(IconWrapper, {
@@ -1410,7 +1517,7 @@ function NavbarMenuItem(_ref5) {
     })
   });
 }
-var Content = /*#__PURE__*/styled.div.withConfig({
+var Content$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Content",
   componentId: "SD__sc-19zrmxc-5"
 })(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}&::-webkit-scrollbar{width:10px;height:10px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:100vw;margin-bottom:100px;}"], NavbarBadge, NavbarLabel, ColorDark.Silver500);
@@ -1448,7 +1555,7 @@ function NavbarList(_ref6) {
         },
         children: isMenuExpanded ? /*#__PURE__*/jsx(MenuOpen, {}) : /*#__PURE__*/jsx(Menu, {})
       })]
-    }), /*#__PURE__*/jsx(Content, {
+    }), /*#__PURE__*/jsx(Content$1, {
       "aria-expanded": isSidebarOpened,
       children: filteredItems.map(item => {
         var index = filteredItems.indexOf(item);
@@ -1553,7 +1660,7 @@ function Navbar(_ref) {
   });
 }
 
-var _excluded$8 = ["title", "subtitle", "children"];
+var _excluded$9 = ["title", "subtitle", "children"];
 var StyledTypography = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "NavbarAvatar__StyledTypography",
   componentId: "SD__sc-19q2zd0-0"
@@ -1564,7 +1671,7 @@ function NavbarAvatar(_ref) {
       subtitle,
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var {
     isNavbarExpanded
   } = useNavbarContext();
@@ -1774,7 +1881,7 @@ var SidebarContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarContainer.displayName = "SidebarContainer";
 
-var _excluded$9 = ["onClick", "children"];
+var _excluded$a = ["onClick", "children"];
 function SidebarBackButton(_ref) {
   var {
       onClick: _onClick,
@@ -1782,7 +1889,7 @@ function SidebarBackButton(_ref) {
         fontSize: "small"
       })
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   var isCollapsed = useCollapseBreakpoint('sm');
   var {
     openSidebar
@@ -2148,5 +2255,5 @@ var SidebarSubheader = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarSubheader.displayName = "SidebarSubheader";
 
-export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Chat, ChatMessage, Container, DescriptionItem, DescriptionLineItem, DottedLine, FileDropZone, FileListItem, LinkedText, MultilineText, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, Sidebar, SidebarBackButton, SidebarContainer, SidebarContent, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext, useSidebarContext };
+export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Chat, ChatMessage, Container, DescriptionItem, DescriptionLineItem, DottedLine, FileDropZone, FileListItem, FlagList, FlagListItem, LinkedText, MultilineText, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, Sidebar, SidebarBackButton, SidebarContainer, SidebarContent, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext, useSidebarContext };
 //# sourceMappingURL=index.js.map