@openedx/paragon 23.0.0-alpha.2 → 23.0.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/dist/Button/index.d.ts +35 -0
  2. package/dist/Button/index.js +37 -15
  3. package/dist/Button/index.js.map +1 -1
  4. package/dist/Chip/ChipIcon.d.ts +13 -8
  5. package/dist/Chip/ChipIcon.js +0 -2
  6. package/dist/Chip/ChipIcon.js.map +1 -1
  7. package/dist/Chip/constants.d.ts +4 -0
  8. package/dist/Chip/constants.js +3 -2
  9. package/dist/Chip/constants.js.map +1 -0
  10. package/dist/Chip/index.d.ts +4 -3
  11. package/dist/Chip/index.js +2 -4
  12. package/dist/Chip/index.js.map +1 -1
  13. package/dist/ChipCarousel/index.js +0 -2
  14. package/dist/ChipCarousel/index.js.map +1 -1
  15. package/dist/Hyperlink/index.d.ts +24 -0
  16. package/dist/Hyperlink/index.js +20 -32
  17. package/dist/Hyperlink/index.js.map +1 -1
  18. package/dist/Icon/index.d.ts +4 -2
  19. package/dist/Icon/index.js +1 -1
  20. package/dist/Icon/index.js.map +1 -1
  21. package/dist/IconButton/index.d.ts +342 -0
  22. package/dist/IconButton/index.js +18 -26
  23. package/dist/IconButton/index.js.map +1 -1
  24. package/dist/Modal/ModalPopup.js +7 -1
  25. package/dist/Modal/ModalPopup.js.map +1 -1
  26. package/dist/Modal/_ModalDialog.scss +4 -0
  27. package/dist/Overlay/index.d.ts +128 -0
  28. package/dist/Overlay/index.js +8 -2
  29. package/dist/Overlay/index.js.map +1 -1
  30. package/dist/Tooltip/index.d.ts +7 -0
  31. package/dist/Tooltip/index.js.map +1 -1
  32. package/dist/core.css +3 -0
  33. package/dist/core.css.map +1 -1
  34. package/dist/core.min.css +1 -1
  35. package/dist/index.d.ts +5 -5
  36. package/dist/index.js +7 -7
  37. package/dist/setupTest.d.ts +2 -0
  38. package/dist/setupTest.js.map +1 -0
  39. package/dist/utils/types/bootstrap.d.ts +39 -0
  40. package/dist/utils/types/bootstrap.js +2 -0
  41. package/dist/utils/types/bootstrap.js.map +1 -0
  42. package/package.json +5 -5
  43. package/src/Button/{Button.test.jsx → Button.test.tsx} +14 -2
  44. package/src/Button/__snapshots__/{Button.test.jsx.snap → Button.test.tsx.snap} +19 -2
  45. package/src/Button/{index.jsx → index.tsx} +58 -16
  46. package/src/Chip/{Chip.test.jsx → Chip.test.tsx} +5 -7
  47. package/src/Chip/ChipIcon.tsx +8 -8
  48. package/src/Chip/{constants.js → constants.ts} +1 -1
  49. package/src/Chip/index.tsx +6 -8
  50. package/src/ChipCarousel/index.tsx +0 -2
  51. package/src/Hyperlink/{Hyperlink.test.jsx → Hyperlink.test.tsx} +21 -10
  52. package/src/Hyperlink/{index.jsx → index.tsx} +41 -37
  53. package/src/Icon/index.d.ts +4 -2
  54. package/src/Icon/index.jsx +1 -1
  55. package/src/IconButton/{IconButton.test.jsx → IconButton.test.tsx} +24 -3
  56. package/src/IconButton/__snapshots__/IconButton.test.tsx.snap +90 -0
  57. package/src/IconButton/{index.jsx → index.tsx} +66 -26
  58. package/src/Modal/ModalPopup.jsx +9 -1
  59. package/src/Modal/_ModalDialog.scss +4 -0
  60. package/src/Modal/tests/ModalPopupNoMock.test.jsx +29 -0
  61. package/src/Overlay/{index.jsx → index.tsx} +13 -8
  62. package/src/Tooltip/{index.jsx → index.tsx} +9 -3
  63. package/src/index.d.ts +5 -5
  64. package/src/index.js +7 -7
  65. package/src/{setupTest.js → setupTest.ts} +1 -0
  66. package/src/utils/types/bootstrap.test.tsx +86 -0
  67. package/src/utils/types/bootstrap.ts +43 -0
  68. package/src/IconButton/__snapshots__/IconButton.test.jsx.snap +0 -20
  69. /package/src/Button/{ButtonGroup.test.jsx → ButtonGroup.test.tsx} +0 -0
  70. /package/src/Button/{ButtonToolbar.test.jsx → ButtonToolbar.test.tsx} +0 -0
  71. /package/src/Button/__snapshots__/{ButtonGroup.test.jsx.snap → ButtonGroup.test.tsx.snap} +0 -0
  72. /package/src/Button/__snapshots__/{ButtonToolbar.test.jsx.snap → ButtonToolbar.test.tsx.snap} +0 -0
  73. /package/src/Chip/__snapshots__/{Chip.test.jsx.snap → Chip.test.tsx.snap} +0 -0
  74. /package/src/Tooltip/{Tooltip.test.jsx → Tooltip.test.tsx} +0 -0
@@ -0,0 +1,35 @@
1
+ import React from 'react';
2
+ import { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button';
3
+ import { type ButtonGroupProps as BaseButtonGroupProps } from 'react-bootstrap/ButtonGroup';
4
+ import { type ButtonToolbarProps } from 'react-bootstrap/ButtonToolbar';
5
+ import type { ComponentWithAsProp } from '../utils/types/bootstrap';
6
+ interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
7
+ /**
8
+ * An icon component to render. Example:
9
+ * ```
10
+ * import { Close } from '@openedx/paragon/icons';
11
+ * <Button iconBefore={Close}>Close</Button>
12
+ * ```
13
+ */
14
+ iconBefore?: React.ComponentType;
15
+ /**
16
+ * An icon component to render. Example:
17
+ * ```
18
+ * import { Close } from '@openedx/paragon/icons';
19
+ * <Button iconAfter={Close}>Close</Button>
20
+ * ```
21
+ */
22
+ iconAfter?: React.ComponentType;
23
+ size?: 'sm' | 'md' | 'lg' | 'inline';
24
+ }
25
+ type ButtonType = ComponentWithAsProp<'button', ButtonProps> & {
26
+ Deprecated?: any;
27
+ };
28
+ declare const Button: ButtonType;
29
+ interface ButtonGroupProps extends Omit<BaseButtonGroupProps, 'size'> {
30
+ size?: 'sm' | 'md' | 'lg' | 'inline';
31
+ }
32
+ declare const ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps>;
33
+ declare const ButtonToolbar: ComponentWithAsProp<'div', ButtonToolbarProps>;
34
+ export default Button;
35
+ export { ButtonGroup, ButtonToolbar };
@@ -1,5 +1,6 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["children", "iconAfter", "iconBefore"];
2
+ var _excluded = ["children", "iconAfter", "iconBefore", "size"],
3
+ _excluded2 = ["size"];
3
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
6
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -19,21 +20,24 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
19
20
  var children = _ref.children,
20
21
  iconAfter = _ref.iconAfter,
21
22
  iconBefore = _ref.iconBefore,
23
+ size = _ref.size,
22
24
  props = _objectWithoutProperties(_ref, _excluded);
23
- return /*#__PURE__*/React.createElement(BaseButton, _extends({}, props, {
25
+ return /*#__PURE__*/React.createElement(BaseButton, _extends({
26
+ size: size // Bootstrap's <Button> types do not allow 'md' or 'inline', but we do.
27
+ }, props, {
24
28
  className: classNames(props.className),
25
29
  ref: ref
26
30
  }), iconBefore && /*#__PURE__*/React.createElement(Icon, {
27
31
  className: "btn-icon-before",
28
- size: props.size,
32
+ size: size,
29
33
  src: iconBefore
30
34
  }), children, iconAfter && /*#__PURE__*/React.createElement(Icon, {
31
35
  className: "btn-icon-after",
32
- size: props.size,
36
+ size: size,
33
37
  src: iconAfter
34
38
  }));
35
39
  });
36
- Button.propTypes = _objectSpread(_objectSpread({}, Button.propTypes), {}, {
40
+ Button.propTypes = {
37
41
  /** Specifies class name to apply to the button */
38
42
  className: PropTypes.string,
39
43
  /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */
@@ -59,11 +63,14 @@ Button.propTypes = _objectSpread(_objectSpread({}, Button.propTypes), {}, {
59
63
  variant: PropTypes.string,
60
64
  /** An icon component to render.
61
65
  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
62
- iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
66
+ iconBefore: PropTypes.elementType,
63
67
  /** An icon component to render.
64
68
  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
65
- iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node])
66
- });
69
+ iconAfter: PropTypes.elementType
70
+ // The 'as' type casting above is required for TypeScript checking, because the 'PropTypes.elementType' type normally
71
+ // allows strings as a value (for use cases like 'div') but we don't support that for <Icon />/iconBefore/iconAfter.
72
+ // The React TypeScript type definitions are more specific (React.ComponentType vs React.ElementType).
73
+ };
67
74
  Button.defaultProps = _objectSpread(_objectSpread({}, Button.defaultProps), {}, {
68
75
  children: undefined,
69
76
  className: undefined,
@@ -71,19 +78,29 @@ Button.defaultProps = _objectSpread(_objectSpread({}, Button.defaultProps), {},
71
78
  iconAfter: undefined,
72
79
  disabled: false
73
80
  });
74
- function ButtonGroup(props) {
75
- return /*#__PURE__*/React.createElement(BaseButtonGroup, props);
76
- }
77
- function ButtonToolbar(props) {
78
- return /*#__PURE__*/React.createElement(BaseButtonToolbar, props);
79
- }
81
+
82
+ // We could just re-export 'ButtonGroup' and 'ButtonToolbar', but we currently
83
+ // override them to add propTypes validation at runtime, since most Paragon
84
+ // consumers aren't using TypeScript yet. We also force ButtonGroup's 'size'
85
+ // prop to accept our custom values of 'md' and 'inline' which are used in
86
+ // Paragon but not used in the base Bootstrap classes.
87
+
88
+ var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
89
+ var size = _ref2.size,
90
+ props = _objectWithoutProperties(_ref2, _excluded2);
91
+ return /*#__PURE__*/React.createElement(BaseButtonGroup, _extends({
92
+ size: size
93
+ }, props, {
94
+ ref: ref
95
+ }));
96
+ });
80
97
  ButtonGroup.propTypes = {
81
98
  /** Specifies element type for this component. */
82
99
  as: PropTypes.elementType,
83
100
  /** An ARIA role describing the button group. */
84
101
  role: PropTypes.string,
85
102
  /** Specifies the size for all Buttons in the group. */
86
- size: PropTypes.oneOf(['sm', 'md', 'lg']),
103
+ size: PropTypes.oneOf(['sm', 'md', 'lg', 'inline']),
87
104
  /** Display as a button toggle group. */
88
105
  toggle: PropTypes.bool,
89
106
  /** Specifies if the set of Buttons should appear vertically stacked. */
@@ -99,6 +116,11 @@ ButtonGroup.defaultProps = {
99
116
  bsPrefix: 'btn-group',
100
117
  size: 'md'
101
118
  };
119
+ var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
120
+ return /*#__PURE__*/React.createElement(BaseButtonToolbar, _extends({}, props, {
121
+ ref: ref
122
+ }));
123
+ });
102
124
  ButtonToolbar.propTypes = {
103
125
  /** An ARIA role describing the button group. */
104
126
  role: PropTypes.string,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseButton","BaseButtonGroup","BaseButtonToolbar","Icon","Button","forwardRef","_ref","ref","children","iconAfter","iconBefore","props","_objectWithoutProperties","_excluded","createElement","_extends","className","size","src","propTypes","_objectSpread","string","disabled","bool","node","isRequired","onClick","func","onKeyDown","type","variant","oneOfType","elementType","defaultProps","undefined","ButtonGroup","ButtonToolbar","as","role","oneOf","toggle","vertical","bsPrefix"],"sources":["../../src/Button/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseButton from 'react-bootstrap/Button';\nimport BaseButtonGroup from 'react-bootstrap/ButtonGroup';\nimport BaseButtonToolbar from 'react-bootstrap/ButtonToolbar';\n\nimport Icon from '../Icon';\n\nconst Button = React.forwardRef(({\n children,\n iconAfter,\n iconBefore,\n ...props\n}, ref) => (\n <BaseButton\n {...props}\n className={classNames(props.className)}\n ref={ref}\n >\n {iconBefore && <Icon className=\"btn-icon-before\" size={props.size} src={iconBefore} />}\n {children}\n {iconAfter && <Icon className=\"btn-icon-after\" size={props.size} src={iconAfter} />}\n </BaseButton>\n));\n\nButton.propTypes = {\n ...Button.propTypes,\n /** Specifies class name to apply to the button */\n className: PropTypes.string,\n /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */\n disabled: PropTypes.bool,\n /** Specifies the text that is displayed within the button. */\n children: PropTypes.node.isRequired,\n /** A function that would specify what the button should do when the `onClick` event is triggered.\n * For example, the button could launch a `Modal`. The default is an empty function. */\n onClick: PropTypes.func,\n /** A function that would specify what the button should do when the `onKeyDown` event is triggered.\n * For example, this could handle using the `Escape` key to trigger the button's action.\n * The default is an empty function. */\n onKeyDown: PropTypes.func,\n /** Used to set the `type` attribute on the `button` tag. The default type is `button`. */\n type: PropTypes.string,\n /** Specifies variant to use.\n * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,\n * `light`, `link`\n *\n * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`\n * or `inverse-outline-`)\n * */\n variant: PropTypes.string,\n /** An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n /** An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n};\n\nButton.defaultProps = {\n ...Button.defaultProps,\n children: undefined,\n className: undefined,\n iconBefore: undefined,\n iconAfter: undefined,\n disabled: false,\n};\n\nfunction ButtonGroup(props) {\n return <BaseButtonGroup {...props} />;\n}\nfunction ButtonToolbar(props) {\n return <BaseButtonToolbar {...props} />;\n}\n\nButtonGroup.propTypes = {\n /** Specifies element type for this component. */\n as: PropTypes.elementType,\n /** An ARIA role describing the button group. */\n role: PropTypes.string,\n /** Specifies the size for all Buttons in the group. */\n size: PropTypes.oneOf(['sm', 'md', 'lg']),\n /** Display as a button toggle group. */\n toggle: PropTypes.bool,\n /** Specifies if the set of Buttons should appear vertically stacked. */\n vertical: PropTypes.bool,\n /** Overrides underlying component base CSS class name */\n bsPrefix: PropTypes.string,\n};\n\nButtonGroup.defaultProps = {\n as: 'div',\n role: 'group',\n toggle: false,\n vertical: false,\n bsPrefix: 'btn-group',\n size: 'md',\n};\n\nButtonToolbar.propTypes = {\n /** An ARIA role describing the button group. */\n role: PropTypes.string,\n /** Overrides underlying component base CSS class name */\n bsPrefix: PropTypes.string,\n};\n\nButtonToolbar.defaultProps = {\n role: 'toolbar',\n bsPrefix: 'btn-toolbar',\n};\n\nexport default Button;\nexport { ButtonGroup, ButtonToolbar };\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseButton","BaseButtonGroup","BaseButtonToolbar","Icon","Button","forwardRef","_ref","ref","children","iconAfter","iconBefore","size","props","_objectWithoutProperties","_excluded","createElement","_extends","className","src","propTypes","string","disabled","bool","node","isRequired","onClick","func","onKeyDown","type","variant","elementType","defaultProps","_objectSpread","undefined","ButtonGroup","_ref2","_excluded2","as","role","oneOf","toggle","vertical","bsPrefix","ButtonToolbar"],"sources":["../../src/Button/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes, { type Requireable } from 'prop-types';\nimport classNames from 'classnames';\nimport BaseButton, { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button';\nimport BaseButtonGroup, { type ButtonGroupProps as BaseButtonGroupProps } from 'react-bootstrap/ButtonGroup';\nimport BaseButtonToolbar, { type ButtonToolbarProps } from 'react-bootstrap/ButtonToolbar';\nimport type { ComponentWithAsProp } from '../utils/types/bootstrap';\n\nimport Icon from '../Icon';\n\ninterface ButtonProps extends Omit<BaseButtonProps, 'size'> {\n /**\n * An icon component to render. Example:\n * ```\n * import { Close } from '@openedx/paragon/icons';\n * <Button iconBefore={Close}>Close</Button>\n * ```\n */\n iconBefore?: React.ComponentType;\n /**\n * An icon component to render. Example:\n * ```\n * import { Close } from '@openedx/paragon/icons';\n * <Button iconAfter={Close}>Close</Button>\n * ```\n */\n iconAfter?: React.ComponentType;\n size?: 'sm' | 'md' | 'lg' | 'inline';\n}\n\ntype ButtonType = ComponentWithAsProp<'button', ButtonProps> & { Deprecated?: any };\n\nconst Button: ButtonType = React.forwardRef<HTMLButtonElement, ButtonProps>(({\n children,\n iconAfter,\n iconBefore,\n size,\n ...props\n}, ref) => (\n <BaseButton\n size={size as 'sm' | 'lg' | undefined} // Bootstrap's <Button> types do not allow 'md' or 'inline', but we do.\n {...props}\n className={classNames(props.className)}\n ref={ref}\n >\n {iconBefore && <Icon className=\"btn-icon-before\" size={size} src={iconBefore} />}\n {children}\n {iconAfter && <Icon className=\"btn-icon-after\" size={size} src={iconAfter} />}\n </BaseButton>\n));\n\nButton.propTypes = {\n /** Specifies class name to apply to the button */\n className: PropTypes.string,\n /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */\n disabled: PropTypes.bool,\n /** Specifies the text that is displayed within the button. */\n children: PropTypes.node.isRequired,\n /** A function that would specify what the button should do when the `onClick` event is triggered.\n * For example, the button could launch a `Modal`. The default is an empty function. */\n onClick: PropTypes.func,\n /** A function that would specify what the button should do when the `onKeyDown` event is triggered.\n * For example, this could handle using the `Escape` key to trigger the button's action.\n * The default is an empty function. */\n onKeyDown: PropTypes.func,\n /** Used to set the `type` attribute on the `button` tag. The default type is `button`. */\n type: PropTypes.string,\n /** Specifies variant to use.\n * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,\n * `light`, `link`\n *\n * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`\n * or `inverse-outline-`)\n * */\n variant: PropTypes.string,\n /** An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,\n /** An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,\n // The 'as' type casting above is required for TypeScript checking, because the 'PropTypes.elementType' type normally\n // allows strings as a value (for use cases like 'div') but we don't support that for <Icon />/iconBefore/iconAfter.\n // The React TypeScript type definitions are more specific (React.ComponentType vs React.ElementType).\n};\n\nButton.defaultProps = {\n ...Button.defaultProps,\n children: undefined,\n className: undefined,\n iconBefore: undefined,\n iconAfter: undefined,\n disabled: false,\n};\n\n// We could just re-export 'ButtonGroup' and 'ButtonToolbar', but we currently\n// override them to add propTypes validation at runtime, since most Paragon\n// consumers aren't using TypeScript yet. We also force ButtonGroup's 'size'\n// prop to accept our custom values of 'md' and 'inline' which are used in\n// Paragon but not used in the base Bootstrap classes.\n\ninterface ButtonGroupProps extends Omit<BaseButtonGroupProps, 'size'> {\n size?: 'sm' | 'md' | 'lg' | 'inline';\n}\n\nconst ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps> = (\n React.forwardRef<HTMLButtonElement, ButtonGroupProps>(({ size, ...props }, ref) => (\n <BaseButtonGroup size={size as 'sm' | 'lg'} {...props} ref={ref} />\n ))\n);\n\nButtonGroup.propTypes = {\n /** Specifies element type for this component. */\n as: PropTypes.elementType,\n /** An ARIA role describing the button group. */\n role: PropTypes.string,\n /** Specifies the size for all Buttons in the group. */\n size: PropTypes.oneOf(['sm', 'md', 'lg', 'inline']),\n /** Display as a button toggle group. */\n toggle: PropTypes.bool,\n /** Specifies if the set of Buttons should appear vertically stacked. */\n vertical: PropTypes.bool,\n /** Overrides underlying component base CSS class name */\n bsPrefix: PropTypes.string,\n};\n\nButtonGroup.defaultProps = {\n as: 'div',\n role: 'group',\n toggle: false,\n vertical: false,\n bsPrefix: 'btn-group',\n size: 'md',\n};\n\nconst ButtonToolbar: ComponentWithAsProp<'div', ButtonToolbarProps> = (\n React.forwardRef<HTMLButtonElement, ButtonToolbarProps>((props, ref) => (\n <BaseButtonToolbar {...props} ref={ref} />\n ))\n);\n\nButtonToolbar.propTypes = {\n /** An ARIA role describing the button group. */\n role: PropTypes.string,\n /** Overrides underlying component base CSS class name */\n bsPrefix: PropTypes.string,\n};\n\nButtonToolbar.defaultProps = {\n role: 'toolbar',\n bsPrefix: 'btn-toolbar',\n};\n\nexport default Button;\nexport { ButtonGroup, ButtonToolbar };\n"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAA4B,YAAY;AACxD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAA+C,wBAAwB;AACxF,OAAOC,eAAe,MAAyD,6BAA6B;AAC5G,OAAOC,iBAAiB,MAAmC,+BAA+B;AAG1F,OAAOC,IAAI,MAAM,SAAS;AAwB1B,IAAMC,MAAkB,gBAAGP,KAAK,CAACQ,UAAU,CAAiC,UAAAC,IAAA,EAMzEC,GAAG;EAAA,IALJC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACVC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IACDC,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAAA,oBAERjB,KAAA,CAAAkB,aAAA,CAACf,UAAU,EAAAgB,QAAA;IACTL,IAAI,EAAEA,IAAgC,CAAC;EAAA,GACnCC,KAAK;IACTK,SAAS,EAAElB,UAAU,CAACa,KAAK,CAACK,SAAS,CAAE;IACvCV,GAAG,EAAEA;EAAI,IAERG,UAAU,iBAAIb,KAAA,CAAAkB,aAAA,CAACZ,IAAI;IAACc,SAAS,EAAC,iBAAiB;IAACN,IAAI,EAAEA,IAAK;IAACO,GAAG,EAAER;EAAW,CAAE,CAAC,EAC/EF,QAAQ,EACRC,SAAS,iBAAIZ,KAAA,CAAAkB,aAAA,CAACZ,IAAI;IAACc,SAAS,EAAC,gBAAgB;IAACN,IAAI,EAAEA,IAAK;IAACO,GAAG,EAAET;EAAU,CAAE,CAClE,CAAC;AAAA,CACd,CAAC;AAEFL,MAAM,CAACe,SAAS,GAAG;EACjB;EACAF,SAAS,EAAEnB,SAAS,CAACsB,MAAM;EAC3B;EACAC,QAAQ,EAAEvB,SAAS,CAACwB,IAAI;EACxB;EACAd,QAAQ,EAAEV,SAAS,CAACyB,IAAI,CAACC,UAAU;EACnC;AACF;EACEC,OAAO,EAAE3B,SAAS,CAAC4B,IAAI;EACvB;AACF;AACA;EACEC,SAAS,EAAE7B,SAAS,CAAC4B,IAAI;EACzB;EACAE,IAAI,EAAE9B,SAAS,CAACsB,MAAM;EACtB;AACF;AACA;AACA;AACA;AACA;AACA;EACES,OAAO,EAAE/B,SAAS,CAACsB,MAAM;EACzB;AACF;EACEV,UAAU,EAAEZ,SAAS,CAACgC,WAA+C;EACrE;AACF;EACErB,SAAS,EAAEX,SAAS,CAACgC;EACrB;EACA;EACA;AACF,CAAC;AAED1B,MAAM,CAAC2B,YAAY,GAAAC,aAAA,CAAAA,aAAA,KACd5B,MAAM,CAAC2B,YAAY;EACtBvB,QAAQ,EAAEyB,SAAS;EACnBhB,SAAS,EAAEgB,SAAS;EACpBvB,UAAU,EAAEuB,SAAS;EACrBxB,SAAS,EAAEwB,SAAS;EACpBZ,QAAQ,EAAE;AAAK,EAChB;;AAED;AACA;AACA;AACA;AACA;;AAMA,IAAMa,WAAyD,gBAC7DrC,KAAK,CAACQ,UAAU,CAAsC,UAAA8B,KAAA,EAAqB5B,GAAG;EAAA,IAArBI,IAAI,GAAAwB,KAAA,CAAJxB,IAAI;IAAKC,KAAK,GAAAC,wBAAA,CAAAsB,KAAA,EAAAC,UAAA;EAAA,oBACrEvC,KAAA,CAAAkB,aAAA,CAACd,eAAe,EAAAe,QAAA;IAACL,IAAI,EAAEA;EAAoB,GAAKC,KAAK;IAAEL,GAAG,EAAEA;EAAI,EAAE,CAAC;AAAA,CACpE,CACF;AAED2B,WAAW,CAACf,SAAS,GAAG;EACtB;EACAkB,EAAE,EAAEvC,SAAS,CAACgC,WAAW;EACzB;EACAQ,IAAI,EAAExC,SAAS,CAACsB,MAAM;EACtB;EACAT,IAAI,EAAEb,SAAS,CAACyC,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;EACnD;EACAC,MAAM,EAAE1C,SAAS,CAACwB,IAAI;EACtB;EACAmB,QAAQ,EAAE3C,SAAS,CAACwB,IAAI;EACxB;EACAoB,QAAQ,EAAE5C,SAAS,CAACsB;AACtB,CAAC;AAEDc,WAAW,CAACH,YAAY,GAAG;EACzBM,EAAE,EAAE,KAAK;EACTC,IAAI,EAAE,OAAO;EACbE,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,KAAK;EACfC,QAAQ,EAAE,WAAW;EACrB/B,IAAI,EAAE;AACR,CAAC;AAED,IAAMgC,aAA6D,gBACjE9C,KAAK,CAACQ,UAAU,CAAwC,UAACO,KAAK,EAAEL,GAAG;EAAA,oBACjEV,KAAA,CAAAkB,aAAA,CAACb,iBAAiB,EAAAc,QAAA,KAAKJ,KAAK;IAAEL,GAAG,EAAEA;EAAI,EAAE,CAAC;AAAA,CAC3C,CACF;AAEDoC,aAAa,CAACxB,SAAS,GAAG;EACxB;EACAmB,IAAI,EAAExC,SAAS,CAACsB,MAAM;EACtB;EACAsB,QAAQ,EAAE5C,SAAS,CAACsB;AACtB,CAAC;AAEDuB,aAAa,CAACZ,YAAY,GAAG;EAC3BO,IAAI,EAAE,SAAS;EACfI,QAAQ,EAAE;AACZ,CAAC;AAED,eAAetC,MAAM;AACrB,SAAS8B,WAAW,EAAES,aAAa","ignoreList":[]}
@@ -1,14 +1,19 @@
1
1
  import React, { KeyboardEventHandler, MouseEventHandler } from 'react';
2
2
  import PropTypes from 'prop-types';
3
- export interface ChipIconProps {
3
+ import { STYLE_VARIANTS } from './constants';
4
+ export type ChipIconProps = {
4
5
  className: string;
5
- src: React.ReactElement | Function;
6
- onClick?: KeyboardEventHandler & MouseEventHandler;
7
- alt?: string;
8
- variant: string;
6
+ src: React.ComponentType;
7
+ variant: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS];
9
8
  disabled?: boolean;
10
- }
11
- declare function ChipIcon({ className, src, onClick, alt, variant, disabled, }: ChipIconProps): JSX.Element;
9
+ } & ({
10
+ onClick: KeyboardEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLButtonElement>;
11
+ alt: string;
12
+ } | {
13
+ onClick?: undefined;
14
+ alt?: undefined;
15
+ });
16
+ declare function ChipIcon({ className, src, onClick, alt, variant, disabled, }: ChipIconProps): React.JSX.Element;
12
17
  declare namespace ChipIcon {
13
18
  var propTypes: {
14
19
  className: PropTypes.Validator<string>;
@@ -21,7 +26,7 @@ declare namespace ChipIcon {
21
26
  var defaultProps: {
22
27
  onClick: undefined;
23
28
  alt: undefined;
24
- variant: any;
29
+ variant: "light";
25
30
  disabled: boolean;
26
31
  };
27
32
  }
@@ -1,9 +1,7 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import Icon from '../Icon';
4
- // @ts-ignore
5
4
  import IconButton from '../IconButton';
6
- // @ts-ignore
7
5
  import { STYLE_VARIANTS } from './constants';
8
6
  function ChipIcon(_ref) {
9
7
  var className = _ref.className,
@@ -1 +1 @@
1
- {"version":3,"file":"ChipIcon.js","names":["React","PropTypes","Icon","IconButton","STYLE_VARIANTS","ChipIcon","_ref","className","src","onClick","alt","variant","disabled","createElement","iconAs","invertColors","DARK","tabIndex","size","propTypes","string","isRequired","oneOfType","element","func","bool","defaultProps","undefined","LIGHT"],"sources":["../../src/Chip/ChipIcon.tsx"],"sourcesContent":["import React, { KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '../Icon';\n// @ts-ignore\nimport IconButton from '../IconButton';\n// @ts-ignore\nimport { STYLE_VARIANTS } from './constants';\n\nexport interface ChipIconProps {\n className: string,\n src: React.ReactElement | Function,\n onClick?: KeyboardEventHandler & MouseEventHandler,\n alt?: string,\n variant: string,\n disabled?: boolean,\n}\n\nfunction ChipIcon({\n className, src, onClick, alt, variant, disabled,\n}: ChipIconProps) {\n if (onClick) {\n return (\n <IconButton\n className={className}\n src={src}\n onClick={onClick}\n iconAs={Icon}\n alt={alt}\n invertColors={variant === STYLE_VARIANTS.DARK}\n tabIndex={disabled ? -1 : 0}\n />\n );\n }\n\n return <Icon src={src} className={className} size=\"sm\" />;\n}\n\nChipIcon.propTypes = {\n className: PropTypes.string.isRequired,\n src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,\n onClick: PropTypes.func,\n alt: PropTypes.string,\n variant: PropTypes.string,\n disabled: PropTypes.bool,\n};\n\nChipIcon.defaultProps = {\n onClick: undefined,\n alt: undefined,\n variant: STYLE_VARIANTS.LIGHT,\n disabled: false,\n};\n\nexport default ChipIcon;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAmD,OAAO;AACtE,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,MAAM,SAAS;AAC1B;AACA,OAAOC,UAAU,MAAM,eAAe;AACtC;AACA,SAASC,cAAc,QAAQ,aAAa;AAW5C,SAASC,QAAQA,CAAAC,IAAA,EAEC;EAAA,IADhBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAEC,GAAG,GAAAJ,IAAA,CAAHI,GAAG;IAAEC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;EAE/C,IAAIH,OAAO,EAAE;IACX,oBACET,KAAA,CAAAa,aAAA,CAACV,UAAU;MACTI,SAAS,EAAEA,SAAU;MACrBC,GAAG,EAAEA,GAAI;MACTC,OAAO,EAAEA,OAAQ;MACjBK,MAAM,EAAEZ,IAAK;MACbQ,GAAG,EAAEA,GAAI;MACTK,YAAY,EAAEJ,OAAO,KAAKP,cAAc,CAACY,IAAK;MAC9CC,QAAQ,EAAEL,QAAQ,GAAG,CAAC,CAAC,GAAG;IAAE,CAC7B,CAAC;EAEN;EAEA,oBAAOZ,KAAA,CAAAa,aAAA,CAACX,IAAI;IAACM,GAAG,EAAEA,GAAI;IAACD,SAAS,EAAEA,SAAU;IAACW,IAAI,EAAC;EAAI,CAAE,CAAC;AAC3D;AAEAb,QAAQ,CAACc,SAAS,GAAG;EACnBZ,SAAS,EAAEN,SAAS,CAACmB,MAAM,CAACC,UAAU;EACtCb,GAAG,EAAEP,SAAS,CAACqB,SAAS,CAAC,CAACrB,SAAS,CAACsB,OAAO,EAAEtB,SAAS,CAACuB,IAAI,CAAC,CAAC,CAACH,UAAU;EACxEZ,OAAO,EAAER,SAAS,CAACuB,IAAI;EACvBd,GAAG,EAAET,SAAS,CAACmB,MAAM;EACrBT,OAAO,EAAEV,SAAS,CAACmB,MAAM;EACzBR,QAAQ,EAAEX,SAAS,CAACwB;AACtB,CAAC;AAEDpB,QAAQ,CAACqB,YAAY,GAAG;EACtBjB,OAAO,EAAEkB,SAAS;EAClBjB,GAAG,EAAEiB,SAAS;EACdhB,OAAO,EAAEP,cAAc,CAACwB,KAAK;EAC7BhB,QAAQ,EAAE;AACZ,CAAC;AAED,eAAeP,QAAQ","ignoreList":[]}
1
+ {"version":3,"file":"ChipIcon.js","names":["React","PropTypes","Icon","IconButton","STYLE_VARIANTS","ChipIcon","_ref","className","src","onClick","alt","variant","disabled","createElement","iconAs","invertColors","DARK","tabIndex","size","propTypes","string","isRequired","oneOfType","element","func","bool","defaultProps","undefined","LIGHT"],"sources":["../../src/Chip/ChipIcon.tsx"],"sourcesContent":["import React, { KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { STYLE_VARIANTS } from './constants';\n\nexport type ChipIconProps = {\n className: string,\n src: React.ComponentType,\n variant: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS],\n disabled?: boolean,\n} & (\n // Either _both_ onClick and alt are provided, or neither is:\n | { onClick: KeyboardEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLButtonElement>, alt: string }\n | { onClick?: undefined, alt?: undefined }\n);\n\nfunction ChipIcon({\n className, src, onClick, alt, variant, disabled,\n}: ChipIconProps) {\n if (onClick) {\n return (\n <IconButton\n className={className}\n src={src}\n onClick={onClick}\n iconAs={Icon}\n alt={alt}\n invertColors={variant === STYLE_VARIANTS.DARK}\n tabIndex={disabled ? -1 : 0}\n />\n );\n }\n\n return <Icon src={src} className={className} size=\"sm\" />;\n}\n\nChipIcon.propTypes = {\n className: PropTypes.string.isRequired,\n src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,\n onClick: PropTypes.func,\n alt: PropTypes.string,\n variant: PropTypes.string,\n disabled: PropTypes.bool,\n};\n\nChipIcon.defaultProps = {\n onClick: undefined,\n alt: undefined,\n variant: STYLE_VARIANTS.LIGHT,\n disabled: false,\n};\n\nexport default ChipIcon;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAmD,OAAO;AACtE,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,cAAc,QAAQ,aAAa;AAa5C,SAASC,QAAQA,CAAAC,IAAA,EAEC;EAAA,IADhBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAEC,GAAG,GAAAJ,IAAA,CAAHI,GAAG;IAAEC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;EAE/C,IAAIH,OAAO,EAAE;IACX,oBACET,KAAA,CAAAa,aAAA,CAACV,UAAU;MACTI,SAAS,EAAEA,SAAU;MACrBC,GAAG,EAAEA,GAAI;MACTC,OAAO,EAAEA,OAAQ;MACjBK,MAAM,EAAEZ,IAAK;MACbQ,GAAG,EAAEA,GAAI;MACTK,YAAY,EAAEJ,OAAO,KAAKP,cAAc,CAACY,IAAK;MAC9CC,QAAQ,EAAEL,QAAQ,GAAG,CAAC,CAAC,GAAG;IAAE,CAC7B,CAAC;EAEN;EAEA,oBAAOZ,KAAA,CAAAa,aAAA,CAACX,IAAI;IAACM,GAAG,EAAEA,GAAI;IAACD,SAAS,EAAEA,SAAU;IAACW,IAAI,EAAC;EAAI,CAAE,CAAC;AAC3D;AAEAb,QAAQ,CAACc,SAAS,GAAG;EACnBZ,SAAS,EAAEN,SAAS,CAACmB,MAAM,CAACC,UAAU;EACtCb,GAAG,EAAEP,SAAS,CAACqB,SAAS,CAAC,CAACrB,SAAS,CAACsB,OAAO,EAAEtB,SAAS,CAACuB,IAAI,CAAC,CAAC,CAACH,UAAU;EACxEZ,OAAO,EAAER,SAAS,CAACuB,IAAI;EACvBd,GAAG,EAAET,SAAS,CAACmB,MAAM;EACrBT,OAAO,EAAEV,SAAS,CAACmB,MAAM;EACzBR,QAAQ,EAAEX,SAAS,CAACwB;AACtB,CAAC;AAEDpB,QAAQ,CAACqB,YAAY,GAAG;EACtBjB,OAAO,EAAEkB,SAAS;EAClBjB,GAAG,EAAEiB,SAAS;EACdhB,OAAO,EAAEP,cAAc,CAACwB,KAAK;EAC7BhB,QAAQ,EAAE;AACZ,CAAC;AAED,eAAeP,QAAQ","ignoreList":[]}
@@ -0,0 +1,4 @@
1
+ export declare const STYLE_VARIANTS: {
2
+ readonly DARK: "dark";
3
+ readonly LIGHT: "light";
4
+ };
@@ -1,5 +1,6 @@
1
1
  // eslint-disable-next-line import/prefer-default-export
2
- export const STYLE_VARIANTS = {
2
+ export var STYLE_VARIANTS = {
3
3
  DARK: 'dark',
4
- LIGHT: 'light',
4
+ LIGHT: 'light'
5
5
  };
6
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","names":["STYLE_VARIANTS","DARK","LIGHT"],"sources":["../../src/Chip/constants.ts"],"sourcesContent":["// eslint-disable-next-line import/prefer-default-export\nexport const STYLE_VARIANTS = {\n DARK: 'dark',\n LIGHT: 'light',\n} as const;\n"],"mappings":"AAAA;AACA,OAAO,IAAMA,cAAc,GAAG;EAC5BC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE;AACT,CAAU","ignoreList":[]}
@@ -1,13 +1,14 @@
1
1
  import React, { KeyboardEventHandler, MouseEventHandler } from 'react';
2
+ import { STYLE_VARIANTS } from './constants';
2
3
  export declare const CHIP_PGN_CLASS = "pgn__chip";
3
4
  export interface IChip {
4
5
  children: React.ReactNode;
5
6
  onClick?: KeyboardEventHandler & MouseEventHandler;
6
7
  className?: string;
7
- variant?: string;
8
- iconBefore?: React.ReactElement | Function;
8
+ variant?: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS];
9
+ iconBefore?: React.ComponentType;
9
10
  iconBeforeAlt?: string;
10
- iconAfter?: React.ReactElement | Function;
11
+ iconAfter?: React.ComponentType;
11
12
  iconAfterAlt?: string;
12
13
  onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler;
13
14
  onIconAfterClick?: KeyboardEventHandler & MouseEventHandler;
@@ -7,9 +7,7 @@ import PropTypes from 'prop-types';
7
7
  import classNames from 'classnames';
8
8
  // @ts-ignore
9
9
  import { requiredWhen } from '../utils/propTypes';
10
- // @ts-ignore
11
10
  import { STYLE_VARIANTS } from './constants';
12
- // @ts-ignore
13
11
  import ChipIcon from './ChipIcon';
14
12
  export var CHIP_PGN_CLASS = 'pgn__chip';
15
13
  var Chip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -79,7 +77,7 @@ Chip.propTypes = {
79
77
  *
80
78
  * `import { Check } from '@openedx/paragon/icons';`
81
79
  */
82
- iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
80
+ iconBefore: PropTypes.elementType,
83
81
  /** Specifies icon alt text. */
84
82
  iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),
85
83
  /** A click handler for the `Chip` icon before. */
@@ -90,7 +88,7 @@ Chip.propTypes = {
90
88
  *
91
89
  * `import { Check } from '@openedx/paragon/icons';`
92
90
  */
93
- iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
91
+ iconAfter: PropTypes.elementType,
94
92
  /** Specifies icon alt text. */
95
93
  iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),
96
94
  /** A click handler for the `Chip` icon after. */
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","classNames","requiredWhen","STYLE_VARIANTS","ChipIcon","CHIP_PGN_CLASS","Chip","forwardRef","_ref","ref","children","className","variant","iconBefore","iconBeforeAlt","iconAfter","iconAfterAlt","onIconBeforeClick","onIconAfterClick","disabled","isSelected","onClick","props","_objectWithoutProperties","_excluded","hasInteractiveIcons","isChipInteractive","interactionProps","onKeyPress","tabIndex","role","createElement","_extends","concat","selected","interactive","src","alt","propTypes","node","isRequired","string","oneOf","bool","func","oneOfType","element","defaultProps","undefined","LIGHT"],"sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n// @ts-ignore\nimport { requiredWhen } from '../utils/propTypes';\n// @ts-ignore\nimport { STYLE_VARIANTS } from './constants';\n// @ts-ignore\nimport ChipIcon from './ChipIcon';\n\nexport const CHIP_PGN_CLASS = 'pgn__chip';\n\nexport interface IChip {\n children: React.ReactNode,\n onClick?: KeyboardEventHandler & MouseEventHandler,\n className?: string,\n variant?: string,\n iconBefore?: React.ReactElement | Function,\n iconBeforeAlt?: string,\n iconAfter?: React.ReactElement | Function,\n iconAfterAlt?: string,\n onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,\n onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,\n disabled?: boolean,\n isSelected?: boolean,\n}\n\nconst Chip = React.forwardRef(({\n children,\n className,\n variant,\n iconBefore,\n iconBeforeAlt,\n iconAfter,\n iconAfterAlt,\n onIconBeforeClick,\n onIconAfterClick,\n disabled,\n isSelected,\n onClick,\n ...props\n}: IChip, ref: ForwardedRef<HTMLDivElement>) => {\n const hasInteractiveIcons = !!(onIconBeforeClick || onIconAfterClick);\n const isChipInteractive = !hasInteractiveIcons && !!onClick;\n\n const interactionProps = isChipInteractive ? {\n onClick,\n onKeyPress: onClick,\n tabIndex: 0,\n role: 'button',\n } : {};\n\n return (\n <div\n className={classNames(\n CHIP_PGN_CLASS,\n `pgn__chip-${variant}`,\n className,\n { disabled, selected: isSelected, interactive: isChipInteractive },\n )}\n ref={ref}\n {...interactionProps}\n {...props}\n >\n {iconBefore && (\n <ChipIcon\n className={`${CHIP_PGN_CLASS}__icon-before`}\n src={iconBefore}\n onClick={onIconBeforeClick}\n alt={iconBeforeAlt}\n variant={variant}\n disabled={disabled}\n />\n )}\n <div\n className={classNames(`${CHIP_PGN_CLASS}__label`, {\n 'p-before': iconBefore,\n 'p-after': iconAfter,\n })}\n >\n {children}\n </div>\n {iconAfter && (\n <ChipIcon\n className={`${CHIP_PGN_CLASS}__icon-after`}\n src={iconAfter}\n onClick={onIconAfterClick}\n alt={iconAfterAlt}\n variant={variant}\n disabled={disabled}\n />\n )}\n </div>\n );\n});\n\nChip.propTypes = {\n /** Specifies the content of the `Chip`. */\n children: PropTypes.node.isRequired,\n /** Specifies an additional `className` to add to the base element. */\n className: PropTypes.string,\n /** The `Chip` style variant to use. */\n variant: PropTypes.oneOf(['light', 'dark']),\n /** Disables the `Chip`. */\n disabled: PropTypes.bool,\n /** Click handler for the whole Chip, has effect only when Chip does not have any interactive icons. */\n onClick: PropTypes.func,\n /**\n * An icon component to render before the content.\n * Example import of a Paragon icon component:\n *\n * `import { Check } from '@openedx/paragon/icons';`\n */\n iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n /** Specifies icon alt text. */\n iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),\n /** A click handler for the `Chip` icon before. */\n onIconBeforeClick: PropTypes.func,\n /**\n * An icon component to render before after the content.\n * Example import of a Paragon icon component:\n *\n * `import { Check } from '@openedx/paragon/icons';`\n */\n iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n /** Specifies icon alt text. */\n iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),\n /** A click handler for the `Chip` icon after. */\n onIconAfterClick: PropTypes.func,\n /** Indicates if `Chip` has been selected. */\n isSelected: PropTypes.bool,\n};\n\nChip.defaultProps = {\n className: undefined,\n variant: STYLE_VARIANTS.LIGHT,\n disabled: false,\n onClick: undefined,\n iconBefore: undefined,\n iconAfter: undefined,\n onIconBeforeClick: undefined,\n onIconAfterClick: undefined,\n isSelected: false,\n iconAfterAlt: undefined,\n iconBeforeAlt: undefined,\n};\n\nexport default Chip;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","classNames","requiredWhen","STYLE_VARIANTS","ChipIcon","CHIP_PGN_CLASS","Chip","forwardRef","_ref","ref","children","className","variant","iconBefore","iconBeforeAlt","iconAfter","iconAfterAlt","onIconBeforeClick","onIconAfterClick","disabled","isSelected","onClick","props","_objectWithoutProperties","_excluded","hasInteractiveIcons","isChipInteractive","interactionProps","onKeyPress","tabIndex","role","createElement","_extends","concat","selected","interactive","src","alt","propTypes","node","isRequired","string","oneOf","bool","func","elementType","defaultProps","undefined","LIGHT"],"sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes, { type Requireable } from 'prop-types';\nimport classNames from 'classnames';\n// @ts-ignore\nimport { requiredWhen } from '../utils/propTypes';\nimport { STYLE_VARIANTS } from './constants';\nimport ChipIcon from './ChipIcon';\n\nexport const CHIP_PGN_CLASS = 'pgn__chip';\n\nexport interface IChip {\n children: React.ReactNode,\n onClick?: KeyboardEventHandler & MouseEventHandler,\n className?: string,\n variant?: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS],\n iconBefore?: React.ComponentType,\n iconBeforeAlt?: string,\n iconAfter?: React.ComponentType,\n iconAfterAlt?: string,\n onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,\n onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,\n disabled?: boolean,\n isSelected?: boolean,\n}\n\nconst Chip = React.forwardRef(({\n children,\n className,\n variant,\n iconBefore,\n iconBeforeAlt,\n iconAfter,\n iconAfterAlt,\n onIconBeforeClick,\n onIconAfterClick,\n disabled,\n isSelected,\n onClick,\n ...props\n}: IChip, ref: ForwardedRef<HTMLDivElement>) => {\n const hasInteractiveIcons = !!(onIconBeforeClick || onIconAfterClick);\n const isChipInteractive = !hasInteractiveIcons && !!onClick;\n\n const interactionProps = isChipInteractive ? {\n onClick,\n onKeyPress: onClick,\n tabIndex: 0,\n role: 'button',\n } : {};\n\n return (\n <div\n className={classNames(\n CHIP_PGN_CLASS,\n `pgn__chip-${variant}`,\n className,\n { disabled, selected: isSelected, interactive: isChipInteractive },\n )}\n ref={ref}\n {...interactionProps}\n {...props}\n >\n {iconBefore && (\n <ChipIcon\n className={`${CHIP_PGN_CLASS}__icon-before`}\n src={iconBefore}\n onClick={onIconBeforeClick}\n alt={iconBeforeAlt}\n variant={variant}\n disabled={disabled}\n />\n )}\n <div\n className={classNames(`${CHIP_PGN_CLASS}__label`, {\n 'p-before': iconBefore,\n 'p-after': iconAfter,\n })}\n >\n {children}\n </div>\n {iconAfter && (\n <ChipIcon\n className={`${CHIP_PGN_CLASS}__icon-after`}\n src={iconAfter}\n onClick={onIconAfterClick}\n alt={iconAfterAlt}\n variant={variant}\n disabled={disabled}\n />\n )}\n </div>\n );\n});\n\nChip.propTypes = {\n /** Specifies the content of the `Chip`. */\n children: PropTypes.node.isRequired,\n /** Specifies an additional `className` to add to the base element. */\n className: PropTypes.string,\n /** The `Chip` style variant to use. */\n variant: PropTypes.oneOf(['light', 'dark']),\n /** Disables the `Chip`. */\n disabled: PropTypes.bool,\n /** Click handler for the whole Chip, has effect only when Chip does not have any interactive icons. */\n onClick: PropTypes.func,\n /**\n * An icon component to render before the content.\n * Example import of a Paragon icon component:\n *\n * `import { Check } from '@openedx/paragon/icons';`\n */\n iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,\n /** Specifies icon alt text. */\n iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),\n /** A click handler for the `Chip` icon before. */\n onIconBeforeClick: PropTypes.func,\n /**\n * An icon component to render before after the content.\n * Example import of a Paragon icon component:\n *\n * `import { Check } from '@openedx/paragon/icons';`\n */\n iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,\n /** Specifies icon alt text. */\n iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),\n /** A click handler for the `Chip` icon after. */\n onIconAfterClick: PropTypes.func,\n /** Indicates if `Chip` has been selected. */\n isSelected: PropTypes.bool,\n};\n\nChip.defaultProps = {\n className: undefined,\n variant: STYLE_VARIANTS.LIGHT,\n disabled: false,\n onClick: undefined,\n iconBefore: undefined,\n iconAfter: undefined,\n onIconBeforeClick: undefined,\n onIconAfterClick: undefined,\n isSelected: false,\n iconAfterAlt: undefined,\n iconBeforeAlt: undefined,\n};\n\nexport default Chip;\n"],"mappings":"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","ignoreList":[]}
@@ -14,9 +14,7 @@ import { useIntl } from 'react-intl';
14
14
  import classNames from 'classnames';
15
15
  // @ts-ignore
16
16
  import { OverflowScroll, OverflowScrollContext } from '../OverflowScroll';
17
- // @ts-ignore
18
17
  import IconButton from '../IconButton';
19
- // @ts-ignore
20
18
  import Icon from '../Icon';
21
19
  // @ts-ignore
22
20
  import { ArrowForward, ArrowBack } from '../../icons';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","useIntl","classNames","OverflowScroll","OverflowScrollContext","IconButton","Icon","ArrowForward","ArrowBack","messages","Chip","ChipCarousel","forwardRef","_ref","ref","className","items","ariaLabel","disableOpacityMasks","onScrollPrevious","onScrollNext","_ref$canScrollHorizon","canScrollHorizontal","_ref$offset","offset","_ref$offsetType","offsetType","gap","props","_objectWithoutProperties","_excluded","intl","createElement","_extends","concat","hasInteractiveChildren","disableScroll","Consumer","_ref2","setOverflowRef","isScrolledToStart","isScrolledToEnd","scrollToPrevious","scrollToNext","Fragment","size","src","iconAs","alt","formatMessage","onClick","Items","map","item","id","_ref3","children","_objectSpread","key","propTypes","string","isRequired","arrayOf","element","bool","func","oneOfType","number","oneOf","defaultProps","undefined"],"sources":["../../src/ChipCarousel/index.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useIntl } from 'react-intl';\nimport classNames from 'classnames';\n// @ts-ignore\nimport { OverflowScroll, OverflowScrollContext } from '../OverflowScroll';\n// @ts-ignore\nimport IconButton from '../IconButton';\n// @ts-ignore\nimport Icon from '../Icon';\n// @ts-ignore\nimport { ArrowForward, ArrowBack } from '../../icons';\n// @ts-ignore\nimport messages from './messages';\nimport Chip from '../Chip';\n\nexport interface OverflowScrollContextProps {\n setOverflowRef: () => void,\n isScrolledToStart: boolean,\n isScrolledToEnd: boolean,\n scrollToPrevious: () => void,\n scrollToNext: () => void,\n}\n\nexport interface ChipCarouselProps {\n className?: string;\n items: Array<React.ReactElement>;\n ariaLabel: string;\n disableOpacityMasks?: boolean;\n onScrollPrevious?: () => void;\n onScrollNext?: () => void;\n canScrollHorizontal?: boolean;\n offset?: number | string;\n offsetType?: 'percentage' | 'fixed';\n gap?: number;\n}\n\nconst ChipCarousel = React.forwardRef(({\n className,\n items,\n ariaLabel,\n disableOpacityMasks,\n onScrollPrevious,\n onScrollNext,\n canScrollHorizontal = false,\n offset = 120,\n offsetType = 'fixed',\n gap,\n ...props\n}: ChipCarouselProps, ref: ForwardedRef<HTMLDivElement>) => {\n const intl = useIntl();\n\n return (\n <div\n className={classNames('pgn__chip-carousel', className, gap ? `pgn__chip-carousel-gap__${gap}` : '')}\n {...props}\n ref={ref}\n >\n <OverflowScroll\n ariaLabel={ariaLabel}\n hasInteractiveChildren\n disableScroll={!canScrollHorizontal}\n disableOpacityMasks={disableOpacityMasks}\n onScrollPrevious={onScrollPrevious}\n onScrollNext={onScrollNext}\n offset={offset}\n offsetType={offsetType}\n >\n <OverflowScrollContext.Consumer>\n {({\n setOverflowRef,\n isScrolledToStart,\n isScrolledToEnd,\n scrollToPrevious,\n scrollToNext,\n }: OverflowScrollContextProps) => (\n <>\n <>\n {!isScrolledToStart && (\n <IconButton\n size=\"sm\"\n className=\"pgn__chip-carousel__left-control\"\n src={ArrowBack}\n iconAs={Icon}\n alt={intl.formatMessage(messages.scrollToPrevious)}\n onClick={scrollToPrevious}\n />\n )}\n {!isScrolledToEnd && (\n <IconButton\n size=\"sm\"\n className=\"pgn__chip-carousel__right-control\"\n src={ArrowForward}\n iconAs={Icon}\n alt={intl.formatMessage(messages.scrollToNext)}\n onClick={scrollToNext}\n />\n )}\n </>\n <div ref={setOverflowRef} className=\"d-flex\">\n <OverflowScroll.Items>\n {items?.map((item, id) => {\n const { children } = item?.props || {};\n if (!children) {\n return null;\n }\n // eslint-disable-next-line react/no-array-index-key\n return React.createElement(Chip, { ...item.props, key: id });\n })}\n </OverflowScroll.Items>\n </div>\n </>\n )}\n </OverflowScrollContext.Consumer>\n </OverflowScroll>\n </div>\n );\n});\n\nChipCarousel.propTypes = {\n /** Text describing the ChipCarousel for screen readers. */\n ariaLabel: PropTypes.string.isRequired,\n /** Specifies class name for the ChipCarousel. */\n className: PropTypes.string,\n /** Specifies array of `Chip` elements to be rendered inside the carousel. */\n // @ts-ignore\n items: PropTypes.arrayOf(PropTypes.element).isRequired,\n /** Whether the default opacity masks should be shown at the start/end, if applicable. */\n disableOpacityMasks: PropTypes.bool,\n /** Callback function for when the user scrolls to the previous element. */\n onScrollPrevious: PropTypes.func,\n /** Callback function for when the user scrolls to the next element. */\n onScrollNext: PropTypes.func,\n /** Whether users can scroll within the overflow container. */\n canScrollHorizontal: PropTypes.bool,\n /** A value specifying the distance the scroll should move. */\n offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n /** Type of offset value (percentage or fixed). */\n offsetType: PropTypes.oneOf(['percentage', 'fixed']),\n /**\n * Specifies inner space between children blocks.\n *\n * Valid values are based on `the spacing classes`:\n * `0, 0.5, ... 6`.\n */\n gap: PropTypes.number,\n};\n\nChipCarousel.defaultProps = {\n className: undefined,\n disableOpacityMasks: undefined,\n onScrollPrevious: undefined,\n onScrollNext: undefined,\n canScrollHorizontal: false,\n offset: 120,\n offsetType: 'fixed',\n gap: 3,\n};\n\nexport default ChipCarousel;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","useIntl","classNames","OverflowScroll","OverflowScrollContext","IconButton","Icon","ArrowForward","ArrowBack","messages","Chip","ChipCarousel","forwardRef","_ref","ref","className","items","ariaLabel","disableOpacityMasks","onScrollPrevious","onScrollNext","_ref$canScrollHorizon","canScrollHorizontal","_ref$offset","offset","_ref$offsetType","offsetType","gap","props","_objectWithoutProperties","_excluded","intl","createElement","_extends","concat","hasInteractiveChildren","disableScroll","Consumer","_ref2","setOverflowRef","isScrolledToStart","isScrolledToEnd","scrollToPrevious","scrollToNext","Fragment","size","src","iconAs","alt","formatMessage","onClick","Items","map","item","id","_ref3","children","_objectSpread","key","propTypes","string","isRequired","arrayOf","element","bool","func","oneOfType","number","oneOf","defaultProps","undefined"],"sources":["../../src/ChipCarousel/index.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useIntl } from 'react-intl';\nimport classNames from 'classnames';\n// @ts-ignore\nimport { OverflowScroll, OverflowScrollContext } from '../OverflowScroll';\nimport IconButton from '../IconButton';\nimport Icon from '../Icon';\n// @ts-ignore\nimport { ArrowForward, ArrowBack } from '../../icons';\n// @ts-ignore\nimport messages from './messages';\nimport Chip from '../Chip';\n\nexport interface OverflowScrollContextProps {\n setOverflowRef: () => void,\n isScrolledToStart: boolean,\n isScrolledToEnd: boolean,\n scrollToPrevious: () => void,\n scrollToNext: () => void,\n}\n\nexport interface ChipCarouselProps {\n className?: string;\n items: Array<React.ReactElement>;\n ariaLabel: string;\n disableOpacityMasks?: boolean;\n onScrollPrevious?: () => void;\n onScrollNext?: () => void;\n canScrollHorizontal?: boolean;\n offset?: number | string;\n offsetType?: 'percentage' | 'fixed';\n gap?: number;\n}\n\nconst ChipCarousel = React.forwardRef(({\n className,\n items,\n ariaLabel,\n disableOpacityMasks,\n onScrollPrevious,\n onScrollNext,\n canScrollHorizontal = false,\n offset = 120,\n offsetType = 'fixed',\n gap,\n ...props\n}: ChipCarouselProps, ref: ForwardedRef<HTMLDivElement>) => {\n const intl = useIntl();\n\n return (\n <div\n className={classNames('pgn__chip-carousel', className, gap ? `pgn__chip-carousel-gap__${gap}` : '')}\n {...props}\n ref={ref}\n >\n <OverflowScroll\n ariaLabel={ariaLabel}\n hasInteractiveChildren\n disableScroll={!canScrollHorizontal}\n disableOpacityMasks={disableOpacityMasks}\n onScrollPrevious={onScrollPrevious}\n onScrollNext={onScrollNext}\n offset={offset}\n offsetType={offsetType}\n >\n <OverflowScrollContext.Consumer>\n {({\n setOverflowRef,\n isScrolledToStart,\n isScrolledToEnd,\n scrollToPrevious,\n scrollToNext,\n }: OverflowScrollContextProps) => (\n <>\n <>\n {!isScrolledToStart && (\n <IconButton\n size=\"sm\"\n className=\"pgn__chip-carousel__left-control\"\n src={ArrowBack}\n iconAs={Icon}\n alt={intl.formatMessage(messages.scrollToPrevious)}\n onClick={scrollToPrevious}\n />\n )}\n {!isScrolledToEnd && (\n <IconButton\n size=\"sm\"\n className=\"pgn__chip-carousel__right-control\"\n src={ArrowForward}\n iconAs={Icon}\n alt={intl.formatMessage(messages.scrollToNext)}\n onClick={scrollToNext}\n />\n )}\n </>\n <div ref={setOverflowRef} className=\"d-flex\">\n <OverflowScroll.Items>\n {items?.map((item, id) => {\n const { children } = item?.props || {};\n if (!children) {\n return null;\n }\n // eslint-disable-next-line react/no-array-index-key\n return React.createElement(Chip, { ...item.props, key: id });\n })}\n </OverflowScroll.Items>\n </div>\n </>\n )}\n </OverflowScrollContext.Consumer>\n </OverflowScroll>\n </div>\n );\n});\n\nChipCarousel.propTypes = {\n /** Text describing the ChipCarousel for screen readers. */\n ariaLabel: PropTypes.string.isRequired,\n /** Specifies class name for the ChipCarousel. */\n className: PropTypes.string,\n /** Specifies array of `Chip` elements to be rendered inside the carousel. */\n // @ts-ignore\n items: PropTypes.arrayOf(PropTypes.element).isRequired,\n /** Whether the default opacity masks should be shown at the start/end, if applicable. */\n disableOpacityMasks: PropTypes.bool,\n /** Callback function for when the user scrolls to the previous element. */\n onScrollPrevious: PropTypes.func,\n /** Callback function for when the user scrolls to the next element. */\n onScrollNext: PropTypes.func,\n /** Whether users can scroll within the overflow container. */\n canScrollHorizontal: PropTypes.bool,\n /** A value specifying the distance the scroll should move. */\n offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n /** Type of offset value (percentage or fixed). */\n offsetType: PropTypes.oneOf(['percentage', 'fixed']),\n /**\n * Specifies inner space between children blocks.\n *\n * Valid values are based on `the spacing classes`:\n * `0, 0.5, ... 6`.\n */\n gap: PropTypes.number,\n};\n\nChipCarousel.defaultProps = {\n className: undefined,\n disableOpacityMasks: undefined,\n onScrollPrevious: undefined,\n onScrollNext: undefined,\n canScrollHorizontal: false,\n offset: 120,\n offsetType: 'fixed',\n gap: 3,\n};\n\nexport default ChipCarousel;\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ export declare const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = "in a new tab";
3
+ export declare const HYPER_LINK_EXTERNAL_LINK_TITLE = "Opens in a new tab";
4
+ interface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
5
+ /** specifies the URL */
6
+ destination: string;
7
+ /** Content of the hyperlink */
8
+ children: React.ReactNode;
9
+ /** Custom class names for the hyperlink */
10
+ className?: string;
11
+ /** Alt text for the icon indicating that this link opens in a new tab, if target="_blank". e.g. _("in a new tab") */
12
+ externalLinkAlternativeText?: string;
13
+ /** Tooltip text for the "opens in new tab" icon, if target="_blank". e.g. _("Opens in a new tab"). */
14
+ externalLinkTitle?: string;
15
+ /** type of hyperlink */
16
+ variant?: 'default' | 'muted' | 'brand';
17
+ /** Display the link with an underline. By default, it is only underlined on hover. */
18
+ isInline?: boolean;
19
+ /** specify if we need to show launch Icon. By default, it will be visible. */
20
+ showLaunchIcon?: boolean;
21
+ target?: '_blank' | '_self';
22
+ }
23
+ declare const Hyperlink: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
24
+ export default Hyperlink;
@@ -5,24 +5,22 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
5
5
  import React from 'react';
6
6
  import PropTypes from 'prop-types';
7
7
  import classNames from 'classnames';
8
- import isRequiredIf from 'react-proptype-conditional-require';
9
8
  import { Launch } from '../../icons';
10
9
  import Icon from '../Icon';
11
- import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
12
10
  export var HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';
13
11
  export var HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';
14
- var Hyperlink = /*#__PURE__*/React.forwardRef(function (props, ref) {
15
- var className = props.className,
16
- destination = props.destination,
17
- children = props.children,
18
- target = props.target,
19
- onClick = props.onClick,
20
- externalLinkAlternativeText = props.externalLinkAlternativeText,
21
- externalLinkTitle = props.externalLinkTitle,
22
- variant = props.variant,
23
- isInline = props.isInline,
24
- showLaunchIcon = props.showLaunchIcon,
25
- attrs = _objectWithoutProperties(props, _excluded);
12
+ var Hyperlink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
13
+ var className = _ref.className,
14
+ destination = _ref.destination,
15
+ children = _ref.children,
16
+ target = _ref.target,
17
+ onClick = _ref.onClick,
18
+ externalLinkAlternativeText = _ref.externalLinkAlternativeText,
19
+ externalLinkTitle = _ref.externalLinkTitle,
20
+ variant = _ref.variant,
21
+ isInline = _ref.isInline,
22
+ showLaunchIcon = _ref.showLaunchIcon,
23
+ attrs = _objectWithoutProperties(_ref, _excluded);
26
24
  var externalLinkIcon;
27
25
  if (target === '_blank') {
28
26
  var generateRel = function generateRel() {
@@ -88,30 +86,20 @@ Hyperlink.propTypes = {
88
86
  * loaded into the same browsing context as the current one.
89
87
  * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent
90
88
  * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
91
- */
92
- target: PropTypes.string,
89
+ */
90
+ target: PropTypes.oneOf(['_blank', '_self']),
93
91
  /** specifies the callback function when the link is clicked */
94
92
  onClick: PropTypes.func,
95
- /** specifies the text for links with a `_blank` target (which loads the URL in a new browsing context). */
96
- externalLinkAlternativeText: isRequiredIf(PropTypes.string, function (props) {
97
- return props.target === '_blank';
98
- }),
99
- /** specifies the title for links with a `_blank` target (which loads the URL in a new browsing context). */
100
- externalLinkTitle: isRequiredIf(PropTypes.string, function (props) {
101
- return props.target === '_blank';
102
- }),
93
+ /** Alt text for the icon indicating that this link opens in a new tab, if target="_blank". e.g. _("in a new tab") */
94
+ externalLinkAlternativeText: PropTypes.string,
95
+ /** Tooltip text for the "opens in new tab" icon, if target="_blank". e.g. _("Opens in a new tab"). */
96
+ externalLinkTitle: PropTypes.string,
103
97
  /** type of hyperlink */
104
98
  variant: PropTypes.oneOf(['default', 'muted', 'brand']),
105
- /** specify the link style. By default, it will be underlined. */
99
+ /** Display the link with an underline. By default, it is only underlined on hover. */
106
100
  isInline: PropTypes.bool,
107
101
  /** specify if we need to show launch Icon. By default, it will be visible. */
108
102
  showLaunchIcon: PropTypes.bool
109
103
  };
110
- export default withDeprecatedProps(Hyperlink, 'Hyperlink', {
111
- /** specifies the text or element that a URL should be associated with */
112
- content: {
113
- deprType: DeprTypes.MOVED,
114
- newName: 'children'
115
- }
116
- });
104
+ export default Hyperlink;
117
105
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","classNames","isRequiredIf","Launch","Icon","withDeprecatedProps","DeprTypes","HYPER_LINK_EXTERNAL_LINK_ALT_TEXT","HYPER_LINK_EXTERNAL_LINK_TITLE","Hyperlink","forwardRef","props","ref","className","destination","children","target","onClick","externalLinkAlternativeText","externalLinkTitle","variant","isInline","showLaunchIcon","attrs","_objectWithoutProperties","_excluded","externalLinkIcon","generateRel","rel","includes","createElement","title","src","screenReaderText","style","height","width","_extends","concat","href","defaultProps","undefined","propTypes","string","isRequired","node","func","oneOf","bool","content","deprType","MOVED","newName"],"sources":["../../src/Hyperlink/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport isRequiredIf from 'react-proptype-conditional-require';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nexport const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';\nexport const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';\n\nconst Hyperlink = React.forwardRef((props, ref) => {\n const {\n className,\n destination,\n children,\n target,\n onClick,\n externalLinkAlternativeText,\n externalLinkTitle,\n variant,\n isInline,\n showLaunchIcon,\n ...attrs\n } = props;\n let externalLinkIcon;\n\n if (target === '_blank') {\n const generateRel = () => {\n let { rel } = attrs;\n if (!rel) {\n return 'noopener noreferrer';\n }\n if (!rel.includes('noopener')) {\n rel += ' noopener';\n }\n if (!rel.includes('noreferrer')) {\n rel += ' noreferrer';\n }\n return rel;\n };\n\n // Add this rel attribute to prevent Reverse Tabnabbing\n attrs.rel = generateRel();\n if (showLaunchIcon) {\n externalLinkIcon = (\n <span\n className=\"pgn__hyperlink__external-icon\"\n title={externalLinkTitle}\n >\n <Icon\n src={Launch}\n screenReaderText={externalLinkAlternativeText}\n style={{ height: '1em', width: '1em' }}\n data-testid=\"hyperlink-icon\"\n />\n </span>\n );\n }\n }\n\n return (\n <a\n ref={ref}\n className={classNames(\n 'pgn__hyperlink',\n `${variant}-link`,\n {\n 'standalone-link': !isInline,\n 'inline-link': isInline,\n },\n className,\n )}\n href={destination}\n target={target}\n onClick={onClick}\n {...attrs}\n >\n {children}\n {externalLinkIcon}\n </a>\n );\n});\n\nHyperlink.defaultProps = {\n className: undefined,\n target: '_self',\n onClick: () => {},\n externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,\n externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,\n variant: 'default',\n isInline: false,\n showLaunchIcon: true,\n};\n\nHyperlink.propTypes = {\n /** specifies the URL */\n destination: PropTypes.string.isRequired,\n /** Content of the hyperlink */\n children: PropTypes.node.isRequired,\n /** Custom class names for the hyperlink */\n className: PropTypes.string,\n /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n * loaded into the same browsing context as the current one.\n * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n */\n target: PropTypes.string,\n /** specifies the callback function when the link is clicked */\n onClick: PropTypes.func,\n /** specifies the text for links with a `_blank` target (which loads the URL in a new browsing context). */\n externalLinkAlternativeText: isRequiredIf(\n PropTypes.string,\n props => props.target === '_blank',\n ),\n /** specifies the title for links with a `_blank` target (which loads the URL in a new browsing context). */\n externalLinkTitle: isRequiredIf(\n PropTypes.string,\n props => props.target === '_blank',\n ),\n /** type of hyperlink */\n variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n /** specify the link style. By default, it will be underlined. */\n isInline: PropTypes.bool,\n /** specify if we need to show launch Icon. By default, it will be visible. */\n showLaunchIcon: PropTypes.bool,\n};\n\nexport default withDeprecatedProps(Hyperlink, 'Hyperlink', {\n /** specifies the text or element that a URL should be associated with */\n content: {\n deprType: DeprTypes.MOVED,\n newName: 'children',\n },\n});\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","classNames","Launch","Icon","HYPER_LINK_EXTERNAL_LINK_ALT_TEXT","HYPER_LINK_EXTERNAL_LINK_TITLE","Hyperlink","forwardRef","_ref","ref","className","destination","children","target","onClick","externalLinkAlternativeText","externalLinkTitle","variant","isInline","showLaunchIcon","attrs","_objectWithoutProperties","_excluded","externalLinkIcon","generateRel","rel","includes","createElement","title","src","screenReaderText","style","height","width","_extends","concat","href","defaultProps","undefined","propTypes","string","isRequired","node","oneOf","func","bool"],"sources":["../../src/Hyperlink/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n\nexport const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';\nexport const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';\n\ninterface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {\n /** specifies the URL */\n destination: string;\n /** Content of the hyperlink */\n children: React.ReactNode;\n /** Custom class names for the hyperlink */\n className?: string;\n /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n externalLinkAlternativeText?: string;\n /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n externalLinkTitle?: string;\n /** type of hyperlink */\n variant?: 'default' | 'muted' | 'brand';\n /** Display the link with an underline. By default, it is only underlined on hover. */\n isInline?: boolean;\n /** specify if we need to show launch Icon. By default, it will be visible. */\n showLaunchIcon?: boolean;\n target?: '_blank' | '_self';\n}\n\nconst Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({\n className,\n destination,\n children,\n target,\n onClick,\n externalLinkAlternativeText,\n externalLinkTitle,\n variant,\n isInline,\n showLaunchIcon,\n ...attrs\n}, ref) => {\n let externalLinkIcon;\n\n if (target === '_blank') {\n const generateRel = () => {\n let { rel } = attrs;\n if (!rel) {\n return 'noopener noreferrer';\n }\n if (!rel.includes('noopener')) {\n rel += ' noopener';\n }\n if (!rel.includes('noreferrer')) {\n rel += ' noreferrer';\n }\n return rel;\n };\n\n // Add this rel attribute to prevent Reverse Tabnabbing\n attrs.rel = generateRel();\n if (showLaunchIcon) {\n externalLinkIcon = (\n <span\n className=\"pgn__hyperlink__external-icon\"\n title={externalLinkTitle}\n >\n <Icon\n src={Launch}\n screenReaderText={externalLinkAlternativeText}\n style={{ height: '1em', width: '1em' }}\n data-testid=\"hyperlink-icon\"\n />\n </span>\n );\n }\n }\n\n return (\n <a\n ref={ref}\n className={classNames(\n 'pgn__hyperlink',\n `${variant}-link`,\n {\n 'standalone-link': !isInline,\n 'inline-link': isInline,\n },\n className,\n )}\n href={destination}\n target={target}\n onClick={onClick}\n {...attrs}\n >\n {children}\n {externalLinkIcon}\n </a>\n );\n});\n\nHyperlink.defaultProps = {\n className: undefined,\n target: '_self',\n onClick: () => {},\n externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,\n externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,\n variant: 'default',\n isInline: false,\n showLaunchIcon: true,\n};\n\nHyperlink.propTypes = {\n /** specifies the URL */\n destination: PropTypes.string.isRequired,\n /** Content of the hyperlink */\n children: PropTypes.node.isRequired,\n /** Custom class names for the hyperlink */\n className: PropTypes.string,\n /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n * loaded into the same browsing context as the current one.\n * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n */\n target: PropTypes.oneOf(['_blank', '_self']),\n /** specifies the callback function when the link is clicked */\n onClick: PropTypes.func,\n /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n externalLinkAlternativeText: PropTypes.string,\n /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n externalLinkTitle: PropTypes.string,\n /** type of hyperlink */\n variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n /** Display the link with an underline. By default, it is only underlined on hover. */\n isInline: PropTypes.bool,\n /** specify if we need to show launch Icon. By default, it will be visible. */\n showLaunchIcon: PropTypes.bool,\n};\n\nexport default Hyperlink;\n"],"mappings":"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","ignoreList":[]}
@@ -1,13 +1,15 @@
1
1
  import React from 'react';
2
2
 
3
3
  export interface IconProps extends React.ComponentPropsWithoutRef<'span'> {
4
- src?: React.ReactElement | Function;
4
+ // Note: React.ComponentType is what we want here. React.ElementType would allow some element type strings like "div",
5
+ // but we only want to allow components like 'Add' (a specific icon component function/class)
6
+ src?: React.ComponentType;
5
7
  svgAttrs?: {
6
8
  'aria-label'?: string;
7
9
  'aria-labelledby'?: string;
8
10
  };
9
11
  id?: string | null;
10
- size?: 'xs' | 'sm' | 'md' | 'lg';
12
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'inline';
11
13
  className?: string | string[];
12
14
  hidden?: boolean;
13
15
  screenReaderText?: React.ReactNode;