@uncinc/uncinc-react-kitchen-sink 2.10.0 → 2.10.2

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/Form/DatePickerRange/index.js

@@ -92,6 +92,8 @@ var DatePickerRange = function DatePickerRange(props) {
     touched: isTouched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator,
+    errorId: errorId,
+    descriptionId: descriptionId,
     includeFieldSet: includeFieldSet
   }, /*#__PURE__*/React.createElement(Field, {
     name: fieldName,

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

@@ -106,7 +106,7 @@ var RadioButtons = function RadioButtons(props) {
     displayRequiredIndicator = _useExtendedFormikCon.displayRequiredIndicator;
   var isTouched = touched[fieldName];
   var error = errors[fieldName];
-  var errorId = "".concat(props.fieldName, "--").concat(props.value, "-error");
+  var errorId = "".concat(props.fieldName, "--error");
   var descriptionId = "".concat(props.fieldName, "--description");
   var handleValidation = function handleValidation(value) {
     if (validation) {

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/components/WysiwygField/index.d.ts

@@ -1,8 +1,7 @@
 export default WysiwygField;
-declare function WysiwygField({ html, id, customElementHandler, className, ...props }: {
+declare function WysiwygField({ html, customElementHandler, className, ...props }: {
     [x: string]: any;
     html: any;
-    id?: string | undefined;
     customElementHandler?: (() => void) | undefined;
     className?: string | undefined;
 }): React.JSX.Element;
@@ -18,7 +17,7 @@ declare namespace WysiwygField {
         export { customElementHandler_1 as customElementHandler };
         let className_1: string;
         export { className_1 as className };
-        let id_1: string;
+        let id_1: null;
         export { id_1 as id };
     }
 }

package/dist/components/WysiwygField/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["html", "id", "customElementHandler", "className"];
+var _excluded = ["html", "customElementHandler", "className"];
 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -9,8 +9,6 @@ import c from 'classnames';
 import Button from '../Button';
 var WysiwygField = function WysiwygField(_ref) {
   var html = _ref.html,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? '' : _ref$id,
     _ref$customElementHan = _ref.customElementHandler,
     customElementHandler = _ref$customElementHan === void 0 ? function () {} : _ref$customElementHan,
     _ref$className = _ref.className,
@@ -48,7 +46,6 @@ var WysiwygField = function WysiwygField(_ref) {
     }
   });
   return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
     className: classes
   }, props), parsedHtml);
 };
@@ -61,6 +58,6 @@ WysiwygField.propTypes = {
 WysiwygField.defaultProps = {
   customElementHandler: function customElementHandler() {},
   className: '',
-  id: ''
+  id: null
 };
 export default WysiwygField;

package/package.json

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