@elliemae/ds-left-navigation 2.2.0-next.3 → 2.3.0-alpha.1

package/cjs/parts/LeftNavContentWithScrollbar/index.js

@@ -1,91 +1,101 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var React = require('react');
-require('overlayscrollbars/css/OverlayScrollbars.css');
-var OverlayScrollbars = require('overlayscrollbars');
-var styled = require('styled-components');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var OverlayScrollbars__default = /*#__PURE__*/_interopDefaultLegacy(OverlayScrollbars);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _div, _div2, _div3, _div4;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var LeftNavContentWithScrollbar_exports = {};
+__export(LeftNavContentWithScrollbar_exports, {
+  LeftNavContentWithScrollbar: () => LeftNavContentWithScrollbar
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_OverlayScrollbars = require("overlayscrollbars/css/OverlayScrollbars.css");
+var import_overlayscrollbars = __toESM(require("overlayscrollbars"));
+var import_styled_components = __toESM(require("styled-components"));
+const StyledHandle = import_styled_components.default.div`
+  width: 6px;
+  border: 1px solid rgba(0, 0, 0, 0);
+  background-color: rgba(105, 116, 137, 0.5) !important;
+  border-radius: 7px;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  :hover {
+    background-color: rgba(105, 116, 137, 0.7) !important;
+  }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const StyledHandle = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-yn7jj3-0"
-})(["width:6px;border:1px solid rgba(0,0,0,0);background-color:rgba(105,116,137,0.5) !important;border-radius:7px;:hover{background-color:rgba(105,116,137,0.7) !important;}:active{background-color:rgba(105,116,137,0.7) !important;}"]);
+  :active {
+    background-color: rgba(105, 116, 137, 0.7) !important;
+  }
+`;
 const options = {
-  className: 'os-theme-dark',
+  className: "os-theme-dark",
   scrollbars: {
-    autoHide: 'leave',
+    autoHide: "leave",
     autoHideDelay: 0
   }
 };
-const LeftNavContentWithScrollbar = props => {
-  const {
-    children
-  } = props;
-  const inheritBoxShadow = {
-    boxShadow: 'inherit'
-  };
-  const [osInstance, setOsInstance] = React.useState();
-  const osTargetRef = React.useRef(null);
-  React.useEffect(() => {
-    const nextOsInstance = OverlayScrollbars__default["default"](osTargetRef.current, options);
+const LeftNavContentWithScrollbar = (props) => {
+  const { children } = props;
+  const inheritBoxShadow = { boxShadow: "inherit" };
+  const [osInstance, setOsInstance] = (0, import_react.useState)();
+  const osTargetRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const nextOsInstance = (0, import_overlayscrollbars.default)(osTargetRef.current, options);
     setOsInstance(nextOsInstance);
   }, [osInstance]);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /* @__PURE__ */ import_react.default.createElement("div", {
     className: "os-host",
-    style: _objectSpread({
-      height: '100%'
-    }, inheritBoxShadow),
+    style: { height: "100%", ...inheritBoxShadow },
     tabIndex: -1,
-    ref: osTargetRef,
-    children: [_div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {
-      className: "os-resize-observer-host"
-    })), /*#__PURE__*/_jsx__default["default"]("div", {
-      className: "os-padding",
-      style: inheritBoxShadow
-    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
-      className: "os-viewport",
-      style: inheritBoxShadow
-    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
-      className: "os-content",
-      style: inheritBoxShadow,
-      "aria-hidden": true
-    }, void 0, children))), _div2 || (_div2 = /*#__PURE__*/_jsx__default["default"]("div", {
-      className: "os-scrollbar os-scrollbar-horizontal "
-    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
-      className: "os-scrollbar-track"
-    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
-      className: "os-scrollbar-handle"
-    })))), _div3 || (_div3 = /*#__PURE__*/_jsx__default["default"]("div", {
-      className: "os-scrollbar os-scrollbar-vertical"
-    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
-      className: "os-scrollbar-track"
-    }, void 0, /*#__PURE__*/_jsx__default["default"](StyledHandle, {
-      className: "os-scrollbar-handle"
-    })))), _div4 || (_div4 = /*#__PURE__*/_jsx__default["default"]("div", {
-      className: "os-scrollbar-corner"
-    }))]
-  });
+    ref: osTargetRef
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "os-resize-observer-host"
+  }), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "os-padding",
+    style: inheritBoxShadow
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "os-viewport",
+    style: inheritBoxShadow
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "os-content",
+    style: inheritBoxShadow,
+    "aria-hidden": true
+  }, children))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "os-scrollbar os-scrollbar-horizontal "
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "os-scrollbar-track"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "os-scrollbar-handle"
+  }))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "os-scrollbar os-scrollbar-vertical"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "os-scrollbar-track"
+  }, /* @__PURE__ */ import_react.default.createElement(StyledHandle, {
+    className: "os-scrollbar-handle"
+  }))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "os-scrollbar-corner"
+  }));
 };
-
-exports.LeftNavContentWithScrollbar = LeftNavContentWithScrollbar;
+module.exports = __toCommonJS(LeftNavContentWithScrollbar_exports);
+//# sourceMappingURL=index.js.map

package/cjs/parts/LeftNavContentWithScrollbar/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/LeftNavContentWithScrollbar/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useEffect, useRef, useState } from 'react';\nimport 'overlayscrollbars/css/OverlayScrollbars.css';\nimport OverlayScrollbars, { Options } from 'overlayscrollbars';\nimport styled from 'styled-components';\n\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n}\n\nconst StyledHandle = styled.div`\n  width: 6px;\n  border: 1px solid rgba(0, 0, 0, 0);\n  background-color: rgba(105, 116, 137, 0.5) !important;\n  border-radius: 7px;\n\n  :hover {\n    background-color: rgba(105, 116, 137, 0.7) !important;\n  }\n\n  :active {\n    background-color: rgba(105, 116, 137, 0.7) !important;\n  }\n`;\n\nconst options: Options = {\n  className: 'os-theme-dark',\n  scrollbars: {\n    autoHide: 'leave',\n    autoHideDelay: 0,\n  },\n};\n\nexport const LeftNavContentWithScrollbar: React.ComponentType<OverlayScrollbarsComponentProps> = (props) => {\n  const { children } = props;\n\n  const inheritBoxShadow = { boxShadow: 'inherit' };\n  const [osInstance, setOsInstance] = useState<OverlayScrollbars>();\n  const osTargetRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const nextOsInstance: OverlayScrollbars = OverlayScrollbars(osTargetRef.current, options);\n    setOsInstance(nextOsInstance);\n  }, [osInstance]);\n\n  return (\n    <div className=\"os-host\" style={{ height: '100%', ...inheritBoxShadow }} tabIndex={-1} ref={osTargetRef}>\n      <div className=\"os-resize-observer-host\" />\n      <div className=\"os-padding\" style={inheritBoxShadow}>\n        <div className=\"os-viewport\" style={inheritBoxShadow}>\n          <div className=\"os-content\" style={inheritBoxShadow} aria-hidden>\n            {children}\n          </div>\n        </div>\n      </div>\n      <div className=\"os-scrollbar os-scrollbar-horizontal \">\n        <div className=\"os-scrollbar-track\">\n          <div className=\"os-scrollbar-handle\" />\n        </div>\n      </div>\n      <div className=\"os-scrollbar os-scrollbar-vertical\">\n        <div className=\"os-scrollbar-track\">\n          <StyledHandle className=\"os-scrollbar-handle\"></StyledHandle>\n        </div>\n      </div>\n      <div className=\"os-scrollbar-corner\" />\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmD;AACnD,+BAAO;AACP,+BAA2C;AAC3C,+BAAmB;AAMnB,MAAM,eAAe,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe5B,MAAM,UAAmB;AAAA,EACvB,WAAW;AAAA,EACX,YAAY;AAAA,IACV,UAAU;AAAA,IACV,eAAe;AAAA;AAAA;AAIZ,MAAM,8BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,aAAa;AAErB,QAAM,mBAAmB,EAAE,WAAW;AACtC,QAAM,CAAC,YAAY,iBAAiB;AACpC,QAAM,cAAc,yBAAuB;AAE3C,8BAAU,MAAM;AACd,UAAM,iBAAoC,sCAAkB,YAAY,SAAS;AACjF,kBAAc;AAAA,KACb,CAAC;AAEJ,SACE,mDAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IAAU,OAAO,EAAE,QAAQ,WAAW;AAAA,IAAoB,UAAU;AAAA,IAAI,KAAK;AAAA,KAC1F,mDAAC,OAAD;AAAA,IAAK,WAAU;AAAA,MACf,mDAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IAAa,OAAO;AAAA,KACjC,mDAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IAAc,OAAO;AAAA,KAClC,mDAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IAAa,OAAO;AAAA,IAAkB,eAAW;AAAA,KAC7D,aAIP,mDAAC,OAAD;AAAA,IAAK,WAAU;AAAA,KACb,mDAAC,OAAD;AAAA,IAAK,WAAU;AAAA,KACb,mDAAC,OAAD;AAAA,IAAK,WAAU;AAAA,QAGnB,mDAAC,OAAD;AAAA,IAAK,WAAU;AAAA,KACb,mDAAC,OAAD;AAAA,IAAK,WAAU;AAAA,KACb,mDAAC,cAAD;AAAA,IAAc,WAAU;AAAA,QAG5B,mDAAC,OAAD;AAAA,IAAK,WAAU;AAAA;AAAA;",
+  "names": []
+}

package/cjs/parts/LeftNavFooterItem/index.js

@@ -1,43 +1,57 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-var React = require('react');
-var dsIcons = require('@elliemae/ds-icons');
-var Grid = require('@elliemae/ds-grid');
-var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
-var styled = require('./styled.js');
-var LeftNavigationContext = require('../../LeftNavigationContext.js');
-var useKeyboardNavigation = require('../../hooks/useKeyboardNavigation.js');
-var constants = require('../../exported-related/constants.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
-
-var _StyledSeparator;
-const LeftNavFooterItem = props => {
-  const {
-    footerLabel,
-    onFooterExpand = () => null,
-    onFooterClose = () => null
-  } = props;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var LeftNavFooterItem_exports = {};
+__export(LeftNavFooterItem_exports, {
+  LeftNavFooterItem: () => LeftNavFooterItem,
+  default: () => LeftNavFooterItem_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_react_desc = require("react-desc");
+var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
+var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
+var import_styled = require("./styled");
+var import_hooks = require("../../hooks");
+var import_LeftNavigationContext = __toESM(require("../../LeftNavigationContext"));
+var import_constants = require("../../exported-related/constants");
+const LeftNavFooterItem = (props) => {
+  const { footerLabel, onFooterExpand = () => null, onFooterClose = () => null } = props;
   const {
-    leftNavProps: {
-      labelOverflow,
-      openedItem
-    },
+    leftNavProps: { labelOverflow, openedItem },
     expandedForAnimation,
     setSelectedItem,
     setFocusedItem,
     visibleItemsRefs
-  } = React.useContext(LeftNavigationContext.LeftNavContext);
-  const id = constants.FOOTER_DS_ID;
+  } = (0, import_react.useContext)(import_LeftNavigationContext.default);
+  const id = import_constants.FOOTER_DS_ID;
   const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;
-  const onKeyDown = useKeyboardNavigation.useKeyboardNavigation({
+  const onKeyDown = (0, import_hooks.useKeyboardNavigation)({
     item: {
       dsId: id,
       itemOpts: {
@@ -48,61 +62,64 @@ const LeftNavFooterItem = props => {
     },
     onClick: handleOnClick
   });
-  return /*#__PURE__*/_jsx__default["default"](styled.StyledFooterMenu, {
+  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledFooterMenu, {
+    key: id,
     "data-testid": "leftnav-container"
-  }, id, /*#__PURE__*/_jsx__default["default"](styled.StyledItemWrapper, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledItem, {
+  }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledItemWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledItem, {
     ref: visibleItemsRefs.current[id],
     tabIndex: expandedForAnimation ? -1 : 0,
     expanded: expandedForAnimation,
     pt: "xxs2",
-    height: expandedForAnimation ? 'auto' : '48px',
+    height: expandedForAnimation ? "auto" : "48px",
     alignItems: "flex-start",
     pl: "xxs",
-    cols: expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px'],
+    cols: expandedForAnimation ? ["auto", "1fr", "auto"] : ["38px"],
     onClick: expandedForAnimation ? () => null : handleOnClick,
-    onKeyDown: onKeyDown,
+    onKeyDown,
     onFocus: () => setFocusedItem(id),
     "data-testid": "leftnav-item-container",
     role: "menuitem",
-    "aria-label": expandedForAnimation ? "Footer, ".concat(footerLabel) : "Expand left navigation",
-    children: !expandedForAnimation ? /*#__PURE__*/_jsx__default["default"](dsIcons.MenuExpand, {
-      size: "m",
-      color: ['brand-primary', 800],
-      "data-testid": "leftnav-footer-btn"
-    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/_jsx__default["default"](styled.StyledLabel, {
-        mt: "5px",
-        mr: "12px",
-        mb: "16px",
-        "data-testid": "leftnav-itemlabel",
-        labelOverflow: labelOverflow,
-        "aria-live": "polite"
-      }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-        value: footerLabel,
-        placement: "bottom-start"
-      }) : footerLabel), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](styled.StyledSeparator, {
-        mt: "xxxs"
-      })), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
-        m: "0 12px"
-      }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledMenuCollapse, {
-        size: "m",
-        color: ['brand-primary', 800],
-        onClick: e => {
-          e.stopPropagation();
-          handleOnClick(e);
-        },
-        "data-testid": "leftnav-footer-btn",
-        tabIndex: 0,
-        onFocus: e => {
-          e.stopPropagation();
-          setFocusedItem(constants.FOOTER_MENU_CLOSE_DS_ID);
-        },
-        role: "button",
-        "aria-label": "Collapse left navigation"
-      }))]
-    })
-  })));
+    "aria-label": expandedForAnimation ? `Footer, ${footerLabel}` : `Expand left navigation`
+  }, !expandedForAnimation ? /* @__PURE__ */ import_react.default.createElement(import_ds_icons.MenuExpand, {
+    size: "m",
+    color: ["brand-primary", 800],
+    "data-testid": "leftnav-footer-btn"
+  }) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledLabel, {
+    mt: "5px",
+    mr: "12px",
+    mb: "16px",
+    "data-testid": "leftnav-itemlabel",
+    labelOverflow,
+    "aria-live": "polite"
+  }, labelOverflow === "truncate" ? /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
+    value: footerLabel,
+    placement: "bottom-start"
+  }) : footerLabel), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledSeparator, {
+    mt: "xxxs"
+  }), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.default, {
+    m: "0 12px"
+  }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledMenuCollapse, {
+    size: "m",
+    color: ["brand-primary", 800],
+    onClick: (e) => {
+      e.stopPropagation();
+      handleOnClick(e);
+    },
+    "data-testid": "leftnav-footer-btn",
+    tabIndex: 0,
+    onFocus: (e) => {
+      e.stopPropagation();
+      setFocusedItem(import_constants.FOOTER_MENU_CLOSE_DS_ID);
+    },
+    role: "button",
+    "aria-label": "Collapse left navigation"
+  }))))));
+};
+LeftNavFooterItem.propTypes = {
+  footerLabel: import_react_desc.PropTypes.any,
+  onFooterExpand: import_react_desc.PropTypes.func,
+  onFooterClose: import_react_desc.PropTypes.func
 };
-
-exports.LeftNavFooterItem = LeftNavFooterItem;
-exports["default"] = LeftNavFooterItem;
+var LeftNavFooterItem_default = LeftNavFooterItem;
+module.exports = __toCommonJS(LeftNavFooterItem_exports);
+//# sourceMappingURL=index.js.map

package/cjs/parts/LeftNavFooterItem/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/LeftNavFooterItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { MenuExpand } from '@elliemae/ds-icons';\nimport { PropTypes } from 'react-desc';\nimport Grid from '@elliemae/ds-grid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n  StyledFooterMenu,\n  StyledItem,\n  StyledItemWrapper,\n  StyledLabel,\n  StyledSeparator,\n  StyledMenuCollapse,\n} from './styled';\nimport { useKeyboardNavigation } from '../../hooks';\nimport LeftNavigationContext from '../../LeftNavigationContext';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants';\n\ntype LeftNavFooterItemProps = {\n  footerLabel: string | JSX.Element;\n  onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n  onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n  const { footerLabel, onFooterExpand = () => null, onFooterClose = () => null } = props;\n  const {\n    leftNavProps: { labelOverflow, openedItem },\n    expandedForAnimation,\n    setSelectedItem,\n    setFocusedItem,\n    visibleItemsRefs,\n  } = useContext(LeftNavigationContext);\n\n  const id = FOOTER_DS_ID;\n\n  const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;\n\n  const onKeyDown = useKeyboardNavigation({\n    item: {\n      dsId: id,\n      itemOpts: {\n        selectable: !expandedForAnimation,\n        openable: false,\n        closable: false,\n      },\n    },\n    onClick: handleOnClick,\n  });\n\n  return (\n    <StyledFooterMenu key={id} data-testid=\"leftnav-container\">\n      <StyledItemWrapper>\n        <StyledItem\n          ref={visibleItemsRefs.current[id]}\n          tabIndex={expandedForAnimation ? -1 : 0}\n          expanded={expandedForAnimation}\n          pt=\"xxs2\"\n          height={expandedForAnimation ? 'auto' : '48px'}\n          alignItems=\"flex-start\"\n          pl=\"xxs\"\n          cols={expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']}\n          onClick={expandedForAnimation ? () => null : handleOnClick}\n          onKeyDown={onKeyDown}\n          onFocus={() => setFocusedItem(id)}\n          data-testid=\"leftnav-item-container\"\n          role=\"menuitem\"\n          aria-label={expandedForAnimation ? `Footer, ${footerLabel}` : `Expand left navigation`}\n        >\n          {!expandedForAnimation ? (\n            <MenuExpand size=\"m\" color={['brand-primary', 800]} data-testid=\"leftnav-footer-btn\" />\n          ) : (\n            <>\n              <StyledLabel\n                mt=\"5px\"\n                mr=\"12px\"\n                mb=\"16px\"\n                data-testid=\"leftnav-itemlabel\"\n                labelOverflow={labelOverflow}\n                aria-live=\"polite\"\n              >\n                {labelOverflow === 'truncate' ? (\n                  <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />\n                ) : (\n                  footerLabel\n                )}\n              </StyledLabel>\n              <StyledSeparator mt=\"xxxs\" />\n              <Grid m=\"0 12px\">\n                <StyledMenuCollapse\n                  size=\"m\"\n                  color={['brand-primary', 800]}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    handleOnClick(e);\n                  }}\n                  data-testid=\"leftnav-footer-btn\"\n                  tabIndex={0}\n                  onFocus={(e) => {\n                    e.stopPropagation();\n                    setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);\n                  }}\n                  role=\"button\"\n                  aria-label=\"Collapse left navigation\"\n                />\n              </Grid>\n            </>\n          )}\n        </StyledItem>\n      </StyledItemWrapper>\n    </StyledFooterMenu>\n  );\n};\n\nLeftNavFooterItem.propTypes = {\n  footerLabel: PropTypes.any,\n  onFooterExpand: PropTypes.func,\n  onFooterClose: PropTypes.func,\n};\n\nexport default LeftNavFooterItem;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAClC,sBAA2B;AAC3B,wBAA0B;AAC1B,qBAAiB;AACjB,uCAA2C;AAC3C,oBAOO;AACP,mBAAsC;AACtC,mCAAkC;AAClC,uBAAsD;AAQ/C,MAAM,oBAAiE,CAAC,UAAU;AACvF,QAAM,EAAE,aAAa,iBAAiB,MAAM,MAAM,gBAAgB,MAAM,SAAS;AACjF,QAAM;AAAA,IACJ,cAAc,EAAE,eAAe;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,KAAK;AAEX,QAAM,gBAAgB,uBAAuB,gBAAgB;AAE7D,QAAM,YAAY,wCAAsB;AAAA,IACtC,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,QACR,YAAY,CAAC;AAAA,QACb,UAAU;AAAA,QACV,UAAU;AAAA;AAAA;AAAA,IAGd,SAAS;AAAA;AAGX,SACE,mDAAC,gCAAD;AAAA,IAAkB,KAAK;AAAA,IAAI,eAAY;AAAA,KACrC,mDAAC,iCAAD,MACE,mDAAC,0BAAD;AAAA,IACE,KAAK,iBAAiB,QAAQ;AAAA,IAC9B,UAAU,uBAAuB,KAAK;AAAA,IACtC,UAAU;AAAA,IACV,IAAG;AAAA,IACH,QAAQ,uBAAuB,SAAS;AAAA,IACxC,YAAW;AAAA,IACX,IAAG;AAAA,IACH,MAAM,uBAAuB,CAAC,QAAQ,OAAO,UAAU,CAAC;AAAA,IACxD,SAAS,uBAAuB,MAAM,OAAO;AAAA,IAC7C;AAAA,IACA,SAAS,MAAM,eAAe;AAAA,IAC9B,eAAY;AAAA,IACZ,MAAK;AAAA,IACL,cAAY,uBAAuB,WAAW,gBAAgB;AAAA,KAE7D,CAAC,uBACA,mDAAC,4BAAD;AAAA,IAAY,MAAK;AAAA,IAAI,OAAO,CAAC,iBAAiB;AAAA,IAAM,eAAY;AAAA,OAEhE,wFACE,mDAAC,2BAAD;AAAA,IACE,IAAG;AAAA,IACH,IAAG;AAAA,IACH,IAAG;AAAA,IACH,eAAY;AAAA,IACZ;AAAA,IACA,aAAU;AAAA,KAET,kBAAkB,aACjB,mDAAC,6DAAD;AAAA,IAA4B,OAAO;AAAA,IAAa,WAAU;AAAA,OAE1D,cAGJ,mDAAC,+BAAD;AAAA,IAAiB,IAAG;AAAA,MACpB,mDAAC,wBAAD;AAAA,IAAM,GAAE;AAAA,KACN,mDAAC,kCAAD;AAAA,IACE,MAAK;AAAA,IACL,OAAO,CAAC,iBAAiB;AAAA,IACzB,SAAS,CAAC,MAAM;AACd,QAAE;AACF,oBAAc;AAAA;AAAA,IAEhB,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS,CAAC,MAAM;AACd,QAAE;AACF,qBAAe;AAAA;AAAA,IAEjB,MAAK;AAAA,IACL,cAAW;AAAA;AAAA;AAW7B,kBAAkB,YAAY;AAAA,EAC5B,aAAa,4BAAU;AAAA,EACvB,gBAAgB,4BAAU;AAAA,EAC1B,eAAe,4BAAU;AAAA;AAG3B,IAAO,4BAAQ;",
+  "names": []
+}

package/cjs/parts/LeftNavFooterItem/styled.js

@@ -1,39 +1,94 @@
-'use strict';
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledFooterMenu: () => StyledFooterMenu,
+  StyledItem: () => StyledItem,
+  StyledItemWrapper: () => StyledItemWrapper,
+  StyledLabel: () => StyledLabel,
+  StyledMenuCollapse: () => StyledMenuCollapse,
+  StyledSeparator: () => StyledSeparator
+});
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_common = require("../../common");
+const StyledFooterMenu = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  width: 100%;
+  margin-top: auto;
+  background: ${(props) => props.theme.colors.neutral["000"]};
 
-Object.defineProperty(exports, '__esModule', { value: true });
+  ${import_common.getLeftBorderStyle}
 
-var styled = require('styled-components');
-var Grid = require('@elliemae/ds-grid');
-var dsIcons = require('@elliemae/ds-icons');
-var getItemBackgroundStyle = require('../../common/getItemBackgroundStyle.js');
-var getLeftBorderStyle = require('../../common/getLeftBorderStyle.js');
+  border-top: 1px solid ${(props) => props.theme.colors.neutral[100]};
+`;
+const StyledItemWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  position: relative;
+  padding-left: ${(props) => props.theme.space.xxxs};
+`;
+const StyledItem = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  min-height: 48px;
+  cursor: ${(props) => props.expanded ? "auto" : "pointer"};
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+  ${import_common.getItemBackgroundStyle}
 
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+  outline: none;
 
-const StyledFooterMenu = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
-  componentId: "sc-1mcbjxr-0"
-})(["width:100%;margin-top:auto;background:", ";", " border-top:1px solid ", ";"], props => props.theme.colors.neutral['000'], getLeftBorderStyle.getLeftBorderStyle, props => props.theme.colors.neutral[100]);
-const StyledItemWrapper = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
-  componentId: "sc-1mcbjxr-1"
-})(["position:relative;padding-left:", ";"], props => props.theme.space.xxxs);
-const StyledItem = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
-  componentId: "sc-1mcbjxr-2"
-})(["min-height:48px;cursor:", ";", " outline:none;:focus{&:before{content:'';position:absolute;height:100%;width:100%;top:0;left:0px;border:2px solid ", ";pointer-events:none;}}"], props => props.expanded ? 'auto' : 'pointer', getItemBackgroundStyle.getItemBackgroundStyle, props => props.theme.colors.brand[600]);
-const StyledLabel = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
-  componentId: "sc-1mcbjxr-3"
-})(["font-size:11px;color:", ";line-height:14px;word-break:", ";"], props => props.theme.colors.neutral[500], props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
-const StyledSeparator = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
-  componentId: "sc-1mcbjxr-4"
-})(["height:16px;width:1px;background-color:", ";"], props => props.theme.colors.neutral[100]);
-const StyledMenuCollapse = /*#__PURE__*/styled__default["default"](dsIcons.MenuCollapse).withConfig({
-  componentId: "sc-1mcbjxr-5"
-})(["cursor:pointer;:focus{outline:2px solid ", ";}"], props => props.theme.colors.brand[700]);
-
-exports.StyledFooterMenu = StyledFooterMenu;
-exports.StyledItem = StyledItem;
-exports.StyledItemWrapper = StyledItemWrapper;
-exports.StyledLabel = StyledLabel;
-exports.StyledMenuCollapse = StyledMenuCollapse;
-exports.StyledSeparator = StyledSeparator;
+  :focus {
+    &:before {
+      content: '';
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      top: 0;
+      left: 0px;
+      border: 2px solid ${(props) => props.theme.colors.brand[600]};
+      pointer-events: none;
+    }
+  }
+`;
+const StyledLabel = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  font-size: 11px;
+  color: ${(props) => props.theme.colors.neutral[500]};
+  line-height: 14px;
+  word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
+`;
+const StyledSeparator = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  height: 16px;
+  width: 1px;
+  background-color: ${(props) => props.theme.colors.neutral[100]};
+`;
+const StyledMenuCollapse = (0, import_styled_components.default)(import_ds_icons.MenuCollapse)`
+  cursor: pointer;
+  :focus {
+    outline: 2px solid ${(props) => props.theme.colors.brand[700]};
+  }
+`;
+module.exports = __toCommonJS(styled_exports);
+//# sourceMappingURL=styled.js.map

package/cjs/parts/LeftNavFooterItem/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/LeftNavFooterItem/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuCollapse } from '@elliemae/ds-icons';\nimport { getLeftBorderStyle, getItemBackgroundStyle } from '../../common';\n\nexport const StyledFooterMenu = styled(Grid)`\n  width: 100%;\n  margin-top: auto;\n  background: ${(props) => props.theme.colors.neutral['000']};\n\n  ${getLeftBorderStyle}\n\n  border-top: 1px solid ${(props) => props.theme.colors.neutral[100]};\n`;\n\nexport const StyledItemWrapper = styled(Grid)`\n  position: relative;\n  padding-left: ${(props) => props.theme.space.xxxs};\n`;\n\nexport const StyledItem = styled(Grid)`\n  min-height: 48px;\n  cursor: ${(props) => (props.expanded ? 'auto' : 'pointer')};\n\n  ${getItemBackgroundStyle}\n\n  outline: none;\n\n  :focus {\n    &:before {\n      content: '';\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      top: 0;\n      left: 0px;\n      border: 2px solid ${(props) => props.theme.colors.brand[600]};\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledLabel = styled(Grid)`\n  font-size: 11px;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  line-height: 14px;\n  word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledSeparator = styled(Grid)`\n  height: 16px;\n  width: 1px;\n  background-color: ${(props) => props.theme.colors.neutral[100]};\n`;\n\nexport const StyledMenuCollapse = styled(MenuCollapse)`\n  cursor: pointer;\n  :focus {\n    outline: 2px solid ${(props) => props.theme.colors.brand[700]};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,qBAAqB;AACrB,sBAA6B;AAC7B,oBAA2D;AAEpD,MAAM,mBAAmB,sCAAO;AAAA;AAAA;AAAA,gBAGvB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,IAElD;AAAA;AAAA,0BAEsB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGzD,MAAM,oBAAoB,sCAAO;AAAA;AAAA,kBAEtB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGxC,MAAM,aAAa,sCAAO;AAAA;AAAA,YAErB,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA;AAAA,IAE9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYsB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,cAAc,sCAAO;AAAA;AAAA,WAEvB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAEjC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,kBAAkB,sCAAO;AAAA;AAAA;AAAA,sBAGhB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGrD,MAAM,qBAAqB,sCAAO;AAAA;AAAA;AAAA,yBAGhB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;",
+  "names": []
+}