@elliemae/ds-left-navigation 2.2.0-next.6 → 2.2.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/cjs/configs/useLeftNavConfig.js +1 -5
  2. package/cjs/configs/useLeftNavSmoothExpand.js +3 -6
  3. package/cjs/hooks/useSelectFirstBodyItem.js +3 -6
  4. package/cjs/outOfTheBox/ItemHeader/index.js +2 -4
  5. package/cjs/outOfTheBox/ItemLink/index.js +2 -4
  6. package/cjs/outOfTheBox/ItemSubmenu/index.js +2 -4
  7. package/esm/configs/useLeftNavConfig.js +1 -5
  8. package/esm/configs/useLeftNavSmoothExpand.js +3 -6
  9. package/esm/hooks/useSelectFirstBodyItem.js +3 -6
  10. package/esm/outOfTheBox/ItemHeader/index.js +2 -4
  11. package/esm/outOfTheBox/ItemLink/index.js +2 -4
  12. package/esm/outOfTheBox/ItemSubmenu/index.js +2 -4
  13. package/package.json +6 -6
  14. package/types/LeftNavigationContext.d.ts +4 -4
  15. package/types/configs/useLeftNavSmoothExpand.d.ts +3 -3
  16. package/types/hooks/useSelectFirstBodyItem.d.ts +1 -1
  17. package/types/index.d.d.ts +2 -5
package/cjs/configs/useLeftNavConfig.js CHANGED
@@ -26,6 +26,7 @@ const useLeftNavConfig = props => {
26
26
  // Selection related
27
27
 
28
28
  const [selectedItem, setSelectedItem] = React__default["default"].useState(null);
29
+ React__default["default"].useState(null);
29
30
  const [selectedParent, setSelectedParent] = React__default["default"].useState(null); // Focus related
30
31
 
31
32
  const [focusedItem, setFocusedItem] = React__default["default"].useState(null); // Opened uncontrolled drilldowns
@@ -50,11 +51,6 @@ const useLeftNavConfig = props => {
50
51
  React__default["default"].useEffect(() => {
51
52
  onSelectedChange(selectedItem);
52
53
  }, [selectedItem, onSelectedChange]);
53
- React__default["default"].useEffect(() => {
54
- if (props.actionRef && props.actionRef.current) {
55
- props.actionRef.current.setFocusedItem = setFocusedItem;
56
- }
57
- }, [props.actionRef]);
58
54
  React__default["default"].useEffect(() => {
59
55
  if (openedItem !== null) setSelectedParent(openedItem);
60
56
  }, [openedItem]);
package/cjs/configs/useLeftNavSmoothExpand.js CHANGED
@@ -21,14 +21,11 @@ const useLeftNavSmoothExpand = (props, smoothExpandOpts) => {
21
21
  // If expanded changes, we need to smoothly transition to the non-expanded state
22
22
  // so we need to wait for 350ms
23
23
  if (!expanded && expandedForAnimation) {
24
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
24
+ clearTimeout(timeoutRef.current);
25
25
  timeoutRef.current = setTimeout(() => setExpandedForAnimation(false), 350);
26
- } else if (expanded) setExpandedForAnimation(true); // eslint-disable-next-line react-hooks/exhaustive-deps
27
-
26
+ } else if (expanded) setExpandedForAnimation(true);
28
27
  }, [expanded]);
29
- React__default["default"].useEffect(() => () => {
30
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
31
- }, [timeoutRef]);
28
+ React__default["default"].useEffect(() => () => clearTimeout(timeoutRef.current), []);
32
29
  };
33
30
 
34
31
  exports["default"] = useLeftNavSmoothExpand;
package/cjs/hooks/useSelectFirstBodyItem.js CHANGED
@@ -20,19 +20,16 @@ const isSelectableCustom = elem => elem.itemOpts.selectable;
20
20
  const isItemInsideTheTree = (item, itemID) => {
21
21
  var _item$itemOpts, _item$itemOpts$items;
22
22
 
23
- return item.dsId === itemID || !!(item !== null && item !== void 0 && (_item$itemOpts = item.itemOpts) !== null && _item$itemOpts !== void 0 && (_item$itemOpts$items = _item$itemOpts.items) !== null && _item$itemOpts$items !== void 0 && _item$itemOpts$items.some(it => isItemInsideTheTree(it, itemID)));
23
+ return item.dsId === itemID || (item === null || item === void 0 ? void 0 : (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : (_item$itemOpts$items = _item$itemOpts.items) === null || _item$itemOpts$items === void 0 ? void 0 : _item$itemOpts$items.some(it => isItemInsideTheTree(it, itemID)));
24
24
  };
25
25
 
26
26
  const useSelectFirstBodyItem = (items, openedItem, selectedItem, setSelectedItem, disableDefaultSelection) => {
27
27
  React.useEffect(() => {
28
28
  if (!disableDefaultSelection && items && items.length && openedItem) {
29
- var _items$index$dsId;
30
-
31
29
  const index = items.findIndex(elem => isSelectableOutOfTheBox(elem) || isSelectableCustom(elem));
32
30
  const isItemInside = items.some(it => isItemInsideTheTree(it, selectedItem));
33
- if (isItemInside) setSelectedItem(selectedItem);else if (index !== -1) setSelectedItem((_items$index$dsId = items[index].dsId) !== null && _items$index$dsId !== void 0 ? _items$index$dsId : '');
34
- } // eslint-disable-next-line react-hooks/exhaustive-deps
35
-
31
+ if (isItemInside) setSelectedItem(selectedItem);else if (index !== -1) setSelectedItem(items[index].dsId);
32
+ }
36
33
  }, [openedItem, setSelectedItem, disableDefaultSelection]);
37
34
  };
38
35
 
package/cjs/outOfTheBox/ItemHeader/index.js CHANGED
@@ -42,8 +42,7 @@ const ItemHeader = props => {
42
42
  label,
43
43
  RightComponent,
44
44
  BottomComponent,
45
- labelDataTestId,
46
- labelOverflow: itemLabelOverflow
45
+ labelDataTestId
47
46
  },
48
47
  CollapsedComponent = () => null
49
48
  },
@@ -51,7 +50,7 @@ const ItemHeader = props => {
51
50
  ctx: {
52
51
  leftNavProps: {
53
52
  openedItem,
54
- labelOverflow: leftNavLabelOverflow,
53
+ labelOverflow,
55
54
  onItemClick
56
55
  },
57
56
  expandedForAnimation,
@@ -60,7 +59,6 @@ const ItemHeader = props => {
60
59
  selectedParent
61
60
  }
62
61
  } = props;
63
- const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
64
62
  const opened = openedItem === dsId;
65
63
  const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
66
64
  const isSelected = selectedItem === dsId || selectedParent === dsId;
package/cjs/outOfTheBox/ItemLink/index.js CHANGED
@@ -38,22 +38,20 @@ const ItemLink = props => {
38
38
  itemOpts: {
39
39
  label,
40
40
  RightComponent,
41
- labelDataTestId,
42
- labelOverflow: itemLabelOverflow
41
+ labelDataTestId
43
42
  },
44
43
  CollapsedComponent = () => null
45
44
  },
46
45
  ctx,
47
46
  ctx: {
48
47
  leftNavProps: {
49
- labelOverflow: leftNavLabelOverflow,
48
+ labelOverflow,
50
49
  openedItem
51
50
  },
52
51
  selectedItem,
53
52
  selectedParent
54
53
  }
55
54
  } = props;
56
- const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
57
55
  const isSelected = selectedItem === dsId || selectedParent === dsId;
58
56
  const shadowStyle = React.useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [isSelected, openedItem]);
59
57
  return /*#__PURE__*/_jsx__default["default"](index.ItemRenderer, {
package/cjs/outOfTheBox/ItemSubmenu/index.js CHANGED
@@ -42,8 +42,7 @@ const ItemSubmenu = props => {
42
42
  label,
43
43
  RightComponent,
44
44
  BottomComponent,
45
- labelDataTestId,
46
- labelOverflow: itemLabelOverflow
45
+ labelDataTestId
47
46
  },
48
47
  CollapsedComponent = () => null
49
48
  },
@@ -51,7 +50,7 @@ const ItemSubmenu = props => {
51
50
  ctx: {
52
51
  leftNavProps: {
53
52
  openedItem,
54
- labelOverflow: leftNavLabelOverflow,
53
+ labelOverflow,
55
54
  onItemClick
56
55
  },
57
56
  expandedForAnimation,
@@ -60,7 +59,6 @@ const ItemSubmenu = props => {
60
59
  setFocusedItem
61
60
  }
62
61
  } = props;
63
- const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
64
62
  const opened = openedItem === dsId;
65
63
  const isSelected = selectedItem === dsId;
66
64
  const shadowStyle = React.useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [dsId, isSelected, openedItem, selectedParent]);
package/esm/configs/useLeftNavConfig.js CHANGED
@@ -18,6 +18,7 @@ const useLeftNavConfig = props => {
18
18
  // Selection related
19
19
 
20
20
  const [selectedItem, setSelectedItem] = React.useState(null);
21
+ React.useState(null);
21
22
  const [selectedParent, setSelectedParent] = React.useState(null); // Focus related
22
23
 
23
24
  const [focusedItem, setFocusedItem] = React.useState(null); // Opened uncontrolled drilldowns
@@ -42,11 +43,6 @@ const useLeftNavConfig = props => {
42
43
  React.useEffect(() => {
43
44
  onSelectedChange(selectedItem);
44
45
  }, [selectedItem, onSelectedChange]);
45
- React.useEffect(() => {
46
- if (props.actionRef && props.actionRef.current) {
47
- props.actionRef.current.setFocusedItem = setFocusedItem;
48
- }
49
- }, [props.actionRef]);
50
46
  React.useEffect(() => {
51
47
  if (openedItem !== null) setSelectedParent(openedItem);
52
48
  }, [openedItem]);
package/esm/configs/useLeftNavSmoothExpand.js CHANGED
@@ -13,14 +13,11 @@ const useLeftNavSmoothExpand = (props, smoothExpandOpts) => {
13
13
  // If expanded changes, we need to smoothly transition to the non-expanded state
14
14
  // so we need to wait for 350ms
15
15
  if (!expanded && expandedForAnimation) {
16
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
16
+ clearTimeout(timeoutRef.current);
17
17
  timeoutRef.current = setTimeout(() => setExpandedForAnimation(false), 350);
18
- } else if (expanded) setExpandedForAnimation(true); // eslint-disable-next-line react-hooks/exhaustive-deps
19
-
18
+ } else if (expanded) setExpandedForAnimation(true);
20
19
  }, [expanded]);
21
- React.useEffect(() => () => {
22
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
23
- }, [timeoutRef]);
20
+ React.useEffect(() => () => clearTimeout(timeoutRef.current), []);
24
21
  };
25
22
 
26
23
  export { useLeftNavSmoothExpand as default, useLeftNavSmoothExpand };
package/esm/hooks/useSelectFirstBodyItem.js CHANGED
@@ -16,19 +16,16 @@ const isSelectableCustom = elem => elem.itemOpts.selectable;
16
16
  const isItemInsideTheTree = (item, itemID) => {
17
17
  var _item$itemOpts, _item$itemOpts$items;
18
18
 
19
- return item.dsId === itemID || !!(item !== null && item !== void 0 && (_item$itemOpts = item.itemOpts) !== null && _item$itemOpts !== void 0 && (_item$itemOpts$items = _item$itemOpts.items) !== null && _item$itemOpts$items !== void 0 && _item$itemOpts$items.some(it => isItemInsideTheTree(it, itemID)));
19
+ return item.dsId === itemID || (item === null || item === void 0 ? void 0 : (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : (_item$itemOpts$items = _item$itemOpts.items) === null || _item$itemOpts$items === void 0 ? void 0 : _item$itemOpts$items.some(it => isItemInsideTheTree(it, itemID)));
20
20
  };
21
21
 
22
22
  const useSelectFirstBodyItem = (items, openedItem, selectedItem, setSelectedItem, disableDefaultSelection) => {
23
23
  useEffect(() => {
24
24
  if (!disableDefaultSelection && items && items.length && openedItem) {
25
- var _items$index$dsId;
26
-
27
25
  const index = items.findIndex(elem => isSelectableOutOfTheBox(elem) || isSelectableCustom(elem));
28
26
  const isItemInside = items.some(it => isItemInsideTheTree(it, selectedItem));
29
- if (isItemInside) setSelectedItem(selectedItem);else if (index !== -1) setSelectedItem((_items$index$dsId = items[index].dsId) !== null && _items$index$dsId !== void 0 ? _items$index$dsId : '');
30
- } // eslint-disable-next-line react-hooks/exhaustive-deps
31
-
27
+ if (isItemInside) setSelectedItem(selectedItem);else if (index !== -1) setSelectedItem(items[index].dsId);
28
+ }
32
29
  }, [openedItem, setSelectedItem, disableDefaultSelection]);
33
30
  };
34
31
 
package/esm/outOfTheBox/ItemHeader/index.js CHANGED
@@ -32,8 +32,7 @@ const ItemHeader = props => {
32
32
  label,
33
33
  RightComponent,
34
34
  BottomComponent,
35
- labelDataTestId,
36
- labelOverflow: itemLabelOverflow
35
+ labelDataTestId
37
36
  },
38
37
  CollapsedComponent = () => null
39
38
  },
@@ -41,7 +40,7 @@ const ItemHeader = props => {
41
40
  ctx: {
42
41
  leftNavProps: {
43
42
  openedItem,
44
- labelOverflow: leftNavLabelOverflow,
43
+ labelOverflow,
45
44
  onItemClick
46
45
  },
47
46
  expandedForAnimation,
@@ -50,7 +49,6 @@ const ItemHeader = props => {
50
49
  selectedParent
51
50
  }
52
51
  } = props;
53
- const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
54
52
  const opened = openedItem === dsId;
55
53
  const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
56
54
  const isSelected = selectedItem === dsId || selectedParent === dsId;
package/esm/outOfTheBox/ItemLink/index.js CHANGED
@@ -28,22 +28,20 @@ const ItemLink = props => {
28
28
  itemOpts: {
29
29
  label,
30
30
  RightComponent,
31
- labelDataTestId,
32
- labelOverflow: itemLabelOverflow
31
+ labelDataTestId
33
32
  },
34
33
  CollapsedComponent = () => null
35
34
  },
36
35
  ctx,
37
36
  ctx: {
38
37
  leftNavProps: {
39
- labelOverflow: leftNavLabelOverflow,
38
+ labelOverflow,
40
39
  openedItem
41
40
  },
42
41
  selectedItem,
43
42
  selectedParent
44
43
  }
45
44
  } = props;
46
- const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
47
45
  const isSelected = selectedItem === dsId || selectedParent === dsId;
48
46
  const shadowStyle = useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [isSelected, openedItem]);
49
47
  return /*#__PURE__*/_jsx(ItemRenderer, {
package/esm/outOfTheBox/ItemSubmenu/index.js CHANGED
@@ -32,8 +32,7 @@ const ItemSubmenu = props => {
32
32
  label,
33
33
  RightComponent,
34
34
  BottomComponent,
35
- labelDataTestId,
36
- labelOverflow: itemLabelOverflow
35
+ labelDataTestId
37
36
  },
38
37
  CollapsedComponent = () => null
39
38
  },
@@ -41,7 +40,7 @@ const ItemSubmenu = props => {
41
40
  ctx: {
42
41
  leftNavProps: {
43
42
  openedItem,
44
- labelOverflow: leftNavLabelOverflow,
43
+ labelOverflow,
45
44
  onItemClick
46
45
  },
47
46
  expandedForAnimation,
@@ -50,7 +49,6 @@ const ItemSubmenu = props => {
50
49
  setFocusedItem
51
50
  }
52
51
  } = props;
53
- const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
54
52
  const opened = openedItem === dsId;
55
53
  const isSelected = selectedItem === dsId;
56
54
  const shadowStyle = useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [dsId, isSelected, openedItem, selectedParent]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-left-navigation",
3
- "version": "2.2.0-next.6",
3
+ "version": "2.2.0-rc.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Left Navigation",
6
6
  "module": "./esm/index.js",
@@ -233,11 +233,11 @@
233
233
  "generateSubmodules": true
234
234
  },
235
235
  "dependencies": {
236
- "@elliemae/ds-circular-progress-indicator": "2.2.0-next.6",
237
- "@elliemae/ds-grid": "2.2.0-next.6",
238
- "@elliemae/ds-icons": "2.2.0-next.6",
239
- "@elliemae/ds-system": "2.2.0-next.6",
240
- "@elliemae/ds-truncated-tooltip-text": "2.2.0-next.6",
236
+ "@elliemae/ds-circular-progress-indicator": "2.2.0-rc.0",
237
+ "@elliemae/ds-grid": "2.2.0-rc.0",
238
+ "@elliemae/ds-icons": "2.2.0-rc.0",
239
+ "@elliemae/ds-system": "2.2.0-rc.0",
240
+ "@elliemae/ds-truncated-tooltip-text": "2.2.0-rc.0",
241
241
  "overlayscrollbars": "1.13.1",
242
242
  "prop-types": "~15.7.2",
243
243
  "react-desc": "~4.1.3"
package/types/LeftNavigationContext.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import React, { MutableRefObject, RefObject } from 'react';
2
2
  import type { LeftNavProps } from './index.d';
3
3
  export declare type ContextProps = {
4
- selectedItem: string | null;
5
- setSelectedItem: React.Dispatch<React.SetStateAction<string | null>>;
6
- focusedItem: string | null;
7
- setFocusedItem: React.Dispatch<React.SetStateAction<string | null>>;
4
+ selectedItem: string;
5
+ setSelectedItem: React.Dispatch<React.SetStateAction<string>>;
6
+ focusedItem: string;
7
+ setFocusedItem: React.Dispatch<React.SetStateAction<string>>;
8
8
  openedDrilldowns: string[];
9
9
  setOpenedDrilldowns: React.Dispatch<React.SetStateAction<string[]>>;
10
10
  visibleItems: string[];
package/types/configs/useLeftNavSmoothExpand.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  /// <reference types="node" />
2
2
  import React from 'react';
3
3
  import type { LeftNavProps } from '../index.d';
4
- interface SmoothExpandOptsT {
4
+ interface smoothExpandOptsT {
5
5
  expandedForAnimation: boolean;
6
- timeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
6
+ timeoutRef: React.MutableRefObject<NodeJS.Timeout>;
7
7
  setExpandedForAnimation: React.Dispatch<React.SetStateAction<boolean>>;
8
8
  }
9
- export declare const useLeftNavSmoothExpand: (props: LeftNavProps, smoothExpandOpts: SmoothExpandOptsT) => void;
9
+ export declare const useLeftNavSmoothExpand: (props: LeftNavProps, smoothExpandOpts: smoothExpandOptsT) => void;
10
10
  export default useLeftNavSmoothExpand;
package/types/hooks/useSelectFirstBodyItem.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import { GenericItemItemProps } from '../index.d';
3
- export declare const useSelectFirstBodyItem: (items: GenericItemItemProps[], openedItem: string | null, selectedItem: string | null, setSelectedItem: React.Dispatch<React.SetStateAction<string | null>>, disableDefaultSelection: boolean | undefined) => void;
3
+ export declare const useSelectFirstBodyItem: (items: GenericItemItemProps[], openedItem: string, selectedItem: string, setSelectedItem: React.Dispatch<React.SetStateAction<string>>, disableDefaultSelection: boolean) => void;
package/types/index.d.d.ts CHANGED
@@ -8,8 +8,8 @@ export interface LeftNavProps {
8
8
  items: GenericItemItemProps[];
9
9
  footerLabel: string;
10
10
  labelOverflow: LabelOveflowT;
11
- onSelectedChange: (item: string | null) => void;
12
- onFocusChange: (item: string | null) => void;
11
+ onSelectedChange: (item: string) => void;
12
+ onFocusChange: (item: string) => void;
13
13
  onFooterExpand: () => void;
14
14
  onFooterClose: () => void;
15
15
  onItemClick: (item: GenericItemItemProps, e: React.MouseEvent<HTMLElement>) => void;
@@ -21,9 +21,6 @@ export interface LeftNavProps {
21
21
  selectedParent?: string;
22
22
  disableDefaultSelection?: boolean;
23
23
  withoutBodyShadow?: boolean;
24
- actionRef?: React.RefObject<{
25
- setFocusedItem: React.Dispatch<React.SetStateAction<string | null>>;
26
- }>;
27
24
  }
28
25
  export declare type OutOfTheBoxT = 'ds-left-nav-item-header' | 'ds-left-nav-item-link' | 'ds-left-nav-item-submenu' | 'ds-left-nav-item-controlled-drilldown' | 'ds-left-nav-item-uncontrolled-drilldown' | 'ds-left-nav-item-section' | 'ds-left-nav-item-separator' | 'ds-left-nav-item-text-label' | 'ds-left-nav-item-with-date';
29
26
  export interface itemOptsT {