@kaizen/components 1.80.2 → 1.80.4

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/Popover/utils/usePositioningStyles.mjs

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import { useLocale } from '@react-aria/i18n';
+import { usePopoverPositioning } from './usePopoverPositioning.mjs';
+import { useSupportsAnchorPositioning } from './useSupportsAnchorPositioning.mjs';
+var CSS_PROPS = {
+  POSITION_ANCHOR: '--position-anchor',
+  POSITION_AREA: '--position-area'
+};
+var DEFAULTS = {
+  MAX_HEIGHT: '300px'
+};
+/**
+ * Generates manual positioning styles for browsers without anchor positioning support or SSR
+ */
+var getManualPositioningStyles = function (positionData) {
+  return {
+    top: positionData.top,
+    bottom: positionData.bottom,
+    insetInlineStart: positionData.insetInlineStart,
+    maxHeight: positionData.maxHeight,
+    left: 'auto',
+    right: 'auto',
+    position: 'fixed'
+  };
+};
+var getAnchorPositioningStyles = function (anchorName, positionData) {
+  var _a;
+  var _b;
+  var styles = (_a = {
+    maxHeight: (_b = positionData.maxHeight) !== null && _b !== void 0 ? _b : DEFAULTS.MAX_HEIGHT
+  }, _a[CSS_PROPS.POSITION_ANCHOR] = anchorName, _a[CSS_PROPS.POSITION_AREA] = positionData.top === 'auto' ? 'top' : 'bottom', _a);
+  return styles;
+};
+var usePositioningStyles = function (buttonRef, popoverRef, anchorName) {
+  var direction = useLocale().direction;
+  var hasAnchorSupport = useSupportsAnchorPositioning();
+  var _a = usePopoverPositioning({
+      triggerRef: buttonRef,
+      popoverRef: popoverRef,
+      direction: direction,
+      preferredPlacement: 'bottom'
+    }),
+    top = _a.top,
+    bottom = _a.bottom,
+    insetInlineStart = _a.insetInlineStart,
+    maxHeight = _a.maxHeight,
+    isPositioned = _a.isPositioned;
+  var positionData = useMemo(function () {
+    return {
+      top: top,
+      bottom: bottom,
+      insetInlineStart: insetInlineStart,
+      maxHeight: maxHeight
+    };
+  }, [top, bottom, insetInlineStart, maxHeight]);
+  var popoverStyle = useMemo(function () {
+    if (hasAnchorSupport === null || !hasAnchorSupport) {
+      return getManualPositioningStyles(positionData);
+    }
+    return getAnchorPositioningStyles(anchorName, positionData);
+  }, [hasAnchorSupport, anchorName, positionData]);
+  return {
+    popoverStyle: popoverStyle,
+    isPositioned: isPositioned
+  };
+};
+export { usePositioningStyles };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/Popover/utils/useSupportsAnchorPositioning.mjs

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+var useSupportsAnchorPositioning = function () {
+  return useMemo(function () {
+    if (typeof window === 'undefined' || typeof CSS === 'undefined') {
+      return false;
+    }
+    return CSS.supports('position-anchor', 'auto') || CSS.supports('position-try-fallbacks: flip-block');
+  }, []);
+};
+export { useSupportsAnchorPositioning };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.mjs

@@ -1,13 +1,49 @@
-import React from 'react';
-import { Button, SelectValue } from 'react-aria-components';
+import React, { useMemo } from 'react';
+import { Button } from 'react-aria-components';
 import { Icon } from '../../../../__next__/Icon/Icon.mjs';
+import { useSingleSelectContext } from '../../context/SingleSelectContext.mjs';
 import styles from './Trigger.module.css.mjs';
-var Trigger = function () {
-  return /*#__PURE__*/React.createElement(Button, {
-    className: styles.button
-  }, /*#__PURE__*/React.createElement(SelectValue, null), /*#__PURE__*/React.createElement(Icon, {
+function flattenItems(items) {
+  return items.flatMap(function (item) {
+    return 'options' in item ? item.options : item;
+  });
+}
+var Trigger = function (_a) {
+  var buttonRef = _a.buttonRef;
+  var _b = useSingleSelectContext(),
+    isOpen = _b.isOpen,
+    setOpen = _b.setOpen,
+    selectedKey = _b.selectedKey,
+    items = _b.items,
+    anchorName = _b.anchorName;
+  var flattenedItems = useMemo(function () {
+    return flattenItems(items);
+  }, [items]);
+  var selectedLabel = useMemo(function () {
+    var _a;
+    var key = selectedKey;
+    var item = flattenedItems.find(function (i) {
+      return i.value === key;
+    });
+    return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : /*#__PURE__*/React.createElement("div", null);
+  }, [flattenedItems, selectedKey]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: styles.button,
+    ref: buttonRef,
+    onPress: function () {
+      return setOpen(!isOpen);
+    },
+    "aria-expanded": isOpen,
+    style: {
+      '--anchor-name': anchorName
+    }
+  }, selectedLabel, /*#__PURE__*/React.createElement(Icon, {
     name: "keyboard_arrow_down",
     isPresentational: true
-  }));
+  })));
 };
 export { Trigger };

package/dist/styles.css

@@ -1,11 +1,50 @@
 @layer tokens, normalize, reset, kz-components;@layer tokens{:root{--theme-key:heart;--animation-easing-function-ease-in-out:cubic-bezier(0.455,0.03,0.515,0.955);--animation-easing-function-ease-in:cubic-bezier(0.55,0.085,0.68,0.53);--animation-easing-function-ease-out:cubic-bezier(0.25,0.46,0.45,0.94);--animation-easing-function-linear:linear;--animation-easing-function-bounce-in:cubic-bezier(0.485,0.155,0.24,1.245);--animation-easing-function-bounce-out:cubic-bezier(0.485,0.155,0.515,0.845);--animation-easing-function-bounce-in-out:cubic-bezier(0.76,-0.245,0.24,1.245);--animation-duration-instant:0ms;--animation-duration-immediate:100ms;--animation-duration-rapid:200ms;--animation-duration-fast:300ms;--animation-duration-slow:400ms;--animation-duration-deliberate:700ms;--border-solid-border-width:2px;--border-solid-border-radius:7px;--border-solid-border-style:solid;--border-solid-border-color:#e1e2ea;--border-solid-border-color-rgb:225,226,234;--border-dashed-border-width:2px;--border-dashed-border-radius:7px;--border-dashed-border-style:dashed;--border-borderless-border-width:2px;--border-borderless-border-radius:7px;--border-borderless-border-style:solid;--border-borderless-border-color:transparent;--border-borderless-border-color-rgb:0,0,0;--border-focus-ring-border-width:2px;--border-focus-ring-border-radius:10px;--border-focus-ring-border-style:solid;--border-width-1:1px;--color-purple-100:#f4edf8;--color-purple-100-rgb:244,237,248;--color-purple-200:#dfc9ea;--color-purple-200-rgb:223,201,234;--color-purple-300:#c9a5dd;--color-purple-300-rgb:201,165,221;--color-purple-400:#ae67b1;--color-purple-400-rgb:174,103,177;--color-purple-500:#844587;--color-purple-500-rgb:132,69,135;--color-purple-600:#5f3361;--color-purple-600-rgb:95,51,97;--color-purple-700:#4a234d;--color-purple-700-rgb:74,35,77;--color-purple-800:#2f2438;--color-purple-800-rgb:47,36,56;--color-blue-100:#e6f6ff;--color-blue-100-rgb:230,246,255;--color-blue-200:#bde2f5;--color-blue-200-rgb:189,226,245;--color-blue-300:#73c0e8;--color-blue-300-rgb:115,192,232;--color-blue-400:#008bd6;--color-blue-400-rgb:0,139,214;--color-blue-500:#0168b3;--color-blue-500-rgb:1,104,179;--color-blue-600:#004970;--color-blue-600-rgb:0,73,112;--color-blue-700:#003157;--color-blue-700-rgb:0,49,87;--color-green-100:#e8f8f4;--color-green-100-rgb:232,248,244;--color-green-200:#c4ede2;--color-green-200-rgb:196,237,226;--color-green-300:#8fdbc7;--color-green-300-rgb:143,219,199;--color-green-400:#5dcaad;--color-green-400-rgb:93,202,173;--color-green-500:#3f9a86;--color-green-500-rgb:63,154,134;--color-green-600:#2c7d67;--color-green-600-rgb:44,125,103;--color-green-700:#22594a;--color-green-700-rgb:34,89,74;--color-yellow-100:#fff9e4;--color-yellow-100-rgb:255,249,228;--color-yellow-200:#ffeeb3;--color-yellow-200-rgb:255,238,179;--color-yellow-300:#ffe36e;--color-yellow-300-rgb:255,227,110;--color-yellow-400:#ffca4d;--color-yellow-400-rgb:255,202,77;--color-yellow-500:#ffb600;--color-yellow-500-rgb:255,182,0;--color-yellow-600:#c68600;--color-yellow-600-rgb:198,134,0;--color-yellow-700:#876400;--color-yellow-700-rgb:135,100,0;--color-red-100:#fdeaee;--color-red-100-rgb:253,234,238;--color-red-200:#f9c2cb;--color-red-200-rgb:249,194,203;--color-red-300:#f597a8;--color-red-300-rgb:245,151,168;--color-red-400:#e0707d;--color-red-400-rgb:224,112,125;--color-red-500:#c93b55;--color-red-500-rgb:201,59,85;--color-red-600:#a82433;--color-red-600-rgb:168,36,51;--color-red-700:#6c1e20;--color-red-700-rgb:108,30,32;--color-orange-100:#fff0e8;--color-orange-100-rgb:255,240,232;--color-orange-200:#ffd1b9;--color-orange-200-rgb:255,209,185;--color-orange-300:#ffb08a;--color-orange-300-rgb:255,176,138;--color-orange-400:#ff9461;--color-orange-400-rgb:255,148,97;--color-orange-500:#e96c2f;--color-orange-500-rgb:233,108,47;--color-orange-600:#b74302;--color-orange-600-rgb:183,67,2;--color-orange-700:#903c00;--color-orange-700-rgb:144,60,0;--color-gray-100:#f9f9f9;--color-gray-100-rgb:249,249,249;--color-gray-200:#f4f4f5;--color-gray-200-rgb:244,244,245;--color-gray-300:#eaeaec;--color-gray-300-rgb:234,234,236;--color-gray-400:#cdcdd0;--color-gray-400-rgb:205,205,208;--color-gray-500:#878792;--color-gray-500-rgb:135,135,146;--color-gray-600:#524e56;--color-gray-600-rgb:82,78,86;--color-white:#fff;--color-white-rgb:255,255,255;--color-black:#000;--color-black-rgb:0,0,0;--data-viz-favorable:#7dd5bd;--data-viz-favorable-rgb:125,213,189;--data-viz-unfavorable:#e68d97;--data-viz-unfavorable-rgb:230,141,151;--layout-content-max-width:1392px;--layout-content-max-width-with-sidebar:1080px;--layout-content-side-margin:72px;--layout-mobile-actions-drawer-height:60px;--layout-navigation-bar-height:72px;--layout-breakpoints-medium:768px;--layout-breakpoints-large:1080px;--shadow-small-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06);--shadow-large-box-shadow:0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08);--spacing-0:0;--spacing-1:.0625rem;--spacing-2:.125rem;--spacing-4:.25rem;--spacing-6:.375rem;--spacing-8:.5rem;--spacing-12:.75rem;--spacing-16:1rem;--spacing-20:1.25rem;--spacing-24:1.5rem;--spacing-32:2rem;--spacing-40:2.5rem;--spacing-48:3rem;--spacing-56:3.5rem;--spacing-64:4rem;--spacing-72:4.5rem;--spacing-80:5rem;--spacing-96:6rem;--spacing-112:7rem;--spacing-128:8rem;--spacing-160:10rem;--spacing-200:12.5rem;--spacing-240:15rem;--spacing-280:17.5rem;--spacing-320:20rem;--spacing-xs:0.375rem;--spacing-sm:0.75rem;--spacing-md:1.5rem;--spacing-lg:2.25rem;--spacing-xl:3rem;--spacing-xxl:3.75rem;--spacing-xxxl:4.5rem;--spacing-xxxxl:5.25rem;--spacing-xxxxxl:6rem;--typography-data-large-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-font-weight:700;--typography-data-large-font-size:5.25rem;--typography-data-large-line-height:5.25rem;--typography-data-large-letter-spacing:normal;--typography-data-large-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-units-font-weight:700;--typography-data-large-units-font-size:2.625rem;--typography-data-large-units-line-height:5.25rem;--typography-data-large-units-letter-spacing:normal;--typography-data-medium-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-font-weight:700;--typography-data-medium-font-size:3rem;--typography-data-medium-line-height:5rem;--typography-data-medium-letter-spacing:normal;--typography-data-medium-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-units-font-weight:700;--typography-data-medium-units-font-size:1.5rem;--typography-data-medium-units-line-height:5rem;--typography-data-medium-units-letter-spacing:normal;--typography-data-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-font-weight:700;--typography-data-small-font-size:1.5rem;--typography-data-small-line-height:1.5rem;--typography-data-small-letter-spacing:normal;--typography-data-small-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-units-font-weight:700;--typography-data-small-units-font-size:1.125rem;--typography-data-small-units-line-height:1.5rem;--typography-data-small-units-letter-spacing:normal;--typography-display-0-font-family:"Tiempos Headline",Georgia,serif;--typography-display-0-font-weight:800;--typography-display-0-font-size:4.5rem;--typography-display-0-line-height:5.25rem;--typography-display-0-letter-spacing:0em;--typography-heading-1-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-1-font-weight:500;--typography-heading-1-font-size:2.125rem;--typography-heading-1-line-height:2.625rem;--typography-heading-1-letter-spacing:normal;--typography-heading-2-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-2-font-weight:600;--typography-heading-2-font-size:1.75rem;--typography-heading-2-line-height:2.25rem;--typography-heading-2-letter-spacing:normal;--typography-heading-3-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-3-font-weight:600;--typography-heading-3-font-size:1.375rem;--typography-heading-3-line-height:1.875rem;--typography-heading-3-letter-spacing:normal;--typography-heading-4-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-4-font-weight:600;--typography-heading-4-font-size:1.125rem;--typography-heading-4-line-height:1.5rem;--typography-heading-4-letter-spacing:normal;--typography-heading-5-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-5-font-weight:600;--typography-heading-5-font-size:1rem;--typography-heading-5-line-height:1.5rem;--typography-heading-5-letter-spacing:normal;--typography-heading-6-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-6-font-weight:600;--typography-heading-6-font-size:0.875rem;--typography-heading-6-line-height:1.5rem;--typography-heading-6-letter-spacing:normal;--typography-paragraph-intro-lede-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-intro-lede-font-weight:400;--typography-paragraph-intro-lede-font-size:1.25rem;--typography-paragraph-intro-lede-line-height:1.875rem;--typography-paragraph-intro-lede-letter-spacing:0;--typography-paragraph-intro-lede-max-width:975px;--typography-paragraph-body-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-body-font-weight:400;--typography-paragraph-body-font-size:1rem;--typography-paragraph-body-line-height:1.5rem;--typography-paragraph-body-letter-spacing:normal;--typography-paragraph-body-max-width:780px;--typography-paragraph-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-small-font-weight:400;--typography-paragraph-small-font-size:0.875rem;--typography-paragraph-small-line-height:1.125rem;--typography-paragraph-small-letter-spacing:normal;--typography-paragraph-small-max-width:680px;--typography-paragraph-extra-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-extra-small-font-weight:400;--typography-paragraph-extra-small-font-size:0.75rem;--typography-paragraph-extra-small-line-height:1.125rem;--typography-paragraph-extra-small-letter-spacing:normal;--typography-paragraph-extra-small-max-width:600px;--typography-paragraph-bold-font-weight:600;--typography-button-primary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-primary-font-weight:500;--typography-button-primary-font-size:1.125rem;--typography-button-primary-line-height:1.5rem;--typography-button-primary-letter-spacing:normal;--typography-button-secondary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-secondary-font-weight:500;--typography-button-secondary-font-size:1rem;--typography-button-secondary-line-height:1.5rem;--typography-button-secondary-letter-spacing:normal}}@layer normalize{html{text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{appearance:auto}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:auto;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}}@layer reset{@font-face{font-family:Tiempos Headline;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff)}@font-face{font-family:Tiempos Headline;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-medium.woff)}@font-face{font-family:Greycliff CF;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-light.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-regular.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-medium.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-demi-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-extra-bold.woff) format("woff")}@font-face{font-family:Inter;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff)}@font-face{font-family:Inter;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff)}@font-face{font-family:Inter;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff)}@font-face{font-family:Inter;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff)}@font-face{font-family:Inter;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff)}@font-face{font-family:Inter;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff)}@font-face{font-family:IBM Plex Mono;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff)}}@layer reset{*,:after,:before{border-color:var(--border-solid-border-color,"currentColor");border-style:solid;border-width:0}}
 @layer kz-components {
-  .SingleSelect-module_popover__ZjL9n {
+  .List-module_list__bbFPn {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@layer kz-components {
+  .Popover-module_popover__BjY2S {
+    position: absolute;
+    height: auto;
     background-color: var(--color-white);
     border-radius: var(--spacing-8);
-    padding: var(--spacing-8);
-    width: 200px;
+    padding: 0;
     box-shadow: var(--shadow-small-box-shadow);
+    overflow: hidden auto;
+    margin: 0;
+    box-sizing: border-box;
+
+    /* TODO: update width based on design */
+    width: 200px;
+
+    @supports (anchor-name: --anchor) {
+      position-anchor: var(--position-anchor);
+      margin-block: var(--spacing-4);
+      position-area: var(--position-area) center;
+      /* stylelint-disable-next-line declaration-property-value-no-unknown */
+      width: anchor-size(width);
+    }
+  }
+}
+
+@layer kz-components {
+  .ListItem-module_listItem__xGr6A {
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    padding: var(--spacing-8) var(--spacing-16);
+  }
+
+  .ListItem-module_listItem__xGr6A:focus-visible {
+    background-color: var(--color-blue-200);
+    outline: none;
+    border-color: white;
   }
 }
 
@@ -19,16 +58,9 @@
   }
 }
 
-@layer kz-components {
-  .List-module_list__bbFPn {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-16);
-  }
-}
-
 @layer kz-components {
   .Trigger-module_button__giSqA {
+    anchor-name: var(--anchor-name);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -46,16 +78,6 @@
   }
 }
 
-@layer kz-components {
-  .ListItem-module_listItem__xGr6A {
-    font-family: var(--typography-paragraph-body-font-family);
-    font-weight: var(--typography-paragraph-body-font-weight);
-    font-size: var(--typography-paragraph-body-font-size);
-    line-height: var(--typography-paragraph-body-line-height);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing);
-  }
-}
-
 @layer kz-components {
   /*
  * This is taken from the Material Symbols CDN

package/dist/types/__alpha__/SingleSelect/SingleSelect.d.ts

@@ -1,21 +1,19 @@
-import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
-import { type OverrideClassName } from "../../types/OverrideClassName";
-export type SingleSelectProps = {
-    children?: React.ReactNode;
-} & OverrideClassName<HTMLAttributes<Element>>;
+import React, { type PropsWithChildren } from 'react';
+import { type ListBoxProps } from 'react-aria-components';
+import { type SelectItem, type SelectSection, type SingleSelectProps } from './types';
 export declare const SingleSelect: {
-    ({ classNameOverride, children, ...restProps }: PropsWithChildren<SingleSelectProps>): JSX.Element;
+    ({ items, onSelectionChange, children, ...restProps }: PropsWithChildren<SingleSelectProps>): JSX.Element;
     displayName: string;
     List: {
-        ({ children, className, ...props }: import("react-aria-components").ListBoxProps<object> & PropsWithChildren): React.ReactElement;
+        ({ children, className, ...props }: ListBoxProps<SelectItem | SelectSection> & PropsWithChildren): React.ReactElement;
         displayName: string;
     };
     ListItem: {
-        ({ children, className, ...props }: import("react-aria-components").ListBoxItemProps<object> & PropsWithChildren): React.ReactElement;
+        ({ children, className, ...props }: import("react-aria-components").ListBoxItemProps<SelectItem> & PropsWithChildren): React.ReactElement;
         displayName: string;
     };
     ListSection: {
-        ({ name, className, children, ...props }: import("react-aria-components").ListBoxSectionProps<object> & PropsWithChildren & {
+        ({ name, className, children, ...props }: import("react-aria-components").ListBoxSectionProps<SelectSection> & PropsWithChildren & {
             name: string;
         }): React.ReactElement;
         displayName: string;

package/dist/types/__alpha__/SingleSelect/context/SingleSelectContext.d.ts

@@ -0,0 +1,12 @@
+import { type Key } from '@react-types/shared';
+import { type SelectItem, type SelectSection } from '../types';
+type SingleSelectContextType = {
+    isOpen: boolean;
+    setOpen: (open: boolean) => void;
+    selectedKey: Key | null;
+    items: (SelectItem | SelectSection)[];
+    anchorName: string;
+};
+export declare const SingleSelectContext: import("react").Context<SingleSelectContextType | undefined>;
+export declare const useSingleSelectContext: () => SingleSelectContextType;
+export {};

package/dist/types/__alpha__/SingleSelect/context/index.d.ts

@@ -0,0 +1 @@
+export * from './SingleSelectContext';

package/dist/types/__alpha__/SingleSelect/subcomponents/List/List.d.ts

@@ -1,6 +1,7 @@
 import React, { type PropsWithChildren } from 'react';
 import { type ListBoxProps } from 'react-aria-components';
+import { type SelectItem, type SelectSection } from '../../types';
 export declare const List: {
-    ({ children, className, ...props }: ListBoxProps<object> & PropsWithChildren): React.ReactElement;
+    ({ children, className, ...props }: ListBoxProps<SelectItem | SelectSection> & PropsWithChildren): React.ReactElement;
     displayName: string;
 };

package/dist/types/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.d.ts

@@ -1,6 +1,7 @@
 import React, { type PropsWithChildren } from 'react';
 import { type ListBoxItemProps } from 'react-aria-components';
+import { type SelectItem } from '../../types';
 export declare const ListItem: {
-    ({ children, className, ...props }: ListBoxItemProps<object> & PropsWithChildren): React.ReactElement;
+    ({ children, className, ...props }: ListBoxItemProps<SelectItem> & PropsWithChildren): React.ReactElement;
     displayName: string;
 };

package/dist/types/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.d.ts

@@ -1,7 +1,8 @@
 import React, { type PropsWithChildren } from 'react';
 import { type ListBoxSectionProps } from 'react-aria-components';
+import { type SelectSection } from '../../types';
 export declare const ListSection: {
-    ({ name, className, children, ...props }: ListBoxSectionProps<object> & PropsWithChildren & {
+    ({ name, className, children, ...props }: ListBoxSectionProps<SelectSection> & PropsWithChildren & {
         name: string;
     }): React.ReactElement;
     displayName: string;

package/dist/types/__alpha__/SingleSelect/subcomponents/Popover/Popover.d.ts

@@ -0,0 +1,6 @@
+import React, { type PropsWithChildren } from 'react';
+import { type PopoverProps } from '../../types';
+export declare const Popover: {
+    ({ buttonRef, popoverRef, racPopoverRef, children, }: PopoverProps & PropsWithChildren): React.ReactElement;
+    displayName: string;
+};

package/dist/types/__alpha__/SingleSelect/subcomponents/Popover/index.d.ts

@@ -0,0 +1 @@
+export * from './Popover';

package/dist/types/__alpha__/SingleSelect/subcomponents/Popover/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './usePopoverPositioning';
+export * from './useSupportsAnchorPositioning';

package/dist/types/__alpha__/SingleSelect/subcomponents/Popover/utils/usePopoverPositioning.d.ts

@@ -0,0 +1,4 @@
+import { type Position, type UsePopoverPositioningProps } from '../../../types';
+export declare function usePopoverPositioning({ triggerRef, popoverRef, direction, offset, preferredPlacement, }: UsePopoverPositioningProps): Position & {
+    isPositioned: boolean;
+};

package/dist/types/__alpha__/SingleSelect/subcomponents/Popover/utils/usePositioningStyles.d.ts

@@ -0,0 +1,4 @@
+export declare const usePositioningStyles: (buttonRef: React.RefObject<HTMLElement>, popoverRef: React.RefObject<HTMLDivElement>, anchorName: string) => {
+    popoverStyle: React.CSSProperties;
+    isPositioned: boolean;
+};

package/dist/types/__alpha__/SingleSelect/subcomponents/Popover/utils/useSupportsAnchorPositioning.d.ts

@@ -0,0 +1 @@
+export declare const useSupportsAnchorPositioning: () => boolean;

package/dist/types/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.d.ts

@@ -1 +1,2 @@
-export declare const Trigger: () => JSX.Element;
+import { type TriggerProps } from '../../types';
+export declare const Trigger: ({ buttonRef }: TriggerProps) => JSX.Element;

package/dist/types/__alpha__/SingleSelect/subcomponents/index.d.ts

@@ -2,3 +2,4 @@ export * from './List';
 export * from './ListSection';
 export * from './ListItem';
 export * from './Trigger';
+export * from './Popover';

package/dist/types/__alpha__/SingleSelect/types.d.ts

@@ -0,0 +1,45 @@
+import { type RefObject } from 'react';
+import { type Key } from '@react-types/shared';
+export type SelectItem = {
+    label: string;
+    value: string;
+};
+export type SelectSection = {
+    label: string;
+    options: SelectItem[];
+};
+export type SingleSelectProps = {
+    children?: React.ReactNode;
+    items: (SelectItem | SelectSection)[];
+    onSelectionChange?: (key: Key | null) => void;
+};
+export type TriggerProps = {
+    buttonRef: React.RefObject<HTMLButtonElement>;
+};
+export type PopoverProps = {
+    buttonRef: React.RefObject<HTMLElement>;
+    popoverRef: React.RefObject<HTMLDivElement>;
+    racPopoverRef: React.Ref<any>;
+};
+type PositionDataProp = number | string | undefined;
+export type PositionData = {
+    top: PositionDataProp;
+    bottom: PositionDataProp;
+    insetInlineStart: PositionDataProp;
+    maxHeight: PositionDataProp;
+};
+export type LogicalPosition = number | 'auto' | undefined;
+export type Position = {
+    top: LogicalPosition;
+    bottom: LogicalPosition;
+    insetInlineStart: number;
+    maxHeight?: number;
+};
+export type UsePopoverPositioningProps = {
+    triggerRef: RefObject<HTMLElement>;
+    popoverRef: RefObject<HTMLElement>;
+    direction?: 'ltr' | 'rtl';
+    offset?: number;
+    preferredPlacement?: 'top' | 'bottom';
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.80.2",
+  "version": "1.80.4",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -102,8 +102,8 @@
     "kaizen-codemod": "./bin/codemod.sh"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.4",
-    "@headlessui/react": "^2.2.6",
+    "@floating-ui/react-dom": "^2.1.5",
+    "@headlessui/react": "^2.2.7",
     "@internationalized/date": "^3.8.2",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
@@ -179,7 +179,7 @@
     "react-dom": "^19.1.0",
     "react-highlight": "^0.15.0",
     "react-intl": "^7.1.11",
-    "rollup": "^4.46.1",
+    "rollup": "^4.46.2",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",

package/src/__alpha__/SingleSelect/SingleSelect.tsx

@@ -1,23 +1,88 @@
-import React, { type HTMLAttributes, type PropsWithChildren } from 'react'
-import { Popover as RACPopover, Select as RACSelect } from 'react-aria-components'
-import { type OverrideClassName } from '~components/types/OverrideClassName'
-import { List, ListItem, ListSection, Trigger } from './subcomponents'
-import styles from './SingleSelect.module.css'
-
-export type SingleSelectProps = {
-  children?: React.ReactNode
-} & OverrideClassName<HTMLAttributes<Element>>
+import React, { cloneElement, isValidElement, useId, useMemo, type PropsWithChildren } from 'react'
+import { useSelectState } from '@react-stately/select'
+import { type Key, type Selection } from '@react-types/shared'
+import { Select as RACSelect, type ListBoxProps } from 'react-aria-components'
+import { SingleSelectContext } from './context'
+import { List, ListItem, ListSection, Popover, Trigger } from './subcomponents'
+import { type SelectItem, type SelectSection, type SingleSelectProps } from './types'
 
 export const SingleSelect = ({
-  classNameOverride,
+  items,
+  onSelectionChange,
   children,
   ...restProps
 }: PropsWithChildren<SingleSelectProps>): JSX.Element => {
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const popoverRef = React.useRef<HTMLDivElement>(null)
+  const racPopoverRef = React.useRef<HTMLElement>(null)
+  const uniqueId = useId()
+  const anchorName = `--trigger-${uniqueId}`
+
+  const state = useSelectState({
+    items,
+  })
+
+  const handleOnSelectionChange = React.useCallback(
+    (keys: Selection): void => {
+      let key: Key | null = null
+
+      if (keys instanceof Set && keys.size > 0) {
+        key = Array.from(keys)[0]
+      }
+
+      state.setSelectedKey(key)
+      if (onSelectionChange) {
+        onSelectionChange(key)
+      }
+    },
+    [state, onSelectionChange],
+  )
+
+  // Cloning children here to allow users to pass in a custom ListItem or ListSection
+  // and still have the SingleSelect handle selection state
+  const injectedChildren = useMemo(() => {
+    if (!isValidElement(children)) return null
+
+    const selectedKeys: Iterable<Key> = state.selectedKey
+      ? new Set<Key>([state.selectedKey])
+      : new Set()
+
+    return cloneElement(children as React.ReactElement<ListBoxProps<SelectItem | SelectSection>>, {
+      selectionMode: 'single',
+      selectedKeys,
+      onSelectionChange: handleOnSelectionChange,
+      autoFocus: 'first',
+    })
+  }, [children, handleOnSelectionChange, state.selectedKey])
+
   return (
-    <RACSelect className={classNameOverride} placeholder="" {...restProps}>
-      <Trigger />
-      <RACPopover className={styles.popover}>{children}</RACPopover>
-    </RACSelect>
+    <SingleSelectContext.Provider
+      value={{
+        isOpen: state.isOpen,
+        setOpen: state.setOpen,
+        selectedKey: state.selectedKey,
+        items: items,
+        anchorName,
+      }}
+    >
+      <RACSelect
+        // TODO: allow user to pass in label
+        aria-label={'single-select'}
+        onSelectionChange={(key) =>
+          handleOnSelectionChange(key != null ? new Set([key]) : new Set())
+        }
+        placeholder=""
+        {...restProps}
+      >
+        <Trigger buttonRef={buttonRef} />
+
+        {state.isOpen && (
+          <Popover buttonRef={buttonRef} popoverRef={popoverRef} racPopoverRef={racPopoverRef}>
+            {injectedChildren}
+          </Popover>
+        )}
+      </RACSelect>
+    </SingleSelectContext.Provider>
   )
 }
 

package/src/__alpha__/SingleSelect/_docs/SingleSelect.mdx

@@ -18,10 +18,13 @@ import * as SingleSelectStories from './SingleSelect.stories'
 
 ## Overview
 
-{/* @todo: Update summary. */}
-Brief summary of the component here.
+SingleSelect component that handles selecting items from a dropdown, can be either filterable or not.
 
 <Canvas of={SingleSelectStories.Playground} />
 <Controls of={SingleSelectStories.Playground} />
 
 ## API
+
+## Positioning and z-index Management
+
+The SingleSelect component leverages the native Popover API to manage its dropdown functionality. By using popover instead of custom portal logic, the component takes full advantage of CSS layers, ensuring dropdowns appear above other content without manual z-index management.