carbon-react 95.1.2 → 97.0.0

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -212,8 +212,8 @@ const MultiActionButton = ({
 
 MultiActionButton.propTypes = { ...marginPropTypes,
 
-  /** Button type: "primary" | "secondary". */
-  buttonType: _propTypes.default.oneOf(["primary", "secondary"]),
+  /** Button type: "primary" | "secondary" | "tertiary" */
+  buttonType: _propTypes.default.oneOf(["primary", "secondary", "tertiary"]),
 
   /** The additional button to display. */
   children: _propTypes.default.node.isRequired,

package/lib/components/multi-action-button/multi-action-button.config.js

@@ -8,5 +8,5 @@ const MULTI_ACTION_BUTTON_ALIGNMENTS = ["left", "right"];
 exports.MULTI_ACTION_BUTTON_ALIGNMENTS = MULTI_ACTION_BUTTON_ALIGNMENTS;
 const MULTI_ACTION_BUTTON_SIZES = ["small", "medium", "large"];
 exports.MULTI_ACTION_BUTTON_SIZES = MULTI_ACTION_BUTTON_SIZES;
-const MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary"];
+const MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary", "tertiary"];
 exports.MULTI_ACTION_BUTTON_THEMES = MULTI_ACTION_BUTTON_THEMES;

package/lib/components/multi-action-button/multi-action-button.d.ts

@@ -1,5 +1,8 @@
 import SplitButton from "../split-button";
 
-declare class MultiActionButton extends SplitButton {}
+declare class MultiActionButton extends SplitButton {
+  /** Button type: "primary" | "secondary" | "tertiary" */
+  buttonType?: "primary" | "secondary" | "tertiary";
+}
 
 export default MultiActionButton;

package/lib/components/pod/pod.d.ts

@@ -48,6 +48,8 @@ export interface PodProps {
   height?: string | number;
 }
 
-declare class Pod extends React.Component<PodProps> {}
+declare function Pod(
+  props: PodProps & React.RefAttributes<HTMLElement>
+): JSX.Element;
 
 export default Pod;

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/lib/components/show-edit-pod/show-edit-pod-test.stories.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _showEditPod = _interopRequireDefault(require("./show-edit-pod.component"));
+
+var _content = _interopRequireDefault(require("../content"));
+
+var _specialCharacters = _interopRequireDefault(require("../../../.storybook/utils/argTypes/specialCharacters"));
+
+var _textbox = _interopRequireDefault(require("../textbox"));
+
+var _fieldset = _interopRequireDefault(require("../fieldset"));
+
+var _showEditPod2 = require("./show-edit-pod.config");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _default = {
+  component: _showEditPod.default,
+  title: "ShowEditPod/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  },
+  argTypes: {
+    buttonAlign: {
+      options: _showEditPod2.SHOW_EDIT_POD_ALIGNMENTS,
+      control: {
+        type: "select"
+      }
+    },
+    variant: {
+      options: _showEditPod2.SHOW_EDIT_POD_THEMES,
+      control: {
+        type: "select"
+      }
+    },
+    cancelTextSpecialCharacters: _specialCharacters.default,
+    deleteTextSpecialCharacters: _specialCharacters.default,
+    saveTextSpecialCharacters: _specialCharacters.default,
+    titleSpecialCharacters: _specialCharacters.default
+  },
+  args: {
+    border: false,
+    buttonAlign: "right",
+    cancel: true,
+    cancelText: "Cancel",
+    cancelTextSpecialCharacters: undefined,
+    deleteText: "Delete",
+    deleteTextSpecialCharacters: undefined,
+    saveText: "Save",
+    saveTextSpecialCharacters: undefined,
+    saving: false,
+    title: "Person",
+    titleSpecialCharacters: undefined,
+    transitionName: "carbon-show-edit-pod__transition",
+    variant: "transparent"
+  }
+};
+exports.default = _default;
+
+const ShowEditPodStory = ({
+  cancelTextSpecialCharacters,
+  cancelText,
+  deleteTextSpecialCharacters,
+  deleteText,
+  saveTextSpecialCharacters,
+  saveText,
+  titleSpecialCharacters,
+  title,
+  ...args
+}) => {
+  const [isEditing, setIsEditing] = (0, _react.useState)(false);
+  const [state, setState] = (0, _react.useState)({
+    edit_first_name: "Alan",
+    edit_second_name: "Smith",
+    edit_telephone: "000 000 0000"
+  });
+  const fieldProps = [{
+    key: "edit_first_name",
+    label: "First Name"
+  }, {
+    key: "edit_second_name",
+    label: "Second Name"
+  }, {
+    key: "edit_telephone",
+    label: "Telephone"
+  }];
+
+  const onEdit = () => {
+    setIsEditing(true);
+    (0, _addonActions.action)("edit")();
+  };
+
+  const onCancel = () => {
+    setIsEditing(false);
+    (0, _addonActions.action)("cancel")();
+  };
+
+  const onDelete = () => {
+    setIsEditing(false);
+    (0, _addonActions.action)("delete")();
+  };
+
+  const onSave = () => {
+    setIsEditing(false);
+    (0, _addonActions.action)("onSave")();
+  };
+
+  const setField = fieldName => e => {
+    setState({ ...state,
+      [fieldName]: e.target.value
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_showEditPod.default, _extends({}, args, {
+    editing: isEditing,
+    onDelete: onDelete,
+    onCancel: onCancel,
+    onEdit: onEdit,
+    editFields: /*#__PURE__*/_react.default.createElement(_fieldset.default, null, fieldProps.map(({
+      key,
+      label
+    }) => /*#__PURE__*/_react.default.createElement(_textbox.default, {
+      label: label,
+      key: key,
+      onChange: setField(key),
+      value: state[key],
+      labelInline: true,
+      labelAlign: "right"
+    }))),
+    onSave: onSave,
+    cancelText: cancelTextSpecialCharacters || cancelText,
+    deleteText: deleteTextSpecialCharacters || deleteText,
+    saveText: saveTextSpecialCharacters || saveText,
+    title: titleSpecialCharacters || title
+  }), fieldProps.map(({
+    key,
+    label
+  }) => /*#__PURE__*/_react.default.createElement(_content.default, {
+    key: key,
+    title: label
+  }, state[key])));
+};
+
+const Default = ShowEditPodStory.bind({});
+exports.Default = Default;