@openedx/paragon 21.13.0 → 21.13.1

package/dist/DataTable/filters/TextFilter.js

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import Form, { FormLabel } from '../../Form';
-import Input from '../../Input';
+import Form from '../../Form';
 import { newId } from '../../utils';
 var formatHeaderForLabel = function formatHeaderForLabel(header) {
   if (typeof header === 'function') {
@@ -21,11 +20,11 @@ function TextFilter(_ref) {
   var ariaLabel = useRef(newId("text-filter-label-".concat(getHeaderProps().key, "-")));
   var formattedHeader = formatHeaderForLabel(Header);
   var inputText = /*#__PURE__*/React.isValidElement(formattedHeader) ? formattedHeader : "Search ".concat(formattedHeader);
-  return /*#__PURE__*/React.createElement(Form.Group, null, /*#__PURE__*/React.createElement(FormLabel, {
-    id: ariaLabel.current,
+  return /*#__PURE__*/React.createElement(Form.Group, {
+    controlId: ariaLabel.current
+  }, /*#__PURE__*/React.createElement(Form.Label, {
     className: "sr-only"
-  }, inputText), /*#__PURE__*/React.createElement(Input, {
-    "aria-labelledby": ariaLabel.current,
+  }, inputText), /*#__PURE__*/React.createElement(Form.Control, {
     value: filterValue || '',
     type: "text",
     onChange: function onChange(e) {

package/dist/DataTable/filters/TextFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFilter.js","names":["React","useRef","PropTypes","Form","FormLabel","Input","newId","formatHeaderForLabel","header","toLowerCase","TextFilter","_ref","_ref$column","column","filterValue","setFilter","Header","getHeaderProps","ariaLabel","concat","key","formattedHeader","inputText","isValidElement","createElement","Group","id","current","className","value","type","onChange","e","target","undefined","placeholder","propTypes","shape","func","isRequired","oneOfType","elementType","node","string"],"sources":["../../../src/DataTable/filters/TextFilter.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Form, { FormLabel } from '../../Form';\nimport Input from '../../Input';\nimport { newId } from '../../utils';\n\nconst formatHeaderForLabel = (header) => {\n  if (typeof header === 'function') {\n    return header();\n  }\n  if (typeof header === 'string') {\n    return header.toLowerCase();\n  }\n  return header;\n};\n\nfunction TextFilter({\n  column: {\n    filterValue, setFilter, Header, getHeaderProps,\n  },\n}) {\n  const ariaLabel = useRef(newId(`text-filter-label-${getHeaderProps().key}-`));\n  const formattedHeader = formatHeaderForLabel(Header);\n  const inputText = React.isValidElement(formattedHeader) ? formattedHeader : `Search ${formattedHeader}`;\n  return (\n    <Form.Group>\n      <FormLabel id={ariaLabel.current} className=\"sr-only\">{inputText}</FormLabel>\n      <Input\n        aria-labelledby={ariaLabel.current}\n        value={filterValue || ''}\n        type=\"text\"\n        onChange={e => {\n          setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely\n        }}\n        placeholder={inputText}\n      />\n    </Form.Group>\n  );\n}\n\nTextFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   *\n   * `filterValue`: Value for the filter input.\n   */\n  column: PropTypes.shape({\n    setFilter: PropTypes.func.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n    getHeaderProps: PropTypes.func.isRequired,\n    filterValue: PropTypes.string,\n  }).isRequired,\n};\n\nexport default TextFilter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,IAAIC,SAAS,QAAQ,YAAY;AAC5C,OAAOC,KAAK,MAAM,aAAa;AAC/B,SAASC,KAAK,QAAQ,aAAa;AAEnC,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,MAAM,EAAK;EACvC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;IAChC,OAAOA,MAAM,CAAC,CAAC;EACjB;EACA,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IAC9B,OAAOA,MAAM,CAACC,WAAW,CAAC,CAAC;EAC7B;EACA,OAAOD,MAAM;AACf,CAAC;AAED,SAASE,UAAUA,CAAAC,IAAA,EAIhB;EAAA,IAAAC,WAAA,GAAAD,IAAA,CAHDE,MAAM;IACJC,WAAW,GAAAF,WAAA,CAAXE,WAAW;IAAEC,SAAS,GAAAH,WAAA,CAATG,SAAS;IAAEC,MAAM,GAAAJ,WAAA,CAANI,MAAM;IAAEC,cAAc,GAAAL,WAAA,CAAdK,cAAc;EAGhD,IAAMC,SAAS,GAAGjB,MAAM,CAACK,KAAK,sBAAAa,MAAA,CAAsBF,cAAc,CAAC,CAAC,CAACG,GAAG,MAAG,CAAC,CAAC;EAC7E,IAAMC,eAAe,GAAGd,oBAAoB,CAACS,MAAM,CAAC;EACpD,IAAMM,SAAS,GAAG,aAAAtB,KAAK,CAACuB,cAAc,CAACF,eAAe,CAAC,GAAGA,eAAe,aAAAF,MAAA,CAAaE,eAAe,CAAE;EACvG,oBACErB,KAAA,CAAAwB,aAAA,CAACrB,IAAI,CAACsB,KAAK,qBACTzB,KAAA,CAAAwB,aAAA,CAACpB,SAAS;IAACsB,EAAE,EAAER,SAAS,CAACS,OAAQ;IAACC,SAAS,EAAC;EAAS,GAAEN,SAAqB,CAAC,eAC7EtB,KAAA,CAAAwB,aAAA,CAACnB,KAAK;IACJ,mBAAiBa,SAAS,CAACS,OAAQ;IACnCE,KAAK,EAAEf,WAAW,IAAI,EAAG;IACzBgB,IAAI,EAAC,MAAM;IACXC,QAAQ,EAAE,SAAAA,SAAAC,CAAC,EAAI;MACbjB,SAAS,CAACiB,CAAC,CAACC,MAAM,CAACJ,KAAK,IAAIK,SAAS,CAAC,CAAC,CAAC;IAC1C,CAAE;;IACFC,WAAW,EAAEb;EAAU,CACxB,CACS,CAAC;AAEjB;AAEAZ,UAAU,CAAC0B,SAAS,GAAG;EACrB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEvB,MAAM,EAAEX,SAAS,CAACmC,KAAK,CAAC;IACtBtB,SAAS,EAAEb,SAAS,CAACoC,IAAI,CAACC,UAAU;IACpCvB,MAAM,EAAEd,SAAS,CAACsC,SAAS,CAAC,CAACtC,SAAS,CAACuC,WAAW,EAAEvC,SAAS,CAACwC,IAAI,CAAC,CAAC,CAACH,UAAU;IAC/EtB,cAAc,EAAEf,SAAS,CAACoC,IAAI,CAACC,UAAU;IACzCzB,WAAW,EAAEZ,SAAS,CAACyC;EACzB,CAAC,CAAC,CAACJ;AACL,CAAC;AAED,eAAe7B,UAAU"}
+{"version":3,"file":"TextFilter.js","names":["React","useRef","PropTypes","Form","newId","formatHeaderForLabel","header","toLowerCase","TextFilter","_ref","_ref$column","column","filterValue","setFilter","Header","getHeaderProps","ariaLabel","concat","key","formattedHeader","inputText","isValidElement","createElement","Group","controlId","current","Label","className","Control","value","type","onChange","e","target","undefined","placeholder","propTypes","shape","func","isRequired","oneOfType","elementType","node","string"],"sources":["../../../src/DataTable/filters/TextFilter.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Form from '../../Form';\nimport { newId } from '../../utils';\n\nconst formatHeaderForLabel = (header) => {\n  if (typeof header === 'function') {\n    return header();\n  }\n  if (typeof header === 'string') {\n    return header.toLowerCase();\n  }\n  return header;\n};\n\nfunction TextFilter({\n  column: {\n    filterValue, setFilter, Header, getHeaderProps,\n  },\n}) {\n  const ariaLabel = useRef(newId(`text-filter-label-${getHeaderProps().key}-`));\n  const formattedHeader = formatHeaderForLabel(Header);\n  const inputText = React.isValidElement(formattedHeader) ? formattedHeader : `Search ${formattedHeader}`;\n  return (\n    <Form.Group controlId={ariaLabel.current}>\n      <Form.Label className=\"sr-only\">{inputText}</Form.Label>\n      <Form.Control\n        value={filterValue || ''}\n        type=\"text\"\n        onChange={e => {\n          setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely\n        }}\n        placeholder={inputText}\n      />\n    </Form.Group>\n  );\n}\n\nTextFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   *\n   * `filterValue`: Value for the filter input.\n   */\n  column: PropTypes.shape({\n    setFilter: PropTypes.func.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n    getHeaderProps: PropTypes.func.isRequired,\n    filterValue: PropTypes.string,\n  }).isRequired,\n};\n\nexport default TextFilter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,MAAM,YAAY;AAC7B,SAASC,KAAK,QAAQ,aAAa;AAEnC,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,MAAM,EAAK;EACvC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;IAChC,OAAOA,MAAM,CAAC,CAAC;EACjB;EACA,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IAC9B,OAAOA,MAAM,CAACC,WAAW,CAAC,CAAC;EAC7B;EACA,OAAOD,MAAM;AACf,CAAC;AAED,SAASE,UAAUA,CAAAC,IAAA,EAIhB;EAAA,IAAAC,WAAA,GAAAD,IAAA,CAHDE,MAAM;IACJC,WAAW,GAAAF,WAAA,CAAXE,WAAW;IAAEC,SAAS,GAAAH,WAAA,CAATG,SAAS;IAAEC,MAAM,GAAAJ,WAAA,CAANI,MAAM;IAAEC,cAAc,GAAAL,WAAA,CAAdK,cAAc;EAGhD,IAAMC,SAAS,GAAGf,MAAM,CAACG,KAAK,sBAAAa,MAAA,CAAsBF,cAAc,CAAC,CAAC,CAACG,GAAG,MAAG,CAAC,CAAC;EAC7E,IAAMC,eAAe,GAAGd,oBAAoB,CAACS,MAAM,CAAC;EACpD,IAAMM,SAAS,GAAG,aAAApB,KAAK,CAACqB,cAAc,CAACF,eAAe,CAAC,GAAGA,eAAe,aAAAF,MAAA,CAAaE,eAAe,CAAE;EACvG,oBACEnB,KAAA,CAAAsB,aAAA,CAACnB,IAAI,CAACoB,KAAK;IAACC,SAAS,EAAER,SAAS,CAACS;EAAQ,gBACvCzB,KAAA,CAAAsB,aAAA,CAACnB,IAAI,CAACuB,KAAK;IAACC,SAAS,EAAC;EAAS,GAAEP,SAAsB,CAAC,eACxDpB,KAAA,CAAAsB,aAAA,CAACnB,IAAI,CAACyB,OAAO;IACXC,KAAK,EAAEjB,WAAW,IAAI,EAAG;IACzBkB,IAAI,EAAC,MAAM;IACXC,QAAQ,EAAE,SAAAA,SAAAC,CAAC,EAAI;MACbnB,SAAS,CAACmB,CAAC,CAACC,MAAM,CAACJ,KAAK,IAAIK,SAAS,CAAC,CAAC,CAAC;IAC1C,CAAE;;IACFC,WAAW,EAAEf;EAAU,CACxB,CACS,CAAC;AAEjB;AAEAZ,UAAU,CAAC4B,SAAS,GAAG;EACrB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEzB,MAAM,EAAET,SAAS,CAACmC,KAAK,CAAC;IACtBxB,SAAS,EAAEX,SAAS,CAACoC,IAAI,CAACC,UAAU;IACpCzB,MAAM,EAAEZ,SAAS,CAACsC,SAAS,CAAC,CAACtC,SAAS,CAACuC,WAAW,EAAEvC,SAAS,CAACwC,IAAI,CAAC,CAAC,CAACH,UAAU;IAC/ExB,cAAc,EAAEb,SAAS,CAACoC,IAAI,CAACC,UAAU;IACzC3B,WAAW,EAAEV,SAAS,CAACyC;EACzB,CAAC,CAAC,CAACJ;AACL,CAAC;AAED,eAAe/B,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.13.0",
+  "version": "21.13.1",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/DataTable/filters/TextFilter.jsx

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import Form, { FormLabel } from '../../Form';
-import Input from '../../Input';
+import Form from '../../Form';
 import { newId } from '../../utils';
 
 const formatHeaderForLabel = (header) => {
@@ -23,10 +22,9 @@ function TextFilter({
   const formattedHeader = formatHeaderForLabel(Header);
   const inputText = React.isValidElement(formattedHeader) ? formattedHeader : `Search ${formattedHeader}`;
   return (
-    <Form.Group>
-      <FormLabel id={ariaLabel.current} className="sr-only">{inputText}</FormLabel>
-      <Input
-        aria-labelledby={ariaLabel.current}
+    <Form.Group controlId={ariaLabel.current}>
+      <Form.Label className="sr-only">{inputText}</Form.Label>
+      <Form.Control
         value={filterValue || ''}
         type="text"
         onChange={e => {