@pie-lib/mask-markup 4.0.1-next.20261004041321 → 4.0.1-next.20261004162038

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 (3) hide show
  1. package/dist/components/dropdown.d.ts +1 -0
  2. package/dist/components/dropdown.js +57 -56
  3. package/package.json +4 -4
package/dist/components/dropdown.d.ts CHANGED
@@ -16,6 +16,7 @@ declare class Dropdown extends React.Component {
16
16
  correctValue: PropTypes.Requireable<string>;
17
17
  };
18
18
  constructor(props: any);
19
+ optionId: (index: number) => string;
19
20
  componentDidMount(): void;
20
21
  componentDidUpdate(prevProps: any, prevState: any): void;
21
22
  handleClick: any;
package/dist/components/dropdown.js CHANGED
@@ -4,22 +4,22 @@ import { styled as n } from "@mui/material/styles";
4
4
  import { renderMath as r } from "@pie-element/shared-math-rendering-mathjax";
5
5
  import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
6
6
  import * as s from "@pie-lib/render-ui";
7
- import { InlineMenu as c, color as l } from "@pie-lib/render-ui";
8
- import u from "@mui/material/Button";
9
- import d from "@mui/material/InputLabel";
10
- import f from "@mui/material/MenuItem";
11
- import p from "@mui/icons-material/ArrowDropDown";
12
- import m from "@mui/icons-material/ArrowDropUp";
13
- import h from "@mui/icons-material/Close";
14
- import g from "@mui/icons-material/Check";
7
+ import { InlineMenu as c, color as l, createUniqueId as u } from "@pie-lib/render-ui";
8
+ import d from "@mui/material/Button";
9
+ import f from "@mui/material/InputLabel";
10
+ import p from "@mui/material/MenuItem";
11
+ import m from "@mui/icons-material/ArrowDropDown";
12
+ import h from "@mui/icons-material/ArrowDropUp";
13
+ import g from "@mui/icons-material/Close";
14
+ import _ from "@mui/icons-material/Check";
15
15
  //#region src/components/dropdown.tsx
16
- function _(e) {
16
+ function v(e) {
17
17
  return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
18
18
  }
19
- function v(e, t) {
20
- return !e || _(e) ? e : _(e.default) ? e.default : t && _(e[t]) ? e[t] : t && _(e[t]?.default) ? e[t].default : e;
19
+ function y(e, t) {
20
+ return !e || v(e) ? e : v(e.default) ? e.default : t && v(e[t]) ? e[t] : t && v(e[t]?.default) ? e[t].default : e;
21
21
  }
22
- var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.default, S = x && typeof x == "object" ? x : b, C = l.v("pie"), w = n(u)(() => ({
22
+ var b = y(c, "InlineMenu") || y(C.InlineMenu, "InlineMenu"), x = s, S = x.default, C = S && typeof S == "object" ? S : x, w = l.v("pie"), T = n(d)(() => ({
23
23
  color: l.text(),
24
24
  border: `1px solid ${l.borderGray()}`,
25
25
  borderRadius: "4px",
@@ -54,10 +54,10 @@ var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.defaul
54
54
  borderColor: l.incorrectWithIcon(),
55
55
  color: `${l.text()} !important`
56
56
  }
57
- })), T = n(y)(() => ({
58
- "& .MuiPaper-root": { backgroundColor: C("background", l.defaults.WHITE) },
57
+ })), E = n(b)(() => ({
58
+ "& .MuiPaper-root": { backgroundColor: w("background", l.defaults.WHITE) },
59
59
  "& .MuiList-root": { padding: 0 }
60
- })), E = n(f)(() => ({
60
+ })), D = n(p)(() => ({
61
61
  height: 24,
62
62
  overflow: "hidden",
63
63
  fontSize: "1rem",
@@ -88,18 +88,18 @@ var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.defaul
88
88
  backgroundColor: `${l.dropdownBackground()} !important`
89
89
  }
90
90
  }
91
- })), D = n("span")(() => ({ fontSize: "max(1rem, 14px)" })), O = n("span")(() => ({
91
+ })), O = n("span")(() => ({ fontSize: "max(1rem, 14px)" })), k = n("span")(() => ({
92
92
  fontSize: "max(1rem, 14px)",
93
93
  flexShrink: 0,
94
94
  paddingLeft: "8px"
95
- })), k = n(d)(() => ({
95
+ })), A = n(f)(() => ({
96
96
  position: "absolute",
97
97
  left: "-10000px",
98
98
  top: "auto",
99
99
  width: "1px",
100
100
  height: "1px",
101
101
  overflow: "hidden"
102
- })), A = n(g)(() => ({
102
+ })), j = n(_)(() => ({
103
103
  color: `${l.white()} !important`,
104
104
  position: "absolute",
105
105
  top: "-8px !important",
@@ -110,7 +110,7 @@ var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.defaul
110
110
  padding: "2px",
111
111
  "&.correct": { backgroundColor: l.correct() },
112
112
  "&.incorrect": { backgroundColor: l.incorrectWithIcon() }
113
- })), j = n(h)(() => ({
113
+ })), M = n(g)(() => ({
114
114
  color: `${l.white()} !important`,
115
115
  position: "absolute",
116
116
  top: "-8px !important",
@@ -121,7 +121,7 @@ var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.defaul
121
121
  padding: "2px",
122
122
  "&.correct": { backgroundColor: l.correct() },
123
123
  "&.incorrect": { backgroundColor: l.incorrectWithIcon() }
124
- })), M = class extends e.Component {
124
+ })), N = class extends e.Component {
125
125
  static propTypes = {
126
126
  id: t.string,
127
127
  value: t.string,
@@ -142,8 +142,9 @@ var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.defaul
142
142
  highlightedOptionId: null,
143
143
  menuWidth: null,
144
144
  previewValue: null
145
- }, this.hiddenRef = e.createRef(), this.buttonRef = e.createRef(), this.previewRef = e.createRef(), this.elementRefs = [];
145
+ }, this.hiddenRef = e.createRef(), this.buttonRef = e.createRef(), this.previewRef = e.createRef(), this.elementRefs = [], this.idPrefix = u(`dropdown-${t.id}`);
146
146
  }
147
+ optionId = (e) => `${this.idPrefix}-option-${e}`;
147
148
  componentDidMount() {
148
149
  this.hiddenRef.current && this.state.menuWidth === null && this.setState({ menuWidth: this.hiddenRef.current.clientWidth });
149
150
  }
@@ -161,14 +162,14 @@ var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.defaul
161
162
  }
162
163
  }
163
164
  handleClick = (e) => {
164
- let { id: t, value: n, choices: r } = this.props, i = null;
165
- if (n) {
166
- let e = (r || []).findIndex((e) => e.value === n);
167
- e >= 0 && (i = `dropdown-option-${t}-${e}`);
165
+ let { value: t, choices: n } = this.props, r = null;
166
+ if (t) {
167
+ let e = (n || []).findIndex((e) => e.value === t);
168
+ e >= 0 && (r = this.optionId(e));
168
169
  }
169
170
  this.setState({
170
171
  anchorEl: e.currentTarget,
171
- highlightedOptionId: i
172
+ highlightedOptionId: r
172
173
  });
173
174
  };
174
175
  handleClose = () => {
@@ -180,7 +181,7 @@ var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.defaul
180
181
  }), !e && this.previewRef.current && (this.previewRef.current.innerHTML = "");
181
182
  };
182
183
  handleHighlight = (e) => {
183
- let t = { highlightedOptionId: `dropdown-option-${this.props.id}-${e}` };
184
+ let t = { highlightedOptionId: this.optionId(e) };
184
185
  this.props.value || (t.previewValue = this.props.choices[e].value), this.setState(t);
185
186
  };
186
187
  handleSelect = (e, t) => {
@@ -188,7 +189,7 @@ var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.defaul
188
189
  };
189
190
  handleHover = (e) => {
190
191
  if (this.props.value) return;
191
- let t = `dropdown-option-${this.props.id}-${e}`, n = this.state.previewValue;
192
+ let t = this.optionId(e), n = this.state.previewValue;
192
193
  this.setState({
193
194
  highlightedOptionId: t,
194
195
  previewValue: n
@@ -202,10 +203,10 @@ var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.defaul
202
203
  return n ? n.label.trim() : void 0;
203
204
  }
204
205
  render() {
205
- let { id: e, correct: t, disabled: n, value: r, choices: s, showCorrectAnswer: c, singleQuery: l, correctValue: u } = this.props, { anchorEl: d } = this.state, f = !!d, h = `dropdown-button-${e}`, g = `dropdown-menu-${e}`, _ = `dropdown-listbox-${e}`, v = `dropdown-value-${e}`, y;
206
+ let { id: e, correct: t, disabled: n, value: r, choices: s, showCorrectAnswer: c, singleQuery: l, correctValue: u } = this.props, { anchorEl: d } = this.state, f = !!d, p = `${this.idPrefix}-button`, g = `${this.idPrefix}-menu`, _ = `${this.idPrefix}-listbox`, v = `${this.idPrefix}-value`, y;
206
207
  this.elementRefs = [], n && t !== void 0 && (y = t || c ? "disabledCorrect" : "disabledIncorrect");
207
- let b = parseInt(e, 10) + 1, x = l ? "Query-label" : `Query-label-${b}`, S = l ? "Query" : `Query ${b}`, C = null;
208
- return n && t !== void 0 && (C = t || c ? /* @__PURE__ */ a(A, { className: "correct" }) : /* @__PURE__ */ a(j, { className: "incorrect" })), /* @__PURE__ */ o(i, { children: [
208
+ let b = parseInt(e, 10) + 1, x = `${this.idPrefix}-query-label`, S = l ? "Query" : `Query ${b}`, C = null;
209
+ return n && t !== void 0 && (C = t || c ? /* @__PURE__ */ a(j, { className: "correct" }) : /* @__PURE__ */ a(M, { className: "incorrect" })), /* @__PURE__ */ o(i, { children: [
209
210
  /* @__PURE__ */ a("div", {
210
211
  ref: this.hiddenRef,
211
212
  style: {
@@ -216,19 +217,19 @@ var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.defaul
216
217
  },
217
218
  tabIndex: -1,
218
219
  "aria-hidden": "true",
219
- children: (s || []).map((e, t) => /* @__PURE__ */ a(E, {
220
+ children: (s || []).map((e, t) => /* @__PURE__ */ a(D, {
220
221
  tabIndex: -1,
221
222
  "aria-hidden": "true",
222
- children: /* @__PURE__ */ a(D, { dangerouslySetInnerHTML: { __html: e.label } })
223
+ children: /* @__PURE__ */ a(O, { dangerouslySetInnerHTML: { __html: e.label } })
223
224
  }, t))
224
225
  }),
225
- /* @__PURE__ */ a(k, {
226
+ /* @__PURE__ */ a(A, {
226
227
  id: x,
227
228
  tabIndex: -1,
228
229
  "aria-hidden": "true",
229
230
  children: S
230
231
  }),
231
- /* @__PURE__ */ o(w, {
232
+ /* @__PURE__ */ o(T, {
232
233
  ref: this.buttonRef,
233
234
  style: {
234
235
  ...this.state.menuWidth && { minWidth: `calc(${this.state.menuWidth}px + 8px)` },
@@ -242,21 +243,21 @@ var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.defaul
242
243
  onClick: this.handleClick,
243
244
  className: y,
244
245
  disabled: n,
245
- id: h,
246
+ id: p,
246
247
  role: "combobox",
247
248
  "aria-label": `Select an option for ${S}`,
248
249
  "aria-labelledby": v,
249
250
  children: [
250
251
  C,
251
- /* @__PURE__ */ a(D, {
252
+ /* @__PURE__ */ a(O, {
252
253
  id: v,
253
254
  ref: this.previewRef,
254
255
  dangerouslySetInnerHTML: { __html: u || (f && this.state.previewValue ? this.getLabel(s, this.state.previewValue) : this.getLabel(s, r) || "") }
255
256
  }),
256
- a(f ? m : p, {})
257
+ a(f ? h : m, {})
257
258
  ]
258
259
  }),
259
- /* @__PURE__ */ a(T, {
260
+ /* @__PURE__ */ a(E, {
260
261
  id: g,
261
262
  anchorEl: d,
262
263
  keepMounted: !0,
@@ -282,31 +283,31 @@ var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.defaul
282
283
  } } : void 0,
283
284
  list: {
284
285
  id: _,
285
- "aria-labelledby": h,
286
+ "aria-labelledby": p,
286
287
  role: "listbox",
287
288
  disablePadding: !0
288
289
  }
289
290
  },
290
- children: (s || []).map((t, n) => {
291
- let i = `dropdown-option-${e}-${n}`;
292
- return /* @__PURE__ */ o(E, {
293
- id: i,
294
- className: t.value === r ? "selected" : "",
295
- selected: t.value === r,
296
- value: t.value,
297
- onClick: () => this.handleSelect(t.value, n),
291
+ children: (s || []).map((e, t) => {
292
+ let n = this.optionId(t);
293
+ return /* @__PURE__ */ o(D, {
294
+ id: n,
295
+ className: e.value === r ? "selected" : "",
296
+ selected: e.value === r,
297
+ value: e.value,
298
+ onClick: () => this.handleSelect(e.value, t),
298
299
  role: "option",
299
- "aria-selected": this.state.highlightedOptionId === i ? "true" : void 0,
300
- onMouseOver: () => this.handleHover(n),
301
- children: [/* @__PURE__ */ a(D, {
302
- ref: (e) => this.elementRefs[n] = e,
303
- dangerouslySetInnerHTML: { __html: t.label }
304
- }), /* @__PURE__ */ a(O, { dangerouslySetInnerHTML: { __html: t.value === r ? " &check;" : "" } })]
305
- }, `${t.label}-${n}`);
300
+ "aria-selected": this.state.highlightedOptionId === n ? "true" : void 0,
301
+ onMouseOver: () => this.handleHover(t),
302
+ children: [/* @__PURE__ */ a(O, {
303
+ ref: (e) => this.elementRefs[t] = e,
304
+ dangerouslySetInnerHTML: { __html: e.label }
305
+ }), /* @__PURE__ */ a(k, { dangerouslySetInnerHTML: { __html: e.value === r ? " &check;" : "" } })]
306
+ }, `${e.label}-${t}`);
306
307
  })
307
308
  })
308
309
  ] });
309
310
  }
310
311
  };
311
312
  //#endregion
312
- export { M as default };
313
+ export { N as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-lib/mask-markup",
3
- "version": "4.0.1-next.20261004041321",
3
+ "version": "4.0.1-next.20261004162038",
4
4
  "description": "",
5
5
  "repository": {
6
6
  "type": "git",
@@ -12,9 +12,9 @@
12
12
  "@emotion/styled": "^11.14.1",
13
13
  "@mui/icons-material": "^7.3.4",
14
14
  "@mui/material": "^7.3.4",
15
- "@pie-lib/drag": "5.0.1-next.20261004023419",
16
- "@pie-lib/editable-html-tip-tap": "3.0.1-next.20261004041321",
17
- "@pie-lib/render-ui": "8.0.1-next.20261004023419",
15
+ "@pie-lib/drag": "5.0.1-next.20261004162038",
16
+ "@pie-lib/editable-html-tip-tap": "3.0.1-next.20261004162038",
17
+ "@pie-lib/render-ui": "8.0.1-next.20261004162038",
18
18
  "@pie-lib/translator": "5.0.1-next.20261004041321",
19
19
  "debug": "^4.1.1",
20
20
  "prop-types": "^15.7.2",