@spaced-out/ui-design-system 0.1.11 → 0.1.13

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.13](https://github.com/spaced-out/ui-design-system/compare/v0.1.12...v0.1.13) (2023-04-14)
+
+
+### Features
+
+* added escape button capabilities to click-away ([#99](https://github.com/spaced-out/ui-design-system/issues/99)) ([79cff71](https://github.com/spaced-out/ui-design-system/commit/79cff71912d3e92d9ea12c95f543aa3c623df143))
+
+
+### Bug Fixes
+
+* docs update ([78756c0](https://github.com/spaced-out/ui-design-system/commit/78756c066afdcd2574e8eaa70db94c3ddc638cf2))
+* docs update ([10ac5a6](https://github.com/spaced-out/ui-design-system/commit/10ac5a69d98744f16540efb61d9b1fdce5a2620f))
+* fixed elevation story ([ef5cf99](https://github.com/spaced-out/ui-design-system/commit/ef5cf99f3655edb606ec6141701f596759cb0713))
+* removed file extensions ([1e9b6fa](https://github.com/spaced-out/ui-design-system/commit/1e9b6fade3557f55baf9ba37c6dbc49bb180b7bc))
+* stories docs reuired optional props fix ([bdf9592](https://github.com/spaced-out/ui-design-system/commit/bdf959298f5c77890ac3f7c62c74960b4a6ce738))
+* support button classnames in button dropdown ([#100](https://github.com/spaced-out/ui-design-system/issues/100)) ([26c68f7](https://github.com/spaced-out/ui-design-system/commit/26c68f7f8aa1264cf1868bd250021767b888f4d2))
+* truncate word break changes ([#98](https://github.com/spaced-out/ui-design-system/issues/98)) ([0ff5cc1](https://github.com/spaced-out/ui-design-system/commit/0ff5cc1cc730350e449d9d42015b57a46ad5a302))
+
+### [0.1.12](https://github.com/spaced-out/ui-design-system/compare/v0.1.11...v0.1.12) (2023-04-12)
+
+
+### Features
+
+* pagination component ([#96](https://github.com/spaced-out/ui-design-system/issues/96)) ([d0bc11e](https://github.com/spaced-out/ui-design-system/commit/d0bc11e650f0eb4882fd35ea5fae0362b6454be5))
+
 ### [0.1.11](https://github.com/spaced-out/ui-design-system/compare/v0.1.10...v0.1.11) (2023-04-11)
 
 

package/design-tokens/elevation/app-elevation.json

@@ -6,6 +6,9 @@
     "card": {
       "value": "{baseElevation.4.value}"
     },
+    "tooltip": {
+      "value": "{baseElevation.4.value}"
+    },
     "menu": {
       "value": "{baseElevation.12.value}"
     },
@@ -17,9 +20,6 @@
     },
     "toast": {
       "value": "{baseElevation.60.value}"
-    },
-    "tooltip": {
-      "value": "{baseElevation.4.value}"
     }
   }
 }

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -86,7 +86,8 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       },
       isFluid: isFluid,
       classNames: {
-        wrapper: classNames?.buttonWrapper
+        wrapper: classNames?.buttonWrapper,
+        icon: classNames?.buttonIcon
       }
     }), children), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -39,6 +39,7 @@ export type AnchorType = $Values<typeof ANCHOR_POSITION_TYPE>;
 type ClassNames = $ReadOnly<{
   buttonWrapper?: string,
   dropdownContainer?: string,
+  buttonIcon?: string,
 }>;
 
 export type ButtonDropdownProps = {
@@ -117,7 +118,10 @@ export const ButtonDropdown: React$AbstractComponent<
                 onOpen();
               }}
               isFluid={isFluid}
-              classNames={{wrapper: classNames?.buttonWrapper}}
+              classNames={{
+                wrapper: classNames?.buttonWrapper,
+                icon: classNames?.buttonIcon,
+              }}
             >
               {children}
             </Button>

package/lib/components/InContextAlert/InContextAlert.js.flow

@@ -44,7 +44,7 @@ type InContextAlertBaseProps = {
 
 export type InContextAlertProps = {
   ...InContextAlertBaseProps,
-  semantic: AlertSemanticType,
+  semantic?: AlertSemanticType,
   leftIconName?: string,
   leftIconType?: IconType,
 };

package/lib/components/OptionButton/OptionButton.js.flow

@@ -13,7 +13,7 @@ import css from './OptionButton.module.css';
 
 export type OptionButtonProps = {
   ...ButtonProps,
-  menu: MenuProps,
+  menu?: MenuProps,
   anchorPosition?: AnchorType,
   onOptionSelect?: (option: MenuOption) => mixed,
   onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,

package/lib/components/Pagination/Pagination.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pagination = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _usePagination = _interopRequireDefault(require("../../hooks/usePagination"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _helpers = require("../../utils/helpers");
+var _Dropdown = require("../Dropdown");
+var _Text = require("../Text");
+var _PaginationItem = require("./PaginationItem");
+var _PaginationModule = _interopRequireDefault(require("./Pagination.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    classNames,
+    style = 'primary',
+    children,
+    currentPage = 1,
+    totalPages = 1,
+    onChange,
+    showFirstButton = style !== 'primary',
+    showLastButton = style !== 'primary',
+    ...restPaginationProps
+  } = props;
+  const {
+    items
+  } = (0, _usePagination.default)({
+    style,
+    showFirstButton,
+    showLastButton,
+    currentPage,
+    totalPages,
+    onChange,
+    ...restPaginationProps
+  });
+  const allPages = (0, _helpers.range)(1, totalPages);
+  const options = style !== 'secondary' ? [] : allPages.map(page => ({
+    key: page.toString(),
+    label: page.toString()
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "Pagination",
+    className: (0, _classify.default)(_PaginationModule.default.wrapper, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_PaginationModule.default.childrenSlot, classNames?.children)
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: _PaginationModule.default.paginatorSlots
+  }, style === 'secondary' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
+    size: "small",
+    classNames: {
+      wrapper: _PaginationModule.default.dropdownWrapper
+    },
+    menu: {
+      options,
+      isFluid: true,
+      classNames: {
+        wrapper: _PaginationModule.default.menuWrapper
+      },
+      selectedKeys: currentPage ? [currentPage.toString()] : []
+    },
+    dropdownInputText: currentPage.toString(),
+    onChange: option => onChange?.(parseInt(option.key))
+  }), !!totalPages && !!currentPage && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    color: "tertiary",
+    className: _PaginationModule.default.secondaryLabel
+  }, "of ", totalPages, " ", totalPages > 1 ? 'Pages' : 'Page')), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_PaginationModule.default.paginatorSlot, classNames?.paginator)
+  }, items?.map(item => /*#__PURE__*/React.createElement(_PaginationItem.PaginationItem, _extends({
+    key: item.id
+  }, item))))));
+});
+exports.Pagination = Pagination;

package/lib/components/Pagination/Pagination.js.flow

@@ -0,0 +1,139 @@
+// @flow strict
+
+import * as React from 'react';
+
+import usePagination from '../../hooks/usePagination';
+import classify from '../../utils/classify';
+import {range} from '../../utils/helpers';
+import {Dropdown} from '../Dropdown';
+import {SubTitleExtraSmall} from '../Text';
+
+import {PaginationItem} from './PaginationItem';
+
+import css from './Pagination.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  children?: string,
+  paginator?: string,
+}>;
+type MixedEvent = SyntheticEvent<EventTarget> | Event;
+type PaginationItemType =
+  | 'first'
+  | 'previous'
+  | 'page'
+  | 'start-ellipsis'
+  | 'end-ellipsis'
+  | 'last'
+  | 'next';
+
+export type PaginationBaseProps = {
+  currentPage?: number,
+  disabled?: boolean,
+  onChange?: (value?: ?number, event?: ?MixedEvent) => void,
+  totalPages?: number,
+  showFirstButton?: boolean,
+  showLastButton?: boolean,
+  hideNextButton?: boolean,
+  hidePrevButton?: boolean,
+  boundaryCount?: number,
+  siblingCount?: number,
+  style?: 'primary' | 'secondary',
+};
+
+export type PaginationProps = {
+  children?: React.Node,
+  ...PaginationBaseProps,
+  classNames?: ClassNames,
+};
+
+export type PaginationItemProps = {
+  id: string,
+  disabled: boolean,
+  onClick: (event: SyntheticEvent<HTMLElement>) => void,
+  page: ?number,
+  selected: boolean,
+  type: PaginationItemType,
+};
+
+export const Pagination: React$AbstractComponent<
+  PaginationProps,
+  HTMLDivElement,
+> = React.forwardRef<PaginationProps, HTMLDivElement>(
+  (props: PaginationProps, ref) => {
+    const {
+      classNames,
+      style = 'primary',
+      children,
+      currentPage = 1,
+      totalPages = 1,
+      onChange,
+      showFirstButton = style !== 'primary',
+      showLastButton = style !== 'primary',
+      ...restPaginationProps
+    } = props;
+    const {items} = usePagination({
+      style,
+      showFirstButton,
+      showLastButton,
+      currentPage,
+      totalPages,
+      onChange,
+      ...restPaginationProps,
+    });
+
+    const allPages = range(1, totalPages);
+    const options =
+      style !== 'secondary'
+        ? []
+        : allPages.map((page) => ({
+          key: page.toString(),
+          label: page.toString(),
+        }));
+
+    return (
+      <div
+        ref={ref}
+        data-testid="Pagination"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        <div className={classify(css.childrenSlot, classNames?.children)}>
+          {children}
+        </div>
+        <div className={css.paginatorSlots}>
+          {style === 'secondary' && (
+            <>
+              <Dropdown
+                size="small"
+                classNames={{wrapper: css.dropdownWrapper}}
+                menu={{
+                  options,
+                  isFluid: true,
+                  classNames: {wrapper: css.menuWrapper},
+                  selectedKeys: currentPage ? [currentPage.toString()] : [],
+                }}
+                dropdownInputText={currentPage.toString()}
+                onChange={(option) => onChange?.(parseInt(option.key))}
+              />
+              {!!totalPages && !!currentPage && (
+                <SubTitleExtraSmall
+                  color="tertiary"
+                  className={css.secondaryLabel}
+                >
+                  of {totalPages} {totalPages > 1 ? 'Pages' : 'Page'}
+                </SubTitleExtraSmall>
+              )}
+            </>
+          )}
+
+          <div className={classify(css.paginatorSlot, classNames?.paginator)}>
+            {items?.map((item) => (
+              <PaginationItem key={item.id} {...item} />
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/lib/components/Pagination/Pagination.module.css

@@ -0,0 +1,73 @@
+@value (colorFillPrimary, colorTextSecondary, colorTextDisabled) from '../../styles/variables/_color.css';
+@value (spaceXXSmall, spaceNone, spaceSmall, spaceXSmall) from '../../styles/variables/_space.css';
+@value (size34, sizeFluid, size40) from '../../styles/variables/_size.css';
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  width: sizeFluid;
+  height: fit-content;
+  justify-content: space-between;
+}
+
+.childrenSlot {
+  display: flex;
+}
+
+.paginatorSlot {
+  display: flex;
+  gap: spaceXXSmall;
+}
+
+.paginatorSlots {
+  display: flex;
+  gap: spaceSmall;
+}
+
+.secondaryLabel {
+  margin-right: spaceXSmall;
+}
+
+.paginatorButton {
+  min-width: size34;
+  padding: spaceNone;
+  color: colorTextSecondary;
+}
+
+.pageNumbers {
+  display: flex;
+  align-items: center;
+  gap: spaceXXSmall;
+}
+
+.separator {
+  display: flex;
+  width: size34;
+  height: size34;
+  align-items: center;
+  justify-content: center;
+}
+
+.paginatorButton.disabled {
+  background-color: initial;
+}
+
+.paginatorButton.selected {
+  pointer-events: none;
+}
+
+.icon {
+  color: colorTextSecondary;
+}
+
+.icon.disabled {
+  color: colorTextDisabled;
+}
+
+.dropdownWrapper {
+  width: calc(size40 * 2);
+}
+
+.menuWrapper {
+  min-width: calc(size40 * 2);
+}

package/lib/components/Pagination/PaginationItem.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaginationItem = exports.PaginationButton = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Text = require("../Text");
+var _PaginationModule = _interopRequireDefault(require("./Pagination.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const PaginationButton = props => {
+  const {
+    disabled,
+    onClick,
+    page,
+    selected,
+    type
+  } = props;
+  const paginationBtnRef = React.useRef(null);
+  React.useEffect(() => {
+    if (disabled || selected) {
+      paginationBtnRef.current?.blur();
+    }
+  }, [disabled, selected]);
+  switch (type) {
+    case 'first':
+      return /*#__PURE__*/React.createElement(_Button.Button, {
+        classNames: {
+          icon: (0, _classify.default)(_PaginationModule.default.icon, {
+            [_PaginationModule.default.disabled]: disabled
+          }),
+          wrapper: (0, _classify.default)(_PaginationModule.default.paginatorButton, {
+            [_PaginationModule.default.disabled]: disabled
+          })
+        },
+        type: selected ? 'secondary' : 'ghost',
+        size: "small",
+        onClick: onClick,
+        disabled: disabled,
+        ref: paginationBtnRef,
+        iconLeftName: "chevrons-left"
+      });
+    case 'previous':
+      return /*#__PURE__*/React.createElement(_Button.Button, {
+        classNames: {
+          icon: (0, _classify.default)(_PaginationModule.default.icon, {
+            [_PaginationModule.default.disabled]: disabled
+          }),
+          wrapper: (0, _classify.default)(_PaginationModule.default.paginatorButton, {
+            [_PaginationModule.default.disabled]: disabled
+          })
+        },
+        type: selected ? 'secondary' : 'ghost',
+        size: "small",
+        onClick: onClick,
+        disabled: disabled,
+        ref: paginationBtnRef,
+        iconLeftName: "chevron-left"
+      });
+    case 'page':
+      return /*#__PURE__*/React.createElement(_Button.Button, {
+        classNames: {
+          wrapper: (0, _classify.default)(_PaginationModule.default.paginatorButton, {
+            [_PaginationModule.default.selected]: selected
+          })
+        },
+        type: selected ? 'secondary' : 'ghost',
+        size: "small",
+        onClick: onClick,
+        disabled: disabled,
+        ref: paginationBtnRef,
+        tabIndex: selected ? -1 : 0
+      }, page);
+    case 'start-ellipsis':
+    case 'end-ellipsis':
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _classify.default)(_PaginationModule.default.separator)
+      }, /*#__PURE__*/React.createElement(_Text.ButtonTextSmall, {
+        color: "disabled"
+      }, "..."));
+    case 'next':
+      return /*#__PURE__*/React.createElement(_Button.Button, {
+        classNames: {
+          icon: (0, _classify.default)(_PaginationModule.default.icon, {
+            [_PaginationModule.default.disabled]: disabled
+          }),
+          wrapper: (0, _classify.default)(_PaginationModule.default.paginatorButton, {
+            [_PaginationModule.default.disabled]: disabled
+          })
+        },
+        type: selected ? 'secondary' : 'ghost',
+        size: "small",
+        onClick: onClick,
+        disabled: disabled,
+        ref: paginationBtnRef,
+        iconLeftName: "chevron-right"
+      });
+    case 'last':
+      return /*#__PURE__*/React.createElement(_Button.Button, {
+        classNames: {
+          icon: (0, _classify.default)(_PaginationModule.default.icon, {
+            [_PaginationModule.default.disabled]: disabled
+          }),
+          wrapper: (0, _classify.default)(_PaginationModule.default.paginatorButton, {
+            [_PaginationModule.default.disabled]: disabled
+          })
+        },
+        type: selected ? 'secondary' : 'ghost',
+        size: "small",
+        onClick: onClick,
+        disabled: disabled,
+        ref: paginationBtnRef,
+        iconLeftName: "chevrons-right"
+      });
+    default:
+      break;
+  }
+};
+exports.PaginationButton = PaginationButton;
+const PaginationItem = props => /*#__PURE__*/React.createElement(PaginationButton, props);
+exports.PaginationItem = PaginationItem;

package/lib/components/Pagination/PaginationItem.js.flow

@@ -0,0 +1,116 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Button} from '../Button';
+import {ButtonTextSmall} from '../Text';
+
+import type {PaginationItemProps} from './Pagination';
+
+import css from './Pagination.module.css';
+
+
+export const PaginationButton = (props: PaginationItemProps): React.Node => {
+  const {disabled, onClick, page, selected, type} = props;
+  const paginationBtnRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (disabled || selected) {
+      paginationBtnRef.current?.blur();
+    }
+  }, [disabled, selected]);
+
+  switch (type) {
+  case 'first':
+    return (
+      <Button
+        classNames={{
+          icon: classify(css.icon, {[css.disabled]: disabled}),
+          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
+        }}
+        type={selected ? 'secondary' : 'ghost'}
+        size="small"
+        onClick={onClick}
+        disabled={disabled}
+        ref={paginationBtnRef}
+        iconLeftName="chevrons-left"
+      ></Button>
+    );
+  case 'previous':
+    return (
+      <Button
+        classNames={{
+          icon: classify(css.icon, {[css.disabled]: disabled}),
+          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
+        }}
+        type={selected ? 'secondary' : 'ghost'}
+        size="small"
+        onClick={onClick}
+        disabled={disabled}
+        ref={paginationBtnRef}
+        iconLeftName="chevron-left"
+      ></Button>
+    );
+  case 'page':
+    return (
+      <Button
+        classNames={{
+          wrapper: classify(css.paginatorButton, {[css.selected]: selected}),
+        }}
+        type={selected ? 'secondary' : 'ghost'}
+        size="small"
+        onClick={onClick}
+        disabled={disabled}
+        ref={paginationBtnRef}
+        tabIndex={selected ? -1 : 0}
+      >
+        {page}
+      </Button>
+    );
+  case 'start-ellipsis':
+  case 'end-ellipsis':
+    return (
+      <div className={classify(css.separator)}>
+        <ButtonTextSmall color="disabled">...</ButtonTextSmall>
+      </div>
+    );
+  case 'next':
+    return (
+      <Button
+        classNames={{
+          icon: classify(css.icon, {[css.disabled]: disabled}),
+          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
+        }}
+        type={selected ? 'secondary' : 'ghost'}
+        size="small"
+        onClick={onClick}
+        disabled={disabled}
+        ref={paginationBtnRef}
+        iconLeftName="chevron-right"
+      ></Button>
+    );
+  case 'last':
+    return (
+      <Button
+        classNames={{
+          icon: classify(css.icon, {[css.disabled]: disabled}),
+          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
+        }}
+        type={selected ? 'secondary' : 'ghost'}
+        size="small"
+        onClick={onClick}
+        disabled={disabled}
+        ref={paginationBtnRef}
+        iconLeftName="chevrons-right"
+      ></Button>
+    );
+
+  default:
+    break;
+  }
+};
+
+export const PaginationItem = (props: PaginationItemProps): React.Node => (
+  <PaginationButton {...props} />
+);

package/lib/components/Pagination/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Pagination = require("./Pagination");
+Object.keys(_Pagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Pagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Pagination[key];
+    }
+  });
+});

package/lib/components/Pagination/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Pagination';

package/lib/components/Truncate/Truncate.js

@@ -15,12 +15,15 @@ const BaseTruncate = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     line = 1,
-    showFullTextOnHover = false
+    showFullTextOnHover = false,
+    wordBreak = 'break-all',
+    className
   } = _ref;
   return /*#__PURE__*/React.createElement("span", {
-    className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp),
+    className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp, className),
     style: {
-      WebkitLineClamp: `${line}`
+      '--line-clamp': line,
+      '--word-break': wordBreak
     },
     title: showFullTextOnHover ? children : '',
     ref: ref
@@ -31,7 +34,9 @@ const Truncate = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     line = 1,
-    showFullTextOnHover = false
+    showFullTextOnHover = false,
+    wordBreak = 'break-all',
+    className: truncateClassName
   } = _ref2;
   const arrayChildren = React.Children.toArray(children);
   if (arrayChildren.length) {
@@ -42,9 +47,10 @@ const Truncate = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         children
       } = child.props;
       return /*#__PURE__*/React.cloneElement(child, {
-        className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp, className),
+        className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp, className, truncateClassName),
         style: {
-          WebkitLineClamp: `${line}`
+          '--line-clamp': line,
+          '--word-break': wordBreak
         },
         title: showFullTextOnHover ? children : '',
         ref
@@ -53,7 +59,9 @@ const Truncate = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     return /*#__PURE__*/React.createElement(BaseTruncate, {
       line: line,
       showFullTextOnHover: showFullTextOnHover,
-      ref: ref
+      ref: ref,
+      wordBreak: wordBreak,
+      className: truncateClassName
     }, children);
   }
   return null;

package/lib/components/Truncate/Truncate.js.flow

@@ -11,6 +11,8 @@ export type TruncateProps = {
   children?: React.Node,
   line?: number,
   showFullTextOnHover?: boolean,
+  wordBreak?: string,
+  className?: string,
 };
 
 export const BaseTruncate: React$AbstractComponent<
@@ -18,12 +20,18 @@ export const BaseTruncate: React$AbstractComponent<
   HTMLSpanElement,
 > = React.forwardRef<TruncateProps, HTMLSpanElement>(
   (
-    {children, line = 1, showFullTextOnHover = false}: TruncateProps,
+    {
+      children,
+      line = 1,
+      showFullTextOnHover = false,
+      wordBreak = 'break-all',
+      className,
+    }: TruncateProps,
     ref,
   ): React.Node => (
     <span
-      className={classify(css.truncateLineClamp)}
-      style={{WebkitLineClamp: `${line}`}}
+      className={classify(css.truncateLineClamp, className)}
+      style={{'--line-clamp': line, '--word-break': wordBreak}}
       title={showFullTextOnHover ? children : ''}
       ref={ref}
     >
@@ -35,7 +43,13 @@ export const BaseTruncate: React$AbstractComponent<
 export const Truncate: React$AbstractComponent<TruncateProps, HTMLSpanElement> =
   React.forwardRef<TruncateProps, HTMLSpanElement>(
     (
-      {children, line = 1, showFullTextOnHover = false}: TruncateProps,
+      {
+        children,
+        line = 1,
+        showFullTextOnHover = false,
+        wordBreak = 'break-all',
+        className: truncateClassName,
+      }: TruncateProps,
       ref,
     ): React.Node => {
       const arrayChildren = React.Children.toArray(children);
@@ -45,8 +59,12 @@ export const Truncate: React$AbstractComponent<TruncateProps, HTMLSpanElement> =
           const {className, children} = child.props;
 
           return React.cloneElement(child, {
-            className: classify(css.truncateLineClamp, className),
-            style: {WebkitLineClamp: `${line}`},
+            className: classify(
+              css.truncateLineClamp,
+              className,
+              truncateClassName,
+            ),
+            style: {'--line-clamp': line, '--word-break': wordBreak},
             title: showFullTextOnHover ? children : '',
             ref,
           });
@@ -56,6 +74,8 @@ export const Truncate: React$AbstractComponent<TruncateProps, HTMLSpanElement> =
             line={line}
             showFullTextOnHover={showFullTextOnHover}
             ref={ref}
+            wordBreak={wordBreak}
+            className={truncateClassName}
           >
             {children}
           </BaseTruncate>

package/lib/components/Truncate/Truncate.module.css

@@ -1,5 +1,3 @@
 .truncateLineClamp {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+  composes: truncate from '../../styles/typography.module.css';
 }

package/lib/hooks/index.js

@@ -14,6 +14,17 @@ Object.keys(_useMountTransition).forEach(function (key) {
     }
   });
 });
+var _usePagination = require("./usePagination");
+Object.keys(_usePagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _usePagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _usePagination[key];
+    }
+  });
+});
 var _useToastPortal = require("./useToastPortal");
 Object.keys(_useToastPortal).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/hooks/index.js.flow

@@ -1,4 +1,5 @@
 // @flow strict
 
 export * from './useMountTransition';
+export * from './usePagination';
 export * from './useToastPortal';

package/lib/hooks/usePagination.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePagination;
+var _helpers = require("../utils/helpers");
+
+function usePagination(props) {
+  const {
+    boundaryCount = 1,
+    totalPages = 1,
+    disabled = false,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange: handleChange,
+    currentPage = 1,
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    style = 'primary'
+  } = props;
+  let itemList = [];
+  const handleClick = (event, value) => {
+    if (handleChange) {
+      handleChange(value, event);
+    }
+  };
+  const startPages = (0, _helpers.range)(1, Math.min(boundaryCount, totalPages));
+  const endPages = (0, _helpers.range)(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+  const siblingsStart = Math.max(Math.min(
+  // Natural start
+  currentPage - siblingCount,
+  // Lower boundary when currentPage is high
+  totalPages - boundaryCount - siblingCount * 2 - 1),
+  // Greater than startPages
+  boundaryCount + 2);
+  const siblingsEnd = Math.min(Math.max(
+  // Natural end
+  currentPage + siblingCount,
+  // Upper boundary when currentPage is low
+  boundaryCount + siblingCount * 2 + 2),
+  // Less than endPages
+  endPages.length > 0 ? endPages[0] - 2 : totalPages - 1);
+
+  // Basic list of items to render
+  // For primary style: itemList = ['first', 'previous', 1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10, 'next', 'last']
+  // For secondary style: itemList = ['first', 'previous', 'next', 'last']
+  if (style === 'primary') {
+    itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...startPages,
+    // Start ellipsis
+    // eslint-disable-next-line no-nested-ternary
+    ...(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < totalPages - boundaryCount ? [boundaryCount + 1] : []),
+    // Sibling pages
+    ...(0, _helpers.range)(siblingsStart, siblingsEnd),
+    // End ellipsis
+    // eslint-disable-next-line no-nested-ternary
+    ...(siblingsEnd < totalPages - boundaryCount - 1 ? ['end-ellipsis'] : totalPages - boundaryCount > boundaryCount ? [totalPages - boundaryCount] : []), ...endPages, ...(hideNextButton ? [] : ['next']), ...(showLastButton ? ['last'] : [])];
+  } else if (style === 'secondary') {
+    itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...(hideNextButton ? [] : ['next']), ...(showLastButton ? ['last'] : [])];
+  }
+
+  // Map the button type to its page number
+  const buttonPage = type => {
+    switch (type) {
+      case 'first':
+        return 1;
+      case 'previous':
+        return currentPage - 1;
+      case 'next':
+        return currentPage + 1;
+      case 'last':
+        return totalPages;
+      default:
+        return null;
+    }
+  };
+
+  // Convert the basic item list to contain PaginationItem props objects
+  const items = itemList.map((item, idx) => typeof item === 'number' ? {
+    id: idx.toString(),
+    onClick: event => {
+      handleClick(event, item);
+    },
+    type: 'page',
+    page: item,
+    selected: item === currentPage,
+    disabled
+  } : {
+    id: idx.toString(),
+    onClick: event => {
+      handleClick(event, buttonPage(item));
+    },
+    type: item,
+    page: buttonPage(item),
+    selected: false,
+    disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? currentPage >= totalPages : currentPage <= 1)
+  });
+  return {
+    items
+  };
+}

package/lib/hooks/usePagination.js.flow

@@ -0,0 +1,153 @@
+// @flow strict
+
+import type {
+  PaginationBaseProps,
+  PaginationItemProps,
+} from '../components/Pagination';
+import {range} from '../utils/helpers';
+
+
+export default function usePagination(props: PaginationBaseProps): {
+  items: ?(PaginationItemProps[]),
+} {
+  const {
+    boundaryCount = 1,
+    totalPages = 1,
+    disabled = false,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange: handleChange,
+    currentPage = 1,
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    style = 'primary',
+  } = props;
+
+  let itemList = [];
+
+  const handleClick = (event, value) => {
+    if (handleChange) {
+      handleChange(value, event);
+    }
+  };
+
+  const startPages = range(1, Math.min(boundaryCount, totalPages));
+  const endPages = range(
+    Math.max(totalPages - boundaryCount + 1, boundaryCount + 1),
+    totalPages,
+  );
+
+  const siblingsStart = Math.max(
+    Math.min(
+      // Natural start
+      currentPage - siblingCount,
+      // Lower boundary when currentPage is high
+      totalPages - boundaryCount - siblingCount * 2 - 1,
+    ),
+    // Greater than startPages
+    boundaryCount + 2,
+  );
+
+  const siblingsEnd = Math.min(
+    Math.max(
+      // Natural end
+      currentPage + siblingCount,
+      // Upper boundary when currentPage is low
+      boundaryCount + siblingCount * 2 + 2,
+    ),
+    // Less than endPages
+    endPages.length > 0 ? endPages[0] - 2 : totalPages - 1,
+  );
+
+  // Basic list of items to render
+  // For primary style: itemList = ['first', 'previous', 1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10, 'next', 'last']
+  // For secondary style: itemList = ['first', 'previous', 'next', 'last']
+  if (style === 'primary') {
+    itemList = [
+      ...(showFirstButton ? ['first'] : []),
+      ...(hidePrevButton ? [] : ['previous']),
+      ...startPages,
+
+      // Start ellipsis
+      // eslint-disable-next-line no-nested-ternary
+      ...(siblingsStart > boundaryCount + 2
+        ? ['start-ellipsis']
+        : boundaryCount + 1 < totalPages - boundaryCount
+          ? [boundaryCount + 1]
+          : []),
+
+      // Sibling pages
+      ...range(siblingsStart, siblingsEnd),
+
+      // End ellipsis
+      // eslint-disable-next-line no-nested-ternary
+      ...(siblingsEnd < totalPages - boundaryCount - 1
+        ? ['end-ellipsis']
+        : totalPages - boundaryCount > boundaryCount
+          ? [totalPages - boundaryCount]
+          : []),
+
+      ...endPages,
+      ...(hideNextButton ? [] : ['next']),
+      ...(showLastButton ? ['last'] : []),
+    ];
+  } else if (style === 'secondary') {
+    itemList = [
+      ...(showFirstButton ? ['first'] : []),
+      ...(hidePrevButton ? [] : ['previous']),
+      ...(hideNextButton ? [] : ['next']),
+      ...(showLastButton ? ['last'] : []),
+    ];
+  }
+
+  // Map the button type to its page number
+  const buttonPage = (type) => {
+    switch (type) {
+    case 'first':
+      return 1;
+    case 'previous':
+      return currentPage - 1;
+    case 'next':
+      return currentPage + 1;
+    case 'last':
+      return totalPages;
+    default:
+      return null;
+    }
+  };
+
+  // Convert the basic item list to contain PaginationItem props objects
+  const items = itemList.map((item, idx) =>
+    typeof item === 'number'
+      ? {
+        id: idx.toString(),
+        onClick: (event) => {
+          handleClick(event, item);
+        },
+        type: 'page',
+        page: item,
+        selected: item === currentPage,
+        disabled,
+      }
+      : {
+        id: idx.toString(),
+        onClick: (event) => {
+          handleClick(event, buttonPage(item));
+        },
+        type: item,
+        page: buttonPage(item),
+        selected: false,
+        disabled:
+            disabled ||
+            (item.indexOf('ellipsis') === -1 &&
+              (item === 'next' || item === 'last'
+                ? currentPage >= totalPages
+                : currentPage <= 1)),
+      },
+  );
+
+  return {
+    items,
+  };
+}

package/lib/styles/typography.module.css

@@ -233,9 +233,13 @@
 }
 
 .truncate {
-  white-space: nowrap;
+  --line-clamp: 1;
+  --word-break: break-all;
+  -webkit-line-clamp: var(--line-clamp);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
+  word-break: var(--word-break);
 }
 
 .highlightText {

package/lib/styles/variables/_elevation.css

@@ -2,6 +2,8 @@
 
 @value elevationCard: 4;
 
+@value elevationTooltip: 4;
+
 @value elevationMenu: 12;
 
 @value elevationBackdrop: 40;
@@ -9,5 +11,3 @@
 @value elevationModal: 40;
 
 @value elevationToast: 60;
-
-@value elevationTooltip: 4;

package/lib/styles/variables/_elevation.js

@@ -9,6 +9,8 @@ const elevationNone = '0';
 exports.elevationNone = elevationNone;
 const elevationCard = '4';
 exports.elevationCard = elevationCard;
+const elevationTooltip = '4';
+exports.elevationTooltip = elevationTooltip;
 const elevationMenu = '12';
 exports.elevationMenu = elevationMenu;
 const elevationBackdrop = '40';
@@ -16,6 +18,4 @@ exports.elevationBackdrop = elevationBackdrop;
 const elevationModal = '40';
 exports.elevationModal = elevationModal;
 const elevationToast = '60';
-exports.elevationToast = elevationToast;
-const elevationTooltip = '4';
-exports.elevationTooltip = elevationTooltip;
+exports.elevationToast = elevationToast;

package/lib/styles/variables/_elevation.js.flow

@@ -4,6 +4,8 @@ export const elevationNone = '0';
 
 export const elevationCard = '4';
 
+export const elevationTooltip = '4';
+
 export const elevationMenu = '12';
 
 export const elevationBackdrop = '40';
@@ -11,5 +13,3 @@ export const elevationBackdrop = '40';
 export const elevationModal = '40';
 
 export const elevationToast = '60';
-
-export const elevationTooltip = '4';

package/lib/utils/click-away.js

@@ -49,6 +49,11 @@ class ClickAway extends React.Component {
         }, this.handleOnChange);
       }
     });
+    _defineProperty(this, "handleCloseOnEscapeKeypress", evt => {
+      if (evt?.key === 'Escape') {
+        this.forceClose();
+      }
+    });
     _defineProperty(this, "forceClose", () => {
       this.setState({
         isOpen: false
@@ -74,13 +79,18 @@ class ClickAway extends React.Component {
     if (prevState.isOpen !== isOpen) {
       if (this.state.isOpen) {
         window.document.addEventListener('click', this.handleCloseClick);
+        if (this.props.closeOnEscapeKeypress) {
+          window.document.addEventListener('keyup', this.handleCloseOnEscapeKeypress);
+        }
       } else {
         window.document.removeEventListener('click', this.handleCloseClick);
+        window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
       }
     }
   }
   componentWillUnmount() {
     window.document.removeEventListener('click', this.handleCloseClick);
+    window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
   }
   render() {
     const {
@@ -106,5 +116,6 @@ class ClickAway extends React.Component {
 }
 exports.ClickAway = ClickAway;
 _defineProperty(ClickAway, "defaultProps", {
-  shouldCancel: () => false
+  shouldCancel: () => false,
+  closeOnEscapeKeypress: true
 });

package/lib/utils/click-away.js.flow

@@ -17,6 +17,7 @@ export type ChildProps = {
 };
 
 type ClickAwayProps = {
+  closeOnEscapeKeypress?: boolean,
   children: (props: ChildProps) => React.Node,
   shouldCancel: (event: MouseEvent) => boolean,
   onChange?: (isOpen: boolean) => mixed,
@@ -31,9 +32,13 @@ type ClickAwayState = {
 // TODO(Nishant): Make this a functional component
 
 export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
-  static defaultProps: {shouldCancel: () => boolean} = {
-    shouldCancel: () => false,
-  };
+  static defaultProps: {
+    shouldCancel: () => boolean,
+    closeOnEscapeKeypress?: boolean,
+  } = {
+      shouldCancel: () => false,
+      closeOnEscapeKeypress: true,
+    };
 
   state: ClickAwayState = {
     isOpen: false,
@@ -58,14 +63,28 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
     if (prevState.isOpen !== isOpen) {
       if (this.state.isOpen) {
         window.document.addEventListener('click', this.handleCloseClick);
+        if (this.props.closeOnEscapeKeypress) {
+          window.document.addEventListener(
+            'keyup',
+            this.handleCloseOnEscapeKeypress,
+          );
+        }
       } else {
         window.document.removeEventListener('click', this.handleCloseClick);
+        window.document.removeEventListener(
+          'keyup',
+          this.handleCloseOnEscapeKeypress,
+        );
       }
     }
   }
 
   componentWillUnmount() {
     window.document.removeEventListener('click', this.handleCloseClick);
+    window.document.removeEventListener(
+      'keyup',
+      this.handleCloseOnEscapeKeypress,
+    );
   }
 
   render(): React.Node {
@@ -115,6 +134,14 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
     }
   };
 
+  handleCloseOnEscapeKeypress: (
+    evt?: SyntheticKeyboardEvent<EventTarget>,
+  ) => void = (evt?: SyntheticKeyboardEvent<EventTarget>) => {
+      if (evt?.key === 'Escape') {
+        this.forceClose();
+      }
+    };
+
   forceClose: () => void = () => {
     this.setState({isOpen: false}, this.handleOnChange);
   };

package/lib/utils/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uuid = void 0;
+exports.uuid = exports.range = void 0;
 
 const uuid = () => {
   let dt = new Date().getTime();
@@ -13,4 +13,11 @@ const uuid = () => {
     return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
   });
 };
-exports.uuid = uuid;
+exports.uuid = uuid;
+const range = (start, end) => {
+  const length = end - start + 1;
+  return Array.from({
+    length
+  }, (_, i) => start + i);
+};
+exports.range = range;

package/lib/utils/helpers.js.flow

@@ -9,3 +9,8 @@ export const uuid = (): string => {
     return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
   });
 };
+
+export const range = (start: number, end: number): Array<number> => {
+  const length = end - start + 1;
+  return Array.from({length}, (_, i) => start + i);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {