@digdir/designsystemet-react 1.0.0-next.42 → 1.0.0-next.43

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 (8) hide show
  1. package/dist/cjs/components/Field/FieldCounter.js +6 -4
  2. package/dist/cjs/components/Field/fieldObserver.js +6 -1
  3. package/dist/esm/components/Field/FieldCounter.js +6 -4
  4. package/dist/esm/components/Field/fieldObserver.js +4 -2
  5. package/dist/types/components/Field/FieldCounter.d.ts.map +1 -1
  6. package/dist/types/components/Field/fieldObserver.d.ts +3 -0
  7. package/dist/types/components/Field/fieldObserver.d.ts.map +1 -1
  8. package/package.json +1 -1
package/dist/cjs/components/Field/FieldCounter.js CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
  var react = require('react');
6
+ var fieldObserver = require('./fieldObserver.js');
6
7
  var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
7
8
  var Paragraph = require('../Paragraph/Paragraph.js');
8
9
 
@@ -13,13 +14,14 @@ const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d
13
14
  const hasExceededLimit = count > limit;
14
15
  const remainder = limit - count;
15
16
  react.useEffect(() => {
17
+ const field = counterRef.current?.closest('.ds-field');
18
+ const input = Array.from(field?.getElementsByTagName('*') || []).find(fieldObserver.isInputLike);
16
19
  const onInput = ({ target }) => {
17
- if (target instanceof HTMLInputElement ||
18
- target instanceof HTMLTextAreaElement) {
20
+ if (fieldObserver.isInputLike(target))
19
21
  setCount(target.value.length);
20
- }
21
22
  };
22
- const field = counterRef.current?.closest('.ds-field');
23
+ if (input)
24
+ onInput({ target: input }); // Initial setup
23
25
  field?.addEventListener('input', onInput);
24
26
  return () => field?.removeEventListener('input', onInput);
25
27
  }, [setCount]);
package/dist/cjs/components/Field/fieldObserver.js CHANGED
@@ -76,7 +76,9 @@ function fieldObserver(fieldElement) {
76
76
  // Utilities
77
77
  const isElement = (node) => node instanceof Element;
78
78
  const isLabel = (node) => node instanceof HTMLLabelElement;
79
- const isInputLike = (node) => 'validity' in node && !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
79
+ const isInputLike = (node) => node instanceof HTMLElement &&
80
+ 'validity' in node &&
81
+ !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
80
82
  const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
81
83
  // Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
82
84
  function createOptimizedMutationObserver(callback) {
@@ -95,3 +97,6 @@ function createOptimizedMutationObserver(callback) {
95
97
  }
96
98
 
97
99
  exports.fieldObserver = fieldObserver;
100
+ exports.isElement = isElement;
101
+ exports.isInputLike = isInputLike;
102
+ exports.isLabel = isLabel;
package/dist/esm/components/Field/FieldCounter.js CHANGED
@@ -1,6 +1,7 @@
1
1
  'use client';
2
2
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
3
  import { forwardRef, useState, useRef, useEffect } from 'react';
4
+ import { isInputLike } from './fieldObserver.js';
4
5
  import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
5
6
  import { Paragraph } from '../Paragraph/Paragraph.js';
6
7
 
@@ -11,13 +12,14 @@ const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn
11
12
  const hasExceededLimit = count > limit;
12
13
  const remainder = limit - count;
13
14
  useEffect(() => {
15
+ const field = counterRef.current?.closest('.ds-field');
16
+ const input = Array.from(field?.getElementsByTagName('*') || []).find(isInputLike);
14
17
  const onInput = ({ target }) => {
15
- if (target instanceof HTMLInputElement ||
16
- target instanceof HTMLTextAreaElement) {
18
+ if (isInputLike(target))
17
19
  setCount(target.value.length);
18
- }
19
20
  };
20
- const field = counterRef.current?.closest('.ds-field');
21
+ if (input)
22
+ onInput({ target: input }); // Initial setup
21
23
  field?.addEventListener('input', onInput);
22
24
  return () => field?.removeEventListener('input', onInput);
23
25
  }, [setCount]);
package/dist/esm/components/Field/fieldObserver.js CHANGED
@@ -74,7 +74,9 @@ function fieldObserver(fieldElement) {
74
74
  // Utilities
75
75
  const isElement = (node) => node instanceof Element;
76
76
  const isLabel = (node) => node instanceof HTMLLabelElement;
77
- const isInputLike = (node) => 'validity' in node && !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
77
+ const isInputLike = (node) => node instanceof HTMLElement &&
78
+ 'validity' in node &&
79
+ !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
78
80
  const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
79
81
  // Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
80
82
  function createOptimizedMutationObserver(callback) {
@@ -92,4 +94,4 @@ function createOptimizedMutationObserver(callback) {
92
94
  return observer;
93
95
  }
94
96
 
95
- export { fieldObserver };
97
+ export { fieldObserver, isElement, isInputLike, isLabel };
package/dist/types/components/Field/FieldCounter.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FieldCounter.d.ts","sourceRoot":"","sources":["../../../src/components/Field/FieldCounter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,sBAAsB,CAAC;AAK3B,eAAO,MAAM,YAAY;IAfvB;;OAEG;WACI,MAAM;IACb;;OAEG;YACK,MAAM;IACd,sCAAsC;WAC/B,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8CAuDd,CAAC"}
1
+ {"version":3,"file":"FieldCounter.d.ts","sourceRoot":"","sources":["../../../src/components/Field/FieldCounter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,sBAAsB,CAAC;AAG9B,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,sBAAsB,CAAC;AAK3B,eAAO,MAAM,YAAY;IAfvB;;OAEG;WACI,MAAM;IACb;;OAEG;YACK,MAAM;IACd,sCAAsC;WAC/B,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8CAqDd,CAAC"}
package/dist/types/components/Field/fieldObserver.d.ts CHANGED
@@ -1,2 +1,5 @@
1
1
  export declare function fieldObserver(fieldElement: HTMLElement | null): (() => void) | undefined;
2
+ export declare const isElement: (node: Node) => node is Element;
3
+ export declare const isLabel: (node: Node) => node is HTMLLabelElement;
4
+ export declare const isInputLike: (node: unknown) => node is HTMLInputElement;
2
5
  //# sourceMappingURL=fieldObserver.d.ts.map
package/dist/types/components/Field/fieldObserver.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fieldObserver.d.ts","sourceRoot":"","sources":["../../../src/components/Field/fieldObserver.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,4BA4E7D"}
1
+ {"version":3,"file":"fieldObserver.d.ts","sourceRoot":"","sources":["../../../src/components/Field/fieldObserver.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,4BA4E7D;AAGD,eAAO,MAAM,SAAS,SAAU,IAAI,oBAA4B,CAAC;AACjE,eAAO,MAAM,OAAO,SAAU,IAAI,6BAAqC,CAAC;AACxE,eAAO,MAAM,WAAW,SAAU,OAAO,KAAG,IAAI,IAAI,gBAGd,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@digdir/designsystemet-react",
3
3
  "type": "module",
4
- "version": "1.0.0-next.42",
4
+ "version": "1.0.0-next.43",
5
5
  "description": "React components for Designsystemet",
6
6
  "author": "Designsystemet team",
7
7
  "repository": {