carbon-react 104.34.0 → 104.36.0

package/esm/components/select/option/option.component.js

@@ -0,0 +1,101 @@
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import StyledOption from "./option.style";
+import SelectListContext from "../__internal__/select-list-context";
+const Option = /*#__PURE__*/React.forwardRef(({
+  text,
+  children,
+  onSelect,
+  value,
+  id,
+  index,
+  hidden,
+  onClick
+}, ref) => {
+  const selectListContext = useContext(SelectListContext);
+  let isSelected = selectListContext.currentOptionsListIndex === index;
+
+  if (selectListContext.multiselectValues) {
+    isSelected = selectListContext.multiselectValues.includes(value);
+  }
+
+  function handleClick() {
+    if (!onClick) {
+      onSelect({
+        text,
+        value,
+        id
+      });
+    } else {
+      onSelect();
+      onClick({
+        target: {
+          text,
+          value,
+          id
+        }
+      });
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(StyledOption, {
+    id: id,
+    ref: ref,
+    "aria-selected": isSelected,
+    "data-component": "option",
+    onClick: handleClick,
+    isHighlighted: selectListContext.currentOptionsListIndex === index,
+    role: "option",
+    hidden: hidden
+  }, children || text);
+});
+Option.propTypes = {
+  /** The option's visible text, displayed within Textbox of Select, and used for filtering */
+  text: PropTypes.string.isRequired,
+
+  /** Optional: alternative rendered content, displayed within SelectList of Select (eg: an icon, an image, etc) */
+  children: PropTypes.node,
+
+  /** The option's invisible internal value */
+  value: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+
+  /**
+   * @private
+   * @ignore
+   * Component id (prop added by the SelectList component)
+   */
+  id: PropTypes.string,
+
+  /**
+   * @private
+   * @ignore
+   * Callback to return value when the element is clicked (prop added by the SelectList component) */
+  onClick: PropTypes.func,
+
+  /**
+   * @private
+   * @ignore
+   * Callback to return value when the element is selected (prop added by the SelectList component) */
+  onSelect: PropTypes.func,
+
+  /**
+   * @private
+   * @ignore
+   * Position of the element in the list */
+  index: PropTypes.number,
+
+  /**
+   * @private
+   * @ignore
+   * True when option should be hidden from the view (prop added by the SelectList component) */
+  hidden: PropTypes.bool,
+
+  /** MultiSelect only - custom Pill border color - provide any color from palette or any valid css color value. */
+  // eslint-disable-next-line react/no-unused-prop-types
+  borderColor: PropTypes.string,
+
+  /** MultiSelect only - fill Pill background with color */
+  // eslint-disable-next-line react/no-unused-prop-types
+  fill: PropTypes.bool
+};
+export default Option;

package/esm/components/select/option/option.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledOption;
+declare const StyledOption: import("styled-components").StyledComponent<"li", any, {}, never>;

package/esm/components/select/option/option.style.js

@@ -0,0 +1,29 @@
+import styled, { css } from "styled-components";
+import propTypes from "prop-types";
+const StyledOption = styled.li`
+  cursor: pointer;
+  box-sizing: border-box;
+  line-height: 16px;
+  padding: 12px 16px;
+  width: 100%;
+  user-select: none;
+
+  ${({
+  isHighlighted
+}) => isHighlighted && css`
+      background-color: var(--colorsUtilityMajor200);
+    `}
+
+  ${({
+  hidden
+}) => hidden && "display: none;"}
+
+  :hover {
+    background-color: var(--colorsUtilityMajor200);
+  }
+`;
+StyledOption.propTypes = {
+  id: propTypes.any,
+  isHighlighted: propTypes.bool
+};
+export default StyledOption;

package/esm/components/select/option-group-header/index.d.ts

@@ -0,0 +1,10 @@
+export interface OptionGroupHeaderProps {
+  /** Heading text */
+  label: string;
+  /** Any valid Carbon icon name */
+  icon?: string;
+}
+
+declare function OptionGroupHeader(props: OptionGroupHeaderProps): JSX.Element;
+
+export default OptionGroupHeader;

package/esm/components/select/option-group-header/option-group-header.component.d.ts

@@ -0,0 +1,12 @@
+export default OptionGroupHeader;
+declare function OptionGroupHeader({ label, icon }: {
+    label: any;
+    icon: any;
+}): JSX.Element;
+declare namespace OptionGroupHeader {
+    namespace propTypes {
+        const label: PropTypes.Validator<string>;
+        const icon: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/select/option-group-header/option-group-header.component.js

@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+import StyledOptionGroupHeader from "./option-group-header.style";
+import Icon from "../../icon";
+
+const OptionGroupHeader = ({
+  label,
+  icon
+}) => {
+  return /*#__PURE__*/React.createElement(StyledOptionGroupHeader, null, icon && /*#__PURE__*/React.createElement(Icon, {
+    type: icon
+  }), /*#__PURE__*/React.createElement("h4", null, label));
+};
+
+OptionGroupHeader.propTypes = {
+  /** Heading text */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
+   *
+   * Any valid Carbon icon name
+   */
+  icon: PropTypes.string
+};
+export default OptionGroupHeader;

package/esm/components/select/option-group-header/option-group-header.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledOptionGroupHeader;
+declare const StyledOptionGroupHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/select/option-group-header/option-group-header.style.js

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import StyledIcon from "../../icon/icon.style";
+const StyledOptionGroupHeader = styled.div`
+  box-sizing: border-box;
+  height: 26px;
+  margin: 16px 0 0;
+  padding-left: 16px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  h4 {
+    font-size: 12px;
+    text-transform: uppercase;
+    line-height: 18px;
+    text-align: left;
+    margin: 0;
+    color: var(--colorsUtilityYin055);
+  }
+
+  ${StyledIcon} {
+    margin-right: 4px;
+    margin-left: -5px;
+    color: var(--colorsUtilityYin055);
+
+    &:hover {
+      color: var(--colorsUtilityYin055);
+    }
+  }
+`;
+export default StyledOptionGroupHeader;

package/esm/components/select/option-row/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export interface OptionRowProps {
+  /** The option's visible text, displayed within <Textbox> of <Select> */
+  text: string;
+  /** Row content, should consist of multiple td elements */
+  children: React.ReactNode;
+  /** The option's invisible internal value */
+  value: string | Record<string, unknown>;
+}
+
+declare function OptionRow(
+  props: OptionRowProps & React.RefAttributes<HTMLTableRowElement>
+): JSX.Element;
+
+export default OptionRow;

package/esm/components/select/option-row/option-row.component.d.ts

@@ -0,0 +1,3 @@
+export default OptionRow;
+declare const OptionRow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/esm/components/select/option-row/option-row.component.js

@@ -0,0 +1,69 @@
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import StyledOptionRow from "./option-row.style";
+import SelectListContext from "../__internal__/select-list-context";
+const OptionRow = /*#__PURE__*/React.forwardRef(({
+  id,
+  text,
+  children,
+  onSelect,
+  value,
+  index,
+  hidden
+}, ref) => {
+  const handleClick = () => {
+    onSelect({
+      id,
+      text,
+      value
+    });
+  };
+
+  const selectListContext = useContext(SelectListContext);
+  return /*#__PURE__*/React.createElement(StyledOptionRow, {
+    id: id,
+    ref: ref,
+    "aria-selected": selectListContext.currentOptionsListIndex === index,
+    "data-component": "option-row",
+    onClick: handleClick,
+    isHighlighted: selectListContext.currentOptionsListIndex === index,
+    role: "option",
+    hidden: hidden
+  }, children);
+});
+OptionRow.propTypes = {
+  /** The option's visible text, displayed within Textbox of Select */
+  text: PropTypes.string.isRequired,
+
+  /** Row content, should consist of multiple `td` elements */
+  children: PropTypes.node.isRequired,
+
+  /** The option's invisible internal value */
+  value: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+
+  /**
+   * @private
+   * @ignore
+   * Component id (prop added by the SelectList component)
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * @private
+   * @ignore
+   * Callback to return value when the element is selected (prop added by the SelectList component) */
+  onSelect: PropTypes.func,
+
+  /**
+   * @private
+   * @ignore
+   * Position of the element in the list */
+  index: PropTypes.number,
+
+  /**
+   * @private
+   * @ignore
+   * True when option should be hidden from the view (prop added by the SelectList component) */
+  hidden: PropTypes.bool
+};
+export default OptionRow;

package/esm/components/select/option-row/option-row.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledOptionRow;
+declare const StyledOptionRow: import("styled-components").StyledComponent<"tr", any, {}, never>;

package/esm/components/select/option-row/option-row.style.js

@@ -0,0 +1,28 @@
+import styled, { css } from "styled-components";
+const StyledOptionRow = styled.tr`
+  cursor: pointer;
+
+  ${({
+  hidden
+}) => hidden && "display: none;"}
+
+  ${({
+  isHighlighted
+}) => isHighlighted && css`
+      background-color: var(--colorsUtilityMajor200);
+    `}
+
+  :hover {
+    background-color: var(--colorsUtilityMajor200);
+  }
+
+  td {
+    line-height: 16px;
+    padding: 12px 16px;
+
+    &:first-child {
+      font-weight: 700;
+    }
+  }
+`;
+export default StyledOptionRow;

package/esm/components/select/select-list/select-list-container.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledSelectListContainer;
+declare const StyledSelectListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/select/select-list/select-list-container.style.js

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+const StyledSelectListContainer = styled.div`
+  background-color: white;
+  box-shadow: var(--boxShadow100);
+  position: absolute;
+  ${({
+  placement
+}) => placement === "top-start" && "bottom: 0"};
+  min-width: 100%;
+  max-width: 870px;
+  height: ${({
+  height
+}) => height};
+  overflow: hidden;
+  animation: fadeIn 250ms ease-out;
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;
+export default StyledSelectListContainer;

package/esm/components/select/select-list/select-list.component.d.ts

@@ -0,0 +1,3 @@
+export default SelectList;
+declare const SelectList: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";