@openedx/paragon 22.6.1 → 22.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Chip/ChipIcon.d.ts +11 -6
- package/dist/Chip/ChipIcon.js +0 -2
- package/dist/Chip/ChipIcon.js.map +1 -1
- package/dist/Chip/constants.d.ts +4 -0
- package/dist/Chip/constants.js +3 -2
- package/dist/Chip/constants.js.map +1 -0
- package/dist/Chip/index.d.ts +2 -1
- package/dist/Chip/index.js +0 -2
- package/dist/Chip/index.js.map +1 -1
- package/dist/ChipCarousel/index.js +0 -2
- package/dist/ChipCarousel/index.js.map +1 -1
- package/dist/IconButton/index.d.ts +344 -0
- package/dist/IconButton/index.js +17 -25
- package/dist/IconButton/index.js.map +1 -1
- package/dist/Menu/SelectMenu.js +9 -4
- package/dist/Menu/SelectMenu.js.map +1 -1
- package/dist/Overlay/index.d.ts +128 -0
- package/dist/Overlay/index.js +5 -0
- package/dist/Overlay/index.js.map +1 -1
- package/dist/Tooltip/index.d.ts +7 -0
- package/dist/Tooltip/index.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/src/Chip/{Chip.test.jsx → Chip.test.tsx} +5 -7
- package/src/Chip/ChipIcon.tsx +7 -7
- package/src/Chip/{constants.js → constants.ts} +1 -1
- package/src/Chip/index.tsx +1 -3
- package/src/ChipCarousel/index.tsx +0 -2
- package/src/IconButton/{IconButton.test.jsx → IconButton.test.tsx} +24 -3
- package/src/IconButton/__snapshots__/IconButton.test.tsx.snap +112 -0
- package/src/IconButton/{index.jsx → index.tsx} +62 -22
- package/src/Menu/SelectMenu.jsx +5 -0
- package/src/Menu/SelectMenu.test.jsx +6 -0
- package/src/Menu/select-menu.md +8 -0
- package/src/Overlay/{index.jsx → index.tsx} +10 -6
- package/src/Tooltip/{index.jsx → index.tsx} +9 -3
- package/src/index.d.ts +3 -3
- package/src/index.js +3 -3
- package/src/IconButton/__snapshots__/IconButton.test.jsx.snap +0 -43
- /package/src/Chip/__snapshots__/{Chip.test.jsx.snap → Chip.test.tsx.snap} +0 -0
- /package/src/Tooltip/{Tooltip.test.jsx → Tooltip.test.tsx} +0 -0
package/dist/Chip/ChipIcon.d.ts
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import React, { KeyboardEventHandler, MouseEventHandler } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
|
-
|
|
3
|
+
import { STYLE_VARIANTS } from './constants';
|
|
4
|
+
export type ChipIconProps = {
|
|
4
5
|
className: string;
|
|
5
6
|
src: React.ComponentType;
|
|
6
|
-
|
|
7
|
-
alt?: string;
|
|
8
|
-
variant: string;
|
|
7
|
+
variant: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS];
|
|
9
8
|
disabled?: boolean;
|
|
10
|
-
}
|
|
9
|
+
} & ({
|
|
10
|
+
onClick: KeyboardEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLButtonElement>;
|
|
11
|
+
alt: string;
|
|
12
|
+
} | {
|
|
13
|
+
onClick?: undefined;
|
|
14
|
+
alt?: undefined;
|
|
15
|
+
});
|
|
11
16
|
declare function ChipIcon({ className, src, onClick, alt, variant, disabled, }: ChipIconProps): React.JSX.Element;
|
|
12
17
|
declare namespace ChipIcon {
|
|
13
18
|
var propTypes: {
|
|
@@ -21,7 +26,7 @@ declare namespace ChipIcon {
|
|
|
21
26
|
var defaultProps: {
|
|
22
27
|
onClick: undefined;
|
|
23
28
|
alt: undefined;
|
|
24
|
-
variant:
|
|
29
|
+
variant: "light";
|
|
25
30
|
disabled: boolean;
|
|
26
31
|
};
|
|
27
32
|
}
|
package/dist/Chip/ChipIcon.js
CHANGED
|
@@ -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';\
|
|
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":[]}
|
package/dist/Chip/constants.js
CHANGED
|
@@ -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":[]}
|
package/dist/Chip/index.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
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?:
|
|
8
|
+
variant?: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS];
|
|
8
9
|
iconBefore?: React.ComponentType;
|
|
9
10
|
iconBeforeAlt?: string;
|
|
10
11
|
iconAfter?: React.ComponentType;
|
package/dist/Chip/index.js
CHANGED
|
@@ -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) {
|
package/dist/Chip/index.js.map
CHANGED
|
@@ -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","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';\
|
|
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';\
|
|
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":";;;;;;;;;;AAAA,OAAOA,KAAK,MAAwB,OAAO;AAC3C,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,OAAO,QAAQ,YAAY;AACpC,OAAOC,UAAU,MAAM,YAAY;AACnC;AACA,SAASC,cAAc,EAAEC,qBAAqB,QAAQ,mBAAmB;AACzE,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,IAAI,MAAM,SAAS;AAC1B;AACA,SAASC,YAAY,EAAEC,SAAS,QAAQ,aAAa;AACrD;AACA,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,IAAI,MAAM,SAAS;AAuB1B,IAAMC,YAAY,gBAAGZ,KAAK,CAACa,UAAU,CAAC,UAAAC,IAAA,EAYhBC,GAAiC,EAAK;EAAA,IAX1DC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,mBAAmB,GAAAL,IAAA,CAAnBK,mBAAmB;IACnBC,gBAAgB,GAAAN,IAAA,CAAhBM,gBAAgB;IAChBC,YAAY,GAAAP,IAAA,CAAZO,YAAY;IAAAC,qBAAA,GAAAR,IAAA,CACZS,mBAAmB;IAAnBA,mBAAmB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,WAAA,GAAAV,IAAA,CAC3BW,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,GAAG,GAAAA,WAAA;IAAAE,eAAA,GAAAZ,IAAA,CACZa,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,OAAO,GAAAA,eAAA;IACpBE,GAAG,GAAAd,IAAA,CAAHc,GAAG;IACAC,KAAK,GAAAC,wBAAA,CAAAhB,IAAA,EAAAiB,SAAA;EAER,IAAMC,IAAI,GAAG9B,OAAO,CAAC,CAAC;EAEtB,oBACEF,KAAA,CAAAiC,aAAA,QAAAC,QAAA;IACElB,SAAS,EAAEb,UAAU,CAAC,oBAAoB,EAAEa,SAAS,EAAEY,GAAG,8BAAAO,MAAA,CAA8BP,GAAG,IAAK,EAAE;EAAE,GAChGC,KAAK;IACTd,GAAG,EAAEA;EAAI,iBAETf,KAAA,CAAAiC,aAAA,CAAC7B,cAAc;IACbc,SAAS,EAAEA,SAAU;IACrBkB,sBAAsB;IACtBC,aAAa,EAAE,CAACd,mBAAoB;IACpCJ,mBAAmB,EAAEA,mBAAoB;IACzCC,gBAAgB,EAAEA,gBAAiB;IACnCC,YAAY,EAAEA,YAAa;IAC3BI,MAAM,EAAEA,MAAO;IACfE,UAAU,EAAEA;EAAW,gBAEvB3B,KAAA,CAAAiC,aAAA,CAAC5B,qBAAqB,CAACiC,QAAQ,QAC5B,UAAAC,KAAA;IAAA,IACCC,cAAc,GAAAD,KAAA,CAAdC,cAAc;MACdC,iBAAiB,GAAAF,KAAA,CAAjBE,iBAAiB;MACjBC,eAAe,GAAAH,KAAA,CAAfG,eAAe;MACfC,gBAAgB,GAAAJ,KAAA,CAAhBI,gBAAgB;MAChBC,YAAY,GAAAL,KAAA,CAAZK,YAAY;IAAA,oBAEZ5C,KAAA,CAAAiC,aAAA,CAAAjC,KAAA,CAAA6C,QAAA,qBACE7C,KAAA,CAAAiC,aAAA,CAAAjC,KAAA,CAAA6C,QAAA,QACG,CAACJ,iBAAiB,iBACjBzC,KAAA,CAAAiC,aAAA,CAAC3B,UAAU;MACTwC,IAAI,EAAC,IAAI;MACT9B,SAAS,EAAC,kCAAkC;MAC5C+B,GAAG,EAAEtC,SAAU;MACfuC,MAAM,EAAEzC,IAAK;MACb0C,GAAG,EAAEjB,IAAI,CAACkB,aAAa,CAACxC,QAAQ,CAACiC,gBAAgB,CAAE;MACnDQ,OAAO,EAAER;IAAiB,CAC3B,CACF,EACA,CAACD,eAAe,iBACf1C,KAAA,CAAAiC,aAAA,CAAC3B,UAAU;MACTwC,IAAI,EAAC,IAAI;MACT9B,SAAS,EAAC,mCAAmC;MAC7C+B,GAAG,EAAEvC,YAAa;MAClBwC,MAAM,EAAEzC,IAAK;MACb0C,GAAG,EAAEjB,IAAI,CAACkB,aAAa,CAACxC,QAAQ,CAACkC,YAAY,CAAE;MAC/CO,OAAO,EAAEP;IAAa,CACvB,CAEH,CAAC,eACH5C,KAAA,CAAAiC,aAAA;MAAKlB,GAAG,EAAEyB,cAAe;MAACxB,SAAS,EAAC;IAAQ,gBAC1ChB,KAAA,CAAAiC,aAAA,CAAC7B,cAAc,CAACgD,KAAK,QAClBnC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEoC,GAAG,CAAC,UAACC,IAAI,EAAEC,EAAE,EAAK;MACxB,IAAAC,KAAA,GAAqB,CAAAF,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEzB,KAAK,KAAI,CAAC,CAAC;QAA9B4B,QAAQ,GAAAD,KAAA,CAARC,QAAQ;MAChB,IAAI,CAACA,QAAQ,EAAE;QACb,OAAO,IAAI;MACb;MACA;MACA,oBAAOzD,KAAK,CAACiC,aAAa,CAACtB,IAAI,EAAA+C,aAAA,CAAAA,aAAA,KAAOJ,IAAI,CAACzB,KAAK;QAAE8B,GAAG,EAAEJ;MAAE,EAAE,CAAC;IAC9D,CAAC,CACmB,CACnB,CACL,CAAC;EAAA,CAEyB,CAClB,CACb,CAAC;AAEV,CAAC,CAAC;AAEF3C,YAAY,CAACgD,SAAS,GAAG;EACvB;EACA1C,SAAS,EAAEjB,SAAS,CAAC4D,MAAM,CAACC,UAAU;EACtC;EACA9C,SAAS,EAAEf,SAAS,CAAC4D,MAAM;EAC3B;EACA;EACA5C,KAAK,EAAEhB,SAAS,CAAC8D,OAAO,CAAC9D,SAAS,CAAC+D,OAAO,CAAC,CAACF,UAAU;EACtD;EACA3C,mBAAmB,EAAElB,SAAS,CAACgE,IAAI;EACnC;EACA7C,gBAAgB,EAAEnB,SAAS,CAACiE,IAAI;EAChC;EACA7C,YAAY,EAAEpB,SAAS,CAACiE,IAAI;EAC5B;EACA3C,mBAAmB,EAAEtB,SAAS,CAACgE,IAAI;EACnC;EACAxC,MAAM,EAAExB,SAAS,CAACkE,SAAS,CAAC,CAAClE,SAAS,CAACmE,MAAM,EAAEnE,SAAS,CAAC4D,MAAM,CAAC,CAAC;EACjE;EACAlC,UAAU,EAAE1B,SAAS,CAACoE,KAAK,CAAC,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;EACpD;AACF;AACA;AACA;AACA;AACA;EACEzC,GAAG,EAAE3B,SAAS,CAACmE;AACjB,CAAC;AAEDxD,YAAY,CAAC0D,YAAY,GAAG;EAC1BtD,SAAS,EAAEuD,SAAS;EACpBpD,mBAAmB,EAAEoD,SAAS;EAC9BnD,gBAAgB,EAAEmD,SAAS;EAC3BlD,YAAY,EAAEkD,SAAS;EACvBhD,mBAAmB,EAAE,KAAK;EAC1BE,MAAM,EAAE,GAAG;EACXE,UAAU,EAAE,OAAO;EACnBC,GAAG,EAAE;AACP,CAAC;AAED,eAAehB,YAAY","ignoreList":[]}
|
|
@@ -0,0 +1,344 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
4
|
+
import { type Placement } from 'react-bootstrap/Overlay';
|
|
5
|
+
import Icon from '../Icon';
|
|
6
|
+
interface Props extends React.HTMLAttributes<HTMLButtonElement> {
|
|
7
|
+
iconAs?: typeof Icon | typeof FontAwesomeIcon;
|
|
8
|
+
/** Additional CSS class[es] to apply to this button */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Alt text for your icon. For best practice, avoid using alt text to describe
|
|
11
|
+
* the image in the `IconButton`. Instead, we recommend describing the function
|
|
12
|
+
* of the button. */
|
|
13
|
+
alt: string;
|
|
14
|
+
/** Changes icon styles for dark background */
|
|
15
|
+
invertColors?: boolean;
|
|
16
|
+
/** An icon component to render. Example import of a Paragon icon component:
|
|
17
|
+
* `import { Check } from '@openedx/paragon/icons';`
|
|
18
|
+
* */
|
|
19
|
+
src?: React.ComponentType;
|
|
20
|
+
/** Extra class names that will be added to the icon */
|
|
21
|
+
iconClassNames?: string;
|
|
22
|
+
/** Click handler for the button */
|
|
23
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
24
|
+
/** whether to show the `IconButton` in an active state, whose styling is distinct from default state */
|
|
25
|
+
isActive?: boolean;
|
|
26
|
+
/** @deprecated Using FontAwesome icons is deprecated. Instead, pass iconAs={Icon} src={...} */
|
|
27
|
+
icon?: {
|
|
28
|
+
prefix?: string;
|
|
29
|
+
iconName?: string;
|
|
30
|
+
icon?: any[];
|
|
31
|
+
};
|
|
32
|
+
/** Type of button (uses Bootstrap options) */
|
|
33
|
+
variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';
|
|
34
|
+
/** size of button to render */
|
|
35
|
+
size?: 'sm' | 'md' | 'inline';
|
|
36
|
+
/** no children */
|
|
37
|
+
children?: never;
|
|
38
|
+
}
|
|
39
|
+
interface PropsWithTooltip extends Props {
|
|
40
|
+
/** choose from https://popper.js.org/docs/v2/constructors/#options */
|
|
41
|
+
tooltipPlacement: Placement;
|
|
42
|
+
/** any content to pass to tooltip content area */
|
|
43
|
+
tooltipContent: React.ReactNode;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* An icon button wrapped in overlaytrigger to display a tooltip.
|
|
47
|
+
*/
|
|
48
|
+
declare function IconButtonWithTooltip({ tooltipPlacement, tooltipContent, ...props }: PropsWithTooltip): React.JSX.Element;
|
|
49
|
+
declare namespace IconButtonWithTooltip {
|
|
50
|
+
var defaultProps: {
|
|
51
|
+
tooltipPlacement: string;
|
|
52
|
+
iconAs?: React.FC<import("../Icon").IconProps> | typeof FontAwesomeIcon | undefined;
|
|
53
|
+
className?: string | undefined;
|
|
54
|
+
alt?: string | undefined;
|
|
55
|
+
invertColors?: boolean | undefined;
|
|
56
|
+
src?: React.ComponentType<{}> | undefined;
|
|
57
|
+
iconClassNames?: string | undefined;
|
|
58
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
59
|
+
isActive?: boolean | undefined;
|
|
60
|
+
icon?: {
|
|
61
|
+
prefix?: string | undefined;
|
|
62
|
+
iconName?: string | undefined;
|
|
63
|
+
icon?: any[] | undefined;
|
|
64
|
+
} | undefined;
|
|
65
|
+
variant?: "primary" | "success" | "warning" | "secondary" | "danger" | "dark" | "light" | "black" | "brand" | undefined;
|
|
66
|
+
size?: "sm" | "md" | "inline" | undefined;
|
|
67
|
+
children?: undefined;
|
|
68
|
+
defaultChecked?: boolean | undefined;
|
|
69
|
+
defaultValue?: string | number | readonly string[] | undefined;
|
|
70
|
+
suppressContentEditableWarning?: boolean | undefined;
|
|
71
|
+
suppressHydrationWarning?: boolean | undefined;
|
|
72
|
+
accessKey?: string | undefined;
|
|
73
|
+
autoFocus?: boolean | undefined;
|
|
74
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
|
|
75
|
+
contextMenu?: string | undefined;
|
|
76
|
+
dir?: string | undefined;
|
|
77
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
78
|
+
hidden?: boolean | undefined;
|
|
79
|
+
id?: string | undefined;
|
|
80
|
+
lang?: string | undefined;
|
|
81
|
+
nonce?: string | undefined;
|
|
82
|
+
placeholder?: string | undefined;
|
|
83
|
+
slot?: string | undefined;
|
|
84
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
85
|
+
style?: React.CSSProperties | undefined;
|
|
86
|
+
tabIndex?: number | undefined;
|
|
87
|
+
title?: string | undefined;
|
|
88
|
+
translate?: "yes" | "no" | undefined;
|
|
89
|
+
radioGroup?: string | undefined;
|
|
90
|
+
role?: React.AriaRole | undefined;
|
|
91
|
+
about?: string | undefined;
|
|
92
|
+
content?: string | undefined;
|
|
93
|
+
datatype?: string | undefined;
|
|
94
|
+
inlist?: any;
|
|
95
|
+
prefix?: string | undefined;
|
|
96
|
+
property?: string | undefined;
|
|
97
|
+
rel?: string | undefined;
|
|
98
|
+
resource?: string | undefined;
|
|
99
|
+
rev?: string | undefined;
|
|
100
|
+
typeof?: string | undefined;
|
|
101
|
+
vocab?: string | undefined;
|
|
102
|
+
autoCapitalize?: string | undefined;
|
|
103
|
+
autoCorrect?: string | undefined;
|
|
104
|
+
autoSave?: string | undefined;
|
|
105
|
+
color?: string | undefined;
|
|
106
|
+
itemProp?: string | undefined;
|
|
107
|
+
itemScope?: boolean | undefined;
|
|
108
|
+
itemType?: string | undefined;
|
|
109
|
+
itemID?: string | undefined;
|
|
110
|
+
itemRef?: string | undefined;
|
|
111
|
+
results?: number | undefined;
|
|
112
|
+
security?: string | undefined;
|
|
113
|
+
unselectable?: "on" | "off" | undefined;
|
|
114
|
+
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
115
|
+
is?: string | undefined;
|
|
116
|
+
"aria-activedescendant"?: string | undefined;
|
|
117
|
+
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
118
|
+
"aria-autocomplete"?: "inline" | "list" | "none" | "both" | undefined;
|
|
119
|
+
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
120
|
+
"aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
121
|
+
"aria-colcount"?: number | undefined;
|
|
122
|
+
"aria-colindex"?: number | undefined;
|
|
123
|
+
"aria-colspan"?: number | undefined;
|
|
124
|
+
"aria-controls"?: string | undefined;
|
|
125
|
+
"aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
|
|
126
|
+
"aria-describedby"?: string | undefined;
|
|
127
|
+
"aria-details"?: string | undefined;
|
|
128
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
129
|
+
"aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
|
|
130
|
+
"aria-errormessage"?: string | undefined;
|
|
131
|
+
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
132
|
+
"aria-flowto"?: string | undefined;
|
|
133
|
+
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
134
|
+
"aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
|
|
135
|
+
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
136
|
+
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
137
|
+
"aria-keyshortcuts"?: string | undefined;
|
|
138
|
+
"aria-label"?: string | undefined;
|
|
139
|
+
"aria-labelledby"?: string | undefined;
|
|
140
|
+
"aria-level"?: number | undefined;
|
|
141
|
+
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
142
|
+
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
143
|
+
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
144
|
+
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
145
|
+
"aria-orientation"?: "horizontal" | "vertical" | undefined;
|
|
146
|
+
"aria-owns"?: string | undefined;
|
|
147
|
+
"aria-placeholder"?: string | undefined;
|
|
148
|
+
"aria-posinset"?: number | undefined;
|
|
149
|
+
"aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
150
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
151
|
+
"aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
152
|
+
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
153
|
+
"aria-roledescription"?: string | undefined;
|
|
154
|
+
"aria-rowcount"?: number | undefined;
|
|
155
|
+
"aria-rowindex"?: number | undefined;
|
|
156
|
+
"aria-rowspan"?: number | undefined;
|
|
157
|
+
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
158
|
+
"aria-setsize"?: number | undefined;
|
|
159
|
+
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
160
|
+
"aria-valuemax"?: number | undefined;
|
|
161
|
+
"aria-valuemin"?: number | undefined;
|
|
162
|
+
"aria-valuenow"?: number | undefined;
|
|
163
|
+
"aria-valuetext"?: string | undefined;
|
|
164
|
+
dangerouslySetInnerHTML?: {
|
|
165
|
+
__html: string | TrustedHTML;
|
|
166
|
+
} | undefined;
|
|
167
|
+
onCopy?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
168
|
+
onCopyCapture?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
169
|
+
onCut?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
170
|
+
onCutCapture?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
171
|
+
onPaste?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
172
|
+
onPasteCapture?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
173
|
+
onCompositionEnd?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
174
|
+
onCompositionEndCapture?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
175
|
+
onCompositionStart?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
176
|
+
onCompositionStartCapture?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
177
|
+
onCompositionUpdate?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
178
|
+
onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
179
|
+
onFocus?: React.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
180
|
+
onFocusCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
181
|
+
onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
182
|
+
onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
183
|
+
onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
|
|
184
|
+
onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
|
|
185
|
+
onBeforeInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
|
|
186
|
+
onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
|
|
187
|
+
onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
|
|
188
|
+
onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
|
|
189
|
+
onReset?: React.FormEventHandler<HTMLButtonElement> | undefined;
|
|
190
|
+
onResetCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
|
|
191
|
+
onSubmit?: React.FormEventHandler<HTMLButtonElement> | undefined;
|
|
192
|
+
onSubmitCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
|
|
193
|
+
onInvalid?: React.FormEventHandler<HTMLButtonElement> | undefined;
|
|
194
|
+
onInvalidCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
|
|
195
|
+
onLoad?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
196
|
+
onLoadCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
197
|
+
onError?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
198
|
+
onErrorCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
199
|
+
onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
200
|
+
onKeyDownCapture?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
201
|
+
onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
202
|
+
onKeyPressCapture?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
203
|
+
onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
204
|
+
onKeyUpCapture?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
205
|
+
onAbort?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
206
|
+
onAbortCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
207
|
+
onCanPlay?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
208
|
+
onCanPlayCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
209
|
+
onCanPlayThrough?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
210
|
+
onCanPlayThroughCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
211
|
+
onDurationChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
212
|
+
onDurationChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
213
|
+
onEmptied?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
214
|
+
onEmptiedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
215
|
+
onEncrypted?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
216
|
+
onEncryptedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
217
|
+
onEnded?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
218
|
+
onEndedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
219
|
+
onLoadedData?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
220
|
+
onLoadedDataCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
221
|
+
onLoadedMetadata?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
222
|
+
onLoadedMetadataCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
223
|
+
onLoadStart?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
224
|
+
onLoadStartCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
225
|
+
onPause?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
226
|
+
onPauseCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
227
|
+
onPlay?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
228
|
+
onPlayCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
229
|
+
onPlaying?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
230
|
+
onPlayingCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
231
|
+
onProgress?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
232
|
+
onProgressCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
233
|
+
onRateChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
234
|
+
onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
235
|
+
onSeeked?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
236
|
+
onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
237
|
+
onSeeking?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
238
|
+
onSeekingCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
239
|
+
onStalled?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
240
|
+
onStalledCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
241
|
+
onSuspend?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
242
|
+
onSuspendCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
243
|
+
onTimeUpdate?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
244
|
+
onTimeUpdateCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
245
|
+
onVolumeChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
246
|
+
onVolumeChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
247
|
+
onWaiting?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
248
|
+
onWaitingCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
249
|
+
onAuxClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
250
|
+
onAuxClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
251
|
+
onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
252
|
+
onContextMenu?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
253
|
+
onContextMenuCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
254
|
+
onDoubleClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
255
|
+
onDoubleClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
256
|
+
onDrag?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
257
|
+
onDragCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
258
|
+
onDragEnd?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
259
|
+
onDragEndCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
260
|
+
onDragEnter?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
261
|
+
onDragEnterCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
262
|
+
onDragExit?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
263
|
+
onDragExitCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
264
|
+
onDragLeave?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
265
|
+
onDragLeaveCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
266
|
+
onDragOver?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
267
|
+
onDragOverCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
268
|
+
onDragStart?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
269
|
+
onDragStartCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
270
|
+
onDrop?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
271
|
+
onDropCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
|
|
272
|
+
onMouseDown?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
273
|
+
onMouseDownCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
274
|
+
onMouseEnter?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
275
|
+
onMouseLeave?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
276
|
+
onMouseMove?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
277
|
+
onMouseMoveCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
278
|
+
onMouseOut?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
279
|
+
onMouseOutCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
280
|
+
onMouseOver?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
281
|
+
onMouseOverCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
282
|
+
onMouseUp?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
283
|
+
onMouseUpCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
284
|
+
onSelect?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
285
|
+
onSelectCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
286
|
+
onTouchCancel?: React.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
287
|
+
onTouchCancelCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
288
|
+
onTouchEnd?: React.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
289
|
+
onTouchEndCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
290
|
+
onTouchMove?: React.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
291
|
+
onTouchMoveCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
292
|
+
onTouchStart?: React.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
293
|
+
onTouchStartCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
294
|
+
onPointerDown?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
295
|
+
onPointerDownCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
296
|
+
onPointerMove?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
297
|
+
onPointerMoveCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
298
|
+
onPointerUp?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
299
|
+
onPointerUpCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
300
|
+
onPointerCancel?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
301
|
+
onPointerCancelCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
302
|
+
onPointerEnter?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
303
|
+
onPointerEnterCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
304
|
+
onPointerLeave?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
305
|
+
onPointerLeaveCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
306
|
+
onPointerOver?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
307
|
+
onPointerOverCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
308
|
+
onPointerOut?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
309
|
+
onPointerOutCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
310
|
+
onGotPointerCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
311
|
+
onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
312
|
+
onLostPointerCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
313
|
+
onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
314
|
+
onScroll?: React.UIEventHandler<HTMLButtonElement> | undefined;
|
|
315
|
+
onScrollCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
|
|
316
|
+
onWheel?: React.WheelEventHandler<HTMLButtonElement> | undefined;
|
|
317
|
+
onWheelCapture?: React.WheelEventHandler<HTMLButtonElement> | undefined;
|
|
318
|
+
onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
319
|
+
onAnimationStartCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
320
|
+
onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
321
|
+
onAnimationEndCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
322
|
+
onAnimationIteration?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
323
|
+
onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
324
|
+
onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
325
|
+
onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
326
|
+
ref?: React.Ref<HTMLButtonElement> | undefined;
|
|
327
|
+
key?: React.Key | null | undefined;
|
|
328
|
+
};
|
|
329
|
+
var propTypes: {
|
|
330
|
+
/** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options */
|
|
331
|
+
tooltipPlacement: PropTypes.Requireable<string>;
|
|
332
|
+
/** any valid JSX or text to be rendered as tooltip contents */
|
|
333
|
+
tooltipContent: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
|
|
334
|
+
/** Type of button (uses Bootstrap options) */
|
|
335
|
+
variant: PropTypes.Requireable<string>;
|
|
336
|
+
/** Changes icon styles for dark background */
|
|
337
|
+
invertColors: PropTypes.Requireable<boolean>;
|
|
338
|
+
};
|
|
339
|
+
}
|
|
340
|
+
declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>> & {
|
|
341
|
+
IconButtonWithTooltip: typeof IconButtonWithTooltip;
|
|
342
|
+
};
|
|
343
|
+
export default _default;
|
|
344
|
+
export { IconButtonWithTooltip };
|