@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/DataTable/DataTable.js

@@ -0,0 +1,247 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment, useMemo, useRef, useImperativeHandle } from 'react';
+import DragDrop from '../DragDrop';
+import Pagination from '../Pagination';
+import Spinner from '../Spinner';
+import StackView from '../StackView';
+import Summary from '../Summary';
+import { useCss } from '../system';
+import { useId } from '../hooks';
+import { reorderArray } from '../utils';
+import { BodyRows, HeaderCell } from './components';
+import { CollapsibleRowsContext, useCollapsibleRows, useColumnSort, useColumnWidths, useScrollShadows, useScrollSync, useVariants } from './hooks';
+import { getParsedColumns } from './utils';
+var defaultAccessibility = {
+  toggleAllSubRowsTooltipTitle: function toggleAllSubRowsTooltipTitle(allSubRowsOpen) {
+    return allSubRowsOpen ? 'Close all sub rows' : 'Open all sub rows';
+  }
+};
+var defaultHiddenColumnIds = [];
+
+var _ref3 = /*#__PURE__*/React.createElement(Spinner, {
+  size: "xl"
+});
+
+var DataTable = function DataTable(props) {
+  var _props$accessibility = props.accessibility,
+      accessibility = _props$accessibility === void 0 ? defaultAccessibility : _props$accessibility,
+      innerBodyRef = props.innerBodyRef,
+      _props$canCollapseSub = props.canCollapseSubRows,
+      canCollapseSubRows = _props$canCollapseSub === void 0 ? true : _props$canCollapseSub,
+      columns = props.columns,
+      currentPage = props.currentPage,
+      data = props.data,
+      dataTableRef = props.dataTableRef,
+      defaultSort = props.defaultSort,
+      defaultAllSubRowsOpen = props.defaultAllSubRowsOpen,
+      droppableId = props.droppableId,
+      empty = props.empty,
+      _props$getRowId = props.getRowId,
+      getRowId = _props$getRowId === void 0 ? function (rowData, rowIndex) {
+    return rowData.id || (droppableId === undefined ? rowIndex : droppableId + "-" + rowIndex);
+  } : _props$getRowId,
+      getRowLink = props.getRowLink,
+      getSubData = props.getSubData,
+      _props$hiddenColumnId = props.hiddenColumnIds,
+      hiddenColumnIds = _props$hiddenColumnId === void 0 ? defaultHiddenColumnIds : _props$hiddenColumnId,
+      keyboardShortcuts = props.keyboardShortcuts,
+      loading = props.loading,
+      loadingTitle = props.loadingTitle,
+      onColumnSort = props.onColumnSort,
+      onDragStart = props.onDragStart,
+      onDragEnd = props.onDragEnd,
+      onDrop = props.onDrop,
+      onPageChange = props.onPageChange,
+      onRowClick = props.onRowClick,
+      onRowSort = props.onRowSort,
+      sourceOnly = props.sourceOnly,
+      totalPages = props.totalPages,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? {} : _props$variant;
+  var css = useCss();
+  var tableId = useId('table');
+  var hasParentDragDrop = DragDrop.useDragDrop();
+  var isLoadingOrEmpty = loading || data.length <= 0;
+  var headerRef = useRef();
+  var bodyRef = useRef();
+  var footerRef = useRef();
+  var scrollRefs = [headerRef, bodyRef];
+  var draggable = sourceOnly || onRowSort || onDrop;
+  var getVariant = useVariants(variant);
+  var collapsibleRows = useCollapsibleRows(data, defaultAllSubRowsOpen);
+  var hasSubRows = Boolean(canCollapseSubRows && getSubData);
+  var parsedColumns = useMemo(function () {
+    return getParsedColumns({
+      accessibility: accessibility,
+      hasSubRows: hasSubRows,
+      columns: columns,
+      hiddenColumnIds: hiddenColumnIds,
+      draggable: draggable
+    });
+  }, [columns, hasSubRows, hiddenColumnIds, draggable]);
+  var hasFooterColumns = parsedColumns.map(Object.keys).some(function (keys) {
+    return keys.some(function (key) {
+      return key === 'footer';
+    });
+  });
+
+  var _useColumnWidths = useColumnWidths({
+    columns: parsedColumns,
+    data: data,
+    loading: loading,
+    bodyRef: bodyRef
+  }),
+      columnWidths = _useColumnWidths.columnWidths,
+      getColumnRef = _useColumnWidths.getColumnRef;
+
+  var columnSort = useColumnSort({
+    defaultSort: defaultSort,
+    onColumnSort: onColumnSort
+  });
+  var shadowsToRender = useScrollShadows(bodyRef);
+  var bodyRowsProps = {
+    columns: parsedColumns,
+    collapsibleRows: collapsibleRows,
+    columnWidths: columnWidths,
+    data: data,
+    draggable: draggable,
+    getColumnRef: getColumnRef,
+    getRowId: getRowId,
+    getRowLink: getRowLink,
+    getSubData: getSubData,
+    getVariant: getVariant,
+    keyboardShortcuts: keyboardShortcuts,
+    onRowClick: onRowClick
+  };
+  var bodyToRender;
+
+  if (hasFooterColumns) {
+    scrollRefs.push(footerRef);
+  }
+
+  useScrollSync.apply(void 0, scrollRefs);
+  useImperativeHandle(dataTableRef, function () {
+    return collapsibleRows;
+  });
+
+  if (typeof innerBodyRef === 'function') {
+    innerBodyRef(bodyRef);
+  }
+
+  if (hasParentDragDrop || draggable) {
+    bodyToRender = /*#__PURE__*/React.createElement(DragDrop.Provider, {
+      onDragEnd: function onDragEnd(_ref) {
+        var source = _ref.source,
+            destination = _ref.destination;
+
+        if (onRowSort && destination) {
+          onRowSort(reorderArray({
+            list: data,
+            startIndex: source.index,
+            endIndex: destination.index
+          }));
+        }
+      }
+    }, /*#__PURE__*/React.createElement(DragDrop.Droppable, {
+      droppableId: droppableId === undefined ? tableId : droppableId,
+      sourceOnly: sourceOnly,
+      onDragStart: onDragStart,
+      onDragEnd: onDragEnd,
+      onDrop: onDrop
+    }, function (provided) {
+      return /*#__PURE__*/React.createElement("div", _extends({
+        ref: function ref(_ref2) {
+          bodyRef.current = _ref2;
+          provided.innerRef(_ref2);
+        },
+        role: "rowgroup",
+        className: css(getVariant('body'))
+      }, provided.droppableProps), /*#__PURE__*/React.createElement(BodyRows, bodyRowsProps), provided.placeholder);
+    }));
+  } else {
+    bodyToRender = /*#__PURE__*/React.createElement("div", {
+      ref: bodyRef,
+      role: "rowgroup",
+      className: css(getVariant('body'))
+    }, /*#__PURE__*/React.createElement(BodyRows, bodyRowsProps));
+  }
+
+  return /*#__PURE__*/React.createElement(Fragment, null, isLoadingOrEmpty && /*#__PURE__*/React.createElement(StackView, {
+    grow: 1,
+    alignment: "center",
+    distribution: "center",
+    minHeight: "100%",
+    paddingVertical: 8
+  }, loading ? /*#__PURE__*/React.createElement(Summary, {
+    image: _ref3,
+    title: loadingTitle
+  }) : empty), /*#__PURE__*/React.createElement(CollapsibleRowsContext.Provider, {
+    value: collapsibleRows
+  }, /*#__PURE__*/React.createElement("div", {
+    role: getRowLink ? undefined : 'grid',
+    style: isLoadingOrEmpty ? {
+      display: 'none'
+    } : undefined,
+    className: "uikit-reset " + css({
+      position: 'relative'
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: headerRef,
+    role: "rowgroup",
+    className: css(getVariant('header'))
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "row",
+    className: css(getVariant('headerRow'))
+  }, parsedColumns.map(function (column, columnIndex) {
+    var cellVariantClassName = getVariant('headerCell', {
+      columnIndex: columnIndex,
+      isSortable: column.sortable
+    });
+    return /*#__PURE__*/React.createElement(HeaderCell, {
+      key: columnIndex,
+      cellRef: getColumnRef(columnIndex + ".0"),
+      column: column,
+      columnIndex: columnIndex,
+      columnSort: columnSort,
+      className: "uikit-reset " + css([].concat(cellVariantClassName, [column.css]))
+    });
+  }))), bodyToRender, hasFooterColumns && /*#__PURE__*/React.createElement("div", {
+    ref: footerRef,
+    role: "rowgroup",
+    className: css(getVariant('footer'))
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "row",
+    className: css(getVariant('footerRow'))
+  }, parsedColumns.map(function (column, columnIndex) {
+    var cellVariantClassName = getVariant('footerCell', {
+      columnIndex: columnIndex,
+      isSortable: column.sortable
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      key: columnIndex,
+      role: "cell",
+      ref: getColumnRef(columnIndex + "." + (data.length + 1)),
+      className: "uikit-reset " + css([].concat(cellVariantClassName, [column.css]))
+    }, typeof column.footer === 'string' || /*#__PURE__*/React.isValidElement(column.footer) ? column.footer : column.footer ? /*#__PURE__*/React.createElement(column.footer, {
+      columnIndex: columnIndex
+    }) : null);
+  }))), shadowsToRender, /*#__PURE__*/React.createElement(Pagination, {
+    currentPage: currentPage,
+    totalPages: totalPages,
+    onPageChange: onPageChange,
+    position: "sticky",
+    bottom: 0,
+    zIndex: 35,
+    marginTop: "-1px",
+    backgroundColor: "white",
+    borderTopWidth: 1,
+    borderTopColor: "grey-3",
+    className: css({
+      '@media print': {
+        position: 'relative'
+      }
+    })
+  }))));
+};
+
+export default DataTable;

package/dist/esm/DataTable/components/BodyRow.js

@@ -0,0 +1,49 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import { useKeyboardShortcuts } from '../../hooks';
+
+function BodyRow(_ref) {
+  var innerRef = _ref.innerRef,
+      placeholder = _ref.placeholder,
+      rowData = _ref.rowData,
+      rowIndex = _ref.rowIndex,
+      style = _ref.style,
+      keyboardShortcuts = _ref.keyboardShortcuts,
+      onRowClick = _ref.onRowClick,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["innerRef", "placeholder", "rowData", "rowIndex", "style", "keyboardShortcuts", "onRowClick"]);
+
+  var Component = restProps.href ? 'a' : 'div';
+
+  var _useKeyboardShortcuts = useKeyboardShortcuts(keyboardShortcuts, {
+    rowData: rowData,
+    rowIndex: rowIndex
+  }),
+      bindKeyboardShortcuts = _useKeyboardShortcuts.bindKeyboardShortcuts,
+      unbindKeyboardShortcuts = _useKeyboardShortcuts.unbindKeyboardShortcuts;
+
+  var props = _objectSpread({
+    ref: innerRef,
+    onClick: onRowClick && function () {
+      return onRowClick(rowData, rowIndex);
+    },
+    onMouseEnter: bindKeyboardShortcuts,
+    onMouseLeave: unbindKeyboardShortcuts,
+    style: _objectSpread({
+      opacity: placeholder ? 0.65 : undefined
+    }, style)
+  }, restProps);
+
+  if (!restProps.href) {
+    props.role = 'row';
+  }
+
+  return /*#__PURE__*/React.createElement(Component, props);
+}
+
+export default BodyRow;

package/dist/esm/DataTable/components/BodyRows.js

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { Fragment } from 'react';
+import { useCss } from '../../system';
+import DragDrop from '../../DragDrop';
+import { getCell, getRowLinkProps } from '../utils';
+import BodyRow from './BodyRow';
+import BodySubRows from './BodySubRows';
+
+function BodyRows(_ref) {
+  var columns = _ref.columns,
+      columnWidths = _ref.columnWidths,
+      data = _ref.data,
+      draggable = _ref.draggable,
+      getColumnRef = _ref.getColumnRef,
+      getRowId = _ref.getRowId,
+      getRowLink = _ref.getRowLink,
+      getSubData = _ref.getSubData,
+      getVariant = _ref.getVariant,
+      keyboardShortcuts = _ref.keyboardShortcuts,
+      onRowClick = _ref.onRowClick;
+  var css = useCss();
+  return data.map(function (rowData, rowIndex) {
+    var getCells = function getCells(_dragHandleProps) {
+      return columns.map(function (column, columnIndex) {
+        var cellVariantStyles = getVariant('bodyCell', {
+          rowData: rowData,
+          rowIndex: rowIndex,
+          columnIndex: columnIndex,
+          firstRow: rowIndex === 0,
+          lastRow: rowIndex === Math.max(0, data.length - 1),
+          firstCell: columnIndex === 0,
+          lastCell: columnIndex === Math.max(0, columns.length - 1)
+        });
+        return /*#__PURE__*/React.createElement("div", {
+          key: columnIndex,
+          ref: getColumnRef(columnIndex + "." + (rowIndex + 1)) // offset by 1 to account for header row
+          ,
+          role: "cell",
+          className: "uikit-reset " + css([].concat(cellVariantStyles, [column.css]))
+        }, getCell(column.cell, {
+          columnIndex: columnIndex,
+          rowData: rowData,
+          rowIndex: rowIndex,
+          _dragHandleProps: _dragHandleProps
+        }));
+      });
+    };
+
+    var rowId = getRowId(rowData, rowIndex);
+    var rowVariantClassName = getVariant('bodyRow', {
+      rowData: rowData,
+      rowIndex: rowIndex,
+      isLink: Boolean(getRowLink) || Boolean(onRowClick),
+      firstRow: rowIndex === 0,
+      lastRow: rowIndex === Math.max(0, data.length - 1),
+      evenRow: rowIndex % 2 === 0,
+      oddRow: Math.abs(rowIndex % 2) === 1
+    });
+
+    var rowProps = _objectSpread({
+      rowData: rowData,
+      rowIndex: rowIndex,
+      keyboardShortcuts: keyboardShortcuts,
+      onRowClick: onRowClick,
+      className: "uikit-reset " + css(rowVariantClassName)
+    }, getRowLinkProps({
+      getRowLink: getRowLink,
+      data: rowData,
+      isSubRow: false
+    }));
+
+    var subRowData = getSubData ? getSubData(rowData) : null;
+    var subRows = subRowData && /*#__PURE__*/React.createElement(BodySubRows, {
+      columns: columns,
+      data: subRowData,
+      getColumnRef: getColumnRef,
+      getRowLink: getRowLink,
+      getVariant: getVariant,
+      keyboardShortcuts: keyboardShortcuts,
+      columnWidths: columnWidths,
+      parentRowIndex: rowIndex
+    });
+
+    if (draggable) {
+      return /*#__PURE__*/React.createElement(DragDrop.Draggable, {
+        key: rowId,
+        draggableId: rowId.toString(),
+        index: rowIndex,
+        data: rowData,
+        placeholder: function placeholder() {
+          return /*#__PURE__*/React.createElement(BodyRow, _extends({}, rowProps, {
+            placeholder: true
+          }), getCells({}));
+        }
+      }, function (provided) {
+        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BodyRow, _extends({
+          innerRef: provided.innerRef
+        }, provided.draggableProps, rowProps), getCells(provided.dragHandleProps)), subRows);
+      });
+    } else {
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: rowId
+      }, /*#__PURE__*/React.createElement(BodyRow, rowProps, getCells()), subRows);
+    }
+  });
+}
+
+export default BodyRows;

package/dist/esm/DataTable/components/BodySubRows.js

@@ -0,0 +1,90 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import BodyRow from './BodyRow';
+import Collapse from '../../Collapse';
+import { useCss } from '../../system';
+import { useCollapsibleRowsStore, useSubRowOpen } from '../hooks';
+import { getCell, getRowLinkProps } from '../utils';
+
+var BodySubRowsCollapse = function BodySubRowsCollapse(_ref) {
+  var children = _ref.children,
+      lazy = _ref.lazy,
+      rowIndex = _ref.rowIndex;
+  var instant = useCollapsibleRowsStore(function (state) {
+    return state.instant;
+  });
+  var isSubRowOpen = useSubRowOpen(rowIndex);
+  return /*#__PURE__*/React.createElement(Collapse, {
+    lazy: lazy,
+    instant: instant,
+    open: isSubRowOpen,
+    role: "row",
+    style: {
+      minWidth: 'min-content'
+    }
+  }, children);
+};
+
+var BodySubRows = function BodySubRows(_ref2) {
+  var columns = _ref2.columns,
+      columnWidths = _ref2.columnWidths,
+      data = _ref2.data,
+      getColumnRef = _ref2.getColumnRef,
+      getRowLink = _ref2.getRowLink,
+      getVariant = _ref2.getVariant,
+      keyboardShortcuts = _ref2.keyboardShortcuts,
+      onRowClick = _ref2.onRowClick,
+      parentRowIndex = _ref2.parentRowIndex;
+  var css = useCss();
+  return /*#__PURE__*/React.createElement(BodySubRowsCollapse, {
+    lazy: columns.some(function (column) {
+      return column.includeSubCellWidth;
+    }) === false,
+    rowIndex: parentRowIndex
+  }, data.map(function (rowData, rowIndex) {
+    var rowVariantClassName = getVariant('bodySubRow', {
+      rowData: rowData,
+      rowIndex: rowIndex,
+      parentRowIndex: parentRowIndex,
+      isLink: Boolean(getRowLink) || Boolean(onRowClick),
+      firstRow: rowIndex === 0,
+      lastRow: rowIndex === Math.max(0, data.length - 1),
+      evenRow: rowIndex % 2 === 0,
+      oddRow: Math.abs(rowIndex % 2) === 1
+    });
+    return /*#__PURE__*/React.createElement(BodyRow, _extends({
+      key: rowIndex,
+      rowData: rowData,
+      rowIndex: rowIndex,
+      keyboardShortcuts: keyboardShortcuts,
+      onRowClick: onRowClick,
+      className: "uikit-reset " + css(rowVariantClassName)
+    }, getRowLinkProps({
+      getRowLink: getRowLink,
+      data: rowData,
+      isSubRow: true
+    })), columns.map(function (column, columnIndex) {
+      var cellVariantClassName = getVariant('bodySubCell', {
+        rowData: rowData,
+        rowIndex: rowIndex,
+        columnIndex: columnIndex,
+        columnWidth: columnWidths.current[columnIndex],
+        firstRow: rowIndex === 0,
+        lastRow: rowIndex === Math.max(0, data.length - 1),
+        firstCell: columnIndex === 0,
+        lastCell: columnIndex === Math.max(0, columns.length - 1)
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        key: columnIndex,
+        ref: getColumnRef(columnIndex + "." + (parentRowIndex + 1) + "." + rowIndex),
+        className: "uikit-reset " + css([].concat(cellVariantClassName, [column.css]))
+      }, getCell(column.subCell !== undefined ? column.subCell : column.cell, {
+        columnIndex: columnIndex,
+        rowData: rowData,
+        rowIndex: rowIndex
+      }));
+    }));
+  }));
+};
+
+export default BodySubRows;

package/dist/esm/DataTable/components/CheckboxCell.js

@@ -0,0 +1,104 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useCallback } from 'react';
+import Icon from './Icon';
+var iconPaths = {
+  fill: 'checkbox-0',
+  minus: 'checkbox-1',
+  checked: 'checkbox-2'
+};
+var scaleStyles = {
+  visibility: 'visible',
+  transform: 'scale(1)',
+  transition: 'all 120ms ease-out'
+};
+var initialStyles = {
+  flexShrink: 0,
+  outline: 0,
+  cursor: 'pointer',
+  ' .ui-kit-Checkbox-Fill ': {
+    transform: 'scale(1)',
+    transformOrigin: 'center center',
+    transition: 'all 180ms ease-out'
+  },
+  ' .ui-kit-Checkbox-Minus, .ui-kit-Checkbox-Checked ': {
+    fill: '#fff',
+    visibility: 'hidden',
+    transform: 'scale(0)',
+    transformOrigin: 'center center',
+    transition: 'all 180ms ease-out'
+  },
+  ' &:hover, &:focus ': {
+    ' .ui-kit-Checkbox-Fill ': {
+      transform: 'scale(1.125)'
+    }
+  },
+  ' &:active ': {
+    ' .ui-kit-Checkbox-Fill ': {
+      transform: 'scale(1)'
+    }
+  }
+};
+var checkedStyles = {
+  ' .ui-kit-Checkbox-Checked ': scaleStyles
+};
+var indeterminateStyles = {
+  ' .ui-kit-Checkbox-Minus ': scaleStyles
+};
+
+function CheckboxCell(_ref) {
+  var checked = _ref.checked,
+      disabled = _ref.disabled,
+      indeterminate = _ref.indeterminate,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      props = _objectWithoutPropertiesLoose(_ref, ["checked", "disabled", "indeterminate", "onBlur", "onChange", "onFocus", "size"]);
+
+  var handleChange = useCallback(function (event) {
+    event.preventDefault();
+
+    if (onChange) {
+      onChange(event);
+    }
+  }, [onChange]);
+  var cssStyles = [initialStyles];
+
+  if (checked) {
+    cssStyles.push(checkedStyles);
+  }
+
+  if (indeterminate) {
+    cssStyles.push(indeterminateStyles);
+  }
+
+  return /*#__PURE__*/React.createElement(Icon, {
+    size: size,
+    tabIndex: 0,
+    role: "checkbox",
+    "aria-checked": indeterminate ? 'mixed' : checked,
+    "aria-disabled": disabled,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onClick: handleChange,
+    onKeyDown: function onKeyDown(event) {
+      return event.key === ' ' && handleChange(event);
+    },
+    className: "uikit-reset ui-kit-Checkbox",
+    css: cssStyles
+  }, /*#__PURE__*/React.createElement(Icon.Path, {
+    name: iconPaths.fill,
+    className: "uikit-reset ui-kit-Checkbox-Fill",
+    fill: checked || indeterminate ? 'primary' : 'surfaceTertiary',
+    stroke: checked || indeterminate ? 'primary' : 'separatorSecondary'
+  }), /*#__PURE__*/React.createElement(Icon.Path, {
+    name: iconPaths.minus,
+    className: "uikit-reset ui-kit-Checkbox-Minus"
+  }), /*#__PURE__*/React.createElement(Icon.Path, {
+    name: iconPaths.checked,
+    className: "uikit-reset ui-kit-Checkbox-Checked"
+  }));
+}
+
+export default CheckboxCell;

package/dist/esm/DataTable/components/ColumnPicker.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react'; // import Checkbox from '../../Checkbox'
+
+import Dropdown from '../../Dropdown';
+import Text from '../../Text';
+import Checkbox from './CheckboxCell';
+
+var noop = function noop() {
+  return null;
+};
+
+function ColumnPicker(_ref) {
+  var _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? [] : _ref$columns,
+      _ref$hiddenColumnIds = _ref.hiddenColumnIds,
+      hiddenColumnIds = _ref$hiddenColumnIds === void 0 ? [] : _ref$hiddenColumnIds,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["columns", "hiddenColumnIds", "onChange"]);
+
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+    variant: "outline",
+    icon: {
+      name: 'columns'
+    },
+    tooltip: {
+      title: 'Filter Columns'
+    },
+    placement: "bottom-end",
+    closeOnSelect: false,
+    onSelect: function onSelect(columnId) {
+      var newHiddenColumnIds = [].concat(hiddenColumnIds);
+      var indexPosition = newHiddenColumnIds.indexOf(columnId);
+
+      if (indexPosition > -1) {
+        newHiddenColumnIds.splice(indexPosition, 1);
+      } else {
+        newHiddenColumnIds.push(columnId);
+      }
+
+      onChange({
+        columnId: columnId,
+        hiddenColumnIds: newHiddenColumnIds
+      });
+    }
+  }, restProps), columns.filter(function (column) {
+    return !column.alwaysVisible;
+  }).map(function (column) {
+    return /*#__PURE__*/React.createElement(Dropdown.Item, {
+      key: column.id,
+      value: column.id
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      checked: hiddenColumnIds.indexOf(column.id) === -1,
+      onChange: noop
+    }), /*#__PURE__*/React.createElement(Text, {
+      marginLeft: 1
+    }, column.label || column.header));
+  }));
+}
+
+export default ColumnPicker;