@deque/cauldron-react 4.0.0-canary.c3398f14 → 4.0.0-canary.debe968f

package/lib/components/Icon/types.d.ts

@@ -2,6 +2,6 @@
  * GENERATED CODE. DO NOT EDIT DIRECTLY!
  */
 /** IconType represents each valid icon type. */
-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' | 'close' | 'code' | 'copy' | 'download' | 'exchange' | 'external-link' | 'eye' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'new-releases' | 'new' | 'no' | 'pencil' | 'plus' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle' | 'robot' | 'run-again' | 'save' | 'share' | 'sort' | 'star' | 'sun' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'upload';
+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' | 'close' | 'code' | 'copy' | 'download' | 'exchange' | 'external-link' | 'eye' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'new-releases' | 'new' | 'no' | 'pencil' | 'plus' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle' | 'robot' | 'run-again' | 'save' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'sun' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'upload';
 /** iconTypes holds each valid icon type. */
 export declare const iconTypes: string[];

package/lib/components/Table/TableHeader.d.ts

@@ -1,14 +1,19 @@
 import React, { ThHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
+declare type SortDirection = 'ascending' | 'descending' | 'none';
 interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
     children: React.ReactNode;
+    sortDirection?: SortDirection;
+    onSort?: () => void;
     className?: string;
 }
 declare const TableHeader: {
-    ({ children, className, ...other }: TableHeaderProps): JSX.Element;
+    ({ children, sortDirection, onSort, className, ...other }: TableHeaderProps): JSX.Element;
     displayName: string;
     propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        sortDirection: PropTypes.Requireable<string>;
+        onSort: PropTypes.Requireable<(...args: any[]) => any>;
         className: PropTypes.Requireable<string>;
     };
 };

package/lib/index.js

@@ -177,6 +177,7 @@ var iconTypes = [
     'run-again',
     'save',
     'share',
+    'sort-triangle',
     'sort',
     'star',
     'sun',
@@ -240,6 +241,7 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/run-again.svg': return Promise.resolve().then(function () { return require('./run-again.js'); });
     case './icons/save.svg': return Promise.resolve().then(function () { return require('./save.js'); });
     case './icons/share.svg': return Promise.resolve().then(function () { return require('./share.js'); });
+    case './icons/sort-triangle.svg': return Promise.resolve().then(function () { return require('./sort-triangle.js'); });
     case './icons/sort.svg': return Promise.resolve().then(function () { return require('./sort.js'); });
     case './icons/star.svg': return Promise.resolve().then(function () { return require('./star.js'); });
     case './icons/sun.svg': return Promise.resolve().then(function () { return require('./sun.js'); });
@@ -8054,12 +8056,19 @@ TableHead.propTypes = {
 };
 
 var TableHeader = function (_a) {
-    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default.createElement("th", tslib.__assign({ className: classNames('TableHeader', className) }, other), children));
+    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className"]);
+    return (React__default.createElement("th", tslib.__assign({ "aria-sort": sortDirection, className: classNames('TableHeader', className, {
+            'TableHeader--sort-ascending': sortDirection === 'ascending',
+            'TableHeader--sort-descending': sortDirection === 'descending'
+        }) }, other), !!onSort && !!sortDirection ? (React__default.createElement("button", { onClick: onSort, className: "TableHeader__sort-button", type: "button" },
+        children,
+        React__default.createElement("span", { "aria-hidden": "true" }, sortDirection === 'none' ? (React__default.createElement(Icon, { type: "sort-triangle" })) : sortDirection === 'ascending' ? (React__default.createElement(Icon, { type: "triangle-up" })) : (React__default.createElement(Icon, { type: "triangle-down" }))))) : (children)));
 };
 TableHeader.displayName = 'TableHeader';
 TableHeader.propTypes = {
     children: PropTypes.node.isRequired,
+    sortDirection: PropTypes.string,
+    onSort: PropTypes.func,
     className: PropTypes.string
 };
 

package/lib/sort-triangle.js

@@ -0,0 +1,24 @@
+'use strict';
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+
+var _path;
+
+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); }
+
+const SvgSortTriangle = props => /*#__PURE__*/React.createElement("svg", _extends({
+  overflow: "visible",
+  preserveAspectRatio: "none",
+  viewBox: "0 0 24 24",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M17.13 13.54a.634.634 0 0 0-.47-.2H7.34c-.36 0-.66.29-.67.65 0 .18.07.35.2.48l4.66 4.66c.25.26.66.27.92.02l.02-.02 4.66-4.66c.26-.25.28-.65.03-.91-.01-.02-.02-.02-.03-.02zm0-4-4.66-4.66a.649.649 0 0 0-.92-.02l-.02.02-4.66 4.66c-.25.27-.24.69.03.95.12.11.28.18.44.18h9.33c.36 0 .66-.3.66-.66a.72.72 0 0 0-.2-.47z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
+})));
+
+exports.default = SvgSortTriangle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.0.0-canary.c3398f14",
+  "version": "4.0.0-canary.debe968f",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"
@@ -22,7 +22,6 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.5.4",
-    "@rollup/plugin-dynamic-import-vars": "^1.4.2",
     "classnames": "^2.2.6",
     "focus-trap-react": "^3.0.5",
     "focusable": "^2.3.0",
@@ -44,6 +43,7 @@
     "@babel/preset-typescript": "^7.9.0",
     "@babel/register": "^7.9.0",
     "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-dynamic-import-vars": "^1.4.2",
     "@rollup/plugin-typescript": "^5.0.2",
     "@svgr/rollup": "^6.1.2",
     "@types/classnames": "^2.2.10",