@dbcdk/react-components 0.0.199 → 0.0.200

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 (12) hide show
  1. package/dist/components/json-viewer/JsonViewer.module.css +4 -0
  2. package/dist/components/json-viewer/JsonViewerShell.cjs +2 -2
  3. package/dist/components/json-viewer/JsonViewerShell.js +2 -2
  4. package/dist/components/line-viewer/LineViewer.cjs +3 -1
  5. package/dist/components/line-viewer/LineViewer.d.ts +6 -1
  6. package/dist/components/line-viewer/LineViewer.js +3 -1
  7. package/dist/components/line-viewer/LineViewer.module.css +2 -0
  8. package/dist/components/xml-viewer/XmlViewer.cjs +3 -1
  9. package/dist/components/xml-viewer/XmlViewer.d.ts +6 -1
  10. package/dist/components/xml-viewer/XmlViewer.js +3 -1
  11. package/dist/components/xml-viewer/XmlViewer.module.css +2 -0
  12. package/package.json +1 -1
package/dist/components/json-viewer/JsonViewer.module.css CHANGED
@@ -23,6 +23,10 @@
23
23
 
24
24
  display: flex;
25
25
  flex-direction: column;
26
+ /* In a parent with a definite height, scroll inside instead of overflowing it. */
27
+ max-height: 100%;
28
+ /* As a flex item, shrink below the content height instead of overflowing the parent. */
29
+ min-height: 0;
26
30
  gap: var(--spacing-xs);
27
31
  background: var(--json-pane-bg);
28
32
  color: var(--json-pane-text);
package/dist/components/json-viewer/JsonViewerShell.cjs CHANGED
@@ -186,7 +186,7 @@ function JsonViewerShell({
186
186
  {
187
187
  ref: scrollRef,
188
188
  className: [styles__default.default.rawPane, deleted ? styles__default.default.deleted : ""].filter(Boolean).join(" "),
189
- style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
189
+ style: { maxHeight },
190
190
  children: [
191
191
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.floatingSpacer, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "inline", tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, {}) }) }) }),
192
192
  rawJson
@@ -200,7 +200,7 @@ function JsonViewerShell({
200
200
  role: "tree",
201
201
  "aria-label": "JSON-visning",
202
202
  ref: scrollRef,
203
- style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
203
+ style: { maxHeight },
204
204
  children: hasResults ? children : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyState, children: emptySearchText })
205
205
  }
206
206
  ) })
package/dist/components/json-viewer/JsonViewerShell.js CHANGED
@@ -180,7 +180,7 @@ function JsonViewerShell({
180
180
  {
181
181
  ref: scrollRef,
182
182
  className: [styles.rawPane, deleted ? styles.deleted : ""].filter(Boolean).join(" "),
183
- style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
183
+ style: { maxHeight },
184
184
  children: [
185
185
  /* @__PURE__ */ jsx("span", { className: styles.floatingSpacer, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Button, { variant: "inline", tabIndex: -1, children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, {}) }) }) }),
186
186
  rawJson
@@ -194,7 +194,7 @@ function JsonViewerShell({
194
194
  role: "tree",
195
195
  "aria-label": "JSON-visning",
196
196
  ref: scrollRef,
197
- style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
197
+ style: { maxHeight },
198
198
  children: hasResults ? children : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: emptySearchText })
199
199
  }
200
200
  ) })
package/dist/components/line-viewer/LineViewer.cjs CHANGED
@@ -35,7 +35,8 @@ function LineViewer({
35
35
  defaultViewMode = "highlighted",
36
36
  deleted = false,
37
37
  storageKey,
38
- borderless = false
38
+ borderless = false,
39
+ maxHeight
39
40
  }) {
40
41
  const tokens = react.useMemo(() => tokenizeLineFormat.tokenizeLineFormat(lines), [lines]);
41
42
  const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState.usePersistentState({
@@ -157,6 +158,7 @@ function LineViewer({
157
158
  wrap ? styles__default.default.wrap : styles__default.default.noWrap,
158
159
  deleted ? styles__default.default.deleted : ""
159
160
  ].filter(Boolean).join(" "),
161
+ style: { maxHeight },
160
162
  tabIndex: 0,
161
163
  children: [
162
164
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.toolbarSpacer, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "inline", tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, {}) }) }) }),
package/dist/components/line-viewer/LineViewer.d.ts CHANGED
@@ -21,5 +21,10 @@ export interface LineViewerProps {
21
21
  * modal).
22
22
  */
23
23
  borderless?: boolean;
24
+ /**
25
+ * Caps the height of the scrolling pane (a number is pixels), e.g. when the
26
+ * parent has no definite height for the viewer to fill.
27
+ */
28
+ maxHeight?: number | string;
24
29
  }
25
- export declare function LineViewer({ lines, size, appearance, defaultViewMode, deleted, storageKey, borderless, }: LineViewerProps): JSX.Element;
30
+ export declare function LineViewer({ lines, size, appearance, defaultViewMode, deleted, storageKey, borderless, maxHeight, }: LineViewerProps): JSX.Element;
package/dist/components/line-viewer/LineViewer.js CHANGED
@@ -29,7 +29,8 @@ function LineViewer({
29
29
  defaultViewMode = "highlighted",
30
30
  deleted = false,
31
31
  storageKey,
32
- borderless = false
32
+ borderless = false,
33
+ maxHeight
33
34
  }) {
34
35
  const tokens = useMemo(() => tokenizeLineFormat(lines), [lines]);
35
36
  const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState({
@@ -151,6 +152,7 @@ function LineViewer({
151
152
  wrap ? styles.wrap : styles.noWrap,
152
153
  deleted ? styles.deleted : ""
153
154
  ].filter(Boolean).join(" "),
155
+ style: { maxHeight },
154
156
  tabIndex: 0,
155
157
  children: [
156
158
  /* @__PURE__ */ jsx("span", { className: styles.toolbarSpacer, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Button, { variant: "inline", tabIndex: -1, children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, {}) }) }) }),
package/dist/components/line-viewer/LineViewer.module.css CHANGED
@@ -25,6 +25,8 @@
25
25
  flex-direction: column;
26
26
  /* In a parent with a definite height, scroll inside instead of overflowing it. */
27
27
  max-height: 100%;
28
+ /* As a flex item, shrink below the content height instead of overflowing the parent. */
29
+ min-height: 0;
28
30
  background: var(--line-pane-bg);
29
31
  border: var(--border-width-thin) solid var(--line-pane-border);
30
32
  border-radius: var(--border-radius-default);
package/dist/components/xml-viewer/XmlViewer.cjs CHANGED
@@ -36,7 +36,8 @@ function XmlViewer({
36
36
  defaultViewMode = "highlighted",
37
37
  deleted = false,
38
38
  storageKey,
39
- borderless = false
39
+ borderless = false,
40
+ maxHeight
40
41
  }) {
41
42
  const tokens = react.useMemo(() => tokenizeXml.tokenizeXml(xml), [xml]);
42
43
  const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState.usePersistentState({
@@ -158,6 +159,7 @@ function XmlViewer({
158
159
  wrap ? styles__default.default.wrap : styles__default.default.noWrap,
159
160
  deleted ? styles__default.default.deleted : ""
160
161
  ].filter(Boolean).join(" "),
162
+ style: { maxHeight },
161
163
  tabIndex: 0,
162
164
  children: [
163
165
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.toolbarSpacer, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "inline", tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, {}) }) }) }),
package/dist/components/xml-viewer/XmlViewer.d.ts CHANGED
@@ -21,6 +21,11 @@ export interface XmlViewerProps {
21
21
  * modal).
22
22
  */
23
23
  borderless?: boolean;
24
+ /**
25
+ * Caps the height of the scrolling pane (a number is pixels), e.g. when the
26
+ * parent has no definite height for the viewer to fill.
27
+ */
28
+ maxHeight?: number | string;
24
29
  }
25
- export declare function XmlViewer({ xml, size, appearance, defaultViewMode, deleted, storageKey, borderless, }: XmlViewerProps): JSX.Element;
30
+ export declare function XmlViewer({ xml, size, appearance, defaultViewMode, deleted, storageKey, borderless, maxHeight, }: XmlViewerProps): JSX.Element;
26
31
  export {};
package/dist/components/xml-viewer/XmlViewer.js CHANGED
@@ -30,7 +30,8 @@ function XmlViewer({
30
30
  defaultViewMode = "highlighted",
31
31
  deleted = false,
32
32
  storageKey,
33
- borderless = false
33
+ borderless = false,
34
+ maxHeight
34
35
  }) {
35
36
  const tokens = useMemo(() => tokenizeXml(xml), [xml]);
36
37
  const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState({
@@ -152,6 +153,7 @@ function XmlViewer({
152
153
  wrap ? styles.wrap : styles.noWrap,
153
154
  deleted ? styles.deleted : ""
154
155
  ].filter(Boolean).join(" "),
156
+ style: { maxHeight },
155
157
  tabIndex: 0,
156
158
  children: [
157
159
  /* @__PURE__ */ jsx("span", { className: styles.toolbarSpacer, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Button, { variant: "inline", tabIndex: -1, children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, {}) }) }) }),
package/dist/components/xml-viewer/XmlViewer.module.css CHANGED
@@ -19,6 +19,8 @@
19
19
  flex-direction: column;
20
20
  /* In a parent with a definite height, scroll inside instead of overflowing it. */
21
21
  max-height: 100%;
22
+ /* As a flex item, shrink below the content height instead of overflowing the parent. */
23
+ min-height: 0;
22
24
  background: var(--xml-pane-bg);
23
25
  border: var(--border-width-thin) solid var(--xml-pane-border);
24
26
  border-radius: var(--border-radius-default);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.199",
3
+ "version": "0.0.200",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",