@superdispatch/ui-lab 0.50.3 → 0.50.5

package/.babelrc.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const createBabelConfig = require('../../config/createBabelConfig');
+
+module.exports = createBabelConfig();

package/package.json

@@ -1,22 +1,23 @@
 {
   "name": "@superdispatch/ui-lab",
-  "version": "0.50.3",
-  "license": "MIT",
-  "files": [
-    "dist-*/**",
-    "bin/"
-  ],
-  "pika": true,
-  "sideEffects": false,
+  "version": "0.50.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/superdispatch/ui.git"
   },
+  "license": "MIT",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "browser": "pkg/dist-web/index.js",
+  "types": "src/index.ts",
+  "scripts": {
+    "version": "pika build"
+  },
   "dependencies": {
     "@superdispatch/dates": "^0.50.3",
     "@superdispatch/hooks": "^0.50.0",
     "@superdispatch/ui": "^0.50.3",
-    "react-anchorme": "^2.2.1",
+    "react-anchorme": "^3.0.0",
     "react-dropzone": "^11.3.4"
   },
   "peerDependencies": {
@@ -34,8 +35,32 @@
     "access": "public",
     "directory": "pkg"
   },
-  "esnext": "dist-src/index.js",
-  "module": "dist-web/index.js",
-  "main": "dist-node/index.js",
-  "types": "dist-types/index.d.ts"
+  "@pika/pack": {
+    "pipeline": [
+      [
+        "@pika/plugin-standard-pkg",
+        {
+          "exclude": [
+            "**/*.spec.*",
+            "**/*.stories.*",
+            "**/*.playroom.*",
+            "**/__tests__/**",
+            "**/__testutils__/**"
+          ]
+        }
+      ],
+      [
+        "@pika/plugin-build-web"
+      ],
+      [
+        "@pika/plugin-build-node"
+      ],
+      [
+        "@pika/plugin-build-types"
+      ],
+      [
+        "@pika/plugin-bundle-types"
+      ]
+    ]
+  }
 }

package/pkg/README.md

@@ -0,0 +1,10 @@
+### `@superdispatch/ui-lab`
+
+[![npm](https://img.shields.io/npm/v/@superdispatch/ui-lab)](https://www.npmjs.com/package/@superdispatch/ui-lab)
+[![npm minzipped size](https://img.shields.io/bundlephobia/minzip/@superdispatch/ui-lab.svg)](https://bundlephobia.com/result?p=@superdispatch/ui-lab)
+
+#### Installation
+
+```bash
+yarn add @superdispatch/ui-lab
+```

package/{dist-node → pkg/dist-node}/index.js

@@ -909,7 +909,7 @@ var EmailAutocomplete = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     },
     onChange: (_event, selectedValue, reason) => {
       var emails = selectedValue.flatMap(item => item.split(',')).map(item => item.trim());
-      _onChange === null || _onChange === void 0 ? void 0 : _onChange(emails, reason);
+      _onChange === null || _onChange === void 0 || _onChange(emails, reason);
     },
     renderTags: items => {
       return /*#__PURE__*/jsxRuntime.jsx(ui.Inline, {
@@ -944,13 +944,13 @@ var EmailAutocomplete = /*#__PURE__*/react.forwardRef((_ref, ref) => {
         var text = event.target.value.replace(/,/g, '');
         var hasCommaOrSpace = /,|\s/.test(event.target.value);
         if (hasCommaOrSpace && text.trim() !== '') {
-          _onChange === null || _onChange === void 0 ? void 0 : _onChange([...(value || []), text.trim()], 'select-option');
+          _onChange === null || _onChange === void 0 || _onChange([...(value || []), text.trim()], 'select-option');
         }
       },
       onBlur: event => {
         var text = event.target.value;
         if (text.trim() !== '') {
-          _onChange === null || _onChange === void 0 ? void 0 : _onChange([...(value || []), text.trim()], 'select-option');
+          _onChange === null || _onChange === void 0 || _onChange([...(value || []), text.trim()], 'select-option');
         }
       }
     }))
@@ -1037,10 +1037,10 @@ var FileDropZone = /*#__PURE__*/react.forwardRef((props, ref) => {
       maxFiles: maxFiles,
       disabled: disabled,
       onDropAccepted: files => {
-        _onDropAccepted === null || _onDropAccepted === void 0 ? void 0 : _onDropAccepted(files);
+        _onDropAccepted === null || _onDropAccepted === void 0 || _onDropAccepted(files);
       },
       onDropRejected: fileRejections => {
-        _onDropRejected === null || _onDropRejected === void 0 ? void 0 : _onDropRejected(fileRejections);
+        _onDropRejected === null || _onDropRejected === void 0 || _onDropRejected(fileRejections);
       },
       children: _ref3 => {
         var {
@@ -1252,46 +1252,38 @@ var EndActions = /*#__PURE__*/styled__default.div.withConfig({
   } = _ref2;
   return theme.breakpoints.down('xs');
 });
-var BannerListItemDanger = /*#__PURE__*/styled.css(["& ", "{background:", ";color:", ";}&:hover{background:", ";}"], IconContainer, ui.ColorDynamic.Red50, ui.ColorDynamic.Red300, ui.ColorDynamic.Red50);
 var BannerListItemStandalone = /*#__PURE__*/styled.css(["background:", ";"], ui.ColorDynamic.Silver200);
 var BannerListContainer = /*#__PURE__*/styled__default.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;}"], ui.ColorDynamic.Silver400, ui.ColorDynamic.White, _ref3 => {
+})(["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:", ";}}[data-variant='standalone'] &:not(:hover){", "}", "{flex-direction:column;align-items:flex-start;}"], ui.ColorDynamic.Silver400, ui.ColorDynamic.White, _ref3 => {
   var {
     theme
   } = _ref3;
   return theme.transitions.create(['color', 'background-color']);
-}, ui.ColorDynamic.Blue50, IconContainer, ui.ColorDynamic.White, HelpIcon, _ref4 => {
-  var {
-    $variant
-  } = _ref4;
-  return $variant === 'danger' ? ui.ColorDynamic.Red300 : ui.ColorDynamic.Blue300;
-}, BannerListItemStandalone, _ref5 => {
-  var {
-    $variant
-  } = _ref5;
-  return $variant === 'danger' ? BannerListItemDanger : null;
-}, _ref6 => {
+}, ui.ColorDynamic.Silver200, IconContainer, ui.ColorDynamic.White, BannerListItemStandalone, _ref4 => {
   var {
     theme
-  } = _ref6;
+  } = _ref4;
   return theme.breakpoints.down('xs');
 });
-var FlagListItem = /*#__PURE__*/react.forwardRef((_ref7, ref) => {
+var FlagListItem = /*#__PURE__*/react.forwardRef((_ref5, ref) => {
   var {
       variant = 'primary',
       showHelpIcon,
       endAction,
       children
-    } = _ref7,
-    rest = _objectWithoutProperties(_ref7, _excluded$7);
+    } = _ref5,
+    rest = _objectWithoutProperties(_ref5, _excluded$7);
   return /*#__PURE__*/jsxRuntime.jsxs(BannerListContainer, _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref,
-    $variant: variant,
     children: [/*#__PURE__*/jsxRuntime.jsxs(Content, {
       children: [/*#__PURE__*/jsxRuntime.jsx(IconContainer, {
-        children: variant === 'danger' ? /*#__PURE__*/jsxRuntime.jsx(icons.Error, {}) : variant === 'warning' ? /*#__PURE__*/jsxRuntime.jsx(icons.Warning, {}) : /*#__PURE__*/jsxRuntime.jsx(icons.Flag, {})
+        children: variant === 'danger' ? /*#__PURE__*/jsxRuntime.jsx(icons.Error, {
+          htmlColor: ui.ColorDynamic.Red300
+        }) : variant === 'warning' ? /*#__PURE__*/jsxRuntime.jsx(icons.Warning, {
+          htmlColor: ui.ColorDynamic.Yellow300
+        }) : /*#__PURE__*/jsxRuntime.jsx(icons.Flag, {})
       }), children, /*#__PURE__*/jsxRuntime.jsx(HelpIcon, {
         children: showHelpIcon && /*#__PURE__*/jsxRuntime.jsx(icons.Help, {})
       })]
@@ -1498,19 +1490,28 @@ function NavbarAccordion(_ref2) {
     icon,
     gutter,
     items,
-    onClick: _onClick
+    onClick: _onClick,
+    isExpanded: controlledIsExpanded,
+    onExpandedChange
   } = _ref2;
   var uid = ui.useUID();
   var {
     setDrawerOpen,
     isNavbarExpanded
   } = useNavbarContext();
-  var [isExpanded, setExpanded] = react.useState(true);
-
-  // sync accordion state with Desktop menu state
+  var [internalIsExpanded, setInternalExpanded] = react.useState(true);
   react.useEffect(() => {
-    setExpanded(isNavbarExpanded);
-  }, [isNavbarExpanded]);
+    if (controlledIsExpanded === undefined) {
+      setInternalExpanded(isNavbarExpanded);
+    }
+  }, [isNavbarExpanded, controlledIsExpanded]);
+  var isExpanded = controlledIsExpanded !== undefined ? controlledIsExpanded : internalIsExpanded;
+  function setExpanded(value) {
+    if (controlledIsExpanded === undefined) {
+      setInternalExpanded(value);
+    }
+    onExpandedChange === null || onExpandedChange === void 0 || onExpandedChange(value);
+  }
   var filteredItems = react.useMemo(() => items.filter(item => !item.hide), [items]);
   return /*#__PURE__*/jsxRuntime.jsxs(NavbarAccordionRoot, {
     square: true,
@@ -1518,8 +1519,8 @@ function NavbarAccordion(_ref2) {
     "aria-labelledby": uid,
     expanded: isExpanded,
     onClick: event => {
-      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
-      if (isNavbarExpanded) {
+      _onClick === null || _onClick === void 0 || _onClick(event);
+      if (controlledIsExpanded !== undefined || isNavbarExpanded) {
         setExpanded(!isExpanded);
       }
     },
@@ -1548,7 +1549,7 @@ function NavbarAccordion(_ref2) {
         onClick: event => {
           var _item$onClick;
           event.stopPropagation();
-          (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+          (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, event);
           if (!event.isDefaultPrevented()) {
             setDrawerOpen(false);
           }
@@ -1672,7 +1673,7 @@ function NavbarList(_ref6) {
           gutter: prev && prev.groupKey !== item.groupKey,
           onClick: event => {
             var _item$onClick;
-            (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+            (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, event);
             if (!event.isDefaultPrevented()) {
               setDrawerOpen(false);
             }
@@ -1701,7 +1702,9 @@ function Navbar(_ref) {
     bottomItems,
     children,
     containerStyle,
-    hasExtraBadge
+    hasExtraBadge,
+    isMenuExpanded: controlledIsMenuExpanded,
+    onMenuExpandedChange
   } = _ref;
   var theme = core.useTheme();
   var [isDrawerOpen, setDrawerOpen] = react.useState(false);
@@ -1710,7 +1713,14 @@ function Navbar(_ref) {
   var matches = core.useMediaQuery(theme.breakpoints.up('md'), {
     noSsr: true
   });
-  var [isMenuExpanded, setMenuExpanded] = react.useState(matches);
+  var [internalIsMenuExpanded, setInternalMenuExpanded] = react.useState(matches);
+  var isMenuExpanded = controlledIsMenuExpanded !== undefined ? controlledIsMenuExpanded : internalIsMenuExpanded;
+  var setMenuExpanded = react.useCallback(value => {
+    if (controlledIsMenuExpanded === undefined) {
+      setInternalMenuExpanded(value);
+    }
+    onMenuExpandedChange === null || onMenuExpandedChange === void 0 || onMenuExpandedChange(value);
+  }, [controlledIsMenuExpanded, onMenuExpandedChange]);
   var hasBadge = hasExtraBadge || items.some(item => item.badge);
   var ctx = react.useMemo(() => ({
     isDrawerOpen,
@@ -1718,7 +1728,7 @@ function Navbar(_ref) {
     setDrawerOpen,
     setMenuExpanded,
     isNavbarExpanded: isMenuExpanded || isDrawerOpen
-  }), [isDrawerOpen, isMenuExpanded, setMenuExpanded, setDrawerOpen]);
+  }), [isDrawerOpen, isMenuExpanded, setDrawerOpen, setMenuExpanded]);
   return /*#__PURE__*/jsxRuntime.jsx(NavbarContext.Provider, {
     value: ctx,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -2169,7 +2179,7 @@ function SidebarBackButton(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(core.IconButton, _objectSpread(_objectSpread({}, props), {}, {
     size: "small",
     onClick: event => {
-      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+      _onClick === null || _onClick === void 0 || _onClick(event);
       if (!event.isDefaultPrevented()) {
         openSidebar();
       }
@@ -2365,7 +2375,7 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
       disabled: disabled,
       "aria-current": selected,
       onClick: event => {
-        _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+        _onClick === null || _onClick === void 0 || _onClick(event);
         if (!event.isDefaultPrevented() && openContentOnClick) {
           openSidebarContent();
         }
@@ -2479,7 +2489,7 @@ var SidebarMenuItemAvatar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
         onMouseDown: stopPropagation,
         onTouchStart: stopPropagation,
         onChange: (_, checked) => {
-          _onChange === null || _onChange === void 0 ? void 0 : _onChange(checked);
+          _onChange === null || _onChange === void 0 || _onChange(checked);
         }
       })
     });
@@ -2544,6 +2554,8 @@ exports.FlagListItem = FlagListItem;
 exports.LinkedText = LinkedText;
 exports.MultilineText = MultilineText;
 exports.Navbar = Navbar;
+exports.NavbarAccordion = NavbarAccordion;
+exports.NavbarAccordionLabel = NavbarAccordionLabel;
 exports.NavbarAvatar = NavbarAvatar;
 exports.NavbarBadge = NavbarBadge;
 exports.NavbarBottomBar = NavbarBottomBar;