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

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 +5 -1
  2. package/cjs/configs/useLeftNavSmoothExpand.js +6 -3
  3. package/cjs/hooks/useSelectFirstBodyItem.js +6 -3
  4. package/cjs/outOfTheBox/ItemHeader/index.js +4 -2
  5. package/cjs/outOfTheBox/ItemLink/index.js +4 -2
  6. package/cjs/outOfTheBox/ItemSubmenu/index.js +4 -2
  7. package/esm/configs/useLeftNavConfig.js +5 -1
  8. package/esm/configs/useLeftNavSmoothExpand.js +6 -3
  9. package/esm/hooks/useSelectFirstBodyItem.js +6 -3
  10. package/esm/outOfTheBox/ItemHeader/index.js +4 -2
  11. package/esm/outOfTheBox/ItemLink/index.js +4 -2
  12. package/esm/outOfTheBox/ItemSubmenu/index.js +4 -2
  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 +5 -2
package/cjs/configs/useLeftNavConfig.js CHANGED
@@ -26,7 +26,6 @@ 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);
30
29
  const [selectedParent, setSelectedParent] = React__default["default"].useState(null); // Focus related
31
30
 
32
31
  const [focusedItem, setFocusedItem] = React__default["default"].useState(null); // Opened uncontrolled drilldowns
@@ -51,6 +50,11 @@ const useLeftNavConfig = props => {
51
50
  React__default["default"].useEffect(() => {
52
51
  onSelectedChange(selectedItem);
53
52
  }, [selectedItem, onSelectedChange]);
53
+ React__default["default"].useEffect(() => {
54
+ if (props.actionRef && props.actionRef.current) {
55
+ props.actionRef.current.setFocusedItem = setFocusedItem;
56
+ }
57
+ }, [props.actionRef]);
54
58
  React__default["default"].useEffect(() => {
55
59
  if (openedItem !== null) setSelectedParent(openedItem);
56
60
  }, [openedItem]);
package/cjs/configs/useLeftNavSmoothExpand.js CHANGED
@@ -21,11 +21,14 @@ 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
- clearTimeout(timeoutRef.current);
24
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
25
25
  timeoutRef.current = setTimeout(() => setExpandedForAnimation(false), 350);
26
- } else if (expanded) setExpandedForAnimation(true);
26
+ } else if (expanded) setExpandedForAnimation(true); // eslint-disable-next-line react-hooks/exhaustive-deps
27
+
27
28
  }, [expanded]);
28
- React__default["default"].useEffect(() => () => clearTimeout(timeoutRef.current), []);
29
+ React__default["default"].useEffect(() => () => {
30
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
31
+ }, [timeoutRef]);
29
32
  };
30
33
 
31
34
  exports["default"] = useLeftNavSmoothExpand;
package/cjs/hooks/useSelectFirstBodyItem.js CHANGED
@@ -20,16 +20,19 @@ 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 ? 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)));
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)));
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
+
29
31
  const index = items.findIndex(elem => isSelectableOutOfTheBox(elem) || isSelectableCustom(elem));
30
32
  const isItemInside = items.some(it => isItemInsideTheTree(it, selectedItem));
31
- if (isItemInside) setSelectedItem(selectedItem);else if (index !== -1) setSelectedItem(items[index].dsId);
32
- }
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
+
33
36
  }, [openedItem, setSelectedItem, disableDefaultSelection]);
34
37
  };
35
38
 
package/cjs/outOfTheBox/ItemHeader/index.js CHANGED
@@ -42,7 +42,8 @@ const ItemHeader = props => {
42
42
  label,
43
43
  RightComponent,
44
44
  BottomComponent,
45
- labelDataTestId
45
+ labelDataTestId,
46
+ labelOverflow: itemLabelOverflow
46
47
  },
47
48
  CollapsedComponent = () => null
48
49
  },
@@ -50,7 +51,7 @@ const ItemHeader = props => {
50
51
  ctx: {
51
52
  leftNavProps: {
52
53
  openedItem,
53
- labelOverflow,
54
+ labelOverflow: leftNavLabelOverflow,
54
55
  onItemClick
55
56
  },
56
57
  expandedForAnimation,
@@ -59,6 +60,7 @@ const ItemHeader = props => {
59
60
  selectedParent
60
61
  }
61
62
  } = props;
63
+ const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
62
64
  const opened = openedItem === dsId;
63
65
  const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
64
66
  const isSelected = selectedItem === dsId || selectedParent === dsId;
package/cjs/outOfTheBox/ItemLink/index.js CHANGED
@@ -38,20 +38,22 @@ const ItemLink = props => {
38
38
  itemOpts: {
39
39
  label,
40
40
  RightComponent,
41
- labelDataTestId
41
+ labelDataTestId,
42
+ labelOverflow: itemLabelOverflow
42
43
  },
43
44
  CollapsedComponent = () => null
44
45
  },
45
46
  ctx,
46
47
  ctx: {
47
48
  leftNavProps: {
48
- labelOverflow,
49
+ labelOverflow: leftNavLabelOverflow,
49
50
  openedItem
50
51
  },
51
52
  selectedItem,
52
53
  selectedParent
53
54
  }
54
55
  } = props;
56
+ const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
55
57
  const isSelected = selectedItem === dsId || selectedParent === dsId;
56
58
  const shadowStyle = React.useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [isSelected, openedItem]);
57
59
  return /*#__PURE__*/_jsx__default["default"](index.ItemRenderer, {
package/cjs/outOfTheBox/ItemSubmenu/index.js CHANGED
@@ -42,7 +42,8 @@ const ItemSubmenu = props => {
42
42
  label,
43
43
  RightComponent,
44
44
  BottomComponent,
45
- labelDataTestId
45
+ labelDataTestId,
46
+ labelOverflow: itemLabelOverflow
46
47
  },
47
48
  CollapsedComponent = () => null
48
49
  },
@@ -50,7 +51,7 @@ const ItemSubmenu = props => {
50
51
  ctx: {
51
52
  leftNavProps: {
52
53
  openedItem,
53
- labelOverflow,
54
+ labelOverflow: leftNavLabelOverflow,
54
55
  onItemClick
55
56
  },
56
57
  expandedForAnimation,
@@ -59,6 +60,7 @@ const ItemSubmenu = props => {
59
60
  setFocusedItem
60
61
  }
61
62
  } = props;
63
+ const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
62
64
  const opened = openedItem === dsId;
63
65
  const isSelected = selectedItem === dsId;
64
66
  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,7 +18,6 @@ const useLeftNavConfig = props => {
18
18
  // Selection related
19
19
 
20
20
  const [selectedItem, setSelectedItem] = React.useState(null);
21
- React.useState(null);
22
21
  const [selectedParent, setSelectedParent] = React.useState(null); // Focus related
23
22
 
24
23
  const [focusedItem, setFocusedItem] = React.useState(null); // Opened uncontrolled drilldowns
@@ -43,6 +42,11 @@ const useLeftNavConfig = props => {
43
42
  React.useEffect(() => {
44
43
  onSelectedChange(selectedItem);
45
44
  }, [selectedItem, onSelectedChange]);
45
+ React.useEffect(() => {
46
+ if (props.actionRef && props.actionRef.current) {
47
+ props.actionRef.current.setFocusedItem = setFocusedItem;
48
+ }
49
+ }, [props.actionRef]);
46
50
  React.useEffect(() => {
47
51
  if (openedItem !== null) setSelectedParent(openedItem);
48
52
  }, [openedItem]);
package/esm/configs/useLeftNavSmoothExpand.js CHANGED
@@ -13,11 +13,14 @@ 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
- clearTimeout(timeoutRef.current);
16
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
17
17
  timeoutRef.current = setTimeout(() => setExpandedForAnimation(false), 350);
18
- } else if (expanded) setExpandedForAnimation(true);
18
+ } else if (expanded) setExpandedForAnimation(true); // eslint-disable-next-line react-hooks/exhaustive-deps
19
+
19
20
  }, [expanded]);
20
- React.useEffect(() => () => clearTimeout(timeoutRef.current), []);
21
+ React.useEffect(() => () => {
22
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
23
+ }, [timeoutRef]);
21
24
  };
22
25
 
23
26
  export { useLeftNavSmoothExpand as default, useLeftNavSmoothExpand };
package/esm/hooks/useSelectFirstBodyItem.js CHANGED
@@ -16,16 +16,19 @@ 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 ? 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)));
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)));
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
+
25
27
  const index = items.findIndex(elem => isSelectableOutOfTheBox(elem) || isSelectableCustom(elem));
26
28
  const isItemInside = items.some(it => isItemInsideTheTree(it, selectedItem));
27
- if (isItemInside) setSelectedItem(selectedItem);else if (index !== -1) setSelectedItem(items[index].dsId);
28
- }
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
+
29
32
  }, [openedItem, setSelectedItem, disableDefaultSelection]);
30
33
  };
31
34
 
package/esm/outOfTheBox/ItemHeader/index.js CHANGED
@@ -32,7 +32,8 @@ const ItemHeader = props => {
32
32
  label,
33
33
  RightComponent,
34
34
  BottomComponent,
35
- labelDataTestId
35
+ labelDataTestId,
36
+ labelOverflow: itemLabelOverflow
36
37
  },
37
38
  CollapsedComponent = () => null
38
39
  },
@@ -40,7 +41,7 @@ const ItemHeader = props => {
40
41
  ctx: {
41
42
  leftNavProps: {
42
43
  openedItem,
43
- labelOverflow,
44
+ labelOverflow: leftNavLabelOverflow,
44
45
  onItemClick
45
46
  },
46
47
  expandedForAnimation,
@@ -49,6 +50,7 @@ const ItemHeader = props => {
49
50
  selectedParent
50
51
  }
51
52
  } = props;
53
+ const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
52
54
  const opened = openedItem === dsId;
53
55
  const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
54
56
  const isSelected = selectedItem === dsId || selectedParent === dsId;
package/esm/outOfTheBox/ItemLink/index.js CHANGED
@@ -28,20 +28,22 @@ const ItemLink = props => {
28
28
  itemOpts: {
29
29
  label,
30
30
  RightComponent,
31
- labelDataTestId
31
+ labelDataTestId,
32
+ labelOverflow: itemLabelOverflow
32
33
  },
33
34
  CollapsedComponent = () => null
34
35
  },
35
36
  ctx,
36
37
  ctx: {
37
38
  leftNavProps: {
38
- labelOverflow,
39
+ labelOverflow: leftNavLabelOverflow,
39
40
  openedItem
40
41
  },
41
42
  selectedItem,
42
43
  selectedParent
43
44
  }
44
45
  } = props;
46
+ const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
45
47
  const isSelected = selectedItem === dsId || selectedParent === dsId;
46
48
  const shadowStyle = useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [isSelected, openedItem]);
47
49
  return /*#__PURE__*/_jsx(ItemRenderer, {
package/esm/outOfTheBox/ItemSubmenu/index.js CHANGED
@@ -32,7 +32,8 @@ const ItemSubmenu = props => {
32
32
  label,
33
33
  RightComponent,
34
34
  BottomComponent,
35
- labelDataTestId
35
+ labelDataTestId,
36
+ labelOverflow: itemLabelOverflow
36
37
  },
37
38
  CollapsedComponent = () => null
38
39
  },
@@ -40,7 +41,7 @@ const ItemSubmenu = props => {
40
41
  ctx: {
41
42
  leftNavProps: {
42
43
  openedItem,
43
- labelOverflow,
44
+ labelOverflow: leftNavLabelOverflow,
44
45
  onItemClick
45
46
  },
46
47
  expandedForAnimation,
@@ -49,6 +50,7 @@ const ItemSubmenu = props => {
49
50
  setFocusedItem
50
51
  }
51
52
  } = props;
53
+ const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
52
54
  const opened = openedItem === dsId;
53
55
  const isSelected = selectedItem === dsId;
54
56
  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-alpha.1",
3
+ "version": "3.0.0-next.1",
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-alpha.1",
237
- "@elliemae/ds-grid": "2.2.0-alpha.1",
238
- "@elliemae/ds-icons": "2.2.0-alpha.1",
239
- "@elliemae/ds-system": "2.2.0-alpha.1",
240
- "@elliemae/ds-truncated-tooltip-text": "2.2.0-alpha.1",
236
+ "@elliemae/ds-circular-progress-indicator": "3.0.0-next.1",
237
+ "@elliemae/ds-grid": "3.0.0-next.1",
238
+ "@elliemae/ds-icons": "3.0.0-next.1",
239
+ "@elliemae/ds-system": "3.0.0-next.1",
240
+ "@elliemae/ds-truncated-tooltip-text": "3.0.0-next.1",
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;
5
- setSelectedItem: React.Dispatch<React.SetStateAction<string>>;
6
- focusedItem: string;
7
- setFocusedItem: React.Dispatch<React.SetStateAction<string>>;
4
+ selectedItem: string | null;
5
+ setSelectedItem: React.Dispatch<React.SetStateAction<string | null>>;
6
+ focusedItem: string | null;
7
+ setFocusedItem: React.Dispatch<React.SetStateAction<string | null>>;
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>;
6
+ timeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
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, selectedItem: string, setSelectedItem: React.Dispatch<React.SetStateAction<string>>, disableDefaultSelection: boolean) => void;
3
+ export declare const useSelectFirstBodyItem: (items: GenericItemItemProps[], openedItem: string | null, selectedItem: string | null, setSelectedItem: React.Dispatch<React.SetStateAction<string | null>>, disableDefaultSelection: boolean | undefined) => 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) => void;
12
- onFocusChange: (item: string) => void;
11
+ onSelectedChange: (item: string | null) => void;
12
+ onFocusChange: (item: string | null) => void;
13
13
  onFooterExpand: () => void;
14
14
  onFooterClose: () => void;
15
15
  onItemClick: (item: GenericItemItemProps, e: React.MouseEvent<HTMLElement>) => void;
@@ -21,6 +21,9 @@ 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
+ }>;
24
27
  }
25
28
  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';
26
29
  export interface itemOptsT {