@deque/cauldron-react 4.5.0-canary.0c764a21 → 4.5.0-canary.7f1627ef

package/lib/components/Pagination/Pagination.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Placement } from '@popperjs/core';
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    totalItems: number;
+    itemsPerPage?: number;
+    currentPage?: number;
+    statusLabel?: React.ReactNode;
+    firstPageLabel?: string;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
+    lastPageLabel?: string;
+    onNextPageClick?: () => void;
+    onPreviousPageClick?: () => void;
+    onFirstPageClick?: () => void;
+    onLastPageClick?: () => void;
+    tooltipPlacement?: Placement;
+    className?: string;
+}
+declare const Pagination: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Pagination;

package/lib/components/Pagination/index.d.ts

@@ -1,20 +1,3 @@
-import React from 'react';
-import { Placement } from '@popperjs/core';
-interface Props extends React.HTMLAttributes<HTMLDivElement> {
-    totalItems: number;
-    itemsPerPage?: number;
-    currentPage?: number;
-    statusLabel?: React.ReactNode;
-    firstPageLabel?: string;
-    previousPageLabel?: string;
-    nextPageLabel?: string;
-    lastPageLabel?: string;
-    onNextPageClick?: () => void;
-    onPreviousPageClick?: () => void;
-    onFirstPageClick?: () => void;
-    onLastPageClick?: () => void;
-    tooltipPlacement?: Placement;
-    className?: string;
-}
-declare const Pagination: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+import Pagination from './Pagination';
+export { usePagination } from './usePagination';
 export default Pagination;

package/lib/components/Pagination/usePagination.d.ts

@@ -0,0 +1,24 @@
+interface Options {
+    totalItems: number;
+    initialPageSize?: number;
+    initialPage?: number;
+}
+interface PaginationResults {
+    totalItems: number;
+    currentPage: number;
+    itemsPerPage: number;
+    onNextPageClick: () => void;
+    onPreviousPageClick: () => void;
+    onFirstPageClick: () => void;
+    onLastPageClick: () => void;
+}
+interface PageStatus {
+    currentPage: number;
+    pageStart: number;
+    pageEnd: number;
+}
+export declare const usePagination: ({ totalItems, initialPageSize, initialPage }: Options) => {
+    pagination: PaginationResults;
+    pageStatus: PageStatus;
+};
+export {};

package/lib/components/RadioCardGroup/index.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IconType } from '../Icon';
+export interface RadioItem extends React.InputHTMLAttributes<HTMLInputElement> {
+    label: React.ReactNode;
+    cardImg: JSX.Element;
+    cardIcon: IconType;
+    value?: string;
+}
+export interface RadioCardGroupProps {
+    name?: string;
+    className?: string;
+    radios: RadioItem[];
+    defaultValue?: string;
+    value?: any;
+    onChange: (radio: RadioItem, input: HTMLElement) => void;
+}
+declare const RadioCardGroup: {
+    ({ name, radios, defaultValue, value, onChange, className, ...other }: RadioCardGroupProps): JSX.Element;
+    propTypes: {
+        name: PropTypes.Requireable<string>;
+        radios: PropTypes.Validator<(PropTypes.InferProps<{
+            value: PropTypes.Validator<string>;
+            id: PropTypes.Validator<string>;
+            label: PropTypes.Validator<string>;
+            cardImg: PropTypes.Validator<PropTypes.ReactElementLike>;
+            cardIcon: PropTypes.Validator<string>;
+        }> | null | undefined)[]>;
+        hasLabel: (props: {
+            [key: string]: string;
+        }, propName: string, componentName: string) => Error | undefined;
+        className: PropTypes.Requireable<string>;
+        defaultValue: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    displayName: string;
+};
+export default RadioCardGroup;

package/lib/index.d.ts

@@ -25,6 +25,7 @@ export { default as Loader } from './components/Loader';
 export { default as OptionsMenu, OptionsMenuList, OptionsMenuItem, OptionsMenuTrigger, OptionsMenuWrapper } from './components/OptionsMenu';
 export { default as Select, SelectOption, SelectProps } from './components/Select';
 export { default as RadioGroup } from './components/RadioGroup';
+export { default as RadioCardGroup } from './components/RadioCardGroup';
 export { default as Checkbox } from './components/Checkbox';
 export { default as Tooltip, TooltipHead, TooltipContent } from './components/Tooltip';
 export { default as TooltipTabstop } from './components/TooltipTabstop';
@@ -45,7 +46,7 @@ export { default as Panel } from './components/Panel';
 export { default as IssuePanel } from './components/IssuePanel';
 export { default as ProgressBar } from './components/ProgressBar';
 export { Address, AddressLine, AddressCityStateZip } from './components/Address';
-export { default as Pagination } from './components/Pagination';
+export { default as Pagination, usePagination } from './components/Pagination';
 export { default as FieldWrap } from './components/FieldWrap';
 export { default as Breadcrumb, BreadcrumbItem, BreadcrumbLink } from './components/Breadcrumb';
 export { default as TwoColumnPanel, ColumnHeader, ColumnGroupHeader, ColumnLeft, ColumnRight, ColumnList } from './components/TwoColumnPanel';

package/lib/index.js

@@ -2389,6 +2389,125 @@ RadioGroup.propTypes = {
 };
 RadioGroup.displayName = 'RadioGroup';
 
+var Card = function (_a) {
+    var className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["className", "variant"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames(className, {
+            'Card--simple': variant === 'simple',
+            Card: !variant
+        }) }, other)));
+};
+Card.displayName = 'Card';
+Card.propTypes = {
+    className: PropTypes.string,
+    variant: PropTypes.string
+};
+
+var CardHeader = function (_a) {
+    var className = _a.className, other = tslib.__rest(_a, ["className"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('Card__header', className) }, other)));
+};
+CardHeader.displayName = 'CardHeader';
+CardHeader.propTypes = {
+    className: PropTypes.string
+};
+
+var CardContent = function (_a) {
+    var className = _a.className, other = tslib.__rest(_a, ["className"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('Card__content', className) }, other)));
+};
+CardContent.displayName = 'CardContent';
+CardContent.propTypes = {
+    className: PropTypes.string
+};
+
+var CardFooter = function (_a) {
+    var className = _a.className, other = tslib.__rest(_a, ["className"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('Card__footer', className) }, other)));
+};
+CardFooter.displayName = 'CardFooter';
+CardFooter.propTypes = {
+    className: PropTypes.string
+};
+
+var RadioCardGroup = function (_a) {
+    var name = _a.name, radios = _a.radios, defaultValue = _a.defaultValue, value = _a.value, 
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _b = _a.onChange, 
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = _b === void 0 ? function () { } : _b, className = _a.className, other = tslib.__rest(_a, ["name", "radios", "defaultValue", "value", "onChange", "className"]);
+    var _c = tslib.__read(React.useState(value !== null && value !== void 0 ? value : defaultValue), 2), currentValue = _c[0], setCurrentValue = _c[1];
+    var _d = tslib.__read(React.useState(null), 2), focusIndex = _d[0], setFocusIndex = _d[1];
+    var inputs = React.useRef([]);
+    var handleChange = function (value) { return setCurrentValue(value); };
+    var onRadioFocus = function (index) { return setFocusIndex(index); };
+    var onRadioBlur = function () { return setFocusIndex(null); };
+    var onRadioClick = function (index) {
+        var _a;
+        var radio = (_a = inputs.current) === null || _a === void 0 ? void 0 : _a[index];
+        if (!radio) {
+            return;
+        }
+        radio.click();
+        radio.focus();
+    };
+    React.useEffect(function () {
+        if (typeof value === 'undefined') {
+            return;
+        }
+        setCurrentValue(value);
+    }, [value]);
+    var radioButtons = radios.map(function (radio, index) {
+        var label = radio.label, disabled = radio.disabled, radioValue = radio.value, cardImg = radio.cardImg, cardIcon = radio.cardIcon, id = radio.id, className = radio.className, other = tslib.__rest(radio, ["label", "disabled", "value", "cardImg", "cardIcon", "id", "className"]);
+        var isChecked = currentValue === radioValue;
+        var isFocused = focusIndex === index;
+        return (React__default.createElement("div", { className: classNames('RadioCard'), key: index },
+            React__default.createElement(Card, { variant: "simple", className: classNames('RadioCardGroup__Card RadioCard__overlay', {
+                    'RadioCard__overlay--focused': isFocused,
+                    'RadioCard__overlay--checked': isChecked,
+                    'RadioCard__overlay--disabled': disabled
+                }), onClick: function () { return onRadioClick(index); } },
+                React__default.createElement("input", tslib.__assign({ type: "radio", name: name, value: radioValue, id: id, ref: function (input) {
+                        if (!input) {
+                            return;
+                        }
+                        inputs.current.push(input);
+                    }, onFocus: function () { return onRadioFocus(index); }, onBlur: function () { return onRadioBlur(); }, onChange: function () {
+                        var _a;
+                        handleChange(radioValue);
+                        onChange(radio, (_a = inputs.current) === null || _a === void 0 ? void 0 : _a[index]);
+                    }, disabled: disabled, checked: isChecked }, other)),
+                React__default.createElement(CardContent, null,
+                    React__default.createElement("div", { className: classNames('RadioCardGroup__Checked') }, isChecked && (React__default.createElement(Icon, { className: classNames('RadioCardGroup__Icon'), type: cardIcon }))),
+                    React__default.createElement("div", { className: classNames('RadioCardGroup__Base') },
+                        React__default.createElement("div", { className: classNames('RadioCardGroup__Image') }, cardImg),
+                        React__default.createElement("label", { htmlFor: id, className: classNames('RadioCardGroup__Label') }, label))))));
+    });
+    // reset the input refs array
+    // refs get clobbered every re-render anyway and this supports "dynamic" radios
+    // (changing the number of radio buttons for example)
+    inputs.current = [];
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('RadioCardGroup'), role: "radiogroup" }, other), radioButtons));
+};
+RadioCardGroup.propTypes = {
+    name: PropTypes.string,
+    radios: PropTypes.arrayOf(PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        id: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired,
+        cardImg: PropTypes.element.isRequired,
+        cardIcon: PropTypes.string.isRequired
+    })).isRequired,
+    hasLabel: function (props, propName, componentName) {
+        if (!props['aria-label'] && !props['aria-labelledby']) {
+            return new Error(componentName + " must have an \"aria-label\" or \"aria-labelledby\" prop");
+        }
+    },
+    className: PropTypes.string,
+    defaultValue: PropTypes.string,
+    onChange: PropTypes.func
+};
+RadioCardGroup.displayName = 'RadioCardGroup';
+
 var Checkbox = React.forwardRef(function (_a, ref) {
     var id = _a.id, label = _a.label, labelDescription = _a.labelDescription, error = _a.error, checkboxRef = _a.checkboxRef, className = _a.className, onChange = _a.onChange, ariaDescribedby = _a["aria-describedby"], _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, other = tslib.__rest(_a, ["id", "label", "labelDescription", "error", "checkboxRef", "className", "onChange", 'aria-describedby', "disabled", "checked"]);
     var _d = tslib.__read(React.useState(checked), 2), isChecked = _d[0], setIsChecked = _d[1];
@@ -2458,46 +2577,6 @@ function TooltipTabstop(_a) {
 }
 TooltipTabstop.displayName = 'TooltipTabstop';
 
-var Card = function (_a) {
-    var className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["className", "variant"]);
-    return (React__default.createElement("div", tslib.__assign({ className: classNames(className, {
-            'Card--simple': variant === 'simple',
-            Card: !variant
-        }) }, other)));
-};
-Card.displayName = 'Card';
-Card.propTypes = {
-    className: PropTypes.string,
-    variant: PropTypes.string
-};
-
-var CardHeader = function (_a) {
-    var className = _a.className, other = tslib.__rest(_a, ["className"]);
-    return (React__default.createElement("div", tslib.__assign({ className: classNames('Card__header', className) }, other)));
-};
-CardHeader.displayName = 'CardHeader';
-CardHeader.propTypes = {
-    className: PropTypes.string
-};
-
-var CardContent = function (_a) {
-    var className = _a.className, other = tslib.__rest(_a, ["className"]);
-    return (React__default.createElement("div", tslib.__assign({ className: classNames('Card__content', className) }, other)));
-};
-CardContent.displayName = 'CardContent';
-CardContent.propTypes = {
-    className: PropTypes.string
-};
-
-var CardFooter = function (_a) {
-    var className = _a.className, other = tslib.__rest(_a, ["className"]);
-    return (React__default.createElement("div", tslib.__assign({ className: classNames('Card__footer', className) }, other)));
-};
-CardFooter.displayName = 'CardFooter';
-CardFooter.propTypes = {
-    className: PropTypes.string
-};
-
 var TextField = /** @class */ (function (_super) {
     tslib.__extends(TextField, _super);
     function TextField(props) {
@@ -8532,6 +8611,34 @@ Pagination.propTypes = {
     className: PropTypes.string
 };
 
+var usePagination = function (_a) {
+    var totalItems = _a.totalItems, _b = _a.initialPageSize, initialPageSize = _b === void 0 ? 10 : _b, _c = _a.initialPage, initialPage = _c === void 0 ? 1 : _c;
+    var _d = tslib.__read(React.useState(initialPage), 2), currentPage = _d[0], setCurrentPage = _d[1];
+    var pageStart = currentPage * initialPageSize - initialPageSize + 1;
+    var pageEnd = Math.min(pageStart + initialPageSize - 1, totalItems);
+    var onFirstPageClick = function () { return setCurrentPage(1); };
+    var onPreviousPageClick = function () { return setCurrentPage(currentPage - 1); };
+    var onNextPageClick = function () { return setCurrentPage(currentPage + 1); };
+    var onLastPageClick = function () {
+        return setCurrentPage(Math.ceil(totalItems / initialPageSize));
+    };
+    var pagination = {
+        totalItems: totalItems,
+        currentPage: currentPage,
+        itemsPerPage: initialPageSize,
+        onFirstPageClick: onFirstPageClick,
+        onPreviousPageClick: onPreviousPageClick,
+        onNextPageClick: onNextPageClick,
+        onLastPageClick: onLastPageClick
+    };
+    var pageStatus = {
+        currentPage: currentPage,
+        pageStart: pageStart,
+        pageEnd: pageEnd
+    };
+    return { pagination: pagination, pageStatus: pageStatus };
+};
+
 var FieldWrap = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.as, Component = _b === void 0 ? 'div' : _b, props = tslib.__rest(_a, ["children", "className", "as"]);
     return (React__default.createElement(Component, tslib.__assign({ ref: ref, className: classNames('Panel', className) }, props), children));
@@ -8857,6 +8964,7 @@ exports.Panel = Panel;
 exports.PanelTrigger = PanelTrigger$1;
 exports.Pointout = Pointout;
 exports.ProgressBar = ProgressBar;
+exports.RadioCardGroup = RadioCardGroup;
 exports.RadioGroup = RadioGroup;
 exports.Scrim = Scrim;
 exports.Select = Select;
@@ -8894,4 +9002,5 @@ exports.Workspace = Workspace;
 exports.focusableSelector = focusableSelector;
 exports.iconTypes = iconTypes;
 exports.useDidUpdate = useDidUpdate;
+exports.usePagination = usePagination;
 exports.useThemeContext = useThemeContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.5.0-canary.0c764a21",
+  "version": "4.5.0-canary.7f1627ef",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"