@truedat/qx 7.13.6 → 7.13.8

package/src/components/common/expressions/constantInputs/AnySelector.js

@@ -24,13 +24,14 @@ export default function AnySelector() {
           <TypeSelector
             onBlur={onBlur}
             value={type}
-            error={error?.message}
+            error={error}
             onChange={(_e, { value }) => {
               setValue(`${field}.value.value`, "");
               onChange(value);
             }}
             withoutTypeAny
           />
+
         )}
       />
       {type ? (

package/src/components/common/expressions/constantInputs/BooleanSelector.js

@@ -1,7 +1,8 @@
 import { use } from "react";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
-import { Dropdown } from "semantic-ui-react";
+import { Dropdown, Form, Label } from "semantic-ui-react";
+
 import QxContext from "@truedat/qx/components/QxContext";
 
 export default function BooleanSelector() {
@@ -13,24 +14,28 @@ export default function BooleanSelector() {
     <Controller
       control={control}
       name={`${field}.value.value`}
-      rules={{ required: true }}
+      rules={{
+        required: formatMessage({ id: "functions.form.required" }),
+      }}
       render={({
         field: { onBlur, onChange, value },
         fieldState: { error },
       }) => (
-        <Dropdown
-          fluid
-          selection
-          error={!!error}
-          onBlur={onBlur}
-          options={["true", "false"].map((v) => ({
-            key: v,
-            value: v,
-            text: formatMessage({ id: `functions.expression.constant.${v}` }),
-          }))}
-          value={value}
-          onChange={(_e, { value }) => onChange(value)}
-        />
+        <Form.Field error={!!error?.message}>
+          <Dropdown
+            fluid
+            selection
+            onBlur={onBlur}
+            options={["true", "false"].map((v) => ({
+              key: v,
+              value: v,
+              text: formatMessage({ id: `functions.expression.constant.${v}` }),
+            }))}
+            value={value}
+            onChange={(_e, { value }) => onChange(value)}
+          />
+          {error?.message && <Label prompt pointing>{error?.message}</Label>}
+        </Form.Field>
       )}
     />
   );

package/src/components/common/expressions/constantInputs/DefaultSelector.js

@@ -26,7 +26,6 @@ export default function DefaultSelector() {
           onBlur={onBlur}
           onChange={(_e, { value }) => onChange(value)}
           value={value}
-          required
         />
       )}
     />

package/src/components/common/expressions/constantInputs/__tests__/__snapshots__/AnySelector.spec.js.snap

@@ -3,103 +3,107 @@
 exports[`<AnySelector /> matches the latest snapshot 1`] = `
 <div>
   <div
-    aria-expanded="false"
-    class="ui basic button dropdown"
-    name="type"
-    role="listbox"
-    tabindex="0"
+    class="field"
   >
-    <i
-      aria-hidden="true"
-      class="dropdown icon"
-    />
     <div
-      class="menu transition"
+      aria-expanded="false"
+      class="ui button fluid dropdown"
+      name="type"
+      role="listbox"
+      tabindex="0"
     >
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
       <div
-        aria-checked="false"
-        aria-selected="true"
-        class="selected item"
-        role="option"
-        style="pointer-events: all;"
+        class="menu transition"
       >
-        <i
-          aria-hidden="true"
-          class="adjust icon"
-        />
-        <span
-          class="text"
+        <div
+          aria-checked="false"
+          aria-selected="true"
+          class="selected item"
+          role="option"
+          style="pointer-events: all;"
         >
-          expressions.data_type.boolean
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="font icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="adjust icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.boolean
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          expressions.data_type.string
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="hashtag icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="font icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.string
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          expressions.data_type.number
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="calendar alternate outline icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="hashtag icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.number
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          expressions.data_type.date
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="clock outline icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="calendar alternate outline icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.date
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          expressions.data_type.timestamp
-        </span>
+          <i
+            aria-hidden="true"
+            class="clock outline icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.timestamp
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -109,124 +113,127 @@ exports[`<AnySelector /> matches the latest snapshot 1`] = `
 exports[`<AnySelector /> user interaction 1`] = `
 <div>
   <div
-    aria-expanded="false"
-    class="ui basic button dropdown"
-    name="type"
-    role="listbox"
+    class="field"
     style=""
-    tabindex="0"
   >
     <div
-      aria-atomic="true"
-      aria-live="polite"
-      class="divider text"
-      role="alert"
-    >
-      expressions.data_type.string
-    </div>
-    <i
-      aria-hidden="true"
-      class="dropdown icon"
-    />
-    <div
-      class="menu transition"
+      aria-expanded="false"
+      class="ui button fluid dropdown"
+      name="type"
+      role="listbox"
+      tabindex="0"
     >
       <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
+        aria-atomic="true"
+        aria-live="polite"
+        class="divider text"
+        role="alert"
       >
-        <i
-          aria-hidden="true"
-          class="adjust icon"
-        />
-        <span
-          class="text"
-        >
-          expressions.data_type.boolean
-        </span>
+        expressions.data_type.string
       </div>
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
       <div
-        aria-checked="true"
-        aria-selected="true"
-        class="active selected item"
-        role="option"
-        style="pointer-events: all;"
+        class="menu transition"
       >
-        <i
-          aria-hidden="true"
-          class="font icon"
-        />
-        <span
-          class="text"
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          expressions.data_type.string
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="hashtag icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="adjust icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.boolean
+          </span>
+        </div>
+        <div
+          aria-checked="true"
+          aria-selected="true"
+          class="active selected item"
+          role="option"
+          style="pointer-events: all;"
         >
-          expressions.data_type.number
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="calendar alternate outline icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="font icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.string
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          expressions.data_type.date
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="clock outline icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="hashtag icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.number
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
+        >
+          <i
+            aria-hidden="true"
+            class="calendar alternate outline icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.date
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          expressions.data_type.timestamp
-        </span>
+          <i
+            aria-hidden="true"
+            class="clock outline icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.timestamp
+          </span>
+        </div>
       </div>
     </div>
   </div>
   <div
-    class="required field"
+    class="field"
   >
     <div
       class="ui input"
     >
       <input
         autocomplete="off"
-        required=""
         type="text"
         value=""
       />

package/src/components/common/expressions/constantInputs/__tests__/__snapshots__/BooleanSelector.spec.js.snap

@@ -3,43 +3,47 @@
 exports[`<BooleanSelector /> matches the latest snapshot 1`] = `
 <div>
   <div
-    aria-expanded="false"
-    class="ui fluid selection dropdown"
-    role="listbox"
-    tabindex="0"
+    class="field"
   >
-    <i
-      aria-hidden="true"
-      class="dropdown icon"
-    />
     <div
-      class="menu transition"
+      aria-expanded="false"
+      class="ui fluid selection dropdown"
+      role="listbox"
+      tabindex="0"
     >
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
       <div
-        aria-checked="false"
-        aria-selected="true"
-        class="selected item"
-        role="option"
-        style="pointer-events: all;"
+        class="menu transition"
       >
-        <span
-          class="text"
+        <div
+          aria-checked="false"
+          aria-selected="true"
+          class="selected item"
+          role="option"
+          style="pointer-events: all;"
         >
-          true
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <span
-          class="text"
+          <span
+            class="text"
+          >
+            true
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          false
-        </span>
+          <span
+            class="text"
+          >
+            false
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -49,51 +53,55 @@ exports[`<BooleanSelector /> matches the latest snapshot 1`] = `
 exports[`<BooleanSelector /> user interaction 1`] = `
 <div>
   <div
-    aria-expanded="false"
-    class="ui fluid selection dropdown"
-    role="listbox"
-    tabindex="0"
+    class="field"
   >
     <div
-      aria-atomic="true"
-      aria-live="polite"
-      class="divider text"
-      role="alert"
-    >
-      true
-    </div>
-    <i
-      aria-hidden="true"
-      class="dropdown icon"
-    />
-    <div
-      class="menu transition"
+      aria-expanded="false"
+      class="ui fluid selection dropdown"
+      role="listbox"
+      tabindex="0"
     >
       <div
-        aria-checked="true"
-        aria-selected="true"
-        class="active selected item"
-        role="option"
-        style="pointer-events: all;"
+        aria-atomic="true"
+        aria-live="polite"
+        class="divider text"
+        role="alert"
       >
-        <span
-          class="text"
-        >
-          true
-        </span>
+        true
       </div>
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
       <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
+        class="menu transition"
       >
-        <span
-          class="text"
+        <div
+          aria-checked="true"
+          aria-selected="true"
+          class="active selected item"
+          role="option"
+          style="pointer-events: all;"
+        >
+          <span
+            class="text"
+          >
+            true
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          false
-        </span>
+          <span
+            class="text"
+          >
+            false
+          </span>
+        </div>
       </div>
     </div>
   </div>