@persona/design-system 0.10.11 → 0.10.13

package/dist/{Checkbox-C3z7UUSC.mjs.map → Checkbox-BAh-wF_F.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-C3z7UUSC.mjs","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\n\nimport useFormField from '#src/components/FormControl/useFormField';\nimport Stack from '#src/components/Stack/Stack';\nimport Tooltip from '#src/components/Tooltip';\nimport { TextWithDashedUnderline } from '#src/components/Tooltip/TextUnderlineTooltip';\nimport { opacityOf } from '#src/lib/color';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from '#src/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport useControlled from '#src/lib/useControlled';\nimport { focusStyle } from '#src/mixins/focus';\nimport { TransitionDuration, TransitionEasing } from '#src/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  position: relative;\n  cursor: pointer;\n\n  flex-wrap: nowrap;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 16px;\n  justify-content: center;\n  align-items: center;\n  transition:\n    box-shadow ${TransitionDuration.Fast} ${TransitionEasing.Move},\n    background-color ${TransitionDuration.Fast} ${TransitionEasing.Move},\n    border-color ${TransitionDuration.Fast} ${TransitionEasing.Move};\n  border-radius: 3px;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  box-sizing: border-box;\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'InputBorderStrong', Color.BorderInputCheckbox)};\n  background: ${({ theme }) => semanticColor(theme, 'InputSurfaceDefault', Color.BackgroundInputDefault)};\n\n  svg {\n    color: ${({ theme }) => semanticColor(theme, 'FgInverseStatic', Color.BorderIconInverse)};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${({ theme }) =>\n      semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)};\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)};\n    ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n  }\n\n  ${({ checked, theme }) =>\n    checked &&\n    css`\n      border-color: ${semanticColor(theme, 'InputBorderAccent', Color.BackgroundInputActive)};\n      background: ${semanticColor(theme, 'InputSurfaceAccent', Color.BackgroundInputActive)};\n\n      &${isDisabled} {\n        border-color: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n        background: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n      }\n    `}\n`;\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 16px;\n  width: 16px;\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n\n  &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderHoverStrong', Color.BorderInputCheckboxHover)};\n    ${semanticOnly((tokens) => `background: ${tokens.InputSurfaceHover};`)}\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n      border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n    ${focusStyle}\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n\n          /** Nudge text for visual alignment */\n          position: relative;\n          bottom: -1px;\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {\n  /**\n   * `id` for the underlying `<input>`. If not provided a unique ID is generated\n   * automatically and linked to the label.\n   */\n  id?: string;\n  /** Called whenever the checked state changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Visible label rendered to the right of the checkbox box. */\n  label?: ReactNode;\n  /** Disables interaction and renders the checkbox in a muted style. */\n  disabled?: boolean;\n  /**\n   * When true the checkbox displays a dash (−) instead of a tick, indicating a\n   * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n   */\n  indeterminate?: boolean;\n  /**\n   * Controlled checked state. Omit (or pass `undefined`) to let the component\n   * manage state internally via `defaultChecked`.\n   */\n  checked?: boolean;\n  /** Value submitted with a form. */\n  value?: unknown;\n  'data-test'?: string;\n  /** Additional props forwarded to the outer container `<div>`. */\n  containerProps?: ComponentPropsWithoutRef<'div'>;\n  /**\n   * Size of the checkbox and its label text.\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n  /**\n   * Tooltip content to display when hovering over the label.\n   * When provided, the label will be wrapped in a tooltip.\n   */\n  tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className,\n    disabled,\n    indeterminate,\n    onChange,\n    checked: checkedProp,\n    defaultChecked,\n    id,\n    label,\n    'data-test': dataTest,\n    containerProps,\n    value,\n    size = 'md',\n    tooltip,\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const [checked, setChecked] = useControlled({\n    controlledValue: checkedProp,\n    default: defaultChecked,\n  });\n  const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n  const inputRef = useRef<HTMLInputElement>();\n\n  // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n  const inputId = field.inputId || id || generatedId;\n\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  // Re-sync on `checked` changes too: a native click clears the input's\n  // `indeterminate` property, so it must be re-applied when the prop stays true.\n  useEffect(() => {\n    if (inputRef.current) {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, checked, inputRef]);\n\n  return (\n    <Container\n      direction='horizontal'\n      className={className}\n      data-test={dataTest}\n      disabled={field.disabled}\n      align='center'\n      size={size}\n      {...containerProps}\n    >\n      <CheckboxInput\n        id={inputId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={inputRef}\n        data-test={dataTest && `${dataTest}-input`}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={checkedProp == null ? undefined : checked}\n        defaultChecked={defaultChecked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          if (onChange) {\n            onChange(e);\n          }\n        }}\n        aria-checked={indeterminate ? 'mixed' : undefined}\n        value={value as unknown as string}\n        {...elemProps}\n      />\n      <CheckboxBox\n        aria-hidden='true'\n        disabled={field.disabled}\n        checked={(checked != null && checked) || indeterminate}\n      >\n        {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n      </CheckboxBox>\n      {label &&\n        (tooltip ? (\n          <Tooltip\n            size={size}\n            trigger={\n              <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n                <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n              </Label>\n            }\n          >\n            {tooltip}\n          </Tooltip>\n        ) : (\n          <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n            {label}\n          </Label>\n        ))}\n    </Container>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;;AAkCA,MAAM,YAAY,OAAO,MAAM;;;;;;KAM1B,EAAE,WACH,SAAS,QACT,GAAG;;MAED;;KAED,WAAW;;;;AAKhB,MAAM,cAAc,OAAO,GAA8C;;;;;;;yBAOhC,GAAA,+BAAyB;+BACnB,GAAA,+BAAyB;2BAC7B,GAAA,+BAAyB;;YAExD,QAAQ,GAAG;WACZ,QAAQ,GAAG;;uBAEC,EAAE,YAAY,cAAc,OAAO,qBAAqB,MAAM,oBAAoB,CAAC;iBACzF,EAAE,YAAY,cAAc,OAAO,uBAAuB,MAAM,uBAAuB,CAAC;;;cAG3F,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,kBAAkB,CAAC;;;KAGxF,WAAW;;mBAEG,EAAE,YACf,cAAc,OAAO,wBAAwB,MAAM,wBAAwB,CAAC;qBAC7D,EAAE,YACjB,cAAc,OAAO,uBAAuB,MAAM,oBAAoB,CAAC;MACvE,cAAc,WAAW,YAAY,UAAU,OAAO,UAAU,CAAC,GAAG,CAAC;;;KAGtE,EAAE,SAAS,YACZ,WACA,GAAG;sBACe,cAAc,OAAO,qBAAqB,MAAM,sBAAsB,CAAC;oBACzE,cAAc,OAAO,sBAAsB,MAAM,sBAAsB,CAAC;;SAEnF,WAAW;wBACI,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;sBAC1F,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;;MAExG;;AAGN,MAAM,gBAAgB,OAAO,KAAK;;;;;;;;;;KAU7B,YAAY,cAAc,KAAK,YAAY;qBAC3B,EAAE,YACjB,cAAc,OAAO,0BAA0B,MAAM,yBAAyB,CAAC;MAC/E,cAAc,WAAW,eAAe,OAAO,kBAAkB,GAAG,CAAC;;;KAGtE,UAAU,KAAK,gBAAgB;OAC7B,YAAY,cAAc,KAAK,YAAY;qBAC7B,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;uBAC9F,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;;;;KAIlH,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;AAIjB,MAAM,QAAQ,OAAO,KAA+C;;YAExD,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,YAAY,CAAC;;KAE1E,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;;;;;UAKxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;MACvE;;AA0CN,MAAa,WAAW,WAA4C,SAAS,SAC3E,EACE,WACA,UACA,eACA,UACA,SAAS,aACT,gBACA,IACA,OACA,aAAa,UACb,gBACA,OACA,OAAO,MACP,SACA,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,CAAC,SAAS,cAAc,cAAc;EAC1C,iBAAiB;EACjB,SAAS;EACV,CAAC;CACF,MAAM,cAAc,cAAc,SAAS,iBAAiB,EAAE,EAAE,CAAC;CACjE,MAAM,WAAW,QAA0B;CAG3C,MAAM,UAAU,MAAM,WAAW,MAAM;AAGvC,qBAAoB,WAAW,SAAS,SAAS,CAAC,SAAS,CAAC;AAI5D,iBAAgB;AACd,MAAI,SAAS,QAEX,UAAS,QAAQ,gBAAgB;IAElC;EAAC;EAAe;EAAS;EAAS,CAAC;AAEtC,QACE,qBAAC,WAAD;EACE,WAAU;EACC;EACX,aAAW;EACX,UAAU,MAAM;EAChB,OAAM;EACA;EACN,GAAI;YAPN;GASE,oBAAC,eAAD;IACE,IAAI;IAEJ,KAAK;IACL,aAAW,YAAY,GAAG,SAAS;IACnC,UAAU,MAAM;IAChB,MAAK;IACL,SAAS,eAAe,OAAO,KAAA,IAAY;IAC3B;IAChB,WAAW,MAAM;AACf,gBAAW,EAAE,OAAO,QAAQ;AAC5B,SAAI,SACF,UAAS,EAAE;;IAGf,gBAAc,gBAAgB,UAAU,KAAA;IACjC;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD;IACE,eAAY;IACZ,UAAU,MAAM;IAChB,SAAU,WAAW,QAAQ,WAAY;cAExC,gBAAgB,oBAAC,eAAD,EAAiB,CAAA,GAAG,UAAU,oBAAC,gBAAD,EAAkB,CAAA,GAAG;IACxD,CAAA;GACb,UACE,UACC,oBAAC,SAAD;IACQ;IACN,SACE,oBAAC,OAAD;KAAO,SAAS;KAAS,UAAU,CAAC,CAAC,MAAM;KAAgB;eACzD,oBAAC,yBAAD,EAAA,UAA0B,OAAgC,CAAA;KACpD,CAAA;cAGT;IACO,CAAA,GAEV,oBAAC,OAAD;IAAO,SAAS;IAAS,UAAU,CAAC,CAAC,MAAM;IAAgB;cACxD;IACK,CAAA;GAEF;;EAEd"}
+{"version":3,"file":"Checkbox-BAh-wF_F.mjs","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { InputCheckIcon, InputDashIcon } from '@persona/icons';\n\nimport useFormField from '#src/components/FormControl/useFormField';\nimport Stack from '#src/components/Stack/Stack';\nimport Tooltip from '#src/components/Tooltip';\nimport { TextWithDashedUnderline } from '#src/components/Tooltip/TextUnderlineTooltip';\nimport { opacityOf } from '#src/lib/color';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isIndeterminate,\n  isNotDisabled,\n} from '#src/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport useControlled from '#src/lib/useControlled';\nimport { focusStyle } from '#src/mixins/focus';\nimport { TransitionDuration, TransitionEasing } from '#src/variables/transitions';\n\nconst Container = styled(Stack)<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  position: relative;\n  cursor: pointer;\n\n  flex-wrap: nowrap;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst CheckboxBox = styled.div<{ disabled?: boolean; checked?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 16px;\n  justify-content: center;\n  align-items: center;\n  transition:\n    box-shadow ${TransitionDuration.Fast} ${TransitionEasing.Move},\n    background-color ${TransitionDuration.Fast} ${TransitionEasing.Move},\n    border-color ${TransitionDuration.Fast} ${TransitionEasing.Move};\n  border-radius: 3px;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  box-sizing: border-box;\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'InputBorderStrong', Color.BorderInputCheckbox)};\n  background: ${({ theme }) => semanticColor(theme, 'InputSurfaceDefault', Color.BackgroundInputDefault)};\n\n  svg {\n    color: ${({ theme }) => semanticColor(theme, 'FgInverseStatic', Color.BorderIconInverse)};\n  }\n\n  &${isDisabled} {\n    cursor: default;\n    background: ${({ theme }) =>\n      semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)};\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)};\n    ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n  }\n\n  ${({ checked, theme }) =>\n    checked &&\n    css`\n      border-color: ${semanticColor(theme, 'InputBorderAccent', Color.BackgroundInputActive)};\n      background: ${semanticColor(theme, 'InputSurfaceAccent', Color.BackgroundInputActive)};\n\n      &${isDisabled} {\n        border-color: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n        background: ${semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n      }\n    `}\n`;\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 16px;\n  width: 16px;\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n\n  &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderHoverStrong', Color.BorderInputCheckboxHover)};\n    ${semanticOnly((tokens) => `background: ${tokens.InputSurfaceHover};`)}\n  }\n\n  &${isChecked}, &${isIndeterminate} {\n    &${isHovered}${isNotDisabled} ~ ${CheckboxBox} {\n      background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n      border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${CheckboxBox} {\n    ${focusStyle}\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n\n          /** Nudge text for visual alignment */\n          position: relative;\n          bottom: -1px;\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    `}\n`;\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'size'> {\n  /**\n   * `id` for the underlying `<input>`. If not provided a unique ID is generated\n   * automatically and linked to the label.\n   */\n  id?: string;\n  /** Called whenever the checked state changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Visible label rendered to the right of the checkbox box. */\n  label?: ReactNode;\n  /** Disables interaction and renders the checkbox in a muted style. */\n  disabled?: boolean;\n  /**\n   * When true the checkbox displays a dash (−) instead of a tick, indicating a\n   * mixed / partially-selected state. Sets `aria-checked=\"mixed\"` for screen readers.\n   */\n  indeterminate?: boolean;\n  /**\n   * Controlled checked state. Omit (or pass `undefined`) to let the component\n   * manage state internally via `defaultChecked`.\n   */\n  checked?: boolean;\n  /** Value submitted with a form. */\n  value?: unknown;\n  'data-test'?: string;\n  /** Additional props forwarded to the outer container `<div>`. */\n  containerProps?: ComponentPropsWithoutRef<'div'>;\n  /**\n   * Size of the checkbox and its label text.\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n  /**\n   * Tooltip content to display when hovering over the label.\n   * When provided, the label will be wrapped in a tooltip.\n   */\n  tooltip?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    className,\n    disabled,\n    indeterminate,\n    onChange,\n    checked: checkedProp,\n    defaultChecked,\n    id,\n    label,\n    'data-test': dataTest,\n    containerProps,\n    value,\n    size = 'md',\n    tooltip,\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const [checked, setChecked] = useControlled({\n    controlledValue: checkedProp,\n    default: defaultChecked,\n  });\n  const generatedId = useMemo(() => uniqueId('pds_checkbox__'), []);\n  const inputRef = useRef<HTMLInputElement>();\n\n  // Use the inputId from FormControl context if available, otherwise use the provided id or generate one\n  const inputId = field.inputId || id || generatedId;\n\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  // Re-sync on `checked` changes too: a native click clears the input's\n  // `indeterminate` property, so it must be re-applied when the prop stays true.\n  useEffect(() => {\n    if (inputRef.current) {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, checked, inputRef]);\n\n  return (\n    <Container\n      direction='horizontal'\n      className={className}\n      data-test={dataTest}\n      disabled={field.disabled}\n      align='center'\n      size={size}\n      {...containerProps}\n    >\n      <CheckboxInput\n        id={inputId}\n        /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n        ref={inputRef}\n        data-test={dataTest && `${dataTest}-input`}\n        disabled={field.disabled}\n        type='checkbox'\n        checked={checkedProp == null ? undefined : checked}\n        defaultChecked={defaultChecked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          if (onChange) {\n            onChange(e);\n          }\n        }}\n        aria-checked={indeterminate ? 'mixed' : undefined}\n        value={value as unknown as string}\n        {...elemProps}\n      />\n      <CheckboxBox\n        aria-hidden='true'\n        disabled={field.disabled}\n        checked={(checked != null && checked) || indeterminate}\n      >\n        {indeterminate ? <InputDashIcon /> : checked ? <InputCheckIcon /> : null}\n      </CheckboxBox>\n      {label &&\n        (tooltip ? (\n          <Tooltip\n            size={size}\n            trigger={\n              <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n                <TextWithDashedUnderline>{label}</TextWithDashedUnderline>\n              </Label>\n            }\n          >\n            {tooltip}\n          </Tooltip>\n        ) : (\n          <Label htmlFor={inputId} disabled={!!field.disabled} size={size}>\n            {label}\n          </Label>\n        ))}\n    </Container>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;;AAkCA,MAAM,YAAY,OAAO,MAAM;;;;;;KAM1B,EAAE,WACH,SAAS,QACT,GAAG;;MAED;;KAED,WAAW;;;;AAKhB,MAAM,cAAc,OAAO,GAA8C;;;;;;;yBAOhC,GAAA,+BAAyB;+BACnB,GAAA,+BAAyB;2BAC7B,GAAA,+BAAyB;;YAExD,QAAQ,GAAG;WACZ,QAAQ,GAAG;;uBAEC,EAAE,YAAY,cAAc,OAAO,qBAAqB,MAAM,oBAAoB,CAAC;iBACzF,EAAE,YAAY,cAAc,OAAO,uBAAuB,MAAM,uBAAuB,CAAC;;;cAG3F,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,kBAAkB,CAAC;;;KAGxF,WAAW;;mBAEG,EAAE,YACf,cAAc,OAAO,wBAAwB,MAAM,wBAAwB,CAAC;qBAC7D,EAAE,YACjB,cAAc,OAAO,uBAAuB,MAAM,oBAAoB,CAAC;MACvE,cAAc,WAAW,YAAY,UAAU,OAAO,UAAU,CAAC,GAAG,CAAC;;;KAGtE,EAAE,SAAS,YACZ,WACA,GAAG;sBACe,cAAc,OAAO,qBAAqB,MAAM,sBAAsB,CAAC;oBACzE,cAAc,OAAO,sBAAsB,MAAM,sBAAsB,CAAC;;SAEnF,WAAW;wBACI,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;sBAC1F,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;;MAExG;;AAGN,MAAM,gBAAgB,OAAO,KAAK;;;;;;;;;;KAU7B,YAAY,cAAc,KAAK,YAAY;qBAC3B,EAAE,YACjB,cAAc,OAAO,0BAA0B,MAAM,yBAAyB,CAAC;MAC/E,cAAc,WAAW,eAAe,OAAO,kBAAkB,GAAG,CAAC;;;KAGtE,UAAU,KAAK,gBAAgB;OAC7B,YAAY,cAAc,KAAK,YAAY;qBAC7B,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;uBAC9F,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;;;;KAIlH,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;AAIjB,MAAM,QAAQ,OAAO,KAA+C;;YAExD,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,YAAY,CAAC;;KAE1E,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;;;;;UAKxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;MACvE;;AA0CN,MAAa,WAAW,WAA4C,SAAS,SAC3E,EACE,WACA,UACA,eACA,UACA,SAAS,aACT,gBACA,IACA,OACA,aAAa,UACb,gBACA,OACA,OAAO,MACP,SACA,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,CAAC,SAAS,cAAc,cAAc;EAC1C,iBAAiB;EACjB,SAAS;EACV,CAAC;CACF,MAAM,cAAc,cAAc,SAAS,iBAAiB,EAAE,EAAE,CAAC;CACjE,MAAM,WAAW,QAA0B;CAG3C,MAAM,UAAU,MAAM,WAAW,MAAM;AAGvC,qBAAoB,WAAW,SAAS,SAAS,CAAC,SAAS,CAAC;AAI5D,iBAAgB;AACd,MAAI,SAAS,QAEX,UAAS,QAAQ,gBAAgB;IAElC;EAAC;EAAe;EAAS;EAAS,CAAC;AAEtC,QACE,qBAAC,WAAD;EACE,WAAU;EACC;EACX,aAAW;EACX,UAAU,MAAM;EAChB,OAAM;EACA;EACN,GAAI;YAPN;GASE,oBAAC,eAAD;IACE,IAAI;IAEJ,KAAK;IACL,aAAW,YAAY,GAAG,SAAS;IACnC,UAAU,MAAM;IAChB,MAAK;IACL,SAAS,eAAe,OAAO,KAAA,IAAY;IAC3B;IAChB,WAAW,MAAM;AACf,gBAAW,EAAE,OAAO,QAAQ;AAC5B,SAAI,SACF,UAAS,EAAE;;IAGf,gBAAc,gBAAgB,UAAU,KAAA;IACjC;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD;IACE,eAAY;IACZ,UAAU,MAAM;IAChB,SAAU,WAAW,QAAQ,WAAY;cAExC,gBAAgB,oBAAC,eAAD,EAAiB,CAAA,GAAG,UAAU,oBAAC,gBAAD,EAAkB,CAAA,GAAG;IACxD,CAAA;GACb,UACE,UACC,oBAAC,SAAD;IACQ;IACN,SACE,oBAAC,OAAD;KAAO,SAAS;KAAS,UAAU,CAAC,CAAC,MAAM;KAAgB;eACzD,oBAAC,yBAAD,EAAA,UAA0B,OAAgC,CAAA;KACpD,CAAA;cAGT;IACO,CAAA,GAEV,oBAAC,OAAD;IAAO,SAAS;IAAS,UAAU,CAAC,CAAC,MAAM;IAAgB;cACxD;IACK,CAAA;GAEF;;EAEd"}

package/dist/{CheckboxGroupField-BT87OVOF.d.mts → CheckboxGroupField-BW_BcW3L.d.mts}

@@ -1,5 +1,5 @@
 import { n as CheckboxProps } from "./Checkbox-Clt9mCTk.mjs";
-import { o as ImplementsFormField } from "./inputFields-BqO2H-Kj.mjs";
+import { o as ImplementsFormField } from "./inputFields-Dobwb4kT.mjs";
 import { ReactElement } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { AriaCheckboxGroupProps } from "react-aria";
@@ -22,4 +22,4 @@ declare const CheckboxGroupField: ({
 }: CheckboxGroupFieldProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { CheckboxGroupField as t };
-//# sourceMappingURL=CheckboxGroupField-BT87OVOF.d.mts.map
+//# sourceMappingURL=CheckboxGroupField-BW_BcW3L.d.mts.map

package/dist/CheckboxGroupField.d.mts

@@ -1,2 +1,2 @@
-import { t as CheckboxGroupField } from "./CheckboxGroupField-BT87OVOF.mjs";
+import { t as CheckboxGroupField } from "./CheckboxGroupField-BW_BcW3L.mjs";
 export { CheckboxGroupField as default };

package/dist/{Combobox-aOJDTjzC.d.mts → Combobox-DgYwerwd.d.mts}

@@ -1,5 +1,5 @@
-import { n as ComboboxMultiSelectProps, r as ComboboxServerMultiSelectProps } from "./ComboboxMultiSelect-DJyAv0Eg.mjs";
-import { r as ComboboxSingleSelectProps, t as ComboboxServerSingleSelectProps } from "./ComboboxSingleSelect-CP8-HLKl.mjs";
+import { n as ComboboxMultiSelectProps, r as ComboboxServerMultiSelectProps } from "./ComboboxMultiSelect-DsoIMJiZ.mjs";
+import { r as ComboboxSingleSelectProps, t as ComboboxServerSingleSelectProps } from "./ComboboxSingleSelect-CKsqOAGB.mjs";
 
 //#region src/components/Combobox/Combobox.d.ts
 type ComboboxProps<T = string> = ComboboxSingleSelectProps<T> | ComboboxMultiSelectProps<T>;
@@ -9,4 +9,4 @@ declare const Combobox: <T = string>(props: (ComboboxProps<T> | ComboboxServerPr
 }) => React.ReactElement;
 //#endregion
 export { ComboboxProps as n, ComboboxServerProps as r, Combobox as t };
-//# sourceMappingURL=Combobox-aOJDTjzC.d.mts.map
+//# sourceMappingURL=Combobox-DgYwerwd.d.mts.map

package/dist/{Combobox-BkK_tosd.mjs → Combobox-DmFQ5cAy.mjs}

@@ -1,23 +1,23 @@
 import { a as styled, r as css } from "./styledComponentsInterop-Cs5CCPRy.mjs";
-import { isDisabled, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { semanticColor } from "./lib/semanticColor.mjs";
-import { focusStyle } from "./mixins/focus.mjs";
-import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { i as Paragraph } from "./Text-D0vEReED.mjs";
-import { a as Tooltip } from "./Tooltip-C2VB8I6y.mjs";
+import { a as Tooltip } from "./Tooltip-CVBxc1yf.mjs";
+import { isDisabled, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { useOutsideClick } from "./lib/useOutsideClick.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
+import { focusStyle } from "./mixins/focus.mjs";
+import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { n as Stack } from "./Stack-Bzom2BTR.mjs";
-import { n as Button } from "./IconButton-kSjnfhWt.mjs";
-import { n as Sticker } from "./Sticker-jfOM4Yi6.mjs";
+import { n as Button } from "./IconButton-Bj1fry_K.mjs";
+import { n as Sticker } from "./Sticker-4VdGEFAu.mjs";
 import { n as useFormField } from "./useFormField-pOVkb5BK.mjs";
-import { r as InputGroup } from "./Input-TRmTBEav.mjs";
+import { r as InputGroup } from "./Input-DcbzPaax.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-BvMzSH2I.mjs";
-import { t as Checkbox } from "./Checkbox-C3z7UUSC.mjs";
-import { t as Spinner } from "./Spinner-vcApnJzv.mjs";
-import { Color, Spacing, Typography } from "@persona/design-tokens";
+import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-BVn1jh46.mjs";
+import { t as Checkbox } from "./Checkbox-BAh-wF_F.mjs";
+import { t as Spinner } from "./Spinner-k9ZiOdTr.mjs";
 import { Fragment, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, CaretDownIcon, ChevronRightIcon, CircleXInverseIcon, SearchIcon } from "@persona/icons";
 import Fuse from "fuse.js";
@@ -1012,7 +1012,8 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		return item ? item.label : "";
 	}, []);
 	const getOptionId = useCallback((index) => `${field.inputId}-option-${index}`, [field.inputId]);
-	const { addSelectedItem, getSelectedItemProps, getDropdownProps, removeSelectedItem, reset, setSelectedItems } = useMultipleSelection({
+	const reportValues = useCallback((nextValues) => onValuesChange?.([...new Set(nextValues)]), [onValuesChange]);
+	const { getSelectedItemProps, getDropdownProps, removeSelectedItem, reset } = useMultipleSelection({
 		selectedItems,
 		itemToKey: mode.itemToKey,
 		onStateChange: ({ selectedItems: newSelectedItems, type }) => {
@@ -1023,13 +1024,10 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 				case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
 				case useMultipleSelection.stateChangeTypes.FunctionAddSelectedItem:
 				case useMultipleSelection.stateChangeTypes.FunctionSetSelectedItems:
-					if (onValuesChange && newSelectedItems) {
-						const newValues = newSelectedItems.map((item) => item.value);
-						onValuesChange?.(newValues);
-					}
+					if (newSelectedItems) reportValues(newSelectedItems.map((item) => item.value));
 					break;
 				case useMultipleSelection.stateChangeTypes.FunctionReset:
-					if (onValuesChange) onValuesChange([]);
+					reportValues([]);
 					break;
 				default: break;
 			}
@@ -1053,10 +1051,10 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 	const handleSelectAllToggle = useCallback(() => {
 		if (selectedState.allSelected || selectedState.indeterminate) {
 			const visibleValues = filteredOptions.map((option) => option.value);
-			setSelectedItems(selectedItems.filter((item) => !visibleValues.includes(item.value)));
+			reportValues(selectedItems.filter((item) => !visibleValues.includes(item.value)).map((item) => item.value));
 		} else {
 			const newItems = filteredOptions.filter((option) => !values.includes(option.value));
-			setSelectedItems([...selectedItems, ...newItems]);
+			reportValues([...selectedItems, ...newItems].map((item) => item.value));
 		}
 	}, [
 		selectedState.allSelected,
@@ -1064,7 +1062,20 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		filteredOptions,
 		selectedItems,
 		values,
-		setSelectedItems
+		reportValues
+	]);
+	const handleOptionToggle = useCallback((option) => {
+		if (option.value === SELECT_ALL_VALUE) {
+			handleSelectAllToggle();
+			return;
+		}
+		const currentValues = selectedItems.map((item) => item.value);
+		reportValues(values.includes(option.value) ? currentValues.filter((value) => value !== option.value) : [...currentValues, option.value]);
+	}, [
+		selectedItems,
+		values,
+		reportValues,
+		handleSelectAllToggle
 	]);
 	const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, setHighlightedIndex, closeMenu, openMenu } = useCombobox({
 		items: navigableItems,
@@ -1084,21 +1095,12 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 				if (rowIndex != null) virtualizer.scrollToIndex(rowIndex, { align: "auto" });
 			}
 		},
-		onStateChange({ type, selectedItem: newSelectedItem, inputValue: newInputValue }) {
+		onStateChange({ type, inputValue: newInputValue }) {
 			switch (type) {
 				case useCombobox.stateChangeTypes.InputChange:
 					setInputValue(newInputValue || "");
 					mode.onInputChange?.(newInputValue || "");
 					break;
-				case useCombobox.stateChangeTypes.InputKeyDownEnter:
-				case useCombobox.stateChangeTypes.ItemClick:
-					if (newSelectedItem && newSelectedItem.value === SELECT_ALL_VALUE) {
-						handleSelectAllToggle();
-						break;
-					}
-					if (newSelectedItem) if (values.includes(newSelectedItem.value)) removeSelectedItem(newSelectedItem);
-					else addSelectedItem(newSelectedItem);
-					break;
 				default: break;
 			}
 		},
@@ -1134,7 +1136,8 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		if (option.value === SELECT_ALL_VALUE) return /* @__PURE__ */ jsx(StyledMenuItem$1, {
 			...getItemProps({
 				item: option,
-				index: currentIndex
+				index: currentIndex,
+				onClick: () => handleOptionToggle(option)
 			}),
 			focused: isHighlighted,
 			selected: false,
@@ -1160,7 +1163,8 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 			...getItemProps({
 				item: option,
 				index: currentIndex,
-				"aria-selected": isSelected
+				"aria-selected": isSelected,
+				onClick: () => handleOptionToggle(option)
 			}),
 			focused: isHighlighted,
 			selected: false,
@@ -1196,7 +1200,8 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		values,
 		getItemProps,
 		size,
-		selectedState
+		selectedState,
+		handleOptionToggle
 	]);
 	const isMenuOpen = isOpen;
 	const { isFooterHighlighted, footerActionId, showFooterAction, handleFooterKeyDown, clearFooterHighlight } = useComboboxFooterAction({
@@ -1210,8 +1215,21 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		inputId: field.inputId
 	});
 	const handleKeyDown = useCallback((event) => {
-		if (event.key === "Enter" && !isMenuOpen) openMenu();
-	}, [isMenuOpen, openMenu]);
+		if (event.key === "Enter") {
+			if (!isMenuOpen) openMenu();
+			else if (highlightedIndex >= 0 && navigableItems[highlightedIndex]) {
+				event.preventDefault();
+				Object.assign(event, { preventDownshiftDefault: true });
+				handleOptionToggle(navigableItems[highlightedIndex]);
+			}
+		}
+	}, [
+		isMenuOpen,
+		openMenu,
+		highlightedIndex,
+		navigableItems,
+		handleOptionToggle
+	]);
 	const dropdownPosition = useDropdownPosition(portalContainerRef, isMenuOpen, embedded ? false : portal);
 	useEffect(() => {
 		mode.onMenuOpenChange(isMenuOpen);
@@ -1251,13 +1269,7 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		}
 		if (e.key === "Enter" && highlightedIndex >= 0 && navigableItems[highlightedIndex]) {
 			e.preventDefault();
-			const selectedItem = navigableItems[highlightedIndex];
-			if (selectedItem.value === SELECT_ALL_VALUE) {
-				handleSelectAllToggle();
-				return;
-			}
-			if (values.includes(selectedItem.value)) removeSelectedItem(selectedItem);
-			else addSelectedItem(selectedItem);
+			handleOptionToggle(navigableItems[highlightedIndex]);
 		}
 		if (e.key === "Escape") {
 			clearFooterHighlight();
@@ -1277,12 +1289,9 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		handleFooterKeyDown,
 		isFooterHighlighted,
 		clearFooterHighlight,
-		values,
-		addSelectedItem,
-		removeSelectedItem,
 		closeMenu,
 		comboboxInputRef,
-		handleSelectAllToggle
+		handleOptionToggle
 	]);
 	useOutsideClick({
 		ref: comboboxContainerRef,
@@ -1327,21 +1336,24 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		ref: comboboxContainerRef,
 		children: [embedded ? null : externalTrigger != null ? externalTrigger : /* @__PURE__ */ jsxs(InputContainer, { children: [
 			/* @__PURE__ */ jsx(MultiSelectComboboxInput, {
-				...getInputProps(getDropdownProps({
-					...props,
-					ref: comboboxInputRef,
-					id: field.inputId,
-					placeholder: selectedItems.length === 0 ? placeholder : "",
-					disabled: field.disabled,
-					"aria-label": ariaLabel,
-					"aria-labelledby": labelId,
-					"aria-describedby": [field.helperTextId, field.hasWarning ? field.warningTextId : null].filter(Boolean).join(" ") || void 0,
-					"aria-errormessage": field.hasError ? field.errorTextId : void 0,
-					"aria-invalid": field.hasError,
-					"aria-required": required || void 0,
-					preventKeyAction: isMenuOpen,
-					onKeyDown: handleKeyDown
-				})),
+				...getInputProps({
+					...getDropdownProps({
+						...props,
+						ref: comboboxInputRef,
+						id: field.inputId,
+						placeholder: selectedItems.length === 0 ? placeholder : "",
+						disabled: field.disabled,
+						"aria-label": ariaLabel,
+						"aria-labelledby": labelId,
+						"aria-describedby": [field.helperTextId, field.hasWarning ? field.warningTextId : null].filter(Boolean).join(" ") || void 0,
+						"aria-errormessage": field.hasError ? field.errorTextId : void 0,
+						"aria-invalid": field.hasError,
+						"aria-required": required || void 0,
+						preventKeyAction: isMenuOpen,
+						onKeyDown: handleKeyDown
+					}),
+					...isMenuOpen ? { onKeyDown: handleKeyDown } : {}
+				}),
 				size,
 				$isOpen: isMenuOpen,
 				hasWarning: field.hasWarning,
@@ -1609,7 +1621,6 @@ function ComboboxSingleSelectComponent(componentProps, ref) {
 	const [navigationPath, setNavigationPath] = useState([]);
 	const comboboxInputRef = useRef(null);
 	const internalContainerRef = useRef(null);
-	const pendingDescentRef = useRef(null);
 	const committedLabelRef = useRef(null);
 	const lastValueRef = useRef(value);
 	useEffect(() => {
@@ -1702,10 +1713,6 @@ function ComboboxSingleSelectComponent(componentProps, ref) {
 		setNavigationPath((prev) => prev.length > 0 ? prev.slice(0, -1) : prev);
 		setInputValue("");
 	}, []);
-	const handleDescend = useCallback((groupLabel) => {
-		setNavigationPath((prev) => [...prev, groupLabel]);
-		setInputValue("");
-	}, []);
 	const isItemDisabled = useCallback((item) => item?.kind === "leaf" && optionDisabledReason?.(item.option) != null, [optionDisabledReason]);
 	const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, setHighlightedIndex, openMenu } = useCombobox({
 		items: downshiftItems,
@@ -1751,27 +1758,22 @@ function ComboboxSingleSelectComponent(componentProps, ref) {
 				case useCombobox.stateChangeTypes.InputKeyDownEnter: {
 					const candidate = changes.selectedItem;
 					if (candidate?.kind === "leaf" && optionDisabledReason?.(candidate.option) != null) return state;
-					if (candidate && candidate.kind === "group") {
-						pendingDescentRef.current = candidate.group.label;
-						return {
-							...changes,
-							selectedItem: state.selectedItem,
-							isOpen: true
-						};
-					}
+					if (candidate && candidate.kind === "group") return {
+						...changes,
+						selectedItem: state.selectedItem,
+						isOpen: true
+					};
 					return changes;
 				}
 				default: return changes;
 			}
 		}
 	});
-	useEffect(() => {
-		if (pendingDescentRef.current != null) {
-			const target = pendingDescentRef.current;
-			pendingDescentRef.current = null;
-			handleDescend(target);
-		}
-	});
+	const handleDescend = useCallback((groupLabel) => {
+		setNavigationPath((prev) => [...prev, groupLabel]);
+		setInputValue("");
+		setHighlightedIndex(-1);
+	}, [setHighlightedIndex]);
 	useEffect(() => {
 		if (!isOpen && !embedded && navigationPath.length > 0) setNavigationPath([]);
 	}, [
@@ -1841,6 +1843,7 @@ function ComboboxSingleSelectComponent(componentProps, ref) {
 				},
 				index: currentIndex
 			}),
+			onClick: () => handleDescend(group.label),
 			"aria-haspopup": "menu",
 			focused: isHighlighted,
 			prefixIcon: group.prefixIcon,
@@ -1862,7 +1865,8 @@ function ComboboxSingleSelectComponent(componentProps, ref) {
 	}, [
 		highlightedIndex,
 		getItemProps,
-		size
+		size,
+		handleDescend
 	]);
 	const renderNestedLevel = useCallback((items) => {
 		let navIndex = -1;
@@ -1917,14 +1921,13 @@ function ComboboxSingleSelectComponent(componentProps, ref) {
 		if (!isMenuOpen) return;
 		if (handleFooterKeyDown(event)) return;
 		if (isSearching) return;
-		if (event.key === "Enter" && downshiftItems[highlightedIndex]?.kind === "group") {
-			event.stopPropagation();
-			return;
-		}
-		if (event.key === "ArrowRight") {
+		if (event.key === "Enter" || event.key === "ArrowRight") {
 			const highlighted = downshiftItems[highlightedIndex];
-			if (highlighted && highlighted.kind === "group") {
+			if (highlighted?.kind === "group") {
 				event.preventDefault();
+				if (event.key === "Enter") event.stopPropagation();
+				const nativeEvent = event.nativeEvent;
+				nativeEvent.preventDownshiftDefault = true;
 				handleDescend(highlighted.group.label);
 			}
 			return;
@@ -2139,4 +2142,4 @@ const Combobox = forwardRef(ComboboxComponent);
 //#endregion
 export { CaretButton as n, flattenOptions as r, Combobox as t };
 
-//# sourceMappingURL=Combobox-BkK_tosd.mjs.map
+//# sourceMappingURL=Combobox-DmFQ5cAy.mjs.map