@spectrum-web-components/picker 0.41.2 → 0.42.1

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.
Files changed (31) hide show
  1. package/README.md +29 -1
  2. package/custom-elements.json +154 -98
  3. package/package.json +17 -16
  4. package/src/Picker.d.ts +10 -4
  5. package/src/Picker.dev.js +65 -47
  6. package/src/Picker.dev.js.map +3 -3
  7. package/src/Picker.js +33 -24
  8. package/src/Picker.js.map +3 -3
  9. package/src/picker.css.dev.js +1 -1
  10. package/src/picker.css.dev.js.map +1 -1
  11. package/src/picker.css.js +1 -1
  12. package/src/picker.css.js.map +1 -1
  13. package/src/spectrum-config.js +18 -0
  14. package/src/spectrum-picker.css.dev.js +1 -1
  15. package/src/spectrum-picker.css.dev.js.map +1 -1
  16. package/src/spectrum-picker.css.js +1 -1
  17. package/src/spectrum-picker.css.js.map +1 -1
  18. package/stories/args.js +2 -1
  19. package/stories/args.js.map +2 -2
  20. package/stories/picker-pending.stories.js +16 -0
  21. package/stories/picker-pending.stories.js.map +7 -0
  22. package/stories/picker-sizes.stories.js +28 -2
  23. package/stories/picker-sizes.stories.js.map +2 -2
  24. package/stories/picker.stories.js +50 -17
  25. package/stories/picker.stories.js.map +2 -2
  26. package/stories/template.js +7 -2
  27. package/stories/template.js.map +2 -2
  28. package/test/index.js +88 -8
  29. package/test/index.js.map +3 -3
  30. package/test/picker-pending.test-vrt.js +5 -0
  31. package/test/picker-pending.test-vrt.js.map +7 -0
package/README.md CHANGED
@@ -414,7 +414,7 @@ When the `value` of an `<sp-picker>` matches the `value` attribute or the trimme
414
414
  </sp-picker>
415
415
  <br />
416
416
  <br />
417
- <sp-field-label for="picker-disabled">Quiet:</sp-field-label>
417
+ <sp-field-label for="picker-disabled-quiet">Quiet:</sp-field-label>
418
418
  <sp-picker
419
419
  label="Select a Country with a very long label, too long in fact"
420
420
  disabled
@@ -431,6 +431,34 @@ When the `value` of an `<sp-picker>` matches the `value` attribute or the trimme
431
431
  </sp-picker>
432
432
  ```
433
433
 
434
+ ### Pending
435
+
436
+ When in pending state, `<sp-picker>` elements will not respond to click events and will be delivered with a `<sp-progress-circle>` to visually outline that it is pending. It will not toggle open or display its `<sp-menu-item>` descendants until the attribute is removed.
437
+
438
+ ```html
439
+ <sp-field-label for="picker-loading">Standard:</sp-field-label>
440
+ <sp-picker id="picker-loading" label="Loading blending modes..." pending>
441
+ <sp-menu-item>Pass through</sp-menu-item>
442
+ <sp-menu-item>Normal</sp-menu-item>
443
+ <sp-menu-item>Multiply</sp-menu-item>
444
+ <sp-menu-item>Screen</sp-menu-item>
445
+ </sp-picker>
446
+ <br />
447
+ <br />
448
+ <sp-field-label for="picker-loading-quiet">Quiet:</sp-field-label>
449
+ <sp-picker
450
+ id="picker-loading-quiet"
451
+ label="Loading blending modes..."
452
+ pending
453
+ quiet
454
+ >
455
+ <sp-menu-item>Pass through</sp-menu-item>
456
+ <sp-menu-item>Normal</sp-menu-item>
457
+ <sp-menu-item>Multiply</sp-menu-item>
458
+ <sp-menu-item>Screen</sp-menu-item>
459
+ </sp-picker>
460
+ ```
461
+
434
462
  ## Accessibility
435
463
 
436
464
  To render accessibly, an `<sp-picker>` element should be paired with an `<sp-field-label>` element that has a `for` attribute referencing the `id` of the `<sp-picker>` element. For an accessible label that renders within the bounds of the picker itself, but still fulfills the accessibility contract, use the `label` attribute or a `<span slot="label">` as a child element of `<sp-picker>`.
package/custom-elements.json CHANGED
@@ -61,6 +61,12 @@
61
61
  },
62
62
  "privacy": "public"
63
63
  },
64
+ {
65
+ "kind": "field",
66
+ "name": "dependencyManager",
67
+ "privacy": "private",
68
+ "default": "new DependencyManagerController(this)"
69
+ },
64
70
  {
65
71
  "kind": "field",
66
72
  "name": "deprecatedMenu",
@@ -113,6 +119,29 @@
113
119
  "attribute": "invalid",
114
120
  "reflects": true
115
121
  },
122
+ {
123
+ "kind": "field",
124
+ "name": "pending",
125
+ "type": {
126
+ "text": "boolean"
127
+ },
128
+ "privacy": "public",
129
+ "default": "false",
130
+ "description": "Whether the items are currently loading.",
131
+ "attribute": "pending",
132
+ "reflects": true
133
+ },
134
+ {
135
+ "kind": "field",
136
+ "name": "pendingLabel",
137
+ "type": {
138
+ "text": "string"
139
+ },
140
+ "privacy": "public",
141
+ "default": "'Pending'",
142
+ "description": "Defines a string value that labels the Picker while it is in pending state.",
143
+ "attribute": "pending-label"
144
+ },
116
145
  {
117
146
  "kind": "field",
118
147
  "name": "label",
@@ -542,6 +571,24 @@
542
571
  }
543
572
  ]
544
573
  },
574
+ {
575
+ "kind": "method",
576
+ "name": "handleBeforetoggle",
577
+ "privacy": "protected",
578
+ "return": {
579
+ "type": {
580
+ "text": "void"
581
+ }
582
+ },
583
+ "parameters": [
584
+ {
585
+ "name": "event",
586
+ "type": {
587
+ "text": "Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }"
588
+ }
589
+ }
590
+ ]
591
+ },
545
592
  {
546
593
  "kind": "method",
547
594
  "name": "renderLabelContent",
@@ -619,49 +666,6 @@
619
666
  "privacy": "protected",
620
667
  "readonly": true
621
668
  },
622
- {
623
- "kind": "field",
624
- "name": "dependenciesLoaded",
625
- "type": {
626
- "text": "boolean"
627
- },
628
- "privacy": "private",
629
- "default": "false"
630
- },
631
- {
632
- "kind": "field",
633
- "name": "dependenciesToLoad",
634
- "type": {
635
- "text": "Record<string, boolean>"
636
- },
637
- "privacy": "private",
638
- "default": "{}"
639
- },
640
- {
641
- "kind": "method",
642
- "name": "trackDependency",
643
- "privacy": "private",
644
- "return": {
645
- "type": {
646
- "text": "void"
647
- }
648
- },
649
- "parameters": [
650
- {
651
- "name": "dependency",
652
- "type": {
653
- "text": "string"
654
- }
655
- },
656
- {
657
- "name": "flag",
658
- "optional": true,
659
- "type": {
660
- "text": "boolean"
661
- }
662
- }
663
- ]
664
- },
665
669
  {
666
670
  "kind": "method",
667
671
  "name": "renderContainer",
@@ -842,6 +846,24 @@
842
846
  "default": "false",
843
847
  "fieldName": "invalid"
844
848
  },
849
+ {
850
+ "name": "pending",
851
+ "type": {
852
+ "text": "boolean"
853
+ },
854
+ "default": "false",
855
+ "description": "Whether the items are currently loading.",
856
+ "fieldName": "pending"
857
+ },
858
+ {
859
+ "name": "pending-label",
860
+ "type": {
861
+ "text": "string"
862
+ },
863
+ "default": "'Pending'",
864
+ "description": "Defines a string value that labels the Picker while it is in pending state.",
865
+ "fieldName": "pendingLabel"
866
+ },
845
867
  {
846
868
  "name": "label",
847
869
  "type": {
@@ -971,6 +993,16 @@
971
993
  "module": "src/Picker.js"
972
994
  }
973
995
  },
996
+ {
997
+ "kind": "field",
998
+ "name": "dependencyManager",
999
+ "privacy": "private",
1000
+ "default": "new DependencyManagerController(this)",
1001
+ "inheritedFrom": {
1002
+ "name": "PickerBase",
1003
+ "module": "src/Picker.js"
1004
+ }
1005
+ },
974
1006
  {
975
1007
  "kind": "field",
976
1008
  "name": "deprecatedMenu",
@@ -1043,6 +1075,37 @@
1043
1075
  "module": "src/Picker.js"
1044
1076
  }
1045
1077
  },
1078
+ {
1079
+ "kind": "field",
1080
+ "name": "pending",
1081
+ "type": {
1082
+ "text": "boolean"
1083
+ },
1084
+ "privacy": "public",
1085
+ "default": "false",
1086
+ "description": "Whether the items are currently loading.",
1087
+ "attribute": "pending",
1088
+ "reflects": true,
1089
+ "inheritedFrom": {
1090
+ "name": "PickerBase",
1091
+ "module": "src/Picker.js"
1092
+ }
1093
+ },
1094
+ {
1095
+ "kind": "field",
1096
+ "name": "pendingLabel",
1097
+ "type": {
1098
+ "text": "string"
1099
+ },
1100
+ "privacy": "public",
1101
+ "default": "'Pending'",
1102
+ "description": "Defines a string value that labels the Picker while it is in pending state.",
1103
+ "attribute": "pending-label",
1104
+ "inheritedFrom": {
1105
+ "name": "PickerBase",
1106
+ "module": "src/Picker.js"
1107
+ }
1108
+ },
1046
1109
  {
1047
1110
  "kind": "field",
1048
1111
  "name": "label",
@@ -1598,6 +1661,28 @@
1598
1661
  "module": "src/Picker.js"
1599
1662
  }
1600
1663
  },
1664
+ {
1665
+ "kind": "method",
1666
+ "name": "handleBeforetoggle",
1667
+ "privacy": "protected",
1668
+ "return": {
1669
+ "type": {
1670
+ "text": "void"
1671
+ }
1672
+ },
1673
+ "parameters": [
1674
+ {
1675
+ "name": "event",
1676
+ "type": {
1677
+ "text": "Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }"
1678
+ }
1679
+ }
1680
+ ],
1681
+ "inheritedFrom": {
1682
+ "name": "PickerBase",
1683
+ "module": "src/Picker.js"
1684
+ }
1685
+ },
1601
1686
  {
1602
1687
  "kind": "method",
1603
1688
  "name": "renderLabelContent",
@@ -1703,61 +1788,6 @@
1703
1788
  "module": "src/Picker.js"
1704
1789
  }
1705
1790
  },
1706
- {
1707
- "kind": "field",
1708
- "name": "dependenciesLoaded",
1709
- "type": {
1710
- "text": "boolean"
1711
- },
1712
- "privacy": "private",
1713
- "default": "false",
1714
- "inheritedFrom": {
1715
- "name": "PickerBase",
1716
- "module": "src/Picker.js"
1717
- }
1718
- },
1719
- {
1720
- "kind": "field",
1721
- "name": "dependenciesToLoad",
1722
- "type": {
1723
- "text": "Record<string, boolean>"
1724
- },
1725
- "privacy": "private",
1726
- "default": "{}",
1727
- "inheritedFrom": {
1728
- "name": "PickerBase",
1729
- "module": "src/Picker.js"
1730
- }
1731
- },
1732
- {
1733
- "kind": "method",
1734
- "name": "trackDependency",
1735
- "privacy": "private",
1736
- "return": {
1737
- "type": {
1738
- "text": "void"
1739
- }
1740
- },
1741
- "parameters": [
1742
- {
1743
- "name": "dependency",
1744
- "type": {
1745
- "text": "string"
1746
- }
1747
- },
1748
- {
1749
- "name": "flag",
1750
- "optional": true,
1751
- "type": {
1752
- "text": "boolean"
1753
- }
1754
- }
1755
- ],
1756
- "inheritedFrom": {
1757
- "name": "PickerBase",
1758
- "module": "src/Picker.js"
1759
- }
1760
- },
1761
1791
  {
1762
1792
  "kind": "method",
1763
1793
  "name": "renderContainer",
@@ -2029,6 +2059,32 @@
2029
2059
  "module": "src/Picker.ts"
2030
2060
  }
2031
2061
  },
2062
+ {
2063
+ "name": "pending",
2064
+ "type": {
2065
+ "text": "boolean"
2066
+ },
2067
+ "default": "false",
2068
+ "description": "Whether the items are currently loading.",
2069
+ "fieldName": "pending",
2070
+ "inheritedFrom": {
2071
+ "name": "PickerBase",
2072
+ "module": "src/Picker.ts"
2073
+ }
2074
+ },
2075
+ {
2076
+ "name": "pending-label",
2077
+ "type": {
2078
+ "text": "string"
2079
+ },
2080
+ "default": "'Pending'",
2081
+ "description": "Defines a string value that labels the Picker while it is in pending state.",
2082
+ "fieldName": "pendingLabel",
2083
+ "inheritedFrom": {
2084
+ "name": "PickerBase",
2085
+ "module": "src/Picker.ts"
2086
+ }
2087
+ },
2032
2088
  {
2033
2089
  "name": "label",
2034
2090
  "type": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/picker",
3
- "version": "0.41.2",
3
+ "version": "0.42.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -65,22 +65,23 @@
65
65
  "lit-html"
66
66
  ],
67
67
  "dependencies": {
68
- "@spectrum-web-components/base": "^0.41.2",
69
- "@spectrum-web-components/button": "^0.41.2",
70
- "@spectrum-web-components/field-label": "^0.41.2",
71
- "@spectrum-web-components/icon": "^0.41.2",
72
- "@spectrum-web-components/icons-ui": "^0.41.2",
73
- "@spectrum-web-components/icons-workflow": "^0.41.2",
74
- "@spectrum-web-components/menu": "^0.41.2",
75
- "@spectrum-web-components/overlay": "^0.41.2",
76
- "@spectrum-web-components/popover": "^0.41.2",
77
- "@spectrum-web-components/reactive-controllers": "^0.41.2",
78
- "@spectrum-web-components/shared": "^0.41.2",
79
- "@spectrum-web-components/tooltip": "^0.41.2",
80
- "@spectrum-web-components/tray": "^0.41.2"
68
+ "@spectrum-web-components/base": "^0.42.1",
69
+ "@spectrum-web-components/button": "^0.42.1",
70
+ "@spectrum-web-components/field-label": "^0.42.1",
71
+ "@spectrum-web-components/icon": "^0.42.1",
72
+ "@spectrum-web-components/icons-ui": "^0.42.1",
73
+ "@spectrum-web-components/icons-workflow": "^0.42.1",
74
+ "@spectrum-web-components/menu": "^0.42.1",
75
+ "@spectrum-web-components/overlay": "^0.42.1",
76
+ "@spectrum-web-components/popover": "^0.42.1",
77
+ "@spectrum-web-components/progress-circle": "^0.42.1",
78
+ "@spectrum-web-components/reactive-controllers": "^0.42.1",
79
+ "@spectrum-web-components/shared": "^0.42.1",
80
+ "@spectrum-web-components/tooltip": "^0.42.1",
81
+ "@spectrum-web-components/tray": "^0.42.1"
81
82
  },
82
83
  "devDependencies": {
83
- "@spectrum-css/picker": "^7.2.5"
84
+ "@spectrum-css/picker": "^7.2.7"
84
85
  },
85
86
  "types": "./src/index.d.ts",
86
87
  "customElements": "custom-elements.json",
@@ -90,5 +91,5 @@
90
91
  "./sync/index.js",
91
92
  "./sync/sp-*.js"
92
93
  ],
93
- "gitHead": "78c3f16b08c9133c9e5ca88d0c9fef5ea7d2ab87"
94
+ "gitHead": "c7ab5516e86d20194e92114afd04affa490b7248"
94
95
  }
package/src/Picker.d.ts CHANGED
@@ -8,7 +8,7 @@ import '@spectrum-web-components/menu/sp-menu.js';
8
8
  import type { Menu, MenuItem, MenuItemChildren } from '@spectrum-web-components/menu';
9
9
  import { Placement } from '@spectrum-web-components/overlay';
10
10
  import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
11
- import type { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';
11
+ import { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';
12
12
  import type { FieldLabel } from '@spectrum-web-components/field-label';
13
13
  export declare const DESCRIPTION_ID = "option-picker";
14
14
  declare const PickerBase_base: typeof Focusable & {
@@ -19,11 +19,16 @@ export declare class PickerBase extends PickerBase_base {
19
19
  protected isMobile: MatchMediaController;
20
20
  appliedLabel?: string;
21
21
  button: HTMLButtonElement;
22
+ private dependencyManager;
22
23
  private deprecatedMenu;
23
24
  disabled: boolean;
24
25
  focused: boolean;
25
26
  icons?: 'only' | 'none';
26
27
  invalid: boolean;
28
+ /** Whether the items are currently loading. */
29
+ pending: boolean;
30
+ /** Defines a string value that labels the Picker while it is in pending state. */
31
+ pendingLabel: string;
27
32
  label?: string;
28
33
  open: boolean;
29
34
  readonly: boolean;
@@ -69,6 +74,10 @@ export declare class PickerBase extends PickerBase_base {
69
74
  protected handleTooltipSlotchange(event: Event & {
70
75
  target: HTMLSlotElement;
71
76
  }): void;
77
+ protected handleBeforetoggle(event: Event & {
78
+ target: Overlay;
79
+ newState: 'open' | 'closed';
80
+ }): void;
72
81
  protected renderLabelContent(content: Node[]): TemplateResult | Node[];
73
82
  protected get buttonContent(): TemplateResult[];
74
83
  applyFocusElementLabel: (value: string, labelElement: FieldLabel) => void;
@@ -79,9 +88,6 @@ export declare class PickerBase extends PickerBase_base {
79
88
  protected bindButtonKeydownListener(): void;
80
89
  protected firstUpdated(changes: PropertyValues<this>): void;
81
90
  protected get dismissHelper(): TemplateResult;
82
- private dependenciesLoaded;
83
- private dependenciesToLoad;
84
- private trackDependency;
85
91
  protected renderContainer(menu: TemplateResult): TemplateResult;
86
92
  protected hasRenderedOverlay: boolean;
87
93
  protected get renderMenu(): TemplateResult;