@epam/uui 5.3.0-rc.1 → 5.3.0

package/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap

@@ -0,0 +1,423 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmationModal should be rendered correctly 1`] = `
+<div
+  className="container modalBlocker"
+  style={
+    Object {
+      "zIndex": 1,
+    }
+  }
+>
+  <div
+    aria-label="Click to close a modal"
+    className="uui-modal-blocker"
+    onClick={[Function]}
+  />
+  <div
+    data-focus-guard={true}
+    style={
+      Object {
+        "height": "0px",
+        "left": "1px",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "fixed",
+        "top": "1px",
+        "width": "1px",
+      }
+    }
+    tabIndex={0}
+  />
+  <div
+    data-focus-lock-disabled={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
+  >
+    <div
+      aria-modal={true}
+      className="uui-modal-window root modal container"
+      role="dialog"
+      style={
+        Object {
+          "height": "auto",
+          "width": "420px",
+        }
+      }
+    >
+      <div
+        className="uui-flex-row root size-36 padding-24 vPadding-12 borderBottom spacing-12 root modalHeader container align-items-center"
+        style={
+          Object {
+            "columnGap": undefined,
+            "rowGap": undefined,
+          }
+        }
+      >
+        <div
+          className="root uui-text uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography line-height-24 font-size-18 v-padding-12 container"
+        >
+          Test
+        </div>
+        <div
+          className="flexSpacer"
+        />
+        <div
+          className="flexCell"
+          style={
+            Object {
+              "alignSelf": undefined,
+              "flexBasis": "auto",
+              "flexGrow": undefined,
+              "flexShrink": 0,
+              "minWidth": 0,
+              "textAlign": undefined,
+            }
+          }
+        >
+          <button
+            aria-label="Close modal"
+            className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root"
+            onClick={[Function]}
+            tabIndex={0}
+            type="button"
+          >
+            <div
+              className="container uui-icon uui-enabled"
+              style={Object {}}
+            >
+              <svg
+                className=""
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+      <div
+        className="root root uui-scroll-bars uui-shadow-top uui-shadow-bottom"
+        style={
+          Object {
+            "display": "flex",
+            "height": "100%",
+            "overflow": "hidden",
+            "position": "relative",
+            "width": "100%",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "WebkitOverflowScrolling": "touch",
+              "bottom": 0,
+              "flex": "1 1 auto",
+              "left": 0,
+              "marginBottom": 0,
+              "marginRight": 0,
+              "overflow": "scroll",
+              "position": "relative",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        />
+        <div
+          className="uui-track-horizontal"
+          style={
+            Object {
+              "display": "none",
+              "height": 6,
+              "position": "absolute",
+            }
+          }
+        >
+          <div
+            className="uui-thumb-horizontal"
+          />
+        </div>
+        <div
+          className="uui-track-vertical"
+          style={
+            Object {
+              "display": "none",
+              "position": "absolute",
+              "width": 6,
+            }
+          }
+        >
+          <div
+            className="uui-thumb-vertical"
+          />
+        </div>
+      </div>
+      <div
+        className="uui-flex-row root size-36 padding-24 vPadding-24 spacing-12 root modalFooter container align-items-center"
+        style={
+          Object {
+            "columnGap": undefined,
+            "rowGap": undefined,
+          }
+        }
+      >
+        <div
+          className="flexSpacer"
+        />
+        <button
+          className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-outline uui-color-secondary uui-size-36"
+          onClick={[Function]}
+          tabIndex={0}
+          type="button"
+        >
+          <div
+            className="uui-caption"
+          >
+            Discard
+          </div>
+        </button>
+        <button
+          className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-solid uui-color-accent uui-size-36"
+          onClick={[Function]}
+          tabIndex={0}
+          type="button"
+        >
+          <div
+            className="uui-caption"
+          >
+            Save
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    data-focus-guard={true}
+    style={
+      Object {
+        "height": "0px",
+        "left": "1px",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "fixed",
+        "top": "1px",
+        "width": "1px",
+      }
+    }
+    tabIndex={0}
+  />
+</div>
+`;
+
+exports[`ConfirmationModal should be rendered correctly 2`] = `
+<div
+  className="container modalBlocker"
+  style={
+    Object {
+      "zIndex": 1,
+    }
+  }
+>
+  <div
+    aria-label="Click to close a modal"
+    className="uui-modal-blocker"
+    onClick={[Function]}
+  />
+  <div
+    data-focus-guard={true}
+    style={
+      Object {
+        "height": "0px",
+        "left": "1px",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "fixed",
+        "top": "1px",
+        "width": "1px",
+      }
+    }
+    tabIndex={0}
+  />
+  <div
+    data-focus-lock-disabled={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
+  >
+    <div
+      aria-modal={true}
+      className="uui-modal-window root modal container"
+      role="dialog"
+      style={
+        Object {
+          "height": "auto",
+          "width": "420px",
+        }
+      }
+    >
+      <div
+        className="uui-flex-row root size-36 padding-24 vPadding-12 borderBottom spacing-12 root modalHeader container align-items-center"
+        style={
+          Object {
+            "columnGap": undefined,
+            "rowGap": undefined,
+          }
+        }
+      >
+        <div
+          className="root uui-text uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography line-height-24 font-size-18 v-padding-12 container"
+        >
+          Test
+        </div>
+        <div
+          className="flexSpacer"
+        />
+        <div
+          className="flexCell"
+          style={
+            Object {
+              "alignSelf": undefined,
+              "flexBasis": "auto",
+              "flexGrow": undefined,
+              "flexShrink": 0,
+              "minWidth": 0,
+              "textAlign": undefined,
+            }
+          }
+        >
+          <button
+            aria-label="Close modal"
+            className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root"
+            onClick={[Function]}
+            tabIndex={0}
+            type="button"
+          >
+            <div
+              className="container uui-icon uui-enabled"
+              style={Object {}}
+            >
+              <svg
+                className=""
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+      <div
+        className="root root uui-scroll-bars uui-shadow-top uui-shadow-bottom"
+        style={
+          Object {
+            "display": "flex",
+            "height": "100%",
+            "overflow": "hidden",
+            "position": "relative",
+            "width": "100%",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "WebkitOverflowScrolling": "touch",
+              "bottom": 0,
+              "flex": "1 1 auto",
+              "left": 0,
+              "marginBottom": 0,
+              "marginRight": 0,
+              "overflow": "scroll",
+              "position": "relative",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <div
+            className="uui-panel root margin-24 uui-color-surface container"
+          >
+            <div>
+              Test content
+            </div>
+          </div>
+        </div>
+        <div
+          className="uui-track-horizontal"
+          style={
+            Object {
+              "display": "none",
+              "height": 6,
+              "position": "absolute",
+            }
+          }
+        >
+          <div
+            className="uui-thumb-horizontal"
+          />
+        </div>
+        <div
+          className="uui-track-vertical"
+          style={
+            Object {
+              "display": "none",
+              "position": "absolute",
+              "width": 6,
+            }
+          }
+        >
+          <div
+            className="uui-thumb-vertical"
+          />
+        </div>
+      </div>
+      <div
+        className="uui-flex-row root size-36 padding-24 vPadding-24 spacing-12 root modalFooter container align-items-center"
+        style={
+          Object {
+            "columnGap": undefined,
+            "rowGap": undefined,
+          }
+        }
+      >
+        <div
+          className="flexSpacer"
+        />
+        <button
+          className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-outline uui-color-secondary uui-size-36"
+          onClick={[Function]}
+          tabIndex={0}
+          type="button"
+        >
+          <div
+            className="uui-caption"
+          >
+            Discard
+          </div>
+        </button>
+        <button
+          className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-solid uui-color-accent uui-size-36"
+          onClick={[Function]}
+          tabIndex={0}
+          type="button"
+        >
+          <div
+            className="uui-caption"
+          >
+            Save
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    data-focus-guard={true}
+    style={
+      Object {
+        "height": "0px",
+        "left": "1px",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "fixed",
+        "top": "1px",
+        "width": "1px",
+      }
+    }
+    tabIndex={0}
+  />
+</div>
+`;

package/components/overlays/__tests__/__snapshots__/Dropdown.test.tsx.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdown should be rendered correctly 1`] = `
+<button
+  aria-expanded={false}
+  aria-haspopup={true}
+  className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-solid uui-color-primary uui-size-36"
+  onClick={[Function]}
+  tabIndex={0}
+  type="button"
+>
+  <div
+    className="uui-caption"
+  >
+    Test
+  </div>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;
+
+exports[`Dropdown should be rendered correctly 2`] = `
+<button
+  aria-expanded={false}
+  aria-haspopup={true}
+  className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-solid uui-color-primary uui-size-36"
+  onClick={[Function]}
+  tabIndex={0}
+  type="button"
+>
+  <div
+    className="uui-caption"
+  >
+    Test
+  </div>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;

package/components/overlays/__tests__/__snapshots__/DropdownContainer.test.tsx.snap

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropdownContainer should be rendered correctly 1`] = `
+Array [
+  <div
+    data-focus-guard={true}
+    style={
+      Object {
+        "height": "0px",
+        "left": "1px",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "fixed",
+        "top": "1px",
+        "width": "1px",
+      }
+    }
+    tabIndex={0}
+  />,
+  <div
+    data-focus-lock-disabled={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+  >
+    <div
+      className="uui-dropdown-body -lock-focus root container"
+      style={
+        Object {
+          "maxWidth": undefined,
+          "minHeight": undefined,
+          "minWidth": undefined,
+        }
+      }
+      tabIndex={-1}
+    >
+      <button
+        className="container uui-button-box uui-enabled root uui-button uui-fill-solid uui-color-primary uui-size-36"
+        onClick={[Function]}
+        tabIndex={-1}
+        type="button"
+      />
+    </div>
+  </div>,
+  <div
+    data-focus-guard={true}
+    style={
+      Object {
+        "height": "0px",
+        "left": "1px",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "fixed",
+        "top": "1px",
+        "width": "1px",
+      }
+    }
+    tabIndex={0}
+  />,
+]
+`;
+
+exports[`DropdownContainer should be rendered correctly 2`] = `
+<div
+  className="uui-dropdown-body -lock-focus root vPadding-18 padding-24 container"
+  style={
+    Object {
+      "maxWidth": undefined,
+      "minHeight": 600,
+      "minWidth": 300,
+    }
+  }
+  tabIndex={-1}
+>
+  <button
+    className="container uui-button-box uui-enabled root uui-button uui-fill-solid uui-color-primary uui-size-36"
+    onClick={[Function]}
+    tabIndex={-1}
+    type="button"
+  />
+</div>
+`;

package/components/overlays/__tests__/__snapshots__/DropdownMenu.test.tsx.snap

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropdownMenu should be rendered DropdownMenuBody correctly 1`] = `
+Array [
+  <div
+    data-focus-guard={true}
+    style={
+      Object {
+        "height": "0px",
+        "left": "1px",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "fixed",
+        "top": "1px",
+        "width": "1px",
+      }
+    }
+    tabIndex={0}
+  />,
+  <div
+    data-focus-lock-disabled={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+  >
+    <div
+      className="uui-dropdown-body -lock-focus root bodyRoot root container"
+      role="menu"
+      style={
+        Object {
+          "maxWidth": undefined,
+          "minHeight": undefined,
+          "minWidth": undefined,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className="uui-flex-row root itemRoot container -clickable align-items-center"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        role="menuitem"
+        style={
+          Object {
+            "columnGap": undefined,
+            "rowGap": undefined,
+          }
+        }
+        tabIndex={0}
+      >
+        <div
+          className="container"
+        >
+          Menu Item in Submenu
+        </div>
+      </div>
+      <div
+        className="root splitterRoot"
+      >
+        <hr
+          className="splitter"
+        />
+      </div>
+      <div
+        className="uui-dropdown-menu-header root headerRoot"
+      >
+        <span
+          className="header"
+        >
+          An example of DropdownMenuHeader
+        </span>
+      </div>
+      <div
+        className="uui-flex-row root root submenuRootItem itemRoot container -clickable align-items-center"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        role="menuitem"
+        style={
+          Object {
+            "columnGap": undefined,
+            "rowGap": undefined,
+          }
+        }
+        tabIndex={0}
+      >
+        <div
+          className="container"
+        >
+          One More SubMenu
+        </div>
+        <div
+          className="flexSpacer"
+        />
+        <button
+          className="container uui-button-box uui-enabled uui-icon_button uui-color-neutral root root icon iconAfter"
+          onClick={[Function]}
+          tabIndex={-1}
+          type="button"
+        >
+          <div
+            className="container uui-icon uui-enabled"
+            style={Object {}}
+          >
+            <svg
+              className=""
+            />
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>,
+  <div
+    data-focus-guard={true}
+    style={
+      Object {
+        "height": "0px",
+        "left": "1px",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "fixed",
+        "top": "1px",
+        "width": "1px",
+      }
+    }
+    tabIndex={0}
+  />,
+]
+`;