orcs-design-system 3.2.37 → 3.2.39

package/es/components/TextInput/index.js

@@ -24,23 +24,23 @@ const IconWrapper = styled.label.withConfig({
   componentId: "sc-shde0o-1"
 })(["display:flex;align-items:center;position:relative;svg{opacity:0.4;position:absolute;}", ";"], props => props.iconLeft && !props.floating ? css(["svg{bottom:", ";left:12px;}"], props => {
   let inputHeight = themeGet("appScale.inputHeightDefault")(props);
-  return "calc(".concat(inputHeight, " / 3 - 1px)");
+  return `calc(${inputHeight} / 3 - 1px)`;
 }) : props.iconLeft && props.floating ? css(["svg{bottom:", ";left:12px;}"], props => {
   let inputHeight = themeGet("appScale.inputHeightDefault")(props);
-  return "calc(".concat(inputHeight, " / 2 + 3px)");
+  return `calc(${inputHeight} / 2 + 3px)`;
 }) : props.iconRight && !props.floating ? css(["svg{bottom:", ";right:12px;}"], props => {
   let inputHeight = themeGet("appScale.inputHeightDefault")(props);
-  return "calc(".concat(inputHeight, " / 3 - 1px)");
+  return `calc(${inputHeight} / 3 - 1px)`;
 }) : props.iconRight && props.floating ? css(["svg{bottom:", ";right:12px;}"], props => {
   let inputHeight = themeGet("appScale.inputHeightDefault")(props);
-  return "calc(".concat(inputHeight, " / 2 + 3px)");
+  return `calc(${inputHeight} / 2 + 3px)`;
 }) : css([""]));
-const InputStyle = css(["display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;box-shadow:none;font-size:", ";z-index:1;border-radius:", ";transition:", ";background:", ";color:", ";width:", ";height:", ";padding:", ";border:1px solid ", ";", " &:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", ";border:1px solid ", ";", ";}"], props => themeGet("fontSizes.2")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? themeGet("colors.greyLightest")(props) : themeGet("colors.white")(props), props => props.disabled ? themeGet("colors.grey")(props) : themeGet("colors.greyDarkest")(props), props => props.fullWidth ? "100%" : "auto", props => props.height ? props.height : props.floating ? themeGet("appScale.inputHeightLarge")(props) : themeGet("appScale.inputHeightDefault")(props), props => {
+const InputStyle = css(["display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;box-shadow:none;font-size:", ";z-index:1;border-radius:", ";transition:", ";background:", ";color:", ";width:", ";height:", ";padding:", ";border:1px solid ", ";", " &:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", ";border:1px solid ", ";", ";}"], props => themeGet("fontSizes.2")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? themeGet("colors.greyLightest")(props) : themeGet("colors.white")(props), props => props.disabled ? themeGet("colors.grey")(props) : themeGet("colors.greyDarkest")(props), props => props.fullWidth ? `100%` : `auto`, props => props.height ? props.height : props.floating ? themeGet("appScale.inputHeightLarge")(props) : themeGet("appScale.inputHeightDefault")(props), props => {
   let left = props.iconLeft ? 36 : 10;
   let right = props.iconRight ? 36 : 10;
   let top = props.floating ? 25 : 5;
   let bottom = 6;
-  return "".concat(top, "px ").concat(right, "px ").concat(bottom, "px ").concat(left, "px");
+  return `${top}px ${right}px ${bottom}px ${left}px`;
 }, props => props.invalid ? themeGet("colors.danger")(props) : props.valid ? themeGet("colors.success")(props) : themeGet("colors.black30")(props), props => props.floating ? css(["&::placeholder{color:transparent;}&:not(:placeholder-shown){~ label{transform:translateY(-10px);font-size:", ";}}&:-ms-input-placeholder:not(:focus){~ label{transform:translateY(-10px);font-size:", ";}}&:not(:-ms-input-placeholder){~ label{transform:translateY(-10px);font-size:", ";}}"], themeGet("fontSizes.0")(props), themeGet("fontSizes.0")(props), themeGet("fontSizes.0")(props)) : css(["&::placeholder{color:", ";}"], themeGet("colors.grey")(props)), props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props), props => props.invalid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.danger30")(props) : props.valid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.success30")(props) : themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.primary30")(props), props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props), props => props.floating ? css(["&::placeholder{color:", ";}~ label{transform:translateY(-10px);font-size:", ";color:", ";}"], themeGet("colors.greyLight")(props), themeGet("fontSizes.0")(props), props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props)) : css([""]));
 const Input = styled("input").attrs(props => ({
   "data-testid": props["data-testid"] ? props["data-testid"] : null
@@ -57,9 +57,9 @@ const NumberInput = styled(NumericFormat).attrs(props => ({
 const Label = styled.label.withConfig({
   displayName: "TextInput__Label",
   componentId: "sc-shde0o-4"
-})(["display:block;z-index:2;text-align:left;font-size:", ";font-weight:", ";transition:", ";padding-right:", ";margin-bottom:", ";color:", ";", ";", ";"], props => themeGet("fontSizes.1")(props), props => props.bold ? themeGet("fontWeights.2")(props) : themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => props.floating && props.iconRight ? "40px" : "12px", props => props.floating ? 0 : themeGet("space.xs")(props), props => props.inverted ? themeGet("colors.white")(props) : props.valid ? themeGet("colors.successDark")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props), props => props.floating ? css(["padding-left:", ";cursor:text;position:absolute;top:", ";color:", ";"], props => props.iconLeft ? "37px" : "11px", props => {
+})(["display:block;z-index:2;text-align:left;font-size:", ";font-weight:", ";transition:", ";padding-right:", ";margin-bottom:", ";color:", ";", ";", ";"], props => themeGet("fontSizes.1")(props), props => props.bold ? themeGet("fontWeights.2")(props) : themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => props.floating && props.iconRight ? `40px` : `12px`, props => props.floating ? 0 : themeGet("space.xs")(props), props => props.inverted ? themeGet("colors.white")(props) : props.valid ? themeGet("colors.successDark")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props), props => props.floating ? css(["padding-left:", ";cursor:text;position:absolute;top:", ";color:", ";"], props => props.iconLeft ? "37px" : "11px", props => {
   let inputHeight = themeGet("appScale.inputHeightLarge")(props);
-  return "calc(".concat(inputHeight, " / 3)");
+  return `calc(${inputHeight} / 3)`;
 }, props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.greyDark")(props)) : css([""]), props => props.mandatory ? css(["&:after{content:\" *\";color:", ";}"], themeGet("colors.danger")(props)) : css([""]));
 const TextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -91,7 +91,7 @@ const TextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   const label = useMemo(() => {
     if (numberProps && numberProps.prefix) {
-      return "".concat(props.label, " ").concat(numberProps.prefix);
+      return `${props.label} ${numberProps.prefix}`;
     }
     return props.label;
   }, [props.label, numberProps]);
@@ -166,10 +166,10 @@ TextInput.propTypes = {
   /** Specifies aria-label for TextArea. This is only required if not using the label prop.*/
   ariaLabel: (props, propName) => {
     if (!props.label && (props[propName] == null || props[propName] === "")) {
-      return new Error("Missing prop `".concat(propName, "` not specified for TextInput component. When `label` is not provided, `").concat(propName, "` is required."));
+      return new Error(`Missing prop \`${propName}\` not specified for TextInput component. When \`label\` is not provided, \`${propName}\` is required.`);
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType `".concat(propName, "` supplied to TextInput component. Expected `string`, received `").concat(typeof props[propName], "`."));
+      return new Error(`Invalid propType \`${propName}\` supplied to TextInput component. Expected \`string\`, received \`${typeof props[propName]}\`.`);
     }
     return null;
   },

package/es/components.test.js

@@ -1,4 +1,75 @@
 import * as components from ".";
 test("all components exported", () => {
-  expect(Object.keys(components)).toMatchInlineSnapshot("\n    Array [\n      \"ActionsMenu\",\n      \"ActionsMenuBody\",\n      \"ActionsMenuHeading\",\n      \"ActionsMenuItem\",\n      \"Avatar\",\n      \"Badge\",\n      \"Box\",\n      \"Button\",\n      \"ButtonGroupContainer\",\n      \"ButtonGroupItem\",\n      \"ButtonLink\",\n      \"Card\",\n      \"Checkbox\",\n      \"Code\",\n      \"DatePicker\",\n      \"Divider\",\n      \"Expandable\",\n      \"Flex\",\n      \"FlexItem\",\n      \"GlobalStyles\",\n      \"Grid\",\n      \"GridItem\",\n      \"H1\",\n      \"H2\",\n      \"H3\",\n      \"H4\",\n      \"H5\",\n      \"H6\",\n      \"Header\",\n      \"HeaderSimple\",\n      \"Icon\",\n      \"Loading\",\n      \"Modal\",\n      \"Notification\",\n      \"P\",\n      \"Popover\",\n      \"ProgressBar\",\n      \"Quote\",\n      \"RadioButton\",\n      \"Range\",\n      \"Select\",\n      \"SideNav\",\n      \"Sidebar\",\n      \"SidebarClose\",\n      \"SidebarPanel\",\n      \"SidebarPanels\",\n      \"SidebarTab\",\n      \"SidebarTabs\",\n      \"Small\",\n      \"Spacer\",\n      \"StatusDot\",\n      \"StyledLink\",\n      \"SystemThemeProvider\",\n      \"Tab\",\n      \"Table\",\n      \"TabsContainer\",\n      \"Tag\",\n      \"Text\",\n      \"TextArea\",\n      \"TextInput\",\n      \"Toggle\",\n      \"TreeNav\",\n      \"Typography\",\n      \"VARIANT_COLORS\",\n      \"getOptionByValue\",\n      \"styleLink\",\n      \"systemThemeCollapsed\",\n      \"systemtheme\",\n    ]\n  ");
+  expect(Object.keys(components)).toMatchInlineSnapshot(`
+    Array [
+      "ActionsMenu",
+      "ActionsMenuBody",
+      "ActionsMenuHeading",
+      "ActionsMenuItem",
+      "Avatar",
+      "Badge",
+      "Box",
+      "Button",
+      "ButtonGroupContainer",
+      "ButtonGroupItem",
+      "ButtonLink",
+      "Card",
+      "Checkbox",
+      "Code",
+      "DatePicker",
+      "Divider",
+      "Expandable",
+      "Flex",
+      "FlexItem",
+      "GlobalStyles",
+      "Grid",
+      "GridItem",
+      "H1",
+      "H2",
+      "H3",
+      "H4",
+      "H5",
+      "H6",
+      "Header",
+      "HeaderSimple",
+      "Icon",
+      "Loading",
+      "Modal",
+      "Notification",
+      "P",
+      "Popover",
+      "ProgressBar",
+      "Quote",
+      "RadioButton",
+      "Range",
+      "Select",
+      "SideNav",
+      "Sidebar",
+      "SidebarClose",
+      "SidebarPanel",
+      "SidebarPanels",
+      "SidebarTab",
+      "SidebarTabs",
+      "Small",
+      "Spacer",
+      "StatusDot",
+      "StyledLink",
+      "SystemThemeProvider",
+      "Tab",
+      "Table",
+      "TabsContainer",
+      "Tag",
+      "Text",
+      "TextArea",
+      "TextInput",
+      "Toggle",
+      "TreeNav",
+      "Typography",
+      "VARIANT_COLORS",
+      "getOptionByValue",
+      "styleLink",
+      "systemThemeCollapsed",
+      "systemtheme",
+    ]
+  `);
 });

package/es/systemThemeCollapsed.js

@@ -190,9 +190,9 @@ export const borderWidths = [0, "1px", "2px", "3px"];
 
 // SHADOWS
 export const shadows = {
-  boxDefault: "0 2px 5px 0 ".concat(colors.black10),
-  thinOutline: "0 0 0 1px",
-  thickOutline: "0 0 0 3px"
+  boxDefault: `0 2px 5px 0 ${colors.black10}`,
+  thinOutline: `0 0 0 1px`,
+  thickOutline: `0 0 0 3px`
 };
 
 // ANIMATION
@@ -203,12 +203,12 @@ export const transition = {
 // RESPONSIVE MEDIA BREAKPOINTS
 export const breakpoints = ["450px", "675px", "900px", "1100px", "1400px", "1900px"];
 export const mediaQueries = {
-  screenXS: "@media screen and (min-width: ".concat(breakpoints[0], ")"),
-  screenS: "@media screen and (min-width: ".concat(breakpoints[1], ")"),
-  screenM: "@media screen and (min-width: ".concat(breakpoints[2], ")"),
-  screenL: "@media screen and (min-width: ".concat(breakpoints[3], ")"),
-  screenXL: "@media screen and (min-width: ".concat(breakpoints[4], ")"),
-  screenXXL: "@media screen and (min-width: ".concat(breakpoints[5], ")")
+  screenXS: `@media screen and (min-width: ${breakpoints[0]})`,
+  screenS: `@media screen and (min-width: ${breakpoints[1]})`,
+  screenM: `@media screen and (min-width: ${breakpoints[2]})`,
+  screenL: `@media screen and (min-width: ${breakpoints[3]})`,
+  screenXL: `@media screen and (min-width: ${breakpoints[4]})`,
+  screenXXL: `@media screen and (min-width: ${breakpoints[5]})`
 };
 
 // APP-SPECIFIC DIMENSIONS

package/es/systemtheme.js

@@ -189,9 +189,9 @@ export const borderWidths = [0, "1px", "2px", "3px"];
 
 // SHADOWS
 export const shadows = {
-  boxDefault: "0 2px 5px 0 ".concat(colors.black10),
-  thinOutline: "0 0 0 1px",
-  thickOutline: "0 0 0 3px"
+  boxDefault: `0 2px 5px 0 ${colors.black10}`,
+  thinOutline: `0 0 0 1px`,
+  thickOutline: `0 0 0 3px`
 };
 
 // ANIMATION
@@ -202,12 +202,12 @@ export const transition = {
 // RESPONSIVE MEDIA BREAKPOINTS
 export const breakpoints = ["450px", "675px", "900px", "1100px", "1400px", "1900px"];
 export const mediaQueries = {
-  screenXS: "@media screen and (min-width: ".concat(breakpoints[0], ")"),
-  screenS: "@media screen and (min-width: ".concat(breakpoints[1], ")"),
-  screenM: "@media screen and (min-width: ".concat(breakpoints[2], ")"),
-  screenL: "@media screen and (min-width: ".concat(breakpoints[3], ")"),
-  screenXL: "@media screen and (min-width: ".concat(breakpoints[4], ")"),
-  screenXXL: "@media screen and (min-width: ".concat(breakpoints[5], ")")
+  screenXS: `@media screen and (min-width: ${breakpoints[0]})`,
+  screenS: `@media screen and (min-width: ${breakpoints[1]})`,
+  screenM: `@media screen and (min-width: ${breakpoints[2]})`,
+  screenL: `@media screen and (min-width: ${breakpoints[3]})`,
+  screenXL: `@media screen and (min-width: ${breakpoints[4]})`,
+  screenXXL: `@media screen and (min-width: ${breakpoints[5]})`
 };
 
 // APP-SPECIFIC DIMENSIONS

package/es/utils/floatingUiHelpers.js

@@ -1,20 +1,15 @@
 const getFloatingUiZIndex = triggerRef => {
-  var _activeModalRef$conta;
   const activeModalRef = document.getElementById("modal-overlay");
-  if (activeModalRef && triggerRef.current && activeModalRef !== null && activeModalRef !== void 0 && (_activeModalRef$conta = activeModalRef.contains) !== null && _activeModalRef$conta !== void 0 && _activeModalRef$conta.call(activeModalRef, triggerRef.current)) {
+  if (activeModalRef && triggerRef.current && activeModalRef?.contains?.(triggerRef.current)) {
     return 1100;
   }
   return 900;
 };
 const REACT_SELECT_MENU = "react-select-menu";
-const isRenderedInReactSelectMenu = triggerRef => {
-  var _document$getElementB, _document$getElementB2;
-  return (_document$getElementB = document.getElementById(REACT_SELECT_MENU)) === null || _document$getElementB === void 0 || (_document$getElementB2 = _document$getElementB.contains) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.call(_document$getElementB, triggerRef.current);
-};
+const isRenderedInReactSelectMenu = triggerRef => document.getElementById(REACT_SELECT_MENU)?.contains?.(triggerRef.current);
 const getFloatingUiRootElement = triggerRef => {
-  var _activeModalRef$conta2;
   const activeModalRef = document.getElementById("modal-overlay");
-  const isRenderedInModal = activeModalRef === null || activeModalRef === void 0 || (_activeModalRef$conta2 = activeModalRef.contains) === null || _activeModalRef$conta2 === void 0 ? void 0 : _activeModalRef$conta2.call(activeModalRef, triggerRef.current);
+  const isRenderedInModal = activeModalRef?.contains?.(triggerRef.current);
   if (isRenderedInModal) {
     return document.getElementById("modal");
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.37",
+  "version": "3.2.39",
   "engines": {
     "node": "20.12.2"
   },
@@ -47,9 +47,10 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@floating-ui/react": "^0.26.19",
-    "@mui/icons-material": "^5.15.18",
-    "@mui/material": "^5.15.18",
-    "@mui/x-date-pickers": "^7.5.0",
+    "@mui/icons-material": "^6.0.2",
+    "@mui/material": "^6.0.2",
+    "@mui/utils": "^6.0.2",
+    "@mui/x-date-pickers": "^7.16.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/prop-types": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
@@ -59,13 +60,13 @@
     "polished": "^3.7.1",
     "prop-types": "^15.6.2",
     "react-app-polyfill": "^2.0.0",
-    "react-arborist": "^3.2.0",
+    "react-arborist": "^3.4.0",
     "react-cool-onclickoutside": "^1.5.9",
     "react-dates": "^21.8.0",
     "react-intersection-observer": "^9.4.3",
     "react-moment-proptypes": "^1.8.1",
     "react-number-format": "^5.3.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.26.2",
     "react-select": "^5.7.4",
     "styled-system": "^5.1.5"
   },
@@ -78,10 +79,10 @@
     "@babel/preset-react": "^7.12.10",
     "@babel/runtime": "^7.12.5",
     "@chromatic-com/storybook": "^1.5.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/fontawesome-svg-core": "file:libs/fortawesome-fontawesome-svg-core-1.3.0.tgz",
     "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@fortawesome/react-fontawesome": "git://github.com/FortAwesome/react-fontawesome.git#0.1.13",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@storybook/addon-a11y": "^8.1.7",
@@ -98,7 +99,7 @@
     "@storybook/mdx1-csf": "^1.0.0",
     "@storybook/preset-create-react-app": "^8.1.7",
     "@storybook/react": "^8.1.7",
-    "@storybook/react-webpack5": "^8.1.7",
+    "@storybook/react-webpack5": "^8.2.9",
     "@storybook/storybook-deployer": "2.8.16",
     "@storybook/theming": "^8.1.7",
     "@testing-library/jest-dom": "^5.11.6",
@@ -143,7 +144,6 @@
     "webpack-cli": "^5.1.4"
   },
   "overrides": {
-    "@mui/utils": "6.0.0-alpha.9",
     "braces": "3.0.3",
     "eslint-plugin-testing-library": "^5.11.1",
     "jest": "$jest",
@@ -152,11 +152,16 @@
     "postcss": "^8.4.31",
     "react-scripts": "5.0.1",
     "remark-parse": "10.0.2",
-    "react": "$react",
-    "react-dom": "$react-dom",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "typescript": "5.2.2",
     "webpack-dev-middleware": "6.1.2",
-    "ws": "8.17.1"
+    "ws": "8.17.1",
+    "express": {
+      "path-to-regexp": "0.1.10"
+    },
+    "send": "0.19.0",
+    "redux": "4.2.1"
   },
   "browserslist": [
     ">0.2%",