@dbcdk/react-components 0.0.121 → 0.0.122

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 (9) 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/file-upload/FileUpload.d.ts +2 -2
  6. package/dist/components/sidebar/components/sidebar-container/SidebarContainer.cjs +3 -2
  7. package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js +4 -3
  8. package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css +5 -0
  9. 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/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/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.122",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",