@kaizen/components 2.4.0 → 3.0.0

package/dist/esm/src/Select/Select.mjs

@@ -1,14 +1,24 @@
 import { __rest, __assign } from 'tslib';
 import React, { useId, useState } from 'react';
 import classnames from 'classnames';
+import { useButton } from 'react-aria';
 import ReactSelect, { components } from 'react-select';
 import Async from 'react-select/async';
+import { ClearButton } from '../ClearButton/ClearButton.mjs';
 import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
 import { Icon } from '../Icon/Icon.mjs';
 import { Label } from '../Label/Label.mjs';
 import { Tag } from '../Tag/Tag.mjs';
 import styles from './Select.module.scss.mjs';
 
+// react-select defaults to showing "Select..." placeholder text, which goes against our a11y
+// standards — use `label` for the field name and `description` for help text instead.
+// `noPlaceholderText` overrides the default string; `NullPlaceholder` removes the empty DOM node
+// that react-select still renders even when the text is empty.
+var noPlaceholderText = '';
+var NullPlaceholder = function () {
+  return null;
+};
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
@@ -26,8 +36,7 @@ const Select = /*#__PURE__*/function () {
       description = _a.description,
       propsFullWidth = _a.fullWidth,
       propsClassName = _a.className,
-      placeholder = _a.placeholder,
-      props = __rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className", "placeholder"]);
+      props = __rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className"]);
     var reactId = useId();
     // the default for fullWidth depends on the variant
     var fullWidth = propsFullWidth !== null && propsFullWidth !== void 0 ? propsFullWidth : !['secondary', 'secondary-small'].includes(variant);
@@ -39,10 +48,10 @@ const Select = /*#__PURE__*/function () {
     }, label)) : null, /*#__PURE__*/React.createElement(ReactSelect, __assign({}, props, {
       ref: ref,
       "aria-labelledby": labelId,
-      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : '',
+      placeholder: noPlaceholderText,
       components: {
         Control: Control,
-        Placeholder: Placeholder,
+        Placeholder: NullPlaceholder,
         DropdownIndicator: DropdownIndicator,
         Menu: Menu,
         GroupHeading: GroupHeading,
@@ -70,14 +79,13 @@ const Select = /*#__PURE__*/function () {
 const AsyncSelect = /*#__PURE__*/function () {
   const AsyncSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     var propsClassName = _a.className,
-      placeholder = _a.placeholder,
-      props = __rest(_a, ["className", "placeholder"]);
+      props = __rest(_a, ["className"]);
     return /*#__PURE__*/React.createElement(Async, __assign({}, props, {
       ref: ref,
-      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : '',
+      placeholder: noPlaceholderText,
       components: {
         Control: Control,
-        Placeholder: Placeholder,
+        Placeholder: NullPlaceholder,
         DropdownIndicator: DropdownIndicator,
         Menu: Menu,
         Option: Option,
@@ -87,7 +95,7 @@ const AsyncSelect = /*#__PURE__*/function () {
         MultiValue: MultiValue,
         IndicatorsContainer: IndicatorsContainer,
         ValueContainer: ValueContainer,
-        ClearIndicator: undefined,
+        ClearIndicator: ClearIndicator,
         IndicatorSeparator: null,
         LoadingMessage: LoadingMessage
       },
@@ -104,13 +112,6 @@ var Control = function (props) {
     className: classnames(styles.control, props.isFocused && styles.focusedControl, props.isDisabled && styles.disabled)
   })));
 };
-var Placeholder = function (props) {
-  return /*#__PURE__*/React.createElement(components.Placeholder, __assign({}, props, {
-    className: styles.placeholderOverrides
-  }), /*#__PURE__*/React.createElement("span", {
-    className: styles.placeholder
-  }, props.children));
-};
 var DropdownIndicator = function (props) {
   return /*#__PURE__*/React.createElement(components.DropdownIndicator, __assign({}, props, {
     className: styles.dropdownIndicator
@@ -179,12 +180,12 @@ var ValueContainer = function (props) {
   }));
 };
 var ClearIndicator = function (props) {
-  return /*#__PURE__*/React.createElement(components.ClearIndicator, __assign({}, props, {
-    className: styles.clearIndicator
-  }), /*#__PURE__*/React.createElement(Icon, {
-    name: "cancel",
-    isPresentational: true,
-    isFilled: true
+  var buttonRef = React.useRef(null);
+  var buttonProps = useButton(__assign(__assign({}, props), {
+    onClick: props.clearValue
+  }), buttonRef).buttonProps;
+  return /*#__PURE__*/React.createElement(ClearButton, __assign({}, buttonProps, {
+    classNameOverride: styles.clearIndicator
   }));
 };
 export { AsyncSelect, Select };

package/dist/esm/src/Select/Select.module.scss.mjs

@@ -11,7 +11,6 @@ var styles = {
   "valueContainer": "Select-module_valueContainer__MGkpr",
   "indicatorsContainer": "Select-module_indicatorsContainer__2xCsm",
   "loadingMessage": "Select-module_loadingMessage__4Ej9T",
-  "placeholder": "Select-module_placeholder__OAeGA",
   "menu": "Select-module_menu__axmUL",
   "groupHeading": "Select-module_groupHeading__eNw6U",
   "option": "Select-module_option__EdP-F",

package/dist/esm/src/SingleSelect/SingleSelect.mjs

@@ -8,7 +8,7 @@ import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
 import { Popover } from '../MultiSelect/subcomponents/Popover/Popover.mjs';
 import { useFloating } from '@floating-ui/react-dom';
 import { SelectProvider } from './context/SelectContext.mjs';
-import { ListBox } from './subcomponents/ListBox/ListBox.mjs';
+import './subcomponents/ListBox/ListBox.mjs';
 import { ListBoxSection } from './subcomponents/ListBoxSection/ListBoxSection.mjs';
 import { ListItem } from './subcomponents/ListItem/ListItem.mjs';
 import './subcomponents/ListItems/ListItems.mjs';
@@ -42,12 +42,10 @@ const SingleSelect = /*#__PURE__*/function () {
       classNameOverride = _a.classNameOverride,
       selectedKey = _a.selectedKey,
       description = _a.description,
-      _d = _a.placeholder,
-      placeholder = _d === void 0 ? '' : _d,
       isDisabled = _a.isDisabled,
       onSelectionChange = _a.onSelectionChange,
       portalContainerId = _a.portalContainerId,
-      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "onSelectionChange", "portalContainerId"]);
+      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "classNameOverride", "selectedKey", "description", "isDisabled", "onSelectionChange", "portalContainerId"]);
     var refs = useFloating().refs;
     var triggerRef = refs.reference;
     var fallbackId = useId();
@@ -63,7 +61,6 @@ const SingleSelect = /*#__PURE__*/function () {
       disabledKeys: disabledKeys,
       selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
       description: description,
-      placeholder: placeholder,
       isDisabled: isDisabled,
       isRequired: isRequired,
       onSelectionChange: onSelectionChange ? function (key) {
@@ -71,13 +68,13 @@ const SingleSelect = /*#__PURE__*/function () {
       } : undefined
     }, restProps);
     var state = useSelectState(ariaSelectProps);
-    var _e = useSelect(ariaSelectProps, state, triggerRef),
-      labelProps = _e.labelProps,
-      reactAriaTriggerProps = _e.triggerProps,
-      valueProps = _e.valueProps,
-      menuProps = _e.menuProps,
-      errorMessageProps = _e.errorMessageProps,
-      descriptionProps = _e.descriptionProps;
+    var _d = useSelect(ariaSelectProps, state, triggerRef),
+      labelProps = _d.labelProps,
+      reactAriaTriggerProps = _d.triggerProps,
+      valueProps = _d.valueProps,
+      menuProps = _d.menuProps,
+      errorMessageProps = _d.errorMessageProps,
+      descriptionProps = _d.descriptionProps;
     // Hack incoming:
     // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
     // We use role=combobox, meaning screen readers will read the value.
@@ -94,7 +91,6 @@ const SingleSelect = /*#__PURE__*/function () {
       'value': (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered,
       valueProps: valueProps,
       'isOpen': state.isOpen,
-      placeholder: placeholder,
       status: status,
       'isDisabled': triggerProps.isDisabled,
       isReversed: isReversed,
@@ -102,9 +98,9 @@ const SingleSelect = /*#__PURE__*/function () {
       'aria-describedby': classnames(validationMessage && validationId, description && descriptionId),
       'aria-required': isRequired
     });
-    var _f = useState(),
-      portalContainer = _f[0],
-      setPortalContainer = _f[1];
+    var _e = useState(),
+      portalContainer = _e[0],
+      setPortalContainer = _e[1];
     useEffect(function () {
       if (portalContainerId) {
         var portalElement = document.getElementById(portalContainerId);
@@ -145,9 +141,6 @@ const SingleSelect = /*#__PURE__*/function () {
   SingleSelect.SectionDivider = SectionDivider;
   SingleSelect.Option = Option;
   SingleSelect.ItemDefaultRender = ListItem;
-  // @deprecated Legacy exported aliases
-  SingleSelect.TriggerButton = SelectToggle;
-  SingleSelect.ListBox = ListBox;
   return SingleSelect;
 }();
 export { SingleSelect };

package/dist/esm/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.mjs

@@ -11,13 +11,11 @@ const SelectToggle = /*#__PURE__*/function () {
       value = _a.value,
       valueProps = _a.valueProps,
       isOpen = _a.isOpen,
-      _b = _a.placeholder,
-      placeholder = _b === void 0 ? 'Select' : _b,
       status = _a.status,
       isDisabled = _a.isDisabled,
       isReversed = _a.isReversed,
       classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["label", "labelProps", "value", "valueProps", "isOpen", "placeholder", "status", "isDisabled", "isReversed", "classNameOverride"]);
+      restProps = __rest(_a, ["label", "labelProps", "value", "valueProps", "isOpen", "status", "isDisabled", "isReversed", "classNameOverride"]);
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, __assign({}, labelProps, {
       reversed: isReversed,
       disabled: isDisabled
@@ -28,10 +26,10 @@ const SelectToggle = /*#__PURE__*/function () {
       role: "combobox"
     }, restProps, {
       ref: ref,
-      className: classnames(styles.selectToggle, (value === null || value === undefined) && styles.placeholder, status === 'error' && styles.error, status === 'caution' && styles.caution, isDisabled && styles.disabled, isReversed && styles.reversed, classNameOverride)
+      className: classnames(styles.selectToggle, status === 'error' && styles.error, status === 'caution' && styles.caution, isDisabled && styles.disabled, isReversed && styles.reversed, classNameOverride)
     }), /*#__PURE__*/React.createElement("span", __assign({}, valueProps, {
       className: styles.value
-    }), value !== null && value !== void 0 ? value : placeholder), /*#__PURE__*/React.createElement(Icon, {
+    }), value), /*#__PURE__*/React.createElement(Icon, {
       name: isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
       isPresentational: true,
       className: styles.icon

package/dist/esm/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.module.scss.mjs

@@ -1,7 +1,6 @@
 var styles = {
   "icon": "SelectToggle-module_icon__rsV9A",
   "selectToggle": "SelectToggle-module_selectToggle__e6slL",
-  "placeholder": "SelectToggle-module_placeholder__w7o7S",
   "error": "SelectToggle-module_error__npEgr",
   "caution": "SelectToggle-module_caution__9jSK0",
   "disabled": "SelectToggle-module_disabled__2MKmF",

package/dist/esm/src/Text/Text.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import { createElement } from 'react';
 import classnames from 'classnames';
-import styles from './Text.module.scss.mjs';
+import styles from './Text.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3074885298/Typography#Paragraph Guidance}

package/dist/esm/src/Text/Text.module.css.mjs

@@ -0,0 +1,14 @@
+var styles = {
+  "text": "Text-module_text__3xRq3",
+  "intro-lede": "Text-module_intro-lede__Pf95y",
+  "body": "Text-module_body__o-QuI",
+  "small": "Text-module_small__d6k-f",
+  "extra-small": "Text-module_extra-small__jP3Xx",
+  "dark": "Text-module_dark__ApVTx",
+  "dark-reduced-opacity": "Text-module_dark-reduced-opacity__-ef8o",
+  "white": "Text-module_white__Vj0Na",
+  "white-reduced-opacity": "Text-module_white-reduced-opacity__kYl0h",
+  "positive": "Text-module_positive__ngZQ5",
+  "negative": "Text-module_negative__729Es"
+};
+export { styles as default };

package/dist/esm/src/TimeField/TimeField.mjs

@@ -55,8 +55,7 @@ const TimeFieldComponent = /*#__PURE__*/function () {
       onChange: handleOnChange,
       isDisabled: isDisabled,
       hideTimeZone: true,
-      locale: locale,
-      validationState: status === 'default' ? 'valid' : 'invalid'
+      locale: locale
     }));
     var hasError = !!validationMessage && status === 'error';
     var descriptionId = hasError ? "".concat(id, "-field-message") : undefined;
@@ -79,7 +78,7 @@ const TimeFieldComponent = /*#__PURE__*/function () {
     }, /*#__PURE__*/React.createElement("div", __assign({}, fieldProps, {
       id: id,
       ref: inputRef,
-      className: classnames(styles.input, state.isDisabled && styles.isDisabled, state.validationState === 'invalid' && styles.error)
+      className: classnames(styles.input, state.isDisabled && styles.isDisabled, status === 'error' && styles.error)
     }), state.segments.map(function (segment, i) {
       return /*#__PURE__*/React.createElement(TimeSegment, {
         key: i,

package/dist/esm/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.mjs

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
 import { Icon } from '../../Icon/Icon.mjs';
-import styles from './ToggleSwitch.module.scss.mjs';
+import styles from './ToggleSwitch.module.css.mjs';
 const ToggleSwitch = /*#__PURE__*/function () {
   const ToggleSwitch = function (_a) {
     var toggledStatus = _a.toggledStatus,

package/dist/esm/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.css.mjs

@@ -0,0 +1,11 @@
+var styles = {
+  "checkbox": "ToggleSwitch-module_checkbox__NmNyg",
+  "track": "ToggleSwitch-module_track__Zvo6N",
+  "disabled": "ToggleSwitch-module_disabled__qntEm",
+  "thumb": "ToggleSwitch-module_thumb__YIdcS",
+  "checkIcon": "ToggleSwitch-module_checkIcon__J4eSM",
+  "on": "ToggleSwitch-module_on__-OJbU",
+  "off": "ToggleSwitch-module_off__e-dto",
+  "reversed": "ToggleSwitch-module_reversed__5Jz8i"
+};
+export { styles as default };

package/dist/esm/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.mjs

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { FieldGroup } from '../../FieldGroup/FieldGroup.mjs';
 import { Label } from '../../Label/Label.mjs';
 import { ToggleSwitch } from '../ToggleSwitch/ToggleSwitch.mjs';
-import styles from './ToggleSwitchField.module.scss.mjs';
+import styles from './ToggleSwitchField.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075638160/Toggle+Switch Guidance} |

package/dist/esm/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.css.mjs

@@ -0,0 +1,7 @@
+var styles = {
+  "container": "ToggleSwitchField-module_container__6c4oG",
+  "fullWidth": "ToggleSwitchField-module_fullWidth__iGJSg",
+  "inner": "ToggleSwitchField-module_inner__k1hyg",
+  "on": "ToggleSwitchField-module_on__8RJfp"
+};
+export { styles as default };

package/dist/esm/src/Tooltip/OverlayArrow.mjs

@@ -4,7 +4,7 @@ import { OverlayArrow as OverlayArrow$1 } from 'react-aria-components';
 import 'use-debounce';
 import { useReversedColors } from '../utils/ReversedColors/ReversedColors.mjs';
 import { mergeClassNames } from '../utils/mergeClassNames.mjs';
-import styles from './OverlayArrow.module.scss.mjs';
+import styles from './OverlayArrow.module.css.mjs';
 
 /**
  * An OverlayArrow renders a custom arrow element relative to an overlay element

package/dist/esm/src/Tooltip/OverlayArrow.module.css.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "overlayArrow": "OverlayArrow-module_overlayArrow__65sMU",
+  "reversed": "OverlayArrow-module_reversed__ChGpb"
+};
+export { styles as default };

package/dist/esm/src/Tooltip/Tooltip.mjs

@@ -7,7 +7,7 @@ import 'use-debounce';
 import { useReversedColors } from '../utils/ReversedColors/ReversedColors.mjs';
 import { mergeClassNames } from '../utils/mergeClassNames.mjs';
 import { OverlayArrow } from './OverlayArrow.mjs';
-import styles from './Tooltip.module.scss.mjs';
+import styles from './Tooltip.module.css.mjs';
 
 /**
  * A tooltip displays a description of an element on hover or focus.

package/dist/esm/src/Tooltip/Tooltip.module.css.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "tooltip": "Tooltip-module_tooltip__Q1YfF",
+  "reversed": "Tooltip-module_reversed__IIGeJ"
+};
+export { styles as default };