pxt-core 13.2.1 → 13.2.2

package/common-docs/blocks-embed.md

@@ -90,7 +90,7 @@ export interface RenderBlocksRequestMessage extends SimulatorMessage {
 }
 ```
 
-* ``id``: The identifer of the snippet element. This is used to match the document element of the snippet with the rendered blocks returned later.
+* ``id``: The identifier of the snippet element. This is used to match the document element of the snippet with the rendered blocks returned later.
 * ``code``: The text of the code snippet to send, compile, and render. The snippet may be JavaScript or the Blockly XML payload.
 * ``packageId``: the identifier of a project shared in the editor (without the ``https://makecode.com/`` prefix)
 
@@ -113,7 +113,7 @@ export interface RenderBlocksResponseMessage extends SimulatorMessage {
 }
 ```
 
-* ``id``: The identifer of the snippet element. This is used to replace the document element of the snippet with the rendered blocks or to associate the rendered blocks if the snippet is to be retained in the document.
+* ``id``: The identifier of the snippet element. This is used to replace the document element of the snippet with the rendered blocks or to associate the rendered blocks if the snippet is to be retained in the document.
 * ``svg``: The SVG image element.
 * ``uri``: The data source of the blocks image.
 * ``width``: The width of the SVG blocks image.

package/common-docs/github/commit.md

@@ -12,7 +12,7 @@ If the changes look correct, click on **commit & push changes** to create a **co
 
 ## Review & revert
 
-It's good practice to **review** your **local** changes before commiting; just like you review your answer sheet before turning in a test. If you find some changes that are incorrect, you can decide to fix them right away, **revert** the entire file, or even just **commit** them so you can make any fixes later.
+It's good practice to **review** your **local** changes before committing; just like you review your answer sheet before turning in a test. If you find some changes that are incorrect, you can decide to fix them right away, **revert** the entire file, or even just **commit** them so you can make any fixes later.
 
 ## See Also
 

package/common-docs/github/private-assignments.md

@@ -12,7 +12,7 @@ This collaboration method is quite similar to the way professional developers us
 #### Public repositories
 
 Using **public** repositories simplifies a lot the configuration phase for the assignments.
-If it is acceptable for the code to be publically available on [GitHub](https://github.com), 
+If it is acceptable for the code to be publicly available on [GitHub](https://github.com), 
 we recommend using the [public assignments](/github/public-assignments).
 
 ### ~

package/common-docs/github/test-extension.md

@@ -1,6 +1,6 @@
 # Testing an Extension
 
-Both the extension and a test project are open in separate editor tabs in the browser. You can work on both simultanously as you add and modify your extension code. As you switch between them, each will reload automatically.
+Both the extension and a test project are open in separate editor tabs in the browser. You can work on both simultaneously as you add and modify your extension code. As you switch between them, each will reload automatically.
 
 ## API Tests
 

package/common-docs/online-learning.md

@@ -16,7 +16,7 @@ https://youtu.be/oBarPukXXXQ
 
 ## [Google Classroom](https://classroom.google.com) #googleclassroom
 
-You can use shared urls or download files from the MakeCode editor to create assigments in Google Classroom. See the tutorial video below.
+You can use shared urls or download files from the MakeCode editor to create assignments in Google Classroom. See the tutorial video below.
 
 ### #youtubegoogleclassroom
 
@@ -24,7 +24,7 @@ https://youtu.be/vDISKdJ3ynA
 
 ## [Canvas](https://www.canvas.net/) #canvas
 
-You can use shared urls or download files from the MakeCode editor to create assigments in Canvas. See the tutorial video below.
+You can use shared urls or download files from the MakeCode editor to create assignments in Canvas. See the tutorial video below.
 
 ### #youtubecanvas
 

package/common-docs/reference/arrays/pick-random.md

@@ -23,7 +23,7 @@ let item = list[Math.randomRange(0, list.length - 1)]
 
 ## Returns
 
-* An item from the array that is ramdomly selected.
+* An item from the array that is randomly selected.
 
 ## Example #example
 

package/common-docs/reference/text/char-code-at.md

@@ -6,7 +6,7 @@ Get the code for a character (letter, number, or symbol) from a place in a text
 "".charCodeAt(0)
 ```
 
-Like the position of a character in the an alphabet, or the traditional order of characters in a language, characters are assigned a code in a character set when used with computers. If a character set used only the 5 characters of "ABCDE", then 'A', as the first character, would have a character code of `0` and 'D' would have a charcter code of `3`.
+Like the position of a character in the an alphabet, or the traditional order of characters in a language, characters are assigned a code in a character set when used with computers. If a character set used only the 5 characters of "ABCDE", then 'A', as the first character, would have a character code of `0` and 'D' would have a character code of `3`.
 
 You can find the code of a character in a text string by selecting it from it's position in a string.
 

package/common-docs/share.md

@@ -14,7 +14,7 @@ Give your project a Title and optionally, you can create a thumbnail image or an
 
 Clicking "Share Project" will create a link to your project.
 
-![Share project anonomously](/static/share/anon-share-link.png)
+![Share project anonymously](/static/share/anon-share-link.png)
 
 This link is not published anywhere else and it is not tied to a specific user (it’s an "anonymous link"). If you lose the link, then there’s no way to get it back - you will have to share your project again to create a new link. These links are snapshots in time of a project, so if you make any subsequent changes to your project, you will have to Share your project again to create a new link with the changes. There is also no way to remove or "unpublish" an anonymous share link, except through the "Report Abuse" function (see below for more information).
 
@@ -58,7 +58,7 @@ By default, all shared projects in MakeCode can be copied and edited. There is n
 
 ## Asset Packs #asset-packs
 
-Certain editors (such as [MakeCode Arcade](https://arcade.makecode.com)) can include resource files inside of projects. The resources, or _assets_, might contain byte respresentations of images, animations, sounds, tilemaps, etc. An **Asset Pack** is a resource only project where just the assets are shared and no code is loaded from the shared project.
+Certain editors (such as [MakeCode Arcade](https://arcade.makecode.com)) can include resource files inside of projects. The resources, or _assets_, might contain byte representations of images, animations, sounds, tilemaps, etc. An **Asset Pack** is a resource only project where just the assets are shared and no code is loaded from the shared project.
 
 If this feature is supported by your editor, you can set a project as an asset pack by going to the **Settings** (⚙️) menu and selecting 'Project Settings'. Enable the 'Import as asset pack' setting. Watch this video to see how it's done:
 

package/common-docs/types/function/define.md

@@ -80,7 +80,7 @@ function addStrings(stringA: string, stringB: string, first: boolean) {
 
 #### Pull down the parameter
 
-In blocks, you can pull a parmeter from the function block and drag it down and place it as a variable in the code inside the function.
+In blocks, you can pull a parameter from the function block and drag it down and place it as a variable in the code inside the function.
 
 Pull the ``||variables:message||`` parameter from the **repeat** function.
 

package/localtypings/pxtarget.d.ts

@@ -628,7 +628,7 @@ declare namespace pxt {
     interface PxtJsonOption {
         label: string;
         property: string;
-        type: "checkbox";
+        type: "checkbox" | "input";
     }
 
     interface AssetConfig {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "13.2.1",
+  "version": "13.2.2",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",
@@ -183,6 +183,7 @@
     "update": "gulp update",
     "watch-streamer": "cd docs/static/streamer && tsc -t es6 --watch",
     "prepare": "node ./scripts/npm-prepare.js",
-    "compile-aw": "gh aw compile --strict"
+    "compile-aw": "gh aw compile --strict",
+    "hwab": "node tests/hw-ab/hwab.js"
   }
 }

package/react-common/components/controls/DropdownModal.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { classList, ControlProps } from "../util";
+import { Button, ButtonViewProps } from "./Button";
+import { DropdownProps } from "./Dropdown";
+import { FocusList } from "./FocusList";
+import { Modal } from "./Modal";
+
+interface DropdownModalProps extends DropdownProps {
+    onClose: () => void;
+}
+
+export const DropdownModal = (props: DropdownModalProps) => {
+    const {
+        className,
+        ariaLabel,
+        items,
+        selectedId,
+        onItemSelected,
+        onClose
+    } = props;
+
+    const focusableItems = React.useRef<{[k: string]: HTMLButtonElement}>({});
+
+    React.useEffect(() => {
+        if (Object.keys(focusableItems.current).length) {
+            focusableItems.current[selectedId ?? 0].focus();
+        }
+    }, [selectedId]);
+
+
+    return (
+        <Modal
+            className={classList("common-dropdown-modal", className)}
+            title={ariaLabel}
+            hideTitle={true}
+            onClose={onClose}
+            hideDismissButton={true}
+        >
+            <FocusList
+                role="listbox"
+                className="common-menu-dropdown-pane common-dropdown-shadow"
+                childTabStopId={selectedId}
+                useUpAndDownArrowKeys={true}
+                onClose={onClose}
+            >
+                    <ul role="presentation">
+                        { items.map(item =>
+                            <li key={item.id} role="presentation">
+                                <Button
+                                    {...item}
+                                    buttonRef={ref => focusableItems.current[item.id] = (ref as HTMLButtonElement)}
+                                    className={classList("common-dropdown-item", item.className)}
+                                    onClick={() => {
+                                        onItemSelected(item.id);
+                                        onClose();
+                                    }}
+                                    ariaSelected={item.id === selectedId}
+                                    leftIcon={classList("fas fa-check", selectedId !== item.id && "transparent")}
+                                    role="option"/>
+                            </li>
+                        )}
+                    </ul>
+            </FocusList>
+        </Modal>
+    )
+}

package/react-common/components/controls/Input.tsx

@@ -8,7 +8,7 @@ export interface InputProps extends ControlProps {
     inputClassName?: string;
     groupClassName?: string;
     initialValue?: string;
-    label?: string;
+    label?: string | JSX.Element;
     title?: string;
     placeholder?: string;
     icon?: string;

package/react-common/styles/controls/DropdownModal.less

@@ -0,0 +1,17 @@
+.common-dropdown-modal .common-modal {
+    .common-modal-header {
+        display: none;
+    }
+    .common-modal-body {
+        background: none;
+    }
+
+    .common-menu-dropdown-pane {
+        position: relative;
+        right: unset;
+    }
+
+    .common-dropdown-item .fas.fa-check.transparent {
+        opacity: 0;
+    }
+}

package/react-common/styles/react-common.less

@@ -11,6 +11,7 @@
 @import "controls/Checkbox.less";
 @import "controls/DraggableGraph.less";
 @import "controls/Dropdown.less";
+@import "controls/DropdownModal.less";
 @import "controls/EditorToggle.less";
 @import "controls/Icon.less";
 @import "controls/Input.less";

package/react-common/styles/theming/ThemePickerModal.less

@@ -369,3 +369,8 @@
         }
     }
 }
+
+.hc .theme-picker .theme-card.selected {
+    border-color: @highContrastTextColor;
+    box-shadow: inset 0 0 0 2px @highContrastTextColor;
+}

package/theme/monaco.less

@@ -19,6 +19,8 @@
 
 .monacoToolboxDiv {
     height: 100%;
+    /* Prevent large category lists from expanding the page scroll bounds. */
+    contain: paint;
 }
 
 .monacoEditorRightArea {

package/theme/music-editor/gallery.less

@@ -1,6 +1,8 @@
 .image-editor-gallery.song {
     display: flex;
     flex-direction: column;
+    flex-wrap: balance;
+    align-items: center;
     align-content: center;
     justify-content: unset;
     padding: 0.5rem;
@@ -15,11 +17,12 @@
     padding: 0.5rem;
     width: 100%;
     height: 4rem;
+    flex-shrink: 0;
 
     background-color: var(--pxt-neutral-background1);
     color: var(--pxt-neutral-foreground1);
     border-radius: 0.25rem;
-    max-width: 500px;
+    max-width: 440px;
     gap: 1rem;
 
     .song-gallery-item-name {
@@ -94,4 +97,10 @@
             outline-offset: 5px;
         }
     }
+}
+
+@media @tabletAndBelow {
+    .image-editor-gallery.song {
+        flex-wrap: nowrap;
+    }
 }

package/theme/piano-roll/piano-roll.less

@@ -12,7 +12,6 @@
     --note-event-text-color-hover: #ffffff;
     --note-event-border-hover: 2px solid #ffffff;
 
-    --header-text-color: black;
 
     --white-key-color: white;
     --black-key-color: black;
@@ -28,7 +27,9 @@
 
     --velocity-slider-color: var(--note-event-color);
 
-    --header-background: #f0f0f0;
+    --header-background: var(--pxt-neutral-background1);
+    --header-text-color: var(--pxt-neutral-foreground1);
+
     --piano-roll-border-color: var(--workspace-grid-line-color);
 }
 
@@ -64,6 +65,13 @@
 .piano-roll .header-container {
     height: var(--header-height);
     flex-shrink: 0;
+
+    .header > .common-dropdown .common-menu-dropdown-pane {
+        max-height: 15rem;
+        overflow-y: auto;
+        overflow-x: hidden;
+        z-index: 2;
+    }
 }
 
 .piano-roll .header,
@@ -128,6 +136,10 @@
     &>.common-dropdown #snap-select {
         min-width: 4.75rem;
     }
+
+    .common-button.menu-button {
+        color: var(--header-text-color);
+    }
 }
 
 .scrollbar.horizontal {
@@ -260,6 +272,9 @@
         padding-right: 0.25rem;
         background-color: var(--white-key-color);
         color: var(--key-text-color);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow-x: hidden;
 
         &.active,
         &.playing {
@@ -340,6 +355,16 @@
     background-color: var(--playhead-color);
 }
 
+.piano-roll .header .velocity-editor-toggle {
+    overflow-x: hidden;
+
+    label {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
+
 .velocity-editor {
     position: relative;
     display: flex;
@@ -421,4 +446,10 @@
     .music-editor-edit-controls .common-button.green {
         display: none;
     }
+}
+
+@media @tabletAndBelow {
+    .common-dropdown > .common-button {
+        min-width: 8rem;
+    }
 }

package/theme/pxtjson.less

@@ -2,16 +2,4 @@
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-}
-
-.pxt-json-simulator-theme {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.3rem;
-
-    label {
-        font-size: 14px;
-        font-weight: 600;
-    }
 }