@uncinc/uncinc-react-kitchen-sink 2.10.1 → 2.10.3

package/dist/components/Form/Checkbox/index.d.ts

@@ -1,9 +1,34 @@
 export function Checkbox(props: any): React.JSX.Element;
 export namespace Checkbox {
     namespace defaultProps {
+        let required: boolean;
+        let description: undefined;
+        let validation: undefined;
         function onChange(): void;
+        let className: undefined;
+        let wrapperClassName: undefined;
+        let disabled: boolean;
+    }
+    namespace propTypes {
+        export let title: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let required_1: PropTypes.Requireable<boolean>;
+        export { required_1 as required };
+        let description_1: PropTypes.Requireable<string>;
+        export { description_1 as description };
+        export let fieldName: PropTypes.Validator<string>;
+        let validation_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { validation_1 as validation };
+        let onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onChange_1 as onChange };
+        let className_1: PropTypes.Requireable<string>;
+        export { className_1 as className };
+        let wrapperClassName_1: PropTypes.Requireable<string>;
+        export { wrapperClassName_1 as wrapperClassName };
+        let disabled_1: PropTypes.Requireable<boolean>;
+        export { disabled_1 as disabled };
     }
 }
 declare const _default: (props: any) => React.JSX.Element;
 export default _default;
 import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { Field } from 'formik';
 import c from 'classnames';
+import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import ReactHtmlParser from 'react-html-parser';
 import GenericFormElement from '../GenericFormElement';
@@ -17,8 +18,7 @@ export var Checkbox = function Checkbox(props) {
     _onChange = props.onChange,
     className = props.className,
     wrapperClassName = props.wrapperClassName,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled;
+    disabled = props.disabled;
   var _useExtendedFormikCon = useExtendedFormikContext(),
     values = _useExtendedFormikCon.values,
     errors = _useExtendedFormikCon.errors,
@@ -81,10 +81,27 @@ export var Checkbox = function Checkbox(props) {
       required: required,
       "aria-describedby": "".concat(errorId, " ").concat(descriptionId),
       "aria-invalid": Boolean(error)
-    })), ReactHtmlParser(title));
+    })), typeof title === 'string' ? ReactHtmlParser(title) : title);
   }));
 };
 Checkbox.defaultProps = {
-  onChange: function onChange() {}
+  required: false,
+  description: undefined,
+  validation: undefined,
+  onChange: function onChange() {},
+  className: undefined,
+  wrapperClassName: undefined,
+  disabled: false
+};
+Checkbox.propTypes = {
+  title: PropTypes.node.isRequired,
+  required: PropTypes.bool,
+  description: PropTypes.string,
+  fieldName: PropTypes.string.isRequired,
+  validation: PropTypes.func,
+  onChange: PropTypes.func,
+  className: PropTypes.string,
+  wrapperClassName: PropTypes.string,
+  disabled: PropTypes.bool
 };
 export default withMapping(Checkbox);

package/dist/components/Icon/style.scss

@@ -24,34 +24,12 @@ $material-icon-styles: (
   two-tone
 );
 
-@mixin icon-color($color: #000000, $opacity: 1) {
-  $r: calc(color.red($color) / 255);
-  $g: calc(color.green($color) / 255);
-  $b: calc(color.blue($color) / 255);
-  $a: $opacity;
-
-  // grayscale fallback if SVG from data url is not supported
-  $lightness: color.lightness($color);
-  filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);
-
-  // color filter
-  $svg-filter-id: "recolor";
-  filter: url('data:image/svg+xml;utf8,\
-    <svg xmlns="http://www.w3.org/2000/svg">\
-      <filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\
-        <feColorMatrix type="matrix" values="\
-          0 0 0 0 #{$r}\
-          0 0 0 0 #{$g}\
-          0 0 0 0 #{$b}\
-          0 0 0 #{$a} 0\
-        "/>\
-      </filter>\
-    </svg>\
-    ##{$svg-filter-id}');
+@mixin icon-color($color: #000000) {
+  background-color: $color;
 }
 
 @mixin unset-icon-color() {
-  filter: none;
+  background-color: none;
 }
 
 @mixin generateMaterialIconClasses() {
@@ -62,7 +40,9 @@ $material-icon-styles: (
       $name: list.nth($material-icon-names, $nameIndex);
 
       .Icon-#{$style}-#{$name} {
-        background: url('~@material-design-icons/svg/#{$style}/#{$name}.svg');
+        mask-image: url('~@material-design-icons/svg/#{$style}/#{$name}.svg');
+        mask-repeat: no-repeat;
+        mask-size: contain;
         font-size: 100%;
         vertical-align: middle;
         text-indent: -9999px;
@@ -80,7 +60,9 @@ $material-icon-styles: (
     $name: list.nth($custom-icon-names, $nameIndex);
 
     .Icon-#{$name} {
-      background: url('#{$custom-icon-path}/#{$name}.svg');
+      mask-image: url('#{$custom-icon-path}/#{$name}.svg');
+      mask-repeat: no-repeat;
+      mask-size: contain;
       font-size: 100%;
       vertical-align: middle;
       text-indent: -9999px;
@@ -132,9 +114,9 @@ $material-icon-styles: (
   }
 
   @if not $custom {
-    background: url('~@material-design-icons/svg/#{$style}/#{$icon-name}.svg');
+    mask-image: url('~@material-design-icons/svg/#{$style}/#{$icon-name}.svg');
   } @else {
-    background: url('#{$custom-icon-path}/#{$icon-name}.svg');
+    mask-image: url('#{$custom-icon-path}/#{$icon-name}.svg');
   }
 
   display: block;

package/dist/hooks/useOnScreen.d.ts

@@ -1,2 +1,2 @@
 import { MutableRefObject } from 'react';
-export default function useOnScreen(ref: MutableRefObject<HTMLElement>): boolean;
+export default function useOnScreen(ref: MutableRefObject<HTMLElement>, options?: IntersectionObserverInit): boolean;

package/dist/hooks/useOnScreen.js

@@ -5,7 +5,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useEffect, useState } from 'react';
-export default function useOnScreen(ref) {
+export default function useOnScreen(ref, options) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isIntersecting = _useState2[0],
@@ -15,12 +15,18 @@ export default function useOnScreen(ref) {
       var _ref2 = _slicedToArray(_ref, 1),
         entry = _ref2[0];
       return setIntersecting(entry.isIntersecting);
-    });
-    observer.observe(ref.current);
+    }, options);
+    var currentRef = ref.current;
+    if (currentRef) {
+      observer.observe(currentRef);
+    }
+
     // Remove the observer as soon as the component is unmounted
     return function () {
-      return observer.disconnect();
+      if (currentRef) {
+        observer.disconnect();
+      }
     };
-  }, [ref]);
+  }, [options, ref]);
   return isIntersecting;
 }

package/package.json

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