carbon-react/lib/components/advanced-color-picker/advanced-color-picker.component.js

A library of reusable React components for easily building user interfaces.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("./advanced-color-picker.style.js"),t=require("../simple-color-picker/simple-color-picker.component.js"),o=require("../simple-color-picker/simple-color/simple-color.component.js"),n=require("../../__internal__/utils/helpers/events/events.js");require("../../style/utils/filter-styled-system-padding-props.js");var a=require("../../style/utils/filter-styled-system-margin-props.js"),i=require("../../__internal__/utils/helpers/guid/index.js"),s=require("../../hooks/__internal__/useLocale/useLocale.js");require("../definition-list/dl.component.js");var c=require("../definition-list/dt/dt.component.js"),u=require("../definition-list/dd/dd.component.js"),d=require("../../__internal__/utils/helpers/tags/tags.js"),p=require("./advanced-color-picker-cell.style.js");function b(e,r,l){return r in e?Object.defineProperty(e,r,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[r]=l,e}const f=f=>{var{"aria-describedby":y,"aria-label":v,"aria-labelledby":j,availableColors:m,name:O,onOpen:C,onClose:g,onChange:k,onBlur:P,open:h=!1,role:x,selectedColor:_,restoreFocusOnClose:q=!0}=f,w=function(e,r){if(null==e)return{};var l,t,o=function(e,r){if(null==e)return{};var l,t,o={},n=Object.keys(e);for(t=0;t<n.length;t++)l=n[t],r.indexOf(l)>=0||(o[l]=e[l]);return o}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(t=0;t<n.length;t++)l=n[t],r.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(o[l]=e[l])}return o}(f,["aria-describedby","aria-label","aria-labelledby","availableColors","name","onOpen","onClose","onChange","onBlur","open","role","selectedColor","restoreFocusOnClose"]);const[S,D]=r.useState(),[E,K]=r.useState(null),R=r.useRef(i.default()),F=s.default(),A=r.useRef(null),L=m.map((({value:e,label:r},l)=>({value:e,label:r,getRef:()=>A.current?A.current.gridItemRefs[l]:null}))),B=()=>{var e;return(null===(e=m.find((e=>e.value===_)))||void 0===e?void 0:e.label)||_};r.useEffect((()=>{if(S||h){const e=null==L?void 0:L.find((e=>_===e.value));e&&K(e.getRef())}}),[L,_,S,h]);const I=r.useCallback(((e,r)=>{"Tab"===e.key&&(e.shiftKey?document.activeElement===r&&E&&(E.focus(),e.preventDefault()):document.activeElement===E&&(null==r||r.focus(),e.preventDefault()))}),[E]),T=r.useCallback((e=>{D(!0),C&&C(e)}),[C]),z=r.useCallback((e=>{D(!1),g&&g(e)}),[g]),H=r.useCallback((e=>{const r=null==L?void 0:L.find((r=>e.target.value===r.value));r&&K(r.getRef()),k&&k(e)}),[k,L]),M=r.useCallback((e=>{(n.default.isEnterKey(e)||n.default.isSpaceKey(e))&&(e.preventDefault(),T(e))}),[T]),W=r.useCallback((e=>{(n.default.isEnterKey(e)||n.default.isSpaceKey(e))&&(e.preventDefault(),z(e))}),[z]),G=r.useCallback((e=>{P&&P(e)}),[P]);return e.jsxs(l.StyledAdvancedColorPickerWrapper,(J=function(e){for(var r=1;r<arguments.length;r++){var l=null!=arguments[r]?arguments[r]:{},t=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),t.forEach((function(r){b(e,r,l[r])}))}return e}({m:"15px auto auto 15px"},a.default(w),d.default("advanced-color-picker",w)),N=null!=(N={children:[e.jsx(p.default,{"data-element":"color-picker-cell","aria-label":F.advancedColorPicker.ariaLabel(),"aria-describedby":R.current,onClick:T,onKeyDown:M,color:_,tabIndex:0}),e.jsxs(l.HiddenCurrentColorList,{id:R.current,"data-element":"current-color-description",children:[e.jsx(c.default,{children:F.advancedColorPicker.currentColorDescriptionTerm(B())}),e.jsx(u.default,{children:F.advancedColorPicker.currentColorAssigned(B())})]}),e.jsxs(l.DialogStyle,{"aria-describedby":y,"aria-label":v,"aria-labelledby":j,open:S||h,size:"auto",onCancel:z,bespokeFocusTrap:I,focusFirstElement:E,role:x,restoreFocusOnClose:q,children:[e.jsx(l.StyledAdvancedColorPickerPreview,{"data-element":"color-picker-preview",color:_}),e.jsx(t.SimpleColorPicker,{name:O,legend:"",onChange:H,onBlur:G,onKeyDown:W,ref:A,value:_,children:null==L?void 0:L.map((({value:r,label:l})=>e.jsx(o.SimpleColor,{value:r,"aria-label":l,id:r,checked:r===_},r)))})]})]})?N:{},Object.getOwnPropertyDescriptors?Object.defineProperties(J,Object.getOwnPropertyDescriptors(N)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);r.push.apply(r,l)}return r}(Object(N)).forEach((function(e){Object.defineProperty(J,e,Object.getOwnPropertyDescriptor(N,e))})),J));var J,N};exports.AdvancedColorPicker=f,exports.default=f;