@pareto-engineering/design-system 3.0.0-alpha.29 → 4.0.0-alpha.4

package/.storybook/main.js

@@ -1,70 +1,32 @@
-const path=require('path')
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+import webpackFinal from './webpackFinal'
 
-const localImages = path.resolve(__dirname,"../src/assets/images")
-const imagesFromAssetsPackage = path.resolve(__dirname,"../../../node_modules/@pareto-engineering/assets/images")
-const fonts = path.resolve(__dirname,"../../../node_modules/@pareto-engineering/assets/fonts")
-
-module.exports = {
-   webpackFinal: async (config, { configType }) => {
-    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-    // You can change the configuration based on that.
-    // 'PRODUCTION' is used when building the static version of storybook.
-
-    // Make whatever fine-grained changes you need
-    config.resolve.roots = [fonts, localImages, imagesFromAssetsPackage]
-    config.module.rules.push({
-      test: /\.scss$/,
-      use: [
-        'style-loader',
-        {
-          loader: 'css-loader',
-          options: {
-            //modules:{
-            //  mode:'global',
-            //},
-            //localIdentName:"[name]__hello_[local]__[hash:base64:5]"
-          },
-        },
-        {
-          loader:'sass-loader',
-          options: {
-            sassOptions: {
-              includePaths: [
-                //path.resolve(__dirname, '../node_modules'), // Already default
-                path.resolve(__dirname, '../src')
-              ]
-            }
-          }
-        }
-    ],
-      include: path.resolve(__dirname, '../..')
-    });
-
-    // Return the altered config
-    return config;
-  },
-
-  "stories": [
-    "../src/stories/**/*.stories.mdx",
-    "../src/stories/**/*.stories.@(js|jsx|ts|tsx)"
+const config = {
+  webpackFinal,
+  staticDirs:[
+    '../../../node_modules/@pareto-engineering/assets/images',
+    '../../../node_modules/@pareto-engineering/assets/fonts',
+  ],
+  stories:[
+    '../src/stories/**/*.mdx',
+    '../src/stories/**/*.stories.@(js|jsx|ts|tsx)',
   ],
-  "addons": [
-    "@storybook/addon-links",
-     {
-      name: '@storybook/addon-essentials',
-      options: {
-        backgrounds: false,
-      }
-    },
-    'storybook-addon-themes'
+  addons:[
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    //'@storybook/addon-interactions',
+    //'storybook-addon-themes',
   ],
-  core: {
-    builder: 'webpack5',
+  framework:{
+    name   :'@storybook/react-webpack5',
+    options:{},
   },
-  reactOptions: {
-    fastRefresh: true,
+  docs:{
+    autodocs:true,
+    //autodocs:'tag',
   },
-  features: {
-    previewMdx2: true
+  core:{
+    disableTelemetry:true, // 👈 Disables telemetry
   },
 }
+export default config

package/.storybook/preview.js

@@ -1,11 +1,28 @@
-import '../src/local.scss'
-import '@pareto-engineering/styles/dist/main.min.css'
+/** @type { import('@storybook/react').Preview } */
+// import '../src/local.scss'
+// import '@pareto-engineering/styles'
+// Same as
+import '@pareto-engineering/styles/dist/main.css'
 
-export const parameters = {
-  layout:'fullscreen',
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  themes: [
-    { name: 'Colorscheme Light', class: 'ui-light', color: '#EFEFEF', default: true },
-    { name: 'Colorscheme Dark', class: 'ui-dark', color: '#121212' }
-  ],
+const preview = {
+  parameters:{
+    backgrounds:{
+      default:'light',
+    },
+    actions :{ argTypesRegex: '^on[A-Z].*' },
+    controls:{
+      matchers:{
+        color:/(background|color)$/i,
+        date :/Date$/,
+      },
+    },
+    themes:[
+      {
+        name:'Light', class:'ui-light', color:'#EFEFEF', default:true,
+      },
+      { name: 'Dark', class: 'ui-dark', color: '#121212' },
+    ],
+  },
 }
+
+export default preview

package/.storybook/webpackFinal.js

@@ -0,0 +1,68 @@
+import path from 'path'
+
+/* We want to stop webpack from loading the fonts (.woff, etc)
+ * This fonts are embedded in the imported css file, but it makes no sense
+ * that webpack processes them. Instead, we will simply provide the right 
+ * static path to storybook to have them loaded by the client.
+ */
+const patchCssLoader = (rules) => {
+  // We find the css rule
+  const cssRule = rules.find(rule => {
+    return rule.test?.test('.css')
+  })
+  //  console.log(cssRule)
+
+  // We find the `css-loader` configuration object
+  const cssLoaderConfig = cssRule.use.find(({ loader }) => {
+    return loader?.includes('css-loader')
+  })
+  // console.log(cssLoaderConfig)
+
+  // We patch it for it not to load external resources
+  cssLoaderConfig.options.url = false
+  console.log('info => Patched CSS loader with { url:false }')
+}
+
+export default async (config, { configType }) => {
+  // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+  // You can change the configuration based on that.
+  // 'PRODUCTION' is used when building the static version of storybook.
+
+  // Make whatever fine-grained changes you need
+  config.resolve.roots = [
+    path.resolve(__dirname, '../../../node_modules/@pareto-engineering/assets/fonts'),
+    path.resolve(__dirname, '../../../node_modules/@pareto-engineering/assets/images')
+  ]
+  //config.resolve.alias.react = path.resolve(__dirname, '../node_modules/react')
+  // patchCssLoader(config.module.rules)
+  config.module.rules.push({
+    test:/\.scss$/,
+    use :[
+      'style-loader',
+      {
+        loader :'css-loader',
+        options:{
+          url    :false,
+          modules:{
+            // We only activate CSS modules for the file containing the BEM rules
+            auto:(resourcePath) => resourcePath.includes('bem/exports.scss'),
+          },
+        },
+      },
+      {
+        loader :'sass-loader',
+        options:{
+          sassOptions:{
+            includePaths:[
+              // path.resolve(__dirname, '../node_modules'), // Already default
+              path.resolve(__dirname, '../src'),
+            ],
+          },
+        },
+      },
+    ],
+    include:path.resolve(__dirname, '../..'),
+  })
+
+  return config
+}

package/babel.config.js

@@ -2,21 +2,32 @@
 //
 
 module.exports = function (api) {
-  // api.cache(false)
   // var isProd = api.cache(() => process.env.NODE_ENV === 'production')
-  const isCjs = api.cache(() => process.env.COMPILE_ENV === 'cjs')
-  const isEs = api.cache(() => process.env.COMPILE_ENV === 'es')
-  const isTest = api.env('test')
+  const isCjs = api.cache(() => process.env.TARGET === 'cjs')
+  const isEs = api.cache(() => process.env.TARGET === 'es')
 
-  const modules = isEs ? false : 'commonjs'
+  let modules; let targets; let
+    moduleResolverRoots
 
-  const targets = isTest
-    ? { node: '12' }
-    : isCjs
-      ? { esmodules: true }
-      : undefined
+  // If we are compiling for common JS
+  if (isCjs) {
+    modules = 'commonjs'
+    targets = 'defaults'
+    moduleResolverRoots = ['./src']
+  }
+
+  // If we are compiling for ES
+  else if (isEs) {
+    modules = false
+    targets = { chrome: '111' }
+    moduleResolverRoots = ['./src']
+  }
 
-  // { browsers: '>0.35%, not ie' }
+  // If we are simply running the storybook
+  else {
+    targets = { chrome: '100' }
+    moduleResolverRoots = ['./src', './']
+  }
 
   const presets = [
     [
@@ -24,53 +35,19 @@ module.exports = function (api) {
       {
         modules,
         targets,
-        //        debug:true,
+        // debug:true,
       },
     ],
     '@babel/preset-react',
   ]
+
   const plugins = [
     'relay',
     ['module-resolver', {
-      root:['./src'],
-    }],
-    ['@babel/plugin-proposal-private-property-in-object', { loose: true }], // This is to silence a warning after upgrading storybook to 6.2.9
-    ['@babel/plugin-proposal-class-properties', { loose: true }],
-    ['@babel/plugin-proposal-private-methods', { loose: true }],
-
-    // ['@babel/plugin-proposal-class-properties', { 'loose': true }],
-    /* ['babel-plugin-inline-import', {
-      'extensions':[
-        '.html',
-        '.graphql',
-        '.gql'
-      ]}], */
-    /*
-    ['transform-react-remove-prop-types', {
-      'mode':'wrap',
+      root:moduleResolverRoots,
     }],
-    */
-    // ['add-module-exports'],
-
   ]
 
-  /* We comment out this part because it's probably better to remove the proptypes in the final react app instead of in the compilation process
-  if(isEs || isCjs) { plugins.push(
-    [
-      'transform-react-remove-prop-types',
-      {
-        removeImport:true
-      },
-    ],
-  )}
-	*/
-
-  /* const env = { //UNUSED (??)
-    'production': {
-      'plugins': ['transform-react-remove-prop-types']
-    }
-	} */
-
   return {
     presets,
     plugins,

package/dist/cjs/a/AppContext/Context.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var _default = /*#__PURE__*/React.createContext({});
 exports.default = _default;

package/dist/cjs/a/AppContext/ContextProvider.js

@@ -9,40 +9,44 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 var _Context = _interopRequireDefault(require("./Context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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; }
-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(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; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/* @pareto-engineering/generator-front 0.2.3 */
+
+// Package-level Imports
+
 // Component-level imports
 
 // Helper Definitions
 
-var reducer = (state, action) => {
+const reducer = (state, action) => {
   switch (action.type) {
     case 'UPDATE_STATE':
-      return _objectSpread(_objectSpread({}, state), action.payload);
+      return {
+        ...state,
+        ...action.payload
+      };
     default:
       return state;
   }
 };
-var AppContextProvider = _ref => {
-  var {
+const AppContextProvider = _ref => {
+  let {
     children,
     initialTheme,
     config,
     initialState
     // ...otherProps
   } = _ref;
-  var theme = (0, _useTheme.default)(initialTheme);
-  var [state, dispatch] = (0, React.useReducer)(reducer, initialState);
+  const theme = (0, _useTheme.default)(initialTheme);
+  const [state, dispatch] = (0, React.useReducer)(reducer, initialState);
   return /*#__PURE__*/React.createElement(_Context.default.Provider, {
-    value: _objectSpread(_objectSpread({
+    value: {
       state,
-      dispatch
-    }, config), theme)
+      dispatch,
+      ...config,
+      ...theme
+    }
   }, children);
 };
 AppContextProvider.propTypes = {

package/dist/cjs/a/AppContext/index.js

@@ -5,25 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "AppContext", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Context.default;
   }
 });
 Object.defineProperty(exports, "AppContextProvider", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _ContextProvider.default;
   }
 });
 Object.defineProperty(exports, "useApp", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useApp.default;
   }
 });
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useTheme.default;
   }
 });

package/dist/cjs/a/AppContext/useTheme.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _default = function _default(initialTheme) {
-  var storageKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'theme';
-  var isClient = typeof window === 'object';
-  var [preferredTheme, setPreferredTheme] = (0, _react.useState)(initialTheme);
-  var [userTheme, setUserTheme] = (0, _react.useState)();
+  let storageKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'theme';
+  const isClient = typeof window === 'object';
+  const [preferredTheme, setPreferredTheme] = (0, _react.useState)(initialTheme);
+  const [userTheme, setUserTheme] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
-    var storage = window.localStorage;
+    const storage = window.localStorage;
     if (isClient) {
-      var storedTheme = window.localStorage.getItem(storageKey);
+      const storedTheme = window.localStorage.getItem(storageKey);
       // console.log(storedTheme, storedTheme != userTheme)
       if (storedTheme && storedTheme !== userTheme) {
         // console.warn('Theme load')
@@ -32,7 +32,7 @@ var _default = function _default(initialTheme) {
       setUserTheme('light');
     }
   }, [preferredTheme, isClient]);
-  var isTheme = (0, _react.useCallback)(theme => userTheme === theme || undefined, [userTheme]);
+  const isTheme = (0, _react.useCallback)(theme => userTheme === theme || undefined, [userTheme]);
   return {
     userTheme,
     preferredTheme,

package/dist/cjs/a/ContentTree/ContentTree.js

@@ -9,16 +9,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 var _common = require("./common");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var baseClassName = _exports.default.base;
-var componentClassName = 'content-tree';
+const baseClassName = _exports.default.base;
+const componentClassName = 'content-tree';
 
 /**
  * This is the component description.
  */
-var ContentTree = _ref => {
-  var {
+const ContentTree = _ref => {
+  let {
     id,
     className: userClassName,
     style,
@@ -29,7 +29,7 @@ var ContentTree = _ref => {
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  var contentTree = (0, _common.useContentTree)(target, selectors);
+  const contentTree = (0, _common.useContentTree)(target, selectors);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),

package/dist/cjs/a/ContentTree/common/Tree/Tree.js

@@ -9,20 +9,20 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 var _useFirstVisibleNode = _interopRequireDefault(require("../useFirstVisibleNode"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /* @pareto-engineering/generator-front 1.0.12 */
 
 // Local Definitions
 
-var baseClassName = _exports.default.base;
-var componentClassName = 'tree';
+const baseClassName = _exports.default.base;
+const componentClassName = 'tree';
 
 /**
  * This is the component description.
  */
-var Tree = _ref => {
-  var {
+const Tree = _ref => {
+  let {
     id,
     className: userClassName,
     style,
@@ -31,20 +31,20 @@ var Tree = _ref => {
     // ...otherProps
   } = _ref;
   // The nodeIds to be used to get the first visible node
-  var [nodeIds, setNodeIds] = (0, React.useState)([]);
+  const [nodeIds, setNodeIds] = (0, React.useState)([]);
 
   // current visible nodeId
-  var visibleNodeId = (0, _useFirstVisibleNode.default)(nodeIds);
+  const visibleNodeId = (0, _useFirstVisibleNode.default)(nodeIds);
   (0, React.useEffect)(() => {
-    var node = document.getElementsByClassName(visibleNodeId)[0];
-    node === null || node === void 0 ? void 0 : node.classList.add(_exports.default.modifierActive);
+    const node = document.getElementsByClassName(visibleNodeId)[0];
+    node?.classList.add(_exports.default.modifierActive);
     return () => {
-      node === null || node === void 0 ? void 0 : node.classList.remove(_exports.default.modifierActive);
+      node?.classList.remove(_exports.default.modifierActive);
     };
   }, [visibleNodeId]);
 
   // Generate the tree structure from the content tree data depending on the display depth
-  var getNestedTree = (node, depth) => {
+  const getNestedTree = (node, depth) => {
     setNodeIds(prev => [...prev, node.id]);
     if (depth <= 1) {
       return /*#__PURE__*/React.createElement("li", {
@@ -61,7 +61,7 @@ var Tree = _ref => {
       className: node.id
     }, node.text)), node.children.length > 0 && /*#__PURE__*/React.createElement("ul", null, node.children.map(child => getNestedTree(child, depth - 1))));
   };
-  var ContentTree = (0, React.useMemo)(() => tree.map(node => getNestedTree(node, displayDepth)), [tree]);
+  const ContentTree = (0, React.useMemo)(() => tree.map(node => getNestedTree(node, displayDepth)), [tree]);
   return /*#__PURE__*/React.createElement("ul", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),

package/dist/cjs/a/ContentTree/common/Tree/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Tree", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Tree.default;
   }
 });

package/dist/cjs/a/ContentTree/common/index.js

@@ -5,19 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Tree", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Tree.Tree;
   }
 });
 Object.defineProperty(exports, "useContentTree", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useContentTree.default;
   }
 });
 Object.defineProperty(exports, "useFirstVisibleNode", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useFirstVisibleNode.default;
   }
 });

package/dist/cjs/a/ContentTree/common/useContentTree.js

@@ -5,38 +5,38 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var useContentTree = (target, selectors) => {
-  var [contentTree, setContentTree] = (0, _react.useState)([]);
-  var getNodes = (0, _react.useCallback)(parentTag => {
-    var nodeList = parentTag.querySelectorAll(selectors.join(', '));
-    var nodes = [];
+const useContentTree = (target, selectors) => {
+  const [contentTree, setContentTree] = (0, _react.useState)([]);
+  const getNodes = (0, _react.useCallback)(parentTag => {
+    const nodeList = parentTag.querySelectorAll(selectors.join(', '));
+    const nodes = [];
     nodeList.forEach(nodeNode => {
-      var {
+      const {
         id,
         innerText,
         tagName
       } = nodeNode;
       nodes.push({
-        id: "#".concat(id),
+        id: `#${id}`,
         text: innerText,
         level: selectors.indexOf(tagName.toLowerCase())
       });
     });
     return nodes;
   }, [selectors]);
-  var buildTree = (0, _react.useCallback)(nodes => {
+  const buildTree = (0, _react.useCallback)(nodes => {
     // Track the nodes we've seen so far in the same level
-    var currentSameLevelNodes = [];
+    const currentSameLevelNodes = [];
     // Track nodes of the next level which will be children of the current node
-    var nextLevelNodes = [];
+    let nextLevelNodes = [];
     // Track the current node level
-    var lastLevel = -1;
+    let lastLevel = -1;
 
     // If the nodes are empty, return an empty tree
     if (nodes.length === 0) {
       return [];
     }
-    var buildSubTree = () => {
+    const buildSubTree = () => {
       if (nextLevelNodes.length > 0) {
         currentSameLevelNodes[currentSameLevelNodes.length - 1].children.push(...buildTree(nextLevelNodes));
       }
@@ -69,8 +69,8 @@ var useContentTree = (target, selectors) => {
   }, []);
   (0, _react.useEffect)(() => {
     if (target.current) {
-      var nodes = getNodes(target.current);
-      var tree = buildTree(nodes);
+      const nodes = getNodes(target.current);
+      const tree = buildTree(nodes);
       setContentTree(tree);
     }
   }, [target.current]);