@zohodesk/components 1.0.0-temp-108 → 1.0.0-temp-109

package/lib/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap

@@ -1,163 +1,163 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Ribbon component should the palette is danger 1`] = `
-<span
-  className="basic palette_danger large default"
-  data-id="ribbonComp"
->
-  danger
-</span>
-`;
-
-exports[`Ribbon component should the palette is dark 1`] = `
-<span
-  className="basic palette_dark large default"
-  data-id="ribbonComp"
->
-  dark
-</span>
-`;
-
-exports[`Ribbon component should the palette is default 1`] = `
-<span
-  className="basic palette_default large default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the palette is info 1`] = `
-<span
-  className="basic palette_info large default"
-  data-id="ribbonComp"
->
-  info
-</span>
-`;
-
-exports[`Ribbon component should the palette is primary 1`] = `
-<span
-  className="basic palette_primary large default"
-  data-id="ribbonComp"
->
-  primary
-</span>
-`;
-
-exports[`Ribbon component should the palette is secondary 1`] = `
-<span
-  className="basic palette_secondary large default"
-  data-id="ribbonComp"
->
-  secondary
-</span>
-`;
-
-exports[`Ribbon component should the size is large 1`] = `
-<span
-  className="basic palette_default large default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the size is medium 1`] = `
-<span
-  className="basic palette_default small default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the size is small 1`] = `
-<span
-  className="basic palette_default small default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the size is xlarge 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is box 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is dafault 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is flag 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is plain 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is ribbon 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is stamp 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is sticker 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is tag 1`] = `
-<span
-  className="basic  large tag"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ribbon component should the palette is danger 1`] = `
+<span
+  className="basic palette_danger large default"
+  data-id="ribbonComp"
+>
+  danger
+</span>
+`;
+
+exports[`Ribbon component should the palette is dark 1`] = `
+<span
+  className="basic palette_dark large default"
+  data-id="ribbonComp"
+>
+  dark
+</span>
+`;
+
+exports[`Ribbon component should the palette is default 1`] = `
+<span
+  className="basic palette_default large default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the palette is info 1`] = `
+<span
+  className="basic palette_info large default"
+  data-id="ribbonComp"
+>
+  info
+</span>
+`;
+
+exports[`Ribbon component should the palette is primary 1`] = `
+<span
+  className="basic palette_primary large default"
+  data-id="ribbonComp"
+>
+  primary
+</span>
+`;
+
+exports[`Ribbon component should the palette is secondary 1`] = `
+<span
+  className="basic palette_secondary large default"
+  data-id="ribbonComp"
+>
+  secondary
+</span>
+`;
+
+exports[`Ribbon component should the size is large 1`] = `
+<span
+  className="basic palette_default large default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the size is medium 1`] = `
+<span
+  className="basic palette_default small default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the size is small 1`] = `
+<span
+  className="basic palette_default small default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the size is xlarge 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is box 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is dafault 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is flag 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is plain 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is ribbon 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is stamp 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is sticker 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is tag 1`] = `
+<span
+  className="basic  large tag"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;

package/lib/RippleEffect/RippleEffect.module.css

@@ -1,92 +1,92 @@
-.effect {
-  position: relative;
-  border-radius: var(--zd_size4);
-}
-.border {
-  border: solid 1px var(--zdt_rippleeffect_default_border);
-}
-.default.defaultHover {
-  border-color: var(--zdt_rippleeffect_hover_border);
-}
-.hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover
-/* .hoverEffect:focus.primary.borderHover  */
-{
-  border-color: var(--zdt_rippleeffect_primary_border);
-}
-.primary.defaultHover, .hoverEffect:hover.primary.active.border
-/* .hoverEffect:focus.primary.active.border  */
-{
-  border-color: var(--zdt_rippleeffect_primary_active_border);
-}
-.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover
-/* .hoverEffect:focus.primaryLight.borderHover  */
-{
-  border-color: var(--zdt_rippleeffect_primary_light_border);
-}
-.green.defaultHover, .hoverEffect:hover.green.borderHover
-/* .hoverEffect:focus.green.borderHover  */
-{
-  border-color: var(--zdt_rippleeffect_green_border);
-}
-.hoverEffect:hover.default.defaultHover
-/* .hoverEffect:focus.default.defaultHover */
- {
-  border-color: var(--zdt_rippleeffect_slate_border);
-}
-.hoverEffect:hover.default.borderHover
-/* .hoverEffect:focus.default.borderHover */
- {
-  border-color: var(--zdt_rippleeffect_navy_border);
-}
-.hoverEffect:hover.default.bgHover
-/* .hoverEffect:focus.default.bgHover */
- {
-  background-color: var(--zdt_rippleeffect_hover_bg);
-}
-.hoverEffect:hover.primaryLight.bgHover
-/* .hoverEffect:focus.primaryLight.bgHover  */
-{
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-}
-.primaryFilled {
-  background-color: var(--zdt_rippleeffect_primary_bg);
-}
-.hoverEffect:hover.primaryFilled, .primaryFilled.active {
-  background-color: var(--zdt_rippleeffect_primaryfilled_bg);
-}
-.hoverEffect:hover.green.bgHover
-/* .hoverEffect:focus.green.bgHover */
- {
-  background-color: var(--zdt_rippleeffect_green_bg);
-}
-.default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-}
-.default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
-  border-color: var(--zdt_rippleeffect_primary_light_border);
-}
-.green.active {
-  background-color: var(--zdt_rippleeffect_green_bg);
-}
-.green.active.border {
-  border-color: var(--zdt_rippleeffect_green_border);
-}
-.primary.active {
-  background-color: var(--zdt_rippleeffect_primary_bg);
-}
-.danger.defaultHover, .hoverEffect:hover.danger.borderHover
-/* .hoverEffect:focus.danger.borderHover */
- {
-  border-color: var(--zdt_rippleeffect_danger_border);
-}
-.hoverEffect:hover.danger.bgHover, .danger.active {
-  background-color: var(--zdt_rippleeffect_danger_bg);
-}
-.hoverEffect:hover.primaryDark.bgHover
-/* .hoverEffect:focus.primaryDark.bgHover */
- {
-  background-color: var(--zdt_rippleeffect_primary_dark_bg);
-}
-.notAllowed {
-  cursor: not-allowed;
-}
+.effect {
+  position: relative;
+  border-radius: var(--zd_size4);
+}
+.border {
+  border: solid 1px var(--zdt_rippleeffect_default_border);
+}
+.default.defaultHover {
+  border-color: var(--zdt_rippleeffect_hover_border);
+}
+.hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover
+/* .hoverEffect:focus.primary.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_primary_border);
+}
+.primary.defaultHover, .hoverEffect:hover.primary.active.border
+/* .hoverEffect:focus.primary.active.border  */
+{
+  border-color: var(--zdt_rippleeffect_primary_active_border);
+}
+.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover
+/* .hoverEffect:focus.primaryLight.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_primary_light_border);
+}
+.green.defaultHover, .hoverEffect:hover.green.borderHover
+/* .hoverEffect:focus.green.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_green_border);
+}
+.hoverEffect:hover.default.defaultHover
+/* .hoverEffect:focus.default.defaultHover */
+ {
+  border-color: var(--zdt_rippleeffect_slate_border);
+}
+.hoverEffect:hover.default.borderHover
+/* .hoverEffect:focus.default.borderHover */
+ {
+  border-color: var(--zdt_rippleeffect_navy_border);
+}
+.hoverEffect:hover.default.bgHover
+/* .hoverEffect:focus.default.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_hover_bg);
+}
+.hoverEffect:hover.primaryLight.bgHover
+/* .hoverEffect:focus.primaryLight.bgHover  */
+{
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+}
+.primaryFilled {
+  background-color: var(--zdt_rippleeffect_primary_bg);
+}
+.hoverEffect:hover.primaryFilled, .primaryFilled.active {
+  background-color: var(--zdt_rippleeffect_primaryfilled_bg);
+}
+.hoverEffect:hover.green.bgHover
+/* .hoverEffect:focus.green.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_green_bg);
+}
+.default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+}
+.default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
+  border-color: var(--zdt_rippleeffect_primary_light_border);
+}
+.green.active {
+  background-color: var(--zdt_rippleeffect_green_bg);
+}
+.green.active.border {
+  border-color: var(--zdt_rippleeffect_green_border);
+}
+.primary.active {
+  background-color: var(--zdt_rippleeffect_primary_bg);
+}
+.danger.defaultHover, .hoverEffect:hover.danger.borderHover
+/* .hoverEffect:focus.danger.borderHover */
+ {
+  border-color: var(--zdt_rippleeffect_danger_border);
+}
+.hoverEffect:hover.danger.bgHover, .danger.active {
+  background-color: var(--zdt_rippleeffect_danger_bg);
+}
+.hoverEffect:hover.primaryDark.bgHover
+/* .hoverEffect:focus.primaryDark.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_primary_dark_bg);
+}
+.notAllowed {
+  cursor: not-allowed;
+}

package/lib/Select/Select.js

@@ -683,6 +683,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         iconOnHover = _this$props11.iconOnHover,
         customProps = _this$props11.customProps,
         autoComplete = _this$props11.autoComplete,
+        ariaLabelledby = _this$props11.ariaLabelledby,
         isLoading = _this$props11.isLoading;
       var _i18nKeys = i18nKeys,
         TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
@@ -718,14 +719,15 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
       }, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         a11y: {
-          role: 'combobox',
+          role: 'Menuitem',
           ariaLabel: TextBox_ally_label,
           ariaControls: setAriaId,
           ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
           ariaHaspopup: true,
           ariaReadonly: true,
           ariaActivedescendant: selectedId,
-          ariaOwns: setAriaId
+          ariaOwns: setAriaId,
+          ariaLabelledby: ariaLabelledby
         },
         isDisabled: isDisabled,
         iconRotated: isPopupOpen,
@@ -770,14 +772,15 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         size: "7"
       })))) : /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
         a11y: {
-          role: 'combobox',
+          role: 'Menuitem',
           ariaLabel: TextBox_ally_label,
           ariaControls: setAriaId,
           ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
           ariaHaspopup: true,
           ariaReadonly: true,
           ariaActivedescendant: selectedId,
-          ariaOwns: setAriaId
+          ariaOwns: setAriaId,
+          ariaLabelledby: ariaLabelledby
         },
         isDisabled: isDisabled,
         inputRef: this.valueInputRef,