chore: release 0.38.1

CHANGELOG.md

@@ -17,6 +17,21 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Fixes
+- Fix handling of `onMouseEnter` prop in `ChatMessage` @layershifter ([#1903](https://github.com/stardust-ui/react/pull/1903))
+- Fix order of applying unhandled props and key handlers @jurokapsiar ([#1901](https://github.com/stardust-ui/react/pull/1901))
+- Fix focus styles for `TreeItem` and `HierarchicalTreeItem` @silviuavram ([#1912](https://github.com/stardust-ui/react/pull/1912))
+- Use more accurate positioning for `actions` in `Chat.Message` when is inside scrollable containers @layershifter ([#1929](https://github.com/stardust-ui/react/pull/1929))
+- Do not force focus inside focus trap zone on outside focus @sophieH29 ([#1930](https://github.com/stardust-ui/react/pull/1930))
+
+### Features
+- Add `navigable` `List` variant @jurokapsiar ([#1904](https://github.com/stardust-ui/react/pull/1904))
+- Add the `SplitButton` component @silviuavram ([#1789](https://github.com/stardust-ui/react/pull/1798))
+
+### Documentation
+- Fix broken code editor in some doc site examples and improve error experience @levithomason ([#1906](https://github.com/stardust-ui/react/pull/1906))
+- Add `VirtualizedTree` prototype @silviuavram ([#1890](https://github.com/stardust-ui/react/pull/1890))
+
 <!--------------------------------[ v0.38.0 ]------------------------------- -->
 ## [v0.38.0](https://github.com/stardust-ui/react/tree/v0.38.0) (2019-09-06)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.37...v0.38.0)

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts

@@ -7,7 +7,6 @@ const name = 'stardust-ui-example'
 const description =
   'An exported example from Stardust UI React, https://stardust-ui.github.io/react/'
 const dependencies = {
-  '@stardust-ui/code-sandbox': 'latest',
   ..._.mapValues(imports, pkg => pkg.version),
   // required to enable all features due old templates in https://github.com/codesandbox/codesandbox-importers
   // https://github.com/stardust-ui/react/issues/1519

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -1,11 +1,11 @@
+import { knobComponents } from '@stardust-ui/code-sandbox'
 import {
   CopyToClipboard,
-  CodeSnippet,
   KnobInspector,
   KnobProvider,
   LogInspector,
 } from '@stardust-ui/docs-components'
-import { Divider, Flex, Menu, Segment, Provider, ICSSInJSStyle } from '@stardust-ui/react'
+import { Flex, Menu, Segment, Provider, ICSSInJSStyle } from '@stardust-ui/react'
 import * as _ from 'lodash'
 import * as React from 'react'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
@@ -29,6 +29,8 @@ import ExamplePlaceholder from '../../ExamplePlaceholder'
 import VariableResolver from 'docs/src/components/VariableResolver/VariableResolver'
 import ComponentExampleVariables from 'docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables'
 
+const ERROR_COLOR = '#D34'
+
 export interface ComponentExampleProps
   extends RouteComponentProps<any, any>,
     ComponentSourceManagerRenderProps,
@@ -426,7 +428,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       >
         <Flex column>
           <Flex.Item>
-            <KnobProvider>
+            <KnobProvider components={knobComponents}>
               {/* Ensure anchor links don't occlude card shadow effect */}
               <div id={this.anchorName} style={{ position: 'relative', bottom: '1rem' }} />
 
@@ -463,12 +465,12 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                 <SourceRender
                   babelConfig={babelConfig}
                   source={currentCode}
-                  renderHtml={showCode}
+                  renderHtml={false}
                   resolver={importResolver}
                   wrap={this.renderElement}
                   unstable_hot
                 >
-                  {({ element, error, markup }) => (
+                  {({ element, error }) => (
                     <>
                       <Segment
                         className={`rendered-example ${this.getKebabExamplePath()}`}
@@ -486,30 +488,35 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                         </VariableResolver>
                       </Segment>
 
-                      <Segment styles={{ padding: 0 }}>
-                        <LogInspector silent />
-                      </Segment>
+                      <LogInspector silent />
 
                       {showCode && (
-                        <Segment styles={{ padding: 0 }}>
-                          {showCode && this.renderSourceCode()}
+                        <div
+                          style={{
+                            boxShadow: `0 0 0 0.5em ${error ? ERROR_COLOR : 'transparent'}`,
+                          }}
+                        >
+                          {this.renderSourceCode()}
                           {error && (
-                            <Segment inverted color="red">
-                              <pre style={{ whiteSpace: 'pre-wrap' }}>{error.toString()}</pre>
-                            </Segment>
-                          )}
-                          {showCode && (
-                            <div>
-                              <Divider fitted />
-                              <CodeSnippet
-                                fitted
-                                label="Rendered HTML"
-                                mode="html"
-                                value={markup}
-                              />
-                            </div>
+                            <pre
+                              style={{
+                                position: 'sticky',
+                                bottom: 0,
+                                padding: '1em',
+                                // don't block viewport
+                                maxHeight: '50vh',
+                                overflowY: 'auto',
+                                color: '#fff',
+                                background: ERROR_COLOR,
+                                whiteSpace: 'pre-wrap',
+                                // above code editor text :/
+                                zIndex: 4,
+                              }}
+                            >
+                              {error.toString()}
+                            </pre>
                           )}
-                        </Segment>
+                        </div>
                       )}
                     </>
                   )}

docs/src/components/ComponentPlayground/ComponentPlayground.tsx

@@ -27,6 +27,7 @@ const unsupportedComponents = [
   'Portal',
   'Provider',
   'RadioGroup',
+  'SplitButton',
   'Toolbar',
   'Ref',
 ]

docs/src/components/Playground/renderConfig.ts

@@ -1,3 +1,4 @@
+import * as CodeSandbox from '@stardust-ui/code-sandbox'
 import * as DocsComponent from '@stardust-ui/docs-components'
 import * as Stardust from '@stardust-ui/react'
 import * as ReactFela from 'react-fela'
@@ -20,6 +21,10 @@ export const babelConfig = {
 }
 
 export const imports: Record<string, { version: string; module: any }> = {
+  '@stardust-ui/code-sandbox': {
+    version: 'latest',
+    module: CodeSandbox,
+  },
   '@stardust-ui/docs-components': {
     version: docsComponentsPackageJson.version,
     module: DocsComponent,

docs/src/components/Sidebar/Sidebar.tsx

@@ -314,6 +314,11 @@ class Sidebar extends React.Component<any, any> {
         title: { content: 'Mentions', as: NavLink, to: '/prototype-mentions' },
         public: true,
       },
+      {
+        key: 'participants-list',
+        title: { content: 'Participants list', as: NavLink, to: '/prototype-participants-list' },
+        public: true,
+      },
       {
         key: 'searchpage',
         title: { content: 'Search Page', as: NavLink, to: '/prototype-search-page' },
@@ -343,6 +348,11 @@ class Sidebar extends React.Component<any, any> {
         title: { content: 'MenuButton', as: NavLink, to: '/menu-button' },
         public: false,
       },
+      {
+        key: 'virtualized-tree',
+        title: { content: 'VirtualizedTree', as: NavLink, to: '/virtualized-tree' },
+        public: true,
+      },
       {
         key: 'copy-to-clipboard',
         title: { content: 'Copy to Clipboard', as: NavLink, to: '/prototype-copy-to-clipboard' },

docs/src/examples/components/Chat/Usage/ChatExampleInScrollable.shorthand.tsx

@@ -0,0 +1,89 @@
+import { useRangeKnob } from '@stardust-ui/docs-components'
+import { Avatar, Chat, ChatItemProps, ShorthandCollection } from '@stardust-ui/react'
+import * as React from 'react'
+
+const actionItems = [
+  { key: 'add', icon: 'add', title: 'Add' },
+  { key: 'ban', icon: 'ban', title: 'Ban' },
+  { key: 'bookmark', icon: 'bookmark', title: 'Bookmark' },
+  { key: 'broadcast', icon: 'broadcast', title: 'Broadcast' },
+  { key: 'calendar', icon: 'calendar', title: 'Calendar' },
+  { key: 'like', icon: 'like', title: 'Like' },
+  { key: 'star', icon: 'star', title: 'Star' },
+  { key: 'edit', icon: 'edit', title: 'Edit' },
+  { key: 'lock', icon: 'lock', title: 'Lock' },
+  { key: 'more', icon: 'more', title: 'More actions' },
+]
+
+const ChatExampleInScrollableShorthand = () => {
+  const [actionCount] = useRangeKnob({ name: 'actionCount', initialValue: 7, min: 1, max: 10 })
+  const [height] = useRangeKnob({
+    name: 'height',
+    initialValue: '400px',
+    min: '200px',
+    max: '800px',
+    step: 10,
+  })
+  const [width] = useRangeKnob({
+    name: 'width',
+    initialValue: '400px',
+    min: '100px',
+    max: '500px',
+    step: 10,
+  })
+
+  const actionMenu = {
+    iconOnly: true,
+    items: actionItems.slice(0, actionCount - 1),
+  }
+  const items: ShorthandCollection<ChatItemProps> = [
+    {
+      attached: 'top',
+      contentPosition: 'end',
+      message: (
+        <Chat.Message
+          actionMenu={actionMenu}
+          author="John Doe"
+          content="Hello"
+          mine
+          timestamp="Yesterday, 10:15 PM"
+        />
+      ),
+      key: 'message-1',
+    },
+    {
+      attached: 'bottom',
+      contentPosition: 'end',
+      key: 'message-2',
+      message: (
+        <Chat.Message
+          actionMenu={actionMenu}
+          author="John Doe"
+          content="I'm back!"
+          mine
+          timestamp="Yesterday, 10:15 PM"
+        />
+      ),
+    },
+    {
+      gutter: <Avatar image="public/images/avatar/small/ade.jpg" />,
+      message: (
+        <Chat.Message
+          actionMenu={actionMenu}
+          author="Jane Doe"
+          content="Hi"
+          timestamp="Yesterday, 10:15 PM"
+        />
+      ),
+      key: 'message-3',
+    },
+  ]
+
+  return (
+    <div style={{ height, width, overflow: 'scroll' }}>
+      <Chat items={items} styles={{ minHeight: '100%' }} />
+    </div>
+  )
+}
+
+export default ChatExampleInScrollableShorthand

docs/src/examples/components/Chat/Usage/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="">
+    <ComponentExample
+      title="In scrollable container"
+      description="A Chat can be placed in a scrollable container."
+      examplePath="components/Chat/Usage/ChatExampleInScrollable"
+    />
+  </ExampleSection>
+)
+
+export default Usage

docs/src/examples/components/Dialog/Usage/DialogExampleCallbacks.shorthand.tsx

@@ -1,20 +1,22 @@
+import { createCallbackLogFormatter } from '@stardust-ui/code-sandbox'
 import { useBooleanKnob, useLogKnob } from '@stardust-ui/docs-components'
-import { Button, Dialog, DialogProps } from '@stardust-ui/react'
+import { Button, Dialog } from '@stardust-ui/react'
 import * as React from 'react'
 
-const logFormatter = (name: string, e: React.SyntheticEvent, data: DialogProps) => {
-  return [
-    `[${new Date().toLocaleTimeString()}]`,
-    `${name}(e: { type: ${e.type} }, data: { open: ${data.open} })`,
-  ].join(' ')
-}
-
 const DialogExampleCallbacks = () => {
   const [open, setOpen] = useBooleanKnob({ name: 'open' })
 
-  const onCancel = useLogKnob('onCancel', () => setOpen(false), logFormatter)
-  const onConfirm = useLogKnob('onConfirm', () => setOpen(false), logFormatter)
-  const onOpen = useLogKnob('onOpen', () => setOpen(true), logFormatter)
+  const onCancel = useLogKnob(
+    'onCancel',
+    () => setOpen(false),
+    createCallbackLogFormatter(['open']),
+  )
+  const onConfirm = useLogKnob(
+    'onConfirm',
+    () => setOpen(false),
+    createCallbackLogFormatter(['open']),
+  )
+  const onOpen = useLogKnob('onOpen', () => setOpen(true), createCallbackLogFormatter(['open']))
 
   return (
     <Dialog

docs/src/examples/components/List/Types/ListExampleNavigable.shorthand.steps.ts

@@ -0,0 +1,26 @@
+import { List } from '@stardust-ui/react'
+
+const selectors = {
+  list: `.${List.className}`,
+  item: (itemIndex: number) =>
+    `.${List.className} .${List.Item.className}:nth-of-type(${itemIndex})`,
+}
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
+  steps: [
+    (builder, keys) =>
+      builder
+        .hover(selectors.item(2))
+        .snapshot('Highlights an item')
+        .click(selectors.item(2))
+        .snapshot('Clicks on an item')
+        .hover(selectors.item(3))
+        .snapshot('Highlights another item')
+        .keys(selectors.item(2), keys.downArrow)
+        .snapshot('Focuses last item using keyboard'),
+    (builder, keys) => builder.keys('body', keys.tab).snapshot('Focuses item'),
+  ],
+}
+
+export default config

docs/src/examples/components/List/Types/ListExampleNavigable.shorthand.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { List, Image } from '@stardust-ui/react'
+
+const items = [
+  {
+    key: 'irving',
+    media: <Image src="public/images/avatar/small/matt.jpg" avatar />,
+    header: 'Irving Kuhic',
+    headerMedia: '7:26:56 AM',
+    content: 'Program the sensor to the SAS alarm through the haptic SQL card!',
+  },
+  {
+    key: 'skyler',
+    media: <Image src="public/images/avatar/small/steve.jpg" avatar />,
+    header: 'Skyler Parks',
+    headerMedia: '11:30:17 PM',
+    content: 'Use the online FTP application to input the multi-byte application!',
+  },
+  {
+    key: 'dante',
+    media: <Image src="public/images/avatar/small/nom.jpg" avatar />,
+    header: 'Dante Schneider',
+    headerMedia: '5:22:40 PM',
+    content: 'The GB pixel is down, navigate the virtual interface!',
+  },
+]
+
+const ListExampleNavigable = () => <List navigable items={items} />
+
+export default ListExampleNavigable