@deque/cauldron-react 5.0.0-canary.e4949a7d → 5.0.0-canary.f2e189b3
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/lib/components/Icon/types.d.ts +1 -1
- package/lib/components/Pagination/Pagination.d.ts +5 -4
- package/lib/hashtag.js +23 -0
- package/lib/index.js +27 -14
- package/lib/propTypes.d.ts +6 -0
- package/lib/types.d.ts +6 -0
- package/package.json +1 -1
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
* GENERATED CODE. DO NOT EDIT DIRECTLY!
|
|
3
3
|
*/
|
|
4
4
|
/** IconType represents each valid icon type. */
|
|
5
|
-
export declare type IconType = 'add-user' | 'arrow-circle-up' | 'arrow-circle-down' | 'arrow-circle-left' | 'arrow-circle-right' | 'arrow-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrows-alt' | 'bolt' | 'caution' | 'check-circle' | 'check-shield' | 'check-solid' | 'check' | 'checkbox-checked' | 'checkbox-unchecked' | 'chevron-double-up' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'clipboard' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'export-solid' | 'external-link' | 'eye' | 'filter-solid' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'link' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'person-running' | 'play' | 'plus' | 'question-circle-alt' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share-nodes' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'sun' | 'table-sort-ascending' | 'table-sort-descending' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'upload';
|
|
5
|
+
export declare type IconType = 'add-user' | 'arrow-circle-up' | 'arrow-circle-down' | 'arrow-circle-left' | 'arrow-circle-right' | 'arrow-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrows-alt' | 'bolt' | 'caution' | 'check-circle' | 'check-shield' | 'check-solid' | 'check' | 'checkbox-checked' | 'checkbox-unchecked' | 'chevron-double-up' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'clipboard' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'export-solid' | 'external-link' | 'eye' | 'filter-solid' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'hashtag' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'link' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'person-running' | 'play' | 'plus' | 'question-circle-alt' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share-nodes' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'sun' | 'table-sort-ascending' | 'table-sort-descending' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'upload';
|
|
6
6
|
/** iconTypes holds each valid icon type. */
|
|
7
7
|
export declare const iconTypes: string[];
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Placement } from '@popperjs/core';
|
|
3
|
+
import { ContentNode } from '../../types';
|
|
3
4
|
interface Props extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
5
|
totalItems: number;
|
|
5
6
|
itemsPerPage?: number;
|
|
6
7
|
currentPage?: number;
|
|
7
8
|
statusLabel?: React.ReactNode;
|
|
8
|
-
firstPageLabel?:
|
|
9
|
-
previousPageLabel?:
|
|
10
|
-
nextPageLabel?:
|
|
11
|
-
lastPageLabel?:
|
|
9
|
+
firstPageLabel?: ContentNode;
|
|
10
|
+
previousPageLabel?: ContentNode;
|
|
11
|
+
nextPageLabel?: ContentNode;
|
|
12
|
+
lastPageLabel?: ContentNode;
|
|
12
13
|
onNextPageClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
13
14
|
onPreviousPageClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
14
15
|
onFirstPageClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
package/lib/hashtag.js
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var React__default = _interopDefault(React);
|
|
7
|
+
|
|
8
|
+
var _path;
|
|
9
|
+
|
|
10
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
11
|
+
|
|
12
|
+
const SvgHashtag = props => /*#__PURE__*/React.createElement("svg", _extends({
|
|
13
|
+
preserveAspectRatio: "none",
|
|
14
|
+
viewBox: "0 0 24 24",
|
|
15
|
+
height: 24,
|
|
16
|
+
width: 24
|
|
17
|
+
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
18
|
+
d: "M9.71.02c.93.16 1.56 1.04 1.41 1.97l-.52 3.15h5.09l.62-3.71C16.47.5 17.35-.13 18.28.02s1.56 1.04 1.41 1.97l-.52 3.15h3.12a1.71 1.71 0 1 1 0 3.42H18.6l-1.14 6.85h3.12a1.71 1.71 0 1 1 0 3.42h-3.69l-.62 3.71c-.16.93-1.04 1.56-1.97 1.41s-1.56-1.04-1.41-1.97l.52-3.14h-5.1l-.62 3.71c-.16.93-1.04 1.56-1.97 1.41s-1.56-1.04-1.41-1.97l.52-3.15H1.72c-.95.01-1.72-.75-1.72-1.7s.77-1.71 1.71-1.71H5.4l1.14-6.85H3.42a1.71 1.71 0 1 1 0-3.42h3.69l.62-3.71C7.89.52 8.77-.11 9.7.04Zm.31 8.55-1.14 6.85h5.09l1.14-6.85h-5.09Z",
|
|
19
|
+
fill: "currentColor",
|
|
20
|
+
vectorEffect: "non-scaling-stroke"
|
|
21
|
+
})));
|
|
22
|
+
|
|
23
|
+
exports.default = SvgHashtag;
|
package/lib/index.js
CHANGED
|
@@ -159,6 +159,7 @@ var iconTypes = [
|
|
|
159
159
|
'gears',
|
|
160
160
|
'grid',
|
|
161
161
|
'hamburger-menu',
|
|
162
|
+
'hashtag',
|
|
162
163
|
'highlight',
|
|
163
164
|
'info-circle-alt',
|
|
164
165
|
'info-circle',
|
|
@@ -237,6 +238,7 @@ function __variableDynamicImportRuntime0__(path) {
|
|
|
237
238
|
case './icons/gears.svg': return Promise.resolve().then(function () { return require('./gears.js'); });
|
|
238
239
|
case './icons/grid.svg': return Promise.resolve().then(function () { return require('./grid.js'); });
|
|
239
240
|
case './icons/hamburger-menu.svg': return Promise.resolve().then(function () { return require('./hamburger-menu.js'); });
|
|
241
|
+
case './icons/hashtag.svg': return Promise.resolve().then(function () { return require('./hashtag.js'); });
|
|
240
242
|
case './icons/highlight.svg': return Promise.resolve().then(function () { return require('./highlight.js'); });
|
|
241
243
|
case './icons/info-circle-alt.svg': return Promise.resolve().then(function () { return require('./info-circle-alt.js'); });
|
|
242
244
|
case './icons/info-circle.svg': return Promise.resolve().then(function () { return require('./info-circle.js'); });
|
|
@@ -1914,7 +1916,7 @@ var IconButton = React.forwardRef(function (_a, ref) {
|
|
|
1914
1916
|
'IconButton--error': variant === 'error'
|
|
1915
1917
|
}), ref: internalRef, disabled: disabled, tabIndex: disabled ? -1 : tabIndex }, accessibilityProps, other),
|
|
1916
1918
|
React__default.createElement(Icon, { type: icon }),
|
|
1917
|
-
React__default.createElement(Offscreen, null, label)),
|
|
1919
|
+
disabled && React__default.createElement(Offscreen, null, label)),
|
|
1918
1920
|
!disabled && (React__default.createElement(Tooltip, { target: internalRef, placement: tooltipPlacement, variant: tooltipVariant, portal: tooltipPortal, association: "aria-labelledby", hideElementOnHidden: true }, label))));
|
|
1919
1921
|
});
|
|
1920
1922
|
IconButton.propTypes = {
|
|
@@ -8676,6 +8678,16 @@ AddressCityStateZip.propTypes = {
|
|
|
8676
8678
|
className: PropTypes.string
|
|
8677
8679
|
};
|
|
8678
8680
|
|
|
8681
|
+
/**
|
|
8682
|
+
* This prop type is meant to ensure that a prop can actually be rendered as content.
|
|
8683
|
+
* It should match the ContentNode type in types.ts
|
|
8684
|
+
*/
|
|
8685
|
+
var contentNode = PropTypes.oneOfType([
|
|
8686
|
+
PropTypes.string,
|
|
8687
|
+
PropTypes.number,
|
|
8688
|
+
PropTypes.element
|
|
8689
|
+
]);
|
|
8690
|
+
|
|
8679
8691
|
var Pagination = React__default.forwardRef(function (_a, ref) {
|
|
8680
8692
|
var totalItems = _a.totalItems, _b = _a.itemsPerPage, itemsPerPage = _b === void 0 ? 10 : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, statusLabel = _a.statusLabel, _d = _a.firstPageLabel, firstPageLabel = _d === void 0 ? 'First page' : _d, _e = _a.previousPageLabel, previousPageLabel = _e === void 0 ? 'Previous page' : _e, _f = _a.nextPageLabel, nextPageLabel = _f === void 0 ? 'Next page' : _f, _g = _a.lastPageLabel, lastPageLabel = _g === void 0 ? 'Last page' : _g, _h = _a.tooltipPlacement, tooltipPlacement = _h === void 0 ? 'bottom' : _h, onNextPageClick = _a.onNextPageClick, onPreviousPageClick = _a.onPreviousPageClick, onFirstPageClick = _a.onFirstPageClick, onLastPageClick = _a.onLastPageClick, className = _a.className, _j = _a.thin, thin = _j === void 0 ? false : _j, other = tslib.__rest(_a, ["totalItems", "itemsPerPage", "currentPage", "statusLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "tooltipPlacement", "onNextPageClick", "onPreviousPageClick", "onFirstPageClick", "onLastPageClick", "className", "thin"]);
|
|
8681
8693
|
var itemStart = currentPage * itemsPerPage - itemsPerPage + 1;
|
|
@@ -8686,10 +8698,10 @@ var Pagination = React__default.forwardRef(function (_a, ref) {
|
|
|
8686
8698
|
'Pagination--thin': thin
|
|
8687
8699
|
}) }, other),
|
|
8688
8700
|
React__default.createElement("ul", null,
|
|
8689
|
-
React__default.createElement("li", null,
|
|
8690
|
-
React__default.createElement(
|
|
8691
|
-
React__default.createElement("li", null,
|
|
8692
|
-
React__default.createElement(
|
|
8701
|
+
React__default.createElement("li", null,
|
|
8702
|
+
React__default.createElement(IconButton, { icon: "chevron-double-left", tooltipPlacement: tooltipPlacement, label: firstPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onFirstPageClick })),
|
|
8703
|
+
React__default.createElement("li", null,
|
|
8704
|
+
React__default.createElement(IconButton, { icon: "chevron-left", tooltipPlacement: tooltipPlacement, label: previousPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onPreviousPageClick })),
|
|
8693
8705
|
React__default.createElement("li", null,
|
|
8694
8706
|
React__default.createElement("span", { role: "log", "aria-atomic": "true" }, statusLabel || (React__default.createElement("span", null,
|
|
8695
8707
|
"Showing ",
|
|
@@ -8699,10 +8711,10 @@ var Pagination = React__default.forwardRef(function (_a, ref) {
|
|
|
8699
8711
|
React__default.createElement("strong", null, itemEnd),
|
|
8700
8712
|
" of ",
|
|
8701
8713
|
React__default.createElement("strong", null, totalItems))))),
|
|
8702
|
-
React__default.createElement("li", null,
|
|
8703
|
-
React__default.createElement(
|
|
8704
|
-
React__default.createElement("li", null,
|
|
8705
|
-
React__default.createElement(
|
|
8714
|
+
React__default.createElement("li", null,
|
|
8715
|
+
React__default.createElement(IconButton, { icon: "chevron-right", tooltipPlacement: tooltipPlacement, label: nextPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onNextPageClick })),
|
|
8716
|
+
React__default.createElement("li", null,
|
|
8717
|
+
React__default.createElement(IconButton, { icon: "chevron-double-right", tooltipPlacement: tooltipPlacement, label: lastPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onLastPageClick })))));
|
|
8706
8718
|
});
|
|
8707
8719
|
Pagination.displayName = 'Pagination';
|
|
8708
8720
|
Pagination.propTypes = {
|
|
@@ -8710,17 +8722,18 @@ Pagination.propTypes = {
|
|
|
8710
8722
|
itemsPerPage: PropTypes.number,
|
|
8711
8723
|
currentPage: PropTypes.number,
|
|
8712
8724
|
statusLabel: PropTypes.element,
|
|
8713
|
-
firstPageLabel:
|
|
8714
|
-
previousPageLabel:
|
|
8715
|
-
nextPageLabel:
|
|
8716
|
-
lastPageLabel:
|
|
8725
|
+
firstPageLabel: contentNode,
|
|
8726
|
+
previousPageLabel: contentNode,
|
|
8727
|
+
nextPageLabel: contentNode,
|
|
8728
|
+
lastPageLabel: contentNode,
|
|
8717
8729
|
onNextPageClick: PropTypes.func,
|
|
8718
8730
|
onPreviousPageClick: PropTypes.func,
|
|
8719
8731
|
onFirstPageClick: PropTypes.func,
|
|
8720
8732
|
onLastPageClick: PropTypes.func,
|
|
8721
8733
|
// @ts-expect-error
|
|
8722
8734
|
tooltipPlacement: PropTypes.string,
|
|
8723
|
-
className: PropTypes.string
|
|
8735
|
+
className: PropTypes.string,
|
|
8736
|
+
thin: PropTypes.bool
|
|
8724
8737
|
};
|
|
8725
8738
|
|
|
8726
8739
|
var usePagination = function (_a) {
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
|
+
/**
|
|
3
|
+
* This prop type is meant to ensure that a prop can actually be rendered as content.
|
|
4
|
+
* It should match the ContentNode type in types.ts
|
|
5
|
+
*/
|
|
6
|
+
export declare const contentNode: PropTypes.Requireable<string | number | PropTypes.ReactElementLike>;
|
package/lib/types.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ReactElement, ReactFragment, ReactPortal } from 'react';
|
|
1
2
|
export declare namespace Cauldron {
|
|
2
3
|
type LabelProps = {
|
|
3
4
|
'aria-label': string;
|
|
@@ -5,3 +6,8 @@ export declare namespace Cauldron {
|
|
|
5
6
|
'aria-labelledby': string;
|
|
6
7
|
};
|
|
7
8
|
}
|
|
9
|
+
/**
|
|
10
|
+
* This type is meant to ensure that a prop can actually be rendered as content.
|
|
11
|
+
* Explicit equivalent of Exclude<ReactNode, boolean | null | undefined>
|
|
12
|
+
*/
|
|
13
|
+
export declare type ContentNode = string | number | ReactFragment | ReactPortal | ReactElement;
|
package/package.json
CHANGED