carbon-react 154.3.2 → 154.3.3-beta.1

package/lib/components/sidebar/sidebar.component.js

@@ -1,119 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Sidebar = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _modal = _interopRequireDefault(require("../modal"));
-var _sidebar = require("./sidebar.style");
-var _iconButton = _interopRequireDefault(require("../icon-button"));
-var _icon = _interopRequireDefault(require("../icon"));
-var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap"));
-var _sidebarHeader = _interopRequireDefault(require("./__internal__/sidebar-header"));
-var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
-var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
-var _utils = require("../../style/utils");
-var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
-var _sidebar2 = _interopRequireDefault(require("./__internal__/sidebar.context"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-// TODO FE-5408 will investigate why React.RefObject<T> produces a failed prop type when current = null
-
-const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
-  "aria-describedby": ariaDescribedBy,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  "data-element": dataElement = "sidebar",
-  "data-role": dataRole,
-  open,
-  bespokeFocusTrap,
-  disableAutoFocus = false,
-  disableEscKey = false,
-  enableBackgroundUI = false,
-  header,
-  position = "right",
-  size = "medium",
-  children,
-  onCancel,
-  role = "dialog",
-  focusFirstElement,
-  focusableContainers,
-  focusableSelectors,
-  width,
-  headerPadding = {},
-  topModalOverride,
-  restoreFocusOnClose = true,
-  className,
-  ...rest
-}, ref) => {
-  const locale = (0, _useLocale.default)();
-  const {
-    current: headerId
-  } = (0, _react.useRef)((0, _guid.default)());
-  const sidebarRef = (0, _react.useRef)(null);
-  const setRefs = (0, _react.useCallback)(reference => {
-    sidebarRef.current = reference;
-    if (!ref) return;
-    if (typeof ref === "object") ref.current = reference;
-    if (typeof ref === "function") ref(reference);
-  }, [ref]);
-  const isTopModal = (0, _useModalAria.default)(sidebarRef);
-  const closeIcon = () => {
-    if (!onCancel) return null;
-    return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-      "aria-label": locale.sidebar.ariaLabels.close(),
-      onClick: onCancel,
-      "data-element": "close"
-    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-      type: "close"
-    }));
-  };
-  const sidebar = /*#__PURE__*/_react.default.createElement(_sidebar.StyledSidebar, {
-    "aria-modal": !enableBackgroundUI && isTopModal,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-labelledby": !ariaLabelledBy && !ariaLabel ? headerId : ariaLabelledBy,
-    "data-component": "sidebar",
-    "data-element": dataElement,
-    "data-role": dataRole,
-    ref: setRefs,
-    position: position,
-    size: size,
-    onCancel: onCancel,
-    role: role,
-    width: width,
-    className: className
-  }, header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, _extends({
-    closeIcon: closeIcon()
-  }, headerPadding, {
-    id: headerId
-  }), header), !header && closeIcon(), /*#__PURE__*/_react.default.createElement(_sidebar.StyledSidebarContent, _extends({
-    "data-element": "sidebar-content",
-    "data-role": "sidebar-content"
-  }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_sidebar2.default.Provider, {
-    value: {
-      isInSidebar: true
-    }
-  }, children)));
-  return /*#__PURE__*/_react.default.createElement(_modal.default, {
-    open: open,
-    onCancel: onCancel,
-    disableEscKey: disableEscKey,
-    enableBackgroundUI: enableBackgroundUI,
-    topModalOverride: topModalOverride,
-    restoreFocusOnClose: restoreFocusOnClose
-  }, enableBackgroundUI ? sidebar : /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
-    wrapperRef: sidebarRef,
-    isOpen: open,
-    additionalWrapperRefs: focusableContainers,
-    focusableSelectors: focusableSelectors,
-    focusFirstElement: focusFirstElement,
-    autoFocus: !disableAutoFocus,
-    bespokeTrap: bespokeFocusTrap
-  }, sidebar));
-});
-Sidebar.displayName = "Sidebar";
-var _default = exports.default = Sidebar;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../modal/modal.component.js"),a=require("./sidebar.style.js"),o=require("../icon-button/icon-button.component.js"),n=require("../icon/icon.component.js"),l=require("../../__internal__/focus-trap/focus-trap.component.js"),s=require("./__internal__/sidebar-header/sidebar-header.component.js"),i=require("../../__internal__/utils/helpers/guid/index.js"),c=require("../../hooks/__internal__/useLocale/useLocale.js"),d=require("../../style/utils/filter-styled-system-padding-props.js"),u=require("../../hooks/__internal__/useModalAria/useModalAria.js"),b=require("./__internal__/sidebar.context.js");function p(e){return e&&e.__esModule?e:{default:e}}function f(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function y(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},a=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),a.forEach((function(r){f(e,r,t[r])}))}return e}function j(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const O=p(r).default.forwardRef(((p,f)=>{var{"aria-describedby":O,"aria-label":m,"aria-labelledby":h,"data-element":_="sidebar","data-role":g,open:P,bespokeFocusTrap:v,disableAutoFocus:w=!1,disableEscKey:x=!1,enableBackgroundUI:S=!1,header:k,position:q="right",size:C="medium",children:F,onCancel:E,role:M="dialog",focusFirstElement:I,focusableContainers:R,focusableSelectors:A,width:D,headerPadding:N={},topModalOverride:z,restoreFocusOnClose:B=!0,className:K}=p,L=function(e,r){if(null==e)return{};var t,a,o=function(e,r){if(null==e)return{};var t,a,o={},n=Object.keys(e);for(a=0;a<n.length;a++)t=n[a],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a<n.length;a++)t=n[a],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(p,["aria-describedby","aria-label","aria-labelledby","data-element","data-role","open","bespokeFocusTrap","disableAutoFocus","disableEscKey","enableBackgroundUI","header","position","size","children","onCancel","role","focusFirstElement","focusableContainers","focusableSelectors","width","headerPadding","topModalOverride","restoreFocusOnClose","className"]);const T=c.default(),{current:U}=r.useRef(i.default()),W=r.useRef(null),G=r.useCallback((e=>{W.current=e,f&&("object"==typeof f&&(f.current=e),"function"==typeof f&&f(e))}),[f]),H=u.default(W),J=()=>E?e.jsx(o.default,{"aria-label":T.sidebar.ariaLabels.close(),onClick:E,"data-element":"close",children:e.jsx(n.default,{type:"close"})}):null,Q=e.jsxs(a.StyledSidebar,{"aria-modal":!S&&H,"aria-describedby":O,"aria-label":m,"aria-labelledby":h||m?h:U,"data-component":"sidebar","data-element":_,"data-role":g,ref:G,position:q,size:C,onCancel:E,role:M,width:D,className:K,children:[k&&e.jsx(s.default,j(y({closeIcon:J()},N),{id:U,children:k})),!k&&J(),e.jsx(a.StyledSidebarContent,j(y({"data-element":"sidebar-content","data-role":"sidebar-content"},d.default(L)),{children:e.jsx(b.default.Provider,{value:{isInSidebar:!0},children:F})}))]});return e.jsx(t.default,{open:P,onCancel:E,disableEscKey:x,enableBackgroundUI:S,topModalOverride:z,restoreFocusOnClose:B,children:S?Q:e.jsx(l.default,{wrapperRef:W,isOpen:P,additionalWrapperRefs:R,focusableSelectors:A,focusFirstElement:I,autoFocus:!w,bespokeTrap:v,children:Q})})}));O.displayName="Sidebar",exports.Sidebar=O,exports.default=O;

package/lib/components/sidebar/sidebar.config.js

@@ -1,17 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SIDEBAR_SIZES_CSS = exports.SIDEBAR_SIZES = exports.SIDEBAR_ALIGNMENTS = void 0;
-const SIDEBAR_SIZES_CSS = exports.SIDEBAR_SIZES_CSS = {
-  "extra-small": "214px",
-  small: "314px",
-  "medium-small": "414px",
-  medium: "514px",
-  "medium-large": "614px",
-  large: "714px",
-  "extra-large": "814px"
-};
-const SIDEBAR_SIZES = exports.SIDEBAR_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
-const SIDEBAR_ALIGNMENTS = exports.SIDEBAR_ALIGNMENTS = ["left", "right"];
+"use strict";exports.SIDEBAR_ALIGNMENTS=["left","right"],exports.SIDEBAR_SIZES=["extra-small","small","medium-small","medium","medium-large","large","extra-large"],exports.SIDEBAR_SIZES_CSS={"extra-small":"214px",small:"314px","medium-small":"414px",medium:"514px","medium-large":"614px",large:"714px","extra-large":"814px"};

package/lib/components/sidebar/sidebar.style.js

@@ -1,87 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledSidebarContent = exports.StyledSidebar = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _styledSystem = require("styled-system");
-var _elementSizing = _interopRequireDefault(require("../../style/utils/element-sizing"));
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
-var _sidebar = require("./sidebar.config");
-var _form = require("../form/form.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledSidebar = exports.StyledSidebar = _styledComponents.default.div`
-  // prevents outline being added in safari
-  :focus {
-    outline: none;
-  }
-
-  ${({
-  onCancel,
-  position,
-  size,
-  theme,
-  width
-}) => (0, _styledComponents.css)`
-    background: var(--colorsUtilityMajor025);
-    border-radius: 1px;
-    bottom: 0;
-    position: fixed;
-    display: flex;
-    flex-direction: column;
-    top: 0;
-    z-index: ${theme.zIndex.fullScreenModal};
-    max-width: 100vw;
-
-    ${!width && size && (0, _styledComponents.css)`
-      width: ${_sidebar.SIDEBAR_SIZES_CSS[size]};
-    `}
-    ${width && (0, _elementSizing.default)({
-  width
-})}
-
-    ${position && (0, _styledComponents.css)`
-      box-shadow: var(--boxShadow300);
-      ${position}: 0;
-    `}
-
-    ${onCancel && (0, _styledComponents.css)`
-      > ${_iconButton.default}:first-of-type {
-        position: absolute;
-        z-index: 1;
-        right: 25px;
-        top: 25px;
-      }
-    `}
-  `}
-`;
-const StyledSidebarContent = exports.StyledSidebarContent = _styledComponents.default.div`
-  box-sizing: border-box;
-  display: block;
-  overflow-y: auto;
-  flex-grow: 1;
-
-  padding: var(--spacing300) var(--spacing400) var(--spacing400);
-  ${_styledSystem.padding}
-
-  &:has(${_form.StyledForm}.sticky) {
-    display: flex;
-    flex-direction: column;
-    overflow-y: hidden;
-    padding: 0;
-
-    ${_form.StyledForm}.sticky {
-      ${_form.StyledFormContent} {
-        padding: var(--spacing300) var(--spacing400) var(--spacing400);
-        ${_styledSystem.padding}
-      }
-    }
-  }
-`;
-StyledSidebar.defaultProps = {
-  theme: _base.default
-};
+"use strict";var e=require("styled-components"),i=require("styled-system"),t=require("../../style/utils/element-sizing.js"),o=require("../../style/themes/base/index.js"),s=require("../icon-button/icon-button.style.js"),d=require("./sidebar.config.js"),r=require("../form/form.style.js");function n(e){return e&&e.__esModule?e:{default:e}}var a=n(e);const l=a.default.div.withConfig({displayName:"sidebar.style__StyledSidebar",componentId:"sc-ecf3e9f9-0"})([":focus{outline:none;}",""],(({onCancel:i,position:o,size:r,theme:n,width:a})=>e.css(["background:var(--colorsUtilityMajor025);border-radius:1px;bottom:0;position:fixed;display:flex;flex-direction:column;top:0;z-index:",";max-width:100vw;"," "," "," ",""],n.zIndex.fullScreenModal,!a&&r&&e.css(["width:",";"],d.SIDEBAR_SIZES_CSS[r]),a&&t.default({width:a}),o&&e.css(["box-shadow:var(--boxShadow300);",":0;"],o),i&&e.css(["> ",":first-of-type{position:absolute;z-index:1;right:25px;top:25px;}"],s.default)))),c=a.default.div.withConfig({displayName:"sidebar.style__StyledSidebarContent",componentId:"sc-ecf3e9f9-1"})(["box-sizing:border-box;display:block;overflow-y:auto;flex-grow:1;padding:var(--spacing300) var(--spacing400) var(--spacing400);"," &:has(",".sticky){display:flex;flex-direction:column;overflow-y:hidden;padding:0;",".sticky{","{padding:var(--spacing300) var(--spacing400) var(--spacing400);","}}}"],i.padding,r.StyledForm,r.StyledForm,r.StyledFormContent,i.padding);l.defaultProps={theme:o.default},exports.StyledSidebar=l,exports.StyledSidebarContent=c;

package/lib/components/simple-color-picker/index.js

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "SimpleColor", {
-  enumerable: true,
-  get: function () {
-    return _simpleColor.default;
-  }
-});
-Object.defineProperty(exports, "SimpleColorPicker", {
-  enumerable: true,
-  get: function () {
-    return _simpleColorPicker.default;
-  }
-});
-var _simpleColorPicker = _interopRequireDefault(require("./simple-color-picker.component"));
-var _simpleColor = _interopRequireDefault(require("./simple-color"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+"use strict";var o=require("./simple-color-picker.component.js"),e=require("./simple-color/simple-color.component.js");exports.SimpleColorPicker=o.SimpleColorPicker,exports.SimpleColor=e.SimpleColor;

package/lib/components/simple-color-picker/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../../../esm/components/simple-color-picker/index.js",
   "main": "./index.js",
+  "module": "../../../esm/components/simple-color-picker/index.js",
   "types": "./index.d.ts"
 }

package/lib/components/simple-color-picker/simple-color/index.js

@@ -1,13 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _simpleColor.default;
-  }
-});
-var _simpleColor = _interopRequireDefault(require("./simple-color.component"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./simple-color.component.js");exports.default=e.SimpleColor;

package/lib/components/simple-color-picker/simple-color/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../../../../esm/components/simple-color-picker/simple-color/index.js",
   "main": "./index.js",
+  "module": "../../../esm/components/simple-color-picker/simple-color/index.js",
   "types": "./index.d.ts"
 }

package/lib/components/simple-color-picker/simple-color/simple-color.component.js

@@ -1,53 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SimpleColor = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
-var _simpleColor = require("./simple-color.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const SimpleColor = exports.SimpleColor = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const {
-    onChange,
-    onBlur,
-    onMouseDown,
-    value,
-    name,
-    checked = false,
-    id,
-    defaultChecked,
-    className,
-    ...rest
-  } = props;
-  const {
-    current: inputId
-  } = (0, _react.useRef)(id || (0, _guid.default)());
-  return /*#__PURE__*/_react.default.createElement(_simpleColor.StyledSimpleColor, _extends({
-    className: className
-  }, (0, _tags.default)("simple-color", props)), /*#__PURE__*/_react.default.createElement(_simpleColor.StyledSimpleColorInput, _extends({
-    onChange: onChange,
-    onBlur: onBlur,
-    onMouseDown: onMouseDown,
-    checked: checked,
-    name: name,
-    type: "radio",
-    role: "radio",
-    value: value,
-    ref: ref,
-    id: inputId,
-    defaultChecked: defaultChecked
-  }, rest)), /*#__PURE__*/_react.default.createElement(_simpleColor.StyledColorSampleBox, {
-    color: value
-  }, checked && /*#__PURE__*/_react.default.createElement(_simpleColor.StyledTickIcon, {
-    color: value,
-    type: "tick"
-  })));
-});
-SimpleColor.displayName = "SimpleColor";
-var _default = exports.default = SimpleColor;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../../__internal__/utils/helpers/guid/index.js"),o=require("../../../__internal__/utils/helpers/tags/tags.js"),n=require("./simple-color.style.js");function l(e){return e&&e.__esModule?e:{default:e}}function c(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){c(e,r,t[r])}))}return e}const i=l(r).default.forwardRef(((l,c)=>{const{onChange:i,onBlur:a,onMouseDown:s,value:p,name:f,checked:d=!1,id:y,defaultChecked:O,className:b}=l,j=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},l=Object.keys(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(l,["onChange","onBlur","onMouseDown","value","name","checked","id","defaultChecked","className"]),{current:m}=r.useRef(y||t.default());return e.jsxs(n.StyledSimpleColor,(g=u({className:b},o.default("simple-color",l)),h=null!=(h={children:[e.jsx(n.StyledSimpleColorInput,u({onChange:i,onBlur:a,onMouseDown:s,checked:d,name:f,type:"radio",role:"radio",value:p,ref:c,id:m,defaultChecked:O},j)),e.jsx(n.StyledColorSampleBox,{color:p,children:d&&e.jsx(n.StyledTickIcon,{color:p,type:"tick"})})]})?h:{},Object.getOwnPropertyDescriptors?Object.defineProperties(g,Object.getOwnPropertyDescriptors(h)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(h)).forEach((function(e){Object.defineProperty(g,e,Object.getOwnPropertyDescriptor(h,e))})),g));var g,h}));i.displayName="SimpleColor",exports.SimpleColor=i,exports.default=i;

package/lib/components/simple-color-picker/simple-color/simple-color.style.js

@@ -1,91 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledTickIcon = exports.StyledSimpleColorInput = exports.StyledSimpleColor = exports.StyledColorSampleBox = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _input = require("../../../__internal__/input");
-var _checkerBoard = _interopRequireDefault(require("./checker-board.svg"));
-var _icon = _interopRequireDefault(require("../../icon"));
-var _getRgbValues = _interopRequireDefault(require("../../../style/utils/get-rgb-values"));
-var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledSimpleColor = exports.StyledSimpleColor = _styledComponents.default.div`
-  width: var(--sizing700);
-  height: var(--sizing700);
-  margin-right: 2px;
-  margin-bottom: 2px;
-
-  &:hover {
-    cursor: pointer;
-  }
-`;
-const StyledColorSampleBox = exports.StyledColorSampleBox = _styledComponents.default.div`
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  ${({
-  color
-}) => color !== "transparent" && (0, _styledComponents.css)`
-      background-color: ${color};
-    `}
-
-  ${({
-  color
-}) => color === "transparent" && (0, _styledComponents.css)`
-      background-color: #eeeeee;
-      background-image: url(${_checkerBoard.default});
-      background-size: 14px 14px;
-      background-position: -2px -2px;
-    `}
-`;
-const StyledSimpleColorInput = exports.StyledSimpleColorInput = (0, _styledComponents.default)(_input.Input)`
-  position: absolute;
-  opacity: 0;
-  height: var(--sizing700);
-  width: var(--sizing700);
-  margin: 0;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &:disabled:hover {
-    cursor: not-allowed;
-  }
-
-  &:focus + ${StyledColorSampleBox} {
-    ${(0, _addFocusStyling.default)(true)}
-  }
-`;
-const getIconColor = color => {
-  const rgbValues = (0, _getRgbValues.default)(color);
-  const [r, g, b] = rgbValues;
-  // color contrast calculating formula as per W3 suggestions
-  const redMultiplier = 299,
-    greenMultiplier = 587,
-    blueMultiplier = 114;
-  const contrast = (Math.round(r * redMultiplier) + Math.round(g * greenMultiplier) + Math.round(b * blueMultiplier)) / 1000;
-  if (contrast < 128) return "var(--colorsUtilityYang100)";
-  return "var(--colorsUtilityYin090)";
-};
-const StyledTickIcon = exports.StyledTickIcon = (0, _styledComponents.default)(_icon.default)`
-  height: 20px;
-  width: 20px;
-  pointer-events: none;
-  display: block;
-
-  &::before {
-    font-size: 20px;
-    color: ${({
-  color
-}) => getIconColor(color)};
-  }
-`;
+"use strict";var e=require("styled-components"),o=require("../../../__internal__/input/input.component.js");require("react/jsx-runtime"),require("react"),require("../../../__internal__/input/input-presentation.style.js"),require("../../carbon-provider/__internal__/new-validation.context.js");var t=require("./checker-board.svg"),r=require("../../icon/icon.component.js"),i=require("../../../style/utils/get-rgb-values.js"),n=require("../../../style/utils/add-focus-styling.js");function l(e){return e&&e.__esModule?e:{default:e}}var s=l(e),a=l(t);const c=s.default.div.withConfig({displayName:"simple-color.style__StyledSimpleColor",componentId:"sc-88573bbe-0"})(["width:var(--sizing700);height:var(--sizing700);margin-right:2px;margin-bottom:2px;&:hover{cursor:pointer;}"]),d=s.default.div.withConfig({displayName:"simple-color.style__StyledColorSampleBox",componentId:"sc-88573bbe-1"})(["height:100%;width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;"," ",""],(({color:o})=>"transparent"!==o&&e.css(["background-color:",";"],o)),(({color:o})=>"transparent"===o&&e.css(["background-color:#eeeeee;background-image:url(",");background-size:14px 14px;background-position:-2px -2px;"],a.default))),p=s.default(o.default).withConfig({displayName:"simple-color.style__StyledSimpleColorInput",componentId:"sc-88573bbe-2"})(["position:absolute;opacity:0;height:var(--sizing700);width:var(--sizing700);margin:0;&:hover{cursor:pointer;}&:disabled:hover{cursor:not-allowed;}&:focus + ","{","}"],d,n.default(!0)),u=s.default(r.default).withConfig({displayName:"simple-color.style__StyledTickIcon",componentId:"sc-88573bbe-3"})(["height:20px;width:20px;pointer-events:none;display:block;&::before{font-size:20px;color:",";}"],(({color:e})=>(e=>{const o=i.default(e),[t,r,n]=o;return(Math.round(299*t)+Math.round(587*r)+Math.round(114*n))/1e3<128?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)"})(e)));exports.StyledColorSampleBox=d,exports.StyledSimpleColor=c,exports.StyledSimpleColorInput=p,exports.StyledTickIcon=u;

package/lib/components/simple-color-picker/simple-color-picker.component.js

@@ -1,195 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SimpleColorPicker = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _invariant = _interopRequireDefault(require("invariant"));
-var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
-var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
-var _fieldset = _interopRequireDefault(require("../../__internal__/fieldset"));
-var _simpleColor = _interopRequireDefault(require("./simple-color"));
-var _radioButtonMapper = _interopRequireDefault(require("../../__internal__/radio-button-mapper/radio-button-mapper.component"));
-var _simpleColorPicker = require("./simple-color-picker.style");
-var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.component"));
-var _inputBehaviour = require("../../__internal__/input-behaviour");
-var _utils = require("../../style/utils");
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-let deprecateUncontrolledWarnTriggered = false;
-const SimpleColorPicker = exports.SimpleColorPicker = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const {
-    children,
-    error,
-    warning,
-    info,
-    name,
-    legend,
-    onChange,
-    onBlur,
-    onKeyDown,
-    value,
-    maxWidth = 300,
-    childWidth = 58,
-    validationOnLegend,
-    required,
-    ...rest
-  } = props;
-  const hasProperChildren = (0, _react.useMemo)(() => {
-    const invalidChild = _react.default.Children.toArray(children).find(child => {
-      return typeof child === "string" || /*#__PURE__*/_react.default.isValidElement(child) && child.type.displayName !== "SimpleColor";
-    });
-    return !invalidChild;
-  }, [children]);
-  !hasProperChildren ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `SimpleColorPicker accepts only children of type \`${_simpleColor.default.displayName}\`.`) : (0, _invariant.default)(false) : void 0;
-  const filteredChildren = (0, _react.useMemo)(() => _react.default.Children.toArray(children).filter(child => /*#__PURE__*/_react.default.isValidElement(child)), [children]);
-  const internalRef = (0, _react.useRef)(null);
-  const [focusedElement, setFocusedElement] = (0, _react.useState)(null);
-  const itemsPerRow = Math.floor(+maxWidth / +childWidth);
-  const rowCount = Math.ceil(filteredChildren?.length / itemsPerRow);
-  let blankSlots = itemsPerRow * rowCount - filteredChildren?.length;
-  let currentRow = 1;
-  let loopCounter = 1;
-  const gridItemRefs = (0, _react.useRef)([]);
-  const navigationGrid = filteredChildren.map((child, index) => {
-    const allowUp = currentRow !== 1;
-    let allowDown = false;
-    if (currentRow + 1 === rowCount && blankSlots - itemsPerRow < 0) {
-      allowDown = true;
-      blankSlots += 1;
-    } else if (currentRow + 1 !== rowCount && currentRow !== rowCount && rowCount > 1) {
-      allowDown = true;
-    }
-    if (loopCounter === itemsPerRow) {
-      loopCounter = 0;
-      currentRow += 1;
-    }
-    let upItem;
-    if (allowUp) {
-      upItem = index - itemsPerRow;
-    }
-    let downItem;
-    if (allowDown) {
-      downItem = itemsPerRow + index;
-    }
-    const childProps = {
-      ref: element => {
-        gridItemRefs.current[index] = element;
-      },
-      "data-up": allowUp,
-      "data-down": allowDown,
-      "data-item-up": upItem,
-      "data-item-down": downItem,
-      required
-    };
-    loopCounter += 1;
-    return /*#__PURE__*/_react.default.cloneElement(child, childProps);
-  });
-  (0, _react.useImperativeHandle)(ref, () => ({
-    gridItemRefs: gridItemRefs.current
-  }), [gridItemRefs]);
-  const getElementPosition = (0, _react.useCallback)(target => {
-    return navigationGrid.findIndex(element => {
-      return target.getAttribute("value") === element.props.value;
-    });
-  }, [navigationGrid]);
-  const onKeyDownHandler = (0, _react.useCallback)(e => {
-    if (onKeyDown) {
-      onKeyDown(e);
-    }
-    const arrowKeys = [_events.default.isLeftKey(e), _events.default.isUpKey(e), _events.default.isRightKey(e), _events.default.isDownKey(e)];
-    if (!arrowKeys.includes(true)) return;
-    e.preventDefault();
-    let itemIndex = null;
-    const target = e.target;
-    if (_events.default.isUpKey(e)) {
-      if (target.getAttribute("data-up") !== "true") return;
-      itemIndex = +target.getAttribute("data-item-up");
-    } else if (_events.default.isDownKey(e)) {
-      if (target.getAttribute("data-down") !== "true") return;
-      itemIndex = +target.getAttribute("data-item-down");
-    }
-    if (_events.default.isLeftKey(e) || _events.default.isRightKey(e)) {
-      if (_events.default.isLeftKey(e)) {
-        itemIndex = getElementPosition(target) - 1;
-      } else {
-        itemIndex = getElementPosition(target) + 1;
-      }
-      if (itemIndex < 0) {
-        itemIndex = navigationGrid.length - 1;
-      } else if (itemIndex > navigationGrid.length - 1) {
-        itemIndex = 0;
-      }
-    }
-
-    /* istanbul ignore else */
-    if (itemIndex !== null) {
-      const item = gridItemRefs.current[itemIndex];
-      item?.focus();
-      item?.click();
-    }
-  }, [onKeyDown, navigationGrid, getElementPosition]);
-  const handleOnBlur = ev => {
-    ev.preventDefault();
-    setTimeout(() => {
-      const hasBlurred = !gridItemRefs?.current?.find(colorRef => colorRef === document.activeElement);
-      /* istanbul ignore else */
-      if (onBlur && hasBlurred) {
-        onBlur(ev);
-      }
-    }, 5);
-  };
-  const handleOnMouseDown = ev => {
-    // If the mousedown event occurred on the currently-focused <SimpleColor>
-    if (focusedElement !== null && focusedElement === ev.target) {
-      ev.preventDefault();
-
-      // If a different <SimpleColor> is currently focused
-    } else if (focusedElement !== null) {
-      ev.preventDefault();
-      setFocusedElement(ev.target);
-
-      // If no <SimpleColor> is currently focused
-    } else {
-      setFocusedElement(ev.target);
-    }
-  };
-  const validationProps = {
-    error,
-    warning,
-    info
-  };
-  if (!deprecateUncontrolledWarnTriggered && !onChange) {
-    deprecateUncontrolledWarnTriggered = true;
-    _logger.default.deprecate("Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
-  return /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
-    role: "radiogroup",
-    legend: legend,
-    isRequired: required
-  }, validationOnLegend && validationProps, (0, _tags.default)("simple-color-picker", props), (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_simpleColorPicker.StyledContent, null, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupContext.Consumer, null, ({
-    onMouseEnter,
-    onMouseLeave
-  }) => /*#__PURE__*/_react.default.createElement(_simpleColorPicker.StyledColorOptions, _extends({
-    maxWidth: maxWidth,
-    childWidth: childWidth,
-    ref: internalRef,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, validationProps), /*#__PURE__*/_react.default.createElement(_radioButtonMapper.default, {
-    name: name,
-    value: value,
-    onChange: onChange,
-    onMouseDown: handleOnMouseDown,
-    onKeyDown: onKeyDownHandler,
-    onBlur: handleOnBlur
-  }, navigationGrid))), !validationOnLegend && /*#__PURE__*/_react.default.createElement(_validationIcon.default, _extends({}, validationProps, {
-    tooltipFlipOverrides: ["top", "bottom"]
-  }))));
-});
-SimpleColorPicker.displayName = "SimpleColorPicker";
-var _default = exports.default = SimpleColorPicker;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("invariant"),n=require("../../__internal__/utils/helpers/events/events.js"),l=require("../../__internal__/utils/helpers/tags/tags.js"),i=require("../../__internal__/fieldset/fieldset.component.js"),o=require("./simple-color/simple-color.component.js"),u=require("../../__internal__/radio-button-mapper/radio-button-mapper.component.js"),a=require("./simple-color-picker.style.js"),s=require("../../__internal__/validations/validation-icon.component.js"),d=require("../../__internal__/input-behaviour/input-group-behaviour.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var c=require("../../style/utils/filter-styled-system-margin-props.js"),p=require("../../__internal__/utils/logger/index.js");function f(e){return e&&e.__esModule?e:{default:e}}var m=f(t),y=f(r);function g(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){g(e,t,r[t])}))}return e}function v(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let h=!1;const j=m.default.forwardRef(((r,f)=>{const{children:g,error:j,warning:O,info:_,name:w,legend:P,onChange:q,onBlur:x,onKeyDown:C,value:S,maxWidth:D=300,childWidth:k=58,validationOnLegend:K,required:M}=r,E=function(e,t){if(null==e)return{};var r,n,l=function(e,t){if(null==e)return{};var r,n,l={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(l[r]=e[r]);return l}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}(r,["children","error","warning","info","name","legend","onChange","onBlur","onKeyDown","value","maxWidth","childWidth","validationOnLegend","required"]),A=t.useMemo((()=>!m.default.Children.toArray(g).find((e=>"string"==typeof e||m.default.isValidElement(e)&&"SimpleColor"!==e.type.displayName))),[g]);y.default(A,`SimpleColorPicker accepts only children of type \`${o.SimpleColor.displayName}\`.`);const L=t.useMemo((()=>m.default.Children.toArray(g).filter((e=>m.default.isValidElement(e)))),[g]),R=t.useRef(null),[I,W]=t.useState(null),B=Math.floor(+D/+k),N=Math.ceil((null==L?void 0:L.length)/B);let U=B*N-(null==L?void 0:L.length),V=1,F=1;const G=t.useRef([]),H=L.map(((e,t)=>{const r=1!==V;let n,l,i=!1;V+1===N&&U-B<0?(i=!0,U+=1):V+1!==N&&V!==N&&N>1&&(i=!0),F===B&&(F=0,V+=1),r&&(n=t-B),i&&(l=B+t);const o={ref:e=>{G.current[t]=e},"data-up":r,"data-down":i,"data-item-up":n,"data-item-down":l,required:M};return F+=1,m.default.cloneElement(e,o)}));t.useImperativeHandle(f,(()=>({gridItemRefs:G.current})),[G]);const T=t.useCallback((e=>H.findIndex((t=>e.getAttribute("value")===t.props.value))),[H]),$=t.useCallback((e=>{if(C&&C(e),![n.default.isLeftKey(e),n.default.isUpKey(e),n.default.isRightKey(e),n.default.isDownKey(e)].includes(!0))return;e.preventDefault();let t=null;const r=e.target;if(n.default.isUpKey(e)){if("true"!==r.getAttribute("data-up"))return;t=+r.getAttribute("data-item-up")}else if(n.default.isDownKey(e)){if("true"!==r.getAttribute("data-down"))return;t=+r.getAttribute("data-item-down")}if((n.default.isLeftKey(e)||n.default.isRightKey(e))&&(t=n.default.isLeftKey(e)?T(r)-1:T(r)+1,t<0?t=H.length-1:t>H.length-1&&(t=0)),null!==t){const e=G.current[t];null==e||e.focus(),null==e||e.click()}}),[C,H,T]),z=e=>{e.preventDefault(),setTimeout((()=>{var t;const r=!(null==G||null===(t=G.current)||void 0===t?void 0:t.find((e=>e===document.activeElement)));x&&r&&x(e)}),5)},J=e=>{null!==I&&I===e.target?e.preventDefault():null!==I?(e.preventDefault(),W(e.target)):W(e.target)},Q={error:j,warning:O,info:_};return h||q||(h=!0,p.default.deprecate("Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.")),e.jsx(i.default,v(b({role:"radiogroup",legend:P,isRequired:M},K&&Q,l.default("simple-color-picker",r),c.default(E)),{children:e.jsxs(a.StyledContent,{children:[e.jsx(d.InputGroupContext.Consumer,{children:({onMouseEnter:t,onMouseLeave:r})=>e.jsx(a.StyledColorOptions,v(b({maxWidth:D,childWidth:k,ref:R,onMouseEnter:t,onMouseLeave:r},Q),{children:e.jsx(u.default,{name:w,value:S,onChange:q,onMouseDown:J,onKeyDown:$,onBlur:z,children:H})}))}),!K&&e.jsx(s.ValidationIcon,v(b({},Q),{tooltipFlipOverrides:["top","bottom"]}))]})}))}));j.displayName="SimpleColorPicker",exports.SimpleColorPicker=j,exports.default=j;