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

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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)
 
 

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

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