@oracle/oraclejet-preact 21.0.0 → 21.0.1

package/amd/FormLayoutVariants.styles.css

@@ -1,65 +1,65 @@
-.FormLayoutVariants_multiVariantStyles_compound_0__18itx629 {
+.FormLayoutVariants_multiVariantStyles_compound_0__8e1oxk9 {
   --layoutLocalVars_actualColumnCount__5qy13b2: 1;
   grid-template-columns: repeat(1, minmax(0, 100%));
 }
-.FormLayoutVariants_multiVariantStyles_compound_1__18itx62a {
+.FormLayoutVariants_multiVariantStyles_compound_1__8e1oxka {
   -moz-column-count: 1;
        column-count: 1;
 }
-.FormLayoutVariants_multiVariantStyles_compound_2__18itx62b {
+.FormLayoutVariants_multiVariantStyles_compound_2__8e1oxkb {
   --layoutLocalVars_actualColumnCount__5qy13b2: var(--layoutLocalVars_maxColumnCount__5qy13b0);
   grid-template-columns: repeat(var(--layoutLocalVars_maxColumnCount__5qy13b0), minmax(0, 1fr));
 }
-.FormLayoutVariants_multiVariantStyles_compound_3__18itx62c {
+.FormLayoutVariants_multiVariantStyles_compound_3__8e1oxkc {
   -moz-column-count: var(--layoutLocalVars_maxColumnCount__5qy13b0);
        column-count: var(--layoutLocalVars_maxColumnCount__5qy13b0);
 }
 @container (min-width: 576px) {
-  .FormLayoutVariants_multiVariantStyles_compound_0__18itx629 {
+  .FormLayoutVariants_multiVariantStyles_compound_0__8e1oxk9 {
     --layoutLocalVars_actualColumnCount__5qy13b2: min(2, var(--layoutLocalVars_maxColumnCount__5qy13b0));
     grid-template-columns: repeat(min(2, var(--layoutLocalVars_maxColumnCount__5qy13b0)), minmax(0, 100%));
   }
-  .FormLayoutVariants_multiVariantStyles_compound_1__18itx62a {
+  .FormLayoutVariants_multiVariantStyles_compound_1__8e1oxka {
     -moz-column-count: min(2, var(--layoutLocalVars_maxColumnCount__5qy13b0));
          column-count: min(2, var(--layoutLocalVars_maxColumnCount__5qy13b0));
   }
 }
 @container (min-width: 864px) {
-  .FormLayoutVariants_multiVariantStyles_compound_0__18itx629 {
+  .FormLayoutVariants_multiVariantStyles_compound_0__8e1oxk9 {
     --layoutLocalVars_actualColumnCount__5qy13b2: min(3, var(--layoutLocalVars_maxColumnCount__5qy13b0));
     grid-template-columns: repeat(min(3, var(--layoutLocalVars_maxColumnCount__5qy13b0)), minmax(0, 100%));
   }
-  .FormLayoutVariants_multiVariantStyles_compound_1__18itx62a {
+  .FormLayoutVariants_multiVariantStyles_compound_1__8e1oxka {
     -moz-column-count: min(3, var(--layoutLocalVars_maxColumnCount__5qy13b0));
          column-count: min(3, var(--layoutLocalVars_maxColumnCount__5qy13b0));
   }
 }
 @container (min-width: 1152px) {
-  .FormLayoutVariants_multiVariantStyles_compound_0__18itx629 {
+  .FormLayoutVariants_multiVariantStyles_compound_0__8e1oxk9 {
     --layoutLocalVars_actualColumnCount__5qy13b2: min(4, var(--layoutLocalVars_maxColumnCount__5qy13b0));
     grid-template-columns: repeat(min(4, var(--layoutLocalVars_maxColumnCount__5qy13b0)), minmax(0, 100%));
   }
-  .FormLayoutVariants_multiVariantStyles_compound_1__18itx62a {
+  .FormLayoutVariants_multiVariantStyles_compound_1__8e1oxka {
     -moz-column-count: min(4, var(--layoutLocalVars_maxColumnCount__5qy13b0));
          column-count: min(4, var(--layoutLocalVars_maxColumnCount__5qy13b0));
   }
 }
 @container (min-width: 1440px) {
-  .FormLayoutVariants_multiVariantStyles_compound_0__18itx629 {
+  .FormLayoutVariants_multiVariantStyles_compound_0__8e1oxk9 {
     --layoutLocalVars_actualColumnCount__5qy13b2: min(5, var(--layoutLocalVars_maxColumnCount__5qy13b0));
     grid-template-columns: repeat(min(5, var(--layoutLocalVars_maxColumnCount__5qy13b0)), minmax(0, 100%));
   }
-  .FormLayoutVariants_multiVariantStyles_compound_1__18itx62a {
+  .FormLayoutVariants_multiVariantStyles_compound_1__8e1oxka {
     -moz-column-count: min(5, var(--layoutLocalVars_maxColumnCount__5qy13b0));
          column-count: min(5, var(--layoutLocalVars_maxColumnCount__5qy13b0));
   }
 }
 @container (min-width: 1728px) {
-  .FormLayoutVariants_multiVariantStyles_compound_0__18itx629 {
+  .FormLayoutVariants_multiVariantStyles_compound_0__8e1oxk9 {
     --layoutLocalVars_actualColumnCount__5qy13b2: min(6, var(--layoutLocalVars_maxColumnCount__5qy13b0));
     grid-template-columns: repeat(min(6, var(--layoutLocalVars_maxColumnCount__5qy13b0)), minmax(0, 100%));
   }
-  .FormLayoutVariants_multiVariantStyles_compound_1__18itx62a {
+  .FormLayoutVariants_multiVariantStyles_compound_1__8e1oxka {
     -moz-column-count: min(6, var(--layoutLocalVars_maxColumnCount__5qy13b0));
          column-count: min(6, var(--layoutLocalVars_maxColumnCount__5qy13b0));
   }

package/amd/FormLayoutVariants.styles2.css

@@ -1,65 +1,65 @@
-.FormLayoutVariants_multiVariantStyles_compound_0__8e1oxk9 {
+.FormLayoutVariants_multiVariantStyles_compound_0__18itx629 {
   --layoutLocalVars_actualColumnCount__5qy13b2: 1;
   grid-template-columns: repeat(1, minmax(0, 100%));
 }
-.FormLayoutVariants_multiVariantStyles_compound_1__8e1oxka {
+.FormLayoutVariants_multiVariantStyles_compound_1__18itx62a {
   -moz-column-count: 1;
        column-count: 1;
 }
-.FormLayoutVariants_multiVariantStyles_compound_2__8e1oxkb {
+.FormLayoutVariants_multiVariantStyles_compound_2__18itx62b {
   --layoutLocalVars_actualColumnCount__5qy13b2: var(--layoutLocalVars_maxColumnCount__5qy13b0);
   grid-template-columns: repeat(var(--layoutLocalVars_maxColumnCount__5qy13b0), minmax(0, 1fr));
 }
-.FormLayoutVariants_multiVariantStyles_compound_3__8e1oxkc {
+.FormLayoutVariants_multiVariantStyles_compound_3__18itx62c {
   -moz-column-count: var(--layoutLocalVars_maxColumnCount__5qy13b0);
        column-count: var(--layoutLocalVars_maxColumnCount__5qy13b0);
 }
 @container (min-width: 576px) {
-  .FormLayoutVariants_multiVariantStyles_compound_0__8e1oxk9 {
+  .FormLayoutVariants_multiVariantStyles_compound_0__18itx629 {
     --layoutLocalVars_actualColumnCount__5qy13b2: min(2, var(--layoutLocalVars_maxColumnCount__5qy13b0));
     grid-template-columns: repeat(min(2, var(--layoutLocalVars_maxColumnCount__5qy13b0)), minmax(0, 100%));
   }
-  .FormLayoutVariants_multiVariantStyles_compound_1__8e1oxka {
+  .FormLayoutVariants_multiVariantStyles_compound_1__18itx62a {
     -moz-column-count: min(2, var(--layoutLocalVars_maxColumnCount__5qy13b0));
          column-count: min(2, var(--layoutLocalVars_maxColumnCount__5qy13b0));
   }
 }
 @container (min-width: 864px) {
-  .FormLayoutVariants_multiVariantStyles_compound_0__8e1oxk9 {
+  .FormLayoutVariants_multiVariantStyles_compound_0__18itx629 {
     --layoutLocalVars_actualColumnCount__5qy13b2: min(3, var(--layoutLocalVars_maxColumnCount__5qy13b0));
     grid-template-columns: repeat(min(3, var(--layoutLocalVars_maxColumnCount__5qy13b0)), minmax(0, 100%));
   }
-  .FormLayoutVariants_multiVariantStyles_compound_1__8e1oxka {
+  .FormLayoutVariants_multiVariantStyles_compound_1__18itx62a {
     -moz-column-count: min(3, var(--layoutLocalVars_maxColumnCount__5qy13b0));
          column-count: min(3, var(--layoutLocalVars_maxColumnCount__5qy13b0));
   }
 }
 @container (min-width: 1152px) {
-  .FormLayoutVariants_multiVariantStyles_compound_0__8e1oxk9 {
+  .FormLayoutVariants_multiVariantStyles_compound_0__18itx629 {
     --layoutLocalVars_actualColumnCount__5qy13b2: min(4, var(--layoutLocalVars_maxColumnCount__5qy13b0));
     grid-template-columns: repeat(min(4, var(--layoutLocalVars_maxColumnCount__5qy13b0)), minmax(0, 100%));
   }
-  .FormLayoutVariants_multiVariantStyles_compound_1__8e1oxka {
+  .FormLayoutVariants_multiVariantStyles_compound_1__18itx62a {
     -moz-column-count: min(4, var(--layoutLocalVars_maxColumnCount__5qy13b0));
          column-count: min(4, var(--layoutLocalVars_maxColumnCount__5qy13b0));
   }
 }
 @container (min-width: 1440px) {
-  .FormLayoutVariants_multiVariantStyles_compound_0__8e1oxk9 {
+  .FormLayoutVariants_multiVariantStyles_compound_0__18itx629 {
     --layoutLocalVars_actualColumnCount__5qy13b2: min(5, var(--layoutLocalVars_maxColumnCount__5qy13b0));
     grid-template-columns: repeat(min(5, var(--layoutLocalVars_maxColumnCount__5qy13b0)), minmax(0, 100%));
   }
-  .FormLayoutVariants_multiVariantStyles_compound_1__8e1oxka {
+  .FormLayoutVariants_multiVariantStyles_compound_1__18itx62a {
     -moz-column-count: min(5, var(--layoutLocalVars_maxColumnCount__5qy13b0));
          column-count: min(5, var(--layoutLocalVars_maxColumnCount__5qy13b0));
   }
 }
 @container (min-width: 1728px) {
-  .FormLayoutVariants_multiVariantStyles_compound_0__8e1oxk9 {
+  .FormLayoutVariants_multiVariantStyles_compound_0__18itx629 {
     --layoutLocalVars_actualColumnCount__5qy13b2: min(6, var(--layoutLocalVars_maxColumnCount__5qy13b0));
     grid-template-columns: repeat(min(6, var(--layoutLocalVars_maxColumnCount__5qy13b0)), minmax(0, 100%));
   }
-  .FormLayoutVariants_multiVariantStyles_compound_1__8e1oxka {
+  .FormLayoutVariants_multiVariantStyles_compound_1__18itx62a {
     -moz-column-count: min(6, var(--layoutLocalVars_maxColumnCount__5qy13b0));
          column-count: min(6, var(--layoutLocalVars_maxColumnCount__5qy13b0));
   }

package/amd/IndentedCellLayout-dc0896ab.js

@@ -1,2 +1,2 @@
-define(['exports', 'preact/jsx-runtime', './vanilla-extract-dynamic.esm-6065bbd7', './UNSAFE_IndentedCellLayout/themes/IndentedCellLayoutContract.css', './UNSAFE_IndentedCellLayout/themes/IndentedCellLayoutStyles.css', 'module'], (function(e,t,n,d,l,s){"use strict";e.IndentedCellLayout=function({children:e,depth:s,expander:a}){return t.jsxs("span",{class:l.styles.root,style:n.assignInlineVars({[l.indentedCellLayoutLocalVars.depth]:`${s}`,[l.indentedCellLayoutLocalVars.expanderWidth]:a?"0px":d.indentedCellLayoutVars.expanderButtonWidth}),children:[a,e]})}}));
+define(['exports', 'preact/jsx-runtime', './vanilla-extract-dynamic.esm-6065bbd7', './UNSAFE_IndentedCellLayout/themes/IndentedCellLayoutContract.css', './UNSAFE_IndentedCellLayout/themes/IndentedCellLayoutStyles.css', 'module'], (function(e,t,n,l,s,d){"use strict";e.IndentedCellLayout=function({children:e,depth:d,expander:a}){return t.jsxs("span",{class:s.styles.root,style:n.assignInlineVars({[s.indentedCellLayoutLocalVars.depth]:`${d}`,[s.indentedCellLayoutLocalVars.expanderWidth]:a?"0px":l.indentedCellLayoutVars.expanderButtonWidth}),children:[a,e]})}}));
 //# sourceMappingURL=IndentedCellLayout-dc0896ab.js.map

package/amd/IndentedCellLayout-dc0896ab.js.map

@@ -1 +1 @@
-{"version":3,"file":"IndentedCellLayout-dc0896ab.js","sources":["../../src/UNSAFE_IndentedCellLayout/IndentedCellLayout.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport type { ComponentChildren } from 'preact';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { indentedCellLayoutVars } from './themes/IndentedCellLayoutContract.css';\nimport { styles, indentedCellLayoutLocalVars } from './themes/IndentedCellLayoutStyles.css';\nimport './themes/redwood/IndentedCellLayoutBaseTheme.css';\n\ntype Props = {\n  /**\n   * The contents rendered after the indentation.\n   */\n  children?: ComponentChildren;\n\n  /**\n   * The expander rendered before the contents.\n   */\n  expander?: ComponentChildren;\n\n  /**\n   * The depth of the row within the tree hierarchy.\n   */\n  depth: number;\n};\n\n/**\n * Renders hierarchical collection indentation.\n */\nexport function IndentedCellLayout({ children, depth, expander }: Props) {\n  return (\n    <span\n      class={styles.root}\n      style={assignInlineVars({\n        [indentedCellLayoutLocalVars.depth]: `${depth}`,\n        [indentedCellLayoutLocalVars.expanderWidth]: expander\n          ? '0px'\n          : indentedCellLayoutVars.expanderButtonWidth\n      })}>\n      {expander}\n      {children}\n    </span>\n  );\n}\n\nexport type { Props as IndentedCellLayoutProps };\n"],"names":["children","depth","expander","_jsxs","class","styles","root","style","assignInlineVars","indentedCellLayoutLocalVars","expanderWidth","indentedCellLayoutVars","expanderButtonWidth"],"mappings":"oWAiCM,UAA6BA,SAAEA,EAAQC,MAAEA,EAAKC,SAAEA,IACpD,OACEC,EAAAA,KACE,OAAA,CAAAC,MAAOC,EAAAA,OAAOC,KACdC,MAAOC,mBAAiB,CACtB,CAACC,8BAA4BR,OAAQ,GAAGA,IACxC,CAACQ,EAAAA,4BAA4BC,eAAgBR,EACzC,MACAS,EAAAA,uBAAuBC,gCAE5BV,EACAF,IAGP"}
+{"version":3,"file":"IndentedCellLayout-dc0896ab.js","sources":["../../src/UNSAFE_IndentedCellLayout/IndentedCellLayout.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport type { ComponentChildren } from 'preact';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { indentedCellLayoutVars } from './themes/IndentedCellLayoutContract.css';\nimport { styles, indentedCellLayoutLocalVars } from './themes/IndentedCellLayoutStyles.css';\nimport './themes/redwood/IndentedCellLayoutBaseTheme.css';\n\ntype Props = {\n  /**\n   * The contents rendered after the indentation.\n   */\n  children?: ComponentChildren;\n\n  /**\n   * The expander rendered before the contents.\n   */\n  expander?: ComponentChildren;\n\n  /**\n   * The depth of the row within the tree hierarchy.\n   */\n  depth: number;\n};\n\n/**\n * Renders hierarchical collection indentation.\n */\nexport function IndentedCellLayout({ children, depth, expander }: Props) {\n  return (\n    <span\n      class={styles.root}\n      style={assignInlineVars({\n        [indentedCellLayoutLocalVars.depth]: `${depth}`,\n        [indentedCellLayoutLocalVars.expanderWidth]: expander\n          ? '0px'\n          : indentedCellLayoutVars.expanderButtonWidth\n      })}>\n      {expander}\n      {children}\n    </span>\n  );\n}\n\nexport type { Props as IndentedCellLayoutProps };\n"],"names":["children","depth","expander","_jsxs","class","styles","root","style","assignInlineVars","indentedCellLayoutLocalVars","expanderWidth","indentedCellLayoutVars","expanderButtonWidth"],"mappings":"mWAiCM,UAA6BA,SAAEA,EAAQC,MAAEA,EAAKC,SAAEA,IACpD,OACEC,EAAAA,KACE,OAAA,CAAAC,MAAOC,EAAAA,OAAOC,KACdC,MAAOC,mBAAiB,CACtB,CAACC,8BAA4BR,OAAQ,GAAGA,IACxC,CAACQ,EAAAA,4BAA4BC,eAAgBR,EACzC,MACAS,EAAAA,uBAAuBC,gCAE5BV,EACAF,IAGP"}

package/amd/{InputColor-019b9397.js → InputColor-96a82077.js}

@@ -1,2 +1,2 @@
-define(['exports', 'preact/jsx-runtime', 'preact/compat', 'preact/hooks', './swatchData-73382645', './clientHints-dabdb010', './FormFieldContext-a024b891', './logger-00b673c5', './ManageTabStopsContext-e0765389', './useTranslationBundle-1be27606', './safeHref-e764caa8', 'css!./UserAssistanceStyles.styles.css', 'module', './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css', './InlineUserAssistance-ed10a8c8', './Flex-026e94ca', 'css!./MessageBannerStyles.styles.css', 'module', './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css', 'preact', './LayerHost-e32470d1', 'css!./TooltipContentStyles.styles.css', 'module', './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css', './tooltipUtils-13ad7944', 'css!./IconStyle.styles.css', './IconButton-787cfcba', 'css!./MessageStyles.styles.css', './MessageFormattingUtils-ea0be23e', './TransitionGroup-3b9d81b6', './MessagesContext-602a69a2', 'css!./HiddenAccessibleStyles.styles.css', 'css!./ComponentMessageStyles.styles.css', 'module', './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css', './Popup-79f830e3', './UNSAFE_Separator/themes/SeparatorStyles.css', 'css!./LabelStyles.styles.css', 'module', './UNSAFE_Label/themes/redwood/LabelVariants.css', './InputGroupContext-372087af', './UNSAFE_Popup/themes/redwood/PopupVariants.css', './UNSAFE_InputColor/themes/InputColorPickerDropdownStyles.css', './Sheet-57c508aa', './ColorPicker-6cc1c6a1', './SectionedContent-3f9b094d', './ColorSwatch-f2f3bc89', './useDownToggle-80b61b43', './useClearIcon-2bedc84f', './useFocusableTextField-8b755b15', './FormContext-f65a2f89', './useFormContext-75f72bd2', './useHover-8b8a1496', './useTextField-ffdbdc20', './Label-3fa0c2cf', './keyboardUtils-90089dc3', './TextFieldInput-8bebc02f', 'css!./ObfuscatedTextFieldInputStyles.styles.css', './ReadonlyTextFieldInput-e26a22cf', './ReadonlyTextField-06fc6e56', './TextField-2d99e4b1', 'css!./LiveRegionStyles.styles.css', './UNSAFE_TextField/themes/TextFieldStyles.css', 'css!./ImageVars.styles.css', 'css!./SkeletonStyles.styles.css', 'css!./TextFieldLoadingStyles.styles.css', 'css!./TextFieldStyles.styles.css', 'module', './UNSAFE_TextField/themes/redwood/TextFieldVariants.css', './CompactUserAssistance-273c2441', './mergeProps-bcfa6a92', './ClearIcon-2f46c091', './useCurrentValueReducer-faded381', './useSelectableTextField-900d2860', './formControlUtils-a28263ff'], (function(e,s,t,o,a,l,n,r,i,c,d,u,p,m,h,b,f,x,y,C,S,v,F,g,T,A,I,R,w,V,U,k,D,E,j,P,L,_,H,B,M,N,O,z,W,q,G,K,Z,$,J,Q,X,Y,ee,se,te,oe,ae,le,ne,re,ie,ce,de,ue,pe,me,he,be,fe,xe,ye,Ce,Se){"use strict";const ve=({anchorRef:e,assistiveText:t,swatchSize:a,palette:l,helpSourceLink:r,helpSourceText:i,isDisabled:d,isOpen:u,isReadonly:p,label:m,onClose:b,onCommit:f,messages:x,testId:y,userAssistanceDensity:C,value:S})=>{const[v,F]=o.useState(!1),[g,T]=o.useState(u),A=o.useCallback((e=>{F(e.placement.startsWith("top"))}),[]);g!==u&&(T(u),u||F(!1));const I=Fe(),{colorPicker_label:R}=c.useTranslationBundle("@oracle/oraclejet-preact"),w=R(),V=s.jsx(W.ColorPicker,{height:I?void 0:"auto",onCommit:f,maxWidth:I?"100%":void 0,width:"100%",swatchSize:a,palette:l,testId:y,value:S}),U=!u||v&&!I||d||p||!(t||r||x&&x.length>0)||"efficient"!==C&&"reflow"!==C?void 0:s.jsx(n.FormFieldContext.Provider,{value:{isFocused:!0},children:s.jsx("div",{class:O.userAssistanceStyles,children:s.jsx(h.InlineUserAssistance,{assistiveText:t,fieldLabel:m,helpSourceLink:r,helpSourceText:i,messages:x,userAssistanceDensity:C})})}),k=y?y+(I?"_sheet":"_dropdown"):void 0,D=s.jsx("div",{class:O.dropdownStyles,children:s.jsx(q.SectionedContent,{paddingBlockEnd:"3.5x",paddingBlockStart:"3.5x",paddingInlineEnd:"3.5x",paddingInlineStart:"3.5x","aria-label":w,footer:U,hasFocusTrap:!0,main:V,role:"dialog",testId:k})});return I?s.jsx(z.Sheet,{isOpen:u,onClose:b,children:s.jsx(q.SectionedContent,{"aria-label":w,footer:U,hasFocusTrap:!0,main:V,role:"dialog",testId:k})}):s.jsx(q.StickyPositioningDropdown,{anchorRef:e,isOpen:u,onClose:b,onPosition:A,sizeOptions:{isMaxWidthAdjusted:!1,isMaxHeightAdjusted:!0},children:D})},Fe=()=>"phone"===l.getClientHints().deviceType,ge=(e,s)=>{switch(s.type){case"colorChanged":case"colorSelected":return{...e,colorValue:s.data};case"reset":return{colorValue:s.data};default:return e}},Te=({onCommit:e,onInput:s,value:t})=>{const[l,n]=o.useState(!1),r=o.useRef(null),i=o.useRef(null),c=o.useRef(!1),d=o.useRef(),u=o.useRef(t),p=o.useRef(t),m=o.useRef(t),h=o.useRef(!1),{state:b,dispatch:f}=(({value:e})=>{const[s,t]=o.useReducer(ge,{colorValue:e});return{state:s,dispatch:t}})({value:t});a.colorsAreDifferent(m.current,t)&&(m.current=t,a.colorsAreDifferent(t,b.colorValue)&&(f({type:"reset",data:t}),p.current=t,u.current=t)),o.useEffect((()=>{a.colorsAreDifferent(b.colorValue,p.current)&&(s({previousValue:p.current,value:b.colorValue}),p.current=b.colorValue),h.current&&a.colorsAreDifferent(b.colorValue,u.current)&&(e?.({previousValue:u.current,value:b.colorValue}),u.current=b.colorValue,h.current=!1)}),[e,s,b.colorValue]);const x=o.useCallback((e=>{f({type:"colorChanged",data:e.value})}),[f]),y=o.useCallback((()=>{a.colorsAreDifferent(u.current,b.colorValue)&&(e?.({value:b.colorValue,previousValue:u.current}),u.current=b.colorValue)}),[e,b.colorValue]),C=o.useCallback((()=>{c.current||n((e=>!e)),c.current=!1}),[]),S=o.useCallback((e=>{"outsideMousedown"===e.reason?(c.current=!0,clearTimeout(d.current),d.current=setTimeout((()=>{c.current=!1}),200)):"dismissed"!==e.reason&&"keyboardDismissed"!==e.reason||r.current?.focus(),n(!1)}),[]),v=o.useCallback((e=>{r.current?.focus(),h.current=!0,f({type:"colorSelected",data:e.value}),n(!1)}),[f]),F=o.useCallback((()=>{n(!0)}),[]),{triggerProps:g}=K.useDownToggle({isOpen:l,onToggle:F});return{colorIconActionHandler:C,colorPickerCommitHandler:v,dropdownCloseHandler:S,containerDropdownProps:g,colorValue:b.colorValue,iconRef:r,isOpen:l,colorCommitHandler:y,colorInputHandler:x,colorRef:i}},Ae=t.forwardRef((({"aria-describedby":e,swatchSize:t,palette:l,value:r,isDisabled:i,isReadonly:d,labelEdge:u,labelStartWidth:p,isRequiredShown:m=!1,isRequired:b=!1,placeholder:f,hasClearIcon:x,columnSpan:y,textAlign:C,autoComplete:S,messages:v,assistiveText:F,helpSourceLink:g,helpSourceText:T,label:A,onCommit:I,onInput:R,testId:w,variant:V,userAssistanceDensity:U},k)=>{const{colorIconActionHandler:D,colorPickerCommitHandler:E,dropdownCloseHandler:j,colorValue:P,containerDropdownProps:L,iconRef:_,isOpen:H,colorCommitHandler:B,colorInputHandler:M,colorRef:N}=Te({onCommit:I,onInput:R,value:r}),O=o.useRef(null),{inputColor_selectColor:z}=c.useTranslationBundle("@oracle/oraclejet-preact"),W=z(),{onKeyDown:q,...K}=L,{currentCommitValue:J,dispatch:se}=ye.useCurrentValueReducer({value:P}),oe=o.useCallback((e=>{se({type:"input",payload:e.value}),M?.(e)}),[M,se]),re=o.useCallback((e=>{se({type:"commit",payload:e.value}),B?.(e)}),[B,se]),{isDisabled:ie,isReadonly:ce,labelEdge:de,labelStartWidth:ue,textAlign:pe,userAssistanceDensity:me}=Q.useFormContext(),he=i??ie,Fe=d??ce,ge=u??de??Se.defaultLabelEdgeForVariant(V),Ae=p??ue,Re=C??pe,we=U??me,Ve=o.useRef(null),{focusProps:Ue,isFocused:ke,methods:De}=$.useFocusableTextField({isDisabled:he,isReadonly:Fe,enabledElementRef:N,readonlyElementRef:Ve}),{methods:Ee}=Ce.useSelectableTextField(N);o.useImperativeHandle(k,(()=>fe.mergeProps(De,Ee)),[De,Ee]);const{hoverProps:je,isHover:Pe}=X.useHover({isDisabled:Fe||he||!1}),{formFieldContext:Le,inputProps:_e,labelProps:He,textFieldProps:Be,userAssistanceProps:Me}=Y.useTextField({ariaDescribedBy:e,assistiveText:F,helpSourceLink:g,helpSourceText:T,isDisabled:he,isFocused:ke||H,isReadonly:Fe,isRequiredShown:m,labelEdge:ge,messages:v,styleVariant:V,userAssistanceDensity:we,value:P}),Ne=o.useCallback((()=>{N.current?.focus();const e=void 0;P!==e&&oe?.({previousValue:P,value:e})}),[oe,P,N]),Oe=Z.useClearIcon({clearIcon:s.jsx(xe.ClearIcon,{onClick:Ne,testId:`${w}_clearicon`}),display:x,hasValue:Le.hasValue,isFocused:ke,isEnabled:!Fe&&!he,isHover:Pe}),ze=void 0!==A&&"inside"===ge,We="none"!==ge?s.jsx(ee.Label,{...He,children:A}):void 0,qe={label:"none"!==ge?We:void 0,labelEdge:"none"!==ge?ge:void 0,labelStartWidth:"none"!==ge?Ae:void 0},Ge="none"===ge?A:void 0,Ke="efficient"===we||"reflow"===we?he||Fe?"efficient"!==we?void 0:s.jsx(h.InlineUserAssistance,{userAssistanceDensity:we,...Me}):s.jsx(h.InlineUserAssistance,{assistiveText:F,fieldLabel:A,helpSourceLink:g,helpSourceText:T,messages:v,isRequiredShown:m,userAssistanceDensity:we,...Me}):void 0,Ze=o.useRef(null),$e=O??Ze,Je="compact"===we?s.jsx(be.CompactUserAssistance,{anchorRef:$e,messages:v,assistiveText:F,...Me}):void 0,Qe=Fe?s.jsx(ae.ReadonlyTextFieldInput,{"aria-describedby":_e["aria-describedby"],"aria-label":Ge,"aria-labelledby":He.id,as:"div",elementRef:Ve,textAlign:Re,value:P,hasEmptyLabel:""===A&&"none"===ge,hasInsideLabel:ze}):s.jsx(te.TextFieldInput,{"aria-labelledby":He.id,"aria-label":Ge,autoComplete:S,currentCommitValue:J,hasEmptyLabel:""===A&&"none"===ge,hasEndContent:!1,hasInsideLabel:void 0!==We&&"inside"===ge,hasStartContent:!0,inputRef:N,isRequired:b,placeholder:f,textAlign:Re,type:Ie()?"text":void 0,value:P,onCommit:re,onInput:oe,onKeyDown:q,..._e});return s.jsxs(s.Fragment,{children:[s.jsx(n.FormFieldContext.Provider,{value:Le,children:Fe?s.jsx(le.ReadonlyTextField,{role:"presentation",columnSpan:y,compactUserAssistance:Je,inlineUserAssistance:Ke,onBlur:Ue.onFocusOut,onFocus:Ue.onFocusIn,ref:$e,mainContent:Qe,testId:w,...qe}):s.jsx(ne.TextField,{endContent:Oe,columnSpan:y,compactUserAssistance:Je,inlineUserAssistance:Ke,mainContent:Qe,onBlur:Ue.onFocusOut,onFocus:Ue.onFocusIn,startContent:s.jsx(G.ColorSwatch,{size:"xs","aria-haspopup":l?"grid":void 0,"aria-label":l?W:void 0,isDisabled:he,isButton:!0,isTooltipDisabled:H,ref:_,testId:w?w+"_colorIcon":void 0,value:J,onToggle:he||!l?void 0:D}),mainFieldRef:$e,hasZeroStartMargin:!0,testId:w,...Be,...qe,...je,...K})}),H&&!Fe&&!he&&s.jsx(ve,{anchorRef:O,assistiveText:F,helpSourceLink:g,helpSourceText:T,isDisabled:he,isReadonly:Fe,isOpen:H,label:A,onClose:j,onCommit:E,messages:v,testId:w?w+"_colorPicker":void 0,userAssistanceDensity:we,value:P&&a.isValidColorValue(P)?P:void 0,palette:l,swatchSize:t})]})}));function Ie(){const e=l.getClientHints().deviceType;return"phone"===e||"tablet"===e}Ae.displayName="InputColor",e.InputColor=Ae}));
-//# sourceMappingURL=InputColor-019b9397.js.map
+define(['exports', 'preact/jsx-runtime', 'preact/compat', 'preact/hooks', './swatchData-73382645', './ColorPicker-6cc1c6a1', './clientHints-dabdb010', './FormFieldContext-a024b891', './logger-00b673c5', './ManageTabStopsContext-e0765389', './useTranslationBundle-1be27606', './safeHref-e764caa8', 'css!./UserAssistanceStyles.styles.css', 'module', './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css', './InlineUserAssistance-ed10a8c8', './Flex-026e94ca', 'css!./MessageBannerStyles.styles.css', 'module', './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css', 'preact', './LayerHost-e32470d1', 'css!./TooltipContentStyles.styles.css', 'module', './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css', './tooltipUtils-13ad7944', 'css!./IconStyle.styles.css', './IconButton-787cfcba', 'css!./MessageStyles.styles.css', './MessageFormattingUtils-ea0be23e', './TransitionGroup-3b9d81b6', './MessagesContext-602a69a2', 'css!./HiddenAccessibleStyles.styles.css', 'css!./ComponentMessageStyles.styles.css', 'module', './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css', './Popup-79f830e3', './UNSAFE_Separator/themes/SeparatorStyles.css', 'css!./LabelStyles.styles.css', 'module', './UNSAFE_Label/themes/redwood/LabelVariants.css', './InputGroupContext-372087af', './UNSAFE_Popup/themes/redwood/PopupVariants.css', './UNSAFE_InputColor/themes/InputColorPickerDropdownStyles.css', './Sheet-57c508aa', './SectionedContent-3f9b094d', './ColorSwatch-f2f3bc89', './useDownToggle-80b61b43', './useClearIcon-2bedc84f', './useFocusableTextField-8b755b15', './FormContext-f65a2f89', './useFormContext-75f72bd2', './useHover-8b8a1496', './useTextField-ffdbdc20', './Label-3fa0c2cf', './keyboardUtils-90089dc3', './TextFieldInput-8bebc02f', 'css!./ObfuscatedTextFieldInputStyles.styles.css', './ReadonlyTextFieldInput-e26a22cf', './ReadonlyTextField-06fc6e56', './TextField-2d99e4b1', 'css!./LiveRegionStyles.styles.css', './UNSAFE_TextField/themes/TextFieldStyles.css', 'css!./ImageVars.styles.css', 'css!./SkeletonStyles.styles.css', 'css!./TextFieldLoadingStyles.styles.css', 'css!./TextFieldStyles.styles.css', 'module', './UNSAFE_TextField/themes/redwood/TextFieldVariants.css', './CompactUserAssistance-273c2441', './mergeProps-bcfa6a92', './ClearIcon-2f46c091', './useCurrentValueReducer-faded381', './useSelectableTextField-900d2860', './formControlUtils-a28263ff'], (function(e,s,t,o,a,l,n,r,i,c,d,u,p,m,h,b,f,x,y,C,S,v,F,g,T,A,I,R,w,V,U,k,D,E,j,P,L,_,H,B,M,N,O,z,W,q,G,K,Z,$,J,Q,X,Y,ee,se,te,oe,ae,le,ne,re,ie,ce,de,ue,pe,me,he,be,fe,xe,ye,Ce,Se){"use strict";const ve=({anchorRef:e,assistiveText:t,swatchSize:a,palette:n,helpSourceLink:i,helpSourceText:c,isDisabled:u,isOpen:p,isReadonly:m,label:h,onClose:f,onCommit:x,messages:y,testId:C,userAssistanceDensity:S,value:v})=>{const[F,g]=o.useState(!1),[T,A]=o.useState(p),I=o.useCallback((e=>{g(e.placement.startsWith("top"))}),[]);T!==p&&(A(p),p||g(!1));const R=Fe(),{colorPicker_label:w}=d.useTranslationBundle("@oracle/oraclejet-preact"),V=w(),U=s.jsx(l.ColorPicker,{height:R?void 0:"auto",onCommit:x,maxWidth:R?"100%":void 0,width:"100%",swatchSize:a,palette:n,testId:C,value:v}),k=!p||F&&!R||u||m||!(t||i||y&&y.length>0)||"efficient"!==S&&"reflow"!==S?void 0:s.jsx(r.FormFieldContext.Provider,{value:{isFocused:!0},children:s.jsx("div",{class:z.userAssistanceStyles,children:s.jsx(b.InlineUserAssistance,{assistiveText:t,fieldLabel:h,helpSourceLink:i,helpSourceText:c,messages:y,userAssistanceDensity:S})})}),D=C?C+(R?"_sheet":"_dropdown"):void 0,E=s.jsx("div",{class:z.dropdownStyles,children:s.jsx(q.SectionedContent,{paddingBlockEnd:"3.5x",paddingBlockStart:"3.5x",paddingInlineEnd:"3.5x",paddingInlineStart:"3.5x","aria-label":V,footer:k,hasFocusTrap:!0,main:U,role:"dialog",testId:D})});return R?s.jsx(W.Sheet,{isOpen:p,onClose:f,children:s.jsx(q.SectionedContent,{"aria-label":V,footer:k,hasFocusTrap:!0,main:U,role:"dialog",testId:D})}):s.jsx(q.StickyPositioningDropdown,{anchorRef:e,isOpen:p,onClose:f,onPosition:I,sizeOptions:{isMaxWidthAdjusted:!1,isMaxHeightAdjusted:!0},children:E})},Fe=()=>"phone"===n.getClientHints().deviceType,ge=(e,s)=>{switch(s.type){case"colorChanged":case"colorSelected":return{...e,colorValue:s.data};case"reset":return{colorValue:s.data};default:return e}},Te=({onCommit:e,onInput:s,value:t})=>{const[l,n]=o.useState(!1),r=o.useRef(null),i=o.useRef(null),c=o.useRef(!1),d=o.useRef(),u=o.useRef(t),p=o.useRef(t),m=o.useRef(t),h=o.useRef(!1),{state:b,dispatch:f}=(({value:e})=>{const[s,t]=o.useReducer(ge,{colorValue:e});return{state:s,dispatch:t}})({value:t});a.colorsAreDifferent(m.current,t)&&(m.current=t,a.colorsAreDifferent(t,b.colorValue)&&(f({type:"reset",data:t}),p.current=t,u.current=t)),o.useEffect((()=>{a.colorsAreDifferent(b.colorValue,p.current)&&(s({previousValue:p.current,value:b.colorValue}),p.current=b.colorValue),h.current&&a.colorsAreDifferent(b.colorValue,u.current)&&(e?.({previousValue:u.current,value:b.colorValue}),u.current=b.colorValue,h.current=!1)}),[e,s,b.colorValue]);const x=o.useCallback((e=>{f({type:"colorChanged",data:e.value})}),[f]),y=o.useCallback((()=>{a.colorsAreDifferent(u.current,b.colorValue)&&(e?.({value:b.colorValue,previousValue:u.current}),u.current=b.colorValue)}),[e,b.colorValue]),C=o.useCallback((()=>{c.current||n((e=>!e)),c.current=!1}),[]),S=o.useCallback((e=>{"outsideMousedown"===e.reason?(c.current=!0,clearTimeout(d.current),d.current=setTimeout((()=>{c.current=!1}),200)):"dismissed"!==e.reason&&"keyboardDismissed"!==e.reason||r.current?.focus(),n(!1)}),[]),v=o.useCallback((e=>{r.current?.focus(),h.current=!0,f({type:"colorSelected",data:e.value}),n(!1)}),[f]),F=o.useCallback((()=>{n(!0)}),[]),{triggerProps:g}=K.useDownToggle({isOpen:l,onToggle:F});return{colorIconActionHandler:C,colorPickerCommitHandler:v,dropdownCloseHandler:S,containerDropdownProps:g,colorValue:b.colorValue,iconRef:r,isOpen:l,colorCommitHandler:y,colorInputHandler:x,colorRef:i}},Ae=t.forwardRef((({"aria-describedby":e,swatchSize:t,palette:l,value:n,isDisabled:i,isReadonly:c,labelEdge:u,labelStartWidth:p,isRequiredShown:m=!1,isRequired:h=!1,placeholder:f,hasClearIcon:x,columnSpan:y,textAlign:C,autoComplete:S,messages:v,assistiveText:F,helpSourceLink:g,helpSourceText:T,label:A,onCommit:I,onInput:R,testId:w,variant:V,userAssistanceDensity:U},k)=>{const{colorIconActionHandler:D,colorPickerCommitHandler:E,dropdownCloseHandler:j,colorValue:P,containerDropdownProps:L,iconRef:_,isOpen:H,colorCommitHandler:B,colorInputHandler:M,colorRef:N}=Te({onCommit:I,onInput:R,value:n}),O=o.useRef(null),{inputColor_selectColor:z}=d.useTranslationBundle("@oracle/oraclejet-preact"),W=z(),{onKeyDown:q,...K}=L,{currentCommitValue:J,dispatch:se}=ye.useCurrentValueReducer({value:P}),oe=o.useCallback((e=>{se({type:"input",payload:e.value}),M?.(e)}),[M,se]),re=o.useCallback((e=>{se({type:"commit",payload:e.value}),B?.(e)}),[B,se]),{isDisabled:ie,isReadonly:ce,labelEdge:de,labelStartWidth:ue,textAlign:pe,userAssistanceDensity:me}=Q.useFormContext(),he=i??ie,Fe=c??ce,ge=u??de??Se.defaultLabelEdgeForVariant(V),Ae=p??ue,Re=C??pe,we=U??me,Ve=o.useRef(null),{focusProps:Ue,isFocused:ke,methods:De}=$.useFocusableTextField({isDisabled:he,isReadonly:Fe,enabledElementRef:N,readonlyElementRef:Ve}),{methods:Ee}=Ce.useSelectableTextField(N);o.useImperativeHandle(k,(()=>fe.mergeProps(De,Ee)),[De,Ee]);const{hoverProps:je,isHover:Pe}=X.useHover({isDisabled:Fe||he||!1}),{formFieldContext:Le,inputProps:_e,labelProps:He,textFieldProps:Be,userAssistanceProps:Me}=Y.useTextField({ariaDescribedBy:e,assistiveText:F,helpSourceLink:g,helpSourceText:T,isDisabled:he,isFocused:ke||H,isReadonly:Fe,isRequiredShown:m,labelEdge:ge,messages:v,styleVariant:V,userAssistanceDensity:we,value:P}),Ne=o.useCallback((()=>{N.current?.focus();const e=void 0;P!==e&&oe?.({previousValue:P,value:e})}),[oe,P,N]),Oe=Z.useClearIcon({clearIcon:s.jsx(xe.ClearIcon,{onClick:Ne,testId:`${w}_clearicon`}),display:x,hasValue:Le.hasValue,isFocused:ke,isEnabled:!Fe&&!he,isHover:Pe}),ze=void 0!==A&&"inside"===ge,We="none"!==ge?s.jsx(ee.Label,{...He,children:A}):void 0,qe={label:"none"!==ge?We:void 0,labelEdge:"none"!==ge?ge:void 0,labelStartWidth:"none"!==ge?Ae:void 0},Ge="none"===ge?A:void 0,Ke="efficient"===we||"reflow"===we?he||Fe?"efficient"!==we?void 0:s.jsx(b.InlineUserAssistance,{userAssistanceDensity:we,...Me}):s.jsx(b.InlineUserAssistance,{assistiveText:F,fieldLabel:A,helpSourceLink:g,helpSourceText:T,messages:v,isRequiredShown:m,userAssistanceDensity:we,...Me}):void 0,Ze=o.useRef(null),$e=O??Ze,Je="compact"===we?s.jsx(be.CompactUserAssistance,{anchorRef:$e,messages:v,assistiveText:F,...Me}):void 0,Qe=Fe?s.jsx(ae.ReadonlyTextFieldInput,{"aria-describedby":_e["aria-describedby"],"aria-label":Ge,"aria-labelledby":He.id,as:"div",elementRef:Ve,textAlign:Re,value:P,hasEmptyLabel:""===A&&"none"===ge,hasInsideLabel:ze}):s.jsx(te.TextFieldInput,{"aria-labelledby":He.id,"aria-label":Ge,autoComplete:S,currentCommitValue:J,hasEmptyLabel:""===A&&"none"===ge,hasEndContent:!1,hasInsideLabel:void 0!==We&&"inside"===ge,hasStartContent:!0,inputRef:N,isRequired:h,placeholder:f,textAlign:Re,type:Ie()?"text":void 0,value:P,onCommit:re,onInput:oe,onKeyDown:q,..._e});return s.jsxs(s.Fragment,{children:[s.jsx(r.FormFieldContext.Provider,{value:Le,children:Fe?s.jsx(le.ReadonlyTextField,{role:"presentation",columnSpan:y,compactUserAssistance:Je,inlineUserAssistance:Ke,onBlur:Ue.onFocusOut,onFocus:Ue.onFocusIn,ref:$e,mainContent:Qe,testId:w,...qe}):s.jsx(ne.TextField,{endContent:Oe,columnSpan:y,compactUserAssistance:Je,inlineUserAssistance:Ke,mainContent:Qe,onBlur:Ue.onFocusOut,onFocus:Ue.onFocusIn,startContent:s.jsx(G.ColorSwatch,{size:"xs","aria-haspopup":l?"grid":void 0,"aria-label":l?W:void 0,isDisabled:he,isButton:!0,isTooltipDisabled:H,ref:_,testId:w?w+"_colorIcon":void 0,value:J,onToggle:he||!l?void 0:D}),mainFieldRef:$e,hasZeroStartMargin:!0,testId:w,...Be,...qe,...je,...K})}),H&&!Fe&&!he&&s.jsx(ve,{anchorRef:O,assistiveText:F,helpSourceLink:g,helpSourceText:T,isDisabled:he,isReadonly:Fe,isOpen:H,label:A,onClose:j,onCommit:E,messages:v,testId:w?w+"_colorPicker":void 0,userAssistanceDensity:we,value:P&&a.isValidColorValue(P)?P:void 0,palette:l,swatchSize:t})]})}));function Ie(){const e=n.getClientHints().deviceType;return"phone"===e||"tablet"===e}Ae.displayName="InputColor",e.InputColor=Ae}));
+//# sourceMappingURL=InputColor-96a82077.js.map

package/amd/{InputColor-019b9397.js.map → InputColor-96a82077.js.map}

@@ -1 +1 @@
-{"version":3,"file":"InputColor-019b9397.js","sources":["../../src/UNSAFE_InputColor/InputColorPickerDropdown.tsx","../../src/UNSAFE_InputColor/useInputColorState.ts","../../src/UNSAFE_InputColor/useInputColor.ts","../../src/UNSAFE_InputColor/InputColor.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentProps } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\nimport { BundleType } from '../resources/nls/bundle';\nimport { ColorPicker } from '#UNSAFE_ColorPicker';\nimport { type CloseDetail as DropdownCloseDetail } from '#UNSAFE_Dropdown';\nimport { getClientHints } from '#utils/PRIVATE_clientHints';\nimport { FormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { InlineUserAssistance } from '../UNSAFE_UserAssistance';\nimport { dropdownStyles, userAssistanceStyles } from './themes/InputColorPickerDropdownStyles.css';\nimport { PositionData } from '../UNSAFE_Floating';\nimport { StickyPositioningDropdown } from '#PRIVATE_FormControls';\nimport { SectionedContent } from '#PRIVATE_FormControls';\nimport { type CloseDetail as SheetCloseDetail, Sheet } from '#UNSAFE_Sheet';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { SizeOptions } from '#UNSAFE_Floating/Floating';\nimport { InputColorPublicProps as InputColorProps } from './InputColor.types';\n\ntype StickyPositioningDropdownProps = ComponentProps<typeof StickyPositioningDropdown>;\ntype ColorPickerProps = ComponentProps<typeof ColorPicker>;\ntype PickedPropsFromColorPicker = Pick<ColorPickerProps, 'value' | 'onCommit'>;\ntype PickedPropsFromDropdown = Omit<StickyPositioningDropdownProps, 'onClose'>;\ntype CloseDetail = SheetCloseDetail | DropdownCloseDetail;\ntype PickedPropsFromInputColor = Pick<\n  InputColorProps,\n  | 'swatchSize'\n  | 'palette'\n  | 'value'\n  | 'aria-describedby'\n  | 'assistiveText'\n  | 'columnSpan'\n  | 'helpSourceLink'\n  | 'helpSourceText'\n  | 'isDisabled'\n  | 'isReadonly'\n  | 'isRequired'\n  | 'isRequiredShown'\n  | 'label'\n  | 'labelEdge'\n  | 'labelStartWidth'\n  | 'messages'\n  | 'textAlign'\n  | 'testId'\n  | 'userAssistanceDensity'\n  | 'variant'\n>;\n\ntype Props = PickedPropsFromColorPicker &\n  PickedPropsFromInputColor &\n  PickedPropsFromDropdown &\n  TestIdProps & {\n    /**\n     * Called when the dropdown or sheet is supposed to be closed.\n     */\n    onClose?: (detail: CloseDetail) => void;\n  };\n\n/**\n * Component that renders ColorPicker either inside a dropdown or sheet; in mobile,\n * it renders inside a sheet. Additionally, when a dropdown is being shown beneath\n * the component, we also show any user assistance text or messages below the picker\n * because otherwise that information would be obscured from view. When a sheet is being\n * shown, it will always display UA and messages at the bottom of the sheet.\n */\nconst InputColorPickerDropdown = ({\n  anchorRef,\n  assistiveText,\n  swatchSize,\n  palette,\n  helpSourceLink,\n  helpSourceText,\n  isDisabled,\n  isOpen,\n  isReadonly,\n  label,\n  onClose,\n  onCommit,\n  messages,\n  testId,\n  userAssistanceDensity,\n  value\n}: Props) => {\n  // If the dropdown opens above the component, we don't want to show UA or messages.\n  const [isDropdownAbove, setDropdownAbove] = useState(false);\n  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n  const handleDropdownPosition = useCallback<\n    NonNullable<StickyPositioningDropdownProps['onPosition']>\n  >((data: PositionData) => {\n    setDropdownAbove(data.placement.startsWith('top'));\n  }, []);\n  // Reset the flag when the dropdown is closed.\n  if (prevIsOpen !== isOpen) {\n    setPrevIsOpen(isOpen);\n    if (!isOpen) {\n      setDropdownAbove(false);\n    }\n  }\n\n  const sizeOptions: SizeOptions = {\n    isMaxWidthAdjusted: false,\n    isMaxHeightAdjusted: true\n  };\n\n  // On mobile phones, the dropdown becomes a sheet.\n  const shouldShowSheet = isPhone();\n\n  const { colorPicker_label } = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const colorPickerAriaLabel = colorPicker_label();\n\n  const colorPickerMainContent = (\n    <ColorPicker\n      height={!shouldShowSheet ? 'auto' : undefined}\n      onCommit={onCommit}\n      // for sheet, we want the width to grow to the width of the sheet, otherwise it will use the theme default.\n      maxWidth={shouldShowSheet ? '100%' : undefined}\n      width=\"100%\"\n      swatchSize={swatchSize}\n      palette={palette}\n      testId={testId}\n      value={value}\n    />\n  );\n\n  const inlineUserAssistanceFooter =\n    isOpen &&\n    (!isDropdownAbove || shouldShowSheet) &&\n    !isDisabled &&\n    !isReadonly &&\n    (assistiveText || helpSourceLink || (messages && messages.length > 0)) &&\n    (userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow') ? (\n      <FormFieldContext.Provider value={{ isFocused: true }}>\n        <div class={userAssistanceStyles}>\n          <InlineUserAssistance\n            assistiveText={assistiveText}\n            fieldLabel={label}\n            helpSourceLink={helpSourceLink}\n            helpSourceText={helpSourceText}\n            messages={messages}\n            userAssistanceDensity={userAssistanceDensity}\n          />\n        </div>\n      </FormFieldContext.Provider>\n    ) : undefined;\n\n  const contentTestId = testId ? testId + (shouldShowSheet ? '_sheet' : '_dropdown') : undefined;\n\n  // The same content is displayed either in a dropdown or sheet: color picker and inline UA.\n  // Add styling to the dropdown to enforce a fixed width.\n  const dropdownContent = (\n    <div class={dropdownStyles}>\n      <SectionedContent\n        paddingBlockEnd=\"3.5x\"\n        paddingBlockStart=\"3.5x\"\n        paddingInlineEnd=\"3.5x\"\n        paddingInlineStart=\"3.5x\"\n        aria-label={colorPickerAriaLabel}\n        footer={inlineUserAssistanceFooter}\n        hasFocusTrap={true}\n        main={colorPickerMainContent}\n        role=\"dialog\"\n        testId={contentTestId}\n      />\n    </div>\n  );\n\n  const dropdown = shouldShowSheet ? (\n    <Sheet isOpen={isOpen} onClose={onClose}>\n      <SectionedContent\n        aria-label={colorPickerAriaLabel}\n        footer={inlineUserAssistanceFooter}\n        hasFocusTrap={true}\n        main={colorPickerMainContent}\n        role=\"dialog\"\n        testId={contentTestId}\n      />\n    </Sheet>\n  ) : (\n    <StickyPositioningDropdown\n      anchorRef={anchorRef}\n      isOpen={isOpen}\n      onClose={onClose}\n      onPosition={handleDropdownPosition}\n      sizeOptions={sizeOptions}>\n      {dropdownContent}\n    </StickyPositioningDropdown>\n  );\n\n  return dropdown;\n};\n\nconst isPhone = () => {\n  return getClientHints().deviceType === 'phone';\n};\n\nexport { InputColorPickerDropdown, type CloseDetail };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { useReducer } from 'preact/hooks';\nimport { type ColorValue } from '#utils/UNSAFE_color';\n\ntype InputColorState = {\n  /**\n   * Represents the current color value of the component. The user either selected\n   * the color in the picker, or typed it into the color field.\n   */\n  colorValue?: ColorValue;\n};\n\ntype ColorChangedAction = { type: 'colorChanged'; data?: ColorValue };\ntype ColorResetAction = { type: 'reset'; data?: ColorValue };\ntype ColorSelectedAction = { type: 'colorSelected'; data?: ColorValue };\ntype InputColorReducerAction = ColorChangedAction | ColorResetAction | ColorSelectedAction;\n\n// Use a reducer function to manage InputColorState.\nconst inputColorReducer = (\n  state: InputColorState,\n  action: InputColorReducerAction\n): InputColorState => {\n  switch (action.type) {\n    case 'colorChanged': {\n      return {\n        ...state,\n        colorValue: action.data\n      };\n    }\n    case 'colorSelected': {\n      return { ...state, colorValue: action.data };\n    }\n    case 'reset': {\n      return {\n        colorValue: action.data\n      };\n    }\n    default:\n      return state;\n  }\n};\n\ntype Props = {\n  /**\n   * The value of the InputColor, or undefined.\n   */\n  value?: ColorValue;\n};\n\n/**\n * useInputColorState calls useReducer to determine the initial state. Any changes to that state\n * are managed by dispatching actions to the reducer function.\n */\nconst useInputColorState = ({ value }: Props) => {\n  const [state, dispatch] = useReducer(inputColorReducer, {\n    colorValue: value\n  });\n\n  return { state, dispatch };\n};\n\nexport { useInputColorState };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport type { ComponentProps, RefObject } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { ElementRef } from 'preact/compat';\nimport { colorsAreDifferent, type ColorValue } from '#utils/UNSAFE_color';\nimport { ColorPicker } from '#UNSAFE_ColorPicker';\nimport { ColorSwatch } from '#UNSAFE_ColorSwatch';\nimport { CloseDetail, InputColorPickerDropdown } from './InputColorPickerDropdown';\nimport { useInputColorState } from './useInputColorState';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { useDownToggle } from '#hooks/UNSAFE_useDownToggle';\nimport { InputColorPublicProps as InputColorProps } from './InputColor.types';\n\ntype SwatchHandle = ElementRef<typeof ColorSwatch>;\n\ntype ColorPickerProps = ComponentProps<typeof ColorPicker>;\ntype ColorSwatchProps = ComponentProps<typeof ColorSwatch>;\ntype DropdownProps = ComponentProps<typeof InputColorPickerDropdown>;\n\ntype Props = {\n  onCommit: InputColorProps['onCommit'];\n  onInput: InputColorProps['onInput'];\n  value: InputColorProps['value'];\n};\n\n/**\n * Hook that provides handlers and other functionality for InputColor.\n */\nconst useInputColor = ({ onCommit, onInput, value: currentValue }: Props) => {\n  // Whether the dropdown is open.\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  // Ref to the swatch icon button.\n  const iconRef: RefObject<SwatchHandle> = useRef<SwatchHandle>(null);\n\n  // Ref to the text input which holds color value\n  const colorRef: RefObject<HTMLInputElement> = useRef<HTMLInputElement>(null);\n\n  // Keep track of whether the dropdown was just dismissed from an outside mousedown event.\n  const outsideMousedownRef = useRef<boolean>(false);\n  const outsideMousedownTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>();\n\n  // Keep track of the last color values passed to onInput and onCommit.\n  const lastCommittedColorRef = useRef<ColorValue | undefined>(currentValue);\n  const lastColorRef = useRef<ColorValue | undefined>(currentValue);\n\n  // Keep track of the last controlled value passed from the parent, so we can detect a programmatic change.\n  const lastValueFromParentRef = useRef<ColorValue | undefined>(currentValue);\n\n  // Keep track of whether a color was selected in the color picker.\n  const colorSelectedRef = useRef<boolean>(false);\n\n  const { state, dispatch } = useInputColorState({ value: currentValue });\n\n  // If a new value is being pushed from the parent, and that value differs from\n  // the current value of the reducer, then this is a programmatic update\n  // and we need to call 'reset' to update the reducer state. Otherwise, the only\n  // time the reducer state is updated from the value is on mount.\n  if (colorsAreDifferent(lastValueFromParentRef.current, currentValue)) {\n    lastValueFromParentRef.current = currentValue;\n    if (colorsAreDifferent(currentValue, state.colorValue)) {\n      dispatch({ type: 'reset', data: currentValue });\n      lastColorRef.current = currentValue;\n      lastCommittedColorRef.current = currentValue;\n    }\n  }\n\n  // Reducer updates are async, so wait until the state updates and then call our callbacks.\n  useEffect(() => {\n    if (colorsAreDifferent(state.colorValue, lastColorRef.current)) {\n      onInput({ previousValue: lastColorRef.current, value: state.colorValue });\n      lastColorRef.current = state.colorValue;\n    }\n    if (\n      colorSelectedRef.current &&\n      colorsAreDifferent(state.colorValue, lastCommittedColorRef.current)\n    ) {\n      onCommit?.({ previousValue: lastCommittedColorRef.current, value: state.colorValue });\n      lastCommittedColorRef.current = state.colorValue;\n      colorSelectedRef.current = false;\n    }\n  }, [onCommit, onInput, state.colorValue]);\n\n  // Handle onInput from InputColor as values are entered in the input field.\n  // We wait for the state to update before calling onInput.\n  const colorInputHandler = useCallback<InputColorProps['onInput']>(\n    (detail: ValueUpdateDetail<ColorValue>) => {\n      dispatch({ type: 'colorChanged', data: detail.value });\n    },\n    [dispatch]\n  );\n\n  // Handle onCommit from InputColor, which is called when the user presses Enter or the field is blurred.\n  const colorCommitHandler = useCallback<NonNullable<InputColorProps['onCommit']>>(() => {\n    // If the current color value differs from the last committed value, then call onCommit.\n    if (colorsAreDifferent(lastCommittedColorRef.current, state.colorValue)) {\n      onCommit?.({ value: state.colorValue, previousValue: lastCommittedColorRef.current });\n      lastCommittedColorRef.current = state.colorValue;\n    }\n  }, [onCommit, state.colorValue]);\n\n  // Respond to onAction event from the swatch icon button. Toggles the color picker dropdown.\n  const colorIconActionHandler = useCallback<NonNullable<ColorSwatchProps['onToggle']>>(() => {\n    // Only toggle the value of isOpen if we didn't just dismiss the dropdown.\n    if (!outsideMousedownRef.current) {\n      setIsOpen((prevIsOpen) => !prevIsOpen);\n    }\n    outsideMousedownRef.current = false;\n  }, []);\n\n  const dropdownCloseHandler = useCallback<NonNullable<DropdownProps['onClose']>>(\n    (detail: CloseDetail) => {\n      // Keep track of when the dropdown is closed via outside mousedown, including when the swatch icon\n      // is clicked. We need this in order to toggle visibility of the picker and dropdown.\n      if (detail.reason === 'outsideMousedown') {\n        outsideMousedownRef.current = true;\n        clearTimeout(outsideMousedownTimerRef.current);\n\n        // Clear the flag after a short delay to ensure the dropdown can be opened again.\n        outsideMousedownTimerRef.current = setTimeout(() => {\n          outsideMousedownRef.current = false;\n        }, 200);\n      } else if (detail.reason === 'dismissed' || detail.reason === 'keyboardDismissed') {\n        // Focus the swatch icon when the dropdown is closed.\n        iconRef.current?.focus();\n      }\n      setIsOpen(false);\n    },\n    []\n  );\n\n  // Handle color selection in the picker.\n  //   - Updates the value in state.\n  //   - Closes the dropdown.\n  //   - Sets focus to the color field.\n  const colorPickerCommitHandler = useCallback<ColorPickerProps['onCommit']>(\n    (detail: ValueUpdateDetail<ColorValue>) => {\n      // Set focus to the swatch when a color is selected.\n      iconRef.current?.focus();\n\n      // Set a ref indicating a color was selected.\n      colorSelectedRef.current = true;\n      dispatch({ type: 'colorSelected', data: detail.value });\n      setIsOpen(false);\n    },\n    [dispatch]\n  );\n\n  // The Redwood UX design calls for the dropdown to open when the down arrow is pressed.\n  // Handle opening the dropdown when the down arrow is pressed in the text edit field.\n  const colorPickerDownHandler = useCallback(() => {\n    setIsOpen(true);\n  }, []);\n\n  const { triggerProps: containerDropdownProps } = useDownToggle({\n    isOpen,\n    onToggle: colorPickerDownHandler\n  });\n\n  return {\n    colorIconActionHandler,\n    colorPickerCommitHandler,\n    dropdownCloseHandler,\n    containerDropdownProps,\n    colorValue: state.colorValue,\n    iconRef,\n    isOpen,\n    colorCommitHandler,\n    colorInputHandler,\n    colorRef\n  };\n};\n\nexport { useInputColor };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { Ref } from 'preact';\nimport { forwardRef, ElementRef } from 'preact/compat';\nimport { useCallback, useImperativeHandle, useRef } from 'preact/hooks';\nimport { type BundleType } from '../resources/nls/bundle';\nimport { type ColorValue, isValidColorValue } from '#utils/UNSAFE_color';\nimport { InputColorPickerDropdown } from './InputColorPickerDropdown';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { ColorSwatch } from '#UNSAFE_ColorSwatch';\nimport { useInputColor } from './useInputColor';\n\nimport { useClearIcon } from '../hooks/UNSAFE_useClearIcon';\nimport { FocusableHandle, useFocusableTextField } from '../hooks/UNSAFE_useFocusableTextField';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\nimport { FormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { useHover } from '../hooks/UNSAFE_useHover';\nimport { useTextField } from '../hooks/UNSAFE_useTextField';\nimport { Label } from '../UNSAFE_Label';\n\nimport {\n  ReadonlyTextField,\n  ReadonlyTextFieldInput,\n  TextField,\n  TextFieldInput\n} from '../UNSAFE_TextField';\nimport { CompactUserAssistance, InlineUserAssistance } from '../UNSAFE_UserAssistance';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { ClearIcon } from '../PRIVATE_ClearIcon/ClearIcon';\nimport { useCurrentValueReducer } from '../hooks/UNSAFE_useCurrentValueReducer';\nimport { SelectableHandle, useSelectableTextField } from '#hooks/UNSAFE_useSelectableTextField';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\nimport { InputColorPublicProps as Props } from './InputColor.types';\nimport { defaultLabelEdgeForVariant } from '#utils/PRIVATE_formControlUtils';\n\ntype SwatchHandle = ElementRef<typeof ColorSwatch>;\n\ntype FocusSelectHandle = FocusableHandle & SelectableHandle;\n\n/**\n * An Input Color is a form field that allows users to select or input a color value,\n * using a color picker or by enterihg a HEX code.\n */\nexport const InputColor = forwardRef(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      swatchSize,\n      palette,\n      value,\n      isDisabled: propIsDisabled,\n      isReadonly: propIsReadonly,\n      labelEdge: propLabelEdge,\n      labelStartWidth: propLabelStartWidth,\n      isRequiredShown = false,\n      isRequired = false,\n      placeholder,\n      hasClearIcon,\n      columnSpan,\n      textAlign: propTextAlign,\n      autoComplete,\n      messages,\n      assistiveText,\n      helpSourceLink,\n      helpSourceText,\n      label,\n      onCommit,\n      onInput,\n      testId,\n      variant,\n      userAssistanceDensity: propUserAssistanceDensity\n    }: Props,\n    ref?: Ref<FocusSelectHandle>\n  ) => {\n    const {\n      colorIconActionHandler,\n      colorPickerCommitHandler,\n      dropdownCloseHandler,\n      colorValue,\n      containerDropdownProps,\n      iconRef,\n      isOpen,\n      colorCommitHandler,\n      colorInputHandler,\n      colorRef: enabledElementRef\n    } = useInputColor({\n      onCommit,\n      onInput,\n      value\n    });\n\n    const mainFieldRef = useRef<HTMLDivElement>(null);\n    const { inputColor_selectColor } = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n    const colorIconAriaLabel = inputColor_selectColor();\n    const { onKeyDown, ...inputContainerAriaProps } = containerDropdownProps;\n\n    const { currentCommitValue, dispatch } = useCurrentValueReducer({ value: colorValue });\n    const onInputAndDispatch = useCallback(\n      (detail: ValueUpdateDetail<ColorValue>) => {\n        // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)\n        dispatch({ type: 'input', payload: detail.value });\n        colorInputHandler?.(detail);\n      },\n      [colorInputHandler, dispatch]\n    );\n    const onCommitAndDispatch = useCallback(\n      (detail: ValueUpdateDetail<ColorValue>) => {\n        // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)\n        dispatch({ type: 'commit', payload: detail.value });\n        colorCommitHandler?.(detail);\n      },\n      [colorCommitHandler, dispatch]\n    );\n\n    const startContent = () => (\n      <ColorSwatch\n        size=\"xs\"\n        aria-haspopup={palette ? 'grid' : undefined} // with only palette, grid is a better choice than dialog for now.\n        aria-label={palette ? colorIconAriaLabel : undefined}\n        isDisabled={isDisabled}\n        isButton={true}\n        isTooltipDisabled={isOpen}\n        ref={iconRef as Ref<SwatchHandle>}\n        testId={testId ? testId + '_colorIcon' : undefined}\n        value={currentCommitValue as ColorValue}\n        onToggle={isDisabled || !palette ? undefined : colorIconActionHandler}\n      />\n    );\n    const {\n      isDisabled: isFormDisabled,\n      isReadonly: isFormReadonly,\n      labelEdge: formLabelEdge,\n      labelStartWidth: formLabelStartWidth,\n      textAlign: formTextAlign,\n      userAssistanceDensity: formUserAssistanceDensity\n    } = useFormContext();\n    // default to FormContext values if component properties are not specified\n    const isDisabled = propIsDisabled ?? isFormDisabled;\n    const isReadonly = propIsReadonly ?? isFormReadonly;\n    const labelEdge = propLabelEdge ?? formLabelEdge ?? defaultLabelEdgeForVariant(variant);\n    const labelStartWidth = propLabelStartWidth ?? formLabelStartWidth;\n    const textAlign = propTextAlign ?? formTextAlign;\n    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;\n\n    const readonlyElementRef = useRef<HTMLDivElement>(null);\n\n    const {\n      focusProps,\n      isFocused,\n      methods: focusMethods\n    } = useFocusableTextField<HTMLInputElement, HTMLDivElement>({\n      isDisabled,\n      isReadonly,\n      enabledElementRef,\n      readonlyElementRef\n    });\n\n    const { methods: selectMethods } = useSelectableTextField<HTMLInputElement>(enabledElementRef);\n\n    useImperativeHandle(ref!, () => mergeProps(focusMethods, selectMethods), [\n      focusMethods,\n      selectMethods\n    ]);\n\n    const { hoverProps, isHover } = useHover({ isDisabled: isReadonly || isDisabled || false });\n\n    const { formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } =\n      useTextField({\n        ariaDescribedBy,\n        assistiveText,\n        helpSourceLink,\n        helpSourceText,\n        isDisabled,\n        isFocused: isFocused || isOpen,\n        isReadonly,\n        isRequiredShown,\n        labelEdge,\n        messages,\n        styleVariant: variant,\n        userAssistanceDensity,\n        value: colorValue\n      });\n\n    const onClickClearIcon = useCallback(() => {\n      // Clicking the clear icon should put the focus on the input field\n      enabledElementRef.current?.focus();\n      // Send an event to clear the field's value if the value is not already cleared\n      const nextValue = undefined;\n      if (colorValue === nextValue) return;\n      onInputAndDispatch?.({ previousValue: colorValue, value: nextValue });\n    }, [onInputAndDispatch, colorValue, enabledElementRef]);\n\n    const maybeClearIcon = useClearIcon({\n      clearIcon: <ClearIcon onClick={onClickClearIcon} testId={`${testId}_clearicon`} />,\n      display: hasClearIcon,\n      hasValue: formFieldContext.hasValue,\n      isFocused,\n      isEnabled: !isReadonly && !isDisabled,\n      isHover\n    });\n\n    const hasInsideLabel = label !== undefined && labelEdge === 'inside';\n\n    const labelComp = labelEdge !== 'none' ? <Label {...labelProps}>{label}</Label> : undefined;\n\n    const fieldLabelProps = {\n      label: labelEdge !== 'none' ? labelComp : undefined,\n      labelEdge: labelEdge !== 'none' ? labelEdge : undefined,\n      labelStartWidth: labelEdge !== 'none' ? labelStartWidth : undefined\n    };\n\n    const ariaLabel = labelEdge === 'none' ? label : undefined;\n    const isInlineDensity =\n      userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow';\n\n    const inlineUserAssistance = isInlineDensity ? (\n      isDisabled || isReadonly ? (\n        // save space for user assistance if density is 'efficient', even though we don't\n        // render user assistance for disabled or readonly fields\n        userAssistanceDensity !== 'efficient' ? undefined : (\n          <InlineUserAssistance\n            userAssistanceDensity={userAssistanceDensity}\n            {...userAssistanceProps}\n          />\n        )\n      ) : (\n        <InlineUserAssistance\n          assistiveText={assistiveText}\n          fieldLabel={label}\n          helpSourceLink={helpSourceLink}\n          helpSourceText={helpSourceText}\n          messages={messages}\n          isRequiredShown={isRequiredShown}\n          userAssistanceDensity={userAssistanceDensity}\n          {...userAssistanceProps}\n        />\n      )\n    ) : undefined;\n\n    const aRef = useRef<HTMLDivElement>(null);\n    const anchorRef = mainFieldRef ?? aRef;\n\n    const compactUserAssistance =\n      userAssistanceDensity === 'compact' ? (\n        <CompactUserAssistance\n          anchorRef={anchorRef}\n          messages={messages}\n          assistiveText={assistiveText}\n          {...userAssistanceProps}\n        />\n      ) : undefined;\n\n    const mainContent = isReadonly ? (\n      <ReadonlyTextFieldInput\n        aria-describedby={inputProps['aria-describedby']}\n        aria-label={ariaLabel}\n        aria-labelledby={labelProps.id}\n        as=\"div\"\n        elementRef={readonlyElementRef}\n        textAlign={textAlign}\n        value={colorValue}\n        hasEmptyLabel={label === '' && labelEdge === 'none'}\n        hasInsideLabel={hasInsideLabel}\n      />\n    ) : (\n      <TextFieldInput\n        aria-labelledby={labelProps.id}\n        aria-label={ariaLabel}\n        autoComplete={autoComplete}\n        currentCommitValue={currentCommitValue}\n        hasEmptyLabel={label === '' && labelEdge === 'none'}\n        hasEndContent={false}\n        hasInsideLabel={labelComp !== undefined && labelEdge === 'inside'}\n        hasStartContent={true}\n        inputRef={enabledElementRef}\n        isRequired={isRequired}\n        placeholder={placeholder}\n        textAlign={textAlign}\n        type={isMobile() ? 'text' : undefined}\n        value={colorValue}\n        onCommit={\n          onCommitAndDispatch as (detail: ValueUpdateDetail<string>) => {\n            value: string;\n          }\n        }\n        onInput={\n          onInputAndDispatch as (detail: ValueUpdateDetail<string>) => {\n            value: string;\n          }\n        }\n        onKeyDown={onKeyDown}\n        {...inputProps}\n      />\n    );\n\n    return (\n      <>\n        <FormFieldContext.Provider value={formFieldContext}>\n          {isReadonly ? (\n            <ReadonlyTextField\n              role=\"presentation\"\n              columnSpan={columnSpan}\n              compactUserAssistance={compactUserAssistance}\n              inlineUserAssistance={inlineUserAssistance}\n              onBlur={focusProps.onFocusOut}\n              onFocus={focusProps.onFocusIn}\n              ref={anchorRef}\n              mainContent={mainContent}\n              testId={testId}\n              {...fieldLabelProps}></ReadonlyTextField>\n          ) : (\n            <TextField\n              endContent={maybeClearIcon}\n              columnSpan={columnSpan}\n              compactUserAssistance={compactUserAssistance}\n              inlineUserAssistance={inlineUserAssistance}\n              mainContent={mainContent}\n              onBlur={focusProps.onFocusOut}\n              onFocus={focusProps.onFocusIn}\n              startContent={startContent()}\n              mainFieldRef={anchorRef}\n              hasZeroStartMargin={true}\n              testId={testId}\n              {...textFieldProps}\n              {...fieldLabelProps}\n              {...hoverProps}\n              {...inputContainerAriaProps}\n            />\n          )}\n        </FormFieldContext.Provider>\n\n        {isOpen && !isReadonly && !isDisabled && (\n          <InputColorPickerDropdown\n            anchorRef={mainFieldRef}\n            assistiveText={assistiveText}\n            helpSourceLink={helpSourceLink}\n            helpSourceText={helpSourceText}\n            isDisabled={isDisabled}\n            isReadonly={isReadonly}\n            isOpen={isOpen}\n            label={label}\n            onClose={dropdownCloseHandler}\n            onCommit={colorPickerCommitHandler}\n            messages={messages}\n            testId={testId ? testId + '_colorPicker' : undefined}\n            userAssistanceDensity={userAssistanceDensity}\n            // memoize this for performance\n            value={colorValue && isValidColorValue(colorValue) ? colorValue : undefined}\n            palette={palette}\n            swatchSize={swatchSize}\n          />\n        )}\n      </>\n    );\n  }\n);\n\n/**\n * Helper function to determine whether the current device is a mobile device\n * @returns true if running on a mobile device, false otherwise\n */\nfunction isMobile() {\n  const deviceType = getClientHints().deviceType;\n  return deviceType === 'phone' || deviceType === 'tablet';\n}\nInputColor.displayName = 'InputColor';\n"],"names":["InputColorPickerDropdown","anchorRef","assistiveText","swatchSize","palette","helpSourceLink","helpSourceText","isDisabled","isOpen","isReadonly","label","onClose","onCommit","messages","testId","userAssistanceDensity","value","isDropdownAbove","setDropdownAbove","useState","prevIsOpen","setPrevIsOpen","handleDropdownPosition","useCallback","data","placement","startsWith","shouldShowSheet","isPhone","colorPicker_label","useTranslationBundle","colorPickerAriaLabel","colorPickerMainContent","_jsx","ColorPicker","height","undefined","maxWidth","width","inlineUserAssistanceFooter","length","FormFieldContext","Provider","isFocused","children","jsx","class","userAssistanceStyles","InlineUserAssistance","fieldLabel","contentTestId","dropdownContent","dropdownStyles","SectionedContent","paddingBlockEnd","paddingBlockStart","paddingInlineEnd","paddingInlineStart","footer","hasFocusTrap","main","role","Sheet","StickyPositioningDropdown","onPosition","sizeOptions","isMaxWidthAdjusted","isMaxHeightAdjusted","getClientHints","deviceType","inputColorReducer","state","action","type","colorValue","useInputColor","onInput","currentValue","setIsOpen","iconRef","useRef","colorRef","outsideMousedownRef","outsideMousedownTimerRef","lastCommittedColorRef","lastColorRef","lastValueFromParentRef","colorSelectedRef","dispatch","useReducer","useInputColorState","colorsAreDifferent","current","useEffect","previousValue","colorInputHandler","detail","colorCommitHandler","colorIconActionHandler","dropdownCloseHandler","reason","clearTimeout","setTimeout","focus","colorPickerCommitHandler","colorPickerDownHandler","triggerProps","containerDropdownProps","useDownToggle","onToggle","InputColor","forwardRef","ariaDescribedBy","propIsDisabled","propIsReadonly","labelEdge","propLabelEdge","labelStartWidth","propLabelStartWidth","isRequiredShown","isRequired","placeholder","hasClearIcon","columnSpan","textAlign","propTextAlign","autoComplete","variant","propUserAssistanceDensity","ref","enabledElementRef","mainFieldRef","inputColor_selectColor","colorIconAriaLabel","onKeyDown","inputContainerAriaProps","currentCommitValue","useCurrentValueReducer","onInputAndDispatch","payload","onCommitAndDispatch","isFormDisabled","isFormReadonly","formLabelEdge","formLabelStartWidth","formTextAlign","formUserAssistanceDensity","useFormContext","defaultLabelEdgeForVariant","readonlyElementRef","focusProps","methods","focusMethods","useFocusableTextField","selectMethods","useSelectableTextField","useImperativeHandle","mergeProps","hoverProps","isHover","useHover","formFieldContext","inputProps","labelProps","textFieldProps","userAssistanceProps","useTextField","styleVariant","onClickClearIcon","nextValue","maybeClearIcon","useClearIcon","clearIcon","ClearIcon","onClick","display","hasValue","isEnabled","hasInsideLabel","labelComp","Label","fieldLabelProps","ariaLabel","inlineUserAssistance","aRef","compactUserAssistance","CompactUserAssistance","mainContent","ReadonlyTextFieldInput","id","as","elementRef","hasEmptyLabel","TextFieldInput","hasEndContent","hasStartContent","inputRef","isMobile","_jsxs","ReadonlyTextField","onBlur","onFocusOut","onFocus","onFocusIn","TextField","endContent","startContent","ColorSwatch","size","isButton","isTooltipDisabled","hasZeroStartMargin","isValidColorValue","displayName"],"mappings":"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"}
+{"version":3,"file":"InputColor-96a82077.js","sources":["../../src/UNSAFE_InputColor/InputColorPickerDropdown.tsx","../../src/UNSAFE_InputColor/useInputColorState.ts","../../src/UNSAFE_InputColor/useInputColor.ts","../../src/UNSAFE_InputColor/InputColor.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentProps } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\nimport { BundleType } from '../resources/nls/bundle';\nimport { ColorPicker } from '#UNSAFE_ColorPicker';\nimport { type CloseDetail as DropdownCloseDetail } from '#UNSAFE_Dropdown';\nimport { getClientHints } from '#utils/PRIVATE_clientHints';\nimport { FormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { InlineUserAssistance } from '../UNSAFE_UserAssistance';\nimport { dropdownStyles, userAssistanceStyles } from './themes/InputColorPickerDropdownStyles.css';\nimport { PositionData } from '../UNSAFE_Floating';\nimport { StickyPositioningDropdown } from '#PRIVATE_FormControls';\nimport { SectionedContent } from '#PRIVATE_FormControls';\nimport { type CloseDetail as SheetCloseDetail, Sheet } from '#UNSAFE_Sheet';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { SizeOptions } from '#UNSAFE_Floating/Floating';\nimport { InputColorPublicProps as InputColorProps } from './InputColor.types';\n\ntype StickyPositioningDropdownProps = ComponentProps<typeof StickyPositioningDropdown>;\ntype ColorPickerProps = ComponentProps<typeof ColorPicker>;\ntype PickedPropsFromColorPicker = Pick<ColorPickerProps, 'value' | 'onCommit'>;\ntype PickedPropsFromDropdown = Omit<StickyPositioningDropdownProps, 'onClose'>;\ntype CloseDetail = SheetCloseDetail | DropdownCloseDetail;\ntype PickedPropsFromInputColor = Pick<\n  InputColorProps,\n  | 'swatchSize'\n  | 'palette'\n  | 'value'\n  | 'aria-describedby'\n  | 'assistiveText'\n  | 'columnSpan'\n  | 'helpSourceLink'\n  | 'helpSourceText'\n  | 'isDisabled'\n  | 'isReadonly'\n  | 'isRequired'\n  | 'isRequiredShown'\n  | 'label'\n  | 'labelEdge'\n  | 'labelStartWidth'\n  | 'messages'\n  | 'textAlign'\n  | 'testId'\n  | 'userAssistanceDensity'\n  | 'variant'\n>;\n\ntype Props = PickedPropsFromColorPicker &\n  PickedPropsFromInputColor &\n  PickedPropsFromDropdown &\n  TestIdProps & {\n    /**\n     * Called when the dropdown or sheet is supposed to be closed.\n     */\n    onClose?: (detail: CloseDetail) => void;\n  };\n\n/**\n * Component that renders ColorPicker either inside a dropdown or sheet; in mobile,\n * it renders inside a sheet. Additionally, when a dropdown is being shown beneath\n * the component, we also show any user assistance text or messages below the picker\n * because otherwise that information would be obscured from view. When a sheet is being\n * shown, it will always display UA and messages at the bottom of the sheet.\n */\nconst InputColorPickerDropdown = ({\n  anchorRef,\n  assistiveText,\n  swatchSize,\n  palette,\n  helpSourceLink,\n  helpSourceText,\n  isDisabled,\n  isOpen,\n  isReadonly,\n  label,\n  onClose,\n  onCommit,\n  messages,\n  testId,\n  userAssistanceDensity,\n  value\n}: Props) => {\n  // If the dropdown opens above the component, we don't want to show UA or messages.\n  const [isDropdownAbove, setDropdownAbove] = useState(false);\n  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n  const handleDropdownPosition = useCallback<\n    NonNullable<StickyPositioningDropdownProps['onPosition']>\n  >((data: PositionData) => {\n    setDropdownAbove(data.placement.startsWith('top'));\n  }, []);\n  // Reset the flag when the dropdown is closed.\n  if (prevIsOpen !== isOpen) {\n    setPrevIsOpen(isOpen);\n    if (!isOpen) {\n      setDropdownAbove(false);\n    }\n  }\n\n  const sizeOptions: SizeOptions = {\n    isMaxWidthAdjusted: false,\n    isMaxHeightAdjusted: true\n  };\n\n  // On mobile phones, the dropdown becomes a sheet.\n  const shouldShowSheet = isPhone();\n\n  const { colorPicker_label } = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const colorPickerAriaLabel = colorPicker_label();\n\n  const colorPickerMainContent = (\n    <ColorPicker\n      height={!shouldShowSheet ? 'auto' : undefined}\n      onCommit={onCommit}\n      // for sheet, we want the width to grow to the width of the sheet, otherwise it will use the theme default.\n      maxWidth={shouldShowSheet ? '100%' : undefined}\n      width=\"100%\"\n      swatchSize={swatchSize}\n      palette={palette}\n      testId={testId}\n      value={value}\n    />\n  );\n\n  const inlineUserAssistanceFooter =\n    isOpen &&\n    (!isDropdownAbove || shouldShowSheet) &&\n    !isDisabled &&\n    !isReadonly &&\n    (assistiveText || helpSourceLink || (messages && messages.length > 0)) &&\n    (userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow') ? (\n      <FormFieldContext.Provider value={{ isFocused: true }}>\n        <div class={userAssistanceStyles}>\n          <InlineUserAssistance\n            assistiveText={assistiveText}\n            fieldLabel={label}\n            helpSourceLink={helpSourceLink}\n            helpSourceText={helpSourceText}\n            messages={messages}\n            userAssistanceDensity={userAssistanceDensity}\n          />\n        </div>\n      </FormFieldContext.Provider>\n    ) : undefined;\n\n  const contentTestId = testId ? testId + (shouldShowSheet ? '_sheet' : '_dropdown') : undefined;\n\n  // The same content is displayed either in a dropdown or sheet: color picker and inline UA.\n  // Add styling to the dropdown to enforce a fixed width.\n  const dropdownContent = (\n    <div class={dropdownStyles}>\n      <SectionedContent\n        paddingBlockEnd=\"3.5x\"\n        paddingBlockStart=\"3.5x\"\n        paddingInlineEnd=\"3.5x\"\n        paddingInlineStart=\"3.5x\"\n        aria-label={colorPickerAriaLabel}\n        footer={inlineUserAssistanceFooter}\n        hasFocusTrap={true}\n        main={colorPickerMainContent}\n        role=\"dialog\"\n        testId={contentTestId}\n      />\n    </div>\n  );\n\n  const dropdown = shouldShowSheet ? (\n    <Sheet isOpen={isOpen} onClose={onClose}>\n      <SectionedContent\n        aria-label={colorPickerAriaLabel}\n        footer={inlineUserAssistanceFooter}\n        hasFocusTrap={true}\n        main={colorPickerMainContent}\n        role=\"dialog\"\n        testId={contentTestId}\n      />\n    </Sheet>\n  ) : (\n    <StickyPositioningDropdown\n      anchorRef={anchorRef}\n      isOpen={isOpen}\n      onClose={onClose}\n      onPosition={handleDropdownPosition}\n      sizeOptions={sizeOptions}>\n      {dropdownContent}\n    </StickyPositioningDropdown>\n  );\n\n  return dropdown;\n};\n\nconst isPhone = () => {\n  return getClientHints().deviceType === 'phone';\n};\n\nexport { InputColorPickerDropdown, type CloseDetail };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { useReducer } from 'preact/hooks';\nimport { type ColorValue } from '#utils/UNSAFE_color';\n\ntype InputColorState = {\n  /**\n   * Represents the current color value of the component. The user either selected\n   * the color in the picker, or typed it into the color field.\n   */\n  colorValue?: ColorValue;\n};\n\ntype ColorChangedAction = { type: 'colorChanged'; data?: ColorValue };\ntype ColorResetAction = { type: 'reset'; data?: ColorValue };\ntype ColorSelectedAction = { type: 'colorSelected'; data?: ColorValue };\ntype InputColorReducerAction = ColorChangedAction | ColorResetAction | ColorSelectedAction;\n\n// Use a reducer function to manage InputColorState.\nconst inputColorReducer = (\n  state: InputColorState,\n  action: InputColorReducerAction\n): InputColorState => {\n  switch (action.type) {\n    case 'colorChanged': {\n      return {\n        ...state,\n        colorValue: action.data\n      };\n    }\n    case 'colorSelected': {\n      return { ...state, colorValue: action.data };\n    }\n    case 'reset': {\n      return {\n        colorValue: action.data\n      };\n    }\n    default:\n      return state;\n  }\n};\n\ntype Props = {\n  /**\n   * The value of the InputColor, or undefined.\n   */\n  value?: ColorValue;\n};\n\n/**\n * useInputColorState calls useReducer to determine the initial state. Any changes to that state\n * are managed by dispatching actions to the reducer function.\n */\nconst useInputColorState = ({ value }: Props) => {\n  const [state, dispatch] = useReducer(inputColorReducer, {\n    colorValue: value\n  });\n\n  return { state, dispatch };\n};\n\nexport { useInputColorState };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport type { ComponentProps, RefObject } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { ElementRef } from 'preact/compat';\nimport { colorsAreDifferent, type ColorValue } from '#utils/UNSAFE_color';\nimport { ColorPicker } from '#UNSAFE_ColorPicker';\nimport { ColorSwatch } from '#UNSAFE_ColorSwatch';\nimport { CloseDetail, InputColorPickerDropdown } from './InputColorPickerDropdown';\nimport { useInputColorState } from './useInputColorState';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { useDownToggle } from '#hooks/UNSAFE_useDownToggle';\nimport { InputColorPublicProps as InputColorProps } from './InputColor.types';\n\ntype SwatchHandle = ElementRef<typeof ColorSwatch>;\n\ntype ColorPickerProps = ComponentProps<typeof ColorPicker>;\ntype ColorSwatchProps = ComponentProps<typeof ColorSwatch>;\ntype DropdownProps = ComponentProps<typeof InputColorPickerDropdown>;\n\ntype Props = {\n  onCommit: InputColorProps['onCommit'];\n  onInput: InputColorProps['onInput'];\n  value: InputColorProps['value'];\n};\n\n/**\n * Hook that provides handlers and other functionality for InputColor.\n */\nconst useInputColor = ({ onCommit, onInput, value: currentValue }: Props) => {\n  // Whether the dropdown is open.\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  // Ref to the swatch icon button.\n  const iconRef: RefObject<SwatchHandle> = useRef<SwatchHandle>(null);\n\n  // Ref to the text input which holds color value\n  const colorRef: RefObject<HTMLInputElement> = useRef<HTMLInputElement>(null);\n\n  // Keep track of whether the dropdown was just dismissed from an outside mousedown event.\n  const outsideMousedownRef = useRef<boolean>(false);\n  const outsideMousedownTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>();\n\n  // Keep track of the last color values passed to onInput and onCommit.\n  const lastCommittedColorRef = useRef<ColorValue | undefined>(currentValue);\n  const lastColorRef = useRef<ColorValue | undefined>(currentValue);\n\n  // Keep track of the last controlled value passed from the parent, so we can detect a programmatic change.\n  const lastValueFromParentRef = useRef<ColorValue | undefined>(currentValue);\n\n  // Keep track of whether a color was selected in the color picker.\n  const colorSelectedRef = useRef<boolean>(false);\n\n  const { state, dispatch } = useInputColorState({ value: currentValue });\n\n  // If a new value is being pushed from the parent, and that value differs from\n  // the current value of the reducer, then this is a programmatic update\n  // and we need to call 'reset' to update the reducer state. Otherwise, the only\n  // time the reducer state is updated from the value is on mount.\n  if (colorsAreDifferent(lastValueFromParentRef.current, currentValue)) {\n    lastValueFromParentRef.current = currentValue;\n    if (colorsAreDifferent(currentValue, state.colorValue)) {\n      dispatch({ type: 'reset', data: currentValue });\n      lastColorRef.current = currentValue;\n      lastCommittedColorRef.current = currentValue;\n    }\n  }\n\n  // Reducer updates are async, so wait until the state updates and then call our callbacks.\n  useEffect(() => {\n    if (colorsAreDifferent(state.colorValue, lastColorRef.current)) {\n      onInput({ previousValue: lastColorRef.current, value: state.colorValue });\n      lastColorRef.current = state.colorValue;\n    }\n    if (\n      colorSelectedRef.current &&\n      colorsAreDifferent(state.colorValue, lastCommittedColorRef.current)\n    ) {\n      onCommit?.({ previousValue: lastCommittedColorRef.current, value: state.colorValue });\n      lastCommittedColorRef.current = state.colorValue;\n      colorSelectedRef.current = false;\n    }\n  }, [onCommit, onInput, state.colorValue]);\n\n  // Handle onInput from InputColor as values are entered in the input field.\n  // We wait for the state to update before calling onInput.\n  const colorInputHandler = useCallback<InputColorProps['onInput']>(\n    (detail: ValueUpdateDetail<ColorValue>) => {\n      dispatch({ type: 'colorChanged', data: detail.value });\n    },\n    [dispatch]\n  );\n\n  // Handle onCommit from InputColor, which is called when the user presses Enter or the field is blurred.\n  const colorCommitHandler = useCallback<NonNullable<InputColorProps['onCommit']>>(() => {\n    // If the current color value differs from the last committed value, then call onCommit.\n    if (colorsAreDifferent(lastCommittedColorRef.current, state.colorValue)) {\n      onCommit?.({ value: state.colorValue, previousValue: lastCommittedColorRef.current });\n      lastCommittedColorRef.current = state.colorValue;\n    }\n  }, [onCommit, state.colorValue]);\n\n  // Respond to onAction event from the swatch icon button. Toggles the color picker dropdown.\n  const colorIconActionHandler = useCallback<NonNullable<ColorSwatchProps['onToggle']>>(() => {\n    // Only toggle the value of isOpen if we didn't just dismiss the dropdown.\n    if (!outsideMousedownRef.current) {\n      setIsOpen((prevIsOpen) => !prevIsOpen);\n    }\n    outsideMousedownRef.current = false;\n  }, []);\n\n  const dropdownCloseHandler = useCallback<NonNullable<DropdownProps['onClose']>>(\n    (detail: CloseDetail) => {\n      // Keep track of when the dropdown is closed via outside mousedown, including when the swatch icon\n      // is clicked. We need this in order to toggle visibility of the picker and dropdown.\n      if (detail.reason === 'outsideMousedown') {\n        outsideMousedownRef.current = true;\n        clearTimeout(outsideMousedownTimerRef.current);\n\n        // Clear the flag after a short delay to ensure the dropdown can be opened again.\n        outsideMousedownTimerRef.current = setTimeout(() => {\n          outsideMousedownRef.current = false;\n        }, 200);\n      } else if (detail.reason === 'dismissed' || detail.reason === 'keyboardDismissed') {\n        // Focus the swatch icon when the dropdown is closed.\n        iconRef.current?.focus();\n      }\n      setIsOpen(false);\n    },\n    []\n  );\n\n  // Handle color selection in the picker.\n  //   - Updates the value in state.\n  //   - Closes the dropdown.\n  //   - Sets focus to the color field.\n  const colorPickerCommitHandler = useCallback<ColorPickerProps['onCommit']>(\n    (detail: ValueUpdateDetail<ColorValue>) => {\n      // Set focus to the swatch when a color is selected.\n      iconRef.current?.focus();\n\n      // Set a ref indicating a color was selected.\n      colorSelectedRef.current = true;\n      dispatch({ type: 'colorSelected', data: detail.value });\n      setIsOpen(false);\n    },\n    [dispatch]\n  );\n\n  // The Redwood UX design calls for the dropdown to open when the down arrow is pressed.\n  // Handle opening the dropdown when the down arrow is pressed in the text edit field.\n  const colorPickerDownHandler = useCallback(() => {\n    setIsOpen(true);\n  }, []);\n\n  const { triggerProps: containerDropdownProps } = useDownToggle({\n    isOpen,\n    onToggle: colorPickerDownHandler\n  });\n\n  return {\n    colorIconActionHandler,\n    colorPickerCommitHandler,\n    dropdownCloseHandler,\n    containerDropdownProps,\n    colorValue: state.colorValue,\n    iconRef,\n    isOpen,\n    colorCommitHandler,\n    colorInputHandler,\n    colorRef\n  };\n};\n\nexport { useInputColor };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { Ref } from 'preact';\nimport { forwardRef, ElementRef } from 'preact/compat';\nimport { useCallback, useImperativeHandle, useRef } from 'preact/hooks';\nimport { type BundleType } from '../resources/nls/bundle';\nimport { type ColorValue, isValidColorValue } from '#utils/UNSAFE_color';\nimport { InputColorPickerDropdown } from './InputColorPickerDropdown';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { ColorSwatch } from '#UNSAFE_ColorSwatch';\nimport { useInputColor } from './useInputColor';\n\nimport { useClearIcon } from '../hooks/UNSAFE_useClearIcon';\nimport { FocusableHandle, useFocusableTextField } from '../hooks/UNSAFE_useFocusableTextField';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\nimport { FormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { useHover } from '../hooks/UNSAFE_useHover';\nimport { useTextField } from '../hooks/UNSAFE_useTextField';\nimport { Label } from '../UNSAFE_Label';\n\nimport {\n  ReadonlyTextField,\n  ReadonlyTextFieldInput,\n  TextField,\n  TextFieldInput\n} from '../UNSAFE_TextField';\nimport { CompactUserAssistance, InlineUserAssistance } from '../UNSAFE_UserAssistance';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { ClearIcon } from '../PRIVATE_ClearIcon/ClearIcon';\nimport { useCurrentValueReducer } from '../hooks/UNSAFE_useCurrentValueReducer';\nimport { SelectableHandle, useSelectableTextField } from '#hooks/UNSAFE_useSelectableTextField';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\nimport { InputColorPublicProps as Props } from './InputColor.types';\nimport { defaultLabelEdgeForVariant } from '#utils/PRIVATE_formControlUtils';\n\ntype SwatchHandle = ElementRef<typeof ColorSwatch>;\n\ntype FocusSelectHandle = FocusableHandle & SelectableHandle;\n\n/**\n * An Input Color is a form field that allows users to select or input a color value,\n * using a color picker or by enterihg a HEX code.\n */\nexport const InputColor = forwardRef(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      swatchSize,\n      palette,\n      value,\n      isDisabled: propIsDisabled,\n      isReadonly: propIsReadonly,\n      labelEdge: propLabelEdge,\n      labelStartWidth: propLabelStartWidth,\n      isRequiredShown = false,\n      isRequired = false,\n      placeholder,\n      hasClearIcon,\n      columnSpan,\n      textAlign: propTextAlign,\n      autoComplete,\n      messages,\n      assistiveText,\n      helpSourceLink,\n      helpSourceText,\n      label,\n      onCommit,\n      onInput,\n      testId,\n      variant,\n      userAssistanceDensity: propUserAssistanceDensity\n    }: Props,\n    ref?: Ref<FocusSelectHandle>\n  ) => {\n    const {\n      colorIconActionHandler,\n      colorPickerCommitHandler,\n      dropdownCloseHandler,\n      colorValue,\n      containerDropdownProps,\n      iconRef,\n      isOpen,\n      colorCommitHandler,\n      colorInputHandler,\n      colorRef: enabledElementRef\n    } = useInputColor({\n      onCommit,\n      onInput,\n      value\n    });\n\n    const mainFieldRef = useRef<HTMLDivElement>(null);\n    const { inputColor_selectColor } = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n    const colorIconAriaLabel = inputColor_selectColor();\n    const { onKeyDown, ...inputContainerAriaProps } = containerDropdownProps;\n\n    const { currentCommitValue, dispatch } = useCurrentValueReducer({ value: colorValue });\n    const onInputAndDispatch = useCallback(\n      (detail: ValueUpdateDetail<ColorValue>) => {\n        // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)\n        dispatch({ type: 'input', payload: detail.value });\n        colorInputHandler?.(detail);\n      },\n      [colorInputHandler, dispatch]\n    );\n    const onCommitAndDispatch = useCallback(\n      (detail: ValueUpdateDetail<ColorValue>) => {\n        // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)\n        dispatch({ type: 'commit', payload: detail.value });\n        colorCommitHandler?.(detail);\n      },\n      [colorCommitHandler, dispatch]\n    );\n\n    const startContent = () => (\n      <ColorSwatch\n        size=\"xs\"\n        aria-haspopup={palette ? 'grid' : undefined} // with only palette, grid is a better choice than dialog for now.\n        aria-label={palette ? colorIconAriaLabel : undefined}\n        isDisabled={isDisabled}\n        isButton={true}\n        isTooltipDisabled={isOpen}\n        ref={iconRef as Ref<SwatchHandle>}\n        testId={testId ? testId + '_colorIcon' : undefined}\n        value={currentCommitValue as ColorValue}\n        onToggle={isDisabled || !palette ? undefined : colorIconActionHandler}\n      />\n    );\n    const {\n      isDisabled: isFormDisabled,\n      isReadonly: isFormReadonly,\n      labelEdge: formLabelEdge,\n      labelStartWidth: formLabelStartWidth,\n      textAlign: formTextAlign,\n      userAssistanceDensity: formUserAssistanceDensity\n    } = useFormContext();\n    // default to FormContext values if component properties are not specified\n    const isDisabled = propIsDisabled ?? isFormDisabled;\n    const isReadonly = propIsReadonly ?? isFormReadonly;\n    const labelEdge = propLabelEdge ?? formLabelEdge ?? defaultLabelEdgeForVariant(variant);\n    const labelStartWidth = propLabelStartWidth ?? formLabelStartWidth;\n    const textAlign = propTextAlign ?? formTextAlign;\n    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;\n\n    const readonlyElementRef = useRef<HTMLDivElement>(null);\n\n    const {\n      focusProps,\n      isFocused,\n      methods: focusMethods\n    } = useFocusableTextField<HTMLInputElement, HTMLDivElement>({\n      isDisabled,\n      isReadonly,\n      enabledElementRef,\n      readonlyElementRef\n    });\n\n    const { methods: selectMethods } = useSelectableTextField<HTMLInputElement>(enabledElementRef);\n\n    useImperativeHandle(ref!, () => mergeProps(focusMethods, selectMethods), [\n      focusMethods,\n      selectMethods\n    ]);\n\n    const { hoverProps, isHover } = useHover({ isDisabled: isReadonly || isDisabled || false });\n\n    const { formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } =\n      useTextField({\n        ariaDescribedBy,\n        assistiveText,\n        helpSourceLink,\n        helpSourceText,\n        isDisabled,\n        isFocused: isFocused || isOpen,\n        isReadonly,\n        isRequiredShown,\n        labelEdge,\n        messages,\n        styleVariant: variant,\n        userAssistanceDensity,\n        value: colorValue\n      });\n\n    const onClickClearIcon = useCallback(() => {\n      // Clicking the clear icon should put the focus on the input field\n      enabledElementRef.current?.focus();\n      // Send an event to clear the field's value if the value is not already cleared\n      const nextValue = undefined;\n      if (colorValue === nextValue) return;\n      onInputAndDispatch?.({ previousValue: colorValue, value: nextValue });\n    }, [onInputAndDispatch, colorValue, enabledElementRef]);\n\n    const maybeClearIcon = useClearIcon({\n      clearIcon: <ClearIcon onClick={onClickClearIcon} testId={`${testId}_clearicon`} />,\n      display: hasClearIcon,\n      hasValue: formFieldContext.hasValue,\n      isFocused,\n      isEnabled: !isReadonly && !isDisabled,\n      isHover\n    });\n\n    const hasInsideLabel = label !== undefined && labelEdge === 'inside';\n\n    const labelComp = labelEdge !== 'none' ? <Label {...labelProps}>{label}</Label> : undefined;\n\n    const fieldLabelProps = {\n      label: labelEdge !== 'none' ? labelComp : undefined,\n      labelEdge: labelEdge !== 'none' ? labelEdge : undefined,\n      labelStartWidth: labelEdge !== 'none' ? labelStartWidth : undefined\n    };\n\n    const ariaLabel = labelEdge === 'none' ? label : undefined;\n    const isInlineDensity =\n      userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow';\n\n    const inlineUserAssistance = isInlineDensity ? (\n      isDisabled || isReadonly ? (\n        // save space for user assistance if density is 'efficient', even though we don't\n        // render user assistance for disabled or readonly fields\n        userAssistanceDensity !== 'efficient' ? undefined : (\n          <InlineUserAssistance\n            userAssistanceDensity={userAssistanceDensity}\n            {...userAssistanceProps}\n          />\n        )\n      ) : (\n        <InlineUserAssistance\n          assistiveText={assistiveText}\n          fieldLabel={label}\n          helpSourceLink={helpSourceLink}\n          helpSourceText={helpSourceText}\n          messages={messages}\n          isRequiredShown={isRequiredShown}\n          userAssistanceDensity={userAssistanceDensity}\n          {...userAssistanceProps}\n        />\n      )\n    ) : undefined;\n\n    const aRef = useRef<HTMLDivElement>(null);\n    const anchorRef = mainFieldRef ?? aRef;\n\n    const compactUserAssistance =\n      userAssistanceDensity === 'compact' ? (\n        <CompactUserAssistance\n          anchorRef={anchorRef}\n          messages={messages}\n          assistiveText={assistiveText}\n          {...userAssistanceProps}\n        />\n      ) : undefined;\n\n    const mainContent = isReadonly ? (\n      <ReadonlyTextFieldInput\n        aria-describedby={inputProps['aria-describedby']}\n        aria-label={ariaLabel}\n        aria-labelledby={labelProps.id}\n        as=\"div\"\n        elementRef={readonlyElementRef}\n        textAlign={textAlign}\n        value={colorValue}\n        hasEmptyLabel={label === '' && labelEdge === 'none'}\n        hasInsideLabel={hasInsideLabel}\n      />\n    ) : (\n      <TextFieldInput\n        aria-labelledby={labelProps.id}\n        aria-label={ariaLabel}\n        autoComplete={autoComplete}\n        currentCommitValue={currentCommitValue}\n        hasEmptyLabel={label === '' && labelEdge === 'none'}\n        hasEndContent={false}\n        hasInsideLabel={labelComp !== undefined && labelEdge === 'inside'}\n        hasStartContent={true}\n        inputRef={enabledElementRef}\n        isRequired={isRequired}\n        placeholder={placeholder}\n        textAlign={textAlign}\n        type={isMobile() ? 'text' : undefined}\n        value={colorValue}\n        onCommit={\n          onCommitAndDispatch as (detail: ValueUpdateDetail<string>) => {\n            value: string;\n          }\n        }\n        onInput={\n          onInputAndDispatch as (detail: ValueUpdateDetail<string>) => {\n            value: string;\n          }\n        }\n        onKeyDown={onKeyDown}\n        {...inputProps}\n      />\n    );\n\n    return (\n      <>\n        <FormFieldContext.Provider value={formFieldContext}>\n          {isReadonly ? (\n            <ReadonlyTextField\n              role=\"presentation\"\n              columnSpan={columnSpan}\n              compactUserAssistance={compactUserAssistance}\n              inlineUserAssistance={inlineUserAssistance}\n              onBlur={focusProps.onFocusOut}\n              onFocus={focusProps.onFocusIn}\n              ref={anchorRef}\n              mainContent={mainContent}\n              testId={testId}\n              {...fieldLabelProps}></ReadonlyTextField>\n          ) : (\n            <TextField\n              endContent={maybeClearIcon}\n              columnSpan={columnSpan}\n              compactUserAssistance={compactUserAssistance}\n              inlineUserAssistance={inlineUserAssistance}\n              mainContent={mainContent}\n              onBlur={focusProps.onFocusOut}\n              onFocus={focusProps.onFocusIn}\n              startContent={startContent()}\n              mainFieldRef={anchorRef}\n              hasZeroStartMargin={true}\n              testId={testId}\n              {...textFieldProps}\n              {...fieldLabelProps}\n              {...hoverProps}\n              {...inputContainerAriaProps}\n            />\n          )}\n        </FormFieldContext.Provider>\n\n        {isOpen && !isReadonly && !isDisabled && (\n          <InputColorPickerDropdown\n            anchorRef={mainFieldRef}\n            assistiveText={assistiveText}\n            helpSourceLink={helpSourceLink}\n            helpSourceText={helpSourceText}\n            isDisabled={isDisabled}\n            isReadonly={isReadonly}\n            isOpen={isOpen}\n            label={label}\n            onClose={dropdownCloseHandler}\n            onCommit={colorPickerCommitHandler}\n            messages={messages}\n            testId={testId ? testId + '_colorPicker' : undefined}\n            userAssistanceDensity={userAssistanceDensity}\n            // memoize this for performance\n            value={colorValue && isValidColorValue(colorValue) ? colorValue : undefined}\n            palette={palette}\n            swatchSize={swatchSize}\n          />\n        )}\n      </>\n    );\n  }\n);\n\n/**\n * Helper function to determine whether the current device is a mobile device\n * @returns true if running on a mobile device, false otherwise\n */\nfunction isMobile() {\n  const deviceType = getClientHints().deviceType;\n  return deviceType === 'phone' || deviceType === 'tablet';\n}\nInputColor.displayName = 'InputColor';\n"],"names":["InputColorPickerDropdown","anchorRef","assistiveText","swatchSize","palette","helpSourceLink","helpSourceText","isDisabled","isOpen","isReadonly","label","onClose","onCommit","messages","testId","userAssistanceDensity","value","isDropdownAbove","setDropdownAbove","useState","prevIsOpen","setPrevIsOpen","handleDropdownPosition","useCallback","data","placement","startsWith","shouldShowSheet","isPhone","colorPicker_label","useTranslationBundle","colorPickerAriaLabel","colorPickerMainContent","_jsx","ColorPicker","height","undefined","maxWidth","width","inlineUserAssistanceFooter","length","FormFieldContext","Provider","isFocused","children","jsx","class","userAssistanceStyles","InlineUserAssistance","fieldLabel","contentTestId","dropdownContent","dropdownStyles","SectionedContent","paddingBlockEnd","paddingBlockStart","paddingInlineEnd","paddingInlineStart","footer","hasFocusTrap","main","role","Sheet","StickyPositioningDropdown","onPosition","sizeOptions","isMaxWidthAdjusted","isMaxHeightAdjusted","getClientHints","deviceType","inputColorReducer","state","action","type","colorValue","useInputColor","onInput","currentValue","setIsOpen","iconRef","useRef","colorRef","outsideMousedownRef","outsideMousedownTimerRef","lastCommittedColorRef","lastColorRef","lastValueFromParentRef","colorSelectedRef","dispatch","useReducer","useInputColorState","colorsAreDifferent","current","useEffect","previousValue","colorInputHandler","detail","colorCommitHandler","colorIconActionHandler","dropdownCloseHandler","reason","clearTimeout","setTimeout","focus","colorPickerCommitHandler","colorPickerDownHandler","triggerProps","containerDropdownProps","useDownToggle","onToggle","InputColor","forwardRef","ariaDescribedBy","propIsDisabled","propIsReadonly","labelEdge","propLabelEdge","labelStartWidth","propLabelStartWidth","isRequiredShown","isRequired","placeholder","hasClearIcon","columnSpan","textAlign","propTextAlign","autoComplete","variant","propUserAssistanceDensity","ref","enabledElementRef","mainFieldRef","inputColor_selectColor","colorIconAriaLabel","onKeyDown","inputContainerAriaProps","currentCommitValue","useCurrentValueReducer","onInputAndDispatch","payload","onCommitAndDispatch","isFormDisabled","isFormReadonly","formLabelEdge","formLabelStartWidth","formTextAlign","formUserAssistanceDensity","useFormContext","defaultLabelEdgeForVariant","readonlyElementRef","focusProps","methods","focusMethods","useFocusableTextField","selectMethods","useSelectableTextField","useImperativeHandle","mergeProps","hoverProps","isHover","useHover","formFieldContext","inputProps","labelProps","textFieldProps","userAssistanceProps","useTextField","styleVariant","onClickClearIcon","nextValue","maybeClearIcon","useClearIcon","clearIcon","ClearIcon","onClick","display","hasValue","isEnabled","hasInsideLabel","labelComp","Label","fieldLabelProps","ariaLabel","inlineUserAssistance","aRef","compactUserAssistance","CompactUserAssistance","mainContent","ReadonlyTextFieldInput","id","as","elementRef","hasEmptyLabel","TextFieldInput","hasEndContent","hasStartContent","inputRef","isMobile","_jsxs","ReadonlyTextField","onBlur","onFocusOut","onFocus","onFocusIn","TextField","endContent","startContent","ColorSwatch","size","isButton","isTooltipDisabled","hasZeroStartMargin","isValidColorValue","displayName"],"mappings":"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"}

package/amd/InputDatePicker-37824ba4.js

@@ -0,0 +1,2 @@
+define(['exports', 'preact/jsx-runtime', 'preact/compat', 'preact/hooks', './Calendar-20d675c6', './HiddenAccessible-037ef42d', './IconButton-787cfcba', './clientHints-dabdb010', './FormFieldContext-a024b891', './logger-00b673c5', './ManageTabStopsContext-e0765389', './useTranslationBundle-1be27606', './safeHref-e764caa8', 'css!./UserAssistanceStyles.styles.css', 'module', './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css', './InlineUserAssistance-ed10a8c8', './Flex-026e94ca', 'css!./MessageBannerStyles.styles.css', 'module', './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css', 'preact', './LayerHost-e32470d1', 'css!./TooltipContentStyles.styles.css', 'module', './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css', './tooltipUtils-13ad7944', 'css!./IconStyle.styles.css', 'css!./MessageStyles.styles.css', './MessageFormattingUtils-ea0be23e', './TransitionGroup-3b9d81b6', './MessagesContext-602a69a2', 'css!./HiddenAccessibleStyles.styles.css', 'css!./ComponentMessageStyles.styles.css', 'module', './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css', './Popup-79f830e3', './UNSAFE_Separator/themes/SeparatorStyles.css', 'css!./LabelStyles.styles.css', 'module', './UNSAFE_Label/themes/redwood/LabelVariants.css', './InputGroupContext-372087af', './UNSAFE_Popup/themes/redwood/PopupVariants.css', './UNSAFE_InputDatePicker/themes/InputDatePickerDropdownStyles.css', './Sheet-57c508aa', './DatePicker-bf7d56dd', './SectionedContent-3f9b094d', './stringUtils-4ffd9d59', './FormContext-f65a2f89', './useFormContext-75f72bd2', './useId-c9578d26', './calendarDateUtils-6b5f47a4', './getFormatParse-10009d38', './maskUtils-a48b96c5', './useHiddenTestMethod-9006c107', './useTestId-b1b9a382', './formControlUtils-a28263ff', './UNSAFE_InputDatePicker/themes/InputDatePickerStyles.css', './InputDateMask-bcb67eab'], (function(e,s,t,a,n,o,i,r,l,d,c,u,m,p,h,b,y,f,C,k,v,S,x,D,A,T,I,F,g,P,R,U,w,M,j,_,H,B,V,E,N,O,L,Y,Z,z,W,G,q,J,K,Q,X,$,ee,se,te,ae,ne){"use strict";const oe=({anchorRef:e,assistiveText:t,dayFormatter:n,daysOutsideMonth:o,helpSourceLink:i,helpSourceText:r,isDisabled:d,isOpen:c,isReadonly:m,label:p,onClose:h,onCommit:b,max:f,messages:C,min:k,monthAndYearPicker:v,testId:S,todayButton:x,todayTimeZone:D,userAssistanceDensity:A,value:T,weekDisplay:I})=>{const[F,g]=a.useState(!1),[P,R]=a.useState(c),U=a.useCallback((e=>{g(e.placement.startsWith("top"))}),[]);P!==c&&(R(c),c||g(!1));const w=ie(),{datePicker_label:M}=u.useTranslationBundle("@oracle/oraclejet-preact"),j=M(),_=s.jsx(z.DatePicker,{dayFormatter:n,daysOutsideMonth:o,height:w?void 0:"auto",onCommit:b,max:f,min:k,maxWidth:w?"100%":void 0,width:"100%",monthAndYearPicker:v,testId:S,todayTimeZone:D,todayButton:x,value:T,weekDisplay:I}),H=!c||F&&!w||d||m||!(t||i||C&&C.length>0)||"efficient"!==A&&"reflow"!==A?void 0:s.jsx(l.FormFieldContext.Provider,{value:{isFocused:!0},children:s.jsx("div",{class:Y.userAssistanceStyles,children:s.jsx(y.InlineUserAssistance,{assistiveText:t,fieldLabel:p,helpSourceLink:i,helpSourceText:r,messages:C,userAssistanceDensity:A})})}),B=S?S+(w?"_sheet":"_dropdown"):void 0,V=s.jsx("div",{class:Y.dropdownStyles,children:s.jsx(W.SectionedContent,{"aria-label":j,footer:H,hasFocusTrap:!0,main:_,role:"dialog",testId:B})});return w?s.jsx(Z.Sheet,{initialFocus:"firstFocusable",isOpen:c,onClose:h,children:s.jsx(W.SectionedContent,{"aria-label":j,footer:H,hasFocusTrap:!0,main:_,role:"dialog",testId:B})}):s.jsx(W.StickyPositioningDropdown,{anchorRef:e,initialFocus:"firstFocusable",isOpen:c,onClose:h,onPosition:U,sizeOptions:{isMaxWidthAdjusted:!1,isMaxHeightAdjusted:!0},children:V})},ie=()=>"phone"===r.getClientHints().deviceType,re=t.forwardRef((({"aria-describedby":e,assistiveText:t,dayFormatter:r,daysOutsideMonth:l,helpSourceLink:d,helpSourceText:c,isDisabled:m,isReadonly:p,label:h,max:b,messages:y,min:f,monthAndYearPicker:C,todayTimeZone:k,todayButton:v,value:S,onCommit:x,onInput:D,testId:A,userAssistanceDensity:T,weekDisplay:I,...F},g)=>{const P=se.useTestId(A),R=a.useRef(null),{calendarIconActionHandler:U,datePickerCommitHandler:w,completeDateValue:M,dateValue:j,dropdownCloseHandler:_,iconRef:H,isOpen:B,maskCommitHandler:V,maskInputHandler:E,maskRef:N}=(({isDisabled:e,isReadonly:s,onCommit:t,onInput:n,rootRef:o,value:i})=>{const[r,l]=a.useState(!1),d=a.useRef(null),c=a.useRef(null),u=a.useRef(!1),m=a.useRef(),p=a.useRef(i),h=a.useRef(i);$.calendarDatesAreDifferent(h.current,i)&&(h.current=i,p.current=i);const b=a.useCallback((e=>{if($.calendarDatesAreDifferent(e.value,h.current)){const s=void 0!==e.value?Object.freeze({...e.value}):e.value;n({previousValue:h.current,value:s}),h.current=s}}),[n]),y=a.useCallback((e=>{$.calendarDatesAreDifferent(e.value,p.current)&&(t?.({previousValue:p.current,value:e.value}),p.current=e.value)}),[t]),f=a.useCallback((e=>{b(e)}),[b]),C=a.useCallback((e=>{y(e)}),[y]),k=a.useCallback((()=>{u.current||l((e=>!e)),u.current=!1}),[]),v=a.useCallback((e=>{"outsideMousedown"===e.reason?(u.current=!0,clearTimeout(m.current),m.current=setTimeout((()=>{u.current=!1}),200)):"dismissed"!==e.reason&&"keyboardDismissed"!==e.reason||d.current?.focus(),l(!1)}),[]),S=a.useCallback((e=>{d.current?.focus(),b(e),y(e),l(!1)}),[y,b]),x=a.useCallback((a=>s||e?Promise.reject("Component is readonly or disabled"):(n({value:a,previousValue:i}),t?.({value:a,previousValue:i}),Promise.resolve())),[i,e,s,t,n]);return ee.useHiddenTestMethod({elementRef:o,method:x,name:"_changeValue"}),{calendarIconActionHandler:k,datePickerCommitHandler:S,dropdownCloseHandler:v,completeDateValue:(D=i,D&&Q.isCompleteCalendarDate(D)?D:void 0),dateValue:i,iconRef:d,isOpen:r,maskCommitHandler:C,maskInputHandler:f,maskRef:c};var D})({isDisabled:m,isReadonly:p,onCommit:x,onInput:D,rootRef:R,value:S}),O=a.useRef(null),{inputDatePicker_selectDate:L,inputDatePicker_instruction:Y}=u.useTranslationBundle("@oracle/oraclejet-preact"),Z=L(),{userAssistanceDensity:z}=J.useFormContext(),W=T??z;a.useImperativeHandle(g,(()=>({focus:()=>{N.current?.focus()},blur:()=>{N.current?.blur()}})));const q=K.useId(),X=Y(),ie=m||p?void 0:s.jsx(o.HiddenAccessible,{id:q,isHidden:!0,children:X}),re=m||p?e:G.l([e,q]),le=s.jsx(i.IconButton,{"aria-haspopup":"dialog","aria-label":Z,isDisabled:m,ref:H,size:"sm",testId:A?A+"_calendarIcon":void 0,variant:"ghost",onAction:U,children:s.jsx(n.SvgCalendar,{})}),de=B,ce=te.isEmbeddedVariant(F.variant)?ae.styles.embeddedRoot:void 0;return s.jsxs("div",{...P,class:ce,ref:R,children:[s.jsx(ne.InputDateMaskContext.Provider,{value:{endContentVisualOffset:"buttonSm",isDropdownOpen:B,isInputDatePickerParent:!0},children:s.jsx(ne.InputDateMask,{"aria-describedby":re,assistiveText:t,endContent:le,helpSourceLink:d,helpSourceText:c,isDisabled:m,isReadonly:p,label:h,onCommit:V,onInput:E,mainFieldRef:O,messages:y,testId:A?A+"_mask":void 0,ref:N,userAssistanceDensity:T,value:j,...F})}),ie,de&&s.jsx(oe,{anchorRef:O,assistiveText:t,dayFormatter:r,daysOutsideMonth:l,helpSourceLink:d,helpSourceText:c,isDisabled:m,isReadonly:p,isOpen:B,label:h,onClose:_,onCommit:w,max:b,messages:y,min:f,monthAndYearPicker:C,testId:A?A+"_datePicker":void 0,todayTimeZone:k,todayButton:v,userAssistanceDensity:W,value:M,weekDisplay:I})]})}));e.InputDatePicker=re}));
+//# sourceMappingURL=InputDatePicker-37824ba4.js.map