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

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.15](https://github.com/spaced-out/ui-design-system/compare/v0.1.14...v0.1.15) (2023-04-18)
+
+
+### Features
+
+* tooltips now support custom components ([1096cf8](https://github.com/spaced-out/ui-design-system/commit/1096cf8efb96f1fb321e3a4e372aeafa114f9f51))
+
+
+### Bug Fixes
+
+* export everything from dropdown ([b2bb628](https://github.com/spaced-out/ui-design-system/commit/b2bb6286362acccaca12f794711d2d12c895633b))
+* fixed imports ([af88522](https://github.com/spaced-out/ui-design-system/commit/af88522d227895bbf67f81157ed5395dde76e75c))
+
+### [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)
 
 

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

@@ -13,7 +13,6 @@ var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _mergeRefs = require("../../utils/merge-refs");
 var _string = require("../../utils/string");
-var _Text = require("../Text");
 var _Truncate = require("../Truncate");
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -87,12 +86,14 @@ const Tooltip = _ref => {
     }
   }, getFloatingProps()), !!title && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
     line: titleMaxLines
-  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
-    color: "inversePrimary"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_TooltipModule.default.title, classNames?.title)
   }, title)), !!body && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
     line: bodyMaxLines
-  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
-    color: !title ? 'inversePrimary' : 'inverseSecondary'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_TooltipModule.default.body, {
+      [_TooltipModule.default.hasTitle]: !!title
+    }, classNames?.body)
   }, body))), bodyRef.current));
 };
 exports.Tooltip = Tooltip;

package/lib/components/Tooltip/Tooltip.js.flow

@@ -32,13 +32,12 @@ import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {mergeRefs} from '../../utils/merge-refs';
 import {capitalize} from '../../utils/string';
-import {BodyMedium, SubTitleExtraSmall} from '../Text';
 import {Truncate} from '../Truncate';
 
 import css from './Tooltip.module.css';
 
 
-type ClassNames = $ReadOnly<{tooltip?: string}>;
+type ClassNames = $ReadOnly<{tooltip?: string, title?: string, body?: string}>;
 
 export const DELAY_MOTION_DURATION_TYPES = Object.freeze({
   none: 'none',
@@ -147,19 +146,25 @@ export const Tooltip = ({
           >
             {!!title && (
               <Truncate line={titleMaxLines}>
-                <SubTitleExtraSmall color="inversePrimary">
+                <div className={classify(css.title, classNames?.title)}>
                   {title}
-                </SubTitleExtraSmall>
+                </div>
               </Truncate>
             )}
 
             {!!body && (
               <Truncate line={bodyMaxLines}>
-                <BodyMedium
-                  color={!title ? 'inversePrimary' : 'inverseSecondary'}
+                <div
+                  className={classify(
+                    css.body,
+                    {
+                      [css.hasTitle]: !!title,
+                    },
+                    classNames?.body,
+                  )}
                 >
                   {body}
-                </BodyMedium>
+                </div>
               </Truncate>
             )}
           </div>,

package/lib/components/Tooltip/Tooltip.module.css

@@ -1,4 +1,4 @@
-@value (colorTooltipFill) from '../../styles/variables/_color.css';
+@value (colorTooltipFill, colorTextInversePrimary, colorTextInverseSecondary) from '../../styles/variables/_color.css';
 @value (size300) from '../../styles/variables/_size.css';
 @value (spaceXSmall, spaceSmall, spaceXXSmall) from '../../styles/variables/_space.css';
 @value (borderRadiusSmall) from '../../styles/variables/_border.css';
@@ -17,3 +17,17 @@
   word-wrap: break-word;
   z-index: var(--tooltip-elevation);
 }
+
+.title {
+  composes: subTitleExtraSmall from '../../styles/typography.module.css';
+  color: colorTextInversePrimary;
+}
+
+.body {
+  composes: bodyMedium from '../../styles/typography.module.css';
+  color: colorTextInversePrimary;
+}
+
+.hasTitle {
+  color: colorTextInverseSecondary;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "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"
   }
 }