@openedx/paragon 21.11.4 → 21.12.1

package/dist/SearchField/SearchFieldAdvanced.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchFieldAdvanced.js","names":["React","useRef","createContext","useState","useEffect","PropTypes","classNames","Search","Close","newId","Icon","SearchFieldContext","BUTTON_LOCATION_VARIANTS","SearchFieldAdvanced","props","children","className","screenReaderText","icons","onSubmit","onClear","onChange","onBlur","onFocus","value","initialValue","formAriaLabel","disabled","submitButtonLocation","rest","_objectWithoutProperties","_excluded","hasFocus","setHasFocus","setValue","isInitialMount","inputId","inputRef","submitButtonRef","current","handleSubmit","event","preventDefault","focus","handleClear","handleFocus","handleBlur","handleChange","target","createElement","_extends","role","onReset","Provider","refs","input","submitButton","propTypes","node","isRequired","func","string","shape","label","oneOfType","element","clearButton","submit","clear","bool","oneOf","defaultProps","undefined","src"],"sources":["../../src/SearchField/SearchFieldAdvanced.jsx"],"sourcesContent":["/* eslint-disable max-len */\nimport React, {\n  useRef, createContext, useState, useEffect,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Search, Close } from '../../icons';\nimport newId from '../utils/newId';\n\nimport Icon from '../Icon';\n\nexport const SearchFieldContext = createContext();\n\nconst BUTTON_LOCATION_VARIANTS = [\n  'internal',\n  'external',\n];\n\nfunction SearchFieldAdvanced(props) {\n  const {\n    children,\n    className,\n    screenReaderText,\n    icons,\n    onSubmit,\n    onClear,\n    onChange,\n    onBlur,\n    onFocus,\n    value: initialValue,\n    formAriaLabel,\n    disabled,\n    submitButtonLocation,\n    ...rest\n  } = props;\n\n  const [hasFocus, setHasFocus] = useState(false);\n  const [value, setValue] = useState(initialValue);\n\n  const isInitialMount = useRef(true);\n  const inputId = useRef(`${newId('pgn-searchfield-input-')}`);\n  const inputRef = useRef();\n  const submitButtonRef = useRef();\n\n  useEffect(() => {\n    setValue(initialValue);\n  }, [initialValue]);\n\n  useEffect(() => {\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n    } else {\n      onChange(value);\n    }\n  }, [value, onChange]);\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    onSubmit(value);\n    if (submitButtonRef && submitButtonRef.current) {\n      submitButtonRef.current.focus();\n    }\n  };\n\n  const handleClear = () => {\n    setValue('');\n    onClear();\n    if (inputRef && inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  const handleFocus = (event) => {\n    setHasFocus(true);\n    onFocus(event);\n  };\n\n  const handleBlur = (event) => {\n    setHasFocus(false);\n    onBlur(event);\n  };\n\n  const handleChange = (event) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <div\n      className={classNames(\n        'pgn__searchfield',\n        'd-flex',\n        {\n          'has-focus': hasFocus,\n          disabled,\n          'pgn__searchfield--external': submitButtonLocation === 'external',\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <form\n        role=\"search\"\n        onSubmit={handleSubmit}\n        onReset={handleClear}\n        className=\"pgn__searchfield-form\"\n        aria-label={formAriaLabel}\n      >\n        <SearchFieldContext.Provider\n          value={{\n            inputId,\n            screenReaderText,\n            icons,\n            value,\n            disabled,\n            handleFocus,\n            handleBlur,\n            handleChange,\n            refs: {\n              input: inputRef,\n              submitButton: submitButtonRef,\n            },\n          }}\n        >\n          {children}\n        </SearchFieldContext.Provider>\n      </form>\n    </div>\n  );\n}\n\nSearchFieldAdvanced.propTypes = {\n  /** specifies the nested child elements. At a minimum, `SearchField.Label` and `SearchField.Input` are required. */\n  children: PropTypes.node.isRequired,\n  /** specifies a callback function for when the `SearchField` is submitted by the user. For example:\n  ```jsx\n  <SearchField onSubmit={(value) => { console.log(value); } />\n  ``` */\n  onSubmit: PropTypes.func.isRequired,\n  /** specifies a custom class name. */\n  className: PropTypes.string,\n  /** specifies a callback function for when the user loses focus in the `SearchField` component. The default is an empty function. For example:\n  ```jsx\n  <SearchField onBlur={event => console.log(event)} />\n  ``` */\n  onBlur: PropTypes.func,\n  /** specifies a callback function for when the value in `SearchField` is changed by the user. The default is an empty function. For example:\n  ```jsx\n  <SearchField onChange={value => console.log(value)} />\n  ``` */\n  onChange: PropTypes.func,\n  /** specifies a callback function for when the value in `SearchField` is cleared by the user. The default is an empty function. For example:\n  ```jsx\n  <SearchField onClear={() => console.log('search cleared')} />\n  ``` */\n  onClear: PropTypes.func,\n  /** specifies a callback function for when the user focuses in the `SearchField` component. The default is an empty function. For example:\n  ```jsx\n  <SearchField onFocus={event => console.log(event)} />\n  ``` */\n  onFocus: PropTypes.func,\n  /** specifies the screenreader text for both the clear and submit buttons (e.g., for i18n translations). The default is `{ label: 'search', clearButton: 'clear search', searchButton: 'submit search' }`. */\n  screenReaderText: PropTypes.shape({\n    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    clearButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  }),\n  /** specifies the initial value for the input. The default is an empty string. */\n  value: PropTypes.string,\n  /** specifies the icon element(s) to use for the clear and submit buttons. */\n  icons: PropTypes.shape({\n    submit: PropTypes.element.isRequired,\n    clear: PropTypes.element,\n  }),\n  /** specifies the aria-label attribute on the form element. This is useful if you use the `SearchField` component more than once on a page. */\n  formAriaLabel: PropTypes.string,\n  /** Specifies whether the `SearchField` is disabled. */\n  disabled: PropTypes.bool,\n  /** Controls whether the search button is internal as an icon or external as a button. */\n  submitButtonLocation: PropTypes.oneOf(BUTTON_LOCATION_VARIANTS),\n};\n\nSearchFieldAdvanced.defaultProps = {\n  className: undefined,\n  formAriaLabel: undefined,\n  value: '',\n  screenReaderText: {\n    label: 'search',\n    submitButton: 'submit search',\n    clearButton: 'clear search',\n  },\n  icons: {\n    clear: <Icon src={Close} />,\n    submit: <Icon src={Search} />,\n  },\n  onBlur: () => {},\n  onChange: () => {},\n  onFocus: () => {},\n  onClear: () => {},\n  disabled: false,\n  submitButtonLocation: 'internal',\n};\n\nexport default SearchFieldAdvanced;\n"],"mappings":"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"}
+{"version":3,"file":"SearchFieldAdvanced.js","names":["React","useRef","createContext","useState","useEffect","PropTypes","classNames","Search","Close","newId","Icon","SearchFieldContext","BUTTON_LOCATION_VARIANTS","SearchFieldAdvanced","props","children","className","screenReaderText","icons","onSubmit","onClear","onChange","onBlur","onFocus","value","initialValue","formAriaLabel","disabled","submitButtonLocation","rest","_objectWithoutProperties","_excluded","hasFocus","setHasFocus","setValue","isInitialMount","inputId","inputRef","submitButtonRef","current","handleSubmit","event","preventDefault","focus","handleClear","handleFocus","handleBlur","handleChange","target","createElement","_extends","role","onReset","Provider","refs","input","submitButton","propTypes","node","isRequired","func","string","shape","label","oneOfType","element","clearButton","submit","clear","bool","oneOf","defaultProps","undefined","src"],"sources":["../../src/SearchField/SearchFieldAdvanced.jsx"],"sourcesContent":["import React, {\n  useRef, createContext, useState, useEffect,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Search, Close } from '../../icons';\nimport newId from '../utils/newId';\n\nimport Icon from '../Icon';\n\nexport const SearchFieldContext = createContext();\n\nconst BUTTON_LOCATION_VARIANTS = [\n  'internal',\n  'external',\n];\n\nfunction SearchFieldAdvanced(props) {\n  const {\n    children,\n    className,\n    screenReaderText,\n    icons,\n    onSubmit,\n    onClear,\n    onChange,\n    onBlur,\n    onFocus,\n    value: initialValue,\n    formAriaLabel,\n    disabled,\n    submitButtonLocation,\n    ...rest\n  } = props;\n\n  const [hasFocus, setHasFocus] = useState(false);\n  const [value, setValue] = useState(initialValue);\n\n  const isInitialMount = useRef(true);\n  const inputId = useRef(`${newId('pgn-searchfield-input-')}`);\n  const inputRef = useRef();\n  const submitButtonRef = useRef();\n\n  useEffect(() => {\n    setValue(initialValue);\n  }, [initialValue]);\n\n  useEffect(() => {\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n    } else {\n      onChange(value);\n    }\n  }, [value, onChange]);\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    onSubmit(value);\n    if (submitButtonRef && submitButtonRef.current) {\n      submitButtonRef.current.focus();\n    }\n  };\n\n  const handleClear = () => {\n    setValue('');\n    onClear();\n    if (inputRef && inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  const handleFocus = (event) => {\n    setHasFocus(true);\n    onFocus(event);\n  };\n\n  const handleBlur = (event) => {\n    setHasFocus(false);\n    onBlur(event);\n  };\n\n  const handleChange = (event) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <div\n      className={classNames(\n        'pgn__searchfield',\n        'd-flex',\n        {\n          'has-focus': hasFocus,\n          disabled,\n          'pgn__searchfield--external': submitButtonLocation === 'external',\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <form\n        role=\"search\"\n        onSubmit={handleSubmit}\n        onReset={handleClear}\n        className=\"pgn__searchfield-form\"\n        aria-label={formAriaLabel}\n      >\n        <SearchFieldContext.Provider\n          value={{\n            inputId,\n            screenReaderText,\n            icons,\n            value,\n            disabled,\n            handleFocus,\n            handleBlur,\n            handleChange,\n            refs: {\n              input: inputRef,\n              submitButton: submitButtonRef,\n            },\n          }}\n        >\n          {children}\n        </SearchFieldContext.Provider>\n      </form>\n    </div>\n  );\n}\n\nSearchFieldAdvanced.propTypes = {\n  /** specifies the nested child elements. At a minimum, `SearchField.Label` and `SearchField.Input` are required. */\n  children: PropTypes.node.isRequired,\n  /** specifies a callback function for when the `SearchField` is submitted by the user. For example:\n  ```jsx\n  <SearchField onSubmit={(value) => { console.log(value); } />\n  ``` */\n  onSubmit: PropTypes.func.isRequired,\n  /** specifies a custom class name. */\n  className: PropTypes.string,\n  /** specifies a callback function for when the user loses focus in the `SearchField` component.\n   * The default is an empty function. For example:\n  ```jsx\n  <SearchField onBlur={event => console.log(event)} />\n  ``` */\n  onBlur: PropTypes.func,\n  /** specifies a callback function for when the value in `SearchField` is changed by the user.\n   * The default is an empty function. For example:\n  ```jsx\n  <SearchField onChange={value => console.log(value)} />\n  ``` */\n  onChange: PropTypes.func,\n  /** specifies a callback function for when the value in `SearchField` is cleared by the user.\n   * The default is an empty function. For example:\n  ```jsx\n  <SearchField onClear={() => console.log('search cleared')} />\n  ``` */\n  onClear: PropTypes.func,\n  /** specifies a callback function for when the user focuses in the `SearchField` component.\n   * The default is an empty function. For example:\n  ```jsx\n  <SearchField onFocus={event => console.log(event)} />\n  ``` */\n  onFocus: PropTypes.func,\n  /** specifies the screenreader text for both the clear and submit buttons (e.g., for i18n translations).\n   * The default is `{ label: 'search', clearButton: 'clear search', searchButton: 'submit search' }`. */\n  screenReaderText: PropTypes.shape({\n    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    clearButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  }),\n  /** specifies the initial value for the input. The default is an empty string. */\n  value: PropTypes.string,\n  /** specifies the icon element(s) to use for the clear and submit buttons. */\n  icons: PropTypes.shape({\n    submit: PropTypes.element.isRequired,\n    clear: PropTypes.element,\n  }),\n  /** specifies the aria-label attribute on the form element. This is useful if you use the `SearchField` component\n   * more than once on a page. */\n  formAriaLabel: PropTypes.string,\n  /** Specifies whether the `SearchField` is disabled. */\n  disabled: PropTypes.bool,\n  /** Controls whether the search button is internal as an icon or external as a button. */\n  submitButtonLocation: PropTypes.oneOf(BUTTON_LOCATION_VARIANTS),\n};\n\nSearchFieldAdvanced.defaultProps = {\n  className: undefined,\n  formAriaLabel: undefined,\n  value: '',\n  screenReaderText: {\n    label: 'search',\n    submitButton: 'submit search',\n    clearButton: 'clear search',\n  },\n  icons: {\n    clear: <Icon src={Close} />,\n    submit: <Icon src={Search} />,\n  },\n  onBlur: () => {},\n  onChange: () => {},\n  onFocus: () => {},\n  onClear: () => {},\n  disabled: false,\n  submitButtonLocation: 'internal',\n};\n\nexport default SearchFieldAdvanced;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IACVC,MAAM,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,SAAS,QACrC,OAAO;AACd,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,EAAEC,KAAK,QAAQ,aAAa;AAC3C,OAAOC,KAAK,MAAM,gBAAgB;AAElC,OAAOC,IAAI,MAAM,SAAS;AAE1B,OAAO,MAAMC,kBAAkB,gBAAGT,aAAa,CAAC,CAAC;AAEjD,MAAMU,wBAAwB,GAAG,CAC/B,UAAU,EACV,UAAU,CACX;AAED,SAASC,mBAAmBA,CAACC,KAAK,EAAE;EAClC,MAAM;MACJC,QAAQ;MACRC,SAAS;MACTC,gBAAgB;MAChBC,KAAK;MACLC,QAAQ;MACRC,OAAO;MACPC,QAAQ;MACRC,MAAM;MACNC,OAAO;MACPC,KAAK,EAAEC,YAAY;MACnBC,aAAa;MACbC,QAAQ;MACRC;IAEF,CAAC,GAAGd,KAAK;IADJe,IAAI,GAAAC,wBAAA,CACLhB,KAAK,EAAAiB,SAAA;EAET,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG9B,QAAQ,CAAC,KAAK,CAAC;EAC/C,MAAM,CAACqB,KAAK,EAAEU,QAAQ,CAAC,GAAG/B,QAAQ,CAACsB,YAAY,CAAC;EAEhD,MAAMU,cAAc,GAAGlC,MAAM,CAAC,IAAI,CAAC;EACnC,MAAMmC,OAAO,GAAGnC,MAAM,CAAE,GAAEQ,KAAK,CAAC,wBAAwB,CAAE,EAAC,CAAC;EAC5D,MAAM4B,QAAQ,GAAGpC,MAAM,CAAC,CAAC;EACzB,MAAMqC,eAAe,GAAGrC,MAAM,CAAC,CAAC;EAEhCG,SAAS,CAAC,MAAM;IACd8B,QAAQ,CAACT,YAAY,CAAC;EACxB,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElBrB,SAAS,CAAC,MAAM;IACd,IAAI+B,cAAc,CAACI,OAAO,EAAE;MAC1BJ,cAAc,CAACI,OAAO,GAAG,KAAK;IAChC,CAAC,MAAM;MACLlB,QAAQ,CAACG,KAAK,CAAC;IACjB;EACF,CAAC,EAAE,CAACA,KAAK,EAAEH,QAAQ,CAAC,CAAC;EAErB,MAAMmB,YAAY,GAAIC,KAAK,IAAK;IAC9BA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBvB,QAAQ,CAACK,KAAK,CAAC;IACf,IAAIc,eAAe,IAAIA,eAAe,CAACC,OAAO,EAAE;MAC9CD,eAAe,CAACC,OAAO,CAACI,KAAK,CAAC,CAAC;IACjC;EACF,CAAC;EAED,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACxBV,QAAQ,CAAC,EAAE,CAAC;IACZd,OAAO,CAAC,CAAC;IACT,IAAIiB,QAAQ,IAAIA,QAAQ,CAACE,OAAO,EAAE;MAChCF,QAAQ,CAACE,OAAO,CAACI,KAAK,CAAC,CAAC;IAC1B;EACF,CAAC;EAED,MAAME,WAAW,GAAIJ,KAAK,IAAK;IAC7BR,WAAW,CAAC,IAAI,CAAC;IACjBV,OAAO,CAACkB,KAAK,CAAC;EAChB,CAAC;EAED,MAAMK,UAAU,GAAIL,KAAK,IAAK;IAC5BR,WAAW,CAAC,KAAK,CAAC;IAClBX,MAAM,CAACmB,KAAK,CAAC;EACf,CAAC;EAED,MAAMM,YAAY,GAAIN,KAAK,IAAK;IAC9BP,QAAQ,CAACO,KAAK,CAACO,MAAM,CAACxB,KAAK,CAAC;EAC9B,CAAC;EAED,oBACExB,KAAA,CAAAiD,aAAA,QAAAC,QAAA;IACElC,SAAS,EAAEV,UAAU,CACnB,kBAAkB,EAClB,QAAQ,EACR;MACE,WAAW,EAAE0B,QAAQ;MACrBL,QAAQ;MACR,4BAA4B,EAAEC,oBAAoB,KAAK;IACzD,CAAC,EACDZ,SACF;EAAE,GACEa,IAAI,gBAER7B,KAAA,CAAAiD,aAAA;IACEE,IAAI,EAAC,QAAQ;IACbhC,QAAQ,EAAEqB,YAAa;IACvBY,OAAO,EAAER,WAAY;IACrB5B,SAAS,EAAC,uBAAuB;IACjC,cAAYU;EAAc,gBAE1B1B,KAAA,CAAAiD,aAAA,CAACtC,kBAAkB,CAAC0C,QAAQ;IAC1B7B,KAAK,EAAE;MACLY,OAAO;MACPnB,gBAAgB;MAChBC,KAAK;MACLM,KAAK;MACLG,QAAQ;MACRkB,WAAW;MACXC,UAAU;MACVC,YAAY;MACZO,IAAI,EAAE;QACJC,KAAK,EAAElB,QAAQ;QACfmB,YAAY,EAAElB;MAChB;IACF;EAAE,GAEDvB,QAC0B,CACzB,CACH,CAAC;AAEV;AAEAF,mBAAmB,CAAC4C,SAAS,GAAG;EAC9B;EACA1C,QAAQ,EAAEV,SAAS,CAACqD,IAAI,CAACC,UAAU;EACnC;AACF;AACA;AACA;EACExC,QAAQ,EAAEd,SAAS,CAACuD,IAAI,CAACD,UAAU;EACnC;EACA3C,SAAS,EAAEX,SAAS,CAACwD,MAAM;EAC3B;AACF;AACA;AACA;AACA;EACEvC,MAAM,EAAEjB,SAAS,CAACuD,IAAI;EACtB;AACF;AACA;AACA;AACA;EACEvC,QAAQ,EAAEhB,SAAS,CAACuD,IAAI;EACxB;AACF;AACA;AACA;AACA;EACExC,OAAO,EAAEf,SAAS,CAACuD,IAAI;EACvB;AACF;AACA;AACA;AACA;EACErC,OAAO,EAAElB,SAAS,CAACuD,IAAI;EACvB;AACF;EACE3C,gBAAgB,EAAEZ,SAAS,CAACyD,KAAK,CAAC;IAChCC,KAAK,EAAE1D,SAAS,CAAC2D,SAAS,CAAC,CAAC3D,SAAS,CAACwD,MAAM,EAAExD,SAAS,CAAC4D,OAAO,CAAC,CAAC,CAACN,UAAU;IAC5EH,YAAY,EAAEnD,SAAS,CAAC2D,SAAS,CAAC,CAAC3D,SAAS,CAACwD,MAAM,EAAExD,SAAS,CAAC4D,OAAO,CAAC,CAAC,CAACN,UAAU;IACnFO,WAAW,EAAE7D,SAAS,CAAC2D,SAAS,CAAC,CAAC3D,SAAS,CAACwD,MAAM,EAAExD,SAAS,CAAC4D,OAAO,CAAC;EACxE,CAAC,CAAC;EACF;EACAzC,KAAK,EAAEnB,SAAS,CAACwD,MAAM;EACvB;EACA3C,KAAK,EAAEb,SAAS,CAACyD,KAAK,CAAC;IACrBK,MAAM,EAAE9D,SAAS,CAAC4D,OAAO,CAACN,UAAU;IACpCS,KAAK,EAAE/D,SAAS,CAAC4D;EACnB,CAAC,CAAC;EACF;AACF;EACEvC,aAAa,EAAErB,SAAS,CAACwD,MAAM;EAC/B;EACAlC,QAAQ,EAAEtB,SAAS,CAACgE,IAAI;EACxB;EACAzC,oBAAoB,EAAEvB,SAAS,CAACiE,KAAK,CAAC1D,wBAAwB;AAChE,CAAC;AAEDC,mBAAmB,CAAC0D,YAAY,GAAG;EACjCvD,SAAS,EAAEwD,SAAS;EACpB9C,aAAa,EAAE8C,SAAS;EACxBhD,KAAK,EAAE,EAAE;EACTP,gBAAgB,EAAE;IAChB8C,KAAK,EAAE,QAAQ;IACfP,YAAY,EAAE,eAAe;IAC7BU,WAAW,EAAE;EACf,CAAC;EACDhD,KAAK,EAAE;IACLkD,KAAK,eAAEpE,KAAA,CAAAiD,aAAA,CAACvC,IAAI;MAAC+D,GAAG,EAAEjE;IAAM,CAAE,CAAC;IAC3B2D,MAAM,eAAEnE,KAAA,CAAAiD,aAAA,CAACvC,IAAI;MAAC+D,GAAG,EAAElE;IAAO,CAAE;EAC9B,CAAC;EACDe,MAAM,EAAEA,CAAA,KAAM,CAAC,CAAC;EAChBD,QAAQ,EAAEA,CAAA,KAAM,CAAC,CAAC;EAClBE,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAC;EACjBH,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAC;EACjBO,QAAQ,EAAE,KAAK;EACfC,oBAAoB,EAAE;AACxB,CAAC;AAED,eAAef,mBAAmB"}

package/dist/SearchField/SearchFieldLabel.js

@@ -2,7 +2,6 @@ const _excluded = ["children"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-/* eslint-disable max-len */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -27,8 +26,9 @@ function SearchFieldLabel(_ref) {
 }
 SearchFieldLabel.propTypes = {
   /**
-   * specifies the label to use for the input field (e.g., for i18n translations). Note: if `children` is not provided,
-   * a screenreader-only label will be used in its placed based on the `screenReaderText.label` prop for `SearchField.Advanced`.
+   * specifies the label to use for the input field (e.g., for i18n translations).
+   * Note: if `children` is not provided, a screenreader-only label will be used in
+   * its placed based on the `screenReaderText.label` prop for `SearchField.Advanced`.
    */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
 };

package/dist/SearchField/SearchFieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchFieldLabel.js","names":["React","useContext","PropTypes","classNames","SearchFieldContext","SearchFieldLabel","_ref","children","props","_objectWithoutProperties","_excluded","screenReaderText","inputId","createElement","_extends","htmlFor","current","className","label","propTypes","oneOfType","string","element","defaultProps","undefined"],"sources":["../../src/SearchField/SearchFieldLabel.jsx"],"sourcesContent":["/* eslint-disable max-len */\nimport React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { SearchFieldContext } from './SearchFieldAdvanced';\n\nfunction SearchFieldLabel({ children, ...props }) {\n  const { screenReaderText, inputId } = useContext(SearchFieldContext);\n\n  return (\n    <label\n      htmlFor={inputId.current}\n      className={classNames('m-0', { 'has-label-text': !!children })}\n      {...props}\n    >\n      {children || <span className=\"sr-only\">{screenReaderText.label}</span>}\n    </label>\n  );\n}\n\nSearchFieldLabel.propTypes = {\n  /**\n   * specifies the label to use for the input field (e.g., for i18n translations). Note: if `children` is not provided,\n   * a screenreader-only label will be used in its placed based on the `screenReaderText.label` prop for `SearchField.Advanced`.\n   */\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nSearchFieldLabel.defaultProps = {\n  children: undefined,\n};\n\nexport default SearchFieldLabel;\n"],"mappings":";;;;AAAA;AACA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,gBAAgBA,CAAAC,IAAA,EAAyB;EAAA,IAAxB;MAAEC;IAAmB,CAAC,GAAAD,IAAA;IAAPE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAC5C,MAAM;IAAEC,gBAAgB;IAAEC;EAAQ,CAAC,GAAGX,UAAU,CAACG,kBAAkB,CAAC;EAEpE,oBACEJ,KAAA,CAAAa,aAAA,UAAAC,QAAA;IACEC,OAAO,EAAEH,OAAO,CAACI,OAAQ;IACzBC,SAAS,EAAEd,UAAU,CAAC,KAAK,EAAE;MAAE,gBAAgB,EAAE,CAAC,CAACI;IAAS,CAAC;EAAE,GAC3DC,KAAK,GAERD,QAAQ,iBAAIP,KAAA,CAAAa,aAAA;IAAMI,SAAS,EAAC;EAAS,GAAEN,gBAAgB,CAACO,KAAY,CAChE,CAAC;AAEZ;AAEAb,gBAAgB,CAACc,SAAS,GAAG;EAC3B;AACF;AACA;AACA;EACEZ,QAAQ,EAAEL,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACmB,MAAM,EAAEnB,SAAS,CAACoB,OAAO,CAAC;AACrE,CAAC;AAEDjB,gBAAgB,CAACkB,YAAY,GAAG;EAC9BhB,QAAQ,EAAEiB;AACZ,CAAC;AAED,eAAenB,gBAAgB"}
+{"version":3,"file":"SearchFieldLabel.js","names":["React","useContext","PropTypes","classNames","SearchFieldContext","SearchFieldLabel","_ref","children","props","_objectWithoutProperties","_excluded","screenReaderText","inputId","createElement","_extends","htmlFor","current","className","label","propTypes","oneOfType","string","element","defaultProps","undefined"],"sources":["../../src/SearchField/SearchFieldLabel.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { SearchFieldContext } from './SearchFieldAdvanced';\n\nfunction SearchFieldLabel({ children, ...props }) {\n  const { screenReaderText, inputId } = useContext(SearchFieldContext);\n\n  return (\n    <label\n      htmlFor={inputId.current}\n      className={classNames('m-0', { 'has-label-text': !!children })}\n      {...props}\n    >\n      {children || <span className=\"sr-only\">{screenReaderText.label}</span>}\n    </label>\n  );\n}\n\nSearchFieldLabel.propTypes = {\n  /**\n   * specifies the label to use for the input field (e.g., for i18n translations).\n   * Note: if `children` is not provided, a screenreader-only label will be used in\n   * its placed based on the `screenReaderText.label` prop for `SearchField.Advanced`.\n   */\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nSearchFieldLabel.defaultProps = {\n  children: undefined,\n};\n\nexport default SearchFieldLabel;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,gBAAgBA,CAAAC,IAAA,EAAyB;EAAA,IAAxB;MAAEC;IAAmB,CAAC,GAAAD,IAAA;IAAPE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAC5C,MAAM;IAAEC,gBAAgB;IAAEC;EAAQ,CAAC,GAAGX,UAAU,CAACG,kBAAkB,CAAC;EAEpE,oBACEJ,KAAA,CAAAa,aAAA,UAAAC,QAAA;IACEC,OAAO,EAAEH,OAAO,CAACI,OAAQ;IACzBC,SAAS,EAAEd,UAAU,CAAC,KAAK,EAAE;MAAE,gBAAgB,EAAE,CAAC,CAACI;IAAS,CAAC;EAAE,GAC3DC,KAAK,GAERD,QAAQ,iBAAIP,KAAA,CAAAa,aAAA;IAAMI,SAAS,EAAC;EAAS,GAAEN,gBAAgB,CAACO,KAAY,CAChE,CAAC;AAEZ;AAEAb,gBAAgB,CAACc,SAAS,GAAG;EAC3B;AACF;AACA;AACA;AACA;EACEZ,QAAQ,EAAEL,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACmB,MAAM,EAAEnB,SAAS,CAACoB,OAAO,CAAC;AACrE,CAAC;AAEDjB,gBAAgB,CAACkB,YAAY,GAAG;EAC9BhB,QAAQ,EAAEiB;AACZ,CAAC;AAED,eAAenB,gBAAgB"}

package/dist/SearchField/index.js

@@ -2,7 +2,6 @@ const _excluded = ["label", "placeholder", "inputProps", "variant", "submitButto
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-/* eslint-disable max-len */
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Search, Close } from '../../icons';

package/dist/SearchField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","Search","Close","SearchFieldAdvanced","SearchFieldContext","SearchFieldLabel","SearchFieldInput","SearchFieldClearButton","SearchFieldSubmitButton","Icon","SEARCH_FIELD_SCREEN_READER_TEXT_LABEL","SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON","SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON","SEARCH_FIELD_BUTTON_TEXT","STYLE_VARIANTS","BUTTON_LOCATION_VARIANTS","SearchField","props","label","placeholder","inputProps","variant","submitButtonLocation","buttonText","others","_objectWithoutProperties","_excluded","Wrapper","wrapperProps","createElement","className","children","Advanced","_extends","Label","Input","ClearButton","SubmitButton","propTypes","onSubmit","func","isRequired","oneOfType","string","element","onBlur","onChange","onClear","onFocus","screenReaderText","shape","submitButton","clearButton","value","icons","submit","clear","formAriaLabel","oneOf","disabled","bool","defaultProps","undefined","src","Context"],"sources":["../../src/SearchField/index.jsx"],"sourcesContent":["/* eslint-disable max-len */\nimport React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Search, Close } from '../../icons';\nimport SearchFieldAdvanced, { SearchFieldContext } from './SearchFieldAdvanced';\nimport SearchFieldLabel from './SearchFieldLabel';\nimport SearchFieldInput from './SearchFieldInput';\nimport SearchFieldClearButton from './SearchFieldClearButton';\nimport SearchFieldSubmitButton from './SearchFieldSubmitButton';\n\nimport Icon from '../Icon';\n\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_LABEL = 'search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON = 'submit search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON = 'clear search';\nexport const SEARCH_FIELD_BUTTON_TEXT = 'search';\n\nconst STYLE_VARIANTS = [\n  'light',\n  'dark',\n];\n\nconst BUTTON_LOCATION_VARIANTS = [\n  'internal',\n  'external',\n];\n\nfunction SearchField(props) {\n  const {\n    label,\n    placeholder,\n    inputProps,\n    variant,\n    submitButtonLocation,\n    buttonText,\n    ...others\n  } = props;\n\n  const Wrapper = useCallback(\n    (wrapperProps) => (submitButtonLocation === 'external'\n      ? <div className=\"pgn__searchfield_wrapper\">{wrapperProps.children}</div>\n      : wrapperProps.children),\n    [submitButtonLocation],\n  );\n\n  return (\n    <SearchField.Advanced {...others} submitButtonLocation={submitButtonLocation}>\n      <Wrapper>\n        <SearchField.Label>{label}</SearchField.Label>\n        <SearchField.Input placeholder={placeholder} {...inputProps} />\n        <SearchField.ClearButton />\n      </Wrapper>\n      <SearchField.SubmitButton\n        variant={variant}\n        submitButtonLocation={submitButtonLocation}\n        buttonText={buttonText}\n      />\n    </SearchField.Advanced>\n  );\n}\n\nSearchField.propTypes = {\n  /**\n   * Specifies a callback function for when the `SearchField` is submitted by the user. For example:\n   *\n   *```jsx\n   * <SearchField onSubmit={(value) => { console.log(value); } />\n   * ```\n   */\n  onSubmit: PropTypes.func.isRequired,\n  /** Specifies the label to use for the input field (e.g., for i18n translations). */\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  /** Specifies a custom class name. */\n  className: PropTypes.string,\n  /**\n   * Specifies a callback function for when the user loses focus in the\n   * `SearchField` component. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onBlur={event => console.log(event)} />\n   * ```\n   */\n  onBlur: PropTypes.func,\n  /**\n   * Specifies a callback function for when the value in `SearchField`\n   * is changed by the user. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onChange={value => console.log(value)} />\n   * ```\n   */\n  onChange: PropTypes.func,\n  /**\n   * Specifies a callback function for when the value in `SearchField`\n   * is cleared by the user. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onClear={() => console.log('search cleared')} />\n   * ```\n   */\n  onClear: PropTypes.func,\n  /**\n   * Specifies a callback function for when the user focuses in the `SearchField`\n   * component. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onFocus={event => console.log(event)} />\n   * ```\n   */\n  onFocus: PropTypes.func,\n  /** Specifies the placeholder text for the input. */\n  placeholder: PropTypes.string,\n  /**\n   * Specifies the screenreader text for both the clear and submit buttons\n   * (e.g., for i18n translations). The default is `{ label: 'search',\n   * clearButton: 'clear search', searchButton: 'submit search' }`.\n   */\n  screenReaderText: PropTypes.shape({\n    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    clearButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  }),\n  /** Specifies the initial value for the input. The default is an empty string. */\n  value: PropTypes.string,\n  /**\n   * Specifies the icon element(s) to use for the clear and submit buttons.\n   * The default is:\n   *\n   * ```jsx\n   * {\n   *   submit: import {Search} from '@edx/paragon/icons';,\n   *   clear: import {Close} from '@edx/paragon/icons'.\n   * }\n   * ```\n   */\n  icons: PropTypes.shape({\n    submit: PropTypes.element.isRequired,\n    clear: PropTypes.element,\n  }),\n  /**\n   * Specifies the aria-label attribute on the form element.\n   * This is useful if you use the `SearchField` component more than once on a page.\n   */\n  formAriaLabel: PropTypes.string,\n  /** Props to be passed to the form input */\n  inputProps: PropTypes.shape({}),\n  /** The button style variant to use. */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Specifies whether the `SearchField` is disabled. */\n  disabled: PropTypes.bool,\n  /** Controls whether the search button is internal as an icon or external as a button. */\n  submitButtonLocation: PropTypes.oneOf(BUTTON_LOCATION_VARIANTS),\n  /**\n   * Specifies a text that is displayed on the button.\n   * The `submitButtonLocation` prop should be set to `external`.\n   */\n  buttonText: PropTypes.string,\n};\n\nSearchField.defaultProps = {\n  label: undefined,\n  placeholder: undefined,\n  className: undefined,\n  formAriaLabel: undefined,\n  value: '',\n  screenReaderText: {\n    label: SEARCH_FIELD_SCREEN_READER_TEXT_LABEL,\n    submitButton: SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON,\n    clearButton: SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON,\n  },\n  icons: {\n    clear: <Icon src={Close} />,\n    submit: <Icon src={Search} />,\n  },\n  onBlur: () => {},\n  onChange: () => {},\n  onFocus: () => {},\n  onClear: () => {},\n  inputProps: {},\n  variant: 'light',\n  disabled: false,\n  submitButtonLocation: 'internal',\n  buttonText: SEARCH_FIELD_BUTTON_TEXT,\n};\n\nSearchField.Advanced = SearchFieldAdvanced;\nSearchField.Label = SearchFieldLabel;\nSearchField.Input = SearchFieldInput;\nSearchField.ClearButton = SearchFieldClearButton;\nSearchField.SubmitButton = SearchFieldSubmitButton;\nSearchField.Context = SearchFieldContext;\n\nexport default SearchField;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","Search","Close","SearchFieldAdvanced","SearchFieldContext","SearchFieldLabel","SearchFieldInput","SearchFieldClearButton","SearchFieldSubmitButton","Icon","SEARCH_FIELD_SCREEN_READER_TEXT_LABEL","SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON","SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON","SEARCH_FIELD_BUTTON_TEXT","STYLE_VARIANTS","BUTTON_LOCATION_VARIANTS","SearchField","props","label","placeholder","inputProps","variant","submitButtonLocation","buttonText","others","_objectWithoutProperties","_excluded","Wrapper","wrapperProps","createElement","className","children","Advanced","_extends","Label","Input","ClearButton","SubmitButton","propTypes","onSubmit","func","isRequired","oneOfType","string","element","onBlur","onChange","onClear","onFocus","screenReaderText","shape","submitButton","clearButton","value","icons","submit","clear","formAriaLabel","oneOf","disabled","bool","defaultProps","undefined","src","Context"],"sources":["../../src/SearchField/index.jsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Search, Close } from '../../icons';\nimport SearchFieldAdvanced, { SearchFieldContext } from './SearchFieldAdvanced';\nimport SearchFieldLabel from './SearchFieldLabel';\nimport SearchFieldInput from './SearchFieldInput';\nimport SearchFieldClearButton from './SearchFieldClearButton';\nimport SearchFieldSubmitButton from './SearchFieldSubmitButton';\n\nimport Icon from '../Icon';\n\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_LABEL = 'search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON = 'submit search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON = 'clear search';\nexport const SEARCH_FIELD_BUTTON_TEXT = 'search';\n\nconst STYLE_VARIANTS = [\n  'light',\n  'dark',\n];\n\nconst BUTTON_LOCATION_VARIANTS = [\n  'internal',\n  'external',\n];\n\nfunction SearchField(props) {\n  const {\n    label,\n    placeholder,\n    inputProps,\n    variant,\n    submitButtonLocation,\n    buttonText,\n    ...others\n  } = props;\n\n  const Wrapper = useCallback(\n    (wrapperProps) => (submitButtonLocation === 'external'\n      ? <div className=\"pgn__searchfield_wrapper\">{wrapperProps.children}</div>\n      : wrapperProps.children),\n    [submitButtonLocation],\n  );\n\n  return (\n    <SearchField.Advanced {...others} submitButtonLocation={submitButtonLocation}>\n      <Wrapper>\n        <SearchField.Label>{label}</SearchField.Label>\n        <SearchField.Input placeholder={placeholder} {...inputProps} />\n        <SearchField.ClearButton />\n      </Wrapper>\n      <SearchField.SubmitButton\n        variant={variant}\n        submitButtonLocation={submitButtonLocation}\n        buttonText={buttonText}\n      />\n    </SearchField.Advanced>\n  );\n}\n\nSearchField.propTypes = {\n  /**\n   * Specifies a callback function for when the `SearchField` is submitted by the user. For example:\n   *\n   *```jsx\n   * <SearchField onSubmit={(value) => { console.log(value); } />\n   * ```\n   */\n  onSubmit: PropTypes.func.isRequired,\n  /** Specifies the label to use for the input field (e.g., for i18n translations). */\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  /** Specifies a custom class name. */\n  className: PropTypes.string,\n  /**\n   * Specifies a callback function for when the user loses focus in the\n   * `SearchField` component. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onBlur={event => console.log(event)} />\n   * ```\n   */\n  onBlur: PropTypes.func,\n  /**\n   * Specifies a callback function for when the value in `SearchField`\n   * is changed by the user. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onChange={value => console.log(value)} />\n   * ```\n   */\n  onChange: PropTypes.func,\n  /**\n   * Specifies a callback function for when the value in `SearchField`\n   * is cleared by the user. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onClear={() => console.log('search cleared')} />\n   * ```\n   */\n  onClear: PropTypes.func,\n  /**\n   * Specifies a callback function for when the user focuses in the `SearchField`\n   * component. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onFocus={event => console.log(event)} />\n   * ```\n   */\n  onFocus: PropTypes.func,\n  /** Specifies the placeholder text for the input. */\n  placeholder: PropTypes.string,\n  /**\n   * Specifies the screenreader text for both the clear and submit buttons\n   * (e.g., for i18n translations). The default is `{ label: 'search',\n   * clearButton: 'clear search', searchButton: 'submit search' }`.\n   */\n  screenReaderText: PropTypes.shape({\n    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    clearButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  }),\n  /** Specifies the initial value for the input. The default is an empty string. */\n  value: PropTypes.string,\n  /**\n   * Specifies the icon element(s) to use for the clear and submit buttons.\n   * The default is:\n   *\n   * ```jsx\n   * {\n   *   submit: import {Search} from '@edx/paragon/icons';,\n   *   clear: import {Close} from '@edx/paragon/icons'.\n   * }\n   * ```\n   */\n  icons: PropTypes.shape({\n    submit: PropTypes.element.isRequired,\n    clear: PropTypes.element,\n  }),\n  /**\n   * Specifies the aria-label attribute on the form element.\n   * This is useful if you use the `SearchField` component more than once on a page.\n   */\n  formAriaLabel: PropTypes.string,\n  /** Props to be passed to the form input */\n  inputProps: PropTypes.shape({}),\n  /** The button style variant to use. */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Specifies whether the `SearchField` is disabled. */\n  disabled: PropTypes.bool,\n  /** Controls whether the search button is internal as an icon or external as a button. */\n  submitButtonLocation: PropTypes.oneOf(BUTTON_LOCATION_VARIANTS),\n  /**\n   * Specifies a text that is displayed on the button.\n   * The `submitButtonLocation` prop should be set to `external`.\n   */\n  buttonText: PropTypes.string,\n};\n\nSearchField.defaultProps = {\n  label: undefined,\n  placeholder: undefined,\n  className: undefined,\n  formAriaLabel: undefined,\n  value: '',\n  screenReaderText: {\n    label: SEARCH_FIELD_SCREEN_READER_TEXT_LABEL,\n    submitButton: SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON,\n    clearButton: SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON,\n  },\n  icons: {\n    clear: <Icon src={Close} />,\n    submit: <Icon src={Search} />,\n  },\n  onBlur: () => {},\n  onChange: () => {},\n  onFocus: () => {},\n  onClear: () => {},\n  inputProps: {},\n  variant: 'light',\n  disabled: false,\n  submitButtonLocation: 'internal',\n  buttonText: SEARCH_FIELD_BUTTON_TEXT,\n};\n\nSearchField.Advanced = SearchFieldAdvanced;\nSearchField.Label = SearchFieldLabel;\nSearchField.Input = SearchFieldInput;\nSearchField.ClearButton = SearchFieldClearButton;\nSearchField.SubmitButton = SearchFieldSubmitButton;\nSearchField.Context = SearchFieldContext;\n\nexport default SearchField;\n"],"mappings":"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"}

package/dist/Tabs/index.js

@@ -8,7 +8,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import BaseTabs from 'react-bootstrap/Tabs';
@@ -27,11 +27,11 @@ function Tabs(_ref) {
       activeKey
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const containerElementRef = useRef(null);
+  const [containerElementRef, setContainerElementRef] = useState(null);
   const overflowElementRef = useRef(null);
-  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(containerElementRef.current?.children[0], overflowElementRef.current?.parentNode);
+  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(containerElementRef?.firstChild, overflowElementRef.current?.parentNode);
   useEffect(() => {
-    if (containerElementRef.current) {
+    if (containerElementRef) {
       const observer = new MutationObserver(mutations => {
         mutations.forEach(mutation => {
           // React-Bootstrap attribute 'data-rb-event-key' is responsible for the tab identification
@@ -40,8 +40,8 @@ function Tabs(_ref) {
           const isActive = mutation.target.getAttribute('aria-selected') === 'true';
           // datakey attribute is added manually to the dropdown
           // elements so that they correspond to the native tabs' eventKey
-          const element = containerElementRef.current.querySelector(`[datakey='${eventKey}']`);
-          const moreTab = containerElementRef.current.querySelector('.pgn__tab_more');
+          const element = containerElementRef.querySelector(`[datakey='${eventKey}']`);
+          const moreTab = containerElementRef.querySelector('.pgn__tab_more');
           if (isActive) {
             element?.classList.add('active');
             // Here we add active class to the 'More Tab' if element exists in the dropdown
@@ -55,7 +55,7 @@ function Tabs(_ref) {
           }
         });
       });
-      observer.observe(containerElementRef.current, {
+      observer.observe(containerElementRef, {
         attributes: true,
         subtree: true,
         attributeFilter: ['aria-selected']
@@ -63,16 +63,16 @@ function Tabs(_ref) {
       return () => observer.disconnect();
     }
     return undefined;
-  }, []);
+  }, [containerElementRef]);
   useEffect(() => {
     if (overflowElementRef.current?.parentNode) {
       overflowElementRef.current.parentNode.tabIndex = -1;
     }
   }, [overflowElementRef.current?.parentNode]);
-  const handleDropdownTabClick = eventKey => {
-    const hiddenTab = containerElementRef.current.querySelector(`[data-rb-event-key='${eventKey}']`);
+  const handleDropdownTabClick = useCallback(eventKey => {
+    const hiddenTab = containerElementRef.querySelector(`[data-rb-event-key='${eventKey}']`);
     hiddenTab.click();
-  };
+  }, [containerElementRef]);
   const tabsChildren = useMemo(() => {
     const indexOfOverflowStart = indexOfLastVisibleChild + 1;
     const handleDropdownKeyPress = (e, eventKey) => {
@@ -151,9 +151,9 @@ function Tabs(_ref) {
       }, overflowChildren))
     }));
     return childrenList;
-  }, [activeKey, children, defaultActiveKey, indexOfLastVisibleChild, moreTabText]);
+  }, [activeKey, children, defaultActiveKey, indexOfLastVisibleChild, moreTabText, handleDropdownTabClick]);
   return /*#__PURE__*/React.createElement("div", {
-    ref: containerElementRef
+    ref: setContainerElementRef
   }, /*#__PURE__*/React.createElement(BaseTabs, _extends({
     defaultActiveKey: defaultActiveKey,
     activeKey: activeKey

package/dist/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useMemo","useRef","classNames","PropTypes","BaseTabs","TabsDeprecated","Bubble","Dropdown","useIndexOfLastVisibleChild","Tab","MORE_TAB_TEXT","Tabs","_ref","children","className","moreTabText","defaultActiveKey","activeKey","props","_objectWithoutProperties","_excluded","containerElementRef","overflowElementRef","indexOfLastVisibleChild","current","parentNode","observer","MutationObserver","mutations","forEach","mutation","eventKey","target","getAttribute","isActive","element","querySelector","moreTab","classList","add","remove","observe","attributes","subtree","attributeFilter","disconnect","undefined","tabIndex","handleDropdownTabClick","hiddenTab","click","tabsChildren","indexOfOverflowStart","handleDropdownKeyPress","e","key","childrenList","Children","map","child","index","type","name","process","env","NODE_ENV","console","error","isValidElement","_child$props","title","notification","tabClassName","rest","_excluded2","newTitle","createElement","Fragment","variant","role","expandable","tabClass","modifiedTab","cloneElement","_objectSpread","moreTabHasNotification","overflowChildren","slice","overflowChild","Item","as","onClick","onKeyPress","disabled","datakey","active","splice","length","ref","Toggle","id","Menu","_extends","propTypes","oneOf","node","isRequired","string","defaultProps","Deprecated","default","TabContainer","TabContent","TabPane"],"sources":["../../src/Tabs/index.jsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseTabs from 'react-bootstrap/Tabs';\nimport TabsDeprecated from './deprecated';\nimport Bubble from '../Bubble';\nimport Dropdown from '../Dropdown';\nimport useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChild';\nimport Tab from './Tab';\n\nexport const MORE_TAB_TEXT = 'More...';\n\nfunction Tabs({\n  children,\n  className,\n  moreTabText = MORE_TAB_TEXT,\n  defaultActiveKey,\n  activeKey,\n  ...props\n}) {\n  const containerElementRef = useRef(null);\n  const overflowElementRef = useRef(null);\n  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(\n    containerElementRef.current?.children[0],\n    overflowElementRef.current?.parentNode,\n  );\n\n  useEffect(() => {\n    if (containerElementRef.current) {\n      const observer = new MutationObserver((mutations => {\n        mutations.forEach(mutation => {\n          // React-Bootstrap attribute 'data-rb-event-key' is responsible for the tab identification\n          const eventKey = mutation.target.getAttribute('data-rb-event-key');\n          // React-Bootstrap attribute 'aria-selected' is responsible for selected/unselected state\n          const isActive = mutation.target.getAttribute('aria-selected') === 'true';\n          // datakey attribute is added manually to the dropdown\n          // elements so that they correspond to the native tabs' eventKey\n          const element = containerElementRef.current.querySelector(`[datakey='${eventKey}']`);\n          const moreTab = containerElementRef.current.querySelector('.pgn__tab_more');\n          if (isActive) {\n            element?.classList.add('active');\n            // Here we add active class to the 'More Tab' if element exists in the dropdown\n            if (element) {\n              moreTab.classList.add('active');\n            } else {\n              moreTab.classList.remove('active');\n            }\n          } else {\n            element?.classList.remove('active');\n          }\n        });\n      }));\n      observer.observe(containerElementRef.current, {\n        attributes: true, subtree: true, attributeFilter: ['aria-selected'],\n      });\n      return () => observer.disconnect();\n    }\n    return undefined;\n  }, []);\n\n  useEffect(() => {\n    if (overflowElementRef.current?.parentNode) {\n      overflowElementRef.current.parentNode.tabIndex = -1;\n    }\n  }, [overflowElementRef.current?.parentNode]);\n\n  const handleDropdownTabClick = (eventKey) => {\n    const hiddenTab = containerElementRef.current.querySelector(`[data-rb-event-key='${eventKey}']`);\n    hiddenTab.click();\n  };\n\n  const tabsChildren = useMemo(() => {\n    const indexOfOverflowStart = indexOfLastVisibleChild + 1;\n    const handleDropdownKeyPress = (e, eventKey) => {\n      if (e.key === 'Enter') {\n        handleDropdownTabClick(eventKey);\n      }\n    };\n    const childrenList = React.Children.map(children, (child, index) => {\n      if (child?.type?.name !== 'Tab' && process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(\n          `Tabs children can only be of type Tab. ${children[index]} was passed instead.`,\n        );\n      }\n      if (!React.isValidElement(child)) {\n        return child;\n      }\n      const {\n        title, notification, tabClassName, ...rest\n      } = child.props;\n      let newTitle;\n      if (notification) {\n        newTitle = (\n          <>\n            {title}\n            <Bubble\n              variant=\"error\"\n              role=\"status\"\n              className=\"pgn__tab-notification\"\n              aria-live=\"polite\"\n              expandable\n            >\n              {notification}\n            </Bubble>\n          </>\n        );\n      } else {\n        newTitle = title;\n      }\n      const tabClass = index > indexOfLastVisibleChild ? 'pgn__tab_invisible' : '';\n      const modifiedTab = React.cloneElement(child, {\n        ...rest,\n        title: newTitle,\n        tabClassName: classNames(tabClass, tabClassName),\n      });\n      return modifiedTab;\n    });\n    let moreTabHasNotification = false;\n    const overflowChildren = childrenList.slice(indexOfOverflowStart)\n      .map(overflowChild => {\n        if (!moreTabHasNotification && overflowChild.props.notification) {\n          moreTabHasNotification = true;\n        }\n        return (\n          <Dropdown.Item\n            as=\"li\"\n            tabIndex=\"0\"\n            key={`${overflowChild.props.eventKey}overflow`}\n            onClick={() => handleDropdownTabClick(overflowChild.props.eventKey)}\n            onKeyPress={(e) => handleDropdownKeyPress(e, overflowChild.props.eventKey)}\n            disabled={overflowChild.props.disabled}\n            datakey={overflowChild.props.eventKey}\n            className={classNames({\n              active: overflowChild.props.eventKey === defaultActiveKey || overflowChild.props.eventKey === activeKey,\n            }, 'pgn__tabs__dropdown-item')}\n          >\n            {overflowChild.props.title}\n          </Dropdown.Item>\n        );\n      });\n\n    childrenList.splice(indexOfOverflowStart, 0, (<Tab\n      key=\"moreTabKey\"\n      tabClassName={classNames(!overflowChildren.length && 'pgn__tab_invisible', 'pgn__tab_more')}\n      title={(\n        <Dropdown ref={overflowElementRef}>\n          <Dropdown.Toggle\n            variant=\"link\"\n            className=\"nav-link\"\n            id=\"pgn__tab-toggle\"\n          >\n            {moreTabText}\n            {moreTabHasNotification && (\n              <Bubble\n                variant=\"error\"\n                role=\"status\"\n                className=\"pgn__tab-notification\"\n              />\n            )}\n          </Dropdown.Toggle>\n          <Dropdown.Menu as=\"ul\" className=\"dropdown-menu-right\">{overflowChildren}</Dropdown.Menu>\n        </Dropdown>\n      )}\n    />\n    ));\n    return childrenList;\n  }, [activeKey, children, defaultActiveKey, indexOfLastVisibleChild, moreTabText]);\n\n  return (\n    <div ref={containerElementRef}>\n      <BaseTabs\n        defaultActiveKey={defaultActiveKey}\n        activeKey={activeKey}\n        {...props}\n        className={classNames(className, 'pgn__tabs')}\n      >\n        {tabsChildren}\n      </BaseTabs>\n    </div>\n  );\n}\n\nTabs.propTypes = {\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['tabs', 'pills', 'inverse-tabs', 'inverse-pills', 'button-group']),\n  /** Specifies elements that is processed to create tabs. */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies text for the 'More' tab. */\n  moreTabText: PropTypes.string,\n  /** Specifies default active tab (uncontrolled usage). */\n  defaultActiveKey: PropTypes.string,\n  /** Specifies active tab (controlled usage). */\n  activeKey: PropTypes.string,\n};\n\nTabs.defaultProps = {\n  variant: 'tabs',\n  className: undefined,\n  moreTabText: MORE_TAB_TEXT,\n  defaultActiveKey: undefined,\n  activeKey: undefined,\n};\n\nTabs.Deprecated = TabsDeprecated;\n\nexport default Tabs;\nexport { Tab };\nexport { default as TabContainer } from 'react-bootstrap/TabContainer';\nexport { default as TabContent } from 'react-bootstrap/TabContent';\nexport { default as TabPane } from 'react-bootstrap/TabPane';\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useEffect","useMemo","useRef","useState","useCallback","classNames","PropTypes","BaseTabs","TabsDeprecated","Bubble","Dropdown","useIndexOfLastVisibleChild","Tab","MORE_TAB_TEXT","Tabs","_ref","children","className","moreTabText","defaultActiveKey","activeKey","props","_objectWithoutProperties","_excluded","containerElementRef","setContainerElementRef","overflowElementRef","indexOfLastVisibleChild","firstChild","current","parentNode","observer","MutationObserver","mutations","forEach","mutation","eventKey","target","getAttribute","isActive","element","querySelector","moreTab","classList","add","remove","observe","attributes","subtree","attributeFilter","disconnect","undefined","tabIndex","handleDropdownTabClick","hiddenTab","click","tabsChildren","indexOfOverflowStart","handleDropdownKeyPress","e","key","childrenList","Children","map","child","index","type","name","process","env","NODE_ENV","console","error","isValidElement","_child$props","title","notification","tabClassName","rest","_excluded2","newTitle","createElement","Fragment","variant","role","expandable","tabClass","modifiedTab","cloneElement","_objectSpread","moreTabHasNotification","overflowChildren","slice","overflowChild","Item","as","onClick","onKeyPress","disabled","datakey","active","splice","length","ref","Toggle","id","Menu","_extends","propTypes","oneOf","node","isRequired","string","defaultProps","Deprecated","default","TabContainer","TabContent","TabPane"],"sources":["../../src/Tabs/index.jsx"],"sourcesContent":["import React, {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useCallback,\n} from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseTabs from 'react-bootstrap/Tabs';\nimport TabsDeprecated from './deprecated';\nimport Bubble from '../Bubble';\nimport Dropdown from '../Dropdown';\nimport useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChild';\nimport Tab from './Tab';\n\nexport const MORE_TAB_TEXT = 'More...';\n\nfunction Tabs({\n  children,\n  className,\n  moreTabText = MORE_TAB_TEXT,\n  defaultActiveKey,\n  activeKey,\n  ...props\n}) {\n  const [containerElementRef, setContainerElementRef] = useState(null);\n  const overflowElementRef = useRef(null);\n  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(\n    containerElementRef?.firstChild,\n    overflowElementRef.current?.parentNode,\n  );\n\n  useEffect(() => {\n    if (containerElementRef) {\n      const observer = new MutationObserver((mutations => {\n        mutations.forEach(mutation => {\n          // React-Bootstrap attribute 'data-rb-event-key' is responsible for the tab identification\n          const eventKey = mutation.target.getAttribute('data-rb-event-key');\n          // React-Bootstrap attribute 'aria-selected' is responsible for selected/unselected state\n          const isActive = mutation.target.getAttribute('aria-selected') === 'true';\n          // datakey attribute is added manually to the dropdown\n          // elements so that they correspond to the native tabs' eventKey\n          const element = containerElementRef.querySelector(`[datakey='${eventKey}']`);\n          const moreTab = containerElementRef.querySelector('.pgn__tab_more');\n          if (isActive) {\n            element?.classList.add('active');\n            // Here we add active class to the 'More Tab' if element exists in the dropdown\n            if (element) {\n              moreTab.classList.add('active');\n            } else {\n              moreTab.classList.remove('active');\n            }\n          } else {\n            element?.classList.remove('active');\n          }\n        });\n      }));\n      observer.observe(containerElementRef, {\n        attributes: true, subtree: true, attributeFilter: ['aria-selected'],\n      });\n      return () => observer.disconnect();\n    }\n    return undefined;\n  }, [containerElementRef]);\n\n  useEffect(() => {\n    if (overflowElementRef.current?.parentNode) {\n      overflowElementRef.current.parentNode.tabIndex = -1;\n    }\n  }, [overflowElementRef.current?.parentNode]);\n\n  const handleDropdownTabClick = useCallback((eventKey) => {\n    const hiddenTab = containerElementRef.querySelector(`[data-rb-event-key='${eventKey}']`);\n    hiddenTab.click();\n  }, [containerElementRef]);\n\n  const tabsChildren = useMemo(() => {\n    const indexOfOverflowStart = indexOfLastVisibleChild + 1;\n    const handleDropdownKeyPress = (e, eventKey) => {\n      if (e.key === 'Enter') {\n        handleDropdownTabClick(eventKey);\n      }\n    };\n    const childrenList = React.Children.map(children, (child, index) => {\n      if (child?.type?.name !== 'Tab' && process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(\n          `Tabs children can only be of type Tab. ${children[index]} was passed instead.`,\n        );\n      }\n      if (!React.isValidElement(child)) {\n        return child;\n      }\n      const {\n        title, notification, tabClassName, ...rest\n      } = child.props;\n      let newTitle;\n      if (notification) {\n        newTitle = (\n          <>\n            {title}\n            <Bubble\n              variant=\"error\"\n              role=\"status\"\n              className=\"pgn__tab-notification\"\n              aria-live=\"polite\"\n              expandable\n            >\n              {notification}\n            </Bubble>\n          </>\n        );\n      } else {\n        newTitle = title;\n      }\n      const tabClass = index > indexOfLastVisibleChild ? 'pgn__tab_invisible' : '';\n      const modifiedTab = React.cloneElement(child, {\n        ...rest,\n        title: newTitle,\n        tabClassName: classNames(tabClass, tabClassName),\n      });\n      return modifiedTab;\n    });\n    let moreTabHasNotification = false;\n    const overflowChildren = childrenList.slice(indexOfOverflowStart)\n      .map(overflowChild => {\n        if (!moreTabHasNotification && overflowChild.props.notification) {\n          moreTabHasNotification = true;\n        }\n        return (\n          <Dropdown.Item\n            as=\"li\"\n            tabIndex=\"0\"\n            key={`${overflowChild.props.eventKey}overflow`}\n            onClick={() => handleDropdownTabClick(overflowChild.props.eventKey)}\n            onKeyPress={(e) => handleDropdownKeyPress(e, overflowChild.props.eventKey)}\n            disabled={overflowChild.props.disabled}\n            datakey={overflowChild.props.eventKey}\n            className={classNames({\n              active: overflowChild.props.eventKey === defaultActiveKey || overflowChild.props.eventKey === activeKey,\n            }, 'pgn__tabs__dropdown-item')}\n          >\n            {overflowChild.props.title}\n          </Dropdown.Item>\n        );\n      });\n\n    childrenList.splice(indexOfOverflowStart, 0, (<Tab\n      key=\"moreTabKey\"\n      tabClassName={classNames(!overflowChildren.length && 'pgn__tab_invisible', 'pgn__tab_more')}\n      title={(\n        <Dropdown ref={overflowElementRef}>\n          <Dropdown.Toggle\n            variant=\"link\"\n            className=\"nav-link\"\n            id=\"pgn__tab-toggle\"\n          >\n            {moreTabText}\n            {moreTabHasNotification && (\n              <Bubble\n                variant=\"error\"\n                role=\"status\"\n                className=\"pgn__tab-notification\"\n              />\n            )}\n          </Dropdown.Toggle>\n          <Dropdown.Menu as=\"ul\" className=\"dropdown-menu-right\">{overflowChildren}</Dropdown.Menu>\n        </Dropdown>\n      )}\n    />\n    ));\n    return childrenList;\n  }, [activeKey, children, defaultActiveKey, indexOfLastVisibleChild, moreTabText, handleDropdownTabClick]);\n\n  return (\n    <div ref={setContainerElementRef}>\n      <BaseTabs\n        defaultActiveKey={defaultActiveKey}\n        activeKey={activeKey}\n        {...props}\n        className={classNames(className, 'pgn__tabs')}\n      >\n        {tabsChildren}\n      </BaseTabs>\n    </div>\n  );\n}\n\nTabs.propTypes = {\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['tabs', 'pills', 'inverse-tabs', 'inverse-pills', 'button-group']),\n  /** Specifies elements that is processed to create tabs. */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies text for the 'More' tab. */\n  moreTabText: PropTypes.string,\n  /** Specifies default active tab (uncontrolled usage). */\n  defaultActiveKey: PropTypes.string,\n  /** Specifies active tab (controlled usage). */\n  activeKey: PropTypes.string,\n};\n\nTabs.defaultProps = {\n  variant: 'tabs',\n  className: undefined,\n  moreTabText: MORE_TAB_TEXT,\n  defaultActiveKey: undefined,\n  activeKey: undefined,\n};\n\nTabs.Deprecated = TabsDeprecated;\n\nexport default Tabs;\nexport { Tab };\nexport { default as TabContainer } from 'react-bootstrap/TabContainer';\nexport { default as TabContent } from 'react-bootstrap/TabContent';\nexport { default as TabPane } from 'react-bootstrap/TabPane';\n"],"mappings":"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"}

package/dist/hooks/useIndexOfLastVisibleChild.js

@@ -1,5 +1,4 @@
 import { useLayoutEffect, useState } from 'react';
-import useWindowSize from './useWindowSize';
 
 /**
  * This hook will find the index of the last child of a containing element
@@ -9,48 +8,44 @@ import useWindowSize from './useWindowSize';
  * @param {Element} containerElementRef - container element
  * @param {Element} overflowElementRef - overflow element
  *
- * The hook returns an array containing:
- * [indexOfLastVisibleChild, containerElementRef, overflowElementRef]
- *
- * indexOfLastVisibleChild - the index of the last visible child
- * containerElementRef - a ref to be added to the containing html node
- * overflowElementRef - a ref to be added to an html node inside the container
- *    that is likely to be used to contain a "More" type dropdown or other
- *    mechanism to reveal hidden children. The width of this element is always
- *    included when determining which children will fit or not. Usage of this ref
- *    is optional.
+ * The hook returns the index of the last visible child.
  */
 const useIndexOfLastVisibleChild = (containerElementRef, overflowElementRef) => {
   const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);
-  const windowSize = useWindowSize();
   useLayoutEffect(() => {
-    if (!containerElementRef) {
-      return;
+    function updateLastVisibleChildIndex() {
+      // Get array of child nodes from NodeList form
+      const childNodesArr = Array.prototype.slice.call(containerElementRef.children);
+      const {
+        nextIndexOfLastVisibleChild
+      } = childNodesArr
+      // filter out the overflow element
+      .filter(childNode => childNode !== overflowElementRef)
+      // sum the widths to find the last visible element's index
+      .reduce((acc, childNode, index) => {
+        acc.sumWidth += childNode.getBoundingClientRect().width;
+        if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {
+          acc.nextIndexOfLastVisibleChild = index;
+        }
+        return acc;
+      }, {
+        // Include the overflow element's width to begin with. Doing this means
+        // sometimes we'll show a dropdown with one item in it when it would fit,
+        // but allowing this case dramatically simplifies the calculations we need
+        // to do above.
+        sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,
+        nextIndexOfLastVisibleChild: -1
+      });
+      setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
+    }
+    if (containerElementRef) {
+      updateLastVisibleChildIndex();
+      const resizeObserver = new ResizeObserver(() => updateLastVisibleChildIndex());
+      resizeObserver.observe(containerElementRef);
+      return () => resizeObserver.disconnect();
     }
-    // Get array of child nodes from NodeList form
-    const childNodesArr = Array.prototype.slice.call(containerElementRef.children);
-    const {
-      nextIndexOfLastVisibleChild
-    } = childNodesArr
-    // filter out the overflow element
-    .filter(childNode => childNode !== overflowElementRef)
-    // sum the widths to find the last visible element's index
-    .reduce((acc, childNode, index) => {
-      acc.sumWidth += childNode.getBoundingClientRect().width;
-      if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {
-        acc.nextIndexOfLastVisibleChild = index;
-      }
-      return acc;
-    }, {
-      // Include the overflow element's width to begin with. Doing this means
-      // sometimes we'll show a dropdown with one item in it when it would fit,
-      // but allowing this case dramatically simplifies the calculations we need
-      // to do above.
-      sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,
-      nextIndexOfLastVisibleChild: -1
-    });
-    setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
-  }, [windowSize, containerElementRef, overflowElementRef]);
+    return undefined;
+  }, [containerElementRef, overflowElementRef]);
   return indexOfLastVisibleChild;
 };
 export default useIndexOfLastVisibleChild;

package/dist/hooks/useIndexOfLastVisibleChild.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIndexOfLastVisibleChild.js","names":["useLayoutEffect","useState","useWindowSize","useIndexOfLastVisibleChild","containerElementRef","overflowElementRef","indexOfLastVisibleChild","setIndexOfLastVisibleChild","windowSize","childNodesArr","Array","prototype","slice","call","children","nextIndexOfLastVisibleChild","filter","childNode","reduce","acc","index","sumWidth","getBoundingClientRect","width"],"sources":["../../src/hooks/useIndexOfLastVisibleChild.jsx"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\nimport useWindowSize from './useWindowSize';\n\n/**\n * This hook will find the index of the last child of a containing element\n * that fits within its bounding rectangle. This is done by summing the widths\n * of the children until they exceed the width of the container.\n *\n * @param {Element} containerElementRef - container element\n * @param {Element} overflowElementRef - overflow element\n *\n * The hook returns an array containing:\n * [indexOfLastVisibleChild, containerElementRef, overflowElementRef]\n *\n * indexOfLastVisibleChild - the index of the last visible child\n * containerElementRef - a ref to be added to the containing html node\n * overflowElementRef - a ref to be added to an html node inside the container\n *    that is likely to be used to contain a \"More\" type dropdown or other\n *    mechanism to reveal hidden children. The width of this element is always\n *    included when determining which children will fit or not. Usage of this ref\n *    is optional.\n */\nconst useIndexOfLastVisibleChild = (containerElementRef, overflowElementRef) => {\n  const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);\n  const windowSize = useWindowSize();\n\n  useLayoutEffect(() => {\n    if (!containerElementRef) {\n      return;\n    }\n    // Get array of child nodes from NodeList form\n    const childNodesArr = Array.prototype.slice.call(containerElementRef.children);\n    const { nextIndexOfLastVisibleChild } = childNodesArr\n      // filter out the overflow element\n      .filter(childNode => childNode !== overflowElementRef)\n      // sum the widths to find the last visible element's index\n      .reduce((acc, childNode, index) => {\n        acc.sumWidth += childNode.getBoundingClientRect().width;\n        if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {\n          acc.nextIndexOfLastVisibleChild = index;\n        }\n        return acc;\n      }, {\n        // Include the overflow element's width to begin with. Doing this means\n        // sometimes we'll show a dropdown with one item in it when it would fit,\n        // but allowing this case dramatically simplifies the calculations we need\n        // to do above.\n        sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,\n        nextIndexOfLastVisibleChild: -1,\n      });\n\n    setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);\n  }, [windowSize, containerElementRef, overflowElementRef]);\n\n  return indexOfLastVisibleChild;\n};\n\nexport default useIndexOfLastVisibleChild;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,QAAQ,QAAQ,OAAO;AAEjD,OAAOC,aAAa,MAAM,iBAAiB;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,0BAA0B,GAAGA,CAACC,mBAAmB,EAAEC,kBAAkB,KAAK;EAC9E,MAAM,CAACC,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGN,QAAQ,CAAC,CAAC,CAAC,CAAC;EAC1E,MAAMO,UAAU,GAAGN,aAAa,CAAC,CAAC;EAElCF,eAAe,CAAC,MAAM;IACpB,IAAI,CAACI,mBAAmB,EAAE;MACxB;IACF;IACA;IACA,MAAMK,aAAa,GAAGC,KAAK,CAACC,SAAS,CAACC,KAAK,CAACC,IAAI,CAACT,mBAAmB,CAACU,QAAQ,CAAC;IAC9E,MAAM;MAAEC;IAA4B,CAAC,GAAGN;IACtC;IAAA,CACCO,MAAM,CAACC,SAAS,IAAIA,SAAS,KAAKZ,kBAAkB;IACrD;IAAA,CACCa,MAAM,CAAC,CAACC,GAAG,EAAEF,SAAS,EAAEG,KAAK,KAAK;MACjCD,GAAG,CAACE,QAAQ,IAAIJ,SAAS,CAACK,qBAAqB,CAAC,CAAC,CAACC,KAAK;MACvD,IAAIJ,GAAG,CAACE,QAAQ,IAAIjB,mBAAmB,CAACkB,qBAAqB,CAAC,CAAC,CAACC,KAAK,EAAE;QACrEJ,GAAG,CAACJ,2BAA2B,GAAGK,KAAK;MACzC;MACA,OAAOD,GAAG;IACZ,CAAC,EAAE;MACD;MACA;MACA;MACA;MACAE,QAAQ,EAAEhB,kBAAkB,GAAGA,kBAAkB,CAACiB,qBAAqB,CAAC,CAAC,CAACC,KAAK,GAAG,CAAC;MACnFR,2BAA2B,EAAE,CAAC;IAChC,CAAC,CAAC;IAEJR,0BAA0B,CAACQ,2BAA2B,CAAC;EACzD,CAAC,EAAE,CAACP,UAAU,EAAEJ,mBAAmB,EAAEC,kBAAkB,CAAC,CAAC;EAEzD,OAAOC,uBAAuB;AAChC,CAAC;AAED,eAAeH,0BAA0B"}
+{"version":3,"file":"useIndexOfLastVisibleChild.js","names":["useLayoutEffect","useState","useIndexOfLastVisibleChild","containerElementRef","overflowElementRef","indexOfLastVisibleChild","setIndexOfLastVisibleChild","updateLastVisibleChildIndex","childNodesArr","Array","prototype","slice","call","children","nextIndexOfLastVisibleChild","filter","childNode","reduce","acc","index","sumWidth","getBoundingClientRect","width","resizeObserver","ResizeObserver","observe","disconnect","undefined"],"sources":["../../src/hooks/useIndexOfLastVisibleChild.jsx"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\n/**\n * This hook will find the index of the last child of a containing element\n * that fits within its bounding rectangle. This is done by summing the widths\n * of the children until they exceed the width of the container.\n *\n * @param {Element} containerElementRef - container element\n * @param {Element} overflowElementRef - overflow element\n *\n * The hook returns the index of the last visible child.\n */\nconst useIndexOfLastVisibleChild = (containerElementRef, overflowElementRef) => {\n  const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);\n\n  useLayoutEffect(() => {\n    function updateLastVisibleChildIndex() {\n      // Get array of child nodes from NodeList form\n      const childNodesArr = Array.prototype.slice.call(containerElementRef.children);\n      const { nextIndexOfLastVisibleChild } = childNodesArr\n        // filter out the overflow element\n        .filter(childNode => childNode !== overflowElementRef)\n        // sum the widths to find the last visible element's index\n        .reduce((acc, childNode, index) => {\n          acc.sumWidth += childNode.getBoundingClientRect().width;\n          if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {\n            acc.nextIndexOfLastVisibleChild = index;\n          }\n          return acc;\n        }, {\n          // Include the overflow element's width to begin with. Doing this means\n          // sometimes we'll show a dropdown with one item in it when it would fit,\n          // but allowing this case dramatically simplifies the calculations we need\n          // to do above.\n          sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,\n          nextIndexOfLastVisibleChild: -1,\n        });\n\n      setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);\n    }\n\n    if (containerElementRef) {\n      updateLastVisibleChildIndex();\n\n      const resizeObserver = new ResizeObserver(() => updateLastVisibleChildIndex());\n      resizeObserver.observe(containerElementRef);\n\n      return () => resizeObserver.disconnect();\n    }\n\n    return undefined;\n  }, [containerElementRef, overflowElementRef]);\n\n  return indexOfLastVisibleChild;\n};\n\nexport default useIndexOfLastVisibleChild;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,QAAQ,QAAQ,OAAO;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,0BAA0B,GAAGA,CAACC,mBAAmB,EAAEC,kBAAkB,KAAK;EAC9E,MAAM,CAACC,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGL,QAAQ,CAAC,CAAC,CAAC,CAAC;EAE1ED,eAAe,CAAC,MAAM;IACpB,SAASO,2BAA2BA,CAAA,EAAG;MACrC;MACA,MAAMC,aAAa,GAAGC,KAAK,CAACC,SAAS,CAACC,KAAK,CAACC,IAAI,CAACT,mBAAmB,CAACU,QAAQ,CAAC;MAC9E,MAAM;QAAEC;MAA4B,CAAC,GAAGN;MACtC;MAAA,CACCO,MAAM,CAACC,SAAS,IAAIA,SAAS,KAAKZ,kBAAkB;MACrD;MAAA,CACCa,MAAM,CAAC,CAACC,GAAG,EAAEF,SAAS,EAAEG,KAAK,KAAK;QACjCD,GAAG,CAACE,QAAQ,IAAIJ,SAAS,CAACK,qBAAqB,CAAC,CAAC,CAACC,KAAK;QACvD,IAAIJ,GAAG,CAACE,QAAQ,IAAIjB,mBAAmB,CAACkB,qBAAqB,CAAC,CAAC,CAACC,KAAK,EAAE;UACrEJ,GAAG,CAACJ,2BAA2B,GAAGK,KAAK;QACzC;QACA,OAAOD,GAAG;MACZ,CAAC,EAAE;QACD;QACA;QACA;QACA;QACAE,QAAQ,EAAEhB,kBAAkB,GAAGA,kBAAkB,CAACiB,qBAAqB,CAAC,CAAC,CAACC,KAAK,GAAG,CAAC;QACnFR,2BAA2B,EAAE,CAAC;MAChC,CAAC,CAAC;MAEJR,0BAA0B,CAACQ,2BAA2B,CAAC;IACzD;IAEA,IAAIX,mBAAmB,EAAE;MACvBI,2BAA2B,CAAC,CAAC;MAE7B,MAAMgB,cAAc,GAAG,IAAIC,cAAc,CAAC,MAAMjB,2BAA2B,CAAC,CAAC,CAAC;MAC9EgB,cAAc,CAACE,OAAO,CAACtB,mBAAmB,CAAC;MAE3C,OAAO,MAAMoB,cAAc,CAACG,UAAU,CAAC,CAAC;IAC1C;IAEA,OAAOC,SAAS;EAClB,CAAC,EAAE,CAACxB,mBAAmB,EAAEC,kBAAkB,CAAC,CAAC;EAE7C,OAAOC,uBAAuB;AAChC,CAAC;AAED,eAAeH,0BAA0B"}

package/dist/i18n/messages/ar.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "إغلاق قائمة الخيارات",
   "pgn.FormAutosuggest.iconButtonOpened": "فتح قائمة الخيارات",
   "pgn.Toast.closeLabel": "إغلاق ",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/ca.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/es_419.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
   "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/es_AR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
   "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/es_ES.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
   "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/fr.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/he.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/id.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/it_IT.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Chiudi",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/ko_KR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/pl.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Zamknij",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/pt_BR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/pt_PT.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Fechar o menu de opções",
   "pgn.FormAutosuggest.iconButtonOpened": "Abrir o menu de opções",
   "pgn.Toast.closeLabel": "Fechar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/ru.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/th.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/tr_TR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Seçenekler menüsünü kapat",
   "pgn.FormAutosuggest.iconButtonOpened": "Seçenekler menüsünü aç",
   "pgn.Toast.closeLabel": "Kapat",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/dist/i18n/messages/uk.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }