@dbcdk/react-components 0.0.121 → 0.0.123

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 (15) hide show
  1. package/dist/components/code-block/CodeBlock.cjs +11 -1
  2. package/dist/components/code-block/CodeBlock.d.ts +1 -1
  3. package/dist/components/code-block/CodeBlock.js +12 -2
  4. package/dist/components/code-block/CodeBlock.module.css +12 -1
  5. package/dist/components/forms/checkbox/Checkbox.cjs +12 -4
  6. package/dist/components/forms/checkbox/Checkbox.d.ts +4 -1
  7. package/dist/components/forms/checkbox/Checkbox.js +12 -4
  8. package/dist/components/forms/file-upload/FileUpload.d.ts +2 -2
  9. package/dist/components/lightbox/Lightbox.cjs +3 -2
  10. package/dist/components/lightbox/Lightbox.d.ts +2 -0
  11. package/dist/components/lightbox/Lightbox.js +3 -2
  12. package/dist/components/sidebar/components/sidebar-container/SidebarContainer.cjs +3 -2
  13. package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js +4 -3
  14. package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css +5 -0
  15. package/package.json +1 -1
package/dist/components/code-block/CodeBlock.cjs CHANGED
@@ -38,6 +38,7 @@ function CodeBlock({
38
38
  const text = typeof code === "string" ? code : void 0;
39
39
  const hasChildren = children !== void 0 && children !== null;
40
40
  const [isWrapped, setIsWrapped] = react.useState(wrap);
41
+ const codeRef = react.useRef(null);
41
42
  const copy = react.useMemo(
42
43
  () => {
43
44
  var _a;
@@ -49,6 +50,15 @@ function CodeBlock({
49
50
  () => smart && !hasChildren && typeof text === "string" ? text.split("\n") : null,
50
51
  [smart, hasChildren, text]
51
52
  );
53
+ const handleDoubleClick = () => {
54
+ const el = codeRef.current;
55
+ const selection = typeof window !== "undefined" ? window.getSelection() : null;
56
+ if (!el || !selection) return;
57
+ const range = document.createRange();
58
+ range.selectNodeContents(el);
59
+ selection.removeAllRanges();
60
+ selection.addRange(range);
61
+ };
52
62
  return /* @__PURE__ */ jsxRuntime.jsxs(
53
63
  "div",
54
64
  {
@@ -76,7 +86,7 @@ function CodeBlock({
76
86
  ),
77
87
  /* @__PURE__ */ jsxRuntime.jsx(CopyButton.CopyButton, { size: "sm", shape: "round", variant: "inline", text: copy })
78
88
  ] }),
79
- /* @__PURE__ */ jsxRuntime.jsx("pre", { className: styles__default.default.container, tabIndex: 0, children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: styles__default.default.code, children: hasChildren ? children : lines ? lines.map((line, i) => {
89
+ /* @__PURE__ */ jsxRuntime.jsx("pre", { className: styles__default.default.container, tabIndex: 0, onDoubleClick: handleDoubleClick, children: /* @__PURE__ */ jsxRuntime.jsx("code", { ref: codeRef, className: styles__default.default.code, children: hasChildren ? children : lines ? lines.map((line, i) => {
80
90
  const isFirst = i === 0;
81
91
  const isFrame = looksLikeStackFrame(line);
82
92
  const cls = [
package/dist/components/code-block/CodeBlock.d.ts CHANGED
@@ -4,7 +4,7 @@ export interface CodeBlockProps {
4
4
  children?: ReactNode;
5
5
  copyButton?: boolean;
6
6
  copyText?: string;
7
- size?: 'sm' | 'md' | 'lg';
7
+ size?: 'xs' | 'sm' | 'md' | 'lg';
8
8
  smart?: boolean;
9
9
  wrap?: boolean;
10
10
  }
package/dist/components/code-block/CodeBlock.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { TextWrap } from 'lucide-react';
3
- import { useState, useMemo, isValidElement } from 'react';
3
+ import { useState, useRef, useMemo, isValidElement } from 'react';
4
4
  import styles from './CodeBlock.module.css';
5
5
  import { Button } from '../button/Button';
6
6
  import { CopyButton } from '../copy-button/CopyButton';
@@ -32,6 +32,7 @@ function CodeBlock({
32
32
  const text = typeof code === "string" ? code : void 0;
33
33
  const hasChildren = children !== void 0 && children !== null;
34
34
  const [isWrapped, setIsWrapped] = useState(wrap);
35
+ const codeRef = useRef(null);
35
36
  const copy = useMemo(
36
37
  () => {
37
38
  var _a;
@@ -43,6 +44,15 @@ function CodeBlock({
43
44
  () => smart && !hasChildren && typeof text === "string" ? text.split("\n") : null,
44
45
  [smart, hasChildren, text]
45
46
  );
47
+ const handleDoubleClick = () => {
48
+ const el = codeRef.current;
49
+ const selection = typeof window !== "undefined" ? window.getSelection() : null;
50
+ if (!el || !selection) return;
51
+ const range = document.createRange();
52
+ range.selectNodeContents(el);
53
+ selection.removeAllRanges();
54
+ selection.addRange(range);
55
+ };
46
56
  return /* @__PURE__ */ jsxs(
47
57
  "div",
48
58
  {
@@ -70,7 +80,7 @@ function CodeBlock({
70
80
  ),
71
81
  /* @__PURE__ */ jsx(CopyButton, { size: "sm", shape: "round", variant: "inline", text: copy })
72
82
  ] }),
73
- /* @__PURE__ */ jsx("pre", { className: styles.container, tabIndex: 0, children: /* @__PURE__ */ jsx("code", { className: styles.code, children: hasChildren ? children : lines ? lines.map((line, i) => {
83
+ /* @__PURE__ */ jsx("pre", { className: styles.container, tabIndex: 0, onDoubleClick: handleDoubleClick, children: /* @__PURE__ */ jsx("code", { ref: codeRef, className: styles.code, children: hasChildren ? children : lines ? lines.map((line, i) => {
74
84
  const isFirst = i === 0;
75
85
  const isFrame = looksLikeStackFrame(line);
76
86
  const cls = [
package/dist/components/code-block/CodeBlock.module.css CHANGED
@@ -18,13 +18,20 @@
18
18
  font-family: var(--font-family-mono);
19
19
  line-height: 1.35;
20
20
  overflow: auto;
21
- scrollbar-gutter: stable;
22
21
  display: inline-flex;
23
22
  align-items: flex-start;
24
23
  max-inline-size: 100%;
25
24
  }
26
25
 
27
26
  /* Sizes */
27
+ .xs .container {
28
+ padding: var(--spacing-xxs);
29
+ }
30
+
31
+ .xs .code {
32
+ font-size: var(--font-size-xs);
33
+ }
34
+
28
35
  .sm .container {
29
36
  padding: var(--spacing-xs);
30
37
  }
@@ -45,6 +52,10 @@
45
52
  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
46
53
  }
47
54
 
55
+ .xs.hasActions .container {
56
+ min-block-size: calc(var(--code-actions-h) + var(--spacing-xxs) + var(--spacing-xxs));
57
+ }
58
+
48
59
  .sm.hasActions .container {
49
60
  min-block-size: calc(var(--code-actions-h) + var(--spacing-xs) + var(--spacing-xs));
50
61
  }
package/dist/components/forms/checkbox/Checkbox.cjs CHANGED
@@ -4,6 +4,7 @@
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
  var lucideReact = require('lucide-react');
6
6
  var react = require('react');
7
+ var Tooltip = require('../../../components/overlay/tooltip/Tooltip');
7
8
  var styles = require('./Checkbox.module.css');
8
9
  var InputContainer = require('../input-container/InputContainer');
9
10
 
@@ -29,7 +30,9 @@ function Checkbox({
29
30
  required = false,
30
31
  noContainer = false,
31
32
  id,
32
- "data-cy": dataCy
33
+ "data-cy": dataCy,
34
+ tooltip,
35
+ tooltipPlacement
33
36
  }) {
34
37
  const [internal, setInternal] = react.useState(false);
35
38
  const isChecked = controlled != null ? controlled : internal;
@@ -47,7 +50,7 @@ function Checkbox({
47
50
  className: [styles__default.default.container, size === "sm" ? styles__default.default.containerSm : ""].filter(Boolean).join(" "),
48
51
  "data-cy": dataCy,
49
52
  children: [
50
- /* @__PURE__ */ jsxRuntime.jsx(
53
+ /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(
51
54
  "button",
52
55
  {
53
56
  id: controlId,
@@ -58,10 +61,15 @@ function Checkbox({
58
61
  "aria-disabled": disabled || void 0,
59
62
  "aria-invalid": Boolean(error) || void 0,
60
63
  onClick: toggle,
61
- className: [styles__default.default.checkbox, isChecked ? styles__default.default.checked : "", styles__default.default[variant], styles__default.default[size]].filter(Boolean).join(" "),
64
+ className: [
65
+ styles__default.default.checkbox,
66
+ isChecked ? styles__default.default.checked : "",
67
+ styles__default.default[variant],
68
+ styles__default.default[size]
69
+ ].filter(Boolean).join(" "),
62
70
  children: isChecked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: styles__default.default.icon })
63
71
  }
64
- ),
72
+ ) }),
65
73
  label && (labelAs === "label" ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles__default.default.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }))
66
74
  ]
67
75
  }
package/dist/components/forms/checkbox/Checkbox.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import type { JSX, ReactNode } from 'react';
3
+ import type { TooltipPlacement } from '../../../components/overlay/tooltip/TooltipProvider';
3
4
  type Variant = 'default' | 'primary' | 'outlined' | 'success' | 'info';
4
5
  type Size = 'sm' | 'md' | 'lg';
5
6
  interface CheckboxProps {
@@ -21,6 +22,8 @@ interface CheckboxProps {
21
22
  noContainer?: boolean;
22
23
  id?: string;
23
24
  'data-cy'?: string;
25
+ tooltip?: ReactNode;
26
+ tooltipPlacement?: TooltipPlacement;
24
27
  }
25
- export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, labelAs, size, modified, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: CheckboxProps): JSX.Element;
28
+ export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, labelAs, size, modified, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, tooltip, tooltipPlacement, }: CheckboxProps): JSX.Element;
26
29
  export {};
package/dist/components/forms/checkbox/Checkbox.js CHANGED
@@ -2,6 +2,7 @@
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import { Check } from 'lucide-react';
4
4
  import { useState, useId } from 'react';
5
+ import { Tooltip } from '../../../components/overlay/tooltip/Tooltip';
5
6
  import styles from './Checkbox.module.css';
6
7
  import { InputContainer } from '../input-container/InputContainer';
7
8
 
@@ -23,7 +24,9 @@ function Checkbox({
23
24
  required = false,
24
25
  noContainer = false,
25
26
  id,
26
- "data-cy": dataCy
27
+ "data-cy": dataCy,
28
+ tooltip,
29
+ tooltipPlacement
27
30
  }) {
28
31
  const [internal, setInternal] = useState(false);
29
32
  const isChecked = controlled != null ? controlled : internal;
@@ -41,7 +44,7 @@ function Checkbox({
41
44
  className: [styles.container, size === "sm" ? styles.containerSm : ""].filter(Boolean).join(" "),
42
45
  "data-cy": dataCy,
43
46
  children: [
44
- /* @__PURE__ */ jsx(
47
+ /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsx(
45
48
  "button",
46
49
  {
47
50
  id: controlId,
@@ -52,10 +55,15 @@ function Checkbox({
52
55
  "aria-disabled": disabled || void 0,
53
56
  "aria-invalid": Boolean(error) || void 0,
54
57
  onClick: toggle,
55
- className: [styles.checkbox, isChecked ? styles.checked : "", styles[variant], styles[size]].filter(Boolean).join(" "),
58
+ className: [
59
+ styles.checkbox,
60
+ isChecked ? styles.checked : "",
61
+ styles[variant],
62
+ styles[size]
63
+ ].filter(Boolean).join(" "),
56
64
  children: isChecked && /* @__PURE__ */ jsx(Check, { className: styles.icon })
57
65
  }
58
- ),
66
+ ) }),
59
67
  label && (labelAs === "label" ? /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsx("span", { className: styles.label, children: label }))
60
68
  ]
61
69
  }
package/dist/components/forms/file-upload/FileUpload.d.ts CHANGED
@@ -4,8 +4,8 @@ export interface FileUploadProps extends Omit<InputHTMLAttributes<HTMLInputEleme
4
4
  onChange?: (files: FileList | null) => void;
5
5
  /** Custom content to replace the default icon + text hint */
6
6
  children?: ReactNode;
7
- /** Short hint shown below the icon when no custom children */
8
- hint?: string;
7
+ /** Hint shown below the icon when no custom children */
8
+ hint?: ReactNode;
9
9
  fullWidth?: boolean;
10
10
  height?: number | string;
11
11
  minWidth?: string | number;
package/dist/components/lightbox/Lightbox.cjs CHANGED
@@ -121,7 +121,7 @@ function Lightbox({
121
121
  if (!items.length) return null;
122
122
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
123
123
  trigger ? trigger(openAt) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnails, children: items.map((item, i) => {
124
- var _a2;
124
+ var _a2, _b;
125
125
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.thumbnailCard, children: [
126
126
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnailMedia, children: /* @__PURE__ */ jsxRuntime.jsx(
127
127
  "button",
@@ -139,7 +139,8 @@ function Lightbox({
139
139
  {
140
140
  items: [
141
141
  { value: item.height != null ? `H:${item.height}px` : "-" },
142
- { value: item.width != null ? `B:${item.width}px` : "-" }
142
+ { value: item.width != null ? `B:${item.width}px` : "-" },
143
+ ...(_b = item.metaAddition) != null ? _b : []
143
144
  ]
144
145
  }
145
146
  ) }),
package/dist/components/lightbox/Lightbox.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { ReactElement, ReactNode } from 'react';
2
+ import { type MetaItem } from '../../client';
2
3
  export type LightboxItem = {
3
4
  thumbnail: ReactNode;
4
5
  preview?: ReactNode;
@@ -7,6 +8,7 @@ export type LightboxItem = {
7
8
  mimeType?: string;
8
9
  width?: number;
9
10
  height?: number;
11
+ metaAddition?: MetaItem[];
10
12
  };
11
13
  export type LightboxContextMenuItem = {
12
14
  label: ReactNode;
package/dist/components/lightbox/Lightbox.js CHANGED
@@ -115,7 +115,7 @@ function Lightbox({
115
115
  if (!items.length) return null;
116
116
  return /* @__PURE__ */ jsxs(Fragment, { children: [
117
117
  trigger ? trigger(openAt) : /* @__PURE__ */ jsx("div", { className: styles.thumbnails, children: items.map((item, i) => {
118
- var _a2;
118
+ var _a2, _b;
119
119
  return /* @__PURE__ */ jsxs("div", { className: styles.thumbnailCard, children: [
120
120
  /* @__PURE__ */ jsx("div", { className: styles.thumbnailMedia, children: /* @__PURE__ */ jsx(
121
121
  "button",
@@ -133,7 +133,8 @@ function Lightbox({
133
133
  {
134
134
  items: [
135
135
  { value: item.height != null ? `H:${item.height}px` : "-" },
136
- { value: item.width != null ? `B:${item.width}px` : "-" }
136
+ { value: item.width != null ? `B:${item.width}px` : "-" },
137
+ ...(_b = item.metaAddition) != null ? _b : []
137
138
  ]
138
139
  }
139
140
  ) }),
package/dist/components/sidebar/components/sidebar-container/SidebarContainer.cjs CHANGED
@@ -169,11 +169,12 @@ function SidebarContainer({
169
169
  /* @__PURE__ */ jsxRuntime.jsx(
170
170
  Button.Button,
171
171
  {
172
- size: "md",
172
+ size: "sm",
173
173
  variant: "inline",
174
174
  shape: "round",
175
175
  "aria-label": "Collapse sidebar",
176
- icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: isSidebarCollapsed ? styles__default.default.collapsedIcon : "" }),
176
+ tooltip: isSidebarCollapsed ? "Vis sidebj\xE6lke" : "Skjul sidebj\xE6lke",
177
+ icon: isSidebarCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftOpen, { className: styles__default.default.sidebarIcon }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { className: styles__default.default.sidebarIcon }),
177
178
  onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed)
178
179
  }
179
180
  )
package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use client';
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
- import { ChevronLeft } from 'lucide-react';
3
+ import { PanelLeftOpen, PanelLeft } from 'lucide-react';
4
4
  import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
5
5
  import { Logo } from '../../../../assets/logo';
6
6
  import { Button } from '../../../../components/button/Button';
@@ -162,11 +162,12 @@ function SidebarContainer({
162
162
  /* @__PURE__ */ jsx(
163
163
  Button,
164
164
  {
165
- size: "md",
165
+ size: "sm",
166
166
  variant: "inline",
167
167
  shape: "round",
168
168
  "aria-label": "Collapse sidebar",
169
- icon: /* @__PURE__ */ jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : "" }),
169
+ tooltip: isSidebarCollapsed ? "Vis sidebj\xE6lke" : "Skjul sidebj\xE6lke",
170
+ icon: isSidebarCollapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { className: styles.sidebarIcon }) : /* @__PURE__ */ jsx(PanelLeft, { className: styles.sidebarIcon }),
170
171
  onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed)
171
172
  }
172
173
  )
package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css CHANGED
@@ -15,6 +15,11 @@
15
15
  inline-size var(--transition-fast) var(--ease-standard);
16
16
  }
17
17
 
18
+ .sidebarIcon {
19
+ inline-size: var(--icon-size-sm);
20
+ block-size: var(--icon-size-sm);
21
+ color: var(--color-fg-subtle);
22
+ }
18
23
  .container.resizing {
19
24
  transition: none;
20
25
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.121",
3
+ "version": "0.0.123",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",