@pareto-engineering/design-system 3.0.0-alpha.29 → 4.0.0-alpha.13

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

@@ -10,17 +10,16 @@ import { ChoicesInput } from "../ChoicesInput";
 /**
  * This is the component description.
  */
-const QueryChoices = _ref => {
-  let {
-    name,
-    optionsKeyMap,
-    query,
-    variables,
-    validate,
-    loadingOption,
-    extraVariables,
-    ...otherProps
-  } = _ref;
+const QueryChoices = ({
+  name,
+  optionsKeyMap,
+  query,
+  variables,
+  validate,
+  loadingOption,
+  extraVariables,
+  ...otherProps
+}) => {
   const [,, helpers] = useField({
     name,
     validate
@@ -56,15 +55,12 @@ const QueryChoices = _ref => {
         if (setError) setError(fetchError.message);
       },
       next: data => {
-        setOptions([...data[accessor].edges.map(_ref2 => {
-          let {
-            node
-          } = _ref2;
-          return {
-            value: node[optionsKeyMap.value],
-            label: optionsKeyMap.getLabel(node)
-          };
-        })]);
+        setOptions([...data[accessor].edges.map(({
+          node
+        }) => ({
+          value: node[optionsKeyMap.value],
+          label: optionsKeyMap.getLabel(node)
+        }))]);
       }
     });
   };

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

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useLayoutEffect } from 'react';
+import { useState, useInsertionEffect } from 'react';
 import { useField } from 'formik';
 import { useRelayEnvironment, fetchQuery } from 'react-relay';
 import PropTypes from 'prop-types';
@@ -12,29 +12,28 @@ import { Combobox, MultipleCombobox } from "./common";
 /**
  * This is the component description.
  */
-const QueryCombobox = _ref => {
-  let {
-    id,
-    style,
-    className,
-    query,
-    multiple,
-    name,
-    label,
-    color,
-    optional,
-    description,
-    disabled,
-    debounceMs,
-    searchVariable,
-    extraVariables,
-    optionsKeyMap,
-    minLength,
-    transformSearch,
-    validate
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const QueryCombobox = ({
+  id,
+  style,
+  className,
+  query,
+  multiple,
+  name,
+  label,
+  color,
+  optional,
+  description,
+  disabled,
+  debounceMs,
+  searchVariable,
+  extraVariables,
+  optionsKeyMap,
+  minLength,
+  transformSearch,
+  validate
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [, meta, helpers] = useField({
@@ -78,15 +77,12 @@ const QueryCombobox = _ref => {
         if (setError) setError(fetchError.message);
       },
       next: data => {
-        setOptions(data[accessor].edges.map(_ref2 => {
-          let {
-            node
-          } = _ref2;
-          return {
-            value: node[optionsKeyMap.value],
-            label: optionsKeyMap.getLabel(node)
-          };
-        }));
+        setOptions(data[accessor].edges.map(({
+          node
+        }) => ({
+          value: node[optionsKeyMap.value],
+          label: optionsKeyMap.getLabel(node)
+        })));
       }
     });
   };

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

@@ -18,26 +18,25 @@ const componentClassName = 'combobox';
 /**
  * This is the component description.
  */
-const Combobox = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    label,
-    name,
-    options: items,
-    getOptions,
-    setValue,
-    description,
-    value,
-    color,
-    minLength,
-    isFetching,
-    transformSearch,
-    disabled,
-    optional
-    // ...otherProps
-  } = _ref;
+const Combobox = ({
+  id,
+  className: userClassName,
+  style,
+  label,
+  name,
+  options: items,
+  getOptions,
+  setValue,
+  description,
+  value,
+  color,
+  minLength,
+  isFetching,
+  transformSearch,
+  disabled,
+  optional
+  // ...otherProps
+}) => {
   const {
     isOpen,
     selectItem,
@@ -54,10 +53,9 @@ const Combobox = _ref => {
     items,
     initialSelectedItem: value,
     itemToString: item => item ? item.label : '',
-    onInputValueChange: _ref2 => {
-      let {
-        inputValue: searchInputValue
-      } = _ref2;
+    onInputValueChange: ({
+      inputValue: searchInputValue
+    }) => {
       const transformedInput = transformSearch(searchInputValue);
       if (transformedInput.length > minLength) {
         getOptions(transformedInput);

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

@@ -12,31 +12,28 @@ const componentClassName = 'menu';
 /**
  * This is the component description.
  */
-const Menu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    items,
-    isOpen,
-    highlightedIndex,
-    getItemProps,
-    ...otherProps
-  } = _ref;
-  return /*#__PURE__*/React.createElement("ul", _extends({
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style,
-    ref: ref
-  }, otherProps), isOpen && items.map((item, index) => /*#__PURE__*/React.createElement("li", _extends({
-    key: item.label
-  }, getItemProps({
-    item,
-    index
-  }), {
-    className: ['item', highlightedIndex === index && styleNames.modifierActive].filter(Boolean).join(' ')
-  }), /*#__PURE__*/React.createElement("p", null, item.label))));
-});
+const Menu = /*#__PURE__*/React.forwardRef(({
+  id,
+  className: userClassName,
+  style,
+  items,
+  isOpen,
+  highlightedIndex,
+  getItemProps,
+  ...otherProps
+}, ref) => /*#__PURE__*/React.createElement("ul", _extends({
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style,
+  ref: ref
+}, otherProps), isOpen && items.map((item, index) => /*#__PURE__*/React.createElement("li", _extends({
+  key: item.label
+}, getItemProps({
+  item,
+  index
+}), {
+  className: ['item', highlightedIndex === index && styleNames.modifierActive].filter(Boolean).join(' ')
+}), /*#__PURE__*/React.createElement("p", null, item.label)))));
 Menu.propTypes = {
   /**
    * The HTML id for this element

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

@@ -26,26 +26,25 @@ const testIfArraysAreUnique = (first, second) => first.filter(objInFirstArray =>
 /**
  * This is the component description.
  */
-const MultipleCombobox = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    label,
-    name,
-    optional,
-    options: items,
-    getOptions,
-    setValue,
-    description,
-    value,
-    color,
-    isFetching,
-    minLength,
-    transformSearch,
-    disabled
-    // ...otherProps
-  } = _ref;
+const MultipleCombobox = ({
+  id,
+  className: userClassName,
+  style,
+  label,
+  name,
+  optional,
+  options: items,
+  getOptions,
+  setValue,
+  description,
+  value,
+  color,
+  isFetching,
+  minLength,
+  transformSearch,
+  disabled
+  // ...otherProps
+}) => {
   const [searchInputValue, setSearchInputValue] = useState('');
   const {
     getSelectedItemProps,
@@ -98,12 +97,11 @@ const MultipleCombobox = _ref => {
       }
       return changes;
     },
-    onStateChange: _ref2 => {
-      let {
-        inputValue: newSearchInputValue,
-        type,
-        selectedItem
-      } = _ref2;
+    onStateChange: ({
+      inputValue: newSearchInputValue,
+      type,
+      selectedItem
+    }) => {
       switch (type) {
         case useCombobox.stateChangeTypes.InputChange:
           {

package/dist/es/f/fields/QueryCombobox/styles.scss

@@ -1,6 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
+@use "sass:math";
 
 $default-input-padding: .75em .75em .55em;
 $default-padding: 1em;
@@ -10,82 +11,82 @@ $default-loading-circle-displacement: 1em;
 
 .#{bem.$base}.combobox,
 .#{bem.$base}.multiple-combobox {
-    position: relative;
+  position: relative;
 
-    .#{bem.$base}.label {
-        margin-bottom: $default-margin
-    }
+  .#{bem.$base}.label {
+    margin-bottom: $default-margin;
+  }
 
-    .#{bem.$base}.popover {
-        width: 100%;
+  .#{bem.$base}.popover {
+    width: 100%;
 
-        >.menu {
-            list-style: none;
-            margin: 0;
-            outline: 0;
-            padding: 0;
+    >.menu {
+      list-style: none;
+      margin: 0;
+      outline: 0;
+      padding: 0;
 
-            >.item {
-                padding: $default-padding / 2;
+      >.item {
+        padding: math.div($default-padding, 2);
 
-                &.#{bem.$modifier-active} {
-                    background-color: var(--background2);
-                }
-            }
+        &.#{bem.$modifier-active} {
+          background-color: var(--background2);
         }
+      }
     }
+  }
 
-    >.input-wrapper {
-        position: relative;
+  >.input-wrapper {
+    position: relative;
 
-        >.#{bem.$base}.loading-circle,
-        >.#{bem.$base}.button {
-            position: absolute;
-            top: $default-loading-circle-displacement;
-            right: $default-loading-circle-displacement;
-        }
+    >.#{bem.$base}.loading-circle,
+    >.#{bem.$base}.button {
+      position: absolute;
+      right: $default-loading-circle-displacement;
+      top: $default-loading-circle-displacement;
+    }
 
-        >.input {
-            background: var(--soft-y);
-            border: var(--theme-border-style) var(--hard-y);
-            color: var(--on-y);
-            padding: $default-input-padding;
-            width: 100%;
+    >.input {
+      background: var(--soft-y);
+      border: var(--theme-border-style) var(--hard-y);
+      color: var(--on-y);
+      padding: $default-input-padding;
+      width: 100%;
 
-            &::placeholder {
-                color: var(--metadata);
-            }
+      &::placeholder {
+        color: var(--metadata);
+      }
 
-            &:not(:disabled):hover {
-                border: var(--theme-border-style) var(--soft-background4);
-            }
+      &:not(:disabled):hover {
+        border: var(--theme-border-style) var(--soft-background4);
+      }
 
-            &:disabled {
-                background-color: var(--hard-y);
-            }
+      &:disabled {
+        background-color: var(--hard-y);
+      }
 
-            &:focus {
-                background: var(--soft-background4);
-            }
-        }
+      &:focus {
+        background: var(--soft-background4);
+      }
     }
+  }
 }
 
 
 .#{bem.$base}.multiple-combobox {
-    >.selected-items {
-        display: flex;
-        gap: $default-gap / 2;
-        flex-wrap: wrap;
-        margin-bottom: $default-margin / 2;
-
-        >.item {
-            background-color: var(--main2);
-            padding: $default-padding / 4;
-
-            .close {
-                font-size: calc(var(--s-3) * 1em);
-            }
-        }
+  >.selected-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: math.div($default-gap, 2);
+    margin-bottom: math.div($default-margin, 2);
+
+    >.item {
+      background-color: var(--main2);
+      padding: math.div($default-padding, 4);
+
+      .close {
+        font-size: calc(var(--s-3) * 1em);
+      }
     }
-}
+  }
+}

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

@@ -12,25 +12,24 @@ import { SelectInput } from "../..";
 /**
  * This is the component description.
  */
-const QuerySelect = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    optional,
-    query,
-    variables,
-    optionsKeyMap,
-    description,
-    disabled,
-    color,
-    loadingOption,
-    defaultOption,
-    validate
-    // ...otherProps
-  } = _ref;
+const QuerySelect = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  optional,
+  query,
+  variables,
+  optionsKeyMap,
+  description,
+  disabled,
+  color,
+  loadingOption,
+  defaultOption,
+  validate
+  // ...otherProps
+}) => {
   const [,, helpers] = useField({
     name,
     validate
@@ -60,15 +59,12 @@ const QuerySelect = _ref => {
         if (setError) setError(fetchError.message);
       },
       next: data => {
-        setOptions([defaultOption, ...data[accessor].edges.map(_ref2 => {
-          let {
-            node
-          } = _ref2;
-          return {
-            value: node[optionsKeyMap.value],
-            label: optionsKeyMap.getLabel(node)
-          };
-        })]);
+        setOptions([defaultOption, ...data[accessor].edges.map(({
+          node
+        }) => ({
+          value: node[optionsKeyMap.value],
+          label: optionsKeyMap.getLabel(node)
+        }))]);
       }
     });
   };

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

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useLayoutEffect, memo } from 'react';
+import { useState, useInsertionEffect, memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -14,24 +14,23 @@ const componentClassName = 'ratings-input';
 /**
  * This is the component description.
  */
-const RatingsInput = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    ratingCount,
-    showRatingValue,
-    oneInputLabel,
-    label,
-    labelColor,
-    labelMax,
-    labelMin,
-    displayRatingsLabel,
-    optional
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const RatingsInput = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  ratingCount,
+  showRatingValue,
+  oneInputLabel,
+  label,
+  labelColor,
+  labelMax,
+  labelMin,
+  displayRatingsLabel,
+  optional
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [hover, setHover] = useState(null);

package/dist/es/f/fields/RatingsInput/common/Rating/Rating.js

@@ -13,22 +13,21 @@ const componentClassName = 'rating';
 /**
  * This is the component description.
  */
-const Rating = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    value,
-    name,
-    ratingId,
-    hover,
-    setHover,
-    validate,
-    activeBackgroundColor,
-    inactiveBackgroundColor,
-    showRatingValue
-    // ...otherProps
-  } = _ref;
+const Rating = ({
+  id,
+  className: userClassName,
+  style,
+  value,
+  name,
+  ratingId,
+  hover,
+  setHover,
+  validate,
+  activeBackgroundColor,
+  inactiveBackgroundColor,
+  showRatingValue
+  // ...otherProps
+}) => {
   const [field] = useField({
     name,
     validate

package/dist/es/f/fields/RatingsInput/styles.scss

@@ -1,4 +1,5 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 
 $default-rating-icon-margin: .5em;
@@ -19,34 +20,32 @@ $default-transition: all .2s;
     >:not(:last-child) {
       margin-right: $default-rating-icon-margin;
     }
-  
+
     .#{bem.$base}.rating {
       display: flex;
-  
+
       input {
         opacity: 0;
         position: absolute;
         visibility: none;
         z-index: -1;
       }
-  
+
       label {
+        align-items: center;
+        cursor: pointer;
         display: flex;
         flex-direction: column;
-        align-items: center;
         padding: $default-padding;
         transition: $default-transition;
-        cursor: pointer;
       }
     }
-  
+
     .label-text {
-      margin-bottom: 0;
       align-self: flex-end;
+      margin-bottom: 0;
     }
   }
 }
 
 
-
-