@homecode/ui 5.13.0 → 5.14.1
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/esm/src/components/Dialogue/Dialogue.js +2 -6
- package/dist/esm/src/components/Dialogue/Dialogue.styl.js +1 -1
- package/dist/esm/src/components/Tabs/Tabs.js +5 -5
- package/dist/esm/src/components/Tabs/Tabs.styl.js +2 -2
- package/dist/esm/types/src/components/Tabs/Tabs.types.d.ts +3 -1
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { useState, useRef, useId, useEffect } from 'react';
|
|
4
|
-
import { createPortal } from 'react-dom';
|
|
5
4
|
import { Card, CardHeader, CardContent, CardFooter } from '../Card/Card.js';
|
|
6
5
|
import { Icon } from '../Icon/Icon.js';
|
|
6
|
+
import { Portal } from '../Portal/Portal.js';
|
|
7
7
|
import { isBrowser } from '../../tools/env.js';
|
|
8
8
|
import S from './Dialogue.styl.js';
|
|
9
9
|
|
|
@@ -99,11 +99,7 @@ function Dialogue({ open, onOpenChange, disabled, trigger, title, subtitle, icon
|
|
|
99
99
|
? `min(${String(maxHeight)}, calc(100% - var(--p-5)))`
|
|
100
100
|
: undefined,
|
|
101
101
|
}, 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
|
-
return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open &&
|
|
103
|
-
!disabled &&
|
|
104
|
-
isMounted &&
|
|
105
|
-
isBrowser &&
|
|
106
|
-
createPortal(dialogueContent, document.body)] }));
|
|
102
|
+
return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open && !disabled && isMounted && isBrowser && (jsx(Portal, { children: dialogueContent }))] }));
|
|
107
103
|
}
|
|
108
104
|
|
|
109
105
|
export { Dialogue, S as DialogueStyles };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".Dialogue_dialogOverlay__jjBIa{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--decent-color-alpha-900);inset:0;opacity:0;position:fixed;transition:opacity .2s ease-out;z-index:
|
|
3
|
+
var css_248z = ".Dialogue_dialogOverlay__jjBIa{-webkit-backdrop-filter:blur(4px);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{max-width:calc(100% - var(--p-5));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:40rem}.Dialogue_size-login__GyixB{max-width:24rem}.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)}}";
|
|
4
4
|
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"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { useState, useEffect, useCallback, createElement } from 'react';
|
|
2
2
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
|
-
import cn from 'classnames';
|
|
4
|
-
import { Scroll } from '../Scroll/Scroll.js';
|
|
5
3
|
import { Button } from '../Button/Button.js';
|
|
6
4
|
import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
|
|
7
5
|
import S from './Tabs.styl.js';
|
|
6
|
+
import { Scroll } from '../Scroll/Scroll.js';
|
|
7
|
+
import cn from 'classnames';
|
|
8
8
|
|
|
9
9
|
const isId = id => ['string', 'number'].includes(typeof id);
|
|
10
10
|
function Tabs(props) {
|
|
11
|
-
const { size = 'm', className, tabsWrapperClassName, tabsClassName, contentClassName, items, hideTabsIfSingle = false, allowEmpty = false, onChange, renderAll, activeId: initialId, children, ...rest } = props;
|
|
11
|
+
const { size = 'm', variant = 'default', className, tabsWrapperClassName, tabsInnerClassName, tabsClassName, contentClassName, items, hideTabsIfSingle = false, allowEmpty = false, onChange, renderAll, activeId: initialId, children, ...rest } = props;
|
|
12
12
|
const [activeId, setActiveId] = useState(isId(initialId) ? initialId : allowEmpty ? null : items[0].id);
|
|
13
13
|
useEffect(() => {
|
|
14
14
|
if (isId(initialId)) {
|
|
@@ -35,9 +35,9 @@ function Tabs(props) {
|
|
|
35
35
|
if (renderAll || forceRender || isActive) {
|
|
36
36
|
tabsContent.push(jsx("div", { className: cn(contentClassName, currContentClassName, !isActive && S.inactive), children: tabContent }, id));
|
|
37
37
|
}
|
|
38
|
-
return (createElement(Button, { ...rest, className: cn(S.tab, rest.className), size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
|
|
38
|
+
return (createElement(Button, { ...rest, className: cn(S.tab, isActive && S.active, rest.className), size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
|
|
39
39
|
});
|
|
40
|
-
const tabs = tabsButtons.length === 1 && hideTabsIfSingle ? null : (jsx(Scroll, { x: true, offset: { x: { before: 10, after: 10 } }, className: tabsWrapperClassName, innerClassName: cn(S.tabsScroll, S[`size-${size}`]), autoHide: true, fadeSize: size, size: size, children: jsx(ButtonGroup, { className: tabsClassName, ...rest, children: tabsButtons }) }));
|
|
40
|
+
const tabs = tabsButtons.length === 1 && hideTabsIfSingle ? null : (jsx(Scroll, { x: true, offset: { x: { before: 10, after: 10 } }, className: tabsWrapperClassName, innerClassName: cn(S.tabsScroll, S[`size-${size}`], tabsInnerClassName), autoHide: true, fadeSize: size, size: size, children: jsx(ButtonGroup, { className: cn(variant === 'links' && S['variant-links'], tabsClassName), ...rest, children: tabsButtons }) }));
|
|
41
41
|
if (typeof children === 'function') {
|
|
42
42
|
return children({
|
|
43
43
|
tabs,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "div .Tabs_inactive__H0mPh{display:none}.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-5)}.Tabs_size-xs__J0-xo.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-3)}.Tabs_size-s__bz7NO.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-4)}.Tabs_size-l__emJzX.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.2)}.Tabs_size-xl__Kqzt-.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.35)}.Tabs_tab__-oN-g{flex-shrink:0;white-space:nowrap}";
|
|
4
|
-
var S = {"inactive":"Tabs_inactive__H0mPh","tabsScroll":"Tabs_tabsScroll__7Dj0S","size-xs":"Tabs_size-xs__J0-xo","size-s":"Tabs_size-s__bz7NO","size-l":"Tabs_size-l__emJzX","size-xl":"Tabs_size-xl__Kqzt-","tab":"Tabs_tab__-oN-g"};
|
|
3
|
+
var css_248z = "div .Tabs_inactive__H0mPh{display:none}.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-5)}.Tabs_size-xs__J0-xo.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-3)}.Tabs_size-s__bz7NO.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-4)}.Tabs_size-l__emJzX.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.2)}.Tabs_size-xl__Kqzt-.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.35)}.Tabs_tab__-oN-g{flex-shrink:0;white-space:nowrap}.Tabs_variant-links__-N1Ym>button:not(:first-child){border-radius:inherit;margin-left:0}.Tabs_variant-links__-N1Ym>button:not(:last-child){border-radius:inherit}.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g{background-color:transparent!important;box-shadow:none;padding:var(--p-3) var(--p-5)}.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g:focus,.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g:hover{background-color:transparent!important;box-shadow:0 2px 0 0 var(--active-color-alpha-100)}.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g.Tabs_active__nOA5N,.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g.Tabs_active__nOA5N:focus,.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g.Tabs_active__nOA5N:hover{background-color:transparent!important;box-shadow:0 2px 0 0 var(--active-color);color:inherit}";
|
|
4
|
+
var S = {"inactive":"Tabs_inactive__H0mPh","tabsScroll":"Tabs_tabsScroll__7Dj0S","size-xs":"Tabs_size-xs__J0-xo","size-s":"Tabs_size-s__bz7NO","size-l":"Tabs_size-l__emJzX","size-xl":"Tabs_size-xl__Kqzt-","tab":"Tabs_tab__-oN-g","variant-links":"Tabs_variant-links__-N1Ym","active":"Tabs_active__nOA5N"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { S as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Size } from 'uilib/types';
|
|
2
1
|
import { ButtonProps } from '../Button/Button';
|
|
3
2
|
import { ReactNode } from 'react';
|
|
3
|
+
import { Size } from 'uilib/types';
|
|
4
4
|
type ID = string | number;
|
|
5
5
|
export type Item = Omit<ButtonProps, 'children'> & {
|
|
6
6
|
id: ID;
|
|
@@ -17,8 +17,10 @@ export type RenderProps = {
|
|
|
17
17
|
};
|
|
18
18
|
export type Props = {
|
|
19
19
|
size?: Size;
|
|
20
|
+
variant?: 'default' | 'links';
|
|
20
21
|
className?: string;
|
|
21
22
|
tabsWrapperClassName?: string;
|
|
23
|
+
tabsInnerClassName?: string;
|
|
22
24
|
tabsClassName?: string;
|
|
23
25
|
contentClassName?: string;
|
|
24
26
|
items: Item[];
|