@kaizen/components 0.0.0-canary-winter-test-versioned-entries-20240618034211 → 0.0.0-canary-winter-test-versioned-entries-20240618235945

package/dist/cjs/Button/GenericButton/GenericButton.cjs

@@ -3,8 +3,6 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var reactAria = require('react-aria');
-var reactAriaComponents = require('react-aria-components');
 var Badge = require('../../Badge/Badge.cjs');
 require('../../Loading/LoadingGraphic/LoadingGraphic.cjs');
 require('../../Loading/LoadingHeading/LoadingHeading.cjs');
@@ -48,7 +46,6 @@ var GenericButton = React.forwardRef(function (_a, ref) {
     type = _h === void 0 ? "button" : _h,
     otherProps = tslib.__rest(_a, ["iconPosition", "iconButton", "primary", "secondary", "newTabAndIUnderstandTheAccessibilityImplications", "disableTabFocusAndIUnderstandTheAccessibilityImplications", "type"]);
   var buttonRef = React.useRef();
-  var wrapperRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
     return {
       focus: function () {
@@ -66,111 +63,108 @@ var GenericButton = React.forwardRef(function (_a, ref) {
     disableTabFocusAndIUnderstandTheAccessibilityImplications: disableTabFocusAndIUnderstandTheAccessibilityImplications,
     type: type
   }, otherProps);
-  if (props.component) {
-    return renderCustomComponent(props.component, props, wrapperRef);
-  }
+  var determineButtonRenderer = function () {
+    if (props.component) {
+      return renderCustomComponent(props.component, props);
+    }
+    if (props.href && !props.disabled && !props.working) {
+      return renderLink(props, buttonRef);
+    }
+    return renderButton(props, buttonRef);
+  };
   return React__default.default.createElement("span", {
-    ref: wrapperRef,
     className: classnames__default.default(GenericButton_module.container, props.fullWidth && GenericButton_module.fullWidth),
     "aria-live": "workingLabel" in props ? "polite" : undefined
-  }, props.href && !props.disabled && !props.working ? renderLink(props, buttonRef) : renderButton(props, buttonRef));
+  }, determineButtonRenderer());
 });
 GenericButton.displayName = "GenericButton";
-var renderCustomComponent = function (CustomComponent, props, ref) {
-  var passedInProps = tslib.__assign({
-    id: props.id,
+var renderCustomComponent = function (CustomComponent, props) {
+  var id = props.id,
+    disabled = props.disabled,
+    href = props.href,
+    onClick = props.onClick,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    rest = tslib.__rest(props, ["id", "disabled", "href", "onClick", "onFocus", "onBlur"]);
+  var customProps = getCustomProps(rest);
+  return React__default.default.createElement(CustomComponent, tslib.__assign({
+    id: id,
     className: buttonClass(props),
-    disabled: props.disabled,
-    href: props.href,
-    onClick: props.onClick,
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
+    disabled: disabled,
+    href: href,
+    onClick: onClick,
+    onFocus: onFocus,
+    onBlur: onBlur,
     "aria-label": generateAriaLabel(props)
-  }, getCustomProps(props));
-  var _a = reactAriaComponents.useContextProps(passedInProps, ref,
-    // @ts-expect-error we're using span ref on link context, but that's ok because we need only sizing
-    reactAriaComponents.LinkContext),
-    contextProps = _a[0],
-    contextRef = _a[1];
-  // @ts-expect-error
-  // @todo: Make a wrapper and take it out of Button
-  var linkProps = reactAria.useLink(contextProps, contextRef).linkProps;
-  // Unset this because the one defined in buttonProps shows
-  // focus-visible styles on click, in future we'll style using [data-focus-visible] which is consistent across browsers
-  delete linkProps.onPointerDown;
-  return React__default.default.createElement("span", {
-    ref: contextRef,
-    className: classnames__default.default(GenericButton_module.container, props.fullWidth && GenericButton_module.fullWidth),
-    "aria-live": "workingLabel" in props ? "polite" : undefined
-  }, React__default.default.createElement(CustomComponent, tslib.__assign({}, contextProps, linkProps, {
-    "aria-describedby": props["aria-describedby"] === null ? undefined : linkProps["aria-describedby"]
-  }), renderContent(props)));
+  }, customProps), renderContent(props));
 };
 var renderButton = function (props, ref) {
-  var passedInProps = tslib.__assign({
-    id: props.id,
-    disabled: props.disabled,
-    onClick: props.onClick,
-    onMouseDown: props.onMouseDown,
-    type: props.type,
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
-    form: props.form,
-    formAction: props.formAction,
-    formMethod: props.formMethod,
-    formEncType: props.formEncType,
-    formTarget: props.formTarget,
-    formNoValidate: props.formNoValidate,
+  var id = props.id,
+    disabled = props.disabled,
+    onClick = props.onClick,
+    onMouseDown = props.onMouseDown,
+    type = props.type,
+    disableTabFocusAndIUnderstandTheAccessibilityImplications = props.disableTabFocusAndIUnderstandTheAccessibilityImplications,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    form = props.form,
+    formAction = props.formAction,
+    formMethod = props.formMethod,
+    formEncType = props.formEncType,
+    formTarget = props.formTarget,
+    formNoValidate = props.formNoValidate,
+    rest = tslib.__rest(props, ["id", "disabled", "onClick", "onMouseDown", "type", "disableTabFocusAndIUnderstandTheAccessibilityImplications", "onFocus", "onBlur", "form", "formAction", "formMethod", "formEncType", "formTarget", "formNoValidate"]);
+  var customProps = getCustomProps(rest);
+  return React__default.default.createElement("button", tslib.__assign({
+    // eslint-disable-next-line react/button-has-type
+    type: type,
+    id: id,
+    disabled: disabled,
     className: buttonClass(props),
+    onClick: onClick,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onMouseDown: function (e) {
+      return onMouseDown && onMouseDown(e);
+    },
     "aria-label": generateAriaLabel(props),
-    "aria-disabled": props.disabled || props.working ? true : undefined,
-    tabIndex: props.disableTabFocusAndIUnderstandTheAccessibilityImplications ? -1 : undefined
-  }, getCustomProps(props));
-  // we're using useFocusable instead of useButton because at this stage we want to hook only to focusable.
-  // Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
-  // @ts-ignore
-  var focusableProps = reactAria.useFocusable(passedInProps, ref).focusableProps;
-  return (
-    // eslint-disable-next-line react/button-has-type
-    React__default.default.createElement("button", tslib.__assign({}, passedInProps, focusableProps, {
-      "aria-describedby": props["aria-describedby"] === null ? undefined : props["aria-describedby"] || focusableProps["aria-describedby"],
-      // Unset this because the one defined in buttonProps shows
-      // focus-visible styles on click
-      onPointerDown: undefined,
-      ref: ref
-    }), renderContent(props))
-  );
+    "aria-disabled": disabled || props.working ? true : undefined,
+    form: form,
+    formAction: formAction,
+    formMethod: formMethod,
+    formEncType: formEncType,
+    formTarget: formTarget,
+    formNoValidate: formNoValidate,
+    tabIndex: disableTabFocusAndIUnderstandTheAccessibilityImplications ? -1 : undefined,
+    ref: ref
+  }, customProps), renderContent(props));
 };
 var renderLink = function (props, ref) {
-  var target = props.newTabAndIUnderstandTheAccessibilityImplications ? "_blank" : "_self";
-  var passedInProps = tslib.__assign({
-    id: props.id,
-    href: props.href,
+  var id = props.id,
+    href = props.href,
+    onClick = props.onClick,
+    newTabAndIUnderstandTheAccessibilityImplications = props.newTabAndIUnderstandTheAccessibilityImplications,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    rest = tslib.__rest(props, ["id", "href", "onClick", "newTabAndIUnderstandTheAccessibilityImplications", "onFocus", "onBlur"]);
+  var customProps = getCustomProps(rest);
+  var target = newTabAndIUnderstandTheAccessibilityImplications ? "_blank" : "_self";
+  return React__default.default.createElement("a", tslib.__assign({
+    id: id,
+    href: href,
     target: target,
     rel: target === "_blank" ? "noopener noreferrer" : undefined,
     className: buttonClass(props),
-    onClick: props.onClick,
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
+    onClick: onClick,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    ref: ref,
     "aria-label": generateAriaLabel(props)
-  }, getCustomProps(props));
-  // we're using useFocusable instead of useLink because at this stage we want to hook only to focusable.
-  // Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
-  // @ts-ignore
-  var focusableProps = reactAria.useFocusable(passedInProps, ref).focusableProps;
-  return React__default.default.createElement("a", tslib.__assign({}, passedInProps, focusableProps, {
-    "aria-describedby": props["aria-describedby"] === null ? undefined : props["aria-describedby"] || focusableProps["aria-describedby"],
-    // Unset this because the one defined in linkProps shows
-    // focus-visible styles on click
-    onPointerDown: undefined,
-    ref: ref
-  }), renderContent(props));
+  }, customProps), renderContent(props));
 };
 var buttonClass = function (props) {
   var isDefault = !props.primary && !props.destructive && !props.secondary;
-  return classnames__default.default(GenericButton_module.button, isDefault && GenericButton_module.default,
-  // @ts-ignore
-  (props.disabled || props["aria-disabled"]) && GenericButton_module.disabled, props.primary && GenericButton_module.primary, props.destructive && GenericButton_module.destructive, props.secondary && GenericButton_module.secondary, props.size && GenericButton_module[props.size], props.reversed && GenericButton_module.reversed, props.iconButton && GenericButton_module.iconButton, props.working && GenericButton_module.working, (props.directionalLink || props.paginationLink) && GenericButton_module.circleButton, props.directionalLink && GenericButton_module.directionalLink, props.paginationLink && GenericButton_module.paginationLink, props.isActive && GenericButton_module.isPaginationLinkActive, props.classNameOverride);
+  return classnames__default.default(GenericButton_module.button, isDefault && GenericButton_module.default, props.primary && GenericButton_module.primary, props.destructive && GenericButton_module.destructive, props.secondary && GenericButton_module.secondary, props.size && GenericButton_module[props.size], props.reversed && GenericButton_module.reversed, props.iconButton && GenericButton_module.iconButton, props.working && GenericButton_module.working, (props.directionalLink || props.paginationLink) && GenericButton_module.circleButton, props.directionalLink && GenericButton_module.directionalLink, props.paginationLink && GenericButton_module.paginationLink, props.isActive && GenericButton_module.isPaginationLinkActive, props.classNameOverride);
 };
 var renderLoadingSpinner = function () {
   return React__default.default.createElement("div", {

package/dist/cjs/Button/GenericButton/GenericButton.module.scss.cjs

@@ -2,9 +2,8 @@
 
 var styles = {
   "button": "GenericButton-module_button__CrXoI",
-  "disabled": "GenericButton-module_disabled__S0O3z",
-  "working": "GenericButton-module_working__mRozR",
   "reversed": "GenericButton-module_reversed__Pzsic",
+  "working": "GenericButton-module_working__mRozR",
   "content": "GenericButton-module_content__E-vUa",
   "default": "GenericButton-module_default__miX7x",
   "primary": "GenericButton-module_primary__FB-Ts",

package/dist/cjs/ButtonGroup/ButtonGroup.cjs

@@ -4,8 +4,8 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var FilterButtonBase = require('../Filter/FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.cjs');
-var Tooltip = require('../__overlays__/Tooltip/v1/Tooltip.cjs');
 var ButtonGroup_module = require('./ButtonGroup.module.scss.cjs');
+var Tooltip = require('../overlays/v1/Tooltip/Tooltip.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/EmptyState/EmptyState.cjs

@@ -54,6 +54,7 @@ var EmptyState = function (_a) {
     loop: loop,
     classNameOverride: EmptyState_module.illustration
   }) : React__default.default.createElement(IllustrationComponent, {
+    alt: illustrationType,
     classNameOverride: EmptyState_module.illustration
   })), React__default.default.createElement("div", {
     className: EmptyState_module.textSide

package/dist/cjs/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs

@@ -5,10 +5,10 @@ var React = require('react');
 var ButtonGroup = require('../../../ButtonGroup/ButtonGroup.cjs');
 require('../../../Icon/subcomponents/SVG/SVG.cjs');
 var ClearIcon = require('../../../Icon/ClearIcon.cjs');
-var Tooltip = require('../../../__overlays__/Tooltip/v1/Tooltip.cjs');
 var isRefObject = require('../../../utils/isRefObject.cjs');
 var FilterButton = require('../FilterButton/FilterButton.cjs');
 var FilterButtonBase = require('../subcomponents/FilterButtonBase/FilterButtonBase.cjs');
+var Tooltip = require('../../../overlays/v1/Tooltip/Tooltip.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/GuidanceBlock/GuidanceBlock.cjs

@@ -10,8 +10,8 @@ var Heading = require('../Heading/Heading.cjs');
 require('../Icon/subcomponents/SVG/SVG.cjs');
 var ArrowForwardIcon = require('../Icon/ArrowForwardIcon.cjs');
 var Text = require('../Text/Text.cjs');
-var Tooltip = require('../__overlays__/Tooltip/v1/Tooltip.cjs');
 var GuidanceBlock_module = require('./GuidanceBlock.module.scss.cjs');
+var Tooltip = require('../overlays/v1/Tooltip/Tooltip.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.cjs

@@ -7,8 +7,9 @@ var ClearButton = require('../../../ClearButton/ClearButton.cjs');
 require('../../../Icon/subcomponents/SVG/SVG.cjs');
 var ChevronDownIcon = require('../../../Icon/ChevronDownIcon.cjs');
 var ChevronUpIcon = require('../../../Icon/ChevronUpIcon.cjs');
-var MultiSelectToggle_module = require('./MultiSelectToggle.module.scss.cjs');
 var RemovableTag = require('../../../__future__/Tag/RemovableTag/RemovableTag.cjs');
+require('../../../__future__/Tag/Tag/Tag.cjs');
+var MultiSelectToggle_module = require('./MultiSelectToggle.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.cjs

@@ -3,8 +3,8 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Tooltip = require('../../../../__overlays__/Tooltip/v1/Tooltip.cjs');
 var ToggleIconButton_module = require('./ToggleIconButton.module.scss.cjs');
+var Tooltip = require('../../../../overlays/v1/Tooltip/Tooltip.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/Table/Table.cjs

@@ -11,8 +11,8 @@ require('../Icon/subcomponents/SVG/SVG.cjs');
 var ExclamationIcon = require('../Icon/ExclamationIcon.cjs');
 var SortAscendingIcon = require('../Icon/SortAscendingIcon.cjs');
 var SortDescendingIcon = require('../Icon/SortDescendingIcon.cjs');
-var Tooltip = require('../__overlays__/Tooltip/v1/Tooltip.cjs');
 var Table_module = require('./Table.module.scss.cjs');
+var Tooltip = require('../overlays/v1/Tooltip/Tooltip.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/Tabs/subcomponents/Tab.cjs

@@ -4,7 +4,6 @@ var tslib = require('tslib');
 var React = require('react');
 var tabs = require('@reach/tabs');
 var classnames = require('classnames');
-var reactAria = require('react-aria');
 var Badge = require('../../Badge/Badge.cjs');
 var Tab_module = require('./Tab.module.scss.cjs');
 function _interopDefault(e) {
@@ -25,7 +24,6 @@ var Tab = function (props) {
     children = props.children,
     classNameOverride = props.classNameOverride,
     restProps = tslib.__rest(props, ["isSelected", "badge", "disabled", "children", "classNameOverride"]);
-  var ref = React.useRef(null);
   var _a = React.useState(false),
     isHovered = _a[0],
     setIsHovered = _a[1];
@@ -33,32 +31,28 @@ var Tab = function (props) {
     isFocused = _b[0],
     setIsFocused = _b[1];
   var showActiveBadge = isSelected || isHovered || isFocused;
-  var tabProps = tslib.__assign({
+  var onFocus = function (event) {
+    var _a;
+    setIsFocused(true);
+    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+  };
+  var onBlur = function (event) {
+    var _a;
+    setIsFocused(false);
+    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+  };
+  return React__default.default.createElement(tabs.Tab, tslib.__assign({
     disabled: disabled,
     className: classnames__default.default(Tab_module.tab, classNameOverride, isSelected && Tab_module.selected),
-    onFocus: function (event) {
-      var _a;
-      setIsFocused(true);
-      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
-    },
-    onBlur: function (event) {
-      var _a;
-      setIsFocused(false);
-      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
-    },
+    onFocus: onFocus,
+    onBlur: onBlur,
     onMouseEnter: function () {
       return setIsHovered(true);
     },
     onMouseLeave: function () {
       return setIsHovered(false);
     }
-  }, restProps);
-  var focusableProps = reactAria.useFocusable(tabProps, ref).focusableProps;
-  // Reach is setting and managing tabIndex for us here, so we remove it from the focusableProps (also it needs to be non-defined, undefined is not enough)
-  delete focusableProps.tabIndex;
-  return React__default.default.createElement(tabs.Tab, tslib.__assign({
-    ref: ref
-  }, tabProps, focusableProps), children, badge && React__default.default.createElement("span", {
+  }, restProps), children, badge && React__default.default.createElement("span", {
     className: Tab_module.badge
   }, React__default.default.createElement(Badge.Badge, {
     variant: showActiveBadge ? "active" : "default"

package/dist/cjs/index.cjs

@@ -412,7 +412,6 @@ var useMediaQueries = require('./utils/useMediaQueries.cjs');
 var VisuallyHidden = require('./VisuallyHidden/VisuallyHidden.cjs');
 var Well = require('./Well/Well.cjs');
 var Workflow = require('./Workflow/Workflow.cjs');
-var Tooltip = require('./__overlays__/Tooltip/v1/Tooltip.cjs');
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -1045,4 +1044,3 @@ exports.useMediaQueries = useMediaQueries.useMediaQueries;
 exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;
 exports.Well = Well.Well;
 exports.Workflow = Workflow.Workflow;
-exports.Tooltip = Tooltip.Tooltip;

package/dist/cjs/overlays/v1/Tooltip/Tooltip.module.scss.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var styles = {
+  "tooltip": "Tooltip-module_tooltip__dWMnX",
+  "tooltipContent": "Tooltip-module_tooltipContent__aWWPG",
+  "default": "Tooltip-module_default__raEw-",
+  "informative": "Tooltip-module_informative__rjCBk",
+  "positive": "Tooltip-module_positive__ZAlyv",
+  "cautionary": "Tooltip-module_cautionary__tDf6m",
+  "highlight": "Tooltip-module_highlight__cQ7KM",
+  "arrow": "Tooltip-module_arrow__ZT2HV",
+  "arrowInner": "Tooltip-module_arrowInner__FBbNX",
+  "arrowMain": "Tooltip-module_arrowMain__Ri91S",
+  "arrowShadow": "Tooltip-module_arrowShadow__uTRkV",
+  "displayInline": "Tooltip-module_displayInline__J3GSi",
+  "displayBlock": "Tooltip-module_displayBlock__hfsKH",
+  "displayInlineBlock": "Tooltip-module_displayInlineBlock__JUuux",
+  "displayFlex": "Tooltip-module_displayFlex__RNTVr",
+  "displayInlineFlex": "Tooltip-module_displayInlineFlex__10cts"
+};
+module.exports = styles;

package/dist/cjs/overlays/v2/Tooltip/Tooltip.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Tooltip = function (_a) {
+  var children = _a.children;
+  return React__default.default.createElement("div", null, children);
+};
+Tooltip.displayName = "Tooltip";
+exports.Tooltip = Tooltip;

package/dist/cjs/overlaysV1.cjs

@@ -1,4 +1,4 @@
 'use strict';
 
-var Tooltip = require('./__overlays__/Tooltip/v1/Tooltip.cjs');
+var Tooltip = require('./overlays/v1/Tooltip/Tooltip.cjs');
 exports.Tooltip = Tooltip.Tooltip;

package/dist/cjs/overlaysV2.cjs

@@ -1,4 +1,4 @@
 'use strict';
 
-var Tooltip = require('./__overlays__/Tooltip/v1/Tooltip.cjs');
+var Tooltip = require('./overlays/v2/Tooltip/Tooltip.cjs');
 exports.Tooltip = Tooltip.Tooltip;