@uncinc/uncinc-react-kitchen-sink 2.3.0 → 2.3.2

package/dist/components/Form/Select/Input/index.js

@@ -17,7 +17,9 @@ const SelectInput = props => {
     disabled,
     className,
     wrapperClassName,
-    isClearable = true
+    isClearable = true,
+    multiple = false,
+    size
   } = props;
   let {
     selectedOption
@@ -36,10 +38,20 @@ const SelectInput = props => {
   } // If the selected option is not set, find the currently selected option by value.
 
 
-  if (!selectedOption && value) {
-    selectedOption = optionsTransformed.find(option => {
-      return option.value === value;
-    });
+  if (!selectedOption) {
+    if (multiple) {
+      const _value = value !== undefined ? value : defaultValue || [];
+
+      selectedOption = optionsTransformed.filter(option => {
+        return _value.includes(option.value);
+      });
+    } else {
+      const _value = value !== undefined ? value : defaultValue || '';
+
+      selectedOption = optionsTransformed.find(option => {
+        return option.value === _value;
+      });
+    }
   }
 
   return /*#__PURE__*/React.createElement(Field, {
@@ -55,27 +67,44 @@ const SelectInput = props => {
       id: id,
       className: c("Select__select", className),
       classNamePrefix: c("Select__inner", wrapperClassName),
-      value: selectedOption || "",
+      value: selectedOption,
       defaultValue: defaultValue,
       disabled: disabled,
       onChange: e => {
+        let value = '';
+
         if (e) {
-          if (onChange) {
-            onChange(e.value);
+          if (multiple) {
+            value = e.map(item => {
+              return item.value;
+            });
+          } else {
+            value = e.value;
           }
-
-          form.setFieldValue(fieldName, e.value);
         } else {
-          if (onChange) {
-            onChange('');
+          if (multiple) {
+            value = [];
           }
+        }
 
-          form.setFieldValue(fieldName, null);
+        if (onChange) {
+          onChange(value);
         }
+
+        form.setFieldValue(fieldName, value);
       },
       options: optionsTransformed,
+      isMulti: multiple,
       isOptionDisabled: option => {
-        return option.disabled;
+        if (option.disabled) {
+          return true;
+        }
+
+        if (size && selectedOption.length >= size) {
+          return true;
+        }
+
+        return false;
       },
       placeholder: placeholder,
       isClearable: isClearable,

package/dist/components/Form/Select/Input/style.scss

@@ -18,9 +18,6 @@
       }
     }
     &__option {
-      &--is-focused {
-        color: black !important;
-      }
       &--is-selected {
         background-color: transparent !important;
         color: $color--primary !important;

package/dist/components/Form/Select/index.js

@@ -17,7 +17,8 @@ const Select = props => {
     displayRequiredIndicator,
     className,
     wrapperClassName,
-    disabled = false
+    disabled = false,
+    multiple = false
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
     className: c("Select", wrapperClassName),
@@ -32,7 +33,8 @@ const Select = props => {
     className: c(className, {
       'error': error && touched
     }),
-    disabled: disabled
+    disabled: disabled,
+    multiple: multiple
   })));
 };
 

package/dist/components/Form/Select/stories.js

@@ -5,22 +5,49 @@ export default {
   title: 'Molecules/Form'
 };
 export const Select = () => {
-  return /*#__PURE__*/React.createElement(FormikWrapper, {
-    initialValues: {
-      poison: 'beer'
+  return /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(FormikSelect, {
+    title: "Pick your poison",
+    required: true,
+    description: "This is a test input.",
+    placeholder: "Select a value...",
+    fieldName: "poison",
+    options: {
+      beer: 'Beer',
+      wine: 'Wine',
+      rum: 'Rum',
+      whisky: 'Whisk(e)y'
+    },
+    defaultValue: "wine",
+    validation: value => {
+      let error;
+
+      if (!value) {
+        error = 'Dit is een vereist veld.';
+      }
+
+      return error;
+    },
+    onChange: e => {
+      console.log(e);
     }
-  }, /*#__PURE__*/React.createElement(FormikSelect, {
+  }));
+};
+export const SelectMultiple = () => {
+  return /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(FormikSelect, {
     title: "Pick your poison",
     required: true,
     description: "This is a test input.",
     placeholder: "Select a value...",
     fieldName: "poison",
+    multiple: true,
+    size: 2,
     options: {
       beer: 'Beer',
       wine: 'Wine',
       rum: 'Rum',
       whisky: 'Whisk(e)y'
     },
+    defaultValue: ['wine'],
     validation: value => {
       let error;
 

package/dist/components/SearchKit/SearchField/index.js

@@ -11,6 +11,8 @@ const SearchField = ({
   const timeoutRef = useRef();
 
   const onChange = e => {
+    e.persist();
+
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
     }

package/dist/styles/assets/_grid.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import './variables';
 @import '~bootstrap/scss/mixins';
 
@@ -17,8 +18,8 @@
   @each $breakpoint in map-keys($gutters) {
     @include media-breakpoint-up($breakpoint) {
       $gutter: map-get($gutters, $breakpoint);
-      padding-left: div($gutter, 2);
-      padding-right: div($gutter, 2);
+      padding-left: math.div($gutter, 2);
+      padding-right: math.div($gutter, 2);
     }
   }
 }
@@ -27,8 +28,8 @@
   @each $breakpoint in map-keys($gutters) {
     @include media-breakpoint-up($breakpoint) {
       $gutter: map-get($gutters, $breakpoint);
-      padding-left: div($gutter, 2);
-      padding-right: div($gutter, 2);
+      padding-left: math.div($gutter, 2);
+      padding-right: math.div($gutter, 2);
     }
   }
 }
@@ -41,13 +42,13 @@
     @include media-breakpoint-up($breakpoint) {
       $gutter: map-get($gutters, $breakpoint);
       @if $sides == all {
-        margin: div($gutter, -2);
+        margin: math.div($gutter, -2);
       } @else if $sides == left-right {
-        margin-left: div($gutter, -2);
-        margin-right: div($gutter, -2);
+        margin-left: math.div($gutter, -2);
+        margin-right: math.div($gutter, -2);
       } @else if $sides == top-bottom {
-        margin-top: div($gutter, -2);
-        margin-bottom: div($gutter, -2);
+        margin-top: math.div($gutter, -2);
+        margin-bottom: math.div($gutter, -2);
       }
     }
   }
@@ -62,8 +63,8 @@
     @each $breakpoint in map-keys($grid-gutter-widths) {
       @include media-breakpoint-up($breakpoint) {
         $gutter: map-get($grid-gutter-widths, $breakpoint);
-        padding-left: div($gutter, 2);
-        padding-right: div($gutter, 2);
+        padding-left: math.div($gutter, 2);
+        padding-right: math.div($gutter, 2);
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",