Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@instructure/ui-modal

Package Overview
Dependencies
Maintainers
43
Versions
1476
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@instructure/ui-modal - npm Package Compare versions

Comparing version

10.24.3-snapshot-1
to
10.24.3-snapshot-10

8

CHANGELOG.md

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

## [10.24.3-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.24.2...v10.24.3-snapshot-1) (2025-08-14)
## [10.24.3-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.24.2...v10.24.3-snapshot-10) (2025-08-29)
**Note:** Version bump only for package @instructure/ui-modal
### Bug Fixes
* **ui-modal:** fix Modal.body throwing error when 'as' is set to a React component ([350a05c](https://github.com/instructure/instructure-ui/commit/350a05c109ac219a885d0998290d00b20584e168))
* **ui-modal:** fix tabbable modal edge case ([e66ad32](https://github.com/instructure/instructure-ui/commit/e66ad32360a428668204bb8fb1299448af639200))
## [10.24.2](https://github.com/instructure/instructure-ui/compare/v10.24.1...v10.24.2) (2025-08-11)

@@ -16,0 +20,0 @@

23

es/Modal/ModalBody/index.js

@@ -73,4 +73,16 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";

}
getFinalRef(el) {
if (!el) {
return void 0;
}
if (el instanceof Element) {
return el;
}
if (el.ref) {
return this.getFinalRef(el.ref);
}
return void 0;
}
render() {
var _this$props$styles, _this$ref, _this$ref2;
var _this$props$styles, _finalRef$scrollHeigh, _finalRef$getBounding, _finalRef$getBounding2;
const _this$props3 = this.props,

@@ -86,2 +98,6 @@ as = _this$props3.as,

const isFit = overflow === 'fit';
// this recursive function is needed because `ref` can be a React component.
// TODO rethink, the 'as' prop, likely its not a good idea to allow React
// components. See INSTUI-4674
const finalRef = this.getFinalRef(this.ref);
return _jsx(View, {

@@ -96,5 +112,6 @@ ...passthroughProps,

padding: padding
//check if there is a scrollbar, if so, the element has to be tabbable to be able to scroll with keyboard only
// check if there is a scrollbar, if so, the element has to be tabbable to be able to scroll with keyboard only
// epsilon tolerance is used to avoid false positives, this is generally safer than Math rounding techniques
,
...(((_this$ref = this.ref) === null || _this$ref === void 0 ? void 0 : _this$ref.scrollHeight) !== ((_this$ref2 = this.ref) === null || _this$ref2 === void 0 ? void 0 : _this$ref2.getBoundingClientRect().height) ? {
...(finalRef && Math.abs(((_finalRef$scrollHeigh = finalRef.scrollHeight) !== null && _finalRef$scrollHeigh !== void 0 ? _finalRef$scrollHeigh : 0) - ((_finalRef$getBounding = (_finalRef$getBounding2 = finalRef.getBoundingClientRect()) === null || _finalRef$getBounding2 === void 0 ? void 0 : _finalRef$getBounding2.height) !== null && _finalRef$getBounding !== void 0 ? _finalRef$getBounding : 0)) > 0.05 ? {
tabIndex: 0

@@ -101,0 +118,0 @@ } : {}),

23

lib/Modal/ModalBody/index.js

@@ -79,4 +79,16 @@ "use strict";

}
getFinalRef(el) {
if (!el) {
return void 0;
}
if (el instanceof Element) {
return el;
}
if (el.ref) {
return this.getFinalRef(el.ref);
}
return void 0;
}
render() {
var _this$props$styles, _this$ref, _this$ref2;
var _this$props$styles, _finalRef$scrollHeigh, _finalRef$getBounding, _finalRef$getBounding2;
const _this$props3 = this.props,

@@ -92,2 +104,6 @@ as = _this$props3.as,

const isFit = overflow === 'fit';
// this recursive function is needed because `ref` can be a React component.
// TODO rethink, the 'as' prop, likely its not a good idea to allow React
// components. See INSTUI-4674
const finalRef = this.getFinalRef(this.ref);
return (0, _jsxRuntime.jsx)(_View.View, {

@@ -102,5 +118,6 @@ ...passthroughProps,

padding: padding
//check if there is a scrollbar, if so, the element has to be tabbable to be able to scroll with keyboard only
// check if there is a scrollbar, if so, the element has to be tabbable to be able to scroll with keyboard only
// epsilon tolerance is used to avoid false positives, this is generally safer than Math rounding techniques
,
...(((_this$ref = this.ref) === null || _this$ref === void 0 ? void 0 : _this$ref.scrollHeight) !== ((_this$ref2 = this.ref) === null || _this$ref2 === void 0 ? void 0 : _this$ref2.getBoundingClientRect().height) ? {
...(finalRef && Math.abs(((_finalRef$scrollHeigh = finalRef.scrollHeight) !== null && _finalRef$scrollHeigh !== void 0 ? _finalRef$scrollHeigh : 0) - ((_finalRef$getBounding = (_finalRef$getBounding2 = finalRef.getBoundingClientRect()) === null || _finalRef$getBounding2 === void 0 ? void 0 : _finalRef$getBounding2.height) !== null && _finalRef$getBounding !== void 0 ? _finalRef$getBounding : 0)) > 0.05 ? {
tabIndex: 0

@@ -107,0 +124,0 @@ } : {}),

38

package.json
{
"name": "@instructure/ui-modal",
"version": "10.24.3-snapshot-1",
"version": "10.24.3-snapshot-10",
"description": "A component for displaying content in a dialog overlay",

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

"@babel/runtime": "^7.27.6",
"@instructure/console": "10.24.3-snapshot-1",
"@instructure/emotion": "10.24.3-snapshot-1",
"@instructure/shared-types": "10.24.3-snapshot-1",
"@instructure/ui-buttons": "10.24.3-snapshot-1",
"@instructure/ui-dialog": "10.24.3-snapshot-1",
"@instructure/ui-dom-utils": "10.24.3-snapshot-1",
"@instructure/ui-motion": "10.24.3-snapshot-1",
"@instructure/ui-overlays": "10.24.3-snapshot-1",
"@instructure/ui-portal": "10.24.3-snapshot-1",
"@instructure/ui-prop-types": "10.24.3-snapshot-1",
"@instructure/ui-react-utils": "10.24.3-snapshot-1",
"@instructure/ui-testable": "10.24.3-snapshot-1",
"@instructure/ui-utils": "10.24.3-snapshot-1",
"@instructure/ui-view": "10.24.3-snapshot-1",
"@instructure/console": "10.24.3-snapshot-10",
"@instructure/emotion": "10.24.3-snapshot-10",
"@instructure/shared-types": "10.24.3-snapshot-10",
"@instructure/ui-buttons": "10.24.3-snapshot-10",
"@instructure/ui-dialog": "10.24.3-snapshot-10",
"@instructure/ui-dom-utils": "10.24.3-snapshot-10",
"@instructure/ui-motion": "10.24.3-snapshot-10",
"@instructure/ui-overlays": "10.24.3-snapshot-10",
"@instructure/ui-portal": "10.24.3-snapshot-10",
"@instructure/ui-prop-types": "10.24.3-snapshot-10",
"@instructure/ui-react-utils": "10.24.3-snapshot-10",
"@instructure/ui-testable": "10.24.3-snapshot-10",
"@instructure/ui-utils": "10.24.3-snapshot-10",
"@instructure/ui-view": "10.24.3-snapshot-10",
"prop-types": "^15.8.1"

@@ -48,6 +48,6 @@ },

"devDependencies": {
"@instructure/ui-babel-preset": "10.24.3-snapshot-1",
"@instructure/ui-color-utils": "10.24.3-snapshot-1",
"@instructure/ui-position": "10.24.3-snapshot-1",
"@instructure/ui-themes": "10.24.3-snapshot-1",
"@instructure/ui-babel-preset": "10.24.3-snapshot-10",
"@instructure/ui-color-utils": "10.24.3-snapshot-10",
"@instructure/ui-position": "10.24.3-snapshot-10",
"@instructure/ui-themes": "10.24.3-snapshot-10",
"@testing-library/jest-dom": "^6.6.3",

@@ -54,0 +54,0 @@ "@testing-library/react": "^16.0.1",

5

src/Modal/ModalBody/props.ts

@@ -37,3 +37,4 @@ /*

ModalBodyTheme,
OtherHTMLAttributes
OtherHTMLAttributes,
UIElement
} from '@instructure/shared-types'

@@ -44,3 +45,3 @@

padding?: Spacing
elementRef?: (element: Element | null) => void
elementRef?: (element: UIElement | null) => void
as?: AsElementType

@@ -47,0 +48,0 @@ variant?: 'default' | 'inverse'

10

types/Modal/ModalBody/index.d.ts
import { Component } from 'react';
import type { ModalBodyProps } from './props';
import { UIElement } from '@instructure/shared-types';
/**

@@ -14,3 +15,3 @@ ---

padding?: import("@instructure/emotion").Spacing;
elementRef?: (element: Element | null) => void;
elementRef?: (element: UIElement | null) => void;
as?: import("@instructure/shared-types").AsElementType;

@@ -23,3 +24,3 @@ variant?: "default" | "inverse";

padding?: import("@instructure/emotion").Spacing;
elementRef?: (element: Element | null) => void;
elementRef?: (element: UIElement | null) => void;
as?: import("@instructure/shared-types").AsElementType;

@@ -34,7 +35,8 @@ variant?: "default" | "inverse";

};
ref: Element | null;
handleRef: (el: Element | null) => void;
ref: UIElement | null;
handleRef: (el: UIElement | null) => void;
constructor(props: ModalBodyProps);
componentDidMount(): void;
componentDidUpdate(): void;
getFinalRef(el: UIElement): Element | undefined;
render(): import("@emotion/react/jsx-runtime").JSX.Element;

@@ -41,0 +43,0 @@ }

4

types/Modal/ModalBody/props.d.ts
import React from 'react';
import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
import type { AsElementType, PropValidators, ModalBodyTheme, OtherHTMLAttributes } from '@instructure/shared-types';
import type { AsElementType, PropValidators, ModalBodyTheme, OtherHTMLAttributes, UIElement } from '@instructure/shared-types';
type ModalBodyOwnProps = {
children?: React.ReactNode;
padding?: Spacing;
elementRef?: (element: Element | null) => void;
elementRef?: (element: UIElement | null) => void;
as?: AsElementType;

@@ -9,0 +9,0 @@ variant?: 'default' | 'inverse';

src/Modal/ModalBody/index.tsx

Sorry, the diff of this file is not supported yet

tsconfig.build.tsbuildinfo

Sorry, the diff of this file is not supported yet

types/Modal/ModalBody/index.d.ts.map

Sorry, the diff of this file is not supported yet

types/Modal/ModalBody/props.d.ts.map

Sorry, the diff of this file is not supported yet