@epam/uui 5.3.0-rc.0 → 5.3.0

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

@@ -0,0 +1,951 @@
+// 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
+    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": "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"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          tabIndex={-1}
+        >
+          <div
+            className="container uui-icon uui-enabled"
+            style={Object {}}
+          >
+            <svg
+              className=""
+            />
+          </div>
+          <input
+            className="uui-input"
+            inputMode="search"
+            onChange={[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-color-surface 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"
+                  tabIndex={-1}
+                >
+                  <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"
+                  tabIndex={-1}
+                >
+                  <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>
+  <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[`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
+    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": "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"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          tabIndex={-1}
+        >
+          <div
+            className="container uui-icon uui-enabled"
+            style={Object {}}
+          >
+            <svg
+              className=""
+            />
+          </div>
+          <input
+            className="uui-input"
+            inputMode="search"
+            onChange={[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-color-surface 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"
+                  tabIndex={-1}
+                >
+                  <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"
+                  tabIndex={-1}
+                >
+                  <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>
+  <div
+    data-focus-guard={true}
+    style={
+      Object {
+        "height": "0px",
+        "left": "1px",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "fixed",
+        "top": "1px",
+        "width": "1px",
+      }
+    }
+    tabIndex={0}
+  />
+</div>
+`;