Add required prop to Select. (#968)

Upgrade sveld to set paths correctly on Windows.
Make Prettier script compatible with Windows and run it.

COMPONENT_INDEX.md

@@ -3242,6 +3242,7 @@ None.
 | noLabel     | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to not render a label             |
 | labelText   | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the label text                          |
 | hideLabel   | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to visually hide the label text   |
+| required    | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to mark the field as required     |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -9419,6 +9419,17 @@
           "isFunctionDeclaration": false,
           "constant": false,
           "reactive": true
+        },
+        {
+          "name": "required",
+          "kind": "let",
+          "description": "Set to `true` to mark the field as required",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [

docs/src/pages/framed/Breakpoint/Breakpoint.svelte

@@ -13,7 +13,7 @@
 
 <h6>on:match</h6>
 <pre>
-  {JSON.stringify(events,null, 2)}
+  {JSON.stringify(events, null, 2)}
 </pre>
 
 <style>

package.json

@@ -18,7 +18,7 @@
     "build:api": "node scripts/build-api",
     "build:lib": "rollup -c",
     "prepack": "run-p build:*",
-    "format": "prettier --write './**/*.{svelte,js,md}'"
+    "format": "prettier --write \"./**/*.{svelte,js,md}\""
   },
   "dependencies": {
     "flatpickr": "4.6.9"
@@ -41,7 +41,7 @@
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.42.1",
-    "sveld": "^0.10.2",
+    "sveld": "^0.11.1",
     "svelte": "^3.44.3",
     "svelte-check": "^1.1.32",
     "typescript": "^4.1.3"

src/CodeSnippet/CodeSnippet.svelte

@@ -150,14 +150,10 @@
       feedback="{feedback}"
       feedbackTimeout="{feedbackTimeout}"
       class="bx--snippet {type && `bx--snippet--${type}`}
-          {type ===
+          {type === 'inline' && 'bx--btn--copy'}
-        'inline' && 'bx--btn--copy'}
+          {expanded && 'bx--snippet--expand'}
-          {expanded &&
+          {light && 'bx--snippet--light'}
-        'bx--snippet--expand'}
+          {hideCopyButton && 'bx--snippet--no-copy'}
-          {light &&
-        'bx--snippet--light'}
-          {hideCopyButton &&
-        'bx--snippet--no-copy'}
           {wrapText && 'bx--snippet--wraptext'}"
       {...$$restProps}
       on:click
@@ -194,8 +190,7 @@
       class:bx--snippet-container="{true}"
       style="width: 100%; min-height: {minHeight}px; max-height: {maxHeight}"
     >
-      <pre
+      <pre bind:this="{ref}">
-        bind:this="{ref}">
         <code><slot>{code}</slot></code>
       </pre>
     </div>

src/DatePicker/DatePicker.svelte

@@ -229,8 +229,7 @@
     class:bx--date-picker="{true}"
     class:bx--date-picker--short="{short}"
     class:bx--date-picker--light="{light}"
-    class="{datePickerType &&
+    class="{datePickerType && `bx--date-picker--${datePickerType}`}
-      `bx--date-picker--${datePickerType}`}
       {datePickerType === 'range' &&
       $labelTextEmpty &&
       'bx--date-picker--nolabel'}"

src/Dropdown/Dropdown.svelte

@@ -170,14 +170,10 @@
       'bx--dropdown--invalid'} {!invalid &&
       warn &&
       'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
-      {size ===
+      {size === 'sm' && 'bx--dropdown--sm'}
-      'sm' && 'bx--dropdown--sm'}
+      {size === 'xl' && 'bx--dropdown--xl'}
-      {size === 'xl' &&
+      {inline && 'bx--dropdown--inline'}
-      'bx--dropdown--xl'}
+      {disabled && 'bx--dropdown--disabled'}
-      {inline &&
-      'bx--dropdown--inline'}
-      {disabled &&
-      'bx--dropdown--disabled'}
       {light && 'bx--dropdown--light'}"
     on:click="{({ target }) => {
       open = ref.contains(target) ? !open : false;

src/MultiSelect/MultiSelect.svelte

@@ -280,14 +280,10 @@
     warnText="{warnText}"
     class="bx--multi-select {direction === 'top' &&
       'bx--list-box--up'} {filterable && 'bx--combo-box'}
-      {filterable &&
+      {filterable && 'bx--multi-select--filterable'}
-      'bx--multi-select--filterable'}
+      {invalid && 'bx--multi-select--invalid'}
-      {invalid &&
+      {inline && 'bx--multi-select--inline'}
-      'bx--multi-select--invalid'}
+      {checked.length > 0 && 'bx--multi-select--selected'}"
-      {inline &&
-      'bx--multi-select--inline'}
-      {checked.length > 0 &&
-      'bx--multi-select--selected'}"
   >
     {#if invalid}
       <WarningFilled16 class="bx--list-box__invalid-icon" />

src/ProgressIndicator/ProgressStep.svelte

@@ -95,8 +95,7 @@
         <title>{description}</title>
         <path
           d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3
-          0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
+          0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
-        ></path>
       </svg>
     {/if}
     <slot props="{{ class: 'bx--progress-label' }}">

src/Select/Select.svelte

@@ -60,6 +60,9 @@
   /** Obtain a reference to the select HTML element */
   export let ref = null;
 
+  /** Set to `true` to mark the field as required */
+  export let required = false;
+
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";
   import { writable } from "svelte/store";
   import ChevronDown16 from "../icons/ChevronDown16.svelte";
@@ -112,6 +115,7 @@
             aria-describedby="{invalid ? errorId : undefined}"
             aria-invalid="{invalid || undefined}"
             disabled="{disabled || undefined}"
+            required="{required || undefined}"
             id="{id}"
             name="{name}"
             class:bx--select-input="{true}"
@@ -156,6 +160,7 @@
           name="{name}"
           aria-describedby="{invalid ? errorId : undefined}"
           disabled="{disabled || undefined}"
+          required="{required || undefined}"
           aria-invalid="{invalid || undefined}"
           class:bx--select-input="{true}"
           class="{size && `bx--select-input--${size}`}"

src/TextInput/PasswordInput.svelte

@@ -198,10 +198,8 @@
         class:bx--btn--disabled="{disabled}"
         class:bx--tooltip__trigger="{true}"
         class:bx--tooltip--a11y="{true}"
-        class="{tooltipPosition &&
+        class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
-          `bx--tooltip--${tooltipPosition}`}
+        {tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
-        {tooltipAlignment &&
-          `bx--tooltip--align-${tooltipAlignment}`}"
         on:click="{() => {
           type = type === 'password' ? 'text' : 'password';
         }}"

src/TreeView/TreeViewNode.svelte

@@ -55,13 +55,8 @@
   let refLabel = null;
   let prevActiveId = undefined;
 
-  const {
+  const { activeNodeId, selectedNodeIds, clickNode, selectNode, focusNode } =
-    activeNodeId,
+    getContext("TreeView");
-    selectedNodeIds,
-    clickNode,
-    selectNode,
-    focusNode,
-  } = getContext("TreeView");
   const offset = () =>
     computeTreeLeafDepth(refLabel) + (leaf && icon ? 2 : 2.5);
 

types/Select/Select.svelte.d.ts

@@ -95,6 +95,12 @@ export interface SelectProps
    * @default null
    */
   ref?: null | HTMLSelectElement;
+
+  /**
+   * Set to `true` to mark the field as required
+   * @default false
+   */
+  required?: boolean;
 }
 
 export default class Select extends SvelteComponentTyped<

yarn.lock

@@ -2292,10 +2292,10 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-sveld@^0.10.2:
+sveld@^0.11.1:
-  version "0.10.2"
+  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.10.2.tgz#24366250a2b8021d76a0c4c641adc4f858c2a56f"
+  resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.11.1.tgz#2b24fb8dae6fcd9bb14f826c89480cf88b079dca"
-  integrity sha512-51pf6aNw9Ks13/7DiA7UvriqittW6320g/14a9XxiN5/f7Yg6/IfByoKkFHyTf2RdeREvjITuJT5G8Me0tDvxw==
+  integrity sha512-cb6sUB6yVomLgeDny0sXSGxgNGrwYPg8CHuI0k80DcGFNF2ML6k7yZeVeFjWjh2Tmj8+/PgSLJj5IYuZEjyQVA==
   dependencies:
     "@rollup/plugin-node-resolve" "^11.0.1"
     acorn "^8.4.1"