@spaced-out/ui-design-system 0.1.37 → 0.1.39

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.39](https://github.com/spaced-out/ui-design-system/compare/v0.1.38...v0.1.39) (2023-07-19)
+
+
+### Features
+
+* table top bottom action bar and other enhancements ([#129](https://github.com/spaced-out/ui-design-system/issues/129)) ([6d6a281](https://github.com/spaced-out/ui-design-system/commit/6d6a281d092c5d34e97dbeba79d23e449ae01406))
+
+
+### Bug Fixes
+
+* typo fixes ([2c028d3](https://github.com/spaced-out/ui-design-system/commit/2c028d3fc6e02ed30f4c259ee4396bfcbe1e3eed))
+
+### [0.1.38](https://github.com/spaced-out/ui-design-system/compare/v0.1.37...v0.1.38) (2023-07-19)
+
+
+### Bug Fixes
+
+* focus manager with arrow key navigation enhancements ([#127](https://github.com/spaced-out/ui-design-system/issues/127)) ([ca183a0](https://github.com/spaced-out/ui-design-system/commit/ca183a04a6dc5c11cbe24267cf95471ef9f698e5))
+
 ### [0.1.37](https://github.com/spaced-out/ui-design-system/compare/v0.1.37-beta.1...v0.1.37) (2023-07-18)
 
 

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -43,6 +43,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     iconRightType = 'solid',
     isFluid,
     tooltip,
+    onClick,
     ...restButtonProps
   } = _ref;
   const menuBtnRef = React.useRef(null);
@@ -96,6 +97,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       size: size,
       ref: refs.setReference,
       onClick: e => {
+        onClick?.(e);
         e.stopPropagation();
         onOpen();
       },

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

@@ -76,6 +76,7 @@ export const ButtonDropdown: React$AbstractComponent<
       iconRightType = 'solid',
       isFluid,
       tooltip,
+      onClick,
       ...restButtonProps
     }: ButtonDropdownProps,
     forwardRef,
@@ -138,6 +139,7 @@ export const ButtonDropdown: React$AbstractComponent<
                 size={size}
                 ref={refs.setReference}
                 onClick={(e) => {
+                  onClick?.(e);
                   e.stopPropagation();
                   onOpen();
                 }}

package/lib/components/Dropdown/SimpleDropdown.js

@@ -52,7 +52,6 @@ const SimpleDropdownBase = (props, ref) => {
   }));
   return /*#__PURE__*/React.createElement(_Dropdown.Dropdown, _extends({}, inputProps, {
     classNames: classNames,
-    label: "Form Label",
     size: size,
     placeholder: placeholder,
     onChange: handleOptionChange,

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

@@ -106,7 +106,6 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     <Dropdown
       {...inputProps}
       classNames={classNames}
-      label="Form Label"
       size={size}
       placeholder={placeholder}
       onChange={handleOptionChange}

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.js

@@ -7,14 +7,24 @@ exports.SkipElementFromNavigation = exports.FocusManagerWithArrowKeyNavigation =
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
 var _FocusManagerWithArrowKeyNavigationModule = _interopRequireDefault(require("./FocusManagerWithArrowKeyNavigation.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 SKIP_ELEMENT_DISPLAY_NAME = 'SkipElementFromNavigation';
-const SkipElementFromNavigation = (0, _makeClassNameComponent.makeClassNameComponent)(_FocusManagerWithArrowKeyNavigationModule.default.skipElementWrapper);
+const SkipElementFromNavigation = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+    className: className,
+    tabIndex: -1,
+    ref: ref
+  }), children);
+});
 exports.SkipElementFromNavigation = SkipElementFromNavigation;
 SkipElementFromNavigation.displayName = SKIP_ELEMENT_DISPLAY_NAME;
 const FocusManagerWithArrowKeyNavigation = props => {
@@ -25,6 +35,8 @@ const FocusManagerWithArrowKeyNavigation = props => {
     orientation = 'vertical',
     modal = false,
     cols = 1,
+    focusItemOnOpen = 'auto',
+    loop = false,
     ...restFloatingFocusManagerProps
   } = props;
   const {
@@ -83,7 +95,9 @@ const FocusManagerWithArrowKeyNavigation = props => {
     cols,
     listRef,
     activeIndex,
-    onNavigate: setActiveIndex
+    onNavigate: setActiveIndex,
+    focusItemOnOpen,
+    loop
   });
   const {
     getFloatingProps

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.js.flow

@@ -13,8 +13,6 @@ import {
 } from '@floating-ui/react';
 
 import classify from '../../utils/classify';
-import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
-import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
 import type {FocusManagerProps} from '../FocusManager';
 
 import css from './FocusManagerWithArrowKeyNavigation.module.css';
@@ -22,19 +20,38 @@ import css from './FocusManagerWithArrowKeyNavigation.module.css';
 
 const SKIP_ELEMENT_DISPLAY_NAME = 'SkipElementFromNavigation';
 
-export const SkipElementFromNavigation: ClassNameComponent<'div'> =
-  makeClassNameComponent(css.skipElementWrapper);
+export type SkipElementFromNavigationProps = {
+  children: React.Node,
+  className?: string,
+  ...
+};
+
+export const SkipElementFromNavigation: React$AbstractComponent<
+  SkipElementFromNavigationProps,
+  HTMLDivElement,
+> = React.forwardRef<SkipElementFromNavigationProps, HTMLDivElement>(
+  (
+    {children, className, ...restProps}: SkipElementFromNavigationProps,
+    ref,
+  ) => (
+    <div {...restProps} className={className} tabIndex={-1} ref={ref}>
+      {children}
+    </div>
+  ),
+);
 
 SkipElementFromNavigation.displayName = SKIP_ELEMENT_DISPLAY_NAME;
 
-export type FocusManagerWithListNavigationProps = {
+export type FocusManagerWithArrowKeyNavigationProps = {
   ...FocusManagerProps,
   cols?: number,
   orientation?: 'horizontal' | 'vertical',
+  focusItemOnOpen?: 'auto' | boolean,
+  loop?: boolean,
 };
 
 export const FocusManagerWithArrowKeyNavigation = (
-  props: FocusManagerWithListNavigationProps,
+  props: FocusManagerWithArrowKeyNavigationProps,
 ): React.Node => {
   const {
     classNames,
@@ -43,6 +60,8 @@ export const FocusManagerWithArrowKeyNavigation = (
     orientation = 'vertical',
     modal = false,
     cols = 1,
+    focusItemOnOpen = 'auto',
+    loop = false,
     ...restFloatingFocusManagerProps
   } = props;
 
@@ -95,6 +114,8 @@ export const FocusManagerWithArrowKeyNavigation = (
     listRef,
     activeIndex,
     onNavigate: setActiveIndex,
+    focusItemOnOpen,
+    loop,
   });
   const {getFloatingProps} = useInteractions([listNavigation]);
 

package/lib/components/Table/TableActionBar.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableActionBar = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _TableBarModule = _interopRequireDefault(require("./TableBar.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 TableActionBar = _ref => {
+  let {
+    children,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: (0, _classify.classify)(_TableBarModule.default.tableActionBar, className),
+    "data-testid": "table-action-bar"
+  }), children);
+};
+exports.TableActionBar = TableActionBar;

package/lib/components/Table/TableActionBar.js.flow

@@ -0,0 +1,28 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './TableBar.module.css';
+
+
+export type TableActionBarProps = {
+  children?: React.Node,
+  className?: string,
+  ...
+};
+
+export const TableActionBar = ({
+  children,
+  className,
+  ...props
+}: TableActionBarProps): React.Node => (
+  <div
+    {...props}
+    className={classify(css.tableActionBar, className)}
+    data-testid="table-action-bar"
+  >
+    {children}
+  </div>
+);

package/lib/components/Table/TableBar.module.css

@@ -0,0 +1,47 @@
+@value (spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium, spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
+@value (size2, size22, size48, size60, size240, size300) from '../../styles/variables/_size.css';
+@value (borderRadiusMedium, borderRadiusNone) from '../../styles/variables/_border.css';
+@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (elevationMenu) from '../../styles/variables/_elevation.css';
+
+.tableBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: calc(size22 * 3);
+  width: sizeFluid;
+  padding: spaceSmall spaceMedium;
+  background-color: colorBackgroundTertiary;
+}
+
+.topBar {
+  composes: borderPrimary from '../../styles/border.module.css';
+  border-bottom: none;
+  border-radius: borderRadiusMedium borderRadiusMedium borderRadiusNone
+    borderRadiusNone;
+}
+
+.bottomBar {
+  composes: borderPrimary from '../../styles/border.module.css';
+  min-height: calc(size60 - size2);
+  border-top: none;
+  border-radius: borderRadiusNone borderRadiusNone borderRadiusMedium
+    borderRadiusMedium;
+}
+
+.tableActionBar {
+  composes: borderPrimary from '../../styles/border.module.css';
+  composes: boxShadow4 from '../../styles/shadow.module.css';
+  position: absolute;
+  left: spaceHalfFluid;
+  z-index: elevationMenu;
+  transform: translateX(spaceNegHalfFluid);
+  bottom: calc(spaceMedium * -1);
+  display: flex;
+  align-items: center;
+  min-height: calc(size60 - size2);
+  width: fit-content;
+  padding: spaceSmall;
+  background-color: colorBackgroundTertiary;
+  border-radius: borderRadiusMedium;
+}

package/lib/components/Table/TableBottomBar.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableBottomBar = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _TableBarModule = _interopRequireDefault(require("./TableBar.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 TableBottomBar = _ref => {
+  let {
+    children,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: (0, _classify.classify)(_TableBarModule.default.tableBar, _TableBarModule.default.bottomBar, className),
+    "data-testid": "table-bottom-bar"
+  }), children);
+};
+exports.TableBottomBar = TableBottomBar;

package/lib/components/Table/TableBottomBar.js.flow

@@ -0,0 +1,28 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './TableBar.module.css';
+
+
+export type TableBottomBarProps = {
+  children?: React.Node,
+  className?: string,
+  ...
+};
+
+export const TableBottomBar = ({
+  children,
+  className,
+  ...props
+}: TableBottomBarProps): React.Node => (
+  <div
+    {...props}
+    className={classify(css.tableBar, css.bottomBar, className)}
+    data-testid="table-bottom-bar"
+  >
+    {children}
+  </div>
+);

package/lib/components/Table/TableTopBar.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableTopBar = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _TableBarModule = _interopRequireDefault(require("./TableBar.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 TableTopBar = _ref => {
+  let {
+    children,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: (0, _classify.classify)(_TableBarModule.default.tableBar, _TableBarModule.default.topBar, className),
+    "data-testid": "table-top-bar"
+  }), children);
+};
+exports.TableTopBar = TableTopBar;

package/lib/components/Table/TableTopBar.js.flow

@@ -0,0 +1,28 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './TableBar.module.css';
+
+
+export type TableTopBarProps = {
+  children?: React.Node,
+  className?: string,
+  ...
+};
+
+export const TableTopBar = ({
+  children,
+  className,
+  ...props
+}: TableTopBarProps): React.Node => (
+  <div
+    {...props}
+    className={classify(css.tableBar, css.topBar, className)}
+    data-testid="table-top-bar"
+  >
+    {children}
+  </div>
+);