@spaced-out/ui-design-system 0.1.116 → 0.1.117

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.117](https://github.com/spaced-out/ui-design-system/compare/v0.1.116...v0.1.117) (2024-07-30)
+
+
+### Features
+
+* wrapAfter prop in button tabs ([#248](https://github.com/spaced-out/ui-design-system/issues/248)) ([af99d41](https://github.com/spaced-out/ui-design-system/commit/af99d41270ae97e92d3a0e0e0bf07c1a02af0b33))
+
 ### [0.1.116](https://github.com/spaced-out/ui-design-system/compare/v0.1.115...v0.1.116) (2024-07-25)
 
 

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js.flow

@@ -15,7 +15,7 @@ export type ButtonTabProps = {
   classNames?: ClassNames,
   children?: React.Node,
   disabled?: boolean,
-  onButtonTabSelect?: ?(id: string, e?: SyntheticEvent<HTMLElement>) => mixed,
+  onButtonTabSelect?: ?(id: string, e?: ?SyntheticEvent<HTMLElement>) => mixed,
   iconName?: string,
   iconType?: IconType,
   size?: 'medium' | 'small',

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.module.css

@@ -66,8 +66,9 @@
 .buttonTabWrapper.isSelected {
   background-color: colorFillSecondary;
   color: colorTextPrimary;
-  border-width: borderWidthPrimary borderWidthPrimary borderWidthPrimary
-    borderWidthNone;
+  border-top-width: borderWidthPrimary;
+  border-right-width: borderWidthPrimary;
+  border-bottom-width: borderWidthPrimary;
   border-style: solid;
   border-color: colorBorderPrimary;
 }

package/lib/components/ButtonTabs/ButtonTabDropdown.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonTabDropdown = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@floating-ui/react");
+var _lodash = require("lodash");
+var _space = require("../../styles/variables/_space");
+var _clickAway = require("../../utils/click-away");
+var _Menu = require("../Menu");
+var _ButtonTab = require("./ButtonTab");
+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 ButtonTabDropdown = _ref => {
+  let {
+    title,
+    anchorPosition = 'bottom-end',
+    ...buttonTabProps
+  } = _ref;
+  const menuBtnRef = React.useRef();
+  const {
+    size,
+    children,
+    selectedButtonTabId,
+    onButtonTabSelect: onTabSelect
+  } = buttonTabProps;
+  const childrenArray = React.Children.toArray(children);
+  const menuOptions = childrenArray.map(child => {
+    const {
+      id,
+      children,
+      disabled,
+      iconName,
+      iconType,
+      classNames,
+      size: buttonSize
+    } = child.props;
+    return {
+      key: id,
+      disabled,
+      classNames,
+      label: children,
+      iconLeft: iconName,
+      iconLeftType: iconType,
+      customComponent: children,
+      optionSize: buttonSize ?? size
+    };
+  });
+  const moreTabSelectedId = (0, _lodash.includes)(menuOptions.map(_ref2 => {
+    let {
+      key
+    } = _ref2;
+    return key;
+  }), selectedButtonTabId) ? 'more-tab' : selectedButtonTabId;
+  const {
+    x,
+    y,
+    refs,
+    strategy
+  } = (0, _react2.useFloating)({
+    open: true,
+    strategy: 'absolute',
+    placement: anchorPosition,
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
+  });
+  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, null, _ref3 => {
+    let {
+      isOpen,
+      onOpen,
+      cancelNext,
+      clickAway
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "ButtonTabDropdown",
+      ref: menuBtnRef
+    }, /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, _extends({}, buttonTabProps, {
+      ref: refs.setReference,
+      selectedButtonTabId: moreTabSelectedId,
+      onButtonTabSelect: (id, e) => {
+        e?.stopPropagation();
+        onOpen();
+      }
+    }), title), isOpen && /*#__PURE__*/React.createElement("div", {
+      onClickCapture: cancelNext,
+      ref: refs.setFloating,
+      style: {
+        display: 'flex',
+        position: strategy,
+        top: y ?? _space.spaceNone,
+        left: x ?? _space.spaceNone
+      }
+    }, /*#__PURE__*/React.createElement(_Menu.Menu, {
+      onSelect: (option, e) => {
+        onTabSelect && onTabSelect(option.key, e);
+        clickAway();
+      },
+      size: size,
+      options: menuOptions,
+      onTabOut: clickAway,
+      selectedKeys: [selectedButtonTabId ?? '']
+    })));
+  });
+};
+exports.ButtonTabDropdown = ButtonTabDropdown;

package/lib/components/ButtonTabs/ButtonTabDropdown.js.flow

@@ -0,0 +1,125 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate,
+  // $FlowFixMe[untyped-import]
+  flip,
+  // $FlowFixMe[untyped-import]
+  offset,
+  // $FlowFixMe[untyped-import]
+  shift,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+import {includes} from 'lodash';
+
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import {ClickAway} from '../../utils/click-away';
+import type {AnchorType} from '../ButtonDropdown';
+import {Menu} from '../Menu';
+
+import type {ButtonTabProps} from './ButtonTab';
+import {ButtonTab} from './ButtonTab';
+
+
+export type ButtonTabDropdownProps = {
+  ...ButtonTabProps,
+  title: string,
+  anchorPosition?: AnchorType,
+  ...
+};
+
+export const ButtonTabDropdown = ({
+  title,
+  anchorPosition = 'bottom-end',
+  ...buttonTabProps
+}: ButtonTabDropdownProps): React.Node => {
+  const menuBtnRef = React.useRef();
+  const {
+    size,
+    children,
+    selectedButtonTabId,
+    onButtonTabSelect: onTabSelect,
+  } = buttonTabProps;
+  const childrenArray = React.Children.toArray(children);
+  const menuOptions = childrenArray.map((child) => {
+    const {
+      id,
+      children,
+      disabled,
+      iconName,
+      iconType,
+      classNames,
+      size: buttonSize,
+    } = child.props;
+    return {
+      key: id,
+      disabled,
+      classNames,
+      label: children,
+      iconLeft: iconName,
+      iconLeftType: iconType,
+      customComponent: children,
+      optionSize: buttonSize ?? size,
+    };
+  });
+  const moreTabSelectedId = includes(
+    menuOptions.map(({key}) => key),
+    selectedButtonTabId,
+  )
+    ? 'more-tab'
+    : selectedButtonTabId;
+
+  const {x, y, refs, strategy} = useFloating({
+    open: true,
+    strategy: 'absolute',
+    placement: anchorPosition,
+    whileElementsMounted: autoUpdate,
+    middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+  });
+
+  return (
+    <ClickAway>
+      {({isOpen, onOpen, cancelNext, clickAway}) => (
+        <div data-testid="ButtonTabDropdown" ref={menuBtnRef}>
+          <ButtonTab
+            {...buttonTabProps}
+            ref={refs.setReference}
+            selectedButtonTabId={moreTabSelectedId}
+            onButtonTabSelect={(id, e) => {
+              e?.stopPropagation();
+              onOpen();
+            }}
+          >
+            {title}
+          </ButtonTab>
+          {isOpen && (
+            <div
+              onClickCapture={cancelNext}
+              ref={refs.setFloating}
+              style={{
+                display: 'flex',
+                position: strategy,
+                top: y ?? spaceNone,
+                left: x ?? spaceNone,
+              }}
+            >
+              <Menu
+                onSelect={(option, e) => {
+                  onTabSelect && onTabSelect(option.key, e);
+                  clickAway();
+                }}
+                size={size}
+                options={menuOptions}
+                onTabOut={clickAway}
+                selectedKeys={[selectedButtonTabId ?? '']}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </ClickAway>
+  );
+};

package/lib/components/ButtonTabs/ButtonTabs.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ButtonTabs = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ButtonTabDropdown = require("./ButtonTabDropdown");
 var _ButtonTabsModule = _interopRequireDefault(require("./ButtonTabs.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); }
@@ -19,18 +20,35 @@ const ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     size = 'medium',
     disabled,
     selectedButtonTabId,
-    onButtonTabSelect
+    onButtonTabSelect,
+    wrapAfter,
+    wrapTabTitle = 'more',
+    anchorPosition
   } = _ref;
   const childrenArray = React.Children.toArray(children);
-  const childrenWithProps = childrenArray.map((child, index) => {
+  let unwrappedNodes = childrenArray;
+  let wrappedNodes = [];
+  if (typeof wrapAfter === 'number' && wrapAfter > -1) {
+    unwrappedNodes = childrenArray.slice(0, wrapAfter);
+    wrappedNodes = childrenArray.slice(wrapAfter);
+    if (wrappedNodes.length) {
+      unwrappedNodes.push( /*#__PURE__*/React.createElement(_ButtonTabDropdown.ButtonTabDropdown, {
+        id: "more-tab",
+        title: wrapTabTitle,
+        iconName: "ellipsis-vertical",
+        anchorPosition: anchorPosition
+      }, wrappedNodes));
+    }
+  }
+  const childrenWithProps = unwrappedNodes.map((child, index) => {
     if ( /*#__PURE__*/React.isValidElement(child)) {
       const {
         disabled: disabledChild,
         classNames: classNamesChild
       } = child.props;
       const isFirst = index === 0;
-      const isLast = index === childrenArray.length - 1;
-      const isSingleChild = childrenArray.length === 1;
+      const isLast = index === unwrappedNodes.length - 1;
+      const isSingleChild = unwrappedNodes.length === 1;
       return /*#__PURE__*/React.cloneElement(child, {
         ...child.props,
         isFluid,

package/lib/components/ButtonTabs/ButtonTabs.js.flow

@@ -3,6 +3,9 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
+import type {AnchorType} from '../ButtonDropdown';
+
+import {ButtonTabDropdown} from './ButtonTabDropdown';
 
 import css from './ButtonTabs.module.css';
 
@@ -16,7 +19,10 @@ export type ButtonTabsProps = {
   size?: 'medium' | 'small',
   disabled?: boolean,
   selectedButtonTabId?: string,
-  onButtonTabSelect?: ?(id: string, e?: SyntheticEvent<HTMLElement>) => mixed,
+  onButtonTabSelect?: ?(id: string, e?: ?SyntheticEvent<HTMLElement>) => mixed,
+  wrapAfter?: number,
+  wrapTabTitle?: string,
+  anchorPosition?: AnchorType,
 };
 
 export const ButtonTabs: React$AbstractComponent<
@@ -32,18 +38,42 @@ export const ButtonTabs: React$AbstractComponent<
       disabled,
       selectedButtonTabId,
       onButtonTabSelect,
+      wrapAfter,
+      wrapTabTitle = 'more',
+      anchorPosition,
     }: ButtonTabsProps,
     ref,
   ): React.Node => {
     const childrenArray = React.Children.toArray(children);
 
-    const childrenWithProps = childrenArray.map((child, index) => {
+    let unwrappedNodes = childrenArray;
+    let wrappedNodes = [];
+
+    if (typeof wrapAfter === 'number' && wrapAfter > -1) {
+      unwrappedNodes = childrenArray.slice(0, wrapAfter);
+      wrappedNodes = childrenArray.slice(wrapAfter);
+
+      if (wrappedNodes.length) {
+        unwrappedNodes.push(
+          <ButtonTabDropdown
+            id="more-tab"
+            title={wrapTabTitle}
+            iconName="ellipsis-vertical"
+            anchorPosition={anchorPosition}
+          >
+            {wrappedNodes}
+          </ButtonTabDropdown>,
+        );
+      }
+    }
+
+    const childrenWithProps = unwrappedNodes.map((child, index) => {
       if (React.isValidElement(child)) {
         const {disabled: disabledChild, classNames: classNamesChild} =
           child.props;
         const isFirst = index === 0;
-        const isLast = index === childrenArray.length - 1;
-        const isSingleChild = childrenArray.length === 1;
+        const isLast = index === unwrappedNodes.length - 1;
+        const isSingleChild = unwrappedNodes.length === 1;
 
         return React.cloneElement(child, {
           ...child.props,

package/package.json

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