@thecb/components 4.1.7 → 4.1.8-beta.0

package/dist/index.cjs.js

@@ -14696,6 +14696,30 @@ var VoidedIcon = function VoidedIcon() {
   }))));
 };
 
+var StatusUnknownIcon = function StatusUnknownIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "32px",
+    height: "32px",
+    viewBox: "0 0 32 32",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "STOR-3203",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Icons",
+    transform: "translate(-64.000000, -736.000000)",
+    fill: "#6E727E"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M80,736 C88.836556,736 96,743.163444 96,752 C96,760.836556 88.836556,768 80,768 C71.163444,768 64,760.836556 64,752 C64,743.163444 71.163444,736 80,736 Z M80.85,757 L78.85,757 L78.85,759 L80.85,759 L80.85,757 Z M80.1460007,745 C78.0670004,745 76.4650001,746.017 75.7,747.799 L75.7,747.799 L77.5900003,748.294001 L77.6622133,748.125985 C78.1059448,747.191195 79.1250006,746.557 80.1280007,746.557 C81.2800009,746.557 82.099001,747.187 82.099001,748.195001 C82.099001,750.301001 78.9670005,751.093001 78.9670005,754.459002 L78.9670005,754.459002 L80.7670008,754.459002 L80.7792965,754.169347 C81.0061162,751.541289 84.2950014,750.971966 84.2950014,748.087001 C84.2950014,746.341 82.6480011,745 80.1460007,745 Z",
+    id: "status-icon---default-/-unknown"
+  }))));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -18842,7 +18866,7 @@ function _templateObject3$5() {
 }
 
 function _templateObject2$b() {
-  var data = _taggedTemplateLiteral(["\n  transform-origin: 0 0;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 8px 0 8px;\n  position: absolute;\n  width: 100%;\n  max-height: ", ";\n  overflow-y: scroll;\n  z-index: 1;\n  box-sizing: border-box;\n  &:focus {\n    outline: none;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  transform-origin: 0 0;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 8px 0 8px;\n  position: absolute;\n  width: ", ";\n  min-width: 100%;\n  max-height: ", ";\n  overflow-y: scroll;\n  z-index: 1;\n  box-sizing: border-box;\n  &:focus {\n    outline: none;\n  }\n"]);
 
   _templateObject2$b = function _templateObject2() {
     return data;
@@ -18852,7 +18876,7 @@ function _templateObject2$b() {
 }
 
 function _templateObject$n() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  transition: transform 0.3s ease;\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  padding-left: 8px;\n  flex-direction: column;\n  justify-content: center;\n  transition: transform 0.3s ease;\n  ", "\n"]);
 
   _templateObject$n = function _templateObject() {
     return data;
@@ -18865,47 +18889,52 @@ var IconWrapper = styled__default.div(_templateObject$n(), function (_ref) {
   return open ? "transform: rotate(-180deg)" : "";
 });
 var DropdownContentWrapper = styled__default.div(_templateObject2$b(), GREY_CHATEAU, WHITE, function (_ref2) {
-  var maxHeight = _ref2.maxHeight;
+  var widthFitOptions = _ref2.widthFitOptions;
+  return widthFitOptions ? "fit-content" : "100%";
+}, function (_ref3) {
+  var maxHeight = _ref3.maxHeight;
   return maxHeight || "400px";
 });
-var DropdownItemWrapper = styled__default.div(_templateObject3$5(), function (_ref3) {
-  var selected = _ref3.selected,
-      themeValues = _ref3.themeValues;
+var DropdownItemWrapper = styled__default.div(_templateObject3$5(), function (_ref4) {
+  var selected = _ref4.selected,
+      themeValues = _ref4.themeValues;
   return selected ? themeValues.selectedColor : WHITE;
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled ? "default" : "pointer";
 }, function (_ref5) {
-  var selected = _ref5.selected,
-      disabled = _ref5.disabled,
-      themeValues = _ref5.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+  var disabled = _ref5.disabled;
+  return disabled ? "default" : "pointer";
 }, function (_ref6) {
   var selected = _ref6.selected,
       disabled = _ref6.disabled,
       themeValues = _ref6.themeValues;
   return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+}, function (_ref7) {
+  var selected = _ref7.selected,
+      disabled = _ref7.disabled,
+      themeValues = _ref7.themeValues;
+  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
 });
-var SearchInput = styled__default.input(_templateObject4$2(), function (_ref7) {
-  var themeValues = _ref7.themeValues;
+var SearchInput = styled__default.input(_templateObject4$2(), function (_ref8) {
+  var themeValues = _ref8.themeValues;
   return themeValues.hoverColor && themeValues.hoverColor;
 });
 
-var Dropdown = function Dropdown(_ref8) {
+var Dropdown = function Dropdown(_ref9) {
   var _options$find;
 
-  var placeholder = _ref8.placeholder,
-      options = _ref8.options,
-      value = _ref8.value,
-      isOpen = _ref8.isOpen,
-      isError = _ref8.isError,
-      onSelect = _ref8.onSelect,
-      _ref8$disabledValues = _ref8.disabledValues,
-      disabledValues = _ref8$disabledValues === void 0 ? [] : _ref8$disabledValues,
-      _ref8$onClick = _ref8.onClick,
-      onClick = _ref8$onClick === void 0 ? noop : _ref8$onClick,
-      themeValues = _ref8.themeValues,
-      maxHeight = _ref8.maxHeight;
+  var placeholder = _ref9.placeholder,
+      options = _ref9.options,
+      value = _ref9.value,
+      isOpen = _ref9.isOpen,
+      isError = _ref9.isError,
+      onSelect = _ref9.onSelect,
+      _ref9$disabledValues = _ref9.disabledValues,
+      disabledValues = _ref9$disabledValues === void 0 ? [] : _ref9$disabledValues,
+      _ref9$onClick = _ref9.onClick,
+      onClick = _ref9$onClick === void 0 ? noop : _ref9$onClick,
+      themeValues = _ref9.themeValues,
+      maxHeight = _ref9.maxHeight,
+      _ref9$widthFitOptions = _ref9.widthFitOptions,
+      widthFitOptions = _ref9$widthFitOptions === void 0 ? false : _ref9$widthFitOptions;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19001,7 +19030,7 @@ var Dropdown = function Dropdown(_ref8) {
         break;
     }
 
-    if (keyCode > 64 && keyCode < 91 || keyCode == 32) {
+    if (keyCode > 64 && keyCode < 91 || keyCode == 32 || keyCode == 189) {
       e.preventDefault();
       setInputValue(inputValue + key);
     }
@@ -19072,6 +19101,7 @@ var Dropdown = function Dropdown(_ref8) {
     maxHeight: maxHeight,
     open: isOpen,
     ref: dropdownRef,
+    widthFitOptions: widthFitOptions,
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
@@ -40748,6 +40778,7 @@ exports.SolidDivider = SolidDivider$1;
 exports.Spinner = Spinner$2;
 exports.Stack = Stack;
 exports.StateProvinceDropdown = FormStateDropdown;
+exports.StatusUnknownIcon = StatusUnknownIcon;
 exports.SuccessfulIcon = SuccessfulIcon;
 exports.Switcher = Switcher;
 exports.TabSidebar = TabSidebar$1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.7",
+  "version": "4.1.8-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/dropdown/Dropdown.js

@@ -17,6 +17,7 @@ import { themeComponent } from "../../../util/themeUtils";
 
 const IconWrapper = styled.div`
   display: flex;
+  padding-left: 8px;
   flex-direction: column;
   justify-content: center;
   transition: transform 0.3s ease;
@@ -30,7 +31,8 @@ const DropdownContentWrapper = styled.div`
   background-color: ${WHITE};
   padding: 8px 0 8px;
   position: absolute;
-  width: 100%;
+  width: ${({ widthFitOptions }) => (widthFitOptions ? "fit-content" : "100%")};
+  min-width: 100%;
   max-height: ${({ maxHeight }) => maxHeight || "400px"};
   overflow-y: scroll;
   z-index: 1;
@@ -89,7 +91,8 @@ const Dropdown = ({
   disabledValues = [],
   onClick = noop,
   themeValues,
-  maxHeight
+  maxHeight,
+  widthFitOptions = false
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -151,7 +154,7 @@ const Dropdown = ({
         setInputValue(inputValue.slice(0, -1));
         break;
     }
-    if ((keyCode > 64 && keyCode < 91) || keyCode == 32) {
+    if ((keyCode > 64 && keyCode < 91) || keyCode == 32 || keyCode == 189) {
       e.preventDefault();
       setInputValue(inputValue + key);
     }
@@ -247,6 +250,7 @@ const Dropdown = ({
           maxHeight={maxHeight}
           open={isOpen}
           ref={dropdownRef}
+          widthFitOptions={widthFitOptions}
           tabIndex={0}
         >
           <Stack childGap="0">

package/src/components/atoms/icons/StatusUnknownIcon.js

@@ -0,0 +1,33 @@
+import React from "react";
+
+const StatusUnknownIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -736.000000)"
+        fill="#6E727E"
+      >
+        <path
+          d="M80,736 C88.836556,736 96,743.163444 96,752 C96,760.836556 88.836556,768 80,768 C71.163444,768 64,760.836556 64,752 C64,743.163444 71.163444,736 80,736 Z M80.85,757 L78.85,757 L78.85,759 L80.85,759 L80.85,757 Z M80.1460007,745 C78.0670004,745 76.4650001,746.017 75.7,747.799 L75.7,747.799 L77.5900003,748.294001 L77.6622133,748.125985 C78.1059448,747.191195 79.1250006,746.557 80.1280007,746.557 C81.2800009,746.557 82.099001,747.187 82.099001,748.195001 C82.099001,750.301001 78.9670005,751.093001 78.9670005,754.459002 L78.9670005,754.459002 L80.7670008,754.459002 L80.7792965,754.169347 C81.0061162,751.541289 84.2950014,750.971966 84.2950014,748.087001 C84.2950014,746.341 82.6480011,745 80.1460007,745 Z"
+          id="status-icon---default-/-unknown"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default StatusUnknownIcon;

package/src/components/atoms/icons/icons.stories.js

@@ -36,7 +36,8 @@ import {
   RejectedIcon,
   RejectedVelocityIcon,
   SuccessfulIcon,
-  VoidedIcon
+  VoidedIcon,
+  StatusUnknownIcon
 } from "./index";
 
 const story = page({
@@ -80,3 +81,4 @@ export const rejectedIcon = () => <RejectedIcon />;
 export const rejectedVelocityIcon = () => <RejectedVelocityIcon />;
 export const successfulIcon = () => <SuccessfulIcon />;
 export const voidedIcon = () => <VoidedIcon />;
+export const statusUnknownIcon = () => <StatusUnknownIcon />;

package/src/components/atoms/icons/index.js

@@ -38,6 +38,7 @@ import RejectedIcon from "./RejectedIcon";
 import RejectedVelocityIcon from "./RejectedVelocityIcon";
 import SuccessfulIcon from "./SuccessfulIcon";
 import VoidedIcon from "./VoidedIcon";
+import StatusUnknownIcon from "./StatusUnknownIcon";
 
 export {
   AccountsIcon,
@@ -79,5 +80,6 @@ export {
   RejectedIcon,
   RejectedVelocityIcon,
   SuccessfulIcon,
-  VoidedIcon
+  VoidedIcon,
+  StatusUnknownIcon
 };