@dbcdk/react-components 0.0.181 → 0.0.182

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 (10) hide show
  1. package/dist/components/clear-button/ClearButton.cjs +29 -11
  2. package/dist/components/clear-button/ClearButton.d.ts +10 -1
  3. package/dist/components/clear-button/ClearButton.js +29 -11
  4. package/dist/components/forms/multi-select/MultiSelect.cjs +2 -1
  5. package/dist/components/forms/multi-select/MultiSelect.js +2 -1
  6. package/dist/components/forms/select/Select.cjs +2 -1
  7. package/dist/components/forms/select/Select.js +2 -1
  8. package/dist/components/interval-select/IntervalSelect.cjs +2 -1
  9. package/dist/components/interval-select/IntervalSelect.js +2 -1
  10. package/package.json +1 -1
package/dist/components/clear-button/ClearButton.cjs CHANGED
@@ -11,25 +11,43 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
11
11
  function ClearButton({
12
12
  onClick,
13
13
  ariaLabel = "Ryd",
14
- variant = "default"
14
+ variant = "default",
15
+ as = "button"
15
16
  }) {
16
17
  const wrapperClassName = [styles__default.default.clearButton, variant === "header" ? styles__default.default.header : ""].filter(Boolean).join(" ");
17
- return /* @__PURE__ */ jsxRuntime.jsx("span", { className: wrapperClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
18
+ const handleMouseDown = (e) => {
19
+ e.preventDefault();
20
+ e.stopPropagation();
21
+ };
22
+ const handleClick = (e) => {
23
+ e.preventDefault();
24
+ e.stopPropagation();
25
+ onClick == null ? void 0 : onClick(e);
26
+ };
27
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { className: wrapperClassName, children: as === "span" ? /* @__PURE__ */ jsxRuntime.jsx(
28
+ "span",
29
+ {
30
+ className: styles__default.default.button,
31
+ role: "button",
32
+ tabIndex: 0,
33
+ "aria-label": ariaLabel,
34
+ "data-input-role": "clear",
35
+ onMouseDown: handleMouseDown,
36
+ onClick: handleClick,
37
+ onKeyDown: (e) => {
38
+ if (e.key === "Enter" || e.key === " ") handleClick(e);
39
+ },
40
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
41
+ }
42
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
18
43
  "button",
19
44
  {
20
45
  className: styles__default.default.button,
21
46
  type: "button",
22
47
  "aria-label": ariaLabel,
23
48
  "data-input-role": "clear",
24
- onMouseDown: (e) => {
25
- e.preventDefault();
26
- e.stopPropagation();
27
- },
28
- onClick: (e) => {
29
- e.preventDefault();
30
- e.stopPropagation();
31
- onClick == null ? void 0 : onClick(e);
32
- },
49
+ onMouseDown: handleMouseDown,
50
+ onClick: handleClick,
33
51
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
34
52
  }
35
53
  ) });
package/dist/components/clear-button/ClearButton.d.ts CHANGED
@@ -5,6 +5,15 @@ interface ClearButtonProps {
5
5
  ariaLabel?: string;
6
6
  /** 'header' uses --color-navbar-fg tokens — only meaningful inside/near AppHeader */
7
7
  variant?: 'default' | 'header';
8
+ /**
9
+ * 'button' (default) renders a native <button>. Pass 'span' when this is
10
+ * nested inside another interactive <button> (e.g. a Select/MultiSelect/
11
+ * IntervalSelect trigger) - a <button> descendant of a <button> is invalid
12
+ * HTML and breaks hydration. The span variant keeps the same class,
13
+ * click/mousedown handling, and adds role="button" + Enter/Space
14
+ * activation so it stays keyboard-operable without the invalid nesting.
15
+ */
16
+ as?: 'button' | 'span';
8
17
  }
9
- export declare function ClearButton({ onClick, ariaLabel, variant, }: ClearButtonProps): ReactNode;
18
+ export declare function ClearButton({ onClick, ariaLabel, variant, as, }: ClearButtonProps): ReactNode;
10
19
  export {};
package/dist/components/clear-button/ClearButton.js CHANGED
@@ -5,25 +5,43 @@ import styles from './ClearButton.module.css';
5
5
  function ClearButton({
6
6
  onClick,
7
7
  ariaLabel = "Ryd",
8
- variant = "default"
8
+ variant = "default",
9
+ as = "button"
9
10
  }) {
10
11
  const wrapperClassName = [styles.clearButton, variant === "header" ? styles.header : ""].filter(Boolean).join(" ");
11
- return /* @__PURE__ */ jsx("span", { className: wrapperClassName, children: /* @__PURE__ */ jsx(
12
+ const handleMouseDown = (e) => {
13
+ e.preventDefault();
14
+ e.stopPropagation();
15
+ };
16
+ const handleClick = (e) => {
17
+ e.preventDefault();
18
+ e.stopPropagation();
19
+ onClick == null ? void 0 : onClick(e);
20
+ };
21
+ return /* @__PURE__ */ jsx("span", { className: wrapperClassName, children: as === "span" ? /* @__PURE__ */ jsx(
22
+ "span",
23
+ {
24
+ className: styles.button,
25
+ role: "button",
26
+ tabIndex: 0,
27
+ "aria-label": ariaLabel,
28
+ "data-input-role": "clear",
29
+ onMouseDown: handleMouseDown,
30
+ onClick: handleClick,
31
+ onKeyDown: (e) => {
32
+ if (e.key === "Enter" || e.key === " ") handleClick(e);
33
+ },
34
+ children: /* @__PURE__ */ jsx(X, { size: 16 })
35
+ }
36
+ ) : /* @__PURE__ */ jsx(
12
37
  "button",
13
38
  {
14
39
  className: styles.button,
15
40
  type: "button",
16
41
  "aria-label": ariaLabel,
17
42
  "data-input-role": "clear",
18
- onMouseDown: (e) => {
19
- e.preventDefault();
20
- e.stopPropagation();
21
- },
22
- onClick: (e) => {
23
- e.preventDefault();
24
- e.stopPropagation();
25
- onClick == null ? void 0 : onClick(e);
26
- },
43
+ onMouseDown: handleMouseDown,
44
+ onClick: handleClick,
27
45
  children: /* @__PURE__ */ jsx(X, { size: 16 })
28
46
  }
29
47
  ) });
package/dist/components/forms/multi-select/MultiSelect.cjs CHANGED
@@ -156,7 +156,8 @@ function MultiSelect({
156
156
  ClearButton.ClearButton,
157
157
  {
158
158
  onClick: onClear,
159
- variant: variant === "header" ? "header" : "default"
159
+ variant: variant === "header" ? "header" : "default",
160
+ as: "span"
160
161
  }
161
162
  ) : null,
162
163
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
package/dist/components/forms/multi-select/MultiSelect.js CHANGED
@@ -154,7 +154,8 @@ function MultiSelect({
154
154
  ClearButton,
155
155
  {
156
156
  onClick: onClear,
157
- variant: variant === "header" ? "header" : "default"
157
+ variant: variant === "header" ? "header" : "default",
158
+ as: "span"
158
159
  }
159
160
  ) : null,
160
161
  /* @__PURE__ */ jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
package/dist/components/forms/select/Select.cjs CHANGED
@@ -234,7 +234,8 @@ function Select({
234
234
  ClearButton.ClearButton,
235
235
  {
236
236
  onClick: onClear,
237
- variant: variant === "header" ? "header" : "default"
237
+ variant: variant === "header" ? "header" : "default",
238
+ as: "span"
238
239
  }
239
240
  ),
240
241
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
package/dist/components/forms/select/Select.js CHANGED
@@ -228,7 +228,8 @@ function Select({
228
228
  ClearButton,
229
229
  {
230
230
  onClick: onClear,
231
- variant: variant === "header" ? "header" : "default"
231
+ variant: variant === "header" ? "header" : "default",
232
+ as: "span"
232
233
  }
233
234
  ),
234
235
  /* @__PURE__ */ jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
package/dist/components/interval-select/IntervalSelect.cjs CHANGED
@@ -158,7 +158,8 @@ function IntervalSelect({
158
158
  ClearButton.ClearButton,
159
159
  {
160
160
  onClick: onClear,
161
- variant: variant === "header" ? "header" : "default"
161
+ variant: variant === "header" ? "header" : "default",
162
+ as: "span"
162
163
  }
163
164
  ),
164
165
  icon
package/dist/components/interval-select/IntervalSelect.js CHANGED
@@ -156,7 +156,8 @@ function IntervalSelect({
156
156
  ClearButton,
157
157
  {
158
158
  onClick: onClear,
159
- variant: variant === "header" ? "header" : "default"
159
+ variant: variant === "header" ? "header" : "default",
160
+ as: "span"
160
161
  }
161
162
  ),
162
163
  icon
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.181",
3
+ "version": "0.0.182",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",