@commonsku/styles 1.17.23 → 1.17.25

package/dist/index.cjs

@@ -5,8 +5,8 @@ var styled = require('styled-components');
 var React = require('react');
 var reactDropzone = require('react-dropzone');
 var BaseSelect = require('react-select');
-var BaseCreatableSelect = require('react-select/creatable');
 var BaseAsyncSelect = require('react-select/async');
+var BaseCreatableSelect = require('react-select/creatable');
 var reactBeautifulDnd = require('react-beautiful-dnd');
 var ReactDOM = require('react-dom');
 var dateFns = require('date-fns');
@@ -41,8 +41,8 @@ var ___default = /*#__PURE__*/_interopDefaultCompat(_);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var BaseSelect__default = /*#__PURE__*/_interopDefaultCompat(BaseSelect);
-var BaseCreatableSelect__default = /*#__PURE__*/_interopDefaultCompat(BaseCreatableSelect);
 var BaseAsyncSelect__default = /*#__PURE__*/_interopDefaultCompat(BaseAsyncSelect);
+var BaseCreatableSelect__default = /*#__PURE__*/_interopDefaultCompat(BaseCreatableSelect);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);
 var ReactDatePicker__default = /*#__PURE__*/_interopDefaultCompat(ReactDatePicker);
 var require$$0__namespace = /*#__PURE__*/_interopNamespaceCompat(require$$0);
@@ -1452,58 +1452,86 @@ var Theme = function (_a) {
         children));
 };
 
+var iconSizes$9 = {
+    tiny: {
+        width: 32,
+        height: 32,
+        viewBox: "0 0 32 32",
+        fontSize: ".6em",
+        defaultStrokeWidth: 3,
+    },
+    small: {
+        width: 40,
+        height: 40,
+        viewBox: "0 0 40 40",
+        fontSize: ".6em",
+        defaultStrokeWidth: 3,
+    },
+    medium: {
+        width: 48,
+        height: 48,
+        viewBox: "0 0 48 48",
+        fontSize: ".8em",
+        defaultStrokeWidth: 5,
+    },
+    large: {
+        width: 72,
+        height: 72,
+        viewBox: "0 0 72 72",
+        fontSize: "1em",
+        defaultStrokeWidth: 5,
+    },
+    huge: {
+        width: 96,
+        height: 96,
+        viewBox: "0 0 96 96",
+        fontSize: "1em",
+        defaultStrokeWidth: 5,
+    },
+    default: {
+        height: 48,
+        width: 48,
+        viewBox: "0 0 48 48",
+        fontSize: ".8em",
+        defaultStrokeWidth: 5,
+    },
+};
 function CircleProgressIcon(_a) {
-    var sqSize = _a.sqSize, strokeWidth = _a.strokeWidth, _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, _c = _a.strokeColor, strokeColor = _c === void 0 ? teal.main : _c, _d = _a.textColor, textColor = _d === void 0 ? teal.main : _d, _e = _a.text, text = _e === void 0 ? '' : _e, _f = _a.textStyle, textStyle = _f === void 0 ? {} : _f, _g = _a.color; _g === void 0 ? teal.main : _g; var _h = _a.size, size = _h === void 0 ? "medium" : _h, _j = _a.altText, altText = _j === void 0 ? "Progress level" : _j, props = __rest(_a, ["sqSize", "strokeWidth", "percentage", "strokeColor", "textColor", "text", "textStyle", "color", "size", "altText"]);
-    var iconSizes = {
-        tiny: {
-            width: 32,
-            height: 32,
-            viewBox: "0 0 32 32",
-        },
-        small: {
-            width: 40,
-            height: 40,
-            viewBox: "0 0 40 40",
-        },
-        medium: {
-            width: 48,
-            height: 48,
-            viewBox: "0 0 48 48",
-        },
-        large: {
-            width: 72,
-            height: 72,
-            viewBox: "0 0 72 72",
-        },
-        huge: {
-            width: 96,
-            height: 96,
-            viewBox: "0 0 96 96",
-        },
-        default: {
-            height: 48,
-            width: 48,
-            viewBox: "0 0 48 48",
-        },
-    };
-    sqSize = iconSizes[size]["width"];
-    strokeWidth = size === "tiny" || size === "small" ? 3 : 5;
-    var radius = (sqSize - strokeWidth) / 2;
-    // const viewBox = `0 0 ${sqSize} ${sqSize}`;
+    var strokeWidth = _a.strokeWidth, _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, _c = _a.strokeColor, strokeColor = _c === void 0 ? teal.main : _c, _d = _a.textColor, textColor = _d === void 0 ? teal.main : _d, _e = _a.text, text = _e === void 0 ? "" : _e, _f = _a.textStyle, textStyle = _f === void 0 ? {} : _f, _g = _a.showCheckMarkOnComplete, showCheckMarkOnComplete = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? "medium" : _h, _j = _a.altText, altText = _j === void 0 ? "Progress level" : _j, props = __rest(_a, ["strokeWidth", "percentage", "strokeColor", "textColor", "text", "textStyle", "showCheckMarkOnComplete", "size", "altText"]);
+    var _k = iconSizes$9[size], width = _k.width, defaultStrokeWidth = _k.defaultStrokeWidth, fontSize = _k.fontSize; _k.viewBox;
+    strokeWidth = strokeWidth || defaultStrokeWidth;
+    var squareSize = width;
+    var radius = (squareSize - strokeWidth) / 2;
     var dashArray = radius * Math.PI * 2;
-    var dashOffset = dashArray - dashArray * percentage / 100;
-    return React__default.default.createElement(SVG$1, __assign({ size: size, iconSizes: iconSizes, "aria-labelledby": "CircleProgressIcon" }, props),
-        React__default.default.createElement("title", { id: "CircleProgressIcon" }, text !== '' ? "".concat(text, " stage") : percentage ? "".concat(percentage, "% completed") : altText),
-        React__default.default.createElement("circle", { className: "circle-background", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), style: { fill: 'none', stroke: colors$1.disabledButtonBorder, } }),
-        React__default.default.createElement("circle", { className: "circle-progress", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), transform: "rotate(-90 ".concat(sqSize / 2, " ").concat(sqSize / 2, ")"), style: {
+    var dashOffset = dashArray - (dashArray * percentage) / 100;
+    var isComplete = percentage === 100;
+    var renderInnerText = React.useCallback(function () { return (React__default.default.createElement("text", { className: "circle-text", x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", style: __assign({ fontSize: fontSize, fontWeight: "bold", fill: textColor }, textStyle) }, text || "".concat(percentage, "%"))); }, [fontSize, textColor, textStyle, text, percentage]);
+    var renderCheckMark = React.useCallback(function () {
+        var preferredViewBox = 40;
+        var scale = squareSize / preferredViewBox;
+        var scaledPath = [
+            { x: 12.0006 * scale, y: 21.599 * scale },
+            { x: 17.5629 * scale, y: 27.1617 * scale },
+            { x: 29.1621 * scale, y: 15.5625 * scale },
+        ]
+            .map(function (p) { return "".concat(p.x, ",").concat(p.y); })
+            .join(" L");
+        return (React__default.default.createElement("path", { d: "M".concat(scaledPath), stroke: strokeColor, strokeWidth: "".concat(strokeWidth, "px"), fill: "none" }));
+    }, [squareSize, strokeColor, strokeWidth]);
+    return (React__default.default.createElement(SVG$1, __assign({ size: size, iconSizes: iconSizes$9, "aria-labelledby": "CircleProgressIcon" }, props),
+        React__default.default.createElement("title", { id: "CircleProgressIcon" }, altText || (text ? "".concat(text, " stage") : "".concat(percentage, "% completed"))),
+        React__default.default.createElement("circle", { className: "circle-background", cx: squareSize / 2, cy: squareSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), style: { fill: "none", stroke: colors$1.disabledButtonBorder } }),
+        React__default.default.createElement("circle", { className: "circle-progress", cx: squareSize / 2, cy: squareSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), transform: "rotate(-90 ".concat(squareSize / 2, " ").concat(squareSize / 2, ")"), style: {
                 strokeDasharray: dashArray,
                 strokeDashoffset: dashOffset,
-                fill: 'none',
+                fill: "none",
                 stroke: strokeColor,
-                strokeLinecap: 'round',
-                strokeLinejoin: 'round',
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
             } }),
-        React__default.default.createElement("text", { className: "circle-text", x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", style: __assign({ fontSize: size === "small" || size === "tiny" ? ".6em" : size === "medium" ? ".8em" : "1em", fontWeight: 'bold', fill: textColor }, textStyle) }, text || "".concat(percentage, "%")));
+        showCheckMarkOnComplete && isComplete
+            ? renderCheckMark()
+            : renderInnerText()));
 }
 
 var SVG = styled__default.default.svg(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), SharedStyles);
@@ -4095,20 +4123,24 @@ function skuSelectStyles(props) {
         valueContainer: function (provided, state) {
             return __assign(__assign(__assign({}, provided), { padding: '2px 8px' }), props.valueContainerStyles);
         },
+        multiValue: function (provided, state) {
+            return __assign(__assign(__assign({}, provided), { backgroundColor: getThemeColor(props, 'primary10', colors$1.primary10), color: getThemeColor(props, 'textbody', colors$1.textbody), borderRadius: 20, padding: '0.25rem' }), props.multiValueStyles);
+        },
     };
 }
-var skuSelectThemeByProps = function (props) { return function (theme) { return (__assign(__assign({}, theme), { borderRadius: 5, colors: __assign(__assign({}, theme.colors), { primary25: getThemeColor(props, 'primary0', colors$1.primary0), primary75: getThemeColor(props, 'primary0', colors$1.primary0), primary50: getThemeColor(props, 'primary10', colors$1.primary10), primary: getThemeColor(props, 'primary', colors$1.primary), neutral20: getThemeColor(props, 'select.border', colors$1.select.border), neutral30: getThemeColor(props, 'select.border', colors$1.select.border), neutral80: getThemeColor(props, 'textbody', colors$1.textbody), neutral90: getThemeColor(props, 'textbody', colors$1.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.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 skuSelectTheme = skuSelectThemeByProps(props);
+function skuSelectThemeByProps(props) {
+    return function (theme) { return (__assign(__assign({}, theme), { borderRadius: 5, colors: __assign(__assign({}, theme.colors), { primary25: getThemeColor(props, 'primary0', colors$1.primary0), primary75: getThemeColor(props, 'primary0', colors$1.primary0), primary50: getThemeColor(props, 'primary10', colors$1.primary10), primary: getThemeColor(props, 'primary', colors$1.primary), neutral20: getThemeColor(props, 'select.border', colors$1.select.border), neutral30: getThemeColor(props, 'select.border', colors$1.select.border), neutral80: getThemeColor(props, 'textbody', colors$1.textbody), neutral90: getThemeColor(props, 'textbody', colors$1.textbody) }) })); };
+}
+
+function ForwardedSKUSelect(_a, ref) {
+    var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, value = _a.value, isMulti = _a.isMulti, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error", "value", "isMulti"]);
+    var skuSelectTheme = skuSelectThemeByProps(__assign({ value: value, isMulti: isMulti }, props));
     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.default.createElement(BaseSelect__default.default, __assign({ ref: ref, classNamePrefix: classNamePrefix }, (inPopup ? popupStyles : {}), { styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props));
-});
-var LabeledSelect = React__default.default.forwardRef(function (_a, ref) {
+    var selectStyleProps = __assign(__assign({}, props), { value: value, isMulti: isMulti, noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
+    return (React__default.default.createElement(BaseSelect__default.default, __assign({ value: value, isMulti: isMulti, ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
+}
+var SKUSelect = React__default.default.forwardRef(ForwardedSKUSelect);
+function ForwardedLabeledSelect(_a, ref) {
     var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React__default.default.createElement("div", { style: parentStyle },
         React__default.default.createElement(Label, { htmlFor: props.name, style: labelStyle },
@@ -4116,39 +4148,46 @@ var LabeledSelect = React__default.default.forwardRef(function (_a, ref) {
             " ",
             props.required && '*'),
         React__default.default.createElement(SKUSelect, __assign({}, props, { ref: ref }))));
-});
-var SKUCreatableSelect = React__default.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 skuSelectTheme = skuSelectThemeByProps(props);
+}
+var LabeledSelect = React__default.default.forwardRef(ForwardedLabeledSelect);
+
+function ForwardedSKUAsyncSelect(_a, ref) {
+    var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, value = _a.value, isMulti = _a.isMulti, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error", "value", "isMulti"]);
+    var skuSelectTheme = skuSelectThemeByProps(__assign({ value: value, isMulti: isMulti }, props));
     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.default.createElement(BaseCreatableSelect__default.default, __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
-});
-var LabeledCreatableSelect = React__default.default.forwardRef(function (_a, ref) {
+    var selectStyleProps = __assign(__assign({}, props), { value: value, isMulti: isMulti, noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
+    return (React__default.default.createElement(BaseAsyncSelect__default.default, __assign({ value: value, isMulti: isMulti, ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
+}
+var SKUAsyncSelect = React__default.default.forwardRef(ForwardedSKUAsyncSelect);
+function ForwardedLabeledAsyncSelect(_a, ref) {
     var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React__default.default.createElement("div", { style: parentStyle },
         React__default.default.createElement(Label, { htmlFor: props.name, style: labelStyle },
             props.label,
             " ",
             props.required && '*'),
-        React__default.default.createElement(SKUCreatableSelect, __assign({}, props, { ref: ref }))));
-});
-var SKUAsyncSelect = React__default.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 skuSelectTheme = skuSelectThemeByProps(props);
+        React__default.default.createElement(SKUAsyncSelect, __assign({}, props, { ref: ref }))));
+}
+var LabeledAsyncSelect = React__default.default.forwardRef(ForwardedLabeledAsyncSelect);
+
+function ForwardedSKUCreatableSelect(_a, ref) {
+    var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, value = _a.value, isMulti = _a.isMulti, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error", "value", "isMulti"]);
+    var skuSelectTheme = skuSelectThemeByProps(__assign({ value: value, isMulti: isMulti }, props));
     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.default.createElement(BaseAsyncSelect__default.default, __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
-});
-var LabeledAsyncSelect = React__default.default.forwardRef(function (_a, ref) {
+    var selectStyleProps = __assign(__assign({}, props), { value: value, isMulti: isMulti, noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
+    return (React__default.default.createElement(BaseCreatableSelect__default.default, __assign({ value: value, isMulti: isMulti, ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
+}
+var SKUCreatableSelect = React__default.default.forwardRef(ForwardedSKUCreatableSelect);
+function ForwardedLabeledCreatableSelect(_a, ref) {
     var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React__default.default.createElement("div", { style: parentStyle },
         React__default.default.createElement(Label, { htmlFor: props.name, style: labelStyle },
             props.label,
             " ",
             props.required && '*'),
-        React__default.default.createElement(SKUAsyncSelect, __assign({}, props, { ref: ref }))));
-});
+        React__default.default.createElement(SKUCreatableSelect, __assign({}, props, { ref: ref }))));
+}
+var LabeledCreatableSelect = React__default.default.forwardRef(ForwardedLabeledCreatableSelect);
 
 var Backdrop = styled__default.default.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(67, 83, 91, .3);\n    z-index: 100;\n    transition: all ", "s ease-in-out;\n    -moz-transition: all ", "s ease-in-out;\n    -webkit-transition: all ", "s ease-in-out;\n    opacity: 0.8;\n"], ["\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(67, 83, 91, .3);\n    z-index: 100;\n    transition: all ", "s ease-in-out;\n    -moz-transition: all ", "s ease-in-out;\n    -webkit-transition: all ", "s ease-in-out;\n    opacity: 0.8;\n"])), function (p) { return ((p.animationDuration || 300) / 1000); }, function (p) { return ((p.animationDuration || 300) / 1000); }, function (p) { return ((p.animationDuration || 300) / 1000); });
 var templateObject_1$G;
@@ -5635,6 +5674,108 @@ var Dropdown = function (_a) {
 };
 var templateObject_1$p, templateObject_2$b, templateObject_3$6;
 
+var menuContainerStyles = {
+    position: 'absolute',
+    width: '100%',
+};
+var subMenuContainerStyles = {
+    position: 'absolute',
+    width: 'max-content',
+};
+var menuStyles = {
+    position: 'relative',
+    marginBottom: '0px !important',
+};
+var subMenuStyles = {
+    position: 'relative',
+    borderTop: '1px solid',
+    borderTopRightRadius: '5px',
+    marginTop: 0,
+};
+var ParentOption = function (_a) {
+    var setFocusedOption = _a.setFocusedOption, OptionComponent = _a.OptionComponent, props = __rest(_a, ["setFocusedOption", "OptionComponent"]);
+    var option = props.data, isFocused = props.isFocused;
+    React.useEffect(function () {
+        if (isFocused) {
+            setFocusedOption(option);
+        }
+    }, [option, isFocused, setFocusedOption]);
+    if (OptionComponent != null) {
+        return (React__default.default.createElement(OptionComponent, __assign({}, props)));
+    }
+    return (React__default.default.createElement(BaseSelect.components.Option, __assign({}, props)));
+};
+var BasePanelledSelect = function (_a, ref) {
+    var value = _a.value, options = _a.options, onChange = _a.onChange, subMenuProps = _a.subMenuProps, components = _a.components, closeMenuOnSelect = _a.closeMenuOnSelect, _b = _a.hideSelectedOptions, hideSelectedOptions = _b === void 0 ? false : _b, props = __rest(_a, ["value", "options", "onChange", "subMenuProps", "components", "closeMenuOnSelect", "hideSelectedOptions"]);
+    var error = props.error, isMulti = props.isMulti;
+    var _c = React.useState(false), isOpen = _c[0], setOpen = _c[1];
+    var _d = React.useState(undefined), focusedOption = _d[0], setFocusedOption = _d[1];
+    var _e = React.useState(0), menuHeight = _e[0], setMenuHeight = _e[1];
+    var _f = React.useState(0), controlHeight = _f[0], setControlHeight = _f[1];
+    var menuRef = React.useRef(null);
+    var controlRef = React.useRef(null);
+    var windowSize = useWindowSize();
+    React.useLayoutEffect(function () {
+        if (menuRef.current != null) {
+            setMenuHeight(menuRef.current.offsetHeight);
+        }
+        if (controlRef.current != null) {
+            setControlHeight(controlRef.current.offsetHeight);
+        }
+    }, [windowSize, isOpen, value]);
+    var hasSubOptions = React.useCallback(function (option) {
+        return option != null && option.subOptions != null && option.subOptions.length > 0;
+    }, []);
+    var currentSubOptions = React.useMemo(function () {
+        if (focusedOption != null && hasSubOptions(focusedOption)) {
+            return focusedOption.subOptions;
+        }
+        return undefined;
+    }, [hasSubOptions, focusedOption]);
+    var onValueChange = function (newValue, actionMeta) {
+        if (onChange == null)
+            return;
+        if (newValue == null) {
+            onChange(newValue, actionMeta);
+        }
+        if (isMulti) {
+            var multiValue = newValue;
+            var singleValues = multiValue.filter(function (opt) { return !hasSubOptions(opt); });
+            onChange(singleValues, actionMeta);
+            return;
+        }
+        if (!hasSubOptions(newValue)) {
+            onChange(newValue, actionMeta);
+            if (closeMenuOnSelect !== null && closeMenuOnSelect !== void 0 ? closeMenuOnSelect : !isMulti) {
+                setOpen(false);
+            }
+        }
+    };
+    var onSubValueChange = function (newSubValue, actionMeta) {
+        if (onChange != null) {
+            onChange(newSubValue, actionMeta);
+        }
+        if (closeMenuOnSelect !== null && closeMenuOnSelect !== void 0 ? closeMenuOnSelect : !isMulti) {
+            setOpen(false);
+        }
+    };
+    var renderParentOption = React.useCallback(function (props) { return (React__default.default.createElement(ParentOption, __assign({ setFocusedOption: setFocusedOption, OptionComponent: components === null || components === void 0 ? void 0 : components.Option }, props))); }, [setFocusedOption, components === null || components === void 0 ? void 0 : components.Option]);
+    var renderMenu = React.useCallback(function (props) { return (React__default.default.createElement("div", { style: __assign(__assign({}, menuContainerStyles), { top: controlHeight }), ref: menuRef },
+        React__default.default.createElement(BaseSelect.components.Menu, __assign({}, props)))); }, [controlHeight]);
+    var renderSubMenu = React.useCallback(function (props) { return (React__default.default.createElement("div", { style: subMenuContainerStyles },
+        React__default.default.createElement(BaseSelect.components.Menu, __assign({}, props)))); }, []);
+    var renderControl = React.useCallback(function (props) { return (React__default.default.createElement("div", { ref: controlRef },
+        React__default.default.createElement(BaseSelect.components.Control, __assign({}, props)))); }, []);
+    return (React__default.default.createElement("div", null,
+        React__default.default.createElement(Row, null,
+            React__default.default.createElement(SKUSelect, __assign({ value: value, options: options, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); }, menuIsOpen: isOpen, ref: ref, components: __assign(__assign({}, components), { Option: renderParentOption, Menu: renderMenu, Control: renderControl }), onChange: onValueChange, menuStyles: menuStyles, hideSelectedOptions: hideSelectedOptions, closeMenuOnSelect: false }, props)),
+            currentSubOptions != null &&
+                React__default.default.createElement(SKUSelect, __assign({ value: value, options: currentSubOptions, menuIsOpen: isOpen, onChange: onSubValueChange, menuStyles: __assign(__assign({}, subMenuStyles), { height: menuHeight, top: controlHeight, borderTopColor: error
+                            ? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
+                            : getThemeColor(props, 'select.active.border', colors$1.select.active.border) }), hideSelectedOptions: hideSelectedOptions, closeMenuOnSelect: false, isMulti: isMulti }, subMenuProps, { components: __assign(__assign({ Control: function () { return null; } }, (subMenuProps === null || subMenuProps === void 0 ? void 0 : subMenuProps.components)), { Menu: renderSubMenu }) })))));
+};
+var PanelledSelect = React.forwardRef(BasePanelledSelect);
+
 var Badge = styled__default.default.span(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: inline-block;\n  min-width: 10px;\n  padding: 3px 7px;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  color: #fff;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 10px;\n  ", "\n"], ["\n  display: inline-block;\n  min-width: 10px;\n  padding: 3px 7px;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  color: #fff;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 10px;\n  ", "\n"])), function (p) { return p.color === 'cta' ? colors$1.cta : p.color === 'grey' ? colors$1.primary0 : colors$1.primary; }, function (p) { return p.color === 'grey' ? colors$1.primary100 : colors$1.white; }, SharedStyles);
 var templateObject_1$o;
 
@@ -8756,6 +8897,7 @@ exports.Padding = Padding;
 exports.Page = Page;
 exports.PanelContact = PanelContact;
 exports.PanelTileContact = PanelTileContact;
+exports.PanelledSelect = PanelledSelect;
 exports.PendingApprovalIcon = PendingApprovalIcon;
 exports.PercentIcon = PercentIcon;
 exports.PinIcon = PinIcon;