@openedx/paragon 23.14.3 → 23.14.5

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.
@@ -7,15 +7,30 @@ export interface OverflowScrollContextProps {
7
7
  scrollToNext: () => void;
8
8
  }
9
9
  export interface ChipCarouselProps {
10
+ /** Specifies class name for the ChipCarousel. */
10
11
  className?: string;
12
+ /** Specifies array of `Chip` elements to be rendered inside the carousel. */
11
13
  items: Array<React.ReactElement>;
14
+ /** Text describing the ChipCarousel for screen readers. */
12
15
  ariaLabel: string;
16
+ /** Whether the default opacity masks should be shown at the start/end, if applicable. */
13
17
  disableOpacityMasks?: boolean;
18
+ /** Callback function for when the user scrolls to the previous element. */
14
19
  onScrollPrevious?: () => void;
20
+ /** Callback function for when the user scrolls to the next element. */
15
21
  onScrollNext?: () => void;
22
+ /** Whether users can scroll within the overflow container. */
16
23
  canScrollHorizontal?: boolean;
24
+ /** A value specifying the distance the scroll should move. */
17
25
  offset?: number | string;
26
+ /** Type of offset value (percentage or fixed). */
18
27
  offsetType?: 'percentage' | 'fixed';
28
+ /**
29
+ * Specifies inner space between children blocks.
30
+ *
31
+ * Valid values are based on `the spacing classes`:
32
+ * `0, 0.5, ... 6`.
33
+ */
19
34
  gap?: number;
20
35
  }
21
36
  declare const ChipCarousel: React.ForwardRefExoticComponent<ChipCarouselProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import PropTypes from 'prop-types';
3
2
  import { useIntl } from 'react-intl';
4
3
  import classNames from 'classnames';
5
4
  // @ts-ignore
@@ -21,7 +20,7 @@ const ChipCarousel = /*#__PURE__*/React.forwardRef(({
21
20
  canScrollHorizontal = false,
22
21
  offset = 120,
23
22
  offsetType = 'fixed',
24
- gap,
23
+ gap = 3,
25
24
  ...props
26
25
  }, ref) => {
27
26
  const intl = useIntl();
@@ -75,43 +74,5 @@ const ChipCarousel = /*#__PURE__*/React.forwardRef(({
75
74
  });
76
75
  })))))));
77
76
  });
78
- ChipCarousel.propTypes = {
79
- /** Text describing the ChipCarousel for screen readers. */
80
- ariaLabel: PropTypes.string.isRequired,
81
- /** Specifies class name for the ChipCarousel. */
82
- className: PropTypes.string,
83
- /** Specifies array of `Chip` elements to be rendered inside the carousel. */
84
- // @ts-ignore
85
- items: PropTypes.arrayOf(PropTypes.element).isRequired,
86
- /** Whether the default opacity masks should be shown at the start/end, if applicable. */
87
- disableOpacityMasks: PropTypes.bool,
88
- /** Callback function for when the user scrolls to the previous element. */
89
- onScrollPrevious: PropTypes.func,
90
- /** Callback function for when the user scrolls to the next element. */
91
- onScrollNext: PropTypes.func,
92
- /** Whether users can scroll within the overflow container. */
93
- canScrollHorizontal: PropTypes.bool,
94
- /** A value specifying the distance the scroll should move. */
95
- offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
96
- /** Type of offset value (percentage or fixed). */
97
- offsetType: PropTypes.oneOf(['percentage', 'fixed']),
98
- /**
99
- * Specifies inner space between children blocks.
100
- *
101
- * Valid values are based on `the spacing classes`:
102
- * `0, 0.5, ... 6`.
103
- */
104
- gap: PropTypes.number
105
- };
106
- ChipCarousel.defaultProps = {
107
- className: undefined,
108
- disableOpacityMasks: undefined,
109
- onScrollPrevious: undefined,
110
- onScrollNext: undefined,
111
- canScrollHorizontal: false,
112
- offset: 120,
113
- offsetType: 'fixed',
114
- gap: 3
115
- };
116
77
  export default ChipCarousel;
117
78
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","useIntl","classNames","OverflowScroll","OverflowScrollContext","IconButton","Icon","ArrowForward","ArrowBack","messages","Chip","ChipCarousel","forwardRef","className","items","ariaLabel","disableOpacityMasks","onScrollPrevious","onScrollNext","canScrollHorizontal","offset","offsetType","gap","props","ref","intl","createElement","hasInteractiveChildren","disableScroll","Consumer","setOverflowRef","isScrolledToStart","isScrolledToEnd","scrollToPrevious","scrollToNext","Fragment","size","src","iconAs","alt","formatMessage","onClick","Items","map","item","id","children","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":[]}
1
+ {"version":3,"file":"index.js","names":["React","useIntl","classNames","OverflowScroll","OverflowScrollContext","IconButton","Icon","ArrowForward","ArrowBack","messages","Chip","ChipCarousel","forwardRef","className","items","ariaLabel","disableOpacityMasks","onScrollPrevious","onScrollNext","canScrollHorizontal","offset","offsetType","gap","props","ref","intl","createElement","hasInteractiveChildren","disableScroll","Consumer","setOverflowRef","isScrolledToStart","isScrolledToEnd","scrollToPrevious","scrollToNext","Fragment","size","src","iconAs","alt","formatMessage","onClick","Items","map","item","id","children","key"],"sources":["../../src/ChipCarousel/index.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\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 /** Specifies class name for the ChipCarousel. */\n className?: string;\n /** Specifies array of `Chip` elements to be rendered inside the carousel. */\n items: Array<React.ReactElement>;\n /** Text describing the ChipCarousel for screen readers. */\n ariaLabel: string;\n /** Whether the default opacity masks should be shown at the start/end, if applicable. */\n disableOpacityMasks?: boolean;\n /** Callback function for when the user scrolls to the previous element. */\n onScrollPrevious?: () => void;\n /** Callback function for when the user scrolls to the next element. */\n onScrollNext?: () => void;\n /** Whether users can scroll within the overflow container. */\n canScrollHorizontal?: boolean;\n /** A value specifying the distance the scroll should move. */\n offset?: number | string;\n /** Type of offset value (percentage or fixed). */\n offsetType?: '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?: 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 = 3,\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\nexport default ChipCarousel;\n"],"mappings":"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","ignoreList":[]}
@@ -1,3 +1,4 @@
1
+ import { ReactNode, ElementType } from 'react';
1
2
  import { type ContainerProps as RBContainerProps } from 'react-bootstrap/Container';
2
3
  import type { ComponentWithAsProp } from '../utils/types/bootstrap';
3
4
  declare enum ContainerSizeClass {
@@ -9,7 +10,16 @@ declare enum ContainerSizeClass {
9
10
  }
10
11
  export type ContainerSize = keyof typeof ContainerSizeClass;
11
12
  interface ContainerProps extends RBContainerProps {
12
- size?: ContainerSize;
13
+ /** Override the base element */
14
+ as?: ElementType;
15
+ /** Specifies the contents of the container */
16
+ children: ReactNode;
17
+ /** Fill all available space at any breakpoint */
18
+ fluid?: boolean;
19
+ /** Overrides underlying component base CSS class name */
20
+ bsPrefix?: string;
21
+ /** Set the maximum width for the container. Omiting the prop will remove the max-width */
22
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
13
23
  }
14
24
  type ContainerType = ComponentWithAsProp<'div', ContainerProps>;
15
25
  declare const Container: ContainerType;
@@ -1,7 +1,6 @@
1
1
  /* eslint-disable react/require-default-props */
2
- import React from 'react';
2
+ import React, { forwardRef } from 'react';
3
3
  import classNames from 'classnames';
4
- import PropTypes from 'prop-types';
5
4
  import RBContainer from 'react-bootstrap/Container';
6
5
  var ContainerSizeClass = /*#__PURE__*/function (ContainerSizeClass) {
7
6
  ContainerSizeClass["xs"] = "container-mw-xs";
@@ -11,34 +10,20 @@ var ContainerSizeClass = /*#__PURE__*/function (ContainerSizeClass) {
11
10
  ContainerSizeClass["xl"] = "container-mw-xl";
12
11
  return ContainerSizeClass;
13
12
  }(ContainerSizeClass || {});
14
- const Container = /*#__PURE__*/React.forwardRef(({
13
+ const Container = /*#__PURE__*/forwardRef(({
15
14
  size,
16
15
  children,
16
+ as = 'div',
17
+ bsPrefix = 'container',
18
+ fluid = true,
17
19
  ...props
18
20
  }, ref) => /*#__PURE__*/React.createElement(RBContainer, {
19
21
  ...props,
22
+ as: as,
23
+ bsPrefix: bsPrefix,
24
+ fluid: fluid,
20
25
  ref: ref,
21
26
  className: classNames(props.className, size && ContainerSizeClass[size])
22
27
  }, children));
23
- Container.propTypes = {
24
- ...RBContainer.propTypes,
25
- /** Override the base element */
26
- as: PropTypes.elementType,
27
- /** Specifies the contents of the container */
28
- children: PropTypes.node,
29
- /** Fill all available space at any breakpoint */
30
- fluid: PropTypes.bool,
31
- /** Set the maximum width for the container. Omiting the prop will remove the max-width */
32
- size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
33
- /** Overrides underlying component base CSS class name */
34
- bsPrefix: PropTypes.string
35
- };
36
- Container.defaultProps = {
37
- as: 'div',
38
- children: undefined,
39
- fluid: true,
40
- size: undefined,
41
- bsPrefix: 'container'
42
- };
43
28
  export default Container;
44
29
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","classNames","PropTypes","RBContainer","ContainerSizeClass","Container","forwardRef","size","children","props","ref","createElement","className","propTypes","as","elementType","node","fluid","bool","oneOf","bsPrefix","string","defaultProps","undefined"],"sources":["../../src/Container/index.tsx"],"sourcesContent":["/* eslint-disable react/require-default-props */\nimport React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport RBContainer, { type ContainerProps as RBContainerProps } from 'react-bootstrap/Container';\n\nimport type { ComponentWithAsProp } from '../utils/types/bootstrap';\n\nenum ContainerSizeClass {\n xs = 'container-mw-xs',\n sm = 'container-mw-sm',\n md = 'container-mw-md',\n lg = 'container-mw-lg',\n xl = 'container-mw-xl',\n}\n\nexport type ContainerSize = keyof typeof ContainerSizeClass;\n\ninterface ContainerProps extends RBContainerProps {\n size?: ContainerSize;\n}\n\ntype ContainerType = ComponentWithAsProp<'div', ContainerProps>;\n\nconst Container: ContainerType = React.forwardRef<Element, ContainerProps>(({\n size,\n children,\n ...props\n}, ref) => (\n <RBContainer\n {...props}\n ref={ref}\n className={classNames(\n props.className,\n size && ContainerSizeClass[size],\n )}\n >\n {children}\n </RBContainer>\n));\n\nContainer.propTypes = {\n ...RBContainer.propTypes,\n /** Override the base element */\n as: PropTypes.elementType,\n /** Specifies the contents of the container */\n children: PropTypes.node,\n /** Fill all available space at any breakpoint */\n fluid: PropTypes.bool,\n /** Set the maximum width for the container. Omiting the prop will remove the max-width */\n size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),\n /** Overrides underlying component base CSS class name */\n bsPrefix: PropTypes.string,\n};\n\nContainer.defaultProps = {\n as: 'div',\n children: undefined,\n fluid: true,\n size: undefined,\n bsPrefix: 'container',\n};\n\nexport default Container;\n"],"mappings":"AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,WAAW,MAAmD,2BAA2B;AAAC,IAI5FC,kBAAkB,0BAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAA,OAAlBA,kBAAkB;AAAA,EAAlBA,kBAAkB;AAgBvB,MAAMC,SAAwB,gBAAGL,KAAK,CAACM,UAAU,CAA0B,CAAC;EAC1EC,IAAI;EACJC,QAAQ;EACR,GAAGC;AACL,CAAC,EAAEC,GAAG,kBACJV,KAAA,CAAAW,aAAA,CAACR,WAAW;EAAA,GACNM,KAAK;EACTC,GAAG,EAAEA,GAAI;EACTE,SAAS,EAAEX,UAAU,CACnBQ,KAAK,CAACG,SAAS,EACfL,IAAI,IAAIH,kBAAkB,CAACG,IAAI,CACjC;AAAE,GAEDC,QACU,CACd,CAAC;AAEFH,SAAS,CAACQ,SAAS,GAAG;EACpB,GAAGV,WAAW,CAACU,SAAS;EACxB;EACAC,EAAE,EAAEZ,SAAS,CAACa,WAAW;EACzB;EACAP,QAAQ,EAAEN,SAAS,CAACc,IAAI;EACxB;EACAC,KAAK,EAAEf,SAAS,CAACgB,IAAI;EACrB;EACAX,IAAI,EAAEL,SAAS,CAACiB,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;EACrD;EACAC,QAAQ,EAAElB,SAAS,CAACmB;AACtB,CAAC;AAEDhB,SAAS,CAACiB,YAAY,GAAG;EACvBR,EAAE,EAAE,KAAK;EACTN,QAAQ,EAAEe,SAAS;EACnBN,KAAK,EAAE,IAAI;EACXV,IAAI,EAAEgB,SAAS;EACfH,QAAQ,EAAE;AACZ,CAAC;AAED,eAAef,SAAS","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","forwardRef","classNames","RBContainer","ContainerSizeClass","Container","size","children","as","bsPrefix","fluid","props","ref","createElement","className"],"sources":["../../src/Container/index.tsx"],"sourcesContent":["/* eslint-disable react/require-default-props */\nimport React, {\n ForwardedRef, ReactNode, ElementType, forwardRef,\n} from 'react';\nimport classNames from 'classnames';\nimport RBContainer, { type ContainerProps as RBContainerProps } from 'react-bootstrap/Container';\n\nimport type { ComponentWithAsProp } from '../utils/types/bootstrap';\n\nenum ContainerSizeClass {\n xs = 'container-mw-xs',\n sm = 'container-mw-sm',\n md = 'container-mw-md',\n lg = 'container-mw-lg',\n xl = 'container-mw-xl',\n}\n\nexport type ContainerSize = keyof typeof ContainerSizeClass;\n\ninterface ContainerProps extends RBContainerProps {\n /** Override the base element */\n as?: ElementType,\n /** Specifies the contents of the container */\n children: ReactNode,\n /** Fill all available space at any breakpoint */\n fluid?: boolean,\n /** Overrides underlying component base CSS class name */\n bsPrefix?: string,\n /** Set the maximum width for the container. Omiting the prop will remove the max-width */\n size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\ntype ContainerType = ComponentWithAsProp<'div', ContainerProps>;\n\nconst Container: ContainerType = forwardRef(({\n size,\n children,\n as = 'div',\n bsPrefix = 'container',\n fluid = true,\n ...props\n}: ContainerProps, ref: ForwardedRef<Element>) => (\n <RBContainer\n {...props}\n as={as}\n bsPrefix={bsPrefix}\n fluid={fluid}\n ref={ref}\n className={classNames(\n props.className,\n size && ContainerSizeClass[size],\n )}\n >\n {children}\n </RBContainer>\n));\n\nexport default Container;\n"],"mappings":"AAAA;AACA,OAAOA,KAAK,IAC4BC,UAAU,QAC3C,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,WAAW,MAAmD,2BAA2B;AAAC,IAI5FC,kBAAkB,0BAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAA,OAAlBA,kBAAkB;AAAA,EAAlBA,kBAAkB;AAyBvB,MAAMC,SAAwB,gBAAGJ,UAAU,CAAC,CAAC;EAC3CK,IAAI;EACJC,QAAQ;EACRC,EAAE,GAAG,KAAK;EACVC,QAAQ,GAAG,WAAW;EACtBC,KAAK,GAAG,IAAI;EACZ,GAAGC;AACW,CAAC,EAAEC,GAA0B,kBAC3CZ,KAAA,CAAAa,aAAA,CAACV,WAAW;EAAA,GACNQ,KAAK;EACTH,EAAE,EAAEA,EAAG;EACPC,QAAQ,EAAEA,QAAS;EACnBC,KAAK,EAAEA,KAAM;EACbE,GAAG,EAAEA,GAAI;EACTE,SAAS,EAAEZ,UAAU,CACnBS,KAAK,CAACG,SAAS,EACfR,IAAI,IAAIF,kBAAkB,CAACE,IAAI,CACjC;AAAE,GAEDC,QACU,CACd,CAAC;AAEF,eAAeF,SAAS","ignoreList":[]}
@@ -1,13 +1,12 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
1
+ import React, { ElementType, ReactNode } from 'react';
3
2
  import { FORM_CONTROL_SIZES } from './constants';
4
- interface Props<As extends React.ElementType> {
3
+ interface Props {
5
4
  /** Specifies contents of the component. */
6
- children: React.ReactNode;
5
+ children: ReactNode;
7
6
  /** Specifies class name to append to the base element. */
8
7
  className?: string;
9
8
  /** Specifies base element for the component. */
10
- as?: As;
9
+ as?: ElementType;
11
10
  /** Specifies id to use in the group, it will be used as `htmlFor` in `FormLabel` and as `id` in input components.
12
11
  * Will be autogenerated if none is supplied. */
13
12
  controlId?: string;
@@ -15,27 +14,10 @@ interface Props<As extends React.ElementType> {
15
14
  isInvalid?: boolean;
16
15
  /** Specifies whether to display components in valid state, this affects styling. */
17
16
  isValid?: boolean;
18
- /** Specifies size for the component. */
17
+ /** Specifies size for the component. Either `'sm'` or `'lg'`. */
19
18
  size?: typeof FORM_CONTROL_SIZES.SMALL | typeof FORM_CONTROL_SIZES.LARGE;
20
19
  }
21
- declare function FormGroup<As extends React.ElementType = 'div'>({ children, controlId, isInvalid, isValid, size, as, ...props }: Props<As> & React.ComponentPropsWithoutRef<As>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
22
- declare namespace FormGroup {
23
- var propTypes: {
24
- /** Specifies contents of the component. */
25
- children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
26
- /** Specifies class name to append to the base element. */
27
- className: PropTypes.Requireable<string>;
28
- /** Specifies base element for the component. */
29
- as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
30
- /** Specifies id to use in the group, it will be used as `htmlFor` in `FormLabel` and as `id` in input components.
31
- * Will be autogenerated if none is supplied. */
32
- controlId: PropTypes.Requireable<string>;
33
- /** Specifies whether to display components in invalid state, this affects styling. */
34
- isInvalid: PropTypes.Requireable<boolean>;
35
- /** Specifies whether to display components in valid state, this affects styling. */
36
- isValid: PropTypes.Requireable<boolean>;
37
- /** Specifies size for the component. */
38
- size: PropTypes.Requireable<string>;
39
- };
40
- }
20
+ declare function FormGroup<As extends React.ElementType = 'div'>({ children, controlId, isInvalid, isValid, size, as, ...props }: {
21
+ as?: As;
22
+ } & Props & React.ComponentPropsWithoutRef<As>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
41
23
  export default FormGroup;
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import PropTypes from 'prop-types';
3
2
  import classNames from 'classnames';
4
3
  import { FormGroupContextProvider } from './FormGroupContext';
5
4
  function FormGroup({
@@ -21,23 +20,5 @@ function FormGroup({
21
20
  size: size
22
21
  }, children));
23
22
  }
24
- const SIZE_CHOICES = ['sm', 'lg'];
25
- FormGroup.propTypes = {
26
- /** Specifies contents of the component. */
27
- children: PropTypes.node.isRequired,
28
- /** Specifies class name to append to the base element. */
29
- className: PropTypes.string,
30
- /** Specifies base element for the component. */
31
- as: PropTypes.elementType,
32
- /** Specifies id to use in the group, it will be used as `htmlFor` in `FormLabel` and as `id` in input components.
33
- * Will be autogenerated if none is supplied. */
34
- controlId: PropTypes.string,
35
- /** Specifies whether to display components in invalid state, this affects styling. */
36
- isInvalid: PropTypes.bool,
37
- /** Specifies whether to display components in valid state, this affects styling. */
38
- isValid: PropTypes.bool,
39
- /** Specifies size for the component. */
40
- size: PropTypes.oneOf(SIZE_CHOICES)
41
- };
42
23
  export default FormGroup;
43
24
  //# sourceMappingURL=FormGroup.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FormGroup.js","names":["React","PropTypes","classNames","FormGroupContextProvider","FormGroup","children","controlId","isInvalid","isValid","size","as","props","createElement","className","SIZE_CHOICES","propTypes","node","isRequired","string","elementType","bool","oneOf"],"sources":["../../src/Form/FormGroup.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { FormGroupContextProvider } from './FormGroupContext';\nimport { FORM_CONTROL_SIZES } from './constants';\n\ninterface Props<As extends React.ElementType> {\n /** Specifies contents of the component. */\n children: React.ReactNode;\n /** Specifies class name to append to the base element. */\n className?: string;\n /** Specifies base element for the component. */\n as?: As;\n /** Specifies id to use in the group, it will be used as `htmlFor` in `FormLabel` and as `id` in input components.\n * Will be autogenerated if none is supplied. */\n controlId?: string;\n /** Specifies whether to display components in invalid state, this affects styling. */\n isInvalid?: boolean;\n /** Specifies whether to display components in valid state, this affects styling. */\n isValid?: boolean;\n /** Specifies size for the component. */\n size?: typeof FORM_CONTROL_SIZES.SMALL | typeof FORM_CONTROL_SIZES.LARGE;\n}\n\nfunction FormGroup<As extends React.ElementType = 'div'>({\n children,\n controlId,\n isInvalid = false,\n isValid = false,\n size,\n as,\n ...props\n}: Props<As> & React.ComponentPropsWithoutRef<As>) {\n return React.createElement(\n as ?? 'div',\n {\n ...props,\n className: classNames('pgn__form-group', props.className),\n }, (\n <FormGroupContextProvider\n controlId={controlId}\n isInvalid={isInvalid}\n isValid={isValid}\n size={size}\n >\n {children}\n </FormGroupContextProvider>\n ),\n );\n}\n\nconst SIZE_CHOICES = ['sm', 'lg'];\n\nFormGroup.propTypes = {\n /** Specifies contents of the component. */\n children: PropTypes.node.isRequired,\n /** Specifies class name to append to the base element. */\n className: PropTypes.string,\n /** Specifies base element for the component. */\n as: PropTypes.elementType,\n /** Specifies id to use in the group, it will be used as `htmlFor` in `FormLabel` and as `id` in input components.\n * Will be autogenerated if none is supplied. */\n controlId: PropTypes.string,\n /** Specifies whether to display components in invalid state, this affects styling. */\n isInvalid: PropTypes.bool,\n /** Specifies whether to display components in valid state, this affects styling. */\n isValid: PropTypes.bool,\n /** Specifies size for the component. */\n size: PropTypes.oneOf(SIZE_CHOICES),\n};\n\nexport default FormGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,wBAAwB,QAAQ,oBAAoB;AAqB7D,SAASC,SAASA,CAAuC;EACvDC,QAAQ;EACRC,SAAS;EACTC,SAAS,GAAG,KAAK;EACjBC,OAAO,GAAG,KAAK;EACfC,IAAI;EACJC,EAAE;EACF,GAAGC;AAC2C,CAAC,EAAE;EACjD,oBAAOX,KAAK,CAACY,aAAa,CACxBF,EAAE,IAAI,KAAK,EACX;IACE,GAAGC,KAAK;IACRE,SAAS,EAAEX,UAAU,CAAC,iBAAiB,EAAES,KAAK,CAACE,SAAS;EAC1D,CAAC,eACCb,KAAA,CAAAY,aAAA,CAACT,wBAAwB;IACvBG,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA;EAAK,GAEVJ,QACuB,CAE9B,CAAC;AACH;AAEA,MAAMS,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;AAEjCV,SAAS,CAACW,SAAS,GAAG;EACpB;EACAV,QAAQ,EAAEJ,SAAS,CAACe,IAAI,CAACC,UAAU;EACnC;EACAJ,SAAS,EAAEZ,SAAS,CAACiB,MAAM;EAC3B;EACAR,EAAE,EAAET,SAAS,CAACkB,WAAW;EACzB;AACF;EACEb,SAAS,EAAEL,SAAS,CAACiB,MAAM;EAC3B;EACAX,SAAS,EAAEN,SAAS,CAACmB,IAAI;EACzB;EACAZ,OAAO,EAAEP,SAAS,CAACmB,IAAI;EACvB;EACAX,IAAI,EAAER,SAAS,CAACoB,KAAK,CAACP,YAAY;AACpC,CAAC;AAED,eAAeV,SAAS","ignoreList":[]}
1
+ {"version":3,"file":"FormGroup.js","names":["React","classNames","FormGroupContextProvider","FormGroup","children","controlId","isInvalid","isValid","size","as","props","createElement","className"],"sources":["../../src/Form/FormGroup.tsx"],"sourcesContent":["import React, { ElementType, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { FormGroupContextProvider } from './FormGroupContext';\nimport { FORM_CONTROL_SIZES } from './constants';\n\ninterface Props {\n /** Specifies contents of the component. */\n children: ReactNode;\n /** Specifies class name to append to the base element. */\n className?: string;\n /** Specifies base element for the component. */\n as?: ElementType;\n /** Specifies id to use in the group, it will be used as `htmlFor` in `FormLabel` and as `id` in input components.\n * Will be autogenerated if none is supplied. */\n controlId?: string;\n /** Specifies whether to display components in invalid state, this affects styling. */\n isInvalid?: boolean;\n /** Specifies whether to display components in valid state, this affects styling. */\n isValid?: boolean;\n /** Specifies size for the component. Either `'sm'` or `'lg'`. */\n size?: typeof FORM_CONTROL_SIZES.SMALL | typeof FORM_CONTROL_SIZES.LARGE;\n}\n\nfunction FormGroup<As extends React.ElementType = 'div'>({\n children,\n controlId,\n isInvalid = false,\n isValid = false,\n size,\n as,\n ...props\n}: { as?: As } & Props & React.ComponentPropsWithoutRef<As>) {\n return React.createElement(\n as ?? 'div',\n {\n ...props,\n className: classNames('pgn__form-group', props.className),\n }, (\n <FormGroupContextProvider\n controlId={controlId}\n isInvalid={isInvalid}\n isValid={isValid}\n size={size}\n >\n {children}\n </FormGroupContextProvider>\n ),\n );\n}\n\nexport default FormGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAkC,OAAO;AACrD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,wBAAwB,QAAQ,oBAAoB;AAqB7D,SAASC,SAASA,CAAuC;EACvDC,QAAQ;EACRC,SAAS;EACTC,SAAS,GAAG,KAAK;EACjBC,OAAO,GAAG,KAAK;EACfC,IAAI;EACJC,EAAE;EACF,GAAGC;AACqD,CAAC,EAAE;EAC3D,oBAAOV,KAAK,CAACW,aAAa,CACxBF,EAAE,IAAI,KAAK,EACX;IACE,GAAGC,KAAK;IACRE,SAAS,EAAEX,UAAU,CAAC,iBAAiB,EAAES,KAAK,CAACE,SAAS;EAC1D,CAAC,eACCZ,KAAA,CAAAW,aAAA,CAACT,wBAAwB;IACvBG,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA;EAAK,GAEVJ,QACuB,CAE9B,CAAC;AACH;AAEA,eAAeD,SAAS","ignoreList":[]}
@@ -1,10 +1,12 @@
1
- import React from 'react';
1
+ import React, { ElementType, ReactNode } from 'react';
2
2
  import { type BsPrefixRefForwardingComponent as ComponentWithAsProp, type BsPrefixProps } from 'react-bootstrap/esm/helpers';
3
3
  export interface HyperlinkProps extends BsPrefixProps, Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
4
- /** specifies the URL */
4
+ /** specifies the component element type to render for the hyperlink. */
5
+ as?: ElementType;
6
+ /** specifies the URL; required if `as` prop is a standard anchor tag */
5
7
  destination?: string;
6
8
  /** Content of the hyperlink */
7
- children: React.ReactNode;
9
+ children: ReactNode;
8
10
  /** Custom class names for the hyperlink */
9
11
  className?: string;
10
12
  /** Alt text for the icon indicating that this link opens in a new tab, if target="_blank". e.g. _("in a new tab") */
@@ -1,11 +1,8 @@
1
1
  import React, { forwardRef } from 'react';
2
- import PropTypes from 'prop-types';
3
2
  import classNames from 'classnames';
4
3
  import { defineMessages, useIntl } from 'react-intl';
5
4
  import { Launch } from '../../icons';
6
5
  import Icon from '../Icon';
7
- // @ts-ignore
8
- import { customPropTypeRequirement } from '../utils/propTypes/utils';
9
6
  const messages = defineMessages({
10
7
  externalLinkAltText: {
11
8
  id: 'Hyperlink.externalLinkAltText',
@@ -83,52 +80,6 @@ const Hyperlink = /*#__PURE__*/forwardRef(({
83
80
  ...additionalProps
84
81
  }, children, externalLinkIcon);
85
82
  });
86
- Hyperlink.propTypes = {
87
- /** specifies the component element type to render for the hyperlink */
88
- // @ts-ignore
89
- as: PropTypes.elementType,
90
- /** specifies the URL; required iff `as` prop is a standard anchor tag */
91
- destination: customPropTypeRequirement(PropTypes.string, ({
92
- as
93
- }) => as && as === 'a',
94
- // "[`destination` is required when]..."
95
- 'the `as` prop is a standard anchor element (i.e., "a")'),
96
- /** Content of the hyperlink */
97
- // @ts-ignore
98
- children: PropTypes.node.isRequired,
99
- /** Custom class names for the hyperlink */
100
- className: PropTypes.string,
101
- /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be
102
- * loaded into the same browsing context as the current one.
103
- * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent
104
- * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
105
- */
106
- target: PropTypes.oneOf(['_blank', '_self']),
107
- /** specifies the callback function when the link is clicked */
108
- onClick: PropTypes.func,
109
- /** Alt text for the icon indicating that this link opens in a new tab, if target="_blank". e.g. _("in a new tab") */
110
- externalLinkAlternativeText: PropTypes.string,
111
- /** Tooltip text for the "opens in new tab" icon, if target="_blank". e.g. _("Opens in a new tab"). */
112
- externalLinkTitle: PropTypes.string,
113
- /** type of hyperlink */
114
- variant: PropTypes.oneOf(['default', 'muted', 'brand']),
115
- /** Display the link with an underline. By default, it is only underlined on hover. */
116
- isInline: PropTypes.bool,
117
- /** specify if we need to show launch Icon. By default, it will be visible. */
118
- showLaunchIcon: PropTypes.bool
119
- };
120
- Hyperlink.defaultProps = {
121
- as: 'a',
122
- className: undefined,
123
- destination: undefined,
124
- externalLinkAlternativeText: undefined,
125
- externalLinkTitle: undefined,
126
- isInline: false,
127
- onClick: undefined,
128
- showLaunchIcon: true,
129
- target: '_self',
130
- variant: 'default'
131
- };
132
83
  Hyperlink.displayName = 'Hyperlink';
133
84
  export default Hyperlink;
134
85
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","forwardRef","PropTypes","classNames","defineMessages","useIntl","Launch","Icon","customPropTypeRequirement","messages","externalLinkAltText","id","defaultMessage","externalLinkTitle","Hyperlink","as","Component","className","destination","children","target","onClick","externalLinkAlternativeText","variant","isInline","showLaunchIcon","attrs","ref","intl","externalLinkIcon","generateRel","rel","includes","createElement","title","formatMessage","src","screenReaderText","style","height","width","additionalProps","href","propTypes","elementType","string","node","isRequired","oneOf","func","bool","defaultProps","undefined","displayName"],"sources":["../../src/Hyperlink/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport {\n type BsPrefixRefForwardingComponent as ComponentWithAsProp,\n type BsPrefixProps,\n} from 'react-bootstrap/esm/helpers';\nimport { defineMessages, useIntl } from 'react-intl';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n// @ts-ignore\nimport { customPropTypeRequirement } from '../utils/propTypes/utils';\n\nexport interface HyperlinkProps extends BsPrefixProps, 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 /** 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?: '_blank' | '_self';\n}\n\nexport type HyperlinkType = ComponentWithAsProp<'a', HyperlinkProps>;\n\nconst messages = defineMessages({\n externalLinkAltText: {\n id: 'Hyperlink.externalLinkAltText',\n defaultMessage: 'in a new tab',\n },\n externalLinkTitle: {\n id: 'Hyperlink.externalLinkTitle',\n defaultMessage: 'Opens in a new tab',\n },\n});\n\nconst Hyperlink = forwardRef<HTMLAnchorElement, HyperlinkProps>(({\n as: Component = 'a',\n className,\n destination,\n children,\n target = '_self',\n onClick,\n externalLinkAlternativeText,\n externalLinkTitle,\n variant = 'default',\n isInline = false,\n showLaunchIcon = true,\n ...attrs\n}, ref) => {\n const intl = useIntl();\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 || intl.formatMessage(messages.externalLinkTitle)}\n >\n <Icon\n src={Launch}\n screenReaderText={externalLinkAlternativeText || intl.formatMessage(messages.externalLinkAltText)}\n style={{ height: '1em', width: '1em' }}\n data-testid=\"hyperlink-icon\"\n />\n </span>\n );\n }\n }\n\n const additionalProps: Record<string, any> = { ...attrs };\n if (destination) {\n additionalProps.href = destination;\n }\n\n return (\n <Component\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 target={target}\n onClick={onClick}\n {...additionalProps}\n >\n {children}\n {externalLinkIcon}\n </Component>\n );\n});\n\nHyperlink.propTypes = {\n /** specifies the component element type to render for the hyperlink */\n // @ts-ignore\n as: PropTypes.elementType,\n /** specifies the URL; required iff `as` prop is a standard anchor tag */\n destination: customPropTypeRequirement(\n PropTypes.string,\n ({ as }: { as: React.ElementType }) => as && as === 'a',\n // \"[`destination` is required when]...\"\n 'the `as` prop is a standard anchor element (i.e., \"a\")',\n ),\n /** Content of the hyperlink */\n // @ts-ignore\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\nHyperlink.defaultProps = {\n as: 'a',\n className: undefined,\n destination: undefined,\n externalLinkAlternativeText: undefined,\n externalLinkTitle: undefined,\n isInline: false,\n onClick: undefined,\n showLaunchIcon: true,\n target: '_self',\n variant: 'default',\n};\n\nHyperlink.displayName = 'Hyperlink';\n\nexport default Hyperlink;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","forwardRef","classNames","defineMessages","useIntl","Launch","Icon","messages","externalLinkAltText","id","defaultMessage","externalLinkTitle","Hyperlink","as","Component","className","destination","children","target","onClick","externalLinkAlternativeText","variant","isInline","showLaunchIcon","attrs","ref","intl","externalLinkIcon","generateRel","rel","includes","createElement","title","formatMessage","src","screenReaderText","style","height","width","additionalProps","href","displayName"],"sources":["../../src/Hyperlink/index.tsx"],"sourcesContent":["import React, {\n forwardRef, ForwardedRef, ElementType, ReactNode,\n} from 'react';\nimport classNames from 'classnames';\nimport {\n type BsPrefixRefForwardingComponent as ComponentWithAsProp,\n type BsPrefixProps,\n} from 'react-bootstrap/esm/helpers';\nimport { defineMessages, useIntl } from 'react-intl';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n\nexport interface HyperlinkProps extends BsPrefixProps, Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {\n /** specifies the component element type to render for the hyperlink. */\n as?: ElementType;\n /** specifies the URL; required if `as` prop is a standard anchor tag */\n destination?: string;\n /** Content of the hyperlink */\n children: 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 /** 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?: '_blank' | '_self';\n}\n\nexport type HyperlinkType = ComponentWithAsProp<'a', HyperlinkProps>;\n\nconst messages = defineMessages({\n externalLinkAltText: {\n id: 'Hyperlink.externalLinkAltText',\n defaultMessage: 'in a new tab',\n },\n externalLinkTitle: {\n id: 'Hyperlink.externalLinkTitle',\n defaultMessage: 'Opens in a new tab',\n },\n});\n\nconst Hyperlink = forwardRef(({\n as: Component = 'a',\n className,\n destination,\n children,\n target = '_self',\n onClick,\n externalLinkAlternativeText,\n externalLinkTitle,\n variant = 'default',\n isInline = false,\n showLaunchIcon = true,\n ...attrs\n}: HyperlinkProps, ref: ForwardedRef<HTMLAnchorElement>) => {\n const intl = useIntl();\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 || intl.formatMessage(messages.externalLinkTitle)}\n >\n <Icon\n src={Launch}\n screenReaderText={externalLinkAlternativeText || intl.formatMessage(messages.externalLinkAltText)}\n style={{ height: '1em', width: '1em' }}\n data-testid=\"hyperlink-icon\"\n />\n </span>\n );\n }\n }\n\n const additionalProps: Record<string, any> = { ...attrs };\n if (destination) {\n additionalProps.href = destination;\n }\n\n return (\n <Component\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 target={target}\n onClick={onClick}\n {...additionalProps}\n >\n {children}\n {externalLinkIcon}\n </Component>\n );\n});\n\nHyperlink.displayName = 'Hyperlink';\n\nexport default Hyperlink;\n"],"mappings":"AAAA,OAAOA,KAAK,IACVC,UAAU,QACL,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AAKnC,SAASC,cAAc,EAAEC,OAAO,QAAQ,YAAY;AACpD,SAASC,MAAM,QAAQ,aAAa;AACpC,OAAOC,IAAI,MAAM,SAAS;AA+B1B,MAAMC,QAAQ,GAAGJ,cAAc,CAAC;EAC9BK,mBAAmB,EAAE;IACnBC,EAAE,EAAE,+BAA+B;IACnCC,cAAc,EAAE;EAClB,CAAC;EACDC,iBAAiB,EAAE;IACjBF,EAAE,EAAE,6BAA6B;IACjCC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,MAAME,SAAS,gBAAGX,UAAU,CAAC,CAAC;EAC5BY,EAAE,EAAEC,SAAS,GAAG,GAAG;EACnBC,SAAS;EACTC,WAAW;EACXC,QAAQ;EACRC,MAAM,GAAG,OAAO;EAChBC,OAAO;EACPC,2BAA2B;EAC3BT,iBAAiB;EACjBU,OAAO,GAAG,SAAS;EACnBC,QAAQ,GAAG,KAAK;EAChBC,cAAc,GAAG,IAAI;EACrB,GAAGC;AACW,CAAC,EAAEC,GAAoC,KAAK;EAC1D,MAAMC,IAAI,GAAGtB,OAAO,CAAC,CAAC;EACtB,IAAIuB,gBAAgB;EAEpB,IAAIT,MAAM,KAAK,QAAQ,EAAE;IACvB,MAAMU,WAAW,GAAGA,CAAA,KAAM;MACxB,IAAI;QAAEC;MAAI,CAAC,GAAGL,KAAK;MACnB,IAAI,CAACK,GAAG,EAAE;QACR,OAAO,qBAAqB;MAC9B;MACA,IAAI,CAACA,GAAG,CAACC,QAAQ,CAAC,UAAU,CAAC,EAAE;QAC7BD,GAAG,IAAI,WAAW;MACpB;MACA,IAAI,CAACA,GAAG,CAACC,QAAQ,CAAC,YAAY,CAAC,EAAE;QAC/BD,GAAG,IAAI,aAAa;MACtB;MACA,OAAOA,GAAG;IACZ,CAAC;;IAED;IACAL,KAAK,CAACK,GAAG,GAAGD,WAAW,CAAC,CAAC;IACzB,IAAIL,cAAc,EAAE;MAClBI,gBAAgB,gBACd3B,KAAA,CAAA+B,aAAA;QACEhB,SAAS,EAAC,+BAA+B;QACzCiB,KAAK,EAAErB,iBAAiB,IAAIe,IAAI,CAACO,aAAa,CAAC1B,QAAQ,CAACI,iBAAiB;MAAE,gBAE3EX,KAAA,CAAA+B,aAAA,CAACzB,IAAI;QACH4B,GAAG,EAAE7B,MAAO;QACZ8B,gBAAgB,EAAEf,2BAA2B,IAAIM,IAAI,CAACO,aAAa,CAAC1B,QAAQ,CAACC,mBAAmB,CAAE;QAClG4B,KAAK,EAAE;UAAEC,MAAM,EAAE,KAAK;UAAEC,KAAK,EAAE;QAAM,CAAE;QACvC,eAAY;MAAgB,CAC7B,CACG,CACP;IACH;EACF;EAEA,MAAMC,eAAoC,GAAG;IAAE,GAAGf;EAAM,CAAC;EACzD,IAAIR,WAAW,EAAE;IACfuB,eAAe,CAACC,IAAI,GAAGxB,WAAW;EACpC;EAEA,oBACEhB,KAAA,CAAA+B,aAAA,CAACjB,SAAS;IACRW,GAAG,EAAEA,GAAI;IACTV,SAAS,EAAEb,UAAU,CACnB,gBAAgB,EAChB,GAAGmB,OAAO,OAAO,EACjB;MACE,iBAAiB,EAAE,CAACC,QAAQ;MAC5B,aAAa,EAAEA;IACjB,CAAC,EACDP,SACF,CAAE;IACFG,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IAAA,GACboB;EAAe,GAElBtB,QAAQ,EACRU,gBACQ,CAAC;AAEhB,CAAC,CAAC;AAEFf,SAAS,CAAC6B,WAAW,GAAG,WAAW;AAEnC,eAAe7B,SAAS","ignoreList":[]}
@@ -64,7 +64,7 @@
64
64
  }
65
65
 
66
66
  .pgn__checkpoint-page-index {
67
- font-size: $small-font-size;
67
+ font-size: var(--pgn-typography-font-size-sm);
68
68
  }
69
69
  }
70
70
 
@@ -1,5 +1,11 @@
1
1
  {
2
2
  "themeUrls": {
3
+ "core": {
4
+ "paths": {
5
+ "default": "./core.css",
6
+ "minified": "./core.min.css"
7
+ }
8
+ },
3
9
  "defaults": {
4
10
  "light": "light"
5
11
  },
@@ -10,12 +16,6 @@
10
16
  "minified": "./light.min.css"
11
17
  }
12
18
  }
13
- },
14
- "core": {
15
- "paths": {
16
- "default": "./core.css",
17
- "minified": "./core.min.css"
18
- }
19
19
  }
20
20
  }
21
21
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openedx/paragon",
3
- "version": "23.14.3",
3
+ "version": "23.14.5",
4
4
  "description": "Accessible, responsive UI component library based on Bootstrap.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
@@ -27,11 +27,12 @@
27
27
  "sideEffects": false,
28
28
  "scripts": {
29
29
  "build": "make build",
30
- "build-docs": "npm run build --workspace=www",
30
+ "build-docs": "make build-docs",
31
31
  "commit": "commit",
32
32
  "debug-test": "node --inspect-brk node_modules/.bin/jest --runInBand --coverage",
33
33
  "stylelint": "stylelint \"src/**/*.scss\" \"scss/**/*.scss\" \"www/src/**/*.scss\" --config .stylelintrc.json",
34
- "lint": "npm run stylelint && eslint --ext .js --ext .jsx --ext .ts --ext .tsx --ext .json . && npm run lint --workspaces --if-present",
34
+ "eslint": "eslint --ext .js --ext .jsx --ext .ts --ext .tsx --ext .json .",
35
+ "lint": "make lint",
35
36
  "lint:fix": "npm run stylelint && eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx --ext .json . && npm run lint --workspaces --if-present",
36
37
  "prepublishOnly": "npm run build",
37
38
  "semantic-release": "semantic-release",
@@ -100,7 +101,7 @@
100
101
  "react-table": "^7.7.0",
101
102
  "react-transition-group": "^4.4.2",
102
103
  "sass": "^1.58.3",
103
- "style-dictionary": "^4.3.2",
104
+ "style-dictionary": "^4.4.0",
104
105
  "tabbable": "^5.3.3",
105
106
  "uncontrollable": "^7.2.1",
106
107
  "uuid": "^9.0.0"
@@ -1,5 +1,4 @@
1
1
  import React, { ForwardedRef } from 'react';
2
- import PropTypes from 'prop-types';
3
2
  import { useIntl } from 'react-intl';
4
3
  import classNames from 'classnames';
5
4
  // @ts-ignore
@@ -21,15 +20,30 @@ export interface OverflowScrollContextProps {
21
20
  }
22
21
 
23
22
  export interface ChipCarouselProps {
23
+ /** Specifies class name for the ChipCarousel. */
24
24
  className?: string;
25
+ /** Specifies array of `Chip` elements to be rendered inside the carousel. */
25
26
  items: Array<React.ReactElement>;
27
+ /** Text describing the ChipCarousel for screen readers. */
26
28
  ariaLabel: string;
29
+ /** Whether the default opacity masks should be shown at the start/end, if applicable. */
27
30
  disableOpacityMasks?: boolean;
31
+ /** Callback function for when the user scrolls to the previous element. */
28
32
  onScrollPrevious?: () => void;
33
+ /** Callback function for when the user scrolls to the next element. */
29
34
  onScrollNext?: () => void;
35
+ /** Whether users can scroll within the overflow container. */
30
36
  canScrollHorizontal?: boolean;
37
+ /** A value specifying the distance the scroll should move. */
31
38
  offset?: number | string;
39
+ /** Type of offset value (percentage or fixed). */
32
40
  offsetType?: 'percentage' | 'fixed';
41
+ /**
42
+ * Specifies inner space between children blocks.
43
+ *
44
+ * Valid values are based on `the spacing classes`:
45
+ * `0, 0.5, ... 6`.
46
+ */
33
47
  gap?: number;
34
48
  }
35
49
 
@@ -43,7 +57,7 @@ const ChipCarousel = React.forwardRef(({
43
57
  canScrollHorizontal = false,
44
58
  offset = 120,
45
59
  offsetType = 'fixed',
46
- gap,
60
+ gap = 3,
47
61
  ...props
48
62
  }: ChipCarouselProps, ref: ForwardedRef<HTMLDivElement>) => {
49
63
  const intl = useIntl();
@@ -115,44 +129,4 @@ const ChipCarousel = React.forwardRef(({
115
129
  );
116
130
  });
117
131
 
118
- ChipCarousel.propTypes = {
119
- /** Text describing the ChipCarousel for screen readers. */
120
- ariaLabel: PropTypes.string.isRequired,
121
- /** Specifies class name for the ChipCarousel. */
122
- className: PropTypes.string,
123
- /** Specifies array of `Chip` elements to be rendered inside the carousel. */
124
- // @ts-ignore
125
- items: PropTypes.arrayOf(PropTypes.element).isRequired,
126
- /** Whether the default opacity masks should be shown at the start/end, if applicable. */
127
- disableOpacityMasks: PropTypes.bool,
128
- /** Callback function for when the user scrolls to the previous element. */
129
- onScrollPrevious: PropTypes.func,
130
- /** Callback function for when the user scrolls to the next element. */
131
- onScrollNext: PropTypes.func,
132
- /** Whether users can scroll within the overflow container. */
133
- canScrollHorizontal: PropTypes.bool,
134
- /** A value specifying the distance the scroll should move. */
135
- offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
136
- /** Type of offset value (percentage or fixed). */
137
- offsetType: PropTypes.oneOf(['percentage', 'fixed']),
138
- /**
139
- * Specifies inner space between children blocks.
140
- *
141
- * Valid values are based on `the spacing classes`:
142
- * `0, 0.5, ... 6`.
143
- */
144
- gap: PropTypes.number,
145
- };
146
-
147
- ChipCarousel.defaultProps = {
148
- className: undefined,
149
- disableOpacityMasks: undefined,
150
- onScrollPrevious: undefined,
151
- onScrollNext: undefined,
152
- canScrollHorizontal: false,
153
- offset: 120,
154
- offsetType: 'fixed',
155
- gap: 3,
156
- };
157
-
158
132
  export default ChipCarousel;