@webstudio-is/sdk-components-react-remix 0.87.1 → 0.89.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -23,7 +23,12 @@ __export(link_props_exports, {
23
23
  module.exports = __toCommonJS(link_props_exports);
24
24
  const props = {
25
25
  about: { required: false, control: "text", type: "string" },
26
- accessKey: { required: false, control: "text", type: "string" },
26
+ accessKey: {
27
+ required: false,
28
+ control: "text",
29
+ type: "string",
30
+ description: "Keyboard shortcut to activate or add focus to the element."
31
+ },
27
32
  "aria-activedescendant": {
28
33
  description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
29
34
  required: false,
@@ -179,7 +184,7 @@ const props = {
179
184
  type: "string"
180
185
  },
181
186
  "aria-label": {
182
- description: "Defines a string value that labels the current element.\n@see aria-labelledby.",
187
+ description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
183
188
  required: false,
184
189
  control: "text",
185
190
  type: "string"
@@ -355,22 +360,77 @@ const props = {
355
360
  control: "text",
356
361
  type: "string"
357
362
  },
358
- autoCapitalize: { required: false, control: "text", type: "string" },
363
+ autoCapitalize: {
364
+ required: false,
365
+ control: "text",
366
+ type: "string",
367
+ description: "Sets whether input is automatically capitalized when entered by user."
368
+ },
359
369
  autoCorrect: { required: false, control: "text", type: "string" },
360
- autoFocus: { required: false, control: "boolean", type: "boolean" },
370
+ autoFocus: {
371
+ required: false,
372
+ control: "boolean",
373
+ type: "boolean",
374
+ description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
375
+ },
361
376
  autoSave: { required: false, control: "text", type: "string" },
362
377
  className: { required: false, control: "text", type: "string" },
363
- color: { required: false, control: "color", type: "string" },
364
- content: { required: false, control: "text", type: "string" },
365
- contextMenu: { required: false, control: "text", type: "string" },
378
+ color: {
379
+ required: false,
380
+ control: "color",
381
+ type: "string",
382
+ description: "This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
383
+ },
384
+ content: {
385
+ required: false,
386
+ control: "text",
387
+ type: "string",
388
+ description: "A value associated with http-equiv orname depending on the context."
389
+ },
390
+ contextMenu: {
391
+ required: false,
392
+ control: "text",
393
+ type: "string",
394
+ description: "Defines the ID of a menu element which willserve as the element's context menu."
395
+ },
366
396
  datatype: { required: false, control: "text", type: "string" },
367
397
  defaultChecked: { required: false, control: "boolean", type: "boolean" },
368
- dir: { required: false, control: "text", type: "string" },
369
- draggable: { required: false, control: "boolean", type: "boolean" },
370
- hidden: { required: false, control: "boolean", type: "boolean" },
371
- href: { required: false, control: "text", type: "string" },
372
- hrefLang: { required: false, control: "text", type: "string" },
373
- id: { required: false, control: "text", type: "string" },
398
+ dir: {
399
+ required: false,
400
+ control: "text",
401
+ type: "string",
402
+ description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
403
+ },
404
+ draggable: {
405
+ required: false,
406
+ control: "boolean",
407
+ type: "boolean",
408
+ description: "Defines whether the element can be dragged."
409
+ },
410
+ hidden: {
411
+ required: false,
412
+ control: "boolean",
413
+ type: "boolean",
414
+ description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
415
+ },
416
+ href: {
417
+ required: false,
418
+ control: "text",
419
+ type: "string",
420
+ description: "The URL of a linked resource."
421
+ },
422
+ hrefLang: {
423
+ required: false,
424
+ control: "text",
425
+ type: "string",
426
+ description: "Specifies the language of the linked resource."
427
+ },
428
+ id: {
429
+ required: false,
430
+ control: "text",
431
+ type: "string",
432
+ description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
433
+ },
374
434
  inputMode: {
375
435
  description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
376
436
  required: false,
@@ -398,16 +458,37 @@ const props = {
398
458
  itemRef: { required: false, control: "text", type: "string" },
399
459
  itemScope: { required: false, control: "boolean", type: "boolean" },
400
460
  itemType: { required: false, control: "text", type: "string" },
401
- lang: { required: false, control: "text", type: "string" },
402
- media: { required: false, control: "text", type: "string" },
461
+ lang: {
462
+ required: false,
463
+ control: "text",
464
+ type: "string",
465
+ description: "Defines the language used in the element."
466
+ },
467
+ media: {
468
+ required: false,
469
+ control: "text",
470
+ type: "string",
471
+ description: "Specifies a hint of the media for which the linked resource was designed."
472
+ },
403
473
  nonce: { required: false, control: "text", type: "string" },
404
- ping: { required: false, control: "text", type: "string" },
405
- placeholder: { required: false, control: "text", type: "string" },
474
+ ping: {
475
+ required: false,
476
+ control: "text",
477
+ type: "string",
478
+ description: "The ping attribute specifies a space-separated list of URLs to be notified if a user follows the hyperlink."
479
+ },
480
+ placeholder: {
481
+ required: false,
482
+ control: "text",
483
+ type: "string",
484
+ description: "Provides a hint to the user of what can be entered in the field."
485
+ },
406
486
  prefetch: {
407
487
  required: false,
408
488
  control: "select",
409
489
  type: "string",
410
- options: ["none", "intent", "render", "viewport"]
490
+ options: ["none", "intent", "render", "viewport"],
491
+ description: "Controls when and if the link prefetches the resources that the next page needs to make loading faster. \u201CIntent\u201D will prefetch when the link is hovered or focused. \u201CRender\u201D will prefetch when the link is rendered. \u201CViewport\u201D will prefetch when the link is in the viewport. \u201CNone\u201D will not prefetch."
411
492
  },
412
493
  prefix: { required: false, control: "text", type: "string" },
413
494
  preventScrollReset: { required: false, control: "boolean", type: "boolean" },
@@ -427,18 +508,39 @@ const props = {
427
508
  "strict-origin",
428
509
  "strict-origin-when-cross-origin",
429
510
  "unsafe-url"
430
- ]
511
+ ],
512
+ description: "Specifies which referrer is sent when fetching the resource."
513
+ },
514
+ rel: {
515
+ required: false,
516
+ control: "text",
517
+ type: "string",
518
+ description: "Specifies the relationship of the target object to the link object."
431
519
  },
432
- rel: { required: false, control: "text", type: "string" },
433
520
  reloadDocument: { required: false, control: "boolean", type: "boolean" },
434
521
  replace: { required: false, control: "boolean", type: "boolean" },
435
522
  resource: { required: false, control: "text", type: "string" },
436
523
  results: { required: false, control: "number", type: "number" },
437
524
  rev: { required: false, control: "text", type: "string" },
438
- role: { required: false, control: "text", type: "string" },
525
+ role: {
526
+ required: false,
527
+ control: "text",
528
+ type: "string",
529
+ description: "Defines an explicit role for an element for use by assistive technologies."
530
+ },
439
531
  security: { required: false, control: "text", type: "string" },
440
- slot: { required: false, control: "text", type: "string" },
441
- spellCheck: { required: false, control: "boolean", type: "boolean" },
532
+ slot: {
533
+ required: false,
534
+ control: "text",
535
+ type: "string",
536
+ description: "Assigns a slot in a shadow DOM shadow tree to an element."
537
+ },
538
+ spellCheck: {
539
+ required: false,
540
+ control: "boolean",
541
+ type: "boolean",
542
+ description: "Indicates whether spell checking is allowed for the element."
543
+ },
442
544
  suppressContentEditableWarning: {
443
545
  required: false,
444
546
  control: "boolean",
@@ -449,21 +551,38 @@ const props = {
449
551
  control: "boolean",
450
552
  type: "boolean"
451
553
  },
452
- tabIndex: { required: false, control: "number", type: "number" },
554
+ tabIndex: {
555
+ required: false,
556
+ control: "number",
557
+ type: "number",
558
+ description: "Overrides the browser's default tab order and follows the one specified instead."
559
+ },
453
560
  target: {
454
561
  required: false,
455
562
  control: "select",
456
563
  type: "string",
457
- options: ["_self", "_blank", "_parent", "_top"]
564
+ options: ["_self", "_blank", "_parent", "_top"],
565
+ description: "Specifies where to open the linked document (in the case of an <a> element) or where to display the response received (in the case of a <form> element)"
566
+ },
567
+ title: {
568
+ required: false,
569
+ control: "text",
570
+ type: "string",
571
+ description: "Text to be displayed in a tooltip when hovering over the element."
458
572
  },
459
- title: { required: false, control: "text", type: "string" },
460
573
  translate: {
461
574
  required: false,
462
575
  control: "radio",
463
576
  type: "string",
464
- options: ["yes", "no"]
577
+ options: ["yes", "no"],
578
+ description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
579
+ },
580
+ type: {
581
+ required: false,
582
+ control: "text",
583
+ type: "string",
584
+ description: "Defines the type of the element."
465
585
  },
466
- type: { required: false, control: "text", type: "string" },
467
586
  typeof: { required: false, control: "text", type: "string" },
468
587
  unselectable: {
469
588
  required: false,
@@ -23,7 +23,12 @@ __export(rich_text_link_props_exports, {
23
23
  module.exports = __toCommonJS(rich_text_link_props_exports);
24
24
  const props = {
25
25
  about: { required: false, control: "text", type: "string" },
26
- accessKey: { required: false, control: "text", type: "string" },
26
+ accessKey: {
27
+ required: false,
28
+ control: "text",
29
+ type: "string",
30
+ description: "Keyboard shortcut to activate or add focus to the element."
31
+ },
27
32
  "aria-activedescendant": {
28
33
  description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
29
34
  required: false,
@@ -179,7 +184,7 @@ const props = {
179
184
  type: "string"
180
185
  },
181
186
  "aria-label": {
182
- description: "Defines a string value that labels the current element.\n@see aria-labelledby.",
187
+ description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
183
188
  required: false,
184
189
  control: "text",
185
190
  type: "string"
@@ -355,22 +360,77 @@ const props = {
355
360
  control: "text",
356
361
  type: "string"
357
362
  },
358
- autoCapitalize: { required: false, control: "text", type: "string" },
363
+ autoCapitalize: {
364
+ required: false,
365
+ control: "text",
366
+ type: "string",
367
+ description: "Sets whether input is automatically capitalized when entered by user."
368
+ },
359
369
  autoCorrect: { required: false, control: "text", type: "string" },
360
- autoFocus: { required: false, control: "boolean", type: "boolean" },
370
+ autoFocus: {
371
+ required: false,
372
+ control: "boolean",
373
+ type: "boolean",
374
+ description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
375
+ },
361
376
  autoSave: { required: false, control: "text", type: "string" },
362
377
  className: { required: false, control: "text", type: "string" },
363
- color: { required: false, control: "color", type: "string" },
364
- content: { required: false, control: "text", type: "string" },
365
- contextMenu: { required: false, control: "text", type: "string" },
378
+ color: {
379
+ required: false,
380
+ control: "color",
381
+ type: "string",
382
+ description: "This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
383
+ },
384
+ content: {
385
+ required: false,
386
+ control: "text",
387
+ type: "string",
388
+ description: "A value associated with http-equiv orname depending on the context."
389
+ },
390
+ contextMenu: {
391
+ required: false,
392
+ control: "text",
393
+ type: "string",
394
+ description: "Defines the ID of a menu element which willserve as the element's context menu."
395
+ },
366
396
  datatype: { required: false, control: "text", type: "string" },
367
397
  defaultChecked: { required: false, control: "boolean", type: "boolean" },
368
- dir: { required: false, control: "text", type: "string" },
369
- draggable: { required: false, control: "boolean", type: "boolean" },
370
- hidden: { required: false, control: "boolean", type: "boolean" },
371
- href: { required: false, control: "text", type: "string" },
372
- hrefLang: { required: false, control: "text", type: "string" },
373
- id: { required: false, control: "text", type: "string" },
398
+ dir: {
399
+ required: false,
400
+ control: "text",
401
+ type: "string",
402
+ description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
403
+ },
404
+ draggable: {
405
+ required: false,
406
+ control: "boolean",
407
+ type: "boolean",
408
+ description: "Defines whether the element can be dragged."
409
+ },
410
+ hidden: {
411
+ required: false,
412
+ control: "boolean",
413
+ type: "boolean",
414
+ description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
415
+ },
416
+ href: {
417
+ required: false,
418
+ control: "text",
419
+ type: "string",
420
+ description: "The URL of a linked resource."
421
+ },
422
+ hrefLang: {
423
+ required: false,
424
+ control: "text",
425
+ type: "string",
426
+ description: "Specifies the language of the linked resource."
427
+ },
428
+ id: {
429
+ required: false,
430
+ control: "text",
431
+ type: "string",
432
+ description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
433
+ },
374
434
  inputMode: {
375
435
  description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
376
436
  required: false,
@@ -398,11 +458,31 @@ const props = {
398
458
  itemRef: { required: false, control: "text", type: "string" },
399
459
  itemScope: { required: false, control: "boolean", type: "boolean" },
400
460
  itemType: { required: false, control: "text", type: "string" },
401
- lang: { required: false, control: "text", type: "string" },
402
- media: { required: false, control: "text", type: "string" },
461
+ lang: {
462
+ required: false,
463
+ control: "text",
464
+ type: "string",
465
+ description: "Defines the language used in the element."
466
+ },
467
+ media: {
468
+ required: false,
469
+ control: "text",
470
+ type: "string",
471
+ description: "Specifies a hint of the media for which the linked resource was designed."
472
+ },
403
473
  nonce: { required: false, control: "text", type: "string" },
404
- ping: { required: false, control: "text", type: "string" },
405
- placeholder: { required: false, control: "text", type: "string" },
474
+ ping: {
475
+ required: false,
476
+ control: "text",
477
+ type: "string",
478
+ description: "The ping attribute specifies a space-separated list of URLs to be notified if a user follows the hyperlink."
479
+ },
480
+ placeholder: {
481
+ required: false,
482
+ control: "text",
483
+ type: "string",
484
+ description: "Provides a hint to the user of what can be entered in the field."
485
+ },
406
486
  prefetch: {
407
487
  required: false,
408
488
  control: "select",
@@ -427,18 +507,39 @@ const props = {
427
507
  "strict-origin",
428
508
  "strict-origin-when-cross-origin",
429
509
  "unsafe-url"
430
- ]
510
+ ],
511
+ description: "Specifies which referrer is sent when fetching the resource."
512
+ },
513
+ rel: {
514
+ required: false,
515
+ control: "text",
516
+ type: "string",
517
+ description: "Specifies the relationship of the target object to the link object."
431
518
  },
432
- rel: { required: false, control: "text", type: "string" },
433
519
  reloadDocument: { required: false, control: "boolean", type: "boolean" },
434
520
  replace: { required: false, control: "boolean", type: "boolean" },
435
521
  resource: { required: false, control: "text", type: "string" },
436
522
  results: { required: false, control: "number", type: "number" },
437
523
  rev: { required: false, control: "text", type: "string" },
438
- role: { required: false, control: "text", type: "string" },
524
+ role: {
525
+ required: false,
526
+ control: "text",
527
+ type: "string",
528
+ description: "Defines an explicit role for an element for use by assistive technologies."
529
+ },
439
530
  security: { required: false, control: "text", type: "string" },
440
- slot: { required: false, control: "text", type: "string" },
441
- spellCheck: { required: false, control: "boolean", type: "boolean" },
531
+ slot: {
532
+ required: false,
533
+ control: "text",
534
+ type: "string",
535
+ description: "Assigns a slot in a shadow DOM shadow tree to an element."
536
+ },
537
+ spellCheck: {
538
+ required: false,
539
+ control: "boolean",
540
+ type: "boolean",
541
+ description: "Indicates whether spell checking is allowed for the element."
542
+ },
442
543
  suppressContentEditableWarning: {
443
544
  required: false,
444
545
  control: "boolean",
@@ -449,21 +550,38 @@ const props = {
449
550
  control: "boolean",
450
551
  type: "boolean"
451
552
  },
452
- tabIndex: { required: false, control: "number", type: "number" },
553
+ tabIndex: {
554
+ required: false,
555
+ control: "number",
556
+ type: "number",
557
+ description: "Overrides the browser's default tab order and follows the one specified instead."
558
+ },
453
559
  target: {
454
560
  required: false,
455
561
  control: "select",
456
562
  type: "string",
457
- options: ["_self", "_blank", "_parent", "_top"]
563
+ options: ["_self", "_blank", "_parent", "_top"],
564
+ description: "Specifies where to open the linked document (in the case of an <a> element) or where to display the response received (in the case of a <form> element)"
565
+ },
566
+ title: {
567
+ required: false,
568
+ control: "text",
569
+ type: "string",
570
+ description: "Text to be displayed in a tooltip when hovering over the element."
458
571
  },
459
- title: { required: false, control: "text", type: "string" },
460
572
  translate: {
461
573
  required: false,
462
574
  control: "radio",
463
575
  type: "string",
464
- options: ["yes", "no"]
576
+ options: ["yes", "no"],
577
+ description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
578
+ },
579
+ type: {
580
+ required: false,
581
+ control: "text",
582
+ type: "string",
583
+ description: "Defines the type of the element."
465
584
  },
466
- type: { required: false, control: "text", type: "string" },
467
585
  typeof: { required: false, control: "text", type: "string" },
468
586
  unselectable: {
469
587
  required: false,
@@ -37,6 +37,7 @@ const meta = {
37
37
  type: "container",
38
38
  invalidAncestors: ["Form"],
39
39
  label: "Form",
40
+ description: "Collect information from your users using validation rules.",
40
41
  icon: import_svg.FormIcon,
41
42
  presetStyle,
42
43
  order: 0,
package/lib/form.ws.js CHANGED
@@ -15,6 +15,7 @@ const meta = {
15
15
  type: "container",
16
16
  invalidAncestors: ["Form"],
17
17
  label: "Form",
18
+ description: "Collect information from your users using validation rules.",
18
19
  icon: FormIcon,
19
20
  presetStyle,
20
21
  order: 0,
@@ -3,6 +3,7 @@ import { type FormProps } from "@remix-run/react";
3
3
  export declare const defaultTag = "form";
4
4
  type State = "initial" | "success" | "error";
5
5
  export declare const Form: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLFormElement> & import("react").FormHTMLAttributes<HTMLFormElement> & {
6
+ /** Use this property to reveal the Success and Error states on the canvas so they can be styled. The Initial state is displayed when the page first opens. The Success and Error states are displayed depending on whether the Form submits successfully or unsuccessfully. */
6
7
  state?: State | undefined;
7
8
  encType?: FormProps["encType"];
8
9
  }, "ref"> & import("react").RefAttributes<HTMLFormElement>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webstudio-is/sdk-components-react-remix",
3
- "version": "0.87.1",
3
+ "version": "0.89.0",
4
4
  "description": "Webstudio components for Remix",
5
5
  "author": "Webstudio <github@webstudio.is>",
6
6
  "homepage": "https://webstudio.is",
@@ -38,11 +38,11 @@
38
38
  "react-dom": "^18.2.0"
39
39
  },
40
40
  "dependencies": {
41
- "@webstudio-is/form-handlers": "^0.87.1",
42
- "@webstudio-is/generate-arg-types": "^0.87.1",
43
- "@webstudio-is/icons": "^0.87.1",
44
- "@webstudio-is/react-sdk": "^0.87.1",
45
- "@webstudio-is/sdk-components-react": "^0.87.1"
41
+ "@webstudio-is/form-handlers": "^0.89.0",
42
+ "@webstudio-is/generate-arg-types": "^0.89.0",
43
+ "@webstudio-is/icons": "^0.89.0",
44
+ "@webstudio-is/react-sdk": "^0.89.0",
45
+ "@webstudio-is/sdk-components-react": "^0.89.0"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@remix-run/react": "^1.19.2",