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

package/dist/es/f/fields/ChoicesInput/ChoicesInput.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @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';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -9,6 +9,7 @@ import styleNames from '@pareto-engineering/bem/exports';
 
 import { Choice } from "./common";
 import { FormDescription, FormLabel } from "../../common";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'choices-input';
 
@@ -31,35 +32,29 @@ const ChoicesInput = ({
   description,
   spaceBetween,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, label && /*#__PURE__*/React.createElement(FormLabel, {
-    name: name,
-    color: labelColor,
-    optional: optional
-    // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement("div", {
-    className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
-  }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
-    className: `x-${color}`,
-    key: choice.value,
-    name: name,
-    id: `${name}-${choice.value}`,
-    multiple: multiple,
-    validate: validate,
-    disabled: disabled
-  }, otherProps, choice)))), /*#__PURE__*/React.createElement(FormDescription, {
-    className: "s-1",
-    description: description,
-    name: name
-  }));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, label && /*#__PURE__*/React.createElement(FormLabel, {
+  name: name,
+  color: labelColor,
+  optional: optional
+}, label), /*#__PURE__*/React.createElement("div", {
+  className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
+}, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
+  className: `x-${color}`,
+  key: choice.value,
+  name: name,
+  id: `${name}-${choice.value}`,
+  multiple: multiple,
+  validate: validate,
+  disabled: disabled
+}, otherProps, choice)))), /*#__PURE__*/React.createElement(FormDescription, {
+  className: "s-1",
+  description: description,
+  name: name
+}));
 ChoicesInput.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/f/fields/EditorInput/EditorInput.js

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
+import { memo } from 'react';
 import { useFormikContext } from 'formik';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
@@ -20,6 +20,7 @@ import styleNames from '@pareto-engineering/bem/exports';
 
 import { FormLabel, FormDescription } from "../../common";
 import { Toolbar, TreeViewPlugin } from "./common";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'editor-input';
 
@@ -43,9 +44,6 @@ const EditorInput = ({
   showDebugger
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const formik = useFormikContext();
   const setInitialValue = () => {
     const value = formik.values[name];

package/dist/es/f/fields/LinkInput/LinkInput.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @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';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
@@ -9,6 +9,7 @@ import { FormLabel, FormDescription } from "../../common";
 
 // Local Definitions
 
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'link-input';
 
@@ -31,9 +32,6 @@ const LinkInput = ({
   autoComplete
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     validate

package/dist/es/f/fields/QueryCombobox/QueryCombobox.js

@@ -1,12 +1,13 @@
 /* @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';
 import { useRelayEnvironment, fetchQuery } from 'react-relay';
 import PropTypes from 'prop-types';
 
 // Local Definitions
 
+import "./styles.scss";
 import { Combobox, MultipleCombobox } from "./common";
 
 /**
@@ -36,9 +37,6 @@ const QueryCombobox = ({
   promptCreateNewOption
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [, meta, helpers] = useField({
     name,
     validate

package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js

@@ -103,7 +103,9 @@ const Combobox = ({
     name: name,
     optional: optional,
     color: labelColor
-  }), label), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
+  }), label), /*#__PURE__*/React.createElement("div", {
+    className: "input-container"
+  }, /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
     className: "input",
     disabled: disabled,
     placeholder: placeholder
@@ -116,7 +118,7 @@ const Combobox = ({
     onClick: resetInputValue
   }, /*#__PURE__*/React.createElement("span", {
     className: "icon"
-  }, "Y")), /*#__PURE__*/React.createElement(FormDescription, {
+  }, "Y"))), /*#__PURE__*/React.createElement(FormDescription, {
     className: "s-1",
     description: description,
     name: name

package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js

@@ -181,7 +181,9 @@ const MultipleCombobox = ({
     color: color
   }, /*#__PURE__*/React.createElement("span", null, selectedItem.label), /*#__PURE__*/React.createElement("span", {
     className: "icon close"
-  }, "Y"))))), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(getDropdownProps({
+  }, "Y"))))), /*#__PURE__*/React.createElement("div", {
+    className: "input-container"
+  }, /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(getDropdownProps({
     preventKeyAction: isOpen
   })), {
     className: "input",
@@ -196,7 +198,7 @@ const MultipleCombobox = ({
     onClick: resetInputValue
   }, /*#__PURE__*/React.createElement("span", {
     className: "icon"
-  }, "Y")), /*#__PURE__*/React.createElement(FormDescription, {
+  }, "Y"))), /*#__PURE__*/React.createElement(FormDescription, {
     className: "s-1",
     description: description,
     name: name

package/dist/es/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/dist/es/f/fields/RatingsInput/RatingsInput.js

@@ -1,11 +1,11 @@
 /* @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";
 const baseClassName = styleNames.base;
@@ -30,9 +30,6 @@ const RatingsInput = ({
   optional
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [hover, setHover] = useState(null);
   return /*#__PURE__*/React.createElement("div", {
     id: id,

package/dist/es/f/fields/SelectInput/SelectInput.js

@@ -1,12 +1,13 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @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';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { LoadingCircle } from "../../../a";
 import { FormLabel, FormDescription } from "../../common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -33,9 +34,6 @@ const SelectInput = ({
   autoComplete
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     validate

package/dist/es/f/fields/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @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';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
@@ -9,6 +9,7 @@ import { FormLabel, FormDescription } from "../../common";
 
 // Local Definitions
 
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'text-input';
 
@@ -33,9 +34,6 @@ const TextInput = ({
   symbol,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     validate

package/dist/es/f/fields/TextareaInput/TextareaInput.js

@@ -1,13 +1,14 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @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';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
 
 // Local Definitions
 
+import "./styles.scss";
 import { FormLabel, FormDescription } from "../../common";
 const baseClassName = styleNames.base;
 const componentClassName = 'text-area-input';
@@ -33,9 +34,6 @@ const TextareaInput = ({
   resize
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     validate

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.64",
+  "version": "4.0.0-alpha.65",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.63",
+    "@pareto-engineering/assets": "^4.0.0-alpha.65",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
     "@pareto-engineering/styles": "^4.0.0-alpha.57",
     "@pareto-engineering/utils": "^4.0.0-alpha.46",
@@ -71,5 +71,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "2664d428449c22570d89c6c4f9e6d65e3c1d51c1"
+  "gitHead": "daa9532989bb08c3a7adfa33d2356499c27333e2"
 }

package/src/ui/f/common/Description/Description.jsx

@@ -1,8 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import { useField } from 'formik'
 
 import PropTypes from 'prop-types'
@@ -11,6 +9,8 @@ import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'description'
@@ -27,10 +27,6 @@ const Description = ({
   color,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [, meta] = useField(name)
   const hasError = meta.touched && meta.error
 

package/src/ui/f/common/Label/Label.jsx

@@ -1,13 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
+import './styles.scss'
 
 const baseClassName = styleNames.base
 
@@ -26,31 +25,24 @@ const Label = ({
   optional,
   as:Wrapper,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <Wrapper
-      htmlFor={Wrapper === 'label' ? name : undefined}
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${color}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      {children}
-      {optional && ' (Optional)'}
-    </Wrapper>
-  )
-}
+}) => (
+  <Wrapper
+    htmlFor={Wrapper === 'label' ? name : undefined}
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${color}`,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    {children}
+    {optional && ' (Optional)'}
+  </Wrapper>
+)
 
 Label.propTypes = {
   /**

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

@@ -1,8 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
@@ -12,6 +10,7 @@ import { useField } from 'formik'
 import { FormLabel, FormDescription } from '../../common'
 
 // Local Definitions
+import './styles.scss'
 
 const baseClassName = styleNames.base
 
@@ -32,10 +31,6 @@ const Checkbox = ({
   labelColor,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [field] = useField({ name, type: 'checkbox' })
 
   return (

package/src/ui/f/fields/ChoicesInput/ChoicesInput.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 { Choice } from './common'
 
 import { FormDescription, FormLabel } from '../../common'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'choices-input'
@@ -36,52 +38,45 @@ const ChoicesInput = ({
   description,
   spaceBetween,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    {label && (
+    <FormLabel
+      name={name}
+      color={labelColor}
+      optional={optional}
     >
-      {label && (
-        <FormLabel
+      {label}
+    </FormLabel>
+    )}
+    <div className={['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')}>
+      { options.map((choice) => (
+        <Choice
+          className={`x-${color}`}
+          key={choice.value}
           name={name}
-          color={labelColor}
-          optional={optional}
-        // {...otherProps}
-        >
-          {label}
-        </FormLabel>
-      )}
-      <div className={['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')}>
-        { options.map((choice) => (
-          <Choice
-            className={`x-${color}`}
-            key={choice.value}
-            name={name}
-            id={`${name}-${choice.value}`}
-            multiple={multiple}
-            validate={validate}
-            disabled={disabled}
-            {...otherProps}
-            {...choice}
-          />
-        ))}
-      </div>
-      <FormDescription className="s-1" description={description} name={name} />
+          id={`${name}-${choice.value}`}
+          multiple={multiple}
+          validate={validate}
+          disabled={disabled}
+          {...otherProps}
+          {...choice}
+        />
+      ))}
     </div>
-  )
-}
+    <FormDescription className="s-1" description={description} name={name} />
+  </div>
+)
 
 ChoicesInput.propTypes = {
   /**

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react'
-import { useInsertionEffect, memo } from 'react'
+import { memo } from 'react'
 import { useFormikContext } from 'formik'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
@@ -22,6 +22,8 @@ import styleNames from '@pareto-engineering/bem/exports'
 import { FormLabel, FormDescription } from '../../common'
 import { Toolbar, TreeViewPlugin } from './common'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 const componentClassName = 'editor-input'
 
@@ -45,10 +47,6 @@ const EditorInput = ({
   showDebugger,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const formik = useFormikContext()
 
   const setInitialValue = () => {