@pareto-engineering/design-system 4.0.0-alpha.64 → 4.0.0-alpha.65

package/src/ui/f/fields/LinkInput/LinkInput.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect, memo } from 'react'
+import { memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -13,6 +13,8 @@ import { FormLabel, FormDescription } from '../../common'
 
 // Local Definitions
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'link-input'
@@ -36,10 +38,6 @@ const LinkInput = ({
   autoComplete,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [field] = useField({ name, validate })
 
   return (

package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useState, useInsertionEffect } from 'react'
+import { useState } from 'react'
 
 import { useField } from 'formik'
 
@@ -11,6 +11,8 @@ import PropTypes from 'prop-types'
 
 // Local Definitions
 
+import './styles.scss'
+
 import { Combobox, MultipleCombobox } from './common'
 
 /**
@@ -40,10 +42,6 @@ const QueryCombobox = ({
   promptCreateNewOption,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [, meta, helpers] = useField({ name, validate })
 
   const { setValue, setError } = helpers

package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx

@@ -125,17 +125,19 @@ const Combobox = ({
       >
         {label}
       </FormLabel>
-      <input {...getInputProps()} className="input" disabled={disabled} placeholder={placeholder} />
-      {isFetching && (
-      <LoadingCircle className="x-main" />
-      )}
-      {inputValue.length > minLength && !isFetching && (
+      <div className="input-container">
+        <input {...getInputProps()} className="input" disabled={disabled} placeholder={placeholder} />
+        {isFetching && (
+        <LoadingCircle className="x-main" />
+        )}
+        {inputValue.length > minLength && !isFetching && (
         <Button isSimple isCompact color="heading" onClick={resetInputValue}>
           <span className="icon">
             Y
           </span>
         </Button>
-      )}
+        )}
+      </div>
       <FormDescription className="s-1" description={description} name={name} />
       <Popover
         isOpen={isOpen}

package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx

@@ -215,18 +215,20 @@ const MultipleCombobox = ({
           ))}
         </div>
       )}
-      <input
-        {...getInputProps(
-          getDropdownProps({ preventKeyAction: isOpen }),
+
+      <div className="input-container">
+        <input
+          {...getInputProps(
+            getDropdownProps({ preventKeyAction: isOpen }),
+          )}
+          className="input"
+          disabled={disabled}
+          placeholder={placeholder}
+        />
+        {isFetching && (
+        <LoadingCircle className="x-main" />
         )}
-        className="input"
-        disabled={disabled}
-        placeholder={placeholder}
-      />
-      {isFetching && (
-      <LoadingCircle className="x-main" />
-      )}
-      {inputValue.length > minLength && !isFetching && (
+        {inputValue.length > minLength && !isFetching && (
         <Button
           isSimple
           isCompact
@@ -237,7 +239,8 @@ const MultipleCombobox = ({
             Y
           </span>
         </Button>
-      )}
+        )}
+      </div>
 
       <FormDescription className="s-1" description={description} name={name} />
       <Popover

package/src/ui/f/fields/QueryCombobox/styles.scss

@@ -23,7 +23,6 @@ $on-disabled-background: var(--on-background-inputs-30);
   display: flex;
   flex-direction: column;
   outline: none;
-  position: relative;
 
   > .#{bem.$base}.form-label {
     margin-bottom: var(--gap);
@@ -60,45 +59,52 @@ $on-disabled-background: var(--on-background-inputs-30);
     }
   }
 
-  >.#{bem.$base}.loading-circle,
-  >.#{bem.$base}.button {
-    position: absolute;
-    right: $default-loading-circle-displacement;
-  }
-
-  >.#{bem.$base}.loading-circle {
-    top: calc($default-loading-circle-displacement * 1.5);
-  }
 
-  >.#{bem.$base}.button {
-    top: $default-loading-circle-displacement;
-  }
+  > .input-container {
+    position: relative;
 
-  > .input {
-    background: $default-background;
-    border: $default-border;
-    border-radius: calc(var(--theme-default-border-radius) / 2);
-    color: $on-default-background;
-    outline: none;
-    padding: $default-input-padding;
+    >.#{bem.$base}.loading-circle,
+    >.#{bem.$base}.button {
+      position: absolute;
+      right: $default-loading-circle-displacement;
+    }
 
-    &::placeholder {
-      color: var(--metadata);
+    >.#{bem.$base}.loading-circle {
+      top: calc($default-loading-circle-displacement * 1.5);
     }
 
-    &:disabled {
-      background-color: $disabled-background;
-      color: $on-disabled-background;
+    >.#{bem.$base}.button {
+      top: $default-loading-circle-displacement;
     }
 
-    &:not(:disabled) {
-      &:hover,
-      &:active {
-        border: $hover-border;
+
+    > .input {
+      background: $default-background;
+      border: $default-border;
+      border-radius: calc(var(--theme-default-border-radius) / 2);
+      color: $on-default-background;
+      outline: none;
+      padding: $default-input-padding;
+      width: 100%;
+
+      &::placeholder {
+        color: var(--metadata);
+      }
+
+      &:disabled {
+        background-color: $disabled-background;
+        color: $on-disabled-background;
       }
 
-      &:focus {
-        border: $focus-border;
+      &:not(:disabled) {
+        &:hover,
+        &:active {
+          border: $hover-border;
+        }
+
+        &:focus {
+          border: $focus-border;
+        }
       }
     }
   }

package/src/ui/f/fields/RatingsInput/RatingsInput.jsx

@@ -1,13 +1,14 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useState, useInsertionEffect, memo } from 'react'
+import { useState, memo } from 'react'
 
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
+import './styles.scss'
 
 import { Rating } from './common'
 import { FormLabel } from '../../common'
@@ -35,10 +36,6 @@ const RatingsInput = ({
   optional,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [hover, setHover] = useState(null)
 
   return (

package/src/ui/f/fields/SelectInput/SelectInput.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect, memo } from 'react'
+import { memo } from 'react'
 
 import { useField } from 'formik'
 
@@ -13,6 +13,8 @@ import { LoadingCircle } from 'ui/a'
 
 import { FormLabel, FormDescription } from '../../common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -39,10 +41,6 @@ const SelectInput = ({
   autoComplete,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [field] = useField({ name, validate })
 
   return (

package/src/ui/f/fields/TextInput/TextInput.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect, memo } from 'react'
+import { memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -13,6 +13,8 @@ import { FormLabel, FormDescription } from '../../common'
 
 // Local Definitions
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'text-input'
@@ -38,10 +40,6 @@ const TextInput = ({
   symbol,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [field] = useField({ name, validate })
   const symbolStyle = symbol
     ? { '--symbol': symbol }

package/src/ui/f/fields/TextareaInput/TextareaInput.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect, memo } from 'react'
+import { memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -11,6 +11,8 @@ import { useField } from 'formik'
 
 // Local Definitions
 
+import './styles.scss'
+
 import { FormLabel, FormDescription } from '../../common'
 
 const baseClassName = styleNames.base
@@ -38,10 +40,6 @@ const TextareaInput = ({
   resize,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [field] = useField({ name, validate })
 
   return (