glints-aries 4.1.3 → 4.1.5

package/es/@next/Combobox/comboboxStoryHelper/ComboboxMultuSelect.js

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["countries"];
+import React, { useCallback, useEffect, useState } from 'react';
+import { Blue } from '../../utilities/colors';
+import { space8 } from '../../utilities/spacing';
+import { Combobox } from '../Combobox';
+import { StyledTag } from './TagStyle';
+export var ComboboxMultiSelect = function ComboboxMultiSelect(_ref) {
+  var countries = _ref.countries,
+    args = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(''),
+    inputValue = _useState[0],
+    setInputValue = _useState[1];
+  var _useState2 = useState([]),
+    selectedOptions = _useState2[0],
+    setSelectedOptions = _useState2[1];
+  var _useState3 = useState(false),
+    isSearchEmpty = _useState3[0],
+    setIsSearchEmpty = _useState3[1];
+  var _useState4 = useState(countries),
+    options = _useState4[0],
+    setOptions = _useState4[1];
+  var handleInputChange = function handleInputChange(value) {
+    setInputValue(value);
+    if (value === '') {
+      setOptions(countries);
+      return;
+    }
+    var filterRegex = new RegExp(value, 'i');
+    var filterOptions = options.filter(function (country) {
+      return country.label.match(filterRegex);
+    });
+    setOptions(filterOptions);
+  };
+  var handleSelect = function handleSelect(selected) {
+    if (selectedOptions.includes(selected)) {
+      setSelectedOptions(selectedOptions.filter(function (option) {
+        return option !== selected;
+      }));
+    } else {
+      setSelectedOptions([].concat(selectedOptions, [selected]));
+    }
+  };
+  var optionsMarkup = (options == null ? void 0 : options.length) > 0 ? options.map(function (option) {
+    var label = option.label,
+      value = option.value;
+    return /*#__PURE__*/React.createElement(Combobox.Option, {
+      key: value,
+      label: label,
+      value: value,
+      selected: selectedOptions.includes(value)
+    });
+  }) : null;
+  var removeTag = useCallback(function (tag) {
+    return function () {
+      var options = [].concat(selectedOptions);
+      options.splice(options.indexOf(tag), 1);
+      setSelectedOptions(options);
+    };
+  }, [selectedOptions]);
+  var tagsMarkup = selectedOptions.map(function (option) {
+    return /*#__PURE__*/React.createElement(StyledTag, {
+      key: "option-" + option,
+      onRemove: removeTag(option),
+      textColor: Blue.S99
+    }, option);
+  });
+  useEffect(function () {
+    if (options.length === 0) {
+      setIsSearchEmpty(true);
+    }
+    if (options.length > 0 && isSearchEmpty === true) {
+      setIsSearchEmpty(false);
+    }
+  }, [isSearchEmpty, options]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: '500px'
+    }
+  }, /*#__PURE__*/React.createElement(Combobox.Label, null, "Label"), /*#__PURE__*/React.createElement(Combobox, _extends({}, args, {
+    activator: /*#__PURE__*/React.createElement(Combobox.TextInput, {
+      value: inputValue,
+      onChange: function onChange(value) {
+        return handleInputChange(value);
+      },
+      placeholder: "Search"
+    })
+  }), /*#__PURE__*/React.createElement(Combobox.OptionList, {
+    onSelect: handleSelect,
+    isEmpty: isSearchEmpty
+  }, optionsMarkup)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingTop: space8
+    }
+  }, tagsMarkup));
+};

package/es/@next/Combobox/comboboxStoryHelper/TagStyle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Tag").TagProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/es/@next/Combobox/comboboxStoryHelper/TagStyle.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Tag } from '../../Tag';
+import { space8 } from '../../utilities/spacing';
+export var StyledTag = styled(Tag).withConfig({
+  displayName: "TagStyle__StyledTag",
+  componentId: "sc-1k5uydi-0"
+})(["margin-right:", ";"], space8);

package/es/@next/Combobox/components/OptionList/Option.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare type OptionType = {
+    label: string;
+    value: string;
+};
+export interface OptionProps extends OptionType {
+    selected?: boolean;
+}
+export interface NoOptionListProps {
+    noOptionsMessage?: React.ReactNode;
+}
+export declare const Option: ({ label, value, selected }: OptionProps) => JSX.Element;
+export declare const NoOptionList: ({ noOptionsMessage, }: NoOptionListProps) => JSX.Element;

package/es/@next/Combobox/components/OptionList/Option.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Checkbox } from '../../../Checkbox';
+import { Typography } from '../../../Typography';
+import { Neutral } from '../../../utilities/colors';
+import { useOption, useOptionList } from './OptionListContext';
+import { EmptyOptionContainer } from './OptionListStyle';
+export var Option = function Option(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    selected = _ref.selected;
+  var optionContext = useOption();
+  var allowMultiple = optionContext.allowMultiple;
+  var optionListContext = useOptionList();
+  var onOptionSelect = optionListContext.onOptionSelect;
+  var handleOptionSelect = function handleOptionSelect(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onOptionSelect({
+      value: value
+    });
+  };
+  return /*#__PURE__*/React.createElement("li", {
+    value: value,
+    onClick: handleOptionSelect,
+    "data-active": selected
+  }, allowMultiple ? /*#__PURE__*/React.createElement(Checkbox, {
+    label: label,
+    checked: selected
+  }) : label);
+};
+export var NoOptionList = function NoOptionList(_ref2) {
+  var _ref2$noOptionsMessag = _ref2.noOptionsMessage,
+    noOptionsMessage = _ref2$noOptionsMessag === void 0 ? 'No matching results' : _ref2$noOptionsMessag;
+  return /*#__PURE__*/React.createElement(EmptyOptionContainer, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "body2",
+    color: Neutral.B40
+  }, noOptionsMessage));
+};

package/es/@next/Combobox/components/OptionList/OptionList.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NoOptionListProps } from './Option';
+export interface OptionListProps extends NoOptionListProps {
+    children: React.ReactNode;
+    isEmpty?: boolean;
+    height?: string;
+    onSelect?(value: string): void;
+}
+export declare const OptionList: ({ children, isEmpty, noOptionsMessage, onSelect, }: OptionListProps) => JSX.Element;

package/es/@next/Combobox/components/OptionList/OptionList.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useComboboxTextInput } from '../TextInput/TextInputContext';
+import { NoOptionList } from './Option';
+import { ComboboxOptionListContext } from './OptionListContext';
+import { OptionListContainer, StyledOptionList } from './OptionListStyle';
+export var OptionList = function OptionList(_ref) {
+  var children = _ref.children,
+    isEmpty = _ref.isEmpty,
+    noOptionsMessage = _ref.noOptionsMessage,
+    onSelect = _ref.onSelect;
+  var textInputContext = useComboboxTextInput();
+  var textInputWidth = textInputContext.textInputWidth;
+  var hasChildren = !isEmpty;
+  var onOptionSelect = function onOptionSelect(_ref2) {
+    var value = _ref2.value;
+    if (onSelect) onSelect(value);
+  };
+  var optionListContextValue = {
+    onOptionSelect: onOptionSelect
+  };
+  return /*#__PURE__*/React.createElement(OptionListContainer, {
+    textInputWidth: textInputWidth
+  }, /*#__PURE__*/React.createElement(StyledOptionList, null, /*#__PURE__*/React.createElement(ComboboxOptionListContext.Provider, {
+    value: optionListContextValue
+  }, hasChildren ? children : /*#__PURE__*/React.createElement(NoOptionList, {
+    noOptionsMessage: noOptionsMessage
+  }))));
+};

package/es/@next/Combobox/components/OptionList/OptionListContext.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare type ComboboxOptionType = {
+    allowMultiple?: boolean;
+};
+export declare const ComboboxOptionContext: import("react").Context<ComboboxOptionType>;
+export declare const useOption: () => ComboboxOptionType;
+declare type ComboboxOptionListType = {
+    onOptionSelect({ value }: {
+        value: string;
+    }): void;
+    selectedOptions?: string[];
+};
+export declare const ComboboxOptionListContext: import("react").Context<ComboboxOptionListType>;
+export declare const useOptionList: () => ComboboxOptionListType;
+export {};

package/es/@next/Combobox/components/OptionList/OptionListContext.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+export var ComboboxOptionContext = /*#__PURE__*/createContext(undefined);
+export var useOption = function useOption() {
+  var context = useContext(ComboboxOptionContext);
+  if (!context) {
+    throw new Error('No ComboboxOptionContext was provided. Your component must be wrapped in a <ComboboxOptionContext.Provider>');
+  }
+  return context;
+};
+export var ComboboxOptionListContext = /*#__PURE__*/createContext(undefined);
+export var useOptionList = function useOptionList() {
+  var context = useContext(ComboboxOptionListContext);
+  if (!context) {
+    throw new Error('No ComboboxOptionListContext was provided. Your component must be wrapped in a <ComboboxOptionListContext.Provider>');
+  }
+  return context;
+};

package/es/@next/Combobox/components/OptionList/OptionListStyle.d.ts

@@ -0,0 +1,7 @@
+interface OptionListContainerProps {
+    textInputWidth?: number;
+}
+export declare const OptionListContainer: import("styled-components").StyledComponent<"div", any, OptionListContainerProps, never>;
+export declare const StyledOptionList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const EmptyOptionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/es/@next/Combobox/components/OptionList/OptionListStyle.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { borderRadius4 } from '../../../utilities/borderRadius';
+import { Neutral } from '../../../utilities/colors';
+import { space4, space8 } from '../../../utilities/spacing';
+export var OptionListContainer = styled.div.withConfig({
+  displayName: "OptionListStyle__OptionListContainer",
+  componentId: "sc-19tus93-0"
+})(["width:", "px;padding:", " 0;"], function (props) {
+  return props.textInputWidth;
+}, space8);
+export var StyledOptionList = styled.ul.withConfig({
+  displayName: "OptionListStyle__StyledOptionList",
+  componentId: "sc-19tus93-1"
+})(["list-style:none;margin:0 ", ";padding:0;li{display:flex;height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";&:hover{background:", ";border-radius:", ";cursor:pointer;}&[data-active='true']{border-radius:", ";cursor:default;}svg{height:24px;width:24px;}}"], space8, space8, space4, Neutral.B99, borderRadius4, borderRadius4);
+export var EmptyOptionContainer = styled.div.withConfig({
+  displayName: "OptionListStyle__EmptyOptionContainer",
+  componentId: "sc-19tus93-2"
+})(["display:flex;align-items:center;justify-content:center;margin:10px 0;"]);

package/es/@next/Combobox/components/OptionList/index.d.ts

@@ -0,0 +1,2 @@
+export { OptionList } from './OptionList';
+export { Option } from './Option';

package/es/@next/Combobox/components/OptionList/index.js

@@ -0,0 +1,2 @@
+export { OptionList } from './OptionList';
+export { Option } from './Option';

package/es/@next/Combobox/components/TextInput/TextInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TextInputProps } from '../../../TextInput';
+export interface ComboboxTextInputProps extends Omit<TextInputProps, 'onChange'> {
+    onChange?(value: string): void;
+    textInputWidth?: number;
+    setTextInputWidth?: React.Dispatch<(prevState: undefined) => undefined>;
+}
+export declare const TextInput: ({ onChange, value, ...props }: ComboboxTextInputProps) => JSX.Element;

package/es/@next/Combobox/components/TextInput/TextInput.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["onChange", "value"];
+import React, { useEffect, useRef } from 'react';
+import { Icon } from '../../../Icon';
+import { TextInput as GlintsTextInput } from '../../../TextInput';
+import { useComboboxTextInput } from './TextInputContext';
+export var TextInput = function TextInput(_ref) {
+  var onChange = _ref.onChange,
+    value = _ref.value,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var inputRef = useRef(null);
+  var textInputContext = useComboboxTextInput();
+  var onFocus = textInputContext.onFocus,
+    setTextInputWidth = textInputContext.setTextInputWidth;
+  useEffect(function () {
+    setTextInputWidth(inputRef.current.getBoundingClientRect().width);
+  }, [inputRef, setTextInputWidth]);
+  var handleChange = function handleChange(_ref2) {
+    var value = _ref2.value;
+    if (onChange) onChange(value);
+  };
+  return /*#__PURE__*/React.createElement(GlintsTextInput, _extends({}, props, {
+    ref: inputRef,
+    prefix: /*#__PURE__*/React.createElement(Icon, {
+      name: "ri-search"
+    }),
+    value: value,
+    onChange: function onChange(value) {
+      return handleChange({
+        value: value
+      });
+    },
+    onFocus: onFocus
+  }));
+};

package/es/@next/Combobox/components/TextInput/TextInputContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ComboboxTextInputProps } from './TextInput';
+export declare const ComboboxTextInputContext: import("react").Context<ComboboxTextInputProps>;
+export declare const useComboboxTextInput: () => ComboboxTextInputProps;

package/es/@next/Combobox/components/TextInput/TextInputContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export var ComboboxTextInputContext = /*#__PURE__*/createContext(undefined);
+export var useComboboxTextInput = function useComboboxTextInput() {
+  var context = useContext(ComboboxTextInputContext);
+  if (!context) {
+    throw new Error('No TextInputContext was provided. Your component must be wrapped in a <TextInputContext.Provider>');
+  }
+  return context;
+};

package/es/@next/Combobox/components/TextInput/index.d.ts

@@ -0,0 +1 @@
+export { TextInput } from './TextInput';

package/es/@next/Combobox/components/TextInput/index.js

@@ -0,0 +1 @@
+export { TextInput } from './TextInput';

package/es/@next/Combobox/components/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput } from './TextInput';
+export * from './OptionList';

package/es/@next/Combobox/components/index.js

@@ -0,0 +1,2 @@
+export { TextInput } from './TextInput';
+export * from './OptionList';

package/es/@next/Combobox/index.d.ts

@@ -0,0 +1 @@
+export * from './Combobox';

package/es/@next/Combobox/index.js

@@ -0,0 +1 @@
+export * from './Combobox';

package/es/@next/CurrencyInput/CurrencyInput.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { InputProps } from '../Input/Input';
+export declare type CurrencyInputProps = Omit<InputProps, 'type' | 'prefix' | 'onChange' | 'value'> & {
+    locale?: string;
+    value?: number | null;
+    allowEmptyValue?: boolean;
+    onChange?: (value: number | undefined) => void;
+    currencyCode: string;
+    currencySymbol?: string;
+};
+export declare const CurrencyInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "value" | "prefix" | "onChange"> & {
+    locale?: string;
+    value?: number | null;
+    allowEmptyValue?: boolean;
+    onChange?: (value: number | undefined) => void;
+    currencyCode: string;
+    currencySymbol?: string;
+} & React.RefAttributes<HTMLInputElement>>;

package/es/@next/CurrencyInput/CurrencyInput.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["locale", "value", "allowEmptyValue", "onChange", "currencyCode", "currencySymbol"];
+import React from 'react';
+import { Input } from '../Input/Input';
+export var CurrencyInput = /*#__PURE__*/React.forwardRef(function CurrencyInput(_ref, ref) {
+  var _formatter$format;
+  var _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'en' : _ref$locale,
+    value = _ref.value,
+    _ref$allowEmptyValue = _ref.allowEmptyValue,
+    allowEmptyValue = _ref$allowEmptyValue === void 0 ? false : _ref$allowEmptyValue,
+    onChange = _ref.onChange,
+    currencyCode = _ref.currencyCode,
+    currencySymbol = _ref.currencySymbol,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  var supportedLocale = Intl.ListFormat.supportedLocalesOf(locale);
+  var localeValue = supportedLocale.length > 0 ? supportedLocale[0] : 'en';
+  if (supportedLocale.length === 0) {
+    console.warn("Locale value of " + locale + " is unsupported, \"en\" will be used");
+  }
+  var formatter = new Intl.NumberFormat(localeValue);
+  var getRawNumber = function getRawNumber(value) {
+    if (typeof value === 'number') {
+      return value;
+    }
+    var parts = formatter.formatToParts(1000.1);
+    var thousandSeparator = parts[1].value;
+    var decimalSeparator = parts[3].value;
+    var cleanedValue = parseFloat(value.replace(new RegExp('\\' + thousandSeparator, 'g'), '').replace(new RegExp('\\' + decimalSeparator), '.'));
+    return Number.isNaN(cleanedValue) ? 0 : cleanedValue;
+  };
+  var getCurrencySymbol = function getCurrencySymbol(locale, currencyCode, currencySymbol) {
+    if (currencySymbol) {
+      return currencySymbol;
+    }
+    try {
+      var _parts$find;
+      var _formatter = new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currencyCode
+      });
+      var parts = _formatter.formatToParts(0);
+      var returnedCurrencySymbol = (_parts$find = parts.find(function (part) {
+        return part.type === 'currency';
+      })) == null ? void 0 : _parts$find.value;
+      return returnedCurrencySymbol;
+    } catch (e) {
+      console.warn("Currency code of " + currencyCode + " is unsupported, \"$\" will be used");
+    }
+    return '$';
+  };
+  var formattedValue = allowEmptyValue && value === null ? null : (_formatter$format = formatter.format(getRawNumber((value != null ? value : 0).toString()))) != null ? _formatter$format : '';
+  var handleChange = function handleChange(e) {
+    if (allowEmptyValue && e.currentTarget.value === '') {
+      onChange(null);
+      return;
+    }
+    var rawValue = getRawNumber(e.currentTarget.value);
+    onChange(rawValue);
+  };
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref,
+    type: "text",
+    prefix: /*#__PURE__*/React.createElement("div", null, getCurrencySymbol(localeValue, currencyCode, currencySymbol))
+  }, props, {
+    value: formattedValue,
+    onChange: handleChange
+  }));
+});

package/es/@next/CurrencyInput/CurrencyInput.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/es/@next/CurrencyInput/CurrencyInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es/@next/CurrencyInput/index.d.ts

@@ -0,0 +1 @@
+export * from './CurrencyInput';

package/es/@next/CurrencyInput/index.js

@@ -0,0 +1 @@
+export * from './CurrencyInput';

package/es/@next/DataTable/DataTable.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { EmptyStateProps } from '../EmptyState';
+export declare type SortDirection = 'ASCENDING' | 'DESCENDING';
+export declare type TableHeading = Omit<React.ThHTMLAttributes<HTMLTableColElement>, 'title'> & {
+    title?: React.ReactNode;
+    id?: string;
+    defaultSortDirection?: SortDirection;
+};
+export declare type Total = TableHeading | null;
+export interface DataTableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /** If the title in TableHeading is of type ReactNode and you require sorting functionality, please make sure to provide 'id' for the TableHeading */
+    headings: TableHeading[];
+    children: React.ReactNode;
+    emptyState?: React.ReactElement<EmptyStateProps>;
+    totals?: Total[];
+    loading?: boolean;
+    loadingLabel?: string;
+    onSortChanged?: (context: string, sortDirection: SortDirection) => void;
+}
+export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> & {
+    Row: ({ children, ...props }: import("./TableRow").TableRowProps) => JSX.Element;
+    Cell: ({ align, children, noWrap, verticalAlign, }: import("./TableCell").TableCellProps) => JSX.Element;
+    Footer: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
+};

package/es/@next/DataTable/DataTable.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["headings", "totals", "onSortChanged", "children", "emptyState", "loading", "loadingLabel"];
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import React from 'react';
+import { Spinner } from '../Spinner';
+import { Typography } from '../Typography';
+import { StyledDataTableContainer, StyledLoaderWrapper, StyledSpinnerContainer, StyledTable, StyledTableCell, StyledTableFooterRow, StyledTableLoadingRow, StyledTableRow } from './DataTableStyle';
+import { TableCell } from './TableCell';
+import { TableFooter } from './TableFooter';
+import { TableHeader } from './TableHeader';
+import { TableRow } from './TableRow';
+var DataTableComponent = /*#__PURE__*/React.forwardRef(function DataTable(_ref, ref) {
+  var headings = _ref.headings,
+    totals = _ref.totals,
+    onSortChanged = _ref.onSortChanged,
+    children = _ref.children,
+    emptyState = _ref.emptyState,
+    loading = _ref.loading,
+    _ref$loadingLabel = _ref.loadingLabel,
+    loadingLabel = _ref$loadingLabel === void 0 ? 'loading' : _ref$loadingLabel,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var handleSortChanged = function handleSortChanged(context, sortDirection) {
+    onSortChanged == null ? void 0 : onSortChanged(context, sortDirection);
+  };
+  var rowHeaderMarkup = headings.map(function (heading, index) {
+    var id = heading.id,
+      title = heading.title,
+      defaultSortDirection = heading.defaultSortDirection,
+      align = heading.align;
+    var key = "table-header-heading-" + title + "-" + index;
+    if (onSortChanged && typeof title !== 'string' && !id) console.warn("Warning: If the title in TableHeading is of type ReactNode and you require sorting functionality, please make sure to provide 'id' for the TableHeading.");
+    return /*#__PURE__*/React.createElement(TableHeader, {
+      key: key,
+      title: title,
+      sortDirection: defaultSortDirection,
+      align: align,
+      onSort: function onSort(sortDirection) {
+        return handleSortChanged(id || title.toString(), sortDirection);
+      }
+    });
+  });
+  var totalsRowMarkup = totals ? totals.map(function (total, index) {
+    var _ref2 = total || {
+        title: ''
+      },
+      title = _ref2.title,
+      align = _ref2.align;
+    var key = total + "-" + index;
+    return /*#__PURE__*/React.createElement(TableCell, {
+      key: key,
+      align: align
+    }, /*#__PURE__*/React.createElement(Typography, {
+      as: "div",
+      variant: "caption"
+    }, title));
+  }) : null;
+  var footer;
+  var rows = [];
+  for (var _iterator = _createForOfIteratorHelperLoose(React.Children.toArray(children)), _step; !(_step = _iterator()).done;) {
+    var child = _step.value;
+    var reactEl = child;
+    if (reactEl.type === TableFooter) {
+      footer = reactEl.props.children;
+      continue;
+    }
+    rows.push(reactEl);
+  }
+  var emptyRow = emptyState ? /*#__PURE__*/React.createElement(StyledTableRow, {
+    className: "empty-state"
+  }, /*#__PURE__*/React.createElement(StyledTableCell, {
+    colSpan: headings.length
+  }, emptyState)) : null;
+  var hasRows = rows.length > 0;
+  var rowsMarkup = hasRows ? rows : emptyRow;
+  var showFooter = !!footer;
+  var LoadingRow = function LoadingRow() {
+    return /*#__PURE__*/React.createElement(StyledTableLoadingRow, {
+      className: "loader-container"
+    }, /*#__PURE__*/React.createElement(StyledLoaderWrapper, null, /*#__PURE__*/React.createElement(StyledSpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, null), /*#__PURE__*/React.createElement(Typography, {
+      variant: "subtitle1"
+    }, loadingLabel))));
+  };
+  return /*#__PURE__*/React.createElement(StyledDataTableContainer, {
+    className: "data-table-container"
+  }, /*#__PURE__*/React.createElement(StyledTable, _extends({
+    ref: ref,
+    "data-loading": loading,
+    "data-has-footer": showFooter
+  }, props), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement(StyledTableRow, {
+    "data-header": true
+  }, rowHeaderMarkup)), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(LoadingRow, null), totalsRowMarkup && hasRows && /*#__PURE__*/React.createElement(StyledTableRow, null, totalsRowMarkup), rowsMarkup), showFooter && /*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement(StyledTableFooterRow, null, /*#__PURE__*/React.createElement(StyledTableCell, {
+    colSpan: headings.length
+  }, footer)))));
+});
+export var DataTable = Object.assign(DataTableComponent, {
+  Row: TableRow,
+  Cell: TableCell,
+  Footer: TableFooter
+});

package/es/@next/DataTable/DataTable.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const WithEmptyState: any;
+export declare const WithNoWrapCell: any;
+export declare const VerticalAlignCenterCell: any;

package/es/@next/DataTable/DataTableStyle.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledTable: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const StyledTableRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const StyledTabledHeader: import("styled-components").StyledComponent<"th", any, {}, never>;
+export declare const StyledTableCell: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const StyledTableFooterRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const StyledTableLoadingRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const StyledLoaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSpinnerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDataTableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;