@kaizen/components 1.78.1 → 1.79.1

package/src/__next__/Menu/Menu.module.css

@@ -1,32 +1,34 @@
-.menu {
-  background-color: var(--color-white);
-  color: var(--color-purple-800);
-  width: 248px;
-  max-height: 22rem;
-  overflow: auto;
-  padding-block: var(--spacing-6);
-  outline: none;
-  border-radius: var(--border-solid-border-radius);
-  box-shadow: var(--shadow-large-box-shadow);
-}
+@layer kz-components {
+  .menu {
+    background-color: var(--color-white);
+    color: var(--color-purple-800);
+    width: 248px;
+    max-height: 22rem;
+    overflow: auto;
+    padding-block: var(--spacing-6);
+    outline: none;
+    border-radius: var(--border-solid-border-radius);
+    box-shadow: var(--shadow-large-box-shadow);
+  }
 
-.menu :global(.react-aria-Header) {
-  font-family: var(--typography-heading-6-font-family);
-  font-size: var(--typography-heading-6-font-size);
-  letter-spacing: var(--typography-heading-6-letter-spacing);
-  font-weight: var(--typography-heading-6-font-weight);
-  line-height: var(--typography-heading-6-line-height);
-  padding: var(--spacing-6) 10px;
-  margin-inline: var(--spacing-6);
-}
+  .menu :global(.react-aria-Header) {
+    font-family: var(--typography-heading-6-font-family);
+    font-size: var(--typography-heading-6-font-size);
+    letter-spacing: var(--typography-heading-6-letter-spacing);
+    font-weight: var(--typography-heading-6-font-weight);
+    line-height: var(--typography-heading-6-line-height);
+    padding: var(--spacing-6) 10px;
+    margin-inline: var(--spacing-6);
+  }
 
-.menu section:not(:last-of-type) {
-  &::after {
-    width: 100%;
-    height: 1px;
-    background-color: var(--border-solid-border-color);
-    content: '';
-    display: block;
-    margin-block: var(--spacing-6);
+  .menu section:not(:last-of-type) {
+    &::after {
+      width: 100%;
+      height: 1px;
+      background-color: var(--border-solid-border-color);
+      content: '';
+      display: block;
+      margin-block: var(--spacing-6);
+    }
   }
 }

package/src/__next__/Menu/MenuItem.module.css

@@ -1,46 +1,48 @@
-.item {
-  display: block;
-  font-family: var(--typography-paragraph-body-font-family);
-  font-size: var(--typography-paragraph-body-font-size);
-  letter-spacing: var(--typography-paragraph-body-letter-spacing);
-  font-weight: var(--typography-paragraph-body-font-weight);
-  line-height: var(--typography-paragraph-body-line-height);
-  color: var(--color-purple-800);
-  padding: var(--spacing-6) var(--spacing-8);
-  border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
-  border-radius: 4px;
-  margin-inline: var(--spacing-6);
-  text-decoration: none;
-  cursor: pointer;
-}
+@layer kz-components {
+  .item {
+    display: block;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-size: var(--typography-paragraph-body-font-size);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    line-height: var(--typography-paragraph-body-line-height);
+    color: var(--color-purple-800);
+    padding: var(--spacing-6) var(--spacing-8);
+    border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
+    border-radius: 4px;
+    margin-inline: var(--spacing-6);
+    text-decoration: none;
+    cursor: pointer;
+  }
 
-.flexWrapper {
-  display: flex;
-  gap: 0 var(--spacing-8);
-  align-items: center;
-}
+  .flexWrapper {
+    display: flex;
+    gap: 0 var(--spacing-8);
+    align-items: center;
+  }
 
-.iconWrapper {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
+  .iconWrapper {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
 
-.item:focus {
-  outline: none;
-}
+  .item:focus {
+    outline: none;
+  }
 
-.item[data-hovered],
-.item[data-focus-visible] {
-  background-color: var(--color-blue-100);
-  color: var(--color-blue-500);
-}
+  .item[data-hovered],
+  .item[data-focus-visible] {
+    background-color: var(--color-blue-100);
+    color: var(--color-blue-500);
+  }
 
-.item[data-focus-visible] {
-  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-    var(--color-blue-500);
-}
+  .item[data-focus-visible] {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+  }
 
-.item[data-disabled] {
-  opacity: 0.3;
+  .item[data-disabled] {
+    opacity: 0.3;
+  }
 }

package/src/__next__/Select/Select.module.scss

@@ -3,11 +3,13 @@
 @import '~@kaizen/design-tokens/sass/shadow';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.container {
-  position: relative;
-  width: 100%;
-}
+@layer kz-components {
+  .container {
+    position: relative;
+    width: 100%;
+  }
 
-.notFullWidth {
-  width: 180px;
+  .notFullWidth {
+    width: 180px;
+  }
 }

package/src/__next__/Select/Select.tsx

@@ -25,7 +25,7 @@ import { getDisabledKeysFromItems } from './utils/getDisabledKeysFromItems'
 import { transformSelectItemToCollectionElement } from './utils/transformSelectItemToCollectionElement'
 import styles from './Select.module.scss'
 
-type OmittedAriaSelectProps = 'children' | 'items'
+type OmittedAriaSelectProps = 'children' | 'items' | 'onSelectionChange'
 
 export type SelectProps<Option extends SelectOption = SelectOption> = {
   /**
@@ -70,6 +70,10 @@ export type SelectProps<Option extends SelectOption = SelectOption> = {
    * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
    */
   placeholder?: string
+  /**
+   * Handler that is called when the selection changes.
+   */
+  onSelectionChange?: (key: Key) => void
 } & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>
 
 /**
@@ -92,6 +96,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
   description,
   placeholder = '',
   isDisabled,
+  onSelectionChange,
   portalContainerId,
   ...restProps
 }: SelectProps<Option>): JSX.Element => {
@@ -114,6 +119,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
     description,
     placeholder,
     isDisabled,
+    onSelectionChange: onSelectionChange ? (key) => onSelectionChange(key!) : undefined,
     ...restProps,
   }
 

package/src/__next__/Select/subcomponents/ListBox/ListBox.module.scss

@@ -1,12 +1,14 @@
-.listBox {
-  list-style: none;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding: 0;
-  display: grid;
-  max-height: 22rem;
-}
+@layer kz-components {
+  .listBox {
+    list-style: none;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding: 0;
+    display: grid;
+    max-height: 22rem;
+  }
 
-.listBox:focus-visible {
-  outline: none;
+  .listBox:focus-visible {
+    outline: none;
+  }
 }

package/src/__next__/Select/subcomponents/ListBoxSection/ListBoxSection.module.scss

@@ -1,20 +1,22 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.sectionWrapper {
-  display: flex;
-  flex-direction: column;
+@layer kz-components {
+  .sectionWrapper {
+    display: flex;
+    flex-direction: column;
 
-  &:not(:first-child) {
-    margin-top: $spacing-8;
+    &:not(:first-child) {
+      margin-top: $spacing-8;
+    }
   }
-}
 
-.sectionHeading {
-  padding-inline-start: $spacing-4;
-}
+  .sectionHeading {
+    padding-inline-start: $spacing-4;
+  }
 
-.sectionList {
-  display: flex;
-  flex-direction: column;
-  padding: $spacing-xs 0 0 0;
+  .sectionList {
+    display: flex;
+    flex-direction: column;
+    padding: $spacing-xs 0 0 0;
+  }
 }

package/src/__next__/Select/subcomponents/Option/Option.module.scss

@@ -3,71 +3,73 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-$iconAndBadgeHeight: $spacing-md;
+@layer kz-components {
+  $iconAndBadgeHeight: $spacing-md;
 
-.icon {
-  line-height: 1;
-  height: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
-  width: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
+  .icon {
+    line-height: 1;
+    height: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
+    width: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-.option {
-  height: fit-content;
-  align-items: center;
-  display: inline-grid;
-  grid-template-columns: auto $spacing-md;
-  gap: $spacing-xs;
-  padding-block: $spacing-8;
-  padding-inline: $spacing-12 $spacing-6;
-  position: relative;
-  font-family: $typography-paragraph-body-font-family;
-  font-size: $typography-paragraph-body-font-size;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  font-weight: $typography-paragraph-body-font-weight;
-  line-height: $typography-paragraph-body-line-height;
-  border: $border-solid-border-width $border-solid-border-style;
-  border-color: $border-borderless-border-color;
-  border-radius: 4px;
-  cursor: default;
+  .option {
+    height: fit-content;
+    align-items: center;
+    display: inline-grid;
+    grid-template-columns: auto $spacing-md;
+    gap: $spacing-xs;
+    padding-block: $spacing-8;
+    padding-inline: $spacing-12 $spacing-6;
+    position: relative;
+    font-family: $typography-paragraph-body-font-family;
+    font-size: $typography-paragraph-body-font-size;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+    font-weight: $typography-paragraph-body-font-weight;
+    line-height: $typography-paragraph-body-line-height;
+    border: $border-solid-border-width $border-solid-border-style;
+    border-color: $border-borderless-border-color;
+    border-radius: 4px;
+    cursor: default;
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &.isFocusVisible {
-    background-color: $color-blue-100;
-    color: $color-blue-500;
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
+    &.isFocusVisible {
+      background-color: $color-blue-100;
+      color: $color-blue-500;
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+
+      .icon {
+        color: $color-blue-500;
+      }
+    }
 
-    .icon {
+    &:hover:not(.disabled),
+    &:active:not(.disabled) {
+      background-color: $color-blue-100;
       color: $color-blue-500;
+
+      .icon {
+        color: $color-blue-500;
+      }
     }
   }
 
-  &:hover:not(.disabled),
-  &:active:not(.disabled) {
-    background-color: $color-blue-100;
+  .isSelected {
+    font-weight: $typography-paragraph-bold-font-weight;
     color: $color-blue-500;
 
-    .icon {
+    &.icon {
       color: $color-blue-500;
     }
   }
-}
-
-.isSelected {
-  font-weight: $typography-paragraph-bold-font-weight;
-  color: $color-blue-500;
 
-  &.icon {
-    color: $color-blue-500;
+  .disabled {
+    color: $color-gray-500;
   }
 }
-
-.disabled {
-  color: $color-gray-500;
-}

package/src/__next__/Select/subcomponents/SectionDivider/SectionDivider.module.scss

@@ -1,11 +1,13 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.divider {
-  margin: $spacing-8 0;
+@layer kz-components {
+  .divider {
+    margin: $spacing-8 0;
 
-  &:first-child,
-  &:last-child,
-  & + .divider {
-    display: none;
+    &:first-child,
+    &:last-child,
+    & + .divider {
+      display: none;
+    }
   }
 }

package/src/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.module.scss

@@ -1,5 +1,7 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.selectPopoverContents {
-  padding: $spacing-12;
+@layer kz-components {
+  .selectPopoverContents {
+    padding: $spacing-12;
+  }
 }

package/src/__next__/Select/subcomponents/SelectToggle/SelectToggle.module.scss

@@ -4,131 +4,133 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '../../../../../styles/utils/button-reset';
 
-.iconWrapper {
-  line-height: 1;
-}
+@layer kz-components {
+  .iconWrapper {
+    line-height: 1;
+  }
 
-.icon {
-  color: $color-gray-500;
-}
+  .icon {
+    color: $color-gray-500;
+  }
+
+  .selectToggle {
+    @include button-reset;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+    display: inline-flex;
+    flex: 1;
+    justify-content: space-between;
+    align-items: center;
+    height: $spacing-xl;
+    width: 100%;
+    min-width: 0;
+    margin-top: $spacing-xs;
+    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+    border-radius: $border-solid-border-radius;
+    background-color: $color-white;
+    padding-block: calc(#{$spacing-12} - #{$border-solid-border-width});
+    padding-inline: 0.875rem $spacing-12;
+    font-family: $typography-paragraph-body-font-family;
+    font-weight: $typography-paragraph-body-font-weight;
+    font-size: $typography-paragraph-body-font-size;
+    line-height: $typography-paragraph-body-line-height;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+    color: $color-purple-800;
+    white-space: nowrap;
+
+    &:hover,
+    &:active,
+    &:focus {
+      .icon {
+        color: $color-gray-600;
+      }
+    }
+
+    &:active,
+    &:hover {
+      background-color: $color-gray-200;
+      border-color: $color-gray-600;
+    }
 
-.selectToggle {
-  @include button-reset;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  position: relative;
-  display: inline-flex;
-  flex: 1;
-  justify-content: space-between;
-  align-items: center;
-  height: $spacing-xl;
-  width: 100%;
-  min-width: 0;
-  margin-top: $spacing-xs;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-  border-radius: $border-solid-border-radius;
-  background-color: $color-white;
-  padding-block: calc(#{$spacing-12} - #{$border-solid-border-width});
-  padding-inline: 0.875rem $spacing-12;
-  font-family: $typography-paragraph-body-font-family;
-  font-weight: $typography-paragraph-body-font-weight;
-  font-size: $typography-paragraph-body-font-size;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  color: $color-purple-800;
-  white-space: nowrap;
-
-  &:hover,
-  &:active,
-  &:focus {
-    .icon {
-      color: $color-gray-600;
+    &:focus {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: 1px;
+      background-color: $color-gray-200;
+      border-color: $color-gray-600;
     }
   }
 
-  &:active,
-  &:hover {
-    background-color: $color-gray-200;
-    border-color: $color-gray-600;
+  .placeholder {
+    color: rgb($color-purple-800-rgb, 0.7);
   }
 
-  &:focus {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-    outline-offset: 1px;
-    background-color: $color-gray-200;
-    border-color: $color-gray-600;
+  .error {
+    border: $border-solid-border-width $border-solid-border-style $color-red-500;
   }
-}
 
-.placeholder {
-  color: rgba($color-purple-800-rgb, 0.7);
-}
+  .caution {
+    border: $border-solid-border-width $border-solid-border-style $color-yellow-600;
+  }
 
-.error {
-  border: $border-solid-border-width $border-solid-border-style $color-red-500;
-}
+  .disabled {
+    border: $border-solid-border-width $border-solid-border-style $color-gray-300;
+    background-color: $color-gray-100;
+    color: $color-gray-500;
+    pointer-events: none;
+  }
 
-.caution {
-  border: $border-solid-border-width $border-solid-border-style $color-yellow-600;
-}
+  .reversed {
+    border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.8);
+    background-color: transparent;
+    color: $color-white;
 
-.disabled {
-  border: $border-solid-border-width $border-solid-border-style $color-gray-300;
-  background-color: $color-gray-100;
-  color: $color-gray-500;
-  pointer-events: none;
-}
+    &.placeholder {
+      color: rgba($color-white-rgb, 0.65);
+    }
 
-.reversed {
-  border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.8);
-  background-color: transparent;
-  color: $color-white;
+    &.selectToggle .icon {
+      color: rgb(255, 255, 255, 0.8);
+    }
 
-  &.placeholder {
-    color: rgba($color-white-rgb, 0.65);
-  }
+    &:active,
+    &:hover,
+    &:focus {
+      background-color: rgba($color-white-rgb, 0.1);
+      border: $border-solid-border-width $border-solid-border-style $color-white;
 
-  &.selectToggle .icon {
-    color: rgb(255, 255, 255, 0.8);
-  }
+      .icon {
+        color: $color-white;
+      }
+    }
 
-  &:active,
-  &:hover,
-  &:focus {
-    background-color: rgba($color-white-rgb, 0.1);
-    border: $border-solid-border-width $border-solid-border-style $color-white;
+    &:focus {
+      outline-color: var(--color-blue-300);
+    }
 
-    .icon {
-      color: $color-white;
+    .error {
+      border-color: $color-red-300;
     }
-  }
 
-  &:focus {
-    outline-color: var(--color-blue-300);
+    .caution {
+      border-color: $color-yellow-400;
+    }
   }
 
-  .error {
-    border-color: $color-red-300;
+  .reversed.disabled {
+    background-color: transparent;
+    border-color: rgba($color-white-rgb, 0.3);
+    color: rgba($color-white-rgb, 0.3);
   }
 
-  .caution {
-    border-color: $color-yellow-400;
+  .value {
+    width: 100%;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-inline-end: var(--spacing-12);
   }
 }
-
-.reversed.disabled {
-  background-color: transparent;
-  border-color: rgba($color-white-rgb, 0.3);
-  color: rgba($color-white-rgb, 0.3);
-}
-
-.value {
-  width: 100%;
-  text-align: start;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-inline-end: var(--spacing-12);
-}