@innspel/react-native 0.4.0 → 0.5.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/index.d.cts CHANGED
@@ -55,7 +55,7 @@ type CaptureRefFn = (ref: RefObject<ViewRef | null> | ViewRef, options: {
55
55
  declare function createScreenshotAdapter(captureRef: CaptureRefFn): ScreenshotAdapter;
56
56
 
57
57
  /**
58
- * tokens.ts — GENERERT fra theme/theme.ts (avtrykk e9fb0cf68373).
58
+ * tokens.ts — GENERERT fra theme/theme.ts (avtrykk 9c17bc0e5f8c).
59
59
  * Rediger aldri denne filen. Endre temaet i kilden og kjør
60
60
  * `node scripts/generate-tokens.ts`, som CI verifiserer med `--check`.
61
61
  *
@@ -125,6 +125,7 @@ declare const t: {
125
125
  readonly pill: 999;
126
126
  };
127
127
  readonly font: {
128
+ readonly display: 40;
128
129
  readonly h1: 24;
129
130
  readonly h2: 21;
130
131
  readonly h3: 18;
@@ -133,6 +134,7 @@ declare const t: {
133
134
  readonly tiny: 11;
134
135
  };
135
136
  readonly lineHeight: {
137
+ readonly display: 48;
136
138
  readonly h1: 30;
137
139
  readonly h2: 27;
138
140
  readonly h3: 24;
@@ -151,6 +153,10 @@ declare const t: {
151
153
  readonly base: 200;
152
154
  readonly slow: 320;
153
155
  };
156
+ readonly icon: {
157
+ readonly inline: 20;
158
+ readonly minste: 16;
159
+ };
154
160
  readonly touch: 48;
155
161
  readonly screenPadding: 24;
156
162
  readonly hairline: 1;
@@ -210,6 +216,7 @@ declare const light: {
210
216
  readonly pill: 999;
211
217
  };
212
218
  readonly font: {
219
+ readonly display: 40;
213
220
  readonly h1: 24;
214
221
  readonly h2: 21;
215
222
  readonly h3: 18;
@@ -218,6 +225,7 @@ declare const light: {
218
225
  readonly tiny: 11;
219
226
  };
220
227
  readonly lineHeight: {
228
+ readonly display: 48;
221
229
  readonly h1: 30;
222
230
  readonly h2: 27;
223
231
  readonly h3: 24;
@@ -236,6 +244,10 @@ declare const light: {
236
244
  readonly base: 200;
237
245
  readonly slow: 320;
238
246
  };
247
+ readonly icon: {
248
+ readonly inline: 20;
249
+ readonly minste: 16;
250
+ };
239
251
  readonly touch: 48;
240
252
  readonly screenPadding: 24;
241
253
  readonly hairline: 1;
@@ -483,7 +495,13 @@ declare const tekst: {
483
495
  readonly omvei: "Omvei:";
484
496
  readonly rettesI: (versjon: string) => string;
485
497
  readonly rettetI: (versjon: string) => string;
486
- readonly feltLabelFeil: "Din feil";
498
+ /**
499
+ * «Ditt innspill», ikke «Din feil» (DD-54). «Din» festet saken til personen, og
500
+ * «feil» karakteriserte den før noen hadde lest den — innsenderen leste det som
501
+ * skyld. Ønskesporet beholder «Ditt ønske»: et ønske er ingen feil, og der finnes
502
+ * ikke problemet. De to står aldri ved siden av hverandre; sporet velges før dette.
503
+ */
504
+ readonly feltLabelFeil: "Ditt innspill";
487
505
  readonly feltLabelOnske: "Ditt ønske";
488
506
  /** DD-45: to spørsmål i feilsporet. Kilde: Sentry «What's the bug? What did you expect?» */
489
507
  readonly placeholderFeil: "Hva skjedde? Hva forventet du?";
package/dist/index.d.ts CHANGED
@@ -55,7 +55,7 @@ type CaptureRefFn = (ref: RefObject<ViewRef | null> | ViewRef, options: {
55
55
  declare function createScreenshotAdapter(captureRef: CaptureRefFn): ScreenshotAdapter;
56
56
 
57
57
  /**
58
- * tokens.ts — GENERERT fra theme/theme.ts (avtrykk e9fb0cf68373).
58
+ * tokens.ts — GENERERT fra theme/theme.ts (avtrykk 9c17bc0e5f8c).
59
59
  * Rediger aldri denne filen. Endre temaet i kilden og kjør
60
60
  * `node scripts/generate-tokens.ts`, som CI verifiserer med `--check`.
61
61
  *
@@ -125,6 +125,7 @@ declare const t: {
125
125
  readonly pill: 999;
126
126
  };
127
127
  readonly font: {
128
+ readonly display: 40;
128
129
  readonly h1: 24;
129
130
  readonly h2: 21;
130
131
  readonly h3: 18;
@@ -133,6 +134,7 @@ declare const t: {
133
134
  readonly tiny: 11;
134
135
  };
135
136
  readonly lineHeight: {
137
+ readonly display: 48;
136
138
  readonly h1: 30;
137
139
  readonly h2: 27;
138
140
  readonly h3: 24;
@@ -151,6 +153,10 @@ declare const t: {
151
153
  readonly base: 200;
152
154
  readonly slow: 320;
153
155
  };
156
+ readonly icon: {
157
+ readonly inline: 20;
158
+ readonly minste: 16;
159
+ };
154
160
  readonly touch: 48;
155
161
  readonly screenPadding: 24;
156
162
  readonly hairline: 1;
@@ -210,6 +216,7 @@ declare const light: {
210
216
  readonly pill: 999;
211
217
  };
212
218
  readonly font: {
219
+ readonly display: 40;
213
220
  readonly h1: 24;
214
221
  readonly h2: 21;
215
222
  readonly h3: 18;
@@ -218,6 +225,7 @@ declare const light: {
218
225
  readonly tiny: 11;
219
226
  };
220
227
  readonly lineHeight: {
228
+ readonly display: 48;
221
229
  readonly h1: 30;
222
230
  readonly h2: 27;
223
231
  readonly h3: 24;
@@ -236,6 +244,10 @@ declare const light: {
236
244
  readonly base: 200;
237
245
  readonly slow: 320;
238
246
  };
247
+ readonly icon: {
248
+ readonly inline: 20;
249
+ readonly minste: 16;
250
+ };
239
251
  readonly touch: 48;
240
252
  readonly screenPadding: 24;
241
253
  readonly hairline: 1;
@@ -483,7 +495,13 @@ declare const tekst: {
483
495
  readonly omvei: "Omvei:";
484
496
  readonly rettesI: (versjon: string) => string;
485
497
  readonly rettetI: (versjon: string) => string;
486
- readonly feltLabelFeil: "Din feil";
498
+ /**
499
+ * «Ditt innspill», ikke «Din feil» (DD-54). «Din» festet saken til personen, og
500
+ * «feil» karakteriserte den før noen hadde lest den — innsenderen leste det som
501
+ * skyld. Ønskesporet beholder «Ditt ønske»: et ønske er ingen feil, og der finnes
502
+ * ikke problemet. De to står aldri ved siden av hverandre; sporet velges før dette.
503
+ */
504
+ readonly feltLabelFeil: "Ditt innspill";
487
505
  readonly feltLabelOnske: "Ditt ønske";
488
506
  /** DD-45: to spørsmål i feilsporet. Kilde: Sentry «What's the bug? What did you expect?» */
489
507
  readonly placeholderFeil: "Hva skjedde? Hva forventet du?";
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/InnspelProvider.tsx
2
- import { createContext as createContext3, useCallback as useCallback3, useContext as useContext3, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
2
+ import { createContext as createContext3, useCallback as useCallback3, useContext as useContext4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
3
3
  import { View as View9 } from "react-native";
4
4
 
5
5
  // src/skjermbilde.ts
@@ -102,6 +102,7 @@ var t = {
102
102
  pill: 999
103
103
  },
104
104
  font: {
105
+ display: 40,
105
106
  h1: 24,
106
107
  h2: 21,
107
108
  h3: 18,
@@ -110,6 +111,7 @@ var t = {
110
111
  tiny: 11
111
112
  },
112
113
  lineHeight: {
114
+ display: 48,
113
115
  h1: 30,
114
116
  h2: 27,
115
117
  h3: 24,
@@ -128,6 +130,7 @@ var t = {
128
130
  base: 200,
129
131
  slow: 320
130
132
  },
133
+ icon: { inline: 20, minste: 16 },
131
134
  touch: 48,
132
135
  screenPadding: 24,
133
136
  hairline: 1
@@ -186,6 +189,7 @@ var light = {
186
189
  pill: 999
187
190
  },
188
191
  font: {
192
+ display: 40,
189
193
  h1: 24,
190
194
  h2: 21,
191
195
  h3: 18,
@@ -194,6 +198,7 @@ var light = {
194
198
  tiny: 11
195
199
  },
196
200
  lineHeight: {
201
+ display: 48,
197
202
  h1: 30,
198
203
  h2: 27,
199
204
  h3: 24,
@@ -212,6 +217,7 @@ var light = {
212
217
  base: 200,
213
218
  slow: 320
214
219
  },
220
+ icon: { inline: 20, minste: 16 },
215
221
  touch: 48,
216
222
  screenPadding: 24,
217
223
  hairline: 1
@@ -246,8 +252,9 @@ import {
246
252
  InnspelApiError,
247
253
  InnspelQueueFullError
248
254
  } from "@innspel/core";
249
- import { useCallback as useCallback2, useEffect, useRef as useRef2, useState as useState3 } from "react";
250
- import { Modal, Pressable as Pressable5, Text as Text8, View as View8 } from "react-native";
255
+ import { useCallback as useCallback2, useContext as useContext3, useEffect, useRef as useRef2, useState as useState3 } from "react";
256
+ import { KeyboardAvoidingView, Modal, Pressable as Pressable5, Text as Text8, View as View8 } from "react-native";
257
+ import { initialWindowMetrics, SafeAreaInsetsContext } from "react-native-safe-area-context";
251
258
 
252
259
  // src/widget/Felt.tsx
253
260
  import { useMemo, useState } from "react";
@@ -468,7 +475,13 @@ var tekst = {
468
475
  rettesI: (versjon) => `Rettes i ${versjon}`,
469
476
  rettetI: (versjon) => `Rettet i ${versjon}`,
470
477
  // 2d + 2e — feltet og kontekstlinja
471
- feltLabelFeil: "Din feil",
478
+ /**
479
+ * «Ditt innspill», ikke «Din feil» (DD-54). «Din» festet saken til personen, og
480
+ * «feil» karakteriserte den før noen hadde lest den — innsenderen leste det som
481
+ * skyld. Ønskesporet beholder «Ditt ønske»: et ønske er ingen feil, og der finnes
482
+ * ikke problemet. De to står aldri ved siden av hverandre; sporet velges før dette.
483
+ */
484
+ feltLabelFeil: "Ditt innspill",
472
485
  feltLabelOnske: "Ditt \xF8nske",
473
486
  /** DD-45: to spørsmål i feilsporet. Kilde: Sentry «What's the bug? What did you expect?» */
474
487
  placeholderFeil: "Hva skjedde? Hva forventet du?",
@@ -1437,6 +1450,7 @@ function Widget({
1437
1450
  tenantName
1438
1451
  }) {
1439
1452
  const tema = useTema();
1453
+ const insets = useContext3(SafeAreaInsetsContext) ?? initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
1440
1454
  const skjermbilde = useSkjermbilde();
1441
1455
  const previewRef = useRef2(null);
1442
1456
  const [steg, setSteg] = useState3("valg");
@@ -1630,108 +1644,119 @@ function Widget({
1630
1644
  animationType: "slide",
1631
1645
  onRequestClose: lukk,
1632
1646
  accessibilityViewIsModal: true,
1633
- children: /* @__PURE__ */ jsx8(View8, { style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxs8(
1634
- View8,
1647
+ children: /* @__PURE__ */ jsx8(
1648
+ KeyboardAvoidingView,
1635
1649
  {
1636
- testID: "innspel-widget",
1637
- accessibilityViewIsModal: true,
1638
- accessibilityRole: "none",
1639
- style: {
1640
- backgroundColor: tema.color.bg,
1641
- borderTopLeftRadius: tema.radius.lg * 2,
1642
- borderTopRightRadius: tema.radius.lg * 2,
1643
- padding: tema.screenPadding,
1644
- gap: tema.space.md,
1645
- maxHeight: "92%",
1646
- minHeight: "60%"
1647
- },
1648
- children: [
1649
- /* @__PURE__ */ jsxs8(View8, { style: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" }, children: [
1650
- steg === "skjermbilde" ? /* @__PURE__ */ jsx8(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: fjernBilde }) : steg !== "valg" && steg !== "kvittering" ? /* @__PURE__ */ jsx8(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: nullstill }) : /* @__PURE__ */ jsx8(View8, {}),
1651
- /* @__PURE__ */ jsx8(
1652
- Pressable5,
1653
- {
1654
- testID: "lukk",
1655
- accessibilityRole: "button",
1656
- accessibilityLabel: tekst.lukk,
1657
- onPress: lukk,
1658
- style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
1659
- children: /* @__PURE__ */ jsx8(Text8, { style: { color: tema.color.textSecondary, fontSize: tema.font.body }, children: "\u2715" })
1660
- }
1661
- )
1662
- ] }),
1663
- feil ? /* @__PURE__ */ jsx8(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.sendefeilBanner(feil) }) : null,
1664
- steg === "valg" ? /* @__PURE__ */ jsxs8(Fragment, { children: [
1665
- /* @__PURE__ */ jsx8(Valg, { onVelg: velgSpor }),
1666
- /* @__PURE__ */ jsx8(Btn, { variant: "ghost", testID: "mine-innspill", ikon: "\u{1F4CB}", label: tekst.mineTittel, onPress: visMine })
1667
- ] }) : null,
1668
- steg === "kjenteFeil" ? /* @__PURE__ */ jsx8(
1669
- KjenteFeil,
1670
- {
1671
- kort,
1672
- spor,
1673
- laster: lasterKort,
1674
- onJaOgsa: jaOgsa,
1675
- onLigner: (k) => {
1676
- setLenketTil(k);
1677
- setSteg("felt");
1678
- },
1679
- onNei: () => spor === "onske" ? void send() : setSteg("felt")
1680
- }
1681
- ) : null,
1682
- steg === "felt" ? /* @__PURE__ */ jsx8(
1683
- Felt,
1684
- {
1685
- spor,
1686
- verdi,
1687
- onEndre: endreTekst,
1688
- minTextLength: innstillinger.minTextLength,
1689
- textMaxLength: innstillinger.textMaxLength,
1690
- kontekst: client.context,
1691
- fjernedeFelter: fjernede,
1692
- onFjernKontekst: (f) => setFjernede((x) => [...x, f]),
1693
- ...lenketTil ? { lenketTil, onFjernLenke: () => setLenketTil(void 0) } : {},
1694
- funn,
1695
- onSend: send,
1696
- sender,
1697
- ...skjermbildeMulig ? { onSkjermbilde: taSkjermbilde } : {},
1698
- harVedlegg: vedlegg !== void 0,
1699
- onFjernVedlegg: fjernBilde
1700
- }
1701
- ) : null,
1702
- steg === "skjermbilde" && bilde ? /* @__PURE__ */ jsx8(
1703
- Skjermbilde,
1704
- {
1705
- bilde,
1706
- automaskerRot: automasker,
1707
- rotStorrelse,
1708
- previewRef,
1709
- komponerer,
1710
- onFjern: fjernBilde,
1711
- onLeggVed: leggVedBilde
1712
- }
1713
- ) : null,
1714
- steg === "kvittering" && kvittering ? /* @__PURE__ */ jsx8(
1715
- Kvittering,
1716
- {
1717
- art: kvittering.art,
1718
- ...kvittering.nr ? { saksnummer: kvittering.nr } : {},
1719
- ...kvittering.vedlegg ? { vedlegg: kvittering.vedlegg } : {},
1720
- onLukk: lukk
1721
- }
1722
- ) : null,
1723
- steg === "mine" ? /* @__PURE__ */ jsx8(
1724
- MineInnspill,
1725
- {
1726
- rader: mine,
1727
- laster: lasterMine,
1728
- ...tenantName ? { tenantName } : {},
1729
- onNytt: nullstill
1730
- }
1731
- ) : null
1732
- ]
1650
+ behavior: "padding",
1651
+ keyboardVerticalOffset: -insets.bottom,
1652
+ style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end", paddingTop: insets.top },
1653
+ children: /* @__PURE__ */ jsxs8(
1654
+ View8,
1655
+ {
1656
+ testID: "innspel-widget",
1657
+ accessibilityViewIsModal: true,
1658
+ accessibilityRole: "none",
1659
+ style: {
1660
+ backgroundColor: tema.color.bg,
1661
+ borderTopLeftRadius: tema.radius.lg * 2,
1662
+ borderTopRightRadius: tema.radius.lg * 2,
1663
+ padding: tema.screenPadding,
1664
+ paddingBottom: tema.screenPadding + insets.bottom,
1665
+ paddingLeft: tema.screenPadding + insets.left,
1666
+ paddingRight: tema.screenPadding + insets.right,
1667
+ gap: tema.space.md,
1668
+ maxHeight: "92%",
1669
+ minHeight: "60%"
1670
+ },
1671
+ children: [
1672
+ /* @__PURE__ */ jsxs8(View8, { style: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" }, children: [
1673
+ steg === "skjermbilde" ? /* @__PURE__ */ jsx8(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: fjernBilde }) : steg !== "valg" && steg !== "kvittering" ? /* @__PURE__ */ jsx8(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: nullstill }) : /* @__PURE__ */ jsx8(View8, {}),
1674
+ /* @__PURE__ */ jsx8(
1675
+ Pressable5,
1676
+ {
1677
+ testID: "lukk",
1678
+ accessibilityRole: "button",
1679
+ accessibilityLabel: tekst.lukk,
1680
+ onPress: lukk,
1681
+ style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
1682
+ children: /* @__PURE__ */ jsx8(Text8, { style: { color: tema.color.textSecondary, fontSize: tema.font.body }, children: "\u2715" })
1683
+ }
1684
+ )
1685
+ ] }),
1686
+ feil ? /* @__PURE__ */ jsx8(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.sendefeilBanner(feil) }) : null,
1687
+ steg === "valg" ? /* @__PURE__ */ jsxs8(Fragment, { children: [
1688
+ /* @__PURE__ */ jsx8(Valg, { onVelg: velgSpor }),
1689
+ /* @__PURE__ */ jsx8(Btn, { variant: "ghost", testID: "mine-innspill", ikon: "\u{1F4CB}", label: tekst.mineTittel, onPress: visMine })
1690
+ ] }) : null,
1691
+ steg === "kjenteFeil" ? /* @__PURE__ */ jsx8(
1692
+ KjenteFeil,
1693
+ {
1694
+ kort,
1695
+ spor,
1696
+ laster: lasterKort,
1697
+ onJaOgsa: jaOgsa,
1698
+ onLigner: (k) => {
1699
+ setLenketTil(k);
1700
+ setSteg("felt");
1701
+ },
1702
+ onNei: () => spor === "onske" ? void send() : setSteg("felt")
1703
+ }
1704
+ ) : null,
1705
+ steg === "felt" ? /* @__PURE__ */ jsx8(
1706
+ Felt,
1707
+ {
1708
+ spor,
1709
+ verdi,
1710
+ onEndre: endreTekst,
1711
+ minTextLength: innstillinger.minTextLength,
1712
+ textMaxLength: innstillinger.textMaxLength,
1713
+ kontekst: client.context,
1714
+ fjernedeFelter: fjernede,
1715
+ onFjernKontekst: (f) => setFjernede((x) => [...x, f]),
1716
+ ...lenketTil ? { lenketTil, onFjernLenke: () => setLenketTil(void 0) } : {},
1717
+ funn,
1718
+ onSend: send,
1719
+ sender,
1720
+ ...skjermbildeMulig ? { onSkjermbilde: taSkjermbilde } : {},
1721
+ harVedlegg: vedlegg !== void 0,
1722
+ onFjernVedlegg: fjernBilde
1723
+ }
1724
+ ) : null,
1725
+ steg === "skjermbilde" && bilde ? /* @__PURE__ */ jsx8(
1726
+ Skjermbilde,
1727
+ {
1728
+ bilde,
1729
+ automaskerRot: automasker,
1730
+ rotStorrelse,
1731
+ previewRef,
1732
+ komponerer,
1733
+ onFjern: fjernBilde,
1734
+ onLeggVed: leggVedBilde
1735
+ }
1736
+ ) : null,
1737
+ steg === "kvittering" && kvittering ? /* @__PURE__ */ jsx8(
1738
+ Kvittering,
1739
+ {
1740
+ art: kvittering.art,
1741
+ ...kvittering.nr ? { saksnummer: kvittering.nr } : {},
1742
+ ...kvittering.vedlegg ? { vedlegg: kvittering.vedlegg } : {},
1743
+ onLukk: lukk
1744
+ }
1745
+ ) : null,
1746
+ steg === "mine" ? /* @__PURE__ */ jsx8(
1747
+ MineInnspill,
1748
+ {
1749
+ rader: mine,
1750
+ laster: lasterMine,
1751
+ ...tenantName ? { tenantName } : {},
1752
+ onNytt: nullstill
1753
+ }
1754
+ ) : null
1755
+ ]
1756
+ }
1757
+ )
1733
1758
  }
1734
- ) })
1759
+ )
1735
1760
  }
1736
1761
  );
1737
1762
  }
@@ -1792,7 +1817,7 @@ function InnspelProvider({
1792
1817
  ] }) }) });
1793
1818
  }
1794
1819
  function useInnspel() {
1795
- const k = useContext3(Kontekst);
1820
+ const k = useContext4(Kontekst);
1796
1821
  if (!k) {
1797
1822
  throw new Error(
1798
1823
  "[innspel] useInnspel() ble kalt utenfor <InnspelProvider>. Pakk appen din i den \u2014 se README.md."