@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -31,72 +31,47 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
 var copy__default = /*#__PURE__*/_interopDefaultLegacy(copy);
 
-var _CodeSnippet$propType, _CodeSnippet$defaultP;
-
-var _excluded = ["className", "type", "children", "disabled", "feedback", "feedbackTimeout", "onClick", "aria-label", "ariaLabel", "copyText", "copyButtonDescription", "light", "showMoreText", "showLessText", "hideCopyButton", "wrapText", "maxCollapsedNumberOfRows", "maxExpandedNumberOfRows", "minCollapsedNumberOfRows", "minExpandedNumberOfRows"];
-var rowHeightInPixels = 16;
-var defaultMaxCollapsedNumberOfRows = 15;
-var defaultMaxExpandedNumberOfRows = 0;
-var defaultMinCollapsedNumberOfRows = 3;
-var defaultMinExpandedNumberOfRows = 16;
+const rowHeightInPixels = 16;
+const defaultMaxCollapsedNumberOfRows = 15;
+const defaultMaxExpandedNumberOfRows = 0;
+const defaultMinCollapsedNumberOfRows = 3;
+const defaultMinExpandedNumberOfRows = 16;
 
 function CodeSnippet(_ref) {
-  var _classNames;
-
-  var className = _ref.className,
-      type = _ref.type,
-      children = _ref.children,
-      disabled = _ref.disabled,
-      feedback = _ref.feedback,
-      feedbackTimeout = _ref.feedbackTimeout,
-      onClick = _ref.onClick,
-      ariaLabel = _ref['aria-label'],
-      deprecatedAriaLabel = _ref.ariaLabel,
-      copyText = _ref.copyText,
-      copyButtonDescription = _ref.copyButtonDescription,
-      light = _ref.light,
-      showMoreText = _ref.showMoreText,
-      showLessText = _ref.showLessText,
-      hideCopyButton = _ref.hideCopyButton,
-      wrapText = _ref.wrapText,
-      _ref$maxCollapsedNumb = _ref.maxCollapsedNumberOfRows,
-      maxCollapsedNumberOfRows = _ref$maxCollapsedNumb === void 0 ? defaultMaxCollapsedNumberOfRows : _ref$maxCollapsedNumb,
-      _ref$maxExpandedNumbe = _ref.maxExpandedNumberOfRows,
-      maxExpandedNumberOfRows = _ref$maxExpandedNumbe === void 0 ? defaultMaxExpandedNumberOfRows : _ref$maxExpandedNumbe,
-      _ref$minCollapsedNumb = _ref.minCollapsedNumberOfRows,
-      minCollapsedNumberOfRows = _ref$minCollapsedNumb === void 0 ? defaultMinCollapsedNumberOfRows : _ref$minCollapsedNumb,
-      _ref$minExpandedNumbe = _ref.minExpandedNumberOfRows,
-      minExpandedNumberOfRows = _ref$minExpandedNumbe === void 0 ? defaultMinExpandedNumberOfRows : _ref$minExpandedNumbe,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      expandedCode = _useState2[0],
-      setExpandedCode = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      shouldShowMoreLessBtn = _useState4[0],
-      setShouldShowMoreLessBtn = _useState4[1];
-
-  var _useRef = React.useRef(uniqueId["default"]()),
-      uid = _useRef.current;
-
-  var codeContentRef = React.useRef();
-  var codeContainerRef = React.useRef();
-  var innerCodeRef = React.useRef();
-
-  var _useState5 = React.useState(false),
-      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      hasLeftOverflow = _useState6[0],
-      setHasLeftOverflow = _useState6[1];
-
-  var _useState7 = React.useState(false),
-      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      hasRightOverflow = _useState8[0],
-      setHasRightOverflow = _useState8[1];
-
-  var getCodeRef = React.useCallback(function () {
+  let {
+    className,
+    type,
+    children,
+    disabled,
+    feedback,
+    feedbackTimeout,
+    onClick,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
+    copyText,
+    copyButtonDescription,
+    light,
+    showMoreText,
+    showLessText,
+    hideCopyButton,
+    wrapText,
+    maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows,
+    maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows,
+    minCollapsedNumberOfRows = defaultMinCollapsedNumberOfRows,
+    minExpandedNumberOfRows = defaultMinExpandedNumberOfRows,
+    ...rest
+  } = _ref;
+  const [expandedCode, setExpandedCode] = React.useState(false);
+  const [shouldShowMoreLessBtn, setShouldShowMoreLessBtn] = React.useState(false);
+  const {
+    current: uid
+  } = React.useRef(uniqueId["default"]());
+  const codeContentRef = React.useRef();
+  const codeContainerRef = React.useRef();
+  const innerCodeRef = React.useRef();
+  const [hasLeftOverflow, setHasLeftOverflow] = React.useState(false);
+  const [hasRightOverflow, setHasRightOverflow] = React.useState(false);
+  const getCodeRef = React.useCallback(() => {
     if (type === 'single') {
       return codeContainerRef;
     }
@@ -105,39 +80,41 @@ function CodeSnippet(_ref) {
       return codeContentRef;
     }
   }, [type]);
-  var prefix = usePrefix.usePrefix();
-  var getCodeRefDimensions = React.useCallback(function () {
-    var _getCodeRef$current = getCodeRef().current,
-        codeClientWidth = _getCodeRef$current.clientWidth,
-        codeScrollLeft = _getCodeRef$current.scrollLeft,
-        codeScrollWidth = _getCodeRef$current.scrollWidth;
+  const prefix = usePrefix.usePrefix();
+  const getCodeRefDimensions = React.useCallback(() => {
+    const {
+      clientWidth: codeClientWidth,
+      scrollLeft: codeScrollLeft,
+      scrollWidth: codeScrollWidth
+    } = getCodeRef().current;
     return {
       horizontalOverflow: codeScrollWidth > codeClientWidth,
-      codeClientWidth: codeClientWidth,
-      codeScrollWidth: codeScrollWidth,
-      codeScrollLeft: codeScrollLeft
+      codeClientWidth,
+      codeScrollWidth,
+      codeScrollLeft
     };
   }, [getCodeRef]);
-  var handleScroll = React.useCallback(function () {
+  const handleScroll = React.useCallback(() => {
     if (type === 'inline' || type === 'single' && !(codeContainerRef !== null && codeContainerRef !== void 0 && codeContainerRef.current) || type === 'multi' && !(codeContentRef !== null && codeContentRef !== void 0 && codeContentRef.current)) {
       return;
     }
 
-    var _getCodeRefDimensions = getCodeRefDimensions(),
-        horizontalOverflow = _getCodeRefDimensions.horizontalOverflow,
-        codeClientWidth = _getCodeRefDimensions.codeClientWidth,
-        codeScrollWidth = _getCodeRefDimensions.codeScrollWidth,
-        codeScrollLeft = _getCodeRefDimensions.codeScrollLeft;
-
+    const {
+      horizontalOverflow,
+      codeClientWidth,
+      codeScrollWidth,
+      codeScrollLeft
+    } = getCodeRefDimensions();
     setHasLeftOverflow(horizontalOverflow && !!codeScrollLeft);
     setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
   }, [type, getCodeRefDimensions]);
   useResizeObserver__default["default"]({
     ref: getCodeRef(),
-    onResize: function onResize() {
+    onResize: () => {
       if (codeContentRef !== null && codeContentRef !== void 0 && codeContentRef.current && type === 'multi') {
-        var _codeContentRef$curre = codeContentRef.current.getBoundingClientRect(),
-            height = _codeContentRef$curre.height;
+        const {
+          height
+        } = codeContentRef.current.getBoundingClientRect();
 
         if (maxCollapsedNumberOfRows > 0 && (maxExpandedNumberOfRows <= 0 || maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && height > maxCollapsedNumberOfRows * rowHeightInPixels) {
           setShouldShowMoreLessBtn(true);
@@ -155,15 +132,15 @@ function CodeSnippet(_ref) {
       }
     }
   }, [type, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, minExpandedNumberOfRows, rowHeightInPixels]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     handleScroll();
   }, [handleScroll]);
 
-  var handleCopyClick = function handleCopyClick(evt) {
+  const handleCopyClick = evt => {
     if (copyText || innerCodeRef !== null && innerCodeRef !== void 0 && innerCodeRef.current) {
       var _innerCodeRef$current;
 
-      copy__default["default"](copyText !== null && copyText !== void 0 ? copyText : innerCodeRef === null || innerCodeRef === void 0 ? void 0 : (_innerCodeRef$current = innerCodeRef.current) === null || _innerCodeRef$current === void 0 ? void 0 : _innerCodeRef$current.innerText);
+      copy__default["default"](copyText ?? (innerCodeRef === null || innerCodeRef === void 0 ? void 0 : (_innerCodeRef$current = innerCodeRef.current) === null || _innerCodeRef$current === void 0 ? void 0 : _innerCodeRef$current.innerText));
     }
 
     if (onClick) {
@@ -171,8 +148,16 @@ function CodeSnippet(_ref) {
     }
   };
 
-  var codeSnippetClasses = cx__default["default"](className, "".concat(prefix, "--snippet"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--snippet--").concat(type), type), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--snippet--disabled"), type !== 'inline' && disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--snippet--expand"), expandedCode), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--snippet--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--snippet--no-copy"), hideCopyButton), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--snippet--wraptext"), wrapText), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--snippet--has-right-overflow"), type == 'multi' && hasRightOverflow), _classNames));
-  var expandCodeBtnText = expandedCode ? showLessText : showMoreText;
+  const codeSnippetClasses = cx__default["default"](className, `${prefix}--snippet`, {
+    [`${prefix}--snippet--${type}`]: type,
+    [`${prefix}--snippet--disabled`]: type !== 'inline' && disabled,
+    [`${prefix}--snippet--expand`]: expandedCode,
+    [`${prefix}--snippet--light`]: light,
+    [`${prefix}--snippet--no-copy`]: hideCopyButton,
+    [`${prefix}--snippet--wraptext`]: wrapText,
+    [`${prefix}--snippet--has-right-overflow`]: type == 'multi' && hasRightOverflow
+  });
+  const expandCodeBtnText = expandedCode ? showLessText : showMoreText;
 
   if (type === 'inline') {
     if (hideCopyButton) {
@@ -197,10 +182,10 @@ function CodeSnippet(_ref) {
     }, children));
   }
 
-  var containerStyle = {};
+  let containerStyle = {};
 
   if (type === 'multi') {
-    var styles = {};
+    const styles = {};
 
     if (expandedCode) {
       if (maxExpandedNumberOfRows > 0) {
@@ -231,7 +216,7 @@ function CodeSnippet(_ref) {
     ref: codeContainerRef,
     role: type === 'single' || type === 'multi' ? 'textbox' : null,
     tabIndex: (type === 'single' || type === 'multi') && !disabled ? 0 : null,
-    className: "".concat(prefix, "--snippet-container"),
+    className: `${prefix}--snippet-container`,
     "aria-label": deprecatedAriaLabel || ariaLabel || 'code-snippet',
     "aria-readonly": type === 'single' || type === 'multi' ? true : null,
     "aria-multiline": type === 'multi' ? true : null,
@@ -242,9 +227,9 @@ function CodeSnippet(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("code", {
     ref: innerCodeRef
   }, children))), hasLeftOverflow && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--snippet__overflow-indicator--left")
+    className: `${prefix}--snippet__overflow-indicator--left`
   }), hasRightOverflow && type !== 'multi' && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--snippet__overflow-indicator--right")
+    className: `${prefix}--snippet__overflow-indicator--right`
   }), !hideCopyButton && /*#__PURE__*/React__default["default"].createElement(CopyButton["default"], {
     disabled: disabled,
     onClick: handleCopyClick,
@@ -254,21 +239,133 @@ function CodeSnippet(_ref) {
   }), shouldShowMoreLessBtn && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
     kind: "ghost",
     size: "sm",
-    className: "".concat(prefix, "--snippet-btn--expand"),
+    className: `${prefix}--snippet-btn--expand`,
     disabled: disabled,
-    onClick: function onClick() {
-      return setExpandedCode(!expandedCode);
-    }
+    onClick: () => setExpandedCode(!expandedCode)
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--snippet-btn--text")
+    className: `${prefix}--snippet-btn--text`
   }, expandCodeBtnText), /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
-    className: "".concat(prefix, "--icon-chevron--down ").concat(prefix, "--snippet__icon"),
+    className: `${prefix}--icon-chevron--down ${prefix}--snippet__icon`,
     name: "chevron--down",
     role: "img"
   })));
 }
 
-CodeSnippet.propTypes = (_CodeSnippet$propType = {}, _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "copyButtonDescription", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "copyText", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "disabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "feedback", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "feedbackTimeout", PropTypes__default["default"].number), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "hideCopyButton", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "light", deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `CodeSnippet` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.')), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "maxCollapsedNumberOfRows", PropTypes__default["default"].number), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "maxExpandedNumberOfRows", PropTypes__default["default"].number), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "minCollapsedNumberOfRows", PropTypes__default["default"].number), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "minExpandedNumberOfRows", PropTypes__default["default"].number), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "onClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "showLessText", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "showMoreText", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "type", PropTypes__default["default"].oneOf(['single', 'inline', 'multi'])), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$propType, "wrapText", PropTypes__default["default"].bool), _CodeSnippet$propType);
-CodeSnippet.defaultProps = (_CodeSnippet$defaultP = {}, _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$defaultP, 'aria-label', 'Copy to clipboard'), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$defaultP, "type", 'single'), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$defaultP, "showMoreText", 'Show more'), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$defaultP, "showLessText", 'Show less'), _rollupPluginBabelHelpers.defineProperty(_CodeSnippet$defaultP, "wrapText", false), _CodeSnippet$defaultP);
+CodeSnippet.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the containing <textbox>
+   * node
+   */
+  ['aria-label']: PropTypes__default["default"].string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the containing <textbox>
+   * node
+   */
+  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+
+  /**
+   * Provide the content of your CodeSnippet as a node or string
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the description for the Copy Button
+   */
+  copyButtonDescription: PropTypes__default["default"].string,
+
+  /**
+   * Optional text to copy. If not specified, the `children` node's `innerText`
+   * will be used as the copy value.
+   */
+  copyText: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether or not the CodeSnippet should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the string displayed when the snippet is copied
+   */
+  feedback: PropTypes__default["default"].string,
+
+  /**
+   * Specify the time it takes for the feedback message to timeout
+   */
+  feedbackTimeout: PropTypes__default["default"].number,
+
+  /**
+   * Specify whether or not a copy button should be used/rendered.
+   */
+  hideCopyButton: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether you are using the light variant of the Code Snippet,
+   * typically used for inline snippet to display an alternate color
+   */
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `CodeSnippet` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
+
+  /**
+   * Specify the maximum number of rows to be shown when in collapsed view
+   */
+  maxCollapsedNumberOfRows: PropTypes__default["default"].number,
+
+  /**
+   * Specify the maximum number of rows to be shown when in expanded view
+   */
+  maxExpandedNumberOfRows: PropTypes__default["default"].number,
+
+  /**
+   * Specify the minimum number of rows to be shown when in collapsed view
+   */
+  minCollapsedNumberOfRows: PropTypes__default["default"].number,
+
+  /**
+   * Specify the minimum number of rows to be shown when in expanded view
+   */
+  minExpandedNumberOfRows: PropTypes__default["default"].number,
+
+  /**
+   * An optional handler to listen to the `onClick` even fired by the Copy
+   * Button
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Specify a string that is displayed when the Code Snippet has been
+   * interacted with to show more lines
+   */
+  showLessText: PropTypes__default["default"].string,
+
+  /**
+   * Specify a string that is displayed when the Code Snippet text is more
+   * than 15 lines
+   */
+  showMoreText: PropTypes__default["default"].string,
+
+  /**
+   * Provide the type of Code Snippet
+   */
+  type: PropTypes__default["default"].oneOf(['single', 'inline', 'multi']),
+
+  /**
+   * Specify whether or not to wrap the text.
+   */
+  wrapText: PropTypes__default["default"].bool
+};
+CodeSnippet.defaultProps = {
+  ['aria-label']: 'Copy to clipboard',
+  type: 'single',
+  showMoreText: 'Show more',
+  showLessText: 'Show less',
+  wrapText: false
+};
 
 exports["default"] = CodeSnippet;