Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@instructure/ui-popover

Package Overview
Dependencies
Maintainers
32
Versions
1264
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@instructure/ui-popover - npm Package Compare versions

Comparing version 8.56.4 to 8.56.5-pr-snapshot-1728655013879

8

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log

## [8.56.5-pr-snapshot-1728655013879](https://github.com/instructure/instructure-ui/compare/v8.56.4...v8.56.5-pr-snapshot-1728655013879) (2024-10-11)
**Note:** Version bump only for package @instructure/ui-popover
## [8.56.4](https://github.com/instructure/instructure-ui/compare/v8.56.3...v8.56.4) (2024-10-02)

@@ -8,0 +16,0 @@

88

lib/Popover/index.js

@@ -11,22 +11,12 @@ "use strict";

var _keycode = _interopRequireDefault(require("keycode"));
var _Position = require("@instructure/ui-position/lib/Position");
var _parsePlacement = require("@instructure/ui-position/lib/parsePlacement.js");
var _mirrorHorizontalPlacement = require("@instructure/ui-position/lib/mirrorHorizontalPlacement.js");
var _ContextView = require("@instructure/ui-view/lib/ContextView");
var _View = require("@instructure/ui-view/lib/View");
var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
var _containsActiveElement = require("@instructure/ui-dom-utils/lib/containsActiveElement.js");
var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnimationFrame.js");
var _handleMouseOverOut = require("@instructure/ui-dom-utils/lib/handleMouseOverOut.js");
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
var _shallowEqual = require("@instructure/ui-utils/lib/shallowEqual.js");
var _px = require("@instructure/ui-utils/lib/px.js");
var _uiPosition = require("@instructure/ui-position");
var _uiView = require("@instructure/ui-view");
var _uiDialog = require("@instructure/ui-dialog");
var _uiI18n = require("@instructure/ui-i18n");
var _uiDomUtils = require("@instructure/ui-dom-utils");
var _uiReactUtils = require("@instructure/ui-react-utils");
var _uiUtils = require("@instructure/ui-utils");
var _console = require("@instructure/console");
var _testable = require("@instructure/ui-testable/lib/testable.js");
var _FocusRegion = require("@instructure/ui-a11y-utils/lib/FocusRegion.js");
var _uiTestable = require("@instructure/ui-testable");
var _uiA11yUtils = require("@instructure/ui-a11y-utils");
var _props = require("./props");

@@ -63,3 +53,3 @@ var _dec, _dec2, _dec3, _class, _class2;

**/
let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Popover extends _react.Component {
let Popover = exports.Popover = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _uiI18n.textDirectionContextConsumer)(), _dec3 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Popover extends _react.Component {
constructor(props) {

@@ -134,3 +124,3 @@ super(props);

if (!this.props.shouldReturnFocus && this.props.shouldFocusContentOnTriggerBlur) {
const trigger = (0, _findDOMNode.findDOMNode)(this._trigger);
const trigger = (0, _uiDomUtils.findDOMNode)(this._trigger);
if (trigger && typeof trigger.focus === 'function') {

@@ -155,3 +145,3 @@ ;

event.preventDefault();
this._raf.push((0, _requestAnimationFrame.requestAnimationFrame)(() => {
this._raf.push((0, _uiDomUtils.requestAnimationFrame)(() => {
this._dialog && this._dialog.focus();

@@ -172,4 +162,4 @@ }));

if (on && on.indexOf('focus') > -1) {
this._raf.push((0, _requestAnimationFrame.requestAnimationFrame)(() => {
if (!(0, _containsActiveElement.containsActiveElement)(this._view)) {
this._raf.push((0, _uiDomUtils.requestAnimationFrame)(() => {
if (!(0, _uiDomUtils.containsActiveElement)(this._view)) {
this.hide(event);

@@ -199,3 +189,3 @@ }

this._renderTriggerProp = this.props.renderTrigger;
this._renderTrigger = (0, _callRenderProp.callRenderProp)(this.props.renderTrigger);
this._renderTrigger = (0, _uiReactUtils.callRenderProp)(this.props.renderTrigger);
this.state = {

@@ -209,7 +199,7 @@ placement: props.placement,

this._raf = [];
this._handleMouseOver = _handleMouseOverOut.handleMouseOverOut.bind(null, event => {
this._handleMouseOver = _uiDomUtils.handleMouseOverOut.bind(null, event => {
this.show(event);
clearTimeout(this.mouseOutTimeout);
});
this._handleMouseOut = _handleMouseOverOut.handleMouseOverOut.bind(null, event => {
this._handleMouseOut = _uiDomUtils.handleMouseOverOut.bind(null, event => {
// this is needed bc the trigger mouseOut fires before tooltip mouseOver

@@ -229,3 +219,3 @@ this.mouseOutTimeout = setTimeout(() => {

// the FocusRegionManager via Dialog
this._focusRegion = new _FocusRegion.FocusRegion(this._contentElement, {
this._focusRegion = new _uiA11yUtils.FocusRegion(this._contentElement, {
shouldCloseOnEscape: false,

@@ -249,3 +239,3 @@ shouldCloseOnDocumentClick: false,

shouldComponentUpdate(nextProps, nextState) {
return !(0, _shallowEqual.shallowEqual)(this.props, nextProps) || !(0, _shallowEqual.shallowEqual)(this.state, nextState);
return !(0, _uiUtils.shallowEqual)(this.props, nextProps) || !(0, _uiUtils.shallowEqual)(this.state, nextState);
}

@@ -281,3 +271,3 @@ componentDidUpdate(prevProps, prevState) {

if (this.props.shouldAlignArrow && this._view) {
const secondaryPlacement = (0, _parsePlacement.parsePlacement)(placement)[1];
const secondaryPlacement = (0, _uiPosition.parsePlacement)(placement)[1];

@@ -291,3 +281,3 @@ // arrowSize and arrowBorderWidth are component theme variables

arrowBorderWidth = _ref$arrowBorderWidth === void 0 ? 0 : _ref$arrowBorderWidth;
const offsetAmount = ((0, _px.px)(arrowSize) + (0, _px.px)(arrowBorderWidth)) * 2;
const offsetAmount = ((0, _uiUtils.px)(arrowSize) + (0, _uiUtils.px)(arrowBorderWidth)) * 2;
if (secondaryPlacement === 'start') {

@@ -311,5 +301,5 @@ offsetX = offsetAmount;

const dir = this.props.dir;
const isRtl = dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl;
const isRtl = dir === _uiI18n.textDirectionContextConsumer.DIRECTION.rtl;
if (isRtl) {
placement = (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ');
placement = (0, _uiPosition.mirrorHorizontalPlacement)(placement, ' ');
}

@@ -343,3 +333,3 @@ return !this.shown && this.props.shouldRenderOffscreen ? 'offscreen' : placement;

this._renderTriggerProp = this.props.renderTrigger;
this._renderTrigger = (0, _callRenderProp.callRenderProp)(this.props.renderTrigger);
this._renderTrigger = (0, _uiReactUtils.callRenderProp)(this.props.renderTrigger);
}

@@ -382,3 +372,3 @@ let trigger = this._renderTrigger;

}
trigger = (0, _safeCloneElement.safeCloneElement)(trigger, {
trigger = (0, _uiReactUtils.safeCloneElement)(trigger, {
ref: el => {

@@ -389,9 +379,9 @@ this._trigger = el;

'data-popover-trigger': true,
onKeyDown: (0, _createChainedFunction.createChainedFunction)(this.handleTriggerKeyDown, this.props.onKeyDown),
onKeyUp: (0, _createChainedFunction.createChainedFunction)(this.handleTriggerKeyUp, this.props.onKeyUp),
onClick: (0, _createChainedFunction.createChainedFunction)(onClick, this.props.onClick),
onBlur: (0, _createChainedFunction.createChainedFunction)(this.handleTriggerBlur, this.props.onBlur),
onFocus: (0, _createChainedFunction.createChainedFunction)(onFocus, this.props.onFocus),
onMouseOut: (0, _createChainedFunction.createChainedFunction)(onMouseOut, this.props.onMouseOut),
onMouseOver: (0, _createChainedFunction.createChainedFunction)(onMouseOver, this.props.onMouseOver)
onKeyDown: (0, _uiUtils.createChainedFunction)(this.handleTriggerKeyDown, this.props.onKeyDown),
onKeyUp: (0, _uiUtils.createChainedFunction)(this.handleTriggerKeyUp, this.props.onKeyUp),
onClick: (0, _uiUtils.createChainedFunction)(onClick, this.props.onClick),
onBlur: (0, _uiUtils.createChainedFunction)(this.handleTriggerBlur, this.props.onBlur),
onFocus: (0, _uiUtils.createChainedFunction)(onFocus, this.props.onFocus),
onMouseOut: (0, _uiUtils.createChainedFunction)(onMouseOut, this.props.onMouseOut),
onMouseOver: (0, _uiUtils.createChainedFunction)(onMouseOver, this.props.onMouseOver)
});

@@ -402,7 +392,7 @@ }

renderContent() {
let content = (0, _callRenderProp.callRenderProp)(this.props.children);
let content = (0, _uiReactUtils.callRenderProp)(this.props.children);
if (this.shown && !this.isTooltip) {
// if popover is NOT being used as a tooltip, create a Dialog
// to manage the content FocusRegion, when showing
content = /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
content = /*#__PURE__*/_react.default.createElement(_uiDialog.Dialog, {
open: this.shown,

@@ -452,5 +442,5 @@ label: this.props.screenReaderLabel,

background: color === 'primary' ? 'default' : 'inverse',
placement: this.props.dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement
placement: this.props.dir === _uiI18n.textDirectionContextConsumer.DIRECTION.rtl ? (0, _uiPosition.mirrorHorizontalPlacement)(placement, ' ') : placement
};
return /*#__PURE__*/_react.default.createElement(_ContextView.ContextView, viewProps, content);
return /*#__PURE__*/_react.default.createElement(_uiView.ContextView, viewProps, content);
} else {

@@ -465,3 +455,3 @@ viewProps = {

};
return /*#__PURE__*/_react.default.createElement(_View.View, viewProps, content);
return /*#__PURE__*/_react.default.createElement(_uiView.View, viewProps, content);
}

@@ -477,5 +467,5 @@ } else {

ref: this.handleRef
}, this.renderTrigger(), /*#__PURE__*/_react.default.createElement(_Position.Position, positionProps, this.renderContent()));
}, this.renderTrigger(), /*#__PURE__*/_react.default.createElement(_uiPosition.Position, positionProps, this.renderContent()));
} else {
return /*#__PURE__*/_react.default.createElement(_Position.Position, Object.assign({}, positionProps, {
return /*#__PURE__*/_react.default.createElement(_uiPosition.Position, Object.assign({}, positionProps, {
renderTarget: this.renderTrigger(),

@@ -482,0 +472,0 @@ elementRef: this.handleRef

6

lib/Popover/PopoverLocator.js

@@ -14,4 +14,4 @@ "use strict";

exports.customMethods = void 0;
var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
var _PositionLocator = require("@instructure/ui-position/lib/Position/PositionLocator");
var _uiTestLocator = require("@instructure/ui-test-locator");
var _PositionLocator = require("@instructure/ui-position/es/Position/PositionLocator");
var _index = require("./index");

@@ -52,2 +52,2 @@ var _PopoverTriggerLocator = require("./PopoverTriggerLocator");

// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
const PopoverLocator = exports.PopoverLocator = (0, _locator.locator)(_index.Popover.selector, customMethods);
const PopoverLocator = exports.PopoverLocator = (0, _uiTestLocator.locator)(_index.Popover.selector, customMethods);

4

lib/Popover/PopoverTriggerLocator.js

@@ -7,3 +7,3 @@ "use strict";

exports.PopoverTriggerLocator = void 0;
var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
var _uiTestLocator = require("@instructure/ui-test-locator");
/*

@@ -33,2 +33,2 @@ * The MIT License (MIT)

const PopoverTriggerLocator = exports.PopoverTriggerLocator = (0, _locator.locator)('[data-popover-trigger]');
const PopoverTriggerLocator = exports.PopoverTriggerLocator = (0, _uiTestLocator.locator)('[data-popover-trigger]');

14

lib/Popover/props.js

@@ -9,5 +9,5 @@ "use strict";

var _propTypes = _interopRequireDefault(require("prop-types"));
var _element = require("@instructure/ui-prop-types/lib/element.js");
var _uiPropTypes = require("@instructure/ui-prop-types");
var _emotion = require("@instructure/emotion");
var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
var _uiPosition = require("@instructure/ui-position");
/*

@@ -43,3 +43,3 @@ * The MIT License (MIT)

color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
placement: _PositionPropTypes.PositionPropTypes.placement,
placement: _uiPosition.PositionPropTypes.placement,
shadow: _emotion.ThemeablePropTypes.shadow,

@@ -52,8 +52,8 @@ stacking: _emotion.ThemeablePropTypes.stacking,

offsetY: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
constrain: _PositionPropTypes.PositionPropTypes.constrain,
positionTarget: _propTypes.default.oneOfType([_element.element, _propTypes.default.func]),
constrain: _uiPosition.PositionPropTypes.constrain,
positionTarget: _propTypes.default.oneOfType([_uiPropTypes.element, _propTypes.default.func]),
positionContainerDisplay: _propTypes.default.oneOf(['inline-block', 'block']),
mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
mountNode: _uiPosition.PositionPropTypes.mountNode,
insertAt: _propTypes.default.oneOf(['bottom', 'top']),
liveRegion: _propTypes.default.oneOfType([_element.element, _propTypes.default.arrayOf(_element.element), _propTypes.default.func]),
liveRegion: _propTypes.default.oneOfType([_uiPropTypes.element, _propTypes.default.arrayOf(_uiPropTypes.element), _propTypes.default.func]),
id: _propTypes.default.string,

@@ -60,0 +60,0 @@ shouldAlignArrow: _propTypes.default.bool,

38

package.json
{
"name": "@instructure/ui-popover",
"version": "8.56.4",
"version": "8.56.5-pr-snapshot-1728655013879",
"description": "A component for hiding or showing content based on user interaction.",

@@ -27,15 +27,15 @@ "author": "Instructure, Inc. Engineering and Product Design",

"@babel/runtime": "^7.23.2",
"@instructure/console": "8.56.4",
"@instructure/emotion": "8.56.4",
"@instructure/ui-a11y-utils": "8.56.4",
"@instructure/ui-dialog": "8.56.4",
"@instructure/ui-dom-utils": "8.56.4",
"@instructure/ui-i18n": "8.56.4",
"@instructure/ui-position": "8.56.4",
"@instructure/ui-prop-types": "8.56.4",
"@instructure/ui-react-utils": "8.56.4",
"@instructure/ui-testable": "8.56.4",
"@instructure/ui-utils": "8.56.4",
"@instructure/ui-view": "8.56.4",
"@instructure/uid": "8.56.4",
"@instructure/console": "8.56.5-pr-snapshot-1728655013879",
"@instructure/emotion": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-a11y-utils": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-dialog": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-dom-utils": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-i18n": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-position": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-prop-types": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-react-utils": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-testable": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-utils": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-view": "8.56.5-pr-snapshot-1728655013879",
"@instructure/uid": "8.56.5-pr-snapshot-1728655013879",
"keycode": "^2.2.1",

@@ -45,7 +45,7 @@ "prop-types": "^15.8.1"

"devDependencies": {
"@instructure/ui-babel-preset": "8.56.4",
"@instructure/ui-color-utils": "8.56.4",
"@instructure/ui-test-locator": "8.56.4",
"@instructure/ui-test-queries": "8.56.4",
"@instructure/ui-test-utils": "8.56.4",
"@instructure/ui-babel-preset": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-color-utils": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-test-locator": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-test-queries": "8.56.5-pr-snapshot-1728655013879",
"@instructure/ui-test-utils": "8.56.5-pr-snapshot-1728655013879",
"@testing-library/jest-dom": "^6.1.4",

@@ -52,0 +52,0 @@ "@testing-library/react": "^14.1.2",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc