@pareto-engineering/design-system 3.0.0-alpha.28 → 4.0.0-alpha.3

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

@@ -15,24 +15,23 @@ const componentClassName = 'choices-input';
 /**
  * This is the component description.
  */
-const ChoicesInput = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    validate,
-    options,
-    multiple,
-    gridColumnsMobile,
-    gridColumnsDesktop,
-    color,
-    colorChecked,
-    label,
-    optional,
-    disabled
-    // ...otherProps
-  } = _ref;
+const ChoicesInput = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  validate,
+  options,
+  multiple,
+  gridColumnsMobile,
+  gridColumnsDesktop,
+  color,
+  colorChecked,
+  label,
+  optional,
+  disabled
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

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

@@ -12,20 +12,19 @@ const componentClassName = 'choice';
 /**
  * This is the component description.
  */
-const Choice = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    labelClassName,
-    labelStyle,
-    value,
-    multiple,
-    validate,
-    disabled
-  } = _ref;
+const Choice = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  labelClassName,
+  labelStyle,
+  value,
+  multiple,
+  validate,
+  disabled
+}) => {
   const type = multiple ? 'checkbox' : 'radio';
   const [field] = useField({
     name,

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

@@ -1,4 +1,5 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-compound-selectors -- exception */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
@@ -9,7 +10,6 @@ $default-padding:var(--u, 1em);
 $default-transition:all .3s;
 
 .#{bem.$base}.choices-input {
-
   .choices {
     display: grid;
     gap: $default-grid-gap;
@@ -40,16 +40,16 @@ $default-transition:all .3s;
       }
 
       label {
-        border: var(--theme-border-style) var(--hard-x);
         background: var(--soft-x);
-        color: var(--on-x);
+        border: var(--theme-border-style) var(--hard-x);
         border-radius: var(--theme-border-radius);
+        color: var(--on-x);
+        cursor: pointer;
         display: block;
         height: 100%;
         padding: $default-padding;
         transition: $default-transition;
         width: 100%;
-        cursor: pointer;
       }
 
       input:checked + label {

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

@@ -12,28 +12,27 @@ 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;
+const QueryCombobox = ({
+  id,
+  style,
+  className,
+  query,
+  multiple,
+  name,
+  label,
+  color,
+  optional,
+  description,
+  disabled,
+  debounceMs,
+  searchVariable,
+  extraVariables,
+  optionsKeyMap,
+  minLength,
+  transformSearch,
+  validate
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
@@ -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

@@ -10,82 +10,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: $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: $default-gap / 2;
+    margin-bottom: $default-margin / 2;
+
+    >.item {
+      background-color: var(--main2);
+      padding: $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

@@ -14,23 +14,22 @@ 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;
+const RatingsInput = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  ratingCount,
+  showRatingValue,
+  oneInputLabel,
+  label,
+  labelColor,
+  labelMax,
+  labelMin,
+  displayRatingsLabel,
+  optional
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);