@epam/uui 5.5.1 → 5.5.2

package/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap

@@ -0,0 +1,877 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColumnsConfigurationModal 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
+    aria-modal={true}
+    className="uui-modal-window root modal container"
+    role="dialog"
+    style={
+      Object {
+        "height": "700px",
+        "width": "420px",
+      }
+    }
+  >
+    <div
+      className="uui-flex-row root size-36 padding-24 vPadding-12 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"
+      >
+        Configure columns
+      </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="uui-flex-row root size-36 padding-24 borderBottom spacing-12 searchArea container align-items-center"
+      style={
+        Object {
+          "columnGap": undefined,
+          "rowGap": undefined,
+        }
+      }
+    >
+      <div
+        className="container uui-input-box -clickable root size-30 mode-form"
+        onFocus={[Function]}
+        tabIndex={-1}
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+        <input
+          className="uui-input"
+          inputMode="search"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          placeholder="Search by column name"
+          tabIndex={0}
+          type="search"
+          value=""
+        />
+      </div>
+      <button
+        aria-expanded={false}
+        aria-haspopup={false}
+        className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-none uui-color-secondary uui-size-30"
+        onClick={[Function]}
+        tabIndex={0}
+        type="button"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </button>
+    </div>
+    <div
+      className="uui-panel root uui-surface-main mainPanel container"
+    >
+      <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-flex-row root size-24 padding-24 spacing-6 groupTitle 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-14 v-padding-6 groupTitleText container"
+            >
+              Displayed in table
+            </div>
+            <button
+              className="container uui-button-box uui-enabled uui-badge root size-18 uui-fill-solid uui-color-neutral groupTitleBadge"
+              onClick={[Function]}
+              tabIndex={-1}
+              type="button"
+            >
+              <div
+                className="uui-caption"
+              >
+                2
+              </div>
+            </button>
+          </div>
+          <div
+            className="uui-flex-row root size-30 groupItems container align-items-center"
+            style={
+              Object {
+                "columnGap": undefined,
+                "rowGap": undefined,
+              }
+            }
+          >
+            <div
+              className="uui-flex-row root size-30 rowWrapper notPinned -draggable container align-items-center"
+              onPointerEnter={[Function]}
+              onPointerLeave={[Function]}
+              onPointerMove={[Function]}
+              onPointerUp={[Function]}
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="dragHandle container uui-drag-handle"
+                onPointerDown={[Function]}
+                onTouchStart={[Function]}
+              />
+              <label
+                className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox uui-disabled"
+              >
+                <div
+                  className="uui-checkbox uui-checked"
+                >
+                  <input
+                    aria-checked={true}
+                    aria-disabled={true}
+                    checked={true}
+                    disabled={true}
+                    onChange={[Function]}
+                    tabIndex={-1}
+                    type="checkbox"
+                  />
+                  <div
+                    className="container uui-icon uui-enabled"
+                    style={Object {}}
+                  >
+                    <svg
+                      className=""
+                    />
+                  </div>
+                </div>
+                <div
+                  className="uui-input-label"
+                >
+                  ID
+                </div>
+              </label>
+              <div
+                className="uui-flex-row root size-30 pinIconButton container align-items-center"
+                style={
+                  Object {
+                    "columnGap": undefined,
+                    "rowGap": undefined,
+                  }
+                }
+              >
+                <span
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                >
+                  <button
+                    aria-disabled={false}
+                    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>
+                </span>
+              </div>
+            </div>
+            <div
+              className="uui-flex-row root size-30 rowWrapper notPinned -draggable container align-items-center"
+              onPointerEnter={[Function]}
+              onPointerLeave={[Function]}
+              onPointerMove={[Function]}
+              onPointerUp={[Function]}
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="dragHandle container uui-drag-handle"
+                onPointerDown={[Function]}
+                onTouchStart={[Function]}
+              />
+              <label
+                className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox uui-disabled"
+              >
+                <div
+                  className="uui-checkbox uui-checked"
+                >
+                  <input
+                    aria-checked={true}
+                    aria-disabled={true}
+                    checked={true}
+                    disabled={true}
+                    onChange={[Function]}
+                    tabIndex={-1}
+                    type="checkbox"
+                  />
+                  <div
+                    className="container uui-icon uui-enabled"
+                    style={Object {}}
+                  >
+                    <svg
+                      className=""
+                    />
+                  </div>
+                </div>
+                <div
+                  className="uui-input-label"
+                >
+                  Level
+                </div>
+              </label>
+              <div
+                className="uui-flex-row root size-30 pinIconButton container align-items-center"
+                style={
+                  Object {
+                    "columnGap": undefined,
+                    "rowGap": undefined,
+                  }
+                }
+              >
+                <span
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                >
+                  <button
+                    aria-disabled={false}
+                    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>
+                </span>
+              </div>
+            </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>
+    <div
+      className="uui-flex-row root size-36 padding-24 vPadding-24 spacing-12 root modalFooter borderTop container align-items-center"
+      style={
+        Object {
+          "columnGap": undefined,
+          "rowGap": undefined,
+        }
+      }
+    >
+      <button
+        className="container uui-button-box uui-enabled -clickable uui-link_button root uui-size-36 uui-has-left-icon uui-no-right-icon uui-color-primary"
+        onClick={[Function]}
+        tabIndex={0}
+        type="button"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+        <div
+          className="uui-caption"
+        >
+          Reset to Default
+        </div>
+      </button>
+      <div
+        className="flexSpacer"
+      />
+      <button
+        className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-none uui-color-secondary uui-size-36"
+        onClick={[Function]}
+        tabIndex={0}
+        type="button"
+      >
+        <div
+          className="uui-caption"
+        >
+          Cancel
+        </div>
+      </button>
+      <button
+        aria-disabled={false}
+        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"
+        >
+          Apply
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColumnsConfigurationModal should disable Apply button if all columns are hidden 1`] = `
+<div
+  className="container modalBlocker"
+  style={
+    Object {
+      "zIndex": 1,
+    }
+  }
+>
+  <div
+    aria-label="Click to close a modal"
+    className="uui-modal-blocker"
+    onClick={[Function]}
+  />
+  <div
+    aria-modal={true}
+    className="uui-modal-window root modal container"
+    role="dialog"
+    style={
+      Object {
+        "height": "700px",
+        "width": "420px",
+      }
+    }
+  >
+    <div
+      className="uui-flex-row root size-36 padding-24 vPadding-12 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"
+      >
+        Configure columns
+      </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="uui-flex-row root size-36 padding-24 borderBottom spacing-12 searchArea container align-items-center"
+      style={
+        Object {
+          "columnGap": undefined,
+          "rowGap": undefined,
+        }
+      }
+    >
+      <div
+        className="container uui-input-box -clickable root size-30 mode-form"
+        onFocus={[Function]}
+        tabIndex={-1}
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+        <input
+          className="uui-input"
+          inputMode="search"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          placeholder="Search by column name"
+          tabIndex={0}
+          type="search"
+          value=""
+        />
+      </div>
+      <button
+        aria-expanded={false}
+        aria-haspopup={false}
+        className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-none uui-color-secondary uui-size-30"
+        onClick={[Function]}
+        tabIndex={0}
+        type="button"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </button>
+    </div>
+    <div
+      className="uui-panel root uui-surface-main mainPanel container"
+    >
+      <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-flex-row root size-24 padding-24 spacing-6 groupTitle 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-14 v-padding-6 groupTitleText container"
+            >
+              Hidden in table
+            </div>
+            <button
+              className="container uui-button-box uui-enabled uui-badge root size-18 uui-fill-solid uui-color-neutral groupTitleBadge"
+              onClick={[Function]}
+              tabIndex={-1}
+              type="button"
+            >
+              <div
+                className="uui-caption"
+              >
+                2
+              </div>
+            </button>
+          </div>
+          <div
+            className="uui-flex-row root size-30 groupItems container align-items-center"
+            style={
+              Object {
+                "columnGap": undefined,
+                "rowGap": undefined,
+              }
+            }
+          >
+            <div
+              className="uui-flex-row root size-30 rowWrapper notPinned -draggable container align-items-center"
+              onPointerEnter={[Function]}
+              onPointerLeave={[Function]}
+              onPointerMove={[Function]}
+              onPointerUp={[Function]}
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="dragHandle container uui-drag-handle"
+                onPointerDown={[Function]}
+                onTouchStart={[Function]}
+              />
+              <label
+                className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox -clickable"
+              >
+                <div
+                  className="uui-checkbox"
+                >
+                  <input
+                    aria-checked={false}
+                    checked={false}
+                    disabled={false}
+                    onChange={[Function]}
+                    tabIndex={0}
+                    type="checkbox"
+                  />
+                </div>
+                <div
+                  className="uui-input-label"
+                >
+                  ID
+                </div>
+              </label>
+              <div
+                className="uui-flex-row root size-30 pinIconButton container align-items-center"
+                style={
+                  Object {
+                    "columnGap": undefined,
+                    "rowGap": undefined,
+                  }
+                }
+              >
+                <span
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                >
+                  <button
+                    aria-disabled={false}
+                    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>
+                </span>
+              </div>
+            </div>
+            <div
+              className="uui-flex-row root size-30 rowWrapper notPinned -draggable container align-items-center"
+              onPointerEnter={[Function]}
+              onPointerLeave={[Function]}
+              onPointerMove={[Function]}
+              onPointerUp={[Function]}
+              style={
+                Object {
+                  "columnGap": undefined,
+                  "rowGap": undefined,
+                }
+              }
+            >
+              <div
+                className="dragHandle container uui-drag-handle"
+                onPointerDown={[Function]}
+                onTouchStart={[Function]}
+              />
+              <label
+                className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox -clickable"
+              >
+                <div
+                  className="uui-checkbox"
+                >
+                  <input
+                    aria-checked={false}
+                    checked={false}
+                    disabled={false}
+                    onChange={[Function]}
+                    tabIndex={0}
+                    type="checkbox"
+                  />
+                </div>
+                <div
+                  className="uui-input-label"
+                >
+                  Level
+                </div>
+              </label>
+              <div
+                className="uui-flex-row root size-30 pinIconButton container align-items-center"
+                style={
+                  Object {
+                    "columnGap": undefined,
+                    "rowGap": undefined,
+                  }
+                }
+              >
+                <span
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                >
+                  <button
+                    aria-disabled={false}
+                    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>
+                </span>
+              </div>
+            </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>
+    <div
+      className="uui-flex-row root size-36 padding-24 vPadding-24 spacing-12 root modalFooter borderTop container align-items-center"
+      style={
+        Object {
+          "columnGap": undefined,
+          "rowGap": undefined,
+        }
+      }
+    >
+      <button
+        className="container uui-button-box uui-enabled -clickable uui-link_button root uui-size-36 uui-has-left-icon uui-no-right-icon uui-color-primary"
+        onClick={[Function]}
+        tabIndex={0}
+        type="button"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+        <div
+          className="uui-caption"
+        >
+          Reset to Default
+        </div>
+      </button>
+      <div
+        className="flexSpacer"
+      />
+      <button
+        className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-none uui-color-secondary uui-size-36"
+        onClick={[Function]}
+        tabIndex={0}
+        type="button"
+      >
+        <div
+          className="uui-caption"
+        >
+          Cancel
+        </div>
+      </button>
+      <button
+        aria-disabled={true}
+        className="container uui-button-box uui-disabled -clickable root uui-button uui-fill-solid uui-color-primary uui-size-36"
+        onClick={[Function]}
+        tabIndex={-1}
+        type="button"
+      >
+        <div
+          className="uui-caption"
+        >
+          Apply
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+`;