@openedx/paragon 23.12.0 → 23.12.2
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.
- package/dist/DataTable/filters/CheckboxFilter.js +2 -1
- package/dist/DataTable/filters/CheckboxFilter.js.map +1 -1
- package/dist/ProductTour/CheckpointActionRow.js +3 -2
- package/dist/ProductTour/CheckpointActionRow.js.map +1 -1
- package/dist/ProductTour/CheckpointHeader.js +3 -2
- package/dist/ProductTour/CheckpointHeader.js.map +1 -1
- package/package.json +1 -1
- package/src/DataTable/filters/CheckboxFilter.jsx +1 -1
- package/src/DataTable/filters/tests/CheckboxFilter.test.jsx +8 -0
- package/src/ProductTour/CheckpointActionRow.jsx +2 -2
- package/src/ProductTour/CheckpointHeader.jsx +2 -2
|
@@ -33,7 +33,8 @@ function CheckboxFilter(_ref) {
|
|
|
33
33
|
id: ariaLabel.current,
|
|
34
34
|
className: "pgn__checkbox-filter-label"
|
|
35
35
|
}, Header), /*#__PURE__*/React.createElement(Form.CheckboxSet, {
|
|
36
|
-
name: Header
|
|
36
|
+
name: Header,
|
|
37
|
+
value: checkedBoxes
|
|
37
38
|
}, filterChoices.map(_ref2 => {
|
|
38
39
|
let {
|
|
39
40
|
name,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxFilter.js","names":["React","useRef","useMemo","PropTypes","Form","FormLabel","Badge","Stack","newId","CheckboxFilter","_ref","column","filterValue","setFilter","Header","filterChoices","getHeaderProps","ariaLabel","key","checkedBoxes","changeCheckbox","value","includes","newCheckedBoxes","filter","val","push","headerBasedId","createElement","Group","role","current","id","className","CheckboxSet","name","map","_ref2","number","Checkbox","checked","onChange","direction","gap","undefined","variant","propTypes","shape","func","isRequired","oneOfType","elementType","node","arrayOf","string"],"sources":["../../../src/DataTable/filters/CheckboxFilter.jsx"],"sourcesContent":["import React, { useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport Form, { FormLabel } from '../../Form';\nimport Badge from '../../Badge';\nimport Stack from '../../Stack';\nimport { newId } from '../../utils';\n\nfunction CheckboxFilter({\n column: {\n filterValue, setFilter, Header, filterChoices, getHeaderProps,\n },\n}) {\n // creates a unique label that does not change on re-render in case there are multiple checkbox filters in the dom\n const ariaLabel = useRef(newId(`checkbox-filter-label-${getHeaderProps().key}-`));\n\n const checkedBoxes = filterValue || [];\n const changeCheckbox = (value) => {\n if (checkedBoxes.includes(value)) {\n const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);\n return setFilter(newCheckedBoxes);\n }\n checkedBoxes.push(value);\n return setFilter(checkedBoxes);\n };\n const headerBasedId = useMemo(() => `checkbox-filter-check-${getHeaderProps().key}-`, [getHeaderProps]);\n\n return (\n <Form.Group role=\"group\" aria-labelledby={ariaLabel.current}>\n <FormLabel id={ariaLabel.current} className=\"pgn__checkbox-filter-label\">{Header}</FormLabel>\n <Form.CheckboxSet name={Header}>\n {filterChoices.map(({ name, number, value }) => (\n <Form.Checkbox\n key={`${headerBasedId}${name}`}\n value={name}\n checked={checkedBoxes.includes(value)}\n onChange={() => changeCheckbox(value)}\n aria-label={name}\n >\n <Stack direction=\"horizontal\" gap={2}>\n {name} {number !== undefined && <Badge variant=\"light\">{number}</Badge>}\n </Stack>\n </Form.Checkbox>\n ))}\n </Form.CheckboxSet>\n </Form.Group>\n );\n}\n\nCheckboxFilter.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 * `filterChoices`: Specifies array of choices.\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 filterChoices: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n number: PropTypes.number,\n })).isRequired,\n getHeaderProps: PropTypes.func.isRequired,\n filterValue: PropTypes.arrayOf(PropTypes.string),\n }).isRequired,\n};\n\nexport default CheckboxFilter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,OAAO,QAAQ,OAAO;AAC9C,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,IAAIC,SAAS,QAAQ,YAAY;AAC5C,OAAOC,KAAK,MAAM,aAAa;AAC/B,OAAOC,KAAK,MAAM,aAAa;AAC/B,SAASC,KAAK,QAAQ,aAAa;AAEnC,SAASC,cAAcA,CAAAC,IAAA,EAIpB;EAAA,IAJqB;IACtBC,MAAM,EAAE;MACNC,WAAW;MAAEC,SAAS;MAAEC,MAAM;MAAEC,aAAa;MAAEC;IACjD;EACF,CAAC,GAAAN,IAAA;EACC;EACA,MAAMO,SAAS,GAAGhB,MAAM,CAACO,KAAK,CAAC,yBAAyBQ,cAAc,CAAC,CAAC,CAACE,GAAG,GAAG,CAAC,CAAC;EAEjF,MAAMC,YAAY,GAAGP,WAAW,IAAI,EAAE;EACtC,MAAMQ,cAAc,GAAIC,KAAK,IAAK;IAChC,IAAIF,YAAY,CAACG,QAAQ,CAACD,KAAK,CAAC,EAAE;MAChC,MAAME,eAAe,GAAGJ,YAAY,CAACK,MAAM,CAAEC,GAAG,IAAKA,GAAG,KAAKJ,KAAK,CAAC;MACnE,OAAOR,SAAS,CAACU,eAAe,CAAC;IACnC;IACAJ,YAAY,CAACO,IAAI,CAACL,KAAK,CAAC;IACxB,OAAOR,SAAS,CAACM,YAAY,CAAC;EAChC,CAAC;EACD,MAAMQ,aAAa,GAAGzB,OAAO,CAAC,MAAM,yBAAyBc,cAAc,CAAC,CAAC,CAACE,GAAG,GAAG,EAAE,CAACF,cAAc,CAAC,CAAC;EAEvG,oBACEhB,KAAA,CAAA4B,aAAA,CAACxB,IAAI,CAACyB,KAAK;IAACC,IAAI,EAAC,OAAO;IAAC,mBAAiBb,SAAS,CAACc;EAAQ,gBAC1D/B,KAAA,CAAA4B,aAAA,CAACvB,SAAS;IAAC2B,EAAE,EAAEf,SAAS,CAACc,OAAQ;IAACE,SAAS,EAAC;EAA4B,GAAEnB,MAAkB,CAAC,eAC7Fd,KAAA,CAAA4B,aAAA,CAACxB,IAAI,CAAC8B,WAAW;IAACC,IAAI,EAAErB;
|
|
1
|
+
{"version":3,"file":"CheckboxFilter.js","names":["React","useRef","useMemo","PropTypes","Form","FormLabel","Badge","Stack","newId","CheckboxFilter","_ref","column","filterValue","setFilter","Header","filterChoices","getHeaderProps","ariaLabel","key","checkedBoxes","changeCheckbox","value","includes","newCheckedBoxes","filter","val","push","headerBasedId","createElement","Group","role","current","id","className","CheckboxSet","name","map","_ref2","number","Checkbox","checked","onChange","direction","gap","undefined","variant","propTypes","shape","func","isRequired","oneOfType","elementType","node","arrayOf","string"],"sources":["../../../src/DataTable/filters/CheckboxFilter.jsx"],"sourcesContent":["import React, { useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport Form, { FormLabel } from '../../Form';\nimport Badge from '../../Badge';\nimport Stack from '../../Stack';\nimport { newId } from '../../utils';\n\nfunction CheckboxFilter({\n column: {\n filterValue, setFilter, Header, filterChoices, getHeaderProps,\n },\n}) {\n // creates a unique label that does not change on re-render in case there are multiple checkbox filters in the dom\n const ariaLabel = useRef(newId(`checkbox-filter-label-${getHeaderProps().key}-`));\n\n const checkedBoxes = filterValue || [];\n const changeCheckbox = (value) => {\n if (checkedBoxes.includes(value)) {\n const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);\n return setFilter(newCheckedBoxes);\n }\n checkedBoxes.push(value);\n return setFilter(checkedBoxes);\n };\n const headerBasedId = useMemo(() => `checkbox-filter-check-${getHeaderProps().key}-`, [getHeaderProps]);\n\n return (\n <Form.Group role=\"group\" aria-labelledby={ariaLabel.current}>\n <FormLabel id={ariaLabel.current} className=\"pgn__checkbox-filter-label\">{Header}</FormLabel>\n <Form.CheckboxSet name={Header} value={checkedBoxes}>\n {filterChoices.map(({ name, number, value }) => (\n <Form.Checkbox\n key={`${headerBasedId}${name}`}\n value={name}\n checked={checkedBoxes.includes(value)}\n onChange={() => changeCheckbox(value)}\n aria-label={name}\n >\n <Stack direction=\"horizontal\" gap={2}>\n {name} {number !== undefined && <Badge variant=\"light\">{number}</Badge>}\n </Stack>\n </Form.Checkbox>\n ))}\n </Form.CheckboxSet>\n </Form.Group>\n );\n}\n\nCheckboxFilter.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 * `filterChoices`: Specifies array of choices.\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 filterChoices: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n number: PropTypes.number,\n })).isRequired,\n getHeaderProps: PropTypes.func.isRequired,\n filterValue: PropTypes.arrayOf(PropTypes.string),\n }).isRequired,\n};\n\nexport default CheckboxFilter;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import ActionRow from '../ActionRow';
|
|
4
4
|
import Button from '../Button';
|
|
5
|
-
const CheckpointActionRow = /*#__PURE__*/React.forwardRef(_ref => {
|
|
5
|
+
const CheckpointActionRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
6
6
|
let {
|
|
7
7
|
advanceButtonText,
|
|
8
8
|
backButtonText,
|
|
@@ -15,7 +15,8 @@ const CheckpointActionRow = /*#__PURE__*/React.forwardRef(_ref => {
|
|
|
15
15
|
} = _ref;
|
|
16
16
|
const isFirstCheckpoint = index === 0;
|
|
17
17
|
return /*#__PURE__*/React.createElement(ActionRow, {
|
|
18
|
-
className: "pgn__checkpoint-action-row"
|
|
18
|
+
className: "pgn__checkpoint-action-row",
|
|
19
|
+
ref: ref
|
|
19
20
|
}, !isFirstCheckpoint && /*#__PURE__*/React.createElement(Button, {
|
|
20
21
|
className: "pgn__checkpoint-button-back",
|
|
21
22
|
variant: "tertiary",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckpointActionRow.js","names":["React","PropTypes","ActionRow","Button","CheckpointActionRow","forwardRef","_ref","advanceButtonText","backButtonText","endButtonText","isLastCheckpoint","onAdvance","onBack","onEnd","index","isFirstCheckpoint","createElement","className","variant","onClick","autoFocus","defaultProps","propTypes","node","string","bool","func","number"],"sources":["../../src/ProductTour/CheckpointActionRow.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ActionRow from '../ActionRow';\nimport Button from '../Button';\n\nconst CheckpointActionRow = React.forwardRef(({\n advanceButtonText,\n backButtonText,\n endButtonText,\n isLastCheckpoint,\n onAdvance,\n onBack,\n onEnd,\n index,\n}) => {\n const isFirstCheckpoint = index === 0;\n return (\n <ActionRow className=\"pgn__checkpoint-action-row\">\n {!isFirstCheckpoint && (\n <Button\n className=\"pgn__checkpoint-button-back\"\n variant=\"tertiary\"\n onClick={onBack}\n >\n {backButtonText}\n </Button>\n )}\n <Button\n autoFocus\n className=\"pgn__checkpoint-button_advance\"\n onClick={isLastCheckpoint ? () => onEnd(index) : () => onAdvance(index)}\n >\n {isLastCheckpoint ? endButtonText : advanceButtonText}\n </Button>\n </ActionRow>\n );\n});\n\nCheckpointActionRow.defaultProps = {\n advanceButtonText: '',\n backButtonText: '',\n endButtonText: '',\n isLastCheckpoint: false,\n onAdvance: () => { },\n onBack: () => { },\n onEnd: () => { },\n index: 0,\n};\n\nCheckpointActionRow.propTypes = {\n /** The text displayed on the button used to advance the tour. */\n advanceButtonText: PropTypes.node,\n /** The text displayed on the button used to go back on the tour */\n backButtonText: PropTypes.string,\n /** The text displayed on the button used to end the tour. */\n endButtonText: PropTypes.node,\n /** Whether the parent Checkpoint is the last in the tour. */\n isLastCheckpoint: PropTypes.bool,\n /** A function that runs when triggering the `onClick` event of the advance button. */\n onAdvance: PropTypes.func,\n /** A function that runs when triggering the `onClick` event of the back button. */\n onBack: PropTypes.func,\n /** A function that runs when triggering the `onClick` event of the advance button if isLastCheckpoint is true. */\n onEnd: PropTypes.func,\n /** Allows visibility of last index value for onEnd checkpoint compatibility */\n index: PropTypes.number,\n};\n\nexport default CheckpointActionRow;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,MAAM,MAAM,WAAW;AAE9B,MAAMC,mBAAmB,gBAAGJ,KAAK,CAACK,UAAU,
|
|
1
|
+
{"version":3,"file":"CheckpointActionRow.js","names":["React","PropTypes","ActionRow","Button","CheckpointActionRow","forwardRef","_ref","ref","advanceButtonText","backButtonText","endButtonText","isLastCheckpoint","onAdvance","onBack","onEnd","index","isFirstCheckpoint","createElement","className","variant","onClick","autoFocus","defaultProps","propTypes","node","string","bool","func","number"],"sources":["../../src/ProductTour/CheckpointActionRow.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ActionRow from '../ActionRow';\nimport Button from '../Button';\n\nconst CheckpointActionRow = React.forwardRef(({\n advanceButtonText,\n backButtonText,\n endButtonText,\n isLastCheckpoint,\n onAdvance,\n onBack,\n onEnd,\n index,\n}, ref) => {\n const isFirstCheckpoint = index === 0;\n return (\n <ActionRow className=\"pgn__checkpoint-action-row\" ref={ref}>\n {!isFirstCheckpoint && (\n <Button\n className=\"pgn__checkpoint-button-back\"\n variant=\"tertiary\"\n onClick={onBack}\n >\n {backButtonText}\n </Button>\n )}\n <Button\n autoFocus\n className=\"pgn__checkpoint-button_advance\"\n onClick={isLastCheckpoint ? () => onEnd(index) : () => onAdvance(index)}\n >\n {isLastCheckpoint ? endButtonText : advanceButtonText}\n </Button>\n </ActionRow>\n );\n});\n\nCheckpointActionRow.defaultProps = {\n advanceButtonText: '',\n backButtonText: '',\n endButtonText: '',\n isLastCheckpoint: false,\n onAdvance: () => { },\n onBack: () => { },\n onEnd: () => { },\n index: 0,\n};\n\nCheckpointActionRow.propTypes = {\n /** The text displayed on the button used to advance the tour. */\n advanceButtonText: PropTypes.node,\n /** The text displayed on the button used to go back on the tour */\n backButtonText: PropTypes.string,\n /** The text displayed on the button used to end the tour. */\n endButtonText: PropTypes.node,\n /** Whether the parent Checkpoint is the last in the tour. */\n isLastCheckpoint: PropTypes.bool,\n /** A function that runs when triggering the `onClick` event of the advance button. */\n onAdvance: PropTypes.func,\n /** A function that runs when triggering the `onClick` event of the back button. */\n onBack: PropTypes.func,\n /** A function that runs when triggering the `onClick` event of the advance button if isLastCheckpoint is true. */\n onEnd: PropTypes.func,\n /** Allows visibility of last index value for onEnd checkpoint compatibility */\n index: PropTypes.number,\n};\n\nexport default CheckpointActionRow;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,MAAM,MAAM,WAAW;AAE9B,MAAMC,mBAAmB,gBAAGJ,KAAK,CAACK,UAAU,CAAC,CAAAC,IAAA,EAS1CC,GAAG,KAAK;EAAA,IATmC;IAC5CC,iBAAiB;IACjBC,cAAc;IACdC,aAAa;IACbC,gBAAgB;IAChBC,SAAS;IACTC,MAAM;IACNC,KAAK;IACLC;EACF,CAAC,GAAAT,IAAA;EACC,MAAMU,iBAAiB,GAAGD,KAAK,KAAK,CAAC;EACrC,oBACEf,KAAA,CAAAiB,aAAA,CAACf,SAAS;IAACgB,SAAS,EAAC,4BAA4B;IAACX,GAAG,EAAEA;EAAI,GACxD,CAACS,iBAAiB,iBACjBhB,KAAA,CAAAiB,aAAA,CAACd,MAAM;IACLe,SAAS,EAAC,6BAA6B;IACvCC,OAAO,EAAC,UAAU;IAClBC,OAAO,EAAEP;EAAO,GAEfJ,cACK,CACT,eACDT,KAAA,CAAAiB,aAAA,CAACd,MAAM;IACLkB,SAAS;IACTH,SAAS,EAAC,gCAAgC;IAC1CE,OAAO,EAAET,gBAAgB,GAAG,MAAMG,KAAK,CAACC,KAAK,CAAC,GAAG,MAAMH,SAAS,CAACG,KAAK;EAAE,GAEvEJ,gBAAgB,GAAGD,aAAa,GAAGF,iBAC9B,CACC,CAAC;AAEhB,CAAC,CAAC;AAEFJ,mBAAmB,CAACkB,YAAY,GAAG;EACjCd,iBAAiB,EAAE,EAAE;EACrBC,cAAc,EAAE,EAAE;EAClBC,aAAa,EAAE,EAAE;EACjBC,gBAAgB,EAAE,KAAK;EACvBC,SAAS,EAAEA,CAAA,KAAM,CAAE,CAAC;EACpBC,MAAM,EAAEA,CAAA,KAAM,CAAE,CAAC;EACjBC,KAAK,EAAEA,CAAA,KAAM,CAAE,CAAC;EAChBC,KAAK,EAAE;AACT,CAAC;AAEDX,mBAAmB,CAACmB,SAAS,GAAG;EAC9B;EACAf,iBAAiB,EAAEP,SAAS,CAACuB,IAAI;EACjC;EACAf,cAAc,EAAER,SAAS,CAACwB,MAAM;EAChC;EACAf,aAAa,EAAET,SAAS,CAACuB,IAAI;EAC7B;EACAb,gBAAgB,EAAEV,SAAS,CAACyB,IAAI;EAChC;EACAd,SAAS,EAAEX,SAAS,CAAC0B,IAAI;EACzB;EACAd,MAAM,EAAEZ,SAAS,CAAC0B,IAAI;EACtB;EACAb,KAAK,EAAEb,SAAS,CAAC0B,IAAI;EACrB;EACAZ,KAAK,EAAEd,SAAS,CAAC2B;AACnB,CAAC;AAED,eAAexB,mBAAmB","ignoreList":[]}
|
|
@@ -6,7 +6,7 @@ import IconButton from '../IconButton';
|
|
|
6
6
|
import { Close } from '../../icons';
|
|
7
7
|
import CheckpointTitle from './CheckpointTitle';
|
|
8
8
|
import messages from './messages';
|
|
9
|
-
const CheckpointHeader = /*#__PURE__*/React.forwardRef(_ref => {
|
|
9
|
+
const CheckpointHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
10
10
|
let {
|
|
11
11
|
dismissAltText,
|
|
12
12
|
index,
|
|
@@ -18,7 +18,8 @@ const CheckpointHeader = /*#__PURE__*/React.forwardRef(_ref => {
|
|
|
18
18
|
const oneBasedIndex = index + 1;
|
|
19
19
|
const altText = dismissAltText && typeof dismissAltText === 'string' ? dismissAltText : intl.formatMessage(messages.closeAltText);
|
|
20
20
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("header", {
|
|
21
|
-
className: "pgn__checkpoint-header"
|
|
21
|
+
className: "pgn__checkpoint-header",
|
|
22
|
+
ref: ref
|
|
22
23
|
}, /*#__PURE__*/React.createElement("span", {
|
|
23
24
|
className: "pgn__checkpoint-page-index"
|
|
24
25
|
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckpointHeader.js","names":["React","PropTypes","FormattedMessage","useIntl","Icon","IconButton","Close","CheckpointTitle","messages","CheckpointHeader","forwardRef","_ref","dismissAltText","index","onDismiss","title","totalCheckpoints","intl","oneBasedIndex","altText","formatMessage","closeAltText","createElement","Fragment","className","pageIndexText","values","step","totalSteps","size","iconAs","src","alt","onClick","defaultProps","propTypes","string","number","isRequired","func","node"],"sources":["../../src/ProductTour/CheckpointHeader.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { Close } from '../../icons';\nimport CheckpointTitle from './CheckpointTitle';\nimport messages from './messages';\n\nconst CheckpointHeader = React.forwardRef(({\n dismissAltText, index, onDismiss, title, totalCheckpoints,\n}) => {\n const intl = useIntl();\n const oneBasedIndex = index + 1;\n const altText = (dismissAltText && typeof dismissAltText === 'string') ? dismissAltText : intl.formatMessage(messages.closeAltText);\n\n return (\n <>\n <header className=\"pgn__checkpoint-header\">\n <span className=\"pgn__checkpoint-page-index\">\n <FormattedMessage\n {...messages.pageIndexText}\n values={{ step: oneBasedIndex, totalSteps: totalCheckpoints }}\n />\n </span>\n <IconButton\n size=\"sm\"\n iconAs={Icon}\n src={Close}\n alt={altText}\n onClick={onDismiss}\n data-testid=\"dismiss-tour\"\n />\n </header>\n {title && (<CheckpointTitle>{title}</CheckpointTitle>)}\n </>\n );\n});\n\nCheckpointHeader.defaultProps = {\n dismissAltText: null,\n title: '',\n};\n\nCheckpointHeader.propTypes = {\n /** The text used in the alt for the icon used to dismiss the tour for the given Checkpoint */\n dismissAltText: PropTypes.string,\n /** The current index of the given Checkpoint */\n index: PropTypes.number.isRequired,\n /** A function that runs when triggering the `onClick` event of the dismiss\n * button for the given Checkpoint. */\n onDismiss: PropTypes.func.isRequired,\n /** The text displayed in the title of the Checkpoint */\n title: PropTypes.node,\n /** The total number of Checkpoints in a tour */\n totalCheckpoints: PropTypes.number.isRequired,\n};\n\nexport default CheckpointHeader;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,gBAAgB,EAAEC,OAAO,QAAQ,YAAY;AAEtD,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,KAAK,QAAQ,aAAa;AACnC,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,QAAQ,MAAM,YAAY;AAEjC,MAAMC,gBAAgB,gBAAGT,KAAK,CAACU,UAAU,
|
|
1
|
+
{"version":3,"file":"CheckpointHeader.js","names":["React","PropTypes","FormattedMessage","useIntl","Icon","IconButton","Close","CheckpointTitle","messages","CheckpointHeader","forwardRef","_ref","ref","dismissAltText","index","onDismiss","title","totalCheckpoints","intl","oneBasedIndex","altText","formatMessage","closeAltText","createElement","Fragment","className","pageIndexText","values","step","totalSteps","size","iconAs","src","alt","onClick","defaultProps","propTypes","string","number","isRequired","func","node"],"sources":["../../src/ProductTour/CheckpointHeader.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { Close } from '../../icons';\nimport CheckpointTitle from './CheckpointTitle';\nimport messages from './messages';\n\nconst CheckpointHeader = React.forwardRef(({\n dismissAltText, index, onDismiss, title, totalCheckpoints,\n}, ref) => {\n const intl = useIntl();\n const oneBasedIndex = index + 1;\n const altText = (dismissAltText && typeof dismissAltText === 'string') ? dismissAltText : intl.formatMessage(messages.closeAltText);\n\n return (\n <>\n <header className=\"pgn__checkpoint-header\" ref={ref}>\n <span className=\"pgn__checkpoint-page-index\">\n <FormattedMessage\n {...messages.pageIndexText}\n values={{ step: oneBasedIndex, totalSteps: totalCheckpoints }}\n />\n </span>\n <IconButton\n size=\"sm\"\n iconAs={Icon}\n src={Close}\n alt={altText}\n onClick={onDismiss}\n data-testid=\"dismiss-tour\"\n />\n </header>\n {title && (<CheckpointTitle>{title}</CheckpointTitle>)}\n </>\n );\n});\n\nCheckpointHeader.defaultProps = {\n dismissAltText: null,\n title: '',\n};\n\nCheckpointHeader.propTypes = {\n /** The text used in the alt for the icon used to dismiss the tour for the given Checkpoint */\n dismissAltText: PropTypes.string,\n /** The current index of the given Checkpoint */\n index: PropTypes.number.isRequired,\n /** A function that runs when triggering the `onClick` event of the dismiss\n * button for the given Checkpoint. */\n onDismiss: PropTypes.func.isRequired,\n /** The text displayed in the title of the Checkpoint */\n title: PropTypes.node,\n /** The total number of Checkpoints in a tour */\n totalCheckpoints: PropTypes.number.isRequired,\n};\n\nexport default CheckpointHeader;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,gBAAgB,EAAEC,OAAO,QAAQ,YAAY;AAEtD,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,KAAK,QAAQ,aAAa;AACnC,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,QAAQ,MAAM,YAAY;AAEjC,MAAMC,gBAAgB,gBAAGT,KAAK,CAACU,UAAU,CAAC,CAAAC,IAAA,EAEvCC,GAAG,KAAK;EAAA,IAFgC;IACzCC,cAAc;IAAEC,KAAK;IAAEC,SAAS;IAAEC,KAAK;IAAEC;EAC3C,CAAC,GAAAN,IAAA;EACC,MAAMO,IAAI,GAAGf,OAAO,CAAC,CAAC;EACtB,MAAMgB,aAAa,GAAGL,KAAK,GAAG,CAAC;EAC/B,MAAMM,OAAO,GAAIP,cAAc,IAAI,OAAOA,cAAc,KAAK,QAAQ,GAAIA,cAAc,GAAGK,IAAI,CAACG,aAAa,CAACb,QAAQ,CAACc,YAAY,CAAC;EAEnI,oBACEtB,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,qBACExB,KAAA,CAAAuB,aAAA;IAAQE,SAAS,EAAC,wBAAwB;IAACb,GAAG,EAAEA;EAAI,gBAClDZ,KAAA,CAAAuB,aAAA;IAAME,SAAS,EAAC;EAA4B,gBAC1CzB,KAAA,CAAAuB,aAAA,CAACrB,gBAAgB;IAAA,GACXM,QAAQ,CAACkB,aAAa;IAC1BC,MAAM,EAAE;MAAEC,IAAI,EAAET,aAAa;MAAEU,UAAU,EAAEZ;IAAiB;EAAE,CAC/D,CACG,CAAC,eACPjB,KAAA,CAAAuB,aAAA,CAAClB,UAAU;IACTyB,IAAI,EAAC,IAAI;IACTC,MAAM,EAAE3B,IAAK;IACb4B,GAAG,EAAE1B,KAAM;IACX2B,GAAG,EAAEb,OAAQ;IACbc,OAAO,EAAEnB,SAAU;IACnB,eAAY;EAAc,CAC3B,CACK,CAAC,EACRC,KAAK,iBAAKhB,KAAA,CAAAuB,aAAA,CAAChB,eAAe,QAAES,KAAuB,CACpD,CAAC;AAEP,CAAC,CAAC;AAEFP,gBAAgB,CAAC0B,YAAY,GAAG;EAC9BtB,cAAc,EAAE,IAAI;EACpBG,KAAK,EAAE;AACT,CAAC;AAEDP,gBAAgB,CAAC2B,SAAS,GAAG;EAC3B;EACAvB,cAAc,EAAEZ,SAAS,CAACoC,MAAM;EAChC;EACAvB,KAAK,EAAEb,SAAS,CAACqC,MAAM,CAACC,UAAU;EAClC;AACF;EACExB,SAAS,EAAEd,SAAS,CAACuC,IAAI,CAACD,UAAU;EACpC;EACAvB,KAAK,EAAEf,SAAS,CAACwC,IAAI;EACrB;EACAxB,gBAAgB,EAAEhB,SAAS,CAACqC,MAAM,CAACC;AACrC,CAAC;AAED,eAAe9B,gBAAgB","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -27,7 +27,7 @@ function CheckboxFilter({
|
|
|
27
27
|
return (
|
|
28
28
|
<Form.Group role="group" aria-labelledby={ariaLabel.current}>
|
|
29
29
|
<FormLabel id={ariaLabel.current} className="pgn__checkbox-filter-label">{Header}</FormLabel>
|
|
30
|
-
<Form.CheckboxSet name={Header}>
|
|
30
|
+
<Form.CheckboxSet name={Header} value={checkedBoxes}>
|
|
31
31
|
{filterChoices.map(({ name, number, value }) => (
|
|
32
32
|
<Form.Checkbox
|
|
33
33
|
key={`${headerBasedId}${name}`}
|
|
@@ -75,4 +75,12 @@ describe('<CheckboxFilter />', () => {
|
|
|
75
75
|
const badge = screen.queryByText(String(palomino.number));
|
|
76
76
|
expect(badge).toBeNull();
|
|
77
77
|
});
|
|
78
|
+
|
|
79
|
+
it('renders unchecked checkboxes when filterValue is null', () => {
|
|
80
|
+
render(<CheckboxFilter column={{ ...props.column, filterValue: null }} />);
|
|
81
|
+
const checkboxes = screen.getAllByRole('checkbox');
|
|
82
|
+
checkboxes.forEach(checkbox => {
|
|
83
|
+
expect(checkbox).not.toBeChecked();
|
|
84
|
+
});
|
|
85
|
+
});
|
|
78
86
|
});
|
|
@@ -13,10 +13,10 @@ const CheckpointActionRow = React.forwardRef(({
|
|
|
13
13
|
onBack,
|
|
14
14
|
onEnd,
|
|
15
15
|
index,
|
|
16
|
-
}) => {
|
|
16
|
+
}, ref) => {
|
|
17
17
|
const isFirstCheckpoint = index === 0;
|
|
18
18
|
return (
|
|
19
|
-
<ActionRow className="pgn__checkpoint-action-row">
|
|
19
|
+
<ActionRow className="pgn__checkpoint-action-row" ref={ref}>
|
|
20
20
|
{!isFirstCheckpoint && (
|
|
21
21
|
<Button
|
|
22
22
|
className="pgn__checkpoint-button-back"
|
|
@@ -10,14 +10,14 @@ import messages from './messages';
|
|
|
10
10
|
|
|
11
11
|
const CheckpointHeader = React.forwardRef(({
|
|
12
12
|
dismissAltText, index, onDismiss, title, totalCheckpoints,
|
|
13
|
-
}) => {
|
|
13
|
+
}, ref) => {
|
|
14
14
|
const intl = useIntl();
|
|
15
15
|
const oneBasedIndex = index + 1;
|
|
16
16
|
const altText = (dismissAltText && typeof dismissAltText === 'string') ? dismissAltText : intl.formatMessage(messages.closeAltText);
|
|
17
17
|
|
|
18
18
|
return (
|
|
19
19
|
<>
|
|
20
|
-
<header className="pgn__checkpoint-header">
|
|
20
|
+
<header className="pgn__checkpoint-header" ref={ref}>
|
|
21
21
|
<span className="pgn__checkpoint-page-index">
|
|
22
22
|
<FormattedMessage
|
|
23
23
|
{...messages.pageIndexText}
|