@linzjs/lui 12.2.0 → 13.0.2

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## [13.0.2](https://github.com/linz/lui/compare/v13.0.1...v13.0.2) (2022-01-31)
+
+
+### Bug Fixes
+
+* We now pass consts into LuiLottieLight, Used to pass new object, which caused useEffect to trigger distroy ([#541](https://github.com/linz/lui/issues/541)) ([7db8b0e](https://github.com/linz/lui/commit/7db8b0e903bafe3fb26da2b849f5696a44ecf638))
+
+## [13.0.1](https://github.com/linz/lui/compare/v13.0.0...v13.0.1) (2022-01-31)
+
+
+### Bug Fixes
+
+* handle destroy correctly for lottie ([#539](https://github.com/linz/lui/issues/539)) ([143d0f1](https://github.com/linz/lui/commit/143d0f1692f655e0c18a048d6536e3797dac29c3))
+
+# [13.0.0](https://github.com/linz/lui/compare/v12.2.0...v13.0.0) (2022-01-31)
+
+
+### breaking
+
+* **LuiMenu,LuiControlledMenu:** PR to trigger build ([#535](https://github.com/linz/lui/issues/535)) ([c3f117e](https://github.com/linz/lui/commit/c3f117e42476876742517bddb0515b42d9ab46bf))
+
+
+### BREAKING CHANGES
+
+* **LuiMenu,LuiControlledMenu:** breaking(LuiMenu,LuiControlledMenu) PR to trigger build
+
+This is the breaking change commit for https://github.com/linz/Lui/pull/531
+
+* Update README.md
+
 # [12.2.0](https://github.com/linz/lui/compare/v12.1.4...v12.2.0) (2022-01-20)
 
 

package/README.md

@@ -1,6 +1,6 @@
 # Lui - Linz User Interface
 
-> It's written in CSS and has a React wrapper!
+> It's written in CSS and a React wrapper!!
 >
 > ## You do not need to be using React to use Lui
 >

package/dist/components/LuiLoadingSpinner/LuiLoadingSpinner.stories.d.ts

@@ -6,6 +6,7 @@ declare const _default: {
 };
 export default _default;
 export declare const LoadingSpinner: () => JSX.Element;
+export declare const LoadingSpinnerReRender: () => JSX.Element;
 export declare const MiniSpinner: () => JSX.Element;
 export declare const StatusSpinner: () => JSX.Element;
 export declare const StatusSpinnerLongContent: () => JSX.Element;

package/dist/components/LuiLoadingSpinner/LuiLottieLight.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface LuiLottieLightProps {
+    animationData: any;
+    loop: boolean;
+    autoplay: boolean;
+    rendererSettings: any;
+    style: any;
+}
+/**
+ * Very trivial react wrapper for Lottie-web light.  Using lottie-web directly rather than with `react-lottie` or
+ * `lottie-react` reduces our bundle size and enables use to use lottie-web in light mode.
+ */
+export declare const LuiLottieLight: ({ animationData, style, rendererSettings, autoplay, loop, }: LuiLottieLightProps) => JSX.Element;
+export {};

package/dist/components/LuiMenu/LuiMenu.d.ts

@@ -1,44 +1,12 @@
-import React, { ReactNode } from 'react';
+import { ControlledMenuProps, MenuProps } from '@szhsin/react-menu';
 import '@szhsin/react-menu/dist/index.css';
-interface LuiMenuProps {
-    menuButton: ReactNode;
-    children: ReactNode;
-    /** render the menu in a portal - required if the menu is contained in an absolutely positioned container with overflow settings. Default: false */
-    portal?: boolean;
-    boundingBoxRef?: React.MutableRefObject<HTMLElement | null>;
-    anchorRef?: React.MutableRefObject<HTMLElement | null>;
-}
-interface LuiControlledMenuProps {
-    isOpen: boolean;
-    onClose: () => void;
-    anchorPoint: {
-        x: number;
-        y: number;
-    };
-    children: ReactNode;
-    boundingBoxRef?: React.MutableRefObject<HTMLElement | null>;
-    anchorRef?: React.MutableRefObject<HTMLElement | null>;
-}
-interface LuiMenuItemProps {
-    onClick?: () => void;
-    disabled?: boolean;
-    href?: string | undefined;
-    target?: string | undefined;
-    rel?: string | undefined;
-    children: ReactNode;
-}
-interface LuiMenuHeaderProps {
-    children: ReactNode;
-}
 /**
- * A menu controlled by a user-supplied MenuButton. Open/closed state is managed internally.
+ * A menu controlled by a user-supplied MenuButton. Open/closed state is managed internally. The defaulted style props,
+ * menuClassName and offsetY, can be overridden simply by setting them in the usual way.
  */
-export declare const LuiMenu: (props: LuiMenuProps) => JSX.Element;
+export declare const LuiMenu: (props: MenuProps) => JSX.Element;
 /**
- * A menu with state managed externally. Can be used quite conveniently as a context menu.
+ * A menu with state managed externally. Can be used quite conveniently as a context menu. The defaulted style props,
+ * menuClassName and offsetY, can be overridden simply by setting them in the usual way.
  */
-export declare const LuiControlledMenu: (props: LuiControlledMenuProps) => JSX.Element;
-export declare const LuiMenuItem: (props: LuiMenuItemProps) => JSX.Element;
-export declare const LuiMenuDivider: () => JSX.Element;
-export declare const LuiMenuHeader: (props: LuiMenuHeaderProps) => JSX.Element;
-export {};
+export declare const LuiControlledMenu: (props: ControlledMenuProps) => JSX.Element;

package/dist/components/LuiMenu/LuiMenu.stories.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const MenuTriggeredByLuiButton: () => JSX.Element;
+export declare const MenuWithOverride: () => JSX.Element;
 export declare const MenuWithButtonChange: () => JSX.Element;
 export declare const MenuTriggeredByDotsIcon: () => JSX.Element;
 export declare const MenuWithBoundingBox: () => JSX.Element;

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export * from './components/LuiToastMessage/LuiToastMessage';
 export * from './contexts/LuiMessagingContextProvider';
 export { LuiButtonGroup } from './components/LuiButton/LuiButton';
 export { LuiExpandableBanner } from './components/LuiExpandableBanner/LuiExpandableBanner';
-export { LuiMenu, LuiControlledMenu, LuiMenuItem, LuiMenuDivider, LuiMenuHeader, } from './components/LuiMenu/LuiMenu';
+export { LuiMenu, LuiControlledMenu } from './components/LuiMenu/LuiMenu';
 export { LuiFilterMenu } from './components/LuiFilterMenu/LuiFilterMenu';
 export { LuiTabs, LuiTabsContext } from './components/LuiTabs/LuiTabs';
 export { LuiTab } from './components/LuiTabs/LuiTab/LuiTab';

package/dist/lui.cjs.development.js

@@ -13,7 +13,7 @@ var formik = require('formik');
 var uuid = require('uuid');
 var camelcase = _interopDefault(require('camelcase'));
 var Select = _interopDefault(require('react-select'));
-var Lottie = _interopDefault(require('lottie-react'));
+var lottie = _interopDefault(require('lottie-web/build/player/lottie_light'));
 var CreatableSelect = _interopDefault(require('react-select/creatable'));
 var Modal = _interopDefault(require('react-modal'));
 var reactQuery = require('react-query');
@@ -331,74 +331,26 @@ var LuiExpandableBanner = function LuiExpandableBanner(props) {
 };
 
 /**
- * A menu controlled by a user-supplied MenuButton. Open/closed state is managed internally.
+ * A menu controlled by a user-supplied MenuButton. Open/closed state is managed internally. The defaulted style props,
+ * menuClassName and offsetY, can be overridden simply by setting them in the usual way.
  */
 
 var LuiMenu = function LuiMenu(props) {
-  return React__default.createElement(reactMenu.Menu, {
-    className: "lui-menu",
-    menuButton: props.menuButton,
-    offsetY: 12,
-    portal: props.portal === true,
-    boundingBoxRef: props.boundingBoxRef,
-    anchorRef: props.anchorRef,
-    styles: {
-      zIndex: 10000
-    }
-  }, getMenuItems(props.children));
+  return React__default.createElement(reactMenu.Menu, Object.assign({
+    menuClassName: 'lui-menu',
+    offsetY: 12
+  }, props));
 };
 /**
- * A menu with state managed externally. Can be used quite conveniently as a context menu.
+ * A menu with state managed externally. Can be used quite conveniently as a context menu. The defaulted style props,
+ * menuClassName and offsetY, can be overridden simply by setting them in the usual way.
  */
 
 var LuiControlledMenu = function LuiControlledMenu(props) {
-  return React__default.createElement(reactMenu.ControlledMenu, {
-    className: "lui-menu",
-    anchorPoint: props.anchorPoint,
-    isOpen: props.isOpen,
-    onClose: props.onClose,
-    animation: false,
-    boundingBoxRef: props.boundingBoxRef,
-    anchorRef: props.anchorRef
-  }, getMenuItems(props.children));
-};
-/**
- * Convert the supplied LuiMenuItems into react-menu-compatible MenuItems. An error will be logged if any incompatible
- * children are identified.
- */
-
-var getMenuItems = function getMenuItems(children) {
-  return React__default.Children.map(children, function (child) {
-    if (!child) {
-      return null; // child may be false or undefined if conditional logic has been used to include a LuiMenuItem or not
-    }
-
-    if (React__default.isValidElement(child) && child.type === LuiMenuItem) {
-      return React__default.createElement(reactMenu.MenuItem, Object.assign({}, child.props));
-    } else if (React__default.isValidElement(child) && child.type === LuiMenuDivider) {
-      return React__default.createElement(reactMenu.MenuDivider, null);
-    } else if (React__default.isValidElement(child) && child.type === LuiMenuHeader) {
-      return React__default.createElement(reactMenu.MenuHeader, null, child.props.children);
-    }
-
-    console.error('A child of LuiMenu may only be a LuiMenuItem');
-    return null;
-  });
-};
-
-var LuiMenuItem = function LuiMenuItem( // @ts-ignore
-props) {
-  // This component is never actually rendered
-  return React__default.createElement(React__default.Fragment, null);
-};
-var LuiMenuDivider = function LuiMenuDivider() {
-  // This component is never actually rendered
-  return React__default.createElement(React__default.Fragment, null);
-};
-var LuiMenuHeader = function LuiMenuHeader( // @ts-ignore
-props) {
-  // This component is never actually rendered
-  return React__default.createElement(React__default.Fragment, null);
+  return React__default.createElement(reactMenu.ControlledMenu, Object.assign({
+    menuClassName: 'lui-menu',
+    offsetY: 12
+  }, props));
 };
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -470,14 +422,13 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["closeMenu", "openMenu", "toggleMenu"];
+var _excluded = ["toggleMenu"];
 var LuiFilterMenu = function LuiFilterMenu(props) {
   var _useState = React.useState(''),
       filter = _useState[0],
       setFilter = _useState[1];
 
   var _useMenuState = reactMenu.useMenuState(),
-      closeMenu = _useMenuState.closeMenu,
       toggleMenu = _useMenuState.toggleMenu,
       menuProps = _objectWithoutPropertiesLoose(_useMenuState, _excluded);
 
@@ -488,7 +439,7 @@ var LuiFilterMenu = function LuiFilterMenu(props) {
     switch (props.enabled) {
       case false:
         {
-          closeMenu();
+          toggleMenu(false);
           break;
         }
 
@@ -501,14 +452,14 @@ var LuiFilterMenu = function LuiFilterMenu(props) {
   }), React__default.createElement(reactMenu.ControlledMenu, Object.assign({}, menuProps, {
     anchorRef: ref,
     onClose: function onClose() {
-      return closeMenu();
+      return toggleMenu(false);
     },
     className: "lui-menu",
     offsetY: 12,
     onChange: function onChange(e) {
       e.open && setFilter('');
     },
-    styles: props.maxRows !== undefined ? {
+    menuStyles: props.maxRows !== undefined ? {
       maxHeight: 62 + 34 * props.maxRows,
       overflowY: 'auto'
     } : {}
@@ -18019,7 +17970,50 @@ var loaderDataChristmas = {
 	markers: markers$2
 };
 
+/**
+ * Very trivial react wrapper for Lottie-web light.  Using lottie-web directly rather than with `react-lottie` or
+ * `lottie-react` reduces our bundle size and enables use to use lottie-web in light mode.
+ */
+
+var LuiLottieLight = function LuiLottieLight(_ref) {
+  var animationData = _ref.animationData,
+      style = _ref.style,
+      rendererSettings = _ref.rendererSettings,
+      autoplay = _ref.autoplay,
+      loop = _ref.loop;
+  var element = React__default.useRef(null);
+  var lottieInstance = React__default.useRef();
+  React__default.useEffect(function () {
+    if (element.current) {
+      lottieInstance.current = lottie.loadAnimation({
+        animationData: animationData,
+        container: element.current,
+        rendererSettings: rendererSettings,
+        autoplay: autoplay,
+        loop: loop
+      });
+    }
+
+    return function () {
+      var _lottieInstance$curre;
+
+      (_lottieInstance$curre = lottieInstance.current) == null ? void 0 : _lottieInstance$curre.destroy();
+    };
+  }, [animationData, autoplay, loop, rendererSettings]);
+  return React__default.createElement("div", {
+    style: style,
+    ref: element
+  });
+};
+
 var autoplay = ! /*#__PURE__*/isChromatic();
+var style = {
+  height: 148,
+  width: 148
+};
+var renderSettings = {
+  preserveAspectRatio: 'xMidYMid slice'
+};
 
 var LuiLoadingSpinnerBase = function LuiLoadingSpinnerBase(props) {
   return React__default.createElement("div", {
@@ -18032,17 +18026,12 @@ var LuiLoadingSpinnerBase = function LuiLoadingSpinnerBase(props) {
       marginTop: '-74px'
     },
     "data-testid": "loading-spinner"
-  }, React__default.createElement(Lottie, {
+  }, React__default.createElement(LuiLottieLight, {
     animationData: props.animationData,
     loop: true,
     autoplay: autoplay,
-    rendererSettings: {
-      preserveAspectRatio: 'xMidYMid slice'
-    },
-    style: {
-      height: 148,
-      width: 148
-    }
+    rendererSettings: renderSettings,
+    style: style
   }));
 };
 /**
@@ -18069,7 +18058,7 @@ var LuiStatusSpinner = function LuiStatusSpinner(props) {
   }, props.children)));
 };
 var LuiMiniSpinner = function LuiMiniSpinner(props) {
-  return React__default.createElement("div", Object.assign({}, props.divProps), React__default.createElement(Lottie, {
+  return React__default.createElement("div", Object.assign({}, props.divProps), React__default.createElement(LuiLottieLight, {
     animationData: loaderData,
     loop: true,
     autoplay: autoplay,
@@ -20511,9 +20500,6 @@ exports.LuiLoadingSpinnerChristmas = LuiLoadingSpinnerChristmas;
 exports.LuiLoadingSpinnerEaster = LuiLoadingSpinnerEaster;
 exports.LuiMenu = LuiMenu;
 exports.LuiMenuCloseButton = LuiMenuCloseButton;
-exports.LuiMenuDivider = LuiMenuDivider;
-exports.LuiMenuHeader = LuiMenuHeader;
-exports.LuiMenuItem = LuiMenuItem;
 exports.LuiMessagingContextProvider = LuiMessagingContextProvider;
 exports.LuiMiniSpinner = LuiMiniSpinner;
 exports.LuiModal = LuiModal;