npm - @epam/uui - Versions diffs - 5.3.0-rc.1 → 5.3.0 - Mend

@epam/uui 5.3.0-rc.1 → 5.3.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.

Files changed (861) hide show

package/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap ADDED Viewed

@@ -0,0 +1,705 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`PickerInput should open body 1`] = `
+<body>
+  <div>
+    <div
+      class="container uui-input-box -clickable root size-36 mode-form"
+      tabindex="0"
+    >
+      <div
+        class="body"
+      >
+        <input
+          aria-haspopup="true"
+          autocomplete="no"
+          class="uui-input singleInput cursorText"
+          placeholder="Please select "
+          tabindex="-1"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        class="actions"
+      >
+        <div
+          class="container uui-icon uui-enabled -clickable uui-icon-dropdown"
+        >
+          <svg
+            class="flipY"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    aria-hidden="false"
+    class="uui-popper"
+    data-placement="bottom-start"
+    role="dialog"
+    style="z-index: 2000;"
+  >
+    <div
+      class="uui-dropdown-body -lock-focus root container container"
+      style="min-width: 360px;"
+      tabindex="-1"
+    >
+      <div
+        class="uui-flex-row root size-36 body dropdown single container align-items-center"
+        style="max-height: 300px;"
+      >
+        <div
+          class="root uui-scroll-bars uui-shadow-top uui-shadow-bottom scrollContainer"
+          style="position: relative; overflow: hidden; width: 100%; height: 100%; display: flex;"
+        >
+          <div
+            aria-orientation="vertical"
+            style="position: relative; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px; flex: 1 1 auto; display: flex; flex-direction: column;"
+          >
+            <div
+              class="listContainer"
+              style="min-height: 2px;"
+            >
+              <div
+                style="margin-top: 0px;"
+              >
+                <div
+                  aria-posinset="1"
+                  aria-selected="false"
+                  class="uui-flex-row uui-focus pickerRow container -clickable align-items-center"
+                  role="option"
+                >
+                  <div
+                    class="uui-table-cell cell uui-dt-vars data-table-cell cell size-36 padding-12 padding-left-12 align-widgets-top"
+                    role="cell"
+                    style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
+                  >
+                    <div
+                      class="contentWrapper"
+                    >
+                      <div
+                        class="renderItem"
+                      >
+                        <div
+                          class="flexCell root uui-typography"
+                          style="min-width: 0; flex-basis: auto;"
+                        >
+                          <div
+                            class="uui-flex-row root size-36 spacing-12 container align-items-center"
+                          >
+                            <div
+                              class="flexCell"
+                              style="min-width: 0; flex-basis: auto;"
+                            >
+                              <div
+                                class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
+                              >
+                                Elementary
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="flexSpacer"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  aria-posinset="2"
+                  aria-selected="false"
+                  class="uui-flex-row pickerRow container -clickable align-items-center"
+                  role="option"
+                >
+                  <div
+                    class="uui-table-cell cell uui-dt-vars data-table-cell cell size-36 padding-12 padding-left-12 align-widgets-top"
+                    role="cell"
+                    style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
+                  >
+                    <div
+                      class="contentWrapper"
+                    >
+                      <div
+                        class="renderItem"
+                      >
+                        <div
+                          class="flexCell root uui-typography"
+                          style="min-width: 0; flex-basis: auto;"
+                        >
+                          <div
+                            class="uui-flex-row root size-36 spacing-12 container align-items-center"
+                          >
+                            <div
+                              class="flexCell"
+                              style="min-width: 0; flex-basis: auto;"
+                            >
+                              <div
+                                class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
+                              >
+                                Elementary+
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="flexSpacer"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="container uui-blocker-container root"
+          >
+            <div />
+          </div>
+          <div
+            class="uui-track-horizontal"
+            style="position: absolute; height: 6px; display: none;"
+          >
+            <div
+              class="uui-thumb-horizontal"
+            />
+          </div>
+          <div
+            class="uui-track-vertical"
+            style="position: absolute; width: 6px; display: none;"
+          >
+            <div
+              class="uui-thumb-vertical"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="uui-flex-row root size-36 padding-12 container align-items-center"
+      >
+        <div
+          class="flexSpacer"
+        />
+        <div
+          class="flexCell"
+          style="min-width: 0; flex-basis: auto; align-self: center;"
+        >
+          <button
+            aria-disabled="true"
+            aria-label="CLEAR"
+            class="container uui-button-box uui-disabled -clickable uui-link_button root uui-size-36 uui-no-left-icon uui-no-right-icon uui-color-primary"
+            tabindex="-1"
+            type="button"
+          >
+            <div
+              class="uui-caption"
+            >
+              CLEAR
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+exports[`PickerInput should render icon at specific position 1`] = `
+<div
+  className="container uui-input-box -clickable root size-36 mode-form"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={0}
+>
+  <div
+    className="body multiline"
+  >
+    <div
+      className="container uui-icon uui-enabled"
+      style={Object {}}
+    >
+      <div
+        data-testid="test-icon"
+      />
+    </div>
+    <input
+      aria-haspopup={true}
+      autoComplete="no"
+      className="uui-input cursorText"
+      onChange={[Function]}
+      placeholder="Please select "
+      readOnly={false}
+      tabIndex={-1}
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="actions"
+  >
+    <div
+      className="container uui-icon uui-enabled -clickable uui-icon-dropdown"
+      onClick={[Function]}
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;
+exports[`PickerInput should render icon at specific position 2`] = `
+<div
+  className="container uui-input-box -clickable root size-36 mode-form"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={0}
+>
+  <div
+    className="body multiline"
+  >
+    <div
+      className="container uui-icon uui-enabled"
+      style={Object {}}
+    >
+      <div
+        data-testid="test-icon"
+      />
+    </div>
+    <input
+      aria-haspopup={true}
+      autoComplete="no"
+      className="uui-input cursorText"
+      onChange={[Function]}
+      placeholder="Please select "
+      readOnly={false}
+      tabIndex={-1}
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="actions"
+  >
+    <div
+      className="container uui-icon uui-enabled -clickable uui-icon-dropdown"
+      onClick={[Function]}
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;
+exports[`PickerInput should render icon at specific position 3`] = `
+<div
+  className="container uui-input-box -clickable root size-36 mode-form"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={0}
+>
+  <div
+    className="body multiline"
+  >
+    <input
+      aria-haspopup={true}
+      autoComplete="no"
+      className="uui-input cursorText"
+      onChange={[Function]}
+      placeholder="Please select "
+      readOnly={false}
+      tabIndex={-1}
+      type="text"
+      value=""
+    />
+    <div
+      className="container uui-icon uui-enabled"
+      style={Object {}}
+    >
+      <div
+        data-testid="test-icon"
+      />
+    </div>
+  </div>
+  <div
+    className="actions"
+  >
+    <div
+      className="container uui-icon uui-enabled -clickable uui-icon-dropdown"
+      onClick={[Function]}
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;
+exports[`PickerInput should render input as invalid 1`] = `
+<div
+  className="container uui-input-box uui-invalid -clickable root size-36 mode-form"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={0}
+>
+  <div
+    className="body"
+  >
+    <input
+      aria-haspopup={true}
+      autoComplete="no"
+      className="uui-input singleInput cursorText"
+      onChange={[Function]}
+      placeholder="Please select "
+      readOnly={false}
+      tabIndex={-1}
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="actions"
+  >
+    <div
+      className="container uui-icon uui-enabled -clickable uui-icon-dropdown"
+      onClick={[Function]}
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;
+exports[`PickerInput should render with maximum props 1`] = `
+<div
+  className="container uui-input-box -clickable root size-48 mode-form"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={0}
+>
+  <div
+    className="body multiline"
+  >
+    <button
+      className="container uui-button-box uui-enabled size-42 root uui-color-neutral uui-tag"
+      onClick={[Function]}
+      tabIndex={-1}
+      type="button"
+    >
+      <div
+        className="uui-caption"
+      >
+        A1
+      </div>
+      <div
+        className="container uui-icon uui-enabled -clickable -clickable"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        <svg
+          className=""
+        />
+      </div>
+    </button>
+    <button
+      className="container uui-button-box uui-enabled size-42 root uui-color-neutral uui-tag"
+      onClick={[Function]}
+      tabIndex={-1}
+      type="button"
+    >
+      <div
+        className="uui-caption"
+      >
+        A1+
+      </div>
+      <div
+        className="container uui-icon uui-enabled -clickable -clickable"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        <svg
+          className=""
+        />
+      </div>
+    </button>
+  </div>
+  <div
+    className="actions"
+  >
+    <div
+      aria-label="Clear"
+      className="container uui-icon uui-enabled -clickable uui-icon-cancel -clickable"
+      onClick={[Function]}
+      role="button"
+      style={Object {}}
+      tabIndex={-1}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;
+exports[`PickerInput should render with minimum props 1`] = `
+<div
+  className="container uui-input-box -clickable root size-36 mode-form"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={0}
+>
+  <div
+    className="body"
+  >
+    <input
+      aria-haspopup={true}
+      autoComplete="no"
+      className="uui-input singleInput cursorText"
+      onChange={[Function]}
+      placeholder="Please select "
+      readOnly={false}
+      tabIndex={-1}
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="actions"
+  >
+    <div
+      className="container uui-icon uui-enabled -clickable uui-icon-dropdown"
+      onClick={[Function]}
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;
+exports[`PickerInput should render with mode = cell 1`] = `
+<div
+  className="container uui-input-box -clickable root size-36 mode-cell"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={0}
+>
+  <div
+    className="body multiline"
+  >
+    <input
+      aria-haspopup={true}
+      autoComplete="no"
+      className="uui-input cursorText"
+      onChange={[Function]}
+      placeholder="Please select "
+      readOnly={false}
+      tabIndex={-1}
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="actions"
+  >
+    <div
+      className="container uui-icon uui-enabled -clickable uui-icon-dropdown"
+      onClick={[Function]}
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;
+exports[`PickerInput should render with mode = form 1`] = `
+<div
+  className="container uui-input-box -clickable root size-36 mode-form"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={0}
+>
+  <div
+    className="body multiline"
+  >
+    <input
+      aria-haspopup={true}
+      autoComplete="no"
+      className="uui-input cursorText"
+      onChange={[Function]}
+      placeholder="Please select "
+      readOnly={false}
+      tabIndex={-1}
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="actions"
+  >
+    <div
+      className="container uui-icon uui-enabled -clickable uui-icon-dropdown"
+      onClick={[Function]}
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;
+exports[`PickerInput should render with mode = inline 1`] = `
+<div
+  className="container uui-input-box -clickable root size-36 mode-inline"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={0}
+>
+  <div
+    className="body multiline"
+  >
+    <input
+      aria-haspopup={true}
+      autoComplete="no"
+      className="uui-input cursorText"
+      onChange={[Function]}
+      placeholder="Please select "
+      readOnly={false}
+      tabIndex={-1}
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="actions"
+  >
+    <div
+      className="container uui-icon uui-enabled -clickable uui-icon-dropdown"
+      onClick={[Function]}
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;
+exports[`PickerInput should render with mode = undefined 1`] = `
+<div
+  className="container uui-input-box -clickable root size-36 mode-form"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={0}
+>
+  <div
+    className="body multiline"
+  >
+    <input
+      aria-haspopup={true}
+      autoComplete="no"
+      className="uui-input cursorText"
+      onChange={[Function]}
+      placeholder="Please select "
+      readOnly={false}
+      tabIndex={-1}
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="actions"
+  >
+    <div
+      className="container uui-icon uui-enabled -clickable uui-icon-dropdown"
+      onClick={[Function]}
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;
+exports[`PickerInput should support single line 1`] = `
+<div
+  className="container uui-input-box -clickable root size-36 mode-form"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={0}
+>
+  <div
+    className="body"
+  >
+    <input
+      aria-haspopup={true}
+      autoComplete="no"
+      className="uui-input cursorText"
+      onChange={[Function]}
+      placeholder="Please select "
+      readOnly={false}
+      tabIndex={-1}
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="actions"
+  >
+    <div
+      className="container uui-icon uui-enabled -clickable uui-icon-dropdown"
+      onClick={[Function]}
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;