mui-org / material-ui

@@ -54,18 +54,6 @@
Loading
54 54
    .join(' ');
55 55
}
56 56
57 -
// Sum the scrollTop between two elements.
58 -
function getScrollParent(parent, child) {
59 -
  let element = child;
60 -
  let scrollTop = 0;
61 -
62 -
  while (element && element !== parent) {
63 -
    element = element.parentElement;
64 -
    scrollTop += element.scrollTop;
65 -
  }
66 -
  return scrollTop;
67 -
}
68 -
69 57
function getAnchorEl(anchorEl) {
70 58
  return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
71 59
}
@@ -133,7 +121,6 @@
Loading
133 121
    className,
134 122
    container: containerProp,
135 123
    elevation = 8,
136 -
    getContentAnchorEl,
137 124
    marginThreshold = 16,
138 125
    open,
139 126
    PaperProps = {},
@@ -165,100 +152,59 @@
Loading
165 152
166 153
  // Returns the top/left offset of the position
167 154
  // to attach to on the anchor element (or body if none is provided)
168 -
  const getAnchorOffset = React.useCallback(
169 -
    (contentAnchorOffset) => {
170 -
      if (anchorReference === 'anchorPosition') {
171 -
        if (process.env.NODE_ENV !== 'production') {
172 -
          if (!anchorPosition) {
173 -
            console.error(
174 -
              'Material-UI: You need to provide a `anchorPosition` prop when using ' +
175 -
                '<Popover anchorReference="anchorPosition" />.',
176 -
            );
177 -
          }
178 -
        }
179 -
        return anchorPosition;
180 -
      }
181 -
182 -
      const resolvedAnchorEl = getAnchorEl(anchorEl);
183 -
184 -
      // If an anchor element wasn't provided, just use the parent body element of this Popover
185 -
      const anchorElement =
186 -
        resolvedAnchorEl && resolvedAnchorEl.nodeType === 1
187 -
          ? resolvedAnchorEl
188 -
          : ownerDocument(paperRef.current).body;
189 -
      const anchorRect = anchorElement.getBoundingClientRect();
190 -
155 +
  const getAnchorOffset = React.useCallback(() => {
156 +
    if (anchorReference === 'anchorPosition') {
191 157
      if (process.env.NODE_ENV !== 'production') {
192 -
        const box = anchorElement.getBoundingClientRect();
193 -
194 -
        if (
195 -
          process.env.NODE_ENV !== 'test' &&
196 -
          box.top === 0 &&
197 -
          box.left === 0 &&
198 -
          box.right === 0 &&
199 -
          box.bottom === 0
200 -
        ) {
201 -
          console.warn(
202 -
            [
203 -
              'Material-UI: The `anchorEl` prop provided to the component is invalid.',
204 -
              'The anchor element should be part of the document layout.',
205 -
              "Make sure the element is present in the document or that it's not display none.",
206 -
            ].join('\n'),
158 +
        if (!anchorPosition) {
159 +
          console.error(
160 +
            'Material-UI: You need to provide a `anchorPosition` prop when using ' +
161 +
              '<Popover anchorReference="anchorPosition" />.',
207 162
          );
208 163
        }
209 164
      }
165 +
      return anchorPosition;
166 +
    }
210 167
211 -
      const anchorVertical = contentAnchorOffset === 0 ? anchorOrigin.vertical : 'center';
212 -
213 -
      return {
214 -
        top: anchorRect.top + getOffsetTop(anchorRect, anchorVertical),
215 -
        left: anchorRect.left + getOffsetLeft(anchorRect, anchorOrigin.horizontal),
216 -
      };
217 -
    },
218 -
    [anchorEl, anchorOrigin.horizontal, anchorOrigin.vertical, anchorPosition, anchorReference],
219 -
  );
220 -
221 -
  // Returns the vertical offset of inner content to anchor the transform on if provided
222 -
  const getContentAnchorOffset = React.useCallback(
223 -
    (element) => {
224 -
      let contentAnchorOffset = 0;
225 -
226 -
      if (getContentAnchorEl && anchorReference === 'anchorEl') {
227 -
        const contentAnchorEl = getContentAnchorEl(element);
228 -
229 -
        if (contentAnchorEl && element.contains(contentAnchorEl)) {
230 -
          const scrollTop = getScrollParent(element, contentAnchorEl);
231 -
          contentAnchorOffset =
232 -
            contentAnchorEl.offsetTop + contentAnchorEl.clientHeight / 2 - scrollTop || 0;
233 -
        }
234 -
235 -
        // != the default value
236 -
        if (process.env.NODE_ENV !== 'production') {
237 -
          if (anchorOrigin.vertical !== 'top') {
238 -
            console.error(
239 -
              [
240 -
                'Material-UI: You can not change the default `anchorOrigin.vertical` value ',
241 -
                'when also providing the `getContentAnchorEl` prop to the popover component.',
242 -
                'Only use one of the two props.',
243 -
                'Set `getContentAnchorEl` to `null | undefined`' +
244 -
                  ' or leave `anchorOrigin.vertical` unchanged.',
245 -
              ].join('\n'),
246 -
            );
247 -
          }
248 -
        }
168 +
    const resolvedAnchorEl = getAnchorEl(anchorEl);
169 +
170 +
    // If an anchor element wasn't provided, just use the parent body element of this Popover
171 +
    const anchorElement =
172 +
      resolvedAnchorEl && resolvedAnchorEl.nodeType === 1
173 +
        ? resolvedAnchorEl
174 +
        : ownerDocument(paperRef.current).body;
175 +
    const anchorRect = anchorElement.getBoundingClientRect();
176 +
177 +
    if (process.env.NODE_ENV !== 'production') {
178 +
      const box = anchorElement.getBoundingClientRect();
179 +
180 +
      if (
181 +
        process.env.NODE_ENV !== 'test' &&
182 +
        box.top === 0 &&
183 +
        box.left === 0 &&
184 +
        box.right === 0 &&
185 +
        box.bottom === 0
186 +
      ) {
187 +
        console.warn(
188 +
          [
189 +
            'Material-UI: The `anchorEl` prop provided to the component is invalid.',
190 +
            'The anchor element should be part of the document layout.',
191 +
            "Make sure the element is present in the document or that it's not display none.",
192 +
          ].join('\n'),
193 +
        );
249 194
      }
195 +
    }
250 196
251 -
      return contentAnchorOffset;
252 -
    },
253 -
    [anchorOrigin.vertical, anchorReference, getContentAnchorEl],
254 -
  );
197 +
    return {
198 +
      top: anchorRect.top + getOffsetTop(anchorRect, anchorOrigin.vertical),
199 +
      left: anchorRect.left + getOffsetLeft(anchorRect, anchorOrigin.horizontal),
200 +
    };
201 +
  }, [anchorEl, anchorOrigin.horizontal, anchorOrigin.vertical, anchorPosition, anchorReference]);
255 202
256 -
  // Return the base transform origin using the element
257 -
  // and taking the content anchor offset into account if in use
203 +
  // Returns the base transform origin using the element
258 204
  const getTransformOrigin = React.useCallback(
259 -
    (elemRect, contentAnchorOffset = 0) => {
205 +
    (elemRect) => {
260 206
      return {
261 -
        vertical: getOffsetTop(elemRect, transformOrigin.vertical) + contentAnchorOffset,
207 +
        vertical: getOffsetTop(elemRect, transformOrigin.vertical),
262 208
        horizontal: getOffsetLeft(elemRect, transformOrigin.horizontal),
263 209
      };
264 210
    },
@@ -267,15 +213,13 @@
Loading
267 213
268 214
  const getPositioningStyle = React.useCallback(
269 215
    (element) => {
270 -
      // Check if the parent has requested anchoring on an inner content node
271 -
      const contentAnchorOffset = getContentAnchorOffset(element);
272 216
      const elemRect = {
273 217
        width: element.offsetWidth,
274 218
        height: element.offsetHeight,
275 219
      };
276 220
277 221
      // Get the transform origin point on the element itself
278 -
      const elemTransformOrigin = getTransformOrigin(elemRect, contentAnchorOffset);
222 +
      const elemTransformOrigin = getTransformOrigin(elemRect);
279 223
280 224
      if (anchorReference === 'none') {
281 225
        return {
@@ -285,8 +229,8 @@
Loading
285 229
        };
286 230
      }
287 231
288 -
      // Get the offset of of the anchoring element
289 -
      const anchorOffset = getAnchorOffset(contentAnchorOffset);
232 +
      // Get the offset of the anchoring element
233 +
      const anchorOffset = getAnchorOffset();
290 234
291 235
      // Calculate element positioning
292 236
      let top = anchorOffset.top - elemTransformOrigin.vertical;
@@ -343,14 +287,7 @@
Loading
343 287
        transformOrigin: getTransformOriginValue(elemTransformOrigin),
344 288
      };
345 289
    },
346 -
    [
347 -
      anchorEl,
348 -
      anchorReference,
349 -
      getAnchorOffset,
350 -
      getContentAnchorOffset,
351 -
      getTransformOrigin,
352 -
      marginThreshold,
353 -
    ],
290 +
    [anchorEl, anchorReference, getAnchorOffset, getTransformOrigin, marginThreshold],
354 291
  );
355 292
356 293
  const setPositioningStyles = React.useCallback(() => {
@@ -568,15 +505,6 @@
Loading
568 505
   * @default 8
569 506
   */
570 507
  elevation: integerPropType,
571 -
  /**
572 -
   * This function is called in order to retrieve the content anchor element.
573 -
   * It's the opposite of the `anchorEl` prop.
574 -
   * The content anchor element should be an element inside the popover.
575 -
   * It's used to correctly scroll and set the position of the popover.
576 -
   * The positioning strategy tries to make the content anchor element just above the
577 -
   * anchor element.
578 -
   */
579 -
  getContentAnchorEl: PropTypes.func,
580 508
  /**
581 509
   * Specifies how close to the edge of the window the popover can appear.
582 510
   * @default 16

@@ -9,7 +9,6 @@
Loading
9 9
import Popover from '../Popover';
10 10
import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled';
11 11
import useThemeProps from '../styles/useThemeProps';
12 -
import setRef from '../utils/setRef';
13 12
import menuClasses, { getMenuUtilityClass } from './menuClasses';
14 13
15 14
const RTL_ORIGIN = {
@@ -118,7 +117,6 @@
Loading
118 117
  const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
119 118
120 119
  const menuListActionsRef = React.useRef(null);
121 -
  const contentAnchorRef = React.useRef(null);
122 120
123 121
  const handleEntering = (element, isAppearing) => {
124 122
    if (menuListActionsRef.current) {
@@ -174,22 +172,8 @@
Loading
174 172
    }
175 173
  });
176 174
177 -
  const items = React.Children.map(children, (child, index) => {
178 -
    if (index === activeItemIndex) {
179 -
      return React.cloneElement(child, {
180 -
        ref: (instance) => {
181 -
          contentAnchorRef.current = instance;
182 -
          setRef(child.ref, instance);
183 -
        },
184 -
      });
185 -
    }
186 -
187 -
    return child;
188 -
  });
189 -
190 175
  return (
191 176
    <MenuRoot
192 -
      getContentAnchorEl={() => contentAnchorRef.current}
193 177
      classes={PopoverClasses}
194 178
      onClose={onClose}
195 179
      anchorOrigin={isRtl ? RTL_ORIGIN : LTR_ORIGIN}
@@ -219,7 +203,7 @@
Loading
219 203
        {...MenuListProps}
220 204
        className={clsx(classes.list, MenuListProps.className)}
221 205
      >
222 -
        {items}
206 +
        {children}
223 207
      </MenuMenuList>
224 208
    </MenuRoot>
225 209
  );
@@ -306,8 +290,7 @@
Loading
306 290
   */
307 291
  TransitionProps: PropTypes.object,
308 292
  /**
309 -
   * The variant to use. Use `menu` to prevent selected items from impacting the initial focus
310 -
   * and the vertical alignment relative to the anchor element.
293 +
   * The variant to use. Use `menu` to prevent selected items from impacting the initial focus.
311 294
   * @default 'selectedMenu'
312 295
   */
313 296
  variant: PropTypes.oneOf(['menu', 'selectedMenu']),
Files Coverage
packages 93.39%
Project Totals (345 files) 93.39%

No yaml found.

Create your codecov.yml to customize your Codecov experience

Sunburst
The inner-most circle is the entire project, moving away from the center are folders then, finally, a single file. The size and color of each slice is representing the number of statements and the coverage, respectively.
Icicle
The top section represents the entire project. Proceeding with folders and finally individual files. The size and color of each slice is representing the number of statements and the coverage, respectively.
Grid
Each block represents a single file in the project. The size and color of each block is represented by the number of statements and the coverage, respectively.
Loading