Thanks @ChristianMurphy, I guess I just never came across this use case before using MDX.

<!-- Ouch, sorry you ran into a bug. Thank for taking the time to report it!

Please fill in as much of the template below as you’re able.

P.S. have you seen our support and contributing docs? https://mdxjs.com/support https://mdxjs.com/contributing -->

Subject of the issue

I don't think the output for this MDX this is correct:

<aside>
  foo bar baz

  <details>
    <summary>foo bar baz</summary>

    In no particular order

    - foo
    - bar
    - baz

  </details>
</aside>

Outputs:

<aside>
  foo bar baz
  <details open="">
    <summary>foo bar baz</summary>
    <pre>
      <code>
        In no particular order

        - foo
        - bar
        - baz
      </code>
    </pre>
  </details>
</aside>

This is not a place to ask questions. For that, go to Discussions

Your environment

• OS: Ubuntu 20.04 <!-- Name and version of operating system -->
• Packages: "@mdx-js/mdx": "^1.6.19", "@mdx-js/react": "^1.6.19", "gatsby-plugin-mdx": "^1.2.25", and "@mdx-js/runtime": "1.6.19" in the codesandbox below <!-- Names and version of required packages -->
• Env: Node 12.6, yarn 1.21.1 <!-- Version of node, npm, yarn, or names and versions of browser -->

Steps to reproduce

https://codesandbox.io/s/mdx-forked-tls88?file=/src/App.js

Expected behaviour

It should output <ul> and multiple <li>

<aside>
  foo bar baz
  <details open="">
    <summary>foo bar baz</summary>

    In no particular order
    
    <ul>
      <li>foo</li>
      <li>bar</li>
      <li>baz</li>
    </ul>
  </details>
</aside>

I ran the expected output through https://validator.w3.org/#validate_by_input and it passed, so I'm not sure why I'm getting the unexpected output.

Actual behaviour

It should not output <pre> and <code> in this example.

I am running into this as well. I tried using onsStateChange but without success.

  const { getDropdownProps, addSelectedItem, removeSelectedItem, selectedItems } = useMultipleSelection({
    initialSelectedItems: [items[0]]
  });
  const { isOpen /* , ...other properties */ } = useSelect({
    items,
    onStateChange(changes) {
      switch (changes.type) {
        case useSelect.stateChangeTypes.ItemClick:
          return {
            ...changes,
            isOpen: true
          };
        default:
          return changes;
      }
    }
  });

The thing is, the ItemClick is actually running and thus returning the state, but it seems it still gets overridden somewhere. I haven't used this library a lot in the past, but this is the first time I'm using the hooks and I am a little confused as to why this isn't working.

<details> <summary>full code here</summary>

import React from 'react';
import { useSelect, useMultipleSelection } from 'downshift';

export const MultiSelect = ({ items, label = 'Choose an environment', children }) => {
  const { getDropdownProps, addSelectedItem, removeSelectedItem, selectedItems } = useMultipleSelection({
    initialSelectedItems: [items[0]]
  });
  const { isOpen, getToggleButtonProps, getLabelProps, getMenuProps, highlightedIndex, getItemProps } = useSelect({
    items,
    onStateChange(changes) {
      switch (changes.type) {
        case useSelect.stateChangeTypes.ItemClick:
          return {
            ...changes,
            isOpen: true
          };
        default:
          return changes;
      }
    }
  });

  return (
    <Box>
      <Label mb="sm" {...getLabelProps()}>
        {label}
      </Label>
      <Button {...getToggleButtonProps(getDropdownProps({ preventKeyAction: isOpen }))}>{children}</Button>
      <List {...getMenuProps()} position="absolute" bg="black" css={{ zIndex: 3 }}>
        {isOpen &&
          items.map((item, index) => (
            <ListItem              
              key={`${item}`}
              {...getItemProps({
                item,
                index,
                onClick() {
                  if (selectedItems.includes(item)) {
                    return removeSelectedItem(item);
                  }
                  addSelectedItem(item);
                }
              })}
            >
              {item}
              <Checkbox readOnly checked={selectedItems.includes(item)} />
            </ListItem>
          ))}
      </List>
    </Box>
  );
};

</details>

<!-- Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated!

Please make sure that you are familiar with and follow the Code of Conduct for this project (found in the CODE_OF_CONDUCT.md file).

Also, please make sure you're familiar with and follow the instructions in the contributing guidelines (found in the CONTRIBUTING.md file).

If you're new to contributing to open source projects, you might find this free video course helpful: http://kcd.im/pull-request

Please fill out the information below to expedite the review and (hopefully) merge of your pull request! -->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->

What: :hankey:

<!-- Why are these changes necessary? -->

Why:

<!-- How were these changes implemented? -->

How:

<!-- Have you done all of these things? -->

Checklist:

<!-- add "N/A" to the end of each line that's irrelevant to your changes -->

<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->

• [x] Documentation
• [ ] Tests
• [ ] TypeScript Types
• [ ] Flow Types
• [x] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->

<!-- feel free to add additional comments -->

Thanks @dsandmark!

So to summarize: make sure the value on the XAxis is a unix timestamp and then add the following to the XAxis component

<LineChart data={data}>
  <XAxis
    // Makes the chart a time series chart
    tickFormatter={unixTime => format(fromUnixTime(unixTime), 'MMM')}
    type="number"
    domain={['auto', 'auto']}
  />
</LineChart>

After reading the docs I'm still not entirely sure what ['auto', 'auto'] does, but I believe it positions the ticks evenly like a time series chart would. It even added a tick outside of my data range with the correct date. I even briefly checked the source code but it wasn't very clear to me since there's a lot going on.

<!-- ⚠️⚠️ Do Not Delete This! bug_report_template ⚠️⚠️ --> <!-- Please read our Rules of Conduct: https://opensource.microsoft.com/codeofconduct/ --> <!-- Please search existing issues to avoid creating duplicates. --> <!-- Also please test using the latest insiders build to make sure your issue has not already been fixed: https://code.visualstudio.com/insiders/ -->

<!-- Use Help > Report Issue to prefill these. -->

• Version: 1.48.0-insider
• Electron: 7.3.2
• Chrome: 78.0.3904.130
• Node.js: 12.8.1
• V8: 7.8.279.23-electron.0
• OS: Linux x64 5.3.0-62-generic

Steps to Reproduce:

1. Try to import a file with the import suggestions (in my case, type <BarChart
2. See the import suggestions and notice they don't show the source of the import

This makes it very hard to decide which import you need when names of functions or components overlap.

<!-- Launch with code --disable-extensions to check. --> Does this issue occur when all extensions are disabled?: Yes

Here is my setup for using object styles.

import "styled-components"
import {
  CSSProp,
  InterpolationFunction,
  ThemedStyledProps,
  CSSObject,
} from "styled-components"
import { theme } from "../styling/theme"

type CSSFunction = (args: { theme: typeof theme }) => CSSObject

declare module "react" {
  interface Attributes {
    css?: CSSObject | CSSFunction
  }
}

type Theme = typeof theme

// https://github.com/styled-components/styled-components-website/issues/447
declare module "styled-components" {
  export interface DefaultTheme extends Theme {}
}

Which allows you to write it like this:

<div
  css={({ theme }) => ({
    marginBottom: theme.spacing.lg,
  })}
>
  <Img fluid={featuredImage.childImageSharp.fluid} />
</div>

I couldn't find a solution online so I'm sharing mine. Not very experienced with TypeScript so far but this worked well for me.