@yusufceng1z/ding-react 0.0.2 → 0.0.3

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.
Files changed (5) hide show
  1. package/dist/index.cjs +9 -6
  2. package/dist/index.d.cts +4 -3
  3. package/dist/index.d.ts +4 -3
  4. package/dist/index.js +16 -7
  5. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -27,11 +27,11 @@ module.exports = __toCommonJS(index_exports);
27
27
  var import_react = require("react");
28
28
  var import_ding = require("@yusufceng1z/ding");
29
29
  var import_jsx_runtime = require("react/jsx-runtime");
30
- function Item({ t, i }) {
30
+ function Item({ t, i, labels }) {
31
31
  const slot = (0, import_react.useRef)(null);
32
32
  (0, import_react.useEffect)(() => slot.current ? (0, import_ding.bindToast)(slot.current, t.id) : void 0, [t.id]);
33
33
  const sticky = t.duration === 0 && t.type !== "loading" && !t.secondary;
34
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: slot, className: "tst-slot", style: { "--tst-i": i }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
34
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: slot, className: "tst-slot", tabIndex: -1, style: { "--tst-i": i }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
35
35
  "div",
36
36
  {
37
37
  className: "tst",
@@ -67,16 +67,19 @@ function Item({ t, i }) {
67
67
  children: t.action.label
68
68
  }
69
69
  ),
70
- sticky && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "tst-close", "aria-label": "Dismiss notification", tabIndex: t.phase === "open" ? 0 : -1, onClick: () => import_ding.toast.dismiss(t.id), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 6l12 12M18 6L6 18" }) }) })
70
+ sticky && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "tst-close", "aria-label": labels.dismiss, tabIndex: t.phase === "open" ? 0 : -1, onClick: () => import_ding.toast.dismiss(t.id), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 6l12 12M18 6L6 18" }) }) })
71
71
  ] })
72
72
  ]
73
73
  }
74
74
  ) });
75
75
  }
76
- function Toaster({ position, theme }) {
76
+ function Toaster({ position, theme, labels }) {
77
77
  const state = (0, import_react.useSyncExternalStore)(import_ding.toast.subscribe, import_ding.toast.getState, import_ding.toast.getState);
78
78
  (0, import_react.useEffect)(() => (0, import_ding.injectStyles)(), []);
79
79
  (0, import_react.useEffect)(() => import_ding.toast.configure({ position, theme }), [position, theme]);
80
+ const region = labels?.region;
81
+ const dismiss = labels?.dismiss;
82
+ (0, import_react.useEffect)(() => import_ding.toast.configure({ labels: { region, dismiss } }), [region, dismiss]);
80
83
  (0, import_react.useEffect)(() => {
81
84
  document.addEventListener("keydown", import_ding.onToastKey);
82
85
  return () => document.removeEventListener("keydown", import_ding.onToastKey);
@@ -87,7 +90,7 @@ function Toaster({ position, theme }) {
87
90
  {
88
91
  className: "tst-viewport",
89
92
  role: "region",
90
- "aria-label": "Notifications",
93
+ "aria-label": state.labels.region,
91
94
  "data-position": state.position,
92
95
  "data-theme": state.theme,
93
96
  onPointerEnter: () => import_ding.toast.pause(),
@@ -97,7 +100,7 @@ function Toaster({ position, theme }) {
97
100
  children: [
98
101
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tst-sr", role: "status", children: state.status }),
99
102
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tst-sr", role: "alert", children: state.alert }),
100
- state.toasts.map((t, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { t, i: n - 1 - idx }, t.id))
103
+ state.toasts.map((t, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { t, i: n - 1 - idx, labels: state.labels }, t.id))
101
104
  ]
102
105
  }
103
106
  );
package/dist/index.d.cts CHANGED
@@ -1,10 +1,11 @@
1
1
  import * as react from 'react';
2
- import { Position, Theme } from '@yusufceng1z/ding';
3
- export { Position, Theme, toast } from '@yusufceng1z/ding';
2
+ import { Position, Theme, ToastLabels } from '@yusufceng1z/ding';
3
+ export { Position, Theme, ToastLabels, toast } from '@yusufceng1z/ding';
4
4
 
5
- declare function Toaster({ position, theme }: {
5
+ declare function Toaster({ position, theme, labels }: {
6
6
  position?: Position;
7
7
  theme?: Theme;
8
+ labels?: Partial<ToastLabels>;
8
9
  }): react.JSX.Element;
9
10
 
10
11
  export { Toaster };
package/dist/index.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import * as react from 'react';
2
- import { Position, Theme } from '@yusufceng1z/ding';
3
- export { Position, Theme, toast } from '@yusufceng1z/ding';
2
+ import { Position, Theme, ToastLabels } from '@yusufceng1z/ding';
3
+ export { Position, Theme, ToastLabels, toast } from '@yusufceng1z/ding';
4
4
 
5
- declare function Toaster({ position, theme }: {
5
+ declare function Toaster({ position, theme, labels }: {
6
6
  position?: Position;
7
7
  theme?: Theme;
8
+ labels?: Partial<ToastLabels>;
8
9
  }): react.JSX.Element;
9
10
 
10
11
  export { Toaster };
package/dist/index.js CHANGED
@@ -1,12 +1,18 @@
1
1
  // src/index.tsx
2
2
  import { useEffect, useRef, useSyncExternalStore } from "react";
3
- import { toast, injectStyles, bindToast, onToastKey, ICONS } from "@yusufceng1z/ding";
3
+ import {
4
+ toast,
5
+ injectStyles,
6
+ bindToast,
7
+ onToastKey,
8
+ ICONS
9
+ } from "@yusufceng1z/ding";
4
10
  import { jsx, jsxs } from "react/jsx-runtime";
5
- function Item({ t, i }) {
11
+ function Item({ t, i, labels }) {
6
12
  const slot = useRef(null);
7
13
  useEffect(() => slot.current ? bindToast(slot.current, t.id) : void 0, [t.id]);
8
14
  const sticky = t.duration === 0 && t.type !== "loading" && !t.secondary;
9
- return /* @__PURE__ */ jsx("div", { ref: slot, className: "tst-slot", style: { "--tst-i": i }, children: /* @__PURE__ */ jsxs(
15
+ return /* @__PURE__ */ jsx("div", { ref: slot, className: "tst-slot", tabIndex: -1, style: { "--tst-i": i }, children: /* @__PURE__ */ jsxs(
10
16
  "div",
11
17
  {
12
18
  className: "tst",
@@ -42,16 +48,19 @@ function Item({ t, i }) {
42
48
  children: t.action.label
43
49
  }
44
50
  ),
45
- sticky && /* @__PURE__ */ jsx("button", { type: "button", className: "tst-close", "aria-label": "Dismiss notification", tabIndex: t.phase === "open" ? 0 : -1, onClick: () => toast.dismiss(t.id), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) }) })
51
+ sticky && /* @__PURE__ */ jsx("button", { type: "button", className: "tst-close", "aria-label": labels.dismiss, tabIndex: t.phase === "open" ? 0 : -1, onClick: () => toast.dismiss(t.id), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) }) })
46
52
  ] })
47
53
  ]
48
54
  }
49
55
  ) });
50
56
  }
51
- function Toaster({ position, theme }) {
57
+ function Toaster({ position, theme, labels }) {
52
58
  const state = useSyncExternalStore(toast.subscribe, toast.getState, toast.getState);
53
59
  useEffect(() => injectStyles(), []);
54
60
  useEffect(() => toast.configure({ position, theme }), [position, theme]);
61
+ const region = labels?.region;
62
+ const dismiss = labels?.dismiss;
63
+ useEffect(() => toast.configure({ labels: { region, dismiss } }), [region, dismiss]);
55
64
  useEffect(() => {
56
65
  document.addEventListener("keydown", onToastKey);
57
66
  return () => document.removeEventListener("keydown", onToastKey);
@@ -62,7 +71,7 @@ function Toaster({ position, theme }) {
62
71
  {
63
72
  className: "tst-viewport",
64
73
  role: "region",
65
- "aria-label": "Notifications",
74
+ "aria-label": state.labels.region,
66
75
  "data-position": state.position,
67
76
  "data-theme": state.theme,
68
77
  onPointerEnter: () => toast.pause(),
@@ -72,7 +81,7 @@ function Toaster({ position, theme }) {
72
81
  children: [
73
82
  /* @__PURE__ */ jsx("div", { className: "tst-sr", role: "status", children: state.status }),
74
83
  /* @__PURE__ */ jsx("div", { className: "tst-sr", role: "alert", children: state.alert }),
75
- state.toasts.map((t, idx) => /* @__PURE__ */ jsx(Item, { t, i: n - 1 - idx }, t.id))
84
+ state.toasts.map((t, idx) => /* @__PURE__ */ jsx(Item, { t, i: n - 1 - idx, labels: state.labels }, t.id))
76
85
  ]
77
86
  }
78
87
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yusufceng1z/ding-react",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/index.cjs",
@@ -22,7 +22,7 @@
22
22
  "dist"
23
23
  ],
24
24
  "dependencies": {
25
- "@yusufceng1z/ding": "0.0.2"
25
+ "@yusufceng1z/ding": "0.0.3"
26
26
  },
27
27
  "peerDependencies": {
28
28
  "react": ">=18"