@hyphen/hyphen-components 3.0.0 → 4.0.0

package/dist/hyphen-components.esm.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import React__default, { forwardRef, Children, createElement, cloneElement, useRef, useState, useEffect, isValidElement, useContext, useCallback, useMemo, createContext, useLayoutEffect } from 'react';
 import classNames from 'classnames';
 import icons from '@hyphen/hyphen-design-tokens/build/assets/icons/react';
+import { Slottable, Slot } from '@radix-ui/react-slot';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import format from 'date-fns/format';
 import ReactDatePicker from 'react-datepicker';
@@ -11,7 +12,6 @@ import { usePopper } from 'react-popper';
 import FocusTrap from 'focus-trap-react';
 import designTokens from '@hyphen/hyphen-design-tokens/build/json/variables';
 import '@hyphen/hyphen-design-tokens/build/assets/icons';
-import { Slot } from '@radix-ui/react-slot';
 import ReactModal from 'react-modal';
 import FocusLock from 'react-focus-lock';
 import { RemoveScroll } from 'react-remove-scroll';
@@ -726,99 +726,47 @@ var Spinner = function Spinner(_ref) {
   }))));
 };
 
-var isModifiedEvent = function isModifiedEvent(e) {
-  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
-};
-/**
- * Due to react-router's handling of custom components used in RR <Link>
- * we must add this validation that ensures the router will execute the passed `navigate`
- * prop, thus navigating the user without triggering a refresh.
- *
- * SOURCES:
- *    https://github.com/ReactTraining/react-router/issues/7727
- *    https://github.com/ReactTraining/react-router/issues/7761
- * */
-// eslint-disable-next-line import/prefer-default-export
-var handleReactRouterClick = function handleReactRouterClick(event, onClick, target, navigate) {
-  if (onClick) onClick(event);
-  if (!event.defaultPrevented &&
-  // onClick prevented default
-  event.button === 0 && (
-  // ignore everything but left clicks
-  !target || target === '_self') &&
-  // let browser handle "target=_blank" etc.
-  !isModifiedEvent(event) &&
-  // ignore clicks with modifier keys
-  navigate) {
-    event.preventDefault();
-    navigate();
-  }
-};
-
 var styles$s = {"button":"Button-module_button__18Bed","size-sm":"Button-module_size-sm__6Xrjw","size-md":"Button-module_size-md__BkuGu","size-lg":"Button-module_size-lg__JVYWV","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","tertiary":"Button-module_tertiary__Nd7xM","danger":"Button-module_danger__Hxs5n","size-sm-tablet":"Button-module_size-sm-tablet__9XaSx","size-md-tablet":"Button-module_size-md-tablet__YQxaI","size-lg-tablet":"Button-module_size-lg-tablet__h3l97","size-sm-desktop":"Button-module_size-sm-desktop__8tTsg","size-md-desktop":"Button-module_size-md-desktop__OCdDi","size-lg-desktop":"Button-module_size-lg-desktop__uFc4f","size-sm-hd":"Button-module_size-sm-hd__INFfD","size-md-hd":"Button-module_size-md-hd__8e2mW","size-lg-hd":"Button-module_size-lg-hd__DH60l","loading":"Button-module_loading__QfItr","label":"Button-module_label__1PsXG","full-width":"Button-module_full-width__qDri6","spinner-wrapper":"Button-module_spinner-wrapper__rALNw"};
 
-var _excluded$I = ["children", "as", "className", "fullWidth", "id", "href", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "navigate", "onClick", "onFocus", "onBlur", "shadow", "size", "tabIndex", "target", "type", "variant"];
+var _excluded$I = ["asChild", "children", "className", "fullWidth", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "onClick", "onBlur", "onFocus", "shadow", "size", "variant"];
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _classNames, _extends2;
-  var _ref$children = _ref.children,
-    children = _ref$children === void 0 ? undefined : _ref$children,
-    _ref$as = _ref.as,
-    as = _ref$as === void 0 ? 'button' : _ref$as,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$fullWidth = _ref.fullWidth,
-    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? undefined : _ref$id,
-    _ref$href = _ref.href,
-    href = _ref$href === void 0 ? undefined : _ref$href,
-    _ref$iconPrefix = _ref.iconPrefix,
-    iconPrefix = _ref$iconPrefix === void 0 ? undefined : _ref$iconPrefix,
-    _ref$iconSuffix = _ref.iconSuffix,
-    iconSuffix = _ref$iconSuffix === void 0 ? undefined : _ref$iconSuffix,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    _ref$navigate = _ref.navigate,
-    navigate = _ref$navigate === void 0 ? undefined : _ref$navigate,
-    _ref$onClick = _ref.onClick,
-    _onClick = _ref$onClick === void 0 ? undefined : _ref$onClick,
-    _ref$onFocus = _ref.onFocus,
-    onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
-    _ref$onBlur = _ref.onBlur,
-    onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
-    _ref$shadow = _ref.shadow,
-    shadow = _ref$shadow === void 0 ? undefined : _ref$shadow,
+  var _classNames;
+  var asChild = _ref.asChild,
+    children = _ref.children,
+    className = _ref.className,
+    fullWidth = _ref.fullWidth,
+    iconPrefix = _ref.iconPrefix,
+    iconSuffix = _ref.iconSuffix,
+    isDisabled = _ref.isDisabled,
+    isLoading = _ref.isLoading,
+    onClick = _ref.onClick,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    shadow = _ref.shadow,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
-    _ref$tabIndex = _ref.tabIndex,
-    tabIndex = _ref$tabIndex === void 0 ? undefined : _ref$tabIndex,
-    _ref$target = _ref.target,
-    target = _ref$target === void 0 ? undefined : _ref$target,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? undefined : _ref$type,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   var disabled = isLoading || isDisabled;
   var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
     return styles$s[c];
-  });
+  }).filter(Boolean);
   var buttonClasses = classNames('hyphen-components__variables__form-control', styles$s.button, className, responsiveClasses, generateResponsiveClasses('shadow', shadow), (_classNames = {}, _classNames[styles$s.loading] = isLoading, _classNames[styles$s[variant]] = variant, _classNames[styles$s['full-width']] = fullWidth, _classNames));
-  var handleClick = handleReactRouterClick;
-  var handleFocus = function handleFocus(event) {
-    if (onFocus) onFocus(event);
-  };
-  var handleBlur = function handleBlur(event) {
-    if (onBlur) onBlur(event);
-  };
-  var buttonContent = iconPrefix || iconSuffix ? React__default.createElement(Box, {
-    display: "inline-flex",
-    direction: "row",
-    alignItems: "center",
-    gap: "md"
-  }, isLoading && React__default.createElement(Spinner, {
+  var handleClick = !disabled ? onClick : undefined;
+  var handleBlur = !disabled ? onBlur : undefined;
+  var handleFocus = !disabled ? onFocus : undefined;
+  var Comp = asChild ? Slot : 'button';
+  return React__default.createElement(Comp, _extends({}, disabled && {
+    'aria-disabled': true
+  }, {
+    disabled: disabled,
+    className: buttonClasses,
+    onClick: handleClick,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    ref: ref
+  }, restProps), isLoading && React__default.createElement(Spinner, {
     className: styles$s['spinner-wrapper']
   }), iconPrefix && React__default.createElement(Icon, {
     className: styles$s.label,
@@ -827,32 +775,18 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     focusable: "false",
     "data-testid": "prefixIcon",
     size: size === 'md' ? 'sm' : size
-  }), children && React__default.createElement("span", {
+  }), children && React__default.createElement(Slottable, null, asChild ? children : React__default.createElement("span", {
     className: styles$s.label
-  }, children), iconSuffix && React__default.createElement(Icon, {
+  }, children)), iconSuffix && React__default.createElement(Icon, {
     className: styles$s.label,
     name: iconSuffix,
     "aria-hidden": "true",
     focusable: "false",
     "data-testid": "suffixIcon",
     size: size === 'md' ? 'sm' : size
-  })) : React__default.createElement(React__default.Fragment, null, isLoading && React__default.createElement(Spinner, {
-    className: styles$s['spinner-wrapper']
-  }), function () {
-    if (children) {
-      return React__default.createElement("span", {
-        className: styles$s.label
-      }, children);
-    }
-    return null;
-  }());
-  var buttonElement = getElementType(Button, {
-    as: as
-  });
-  return createElement(buttonElement, _extends((_extends2 = {}, _extends2['aria-disabled'] = disabled, _extends2.id = id, _extends2.href = href, _extends2.className = buttonClasses, _extends2.disabled = disabled, _extends2.target = as === 'a' && href ? target : null, _extends2.rel = as === 'a' && href && target === '_blank' ? 'noopener noreferrer' : null, _extends2.onBlur = handleBlur, _extends2.onClick = function onClick(event) {
-    return handleClick(event, _onClick, target, navigate);
-  }, _extends2.onFocus = handleFocus, _extends2.ref = ref, _extends2.type = type || (as !== 'a' && !href ? 'button' : undefined), _extends2.tabIndex = tabIndex, _extends2), restProps), buttonContent);
+  }));
 });
+Button.displayName = 'Button';
 
 var _excluded$H = ["background", "borderColor", "borderWidth", "children", "display", "padding"];
 var CardFooter = function CardFooter(_ref) {
@@ -1587,6 +1521,9 @@ var BREAKPOINTS = /*#__PURE__*/[].concat(Object.entries(designTokens.size.breakp
       minWidth: parseInt(data['value'], 10)
     };
   }
+  return undefined;
+}).filter(function (breakpoint) {
+  return breakpoint !== undefined;
 });
 var Z_INDEX_VALUES = designTokens.size['z-index'];
 // export const BOX_SHADOW_VALUES = designTokens.size['box-shadow'];
@@ -2093,11 +2030,11 @@ var DrawerTitle = /*#__PURE__*/React__default.forwardRef(function (_ref5, ref) {
     fontWeight: "bold"
   }, props));
 });
-var DrawerCloseButton = /*#__PURE__*/React__default.forwardRef(function (_ref6, ref) {
+var DrawerCloseButton = /*#__PURE__*/forwardRef(function (_ref6, ref) {
   var className = _ref6.className,
     onClick = _ref6.onClick,
     onClose = _ref6.onClose,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded4$2);
+    rest = _objectWithoutPropertiesLoose(_ref6, _excluded4$2);
   var context = useContext(DrawerContext);
   var isStandalone = !context;
   var handleClick = function handleClick(event) {
@@ -2111,7 +2048,6 @@ var DrawerCloseButton = /*#__PURE__*/React__default.forwardRef(function (_ref6,
     }
   };
   return React__default.createElement(Button, _extends({
-    ref: ref,
     variant: "tertiary",
     "aria-label": "close",
     type: "button",
@@ -2119,8 +2055,9 @@ var DrawerCloseButton = /*#__PURE__*/React__default.forwardRef(function (_ref6,
     "data-drawer": "close",
     className: classNames('m-left-auto', className),
     size: "sm",
-    onClick: handleClick
-  }, props));
+    onClick: handleClick,
+    ref: ref
+  }, rest));
 });
 DrawerCloseButton.displayName = 'DrawerCloseButton';
 var DrawerContent = /*#__PURE__*/React__default.forwardRef(function (_ref7, ref) {