@kaizen/components 1.64.13 → 1.65.0

package/dist/cjs/Filter/FilterSelect/FilterSelect.cjs

@@ -57,6 +57,8 @@ var FilterSelect = function (_a) {
     triggerProps = _c.triggerProps,
     menuProps = _c.menuProps;
   var buttonProps = button.useButton(triggerProps, triggerRef).buttonProps;
+  // `aria-labelledby` and `aria-controls` are being remapped because the `buttonProps` ids generated by React Aria point to nothing.
+  // This should ideally be refactored but for now the `aria-controls` is set to the Filter's Listbox (menuProps.id) and the `aria-labelledby` to undefined so the accessible name is derived from the buttons content.
   var renderTriggerButtonProps = tslib.__assign(tslib.__assign({}, buttonProps), {
     "aria-labelledby": undefined,
     "aria-controls": menuProps.id

package/dist/cjs/__future__/Select/subcomponents/ListBox/ListBox.cjs

@@ -4,6 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var listbox = require('@react-aria/listbox');
 var classnames = require('classnames');
+var useIsClientReady = require('../../../../__utilities__/useIsClientReady/useIsClientReady.cjs');
 var SelectContext = require('../../context/SelectContext.cjs');
 var ListBox_module = require('./ListBox.module.scss.cjs');
 function _interopDefault(e) {
@@ -13,16 +14,59 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/** A util to retrieve the key of the correct focusable items based of the focus strategy
+ * This is used to determine which element from the collection to focus to on open base on the keyboard event
+ * ie: UpArrow will set the focusStrategy to "last"
+ */
+var getOptionKeyFromCollection = function (state) {
+  if (state.selectedItem) {
+    return state.selectedItem.key;
+  } else if (state.focusStrategy === "last") {
+    return state.collection.getLastKey();
+  }
+  return state.collection.getFirstKey();
+};
+/** This makes the use of query selector less brittle in instances where a failed selector is passed in
+ */
+var safeQuerySelector = function (selector) {
+  try {
+    return document.querySelector(selector);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error("Kaizen querySelector failed:", error);
+    return null;
+  }
+};
 var ListBox = function (_a) {
   var children = _a.children,
     menuProps = _a.menuProps,
     classNameOverride = _a.classNameOverride,
     restProps = tslib.__rest(_a, ["children", "menuProps", "classNameOverride"]);
+  var isClientReady = useIsClientReady.useIsClientReady();
   var state = SelectContext.useSelectContext().state;
-  var ref = React__default.default.useRef(null);
+  var ref = React.useRef(null);
   var listBoxProps = listbox.useListBox(tslib.__assign(tslib.__assign({}, menuProps), {
-    disallowEmptySelection: true
+    disallowEmptySelection: true,
+    // This is to ensure that the listbox doesn't use React Aria's auto focus feature for Listbox, which creates a visual bug
+    autoFocus: false
   }), state, ref).listBoxProps;
+  /**
+   * This uses the new useIsClientReady to ensure document exists before trying to querySelector and give the time to focus to the correct element
+   */
+  React.useEffect(function () {
+    var _a;
+    if (isClientReady) {
+      var optionKey = getOptionKeyFromCollection(state);
+      var focusToElement = safeQuerySelector("[data-key='".concat(optionKey, "']"));
+      if (focusToElement) {
+        focusToElement.focus();
+      } else {
+        // If an element is not found, focus on the listbox. This ensures the list can still be navigated to via keyboard if the keys do not align to the data attributes of the list items.
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+    }
+  }, [isClientReady]);
   return React__default.default.createElement("ul", tslib.__assign({
     ref: ref,
     className: classnames__default.default(ListBox_module.listBox, classNameOverride)

package/dist/cjs/__future__/Select/subcomponents/Overlay/Overlay.cjs

@@ -32,7 +32,7 @@ var Overlay = function (_a) {
     ref: overlayRef,
     className: classNameOverride
   }, overlayProps, restProps), React__default.default.createElement(focus.FocusScope, {
-    autoFocus: true,
+    autoFocus: false,
     restoreFocus: true
   }, React__default.default.createElement(overlays.DismissButton, {
     onDismiss: state.close

package/dist/cjs/__future__/Tabs/Tabs.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tabs--controlled Storybook}
+ *
+ * Wrapper around all of the tab subcomponents
+ * Holds a TabList and TabPanels
+ */
+var Tabs = function (props) {
+  return React__default.default.createElement(reactAriaComponents.Tabs, tslib.__assign({}, props));
+};
+exports.Tabs = Tabs;

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

@@ -0,0 +1,39 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var reactAriaComponents = require('react-aria-components');
+var Badge = require('../../../../Badge/Badge.cjs');
+var Tab_module = require('./Tab.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * A tab button
+ */
+var Tab = function (props) {
+  var badge = props.badge,
+    children = props.children,
+    className = props.className,
+    restProps = tslib.__rest(props, ["badge", "children", "className"]);
+  var tabProps = tslib.__assign({
+    className: classnames__default.default(Tab_module.tab, className)
+  }, restProps);
+  return React__default.default.createElement(reactAriaComponents.Tab, tslib.__assign({}, tabProps), function (_a) {
+    var isSelected = _a.isSelected,
+      isFocusVisible = _a.isFocusVisible,
+      isHovered = _a.isHovered;
+    return React__default.default.createElement(React__default.default.Fragment, null, children, badge && React__default.default.createElement("span", {
+      className: Tab_module.badge
+    }, React__default.default.createElement(Badge.Badge, {
+      variant: isSelected || isFocusVisible || isHovered ? "active" : "default"
+    }, badge)));
+  });
+};
+exports.Tab = Tab;

package/dist/cjs/__future__/Tabs/subcomponents/Tab/Tab.module.css.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "tab": "Tab-module_tab__-XtyL",
+  "badge": "Tab-module_badge__Zfili"
+};
+module.exports = styles;

package/dist/cjs/__future__/Tabs/subcomponents/TabList/TabList.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var reactAriaComponents = require('react-aria-components');
+var TabList_module = require('./TabList.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * Wrapper for the tabs themselves
+ */
+var TabList = function (props) {
+  var ariaLabel = props["aria-label"],
+    _a = props.noPadding,
+    noPadding = _a === void 0 ? false : _a,
+    children = props.children,
+    className = props.className,
+    restProps = tslib.__rest(props, ["aria-label", "noPadding", "children", "className"]);
+  return React__default.default.createElement(reactAriaComponents.TabList, tslib.__assign({
+    "aria-label": ariaLabel,
+    className: classnames__default.default(TabList_module.tabList, className, noPadding && TabList_module.noPadding)
+  }, restProps), children);
+};
+exports.TabList = TabList;

package/dist/cjs/__future__/Tabs/subcomponents/TabList/TabList.module.css.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "tabList": "TabList-module_tabList__e1qAi",
+  "noPadding": "TabList-module_noPadding__YM23K"
+};
+module.exports = styles;

package/dist/cjs/__future__/Tabs/subcomponents/TabPanel/TabPanel.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * Wrapper for the content that shows when tab is active
+ */
+var TabPanel = function (props) {
+  var className = props.className,
+    children = props.children,
+    restProps = tslib.__rest(props, ["className", "children"]);
+  return React__default.default.createElement(reactAriaComponents.TabPanel, tslib.__assign({
+    className: className
+  }, restProps), children);
+};
+exports.TabPanel = TabPanel;

package/dist/cjs/__utilities__/useIsClientReady/useIsClientReady.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * A hook that returns a truthy value indicating if the code can be run on client side.
+ * This is a useful hook for determining if the `document` or `window` objects are available.
+ */
+var useIsClientReady = function () {
+  var _a = React.useState(false),
+    isClientReady = _a[0],
+    setIsClientReady = _a[1];
+  React.useEffect(function () {
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      setIsClientReady(true);
+    }
+  }, []);
+  return isClientReady;
+};
+exports.useIsClientReady = useIsClientReady;

package/dist/cjs/future.cjs

@@ -3,6 +3,14 @@
 var Select = require('./__future__/Select/Select.cjs');
 var RemovableTag = require('./__future__/Tag/RemovableTag/RemovableTag.cjs');
 var Tag = require('./__future__/Tag/Tag/Tag.cjs');
+var Tabs = require('./__future__/Tabs/Tabs.cjs');
+var Tab = require('./__future__/Tabs/subcomponents/Tab/Tab.cjs');
+var TabList = require('./__future__/Tabs/subcomponents/TabList/TabList.cjs');
+var TabPanel = require('./__future__/Tabs/subcomponents/TabPanel/TabPanel.cjs');
 exports.Select = Select.Select;
 exports.RemovableTag = RemovableTag.RemovableTag;
 exports.Tag = Tag.Tag;
+exports.Tabs = Tabs.Tabs;
+exports.Tab = Tab.Tab;
+exports.TabList = TabList.TabList;
+exports.TabPanel = TabPanel.TabPanel;

package/dist/esm/Filter/FilterSelect/FilterSelect.mjs

@@ -50,6 +50,8 @@ const FilterSelect = /*#__PURE__*/function () {
       triggerProps = _c.triggerProps,
       menuProps = _c.menuProps;
     var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
+    // `aria-labelledby` and `aria-controls` are being remapped because the `buttonProps` ids generated by React Aria point to nothing.
+    // This should ideally be refactored but for now the `aria-controls` is set to the Filter's Listbox (menuProps.id) and the `aria-labelledby` to undefined so the accessible name is derived from the buttons content.
     var renderTriggerButtonProps = __assign(__assign({}, buttonProps), {
       "aria-labelledby": undefined,
       "aria-controls": menuProps.id

package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.mjs

@@ -1,20 +1,64 @@
 import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { useListBox } from '@react-aria/listbox';
 import classnames from 'classnames';
+import { useIsClientReady } from '../../../../__utilities__/useIsClientReady/useIsClientReady.mjs';
 import { useSelectContext } from '../../context/SelectContext.mjs';
 import styles from './ListBox.module.scss.mjs';
+
+/** A util to retrieve the key of the correct focusable items based of the focus strategy
+ * This is used to determine which element from the collection to focus to on open base on the keyboard event
+ * ie: UpArrow will set the focusStrategy to "last"
+ */
+var getOptionKeyFromCollection = function (state) {
+  if (state.selectedItem) {
+    return state.selectedItem.key;
+  } else if (state.focusStrategy === "last") {
+    return state.collection.getLastKey();
+  }
+  return state.collection.getFirstKey();
+};
+/** This makes the use of query selector less brittle in instances where a failed selector is passed in
+ */
+var safeQuerySelector = function (selector) {
+  try {
+    return document.querySelector(selector);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error("Kaizen querySelector failed:", error);
+    return null;
+  }
+};
 const ListBox = /*#__PURE__*/function () {
   const ListBox = function (_a) {
     var children = _a.children,
       menuProps = _a.menuProps,
       classNameOverride = _a.classNameOverride,
       restProps = __rest(_a, ["children", "menuProps", "classNameOverride"]);
+    var isClientReady = useIsClientReady();
     var state = useSelectContext().state;
-    var ref = React.useRef(null);
+    var ref = useRef(null);
     var listBoxProps = useListBox(__assign(__assign({}, menuProps), {
-      disallowEmptySelection: true
+      disallowEmptySelection: true,
+      // This is to ensure that the listbox doesn't use React Aria's auto focus feature for Listbox, which creates a visual bug
+      autoFocus: false
     }), state, ref).listBoxProps;
+    /**
+     * This uses the new useIsClientReady to ensure document exists before trying to querySelector and give the time to focus to the correct element
+     */
+    useEffect(function () {
+      var _a;
+      if (isClientReady) {
+        var optionKey = getOptionKeyFromCollection(state);
+        var focusToElement = safeQuerySelector("[data-key='".concat(optionKey, "']"));
+        if (focusToElement) {
+          focusToElement.focus();
+        } else {
+          // If an element is not found, focus on the listbox. This ensures the list can still be navigated to via keyboard if the keys do not align to the data attributes of the list items.
+          (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+      }
+    }, [isClientReady]);
     return /*#__PURE__*/React.createElement("ul", __assign({
       ref: ref,
       className: classnames(styles.listBox, classNameOverride)

package/dist/esm/__future__/Select/subcomponents/Overlay/Overlay.mjs

@@ -25,7 +25,7 @@ const Overlay = /*#__PURE__*/function () {
       ref: overlayRef,
       className: classNameOverride
     }, overlayProps, restProps), /*#__PURE__*/React.createElement(FocusScope, {
-      autoFocus: true,
+      autoFocus: false,
       restoreFocus: true
     }, /*#__PURE__*/React.createElement(DismissButton, {
       onDismiss: state.close

package/dist/esm/__future__/Tabs/Tabs.mjs

@@ -0,0 +1,15 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { Tabs as Tabs$1 } from 'react-aria-components';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tabs--controlled Storybook}
+ *
+ * Wrapper around all of the tab subcomponents
+ * Holds a TabList and TabPanels
+ */
+var Tabs = function (props) {
+  return /*#__PURE__*/React.createElement(Tabs$1, __assign({}, props));
+};
+export { Tabs };

package/dist/esm/__future__/Tabs/subcomponents/Tab/Tab.mjs

@@ -0,0 +1,30 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Tab as Tab$1 } from 'react-aria-components';
+import { Badge } from '../../../../Badge/Badge.mjs';
+import styles from './Tab.module.css.mjs';
+
+/**
+ * A tab button
+ */
+var Tab = function (props) {
+  var badge = props.badge,
+    children = props.children,
+    className = props.className,
+    restProps = __rest(props, ["badge", "children", "className"]);
+  var tabProps = __assign({
+    className: classnames(styles.tab, className)
+  }, restProps);
+  return /*#__PURE__*/React.createElement(Tab$1, __assign({}, tabProps), function (_a) {
+    var isSelected = _a.isSelected,
+      isFocusVisible = _a.isFocusVisible,
+      isHovered = _a.isHovered;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children, badge && ( /*#__PURE__*/React.createElement("span", {
+      className: styles.badge
+    }, /*#__PURE__*/React.createElement(Badge, {
+      variant: isSelected || isFocusVisible || isHovered ? "active" : "default"
+    }, badge))));
+  });
+};
+export { Tab };

package/dist/esm/__future__/Tabs/subcomponents/Tab/Tab.module.css.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "tab": "Tab-module_tab__-XtyL",
+  "badge": "Tab-module_badge__Zfili"
+};
+export { styles as default };

package/dist/esm/__future__/Tabs/subcomponents/TabList/TabList.mjs

@@ -0,0 +1,22 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { TabList as TabList$1 } from 'react-aria-components';
+import styles from './TabList.module.css.mjs';
+
+/**
+ * Wrapper for the tabs themselves
+ */
+var TabList = function (props) {
+  var ariaLabel = props["aria-label"],
+    _a = props.noPadding,
+    noPadding = _a === void 0 ? false : _a,
+    children = props.children,
+    className = props.className,
+    restProps = __rest(props, ["aria-label", "noPadding", "children", "className"]);
+  return /*#__PURE__*/React.createElement(TabList$1, __assign({
+    "aria-label": ariaLabel,
+    className: classnames(styles.tabList, className, noPadding && styles.noPadding)
+  }, restProps), children);
+};
+export { TabList };

package/dist/esm/__future__/Tabs/subcomponents/TabList/TabList.module.css.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "tabList": "TabList-module_tabList__e1qAi",
+  "noPadding": "TabList-module_noPadding__YM23K"
+};
+export { styles as default };

package/dist/esm/__future__/Tabs/subcomponents/TabPanel/TabPanel.mjs

@@ -0,0 +1,16 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { TabPanel as TabPanel$1 } from 'react-aria-components';
+
+/**
+ * Wrapper for the content that shows when tab is active
+ */
+var TabPanel = function (props) {
+  var className = props.className,
+    children = props.children,
+    restProps = __rest(props, ["className", "children"]);
+  return /*#__PURE__*/React.createElement(TabPanel$1, __assign({
+    className: className
+  }, restProps), children);
+};
+export { TabPanel };

package/dist/esm/__utilities__/useIsClientReady/useIsClientReady.mjs

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * A hook that returns a truthy value indicating if the code can be run on client side.
+ * This is a useful hook for determining if the `document` or `window` objects are available.
+ */
+var useIsClientReady = function () {
+  var _a = useState(false),
+    isClientReady = _a[0],
+    setIsClientReady = _a[1];
+  useEffect(function () {
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      setIsClientReady(true);
+    }
+  }, []);
+  return isClientReady;
+};
+export { useIsClientReady };

package/dist/esm/future.mjs

@@ -1,3 +1,7 @@
 export { Select } from './__future__/Select/Select.mjs';
 export { RemovableTag } from './__future__/Tag/RemovableTag/RemovableTag.mjs';
 export { Tag } from './__future__/Tag/Tag/Tag.mjs';
+export { Tabs } from './__future__/Tabs/Tabs.mjs';
+export { Tab } from './__future__/Tabs/subcomponents/Tab/Tab.mjs';
+export { TabList } from './__future__/Tabs/subcomponents/TabList/TabList.mjs';
+export { TabPanel } from './__future__/Tabs/subcomponents/TabPanel/TabPanel.mjs';