@homecode/ui 5.20.5 → 5.20.6
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.
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import cn from 'classnames';
|
|
3
|
-
import { useState, useRef, useId, useEffect } from 'react';
|
|
4
2
|
import { Card, CardHeader, CardContent, CardFooter } from '../Card/Card.js';
|
|
3
|
+
import { useState, useRef, useId, useEffect } from 'react';
|
|
5
4
|
import { Icon } from '../Icon/Icon.js';
|
|
6
5
|
import { Portal } from '../Portal/Portal.js';
|
|
7
|
-
import { isBrowser } from '../../tools/env.js';
|
|
8
6
|
import S from './Dialogue.styl.js';
|
|
7
|
+
import cn from 'classnames';
|
|
8
|
+
import { isBrowser } from '../../tools/env.js';
|
|
9
9
|
|
|
10
10
|
const FOOTER_ALIGN_CLASS = {
|
|
11
11
|
left: S.footerAlignLeft,
|
|
@@ -94,10 +94,9 @@ function Dialogue({ open, onOpenChange, disabled, trigger, title, subtitle, icon
|
|
|
94
94
|
};
|
|
95
95
|
const onTriggerClick = !disabled ? () => onOpenChange(true) : undefined;
|
|
96
96
|
const dialogueContent = (jsxs(Fragment, { children: [jsx("div", { className: cn(S.dialogOverlay, open && !isAnimating && S.isOpen), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs(Card, { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-describedby": subtitle ? descriptionId : undefined, className: cn(S.dialogContent, S[`size-${size}`], open && !isAnimating && S.isOpen, !open && isAnimating && S.isClosed, className), tabIndex: -1, style: {
|
|
97
|
-
width
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
: undefined,
|
|
97
|
+
width: width &&
|
|
98
|
+
`min(${typeof width === 'number' ? `${width}px` : width}, calc(100% - var(--p-5)))`,
|
|
99
|
+
maxHeight: maxHeight && `min(${String(maxHeight)}, calc(100% - var(--p-5)))`,
|
|
101
100
|
}, children: [(title || subtitle || icon) && (jsx(CardHeader, { icon: icon, title: title, description: subtitle, titleId: titleId, descriptionId: descriptionId })), jsx("button", { className: S.dialogClose, onClick: handleCloseClick, "aria-label": "Close dialog", type: "button", children: jsx(Icon, { type: "close", size: "m" }) }), content && (jsx(CardContent, { className: contentClassName, noScroll: noScroll, autoScrollBottom: autoScrollBottom, children: content })), footer && (jsx(CardFooter, { className: FOOTER_ALIGN_CLASS[footerAlignment], children: footer }))] })] }));
|
|
102
101
|
return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open && !disabled && isMounted && isBrowser && (jsx(Portal, { children: dialogueContent }))] }));
|
|
103
102
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".Dialogue_dialogOverlay__jjBIa{backdrop-filter:blur(4px);background-color:var(--decent-color-alpha-900);inset:0;opacity:0;position:fixed;transition:opacity .2s ease-out;z-index:10}.Dialogue_dialogOverlay__jjBIa.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_fadeIn__RSEB2;animation-timing-function:ease-out;opacity:1}.Dialogue_dialogContent__-Lxde{border-radius:var(--border-radius-l);box-shadow:0 10px 20px rgba(0,0,0,.3),0 0 0 2px var(--decent-color-alpha-800);display:flex;flex-direction:column;left:50%;max-height:calc(100% - var(--p-5));opacity:0;position:fixed;top:50%;transform:translateX(-50%) translateY(-50%) scale(.95);transition:opacity .2s ease-out,transform .2s ease-out;width:-moz-fit-content;width:fit-content;z-index:10}.Dialogue_dialogContent__-Lxde.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueIn__M0tLL;animation-timing-function:ease-out;opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}.Dialogue_dialogContent__-Lxde.Dialogue_isClosed__lHYyZ{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueOut__6bLTY;animation-timing-function:ease-in;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-50%) scale(.95)}@media (max-width:700px){.Dialogue_dialogContent__-Lxde{
|
|
1
|
+
var css_248z = ".Dialogue_dialogOverlay__jjBIa{backdrop-filter:blur(4px);background-color:var(--decent-color-alpha-900);inset:0;opacity:0;position:fixed;transition:opacity .2s ease-out;z-index:10}.Dialogue_dialogOverlay__jjBIa.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_fadeIn__RSEB2;animation-timing-function:ease-out;opacity:1}.Dialogue_dialogContent__-Lxde{border-radius:var(--border-radius-l);box-shadow:0 10px 20px rgba(0,0,0,.3),0 0 0 2px var(--decent-color-alpha-800);display:flex;flex-direction:column;left:50%;max-height:calc(100% - var(--p-5));opacity:0;position:fixed;top:50%;transform:translateX(-50%) translateY(-50%) scale(.95);transition:opacity .2s ease-out,transform .2s ease-out;width:-moz-fit-content;width:fit-content;z-index:10}.Dialogue_dialogContent__-Lxde.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueIn__M0tLL;animation-timing-function:ease-out;opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}.Dialogue_dialogContent__-Lxde.Dialogue_isClosed__lHYyZ{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueOut__6bLTY;animation-timing-function:ease-in;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-50%) scale(.95)}@media (max-width:700px){.Dialogue_dialogContent__-Lxde{width:calc(100% - var(--p-5))}}.Dialogue_dialogContent__-Lxde:has(.Dialogue_dialogClose__5q12n) [data-slot=card-header]{padding-right:calc(2rem + var(--p-3))}.Dialogue_size-default__X1sdB{max-width:min(40rem,calc(100% - var(--p-5)))}.Dialogue_size-login__GyixB{max-width:min(24rem,calc(100% - var(--p-5)))}.Dialogue_size-wide__HQbiX{max-width:calc(100% - var(--p-5))}@media (min-width:700px){.Dialogue_size-wide__HQbiX{max-width:80rem}}.Dialogue_dialogClose__5q12n{align-items:center;background-color:transparent;border:none;border-radius:var(--border-radius-s);box-shadow:inset 0 0 0 2px none;color:var(--accent-color);cursor:pointer;display:flex;height:2rem;justify-content:center;opacity:.3;position:absolute;right:var(--p-3);top:var(--p-3);transform-origin:center;transition:opacity .2s ease,transform .2s ease;width:2rem;z-index:10}.Dialogue_dialogClose__5q12n:focus-visible,.Dialogue_dialogClose__5q12n:hover{opacity:1;transform:scale(1.1)}.Dialogue_dialogClose__5q12n:focus-visible{box-shadow:0 0 0 2px var(--active-color)}.Dialogue_dialogClose__5q12n:disabled{pointer-events:none}.Dialogue_footerAlignLeft__xQUD8{justify-content:flex-start}.Dialogue_footerAlignCenter__yq9Mu{justify-content:center}.Dialogue_footerAlignRight__Yo7hG{justify-content:flex-end}@keyframes Dialogue_fadeIn__RSEB2{0%{opacity:0}to{opacity:1}}@keyframes Dialogue_dialogueIn__M0tLL{0%{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}@keyframes Dialogue_dialogueOut__6bLTY{0%{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}to{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}}";
|
|
2
2
|
var S = {"dialogOverlay":"Dialogue_dialogOverlay__jjBIa","isOpen":"Dialogue_isOpen__gISMb","fadeIn":"Dialogue_fadeIn__RSEB2","dialogContent":"Dialogue_dialogContent__-Lxde","dialogueIn":"Dialogue_dialogueIn__M0tLL","isClosed":"Dialogue_isClosed__lHYyZ","dialogueOut":"Dialogue_dialogueOut__6bLTY","dialogClose":"Dialogue_dialogClose__5q12n","size-default":"Dialogue_size-default__X1sdB","size-login":"Dialogue_size-login__GyixB","size-wide":"Dialogue_size-wide__HQbiX","footerAlignLeft":"Dialogue_footerAlignLeft__xQUD8","footerAlignCenter":"Dialogue_footerAlignCenter__yq9Mu","footerAlignRight":"Dialogue_footerAlignRight__Yo7hG"};
|
|
3
3
|
if (typeof document !== 'undefined') {
|
|
4
4
|
var __uilibHead = document.head || document.getElementsByTagName('head')[0];
|