@spaced-out/ui-design-system 0.1.12 → 0.1.14

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.14](https://github.com/spaced-out/ui-design-system/compare/v0.1.13...v0.1.14) (2023-04-17)
+
+
+### Features
+
+* focus manager component ([#102](https://github.com/spaced-out/ui-design-system/issues/102)) ([734c2a5](https://github.com/spaced-out/ui-design-system/commit/734c2a5315a9548bcbf9653b8bafd54af1d97b6a))
+
+### [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)
 
 

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/Dropdown/index.js

@@ -3,16 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Dropdown", {
-  enumerable: true,
-  get: function () {
-    return _Dropdown.Dropdown;
-  }
-});
-Object.defineProperty(exports, "DropdownProps", {
-  enumerable: true,
-  get: function () {
-    return _Dropdown.DropdownProps;
-  }
-});
-var _Dropdown = require("./Dropdown");
+var _Dropdown = require("./Dropdown");
+Object.keys(_Dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Dropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Dropdown[key];
+    }
+  });
+});

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

@@ -1,4 +1,3 @@
 // @flow strict
 
-export {Dropdown} from './Dropdown';
-export {DropdownProps} from './Dropdown';
+export * from './Dropdown';

package/lib/components/FocusManager/FocusManager.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FocusManager = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _FocusManagerModule = _interopRequireDefault(require("./FocusManager.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 FocusManager = props => {
+  const {
+    floating,
+    context
+  } = (0, _reactDomInteractions.useFloating)();
+  const {
+    classNames,
+    children,
+    initialFocus = -1,
+    ...restFloatingFocusManagerProps
+  } = props;
+  return /*#__PURE__*/React.createElement(_reactDomInteractions.FloatingFocusManager, _extends({
+    context: context,
+    initialFocus: initialFocus
+  }, restFloatingFocusManagerProps), /*#__PURE__*/React.createElement("div", {
+    ref: floating,
+    "data-testid": "FocusManager",
+    className: (0, _classify.default)(_FocusManagerModule.default.wrapper, classNames?.wrapper)
+  }, children));
+};
+exports.FocusManager = FocusManager;

package/lib/components/FocusManager/FocusManager.js.flow

@@ -0,0 +1,50 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react-dom-interactions';
+
+import classify from '../../utils/classify';
+
+import css from './FocusManager.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type FocusManagerProps = {
+  classNames?: ClassNames,
+  children?: React.Node,
+  initialFocus?: number,
+  returnFocus?: boolean,
+  guards?: boolean,
+};
+
+export const FocusManager = (props: FocusManagerProps): React.Node => {
+  const {floating, context} = useFloating();
+  const {
+    classNames,
+    children,
+    initialFocus = -1,
+    ...restFloatingFocusManagerProps
+  } = props;
+
+  return (
+    <FloatingFocusManager
+      context={context}
+      initialFocus={initialFocus}
+      {...restFloatingFocusManagerProps}
+    >
+      <div
+        ref={floating}
+        data-testid="FocusManager"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        {children}
+      </div>
+    </FloatingFocusManager>
+  );
+};

package/lib/components/FocusManager/FocusManager.module.css

@@ -0,0 +1,3 @@
+.wrapper {
+  display: flex;
+}

package/lib/components/FocusManager/index.js

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

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

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

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/PaginationItem.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.PaginationItem = exports.PaginationButton = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _Button = require("../Button/Button.js");
-var _Text = require("../Text/Text.js");
+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); }

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

@@ -3,10 +3,10 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
-import {Button} from '../Button/Button.js';
-import {ButtonTextSmall} from '../Text/Text.js';
+import {Button} from '../Button';
+import {ButtonTextSmall} from '../Text';
 
-import type {PaginationItemProps} from './Pagination.js';
+import type {PaginationItemProps} from './Pagination';
 
 import css from './Pagination.module.css';
 

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/usePagination.js.flow

@@ -3,7 +3,7 @@
 import type {
   PaginationBaseProps,
   PaginationItemProps,
-} from '../components/Pagination/Pagination.js';
+} from '../components/Pagination';
 import {range} from '../utils/helpers';
 
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -121,6 +121,7 @@
     }
   },
   "volta": {
-    "node": "16.16.0"
+    "node": "16.16.0",
+    "yarn": "1.22.19"
   }
 }