@commonsku/styles 1.15.1 → 1.16.0

package/dist/index.es.js

@@ -5,7 +5,6 @@ import { useDropzone } from 'react-dropzone';
 import BaseSelect from 'react-select';
 export { components, createFilter, mergeStyles } from 'react-select';
 import BaseCreatableSelect from 'react-select/creatable';
-export { makeCreatableSelect } from 'react-select/creatable';
 import BaseAsyncSelect from 'react-select/async';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import ReactDOM from 'react-dom';
@@ -2098,27 +2097,26 @@ function RadioIcon(_a) {
 
 function CheckboxIcon(_a) {
     var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.hoverColor, hoverColor = _c === void 0 ? teal.light : _c, _d = _a.disabledColor, disabledColor = _d === void 0 ? neutrals['60'] : _d, _e = _a.size, size = _e === void 0 ? "medium" : _e, _f = _a.hover, hover = _f === void 0 ? false : _f, _g = _a.selected, selected = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.indeterminate, indeterminate = _j === void 0 ? false : _j, _k = _a.altText, altText = _k === void 0 ? "Select" : _k, props = __rest(_a, ["color", "hoverColor", "disabledColor", "size", "hover", "selected", "disabled", "indeterminate", "altText"]);
-    selected ? altText = "Unselect" : altText = "Select";
-    var renderPath = React__default.useMemo(function () {
-        if (indeterminate) {
-            return React__default.createElement("path", { d: "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM16 13H8C7.45 13 7 12.55 7 12C7 11.45 7.45 11 8 11H16C16.55 11 17 11.45 17 12C17 12.55 16.55 13 16 13Z", fill: disabled ? disabledColor : color });
-        }
-        else if (selected) {
-            return React__default.createElement("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm-8.29 13.29a.996.996 0 0 1-1.41 0L5.71 12.7a.996.996 0 1 1 1.41-1.41L10 14.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.58 7.59Z", fill: disabled ? disabledColor : color });
-        }
-        else if (hover === true && !disabled) {
-            return React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("path", { d: "M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1Zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z", fill: color }),
-                React__default.createElement("rect", { x: 6, y: 6, width: 12, height: 12, rx: 1, fill: hoverColor }));
-        }
-        // default to unselected
-        return React__default.createElement("path", { d: "M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1Zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z", fill: disabled ? disabledColor : color });
-    }, [selected, hover, hoverColor, disabled, disabledColor, color]);
     return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "CheckboxIcon" }, props),
-        React__default.createElement("title", { id: "CheckboxIcon" }, altText),
+        React__default.createElement("title", { id: "CheckboxIcon" }, selected && (altText === "Select" || !altText) ? "Unselect" : altText),
         React__default.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
-        renderPath);
-}
+        React__default.createElement(IconPath, { indeterminate: indeterminate, selected: selected, hover: hover, disabled: disabled, color: color, hoverColor: hoverColor, disabledColor: disabledColor }));
+}
+var IconPath = React__default.memo(function (props) {
+    var indeterminate = props.indeterminate, selected = props.selected, hover = props.hover, disabled = props.disabled, color = props.color, hoverColor = props.hoverColor, disabledColor = props.disabledColor;
+    if (indeterminate) {
+        return React__default.createElement("path", { d: "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM16 13H8C7.45 13 7 12.55 7 12C7 11.45 7.45 11 8 11H16C16.55 11 17 11.45 17 12C17 12.55 16.55 13 16 13Z", fill: disabled ? disabledColor : color });
+    }
+    else if (selected) {
+        return React__default.createElement("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm-8.29 13.29a.996.996 0 0 1-1.41 0L5.71 12.7a.996.996 0 1 1 1.41-1.41L10 14.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.58 7.59Z", fill: disabled ? disabledColor : color });
+    }
+    else if (hover === true && !disabled) {
+        return React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("path", { d: "M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1Zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z", fill: color }),
+            React__default.createElement("rect", { x: 6, y: 6, width: 12, height: 12, rx: 1, fill: hoverColor }));
+    }
+    return React__default.createElement("path", { d: "M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1Zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z", fill: disabled ? disabledColor : color });
+});
 
 function EditIcon(_a) {
     var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.filled, filled = _d === void 0 ? false : _d, _e = _a.altText, altText = _e === void 0 ? "Edit" : _e, props = __rest(_a, ["color", "size", "filled", "altText"]);
@@ -3051,8 +3049,8 @@ var LabeledRadioInButtonGroup = function (_a) {
     }));
 };
 var LabeledCheckbox = React__default.forwardRef(function (_a, ref) {
-    var label = _a.label, name = _a.name, checked = _a.checked, disabled = _a.disabled, indeterminate = _a.indeterminate, onChange = _a.onChange, checkboxColor = _a.checkboxColor, checkboxHoverColor = _a.checkboxHoverColor, _b = _a.labelStyle, labelStyle = _b === void 0 ? {} : _b, _c = _a.checkboxStyle, checkboxStyle = _c === void 0 ? {} : _c, _d = _a.hoverByLabel, hoverByLabel = _d === void 0 ? true : _d, _e = _a.stopPropagation, _f = _a.labelProps, labelProps = _f === void 0 ? {} : _f, _g = _a.checkboxIconProps, checkboxIconProps = _g === void 0 ? {} : _g, props = __rest(_a, ["label", "name", "checked", "disabled", "indeterminate", "onChange", "checkboxColor", "checkboxHoverColor", "labelStyle", "checkboxStyle", "hoverByLabel", "stopPropagation", "labelProps", "checkboxIconProps"]);
-    var _h = useState(false), isHovering = _h[0], updateHover = _h[1];
+    var label = _a.label, name = _a.name, checked = _a.checked, disabled = _a.disabled, onChange = _a.onChange, checkboxColor = _a.checkboxColor, checkboxHoverColor = _a.checkboxHoverColor, _b = _a.hoverByLabel, hoverByLabel = _b === void 0 ? true : _b, _c = _a.stopPropagation, _d = _a.indeterminate, indeterminate = _d === void 0 ? false : _d, _e = _a.labelStyle, labelStyle = _e === void 0 ? {} : _e, _f = _a.checkboxStyle, checkboxStyle = _f === void 0 ? {} : _f, _g = _a.labelProps, labelProps = _g === void 0 ? {} : _g, _h = _a.checkboxIconProps, checkboxIconProps = _h === void 0 ? {} : _h, props = __rest(_a, ["label", "name", "checked", "disabled", "onChange", "checkboxColor", "checkboxHoverColor", "hoverByLabel", "stopPropagation", "indeterminate", "labelStyle", "checkboxStyle", "labelProps", "checkboxIconProps"]);
+    var _j = useState(false), isHovering = _j[0], updateHover = _j[1];
     var onMouseOver = function (e) { return updateHover(true); };
     var onMouseLeave = function (e) { return updateHover(false); };
     return (React__default.createElement(CheckboxLabel, __assign({ htmlFor: name, onMouseOver: hoverByLabel ? onMouseOver : undefined, onMouseLeave: hoverByLabel ? onMouseLeave : undefined, disabled: disabled }, labelProps, { style: labelStyle }),
@@ -3148,11 +3146,7 @@ function skuSelectStyles(props) {
         },
         indicatorSeparator: function (provided, state) { return (__assign(__assign({}, provided), { display: 'none' })); },
         option: function (provided, state) {
-            var optionStyle = {};
-            if (state.data && state.data.styles) {
-                optionStyle = state.data.styles;
-            }
-            return (__assign(__assign(__assign({}, provided), optionStyle), { borderBottom: 'none', padding: 10 }));
+            return (__assign(__assign(__assign({}, provided), (get(state.data, 'styles') || {})), { borderBottom: 'none', padding: 10 }));
         },
         input: function (provided, state) {
             return __assign(__assign({}, provided), { height: 'auto', borderColor: props.error
@@ -3250,11 +3244,13 @@ function skuSelectStyles(props) {
 }
 var skuSelectTheme = function (theme) { return (__assign(__assign({}, theme), { borderRadius: 5, colors: __assign(__assign({}, theme.colors), { primary25: colors.primary0, primary75: colors.primary0, primary50: colors.primary10, primary: colors.primary, neutral20: colors.select.border, neutral30: colors.select.border, neutral80: colors.textbody, neutral90: colors.textbody }) })); };
 // duplicate styles to overide .resku global styles
+// : React.ForwardRefExoticComponent<SKUSelectProps & React.RefAttributes<BaseSelect>>
+//   React.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | ... 27 more ... | "form"> & InexactPartial<...> & InexactPartial<...>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & React.RefAttributes<...>>
 var SKUSelect = React__default.forwardRef(function (_a, ref) {
     var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error"]);
     var classNamePrefix = "".concat(error ? 'select-error' : '', " commonsku-styles-select");
     var selectStyleProps = __assign(__assign({}, props), { noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
-    return React__default.createElement(BaseSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix }, (inPopup ? popupStyles : {}), { noMargin: noMargin, menuRelative: menuRelative, error: error, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props));
+    return React__default.createElement(BaseSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix }, (inPopup ? popupStyles : {}), { styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props));
 });
 var LabeledSelect = React__default.forwardRef(function (_a, ref) {
     var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
@@ -3269,7 +3265,7 @@ var SKUCreatableSelect = React__default.forwardRef(function (_a, ref) {
     var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error"]);
     var classNamePrefix = "".concat(error ? 'select-error' : '', " commonsku-styles-select");
     var selectStyleProps = __assign(__assign({}, props), { noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
-    return (React__default.createElement(BaseCreatableSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, noMargin: noMargin, menuRelative: menuRelative, error: error, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
+    return (React__default.createElement(BaseCreatableSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
 });
 var LabeledCreatableSelect = React__default.forwardRef(function (_a, ref) {
     var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
@@ -3284,7 +3280,7 @@ var SKUAsyncSelect = React__default.forwardRef(function (_a, ref) {
     var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error"]);
     var classNamePrefix = "".concat(error ? 'select-error' : '', " commonsku-styles-select");
     var selectStyleProps = __assign(__assign({}, props), { noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
-    return (React__default.createElement(BaseAsyncSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, noMargin: noMargin, menuRelative: menuRelative, error: error, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
+    return (React__default.createElement(BaseAsyncSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
 });
 var LabeledAsyncSelect = React__default.forwardRef(function (_a, ref) {
     var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
@@ -3924,23 +3920,19 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
-
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
     enumerableOnly && (symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
     })), keys.push.apply(keys, symbols);
   }
-
   return keys;
 }
-
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
@@ -3950,7 +3942,6 @@ function _objectSpread2(target) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
-
   return target;
 }
 
@@ -3969,7 +3960,6 @@ function _defineProperties(target, props) {
     Object.defineProperty(target, descriptor.key, descriptor);
   }
 }
-
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
@@ -3983,7 +3973,6 @@ function _assertThisInitialized(self) {
   if (self === void 0) {
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   }
-
   return self;
 }
 
@@ -3999,7 +3988,6 @@ function _inherits(subClass, superClass) {
   if (typeof superClass !== "function" && superClass !== null) {
     throw new TypeError("Super expression must either be null or a function");
   }
-
   subClass.prototype = Object.create(superClass && superClass.prototype, {
     constructor: {
       value: subClass,
@@ -4024,7 +4012,6 @@ function _isNativeReflectConstruct() {
   if (typeof Reflect === "undefined" || !Reflect.construct) return false;
   if (Reflect.construct.sham) return false;
   if (typeof Proxy === "function") return true;
-
   try {
     Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
     return true;
@@ -4049,7 +4036,6 @@ function _possibleConstructorReturn(self, call) {
   } else if (call !== void 0) {
     throw new TypeError("Derived constructors may only return object or undefined");
   }
-
   return _assertThisInitialized(self);
 }
 
@@ -4057,15 +4043,13 @@ function _createSuper(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct();
   return function _createSuperInternal() {
     var Super = _getPrototypeOf(Derived),
-        result;
-
+      result;
     if (hasNativeReflectConstruct) {
       var NewTarget = _getPrototypeOf(this).constructor;
       result = Reflect.construct(Super, arguments, NewTarget);
     } else {
       result = Super.apply(this, arguments);
     }
-
     return _possibleConstructorReturn(this, result);
   };
 }
@@ -4074,17 +4058,12 @@ var LOADING_IMG_SRC = '/images/gears.gif';
 var NOT_FOUND_IMG_SRC = '/images/404.png';
 var DEFAULT_MAX_ATTEMPTS = 3;
 var DEFAULT_ATTEMPT_INTERVAL = 10000;
-
 var Img = /*#__PURE__*/function (_Component) {
   _inherits(Img, _Component);
-
   var _super = _createSuper(Img);
-
   function Img(props) {
     var _this;
-
     _classCallCheck(this, Img);
-
     _this = _super.call(this, props);
     _this.state = {
       src: _this.props.src,
@@ -4093,7 +4072,6 @@ var Img = /*#__PURE__*/function (_Component) {
     _this.onError = _this.onError.bind(_assertThisInitialized(_this));
     return _this;
   }
-
   _createClass(Img, [{
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
@@ -4115,21 +4093,17 @@ var Img = /*#__PURE__*/function (_Component) {
     key: "onError",
     value: function onError() {
       var _this2 = this;
-
       if (NOT_FOUND_IMG_SRC === this.state.src) {
         return;
       }
-
       var max_attempts = this.props.max_attempts || DEFAULT_MAX_ATTEMPTS;
       var attempt_interval = this.props.attempt_interval || DEFAULT_ATTEMPT_INTERVAL;
-
       if (this.state.attempts >= max_attempts) {
         this.setState({
           src: NOT_FOUND_IMG_SRC
         });
         return;
       }
-
       this.setState({
         src: LOADING_IMG_SRC,
         attempts: this.state.attempts + 1
@@ -4143,17 +4117,16 @@ var Img = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var props = _objectSpread2(_objectSpread2({}, this.props), {}, {
-        src: this.state.src,
+      var props = _objectSpread2(_objectSpread2({
         onError: this.onError
+      }, this.props), {}, {
+        src: this.state.src
       });
-
       return /*#__PURE__*/React__default.createElement("img", Object.assign({
         alt: ""
       }, props));
     }
   }]);
-
   return Img;
 }(Component);
 
@@ -4177,7 +4150,7 @@ var Artwork = function (_a) {
     return React__default.createElement(ArtworkWrapper, { cssHeight: props.cssHeight ? props.cssHeight : props.picture ? 17 : 0, onClick: !props.picture && props.onClick ? props.onClick : undefined },
         props.picture ?
             React__default.createElement(ArtworkPicture, { onClick: function (e) { return props.onClick ? props.onClick(e) : null; }, cssHeight: props.cssHeight ? props.cssHeight : 17 },
-                React__default.createElement(Img, { src: props.picture, style: { objectFit: "contain", width: "100%", height: "100%" } }))
+                React__default.createElement(Img, { src: props.picture, style: { objectFit: "contain", width: "100%", height: "100%" }, onError: props.onError }))
             :
                 React__default.createElement(IconDoc, { ext: extension(props.name), style: { width: "3vw" } }),
         !props.edit ?
@@ -5182,13 +5155,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   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;
 }