@strapi/design-system 1.6.0 → 1.6.2

package/dist/Select/Select.js

@@ -1,4 +1,4 @@
-import r, { useState as ee, useRef as te, Children as j, cloneElement as A } from "react";
+import r, { useState as ee, useRef as te, Children as k, cloneElement as j } from "react";
 import e from "prop-types";
 import re from "styled-components";
 import { Cross as oe, CarretDown as ne } from "@strapi/icons";
@@ -13,96 +13,96 @@ import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
 import { Popover as me } from "../Popover/Popover.js";
 import { Stack as de } from "../Stack/Stack.js";
-import { Typography as P } from "../Typography/Typography.js";
+import { Typography as A } from "../Typography/Typography.js";
 import { Flex as C } from "../Flex/Flex.js";
-import { Box as _ } from "../Box/Box.js";
+import { Box as P } from "../Box/Box.js";
 import { useId as fe } from "../helpers/useId.js";
 import { SelectList as ue } from "./SelectList.js";
 import { SelectButtonWrapper as he, IconBox as Ee, CaretBox as be } from "./components.js";
 import { useButtonRef as ye } from "./hooks/useButtonRef.js";
-import { VisuallyHidden as q } from "../VisuallyHidden/VisuallyHidden.js";
+import { VisuallyHidden as _ } from "../VisuallyHidden/VisuallyHidden.js";
 import { DownState as ge } from "./constants.js";
-import { escapeSelector as z } from "../helpers/escapeSelector.js";
+import { escapeSelector as q } from "../helpers/escapeSelector.js";
 import { SelectTags as ve } from "./SelectTags.js";
 const Be = re(C)`
   width: 100%;
-`, G = ({
-  label: m,
-  labelAction: H,
-  id: W,
-  children: N,
-  customizeContent: d,
+`, z = ({
+  label: d,
+  labelAction: G,
+  id: H,
+  children: W,
+  customizeContent: f,
   placeholder: y,
   onChange: g,
   value: o,
   hint: v,
-  error: f,
+  error: m,
   disabled: s,
   clearLabel: I,
   onClear: S,
-  onReachEnd: J,
+  onReachEnd: N,
   multi: i,
-  required: K,
-  selectButtonTitle: Q,
-  size: U,
+  required: J,
+  selectButtonTitle: K,
+  size: Q,
   startIcon: x,
   withTags: u,
-  ...X
+  ...U
 }) => {
-  const n = fe("select", W), [h, E] = ee(void 0), $ = ye(h), R = te(null), w = `${n}-label`, b = `${n}-content`, D = typeof f == "string";
+  const n = fe(H), [h, E] = ee(void 0), $ = ye(h), R = te(null), w = `${n}-label`, b = `${n}-content`, X = typeof m == "string";
   let B;
-  if (D ? B = `${n}-error` : v && (B = `${n}-hint`), u && !i)
+  if (m ? B = `${n}-error` : v && (B = `${n}-hint`), u && !i)
     throw new Error('The "withTags" props can only be used when the "multi" prop is present');
   const Y = () => {
     E(void 0);
   }, Z = () => {
     s || (S(), $.current.focus());
-  }, L = (t) => {
+  }, D = (t) => {
     t.preventDefault(), !s && (t.nativeEvent.which === 3 || t.nativeEvent.button === 2 || E(ge.Mouse));
   }, O = (t, l = !0) => {
     i ? g(o.includes(t) ? o.filter((a) => a !== t) : [...o, t]) : (g(t), l && E(void 0));
-  }, F = (t) => {
+  }, L = (t) => {
     g(
       o.includes(t[0]) ? o.filter((l, a, c) => c.indexOf(l) < 0, t) : [...o, ...t]
     );
   };
-  let T, M = [];
-  const k = (t, l) => {
+  let T, F = [];
+  const M = (t, l) => {
     const a = `${n}-option-${t.props.value}`, c = i ? o.includes(t.props.value) : t.props.value === o;
-    return c && (u ? M.push({ label: t.props.children, value: t.props.value }) : T = t.props.children), A(t, {
-      id: z(a),
+    return c && (u ? F.push({ label: t.props.children, value: t.props.value }) : T = t.props.children), j(t, {
+      id: q(a),
       onClick: () => O(t.props.value),
       selected: c,
       multi: i,
       isChild: l
     });
-  }, V = j.toArray(N).map((t) => {
+  }, V = k.toArray(W).map((t) => {
     if (t.type.displayName === "OptGroup") {
       const l = `${n}-option-${t.props.label}`, a = t.props.children.every((p) => o.includes(p.props.value)), c = !a && t.props.children.some((p) => o.includes(p.props.value));
-      return A(t, {
-        id: z(l),
-        onClick: () => F(t.props.children.map((p) => p.props.value)),
+      return j(t, {
+        id: q(l),
+        onClick: () => L(t.props.children.map((p) => p.props.value)),
         selected: a,
         indeterminate: c,
         multi: i,
-        children: j.toArray(t.props.children).map((p) => k(p, !0)),
+        children: k.toArray(t.props.children).map((p) => M(p, !0)),
         value: t.props.label
       });
     }
-    return k(t);
+    return M(t);
   });
   return /* @__PURE__ */ r.createElement(se, {
     hint: v,
-    error: f,
+    error: m,
     id: n,
-    required: K
+    required: J
   }, /* @__PURE__ */ r.createElement(de, {
-    spacing: m || v || D ? 1 : 0
-  }, m && /* @__PURE__ */ r.createElement(ae, {
-    action: H
-  }, m), /* @__PURE__ */ r.createElement(he, {
-    size: U,
-    hasError: Boolean(f),
+    spacing: d || v || X ? 1 : 0
+  }, d && /* @__PURE__ */ r.createElement(ae, {
+    action: G
+  }, d), /* @__PURE__ */ r.createElement(he, {
+    size: Q,
+    hasError: Boolean(m),
     disabled: s,
     ref: R
   }, /* @__PURE__ */ r.createElement(le, {
@@ -112,34 +112,34 @@ const Be = re(C)`
     expanded: Boolean(h),
     onTrigger: E,
     id: n,
-    hasError: Boolean(f),
+    hasError: Boolean(m),
     disabled: s,
-    onMouseDown: L,
-    ...X
+    onMouseDown: D,
+    ...U
   }), /* @__PURE__ */ r.createElement(Be, {
     justifyContent: "space-between"
-  }, /* @__PURE__ */ r.createElement(C, null, x && /* @__PURE__ */ r.createElement(_, {
+  }, /* @__PURE__ */ r.createElement(C, null, x && /* @__PURE__ */ r.createElement(P, {
     paddingLeft: 3,
     "aria-hidden": !0
   }, x), u && /* @__PURE__ */ r.createElement(ve, {
-    tags: M,
+    tags: F,
     onRemoveTag: O,
     disabled: s
-  }), /* @__PURE__ */ r.createElement(_, {
+  }), /* @__PURE__ */ r.createElement(P, {
     paddingLeft: 4,
     paddingRight: 4
-  }, u ? /* @__PURE__ */ r.createElement(r.Fragment, null, !o || o.length === 0 ? /* @__PURE__ */ r.createElement(P, {
+  }, u ? /* @__PURE__ */ r.createElement(r.Fragment, null, !o || o.length === 0 ? /* @__PURE__ */ r.createElement(A, {
     ellipsis: !0,
     id: b,
     textColor: "neutral600"
-  }, y) : null, /* @__PURE__ */ r.createElement(q, {
+  }, y) : null, /* @__PURE__ */ r.createElement(_, {
     as: "span",
     id: b
-  }, d ? d(o) : T || y, o.join(", "))) : /* @__PURE__ */ r.createElement(P, {
+  }, f ? f(o) : T || y, o.join(", "))) : /* @__PURE__ */ r.createElement(A, {
     ellipsis: !0,
     id: b,
     textColor: o ? "neutral800" : "neutral600"
-  }, d ? d(o) : T || y, i && /* @__PURE__ */ r.createElement(q, {
+  }, f ? f(o) : T || y, i && /* @__PURE__ */ r.createElement(_, {
     as: "span"
   }, o.join(", "))))), /* @__PURE__ */ r.createElement(C, null, (i && o && o.length || !i && o) && S && /* @__PURE__ */ r.createElement(Ee, {
     as: "button",
@@ -153,26 +153,26 @@ const Be = re(C)`
     "aria-hidden": !0,
     as: "button",
     type: "button",
-    onMouseDown: L,
+    onMouseDown: D,
     tabIndex: -1,
     disabled: s,
-    title: Q
+    title: K
   }, /* @__PURE__ */ r.createElement(ne, null))))), /* @__PURE__ */ r.createElement(pe, null), /* @__PURE__ */ r.createElement(ce, null)), h && /* @__PURE__ */ r.createElement(me, {
     source: R,
     spacing: 4,
     fullWidth: !0,
     intersectionId: `select-list-intersection-${n}`,
-    onReachEnd: J
+    onReachEnd: N
   }, /* @__PURE__ */ r.createElement(ue, {
     selectId: n,
-    labelledBy: m ? w : void 0,
+    labelledBy: d ? w : void 0,
     onEscape: Y,
     expanded: h,
-    onSelectItem: (t, l) => l ? F(t) : O(t, !1),
+    onSelectItem: (t, l) => l ? L(t) : O(t, !1),
     multi: i
   }, V)));
 };
-G.defaultProps = {
+z.defaultProps = {
   "aria-label": void 0,
   children: [],
   clearLabel: "Clear",
@@ -196,7 +196,7 @@ G.defaultProps = {
   startIcon: void 0,
   withTags: !1
 };
-G.propTypes = {
+z.propTypes = {
   "aria-label": e.string,
   children: e.oneOfType([e.arrayOf(e.node), e.node]),
   clearLabel: e.string,
@@ -224,5 +224,5 @@ G.propTypes = {
   withTags: e.bool
 };
 export {
-  G as Select
+  z as Select
 };

package/dist/Select/SelectTags.cjs

@@ -1,8 +1,6 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),d=require("prop-types"),i=require("styled-components"),f=require("@strapi/icons"),p=require("../Tag/Tag.cjs"),g=require("../Flex/Flex.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=s(c),t=s(d),o=s(i),T=o.default.div`
   margin-bottom: ${({theme:e})=>e.spaces[1]};
 `,m=o.default(p.Tag)`
-  position: relative;
-  z-index: 1;
   margin-left: ${({theme:e})=>e.spaces[1]};
   margin-top: ${({theme:e})=>e.spaces[1]};
-`,r=({tags:e,onRemoveTag:n,disabled:u})=>a.default.createElement(T,null,a.default.createElement(g.Flex,{wrap:"wrap"},e.map(l=>a.default.createElement(m,{icon:a.default.createElement(f.Cross,null),disabled:u,onClick:()=>n(l.value),tabIndex:-1,key:`tag-${l.value}`},l.label))));r.defaultProps={disabled:!1,tags:[]};r.propTypes={disabled:t.default.bool,onRemoveTag:t.default.func.isRequired,tags:t.default.arrayOf(t.default.shape({label:t.default.string,value:t.default.oneOfType([t.default.string,t.default.number])}))};exports.SelectTags=r;
+`,r=({tags:e,onRemoveTag:n,disabled:u})=>a.default.createElement(T,null,a.default.createElement(g.Flex,{wrap:"wrap"},e.map(l=>a.default.createElement(m,{disabled:u,key:`tag-${l.value}`,icon:a.default.createElement(f.Cross,null),onClick:()=>n(l.value),position:"relative",tabIndex:-1,zIndex:1},l.label))));r.defaultProps={disabled:!1,tags:[]};r.propTypes={disabled:t.default.bool,onRemoveTag:t.default.func.isRequired,tags:t.default.arrayOf(t.default.shape({label:t.default.string,value:t.default.oneOfType([t.default.string,t.default.number])}))};exports.SelectTags=r;

package/dist/Select/SelectTags.js

@@ -7,18 +7,18 @@ import { Flex as i } from "../Flex/Flex.js";
 const c = o.div`
   margin-bottom: ${({ theme: r }) => r.spaces[1]};
 `, f = o(m)`
-  position: relative;
-  z-index: 1;
   margin-left: ${({ theme: r }) => r.spaces[1]};
   margin-top: ${({ theme: r }) => r.spaces[1]};
 `, l = ({ tags: r, onRemoveTag: s, disabled: p }) => /* @__PURE__ */ a.createElement(c, null, /* @__PURE__ */ a.createElement(i, {
   wrap: "wrap"
 }, r.map((t) => /* @__PURE__ */ a.createElement(f, {
-  icon: /* @__PURE__ */ a.createElement(n, null),
   disabled: p,
+  key: `tag-${t.value}`,
+  icon: /* @__PURE__ */ a.createElement(n, null),
   onClick: () => s(t.value),
+  position: "relative",
   tabIndex: -1,
-  key: `tag-${t.value}`
+  zIndex: 1
 }, t.label))));
 l.defaultProps = {
   disabled: !1,

package/dist/Select/SingleSelect.cjs

@@ -0,0 +1,82 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),W=require("react"),U=require("@radix-ui/react-select"),w=require("@strapi/icons"),Y=require("styled-components"),G=require("../Field/Field.cjs"),J=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const Q=require("../Field/FieldHint.cjs"),X=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const Z=require("../Stack/Stack.cjs"),g=require("../Box/Box.cjs"),q=require("../Flex/Flex.cjs"),j=require("../Typography/Typography.cjs"),ee=require("../helpers/useId.cjs"),te=require("../hooks/useIntersection.cjs"),I=require("../themes/utils.cjs"),re=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function v(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(n,s,i.get?i:{enumerable:!0,get:()=>e[s]})}}return n.default=e,Object.freeze(n)}const h=v(W),o=v(U),c=re(Y),ne=[" ","Enter","ArrowUp","ArrowDown"],oe=({children:e,clearLabel:n="Clear",customizeContent:s=p=>p.toString(),disabled:i,error:b,hint:k,id:R,label:T,labelAction:O,onChange:$,onClear:a,onReachEnd:m,placeholder:_,required:y,selectButtonTitle:he,startIcon:S,size:B="M",value:f})=>{const p=h.useRef(null),x=h.useRef(null),d=h.useRef(null),[D,C]=h.useState(""),[E,P]=h.useState(!1),u=ee.useId(R),V=`${u}-hint`,M=`${u}-error`,N=r=>{$?$(typeof f=="number"?Number(r):r):C(r)},z=r=>{a&&!i&&(a(r),x.current.focus())},A=r=>{P(r)},H=r=>{d.current&&d.current===r.target.closest("div")&&r.preventDefault()},K=r=>{ne.includes(r.key)&&d.current&&d.current===r.target.closest("div")&&!i&&a&&(r.preventDefault(),a(r),x.current.focus())},F=`intersection-${u}`,L=r=>{m&&m(r)};te.useIntersection(p,L,{selectorToWatch:`#${F}`,skipWhen:!E});const l=typeof f<"u"?f.toString():D;return t.jsx(G.Field,{hint:k,error:b,id:u,required:y,children:t.jsxs(Z.Stack,{spacing:1,children:[t.jsx(J.FieldLabel,{action:O,children:T}),t.jsxs(o.Root,{onOpenChange:A,disabled:i,required:y,onValueChange:N,value:l,children:[t.jsxs(ie,{id:u,"aria-labelledby":`${V} ${M}`,"aria-disabled":i,$hasError:Boolean(b),$size:B,onPointerDown:H,onKeyDown:K,ref:x,children:[t.jsxs(q.Flex,{as:"span",gap:4,children:[S&&t.jsx(g.Box,{as:"span","aria-hidden":!0,children:S}),t.jsx(j.Typography,{ellipsis:!0,textColor:l?"neutral800":"neutral600",children:t.jsx(o.Value,{"aria-label":l,children:l?s(l):_})})]}),t.jsxs(q.Flex,{as:"span",gap:3,children:[l&&a?t.jsx(se,{hasRadius:!0,background:"transparent",role:"button",tabIndex:0,onClick:z,"aria-disabled":i,"aria-label":n,title:n,ref:d,children:t.jsx(w.Cross,{})}):null,t.jsx(le,{children:t.jsx(w.CarretDown,{})})]})]}),t.jsx(o.Portal,{children:t.jsx(ce,{position:"popper",sideOffset:4,children:t.jsxs(ae,{ref:p,children:[e,t.jsx(g.Box,{id:F,width:"100%",height:"1px"})]})})})]}),t.jsx(Q.FieldHint,{}),t.jsx(X.FieldError,{})]})})},se=c.default(g.Box)`
+  border: none;
+
+  svg {
+    height: ${11/16}rem;
+    width: ${11/16}rem;
+  }
+
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral600};
+  }
+`,ie=c.default(o.Trigger)`
+  position: relative;
+  border: 1px solid ${({theme:e,$hasError:n})=>n?e.colors.danger600:e.colors.neutral200};
+  padding-right: ${({theme:e})=>e.spaces[3]};
+  padding-left: ${({theme:e})=>e.spaces[3]};
+  border-radius: ${({theme:e})=>e.borderRadius};
+  background: ${({theme:e})=>e.colors.neutral0};
+  overflow: hidden;
+  min-height: ${({theme:e,$size:n})=>I.getThemeSize("input")({theme:e,size:n})};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({theme:e})=>e.spaces[4]};
+
+  &[aria-disabled='true'] {
+    color: ${e=>e.theme.colors.neutral600};
+    background: ${e=>e.theme.colors.neutral150};
+  }
+
+  /* Required to ensure the below inputFocusStyles are adhered too */
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${({theme:e,$hasError:n})=>I.inputFocusStyle()({theme:e,hasError:n})};
+`,le=c.default(o.Icon)`
+  & > svg {
+    width: ${6/16}rem;
+
+    & > path {
+      fill: ${({theme:e})=>e.colors.neutral600};
+    }
+  }
+`,ce=c.default(o.Content)`
+  background: ${({theme:e})=>e.colors.neutral0};
+  box-shadow: ${({theme:e})=>e.shadows.filterShadow};
+  border: 1px solid ${({theme:e})=>e.colors.neutral150};
+  border-radius: ${({theme:e})=>e.borderRadius};
+  width: var(--radix-select-trigger-width);
+  /* This is from the design-system figma file. */
+  max-height: 15rem;
+`,ae=c.default(o.Viewport)`
+  padding: ${({theme:e})=>e.spaces[1]};
+`,de=({children:e,startIcon:n,value:s})=>t.jsxs(ue,{textValue:e.toString(),value:s.toString(),children:[n&&t.jsx(g.Box,{as:"span",paddingRight:2,"aria-hidden":!0,children:n}),t.jsx(j.Typography,{textColor:"neutral800",children:t.jsx(o.ItemText,{children:e})})]}),ue=c.default(o.Item)`
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline-offset: -3px;
+  border-radius: ${e=>e.theme.borderRadius};
+  padding: ${e=>`${e.theme.spaces[2]} ${e.theme.spaces[4]}`};
+  padding-left: ${({theme:e})=>e.spaces[4]};
+  background-color: ${({theme:e})=>e.colors.neutral0};
+  display: flex;
+  align-items: center;
+
+  &:focus-visible {
+    outline: none;
+    background-color: ${({theme:e})=>e.colors.primary100};
+  }
+
+  &:hover {
+    background-color: ${({theme:e})=>e.colors.primary100};
+  }
+
+  &[data-state='checked'] {
+    ${j.Typography} {
+      font-weight: bold;
+      color: ${({theme:e})=>e.colors.primary600};
+    }
+  }
+`;exports.SingleSelect=oe;exports.SingleSelectOption=de;

package/dist/Select/SingleSelect.js

@@ -0,0 +1,285 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import * as h from "react";
+import * as n from "@radix-ui/react-select";
+import { Cross as H, CarretDown as M } from "@strapi/icons";
+import s from "styled-components";
+import { Field as U } from "../Field/Field.js";
+import { FieldLabel as Y } from "../Field/FieldLabel.js";
+import "../Field/FieldInput.js";
+import { FieldHint as _ } from "../Field/FieldHint.js";
+import { FieldError as G } from "../Field/FieldError.js";
+import "../Field/FieldContext.js";
+import "../Field/FieldAction.js";
+import { Stack as J } from "../Stack/Stack.js";
+import { Box as m } from "../Box/Box.js";
+import { Flex as I } from "../Flex/Flex.js";
+import { Typography as b } from "../Typography/Typography.js";
+import { useId as L } from "../helpers/useId.js";
+import { useIntersection as Q } from "../hooks/useIntersection.js";
+import { getThemeSize as X, inputFocusStyle as Z } from "../themes/utils.js";
+const ee = [" ", "Enter", "ArrowUp", "ArrowDown"], Te = ({
+  children: e,
+  clearLabel: o = "Clear",
+  customizeContent: g = (p) => p.toString(),
+  disabled: a,
+  error: w,
+  hint: k,
+  id: T,
+  label: C,
+  labelAction: D,
+  onChange: x,
+  onClear: c,
+  onReachEnd: y,
+  placeholder: E,
+  required: S,
+  selectButtonTitle: se,
+  startIcon: v,
+  size: F = "M",
+  value: f
+}) => {
+  const p = h.useRef(null), $ = h.useRef(null), d = h.useRef(null), [O, B] = h.useState(""), [V, N] = h.useState(!1), u = L(T), P = `${u}-hint`, j = `${u}-error`, z = (r) => {
+    x ? x(typeof f == "number" ? Number(r) : r) : B(r);
+  }, K = (r) => {
+    c && !a && (c(r), $.current.focus());
+  }, q = (r) => {
+    N(r);
+  }, A = (r) => {
+    d.current && d.current === r.target.closest("div") && r.preventDefault();
+  }, W = (r) => {
+    ee.includes(r.key) && d.current && d.current === r.target.closest("div") && !a && c && (r.preventDefault(), c(r), $.current.focus());
+  }, R = `intersection-${u}`;
+  Q(p, (r) => {
+    y && y(r);
+  }, {
+    selectorToWatch: `#${R}`,
+    skipWhen: !V
+  });
+  const l = typeof f < "u" ? f.toString() : O;
+  return t(U, {
+    hint: k,
+    error: w,
+    id: u,
+    required: S,
+    children: i(J, {
+      spacing: 1,
+      children: [t(Y, {
+        action: D,
+        children: C
+      }), i(n.Root, {
+        onOpenChange: q,
+        disabled: a,
+        required: S,
+        onValueChange: z,
+        value: l,
+        children: [i(te, {
+          id: u,
+          "aria-labelledby": `${P} ${j}`,
+          "aria-disabled": a,
+          $hasError: Boolean(w),
+          $size: F,
+          onPointerDown: A,
+          onKeyDown: W,
+          ref: $,
+          children: [i(I, {
+            as: "span",
+            gap: 4,
+            children: [v && t(m, {
+              as: "span",
+              "aria-hidden": !0,
+              children: v
+            }), t(b, {
+              ellipsis: !0,
+              textColor: l ? "neutral800" : "neutral600",
+              children: t(n.Value, {
+                "aria-label": l,
+                children: l ? g(l) : E
+              })
+            })]
+          }), i(I, {
+            as: "span",
+            gap: 3,
+            children: [l && c ? t(re, {
+              hasRadius: !0,
+              background: "transparent",
+              role: "button",
+              tabIndex: 0,
+              onClick: K,
+              "aria-disabled": a,
+              "aria-label": o,
+              title: o,
+              ref: d,
+              children: t(H, {})
+            }) : null, t(oe, {
+              children: t(M, {})
+            })]
+          })]
+        }), t(n.Portal, {
+          children: t(ne, {
+            position: "popper",
+            sideOffset: 4,
+            children: i(ie, {
+              ref: p,
+              children: [e, t(m, {
+                id: R,
+                width: "100%",
+                height: "1px"
+              })]
+            })
+          })
+        })]
+      }), t(_, {}), t(G, {})]
+    })
+  });
+}, re = s(m)`
+  border: none;
+
+  svg {
+    height: ${11 / 16}rem;
+    width: ${11 / 16}rem;
+  }
+
+  svg path {
+    fill: ${({
+  theme: e
+}) => e.colors.neutral600};
+  }
+`, te = s(n.Trigger)`
+  position: relative;
+  border: 1px solid ${({
+  theme: e,
+  $hasError: o
+}) => o ? e.colors.danger600 : e.colors.neutral200};
+  padding-right: ${({
+  theme: e
+}) => e.spaces[3]};
+  padding-left: ${({
+  theme: e
+}) => e.spaces[3]};
+  border-radius: ${({
+  theme: e
+}) => e.borderRadius};
+  background: ${({
+  theme: e
+}) => e.colors.neutral0};
+  overflow: hidden;
+  min-height: ${({
+  theme: e,
+  $size: o
+}) => X("input")({
+  theme: e,
+  size: o
+})};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({
+  theme: e
+}) => e.spaces[4]};
+
+  &[aria-disabled='true'] {
+    color: ${(e) => e.theme.colors.neutral600};
+    background: ${(e) => e.theme.colors.neutral150};
+  }
+
+  /* Required to ensure the below inputFocusStyles are adhered too */
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${({
+  theme: e,
+  $hasError: o
+}) => Z()({
+  theme: e,
+  hasError: o
+})};
+`, oe = s(n.Icon)`
+  & > svg {
+    width: ${6 / 16}rem;
+
+    & > path {
+      fill: ${({
+  theme: e
+}) => e.colors.neutral600};
+    }
+  }
+`, ne = s(n.Content)`
+  background: ${({
+  theme: e
+}) => e.colors.neutral0};
+  box-shadow: ${({
+  theme: e
+}) => e.shadows.filterShadow};
+  border: 1px solid ${({
+  theme: e
+}) => e.colors.neutral150};
+  border-radius: ${({
+  theme: e
+}) => e.borderRadius};
+  width: var(--radix-select-trigger-width);
+  /* This is from the design-system figma file. */
+  max-height: 15rem;
+`, ie = s(n.Viewport)`
+  padding: ${({
+  theme: e
+}) => e.spaces[1]};
+`, Ce = ({
+  children: e,
+  startIcon: o,
+  value: g
+}) => i(le, {
+  textValue: e.toString(),
+  value: g.toString(),
+  children: [o && t(m, {
+    as: "span",
+    paddingRight: 2,
+    "aria-hidden": !0,
+    children: o
+  }), t(b, {
+    textColor: "neutral800",
+    children: t(n.ItemText, {
+      children: e
+    })
+  })]
+}), le = s(n.Item)`
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline-offset: -3px;
+  border-radius: ${(e) => e.theme.borderRadius};
+  padding: ${(e) => `${e.theme.spaces[2]} ${e.theme.spaces[4]}`};
+  padding-left: ${({
+  theme: e
+}) => e.spaces[4]};
+  background-color: ${({
+  theme: e
+}) => e.colors.neutral0};
+  display: flex;
+  align-items: center;
+
+  &:focus-visible {
+    outline: none;
+    background-color: ${({
+  theme: e
+}) => e.colors.primary100};
+  }
+
+  &:hover {
+    background-color: ${({
+  theme: e
+}) => e.colors.primary100};
+  }
+
+  &[data-state='checked'] {
+    ${b} {
+      font-weight: bold;
+      color: ${({
+  theme: e
+}) => e.colors.primary600};
+    }
+  }
+`;
+export {
+  Te as SingleSelect,
+  Ce as SingleSelectOption
+};

package/dist/SimpleMenu/SimpleMenu.cjs

@@ -32,4 +32,4 @@
   }
 `,ne=E.default(j.Button)`
   padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
-`,I=({children:e,onClick:h,to:u,isFocused:l,href:c,...x})=>{const i=a.useRef();a.useEffect(()=>{l&&i.current&&i.current.focus()},[l]);const d={tabIndex:l?0:-1,ref:i,role:"menuitem",...x},f=v=>{(v.key===s.KeyboardKeys.SPACE||v.key===s.KeyboardKeys.ENTER)&&h()};return u&&!c?o.default.createElement(Z,{to:u,...d},o.default.createElement(b.Box,{padding:2},o.default.createElement(T.Typography,null,e))):c&&!u?o.default.createElement(ee,{isExternal:!0,href:c,...d},o.default.createElement(b.Box,{padding:2},o.default.createElement(T.Typography,null,e))):o.default.createElement(Y,{onKeyDown:f,onMouseDown:h,type:"button",...d},o.default.createElement(b.Box,{padding:2},o.default.createElement(T.Typography,null,e)))};I.defaultProps={as:void 0,href:void 0,isFocused:!1,onClick(){},to:void 0};I.propTypes={as:t.default.elementType,children:t.default.node.isRequired,href:t.default.string,isFocused:t.default.bool,onClick:t.default.func,to:t.default.string};const g=({label:e,children:h,id:u,as:l,onOpen:c=()=>{},onClose:x=()=>{},size:i,popoverPlacement:d,onReachEnd:f,...v})=>{const p=a.useRef(),K=X.useId("simplemenu",u),R=a.useRef(!1),[y,m]=a.useState(!1),[P,C]=a.useState(0),k=a.Children.toArray(h),L=i==="S"?ne:j.Button,_=l||L,O=!!f&&typeof f=="function";a.useEffect(()=>{if(["string","number"].includes(typeof e)){const n=k.findIndex(r=>r.props.children===e);n!==-1&&C(n)}},[e]);const S=M.useCallbackRef(c),D=M.useCallbackRef(x);a.useEffect(()=>{R?.current?y?S():D():R.current=!0},[R,D,S,y]),a.useEffect(()=>{o.default.isValidElement(e)&&P===-1&&p.current.focus()},[e,P]);const $=n=>{y&&(n.key===s.KeyboardKeys.ESCAPE&&(n.stopPropagation(),m(!1),p.current.focus()),n.key===s.KeyboardKeys.DOWN&&C(r=>r===k.length-1?0:r+1),n.key===s.KeyboardKeys.UP&&C(r=>r===0?k.length-1:r-1))},F=n=>{(n.key===s.KeyboardKeys.ENTER||n.key===s.KeyboardKeys.SPACE)&&m(r=>!r)},A=n=>{n.preventDefault(),n.currentTarget.contains(n.relatedTarget)||m(!1)},N=n=>{n.preventDefault(),m(r=>!r)},V=()=>{O&&f()},W=k.map((n,r)=>o.default.createElement(Q.Flex,{as:"li",key:r,justifyContent:"center",role:"menuitem"},a.cloneElement(n,{onClick(){n.props.onClick(),m(!1),p.current.focus()},isFocused:P===r})));return o.default.createElement("div",{onKeyDown:$},o.default.createElement(_,{label:o.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":y,"aria-controls":K,onKeyDown:F,onMouseDown:N,ref:p,type:"button",variant:"ghost",endIcon:o.default.createElement(te,null,o.default.createElement(G.CarretDown,{"aria-hidden":!0})),...v},e),y&&o.default.createElement(w.Popover,{onBlur:A,placement:d,source:p,onReachEnd:V,intersectionId:O?`popover-${K}`:void 0,spacing:4},o.default.createElement(b.Box,{role:"menu",as:"ul",padding:1,id:K},W)))};g.defaultProps={as:void 0};g.displayName="SimpleMenu";g.defaultProps={id:void 0,onOpen:void 0,onClose:void 0,onReachEnd:void 0,popoverPlacement:"bottom-start",size:"M"};g.propTypes={as:t.default.any,children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,id:t.default.string,label:t.default.oneOfType([t.default.string,t.default.number,t.default.element]).isRequired,onClose:t.default.func,onOpen:t.default.func,onReachEnd:t.default.func,popoverPlacement:t.default.oneOf(w.POPOVER_PLACEMENTS),size:t.default.oneOf(["S","M"])};exports.MenuItem=I;exports.SimpleMenu=g;
+`,I=({children:e,onClick:h,to:u,isFocused:l,href:c,...x})=>{const d=a.useRef();a.useEffect(()=>{l&&d.current&&d.current.focus()},[l]);const i={tabIndex:l?0:-1,ref:d,role:"menuitem",...x},f=v=>{(v.key===s.KeyboardKeys.SPACE||v.key===s.KeyboardKeys.ENTER)&&h()};return u&&!c?o.default.createElement(Z,{to:u,...i},o.default.createElement(b.Box,{padding:2},o.default.createElement(T.Typography,null,e))):c&&!u?o.default.createElement(ee,{isExternal:!0,href:c,...i},o.default.createElement(b.Box,{padding:2},o.default.createElement(T.Typography,null,e))):o.default.createElement(Y,{onKeyDown:f,onMouseDown:h,type:"button",...i},o.default.createElement(b.Box,{padding:2},o.default.createElement(T.Typography,null,e)))};I.defaultProps={as:void 0,href:void 0,isFocused:!1,onClick(){},to:void 0};I.propTypes={as:t.default.elementType,children:t.default.node.isRequired,href:t.default.string,isFocused:t.default.bool,onClick:t.default.func,to:t.default.string};const g=({label:e,children:h,id:u,as:l,onOpen:c=()=>{},onClose:x=()=>{},size:d,popoverPlacement:i,onReachEnd:f,...v})=>{const p=a.useRef(),K=X.useId(u),R=a.useRef(!1),[y,m]=a.useState(!1),[P,C]=a.useState(0),k=a.Children.toArray(h),L=d==="S"?ne:j.Button,_=l||L,O=!!f&&typeof f=="function";a.useEffect(()=>{if(["string","number"].includes(typeof e)){const n=k.findIndex(r=>r.props.children===e);n!==-1&&C(n)}},[e]);const S=M.useCallbackRef(c),D=M.useCallbackRef(x);a.useEffect(()=>{R?.current?y?S():D():R.current=!0},[R,D,S,y]),a.useEffect(()=>{o.default.isValidElement(e)&&P===-1&&p.current.focus()},[e,P]);const $=n=>{y&&(n.key===s.KeyboardKeys.ESCAPE&&(n.stopPropagation(),m(!1),p.current.focus()),n.key===s.KeyboardKeys.DOWN&&C(r=>r===k.length-1?0:r+1),n.key===s.KeyboardKeys.UP&&C(r=>r===0?k.length-1:r-1))},F=n=>{(n.key===s.KeyboardKeys.ENTER||n.key===s.KeyboardKeys.SPACE)&&m(r=>!r)},A=n=>{n.preventDefault(),n.currentTarget.contains(n.relatedTarget)||m(!1)},N=n=>{n.preventDefault(),m(r=>!r)},V=()=>{O&&f()},W=k.map((n,r)=>o.default.createElement(Q.Flex,{as:"li",key:r,justifyContent:"center",role:"menuitem"},a.cloneElement(n,{onClick(){n.props.onClick(),m(!1),p.current.focus()},isFocused:P===r})));return o.default.createElement("div",{onKeyDown:$},o.default.createElement(_,{label:o.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":y,"aria-controls":K,onKeyDown:F,onMouseDown:N,ref:p,type:"button",variant:"ghost",endIcon:o.default.createElement(te,null,o.default.createElement(G.CarretDown,{"aria-hidden":!0})),...v},e),y&&o.default.createElement(w.Popover,{onBlur:A,placement:i,source:p,onReachEnd:V,intersectionId:O?`popover-${K}`:void 0,spacing:4},o.default.createElement(b.Box,{role:"menu",as:"ul",padding:1,id:K},W)))};g.defaultProps={as:void 0};g.displayName="SimpleMenu";g.defaultProps={id:void 0,onOpen:void 0,onClose:void 0,onReachEnd:void 0,popoverPlacement:"bottom-start",size:"M"};g.propTypes={as:t.default.any,children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,id:t.default.string,label:t.default.oneOfType([t.default.string,t.default.number,t.default.element]).isRequired,onClose:t.default.func,onOpen:t.default.func,onReachEnd:t.default.func,popoverPlacement:t.default.oneOf(w.POPOVER_PLACEMENTS),size:t.default.oneOf(["S","M"])};exports.MenuItem=I;exports.SimpleMenu=g;