@dynamic-framework/ui-react 1.24.0 → 1.25.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.
- package/dist/css/dynamic-ui-non-root.css +1 -1
- package/dist/css/dynamic-ui-non-root.min.css +1 -1
- package/dist/css/dynamic-ui-root.css +1 -1
- package/dist/css/dynamic-ui-root.min.css +1 -1
- package/dist/css/dynamic-ui.css +1 -1
- package/dist/css/dynamic-ui.min.css +1 -1
- package/dist/index.esm.js +34 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +29 -1
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/css/dynamic-ui.css
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import React, { useMemo, useEffect, useState, useCallback, createContext, useContext, Fragment
|
|
1
|
+
import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
2
|
+
import React, { useMemo, useEffect, useState, useCallback, createContext, useContext, Fragment, forwardRef, useRef } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { __rest } from 'tslib';
|
|
5
5
|
import { createPortal } from 'react-dom';
|
|
@@ -156,7 +156,35 @@ function DPortalContextProvider({ portalName, children, availablePortals, }) {
|
|
|
156
156
|
openPortal,
|
|
157
157
|
closePortal,
|
|
158
158
|
}), [stack, openPortal, closePortal]);
|
|
159
|
-
|
|
159
|
+
const handleClose = useCallback((target) => {
|
|
160
|
+
if (target instanceof HTMLDivElement) {
|
|
161
|
+
if (target.classList.contains('portal')) {
|
|
162
|
+
if (!('bsBackdrop' in target.dataset)) {
|
|
163
|
+
closePortal();
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}, [closePortal]);
|
|
168
|
+
useEffect(() => {
|
|
169
|
+
const keyEvent = (event) => {
|
|
170
|
+
if (event.key === 'Escape') {
|
|
171
|
+
const lastModal = document.querySelector(`#${portalName} > div > div:last-child`);
|
|
172
|
+
if (lastModal) {
|
|
173
|
+
handleClose(lastModal);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
if (stack.length !== 0) {
|
|
178
|
+
window.addEventListener('keydown', keyEvent);
|
|
179
|
+
}
|
|
180
|
+
return () => {
|
|
181
|
+
window.removeEventListener('keydown', keyEvent);
|
|
182
|
+
};
|
|
183
|
+
}, [handleClose, portalName, stack.length]);
|
|
184
|
+
return (jsxs(DPortalContext.Provider, { value: value, children: [children, created && createPortal(
|
|
185
|
+
// eslint-disable-next-line max-len
|
|
186
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
187
|
+
jsx("div", { onClick: ({ target }) => handleClose(target), onKeyDown: () => { }, children: stack.map(({ Component, name, payload, }) => (jsxs(Fragment, { children: [jsx("div", { className: "backdrop fade show" }), jsx(Component, { name: name, payload: payload })] }, name))) }), document.getElementById(portalName))] }));
|
|
160
188
|
}
|
|
161
189
|
function useDPortalContext() {
|
|
162
190
|
const context = useContext(DPortalContext);
|
|
@@ -1022,7 +1050,7 @@ function DModalBody({ children, className, style, }) {
|
|
|
1022
1050
|
}
|
|
1023
1051
|
|
|
1024
1052
|
function DModalFooter({ className, style, actionPlacement = 'fill', children, }) {
|
|
1025
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: "d-modal-separator" }), jsx("div", { className: classNames(`modal-footer d-modal-action-${actionPlacement}`, className), style: style, children: children })] }));
|
|
1053
|
+
return (jsxs(Fragment$1, { children: [jsx("div", { className: "d-modal-separator" }), jsx("div", { className: classNames(`modal-footer d-modal-action-${actionPlacement}`, className), style: style, children: children })] }));
|
|
1026
1054
|
}
|
|
1027
1055
|
|
|
1028
1056
|
function DModal({ name, className, style, staticBackdrop, scrollable, centered, fullScreen, fullScreenFrom, size, children, }) {
|
|
@@ -1247,7 +1275,7 @@ function DStepper$1({ options, currentStep, className, style, }) {
|
|
|
1247
1275
|
from 180deg,
|
|
1248
1276
|
var(--${PREFIX_BS}step-progress-outter-fill-background-color) ${currentAngle}deg,
|
|
1249
1277
|
var(--${PREFIX_BS}step-progress-outter-background-color) 0deg)`, [currentAngle]);
|
|
1250
|
-
return (jsxs("div", { className: classNames('d-stepper', className), style: style, children: [jsx("div", { className: "d-step-bar", style: { background: progressStyle }, children: jsx("p", { className: "d-step-number", children: `${currentStep}/${options.length}` }) }), jsx("div", { className: "d-step-info", children: Object.keys(currentOption).length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "d-step-label", children: currentOption.label }), jsx("div", { className: "d-step-description", children: currentOption.description || '' })] })) })] }));
|
|
1278
|
+
return (jsxs("div", { className: classNames('d-stepper', className), style: style, children: [jsx("div", { className: "d-step-bar", style: { background: progressStyle }, children: jsx("p", { className: "d-step-number", children: `${currentStep}/${options.length}` }) }), jsx("div", { className: "d-step-info", children: Object.keys(currentOption).length > 0 && (jsxs(Fragment$1, { children: [jsx("div", { className: "d-step-label", children: currentOption.label }), jsx("div", { className: "d-step-description", children: currentOption.description || '' })] })) })] }));
|
|
1251
1279
|
}
|
|
1252
1280
|
|
|
1253
1281
|
function DStepper({ options, currentStep, iconSuccess, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle = false, vertical = false, breakpoint = 'lg', className, style, }) {
|
|
@@ -1289,7 +1317,7 @@ function DTooltip({ className, childrenClassName, style, offSet = ARROW_HEIGHT +
|
|
|
1289
1317
|
role,
|
|
1290
1318
|
]);
|
|
1291
1319
|
const generateClasses = useMemo(() => (Object.assign({ 'tooltip show': true, [`tooltip-${size}`]: !!size, [`tooltip-${theme}`]: !!theme }, className && { [className]: true })), [size, theme, className]);
|
|
1292
|
-
return (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: childrenClassName, ref: refs.setReference }, getReferenceProps(), { children: Component })), jsx(FloatingPortal, { children: isOpen && (jsxs("div", Object.assign({ className: classNames(generateClasses), ref: refs.setFloating, style: Object.assign(Object.assign({}, floatingStyles), style) }, getFloatingProps(), { children: [jsx(FloatingArrow, { ref: arrowRef, context: context, width: ARROW_WIDTH, height: ARROW_HEIGHT }), jsx("div", { className: "tooltip-inner", children: children })] }))) })] }));
|
|
1320
|
+
return (jsxs(Fragment$1, { children: [jsx("div", Object.assign({ className: childrenClassName, ref: refs.setReference }, getReferenceProps(), { children: Component })), jsx(FloatingPortal, { children: isOpen && (jsxs("div", Object.assign({ className: classNames(generateClasses), ref: refs.setFloating, style: Object.assign(Object.assign({}, floatingStyles), style) }, getFloatingProps(), { children: [jsx(FloatingArrow, { ref: arrowRef, context: context, width: ARROW_WIDTH, height: ARROW_HEIGHT }), jsx("div", { className: "tooltip-inner", children: children })] }))) })] }));
|
|
1293
1321
|
}
|
|
1294
1322
|
|
|
1295
1323
|
const TabContext = createContext(undefined);
|