@iabbb/bds-react 0.48.0 → 0.49.1

package/FieldCharacterCountdown/FieldCharacterCountdown.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export type FieldCharacterCountdownProps = {
+    error?: string;
+    hint?: string;
+    id?: string;
+    isOptional?: boolean;
+    label: string;
+    maxCharacters: number;
+};
+export default function FieldCharacterCountdown({ error, hint, id, isOptional, label, maxCharacters, onChange, ...props }: FieldCharacterCountdownProps & React.ComponentPropsWithoutRef<'textarea'>): React.JSX.Element;

package/FieldCharacterCountdown/index.cjs

@@ -0,0 +1,257 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.indexOf(n) >= 0) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var _excluded$1 = ["className", "children"];
+function ErrorMessage(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/React__namespace.createElement("span", _extends({
+    className: ['bds-error', className].filter(function (x) {
+      return x;
+    }).join(' ')
+  }, props), /*#__PURE__*/React__namespace.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
+    "aria-hidden": "true",
+    height: "1em",
+    width: "1em",
+    fill: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z"
+  })), children);
+}
+
+var visuallyHiddenAnnouncementUpdateTimeInSeconds = 1;
+function useCharacterCountdown(maxCharacters) {
+  var currentCharacters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var _React$useState = React__namespace.useState(maxCharacters - currentCharacters),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    remainingCharacters = _React$useState2[0],
+    setRemainingCharacters = _React$useState2[1];
+
+  // When JS fails to load, the default label 👇 will still let the user know about the limit.
+  var _React$useState3 = React__namespace.useState("You can use up to ".concat(maxCharacters, " characters")),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    label = _React$useState4[0],
+    setLabel = _React$useState4[1];
+  var _React$useState5 = React__namespace.useState(label),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    visuallyHiddenAnnouncement = _React$useState6[0],
+    setVisuallyHiddenAnnouncement = _React$useState6[1];
+
+  // This should lag behind the visual update -- otherwise, screen reader users will be interrupted with a lot of chatter while typing
+  var updateVisuallyHiddenAnnouncement = useDebounce(function (charactersToAnnounce) {
+    if (charactersToAnnounce >= 0) {
+      setVisuallyHiddenAnnouncement("You have ".concat(charactersToAnnounce, " characters remaining"));
+    } else {
+      setVisuallyHiddenAnnouncement("You have ".concat(charactersToAnnounce * -1, " characters too many"));
+    }
+  }, visuallyHiddenAnnouncementUpdateTimeInSeconds * 1000);
+  React__namespace.useEffect(function () {
+    if (remainingCharacters >= 0) {
+      setLabel("<strong>".concat(remainingCharacters, "</strong> characters remaining"));
+    } else {
+      setLabel("You have <strong>".concat(remainingCharacters * -1, "</strong> characters too many"));
+    }
+    updateVisuallyHiddenAnnouncement(remainingCharacters);
+  }, [remainingCharacters, updateVisuallyHiddenAnnouncement]);
+  return {
+    hasExceededLimit: remainingCharacters < 0,
+    handleTextareaChange: function handleTextareaChange(e) {
+      setRemainingCharacters(maxCharacters - e.target.value.length);
+    },
+    label: label,
+    visuallyHiddenAnnouncement: visuallyHiddenAnnouncement
+  };
+}
+
+/**
+ * Simple debounce implementation. Will call the given
+ * function once after the time given has passed since
+ * it was last called.
+ * Lifted from downshift/utils (not exposed in lib).
+ * @param {Function} fn the function to call after the time
+ * @param {Number} time the time to wait
+ * @return {Function} the debounced function
+ */
+// biome-ignore lint/suspicious/noExplicitAny: We don't know or care what parameters the function accepts
+function debounce(fn, time) {
+  var timeoutId = 0;
+  function cancel() {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+  }
+  function wrapper() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    cancel();
+    timeoutId = setTimeout(function () {
+      timeoutId = null;
+      fn.apply(void 0, args);
+    }, time);
+  }
+  wrapper.cancel = cancel;
+  return wrapper;
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: We don't know or care what parameters the function accepts
+function useDebounce(callback, delay) {
+  return React__namespace.useRef(debounce(function () {
+    return callback.apply(void 0, arguments);
+  }, delay)).current;
+}
+
+var _excluded = ["error", "hint", "id", "isOptional", "label", "maxCharacters", "onChange"];
+function FieldCharacterCountdown(_ref) {
+  var _id;
+  var error = _ref.error,
+    hint = _ref.hint,
+    id = _ref.id,
+    _ref$isOptional = _ref.isOptional,
+    isOptional = _ref$isOptional === void 0 ? false : _ref$isOptional,
+    label = _ref.label,
+    maxCharacters = _ref.maxCharacters,
+    _onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var characterCountdown = useCharacterCountdown(maxCharacters, (props.value || '').length);
+  id = (_id = id) !== null && _id !== void 0 ? _id : props.name;
+  var errorId = React__namespace.useId();
+  var hintId = React__namespace.useId();
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    className: "bds-form-group"
+  }, /*#__PURE__*/React__namespace.createElement("label", {
+    htmlFor: id
+  }, label, isOptional && ' (optional)'), hint && /*#__PURE__*/React__namespace.createElement("span", {
+    className: "bds-hint",
+    id: hintId
+  }, hint), error && /*#__PURE__*/React__namespace.createElement(ErrorMessage, {
+    id: errorId
+  }, error), /*#__PURE__*/React__namespace.createElement("textarea", _extends({
+    "aria-invalid": error ? true : undefined,
+    "aria-describedby": error && hint ? "".concat(hintId, " ").concat(errorId) : error ? errorId : hint ? hintId : undefined,
+    className: "bds-textarea",
+    id: id,
+    onChange: function onChange(e) {
+      if (_onChange) {
+        _onChange(e);
+      }
+      characterCountdown.handleTextareaChange(e);
+    }
+  }, props)), /*#__PURE__*/React__namespace.createElement("div", {
+    "aria-hidden": "true",
+    className: "bds-character-count",
+    "data-exceeds-limit": characterCountdown.hasExceededLimit ? true : undefined
+    // biome-ignore lint/security/noDangerouslySetInnerHtml: HTML is expected and used for highlighting the number itself
+    ,
+    dangerouslySetInnerHTML: {
+      __html: characterCountdown.label
+    }
+  }), /*#__PURE__*/React__namespace.createElement("div", {
+    "aria-live": "polite",
+    className: "visually-hidden"
+  }, characterCountdown.visuallyHiddenAnnouncement));
+}
+
+exports.default = FieldCharacterCountdown;
+exports.useCharacterCountdown = useCharacterCountdown;
+//# sourceMappingURL=index.cjs.map

package/FieldCharacterCountdown/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/ErrorMessage/ErrorMessage.tsx","../../src/FieldCharacterCountdown/useCharacterCountdown.ts","../../src/FieldCharacterCountdown/FieldCharacterCountdown.tsx"],"sourcesContent":["// biome-ignore lint/style/useImportType: following this rule does not work for some reason\nimport * as React from 'react';\n\nexport default function ErrorMessage({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>) {\n  return (\n    <span className={['bds-error', className].filter((x) => x).join(' ')} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 512 512\"\n        aria-hidden=\"true\"\n        height=\"1em\"\n        width=\"1em\"\n        fill=\"currentColor\"\n      >\n        <path d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z\" />\n      </svg>\n      {children}\n    </span>\n  );\n}\n","import * as React from 'react';\n\nconst visuallyHiddenAnnouncementUpdateTimeInSeconds = 1;\n\nexport default function useCharacterCountdown(maxCharacters: number, currentCharacters = 0) {\n  const [remainingCharacters, setRemainingCharacters] = React.useState(maxCharacters - currentCharacters);\n\n  // When JS fails to load, the default label 👇 will still let the user know about the limit.\n  const [label, setLabel] = React.useState(`You can use up to ${maxCharacters} characters`);\n  const [visuallyHiddenAnnouncement, setVisuallyHiddenAnnouncement] = React.useState(label);\n\n  // This should lag behind the visual update -- otherwise, screen reader users will be interrupted with a lot of chatter while typing\n  const updateVisuallyHiddenAnnouncement = useDebounce((charactersToAnnounce: number) => {\n    if (charactersToAnnounce >= 0) {\n      setVisuallyHiddenAnnouncement(`You have ${charactersToAnnounce} characters remaining`);\n    } else {\n      setVisuallyHiddenAnnouncement(`You have ${charactersToAnnounce * -1} characters too many`);\n    }\n  }, visuallyHiddenAnnouncementUpdateTimeInSeconds * 1000);\n\n  React.useEffect(() => {\n    if (remainingCharacters >= 0) {\n      setLabel(`<strong>${remainingCharacters}</strong> characters remaining`);\n    } else {\n      setLabel(`You have <strong>${remainingCharacters * -1}</strong> characters too many`);\n    }\n\n    updateVisuallyHiddenAnnouncement(remainingCharacters);\n  }, [remainingCharacters, updateVisuallyHiddenAnnouncement]);\n\n  return {\n    hasExceededLimit: remainingCharacters < 0,\n    handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      setRemainingCharacters(maxCharacters - e.target.value.length);\n    },\n    label,\n    visuallyHiddenAnnouncement,\n  };\n}\n\n/**\n * Simple debounce implementation. Will call the given\n * function once after the time given has passed since\n * it was last called.\n * Lifted from downshift/utils (not exposed in lib).\n * @param {Function} fn the function to call after the time\n * @param {Number} time the time to wait\n * @return {Function} the debounced function\n */\n// biome-ignore lint/suspicious/noExplicitAny: We don't know or care what parameters the function accepts\nfunction debounce(fn: (...rest: any[]) => any, time: number) {\n  let timeoutId: number | null = 0;\n\n  function cancel() {\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n    }\n  }\n\n  function wrapper(...args) {\n    cancel();\n    timeoutId = setTimeout(() => {\n      timeoutId = null;\n      fn(...args);\n    }, time);\n  }\n\n  wrapper.cancel = cancel;\n\n  return wrapper;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: We don't know or care what parameters the function accepts\nfunction useDebounce<T extends (...rest: any[]) => any>(callback: T, delay: number) {\n  return React.useRef(debounce((...params) => callback(...params), delay)).current;\n}\n","import * as React from 'react';\n\nimport ErrorMessage from '../ErrorMessage';\nimport useCharacterCountdown from './useCharacterCountdown';\n\nexport type FieldCharacterCountdownProps = {\n  error?: string;\n  hint?: string;\n  id?: string;\n  isOptional?: boolean;\n  label: string;\n  maxCharacters: number;\n};\n\nexport default function FieldCharacterCountdown({\n  error,\n  hint,\n  id,\n  isOptional = false,\n  label,\n  maxCharacters,\n  onChange,\n  ...props\n}: FieldCharacterCountdownProps & React.ComponentPropsWithoutRef<'textarea'>) {\n  const characterCountdown = useCharacterCountdown(maxCharacters, ((props.value as string) || '').length);\n\n  id = id ?? props.name;\n\n  const errorId = React.useId();\n  const hintId = React.useId();\n\n  return (\n    <div className=\"bds-form-group\">\n      <label htmlFor={id}>\n        {label}\n        {isOptional && ' (optional)'}\n      </label>\n      {hint && (\n        <span className=\"bds-hint\" id={hintId}>\n          {hint}\n        </span>\n      )}\n      {error && <ErrorMessage id={errorId}>{error}</ErrorMessage>}\n      <textarea\n        aria-invalid={error ? true : undefined}\n        aria-describedby={error && hint ? `${hintId} ${errorId}` : error ? errorId : hint ? hintId : undefined}\n        className=\"bds-textarea\"\n        id={id}\n        onChange={(e) => {\n          if (onChange) {\n            onChange(e);\n          }\n\n          characterCountdown.handleTextareaChange(e);\n        }}\n        {...props}\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"bds-character-count\"\n        data-exceeds-limit={characterCountdown.hasExceededLimit ? true : undefined}\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: HTML is expected and used for highlighting the number itself\n        dangerouslySetInnerHTML={{\n          __html: characterCountdown.label,\n        }}\n      />\n      <div aria-live=\"polite\" className=\"visually-hidden\">\n        {characterCountdown.visuallyHiddenAnnouncement}\n      </div>\n    </div>\n  );\n}\n"],"names":["ErrorMessage","_ref","className","children","props","_objectWithoutProperties","_excluded","React","createElement","_extends","filter","x","join","xmlns","viewBox","height","width","fill","d","visuallyHiddenAnnouncementUpdateTimeInSeconds","useCharacterCountdown","maxCharacters","currentCharacters","arguments","length","undefined","_React$useState","useState","_React$useState2","_slicedToArray","remainingCharacters","setRemainingCharacters","_React$useState3","concat","_React$useState4","label","setLabel","_React$useState5","_React$useState6","visuallyHiddenAnnouncement","setVisuallyHiddenAnnouncement","updateVisuallyHiddenAnnouncement","useDebounce","charactersToAnnounce","useEffect","hasExceededLimit","handleTextareaChange","e","target","value","debounce","fn","time","timeoutId","cancel","clearTimeout","wrapper","_len","args","Array","_key","setTimeout","apply","callback","delay","useRef","current","FieldCharacterCountdown","_id","error","hint","id","_ref$isOptional","isOptional","onChange","characterCountdown","name","errorId","useId","hintId","htmlFor","dangerouslySetInnerHTML","__html"],"mappings":"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"}

package/FieldCharacterCountdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FieldCharacterCountdown';
+export { default as useCharacterCountdown } from './useCharacterCountdown';

package/FieldCharacterCountdown/index.mjs

@@ -0,0 +1,233 @@
+import * as React from 'react';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.indexOf(n) >= 0) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var _excluded$1 = ["className", "children"];
+function ErrorMessage(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: ['bds-error', className].filter(function (x) {
+      return x;
+    }).join(' ')
+  }, props), /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
+    "aria-hidden": "true",
+    height: "1em",
+    width: "1em",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z"
+  })), children);
+}
+
+var visuallyHiddenAnnouncementUpdateTimeInSeconds = 1;
+function useCharacterCountdown(maxCharacters) {
+  var currentCharacters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var _React$useState = React.useState(maxCharacters - currentCharacters),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    remainingCharacters = _React$useState2[0],
+    setRemainingCharacters = _React$useState2[1];
+
+  // When JS fails to load, the default label 👇 will still let the user know about the limit.
+  var _React$useState3 = React.useState("You can use up to ".concat(maxCharacters, " characters")),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    label = _React$useState4[0],
+    setLabel = _React$useState4[1];
+  var _React$useState5 = React.useState(label),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    visuallyHiddenAnnouncement = _React$useState6[0],
+    setVisuallyHiddenAnnouncement = _React$useState6[1];
+
+  // This should lag behind the visual update -- otherwise, screen reader users will be interrupted with a lot of chatter while typing
+  var updateVisuallyHiddenAnnouncement = useDebounce(function (charactersToAnnounce) {
+    if (charactersToAnnounce >= 0) {
+      setVisuallyHiddenAnnouncement("You have ".concat(charactersToAnnounce, " characters remaining"));
+    } else {
+      setVisuallyHiddenAnnouncement("You have ".concat(charactersToAnnounce * -1, " characters too many"));
+    }
+  }, visuallyHiddenAnnouncementUpdateTimeInSeconds * 1000);
+  React.useEffect(function () {
+    if (remainingCharacters >= 0) {
+      setLabel("<strong>".concat(remainingCharacters, "</strong> characters remaining"));
+    } else {
+      setLabel("You have <strong>".concat(remainingCharacters * -1, "</strong> characters too many"));
+    }
+    updateVisuallyHiddenAnnouncement(remainingCharacters);
+  }, [remainingCharacters, updateVisuallyHiddenAnnouncement]);
+  return {
+    hasExceededLimit: remainingCharacters < 0,
+    handleTextareaChange: function handleTextareaChange(e) {
+      setRemainingCharacters(maxCharacters - e.target.value.length);
+    },
+    label: label,
+    visuallyHiddenAnnouncement: visuallyHiddenAnnouncement
+  };
+}
+
+/**
+ * Simple debounce implementation. Will call the given
+ * function once after the time given has passed since
+ * it was last called.
+ * Lifted from downshift/utils (not exposed in lib).
+ * @param {Function} fn the function to call after the time
+ * @param {Number} time the time to wait
+ * @return {Function} the debounced function
+ */
+// biome-ignore lint/suspicious/noExplicitAny: We don't know or care what parameters the function accepts
+function debounce(fn, time) {
+  var timeoutId = 0;
+  function cancel() {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+  }
+  function wrapper() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    cancel();
+    timeoutId = setTimeout(function () {
+      timeoutId = null;
+      fn.apply(void 0, args);
+    }, time);
+  }
+  wrapper.cancel = cancel;
+  return wrapper;
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: We don't know or care what parameters the function accepts
+function useDebounce(callback, delay) {
+  return React.useRef(debounce(function () {
+    return callback.apply(void 0, arguments);
+  }, delay)).current;
+}
+
+var _excluded = ["error", "hint", "id", "isOptional", "label", "maxCharacters", "onChange"];
+function FieldCharacterCountdown(_ref) {
+  var _id;
+  var error = _ref.error,
+    hint = _ref.hint,
+    id = _ref.id,
+    _ref$isOptional = _ref.isOptional,
+    isOptional = _ref$isOptional === void 0 ? false : _ref$isOptional,
+    label = _ref.label,
+    maxCharacters = _ref.maxCharacters,
+    _onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var characterCountdown = useCharacterCountdown(maxCharacters, (props.value || '').length);
+  id = (_id = id) !== null && _id !== void 0 ? _id : props.name;
+  var errorId = React.useId();
+  var hintId = React.useId();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "bds-form-group"
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: id
+  }, label, isOptional && ' (optional)'), hint && /*#__PURE__*/React.createElement("span", {
+    className: "bds-hint",
+    id: hintId
+  }, hint), error && /*#__PURE__*/React.createElement(ErrorMessage, {
+    id: errorId
+  }, error), /*#__PURE__*/React.createElement("textarea", _extends({
+    "aria-invalid": error ? true : undefined,
+    "aria-describedby": error && hint ? "".concat(hintId, " ").concat(errorId) : error ? errorId : hint ? hintId : undefined,
+    className: "bds-textarea",
+    id: id,
+    onChange: function onChange(e) {
+      if (_onChange) {
+        _onChange(e);
+      }
+      characterCountdown.handleTextareaChange(e);
+    }
+  }, props)), /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    className: "bds-character-count",
+    "data-exceeds-limit": characterCountdown.hasExceededLimit ? true : undefined
+    // biome-ignore lint/security/noDangerouslySetInnerHtml: HTML is expected and used for highlighting the number itself
+    ,
+    dangerouslySetInnerHTML: {
+      __html: characterCountdown.label
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    "aria-live": "polite",
+    className: "visually-hidden"
+  }, characterCountdown.visuallyHiddenAnnouncement));
+}
+
+export { FieldCharacterCountdown as default, useCharacterCountdown };
+//# sourceMappingURL=index.mjs.map

package/FieldCharacterCountdown/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/ErrorMessage/ErrorMessage.tsx","../../src/FieldCharacterCountdown/useCharacterCountdown.ts","../../src/FieldCharacterCountdown/FieldCharacterCountdown.tsx"],"sourcesContent":["// biome-ignore lint/style/useImportType: following this rule does not work for some reason\nimport * as React from 'react';\n\nexport default function ErrorMessage({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>) {\n  return (\n    <span className={['bds-error', className].filter((x) => x).join(' ')} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 512 512\"\n        aria-hidden=\"true\"\n        height=\"1em\"\n        width=\"1em\"\n        fill=\"currentColor\"\n      >\n        <path d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z\" />\n      </svg>\n      {children}\n    </span>\n  );\n}\n","import * as React from 'react';\n\nconst visuallyHiddenAnnouncementUpdateTimeInSeconds = 1;\n\nexport default function useCharacterCountdown(maxCharacters: number, currentCharacters = 0) {\n  const [remainingCharacters, setRemainingCharacters] = React.useState(maxCharacters - currentCharacters);\n\n  // When JS fails to load, the default label 👇 will still let the user know about the limit.\n  const [label, setLabel] = React.useState(`You can use up to ${maxCharacters} characters`);\n  const [visuallyHiddenAnnouncement, setVisuallyHiddenAnnouncement] = React.useState(label);\n\n  // This should lag behind the visual update -- otherwise, screen reader users will be interrupted with a lot of chatter while typing\n  const updateVisuallyHiddenAnnouncement = useDebounce((charactersToAnnounce: number) => {\n    if (charactersToAnnounce >= 0) {\n      setVisuallyHiddenAnnouncement(`You have ${charactersToAnnounce} characters remaining`);\n    } else {\n      setVisuallyHiddenAnnouncement(`You have ${charactersToAnnounce * -1} characters too many`);\n    }\n  }, visuallyHiddenAnnouncementUpdateTimeInSeconds * 1000);\n\n  React.useEffect(() => {\n    if (remainingCharacters >= 0) {\n      setLabel(`<strong>${remainingCharacters}</strong> characters remaining`);\n    } else {\n      setLabel(`You have <strong>${remainingCharacters * -1}</strong> characters too many`);\n    }\n\n    updateVisuallyHiddenAnnouncement(remainingCharacters);\n  }, [remainingCharacters, updateVisuallyHiddenAnnouncement]);\n\n  return {\n    hasExceededLimit: remainingCharacters < 0,\n    handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      setRemainingCharacters(maxCharacters - e.target.value.length);\n    },\n    label,\n    visuallyHiddenAnnouncement,\n  };\n}\n\n/**\n * Simple debounce implementation. Will call the given\n * function once after the time given has passed since\n * it was last called.\n * Lifted from downshift/utils (not exposed in lib).\n * @param {Function} fn the function to call after the time\n * @param {Number} time the time to wait\n * @return {Function} the debounced function\n */\n// biome-ignore lint/suspicious/noExplicitAny: We don't know or care what parameters the function accepts\nfunction debounce(fn: (...rest: any[]) => any, time: number) {\n  let timeoutId: number | null = 0;\n\n  function cancel() {\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n    }\n  }\n\n  function wrapper(...args) {\n    cancel();\n    timeoutId = setTimeout(() => {\n      timeoutId = null;\n      fn(...args);\n    }, time);\n  }\n\n  wrapper.cancel = cancel;\n\n  return wrapper;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: We don't know or care what parameters the function accepts\nfunction useDebounce<T extends (...rest: any[]) => any>(callback: T, delay: number) {\n  return React.useRef(debounce((...params) => callback(...params), delay)).current;\n}\n","import * as React from 'react';\n\nimport ErrorMessage from '../ErrorMessage';\nimport useCharacterCountdown from './useCharacterCountdown';\n\nexport type FieldCharacterCountdownProps = {\n  error?: string;\n  hint?: string;\n  id?: string;\n  isOptional?: boolean;\n  label: string;\n  maxCharacters: number;\n};\n\nexport default function FieldCharacterCountdown({\n  error,\n  hint,\n  id,\n  isOptional = false,\n  label,\n  maxCharacters,\n  onChange,\n  ...props\n}: FieldCharacterCountdownProps & React.ComponentPropsWithoutRef<'textarea'>) {\n  const characterCountdown = useCharacterCountdown(maxCharacters, ((props.value as string) || '').length);\n\n  id = id ?? props.name;\n\n  const errorId = React.useId();\n  const hintId = React.useId();\n\n  return (\n    <div className=\"bds-form-group\">\n      <label htmlFor={id}>\n        {label}\n        {isOptional && ' (optional)'}\n      </label>\n      {hint && (\n        <span className=\"bds-hint\" id={hintId}>\n          {hint}\n        </span>\n      )}\n      {error && <ErrorMessage id={errorId}>{error}</ErrorMessage>}\n      <textarea\n        aria-invalid={error ? true : undefined}\n        aria-describedby={error && hint ? `${hintId} ${errorId}` : error ? errorId : hint ? hintId : undefined}\n        className=\"bds-textarea\"\n        id={id}\n        onChange={(e) => {\n          if (onChange) {\n            onChange(e);\n          }\n\n          characterCountdown.handleTextareaChange(e);\n        }}\n        {...props}\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"bds-character-count\"\n        data-exceeds-limit={characterCountdown.hasExceededLimit ? true : undefined}\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: HTML is expected and used for highlighting the number itself\n        dangerouslySetInnerHTML={{\n          __html: characterCountdown.label,\n        }}\n      />\n      <div aria-live=\"polite\" className=\"visually-hidden\">\n        {characterCountdown.visuallyHiddenAnnouncement}\n      </div>\n    </div>\n  );\n}\n"],"names":["ErrorMessage","_ref","className","children","props","_objectWithoutProperties","_excluded","React","createElement","_extends","filter","x","join","xmlns","viewBox","height","width","fill","d","visuallyHiddenAnnouncementUpdateTimeInSeconds","useCharacterCountdown","maxCharacters","currentCharacters","arguments","length","undefined","_React$useState","useState","_React$useState2","_slicedToArray","remainingCharacters","setRemainingCharacters","_React$useState3","concat","_React$useState4","label","setLabel","_React$useState5","_React$useState6","visuallyHiddenAnnouncement","setVisuallyHiddenAnnouncement","updateVisuallyHiddenAnnouncement","useDebounce","charactersToAnnounce","useEffect","hasExceededLimit","handleTextareaChange","e","target","value","debounce","fn","time","timeoutId","cancel","clearTimeout","wrapper","_len","args","Array","_key","setTimeout","apply","callback","delay","useRef","current","FieldCharacterCountdown","_id","error","hint","id","_ref$isOptional","isOptional","onChange","characterCountdown","name","errorId","useId","hintId","htmlFor","dangerouslySetInnerHTML","__html"],"mappings":"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"}

package/FieldCharacterCountdown/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@iabbb/bds-react/FieldCharacterCountdown",
+  "private": true,
+  "main": "./index.cjs",
+  "module": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/FieldCharacterCountdown/useCharacterCountdown.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export default function useCharacterCountdown(maxCharacters: number, currentCharacters?: number): {
+    hasExceededLimit: boolean;
+    handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    label: string;
+    visuallyHiddenAnnouncement: string;
+};

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@iabbb/bds-react",
-  "version": "0.48.0",
+  "version": "0.49.1",
   "main": "index.js",
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",
     "dev": "rollup -c -w"
   },
   "devDependencies": {
-    "@babel/core": "7.24.6",
-    "@babel/preset-env": "7.24.6",
-    "@babel/preset-react": "7.24.6",
-    "@babel/preset-typescript": "7.24.6",
+    "@babel/core": "7.24.7",
+    "@babel/preset-env": "7.24.7",
+    "@babel/preset-react": "7.24.7",
+    "@babel/preset-typescript": "7.24.7",
     "@rollup/plugin-babel": "6.0.4",
-    "@rollup/plugin-commonjs": "25.0.8",
+    "@rollup/plugin-commonjs": "26.0.1",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "11.1.6",
@@ -28,7 +28,7 @@
     "typescript": "5.4.5"
   },
   "peerDependencies": {
-    "@iabbb/bds": "0.48.0",
+    "@iabbb/bds": "0.49.1",
     "react": "^18.0.0"
   }
 }