@snokam/ui 7.1.0 → 7.2.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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [7.2.0](https://github.com/snokam/components/compare/@snokam/ui@7.1.0...@snokam/ui@7.2.0) (2026-11-02)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **mobile:** cards instead of wide tables, full-screen panels and olaf, action sheets, 44px touch targets, no ios input zoom ([71418fe](https://github.com/snokam/components/commit/71418feb79347c44cff8e9e5ff869635928dad8b))
|
|
11
|
+
|
|
6
12
|
# [7.1.0](https://github.com/snokam/components/compare/@snokam/ui@7.0.0...@snokam/ui@7.1.0) (2026-11-01)
|
|
7
13
|
|
|
8
14
|
### Bug Fixes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AA+GpD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA8CA;AA+BD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAe,GAChB,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC/B,+BAeA"}
|
|
@@ -7,6 +7,7 @@ import CloseIcon from "@mui/icons-material/Close";
|
|
|
7
7
|
import { tokens, SPACE } from "@snokam/ui/tokens";
|
|
8
8
|
import { useDockedPanelWidth } from "./useDockedPanelWidth";
|
|
9
9
|
import { useEscapeToClose } from "./useEscapeToClose";
|
|
10
|
+
const PHONE = "@media (max-width: 599px)";
|
|
10
11
|
const OverlayHeader = styled.div `
|
|
11
12
|
display: flex;
|
|
12
13
|
align-items: center;
|
|
@@ -15,6 +16,10 @@ const OverlayHeader = styled.div `
|
|
|
15
16
|
padding: ${SPACE.lg} ${SPACE.xl};
|
|
16
17
|
border-bottom: 1px solid var(--o-border);
|
|
17
18
|
background: var(--o-surface-section);
|
|
19
|
+
|
|
20
|
+
${PHONE} {
|
|
21
|
+
padding: ${SPACE.md} ${SPACE.lg};
|
|
22
|
+
}
|
|
18
23
|
`;
|
|
19
24
|
const OverlayTitle = styled.h2 `
|
|
20
25
|
margin: 0;
|
|
@@ -22,8 +27,15 @@ const OverlayTitle = styled.h2 `
|
|
|
22
27
|
color: var(--o-text);
|
|
23
28
|
`;
|
|
24
29
|
const OverlayBody = styled.div `
|
|
30
|
+
flex: 1 1 auto;
|
|
31
|
+
min-height: 0;
|
|
25
32
|
padding: ${SPACE.xl};
|
|
26
33
|
overflow-y: auto;
|
|
34
|
+
overscroll-behavior: contain;
|
|
35
|
+
|
|
36
|
+
${PHONE} {
|
|
37
|
+
padding: ${SPACE.lg};
|
|
38
|
+
}
|
|
27
39
|
`;
|
|
28
40
|
const OverlayFooter = styled.div `
|
|
29
41
|
display: flex;
|
|
@@ -32,6 +44,12 @@ const OverlayFooter = styled.div `
|
|
|
32
44
|
gap: ${SPACE.md};
|
|
33
45
|
padding: ${SPACE.lg} ${SPACE.xl};
|
|
34
46
|
border-top: 1px solid var(--o-border);
|
|
47
|
+
|
|
48
|
+
${PHONE} {
|
|
49
|
+
flex-wrap: wrap;
|
|
50
|
+
padding: ${SPACE.md} ${SPACE.lg}
|
|
51
|
+
calc(${SPACE.md} + env(safe-area-inset-bottom, 0px));
|
|
52
|
+
}
|
|
35
53
|
`;
|
|
36
54
|
const DrawerBackdrop = styled(Backdrop) `
|
|
37
55
|
z-index: 1299;
|
|
@@ -58,6 +76,16 @@ const PanelDrawer = styled(MuiDrawer, {
|
|
|
58
76
|
);
|
|
59
77
|
box-shadow: var(--o-shadow-card);
|
|
60
78
|
}
|
|
79
|
+
|
|
80
|
+
${PHONE} {
|
|
81
|
+
& .MuiDrawer-paper,
|
|
82
|
+
&[data-docked="true"] .MuiDrawer-paper {
|
|
83
|
+
top: 0;
|
|
84
|
+
right: 0;
|
|
85
|
+
height: 100dvh;
|
|
86
|
+
border-left: none;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
61
89
|
`;
|
|
62
90
|
const DrawerPanel = styled.div `
|
|
63
91
|
display: flex;
|
|
@@ -85,6 +113,14 @@ const StyledDialog = styled(MuiDialog) `
|
|
|
85
113
|
margin: ${SPACE.lg};
|
|
86
114
|
max-width: calc(100vw - ${SPACE.lg} * 2);
|
|
87
115
|
}
|
|
116
|
+
|
|
117
|
+
${PHONE} {
|
|
118
|
+
& .MuiDialog-paper {
|
|
119
|
+
margin: ${SPACE.sm};
|
|
120
|
+
max-width: calc(100vw - ${SPACE.sm} * 2);
|
|
121
|
+
max-height: calc(100dvh - ${SPACE.sm} * 2);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
88
124
|
`;
|
|
89
125
|
const DialogPanel = styled.div `
|
|
90
126
|
display: flex;
|
|
@@ -93,6 +129,11 @@ const DialogPanel = styled.div `
|
|
|
93
129
|
color: var(--o-text);
|
|
94
130
|
min-width: min(440px, calc(100vw - ${SPACE.lg} * 2));
|
|
95
131
|
max-width: 100%;
|
|
132
|
+
|
|
133
|
+
${PHONE} {
|
|
134
|
+
min-width: calc(100vw - ${SPACE.sm} * 2);
|
|
135
|
+
max-height: 100%;
|
|
136
|
+
}
|
|
96
137
|
`;
|
|
97
138
|
export function Dialog({ open, onClose, title, footer, children, maxWidth = "sm", }) {
|
|
98
139
|
return (_jsx(StyledDialog, { open: open, onClose: onClose, maxWidth: maxWidth, children: _jsxs(DialogPanel, { children: [_jsxs(OverlayHeader, { children: [_jsx(OverlayTitle, { children: title }), _jsx(IconButton, { onClick: onClose, "aria-label": "Lukk", size: "small", children: _jsx(CloseIcon, {}) })] }), _jsx(OverlayBody, { children: children }), footer ? _jsx(OverlayFooter, { children: footer }) : null] }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/overlay/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAa,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EACL,QAAQ,EACR,MAAM,IAAI,SAAS,EACnB,MAAM,IAAI,SAAS,EACnB,UAAU,EACV,MAAM,EACN,kBAAkB,IAAI,SAAS,GAChC,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;SAIvB,KAAK,CAAC,EAAE;aACJ,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/overlay/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/styles/global.css
CHANGED
|
@@ -250,3 +250,19 @@ li {
|
|
|
250
250
|
font-size: 2.5rem;
|
|
251
251
|
}
|
|
252
252
|
}
|
|
253
|
+
|
|
254
|
+
@supports (-webkit-touch-callout: none) {
|
|
255
|
+
input,
|
|
256
|
+
textarea,
|
|
257
|
+
select {
|
|
258
|
+
font-size: max(16px, 1em) !important;
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
@media (pointer: coarse) {
|
|
263
|
+
.MuiButtonBase-root::after {
|
|
264
|
+
content: "";
|
|
265
|
+
position: absolute;
|
|
266
|
+
inset: min(0px, calc((100% - 44px) / 2));
|
|
267
|
+
}
|
|
268
|
+
}
|
package/package.json
CHANGED