@zohodesk/components 1.4.9 → 1.4.10-exp.1

package/README.md

@@ -2,6 +2,11 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.10
+
+- **Select, MultiSelect**
+  - Searching with leading spaces is not reflected the results correctly. Issue Fixed.
+
 # 1.4.9
 
 - **MultiSelect , MultiSelectWithAvatar, AdvancedMultiSelect, AdvancedGroupMultiSelect**

package/es/AppContainer/AppContainer.js

@@ -9,6 +9,7 @@ import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
 import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/es/fontFamilyVariables.module.css';
+import '@zohodesk/variables/es/fontWeightVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import "../common/a11y.module.css";

package/es/AppContainer/AppContainer.module.css

@@ -8,8 +8,9 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
 }
-.container {
-  font-family: var(--zd_regular);
+.container, .container button, .container input, .container textarea ,.container select {
+  /* font-family: var(--zd_regular); */
+  font-family: var(--zd-font-family, ZDLato);
 }
 .tooltip {
   height: 0 ;

package/es/Button/css/Button.module.css

@@ -5,7 +5,7 @@
   --button_cursor: pointer;
   --button_font_size: var(--zd_font_size13);
   --button_text_color: var(--zdt_button_default_text);
-  --button_font_family: var(--zd_regular);
+  --button_font_weight: var(--zd-fw-normal);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
@@ -49,7 +49,7 @@
   position: relative;
   font-size: var(--button_font_size);
   color: var(--button_text_color);
-  font-family: var(--button_font_family);
+  font-weight: var(--button_font_weight);
   text-transform: var(--button_text_transform);
   min-width: var(--button_min_width);
   height: var(--button_height);
@@ -63,7 +63,7 @@
 }
 
 .bold {
-  --button_font_family: var(--zd_semibold);
+  --button_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 
@@ -569,7 +569,7 @@
 }
 
 .loader {
-  color: var(--dot_mirror)
+  color: var(--dot_mirror);
 }
 
 [dir=ltr] .strike {
@@ -579,34 +579,43 @@
 [dir=rtl] .strike {
   background-image: repeating-linear-gradient(-120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
 }
+
 .primaryStrike {
   --button_strike_color: var(--zdt_button_primary_strike);
 }
+
 .primaryfilledStrike {
   --button_strike_color: var(--zdt_button_primaryFilled_strike);
   --button_border_color: var(--zdt_button_primaryfill_bg);
 }
+
 .dangerStrike {
   --button_strike_color: var(--zdt_button_danger_strike);
 }
+
 .dangerfilledStrike {
   --button_strike_color: var(--zdt_button_dangerFilled_strike);
   --button_border_color: var(--zdt_button_dangerfill_bg);
 }
+
 .secondaryStrike {
   --button_strike_color: var(--zdt_button_secondary_border);
 }
+
 .secondaryfilledStrike {
   --button_strike_color: var(--zdt_button_secondaryFilled_strike);
   --button_border_color: var(--zdt_button_secondaryfill_bg);
 }
+
 .tertiaryfilledStrike {
   --button_strike_color: var(--zdt_button_tertiaryFilled_strike);
   --button_border_color: var(--zdt_button_tertiaryfill_bg);
 }
+
 .successStrike {
   --button_strike_color: var(--zdt_button_success_strike);
 }
+
 .successfilledStrike {
   --button_strike_color: var(--zdt_button_successFilled_strike);
   --button_border_color: var(--zdt_button_successfill_bg);

package/es/DateTime/DateTime.module.css

@@ -1,5 +1,5 @@
 .semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }
 
 [dir=ltr] .boxPadding {
@@ -29,7 +29,7 @@
 }
 
 .datesStr {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .grid {
@@ -122,7 +122,8 @@
   color: var(--zdt_datetime_invalid_text);
 }
 
-.invalidDate.holiday,.inActiveDate.holiday:hover {
+.invalidDate.holiday,
+.inActiveDate.holiday:hover {
   color: var(--zdt_datetime_invaliddate_text);
 }
 
@@ -147,15 +148,17 @@
   background-color: var(--zdt_datetime_selected_bg);
   border-radius: 50%;
 }
-.inActiveDate{
-color: var(--zdt_datetime_invalid_text);
-cursor: no-drop;
+
+.inActiveDate {
+  color: var(--zdt_datetime_invalid_text);
+  cursor: no-drop;
 }
-.inActiveDate:hover
-{
+
+.inActiveDate:hover {
   color: var(--zdt_datetime_invalid_text);
 }
-.inActiveDate:hover, .inActiveDate.holiday:hover{
+
+.inActiveDate:hover, .inActiveDate.holiday:hover {
   background-color: var(--zdt_datetime_inactivedate_hover_bg);
 
 }

package/es/DateTime/YearView.module.css

@@ -61,7 +61,7 @@
 }
 
 .isActive .yearText {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   color: var(--zdt_yearview_year_hover_text);
   font-size: var(--zd_font_size11) ;
 }

package/es/Heading/Heading.module.css

@@ -1,5 +1,4 @@
 .reset {
   font-size: inherit ;
-  font-weight: initial;
   margin: initial ;
 }

package/es/Label/Label.module.css

@@ -2,7 +2,7 @@
   /* label default variables */
   --label_font_size: var(--zd_font_size14);
   --label_text_color: var(--zdt_label_default_text);
-  --label_font_family: var(--zd_regular);
+  --label_font_weight: var(--zd-fw-normal);
   --label_cursor: default;
   --label_line_height: 1.286;
 }
@@ -13,24 +13,24 @@
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
   color: var(--label_text_color);
-  font-family: var(--label_font_family);
+  font-weight: var(--label_font_weight);
   cursor: var(--label_cursor);
 }
 .xsmall {
   --label_font_size: var(--zd_font_size12);
-  --label_line_height:1.5;
+  --label_line_height: 1.5;
 }
 .small {
   --label_font_size: var(--zd_font_size13);
-  --label_line_height:1.385;
+  --label_line_height: 1.385;
 }
 .medium {
   --label_font_size: var(--zd_font_size14);
-  --label_line_height:1.286;
+  --label_line_height: 1.286;
 }
 .large {
   --label_font_size: var(--zd_font_size26);
-  --label_line_height:0.6923;
+  --label_line_height: 0.6923;
   composes: semibold from '../common/common.module.css';
 }
 .pointer {
@@ -46,10 +46,10 @@
   display: inline-block;
 }
 .font_default {
-  --label_font_family: var(--zd_regular);
+  --label_font_weight: var(--zd-fw-normal);
 }
 .font_primary {
-  --label_font_family: var(--zd_semibold);
+  --label_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
 .dotted {

package/es/MultiSelect/MultiSelect.module.css

@@ -196,7 +196,7 @@
 .more {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
-  font-family: inherit;
+  font-weight: var(--zd-fw-normal);
   cursor: pointer;
   margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);

package/es/Select/SelectWithIcon.js

@@ -193,7 +193,7 @@ class SelectWithIcon extends Component {
     } = this.props;
 
     if (options.length) {
-      datas = options.filter(obj => obj[valueKey].toLowerCase().includes(searchValue.toLowerCase()));
+      datas = options.filter(obj => obj[valueKey].toLowerCase().includes(searchValue.toLowerCase().trim()));
     }
 
     return datas;

package/es/Select/__tests__/Select.spec.js

@@ -246,14 +246,22 @@ describe('Select -', () => {
     userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), '2');
     expect(getAllByRole(listItemRole)).toHaveLength(1);
     expect(asFragment()).toMatchSnapshot();
-  }); // test('Should render the only options matching search value even with additional spaces before and after', () => {
-  //   const { getByRole, getAllByRole, asFragment, getByTestId } = render(<Select needSearch options={options} />);
-  //   userEvent.click(getByRole(selectInputRole));
-  //   userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), '  2  ');
-  //   expect(getAllByRole(listItemRole)).toHaveLength(1);
-  //   expect(asFragment()).toMatchSnapshot();
-  // });
-
+  });
+  test('Should render the only options matching search value even with additional spaces before and after', () => {
+    const {
+      getByRole,
+      getAllByRole,
+      asFragment,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Select, {
+      needSearch: true,
+      options: options
+    }));
+    userEvent.click(getByRole(selectInputRole));
+    userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), '  2  ');
+    expect(getAllByRole(listItemRole)).toHaveLength(1);
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('Should trigger given onSearch, when type on the search input', async () => {
     const mockOnSearch = jest.fn();
     const {

package/es/Select/__tests__/__snapshots__/Select.spec.js.snap

@@ -1926,6 +1926,287 @@ exports[`Select - Should render the only options matching search value 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Select - Should render the only options matching search value even with additional spaces before and after 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="container effect effectFocused input  flex rowdir"
+        data-id="containerComponent"
+        data-selector-id="textBoxIcon"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            aria-activedescendant="1"
+            aria-controls="1"
+            aria-expanded="true"
+            aria-haspopup="true"
+            aria-label="click to select options"
+            aria-owns="1"
+            aria-readonly="true"
+            autocomplete="off"
+            class=" pointer container medium  default  effect focus borderColor_default inputDotted "
+            data-id="selectComponent_textBox"
+            data-selector-id="textBoxIcon"
+            data-test-id="selectComponent_textBox"
+            data-title="Option 1"
+            maxlength="250"
+            placeholder=""
+            readonly=""
+            role="Menuitem"
+            type="text"
+            value="Option 1"
+          />
+        </div>
+        <div
+          class="iconContainer  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="icon rotated shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="rightPlaceholder inflex rowdir both"
+                data-id="containerComponent"
+                data-selector-id="container"
+                data-test-id="containerComponent"
+              >
+                <div
+                  aria-hidden="true"
+                  class="arrowIcon flex cover coldir both"
+                  data-id="selectComponent_downIcon"
+                  data-selector-id="container"
+                  data-test-id="selectComponent_downIcon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="zd_font_icons basic icon-down    "
+                    data-id="fontIcon"
+                    data-selector-id="fontIcon"
+                    data-test-id="fontIcon"
+                    style="--zd-iconfont-size: var(--zd_font_size7);"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="line borderColor_default "
+        />
+      </div>
+    </div>
+    <div
+      class="main container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="selectComponent_suggestions"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="selectComponent_suggestions"
+      dot-ui-element="dropbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow radius bounce defaultPalette"
+        data-id="selectComponent_suggestions_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="selectComponent_suggestions_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover coldir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="notScroll  shrinkOff"
+                data-id="CardHeader"
+                data-selector-id="cardHeader"
+                data-test-id="CardHeader"
+              >
+                <div
+                  class="search medium"
+                >
+                  <div
+                    class="container effect effectFocused   flex rowdir"
+                    data-id="containerComponent"
+                    data-selector-id="textBoxIcon"
+                    data-test-id="containerComponent"
+                  >
+                    <div
+                      class="grow basis shrinkOff"
+                      data-id="boxComponent"
+                      data-selector-id="box"
+                      data-test-id="boxComponent"
+                    >
+                      <input
+                        aria-autocomplete="list"
+                        aria-controls="1"
+                        aria-describedby="2"
+                        autocomplete="off"
+                        class="  container small  default  effect  borderColor_default  "
+                        data-id="selectComponent_search"
+                        data-selector-id="textBoxIcon"
+                        data-test-id="selectComponent_search"
+                        maxlength="250"
+                        placeholder="Search"
+                        type="text"
+                        value="  2  "
+                      />
+                    </div>
+                    <div
+                      class="iconContainer  shrinkOff"
+                      data-id="boxComponent"
+                      data-selector-id="box"
+                      data-test-id="boxComponent"
+                    >
+                      <div
+                        class="flex cover rowdir"
+                        data-id="containerComponent"
+                        data-selector-id="container"
+                        data-test-id="containerComponent"
+                      >
+                        <button
+                          class="buttonReset icon shrinkOff"
+                          data-id="selectComponent_search_ClearIcon"
+                          data-selector-id="box"
+                          data-test-id="selectComponent_search_ClearIcon"
+                          data-title="Clear"
+                        >
+                          <div
+                            aria-hidden="true"
+                            class="flex cover coldir both"
+                            data-id="containerComponent"
+                            data-selector-id="container"
+                            data-test-id="containerComponent"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="zd_font_icons basic icon-delete    rtl "
+                              data-id="fontIcon"
+                              data-selector-id="fontIcon"
+                              data-test-id="fontIcon"
+                              style="--zd-iconfont-size: var(--zd_font_size14);"
+                            />
+                          </div>
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      class="line borderColor_default "
+                    />
+                  </div>
+                </div>
+              </div>
+              <div
+                class="small grow basis shrinkOn scrolly"
+                data-id="CardContent"
+                data-selector-id="cardContent"
+                data-test-id="CardContent"
+              >
+                <div
+                  class="flex coldir"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                  id="1"
+                  role="listbox"
+                  tabindex="0"
+                >
+                  <div
+                    class="listItemContainer shrinkOff"
+                    data-id="selectComponent_Options"
+                    data-selector-id="box"
+                    data-test-id="selectComponent_Options"
+                  >
+                    <li
+                      aria-label="Option 2"
+                      aria-selected="false"
+                      ariaparentrole="listbox"
+                      class="list medium  default defaultHover  mediumwithTick    flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="true"
+                      data-id="Option 2"
+                      data-selector-id="listItem"
+                      data-test-id="Option 2"
+                      data-title="Option 2"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="leftBox grow basis shrinkOff"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        <div
+                          class="titleBox shrinkOff"
+                          data-id="boxComponent"
+                          data-selector-id="box"
+                          data-test-id="boxComponent"
+                        >
+                          <div
+                            class="value basisAuto shrinkOn"
+                            data-id="boxComponent"
+                            data-selector-id="box"
+                            data-test-id="boxComponent"
+                          >
+                            Option 2
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Select - Should render the placeholder when there is no default value 1`] = `
 <DocumentFragment>
   <div

package/es/Tab/Tabs.module.css

@@ -145,7 +145,7 @@
 }
 
 .emptyStateTitle {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   word-wrap: break-word;
   font-size: var(--zd_font_size16) ;
   max-width: var(--zd_size430) ;

package/es/TextBox/TextBox.module.css

@@ -9,7 +9,7 @@
   --textbox_width: 100%;
   --textbox_height: var(--zd_size35);
   --textbox_border_radius: none;
-  --textbox_font_family: var(--zd_regular);
+  --textbox_font_weight: var(--zd-fw-normal);
   /*  Variable:Ignore  */
   --textbox_letter_spacing: 0.1px;
   --textbox_padding: 0;
@@ -166,18 +166,18 @@
 .primary,
 .secondary,
 .light {
-  font-family: var(--textbox_font_family);
+  font-weight: var(--textbox_font_weight);
 }
 
 .primary {
   --textbox_text_color: var(--zdt_textbox_default_text);
-  --textbox_font_family: var(--zd_semibold);
+  --textbox_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
 
 .secondary {
   --textbox_text_color: var(--zdt_textbox_secondary_text);
-  --textbox_font_family: var(--zd_light);
+  --textbox_font_weight: var(--zd-fw-light);
 }
 
 .light {

package/es/Textarea/Textarea.module.css

@@ -139,7 +139,7 @@
   --textarea_height: var(--zd_size184);
 }
 .default {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
   --textarea_text_color: var(--zdt_textarea_black_text);
 }
 .primary {

package/es/Tooltip/Tooltip.module.css

@@ -14,7 +14,7 @@
 .tooltipcont {
   color: var(--zdt_tooltip_default_text);
   font-size: var(--zd_font_size13) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   word-break: break-word;
   max-width: var(--zd_size420) ;
   line-height: 1.5385;

package/es/Typography/css/Typography.module.css

@@ -25,20 +25,20 @@
 }
 
 .font_regular {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .font_light {
-  font-family: var(--zd_light);
+  font-weight: var(--zd-fw-light);
 }
 
 .font_semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 
 .font_bold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   composes: ftsmooth from '../../common/common.module.css';
 }