carbon-react 95.1.2 → 95.1.3

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -78,7 +78,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [textboxRef, setTextboxRef] = (0, _react.useState)();
   const [isOpen, setOpen] = (0, _react.useState)(false);
   const [textValue, setTextValue] = (0, _react.useState)("");
-  const [selectedValue, setSelectedValue] = (0, _react.useState)("");
+  const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || "");
   const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
   const [filterText, setFilterText] = (0, _react.useState)("");
   const createCustomEvent = (0, _react.useCallback)(newValue => {
@@ -187,21 +187,33 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, [setMatchingText, selectedValue]);
   (0, _react.useEffect)(() => {
-    const newValue = value || defaultValue;
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
     (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
-    setSelectedValue(prevValue => {
-      if (value && isControlled.current && prevValue !== newValue) {
-        setMatchingText(newValue);
+
+    if (isControlled.current) {
+      setSelectedValue(prevValue => {
+        if (value && prevValue !== value) {
+          setMatchingText(value);
+        }
+
+        return value;
+      });
+      setHighlightedValue(value);
+    } else {
+      if (textValue !== selectedValue) {
+        setMatchingText(selectedValue);
       }
 
-      return newValue;
-    });
-    setHighlightedValue(newValue); // prevent value update on filter change
+      if (highlightedValue !== selectedValue) {
+        setHighlightedValue(selectedValue);
+      }
+    } // prevent value update on filter change
+    // selectedValue and highlightedValue omitted from deps, only want uncontrolled change if onChange/children update
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, defaultValue, onChange, children]);
+
+  }, [value, onChange, children]);
   (0, _react.useEffect)(() => {
     if (!isOpen) {
       setFilterText("");
@@ -215,8 +227,11 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     (0, _invariant.default)(!hasListActionButton || hasListActionButton && onListAction, onListActionMissingMessage);
   }, [listActionButton, onListAction]);
   (0, _react.useEffect)(() => {
-    setMatchingText(value || defaultValue); // update text value only when children are changing
+    if (isControlled.current) {
+      setMatchingText(value);
+    } // update text value only when children are changing
     // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [value, children]);
   (0, _react.useEffect)(() => {
     if (onFilterChange) {

package/lib/components/select/multi-select/multi-select.component.js

@@ -82,7 +82,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [textboxRef, setTextboxRef] = (0, _react.useState)();
   const [isOpen, setOpenState] = (0, _react.useState)(false);
   const [textValue, setTextValue] = (0, _react.useState)("");
-  const [selectedValue, setSelectedValue] = (0, _react.useState)([]);
+  const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || []);
   const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
   const [filterText, setFilterText] = (0, _react.useState)("");
   const [placeholderOverride, setPlaceholderOverride] = (0, _react.useState)();
@@ -124,7 +124,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     setSelectedValue(previousValue => {
       isClickTriggeredBySelect.current = true;
 
-      if (previousValue.length === 0) {
+      if (!previousValue.length) {
         return previousValue;
       }
 
@@ -185,7 +185,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   const mapValuesToPills = (0, _react.useCallback)(() => {
     const canDelete = !disabled && !readOnly;
 
-    if (selectedValue.length === 0) {
+    if (!selectedValue.length) {
       return "";
     }
 
@@ -205,31 +205,28 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       const {
         title
       } = pillProps;
+      const key = title + ((matchingOption === null || matchingOption === void 0 ? void 0 : matchingOption.props.value) || index);
       return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectPillContainer, {
-        key: title
+        key: key
       }, /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
         onDelete: canDelete ? () => removeSelectedValue(index) : undefined
       }, pillProps), title));
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [children, disabled, readOnly, selectedValue]);
   (0, _react.useEffect)(() => {
-    const newValue = value || defaultValue;
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-    const onChageMissingMessage = "onChange prop required when using a controlled input element";
+    const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChageMissingMessage);
-    setSelectedValue(previousValue => {
-      if (!newValue && previousValue.length === 0) {
-        return previousValue;
-      }
+    (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
 
-      return newValue;
-    });
-  }, [value, defaultValue, onChange]); // removes placeholder when a value is present
+    if (isControlled.current) {
+      setSelectedValue(value);
+    }
+  }, [value, onChange]); // removes placeholder when a value is present
 
   (0, _react.useEffect)(() => {
-    const hasValue = value && value.length > 0;
-    const hasSelectedValue = selectedValue && selectedValue.length > 0;
+    const hasValue = value === null || value === void 0 ? void 0 : value.length;
+    const hasSelectedValue = selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length;
 
     if (hasValue || hasSelectedValue) {
       setPlaceholderOverride(" ");

package/lib/components/select/simple-select/simple-select.component.js

@@ -77,7 +77,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [textboxRef, setTextboxRef] = (0, _react.useState)();
   const [isOpen, setOpenState] = (0, _react.useState)(false);
   const [textValue, setTextValue] = (0, _react.useState)("");
-  const [selectedValue, setSelectedValue] = (0, _react.useState)("");
+  const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || "");
   const childOptions = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
   const createCustomEvent = (0, _react.useCallback)(newValue => {
     const customEvent = {
@@ -176,13 +176,15 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     isClickTriggeredBySelect.current = false;
   }, []);
   (0, _react.useEffect)(() => {
-    const newValue = value || defaultValue;
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
     (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
-    setSelectedValue(newValue);
-  }, [value, defaultValue, onChange]);
+
+    if (isControlled.current) {
+      setSelectedValue(value);
+    }
+  }, [value, onChange]);
   (0, _react.useEffect)(() => {
     const matchingOption = childOptions.find(child => (0, _isExpectedOption.default)(child, selectedValue));
     let newText = "";

package/lib/components/select/simple-select/simple-select.d.ts

@@ -55,7 +55,7 @@ export interface SimpleSelectProps
     | "left-start"
     | "left-end";
   /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled?: bool;
+  flipEnabled?: boolean;
 }
 
 declare function SimpleSelect(

package/lib/components/select/utils/is-expected-option.js

@@ -22,5 +22,13 @@ function isExpectedOption(element, expectedValue) {
     return false;
   }
 
+  const {
+    length
+  } = typeof expectedValue === "string" ? expectedValue : Object.keys(expectedValue);
+
+  if (!length) {
+    return false;
+  }
+
   return (0, _isExpectedValue.default)(element.props.value, expectedValue);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "95.1.2",
+  "version": "95.1.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -8,10 +8,12 @@
     "node": ">=14.16.0"
   },
   "files": [
-    "lib"
+    "lib",
+    "scripts/check_carbon_version.js",
+    "scripts/check_rfcs.js"
   ],
   "scripts": {
-    "start": "node ./check_version.js && start-storybook -p 9001 -s .assets -c .storybook",
+    "start": "node ./scripts/check_node_version.js && start-storybook -p 9001 -s .assets -c .storybook",
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
     "test": "jest --config=./jest.conf.json",
     "test-update": "jest --config=./jest.conf.json --updateSnapshot",
@@ -22,6 +24,7 @@
     "lint": "eslint ./src",
     "precompile": "npm run clean-lib && npm run copy-files && npm run babel",
     "prepublishOnly": "npm run precompile",
+    "postinstall": "node ./scripts/check_carbon_version.js && node ./scripts/check_rfcs.js",
     "watch": "npm run clean-lib && npm run copy-files -- --watch & npm run babel -- --watch",
     "build-storybook": "build-storybook -c .storybook -s .assets",
     "start:static": "npx http-server -p 9001 ./storybook-static",
@@ -132,16 +135,19 @@
     "typescript": "^3.9.5"
   },
   "dependencies": {
+    "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.9.0",
     "@sage/design-tokens": "^1.73.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "classnames": "~2.2.6",
     "crypto-js": "~3.3.0",
+    "dotenv": "^10.0.0",
     "immutable": "~3.8.2",
     "invariant": "^2.2.4",
     "lodash": "^4.17.20",
     "moment": "~2.20.1",
+    "node-fetch": "^2.6.1",
     "polished": "^4.0.5",
     "prop-types": "^15.7.2",
     "react-day-picker": "~6.1.1",

package/scripts/check_carbon_version.js

@@ -0,0 +1,30 @@
+/* eslint-disable no-console */
+const fetch = require("node-fetch");
+const dotenv = require("dotenv");
+const chalk = require("chalk");
+const { version } = require("../package.json");
+
+dotenv.config();
+const majorVersion = version.split(".")[0];
+
+const checkCarbonVersion = () => {
+  fetch("https://registry.npmjs.com/carbon-react")
+    .then((res) => res.json())
+    .then((data) => {
+      const { latest } = data["dist-tags"];
+      const latestMajor = latest.split(".")[0];
+
+      const diff = Number(latestMajor) - Number(majorVersion);
+
+      if (diff > 1) {
+        console.log(
+          `carbon-react version installed is currently ${chalk.yellow(
+            diff
+          )} major versions behind the latest.`
+        );
+      }
+    })
+    .catch((err) => console.log(err));
+};
+
+if (!process.env.CARBON_INSTALL) checkCarbonVersion();

package/scripts/check_rfcs.js

@@ -0,0 +1,49 @@
+/* eslint-disable no-console */
+const { Octokit } = require("@octokit/rest");
+const dotenv = require("dotenv");
+const chalk = require("chalk");
+
+dotenv.config();
+const octokit = new Octokit({
+  baseUrl: "https://api.github.com",
+});
+
+const method = "GET";
+const owner = "sage";
+const path = "pulls";
+const repo = "carbon";
+const url = "/repos/{owner}/{repo}/{path}";
+
+const getOpenRfcs = async () => {
+  const { data } = await octokit.request({
+    owner,
+    repo,
+    url,
+    method,
+    path,
+  });
+
+  return data.filter((item) => {
+    const labels = item.labels.filter((label) => label.name === "RFC");
+
+    return labels.length > 0;
+  });
+};
+
+const getRfcTitle = (rfc) => rfc.title.split(": ")[1];
+
+const checkRfcs = async () => {
+  const openRfcs = await getOpenRfcs();
+
+  if (openRfcs.length > 0) {
+    console.log("\ncarbon-react currently has open RFCs:");
+
+    openRfcs.forEach((item) => {
+      const title = getRfcTitle(item);
+      console.log(`- ${title}: ${chalk.cyan(item.html_url)}`);
+    });
+    console.log("\n");
+  }
+};
+
+if (!process.env.CARBON_INSTALL) checkRfcs();