@canlooks/can-ui 0.0.105 → 0.0.106

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 (5) hide show
  1. package/dist/cjs/components/clickAway/clickAway.d.ts +1 -1
  2. package/dist/cjs/components/popper/popper.js +26 -8
  3. package/dist/esm/components/clickAway/clickAway.d.ts +1 -1
  4. package/dist/esm/components/popper/popper.js +26 -8
  5. package/package.json +1 -1
package/dist/cjs/components/clickAway/clickAway.d.ts CHANGED
@@ -8,7 +8,7 @@ export interface ClickAwayProps extends DivProps {
8
8
  disabled?: boolean;
9
9
  children?: ReactElement<any>;
10
10
  /** 用于参考的目标元素，若为数组，需要点击数组外的元素才会触发clickAway */
11
- targets?: () => Element | null | (Element | null)[];
11
+ targets?: () => Element | undefined | (Element | undefined)[];
12
12
  }
13
13
  export declare function ClickAway({ ref, container, eventType, onClickAway, disabled, children, targets, ...props }: ClickAwayProps): ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").FunctionComponentElement<{
14
14
  ref: (ref: Element | null) => void;
package/dist/cjs/components/popper/popper.js CHANGED
@@ -377,8 +377,12 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
377
377
  if (!hoverable) {
378
378
  return;
379
379
  }
380
+ const anchorEl = getAnchorElement();
381
+ if (!anchorEl) {
382
+ return;
383
+ }
380
384
  const pointerOver = (e) => {
381
- if (!isOvering.current && e.target === anchorRef.current) {
385
+ if (!isOvering.current && e.target === anchorEl) {
382
386
  isOvering.current = true;
383
387
  pointerEnterFn();
384
388
  }
@@ -387,7 +391,6 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
387
391
  isOvering.current = false;
388
392
  pointerLeaveFn();
389
393
  };
390
- const anchorEl = anchorRef.current;
391
394
  anchorEl.addEventListener('pointerover', pointerOver);
392
395
  anchorEl.addEventListener('pointerleave', pointerLeave);
393
396
  return () => {
@@ -416,9 +419,12 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
416
419
  if (!focusable) {
417
420
  return;
418
421
  }
422
+ const anchorEl = getAnchorElement();
423
+ if (!anchorEl) {
424
+ return;
425
+ }
419
426
  const focus = () => openAndHold(true);
420
427
  const blur = () => openAndHold(false);
421
- const anchorEl = anchorRef.current;
422
428
  anchorEl.addEventListener('focus', focus);
423
429
  anchorEl.addEventListener('blur', blur);
424
430
  return () => {
@@ -434,12 +440,15 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
434
440
  if (!enterable) {
435
441
  return;
436
442
  }
443
+ const anchorEl = getAnchorElement();
444
+ if (!anchorEl) {
445
+ return;
446
+ }
437
447
  const keyDown = (e) => {
438
448
  if (e.key === 'Enter') {
439
449
  openAndHold(true);
440
450
  }
441
451
  };
442
- const anchorEl = anchorRef.current;
443
452
  anchorEl.addEventListener('keydown', keyDown);
444
453
  return () => {
445
454
  anchorEl.removeEventListener('keydown', keyDown);
@@ -453,8 +462,11 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
453
462
  if (!clickable) {
454
463
  return;
455
464
  }
465
+ const anchorEl = getAnchorElement();
466
+ if (!anchorEl) {
467
+ return;
468
+ }
456
469
  const click = () => openAndHold(true);
457
- const anchorEl = anchorRef.current;
458
470
  anchorEl.addEventListener('click', click);
459
471
  return () => {
460
472
  anchorEl.removeEventListener('click', click);
@@ -468,10 +480,13 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
468
480
  */
469
481
  (0, react_1.useEffect)(() => {
470
482
  if (clickToClose) {
483
+ const anchorEl = getAnchorElement();
484
+ if (!anchorEl) {
485
+ return;
486
+ }
471
487
  const click = () => {
472
488
  setOpenForce(false);
473
489
  };
474
- const anchorEl = anchorRef.current;
475
490
  anchorEl.addEventListener('click', click);
476
491
  return () => {
477
492
  anchorEl.removeEventListener('click', click);
@@ -486,12 +501,15 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
486
501
  if (!contextMenuable) {
487
502
  return;
488
503
  }
504
+ const anchorEl = getAnchorElement();
505
+ if (!anchorEl) {
506
+ return;
507
+ }
489
508
  const contextMenu = (e) => {
490
509
  e.preventDefault();
491
510
  setContextMenuEvent(e);
492
511
  openAndHold(true);
493
512
  };
494
- const anchorEl = anchorRef.current;
495
513
  anchorEl.addEventListener('contextmenu', contextMenu);
496
514
  return () => {
497
515
  anchorEl.removeEventListener('contextmenu', contextMenu);
@@ -521,7 +539,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
521
539
  })
522
540
  : children, renderedOnce.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !clickable && !enterable && !contextMenuable,
523
541
  // 右键菜单点击anchor需要关闭弹框
524
- targets: () => contextMenuEvent.current ? null : anchorRef.current, onClickAway: onClickAway, children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: innerPopperRef, css: popper_style_1.style, className: (0, utils_1.clsx)(popper_style_1.classes.root, props.className), style: {
542
+ targets: () => contextMenuEvent.current ? void 0 : getAnchorElement(), onClickAway: onClickAway, children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: innerPopperRef, css: popper_style_1.style, className: (0, utils_1.clsx)(popper_style_1.classes.root, props.className), style: {
525
543
  ...popperBounding,
526
544
  ...!openNextFrame.current && {
527
545
  transition: 'none',
package/dist/esm/components/clickAway/clickAway.d.ts CHANGED
@@ -8,7 +8,7 @@ export interface ClickAwayProps extends DivProps {
8
8
  disabled?: boolean;
9
9
  children?: ReactElement<any>;
10
10
  /** 用于参考的目标元素，若为数组，需要点击数组外的元素才会触发clickAway */
11
- targets?: () => Element | null | (Element | null)[];
11
+ targets?: () => Element | undefined | (Element | undefined)[];
12
12
  }
13
13
  export declare function ClickAway({ ref, container, eventType, onClickAway, disabled, children, targets, ...props }: ClickAwayProps): ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").FunctionComponentElement<{
14
14
  ref: (ref: Element | null) => void;
package/dist/esm/components/popper/popper.js CHANGED
@@ -374,8 +374,12 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
374
374
  if (!hoverable) {
375
375
  return;
376
376
  }
377
+ const anchorEl = getAnchorElement();
378
+ if (!anchorEl) {
379
+ return;
380
+ }
377
381
  const pointerOver = (e) => {
378
- if (!isOvering.current && e.target === anchorRef.current) {
382
+ if (!isOvering.current && e.target === anchorEl) {
379
383
  isOvering.current = true;
380
384
  pointerEnterFn();
381
385
  }
@@ -384,7 +388,6 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
384
388
  isOvering.current = false;
385
389
  pointerLeaveFn();
386
390
  };
387
- const anchorEl = anchorRef.current;
388
391
  anchorEl.addEventListener('pointerover', pointerOver);
389
392
  anchorEl.addEventListener('pointerleave', pointerLeave);
390
393
  return () => {
@@ -413,9 +416,12 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
413
416
  if (!focusable) {
414
417
  return;
415
418
  }
419
+ const anchorEl = getAnchorElement();
420
+ if (!anchorEl) {
421
+ return;
422
+ }
416
423
  const focus = () => openAndHold(true);
417
424
  const blur = () => openAndHold(false);
418
- const anchorEl = anchorRef.current;
419
425
  anchorEl.addEventListener('focus', focus);
420
426
  anchorEl.addEventListener('blur', blur);
421
427
  return () => {
@@ -431,12 +437,15 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
431
437
  if (!enterable) {
432
438
  return;
433
439
  }
440
+ const anchorEl = getAnchorElement();
441
+ if (!anchorEl) {
442
+ return;
443
+ }
434
444
  const keyDown = (e) => {
435
445
  if (e.key === 'Enter') {
436
446
  openAndHold(true);
437
447
  }
438
448
  };
439
- const anchorEl = anchorRef.current;
440
449
  anchorEl.addEventListener('keydown', keyDown);
441
450
  return () => {
442
451
  anchorEl.removeEventListener('keydown', keyDown);
@@ -450,8 +459,11 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
450
459
  if (!clickable) {
451
460
  return;
452
461
  }
462
+ const anchorEl = getAnchorElement();
463
+ if (!anchorEl) {
464
+ return;
465
+ }
453
466
  const click = () => openAndHold(true);
454
- const anchorEl = anchorRef.current;
455
467
  anchorEl.addEventListener('click', click);
456
468
  return () => {
457
469
  anchorEl.removeEventListener('click', click);
@@ -465,10 +477,13 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
465
477
  */
466
478
  useEffect(() => {
467
479
  if (clickToClose) {
480
+ const anchorEl = getAnchorElement();
481
+ if (!anchorEl) {
482
+ return;
483
+ }
468
484
  const click = () => {
469
485
  setOpenForce(false);
470
486
  };
471
- const anchorEl = anchorRef.current;
472
487
  anchorEl.addEventListener('click', click);
473
488
  return () => {
474
489
  anchorEl.removeEventListener('click', click);
@@ -483,12 +498,15 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
483
498
  if (!contextMenuable) {
484
499
  return;
485
500
  }
501
+ const anchorEl = getAnchorElement();
502
+ if (!anchorEl) {
503
+ return;
504
+ }
486
505
  const contextMenu = (e) => {
487
506
  e.preventDefault();
488
507
  setContextMenuEvent(e);
489
508
  openAndHold(true);
490
509
  };
491
- const anchorEl = anchorRef.current;
492
510
  anchorEl.addEventListener('contextmenu', contextMenu);
493
511
  return () => {
494
512
  anchorEl.removeEventListener('contextmenu', contextMenu);
@@ -518,7 +536,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
518
536
  })
519
537
  : children, renderedOnce.current && createPortal(_jsx(ClickAway, { disabled: !clickable && !enterable && !contextMenuable,
520
538
  // 右键菜单点击anchor需要关闭弹框
521
- targets: () => contextMenuEvent.current ? null : anchorRef.current, onClickAway: onClickAway, children: _jsx("div", { ...props, ref: innerPopperRef, css: style, className: clsx(classes.root, props.className), style: {
539
+ targets: () => contextMenuEvent.current ? void 0 : getAnchorElement(), onClickAway: onClickAway, children: _jsx("div", { ...props, ref: innerPopperRef, css: style, className: clsx(classes.root, props.className), style: {
522
540
  ...popperBounding,
523
541
  ...!openNextFrame.current && {
524
542
  transition: 'none',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canlooks/can-ui",
3
- "version": "0.0.105",
3
+ "version": "0.0.106",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",