@superdispatch/ui-lab 0.26.0 → 0.27.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 (6) hide show
  1. package/dist-node/index.js +8 -24
  2. package/dist-node/index.js.map +1 -1
  3. package/dist-src/sidebar/SidebarMenuItem.js +8 -24
  4. package/dist-web/index.js +8 -24
  5. package/dist-web/index.js.map +1 -1
  6. package/package.json +3 -3
package/dist-src/sidebar/SidebarMenuItem.js CHANGED
@@ -21,10 +21,6 @@ var SidebarMenuItemBadge = /*#__PURE__*/styled.div.withConfig({
21
21
  displayName: "SidebarMenuItem__SidebarMenuItemBadge",
22
22
  componentId: "SD__sc-1sb5zqa-1"
23
23
  })(["font-size:12px;font-weight:500;line-height:16px;padding-left:4px;padding-right:4px;border-radius:100px;color:", ";background-color:", ";"], Color.Dark500, Color.Silver400);
24
- var SidebarMenuItemSecondaryAction = /*#__PURE__*/styled.div.withConfig({
25
- displayName: "SidebarMenuItem__SidebarMenuItemSecondaryAction",
26
- componentId: "SD__sc-1sb5zqa-2"
27
- })(["top:50%;right:24px;position:absolute;transform:translate3d(0,-50%,0);"]);
28
24
  export var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
29
25
  var {
30
26
  action,
@@ -40,19 +36,12 @@ export var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
40
36
  } = _ref2;
41
37
  var [hovered, setHovered] = useState(false);
42
38
  var rootRef = useRef(null);
43
- var actionsRef = useRef(null);
44
- var actionsPlaceholderRef = useRef(null);
45
39
  var {
46
40
  openSidebarContent
47
41
  } = useSidebarContext();
48
42
  var {
49
43
  matches: isHoverSupported
50
44
  } = matchMedia('(hover: hover)');
51
- useLayoutEffect(() => {
52
- if (actionsRef.current && actionsPlaceholderRef.current) {
53
- actionsPlaceholderRef.current.style.width = "".concat(Math.max(0, actionsRef.current.offsetWidth - 8), "px");
54
- }
55
- });
56
45
  useLayoutEffect(() => {
57
46
  var rootNode = rootRef.current;
58
47
  if (rootNode) {
@@ -69,10 +58,10 @@ export var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
69
58
  }
70
59
  }, [isHoverSupported]);
71
60
  var badge = !badgeProp || !Number.isFinite(badgeProp) ? null : badgeProp > 999 ? '999+' : badgeProp;
72
- return /*#__PURE__*/_jsxs(SidebarMenuItemRoot, {
61
+ return /*#__PURE__*/_jsx(SidebarMenuItemRoot, {
73
62
  ref: mergeRefs(ref, rootRef),
74
63
  hasAvatar: !!avatar,
75
- children: [/*#__PURE__*/_jsx(ButtonBase, {
64
+ children: /*#__PURE__*/_jsx(ButtonBase, {
76
65
  disabled: disabled,
77
66
  "aria-current": selected,
78
67
  onClick: event => {
@@ -117,24 +106,19 @@ export var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
117
106
  })
118
107
  })
119
108
  })
109
+ }), (!!action || !!secondaryActions) && /*#__PURE__*/_jsx(Column, {
110
+ width: "content",
111
+ children: /*#__PURE__*/_jsxs(Inline, {
112
+ children: [(selected || hovered) && secondaryActions, action]
113
+ })
120
114
  }), !!badge && /*#__PURE__*/_jsx(Column, {
121
115
  width: "content",
122
116
  children: /*#__PURE__*/_jsx(SidebarMenuItemBadge, {
123
117
  children: badge
124
118
  })
125
- }), (!!action || !!secondaryActions) && /*#__PURE__*/_jsx(Column, {
126
- width: "content",
127
- children: /*#__PURE__*/_jsx("div", {
128
- ref: actionsPlaceholderRef
129
- })
130
119
  })]
131
120
  })
132
- }), (!!action || !!secondaryActions) && /*#__PURE__*/_jsx(SidebarMenuItemSecondaryAction, {
133
- ref: actionsRef,
134
- children: /*#__PURE__*/_jsxs(Inline, {
135
- children: [hovered && secondaryActions, action]
136
- })
137
- })]
121
+ })
138
122
  });
139
123
  });
140
124
  if (process.env.NODE_ENV !== "production") SidebarMenuItem.displayName = "SidebarMenuItem";
package/dist-web/index.js CHANGED
@@ -1921,10 +1921,6 @@ var SidebarMenuItemBadge = /*#__PURE__*/styled.div.withConfig({
1921
1921
  displayName: "SidebarMenuItem__SidebarMenuItemBadge",
1922
1922
  componentId: "SD__sc-1sb5zqa-1"
1923
1923
  })(["font-size:12px;font-weight:500;line-height:16px;padding-left:4px;padding-right:4px;border-radius:100px;color:", ";background-color:", ";"], Color.Dark500, Color.Silver400);
1924
- var SidebarMenuItemSecondaryAction = /*#__PURE__*/styled.div.withConfig({
1925
- displayName: "SidebarMenuItem__SidebarMenuItemSecondaryAction",
1926
- componentId: "SD__sc-1sb5zqa-2"
1927
- })(["top:50%;right:24px;position:absolute;transform:translate3d(0,-50%,0);"]);
1928
1924
  var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
1929
1925
  var {
1930
1926
  action,
@@ -1940,19 +1936,12 @@ var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
1940
1936
  } = _ref2;
1941
1937
  var [hovered, setHovered] = useState(false);
1942
1938
  var rootRef = useRef(null);
1943
- var actionsRef = useRef(null);
1944
- var actionsPlaceholderRef = useRef(null);
1945
1939
  var {
1946
1940
  openSidebarContent
1947
1941
  } = useSidebarContext();
1948
1942
  var {
1949
1943
  matches: isHoverSupported
1950
1944
  } = matchMedia('(hover: hover)');
1951
- useLayoutEffect(() => {
1952
- if (actionsRef.current && actionsPlaceholderRef.current) {
1953
- actionsPlaceholderRef.current.style.width = "".concat(Math.max(0, actionsRef.current.offsetWidth - 8), "px");
1954
- }
1955
- });
1956
1945
  useLayoutEffect(() => {
1957
1946
  var rootNode = rootRef.current;
1958
1947
  if (rootNode) {
@@ -1969,10 +1958,10 @@ var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
1969
1958
  }
1970
1959
  }, [isHoverSupported]);
1971
1960
  var badge = !badgeProp || !Number.isFinite(badgeProp) ? null : badgeProp > 999 ? '999+' : badgeProp;
1972
- return /*#__PURE__*/jsxs(SidebarMenuItemRoot, {
1961
+ return /*#__PURE__*/jsx(SidebarMenuItemRoot, {
1973
1962
  ref: mergeRefs(ref, rootRef),
1974
1963
  hasAvatar: !!avatar,
1975
- children: [/*#__PURE__*/jsx(ButtonBase, {
1964
+ children: /*#__PURE__*/jsx(ButtonBase, {
1976
1965
  disabled: disabled,
1977
1966
  "aria-current": selected,
1978
1967
  onClick: event => {
@@ -2017,24 +2006,19 @@ var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
2017
2006
  })
2018
2007
  })
2019
2008
  })
2009
+ }), (!!action || !!secondaryActions) && /*#__PURE__*/jsx(Column, {
2010
+ width: "content",
2011
+ children: /*#__PURE__*/jsxs(Inline, {
2012
+ children: [(selected || hovered) && secondaryActions, action]
2013
+ })
2020
2014
  }), !!badge && /*#__PURE__*/jsx(Column, {
2021
2015
  width: "content",
2022
2016
  children: /*#__PURE__*/jsx(SidebarMenuItemBadge, {
2023
2017
  children: badge
2024
2018
  })
2025
- }), (!!action || !!secondaryActions) && /*#__PURE__*/jsx(Column, {
2026
- width: "content",
2027
- children: /*#__PURE__*/jsx("div", {
2028
- ref: actionsPlaceholderRef
2029
- })
2030
2019
  })]
2031
2020
  })
2032
- }), (!!action || !!secondaryActions) && /*#__PURE__*/jsx(SidebarMenuItemSecondaryAction, {
2033
- ref: actionsRef,
2034
- children: /*#__PURE__*/jsxs(Inline, {
2035
- children: [hovered && secondaryActions, action]
2036
- })
2037
- })]
2021
+ })
2038
2022
  });
2039
2023
  });
2040
2024
  if (process.env.NODE_ENV !== "production") SidebarMenuItem.displayName = "SidebarMenuItem";