@spaced-out/ui-design-system 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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.1](https://github.com/spaced-out/ui-design-system/compare/v0.1.0...v0.1.1) (2023-03-31)
+
+
+### Bug Fixes
+
+* forward ref in clickableIcon ([#92](https://github.com/spaced-out/ui-design-system/issues/92)) ([8037aa4](https://github.com/spaced-out/ui-design-system/commit/8037aa4b4c5ee77076ea6a8dc002e5526e3d9da7))
+* tooltip fixes menu option accepts optionVariant override ([2d23b04](https://github.com/spaced-out/ui-design-system/commit/2d23b040885a5bf380c383e596647e76d988454b))
+
 ## [0.1.0](https://github.com/spaced-out/ui-design-system/compare/v0.0.68...v0.1.0) (2023-03-31)
 
 

package/lib/components/Icon/ClickableIcon.js

@@ -14,7 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 ClickableIcon = _ref => {
+const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size = 'medium',
     className,
@@ -35,13 +35,14 @@ const ClickableIcon = _ref => {
     className: (0, _classify.default)(_ClickableIconModule.default.button, {
       [_ClickableIconModule.default.small]: size === 'small',
       [_ClickableIconModule.default.medium]: size === 'medium'
-    }, className)
+    }, className),
+    ref: ref
   }), /*#__PURE__*/React.createElement(_.Icon, _extends({
     size: size
   }, props)));
-};
+});
 exports.ClickableIcon = ClickableIcon;
-const CloseIcon = _ref2 => {
+const CloseIcon = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     size = 'medium',
     type = 'regular',
@@ -53,6 +54,8 @@ const CloseIcon = _ref2 => {
     size: size,
     type: type,
     color: color
-  }, props));
-};
+  }, props, {
+    ref: ref
+  }));
+});
 exports.CloseIcon = CloseIcon;

package/lib/components/Icon/ClickableIcon.js.flow

@@ -13,38 +13,41 @@ import {Icon} from './';
 import css from './ClickableIcon.module.css';
 
 
-export const ClickableIcon = ({
-  size = 'medium',
-  className,
-  ariaLabel,
-  onClick,
-  ...props
-}: IconProps): React.Node => {
-  const onKeyDownHandler = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      onClick && onClick(e);
-    }
-  };
-  return (
-    <UnstyledButton
-      {...props}
-      onClick={onClick}
-      onKeyDown={onKeyDownHandler}
-      ariaLabel={ariaLabel}
-      className={classify(
-        css.button,
-        {
-          [css.small]: size === 'small',
-          [css.medium]: size === 'medium',
-        },
-        className,
-      )}
-    >
-      <Icon size={size} {...props} />
-    </UnstyledButton>
-  );
-};
+export const ClickableIcon: React$AbstractComponent<
+  IconProps,
+  HTMLButtonElement,
+> = React.forwardRef<IconProps, HTMLButtonElement>(
+  (
+    {size = 'medium', className, ariaLabel, onClick, ...props}: IconProps,
+    ref,
+  ) => {
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClick && onClick(e);
+      }
+    };
+    return (
+      <UnstyledButton
+        {...props}
+        onClick={onClick}
+        onKeyDown={onKeyDownHandler}
+        ariaLabel={ariaLabel}
+        className={classify(
+          css.button,
+          {
+            [css.small]: size === 'small',
+            [css.medium]: size === 'medium',
+          },
+          className,
+        )}
+        ref={ref}
+      >
+        <Icon size={size} {...props} />
+      </UnstyledButton>
+    );
+  },
+);
 
 export type CloseIconProps = {
   size?: IconSize,
@@ -55,17 +58,26 @@ export type CloseIconProps = {
   ariaLabel?: string,
 };
 
-export const CloseIcon = ({
-  size = 'medium',
-  type = 'regular',
-  color = TEXT_COLORS.primary,
-  ...props
-}: CloseIconProps): React.Node => (
-  <ClickableIcon
-    name="close"
-    size={size}
-    type={type}
-    color={color}
-    {...props}
-  />
+export const CloseIcon: React$AbstractComponent<
+  CloseIconProps,
+  HTMLButtonElement,
+> = React.forwardRef<CloseIconProps, HTMLButtonElement>(
+  (
+    {
+      size = 'medium',
+      type = 'regular',
+      color = TEXT_COLORS.primary,
+      ...props
+    }: CloseIconProps,
+    ref,
+  ) => (
+    <ClickableIcon
+      name="close"
+      size={size}
+      type={type}
+      color={color}
+      {...props}
+      ref={ref}
+    />
+  ),
 );

package/lib/components/Menu/Menu.js.flow

@@ -26,6 +26,7 @@ export type MenuOption = {
   iconRightType?: IconType,
   disabled?: boolean,
   optionSize?: MenuSizeTypes,
+  optionVariant?: MenuOptionsVariant,
 };
 
 // Render first available option set

package/lib/components/Menu/MenuOptionButton.js

@@ -37,7 +37,8 @@ const MenuOptionButton = props => {
     iconRight,
     iconRightType,
     disabled,
-    optionSize
+    optionSize,
+    optionVariant = optionsVariant
   } = option;
   const [buttonSize, setButtonSize] = React.useState(optionSize || size);
   const isSelected = () => {
@@ -61,11 +62,11 @@ const MenuOptionButton = props => {
     disabled: menuDisabled || disabled,
     onClick: () => onSelect && onSelect(option),
     autoFocus: selectedOption?.key === key
-  }, optionsVariant === 'checkbox' && /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
+  }, optionVariant === 'checkbox' && /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
     tabIndex: -1,
     disabled: menuDisabled || disabled,
     checked: isSelected()
-  }), optionsVariant === 'radio' && /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
+  }), optionVariant === 'radio' && /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
     disabled: menuDisabled || disabled,
     value: option.key,
     selectedValue: selectedKeys?.[0],

package/lib/components/Menu/MenuOptionButton.js.flow

@@ -40,6 +40,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     iconRightType,
     disabled,
     optionSize,
+    optionVariant = optionsVariant,
   } = option;
   const [buttonSize, setButtonSize] = React.useState(optionSize || size);
   const isSelected = () => {
@@ -72,14 +73,14 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
       onClick={() => onSelect && onSelect(option)}
       autoFocus={selectedOption?.key === key}
     >
-      {optionsVariant === 'checkbox' && (
+      {optionVariant === 'checkbox' && (
         <Checkbox
           tabIndex={-1}
           disabled={menuDisabled || disabled}
           checked={isSelected()}
         />
       )}
-      {optionsVariant === 'radio' && (
+      {optionVariant === 'radio' && (
         <RadioButton
           disabled={menuDisabled || disabled}
           value={option.key}

package/lib/components/Tooltip/Tooltip.js

@@ -47,6 +47,7 @@ const Tooltip = _ref => {
     strategy,
     context
   } = (0, _reactDomInteractions.useFloating)({
+    strategy: 'fixed',
     placement,
     open,
     onOpenChange: setOpen,

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

@@ -85,6 +85,7 @@ export const Tooltip = ({
 }: TooltipProps): React.Node => {
   const [open, setOpen] = React.useState(false);
   const {x, y, reference, floating, strategy, context} = useFloating({
+    strategy: 'fixed',
     placement,
     open,
     onOpenChange: setOpen,

package/package.json

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